@cntrl-site/components 1.0.12-alpha.11 → 1.0.12-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Components/LightboxJournal/LightboxJournal.d.ts +75 -0
- package/dist/Components/LightboxJournal/LightboxJournalComponent.d.ts +42 -0
- package/dist/Components/LightboxStrip/LightboxStrip.d.ts +44 -0
- package/dist/Components/LightboxStrip/LightboxStripComponent.d.ts +42 -0
- package/dist/Components/List/List.d.ts +0 -1
- package/dist/index.js +2662 -29
- package/dist/index.mjs +8149 -3568
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),p=require("react"),Te=require("classnames"),E=require("./readTestimonialTextMeasure-CB_Uq-fO.js"),Qi=require("react-dom");function Zr(e){return e.type==="object"&&e.version===1}const Jr="ControlSlider-module__wrapper___sHEkd",Qr="ControlSlider-module__hoverArrow___A-dOH",ea="ControlSlider-module__sliderItem___QQSkR",ta="ControlSlider-module__sliderImage___9hRl-",na="ControlSlider-module__arrow___05ghY",oa="ControlSlider-module__arrowVertical___tBfVN",ia="ControlSlider-module__nextArrow___-30Yc",ra="ControlSlider-module__arrowInner___aEra3",aa="ControlSlider-module__arrowIcon___S4ztF",sa="ControlSlider-module__arrowImg___2dwJW",la="ControlSlider-module__mirror___brd6U",ca="ControlSlider-module__pagination___bicLF",da="ControlSlider-module__paginationInner___bT-P-",ua="ControlSlider-module__paginationVertical___zYqKw",pa="ControlSlider-module__paginationItem___nTRbk",ma="ControlSlider-module__dot___p1Qun",ga="ControlSlider-module__activeDot___LHFaj",ha="ControlSlider-module__paginationInsideBottom___R3FWn",fa="ControlSlider-module__paginationInsideTop___V-qb-",ya="ControlSlider-module__paginationOutsideBottom___14w8D",va="ControlSlider-module__paginationOutsideTop___SCLqB",ba="ControlSlider-module__paginationInsideLeft___yOBRZ",xa="ControlSlider-module__paginationInsideRight___Rtt3o",Ca="ControlSlider-module__paginationOutsideLeft___lahaw",Sa="ControlSlider-module__paginationOutsideRight___EtuQa",wa="ControlSlider-module__imgWrapper___UjEgB",$a="ControlSlider-module__captionBlock___dJ6-j",Ta="ControlSlider-module__captionTextWrapper___HFlpf",La="ControlSlider-module__captionText___uGBVc",Ea="ControlSlider-module__active___WZK4G",Pa="ControlSlider-module__withPointerEvents___t-18M",_a="ControlSlider-module__topLeftAlignment___zjnGM",Aa="ControlSlider-module__topCenterAlignment___gD1xW",Ra="ControlSlider-module__topRightAlignment___NMapS",Wa="ControlSlider-module__middleLeftAlignment___OnUrY",Ia="ControlSlider-module__middleCenterAlignment___Tdkl0",ka="ControlSlider-module__middleRightAlignment___wEbfX",Fa="ControlSlider-module__bottomLeftAlignment___cTP2-",Ma="ControlSlider-module__bottomCenterAlignment___c54fB",Na="ControlSlider-module__bottomRightAlignment___kEwrz",Ha="ControlSlider-module__clickOverlay___DZA28",Ba="ControlSlider-module__contain___pLyq7",Oa="ControlSlider-module__cover___KdDat",ae={wrapper:Jr,hoverArrow:Qr,sliderItem:ea,sliderImage:ta,arrow:na,arrowVertical:oa,nextArrow:ia,arrowInner:ra,arrowIcon:aa,arrowImg:sa,mirror:la,pagination:ca,paginationInner:da,paginationVertical:ua,paginationItem:pa,dot:ma,activeDot:ga,paginationInsideBottom:ha,paginationInsideTop:fa,paginationOutsideBottom:ya,paginationOutsideTop:va,paginationInsideLeft:ba,paginationInsideRight:xa,paginationOutsideLeft:Ca,paginationOutsideRight:Sa,imgWrapper:wa,captionBlock:$a,captionTextWrapper:Ta,captionText:La,active:Ea,withPointerEvents:Pa,topLeftAlignment:_a,topCenterAlignment:Aa,topRightAlignment:Ra,middleLeftAlignment:Wa,middleCenterAlignment:Ia,middleRightAlignment:ka,bottomLeftAlignment:Fa,bottomCenterAlignment:Ma,bottomRightAlignment:Na,clickOverlay:Ha,contain:Ba,cover:Oa};function Va(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function Da(e,t,n){return t&&Va(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var fi="(prefers-reduced-motion: reduce)",Jt=1,ja=2,tn=3,ln=4,En=5,Un=6,eo=7,za={CREATED:Jt,MOUNTED:ja,IDLE:tn,MOVING:ln,SCROLLING:En,DRAGGING:Un,DESTROYED:eo};function wt(e){e.length=0}function It(e,t,n){return Array.prototype.slice.call(e,t,n)}function Ae(e){return e.bind.apply(e,[null].concat(It(arguments,1)))}var er=setTimeout,Ro=function(){};function yi(e){return requestAnimationFrame(e)}function ao(e,t){return typeof t===e}function fn(e){return!Do(e)&&ao("object",e)}var Vo=Array.isArray,tr=Ae(ao,"function"),At=Ae(ao,"string"),Pn=Ae(ao,"undefined");function Do(e){return e===null}function nr(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function _n(e){return Vo(e)?e:[e]}function rt(e,t){_n(e).forEach(t)}function jo(e,t){return e.indexOf(t)>-1}function Gn(e,t){return e.push.apply(e,_n(t)),e}function bt(e,t,n){e&&rt(t,function(o){o&&e.classList[n?"add":"remove"](o)})}function gt(e,t){bt(e,At(t)?t.split(" "):t,!0)}function An(e,t){rt(t,e.appendChild.bind(e))}function zo(e,t){rt(e,function(n){var o=(t||n).parentNode;o&&o.insertBefore(n,t)})}function yn(e,t){return nr(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function or(e,t){var n=e?It(e.children):[];return t?n.filter(function(o){return yn(o,t)}):n}function Rn(e,t){return t?or(e,t)[0]:e.firstElementChild}var vn=Object.keys;function Dt(e,t,n){return e&&(n?vn(e).reverse():vn(e)).forEach(function(o){o!=="__proto__"&&t(e[o],o)}),e}function bn(e){return It(arguments,1).forEach(function(t){Dt(t,function(n,o){e[o]=t[o]})}),e}function Pt(e){return It(arguments,1).forEach(function(t){Dt(t,function(n,o){Vo(n)?e[o]=n.slice():fn(n)?e[o]=Pt({},fn(e[o])?e[o]:{},n):e[o]=n})}),e}function vi(e,t){rt(t||vn(e),function(n){delete e[n]})}function ht(e,t){rt(e,function(n){rt(t,function(o){n&&n.removeAttribute(o)})})}function he(e,t,n){fn(t)?Dt(t,function(o,r){he(e,r,o)}):rt(e,function(o){Do(n)||n===""?ht(o,t):o.setAttribute(t,String(n))})}function Qt(e,t,n){var o=document.createElement(e);return t&&(At(t)?gt(o,t):he(o,t)),n&&An(n,o),o}function at(e,t,n){if(Pn(n))return getComputedStyle(e)[t];Do(n)||(e.style[t]=""+n)}function xn(e,t){at(e,"display",t)}function ir(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function st(e,t){return e.getAttribute(t)}function bi(e,t){return e&&e.classList.contains(t)}function nt(e){return e.getBoundingClientRect()}function jt(e){rt(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function rr(e){return Rn(new DOMParser().parseFromString(e,"text/html").body)}function vt(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function ar(e,t){return e&&e.querySelector(t)}function Ko(e,t){return t?It(e.querySelectorAll(t)):[]}function xt(e,t){bt(e,t,!1)}function Wo(e){return e.timeStamp}function Ht(e){return At(e)?e:e?e+"px":""}var Wn="splide",qo="data-"+Wn;function gn(e,t){if(!e)throw new Error("["+Wn+"] "+(t||""))}var Rt=Math.min,to=Math.max,no=Math.floor,Cn=Math.ceil,Ue=Math.abs;function sr(e,t,n){return Ue(e-t)<n}function Yn(e,t,n,o){var r=Rt(t,n),a=to(t,n);return o?r<e&&e<a:r<=e&&e<=a}function Yt(e,t,n){var o=Rt(t,n),r=to(t,n);return Rt(to(o,e),r)}function Io(e){return+(e>0)-+(e<0)}function ko(e,t){return rt(t,function(n){e=e.replace("%s",""+n)}),e}function Uo(e){return e<10?"0"+e:""+e}var xi={};function Ka(e){return""+e+Uo(xi[e]=(xi[e]||0)+1)}function lr(){var e=[];function t(i,c,s,d){r(i,c,function(u,P,v){var x="addEventListener"in u,h=x?u.removeEventListener.bind(u,P,s,d):u.removeListener.bind(u,s);x?u.addEventListener(P,s,d):u.addListener(s),e.push([u,P,v,s,h])})}function n(i,c,s){r(i,c,function(d,u,P){e=e.filter(function(v){return v[0]===d&&v[1]===u&&v[2]===P&&(!s||v[3]===s)?(v[4](),!1):!0})})}function o(i,c,s){var d,u=!0;return typeof CustomEvent=="function"?d=new CustomEvent(c,{bubbles:u,detail:s}):(d=document.createEvent("CustomEvent"),d.initCustomEvent(c,u,!1,s)),i.dispatchEvent(d),d}function r(i,c,s){rt(i,function(d){d&&rt(c,function(u){u.split(" ").forEach(function(P){var v=P.split(".");s(d,v[0],v[1])})})})}function a(){e.forEach(function(i){i[4]()}),wt(e)}return{bind:t,unbind:n,dispatch:o,destroy:a}}var kt="mounted",Fo="ready",$t="move",cn="moved",Go="click",cr="active",dr="inactive",ur="visible",pr="hidden",Be="refresh",Ke="updated",nn="resize",so="resized",mr="drag",gr="dragging",hr="dragged",lo="scroll",Kt="scrolled",qa="overflow",Yo="destroy",fr="arrows:mounted",yr="arrows:updated",vr="pagination:mounted",br="pagination:updated",Xo="navigation:mounted",Zo="autoplay:play",xr="autoplay:playing",Jo="autoplay:pause",Qo="lazyload:loaded",Cr="sk",Sr="sh",oo="ei";function Fe(e){var t=e?e.event.bus:document.createDocumentFragment(),n=lr();function o(a,i){n.bind(t,_n(a).join(" "),function(c){i.apply(i,Vo(c.detail)?c.detail:[])})}function r(a){n.dispatch(t,a,It(arguments,1))}return e&&e.event.on(Yo,n.destroy),bn(n,{bus:t,on:o,off:Ae(n.unbind,t),emit:r})}function co(e,t,n,o){var r=Date.now,a,i=0,c,s=!0,d=0;function u(){if(!s){if(i=e?Rt((r()-a)/e,1):1,n&&n(i),i>=1&&(t(),a=r(),o&&++d>=o))return v();c=yi(u)}}function P(L){L||h(),a=r()-(L?i*e:0),s=!1,c=yi(u)}function v(){s=!0}function x(){a=r(),i=0,n&&n(i)}function h(){c&&cancelAnimationFrame(c),i=0,c=0,s=!0}function g(L){e=L}function T(){return s}return{start:P,rewind:x,pause:v,cancel:h,set:g,isPaused:T}}function Ua(e){var t=e;function n(r){t=r}function o(r){return jo(_n(r),t)}return{set:n,is:o}}function Ga(e,t){var n=co(0,e,null,1);return function(){n.isPaused()&&n.start()}}function Ya(e,t,n){var o=e.state,r=n.breakpoints||{},a=n.reducedMotion||{},i=lr(),c=[];function s(){var h=n.mediaQuery==="min";vn(r).sort(function(g,T){return h?+g-+T:+T-+g}).forEach(function(g){u(r[g],"("+(h?"min":"max")+"-width:"+g+"px)")}),u(a,fi),P()}function d(h){h&&i.destroy()}function u(h,g){var T=matchMedia(g);i.bind(T,"change",P),c.push([h,T])}function P(){var h=o.is(eo),g=n.direction,T=c.reduce(function(L,b){return Pt(L,b[1].matches?b[0]:{})},{});vi(n),x(T),n.destroy?e.destroy(n.destroy==="completely"):h?(d(!0),e.mount()):g!==n.direction&&e.refresh()}function v(h){matchMedia(fi).matches&&(h?Pt(n,a):vi(n,vn(a)))}function x(h,g,T){Pt(n,h),g&&Pt(Object.getPrototypeOf(n),h),(T||!o.is(Jt))&&e.emit(Ke,n)}return{setup:s,destroy:d,reduce:v,set:x}}var uo="Arrow",po=uo+"Left",mo=uo+"Right",wr=uo+"Up",$r=uo+"Down",Ci="rtl",go="ttb",xo={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[wr,mo],ArrowRight:[$r,po]};function Xa(e,t,n){function o(a,i,c){c=c||n.direction;var s=c===Ci&&!i?1:c===go?0:-1;return xo[a]&&xo[a][s]||a.replace(/width|left|right/i,function(d,u){var P=xo[d.toLowerCase()][s]||d;return u>0?P.charAt(0).toUpperCase()+P.slice(1):P})}function r(a){return a*(n.direction===Ci?1:-1)}return{resolve:o,orient:r}}var Ct="role",en="tabindex",Za="disabled",lt="aria-",In=lt+"controls",Tr=lt+"current",Si=lt+"selected",ot=lt+"label",ei=lt+"labelledby",Lr=lt+"hidden",ti=lt+"orientation",Sn=lt+"roledescription",wi=lt+"live",$i=lt+"busy",Ti=lt+"atomic",ni=[Ct,en,Za,In,Tr,ot,ei,Lr,ti,Sn],ft=Wn+"__",Ft="is-",Co=Wn,Li=ft+"track",Ja=ft+"list",ho=ft+"slide",Er=ho+"--clone",Qa=ho+"__container",oi=ft+"arrows",fo=ft+"arrow",Pr=fo+"--prev",_r=fo+"--next",yo=ft+"pagination",Ar=yo+"__page",es=ft+"progress",ts=es+"__bar",ns=ft+"toggle",os=ft+"spinner",is=ft+"sr",rs=Ft+"initialized",zt=Ft+"active",Rr=Ft+"prev",Wr=Ft+"next",Mo=Ft+"visible",No=Ft+"loading",Ir=Ft+"focus-in",kr=Ft+"overflow",as=[zt,Mo,Rr,Wr,No,Ir,kr],ss={slide:ho,clone:Er,arrows:oi,arrow:fo,prev:Pr,next:_r,pagination:yo,page:Ar,spinner:os};function ls(e,t){if(tr(e.closest))return e.closest(t);for(var n=e;n&&n.nodeType===1&&!yn(n,t);)n=n.parentElement;return n}var cs=5,Ei=200,Fr="touchstart mousedown",So="touchmove mousemove",wo="touchend touchcancel mouseup click";function ds(e,t,n){var o=Fe(e),r=o.on,a=o.bind,i=e.root,c=n.i18n,s={},d=[],u=[],P=[],v,x,h;function g(){m(),H(),b()}function T(){r(Be,L),r(Be,g),r(Ke,b),a(document,Fr+" keydown",function(C){h=C.type==="keydown"},{capture:!0}),a(i,"focusin",function(){bt(i,Ir,!!h)})}function L(C){var W=ni.concat("style");wt(d),xt(i,u),xt(v,P),ht([v,x],W),ht(i,C?W:["style",Sn])}function b(){xt(i,u),xt(v,P),u=_(Co),P=_(Li),gt(i,u),gt(v,P),he(i,ot,n.label),he(i,ei,n.labelledby)}function m(){v=F("."+Li),x=Rn(v,"."+Ja),gn(v&&x,"A track/list element is missing."),Gn(d,or(x,"."+ho+":not(."+Er+")")),Dt({arrows:oi,pagination:yo,prev:Pr,next:_r,bar:ts,toggle:ns},function(C,W){s[W]=F("."+C)}),bn(s,{root:i,track:v,list:x,slides:d})}function H(){var C=i.id||Ka(Wn),W=n.role;i.id=C,v.id=v.id||C+"-track",x.id=x.id||C+"-list",!st(i,Ct)&&i.tagName!=="SECTION"&&W&&he(i,Ct,W),he(i,Sn,c.carousel),he(x,Ct,"presentation")}function F(C){var W=ar(i,C);return W&&ls(W,"."+Co)===i?W:void 0}function _(C){return[C+"--"+n.type,C+"--"+n.direction,n.drag&&C+"--draggable",n.isNavigation&&C+"--nav",C===Co&&zt]}return bn(s,{setup:g,mount:T,destroy:L})}var on="slide",dn="loop",kn="fade";function us(e,t,n,o){var r=Fe(e),a=r.on,i=r.emit,c=r.bind,s=e.Components,d=e.root,u=e.options,P=u.isNavigation,v=u.updateOnMove,x=u.i18n,h=u.pagination,g=u.slideFocus,T=s.Direction.resolve,L=st(o,"style"),b=st(o,ot),m=n>-1,H=Rn(o,"."+Qa),F;function _(){m||(o.id=d.id+"-slide"+Uo(t+1),he(o,Ct,h?"tabpanel":"group"),he(o,Sn,x.slide),he(o,ot,b||ko(x.slideLabel,[t+1,e.length]))),C()}function C(){c(o,"click",Ae(i,Go,R)),c(o,"keydown",Ae(i,Cr,R)),a([cn,Sr,Kt],S),a(Xo,w),v&&a($t,O)}function W(){F=!0,r.destroy(),xt(o,as),ht(o,ni),he(o,"style",L),he(o,ot,b||"")}function w(){var B=e.splides.map(function(I){var A=I.splide.Components.Slides.getAt(t);return A?A.slide.id:""}).join(" ");he(o,ot,ko(x.slideX,(m?n:t)+1)),he(o,In,B),he(o,Ct,g?"button":""),g&&ht(o,Sn)}function O(){F||S()}function S(){if(!F){var B=e.index;V(),D(),bt(o,Rr,t===B-1),bt(o,Wr,t===B+1)}}function V(){var B=q();B!==bi(o,zt)&&(bt(o,zt,B),he(o,Tr,P&&B||""),i(B?cr:dr,R))}function D(){var B=$(),I=!B&&(!q()||m);if(e.state.is([ln,En])||he(o,Lr,I||""),he(Ko(o,u.focusableNodes||""),en,I?-1:""),g&&he(o,en,I?-1:0),B!==bi(o,Mo)&&(bt(o,Mo,B),i(B?ur:pr,R)),!B&&document.activeElement===o){var A=s.Slides.getAt(e.index);A&&ir(A.slide)}}function Z(B,I,A){at(A&&H||o,B,I)}function q(){var B=e.index;return B===t||u.cloneStatus&&B===n}function $(){if(e.is(kn))return q();var B=nt(s.Elements.track),I=nt(o),A=T("left",!0),Q=T("right",!0);return no(B[A])<=Cn(I[A])&&no(I[Q])<=Cn(B[Q])}function k(B,I){var A=Ue(B-t);return!m&&(u.rewind||e.is(dn))&&(A=Rt(A,e.length-A)),A<=I}var R={index:t,slideIndex:n,slide:o,container:H,isClone:m,mount:_,destroy:W,update:S,style:Z,isWithin:k};return R}function ps(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=o.bind,c=t.Elements,s=c.slides,d=c.list,u=[];function P(){v(),r(Be,x),r(Be,v)}function v(){s.forEach(function(S,V){g(S,V,-1)})}function x(){F(function(S){S.destroy()}),wt(u)}function h(){F(function(S){S.update()})}function g(S,V,D){var Z=us(e,V,D,S);Z.mount(),u.push(Z),u.sort(function(q,$){return q.index-$.index})}function T(S){return S?_(function(V){return!V.isClone}):u}function L(S){var V=t.Controller,D=V.toIndex(S),Z=V.hasFocus()?1:n.perPage;return _(function(q){return Yn(q.index,D,D+Z-1)})}function b(S){return _(S)[0]}function m(S,V){rt(S,function(D){if(At(D)&&(D=rr(D)),nr(D)){var Z=s[V];Z?zo(D,Z):An(d,D),gt(D,n.classes.slide),W(D,Ae(a,nn))}}),a(Be)}function H(S){jt(_(S).map(function(V){return V.slide})),a(Be)}function F(S,V){T(V).forEach(S)}function _(S){return u.filter(tr(S)?S:function(V){return At(S)?yn(V.slide,S):jo(_n(S),V.index)})}function C(S,V,D){F(function(Z){Z.style(S,V,D)})}function W(S,V){var D=Ko(S,"img"),Z=D.length;Z?D.forEach(function(q){i(q,"load error",function(){--Z||V()})}):V()}function w(S){return S?s.length:u.length}function O(){return u.length>n.perPage}return{mount:P,destroy:x,update:h,register:g,get:T,getIn:L,getAt:b,add:m,remove:H,forEach:F,filter:_,style:C,getLength:w,isEnough:O}}function ms(e,t,n){var o=Fe(e),r=o.on,a=o.bind,i=o.emit,c=t.Slides,s=t.Direction.resolve,d=t.Elements,u=d.root,P=d.track,v=d.list,x=c.getAt,h=c.style,g,T,L;function b(){m(),a(window,"resize load",Ga(Ae(i,nn))),r([Ke,Be],m),r(nn,H)}function m(){g=n.direction===go,at(u,"maxWidth",Ht(n.width)),at(P,s("paddingLeft"),F(!1)),at(P,s("paddingRight"),F(!0)),H(!0)}function H(R){var B=nt(u);(R||T.width!==B.width||T.height!==B.height)&&(at(P,"height",_()),h(s("marginRight"),Ht(n.gap)),h("width",W()),h("height",w(),!0),T=B,i(so),L!==(L=k())&&(bt(u,kr,L),i(qa,L)))}function F(R){var B=n.padding,I=s(R?"right":"left");return B&&Ht(B[I]||(fn(B)?0:B))||"0px"}function _(){var R="";return g&&(R=C(),gn(R,"height or heightRatio is missing."),R="calc("+R+" - "+F(!1)+" - "+F(!0)+")"),R}function C(){return Ht(n.height||nt(v).width*n.heightRatio)}function W(){return n.autoWidth?null:Ht(n.fixedWidth)||(g?"":O())}function w(){return Ht(n.fixedHeight)||(g?n.autoHeight?null:O():C())}function O(){var R=Ht(n.gap);return"calc((100%"+(R&&" + "+R)+")/"+(n.perPage||1)+(R&&" - "+R)+")"}function S(){return nt(v)[s("width")]}function V(R,B){var I=x(R||0);return I?nt(I.slide)[s("width")]+(B?0:q()):0}function D(R,B){var I=x(R);if(I){var A=nt(I.slide)[s("right")],Q=nt(v)[s("left")];return Ue(A-Q)+(B?0:q())}return 0}function Z(R){return D(e.length-1)-D(0)+V(0,R)}function q(){var R=x(0);return R&&parseFloat(at(R.slide,s("marginRight")))||0}function $(R){return parseFloat(at(P,s("padding"+(R?"Right":"Left"))))||0}function k(){return e.is(kn)||Z(!0)>S()}return{mount:b,resize:H,listSize:S,slideSize:V,sliderSize:Z,totalSize:D,getPadding:$,isOverflow:k}}var gs=2;function hs(e,t,n){var o=Fe(e),r=o.on,a=t.Elements,i=t.Slides,c=t.Direction.resolve,s=[],d;function u(){r(Be,P),r([Ke,nn],x),(d=T())&&(h(d),t.Layout.resize(!0))}function P(){v(),u()}function v(){jt(s),wt(s),o.destroy()}function x(){var L=T();d!==L&&(d<L||!L)&&o.emit(Be)}function h(L){var b=i.get().slice(),m=b.length;if(m){for(;b.length<L;)Gn(b,b);Gn(b.slice(-L),b.slice(0,L)).forEach(function(H,F){var _=F<L,C=g(H.slide,F);_?zo(C,b[0].slide):An(a.list,C),Gn(s,C),i.register(C,F-L+(_?0:m),H.index)})}}function g(L,b){var m=L.cloneNode(!0);return gt(m,n.classes.clone),m.id=e.root.id+"-clone"+Uo(b+1),m}function T(){var L=n.clones;if(!e.is(dn))L=0;else if(Pn(L)){var b=n[c("fixedWidth")]&&t.Layout.slideSize(0),m=b&&Cn(nt(a.track)[c("width")]/b);L=m||n[c("autoWidth")]&&e.length||n.perPage*gs}return L}return{mount:u,destroy:v}}function fs(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=e.state.set,c=t.Layout,s=c.slideSize,d=c.getPadding,u=c.totalSize,P=c.listSize,v=c.sliderSize,x=t.Direction,h=x.resolve,g=x.orient,T=t.Elements,L=T.list,b=T.track,m;function H(){m=t.Transition,r([kt,so,Ke,Be],F)}function F(){t.Controller.isBusy()||(t.Scroll.cancel(),C(e.index),t.Slides.update())}function _(I,A,Q,ie){I!==A&&R(I>Q)&&(S(),W(O(Z(),I>Q),!0)),i(ln),a($t,A,Q,I),m.start(A,function(){i(tn),a(cn,A,Q,I),ie&&ie()})}function C(I){W(D(I,!0))}function W(I,A){if(!e.is(kn)){var Q=A?I:w(I);at(L,"transform","translate"+h("X")+"("+Q+"px)"),I!==Q&&a(Sr)}}function w(I){if(e.is(dn)){var A=V(I),Q=A>t.Controller.getEnd(),ie=A<0;(ie||Q)&&(I=O(I,Q))}return I}function O(I,A){var Q=I-k(A),ie=v();return I-=g(ie*(Cn(Ue(Q)/ie)||1))*(A?1:-1),I}function S(){W(Z(),!0),m.cancel()}function V(I){for(var A=t.Slides.get(),Q=0,ie=1/0,re=0;re<A.length;re++){var U=A[re].index,M=Ue(D(U,!0)-I);if(M<=ie)ie=M,Q=U;else break}return Q}function D(I,A){var Q=g(u(I-1)-$(I));return A?q(Q):Q}function Z(){var I=h("left");return nt(L)[I]-nt(b)[I]+g(d(!1))}function q(I){return n.trimSpace&&e.is(on)&&(I=Yt(I,0,g(v(!0)-P()))),I}function $(I){var A=n.focus;return A==="center"?(P()-s(I,!0))/2:+A*s(I)||0}function k(I){return D(I?t.Controller.getEnd():0,!!n.trimSpace)}function R(I){var A=g(O(Z(),I));return I?A>=0:A<=L[h("scrollWidth")]-nt(b)[h("width")]}function B(I,A){A=Pn(A)?Z():A;var Q=I!==!0&&g(A)<g(k(!1)),ie=I!==!1&&g(A)>g(k(!0));return Q||ie}return{mount:H,move:_,jump:C,translate:W,shift:O,cancel:S,toIndex:V,toPosition:D,getPosition:Z,getLimit:k,exceededLimit:B,reposition:F}}function ys(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=t.Move,c=i.getPosition,s=i.getLimit,d=i.toPosition,u=t.Slides,P=u.isEnough,v=u.getLength,x=n.omitEnd,h=e.is(dn),g=e.is(on),T=Ae(Z,!1),L=Ae(Z,!0),b=n.start||0,m,H=b,F,_,C;function W(){w(),r([Ke,Be,oo],w),r(so,O)}function w(){F=v(!0),_=n.perMove,C=n.perPage,m=R();var M=Yt(b,0,x?m:F-1);M!==b&&(b=M,i.reposition())}function O(){m!==R()&&a(oo)}function S(M,oe,Ce){if(!U()){var ue=D(M),fe=k(ue);fe>-1&&(oe||fe!==b)&&(Q(fe),i.move(ue,fe,H,Ce))}}function V(M,oe,Ce,ue){t.Scroll.scroll(M,oe,Ce,function(){var fe=k(i.toIndex(c()));Q(x?Rt(fe,m):fe),ue&&ue()})}function D(M){var oe=b;if(At(M)){var Ce=M.match(/([+\-<>])(\d+)?/)||[],ue=Ce[1],fe=Ce[2];ue==="+"||ue==="-"?oe=q(b+ +(""+ue+(+fe||1)),b):ue===">"?oe=fe?B(+fe):T(!0):ue==="<"&&(oe=L(!0))}else oe=h?M:Yt(M,0,m);return oe}function Z(M,oe){var Ce=_||(re()?1:C),ue=q(b+Ce*(M?-1:1),b,!(_||re()));return ue===-1&&g&&!sr(c(),s(!M),1)?M?0:m:oe?ue:k(ue)}function q(M,oe,Ce){if(P()||re()){var ue=$(M);ue!==M&&(oe=M,M=ue,Ce=!1),M<0||M>m?!_&&(Yn(0,M,oe,!0)||Yn(m,oe,M,!0))?M=B(I(M)):h?M=Ce?M<0?-(F%C||C):F:M:n.rewind?M=M<0?m:0:M=-1:Ce&&M!==oe&&(M=B(I(oe)+(M<oe?-1:1)))}else M=-1;return M}function $(M){if(g&&n.trimSpace==="move"&&M!==b)for(var oe=c();oe===d(M,!0)&&Yn(M,0,e.length-1,!n.rewind);)M<b?--M:++M;return M}function k(M){return h?(M+F)%F||0:M}function R(){for(var M=F-(re()||h&&_?1:C);x&&M-- >0;)if(d(F-1,!0)!==d(M,!0)){M++;break}return Yt(M,0,F-1)}function B(M){return Yt(re()?M:C*M,0,m)}function I(M){return re()?Rt(M,m):no((M>=m?F-1:M)/C)}function A(M){var oe=i.toIndex(M);return g?Yt(oe,0,m):oe}function Q(M){M!==b&&(H=b,b=M)}function ie(M){return M?H:b}function re(){return!Pn(n.focus)||n.isNavigation}function U(){return e.state.is([ln,En])&&!!n.waitForTransition}return{mount:W,go:S,scroll:V,getNext:T,getPrev:L,getAdjacent:Z,getEnd:R,setIndex:Q,getIndex:ie,toIndex:B,toPage:I,toDest:A,hasFocus:re,isBusy:U}}var vs="http://www.w3.org/2000/svg",bs="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z",On=40;function xs(e,t,n){var o=Fe(e),r=o.on,a=o.bind,i=o.emit,c=n.classes,s=n.i18n,d=t.Elements,u=t.Controller,P=d.arrows,v=d.track,x=P,h=d.prev,g=d.next,T,L,b={};function m(){F(),r(Ke,H)}function H(){_(),m()}function F(){var V=n.arrows;V&&!(h&&g)&&w(),h&&g&&(bn(b,{prev:h,next:g}),xn(x,V?"":"none"),gt(x,L=oi+"--"+n.direction),V&&(C(),S(),he([h,g],In,v.id),i(fr,h,g)))}function _(){o.destroy(),xt(x,L),T?(jt(P?[h,g]:x),h=g=null):ht([h,g],ni)}function C(){r([kt,cn,Be,Kt,oo],S),a(g,"click",Ae(W,">")),a(h,"click",Ae(W,"<"))}function W(V){u.go(V,!0)}function w(){x=P||Qt("div",c.arrows),h=O(!0),g=O(!1),T=!0,An(x,[h,g]),!P&&zo(x,v)}function O(V){var D='<button class="'+c.arrow+" "+(V?c.prev:c.next)+'" type="button"><svg xmlns="'+vs+'" viewBox="0 0 '+On+" "+On+'" width="'+On+'" height="'+On+'" focusable="false"><path d="'+(n.arrowPath||bs)+'" />';return rr(D)}function S(){if(h&&g){var V=e.index,D=u.getPrev(),Z=u.getNext(),q=D>-1&&V<D?s.last:s.prev,$=Z>-1&&V>Z?s.first:s.next;h.disabled=D<0,g.disabled=Z<0,he(h,ot,q),he(g,ot,$),i(yr,h,g,D,Z)}}return{arrows:b,mount:m,destroy:_,update:S}}var Cs=qo+"-interval";function Ss(e,t,n){var o=Fe(e),r=o.on,a=o.bind,i=o.emit,c=co(n.interval,e.go.bind(e,">"),C),s=c.isPaused,d=t.Elements,u=t.Elements,P=u.root,v=u.toggle,x=n.autoplay,h,g,T=x==="pause";function L(){x&&(b(),v&&he(v,In,d.track.id),T||m(),_())}function b(){n.pauseOnHover&&a(P,"mouseenter mouseleave",function(w){h=w.type==="mouseenter",F()}),n.pauseOnFocus&&a(P,"focusin focusout",function(w){g=w.type==="focusin",F()}),v&&a(v,"click",function(){T?m():H(!0)}),r([$t,lo,Be],c.rewind),r($t,W)}function m(){s()&&t.Slides.isEnough()&&(c.start(!n.resetProgress),g=h=T=!1,_(),i(Zo))}function H(w){w===void 0&&(w=!0),T=!!w,_(),s()||(c.pause(),i(Jo))}function F(){T||(h||g?H(!1):m())}function _(){v&&(bt(v,zt,!T),he(v,ot,n.i18n[T?"play":"pause"]))}function C(w){var O=d.bar;O&&at(O,"width",w*100+"%"),i(xr,w)}function W(w){var O=t.Slides.getAt(w);c.set(O&&+st(O.slide,Cs)||n.interval)}return{mount:L,destroy:c.cancel,play:m,pause:H,isPaused:s}}function ws(e,t,n){var o=Fe(e),r=o.on;function a(){n.cover&&(r(Qo,Ae(c,!0)),r([kt,Ke,Be],Ae(i,!0)))}function i(s){t.Slides.forEach(function(d){var u=Rn(d.container||d.slide,"img");u&&u.src&&c(s,u,d)})}function c(s,d,u){u.style("background",s?'center/cover no-repeat url("'+d.src+'")':"",!0),xn(d,s?"none":"")}return{mount:a,destroy:Ae(i,!1)}}var $s=10,Ts=600,Ls=.6,Es=1.5,Ps=800;function _s(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=e.state.set,c=t.Move,s=c.getPosition,d=c.getLimit,u=c.exceededLimit,P=c.translate,v=e.is(on),x,h,g=1;function T(){r($t,H),r([Ke,Be],F)}function L(C,W,w,O,S){var V=s();if(H(),w&&(!v||!u())){var D=t.Layout.sliderSize(),Z=Io(C)*D*no(Ue(C)/D)||0;C=c.toPosition(t.Controller.toDest(C%D))+Z}var q=sr(V,C,1);g=1,W=q?0:W||to(Ue(C-V)/Es,Ps),h=O,x=co(W,b,Ae(m,V,C,S),1),i(En),a(lo),x.start()}function b(){i(tn),h&&h(),a(Kt)}function m(C,W,w,O){var S=s(),V=C+(W-C)*_(O),D=(V-S)*g;P(S+D),v&&!w&&u()&&(g*=Ls,Ue(D)<$s&&L(d(u(!0)),Ts,!1,h,!0))}function H(){x&&x.cancel()}function F(){x&&!x.isPaused()&&(H(),b())}function _(C){var W=n.easingFunc;return W?W(C):1-Math.pow(1-C,4)}return{mount:T,destroy:H,scroll:L,cancel:F}}var Xt={passive:!1,capture:!0};function As(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=o.bind,c=o.unbind,s=e.state,d=t.Move,u=t.Scroll,P=t.Controller,v=t.Elements.track,x=t.Media.reduce,h=t.Direction,g=h.resolve,T=h.orient,L=d.getPosition,b=d.exceededLimit,m,H,F,_,C,W=!1,w,O,S;function V(){i(v,So,Ro,Xt),i(v,wo,Ro,Xt),i(v,Fr,Z,Xt),i(v,"click",k,{capture:!0}),i(v,"dragstart",vt),r([kt,Ke],D)}function D(){var y=n.drag;ne(!y),_=y==="free"}function Z(y){if(w=!1,!O){var f=fe(y);ue(y.target)&&(f||!y.button)&&(P.isBusy()?vt(y,!0):(S=f?v:window,C=s.is([ln,En]),F=null,i(S,So,q,Xt),i(S,wo,$,Xt),d.cancel(),u.cancel(),R(y)))}}function q(y){if(s.is(Un)||(s.set(Un),a(mr)),y.cancelable)if(C){d.translate(m+Ce(re(y)));var f=U(y)>Ei,N=W!==(W=b());(f||N)&&R(y),w=!0,a(gr),vt(y)}else A(y)&&(C=I(y),vt(y))}function $(y){s.is(Un)&&(s.set(tn),a(hr)),C&&(B(y),vt(y)),c(S,So,q),c(S,wo,$),C=!1}function k(y){!O&&w&&vt(y,!0)}function R(y){F=H,H=y,m=L()}function B(y){var f=Q(y),N=ie(f),K=n.rewind&&n.rewindByDrag;x(!1),_?P.scroll(N,0,n.snap):e.is(kn)?P.go(T(Io(f))<0?K?"<":"-":K?">":"+"):e.is(on)&&W&&K?P.go(b(!0)?">":"<"):P.go(P.toDest(N),!0),x(!0)}function I(y){var f=n.dragMinThreshold,N=fn(f),K=N&&f.mouse||0,G=(N?f.touch:+f)||10;return Ue(re(y))>(fe(y)?G:K)}function A(y){return Ue(re(y))>Ue(re(y,!0))}function Q(y){if(e.is(dn)||!W){var f=U(y);if(f&&f<Ei)return re(y)/f}return 0}function ie(y){return L()+Io(y)*Rt(Ue(y)*(n.flickPower||600),_?1/0:t.Layout.listSize()*(n.flickMaxPages||1))}function re(y,f){return oe(y,f)-oe(M(y),f)}function U(y){return Wo(y)-Wo(M(y))}function M(y){return H===y&&F||H}function oe(y,f){return(fe(y)?y.changedTouches[0]:y)["page"+g(f?"Y":"X")]}function Ce(y){return y/(W&&e.is(on)?cs:1)}function ue(y){var f=n.noDrag;return!yn(y,"."+Ar+", ."+fo)&&(!f||!yn(y,f))}function fe(y){return typeof TouchEvent<"u"&&y instanceof TouchEvent}function Re(){return C}function ne(y){O=y}return{mount:V,disable:ne,isDragging:Re}}var Rs={Spacebar:" ",Right:mo,Left:po,Up:wr,Down:$r};function ii(e){return e=At(e)?e:e.key,Rs[e]||e}var Pi="keydown";function Ws(e,t,n){var o=Fe(e),r=o.on,a=o.bind,i=o.unbind,c=e.root,s=t.Direction.resolve,d,u;function P(){v(),r(Ke,x),r(Ke,v),r($t,g)}function v(){var L=n.keyboard;L&&(d=L==="global"?window:c,a(d,Pi,T))}function x(){i(d,Pi)}function h(L){u=L}function g(){var L=u;u=!0,er(function(){u=L})}function T(L){if(!u){var b=ii(L);b===s(po)?e.go("<"):b===s(mo)&&e.go(">")}}return{mount:P,destroy:x,disable:h}}var hn=qo+"-lazy",Xn=hn+"-srcset",Is="["+hn+"], ["+Xn+"]";function ks(e,t,n){var o=Fe(e),r=o.on,a=o.off,i=o.bind,c=o.emit,s=n.lazyLoad==="sequential",d=[cn,Kt],u=[];function P(){n.lazyLoad&&(v(),r(Be,v))}function v(){wt(u),x(),s?L():(a(d),r(d,h),h())}function x(){t.Slides.forEach(function(b){Ko(b.slide,Is).forEach(function(m){var H=st(m,hn),F=st(m,Xn);if(H!==m.src||F!==m.srcset){var _=n.classes.spinner,C=m.parentElement,W=Rn(C,"."+_)||Qt("span",_,C);u.push([m,b,W]),m.src||xn(m,"none")}})})}function h(){u=u.filter(function(b){var m=n.perPage*((n.preloadPages||1)+1)-1;return b[1].isWithin(e.index,m)?g(b):!0}),u.length||a(d)}function g(b){var m=b[0];gt(b[1].slide,No),i(m,"load error",Ae(T,b)),he(m,"src",st(m,hn)),he(m,"srcset",st(m,Xn)),ht(m,hn),ht(m,Xn)}function T(b,m){var H=b[0],F=b[1];xt(F.slide,No),m.type!=="error"&&(jt(b[2]),xn(H,""),c(Qo,H,F),c(nn)),s&&L()}function L(){u.length&&g(u.shift())}return{mount:P,destroy:Ae(wt,u),check:h}}function Fs(e,t,n){var o=Fe(e),r=o.on,a=o.emit,i=o.bind,c=t.Slides,s=t.Elements,d=t.Controller,u=d.hasFocus,P=d.getIndex,v=d.go,x=t.Direction.resolve,h=s.pagination,g=[],T,L;function b(){m(),r([Ke,Be,oo],b);var O=n.pagination;h&&xn(h,O?"":"none"),O&&(r([$t,lo,Kt],w),H(),w(),a(vr,{list:T,items:g},W(e.index)))}function m(){T&&(jt(h?It(T.children):T),xt(T,L),wt(g),T=null),o.destroy()}function H(){var O=e.length,S=n.classes,V=n.i18n,D=n.perPage,Z=u()?d.getEnd()+1:Cn(O/D);T=h||Qt("ul",S.pagination,s.track.parentElement),gt(T,L=yo+"--"+C()),he(T,Ct,"tablist"),he(T,ot,V.select),he(T,ti,C()===go?"vertical":"");for(var q=0;q<Z;q++){var $=Qt("li",null,T),k=Qt("button",{class:S.page,type:"button"},$),R=c.getIn(q).map(function(I){return I.slide.id}),B=!u()&&D>1?V.pageX:V.slideX;i(k,"click",Ae(F,q)),n.paginationKeyboard&&i(k,"keydown",Ae(_,q)),he($,Ct,"presentation"),he(k,Ct,"tab"),he(k,In,R.join(" ")),he(k,ot,ko(B,q+1)),he(k,en,-1),g.push({li:$,button:k,page:q})}}function F(O){v(">"+O,!0)}function _(O,S){var V=g.length,D=ii(S),Z=C(),q=-1;D===x(mo,!1,Z)?q=++O%V:D===x(po,!1,Z)?q=(--O+V)%V:D==="Home"?q=0:D==="End"&&(q=V-1);var $=g[q];$&&(ir($.button),v(">"+q),vt(S,!0))}function C(){return n.paginationDirection||n.direction}function W(O){return g[d.toPage(O)]}function w(){var O=W(P(!0)),S=W(P());if(O){var V=O.button;xt(V,zt),ht(V,Si),he(V,en,-1)}if(S){var D=S.button;gt(D,zt),he(D,Si,!0),he(D,en,"")}a(br,{list:T,items:g},O,S)}return{items:g,mount:b,destroy:m,getAt:W,update:w}}var Ms=[" ","Enter"];function Ns(e,t,n){var o=n.isNavigation,r=n.slideFocus,a=[];function i(){e.splides.forEach(function(h){h.isParent||(d(e,h.splide),d(h.splide,e))}),o&&u()}function c(){a.forEach(function(h){h.destroy()}),wt(a)}function s(){c(),i()}function d(h,g){var T=Fe(h);T.on($t,function(L,b,m){g.go(g.is(dn)?m:L)}),a.push(T)}function u(){var h=Fe(e),g=h.on;g(Go,v),g(Cr,x),g([kt,Ke],P),a.push(h),h.emit(Xo,e.splides)}function P(){he(t.Elements.list,ti,n.direction===go?"vertical":"")}function v(h){e.go(h.index)}function x(h,g){jo(Ms,ii(g))&&(v(h),vt(g))}return{setup:Ae(t.Media.set,{slideFocus:Pn(r)?o:r},!0),mount:i,destroy:c,remount:s}}function Hs(e,t,n){var o=Fe(e),r=o.bind,a=0;function i(){n.wheel&&r(t.Elements.track,"wheel",c,Xt)}function c(d){if(d.cancelable){var u=d.deltaY,P=u<0,v=Wo(d),x=n.wheelMinThreshold||0,h=n.wheelSleep||0;Ue(u)>x&&v-a>h&&(e.go(P?"<":">"),a=v),s(P)&&vt(d)}}function s(d){return!n.releaseWheel||e.state.is(ln)||t.Controller.getAdjacent(d)!==-1}return{mount:i}}var Bs=90;function Os(e,t,n){var o=Fe(e),r=o.on,a=t.Elements.track,i=n.live&&!n.isNavigation,c=Qt("span",is),s=co(Bs,Ae(u,!1));function d(){i&&(v(!t.Autoplay.isPaused()),he(a,Ti,!0),c.textContent="…",r(Zo,Ae(v,!0)),r(Jo,Ae(v,!1)),r([cn,Kt],Ae(u,!0)))}function u(x){he(a,$i,x),x?(An(a,c),s.start()):(jt(c),s.cancel())}function P(){ht(a,[wi,Ti,$i]),jt(c)}function v(x){i&&he(a,wi,x?"off":"polite")}return{mount:d,disable:v,destroy:P}}var Vs=Object.freeze({__proto__:null,Media:Ya,Direction:Xa,Elements:ds,Slides:ps,Layout:ms,Clones:hs,Move:fs,Controller:ys,Arrows:xs,Autoplay:Ss,Cover:ws,Scroll:_s,Drag:As,Keyboard:Ws,LazyLoad:ks,Pagination:Fs,Sync:Ns,Wheel:Hs,Live:Os}),Ds={prev:"Previous slide",next:"Next slide",first:"Go to first slide",last:"Go to last slide",slideX:"Go to slide %s",pageX:"Go to page %s",play:"Start autoplay",pause:"Pause autoplay",carousel:"carousel",slide:"slide",select:"Select a slide to show",slideLabel:"%s of %s"},js={type:"slide",role:"region",speed:400,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,paginationKeyboard:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",live:!0,classes:ss,i18n:Ds,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function zs(e,t,n){var o=t.Slides;function r(){Fe(e).on([kt,Be],a)}function a(){o.forEach(function(c){c.style("transform","translateX(-"+100*c.index+"%)")})}function i(c,s){o.style("transition","opacity "+n.speed+"ms "+n.easing),er(s)}return{mount:r,start:i,cancel:Ro}}function Ks(e,t,n){var o=t.Move,r=t.Controller,a=t.Scroll,i=t.Elements.list,c=Ae(at,i,"transition"),s;function d(){Fe(e).bind(i,"transitionend",function(x){x.target===i&&s&&(P(),s())})}function u(x,h){var g=o.toPosition(x,!0),T=o.getPosition(),L=v(x);Ue(g-T)>=1&&L>=1?n.useScroll?a.scroll(g,L,!1,h):(c("transform "+L+"ms "+n.easing),o.translate(g,!0),s=h):(o.jump(x),h())}function P(){c(""),a.cancel()}function v(x){var h=n.rewindSpeed;if(e.is(on)&&h){var g=r.getIndex(!0),T=r.getEnd();if(g===0&&x>=T||g>=T&&x===0)return h}return n.speed}return{mount:d,start:u,cancel:P}}var qs=(function(){function e(n,o){this.event=Fe(),this.Components={},this.state=Ua(Jt),this.splides=[],this._o={},this._E={};var r=At(n)?ar(document,n):n;gn(r,r+" is invalid."),this.root=r,o=Pt({label:st(r,ot)||"",labelledby:st(r,ei)||""},js,e.defaults,o||{});try{Pt(o,JSON.parse(st(r,qo)))}catch{gn(!1,"Invalid JSON")}this._o=Object.create(Pt({},o))}var t=e.prototype;return t.mount=function(o,r){var a=this,i=this.state,c=this.Components;gn(i.is([Jt,eo]),"Already mounted!"),i.set(Jt),this._C=c,this._T=r||this._T||(this.is(kn)?zs:Ks),this._E=o||this._E;var s=bn({},Vs,this._E,{Transition:this._T});return Dt(s,function(d,u){var P=d(a,c,a._o);c[u]=P,P.setup&&P.setup()}),Dt(c,function(d){d.mount&&d.mount()}),this.emit(kt),gt(this.root,rs),i.set(tn),this.emit(Fo),this},t.sync=function(o){return this.splides.push({splide:o}),o.splides.push({splide:this,isParent:!0}),this.state.is(tn)&&(this._C.Sync.remount(),o.Components.Sync.remount()),this},t.go=function(o){return this._C.Controller.go(o),this},t.on=function(o,r){return this.event.on(o,r),this},t.off=function(o){return this.event.off(o),this},t.emit=function(o){var r;return(r=this.event).emit.apply(r,[o].concat(It(arguments,1))),this},t.add=function(o,r){return this._C.Slides.add(o,r),this},t.remove=function(o){return this._C.Slides.remove(o),this},t.is=function(o){return this._o.type===o},t.refresh=function(){return this.emit(Be),this},t.destroy=function(o){o===void 0&&(o=!0);var r=this.event,a=this.state;return a.is(Jt)?Fe(this).on(Fo,this.destroy.bind(this,o)):(Dt(this._C,function(i){i.destroy&&i.destroy(o)},!0),r.emit(Yo),r.destroy(),o&&wt(this.splides),a.set(eo)),this},Da(e,[{key:"options",get:function(){return this._o},set:function(o){this._C.Media.set(o,!0,!0)}},{key:"length",get:function(){return this._C.Slides.getLength(!0)}},{key:"index",get:function(){return this._C.Controller.getIndex()}}]),e})(),ri=qs;ri.defaults={};ri.STATES=za;var _i=[[kt,"onMounted"],[Fo,"onReady"],[$t,"onMove"],[cn,"onMoved"],[Go,"onClick"],[cr,"onActive"],[dr,"onInactive"],[ur,"onVisible"],[pr,"onHidden"],[Be,"onRefresh"],[Ke,"onUpdated"],[nn,"onResize"],[so,"onResized"],[mr,"onDrag"],[gr,"onDragging"],[hr,"onDragged"],[lo,"onScroll"],[Kt,"onScrolled"],[Yo,"onDestroy"],[fr,"onArrowsMounted"],[yr,"onArrowsUpdated"],[vr,"onPaginationMounted"],[br,"onPaginationUpdated"],[Xo,"onNavigationMounted"],[Zo,"onAutoplayPlay"],[xr,"onAutoplayPlaying"],[Jo,"onAutoplayPause"],[Qo,"onLazyLoadLoaded"]];function ai(...e){return e.filter(Boolean).join(" ")}function io(e){return e!==null&&typeof e=="object"}function Ho(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((n,o)=>!Ho(n,t[o]));if(io(e)&&io(t)){const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&!n.some(r=>!Object.prototype.hasOwnProperty.call(t,r)||!Ho(e[r],t[r]))}return e===t}function Us(e,t){return e.length===t.length&&!e.some((n,o)=>n!==t[o])}function Gs(e,t){if(e){const n=Object.keys(e);for(let o=0;o<n.length;o++){const r=n[o];if(r!=="__proto__"&&t(e[r],r)===!1)break}}return e}function Bo(e,t){const n=e;return Gs(t,(o,r)=>{Array.isArray(o)?n[r]=o.slice():io(o)?n[r]=Bo(io(n[r])?n[r]:{},o):n[r]=o}),n}var Ys=({children:e,className:t,...n})=>p.createElement("div",{className:ai("splide__track",t),...n},p.createElement("ul",{className:"splide__list"},e)),si=class extends p.Component{constructor(){super(...arguments),this.splideRef=p.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:n}=this.props,{current:o}=this.splideRef;o&&(this.splide=new ri(o,e),this.bind(this.splide),this.splide.mount(t,n),this.options=Bo({},e||{}),this.slides=this.getSlides())}componentWillUnmount(){this.splide&&(this.splide.destroy(),this.splide=void 0),this.options=void 0,this.slides.length=0}componentDidUpdate(){if(!this.splide)return;const{options:e}=this.props;e&&!Ho(this.options,e)&&(this.splide.options=e,this.options=Bo({},e));const t=this.getSlides();Us(this.slides,t)||(this.splide.refresh(),this.slides=t)}sync(e){var t;(t=this.splide)==null||t.sync(e)}go(e){var t;(t=this.splide)==null||t.go(e)}getSlides(){var e;if(this.splide){const t=(e=this.splide.Components.Elements)==null?void 0:e.list.children;return t&&Array.prototype.slice.call(t)||[]}return[]}bind(e){_i.forEach(([t,n])=>{const o=this.props[n];typeof o=="function"&&e.on(t,(...r)=>{o(e,...r)})})}omit(e,t){return t.forEach(n=>{Object.prototype.hasOwnProperty.call(e,n)&&delete e[n]}),e}render(){const{className:e,tag:t="div",hasTrack:n=!0,children:o,...r}=this.props;return p.createElement(t,{className:ai("splide",e),ref:this.splideRef,...this.omit(r,["options",..._i.map(a=>a[1])])},n?p.createElement(Ys,null,o):o)}},li=({children:e,className:t,...n})=>p.createElement("li",{className:ai("splide__slide",t),...n},e);/*!
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),Ie=require("classnames"),E=require("./readTestimonialTextMeasure-CB_Uq-fO.js"),In=require("react-dom");function sa(e){return e.type==="object"&&e.version===1}const la="ControlSlider-module__wrapper___sHEkd",ca="ControlSlider-module__hoverArrow___A-dOH",da="ControlSlider-module__sliderItem___QQSkR",ua="ControlSlider-module__sliderImage___9hRl-",pa="ControlSlider-module__arrow___05ghY",ma="ControlSlider-module__arrowVertical___tBfVN",ga="ControlSlider-module__nextArrow___-30Yc",ha="ControlSlider-module__arrowInner___aEra3",fa="ControlSlider-module__arrowIcon___S4ztF",ya="ControlSlider-module__arrowImg___2dwJW",va="ControlSlider-module__mirror___brd6U",ba="ControlSlider-module__pagination___bicLF",xa="ControlSlider-module__paginationInner___bT-P-",Ca="ControlSlider-module__paginationVertical___zYqKw",Sa="ControlSlider-module__paginationItem___nTRbk",wa="ControlSlider-module__dot___p1Qun",$a="ControlSlider-module__activeDot___LHFaj",Ta="ControlSlider-module__paginationInsideBottom___R3FWn",La="ControlSlider-module__paginationInsideTop___V-qb-",Ea="ControlSlider-module__paginationOutsideBottom___14w8D",Ia="ControlSlider-module__paginationOutsideTop___SCLqB",Pa="ControlSlider-module__paginationInsideLeft___yOBRZ",Ra="ControlSlider-module__paginationInsideRight___Rtt3o",Aa="ControlSlider-module__paginationOutsideLeft___lahaw",Ma="ControlSlider-module__paginationOutsideRight___EtuQa",_a="ControlSlider-module__imgWrapper___UjEgB",Wa="ControlSlider-module__captionBlock___dJ6-j",ka="ControlSlider-module__captionTextWrapper___HFlpf",Fa="ControlSlider-module__captionText___uGBVc",Na="ControlSlider-module__active___WZK4G",Ha="ControlSlider-module__withPointerEvents___t-18M",Ba="ControlSlider-module__topLeftAlignment___zjnGM",Oa="ControlSlider-module__topCenterAlignment___gD1xW",ja="ControlSlider-module__topRightAlignment___NMapS",Da="ControlSlider-module__middleLeftAlignment___OnUrY",Va="ControlSlider-module__middleCenterAlignment___Tdkl0",za="ControlSlider-module__middleRightAlignment___wEbfX",Ka="ControlSlider-module__bottomLeftAlignment___cTP2-",Ga="ControlSlider-module__bottomCenterAlignment___c54fB",qa="ControlSlider-module__bottomRightAlignment___kEwrz",Ua="ControlSlider-module__clickOverlay___DZA28",Xa="ControlSlider-module__contain___pLyq7",Ya="ControlSlider-module__cover___KdDat",de={wrapper:la,hoverArrow:ca,sliderItem:da,sliderImage:ua,arrow:pa,arrowVertical:ma,nextArrow:ga,arrowInner:ha,arrowIcon:fa,arrowImg:ya,mirror:va,pagination:ba,paginationInner:xa,paginationVertical:Ca,paginationItem:Sa,dot:wa,activeDot:$a,paginationInsideBottom:Ta,paginationInsideTop:La,paginationOutsideBottom:Ea,paginationOutsideTop:Ia,paginationInsideLeft:Pa,paginationInsideRight:Ra,paginationOutsideLeft:Aa,paginationOutsideRight:Ma,imgWrapper:_a,captionBlock:Wa,captionTextWrapper:ka,captionText:Fa,active:Na,withPointerEvents:Ha,topLeftAlignment:Ba,topCenterAlignment:Oa,topRightAlignment:ja,middleLeftAlignment:Da,middleCenterAlignment:Va,middleRightAlignment:za,bottomLeftAlignment:Ka,bottomCenterAlignment:Ga,bottomRightAlignment:qa,clickOverlay:Ua,contain:Xa,cover:Ya};function Ja(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function Za(e,t,n){return t&&Ja(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var bo="(prefers-reduced-motion: reduce)",en=1,Qa=2,on=3,un=4,Pn=5,Xn=6,ni=7,es={CREATED:en,MOUNTED:Qa,IDLE:on,MOVING:un,SCROLLING:Pn,DRAGGING:Xn,DESTROYED:ni};function Et(e){e.length=0}function Ft(e,t,n){return Array.prototype.slice.call(e,t,n)}function He(e){return e.bind.apply(e,[null].concat(Ft(arguments,1)))}var cr=setTimeout,Mi=function(){};function xo(e){return requestAnimationFrame(e)}function li(e,t){return typeof t===e}function vn(e){return!zi(e)&&li("object",e)}var Vi=Array.isArray,dr=He(li,"function"),_t=He(li,"string"),Rn=He(li,"undefined");function zi(e){return e===null}function ur(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function An(e){return Vi(e)?e:[e]}function ct(e,t){An(e).forEach(t)}function Ki(e,t){return e.indexOf(t)>-1}function Yn(e,t){return e.push.apply(e,An(t)),e}function wt(e,t,n){e&&ct(t,function(i){i&&e.classList[n?"add":"remove"](i)})}function vt(e,t){wt(e,_t(t)?t.split(" "):t,!0)}function Mn(e,t){ct(t,e.appendChild.bind(e))}function Gi(e,t){ct(e,function(n){var i=(t||n).parentNode;i&&i.insertBefore(n,t)})}function bn(e,t){return ur(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function pr(e,t){var n=e?Ft(e.children):[];return t?n.filter(function(i){return bn(i,t)}):n}function _n(e,t){return t?pr(e,t)[0]:e.firstElementChild}var xn=Object.keys;function Kt(e,t,n){return e&&(n?xn(e).reverse():xn(e)).forEach(function(i){i!=="__proto__"&&t(e[i],i)}),e}function Cn(e){return Ft(arguments,1).forEach(function(t){Kt(t,function(n,i){e[i]=t[i]})}),e}function Mt(e){return Ft(arguments,1).forEach(function(t){Kt(t,function(n,i){Vi(n)?e[i]=n.slice():vn(n)?e[i]=Mt({},vn(e[i])?e[i]:{},n):e[i]=n})}),e}function Co(e,t){ct(t||xn(e),function(n){delete e[n]})}function bt(e,t){ct(e,function(n){ct(t,function(i){n&&n.removeAttribute(i)})})}function Se(e,t,n){vn(t)?Kt(t,function(i,a){Se(e,a,i)}):ct(e,function(i){zi(n)||n===""?bt(i,t):i.setAttribute(t,String(n))})}function tn(e,t,n){var i=document.createElement(e);return t&&(_t(t)?vt(i,t):Se(i,t)),n&&Mn(n,i),i}function dt(e,t,n){if(Rn(n))return getComputedStyle(e)[t];zi(n)||(e.style[t]=""+n)}function Sn(e,t){dt(e,"display",t)}function mr(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function ut(e,t){return e.getAttribute(t)}function So(e,t){return e&&e.classList.contains(t)}function at(e){return e.getBoundingClientRect()}function Gt(e){ct(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function gr(e){return _n(new DOMParser().parseFromString(e,"text/html").body)}function St(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function hr(e,t){return e&&e.querySelector(t)}function qi(e,t){return t?Ft(e.querySelectorAll(t)):[]}function $t(e,t){wt(e,t,!1)}function _i(e){return e.timeStamp}function jt(e){return _t(e)?e:e?e+"px":""}var Wn="splide",Ui="data-"+Wn;function fn(e,t){if(!e)throw new Error("["+Wn+"] "+(t||""))}var Wt=Math.min,ii=Math.max,oi=Math.floor,wn=Math.ceil,it=Math.abs;function fr(e,t,n){return it(e-t)<n}function Jn(e,t,n,i){var a=Wt(t,n),s=ii(t,n);return i?a<e&&e<s:a<=e&&e<=s}function Jt(e,t,n){var i=Wt(t,n),a=ii(t,n);return Wt(ii(i,e),a)}function Wi(e){return+(e>0)-+(e<0)}function ki(e,t){return ct(t,function(n){e=e.replace("%s",""+n)}),e}function Xi(e){return e<10?"0"+e:""+e}var wo={};function ts(e){return""+e+Xi(wo[e]=(wo[e]||0)+1)}function yr(){var e=[];function t(o,d,l,u){a(o,d,function(p,I,b){var w="addEventListener"in p,f=w?p.removeEventListener.bind(p,I,l,u):p.removeListener.bind(p,l);w?p.addEventListener(I,l,u):p.addListener(l),e.push([p,I,b,l,f])})}function n(o,d,l){a(o,d,function(u,p,I){e=e.filter(function(b){return b[0]===u&&b[1]===p&&b[2]===I&&(!l||b[3]===l)?(b[4](),!1):!0})})}function i(o,d,l){var u,p=!0;return typeof CustomEvent=="function"?u=new CustomEvent(d,{bubbles:p,detail:l}):(u=document.createEvent("CustomEvent"),u.initCustomEvent(d,p,!1,l)),o.dispatchEvent(u),u}function a(o,d,l){ct(o,function(u){u&&ct(d,function(p){p.split(" ").forEach(function(I){var b=I.split(".");l(u,b[0],b[1])})})})}function s(){e.forEach(function(o){o[4]()}),Et(e)}return{bind:t,unbind:n,dispatch:i,destroy:s}}var Nt="mounted",Fi="ready",It="move",pn="moved",Yi="click",vr="active",br="inactive",xr="visible",Cr="hidden",Ke="refresh",tt="updated",rn="resize",ci="resized",Sr="drag",wr="dragging",$r="dragged",di="scroll",Ut="scrolled",ns="overflow",Ji="destroy",Tr="arrows:mounted",Lr="arrows:updated",Er="pagination:mounted",Ir="pagination:updated",Zi="navigation:mounted",Qi="autoplay:play",Pr="autoplay:playing",eo="autoplay:pause",to="lazyload:loaded",Rr="sk",Ar="sh",ri="ei";function De(e){var t=e?e.event.bus:document.createDocumentFragment(),n=yr();function i(s,o){n.bind(t,An(s).join(" "),function(d){o.apply(o,Vi(d.detail)?d.detail:[])})}function a(s){n.dispatch(t,s,Ft(arguments,1))}return e&&e.event.on(Ji,n.destroy),Cn(n,{bus:t,on:i,off:He(n.unbind,t),emit:a})}function ui(e,t,n,i){var a=Date.now,s,o=0,d,l=!0,u=0;function p(){if(!l){if(o=e?Wt((a()-s)/e,1):1,n&&n(o),o>=1&&(t(),s=a(),i&&++u>=i))return b();d=xo(p)}}function I(L){L||f(),s=a()-(L?o*e:0),l=!1,d=xo(p)}function b(){l=!0}function w(){s=a(),o=0,n&&n(o)}function f(){d&&cancelAnimationFrame(d),o=0,d=0,l=!0}function h(L){e=L}function T(){return l}return{start:I,rewind:w,pause:b,cancel:f,set:h,isPaused:T}}function is(e){var t=e;function n(a){t=a}function i(a){return Ki(An(a),t)}return{set:n,is:i}}function os(e,t){var n=ui(0,e,null,1);return function(){n.isPaused()&&n.start()}}function rs(e,t,n){var i=e.state,a=n.breakpoints||{},s=n.reducedMotion||{},o=yr(),d=[];function l(){var f=n.mediaQuery==="min";xn(a).sort(function(h,T){return f?+h-+T:+T-+h}).forEach(function(h){p(a[h],"("+(f?"min":"max")+"-width:"+h+"px)")}),p(s,bo),I()}function u(f){f&&o.destroy()}function p(f,h){var T=matchMedia(h);o.bind(T,"change",I),d.push([f,T])}function I(){var f=i.is(ni),h=n.direction,T=d.reduce(function(L,C){return Mt(L,C[1].matches?C[0]:{})},{});Co(n),w(T),n.destroy?e.destroy(n.destroy==="completely"):f?(u(!0),e.mount()):h!==n.direction&&e.refresh()}function b(f){matchMedia(bo).matches&&(f?Mt(n,s):Co(n,xn(s)))}function w(f,h,T){Mt(n,f),h&&Mt(Object.getPrototypeOf(n),f),(T||!i.is(en))&&e.emit(tt,n)}return{setup:l,destroy:u,reduce:b,set:w}}var pi="Arrow",mi=pi+"Left",gi=pi+"Right",Mr=pi+"Up",_r=pi+"Down",$o="rtl",hi="ttb",xi={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[Mr,gi],ArrowRight:[_r,mi]};function as(e,t,n){function i(s,o,d){d=d||n.direction;var l=d===$o&&!o?1:d===hi?0:-1;return xi[s]&&xi[s][l]||s.replace(/width|left|right/i,function(u,p){var I=xi[u.toLowerCase()][l]||u;return p>0?I.charAt(0).toUpperCase()+I.slice(1):I})}function a(s){return s*(n.direction===$o?1:-1)}return{resolve:i,orient:a}}var Tt="role",nn="tabindex",ss="disabled",pt="aria-",kn=pt+"controls",Wr=pt+"current",To=pt+"selected",st=pt+"label",no=pt+"labelledby",kr=pt+"hidden",io=pt+"orientation",$n=pt+"roledescription",Lo=pt+"live",Eo=pt+"busy",Io=pt+"atomic",oo=[Tt,nn,ss,kn,Wr,st,no,kr,io,$n],xt=Wn+"__",Ht="is-",Ci=Wn,Po=xt+"track",ls=xt+"list",fi=xt+"slide",Fr=fi+"--clone",cs=fi+"__container",ro=xt+"arrows",yi=xt+"arrow",Nr=yi+"--prev",Hr=yi+"--next",vi=xt+"pagination",Br=vi+"__page",ds=xt+"progress",us=ds+"__bar",ps=xt+"toggle",ms=xt+"spinner",gs=xt+"sr",hs=Ht+"initialized",qt=Ht+"active",Or=Ht+"prev",jr=Ht+"next",Ni=Ht+"visible",Hi=Ht+"loading",Dr=Ht+"focus-in",Vr=Ht+"overflow",fs=[qt,Ni,Or,jr,Hi,Dr,Vr],ys={slide:fi,clone:Fr,arrows:ro,arrow:yi,prev:Nr,next:Hr,pagination:vi,page:Br,spinner:ms};function vs(e,t){if(dr(e.closest))return e.closest(t);for(var n=e;n&&n.nodeType===1&&!bn(n,t);)n=n.parentElement;return n}var bs=5,Ro=200,zr="touchstart mousedown",Si="touchmove mousemove",wi="touchend touchcancel mouseup click";function xs(e,t,n){var i=De(e),a=i.on,s=i.bind,o=e.root,d=n.i18n,l={},u=[],p=[],I=[],b,w,f;function h(){m(),z(),C()}function T(){a(Ke,L),a(Ke,h),a(tt,C),s(document,zr+" keydown",function(x){f=x.type==="keydown"},{capture:!0}),s(o,"focusin",function(){wt(o,Dr,!!f)})}function L(x){var A=oo.concat("style");Et(u),$t(o,p),$t(b,I),bt([b,w],A),bt(o,x?A:["style",$n])}function C(){$t(o,p),$t(b,I),p=R(Ci),I=R(Po),vt(o,p),vt(b,I),Se(o,st,n.label),Se(o,no,n.labelledby)}function m(){b=j("."+Po),w=_n(b,"."+ls),fn(b&&w,"A track/list element is missing."),Yn(u,pr(w,"."+fi+":not(."+Fr+")")),Kt({arrows:ro,pagination:vi,prev:Nr,next:Hr,bar:us,toggle:ps},function(x,A){l[A]=j("."+x)}),Cn(l,{root:o,track:b,list:w,slides:u})}function z(){var x=o.id||ts(Wn),A=n.role;o.id=x,b.id=b.id||x+"-track",w.id=w.id||x+"-list",!ut(o,Tt)&&o.tagName!=="SECTION"&&A&&Se(o,Tt,A),Se(o,$n,d.carousel),Se(w,Tt,"presentation")}function j(x){var A=hr(o,x);return A&&vs(A,"."+Ci)===o?A:void 0}function R(x){return[x+"--"+n.type,x+"--"+n.direction,n.drag&&x+"--draggable",n.isNavigation&&x+"--nav",x===Ci&&qt]}return Cn(l,{setup:h,mount:T,destroy:L})}var an="slide",mn="loop",Fn="fade";function Cs(e,t,n,i){var a=De(e),s=a.on,o=a.emit,d=a.bind,l=e.Components,u=e.root,p=e.options,I=p.isNavigation,b=p.updateOnMove,w=p.i18n,f=p.pagination,h=p.slideFocus,T=l.Direction.resolve,L=ut(i,"style"),C=ut(i,st),m=n>-1,z=_n(i,"."+cs),j;function R(){m||(i.id=u.id+"-slide"+Xi(t+1),Se(i,Tt,f?"tabpanel":"group"),Se(i,$n,w.slide),Se(i,st,C||ki(w.slideLabel,[t+1,e.length]))),x()}function x(){d(i,"click",He(o,Yi,_)),d(i,"keydown",He(o,Rr,_)),s([pn,Ar,Ut],v),s(Zi,S),b&&s(It,K)}function A(){j=!0,a.destroy(),$t(i,fs),bt(i,oo),Se(i,"style",L),Se(i,st,C||"")}function S(){var B=e.splides.map(function(k){var P=k.splide.Components.Slides.getAt(t);return P?P.slide.id:""}).join(" ");Se(i,st,ki(w.slideX,(m?n:t)+1)),Se(i,kn,B),Se(i,Tt,h?"button":""),h&&bt(i,$n)}function K(){j||v()}function v(){if(!j){var B=e.index;D(),W(),wt(i,Or,t===B-1),wt(i,jr,t===B+1)}}function D(){var B=G();B!==So(i,qt)&&(wt(i,qt,B),Se(i,Wr,I&&B||""),o(B?vr:br,_))}function W(){var B=$(),k=!B&&(!G()||m);if(e.state.is([un,Pn])||Se(i,kr,k||""),Se(qi(i,p.focusableNodes||""),nn,k?-1:""),h&&Se(i,nn,k?-1:0),B!==So(i,Ni)&&(wt(i,Ni,B),o(B?xr:Cr,_)),!B&&document.activeElement===i){var P=l.Slides.getAt(e.index);P&&mr(P.slide)}}function q(B,k,P){dt(P&&z||i,B,k)}function G(){var B=e.index;return B===t||p.cloneStatus&&B===n}function $(){if(e.is(Fn))return G();var B=at(l.Elements.track),k=at(i),P=T("left",!0),te=T("right",!0);return oi(B[P])<=wn(k[P])&&oi(k[te])<=wn(B[te])}function H(B,k){var P=it(B-t);return!m&&(p.rewind||e.is(mn))&&(P=Wt(P,e.length-P)),P<=k}var _={index:t,slideIndex:n,slide:i,container:z,isClone:m,mount:R,destroy:A,update:v,style:q,isWithin:H};return _}function Ss(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=t.Elements,l=d.slides,u=d.list,p=[];function I(){b(),a(Ke,w),a(Ke,b)}function b(){l.forEach(function(v,D){h(v,D,-1)})}function w(){j(function(v){v.destroy()}),Et(p)}function f(){j(function(v){v.update()})}function h(v,D,W){var q=Cs(e,D,W,v);q.mount(),p.push(q),p.sort(function(G,$){return G.index-$.index})}function T(v){return v?R(function(D){return!D.isClone}):p}function L(v){var D=t.Controller,W=D.toIndex(v),q=D.hasFocus()?1:n.perPage;return R(function(G){return Jn(G.index,W,W+q-1)})}function C(v){return R(v)[0]}function m(v,D){ct(v,function(W){if(_t(W)&&(W=gr(W)),ur(W)){var q=l[D];q?Gi(W,q):Mn(u,W),vt(W,n.classes.slide),A(W,He(s,rn))}}),s(Ke)}function z(v){Gt(R(v).map(function(D){return D.slide})),s(Ke)}function j(v,D){T(D).forEach(v)}function R(v){return p.filter(dr(v)?v:function(D){return _t(v)?bn(D.slide,v):Ki(An(v),D.index)})}function x(v,D,W){j(function(q){q.style(v,D,W)})}function A(v,D){var W=qi(v,"img"),q=W.length;q?W.forEach(function(G){o(G,"load error",function(){--q||D()})}):D()}function S(v){return v?l.length:p.length}function K(){return p.length>n.perPage}return{mount:I,destroy:w,update:f,register:h,get:T,getIn:L,getAt:C,add:m,remove:z,forEach:j,filter:R,style:x,getLength:S,isEnough:K}}function ws(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=t.Slides,l=t.Direction.resolve,u=t.Elements,p=u.root,I=u.track,b=u.list,w=d.getAt,f=d.style,h,T,L;function C(){m(),s(window,"resize load",os(He(o,rn))),a([tt,Ke],m),a(rn,z)}function m(){h=n.direction===hi,dt(p,"maxWidth",jt(n.width)),dt(I,l("paddingLeft"),j(!1)),dt(I,l("paddingRight"),j(!0)),z(!0)}function z(_){var B=at(p);(_||T.width!==B.width||T.height!==B.height)&&(dt(I,"height",R()),f(l("marginRight"),jt(n.gap)),f("width",A()),f("height",S(),!0),T=B,o(ci),L!==(L=H())&&(wt(p,Vr,L),o(ns,L)))}function j(_){var B=n.padding,k=l(_?"right":"left");return B&&jt(B[k]||(vn(B)?0:B))||"0px"}function R(){var _="";return h&&(_=x(),fn(_,"height or heightRatio is missing."),_="calc("+_+" - "+j(!1)+" - "+j(!0)+")"),_}function x(){return jt(n.height||at(b).width*n.heightRatio)}function A(){return n.autoWidth?null:jt(n.fixedWidth)||(h?"":K())}function S(){return jt(n.fixedHeight)||(h?n.autoHeight?null:K():x())}function K(){var _=jt(n.gap);return"calc((100%"+(_&&" + "+_)+")/"+(n.perPage||1)+(_&&" - "+_)+")"}function v(){return at(b)[l("width")]}function D(_,B){var k=w(_||0);return k?at(k.slide)[l("width")]+(B?0:G()):0}function W(_,B){var k=w(_);if(k){var P=at(k.slide)[l("right")],te=at(b)[l("left")];return it(P-te)+(B?0:G())}return 0}function q(_){return W(e.length-1)-W(0)+D(0,_)}function G(){var _=w(0);return _&&parseFloat(dt(_.slide,l("marginRight")))||0}function $(_){return parseFloat(dt(I,l("padding"+(_?"Right":"Left"))))||0}function H(){return e.is(Fn)||q(!0)>v()}return{mount:C,resize:z,listSize:v,slideSize:D,sliderSize:q,totalSize:W,getPadding:$,isOverflow:H}}var $s=2;function Ts(e,t,n){var i=De(e),a=i.on,s=t.Elements,o=t.Slides,d=t.Direction.resolve,l=[],u;function p(){a(Ke,I),a([tt,rn],w),(u=T())&&(f(u),t.Layout.resize(!0))}function I(){b(),p()}function b(){Gt(l),Et(l),i.destroy()}function w(){var L=T();u!==L&&(u<L||!L)&&i.emit(Ke)}function f(L){var C=o.get().slice(),m=C.length;if(m){for(;C.length<L;)Yn(C,C);Yn(C.slice(-L),C.slice(0,L)).forEach(function(z,j){var R=j<L,x=h(z.slide,j);R?Gi(x,C[0].slide):Mn(s.list,x),Yn(l,x),o.register(x,j-L+(R?0:m),z.index)})}}function h(L,C){var m=L.cloneNode(!0);return vt(m,n.classes.clone),m.id=e.root.id+"-clone"+Xi(C+1),m}function T(){var L=n.clones;if(!e.is(mn))L=0;else if(Rn(L)){var C=n[d("fixedWidth")]&&t.Layout.slideSize(0),m=C&&wn(at(s.track)[d("width")]/C);L=m||n[d("autoWidth")]&&e.length||n.perPage*$s}return L}return{mount:p,destroy:b}}function Ls(e,t,n){var i=De(e),a=i.on,s=i.emit,o=e.state.set,d=t.Layout,l=d.slideSize,u=d.getPadding,p=d.totalSize,I=d.listSize,b=d.sliderSize,w=t.Direction,f=w.resolve,h=w.orient,T=t.Elements,L=T.list,C=T.track,m;function z(){m=t.Transition,a([Nt,ci,tt,Ke],j)}function j(){t.Controller.isBusy()||(t.Scroll.cancel(),x(e.index),t.Slides.update())}function R(k,P,te,ae){k!==P&&_(k>te)&&(v(),A(K(q(),k>te),!0)),o(un),s(It,P,te,k),m.start(P,function(){o(on),s(pn,P,te,k),ae&&ae()})}function x(k){A(W(k,!0))}function A(k,P){if(!e.is(Fn)){var te=P?k:S(k);dt(L,"transform","translate"+f("X")+"("+te+"px)"),k!==te&&s(Ar)}}function S(k){if(e.is(mn)){var P=D(k),te=P>t.Controller.getEnd(),ae=P<0;(ae||te)&&(k=K(k,te))}return k}function K(k,P){var te=k-H(P),ae=b();return k-=h(ae*(wn(it(te)/ae)||1))*(P?1:-1),k}function v(){A(q(),!0),m.cancel()}function D(k){for(var P=t.Slides.get(),te=0,ae=1/0,re=0;re<P.length;re++){var U=P[re].index,N=it(W(U,!0)-k);if(N<=ae)ae=N,te=U;else break}return te}function W(k,P){var te=h(p(k-1)-$(k));return P?G(te):te}function q(){var k=f("left");return at(L)[k]-at(C)[k]+h(u(!1))}function G(k){return n.trimSpace&&e.is(an)&&(k=Jt(k,0,h(b(!0)-I()))),k}function $(k){var P=n.focus;return P==="center"?(I()-l(k,!0))/2:+P*l(k)||0}function H(k){return W(k?t.Controller.getEnd():0,!!n.trimSpace)}function _(k){var P=h(K(q(),k));return k?P>=0:P<=L[f("scrollWidth")]-at(C)[f("width")]}function B(k,P){P=Rn(P)?q():P;var te=k!==!0&&h(P)<h(H(!1)),ae=k!==!1&&h(P)>h(H(!0));return te||ae}return{mount:z,move:R,jump:x,translate:A,shift:K,cancel:v,toIndex:D,toPosition:W,getPosition:q,getLimit:H,exceededLimit:B,reposition:j}}function Es(e,t,n){var i=De(e),a=i.on,s=i.emit,o=t.Move,d=o.getPosition,l=o.getLimit,u=o.toPosition,p=t.Slides,I=p.isEnough,b=p.getLength,w=n.omitEnd,f=e.is(mn),h=e.is(an),T=He(q,!1),L=He(q,!0),C=n.start||0,m,z=C,j,R,x;function A(){S(),a([tt,Ke,ri],S),a(ci,K)}function S(){j=b(!0),R=n.perMove,x=n.perPage,m=_();var N=Jt(C,0,w?m:j-1);N!==C&&(C=N,o.reposition())}function K(){m!==_()&&s(ri)}function v(N,oe,ye){if(!U()){var ce=W(N),ge=H(ce);ge>-1&&(oe||ge!==C)&&(te(ge),o.move(ce,ge,z,ye))}}function D(N,oe,ye,ce){t.Scroll.scroll(N,oe,ye,function(){var ge=H(o.toIndex(d()));te(w?Wt(ge,m):ge),ce&&ce()})}function W(N){var oe=C;if(_t(N)){var ye=N.match(/([+\-<>])(\d+)?/)||[],ce=ye[1],ge=ye[2];ce==="+"||ce==="-"?oe=G(C+ +(""+ce+(+ge||1)),C):ce===">"?oe=ge?B(+ge):T(!0):ce==="<"&&(oe=L(!0))}else oe=f?N:Jt(N,0,m);return oe}function q(N,oe){var ye=R||(re()?1:x),ce=G(C+ye*(N?-1:1),C,!(R||re()));return ce===-1&&h&&!fr(d(),l(!N),1)?N?0:m:oe?ce:H(ce)}function G(N,oe,ye){if(I()||re()){var ce=$(N);ce!==N&&(oe=N,N=ce,ye=!1),N<0||N>m?!R&&(Jn(0,N,oe,!0)||Jn(m,oe,N,!0))?N=B(k(N)):f?N=ye?N<0?-(j%x||x):j:N:n.rewind?N=N<0?m:0:N=-1:ye&&N!==oe&&(N=B(k(oe)+(N<oe?-1:1)))}else N=-1;return N}function $(N){if(h&&n.trimSpace==="move"&&N!==C)for(var oe=d();oe===u(N,!0)&&Jn(N,0,e.length-1,!n.rewind);)N<C?--N:++N;return N}function H(N){return f?(N+j)%j||0:N}function _(){for(var N=j-(re()||f&&R?1:x);w&&N-- >0;)if(u(j-1,!0)!==u(N,!0)){N++;break}return Jt(N,0,j-1)}function B(N){return Jt(re()?N:x*N,0,m)}function k(N){return re()?Wt(N,m):oi((N>=m?j-1:N)/x)}function P(N){var oe=o.toIndex(N);return h?Jt(oe,0,m):oe}function te(N){N!==C&&(z=C,C=N)}function ae(N){return N?z:C}function re(){return!Rn(n.focus)||n.isNavigation}function U(){return e.state.is([un,Pn])&&!!n.waitForTransition}return{mount:A,go:v,scroll:D,getNext:T,getPrev:L,getAdjacent:q,getEnd:_,setIndex:te,getIndex:ae,toIndex:B,toPage:k,toDest:P,hasFocus:re,isBusy:U}}var Is="http://www.w3.org/2000/svg",Ps="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z",Dn=40;function Rs(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=n.classes,l=n.i18n,u=t.Elements,p=t.Controller,I=u.arrows,b=u.track,w=I,f=u.prev,h=u.next,T,L,C={};function m(){j(),a(tt,z)}function z(){R(),m()}function j(){var D=n.arrows;D&&!(f&&h)&&S(),f&&h&&(Cn(C,{prev:f,next:h}),Sn(w,D?"":"none"),vt(w,L=ro+"--"+n.direction),D&&(x(),v(),Se([f,h],kn,b.id),o(Tr,f,h)))}function R(){i.destroy(),$t(w,L),T?(Gt(I?[f,h]:w),f=h=null):bt([f,h],oo)}function x(){a([Nt,pn,Ke,Ut,ri],v),s(h,"click",He(A,">")),s(f,"click",He(A,"<"))}function A(D){p.go(D,!0)}function S(){w=I||tn("div",d.arrows),f=K(!0),h=K(!1),T=!0,Mn(w,[f,h]),!I&&Gi(w,b)}function K(D){var W='<button class="'+d.arrow+" "+(D?d.prev:d.next)+'" type="button"><svg xmlns="'+Is+'" viewBox="0 0 '+Dn+" "+Dn+'" width="'+Dn+'" height="'+Dn+'" focusable="false"><path d="'+(n.arrowPath||Ps)+'" />';return gr(W)}function v(){if(f&&h){var D=e.index,W=p.getPrev(),q=p.getNext(),G=W>-1&&D<W?l.last:l.prev,$=q>-1&&D>q?l.first:l.next;f.disabled=W<0,h.disabled=q<0,Se(f,st,G),Se(h,st,$),o(Lr,f,h,W,q)}}return{arrows:C,mount:m,destroy:R,update:v}}var As=Ui+"-interval";function Ms(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.emit,d=ui(n.interval,e.go.bind(e,">"),x),l=d.isPaused,u=t.Elements,p=t.Elements,I=p.root,b=p.toggle,w=n.autoplay,f,h,T=w==="pause";function L(){w&&(C(),b&&Se(b,kn,u.track.id),T||m(),R())}function C(){n.pauseOnHover&&s(I,"mouseenter mouseleave",function(S){f=S.type==="mouseenter",j()}),n.pauseOnFocus&&s(I,"focusin focusout",function(S){h=S.type==="focusin",j()}),b&&s(b,"click",function(){T?m():z(!0)}),a([It,di,Ke],d.rewind),a(It,A)}function m(){l()&&t.Slides.isEnough()&&(d.start(!n.resetProgress),h=f=T=!1,R(),o(Qi))}function z(S){S===void 0&&(S=!0),T=!!S,R(),l()||(d.pause(),o(eo))}function j(){T||(f||h?z(!1):m())}function R(){b&&(wt(b,qt,!T),Se(b,st,n.i18n[T?"play":"pause"]))}function x(S){var K=u.bar;K&&dt(K,"width",S*100+"%"),o(Pr,S)}function A(S){var K=t.Slides.getAt(S);d.set(K&&+ut(K.slide,As)||n.interval)}return{mount:L,destroy:d.cancel,play:m,pause:z,isPaused:l}}function _s(e,t,n){var i=De(e),a=i.on;function s(){n.cover&&(a(to,He(d,!0)),a([Nt,tt,Ke],He(o,!0)))}function o(l){t.Slides.forEach(function(u){var p=_n(u.container||u.slide,"img");p&&p.src&&d(l,p,u)})}function d(l,u,p){p.style("background",l?'center/cover no-repeat url("'+u.src+'")':"",!0),Sn(u,l?"none":"")}return{mount:s,destroy:He(o,!1)}}var Ws=10,ks=600,Fs=.6,Ns=1.5,Hs=800;function Bs(e,t,n){var i=De(e),a=i.on,s=i.emit,o=e.state.set,d=t.Move,l=d.getPosition,u=d.getLimit,p=d.exceededLimit,I=d.translate,b=e.is(an),w,f,h=1;function T(){a(It,z),a([tt,Ke],j)}function L(x,A,S,K,v){var D=l();if(z(),S&&(!b||!p())){var W=t.Layout.sliderSize(),q=Wi(x)*W*oi(it(x)/W)||0;x=d.toPosition(t.Controller.toDest(x%W))+q}var G=fr(D,x,1);h=1,A=G?0:A||ii(it(x-D)/Ns,Hs),f=K,w=ui(A,C,He(m,D,x,v),1),o(Pn),s(di),w.start()}function C(){o(on),f&&f(),s(Ut)}function m(x,A,S,K){var v=l(),D=x+(A-x)*R(K),W=(D-v)*h;I(v+W),b&&!S&&p()&&(h*=Fs,it(W)<Ws&&L(u(p(!0)),ks,!1,f,!0))}function z(){w&&w.cancel()}function j(){w&&!w.isPaused()&&(z(),C())}function R(x){var A=n.easingFunc;return A?A(x):1-Math.pow(1-x,4)}return{mount:T,destroy:z,scroll:L,cancel:j}}var Zt={passive:!1,capture:!0};function Os(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=i.unbind,l=e.state,u=t.Move,p=t.Scroll,I=t.Controller,b=t.Elements.track,w=t.Media.reduce,f=t.Direction,h=f.resolve,T=f.orient,L=u.getPosition,C=u.exceededLimit,m,z,j,R,x,A=!1,S,K,v;function D(){o(b,Si,Mi,Zt),o(b,wi,Mi,Zt),o(b,zr,q,Zt),o(b,"click",H,{capture:!0}),o(b,"dragstart",St),a([Nt,tt],W)}function W(){var y=n.drag;ee(!y),R=y==="free"}function q(y){if(S=!1,!K){var g=ge(y);ce(y.target)&&(g||!y.button)&&(I.isBusy()?St(y,!0):(v=g?b:window,x=l.is([un,Pn]),j=null,o(v,Si,G,Zt),o(v,wi,$,Zt),u.cancel(),p.cancel(),_(y)))}}function G(y){if(l.is(Xn)||(l.set(Xn),s(Sr)),y.cancelable)if(x){u.translate(m+ye(re(y)));var g=U(y)>Ro,V=A!==(A=C());(g||V)&&_(y),S=!0,s(wr),St(y)}else P(y)&&(x=k(y),St(y))}function $(y){l.is(Xn)&&(l.set(on),s($r)),x&&(B(y),St(y)),d(v,Si,G),d(v,wi,$),x=!1}function H(y){!K&&S&&St(y,!0)}function _(y){j=z,z=y,m=L()}function B(y){var g=te(y),V=ae(g),J=n.rewind&&n.rewindByDrag;w(!1),R?I.scroll(V,0,n.snap):e.is(Fn)?I.go(T(Wi(g))<0?J?"<":"-":J?">":"+"):e.is(an)&&A&&J?I.go(C(!0)?">":"<"):I.go(I.toDest(V),!0),w(!0)}function k(y){var g=n.dragMinThreshold,V=vn(g),J=V&&g.mouse||0,Q=(V?g.touch:+g)||10;return it(re(y))>(ge(y)?Q:J)}function P(y){return it(re(y))>it(re(y,!0))}function te(y){if(e.is(mn)||!A){var g=U(y);if(g&&g<Ro)return re(y)/g}return 0}function ae(y){return L()+Wi(y)*Wt(it(y)*(n.flickPower||600),R?1/0:t.Layout.listSize()*(n.flickMaxPages||1))}function re(y,g){return oe(y,g)-oe(N(y),g)}function U(y){return _i(y)-_i(N(y))}function N(y){return z===y&&j||z}function oe(y,g){return(ge(y)?y.changedTouches[0]:y)["page"+h(g?"Y":"X")]}function ye(y){return y/(A&&e.is(an)?bs:1)}function ce(y){var g=n.noDrag;return!bn(y,"."+Br+", ."+yi)&&(!g||!bn(y,g))}function ge(y){return typeof TouchEvent<"u"&&y instanceof TouchEvent}function we(){return x}function ee(y){K=y}return{mount:D,disable:ee,isDragging:we}}var js={Spacebar:" ",Right:gi,Left:mi,Up:Mr,Down:_r};function ao(e){return e=_t(e)?e:e.key,js[e]||e}var Ao="keydown";function Ds(e,t,n){var i=De(e),a=i.on,s=i.bind,o=i.unbind,d=e.root,l=t.Direction.resolve,u,p;function I(){b(),a(tt,w),a(tt,b),a(It,h)}function b(){var L=n.keyboard;L&&(u=L==="global"?window:d,s(u,Ao,T))}function w(){o(u,Ao)}function f(L){p=L}function h(){var L=p;p=!0,cr(function(){p=L})}function T(L){if(!p){var C=ao(L);C===l(mi)?e.go("<"):C===l(gi)&&e.go(">")}}return{mount:I,destroy:w,disable:f}}var yn=Ui+"-lazy",Zn=yn+"-srcset",Vs="["+yn+"], ["+Zn+"]";function zs(e,t,n){var i=De(e),a=i.on,s=i.off,o=i.bind,d=i.emit,l=n.lazyLoad==="sequential",u=[pn,Ut],p=[];function I(){n.lazyLoad&&(b(),a(Ke,b))}function b(){Et(p),w(),l?L():(s(u),a(u,f),f())}function w(){t.Slides.forEach(function(C){qi(C.slide,Vs).forEach(function(m){var z=ut(m,yn),j=ut(m,Zn);if(z!==m.src||j!==m.srcset){var R=n.classes.spinner,x=m.parentElement,A=_n(x,"."+R)||tn("span",R,x);p.push([m,C,A]),m.src||Sn(m,"none")}})})}function f(){p=p.filter(function(C){var m=n.perPage*((n.preloadPages||1)+1)-1;return C[1].isWithin(e.index,m)?h(C):!0}),p.length||s(u)}function h(C){var m=C[0];vt(C[1].slide,Hi),o(m,"load error",He(T,C)),Se(m,"src",ut(m,yn)),Se(m,"srcset",ut(m,Zn)),bt(m,yn),bt(m,Zn)}function T(C,m){var z=C[0],j=C[1];$t(j.slide,Hi),m.type!=="error"&&(Gt(C[2]),Sn(z,""),d(to,z,j),d(rn)),l&&L()}function L(){p.length&&h(p.shift())}return{mount:I,destroy:He(Et,p),check:f}}function Ks(e,t,n){var i=De(e),a=i.on,s=i.emit,o=i.bind,d=t.Slides,l=t.Elements,u=t.Controller,p=u.hasFocus,I=u.getIndex,b=u.go,w=t.Direction.resolve,f=l.pagination,h=[],T,L;function C(){m(),a([tt,Ke,ri],C);var K=n.pagination;f&&Sn(f,K?"":"none"),K&&(a([It,di,Ut],S),z(),S(),s(Er,{list:T,items:h},A(e.index)))}function m(){T&&(Gt(f?Ft(T.children):T),$t(T,L),Et(h),T=null),i.destroy()}function z(){var K=e.length,v=n.classes,D=n.i18n,W=n.perPage,q=p()?u.getEnd()+1:wn(K/W);T=f||tn("ul",v.pagination,l.track.parentElement),vt(T,L=vi+"--"+x()),Se(T,Tt,"tablist"),Se(T,st,D.select),Se(T,io,x()===hi?"vertical":"");for(var G=0;G<q;G++){var $=tn("li",null,T),H=tn("button",{class:v.page,type:"button"},$),_=d.getIn(G).map(function(k){return k.slide.id}),B=!p()&&W>1?D.pageX:D.slideX;o(H,"click",He(j,G)),n.paginationKeyboard&&o(H,"keydown",He(R,G)),Se($,Tt,"presentation"),Se(H,Tt,"tab"),Se(H,kn,_.join(" ")),Se(H,st,ki(B,G+1)),Se(H,nn,-1),h.push({li:$,button:H,page:G})}}function j(K){b(">"+K,!0)}function R(K,v){var D=h.length,W=ao(v),q=x(),G=-1;W===w(gi,!1,q)?G=++K%D:W===w(mi,!1,q)?G=(--K+D)%D:W==="Home"?G=0:W==="End"&&(G=D-1);var $=h[G];$&&(mr($.button),b(">"+G),St(v,!0))}function x(){return n.paginationDirection||n.direction}function A(K){return h[u.toPage(K)]}function S(){var K=A(I(!0)),v=A(I());if(K){var D=K.button;$t(D,qt),bt(D,To),Se(D,nn,-1)}if(v){var W=v.button;vt(W,qt),Se(W,To,!0),Se(W,nn,"")}s(Ir,{list:T,items:h},K,v)}return{items:h,mount:C,destroy:m,getAt:A,update:S}}var Gs=[" ","Enter"];function qs(e,t,n){var i=n.isNavigation,a=n.slideFocus,s=[];function o(){e.splides.forEach(function(f){f.isParent||(u(e,f.splide),u(f.splide,e))}),i&&p()}function d(){s.forEach(function(f){f.destroy()}),Et(s)}function l(){d(),o()}function u(f,h){var T=De(f);T.on(It,function(L,C,m){h.go(h.is(mn)?m:L)}),s.push(T)}function p(){var f=De(e),h=f.on;h(Yi,b),h(Rr,w),h([Nt,tt],I),s.push(f),f.emit(Zi,e.splides)}function I(){Se(t.Elements.list,io,n.direction===hi?"vertical":"")}function b(f){e.go(f.index)}function w(f,h){Ki(Gs,ao(h))&&(b(f),St(h))}return{setup:He(t.Media.set,{slideFocus:Rn(a)?i:a},!0),mount:o,destroy:d,remount:l}}function Us(e,t,n){var i=De(e),a=i.bind,s=0;function o(){n.wheel&&a(t.Elements.track,"wheel",d,Zt)}function d(u){if(u.cancelable){var p=u.deltaY,I=p<0,b=_i(u),w=n.wheelMinThreshold||0,f=n.wheelSleep||0;it(p)>w&&b-s>f&&(e.go(I?"<":">"),s=b),l(I)&&St(u)}}function l(u){return!n.releaseWheel||e.state.is(un)||t.Controller.getAdjacent(u)!==-1}return{mount:o}}var Xs=90;function Ys(e,t,n){var i=De(e),a=i.on,s=t.Elements.track,o=n.live&&!n.isNavigation,d=tn("span",gs),l=ui(Xs,He(p,!1));function u(){o&&(b(!t.Autoplay.isPaused()),Se(s,Io,!0),d.textContent="…",a(Qi,He(b,!0)),a(eo,He(b,!1)),a([pn,Ut],He(p,!0)))}function p(w){Se(s,Eo,w),w?(Mn(s,d),l.start()):(Gt(d),l.cancel())}function I(){bt(s,[Lo,Io,Eo]),Gt(d)}function b(w){o&&Se(s,Lo,w?"off":"polite")}return{mount:u,disable:b,destroy:I}}var Js=Object.freeze({__proto__:null,Media:rs,Direction:as,Elements:xs,Slides:Ss,Layout:ws,Clones:Ts,Move:Ls,Controller:Es,Arrows:Rs,Autoplay:Ms,Cover:_s,Scroll:Bs,Drag:Os,Keyboard:Ds,LazyLoad:zs,Pagination:Ks,Sync:qs,Wheel:Us,Live:Ys}),Zs={prev:"Previous slide",next:"Next slide",first:"Go to first slide",last:"Go to last slide",slideX:"Go to slide %s",pageX:"Go to page %s",play:"Start autoplay",pause:"Pause autoplay",carousel:"carousel",slide:"slide",select:"Select a slide to show",slideLabel:"%s of %s"},Qs={type:"slide",role:"region",speed:400,perPage:1,cloneStatus:!0,arrows:!0,pagination:!0,paginationKeyboard:!0,interval:5e3,pauseOnHover:!0,pauseOnFocus:!0,resetProgress:!0,easing:"cubic-bezier(0.25, 1, 0.5, 1)",drag:!0,direction:"ltr",trimSpace:!0,focusableNodes:"a, button, textarea, input, select, iframe",live:!0,classes:ys,i18n:Zs,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function el(e,t,n){var i=t.Slides;function a(){De(e).on([Nt,Ke],s)}function s(){i.forEach(function(d){d.style("transform","translateX(-"+100*d.index+"%)")})}function o(d,l){i.style("transition","opacity "+n.speed+"ms "+n.easing),cr(l)}return{mount:a,start:o,cancel:Mi}}function tl(e,t,n){var i=t.Move,a=t.Controller,s=t.Scroll,o=t.Elements.list,d=He(dt,o,"transition"),l;function u(){De(e).bind(o,"transitionend",function(w){w.target===o&&l&&(I(),l())})}function p(w,f){var h=i.toPosition(w,!0),T=i.getPosition(),L=b(w);it(h-T)>=1&&L>=1?n.useScroll?s.scroll(h,L,!1,f):(d("transform "+L+"ms "+n.easing),i.translate(h,!0),l=f):(i.jump(w),f())}function I(){d(""),s.cancel()}function b(w){var f=n.rewindSpeed;if(e.is(an)&&f){var h=a.getIndex(!0),T=a.getEnd();if(h===0&&w>=T||h>=T&&w===0)return f}return n.speed}return{mount:u,start:p,cancel:I}}var nl=(function(){function e(n,i){this.event=De(),this.Components={},this.state=is(en),this.splides=[],this._o={},this._E={};var a=_t(n)?hr(document,n):n;fn(a,a+" is invalid."),this.root=a,i=Mt({label:ut(a,st)||"",labelledby:ut(a,no)||""},Qs,e.defaults,i||{});try{Mt(i,JSON.parse(ut(a,Ui)))}catch{fn(!1,"Invalid JSON")}this._o=Object.create(Mt({},i))}var t=e.prototype;return t.mount=function(i,a){var s=this,o=this.state,d=this.Components;fn(o.is([en,ni]),"Already mounted!"),o.set(en),this._C=d,this._T=a||this._T||(this.is(Fn)?el:tl),this._E=i||this._E;var l=Cn({},Js,this._E,{Transition:this._T});return Kt(l,function(u,p){var I=u(s,d,s._o);d[p]=I,I.setup&&I.setup()}),Kt(d,function(u){u.mount&&u.mount()}),this.emit(Nt),vt(this.root,hs),o.set(on),this.emit(Fi),this},t.sync=function(i){return this.splides.push({splide:i}),i.splides.push({splide:this,isParent:!0}),this.state.is(on)&&(this._C.Sync.remount(),i.Components.Sync.remount()),this},t.go=function(i){return this._C.Controller.go(i),this},t.on=function(i,a){return this.event.on(i,a),this},t.off=function(i){return this.event.off(i),this},t.emit=function(i){var a;return(a=this.event).emit.apply(a,[i].concat(Ft(arguments,1))),this},t.add=function(i,a){return this._C.Slides.add(i,a),this},t.remove=function(i){return this._C.Slides.remove(i),this},t.is=function(i){return this._o.type===i},t.refresh=function(){return this.emit(Ke),this},t.destroy=function(i){i===void 0&&(i=!0);var a=this.event,s=this.state;return s.is(en)?De(this).on(Fi,this.destroy.bind(this,i)):(Kt(this._C,function(o){o.destroy&&o.destroy(i)},!0),a.emit(Ji),a.destroy(),i&&Et(this.splides),s.set(ni)),this},Za(e,[{key:"options",get:function(){return this._o},set:function(i){this._C.Media.set(i,!0,!0)}},{key:"length",get:function(){return this._C.Slides.getLength(!0)}},{key:"index",get:function(){return this._C.Controller.getIndex()}}]),e})(),so=nl;so.defaults={};so.STATES=es;var Mo=[[Nt,"onMounted"],[Fi,"onReady"],[It,"onMove"],[pn,"onMoved"],[Yi,"onClick"],[vr,"onActive"],[br,"onInactive"],[xr,"onVisible"],[Cr,"onHidden"],[Ke,"onRefresh"],[tt,"onUpdated"],[rn,"onResize"],[ci,"onResized"],[Sr,"onDrag"],[wr,"onDragging"],[$r,"onDragged"],[di,"onScroll"],[Ut,"onScrolled"],[Ji,"onDestroy"],[Tr,"onArrowsMounted"],[Lr,"onArrowsUpdated"],[Er,"onPaginationMounted"],[Ir,"onPaginationUpdated"],[Zi,"onNavigationMounted"],[Qi,"onAutoplayPlay"],[Pr,"onAutoplayPlaying"],[eo,"onAutoplayPause"],[to,"onLazyLoadLoaded"]];function lo(...e){return e.filter(Boolean).join(" ")}function ai(e){return e!==null&&typeof e=="object"}function Bi(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((n,i)=>!Bi(n,t[i]));if(ai(e)&&ai(t)){const n=Object.keys(e),i=Object.keys(t);return n.length===i.length&&!n.some(a=>!Object.prototype.hasOwnProperty.call(t,a)||!Bi(e[a],t[a]))}return e===t}function il(e,t){return e.length===t.length&&!e.some((n,i)=>n!==t[i])}function ol(e,t){if(e){const n=Object.keys(e);for(let i=0;i<n.length;i++){const a=n[i];if(a!=="__proto__"&&t(e[a],a)===!1)break}}return e}function Oi(e,t){const n=e;return ol(t,(i,a)=>{Array.isArray(i)?n[a]=i.slice():ai(i)?n[a]=Oi(ai(n[a])?n[a]:{},i):n[a]=i}),n}var rl=({children:e,className:t,...n})=>c.createElement("div",{className:lo("splide__track",t),...n},c.createElement("ul",{className:"splide__list"},e)),co=class extends c.Component{constructor(){super(...arguments),this.splideRef=c.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:n}=this.props,{current:i}=this.splideRef;i&&(this.splide=new so(i,e),this.bind(this.splide),this.splide.mount(t,n),this.options=Oi({},e||{}),this.slides=this.getSlides())}componentWillUnmount(){this.splide&&(this.splide.destroy(),this.splide=void 0),this.options=void 0,this.slides.length=0}componentDidUpdate(){if(!this.splide)return;const{options:e}=this.props;e&&!Bi(this.options,e)&&(this.splide.options=e,this.options=Oi({},e));const t=this.getSlides();il(this.slides,t)||(this.splide.refresh(),this.slides=t)}sync(e){var t;(t=this.splide)==null||t.sync(e)}go(e){var t;(t=this.splide)==null||t.go(e)}getSlides(){var e;if(this.splide){const t=(e=this.splide.Components.Elements)==null?void 0:e.list.children;return t&&Array.prototype.slice.call(t)||[]}return[]}bind(e){Mo.forEach(([t,n])=>{const i=this.props[n];typeof i=="function"&&e.on(t,(...a)=>{i(e,...a)})})}omit(e,t){return t.forEach(n=>{Object.prototype.hasOwnProperty.call(e,n)&&delete e[n]}),e}render(){const{className:e,tag:t="div",hasTrack:n=!0,children:i,...a}=this.props;return c.createElement(t,{className:lo("splide",e),ref:this.splideRef,...this.omit(a,["options",...Mo.map(s=>s[1])])},n?c.createElement(rl,null,i):i)}},uo=({children:e,className:t,...n})=>c.createElement("li",{className:lo("splide__slide",t),...n},e);/*!
|
|
2
2
|
* Splide.js
|
|
3
3
|
* Version : 4.1.3
|
|
4
4
|
* License : MIT
|
|
5
5
|
* Copyright: 2022 Naotoshi Fujita
|
|
6
|
-
*/const Xs="RichTextRenderer-module__link___BWeZ2",Zs={link:Xs},Js=e=>{const t=e.trim();return!t||t.startsWith('"')&&t.endsWith('"')||t.startsWith("'")&&t.endsWith("'")?!1:t.split(/\s+/g).filter(Boolean).some(o=>/^\d/.test(o))},vo=e=>e&&e.split(",").map(n=>n.trim()).filter(Boolean).map(n=>Js(n)?`"${n.replace(/"/g,'\\"')}"`:n).join(", ");function mt(e){const{color:t,...n}=e;return n}function Ge(e,t){var r,a,i;const{fontSize:n,lineHeight:o}=e;return{fontFamily:vo(e.fontSettings.fontFamily),fontWeight:e.fontSettings.fontWeight,fontStyle:e.fontSettings.fontStyle,letterSpacing:E.scalingValue(e.letterSpacing,t),wordSpacing:E.scalingValue(e.wordSpacing,t),fontSize:E.scalingValue(n,t),lineHeight:o!==void 0?E.scalingValue(o,t):void 0,textTransform:(r=e.textAppearance)==null?void 0:r.textTransform,textDecoration:(a=e.textAppearance)==null?void 0:a.textDecoration,fontVariant:(i=e.textAppearance)==null?void 0:i.fontVariant,textAlign:e.textAlign,color:e.color}}const wn=({content:e})=>{const t=n=>n.map((o,r)=>o.type==="link"?l.jsx("a",{className:Zs.link,href:o.value,target:o.target,children:t(o.children)},r):l.jsx("span",{style:Qs(o),children:o.text},r));return l.jsx(l.Fragment,{children:e.map((n,o)=>{const r=n.children;return l.jsx("div",{children:t(r)},o)})})};function Qs(e){return{...e.fontFamily&&{fontFamily:vo(e.fontFamily)},...e.fontWeight&&{fontWeight:e.fontWeight},...e.fontStyle&&{fontStyle:e.fontStyle},...e.textDecoration&&{textDecoration:e.textDecoration},...e.textTransform&&{textTransform:e.textTransform},...e.fontVariant&&{fontVariant:e.fontVariant},...e.verticalAlign&&{verticalAlign:e.verticalAlign,lineHeight:"0px"}}}const el="SvgImage-module__svg___q3xE-",tl="SvgImage-module__img___VsTm-",Ai={svg:el,img:tl},nl=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},ol=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,_t=({url:e,fill:t="#000000",hoverFill:n="#CCCCCC",className:o="",style:r})=>{const[a,i]=p.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return p.useEffect(()=>{if(typeof window<"u"&&window.CSS){const c=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');i(c)}},[]),!nl(e)||!a?l.jsx("img",{src:e,alt:"",className:Te(Ai.img,o),style:r}):l.jsx("span",{"data-supports-mask":a,className:Te(Ai.svg,o),style:{"--svg":ol(e),"--fill":t,"--hover-fill":n,...r??{}}})},il={"top-left":ae.topLeftAlignment,"top-center":ae.topCenterAlignment,"top-right":ae.topRightAlignment,"middle-left":ae.middleLeftAlignment,"middle-center":ae.middleCenterAlignment,"middle-right":ae.middleRightAlignment,"bottom-left":ae.bottomLeftAlignment,"bottom-center":ae.bottomCenterAlignment,"bottom-right":ae.bottomRightAlignment};function rl({settings:e,content:t,styles:n,isEditor:o}){const[r,a]=p.useState(null),{widthSettings:i,fontSettings:c,letterSpacing:s,textAlign:d,wordSpacing:u,fontSizeLineHeight:P,textAppearance:v,color:x}=n.imageCaption,[h,g]=p.useState(void 0),[T,L]=p.useState(null),[b,m]=p.useState(0),[H,F]=p.useState(0),{direction:_,transition:C,controls:W,pagination:w,imageCaption:O,triggers:S}=e,V=p.useRef(C.type),{x:D,y:Z}=e.controls.offset,q=$=>{r&&r.go($)};return p.useEffect(()=>{if(!T)return;const $=new ResizeObserver(k=>{if(!r)return;const[R]=k;g({width:Math.round(R.contentRect.width),height:Math.round(R.contentRect.height)})});return $.observe(T),()=>$.unobserve(T)},[T]),p.useEffect(()=>{!r||V.current===C.type||(F($=>$+1),V.current=C.type)},[C.type]),l.jsx("div",{className:Te(ae.wrapper,{[ae.editor]:o}),ref:L,children:l.jsxs("div",{className:ae.sliderInner,style:{width:h?h.width:"100%",height:h?h.height:"100%",backgroundColor:C.backgroundColor&&C.type==="fade in"?C.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&l.jsx("div",{className:Te(ae.captionBlock),children:l.jsx("div",{className:ae.captionTextWrapper,children:t.map(($,k)=>l.jsx("div",{className:Te(ae.captionText,il[O.alignment],{[ae.withPointerEvents]:k===b&&o,[ae.active]:k===b}),style:{fontFamily:vo(c.fontFamily),fontWeight:c.fontWeight,fontStyle:c.fontStyle,width:i.sizing==="auto"?"max-content":E.scalingValue(i.width,o),letterSpacing:E.scalingValue(s,o),wordSpacing:E.scalingValue(u,o),textAlign:d,fontSize:E.scalingValue(P.fontSize,o),lineHeight:E.scalingValue(P.lineHeight,o),textTransform:v.textTransform??"none",textDecoration:v.textDecoration??"none",fontVariant:v.fontVariant??"normal",color:x,transitionDuration:C.duration?`${Math.round(parseInt(C.duration)/2)}ms`:"500ms"},children:l.jsx("div",{"data-styles":"imageCaption",className:ae.captionTextInner,style:{"--link-hover-color":O.linkHoverColor,"--link-color":O.linkColor,position:"relative",top:E.scalingValue(O.offset.y,o),left:E.scalingValue(O.offset.x,o)},children:l.jsx(wn,{content:$.imageCaption})})},k))})}),l.jsx(si,{onMove:$=>{m($.index)},ref:a,options:{arrows:!1,speed:C.duration?parseInt(C.duration):500,autoplay:S.autoPlay!==null,...S.autoPlay!==null&&{interval:parseInt(S.autoPlay)*1e3},direction:_==="horiz"||C.type==="fade in"?"ltr":"ttb",pagination:!1,drag:S.triggersList.drag,perPage:1,width:h?h.width:"100%",height:h?h.height:"100%",type:C.type==="fade in"?"fade":"loop",rewind:!0},children:t.map(($,k)=>l.jsx(li,{children:l.jsx("div",{className:ae.sliderItem,children:l.jsx("div",{className:ae.imgWrapper,children:l.jsx("img",{className:Te(ae.sliderImage,{[ae.contain]:$.image.objectFit==="contain",[ae.cover]:$.image.objectFit==="cover"}),src:$.image.url,alt:$.image.name??""})})})},k))},H),W.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:Te(ae.arrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:W.show==="on hover"}),style:{color:W.color,"--arrow-hover-color":W.hover},children:l.jsxs("button",{onClick:()=>{q("-1")},className:ae.arrowInner,style:{transform:`translate(${E.scalingValue(D,o)}, ${E.scalingValue(Z*(_==="horiz"?1:-1),o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[W.arrowsImgUrl&&l.jsx(_t,{url:W.arrowsImgUrl,fill:W.color,hoverFill:W.hover,className:Te(ae.arrowImg,ae.mirror)}),!W.arrowsImgUrl&&l.jsx(Ri,{color:W.color,className:Te(ae.arrowIcon,ae.arrowImg,ae.mirror)})]})}),l.jsx("div",{className:Te(ae.arrow,ae.nextArrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:W.show==="on hover"}),style:{color:W.color,"--arrow-hover-color":W.hover},children:l.jsxs("button",{className:ae.arrowInner,onClick:()=>q("+1"),style:{transform:`translate(${E.scalingValue(D*(_==="horiz"?-1:1),o)}, ${E.scalingValue(Z,o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[W.arrowsImgUrl&&l.jsx(_t,{url:W.arrowsImgUrl,fill:W.color,hoverFill:W.hover,className:ae.arrowImg}),!W.arrowsImgUrl&&l.jsx(Ri,{color:W.color,className:Te(ae.arrowIcon,ae.arrowImg)})]})})]}),S.triggersList.click&&l.jsx("div",{className:ae.clickOverlay,onClick:()=>{r&&r.go("+1")}}),w.isActive&&l.jsx("div",{className:Te(ae.pagination,{[ae.paginationInsideBottom]:w.position==="inside-1"&&_==="horiz",[ae.paginationInsideTop]:w.position==="inside-2"&&_==="horiz",[ae.paginationOutsideBottom]:w.position==="outside-1"&&_==="horiz",[ae.paginationOutsideTop]:w.position==="outside-2"&&_==="horiz",[ae.paginationInsideLeft]:w.position==="inside-1"&&_==="vert",[ae.paginationInsideRight]:w.position==="inside-2"&&_==="vert",[ae.paginationOutsideLeft]:w.position==="outside-1"&&_==="vert",[ae.paginationOutsideRight]:w.position==="outside-2"&&_==="vert",[ae.paginationVertical]:_==="vert"}),children:l.jsx("div",{className:ae.paginationInner,style:{backgroundColor:w.colors[2],transform:`scale(${w.scale/100}) translate(${E.scalingValue(w.offset.x,o)}, ${E.scalingValue(w.offset.y,o)}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:t.map(($,k)=>l.jsx("button",{onClick:()=>{r&&r.go(k)},className:Te(ae.paginationItem),children:l.jsx("div",{className:Te(ae.dot,{[ae.activeDot]:k===b}),style:{backgroundColor:k===b?w.colors[0]:w.colors[1],"--pagination-hover-color":w.hover}})},k))})})]})})}function Ri({color:e,className:t}){return l.jsx("svg",{viewBox:"0 0 10 18",className:t,children:l.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:l.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const al={element:rl,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Slider.mp4"},defaultSize:{d:{width:400,height:400},t:{width:400,height:400},m:{width:300,height:300}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.arrowsImgUrl"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{triggers:{title:"triggers",icon:"target",tooltip:"Triggers",type:"object",properties:{triggersList:{type:"object",display:{type:"toggle-ratio-group"},properties:{click:{type:"boolean"},drag:{type:"boolean"}}},autoPlay:{type:["string","null"],label:"Auto",display:{type:"step-selector"},enum:[null,"1s","2s","3s","4s","5s"]}}},direction:{icon:"horizontal-resize",tooltip:"Direction",type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},transition:{title:"transit",icon:"transition",tooltip:"Transition",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade in"]},backgroundColor:{type:["string","null"],title:"BG Color",display:{visible:!1,type:"settings-color-picker",format:"single"}},duration:{type:"string",label:"icon:hourglass",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},controls:{title:"controls",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:50,max:600,display:{type:"range-control"}},color:{title:"color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}},show:{title:"Show",type:"string",display:{type:"ratio-group"},enum:["always","on hover"]}}},pagination:{title:"nav",icon:"pagination",tooltip:"Navigation",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"socket",direction:"horizontal"},type:"string",enum:["outside-1","outside-2","inside-1","inside-2"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:10,max:400,display:{type:"range-control"}},colors:{display:{type:"settings-color-picker",format:"multiple"},title:"color",type:"array",items:{type:"string"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},imageCaption:{title:"Caption",icon:"text-icon",tooltip:"Caption",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}},default:{triggers:{triggersList:{click:!1,drag:!0},autoPlay:null},controls:{isActive:!0,arrowsImgUrl:null,offset:{x:0,y:0},scale:100,color:"#000000",hover:"#cccccc",show:"always"},transition:{type:"slide",duration:"500ms",backgroundColor:null},pagination:{isActive:!0,scale:50,position:"inside-1",offset:{x:0,y:0},colors:["#cccccc","#cccccc","#000000"],hover:"#cccccc"},direction:"horiz",imageCaption:{offset:{x:0,y:0},isActive:!0,alignment:"middle-center",linkColor:"#cccccc",linkHoverColor:"#cccccc"}},displayRules:[{if:{name:"direction",value:"vert"},then:{name:"properties.pagination.properties.position.display.direction",value:"vertical"}},{if:{name:"transition.type",value:"fade in"},then:{name:"properties.transition.properties.backgroundColor.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{placeholder:"Add Caption...",label:"Description",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}},sl="ImageRevealSlider-module__imageRevealSlider___UE5Ob",ll="ImageRevealSlider-module__image___Qjt-e",cl="ImageRevealSlider-module__link___N-iLG",dl="ImageRevealSlider-module__cursor___2U03d",Gt={imageRevealSlider:sl,image:ll,link:cl,cursor:dl};function Wi(e,t,n){for(const o of n){const r=new Image;r.src=o.url;const a=o.width?Number.parseFloat(o.width):r.naturalWidth,i=r.naturalHeight/r.naturalWidth*a,c=a/2,s=i/2;if(e>=o.x-c&&e<=o.x+c&&t>=o.y-s&&t<=o.y+s)return!0}return!1}function $o(e){return new Promise(t=>{const n=new Image;n.src=e,n.onload=()=>{t({width:n.naturalWidth,height:n.naturalHeight})}})}async function ul(e,t,n,o){let r,a;if(t==="custom"){r=n;const i=await $o(e);a=i.height/i.width*r}else if(t==="random"){r=Math.random()*(o.max-o.min)+o.min;const i=await $o(e);a=i.height/i.width*r}else{const i=await $o(e);r=i.width,a=i.height}return{width:r,height:a,finalWidth:`${r}px`}}function pl({settings:e,content:t,isEditor:n}){const[o,r]=p.useState(null),[a,i]=p.useState([]),[c,s]=p.useState(0),d=p.useRef(0),[u,P]=p.useState({x:0,y:0}),[v,x]=p.useState(1),[h,g]=p.useState("none"),T=p.useRef({x:0,y:0}),[L,b]=p.useState(!1),{sizeType:m,imageWidth:H,randomRangeImageWidth:F}=e.imageSize,{revealPosition:_,visible:C}=e.position,{cursorType:W,target:w,defaultCursorScale:O,defaultCursor:S,hoverCursorScale:V,hoverCursor:D}=e.cursor;p.useEffect(()=>{if(!o)return;const $=(B,I)=>{const A=o.getBoundingClientRect(),Q=B-A.left,ie=I-A.top;if(P({x:Q,y:ie}),W==="system"){g("none"),x(1);return}const re=Q,U=ie,M=document.elementFromPoint(A.left+re,A.top+U);if(M&&M.closest("a")){g("none"),x(1);return}const oe=Wi(re,U,a)||w==="area"?{img:D??"none",scale:V}:{img:S??"none",scale:O};g(oe.img),x(oe.scale)},k=B=>{B.stopPropagation(),T.current={x:B.clientX,y:B.clientY},$(B.clientX,B.clientY)},R=()=>{L&&$(T.current.x,T.current.y)};return o.addEventListener("mousemove",k),window.addEventListener("scroll",R,!0),()=>{o.removeEventListener("mousemove",k),window.removeEventListener("scroll",R,!0)}},[o,L,u,W,w,D,S,V,O,a]),p.useEffect(()=>{L||(g("none"),x(0))},[L]);const Z=async($,k,R,B={})=>{const{width:I,height:A,finalWidth:Q}=await ul($.image.url,m,H,F);let ie=0,re=0;_==="same"?(ie=k/2,re=R/2):(ie=B.x??Math.random()*k,re=B.y??Math.random()*R);const U=Math.min(Math.max(ie,I/2),k-I/2),M=Math.min(Math.max(re,A/2),R-A/2);return{id:d.current++,url:$.image.url,link:$.link,name:$.image.name,x:U,y:M,width:Q}};p.useEffect(()=>{if(!o||t.length===0)return;const $=o.getBoundingClientRect(),k=$.width,R=$.height,B=[];(async()=>{const A=t[0],Q=await Z(A,k,R);B.push(Q),i(B),s(1)})()},[m,H,F,_,o]),p.useEffect(()=>{C==="last One"&&i($=>$.length>0?[$[$.length-1]]:[])},[C]);const q=async $=>{if(!o)return;const k=o.getBoundingClientRect(),R=$.clientX-k.left,B=$.clientY-k.top;if(w==="image"&&!Wi(R,B,a))return;let I=0,A=0;_==="on Click"?(I=R,A=B):_==="same"?(I=k.width/2,A=k.height/2):(I=Math.random()*k.width,A=Math.random()*k.height);const Q=t[c],ie=await Z(Q,k.width,k.height,{x:I,y:A});i(re=>C==="all"?[...re,ie]:[ie]),s(re=>re>=t.length-1?0:re+1)};return l.jsxs("div",{ref:r,onClick:q,onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),className:Gt.imageRevealSlider,style:{cursor:h==="none"?"default":"none"},children:[a.map($=>l.jsx("div",{className:Gt.wrapper,style:{top:`${$.y}px`,left:`${$.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:$.width??"auto",height:"auto",cursor:h==="none"?"default":"none"},children:w==="area"&&$.link?l.jsx("a",{href:$.link,target:"_blank",className:Gt.link,children:l.jsx("img",{src:$.url,alt:$.name,className:Gt.image},$.id)}):l.jsx("img",{src:$.url,alt:$.name,className:Gt.image},$.id)},$.id)),L&&l.jsx("div",{className:Gt.cursor,style:{left:`${u.x}px`,top:`${u.y}px`,transform:`translate(-50%, -50%) scale(${v})`,backgroundImage:`url('${h}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const ml={element:pl,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Click_Gallery.mp4"},defaultSize:{d:{width:"100%",height:"100%"},t:{width:"100%",height:"100%"},m:{width:"100%",height:"100%"}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.cursor.defaultCursor"},{path:"settings.cursor.hoverCursor"}]},fontSettingsPaths:{content:[],parameters:[]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{imageSize:{title:"IMG SIZE",icon:"size",tooltip:"IMG SIZE",type:"object",properties:{sizeType:{type:"string",display:{type:"ratio-group"},enum:["as Is","custom","random"]},imageWidth:{type:"number",label:"W",display:{type:"numeric-input",visible:!1}},randomRangeImageWidth:{type:"object",display:{type:"random-range-controls",visible:!1},properties:{min:{type:"number"},max:{type:"number"}}}}},cursor:{title:"cursor",icon:"cursor",tooltip:"cursor",type:"object",properties:{cursorType:{type:"string",display:{type:"ratio-group"},enum:["system","custom"]},target:{type:"string",title:"Target",display:{type:"ratio-group"},enum:["area","image"]},defaultCursor:{type:["string","null"],title:"Default",display:{type:"settings-image-input",visible:!1}},defaultCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}},hoverCursor:{type:["string","null"],title:"Hover",display:{type:"settings-image-input",visible:!1}},hoverCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}}}},position:{title:"position",icon:"transition",tooltip:"Position",type:"object",properties:{revealPosition:{type:"string",display:{type:"ratio-group"},enum:["random","same","on Click"]},visible:{type:"string",title:"Visible",display:{type:"ratio-group"},enum:["all","last One"]}}}},default:{imageSize:{sizeType:"custom",imageWidth:500,randomRangeImageWidth:{min:100,max:1e3}},cursor:{cursorType:"system",target:"area",defaultCursor:null,defaultCursorScale:2,hoverCursor:null,hoverCursorScale:2},position:{revealPosition:"random",visible:"all"}},displayRules:[{if:{name:"imageSize.sizeType",value:"custom"},then:{name:"properties.imageSize.properties.imageWidth.display.visible",value:!0}},{if:{name:"imageSize.sizeType",value:"random"},then:{name:"properties.imageSize.properties.randomRangeImageWidth.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"}],then:{name:"properties.cursor.properties.defaultCursor.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"},{name:"cursor.defaultCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.defaultCursorScale.display.visible",value:!0}},{if:{name:"cursor.cursorType",value:"custom"},then:{name:"properties.cursor.properties.hoverCursor.display.visible",value:!0}},{if:[{name:"cursor.cursorType",value:"custom"},{name:"cursor.hoverCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.hoverCursorScale.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",name:"Slider-1.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",name:"Slider-2.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",name:"Slider-3.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQP84JKRDT7WNWDQZR4Y9.png",name:"Slider-4.png"},link:""}]}}}},gl="LightBox-module__hidden___9s-9x",hl="LightBox-module__heroImage___sTxNF",fl="LightBox-module__background___rm9ml",yl="LightBox-module__editor___4ACaY",vl="LightBox-module__contentStyle___Bgnsq",bl="LightBox-module__imageStyle___tLIlB",xl="LightBox-module__imgWrapper___LuFUp",Cl="LightBox-module__contain___8-yaS",Sl="LightBox-module__cover___hNvOG",wl="LightBox-module__caption___b6L2I",$l="LightBox-module__captionTextInner___rCGNH",Tl="LightBox-module__lightboxSplide___XFuWC",Ll="LightBox-module__arrow___iz38X",El="LightBox-module__arrowVertical___Zfz81",Pl="LightBox-module__nextArrow___zkAQN",_l="LightBox-module__arrowInner___p48sW",Al="LightBox-module__arrowIcon___3VaFf",Rl="LightBox-module__arrowImg___pNV88",Wl="LightBox-module__mirror___pjeXc",Il="LightBox-module__thumbsWrapper___GB-nU",kl="LightBox-module__thumbsContainerVertical___wttk5",Fl="LightBox-module__thumbsContainer___osSma",Ml="LightBox-module__thumbsAlignStart___MO6tY",Nl="LightBox-module__thumbsAlignCenter___Q4sUx",Hl="LightBox-module__thumbsAlignEnd___p4y9R",Bl="LightBox-module__thumbItem___HvnF3",Ol="LightBox-module__closeButton___g2khP",Vl="LightBox-module__fadeIn___0m5GW",Dl="LightBox-module__slideInLeft___gPYwC",jl="LightBox-module__slideInRight___S-pPp",zl="LightBox-module__slideInTop___DFdAj",Kl="LightBox-module__slideInBottom___m27kZ",ql="LightBox-module__fadeOut___55qBR",Ul="LightBox-module__slideOutLeft___NvU7P",Gl="LightBox-module__slideOutRight___SK7eC",Yl="LightBox-module__slideOutTop___Vgg0z",Xl="LightBox-module__slideOutBottom___nJ0Ef",Zl="LightBox-module__scaleSlide___vZriG",J={hidden:gl,heroImage:hl,background:fl,editor:yl,contentStyle:vl,imageStyle:bl,imgWrapper:xl,contain:Cl,cover:Sl,caption:wl,captionTextInner:$l,lightboxSplide:Tl,arrow:Ll,arrowVertical:El,nextArrow:Pl,arrowInner:_l,arrowIcon:Al,arrowImg:Rl,mirror:Wl,thumbsWrapper:Il,thumbsContainerVertical:kl,thumbsContainer:Fl,thumbsAlignStart:Ml,thumbsAlignCenter:Nl,thumbsAlignEnd:Hl,thumbItem:Bl,closeButton:Ol,fadeIn:Vl,slideInLeft:Dl,slideInRight:jl,slideInTop:zl,slideInBottom:Kl,fadeOut:ql,slideOutLeft:Ul,slideOutRight:Gl,slideOutTop:Yl,slideOutBottom:Xl,scaleSlide:Zl},Vn=(e,t,n)=>{const o={},[r,a]=e.split("-");return r==="top"?(o.top="0",o.bottom="auto"):r==="middle"?(o.top="50%",o.bottom="auto"):r==="bottom"&&(o.top="auto",o.bottom="0"),a==="left"?(o.left="0",o.right="auto"):a==="center"?(o.left="50%",o.right="auto"):a==="right"&&(o.left="auto",o.right="0"),r==="middle"&&a==="center"?o.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), calc(-50% + ${E.scalingValue(t.y,n)}))`:r==="middle"?o.transform=`translate(${E.scalingValue(t.x,n)}, calc(-50% + ${E.scalingValue(t.y,n)}))`:a==="center"?o.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), ${E.scalingValue(t.y,n)})`:o.transform=`translate(${E.scalingValue(t.x,n)}, ${E.scalingValue(t.y,n)})`,o};function Mr(e){const t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function Ii(e){const t=e.getBoundingClientRect(),n=Mr(e),o=Math.max(0,t.width-n.left-n.right),r=Math.max(0,t.height-n.top-n.bottom),a=e.naturalWidth,i=e.naturalHeight,c=o/r,s=a/i;let d,u;s>c?(d=o,u=o/s):(u=r,d=r*s);const P=t.left+n.left,v=t.top+n.top,x=(o-d)/2+P,h=(r-u)/2+v;return{x,y:h,width:d,height:u}}function ki(e){const t=e.getBoundingClientRect(),n=Mr(e);return{left:t.left+n.left,right:t.right-n.right,top:t.top+n.top,bottom:t.bottom-n.bottom}}function Fi(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const o=t[1].split(",").map(r=>parseFloat(r.trim()));return o.length===4?o[3]:1}const n=e.match(/^#([0-9a-fA-F]{8})$/);if(n){const o=n[1].substring(6,8);return parseInt(o,16)/255}return e.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function Jl(e,t){const n=(()=>{if(e==="fade in")return J.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return J.slideInLeft;case"right":return J.slideInRight;case"top":return J.slideInTop;case"bottom":return J.slideInBottom;default:return J.slideInRight}return J.fadeIn})(),o=(()=>{if(e==="fade in"||e==="mix")return J.fadeIn;if(e==="slide in")switch(t){case"left":return J.slideInLeft;case"right":return J.slideInRight;case"top":return J.slideInTop;case"bottom":return J.slideInBottom;default:return J.slideInRight}return J.fadeIn})(),r=(()=>{if(e==="fade in"||e==="mix")return J.fadeOut;if(e==="slide in")switch(t){case"left":return J.slideOutLeft;case"right":return J.slideOutRight;case"top":return J.slideOutTop;case"bottom":return J.slideOutBottom;default:return J.slideOutRight}return J.fadeOut})(),a=(()=>{if(e==="fade in")return J.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return J.slideOutLeft;case"right":return J.slideOutRight;case"top":return J.slideOutTop;case"bottom":return J.slideOutBottom;default:return J.slideOutRight}return J.fadeOut})();return{appearClass:n,backdropAppearClass:o,backdropDisappearClass:r,disappearClass:a}}const Ql=({settings:e,content:t,styles:n,portalId:o,activeEvent:r,isEditor:a,isPreviewMode:i})=>{const[c,s]=p.useState(!1),{url:d}=e.thumbnailBlock.cover;return p.useEffect(()=>{r==="close"&&s(!1),r==="open"&&s(!0)},[r]),l.jsxs(l.Fragment,{children:[l.jsx("img",{src:d,alt:"Cover",className:J.heroImage,onClick:()=>s(!0)}),l.jsx(ec,{isOpen:c,onClose:()=>s(!1),content:t,settings:e,lightboxStyles:n,portalId:o,isEditor:a})]})},ec=({isOpen:e,onClose:t,content:n,lightboxStyles:o,settings:r,portalId:a,isEditor:i,metadata:c})=>{var y;const[s,d]=p.useState(0),[u,P]=p.useState(0),[v,x]=p.useState(!1),[h,g]=p.useState(!1),[T,L]=p.useState({}),b=p.useRef(null),m=p.useRef(null),H=p.useRef(null),F=p.useRef(!1),_=p.useRef(null),C=p.useRef(null),W=p.useRef(null),w=p.useRef(null),O=p.useRef(!1),S=p.useRef(null),[V,D]=p.useState(!1),{appear:Z,triggers:q,slider:$,thumbnail:k,controls:R,area:B,caption:I,layout:A}=r.lightboxBlock,{appearClass:Q,backdropAppearClass:ie,backdropDisappearClass:re,disappearClass:U}=Jl(Z.type,Z.direction),M=(c==null?void 0:c.itemId)??null;p.useEffect(()=>{const f=()=>{setTimeout(()=>{var K,G;(G=(K=b.current)==null?void 0:K.splide)==null||G.refresh()},16)},N=()=>{P(K=>K+1)};return window.addEventListener("ArticleEditor.Layout:change",f),window.addEventListener("ArticleEditor.ComponentContent:change",N),()=>{window.removeEventListener("ArticleEditor.Layout:change",f),window.removeEventListener("ArticleEditor.ComponentContent:change",N)}},[]),p.useEffect(()=>{if(!e||!k.isActive){D(!1);return}const f=S.current;if(!f)return;const N=()=>{$.direction==="horiz"?D(f.scrollWidth>f.clientWidth):D(f.scrollHeight>f.clientHeight)};N();const K=new ResizeObserver(N);return K.observe(f),()=>K.disconnect()},[e,k.isActive,n.length,T,$.direction]);const oe=p.useCallback(()=>{const f=window.matchMedia("(max-width: 768px)").matches,N=Fi(B.color);f&&!i&&N>.9&&(document.body.style.backgroundColor=""),x(!0),F.current=!0;const K=G=>{G.target===_.current&&G.animationName&&(_.current&&C.current&&_.current.removeEventListener("animationend",C.current),C.current=null,F.current&&(F.current=!1,t()),x(!1))};_.current&&(C.current=K,_.current.addEventListener("animationend",K))},[t,B.color,i]),Ce=(f,N,K)=>{var G,ee;if(f){if(q.type==="click"&&q.switch==="image")q.repeat==="close"&&s===n.length-1?oe():(G=b.current)==null||G.go("+1");else if(q.type==="click"&&q.switch==="50/50"){const te=f.getBoundingClientRect(),X=N-te.left,ce=K-te.top,ve=te.width,de=te.height;let xe;$.direction==="horiz"?xe=X<ve/2?"-1":"+1":xe=ce<de/2?"-1":"+1",(ee=b.current)==null||ee.go(xe)}}},ue=f=>{if(O.current){O.current=!1;return}const N=n[s],K=(N==null?void 0:N.image.objectFit)==="cover";let G,ee;if("changedTouches"in f&&f.changedTouches.length>0)G=f.changedTouches[0].clientX,ee=f.changedTouches[0].clientY;else if("clientX"in f)G=f.clientX,ee=f.clientY;else return;let te;if(K&&H.current){const X=ki(H.current);te=G>=X.left&&G<=X.right&&ee>=X.top&&ee<=X.bottom}else{const X=H.current?Ii(H.current):null;if(!X){f.target===f.currentTarget&&oe();return}te=G>=X.x&&G<=X.x+X.width&&ee>=X.y&&ee<=X.y+X.height}te?Ce(H.current,G,ee):oe()},fe=f=>{const N=f.target;(N.classList.contains(J.thumbsWrapper)||N.classList.contains(J.thumbsContainer))&&ue(f)};p.useEffect(()=>{if(!e)return;const f=N=>{var K,G;if(N.key==="Escape"){oe();return}if(N.key==="ArrowRight"){d(ee=>(ee+1)%Math.max(n.length,1)),(K=b.current)==null||K.go("+1");return}N.key==="ArrowLeft"&&(d(ee=>(ee-1+Math.max(n.length,1))%Math.max(n.length,1)),(G=b.current)==null||G.go("-1"))};return window.addEventListener("keydown",f),()=>{window.removeEventListener("keydown",f)}},[e,oe,n.length]),p.useEffect(()=>{if(e){if(d(0),P(N=>N+1),F.current=!1,x(!1),g(!1),L({}),!M)return;const f=new CustomEvent("page-overlay",{detail:{itemId:M}});window.dispatchEvent(f)}return()=>{_.current&&C.current&&(_.current.removeEventListener("animationend",C.current),C.current=null),g(!1)}},[e,M]),p.useEffect(()=>{m.current!==null&&m.current!==$.type&&P(f=>f+1),m.current=$.type},[$.type]),p.useEffect(()=>{if(!e)return;const f=document.body.style.overflow,N=window.matchMedia("(max-width: 768px)").matches,K=Fi(B.color);document.body.style.overflow="hidden",g(!1);const G=te=>{te.target===_.current&&!F.current&&te.animationName&&(N&&!i&&K>.9&&(document.body.style.backgroundColor=B.color),g(!0),_.current&&W.current&&_.current.removeEventListener("animationend",W.current),W.current=null)};_.current&&(W.current=G,_.current.addEventListener("animationend",G));const ee=te=>{const X=te.target;X&&(X.closest(`.${J.thumbsWrapper}`)||X.closest(`.${J.thumbsContainer}`))||$.type!=="slide"&&te.preventDefault()};return document.addEventListener("touchmove",ee,{passive:!1}),()=>{document.body.style.overflow=f,document.removeEventListener("touchmove",ee),_.current&&W.current&&(_.current.removeEventListener("animationend",W.current),W.current=null),g(!1)}},[e,i,B.color,$.type]),p.useEffect(()=>{if(!e)return;const f=N=>{var G,ee;if(F.current){N.stopPropagation();return}if(O.current){O.current=!1;return}const K=N.target;if(!(K&&(K.closest(`.${J.thumbsContainer}`)||K.closest(`.${J.thumbItem}`)||K.closest(`.${J.arrow}`)||K.closest(`.${J.closeButton}`)||K.closest(`.${J.caption}`)))){if($.type==="slide"&&q.type==="drag"&&((ee=(G=b.current)==null?void 0:G.splide)!=null&&ee.root)){const te=b.current.splide.root;if(K&&(te.contains(K)||te===K))return}if(N.touches.length===0&&N.changedTouches.length>0){const te=n[s],X=(te==null?void 0:te.image.objectFit)==="cover",ce=N.changedTouches[0];let ve;if(X&&H.current){const de=ki(H.current);ve=ce.clientX>=de.left&&ce.clientX<=de.right&&ce.clientY>=de.top&&ce.clientY<=de.bottom}else{const de=H.current?Ii(H.current):null;if(!de)return;ve=ce.clientX>=de.x&&ce.clientX<=de.x+de.width&&ce.clientY>=de.y&&ce.clientY<=de.y+de.height}if(!ve){N.stopPropagation(),F.current=!0;const de=xe=>{xe.stopPropagation(),xe.preventDefault(),document.removeEventListener("click",de,!0)};document.addEventListener("click",de,!0),oe()}}}};return document.addEventListener("touchend",f,{passive:!0}),()=>{document.removeEventListener("touchend",f)}},[e,oe,s,n]);const Re=($.type==="scale"||$.type==="fade")&&$.direction==="vert"&&q.type==="drag";p.useEffect(()=>{var xe,z;if(!e||!Re||!((z=(xe=b.current)==null?void 0:xe.splide)!=null&&z.root))return;const f=b.current.splide.root,N=30,K=(Y,j)=>{if(w.current){const le=Math.abs(Y-w.current.x),we=Math.abs(j-w.current.y);(le>0||we>0)&&(O.current=!0)}},G=Y=>{w.current&&(Y.preventDefault(),K(Y.clientX,Y.clientY))},ee=Y=>{w.current&&Y.touches.length>0&&(Y.preventDefault(),K(Y.touches[0].clientX,Y.touches[0].clientY))},te=(Y,j)=>{if(!w.current||!b.current){w.current=null;return}const le=Math.abs(Y-w.current.x),we=Math.abs(j-w.current.y);we>N&&we>le&&b.current.go(j<w.current.y?"+1":"-1"),w.current=null},X=Y=>{w.current&&te(Y.clientX,Y.clientY),document.removeEventListener("pointerup",X),document.removeEventListener("pointercancel",X),document.removeEventListener("pointermove",G)},ce=Y=>{if(w.current){if(Y.changedTouches.length>0){const j=Y.changedTouches[0];te(j.clientX,j.clientY)}document.removeEventListener("touchend",ce),document.removeEventListener("touchcancel",ce),document.removeEventListener("touchmove",ee)}},ve=Y=>{w.current={x:Y.clientX,y:Y.clientY},O.current=!1,document.addEventListener("pointermove",G,{passive:!1}),document.addEventListener("pointerup",X),document.addEventListener("pointercancel",X)},de=Y=>{Y.touches.length>0&&(w.current={x:Y.touches[0].clientX,y:Y.touches[0].clientY},O.current=!1,document.addEventListener("touchmove",ee,{passive:!1}),document.addEventListener("touchend",ce),document.addEventListener("touchcancel",ce))};return f.addEventListener("pointerdown",ve),f.addEventListener("touchstart",de),()=>{f.removeEventListener("pointerdown",ve),f.removeEventListener("touchstart",de),document.removeEventListener("pointermove",G),document.removeEventListener("pointerup",X),document.removeEventListener("pointercancel",X),document.removeEventListener("touchmove",ee),document.removeEventListener("touchend",ce),document.removeEventListener("touchcancel",ce),w.current=null,O.current=!1}},[e,Re,u]);const ne={backgroundColor:B.color,backdropFilter:`blur(${B.blur}px)`,animationDuration:`${parseInt(Z.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(a)?null:Qi.createPortal(l.jsxs(l.Fragment,{children:[l.jsx("div",{ref:i?null:_,className:Te(J.background,v?re:ie,{[J.editor]:i},{[J.hidden]:!e}),style:{...ne,...h&&!i&&!v?{position:"absolute"}:{}}}),l.jsxs("div",{ref:i?_:null,className:Te(J.contentStyle,v?U:Q,{[J.editor]:i},{[J.hidden]:!e}),style:{animationDuration:`${parseInt(Z.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[l.jsx(si,{onMove:f=>d(f.index),ref:b,className:J.lightboxSplide,options:{arrows:!1,speed:$.duration?parseInt($.duration):500,direction:$.direction==="horiz"||$.type==="fade"||$.type==="scale"?"ltr":"ttb",pagination:!1,drag:q.type==="drag"&&!Re,perPage:1,width:"100%",height:"100%",type:$.type==="fade"||$.type==="scale"?"fade":"loop",padding:0,rewind:q.repeat!=="close",start:0},style:{"--splide-speed":$.duration},children:n.map((f,N)=>{const K=Vn(A.position,A.offset,i),G=`${E.scalingValue(A.padding.top,i)} ${E.scalingValue(A.padding.right,i)} ${E.scalingValue(A.padding.bottom,i)} ${E.scalingValue(A.padding.left,i)}`,ee=$.type==="scale"?(()=>{const{transform:te,...X}=K;return{...X,position:"absolute",padding:G,boxSizing:"border-box","--position-transform":te||"none"}})():{...K,position:"absolute",padding:G,boxSizing:"border-box"};return l.jsx(li,{children:l.jsx("div",{className:J.imgWrapper,onClick:ue,children:l.jsx("img",{ref:N===s?H:null,className:Te(J.imageStyle,{[J.contain]:f.image.objectFit==="contain",[J.cover]:f.image.objectFit==="cover",[J.scaleSlide]:$.type==="scale"}),src:f.image.url,alt:f.image.name??"",style:{...ee,pointerEvents:f.image.objectFit==="contain"?"none":"auto"}})})},N)})},u),R.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:Te(J.arrow,{[J.arrowVertical]:$.direction==="vert"}),style:{color:R.color,"--arrow-hover-color":R.hover},children:l.jsxs("button",{className:J.arrowInner,style:{transform:`translate(${E.scalingValue(R.offset.x,i)}, ${E.scalingValue(R.offset.y*($.direction==="horiz"?1:-1),i)}) scale(${R.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var f;return(f=b.current)==null?void 0:f.go("-1")},"aria-label":"Previous",children:[R.arrowsImgUrl&&l.jsx(_t,{url:R.arrowsImgUrl,fill:R.color,hoverFill:R.hover,className:Te(J.arrowImg,J.mirror)}),!R.arrowsImgUrl&&l.jsx(Mi,{color:R.color,className:Te(J.arrowIcon,J.arrowImg,J.mirror)})]})}),l.jsx("div",{className:Te(J.arrow,J.nextArrow,{[J.arrowVertical]:$.direction==="vert"}),style:{color:R.color,"--arrow-hover-color":R.hover},children:l.jsxs("button",{className:J.arrowInner,style:{transform:`translate(${E.scalingValue(R.offset.x*($.direction==="horiz"?-1:1),i)}, ${E.scalingValue(R.offset.y,i)}) scale(${R.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var f;return(f=b.current)==null?void 0:f.go("+1")},"aria-label":"Next",children:[R.arrowsImgUrl&&l.jsx(_t,{url:R.arrowsImgUrl,fill:R.color,hoverFill:R.hover,className:J.arrowImg}),!R.arrowsImgUrl&&l.jsx(Mi,{color:R.color,className:Te(J.arrowIcon,J.arrowImg)})]})})]}),B.closeIconUrl&&(()=>{const f=Vn(B.closeIconAlign,B.closeIconOffset,i),N=`scale(${B.closeIconScale})`,K=f.transform?`${f.transform} ${N}`:N;return l.jsx("button",{className:J.closeButton,style:{...f,transform:K},onClick:oe,"aria-label":"Close lightbox",children:l.jsx(_t,{url:B.closeIconUrl,fill:B.closeIconColor??"#000000",hoverFill:B.closeIconHover??"#cccccc"})})})(),I&&I.isActive&&o.imageCaption&&((y=n[s])==null?void 0:y.imageCaption)&&(()=>{const{widthSettings:f,fontSettings:N,letterSpacing:K,textAlign:G,wordSpacing:ee,fontSizeLineHeight:te,textAppearance:X,color:ce}=o.imageCaption;return l.jsx("div",{className:J.caption,style:{...Vn(I.alignment,I.offset,i),fontFamily:vo(N.fontFamily),fontWeight:N.fontWeight,fontStyle:N.fontStyle,width:f.sizing==="auto"?"max-content":E.scalingValue(f.width,i),letterSpacing:E.scalingValue(K,i),wordSpacing:E.scalingValue(ee,i),textAlign:G,fontSize:E.scalingValue(te.fontSize,i),lineHeight:E.scalingValue(te.lineHeight,i),textTransform:X.textTransform??"none",textDecoration:X.textDecoration??"none",fontVariant:X.fontVariant??"normal",color:ce},onClick:ve=>ve.stopPropagation(),children:l.jsx("div",{"data-styles":"imageCaption",className:J.captionTextInner,style:{"--link-color":I.linkColor,"--link-hover-color":I.linkHoverColor},children:l.jsx(wn,{content:n[s].imageCaption})})})})(),k.isActive&&(()=>{const[f,N]=k.position.split("-"),K=$.direction==="horiz"?`${f}-left`:k.position,G=Vn(K,k.offset,i),ee=()=>{if($.direction==="horiz"){if(N==="left")return"flex-start";if(N==="center")return"center";if(N==="right")return"flex-end"}else{if(f==="top")return"flex-start";if(f==="middle")return"center";if(f==="bottom")return"flex-end"}return"flex-start"};return l.jsx("div",{ref:S,className:J.thumbsWrapper,onClick:te=>fe(te),style:{position:i?"absolute":"fixed",...G,...$.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:l.jsx("div",{className:Te(J.thumbsContainer,{[J.thumbsContainerVertical]:$.direction==="vert",[J.thumbsAlignStart]:k.align==="start",[J.thumbsAlignCenter]:k.align==="center",[J.thumbsAlignEnd]:k.align==="end"}),style:{gap:E.scalingValue(k.grid.gap,i),justifyContent:V?"flex-start":ee()},children:n.map((te,X)=>{const ce=X===s,ve=T[X],xe=k.grid.size*(ce?k.activeState.scale:1),z=()=>{if(k.fit!=="fit")return{};if(!ve)return $.direction==="horiz"?{height:E.scalingValue(xe,i)}:{width:E.scalingValue(xe,i)};const Y=ve.width/ve.height;if($.direction==="horiz"){const j=xe,le=j*Y;return{width:E.scalingValue(le,i),height:E.scalingValue(j,i)}}else{const j=xe,le=j/Y;return{width:E.scalingValue(j,i),height:E.scalingValue(le,i)}}};return l.jsx("button",{className:J.thumbItem,style:{...$.direction==="horiz"&&k.fit!=="fit"?{height:E.scalingValue(xe,i)}:{},...$.direction==="vert"&&k.fit!=="fit"?{width:E.scalingValue(xe,i)}:{},...k.fit==="cover"?{width:E.scalingValue(xe,i),height:E.scalingValue(xe,i)}:{},...z(),transition:ce?"all 0.25s ease-out":"none",opacity:ce?k.activeState.opacity/100:k.opacity/100,"--thumb-hover":k.activeState.opacity/100},onClick:Y=>{var j;Y.stopPropagation(),d(X),(j=b.current)==null||j.go(X)},onMouseEnter:()=>{var Y;k.triggers==="hov"&&((Y=b.current)==null||Y.go(X))},children:l.jsx("img",{src:te.image.url,alt:te.image.name??"",onLoad:Y=>{const j=Y.currentTarget;j.naturalWidth&&j.naturalHeight&&L(le=>({...le,[X]:{width:j.naturalWidth,height:j.naturalHeight}}))},style:{objectFit:k.fit==="cover"?"cover":"contain",...k.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...k.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${te.image.name}-${X}`)})})})})()]})]}),document.getElementById(a))};function Mi({color:e,className:t}){return l.jsx("svg",{viewBox:"0 0 10 18",className:t,children:l.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:l.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const tc={element:Ql,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Lightbox.png"},defaultSize:{d:{width:440,height:550},t:{width:235,height:293},m:{width:265,height:331}},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.thumbnailBlock.cover.url",placeholderEnabled:!0},{path:"settings.controls.arrowsImgUrl"},{path:"settings.area.closeIconUrl"}]},schema:{type:"object",properties:{settings:{type:"object",properties:{thumbnailBlock:{display:{type:"settings-block",triggerEvent:"close"},type:"object",properties:{cover:{title:"COVER",icon:"cover",tooltip:"Cover Image",type:"object",properties:{url:{type:"string",display:{type:"cover-image-input"}}}}}},lightboxBlock:{display:{type:"settings-block",triggerEvent:"open"},type:"object",properties:{appear:{title:"APPEAR",icon:"transition",tooltip:"Appearance",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide in","fade in","mix"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]},direction:{type:"string",title:"From",display:{type:"direction-control"},enum:["top","left","right","bottom"]}}},triggers:{title:"TRIGGERS",icon:"target",tooltip:"Triggers",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["click","drag"]},switch:{type:"string",display:{type:"ratio-group"},enum:["image","50/50"]},repeat:{type:"string",title:"Repeat",display:{visible:!1,type:"ratio-group"},enum:["close","loop"]}}},slider:{title:"SLIDER",icon:"horizontal-resize",tooltip:"Slider",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade","scale"]},direction:{type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},thumbnail:{title:"THUMB",icon:"thumbnail",tooltip:"Thumbnail",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},fit:{type:"string",display:{type:"ratio-group"},enum:["cover","fit"]},align:{type:"string",title:"Align",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},triggers:{type:"string",title:"Triggers",display:{type:"ratio-group",direction:"horizontal"},enum:["clk","hov"]},grid:{type:"object",title:"Grid",display:{type:"group"},properties:{size:{type:"number",label:"Box",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},gap:{type:"number",label:"Gap",scalingEnabled:!0,min:0,display:{type:"numeric-input"}}}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}},activeState:{type:"object",title:"ACTIVE",display:{type:"group"},properties:{scale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control"}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}}}}}},layout:{title:"LAYOUT",icon:"layout",tooltip:"Layout",type:"object",properties:{position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},padding:{type:"object",title:"Padding",display:{type:"padding-controls"},properties:{top:{min:0,step:1,type:"number"},left:{min:0,step:1,type:"number"},right:{min:0,step:1,type:"number"},bottom:{min:0,step:1,type:"number"}}}}},controls:{title:"CONTROLS",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},color:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},area:{title:"AREA",icon:"area",tooltip:"Area",type:"object",properties:{color:{type:"string",display:{type:"settings-color-picker",format:"single"}},blur:{type:"number",label:"icon:blur",display:{type:"numeric-input"}},closeIconUrl:{type:["string","null"],title:"Close Icon",display:{type:"settings-image-input"}},closeIconAlign:{display:{type:"align-grid",direction:"horizontal"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},closeIconScale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},closeIconOffset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},closeIconColor:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},closeIconHover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},caption:{title:"DESC",icon:"text-icon",tooltip:"Description",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}}}},default:{d:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"slide in",duration:"1000ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.01,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:0,bottom:.06,left:0}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},linkColor:"#cccccc",linkHoverColor:"#cccccc"}}},m:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"horiz",duration:"1000ms"},thumbnail:{isActive:!0,position:"bottom-center",fit:"fit",align:"start",triggers:"hov",grid:{size:.1,gap:.05},offset:{x:.01,y:-.05},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.05,bottom:.06,left:.05}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}},t:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.03,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.1,bottom:.06,left:.1}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}}},displayRules:[{if:{name:"lightboxBlock.appear.type",value:"slide in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.slider.direction",value:"vert"},then:{name:"properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",value:"vertical"}},{if:{name:"lightboxBlock.appear.type",value:"mix"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.appear.type",value:"fade in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!1}},{if:[{name:"lightboxBlock.triggers.type",value:"click"},{name:"lightboxBlock.triggers.switch",value:"image"}],then:{name:"properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{label:"Description",placeholder:"Add Caption...",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/2.jpg",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/3.jpg",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/4.jpg",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}};function Dn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function nc(e){return`
|
|
6
|
+
*/const al="RichTextRenderer-module__link___BWeZ2",sl={link:al},ll=e=>{const t=e.trim();return!t||t.startsWith('"')&&t.endsWith('"')||t.startsWith("'")&&t.endsWith("'")?!1:t.split(/\s+/g).filter(Boolean).some(i=>/^\d/.test(i))},Nn=e=>e&&e.split(",").map(n=>n.trim()).filter(Boolean).map(n=>ll(n)?`"${n.replace(/"/g,'\\"')}"`:n).join(", ");function ft(e){const{color:t,...n}=e;return n}function Ue(e,t){var a,s,o;const{fontSize:n,lineHeight:i}=e;return{fontFamily:Nn(e.fontSettings.fontFamily),fontWeight:e.fontSettings.fontWeight,fontStyle:e.fontSettings.fontStyle,letterSpacing:E.scalingValue(e.letterSpacing,t),wordSpacing:E.scalingValue(e.wordSpacing,t),fontSize:E.scalingValue(n,t),lineHeight:i!==void 0?E.scalingValue(i,t):void 0,textTransform:(a=e.textAppearance)==null?void 0:a.textTransform,textDecoration:(s=e.textAppearance)==null?void 0:s.textDecoration,fontVariant:(o=e.textAppearance)==null?void 0:o.fontVariant,textAlign:e.textAlign,color:e.color}}const sn=({content:e})=>{const t=n=>n.map((i,a)=>i.type==="link"?r.jsx("a",{className:sl.link,href:i.value,target:i.target,children:t(i.children)},a):r.jsx("span",{style:cl(i),children:i.text},a));return r.jsx(r.Fragment,{children:e.map((n,i)=>{const a=n.children;return r.jsx("div",{children:t(a)},i)})})};function cl(e){return{...e.fontFamily&&{fontFamily:Nn(e.fontFamily)},...e.fontWeight&&{fontWeight:e.fontWeight},...e.fontStyle&&{fontStyle:e.fontStyle},...e.textDecoration&&{textDecoration:e.textDecoration},...e.textTransform&&{textTransform:e.textTransform},...e.fontVariant&&{fontVariant:e.fontVariant},...e.verticalAlign&&{verticalAlign:e.verticalAlign,lineHeight:"0px"}}}const dl="SvgImage-module__svg___q3xE-",ul="SvgImage-module__img___VsTm-",_o={svg:dl,img:ul},pl=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},ml=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,yt=({url:e,fill:t="#000000",hoverFill:n="#CCCCCC",className:i="",style:a})=>{const[s,o]=c.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return c.useEffect(()=>{if(typeof window<"u"&&window.CSS){const d=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');o(d)}},[]),!pl(e)||!s?r.jsx("img",{src:e,alt:"",className:Ie(_o.img,i),style:a}):r.jsx("span",{"data-supports-mask":s,className:Ie(_o.svg,i),style:{"--svg":ml(e),"--fill":t,"--hover-fill":n,...a??{}}})},gl={"top-left":de.topLeftAlignment,"top-center":de.topCenterAlignment,"top-right":de.topRightAlignment,"middle-left":de.middleLeftAlignment,"middle-center":de.middleCenterAlignment,"middle-right":de.middleRightAlignment,"bottom-left":de.bottomLeftAlignment,"bottom-center":de.bottomCenterAlignment,"bottom-right":de.bottomRightAlignment};function hl({settings:e,content:t,styles:n,isEditor:i}){const[a,s]=c.useState(null),{widthSettings:o,fontSettings:d,letterSpacing:l,textAlign:u,wordSpacing:p,fontSizeLineHeight:I,textAppearance:b,color:w}=n.imageCaption,[f,h]=c.useState(void 0),[T,L]=c.useState(null),[C,m]=c.useState(0),[z,j]=c.useState(0),{direction:R,transition:x,controls:A,pagination:S,imageCaption:K,triggers:v}=e,D=c.useRef(x.type),{x:W,y:q}=e.controls.offset,G=$=>{a&&a.go($)};return c.useEffect(()=>{if(!T)return;const $=new ResizeObserver(H=>{if(!a)return;const[_]=H;h({width:Math.round(_.contentRect.width),height:Math.round(_.contentRect.height)})});return $.observe(T),()=>$.unobserve(T)},[T]),c.useEffect(()=>{!a||D.current===x.type||(j($=>$+1),D.current=x.type)},[x.type]),r.jsx("div",{className:Ie(de.wrapper,{[de.editor]:i}),ref:L,children:r.jsxs("div",{className:de.sliderInner,style:{width:f?f.width:"100%",height:f?f.height:"100%",backgroundColor:x.backgroundColor&&x.type==="fade in"?x.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&r.jsx("div",{className:Ie(de.captionBlock),children:r.jsx("div",{className:de.captionTextWrapper,children:t.map(($,H)=>r.jsx("div",{className:Ie(de.captionText,gl[K.alignment],{[de.withPointerEvents]:H===C&&i,[de.active]:H===C}),style:{fontFamily:Nn(d.fontFamily),fontWeight:d.fontWeight,fontStyle:d.fontStyle,width:o.sizing==="auto"?"max-content":E.scalingValue(o.width,i),letterSpacing:E.scalingValue(l,i),wordSpacing:E.scalingValue(p,i),textAlign:u,fontSize:E.scalingValue(I.fontSize,i),lineHeight:E.scalingValue(I.lineHeight,i),textTransform:b.textTransform??"none",textDecoration:b.textDecoration??"none",fontVariant:b.fontVariant??"normal",color:w,transitionDuration:x.duration?`${Math.round(parseInt(x.duration)/2)}ms`:"500ms"},children:r.jsx("div",{"data-styles":"imageCaption",className:de.captionTextInner,style:{"--link-hover-color":K.linkHoverColor,"--link-color":K.linkColor,position:"relative",top:E.scalingValue(K.offset.y,i),left:E.scalingValue(K.offset.x,i)},children:r.jsx(sn,{content:$.imageCaption})})},H))})}),r.jsx(co,{onMove:$=>{m($.index)},ref:s,options:{arrows:!1,speed:x.duration?parseInt(x.duration):500,autoplay:v.autoPlay!==null,...v.autoPlay!==null&&{interval:parseInt(v.autoPlay)*1e3},direction:R==="horiz"||x.type==="fade in"?"ltr":"ttb",pagination:!1,drag:v.triggersList.drag,perPage:1,width:f?f.width:"100%",height:f?f.height:"100%",type:x.type==="fade in"?"fade":"loop",rewind:!0},children:t.map(($,H)=>r.jsx(uo,{children:r.jsx("div",{className:de.sliderItem,children:r.jsx("div",{className:de.imgWrapper,children:r.jsx("img",{className:Ie(de.sliderImage,{[de.contain]:$.image.objectFit==="contain",[de.cover]:$.image.objectFit==="cover"}),src:$.image.url,alt:$.image.name??""})})})},H))},z),A.isActive&&r.jsxs(r.Fragment,{children:[r.jsx("div",{className:Ie(de.arrow,{[de.arrowVertical]:R==="vert",[de.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:r.jsxs("button",{onClick:()=>{G("-1")},className:de.arrowInner,style:{transform:`translate(${E.scalingValue(W,i)}, ${E.scalingValue(q*(R==="horiz"?1:-1),i)}) scale(${e.controls.scale/100}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&r.jsx(yt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:Ie(de.arrowImg,de.mirror)}),!A.arrowsImgUrl&&r.jsx(Wo,{color:A.color,className:Ie(de.arrowIcon,de.arrowImg,de.mirror)})]})}),r.jsx("div",{className:Ie(de.arrow,de.nextArrow,{[de.arrowVertical]:R==="vert",[de.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:r.jsxs("button",{className:de.arrowInner,onClick:()=>G("+1"),style:{transform:`translate(${E.scalingValue(W*(R==="horiz"?-1:1),i)}, ${E.scalingValue(q,i)}) scale(${e.controls.scale/100}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&r.jsx(yt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:de.arrowImg}),!A.arrowsImgUrl&&r.jsx(Wo,{color:A.color,className:Ie(de.arrowIcon,de.arrowImg)})]})})]}),v.triggersList.click&&r.jsx("div",{className:de.clickOverlay,onClick:()=>{a&&a.go("+1")}}),S.isActive&&r.jsx("div",{className:Ie(de.pagination,{[de.paginationInsideBottom]:S.position==="inside-1"&&R==="horiz",[de.paginationInsideTop]:S.position==="inside-2"&&R==="horiz",[de.paginationOutsideBottom]:S.position==="outside-1"&&R==="horiz",[de.paginationOutsideTop]:S.position==="outside-2"&&R==="horiz",[de.paginationInsideLeft]:S.position==="inside-1"&&R==="vert",[de.paginationInsideRight]:S.position==="inside-2"&&R==="vert",[de.paginationOutsideLeft]:S.position==="outside-1"&&R==="vert",[de.paginationOutsideRight]:S.position==="outside-2"&&R==="vert",[de.paginationVertical]:R==="vert"}),children:r.jsx("div",{className:de.paginationInner,style:{backgroundColor:S.colors[2],transform:`scale(${S.scale/100}) translate(${E.scalingValue(S.offset.x,i)}, ${E.scalingValue(S.offset.y,i)}) rotate(${R==="horiz"?"0deg":"90deg"})`},children:t.map(($,H)=>r.jsx("button",{onClick:()=>{a&&a.go(H)},className:Ie(de.paginationItem),children:r.jsx("div",{className:Ie(de.dot,{[de.activeDot]:H===C}),style:{backgroundColor:H===C?S.colors[0]:S.colors[1],"--pagination-hover-color":S.hover}})},H))})})]})})}function Wo({color:e,className:t}){return r.jsx("svg",{viewBox:"0 0 10 18",className:t,children:r.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:r.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const fl={element:hl,id:"control-slider",name:"Slider",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Slider.mp4"},defaultSize:{d:{width:400,height:400},t:{width:400,height:400},m:{width:300,height:300}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.arrowsImgUrl"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{triggers:{title:"triggers",icon:"target",tooltip:"Triggers",type:"object",properties:{triggersList:{type:"object",display:{type:"toggle-ratio-group"},properties:{click:{type:"boolean"},drag:{type:"boolean"}}},autoPlay:{type:["string","null"],label:"Auto",display:{type:"step-selector"},enum:[null,"1s","2s","3s","4s","5s"]}}},direction:{icon:"horizontal-resize",tooltip:"Direction",type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},transition:{title:"transit",icon:"transition",tooltip:"Transition",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade in"]},backgroundColor:{type:["string","null"],title:"BG Color",display:{visible:!1,type:"settings-color-picker",format:"single"}},duration:{type:"string",label:"icon:hourglass",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},controls:{title:"controls",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:50,max:600,display:{type:"range-control"}},color:{title:"color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}},show:{title:"Show",type:"string",display:{type:"ratio-group"},enum:["always","on hover"]}}},pagination:{title:"nav",icon:"pagination",tooltip:"Navigation",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"socket",direction:"horizontal"},type:"string",enum:["outside-1","outside-2","inside-1","inside-2"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"scale",min:10,max:400,display:{type:"range-control"}},colors:{display:{type:"settings-color-picker",format:"multiple"},title:"color",type:"array",items:{type:"string"}},hover:{title:"hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},imageCaption:{title:"Caption",icon:"text-icon",tooltip:"Caption",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}},default:{triggers:{triggersList:{click:!1,drag:!0},autoPlay:null},controls:{isActive:!0,arrowsImgUrl:null,offset:{x:0,y:0},scale:100,color:"#000000",hover:"#cccccc",show:"always"},transition:{type:"slide",duration:"500ms",backgroundColor:null},pagination:{isActive:!0,scale:50,position:"inside-1",offset:{x:0,y:0},colors:["#cccccc","#cccccc","#000000"],hover:"#cccccc"},direction:"horiz",imageCaption:{offset:{x:0,y:0},isActive:!0,alignment:"middle-center",linkColor:"#cccccc",linkHoverColor:"#cccccc"}},displayRules:[{if:{name:"direction",value:"vert"},then:{name:"properties.pagination.properties.position.display.direction",value:"vertical"}},{if:{name:"transition.type",value:"fade in"},then:{name:"properties.transition.properties.backgroundColor.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{placeholder:"Add Caption...",label:"Description",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}},yl="ImageRevealSlider-module__imageRevealSlider___UE5Ob",vl="ImageRevealSlider-module__image___Qjt-e",bl="ImageRevealSlider-module__link___N-iLG",xl="ImageRevealSlider-module__cursor___2U03d",Yt={imageRevealSlider:yl,image:vl,link:bl,cursor:xl};function ko(e,t,n){for(const i of n){const a=new Image;a.src=i.url;const s=i.width?Number.parseFloat(i.width):a.naturalWidth,o=a.naturalHeight/a.naturalWidth*s,d=s/2,l=o/2;if(e>=i.x-d&&e<=i.x+d&&t>=i.y-l&&t<=i.y+l)return!0}return!1}function $i(e){return new Promise(t=>{const n=new Image;n.src=e,n.onload=()=>{t({width:n.naturalWidth,height:n.naturalHeight})}})}async function Cl(e,t,n,i){let a,s;if(t==="custom"){a=n;const o=await $i(e);s=o.height/o.width*a}else if(t==="random"){a=Math.random()*(i.max-i.min)+i.min;const o=await $i(e);s=o.height/o.width*a}else{const o=await $i(e);a=o.width,s=o.height}return{width:a,height:s,finalWidth:`${a}px`}}function Sl({settings:e,content:t,isEditor:n}){const[i,a]=c.useState(null),[s,o]=c.useState([]),[d,l]=c.useState(0),u=c.useRef(0),[p,I]=c.useState({x:0,y:0}),[b,w]=c.useState(1),[f,h]=c.useState("none"),T=c.useRef({x:0,y:0}),[L,C]=c.useState(!1),{sizeType:m,imageWidth:z,randomRangeImageWidth:j}=e.imageSize,{revealPosition:R,visible:x}=e.position,{cursorType:A,target:S,defaultCursorScale:K,defaultCursor:v,hoverCursorScale:D,hoverCursor:W}=e.cursor;c.useEffect(()=>{if(!i)return;const $=(B,k)=>{const P=i.getBoundingClientRect(),te=B-P.left,ae=k-P.top;if(I({x:te,y:ae}),A==="system"){h("none"),w(1);return}const re=te,U=ae,N=document.elementFromPoint(P.left+re,P.top+U);if(N&&N.closest("a")){h("none"),w(1);return}const oe=ko(re,U,s)||S==="area"?{img:W??"none",scale:D}:{img:v??"none",scale:K};h(oe.img),w(oe.scale)},H=B=>{B.stopPropagation(),T.current={x:B.clientX,y:B.clientY},$(B.clientX,B.clientY)},_=()=>{L&&$(T.current.x,T.current.y)};return i.addEventListener("mousemove",H),window.addEventListener("scroll",_,!0),()=>{i.removeEventListener("mousemove",H),window.removeEventListener("scroll",_,!0)}},[i,L,p,A,S,W,v,D,K,s]),c.useEffect(()=>{L||(h("none"),w(0))},[L]);const q=async($,H,_,B={})=>{const{width:k,height:P,finalWidth:te}=await Cl($.image.url,m,z,j);let ae=0,re=0;R==="same"?(ae=H/2,re=_/2):(ae=B.x??Math.random()*H,re=B.y??Math.random()*_);const U=Math.min(Math.max(ae,k/2),H-k/2),N=Math.min(Math.max(re,P/2),_-P/2);return{id:u.current++,url:$.image.url,link:$.link,name:$.image.name,x:U,y:N,width:te}};c.useEffect(()=>{if(!i||t.length===0)return;const $=i.getBoundingClientRect(),H=$.width,_=$.height,B=[];(async()=>{const P=t[0],te=await q(P,H,_);B.push(te),o(B),l(1)})()},[m,z,j,R,i]),c.useEffect(()=>{x==="last One"&&o($=>$.length>0?[$[$.length-1]]:[])},[x]);const G=async $=>{if(!i)return;const H=i.getBoundingClientRect(),_=$.clientX-H.left,B=$.clientY-H.top;if(S==="image"&&!ko(_,B,s))return;let k=0,P=0;R==="on Click"?(k=_,P=B):R==="same"?(k=H.width/2,P=H.height/2):(k=Math.random()*H.width,P=Math.random()*H.height);const te=t[d],ae=await q(te,H.width,H.height,{x:k,y:P});o(re=>x==="all"?[...re,ae]:[ae]),l(re=>re>=t.length-1?0:re+1)};return r.jsxs("div",{ref:a,onClick:G,onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),className:Yt.imageRevealSlider,style:{cursor:f==="none"?"default":"none"},children:[s.map($=>r.jsx("div",{className:Yt.wrapper,style:{top:`${$.y}px`,left:`${$.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:$.width??"auto",height:"auto",cursor:f==="none"?"default":"none"},children:S==="area"&&$.link?r.jsx("a",{href:$.link,target:"_blank",className:Yt.link,children:r.jsx("img",{src:$.url,alt:$.name,className:Yt.image},$.id)}):r.jsx("img",{src:$.url,alt:$.name,className:Yt.image},$.id)},$.id)),L&&r.jsx("div",{className:Yt.cursor,style:{left:`${p.x}px`,top:`${p.y}px`,transform:`translate(-50%, -50%) scale(${b})`,backgroundImage:`url('${f}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const wl={element:Sl,id:"control-image-reveal",name:"Click Gallery",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Click_Gallery.mp4"},defaultSize:{d:{width:"100%",height:"100%"},t:{width:"100%",height:"100%"},m:{width:"100%",height:"100%"}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.cursor.defaultCursor"},{path:"settings.cursor.hoverCursor"}]},fontSettingsPaths:{content:[],parameters:[]},schema:{type:"object",properties:{settings:{type:"object",display:{type:"settings-block"},properties:{imageSize:{title:"IMG SIZE",icon:"size",tooltip:"IMG SIZE",type:"object",properties:{sizeType:{type:"string",display:{type:"ratio-group"},enum:["as Is","custom","random"]},imageWidth:{type:"number",label:"W",display:{type:"numeric-input",visible:!1}},randomRangeImageWidth:{type:"object",display:{type:"random-range-controls",visible:!1},properties:{min:{type:"number"},max:{type:"number"}}}}},cursor:{title:"cursor",icon:"cursor",tooltip:"cursor",type:"object",properties:{cursorType:{type:"string",display:{type:"ratio-group"},enum:["system","custom"]},target:{type:"string",title:"Target",display:{type:"ratio-group"},enum:["area","image"]},defaultCursor:{type:["string","null"],title:"Default",display:{type:"settings-image-input",visible:!1}},defaultCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}},hoverCursor:{type:["string","null"],title:"Hover",display:{type:"settings-image-input",visible:!1}},hoverCursorScale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control",visible:!1}}}},position:{title:"position",icon:"transition",tooltip:"Position",type:"object",properties:{revealPosition:{type:"string",display:{type:"ratio-group"},enum:["random","same","on Click"]},visible:{type:"string",title:"Visible",display:{type:"ratio-group"},enum:["all","last One"]}}}},default:{imageSize:{sizeType:"custom",imageWidth:500,randomRangeImageWidth:{min:100,max:1e3}},cursor:{cursorType:"system",target:"area",defaultCursor:null,defaultCursorScale:2,hoverCursor:null,hoverCursorScale:2},position:{revealPosition:"random",visible:"all"}},displayRules:[{if:{name:"imageSize.sizeType",value:"custom"},then:{name:"properties.imageSize.properties.imageWidth.display.visible",value:!0}},{if:{name:"imageSize.sizeType",value:"random"},then:{name:"properties.imageSize.properties.randomRangeImageWidth.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"}],then:{name:"properties.cursor.properties.defaultCursor.display.visible",value:!0}},{if:[{name:"cursor.target",value:"image"},{name:"cursor.cursorType",value:"custom"},{name:"cursor.defaultCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.defaultCursorScale.display.visible",value:!0}},{if:{name:"cursor.cursorType",value:"custom"},then:{name:"properties.cursor.properties.hoverCursor.display.visible",value:!0}},{if:[{name:"cursor.cursorType",value:"custom"},{name:"cursor.hoverCursor",value:null,isNotEqual:!0}],then:{name:"properties.cursor.properties.hoverCursorScale.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}},required:["image"]},default:[{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQK9211QXBE9W284ZNKB8.png",name:"Slider-1.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQMFT72JD18WKP0Q2DVAT.png",name:"Slider-2.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQNEVRXPSRX5K1YTMJQY9.png",name:"Slider-3.png"},link:""},{image:{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERQP84JKRDT7WNWDQZR4Y9.png",name:"Slider-4.png"},link:""}]}}}},$l="LightBox-module__hidden___9s-9x",Tl="LightBox-module__heroImage___sTxNF",Ll="LightBox-module__background___rm9ml",El="LightBox-module__editor___4ACaY",Il="LightBox-module__contentStyle___Bgnsq",Pl="LightBox-module__imageStyle___tLIlB",Rl="LightBox-module__imgWrapper___LuFUp",Al="LightBox-module__contain___8-yaS",Ml="LightBox-module__cover___hNvOG",_l="LightBox-module__caption___b6L2I",Wl="LightBox-module__captionTextInner___rCGNH",kl="LightBox-module__lightboxSplide___XFuWC",Fl="LightBox-module__arrow___iz38X",Nl="LightBox-module__arrowVertical___Zfz81",Hl="LightBox-module__nextArrow___zkAQN",Bl="LightBox-module__arrowInner___p48sW",Ol="LightBox-module__arrowIcon___3VaFf",jl="LightBox-module__arrowImg___pNV88",Dl="LightBox-module__mirror___pjeXc",Vl="LightBox-module__thumbsWrapper___GB-nU",zl="LightBox-module__thumbsContainerVertical___wttk5",Kl="LightBox-module__thumbsContainer___osSma",Gl="LightBox-module__thumbsAlignStart___MO6tY",ql="LightBox-module__thumbsAlignCenter___Q4sUx",Ul="LightBox-module__thumbsAlignEnd___p4y9R",Xl="LightBox-module__thumbItem___HvnF3",Yl="LightBox-module__closeButton___g2khP",Jl="LightBox-module__fadeIn___0m5GW",Zl="LightBox-module__slideInLeft___gPYwC",Ql="LightBox-module__slideInRight___S-pPp",ec="LightBox-module__slideInTop___DFdAj",tc="LightBox-module__slideInBottom___m27kZ",nc="LightBox-module__fadeOut___55qBR",ic="LightBox-module__slideOutLeft___NvU7P",oc="LightBox-module__slideOutRight___SK7eC",rc="LightBox-module__slideOutTop___Vgg0z",ac="LightBox-module__slideOutBottom___nJ0Ef",sc="LightBox-module__scaleSlide___vZriG",ne={hidden:$l,heroImage:Tl,background:Ll,editor:El,contentStyle:Il,imageStyle:Pl,imgWrapper:Rl,contain:Al,cover:Ml,caption:_l,captionTextInner:Wl,lightboxSplide:kl,arrow:Fl,arrowVertical:Nl,nextArrow:Hl,arrowInner:Bl,arrowIcon:Ol,arrowImg:jl,mirror:Dl,thumbsWrapper:Vl,thumbsContainerVertical:zl,thumbsContainer:Kl,thumbsAlignStart:Gl,thumbsAlignCenter:ql,thumbsAlignEnd:Ul,thumbItem:Xl,closeButton:Yl,fadeIn:Jl,slideInLeft:Zl,slideInRight:Ql,slideInTop:ec,slideInBottom:tc,fadeOut:nc,slideOutLeft:ic,slideOutRight:oc,slideOutTop:rc,slideOutBottom:ac,scaleSlide:sc},Vn=(e,t,n)=>{const i={},[a,s]=e.split("-");return a==="top"?(i.top="0",i.bottom="auto"):a==="middle"?(i.top="50%",i.bottom="auto"):a==="bottom"&&(i.top="auto",i.bottom="0"),s==="left"?(i.left="0",i.right="auto"):s==="center"?(i.left="50%",i.right="auto"):s==="right"&&(i.left="auto",i.right="0"),a==="middle"&&s==="center"?i.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), calc(-50% + ${E.scalingValue(t.y,n)}))`:a==="middle"?i.transform=`translate(${E.scalingValue(t.x,n)}, calc(-50% + ${E.scalingValue(t.y,n)}))`:s==="center"?i.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), ${E.scalingValue(t.y,n)})`:i.transform=`translate(${E.scalingValue(t.x,n)}, ${E.scalingValue(t.y,n)})`,i};function Kr(e){const t=window.getComputedStyle(e);return{top:parseFloat(t.paddingTop)||0,right:parseFloat(t.paddingRight)||0,bottom:parseFloat(t.paddingBottom)||0,left:parseFloat(t.paddingLeft)||0}}function Fo(e){const t=e.getBoundingClientRect(),n=Kr(e),i=Math.max(0,t.width-n.left-n.right),a=Math.max(0,t.height-n.top-n.bottom),s=e.naturalWidth,o=e.naturalHeight,d=i/a,l=s/o;let u,p;l>d?(u=i,p=i/l):(p=a,u=a*l);const I=t.left+n.left,b=t.top+n.top,w=(i-u)/2+I,f=(a-p)/2+b;return{x:w,y:f,width:u,height:p}}function No(e){const t=e.getBoundingClientRect(),n=Kr(e);return{left:t.left+n.left,right:t.right-n.right,top:t.top+n.top,bottom:t.bottom-n.bottom}}function Ho(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const i=t[1].split(",").map(a=>parseFloat(a.trim()));return i.length===4?i[3]:1}const n=e.match(/^#([0-9a-fA-F]{8})$/);if(n){const i=n[1].substring(6,8);return parseInt(i,16)/255}return e.match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/),1}function lc(e,t){const n=(()=>{if(e==="fade in")return ne.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return ne.slideInLeft;case"right":return ne.slideInRight;case"top":return ne.slideInTop;case"bottom":return ne.slideInBottom;default:return ne.slideInRight}return ne.fadeIn})(),i=(()=>{if(e==="fade in"||e==="mix")return ne.fadeIn;if(e==="slide in")switch(t){case"left":return ne.slideInLeft;case"right":return ne.slideInRight;case"top":return ne.slideInTop;case"bottom":return ne.slideInBottom;default:return ne.slideInRight}return ne.fadeIn})(),a=(()=>{if(e==="fade in"||e==="mix")return ne.fadeOut;if(e==="slide in")switch(t){case"left":return ne.slideOutLeft;case"right":return ne.slideOutRight;case"top":return ne.slideOutTop;case"bottom":return ne.slideOutBottom;default:return ne.slideOutRight}return ne.fadeOut})(),s=(()=>{if(e==="fade in")return ne.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return ne.slideOutLeft;case"right":return ne.slideOutRight;case"top":return ne.slideOutTop;case"bottom":return ne.slideOutBottom;default:return ne.slideOutRight}return ne.fadeOut})();return{appearClass:n,backdropAppearClass:i,backdropDisappearClass:a,disappearClass:s}}const cc=({settings:e,content:t,styles:n,portalId:i,activeEvent:a,isEditor:s,isPreviewMode:o})=>{const[d,l]=c.useState(!1),{url:u}=e.thumbnailBlock.cover;return c.useEffect(()=>{a==="close"&&l(!1),a==="open"&&l(!0)},[a]),r.jsxs(r.Fragment,{children:[r.jsx("img",{src:u,alt:"Cover",className:ne.heroImage,onClick:()=>l(!0)}),r.jsx(dc,{isOpen:d,onClose:()=>l(!1),content:t,settings:e,lightboxStyles:n,portalId:i,isEditor:s})]})},dc=({isOpen:e,onClose:t,content:n,lightboxStyles:i,settings:a,portalId:s,isEditor:o,metadata:d})=>{var y;const[l,u]=c.useState(0),[p,I]=c.useState(0),[b,w]=c.useState(!1),[f,h]=c.useState(!1),[T,L]=c.useState({}),C=c.useRef(null),m=c.useRef(null),z=c.useRef(null),j=c.useRef(!1),R=c.useRef(null),x=c.useRef(null),A=c.useRef(null),S=c.useRef(null),K=c.useRef(!1),v=c.useRef(null),[D,W]=c.useState(!1),{appear:q,triggers:G,slider:$,thumbnail:H,controls:_,area:B,caption:k,layout:P}=a.lightboxBlock,{appearClass:te,backdropAppearClass:ae,backdropDisappearClass:re,disappearClass:U}=lc(q.type,q.direction),N=(d==null?void 0:d.itemId)??null;c.useEffect(()=>{const g=()=>{setTimeout(()=>{var J,Q;(Q=(J=C.current)==null?void 0:J.splide)==null||Q.refresh()},16)},V=()=>{I(J=>J+1)};return window.addEventListener("ArticleEditor.Layout:change",g),window.addEventListener("ArticleEditor.ComponentContent:change",V),()=>{window.removeEventListener("ArticleEditor.Layout:change",g),window.removeEventListener("ArticleEditor.ComponentContent:change",V)}},[]),c.useEffect(()=>{if(!e||!H.isActive){W(!1);return}const g=v.current;if(!g)return;const V=()=>{$.direction==="horiz"?W(g.scrollWidth>g.clientWidth):W(g.scrollHeight>g.clientHeight)};V();const J=new ResizeObserver(V);return J.observe(g),()=>J.disconnect()},[e,H.isActive,n.length,T,$.direction]);const oe=c.useCallback(()=>{const g=window.matchMedia("(max-width: 768px)").matches,V=Ho(B.color);g&&!o&&V>.9&&(document.body.style.backgroundColor=""),w(!0),j.current=!0;const J=Q=>{Q.target===R.current&&Q.animationName&&(R.current&&x.current&&R.current.removeEventListener("animationend",x.current),x.current=null,j.current&&(j.current=!1,t()),w(!1))};R.current&&(x.current=J,R.current.addEventListener("animationend",J))},[t,B.color,o]),ye=(g,V,J)=>{var Q,M;if(g){if(G.type==="click"&&G.switch==="image")G.repeat==="close"&&l===n.length-1?oe():(Q=C.current)==null||Q.go("+1");else if(G.type==="click"&&G.switch==="50/50"){const F=g.getBoundingClientRect(),O=V-F.left,ie=J-F.top,pe=F.width,le=F.height;let he;$.direction==="horiz"?he=O<pe/2?"-1":"+1":he=ie<le/2?"-1":"+1",(M=C.current)==null||M.go(he)}}},ce=g=>{if(K.current){K.current=!1;return}const V=n[l],J=(V==null?void 0:V.image.objectFit)==="cover";let Q,M;if("changedTouches"in g&&g.changedTouches.length>0)Q=g.changedTouches[0].clientX,M=g.changedTouches[0].clientY;else if("clientX"in g)Q=g.clientX,M=g.clientY;else return;let F;if(J&&z.current){const O=No(z.current);F=Q>=O.left&&Q<=O.right&&M>=O.top&&M<=O.bottom}else{const O=z.current?Fo(z.current):null;if(!O){g.target===g.currentTarget&&oe();return}F=Q>=O.x&&Q<=O.x+O.width&&M>=O.y&&M<=O.y+O.height}F?ye(z.current,Q,M):oe()},ge=g=>{const V=g.target;(V.classList.contains(ne.thumbsWrapper)||V.classList.contains(ne.thumbsContainer))&&ce(g)};c.useEffect(()=>{if(!e)return;const g=V=>{var J,Q;if(V.key==="Escape"){oe();return}if(V.key==="ArrowRight"){u(M=>(M+1)%Math.max(n.length,1)),(J=C.current)==null||J.go("+1");return}V.key==="ArrowLeft"&&(u(M=>(M-1+Math.max(n.length,1))%Math.max(n.length,1)),(Q=C.current)==null||Q.go("-1"))};return window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}},[e,oe,n.length]),c.useEffect(()=>{if(e){if(u(0),I(V=>V+1),j.current=!1,w(!1),h(!1),L({}),!N)return;const g=new CustomEvent("page-overlay",{detail:{itemId:N}});window.dispatchEvent(g)}return()=>{R.current&&x.current&&(R.current.removeEventListener("animationend",x.current),x.current=null),h(!1)}},[e,N]),c.useEffect(()=>{m.current!==null&&m.current!==$.type&&I(g=>g+1),m.current=$.type},[$.type]),c.useEffect(()=>{if(!e)return;const g=document.body.style.overflow,V=window.matchMedia("(max-width: 768px)").matches,J=Ho(B.color);document.body.style.overflow="hidden",h(!1);const Q=F=>{F.target===R.current&&!j.current&&F.animationName&&(V&&!o&&J>.9&&(document.body.style.backgroundColor=B.color),h(!0),R.current&&A.current&&R.current.removeEventListener("animationend",A.current),A.current=null)};R.current&&(A.current=Q,R.current.addEventListener("animationend",Q));const M=F=>{const O=F.target;O&&(O.closest(`.${ne.thumbsWrapper}`)||O.closest(`.${ne.thumbsContainer}`))||$.type!=="slide"&&F.preventDefault()};return document.addEventListener("touchmove",M,{passive:!1}),()=>{document.body.style.overflow=g,document.removeEventListener("touchmove",M),R.current&&A.current&&(R.current.removeEventListener("animationend",A.current),A.current=null),h(!1)}},[e,o,B.color,$.type]),c.useEffect(()=>{if(!e)return;const g=V=>{var Q,M;if(j.current){V.stopPropagation();return}if(K.current){K.current=!1;return}const J=V.target;if(!(J&&(J.closest(`.${ne.thumbsContainer}`)||J.closest(`.${ne.thumbItem}`)||J.closest(`.${ne.arrow}`)||J.closest(`.${ne.closeButton}`)||J.closest(`.${ne.caption}`)))){if($.type==="slide"&&G.type==="drag"&&((M=(Q=C.current)==null?void 0:Q.splide)!=null&&M.root)){const F=C.current.splide.root;if(J&&(F.contains(J)||F===J))return}if(V.touches.length===0&&V.changedTouches.length>0){const F=n[l],O=(F==null?void 0:F.image.objectFit)==="cover",ie=V.changedTouches[0];let pe;if(O&&z.current){const le=No(z.current);pe=ie.clientX>=le.left&&ie.clientX<=le.right&&ie.clientY>=le.top&&ie.clientY<=le.bottom}else{const le=z.current?Fo(z.current):null;if(!le)return;pe=ie.clientX>=le.x&&ie.clientX<=le.x+le.width&&ie.clientY>=le.y&&ie.clientY<=le.y+le.height}if(!pe){V.stopPropagation(),j.current=!0;const le=he=>{he.stopPropagation(),he.preventDefault(),document.removeEventListener("click",le,!0)};document.addEventListener("click",le,!0),oe()}}}};return document.addEventListener("touchend",g,{passive:!0}),()=>{document.removeEventListener("touchend",g)}},[e,oe,l,n]);const we=($.type==="scale"||$.type==="fade")&&$.direction==="vert"&&G.type==="drag";c.useEffect(()=>{var he,Y;if(!e||!we||!((Y=(he=C.current)==null?void 0:he.splide)!=null&&Y.root))return;const g=C.current.splide.root,V=30,J=(Z,X)=>{if(S.current){const se=Math.abs(Z-S.current.x),Te=Math.abs(X-S.current.y);(se>0||Te>0)&&(K.current=!0)}},Q=Z=>{S.current&&(Z.preventDefault(),J(Z.clientX,Z.clientY))},M=Z=>{S.current&&Z.touches.length>0&&(Z.preventDefault(),J(Z.touches[0].clientX,Z.touches[0].clientY))},F=(Z,X)=>{if(!S.current||!C.current){S.current=null;return}const se=Math.abs(Z-S.current.x),Te=Math.abs(X-S.current.y);Te>V&&Te>se&&C.current.go(X<S.current.y?"+1":"-1"),S.current=null},O=Z=>{S.current&&F(Z.clientX,Z.clientY),document.removeEventListener("pointerup",O),document.removeEventListener("pointercancel",O),document.removeEventListener("pointermove",Q)},ie=Z=>{if(S.current){if(Z.changedTouches.length>0){const X=Z.changedTouches[0];F(X.clientX,X.clientY)}document.removeEventListener("touchend",ie),document.removeEventListener("touchcancel",ie),document.removeEventListener("touchmove",M)}},pe=Z=>{S.current={x:Z.clientX,y:Z.clientY},K.current=!1,document.addEventListener("pointermove",Q,{passive:!1}),document.addEventListener("pointerup",O),document.addEventListener("pointercancel",O)},le=Z=>{Z.touches.length>0&&(S.current={x:Z.touches[0].clientX,y:Z.touches[0].clientY},K.current=!1,document.addEventListener("touchmove",M,{passive:!1}),document.addEventListener("touchend",ie),document.addEventListener("touchcancel",ie))};return g.addEventListener("pointerdown",pe),g.addEventListener("touchstart",le),()=>{g.removeEventListener("pointerdown",pe),g.removeEventListener("touchstart",le),document.removeEventListener("pointermove",Q),document.removeEventListener("pointerup",O),document.removeEventListener("pointercancel",O),document.removeEventListener("touchmove",M),document.removeEventListener("touchend",ie),document.removeEventListener("touchcancel",ie),S.current=null,K.current=!1}},[e,we,p]);const ee={backgroundColor:B.color,backdropFilter:`blur(${B.blur}px)`,animationDuration:`${parseInt(q.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(s)?null:In.createPortal(r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:o?null:R,className:Ie(ne.background,b?re:ae,{[ne.editor]:o},{[ne.hidden]:!e}),style:{...ee,...f&&!o&&!b?{position:"absolute"}:{}}}),r.jsxs("div",{ref:o?R:null,className:Ie(ne.contentStyle,b?U:te,{[ne.editor]:o},{[ne.hidden]:!e}),style:{animationDuration:`${parseInt(q.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[r.jsx(co,{onMove:g=>u(g.index),ref:C,className:ne.lightboxSplide,options:{arrows:!1,speed:$.duration?parseInt($.duration):500,direction:$.direction==="horiz"||$.type==="fade"||$.type==="scale"?"ltr":"ttb",pagination:!1,drag:G.type==="drag"&&!we,perPage:1,width:"100%",height:"100%",type:$.type==="fade"||$.type==="scale"?"fade":"loop",padding:0,rewind:G.repeat!=="close",start:0},style:{"--splide-speed":$.duration},children:n.map((g,V)=>{const J=Vn(P.position,P.offset,o),Q=`${E.scalingValue(P.padding.top,o)} ${E.scalingValue(P.padding.right,o)} ${E.scalingValue(P.padding.bottom,o)} ${E.scalingValue(P.padding.left,o)}`,M=$.type==="scale"?(()=>{const{transform:F,...O}=J;return{...O,position:"absolute",padding:Q,boxSizing:"border-box","--position-transform":F||"none"}})():{...J,position:"absolute",padding:Q,boxSizing:"border-box"};return r.jsx(uo,{children:r.jsx("div",{className:ne.imgWrapper,onClick:ce,children:r.jsx("img",{ref:V===l?z:null,className:Ie(ne.imageStyle,{[ne.contain]:g.image.objectFit==="contain",[ne.cover]:g.image.objectFit==="cover",[ne.scaleSlide]:$.type==="scale"}),src:g.image.url,alt:g.image.name??"",style:{...M,pointerEvents:g.image.objectFit==="contain"?"none":"auto"}})})},V)})},p),_.isActive&&r.jsxs(r.Fragment,{children:[r.jsx("div",{className:Ie(ne.arrow,{[ne.arrowVertical]:$.direction==="vert"}),style:{color:_.color,"--arrow-hover-color":_.hover},children:r.jsxs("button",{className:ne.arrowInner,style:{transform:`translate(${E.scalingValue(_.offset.x,o)}, ${E.scalingValue(_.offset.y*($.direction==="horiz"?1:-1),o)}) scale(${_.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=C.current)==null?void 0:g.go("-1")},"aria-label":"Previous",children:[_.arrowsImgUrl&&r.jsx(yt,{url:_.arrowsImgUrl,fill:_.color,hoverFill:_.hover,className:Ie(ne.arrowImg,ne.mirror)}),!_.arrowsImgUrl&&r.jsx(Bo,{color:_.color,className:Ie(ne.arrowIcon,ne.arrowImg,ne.mirror)})]})}),r.jsx("div",{className:Ie(ne.arrow,ne.nextArrow,{[ne.arrowVertical]:$.direction==="vert"}),style:{color:_.color,"--arrow-hover-color":_.hover},children:r.jsxs("button",{className:ne.arrowInner,style:{transform:`translate(${E.scalingValue(_.offset.x*($.direction==="horiz"?-1:1),o)}, ${E.scalingValue(_.offset.y,o)}) scale(${_.scale}) rotate(${$.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=C.current)==null?void 0:g.go("+1")},"aria-label":"Next",children:[_.arrowsImgUrl&&r.jsx(yt,{url:_.arrowsImgUrl,fill:_.color,hoverFill:_.hover,className:ne.arrowImg}),!_.arrowsImgUrl&&r.jsx(Bo,{color:_.color,className:Ie(ne.arrowIcon,ne.arrowImg)})]})})]}),B.closeIconUrl&&(()=>{const g=Vn(B.closeIconAlign,B.closeIconOffset,o),V=`scale(${B.closeIconScale})`,J=g.transform?`${g.transform} ${V}`:V;return r.jsx("button",{className:ne.closeButton,style:{...g,transform:J},onClick:oe,"aria-label":"Close lightbox",children:r.jsx(yt,{url:B.closeIconUrl,fill:B.closeIconColor??"#000000",hoverFill:B.closeIconHover??"#cccccc"})})})(),k&&k.isActive&&i.imageCaption&&((y=n[l])==null?void 0:y.imageCaption)&&(()=>{const{widthSettings:g,fontSettings:V,letterSpacing:J,textAlign:Q,wordSpacing:M,fontSizeLineHeight:F,textAppearance:O,color:ie}=i.imageCaption;return r.jsx("div",{className:ne.caption,style:{...Vn(k.alignment,k.offset,o),fontFamily:Nn(V.fontFamily),fontWeight:V.fontWeight,fontStyle:V.fontStyle,width:g.sizing==="auto"?"max-content":E.scalingValue(g.width,o),letterSpacing:E.scalingValue(J,o),wordSpacing:E.scalingValue(M,o),textAlign:Q,fontSize:E.scalingValue(F.fontSize,o),lineHeight:E.scalingValue(F.lineHeight,o),textTransform:O.textTransform??"none",textDecoration:O.textDecoration??"none",fontVariant:O.fontVariant??"normal",color:ie},onClick:pe=>pe.stopPropagation(),children:r.jsx("div",{"data-styles":"imageCaption",className:ne.captionTextInner,style:{"--link-color":k.linkColor,"--link-hover-color":k.linkHoverColor},children:r.jsx(sn,{content:n[l].imageCaption})})})})(),H.isActive&&(()=>{const[g,V]=H.position.split("-"),J=$.direction==="horiz"?`${g}-left`:H.position,Q=Vn(J,H.offset,o),M=()=>{if($.direction==="horiz"){if(V==="left")return"flex-start";if(V==="center")return"center";if(V==="right")return"flex-end"}else{if(g==="top")return"flex-start";if(g==="middle")return"center";if(g==="bottom")return"flex-end"}return"flex-start"};return r.jsx("div",{ref:v,className:ne.thumbsWrapper,onClick:F=>ge(F),style:{position:o?"absolute":"fixed",...Q,...$.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:r.jsx("div",{className:Ie(ne.thumbsContainer,{[ne.thumbsContainerVertical]:$.direction==="vert",[ne.thumbsAlignStart]:H.align==="start",[ne.thumbsAlignCenter]:H.align==="center",[ne.thumbsAlignEnd]:H.align==="end"}),style:{gap:E.scalingValue(H.grid.gap,o),justifyContent:D?"flex-start":M()},children:n.map((F,O)=>{const ie=O===l,pe=T[O],he=H.grid.size*(ie?H.activeState.scale:1),Y=()=>{if(H.fit!=="fit")return{};if(!pe)return $.direction==="horiz"?{height:E.scalingValue(he,o)}:{width:E.scalingValue(he,o)};const Z=pe.width/pe.height;if($.direction==="horiz"){const X=he,se=X*Z;return{width:E.scalingValue(se,o),height:E.scalingValue(X,o)}}else{const X=he,se=X/Z;return{width:E.scalingValue(X,o),height:E.scalingValue(se,o)}}};return r.jsx("button",{className:ne.thumbItem,style:{...$.direction==="horiz"&&H.fit!=="fit"?{height:E.scalingValue(he,o)}:{},...$.direction==="vert"&&H.fit!=="fit"?{width:E.scalingValue(he,o)}:{},...H.fit==="cover"?{width:E.scalingValue(he,o),height:E.scalingValue(he,o)}:{},...Y(),transition:ie?"all 0.25s ease-out":"none",opacity:ie?H.activeState.opacity/100:H.opacity/100,"--thumb-hover":H.activeState.opacity/100},onClick:Z=>{var X;Z.stopPropagation(),u(O),(X=C.current)==null||X.go(O)},onMouseEnter:()=>{var Z;H.triggers==="hov"&&((Z=C.current)==null||Z.go(O))},children:r.jsx("img",{src:F.image.url,alt:F.image.name??"",onLoad:Z=>{const X=Z.currentTarget;X.naturalWidth&&X.naturalHeight&&L(se=>({...se,[O]:{width:X.naturalWidth,height:X.naturalHeight}}))},style:{objectFit:H.fit==="cover"?"cover":"contain",...H.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...H.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${F.image.name}-${O}`)})})})})()]})]}),document.getElementById(s))};function Bo({color:e,className:t}){return r.jsx("svg",{viewBox:"0 0 10 18",className:t,children:r.jsx("g",{id:"Symbols",stroke:"none",strokeWidth:"1",fillRule:"evenodd",children:r.jsx("path",{d:"M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z",id:"Shape-Copy",fill:e,transform:"translate(5, 9) rotate(-90) translate(-5, -9)"})})})}const uc={element:cc,id:"lightbox",name:"Lightbox",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Lightbox.png"},defaultSize:{d:{width:440,height:550},t:{width:235,height:293},m:{width:265,height:331}},fontSettingsPaths:{content:[],parameters:[{path:"styles.imageCaption.fontSettings"}]},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.thumbnailBlock.cover.url",placeholderEnabled:!0},{path:"settings.controls.arrowsImgUrl"},{path:"settings.area.closeIconUrl"}]},schema:{type:"object",properties:{settings:{type:"object",properties:{thumbnailBlock:{display:{type:"settings-block",triggerEvent:"close"},type:"object",properties:{cover:{title:"COVER",icon:"cover",tooltip:"Cover Image",type:"object",properties:{url:{type:"string",display:{type:"cover-image-input"}}}}}},lightboxBlock:{display:{type:"settings-block",triggerEvent:"open"},type:"object",properties:{appear:{title:"APPEAR",icon:"transition",tooltip:"Appearance",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide in","fade in","mix"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]},direction:{type:"string",title:"From",display:{type:"direction-control"},enum:["top","left","right","bottom"]}}},triggers:{title:"TRIGGERS",icon:"target",tooltip:"Triggers",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["click","drag"]},switch:{type:"string",display:{type:"ratio-group"},enum:["image","50/50"]},repeat:{type:"string",title:"Repeat",display:{visible:!1,type:"ratio-group"},enum:["close","loop"]}}},slider:{title:"SLIDER",icon:"horizontal-resize",tooltip:"Slider",type:"object",properties:{type:{type:"string",display:{type:"ratio-group"},enum:["slide","fade","scale"]},direction:{type:"string",display:{type:"ratio-group"},enum:["horiz","vert"]},duration:{type:"string",label:"T",display:{type:"step-selector"},enum:["100ms","250ms","500ms","1000ms","1500ms","2000ms"]}}},thumbnail:{title:"THUMB",icon:"thumbnail",tooltip:"Thumbnail",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},fit:{type:"string",display:{type:"ratio-group"},enum:["cover","fit"]},align:{type:"string",title:"Align",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},triggers:{type:"string",title:"Triggers",display:{type:"ratio-group",direction:"horizontal"},enum:["clk","hov"]},grid:{type:"object",title:"Grid",display:{type:"group"},properties:{size:{type:"number",label:"Box",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},gap:{type:"number",label:"Gap",scalingEnabled:!0,min:0,display:{type:"numeric-input"}}}},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}},activeState:{type:"object",title:"ACTIVE",display:{type:"group"},properties:{scale:{type:"number",title:"Scale",min:1,max:5,step:.1,display:{type:"range-control"}},opacity:{type:"number",title:"Opacity",label:"icon:opacity",min:0,max:100,step:1,display:{type:"numeric-input"}}}}}},layout:{title:"LAYOUT",icon:"layout",tooltip:"Layout",type:"object",properties:{position:{display:{type:"align-grid"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},padding:{type:"object",title:"Padding",display:{type:"padding-controls"},properties:{top:{min:0,step:1,type:"number"},left:{min:0,step:1,type:"number"},right:{min:0,step:1,type:"number"},bottom:{min:0,step:1,type:"number"}}}}},controls:{title:"CONTROLS",icon:"controls",tooltip:"Controls",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},arrowsImgUrl:{type:["string","null"],display:{type:"settings-image-input"}},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},scale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},color:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},hover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},area:{title:"AREA",icon:"area",tooltip:"Area",type:"object",properties:{color:{type:"string",display:{type:"settings-color-picker",format:"single"}},blur:{type:"number",label:"icon:blur",display:{type:"numeric-input"}},closeIconUrl:{type:["string","null"],title:"Close Icon",display:{type:"settings-image-input"}},closeIconAlign:{display:{type:"align-grid",direction:"horizontal"},type:"string",enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},closeIconScale:{type:"number",title:"Scale",min:.5,max:5,step:.1,display:{type:"range-control"}},closeIconOffset:{type:"object",title:"Offset",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},closeIconColor:{title:"Color",type:"string",display:{type:"settings-color-picker",format:"single"}},closeIconHover:{title:"Hover",type:"string",display:{type:"settings-color-picker",format:"single"}}}},caption:{title:"DESC",icon:"text-icon",tooltip:"Description",type:"object",properties:{isActive:{type:"boolean",display:{type:"setting-toggle"}},alignment:{type:"string",display:{type:"align-grid"},enum:["top-left","top-center","top-right","middle-left","middle-center","middle-right","bottom-left","bottom-center","bottom-right"]},offset:{title:"Offset",type:"object",display:{type:"group"},properties:{x:{type:"number",label:"X",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}},y:{type:"number",label:"Y",scalingEnabled:!0,display:{type:"numeric-input",visible:!0}}}},linkColor:{title:"Link",type:"string",display:{type:"settings-color-picker",format:"single"}},linkHoverColor:{title:"Link Hov",type:"string",display:{type:"settings-color-picker",format:"single"}}}}}}},default:{d:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"slide in",duration:"1000ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.01,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:0,bottom:.06,left:0}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},linkColor:"#cccccc",linkHoverColor:"#cccccc"}}},m:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"horiz",duration:"1000ms"},thumbnail:{isActive:!0,position:"bottom-center",fit:"fit",align:"start",triggers:"hov",grid:{size:.1,gap:.05},offset:{x:.01,y:-.05},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.05,bottom:.06,left:.05}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}},t:{thumbnailBlock:{cover:{url:"https://cdn.cntrl.site/component-assets/Cover.jpg"}},lightboxBlock:{appear:{type:"fade in",duration:"500ms",direction:"bottom"},triggers:{type:"click",switch:"image",repeat:"loop"},slider:{type:"slide",direction:"vert",duration:"1000ms"},thumbnail:{isActive:!0,position:"middle-left",fit:"fit",align:"start",triggers:"hov",grid:{size:.05,gap:.01},offset:{x:.03,y:0},opacity:50,activeState:{scale:1,opacity:100}},layout:{position:"middle-center",offset:{x:0,y:0},padding:{top:.06,right:.1,bottom:.06,left:.1}},controls:{isActive:!1,arrowsImgUrl:null,offset:{x:0,y:0},scale:1,color:"#000000",hover:"#cccccc"},area:{color:"rgba(28,31,34,0.9)",blur:0,closeIconUrl:null,closeIconColor:"#000000",closeIconHover:"#cccccc",closeIconAlign:"top-right",closeIconOffset:{x:0,y:0},closeIconScale:1},caption:{isActive:!0,alignment:"middle-center",offset:{x:0,y:0},hover:"#cccccc"}}}},displayRules:[{if:{name:"lightboxBlock.appear.type",value:"slide in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.slider.direction",value:"vert"},then:{name:"properties.lightboxBlock.properties.thumbnail.properties.align.display.direction",value:"vertical"}},{if:{name:"lightboxBlock.appear.type",value:"mix"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!0}},{if:{name:"lightboxBlock.appear.type",value:"fade in"},then:{name:"properties.lightboxBlock.properties.appear.properties.direction.display.visible",value:!1}},{if:[{name:"lightboxBlock.triggers.type",value:"click"},{name:"lightboxBlock.triggers.switch",value:"image"}],then:{name:"properties.lightboxBlock.properties.triggers.properties.repeat.display.visible",value:!0}}]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},imageCaption:{label:"Description",placeholder:"Add Caption...",display:{type:"rich-text"}}},required:["image"]},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/2.jpg",name:"Slider-1.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/3.jpg",name:"Slider-2.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/4.jpg",name:"Slider-3.png"},imageCaption:[{type:"paragraph",children:[{text:""}]}]}]},styles:{type:"object",properties:{imageCaption:{dataName:"caption",type:"object",properties:{fontSettings:{type:"object",display:{type:"font-settings"},properties:{fontFamily:{type:"string"},fontWeight:{type:"number"},fontStyle:{type:"string"}}},widthSettings:{display:{type:"text-width-control"},type:"object",properties:{width:{type:"number"},sizing:{type:"string",enum:["auto","manual"]}}},fontSizeLineHeight:{type:"object",display:{type:"font-size-line-height"},properties:{fontSize:{type:"number"},lineHeight:{type:"number"}}},letterSpacing:{display:{type:"letter-spacing-input"},type:"number"},wordSpacing:{display:{type:"word-spacing-input"},type:"number"},textAlign:{display:{type:"text-align-control"},type:"string",enum:["left","center","right","justify"]},textAppearance:{display:{type:"text-appearance"},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}},color:{display:{type:"style-panel-color-picker"},type:"string"}}}},default:{imageCaption:{widthSettings:{width:.13,sizing:"auto"},fontSettings:{fontFamily:"Arial",fontWeight:400,fontStyle:"normal"},fontSizeLineHeight:{fontSize:.02,lineHeight:.02},letterSpacing:0,wordSpacing:0,textAlign:"left",textAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},color:"#000000"}}}},required:["settings","content","styles"]}};function zn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function pc(e){return`
|
|
7
7
|
.${e}-wrapper {
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
width: 100%;
|
|
11
|
-
min-height: ${
|
|
11
|
+
min-height: ${zn(48)};
|
|
12
12
|
}
|
|
13
13
|
.${e}-wrapper.${e}-type-C .${e}-input:focus-visible,
|
|
14
14
|
.${e}-wrapper.${e}-type-C .${e}-button:focus-visible {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
min-width: 0;
|
|
33
33
|
}
|
|
34
34
|
.${e}-field-group.${e}-labeled {
|
|
35
|
-
gap: ${
|
|
35
|
+
gap: ${zn(4)};
|
|
36
36
|
}
|
|
37
37
|
.${e}-field-label {
|
|
38
38
|
white-space: nowrap;
|
|
@@ -128,11 +128,11 @@
|
|
|
128
128
|
outline: none;
|
|
129
129
|
}
|
|
130
130
|
.${e}-success {
|
|
131
|
-
margin-top: ${
|
|
131
|
+
margin-top: ${zn(8)};
|
|
132
132
|
color: var(--${e}-success-success-color, var(--${e}-success-color));
|
|
133
133
|
}
|
|
134
134
|
.${e}-error {
|
|
135
|
-
margin-top: ${
|
|
135
|
+
margin-top: ${zn(8)};
|
|
136
136
|
color: var(--${e}-error-error-color, var(--${e}-error-color));
|
|
137
137
|
}
|
|
138
138
|
.${e}-overlay-anchor {
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
pointer-events: auto;
|
|
156
156
|
z-index: 10;
|
|
157
157
|
}
|
|
158
|
-
`}function
|
|
158
|
+
`}function mc({settings:e,isEditor:t,isEditMode:n,metadata:i,activeEvent:a}){const s=!!n,{prefix:o}=E.useScopedStyles(),{type:d="A",fieldsToShow:l=2,fields:u=[],buttonLabel:p,gap:I,fieldsGap:b,buttonCorners:w,buttonStroke:f,buttonPadding:h,isButtonFullWidth:T,inputCorners:L,inputStroke:C,inputPadding:m,inputColor:z,inputTextColor:j,inputBorderColor:R,placeholderColor:x,buttonColor:A,buttonTextColor:S,buttonBorderColor:K,labelTextColor:v,successColor:D,errorColor:W,fontFamily:q,inputFontSettings:G,inputFontSize:$,inputLineHeight:H,inputLetterSpacing:_,inputWordSpacing:B,inputTextAppearance:k,buttonFontSettings:P,buttonFontSize:te,buttonLineHeight:ae,buttonLetterSpacing:re,buttonWordSpacing:U,buttonTextAppearance:N,labelFontSettings:oe,labelFontSize:ye,labelLineHeight:ce,labelLetterSpacing:ge,labelWordSpacing:we,labelTextAppearance:ee,statusFontSettings:y,statusFontSize:g,statusLineHeight:V,statusLetterSpacing:J,statusWordSpacing:Q,statusTextAppearance:M,successMessage:F,errorMessage:O,stateOverrides:ie}=e,pe=d==="B",le=u.slice(0,Math.min(l,u.length)),he={fontSettings:{fontFamily:q,fontWeight:(G==null?void 0:G.fontWeight)??400,fontStyle:(G==null?void 0:G.fontStyle)??"normal"},fontSize:$??.01,lineHeight:H,letterSpacing:_??0,wordSpacing:B??0,textAppearance:k,color:j},Y=ft(Ue(he,t)),Z=E.scalingValue(C??0,t),X=E.scalingValue((H??$??.01)+((m==null?void 0:m.top)??0)+((m==null?void 0:m.bottom)??0)+(d==="C"?C??0:(C??0)*2),t),se={...Y,borderStyle:"solid",borderRadius:d==="C"?0:E.scalingValue(L??0,t),...d==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:Z,borderLeftWidth:0}:{borderWidth:Z},paddingTop:E.scalingValue((m==null?void 0:m.top)??0,t),paddingRight:E.scalingValue((m==null?void 0:m.right)??0,t),paddingBottom:E.scalingValue((m==null?void 0:m.bottom)??0,t),paddingLeft:E.scalingValue((m==null?void 0:m.left)??0,t),height:X,minHeight:X},Te={fontSettings:{fontFamily:q,fontWeight:(P==null?void 0:P.fontWeight)??400,fontStyle:(P==null?void 0:P.fontStyle)??"normal"},fontSize:te??.01,lineHeight:ae,letterSpacing:re??0,wordSpacing:U??0,textAppearance:N,color:S},Le=ft(Ue(Te,t)),Oe=E.scalingValue(f??0,t),ve={fontSettings:{fontFamily:q,fontWeight:(oe==null?void 0:oe.fontWeight)??400,fontStyle:(oe==null?void 0:oe.fontStyle)??"normal"},fontSize:ye??.01,lineHeight:ce,letterSpacing:ge??0,wordSpacing:we??0,textAppearance:ee,color:v},ke=Ue(ve,t),_e={fontSettings:{fontFamily:q,fontWeight:(y==null?void 0:y.fontWeight)??400,fontStyle:(y==null?void 0:y.fontStyle)??"normal"},fontSize:g??.01,lineHeight:V,letterSpacing:J??0,wordSpacing:Q??0,textAppearance:M,color:D},Ae=ft(Ue(_e,t)),Ve=E.buildColorVars(o,{inputColor:z,inputTextColor:j,inputBorderColor:R,placeholderColor:x!=null&&x.trim()?x:"#cccccc",buttonColor:A,buttonTextColor:S,buttonBorderColor:K,labelTextColor:v,successColor:D,errorColor:W},gc,hc,ie),[me,$e]=c.useState(()=>Object.fromEntries(le.map(xe=>[xe.name,""]))),[Fe,Me]=c.useState("idle"),[Ye,Be]=c.useState(null),fe=a==="success"?"success":a==="error"?"error":Fe,Xe=a==="error"?O:Ye,Je=a==="filled",Ge=c.useMemo(()=>{if(!Je)return me;let xe=null;for(const je of le)(me[je.name]??"").trim().length>0||(xe=xe??{...me},xe[je.name]="Filled");return xe??me},[me,Je,le]),mt=fe==="error"?E.getFormFieldValidationError(le,Ge):null,Pt=`${a&&a!=="default"?`${o}-state-${a}`:""}`.trim(),Ot=i==null?void 0:i.submitUrl,Re=(xe,je)=>{$e(qe=>({...qe,[xe]:je}))},Ze=async xe=>{xe.preventDefault();const je=Object.fromEntries(le.map(ze=>{var gt;return[ze.name,((gt=me[ze.name])==null?void 0:gt.trim())??""]}).filter(([,ze])=>ze));if(!Ot){Me("error"),Be("No integrations were found for this form.");return}if(Object.keys(je).length===0)return;const qe=E.getFormFieldValidationError(le,me);if(qe){Me("error"),Be(qe);return}Me("submitting"),Be(null);try{const ze=await fetch(Ot,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(je)});if(!ze.ok){const gt=await ze.text();throw new Error(gt||`Request failed: ${ze.status}`)}Me("success"),$e(Object.fromEntries(le.map(gt=>[gt.name,""])))}catch(ze){Me("error"),Be(ze instanceof Error?ze.message:"Something went wrong")}};return r.jsxs("div",{className:`${o}-wrapper ${o}-type-${d} ${Pt}`.trim(),style:Ve,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pc(o)}}),r.jsxs("form",{onSubmit:Ze,className:`${o}-form`,children:[r.jsx("div",{className:`${o}-fields`,children:le.map((xe,je)=>r.jsxs(c.Fragment,{children:[je>0&&r.jsx("div",{"data-controls":s?"fieldsGap":void 0,className:s?`${o}-control`:void 0,style:{height:E.scalingValue(b??0,t)}}),r.jsxs("div",{className:`${o}-field-group${pe?` ${o}-labeled`:""}`,children:[pe&&r.jsx("span",{className:`${o}-field-label`,style:ke?{...ke,lineHeight:ke.fontSize}:void 0,children:xe.label||xe.name}),xe.type==="textarea"?r.jsx("textarea",{name:xe.name,autoComplete:"off",value:Ge[xe.name]??"",onChange:qe=>Re(xe.name,qe.target.value),placeholder:xe.placeholder,className:`${o}-input`,style:se,rows:1,"data-filled":Je||(Ge[xe.name]??"").trim().length>0,"data-field-type":"textarea"}):r.jsx("input",{type:xe.type==="phone"?"tel":xe.type==="email"?"email":"text",name:xe.name,autoComplete:"off",value:Ge[xe.name]??"",onChange:qe=>Re(xe.name,qe.target.value),placeholder:xe.placeholder,required:xe.isRequired??xe.type==="email",className:`${o}-input`,style:se,"data-filled":Je||(Ge[xe.name]??"").trim().length>0})]})]},je))}),r.jsx("div",{"data-controls":s?"gap":void 0,className:s?`${o}-control`:void 0,style:{height:E.scalingValue(I??0,t)}}),r.jsx("div",{className:`${o}-overlay-anchor`,children:r.jsx("button",{type:"submit",className:`${o}-button`,style:{borderStyle:"solid",borderRadius:E.scalingValue(w??0,t),borderWidth:Oe,paddingTop:E.scalingValue((h==null?void 0:h.top)??0,t),paddingRight:E.scalingValue((h==null?void 0:h.right)??0,t),paddingBottom:E.scalingValue((h==null?void 0:h.bottom)??0,t),paddingLeft:E.scalingValue((h==null?void 0:h.left)??0,t),...Le,...T?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:r.jsx("span",{className:`${o}-overlay-anchor`,style:T?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:Fe==="submitting"?"...":p})})})]}),fe==="success"&&r.jsx("p",{className:`${o}-success`,style:{...Ae},children:F}),fe==="error"&&r.jsx("p",{className:`${o}-error`,style:{...Ae},role:"alert",children:mt??Xe??O})]})}const gc={inputColor:"input-color",inputTextColor:"input-text-color",inputBorderColor:"input-border-color",placeholderColor:"placeholder-color",buttonColor:"button-color",buttonTextColor:"button-text-color",buttonBorderColor:"button-border-color",labelTextColor:"label-text-color",successColor:"success-color",errorColor:"error-color"},hc=["hover","focus","filled","success","error"],fc=`import React, { useMemo, useState } from 'react';
|
|
159
159
|
import { CommonComponentProps } from '../props';
|
|
160
160
|
import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
|
|
161
161
|
import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
|
|
@@ -784,7 +784,7 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
|
|
|
784
784
|
};
|
|
785
785
|
|
|
786
786
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
787
|
-
`,sc=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."},{name:"message",type:"textarea",placeholder:"Enter your message",label:"Message",isRequired:!1,error:"Message is required"},{name:"message2",type:"textarea",placeholder:"Enter your message 2",label:"Message 2",isRequired:!1,error:"Message 2 is required"},{name:"message3",type:"textarea",placeholder:"Enter your message 3",label:"Message 3",isRequired:!1,error:"Message 3 is required"}],jn={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},lc=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],cc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:7},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","textarea","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B","C"]},gap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input",enabled:!0},min:0,max:100},buttonPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},inputPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},buttonStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Stroke Input",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},isButtonFullWidth:{type:"boolean",scope:"common",title:"Full Width",display:{type:"toggle",enum:["On","Off"]}},buttonBorderColor:{type:"string",scope:"common",title:"Stroke Button",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker",visible:!1}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},stateOverrides:{type:"object",scope:"common"},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputFontSettings:{...jn.fontSettings,scope:"common",title:"Input",display:{type:"font-settings-weight"}},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...jn.fontSettings,scope:"common",title:"Button",display:{type:"font-settings-weight"}},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},labelFontSettings:{...jn.fontSettings,scope:"common",title:"Label",display:{type:"font-settings-weight",visible:!1}},labelFontSize:{type:"number",scope:"layout",title:"Label Font Size",display:{type:"font-size",visible:!1}},labelLineHeight:{type:"number",scope:"layout",title:"Label Line Height",display:{type:"line-height-input",visible:!1}},labelLetterSpacing:{type:"number",scope:"layout",title:"Label Letter Spacing",display:{type:"letter-spacing-input",visible:!1}},labelWordSpacing:{type:"number",scope:"layout",title:"Label Word Spacing",display:{type:"word-spacing-input",visible:!1}},labelTextAppearance:{type:"object",scope:"layout",title:"Label Text Appearance",display:{type:"text-appearance",visible:!1}},statusFontSettings:{...jn.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fieldsToShow:2,fields:sc,type:"A",inputColor:"#FFFFFF",inputTextColor:"#0A00F8",inputBorderColor:"#E2E2E2",placeholderColor:"#808080",buttonColor:"#0A00F8",buttonTextColor:"#ffffff",buttonBorderColor:"#0A00F8",labelTextColor:"#999999",successColor:"#22c55e",errorColor:"#ef4444",stateOverrides:{hover:{buttonColor:"#194EFF"}},fontFamily:"Arial",inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},labelFontSettings:{fontWeight:400,fontStyle:"normal"},labelLetterSpacing:0,labelWordSpacing:0,labelTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},isButtonFullWidth:!1,buttonLabel:"Sign up",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields."},layoutDefaults:{m:{gap:.032,fieldsGap:.032,buttonStroke:0,buttonCorners:.192,inputStroke:.003,inputCorners:.192,buttonPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,labelFontSize:.0373,labelLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{gap:.0083,fieldsGap:.0083,buttonStroke:0,buttonCorners:.05,inputStroke:.001,inputCorners:.05,buttonPadding:{top:.01,right:.01,bottom:.01,left:.01},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.01,buttonLineHeight:.01,labelFontSize:.01,labelLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"type",value:"B"},then:{name:"properties.labelTextColor.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSettings.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSize.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLineHeight.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLetterSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelWordSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelTextAppearance.display.visible",value:!0}},{if:{name:"type",value:"C"},then:{name:"properties.buttonCorners.display.enabled",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.enabled",value:!1}},{if:{name:"buttonStroke",value:0},then:{name:"properties.buttonBorderColor.display.visible",value:!1}},{if:{name:"inputStroke",value:0},then:{name:"properties.inputBorderColor.display.visible",value:!1}},{if:{name:"fieldsToShow",value:1},then:{name:"properties.fieldsGap.display.enabled",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:["inputCorners","inputPadding"]},{type:"row",title:"",items:["inputStroke"]}]},{type:"group",title:"",items:[{type:"row",title:"Button",items:["buttonCorners","buttonPadding"]},{type:"row",title:"",items:["buttonStroke","isButtonFullWidth"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["labelFontSettings",{type:"row",items:["labelFontSize","labelLineHeight","labelLetterSpacing","labelWordSpacing"]},"labelTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...lc],panelIds:["general","typeStyle"],stateItems:{default:["placeholderColor","inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor","labelTextColor"],hover:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],focus:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],filled:["inputTextColor","inputColor","inputBorderColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},dc={element:oc,id:"form",name:"Newsletter Stacked",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Stacked.png"},defaultSize:{d:{width:300,height:42},t:{width:346,height:42},m:{width:300,height:42}},schema:cc,sourceCode:ac};function zn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function uc(e){return`
|
|
787
|
+
`,yc=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."},{name:"message",type:"textarea",placeholder:"Enter your message",label:"Message",isRequired:!1,error:"Message is required"},{name:"message2",type:"textarea",placeholder:"Enter your message 2",label:"Message 2",isRequired:!1,error:"Message 2 is required"},{name:"message3",type:"textarea",placeholder:"Enter your message 3",label:"Message 3",isRequired:!1,error:"Message 3 is required"}],Kn={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},vc=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],bc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:7},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","textarea","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B","C"]},gap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input"},min:0,max:100},fieldsGap:{type:"number",scope:"layout",title:"Gap",display:{type:"numeric-input",enabled:!0},min:0,max:100},buttonPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},inputPadding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},buttonStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},buttonCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputStroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},inputCorners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input",enabled:!0},min:0,max:100},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},inputBorderColor:{type:"string",scope:"common",title:"Stroke Input",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},isButtonFullWidth:{type:"boolean",scope:"common",title:"Full Width",display:{type:"toggle",enum:["On","Off"]}},buttonBorderColor:{type:"string",scope:"common",title:"Stroke Button",display:{type:"palette-color-picker"}},labelTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker",visible:!1}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},stateOverrides:{type:"object",scope:"common"},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputFontSettings:{...Kn.fontSettings,scope:"common",title:"Input",display:{type:"font-settings-weight"}},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...Kn.fontSettings,scope:"common",title:"Button",display:{type:"font-settings-weight"}},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},labelFontSettings:{...Kn.fontSettings,scope:"common",title:"Label",display:{type:"font-settings-weight",visible:!1}},labelFontSize:{type:"number",scope:"layout",title:"Label Font Size",display:{type:"font-size",visible:!1}},labelLineHeight:{type:"number",scope:"layout",title:"Label Line Height",display:{type:"line-height-input",visible:!1}},labelLetterSpacing:{type:"number",scope:"layout",title:"Label Letter Spacing",display:{type:"letter-spacing-input",visible:!1}},labelWordSpacing:{type:"number",scope:"layout",title:"Label Word Spacing",display:{type:"word-spacing-input",visible:!1}},labelTextAppearance:{type:"object",scope:"layout",title:"Label Text Appearance",display:{type:"text-appearance",visible:!1}},statusFontSettings:{...Kn.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fieldsToShow:2,fields:yc,type:"A",inputColor:"#FFFFFF",inputTextColor:"#0A00F8",inputBorderColor:"#E2E2E2",placeholderColor:"#808080",buttonColor:"#0A00F8",buttonTextColor:"#ffffff",buttonBorderColor:"#0A00F8",labelTextColor:"#999999",successColor:"#22c55e",errorColor:"#ef4444",stateOverrides:{hover:{buttonColor:"#194EFF"}},fontFamily:"Arial",inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},labelFontSettings:{fontWeight:400,fontStyle:"normal"},labelLetterSpacing:0,labelWordSpacing:0,labelTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},isButtonFullWidth:!1,buttonLabel:"Sign up",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields."},layoutDefaults:{m:{gap:.032,fieldsGap:.032,buttonStroke:0,buttonCorners:.192,inputStroke:.003,inputCorners:.192,buttonPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,labelFontSize:.0373,labelLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{gap:.0083,fieldsGap:.0083,buttonStroke:0,buttonCorners:.05,inputStroke:.001,inputCorners:.05,buttonPadding:{top:.01,right:.01,bottom:.01,left:.01},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.01,buttonLineHeight:.01,labelFontSize:.01,labelLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"type",value:"B"},then:{name:"properties.labelTextColor.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSettings.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelFontSize.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLineHeight.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelLetterSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelWordSpacing.display.visible",value:!0}},{if:{name:"type",value:"B"},then:{name:"properties.labelTextAppearance.display.visible",value:!0}},{if:{name:"type",value:"C"},then:{name:"properties.buttonCorners.display.enabled",value:!1}},{if:{name:"type",value:"C"},then:{name:"properties.inputCorners.display.enabled",value:!1}},{if:{name:"buttonStroke",value:0},then:{name:"properties.buttonBorderColor.display.visible",value:!1}},{if:{name:"inputStroke",value:0},then:{name:"properties.inputBorderColor.display.visible",value:!1}},{if:{name:"fieldsToShow",value:1},then:{name:"properties.fieldsGap.display.enabled",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name","fieldsToShow"]},"type",{type:"group",title:"",items:[{type:"row",title:"Input",items:["inputCorners","inputPadding"]},{type:"row",title:"",items:["inputStroke"]}]},{type:"group",title:"",items:[{type:"row",title:"Button",items:["buttonCorners","buttonPadding"]},{type:"row",title:"",items:["buttonStroke","isButtonFullWidth"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["labelFontSettings",{type:"row",items:["labelFontSize","labelLineHeight","labelLetterSpacing","labelWordSpacing"]},"labelTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...vc],panelIds:["general","typeStyle"],stateItems:{default:["placeholderColor","inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor","labelTextColor"],hover:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],focus:["inputColor","inputBorderColor","buttonTextColor","buttonColor","buttonBorderColor"],filled:["inputTextColor","inputColor","inputBorderColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},xc={element:mc,id:"form",name:"Newsletter Stacked",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Stacked.png"},defaultSize:{d:{width:300,height:42},t:{width:346,height:42},m:{width:300,height:42}},schema:bc,sourceCode:fc};function Gn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Cc(e){return`
|
|
788
788
|
.${e}-wrapper {
|
|
789
789
|
display: flex;
|
|
790
790
|
flex-direction: column;
|
|
@@ -966,16 +966,16 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
|
966
966
|
align-items: center;
|
|
967
967
|
}
|
|
968
968
|
.${e}-success {
|
|
969
|
-
margin-top: ${
|
|
970
|
-
font-size: ${
|
|
969
|
+
margin-top: ${Gn(8)};
|
|
970
|
+
font-size: ${Gn(14)};
|
|
971
971
|
color: var(--${e}-success-success-color, var(--${e}-success-color));
|
|
972
972
|
}
|
|
973
973
|
.${e}-error {
|
|
974
|
-
margin-top: ${
|
|
975
|
-
font-size: ${
|
|
974
|
+
margin-top: ${Gn(8)};
|
|
975
|
+
font-size: ${Gn(14)};
|
|
976
976
|
color: var(--${e}-error-error-color, var(--${e}-error-color));
|
|
977
977
|
}
|
|
978
|
-
`}const
|
|
978
|
+
`}const Sc=({settings:e,isEditor:t,metadata:n,activeEvent:i})=>{const{prefix:a}=E.useScopedStyles(),{fields:s=[{name:"email",type:"email",placeholder:"Your email"}],buttonIcon:o,buttonLabel:d,fieldsToShow:l=1,fontFamily:u,inputFontSettings:p,inputFontSize:I,inputLineHeight:b,inputLetterSpacing:w,inputWordSpacing:f,inputTextAppearance:h,buttonFontSettings:T,buttonFontSize:L,buttonLineHeight:C,buttonLetterSpacing:m,buttonWordSpacing:z,buttonTextAppearance:j,statusFontSettings:R,statusFontSize:x,statusLineHeight:A,statusLetterSpacing:S,statusWordSpacing:K,statusTextAppearance:v,iconMaxWidth:D,minHeight:W,corners:q,stroke:G,stateOverrides:$,inputPadding:H,buttonPadding:_,successMessage:B="Thanks for subscribing!",errorMessage:k="Please, fill all required fields."}=e,P=s.slice(0,Math.min(l,s.length)),[te,ae]=c.useState(()=>Object.fromEntries(P.map(ve=>[ve.name,""]))),[re,U]=c.useState("idle"),[N,oe]=c.useState(null),ye=i==="success"?"success":i==="error"?"error":re,ce=i==="error"?k:N,ge=i==="filled",we=c.useMemo(()=>{if(!ge)return te;let ve=null;for(const ke of P)(te[ke.name]??"").trim().length>0||(ve=ve??{...te},ve[ke.name]="Filled");return ve??te},[ge,te,P]),ee=ye==="error"?E.getFormFieldValidationError(P,we):null,y=i&&i!=="default"?`${a}-state-${i}`:"",g=P.some(ve=>(we[ve.name]??"").trim().length>0),V=y!==`${a}-state-filled`&&g?`${a}-state-filled`:"",J=`${y} ${V}`.trim(),Q=n==null?void 0:n.submitUrl,M=d??"",F=(o==null?void 0:o.icon)??"",O=(o==null?void 0:o.mode)==="On",ie=M||"Submit",pe={fontSettings:{fontFamily:u,fontWeight:(p==null?void 0:p.fontWeight)??400,fontStyle:(p==null?void 0:p.fontStyle)??"normal"},fontSize:I??.01,lineHeight:b,letterSpacing:w??0,wordSpacing:f??0,textAppearance:h,color:e.inputTextColor??"#111111"},le={fontSettings:{fontFamily:u,fontWeight:(T==null?void 0:T.fontWeight)??400,fontStyle:(T==null?void 0:T.fontStyle)??"normal"},fontSize:L??.01,lineHeight:C,letterSpacing:m??0,wordSpacing:z??0,textAppearance:j,color:e.buttonTextColor??"#ffffff"},he={fontSettings:{fontFamily:u,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:x??.01,lineHeight:A,letterSpacing:S??0,wordSpacing:K??0,textAppearance:v,color:e.successColor??"#22c55e"},Y=ft(Ue(pe,t)),Z=ft(Ue(le,t)),X=ft(Ue(he,t)),se=E.buildColorVars(a,{strokeColor:e.strokeColor,inputColor:e.inputColor,placeholderColor:e.placeholderColor,buttonColor:e.buttonColor,successColor:e.successColor,errorColor:e.errorColor,inputTextColor:e.inputTextColor??(pe==null?void 0:pe.color)??"#111111",buttonTextColor:e.buttonTextColor??(le==null?void 0:le.color)??"#ffffff"},wc,$c,$),Te={borderRadius:E.scalingValue(q,t),borderWidth:E.scalingValue(G,t),borderStyle:"solid"},Le={borderLeftWidth:E.scalingValue(G,t)},Oe=async ve=>{ve.preventDefault();const ke=Object.fromEntries(P.map(Ae=>{var Ve;return[Ae.name,((Ve=te[Ae.name])==null?void 0:Ve.trim())??""]}).filter(([,Ae])=>Ae));if(!Q){U("error"),oe("No integrations were found for this form.");return}if(Object.keys(ke).length===0)return;const _e=E.getFormFieldValidationError(P,te);if(_e){U("error"),oe(_e);return}U("submitting"),oe(null);try{const Ae=await fetch(Q,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(ke)});if(!Ae.ok){const Ve=await Ae.text();throw new Error(Ve||`Request failed: ${Ae.status}`)}U("success"),ae(Object.fromEntries(P.map(Ve=>[Ve.name,""])))}catch(Ae){U("error"),oe(Ae instanceof Error?Ae.message:"Something went wrong")}};return r.jsxs("div",{className:`${a}-wrapper ${J}`.trim(),style:se,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Cc(a)}}),r.jsxs("form",{onSubmit:Oe,className:`${a}-form`,style:{...Te,height:E.scalingValue(W,t),minHeight:E.scalingValue(W,t)},children:[r.jsx("div",{className:`${a}-inputWrap ${a}-overlayAnchor`,style:{flex:1,minWidth:0},children:P.map(ve=>r.jsx("input",{type:ve.type==="email"?"email":ve.type==="phone"?"tel":"text",name:ve.name,autoComplete:"off",value:we[ve.name]??"",onChange:ke=>ae(_e=>({..._e,[ve.name]:ke.target.value})),placeholder:ve.placeholder,required:ve.isRequired??ve.type==="email",className:`${a}-input`,style:{...Y,paddingRight:E.scalingValue(H.right,t),paddingLeft:E.scalingValue(H.left,t),paddingTop:E.scalingValue(H.top,t),paddingBottom:E.scalingValue(H.bottom,t)}},ve.name))}),r.jsx("div",{className:`${a}-overlayAnchor`,children:r.jsx("button",{type:"submit",className:`${a}-submitBtn`,"aria-label":ie,style:{...Z,...Le,paddingRight:E.scalingValue(_.right,t),paddingLeft:E.scalingValue(_.left,t),paddingTop:E.scalingValue(_.top,t),paddingBottom:E.scalingValue(_.bottom,t)},children:re==="submitting"?"...":O?F&&r.jsx(yt,{url:F,className:`${a}-submitBtnIcon`,style:{maxWidth:E.scalingValue(D??0,t)},fill:`var(--${a}-button-text-color)`,hoverFill:`var(--${a}-button-text-color)`}):M})})]}),ye==="success"&&r.jsx("p",{className:`${a}-success`,style:{...X},children:B}),ye==="error"&&r.jsx("p",{className:`${a}-error`,style:{...X},role:"alert",children:ee??ce??k})]})},wc={strokeColor:"stroke-color",inputColor:"input-color",placeholderColor:"placeholder-color",buttonColor:"button-color",inputTextColor:"input-text-color",buttonTextColor:"button-text-color",successColor:"success-color",errorColor:"error-color"},$c=["hover","focus","filled","success","error"],Tc=`import React, { useMemo, useState } from 'react';
|
|
979
979
|
import { CommonComponentProps } from '../props';
|
|
980
980
|
import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
|
|
981
981
|
import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
|
|
@@ -1547,7 +1547,7 @@ const COLOR_VAR_MAP: Record<OnelinerColorKeys, string> = {
|
|
|
1547
1547
|
};
|
|
1548
1548
|
|
|
1549
1549
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
1550
|
-
`,fc="data:image/svg+xml,"+encodeURIComponent('<svg width="23px" height="20px" viewBox="0 0 23 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Newsletter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tutorials-pop-up-Copy-12" transform="translate(-43, -687)" fill="#FFFFFF" fill-rule="nonzero"><path d="M66,697 C66,697.552285 65.5522847,698 65,698 L44,698 C43.4477153,698 43,697.552285 43,697 C43,696.447715 43.4477153,696 44,696 L65,696 C65.5522847,696 66,696.447715 66,697 Z M55.6689647,687.256706 L65.6689647,696.256706 C66.1103451,696.653948 66.1103451,697.346052 65.6689647,697.743294 L55.6689647,706.743294 C55.2584547,707.112753 54.6261649,707.079475 54.2567059,706.668965 C53.8872468,706.258455 53.9205252,705.626165 54.3310353,705.256706 L63.5051529,697 L54.3310353,688.743294 C53.9205252,688.373835 53.8872468,687.741545 54.2567059,687.331035 C54.6261649,686.920525 55.2584547,686.887247 55.6689647,687.256706 Z" id="Combined-Shape"></path></g></g></svg>'),yc=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."}],To={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},vc=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],bc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:3},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},buttonIcon:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},iconMaxWidth:{type:"number",scope:"common",title:"Icon Max Width",display:{type:"full-width-input"},min:0,max:1},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"Input Padding",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"Button Padding",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"numeric-input"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke All",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},stateOverrides:{type:"object",scope:"common"},inputFontSettings:{...To.fontSettings,scope:"common",title:"Input"},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...To.fontSettings,scope:"common",title:"Button"},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},statusFontSettings:{...To.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fields:yc,fieldsToShow:1,buttonLabel:"Subscribe",buttonIcon:{mode:"Off",icon:fc},fontFamily:"Arial",strokeColor:"#000000",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#000000",buttonTextColor:"#ffffff",errorColor:"#ef4444",successColor:"#22c55e",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields.",stateOverrides:{hover:{buttonColor:"#33A2F2"}},inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"uppercase",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{minHeight:.1,iconMaxWidth:.1,stroke:.001,corners:0,buttonPadding:{top:.02,right:.04,bottom:.02,left:.04},inputPadding:{top:.01,right:.03,bottom:.01,left:.03},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{minHeight:.028,iconMaxWidth:.028,stroke:.001,corners:0,buttonPadding:{right:.0175,left:.0175,top:.005,bottom:.004},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.009,buttonLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"Off"},then:{name:"properties.iconMaxWidth.display.visible",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight"]},{type:"row",items:["corners","stroke"]},{type:"row",title:"",items:["inputPadding","buttonPadding"]},{type:"row",title:"",items:["buttonIcon"]},"iconMaxWidth"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...vc],panelIds:["general","typeStyle"],stateItems:{default:["strokeColor","placeholderColor","inputColor","buttonTextColor","buttonColor"],hover:["strokeColor","inputColor","buttonTextColor","buttonColor"],focus:["strokeColor","inputTextColor","buttonTextColor","buttonColor"],filled:["strokeColor","inputColor","inputTextColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},xc={element:pc,id:"oneliner-form",name:"Newsletter Single Line",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Single_Line.png"},defaultSize:{d:{width:400,height:60},t:{width:453,height:60},m:{width:340,height:60}},assetsPaths:{content:[],parameters:[{path:"buttonIcon.icon"}]},schema:bc,sourceCode:hc};function Ni(e){return`
|
|
1550
|
+
`,Lc="data:image/svg+xml,"+encodeURIComponent('<svg width="23px" height="20px" viewBox="0 0 23 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Newsletter" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Tutorials-pop-up-Copy-12" transform="translate(-43, -687)" fill="#FFFFFF" fill-rule="nonzero"><path d="M66,697 C66,697.552285 65.5522847,698 65,698 L44,698 C43.4477153,698 43,697.552285 43,697 C43,696.447715 43.4477153,696 44,696 L65,696 C65.5522847,696 66,696.447715 66,697 Z M55.6689647,687.256706 L65.6689647,696.256706 C66.1103451,696.653948 66.1103451,697.346052 65.6689647,697.743294 L55.6689647,706.743294 C55.2584547,707.112753 54.6261649,707.079475 54.2567059,706.668965 C53.8872468,706.258455 53.9205252,705.626165 54.3310353,705.256706 L63.5051529,697 L54.3310353,688.743294 C53.9205252,688.373835 53.8872468,687.741545 54.2567059,687.331035 C54.6261649,686.920525 55.2584547,686.887247 55.6689647,687.256706 Z" id="Combined-Shape"></path></g></g></svg>'),Ec=[{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"company",type:"text",placeholder:"Enter company",label:"Company",isRequired:!1,error:"Please, enter your company name."},{name:"phone",type:"phone",placeholder:"Enter your phone",label:"Phone",isRequired:!1,error:"Please, enter a valid phone number."}],Ti={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Ic=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],Pc={type:"object",version:1,settings:{sizing:"auto manual",properties:{fieldsToShow:{type:"number",scope:"common",title:"Fields",display:{type:"number"},min:1,max:3},fields:{type:"array",scope:"common",display:{type:"fields-group"},items:{type:"object",properties:{name:{type:"string"},type:{type:"string",enum:["text","phone","email"]},placeholder:{type:"string"},label:{type:"string"},isRequired:{type:"boolean"},error:{type:"string"}}}},buttonLabel:{type:"string",scope:"common",title:"Button Label",display:{type:"text-input"}},buttonIcon:{type:"object",scope:"common",title:"Button Icon",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},iconMaxWidth:{type:"number",scope:"common",title:"Icon Max Width",display:{type:"full-width-input"},min:0,max:1},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},inputPadding:{type:"object",scope:"layout",title:"Input Padding",display:{type:"padding-controls"}},buttonPadding:{type:"object",scope:"layout",title:"Button Padding",display:{type:"padding-controls"}},minHeight:{type:"number",scope:"layout",title:"min Height",display:{type:"numeric-input"},min:0,max:200},corners:{type:"number",scope:"layout",title:"Corners",display:{type:"numeric-input"},min:0,max:100},stroke:{type:"number",scope:"layout",title:"Stroke",display:{type:"numeric-input"},min:0,max:20},strokeColor:{type:"string",scope:"common",title:"Stroke All",display:{type:"palette-color-picker"}},inputColor:{type:"string",scope:"common",title:"Fill Input",display:{type:"palette-color-picker"}},inputTextColor:{type:"string",scope:"common",title:"Input Label",display:{type:"palette-color-picker"}},placeholderColor:{type:"string",scope:"common",title:"Filler Input",display:{type:"palette-color-picker"}},buttonColor:{type:"string",scope:"common",title:"Fill Button",display:{type:"palette-color-picker"}},buttonTextColor:{type:"string",scope:"common",title:"Label Button",display:{type:"palette-color-picker"}},successColor:{type:"string",scope:"common",title:"Success Message Color",display:{type:"palette-color-picker"}},errorColor:{type:"string",scope:"common",title:"Error Message Color",display:{type:"palette-color-picker"}},successMessage:{type:"string",scope:"common",title:"Success Message",display:{type:"text-input"}},errorMessage:{type:"string",scope:"common",title:"Error Message",display:{type:"text-input"}},stateOverrides:{type:"object",scope:"common"},inputFontSettings:{...Ti.fontSettings,scope:"common",title:"Input"},inputFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},inputLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},inputLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},inputWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},inputTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},buttonFontSettings:{...Ti.fontSettings,scope:"common",title:"Button"},buttonFontSize:{type:"number",scope:"layout",title:"Button Font Size",display:{type:"font-size"}},buttonLineHeight:{type:"number",scope:"layout",title:"Button Line Height",display:{type:"line-height-input"}},buttonLetterSpacing:{type:"number",scope:"layout",title:"Button Letter Spacing",display:{type:"letter-spacing-input"}},buttonWordSpacing:{type:"number",scope:"layout",title:"Button Word Spacing",display:{type:"word-spacing-input"}},buttonTextAppearance:{type:"object",scope:"layout",title:"Button Text Appearance",display:{type:"text-appearance"}},statusFontSettings:{...Ti.fontSettings,scope:"common",title:"Success/Error"},statusFontSize:{type:"number",scope:"layout",title:"Success/Error Font Size",display:{type:"font-size"}},statusLineHeight:{type:"number",scope:"layout",title:"Success/Error Line Height",display:{type:"line-height-input"}},statusLetterSpacing:{type:"number",scope:"layout",title:"Success/Error Letter Spacing",display:{type:"letter-spacing-input"}},statusWordSpacing:{type:"number",scope:"layout",title:"Success/Error Word Spacing",display:{type:"word-spacing-input"}},statusTextAppearance:{type:"object",scope:"layout",title:"Success/Error Text Appearance",display:{type:"text-appearance"}}},defaults:{fields:Ec,fieldsToShow:1,buttonLabel:"Subscribe",buttonIcon:{mode:"Off",icon:Lc},fontFamily:"Arial",strokeColor:"#000000",inputColor:"#ffffff",inputTextColor:"#0A00F8",placeholderColor:"#000000",buttonColor:"#000000",buttonTextColor:"#ffffff",errorColor:"#ef4444",successColor:"#22c55e",successMessage:"Thanks for subscribing!",errorMessage:"Please, fill all required fields.",stateOverrides:{hover:{buttonColor:"#33A2F2"}},inputFontSettings:{fontWeight:400,fontStyle:"normal"},inputLetterSpacing:0,inputWordSpacing:0,inputTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},buttonFontSettings:{fontWeight:400,fontStyle:"normal"},buttonLetterSpacing:0,buttonWordSpacing:0,buttonTextAppearance:{textTransform:"uppercase",textDecoration:"none",fontVariant:"normal"},statusFontSettings:{fontWeight:400,fontStyle:"normal"},statusLetterSpacing:0,statusWordSpacing:0,statusTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{minHeight:.1,iconMaxWidth:.1,stroke:.001,corners:0,buttonPadding:{top:.02,right:.04,bottom:.02,left:.04},inputPadding:{top:.01,right:.03,bottom:.01,left:.03},inputFontSize:.043,inputLineHeight:.043,buttonFontSize:.0373,buttonLineHeight:.0373,statusFontSize:.0373,statusLineHeight:.0373},d:{minHeight:.028,iconMaxWidth:.028,stroke:.001,corners:0,buttonPadding:{right:.0175,left:.0175,top:.005,bottom:.004},inputPadding:{top:.01,right:.01,bottom:.01,left:.01},inputFontSize:.01,inputLineHeight:.01,buttonFontSize:.009,buttonLineHeight:.01,statusFontSize:.01,statusLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSettings.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonFontSize.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLineHeight.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonLetterSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonWordSpacing.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"On"},then:{name:"properties.buttonTextAppearance.display.visible",value:!1}},{if:{name:"buttonIcon.mode",value:"Off"},then:{name:"properties.iconMaxWidth.display.visible",value:!1}}]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","fieldsToShow"]},{type:"row",items:["minHeight"]},{type:"row",items:["corners","stroke"]},{type:"row",title:"",items:["inputPadding","buttonPadding"]},{type:"row",title:"",items:["buttonIcon"]},"iconMaxWidth"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["inputFontSettings",{type:"row",items:["inputFontSize","inputLineHeight","inputLetterSpacing","inputWordSpacing"]},"inputTextAppearance"]},{type:"group",title:"",items:["buttonFontSettings",{type:"row",items:["buttonFontSize","buttonLineHeight","buttonLetterSpacing","buttonWordSpacing"]},"buttonTextAppearance"]},{type:"group",title:"",items:["statusFontSettings",{type:"row",items:["statusFontSize","statusLineHeight","statusLetterSpacing","statusWordSpacing"]},"statusTextAppearance"]}]},{id:"fields",icon:"layers",title:"Fields",tooltip:"Fields",layout:["fields","buttonLabel","successMessage","errorMessage"]}],paletteBookmark:{items:[...Ic],panelIds:["general","typeStyle"],stateItems:{default:["strokeColor","placeholderColor","inputColor","buttonTextColor","buttonColor"],hover:["strokeColor","inputColor","buttonTextColor","buttonColor"],focus:["strokeColor","inputTextColor","buttonTextColor","buttonColor"],filled:["strokeColor","inputColor","inputTextColor","buttonTextColor"],success:["successColor"],error:["errorColor"]}},allowedPlugins:["newsletter"],states:["default","hover","focus","filled","success","error"]},Rc={element:Sc,id:"oneliner-form",name:"Newsletter Single Line",category:"forms",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Newsletter_Single_Line.png"},defaultSize:{d:{width:400,height:60},t:{width:453,height:60},m:{width:340,height:60}},assetsPaths:{content:[],parameters:[{path:"buttonIcon.icon"}]},schema:Pc,sourceCode:Tc};function Oo(e){return`
|
|
1551
1551
|
.${e}-marquee-wrapper {
|
|
1552
1552
|
overflow: hidden;
|
|
1553
1553
|
width: 100%;
|
|
@@ -1679,7 +1679,7 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
|
1679
1679
|
.${e}-image-hover-grayscale:hover img {
|
|
1680
1680
|
filter: grayscale(100%);
|
|
1681
1681
|
}
|
|
1682
|
-
`}const
|
|
1682
|
+
`}const Ac=30,Mc=20,Li=2,_c=2,Wc=(e,t)=>Array.from({length:t},()=>e).flat(),kc=(e,t)=>{const n=t.getBoundingClientRect(),i=e.getBoundingClientRect();return i.right>n.left&&i.left<n.right},Fc=(e,t)=>{const n=e.querySelectorAll(`[data-marquee-item-index="${t}"]`);return Array.from(n).some(i=>kc(i,e))},Nc=({item:e,prefix:t,imageFit:n,imageMaxWidth:i,imageMaxHeight:a,imageHoverClass:s,isFirstSet:o,scaled:d,onFirstSetImageDone:l})=>{var x,A,S;const u=c.useRef(null);c.useLayoutEffect(()=>{if(!o)return;const K=u.current;K!=null&&K.complete&&(l==null||l())},[o,(x=e.image)==null?void 0:x.url,l]);const p=n.display==="Cover",I=n.ratioValue??"1:1",b=n.reversed??!1,[w,f]=I.split(":").map(Number),L=(b?f:w)/(b?w:f);let C=i,m=C/L;m>a&&(m=a,C=m*L);const z=d(C),j=d(m),R=((A=e.image)==null?void 0:A.url)&&r.jsx("img",{ref:u,src:e.image.url,alt:((S=e.image)==null?void 0:S.name)??"",style:p?{pointerEvents:"auto",display:"block",width:"100%",height:"100%",objectFit:"cover"}:{pointerEvents:"auto",display:"block",height:"100%",width:"auto",maxWidth:d(i),objectFit:"contain"},onLoad:o?l:void 0,onError:o?l:void 0});return r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"start",...p?{width:z}:{width:"fit-content",maxWidth:d(i),minWidth:0}},children:r.jsx("div",{className:s,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flexShrink:0,...p?{width:z,height:j,overflow:"hidden"}:{width:"fit-content",maxWidth:d(i),height:d(a)}},children:R&&e.link?r.jsx("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",className:Ie(`${t}-marquee-link`,!p&&`${t}-marquee-link-contain`),children:R}):R})})},Hc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),{speed:o,direction:d,pauseOnHover:l,gap:u,imageMaxWidth:p,imageMaxHeight:I,imageFit:b,hoverEffect:w}=e,f=!!a,h=!n||!!i,T=h&&w!=="off"&&w!=="randomize"?`${s}-image-hover-${w}`:void 0,L=n?!!i:!0,m=((t==null?void 0:t.length)??0)>0&&(L||!!n),z=Math.max(0,o)*Ac,j=y=>E.scalingValue(y,n??!1),R=c.useRef(null),x=c.useRef(null),A=c.useRef(null),[S,K]=c.useState(0),[v,D]=c.useState(0),W=L&&l==="on",[q,G]=c.useState(!1),[$,H]=c.useState({}),_=c.useRef($);_.current=$;const B=c.useRef(null),k=c.useRef(0),P=c.useRef(null),te=c.useMemo(()=>(t??[]).map(y=>{var g;return((g=y.image)==null?void 0:g.url)??""}).join("\0"),[t]),[ae,re]=c.useState(Li),U=c.useMemo(()=>{const y=t??[];return!L||y.length===0?y:Wc(y,ae)},[t,L,ae]),N=c.useMemo(()=>U.filter(y=>{var g;return!!((g=y.image)!=null&&g.url)}).length,[U]),oe=m?_c:1;c.useLayoutEffect(()=>{k.current=0,H({}),B.current=null,re(Li),K(0)},[te]),c.useEffect(()=>{if(!h||w!=="randomize")return;const y=R.current;if(!y)return;const g=M=>{H(F=>{let O=null;for(const ie of M)ie in F&&(Fc(y,ie)||(O||(O={...F}),delete O[ie]));return O??F})},V=new IntersectionObserver(M=>{const F=new Set;for(const O of M){const ie=O.target.dataset.marqueeItemIndex,pe=ie!==void 0?Number(ie):NaN;Number.isNaN(pe)||F.add(pe)}F.size>0&&g(F)},{root:y,threshold:0});Object.keys($).forEach(M=>{const F=Number(M);y.querySelectorAll(`[data-marquee-item-index="${F}"]`).forEach(O=>V.observe(O))});let J=0;const Q=()=>{const M=Object.keys(_.current);M.length!==0&&(g(M.map(Number)),J=requestAnimationFrame(Q))};return Object.keys(_.current).length>0&&(J=requestAnimationFrame(Q)),()=>{cancelAnimationFrame(J),V.disconnect()}},[w,$,h]),c.useLayoutEffect(()=>{if(!m)return;const y=R.current,g=A.current;if(!y||!g)return;let V=0;const J=()=>{const F=y.getBoundingClientRect().width,O=g.getBoundingClientRect().width,ie=B.current,pe=typeof ie=="number"&&Math.abs(ie-O)<=.25;if(B.current=O,L&&O>0&&ae>0){const le=O/ae;if(le>0&&F>0){const he=Math.max(Li,Math.ceil(F/le)+1);if(he!==ae){re(he);return}}}if(O>0&&S<=0){K(O);return}pe&&O!==S?K(O):!pe&&S<=0&&(cancelAnimationFrame(V),V=requestAnimationFrame(J))},Q=()=>{cancelAnimationFrame(V),V=requestAnimationFrame(J)};P.current=Q,Q();const M=new ResizeObserver(Q);return M.observe(y),M.observe(g),()=>{P.current=null,cancelAnimationFrame(V),M.disconnect()}},[L,m,S,te,ae]),c.useLayoutEffect(()=>{const y=x.current;if(!m||!y)return;const g=S>0?S:0,V=g>0&&z>0?g/z*1e3:0,J=`${Math.max(0,V)/1e3}s`;y.style.setProperty("--marquee-distance",`${g}px`),y.style.setProperty("--marquee-duration",J)},[L,m,z,S]),c.useLayoutEffect(()=>{if(!m){D(0);return}if(S<=0){D(0);return}const y=x.current;if(!y)return;const g=()=>{const J=y.getBoundingClientRect().height;D(J>0?J:0)};g();const V=new ResizeObserver(g);return V.observe(y),()=>V.disconnect()},[m,oe,U,n,u,p,I,S,b,$]);const ye=()=>{W&&G(!0)},ce=()=>{W&&G(!1)},ge=c.useCallback(()=>{var y;k.current=Math.min(N,k.current+1),(y=P.current)==null||y.call(P)},[N]),we=c.useCallback((y,g)=>{H(V=>{const J=V[y]??g,Q=(t??[]).filter(F=>F!==J);if(Q.length===0)return V;const M=Q[Math.floor(Math.random()*Q.length)];return{...V,[y]:M}})},[t]),ee=(y,g,V,J)=>{const Q=h&&w==="randomize"&&b.display==="Cover"?$[V]??y:y,M=`max(${j(u)}, ${Mc}px)`,F=`calc(-0.5 * (${M} + ${j(u)}))`;return r.jsxs("div",{className:`${s}-marquee-card`,"data-marquee-item-index":V,onMouseEnter:h&&w==="randomize"&&b.display==="Cover"?()=>we(V,y):void 0,children:[r.jsx(Nc,{item:Q,prefix:s,imageFit:b,imageMaxWidth:p,imageMaxHeight:I,imageHoverClass:T,isEditor:n,isFirstSet:J,scaled:j,onFirstSetImageDone:ge}),f&&r.jsx("div",{"data-controls":"gap","data-controls-axis":"x",className:`${s}-gap-control`,style:{position:"absolute",top:0,right:F,width:M,height:"100%"}})]},`${g}-${V}`)};if(m){const y=L?W&&q?"paused":"running":"paused";return r.jsxs("div",{ref:R,className:Ie(`${s}-wrapper`,`${s}-marquee-wrapper`),"aria-label":"Marquee",style:S>0&&v>0?{height:v}:void 0,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Oo(s)}}),r.jsx("div",{ref:x,className:`${s}-marquee-track`,"data-direction":d,onMouseEnter:ye,onMouseLeave:ce,style:{"--marquee-play-state":y},children:Array.from({length:oe},(g,V)=>r.jsx("div",{ref:V===0?A:void 0,className:Ie(`${s}-marquee-row`,`${s}-marquee-set`),style:{gap:j(u),paddingRight:j(u)},"aria-hidden":V>0,children:U.map((J,Q)=>ee(J,V,Q,V===0))},`set-${V}`))},"marquee-track")]})}return r.jsxs("div",{ref:R,className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Oo(s)}}),r.jsx("div",{className:Ie(`${s}-marquee-row`,`${s}-marquee-static`),style:{gap:j(u),transform:"none"},"aria-label":"Marquee",children:t==null?void 0:t.map((y,g)=>ee(y,0,g))},"marquee-static")]})},Bc=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
1683
1683
|
import cn from 'classnames';
|
|
1684
1684
|
import { CommonComponentProps } from '../props';
|
|
1685
1685
|
import { scalingValue } from '../utils/scalingValue';
|
|
@@ -2309,7 +2309,7 @@ type MarqueeProps = {
|
|
|
2309
2309
|
isPreviewMode?: boolean;
|
|
2310
2310
|
isEditMode?: boolean;
|
|
2311
2311
|
} & CommonComponentProps;
|
|
2312
|
-
`,
|
|
2312
|
+
`,Oc={type:"object",version:1,settings:{sizing:"auto manual",properties:{speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:7},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle-cycle",enum:["on","off"]}},hoverEffect:{type:"string",scope:"common",title:"Effect",display:{type:"toggle-cycle",enum:["off","brightness","grayscale"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"numeric-input"}},imageMaxWidth:{type:"number",scope:"layout",title:"Max width",min:10,max:400,display:{type:"numeric-input"}},imageMaxHeight:{type:"number",scope:"layout",title:"Max height",min:10,max:400,display:{type:"numeric-input"}},imageFit:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}}},defaults:{direction:"left",pauseOnHover:"off",hoverEffect:"off",imageFit:{display:"Fit",ratioValue:"16:9",reversed:!1}},layoutDefaults:{m:{speed:.55,gap:.04,imageMaxWidth:.8,imageMaxHeight:.21},d:{speed:1.64,gap:.02,imageMaxWidth:.15,imageMaxHeight:.1}},displayRules:[{if:{name:"imageFit.display",value:"Cover"},then:{name:"properties.hoverEffect.display.enum",value:["off","brightness","grayscale","randomize"]}}],layout:["__componentName__","speed","direction","pauseOnHover","hoverEffect","gap","imageMaxWidth","imageMaxHeight","imageFit"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",items:["speed","imageFit"]},{type:"row",items:["imageMaxWidth","imageMaxHeight"]},{type:"row",items:["direction"]},{type:"row",title:"Hover Settings",items:[{type:"row",title:"",items:["hoverEffect","pauseOnHover"]}]}]}],content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},link:{label:"URL",placeholder:"Enter link...",display:{type:"text-input"}}}},default:[{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:""},link:""},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S08Q40WHD39024VNDWF2Q.jpeg",name:""},link:""}]}},jc={element:Hc,id:"marquee",name:"Marquee",category:"galleries",version:1,defaultSize:{d:{width:"100%",height:140},m:{width:390,height:80}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Simple_Marquee.mp4"},schema:Oc,sourceCode:Bc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function jo(e){return`
|
|
2313
2313
|
.${e}-marquee-wrapper {
|
|
2314
2314
|
overflow: hidden;
|
|
2315
2315
|
width: 100%;
|
|
@@ -2396,7 +2396,7 @@ type MarqueeProps = {
|
|
|
2396
2396
|
pointer-events: auto;
|
|
2397
2397
|
z-index: 10;
|
|
2398
2398
|
}
|
|
2399
|
-
`}const
|
|
2399
|
+
`}const Dc=30,Do=2,Vc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),{autoplay:o,align:d,speed:l,direction:u,pauseOnHover:p,gap:I,cardWidth:b,corners:w,stroke:f,strokeColor:h,bgColor:T,padding:L,logoMarginTop:C,logoWidth:m,logoHeight:z,captionMarginTop:j}=e,R=!!a,x=((t==null?void 0:t.length)??0)>0,A=o==="on"&&(!n||!!i),S=x&&(A||!!n),K=Math.max(0,l)*Dc,v=Y=>E.scalingValue(Y,n??!1),D=c.useRef(null),W=c.useRef(null),q=c.useRef(null),[G,$]=c.useState(0),[H,_]=c.useState(0),[B,k]=c.useState(0),P=A&&p==="on",[te,ae]=c.useState(!1),re=c.useRef(null),[U,N]=c.useState(0),[oe,ye]=c.useState(0),ce=c.useRef(null),ge=Y=>{var X,se,Te,Le,Oe;return{fontSettings:{fontFamily:(e==null?void 0:e[`${Y}FontFamily`])??"Arial",fontWeight:((X=e==null?void 0:e[`${Y}FontSettings`])==null?void 0:X.fontWeight)??400,fontStyle:((se=e==null?void 0:e[`${Y}FontSettings`])==null?void 0:se.fontStyle)??"normal"},textAppearance:{textTransform:((Te=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Te.textTransform)??"none",textDecoration:((Le=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Le.textDecoration)??"none",fontVariant:((Oe=e==null?void 0:e[`${Y}TextAppearance`])==null?void 0:Oe.fontVariant)??"normal"},letterSpacing:(e==null?void 0:e[`${Y}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${Y}WordSpacing`])??0,fontSize:(e==null?void 0:e[`${Y}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${Y}LineHeight`])??.01,color:(e==null?void 0:e[`${Y}Color`])??"#000000"}},we=ge("text"),ee=ge("caption"),y=c.useMemo(()=>((t==null?void 0:t.length)??0)>1&&(t??[]).some(Y=>{var Z,X;return(((Z=Y.text)==null?void 0:Z.length)??0)>0||(((X=Y.caption)==null?void 0:X.length)??0)>0}),[t]),g=c.useMemo(()=>!S||(t==null?void 0:t.length)===0?1:H<=0||G<=0?Do:Math.max(Do,Math.ceil(G/H)+1),[S,t==null?void 0:t.length,H,G]);c.useLayoutEffect(()=>{if(!S)return;const Y=D.current,Z=q.current;if(!Y||!Z)return;let X=0;const se=()=>{const Oe=Y.getBoundingClientRect().width,ve=Z.getBoundingClientRect().width,ke=ce.current,_e=typeof ke=="number"&&Math.abs(ke-ve)<=.25;if(ce.current=ve,$(Oe),typeof ve=="number"&&ve>0&&H<=0){_(ve);return}_e&&ve!==H?_(ve):!_e&&H<=0&&(cancelAnimationFrame(X),X=requestAnimationFrame(se))},Te=()=>{cancelAnimationFrame(X),X=requestAnimationFrame(se)};Te();const Le=new ResizeObserver(Te);return Le.observe(Y),Le.observe(Z),()=>{cancelAnimationFrame(X),Le.disconnect()}},[A,S,H]),c.useLayoutEffect(()=>{const Y=W.current;if(!S||!Y)return;const Z=H>0?H:0,X=Z>0&&K>0?Z/K*1e3:0,se=`${Math.max(0,X)/1e3}s`;Y.style.setProperty("--marquee-distance",`${Z}px`),Y.style.setProperty("--marquee-duration",se)},[A,S,K,H]),c.useLayoutEffect(()=>{if(!S){k(0);return}const Y=q.current,Z=W.current;if(!Y||!Z)return;const X=()=>{let Te=0;for(let Le=0;Le<Y.children.length;Le++){const ve=Y.children[Le].firstElementChild;ve&&(Te=Math.max(Te,ve.offsetHeight))}Te<=0&&(Te=Z.offsetHeight),k(Te>0?Te:0)};X();const se=new ResizeObserver(X);return se.observe(Y),se.observe(Z),()=>{se.disconnect()}},[S,g,t,n,I,b,L,f,w,m,z,U,oe]);const V=()=>{P&&ae(!0)},J=()=>{P&&ae(!1)},Q=c.useMemo(()=>{switch(d){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[d]),M=c.useMemo(()=>{switch(d){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[d]),F=c.useCallback((Y,Z,X,se)=>r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:Q,width:"100%"},children:[r.jsx("div",{"data-controls":R?se==null?void 0:se.controlsName:void 0,"data-controls-axis":R?"y":void 0,className:R?`${s}-control`:void 0,style:{height:v((se==null?void 0:se.marginTop)??0)}}),r.jsx("div",{...se!=null&&se.dataMeasureKind?{"data-testimonial-measure":se.dataMeasureKind}:{},style:{...Ue(Y,n),textAlign:M,pointerEvents:"auto",...typeof(se==null?void 0:se.minHeightPx)=="number"&&se.minHeightPx>0?{minHeight:se.minHeightPx}:{}},children:r.jsx(sn,{content:Z})})]},X),[Q,M,n,R,s,v]),O=c.useCallback((Y,Z,X)=>{var se,Te,Le;return r.jsxs("div",{style:{padding:`${v(L.top)} ${v(L.right)} ${v(L.bottom)} ${v(L.left)}`,width:v(b+f*2),height:"100%",borderRadius:v(w),border:`${v(f)} solid ${h}`,boxSizing:"border-box",position:"relative",overflow:"hidden"},children:[r.jsx("div",{className:`${s}-cover`,style:{background:T}}),r.jsxs("div",{className:`${s}-elements-overlay`,style:{alignItems:Q,textAlign:M},children:[Y.text&&F(we,Y.text,"text",X!=null&&X.dataMeasureAttrs?{dataMeasureKind:"text"}:typeof(X==null?void 0:X.textMinHeightPx)=="number"&&X.textMinHeightPx>0?{minHeightPx:X.textMinHeightPx}:void 0),r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:Q,width:"100%"},children:[r.jsx("div",{"data-controls":R&&!(X!=null&&X.dataMeasureAttrs)?"logoMarginTop":void 0,className:R&&!(X!=null&&X.dataMeasureAttrs)?`${s}-control`:void 0,style:{height:v(C)}}),r.jsx("div",{style:{width:v(m),height:v(z)},children:((se=Y.logo)==null?void 0:se.url)&&r.jsx("img",{src:Y.logo.url,alt:((Te=Y.logo)==null?void 0:Te.name)??"",style:{pointerEvents:"auto",width:"100%",height:"100%",objectFit:((Le=Y.logo)==null?void 0:Le.objectFit)||"contain"}})})]}),Y.caption&&F(ee,Y.caption,"caption",{...X!=null&&X.dataMeasureAttrs?{}:{controlsName:"captionMarginTop"},marginTop:j,...X!=null&&X.dataMeasureAttrs?{dataMeasureKind:"caption"}:typeof(X==null?void 0:X.captionMinHeightPx)=="number"&&X.captionMinHeightPx>0?{minHeightPx:X.captionMinHeightPx}:{}})]})]},Z)},[T,j,ee,b,w,z,C,m,Q,M,L.bottom,L.left,L.right,L.top,F,f,h,we,n,R,s]),ie=c.useCallback(Y=>{N(Y.maxTextPx),ye(Y.maxCaptionPx)},[]);c.useLayoutEffect(()=>{if(!y){ie({maxTextPx:0,maxCaptionPx:0});return}const Y=re.current;if(!Y)return;const Z=()=>{E.readTestimonialTextMeasure(Y,ie)};Z();const X=new ResizeObserver(Z);return X.observe(Y),()=>{X.disconnect()}},[y,ie,t,O]);const pe=y?{textMinHeightPx:U,captionMinHeightPx:oe}:void 0,le=y?r.jsx("div",{ref:re,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:(t??[]).map((Y,Z)=>O(Y,`measure-${Z}`,{dataMeasureAttrs:!0}))}):null,he=(Y,Z)=>r.jsxs("div",{style:{position:"relative",flex:"0 0 auto",height:"100%",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",willChange:"transform"},children:[O(Y,`card-${Z}`,pe),R&&r.jsx("div",{"data-controls":"gap","data-controls-axis":"x",style:{position:"absolute",top:0,right:`calc(-1 * ${v(I)})`,width:v(I),height:"100%",pointerEvents:"auto",zIndex:2}})]},Z);if(S){const Y=A?P&&te?"paused":"running":"paused";return r.jsxs("div",{ref:D,className:Ie(`${s}-wrapper`,`${s}-marquee-wrapper`),"aria-label":"Testimonials",style:{overflow:"hidden",width:"100%",...B>0?{height:B}:{}},children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:jo(s)}}),le,r.jsx("div",{ref:W,className:`${s}-marquee-track`,"data-direction":u,onMouseEnter:V,onMouseLeave:J,style:{display:"flex",flexDirection:"row",flexWrap:"nowrap",width:"max-content",willChange:"transform",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",transform:"translateZ(0)",WebkitTransform:"translateZ(0)",perspective:"1000px","--marquee-play-state":Y},children:Array.from({length:g},(Z,X)=>r.jsx("div",{ref:X===0?q:void 0,className:`${s}-marquee-set`,style:{display:"flex",flexDirection:"row",flex:"0 0 auto",gap:v(I),paddingRight:v(I)},"aria-hidden":X>0,children:t==null?void 0:t.map((se,Te)=>he(se,`${X}-${Te}`))},`set-${X}`))})]})}return r.jsxs("div",{className:`${s}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:jo(s)}}),le,r.jsx("div",{style:{gap:v(I),justifyContent:"center",overflowX:"auto",display:"flex",flexDirection:"row"},"aria-label":"Testimonials",children:t==null?void 0:t.map((Y,Z)=>he(Y,Z))})]})},zc=`import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2400
2400
|
import cn from 'classnames';
|
|
2401
2401
|
import { CommonComponentProps } from '../props';
|
|
2402
2402
|
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
@@ -3012,7 +3012,7 @@ type TestimonialsSettings = {
|
|
|
3012
3012
|
logoHeight: number;
|
|
3013
3013
|
captionMarginTop: number;
|
|
3014
3014
|
};
|
|
3015
|
-
`,
|
|
3015
|
+
`,Vo={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Kc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},speed:{type:"number",scope:"layout",title:"Speed",display:{type:"speed-control"},min:.5,max:8},direction:{type:"string",scope:"common",title:"Direction",display:{type:"direction-control"},enum:["left","right"]},pauseOnHover:{title:"Pause on hover",type:"string",scope:"common",display:{type:"toggle",enum:["on","off"]}},gap:{type:"number",scope:"layout",title:"Gap",min:0,max:200,display:{type:"range-control"}},align:{type:"string",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},cardWidth:{type:"number",scope:"layout",title:"width",min:0,max:400,display:{type:"numeric-input"}},corners:{type:"number",scope:"layout",title:"Corners",min:0,max:100,display:{type:"numeric-input"}},stroke:{type:"number",scope:"layout",title:"Stroke",min:0,max:10,display:{type:"numeric-input"}},strokeColor:{type:"string",scope:"common",title:"Stroke Card",display:{type:"palette-color-picker",visible:!0}},bgColor:{title:"BG card",type:"string",scope:"common",display:{type:"palette-color-picker"}},padding:{type:"object",scope:"layout",title:"Padding",display:{type:"padding-controls"}},logoMarginTop:{type:"number",scope:"layout",title:"Logo margin top",min:0,max:200,display:{type:"range-control"}},logoWidth:{type:"number",scope:"layout",title:"width",min:0,max:200,display:{type:"numeric-input"}},logoHeight:{type:"number",scope:"layout",title:"height",min:0,max:200,display:{type:"numeric-input"}},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"palette-color-picker"}},captionColor:{type:"string",scope:"common",title:"Fill Caption",display:{type:"palette-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...Vo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...Vo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}}},defaults:{autoplay:"on",direction:"left",pauseOnHover:"off",strokeColor:"#000000",bgColor:"rgba(255, 255, 255, 0.81)",textColor:"#000000",captionColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},align:"center",captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{speed:.55,gap:.04,cardWidth:.8,corners:.02,stroke:.001,padding:{top:.053,right:.026,bottom:.053,left:.026},logoMarginTop:.18,logoWidth:.21,logoHeight:.21,captionMarginTop:.056,textFontSize:.058,textLineHeight:.088,captionFontSize:.053,captionLineHeight:.069},d:{speed:1.64,gap:.02,cardWidth:.15,corners:.005,stroke:.001,padding:{top:.01,right:.01,bottom:.01,left:.01},logoMarginTop:.048,logoWidth:.055,logoHeight:.027,captionMarginTop:.005,textFontSize:.012,textLineHeight:.013,captionFontSize:.01,captionLineHeight:.01}},displayRules:[{if:{name:"stroke",value:0},then:{name:"properties.strokeColor.display.visible",value:!1}}],layout:["__componentName__","autoplay","speed","direction","pauseOnHover","gap","cardWidth","corners","stroke","strokeColor","bgColor","padding","logoMarginTop","logoWidth","logoHeight","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["align","direction"]},{type:"row",items:["speed","pauseOnHover"]},{type:"row",title:"Card",items:[{type:"group",title:"",items:["cardWidth","corners"]},{type:"group",title:"",items:["stroke","padding"]}]},{type:"row",title:"Image Container",items:["logoWidth","logoHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["bgColor","strokeColor","textColor","captionColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{logo:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{logo:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Gc={element:Vc,id:"testimonials",name:"Eliana",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Grid.mp4"},defaultSize:{d:{width:"100%",height:320}},schema:Kc,sourceCode:zc,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function qc(e){return`
|
|
3016
3016
|
.${e}-container {
|
|
3017
3017
|
position: relative;
|
|
3018
3018
|
overflow-x: clip;
|
|
@@ -3136,7 +3136,7 @@ type TestimonialsSettings = {
|
|
|
3136
3136
|
width: 100%;
|
|
3137
3137
|
height: 100%;
|
|
3138
3138
|
}
|
|
3139
|
-
`}const
|
|
3139
|
+
`}const Uc=({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a})=>{const{prefix:s}=E.useScopedStyles(),o=t||[],{autoplay:d,delay:l,align:u,width:p,imageMarginTop:I,textMarginTop:b,captionMarginTop:w,imageWidth:f,imageHeight:h,controlsWidth:T,controlsColor:L,controlsHoverColor:C}=e,m=d==="on"&&i,[z,j]=c.useState(0),[R,x]=c.useState(null),[A,S]=c.useState(!1),K=c.useRef(null),v=c.useMemo(()=>{switch(u){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[u]),D=c.useMemo(()=>{switch(u){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[u]);c.useEffect(()=>{j(0),x(null),S(!1)},[o.length]);const W=o[z],q=R===null?null:o[R],G=ee=>{var g,V,J,Q,M;return{fontSettings:{fontFamily:(e==null?void 0:e[`${ee}FontFamily`])??"Arial",fontWeight:((g=e==null?void 0:e[`${ee}FontSettings`])==null?void 0:g.fontWeight)??400,fontStyle:((V=e==null?void 0:e[`${ee}FontSettings`])==null?void 0:V.fontStyle)??"normal"},textAppearance:{textTransform:((J=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:J.textTransform)??"none",textDecoration:((Q=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:Q.textDecoration)??"none",fontVariant:((M=e==null?void 0:e[`${ee}TextAppearance`])==null?void 0:M.fontVariant)??"normal"},fontSize:(e==null?void 0:e[`${ee}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${ee}LineHeight`])??.01,letterSpacing:(e==null?void 0:e[`${ee}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${ee}WordSpacing`])??0,color:(e==null?void 0:e[`${ee}Color`])??"#000000"}},$=G("text"),H=G("caption"),_=o.length>1&&o.some(ee=>{var y,g;return(((y=ee.text)==null?void 0:y.length)??0)>0||(((g=ee.caption)==null?void 0:g.length)??0)>0}),B=c.useRef(null),[k,P]=c.useState(0),[te,ae]=c.useState(0),re=e.controls??{mode:"Off",icon:null},U=o.length>1,N=c.useCallback((ee,y)=>!U||y===ee?ee:(K.current&&window.clearTimeout(K.current),x(ee),S(!0),K.current=window.setTimeout(()=>{x(null),S(!1),K.current=null},300),y),[U]),oe=c.useCallback(()=>{U&&j(ee=>N(ee,(ee-1+o.length)%o.length))},[U,N,o.length]),ye=c.useCallback(()=>{U&&j(ee=>N(ee,(ee+1)%o.length))},[U,N,o.length]);c.useEffect(()=>{if(!m||!U)return;const ee=Math.max(300,Number.isFinite(l*1e3)?l*1e3:0),y=window.setInterval(()=>{j(g=>N(g,(g+1)%o.length))},ee);return()=>{window.clearInterval(y)}},[m,U,N,o.length,l]),c.useEffect(()=>()=>{K.current&&window.clearTimeout(K.current)},[]);const ce=(ee,y)=>{var M,F,O,ie;const g=y==null?void 0:y.textMinHeightPx,V=y==null?void 0:y.captionMinHeightPx,J=y==null?void 0:y.dataMeasureAttrs,Q=a&&!(y!=null&&y.dataMeasureAttrs)&&!(y!=null&&y.hideControls);return r.jsxs(r.Fragment,{children:[ee.text&&r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"textMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(b??0,n??!1)}}),r.jsx("div",{...J&&{"data-testimonial-measure":"text"},style:{...Ue($,n),...g&&g>0?{minHeight:g}:{},textAlign:D,pointerEvents:"auto"},children:r.jsx(sn,{content:ee.text})})]}),r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"imageMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(I??0,n??!1)}}),r.jsx("div",{style:{width:E.scalingValue(f??0,n??!1),height:E.scalingValue(h??0,n??!1)},children:((M=ee.image)==null?void 0:M.url)&&r.jsx("img",{src:(F=ee.image)==null?void 0:F.url,alt:((O=ee.image)==null?void 0:O.name)??"",className:`${s}-icon`,style:{objectFit:((ie=ee.image)==null?void 0:ie.objectFit)||"contain"}})})]}),ee.caption&&r.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:v,width:"100%"},children:[r.jsx("div",{"data-controls":Q?"captionMarginTop":void 0,className:Q?`${s}-control`:void 0,style:{height:E.scalingValue(w??0,n??!1)}}),r.jsx("div",{...J?{"data-testimonial-measure":"caption"}:{},style:{...Ue(H,n),...V&&V>0?{minHeight:V}:{},textAlign:D,pointerEvents:"auto"},children:r.jsx(sn,{content:ee.caption})})]})]})},ge=c.useCallback(ee=>{P(ee.maxTextPx),ae(ee.maxCaptionPx)},[]);if(c.useLayoutEffect(()=>{if(!_){ge({maxTextPx:0,maxCaptionPx:0});return}const ee=B.current;if(!ee)return;const y=()=>{E.readTestimonialTextMeasure(ee,ge)};y();const g=new ResizeObserver(y);return g.observe(ee),()=>{g.disconnect()}},[_,ge,t]),!W)return r.jsx(r.Fragment,{});const we=_?{textMinHeightPx:k,captionMinHeightPx:te}:void 0;return r.jsx(r.Fragment,{children:r.jsxs("div",{className:`${s}-container`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:qc(s)}}),r.jsxs("div",{className:`${s}-wrapper`,style:{width:E.scalingValue(p??0,n??!1),alignItems:v},children:[_&&r.jsx("div",{ref:B,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:o.map((ee,y)=>r.jsx("div",{style:{width:"100%"},children:ce(ee,{dataMeasureAttrs:!0})},y))}),r.jsxs("div",{className:`${s}-fade-stack`,children:[q&&A&&r.jsx("div",{className:Ie(`${s}-fade-item-prev`,`${s}-fade-out`),children:ce(q,{...we,hideControls:!0})}),r.jsx("div",{className:Ie(`${s}-fade-item-current`,A?`${s}-fade-in`:void 0),children:ce(W,we)})]})]}),re.mode==="On"&&r.jsxs("div",{className:`${s}-controls`,children:[r.jsx("div",{className:`${s}-arrow`,style:{width:E.scalingValue(T??.02,n??!1),height:E.scalingValue(T??.02,n??!1),"--arrow-hover-color":C},children:r.jsx("button",{type:"button",className:`${s}-arrow-inner`,onClick:oe,disabled:!U,"aria-label":"Previous testimonial",children:re.icon&&r.jsx(yt,{url:re.icon,fill:L,hoverFill:C,className:Ie(`${s}-arrow-img`,`${s}-mirror`)})})}),r.jsx("div",{className:Ie(`${s}-arrow`,`${s}-next-arrow`),style:{width:E.scalingValue(T??.02,n??!1),height:E.scalingValue(T??.02,n??!1),"--arrow-hover-color":C},children:r.jsx("button",{type:"button",className:`${s}-arrow-inner`,onClick:ye,disabled:!U,"aria-label":"Next testimonial",children:re.icon&&r.jsx(yt,{url:re.icon,fill:L,hoverFill:C,className:`${s}-arrow-img`})})})]})]})})},Xc=`import cn from 'classnames';
|
|
3140
3140
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3141
3141
|
import { CommonComponentProps } from '../props';
|
|
3142
3142
|
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
@@ -3631,11 +3631,11 @@ type TestimonialsSettings = {
|
|
|
3631
3631
|
icon?: string | null;
|
|
3632
3632
|
};
|
|
3633
3633
|
};
|
|
3634
|
-
`,
|
|
3634
|
+
`,Yc="data:image/svg+xml,"+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18" width="10" height="18"><path fill="#000000" fill-rule="evenodd" d="M-3.70710678,4.29289322 C-3.34662282,3.93240926 -2.77939176,3.90467972 -2.38710056,4.20970461 L-2.29289322,4.29289322 L5,11.585 L12.2928932,4.29289322 C12.6533772,3.93240926 13.2206082,3.90467972 13.6128994,4.20970461 L13.7071068,4.29289322 C14.0675907,4.65337718 14.0953203,5.22060824 13.7902954,5.61289944 L13.7071068,5.70710678 L5.70710678,13.7071068 C5.34662282,14.0675907 4.77939176,14.0953203 4.38710056,13.7902954 L4.29289322,13.7071068 L-3.70710678,5.70710678 C-4.09763107,5.31658249 -4.09763107,4.68341751 -3.70710678,4.29289322 Z" transform="translate(5, 9) rotate(-90) translate(-5, -9)"/></svg>'),zo={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Jc={type:"object",version:1,settings:{sizing:"auto manual",properties:{autoplay:{type:"string",scope:"common",title:"Autoplay",display:{type:"switch-control"},enum:["on","off"]},delay:{type:"number",scope:"layout",title:"Delay(s)",display:{type:"percentage-input"},step:1,min:1,max:8},align:{type:"string",scope:"common",title:"Alignment",display:{type:"align-group",direction:"horizontal"},enum:["start","center","end"]},width:{type:"number",scope:"layout",title:"width",min:0,max:1e3,display:{type:"numeric-input"}},imageWidth:{type:"number",scope:"layout",title:"width",min:0,max:300,display:{type:"numeric-input"}},imageHeight:{type:"number",scope:"layout",title:"height",min:0,max:300,display:{type:"numeric-input"}},imageMarginTop:{type:"number",scope:"layout",title:"Image margin top",min:0,max:200,display:{type:"range-control"}},textMarginTop:{type:"number",scope:"layout",title:"Text margin top",min:0,max:200,display:{type:"range-control"}},controls:{type:"object",scope:"common",title:"Controls",display:{type:"button-icon-switch"},properties:{mode:{type:"string",enum:["On","Off"]},icon:{type:["string","null"],title:"Icon",display:{type:"settings-image-input"}}}},controlsWidth:{type:"number",scope:"layout",title:"Controls width",min:0,max:100,display:{type:"numeric-input"}},controlsColor:{type:"string",scope:"common",title:"Fill Controls",display:{type:"settings-color-picker"}},controlsHoverColor:{type:"string",scope:"common",title:"Hover Controls",display:{type:"settings-color-picker"}},captionMarginTop:{type:"number",scope:"layout",title:"Caption margin top",min:0,max:200,display:{type:"range-control"}},captionFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},captionFontSettings:{...zo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},captionFontSize:{type:"number",scope:"layout",title:"Caption Font Size",display:{type:"font-size"}},captionLineHeight:{type:"number",scope:"layout",title:"Caption Line Height",display:{type:"line-height-input"}},captionLetterSpacing:{type:"number",scope:"layout",title:"Caption Letter Spacing",display:{type:"letter-spacing-input"}},captionWordSpacing:{type:"number",scope:"layout",title:"Caption Word Spacing",display:{type:"word-spacing-input"}},captionTextAppearance:{type:"object",scope:"layout",title:"Caption Text Appearance",display:{type:"text-appearance"}},captionColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Caption"},textFontFamily:{type:"string",scope:"common",title:"Font Family",display:{type:"font-family-select"}},textFontSettings:{...zo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}},textColor:{display:{type:"style-panel-color-picker"},type:"string",scope:"common",title:"Fill Text"}},defaults:{autoplay:"on",controls:{mode:"On",icon:Yc},controlsColor:"#000000",controlsHoverColor:"#EABC01",align:"center",textFontFamily:"Goudy Bookletter 1911",textFontSettings:{fontWeight:400,fontStyle:"normal"},textLetterSpacing:0,textWordSpacing:0,textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},textColor:"#000000",captionFontFamily:"Goudy Bookletter 1911",captionFontSettings:{fontWeight:400,fontStyle:"normal"},captionLetterSpacing:0,captionWordSpacing:0,captionTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},captionColor:"#000000"},layoutDefaults:{m:{delay:3,width:.69,imageMarginTop:.08,captionMarginTop:.04,textMarginTop:0,textFontSize:.069,captionFontSize:.053,textLineHeight:.093,captionLineHeight:.069,imageWidth:.21,imageHeight:.21,controlsWidth:.06},d:{delay:3,width:.35,imageMarginTop:.02,textMarginTop:0,captionMarginTop:.01,textFontSize:.016,captionFontSize:.009,textLineHeight:.018,captionLineHeight:.009,imageWidth:.027,imageHeight:.027,controlsWidth:.014}},displayRules:[{if:{name:"autoplay",value:"off"},then:{name:"properties.delay.display.enabled",value:!1}}],layout:["__componentName__","autoplay","delay","width","imageMarginTop","textMarginTop","captionMarginTop"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","autoplay"]},{type:"row",items:["width","align"]},{type:"row",items:["controls"]},{type:"row",items:["controlsWidth","delay"]},{type:"row",title:"Image Container",items:["imageWidth","imageHeight"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Text",items:["textFontFamily","textFontSettings",{type:"group",title:"",items:["text",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]},{type:"group",title:"Caption",items:["captionFontFamily","captionFontSettings",{type:"group",title:"",items:["caption",{type:"row",items:["captionFontSize","captionLineHeight","captionLetterSpacing","captionWordSpacing"]},"captionTextAppearance"]}]}]}],paletteBookmark:{items:["textColor","captionColor","controlsColor","controlsHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!1},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input"}},text:{placeholder:"Add Text...",label:"Text",display:{type:"rich-text"}},caption:{placeholder:"Add Caption...",label:"Caption",display:{type:"rich-text"}}}},default:[{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/julia.png",name:""},text:[{type:"paragraph",children:[{text:"This website is a great tool for designers and developers. The ease of creating animations here is mesmerizing. Bravo to the creators of this product!"}]}],caption:[{type:"paragraph",children:[{text:"Julia Smith,"}]},{type:"paragraph",children:[{text:"Freelance Designer"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/mark.png",name:""},text:[{type:"paragraph",children:[{text:"This is super cool. The on onboarding terminal style animation brings me back to what made the Internet simple and fun."}]}],caption:[{type:"paragraph",children:[{text:"Mark Travis,"}]},{type:"paragraph",children:[{text:"Architect @ United Architects"}]}]},{image:{objectFit:"contain",url:"https://cdn.cntrl.site/component-assets/pia.png",name:""},text:[{type:"paragraph",children:[{text:"Great tool for someone who wants to quickly and easily build a site that has fancy scrolling animations. Totally addictive!"}]}],caption:[{type:"paragraph",children:[{text:"Pia,"}]},{type:"paragraph",children:[{text:"Media Buyer"}]}]}]}},Zc={element:Uc,id:"testimonial-single",name:"Clara",category:"testimonials",version:1,preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Testimonials_Single.png"},defaultSize:{d:{width:700,height:300},t:{width:373,height:300},m:{width:334,height:300}},schema:Jc,sourceCode:Xc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.icon"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Qc(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function ed(e){return`
|
|
3635
3635
|
.${e}-wrapper {
|
|
3636
3636
|
display: grid;
|
|
3637
3637
|
align-items: start;
|
|
3638
|
-
min-height: ${
|
|
3638
|
+
min-height: ${Qc(48)};
|
|
3639
3639
|
}
|
|
3640
3640
|
.${e}-item {
|
|
3641
3641
|
display: flex;
|
|
@@ -3723,7 +3723,7 @@ type TestimonialsSettings = {
|
|
|
3723
3723
|
pointer-events: auto;
|
|
3724
3724
|
z-index: 10;
|
|
3725
3725
|
}
|
|
3726
|
-
`}const
|
|
3726
|
+
`}const At=500,Dt="cubic-bezier(0.22, 1, 0.36, 1)";function td({images:e,index:t,imageDisplay:n,originRect:i,reverseClose:a,onClose:s,onPrev:o,onNext:d,counterClassName:l,counterStyle:u}){const p=c.useRef(null),I=c.useRef(null),[b,w]=c.useState(null),[f,h]=c.useState(i?"opening":"open"),[T,L]=c.useState(!0),C=c.useRef(t),m=c.useCallback(()=>{const S=p.current,K=I.current;if(!S||!K)return;const v=S.getBoundingClientRect(),D=v.width,W=v.height,q=K.naturalWidth,G=K.naturalHeight;if(!D||!W||!q||!G)return;if(n==="Cover"){w({width:D,height:W,left:v.left,top:v.top});return}const $=q/G,H=D/W;if($>H){const _=D/$;w({width:D,height:_,left:v.left,top:v.top+(W-_)/2})}else{const _=W*$;w({width:_,height:W,left:v.left+(D-_)/2,top:v.top})}},[n]);c.useEffect(()=>{m();const S=p.current;if(!S)return;const K=new ResizeObserver(()=>m());return K.observe(S),()=>K.disconnect()},[m,t]),c.useEffect(()=>{if(f!=="opening"||!b)return;const S={id:0};return S.id=requestAnimationFrame(()=>{S.id=requestAnimationFrame(()=>h("open"))}),()=>cancelAnimationFrame(S.id)},[f,b]),c.useEffect(()=>{if(f!=="closing")return;const S=setTimeout(()=>s(),At);return()=>clearTimeout(S)},[f,s]),c.useEffect(()=>{C.current!==t&&L(!1),C.current=t},[t]);const z=()=>{f!=="closing"&&h("closing")},j=f==="open",R=f==="closing",x=R&&a&&!!i,A=f==="opening"?i??b:x?i:b;return r.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9997},onClick:z,children:[r.jsx("div",{style:{position:"absolute",inset:0,background:"rgba(28,31,34,0.9)",opacity:j?1:0,transition:`opacity ${At}ms ${Dt}`,pointerEvents:"none"}}),r.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},children:[r.jsx("div",{style:{height:"10%"}}),r.jsx("div",{style:{width:"70%",height:"80%",display:"flex",justifyContent:"center",alignItems:"center"},children:r.jsx("div",{ref:p,style:{width:"100%",height:"100%"}})}),r.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",height:"10%",opacity:j?1:0,transition:`opacity ${At}ms ${Dt}`},children:e.length>1&&r.jsxs("p",{className:l,style:u,children:[t+1," / ",e.length]})})]}),A&&r.jsx("img",{ref:I,src:e[t],onLoad:m,style:{position:"fixed",top:A.top,left:A.left,width:A.width,height:A.height,objectFit:n==="Cover"?"cover":"contain",opacity:R&&!x?0:1,transition:R&&!x?`opacity ${At}ms ${Dt}`:x||T?`top ${At}ms ${Dt}, left ${At}ms ${Dt}, width ${At}ms ${Dt}, height ${At}ms ${Dt}`:"none",pointerEvents:"none",zIndex:9998}}),j&&b&&r.jsxs(r.Fragment,{children:[r.jsx("div",{style:{position:"fixed",top:b.top,left:b.left,width:b.width/2,height:b.height,cursor:"w-resize",zIndex:9999},onClick:S=>{S.stopPropagation(),o()}}),r.jsx("div",{style:{position:"fixed",top:b.top,left:b.left+b.width/2,width:b.width/2,height:b.height,cursor:"e-resize",zIndex:9999},onClick:S=>{S.stopPropagation(),d()}})]})]})}function nd({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a,metadata:s,activeEvent:o,layoutId:d}){const{prefix:l}=E.useScopedStyles(),u=!!a,{type:p="A",gridLayout:I,textBoxWidth:b,verticalGap:w,entriesCount:f,lightbox:h,imageDisplay:T,slider:L,sliderTiming:C,direction:m,transition:z,titleMarginTop:j,subtitleMarginTop:R,titleColor:x,subtitleColor:A,lightboxCounterColor:S,titleFontFamily:K,titleFontSettings:v,titleFontSize:D,titleLineHeight:W,titleLetterSpacing:q,titleWordSpacing:G,titleTextAppearance:$,subtitleFontFamily:H,subtitleFontSettings:_,subtitleFontSize:B,subtitleLineHeight:k,subtitleLetterSpacing:P,subtitleWordSpacing:te,subtitleTextAppearance:ae,lightboxCounterFontFamily:re,lightboxCounterFontSettings:U,lightboxCounterFontSize:N,lightboxCounterLineHeight:oe,lightboxCounterLetterSpacing:ye,lightboxCounterWordSpacing:ce,lightboxCounterTextAppearance:ge}=e,we={fontSettings:{fontFamily:K,fontWeight:(v==null?void 0:v.fontWeight)??400,fontStyle:(v==null?void 0:v.fontStyle)??"normal"},fontSize:D??.01,lineHeight:W,letterSpacing:q??0,wordSpacing:G??0,textAppearance:$,color:x},y={...ft(Ue(we,n))},g={fontSettings:{fontFamily:H,fontWeight:(_==null?void 0:_.fontWeight)??400,fontStyle:(_==null?void 0:_.fontStyle)??"normal"},fontSize:B??.01,lineHeight:k,letterSpacing:P??0,wordSpacing:te??0,textAppearance:ae,color:A},J={...ft(Ue(g,n))},Q={fontSettings:{fontFamily:re,fontWeight:(U==null?void 0:U.fontWeight)??400,fontStyle:(U==null?void 0:U.fontStyle)??"normal"},fontSize:N??.01,lineHeight:oe,letterSpacing:ye??0,wordSpacing:ce??0,textAppearance:ge,color:S},F={...ft(Ue(Q,n))},O=E.buildColorVars(l,{titleColor:x,subtitleColor:A,lightboxCounterColor:S},id,od),pe=`${o&&o!=="default"?`${l}-state-${o}`:""}`.trim(),le=f===0?1/0:f,he=(t??[]).slice(0,le),Y=I.entryWidth??.2,Z=(T==null?void 0:T.display)==="Cover",X=(T==null?void 0:T.ratioValue)??"1:1",se=(T==null?void 0:T.reversed)??!1,[Te,Le]=X.split(":").map(Number),Oe=se?Le:Te,ve=se?Te:Le,ke=`${Oe} / ${ve}`,_e=Oe>=ve,Ae={objectFit:Z?"cover":"contain",...Z&&{aspectRatio:ke,width:_e?"100%":"auto",height:_e?"auto":"100%"}},[Ve,me]=c.useState("ltr"),[$e,Fe]=c.useState(0),Me=c.useRef(null);c.useEffect(()=>{const Re=Me.current;if(!Re)return;const Ze=new ResizeObserver(xe=>{Fe(Math.round(xe[0].contentRect.width))});return Ze.observe(Re),()=>Ze.disconnect()},[]);const Ye=(()=>{const Re={...O},Ze=Me.current?getComputedStyle(Me.current).getPropertyValue("--cntrl-article-width").trim():"";return Ze&&(Re["--cntrl-article-width"]=Ze),Re})(),[Be,fe]=c.useState(!1),[Xe,Je]=c.useState([]),[Ge,mt]=c.useState(0),[Bt,Pt]=c.useState(null),Ot=(Re,Ze,xe)=>{if(n&&!i||h==="Off")return;const je=Re.currentTarget.getBoundingClientRect();Pt({top:je.top,left:je.left,width:je.width,height:je.height}),Je(Ze),mt(xe),fe(!0)};return c.useEffect(()=>{if(!Be||h!=="On"||typeof document>"u")return;const Re=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=Re}},[Be,h]),r.jsxs(r.Fragment,{children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:ed(l)}}),r.jsx("div",{style:O,children:r.jsx("div",{ref:Me,className:`${l}-wrapper ${l}-type-${p} ${pe}`.trim(),style:{gridTemplateColumns:`repeat(${I.columnsCount}, minmax(0, 1fr))`,rowGap:E.scalingValue(w??0,n),columnGap:E.scalingValue(I.horizontalGap??0,n),width:E.scalingValue(I.wrapperWidth??0,n)},children:he.map((Re,Ze)=>{var xe,je;return r.jsx("div",{className:`${l}-item`.trim(),children:r.jsx("div",{className:a?`${l}-item-inner`:`${l}-item-inner-hidden`,style:{width:(b??0)>100?`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`:E.scalingValue(Y??0,n)},children:r.jsxs("a",{href:(((xe=Re.link)==null?void 0:xe.length)??0)>0&&h==="Off"?Re.link:void 0,target:"_blank",className:`${l}-item-image-link`,children:[r.jsx("div",{className:`${l}-item-image-wrapper`,style:{width:E.scalingValue(Y??0,n),height:E.scalingValue(Y??0,n)},children:(((je=Re.image)==null?void 0:je.length)??0)===0?null:L==="Off"?r.jsx("img",{src:Re.image[0].url,alt:Re.image[0].name,className:`${l}-item-image`.trim(),style:Ae,onClick:qe=>Ot(qe,Re.image.map(ze=>ze.url),0)}):r.jsx(co,{className:`${l}-item-slider`,options:{arrows:!1,pagination:!1,drag:!1,perPage:1,autoplay:!0,interval:C*1e3,width:"100%",height:"100%",speed:500,type:z==="Fade"?"fade":"loop",rewind:z==="Fade",pauseOnHover:!1,pauseOnFocus:!1,direction:z==="Fade"?"ltr":m!=="Random"?m==="Horizontal"?"ltr":"ttb":Ve},onMoved:qe=>{if(m!=="Random"||z==="Fade")return;const ze=Math.random()>.5?Math.random()>.5?"rtl":"ltr":Math.random()>.5?"btt":"ttb";me(ze),setTimeout(()=>{qe.refresh()},0)},children:Re.image.map((qe,ze)=>r.jsx(uo,{children:r.jsx("img",{src:qe.url,alt:qe.name,className:`${l}-item-image`.trim(),style:Ae,onClick:gt=>Ot(gt,Re.image.map(Hn=>Hn.url),ze)})},ze))},`${z}-${Y}-${m}-${C}-${$e}-${d}`)}),r.jsx("div",{"data-controls":"titleMarginTop",className:`${l}-control`,style:{height:E.scalingValue(j??0,n),width:E.scalingValue(Y*b/100,n)}}),r.jsx("p",{className:`${l}-item-title`.trim(),style:{width:`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`,...y},children:Re.title}),p==="B"&&u&&r.jsx("div",{"data-controls":"subtitleMarginTop",className:`${l}-control`,style:{height:E.scalingValue(R??0,n),width:E.scalingValue(Y*b/100,n)}}),p==="B"&&r.jsx("p",{className:`${l}-item-subtitle`.trim(),style:{width:`calc(${E.scalingValue(Y??0,n)} * (${b} / 100))`,...J},children:Re.subtitle})]})})},Ze)})})}),(!n||i)&&Be&&typeof document<"u"&&h==="On"&&In.createPortal(r.jsx("div",{style:Ye,"data-selection":"none",children:r.jsx(td,{images:Xe,index:Ge,imageDisplay:T.display,originRect:Bt,reverseClose:L==="Off",onClose:()=>fe(!1),onPrev:()=>mt(Re=>(Re-1+Xe.length)%Xe.length),onNext:()=>mt(Re=>(Re+1)%Xe.length),counterClassName:`${l}-lightbox-counter`.trim(),counterStyle:F})}),document.body)]})}const id={titleColor:"title-color",subtitleColor:"subtitle-color",lightboxCounterColor:"lightbox-counter-color"},od=["hover","focus","filled","success","error"],rd=`import { Splide, SplideSlide } from '@splidejs/react-splide';
|
|
3727
3727
|
import '@splidejs/react-splide/css/core';
|
|
3728
3728
|
import { CommonComponentProps } from '../props';
|
|
3729
3729
|
import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
|
|
@@ -4434,11 +4434,11 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
|
|
|
4434
4434
|
};
|
|
4435
4435
|
|
|
4436
4436
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
4437
|
-
`,Eo={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Xc=["titleColor","subtitleColor","lightboxCounterColor"],Zc={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",rules:[{if:{name:"type",value:"A"},then:{name:"subtitle",value:!1}}]},items:{type:"object",properties:{title:{type:"string",label:"Title",placeholder:"Add Title...",display:{type:"text-input"}},subtitle:{type:"string",label:"Subtitle",placeholder:"Add Subtitle...",display:{type:"text-input"}},image:{type:"object",label:"Image",display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:[{title:"Title 1",subtitle:"Subtitle 1",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Grid-1.png",objectFit:"cover"}],link:""},{title:"Title 2",subtitle:"Subtitle 2",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Grid-2.png",objectFit:"cover"}],link:""},{title:"Title 3",subtitle:"Subtitle 3",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Grid-3.png",objectFit:"cover"}],link:""}]},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B"]},gridLayout:{type:"grid-layout",scope:"layout",display:{type:"grid-layout"},gridParams:{type:"object",properties:{columnsCount:{type:"number",title:"Columns",min:1,max:4},wrapperWidth:{type:"number",title:"Width",min:0},entryWidth:{type:"number",title:"Entry",min:0},horizontalGap:{type:"number",title:"Gap",min:0}}}},textBoxWidth:{type:"number",scope:"layout",title:"Text Width (%)",display:{type:"percentage-input"},min:0},verticalGap:{type:"number",scope:"layout",title:"Vertical Gap",display:{type:"numeric-input"},min:0,max:1e3},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},lightbox:{type:"boolean",scope:"common",title:"Lightbox",display:{type:"toggle-cycle",enum:["On","Off"]}},imageDisplay:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}},slider:{type:"boolean",scope:"common",title:"Slider",display:{type:"toggle-cycle",enum:["On","Off"]}},sliderTiming:{type:"number",scope:"common",title:"Timing (Sec)",display:{type:"common-numeric-input"},min:1,max:10},direction:{type:"string",scope:"common",title:"Direction",display:{type:"toggle-cycle",enum:["Horizontal","Vertical","Random"],enabled:!0}},transition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["Fade","Slide"]}},titleMarginTop:{type:"number",scope:"layout",title:"Title margin top",min:0,max:100,display:{type:"range-control"}},subtitleMarginTop:{type:"number",scope:"layout",title:"Subtitle margin top",min:0,max:100,display:{type:"range-control"}},titleColor:{type:"string",scope:"common",title:"Title Color",display:{type:"palette-color-picker"}},subtitleColor:{type:"string",scope:"common",title:"Subtitle Color",display:{type:"palette-color-picker",visible:!1}},lightboxCounterColor:{type:"string",scope:"common",title:"Lightbox Counter Color",display:{type:"palette-color-picker"}},titleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},titleFontSettings:{...Eo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},titleFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},titleLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},titleLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},titleWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},titleTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},subtitleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},subtitleFontSettings:{...Eo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},subtitleFontSize:{type:"number",scope:"layout",title:"Subtitle Font Size",display:{type:"font-size"}},subtitleLineHeight:{type:"number",scope:"layout",title:"Subtitle Line Height",display:{type:"line-height-input"}},subtitleLetterSpacing:{type:"number",scope:"layout",title:"Subtitle Letter Spacing",display:{type:"letter-spacing-input"}},subtitleWordSpacing:{type:"number",scope:"layout",title:"Subtitle Word Spacing",display:{type:"word-spacing-input"}},subtitleTextAppearance:{type:"object",scope:"layout",title:"Subtitle Text Appearance",display:{type:"text-appearance"}},lightboxCounterFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},lightboxCounterFontSettings:{...Eo.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},lightboxCounterFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},lightboxCounterLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},lightboxCounterLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},lightboxCounterWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},lightboxCounterTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}}},defaults:{lightbox:"Off",imageDisplay:{display:"Fit",ratioValue:"16:9",reversed:!1},type:"A",slider:"Off",sliderTiming:5,direction:"Horizontal",transition:"Slide",titleColor:"#767676",subtitleColor:"#DEDDDD",lightboxCounterColor:"#DEDDDD",titleFontFamily:"Arial",titleFontSettings:{fontWeight:400,fontStyle:"normal"},titleLetterSpacing:0,titleWordSpacing:0,titleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},subtitleFontFamily:"Arial",subtitleFontSettings:{fontWeight:400,fontStyle:"normal"},subtitleLetterSpacing:0,subtitleWordSpacing:0,subtitleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},lightboxCounterFontFamily:"Arial",lightboxCounterFontSettings:{fontWeight:400,fontStyle:"normal"},lightboxCounterLetterSpacing:0,lightboxCounterWordSpacing:0,lightboxCounterTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.02,subtitleMarginTop:.02,titleStroke:.003,titleCorners:.192,subtitlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titleFontSize:.043,titleLineHeight:.043,subtitleFontSize:.0373,subtitleLineHeight:.0373,lightboxCounterFontSize:.0373,lightboxCounterLineHeight:.0373},d:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.008,subtitleMarginTop:.008,titleStroke:.001,titleCorners:.05,subtitlePadding:{top:.01,right:.01,bottom:.01,left:.01},titlePadding:{top:.01,right:.01,bottom:.01,left:.01},titleFontSize:.01,titleLineHeight:.01,subtitleFontSize:.01,subtitleLineHeight:.01,lightboxCounterFontSize:.01,lightboxCounterLineHeight:.01}},displayRules:[{if:{name:"transition",value:"Fade"},then:{name:"properties.direction.display.enabled",value:!1}},{if:{name:"type",value:"B"},then:{name:"properties.subtitleColor.display.visible",value:!0}}],layout:["__componentName__","name","type","gridLayout","textBoxWidth","verticalGap","entriesCount","lightbox","imageDisplay","slider","sliderTiming","direction","transition","transition","titleMarginTop","subtitleMarginTop"]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"Grid",items:[{type:"group",title:"",items:["gridLayout"]}]},{type:"row",title:"",items:["textBoxWidth","entriesCount"]},{type:"row",title:"",items:["verticalGap"]},{type:"row",title:"Image",items:["imageDisplay","lightbox"]},{type:"row",title:"Slider",items:[{type:"group",title:"",items:["slider","sliderTiming"]},{type:"group",title:"",items:["direction","transition"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Title",items:["titleFontFamily","titleFontSettings",{type:"row",items:["titleFontSize","titleLineHeight","titleLetterSpacing","titleWordSpacing"]},"titleTextAppearance"]},{type:"group",title:"Subtitle",items:["subtitleFontFamily","subtitleFontSettings",{type:"row",items:["subtitleFontSize","subtitleLineHeight","subtitleLetterSpacing","subtitleWordSpacing"]},"subtitleTextAppearance"]},{type:"group",title:"Lightbox Counter",items:["lightboxCounterFontFamily","lightboxCounterFontSettings",{type:"row",items:["lightboxCounterFontSize","lightboxCounterLineHeight","lightboxCounterLetterSpacing","lightboxCounterWordSpacing"]},"lightboxCounterTextAppearance"]}]}],paletteBookmark:{items:[...Xc],panelIds:["general","typeStyle"],stateItems:{default:["titleColor","subtitleColor","lightboxCounterColor"]}}},Jc={element:qc,id:"grid",name:"Neptune",category:"grids",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Neptune_Grid.png"},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:Zc,sourceCode:Yc};function Zn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Qc(e){return String(e??"").trim().length>0}function ed(e,t,n,o,r,a,i){const c=E.scalingValue(a,i),s=E.scalingValue(0,i),d=e===0,u=e===t-1&&!r;return{borderTopWidth:d&&n?c:s,borderBottomWidth:!u||o?c:s}}function td(e,t,n){const o=E.scalingValue(t,n),r=E.scalingValue(0,n);return{borderTopWidth:r,borderBottomWidth:e?o:r}}const Di=10;function nd(e){return`
|
|
4437
|
+
`,Ei={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},ad=["titleColor","subtitleColor","lightboxCounterColor"],sd={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",rules:[{if:{name:"type",value:"A"},then:{name:"subtitle",value:!1}}]},items:{type:"object",properties:{title:{type:"string",label:"Title",placeholder:"Add Title...",display:{type:"text-input"}},subtitle:{type:"string",label:"Subtitle",placeholder:"Add Subtitle...",display:{type:"text-input"}},image:{type:"object",label:"Image",display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:[{title:"Title 1",subtitle:"Subtitle 1",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",name:"Grid-1.png",objectFit:"cover"}],link:""},{title:"Title 2",subtitle:"Subtitle 2",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-2.png",name:"Grid-2.png",objectFit:"cover"}],link:""},{title:"Title 3",subtitle:"Subtitle 3",image:[{url:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-3.png",name:"Grid-3.png",objectFit:"cover"}],link:""}]},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"common",title:"",display:{type:"radio-group"},enum:["A","B"]},gridLayout:{type:"grid-layout",scope:"layout",display:{type:"grid-layout"},gridParams:{type:"object",properties:{columnsCount:{type:"number",title:"Columns",min:1,max:4},wrapperWidth:{type:"number",title:"Width",min:0},entryWidth:{type:"number",title:"Entry",min:0},horizontalGap:{type:"number",title:"Gap",min:0}}}},textBoxWidth:{type:"number",scope:"layout",title:"Text Width (%)",display:{type:"percentage-input"},min:0},verticalGap:{type:"number",scope:"layout",title:"Vertical Gap",display:{type:"numeric-input"},min:0,max:1e3},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},lightbox:{type:"boolean",scope:"common",title:"Lightbox",display:{type:"toggle-cycle",enum:["On","Off"]}},imageDisplay:{type:"object",scope:"common",title:"Display",display:{type:"image-ratio-control"},properties:{display:{type:"string",enum:["Fit","Cover"]},ratioValue:{type:"string",enum:["1:1","2:3","3:4","4:5","16:9"]},reversed:{type:"boolean"}}},slider:{type:"boolean",scope:"common",title:"Slider",display:{type:"toggle-cycle",enum:["On","Off"]}},sliderTiming:{type:"number",scope:"common",title:"Timing (Sec)",display:{type:"common-numeric-input"},min:1,max:10},direction:{type:"string",scope:"common",title:"Direction",display:{type:"toggle-cycle",enum:["Horizontal","Vertical","Random"],enabled:!0}},transition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["Fade","Slide"]}},titleMarginTop:{type:"number",scope:"layout",title:"Title margin top",min:0,max:100,display:{type:"range-control"}},subtitleMarginTop:{type:"number",scope:"layout",title:"Subtitle margin top",min:0,max:100,display:{type:"range-control"}},titleColor:{type:"string",scope:"common",title:"Title Color",display:{type:"palette-color-picker"}},subtitleColor:{type:"string",scope:"common",title:"Subtitle Color",display:{type:"palette-color-picker",visible:!1}},lightboxCounterColor:{type:"string",scope:"common",title:"Lightbox Counter Color",display:{type:"palette-color-picker"}},titleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},titleFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},titleFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},titleLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},titleLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},titleWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},titleTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}},subtitleFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},subtitleFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},subtitleFontSize:{type:"number",scope:"layout",title:"Subtitle Font Size",display:{type:"font-size"}},subtitleLineHeight:{type:"number",scope:"layout",title:"Subtitle Line Height",display:{type:"line-height-input"}},subtitleLetterSpacing:{type:"number",scope:"layout",title:"Subtitle Letter Spacing",display:{type:"letter-spacing-input"}},subtitleWordSpacing:{type:"number",scope:"layout",title:"Subtitle Word Spacing",display:{type:"word-spacing-input"}},subtitleTextAppearance:{type:"object",scope:"layout",title:"Subtitle Text Appearance",display:{type:"text-appearance"}},lightboxCounterFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},lightboxCounterFontSettings:{...Ei.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight"}},lightboxCounterFontSize:{type:"number",scope:"layout",title:"Input Font Size",display:{type:"font-size"}},lightboxCounterLineHeight:{type:"number",scope:"layout",title:"Input Line Height",display:{type:"line-height-input"}},lightboxCounterLetterSpacing:{type:"number",scope:"layout",title:"Input Letter Spacing",display:{type:"letter-spacing-input"}},lightboxCounterWordSpacing:{type:"number",scope:"layout",title:"Input Word Spacing",display:{type:"word-spacing-input"}},lightboxCounterTextAppearance:{type:"object",scope:"layout",title:"Input Text Appearance",display:{type:"text-appearance"}}},defaults:{lightbox:"Off",imageDisplay:{display:"Fit",ratioValue:"16:9",reversed:!1},type:"A",slider:"Off",sliderTiming:5,direction:"Horizontal",transition:"Slide",titleColor:"#767676",subtitleColor:"#DEDDDD",lightboxCounterColor:"#DEDDDD",titleFontFamily:"Arial",titleFontSettings:{fontWeight:400,fontStyle:"normal"},titleLetterSpacing:0,titleWordSpacing:0,titleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},subtitleFontFamily:"Arial",subtitleFontSettings:{fontWeight:400,fontStyle:"normal"},subtitleLetterSpacing:0,subtitleWordSpacing:0,subtitleTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},lightboxCounterFontFamily:"Arial",lightboxCounterFontSettings:{fontWeight:400,fontStyle:"normal"},lightboxCounterLetterSpacing:0,lightboxCounterWordSpacing:0,lightboxCounterTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.02,subtitleMarginTop:.02,titleStroke:.003,titleCorners:.192,subtitlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titlePadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},titleFontSize:.043,titleLineHeight:.043,subtitleFontSize:.0373,subtitleLineHeight:.0373,lightboxCounterFontSize:.0373,lightboxCounterLineHeight:.0373},d:{gridLayout:{entryWidth:.2,horizontalGap:.05,wrapperWidth:1,columnsCount:2,lockedParam:null},textBoxWidth:100,verticalGap:.0083,entriesCount:0,titleMarginTop:.008,subtitleMarginTop:.008,titleStroke:.001,titleCorners:.05,subtitlePadding:{top:.01,right:.01,bottom:.01,left:.01},titlePadding:{top:.01,right:.01,bottom:.01,left:.01},titleFontSize:.01,titleLineHeight:.01,subtitleFontSize:.01,subtitleLineHeight:.01,lightboxCounterFontSize:.01,lightboxCounterLineHeight:.01}},displayRules:[{if:{name:"transition",value:"Fade"},then:{name:"properties.direction.display.enabled",value:!1}},{if:{name:"type",value:"B"},then:{name:"properties.subtitleColor.display.visible",value:!0}}],layout:["__componentName__","name","type","gridLayout","textBoxWidth","verticalGap","entriesCount","lightbox","imageDisplay","slider","sliderTiming","direction","transition","transition","titleMarginTop","subtitleMarginTop"]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"Grid",items:[{type:"group",title:"",items:["gridLayout"]}]},{type:"row",title:"",items:["textBoxWidth","entriesCount"]},{type:"row",title:"",items:["verticalGap"]},{type:"row",title:"Image",items:["imageDisplay","lightbox"]},{type:"row",title:"Slider",items:[{type:"group",title:"",items:["slider","sliderTiming"]},{type:"group",title:"",items:["direction","transition"]}]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[{type:"group",title:"Title",items:["titleFontFamily","titleFontSettings",{type:"row",items:["titleFontSize","titleLineHeight","titleLetterSpacing","titleWordSpacing"]},"titleTextAppearance"]},{type:"group",title:"Subtitle",items:["subtitleFontFamily","subtitleFontSettings",{type:"row",items:["subtitleFontSize","subtitleLineHeight","subtitleLetterSpacing","subtitleWordSpacing"]},"subtitleTextAppearance"]},{type:"group",title:"Lightbox Counter",items:["lightboxCounterFontFamily","lightboxCounterFontSettings",{type:"row",items:["lightboxCounterFontSize","lightboxCounterLineHeight","lightboxCounterLetterSpacing","lightboxCounterWordSpacing"]},"lightboxCounterTextAppearance"]}]}],paletteBookmark:{items:[...ad],panelIds:["general","typeStyle"],stateItems:{default:["titleColor","subtitleColor","lightboxCounterColor"]}}},ld={element:nd,id:"grid",name:"Neptune",category:"grids",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Neptune_Grid.png"},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:sd,sourceCode:rd};function Qn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function cd(e){return String(e??"").trim().length>0}function dd(e,t,n,i,a,s,o){const d=E.scalingValue(s,o),l=E.scalingValue(0,o),u=e===0,p=e===t-1&&!a;return{borderTopWidth:u&&n?d:l,borderBottomWidth:!p||i?d:l}}function ud(e,t,n){const i=E.scalingValue(t,n),a=E.scalingValue(0,n);return{borderTopWidth:a,borderBottomWidth:e?i:a}}const Ko=10;function pd(e){return`
|
|
4438
4438
|
.${e}-wrapper {
|
|
4439
4439
|
display: grid;
|
|
4440
4440
|
align-items: start;
|
|
4441
|
-
min-height: ${
|
|
4441
|
+
min-height: ${Qn(48)};
|
|
4442
4442
|
position: relative;
|
|
4443
4443
|
overflow: visible;
|
|
4444
4444
|
box-sizing: border-box;
|
|
@@ -4560,7 +4560,7 @@ a.${e}-list-item {
|
|
|
4560
4560
|
flex-shrink: 0;
|
|
4561
4561
|
overflow: visible;
|
|
4562
4562
|
box-sizing: border-box;
|
|
4563
|
-
min-width: ${
|
|
4563
|
+
min-width: ${Qn(50)};
|
|
4564
4564
|
position: relative;
|
|
4565
4565
|
display: flex;
|
|
4566
4566
|
align-items: flex-start;
|
|
@@ -4568,7 +4568,7 @@ a.${e}-list-item {
|
|
|
4568
4568
|
|
|
4569
4569
|
.${e}-list-col-last {
|
|
4570
4570
|
flex: 1 1 auto;
|
|
4571
|
-
min-width: ${
|
|
4571
|
+
min-width: ${Qn(50)};
|
|
4572
4572
|
}
|
|
4573
4573
|
|
|
4574
4574
|
.${e}-list-col-title {
|
|
@@ -4799,7 +4799,7 @@ a.${e}-list-item {
|
|
|
4799
4799
|
overflow-wrap: anywhere;
|
|
4800
4800
|
word-break: break-word;
|
|
4801
4801
|
}
|
|
4802
|
-
`}const Wt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],ci=["AColumn","BColumn","CColumn","DColumn","EColumn"],St="cutLabel",bo=[...ci,St],di=["A","B","C","D","E"];function Nr(e){return`${e}ColumnVerticalAlign`}const Oo=["Top","Center","Bottom"];function od(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function id(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return di.includes(n)?n:null}function Hr(e,t,n){const o=id(e);return o?o===t?!1:od(n[Nr(o)]):!0}function $n(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return di.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function rd(e,t,n){if(Br(e,t,n))return $n(e);const o=$n(e);return o.kind==="baseline"?{kind:"top"}:o}function ad(e){const t=$n(e);return t.kind==="baseline"?{kind:"top"}:t}function Br(e,t,n){return Hr(e,n,t)?$n(e).kind==="baseline":!1}function sd(e){const t={};let n=!1;for(const o of di){const r=Nr(o),a=e[r];if(e.type==="B"){const i=String(a??"Top").trim();i!=="Top"&&i!=="Center"&&i!=="Bottom"&&(t[r]="Top",n=!0);continue}Hr(a,o,e)||(t[r]="Top",n=!0)}return n?t:null}function ld(e){return e==="center"?{flex:"0 0 auto",marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{flex:"0 0 auto",marginTop:"auto"}:{}}function cd(e){const t=$n(e).kind;return t==="baseline"?"center":t}function dd(e){return e==="right"?"flex-end":e==="center"?"center":"flex-start"}function ji(e){return e==="center"?"center":e==="bottom"?"flex-end":"flex-start"}function ud(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:o}=e.getBoundingClientRect(),{bottom:r}=n.getBoundingClientRect(),a=r-o;return n.remove(),a}function Po(e,t,n,o){const r=e.titleEl;if(!r)return 0;const a=r.closest(`.${n}`);if(!a)return 0;const i=ud(r,o);if(e.kind==="baseline")return r.getBoundingClientRect().top-t+i;const c=a.getBoundingClientRect(),s=r.getBoundingClientRect().height;let d=0;return e.kind==="center"?d=(c.height-s)/2:e.kind==="bottom"&&(d=c.height-s),c.top-t+d+i}function pd(e,t,n){const o=e.getBoundingClientRect().height;return o<=0?0:(t.forEach(r=>{const a=r.querySelector(`.${n}`);a&&(a.style.minHeight=`${o}px`,a.style.height=`${o}px`)}),e.offsetHeight,o)}function md(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const gd={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"};function Le(e,t){return`${e}${t.replace(/^text/,"Text")}`}const hd={AColumn:"A",BColumn:"B",CColumn:"C",DColumn:"D",EColumn:"E",cutLabel:"CUT"};function fd(e){return[Le(e,"textFontFamily"),Le(e,"textFontSettings"),{type:"row",items:[Le(e,"textFontSize"),Le(e,"textLineHeight"),Le(e,"textLetterSpacing"),Le(e,"textWordSpacing")]},Le(e,"textTextAlign"),Le(e,"textTextAppearance"),`${e}VerticalAlign`]}function yd(){return{type:"tab",id:"listColumnTextStyle",tabs:Object.fromEntries(bo.map(e=>[hd[e],fd(e)]))}}function ro(e,t){const n=o=>{const r=Le(t,o);return e[r]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAlign:n("textTextAlign")??(t===St?"center":"left"),textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function zi(e,t){var o,r;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((o=e.textFontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((r=e.textFontSettings)==null?void 0:r.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAlign:e.textTextAlign,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return mt(Ge(n,t))}function Ki(e,t,n,o){const r=ro(e,t),a=r.textFontSize??.01,i=r.textLineHeight;return i!==void 0&&i<a?`${n} ${o}`:n}function qi(e,t,n,o){const r=ro(e,t),a=r.textFontSize??.01,i=r.textLineHeight;return i===void 0||i>=a?{}:{[`--${n}-title-leading-gap`]:E.scalingValue((a-i)/2,o)}}const it=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],rn=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],an=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],sn=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],vd={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},bd=["hover","focus","filled","success","error"],Ui=.004,Zt=.004,_o=Zt,Gi=12,ui=50,Tn=1440,Ln=ui/Tn;function Or(e){const t=typeof e=="number"&&e>0?e:Tn;return ui/t}function xd(e,t){const n={position:"absolute",width:Gi,height:Gi,pointerEvents:"auto"};return t==="left-y"?{...n,left:20,top:"50%",transform:"translateY(-50%)"}:t==="center-x"?{...n,left:"50%",top:`var(--${e}-first-entry-handle-top, 50%)`,transform:"translate(-50%, -50%)"}:{...n,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}function yt({P:e,className:t,areaStyle:n,hitPlacement:o,...r}){return l.jsx("div",{className:t,style:{...n,pointerEvents:"none"},...r,children:l.jsx("div",{style:xd(e,o)})})}function Cd(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const r=parseFloat(n);if(Number.isFinite(r)&&r>0)return r}const o=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(o){const r=parseFloat(o);if(Number.isFinite(r)&&r>0)return r}t=t.parentElement}return Tn}const Vr={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function Jn(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function Sd(e,t=1){const n=t/e;return Object.fromEntries(it.map(o=>[o,n]))}function wd(){return Object.fromEntries([...rn.map(e=>[e,0]),...an.map(e=>[e,0])])}function $d(){return Object.fromEntries(sn.map(e=>[e,0]))}function Kn(e){return Object.fromEntries(it.map(t=>[t,typeof e[t]=="number"?e[t]:Vr[t]]))}function Dr(e,t,n){const o=e-Ln,r=t+n;if(r<=0||r<=o)return{paddingLeft:t,paddingRight:n};if(o<=0)return{paddingLeft:0,paddingRight:0};const a=o/r;return{paddingLeft:t*a,paddingRight:n*a}}function Qn(e,t,n){const o=pi(e,t,n);if(e<=0)return[];const r=o.slice(0,e-1).reduce((a,i)=>a+i,0);return[...o.slice(0,e-1),Math.max(0,t-r)]}function Td(e,t,n){const o={};for(let r=0;r<e;r+=1){const a=rn[r],i=an[r],c=typeof n[a]=="number"?n[a]:0,s=typeof n[i]=="number"?n[i]:0,d=Dr(t[r]??0,c,s);d.paddingLeft!==c&&(o[a]=d.paddingLeft),d.paddingRight!==s&&(o[i]=d.paddingRight)}return o}function pi(e,t,n){if(e<=0)return[];const o=it.slice(0,e).map(d=>n[d]);if(e===1)return o;const r=o.slice(0,e-1),i=r.reduce((d,u)=>d+u,0)+Ln;if(t>=i)return o;const c=[...r];let s=i-t;for(let d=c.length-1;d>=0&&s>0;d-=1){const u=c[d]-Ln;if(u<=0)continue;const P=Math.min(s,u);c[d]-=P,s-=P}return[...c,o[e-1]]}function Ld(e,t,n){if(e<=1)return{};const o=pi(e,t,n),r={};for(let a=0;a<e-1;a+=1){const i=it[a];o[a]!==n[i]&&(r[i]=o[a])}return r}function Yi(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...Wt]}function Ed(e,t){return e.length!==t.length?!1:e.every((n,o)=>n===t[o])}function Pd(e,t,n,o){const r=Math.min(o,e.length,it.length),a={};for(let i=0;i<r;i+=1){const c=e[i],s=t.indexOf(c);if(s===-1)continue;const d=it[s],u=rn[s],P=an[s],v=sn[s],x=it[i],h=rn[i],g=an[i],T=sn[i],L=n[d],b=n[u],m=n[P],H=n[v];typeof L=="number"&&(a[x]=L),typeof b=="number"&&(a[h]=b),typeof m=="number"&&(a[g]=m),typeof H=="number"&&(a[T]=H)}return a}function _d(e,t,n){const o=sd(e);o&&(e={...e,...o});const r=Or(n==null?void 0:n.designWidth),a=e.columns,i=t.columns,c=Jn(e),s=Jn(t),d=e.type==="B"||e.type===void 0&&t.type==="B",u=typeof a=="number"?a:typeof i=="number"?i:Wt.length,P=m=>{if(d)return m;const H=Kn({...t,...m}),F=Jn(m),_=Qn(u,F,H),C=Td(u,_,{...t,...m});return Object.keys(C).length===0?m:{...m,...C}};if(typeof a=="number"&&a!==i){const m={...e,...Sd(a,c),...wd()};if(d)for(const H of sn)typeof t[H]=="number"&&(m[H]=t[H]);else Object.assign(m,$d());return m}const v=Yi(e),x=Yi(t);if(!Ed(v,x))return P({...e,...Pd(v,x,t,u)});if(c<s&&typeof u=="number"&&!d){const m=Kn({...t,...e});return P({...e,...Ld(u,c,m)})}if(d){const m=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,H=Math.max(0,(c-r)/2);return m>H?{...e,textPaddingLR:H}:e}const h=Kn({...t,...e}),g=Qn(u,s,Kn(t)),L=Qn(u,c,h).some((m,H)=>m<(g[H]??m)),b=it.some(m=>{const H=e[m],F=t[m];return typeof H=="number"&&typeof F=="number"&&H!==F});return L||b?P(e):e}function Ad(e,t,n,o){const r=t.slice(0,e).reduce((i,c)=>i+c,0),a=n.slice(e+1,t.length-1).reduce((i,c)=>i+c,0);return Math.max(Ln,o-r-a-Ln)}function Rd(e,t){return Math.random()*(t-e)+e}function Wd(e){return Object.fromEntries(it.map(t=>[t,typeof e[t]=="number"?e[t]:Vr[t]]))}function Ao(e,t,n=0){return Object.fromEntries(t.map(o=>[o,typeof e[o]=="number"?e[o]:n]))}function Id(e,t,n,o,r,a){return e.slice(0,t).map((i,c)=>{const s=rn[c],d=an[c],u=sn[c];return{key:i,textPrefix:gd[i],widthKey:it[c],width:n[it[c]],paddingLeftKey:s,paddingRightKey:d,paddingBottomKey:u,paddingLeft:o[s],paddingRight:r[d],paddingBottom:a[u]}})}function kd({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:r,activeEvent:a,layoutId:i,onUpdateSettings:c}){const{prefix:s}=E.useScopedStyles(),d=!!r,{columns:u,type:P,wrapperWidth:v,entriesCount:x,cellMinHeight:h,dividerWidth:g,showVisibility:T,cut:L,showCut:b,cutCellMinHeight:m,cutLabel:H,imageSize:F,imageOnHover:_,entryHoverEffect:C,rowPaddingTop:W,rowPaddingBottom:w,rowPaddingTopB:O,columnsOrder:S,textPaddingLR:V,textColor:D,backgroundColor:Z,dividerColor:q,textHoverColor:$,backgroundHoverColor:k,dividerHoverColor:R}=e,[B,I]=p.useState(void 0),[A,Q]=p.useState(null),ie=_==="On"&&(!n||o),re=(L??0)>0,U=P==="B",M=p.useRef(null),oe=p.useRef(null),[Ce,ue]=p.useState(null),[fe,Re]=p.useState(Tn),ne=Or(fe),y=Math.max(0,((v??0)-ne)/2),f=Math.min(V??0,y),N=Math.max(f,Zt),K=((v??0)+ne)/2;p.useLayoutEffect(()=>{if(!n){Re(Tn);return}const se=()=>{Re(Cd(M.current))};se();const pe=M.current;if(!pe)return;const ge=new ResizeObserver(se);ge.observe(pe);let _e=pe;for(;_e&&!_e.style.getPropertyValue("--cntrl-article-width");)_e=_e.parentElement;return _e&&ge.observe(_e),()=>ge.disconnect()},[n,i]),p.useEffect(()=>{I(void 0)},[L,b,t,x]);const G=E.buildColorVars(s,{textColor:D,backgroundColor:Z,dividerColor:q,textHoverColor:$,backgroundHoverColor:k,dividerHoverColor:R},vd,bd),ee=a&&a!=="default"?`${s}-state-${a}`:"",X=`${C==="Default"?`${s}-entry-hover-default`:C==="Blinds"?`${s}-entry-hover-blinds`:""} ${ee}`.trim(),ce=(T==null?void 0:T[0])??!1,ve=(T==null?void 0:T[1])??!1,de=p.useRef(e),xe=p.useRef(i);p.useEffect(()=>{if(!c||!n){de.current=e,xe.current=i;return}if(xe.current!==i){de.current=e,xe.current=i;return}const se=de.current;if(!(se!==e))return;const ge=_d(e,se,{designWidth:fe});de.current=e,ge!==e&&c(ge)},[e,c,n,i,fe]);const z=p.useMemo(()=>Wd(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Y=p.useMemo(()=>Ao(e,rn),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),j=p.useMemo(()=>Ao(e,an),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),le=p.useMemo(()=>Ao(e,sn),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),we=p.useMemo(()=>Array.isArray(S)&&S.length>0?S:[...Wt],[S]),Se=p.useMemo(()=>Id(we,u,z,Y,j,le),[we,u,z,Y,j,le]),Ne=Jn(e),ye=p.useMemo(()=>it.slice(0,u).map(se=>z[se]),[u,z]),He=p.useMemo(()=>pi(u,Ne,z),[u,Ne,z]),ke=p.useMemo(()=>Qn(u,Ne,z),[u,Ne,z]),We=p.useMemo(()=>Se.map((se,pe)=>Dr(ke[pe]??0,se.paddingLeft,se.paddingRight)),[Se,ke]),Oe=p.useMemo(()=>{const se=x===0?1/0:x;return(t??[]).slice(0,se).map((ge,_e)=>({id:_e,cells:Object.fromEntries(Wt.map(qe=>[qe,ge[qe]??""])),image:ge.image,link:ge.link}))},[t,x]),Ye=re?B??L:Oe.length,ct=p.useMemo(()=>re?Oe.slice(0,Ye):Oe,[Oe,re,Ye]),Tt=re&&Ye<Oe.length,Ze=ct.length>1||Tt,qt=[ce?`${s}-divider-top`:"",ve||Ze?`${s}-divider-bottom`:""].filter(Boolean).join(" "),dt=()=>{const se=B??L;if(!b){I(Oe.length);return}I(Math.min(se+b,Oe.length))},be=se=>E.scalingValue(se,n??!1),Je=U?O??0:W??0,Qe=w??0,et=h??0,Mt=(Je+et+Qe)/2,Fn=Math.max(Qe,_o),pn=Ce!=null?`${Ce/2}px`:be(Mt),Nt=U?"rowPaddingTopB":"rowPaddingTop",Ee=Se[0],De=Se[Se.length-1],me=We[0],Ie=We[We.length-1],Ve=Ee&&me?Math.max(me.paddingLeft,Zt):0,Me=De&&Ie?Math.max(Ie.paddingRight,Zt):0,ut=Ne,Mn=se=>{const pe=M.current;if(!pe)return{x:0,y:0};const ge=pe.getBoundingClientRect();return{x:se.clientX-ge.left+Di,y:se.clientY-ge.top+Di}},zr=(se,pe)=>{if(!ie)return;const ge=se.image;if(!(ge!=null&&ge.url)){Q(null);return}const{x:_e,y:qe}=Mn(pe),tt=(F==null?void 0:F.min)??80,$e=(F==null?void 0:F.max)??320,je=(A==null?void 0:A.rowId)===se.id?A.widthPx:Rd(tt,$e);Q({rowId:se.id,url:ge.url,objectFit:ge.objectFit??"cover",widthPx:je,x:_e,y:qe})},Kr=se=>{if(!ie||!A)return;const{x:pe,y:ge}=Mn(se);Q(_e=>!_e||_e.x===pe&&_e.y===ge?_e:{..._e,x:pe,y:ge})},qr=()=>{Q(null)},Ur=()=>{ie&&Q(null)};p.useLayoutEffect(()=>{if(!d||U){ue(null);return}const se=oe.current;if(!se){ue(null);return}const pe=()=>{ue(se.getBoundingClientRect().height)};pe();const ge=new ResizeObserver(pe);return ge.observe(se),()=>ge.disconnect()},[d,U,ct,Je,Qe,et,t,e,Se,ke,fe]);const mi=p.useMemo(()=>!U&&ci.some(se=>{const pe=se.charAt(0),ge=e[`${se}VerticalAlign`];return Br(ge,e,pe)}),[U,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return p.useLayoutEffect(()=>{var tt;const se=M.current;if(!se)return;const pe=()=>{se.querySelectorAll("[data-list-col]").forEach($e=>{$e.style.transform="";const je=$e.querySelector(`.${s}-list-col`);je&&(je.style.minHeight="",je.style.height="");const pt=$e.querySelector(`.${s}-list-col-title`);pt&&(pt.style.transform="")})};if(U||!mi){pe();return}const ge=()=>{se.querySelectorAll("[data-list-row]").forEach($e=>{const je=Array.from($e.querySelectorAll("[data-list-col]"));je.forEach(Pe=>{Pe.style.transform="";const Xe=Pe.querySelector(`.${s}-list-col`);Xe&&(Xe.style.minHeight="",Xe.style.height="");const ze=Pe.querySelector(`.${s}-list-col-title`);ze&&(ze.style.transform="")}),pd($e,je,`${s}-list-col`),$e.offsetHeight;const pt=$e.getBoundingClientRect().top,Lt=`${s}-baseline-probe`,Ut=new Map,Nn=je.map(Pe=>{const Xe=Pe.querySelector(`.${s}-list-col-title`),ze={el:Pe,titleEl:Xe,letter:Pe.getAttribute("data-col-letter")??"",kind:Pe.getAttribute("data-valign")??"top",anchor:Pe.getAttribute("data-valign-anchor")};return Ut.set(ze.letter,ze),ze}),mn=new Map,Hn=(Pe,Xe)=>{const ze=mn.get(Pe.letter);if(ze!==void 0)return ze;const Bn=Pe.anchor?Ut.get(Pe.anchor):void 0;if(Pe.kind!=="baseline"||!Bn||Xe.has(Pe.letter)){const hi=Po(Pe,pt,`${s}-list-col`,Lt);return mn.set(Pe.letter,hi),hi}Xe.add(Pe.letter);const Gr=Hn(Bn,Xe);Xe.delete(Pe.letter);const Yr=Po(Pe,pt,`${s}-list-col`,Lt),Xr=Gr-Yr;md(Pe.titleEl,Xr);const gi=Po(Pe,pt,`${s}-list-col`,Lt);return mn.set(Pe.letter,gi),gi};Nn.forEach(Pe=>Hn(Pe,new Set))})};ge();const _e=new ResizeObserver(()=>ge());_e.observe(se);let qe=!1;return typeof document<"u"&&((tt=document.fonts)!=null&&tt.ready)&&document.fonts.ready.then(()=>{qe||ge()}),()=>{qe=!0,_e.disconnect(),pe()}},[mi,U,e,t,fe,ct,ke]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:nd(s)}}),l.jsx("div",{style:G,children:l.jsxs("div",{ref:M,className:`${s}-wrapper ${X}${qt?` ${qt}`:""}${U?` ${s}-type-b`:""}`.trim(),style:{width:E.scalingValue(v??0,n),...!U&&d?{[`--${s}-first-entry-handle-top`]:pn}:{}},onMouseMove:ie?Kr:void 0,onMouseLeave:ie?qr:void 0,children:[l.jsxs("div",{style:{width:"100%"},children:[ct.map((se,pe)=>{var tt;const ge=(((tt=se.link)==null?void 0:tt.length)??0)>0,_e=ge?"a":"div",qe=ed(pe,ct.length,ce,ve,Tt,g??0,n??!1);return l.jsxs(_e,{ref:pe===0?$e=>{oe.current=$e}:void 0,className:`${s}-list-item${ge?` ${s}-list-item-has-link`:""}`,...ge?{href:se.link,target:"_blank"}:{},style:qe,onMouseEnter:ie?$e=>zr(se,$e):void 0,children:[Je>0&&l.jsx("div",{className:`${s}-row-padding-handle`,style:{height:be(Je)}}),l.jsxs("div",{className:`${s}-list-cols-row${U?"":` ${s}-list-cols-row-h`}${d&&pe===0&&U?` ${s}-list-cols-row-controls`:""}`,...U?{}:{"data-list-row":""},style:U?void 0:{minHeight:be(et)},children:[Se.map(($e,je)=>{const pt=je===Se.length-1,Lt=We[je],Ut=$e.paddingBottom,Nn=Qc(se.cells[$e.key]),mn=U&&Nn&&Ut>0,Hn=U?{minHeight:be(et)}:{width:be(ke[je])},Pe=U?{paddingLeft:be(f),paddingRight:be(f)}:{paddingLeft:be(Lt.paddingLeft),paddingRight:be(Lt.paddingRight)},Xe=$e.textPrefix.charAt(0),ze=U?ad(e[`${$e.textPrefix}VerticalAlign`]):rd(e[`${$e.textPrefix}VerticalAlign`],e,Xe),Bn=U&&Nn&&d&&pe===0;return l.jsxs("div",{className:U?`${s}-list-col-wrap`:void 0,...U?{}:{"data-list-col":"","data-col-letter":Xe,"data-valign":ze.kind,...ze.kind==="baseline"?{"data-valign-anchor":ze.anchorLetter}:{}},children:[l.jsx("div",{className:`${s}-list-col${pt?` ${s}-list-col-last`:""}`,style:{...Pe,...Hn,...U?{justifyContent:ji(ze.kind)}:{}},"data-test":$e.width,children:l.jsx("span",{className:Ki(e,$e.textPrefix,`${s}-list-col-title`,`${s}-text-tight-leading`),style:{...zi(ro(e,$e.textPrefix),n),...qi(e,$e.textPrefix,s,n),...U?{}:ld(ze.kind)},children:se.cells[$e.key]??null})}),mn&&l.jsx("div",{className:`${s}-row-padding-handle`,style:{height:be(Ut)}}),Bn&&l.jsx(yt,{P:s,"data-controls":$e.paddingBottomKey,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"column-padding","data-controls-min":"0",className:`${s}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Math.max(Ut,_o))}})]},$e.key)}),d&&pe===0&&U&&l.jsxs(l.Fragment,{children:[l.jsx(yt,{P:s,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(K),className:`${s}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:0,width:be(N),height:"100%"}}),l.jsx(yt,{P:s,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(K),className:`${s}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:be(Math.max(N,Ne-N)),width:be(N),height:"100%"}})]})]}),!U&&Qe>0&&l.jsx("div",{className:`${s}-row-padding-handle`,style:{height:be(Qe)}}),d&&pe===0&&!U&&l.jsx(yt,{P:s,"data-controls":"rowPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${s}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Fn)}})]},se.id)}),Tt&&(()=>{const se=ro(e,St),pe=cd(e.cutLabelVerticalAlign),ge=se.textTextAlign==="justify"||U;return l.jsx("button",{type:"button",className:`${s}-cut-item`,style:{minHeight:be(m??0),...td(ve,g??0,n??!1)},onClick:dt,onMouseEnter:ie?Ur:void 0,children:l.jsx("div",{className:`${s}-list-cols-row`,style:{...U?{paddingLeft:be(f),paddingRight:be(f)}:{},justifyContent:dd(se.textTextAlign),alignItems:ji(pe)},children:l.jsx("span",{className:Ki(e,St,`${s}-cut-label`,`${s}-text-tight-leading`),style:{...zi(se,n),...qi(e,St,s,n),...ge?{width:"100%"}:{}},children:H})})})})()]}),d&&l.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:l.jsx(yt,{P:s,"data-controls":Nt,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${s}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:be(Math.max(Je,_o))}})},"row-padding-handles"),d&&!U&&Ee&&De&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(yt,{P:s,"data-controls":Ee.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ke[0]-((me==null?void 0:me.paddingRight)??0)),className:`${s}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:be(Ve),height:"100%"}}),l.jsx(yt,{P:s,"data-controls":De.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ke[Se.length-1]-((Ie==null?void 0:Ie.paddingLeft)??0)),className:`${s}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(ut-Me),width:be(Me),height:"100%"}})]},"column-edge-padding-handles"),d&&!U&&Se.slice(0,-1).map((se,pe)=>{const ge=Se[pe+1],_e=He.slice(0,pe+1).reduce((pt,Lt)=>pt+Lt,0),qe=We[pe],tt=We[pe+1],$e=Math.max(qe.paddingRight,Zt),je=Math.max(tt.paddingLeft,Zt);return l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(yt,{P:s,"data-controls":se.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(ke[pe]-qe.paddingLeft),className:`${s}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e-$e),width:be($e),height:"100%"}}),l.jsx(yt,{P:s,"data-controls":ge.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ke[pe+1]-tt.paddingRight),className:`${s}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e),width:be(je),height:"100%"}})]},`${se.paddingRightKey}-padding`)}),d&&!U&&Se.slice(0,-1).map((se,pe)=>{const ge=Ad(pe,He,ye,Ne),qe=He.slice(0,pe+1).reduce((tt,$e)=>tt+$e,0)-Ui/2;return l.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:l.jsx("div",{"data-controls":se.widthKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-min":String(ui),"data-controls-max-fraction":String(ge),"data-controls-variant":"column-width",className:`${s}-col-resize-handle`,style:{position:"absolute",top:"0px",left:be(qe),width:be(Ui),height:"calc(100%)",pointerEvents:"auto"}})},`${se.widthKey}-junction`)}),ie&&A&&l.jsx("img",{className:`${s}-hover-image`,src:A.url,alt:"",style:{width:Zn(A.widthPx),objectFit:A.objectFit,left:A.x,top:A.y}})]})})]})}const Fd=`import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
|
|
4802
|
+
`}const kt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],po=["AColumn","BColumn","CColumn","DColumn","EColumn"],Lt="cutLabel",bi=[...po,Lt],mo=["A","B","C","D","E"];function Gr(e){return`${e}ColumnVerticalAlign`}const ji=["Top","Center","Bottom"];function md(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function gd(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return mo.includes(n)?n:null}function qr(e,t,n){const i=gd(e);return i?i===t?!1:md(n[Gr(i)]):!0}function Tn(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return mo.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function hd(e,t,n){if(Ur(e,t,n))return Tn(e);const i=Tn(e);return i.kind==="baseline"?{kind:"top"}:i}function fd(e){const t=Tn(e);return t.kind==="baseline"?{kind:"top"}:t}function Ur(e,t,n){return qr(e,n,t)?Tn(e).kind==="baseline":!1}function yd(e){const t={};let n=!1;for(const i of mo){const a=Gr(i),s=e[a];if(e.type==="B"){const o=String(s??"Top").trim();o!=="Top"&&o!=="Center"&&o!=="Bottom"&&(t[a]="Top",n=!0);continue}qr(s,i,e)||(t[a]="Top",n=!0)}return n?t:null}function vd(e){return e==="center"?{flex:"0 0 auto",marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{flex:"0 0 auto",marginTop:"auto"}:{}}function bd(e){const t=Tn(e).kind;return t==="baseline"?"center":t}function xd(e){return e==="right"?"flex-end":e==="center"?"center":"flex-start"}function Go(e){return e==="center"?"center":e==="bottom"?"flex-end":"flex-start"}function Cd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:i}=e.getBoundingClientRect(),{bottom:a}=n.getBoundingClientRect(),s=a-i;return n.remove(),s}function Ii(e,t,n,i){const a=e.titleEl;if(!a)return 0;const s=a.closest(`.${n}`);if(!s)return 0;const o=Cd(a,i);if(e.kind==="baseline")return a.getBoundingClientRect().top-t+o;const d=s.getBoundingClientRect(),l=a.getBoundingClientRect().height;let u=0;return e.kind==="center"?u=(d.height-l)/2:e.kind==="bottom"&&(u=d.height-l),d.top-t+u+o}function Sd(e,t,n){const i=e.getBoundingClientRect().height;return i<=0?0:(t.forEach(a=>{const s=a.querySelector(`.${n}`);s&&(s.style.minHeight=`${i}px`,s.style.height=`${i}px`)}),e.offsetHeight,i)}function wd(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const $d={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"};function Pe(e,t){return`${e}${t.replace(/^text/,"Text")}`}const Td={AColumn:"A",BColumn:"B",CColumn:"C",DColumn:"D",EColumn:"E",cutLabel:"CUT"};function Ld(e){return[Pe(e,"textFontFamily"),Pe(e,"textFontSettings"),{type:"row",items:[Pe(e,"textFontSize"),Pe(e,"textLineHeight"),Pe(e,"textLetterSpacing"),Pe(e,"textWordSpacing")]},Pe(e,"textTextAlign"),Pe(e,"textTextAppearance"),`${e}VerticalAlign`]}function Ed(){return{type:"tab",id:"listColumnTextStyle",tabs:Object.fromEntries(bi.map(e=>[Td[e],Ld(e)]))}}function si(e,t){const n=i=>{const a=Pe(t,i);return e[a]};return{textFontFamily:n("textFontFamily")??"Arial",textFontSettings:n("textFontSettings")??{fontWeight:400,fontStyle:"normal"},textFontSize:n("textFontSize"),textLineHeight:n("textLineHeight"),textLetterSpacing:n("textLetterSpacing")??0,textWordSpacing:n("textWordSpacing")??0,textTextAlign:n("textTextAlign")??(t===Lt?"center":"left"),textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function qo(e,t){var i,a;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((i=e.textFontSettings)==null?void 0:i.fontWeight)??400,fontStyle:((a=e.textFontSettings)==null?void 0:a.fontStyle)??"normal"},fontSize:e.textFontSize??.01,lineHeight:e.textLineHeight,letterSpacing:e.textLetterSpacing,wordSpacing:e.textWordSpacing,textAlign:e.textTextAlign,textAppearance:e.textTextAppearance,color:e.textColor??"#767676"};return ft(Ue(n,t))}function Uo(e,t,n,i){const a=si(e,t),s=a.textFontSize??.01,o=a.textLineHeight;return o!==void 0&&o<s?`${n} ${i}`:n}function Xo(e,t,n,i){const a=si(e,t),s=a.textFontSize??.01,o=a.textLineHeight;return o===void 0||o>=s?{}:{[`--${n}-title-leading-gap`]:E.scalingValue((s-o)/2,i)}}const lt=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],ln=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],cn=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],dn=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],Id={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},Pd=["hover","focus","filled","success","error"],Yo=.004,Qt=.004,Pi=Qt,Jo=12,go=50,Ln=1440,En=go/Ln;function Xr(e){const t=typeof e=="number"&&e>0?e:Ln;return go/t}function Rd(e,t){const n={position:"absolute",width:Jo,height:Jo,pointerEvents:"auto"};return t==="left-y"?{...n,left:20,top:"50%",transform:"translateY(-50%)"}:t==="center-x"?{...n,left:"50%",top:`var(--${e}-first-entry-handle-top, 50%)`,transform:"translate(-50%, -50%)"}:{...n,left:"50%",top:"50%",transform:"translate(-50%, -50%)"}}function Ct({P:e,className:t,areaStyle:n,hitPlacement:i,...a}){return r.jsx("div",{className:t,style:{...n,pointerEvents:"none"},...a,children:r.jsx("div",{style:Rd(e,i)})})}function Ad(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const a=parseFloat(n);if(Number.isFinite(a)&&a>0)return a}const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i){const a=parseFloat(i);if(Number.isFinite(a)&&a>0)return a}t=t.parentElement}return Ln}const Yr={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function ei(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function Md(e,t=1){const n=t/e;return Object.fromEntries(lt.map(i=>[i,n]))}function _d(){return Object.fromEntries([...ln.map(e=>[e,0]),...cn.map(e=>[e,0])])}function Wd(){return Object.fromEntries(dn.map(e=>[e,0]))}function qn(e){return Object.fromEntries(lt.map(t=>[t,typeof e[t]=="number"?e[t]:Yr[t]]))}function Jr(e,t,n){const i=e-En,a=t+n;if(a<=0||a<=i)return{paddingLeft:t,paddingRight:n};if(i<=0)return{paddingLeft:0,paddingRight:0};const s=i/a;return{paddingLeft:t*s,paddingRight:n*s}}function ti(e,t,n){const i=ho(e,t,n);if(e<=0)return[];const a=i.slice(0,e-1).reduce((s,o)=>s+o,0);return[...i.slice(0,e-1),Math.max(0,t-a)]}function kd(e,t,n){const i={};for(let a=0;a<e;a+=1){const s=ln[a],o=cn[a],d=typeof n[s]=="number"?n[s]:0,l=typeof n[o]=="number"?n[o]:0,u=Jr(t[a]??0,d,l);u.paddingLeft!==d&&(i[s]=u.paddingLeft),u.paddingRight!==l&&(i[o]=u.paddingRight)}return i}function ho(e,t,n){if(e<=0)return[];const i=lt.slice(0,e).map(u=>n[u]);if(e===1)return i;const a=i.slice(0,e-1),o=a.reduce((u,p)=>u+p,0)+En;if(t>=o)return i;const d=[...a];let l=o-t;for(let u=d.length-1;u>=0&&l>0;u-=1){const p=d[u]-En;if(p<=0)continue;const I=Math.min(l,p);d[u]-=I,l-=I}return[...d,i[e-1]]}function Fd(e,t,n){if(e<=1)return{};const i=ho(e,t,n),a={};for(let s=0;s<e-1;s+=1){const o=lt[s];i[s]!==n[o]&&(a[o]=i[s])}return a}function Zo(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...kt]}function Nd(e,t){return e.length!==t.length?!1:e.every((n,i)=>n===t[i])}function Hd(e,t,n,i){const a=Math.min(i,e.length,lt.length),s={};for(let o=0;o<a;o+=1){const d=e[o],l=t.indexOf(d);if(l===-1)continue;const u=lt[l],p=ln[l],I=cn[l],b=dn[l],w=lt[o],f=ln[o],h=cn[o],T=dn[o],L=n[u],C=n[p],m=n[I],z=n[b];typeof L=="number"&&(s[w]=L),typeof C=="number"&&(s[f]=C),typeof m=="number"&&(s[h]=m),typeof z=="number"&&(s[T]=z)}return s}function Bd(e,t,n){const i=yd(e);i&&(e={...e,...i});const a=Xr(n==null?void 0:n.designWidth),s=e.columns,o=t.columns,d=ei(e),l=ei(t),u=e.type==="B"||e.type===void 0&&t.type==="B",p=typeof s=="number"?s:typeof o=="number"?o:kt.length,I=m=>{if(u)return m;const z=qn({...t,...m}),j=ei(m),R=ti(p,j,z),x=kd(p,R,{...t,...m});return Object.keys(x).length===0?m:{...m,...x}};if(typeof s=="number"&&s!==o){const m={...e,...Md(s,d),..._d()};if(u)for(const z of dn)typeof t[z]=="number"&&(m[z]=t[z]);else Object.assign(m,Wd());return m}const b=Zo(e),w=Zo(t);if(!Nd(b,w))return I({...e,...Hd(b,w,t,p)});if(d<l&&typeof p=="number"&&!u){const m=qn({...t,...e});return I({...e,...Fd(p,d,m)})}if(u){const m=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,z=Math.max(0,(d-a)/2);return m>z?{...e,textPaddingLR:z}:e}const f=qn({...t,...e}),h=ti(p,l,qn(t)),L=ti(p,d,f).some((m,z)=>m<(h[z]??m)),C=lt.some(m=>{const z=e[m],j=t[m];return typeof z=="number"&&typeof j=="number"&&z!==j});return L||C?I(e):e}function Od(e,t,n,i){const a=t.slice(0,e).reduce((o,d)=>o+d,0),s=n.slice(e+1,t.length-1).reduce((o,d)=>o+d,0);return Math.max(En,i-a-s-En)}function jd(e,t){return Math.random()*(t-e)+e}function Dd(e){return Object.fromEntries(lt.map(t=>[t,typeof e[t]=="number"?e[t]:Yr[t]]))}function Ri(e,t,n=0){return Object.fromEntries(t.map(i=>[i,typeof e[i]=="number"?e[i]:n]))}function Vd(e,t,n,i,a,s){return e.slice(0,t).map((o,d)=>{const l=ln[d],u=cn[d],p=dn[d];return{key:o,textPrefix:$d[o],widthKey:lt[d],width:n[lt[d]],paddingLeftKey:l,paddingRightKey:u,paddingBottomKey:p,paddingLeft:i[l],paddingRight:a[u],paddingBottom:s[p]}})}function zd({settings:e,content:t,isEditor:n,isPreviewMode:i,isEditMode:a,activeEvent:s,layoutId:o,onUpdateSettings:d}){const{prefix:l}=E.useScopedStyles(),u=!!a,{columns:p,type:I,wrapperWidth:b,entriesCount:w,cellMinHeight:f,dividerWidth:h,showVisibility:T,cut:L,showCut:C,cutCellMinHeight:m,cutLabel:z,imageSize:j,imageOnHover:R,entryHoverEffect:x,rowPaddingTop:A,rowPaddingBottom:S,rowPaddingTopB:K,columnsOrder:v,textPaddingLR:D,textColor:W,backgroundColor:q,dividerColor:G,textHoverColor:$,backgroundHoverColor:H,dividerHoverColor:_}=e,[B,k]=c.useState(void 0),[P,te]=c.useState(null),ae=R==="On"&&(!n||i),re=(L??0)>0,U=I==="B",N=c.useRef(null),oe=c.useRef(null),[ye,ce]=c.useState(null),[ge,we]=c.useState(Ln),ee=Xr(ge),y=Math.max(0,((b??0)-ee)/2),g=Math.min(D??0,y),V=Math.max(g,Qt),J=((b??0)+ee)/2;c.useLayoutEffect(()=>{if(!n){we(Ln);return}const ue=()=>{we(Ad(N.current))};ue();const be=N.current;if(!be)return;const Ce=new ResizeObserver(ue);Ce.observe(be);let Ne=be;for(;Ne&&!Ne.style.getPropertyValue("--cntrl-article-width");)Ne=Ne.parentElement;return Ne&&Ce.observe(Ne),()=>Ce.disconnect()},[n,o]),c.useEffect(()=>{k(void 0)},[L,C,t,w]);const Q=E.buildColorVars(l,{textColor:W,backgroundColor:q,dividerColor:G,textHoverColor:$,backgroundHoverColor:H,dividerHoverColor:_},Id,Pd),M=s&&s!=="default"?`${l}-state-${s}`:"",O=`${x==="Default"?`${l}-entry-hover-default`:x==="Blinds"?`${l}-entry-hover-blinds`:""} ${M}`.trim(),ie=(T==null?void 0:T[0])??!1,pe=(T==null?void 0:T[1])??!1,le=c.useRef(e),he=c.useRef(o);c.useEffect(()=>{if(!d||!n){le.current=e,he.current=o;return}if(he.current!==o){le.current=e,he.current=o;return}const ue=le.current;if(!(ue!==e))return;const Ce=Bd(e,ue,{designWidth:ge});le.current=e,Ce!==e&&d(Ce)},[e,d,n,o,ge]);const Y=c.useMemo(()=>Dd(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Z=c.useMemo(()=>Ri(e,ln),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),X=c.useMemo(()=>Ri(e,cn),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),se=c.useMemo(()=>Ri(e,dn),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),Te=c.useMemo(()=>Array.isArray(v)&&v.length>0?v:[...kt],[v]),Le=c.useMemo(()=>Vd(Te,p,Y,Z,X,se),[Te,p,Y,Z,X,se]),Oe=ei(e),ve=c.useMemo(()=>lt.slice(0,p).map(ue=>Y[ue]),[p,Y]),ke=c.useMemo(()=>ho(p,Oe,Y),[p,Oe,Y]),_e=c.useMemo(()=>ti(p,Oe,Y),[p,Oe,Y]),Ae=c.useMemo(()=>Le.map((ue,be)=>Jr(_e[be]??0,ue.paddingLeft,ue.paddingRight)),[Le,_e]),Ve=c.useMemo(()=>{const ue=w===0?1/0:w;return(t??[]).slice(0,ue).map((Ce,Ne)=>({id:Ne,cells:Object.fromEntries(kt.map(nt=>[nt,Ce[nt]??""])),image:Ce.image,link:Ce.link}))},[t,w]),me=re?B??L:Ve.length,$e=c.useMemo(()=>re?Ve.slice(0,me):Ve,[Ve,re,me]),Fe=re&&me<Ve.length,Me=$e.length>1||Fe,Ye=[ie?`${l}-divider-top`:"",pe||Me?`${l}-divider-bottom`:""].filter(Boolean).join(" "),Be=()=>{const ue=B??L;if(!C){k(Ve.length);return}k(Math.min(ue+C,Ve.length))},fe=ue=>E.scalingValue(ue,n??!1),Xe=U?K??0:A??0,Je=S??0,Ge=f??0,mt=(Xe+Ge+Je)/2,Bt=Math.max(Je,Pi),Pt=ye!=null?`${ye/2}px`:fe(mt),Ot=U?"rowPaddingTopB":"rowPaddingTop",Re=Le[0],Ze=Le[Le.length-1],xe=Ae[0],je=Ae[Ae.length-1],qe=Re&&xe?Math.max(xe.paddingLeft,Qt):0,ze=Ze&&je?Math.max(je.paddingRight,Qt):0,gt=Oe,Hn=ue=>{const be=N.current;if(!be)return{x:0,y:0};const Ce=be.getBoundingClientRect();return{x:ue.clientX-Ce.left+Ko,y:ue.clientY-Ce.top+Ko}},ea=(ue,be)=>{if(!ae)return;const Ce=ue.image;if(!(Ce!=null&&Ce.url)){te(null);return}const{x:Ne,y:nt}=Hn(be),rt=(j==null?void 0:j.min)??80,Ee=(j==null?void 0:j.max)??320,Qe=(P==null?void 0:P.rowId)===ue.id?P.widthPx:jd(rt,Ee);te({rowId:ue.id,url:Ce.url,objectFit:Ce.objectFit??"cover",widthPx:Qe,x:Ne,y:nt})},ta=ue=>{if(!ae||!P)return;const{x:be,y:Ce}=Hn(ue);te(Ne=>!Ne||Ne.x===be&&Ne.y===Ce?Ne:{...Ne,x:be,y:Ce})},na=()=>{te(null)},ia=()=>{ae&&te(null)};c.useLayoutEffect(()=>{if(!u||U){ce(null);return}const ue=oe.current;if(!ue){ce(null);return}const be=()=>{ce(ue.getBoundingClientRect().height)};be();const Ce=new ResizeObserver(be);return Ce.observe(ue),()=>Ce.disconnect()},[u,U,$e,Xe,Je,Ge,t,e,Le,_e,ge]);const fo=c.useMemo(()=>!U&&po.some(ue=>{const be=ue.charAt(0),Ce=e[`${ue}VerticalAlign`];return Ur(Ce,e,be)}),[U,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return c.useLayoutEffect(()=>{var rt;const ue=N.current;if(!ue)return;const be=()=>{ue.querySelectorAll("[data-list-col]").forEach(Ee=>{Ee.style.transform="";const Qe=Ee.querySelector(`.${l}-list-col`);Qe&&(Qe.style.minHeight="",Qe.style.height="");const ht=Ee.querySelector(`.${l}-list-col-title`);ht&&(ht.style.transform="")})};if(U||!fo){be();return}const Ce=()=>{ue.querySelectorAll("[data-list-row]").forEach(Ee=>{const Qe=Array.from(Ee.querySelectorAll("[data-list-col]"));Qe.forEach(We=>{We.style.transform="";const ot=We.querySelector(`.${l}-list-col`);ot&&(ot.style.minHeight="",ot.style.height="");const et=We.querySelector(`.${l}-list-col-title`);et&&(et.style.transform="")}),Sd(Ee,Qe,`${l}-list-col`),Ee.offsetHeight;const ht=Ee.getBoundingClientRect().top,Rt=`${l}-baseline-probe`,Xt=new Map,Bn=Qe.map(We=>{const ot=We.querySelector(`.${l}-list-col-title`),et={el:We,titleEl:ot,letter:We.getAttribute("data-col-letter")??"",kind:We.getAttribute("data-valign")??"top",anchor:We.getAttribute("data-valign-anchor")};return Xt.set(et.letter,et),et}),hn=new Map,On=(We,ot)=>{const et=hn.get(We.letter);if(et!==void 0)return et;const jn=We.anchor?Xt.get(We.anchor):void 0;if(We.kind!=="baseline"||!jn||ot.has(We.letter)){const vo=Ii(We,ht,`${l}-list-col`,Rt);return hn.set(We.letter,vo),vo}ot.add(We.letter);const oa=On(jn,ot);ot.delete(We.letter);const ra=Ii(We,ht,`${l}-list-col`,Rt),aa=oa-ra;wd(We.titleEl,aa);const yo=Ii(We,ht,`${l}-list-col`,Rt);return hn.set(We.letter,yo),yo};Bn.forEach(We=>On(We,new Set))})};Ce();const Ne=new ResizeObserver(()=>Ce());Ne.observe(ue);let nt=!1;return typeof document<"u"&&((rt=document.fonts)!=null&&rt.ready)&&document.fonts.ready.then(()=>{nt||Ce()}),()=>{nt=!0,Ne.disconnect(),be()}},[fo,U,e,t,ge,$e,_e]),r.jsxs(r.Fragment,{children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:pd(l)}}),r.jsx("div",{style:Q,children:r.jsxs("div",{ref:N,className:`${l}-wrapper ${O}${Ye?` ${Ye}`:""}${U?` ${l}-type-b`:""}`.trim(),style:{width:E.scalingValue(b??0,n),...!U&&u?{[`--${l}-first-entry-handle-top`]:Pt}:{}},onMouseMove:ae?ta:void 0,onMouseLeave:ae?na:void 0,children:[r.jsxs("div",{style:{width:"100%"},children:[$e.map((ue,be)=>{var rt;const Ce=(((rt=ue.link)==null?void 0:rt.length)??0)>0,Ne=Ce?"a":"div",nt=dd(be,$e.length,ie,pe,Fe,h??0,n??!1);return r.jsxs(Ne,{ref:be===0?Ee=>{oe.current=Ee}:void 0,className:`${l}-list-item${Ce?` ${l}-list-item-has-link`:""}`,...Ce?{href:ue.link,target:"_blank"}:{},style:nt,onMouseEnter:ae?Ee=>ea(ue,Ee):void 0,children:[Xe>0&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Xe)}}),r.jsxs("div",{className:`${l}-list-cols-row${U?"":` ${l}-list-cols-row-h`}${u&&be===0&&U?` ${l}-list-cols-row-controls`:""}`,...U?{}:{"data-list-row":""},style:U?void 0:{minHeight:fe(Ge)},children:[Le.map((Ee,Qe)=>{const ht=Qe===Le.length-1,Rt=Ae[Qe],Xt=Ee.paddingBottom,Bn=cd(ue.cells[Ee.key]),hn=U&&Bn&&Xt>0,On=U?{minHeight:fe(Ge)}:{width:fe(_e[Qe])},We=U?{paddingLeft:fe(g),paddingRight:fe(g)}:{paddingLeft:fe(Rt.paddingLeft),paddingRight:fe(Rt.paddingRight)},ot=Ee.textPrefix.charAt(0),et=U?fd(e[`${Ee.textPrefix}VerticalAlign`]):hd(e[`${Ee.textPrefix}VerticalAlign`],e,ot),jn=U&&Bn&&u&&be===0;return r.jsxs("div",{className:U?`${l}-list-col-wrap`:void 0,...U?{}:{"data-list-col":"","data-col-letter":ot,"data-valign":et.kind,...et.kind==="baseline"?{"data-valign-anchor":et.anchorLetter}:{}},children:[r.jsx("div",{className:`${l}-list-col${ht?` ${l}-list-col-last`:""}`,style:{...We,...On,...U?{justifyContent:Go(et.kind)}:{}},"data-test":Ee.width,children:r.jsx("span",{className:Uo(e,Ee.textPrefix,`${l}-list-col-title`,`${l}-text-tight-leading`),style:{...qo(si(e,Ee.textPrefix),n),...Xo(e,Ee.textPrefix,l,n),...U?{}:vd(et.kind)},children:ue.cells[Ee.key]??null})}),hn&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Xt)}}),jn&&r.jsx(Ct,{P:l,"data-controls":Ee.paddingBottomKey,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"column-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:fe(Math.max(Xt,Pi))}})]},Ee.key)}),u&&be===0&&U&&r.jsxs(r.Fragment,{children:[r.jsx(Ct,{P:l,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(J),className:`${l}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:0,width:fe(V),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":"textPaddingLR","data-controls-static-handle":"","data-controls-paired":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(J),className:`${l}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:fe(Math.max(V,Oe-V)),width:fe(V),height:"100%"}})]})]}),!U&&Je>0&&r.jsx("div",{className:`${l}-row-padding-handle`,style:{height:fe(Je)}}),u&&be===0&&!U&&r.jsx(Ct,{P:l,"data-controls":"rowPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:fe(Bt)}})]},ue.id)}),Fe&&(()=>{const ue=si(e,Lt),be=bd(e.cutLabelVerticalAlign),Ce=ue.textTextAlign==="justify"||U;return r.jsx("button",{type:"button",className:`${l}-cut-item`,style:{minHeight:fe(m??0),...ud(pe,h??0,n??!1)},onClick:Be,onMouseEnter:ae?ia:void 0,children:r.jsx("div",{className:`${l}-list-cols-row`,style:{...U?{paddingLeft:fe(g),paddingRight:fe(g)}:{},justifyContent:xd(ue.textTextAlign),alignItems:Go(be)},children:r.jsx("span",{className:Uo(e,Lt,`${l}-cut-label`,`${l}-text-tight-leading`),style:{...qo(ue,n),...Xo(e,Lt,l,n),...Ce?{width:"100%"}:{}},children:z})})})})()]}),u&&r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx(Ct,{P:l,"data-controls":Ot,"data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${l}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:fe(Math.max(Xe,Pi))}})},"row-padding-handles"),u&&!U&&Re&&Ze&&r.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[r.jsx(Ct,{P:l,"data-controls":Re.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_e[0]-((xe==null?void 0:xe.paddingRight)??0)),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:fe(qe),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":Ze.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(_e[Le.length-1]-((je==null?void 0:je.paddingLeft)??0)),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(gt-ze),width:fe(ze),height:"100%"}})]},"column-edge-padding-handles"),u&&!U&&Le.slice(0,-1).map((ue,be)=>{const Ce=Le[be+1],Ne=ke.slice(0,be+1).reduce((ht,Rt)=>ht+Rt,0),nt=Ae[be],rt=Ae[be+1],Ee=Math.max(nt.paddingRight,Qt),Qe=Math.max(rt.paddingLeft,Qt);return r.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[r.jsx(Ct,{P:l,"data-controls":ue.paddingRightKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(_e[be]-nt.paddingLeft),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(Ne-Ee),width:fe(Ee),height:"100%"}}),r.jsx(Ct,{P:l,"data-controls":Ce.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_e[be+1]-rt.paddingRight),className:`${l}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:fe(Ne),width:fe(Qe),height:"100%"}})]},`${ue.paddingRightKey}-padding`)}),u&&!U&&Le.slice(0,-1).map((ue,be)=>{const Ce=Od(be,ke,ve,Oe),nt=ke.slice(0,be+1).reduce((rt,Ee)=>rt+Ee,0)-Yo/2;return r.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:r.jsx("div",{"data-controls":ue.widthKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-min":String(go),"data-controls-max-fraction":String(Ce),"data-controls-variant":"column-width",className:`${l}-col-resize-handle`,style:{position:"absolute",top:"0px",left:fe(nt),width:fe(Yo),height:"calc(100%)",pointerEvents:"auto"}})},`${ue.widthKey}-junction`)}),ae&&P&&r.jsx("img",{className:`${l}-hover-image`,src:P.url,alt:"",style:{width:Qn(P.widthPx),objectFit:P.objectFit,left:P.x,top:P.y}})]})})]})}const Kd=`import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
|
|
4803
4803
|
import { CommonComponentProps } from '../props';
|
|
4804
4804
|
import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';
|
|
4805
4805
|
import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';
|
|
@@ -4961,7 +4961,6 @@ type ListProps = {
|
|
|
4961
4961
|
isEditor?: boolean;
|
|
4962
4962
|
isPreviewMode?: boolean;
|
|
4963
4963
|
isEditMode?: boolean;
|
|
4964
|
-
isEditMode?: boolean;
|
|
4965
4964
|
activeEvent: string | undefined;
|
|
4966
4965
|
onUpdateSettings?: (settings: ListSettings) => void;
|
|
4967
4966
|
} & CommonComponentProps;
|
|
@@ -7517,4 +7516,2638 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7517
7516
|
</>
|
|
7518
7517
|
);
|
|
7519
7518
|
}
|
|
7520
|
-
`,un=["A","B","C","D","E"],Xi=[...Oo,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],Ot={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}},fontSize:{type:"number",display:{type:"font-size"}},lineHeight:{type:"number",display:{type:"line-height-input"}},letterSpacing:{type:"number",display:{type:"letter-spacing-input"}},wordSpacing:{type:"number",display:{type:"word-spacing-input"}},textAlign:{type:"string",enum:["left","center","right","justify"],display:{type:"vertical-text-aligh-options"}},textAppearance:{type:"object",display:{type:"text-appearance",useTabDesign:!0},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}}};function Md(e){return{type:"string",label:e,placeholder:"Add Title...",display:{type:"text-input"}}}function qn(e){return{type:"number",scope:"layout",title:e,min:0,max:100,display:{type:"range-control"}}}function Nd(){return Object.fromEntries(un.map((e,t)=>{const n=Wt[t],o=`${e} column`;return[n,Md(o)]}))}function Hd(){const e={};for(const t of un)e[`${t}ColumnWidth`]=qn(`${t} column width`),e[`${t}ColumnPaddingLeft`]=qn(`${t} column padding left`),e[`${t}ColumnPaddingRight`]=qn(`${t} column padding right`),e[`${t}ColumnPaddingBottom`]=qn(`${t} column padding bottom`);return e}function Zi(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...Wt]};for(const n of un)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function Bd(e){const t={};if(e===St)t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Oo],useTabDesign:!0},enum:[...Oo]};else{const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Xi],filterBaselineByTopAnchor:!0,columnLetter:n,useTabDesign:!0},enum:[...Xi]}}return t[Le(e,"textFontFamily")]={type:"string",scope:"common",title:"",display:{type:"font-family-select",hideLabel:!0,useTabDesign:!0}},t[Le(e,"textFontSettings")]={...Ot.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight",hideLabel:!0,useTabDesign:!0}},t[Le(e,"textFontSize")]={...Ot.fontSize,scope:"layout",title:"",display:{type:"font-size"}},t[Le(e,"textLineHeight")]={...Ot.lineHeight,scope:"layout",title:"",display:{type:"line-height-input"}},t[Le(e,"textLetterSpacing")]={...Ot.letterSpacing,scope:"layout",title:"",display:{type:"letter-spacing-input"}},t[Le(e,"textWordSpacing")]={...Ot.wordSpacing,scope:"layout",title:"",display:{type:"word-spacing-input"}},t[Le(e,"textTextAlign")]={...Ot.textAlign,scope:"layout",title:"",display:{type:"vertical-text-aligh-options"}},t[Le(e,"textTextAppearance")]={...Ot.textAppearance,scope:"layout",title:"",display:{type:"text-appearance",useTabDesign:!0}},t}const Od=bo.reduce((e,t)=>({...e,...Bd(t)}),{}),Vd=bo.reduce((e,t)=>({...e,[`${t}VerticalAlign`]:t===St?"Center":"Top",[Le(t,"textFontFamily")]:"Arial",[Le(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[Le(t,"textLetterSpacing")]:0,[Le(t,"textWordSpacing")]:0,[Le(t,"textTextAlign")]:t===St?"center":"left",[Le(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function Ji(e){const{textFontSize:t,textLineHeight:n,textTextAlign:o}=e;return bo.reduce((r,a)=>(t!==void 0&&(r[`${a}TextFontSize`]=t),n!==void 0&&(r[`${a}TextLineHeight`]=n),o!==void 0&&(r[Le(a,"textTextAlign")]=o),r),{})}const Dd=yd();function jr(e){return[Le(e,"textFontFamily"),Le(e,"textFontSettings"),Le(e,"textFontSize"),Le(e,"textLineHeight"),Le(e,"textLetterSpacing"),Le(e,"textWordSpacing"),Le(e,"textTextAlign"),Le(e,"textTextAppearance"),`${e}VerticalAlign`]}function jd(){const e=[];return ci.forEach((t,n)=>{const o=Wt[n],r=jr(t);for(let a=1;a<Wt.length;a+=1){const i=[{name:"columns",value:a},...Array.from({length:a},(c,s)=>({name:`columnsOrder.${s}`,value:o,isNotEqual:!0}))];r.forEach(c=>{e.push({if:i,then:{name:`properties.${c}.display.visible`,value:!1}})})}}),e}const zd=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],Kd=["cutLabel","cutCellMinHeight","showCut"],qd=jr(St),Ud=[...Kd,...qd],Gd=[...un.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`]),"rowPaddingTop","rowPaddingBottom"],Vt=[{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDBHFMF0NKJMYCGGRA.jpeg",name:"List-1.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD194E6Z49QD9GG03N.jpeg",name:"List-2.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDNZRY59Q8JJVYY92K.jpeg",name:"List-3.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDRXD5QWHB5YF8H3XM.jpeg",name:"List-4.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3C6H5Q9QX0SX8PSP.jpeg",name:"List-5.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDM6VHTFVXVD58V0D6.jpeg",name:"List-6.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3QT4RPG3VMM2NK5K.jpeg",name:"List-7.png"}],Yd=[{AColumn:"01",BColumnWidth:"Ethan Parker",CColumnWidth:"Midnight Atlas",DColumnWidth:"Portland, OR",EColumnWidth:"On Display",image:Vt[0],link:""},{AColumn:"02",BColumnWidth:"Madison Reed",CColumnWidth:"Echoes in Vermilion",DColumnWidth:"Savannah, GA",EColumnWidth:"Scheduled",image:Vt[1],link:""},{AColumn:"03",BColumnWidth:"Noah Bennett",CColumnWidth:"Paper Constellations",DColumnWidth:"Madison, WI",EColumnWidth:"On Display",image:Vt[2],link:""},{AColumn:"04",BColumnWidth:"Olivia Carter",CColumnWidth:"The Quiet Frequency",DColumnWidth:"Boise, ID",EColumnWidth:"On Display",image:Vt[3],link:""},{AColumn:"05",BColumnWidth:"Mason Brooks",CColumnWidth:"Sights of Tomorrow",DColumnWidth:"Tampa, FL",EColumnWidth:"Postponed",image:Vt[4],link:""},{AColumn:"06",BColumnWidth:"Sophia Mitchell",CColumnWidth:"Velvet Horizons",DColumnWidth:"Albuquerque, NM",EColumnWidth:"Scheduled",image:Vt[5],link:""},{AColumn:"07",BColumnWidth:"Jackson Turner",CColumnWidth:"Ink & Aurora",DColumnWidth:"Pittsburgh, PA",EColumnWidth:"On Display",image:Vt[6],link:""}],Xd=[...un.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],Zd={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",ref:{columnsOrder:"settings.properties.columnsOrder",columnsCount:"settings.properties.columns"}},items:{type:"object",properties:{...Nd(),image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:Yd},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"layout",title:"",display:{type:"radio-group"},enum:["A","B"]},columns:{type:"number",scope:"layout",title:"Columns",display:{type:"count-number"},min:1,max:5},wrapperWidth:{type:"number",scope:"layout",title:"Width",display:{type:"numeric-input"},min:0,max:9999},textPaddingLR:{type:"number",scope:"layout",title:"Text Padding LR",min:0,max:9999,display:{type:"range-control"}},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},cellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},imageOnHover:{type:"boolean",scope:"common",title:"Image On Hover",display:{type:"toggle-cycle",enum:["On","Off"]}},imageSize:{type:"object",scope:"layout",title:"Image size",display:{type:"min-max-input"},min:1,max:1440,properties:{min:{type:"number"},max:{type:"number"}}},dividerWidth:{type:"number",scope:"layout",title:"Divider width",display:{type:"numeric-input"},min:0,max:9999},showVisibility:{type:"array",scope:"common",title:"Show",display:{type:"double-toggle",enum:["Top","Bottom"]},items:{type:"boolean"},default:[!0,!1]},cut:{type:"number",scope:"layout",title:"Cut",display:{type:"toggle-numeric-input",enum:["Off","On"]},min:1},entryHoverEffect:{type:"string",scope:"common",title:"Entry Hover Effect",display:{type:"toggle-cycle",enum:["None","Default","Blinds"]}},cutCellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},cutLabel:{type:"string",scope:"common",title:"Cut Label",display:{type:"label-input"}},showCut:{type:"number",scope:"layout",title:"Show",display:{type:"toggle-numeric-input",enum:["All","Custom"]},min:1},rowPaddingTop:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},rowPaddingBottom:{type:"number",scope:"layout",title:"Row Padding Bottom",min:0,max:100,display:{type:"range-control"}},rowPaddingTopB:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},...Hd(),columnsOrder:{type:"array",scope:"layout",title:"Columns Order",display:{type:"reorder-input"},items:{type:"string"}},textColor:{type:"string",scope:"common",title:"Text Default",display:{type:"palette-color-picker"}},textHoverColor:{type:"string",scope:"common",title:"Text Hover",display:{type:"palette-color-picker"}},...Od,backgroundColor:{type:"string",scope:"common",title:"BG Default",display:{type:"palette-color-picker"}},dividerColor:{type:"string",scope:"common",title:"Divider Default",display:{type:"palette-color-picker"}},backgroundHoverColor:{type:"string",scope:"common",title:"BG Hover",display:{type:"palette-color-picker"}},dividerHoverColor:{type:"string",scope:"common",title:"Divider Hover",display:{type:"palette-color-picker"}}},defaults:{imageOnHover:"Off",entryHoverEffect:"None",cutLabel:"SEE ALL",showVisibility:[!0,!0],textColor:"#767676",textHoverColor:"#767676",...Vd,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:Zi({type:"B",textPaddingLR:.0373,entriesCount:0,cellMinHeight:.02,imageSize:{min:80,max:320},dividerWidth:.002,cut:0,showCut:0,cutCellMinHeight:.043,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.003,textCorners:.192,textPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},...Ji({textFontSize:.043,textLineHeight:.043,textTextAlign:"center"})}),d:Zi({type:"A",textPaddingLR:.01,entriesCount:0,cellMinHeight:.03,imageSize:{min:80,max:320},dividerWidth:6e-4,cut:0,showCut:0,cutCellMinHeight:.03,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.001,textCorners:.05,textPadding:{top:.01,right:.01,bottom:.01,left:.01},...Ji({textFontSize:.01,textLineHeight:.01})})},displayRules:[...jd(),...Ud.map(e=>({if:{name:"cut",value:0},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.textPaddingLR.display.visible",value:!1}},...Gd.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.rowPaddingTopB.display.visible",value:!1}},...un.map(e=>({if:{name:"type",value:"A"},then:{name:`properties.${e}ColumnPaddingBottom.display.visible`,value:!1}}))],layout:["__componentName__","name","type","columns","wrapperWidth","textPaddingLR","entriesCount","cellMinHeight","imageOnHover","imageSize","dividerWidth","showVisibility","cut","showCut","cutCellMinHeight","entryHoverEffect","cutLabel","rowPaddingTop","rowPaddingBottom","rowPaddingTopB",...Xd]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"",items:["columns","wrapperWidth"]},{type:"row",title:"",items:["entriesCount","cellMinHeight"]},{type:"row",title:"",items:["imageOnHover","imageSize"]},{type:"row",title:"",items:["entryHoverEffect"]},{type:"row",title:"Divider Settings",items:["dividerWidth","showVisibility"]},{type:"row",title:"",items:["cut"]},{type:"row",title:"Cut Settings",items:["cutLabel","cutCellMinHeight"]},{type:"row",title:"",items:["showCut"]}]},{id:"columnsOrder",icon:"layers",title:"Columns Order",tooltip:"Columns order",layout:["columnsOrder"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[Dd]}],paletteBookmark:{items:[...zd],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},Jd={element:kd,id:"list",name:"Default List",category:"lists",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Programme_List.png "},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:Zd,sourceCode:Fd},Qd=[al,ml,tc,dc,xc,Rc,Mc,Dc,Jc,Jd];exports.components=Qd;exports.isSchemaV1=Zr;
|
|
7519
|
+
`,gn=["A","B","C","D","E"],Qo=[...ji,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],Vt={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}},fontSize:{type:"number",display:{type:"font-size"}},lineHeight:{type:"number",display:{type:"line-height-input"}},letterSpacing:{type:"number",display:{type:"letter-spacing-input"}},wordSpacing:{type:"number",display:{type:"word-spacing-input"}},textAlign:{type:"string",enum:["left","center","right","justify"],display:{type:"vertical-text-aligh-options"}},textAppearance:{type:"object",display:{type:"text-appearance",useTabDesign:!0},properties:{textTransform:{type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{type:"string",enum:["none","underline"]},fontVariant:{type:"string",enum:["normal","small-caps"]}}}};function Gd(e){return{type:"string",label:e,placeholder:"Add Title...",display:{type:"text-input"}}}function Un(e){return{type:"number",scope:"layout",title:e,min:0,max:100,display:{type:"range-control"}}}function qd(){return Object.fromEntries(gn.map((e,t)=>{const n=kt[t],i=`${e} column`;return[n,Gd(i)]}))}function Ud(){const e={};for(const t of gn)e[`${t}ColumnWidth`]=Un(`${t} column width`),e[`${t}ColumnPaddingLeft`]=Un(`${t} column padding left`),e[`${t}ColumnPaddingRight`]=Un(`${t} column padding right`),e[`${t}ColumnPaddingBottom`]=Un(`${t} column padding bottom`);return e}function er(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...kt]};for(const n of gn)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function Xd(e){const t={};if(e===Lt)t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...ji],useTabDesign:!0},enum:[...ji]};else{const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Qo],filterBaselineByTopAnchor:!0,columnLetter:n,useTabDesign:!0},enum:[...Qo]}}return t[Pe(e,"textFontFamily")]={type:"string",scope:"common",title:"",display:{type:"font-family-select",hideLabel:!0,useTabDesign:!0}},t[Pe(e,"textFontSettings")]={...Vt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight",hideLabel:!0,useTabDesign:!0}},t[Pe(e,"textFontSize")]={...Vt.fontSize,scope:"layout",title:"",display:{type:"font-size"}},t[Pe(e,"textLineHeight")]={...Vt.lineHeight,scope:"layout",title:"",display:{type:"line-height-input"}},t[Pe(e,"textLetterSpacing")]={...Vt.letterSpacing,scope:"layout",title:"",display:{type:"letter-spacing-input"}},t[Pe(e,"textWordSpacing")]={...Vt.wordSpacing,scope:"layout",title:"",display:{type:"word-spacing-input"}},t[Pe(e,"textTextAlign")]={...Vt.textAlign,scope:"layout",title:"",display:{type:"vertical-text-aligh-options"}},t[Pe(e,"textTextAppearance")]={...Vt.textAppearance,scope:"layout",title:"",display:{type:"text-appearance",useTabDesign:!0}},t}const Yd=bi.reduce((e,t)=>({...e,...Xd(t)}),{}),Jd=bi.reduce((e,t)=>({...e,[`${t}VerticalAlign`]:t===Lt?"Center":"Top",[Pe(t,"textFontFamily")]:"Arial",[Pe(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[Pe(t,"textLetterSpacing")]:0,[Pe(t,"textWordSpacing")]:0,[Pe(t,"textTextAlign")]:t===Lt?"center":"left",[Pe(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function tr(e){const{textFontSize:t,textLineHeight:n,textTextAlign:i}=e;return bi.reduce((a,s)=>(t!==void 0&&(a[`${s}TextFontSize`]=t),n!==void 0&&(a[`${s}TextLineHeight`]=n),i!==void 0&&(a[Pe(s,"textTextAlign")]=i),a),{})}const Zd=Ed();function Zr(e){return[Pe(e,"textFontFamily"),Pe(e,"textFontSettings"),Pe(e,"textFontSize"),Pe(e,"textLineHeight"),Pe(e,"textLetterSpacing"),Pe(e,"textWordSpacing"),Pe(e,"textTextAlign"),Pe(e,"textTextAppearance"),`${e}VerticalAlign`]}function Qd(){const e=[];return po.forEach((t,n)=>{const i=kt[n],a=Zr(t);for(let s=1;s<kt.length;s+=1){const o=[{name:"columns",value:s},...Array.from({length:s},(d,l)=>({name:`columnsOrder.${l}`,value:i,isNotEqual:!0}))];a.forEach(d=>{e.push({if:o,then:{name:`properties.${d}.display.visible`,value:!1}})})}}),e}const eu=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],tu=["cutLabel","cutCellMinHeight","showCut"],nu=Zr(Lt),iu=[...tu,...nu],ou=[...gn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`]),"rowPaddingTop","rowPaddingBottom"],zt=[{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDBHFMF0NKJMYCGGRA.jpeg",name:"List-1.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD194E6Z49QD9GG03N.jpeg",name:"List-2.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDNZRY59Q8JJVYY92K.jpeg",name:"List-3.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDRXD5QWHB5YF8H3XM.jpeg",name:"List-4.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3C6H5Q9QX0SX8PSP.jpeg",name:"List-5.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MDM6VHTFVXVD58V0D6.jpeg",name:"List-6.png"},{objectFit:"cover",url:"https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01KV88Q6MD3QT4RPG3VMM2NK5K.jpeg",name:"List-7.png"}],ru=[{AColumn:"01",BColumnWidth:"Ethan Parker",CColumnWidth:"Midnight Atlas",DColumnWidth:"Portland, OR",EColumnWidth:"On Display",image:zt[0],link:""},{AColumn:"02",BColumnWidth:"Madison Reed",CColumnWidth:"Echoes in Vermilion",DColumnWidth:"Savannah, GA",EColumnWidth:"Scheduled",image:zt[1],link:""},{AColumn:"03",BColumnWidth:"Noah Bennett",CColumnWidth:"Paper Constellations",DColumnWidth:"Madison, WI",EColumnWidth:"On Display",image:zt[2],link:""},{AColumn:"04",BColumnWidth:"Olivia Carter",CColumnWidth:"The Quiet Frequency",DColumnWidth:"Boise, ID",EColumnWidth:"On Display",image:zt[3],link:""},{AColumn:"05",BColumnWidth:"Mason Brooks",CColumnWidth:"Sights of Tomorrow",DColumnWidth:"Tampa, FL",EColumnWidth:"Postponed",image:zt[4],link:""},{AColumn:"06",BColumnWidth:"Sophia Mitchell",CColumnWidth:"Velvet Horizons",DColumnWidth:"Albuquerque, NM",EColumnWidth:"Scheduled",image:zt[5],link:""},{AColumn:"07",BColumnWidth:"Jackson Turner",CColumnWidth:"Ink & Aurora",DColumnWidth:"Pittsburgh, PA",EColumnWidth:"On Display",image:zt[6],link:""}],au=[...gn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],su={type:"object",version:1,content:{type:"array",settings:{addItemWithoutImage:!0},display:{type:"array",ref:{columnsOrder:"settings.properties.columnsOrder",columnsCount:"settings.properties.columns"}},items:{type:"object",properties:{...qd(),image:{type:"object",label:"Image",display:{isObjectFitEditable:!1,type:"media-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]},link:{type:"string",label:"Link",placeholder:"Add link...",display:{type:"text-input"}}},required:["image"]},default:ru},settings:{sizing:"auto auto",properties:{type:{type:"string",scope:"layout",title:"",display:{type:"radio-group"},enum:["A","B"]},columns:{type:"number",scope:"layout",title:"Columns",display:{type:"count-number"},min:1,max:5},wrapperWidth:{type:"number",scope:"layout",title:"Width",display:{type:"numeric-input"},min:0,max:9999},textPaddingLR:{type:"number",scope:"layout",title:"Text Padding LR",min:0,max:9999,display:{type:"range-control"}},entriesCount:{type:"number",scope:"layout",title:"Entries #",display:{type:"toggle-numeric-input",enum:["Auto","Fixed"]},min:1},cellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},imageOnHover:{type:"boolean",scope:"common",title:"Image On Hover",display:{type:"toggle-cycle",enum:["On","Off"]}},imageSize:{type:"object",scope:"layout",title:"Image size",display:{type:"min-max-input"},min:1,max:1440,properties:{min:{type:"number"},max:{type:"number"}}},dividerWidth:{type:"number",scope:"layout",title:"Divider width",display:{type:"numeric-input"},min:0,max:9999},showVisibility:{type:"array",scope:"common",title:"Show",display:{type:"double-toggle",enum:["Top","Bottom"]},items:{type:"boolean"},default:[!0,!1]},cut:{type:"number",scope:"layout",title:"Cut",display:{type:"toggle-numeric-input",enum:["Off","On"]},min:1},entryHoverEffect:{type:"string",scope:"common",title:"Entry Hover Effect",display:{type:"toggle-cycle",enum:["None","Default","Blinds"]}},cutCellMinHeight:{type:"number",scope:"layout",title:"Cell min height",display:{type:"numeric-input"},min:0,max:9999},cutLabel:{type:"string",scope:"common",title:"Cut Label",display:{type:"label-input"}},showCut:{type:"number",scope:"layout",title:"Show",display:{type:"toggle-numeric-input",enum:["All","Custom"]},min:1},rowPaddingTop:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},rowPaddingBottom:{type:"number",scope:"layout",title:"Row Padding Bottom",min:0,max:100,display:{type:"range-control"}},rowPaddingTopB:{type:"number",scope:"layout",title:"Row Padding Top",min:0,max:100,display:{type:"range-control"}},...Ud(),columnsOrder:{type:"array",scope:"layout",title:"Columns Order",display:{type:"reorder-input"},items:{type:"string"}},textColor:{type:"string",scope:"common",title:"Text Default",display:{type:"palette-color-picker"}},textHoverColor:{type:"string",scope:"common",title:"Text Hover",display:{type:"palette-color-picker"}},...Yd,backgroundColor:{type:"string",scope:"common",title:"BG Default",display:{type:"palette-color-picker"}},dividerColor:{type:"string",scope:"common",title:"Divider Default",display:{type:"palette-color-picker"}},backgroundHoverColor:{type:"string",scope:"common",title:"BG Hover",display:{type:"palette-color-picker"}},dividerHoverColor:{type:"string",scope:"common",title:"Divider Hover",display:{type:"palette-color-picker"}}},defaults:{imageOnHover:"Off",entryHoverEffect:"None",cutLabel:"SEE ALL",showVisibility:[!0,!0],textColor:"#767676",textHoverColor:"#767676",...Jd,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:er({type:"B",textPaddingLR:.0373,entriesCount:0,cellMinHeight:.02,imageSize:{min:80,max:320},dividerWidth:.002,cut:0,showCut:0,cutCellMinHeight:.043,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.003,textCorners:.192,textPadding:{top:.0373,right:.0373,bottom:.0373,left:.0373},...tr({textFontSize:.043,textLineHeight:.043,textTextAlign:"center"})}),d:er({type:"A",textPaddingLR:.01,entriesCount:0,cellMinHeight:.03,imageSize:{min:80,max:320},dividerWidth:6e-4,cut:0,showCut:0,cutCellMinHeight:.03,rowPaddingTop:.01,rowPaddingBottom:.01,rowPaddingTopB:.01,textStroke:.001,textCorners:.05,textPadding:{top:.01,right:.01,bottom:.01,left:.01},...tr({textFontSize:.01,textLineHeight:.01})})},displayRules:[...Qd(),...iu.map(e=>({if:{name:"cut",value:0},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.textPaddingLR.display.visible",value:!1}},...ou.map(e=>({if:{name:"type",value:"B"},then:{name:`properties.${e}.display.visible`,value:!1}})),{if:{name:"type",value:"A"},then:{name:"properties.rowPaddingTopB.display.visible",value:!1}},...gn.map(e=>({if:{name:"type",value:"A"},then:{name:`properties.${e}ColumnPaddingBottom.display.visible`,value:!1}}))],layout:["__componentName__","name","type","columns","wrapperWidth","textPaddingLR","entriesCount","cellMinHeight","imageOnHover","imageSize","dividerWidth","showVisibility","cut","showCut","cutCellMinHeight","entryHoverEffect","cutLabel","rowPaddingTop","rowPaddingBottom","rowPaddingTopB",...au]},panels:[{id:"general",icon:"cursor",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__","name"]},"type",{type:"row",title:"",items:["columns","wrapperWidth"]},{type:"row",title:"",items:["entriesCount","cellMinHeight"]},{type:"row",title:"",items:["imageOnHover","imageSize"]},{type:"row",title:"",items:["entryHoverEffect"]},{type:"row",title:"Divider Settings",items:["dividerWidth","showVisibility"]},{type:"row",title:"",items:["cut"]},{type:"row",title:"Cut Settings",items:["cutLabel","cutCellMinHeight"]},{type:"row",title:"",items:["showCut"]}]},{id:"columnsOrder",icon:"layers",title:"Columns Order",tooltip:"Columns order",layout:["columnsOrder"]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:[Zd]}],paletteBookmark:{items:[...eu],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},lu={element:zd,id:"list",name:"Default List",category:"lists",layoutMode:"structured",preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Programme_List.png "},version:1,defaultSize:{d:{width:720,height:540}},assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},schema:su,sourceCode:Kd},nr=300,ir=40;function cu(e){return`
|
|
7520
|
+
.${e}-wrapper {
|
|
7521
|
+
position: relative;
|
|
7522
|
+
width: 100%;
|
|
7523
|
+
height: 100%;
|
|
7524
|
+
}
|
|
7525
|
+
|
|
7526
|
+
.${e}-cover {
|
|
7527
|
+
position: relative;
|
|
7528
|
+
width: 100%;
|
|
7529
|
+
height: 100%;
|
|
7530
|
+
cursor: pointer;
|
|
7531
|
+
}
|
|
7532
|
+
|
|
7533
|
+
.${e}-cover-image {
|
|
7534
|
+
display: block;
|
|
7535
|
+
width: 100%;
|
|
7536
|
+
height: 100%;
|
|
7537
|
+
}
|
|
7538
|
+
|
|
7539
|
+
.${e}-lightbox {
|
|
7540
|
+
position: fixed;
|
|
7541
|
+
inset: 0;
|
|
7542
|
+
z-index: 9997;
|
|
7543
|
+
display: flex;
|
|
7544
|
+
flex-direction: column;
|
|
7545
|
+
align-items: center;
|
|
7546
|
+
justify-content: center;
|
|
7547
|
+
}
|
|
7548
|
+
|
|
7549
|
+
.${e}-lightbox-editor {
|
|
7550
|
+
width: var(--cntrl-article-width, 100vw) !important;
|
|
7551
|
+
margin-left: auto;
|
|
7552
|
+
margin-right: auto;
|
|
7553
|
+
}
|
|
7554
|
+
|
|
7555
|
+
.${e}-lightbox-edit-mode {
|
|
7556
|
+
z-index: 1;
|
|
7557
|
+
}
|
|
7558
|
+
|
|
7559
|
+
.${e}-lightbox-content {
|
|
7560
|
+
position: relative;
|
|
7561
|
+
z-index: 1;
|
|
7562
|
+
display: flex;
|
|
7563
|
+
flex-direction: column;
|
|
7564
|
+
align-items: center;
|
|
7565
|
+
justify-content: center;
|
|
7566
|
+
width: 100%;
|
|
7567
|
+
height: 100%;
|
|
7568
|
+
box-sizing: border-box;
|
|
7569
|
+
}
|
|
7570
|
+
|
|
7571
|
+
.${e}-lightbox-backdrop {
|
|
7572
|
+
position: absolute;
|
|
7573
|
+
inset: 0;
|
|
7574
|
+
pointer-events: none;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
.${e}-lightbox-strip {
|
|
7578
|
+
position: relative;
|
|
7579
|
+
flex: 1;
|
|
7580
|
+
width: 100%;
|
|
7581
|
+
min-height: 0;
|
|
7582
|
+
display: flex;
|
|
7583
|
+
flex-direction: row;
|
|
7584
|
+
flex-wrap: nowrap;
|
|
7585
|
+
align-items: center;
|
|
7586
|
+
max-width: 100%;
|
|
7587
|
+
overflow-x: auto;
|
|
7588
|
+
scroll-snap-type: x mandatory;
|
|
7589
|
+
box-sizing: border-box;
|
|
7590
|
+
touch-action: pan-x;
|
|
7591
|
+
scrollbar-width: none;
|
|
7592
|
+
}
|
|
7593
|
+
|
|
7594
|
+
.${e}-lightbox-strip[data-mouse-dragging="true"] {
|
|
7595
|
+
cursor: grabbing;
|
|
7596
|
+
scroll-snap-type: none;
|
|
7597
|
+
}
|
|
7598
|
+
|
|
7599
|
+
.${e}-lightbox-strip[data-mouse-draggable="true"] {
|
|
7600
|
+
cursor: grab;
|
|
7601
|
+
}
|
|
7602
|
+
|
|
7603
|
+
.${e}-lightbox-strip::-webkit-scrollbar {
|
|
7604
|
+
display: none;
|
|
7605
|
+
}
|
|
7606
|
+
|
|
7607
|
+
.${e}-strip-item {
|
|
7608
|
+
position: relative;
|
|
7609
|
+
flex: 0 0 auto;
|
|
7610
|
+
height: 100%;
|
|
7611
|
+
scroll-snap-align: start;
|
|
7612
|
+
scroll-snap-stop: always;
|
|
7613
|
+
}
|
|
7614
|
+
|
|
7615
|
+
.${e}-thumbnails {
|
|
7616
|
+
position: absolute;
|
|
7617
|
+
bottom: 16px;
|
|
7618
|
+
left: 50%;
|
|
7619
|
+
transform: translateX(-50%);
|
|
7620
|
+
z-index: 2;
|
|
7621
|
+
display: flex;
|
|
7622
|
+
flex-direction: row;
|
|
7623
|
+
flex-wrap: nowrap;
|
|
7624
|
+
align-items: center;
|
|
7625
|
+
justify-content: center;
|
|
7626
|
+
max-width: calc(100% - 32px);
|
|
7627
|
+
overflow-x: auto;
|
|
7628
|
+
scrollbar-width: none;
|
|
7629
|
+
pointer-events: auto;
|
|
7630
|
+
}
|
|
7631
|
+
|
|
7632
|
+
.${e}-lightbox-editor .${e}-thumbnails {
|
|
7633
|
+
overflow: visible;
|
|
7634
|
+
}
|
|
7635
|
+
|
|
7636
|
+
.${e}-thumbnails::-webkit-scrollbar {
|
|
7637
|
+
display: none;
|
|
7638
|
+
}
|
|
7639
|
+
|
|
7640
|
+
.${e}-thumb {
|
|
7641
|
+
flex: 0 0 auto;
|
|
7642
|
+
display: flex;
|
|
7643
|
+
align-items: center;
|
|
7644
|
+
justify-content: center;
|
|
7645
|
+
padding: 0;
|
|
7646
|
+
border: 1px solid transparent;
|
|
7647
|
+
background: transparent;
|
|
7648
|
+
cursor: pointer;
|
|
7649
|
+
opacity: 0.5;
|
|
7650
|
+
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
7651
|
+
}
|
|
7652
|
+
|
|
7653
|
+
.${e}-thumb[data-active="true"] {
|
|
7654
|
+
opacity: 1;
|
|
7655
|
+
}
|
|
7656
|
+
|
|
7657
|
+
.${e}-thumbnails[data-thumbnail-active="invert"] .${e}-thumb[data-active="true"] .${e}-thumb-image {
|
|
7658
|
+
filter: invert(1);
|
|
7659
|
+
}
|
|
7660
|
+
|
|
7661
|
+
.${e}-thumbnails[data-thumbnail-active="grayscale"] .${e}-thumb:not([data-active="true"]) .${e}-thumb-image {
|
|
7662
|
+
filter: grayscale(1);
|
|
7663
|
+
}
|
|
7664
|
+
|
|
7665
|
+
.${e}-thumbnails[data-thumbnail-active="scale-up"] .${e}-thumb[data-active="true"] {
|
|
7666
|
+
transform: scale(1.15);
|
|
7667
|
+
}
|
|
7668
|
+
|
|
7669
|
+
.${e}-thumbnails[data-thumbnail-active="opacity"] .${e}-thumb:not([data-active="true"]) {
|
|
7670
|
+
opacity: 0.5;
|
|
7671
|
+
}
|
|
7672
|
+
|
|
7673
|
+
.${e}-thumb-image {
|
|
7674
|
+
display: block;
|
|
7675
|
+
max-width: ${ir}px;
|
|
7676
|
+
max-height: ${ir}px;
|
|
7677
|
+
width: auto;
|
|
7678
|
+
height: auto;
|
|
7679
|
+
object-fit: contain;
|
|
7680
|
+
transition: filter 0.2s ease;
|
|
7681
|
+
}
|
|
7682
|
+
.${e}-close-icon {
|
|
7683
|
+
position: relative;
|
|
7684
|
+
flex-shrink: 0;
|
|
7685
|
+
margin-left: auto;
|
|
7686
|
+
pointer-events: auto;
|
|
7687
|
+
z-index: 2;
|
|
7688
|
+
display: flex;
|
|
7689
|
+
align-items: center;
|
|
7690
|
+
justify-content: center;
|
|
7691
|
+
border: none;
|
|
7692
|
+
background-color: transparent;
|
|
7693
|
+
padding: 0;
|
|
7694
|
+
}
|
|
7695
|
+
|
|
7696
|
+
.${e}-close-icon-inner {
|
|
7697
|
+
all: unset;
|
|
7698
|
+
position: relative;
|
|
7699
|
+
cursor: pointer;
|
|
7700
|
+
width: 100%;
|
|
7701
|
+
height: 100%;
|
|
7702
|
+
pointer-events: auto;
|
|
7703
|
+
}
|
|
7704
|
+
|
|
7705
|
+
.${e}-close-icon-img {
|
|
7706
|
+
position: absolute;
|
|
7707
|
+
top: 50%;
|
|
7708
|
+
left: 50%;
|
|
7709
|
+
transform: translate(-50%, -50%);
|
|
7710
|
+
}
|
|
7711
|
+
|
|
7712
|
+
.${e}-text {
|
|
7713
|
+
position: relative;
|
|
7714
|
+
flex: 0 1 auto;
|
|
7715
|
+
z-index: 2;
|
|
7716
|
+
box-sizing: border-box;
|
|
7717
|
+
pointer-events: none;
|
|
7718
|
+
word-break: break-word;
|
|
7719
|
+
}
|
|
7720
|
+
.${e}-lightbox-content-inner {
|
|
7721
|
+
position: absolute;
|
|
7722
|
+
inset: 0;
|
|
7723
|
+
z-index: 2;
|
|
7724
|
+
pointer-events: none;
|
|
7725
|
+
display: flex;
|
|
7726
|
+
flex-direction: column;
|
|
7727
|
+
}
|
|
7728
|
+
|
|
7729
|
+
.${e}-lightbox-content-area {
|
|
7730
|
+
position: relative;
|
|
7731
|
+
display: flex;
|
|
7732
|
+
flex-direction: row;
|
|
7733
|
+
align-items: flex-start;
|
|
7734
|
+
flex: 1;
|
|
7735
|
+
min-width: 0;
|
|
7736
|
+
}
|
|
7737
|
+
|
|
7738
|
+
.${e}-control {
|
|
7739
|
+
position: relative;
|
|
7740
|
+
z-index: 2;
|
|
7741
|
+
pointer-events: auto;
|
|
7742
|
+
flex-shrink: 0;
|
|
7743
|
+
}
|
|
7744
|
+
|
|
7745
|
+
.${e}-control::before {
|
|
7746
|
+
content: "";
|
|
7747
|
+
position: absolute;
|
|
7748
|
+
top: 0;
|
|
7749
|
+
left: 0;
|
|
7750
|
+
width: 100%;
|
|
7751
|
+
height: 100%;
|
|
7752
|
+
pointer-events: auto;
|
|
7753
|
+
z-index: 10;
|
|
7754
|
+
}
|
|
7755
|
+
`}const du=e=>{let t=e;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n)return n;const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i)return i;t=t.parentElement}},uu=3,pu=3,mu=20,or=e=>`max(${e}, ${mu}px)`,gu=({prefix:e,images:t,backgroundColor:n,thumbnailGap:i,imageGap:a,isEditor:s,isEditMode:o,isPreviewMode:d,closeIcon:l,closeIconMaxWidth:u,closeIconColor:p,closeIconHoverColor:I,thumbnailTrigger:b,thumbnailVisibility:w,thumbnailObjectFit:f,thumbnailActive:h,articleWidthCss:T,text:L,textMaxWidth:C,textStyle:m,contentMarginTop:z,contentMarginLeft:j,contentMarginRight:R,onClose:x})=>{const A=!!o,S=!s||!!d,K=!s||!!d,v=c.useRef(null),D=c.useRef([]),W=c.useRef(0),q=c.useRef({isActive:!1,startX:0,scrollLeft:0,hasMoved:!1}),G=t.length>1,$=G?pu:1,H=c.useMemo(()=>Array.from({length:$},()=>t).flat(),[t,$]),[_,B]=c.useState(!1),[k,P]=c.useState(!1),[te,ae]=c.useState(0),re=c.useRef(null),U=c.useRef(!1),N=c.useRef(null),oe=c.useCallback(()=>{U.current||(U.current=!0,P(!1),N.current=setTimeout(()=>{x()},nr))},[x]),ye=()=>{if(!G||t.length===0)return W.current=0,0;const M=D.current[0],F=D.current[t.length];if(!M||!F)return W.current;const O=F.offsetLeft-M.offsetLeft;return O>0&&(W.current=O),W.current},ce=(M=!1)=>{if(!G)return;const F=v.current,O=ye();!F||O<=0||(F.scrollLeft<=0?(F.scrollLeft+=O,M&&(q.current.scrollLeft+=O)):F.scrollLeft>=O*2&&(F.scrollLeft-=O,M&&(q.current.scrollLeft-=O)))},ge=(M=(F=>(F=v.current)==null?void 0:F.scrollLeft)()??0)=>{let O=0,ie=1/0;return D.current.forEach((pe,le)=>{if(!pe)return;const he=Math.abs(pe.offsetLeft-M);he<ie&&(ie=he,O=le)}),O},we=()=>{!v.current||t.length===0||re.current===null&&ae(ge()%t.length)},ee=()=>{re.current=null,we()},y=(M="smooth")=>{const F=v.current;if(!F||t.length===0)return;const O=ge(),ie=D.current[O];ie&&(F.scrollTo({left:ie.offsetLeft,behavior:M}),ae(O%t.length))},g=(M,F="smooth")=>{const O=v.current,ie=G?t.length+M:M,pe=D.current[ie];!O||!pe||(F==="smooth"?re.current=M:re.current=null,ae(M),O.scrollTo({left:pe.offsetLeft,behavior:F}))},V=M=>{if(!S||M.pointerType!=="mouse"||M.target.closest("[data-controls]"))return;const O=v.current;O&&(q.current={isActive:!0,startX:M.clientX,scrollLeft:O.scrollLeft,hasMoved:!1},O.setPointerCapture(M.pointerId))},J=M=>{if(!S||M.pointerType!=="mouse")return;const F=v.current;if(!F||!q.current.isActive)return;const O=M.clientX-q.current.startX;Math.abs(O)>uu&&(q.current.hasMoved=!0,B(!0)),q.current.hasMoved&&(M.preventDefault(),F.scrollLeft=q.current.scrollLeft-O,ce(!0),we())},Q=M=>{if(!S||M.pointerType!=="mouse")return;const F=v.current;if(!F)return;const O=q.current.hasMoved;q.current.isActive=!1,B(!1),F.hasPointerCapture(M.pointerId)&&F.releasePointerCapture(M.pointerId),ce(),O?y():we()};return c.useEffect(()=>{const M=requestAnimationFrame(()=>P(!0));return()=>cancelAnimationFrame(M)},[]),c.useEffect(()=>()=>{N.current&&clearTimeout(N.current)},[]),c.useEffect(()=>{const M=F=>{F.key==="Escape"&&oe()};return window.addEventListener("keydown",M),()=>window.removeEventListener("keydown",M)},[oe]),c.useEffect(()=>{const M=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=M}},[]),c.useLayoutEffect(()=>{ye(),g(0,"auto")},[t.length,G]),c.useEffect(()=>{const M=v.current;if(!M)return;let F=null;const O=()=>{ce(),we(),re.current!==null&&(F&&clearTimeout(F),F=setTimeout(()=>{re.current!==null&&ee()},150))},ie=()=>{re.current!==null&&(F&&(clearTimeout(F),F=null),ee())};M.addEventListener("scroll",O,{passive:!0}),M.addEventListener("scrollend",ie);const pe=new ResizeObserver(()=>{ye(),ce(),we()});return pe.observe(M),()=>{F&&clearTimeout(F),M.removeEventListener("scroll",O),M.removeEventListener("scrollend",ie),pe.disconnect()}},[t.length,G]),r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${s?` ${e}-lightbox-editor`:""}${o?` ${e}-lightbox-edit-mode`:""}`,onClick:oe,role:"dialog","aria-modal":"true","aria-label":"Image gallery",style:{opacity:k?1:0,transition:`opacity ${nr}ms ease`,pointerEvents:k?"auto":"none",...T?{"--cntrl-article-width":T}:{}},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:n}}),r.jsxs("div",{className:`${e}-lightbox-content`,onClick:M=>M.stopPropagation(),children:[r.jsx("div",{ref:v,className:`${e}-lightbox-strip`,style:{gap:a},"data-mouse-draggable":S&&t.length>0?"true":"false","data-mouse-dragging":_?"true":"false",onPointerDown:S?V:void 0,onPointerMove:S?J:void 0,onPointerUp:S?Q:void 0,onPointerCancel:S?Q:void 0,children:H.map((M,F)=>{const O=M.image.objectFit??"contain",ie=F%t.length,pe=Math.floor(F/t.length),le=pe===1,he=or(a),Y=`calc(-0.5 * (${he} + ${a}))`;return r.jsxs("div",{ref:Z=>{D.current[F]=Z},className:`${e}-strip-item`,style:{height:"100%"},"aria-hidden":!le,children:[r.jsx("img",{src:M.image.url,alt:le?M.image.name??"":"",draggable:!1,style:{display:"block",width:"100%",height:"100%",objectFit:O}}),A&&le&&ie<t.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Y,width:he,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${pe}-${M.image.url}-${ie}`)})}),t.length>1&&w==="on"&&r.jsx("div",{className:`${e}-thumbnails`,"data-thumbnail-active":h,style:{gap:i},children:t.map((M,F)=>{const O=or(i),ie=`calc(-0.5 * (${O} + ${i}))`;return r.jsxs("div",{style:{position:"relative",flex:"0 0 auto"},children:[r.jsx("button",{type:"button",className:`${e}-thumb`,"data-active":te===F?"true":"false",onClick:()=>{b==="click"&&g(F)},onMouseEnter:()=>{K&&b==="hover"&&g(F)},"aria-label":M.image.name?`View ${M.image.name}`:`View image ${F+1}`,"aria-current":te===F?"true":void 0,children:r.jsx("img",{className:`${e}-thumb-image`,src:M.image.url,alt:"",draggable:!1})}),A&&F<t.length-1&&r.jsx("div",{"data-controls":"thumbnailGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:ie,width:O,height:"100%",pointerEvents:"auto",zIndex:3}})]},`thumb-${M.image.url}-${F}`)})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,style:{width:"100%",height:"100%"},children:[r.jsx("div",{"data-controls":A?"contentMarginTop":void 0,className:A?`${e}-control`:void 0,style:{height:z,width:"100%"}}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",width:"100%"},children:[r.jsx("div",{"data-controls":A?"contentMarginLeft":void 0,"data-controls-axis":A?"x":void 0,className:A?`${e}-control`:void 0,style:{width:j,flexShrink:0}}),r.jsxs("div",{className:`${e}-lightbox-content-area`,children:[L.length>0&&r.jsx("div",{className:`${e}-text`,style:{...m,maxWidth:C},children:r.jsx(sn,{content:L})}),l&&r.jsx("div",{className:`${e}-close-icon`,style:{width:E.scalingValue(u??0,s),height:E.scalingValue(u??0,s),"--close-icon-hover-color":I},children:r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:oe,"aria-label":"Close",children:r.jsx(yt,{url:l,fill:p,hoverFill:I,className:`${e}-close-icon-img`})})})]}),r.jsx("div",{"data-controls":A?"contentMarginRight":void 0,"data-controls-axis":A?"x":void 0,className:A?`${e}-control`:void 0,style:{width:R,flexShrink:0}})]})]})]})]})},hu=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:a,portalId:s})=>{const{prefix:o}=E.useScopedStyles(),{cover:d,coverFit:l,backgroundColor:u,thumbnailVisibility:p,thumbnailObjectFit:I,thumbnailTrigger:b,thumbnailActive:w,thumbnailGap:f,imageGap:h,textMaxWidth:T,textColor:L,textFontSize:C,textFontWeight:m,textFontFamily:z,textLineHeight:j,textLetterSpacing:R,closeIcon:x,closeIconMaxWidth:A,closeIconColor:S,closeIconHoverColor:K,contentMarginTop:v,contentMarginLeft:D,contentMarginRight:W}=e,q=re=>E.scalingValue(re,n??!1),G={color:L,fontFamily:Nn(z),fontSize:q(C),fontWeight:m,lineHeight:j,letterSpacing:q(R)},$=c.useRef(null),[H,_]=c.useState(!1),[B,k]=c.useState(),P=t??[],te=()=>{P.length!==0&&(n&&$.current&&k(du($.current)),_(!0))},ae=()=>{_(!1)};return r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:$,className:`${o}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:cu(o)}}),d?r.jsx("button",{type:"button",className:`${o}-cover`,onClick:te,style:{display:"block",padding:0,border:"none",background:"transparent"},"aria-label":"Open image gallery",children:r.jsx("img",{className:`${o}-cover-image`,src:d,alt:"cover",style:{objectFit:l==="cover"?"cover":"contain"}})}):null]}),H&&typeof document<"u"&&(()=>{var U;const re=(s?document.getElementById(s):null)??document.body;return In.createPortal(r.jsx(gu,{prefix:o,images:P,backgroundColor:u,thumbnailGap:q(f),imageGap:q(h??0),thumbnailVisibility:p,thumbnailObjectFit:I,thumbnailTrigger:b,thumbnailActive:w,text:((U=P.find(N=>Array.isArray(N.text)&&N.text.length>0))==null?void 0:U.text)??[],textMaxWidth:q(T),textStyle:G,contentMarginTop:q(v??0),contentMarginLeft:q(D??0),contentMarginRight:q(W??0),closeIcon:x,closeIconMaxWidth:A,closeIconColor:S,closeIconHoverColor:K,articleWidthCss:B,isEditor:n,isEditMode:i,isPreviewMode:a,onClose:ae}),re)})()]})},fu=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
7756
|
+
import { createPortal } from 'react-dom';
|
|
7757
|
+
import { CommonComponentProps } from '../props';
|
|
7758
|
+
import { scalingValue } from '../utils/scalingValue';
|
|
7759
|
+
import { useScopedStyles } from '../utils/useScopedStyles';
|
|
7760
|
+
import { SvgImage } from '../helpers/SvgImage/SvgImage';
|
|
7761
|
+
import { normalizeFontFamilyCssValue } from '../utils/textStylesToCss';
|
|
7762
|
+
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
7763
|
+
|
|
7764
|
+
const LIGHTBOX_ANIM_MS = 300;
|
|
7765
|
+
const THUMB_MAX_SIZE_PX = 40;
|
|
7766
|
+
|
|
7767
|
+
function getCSS(P: string): string {
|
|
7768
|
+
return \`
|
|
7769
|
+
.\${P}-wrapper {
|
|
7770
|
+
position: relative;
|
|
7771
|
+
width: 100%;
|
|
7772
|
+
height: 100%;
|
|
7773
|
+
}
|
|
7774
|
+
|
|
7775
|
+
.\${P}-cover {
|
|
7776
|
+
position: relative;
|
|
7777
|
+
width: 100%;
|
|
7778
|
+
height: 100%;
|
|
7779
|
+
cursor: pointer;
|
|
7780
|
+
}
|
|
7781
|
+
|
|
7782
|
+
.\${P}-cover-image {
|
|
7783
|
+
display: block;
|
|
7784
|
+
width: 100%;
|
|
7785
|
+
height: 100%;
|
|
7786
|
+
}
|
|
7787
|
+
|
|
7788
|
+
.\${P}-lightbox {
|
|
7789
|
+
position: fixed;
|
|
7790
|
+
inset: 0;
|
|
7791
|
+
z-index: 9997;
|
|
7792
|
+
display: flex;
|
|
7793
|
+
flex-direction: column;
|
|
7794
|
+
align-items: center;
|
|
7795
|
+
justify-content: center;
|
|
7796
|
+
}
|
|
7797
|
+
|
|
7798
|
+
.\${P}-lightbox-editor {
|
|
7799
|
+
width: var(--cntrl-article-width, 100vw) !important;
|
|
7800
|
+
margin-left: auto;
|
|
7801
|
+
margin-right: auto;
|
|
7802
|
+
}
|
|
7803
|
+
|
|
7804
|
+
.\${P}-lightbox-edit-mode {
|
|
7805
|
+
z-index: 1;
|
|
7806
|
+
}
|
|
7807
|
+
|
|
7808
|
+
.\${P}-lightbox-content {
|
|
7809
|
+
position: relative;
|
|
7810
|
+
z-index: 1;
|
|
7811
|
+
display: flex;
|
|
7812
|
+
flex-direction: column;
|
|
7813
|
+
align-items: center;
|
|
7814
|
+
justify-content: center;
|
|
7815
|
+
width: 100%;
|
|
7816
|
+
height: 100%;
|
|
7817
|
+
box-sizing: border-box;
|
|
7818
|
+
}
|
|
7819
|
+
|
|
7820
|
+
.\${P}-lightbox-backdrop {
|
|
7821
|
+
position: absolute;
|
|
7822
|
+
inset: 0;
|
|
7823
|
+
pointer-events: none;
|
|
7824
|
+
}
|
|
7825
|
+
|
|
7826
|
+
.\${P}-lightbox-strip {
|
|
7827
|
+
position: relative;
|
|
7828
|
+
flex: 1;
|
|
7829
|
+
width: 100%;
|
|
7830
|
+
min-height: 0;
|
|
7831
|
+
display: flex;
|
|
7832
|
+
flex-direction: row;
|
|
7833
|
+
flex-wrap: nowrap;
|
|
7834
|
+
align-items: center;
|
|
7835
|
+
max-width: 100%;
|
|
7836
|
+
overflow-x: auto;
|
|
7837
|
+
scroll-snap-type: x mandatory;
|
|
7838
|
+
box-sizing: border-box;
|
|
7839
|
+
touch-action: pan-x;
|
|
7840
|
+
scrollbar-width: none;
|
|
7841
|
+
}
|
|
7842
|
+
|
|
7843
|
+
.\${P}-lightbox-strip[data-mouse-dragging="true"] {
|
|
7844
|
+
cursor: grabbing;
|
|
7845
|
+
scroll-snap-type: none;
|
|
7846
|
+
}
|
|
7847
|
+
|
|
7848
|
+
.\${P}-lightbox-strip[data-mouse-draggable="true"] {
|
|
7849
|
+
cursor: grab;
|
|
7850
|
+
}
|
|
7851
|
+
|
|
7852
|
+
.\${P}-lightbox-strip::-webkit-scrollbar {
|
|
7853
|
+
display: none;
|
|
7854
|
+
}
|
|
7855
|
+
|
|
7856
|
+
.\${P}-strip-item {
|
|
7857
|
+
position: relative;
|
|
7858
|
+
flex: 0 0 auto;
|
|
7859
|
+
height: 100%;
|
|
7860
|
+
scroll-snap-align: start;
|
|
7861
|
+
scroll-snap-stop: always;
|
|
7862
|
+
}
|
|
7863
|
+
|
|
7864
|
+
.\${P}-thumbnails {
|
|
7865
|
+
position: absolute;
|
|
7866
|
+
bottom: 16px;
|
|
7867
|
+
left: 50%;
|
|
7868
|
+
transform: translateX(-50%);
|
|
7869
|
+
z-index: 2;
|
|
7870
|
+
display: flex;
|
|
7871
|
+
flex-direction: row;
|
|
7872
|
+
flex-wrap: nowrap;
|
|
7873
|
+
align-items: center;
|
|
7874
|
+
justify-content: center;
|
|
7875
|
+
max-width: calc(100% - 32px);
|
|
7876
|
+
overflow-x: auto;
|
|
7877
|
+
scrollbar-width: none;
|
|
7878
|
+
pointer-events: auto;
|
|
7879
|
+
}
|
|
7880
|
+
|
|
7881
|
+
.\${P}-lightbox-editor .\${P}-thumbnails {
|
|
7882
|
+
overflow: visible;
|
|
7883
|
+
}
|
|
7884
|
+
|
|
7885
|
+
.\${P}-thumbnails::-webkit-scrollbar {
|
|
7886
|
+
display: none;
|
|
7887
|
+
}
|
|
7888
|
+
|
|
7889
|
+
.\${P}-thumb {
|
|
7890
|
+
flex: 0 0 auto;
|
|
7891
|
+
display: flex;
|
|
7892
|
+
align-items: center;
|
|
7893
|
+
justify-content: center;
|
|
7894
|
+
padding: 0;
|
|
7895
|
+
border: 1px solid transparent;
|
|
7896
|
+
background: transparent;
|
|
7897
|
+
cursor: pointer;
|
|
7898
|
+
opacity: 0.5;
|
|
7899
|
+
transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
7900
|
+
}
|
|
7901
|
+
|
|
7902
|
+
.\${P}-thumb[data-active="true"] {
|
|
7903
|
+
opacity: 1;
|
|
7904
|
+
}
|
|
7905
|
+
|
|
7906
|
+
.\${P}-thumbnails[data-thumbnail-active="invert"] .\${P}-thumb[data-active="true"] .\${P}-thumb-image {
|
|
7907
|
+
filter: invert(1);
|
|
7908
|
+
}
|
|
7909
|
+
|
|
7910
|
+
.\${P}-thumbnails[data-thumbnail-active="grayscale"] .\${P}-thumb:not([data-active="true"]) .\${P}-thumb-image {
|
|
7911
|
+
filter: grayscale(1);
|
|
7912
|
+
}
|
|
7913
|
+
|
|
7914
|
+
.\${P}-thumbnails[data-thumbnail-active="scale-up"] .\${P}-thumb[data-active="true"] {
|
|
7915
|
+
transform: scale(1.15);
|
|
7916
|
+
}
|
|
7917
|
+
|
|
7918
|
+
.\${P}-thumbnails[data-thumbnail-active="opacity"] .\${P}-thumb:not([data-active="true"]) {
|
|
7919
|
+
opacity: 0.5;
|
|
7920
|
+
}
|
|
7921
|
+
|
|
7922
|
+
.\${P}-thumb-image {
|
|
7923
|
+
display: block;
|
|
7924
|
+
max-width: \${THUMB_MAX_SIZE_PX}px;
|
|
7925
|
+
max-height: \${THUMB_MAX_SIZE_PX}px;
|
|
7926
|
+
width: auto;
|
|
7927
|
+
height: auto;
|
|
7928
|
+
object-fit: contain;
|
|
7929
|
+
transition: filter 0.2s ease;
|
|
7930
|
+
}
|
|
7931
|
+
.\${P}-close-icon {
|
|
7932
|
+
position: relative;
|
|
7933
|
+
flex-shrink: 0;
|
|
7934
|
+
margin-left: auto;
|
|
7935
|
+
pointer-events: auto;
|
|
7936
|
+
z-index: 2;
|
|
7937
|
+
display: flex;
|
|
7938
|
+
align-items: center;
|
|
7939
|
+
justify-content: center;
|
|
7940
|
+
border: none;
|
|
7941
|
+
background-color: transparent;
|
|
7942
|
+
padding: 0;
|
|
7943
|
+
}
|
|
7944
|
+
|
|
7945
|
+
.\${P}-close-icon-inner {
|
|
7946
|
+
all: unset;
|
|
7947
|
+
position: relative;
|
|
7948
|
+
cursor: pointer;
|
|
7949
|
+
width: 100%;
|
|
7950
|
+
height: 100%;
|
|
7951
|
+
pointer-events: auto;
|
|
7952
|
+
}
|
|
7953
|
+
|
|
7954
|
+
.\${P}-close-icon-img {
|
|
7955
|
+
position: absolute;
|
|
7956
|
+
top: 50%;
|
|
7957
|
+
left: 50%;
|
|
7958
|
+
transform: translate(-50%, -50%);
|
|
7959
|
+
}
|
|
7960
|
+
|
|
7961
|
+
.\${P}-text {
|
|
7962
|
+
position: relative;
|
|
7963
|
+
flex: 0 1 auto;
|
|
7964
|
+
z-index: 2;
|
|
7965
|
+
box-sizing: border-box;
|
|
7966
|
+
pointer-events: none;
|
|
7967
|
+
word-break: break-word;
|
|
7968
|
+
}
|
|
7969
|
+
.\${P}-lightbox-content-inner {
|
|
7970
|
+
position: absolute;
|
|
7971
|
+
inset: 0;
|
|
7972
|
+
z-index: 2;
|
|
7973
|
+
pointer-events: none;
|
|
7974
|
+
display: flex;
|
|
7975
|
+
flex-direction: column;
|
|
7976
|
+
}
|
|
7977
|
+
|
|
7978
|
+
.\${P}-lightbox-content-area {
|
|
7979
|
+
position: relative;
|
|
7980
|
+
display: flex;
|
|
7981
|
+
flex-direction: row;
|
|
7982
|
+
align-items: flex-start;
|
|
7983
|
+
flex: 1;
|
|
7984
|
+
min-width: 0;
|
|
7985
|
+
}
|
|
7986
|
+
|
|
7987
|
+
.\${P}-control {
|
|
7988
|
+
position: relative;
|
|
7989
|
+
z-index: 2;
|
|
7990
|
+
pointer-events: auto;
|
|
7991
|
+
flex-shrink: 0;
|
|
7992
|
+
}
|
|
7993
|
+
|
|
7994
|
+
.\${P}-control::before {
|
|
7995
|
+
content: "";
|
|
7996
|
+
position: absolute;
|
|
7997
|
+
top: 0;
|
|
7998
|
+
left: 0;
|
|
7999
|
+
width: 100%;
|
|
8000
|
+
height: 100%;
|
|
8001
|
+
pointer-events: auto;
|
|
8002
|
+
z-index: 10;
|
|
8003
|
+
}
|
|
8004
|
+
\`;
|
|
8005
|
+
}
|
|
8006
|
+
|
|
8007
|
+
const getArticleWidthCSSValue = (start: HTMLElement | null): string | undefined => {
|
|
8008
|
+
let el = start;
|
|
8009
|
+
while (el) {
|
|
8010
|
+
const inline = el.style.getPropertyValue('--cntrl-article-width').trim();
|
|
8011
|
+
if (inline) return inline;
|
|
8012
|
+
const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();
|
|
8013
|
+
if (computed) return computed;
|
|
8014
|
+
el = el.parentElement;
|
|
8015
|
+
}
|
|
8016
|
+
return undefined;
|
|
8017
|
+
};
|
|
8018
|
+
|
|
8019
|
+
type LightboxOverlayProps = {
|
|
8020
|
+
prefix: string;
|
|
8021
|
+
images: LightboxStripItem[];
|
|
8022
|
+
backgroundColor: string;
|
|
8023
|
+
thumbnailGap: string;
|
|
8024
|
+
imageGap: string;
|
|
8025
|
+
closeIcon: string | null;
|
|
8026
|
+
closeIconMaxWidth: number;
|
|
8027
|
+
closeIconColor: string;
|
|
8028
|
+
closeIconHoverColor: string;
|
|
8029
|
+
thumbnailVisibility: 'on' | 'off';
|
|
8030
|
+
thumbnailObjectFit: 'cover' | 'contain';
|
|
8031
|
+
thumbnailTrigger: 'click' | 'hover';
|
|
8032
|
+
thumbnailActive: 'invert' | 'grayscale' | 'scale-up' | 'opacity';
|
|
8033
|
+
text: any[];
|
|
8034
|
+
textMaxWidth: string;
|
|
8035
|
+
textStyle: React.CSSProperties;
|
|
8036
|
+
contentMarginTop: string;
|
|
8037
|
+
contentMarginLeft: string;
|
|
8038
|
+
contentMarginRight: string;
|
|
8039
|
+
articleWidthCss?: string;
|
|
8040
|
+
isEditor?: boolean;
|
|
8041
|
+
isEditMode?: boolean;
|
|
8042
|
+
isPreviewMode?: boolean;
|
|
8043
|
+
onClose: () => void;
|
|
8044
|
+
};
|
|
8045
|
+
|
|
8046
|
+
const MOUSE_DRAG_THRESHOLD_PX = 3;
|
|
8047
|
+
const LOOP_COPIES = 3;
|
|
8048
|
+
const GAP_LABEL_AREA_PX = 20;
|
|
8049
|
+
|
|
8050
|
+
const getGapControlSize = (gap: string) => \`max(\${gap}, \${GAP_LABEL_AREA_PX}px)\`;
|
|
8051
|
+
|
|
8052
|
+
const LightboxOverlay = ({
|
|
8053
|
+
prefix: P,
|
|
8054
|
+
images,
|
|
8055
|
+
backgroundColor,
|
|
8056
|
+
thumbnailGap,
|
|
8057
|
+
imageGap,
|
|
8058
|
+
isEditor,
|
|
8059
|
+
isEditMode,
|
|
8060
|
+
isPreviewMode,
|
|
8061
|
+
closeIcon,
|
|
8062
|
+
closeIconMaxWidth,
|
|
8063
|
+
closeIconColor,
|
|
8064
|
+
closeIconHoverColor,
|
|
8065
|
+
thumbnailTrigger,
|
|
8066
|
+
thumbnailVisibility,
|
|
8067
|
+
thumbnailObjectFit,
|
|
8068
|
+
thumbnailActive,
|
|
8069
|
+
articleWidthCss,
|
|
8070
|
+
text,
|
|
8071
|
+
textMaxWidth,
|
|
8072
|
+
textStyle,
|
|
8073
|
+
contentMarginTop,
|
|
8074
|
+
contentMarginLeft,
|
|
8075
|
+
contentMarginRight,
|
|
8076
|
+
onClose,
|
|
8077
|
+
}: LightboxOverlayProps) => {
|
|
8078
|
+
const showControls = Boolean(isEditMode);
|
|
8079
|
+
const allowMouseDrag = !isEditor || Boolean(isPreviewMode);
|
|
8080
|
+
const allowThumbnailHover = !isEditor || Boolean(isPreviewMode);
|
|
8081
|
+
const stripRef = useRef<HTMLDivElement>(null);
|
|
8082
|
+
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
|
8083
|
+
const setWidthRef = useRef(0);
|
|
8084
|
+
const mouseDragRef = useRef({
|
|
8085
|
+
isActive: false,
|
|
8086
|
+
startX: 0,
|
|
8087
|
+
scrollLeft: 0,
|
|
8088
|
+
hasMoved: false,
|
|
8089
|
+
});
|
|
8090
|
+
const isLoopEnabled = images.length > 1;
|
|
8091
|
+
const loopCopies = isLoopEnabled ? LOOP_COPIES : 1;
|
|
8092
|
+
const flatItems = useMemo(
|
|
8093
|
+
() => Array.from({ length: loopCopies }, () => images).flat(),
|
|
8094
|
+
[images, loopCopies],
|
|
8095
|
+
);
|
|
8096
|
+
const [isMouseDragging, setIsMouseDragging] = useState(false);
|
|
8097
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
8098
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
8099
|
+
const lockedActiveIndexRef = useRef<number | null>(null);
|
|
8100
|
+
const isClosingRef = useRef(false);
|
|
8101
|
+
const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
8102
|
+
|
|
8103
|
+
const handleClose = useCallback(() => {
|
|
8104
|
+
if (isClosingRef.current) return;
|
|
8105
|
+
isClosingRef.current = true;
|
|
8106
|
+
setIsVisible(false);
|
|
8107
|
+
closeTimeoutRef.current = setTimeout(() => {
|
|
8108
|
+
onClose();
|
|
8109
|
+
}, LIGHTBOX_ANIM_MS);
|
|
8110
|
+
}, [onClose]);
|
|
8111
|
+
|
|
8112
|
+
const measureSetWidth = () => {
|
|
8113
|
+
if (!isLoopEnabled || images.length === 0) {
|
|
8114
|
+
setWidthRef.current = 0;
|
|
8115
|
+
return 0;
|
|
8116
|
+
}
|
|
8117
|
+
const firstItem = itemRefs.current[0];
|
|
8118
|
+
const firstMiddleSetItem = itemRefs.current[images.length];
|
|
8119
|
+
if (!firstItem || !firstMiddleSetItem) return setWidthRef.current;
|
|
8120
|
+
const nextSetWidth = firstMiddleSetItem.offsetLeft - firstItem.offsetLeft;
|
|
8121
|
+
if (nextSetWidth > 0) {
|
|
8122
|
+
setWidthRef.current = nextSetWidth;
|
|
8123
|
+
}
|
|
8124
|
+
return setWidthRef.current;
|
|
8125
|
+
};
|
|
8126
|
+
|
|
8127
|
+
const normalizeInfiniteScroll = (adjustMouseDragAnchor = false) => {
|
|
8128
|
+
if (!isLoopEnabled) return;
|
|
8129
|
+
const strip = stripRef.current;
|
|
8130
|
+
const setWidth = measureSetWidth();
|
|
8131
|
+
if (!strip || setWidth <= 0) return;
|
|
8132
|
+
|
|
8133
|
+
if (strip.scrollLeft <= 0) {
|
|
8134
|
+
strip.scrollLeft += setWidth;
|
|
8135
|
+
if (adjustMouseDragAnchor) {
|
|
8136
|
+
mouseDragRef.current.scrollLeft += setWidth;
|
|
8137
|
+
}
|
|
8138
|
+
} else if (strip.scrollLeft >= setWidth * 2) {
|
|
8139
|
+
strip.scrollLeft -= setWidth;
|
|
8140
|
+
if (adjustMouseDragAnchor) {
|
|
8141
|
+
mouseDragRef.current.scrollLeft -= setWidth;
|
|
8142
|
+
}
|
|
8143
|
+
}
|
|
8144
|
+
};
|
|
8145
|
+
|
|
8146
|
+
const getNearestFlatIndex = (scrollLeft = stripRef.current?.scrollLeft ?? 0) => {
|
|
8147
|
+
let closestFlatIndex = 0;
|
|
8148
|
+
let closestDistance = Infinity;
|
|
8149
|
+
itemRefs.current.forEach((item, flatIndex) => {
|
|
8150
|
+
if (!item) return;
|
|
8151
|
+
const distance = Math.abs(item.offsetLeft - scrollLeft);
|
|
8152
|
+
if (distance < closestDistance) {
|
|
8153
|
+
closestDistance = distance;
|
|
8154
|
+
closestFlatIndex = flatIndex;
|
|
8155
|
+
}
|
|
8156
|
+
});
|
|
8157
|
+
return closestFlatIndex;
|
|
8158
|
+
};
|
|
8159
|
+
|
|
8160
|
+
const updateActiveIndex = () => {
|
|
8161
|
+
if (!stripRef.current || images.length === 0) return;
|
|
8162
|
+
if (lockedActiveIndexRef.current !== null) return;
|
|
8163
|
+
setActiveIndex(getNearestFlatIndex() % images.length);
|
|
8164
|
+
};
|
|
8165
|
+
|
|
8166
|
+
const releaseActiveIndexLock = () => {
|
|
8167
|
+
lockedActiveIndexRef.current = null;
|
|
8168
|
+
updateActiveIndex();
|
|
8169
|
+
};
|
|
8170
|
+
|
|
8171
|
+
const snapToNearestItem = (behavior: ScrollBehavior = 'smooth') => {
|
|
8172
|
+
const strip = stripRef.current;
|
|
8173
|
+
if (!strip || images.length === 0) return;
|
|
8174
|
+
const flatIndex = getNearestFlatIndex();
|
|
8175
|
+
const item = itemRefs.current[flatIndex];
|
|
8176
|
+
if (!item) return;
|
|
8177
|
+
strip.scrollTo({
|
|
8178
|
+
left: item.offsetLeft,
|
|
8179
|
+
behavior,
|
|
8180
|
+
});
|
|
8181
|
+
setActiveIndex(flatIndex % images.length);
|
|
8182
|
+
};
|
|
8183
|
+
|
|
8184
|
+
const scrollToIndex = (index: number, behavior: ScrollBehavior = 'smooth') => {
|
|
8185
|
+
const strip = stripRef.current;
|
|
8186
|
+
const flatIndex = isLoopEnabled ? images.length + index : index;
|
|
8187
|
+
const item = itemRefs.current[flatIndex];
|
|
8188
|
+
if (!strip || !item) return;
|
|
8189
|
+
if (behavior === 'smooth') {
|
|
8190
|
+
lockedActiveIndexRef.current = index;
|
|
8191
|
+
} else {
|
|
8192
|
+
lockedActiveIndexRef.current = null;
|
|
8193
|
+
}
|
|
8194
|
+
setActiveIndex(index);
|
|
8195
|
+
strip.scrollTo({
|
|
8196
|
+
left: item.offsetLeft,
|
|
8197
|
+
behavior,
|
|
8198
|
+
});
|
|
8199
|
+
};
|
|
8200
|
+
|
|
8201
|
+
const onStripPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
|
|
8202
|
+
if (!allowMouseDrag) return;
|
|
8203
|
+
if (event.pointerType !== 'mouse') return;
|
|
8204
|
+
const target = event.target as HTMLElement;
|
|
8205
|
+
if (target.closest('[data-controls]')) return;
|
|
8206
|
+
const strip = stripRef.current;
|
|
8207
|
+
if (!strip) return;
|
|
8208
|
+
mouseDragRef.current = {
|
|
8209
|
+
isActive: true,
|
|
8210
|
+
startX: event.clientX,
|
|
8211
|
+
scrollLeft: strip.scrollLeft,
|
|
8212
|
+
hasMoved: false,
|
|
8213
|
+
};
|
|
8214
|
+
strip.setPointerCapture(event.pointerId);
|
|
8215
|
+
};
|
|
8216
|
+
|
|
8217
|
+
const onStripPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
|
|
8218
|
+
if (!allowMouseDrag) return;
|
|
8219
|
+
if (event.pointerType !== 'mouse') return;
|
|
8220
|
+
const strip = stripRef.current;
|
|
8221
|
+
if (!strip || !mouseDragRef.current.isActive) return;
|
|
8222
|
+
const deltaX = event.clientX - mouseDragRef.current.startX;
|
|
8223
|
+
if (Math.abs(deltaX) > MOUSE_DRAG_THRESHOLD_PX) {
|
|
8224
|
+
mouseDragRef.current.hasMoved = true;
|
|
8225
|
+
setIsMouseDragging(true);
|
|
8226
|
+
}
|
|
8227
|
+
if (mouseDragRef.current.hasMoved) {
|
|
8228
|
+
event.preventDefault();
|
|
8229
|
+
strip.scrollLeft = mouseDragRef.current.scrollLeft - deltaX;
|
|
8230
|
+
normalizeInfiniteScroll(true);
|
|
8231
|
+
updateActiveIndex();
|
|
8232
|
+
}
|
|
8233
|
+
};
|
|
8234
|
+
|
|
8235
|
+
const endStripMouseDrag = (event: React.PointerEvent<HTMLDivElement>) => {
|
|
8236
|
+
if (!allowMouseDrag) return;
|
|
8237
|
+
if (event.pointerType !== 'mouse') return;
|
|
8238
|
+
const strip = stripRef.current;
|
|
8239
|
+
if (!strip) return;
|
|
8240
|
+
const hadMoved = mouseDragRef.current.hasMoved;
|
|
8241
|
+
mouseDragRef.current.isActive = false;
|
|
8242
|
+
setIsMouseDragging(false);
|
|
8243
|
+
if (strip.hasPointerCapture(event.pointerId)) {
|
|
8244
|
+
strip.releasePointerCapture(event.pointerId);
|
|
8245
|
+
}
|
|
8246
|
+
normalizeInfiniteScroll();
|
|
8247
|
+
if (hadMoved) {
|
|
8248
|
+
snapToNearestItem();
|
|
8249
|
+
} else {
|
|
8250
|
+
updateActiveIndex();
|
|
8251
|
+
}
|
|
8252
|
+
};
|
|
8253
|
+
|
|
8254
|
+
useEffect(() => {
|
|
8255
|
+
const frame = requestAnimationFrame(() => setIsVisible(true));
|
|
8256
|
+
return () => cancelAnimationFrame(frame);
|
|
8257
|
+
}, []);
|
|
8258
|
+
|
|
8259
|
+
useEffect(() => {
|
|
8260
|
+
return () => {
|
|
8261
|
+
if (closeTimeoutRef.current) {
|
|
8262
|
+
clearTimeout(closeTimeoutRef.current);
|
|
8263
|
+
}
|
|
8264
|
+
};
|
|
8265
|
+
}, []);
|
|
8266
|
+
|
|
8267
|
+
useEffect(() => {
|
|
8268
|
+
const onKeyDown = (event: KeyboardEvent) => {
|
|
8269
|
+
if (event.key === 'Escape') {
|
|
8270
|
+
handleClose();
|
|
8271
|
+
}
|
|
8272
|
+
};
|
|
8273
|
+
window.addEventListener('keydown', onKeyDown);
|
|
8274
|
+
return () => window.removeEventListener('keydown', onKeyDown);
|
|
8275
|
+
}, [handleClose]);
|
|
8276
|
+
|
|
8277
|
+
useEffect(() => {
|
|
8278
|
+
const originalOverflow = document.body.style.overflow;
|
|
8279
|
+
document.body.style.overflow = 'hidden';
|
|
8280
|
+
return () => {
|
|
8281
|
+
document.body.style.overflow = originalOverflow;
|
|
8282
|
+
};
|
|
8283
|
+
}, []);
|
|
8284
|
+
|
|
8285
|
+
useLayoutEffect(() => {
|
|
8286
|
+
measureSetWidth();
|
|
8287
|
+
scrollToIndex(0, 'auto');
|
|
8288
|
+
}, [images.length, isLoopEnabled]);
|
|
8289
|
+
|
|
8290
|
+
useEffect(() => {
|
|
8291
|
+
const strip = stripRef.current;
|
|
8292
|
+
if (!strip) return;
|
|
8293
|
+
let scrollEndTimer: ReturnType<typeof setTimeout> | null = null;
|
|
8294
|
+
const onScroll = () => {
|
|
8295
|
+
normalizeInfiniteScroll();
|
|
8296
|
+
updateActiveIndex();
|
|
8297
|
+
if (lockedActiveIndexRef.current !== null) {
|
|
8298
|
+
if (scrollEndTimer) clearTimeout(scrollEndTimer);
|
|
8299
|
+
scrollEndTimer = setTimeout(() => {
|
|
8300
|
+
if (lockedActiveIndexRef.current !== null) {
|
|
8301
|
+
releaseActiveIndexLock();
|
|
8302
|
+
}
|
|
8303
|
+
}, 150);
|
|
8304
|
+
}
|
|
8305
|
+
};
|
|
8306
|
+
const onScrollEnd = () => {
|
|
8307
|
+
if (lockedActiveIndexRef.current !== null) {
|
|
8308
|
+
if (scrollEndTimer) {
|
|
8309
|
+
clearTimeout(scrollEndTimer);
|
|
8310
|
+
scrollEndTimer = null;
|
|
8311
|
+
}
|
|
8312
|
+
releaseActiveIndexLock();
|
|
8313
|
+
}
|
|
8314
|
+
};
|
|
8315
|
+
strip.addEventListener('scroll', onScroll, { passive: true });
|
|
8316
|
+
strip.addEventListener('scrollend', onScrollEnd);
|
|
8317
|
+
const observer = new ResizeObserver(() => {
|
|
8318
|
+
measureSetWidth();
|
|
8319
|
+
normalizeInfiniteScroll();
|
|
8320
|
+
updateActiveIndex();
|
|
8321
|
+
});
|
|
8322
|
+
observer.observe(strip);
|
|
8323
|
+
return () => {
|
|
8324
|
+
if (scrollEndTimer) clearTimeout(scrollEndTimer);
|
|
8325
|
+
strip.removeEventListener('scroll', onScroll);
|
|
8326
|
+
strip.removeEventListener('scrollend', onScrollEnd);
|
|
8327
|
+
observer.disconnect();
|
|
8328
|
+
};
|
|
8329
|
+
}, [images.length, isLoopEnabled]);
|
|
8330
|
+
|
|
8331
|
+
return (
|
|
8332
|
+
<div
|
|
8333
|
+
data-selection="none"
|
|
8334
|
+
className={\`\${P}-lightbox\${isEditor ? \` \${P}-lightbox-editor\` : ''}\${isEditMode ? \` \${P}-lightbox-edit-mode\` : ''}\`}
|
|
8335
|
+
onClick={handleClose}
|
|
8336
|
+
role="dialog"
|
|
8337
|
+
aria-modal="true"
|
|
8338
|
+
aria-label="Image gallery"
|
|
8339
|
+
style={{
|
|
8340
|
+
opacity: isVisible ? 1 : 0,
|
|
8341
|
+
transition: \`opacity \${LIGHTBOX_ANIM_MS}ms ease\`,
|
|
8342
|
+
pointerEvents: isVisible ? 'auto' : 'none',
|
|
8343
|
+
...(articleWidthCss ? { ['--cntrl-article-width' as string]: articleWidthCss } : {}),
|
|
8344
|
+
}}
|
|
8345
|
+
>
|
|
8346
|
+
<div className={\`\${P}-lightbox-backdrop\`} style={{ backgroundColor }} />
|
|
8347
|
+
<div
|
|
8348
|
+
className={\`\${P}-lightbox-content\`}
|
|
8349
|
+
onClick={(event) => event.stopPropagation()}
|
|
8350
|
+
>
|
|
8351
|
+
<div
|
|
8352
|
+
ref={stripRef}
|
|
8353
|
+
className={\`\${P}-lightbox-strip\`}
|
|
8354
|
+
style={{ gap: imageGap }}
|
|
8355
|
+
data-mouse-draggable={allowMouseDrag && images.length > 0 ? 'true' : 'false'}
|
|
8356
|
+
data-mouse-dragging={isMouseDragging ? 'true' : 'false'}
|
|
8357
|
+
onPointerDown={allowMouseDrag ? onStripPointerDown : undefined}
|
|
8358
|
+
onPointerMove={allowMouseDrag ? onStripPointerMove : undefined}
|
|
8359
|
+
onPointerUp={allowMouseDrag ? endStripMouseDrag : undefined}
|
|
8360
|
+
onPointerCancel={allowMouseDrag ? endStripMouseDrag : undefined}
|
|
8361
|
+
>
|
|
8362
|
+
{flatItems.map((item, flatIndex) => {
|
|
8363
|
+
const itemObjectFit = item.image.objectFit ?? 'contain';
|
|
8364
|
+
const sourceIndex = flatIndex % images.length;
|
|
8365
|
+
const copyIndex = Math.floor(flatIndex / images.length);
|
|
8366
|
+
const isMiddleCopy = copyIndex === 1;
|
|
8367
|
+
|
|
8368
|
+
const imageGapControlSize = getGapControlSize(imageGap);
|
|
8369
|
+
const imageGapControlRight = \`calc(-0.5 * (\${imageGapControlSize} + \${imageGap}))\`;
|
|
8370
|
+
|
|
8371
|
+
return (
|
|
8372
|
+
<div
|
|
8373
|
+
key={\`\${copyIndex}-\${item.image.url}-\${sourceIndex}\`}
|
|
8374
|
+
ref={(element) => {
|
|
8375
|
+
itemRefs.current[flatIndex] = element;
|
|
8376
|
+
}}
|
|
8377
|
+
className={\`\${P}-strip-item\`}
|
|
8378
|
+
style={{
|
|
8379
|
+
height: '100%',
|
|
8380
|
+
}}
|
|
8381
|
+
aria-hidden={!isMiddleCopy}
|
|
8382
|
+
>
|
|
8383
|
+
<img
|
|
8384
|
+
src={item.image.url}
|
|
8385
|
+
alt={isMiddleCopy ? (item.image.name ?? '') : ''}
|
|
8386
|
+
draggable={false}
|
|
8387
|
+
style={{
|
|
8388
|
+
display: 'block',
|
|
8389
|
+
width: '100%',
|
|
8390
|
+
height: '100%',
|
|
8391
|
+
objectFit: itemObjectFit,
|
|
8392
|
+
}}
|
|
8393
|
+
/>
|
|
8394
|
+
{showControls && isMiddleCopy && sourceIndex < images.length - 1 && (
|
|
8395
|
+
<div
|
|
8396
|
+
data-controls="imageGap"
|
|
8397
|
+
data-controls-axis="x"
|
|
8398
|
+
style={{
|
|
8399
|
+
position: 'absolute',
|
|
8400
|
+
top: 0,
|
|
8401
|
+
right: imageGapControlRight,
|
|
8402
|
+
width: imageGapControlSize,
|
|
8403
|
+
height: '100%',
|
|
8404
|
+
pointerEvents: 'auto',
|
|
8405
|
+
zIndex: 3,
|
|
8406
|
+
}}
|
|
8407
|
+
/>
|
|
8408
|
+
)}
|
|
8409
|
+
</div>
|
|
8410
|
+
);
|
|
8411
|
+
})}
|
|
8412
|
+
</div>
|
|
8413
|
+
|
|
8414
|
+
{images.length > 1 && thumbnailVisibility === 'on' && (
|
|
8415
|
+
<div
|
|
8416
|
+
className={\`\${P}-thumbnails\`}
|
|
8417
|
+
data-thumbnail-active={thumbnailActive}
|
|
8418
|
+
style={{ gap: thumbnailGap }}
|
|
8419
|
+
>
|
|
8420
|
+
{images.map((item, index) => {
|
|
8421
|
+
const thumbnailGapControlSize = getGapControlSize(thumbnailGap);
|
|
8422
|
+
const thumbnailGapControlRight = \`calc(-0.5 * (\${thumbnailGapControlSize} + \${thumbnailGap}))\`;
|
|
8423
|
+
|
|
8424
|
+
return (
|
|
8425
|
+
<div
|
|
8426
|
+
key={\`thumb-\${item.image.url}-\${index}\`}
|
|
8427
|
+
style={{ position: 'relative', flex: '0 0 auto' }}
|
|
8428
|
+
>
|
|
8429
|
+
<button
|
|
8430
|
+
type="button"
|
|
8431
|
+
className={\`\${P}-thumb\`}
|
|
8432
|
+
data-active={activeIndex === index ? 'true' : 'false'}
|
|
8433
|
+
onClick={() => {
|
|
8434
|
+
if (thumbnailTrigger === 'click') {
|
|
8435
|
+
scrollToIndex(index);
|
|
8436
|
+
}
|
|
8437
|
+
}}
|
|
8438
|
+
onMouseEnter={() => {
|
|
8439
|
+
if (allowThumbnailHover && thumbnailTrigger === 'hover') {
|
|
8440
|
+
scrollToIndex(index);
|
|
8441
|
+
}
|
|
8442
|
+
}}
|
|
8443
|
+
aria-label={item.image.name ? \`View \${item.image.name}\` : \`View image \${index + 1}\`}
|
|
8444
|
+
aria-current={activeIndex === index ? 'true' : undefined}
|
|
8445
|
+
>
|
|
8446
|
+
<img
|
|
8447
|
+
className={\`\${P}-thumb-image\`}
|
|
8448
|
+
src={item.image.url}
|
|
8449
|
+
alt=""
|
|
8450
|
+
draggable={false}
|
|
8451
|
+
/>
|
|
8452
|
+
</button>
|
|
8453
|
+
{showControls && index < images.length - 1 && (
|
|
8454
|
+
<div
|
|
8455
|
+
data-controls="thumbnailGap"
|
|
8456
|
+
data-controls-axis="x"
|
|
8457
|
+
style={{
|
|
8458
|
+
position: 'absolute',
|
|
8459
|
+
top: 0,
|
|
8460
|
+
right: thumbnailGapControlRight,
|
|
8461
|
+
width: thumbnailGapControlSize,
|
|
8462
|
+
height: '100%',
|
|
8463
|
+
pointerEvents: 'auto',
|
|
8464
|
+
zIndex: 3,
|
|
8465
|
+
}}
|
|
8466
|
+
/>
|
|
8467
|
+
)}
|
|
8468
|
+
</div>
|
|
8469
|
+
);
|
|
8470
|
+
})}
|
|
8471
|
+
</div>
|
|
8472
|
+
)}
|
|
8473
|
+
<div className={\`\${P}-lightbox-content-inner\`} style={{ width: '100%', height: '100%' }}>
|
|
8474
|
+
<div
|
|
8475
|
+
data-controls={showControls ? 'contentMarginTop' : undefined}
|
|
8476
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
8477
|
+
style={{ height: contentMarginTop, width: '100%' }}
|
|
8478
|
+
/>
|
|
8479
|
+
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
|
|
8480
|
+
<div
|
|
8481
|
+
data-controls={showControls ? 'contentMarginLeft' : undefined}
|
|
8482
|
+
data-controls-axis={showControls ? 'x' : undefined}
|
|
8483
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
8484
|
+
style={{ width: contentMarginLeft, flexShrink: 0 }}
|
|
8485
|
+
/>
|
|
8486
|
+
<div className={\`\${P}-lightbox-content-area\`}>
|
|
8487
|
+
{text.length > 0 && (
|
|
8488
|
+
<div className={\`\${P}-text\`} style={{ ...textStyle, maxWidth: textMaxWidth }}>
|
|
8489
|
+
<RichTextRenderer content={text} />
|
|
8490
|
+
</div>
|
|
8491
|
+
)}
|
|
8492
|
+
{closeIcon && (
|
|
8493
|
+
<div
|
|
8494
|
+
className={\`\${P}-close-icon\`}
|
|
8495
|
+
style={{
|
|
8496
|
+
width: scalingValue(closeIconMaxWidth ?? 0, isEditor),
|
|
8497
|
+
height: scalingValue(closeIconMaxWidth ?? 0, isEditor),
|
|
8498
|
+
['--close-icon-hover-color' as string]: closeIconHoverColor,
|
|
8499
|
+
}}
|
|
8500
|
+
>
|
|
8501
|
+
<button
|
|
8502
|
+
type="button"
|
|
8503
|
+
className={\`\${P}-close-icon-inner\`}
|
|
8504
|
+
onClick={handleClose}
|
|
8505
|
+
aria-label="Close"
|
|
8506
|
+
>
|
|
8507
|
+
<SvgImage url={closeIcon} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`}/>
|
|
8508
|
+
</button>
|
|
8509
|
+
</div>
|
|
8510
|
+
)}
|
|
8511
|
+
</div>
|
|
8512
|
+
<div
|
|
8513
|
+
data-controls={showControls ? 'contentMarginRight' : undefined}
|
|
8514
|
+
data-controls-axis={showControls ? 'x' : undefined}
|
|
8515
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
8516
|
+
style={{ width: contentMarginRight, flexShrink: 0 }}
|
|
8517
|
+
/>
|
|
8518
|
+
</div>
|
|
8519
|
+
</div>
|
|
8520
|
+
</div>
|
|
8521
|
+
</div>
|
|
8522
|
+
);
|
|
8523
|
+
};
|
|
8524
|
+
|
|
8525
|
+
type LightboxStripProps = {
|
|
8526
|
+
settings: LightboxStripSettings;
|
|
8527
|
+
content?: LightboxStripItem[];
|
|
8528
|
+
isEditor?: boolean;
|
|
8529
|
+
isEditMode?: boolean;
|
|
8530
|
+
isPreviewMode?: boolean;
|
|
8531
|
+
portalId?: string;
|
|
8532
|
+
} & CommonComponentProps;
|
|
8533
|
+
|
|
8534
|
+
export const LightboxStrip = ({ settings, content, isEditor, isEditMode, isPreviewMode, portalId }: LightboxStripProps) => {
|
|
8535
|
+
const { prefix: P } = useScopedStyles();
|
|
8536
|
+
const {
|
|
8537
|
+
cover,
|
|
8538
|
+
coverFit,
|
|
8539
|
+
backgroundColor,
|
|
8540
|
+
thumbnailVisibility,
|
|
8541
|
+
thumbnailObjectFit,
|
|
8542
|
+
thumbnailTrigger,
|
|
8543
|
+
thumbnailActive,
|
|
8544
|
+
thumbnailGap,
|
|
8545
|
+
imageGap,
|
|
8546
|
+
textMaxWidth,
|
|
8547
|
+
textColor,
|
|
8548
|
+
textFontSize,
|
|
8549
|
+
textFontWeight,
|
|
8550
|
+
textFontFamily,
|
|
8551
|
+
textLineHeight,
|
|
8552
|
+
textLetterSpacing,
|
|
8553
|
+
closeIcon,
|
|
8554
|
+
closeIconMaxWidth,
|
|
8555
|
+
closeIconColor,
|
|
8556
|
+
closeIconHoverColor,
|
|
8557
|
+
contentMarginTop,
|
|
8558
|
+
contentMarginLeft,
|
|
8559
|
+
contentMarginRight
|
|
8560
|
+
} = settings;
|
|
8561
|
+
|
|
8562
|
+
const scaled = (value: number) => scalingValue(value, isEditor ?? false);
|
|
8563
|
+
const textStyle: React.CSSProperties = {
|
|
8564
|
+
color: textColor,
|
|
8565
|
+
fontFamily: normalizeFontFamilyCssValue(textFontFamily),
|
|
8566
|
+
fontSize: scaled(textFontSize),
|
|
8567
|
+
fontWeight: textFontWeight,
|
|
8568
|
+
lineHeight: textLineHeight,
|
|
8569
|
+
letterSpacing: scaled(textLetterSpacing),
|
|
8570
|
+
};
|
|
8571
|
+
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
8572
|
+
const [lightboxOpen, setLightboxOpen] = useState(false);
|
|
8573
|
+
const [articleWidthCss, setArticleWidthCss] = useState<string | undefined>();
|
|
8574
|
+
const items = content ?? [];
|
|
8575
|
+
|
|
8576
|
+
const openLightbox = () => {
|
|
8577
|
+
if (items.length === 0) return;
|
|
8578
|
+
if (isEditor && wrapperRef.current) {
|
|
8579
|
+
setArticleWidthCss(getArticleWidthCSSValue(wrapperRef.current));
|
|
8580
|
+
}
|
|
8581
|
+
setLightboxOpen(true);
|
|
8582
|
+
};
|
|
8583
|
+
|
|
8584
|
+
const closeLightbox = () => {
|
|
8585
|
+
setLightboxOpen(false);
|
|
8586
|
+
};
|
|
8587
|
+
|
|
8588
|
+
return (
|
|
8589
|
+
<>
|
|
8590
|
+
<div ref={wrapperRef} className={\`\${P}-wrapper\`}>
|
|
8591
|
+
<style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
|
|
8592
|
+
{cover ? (
|
|
8593
|
+
<button
|
|
8594
|
+
type="button"
|
|
8595
|
+
className={\`\${P}-cover\`}
|
|
8596
|
+
onClick={openLightbox}
|
|
8597
|
+
style={{
|
|
8598
|
+
display: 'block',
|
|
8599
|
+
padding: 0,
|
|
8600
|
+
border: 'none',
|
|
8601
|
+
background: 'transparent',
|
|
8602
|
+
}}
|
|
8603
|
+
aria-label='Open image gallery'
|
|
8604
|
+
>
|
|
8605
|
+
<img
|
|
8606
|
+
className={\`\${P}-cover-image\`}
|
|
8607
|
+
src={cover}
|
|
8608
|
+
alt='cover'
|
|
8609
|
+
style={{ objectFit: coverFit === 'cover' ? 'cover' : 'contain' }}
|
|
8610
|
+
/>
|
|
8611
|
+
</button>
|
|
8612
|
+
) : null}
|
|
8613
|
+
</div>
|
|
8614
|
+
|
|
8615
|
+
{lightboxOpen && typeof document !== 'undefined' && (() => {
|
|
8616
|
+
const portalTarget = (portalId ? document.getElementById(portalId) : null) ?? document.body;
|
|
8617
|
+
return createPortal(
|
|
8618
|
+
<LightboxOverlay
|
|
8619
|
+
prefix={P}
|
|
8620
|
+
images={items}
|
|
8621
|
+
backgroundColor={backgroundColor}
|
|
8622
|
+
thumbnailGap={scaled(thumbnailGap)}
|
|
8623
|
+
imageGap={scaled(imageGap ?? 0)}
|
|
8624
|
+
thumbnailVisibility={thumbnailVisibility}
|
|
8625
|
+
thumbnailObjectFit={thumbnailObjectFit}
|
|
8626
|
+
thumbnailTrigger={thumbnailTrigger}
|
|
8627
|
+
thumbnailActive={thumbnailActive}
|
|
8628
|
+
text={items.find((item) => Array.isArray(item.text) && item.text.length > 0)?.text ?? []}
|
|
8629
|
+
textMaxWidth={scaled(textMaxWidth)}
|
|
8630
|
+
textStyle={textStyle}
|
|
8631
|
+
contentMarginTop={scaled(contentMarginTop ?? 0)}
|
|
8632
|
+
contentMarginLeft={scaled(contentMarginLeft ?? 0)}
|
|
8633
|
+
contentMarginRight={scaled(contentMarginRight ?? 0)}
|
|
8634
|
+
closeIcon={closeIcon}
|
|
8635
|
+
closeIconMaxWidth={closeIconMaxWidth}
|
|
8636
|
+
closeIconColor={closeIconColor}
|
|
8637
|
+
closeIconHoverColor={closeIconHoverColor}
|
|
8638
|
+
articleWidthCss={articleWidthCss}
|
|
8639
|
+
isEditor={isEditor}
|
|
8640
|
+
isEditMode={isEditMode}
|
|
8641
|
+
isPreviewMode={isPreviewMode}
|
|
8642
|
+
onClose={closeLightbox}
|
|
8643
|
+
/>,
|
|
8644
|
+
portalTarget,
|
|
8645
|
+
);
|
|
8646
|
+
})()}
|
|
8647
|
+
</>
|
|
8648
|
+
);
|
|
8649
|
+
};
|
|
8650
|
+
|
|
8651
|
+
export type LightboxStripItem = {
|
|
8652
|
+
image: {
|
|
8653
|
+
url: string;
|
|
8654
|
+
name?: string;
|
|
8655
|
+
objectFit?: 'cover' | 'contain';
|
|
8656
|
+
};
|
|
8657
|
+
text?: any[];
|
|
8658
|
+
};
|
|
8659
|
+
|
|
8660
|
+
export type LightboxStripSettings = {
|
|
8661
|
+
cover: string | null;
|
|
8662
|
+
coverFit: 'cover' | 'fit';
|
|
8663
|
+
backgroundColor: string;
|
|
8664
|
+
thumbnailVisibility: 'on' | 'off';
|
|
8665
|
+
thumbnailObjectFit: 'cover' | 'contain';
|
|
8666
|
+
thumbnailTrigger: 'click' | 'hover';
|
|
8667
|
+
thumbnailActive: 'invert' | 'grayscale' | 'scale-up' | 'opacity';
|
|
8668
|
+
thumbnailGap: number;
|
|
8669
|
+
imageGap?: number;
|
|
8670
|
+
textMaxWidth: number;
|
|
8671
|
+
textColor: string;
|
|
8672
|
+
textFontSize: number;
|
|
8673
|
+
textFontWeight: number;
|
|
8674
|
+
textFontFamily: string;
|
|
8675
|
+
textLineHeight: number;
|
|
8676
|
+
textLetterSpacing: number;
|
|
8677
|
+
contentMarginTop: number;
|
|
8678
|
+
contentMarginLeft: number;
|
|
8679
|
+
contentMarginRight: number;
|
|
8680
|
+
closeIcon: string | null;
|
|
8681
|
+
closeIconMaxWidth: number;
|
|
8682
|
+
closeIconColor: string;
|
|
8683
|
+
closeIconHoverColor: string;
|
|
8684
|
+
};
|
|
8685
|
+
`,yu="https://cdn.cntrl.site/component-assets/Close.svg",vu={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},bu={type:"object",version:1,settings:{properties:{cover:{type:"string",scope:"common",title:"",display:{type:"settings-image-input"}},coverFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},thumbnailGap:{type:"number",scope:"layout",title:"Thumbnail Gap",min:0,max:200,display:{type:"range-control"}},imageGap:{type:"number",scope:"layout",title:"Image Gap",min:0,max:200,display:{type:"range-control"}},backgroundColor:{type:"string",scope:"layout",title:"BG",display:{type:"settings-color-picker"}},objectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},closeIcon:{type:["string","null"],scope:"common",title:"Icon",display:{type:"settings-image-input"}},closeIconMaxWidth:{type:"number",scope:"layout",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},closeIconColor:{type:"string",scope:"common",title:"Fill Icon",display:{type:"settings-color-picker"}},closeIconHoverColor:{type:"string",scope:"common",title:"Hover Icon",display:{type:"settings-color-picker"}},thumbnailVisibility:{type:"boolean",scope:"common",title:"Visibility",display:{type:"toggle-cycle",enum:["on","off"]}},thumbnailObjectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},thumbnailTrigger:{type:"string",scope:"common",title:"Trigger",display:{type:"toggle-cycle",enum:["click","hover"]}},thumbnailActive:{type:"boolean",scope:"common",title:"Active",display:{type:"toggle-cycle",enum:["invert","grayscale","scale-up"]}},textMaxWidth:{type:"string",scope:"common",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},textColor:{type:"string",scope:"common",title:"Fill Text",display:{type:"color-input"}},textFontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},textFontSettings:{...vu.fontSettings,scope:"common",title:""},textFontSize:{type:"number",scope:"layout",title:"Text Font Size",display:{type:"font-size"}},textLineHeight:{type:"number",scope:"layout",title:"Text Line Height",display:{type:"line-height-input"}},textLetterSpacing:{type:"number",scope:"layout",title:"Text Letter Spacing",display:{type:"letter-spacing-input"}},textWordSpacing:{type:"number",scope:"layout",title:"Text Word Spacing",display:{type:"word-spacing-input"}},textTextAppearance:{type:"object",scope:"layout",title:"Text Text Appearance",display:{type:"text-appearance"}},contentMarginTop:{type:"number",scope:"layout",title:"Content margin top",min:0,max:200,display:{type:"range-control"}},contentMarginLeft:{type:"number",scope:"layout",title:"Content margin left",min:0,max:200,display:{type:"range-control"}},contentMarginRight:{type:"number",scope:"layout",title:"Content margin right",min:0,max:200,display:{type:"range-control"}}},defaults:{cover:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",objectFit:"cover",closeIcon:yu,closeIconColor:"#ffffff",closeIconHoverColor:"#cccccc",thumbnailVisibility:"on",thumbnailSize:"S",thumbnailObjectFit:"fit",thumbnailTrigger:"click",thumbnailActive:"invert",textColor:"#ffffff",textFontFamily:"Arial",textFontSettings:{fontWeight:400,fontStyle:"normal"},textTextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{thumbnailGap:.04,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,textFontSize:.02,textLineHeight:.02,textLetterSpacing:0,textWordSpacing:0},d:{thumbnailGap:.02,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,textFontSize:.02,textLineHeight:.02,textLetterSpacing:0,textWordSpacing:0}},layout:["__componentName__","thumbnailGap","imageGap","objectFit","contentMarginTop","contentMarginLeft","contentMarginRight"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",title:"Thumbnails",items:["thumbnailVisibility","thumbnailObjectFit"]},{type:"row",items:["thumbnailTrigger","thumbnailActive"]},{type:"row",title:"Text",items:["textMaxWidth"]},{type:"row",title:"Close icon",items:["closeIcon","closeIconMaxWidth"]},{type:"row",title:"Cover",items:["cover","coverFit"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["textFontFamily",{type:"group",title:"",items:["textFontSettings",{type:"row",items:["textFontSize","textLineHeight","textLetterSpacing","textWordSpacing"]},"textTextAppearance"]}]}],paletteBookmark:{items:["backgroundColor","textColor","closeIconColor","closeIconHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{image:{type:"object",label:"Image",display:{type:"media-input",supportsMainImage:!0}},text:{type:"string",label:"Text",placeholder:"Add Text...",display:{type:"rich-text"}}}},default:[{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:"",objectFit:"contain"},text:[{type:"paragraph",children:[{text:"Flowers in the spring,"},{text:"summer and autumn"}]}]},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:"",objectFit:"contain"}},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"}},{image:{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:"",objectFit:"contain"}}]}},xu={element:hu,id:"lightbox-strip",name:"Lightbox Strip",category:"galleries",version:1,defaultSize:{d:{width:350,height:350},m:{width:300,height:350}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Strip.mp4"},schema:bu,sourceCode:fu,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}},rr=300,Di=400,ar=300;function Cu(e){return`
|
|
8686
|
+
.${e}-wrapper {
|
|
8687
|
+
position: relative;
|
|
8688
|
+
width: 100%;
|
|
8689
|
+
height: 100%;
|
|
8690
|
+
}
|
|
8691
|
+
|
|
8692
|
+
.${e}-cover {
|
|
8693
|
+
position: relative;
|
|
8694
|
+
width: 100%;
|
|
8695
|
+
height: 100%;
|
|
8696
|
+
cursor: pointer;
|
|
8697
|
+
}
|
|
8698
|
+
|
|
8699
|
+
.${e}-cover-image {
|
|
8700
|
+
display: block;
|
|
8701
|
+
width: 100%;
|
|
8702
|
+
height: 100%;
|
|
8703
|
+
}
|
|
8704
|
+
|
|
8705
|
+
.${e}-lightbox {
|
|
8706
|
+
position: fixed;
|
|
8707
|
+
inset: 0;
|
|
8708
|
+
z-index: 9997;
|
|
8709
|
+
display: flex;
|
|
8710
|
+
flex-direction: column;
|
|
8711
|
+
align-items: center;
|
|
8712
|
+
justify-content: center;
|
|
8713
|
+
}
|
|
8714
|
+
|
|
8715
|
+
.${e}-lightbox-editor {
|
|
8716
|
+
width: var(--cntrl-article-width, 100vw) !important;
|
|
8717
|
+
margin-left: auto;
|
|
8718
|
+
margin-right: auto;
|
|
8719
|
+
}
|
|
8720
|
+
|
|
8721
|
+
.${e}-lightbox-edit-mode {
|
|
8722
|
+
z-index: 1;
|
|
8723
|
+
}
|
|
8724
|
+
|
|
8725
|
+
.${e}-lightbox-content {
|
|
8726
|
+
position: relative;
|
|
8727
|
+
z-index: 1;
|
|
8728
|
+
display: flex;
|
|
8729
|
+
flex-direction: column;
|
|
8730
|
+
align-items: center;
|
|
8731
|
+
justify-content: center;
|
|
8732
|
+
width: 100%;
|
|
8733
|
+
height: 100%;
|
|
8734
|
+
box-sizing: border-box;
|
|
8735
|
+
}
|
|
8736
|
+
|
|
8737
|
+
.${e}-lightbox-backdrop {
|
|
8738
|
+
position: absolute;
|
|
8739
|
+
inset: 0;
|
|
8740
|
+
pointer-events: none;
|
|
8741
|
+
}
|
|
8742
|
+
|
|
8743
|
+
.${e}-lightbox-strip {
|
|
8744
|
+
position: relative;
|
|
8745
|
+
flex: 1;
|
|
8746
|
+
width: 100%;
|
|
8747
|
+
min-height: 0;
|
|
8748
|
+
display: flex;
|
|
8749
|
+
align-items: center;
|
|
8750
|
+
justify-content: center;
|
|
8751
|
+
max-width: 100%;
|
|
8752
|
+
overflow: hidden;
|
|
8753
|
+
box-sizing: border-box;
|
|
8754
|
+
}
|
|
8755
|
+
|
|
8756
|
+
.${e}-lightbox-strip[data-desktop-nav="true"] {
|
|
8757
|
+
cursor: ew-resize;
|
|
8758
|
+
}
|
|
8759
|
+
|
|
8760
|
+
.${e}-slide-stack {
|
|
8761
|
+
position: relative;
|
|
8762
|
+
width: 100%;
|
|
8763
|
+
height: 100%;
|
|
8764
|
+
display: flex;
|
|
8765
|
+
align-items: center;
|
|
8766
|
+
justify-content: center;
|
|
8767
|
+
}
|
|
8768
|
+
|
|
8769
|
+
.${e}-slide-layer-out {
|
|
8770
|
+
position: absolute;
|
|
8771
|
+
inset: 0;
|
|
8772
|
+
display: flex;
|
|
8773
|
+
align-items: center;
|
|
8774
|
+
justify-content: center;
|
|
8775
|
+
z-index: 1;
|
|
8776
|
+
}
|
|
8777
|
+
|
|
8778
|
+
.${e}-slide-layer-in {
|
|
8779
|
+
position: absolute;
|
|
8780
|
+
inset: 0;
|
|
8781
|
+
display: flex;
|
|
8782
|
+
align-items: center;
|
|
8783
|
+
justify-content: center;
|
|
8784
|
+
z-index: 0;
|
|
8785
|
+
}
|
|
8786
|
+
|
|
8787
|
+
@keyframes ${e}-slide-fade-in {
|
|
8788
|
+
from { opacity: 0; }
|
|
8789
|
+
to { opacity: 1; }
|
|
8790
|
+
}
|
|
8791
|
+
|
|
8792
|
+
@keyframes ${e}-slide-fade-out {
|
|
8793
|
+
from { opacity: 1; }
|
|
8794
|
+
to { opacity: 0; }
|
|
8795
|
+
}
|
|
8796
|
+
|
|
8797
|
+
.${e}-slide-fade-in {
|
|
8798
|
+
opacity: 0;
|
|
8799
|
+
animation: ${e}-slide-fade-in ${ar}ms ease-in-out forwards;
|
|
8800
|
+
}
|
|
8801
|
+
|
|
8802
|
+
.${e}-slide-fade-out {
|
|
8803
|
+
animation: ${e}-slide-fade-out ${ar}ms ease-in-out forwards;
|
|
8804
|
+
}
|
|
8805
|
+
|
|
8806
|
+
.${e}-slide-area {
|
|
8807
|
+
position: relative;
|
|
8808
|
+
width: 100%;
|
|
8809
|
+
height: 100%;
|
|
8810
|
+
min-width: 0;
|
|
8811
|
+
min-height: 0;
|
|
8812
|
+
box-sizing: border-box;
|
|
8813
|
+
}
|
|
8814
|
+
|
|
8815
|
+
.${e}-slide-inner {
|
|
8816
|
+
display: flex;
|
|
8817
|
+
flex-direction: row;
|
|
8818
|
+
align-items: stretch;
|
|
8819
|
+
width: 100%;
|
|
8820
|
+
height: 100%;
|
|
8821
|
+
box-sizing: border-box;
|
|
8822
|
+
}
|
|
8823
|
+
|
|
8824
|
+
.${e}-slide-image-cell {
|
|
8825
|
+
position: relative;
|
|
8826
|
+
flex: 1 1 0;
|
|
8827
|
+
min-width: 0;
|
|
8828
|
+
height: 100%;
|
|
8829
|
+
}
|
|
8830
|
+
|
|
8831
|
+
.${e}-slide-image {
|
|
8832
|
+
display: block;
|
|
8833
|
+
width: 100%;
|
|
8834
|
+
height: 100%;
|
|
8835
|
+
}
|
|
8836
|
+
|
|
8837
|
+
.${e}-close-icon {
|
|
8838
|
+
position: relative;
|
|
8839
|
+
flex-shrink: 0;
|
|
8840
|
+
pointer-events: auto;
|
|
8841
|
+
z-index: 2;
|
|
8842
|
+
display: flex;
|
|
8843
|
+
align-items: center;
|
|
8844
|
+
justify-content: center;
|
|
8845
|
+
border: none;
|
|
8846
|
+
background-color: transparent;
|
|
8847
|
+
padding: 0;
|
|
8848
|
+
}
|
|
8849
|
+
|
|
8850
|
+
.${e}-close-icon-inner {
|
|
8851
|
+
all: unset;
|
|
8852
|
+
position: relative;
|
|
8853
|
+
cursor: pointer;
|
|
8854
|
+
width: 100%;
|
|
8855
|
+
height: 100%;
|
|
8856
|
+
pointer-events: auto;
|
|
8857
|
+
}
|
|
8858
|
+
|
|
8859
|
+
.${e}-close-icon-img {
|
|
8860
|
+
position: absolute;
|
|
8861
|
+
top: 50%;
|
|
8862
|
+
left: 50%;
|
|
8863
|
+
transform: translate(-50%, -50%);
|
|
8864
|
+
}
|
|
8865
|
+
|
|
8866
|
+
.${e}-titles-row {
|
|
8867
|
+
position: relative;
|
|
8868
|
+
flex: 0 1 auto;
|
|
8869
|
+
z-index: 2;
|
|
8870
|
+
box-sizing: border-box;
|
|
8871
|
+
pointer-events: none;
|
|
8872
|
+
word-break: break-word;
|
|
8873
|
+
min-width: 0;
|
|
8874
|
+
display: flex;
|
|
8875
|
+
flex-direction: row;
|
|
8876
|
+
align-items: center;
|
|
8877
|
+
}
|
|
8878
|
+
|
|
8879
|
+
.${e}-title-cell {
|
|
8880
|
+
position: relative;
|
|
8881
|
+
flex: 0 1 auto;
|
|
8882
|
+
min-width: 0;
|
|
8883
|
+
}
|
|
8884
|
+
|
|
8885
|
+
.${e}-text-bar-cell {
|
|
8886
|
+
position: relative;
|
|
8887
|
+
flex: 0 1 auto;
|
|
8888
|
+
min-width: 0;
|
|
8889
|
+
display: flex;
|
|
8890
|
+
align-items: center;
|
|
8891
|
+
}
|
|
8892
|
+
|
|
8893
|
+
.${e}-title1,
|
|
8894
|
+
.${e}-title2,
|
|
8895
|
+
.${e}-title3 {
|
|
8896
|
+
margin: 0;
|
|
8897
|
+
flex-shrink: 1;
|
|
8898
|
+
min-width: 0;
|
|
8899
|
+
}
|
|
8900
|
+
|
|
8901
|
+
.${e}-titles-stack {
|
|
8902
|
+
position: relative;
|
|
8903
|
+
display: flex;
|
|
8904
|
+
flex-direction: row;
|
|
8905
|
+
align-items: flex-start;
|
|
8906
|
+
min-width: 0;
|
|
8907
|
+
}
|
|
8908
|
+
|
|
8909
|
+
.${e}-titles-layer-out {
|
|
8910
|
+
position: absolute;
|
|
8911
|
+
inset: 0;
|
|
8912
|
+
display: flex;
|
|
8913
|
+
flex-direction: row;
|
|
8914
|
+
align-items: flex-start;
|
|
8915
|
+
z-index: 1;
|
|
8916
|
+
}
|
|
8917
|
+
|
|
8918
|
+
.${e}-titles-layer-in {
|
|
8919
|
+
position: relative;
|
|
8920
|
+
display: flex;
|
|
8921
|
+
flex-direction: row;
|
|
8922
|
+
align-items: flex-start;
|
|
8923
|
+
min-width: 0;
|
|
8924
|
+
}
|
|
8925
|
+
|
|
8926
|
+
.${e}-titles-layer-in-fading {
|
|
8927
|
+
position: absolute;
|
|
8928
|
+
inset: 0;
|
|
8929
|
+
z-index: 0;
|
|
8930
|
+
}
|
|
8931
|
+
|
|
8932
|
+
@keyframes ${e}-titles-fade-in {
|
|
8933
|
+
from { opacity: 0; }
|
|
8934
|
+
to { opacity: 1; }
|
|
8935
|
+
}
|
|
8936
|
+
|
|
8937
|
+
@keyframes ${e}-titles-fade-out {
|
|
8938
|
+
from { opacity: 1; }
|
|
8939
|
+
to { opacity: 0; }
|
|
8940
|
+
}
|
|
8941
|
+
|
|
8942
|
+
.${e}-titles-fade-in {
|
|
8943
|
+
opacity: 0;
|
|
8944
|
+
animation: ${e}-titles-fade-in ${Di}ms ease-in-out forwards;
|
|
8945
|
+
}
|
|
8946
|
+
|
|
8947
|
+
.${e}-titles-fade-out {
|
|
8948
|
+
animation: ${e}-titles-fade-out ${Di}ms ease-in-out forwards;
|
|
8949
|
+
}
|
|
8950
|
+
|
|
8951
|
+
.${e}-lightbox-content-inner {
|
|
8952
|
+
position: absolute;
|
|
8953
|
+
inset: 0;
|
|
8954
|
+
z-index: 2;
|
|
8955
|
+
pointer-events: none;
|
|
8956
|
+
display: flex;
|
|
8957
|
+
flex-direction: column;
|
|
8958
|
+
}
|
|
8959
|
+
|
|
8960
|
+
.${e}-lightbox-content-area {
|
|
8961
|
+
position: relative;
|
|
8962
|
+
display: flex;
|
|
8963
|
+
flex-direction: row;
|
|
8964
|
+
align-items: center;
|
|
8965
|
+
flex: 1;
|
|
8966
|
+
min-width: 0;
|
|
8967
|
+
}
|
|
8968
|
+
|
|
8969
|
+
.${e}-entry-counter {
|
|
8970
|
+
position: relative;
|
|
8971
|
+
z-index: 2;
|
|
8972
|
+
pointer-events: none;
|
|
8973
|
+
font-size: 0.85em;
|
|
8974
|
+
opacity: 0.7;
|
|
8975
|
+
white-space: nowrap;
|
|
8976
|
+
flex-shrink: 0;
|
|
8977
|
+
}
|
|
8978
|
+
|
|
8979
|
+
.${e}-control {
|
|
8980
|
+
position: relative;
|
|
8981
|
+
z-index: 2;
|
|
8982
|
+
pointer-events: auto;
|
|
8983
|
+
flex-shrink: 0;
|
|
8984
|
+
}
|
|
8985
|
+
|
|
8986
|
+
.${e}-control::before {
|
|
8987
|
+
content: "";
|
|
8988
|
+
position: absolute;
|
|
8989
|
+
top: 0;
|
|
8990
|
+
left: 0;
|
|
8991
|
+
width: 100%;
|
|
8992
|
+
height: 100%;
|
|
8993
|
+
pointer-events: auto;
|
|
8994
|
+
z-index: 10;
|
|
8995
|
+
}
|
|
8996
|
+
`}const Su=e=>{let t=e;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n)return n;const i=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(i)return i;t=t.parentElement}},wu=20,sr=e=>`max(${e}, ${wu}px)`,$u=2,Qr=e=>((e==null?void 0:e.images)??[]).slice(0,$u),lr=e=>e?`${e.title1??""}|${e.title2??""}|${e.title3??""}`:"",Tu=({prefix:e,entries:t,objectFit:n,backgroundColor:i,imageGap:a,slideMaxWidth:s,slideMaxHeight:o,isEditor:d,isEditMode:l,isPreviewMode:u,closeIcon:p,closeIconMaxWidth:I,closeIconColor:b,closeIconHoverColor:w,articleWidthCss:f,textMaxWidth:h,titlesGap:T,textCountGap:L,countCloseGap:C,textTransition:m,title1Style:z,title2Style:j,title3Style:R,contentMarginTop:x,contentMarginLeft:A,contentMarginRight:S,onClose:K})=>{const v=!!l,D=!d||!!u,[W,q]=c.useState(0),G=t[W],[$,H]=c.useState(!1),[_,B]=c.useState(null),[k,P]=c.useState(!1),[te,ae]=c.useState(null),[re,U]=c.useState(!1),[N,oe]=c.useState(0),[ye,ce]=c.useState(),[ge,we]=c.useState(),[ee,y]=c.useState(null),g=c.useRef(null),V=c.useRef(0),J=c.useRef(0),Q=c.useRef(0),M=c.useRef(!1),F=c.useRef(null),O=c.useRef(null),ie=c.useRef(null),pe=c.useCallback(()=>{const me=O.current;if(!me)return;const $e=me.closest(`.${e}-lightbox-content-area`);if(!$e)return me.getBoundingClientRect().width;let Fe=0;Array.from($e.children).forEach(Be=>{Be instanceof HTMLElement&&(Be.contains(me)||(Fe+=Be.getBoundingClientRect().width))});const Me=me.closest(`.${e}-text-bar-cell`),Ye=Me&&parseFloat(getComputedStyle(Me).marginRight)||0;return $e.getBoundingClientRect().width-Fe-Ye},[e]),le=c.useCallback(()=>{g.current&&(clearTimeout(g.current),g.current=null)},[]),he=c.useCallback(me=>{me===V.current&&(ae(null),U(!1))},[]),Y=c.useCallback(()=>{M.current||(M.current=!0,H(!1),F.current=setTimeout(()=>{K()},rr))},[K]),Z=c.useCallback(me=>{var Bt,Pt;if(t.length===0)return;const $e=(me%t.length+t.length)%t.length;if($e===W)return;const Fe=W,Me=t[Fe],Ye=t[$e];V.current+=1;const Be=V.current,fe=m==="fade"&&lr(Me)!==lr(Ye),Xe=(Bt=O.current)==null?void 0:Bt.getBoundingClientRect().height;let Je,Ge;fe&&(Ge=pe(),In.flushSync(()=>{y(Ye)}),ie.current&&Ge&&(ie.current.style.width=`${Ge}px`),Je=(Pt=ie.current)==null?void 0:Pt.getBoundingClientRect().height,ie.current&&(ie.current.style.width=""));const mt=Math.max(Xe??0,Je??0)||void 0;oe(Be),ae(Fe),U(!0),q($e),Q.current=$e,fe?(le(),mt&&ce(mt),Ge&&we(Ge),B(Fe),P(!0),J.current=$e,g.current=setTimeout(()=>{B(null),P(!1),ce(void 0),we(void 0),y(null),g.current=null},Di)):(le(),B(null),P(!1),ce(void 0),we(void 0),y(null),J.current=$e)},[W,le,t,pe,m]),X=me=>{if(!D||t.length<=1||me.button!==0&&me.pointerType==="mouse"||me.target.closest("[data-controls]"))return;const Fe=window.innerWidth/2;me.clientX<Fe?Z(W-1):Z(W+1)};c.useEffect(()=>{const me=requestAnimationFrame(()=>H(!0));return()=>cancelAnimationFrame(me)},[]),c.useEffect(()=>()=>{F.current&&clearTimeout(F.current),g.current&&clearTimeout(g.current)},[]),c.useEffect(()=>{m!=="fade"&&(J.current=W,le(),B(null),P(!1),ce(void 0),we(void 0))},[W,le,m]),c.useEffect(()=>{const me=$e=>{$e.key==="Escape"&&Y(),$e.key==="ArrowLeft"&&t.length>1&&Z(W-1),$e.key==="ArrowRight"&&t.length>1&&Z(W+1)};return window.addEventListener("keydown",me),()=>window.removeEventListener("keydown",me)},[Z,Y,W,t.length]),c.useEffect(()=>{const me=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=me}},[]),c.useLayoutEffect(()=>{le(),V.current=0,oe(0),ae(null),U(!1),B(null),P(!1),ce(void 0),we(void 0),y(null),Q.current=0,J.current=0,q(0)},[le,t.length]);const se=_!==null?t[_]:null,Te=te!==null?t[te]:null,Le=!!(G!=null&&G.title1||G!=null&&G.title2||G!=null&&G.title3||se!=null&&se.title1||se!=null&&se.title2||se!=null&&se.title3),Oe=t.length>1,ve=!!p,ke={gap:T},_e=(me,$e)=>{const Fe=sr($e),Me=`calc(-0.5 * (${Fe} + ${$e}))`;return r.jsx("div",{"data-controls":me,"data-controls-axis":"x",style:{position:"absolute",top:0,right:Me,width:Fe,height:"100%",pointerEvents:"auto",zIndex:3}})},Ae=(me,$e=!1)=>{if(!me)return null;const Fe=[me.title1?{className:`${e}-title1`,style:z,text:me.title1}:null,me.title2?{className:`${e}-title2`,style:j,text:me.title2}:null,me.title3?{className:`${e}-title3`,style:R,text:me.title3}:null].filter(Me=>Me!==null);return Fe.map((Me,Ye)=>r.jsxs("div",{className:`${e}-title-cell`,children:[r.jsx("p",{className:Me.className,style:{...Me.style,maxWidth:h},children:Me.text}),$e&&v&&Ye<Fe.length-1?_e("titlesGap",T):null]},Me.className))},Ve=me=>{const $e=Qr(me);if($e.length===0)return null;const Fe=$e.length>1,Me=sr(a),Ye=`calc(-0.5 * (${Me} + ${a}))`;if($e.length===1){const Be=$e[0],fe=Be.objectFit??n;return r.jsx("img",{className:`${e}-slide-image`,src:Be.url,alt:Be.name??"",draggable:!1,style:{objectFit:fe}})}return r.jsx("div",{className:`${e}-slide-inner`,style:Fe?{gap:a}:void 0,children:$e.map((Be,fe)=>{const Xe=Be.objectFit??n;return r.jsxs("div",{className:`${e}-slide-image-cell`,children:[r.jsx("img",{className:`${e}-slide-image`,src:Be.url,alt:Be.name??"",draggable:!1,style:{objectFit:Xe}}),v&&Fe&&fe<$e.length-1&&r.jsx("div",{"data-controls":"imageGap","data-controls-axis":"x",style:{position:"absolute",top:0,right:Ye,width:Me,height:"100%",pointerEvents:"auto",zIndex:3}})]},`${Be.url}-${fe}`)})})};return r.jsxs("div",{"data-selection":"none",className:`${e}-lightbox${d?` ${e}-lightbox-editor`:""}${l?` ${e}-lightbox-edit-mode`:""}`,onClick:Y,role:"dialog","aria-modal":"true","aria-label":"Journal gallery",style:{opacity:$?1:0,transition:`opacity ${rr}ms ease`,pointerEvents:$?"auto":"none",...f?{"--cntrl-article-width":f}:{}},children:[r.jsx("div",{className:`${e}-lightbox-backdrop`,style:{backgroundColor:i}}),r.jsxs("div",{className:`${e}-lightbox-content`,onClick:me=>me.stopPropagation(),children:[r.jsx("div",{className:`${e}-lightbox-strip`,"data-desktop-nav":D&&t.length>1?"true":"false",onPointerUp:D?X:void 0,children:r.jsxs("div",{className:`${e}-slide-stack`,children:[Te&&re?r.jsx("div",{className:`${e}-slide-layer-out ${e}-slide-fade-out`,onAnimationEnd:me=>{me.target===me.currentTarget&&he(N)},children:r.jsx("div",{className:`${e}-slide-area`,style:{maxWidth:s,maxHeight:o},children:Ve(Te)})},`slide-out-${N}`):null,r.jsx("div",{className:`${e}-slide-layer-in${re?` ${e}-slide-fade-in`:""}`,children:r.jsx("div",{className:`${e}-slide-area`,style:{maxWidth:s,maxHeight:o},children:G?Ve(G):null})},`slide-in-${N}-${W}`)]})}),r.jsxs("div",{className:`${e}-lightbox-content-inner`,style:{width:"100%",height:"100%"},children:[r.jsx("div",{"data-controls":v?"contentMarginTop":void 0,className:v?`${e}-control`:void 0,style:{height:x,width:"100%"}}),r.jsxs("div",{style:{display:"flex",flexDirection:"row",width:"100%"},children:[r.jsx("div",{"data-controls":v?"contentMarginLeft":void 0,"data-controls-axis":v?"x":void 0,className:v?`${e}-control`:void 0,style:{width:A,flexShrink:0}}),r.jsxs("div",{className:`${e}-lightbox-content-area`,children:[Le&&r.jsxs("div",{className:`${e}-text-bar-cell`,style:Oe?{marginRight:L}:void 0,children:[r.jsx("div",{className:`${e}-titles-row`,style:ke,children:m==="fade"?r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:ie,className:`${e}-titles-stack`,style:{...ke,position:"absolute",visibility:"hidden",pointerEvents:"none",left:0,right:0,top:0,width:"100%",height:"auto"},"aria-hidden":"true",children:Ae(ee||G,!1)}),r.jsxs("div",{ref:O,className:`${e}-titles-stack`,style:{...ke,...k&&ye?{minHeight:ye}:void 0,...k&&ge?{width:ge,maxWidth:"100%"}:void 0,...k?{overflow:"hidden"}:void 0},children:[se&&k?r.jsx("div",{className:`${e}-titles-layer-out ${e}-titles-fade-out`,style:ke,children:Ae(se)}):null,r.jsx("div",{className:`${e}-titles-layer-in${k?` ${e}-titles-layer-in-fading ${e}-titles-fade-in`:""}`,style:ke,children:Ae(G,!0)})]})]}):Ae(G,!0)}),v&&Oe?_e("textCountGap",L):null]}),Oe&&r.jsxs("div",{className:`${e}-text-bar-cell`,style:ve?{marginRight:C}:void 0,children:[r.jsxs("span",{className:`${e}-entry-counter`,style:{color:z.color},children:[W+1," / ",t.length]}),v&&ve?_e("countCloseGap",C):null]}),ve&&r.jsx("div",{className:`${e}-close-icon`,style:{width:E.scalingValue(I??0,d),height:E.scalingValue(I??0,d),"--close-icon-hover-color":w},children:r.jsx("button",{type:"button",className:`${e}-close-icon-inner`,onClick:Y,"aria-label":"Close",children:r.jsx(yt,{url:p??"",fill:b,hoverFill:w,className:`${e}-close-icon-img`})})})]}),r.jsx("div",{"data-controls":v?"contentMarginRight":void 0,"data-controls-axis":v?"x":void 0,className:v?`${e}-control`:void 0,style:{width:S,flexShrink:0}})]})]})]})]})},Lu=({settings:e,content:t,isEditor:n,isEditMode:i,isPreviewMode:a,portalId:s})=>{const{prefix:o}=E.useScopedStyles(),{cover:d,coverFit:l,backgroundColor:u,objectFit:p,imageGap:I,maxWidth:b,maxHeight:w,textMaxWidth:f,textTransition:h,titlesGap:T,textCountGap:L,countCloseGap:C,fontFamily:m,title1Color:z,title2Color:j,title3Color:R,title1FontSettings:x,title1FontSize:A,title1LineHeight:S,title1LetterSpacing:K,title1WordSpacing:v,title1TextAppearance:D,title2FontSettings:W,title2FontSize:q,title2LineHeight:G,title2LetterSpacing:$,title2WordSpacing:H,title2TextAppearance:_,title3FontSettings:B,title3FontSize:k,title3LineHeight:P,title3LetterSpacing:te,title3WordSpacing:ae,title3TextAppearance:re,closeIcon:U,closeIconMaxWidth:N,closeIconColor:oe,closeIconHoverColor:ye,contentMarginTop:ce,contentMarginLeft:ge,contentMarginRight:we}=e,ee=X=>E.scalingValue(X,n??!1),y={fontSettings:{fontFamily:m,fontWeight:(x==null?void 0:x.fontWeight)??400,fontStyle:(x==null?void 0:x.fontStyle)??"normal"},fontSize:A??.04,lineHeight:S,letterSpacing:K??0,wordSpacing:v??0,textAppearance:D,color:z??"#ffffff"},g={fontSettings:{fontFamily:m,fontWeight:(W==null?void 0:W.fontWeight)??400,fontStyle:(W==null?void 0:W.fontStyle)??"normal"},fontSize:q??.03,lineHeight:G,letterSpacing:$??0,wordSpacing:H??0,textAppearance:_,color:j??"#ffffff"},V={fontSettings:{fontFamily:m,fontWeight:(B==null?void 0:B.fontWeight)??400,fontStyle:(B==null?void 0:B.fontStyle)??"normal"},fontSize:k??.025,lineHeight:P,letterSpacing:te??0,wordSpacing:ae??0,textAppearance:re,color:R??"#ffffff"},J=Ue(y,n),Q=Ue(g,n),M=Ue(V,n),F=c.useRef(null),[O,ie]=c.useState(!1),[pe,le]=c.useState(),he=(t??[]).filter(X=>Qr(X).length>0),Y=()=>{he.length!==0&&(n&&F.current&&le(Su(F.current)),ie(!0))},Z=()=>{ie(!1)};return r.jsxs(r.Fragment,{children:[r.jsxs("div",{ref:F,className:`${o}-wrapper`,children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:Cu(o)}}),d?r.jsx("button",{type:"button",className:`${o}-cover`,onClick:Y,style:{display:"block",padding:0,border:"none",background:"transparent"},"aria-label":"Open journal gallery",children:r.jsx("img",{className:`${o}-cover-image`,src:d,alt:"cover",style:{objectFit:l==="cover"?"cover":"contain"}})}):null]}),O&&typeof document<"u"&&(()=>{const X=(s?document.getElementById(s):null)??document.body;return In.createPortal(r.jsx(Tu,{prefix:o,entries:he,objectFit:p==="fit"?"contain":"cover",backgroundColor:u,imageGap:ee(I??0),slideMaxWidth:`${b}%`,slideMaxHeight:`${w}%`,textMaxWidth:ee(f??.4),titlesGap:ee(T??0),textCountGap:ee(L??0),countCloseGap:ee(C??0),textTransition:h,title1Style:J,title2Style:Q,title3Style:M,contentMarginTop:ee(ce??0),contentMarginLeft:ee(ge??0),contentMarginRight:ee(we??0),closeIcon:U,closeIconMaxWidth:N,closeIconColor:oe,closeIconHoverColor:ye,articleWidthCss:pe,isEditor:n,isEditMode:i,isPreviewMode:a,onClose:Z}),X)})()]})},Eu=`import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
8997
|
+
import { createPortal, flushSync } from 'react-dom';
|
|
8998
|
+
import { CommonComponentProps } from '../props';
|
|
8999
|
+
import { scalingValue } from '../utils/scalingValue';
|
|
9000
|
+
import { useScopedStyles } from '../utils/useScopedStyles';
|
|
9001
|
+
import { SvgImage } from '../helpers/SvgImage/SvgImage';
|
|
9002
|
+
import { textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
|
|
9003
|
+
|
|
9004
|
+
const LIGHTBOX_ANIM_MS = 300;
|
|
9005
|
+
const TEXT_FADE_MS = 400;
|
|
9006
|
+
const SLIDE_FADE_MS = 300;
|
|
9007
|
+
|
|
9008
|
+
function getCSS(P: string): string {
|
|
9009
|
+
return \`
|
|
9010
|
+
.\${P}-wrapper {
|
|
9011
|
+
position: relative;
|
|
9012
|
+
width: 100%;
|
|
9013
|
+
height: 100%;
|
|
9014
|
+
}
|
|
9015
|
+
|
|
9016
|
+
.\${P}-cover {
|
|
9017
|
+
position: relative;
|
|
9018
|
+
width: 100%;
|
|
9019
|
+
height: 100%;
|
|
9020
|
+
cursor: pointer;
|
|
9021
|
+
}
|
|
9022
|
+
|
|
9023
|
+
.\${P}-cover-image {
|
|
9024
|
+
display: block;
|
|
9025
|
+
width: 100%;
|
|
9026
|
+
height: 100%;
|
|
9027
|
+
}
|
|
9028
|
+
|
|
9029
|
+
.\${P}-lightbox {
|
|
9030
|
+
position: fixed;
|
|
9031
|
+
inset: 0;
|
|
9032
|
+
z-index: 9997;
|
|
9033
|
+
display: flex;
|
|
9034
|
+
flex-direction: column;
|
|
9035
|
+
align-items: center;
|
|
9036
|
+
justify-content: center;
|
|
9037
|
+
}
|
|
9038
|
+
|
|
9039
|
+
.\${P}-lightbox-editor {
|
|
9040
|
+
width: var(--cntrl-article-width, 100vw) !important;
|
|
9041
|
+
margin-left: auto;
|
|
9042
|
+
margin-right: auto;
|
|
9043
|
+
}
|
|
9044
|
+
|
|
9045
|
+
.\${P}-lightbox-edit-mode {
|
|
9046
|
+
z-index: 1;
|
|
9047
|
+
}
|
|
9048
|
+
|
|
9049
|
+
.\${P}-lightbox-content {
|
|
9050
|
+
position: relative;
|
|
9051
|
+
z-index: 1;
|
|
9052
|
+
display: flex;
|
|
9053
|
+
flex-direction: column;
|
|
9054
|
+
align-items: center;
|
|
9055
|
+
justify-content: center;
|
|
9056
|
+
width: 100%;
|
|
9057
|
+
height: 100%;
|
|
9058
|
+
box-sizing: border-box;
|
|
9059
|
+
}
|
|
9060
|
+
|
|
9061
|
+
.\${P}-lightbox-backdrop {
|
|
9062
|
+
position: absolute;
|
|
9063
|
+
inset: 0;
|
|
9064
|
+
pointer-events: none;
|
|
9065
|
+
}
|
|
9066
|
+
|
|
9067
|
+
.\${P}-lightbox-strip {
|
|
9068
|
+
position: relative;
|
|
9069
|
+
flex: 1;
|
|
9070
|
+
width: 100%;
|
|
9071
|
+
min-height: 0;
|
|
9072
|
+
display: flex;
|
|
9073
|
+
align-items: center;
|
|
9074
|
+
justify-content: center;
|
|
9075
|
+
max-width: 100%;
|
|
9076
|
+
overflow: hidden;
|
|
9077
|
+
box-sizing: border-box;
|
|
9078
|
+
}
|
|
9079
|
+
|
|
9080
|
+
.\${P}-lightbox-strip[data-desktop-nav="true"] {
|
|
9081
|
+
cursor: ew-resize;
|
|
9082
|
+
}
|
|
9083
|
+
|
|
9084
|
+
.\${P}-slide-stack {
|
|
9085
|
+
position: relative;
|
|
9086
|
+
width: 100%;
|
|
9087
|
+
height: 100%;
|
|
9088
|
+
display: flex;
|
|
9089
|
+
align-items: center;
|
|
9090
|
+
justify-content: center;
|
|
9091
|
+
}
|
|
9092
|
+
|
|
9093
|
+
.\${P}-slide-layer-out {
|
|
9094
|
+
position: absolute;
|
|
9095
|
+
inset: 0;
|
|
9096
|
+
display: flex;
|
|
9097
|
+
align-items: center;
|
|
9098
|
+
justify-content: center;
|
|
9099
|
+
z-index: 1;
|
|
9100
|
+
}
|
|
9101
|
+
|
|
9102
|
+
.\${P}-slide-layer-in {
|
|
9103
|
+
position: absolute;
|
|
9104
|
+
inset: 0;
|
|
9105
|
+
display: flex;
|
|
9106
|
+
align-items: center;
|
|
9107
|
+
justify-content: center;
|
|
9108
|
+
z-index: 0;
|
|
9109
|
+
}
|
|
9110
|
+
|
|
9111
|
+
@keyframes \${P}-slide-fade-in {
|
|
9112
|
+
from { opacity: 0; }
|
|
9113
|
+
to { opacity: 1; }
|
|
9114
|
+
}
|
|
9115
|
+
|
|
9116
|
+
@keyframes \${P}-slide-fade-out {
|
|
9117
|
+
from { opacity: 1; }
|
|
9118
|
+
to { opacity: 0; }
|
|
9119
|
+
}
|
|
9120
|
+
|
|
9121
|
+
.\${P}-slide-fade-in {
|
|
9122
|
+
opacity: 0;
|
|
9123
|
+
animation: \${P}-slide-fade-in \${SLIDE_FADE_MS}ms ease-in-out forwards;
|
|
9124
|
+
}
|
|
9125
|
+
|
|
9126
|
+
.\${P}-slide-fade-out {
|
|
9127
|
+
animation: \${P}-slide-fade-out \${SLIDE_FADE_MS}ms ease-in-out forwards;
|
|
9128
|
+
}
|
|
9129
|
+
|
|
9130
|
+
.\${P}-slide-area {
|
|
9131
|
+
position: relative;
|
|
9132
|
+
width: 100%;
|
|
9133
|
+
height: 100%;
|
|
9134
|
+
min-width: 0;
|
|
9135
|
+
min-height: 0;
|
|
9136
|
+
box-sizing: border-box;
|
|
9137
|
+
}
|
|
9138
|
+
|
|
9139
|
+
.\${P}-slide-inner {
|
|
9140
|
+
display: flex;
|
|
9141
|
+
flex-direction: row;
|
|
9142
|
+
align-items: stretch;
|
|
9143
|
+
width: 100%;
|
|
9144
|
+
height: 100%;
|
|
9145
|
+
box-sizing: border-box;
|
|
9146
|
+
}
|
|
9147
|
+
|
|
9148
|
+
.\${P}-slide-image-cell {
|
|
9149
|
+
position: relative;
|
|
9150
|
+
flex: 1 1 0;
|
|
9151
|
+
min-width: 0;
|
|
9152
|
+
height: 100%;
|
|
9153
|
+
}
|
|
9154
|
+
|
|
9155
|
+
.\${P}-slide-image {
|
|
9156
|
+
display: block;
|
|
9157
|
+
width: 100%;
|
|
9158
|
+
height: 100%;
|
|
9159
|
+
}
|
|
9160
|
+
|
|
9161
|
+
.\${P}-close-icon {
|
|
9162
|
+
position: relative;
|
|
9163
|
+
flex-shrink: 0;
|
|
9164
|
+
pointer-events: auto;
|
|
9165
|
+
z-index: 2;
|
|
9166
|
+
display: flex;
|
|
9167
|
+
align-items: center;
|
|
9168
|
+
justify-content: center;
|
|
9169
|
+
border: none;
|
|
9170
|
+
background-color: transparent;
|
|
9171
|
+
padding: 0;
|
|
9172
|
+
}
|
|
9173
|
+
|
|
9174
|
+
.\${P}-close-icon-inner {
|
|
9175
|
+
all: unset;
|
|
9176
|
+
position: relative;
|
|
9177
|
+
cursor: pointer;
|
|
9178
|
+
width: 100%;
|
|
9179
|
+
height: 100%;
|
|
9180
|
+
pointer-events: auto;
|
|
9181
|
+
}
|
|
9182
|
+
|
|
9183
|
+
.\${P}-close-icon-img {
|
|
9184
|
+
position: absolute;
|
|
9185
|
+
top: 50%;
|
|
9186
|
+
left: 50%;
|
|
9187
|
+
transform: translate(-50%, -50%);
|
|
9188
|
+
}
|
|
9189
|
+
|
|
9190
|
+
.\${P}-titles-row {
|
|
9191
|
+
position: relative;
|
|
9192
|
+
flex: 0 1 auto;
|
|
9193
|
+
z-index: 2;
|
|
9194
|
+
box-sizing: border-box;
|
|
9195
|
+
pointer-events: none;
|
|
9196
|
+
word-break: break-word;
|
|
9197
|
+
min-width: 0;
|
|
9198
|
+
display: flex;
|
|
9199
|
+
flex-direction: row;
|
|
9200
|
+
align-items: center;
|
|
9201
|
+
}
|
|
9202
|
+
|
|
9203
|
+
.\${P}-title-cell {
|
|
9204
|
+
position: relative;
|
|
9205
|
+
flex: 0 1 auto;
|
|
9206
|
+
min-width: 0;
|
|
9207
|
+
}
|
|
9208
|
+
|
|
9209
|
+
.\${P}-text-bar-cell {
|
|
9210
|
+
position: relative;
|
|
9211
|
+
flex: 0 1 auto;
|
|
9212
|
+
min-width: 0;
|
|
9213
|
+
display: flex;
|
|
9214
|
+
align-items: center;
|
|
9215
|
+
}
|
|
9216
|
+
|
|
9217
|
+
.\${P}-title1,
|
|
9218
|
+
.\${P}-title2,
|
|
9219
|
+
.\${P}-title3 {
|
|
9220
|
+
margin: 0;
|
|
9221
|
+
flex-shrink: 1;
|
|
9222
|
+
min-width: 0;
|
|
9223
|
+
}
|
|
9224
|
+
|
|
9225
|
+
.\${P}-titles-stack {
|
|
9226
|
+
position: relative;
|
|
9227
|
+
display: flex;
|
|
9228
|
+
flex-direction: row;
|
|
9229
|
+
align-items: flex-start;
|
|
9230
|
+
min-width: 0;
|
|
9231
|
+
}
|
|
9232
|
+
|
|
9233
|
+
.\${P}-titles-layer-out {
|
|
9234
|
+
position: absolute;
|
|
9235
|
+
inset: 0;
|
|
9236
|
+
display: flex;
|
|
9237
|
+
flex-direction: row;
|
|
9238
|
+
align-items: flex-start;
|
|
9239
|
+
z-index: 1;
|
|
9240
|
+
}
|
|
9241
|
+
|
|
9242
|
+
.\${P}-titles-layer-in {
|
|
9243
|
+
position: relative;
|
|
9244
|
+
display: flex;
|
|
9245
|
+
flex-direction: row;
|
|
9246
|
+
align-items: flex-start;
|
|
9247
|
+
min-width: 0;
|
|
9248
|
+
}
|
|
9249
|
+
|
|
9250
|
+
.\${P}-titles-layer-in-fading {
|
|
9251
|
+
position: absolute;
|
|
9252
|
+
inset: 0;
|
|
9253
|
+
z-index: 0;
|
|
9254
|
+
}
|
|
9255
|
+
|
|
9256
|
+
@keyframes \${P}-titles-fade-in {
|
|
9257
|
+
from { opacity: 0; }
|
|
9258
|
+
to { opacity: 1; }
|
|
9259
|
+
}
|
|
9260
|
+
|
|
9261
|
+
@keyframes \${P}-titles-fade-out {
|
|
9262
|
+
from { opacity: 1; }
|
|
9263
|
+
to { opacity: 0; }
|
|
9264
|
+
}
|
|
9265
|
+
|
|
9266
|
+
.\${P}-titles-fade-in {
|
|
9267
|
+
opacity: 0;
|
|
9268
|
+
animation: \${P}-titles-fade-in \${TEXT_FADE_MS}ms ease-in-out forwards;
|
|
9269
|
+
}
|
|
9270
|
+
|
|
9271
|
+
.\${P}-titles-fade-out {
|
|
9272
|
+
animation: \${P}-titles-fade-out \${TEXT_FADE_MS}ms ease-in-out forwards;
|
|
9273
|
+
}
|
|
9274
|
+
|
|
9275
|
+
.\${P}-lightbox-content-inner {
|
|
9276
|
+
position: absolute;
|
|
9277
|
+
inset: 0;
|
|
9278
|
+
z-index: 2;
|
|
9279
|
+
pointer-events: none;
|
|
9280
|
+
display: flex;
|
|
9281
|
+
flex-direction: column;
|
|
9282
|
+
}
|
|
9283
|
+
|
|
9284
|
+
.\${P}-lightbox-content-area {
|
|
9285
|
+
position: relative;
|
|
9286
|
+
display: flex;
|
|
9287
|
+
flex-direction: row;
|
|
9288
|
+
align-items: center;
|
|
9289
|
+
flex: 1;
|
|
9290
|
+
min-width: 0;
|
|
9291
|
+
}
|
|
9292
|
+
|
|
9293
|
+
.\${P}-entry-counter {
|
|
9294
|
+
position: relative;
|
|
9295
|
+
z-index: 2;
|
|
9296
|
+
pointer-events: none;
|
|
9297
|
+
font-size: 0.85em;
|
|
9298
|
+
opacity: 0.7;
|
|
9299
|
+
white-space: nowrap;
|
|
9300
|
+
flex-shrink: 0;
|
|
9301
|
+
}
|
|
9302
|
+
|
|
9303
|
+
.\${P}-control {
|
|
9304
|
+
position: relative;
|
|
9305
|
+
z-index: 2;
|
|
9306
|
+
pointer-events: auto;
|
|
9307
|
+
flex-shrink: 0;
|
|
9308
|
+
}
|
|
9309
|
+
|
|
9310
|
+
.\${P}-control::before {
|
|
9311
|
+
content: "";
|
|
9312
|
+
position: absolute;
|
|
9313
|
+
top: 0;
|
|
9314
|
+
left: 0;
|
|
9315
|
+
width: 100%;
|
|
9316
|
+
height: 100%;
|
|
9317
|
+
pointer-events: auto;
|
|
9318
|
+
z-index: 10;
|
|
9319
|
+
}
|
|
9320
|
+
\`;
|
|
9321
|
+
}
|
|
9322
|
+
|
|
9323
|
+
const getArticleWidthCSSValue = (start: HTMLElement | null): string | undefined => {
|
|
9324
|
+
let el = start;
|
|
9325
|
+
while (el) {
|
|
9326
|
+
const inline = el.style.getPropertyValue('--cntrl-article-width').trim();
|
|
9327
|
+
if (inline) return inline;
|
|
9328
|
+
const computed = getComputedStyle(el).getPropertyValue('--cntrl-article-width').trim();
|
|
9329
|
+
if (computed) return computed;
|
|
9330
|
+
el = el.parentElement;
|
|
9331
|
+
}
|
|
9332
|
+
return undefined;
|
|
9333
|
+
};
|
|
9334
|
+
|
|
9335
|
+
export type LightboxJournalImage = {
|
|
9336
|
+
url: string;
|
|
9337
|
+
name?: string;
|
|
9338
|
+
objectFit?: 'cover' | 'contain';
|
|
9339
|
+
};
|
|
9340
|
+
|
|
9341
|
+
export type LightboxJournalItem = {
|
|
9342
|
+
title1: string;
|
|
9343
|
+
title2: string;
|
|
9344
|
+
title3: string;
|
|
9345
|
+
images: LightboxJournalImage[];
|
|
9346
|
+
};
|
|
9347
|
+
|
|
9348
|
+
type LightboxOverlayProps = {
|
|
9349
|
+
prefix: string;
|
|
9350
|
+
entries: LightboxJournalItem[];
|
|
9351
|
+
objectFit: 'cover' | 'contain';
|
|
9352
|
+
backgroundColor: string;
|
|
9353
|
+
imageGap: string;
|
|
9354
|
+
slideMaxWidth: string;
|
|
9355
|
+
slideMaxHeight: string;
|
|
9356
|
+
closeIcon: string | null;
|
|
9357
|
+
closeIconMaxWidth: number;
|
|
9358
|
+
closeIconColor: string;
|
|
9359
|
+
closeIconHoverColor: string;
|
|
9360
|
+
textMaxWidth: string;
|
|
9361
|
+
titlesGap: string;
|
|
9362
|
+
textCountGap: string;
|
|
9363
|
+
countCloseGap: string;
|
|
9364
|
+
textTransition: 'none' | 'fade';
|
|
9365
|
+
title1Style: React.CSSProperties;
|
|
9366
|
+
title2Style: React.CSSProperties;
|
|
9367
|
+
title3Style: React.CSSProperties;
|
|
9368
|
+
contentMarginTop: string;
|
|
9369
|
+
contentMarginLeft: string;
|
|
9370
|
+
contentMarginRight: string;
|
|
9371
|
+
articleWidthCss?: string;
|
|
9372
|
+
isEditor?: boolean;
|
|
9373
|
+
isEditMode?: boolean;
|
|
9374
|
+
isPreviewMode?: boolean;
|
|
9375
|
+
onClose: () => void;
|
|
9376
|
+
};
|
|
9377
|
+
|
|
9378
|
+
const GAP_LABEL_AREA_PX = 20;
|
|
9379
|
+
|
|
9380
|
+
const getGapControlSize = (gap: string) => \`max(\${gap}, \${GAP_LABEL_AREA_PX}px)\`;
|
|
9381
|
+
|
|
9382
|
+
const MAX_IMAGES_PER_ENTRY = 2;
|
|
9383
|
+
|
|
9384
|
+
const getEntryImages = (entry: LightboxJournalItem | undefined): LightboxJournalImage[] =>
|
|
9385
|
+
(entry?.images ?? []).slice(0, MAX_IMAGES_PER_ENTRY);
|
|
9386
|
+
|
|
9387
|
+
const getEntryTitleKey = (entry: LightboxJournalItem | undefined) =>
|
|
9388
|
+
entry ? \`\${entry.title1 ?? ''}|\${entry.title2 ?? ''}|\${entry.title3 ?? ''}\` : '';
|
|
9389
|
+
|
|
9390
|
+
const LightboxOverlay = ({
|
|
9391
|
+
prefix: P,
|
|
9392
|
+
entries,
|
|
9393
|
+
objectFit,
|
|
9394
|
+
backgroundColor,
|
|
9395
|
+
imageGap,
|
|
9396
|
+
slideMaxWidth,
|
|
9397
|
+
slideMaxHeight,
|
|
9398
|
+
isEditor,
|
|
9399
|
+
isEditMode,
|
|
9400
|
+
isPreviewMode,
|
|
9401
|
+
closeIcon,
|
|
9402
|
+
closeIconMaxWidth,
|
|
9403
|
+
closeIconColor,
|
|
9404
|
+
closeIconHoverColor,
|
|
9405
|
+
articleWidthCss,
|
|
9406
|
+
textMaxWidth,
|
|
9407
|
+
titlesGap,
|
|
9408
|
+
textCountGap,
|
|
9409
|
+
countCloseGap,
|
|
9410
|
+
textTransition,
|
|
9411
|
+
title1Style,
|
|
9412
|
+
title2Style,
|
|
9413
|
+
title3Style,
|
|
9414
|
+
contentMarginTop,
|
|
9415
|
+
contentMarginLeft,
|
|
9416
|
+
contentMarginRight,
|
|
9417
|
+
onClose,
|
|
9418
|
+
}: LightboxOverlayProps) => {
|
|
9419
|
+
const showControls = Boolean(isEditMode);
|
|
9420
|
+
const allowDesktopNav = !isEditor || Boolean(isPreviewMode);
|
|
9421
|
+
const [activeEntryIndex, setActiveEntryIndex] = useState(0);
|
|
9422
|
+
|
|
9423
|
+
const activeEntry = entries[activeEntryIndex];
|
|
9424
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
9425
|
+
const [prevEntryIndex, setPrevEntryIndex] = useState<number | null>(null);
|
|
9426
|
+
const [isTitlesFading, setIsTitlesFading] = useState(false);
|
|
9427
|
+
const [prevSlideIndex, setPrevSlideIndex] = useState<number | null>(null);
|
|
9428
|
+
const [isSlideFading, setIsSlideFading] = useState(false);
|
|
9429
|
+
const [slideTransitionKey, setSlideTransitionKey] = useState(0);
|
|
9430
|
+
const [titlesStackMinHeight, setTitlesStackMinHeight] = useState<number | undefined>();
|
|
9431
|
+
const [titlesStackWidth, setTitlesStackWidth] = useState<number | undefined>();
|
|
9432
|
+
const [incomingMeasureEntry, setIncomingMeasureEntry] = useState<LightboxJournalItem | null>(null);
|
|
9433
|
+
const titlesFadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
9434
|
+
const slideTransitionKeyRef = useRef(0);
|
|
9435
|
+
const prevEntryIndexRef = useRef(0);
|
|
9436
|
+
const prevSlideIndexRef = useRef(0);
|
|
9437
|
+
const isClosingRef = useRef(false);
|
|
9438
|
+
const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
9439
|
+
const titlesStackRef = useRef<HTMLDivElement>(null);
|
|
9440
|
+
const titlesMeasureRef = useRef<HTMLDivElement>(null);
|
|
9441
|
+
|
|
9442
|
+
const getIncomingTitlesMeasureWidth = useCallback(() => {
|
|
9443
|
+
const stack = titlesStackRef.current;
|
|
9444
|
+
if (!stack) return undefined;
|
|
9445
|
+
|
|
9446
|
+
const contentArea = stack.closest(\`.\${P}-lightbox-content-area\`) as HTMLElement | null;
|
|
9447
|
+
if (!contentArea) return stack.getBoundingClientRect().width;
|
|
9448
|
+
|
|
9449
|
+
let fixedSiblingsWidth = 0;
|
|
9450
|
+
Array.from(contentArea.children).forEach((child) => {
|
|
9451
|
+
if (!(child instanceof HTMLElement)) return;
|
|
9452
|
+
if (child.contains(stack)) return;
|
|
9453
|
+
fixedSiblingsWidth += child.getBoundingClientRect().width;
|
|
9454
|
+
});
|
|
9455
|
+
|
|
9456
|
+
const textBarCell = stack.closest(\`.\${P}-text-bar-cell\`) as HTMLElement | null;
|
|
9457
|
+
const textBarMarginRight = textBarCell
|
|
9458
|
+
? parseFloat(getComputedStyle(textBarCell).marginRight) || 0
|
|
9459
|
+
: 0;
|
|
9460
|
+
|
|
9461
|
+
return contentArea.getBoundingClientRect().width - fixedSiblingsWidth - textBarMarginRight;
|
|
9462
|
+
}, [P]);
|
|
9463
|
+
|
|
9464
|
+
const clearTitlesFadeTimer = useCallback(() => {
|
|
9465
|
+
if (titlesFadeTimerRef.current) {
|
|
9466
|
+
clearTimeout(titlesFadeTimerRef.current);
|
|
9467
|
+
titlesFadeTimerRef.current = null;
|
|
9468
|
+
}
|
|
9469
|
+
}, []);
|
|
9470
|
+
|
|
9471
|
+
const finishSlideTransition = useCallback((transitionKey: number) => {
|
|
9472
|
+
if (transitionKey !== slideTransitionKeyRef.current) return;
|
|
9473
|
+
setPrevSlideIndex(null);
|
|
9474
|
+
setIsSlideFading(false);
|
|
9475
|
+
}, []);
|
|
9476
|
+
|
|
9477
|
+
const handleClose = useCallback(() => {
|
|
9478
|
+
if (isClosingRef.current) return;
|
|
9479
|
+
isClosingRef.current = true;
|
|
9480
|
+
setIsVisible(false);
|
|
9481
|
+
closeTimeoutRef.current = setTimeout(() => {
|
|
9482
|
+
onClose();
|
|
9483
|
+
}, LIGHTBOX_ANIM_MS);
|
|
9484
|
+
}, [onClose]);
|
|
9485
|
+
|
|
9486
|
+
const goToEntry = useCallback((index: number) => {
|
|
9487
|
+
if (entries.length === 0) return;
|
|
9488
|
+
const normalizedIndex = ((index % entries.length) + entries.length) % entries.length;
|
|
9489
|
+
if (normalizedIndex === activeEntryIndex) return;
|
|
9490
|
+
|
|
9491
|
+
const outgoingIndex = activeEntryIndex;
|
|
9492
|
+
const outgoingEntry = entries[outgoingIndex];
|
|
9493
|
+
const incomingEntry = entries[normalizedIndex];
|
|
9494
|
+
slideTransitionKeyRef.current += 1;
|
|
9495
|
+
const transitionKey = slideTransitionKeyRef.current;
|
|
9496
|
+
const shouldFadeTitles = textTransition === 'fade'
|
|
9497
|
+
&& getEntryTitleKey(outgoingEntry) !== getEntryTitleKey(incomingEntry);
|
|
9498
|
+
const measuredOutgoingTitlesHeight = titlesStackRef.current?.getBoundingClientRect().height;
|
|
9499
|
+
let measuredIncomingTitlesHeight: number | undefined;
|
|
9500
|
+
let incomingTitlesMeasureWidth: number | undefined;
|
|
9501
|
+
if (shouldFadeTitles) {
|
|
9502
|
+
incomingTitlesMeasureWidth = getIncomingTitlesMeasureWidth();
|
|
9503
|
+
flushSync(() => {
|
|
9504
|
+
setIncomingMeasureEntry(incomingEntry);
|
|
9505
|
+
});
|
|
9506
|
+
if (titlesMeasureRef.current && incomingTitlesMeasureWidth) {
|
|
9507
|
+
titlesMeasureRef.current.style.width = \`\${incomingTitlesMeasureWidth}px\`;
|
|
9508
|
+
}
|
|
9509
|
+
measuredIncomingTitlesHeight = titlesMeasureRef.current?.getBoundingClientRect().height;
|
|
9510
|
+
if (titlesMeasureRef.current) {
|
|
9511
|
+
titlesMeasureRef.current.style.width = '';
|
|
9512
|
+
}
|
|
9513
|
+
}
|
|
9514
|
+
const lockedTitlesHeight = Math.max(measuredOutgoingTitlesHeight ?? 0, measuredIncomingTitlesHeight ?? 0) || undefined;
|
|
9515
|
+
|
|
9516
|
+
setSlideTransitionKey(transitionKey);
|
|
9517
|
+
setPrevSlideIndex(outgoingIndex);
|
|
9518
|
+
setIsSlideFading(true);
|
|
9519
|
+
setActiveEntryIndex(normalizedIndex);
|
|
9520
|
+
prevSlideIndexRef.current = normalizedIndex;
|
|
9521
|
+
|
|
9522
|
+
if (shouldFadeTitles) {
|
|
9523
|
+
clearTitlesFadeTimer();
|
|
9524
|
+
if (lockedTitlesHeight) {
|
|
9525
|
+
setTitlesStackMinHeight(lockedTitlesHeight);
|
|
9526
|
+
}
|
|
9527
|
+
if (incomingTitlesMeasureWidth) {
|
|
9528
|
+
setTitlesStackWidth(incomingTitlesMeasureWidth);
|
|
9529
|
+
}
|
|
9530
|
+
setPrevEntryIndex(outgoingIndex);
|
|
9531
|
+
setIsTitlesFading(true);
|
|
9532
|
+
prevEntryIndexRef.current = normalizedIndex;
|
|
9533
|
+
titlesFadeTimerRef.current = setTimeout(() => {
|
|
9534
|
+
setPrevEntryIndex(null);
|
|
9535
|
+
setIsTitlesFading(false);
|
|
9536
|
+
setTitlesStackMinHeight(undefined);
|
|
9537
|
+
setTitlesStackWidth(undefined);
|
|
9538
|
+
setIncomingMeasureEntry(null);
|
|
9539
|
+
titlesFadeTimerRef.current = null;
|
|
9540
|
+
}, TEXT_FADE_MS);
|
|
9541
|
+
} else {
|
|
9542
|
+
clearTitlesFadeTimer();
|
|
9543
|
+
setPrevEntryIndex(null);
|
|
9544
|
+
setIsTitlesFading(false);
|
|
9545
|
+
setTitlesStackMinHeight(undefined);
|
|
9546
|
+
setTitlesStackWidth(undefined);
|
|
9547
|
+
setIncomingMeasureEntry(null);
|
|
9548
|
+
prevEntryIndexRef.current = normalizedIndex;
|
|
9549
|
+
}
|
|
9550
|
+
}, [activeEntryIndex, clearTitlesFadeTimer, entries, getIncomingTitlesMeasureWidth, textTransition]);
|
|
9551
|
+
|
|
9552
|
+
const onStripPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
|
|
9553
|
+
if (!allowDesktopNav) return;
|
|
9554
|
+
if (entries.length <= 1) return;
|
|
9555
|
+
if (event.button !== 0 && event.pointerType === 'mouse') return;
|
|
9556
|
+
const target = event.target as HTMLElement;
|
|
9557
|
+
if (target.closest('[data-controls]')) return;
|
|
9558
|
+
|
|
9559
|
+
const midPoint = window.innerWidth / 2;
|
|
9560
|
+
if (event.clientX < midPoint) {
|
|
9561
|
+
goToEntry(activeEntryIndex - 1);
|
|
9562
|
+
} else {
|
|
9563
|
+
goToEntry(activeEntryIndex + 1);
|
|
9564
|
+
}
|
|
9565
|
+
};
|
|
9566
|
+
|
|
9567
|
+
useEffect(() => {
|
|
9568
|
+
const frame = requestAnimationFrame(() => setIsVisible(true));
|
|
9569
|
+
return () => cancelAnimationFrame(frame);
|
|
9570
|
+
}, []);
|
|
9571
|
+
|
|
9572
|
+
useEffect(() => {
|
|
9573
|
+
return () => {
|
|
9574
|
+
if (closeTimeoutRef.current) {
|
|
9575
|
+
clearTimeout(closeTimeoutRef.current);
|
|
9576
|
+
}
|
|
9577
|
+
if (titlesFadeTimerRef.current) {
|
|
9578
|
+
clearTimeout(titlesFadeTimerRef.current);
|
|
9579
|
+
}
|
|
9580
|
+
};
|
|
9581
|
+
}, []);
|
|
9582
|
+
|
|
9583
|
+
useEffect(() => {
|
|
9584
|
+
if (textTransition !== 'fade') {
|
|
9585
|
+
prevEntryIndexRef.current = activeEntryIndex;
|
|
9586
|
+
clearTitlesFadeTimer();
|
|
9587
|
+
setPrevEntryIndex(null);
|
|
9588
|
+
setIsTitlesFading(false);
|
|
9589
|
+
setTitlesStackMinHeight(undefined);
|
|
9590
|
+
setTitlesStackWidth(undefined);
|
|
9591
|
+
}
|
|
9592
|
+
}, [activeEntryIndex, clearTitlesFadeTimer, textTransition]);
|
|
9593
|
+
|
|
9594
|
+
useEffect(() => {
|
|
9595
|
+
const onKeyDown = (event: KeyboardEvent) => {
|
|
9596
|
+
if (event.key === 'Escape') {
|
|
9597
|
+
handleClose();
|
|
9598
|
+
}
|
|
9599
|
+
if (event.key === 'ArrowLeft' && entries.length > 1) {
|
|
9600
|
+
goToEntry(activeEntryIndex - 1);
|
|
9601
|
+
}
|
|
9602
|
+
if (event.key === 'ArrowRight' && entries.length > 1) {
|
|
9603
|
+
goToEntry(activeEntryIndex + 1);
|
|
9604
|
+
}
|
|
9605
|
+
};
|
|
9606
|
+
window.addEventListener('keydown', onKeyDown);
|
|
9607
|
+
return () => window.removeEventListener('keydown', onKeyDown);
|
|
9608
|
+
}, [goToEntry, handleClose, activeEntryIndex, entries.length]);
|
|
9609
|
+
|
|
9610
|
+
useEffect(() => {
|
|
9611
|
+
const originalOverflow = document.body.style.overflow;
|
|
9612
|
+
document.body.style.overflow = 'hidden';
|
|
9613
|
+
return () => {
|
|
9614
|
+
document.body.style.overflow = originalOverflow;
|
|
9615
|
+
};
|
|
9616
|
+
}, []);
|
|
9617
|
+
|
|
9618
|
+
useLayoutEffect(() => {
|
|
9619
|
+
clearTitlesFadeTimer();
|
|
9620
|
+
slideTransitionKeyRef.current = 0;
|
|
9621
|
+
setSlideTransitionKey(0);
|
|
9622
|
+
setPrevSlideIndex(null);
|
|
9623
|
+
setIsSlideFading(false);
|
|
9624
|
+
setPrevEntryIndex(null);
|
|
9625
|
+
setIsTitlesFading(false);
|
|
9626
|
+
setTitlesStackMinHeight(undefined);
|
|
9627
|
+
setTitlesStackWidth(undefined);
|
|
9628
|
+
setIncomingMeasureEntry(null);
|
|
9629
|
+
prevSlideIndexRef.current = 0;
|
|
9630
|
+
prevEntryIndexRef.current = 0;
|
|
9631
|
+
setActiveEntryIndex(0);
|
|
9632
|
+
}, [clearTitlesFadeTimer, entries.length]);
|
|
9633
|
+
|
|
9634
|
+
const outgoingEntry = prevEntryIndex !== null ? entries[prevEntryIndex] : null;
|
|
9635
|
+
const outgoingSlideEntry = prevSlideIndex !== null ? entries[prevSlideIndex] : null;
|
|
9636
|
+
const hasTitles = Boolean(
|
|
9637
|
+
activeEntry?.title1 || activeEntry?.title2 || activeEntry?.title3
|
|
9638
|
+
|| outgoingEntry?.title1 || outgoingEntry?.title2 || outgoingEntry?.title3,
|
|
9639
|
+
);
|
|
9640
|
+
const hasCounter = entries.length > 1;
|
|
9641
|
+
const hasCloseIcon = Boolean(closeIcon);
|
|
9642
|
+
const titlesGapStyle = { gap: titlesGap };
|
|
9643
|
+
|
|
9644
|
+
const renderGapControl = (controlKey: string, gap: string) => {
|
|
9645
|
+
const gapControlSize = getGapControlSize(gap);
|
|
9646
|
+
const gapControlRight = \`calc(-0.5 * (\${gapControlSize} + \${gap}))\`;
|
|
9647
|
+
return (
|
|
9648
|
+
<div
|
|
9649
|
+
data-controls={controlKey}
|
|
9650
|
+
data-controls-axis="x"
|
|
9651
|
+
style={{
|
|
9652
|
+
position: 'absolute',
|
|
9653
|
+
top: 0,
|
|
9654
|
+
right: gapControlRight,
|
|
9655
|
+
width: gapControlSize,
|
|
9656
|
+
height: '100%',
|
|
9657
|
+
pointerEvents: 'auto',
|
|
9658
|
+
zIndex: 3,
|
|
9659
|
+
}}
|
|
9660
|
+
/>
|
|
9661
|
+
);
|
|
9662
|
+
};
|
|
9663
|
+
|
|
9664
|
+
const renderTitles = (entry: LightboxJournalItem | undefined, showGapControls = false) => {
|
|
9665
|
+
if (!entry) return null;
|
|
9666
|
+
|
|
9667
|
+
const slots = [
|
|
9668
|
+
entry.title1 ? { className: \`\${P}-title1\`, style: title1Style, text: entry.title1 } : null,
|
|
9669
|
+
entry.title2 ? { className: \`\${P}-title2\`, style: title2Style, text: entry.title2 } : null,
|
|
9670
|
+
entry.title3 ? { className: \`\${P}-title3\`, style: title3Style, text: entry.title3 } : null,
|
|
9671
|
+
].filter((slot): slot is { className: string; style: React.CSSProperties; text: string } => slot !== null);
|
|
9672
|
+
|
|
9673
|
+
return slots.map((slot, index) => (
|
|
9674
|
+
<div key={slot.className} className={\`\${P}-title-cell\`}>
|
|
9675
|
+
<p className={slot.className} style={{ ...slot.style, maxWidth: textMaxWidth }}>{slot.text}</p>
|
|
9676
|
+
{showGapControls && showControls && index < slots.length - 1 ? renderGapControl('titlesGap', titlesGap) : null}
|
|
9677
|
+
</div>
|
|
9678
|
+
));
|
|
9679
|
+
};
|
|
9680
|
+
|
|
9681
|
+
const renderEntryImages = (entry: LightboxJournalItem) => {
|
|
9682
|
+
const images = getEntryImages(entry);
|
|
9683
|
+
if (images.length === 0) return null;
|
|
9684
|
+
|
|
9685
|
+
const hasInnerImageGap = images.length > 1;
|
|
9686
|
+
const imageGapControlSize = getGapControlSize(imageGap);
|
|
9687
|
+
const imageGapControlRight = \`calc(-0.5 * (\${imageGapControlSize} + \${imageGap}))\`;
|
|
9688
|
+
|
|
9689
|
+
if (images.length === 1) {
|
|
9690
|
+
const image = images[0];
|
|
9691
|
+
const itemObjectFit = image.objectFit ?? objectFit;
|
|
9692
|
+
return (
|
|
9693
|
+
<img
|
|
9694
|
+
className={\`\${P}-slide-image\`}
|
|
9695
|
+
src={image.url}
|
|
9696
|
+
alt={image.name ?? ''}
|
|
9697
|
+
draggable={false}
|
|
9698
|
+
style={{ objectFit: itemObjectFit }}
|
|
9699
|
+
/>
|
|
9700
|
+
);
|
|
9701
|
+
}
|
|
9702
|
+
|
|
9703
|
+
return (
|
|
9704
|
+
<div
|
|
9705
|
+
className={\`\${P}-slide-inner\`}
|
|
9706
|
+
style={hasInnerImageGap ? { gap: imageGap } : undefined}
|
|
9707
|
+
>
|
|
9708
|
+
{images.map((image, imageIndex) => {
|
|
9709
|
+
const itemObjectFit = image.objectFit ?? objectFit;
|
|
9710
|
+
return (
|
|
9711
|
+
<div
|
|
9712
|
+
key={\`\${image.url}-\${imageIndex}\`}
|
|
9713
|
+
className={\`\${P}-slide-image-cell\`}
|
|
9714
|
+
>
|
|
9715
|
+
<img
|
|
9716
|
+
className={\`\${P}-slide-image\`}
|
|
9717
|
+
src={image.url}
|
|
9718
|
+
alt={image.name ?? ''}
|
|
9719
|
+
draggable={false}
|
|
9720
|
+
style={{ objectFit: itemObjectFit }}
|
|
9721
|
+
/>
|
|
9722
|
+
{showControls && hasInnerImageGap && imageIndex < images.length - 1 && (
|
|
9723
|
+
<div
|
|
9724
|
+
data-controls="imageGap"
|
|
9725
|
+
data-controls-axis="x"
|
|
9726
|
+
style={{
|
|
9727
|
+
position: 'absolute',
|
|
9728
|
+
top: 0,
|
|
9729
|
+
right: imageGapControlRight,
|
|
9730
|
+
width: imageGapControlSize,
|
|
9731
|
+
height: '100%',
|
|
9732
|
+
pointerEvents: 'auto',
|
|
9733
|
+
zIndex: 3,
|
|
9734
|
+
}}
|
|
9735
|
+
/>
|
|
9736
|
+
)}
|
|
9737
|
+
</div>
|
|
9738
|
+
);
|
|
9739
|
+
})}
|
|
9740
|
+
</div>
|
|
9741
|
+
);
|
|
9742
|
+
};
|
|
9743
|
+
|
|
9744
|
+
return (
|
|
9745
|
+
<div
|
|
9746
|
+
data-selection="none"
|
|
9747
|
+
className={\`\${P}-lightbox\${isEditor ? \` \${P}-lightbox-editor\` : ''}\${isEditMode ? \` \${P}-lightbox-edit-mode\` : ''}\`}
|
|
9748
|
+
onClick={handleClose}
|
|
9749
|
+
role="dialog"
|
|
9750
|
+
aria-modal="true"
|
|
9751
|
+
aria-label="Journal gallery"
|
|
9752
|
+
style={{
|
|
9753
|
+
opacity: isVisible ? 1 : 0,
|
|
9754
|
+
transition: \`opacity \${LIGHTBOX_ANIM_MS}ms ease\`,
|
|
9755
|
+
pointerEvents: isVisible ? 'auto' : 'none',
|
|
9756
|
+
...(articleWidthCss ? { ['--cntrl-article-width' as string]: articleWidthCss } : {}),
|
|
9757
|
+
}}
|
|
9758
|
+
>
|
|
9759
|
+
<div className={\`\${P}-lightbox-backdrop\`} style={{ backgroundColor }} />
|
|
9760
|
+
<div
|
|
9761
|
+
className={\`\${P}-lightbox-content\`}
|
|
9762
|
+
onClick={(event) => event.stopPropagation()}
|
|
9763
|
+
>
|
|
9764
|
+
<div
|
|
9765
|
+
className={\`\${P}-lightbox-strip\`}
|
|
9766
|
+
data-desktop-nav={allowDesktopNav && entries.length > 1 ? 'true' : 'false'}
|
|
9767
|
+
onPointerUp={allowDesktopNav ? onStripPointerUp : undefined}
|
|
9768
|
+
>
|
|
9769
|
+
<div className={\`\${P}-slide-stack\`}>
|
|
9770
|
+
{outgoingSlideEntry && isSlideFading ? (
|
|
9771
|
+
<div
|
|
9772
|
+
key={\`slide-out-\${slideTransitionKey}\`}
|
|
9773
|
+
className={\`\${P}-slide-layer-out \${P}-slide-fade-out\`}
|
|
9774
|
+
onAnimationEnd={(event) => {
|
|
9775
|
+
if (event.target !== event.currentTarget) return;
|
|
9776
|
+
finishSlideTransition(slideTransitionKey);
|
|
9777
|
+
}}
|
|
9778
|
+
>
|
|
9779
|
+
<div
|
|
9780
|
+
className={\`\${P}-slide-area\`}
|
|
9781
|
+
style={{
|
|
9782
|
+
maxWidth: slideMaxWidth,
|
|
9783
|
+
maxHeight: slideMaxHeight,
|
|
9784
|
+
}}
|
|
9785
|
+
>
|
|
9786
|
+
{renderEntryImages(outgoingSlideEntry)}
|
|
9787
|
+
</div>
|
|
9788
|
+
</div>
|
|
9789
|
+
) : null}
|
|
9790
|
+
<div
|
|
9791
|
+
key={\`slide-in-\${slideTransitionKey}-\${activeEntryIndex}\`}
|
|
9792
|
+
className={\`\${P}-slide-layer-in\${isSlideFading ? \` \${P}-slide-fade-in\` : ''}\`}
|
|
9793
|
+
>
|
|
9794
|
+
<div
|
|
9795
|
+
className={\`\${P}-slide-area\`}
|
|
9796
|
+
style={{
|
|
9797
|
+
maxWidth: slideMaxWidth,
|
|
9798
|
+
maxHeight: slideMaxHeight,
|
|
9799
|
+
}}
|
|
9800
|
+
>
|
|
9801
|
+
{activeEntry ? renderEntryImages(activeEntry) : null}
|
|
9802
|
+
</div>
|
|
9803
|
+
</div>
|
|
9804
|
+
</div>
|
|
9805
|
+
</div>
|
|
9806
|
+
|
|
9807
|
+
<div className={\`\${P}-lightbox-content-inner\`} style={{ width: '100%', height: '100%' }}>
|
|
9808
|
+
<div
|
|
9809
|
+
data-controls={showControls ? 'contentMarginTop' : undefined}
|
|
9810
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
9811
|
+
style={{ height: contentMarginTop, width: '100%' }}
|
|
9812
|
+
/>
|
|
9813
|
+
<div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
|
|
9814
|
+
<div
|
|
9815
|
+
data-controls={showControls ? 'contentMarginLeft' : undefined}
|
|
9816
|
+
data-controls-axis={showControls ? 'x' : undefined}
|
|
9817
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
9818
|
+
style={{ width: contentMarginLeft, flexShrink: 0 }}
|
|
9819
|
+
/>
|
|
9820
|
+
<div className={\`\${P}-lightbox-content-area\`}>
|
|
9821
|
+
{hasTitles && (
|
|
9822
|
+
<div
|
|
9823
|
+
className={\`\${P}-text-bar-cell\`}
|
|
9824
|
+
style={hasCounter ? { marginRight: textCountGap } : undefined}
|
|
9825
|
+
>
|
|
9826
|
+
<div
|
|
9827
|
+
className={\`\${P}-titles-row\`}
|
|
9828
|
+
style={titlesGapStyle}
|
|
9829
|
+
>
|
|
9830
|
+
{textTransition === 'fade' ? (
|
|
9831
|
+
<>
|
|
9832
|
+
<div
|
|
9833
|
+
ref={titlesMeasureRef}
|
|
9834
|
+
className={\`\${P}-titles-stack\`}
|
|
9835
|
+
style={{
|
|
9836
|
+
...titlesGapStyle,
|
|
9837
|
+
position: 'absolute',
|
|
9838
|
+
visibility: 'hidden',
|
|
9839
|
+
pointerEvents: 'none',
|
|
9840
|
+
left: 0,
|
|
9841
|
+
right: 0,
|
|
9842
|
+
top: 0,
|
|
9843
|
+
width: '100%',
|
|
9844
|
+
height: 'auto',
|
|
9845
|
+
}}
|
|
9846
|
+
aria-hidden="true"
|
|
9847
|
+
>
|
|
9848
|
+
{incomingMeasureEntry ? renderTitles(incomingMeasureEntry, false) : renderTitles(activeEntry, false)}
|
|
9849
|
+
</div>
|
|
9850
|
+
<div
|
|
9851
|
+
ref={titlesStackRef}
|
|
9852
|
+
className={\`\${P}-titles-stack\`}
|
|
9853
|
+
style={{
|
|
9854
|
+
...titlesGapStyle,
|
|
9855
|
+
...(isTitlesFading && titlesStackMinHeight ? { minHeight: titlesStackMinHeight } : undefined),
|
|
9856
|
+
...(isTitlesFading && titlesStackWidth ? { width: titlesStackWidth, maxWidth: '100%' } : undefined),
|
|
9857
|
+
...(isTitlesFading ? { overflow: 'hidden' } : undefined),
|
|
9858
|
+
}}
|
|
9859
|
+
>
|
|
9860
|
+
{outgoingEntry && isTitlesFading ? (
|
|
9861
|
+
<div
|
|
9862
|
+
className={\`\${P}-titles-layer-out \${P}-titles-fade-out\`}
|
|
9863
|
+
style={titlesGapStyle}
|
|
9864
|
+
>
|
|
9865
|
+
{renderTitles(outgoingEntry)}
|
|
9866
|
+
</div>
|
|
9867
|
+
) : null}
|
|
9868
|
+
<div
|
|
9869
|
+
className={\`\${P}-titles-layer-in\${isTitlesFading ? \` \${P}-titles-layer-in-fading \${P}-titles-fade-in\` : ''}\`}
|
|
9870
|
+
style={titlesGapStyle}
|
|
9871
|
+
>
|
|
9872
|
+
{renderTitles(activeEntry, true)}
|
|
9873
|
+
</div>
|
|
9874
|
+
</div>
|
|
9875
|
+
</>
|
|
9876
|
+
) : (
|
|
9877
|
+
renderTitles(activeEntry, true)
|
|
9878
|
+
)}
|
|
9879
|
+
</div>
|
|
9880
|
+
{showControls && hasCounter ? renderGapControl('textCountGap', textCountGap) : null}
|
|
9881
|
+
</div>
|
|
9882
|
+
)}
|
|
9883
|
+
{hasCounter && (
|
|
9884
|
+
<div
|
|
9885
|
+
className={\`\${P}-text-bar-cell\`}
|
|
9886
|
+
style={hasCloseIcon ? { marginRight: countCloseGap } : undefined}
|
|
9887
|
+
>
|
|
9888
|
+
<span className={\`\${P}-entry-counter\`} style={{ color: title1Style.color }}>
|
|
9889
|
+
{activeEntryIndex + 1} / {entries.length}
|
|
9890
|
+
</span>
|
|
9891
|
+
{showControls && hasCloseIcon ? renderGapControl('countCloseGap', countCloseGap) : null}
|
|
9892
|
+
</div>
|
|
9893
|
+
)}
|
|
9894
|
+
{hasCloseIcon && (
|
|
9895
|
+
<div
|
|
9896
|
+
className={\`\${P}-close-icon\`}
|
|
9897
|
+
style={{
|
|
9898
|
+
width: scalingValue(closeIconMaxWidth ?? 0, isEditor),
|
|
9899
|
+
height: scalingValue(closeIconMaxWidth ?? 0, isEditor),
|
|
9900
|
+
['--close-icon-hover-color' as string]: closeIconHoverColor,
|
|
9901
|
+
}}
|
|
9902
|
+
>
|
|
9903
|
+
<button
|
|
9904
|
+
type="button"
|
|
9905
|
+
className={\`\${P}-close-icon-inner\`}
|
|
9906
|
+
onClick={handleClose}
|
|
9907
|
+
aria-label="Close"
|
|
9908
|
+
>
|
|
9909
|
+
<SvgImage url={closeIcon ?? ''} fill={closeIconColor} hoverFill={closeIconHoverColor} className={\`\${P}-close-icon-img\`} />
|
|
9910
|
+
</button>
|
|
9911
|
+
</div>
|
|
9912
|
+
)}
|
|
9913
|
+
</div>
|
|
9914
|
+
<div
|
|
9915
|
+
data-controls={showControls ? 'contentMarginRight' : undefined}
|
|
9916
|
+
data-controls-axis={showControls ? 'x' : undefined}
|
|
9917
|
+
className={showControls ? \`\${P}-control\` : undefined}
|
|
9918
|
+
style={{ width: contentMarginRight, flexShrink: 0 }}
|
|
9919
|
+
/>
|
|
9920
|
+
</div>
|
|
9921
|
+
</div>
|
|
9922
|
+
</div>
|
|
9923
|
+
</div>
|
|
9924
|
+
);
|
|
9925
|
+
};
|
|
9926
|
+
|
|
9927
|
+
type LightboxJournalProps = {
|
|
9928
|
+
settings: LightboxJournalSettings;
|
|
9929
|
+
content?: LightboxJournalItem[];
|
|
9930
|
+
isEditor?: boolean;
|
|
9931
|
+
isEditMode?: boolean;
|
|
9932
|
+
isPreviewMode?: boolean;
|
|
9933
|
+
portalId?: string;
|
|
9934
|
+
} & CommonComponentProps;
|
|
9935
|
+
|
|
9936
|
+
export const LightboxJournal = ({ settings, content, isEditor, isEditMode, isPreviewMode, portalId }: LightboxJournalProps) => {
|
|
9937
|
+
const { prefix: P } = useScopedStyles();
|
|
9938
|
+
const {
|
|
9939
|
+
cover,
|
|
9940
|
+
coverFit,
|
|
9941
|
+
backgroundColor,
|
|
9942
|
+
objectFit,
|
|
9943
|
+
imageGap,
|
|
9944
|
+
maxWidth,
|
|
9945
|
+
maxHeight,
|
|
9946
|
+
textMaxWidth,
|
|
9947
|
+
textTransition,
|
|
9948
|
+
titlesGap,
|
|
9949
|
+
textCountGap,
|
|
9950
|
+
countCloseGap,
|
|
9951
|
+
fontFamily,
|
|
9952
|
+
title1Color,
|
|
9953
|
+
title2Color,
|
|
9954
|
+
title3Color,
|
|
9955
|
+
title1FontSettings,
|
|
9956
|
+
title1FontSize,
|
|
9957
|
+
title1LineHeight,
|
|
9958
|
+
title1LetterSpacing,
|
|
9959
|
+
title1WordSpacing,
|
|
9960
|
+
title1TextAppearance,
|
|
9961
|
+
title2FontSettings,
|
|
9962
|
+
title2FontSize,
|
|
9963
|
+
title2LineHeight,
|
|
9964
|
+
title2LetterSpacing,
|
|
9965
|
+
title2WordSpacing,
|
|
9966
|
+
title2TextAppearance,
|
|
9967
|
+
title3FontSettings,
|
|
9968
|
+
title3FontSize,
|
|
9969
|
+
title3LineHeight,
|
|
9970
|
+
title3LetterSpacing,
|
|
9971
|
+
title3WordSpacing,
|
|
9972
|
+
title3TextAppearance,
|
|
9973
|
+
closeIcon,
|
|
9974
|
+
closeIconMaxWidth,
|
|
9975
|
+
closeIconColor,
|
|
9976
|
+
closeIconHoverColor,
|
|
9977
|
+
contentMarginTop,
|
|
9978
|
+
contentMarginLeft,
|
|
9979
|
+
contentMarginRight,
|
|
9980
|
+
} = settings;
|
|
9981
|
+
|
|
9982
|
+
const scaled = (value: number) => scalingValue(value, isEditor ?? false);
|
|
9983
|
+
|
|
9984
|
+
const resolvedTitle1TextStyle: TextStyles = {
|
|
9985
|
+
fontSettings: {
|
|
9986
|
+
fontFamily,
|
|
9987
|
+
fontWeight: title1FontSettings?.fontWeight ?? 400,
|
|
9988
|
+
fontStyle: title1FontSettings?.fontStyle ?? 'normal',
|
|
9989
|
+
},
|
|
9990
|
+
fontSize: title1FontSize ?? 0.04,
|
|
9991
|
+
lineHeight: title1LineHeight,
|
|
9992
|
+
letterSpacing: title1LetterSpacing ?? 0,
|
|
9993
|
+
wordSpacing: title1WordSpacing ?? 0,
|
|
9994
|
+
textAppearance: title1TextAppearance,
|
|
9995
|
+
color: title1Color ?? '#ffffff',
|
|
9996
|
+
};
|
|
9997
|
+
const resolvedTitle2TextStyle: TextStyles = {
|
|
9998
|
+
fontSettings: {
|
|
9999
|
+
fontFamily,
|
|
10000
|
+
fontWeight: title2FontSettings?.fontWeight ?? 400,
|
|
10001
|
+
fontStyle: title2FontSettings?.fontStyle ?? 'normal',
|
|
10002
|
+
},
|
|
10003
|
+
fontSize: title2FontSize ?? 0.03,
|
|
10004
|
+
lineHeight: title2LineHeight,
|
|
10005
|
+
letterSpacing: title2LetterSpacing ?? 0,
|
|
10006
|
+
wordSpacing: title2WordSpacing ?? 0,
|
|
10007
|
+
textAppearance: title2TextAppearance,
|
|
10008
|
+
color: title2Color ?? '#ffffff',
|
|
10009
|
+
};
|
|
10010
|
+
const resolvedTitle3TextStyle: TextStyles = {
|
|
10011
|
+
fontSettings: {
|
|
10012
|
+
fontFamily,
|
|
10013
|
+
fontWeight: title3FontSettings?.fontWeight ?? 400,
|
|
10014
|
+
fontStyle: title3FontSettings?.fontStyle ?? 'normal',
|
|
10015
|
+
},
|
|
10016
|
+
fontSize: title3FontSize ?? 0.025,
|
|
10017
|
+
lineHeight: title3LineHeight,
|
|
10018
|
+
letterSpacing: title3LetterSpacing ?? 0,
|
|
10019
|
+
wordSpacing: title3WordSpacing ?? 0,
|
|
10020
|
+
textAppearance: title3TextAppearance,
|
|
10021
|
+
color: title3Color ?? '#ffffff',
|
|
10022
|
+
};
|
|
10023
|
+
const title1Style = textStylesToCss(resolvedTitle1TextStyle, isEditor);
|
|
10024
|
+
const title2Style = textStylesToCss(resolvedTitle2TextStyle, isEditor);
|
|
10025
|
+
const title3Style = textStylesToCss(resolvedTitle3TextStyle, isEditor);
|
|
10026
|
+
|
|
10027
|
+
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
10028
|
+
const [lightboxOpen, setLightboxOpen] = useState(false);
|
|
10029
|
+
const [articleWidthCss, setArticleWidthCss] = useState<string | undefined>();
|
|
10030
|
+
const entries = (content ?? []).filter((entry) => getEntryImages(entry).length > 0);
|
|
10031
|
+
|
|
10032
|
+
const openLightbox = () => {
|
|
10033
|
+
if (entries.length === 0) return;
|
|
10034
|
+
if (isEditor && wrapperRef.current) {
|
|
10035
|
+
setArticleWidthCss(getArticleWidthCSSValue(wrapperRef.current));
|
|
10036
|
+
}
|
|
10037
|
+
setLightboxOpen(true);
|
|
10038
|
+
};
|
|
10039
|
+
|
|
10040
|
+
const closeLightbox = () => {
|
|
10041
|
+
setLightboxOpen(false);
|
|
10042
|
+
};
|
|
10043
|
+
|
|
10044
|
+
return (
|
|
10045
|
+
<>
|
|
10046
|
+
<div ref={wrapperRef} className={\`\${P}-wrapper\`}>
|
|
10047
|
+
<style dangerouslySetInnerHTML={{ __html: getCSS(P) }} />
|
|
10048
|
+
{cover ? (
|
|
10049
|
+
<button
|
|
10050
|
+
type="button"
|
|
10051
|
+
className={\`\${P}-cover\`}
|
|
10052
|
+
onClick={openLightbox}
|
|
10053
|
+
style={{
|
|
10054
|
+
display: 'block',
|
|
10055
|
+
padding: 0,
|
|
10056
|
+
border: 'none',
|
|
10057
|
+
background: 'transparent',
|
|
10058
|
+
}}
|
|
10059
|
+
aria-label="Open journal gallery"
|
|
10060
|
+
>
|
|
10061
|
+
<img
|
|
10062
|
+
className={\`\${P}-cover-image\`}
|
|
10063
|
+
src={cover}
|
|
10064
|
+
alt="cover"
|
|
10065
|
+
style={{ objectFit: coverFit === 'cover' ? 'cover' : 'contain' }}
|
|
10066
|
+
/>
|
|
10067
|
+
</button>
|
|
10068
|
+
) : null}
|
|
10069
|
+
</div>
|
|
10070
|
+
|
|
10071
|
+
{lightboxOpen && typeof document !== 'undefined' && (() => {
|
|
10072
|
+
const portalTarget = (portalId ? document.getElementById(portalId) : null) ?? document.body;
|
|
10073
|
+
return createPortal(
|
|
10074
|
+
<LightboxOverlay
|
|
10075
|
+
prefix={P}
|
|
10076
|
+
entries={entries}
|
|
10077
|
+
objectFit={objectFit === 'fit' ? 'contain' : 'cover'}
|
|
10078
|
+
backgroundColor={backgroundColor}
|
|
10079
|
+
imageGap={scaled(imageGap ?? 0)}
|
|
10080
|
+
slideMaxWidth={\`\${maxWidth}%\`}
|
|
10081
|
+
slideMaxHeight={\`\${maxHeight}%\`}
|
|
10082
|
+
textMaxWidth={scaled(textMaxWidth ?? 0.4)}
|
|
10083
|
+
titlesGap={scaled(titlesGap ?? 0)}
|
|
10084
|
+
textCountGap={scaled(textCountGap ?? 0)}
|
|
10085
|
+
countCloseGap={scaled(countCloseGap ?? 0)}
|
|
10086
|
+
textTransition={textTransition}
|
|
10087
|
+
title1Style={title1Style}
|
|
10088
|
+
title2Style={title2Style}
|
|
10089
|
+
title3Style={title3Style}
|
|
10090
|
+
contentMarginTop={scaled(contentMarginTop ?? 0)}
|
|
10091
|
+
contentMarginLeft={scaled(contentMarginLeft ?? 0)}
|
|
10092
|
+
contentMarginRight={scaled(contentMarginRight ?? 0)}
|
|
10093
|
+
closeIcon={closeIcon}
|
|
10094
|
+
closeIconMaxWidth={closeIconMaxWidth}
|
|
10095
|
+
closeIconColor={closeIconColor}
|
|
10096
|
+
closeIconHoverColor={closeIconHoverColor}
|
|
10097
|
+
articleWidthCss={articleWidthCss}
|
|
10098
|
+
isEditor={isEditor}
|
|
10099
|
+
isEditMode={isEditMode}
|
|
10100
|
+
isPreviewMode={isPreviewMode}
|
|
10101
|
+
onClose={closeLightbox}
|
|
10102
|
+
/>,
|
|
10103
|
+
portalTarget,
|
|
10104
|
+
);
|
|
10105
|
+
})()}
|
|
10106
|
+
</>
|
|
10107
|
+
);
|
|
10108
|
+
};
|
|
10109
|
+
|
|
10110
|
+
export type LightboxJournalSettings = {
|
|
10111
|
+
cover: string | null;
|
|
10112
|
+
coverFit: 'cover' | 'fit';
|
|
10113
|
+
maxWidth: number;
|
|
10114
|
+
maxHeight: number;
|
|
10115
|
+
backgroundColor: string;
|
|
10116
|
+
objectFit: 'cover' | 'fit';
|
|
10117
|
+
imageGap?: number;
|
|
10118
|
+
textMaxWidth: number;
|
|
10119
|
+
textTransition: 'none' | 'fade';
|
|
10120
|
+
titlesGap?: number;
|
|
10121
|
+
textCountGap?: number;
|
|
10122
|
+
countCloseGap?: number;
|
|
10123
|
+
fontFamily?: string;
|
|
10124
|
+
title1Color: string;
|
|
10125
|
+
title2Color: string;
|
|
10126
|
+
title3Color: string;
|
|
10127
|
+
title1FontSettings?: { fontWeight: number; fontStyle: string };
|
|
10128
|
+
title1FontSize: number;
|
|
10129
|
+
title1LineHeight?: number;
|
|
10130
|
+
title1LetterSpacing?: number;
|
|
10131
|
+
title1WordSpacing?: number;
|
|
10132
|
+
title1TextAppearance?: TextStyles['textAppearance'];
|
|
10133
|
+
title2FontSettings?: { fontWeight: number; fontStyle: string };
|
|
10134
|
+
title2FontSize: number;
|
|
10135
|
+
title2LineHeight?: number;
|
|
10136
|
+
title2LetterSpacing?: number;
|
|
10137
|
+
title2WordSpacing?: number;
|
|
10138
|
+
title2TextAppearance?: TextStyles['textAppearance'];
|
|
10139
|
+
title3FontSettings?: { fontWeight: number; fontStyle: string };
|
|
10140
|
+
title3FontSize: number;
|
|
10141
|
+
title3LineHeight?: number;
|
|
10142
|
+
title3LetterSpacing?: number;
|
|
10143
|
+
title3WordSpacing?: number;
|
|
10144
|
+
title3TextAppearance?: TextStyles['textAppearance'];
|
|
10145
|
+
contentMarginTop: number;
|
|
10146
|
+
contentMarginLeft: number;
|
|
10147
|
+
contentMarginRight: number;
|
|
10148
|
+
closeIcon: string | null;
|
|
10149
|
+
closeIconMaxWidth: number;
|
|
10150
|
+
closeIconColor: string;
|
|
10151
|
+
closeIconHoverColor: string;
|
|
10152
|
+
};
|
|
10153
|
+
`,Iu="https://cdn.cntrl.site/component-assets/Close.svg",Ai={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Pu={type:"object",version:1,settings:{properties:{cover:{type:"string",scope:"common",title:"",display:{type:"settings-image-input"}},coverFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},maxHeight:{type:"number",scope:"layout",title:"Max Height",min:0,max:100,display:{type:"percentage-input"}},maxWidth:{type:"number",scope:"layout",title:"Max Width",min:0,max:100,display:{type:"percentage-input"}},imageGap:{type:"number",scope:"layout",title:"Image Gap",min:0,max:200,display:{type:"range-control",visible:!1}},backgroundColor:{type:"string",scope:"layout",title:"BG",display:{type:"settings-color-picker"}},objectFit:{type:"string",scope:"common",title:"Display",display:{type:"toggle-cycle",enum:["cover","fit"]}},closeIcon:{type:["string","null"],scope:"common",title:"",display:{type:"settings-image-input"}},closeIconMaxWidth:{type:"number",scope:"layout",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},closeIconColor:{type:"string",scope:"common",title:"Fill Icon",display:{type:"settings-color-picker"}},closeIconHoverColor:{type:"string",scope:"common",title:"Hover Icon",display:{type:"settings-color-picker"}},textMaxWidth:{type:"string",scope:"common",title:"Max Width",display:{type:"full-width-input"},min:0,max:1},textTransition:{type:"string",scope:"common",title:"Transition",display:{type:"toggle-cycle",enum:["none","fade"]}},titlesGap:{type:"number",scope:"layout",title:"Titles Gap",min:0,max:200,display:{type:"range-control"}},textCountGap:{type:"number",scope:"layout",title:"Text / Count Gap",min:0,max:200,display:{type:"range-control"}},countCloseGap:{type:"number",scope:"layout",title:"Count / Close Gap",min:0,max:200,display:{type:"range-control"}},fontFamily:{type:"string",scope:"common",title:"Font family",display:{type:"font-family-select"}},title1Color:{type:"string",scope:"common",title:"Title 1",display:{type:"palette-color-picker"}},title2Color:{type:"string",scope:"common",title:"Title 2",display:{type:"palette-color-picker"}},title3Color:{type:"string",scope:"common",title:"Title 3",display:{type:"palette-color-picker"}},title1FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 1"},title1FontSize:{type:"number",scope:"layout",title:"Title 1 Font Size",display:{type:"font-size"}},title1LineHeight:{type:"number",scope:"layout",title:"Title 1 Line Height",display:{type:"line-height-input"}},title1LetterSpacing:{type:"number",scope:"layout",title:"Title 1 Letter Spacing",display:{type:"letter-spacing-input"}},title1WordSpacing:{type:"number",scope:"layout",title:"Title 1 Word Spacing",display:{type:"word-spacing-input"}},title1TextAppearance:{type:"object",scope:"layout",title:"Title 1 Text Appearance",display:{type:"text-appearance"}},title2FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 2"},title2FontSize:{type:"number",scope:"layout",title:"Title 2 Font Size",display:{type:"font-size"}},title2LineHeight:{type:"number",scope:"layout",title:"Title 2 Line Height",display:{type:"line-height-input"}},title2LetterSpacing:{type:"number",scope:"layout",title:"Title 2 Letter Spacing",display:{type:"letter-spacing-input"}},title2WordSpacing:{type:"number",scope:"layout",title:"Title 2 Word Spacing",display:{type:"word-spacing-input"}},title2TextAppearance:{type:"object",scope:"layout",title:"Title 2 Text Appearance",display:{type:"text-appearance"}},title3FontSettings:{...Ai.fontSettings,scope:"common",title:"Title 3"},title3FontSize:{type:"number",scope:"layout",title:"Title 3 Font Size",display:{type:"font-size"}},title3LineHeight:{type:"number",scope:"layout",title:"Title 3 Line Height",display:{type:"line-height-input"}},title3LetterSpacing:{type:"number",scope:"layout",title:"Title 3 Letter Spacing",display:{type:"letter-spacing-input"}},title3WordSpacing:{type:"number",scope:"layout",title:"Title 3 Word Spacing",display:{type:"word-spacing-input"}},title3TextAppearance:{type:"object",scope:"layout",title:"Title 3 Text Appearance",display:{type:"text-appearance"}},contentMarginTop:{type:"number",scope:"layout",title:"Content margin top",min:0,max:200,display:{type:"range-control"}},contentMarginLeft:{type:"number",scope:"layout",title:"Content margin left",min:0,max:200,display:{type:"range-control"}},contentMarginRight:{type:"number",scope:"layout",title:"Content margin right",min:0,max:200,display:{type:"range-control"}}},defaults:{cover:"https://cdn.cntrl.site/component-assets/Control-slider-default-picture-1.png",coverFit:"cover",objectFit:"cover",closeIcon:Iu,closeIconColor:"#ffffff",closeIconHoverColor:"#cccccc",textTransition:"fade",fontFamily:"Arial",title1Color:"#ffffff",title2Color:"#ffffff",title3Color:"#ffffff",title1FontSettings:{fontWeight:400,fontStyle:"normal"},title1LetterSpacing:0,title1WordSpacing:0,title1TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},title2FontSettings:{fontWeight:400,fontStyle:"normal"},title2LetterSpacing:0,title2WordSpacing:0,title2TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"},title3FontSettings:{fontWeight:400,fontStyle:"normal"},title3LetterSpacing:0,title3WordSpacing:0,title3TextAppearance:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}},layoutDefaults:{m:{imageGap:0,maxHeight:80,maxWidth:80,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,titlesGap:.1,textCountGap:.02,countCloseGap:.02,title1FontSize:.02,title1LineHeight:.02,title2FontSize:.02,title2LineHeight:.02,title3FontSize:.02,title3LineHeight:.02},d:{maxHeight:80,maxWidth:80,imageGap:0,textMaxWidth:.4,closeIconMaxWidth:.02,backgroundColor:"rgba(28, 31, 34, 0.9)",contentMarginTop:0,contentMarginLeft:0,contentMarginRight:0,titlesGap:.1,textCountGap:.02,countCloseGap:.02,title1FontSize:.02,title1LineHeight:.02,title2FontSize:.02,title2LineHeight:.02,title3FontSize:.02,title3LineHeight:.02}},layout:["__componentName__","maxWidth","maxHeight","imageGap","titlesGap","textCountGap","countCloseGap","objectFit","contentMarginTop","contentMarginLeft","contentMarginRight"]},panels:[{id:"general",icon:"settings",title:"General",tooltip:"General Settings",layout:[{type:"row",items:["__componentName__"]},{type:"row",title:"Image",items:["maxWidth","maxHeight"]},{type:"row",title:"Text",items:["textMaxWidth","textTransition"]},{type:"row",title:"Close icon",items:["closeIcon","closeIconMaxWidth"]},{type:"row",title:"Cover Image",items:["cover","coverFit"]}]},{id:"typeStyle",icon:"text-icon",title:"Type Style",tooltip:"Typography",layout:["fontFamily",{type:"group",title:"",items:["title1FontSettings",{type:"row",items:["title1FontSize","title1LineHeight","title1LetterSpacing","title1WordSpacing"]},"title1TextAppearance"]},{type:"group",title:"",items:["title2FontSettings",{type:"row",items:["title2FontSize","title2LineHeight","title2LetterSpacing","title2WordSpacing"]},"title2TextAppearance"]},{type:"group",title:"",items:["title3FontSettings",{type:"row",items:["title3FontSize","title3LineHeight","title3LetterSpacing","title3WordSpacing"]},"title3TextAppearance"]}]}],paletteBookmark:{items:["backgroundColor","title1Color","title2Color","title3Color","closeIconColor","closeIconHoverColor"],panelIds:["general","typeStyle"]},content:{type:"array",settings:{addItemFromFileExplorer:!0},items:{type:"object",properties:{title1:{type:"string",label:"Title 1",placeholder:"Add Title 1...",display:{type:"text-input"}},title2:{type:"string",label:"Title 2",placeholder:"Add Title 2...",display:{type:"text-input"}},title3:{type:"string",label:"Title 3",placeholder:"Add Title 3...",display:{type:"text-input"}},images:{type:"object",label:"Images",max:2,display:{type:"media-list-input"},properties:{url:{type:"string"},name:{type:"string"},objectFit:{type:"string",enum:["cover","contain"]}},required:["url","name"]}}},default:[{title1:"Journal Entry 1",title2:"summer vacation",title3:"July 1978",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZNCQFC3T744H0KX6R3FR.jpeg",name:"",objectFit:"contain"},{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7RZRTSS60YBFT6Y37ZX00T.jpeg",name:"",objectFit:"contain"}]},{title1:"Journal Entry 2",title2:"spring break",title3:"March 1979",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"},{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ7S04EHBXQS1T4KVAMZNZQM.jpeg",name:"",objectFit:"contain"}]},{title1:"Journal Entry 3",title2:"winter vacation",title3:"January 1980",images:[{url:"https://cdn.cntrl.site/projects/01KM5KBNFNRT3D0JP64K5EY92A/articles-assets/01KQ9M9YJPQ5JWKCHDEW5M1GJD.jpeg",name:"",objectFit:"contain"}]}]}},Ru={element:Lu,id:"lightbox-journal",name:"Lightbox Journal",category:"galleries",version:1,defaultSize:{d:{width:350,height:350},m:{width:300,height:350}},preview:{type:"image",url:"https://cdn.cntrl.site/component-assets/Journal.png"},schema:Pu,sourceCode:Eu,assetsPaths:{content:[{path:"images.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}},Au=[fl,wl,uc,xu,Ru,xc,Rc,jc,Gc,Zc,ld,lu];exports.components=Au;exports.isSchemaV1=sa;
|