@cntrl-site/components 0.1.14-alpha.5 → 0.1.15

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.
Files changed (7) hide show
  1. package/dist/Components/ControlSlider/ControlSlider.d.ts +2 -2
  2. package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +4 -4
  3. package/dist/Components/Lightbox/Lightbox.d.ts +4 -4
  4. package/dist/components.css +1 -1
  5. package/dist/index.js +153 -68
  6. package/dist/index.mjs +153 -68
  7. package/package.json +1 -1
package/dist/Components/ControlSlider/ControlSlider.d.ts CHANGED
@@ -58,7 +58,7 @@ type SliderSettings = {
58
58
  duration: string;
59
59
  backgroundColor: string | null;
60
60
  };
61
- caption: SliderCaption;
61
+ imageCaption: SliderCaption;
62
62
  triggers: Triggers;
63
63
  };
64
64
  type CaptionStyles = {
@@ -86,6 +86,6 @@ type CaptionStyles = {
86
86
  color: string;
87
87
  };
88
88
  type SliderStyles = {
89
- caption: CaptionStyles;
89
+ imageCaption: CaptionStyles;
90
90
  };
91
91
  export {};
package/dist/Components/ControlSlider/ControlSliderComponent.d.ts CHANGED
@@ -249,7 +249,7 @@ export declare const ControlSliderComponent: {
249
249
  };
250
250
  };
251
251
  };
252
- caption: {
252
+ imageCaption: {
253
253
  title: string;
254
254
  icon: string;
255
255
  tooltip: string;
@@ -343,7 +343,7 @@ export declare const ControlSliderComponent: {
343
343
  hover: string;
344
344
  };
345
345
  direction: string;
346
- caption: {
346
+ imageCaption: {
347
347
  offset: {
348
348
  x: number;
349
349
  y: number;
@@ -435,7 +435,7 @@ export declare const ControlSliderComponent: {
435
435
  layoutBased: boolean;
436
436
  type: string;
437
437
  properties: {
438
- caption: {
438
+ imageCaption: {
439
439
  dataName: string;
440
440
  type: string;
441
441
  properties: {
@@ -533,7 +533,7 @@ export declare const ControlSliderComponent: {
533
533
  };
534
534
  };
535
535
  default: {
536
- caption: {
536
+ imageCaption: {
537
537
  widthSettings: {
538
538
  width: number;
539
539
  sizing: string;
package/dist/Components/Lightbox/Lightbox.d.ts CHANGED
@@ -90,14 +90,14 @@ type LightboxSettings = {
90
90
  closeIconAlign: Alignment;
91
91
  closeIconOffset: Offset;
92
92
  closeIconScale: number;
93
- closeIconColor: string;
94
- closeIconHover: string;
93
+ closeIconColor?: string;
94
+ closeIconHover?: string;
95
95
  };
96
- caption: Caption;
96
+ imageCaption: Caption;
97
97
  };
98
98
  };
99
99
  type LightboxStyles = {
100
- caption: CaptionStyles;
100
+ imageCaption: CaptionStyles;
101
101
  };
102
102
  type CaptionStyles = {
103
103
  fontSettings: {
package/dist/components.css CHANGED
@@ -1 +1 @@
1
- .ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__wrapper___sHEkd:hover .ControlSlider-module__hoverArrow___A-dOH{opacity:1!important}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__hoverArrow___A-dOH{opacity:0;transition:opacity .15s ease-in-out}.ControlSlider-module__hoverArrow___A-dOH:hover{opacity:1}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{display:block;width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.ImageRevealSlider-module__cursor___2U03d{position:absolute;top:0;left:0;pointer-events:none;width:32px;height:32px}.LightBox-module__hidden___9s-9x{display:none}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:hidden;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__lightboxSplide___XFuWC .splide__list{width:100%;height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__arrowIcon___3VaFf{width:100%;height:100%}.LightBox-module__arrowIcon___3VaFf path{transition:fill .15s ease-in-out}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsWrapper___GB-nU{height:auto;width:auto;max-height:100vh;max-width:100%;overflow:auto;position:absolute;top:0;pointer-events:none}.LightBox-module__thumbsWrapper___GB-nU::-webkit-scrollbar{padding:10px;scrollbar-width:none}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;pointer-events:none}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;pointer-events:all;flex:0 0 auto;cursor:pointer;overflow:hidden}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbsContainerVertical___wttk5 .LightBox-module__thumbItem___HvnF3{flex:1 1 auto}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
1
+ .ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.ControlSlider-module__wrapper___sHEkd:hover .ControlSlider-module__hoverArrow___A-dOH{opacity:1!important}.ControlSlider-module__slider___R3i9-{width:100%;height:100%}.ControlSlider-module__sliderItems___1MgPL{display:flex;overflow:hidden;width:100%;height:100%;transition:transform .3s ease-in-out}.ControlSlider-module__sliderItem___QQSkR{width:100%;height:100%;display:flex;position:relative}.ControlSlider-module__sliderImage___9hRl-{width:100%;height:100%;object-fit:cover}.ControlSlider-module__arrow___05ghY{position:absolute;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;top:50%;left:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);z-index:1;transform:translate(-50%,-50%);padding:0;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.ControlSlider-module__arrow___05ghY.ControlSlider-module__arrowVertical___tBfVN{left:50%;top:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,-50%)}.ControlSlider-module__nextArrow___-30Yc{left:unset;right:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(50%,-50%)}.ControlSlider-module__nextArrow___-30Yc.ControlSlider-module__arrowVertical___tBfVN{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * -1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -1.3888888889vw);transform:translate(-50%,50%)}.ControlSlider-module__arrowInner___aEra3{all:unset;cursor:pointer;width:100%;height:100%}.ControlSlider-module__arrowInner___aEra3:hover .ControlSlider-module__arrowIcon___S4ztF path{fill:var(--arrow-hover-color)!important}.ControlSlider-module__arrowImg___2dwJW{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ControlSlider-module__arrowIcon___S4ztF{width:100%;height:100%}.ControlSlider-module__arrowIcon___S4ztF path{transition:fill .15s ease-in-out}.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleX(-1)!important}.ControlSlider-module__arrowVertical___tBfVN.ControlSlider-module__mirror___brd6U{transform:translate(-50%,-50%) scaleY(-1)!important}.ControlSlider-module__hoverArrow___A-dOH{opacity:0;transition:opacity .15s ease-in-out}.ControlSlider-module__hoverArrow___A-dOH:hover{opacity:1}.ControlSlider-module__pagination___bicLF{position:absolute;z-index:1;border-radius:50%}.ControlSlider-module__paginationInner___bT-P-{display:flex;gap:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);padding-top:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-bottom:calc(var(--is-editor, 0) * .6944444444vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .6944444444vw);padding-left:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);padding-right:calc(var(--is-editor, 0) * 1.25vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.25vw);border-radius:calc(var(--is-editor, 0) * 2.3611111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.3611111111vw)}.ControlSlider-module__paginationVertical___zYqKw{flex-direction:column}.ControlSlider-module__paginationItem___nTRbk{all:unset;flex-shrink:0;position:relative;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);cursor:pointer}.ControlSlider-module__paginationItem___nTRbk:hover .ControlSlider-module__dot___p1Qun{background-color:var(--pagination-hover-color)!important}.ControlSlider-module__dot___p1Qun{border-radius:50%;scale:.5;transition:background-color .3s ease-in-out,transform .3s ease-in-out;width:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);height:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw)}.ControlSlider-module__activeDot___LHFaj{transform:scale(2)}.ControlSlider-module__paginationInsideBottom___R3FWn{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__paginationInsideTop___V-qb-{left:50%;transform:translate(-50%);top:0}.ControlSlider-module__paginationOutsideBottom___14w8D{left:50%;transform:translate(-50%);bottom:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideTop___SCLqB{left:50%;transform:translate(-50%);top:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideLeft___yOBRZ{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationInsideRight___Rtt3o{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -2.4305555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -2.4305555556vw)}.ControlSlider-module__paginationOutsideLeft___lahaw{top:50%;transform:translateY(-50%);left:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__paginationOutsideRight___EtuQa{top:50%;transform:translateY(-50%);right:calc(var(--is-editor, 0) * -5.4861111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * -5.4861111111vw)}.ControlSlider-module__imgWrapper___UjEgB,.ControlSlider-module__wrapperInner___DLAWV{width:100%;height:100%}.ControlSlider-module__captionBlock___dJ6-j{pointer-events:none;position:absolute;top:0;z-index:1;left:0;right:0;bottom:0}.ControlSlider-module__captionTextWrapper___HFlpf{position:relative;width:100%;height:100%}.ControlSlider-module__captionText___uGBVc{pointer-events:none;max-width:100%;transition-property:opacity;transition-timing-function:ease-in-out;position:absolute;display:inline-block;white-space:pre-wrap;overflow-wrap:break-word;opacity:0}.ControlSlider-module__captionText___uGBVc.ControlSlider-module__active___WZK4G{opacity:1}.ControlSlider-module__withPointerEvents___t-18M{pointer-events:auto}.ControlSlider-module__absolute___KxmYB{position:absolute}.ControlSlider-module__topLeftAlignment___zjnGM{top:0;left:0}.ControlSlider-module__topCenterAlignment___gD1xW{top:0;left:50%;transform:translate(-50%)}.ControlSlider-module__topRightAlignment___NMapS{top:0;right:0}.ControlSlider-module__middleLeftAlignment___OnUrY{top:50%;transform:translateY(-50%);left:0}.ControlSlider-module__middleCenterAlignment___Tdkl0{top:50%;transform:translate(-50%,-50%);left:50%}.ControlSlider-module__middleRightAlignment___wEbfX{top:50%;transform:translateY(-50%);right:0}.ControlSlider-module__bottomLeftAlignment___cTP2-{bottom:0;left:0}.ControlSlider-module__bottomCenterAlignment___c54fB{bottom:0;left:50%;transform:translate(-50%)}.ControlSlider-module__bottomRightAlignment___kEwrz{bottom:0;right:0}.ControlSlider-module__clickOverlay___DZA28{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer}.ControlSlider-module__contain___pLyq7{object-fit:contain}.ControlSlider-module__cover___KdDat{object-fit:cover}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.RichTextRenderer-module__link___BWeZ2{color:inherit;cursor:pointer;pointer-events:auto;transition:color .2s ease}.RichTextRenderer-module__link___BWeZ2:hover{color:var(--link-hover-color)}.SvgImage-module__svg___q3xE-{width:100%;height:100%;color:transparent;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--fill);transition:background-color .2s;-webkit-mask:var(--svg) no-repeat center/contain;mask:var(--svg) no-repeat center/contain}.SvgImage-module__svg___q3xE-:hover{background-color:var(--hover-fill)}.SvgImage-module__img___VsTm-{width:100%;height:100%;object-fit:contain}.ImageRevealSlider-module__imageRevealSlider___UE5Ob{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.ImageRevealSlider-module__image___Qjt-e{display:block;width:100%;height:100%;object-fit:cover;position:relative;-webkit-user-select:none;user-select:none;pointer-events:none}.ImageRevealSlider-module__link___N-iLG{width:100%;height:100%;display:block}.ImageRevealSlider-module__cursor___2U03d{position:absolute;top:0;left:0;pointer-events:none;width:32px;height:32px}.LightBox-module__hidden___9s-9x{display:none}.LightBox-module__heroImage___sTxNF{width:100%;height:100%;cursor:pointer;object-fit:cover}.LightBox-module__background___rm9ml{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.LightBox-module__editor___4ACaY{width:var(--cntrl-article-width)!important;margin-left:auto;margin-right:auto}.LightBox-module__contentStyle___Bgnsq{position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;overflow:hidden;background:transparent;box-sizing:border-box}.LightBox-module__imageStyle___tLIlB{position:relative;display:block;cursor:pointer;background-color:transparent;max-width:100%;max-height:100%;width:auto;height:auto}.LightBox-module__imgWrapper___LuFUp{position:relative;display:flex;width:100%;height:100%;overflow:hidden;box-sizing:border-box}.LightBox-module__contain___8-yaS{object-fit:contain;max-width:100%;max-height:100%}.LightBox-module__cover___hNvOG{width:100%;height:100%;object-fit:cover}.LightBox-module__caption___b6L2I{z-index:9999;position:absolute;display:flex}.LightBox-module__captionTextInner___rCGNH{position:relative}.LightBox-module__lightboxSplide___XFuWC.splide,.LightBox-module__lightboxSplide___XFuWC .splide__track{height:100%}.LightBox-module__arrow___iz38X{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background-color:transparent;top:50%;z-index:1;transform:translate(-50%,-50%);padding:0;left:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}.LightBox-module__arrow___iz38X.LightBox-module__arrowVertical___Zfz81{left:50%;top:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,-50%)}.LightBox-module__nextArrow___zkAQN{left:unset;right:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(50%,-50%)}.LightBox-module__nextArrow___zkAQN.LightBox-module__arrowVertical___Zfz81{left:50%;right:unset;top:unset;bottom:calc(var(--is-editor, 0) * 1.3888888889vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.3888888889vw);transform:translate(-50%,50%)}.LightBox-module__arrowInner___p48sW{all:unset;cursor:pointer;width:100%;height:100%}.LightBox-module__arrowInner___p48sW:hover .LightBox-module__arrowIcon___3VaFf path{fill:var(--arrow-hover-color)!important}.LightBox-module__arrowImg___pNV88{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.LightBox-module__arrowIcon___3VaFf{width:100%;height:100%}.LightBox-module__arrowIcon___3VaFf path{transition:fill .15s ease-in-out}.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleX(-1)!important}.LightBox-module__arrowVertical___Zfz81.LightBox-module__mirror___pjeXc{transform:translate(-50%,-50%) scaleY(-1)!important}.LightBox-module__thumbsWrapper___GB-nU{height:auto;width:auto;max-height:100vh;max-width:100%;overflow:auto;position:absolute;top:0;-webkit-overflow-scrolling:touch}.LightBox-module__thumbsWrapper___GB-nU::-webkit-scrollbar{padding:10px;scrollbar-width:none}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;pointer-events:none}.LightBox-module__thumbsAlignStart___MO6tY{align-items:flex-start}.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center}.LightBox-module__thumbsAlignEnd___p4y9R{align-items:flex-end}.LightBox-module__thumbItem___HvnF3{all:unset;display:inline-flex;align-items:center;justify-content:center;pointer-events:all;flex:0 0 auto;cursor:pointer;overflow:hidden}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.LightBox-module__thumbsContainerVertical___wttk5 .LightBox-module__thumbItem___HvnF3{flex:1 1 auto}.LightBox-module__closeButton___g2khP{all:unset;cursor:pointer;position:absolute;width:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw);height:calc(var(--is-editor, 0) * 2.0833333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 2.0833333333vw)}@keyframes LightBox-module__lbFadeIn___P8mx0{0%{opacity:0}to{opacity:1}}.LightBox-module__fadeIn___0m5GW{animation-name:LightBox-module__lbFadeIn___P8mx0}@keyframes LightBox-module__lbSlideInLeft___ygsXZ{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInRight___w2YKV{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes LightBox-module__lbSlideInTop___W7CSQ{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes LightBox-module__lbSlideInBottom___7kiT2{0%{transform:translateY(100%)}to{transform:translateY(0)}}.LightBox-module__slideInLeft___gPYwC{animation-name:LightBox-module__lbSlideInLeft___ygsXZ}.LightBox-module__slideInRight___S-pPp{animation-name:LightBox-module__lbSlideInRight___w2YKV}.LightBox-module__slideInTop___DFdAj{animation-name:LightBox-module__lbSlideInTop___W7CSQ}.LightBox-module__slideInBottom___m27kZ{animation-name:LightBox-module__lbSlideInBottom___7kiT2}@keyframes LightBox-module__lbFadeOut___MhEeN{0%{opacity:1}to{opacity:0}}.LightBox-module__fadeOut___55qBR{animation-name:LightBox-module__lbFadeOut___MhEeN!important}@keyframes LightBox-module__lbSlideOutLeft___xM4sO{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes LightBox-module__lbSlideOutRight___Jppgj{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes LightBox-module__lbSlideOutTop___pvscE{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes LightBox-module__lbSlideOutBottom___oFjPG{0%{transform:translateY(0)}to{transform:translateY(100%)}}.LightBox-module__slideOutLeft___NvU7P{animation-name:LightBox-module__lbSlideOutLeft___xM4sO!important}.LightBox-module__slideOutRight___SK7eC{animation-name:LightBox-module__lbSlideOutRight___Jppgj!important}.LightBox-module__slideOutTop___Vgg0z{animation-name:LightBox-module__lbSlideOutTop___pvscE!important}.LightBox-module__slideOutBottom___nJ0Ef{animation-name:LightBox-module__lbSlideOutBottom___oFjPG!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(.9)!important;transition:opacity var(--splide-speed, .5s) ease,transform var(--splide-speed, .5s) ease!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide.is-active .LightBox-module__scaleSlide___vZriG{opacity:1!important;transform:var(--position-transform, none) scale(1)!important}.LightBox-module__lightboxSplide___XFuWC.splide--fade .splide__slide:not(.is-active) .LightBox-module__scaleSlide___vZriG{opacity:0!important;transform:var(--position-transform, none) scale(1.1)!important}
package/dist/index.js CHANGED
@@ -171,12 +171,12 @@ const alignmentClassName = {
171
171
  };
172
172
  function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
173
173
  const [sliderRef, setSliderRef] = react.useState(null);
174
- const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.caption;
174
+ const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.imageCaption;
175
175
  const [sliderDimensions, setSliderDimensions] = react.useState(void 0);
176
176
  const [wrapperRef, setWrapperRef] = react.useState(null);
177
177
  const [currentSlideIndex, setCurrentSlideIndex] = react.useState(0);
178
178
  const [key, setKey] = react.useState(0);
179
- const { direction, transition, controls, pagination: pagination2, caption: caption2, triggers } = settings;
179
+ const { direction, transition, controls, pagination: pagination2, imageCaption, triggers } = settings;
180
180
  const prevSliderTypeRef = react.useRef(transition.type);
181
181
  const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
182
182
  const handleArrowClick = (dir) => {
@@ -212,7 +212,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
212
212
  backgroundColor: transition.backgroundColor && transition.type === "fade in" ? transition.backgroundColor : "transparent"
213
213
  },
214
214
  children: [
215
- settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
215
+ settings.imageCaption.isActive && /* @__PURE__ */ jsxRuntime.jsx(
216
216
  "div",
217
217
  {
218
218
  className: cn(styles$3.captionBlock),
@@ -223,7 +223,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
223
223
  children: content.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
224
224
  "div",
225
225
  {
226
- className: cn(styles$3.captionText, alignmentClassName[caption2.alignment], {
226
+ className: cn(styles$3.captionText, alignmentClassName[imageCaption.alignment], {
227
227
  [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
228
228
  [styles$3.active]: index === currentSlideIndex
229
229
  }),
@@ -246,13 +246,13 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
246
246
  children: /* @__PURE__ */ jsxRuntime.jsx(
247
247
  "div",
248
248
  {
249
- "data-styles": "caption",
249
+ "data-styles": "imageCaption",
250
250
  className: styles$3.captionTextInner,
251
251
  style: {
252
- "--link-hover-color": caption2.hover,
252
+ "--link-hover-color": imageCaption.hover,
253
253
  position: "relative",
254
- top: scalingValue(caption2.offset.y, isEditor),
255
- left: scalingValue(caption2.offset.x, isEditor)
254
+ top: scalingValue(imageCaption.offset.y, isEditor),
255
+ left: scalingValue(imageCaption.offset.x, isEditor)
256
256
  },
257
257
  children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: item.imageCaption })
258
258
  }
@@ -705,7 +705,7 @@ const ControlSliderComponent = {
705
705
  }
706
706
  }
707
707
  },
708
- caption: {
708
+ imageCaption: {
709
709
  title: "Caption",
710
710
  icon: "text-icon",
711
711
  tooltip: "Caption",
@@ -799,7 +799,7 @@ const ControlSliderComponent = {
799
799
  hover: "#cccccc"
800
800
  },
801
801
  direction: "horiz",
802
- caption: {
802
+ imageCaption: {
803
803
  offset: {
804
804
  x: 0,
805
805
  y: 0
@@ -922,7 +922,7 @@ const ControlSliderComponent = {
922
922
  layoutBased: true,
923
923
  type: "object",
924
924
  properties: {
925
- caption: {
925
+ imageCaption: {
926
926
  dataName: "caption",
927
927
  type: "object",
928
928
  properties: {
@@ -1020,7 +1020,7 @@ const ControlSliderComponent = {
1020
1020
  }
1021
1021
  },
1022
1022
  default: {
1023
- caption: {
1023
+ imageCaption: {
1024
1024
  widthSettings: {
1025
1025
  width: 0.13,
1026
1026
  sizing: "auto"
@@ -1904,8 +1904,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1904
1904
  const animationEndHandlerRef = react.useRef(null);
1905
1905
  const appearAnimationEndHandlerRef = react.useRef(null);
1906
1906
  const dragStartRef = react.useRef(null);
1907
- const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1908
- const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
1907
+ const hasDraggedRef = react.useRef(false);
1908
+ const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1909
1909
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1910
1910
  react.useEffect(() => {
1911
1911
  const handleLayoutChange = () => {
@@ -1985,6 +1985,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1985
1985
  return clientX < contentLeft || clientX > contentRight || clientY < contentTop || clientY > contentBottom;
1986
1986
  };
1987
1987
  const handleImageWrapperClick = (e) => {
1988
+ if (hasDraggedRef.current) {
1989
+ hasDraggedRef.current = false;
1990
+ return;
1991
+ }
1988
1992
  const currentImage = content[currentIndex];
1989
1993
  const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
1990
1994
  let clientX;
@@ -2033,6 +2037,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2033
2037
  }
2034
2038
  handleTriggerClick(e.currentTarget, e.clientX, e.clientY);
2035
2039
  };
2040
+ const handleThumbWrapperClick = (e) => {
2041
+ const target = e.target;
2042
+ if (target.classList.contains(classes.thumbsWrapper) || target.classList.contains(classes.thumbsContainer)) {
2043
+ handleImageWrapperClick(e);
2044
+ }
2045
+ };
2036
2046
  react.useEffect(() => {
2037
2047
  if (!isOpen) return;
2038
2048
  const onKeyDown = (event) => {
@@ -2102,7 +2112,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2102
2112
  appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
2103
2113
  animationTargetRef.current.addEventListener("animationend", handleAppearAnimationEnd);
2104
2114
  }
2105
- const preventScroll = (e) => e.preventDefault();
2115
+ const preventScroll = (e) => {
2116
+ const target = e.target;
2117
+ if (target && (target.closest(`.${classes.thumbsWrapper}`) || target.closest(`.${classes.thumbsContainer}`))) {
2118
+ return;
2119
+ }
2120
+ e.preventDefault();
2121
+ };
2106
2122
  document.addEventListener("touchmove", preventScroll, { passive: false });
2107
2123
  return () => {
2108
2124
  document.body.style.overflow = originalOverflow;
@@ -2121,6 +2137,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2121
2137
  e.stopPropagation();
2122
2138
  return;
2123
2139
  }
2140
+ if (hasDraggedRef.current) {
2141
+ hasDraggedRef.current = false;
2142
+ return;
2143
+ }
2124
2144
  const target = e.target;
2125
2145
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2126
2146
  return;
@@ -2156,40 +2176,101 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2156
2176
  document.removeEventListener("touchend", handleTouchEnd);
2157
2177
  };
2158
2178
  }, [isOpen, handleClose, currentIndex, content]);
2159
- const needsCustomVerticalDrag = slider.type === "scale" && slider.direction === "vert" && triggers.type === "drag";
2179
+ const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2160
2180
  react.useEffect(() => {
2161
2181
  var _a, _b;
2162
2182
  if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) return;
2163
2183
  const container = lightboxRef.current.splide.root;
2164
2184
  const DRAG_THRESHOLD = 30;
2165
- const handlePointerDown = (e) => {
2166
- dragStartRef.current = { x: e.clientX, y: e.clientY };
2185
+ const handleMove = (clientX, clientY) => {
2186
+ if (dragStartRef.current) {
2187
+ const deltaX = Math.abs(clientX - dragStartRef.current.x);
2188
+ const deltaY = Math.abs(clientY - dragStartRef.current.y);
2189
+ if (deltaX > 0 || deltaY > 0) {
2190
+ hasDraggedRef.current = true;
2191
+ }
2192
+ }
2167
2193
  };
2168
2194
  const handlePointerMove = (e) => {
2169
- if (dragStartRef.current) e.preventDefault();
2195
+ if (dragStartRef.current) {
2196
+ e.preventDefault();
2197
+ handleMove(e.clientX, e.clientY);
2198
+ }
2170
2199
  };
2171
- const handlePointerUp = (e) => {
2200
+ const handleTouchMove = (e) => {
2201
+ if (dragStartRef.current && e.touches.length > 0) {
2202
+ e.preventDefault();
2203
+ handleMove(e.touches[0].clientX, e.touches[0].clientY);
2204
+ }
2205
+ };
2206
+ const handleUp = (clientX, clientY) => {
2172
2207
  if (!dragStartRef.current || !lightboxRef.current) {
2173
2208
  dragStartRef.current = null;
2174
2209
  return;
2175
2210
  }
2176
- const deltaX = Math.abs(e.clientX - dragStartRef.current.x);
2177
- const deltaY = Math.abs(e.clientY - dragStartRef.current.y);
2211
+ const deltaX = Math.abs(clientX - dragStartRef.current.x);
2212
+ const deltaY = Math.abs(clientY - dragStartRef.current.y);
2178
2213
  if (deltaY > DRAG_THRESHOLD && deltaY > deltaX) {
2179
- lightboxRef.current.go(e.clientY < dragStartRef.current.y ? "+1" : "-1");
2214
+ lightboxRef.current.go(clientY < dragStartRef.current.y ? "+1" : "-1");
2180
2215
  }
2181
2216
  dragStartRef.current = null;
2182
2217
  };
2218
+ const handlePointerUp = (e) => {
2219
+ if (!dragStartRef.current) {
2220
+ document.removeEventListener("pointerup", handlePointerUp);
2221
+ document.removeEventListener("pointercancel", handlePointerUp);
2222
+ document.removeEventListener("pointermove", handlePointerMove);
2223
+ return;
2224
+ }
2225
+ handleUp(e.clientX, e.clientY);
2226
+ document.removeEventListener("pointerup", handlePointerUp);
2227
+ document.removeEventListener("pointercancel", handlePointerUp);
2228
+ document.removeEventListener("pointermove", handlePointerMove);
2229
+ };
2230
+ const handleTouchEnd = (e) => {
2231
+ if (!dragStartRef.current) {
2232
+ document.removeEventListener("touchend", handleTouchEnd);
2233
+ document.removeEventListener("touchcancel", handleTouchEnd);
2234
+ document.removeEventListener("touchmove", handleTouchMove);
2235
+ return;
2236
+ }
2237
+ if (e.changedTouches.length > 0) {
2238
+ const touch = e.changedTouches[0];
2239
+ handleUp(touch.clientX, touch.clientY);
2240
+ }
2241
+ document.removeEventListener("touchend", handleTouchEnd);
2242
+ document.removeEventListener("touchcancel", handleTouchEnd);
2243
+ document.removeEventListener("touchmove", handleTouchMove);
2244
+ };
2245
+ const handlePointerDown = (e) => {
2246
+ dragStartRef.current = { x: e.clientX, y: e.clientY };
2247
+ hasDraggedRef.current = false;
2248
+ document.addEventListener("pointermove", handlePointerMove, { passive: false });
2249
+ document.addEventListener("pointerup", handlePointerUp);
2250
+ document.addEventListener("pointercancel", handlePointerUp);
2251
+ };
2252
+ const handleTouchStart = (e) => {
2253
+ if (e.touches.length > 0) {
2254
+ dragStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
2255
+ hasDraggedRef.current = false;
2256
+ document.addEventListener("touchmove", handleTouchMove, { passive: false });
2257
+ document.addEventListener("touchend", handleTouchEnd);
2258
+ document.addEventListener("touchcancel", handleTouchEnd);
2259
+ }
2260
+ };
2183
2261
  container.addEventListener("pointerdown", handlePointerDown);
2184
- container.addEventListener("pointermove", handlePointerMove, { passive: false });
2185
- container.addEventListener("pointerup", handlePointerUp);
2186
- container.addEventListener("pointercancel", handlePointerUp);
2262
+ container.addEventListener("touchstart", handleTouchStart);
2187
2263
  return () => {
2188
2264
  container.removeEventListener("pointerdown", handlePointerDown);
2189
- container.removeEventListener("pointermove", handlePointerMove);
2190
- container.removeEventListener("pointerup", handlePointerUp);
2191
- container.removeEventListener("pointercancel", handlePointerUp);
2265
+ container.removeEventListener("touchstart", handleTouchStart);
2266
+ document.removeEventListener("pointermove", handlePointerMove);
2267
+ document.removeEventListener("pointerup", handlePointerUp);
2268
+ document.removeEventListener("pointercancel", handlePointerUp);
2269
+ document.removeEventListener("touchmove", handleTouchMove);
2270
+ document.removeEventListener("touchend", handleTouchEnd);
2271
+ document.removeEventListener("touchcancel", handleTouchEnd);
2192
2272
  dragStartRef.current = null;
2273
+ hasDraggedRef.current = false;
2193
2274
  };
2194
2275
  }, [isOpen, needsCustomVerticalDrag, splideKey]);
2195
2276
  const backdropStyles = {
@@ -2349,40 +2430,43 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2349
2430
  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
2350
2431
  const scaleTransform = `scale(${area.closeIconScale})`;
2351
2432
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2352
- return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor, hoverFill: area.closeIconHover }) });
2433
+ return /* @__PURE__ */ jsxRuntime.jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor ?? "#000000", hoverFill: area.closeIconHover ?? "#cccccc" }) });
2434
+ })(),
2435
+ imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2436
+ const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2437
+ return /* @__PURE__ */ jsxRuntime.jsx(
2438
+ "div",
2439
+ {
2440
+ className: classes.caption,
2441
+ style: {
2442
+ ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
2443
+ fontFamily: fontSettings.fontFamily,
2444
+ fontWeight: fontSettings.fontWeight,
2445
+ fontStyle: fontSettings.fontStyle,
2446
+ width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
2447
+ letterSpacing: scalingValue(letterSpacing, isEditor),
2448
+ wordSpacing: scalingValue(wordSpacing, isEditor),
2449
+ textAlign,
2450
+ fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
2451
+ lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
2452
+ textTransform: textAppearance.textTransform ?? "none",
2453
+ textDecoration: textAppearance.textDecoration ?? "none",
2454
+ fontVariant: textAppearance.fontVariant ?? "normal",
2455
+ color
2456
+ },
2457
+ onClick: (e) => e.stopPropagation(),
2458
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2459
+ "div",
2460
+ {
2461
+ "data-styles": "caption",
2462
+ className: classes.captionTextInner,
2463
+ style: { ["--link-hover-color"]: imageCaption.hover },
2464
+ children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2465
+ }
2466
+ )
2467
+ }
2468
+ );
2353
2469
  })(),
2354
- caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx(
2355
- "div",
2356
- {
2357
- className: classes.caption,
2358
- style: {
2359
- ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
2360
- fontFamily: fontSettings.fontFamily,
2361
- fontWeight: fontSettings.fontWeight,
2362
- fontStyle: fontSettings.fontStyle,
2363
- width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
2364
- letterSpacing: scalingValue(letterSpacing, isEditor),
2365
- wordSpacing: scalingValue(wordSpacing, isEditor),
2366
- textAlign,
2367
- fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
2368
- lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
2369
- textTransform: textAppearance.textTransform ?? "none",
2370
- textDecoration: textAppearance.textDecoration ?? "none",
2371
- fontVariant: textAppearance.fontVariant ?? "normal",
2372
- color
2373
- },
2374
- onClick: (e) => e.stopPropagation(),
2375
- children: /* @__PURE__ */ jsxRuntime.jsx(
2376
- "div",
2377
- {
2378
- "data-styles": "caption",
2379
- className: classes.captionTextInner,
2380
- style: { ["--link-hover-color"]: caption2.hover },
2381
- children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2382
- }
2383
- )
2384
- }
2385
- ),
2386
2470
  thumbnail.isActive && (() => {
2387
2471
  const [vertical, horizontal] = thumbnail.position.split("-");
2388
2472
  const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
@@ -2403,6 +2487,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2403
2487
  "div",
2404
2488
  {
2405
2489
  className: classes.thumbsWrapper,
2490
+ onClick: (e) => handleThumbWrapperClick(e),
2406
2491
  style: {
2407
2492
  position: isEditor ? "absolute" : "fixed",
2408
2493
  ...thumbsPositionStyles,
@@ -3042,7 +3127,7 @@ const LightboxComponent = {
3042
3127
  }
3043
3128
  }
3044
3129
  },
3045
- caption: {
3130
+ imageCaption: {
3046
3131
  title: "DESC",
3047
3132
  icon: "text-icon",
3048
3133
  tooltip: "Description",
@@ -3164,7 +3249,7 @@ const LightboxComponent = {
3164
3249
  closeIconOffset: { x: 0, y: 0 },
3165
3250
  closeIconScale: 1
3166
3251
  },
3167
- caption: {
3252
+ imageCaption: {
3168
3253
  isActive: true,
3169
3254
  alignment: "middle-center",
3170
3255
  offset: { x: 0, y: 0 },
@@ -3234,7 +3319,7 @@ const LightboxComponent = {
3234
3319
  closeIconOffset: { x: 0, y: 0 },
3235
3320
  closeIconScale: 1
3236
3321
  },
3237
- caption: {
3322
+ imageCaption: {
3238
3323
  isActive: true,
3239
3324
  alignment: "middle-center",
3240
3325
  offset: { x: 0, y: 0 },
@@ -3304,7 +3389,7 @@ const LightboxComponent = {
3304
3389
  closeIconOffset: { x: 0, y: 0 },
3305
3390
  closeIconScale: 1
3306
3391
  },
3307
- caption: {
3392
+ imageCaption: {
3308
3393
  isActive: true,
3309
3394
  alignment: "middle-center",
3310
3395
  offset: { x: 0, y: 0 },
@@ -3456,7 +3541,7 @@ const LightboxComponent = {
3456
3541
  layoutBased: true,
3457
3542
  type: "object",
3458
3543
  properties: {
3459
- caption: {
3544
+ imageCaption: {
3460
3545
  dataName: "caption",
3461
3546
  type: "object",
3462
3547
  properties: {
@@ -3554,7 +3639,7 @@ const LightboxComponent = {
3554
3639
  }
3555
3640
  },
3556
3641
  default: {
3557
- caption: {
3642
+ imageCaption: {
3558
3643
  widthSettings: {
3559
3644
  width: 0.13,
3560
3645
  sizing: "auto"
package/dist/index.mjs CHANGED
@@ -169,12 +169,12 @@ const alignmentClassName = {
169
169
  };
170
170
  function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
171
171
  const [sliderRef, setSliderRef] = useState(null);
172
- const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.caption;
172
+ const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = sliderStyles.imageCaption;
173
173
  const [sliderDimensions, setSliderDimensions] = useState(void 0);
174
174
  const [wrapperRef, setWrapperRef] = useState(null);
175
175
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
176
176
  const [key, setKey] = useState(0);
177
- const { direction, transition, controls, pagination: pagination2, caption: caption2, triggers } = settings;
177
+ const { direction, transition, controls, pagination: pagination2, imageCaption, triggers } = settings;
178
178
  const prevSliderTypeRef = useRef(transition.type);
179
179
  const { x: controlsOffsetX, y: controlsOffsetY } = settings.controls.offset;
180
180
  const handleArrowClick = (dir) => {
@@ -210,7 +210,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
210
210
  backgroundColor: transition.backgroundColor && transition.type === "fade in" ? transition.backgroundColor : "transparent"
211
211
  },
212
212
  children: [
213
- settings.caption.isActive && /* @__PURE__ */ jsx(
213
+ settings.imageCaption.isActive && /* @__PURE__ */ jsx(
214
214
  "div",
215
215
  {
216
216
  className: cn(styles$3.captionBlock),
@@ -221,7 +221,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
221
221
  children: content.map((item, index) => /* @__PURE__ */ jsx(
222
222
  "div",
223
223
  {
224
- className: cn(styles$3.captionText, alignmentClassName[caption2.alignment], {
224
+ className: cn(styles$3.captionText, alignmentClassName[imageCaption.alignment], {
225
225
  [styles$3.withPointerEvents]: index === currentSlideIndex && isEditor,
226
226
  [styles$3.active]: index === currentSlideIndex
227
227
  }),
@@ -244,13 +244,13 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
244
244
  children: /* @__PURE__ */ jsx(
245
245
  "div",
246
246
  {
247
- "data-styles": "caption",
247
+ "data-styles": "imageCaption",
248
248
  className: styles$3.captionTextInner,
249
249
  style: {
250
- "--link-hover-color": caption2.hover,
250
+ "--link-hover-color": imageCaption.hover,
251
251
  position: "relative",
252
- top: scalingValue(caption2.offset.y, isEditor),
253
- left: scalingValue(caption2.offset.x, isEditor)
252
+ top: scalingValue(imageCaption.offset.y, isEditor),
253
+ left: scalingValue(imageCaption.offset.x, isEditor)
254
254
  },
255
255
  children: /* @__PURE__ */ jsx(RichTextRenderer, { content: item.imageCaption })
256
256
  }
@@ -703,7 +703,7 @@ const ControlSliderComponent = {
703
703
  }
704
704
  }
705
705
  },
706
- caption: {
706
+ imageCaption: {
707
707
  title: "Caption",
708
708
  icon: "text-icon",
709
709
  tooltip: "Caption",
@@ -797,7 +797,7 @@ const ControlSliderComponent = {
797
797
  hover: "#cccccc"
798
798
  },
799
799
  direction: "horiz",
800
- caption: {
800
+ imageCaption: {
801
801
  offset: {
802
802
  x: 0,
803
803
  y: 0
@@ -920,7 +920,7 @@ const ControlSliderComponent = {
920
920
  layoutBased: true,
921
921
  type: "object",
922
922
  properties: {
923
- caption: {
923
+ imageCaption: {
924
924
  dataName: "caption",
925
925
  type: "object",
926
926
  properties: {
@@ -1018,7 +1018,7 @@ const ControlSliderComponent = {
1018
1018
  }
1019
1019
  },
1020
1020
  default: {
1021
- caption: {
1021
+ imageCaption: {
1022
1022
  widthSettings: {
1023
1023
  width: 0.13,
1024
1024
  sizing: "auto"
@@ -1902,8 +1902,8 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1902
1902
  const animationEndHandlerRef = useRef(null);
1903
1903
  const appearAnimationEndHandlerRef = useRef(null);
1904
1904
  const dragStartRef = useRef(null);
1905
- const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1906
- const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.caption;
1905
+ const hasDraggedRef = useRef(false);
1906
+ const { appear, triggers, slider, thumbnail, controls, area, imageCaption, layout } = settings.lightboxBlock;
1907
1907
  const { appearClass, backdropAppearClass, backdropDisappearClass, disappearClass } = getAnimationClasses(appear.type, appear.direction);
1908
1908
  useEffect(() => {
1909
1909
  const handleLayoutChange = () => {
@@ -1983,6 +1983,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
1983
1983
  return clientX < contentLeft || clientX > contentRight || clientY < contentTop || clientY > contentBottom;
1984
1984
  };
1985
1985
  const handleImageWrapperClick = (e) => {
1986
+ if (hasDraggedRef.current) {
1987
+ hasDraggedRef.current = false;
1988
+ return;
1989
+ }
1986
1990
  const currentImage = content[currentIndex];
1987
1991
  const isCover = (currentImage == null ? void 0 : currentImage.image.objectFit) === "cover";
1988
1992
  let clientX;
@@ -2031,6 +2035,12 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2031
2035
  }
2032
2036
  handleTriggerClick(e.currentTarget, e.clientX, e.clientY);
2033
2037
  };
2038
+ const handleThumbWrapperClick = (e) => {
2039
+ const target = e.target;
2040
+ if (target.classList.contains(classes.thumbsWrapper) || target.classList.contains(classes.thumbsContainer)) {
2041
+ handleImageWrapperClick(e);
2042
+ }
2043
+ };
2034
2044
  useEffect(() => {
2035
2045
  if (!isOpen) return;
2036
2046
  const onKeyDown = (event) => {
@@ -2100,7 +2110,13 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2100
2110
  appearAnimationEndHandlerRef.current = handleAppearAnimationEnd;
2101
2111
  animationTargetRef.current.addEventListener("animationend", handleAppearAnimationEnd);
2102
2112
  }
2103
- const preventScroll = (e) => e.preventDefault();
2113
+ const preventScroll = (e) => {
2114
+ const target = e.target;
2115
+ if (target && (target.closest(`.${classes.thumbsWrapper}`) || target.closest(`.${classes.thumbsContainer}`))) {
2116
+ return;
2117
+ }
2118
+ e.preventDefault();
2119
+ };
2104
2120
  document.addEventListener("touchmove", preventScroll, { passive: false });
2105
2121
  return () => {
2106
2122
  document.body.style.overflow = originalOverflow;
@@ -2119,6 +2135,10 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2119
2135
  e.stopPropagation();
2120
2136
  return;
2121
2137
  }
2138
+ if (hasDraggedRef.current) {
2139
+ hasDraggedRef.current = false;
2140
+ return;
2141
+ }
2122
2142
  const target = e.target;
2123
2143
  if (target && (target.closest(`.${classes.thumbsContainer}`) || target.closest(`.${classes.thumbItem}`))) {
2124
2144
  return;
@@ -2154,40 +2174,101 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2154
2174
  document.removeEventListener("touchend", handleTouchEnd);
2155
2175
  };
2156
2176
  }, [isOpen, handleClose, currentIndex, content]);
2157
- const needsCustomVerticalDrag = slider.type === "scale" && slider.direction === "vert" && triggers.type === "drag";
2177
+ const needsCustomVerticalDrag = (slider.type === "scale" || slider.type === "fade") && slider.direction === "vert" && triggers.type === "drag";
2158
2178
  useEffect(() => {
2159
2179
  var _a, _b;
2160
2180
  if (!isOpen || !needsCustomVerticalDrag || !((_b = (_a = lightboxRef.current) == null ? void 0 : _a.splide) == null ? void 0 : _b.root)) return;
2161
2181
  const container = lightboxRef.current.splide.root;
2162
2182
  const DRAG_THRESHOLD = 30;
2163
- const handlePointerDown = (e) => {
2164
- dragStartRef.current = { x: e.clientX, y: e.clientY };
2183
+ const handleMove = (clientX, clientY) => {
2184
+ if (dragStartRef.current) {
2185
+ const deltaX = Math.abs(clientX - dragStartRef.current.x);
2186
+ const deltaY = Math.abs(clientY - dragStartRef.current.y);
2187
+ if (deltaX > 0 || deltaY > 0) {
2188
+ hasDraggedRef.current = true;
2189
+ }
2190
+ }
2165
2191
  };
2166
2192
  const handlePointerMove = (e) => {
2167
- if (dragStartRef.current) e.preventDefault();
2193
+ if (dragStartRef.current) {
2194
+ e.preventDefault();
2195
+ handleMove(e.clientX, e.clientY);
2196
+ }
2168
2197
  };
2169
- const handlePointerUp = (e) => {
2198
+ const handleTouchMove = (e) => {
2199
+ if (dragStartRef.current && e.touches.length > 0) {
2200
+ e.preventDefault();
2201
+ handleMove(e.touches[0].clientX, e.touches[0].clientY);
2202
+ }
2203
+ };
2204
+ const handleUp = (clientX, clientY) => {
2170
2205
  if (!dragStartRef.current || !lightboxRef.current) {
2171
2206
  dragStartRef.current = null;
2172
2207
  return;
2173
2208
  }
2174
- const deltaX = Math.abs(e.clientX - dragStartRef.current.x);
2175
- const deltaY = Math.abs(e.clientY - dragStartRef.current.y);
2209
+ const deltaX = Math.abs(clientX - dragStartRef.current.x);
2210
+ const deltaY = Math.abs(clientY - dragStartRef.current.y);
2176
2211
  if (deltaY > DRAG_THRESHOLD && deltaY > deltaX) {
2177
- lightboxRef.current.go(e.clientY < dragStartRef.current.y ? "+1" : "-1");
2212
+ lightboxRef.current.go(clientY < dragStartRef.current.y ? "+1" : "-1");
2178
2213
  }
2179
2214
  dragStartRef.current = null;
2180
2215
  };
2216
+ const handlePointerUp = (e) => {
2217
+ if (!dragStartRef.current) {
2218
+ document.removeEventListener("pointerup", handlePointerUp);
2219
+ document.removeEventListener("pointercancel", handlePointerUp);
2220
+ document.removeEventListener("pointermove", handlePointerMove);
2221
+ return;
2222
+ }
2223
+ handleUp(e.clientX, e.clientY);
2224
+ document.removeEventListener("pointerup", handlePointerUp);
2225
+ document.removeEventListener("pointercancel", handlePointerUp);
2226
+ document.removeEventListener("pointermove", handlePointerMove);
2227
+ };
2228
+ const handleTouchEnd = (e) => {
2229
+ if (!dragStartRef.current) {
2230
+ document.removeEventListener("touchend", handleTouchEnd);
2231
+ document.removeEventListener("touchcancel", handleTouchEnd);
2232
+ document.removeEventListener("touchmove", handleTouchMove);
2233
+ return;
2234
+ }
2235
+ if (e.changedTouches.length > 0) {
2236
+ const touch = e.changedTouches[0];
2237
+ handleUp(touch.clientX, touch.clientY);
2238
+ }
2239
+ document.removeEventListener("touchend", handleTouchEnd);
2240
+ document.removeEventListener("touchcancel", handleTouchEnd);
2241
+ document.removeEventListener("touchmove", handleTouchMove);
2242
+ };
2243
+ const handlePointerDown = (e) => {
2244
+ dragStartRef.current = { x: e.clientX, y: e.clientY };
2245
+ hasDraggedRef.current = false;
2246
+ document.addEventListener("pointermove", handlePointerMove, { passive: false });
2247
+ document.addEventListener("pointerup", handlePointerUp);
2248
+ document.addEventListener("pointercancel", handlePointerUp);
2249
+ };
2250
+ const handleTouchStart = (e) => {
2251
+ if (e.touches.length > 0) {
2252
+ dragStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
2253
+ hasDraggedRef.current = false;
2254
+ document.addEventListener("touchmove", handleTouchMove, { passive: false });
2255
+ document.addEventListener("touchend", handleTouchEnd);
2256
+ document.addEventListener("touchcancel", handleTouchEnd);
2257
+ }
2258
+ };
2181
2259
  container.addEventListener("pointerdown", handlePointerDown);
2182
- container.addEventListener("pointermove", handlePointerMove, { passive: false });
2183
- container.addEventListener("pointerup", handlePointerUp);
2184
- container.addEventListener("pointercancel", handlePointerUp);
2260
+ container.addEventListener("touchstart", handleTouchStart);
2185
2261
  return () => {
2186
2262
  container.removeEventListener("pointerdown", handlePointerDown);
2187
- container.removeEventListener("pointermove", handlePointerMove);
2188
- container.removeEventListener("pointerup", handlePointerUp);
2189
- container.removeEventListener("pointercancel", handlePointerUp);
2263
+ container.removeEventListener("touchstart", handleTouchStart);
2264
+ document.removeEventListener("pointermove", handlePointerMove);
2265
+ document.removeEventListener("pointerup", handlePointerUp);
2266
+ document.removeEventListener("pointercancel", handlePointerUp);
2267
+ document.removeEventListener("touchmove", handleTouchMove);
2268
+ document.removeEventListener("touchend", handleTouchEnd);
2269
+ document.removeEventListener("touchcancel", handleTouchEnd);
2190
2270
  dragStartRef.current = null;
2271
+ hasDraggedRef.current = false;
2191
2272
  };
2192
2273
  }, [isOpen, needsCustomVerticalDrag, splideKey]);
2193
2274
  const backdropStyles = {
@@ -2347,40 +2428,43 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2347
2428
  const positionStyles = getPositionStyles(area.closeIconAlign, area.closeIconOffset, isEditor);
2348
2429
  const scaleTransform = `scale(${area.closeIconScale})`;
2349
2430
  const combinedTransform = positionStyles.transform ? `${positionStyles.transform} ${scaleTransform}` : scaleTransform;
2350
- return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor, hoverFill: area.closeIconHover }) });
2431
+ return /* @__PURE__ */ jsx("button", { className: classes.closeButton, style: { ...positionStyles, transform: combinedTransform }, onClick: handleClose, "aria-label": "Close lightbox", children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.closeIconColor ?? "#000000", hoverFill: area.closeIconHover ?? "#cccccc" }) });
2432
+ })(),
2433
+ imageCaption.isActive && lightboxStyles.imageCaption && (() => {
2434
+ const { widthSettings, fontSettings, letterSpacing, textAlign, wordSpacing, fontSizeLineHeight, textAppearance, color } = lightboxStyles.imageCaption;
2435
+ return /* @__PURE__ */ jsx(
2436
+ "div",
2437
+ {
2438
+ className: classes.caption,
2439
+ style: {
2440
+ ...getPositionStyles(imageCaption.alignment, imageCaption.offset, isEditor),
2441
+ fontFamily: fontSettings.fontFamily,
2442
+ fontWeight: fontSettings.fontWeight,
2443
+ fontStyle: fontSettings.fontStyle,
2444
+ width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
2445
+ letterSpacing: scalingValue(letterSpacing, isEditor),
2446
+ wordSpacing: scalingValue(wordSpacing, isEditor),
2447
+ textAlign,
2448
+ fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
2449
+ lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
2450
+ textTransform: textAppearance.textTransform ?? "none",
2451
+ textDecoration: textAppearance.textDecoration ?? "none",
2452
+ fontVariant: textAppearance.fontVariant ?? "normal",
2453
+ color
2454
+ },
2455
+ onClick: (e) => e.stopPropagation(),
2456
+ children: /* @__PURE__ */ jsx(
2457
+ "div",
2458
+ {
2459
+ "data-styles": "caption",
2460
+ className: classes.captionTextInner,
2461
+ style: { ["--link-hover-color"]: imageCaption.hover },
2462
+ children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2463
+ }
2464
+ )
2465
+ }
2466
+ );
2351
2467
  })(),
2352
- caption2.isActive && /* @__PURE__ */ jsx(
2353
- "div",
2354
- {
2355
- className: classes.caption,
2356
- style: {
2357
- ...getPositionStyles(caption2.alignment, caption2.offset, isEditor),
2358
- fontFamily: fontSettings.fontFamily,
2359
- fontWeight: fontSettings.fontWeight,
2360
- fontStyle: fontSettings.fontStyle,
2361
- width: widthSettings.sizing === "auto" ? "max-content" : scalingValue(widthSettings.width, isEditor),
2362
- letterSpacing: scalingValue(letterSpacing, isEditor),
2363
- wordSpacing: scalingValue(wordSpacing, isEditor),
2364
- textAlign,
2365
- fontSize: scalingValue(fontSizeLineHeight.fontSize, isEditor),
2366
- lineHeight: scalingValue(fontSizeLineHeight.lineHeight, isEditor),
2367
- textTransform: textAppearance.textTransform ?? "none",
2368
- textDecoration: textAppearance.textDecoration ?? "none",
2369
- fontVariant: textAppearance.fontVariant ?? "normal",
2370
- color
2371
- },
2372
- onClick: (e) => e.stopPropagation(),
2373
- children: /* @__PURE__ */ jsx(
2374
- "div",
2375
- {
2376
- "data-styles": "caption",
2377
- className: classes.captionTextInner,
2378
- style: { ["--link-hover-color"]: caption2.hover },
2379
- children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption })
2380
- }
2381
- )
2382
- }
2383
- ),
2384
2468
  thumbnail.isActive && (() => {
2385
2469
  const [vertical, horizontal] = thumbnail.position.split("-");
2386
2470
  const effectivePosition = slider.direction === "horiz" ? `${vertical}-left` : thumbnail.position;
@@ -2401,6 +2485,7 @@ const Lightbox = ({ isOpen, onClose, content, lightboxStyles, settings, portalId
2401
2485
  "div",
2402
2486
  {
2403
2487
  className: classes.thumbsWrapper,
2488
+ onClick: (e) => handleThumbWrapperClick(e),
2404
2489
  style: {
2405
2490
  position: isEditor ? "absolute" : "fixed",
2406
2491
  ...thumbsPositionStyles,
@@ -3040,7 +3125,7 @@ const LightboxComponent = {
3040
3125
  }
3041
3126
  }
3042
3127
  },
3043
- caption: {
3128
+ imageCaption: {
3044
3129
  title: "DESC",
3045
3130
  icon: "text-icon",
3046
3131
  tooltip: "Description",
@@ -3162,7 +3247,7 @@ const LightboxComponent = {
3162
3247
  closeIconOffset: { x: 0, y: 0 },
3163
3248
  closeIconScale: 1
3164
3249
  },
3165
- caption: {
3250
+ imageCaption: {
3166
3251
  isActive: true,
3167
3252
  alignment: "middle-center",
3168
3253
  offset: { x: 0, y: 0 },
@@ -3232,7 +3317,7 @@ const LightboxComponent = {
3232
3317
  closeIconOffset: { x: 0, y: 0 },
3233
3318
  closeIconScale: 1
3234
3319
  },
3235
- caption: {
3320
+ imageCaption: {
3236
3321
  isActive: true,
3237
3322
  alignment: "middle-center",
3238
3323
  offset: { x: 0, y: 0 },
@@ -3302,7 +3387,7 @@ const LightboxComponent = {
3302
3387
  closeIconOffset: { x: 0, y: 0 },
3303
3388
  closeIconScale: 1
3304
3389
  },
3305
- caption: {
3390
+ imageCaption: {
3306
3391
  isActive: true,
3307
3392
  alignment: "middle-center",
3308
3393
  offset: { x: 0, y: 0 },
@@ -3454,7 +3539,7 @@ const LightboxComponent = {
3454
3539
  layoutBased: true,
3455
3540
  type: "object",
3456
3541
  properties: {
3457
- caption: {
3542
+ imageCaption: {
3458
3543
  dataName: "caption",
3459
3544
  type: "object",
3460
3545
  properties: {
@@ -3552,7 +3637,7 @@ const LightboxComponent = {
3552
3637
  }
3553
3638
  },
3554
3639
  default: {
3555
- caption: {
3640
+ imageCaption: {
3556
3641
  widthSettings: {
3557
3642
  width: 0.13,
3558
3643
  sizing: "auto"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.14-alpha.5",
3
+ "version": "0.1.15",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",