@cntrl-site/components 1.0.12-alpha.13 → 1.0.12-alpha.14
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/Form/Form.d.ts +2 -1
- package/dist/Components/Form/FormComponent.d.ts +2 -2
- package/dist/Components/OnelinerForm/OnelinerForm.d.ts +2 -1
- package/dist/Components/OnelinerForm/OnelinerFormComponent.d.ts +2 -1
- package/dist/index.js +132 -2733
- package/dist/index.mjs +3975 -8518
- package/package.json +1 -1
- package/dist/Components/LightboxJournal/LightboxJournal.d.ts +0 -75
- package/dist/Components/LightboxJournal/LightboxJournalComponent.d.ts +0 -42
- package/dist/Components/LightboxStrip/LightboxStrip.d.ts +0 -44
- package/dist/Components/LightboxStrip/LightboxStripComponent.d.ts +0 -42
package/dist/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
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);/*!
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("react"),$e=require("classnames"),E=require("./readTestimonialTextMeasure-CB_Uq-fO.js"),er=require("react-dom");function Jr(e){return e.type==="object"&&e.version===1}const Qr="ControlSlider-module__wrapper___sHEkd",ea="ControlSlider-module__hoverArrow___A-dOH",ta="ControlSlider-module__sliderItem___QQSkR",na="ControlSlider-module__sliderImage___9hRl-",oa="ControlSlider-module__arrow___05ghY",ia="ControlSlider-module__arrowVertical___tBfVN",ra="ControlSlider-module__nextArrow___-30Yc",aa="ControlSlider-module__arrowInner___aEra3",sa="ControlSlider-module__arrowIcon___S4ztF",la="ControlSlider-module__arrowImg___2dwJW",ca="ControlSlider-module__mirror___brd6U",da="ControlSlider-module__pagination___bicLF",ua="ControlSlider-module__paginationInner___bT-P-",pa="ControlSlider-module__paginationVertical___zYqKw",ma="ControlSlider-module__paginationItem___nTRbk",ga="ControlSlider-module__dot___p1Qun",ha="ControlSlider-module__activeDot___LHFaj",fa="ControlSlider-module__paginationInsideBottom___R3FWn",ya="ControlSlider-module__paginationInsideTop___V-qb-",va="ControlSlider-module__paginationOutsideBottom___14w8D",ba="ControlSlider-module__paginationOutsideTop___SCLqB",xa="ControlSlider-module__paginationInsideLeft___yOBRZ",Ca="ControlSlider-module__paginationInsideRight___Rtt3o",Sa="ControlSlider-module__paginationOutsideLeft___lahaw",wa="ControlSlider-module__paginationOutsideRight___EtuQa",$a="ControlSlider-module__imgWrapper___UjEgB",Ta="ControlSlider-module__captionBlock___dJ6-j",La="ControlSlider-module__captionTextWrapper___HFlpf",Ea="ControlSlider-module__captionText___uGBVc",Pa="ControlSlider-module__active___WZK4G",_a="ControlSlider-module__withPointerEvents___t-18M",Aa="ControlSlider-module__topLeftAlignment___zjnGM",Ra="ControlSlider-module__topCenterAlignment___gD1xW",Wa="ControlSlider-module__topRightAlignment___NMapS",Ia="ControlSlider-module__middleLeftAlignment___OnUrY",ka="ControlSlider-module__middleCenterAlignment___Tdkl0",Fa="ControlSlider-module__middleRightAlignment___wEbfX",Ma="ControlSlider-module__bottomLeftAlignment___cTP2-",Na="ControlSlider-module__bottomCenterAlignment___c54fB",Ha="ControlSlider-module__bottomRightAlignment___kEwrz",Ba="ControlSlider-module__clickOverlay___DZA28",Oa="ControlSlider-module__contain___pLyq7",Va="ControlSlider-module__cover___KdDat",ae={wrapper:Qr,hoverArrow:ea,sliderItem:ta,sliderImage:na,arrow:oa,arrowVertical:ia,nextArrow:ra,arrowInner:aa,arrowIcon:sa,arrowImg:la,mirror:ca,pagination:da,paginationInner:ua,paginationVertical:pa,paginationItem:ma,dot:ga,activeDot:ha,paginationInsideBottom:fa,paginationInsideTop:ya,paginationOutsideBottom:va,paginationOutsideTop:ba,paginationInsideLeft:xa,paginationInsideRight:Ca,paginationOutsideLeft:Sa,paginationOutsideRight:wa,imgWrapper:$a,captionBlock:Ta,captionTextWrapper:La,captionText:Ea,active:Pa,withPointerEvents:_a,topLeftAlignment:Aa,topCenterAlignment:Ra,topRightAlignment:Wa,middleLeftAlignment:Ia,middleCenterAlignment:ka,middleRightAlignment:Fa,bottomLeftAlignment:Ma,bottomCenterAlignment:Na,bottomRightAlignment:Ha,clickOverlay:Ba,contain:Oa,cover:Va};function Da(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 ja(e,t,n){return t&&Da(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}var yi="(prefers-reduced-motion: reduce)",nn=1,za=2,an=3,pn=4,An=5,Gn=6,to=7,Ka={CREATED:nn,MOUNTED:za,IDLE:an,MOVING:pn,SCROLLING:An,DRAGGING:Gn,DESTROYED:to};function Pt(e){e.length=0}function Ht(e,t,n){return Array.prototype.slice.call(e,t,n)}function Ae(e){return e.bind.apply(e,[null].concat(Ht(arguments,1)))}var tr=setTimeout,Wo=function(){};function vi(e){return requestAnimationFrame(e)}function so(e,t){return typeof t===e}function bn(e){return!jo(e)&&so("object",e)}var Do=Array.isArray,nr=Ae(so,"function"),Ft=Ae(so,"string"),Rn=Ae(so,"undefined");function jo(e){return e===null}function or(e){try{return e instanceof(e.ownerDocument.defaultView||window).HTMLElement}catch{return!1}}function Wn(e){return Do(e)?e:[e]}function st(e,t){Wn(e).forEach(t)}function zo(e,t){return e.indexOf(t)>-1}function Yn(e,t){return e.push.apply(e,Wn(t)),e}function $t(e,t,n){e&&st(t,function(o){o&&e.classList[n?"add":"remove"](o)})}function ft(e,t){$t(e,Ft(t)?t.split(" "):t,!0)}function In(e,t){st(t,e.appendChild.bind(e))}function Ko(e,t){st(e,function(n){var o=(t||n).parentNode;o&&o.insertBefore(n,t)})}function xn(e,t){return or(e)&&(e.msMatchesSelector||e.matches).call(e,t)}function ir(e,t){var n=e?Ht(e.children):[];return t?n.filter(function(o){return xn(o,t)}):n}function kn(e,t){return t?ir(e,t)[0]:e.firstElementChild}var Cn=Object.keys;function Kt(e,t,n){return e&&(n?Cn(e).reverse():Cn(e)).forEach(function(o){o!=="__proto__"&&t(e[o],o)}),e}function Sn(e){return Ht(arguments,1).forEach(function(t){Kt(t,function(n,o){e[o]=t[o]})}),e}function It(e){return Ht(arguments,1).forEach(function(t){Kt(t,function(n,o){Do(n)?e[o]=n.slice():bn(n)?e[o]=It({},bn(e[o])?e[o]:{},n):e[o]=n})}),e}function bi(e,t){st(t||Cn(e),function(n){delete e[n]})}function yt(e,t){st(e,function(n){st(t,function(o){n&&n.removeAttribute(o)})})}function he(e,t,n){bn(t)?Kt(t,function(o,i){he(e,i,o)}):st(e,function(o){jo(n)||n===""?yt(o,t):o.setAttribute(t,String(n))})}function on(e,t,n){var o=document.createElement(e);return t&&(Ft(t)?ft(o,t):he(o,t)),n&&In(n,o),o}function ut(e,t,n){if(Rn(n))return getComputedStyle(e)[t];jo(n)||(e.style[t]=""+n)}function wn(e,t){ut(e,"display",t)}function rr(e){e.setActive&&e.setActive()||e.focus({preventScroll:!0})}function pt(e,t){return e.getAttribute(t)}function xi(e,t){return e&&e.classList.contains(t)}function it(e){return e.getBoundingClientRect()}function qt(e){st(e,function(t){t&&t.parentNode&&t.parentNode.removeChild(t)})}function ar(e){return kn(new DOMParser().parseFromString(e,"text/html").body)}function wt(e,t){e.preventDefault(),t&&(e.stopPropagation(),e.stopImmediatePropagation())}function sr(e,t){return e&&e.querySelector(t)}function qo(e,t){return t?Ht(e.querySelectorAll(t)):[]}function Tt(e,t){$t(e,t,!1)}function Io(e){return e.timeStamp}function Vt(e){return Ft(e)?e:e?e+"px":""}var Fn="splide",Uo="data-"+Fn;function yn(e,t){if(!e)throw new Error("["+Fn+"] "+(t||""))}var Mt=Math.min,no=Math.max,oo=Math.floor,$n=Math.ceil,Ye=Math.abs;function lr(e,t,n){return Ye(e-t)<n}function Xn(e,t,n,o){var i=Mt(t,n),r=no(t,n);return o?i<e&&e<r:i<=e&&e<=r}function Qt(e,t,n){var o=Mt(t,n),i=no(t,n);return Mt(no(o,e),i)}function ko(e){return+(e>0)-+(e<0)}function Fo(e,t){return st(t,function(n){e=e.replace("%s",""+n)}),e}function Go(e){return e<10?"0"+e:""+e}var Ci={};function qa(e){return""+e+Go(Ci[e]=(Ci[e]||0)+1)}function cr(){var e=[];function t(s,c,a,d){i(s,c,function(p,T,y){var C="addEventListener"in p,m=C?p.removeEventListener.bind(p,T,a,d):p.removeListener.bind(p,a);C?p.addEventListener(T,a,d):p.addListener(a),e.push([p,T,y,a,m])})}function n(s,c,a){i(s,c,function(d,p,T){e=e.filter(function(y){return y[0]===d&&y[1]===p&&y[2]===T&&(!a||y[3]===a)?(y[4](),!1):!0})})}function o(s,c,a){var d,p=!0;return typeof CustomEvent=="function"?d=new CustomEvent(c,{bubbles:p,detail:a}):(d=document.createEvent("CustomEvent"),d.initCustomEvent(c,p,!1,a)),s.dispatchEvent(d),d}function i(s,c,a){st(s,function(d){d&&st(c,function(p){p.split(" ").forEach(function(T){var y=T.split(".");a(d,y[0],y[1])})})})}function r(){e.forEach(function(s){s[4]()}),Pt(e)}return{bind:t,unbind:n,dispatch:o,destroy:r}}var Bt="mounted",Mo="ready",_t="move",mn="moved",Yo="click",dr="active",ur="inactive",pr="visible",mr="hidden",Me="refresh",je="updated",sn="resize",lo="resized",gr="drag",hr="dragging",fr="dragged",co="scroll",Gt="scrolled",Ua="overflow",Xo="destroy",yr="arrows:mounted",vr="arrows:updated",br="pagination:mounted",xr="pagination:updated",Zo="navigation:mounted",Jo="autoplay:play",Cr="autoplay:playing",Qo="autoplay:pause",ei="lazyload:loaded",Sr="sk",wr="sh",io="ei";function Re(e){var t=e?e.event.bus:document.createDocumentFragment(),n=cr();function o(r,s){n.bind(t,Wn(r).join(" "),function(c){s.apply(s,Do(c.detail)?c.detail:[])})}function i(r){n.dispatch(t,r,Ht(arguments,1))}return e&&e.event.on(Xo,n.destroy),Sn(n,{bus:t,on:o,off:Ae(n.unbind,t),emit:i})}function uo(e,t,n,o){var i=Date.now,r,s=0,c,a=!0,d=0;function p(){if(!a){if(s=e?Mt((i()-r)/e,1):1,n&&n(s),s>=1&&(t(),r=i(),o&&++d>=o))return y();c=vi(p)}}function T(x){x||m(),r=i()-(x?s*e:0),a=!1,c=vi(p)}function y(){a=!0}function C(){r=i(),s=0,n&&n(s)}function m(){c&&cancelAnimationFrame(c),s=0,c=0,a=!0}function h(x){e=x}function W(){return a}return{start:T,rewind:C,pause:y,cancel:m,set:h,isPaused:W}}function Ga(e){var t=e;function n(i){t=i}function o(i){return zo(Wn(i),t)}return{set:n,is:o}}function Ya(e,t){var n=uo(0,e,null,1);return function(){n.isPaused()&&n.start()}}function Xa(e,t,n){var o=e.state,i=n.breakpoints||{},r=n.reducedMotion||{},s=cr(),c=[];function a(){var m=n.mediaQuery==="min";Cn(i).sort(function(h,W){return m?+h-+W:+W-+h}).forEach(function(h){p(i[h],"("+(m?"min":"max")+"-width:"+h+"px)")}),p(r,yi),T()}function d(m){m&&s.destroy()}function p(m,h){var W=matchMedia(h);s.bind(W,"change",T),c.push([m,W])}function T(){var m=o.is(to),h=n.direction,W=c.reduce(function(x,b){return It(x,b[1].matches?b[0]:{})},{});bi(n),C(W),n.destroy?e.destroy(n.destroy==="completely"):m?(d(!0),e.mount()):h!==n.direction&&e.refresh()}function y(m){matchMedia(yi).matches&&(m?It(n,r):bi(n,Cn(r)))}function C(m,h,W){It(n,m),h&&It(Object.getPrototypeOf(n),m),(W||!o.is(nn))&&e.emit(je,n)}return{setup:a,destroy:d,reduce:y,set:C}}var po="Arrow",mo=po+"Left",go=po+"Right",$r=po+"Up",Tr=po+"Down",Si="rtl",ho="ttb",Co={width:["height"],left:["top","right"],right:["bottom","left"],x:["y"],X:["Y"],Y:["X"],ArrowLeft:[$r,go],ArrowRight:[Tr,mo]};function Za(e,t,n){function o(r,s,c){c=c||n.direction;var a=c===Si&&!s?1:c===ho?0:-1;return Co[r]&&Co[r][a]||r.replace(/width|left|right/i,function(d,p){var T=Co[d.toLowerCase()][a]||d;return p>0?T.charAt(0).toUpperCase()+T.slice(1):T})}function i(r){return r*(n.direction===Si?1:-1)}return{resolve:o,orient:i}}var Lt="role",rn="tabindex",Ja="disabled",mt="aria-",Mn=mt+"controls",Lr=mt+"current",wi=mt+"selected",rt=mt+"label",ti=mt+"labelledby",Er=mt+"hidden",ni=mt+"orientation",Tn=mt+"roledescription",$i=mt+"live",Ti=mt+"busy",Li=mt+"atomic",oi=[Lt,rn,Ja,Mn,Lr,rt,ti,Er,ni,Tn],vt=Fn+"__",Ot="is-",So=Fn,Ei=vt+"track",Qa=vt+"list",fo=vt+"slide",Pr=fo+"--clone",es=fo+"__container",ii=vt+"arrows",yo=vt+"arrow",_r=yo+"--prev",Ar=yo+"--next",vo=vt+"pagination",Rr=vo+"__page",ts=vt+"progress",ns=ts+"__bar",os=vt+"toggle",is=vt+"spinner",rs=vt+"sr",as=Ot+"initialized",Ut=Ot+"active",Wr=Ot+"prev",Ir=Ot+"next",No=Ot+"visible",Ho=Ot+"loading",kr=Ot+"focus-in",Fr=Ot+"overflow",ss=[Ut,No,Wr,Ir,Ho,kr,Fr],ls={slide:fo,clone:Pr,arrows:ii,arrow:yo,prev:_r,next:Ar,pagination:vo,page:Rr,spinner:is};function cs(e,t){if(nr(e.closest))return e.closest(t);for(var n=e;n&&n.nodeType===1&&!xn(n,t);)n=n.parentElement;return n}var ds=5,Pi=200,Mr="touchstart mousedown",wo="touchmove mousemove",$o="touchend touchcancel mouseup click";function us(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=e.root,c=n.i18n,a={},d=[],p=[],T=[],y,C,m;function h(){f(),O(),b()}function W(){i(Me,x),i(Me,h),i(je,b),r(document,Mr+" keydown",function($){m=$.type==="keydown"},{capture:!0}),r(s,"focusin",function(){$t(s,kr,!!m)})}function x($){var A=oi.concat("style");Pt(d),Tt(s,p),Tt(y,T),yt([y,C],A),yt(s,$?A:["style",Tn])}function b(){Tt(s,p),Tt(y,T),p=_(So),T=_(Ei),ft(s,p),ft(y,T),he(s,rt,n.label),he(s,ti,n.labelledby)}function f(){y=P("."+Ei),C=kn(y,"."+Qa),yn(y&&C,"A track/list element is missing."),Yn(d,ir(C,"."+fo+":not(."+Pr+")")),Kt({arrows:ii,pagination:vo,prev:_r,next:Ar,bar:ns,toggle:os},function($,A){a[A]=P("."+$)}),Sn(a,{root:s,track:y,list:C,slides:d})}function O(){var $=s.id||qa(Fn),A=n.role;s.id=$,y.id=y.id||$+"-track",C.id=C.id||$+"-list",!pt(s,Lt)&&s.tagName!=="SECTION"&&A&&he(s,Lt,A),he(s,Tn,c.carousel),he(C,Lt,"presentation")}function P($){var A=sr(s,$);return A&&cs(A,"."+So)===s?A:void 0}function _($){return[$+"--"+n.type,$+"--"+n.direction,n.drag&&$+"--draggable",n.isNavigation&&$+"--nav",$===So&&Ut]}return Sn(a,{setup:h,mount:W,destroy:x})}var ln="slide",gn="loop",Nn="fade";function ps(e,t,n,o){var i=Re(e),r=i.on,s=i.emit,c=i.bind,a=e.Components,d=e.root,p=e.options,T=p.isNavigation,y=p.updateOnMove,C=p.i18n,m=p.pagination,h=p.slideFocus,W=a.Direction.resolve,x=pt(o,"style"),b=pt(o,rt),f=n>-1,O=kn(o,"."+es),P;function _(){f||(o.id=d.id+"-slide"+Go(t+1),he(o,Lt,m?"tabpanel":"group"),he(o,Tn,C.slide),he(o,rt,b||Fo(C.slideLabel,[t+1,e.length]))),$()}function $(){c(o,"click",Ae(s,Yo,F)),c(o,"keydown",Ae(s,Sr,F)),r([mn,wr,Gt],L),r(Zo,w),y&&r(_t,H)}function A(){P=!0,i.destroy(),Tt(o,ss),yt(o,oi),he(o,"style",x),he(o,rt,b||"")}function w(){var N=e.splides.map(function(I){var B=I.splide.Components.Slides.getAt(t);return B?B.slide.id:""}).join(" ");he(o,rt,Fo(C.slideX,(f?n:t)+1)),he(o,Mn,N),he(o,Lt,h?"button":""),h&&yt(o,Tn)}function H(){P||L()}function L(){if(!P){var N=e.index;V(),D(),$t(o,Wr,t===N-1),$t(o,Ir,t===N+1)}}function V(){var N=q();N!==xi(o,Ut)&&($t(o,Ut,N),he(o,Lr,T&&N||""),s(N?dr:ur,F))}function D(){var N=S(),I=!N&&(!q()||f);if(e.state.is([pn,An])||he(o,Er,I||""),he(qo(o,p.focusableNodes||""),rn,I?-1:""),h&&he(o,rn,I?-1:0),N!==xi(o,No)&&($t(o,No,N),s(N?pr:mr,F)),!N&&document.activeElement===o){var B=a.Slides.getAt(e.index);B&&rr(B.slide)}}function J(N,I,B){ut(B&&O||o,N,I)}function q(){var N=e.index;return N===t||p.cloneStatus&&N===n}function S(){if(e.is(Nn))return q();var N=it(a.Elements.track),I=it(o),B=W("left",!0),ie=W("right",!0);return oo(N[B])<=$n(I[B])&&oo(I[ie])<=$n(N[ie])}function R(N,I){var B=Ye(N-t);return!f&&(p.rewind||e.is(gn))&&(B=Mt(B,e.length-B)),B<=I}var F={index:t,slideIndex:n,slide:o,container:O,isClone:f,mount:_,destroy:A,update:L,style:J,isWithin:R};return F}function ms(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=t.Elements,a=c.slides,d=c.list,p=[];function T(){y(),i(Me,C),i(Me,y)}function y(){a.forEach(function(L,V){h(L,V,-1)})}function C(){P(function(L){L.destroy()}),Pt(p)}function m(){P(function(L){L.update()})}function h(L,V,D){var J=ps(e,V,D,L);J.mount(),p.push(J),p.sort(function(q,S){return q.index-S.index})}function W(L){return L?_(function(V){return!V.isClone}):p}function x(L){var V=t.Controller,D=V.toIndex(L),J=V.hasFocus()?1:n.perPage;return _(function(q){return Xn(q.index,D,D+J-1)})}function b(L){return _(L)[0]}function f(L,V){st(L,function(D){if(Ft(D)&&(D=ar(D)),or(D)){var J=a[V];J?Ko(D,J):In(d,D),ft(D,n.classes.slide),A(D,Ae(r,sn))}}),r(Me)}function O(L){qt(_(L).map(function(V){return V.slide})),r(Me)}function P(L,V){W(V).forEach(L)}function _(L){return p.filter(nr(L)?L:function(V){return Ft(L)?xn(V.slide,L):zo(Wn(L),V.index)})}function $(L,V,D){P(function(J){J.style(L,V,D)})}function A(L,V){var D=qo(L,"img"),J=D.length;J?D.forEach(function(q){s(q,"load error",function(){--J||V()})}):V()}function w(L){return L?a.length:p.length}function H(){return p.length>n.perPage}return{mount:T,destroy:C,update:m,register:h,get:W,getIn:x,getAt:b,add:f,remove:O,forEach:P,filter:_,style:$,getLength:w,isEnough:H}}function gs(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=t.Slides,a=t.Direction.resolve,d=t.Elements,p=d.root,T=d.track,y=d.list,C=c.getAt,m=c.style,h,W,x;function b(){f(),r(window,"resize load",Ya(Ae(s,sn))),i([je,Me],f),i(sn,O)}function f(){h=n.direction===ho,ut(p,"maxWidth",Vt(n.width)),ut(T,a("paddingLeft"),P(!1)),ut(T,a("paddingRight"),P(!0)),O(!0)}function O(F){var N=it(p);(F||W.width!==N.width||W.height!==N.height)&&(ut(T,"height",_()),m(a("marginRight"),Vt(n.gap)),m("width",A()),m("height",w(),!0),W=N,s(lo),x!==(x=R())&&($t(p,Fr,x),s(Ua,x)))}function P(F){var N=n.padding,I=a(F?"right":"left");return N&&Vt(N[I]||(bn(N)?0:N))||"0px"}function _(){var F="";return h&&(F=$(),yn(F,"height or heightRatio is missing."),F="calc("+F+" - "+P(!1)+" - "+P(!0)+")"),F}function $(){return Vt(n.height||it(y).width*n.heightRatio)}function A(){return n.autoWidth?null:Vt(n.fixedWidth)||(h?"":H())}function w(){return Vt(n.fixedHeight)||(h?n.autoHeight?null:H():$())}function H(){var F=Vt(n.gap);return"calc((100%"+(F&&" + "+F)+")/"+(n.perPage||1)+(F&&" - "+F)+")"}function L(){return it(y)[a("width")]}function V(F,N){var I=C(F||0);return I?it(I.slide)[a("width")]+(N?0:q()):0}function D(F,N){var I=C(F);if(I){var B=it(I.slide)[a("right")],ie=it(y)[a("left")];return Ye(B-ie)+(N?0:q())}return 0}function J(F){return D(e.length-1)-D(0)+V(0,F)}function q(){var F=C(0);return F&&parseFloat(ut(F.slide,a("marginRight")))||0}function S(F){return parseFloat(ut(T,a("padding"+(F?"Right":"Left"))))||0}function R(){return e.is(Nn)||J(!0)>L()}return{mount:b,resize:O,listSize:L,slideSize:V,sliderSize:J,totalSize:D,getPadding:S,isOverflow:R}}var hs=2;function fs(e,t,n){var o=Re(e),i=o.on,r=t.Elements,s=t.Slides,c=t.Direction.resolve,a=[],d;function p(){i(Me,T),i([je,sn],C),(d=W())&&(m(d),t.Layout.resize(!0))}function T(){y(),p()}function y(){qt(a),Pt(a),o.destroy()}function C(){var x=W();d!==x&&(d<x||!x)&&o.emit(Me)}function m(x){var b=s.get().slice(),f=b.length;if(f){for(;b.length<x;)Yn(b,b);Yn(b.slice(-x),b.slice(0,x)).forEach(function(O,P){var _=P<x,$=h(O.slide,P);_?Ko($,b[0].slide):In(r.list,$),Yn(a,$),s.register($,P-x+(_?0:f),O.index)})}}function h(x,b){var f=x.cloneNode(!0);return ft(f,n.classes.clone),f.id=e.root.id+"-clone"+Go(b+1),f}function W(){var x=n.clones;if(!e.is(gn))x=0;else if(Rn(x)){var b=n[c("fixedWidth")]&&t.Layout.slideSize(0),f=b&&$n(it(r.track)[c("width")]/b);x=f||n[c("autoWidth")]&&e.length||n.perPage*hs}return x}return{mount:p,destroy:y}}function ys(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=e.state.set,c=t.Layout,a=c.slideSize,d=c.getPadding,p=c.totalSize,T=c.listSize,y=c.sliderSize,C=t.Direction,m=C.resolve,h=C.orient,W=t.Elements,x=W.list,b=W.track,f;function O(){f=t.Transition,i([Bt,lo,je,Me],P)}function P(){t.Controller.isBusy()||(t.Scroll.cancel(),$(e.index),t.Slides.update())}function _(I,B,ie,Q){I!==B&&F(I>ie)&&(L(),A(H(J(),I>ie),!0)),s(pn),r(_t,B,ie,I),f.start(B,function(){s(an),r(mn,B,ie,I),Q&&Q()})}function $(I){A(D(I,!0))}function A(I,B){if(!e.is(Nn)){var ie=B?I:w(I);ut(x,"transform","translate"+m("X")+"("+ie+"px)"),I!==ie&&r(wr)}}function w(I){if(e.is(gn)){var B=V(I),ie=B>t.Controller.getEnd(),Q=B<0;(Q||ie)&&(I=H(I,ie))}return I}function H(I,B){var ie=I-R(B),Q=y();return I-=h(Q*($n(Ye(ie)/Q)||1))*(B?1:-1),I}function L(){A(J(),!0),f.cancel()}function V(I){for(var B=t.Slides.get(),ie=0,Q=1/0,oe=0;oe<B.length;oe++){var G=B[oe].index,M=Ye(D(G,!0)-I);if(M<=Q)Q=M,ie=G;else break}return ie}function D(I,B){var ie=h(p(I-1)-S(I));return B?q(ie):ie}function J(){var I=m("left");return it(x)[I]-it(b)[I]+h(d(!1))}function q(I){return n.trimSpace&&e.is(ln)&&(I=Qt(I,0,h(y(!0)-T()))),I}function S(I){var B=n.focus;return B==="center"?(T()-a(I,!0))/2:+B*a(I)||0}function R(I){return D(I?t.Controller.getEnd():0,!!n.trimSpace)}function F(I){var B=h(H(J(),I));return I?B>=0:B<=x[m("scrollWidth")]-it(b)[m("width")]}function N(I,B){B=Rn(B)?J():B;var ie=I!==!0&&h(B)<h(R(!1)),Q=I!==!1&&h(B)>h(R(!0));return ie||Q}return{mount:O,move:_,jump:$,translate:A,shift:H,cancel:L,toIndex:V,toPosition:D,getPosition:J,getLimit:R,exceededLimit:N,reposition:P}}function vs(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=t.Move,c=s.getPosition,a=s.getLimit,d=s.toPosition,p=t.Slides,T=p.isEnough,y=p.getLength,C=n.omitEnd,m=e.is(gn),h=e.is(ln),W=Ae(J,!1),x=Ae(J,!0),b=n.start||0,f,O=b,P,_,$;function A(){w(),i([je,Me,io],w),i(lo,H)}function w(){P=y(!0),_=n.perMove,$=n.perPage,f=F();var M=Qt(b,0,C?f:P-1);M!==b&&(b=M,s.reposition())}function H(){f!==F()&&r(io)}function L(M,re,Le){if(!G()){var ce=D(M),fe=R(ce);fe>-1&&(re||fe!==b)&&(ie(fe),s.move(ce,fe,O,Le))}}function V(M,re,Le,ce){t.Scroll.scroll(M,re,Le,function(){var fe=R(s.toIndex(c()));ie(C?Mt(fe,f):fe),ce&&ce()})}function D(M){var re=b;if(Ft(M)){var Le=M.match(/([+\-<>])(\d+)?/)||[],ce=Le[1],fe=Le[2];ce==="+"||ce==="-"?re=q(b+ +(""+ce+(+fe||1)),b):ce===">"?re=fe?N(+fe):W(!0):ce==="<"&&(re=x(!0))}else re=m?M:Qt(M,0,f);return re}function J(M,re){var Le=_||(oe()?1:$),ce=q(b+Le*(M?-1:1),b,!(_||oe()));return ce===-1&&h&&!lr(c(),a(!M),1)?M?0:f:re?ce:R(ce)}function q(M,re,Le){if(T()||oe()){var ce=S(M);ce!==M&&(re=M,M=ce,Le=!1),M<0||M>f?!_&&(Xn(0,M,re,!0)||Xn(f,re,M,!0))?M=N(I(M)):m?M=Le?M<0?-(P%$||$):P:M:n.rewind?M=M<0?f:0:M=-1:Le&&M!==re&&(M=N(I(re)+(M<re?-1:1)))}else M=-1;return M}function S(M){if(h&&n.trimSpace==="move"&&M!==b)for(var re=c();re===d(M,!0)&&Xn(M,0,e.length-1,!n.rewind);)M<b?--M:++M;return M}function R(M){return m?(M+P)%P||0:M}function F(){for(var M=P-(oe()||m&&_?1:$);C&&M-- >0;)if(d(P-1,!0)!==d(M,!0)){M++;break}return Qt(M,0,P-1)}function N(M){return Qt(oe()?M:$*M,0,f)}function I(M){return oe()?Mt(M,f):oo((M>=f?P-1:M)/$)}function B(M){var re=s.toIndex(M);return h?Qt(re,0,f):re}function ie(M){M!==b&&(O=b,b=M)}function Q(M){return M?O:b}function oe(){return!Rn(n.focus)||n.isNavigation}function G(){return e.state.is([pn,An])&&!!n.waitForTransition}return{mount:A,go:L,scroll:V,getNext:W,getPrev:x,getAdjacent:J,getEnd:F,setIndex:ie,getIndex:Q,toIndex:N,toPage:I,toDest:B,hasFocus:oe,isBusy:G}}var bs="http://www.w3.org/2000/svg",xs="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",Vn=40;function Cs(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=n.classes,a=n.i18n,d=t.Elements,p=t.Controller,T=d.arrows,y=d.track,C=T,m=d.prev,h=d.next,W,x,b={};function f(){P(),i(je,O)}function O(){_(),f()}function P(){var V=n.arrows;V&&!(m&&h)&&w(),m&&h&&(Sn(b,{prev:m,next:h}),wn(C,V?"":"none"),ft(C,x=ii+"--"+n.direction),V&&($(),L(),he([m,h],Mn,y.id),s(yr,m,h)))}function _(){o.destroy(),Tt(C,x),W?(qt(T?[m,h]:C),m=h=null):yt([m,h],oi)}function $(){i([Bt,mn,Me,Gt,io],L),r(h,"click",Ae(A,">")),r(m,"click",Ae(A,"<"))}function A(V){p.go(V,!0)}function w(){C=T||on("div",c.arrows),m=H(!0),h=H(!1),W=!0,In(C,[m,h]),!T&&Ko(C,y)}function H(V){var D='<button class="'+c.arrow+" "+(V?c.prev:c.next)+'" type="button"><svg xmlns="'+bs+'" viewBox="0 0 '+Vn+" "+Vn+'" width="'+Vn+'" height="'+Vn+'" focusable="false"><path d="'+(n.arrowPath||xs)+'" />';return ar(D)}function L(){if(m&&h){var V=e.index,D=p.getPrev(),J=p.getNext(),q=D>-1&&V<D?a.last:a.prev,S=J>-1&&V>J?a.first:a.next;m.disabled=D<0,h.disabled=J<0,he(m,rt,q),he(h,rt,S),s(vr,m,h,D,J)}}return{arrows:b,mount:f,destroy:_,update:L}}var Ss=Uo+"-interval";function ws(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.emit,c=uo(n.interval,e.go.bind(e,">"),$),a=c.isPaused,d=t.Elements,p=t.Elements,T=p.root,y=p.toggle,C=n.autoplay,m,h,W=C==="pause";function x(){C&&(b(),y&&he(y,Mn,d.track.id),W||f(),_())}function b(){n.pauseOnHover&&r(T,"mouseenter mouseleave",function(w){m=w.type==="mouseenter",P()}),n.pauseOnFocus&&r(T,"focusin focusout",function(w){h=w.type==="focusin",P()}),y&&r(y,"click",function(){W?f():O(!0)}),i([_t,co,Me],c.rewind),i(_t,A)}function f(){a()&&t.Slides.isEnough()&&(c.start(!n.resetProgress),h=m=W=!1,_(),s(Jo))}function O(w){w===void 0&&(w=!0),W=!!w,_(),a()||(c.pause(),s(Qo))}function P(){W||(m||h?O(!1):f())}function _(){y&&($t(y,Ut,!W),he(y,rt,n.i18n[W?"play":"pause"]))}function $(w){var H=d.bar;H&&ut(H,"width",w*100+"%"),s(Cr,w)}function A(w){var H=t.Slides.getAt(w);c.set(H&&+pt(H.slide,Ss)||n.interval)}return{mount:x,destroy:c.cancel,play:f,pause:O,isPaused:a}}function $s(e,t,n){var o=Re(e),i=o.on;function r(){n.cover&&(i(ei,Ae(c,!0)),i([Bt,je,Me],Ae(s,!0)))}function s(a){t.Slides.forEach(function(d){var p=kn(d.container||d.slide,"img");p&&p.src&&c(a,p,d)})}function c(a,d,p){p.style("background",a?'center/cover no-repeat url("'+d.src+'")':"",!0),wn(d,a?"none":"")}return{mount:r,destroy:Ae(s,!1)}}var Ts=10,Ls=600,Es=.6,Ps=1.5,_s=800;function As(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=e.state.set,c=t.Move,a=c.getPosition,d=c.getLimit,p=c.exceededLimit,T=c.translate,y=e.is(ln),C,m,h=1;function W(){i(_t,O),i([je,Me],P)}function x($,A,w,H,L){var V=a();if(O(),w&&(!y||!p())){var D=t.Layout.sliderSize(),J=ko($)*D*oo(Ye($)/D)||0;$=c.toPosition(t.Controller.toDest($%D))+J}var q=lr(V,$,1);h=1,A=q?0:A||no(Ye($-V)/Ps,_s),m=H,C=uo(A,b,Ae(f,V,$,L),1),s(An),r(co),C.start()}function b(){s(an),m&&m(),r(Gt)}function f($,A,w,H){var L=a(),V=$+(A-$)*_(H),D=(V-L)*h;T(L+D),y&&!w&&p()&&(h*=Es,Ye(D)<Ts&&x(d(p(!0)),Ls,!1,m,!0))}function O(){C&&C.cancel()}function P(){C&&!C.isPaused()&&(O(),b())}function _($){var A=n.easingFunc;return A?A($):1-Math.pow(1-$,4)}return{mount:W,destroy:O,scroll:x,cancel:P}}var en={passive:!1,capture:!0};function Rs(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=o.unbind,a=e.state,d=t.Move,p=t.Scroll,T=t.Controller,y=t.Elements.track,C=t.Media.reduce,m=t.Direction,h=m.resolve,W=m.orient,x=d.getPosition,b=d.exceededLimit,f,O,P,_,$,A=!1,w,H,L;function V(){s(y,wo,Wo,en),s(y,$o,Wo,en),s(y,Mr,J,en),s(y,"click",R,{capture:!0}),s(y,"dragstart",wt),i([Bt,je],D)}function D(){var v=n.drag;ne(!v),_=v==="free"}function J(v){if(w=!1,!H){var g=fe(v);ce(v.target)&&(g||!v.button)&&(T.isBusy()?wt(v,!0):(L=g?y:window,$=a.is([pn,An]),P=null,s(L,wo,q,en),s(L,$o,S,en),d.cancel(),p.cancel(),F(v)))}}function q(v){if(a.is(Gn)||(a.set(Gn),r(gr)),v.cancelable)if($){d.translate(f+Le(oe(v)));var g=G(v)>Pi,k=A!==(A=b());(g||k)&&F(v),w=!0,r(hr),wt(v)}else B(v)&&($=I(v),wt(v))}function S(v){a.is(Gn)&&(a.set(an),r(fr)),$&&(N(v),wt(v)),c(L,wo,q),c(L,$o,S),$=!1}function R(v){!H&&w&&wt(v,!0)}function F(v){P=O,O=v,f=x()}function N(v){var g=ie(v),k=Q(g),K=n.rewind&&n.rewindByDrag;C(!1),_?T.scroll(k,0,n.snap):e.is(Nn)?T.go(W(ko(g))<0?K?"<":"-":K?">":"+"):e.is(ln)&&A&&K?T.go(b(!0)?">":"<"):T.go(T.toDest(k),!0),C(!0)}function I(v){var g=n.dragMinThreshold,k=bn(g),K=k&&g.mouse||0,U=(k?g.touch:+g)||10;return Ye(oe(v))>(fe(v)?U:K)}function B(v){return Ye(oe(v))>Ye(oe(v,!0))}function ie(v){if(e.is(gn)||!A){var g=G(v);if(g&&g<Pi)return oe(v)/g}return 0}function Q(v){return x()+ko(v)*Mt(Ye(v)*(n.flickPower||600),_?1/0:t.Layout.listSize()*(n.flickMaxPages||1))}function oe(v,g){return re(v,g)-re(M(v),g)}function G(v){return Io(v)-Io(M(v))}function M(v){return O===v&&P||O}function re(v,g){return(fe(v)?v.changedTouches[0]:v)["page"+h(g?"Y":"X")]}function Le(v){return v/(A&&e.is(ln)?ds:1)}function ce(v){var g=n.noDrag;return!xn(v,"."+Rr+", ."+yo)&&(!g||!xn(v,g))}function fe(v){return typeof TouchEvent<"u"&&v instanceof TouchEvent}function We(){return $}function ne(v){H=v}return{mount:V,disable:ne,isDragging:We}}var Ws={Spacebar:" ",Right:go,Left:mo,Up:$r,Down:Tr};function ri(e){return e=Ft(e)?e:e.key,Ws[e]||e}var _i="keydown";function Is(e,t,n){var o=Re(e),i=o.on,r=o.bind,s=o.unbind,c=e.root,a=t.Direction.resolve,d,p;function T(){y(),i(je,C),i(je,y),i(_t,h)}function y(){var x=n.keyboard;x&&(d=x==="global"?window:c,r(d,_i,W))}function C(){s(d,_i)}function m(x){p=x}function h(){var x=p;p=!0,tr(function(){p=x})}function W(x){if(!p){var b=ri(x);b===a(mo)?e.go("<"):b===a(go)&&e.go(">")}}return{mount:T,destroy:C,disable:m}}var vn=Uo+"-lazy",Zn=vn+"-srcset",ks="["+vn+"], ["+Zn+"]";function Fs(e,t,n){var o=Re(e),i=o.on,r=o.off,s=o.bind,c=o.emit,a=n.lazyLoad==="sequential",d=[mn,Gt],p=[];function T(){n.lazyLoad&&(y(),i(Me,y))}function y(){Pt(p),C(),a?x():(r(d),i(d,m),m())}function C(){t.Slides.forEach(function(b){qo(b.slide,ks).forEach(function(f){var O=pt(f,vn),P=pt(f,Zn);if(O!==f.src||P!==f.srcset){var _=n.classes.spinner,$=f.parentElement,A=kn($,"."+_)||on("span",_,$);p.push([f,b,A]),f.src||wn(f,"none")}})})}function m(){p=p.filter(function(b){var f=n.perPage*((n.preloadPages||1)+1)-1;return b[1].isWithin(e.index,f)?h(b):!0}),p.length||r(d)}function h(b){var f=b[0];ft(b[1].slide,Ho),s(f,"load error",Ae(W,b)),he(f,"src",pt(f,vn)),he(f,"srcset",pt(f,Zn)),yt(f,vn),yt(f,Zn)}function W(b,f){var O=b[0],P=b[1];Tt(P.slide,Ho),f.type!=="error"&&(qt(b[2]),wn(O,""),c(ei,O,P),c(sn)),a&&x()}function x(){p.length&&h(p.shift())}return{mount:T,destroy:Ae(Pt,p),check:m}}function Ms(e,t,n){var o=Re(e),i=o.on,r=o.emit,s=o.bind,c=t.Slides,a=t.Elements,d=t.Controller,p=d.hasFocus,T=d.getIndex,y=d.go,C=t.Direction.resolve,m=a.pagination,h=[],W,x;function b(){f(),i([je,Me,io],b);var H=n.pagination;m&&wn(m,H?"":"none"),H&&(i([_t,co,Gt],w),O(),w(),r(br,{list:W,items:h},A(e.index)))}function f(){W&&(qt(m?Ht(W.children):W),Tt(W,x),Pt(h),W=null),o.destroy()}function O(){var H=e.length,L=n.classes,V=n.i18n,D=n.perPage,J=p()?d.getEnd()+1:$n(H/D);W=m||on("ul",L.pagination,a.track.parentElement),ft(W,x=vo+"--"+$()),he(W,Lt,"tablist"),he(W,rt,V.select),he(W,ni,$()===ho?"vertical":"");for(var q=0;q<J;q++){var S=on("li",null,W),R=on("button",{class:L.page,type:"button"},S),F=c.getIn(q).map(function(I){return I.slide.id}),N=!p()&&D>1?V.pageX:V.slideX;s(R,"click",Ae(P,q)),n.paginationKeyboard&&s(R,"keydown",Ae(_,q)),he(S,Lt,"presentation"),he(R,Lt,"tab"),he(R,Mn,F.join(" ")),he(R,rt,Fo(N,q+1)),he(R,rn,-1),h.push({li:S,button:R,page:q})}}function P(H){y(">"+H,!0)}function _(H,L){var V=h.length,D=ri(L),J=$(),q=-1;D===C(go,!1,J)?q=++H%V:D===C(mo,!1,J)?q=(--H+V)%V:D==="Home"?q=0:D==="End"&&(q=V-1);var S=h[q];S&&(rr(S.button),y(">"+q),wt(L,!0))}function $(){return n.paginationDirection||n.direction}function A(H){return h[d.toPage(H)]}function w(){var H=A(T(!0)),L=A(T());if(H){var V=H.button;Tt(V,Ut),yt(V,wi),he(V,rn,-1)}if(L){var D=L.button;ft(D,Ut),he(D,wi,!0),he(D,rn,"")}r(xr,{list:W,items:h},H,L)}return{items:h,mount:b,destroy:f,getAt:A,update:w}}var Ns=[" ","Enter"];function Hs(e,t,n){var o=n.isNavigation,i=n.slideFocus,r=[];function s(){e.splides.forEach(function(m){m.isParent||(d(e,m.splide),d(m.splide,e))}),o&&p()}function c(){r.forEach(function(m){m.destroy()}),Pt(r)}function a(){c(),s()}function d(m,h){var W=Re(m);W.on(_t,function(x,b,f){h.go(h.is(gn)?f:x)}),r.push(W)}function p(){var m=Re(e),h=m.on;h(Yo,y),h(Sr,C),h([Bt,je],T),r.push(m),m.emit(Zo,e.splides)}function T(){he(t.Elements.list,ni,n.direction===ho?"vertical":"")}function y(m){e.go(m.index)}function C(m,h){zo(Ns,ri(h))&&(y(m),wt(h))}return{setup:Ae(t.Media.set,{slideFocus:Rn(i)?o:i},!0),mount:s,destroy:c,remount:a}}function Bs(e,t,n){var o=Re(e),i=o.bind,r=0;function s(){n.wheel&&i(t.Elements.track,"wheel",c,en)}function c(d){if(d.cancelable){var p=d.deltaY,T=p<0,y=Io(d),C=n.wheelMinThreshold||0,m=n.wheelSleep||0;Ye(p)>C&&y-r>m&&(e.go(T?"<":">"),r=y),a(T)&&wt(d)}}function a(d){return!n.releaseWheel||e.state.is(pn)||t.Controller.getAdjacent(d)!==-1}return{mount:s}}var Os=90;function Vs(e,t,n){var o=Re(e),i=o.on,r=t.Elements.track,s=n.live&&!n.isNavigation,c=on("span",rs),a=uo(Os,Ae(p,!1));function d(){s&&(y(!t.Autoplay.isPaused()),he(r,Li,!0),c.textContent="…",i(Jo,Ae(y,!0)),i(Qo,Ae(y,!1)),i([mn,Gt],Ae(p,!0)))}function p(C){he(r,Ti,C),C?(In(r,c),a.start()):(qt(c),a.cancel())}function T(){yt(r,[$i,Li,Ti]),qt(c)}function y(C){s&&he(r,$i,C?"off":"polite")}return{mount:d,disable:y,destroy:T}}var Ds=Object.freeze({__proto__:null,Media:Xa,Direction:Za,Elements:us,Slides:ms,Layout:gs,Clones:fs,Move:ys,Controller:vs,Arrows:Cs,Autoplay:ws,Cover:$s,Scroll:As,Drag:Rs,Keyboard:Is,LazyLoad:Fs,Pagination:Ms,Sync:Hs,Wheel:Bs,Live:Vs}),js={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"},zs={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:ls,i18n:js,reducedMotion:{speed:0,rewindSpeed:0,autoplay:"pause"}};function Ks(e,t,n){var o=t.Slides;function i(){Re(e).on([Bt,Me],r)}function r(){o.forEach(function(c){c.style("transform","translateX(-"+100*c.index+"%)")})}function s(c,a){o.style("transition","opacity "+n.speed+"ms "+n.easing),tr(a)}return{mount:i,start:s,cancel:Wo}}function qs(e,t,n){var o=t.Move,i=t.Controller,r=t.Scroll,s=t.Elements.list,c=Ae(ut,s,"transition"),a;function d(){Re(e).bind(s,"transitionend",function(C){C.target===s&&a&&(T(),a())})}function p(C,m){var h=o.toPosition(C,!0),W=o.getPosition(),x=y(C);Ye(h-W)>=1&&x>=1?n.useScroll?r.scroll(h,x,!1,m):(c("transform "+x+"ms "+n.easing),o.translate(h,!0),a=m):(o.jump(C),m())}function T(){c(""),r.cancel()}function y(C){var m=n.rewindSpeed;if(e.is(ln)&&m){var h=i.getIndex(!0),W=i.getEnd();if(h===0&&C>=W||h>=W&&C===0)return m}return n.speed}return{mount:d,start:p,cancel:T}}var Us=(function(){function e(n,o){this.event=Re(),this.Components={},this.state=Ga(nn),this.splides=[],this._o={},this._E={};var i=Ft(n)?sr(document,n):n;yn(i,i+" is invalid."),this.root=i,o=It({label:pt(i,rt)||"",labelledby:pt(i,ti)||""},zs,e.defaults,o||{});try{It(o,JSON.parse(pt(i,Uo)))}catch{yn(!1,"Invalid JSON")}this._o=Object.create(It({},o))}var t=e.prototype;return t.mount=function(o,i){var r=this,s=this.state,c=this.Components;yn(s.is([nn,to]),"Already mounted!"),s.set(nn),this._C=c,this._T=i||this._T||(this.is(Nn)?Ks:qs),this._E=o||this._E;var a=Sn({},Ds,this._E,{Transition:this._T});return Kt(a,function(d,p){var T=d(r,c,r._o);c[p]=T,T.setup&&T.setup()}),Kt(c,function(d){d.mount&&d.mount()}),this.emit(Bt),ft(this.root,as),s.set(an),this.emit(Mo),this},t.sync=function(o){return this.splides.push({splide:o}),o.splides.push({splide:this,isParent:!0}),this.state.is(an)&&(this._C.Sync.remount(),o.Components.Sync.remount()),this},t.go=function(o){return this._C.Controller.go(o),this},t.on=function(o,i){return this.event.on(o,i),this},t.off=function(o){return this.event.off(o),this},t.emit=function(o){var i;return(i=this.event).emit.apply(i,[o].concat(Ht(arguments,1))),this},t.add=function(o,i){return this._C.Slides.add(o,i),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(Me),this},t.destroy=function(o){o===void 0&&(o=!0);var i=this.event,r=this.state;return r.is(nn)?Re(this).on(Mo,this.destroy.bind(this,o)):(Kt(this._C,function(s){s.destroy&&s.destroy(o)},!0),i.emit(Xo),i.destroy(),o&&Pt(this.splides),r.set(to)),this},ja(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})(),ai=Us;ai.defaults={};ai.STATES=Ka;var Ai=[[Bt,"onMounted"],[Mo,"onReady"],[_t,"onMove"],[mn,"onMoved"],[Yo,"onClick"],[dr,"onActive"],[ur,"onInactive"],[pr,"onVisible"],[mr,"onHidden"],[Me,"onRefresh"],[je,"onUpdated"],[sn,"onResize"],[lo,"onResized"],[gr,"onDrag"],[hr,"onDragging"],[fr,"onDragged"],[co,"onScroll"],[Gt,"onScrolled"],[Xo,"onDestroy"],[yr,"onArrowsMounted"],[vr,"onArrowsUpdated"],[br,"onPaginationMounted"],[xr,"onPaginationUpdated"],[Zo,"onNavigationMounted"],[Jo,"onAutoplayPlay"],[Cr,"onAutoplayPlaying"],[Qo,"onAutoplayPause"],[ei,"onLazyLoadLoaded"]];function si(...e){return e.filter(Boolean).join(" ")}function ro(e){return e!==null&&typeof e=="object"}function Bo(e,t){if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&!e.some((n,o)=>!Bo(n,t[o]));if(ro(e)&&ro(t)){const n=Object.keys(e),o=Object.keys(t);return n.length===o.length&&!n.some(i=>!Object.prototype.hasOwnProperty.call(t,i)||!Bo(e[i],t[i]))}return e===t}function Gs(e,t){return e.length===t.length&&!e.some((n,o)=>n!==t[o])}function Ys(e,t){if(e){const n=Object.keys(e);for(let o=0;o<n.length;o++){const i=n[o];if(i!=="__proto__"&&t(e[i],i)===!1)break}}return e}function Oo(e,t){const n=e;return Ys(t,(o,i)=>{Array.isArray(o)?n[i]=o.slice():ro(o)?n[i]=Oo(ro(n[i])?n[i]:{},o):n[i]=o}),n}var Xs=({children:e,className:t,...n})=>u.createElement("div",{className:si("splide__track",t),...n},u.createElement("ul",{className:"splide__list"},e)),li=class extends u.Component{constructor(){super(...arguments),this.splideRef=u.createRef(),this.slides=[]}componentDidMount(){const{options:e,extensions:t,transition:n}=this.props,{current:o}=this.splideRef;o&&(this.splide=new ai(o,e),this.bind(this.splide),this.splide.mount(t,n),this.options=Oo({},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&&!Bo(this.options,e)&&(this.splide.options=e,this.options=Oo({},e));const t=this.getSlides();Gs(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){Ai.forEach(([t,n])=>{const o=this.props[n];typeof o=="function"&&e.on(t,(...i)=>{o(e,...i)})})}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,...i}=this.props;return u.createElement(t,{className:si("splide",e),ref:this.splideRef,...this.omit(i,["options",...Ai.map(r=>r[1])])},n?u.createElement(Xs,null,o):o)}},ci=({children:e,className:t,...n})=>u.createElement("li",{className:si("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 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`
|
|
6
|
+
*/const Zs="RichTextRenderer-module__link___BWeZ2",Js={link:Zs},Qs=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))},bo=e=>e&&e.split(",").map(n=>n.trim()).filter(Boolean).map(n=>Qs(n)?`"${n.replace(/"/g,'\\"')}"`:n).join(", ");function ht(e){const{color:t,...n}=e;return n}function Xe(e,t){var i,r,s;const{fontSize:n,lineHeight:o}=e;return{fontFamily:bo(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:(i=e.textAppearance)==null?void 0:i.textTransform,textDecoration:(r=e.textAppearance)==null?void 0:r.textDecoration,fontVariant:(s=e.textAppearance)==null?void 0:s.fontVariant,textAlign:e.textAlign,color:e.color}}const Ln=({content:e})=>{const t=n=>n.map((o,i)=>o.type==="link"?l.jsx("a",{className:Js.link,href:o.value,target:o.target,children:t(o.children)},i):l.jsx("span",{style:el(o),children:o.text},i));return l.jsx(l.Fragment,{children:e.map((n,o)=>{const i=n.children;return l.jsx("div",{children:t(i)},o)})})};function el(e){return{...e.fontFamily&&{fontFamily:bo(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 tl="SvgImage-module__svg___q3xE-",nl="SvgImage-module__img___VsTm-",Ri={svg:tl,img:nl},ol=e=>{const t=e.trim();return t.startsWith("data:image/svg+xml")?!0:(t.split(/[?#]/)[0]??t).endsWith(".svg")},il=e=>`url("${e.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`,kt=({url:e,fill:t="#000000",hoverFill:n="#CCCCCC",className:o="",style:i})=>{const[r,s]=u.useState(()=>typeof window>"u"?!0:CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")'));return u.useEffect(()=>{if(typeof window<"u"&&window.CSS){const c=CSS.supports("mask-image",'url("")')||CSS.supports("-webkit-mask-image",'url("")');s(c)}},[]),!ol(e)||!r?l.jsx("img",{src:e,alt:"",className:$e(Ri.img,o),style:i}):l.jsx("span",{"data-supports-mask":r,className:$e(Ri.svg,o),style:{"--svg":il(e),"--fill":t,"--hover-fill":n,...i??{}}})},rl={"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 al({settings:e,content:t,styles:n,isEditor:o}){const[i,r]=u.useState(null),{widthSettings:s,fontSettings:c,letterSpacing:a,textAlign:d,wordSpacing:p,fontSizeLineHeight:T,textAppearance:y,color:C}=n.imageCaption,[m,h]=u.useState(void 0),[W,x]=u.useState(null),[b,f]=u.useState(0),[O,P]=u.useState(0),{direction:_,transition:$,controls:A,pagination:w,imageCaption:H,triggers:L}=e,V=u.useRef($.type),{x:D,y:J}=e.controls.offset,q=S=>{i&&i.go(S)};return u.useEffect(()=>{if(!W)return;const S=new ResizeObserver(R=>{if(!i)return;const[F]=R;h({width:Math.round(F.contentRect.width),height:Math.round(F.contentRect.height)})});return S.observe(W),()=>S.unobserve(W)},[W]),u.useEffect(()=>{!i||V.current===$.type||(P(S=>S+1),V.current=$.type)},[$.type]),l.jsx("div",{className:$e(ae.wrapper,{[ae.editor]:o}),ref:x,children:l.jsxs("div",{className:ae.sliderInner,style:{width:m?m.width:"100%",height:m?m.height:"100%",backgroundColor:$.backgroundColor&&$.type==="fade in"?$.backgroundColor:"transparent"},children:[e.imageCaption.isActive&&l.jsx("div",{className:$e(ae.captionBlock),children:l.jsx("div",{className:ae.captionTextWrapper,children:t.map((S,R)=>l.jsx("div",{className:$e(ae.captionText,rl[H.alignment],{[ae.withPointerEvents]:R===b&&o,[ae.active]:R===b}),style:{fontFamily:bo(c.fontFamily),fontWeight:c.fontWeight,fontStyle:c.fontStyle,width:s.sizing==="auto"?"max-content":E.scalingValue(s.width,o),letterSpacing:E.scalingValue(a,o),wordSpacing:E.scalingValue(p,o),textAlign:d,fontSize:E.scalingValue(T.fontSize,o),lineHeight:E.scalingValue(T.lineHeight,o),textTransform:y.textTransform??"none",textDecoration:y.textDecoration??"none",fontVariant:y.fontVariant??"normal",color:C,transitionDuration:$.duration?`${Math.round(parseInt($.duration)/2)}ms`:"500ms"},children:l.jsx("div",{"data-styles":"imageCaption",className:ae.captionTextInner,style:{"--link-hover-color":H.linkHoverColor,"--link-color":H.linkColor,position:"relative",top:E.scalingValue(H.offset.y,o),left:E.scalingValue(H.offset.x,o)},children:l.jsx(Ln,{content:S.imageCaption})})},R))})}),l.jsx(li,{onMove:S=>{f(S.index)},ref:r,options:{arrows:!1,speed:$.duration?parseInt($.duration):500,autoplay:L.autoPlay!==null,...L.autoPlay!==null&&{interval:parseInt(L.autoPlay)*1e3},direction:_==="horiz"||$.type==="fade in"?"ltr":"ttb",pagination:!1,drag:L.triggersList.drag,perPage:1,width:m?m.width:"100%",height:m?m.height:"100%",type:$.type==="fade in"?"fade":"loop",rewind:!0},children:t.map((S,R)=>l.jsx(ci,{children:l.jsx("div",{className:ae.sliderItem,children:l.jsx("div",{className:ae.imgWrapper,children:l.jsx("img",{className:$e(ae.sliderImage,{[ae.contain]:S.image.objectFit==="contain",[ae.cover]:S.image.objectFit==="cover"}),src:S.image.url,alt:S.image.name??""})})})},R))},O),A.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:$e(ae.arrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:l.jsxs("button",{onClick:()=>{q("-1")},className:ae.arrowInner,style:{transform:`translate(${E.scalingValue(D,o)}, ${E.scalingValue(J*(_==="horiz"?1:-1),o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&l.jsx(kt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:$e(ae.arrowImg,ae.mirror)}),!A.arrowsImgUrl&&l.jsx(Wi,{color:A.color,className:$e(ae.arrowIcon,ae.arrowImg,ae.mirror)})]})}),l.jsx("div",{className:$e(ae.arrow,ae.nextArrow,{[ae.arrowVertical]:_==="vert",[ae.hoverArrow]:A.show==="on hover"}),style:{color:A.color,"--arrow-hover-color":A.hover},children:l.jsxs("button",{className:ae.arrowInner,onClick:()=>q("+1"),style:{transform:`translate(${E.scalingValue(D*(_==="horiz"?-1:1),o)}, ${E.scalingValue(J,o)}) scale(${e.controls.scale/100}) rotate(${_==="horiz"?"0deg":"90deg"})`},children:[A.arrowsImgUrl&&l.jsx(kt,{url:A.arrowsImgUrl,fill:A.color,hoverFill:A.hover,className:ae.arrowImg}),!A.arrowsImgUrl&&l.jsx(Wi,{color:A.color,className:$e(ae.arrowIcon,ae.arrowImg)})]})})]}),L.triggersList.click&&l.jsx("div",{className:ae.clickOverlay,onClick:()=>{i&&i.go("+1")}}),w.isActive&&l.jsx("div",{className:$e(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((S,R)=>l.jsx("button",{onClick:()=>{i&&i.go(R)},className:$e(ae.paginationItem),children:l.jsx("div",{className:$e(ae.dot,{[ae.activeDot]:R===b}),style:{backgroundColor:R===b?w.colors[0]:w.colors[1],"--pagination-hover-color":w.hover}})},R))})})]})})}function Wi({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 sl={element:al,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"]}},ll="ImageRevealSlider-module__imageRevealSlider___UE5Ob",cl="ImageRevealSlider-module__image___Qjt-e",dl="ImageRevealSlider-module__link___N-iLG",ul="ImageRevealSlider-module__cursor___2U03d",Jt={imageRevealSlider:ll,image:cl,link:dl,cursor:ul};function Ii(e,t,n){for(const o of n){const i=new Image;i.src=o.url;const r=o.width?Number.parseFloat(o.width):i.naturalWidth,s=i.naturalHeight/i.naturalWidth*r,c=r/2,a=s/2;if(e>=o.x-c&&e<=o.x+c&&t>=o.y-a&&t<=o.y+a)return!0}return!1}function To(e){return new Promise(t=>{const n=new Image;n.src=e,n.onload=()=>{t({width:n.naturalWidth,height:n.naturalHeight})}})}async function pl(e,t,n,o){let i,r;if(t==="custom"){i=n;const s=await To(e);r=s.height/s.width*i}else if(t==="random"){i=Math.random()*(o.max-o.min)+o.min;const s=await To(e);r=s.height/s.width*i}else{const s=await To(e);i=s.width,r=s.height}return{width:i,height:r,finalWidth:`${i}px`}}function ml({settings:e,content:t,isEditor:n}){const[o,i]=u.useState(null),[r,s]=u.useState([]),[c,a]=u.useState(0),d=u.useRef(0),[p,T]=u.useState({x:0,y:0}),[y,C]=u.useState(1),[m,h]=u.useState("none"),W=u.useRef({x:0,y:0}),[x,b]=u.useState(!1),{sizeType:f,imageWidth:O,randomRangeImageWidth:P}=e.imageSize,{revealPosition:_,visible:$}=e.position,{cursorType:A,target:w,defaultCursorScale:H,defaultCursor:L,hoverCursorScale:V,hoverCursor:D}=e.cursor;u.useEffect(()=>{if(!o)return;const S=(N,I)=>{const B=o.getBoundingClientRect(),ie=N-B.left,Q=I-B.top;if(T({x:ie,y:Q}),A==="system"){h("none"),C(1);return}const oe=ie,G=Q,M=document.elementFromPoint(B.left+oe,B.top+G);if(M&&M.closest("a")){h("none"),C(1);return}const re=Ii(oe,G,r)||w==="area"?{img:D??"none",scale:V}:{img:L??"none",scale:H};h(re.img),C(re.scale)},R=N=>{N.stopPropagation(),W.current={x:N.clientX,y:N.clientY},S(N.clientX,N.clientY)},F=()=>{x&&S(W.current.x,W.current.y)};return o.addEventListener("mousemove",R),window.addEventListener("scroll",F,!0),()=>{o.removeEventListener("mousemove",R),window.removeEventListener("scroll",F,!0)}},[o,x,p,A,w,D,L,V,H,r]),u.useEffect(()=>{x||(h("none"),C(0))},[x]);const J=async(S,R,F,N={})=>{const{width:I,height:B,finalWidth:ie}=await pl(S.image.url,f,O,P);let Q=0,oe=0;_==="same"?(Q=R/2,oe=F/2):(Q=N.x??Math.random()*R,oe=N.y??Math.random()*F);const G=Math.min(Math.max(Q,I/2),R-I/2),M=Math.min(Math.max(oe,B/2),F-B/2);return{id:d.current++,url:S.image.url,link:S.link,name:S.image.name,x:G,y:M,width:ie}};u.useEffect(()=>{if(!o||t.length===0)return;const S=o.getBoundingClientRect(),R=S.width,F=S.height,N=[];(async()=>{const B=t[0],ie=await J(B,R,F);N.push(ie),s(N),a(1)})()},[f,O,P,_,o]),u.useEffect(()=>{$==="last One"&&s(S=>S.length>0?[S[S.length-1]]:[])},[$]);const q=async S=>{if(!o)return;const R=o.getBoundingClientRect(),F=S.clientX-R.left,N=S.clientY-R.top;if(w==="image"&&!Ii(F,N,r))return;let I=0,B=0;_==="on Click"?(I=F,B=N):_==="same"?(I=R.width/2,B=R.height/2):(I=Math.random()*R.width,B=Math.random()*R.height);const ie=t[c],Q=await J(ie,R.width,R.height,{x:I,y:B});s(oe=>$==="all"?[...oe,Q]:[Q]),a(oe=>oe>=t.length-1?0:oe+1)};return l.jsxs("div",{ref:i,onClick:q,onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),className:Jt.imageRevealSlider,style:{cursor:m==="none"?"default":"none"},children:[r.map(S=>l.jsx("div",{className:Jt.wrapper,style:{top:`${S.y}px`,left:`${S.x}px`,position:"absolute",transform:"translate(-50%, -50%)",width:S.width??"auto",height:"auto",cursor:m==="none"?"default":"none"},children:w==="area"&&S.link?l.jsx("a",{href:S.link,target:"_blank",className:Jt.link,children:l.jsx("img",{src:S.url,alt:S.name,className:Jt.image},S.id)}):l.jsx("img",{src:S.url,alt:S.name,className:Jt.image},S.id)},S.id)),x&&l.jsx("div",{className:Jt.cursor,style:{left:`${p.x}px`,top:`${p.y}px`,transform:`translate(-50%, -50%) scale(${y})`,backgroundImage:`url('${m}')`,backgroundSize:"cover",backgroundPosition:"center",position:"absolute",pointerEvents:"none"}})]})}const gl={element:ml,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:""}]}}}},hl="LightBox-module__hidden___9s-9x",fl="LightBox-module__heroImage___sTxNF",yl="LightBox-module__background___rm9ml",vl="LightBox-module__editor___4ACaY",bl="LightBox-module__contentStyle___Bgnsq",xl="LightBox-module__imageStyle___tLIlB",Cl="LightBox-module__imgWrapper___LuFUp",Sl="LightBox-module__contain___8-yaS",wl="LightBox-module__cover___hNvOG",$l="LightBox-module__caption___b6L2I",Tl="LightBox-module__captionTextInner___rCGNH",Ll="LightBox-module__lightboxSplide___XFuWC",El="LightBox-module__arrow___iz38X",Pl="LightBox-module__arrowVertical___Zfz81",_l="LightBox-module__nextArrow___zkAQN",Al="LightBox-module__arrowInner___p48sW",Rl="LightBox-module__arrowIcon___3VaFf",Wl="LightBox-module__arrowImg___pNV88",Il="LightBox-module__mirror___pjeXc",kl="LightBox-module__thumbsWrapper___GB-nU",Fl="LightBox-module__thumbsContainerVertical___wttk5",Ml="LightBox-module__thumbsContainer___osSma",Nl="LightBox-module__thumbsAlignStart___MO6tY",Hl="LightBox-module__thumbsAlignCenter___Q4sUx",Bl="LightBox-module__thumbsAlignEnd___p4y9R",Ol="LightBox-module__thumbItem___HvnF3",Vl="LightBox-module__closeButton___g2khP",Dl="LightBox-module__fadeIn___0m5GW",jl="LightBox-module__slideInLeft___gPYwC",zl="LightBox-module__slideInRight___S-pPp",Kl="LightBox-module__slideInTop___DFdAj",ql="LightBox-module__slideInBottom___m27kZ",Ul="LightBox-module__fadeOut___55qBR",Gl="LightBox-module__slideOutLeft___NvU7P",Yl="LightBox-module__slideOutRight___SK7eC",Xl="LightBox-module__slideOutTop___Vgg0z",Zl="LightBox-module__slideOutBottom___nJ0Ef",Jl="LightBox-module__scaleSlide___vZriG",X={hidden:hl,heroImage:fl,background:yl,editor:vl,contentStyle:bl,imageStyle:xl,imgWrapper:Cl,contain:Sl,cover:wl,caption:$l,captionTextInner:Tl,lightboxSplide:Ll,arrow:El,arrowVertical:Pl,nextArrow:_l,arrowInner:Al,arrowIcon:Rl,arrowImg:Wl,mirror:Il,thumbsWrapper:kl,thumbsContainerVertical:Fl,thumbsContainer:Ml,thumbsAlignStart:Nl,thumbsAlignCenter:Hl,thumbsAlignEnd:Bl,thumbItem:Ol,closeButton:Vl,fadeIn:Dl,slideInLeft:jl,slideInRight:zl,slideInTop:Kl,slideInBottom:ql,fadeOut:Ul,slideOutLeft:Gl,slideOutRight:Yl,slideOutTop:Xl,slideOutBottom:Zl,scaleSlide:Jl},Dn=(e,t,n)=>{const o={},[i,r]=e.split("-");return i==="top"?(o.top="0",o.bottom="auto"):i==="middle"?(o.top="50%",o.bottom="auto"):i==="bottom"&&(o.top="auto",o.bottom="0"),r==="left"?(o.left="0",o.right="auto"):r==="center"?(o.left="50%",o.right="auto"):r==="right"&&(o.left="auto",o.right="0"),i==="middle"&&r==="center"?o.transform=`translate(calc(-50% + ${E.scalingValue(t.x,n)}), calc(-50% + ${E.scalingValue(t.y,n)}))`:i==="middle"?o.transform=`translate(${E.scalingValue(t.x,n)}, calc(-50% + ${E.scalingValue(t.y,n)}))`:r==="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 Nr(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 ki(e){const t=e.getBoundingClientRect(),n=Nr(e),o=Math.max(0,t.width-n.left-n.right),i=Math.max(0,t.height-n.top-n.bottom),r=e.naturalWidth,s=e.naturalHeight,c=o/i,a=r/s;let d,p;a>c?(d=o,p=o/a):(p=i,d=i*a);const T=t.left+n.left,y=t.top+n.top,C=(o-d)/2+T,m=(i-p)/2+y;return{x:C,y:m,width:d,height:p}}function Fi(e){const t=e.getBoundingClientRect(),n=Nr(e);return{left:t.left+n.left,right:t.right-n.right,top:t.top+n.top,bottom:t.bottom-n.bottom}}function Mi(e){const t=e.match(/rgba?\(([^)]+)\)/);if(t){const o=t[1].split(",").map(i=>parseFloat(i.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 Ql(e,t){const n=(()=>{if(e==="fade in")return X.fadeIn;if(e==="slide in"||e==="mix")switch(t){case"left":return X.slideInLeft;case"right":return X.slideInRight;case"top":return X.slideInTop;case"bottom":return X.slideInBottom;default:return X.slideInRight}return X.fadeIn})(),o=(()=>{if(e==="fade in"||e==="mix")return X.fadeIn;if(e==="slide in")switch(t){case"left":return X.slideInLeft;case"right":return X.slideInRight;case"top":return X.slideInTop;case"bottom":return X.slideInBottom;default:return X.slideInRight}return X.fadeIn})(),i=(()=>{if(e==="fade in"||e==="mix")return X.fadeOut;if(e==="slide in")switch(t){case"left":return X.slideOutLeft;case"right":return X.slideOutRight;case"top":return X.slideOutTop;case"bottom":return X.slideOutBottom;default:return X.slideOutRight}return X.fadeOut})(),r=(()=>{if(e==="fade in")return X.fadeOut;if(e==="slide in"||e==="mix")switch(t){case"left":return X.slideOutLeft;case"right":return X.slideOutRight;case"top":return X.slideOutTop;case"bottom":return X.slideOutBottom;default:return X.slideOutRight}return X.fadeOut})();return{appearClass:n,backdropAppearClass:o,backdropDisappearClass:i,disappearClass:r}}const ec=({settings:e,content:t,styles:n,portalId:o,activeEvent:i,isEditor:r,isPreviewMode:s})=>{const[c,a]=u.useState(!1),{url:d}=e.thumbnailBlock.cover;return u.useEffect(()=>{i==="close"&&a(!1),i==="open"&&a(!0)},[i]),l.jsxs(l.Fragment,{children:[l.jsx("img",{src:d,alt:"Cover",className:X.heroImage,onClick:()=>a(!0)}),l.jsx(tc,{isOpen:c,onClose:()=>a(!1),content:t,settings:e,lightboxStyles:n,portalId:o,isEditor:r})]})},tc=({isOpen:e,onClose:t,content:n,lightboxStyles:o,settings:i,portalId:r,isEditor:s,metadata:c})=>{var v;const[a,d]=u.useState(0),[p,T]=u.useState(0),[y,C]=u.useState(!1),[m,h]=u.useState(!1),[W,x]=u.useState({}),b=u.useRef(null),f=u.useRef(null),O=u.useRef(null),P=u.useRef(!1),_=u.useRef(null),$=u.useRef(null),A=u.useRef(null),w=u.useRef(null),H=u.useRef(!1),L=u.useRef(null),[V,D]=u.useState(!1),{appear:J,triggers:q,slider:S,thumbnail:R,controls:F,area:N,caption:I,layout:B}=i.lightboxBlock,{appearClass:ie,backdropAppearClass:Q,backdropDisappearClass:oe,disappearClass:G}=Ql(J.type,J.direction),M=(c==null?void 0:c.itemId)??null;u.useEffect(()=>{const g=()=>{setTimeout(()=>{var K,U;(U=(K=b.current)==null?void 0:K.splide)==null||U.refresh()},16)},k=()=>{T(K=>K+1)};return window.addEventListener("ArticleEditor.Layout:change",g),window.addEventListener("ArticleEditor.ComponentContent:change",k),()=>{window.removeEventListener("ArticleEditor.Layout:change",g),window.removeEventListener("ArticleEditor.ComponentContent:change",k)}},[]),u.useEffect(()=>{if(!e||!R.isActive){D(!1);return}const g=L.current;if(!g)return;const k=()=>{S.direction==="horiz"?D(g.scrollWidth>g.clientWidth):D(g.scrollHeight>g.clientHeight)};k();const K=new ResizeObserver(k);return K.observe(g),()=>K.disconnect()},[e,R.isActive,n.length,W,S.direction]);const re=u.useCallback(()=>{const g=window.matchMedia("(max-width: 768px)").matches,k=Mi(N.color);g&&!s&&k>.9&&(document.body.style.backgroundColor=""),C(!0),P.current=!0;const K=U=>{U.target===_.current&&U.animationName&&(_.current&&$.current&&_.current.removeEventListener("animationend",$.current),$.current=null,P.current&&(P.current=!1,t()),C(!1))};_.current&&($.current=K,_.current.addEventListener("animationend",K))},[t,N.color,s]),Le=(g,k,K)=>{var U,te;if(g){if(q.type==="click"&&q.switch==="image")q.repeat==="close"&&a===n.length-1?re():(U=b.current)==null||U.go("+1");else if(q.type==="click"&&q.switch==="50/50"){const ee=g.getBoundingClientRect(),Z=k-ee.left,de=K-ee.top,Se=ee.width,ye=ee.height;let ue;S.direction==="horiz"?ue=Z<Se/2?"-1":"+1":ue=de<ye/2?"-1":"+1",(te=b.current)==null||te.go(ue)}}},ce=g=>{if(H.current){H.current=!1;return}const k=n[a],K=(k==null?void 0:k.image.objectFit)==="cover";let U,te;if("changedTouches"in g&&g.changedTouches.length>0)U=g.changedTouches[0].clientX,te=g.changedTouches[0].clientY;else if("clientX"in g)U=g.clientX,te=g.clientY;else return;let ee;if(K&&O.current){const Z=Fi(O.current);ee=U>=Z.left&&U<=Z.right&&te>=Z.top&&te<=Z.bottom}else{const Z=O.current?ki(O.current):null;if(!Z){g.target===g.currentTarget&&re();return}ee=U>=Z.x&&U<=Z.x+Z.width&&te>=Z.y&&te<=Z.y+Z.height}ee?Le(O.current,U,te):re()},fe=g=>{const k=g.target;(k.classList.contains(X.thumbsWrapper)||k.classList.contains(X.thumbsContainer))&&ce(g)};u.useEffect(()=>{if(!e)return;const g=k=>{var K,U;if(k.key==="Escape"){re();return}if(k.key==="ArrowRight"){d(te=>(te+1)%Math.max(n.length,1)),(K=b.current)==null||K.go("+1");return}k.key==="ArrowLeft"&&(d(te=>(te-1+Math.max(n.length,1))%Math.max(n.length,1)),(U=b.current)==null||U.go("-1"))};return window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}},[e,re,n.length]),u.useEffect(()=>{if(e){if(d(0),T(k=>k+1),P.current=!1,C(!1),h(!1),x({}),!M)return;const g=new CustomEvent("page-overlay",{detail:{itemId:M}});window.dispatchEvent(g)}return()=>{_.current&&$.current&&(_.current.removeEventListener("animationend",$.current),$.current=null),h(!1)}},[e,M]),u.useEffect(()=>{f.current!==null&&f.current!==S.type&&T(g=>g+1),f.current=S.type},[S.type]),u.useEffect(()=>{if(!e)return;const g=document.body.style.overflow,k=window.matchMedia("(max-width: 768px)").matches,K=Mi(N.color);document.body.style.overflow="hidden",h(!1);const U=ee=>{ee.target===_.current&&!P.current&&ee.animationName&&(k&&!s&&K>.9&&(document.body.style.backgroundColor=N.color),h(!0),_.current&&A.current&&_.current.removeEventListener("animationend",A.current),A.current=null)};_.current&&(A.current=U,_.current.addEventListener("animationend",U));const te=ee=>{const Z=ee.target;Z&&(Z.closest(`.${X.thumbsWrapper}`)||Z.closest(`.${X.thumbsContainer}`))||S.type!=="slide"&&ee.preventDefault()};return document.addEventListener("touchmove",te,{passive:!1}),()=>{document.body.style.overflow=g,document.removeEventListener("touchmove",te),_.current&&A.current&&(_.current.removeEventListener("animationend",A.current),A.current=null),h(!1)}},[e,s,N.color,S.type]),u.useEffect(()=>{if(!e)return;const g=k=>{var U,te;if(P.current){k.stopPropagation();return}if(H.current){H.current=!1;return}const K=k.target;if(!(K&&(K.closest(`.${X.thumbsContainer}`)||K.closest(`.${X.thumbItem}`)||K.closest(`.${X.arrow}`)||K.closest(`.${X.closeButton}`)||K.closest(`.${X.caption}`)))){if(S.type==="slide"&&q.type==="drag"&&((te=(U=b.current)==null?void 0:U.splide)!=null&&te.root)){const ee=b.current.splide.root;if(K&&(ee.contains(K)||ee===K))return}if(k.touches.length===0&&k.changedTouches.length>0){const ee=n[a],Z=(ee==null?void 0:ee.image.objectFit)==="cover",de=k.changedTouches[0];let Se;if(Z&&O.current){const ye=Fi(O.current);Se=de.clientX>=ye.left&&de.clientX<=ye.right&&de.clientY>=ye.top&&de.clientY<=ye.bottom}else{const ye=O.current?ki(O.current):null;if(!ye)return;Se=de.clientX>=ye.x&&de.clientX<=ye.x+ye.width&&de.clientY>=ye.y&&de.clientY<=ye.y+ye.height}if(!Se){k.stopPropagation(),P.current=!0;const ye=ue=>{ue.stopPropagation(),ue.preventDefault(),document.removeEventListener("click",ye,!0)};document.addEventListener("click",ye,!0),re()}}}};return document.addEventListener("touchend",g,{passive:!0}),()=>{document.removeEventListener("touchend",g)}},[e,re,a,n]);const We=(S.type==="scale"||S.type==="fade")&&S.direction==="vert"&&q.type==="drag";u.useEffect(()=>{var ue,j;if(!e||!We||!((j=(ue=b.current)==null?void 0:ue.splide)!=null&&j.root))return;const g=b.current.splide.root,k=30,K=(Y,z)=>{if(w.current){const le=Math.abs(Y-w.current.x),xe=Math.abs(z-w.current.y);(le>0||xe>0)&&(H.current=!0)}},U=Y=>{w.current&&(Y.preventDefault(),K(Y.clientX,Y.clientY))},te=Y=>{w.current&&Y.touches.length>0&&(Y.preventDefault(),K(Y.touches[0].clientX,Y.touches[0].clientY))},ee=(Y,z)=>{if(!w.current||!b.current){w.current=null;return}const le=Math.abs(Y-w.current.x),xe=Math.abs(z-w.current.y);xe>k&&xe>le&&b.current.go(z<w.current.y?"+1":"-1"),w.current=null},Z=Y=>{w.current&&ee(Y.clientX,Y.clientY),document.removeEventListener("pointerup",Z),document.removeEventListener("pointercancel",Z),document.removeEventListener("pointermove",U)},de=Y=>{if(w.current){if(Y.changedTouches.length>0){const z=Y.changedTouches[0];ee(z.clientX,z.clientY)}document.removeEventListener("touchend",de),document.removeEventListener("touchcancel",de),document.removeEventListener("touchmove",te)}},Se=Y=>{w.current={x:Y.clientX,y:Y.clientY},H.current=!1,document.addEventListener("pointermove",U,{passive:!1}),document.addEventListener("pointerup",Z),document.addEventListener("pointercancel",Z)},ye=Y=>{Y.touches.length>0&&(w.current={x:Y.touches[0].clientX,y:Y.touches[0].clientY},H.current=!1,document.addEventListener("touchmove",te,{passive:!1}),document.addEventListener("touchend",de),document.addEventListener("touchcancel",de))};return g.addEventListener("pointerdown",Se),g.addEventListener("touchstart",ye),()=>{g.removeEventListener("pointerdown",Se),g.removeEventListener("touchstart",ye),document.removeEventListener("pointermove",U),document.removeEventListener("pointerup",Z),document.removeEventListener("pointercancel",Z),document.removeEventListener("touchmove",te),document.removeEventListener("touchend",de),document.removeEventListener("touchcancel",de),w.current=null,H.current=!1}},[e,We,p]);const ne={backgroundColor:N.color,backdropFilter:`blur(${N.blur}px)`,animationDuration:`${parseInt(J.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"};return typeof document>"u"||!document.getElementById(r)?null:er.createPortal(l.jsxs(l.Fragment,{children:[l.jsx("div",{ref:s?null:_,className:$e(X.background,y?oe:Q,{[X.editor]:s},{[X.hidden]:!e}),style:{...ne,...m&&!s&&!y?{position:"absolute"}:{}}}),l.jsxs("div",{ref:s?_:null,className:$e(X.contentStyle,y?G:ie,{[X.editor]:s},{[X.hidden]:!e}),style:{animationDuration:`${parseInt(J.duration)}ms`,animationTimingFunction:"ease",animationFillMode:"both"},children:[l.jsx(li,{onMove:g=>d(g.index),ref:b,className:X.lightboxSplide,options:{arrows:!1,speed:S.duration?parseInt(S.duration):500,direction:S.direction==="horiz"||S.type==="fade"||S.type==="scale"?"ltr":"ttb",pagination:!1,drag:q.type==="drag"&&!We,perPage:1,width:"100%",height:"100%",type:S.type==="fade"||S.type==="scale"?"fade":"loop",padding:0,rewind:q.repeat!=="close",start:0},style:{"--splide-speed":S.duration},children:n.map((g,k)=>{const K=Dn(B.position,B.offset,s),U=`${E.scalingValue(B.padding.top,s)} ${E.scalingValue(B.padding.right,s)} ${E.scalingValue(B.padding.bottom,s)} ${E.scalingValue(B.padding.left,s)}`,te=S.type==="scale"?(()=>{const{transform:ee,...Z}=K;return{...Z,position:"absolute",padding:U,boxSizing:"border-box","--position-transform":ee||"none"}})():{...K,position:"absolute",padding:U,boxSizing:"border-box"};return l.jsx(ci,{children:l.jsx("div",{className:X.imgWrapper,onClick:ce,children:l.jsx("img",{ref:k===a?O:null,className:$e(X.imageStyle,{[X.contain]:g.image.objectFit==="contain",[X.cover]:g.image.objectFit==="cover",[X.scaleSlide]:S.type==="scale"}),src:g.image.url,alt:g.image.name??"",style:{...te,pointerEvents:g.image.objectFit==="contain"?"none":"auto"}})})},k)})},p),F.isActive&&l.jsxs(l.Fragment,{children:[l.jsx("div",{className:$e(X.arrow,{[X.arrowVertical]:S.direction==="vert"}),style:{color:F.color,"--arrow-hover-color":F.hover},children:l.jsxs("button",{className:X.arrowInner,style:{transform:`translate(${E.scalingValue(F.offset.x,s)}, ${E.scalingValue(F.offset.y*(S.direction==="horiz"?1:-1),s)}) scale(${F.scale}) rotate(${S.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=b.current)==null?void 0:g.go("-1")},"aria-label":"Previous",children:[F.arrowsImgUrl&&l.jsx(kt,{url:F.arrowsImgUrl,fill:F.color,hoverFill:F.hover,className:$e(X.arrowImg,X.mirror)}),!F.arrowsImgUrl&&l.jsx(Ni,{color:F.color,className:$e(X.arrowIcon,X.arrowImg,X.mirror)})]})}),l.jsx("div",{className:$e(X.arrow,X.nextArrow,{[X.arrowVertical]:S.direction==="vert"}),style:{color:F.color,"--arrow-hover-color":F.hover},children:l.jsxs("button",{className:X.arrowInner,style:{transform:`translate(${E.scalingValue(F.offset.x*(S.direction==="horiz"?-1:1),s)}, ${E.scalingValue(F.offset.y,s)}) scale(${F.scale}) rotate(${S.direction==="horiz"?"0deg":"90deg"})`},onClick:()=>{var g;return(g=b.current)==null?void 0:g.go("+1")},"aria-label":"Next",children:[F.arrowsImgUrl&&l.jsx(kt,{url:F.arrowsImgUrl,fill:F.color,hoverFill:F.hover,className:X.arrowImg}),!F.arrowsImgUrl&&l.jsx(Ni,{color:F.color,className:$e(X.arrowIcon,X.arrowImg)})]})})]}),N.closeIconUrl&&(()=>{const g=Dn(N.closeIconAlign,N.closeIconOffset,s),k=`scale(${N.closeIconScale})`,K=g.transform?`${g.transform} ${k}`:k;return l.jsx("button",{className:X.closeButton,style:{...g,transform:K},onClick:re,"aria-label":"Close lightbox",children:l.jsx(kt,{url:N.closeIconUrl,fill:N.closeIconColor??"#000000",hoverFill:N.closeIconHover??"#cccccc"})})})(),I&&I.isActive&&o.imageCaption&&((v=n[a])==null?void 0:v.imageCaption)&&(()=>{const{widthSettings:g,fontSettings:k,letterSpacing:K,textAlign:U,wordSpacing:te,fontSizeLineHeight:ee,textAppearance:Z,color:de}=o.imageCaption;return l.jsx("div",{className:X.caption,style:{...Dn(I.alignment,I.offset,s),fontFamily:bo(k.fontFamily),fontWeight:k.fontWeight,fontStyle:k.fontStyle,width:g.sizing==="auto"?"max-content":E.scalingValue(g.width,s),letterSpacing:E.scalingValue(K,s),wordSpacing:E.scalingValue(te,s),textAlign:U,fontSize:E.scalingValue(ee.fontSize,s),lineHeight:E.scalingValue(ee.lineHeight,s),textTransform:Z.textTransform??"none",textDecoration:Z.textDecoration??"none",fontVariant:Z.fontVariant??"normal",color:de},onClick:Se=>Se.stopPropagation(),children:l.jsx("div",{"data-styles":"imageCaption",className:X.captionTextInner,style:{"--link-color":I.linkColor,"--link-hover-color":I.linkHoverColor},children:l.jsx(Ln,{content:n[a].imageCaption})})})})(),R.isActive&&(()=>{const[g,k]=R.position.split("-"),K=S.direction==="horiz"?`${g}-left`:R.position,U=Dn(K,R.offset,s),te=()=>{if(S.direction==="horiz"){if(k==="left")return"flex-start";if(k==="center")return"center";if(k==="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 l.jsx("div",{ref:L,className:X.thumbsWrapper,onClick:ee=>fe(ee),style:{position:s?"absolute":"fixed",...U,...S.direction==="horiz"?{maxWidth:"100vw",width:"100%",overflowX:"auto",overflowY:"hidden"}:{maxHeight:"100vh",overflowY:"auto",overflowX:"hidden"}},children:l.jsx("div",{className:$e(X.thumbsContainer,{[X.thumbsContainerVertical]:S.direction==="vert",[X.thumbsAlignStart]:R.align==="start",[X.thumbsAlignCenter]:R.align==="center",[X.thumbsAlignEnd]:R.align==="end"}),style:{gap:E.scalingValue(R.grid.gap,s),justifyContent:V?"flex-start":te()},children:n.map((ee,Z)=>{const de=Z===a,Se=W[Z],ue=R.grid.size*(de?R.activeState.scale:1),j=()=>{if(R.fit!=="fit")return{};if(!Se)return S.direction==="horiz"?{height:E.scalingValue(ue,s)}:{width:E.scalingValue(ue,s)};const Y=Se.width/Se.height;if(S.direction==="horiz"){const z=ue,le=z*Y;return{width:E.scalingValue(le,s),height:E.scalingValue(z,s)}}else{const z=ue,le=z/Y;return{width:E.scalingValue(z,s),height:E.scalingValue(le,s)}}};return l.jsx("button",{className:X.thumbItem,style:{...S.direction==="horiz"&&R.fit!=="fit"?{height:E.scalingValue(ue,s)}:{},...S.direction==="vert"&&R.fit!=="fit"?{width:E.scalingValue(ue,s)}:{},...R.fit==="cover"?{width:E.scalingValue(ue,s),height:E.scalingValue(ue,s)}:{},...j(),transition:de?"all 0.25s ease-out":"none",opacity:de?R.activeState.opacity/100:R.opacity/100,"--thumb-hover":R.activeState.opacity/100},onClick:Y=>{var z;Y.stopPropagation(),d(Z),(z=b.current)==null||z.go(Z)},onMouseEnter:()=>{var Y;R.triggers==="hov"&&((Y=b.current)==null||Y.go(Z))},children:l.jsx("img",{src:ee.image.url,alt:ee.image.name??"",onLoad:Y=>{const z=Y.currentTarget;z.naturalWidth&&z.naturalHeight&&x(le=>({...le,[Z]:{width:z.naturalWidth,height:z.naturalHeight}}))},style:{objectFit:R.fit==="cover"?"cover":"contain",...R.fit==="fit"?{maxWidth:"100%",maxHeight:"100%",objectFit:"contain"}:{},...R.fit==="cover"?{width:"100%",height:"100%"}:{}}})},`${ee.image.name}-${Z}`)})})})})()]})]}),document.getElementById(r))};function Ni({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 nc={element:ec,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 jn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function oc(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: ${jn(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: ${jn(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: ${jn(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: ${jn(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 ic({settings:e,isEditor:t,isEditMode:n,isPreviewMode:o,metadata:i,activeEvent:r}){const s=!!n,c=o&&t||!t,{prefix:a}=E.useScopedStyles(),{type:d="A",fieldsToShow:p=2,fields:T=[],buttonLabel:y,gap:C,fieldsGap:m,buttonCorners:h,buttonStroke:W,buttonPadding:x,isButtonFullWidth:b,inputCorners:f,inputStroke:O,inputPadding:P,inputColor:_,inputTextColor:$,inputBorderColor:A,placeholderColor:w,buttonColor:H,buttonTextColor:L,buttonBorderColor:V,labelTextColor:D,successColor:J,errorColor:q,fontFamily:S,inputFontSettings:R,inputFontSize:F,inputLineHeight:N,inputLetterSpacing:I,inputWordSpacing:B,inputTextAppearance:ie,buttonFontSettings:Q,buttonFontSize:oe,buttonLineHeight:G,buttonLetterSpacing:M,buttonWordSpacing:re,buttonTextAppearance:Le,labelFontSettings:ce,labelFontSize:fe,labelLineHeight:We,labelLetterSpacing:ne,labelWordSpacing:v,labelTextAppearance:g,statusFontSettings:k,statusFontSize:K,statusLineHeight:U,statusLetterSpacing:te,statusWordSpacing:ee,statusTextAppearance:Z,successMessage:de,errorMessage:Se,stateOverrides:ye}=e,ue=d==="B",j=T.slice(0,Math.min(p,T.length)),Y={fontSettings:{fontFamily:S,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:F??.01,lineHeight:N,letterSpacing:I??0,wordSpacing:B??0,textAppearance:ie,color:$},z=ht(Xe(Y,t)),le=E.scalingValue(O??0,t),xe=E.scalingValue((N??F??.01)+((P==null?void 0:P.top)??0)+((P==null?void 0:P.bottom)??0)+(d==="C"?O??0:(O??0)*2),t),Ce={...z,borderStyle:"solid",borderRadius:d==="C"?0:E.scalingValue(f??0,t),...d==="C"?{borderTopWidth:0,borderRightWidth:0,borderBottomWidth:le,borderLeftWidth:0}:{borderWidth:le},paddingTop:E.scalingValue((P==null?void 0:P.top)??0,t),paddingRight:E.scalingValue((P==null?void 0:P.right)??0,t),paddingBottom:E.scalingValue((P==null?void 0:P.bottom)??0,t),paddingLeft:E.scalingValue((P==null?void 0:P.left)??0,t),height:xe,minHeight:xe},Ie={fontSettings:{fontFamily:S,fontWeight:(Q==null?void 0:Q.fontWeight)??400,fontStyle:(Q==null?void 0:Q.fontStyle)??"normal"},fontSize:oe??.01,lineHeight:G,letterSpacing:M??0,wordSpacing:re??0,textAppearance:Le,color:L},Ne=ht(Xe(Ie,t)),Ze=E.scalingValue(W??0,t),ve={fontSettings:{fontFamily:S,fontWeight:(ce==null?void 0:ce.fontWeight)??400,fontStyle:(ce==null?void 0:ce.fontStyle)??"normal"},fontSize:fe??.01,lineHeight:We,letterSpacing:ne??0,wordSpacing:v??0,textAppearance:g,color:D},ke=Xe(ve,t),He={fontSettings:{fontFamily:S,fontWeight:(k==null?void 0:k.fontWeight)??400,fontStyle:(k==null?void 0:k.fontStyle)??"normal"},fontSize:K??.01,lineHeight:U,letterSpacing:te??0,wordSpacing:ee??0,textAppearance:Z,color:J},Fe=ht(Xe(He,t)),Be=E.buildColorVars(a,{inputColor:_,inputTextColor:$,inputBorderColor:A,placeholderColor:w!=null&&w.trim()?w:"#cccccc",buttonColor:H,buttonTextColor:L,buttonBorderColor:V,labelTextColor:D,successColor:J,errorColor:q},rc,ac,ye),[Oe,Yt]=u.useState(()=>Object.fromEntries(j.map(me=>[me.name,""]))),[bt,nt]=u.useState("idle"),[At,be]=u.useState(null),lt=r==="success"?"success":r==="error"?"error":bt,ct=r==="error"?Se:At,dt=r==="filled",xt=u.useMemo(()=>{if(!dt)return Oe;let me=null;for(const qe of j)(Oe[qe.name]??"").trim().length>0||(me=me??{...Oe},me[qe.name]="Filled");return me??Oe},[Oe,dt,j]),Xt=lt==="error"?E.getFormFieldValidationError(j,xt):null,Je=`${r&&r!=="default"?`${a}-state-${r}`:""}`.trim(),Qe=i==null?void 0:i.submitUrl,ze=(me,qe)=>{Yt(Ue=>({...Ue,[me]:qe}))},Ke=async me=>{if(me.preventDefault(),!c)return;const qe=Object.fromEntries(j.map(et=>{var Ct;return[et.name,((Ct=Oe[et.name])==null?void 0:Ct.trim())??""]}).filter(([,et])=>et));if(!Qe){nt("error"),be("No integrations were found for this form.");return}if(Object.keys(qe).length===0)return;const Ue=E.getFormFieldValidationError(j,Oe);if(Ue){nt("error"),be(Ue);return}nt("submitting"),be(null);try{const et=await fetch(Qe,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(qe)});if(!et.ok){const Ct=await et.text();throw new Error(Ct||`Request failed: ${et.status}`)}nt("success"),Yt(Object.fromEntries(j.map(Ct=>[Ct.name,""])))}catch(et){nt("error"),be(et instanceof Error?et.message:"Something went wrong")}};return l.jsxs("div",{className:`${a}-wrapper ${a}-type-${d} ${Je}`.trim(),style:Be,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:oc(a)}}),l.jsxs("form",{onSubmit:Ke,className:`${a}-form`,children:[l.jsx("div",{className:`${a}-fields`,children:j.map((me,qe)=>l.jsxs(u.Fragment,{children:[qe>0&&l.jsx("div",{"data-controls":s?"fieldsGap":void 0,className:s?`${a}-control`:void 0,style:{height:E.scalingValue(m??0,t)}}),l.jsxs("div",{className:`${a}-field-group${ue?` ${a}-labeled`:""}`,children:[ue&&l.jsx("span",{className:`${a}-field-label`,style:ke?{...ke,lineHeight:ke.fontSize}:void 0,children:me.label||me.name}),me.type==="textarea"?l.jsx("textarea",{name:me.name,autoComplete:"off",value:xt[me.name]??"",onChange:Ue=>ze(me.name,Ue.target.value),placeholder:me.placeholder,className:`${a}-input`,style:Ce,rows:1,"data-filled":dt||(xt[me.name]??"").trim().length>0,"data-field-type":"textarea"}):l.jsx("input",{type:me.type==="phone"?"tel":me.type==="email"?"email":"text",name:me.name,autoComplete:"off",value:xt[me.name]??"",onChange:Ue=>ze(me.name,Ue.target.value),placeholder:me.placeholder,required:me.isRequired??me.type==="email",className:`${a}-input`,style:Ce,"data-filled":dt||(xt[me.name]??"").trim().length>0})]})]},qe))}),l.jsx("div",{"data-controls":s?"gap":void 0,className:s?`${a}-control`:void 0,style:{height:E.scalingValue(C??0,t)}}),l.jsx("div",{className:`${a}-overlay-anchor`,children:l.jsx("button",{type:c?"submit":"button",className:`${a}-button`,style:{borderStyle:"solid",borderRadius:E.scalingValue(h??0,t),borderWidth:Ze,paddingTop:E.scalingValue((x==null?void 0:x.top)??0,t),paddingRight:E.scalingValue((x==null?void 0:x.right)??0,t),paddingBottom:E.scalingValue((x==null?void 0:x.bottom)??0,t),paddingLeft:E.scalingValue((x==null?void 0:x.left)??0,t),pointerEvents:c?"auto":void 0,...Ne,...b?{width:"100%",textAlign:"center",whiteSpace:"normal"}:{}},children:l.jsx("span",{className:`${a}-overlay-anchor`,style:b?{display:"inline-block",maxWidth:"100%",whiteSpace:"normal",textAlign:"center"}:void 0,children:bt==="submitting"?"...":y})})})]}),lt==="success"&&l.jsx("p",{className:`${a}-success`,style:{...Fe},children:de}),lt==="error"&&l.jsx("p",{className:`${a}-error`,style:{...Fe},role:"alert",children:Xt??ct??Se})]})}const rc={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"},ac=["hover","focus","filled","success","error"],sc=`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';
|
|
@@ -325,12 +325,14 @@ type FormProps = {
|
|
|
325
325
|
content?: unknown;
|
|
326
326
|
isEditor?: boolean;
|
|
327
327
|
isEditMode?: boolean;
|
|
328
|
+
isPreviewMode?: boolean;
|
|
328
329
|
activeEvent: string | undefined;
|
|
329
330
|
onUpdateSettings?: (settings: FormSettings) => void;
|
|
330
331
|
} & CommonComponentProps;
|
|
331
332
|
|
|
332
|
-
export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }: FormProps) {
|
|
333
|
+
export function Form({ settings, isEditor, isEditMode, isPreviewMode, metadata, activeEvent }: FormProps) {
|
|
333
334
|
const showControls = Boolean(isEditMode);
|
|
335
|
+
const canSubmit = (isPreviewMode && isEditor) || !isEditor;
|
|
334
336
|
const { prefix: P } = useScopedStyles();
|
|
335
337
|
const {
|
|
336
338
|
type = 'A',
|
|
@@ -527,6 +529,8 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
|
|
|
527
529
|
|
|
528
530
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
529
531
|
e.preventDefault();
|
|
532
|
+
if (!canSubmit) return;
|
|
533
|
+
|
|
530
534
|
const payload = Object.fromEntries(
|
|
531
535
|
visibleFields.map((f) => [f.name, fieldValues[f.name]?.trim() ?? '']).filter(([, v]) => v)
|
|
532
536
|
);
|
|
@@ -627,7 +631,7 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
|
|
|
627
631
|
/>
|
|
628
632
|
<div className={\`\${P}-overlay-anchor\`}>
|
|
629
633
|
<button
|
|
630
|
-
type=
|
|
634
|
+
type={canSubmit ? 'submit' : 'button'}
|
|
631
635
|
className={\`\${P}-button\`}
|
|
632
636
|
style={{
|
|
633
637
|
borderStyle: 'solid',
|
|
@@ -637,6 +641,7 @@ export function Form({ settings, isEditor, isEditMode, metadata, activeEvent }:
|
|
|
637
641
|
paddingRight: scalingValue(buttonPadding?.right ?? 0, isEditor),
|
|
638
642
|
paddingBottom: scalingValue(buttonPadding?.bottom ?? 0, isEditor),
|
|
639
643
|
paddingLeft: scalingValue(buttonPadding?.left ?? 0, isEditor),
|
|
644
|
+
pointerEvents: canSubmit ? 'auto' : undefined,
|
|
640
645
|
...buttonTypographyCss,
|
|
641
646
|
...(isButtonFullWidth
|
|
642
647
|
? {
|
|
@@ -784,7 +789,7 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
|
|
|
784
789
|
};
|
|
785
790
|
|
|
786
791
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
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`
|
|
792
|
+
`,lc=[{name:"name",type:"text",placeholder:"Enter your name",label:"Name",isRequired:!1,error:"Please, enter your name."},{name:"email",type:"email",placeholder:"Enter your email",label:"Email",isRequired:!0,error:"Please, enter a valid e-mail."},{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"}],zn={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},cc=["inputColor","inputTextColor","inputBorderColor","placeholderColor","buttonColor","buttonTextColor","buttonBorderColor","labelTextColor","successColor","errorColor"],dc={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:{...zn.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:{...zn.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:{...zn.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:{...zn.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:lc,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:[...cc],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"]},uc={element:ic,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:dc,sourceCode:sc};function Kn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function pc(e){return`
|
|
788
793
|
.${e}-wrapper {
|
|
789
794
|
display: flex;
|
|
790
795
|
flex-direction: column;
|
|
@@ -966,16 +971,16 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
|
966
971
|
align-items: center;
|
|
967
972
|
}
|
|
968
973
|
.${e}-success {
|
|
969
|
-
margin-top: ${
|
|
970
|
-
font-size: ${
|
|
974
|
+
margin-top: ${Kn(8)};
|
|
975
|
+
font-size: ${Kn(14)};
|
|
971
976
|
color: var(--${e}-success-success-color, var(--${e}-success-color));
|
|
972
977
|
}
|
|
973
978
|
.${e}-error {
|
|
974
|
-
margin-top: ${
|
|
975
|
-
font-size: ${
|
|
979
|
+
margin-top: ${Kn(8)};
|
|
980
|
+
font-size: ${Kn(14)};
|
|
976
981
|
color: var(--${e}-error-error-color, var(--${e}-error-color));
|
|
977
982
|
}
|
|
978
|
-
`}const
|
|
983
|
+
`}const mc=({settings:e,isEditor:t,isPreviewMode:n,metadata:o,activeEvent:i})=>{const{prefix:r}=E.useScopedStyles(),s=n&&t||!t,{fields:c=[{name:"email",type:"email",placeholder:"Your email"}],buttonIcon:a,buttonLabel:d,fieldsToShow:p=1,fontFamily:T,inputFontSettings:y,inputFontSize:C,inputLineHeight:m,inputLetterSpacing:h,inputWordSpacing:W,inputTextAppearance:x,buttonFontSettings:b,buttonFontSize:f,buttonLineHeight:O,buttonLetterSpacing:P,buttonWordSpacing:_,buttonTextAppearance:$,statusFontSettings:A,statusFontSize:w,statusLineHeight:H,statusLetterSpacing:L,statusWordSpacing:V,statusTextAppearance:D,iconMaxWidth:J,minHeight:q,corners:S,stroke:R,stateOverrides:F,inputPadding:N,buttonPadding:I,successMessage:B="Thanks for subscribing!",errorMessage:ie="Please, fill all required fields."}=e,Q=c.slice(0,Math.min(p,c.length)),[oe,G]=u.useState(()=>Object.fromEntries(Q.map(ve=>[ve.name,""]))),[M,re]=u.useState("idle"),[Le,ce]=u.useState(null),fe=i==="success"?"success":i==="error"?"error":M,We=i==="error"?ie:Le,ne=i==="filled",v=u.useMemo(()=>{if(!ne)return oe;let ve=null;for(const ke of Q)(oe[ke.name]??"").trim().length>0||(ve=ve??{...oe},ve[ke.name]="Filled");return ve??oe},[ne,oe,Q]),g=fe==="error"?E.getFormFieldValidationError(Q,v):null,k=i&&i!=="default"?`${r}-state-${i}`:"",K=Q.some(ve=>(v[ve.name]??"").trim().length>0),U=k!==`${r}-state-filled`&&K?`${r}-state-filled`:"",te=`${k} ${U}`.trim(),ee=o==null?void 0:o.submitUrl,Z=d??"",de=(a==null?void 0:a.icon)??"",Se=(a==null?void 0:a.mode)==="On",ye=Z||"Submit",ue={fontSettings:{fontFamily:T,fontWeight:(y==null?void 0:y.fontWeight)??400,fontStyle:(y==null?void 0:y.fontStyle)??"normal"},fontSize:C??.01,lineHeight:m,letterSpacing:h??0,wordSpacing:W??0,textAppearance:x,color:e.inputTextColor??"#111111"},j={fontSettings:{fontFamily:T,fontWeight:(b==null?void 0:b.fontWeight)??400,fontStyle:(b==null?void 0:b.fontStyle)??"normal"},fontSize:f??.01,lineHeight:O,letterSpacing:P??0,wordSpacing:_??0,textAppearance:$,color:e.buttonTextColor??"#ffffff"},Y={fontSettings:{fontFamily:T,fontWeight:(A==null?void 0:A.fontWeight)??400,fontStyle:(A==null?void 0:A.fontStyle)??"normal"},fontSize:w??.01,lineHeight:H,letterSpacing:L??0,wordSpacing:V??0,textAppearance:D,color:e.successColor??"#22c55e"},z=ht(Xe(ue,t)),le=ht(Xe(j,t)),xe=ht(Xe(Y,t)),Ce=E.buildColorVars(r,{strokeColor:e.strokeColor,inputColor:e.inputColor,placeholderColor:e.placeholderColor,buttonColor:e.buttonColor,successColor:e.successColor,errorColor:e.errorColor,inputTextColor:e.inputTextColor??(ue==null?void 0:ue.color)??"#111111",buttonTextColor:e.buttonTextColor??(j==null?void 0:j.color)??"#ffffff"},gc,hc,F),Ie={borderRadius:E.scalingValue(S,t),borderWidth:E.scalingValue(R,t),borderStyle:"solid"},Ne={borderLeftWidth:E.scalingValue(R,t)},Ze=async ve=>{if(ve.preventDefault(),!s)return;const ke=Object.fromEntries(Q.map(Fe=>{var Be;return[Fe.name,((Be=oe[Fe.name])==null?void 0:Be.trim())??""]}).filter(([,Fe])=>Fe));if(!ee){re("error"),ce("No integrations were found for this form.");return}if(Object.keys(ke).length===0)return;const He=E.getFormFieldValidationError(Q,oe);if(He){re("error"),ce(He);return}re("submitting"),ce(null);try{const Fe=await fetch(ee,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(ke)});if(!Fe.ok){const Be=await Fe.text();throw new Error(Be||`Request failed: ${Fe.status}`)}re("success"),G(Object.fromEntries(Q.map(Be=>[Be.name,""])))}catch(Fe){re("error"),ce(Fe instanceof Error?Fe.message:"Something went wrong")}};return l.jsxs("div",{className:`${r}-wrapper ${te}`.trim(),style:Ce,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:pc(r)}}),l.jsxs("form",{onSubmit:Ze,className:`${r}-form`,style:{...Ie,height:E.scalingValue(q,t),minHeight:E.scalingValue(q,t)},children:[l.jsx("div",{className:`${r}-inputWrap ${r}-overlayAnchor`,style:{flex:1,minWidth:0},children:Q.map(ve=>l.jsx("input",{type:ve.type==="email"?"email":ve.type==="phone"?"tel":"text",name:ve.name,autoComplete:"off",value:v[ve.name]??"",onChange:ke=>G(He=>({...He,[ve.name]:ke.target.value})),placeholder:ve.placeholder,required:ve.isRequired??ve.type==="email",className:`${r}-input`,style:{...z,paddingRight:E.scalingValue(N.right,t),paddingLeft:E.scalingValue(N.left,t),paddingTop:E.scalingValue(N.top,t),paddingBottom:E.scalingValue(N.bottom,t)}},ve.name))}),l.jsx("div",{className:`${r}-overlayAnchor`,children:l.jsx("button",{type:s?"submit":"button",className:`${r}-submitBtn`,"aria-label":ye,style:{...le,...Ne,paddingRight:E.scalingValue(I.right,t),paddingLeft:E.scalingValue(I.left,t),paddingTop:E.scalingValue(I.top,t),paddingBottom:E.scalingValue(I.bottom,t),pointerEvents:s?"auto":void 0},children:M==="submitting"?"...":Se?de&&l.jsx(kt,{url:de,className:`${r}-submitBtnIcon`,style:{maxWidth:E.scalingValue(J??0,t)},fill:`var(--${r}-button-text-color)`,hoverFill:`var(--${r}-button-text-color)`}):Z})})]}),fe==="success"&&l.jsx("p",{className:`${r}-success`,style:{...xe},children:B}),fe==="error"&&l.jsx("p",{className:`${r}-error`,style:{...xe},role:"alert",children:g??We??ie})]})},gc={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"},hc=["hover","focus","filled","success","error"],fc=`import React, { useMemo, useState } from 'react';
|
|
979
984
|
import { CommonComponentProps } from '../props';
|
|
980
985
|
import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
|
|
981
986
|
import { omitTextColors, textStylesToCss, type TextStyles } from '../utils/textStylesToCss';
|
|
@@ -1184,11 +1189,13 @@ type OnelinerFormProps = {
|
|
|
1184
1189
|
settings: OnelinerFormSettings;
|
|
1185
1190
|
content?: unknown;
|
|
1186
1191
|
isEditor?: boolean;
|
|
1192
|
+
isPreviewMode?: boolean;
|
|
1187
1193
|
activeEvent?: string;
|
|
1188
1194
|
} & CommonComponentProps;
|
|
1189
1195
|
|
|
1190
|
-
export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: OnelinerFormProps) => {
|
|
1196
|
+
export const OnelinerForm = ({ settings, isEditor, isPreviewMode, metadata, activeEvent }: OnelinerFormProps) => {
|
|
1191
1197
|
const { prefix: P } = useScopedStyles();
|
|
1198
|
+
const canSubmit = (isPreviewMode && isEditor) || !isEditor;
|
|
1192
1199
|
const {
|
|
1193
1200
|
fields = [{ name: 'email', type: 'email', placeholder: 'Your email' }],
|
|
1194
1201
|
buttonIcon,
|
|
@@ -1329,6 +1336,8 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
|
|
|
1329
1336
|
|
|
1330
1337
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
1331
1338
|
e.preventDefault();
|
|
1339
|
+
if (!canSubmit) return;
|
|
1340
|
+
|
|
1332
1341
|
const payload = Object.fromEntries(
|
|
1333
1342
|
visibleFields.map((f) => [f.name, values[f.name]?.trim() ?? '']).filter(([, v]) => v)
|
|
1334
1343
|
);
|
|
@@ -1408,7 +1417,7 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
|
|
|
1408
1417
|
</div>
|
|
1409
1418
|
<div className={\`\${P}-overlayAnchor\`}>
|
|
1410
1419
|
<button
|
|
1411
|
-
type=
|
|
1420
|
+
type={canSubmit ? 'submit' : 'button'}
|
|
1412
1421
|
className={\`\${P}-submitBtn\`}
|
|
1413
1422
|
aria-label={submitAriaLabel}
|
|
1414
1423
|
style={{
|
|
@@ -1418,6 +1427,7 @@ export const OnelinerForm = ({ settings, isEditor, metadata, activeEvent }: Onel
|
|
|
1418
1427
|
paddingLeft: scalingValue(buttonPadding.left, isEditor),
|
|
1419
1428
|
paddingTop: scalingValue(buttonPadding.top, isEditor),
|
|
1420
1429
|
paddingBottom: scalingValue(buttonPadding.bottom, isEditor),
|
|
1430
|
+
pointerEvents: canSubmit ? 'auto' : undefined,
|
|
1421
1431
|
}}
|
|
1422
1432
|
>
|
|
1423
1433
|
{status === 'submitting'
|
|
@@ -1547,7 +1557,7 @@ const COLOR_VAR_MAP: Record<OnelinerColorKeys, string> = {
|
|
|
1547
1557
|
};
|
|
1548
1558
|
|
|
1549
1559
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
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`
|
|
1560
|
+
`,yc="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>'),vc=[{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."}],Lo={fontSettings:{type:"object",display:{type:"font-settings-weight",visible:!0},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},bc=["strokeColor","inputColor","inputTextColor","placeholderColor","buttonColor","buttonTextColor","successColor","errorColor"],xc={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:{...Lo.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:{...Lo.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:{...Lo.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:vc,fieldsToShow:1,buttonLabel:"Subscribe",buttonIcon:{mode:"Off",icon:yc},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:[...bc],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"]},Cc={element:mc,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:xc,sourceCode:fc};function Hi(e){return`
|
|
1551
1561
|
.${e}-marquee-wrapper {
|
|
1552
1562
|
overflow: hidden;
|
|
1553
1563
|
width: 100%;
|
|
@@ -1679,7 +1689,7 @@ const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
|
1679
1689
|
.${e}-image-hover-grayscale:hover img {
|
|
1680
1690
|
filter: grayscale(100%);
|
|
1681
1691
|
}
|
|
1682
|
-
`}const
|
|
1692
|
+
`}const Sc=30,wc=20,Eo=2,$c=2,Tc=(e,t)=>Array.from({length:t},()=>e).flat(),Lc=(e,t)=>{const n=t.getBoundingClientRect(),o=e.getBoundingClientRect();return o.right>n.left&&o.left<n.right},Ec=(e,t)=>{const n=e.querySelectorAll(`[data-marquee-item-index="${t}"]`);return Array.from(n).some(o=>Lc(o,e))},Pc=({item:e,prefix:t,imageFit:n,imageMaxWidth:o,imageMaxHeight:i,imageHoverClass:r,isFirstSet:s,scaled:c,onFirstSetImageDone:a})=>{var $,A,w;const d=u.useRef(null);u.useLayoutEffect(()=>{if(!s)return;const H=d.current;H!=null&&H.complete&&(a==null||a())},[s,($=e.image)==null?void 0:$.url,a]);const p=n.display==="Cover",T=n.ratioValue??"1:1",y=n.reversed??!1,[C,m]=T.split(":").map(Number),x=(y?m:C)/(y?C:m);let b=o,f=b/x;f>i&&(f=i,b=f*x);const O=c(b),P=c(f),_=((A=e.image)==null?void 0:A.url)&&l.jsx("img",{ref:d,src:e.image.url,alt:((w=e.image)==null?void 0:w.name)??"",style:p?{pointerEvents:"auto",display:"block",width:"100%",height:"100%",objectFit:"cover"}:{pointerEvents:"auto",display:"block",height:"100%",width:"auto",maxWidth:c(o),objectFit:"contain"},onLoad:s?a:void 0,onError:s?a:void 0});return l.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"start",...p?{width:O}:{width:"fit-content",maxWidth:c(o),minWidth:0}},children:l.jsx("div",{className:r,style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",flexShrink:0,...p?{width:O,height:P,overflow:"hidden"}:{width:"fit-content",maxWidth:c(o),height:c(i)}},children:_&&e.link?l.jsx("a",{href:e.link,target:"_blank",rel:"noopener noreferrer",className:$e(`${t}-marquee-link`,!p&&`${t}-marquee-link-contain`),children:_}):_})})},_c=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),{speed:s,direction:c,pauseOnHover:a,gap:d,imageMaxWidth:p,imageMaxHeight:T,imageFit:y,hoverEffect:C}=e,m=!!i,h=!n||!!o,W=h&&C!=="off"&&C!=="randomize"?`${r}-image-hover-${C}`:void 0,x=n?!!o:!0,f=((t==null?void 0:t.length)??0)>0&&(x||!!n),O=Math.max(0,s)*Sc,P=v=>E.scalingValue(v,n??!1),_=u.useRef(null),$=u.useRef(null),A=u.useRef(null),[w,H]=u.useState(0),[L,V]=u.useState(0),D=x&&a==="on",[J,q]=u.useState(!1),[S,R]=u.useState({}),F=u.useRef(S);F.current=S;const N=u.useRef(null),I=u.useRef(0),B=u.useRef(null),ie=u.useMemo(()=>(t??[]).map(v=>{var g;return((g=v.image)==null?void 0:g.url)??""}).join("\0"),[t]),[Q,oe]=u.useState(Eo),G=u.useMemo(()=>{const v=t??[];return!x||v.length===0?v:Tc(v,Q)},[t,x,Q]),M=u.useMemo(()=>G.filter(v=>{var g;return!!((g=v.image)!=null&&g.url)}).length,[G]),re=f?$c:1;u.useLayoutEffect(()=>{I.current=0,R({}),N.current=null,oe(Eo),H(0)},[ie]),u.useEffect(()=>{if(!h||C!=="randomize")return;const v=_.current;if(!v)return;const g=te=>{R(ee=>{let Z=null;for(const de of te)de in ee&&(Ec(v,de)||(Z||(Z={...ee}),delete Z[de]));return Z??ee})},k=new IntersectionObserver(te=>{const ee=new Set;for(const Z of te){const de=Z.target.dataset.marqueeItemIndex,Se=de!==void 0?Number(de):NaN;Number.isNaN(Se)||ee.add(Se)}ee.size>0&&g(ee)},{root:v,threshold:0});Object.keys(S).forEach(te=>{const ee=Number(te);v.querySelectorAll(`[data-marquee-item-index="${ee}"]`).forEach(Z=>k.observe(Z))});let K=0;const U=()=>{const te=Object.keys(F.current);te.length!==0&&(g(te.map(Number)),K=requestAnimationFrame(U))};return Object.keys(F.current).length>0&&(K=requestAnimationFrame(U)),()=>{cancelAnimationFrame(K),k.disconnect()}},[C,S,h]),u.useLayoutEffect(()=>{if(!f)return;const v=_.current,g=A.current;if(!v||!g)return;let k=0;const K=()=>{const ee=v.getBoundingClientRect().width,Z=g.getBoundingClientRect().width,de=N.current,Se=typeof de=="number"&&Math.abs(de-Z)<=.25;if(N.current=Z,x&&Z>0&&Q>0){const ye=Z/Q;if(ye>0&&ee>0){const ue=Math.max(Eo,Math.ceil(ee/ye)+1);if(ue!==Q){oe(ue);return}}}if(Z>0&&w<=0){H(Z);return}Se&&Z!==w?H(Z):!Se&&w<=0&&(cancelAnimationFrame(k),k=requestAnimationFrame(K))},U=()=>{cancelAnimationFrame(k),k=requestAnimationFrame(K)};B.current=U,U();const te=new ResizeObserver(U);return te.observe(v),te.observe(g),()=>{B.current=null,cancelAnimationFrame(k),te.disconnect()}},[x,f,w,ie,Q]),u.useLayoutEffect(()=>{const v=$.current;if(!f||!v)return;const g=w>0?w:0,k=g>0&&O>0?g/O*1e3:0,K=`${Math.max(0,k)/1e3}s`;v.style.setProperty("--marquee-distance",`${g}px`),v.style.setProperty("--marquee-duration",K)},[x,f,O,w]),u.useLayoutEffect(()=>{if(!f){V(0);return}if(w<=0){V(0);return}const v=$.current;if(!v)return;const g=()=>{const K=v.getBoundingClientRect().height;V(K>0?K:0)};g();const k=new ResizeObserver(g);return k.observe(v),()=>k.disconnect()},[f,re,G,n,d,p,T,w,y,S]);const Le=()=>{D&&q(!0)},ce=()=>{D&&q(!1)},fe=u.useCallback(()=>{var v;I.current=Math.min(M,I.current+1),(v=B.current)==null||v.call(B)},[M]),We=u.useCallback((v,g)=>{R(k=>{const K=k[v]??g,U=(t??[]).filter(ee=>ee!==K);if(U.length===0)return k;const te=U[Math.floor(Math.random()*U.length)];return{...k,[v]:te}})},[t]),ne=(v,g,k,K)=>{const U=h&&C==="randomize"&&y.display==="Cover"?S[k]??v:v,te=`max(${P(d)}, ${wc}px)`,ee=`calc(-0.5 * (${te} + ${P(d)}))`;return l.jsxs("div",{className:`${r}-marquee-card`,"data-marquee-item-index":k,onMouseEnter:h&&C==="randomize"&&y.display==="Cover"?()=>We(k,v):void 0,children:[l.jsx(Pc,{item:U,prefix:r,imageFit:y,imageMaxWidth:p,imageMaxHeight:T,imageHoverClass:W,isEditor:n,isFirstSet:K,scaled:P,onFirstSetImageDone:fe}),m&&l.jsx("div",{"data-controls":"gap","data-controls-axis":"x",className:`${r}-gap-control`,style:{position:"absolute",top:0,right:ee,width:te,height:"100%"}})]},`${g}-${k}`)};if(f){const v=x?D&&J?"paused":"running":"paused";return l.jsxs("div",{ref:_,className:$e(`${r}-wrapper`,`${r}-marquee-wrapper`),"aria-label":"Marquee",style:w>0&&L>0?{height:L}:void 0,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hi(r)}}),l.jsx("div",{ref:$,className:`${r}-marquee-track`,"data-direction":c,onMouseEnter:Le,onMouseLeave:ce,style:{"--marquee-play-state":v},children:Array.from({length:re},(g,k)=>l.jsx("div",{ref:k===0?A:void 0,className:$e(`${r}-marquee-row`,`${r}-marquee-set`),style:{gap:P(d),paddingRight:P(d)},"aria-hidden":k>0,children:G.map((K,U)=>ne(K,k,U,k===0))},`set-${k}`))},"marquee-track")]})}return l.jsxs("div",{ref:_,className:`${r}-wrapper`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hi(r)}}),l.jsx("div",{className:$e(`${r}-marquee-row`,`${r}-marquee-static`),style:{gap:P(d),transform:"none"},"aria-label":"Marquee",children:t==null?void 0:t.map((v,g)=>ne(v,0,g))},"marquee-static")]})},Ac=`import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
1683
1693
|
import cn from 'classnames';
|
|
1684
1694
|
import { CommonComponentProps } from '../props';
|
|
1685
1695
|
import { scalingValue } from '../utils/scalingValue';
|
|
@@ -2309,7 +2319,7 @@ type MarqueeProps = {
|
|
|
2309
2319
|
isPreviewMode?: boolean;
|
|
2310
2320
|
isEditMode?: boolean;
|
|
2311
2321
|
} & CommonComponentProps;
|
|
2312
|
-
`,
|
|
2322
|
+
`,Rc={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:""}]}},Wc={element:_c,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:Rc,sourceCode:Ac,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[]}};function Bi(e){return`
|
|
2313
2323
|
.${e}-marquee-wrapper {
|
|
2314
2324
|
overflow: hidden;
|
|
2315
2325
|
width: 100%;
|
|
@@ -2396,7 +2406,7 @@ type MarqueeProps = {
|
|
|
2396
2406
|
pointer-events: auto;
|
|
2397
2407
|
z-index: 10;
|
|
2398
2408
|
}
|
|
2399
|
-
`}const
|
|
2409
|
+
`}const Ic=30,Oi=2,kc=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),{autoplay:s,align:c,speed:a,direction:d,pauseOnHover:p,gap:T,cardWidth:y,corners:C,stroke:m,strokeColor:h,bgColor:W,padding:x,logoMarginTop:b,logoWidth:f,logoHeight:O,captionMarginTop:P}=e,_=!!i,$=((t==null?void 0:t.length)??0)>0,A=s==="on"&&(!n||!!o),w=$&&(A||!!n),H=Math.max(0,a)*Ic,L=j=>E.scalingValue(j,n??!1),V=u.useRef(null),D=u.useRef(null),J=u.useRef(null),[q,S]=u.useState(0),[R,F]=u.useState(0),[N,I]=u.useState(0),B=A&&p==="on",[ie,Q]=u.useState(!1),oe=u.useRef(null),[G,M]=u.useState(0),[re,Le]=u.useState(0),ce=u.useRef(null),fe=j=>{var z,le,xe,Ce,Ie;return{fontSettings:{fontFamily:(e==null?void 0:e[`${j}FontFamily`])??"Arial",fontWeight:((z=e==null?void 0:e[`${j}FontSettings`])==null?void 0:z.fontWeight)??400,fontStyle:((le=e==null?void 0:e[`${j}FontSettings`])==null?void 0:le.fontStyle)??"normal"},textAppearance:{textTransform:((xe=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:xe.textTransform)??"none",textDecoration:((Ce=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:Ce.textDecoration)??"none",fontVariant:((Ie=e==null?void 0:e[`${j}TextAppearance`])==null?void 0:Ie.fontVariant)??"normal"},letterSpacing:(e==null?void 0:e[`${j}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${j}WordSpacing`])??0,fontSize:(e==null?void 0:e[`${j}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${j}LineHeight`])??.01,color:(e==null?void 0:e[`${j}Color`])??"#000000"}},We=fe("text"),ne=fe("caption"),v=u.useMemo(()=>((t==null?void 0:t.length)??0)>1&&(t??[]).some(j=>{var Y,z;return(((Y=j.text)==null?void 0:Y.length)??0)>0||(((z=j.caption)==null?void 0:z.length)??0)>0}),[t]),g=u.useMemo(()=>!w||(t==null?void 0:t.length)===0?1:R<=0||q<=0?Oi:Math.max(Oi,Math.ceil(q/R)+1),[w,t==null?void 0:t.length,R,q]);u.useLayoutEffect(()=>{if(!w)return;const j=V.current,Y=J.current;if(!j||!Y)return;let z=0;const le=()=>{const Ie=j.getBoundingClientRect().width,Ne=Y.getBoundingClientRect().width,Ze=ce.current,ve=typeof Ze=="number"&&Math.abs(Ze-Ne)<=.25;if(ce.current=Ne,S(Ie),typeof Ne=="number"&&Ne>0&&R<=0){F(Ne);return}ve&&Ne!==R?F(Ne):!ve&&R<=0&&(cancelAnimationFrame(z),z=requestAnimationFrame(le))},xe=()=>{cancelAnimationFrame(z),z=requestAnimationFrame(le)};xe();const Ce=new ResizeObserver(xe);return Ce.observe(j),Ce.observe(Y),()=>{cancelAnimationFrame(z),Ce.disconnect()}},[A,w,R]),u.useLayoutEffect(()=>{const j=D.current;if(!w||!j)return;const Y=R>0?R:0,z=Y>0&&H>0?Y/H*1e3:0,le=`${Math.max(0,z)/1e3}s`;j.style.setProperty("--marquee-distance",`${Y}px`),j.style.setProperty("--marquee-duration",le)},[A,w,H,R]),u.useLayoutEffect(()=>{if(!w){I(0);return}const j=J.current,Y=D.current;if(!j||!Y)return;const z=()=>{let xe=0;for(let Ce=0;Ce<j.children.length;Ce++){const Ne=j.children[Ce].firstElementChild;Ne&&(xe=Math.max(xe,Ne.offsetHeight))}xe<=0&&(xe=Y.offsetHeight),I(xe>0?xe:0)};z();const le=new ResizeObserver(z);return le.observe(j),le.observe(Y),()=>{le.disconnect()}},[w,g,t,n,T,y,x,m,C,f,O,G,re]);const k=()=>{B&&Q(!0)},K=()=>{B&&Q(!1)},U=u.useMemo(()=>{switch(c){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[c]),te=u.useMemo(()=>{switch(c){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[c]),ee=u.useCallback((j,Y,z,le)=>l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:U,width:"100%"},children:[l.jsx("div",{"data-controls":_?le==null?void 0:le.controlsName:void 0,"data-controls-axis":_?"y":void 0,className:_?`${r}-control`:void 0,style:{height:L((le==null?void 0:le.marginTop)??0)}}),l.jsx("div",{...le!=null&&le.dataMeasureKind?{"data-testimonial-measure":le.dataMeasureKind}:{},style:{...Xe(j,n),textAlign:te,pointerEvents:"auto",...typeof(le==null?void 0:le.minHeightPx)=="number"&&le.minHeightPx>0?{minHeight:le.minHeightPx}:{}},children:l.jsx(Ln,{content:Y})})]},z),[U,te,n,_,r,L]),Z=u.useCallback((j,Y,z)=>{var le,xe,Ce;return l.jsxs("div",{style:{padding:`${L(x.top)} ${L(x.right)} ${L(x.bottom)} ${L(x.left)}`,width:L(y+m*2),height:"100%",borderRadius:L(C),border:`${L(m)} solid ${h}`,boxSizing:"border-box",position:"relative",overflow:"hidden"},children:[l.jsx("div",{className:`${r}-cover`,style:{background:W}}),l.jsxs("div",{className:`${r}-elements-overlay`,style:{alignItems:U,textAlign:te},children:[j.text&&ee(We,j.text,"text",z!=null&&z.dataMeasureAttrs?{dataMeasureKind:"text"}:typeof(z==null?void 0:z.textMinHeightPx)=="number"&&z.textMinHeightPx>0?{minHeightPx:z.textMinHeightPx}:void 0),l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:U,width:"100%"},children:[l.jsx("div",{"data-controls":_&&!(z!=null&&z.dataMeasureAttrs)?"logoMarginTop":void 0,className:_&&!(z!=null&&z.dataMeasureAttrs)?`${r}-control`:void 0,style:{height:L(b)}}),l.jsx("div",{style:{width:L(f),height:L(O)},children:((le=j.logo)==null?void 0:le.url)&&l.jsx("img",{src:j.logo.url,alt:((xe=j.logo)==null?void 0:xe.name)??"",style:{pointerEvents:"auto",width:"100%",height:"100%",objectFit:((Ce=j.logo)==null?void 0:Ce.objectFit)||"contain"}})})]}),j.caption&&ee(ne,j.caption,"caption",{...z!=null&&z.dataMeasureAttrs?{}:{controlsName:"captionMarginTop"},marginTop:P,...z!=null&&z.dataMeasureAttrs?{dataMeasureKind:"caption"}:typeof(z==null?void 0:z.captionMinHeightPx)=="number"&&z.captionMinHeightPx>0?{minHeightPx:z.captionMinHeightPx}:{}})]})]},Y)},[W,P,ne,y,C,O,b,f,U,te,x.bottom,x.left,x.right,x.top,ee,m,h,We,n,_,r]),de=u.useCallback(j=>{M(j.maxTextPx),Le(j.maxCaptionPx)},[]);u.useLayoutEffect(()=>{if(!v){de({maxTextPx:0,maxCaptionPx:0});return}const j=oe.current;if(!j)return;const Y=()=>{E.readTestimonialTextMeasure(j,de)};Y();const z=new ResizeObserver(Y);return z.observe(j),()=>{z.disconnect()}},[v,de,t,Z]);const Se=v?{textMinHeightPx:G,captionMinHeightPx:re}:void 0,ye=v?l.jsx("div",{ref:oe,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:(t??[]).map((j,Y)=>Z(j,`measure-${Y}`,{dataMeasureAttrs:!0}))}):null,ue=(j,Y)=>l.jsxs("div",{style:{position:"relative",flex:"0 0 auto",height:"100%",transform:"translateZ(0)",backfaceVisibility:"hidden",WebkitBackfaceVisibility:"hidden",willChange:"transform"},children:[Z(j,`card-${Y}`,Se),_&&l.jsx("div",{"data-controls":"gap","data-controls-axis":"x",style:{position:"absolute",top:0,right:`calc(-1 * ${L(T)})`,width:L(T),height:"100%",pointerEvents:"auto",zIndex:2}})]},Y);if(w){const j=A?B&&ie?"paused":"running":"paused";return l.jsxs("div",{ref:V,className:$e(`${r}-wrapper`,`${r}-marquee-wrapper`),"aria-label":"Testimonials",style:{overflow:"hidden",width:"100%",...N>0?{height:N}:{}},children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Bi(r)}}),ye,l.jsx("div",{ref:D,className:`${r}-marquee-track`,"data-direction":d,onMouseEnter:k,onMouseLeave:K,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":j},children:Array.from({length:g},(Y,z)=>l.jsx("div",{ref:z===0?J:void 0,className:`${r}-marquee-set`,style:{display:"flex",flexDirection:"row",flex:"0 0 auto",gap:L(T),paddingRight:L(T)},"aria-hidden":z>0,children:t==null?void 0:t.map((le,xe)=>ue(le,`${z}-${xe}`))},`set-${z}`))})]})}return l.jsxs("div",{className:`${r}-wrapper`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Bi(r)}}),ye,l.jsx("div",{style:{gap:L(T),justifyContent:"center",overflowX:"auto",display:"flex",flexDirection:"row"},"aria-label":"Testimonials",children:t==null?void 0:t.map((j,Y)=>ue(j,Y))})]})},Fc=`import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2400
2410
|
import cn from 'classnames';
|
|
2401
2411
|
import { CommonComponentProps } from '../props';
|
|
2402
2412
|
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
@@ -3012,7 +3022,7 @@ type TestimonialsSettings = {
|
|
|
3012
3022
|
logoHeight: number;
|
|
3013
3023
|
captionMarginTop: number;
|
|
3014
3024
|
};
|
|
3015
|
-
`,
|
|
3025
|
+
`,Vi={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Mc={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:{...Vi.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:{...Vi.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"}]}]}]}},Nc={element:kc,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:Mc,sourceCode:Fc,assetsPaths:{content:[{path:"logo.url",placeholderEnabled:!0}],parameters:[]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function Hc(e){return`
|
|
3016
3026
|
.${e}-container {
|
|
3017
3027
|
position: relative;
|
|
3018
3028
|
overflow-x: clip;
|
|
@@ -3136,7 +3146,7 @@ type TestimonialsSettings = {
|
|
|
3136
3146
|
width: 100%;
|
|
3137
3147
|
height: 100%;
|
|
3138
3148
|
}
|
|
3139
|
-
`}const
|
|
3149
|
+
`}const Bc=({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i})=>{const{prefix:r}=E.useScopedStyles(),s=t||[],{autoplay:c,delay:a,align:d,width:p,imageMarginTop:T,textMarginTop:y,captionMarginTop:C,imageWidth:m,imageHeight:h,controlsWidth:W,controlsColor:x,controlsHoverColor:b}=e,f=c==="on"&&o,[O,P]=u.useState(0),[_,$]=u.useState(null),[A,w]=u.useState(!1),H=u.useRef(null),L=u.useMemo(()=>{switch(d){case"center":return"center";case"end":return"flex-end";case"start":default:return"flex-start"}},[d]),V=u.useMemo(()=>{switch(d){case"center":return"center";case"end":return"right";case"start":default:return"left"}},[d]);u.useEffect(()=>{P(0),$(null),w(!1)},[s.length]);const D=s[O],J=_===null?null:s[_],q=ne=>{var g,k,K,U,te;return{fontSettings:{fontFamily:(e==null?void 0:e[`${ne}FontFamily`])??"Arial",fontWeight:((g=e==null?void 0:e[`${ne}FontSettings`])==null?void 0:g.fontWeight)??400,fontStyle:((k=e==null?void 0:e[`${ne}FontSettings`])==null?void 0:k.fontStyle)??"normal"},textAppearance:{textTransform:((K=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:K.textTransform)??"none",textDecoration:((U=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:U.textDecoration)??"none",fontVariant:((te=e==null?void 0:e[`${ne}TextAppearance`])==null?void 0:te.fontVariant)??"normal"},fontSize:(e==null?void 0:e[`${ne}FontSize`])??.01,lineHeight:(e==null?void 0:e[`${ne}LineHeight`])??.01,letterSpacing:(e==null?void 0:e[`${ne}LetterSpacing`])??0,wordSpacing:(e==null?void 0:e[`${ne}WordSpacing`])??0,color:(e==null?void 0:e[`${ne}Color`])??"#000000"}},S=q("text"),R=q("caption"),F=s.length>1&&s.some(ne=>{var v,g;return(((v=ne.text)==null?void 0:v.length)??0)>0||(((g=ne.caption)==null?void 0:g.length)??0)>0}),N=u.useRef(null),[I,B]=u.useState(0),[ie,Q]=u.useState(0),oe=e.controls??{mode:"Off",icon:null},G=s.length>1,M=u.useCallback((ne,v)=>!G||v===ne?ne:(H.current&&window.clearTimeout(H.current),$(ne),w(!0),H.current=window.setTimeout(()=>{$(null),w(!1),H.current=null},300),v),[G]),re=u.useCallback(()=>{G&&P(ne=>M(ne,(ne-1+s.length)%s.length))},[G,M,s.length]),Le=u.useCallback(()=>{G&&P(ne=>M(ne,(ne+1)%s.length))},[G,M,s.length]);u.useEffect(()=>{if(!f||!G)return;const ne=Math.max(300,Number.isFinite(a*1e3)?a*1e3:0),v=window.setInterval(()=>{P(g=>M(g,(g+1)%s.length))},ne);return()=>{window.clearInterval(v)}},[f,G,M,s.length,a]),u.useEffect(()=>()=>{H.current&&window.clearTimeout(H.current)},[]);const ce=(ne,v)=>{var te,ee,Z,de;const g=v==null?void 0:v.textMinHeightPx,k=v==null?void 0:v.captionMinHeightPx,K=v==null?void 0:v.dataMeasureAttrs,U=i&&!(v!=null&&v.dataMeasureAttrs)&&!(v!=null&&v.hideControls);return l.jsxs(l.Fragment,{children:[ne.text&&l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"textMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(y??0,n??!1)}}),l.jsx("div",{...K&&{"data-testimonial-measure":"text"},style:{...Xe(S,n),...g&&g>0?{minHeight:g}:{},textAlign:V,pointerEvents:"auto"},children:l.jsx(Ln,{content:ne.text})})]}),l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"imageMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(T??0,n??!1)}}),l.jsx("div",{style:{width:E.scalingValue(m??0,n??!1),height:E.scalingValue(h??0,n??!1)},children:((te=ne.image)==null?void 0:te.url)&&l.jsx("img",{src:(ee=ne.image)==null?void 0:ee.url,alt:((Z=ne.image)==null?void 0:Z.name)??"",className:`${r}-icon`,style:{objectFit:((de=ne.image)==null?void 0:de.objectFit)||"contain"}})})]}),ne.caption&&l.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:L,width:"100%"},children:[l.jsx("div",{"data-controls":U?"captionMarginTop":void 0,className:U?`${r}-control`:void 0,style:{height:E.scalingValue(C??0,n??!1)}}),l.jsx("div",{...K?{"data-testimonial-measure":"caption"}:{},style:{...Xe(R,n),...k&&k>0?{minHeight:k}:{},textAlign:V,pointerEvents:"auto"},children:l.jsx(Ln,{content:ne.caption})})]})]})},fe=u.useCallback(ne=>{B(ne.maxTextPx),Q(ne.maxCaptionPx)},[]);if(u.useLayoutEffect(()=>{if(!F){fe({maxTextPx:0,maxCaptionPx:0});return}const ne=N.current;if(!ne)return;const v=()=>{E.readTestimonialTextMeasure(ne,fe)};v();const g=new ResizeObserver(v);return g.observe(ne),()=>{g.disconnect()}},[F,fe,t]),!D)return l.jsx(l.Fragment,{});const We=F?{textMinHeightPx:I,captionMinHeightPx:ie}:void 0;return l.jsx(l.Fragment,{children:l.jsxs("div",{className:`${r}-container`,children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Hc(r)}}),l.jsxs("div",{className:`${r}-wrapper`,style:{width:E.scalingValue(p??0,n??!1),alignItems:L},children:[F&&l.jsx("div",{ref:N,"aria-hidden":!0,style:{position:"absolute",left:0,top:0,width:"100%",height:"100%",visibility:"hidden",pointerEvents:"none",zIndex:-1},children:s.map((ne,v)=>l.jsx("div",{style:{width:"100%"},children:ce(ne,{dataMeasureAttrs:!0})},v))}),l.jsxs("div",{className:`${r}-fade-stack`,children:[J&&A&&l.jsx("div",{className:$e(`${r}-fade-item-prev`,`${r}-fade-out`),children:ce(J,{...We,hideControls:!0})}),l.jsx("div",{className:$e(`${r}-fade-item-current`,A?`${r}-fade-in`:void 0),children:ce(D,We)})]})]}),oe.mode==="On"&&l.jsxs("div",{className:`${r}-controls`,children:[l.jsx("div",{className:`${r}-arrow`,style:{width:E.scalingValue(W??.02,n??!1),height:E.scalingValue(W??.02,n??!1),"--arrow-hover-color":b},children:l.jsx("button",{type:"button",className:`${r}-arrow-inner`,onClick:re,disabled:!G,"aria-label":"Previous testimonial",children:oe.icon&&l.jsx(kt,{url:oe.icon,fill:x,hoverFill:b,className:$e(`${r}-arrow-img`,`${r}-mirror`)})})}),l.jsx("div",{className:$e(`${r}-arrow`,`${r}-next-arrow`),style:{width:E.scalingValue(W??.02,n??!1),height:E.scalingValue(W??.02,n??!1),"--arrow-hover-color":b},children:l.jsx("button",{type:"button",className:`${r}-arrow-inner`,onClick:Le,disabled:!G,"aria-label":"Next testimonial",children:oe.icon&&l.jsx(kt,{url:oe.icon,fill:x,hoverFill:b,className:`${r}-arrow-img`})})})]})]})})},Oc=`import cn from 'classnames';
|
|
3140
3150
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3141
3151
|
import { CommonComponentProps } from '../props';
|
|
3142
3152
|
import { RichTextRenderer } from '../helpers/RichTextRenderer/RichTextRenderer';
|
|
@@ -3631,11 +3641,11 @@ type TestimonialsSettings = {
|
|
|
3631
3641
|
icon?: string | null;
|
|
3632
3642
|
};
|
|
3633
3643
|
};
|
|
3634
|
-
`,
|
|
3644
|
+
`,Vc="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>'),Di={fontSettings:{type:"object",scope:"common",display:{type:"font-settings"},properties:{fontWeight:{type:"number",scope:"common"},fontStyle:{type:"string",scope:"common"}}}},Dc={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:{...Di.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:{...Di.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:Vc},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"}]}]}]}},jc={element:Bc,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:Dc,sourceCode:Oc,assetsPaths:{content:[{path:"image.url",placeholderEnabled:!0}],parameters:[{path:"settings.controls.icon"}]},fontSettingsPaths:{content:[],parameters:[{path:"styles.text.fontSettings"},{path:"styles.caption.fontSettings"}]}};function zc(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function Kc(e){return`
|
|
3635
3645
|
.${e}-wrapper {
|
|
3636
3646
|
display: grid;
|
|
3637
3647
|
align-items: start;
|
|
3638
|
-
min-height: ${
|
|
3648
|
+
min-height: ${zc(48)};
|
|
3639
3649
|
}
|
|
3640
3650
|
.${e}-item {
|
|
3641
3651
|
display: flex;
|
|
@@ -3723,7 +3733,7 @@ type TestimonialsSettings = {
|
|
|
3723
3733
|
pointer-events: auto;
|
|
3724
3734
|
z-index: 10;
|
|
3725
3735
|
}
|
|
3726
|
-
`}const
|
|
3736
|
+
`}const Wt=500,Dt="cubic-bezier(0.22, 1, 0.36, 1)";function qc({images:e,index:t,imageDisplay:n,originRect:o,reverseClose:i,onClose:r,onPrev:s,onNext:c,counterClassName:a,counterStyle:d}){const p=u.useRef(null),T=u.useRef(null),[y,C]=u.useState(null),[m,h]=u.useState(o?"opening":"open"),[W,x]=u.useState(!0),b=u.useRef(t),f=u.useCallback(()=>{const w=p.current,H=T.current;if(!w||!H)return;const L=w.getBoundingClientRect(),V=L.width,D=L.height,J=H.naturalWidth,q=H.naturalHeight;if(!V||!D||!J||!q)return;if(n==="Cover"){C({width:V,height:D,left:L.left,top:L.top});return}const S=J/q,R=V/D;if(S>R){const F=V/S;C({width:V,height:F,left:L.left,top:L.top+(D-F)/2})}else{const F=D*S;C({width:F,height:D,left:L.left+(V-F)/2,top:L.top})}},[n]);u.useEffect(()=>{f();const w=p.current;if(!w)return;const H=new ResizeObserver(()=>f());return H.observe(w),()=>H.disconnect()},[f,t]),u.useEffect(()=>{if(m!=="opening"||!y)return;const w={id:0};return w.id=requestAnimationFrame(()=>{w.id=requestAnimationFrame(()=>h("open"))}),()=>cancelAnimationFrame(w.id)},[m,y]),u.useEffect(()=>{if(m!=="closing")return;const w=setTimeout(()=>r(),Wt);return()=>clearTimeout(w)},[m,r]),u.useEffect(()=>{b.current!==t&&x(!1),b.current=t},[t]);const O=()=>{m!=="closing"&&h("closing")},P=m==="open",_=m==="closing",$=_&&i&&!!o,A=m==="opening"?o??y:$?o:y;return l.jsxs("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9997},onClick:O,children:[l.jsx("div",{style:{position:"absolute",inset:0,background:"rgba(28,31,34,0.9)",opacity:P?1:0,transition:`opacity ${Wt}ms ${Dt}`,pointerEvents:"none"}}),l.jsxs("div",{style:{position:"relative",width:"100%",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},children:[l.jsx("div",{style:{height:"10%"}}),l.jsx("div",{style:{width:"70%",height:"80%",display:"flex",justifyContent:"center",alignItems:"center"},children:l.jsx("div",{ref:p,style:{width:"100%",height:"100%"}})}),l.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",height:"10%",opacity:P?1:0,transition:`opacity ${Wt}ms ${Dt}`},children:e.length>1&&l.jsxs("p",{className:a,style:d,children:[t+1," / ",e.length]})})]}),A&&l.jsx("img",{ref:T,src:e[t],onLoad:f,style:{position:"fixed",top:A.top,left:A.left,width:A.width,height:A.height,objectFit:n==="Cover"?"cover":"contain",opacity:_&&!$?0:1,transition:_&&!$?`opacity ${Wt}ms ${Dt}`:$||W?`top ${Wt}ms ${Dt}, left ${Wt}ms ${Dt}, width ${Wt}ms ${Dt}, height ${Wt}ms ${Dt}`:"none",pointerEvents:"none",zIndex:9998}}),P&&y&&l.jsxs(l.Fragment,{children:[l.jsx("div",{style:{position:"fixed",top:y.top,left:y.left,width:y.width/2,height:y.height,cursor:"w-resize",zIndex:9999},onClick:w=>{w.stopPropagation(),s()}}),l.jsx("div",{style:{position:"fixed",top:y.top,left:y.left+y.width/2,width:y.width/2,height:y.height,cursor:"e-resize",zIndex:9999},onClick:w=>{w.stopPropagation(),c()}})]})]})}function Uc({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i,metadata:r,activeEvent:s,layoutId:c}){const{prefix:a}=E.useScopedStyles(),{type:d="A",gridLayout:p,textBoxWidth:T,verticalGap:y,entriesCount:C,lightbox:m,imageDisplay:h,slider:W,sliderTiming:x,direction:b,transition:f,titleMarginTop:O,subtitleMarginTop:P,titleColor:_,subtitleColor:$,lightboxCounterColor:A,titleFontFamily:w,titleFontSettings:H,titleFontSize:L,titleLineHeight:V,titleLetterSpacing:D,titleWordSpacing:J,titleTextAppearance:q,subtitleFontFamily:S,subtitleFontSettings:R,subtitleFontSize:F,subtitleLineHeight:N,subtitleLetterSpacing:I,subtitleWordSpacing:B,subtitleTextAppearance:ie,lightboxCounterFontFamily:Q,lightboxCounterFontSettings:oe,lightboxCounterFontSize:G,lightboxCounterLineHeight:M,lightboxCounterLetterSpacing:re,lightboxCounterWordSpacing:Le,lightboxCounterTextAppearance:ce}=e,fe={fontSettings:{fontFamily:w,fontWeight:(H==null?void 0:H.fontWeight)??400,fontStyle:(H==null?void 0:H.fontStyle)??"normal"},fontSize:L??.01,lineHeight:V,letterSpacing:D??0,wordSpacing:J??0,textAppearance:q,color:_},ne={...ht(Xe(fe,n))},v={fontSettings:{fontFamily:S,fontWeight:(R==null?void 0:R.fontWeight)??400,fontStyle:(R==null?void 0:R.fontStyle)??"normal"},fontSize:F??.01,lineHeight:N,letterSpacing:I??0,wordSpacing:B??0,textAppearance:ie,color:$},k={...ht(Xe(v,n))},K={fontSettings:{fontFamily:Q,fontWeight:(oe==null?void 0:oe.fontWeight)??400,fontStyle:(oe==null?void 0:oe.fontStyle)??"normal"},fontSize:G??.01,lineHeight:M,letterSpacing:re??0,wordSpacing:Le??0,textAppearance:ce,color:A},te={...ht(Xe(K,n))},ee=E.buildColorVars(a,{titleColor:_,subtitleColor:$,lightboxCounterColor:A},Gc,Yc),de=`${s&&s!=="default"?`${a}-state-${s}`:""}`.trim(),Se=C===0?1/0:C,ye=(t??[]).slice(0,Se),ue=p.entryWidth??.2,j=(h==null?void 0:h.display)==="Cover",Y=(h==null?void 0:h.ratioValue)??"1:1",z=(h==null?void 0:h.reversed)??!1,[le,xe]=Y.split(":").map(Number),Ce=z?xe:le,Ie=z?le:xe,Ne=`${Ce} / ${Ie}`,Ze=Ce>=Ie,ve={objectFit:j?"cover":"contain",pointerEvents:"auto",...j&&{aspectRatio:Ne,width:Ze?"100%":"auto",height:Ze?"auto":"100%"}},[ke,He]=u.useState("ltr"),[Fe,Be]=u.useState(0),Oe=u.useRef(null);u.useEffect(()=>{const Ee=Oe.current;if(!Ee)return;const Je=new ResizeObserver(Qe=>{Be(Math.round(Qe[0].contentRect.width))});return Je.observe(Ee),()=>Je.disconnect()},[]);const Yt=(()=>{const Ee={...ee},Je=Oe.current?getComputedStyle(Oe.current).getPropertyValue("--cntrl-article-width").trim():"";return Je&&(Ee["--cntrl-article-width"]=Je),Ee})(),[bt,nt]=u.useState(!1),[At,be]=u.useState([]),[lt,ct]=u.useState(0),[dt,xt]=u.useState(null),Xt=(Ee,Je,Qe)=>{if(n&&!o||m==="Off")return;const ze=Ee.currentTarget.getBoundingClientRect();xt({top:ze.top,left:ze.left,width:ze.width,height:ze.height}),be(Je),ct(Qe),nt(!0)};return u.useEffect(()=>{if(!bt||m!=="On"||typeof document>"u")return;const Ee=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=Ee}},[bt,m]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:Kc(a)}}),l.jsx("div",{style:ee,children:l.jsx("div",{ref:Oe,className:`${a}-wrapper ${a}-type-${d} ${de}`.trim(),style:{gridTemplateColumns:`repeat(${p.columnsCount}, minmax(0, 1fr))`,rowGap:E.scalingValue(y??0,n),columnGap:E.scalingValue(p.horizontalGap??0,n),width:E.scalingValue(p.wrapperWidth??0,n)},children:ye.map((Ee,Je)=>{var Qe,ze;return l.jsx("div",{className:`${a}-item`.trim(),children:l.jsx("div",{className:i?`${a}-item-inner`:`${a}-item-inner-hidden`,style:{width:(T??0)>100?`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`:E.scalingValue(ue??0,n)},children:l.jsxs("a",{href:(((Qe=Ee.link)==null?void 0:Qe.length)??0)>0&&m==="Off"?Ee.link:void 0,target:"_blank",className:`${a}-item-image-link`,children:[l.jsx("div",{className:`${a}-item-image-wrapper`,style:{width:E.scalingValue(ue??0,n),height:E.scalingValue(ue??0,n)},children:(((ze=Ee.image)==null?void 0:ze.length)??0)===0?null:W==="Off"?l.jsx("img",{src:Ee.image[0].url,alt:Ee.image[0].name,className:`${a}-item-image`.trim(),style:ve,onClick:Ke=>Xt(Ke,Ee.image.map(me=>me.url),0)}):l.jsx(li,{className:`${a}-item-slider`,options:{arrows:!1,pagination:!1,drag:!1,perPage:1,autoplay:!0,interval:x*1e3,width:"100%",height:"100%",speed:500,type:f==="Fade"?"fade":"loop",rewind:f==="Fade",pauseOnHover:!1,pauseOnFocus:!1,direction:f==="Fade"?"ltr":b!=="Random"?b==="Horizontal"?"ltr":"ttb":ke},onMoved:Ke=>{if(b!=="Random"||f==="Fade")return;const me=Math.random()>.5?Math.random()>.5?"rtl":"ltr":Math.random()>.5?"btt":"ttb";He(me),setTimeout(()=>{Ke.refresh()},0)},children:Ee.image.map((Ke,me)=>l.jsx(ci,{children:l.jsx("img",{src:Ke.url,alt:Ke.name,className:`${a}-item-image`.trim(),style:ve,onClick:qe=>Xt(qe,Ee.image.map(Ue=>Ue.url),me)})},me))},`${f}-${ue}-${b}-${x}-${Fe}-${c}`)}),l.jsx("div",{"data-controls":i?"titleMarginTop":void 0,className:i?`${a}-control`:void 0,style:{height:E.scalingValue(O??0,n),width:E.scalingValue(ue*T/100,n)}}),l.jsx("p",{className:`${a}-item-title`.trim(),style:{width:`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`,...ne},children:Ee.title}),d==="B"&&l.jsx("div",{"data-controls":i?"subtitleMarginTop":void 0,className:i?`${a}-control`:void 0,style:{height:E.scalingValue(P??0,n),width:E.scalingValue(ue*T/100,n)}}),d==="B"&&l.jsx("p",{className:`${a}-item-subtitle`.trim(),style:{width:`calc(${E.scalingValue(ue??0,n)} * (${T} / 100))`,...k},children:Ee.subtitle})]})})},Je)})})}),(!n||o)&&bt&&typeof document<"u"&&m==="On"&&er.createPortal(l.jsx("div",{style:Yt,"data-selection":"none",children:l.jsx(qc,{images:At,index:lt,imageDisplay:h.display,originRect:dt,reverseClose:W==="Off",onClose:()=>nt(!1),onPrev:()=>ct(Ee=>(Ee-1+At.length)%At.length),onNext:()=>ct(Ee=>(Ee+1)%At.length),counterClassName:`${a}-lightbox-counter`.trim(),counterStyle:te})}),document.body)]})}const Gc={titleColor:"title-color",subtitleColor:"subtitle-color",lightboxCounterColor:"lightbox-counter-color"},Yc=["hover","focus","filled","success","error"],Xc=`import { Splide, SplideSlide } from '@splidejs/react-splide';
|
|
3727
3737
|
import '@splidejs/react-splide/css/core';
|
|
3728
3738
|
import { CommonComponentProps } from '../props';
|
|
3729
3739
|
import { buildColorVars, getFormFieldValidationError, scalingValue, useScopedStyles } from '../utils/index';
|
|
@@ -4065,7 +4075,6 @@ function Lightbox({ images, index, imageDisplay, originRect, reverseClose, onClo
|
|
|
4065
4075
|
|
|
4066
4076
|
export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, metadata, activeEvent, layoutId }: GridProps) {
|
|
4067
4077
|
const { prefix: P } = useScopedStyles();
|
|
4068
|
-
const showControls = Boolean(isEditMode);
|
|
4069
4078
|
const {
|
|
4070
4079
|
type = 'A',
|
|
4071
4080
|
gridLayout,
|
|
@@ -4186,6 +4195,7 @@ export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, m
|
|
|
4186
4195
|
|
|
4187
4196
|
const imageStyle: React.CSSProperties = {
|
|
4188
4197
|
objectFit: isCover ? 'cover' : 'contain',
|
|
4198
|
+
pointerEvents: 'auto',
|
|
4189
4199
|
...(isCover && {
|
|
4190
4200
|
aspectRatio,
|
|
4191
4201
|
width: isLandscape ? '100%' : 'auto',
|
|
@@ -4327,16 +4337,16 @@ export function Grid({ settings, content, isEditor, isPreviewMode, isEditMode, m
|
|
|
4327
4337
|
}
|
|
4328
4338
|
</div>
|
|
4329
4339
|
<div
|
|
4330
|
-
data-controls=
|
|
4331
|
-
className={\`\${P}-control\`}
|
|
4340
|
+
data-controls={isEditMode ? 'titleMarginTop' : undefined}
|
|
4341
|
+
className={isEditMode ? \`\${P}-control\` : undefined}
|
|
4332
4342
|
style={{ height: scalingValue(titleMarginTop ?? 0, isEditor), width: scalingValue(size * textBoxWidth / 100, isEditor) }}
|
|
4333
4343
|
/>
|
|
4334
4344
|
<p className={\`\${P}-item-title\`.trim()} style={{ width: \`calc(\${scalingValue(size ?? 0, isEditor)} * (\${textBoxWidth} / 100))\`, ...titleFieldCss }}>
|
|
4335
4345
|
{item.title}
|
|
4336
4346
|
</p>
|
|
4337
|
-
{type === 'B' &&
|
|
4338
|
-
data-controls=
|
|
4339
|
-
className={\`\${P}-control\`}
|
|
4347
|
+
{type === 'B' && <div
|
|
4348
|
+
data-controls={isEditMode ? 'subtitleMarginTop' : undefined}
|
|
4349
|
+
className={isEditMode ? \`\${P}-control\` : undefined}
|
|
4340
4350
|
style={{ height: scalingValue(subtitleMarginTop ?? 0, isEditor), width: scalingValue(size * textBoxWidth / 100, isEditor) }}
|
|
4341
4351
|
/>}
|
|
4342
4352
|
{type === 'B' && <p className={\`\${P}-item-subtitle\`.trim()} style={{ width: \`calc(\${scalingValue(size ?? 0, isEditor)} * (\${textBoxWidth} / 100))\`, ...subtitleFieldCss }}>
|
|
@@ -4434,11 +4444,11 @@ const COLOR_VAR_MAP: Record<ColorKeys, string> = {
|
|
|
4434
4444
|
};
|
|
4435
4445
|
|
|
4436
4446
|
const STATE_KEYS = ['hover', 'focus', 'filled', 'success', 'error'] as const;
|
|
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`
|
|
4447
|
+
`,Po={fontSettings:{type:"object",display:{type:"font-settings-weight"},properties:{fontWeight:{type:"number"},fontStyle:{type:"string"}}}},Zc=["titleColor","subtitleColor","lightboxCounterColor"],Jc={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:{...Po.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:{...Po.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:{...Po.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:[...Zc],panelIds:["general","typeStyle"],stateItems:{default:["titleColor","subtitleColor","lightboxCounterColor"]}}},Qc={element:Uc,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:Jc,sourceCode:Xc};function Jn(e){return`calc(var(--cntrl-article-width, 100vw) * ${e/1440})`}function ed(e){return String(e??"").trim().length>0}function td(e,t,n,o,i,r,s){const c=E.scalingValue(r,s),a=E.scalingValue(0,s),d=e===0,p=e===t-1&&!i;return{borderTopWidth:d&&n?c:a,borderBottomWidth:!p||o?c:a}}function nd(e,t,n){const o=E.scalingValue(t,n),i=E.scalingValue(0,n);return{borderTopWidth:i,borderBottomWidth:e?o:i}}const ji=10;function od(e){return`
|
|
4438
4448
|
.${e}-wrapper {
|
|
4439
4449
|
display: grid;
|
|
4440
4450
|
align-items: start;
|
|
4441
|
-
min-height: ${
|
|
4451
|
+
min-height: ${Jn(48)};
|
|
4442
4452
|
position: relative;
|
|
4443
4453
|
overflow: visible;
|
|
4444
4454
|
box-sizing: border-box;
|
|
@@ -4560,7 +4570,7 @@ a.${e}-list-item {
|
|
|
4560
4570
|
flex-shrink: 0;
|
|
4561
4571
|
overflow: visible;
|
|
4562
4572
|
box-sizing: border-box;
|
|
4563
|
-
min-width: ${
|
|
4573
|
+
min-width: ${Jn(50)};
|
|
4564
4574
|
position: relative;
|
|
4565
4575
|
display: flex;
|
|
4566
4576
|
align-items: flex-start;
|
|
@@ -4568,7 +4578,7 @@ a.${e}-list-item {
|
|
|
4568
4578
|
|
|
4569
4579
|
.${e}-list-col-last {
|
|
4570
4580
|
flex: 1 1 auto;
|
|
4571
|
-
min-width: ${
|
|
4581
|
+
min-width: ${Jn(50)};
|
|
4572
4582
|
}
|
|
4573
4583
|
|
|
4574
4584
|
.${e}-list-col-title {
|
|
@@ -4637,6 +4647,12 @@ a.${e}-list-item {
|
|
|
4637
4647
|
transform: translateY(-50%);
|
|
4638
4648
|
}
|
|
4639
4649
|
|
|
4650
|
+
.${e}-wrapper.${e}-type-b .${e}-padding-control-handle[data-controls-variant="row-padding"][data-controls-axis="y"]::after,
|
|
4651
|
+
.${e}-wrapper.${e}-type-b .${e}-padding-control-handle[data-controls-variant="column-padding"][data-controls-axis="y"]::after {
|
|
4652
|
+
left: 50%;
|
|
4653
|
+
transform: translate(-50%, -50%);
|
|
4654
|
+
}
|
|
4655
|
+
|
|
4640
4656
|
.${e}-row-padding-handle {
|
|
4641
4657
|
width: 100%;
|
|
4642
4658
|
flex-shrink: 0;
|
|
@@ -4799,7 +4815,7 @@ a.${e}-list-item {
|
|
|
4799
4815
|
overflow-wrap: anywhere;
|
|
4800
4816
|
word-break: break-word;
|
|
4801
4817
|
}
|
|
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';
|
|
4818
|
+
`}const Nt=["AColumn","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],di=["AColumn","BColumn","CColumn","DColumn","EColumn"],Et="cutLabel",xo=[...di,Et],ui=["A","B","C","D","E"];function Hr(e){return`${e}ColumnVerticalAlign`}const Vo=["Top","Center","Bottom"];function id(e){const t=String(e??"Top").trim();return t.toLowerCase().startsWith("baseline")?!1:t==="Top"||t==="Center"||t==="Bottom"}function rd(e){const t=String(e??"").trim();if(!t.toLowerCase().startsWith("baseline"))return null;const n=t.slice(-1).toUpperCase();return ui.includes(n)?n:null}function Br(e,t,n){const o=rd(e);return o?o===t?!1:id(n[Hr(o)]):!0}function En(e){const t=String(e??"Top").trim();if(t.toLowerCase().startsWith("baseline")){const n=t.slice(-1).toUpperCase();return ui.includes(n)?{kind:"baseline",anchorLetter:n}:{kind:"top"}}return t==="Center"?{kind:"center"}:t==="Bottom"?{kind:"bottom"}:{kind:"top"}}function ad(e,t,n){if(Or(e,t,n))return En(e);const o=En(e);return o.kind==="baseline"?{kind:"top"}:o}function sd(e){const t=En(e);return t.kind==="baseline"?{kind:"top"}:t}function Or(e,t,n){return Br(e,n,t)?En(e).kind==="baseline":!1}function ld(e){const t={};let n=!1;for(const o of ui){const i=Hr(o),r=e[i];if(e.type==="B"){const s=String(r??"Top").trim();s!=="Top"&&s!=="Center"&&s!=="Bottom"&&(t[i]="Top",n=!0);continue}Br(r,o,e)||(t[i]="Top",n=!0)}return n?t:null}function cd(e){return e==="center"?{flex:"0 0 auto",marginTop:"auto",marginBottom:"auto"}:e==="bottom"?{flex:"0 0 auto",marginTop:"auto"}:{}}function dd(e){const t=En(e).kind;return t==="baseline"?"center":t}function ud(e){return e==="right"?"flex-end":e==="center"?"center":"flex-start"}function zi(e){return e==="center"?"center":e==="bottom"?"flex-end":"flex-start"}function pd(e,t){const n=document.createElement("i");n.className=t,n.setAttribute("aria-hidden","true"),e.prepend(n);const{top:o}=e.getBoundingClientRect(),{bottom:i}=n.getBoundingClientRect(),r=i-o;return n.remove(),r}function _o(e,t,n,o){const i=e.titleEl;if(!i)return 0;const r=i.closest(`.${n}`);if(!r)return 0;const s=pd(i,o);if(e.kind==="baseline")return i.getBoundingClientRect().top-t+s;const c=r.getBoundingClientRect(),a=i.getBoundingClientRect().height;let d=0;return e.kind==="center"?d=(c.height-a)/2:e.kind==="bottom"&&(d=c.height-a),c.top-t+d+s}function md(e,t,n){const o=e.getBoundingClientRect().height;return o<=0?0:(t.forEach(i=>{const r=i.querySelector(`.${n}`);r&&(r.style.minHeight=`${o}px`,r.style.height=`${o}px`)}),e.offsetHeight,o)}function gd(e,t){return!e||!t?(e&&(e.style.transform=""),0):(e.style.transform=`translateY(${t}px)`,t)}const hd={AColumn:"AColumn",BColumnWidth:"BColumn",CColumnWidth:"CColumn",DColumnWidth:"DColumn",EColumnWidth:"EColumn"};function Te(e,t){return`${e}${t.replace(/^text/,"Text")}`}const fd={AColumn:"A",BColumn:"B",CColumn:"C",DColumn:"D",EColumn:"E",cutLabel:"CUT"};function yd(e){return[Te(e,"textFontFamily"),Te(e,"textFontSettings"),{type:"row",items:[Te(e,"textFontSize"),Te(e,"textLineHeight"),Te(e,"textLetterSpacing"),Te(e,"textWordSpacing")]},Te(e,"textTextAlign"),Te(e,"textTextAppearance"),`${e}VerticalAlign`]}function vd(){return{type:"tab",id:"listColumnTextStyle",tabs:Object.fromEntries(xo.map(e=>[fd[e],yd(e)]))}}function ao(e,t){const n=o=>{const i=Te(t,o);return e[i]};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===Et?"center":"left"),textTextAppearance:n("textTextAppearance"),textColor:e.textColor}}function Ki(e,t){var o,i;const n={fontSettings:{fontFamily:e.textFontFamily,fontWeight:((o=e.textFontSettings)==null?void 0:o.fontWeight)??400,fontStyle:((i=e.textFontSettings)==null?void 0:i.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 ht(Xe(n,t))}function qi(e,t,n,o){const i=ao(e,t),r=i.textFontSize??.01,s=i.textLineHeight;return s!==void 0&&s<r?`${n} ${o}`:n}function Ui(e,t,n,o){const i=ao(e,t),r=i.textFontSize??.01,s=i.textLineHeight;return s===void 0||s>=r?{}:{[`--${n}-title-leading-gap`]:E.scalingValue((r-s)/2,o)}}const at=["AColumnWidth","BColumnWidth","CColumnWidth","DColumnWidth","EColumnWidth"],cn=["AColumnPaddingLeft","BColumnPaddingLeft","CColumnPaddingLeft","DColumnPaddingLeft","EColumnPaddingLeft"],dn=["AColumnPaddingRight","BColumnPaddingRight","CColumnPaddingRight","DColumnPaddingRight","EColumnPaddingRight"],un=["AColumnPaddingBottom","BColumnPaddingBottom","CColumnPaddingBottom","DColumnPaddingBottom","EColumnPaddingBottom"],bd={textColor:"text-color",backgroundColor:"background-color",dividerColor:"divider-color",textHoverColor:"text-hover-color",backgroundHoverColor:"background-hover-color",dividerHoverColor:"divider-hover-color"},xd=["hover","focus","filled","success","error"],Gi=.004,tn=.004,Ao=tn,Yi=12,pi=50,Pn=1440,_n=pi/Pn;function Vr(e){const t=typeof e=="number"&&e>0?e:Pn;return pi/t}function Cd(e,t){const n={position:"absolute",width:Yi,height:Yi,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 St({P:e,className:t,areaStyle:n,hitPlacement:o,...i}){return l.jsx("div",{className:t,style:{...n,pointerEvents:"none"},...i,children:l.jsx("div",{style:Cd(e,o)})})}function Sd(e){let t=e??null;for(;t;){const n=t.style.getPropertyValue("--cntrl-article-width").trim();if(n){const i=parseFloat(n);if(Number.isFinite(i)&&i>0)return i}const o=getComputedStyle(t).getPropertyValue("--cntrl-article-width").trim();if(o){const i=parseFloat(o);if(Number.isFinite(i)&&i>0)return i}t=t.parentElement}return Pn}const Dr={AColumnWidth:.02,BColumnWidth:.02,CColumnWidth:.02,DColumnWidth:.02,EColumnWidth:.02};function Qn(e){const t=typeof e.wrapperWidth=="number"?e.wrapperWidth:1;return Math.max(0,t)}function wd(e,t=1){const n=t/e;return Object.fromEntries(at.map(o=>[o,n]))}function $d(){return Object.fromEntries([...cn.map(e=>[e,0]),...dn.map(e=>[e,0])])}function Td(){return Object.fromEntries(un.map(e=>[e,0]))}function qn(e){return Object.fromEntries(at.map(t=>[t,typeof e[t]=="number"?e[t]:Dr[t]]))}function jr(e,t,n){const o=e-_n,i=t+n;if(i<=0||i<=o)return{paddingLeft:t,paddingRight:n};if(o<=0)return{paddingLeft:0,paddingRight:0};const r=o/i;return{paddingLeft:t*r,paddingRight:n*r}}function eo(e,t,n){const o=mi(e,t,n);if(e<=0)return[];const i=o.slice(0,e-1).reduce((r,s)=>r+s,0);return[...o.slice(0,e-1),Math.max(0,t-i)]}function Ld(e,t,n){const o={};for(let i=0;i<e;i+=1){const r=cn[i],s=dn[i],c=typeof n[r]=="number"?n[r]:0,a=typeof n[s]=="number"?n[s]:0,d=jr(t[i]??0,c,a);d.paddingLeft!==c&&(o[r]=d.paddingLeft),d.paddingRight!==a&&(o[s]=d.paddingRight)}return o}function mi(e,t,n){if(e<=0)return[];const o=at.slice(0,e).map(d=>n[d]);if(e===1)return o;const i=o.slice(0,e-1),s=i.reduce((d,p)=>d+p,0)+_n;if(t>=s)return o;const c=[...i];let a=s-t;for(let d=c.length-1;d>=0&&a>0;d-=1){const p=c[d]-_n;if(p<=0)continue;const T=Math.min(a,p);c[d]-=T,a-=T}return[...c,o[e-1]]}function Ed(e,t,n){if(e<=1)return{};const o=mi(e,t,n),i={};for(let r=0;r<e-1;r+=1){const s=at[r];o[r]!==n[s]&&(i[s]=o[r])}return i}function Xi(e){return Array.isArray(e.columnsOrder)&&e.columnsOrder.length>0?e.columnsOrder:[...Nt]}function Pd(e,t){return e.length!==t.length?!1:e.every((n,o)=>n===t[o])}function _d(e,t,n,o){const i=Math.min(o,e.length,at.length),r={};for(let s=0;s<i;s+=1){const c=e[s],a=t.indexOf(c);if(a===-1)continue;const d=at[a],p=cn[a],T=dn[a],y=un[a],C=at[s],m=cn[s],h=dn[s],W=un[s],x=n[d],b=n[p],f=n[T],O=n[y];typeof x=="number"&&(r[C]=x),typeof b=="number"&&(r[m]=b),typeof f=="number"&&(r[h]=f),typeof O=="number"&&(r[W]=O)}return r}function Ad(e,t,n){const o=ld(e);o&&(e={...e,...o});const i=Vr(n==null?void 0:n.designWidth),r=e.columns,s=t.columns,c=Qn(e),a=Qn(t),d=e.type==="B"||e.type===void 0&&t.type==="B",p=typeof r=="number"?r:typeof s=="number"?s:Nt.length,T=f=>{if(d)return f;const O=qn({...t,...f}),P=Qn(f),_=eo(p,P,O),$=Ld(p,_,{...t,...f});return Object.keys($).length===0?f:{...f,...$}};if(typeof r=="number"&&r!==s){const f={...e,...wd(r,c),...$d()};if(d)for(const O of un)typeof t[O]=="number"&&(f[O]=t[O]);else Object.assign(f,Td());return f}const y=Xi(e),C=Xi(t);if(!Pd(y,C))return T({...e,..._d(y,C,t,p)});if(c<a&&typeof p=="number"&&!d){const f=qn({...t,...e});return T({...e,...Ed(p,c,f)})}if(d){const f=typeof e.textPaddingLR=="number"?e.textPaddingLR:0,O=Math.max(0,(c-i)/2);return f>O?{...e,textPaddingLR:O}:e}const m=qn({...t,...e}),h=eo(p,a,qn(t)),x=eo(p,c,m).some((f,O)=>f<(h[O]??f)),b=at.some(f=>{const O=e[f],P=t[f];return typeof O=="number"&&typeof P=="number"&&O!==P});return x||b?T(e):e}function Rd(e,t,n,o){const i=t.slice(0,e).reduce((s,c)=>s+c,0),r=n.slice(e+1,t.length-1).reduce((s,c)=>s+c,0);return Math.max(_n,o-i-r-_n)}function Wd(e,t){return Math.random()*(t-e)+e}function Id(e){return Object.fromEntries(at.map(t=>[t,typeof e[t]=="number"?e[t]:Dr[t]]))}function Ro(e,t,n=0){return Object.fromEntries(t.map(o=>[o,typeof e[o]=="number"?e[o]:n]))}function kd(e,t,n,o,i,r){return e.slice(0,t).map((s,c)=>{const a=cn[c],d=dn[c],p=un[c];return{key:s,textPrefix:hd[s],widthKey:at[c],width:n[at[c]],paddingLeftKey:a,paddingRightKey:d,paddingBottomKey:p,paddingLeft:o[a],paddingRight:i[d],paddingBottom:r[p]}})}function Fd({settings:e,content:t,isEditor:n,isPreviewMode:o,isEditMode:i,activeEvent:r,layoutId:s,onUpdateSettings:c}){const{prefix:a}=E.useScopedStyles(),d=!!i,{columns:p,type:T,wrapperWidth:y,entriesCount:C,cellMinHeight:m,dividerWidth:h,showVisibility:W,cut:x,showCut:b,cutCellMinHeight:f,cutLabel:O,imageSize:P,imageOnHover:_,entryHoverEffect:$,rowPaddingTop:A,rowPaddingBottom:w,rowPaddingTopB:H,columnsOrder:L,textPaddingLR:V,textColor:D,backgroundColor:J,dividerColor:q,textHoverColor:S,backgroundHoverColor:R,dividerHoverColor:F}=e,[N,I]=u.useState(void 0),[B,ie]=u.useState(null),Q=_==="On"&&(!n||o),oe=(x??0)>0,G=T==="B",M=u.useRef(null),re=u.useRef(null),[Le,ce]=u.useState(null),[fe,We]=u.useState(Pn),ne=Vr(fe),v=Math.max(0,((y??0)-ne)/2),g=Math.min(V??0,v),k=Math.max(g,tn),K=((y??0)+ne)/2;u.useLayoutEffect(()=>{if(!n){We(Pn);return}const se=()=>{We(Sd(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,s]),u.useEffect(()=>{I(void 0)},[x,b,t,C]),u.useEffect(()=>{n&&!o&&I(void 0)},[n,o]);const U=E.buildColorVars(a,{textColor:D,backgroundColor:J,dividerColor:q,textHoverColor:S,backgroundHoverColor:R,dividerHoverColor:F},bd,xd),te=r&&r!=="default"?`${a}-state-${r}`:"",Z=`${!n||o?$==="Default"?`${a}-entry-hover-default`:$==="Blinds"?`${a}-entry-hover-blinds`:"":""} ${te}`.trim(),de=(W==null?void 0:W[0])??!1,Se=(W==null?void 0:W[1])??!1,ye=u.useRef(e),ue=u.useRef(s);u.useEffect(()=>{if(!c||!n){ye.current=e,ue.current=s;return}if(ue.current!==s){ye.current=e,ue.current=s;return}const se=ye.current;if(!(se!==e))return;const ge=Ad(e,se,{designWidth:fe});ye.current=e,ge!==e&&c(ge)},[e,c,n,s,fe]);const j=u.useMemo(()=>Id(e),[e.AColumnWidth,e.BColumnWidth,e.CColumnWidth,e.DColumnWidth,e.EColumnWidth]),Y=u.useMemo(()=>Ro(e,cn),[e.AColumnPaddingLeft,e.BColumnPaddingLeft,e.CColumnPaddingLeft,e.DColumnPaddingLeft,e.EColumnPaddingLeft]),z=u.useMemo(()=>Ro(e,dn),[e.AColumnPaddingRight,e.BColumnPaddingRight,e.CColumnPaddingRight,e.DColumnPaddingRight,e.EColumnPaddingRight]),le=u.useMemo(()=>Ro(e,un),[e.AColumnPaddingBottom,e.BColumnPaddingBottom,e.CColumnPaddingBottom,e.DColumnPaddingBottom,e.EColumnPaddingBottom]),xe=u.useMemo(()=>Array.isArray(L)&&L.length>0?L:[...Nt],[L]),Ce=u.useMemo(()=>kd(xe,p,j,Y,z,le),[xe,p,j,Y,z,le]),Ie=Qn(e),Ne=u.useMemo(()=>at.slice(0,p).map(se=>j[se]),[p,j]),Ze=u.useMemo(()=>mi(p,Ie,j),[p,Ie,j]),ve=u.useMemo(()=>eo(p,Ie,j),[p,Ie,j]),ke=u.useMemo(()=>Ce.map((se,pe)=>jr(ve[pe]??0,se.paddingLeft,se.paddingRight)),[Ce,ve]),He=u.useMemo(()=>{const se=C===0?1/0:C;return(t??[]).slice(0,se).map((ge,_e)=>({id:_e,cells:Object.fromEntries(Nt.map(Ge=>[Ge,ge[Ge]??""])),image:ge.image,link:ge.link}))},[t,C]),Fe=oe?N??x:He.length,Be=u.useMemo(()=>oe?He.slice(0,Fe):He,[He,oe,Fe]),Oe=oe&&Fe<He.length,Yt=Be.length>1||Oe,bt=[de?`${a}-divider-top`:"",Se||Yt?`${a}-divider-bottom`:""].filter(Boolean).join(" "),nt=!n||o,At=()=>{if(!nt)return;const se=N??x;if(!b){I(He.length);return}I(Math.min(se+b,He.length))},be=se=>E.scalingValue(se,n??!1),lt=G?H??0:A??0,ct=w??0,dt=m??0,xt=(lt+dt+ct)/2,Xt=Math.max(ct,Ao),Ee=Le!=null?`${Le/2}px`:be(xt),Je=G?"rowPaddingTopB":"rowPaddingTop",Qe=Ce[0],ze=Ce[Ce.length-1],Ke=ke[0],me=ke[ke.length-1],qe=Qe&&Ke?Math.max(Ke.paddingLeft,tn):0,Ue=ze&&me?Math.max(me.paddingRight,tn):0,et=Ie,Ct=se=>{const pe=M.current;if(!pe)return{x:0,y:0};const ge=pe.getBoundingClientRect();return{x:se.clientX-ge.left+ji,y:se.clientY-ge.top+ji}},Kr=(se,pe)=>{if(!Q)return;const ge=se.image;if(!(ge!=null&&ge.url)){ie(null);return}const{x:_e,y:Ge}=Ct(pe),ot=(P==null?void 0:P.min)??80,we=(P==null?void 0:P.max)??320,Ve=(B==null?void 0:B.rowId)===se.id?B.widthPx:Wd(ot,we);ie({rowId:se.id,url:ge.url,objectFit:ge.objectFit??"cover",widthPx:Ve,x:_e,y:Ge})},qr=se=>{if(!Q||!B)return;const{x:pe,y:ge}=Ct(se);ie(_e=>!_e||_e.x===pe&&_e.y===ge?_e:{..._e,x:pe,y:ge})},Ur=()=>{ie(null)},Gr=()=>{Q&&ie(null)};u.useLayoutEffect(()=>{if(!d||G){ce(null);return}const se=re.current;if(!se){ce(null);return}const pe=()=>{ce(se.getBoundingClientRect().height)};pe();const ge=new ResizeObserver(pe);return ge.observe(se),()=>ge.disconnect()},[d,G,Be,lt,ct,dt,t,e,Ce,ve,fe]);const gi=u.useMemo(()=>!G&&di.some(se=>{const pe=se.charAt(0),ge=e[`${se}VerticalAlign`];return Or(ge,e,pe)}),[G,e,e.AColumnVerticalAlign,e.BColumnVerticalAlign,e.CColumnVerticalAlign,e.DColumnVerticalAlign,e.EColumnVerticalAlign]);return u.useLayoutEffect(()=>{var ot;const se=M.current;if(!se)return;const pe=()=>{se.querySelectorAll("[data-list-col]").forEach(we=>{we.style.transform="";const Ve=we.querySelector(`.${a}-list-col`);Ve&&(Ve.style.minHeight="",Ve.style.height="");const gt=we.querySelector(`.${a}-list-col-title`);gt&&(gt.style.transform="")})};if(G||!gi){pe();return}const ge=()=>{se.querySelectorAll("[data-list-row]").forEach(we=>{const Ve=Array.from(we.querySelectorAll("[data-list-col]"));Ve.forEach(Pe=>{Pe.style.transform="";const tt=Pe.querySelector(`.${a}-list-col`);tt&&(tt.style.minHeight="",tt.style.height="");const De=Pe.querySelector(`.${a}-list-col-title`);De&&(De.style.transform="")}),md(we,Ve,`${a}-list-col`),we.offsetHeight;const gt=we.getBoundingClientRect().top,Rt=`${a}-baseline-probe`,Zt=new Map,Hn=Ve.map(Pe=>{const tt=Pe.querySelector(`.${a}-list-col-title`),De={el:Pe,titleEl:tt,letter:Pe.getAttribute("data-col-letter")??"",kind:Pe.getAttribute("data-valign")??"top",anchor:Pe.getAttribute("data-valign-anchor")};return Zt.set(De.letter,De),De}),fn=new Map,Bn=(Pe,tt)=>{const De=fn.get(Pe.letter);if(De!==void 0)return De;const On=Pe.anchor?Zt.get(Pe.anchor):void 0;if(Pe.kind!=="baseline"||!On||tt.has(Pe.letter)){const fi=_o(Pe,gt,`${a}-list-col`,Rt);return fn.set(Pe.letter,fi),fi}tt.add(Pe.letter);const Yr=Bn(On,tt);tt.delete(Pe.letter);const Xr=_o(Pe,gt,`${a}-list-col`,Rt),Zr=Yr-Xr;gd(Pe.titleEl,Zr);const hi=_o(Pe,gt,`${a}-list-col`,Rt);return fn.set(Pe.letter,hi),hi};Hn.forEach(Pe=>Bn(Pe,new Set))})};ge();const _e=new ResizeObserver(()=>ge());_e.observe(se);let Ge=!1;return typeof document<"u"&&((ot=document.fonts)!=null&&ot.ready)&&document.fonts.ready.then(()=>{Ge||ge()}),()=>{Ge=!0,_e.disconnect(),pe()}},[gi,G,e,t,fe,Be,ve]),l.jsxs(l.Fragment,{children:[l.jsx("style",{dangerouslySetInnerHTML:{__html:od(a)}}),l.jsx("div",{style:U,children:l.jsxs("div",{ref:M,className:`${a}-wrapper ${Z}${bt?` ${bt}`:""}${G?` ${a}-type-b`:""}`.trim(),style:{width:E.scalingValue(y??0,n),...!G&&d?{[`--${a}-first-entry-handle-top`]:Ee}:{}},onMouseMove:Q?qr:void 0,onMouseLeave:Q?Ur:void 0,children:[l.jsxs("div",{style:{width:"100%",position:"relative"},children:[Be.map((se,pe)=>{var ot;const ge=(((ot=se.link)==null?void 0:ot.length)??0)>0,_e=ge?"a":"div",Ge=td(pe,Be.length,de,Se,Oe,h??0,n??!1);return l.jsxs(_e,{ref:pe===0?we=>{re.current=we}:void 0,className:`${a}-list-item${ge?` ${a}-list-item-has-link`:""}`,...ge?{href:se.link,target:"_blank"}:{},style:Ge,onMouseEnter:Q?we=>Kr(se,we):void 0,children:[lt>0&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(lt)}}),l.jsxs("div",{className:`${a}-list-cols-row${G?"":` ${a}-list-cols-row-h`}${d&&pe===0&&G?` ${a}-list-cols-row-controls`:""}`,...G?{}:{"data-list-row":""},style:G?void 0:{minHeight:be(dt)},children:[Ce.map((we,Ve)=>{const gt=Ve===Ce.length-1,Rt=ke[Ve],Zt=we.paddingBottom,Hn=ed(se.cells[we.key]),fn=G&&Hn&&Zt>0,Bn=G?{minHeight:be(dt)}:{width:be(ve[Ve])},Pe=G?{paddingLeft:be(g),paddingRight:be(g)}:{paddingLeft:be(Rt.paddingLeft),paddingRight:be(Rt.paddingRight)},tt=we.textPrefix.charAt(0),De=G?sd(e[`${we.textPrefix}VerticalAlign`]):ad(e[`${we.textPrefix}VerticalAlign`],e,tt),On=G&&Hn&&d&&pe===0;return l.jsxs("div",{className:G?`${a}-list-col-wrap`:void 0,...G?{}:{"data-list-col":"","data-col-letter":tt,"data-valign":De.kind,...De.kind==="baseline"?{"data-valign-anchor":De.anchorLetter}:{}},children:[l.jsx("div",{className:`${a}-list-col${gt?` ${a}-list-col-last`:""}`,style:{...Pe,...Bn,...G?{justifyContent:zi(De.kind)}:{}},"data-test":we.width,children:l.jsx("span",{className:qi(e,we.textPrefix,`${a}-list-col-title`,`${a}-text-tight-leading`),style:{...Ki(ao(e,we.textPrefix),n),...Ui(e,we.textPrefix,a,n),...G?{}:cd(De.kind)},children:se.cells[we.key]??null})}),fn&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(Zt)}}),On&&l.jsx(St,{P:a,"data-controls":we.paddingBottomKey,"data-controls-static-handle":"","data-controls-axis":"y","data-controls-variant":"column-padding","data-controls-min":"0",className:`${a}-padding-control-handle`,hitPlacement:"center",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Math.max(Zt,Ao))}})]},we.key)}),d&&pe===0&&G&&l.jsxs(l.Fragment,{children:[l.jsx(St,{P:a,"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:`${a}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:0,width:be(k),height:"100%"}}),l.jsx(St,{P:a,"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:`${a}-text-padding-lr-handle`,hitPlacement:"center",areaStyle:{position:"absolute",top:0,left:be(Math.max(k,Ie-k)),width:be(k),height:"100%"}})]})]}),!G&&ct>0&&l.jsx("div",{className:`${a}-row-padding-handle`,style:{height:be(ct)}}),d&&pe===0&&!G&&l.jsx(St,{P:a,"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:`${a}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:be(Xt)}})]},se.id)}),d&&l.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:l.jsx(St,{P:a,"data-controls":Je,"data-controls-static-handle":"",...G?{}:{"data-controls-handle-left":"20"},"data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${a}-padding-control-handle`,hitPlacement:G?"center":"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:be(Math.max(lt,Ao))}})},"row-padding-handles"),d&&!G&&Qe&&ze&&l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(St,{P:a,"data-controls":Qe.paddingLeftKey,"data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(ve[0]-((Ke==null?void 0:Ke.paddingRight)??0)),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:be(qe),height:"100%"}}),l.jsx(St,{P:a,"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(ve[Ce.length-1]-((me==null?void 0:me.paddingLeft)??0)),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(et-Ue),width:be(Ue),height:"100%"}})]},"column-edge-padding-handles"),d&&!G&&Ce.slice(0,-1).map((se,pe)=>{const ge=Ce[pe+1],_e=Ze.slice(0,pe+1).reduce((gt,Rt)=>gt+Rt,0),Ge=ke[pe],ot=ke[pe+1],we=Math.max(Ge.paddingRight,tn),Ve=Math.max(ot.paddingLeft,tn);return l.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none"},children:[l.jsx(St,{P:a,"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(ve[pe]-Ge.paddingLeft),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e-we),width:be(we),height:"100%"}}),l.jsx(St,{P:a,"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(ve[pe+1]-ot.paddingRight),className:`${a}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:be(_e),width:be(Ve),height:"100%"}})]},`${se.paddingRightKey}-padding`)}),d&&!G&&Ce.slice(0,-1).map((se,pe)=>{const ge=Rd(pe,Ze,Ne,Ie),Ge=Ze.slice(0,pe+1).reduce((ot,we)=>ot+we,0)-Gi/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(pi),"data-controls-max-fraction":String(ge),"data-controls-variant":"column-width",className:`${a}-col-resize-handle`,style:{position:"absolute",top:"0px",left:be(Ge),width:be(Gi),height:"calc(100%)",pointerEvents:"auto"}})},`${se.widthKey}-junction`)})]}),Oe&&(()=>{const se=ao(e,Et),pe=dd(e.cutLabelVerticalAlign),ge=se.textTextAlign==="justify"||G;return l.jsx("button",{type:"button",className:`${a}-cut-item`,style:{minHeight:be(f??0),cursor:nt?"pointer":"default",...nd(Se,h??0,n??!1)},onClick:nt?At:void 0,onMouseEnter:Q?Gr:void 0,children:l.jsx("div",{className:`${a}-list-cols-row`,style:{...G?{paddingLeft:be(g),paddingRight:be(g)}:{},justifyContent:ud(se.textTextAlign),alignItems:zi(pe)},children:l.jsx("span",{className:qi(e,Et,`${a}-cut-label`,`${a}-text-tight-leading`),style:{...Ki(se,n),...Ui(e,Et,a,n),...ge?{width:"100%"}:{}},children:O})})})})(),Q&&B&&l.jsx("img",{className:`${a}-hover-image`,src:B.url,alt:"",style:{width:Jn(B.widthPx),objectFit:B.objectFit,left:B.x,top:B.y}})]})})]})}const Md=`import { useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
|
|
4803
4819
|
import { CommonComponentProps } from '../props';
|
|
4804
4820
|
import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';
|
|
4805
4821
|
import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';
|
|
@@ -5214,6 +5230,12 @@ a.\${P}-list-item {
|
|
|
5214
5230
|
transform: translateY(-50%);
|
|
5215
5231
|
}
|
|
5216
5232
|
|
|
5233
|
+
.\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle[data-controls-variant="row-padding"][data-controls-axis="y"]::after,
|
|
5234
|
+
.\${P}-wrapper.\${P}-type-b .\${P}-padding-control-handle[data-controls-variant="column-padding"][data-controls-axis="y"]::after {
|
|
5235
|
+
left: 50%;
|
|
5236
|
+
transform: translate(-50%, -50%);
|
|
5237
|
+
}
|
|
5238
|
+
|
|
5217
5239
|
.\${P}-row-padding-handle {
|
|
5218
5240
|
width: 100%;
|
|
5219
5241
|
flex-shrink: 0;
|
|
@@ -6589,6 +6611,12 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
6589
6611
|
setVisibleRowCount(undefined);
|
|
6590
6612
|
}, [cut, showCut, content, entriesCount]);
|
|
6591
6613
|
|
|
6614
|
+
useEffect(() => {
|
|
6615
|
+
if (isEditor && !isPreviewMode) {
|
|
6616
|
+
setVisibleRowCount(undefined);
|
|
6617
|
+
}
|
|
6618
|
+
}, [isEditor, isPreviewMode]);
|
|
6619
|
+
|
|
6592
6620
|
const colorVars = buildColorVars(P, {
|
|
6593
6621
|
textColor,
|
|
6594
6622
|
backgroundColor,
|
|
@@ -6599,12 +6627,13 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
6599
6627
|
}, COLOR_VAR_MAP, STATE_KEYS);
|
|
6600
6628
|
|
|
6601
6629
|
const stateClass = activeEvent && activeEvent !== 'default' ? \`\${P}-state-\${activeEvent}\` : '';
|
|
6602
|
-
const entryHoverClass =
|
|
6603
|
-
|
|
6630
|
+
const entryHoverClass = (!isEditor || isPreviewMode)
|
|
6631
|
+
? entryHoverEffect === 'Default'
|
|
6604
6632
|
? \`\${P}-entry-hover-default\`
|
|
6605
6633
|
: entryHoverEffect === 'Blinds'
|
|
6606
6634
|
? \`\${P}-entry-hover-blinds\`
|
|
6607
|
-
: ''
|
|
6635
|
+
: ''
|
|
6636
|
+
: '';
|
|
6608
6637
|
const wrapperStateClasses = \`\${entryHoverClass} \${stateClass}\`.trim();
|
|
6609
6638
|
const showDividerTop = showVisibility?.[0] ?? false;
|
|
6610
6639
|
const showDividerBottom = showVisibility?.[1] ?? false;
|
|
@@ -6771,7 +6800,11 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
6771
6800
|
showDividerBottom || hasBetweenItemDividers ? \`\${P}-divider-bottom\` : '',
|
|
6772
6801
|
].filter(Boolean).join(' ');
|
|
6773
6802
|
|
|
6803
|
+
const cutItemClickable = !isEditor || isPreviewMode;
|
|
6804
|
+
|
|
6774
6805
|
const handleShowMore = () => {
|
|
6806
|
+
if (!cutItemClickable) return;
|
|
6807
|
+
|
|
6775
6808
|
const currentVisible = visibleRowCount ?? cut;
|
|
6776
6809
|
if (!showCut) {
|
|
6777
6810
|
setVisibleRowCount(allRows.length);
|
|
@@ -7071,7 +7104,7 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7071
7104
|
onMouseMove={showHoverImage ? handleWrapperMouseMove : undefined}
|
|
7072
7105
|
onMouseLeave={showHoverImage ? handleWrapperMouseLeave : undefined}
|
|
7073
7106
|
>
|
|
7074
|
-
<div style={{ width: '100%' }}>
|
|
7107
|
+
<div style={{ width: '100%', position: 'relative' }}>
|
|
7075
7108
|
{visibleRows.map((row, rowIdx) => {
|
|
7076
7109
|
const hasLink = (row.link?.length ?? 0) > 0;
|
|
7077
7110
|
const RowElement = hasLink ? 'a' : 'div';
|
|
@@ -7194,12 +7227,11 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7194
7227
|
P={P}
|
|
7195
7228
|
data-controls={col.paddingBottomKey}
|
|
7196
7229
|
data-controls-static-handle=""
|
|
7197
|
-
data-controls-handle-left="20"
|
|
7198
7230
|
data-controls-axis="y"
|
|
7199
7231
|
data-controls-variant="column-padding"
|
|
7200
7232
|
data-controls-min="0"
|
|
7201
7233
|
className={\`\${P}-padding-control-handle\`}
|
|
7202
|
-
hitPlacement="
|
|
7234
|
+
hitPlacement="center"
|
|
7203
7235
|
areaStyle={{
|
|
7204
7236
|
position: 'absolute',
|
|
7205
7237
|
bottom: 0,
|
|
@@ -7285,71 +7317,18 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7285
7317
|
</RowElement>
|
|
7286
7318
|
);
|
|
7287
7319
|
})}
|
|
7288
|
-
{showCutLabel && (() => {
|
|
7289
|
-
const cutLabelFields = resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX);
|
|
7290
|
-
const cutLabelVerticalAlignKind = resolveCutLabelVerticalAlignKind(settings.cutLabelVerticalAlign);
|
|
7291
|
-
const cutLabelUsesFullWidth = cutLabelFields.textTextAlign === 'justify' || isVerticalLayout;
|
|
7292
|
-
|
|
7293
|
-
return (
|
|
7294
|
-
<button
|
|
7295
|
-
type="button"
|
|
7296
|
-
className={\`\${P}-cut-item\`}
|
|
7297
|
-
style={{
|
|
7298
|
-
minHeight: scaled(cutCellMinHeight ?? 0),
|
|
7299
|
-
...getCutItemDividerWidths(
|
|
7300
|
-
showDividerBottom,
|
|
7301
|
-
dividerWidth ?? 0,
|
|
7302
|
-
isEditor ?? false,
|
|
7303
|
-
),
|
|
7304
|
-
}}
|
|
7305
|
-
onClick={handleShowMore}
|
|
7306
|
-
onMouseEnter={showHoverImage ? handleCutItemMouseEnter : undefined}
|
|
7307
|
-
>
|
|
7308
|
-
<div
|
|
7309
|
-
className={\`\${P}-list-cols-row\`}
|
|
7310
|
-
style={{
|
|
7311
|
-
...(isVerticalLayout
|
|
7312
|
-
? {
|
|
7313
|
-
paddingLeft: scaled(effectiveTextPaddingLR),
|
|
7314
|
-
paddingRight: scaled(effectiveTextPaddingLR),
|
|
7315
|
-
}
|
|
7316
|
-
: {}),
|
|
7317
|
-
justifyContent: textAlignToJustifyContent(cutLabelFields.textTextAlign),
|
|
7318
|
-
alignItems: cutVerticalAlignKindToFlexAlign(cutLabelVerticalAlignKind),
|
|
7319
|
-
}}
|
|
7320
|
-
>
|
|
7321
|
-
<span
|
|
7322
|
-
className={getListColumnTitleClassName(
|
|
7323
|
-
settings,
|
|
7324
|
-
CUT_LABEL_TEXT_PREFIX,
|
|
7325
|
-
\`\${P}-cut-label\`,
|
|
7326
|
-
\`\${P}-text-tight-leading\`,
|
|
7327
|
-
)}
|
|
7328
|
-
style={{
|
|
7329
|
-
...listColumnTextFieldsToCss(cutLabelFields, isEditor),
|
|
7330
|
-
...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),
|
|
7331
|
-
...(cutLabelUsesFullWidth ? { width: '100%' } : {}),
|
|
7332
|
-
}}
|
|
7333
|
-
>
|
|
7334
|
-
{cutLabel}
|
|
7335
|
-
</span>
|
|
7336
|
-
</div>
|
|
7337
|
-
</button>
|
|
7338
|
-
);
|
|
7339
|
-
})()}
|
|
7340
|
-
</div>
|
|
7341
7320
|
{showControls && (
|
|
7342
7321
|
<div key="row-padding-handles" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
|
|
7343
7322
|
<ListPaddingControl
|
|
7344
7323
|
P={P}
|
|
7345
7324
|
data-controls={rowPaddingTopControlKey}
|
|
7346
7325
|
data-controls-static-handle=""
|
|
7347
|
-
data-controls-handle-left
|
|
7326
|
+
{...(!isVerticalLayout ? { 'data-controls-handle-left': '20' } : {})}
|
|
7348
7327
|
data-controls-axis="y"
|
|
7349
7328
|
data-controls-variant="row-padding"
|
|
7350
7329
|
data-controls-min="0"
|
|
7351
7330
|
className={\`\${P}-padding-control-handle\`}
|
|
7352
|
-
hitPlacement=
|
|
7331
|
+
hitPlacement={isVerticalLayout ? 'center' : 'left-y'}
|
|
7353
7332
|
areaStyle={{
|
|
7354
7333
|
position: 'absolute',
|
|
7355
7334
|
top: 0,
|
|
@@ -7498,6 +7477,60 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7498
7477
|
</div>
|
|
7499
7478
|
);
|
|
7500
7479
|
})}
|
|
7480
|
+
</div>
|
|
7481
|
+
{showCutLabel && (() => {
|
|
7482
|
+
const cutLabelFields = resolveListColumnTextFields(settings, CUT_LABEL_TEXT_PREFIX);
|
|
7483
|
+
const cutLabelVerticalAlignKind = resolveCutLabelVerticalAlignKind(settings.cutLabelVerticalAlign);
|
|
7484
|
+
const cutLabelUsesFullWidth = cutLabelFields.textTextAlign === 'justify' || isVerticalLayout;
|
|
7485
|
+
|
|
7486
|
+
return (
|
|
7487
|
+
<button
|
|
7488
|
+
type="button"
|
|
7489
|
+
className={\`\${P}-cut-item\`}
|
|
7490
|
+
style={{
|
|
7491
|
+
minHeight: scaled(cutCellMinHeight ?? 0),
|
|
7492
|
+
cursor: cutItemClickable ? 'pointer' : 'default',
|
|
7493
|
+
...getCutItemDividerWidths(
|
|
7494
|
+
showDividerBottom,
|
|
7495
|
+
dividerWidth ?? 0,
|
|
7496
|
+
isEditor ?? false,
|
|
7497
|
+
),
|
|
7498
|
+
}}
|
|
7499
|
+
onClick={cutItemClickable ? handleShowMore : undefined}
|
|
7500
|
+
onMouseEnter={showHoverImage ? handleCutItemMouseEnter : undefined}
|
|
7501
|
+
>
|
|
7502
|
+
<div
|
|
7503
|
+
className={\`\${P}-list-cols-row\`}
|
|
7504
|
+
style={{
|
|
7505
|
+
...(isVerticalLayout
|
|
7506
|
+
? {
|
|
7507
|
+
paddingLeft: scaled(effectiveTextPaddingLR),
|
|
7508
|
+
paddingRight: scaled(effectiveTextPaddingLR),
|
|
7509
|
+
}
|
|
7510
|
+
: {}),
|
|
7511
|
+
justifyContent: textAlignToJustifyContent(cutLabelFields.textTextAlign),
|
|
7512
|
+
alignItems: cutVerticalAlignKindToFlexAlign(cutLabelVerticalAlignKind),
|
|
7513
|
+
}}
|
|
7514
|
+
>
|
|
7515
|
+
<span
|
|
7516
|
+
className={getListColumnTitleClassName(
|
|
7517
|
+
settings,
|
|
7518
|
+
CUT_LABEL_TEXT_PREFIX,
|
|
7519
|
+
\`\${P}-cut-label\`,
|
|
7520
|
+
\`\${P}-text-tight-leading\`,
|
|
7521
|
+
)}
|
|
7522
|
+
style={{
|
|
7523
|
+
...listColumnTextFieldsToCss(cutLabelFields, isEditor),
|
|
7524
|
+
...getListColumnTitleVars(settings, CUT_LABEL_TEXT_PREFIX, P, isEditor),
|
|
7525
|
+
...(cutLabelUsesFullWidth ? { width: '100%' } : {}),
|
|
7526
|
+
}}
|
|
7527
|
+
>
|
|
7528
|
+
{cutLabel}
|
|
7529
|
+
</span>
|
|
7530
|
+
</div>
|
|
7531
|
+
</button>
|
|
7532
|
+
);
|
|
7533
|
+
})()}
|
|
7501
7534
|
{showHoverImage && hoverImage && (
|
|
7502
7535
|
<img
|
|
7503
7536
|
className={\`\${P}-hover-image\`}
|
|
@@ -7516,2638 +7549,4 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
|
|
|
7516
7549
|
</>
|
|
7517
7550
|
);
|
|
7518
7551
|
}
|
|
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;
|
|
7552
|
+
`,hn=["A","B","C","D","E"],Zi=[...Vo,"Baseline A","Baseline B","Baseline C","Baseline D","Baseline E"],jt={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 Nd(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 Hd(){return Object.fromEntries(hn.map((e,t)=>{const n=Nt[t],o=`${e} column`;return[n,Nd(o)]}))}function Bd(){const e={};for(const t of hn)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 Ji(e={}){const t={columns:5,wrapperWidth:1,columnsOrder:[...Nt]};for(const n of hn)t[`${n}ColumnWidth`]=.2,t[`${n}ColumnPaddingLeft`]=0,t[`${n}ColumnPaddingRight`]=0,t[`${n}ColumnPaddingBottom`]=0;return{...t,...e}}function Od(e){const t={};if(e===Et)t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Vo],useTabDesign:!0},enum:[...Vo]};else{const n=e.charAt(0);t[`${e}VerticalAlign`]={type:"string",scope:"layout",title:"",display:{type:"drop-down",label:"Vertical alignment",enum:[...Zi],filterBaselineByTopAnchor:!0,columnLetter:n,useTabDesign:!0},enum:[...Zi]}}return t[Te(e,"textFontFamily")]={type:"string",scope:"common",title:"",display:{type:"font-family-select",hideLabel:!0,useTabDesign:!0}},t[Te(e,"textFontSettings")]={...jt.fontSettings,scope:"common",title:"",display:{type:"font-settings-weight",hideLabel:!0,useTabDesign:!0}},t[Te(e,"textFontSize")]={...jt.fontSize,scope:"layout",title:"",display:{type:"font-size"}},t[Te(e,"textLineHeight")]={...jt.lineHeight,scope:"layout",title:"",display:{type:"line-height-input"}},t[Te(e,"textLetterSpacing")]={...jt.letterSpacing,scope:"layout",title:"",display:{type:"letter-spacing-input"}},t[Te(e,"textWordSpacing")]={...jt.wordSpacing,scope:"layout",title:"",display:{type:"word-spacing-input"}},t[Te(e,"textTextAlign")]={...jt.textAlign,scope:"layout",title:"",display:{type:"vertical-text-aligh-options"}},t[Te(e,"textTextAppearance")]={...jt.textAppearance,scope:"layout",title:"",display:{type:"text-appearance",useTabDesign:!0}},t}const Vd=xo.reduce((e,t)=>({...e,...Od(t)}),{}),Dd=xo.reduce((e,t)=>({...e,[`${t}VerticalAlign`]:t===Et?"Center":"Top",[Te(t,"textFontFamily")]:"Arial",[Te(t,"textFontSettings")]:{fontWeight:400,fontStyle:"normal"},[Te(t,"textLetterSpacing")]:0,[Te(t,"textWordSpacing")]:0,[Te(t,"textTextAlign")]:t===Et?"center":"left",[Te(t,"textTextAppearance")]:{textTransform:"none",textDecoration:"none",fontVariant:"normal"}}),{});function Qi(e){const{textFontSize:t,textLineHeight:n,textTextAlign:o}=e;return xo.reduce((i,r)=>(t!==void 0&&(i[`${r}TextFontSize`]=t),n!==void 0&&(i[`${r}TextLineHeight`]=n),o!==void 0&&(i[Te(r,"textTextAlign")]=o),i),{})}const jd=vd();function zr(e){return[Te(e,"textFontFamily"),Te(e,"textFontSettings"),Te(e,"textFontSize"),Te(e,"textLineHeight"),Te(e,"textLetterSpacing"),Te(e,"textWordSpacing"),Te(e,"textTextAlign"),Te(e,"textTextAppearance"),`${e}VerticalAlign`]}function zd(){const e=[];return di.forEach((t,n)=>{const o=Nt[n],i=zr(t);for(let r=1;r<Nt.length;r+=1){const s=[{name:"columns",value:r},...Array.from({length:r},(c,a)=>({name:`columnsOrder.${a}`,value:o,isNotEqual:!0}))];i.forEach(c=>{e.push({if:s,then:{name:`properties.${c}.display.visible`,value:!1}})})}}),e}const Kd=["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"],qd=["cutLabel","cutCellMinHeight","showCut"],Ud=zr(Et),Gd=[...qd,...Ud],Yd=[...hn.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"}],Xd=[{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:""}],Zd=[...hn.flatMap(e=>[`${e}ColumnWidth`,`${e}ColumnPaddingLeft`,`${e}ColumnPaddingRight`,`${e}ColumnPaddingBottom`]),"columnsOrder"],Jd={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:{...Hd(),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:Xd},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"}},...Bd(),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"}},...Vd,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",...Dd,backgroundColor:"#FFFFFF00",dividerColor:"#767676",backgroundHoverColor:"#FFFFFF00",dividerHoverColor:"#767676"},layoutDefaults:{m:Ji({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},...Qi({textFontSize:.043,textLineHeight:.043,textTextAlign:"center"})}),d:Ji({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},...Qi({textFontSize:.01,textLineHeight:.01})})},displayRules:[...zd(),...Gd.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}},...Yd.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}},...hn.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",...Zd]},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:[jd]}],paletteBookmark:{items:[...Kd],panelIds:["general","typeStyle"],stateItems:{default:["textColor","backgroundColor","dividerColor","textHoverColor","backgroundHoverColor","dividerHoverColor"]}}},Qd={element:Fd,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:Jd,sourceCode:Md},eu=[sl,gl,nc,uc,Cc,Wc,Nc,jc,Qc,Qd];exports.components=eu;exports.isSchemaV1=Jr;
|