@cntrl-site/components 0.1.7 → 0.1.8-1

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 (10) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +2 -2
  3. package/dist/Components/ControlSlider/ControlSlider.d.ts +1 -1
  4. package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +41 -10
  5. package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts +4 -2
  6. package/dist/Components/Lightbox/Lightbox.d.ts +1 -1
  7. package/dist/components.css +1 -1
  8. package/dist/index.js +189 -61
  9. package/dist/index.mjs +190 -62
  10. package/package.json +68 -68
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 GX Platform
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 GX Platform
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,3 @@
1
- # Control Components
2
-
1
+ # Control Components
2
+
3
3
  This is custom components for control editor and public websites.
package/dist/Components/ControlSlider/ControlSlider.d.ts CHANGED
@@ -4,7 +4,7 @@ interface SliderProps {
4
4
  styles: SliderStyles;
5
5
  isEditor?: boolean;
6
6
  }
7
- export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): JSX.Element;
7
+ export declare function ControlSlider({ settings, content, styles: sliderStyles, isEditor }: SliderProps): import("react/jsx-runtime").JSX.Element;
8
8
  type SliderItem = {
9
9
  image: {
10
10
  url: string;
package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts CHANGED
@@ -72,6 +72,14 @@ export declare const ControlImageRevealSliderComponent: {
72
72
  };
73
73
  enum: string[];
74
74
  };
75
+ target: {
76
+ type: string;
77
+ title: string;
78
+ display: {
79
+ type: string;
80
+ };
81
+ enum: string[];
82
+ };
75
83
  defaultCursor: {
76
84
  type: string[];
77
85
  title: string;
@@ -80,6 +88,17 @@ export declare const ControlImageRevealSliderComponent: {
80
88
  visible: boolean;
81
89
  };
82
90
  };
91
+ defaultCursorScale: {
92
+ type: string;
93
+ title: string;
94
+ min: number;
95
+ max: number;
96
+ step: number;
97
+ display: {
98
+ type: string;
99
+ visible: boolean;
100
+ };
101
+ };
83
102
  hoverCursor: {
84
103
  type: string[];
85
104
  title: string;
@@ -88,6 +107,17 @@ export declare const ControlImageRevealSliderComponent: {
88
107
  visible: boolean;
89
108
  };
90
109
  };
110
+ hoverCursorScale: {
111
+ type: string;
112
+ title: string;
113
+ min: number;
114
+ max: number;
115
+ step: number;
116
+ display: {
117
+ type: string;
118
+ visible: boolean;
119
+ };
120
+ };
91
121
  };
92
122
  };
93
123
  position: {
@@ -105,13 +135,7 @@ export declare const ControlImageRevealSliderComponent: {
105
135
  };
106
136
  visible: {
107
137
  type: string;
108
- display: {
109
- type: string;
110
- };
111
- enum: string[];
112
- };
113
- target: {
114
- type: string;
138
+ title: string;
115
139
  display: {
116
140
  type: string;
117
141
  };
@@ -131,13 +155,15 @@ export declare const ControlImageRevealSliderComponent: {
131
155
  };
132
156
  cursor: {
133
157
  cursorType: string;
158
+ target: string;
134
159
  defaultCursor: null;
160
+ defaultCursorScale: number;
135
161
  hoverCursor: null;
162
+ hoverCursorScale: number;
136
163
  };
137
164
  position: {
138
165
  revealPosition: string;
139
166
  visible: string;
140
- target: string;
141
167
  };
142
168
  };
143
169
  displayRules: ({
@@ -150,10 +176,15 @@ export declare const ControlImageRevealSliderComponent: {
150
176
  value: boolean;
151
177
  };
152
178
  } | {
153
- if: {
179
+ if: ({
154
180
  name: string;
155
181
  value: string;
156
- }[];
182
+ isNotEqual?: undefined;
183
+ } | {
184
+ name: string;
185
+ value: null;
186
+ isNotEqual: boolean;
187
+ })[];
157
188
  then: {
158
189
  name: string;
159
190
  value: boolean;
package/dist/Components/ImageRevealSlider/ImageRevealSlider.d.ts CHANGED
@@ -14,13 +14,15 @@ type ImageRevealSliderImageSize = {
14
14
  };
15
15
  type ImageRevealSliderCursor = {
16
16
  cursorType: 'system' | 'custom';
17
+ target: 'area' | 'image';
18
+ defaultCursorScale: number;
17
19
  defaultCursor: string | null;
20
+ hoverCursorScale: number;
18
21
  hoverCursor: string | null;
19
22
  };
20
23
  type ImageRevealSliderPosition = {
21
24
  revealPosition: 'random' | 'same' | 'on Click';
22
25
  visible: 'all' | 'last One';
23
- target: 'area' | 'image';
24
26
  };
25
27
  type ImageRevealSliderSettings = {
26
28
  imageSize: ImageRevealSliderImageSize;
@@ -34,5 +36,5 @@ type ImageRevealSliderItem = {
34
36
  };
35
37
  link: string;
36
38
  };
37
- export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): JSX.Element;
39
+ export declare function ImageRevealSlider({ settings, content, isEditor }: ImageRevealSliderProps): import("react/jsx-runtime").JSX.Element;
38
40
  export {};
package/dist/Components/Lightbox/Lightbox.d.ts CHANGED
@@ -7,7 +7,7 @@ type LightboxGalleryProps = {
7
7
  activeEvent: 'close' | 'open';
8
8
  isEditor?: boolean;
9
9
  };
10
- export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => JSX.Element;
10
+ export declare const LightboxGallery: ({ settings, content, styles, portalId, activeEvent, isEditor }: LightboxGalleryProps) => import("react/jsx-runtime").JSX.Element;
11
11
  type LightboxImage = {
12
12
  image: {
13
13
  url: string;
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{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}.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:auto;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__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__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.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;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.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}.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:auto;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__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__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{display:flex;align-items:center;justify-content:center;pointer-events:auto}.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;cursor:pointer;overflow:hidden;transition:transform .1s ease,opacity .1s ease}.LightBox-module__thumbItem___HvnF3:hover{opacity:var(--thumb-hover)!important}.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
@@ -1100,14 +1100,77 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1100
1100
  return { width, height, finalWidth: `${width}px` };
1101
1101
  }
1102
1102
  function ImageRevealSlider({ settings, content, isEditor }) {
1103
- const divRef = React.useRef(null);
1103
+ const [divRef, setDivRef] = React.useState(null);
1104
1104
  const [placedImages, setPlacedImages] = React.useState([]);
1105
1105
  const [counter, setCounter] = React.useState(0);
1106
1106
  const imageIdCounter = React.useRef(0);
1107
- const defaultImageCount = 1;
1107
+ const defaultScale = 32;
1108
+ const [cursorCenter, setCursorCenter] = React.useState({ x: 0, y: 0 });
1109
+ const [cursorSize, setCursorSize] = React.useState({ w: 32, h: 32 });
1110
+ const [customCursorImg, setCustomCursorImg] = React.useState("none");
1111
+ const lastMousePos = React.useRef({ x: 0, y: 0 });
1112
+ const [isInside, setIsInside] = React.useState(false);
1108
1113
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1109
- const { revealPosition, visible, target } = settings.position;
1110
- const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1114
+ const { revealPosition, visible } = settings.position;
1115
+ const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1116
+ React.useEffect(() => {
1117
+ if (!divRef) return;
1118
+ const updateCursorPosition = (clientX, clientY) => {
1119
+ const rect = divRef.getBoundingClientRect();
1120
+ const x = clientX - rect.left;
1121
+ const y = clientY - rect.top;
1122
+ setCursorCenter({ x, y });
1123
+ if (cursorType === "system") {
1124
+ setCustomCursorImg("none");
1125
+ setCursorSize({ w: defaultScale, h: defaultScale });
1126
+ return;
1127
+ }
1128
+ const cx = x;
1129
+ const cy = y;
1130
+ const el = document.elementFromPoint(rect.left + cx, rect.top + cy);
1131
+ if (el && el.closest("a")) {
1132
+ setCustomCursorImg("none");
1133
+ setCursorSize({ w: defaultScale, h: defaultScale });
1134
+ return;
1135
+ }
1136
+ const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
1137
+ setCustomCursorImg(next.img);
1138
+ setCursorSize({ w: next.w, h: next.h });
1139
+ };
1140
+ const mouseMove = (e) => {
1141
+ e.stopPropagation();
1142
+ lastMousePos.current = { x: e.clientX, y: e.clientY };
1143
+ updateCursorPosition(e.clientX, e.clientY);
1144
+ };
1145
+ const handleScroll = () => {
1146
+ if (!isInside) return;
1147
+ updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1148
+ };
1149
+ divRef.addEventListener("mousemove", mouseMove);
1150
+ window.addEventListener("scroll", handleScroll, true);
1151
+ return () => {
1152
+ divRef.removeEventListener("mousemove", mouseMove);
1153
+ window.removeEventListener("scroll", handleScroll, true);
1154
+ };
1155
+ }, [
1156
+ divRef,
1157
+ isInside,
1158
+ cursorCenter,
1159
+ cursorType,
1160
+ target,
1161
+ hoverCursor,
1162
+ defaultCursor,
1163
+ hoverCursorScale,
1164
+ defaultCursorScale,
1165
+ placedImages,
1166
+ window.scrollY
1167
+ ]);
1168
+ React.useEffect(() => {
1169
+ if (!isInside) {
1170
+ setCustomCursorImg("none");
1171
+ setCursorSize({ w: 0, h: 0 });
1172
+ }
1173
+ }, [isInside]);
1111
1174
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1112
1175
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1113
1176
  imgData.image.url,
@@ -1135,35 +1198,31 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1135
1198
  width: finalWidth
1136
1199
  };
1137
1200
  };
1138
- const defaultContentUrls = React.useMemo(() => {
1139
- const defaultContentLength = Math.min(content.length, defaultImageCount);
1140
- return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1141
- }, [content]);
1142
1201
  React.useEffect(() => {
1143
- if (!divRef.current || content.length === 0) return;
1144
- const rect = divRef.current.getBoundingClientRect();
1202
+ if (!divRef || content.length === 0) return;
1203
+ const rect = divRef.getBoundingClientRect();
1145
1204
  const containerWidth = rect.width;
1146
1205
  const containerHeight = rect.height;
1147
1206
  const defaultPlaced = [];
1148
1207
  const placeImages = async () => {
1149
- for (let i = 0; i < defaultImageCount && i < content.length; i++) {
1208
+ for (let i = 0; i < 1 && i < content.length; i++) {
1150
1209
  const imgData = content[i];
1151
1210
  const newImg = await createNewImage(imgData, containerWidth, containerHeight);
1152
1211
  defaultPlaced.push(newImg);
1153
1212
  }
1154
1213
  setPlacedImages(defaultPlaced);
1155
- setCounter(defaultImageCount % content.length);
1214
+ setCounter(1 % content.length);
1156
1215
  };
1157
1216
  placeImages();
1158
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1217
+ }, [sizeType, customWidth, randomRange, revealPosition, divRef]);
1159
1218
  React.useEffect(() => {
1160
1219
  if (visible === "last One") {
1161
1220
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1162
1221
  }
1163
1222
  }, [visible]);
1164
1223
  const handleClick = async (e) => {
1165
- if (!divRef.current) return;
1166
- const rect = divRef.current.getBoundingClientRect();
1224
+ if (!divRef) return;
1225
+ const rect = divRef.getBoundingClientRect();
1167
1226
  const clickX = e.clientX - rect.left;
1168
1227
  const clickY = e.clientY - rect.top;
1169
1228
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1183,46 +1242,68 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1183
1242
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1184
1243
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1185
1244
  };
1186
- return /* @__PURE__ */ jsxRuntime.jsx(
1245
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1187
1246
  "div",
1188
1247
  {
1189
- ref: divRef,
1248
+ ref: setDivRef,
1190
1249
  onClick: handleClick,
1250
+ onMouseEnter: () => setIsInside(true),
1251
+ onMouseLeave: () => setIsInside(false),
1191
1252
  className: styles.imageRevealSlider,
1192
- style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
1193
- children: placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1194
- "div",
1195
- {
1196
- className: styles.wrapper,
1197
- style: {
1198
- top: `${img2.y}px`,
1199
- left: `${img2.x}px`,
1200
- position: "absolute",
1201
- transform: "translate(-50%, -50%)",
1202
- width: img2.width ?? "auto",
1203
- height: "auto",
1204
- cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
1205
- },
1206
- children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1207
- "img",
1208
- {
1209
- src: img2.url,
1210
- alt: img2.name,
1211
- className: styles.image
1212
- },
1213
- img2.id
1214
- ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1215
- "img",
1216
- {
1217
- src: img2.url,
1218
- alt: img2.name,
1219
- className: styles.image
1253
+ style: { cursor: customCursorImg === "none" ? "default" : "none" },
1254
+ children: [
1255
+ placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1256
+ "div",
1257
+ {
1258
+ className: styles.wrapper,
1259
+ style: {
1260
+ top: `${img2.y}px`,
1261
+ left: `${img2.x}px`,
1262
+ position: "absolute",
1263
+ transform: "translate(-50%, -50%)",
1264
+ width: img2.width ?? "auto",
1265
+ height: "auto",
1266
+ cursor: customCursorImg === "none" ? "default" : "none"
1220
1267
  },
1221
- img2.id
1222
- )
1223
- },
1224
- img2.id
1225
- ))
1268
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1269
+ "img",
1270
+ {
1271
+ src: img2.url,
1272
+ alt: img2.name,
1273
+ className: styles.image
1274
+ },
1275
+ img2.id
1276
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1277
+ "img",
1278
+ {
1279
+ src: img2.url,
1280
+ alt: img2.name,
1281
+ className: styles.image
1282
+ },
1283
+ img2.id
1284
+ )
1285
+ },
1286
+ img2.id
1287
+ )),
1288
+ isInside && /* @__PURE__ */ jsxRuntime.jsx(
1289
+ "div",
1290
+ {
1291
+ className: "cursor",
1292
+ style: {
1293
+ left: `${cursorCenter.x}px`,
1294
+ top: `${cursorCenter.y}px`,
1295
+ width: cursorSize.w,
1296
+ height: cursorSize.h,
1297
+ transform: "translate(-50%, -50%)",
1298
+ backgroundImage: `url('${customCursorImg}')`,
1299
+ backgroundSize: "cover",
1300
+ backgroundPosition: "center",
1301
+ position: "absolute",
1302
+ pointerEvents: "none"
1303
+ }
1304
+ }
1305
+ )
1306
+ ]
1226
1307
  }
1227
1308
  );
1228
1309
  }
@@ -1299,6 +1380,14 @@ const ControlImageRevealSliderComponent = {
1299
1380
  },
1300
1381
  enum: ["system", "custom"]
1301
1382
  },
1383
+ target: {
1384
+ type: "string",
1385
+ title: "Target",
1386
+ display: {
1387
+ type: "ratio-group"
1388
+ },
1389
+ enum: ["area", "image"]
1390
+ },
1302
1391
  defaultCursor: {
1303
1392
  type: ["string", "null"],
1304
1393
  title: "Default",
@@ -1307,6 +1396,17 @@ const ControlImageRevealSliderComponent = {
1307
1396
  visible: false
1308
1397
  }
1309
1398
  },
1399
+ defaultCursorScale: {
1400
+ type: "number",
1401
+ title: "Scale",
1402
+ min: 1,
1403
+ max: 5,
1404
+ step: 0.1,
1405
+ display: {
1406
+ type: "range-control",
1407
+ visible: false
1408
+ }
1409
+ },
1310
1410
  hoverCursor: {
1311
1411
  type: ["string", "null"],
1312
1412
  title: "Hover",
@@ -1314,6 +1414,17 @@ const ControlImageRevealSliderComponent = {
1314
1414
  type: "settings-image-input",
1315
1415
  visible: false
1316
1416
  }
1417
+ },
1418
+ hoverCursorScale: {
1419
+ type: "number",
1420
+ title: "Scale",
1421
+ min: 1,
1422
+ max: 5,
1423
+ step: 0.1,
1424
+ display: {
1425
+ type: "range-control",
1426
+ visible: false
1427
+ }
1317
1428
  }
1318
1429
  }
1319
1430
  },
@@ -1332,17 +1443,11 @@ const ControlImageRevealSliderComponent = {
1332
1443
  },
1333
1444
  visible: {
1334
1445
  type: "string",
1446
+ title: "Visible",
1335
1447
  display: {
1336
1448
  type: "ratio-group"
1337
1449
  },
1338
1450
  enum: ["all", "last One"]
1339
- },
1340
- target: {
1341
- type: "string",
1342
- display: {
1343
- type: "ratio-group"
1344
- },
1345
- enum: ["area", "image"]
1346
1451
  }
1347
1452
  }
1348
1453
  }
@@ -1358,13 +1463,15 @@ const ControlImageRevealSliderComponent = {
1358
1463
  },
1359
1464
  cursor: {
1360
1465
  cursorType: "system",
1466
+ target: "area",
1361
1467
  defaultCursor: null,
1362
- hoverCursor: null
1468
+ defaultCursorScale: 2,
1469
+ hoverCursor: null,
1470
+ hoverCursorScale: 2
1363
1471
  },
1364
1472
  position: {
1365
1473
  revealPosition: "random",
1366
- visible: "all",
1367
- target: "area"
1474
+ visible: "all"
1368
1475
  }
1369
1476
  },
1370
1477
  displayRules: [
@@ -1390,7 +1497,7 @@ const ControlImageRevealSliderComponent = {
1390
1497
  },
1391
1498
  {
1392
1499
  if: [
1393
- { name: "position.target", value: "image" },
1500
+ { name: "cursor.target", value: "image" },
1394
1501
  { name: "cursor.cursorType", value: "custom" }
1395
1502
  ],
1396
1503
  then: {
@@ -1398,6 +1505,17 @@ const ControlImageRevealSliderComponent = {
1398
1505
  value: true
1399
1506
  }
1400
1507
  },
1508
+ {
1509
+ if: [
1510
+ { name: "cursor.target", value: "image" },
1511
+ { name: "cursor.cursorType", value: "custom" },
1512
+ { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1513
+ ],
1514
+ then: {
1515
+ name: "properties.cursor.properties.defaultCursorScale.display.visible",
1516
+ value: true
1517
+ }
1518
+ },
1401
1519
  {
1402
1520
  if: {
1403
1521
  name: "cursor.cursorType",
@@ -1407,6 +1525,16 @@ const ControlImageRevealSliderComponent = {
1407
1525
  name: "properties.cursor.properties.hoverCursor.display.visible",
1408
1526
  value: true
1409
1527
  }
1528
+ },
1529
+ {
1530
+ if: [
1531
+ { name: "cursor.cursorType", value: "custom" },
1532
+ { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1533
+ ],
1534
+ then: {
1535
+ name: "properties.cursor.properties.hoverCursorScale.display.visible",
1536
+ value: true
1537
+ }
1410
1538
  }
1411
1539
  ]
1412
1540
  },
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
- import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
2
+ import React, { useState, useEffect, useRef, useCallback } from "react";
3
3
  import { Splide, SplideSlide } from "@splidejs/react-splide";
4
4
  import cn from "classnames";
5
5
  import { createPortal } from "react-dom";
@@ -1098,14 +1098,77 @@ async function calculateImageWidthHeight(imgUrl, sizeType, customWidth, randomRa
1098
1098
  return { width, height, finalWidth: `${width}px` };
1099
1099
  }
1100
1100
  function ImageRevealSlider({ settings, content, isEditor }) {
1101
- const divRef = useRef(null);
1101
+ const [divRef, setDivRef] = useState(null);
1102
1102
  const [placedImages, setPlacedImages] = useState([]);
1103
1103
  const [counter, setCounter] = useState(0);
1104
1104
  const imageIdCounter = useRef(0);
1105
- const defaultImageCount = 1;
1105
+ const defaultScale = 32;
1106
+ const [cursorCenter, setCursorCenter] = useState({ x: 0, y: 0 });
1107
+ const [cursorSize, setCursorSize] = useState({ w: 32, h: 32 });
1108
+ const [customCursorImg, setCustomCursorImg] = useState("none");
1109
+ const lastMousePos = useRef({ x: 0, y: 0 });
1110
+ const [isInside, setIsInside] = useState(false);
1106
1111
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1107
- const { revealPosition, visible, target } = settings.position;
1108
- const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1112
+ const { revealPosition, visible } = settings.position;
1113
+ const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1114
+ useEffect(() => {
1115
+ if (!divRef) return;
1116
+ const updateCursorPosition = (clientX, clientY) => {
1117
+ const rect = divRef.getBoundingClientRect();
1118
+ const x = clientX - rect.left;
1119
+ const y = clientY - rect.top;
1120
+ setCursorCenter({ x, y });
1121
+ if (cursorType === "system") {
1122
+ setCustomCursorImg("none");
1123
+ setCursorSize({ w: defaultScale, h: defaultScale });
1124
+ return;
1125
+ }
1126
+ const cx = x;
1127
+ const cy = y;
1128
+ const el = document.elementFromPoint(rect.left + cx, rect.top + cy);
1129
+ if (el && el.closest("a")) {
1130
+ setCustomCursorImg("none");
1131
+ setCursorSize({ w: defaultScale, h: defaultScale });
1132
+ return;
1133
+ }
1134
+ const next = isMouseOverImage(cx, cy, placedImages) || target === "area" ? { img: hoverCursor ?? "none", w: defaultScale * hoverCursorScale, h: defaultScale * hoverCursorScale } : { img: defaultCursor ?? "none", w: defaultScale * defaultCursorScale, h: defaultScale * defaultCursorScale };
1135
+ setCustomCursorImg(next.img);
1136
+ setCursorSize({ w: next.w, h: next.h });
1137
+ };
1138
+ const mouseMove = (e) => {
1139
+ e.stopPropagation();
1140
+ lastMousePos.current = { x: e.clientX, y: e.clientY };
1141
+ updateCursorPosition(e.clientX, e.clientY);
1142
+ };
1143
+ const handleScroll = () => {
1144
+ if (!isInside) return;
1145
+ updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1146
+ };
1147
+ divRef.addEventListener("mousemove", mouseMove);
1148
+ window.addEventListener("scroll", handleScroll, true);
1149
+ return () => {
1150
+ divRef.removeEventListener("mousemove", mouseMove);
1151
+ window.removeEventListener("scroll", handleScroll, true);
1152
+ };
1153
+ }, [
1154
+ divRef,
1155
+ isInside,
1156
+ cursorCenter,
1157
+ cursorType,
1158
+ target,
1159
+ hoverCursor,
1160
+ defaultCursor,
1161
+ hoverCursorScale,
1162
+ defaultCursorScale,
1163
+ placedImages,
1164
+ window.scrollY
1165
+ ]);
1166
+ useEffect(() => {
1167
+ if (!isInside) {
1168
+ setCustomCursorImg("none");
1169
+ setCursorSize({ w: 0, h: 0 });
1170
+ }
1171
+ }, [isInside]);
1109
1172
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1110
1173
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1111
1174
  imgData.image.url,
@@ -1133,35 +1196,31 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1133
1196
  width: finalWidth
1134
1197
  };
1135
1198
  };
1136
- const defaultContentUrls = useMemo(() => {
1137
- const defaultContentLength = Math.min(content.length, defaultImageCount);
1138
- return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1139
- }, [content]);
1140
1199
  useEffect(() => {
1141
- if (!divRef.current || content.length === 0) return;
1142
- const rect = divRef.current.getBoundingClientRect();
1200
+ if (!divRef || content.length === 0) return;
1201
+ const rect = divRef.getBoundingClientRect();
1143
1202
  const containerWidth = rect.width;
1144
1203
  const containerHeight = rect.height;
1145
1204
  const defaultPlaced = [];
1146
1205
  const placeImages = async () => {
1147
- for (let i = 0; i < defaultImageCount && i < content.length; i++) {
1206
+ for (let i = 0; i < 1 && i < content.length; i++) {
1148
1207
  const imgData = content[i];
1149
1208
  const newImg = await createNewImage(imgData, containerWidth, containerHeight);
1150
1209
  defaultPlaced.push(newImg);
1151
1210
  }
1152
1211
  setPlacedImages(defaultPlaced);
1153
- setCounter(defaultImageCount % content.length);
1212
+ setCounter(1 % content.length);
1154
1213
  };
1155
1214
  placeImages();
1156
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1215
+ }, [sizeType, customWidth, randomRange, revealPosition, divRef]);
1157
1216
  useEffect(() => {
1158
1217
  if (visible === "last One") {
1159
1218
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1160
1219
  }
1161
1220
  }, [visible]);
1162
1221
  const handleClick = async (e) => {
1163
- if (!divRef.current) return;
1164
- const rect = divRef.current.getBoundingClientRect();
1222
+ if (!divRef) return;
1223
+ const rect = divRef.getBoundingClientRect();
1165
1224
  const clickX = e.clientX - rect.left;
1166
1225
  const clickY = e.clientY - rect.top;
1167
1226
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1181,46 +1240,68 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1181
1240
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1182
1241
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1183
1242
  };
1184
- return /* @__PURE__ */ jsx(
1243
+ return /* @__PURE__ */ jsxs(
1185
1244
  "div",
1186
1245
  {
1187
- ref: divRef,
1246
+ ref: setDivRef,
1188
1247
  onClick: handleClick,
1248
+ onMouseEnter: () => setIsInside(true),
1249
+ onMouseLeave: () => setIsInside(false),
1189
1250
  className: styles.imageRevealSlider,
1190
- style: { cursor: cursorType !== "system" && defaultCursor ? `url(${target === "area" ? hoverCursor : defaultCursor}), auto` : "default" },
1191
- children: placedImages.map((img2) => /* @__PURE__ */ jsx(
1192
- "div",
1193
- {
1194
- className: styles.wrapper,
1195
- style: {
1196
- top: `${img2.y}px`,
1197
- left: `${img2.x}px`,
1198
- position: "absolute",
1199
- transform: "translate(-50%, -50%)",
1200
- width: img2.width ?? "auto",
1201
- height: "auto",
1202
- cursor: cursorType !== "system" && hoverCursor ? `url(${hoverCursor}), auto` : "default"
1203
- },
1204
- children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1205
- "img",
1206
- {
1207
- src: img2.url,
1208
- alt: img2.name,
1209
- className: styles.image
1210
- },
1211
- img2.id
1212
- ) }) : /* @__PURE__ */ jsx(
1213
- "img",
1214
- {
1215
- src: img2.url,
1216
- alt: img2.name,
1217
- className: styles.image
1251
+ style: { cursor: customCursorImg === "none" ? "default" : "none" },
1252
+ children: [
1253
+ placedImages.map((img2) => /* @__PURE__ */ jsx(
1254
+ "div",
1255
+ {
1256
+ className: styles.wrapper,
1257
+ style: {
1258
+ top: `${img2.y}px`,
1259
+ left: `${img2.x}px`,
1260
+ position: "absolute",
1261
+ transform: "translate(-50%, -50%)",
1262
+ width: img2.width ?? "auto",
1263
+ height: "auto",
1264
+ cursor: customCursorImg === "none" ? "default" : "none"
1218
1265
  },
1219
- img2.id
1220
- )
1221
- },
1222
- img2.id
1223
- ))
1266
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1267
+ "img",
1268
+ {
1269
+ src: img2.url,
1270
+ alt: img2.name,
1271
+ className: styles.image
1272
+ },
1273
+ img2.id
1274
+ ) }) : /* @__PURE__ */ jsx(
1275
+ "img",
1276
+ {
1277
+ src: img2.url,
1278
+ alt: img2.name,
1279
+ className: styles.image
1280
+ },
1281
+ img2.id
1282
+ )
1283
+ },
1284
+ img2.id
1285
+ )),
1286
+ isInside && /* @__PURE__ */ jsx(
1287
+ "div",
1288
+ {
1289
+ className: "cursor",
1290
+ style: {
1291
+ left: `${cursorCenter.x}px`,
1292
+ top: `${cursorCenter.y}px`,
1293
+ width: cursorSize.w,
1294
+ height: cursorSize.h,
1295
+ transform: "translate(-50%, -50%)",
1296
+ backgroundImage: `url('${customCursorImg}')`,
1297
+ backgroundSize: "cover",
1298
+ backgroundPosition: "center",
1299
+ position: "absolute",
1300
+ pointerEvents: "none"
1301
+ }
1302
+ }
1303
+ )
1304
+ ]
1224
1305
  }
1225
1306
  );
1226
1307
  }
@@ -1297,6 +1378,14 @@ const ControlImageRevealSliderComponent = {
1297
1378
  },
1298
1379
  enum: ["system", "custom"]
1299
1380
  },
1381
+ target: {
1382
+ type: "string",
1383
+ title: "Target",
1384
+ display: {
1385
+ type: "ratio-group"
1386
+ },
1387
+ enum: ["area", "image"]
1388
+ },
1300
1389
  defaultCursor: {
1301
1390
  type: ["string", "null"],
1302
1391
  title: "Default",
@@ -1305,6 +1394,17 @@ const ControlImageRevealSliderComponent = {
1305
1394
  visible: false
1306
1395
  }
1307
1396
  },
1397
+ defaultCursorScale: {
1398
+ type: "number",
1399
+ title: "Scale",
1400
+ min: 1,
1401
+ max: 5,
1402
+ step: 0.1,
1403
+ display: {
1404
+ type: "range-control",
1405
+ visible: false
1406
+ }
1407
+ },
1308
1408
  hoverCursor: {
1309
1409
  type: ["string", "null"],
1310
1410
  title: "Hover",
@@ -1312,6 +1412,17 @@ const ControlImageRevealSliderComponent = {
1312
1412
  type: "settings-image-input",
1313
1413
  visible: false
1314
1414
  }
1415
+ },
1416
+ hoverCursorScale: {
1417
+ type: "number",
1418
+ title: "Scale",
1419
+ min: 1,
1420
+ max: 5,
1421
+ step: 0.1,
1422
+ display: {
1423
+ type: "range-control",
1424
+ visible: false
1425
+ }
1315
1426
  }
1316
1427
  }
1317
1428
  },
@@ -1330,17 +1441,11 @@ const ControlImageRevealSliderComponent = {
1330
1441
  },
1331
1442
  visible: {
1332
1443
  type: "string",
1444
+ title: "Visible",
1333
1445
  display: {
1334
1446
  type: "ratio-group"
1335
1447
  },
1336
1448
  enum: ["all", "last One"]
1337
- },
1338
- target: {
1339
- type: "string",
1340
- display: {
1341
- type: "ratio-group"
1342
- },
1343
- enum: ["area", "image"]
1344
1449
  }
1345
1450
  }
1346
1451
  }
@@ -1356,13 +1461,15 @@ const ControlImageRevealSliderComponent = {
1356
1461
  },
1357
1462
  cursor: {
1358
1463
  cursorType: "system",
1464
+ target: "area",
1359
1465
  defaultCursor: null,
1360
- hoverCursor: null
1466
+ defaultCursorScale: 2,
1467
+ hoverCursor: null,
1468
+ hoverCursorScale: 2
1361
1469
  },
1362
1470
  position: {
1363
1471
  revealPosition: "random",
1364
- visible: "all",
1365
- target: "area"
1472
+ visible: "all"
1366
1473
  }
1367
1474
  },
1368
1475
  displayRules: [
@@ -1388,7 +1495,7 @@ const ControlImageRevealSliderComponent = {
1388
1495
  },
1389
1496
  {
1390
1497
  if: [
1391
- { name: "position.target", value: "image" },
1498
+ { name: "cursor.target", value: "image" },
1392
1499
  { name: "cursor.cursorType", value: "custom" }
1393
1500
  ],
1394
1501
  then: {
@@ -1396,6 +1503,17 @@ const ControlImageRevealSliderComponent = {
1396
1503
  value: true
1397
1504
  }
1398
1505
  },
1506
+ {
1507
+ if: [
1508
+ { name: "cursor.target", value: "image" },
1509
+ { name: "cursor.cursorType", value: "custom" },
1510
+ { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1511
+ ],
1512
+ then: {
1513
+ name: "properties.cursor.properties.defaultCursorScale.display.visible",
1514
+ value: true
1515
+ }
1516
+ },
1399
1517
  {
1400
1518
  if: {
1401
1519
  name: "cursor.cursorType",
@@ -1405,6 +1523,16 @@ const ControlImageRevealSliderComponent = {
1405
1523
  name: "properties.cursor.properties.hoverCursor.display.visible",
1406
1524
  value: true
1407
1525
  }
1526
+ },
1527
+ {
1528
+ if: [
1529
+ { name: "cursor.cursorType", value: "custom" },
1530
+ { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1531
+ ],
1532
+ then: {
1533
+ name: "properties.cursor.properties.hoverCursorScale.display.visible",
1534
+ value: true
1535
+ }
1408
1536
  }
1409
1537
  ]
1410
1538
  },
package/package.json CHANGED
@@ -1,68 +1,68 @@
1
- {
2
- "name": "@cntrl-site/components",
3
- "version": "0.1.7",
4
- "description": "Custom components for control editor and public websites.",
5
- "main": "dist/index.js",
6
- "module": "dist/index.mjs",
7
- "types": "dist/index.d.ts",
8
- "style": "dist/components.css",
9
- "sideEffects": [
10
- "**/*.css"
11
- ],
12
- "exports": {
13
- ".": {
14
- "types": "./dist/index.d.ts",
15
- "import": "./dist/index.mjs",
16
- "require": "./dist/index.js"
17
- },
18
- "./style/components.css": {
19
- "default": "./dist/components.css"
20
- }
21
- },
22
- "scripts": {
23
- "test": "jest",
24
- "dev": "vite development",
25
- "prebuild": "rimraf ./dist",
26
- "build": "vite build",
27
- "prepublishOnly": "cross-env NODE_ENV=production npm run build"
28
- },
29
- "files": [
30
- "dist",
31
- "resources"
32
- ],
33
- "repository": {
34
- "type": "git",
35
- "url": "git+https://github.com/cntrl-site/components.git"
36
- },
37
- "author": "arsen@momdesign.nyc",
38
- "license": "MIT",
39
- "bugs": {
40
- "url": "https://github.com/cntrl-site/components/issues"
41
- },
42
- "homepage": "https://github.com/cntrl-site/components#readme",
43
- "directories": {
44
- "lib": "dist"
45
- },
46
- "dependencies": {
47
- "@antfu/eslint-config": "^3.16.0",
48
- "@splidejs/react-splide": "^0.7.12",
49
- "classnames": "^2.5.1",
50
- "ts-node": "^10.9.1"
51
- },
52
- "devDependencies": {
53
- "@tsconfig/node16": "^1.0.3",
54
- "@tsconfig/recommended": "^1.0.1",
55
- "@types/node": "^18.11.7",
56
- "@types/react": "^18.2.0",
57
- "@types/react-dom": "^18.2.0",
58
- "@vitejs/plugin-react": "^4.3.4",
59
- "cross-env": "^10.1.0",
60
- "react": "^18.2.0",
61
- "react-dom": "^18.2.0",
62
- "rimraf": "^6.0.1",
63
- "sass": "^1.86.3",
64
- "typescript": "^5.2.2",
65
- "vite": "^6.2.5",
66
- "vite-plugin-dts": "^4.5.3"
67
- }
68
- }
1
+ {
2
+ "name": "@cntrl-site/components",
3
+ "version": "0.1.8-1",
4
+ "description": "Custom components for control editor and public websites.",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "style": "dist/components.css",
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.js"
17
+ },
18
+ "./style/components.css": {
19
+ "default": "./dist/components.css"
20
+ }
21
+ },
22
+ "scripts": {
23
+ "test": "jest",
24
+ "dev": "vite development",
25
+ "prebuild": "rimraf ./dist",
26
+ "build": "vite build",
27
+ "prepublishOnly": "cross-env NODE_ENV=production npm run build"
28
+ },
29
+ "files": [
30
+ "dist",
31
+ "resources"
32
+ ],
33
+ "repository": {
34
+ "type": "git",
35
+ "url": "git+https://github.com/cntrl-site/components.git"
36
+ },
37
+ "author": "arsen@momdesign.nyc",
38
+ "license": "MIT",
39
+ "bugs": {
40
+ "url": "https://github.com/cntrl-site/components/issues"
41
+ },
42
+ "homepage": "https://github.com/cntrl-site/components#readme",
43
+ "directories": {
44
+ "lib": "dist"
45
+ },
46
+ "dependencies": {
47
+ "@antfu/eslint-config": "^3.16.0",
48
+ "@splidejs/react-splide": "^0.7.12",
49
+ "classnames": "^2.5.1",
50
+ "ts-node": "^10.9.1"
51
+ },
52
+ "devDependencies": {
53
+ "@tsconfig/node16": "^1.0.3",
54
+ "@tsconfig/recommended": "^1.0.1",
55
+ "@types/node": "^18.11.7",
56
+ "@types/react": "^18.2.0",
57
+ "@types/react-dom": "^18.2.0",
58
+ "@vitejs/plugin-react": "^4.3.4",
59
+ "cross-env": "^10.1.0",
60
+ "react": "^18.2.0",
61
+ "react-dom": "^18.2.0",
62
+ "rimraf": "^6.0.1",
63
+ "sass": "^1.86.3",
64
+ "typescript": "^5.2.2",
65
+ "vite": "^6.2.5",
66
+ "vite-plugin-dts": "^4.5.3"
67
+ }
68
+ }