@cntrl-site/components 0.1.7 → 0.1.8-0

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 +198 -58
  9. package/dist/index.mjs +198 -58
  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,85 @@ 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: -100, y: -100 });
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);
1113
+ React.useEffect(() => {
1114
+ if (!divRef) return;
1115
+ const updateCursorPosition = (clientX, clientY) => {
1116
+ const rect = divRef.getBoundingClientRect();
1117
+ setCursorCenter({
1118
+ x: clientX - rect.left,
1119
+ y: clientY - rect.top
1120
+ });
1121
+ };
1122
+ const mouseMove = (e) => {
1123
+ e.stopPropagation();
1124
+ lastMousePos.current = { x: e.clientX, y: e.clientY };
1125
+ updateCursorPosition(e.clientX, e.clientY);
1126
+ };
1127
+ const handleScroll = () => {
1128
+ if (!isInside) return;
1129
+ updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1130
+ };
1131
+ divRef.addEventListener("mousemove", mouseMove);
1132
+ window.addEventListener("scroll", handleScroll, true);
1133
+ return () => {
1134
+ divRef.removeEventListener("mousemove", mouseMove);
1135
+ window.removeEventListener("scroll", handleScroll, true);
1136
+ };
1137
+ }, [divRef, isInside]);
1138
+ React.useEffect(() => {
1139
+ if (!isInside) {
1140
+ setCustomCursorImg("none");
1141
+ setCursorSize({ w: 0, h: 0 });
1142
+ }
1143
+ }, [isInside]);
1108
1144
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1109
- const { revealPosition, visible, target } = settings.position;
1110
- const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1145
+ const { revealPosition, visible } = settings.position;
1146
+ const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1147
+ React.useEffect(() => {
1148
+ const updateCursor = () => {
1149
+ if (!divRef) return;
1150
+ if (cursorType === "system") {
1151
+ setCustomCursorImg("none");
1152
+ setCursorSize({ w: defaultScale, h: defaultScale });
1153
+ return;
1154
+ }
1155
+ const cx = cursorCenter.x;
1156
+ const cy = cursorCenter.y;
1157
+ const rect = divRef.getBoundingClientRect();
1158
+ const el = document.elementFromPoint(
1159
+ rect.left + cx,
1160
+ rect.top + cy
1161
+ );
1162
+ if (el && el.closest("a")) {
1163
+ setCustomCursorImg("none");
1164
+ setCursorSize({ w: defaultScale, h: defaultScale });
1165
+ return;
1166
+ }
1167
+ 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 };
1168
+ setCustomCursorImg(next.img);
1169
+ setCursorSize({ w: next.w, h: next.h });
1170
+ };
1171
+ updateCursor();
1172
+ }, [
1173
+ cursorCenter,
1174
+ cursorType,
1175
+ target,
1176
+ hoverCursor,
1177
+ defaultCursor,
1178
+ hoverCursorScale,
1179
+ defaultCursorScale,
1180
+ placedImages
1181
+ ]);
1111
1182
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1112
1183
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1113
1184
  imgData.image.url,
@@ -1136,34 +1207,34 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1136
1207
  };
1137
1208
  };
1138
1209
  const defaultContentUrls = React.useMemo(() => {
1139
- const defaultContentLength = Math.min(content.length, defaultImageCount);
1210
+ const defaultContentLength = Math.min(content.length, 1);
1140
1211
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1141
1212
  }, [content]);
1142
1213
  React.useEffect(() => {
1143
- if (!divRef.current || content.length === 0) return;
1144
- const rect = divRef.current.getBoundingClientRect();
1214
+ if (!divRef || content.length === 0) return;
1215
+ const rect = divRef.getBoundingClientRect();
1145
1216
  const containerWidth = rect.width;
1146
1217
  const containerHeight = rect.height;
1147
1218
  const defaultPlaced = [];
1148
1219
  const placeImages = async () => {
1149
- for (let i = 0; i < defaultImageCount && i < content.length; i++) {
1220
+ for (let i = 0; i < 1 && i < content.length; i++) {
1150
1221
  const imgData = content[i];
1151
1222
  const newImg = await createNewImage(imgData, containerWidth, containerHeight);
1152
1223
  defaultPlaced.push(newImg);
1153
1224
  }
1154
1225
  setPlacedImages(defaultPlaced);
1155
- setCounter(defaultImageCount % content.length);
1226
+ setCounter(1 % content.length);
1156
1227
  };
1157
1228
  placeImages();
1158
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1229
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1159
1230
  React.useEffect(() => {
1160
1231
  if (visible === "last One") {
1161
1232
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1162
1233
  }
1163
1234
  }, [visible]);
1164
1235
  const handleClick = async (e) => {
1165
- if (!divRef.current) return;
1166
- const rect = divRef.current.getBoundingClientRect();
1236
+ if (!divRef) return;
1237
+ const rect = divRef.getBoundingClientRect();
1167
1238
  const clickX = e.clientX - rect.left;
1168
1239
  const clickY = e.clientY - rect.top;
1169
1240
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1183,46 +1254,68 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1183
1254
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1184
1255
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1185
1256
  };
1186
- return /* @__PURE__ */ jsxRuntime.jsx(
1257
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1187
1258
  "div",
1188
1259
  {
1189
- ref: divRef,
1260
+ ref: setDivRef,
1190
1261
  onClick: handleClick,
1262
+ onMouseEnter: () => setIsInside(true),
1263
+ onMouseLeave: () => setIsInside(false),
1191
1264
  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
1265
+ style: { cursor: customCursorImg === "none" ? "default" : "none" },
1266
+ children: [
1267
+ placedImages.map((img2) => /* @__PURE__ */ jsxRuntime.jsx(
1268
+ "div",
1269
+ {
1270
+ className: styles.wrapper,
1271
+ style: {
1272
+ top: `${img2.y}px`,
1273
+ left: `${img2.x}px`,
1274
+ position: "absolute",
1275
+ transform: "translate(-50%, -50%)",
1276
+ width: img2.width ?? "auto",
1277
+ height: "auto",
1278
+ cursor: customCursorImg === "none" ? "default" : "none"
1220
1279
  },
1221
- img2.id
1222
- )
1223
- },
1224
- img2.id
1225
- ))
1280
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsxRuntime.jsx(
1281
+ "img",
1282
+ {
1283
+ src: img2.url,
1284
+ alt: img2.name,
1285
+ className: styles.image
1286
+ },
1287
+ img2.id
1288
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx(
1289
+ "img",
1290
+ {
1291
+ src: img2.url,
1292
+ alt: img2.name,
1293
+ className: styles.image
1294
+ },
1295
+ img2.id
1296
+ )
1297
+ },
1298
+ img2.id
1299
+ )),
1300
+ isInside && /* @__PURE__ */ jsxRuntime.jsx(
1301
+ "div",
1302
+ {
1303
+ className: "cursor",
1304
+ style: {
1305
+ left: `${cursorCenter.x}px`,
1306
+ top: `${cursorCenter.y}px`,
1307
+ width: cursorSize.w,
1308
+ height: cursorSize.h,
1309
+ transform: "translate(-50%, -50%)",
1310
+ backgroundImage: `url('${customCursorImg}')`,
1311
+ backgroundSize: "cover",
1312
+ backgroundPosition: "center",
1313
+ position: "absolute",
1314
+ pointerEvents: "none"
1315
+ }
1316
+ }
1317
+ )
1318
+ ]
1226
1319
  }
1227
1320
  );
1228
1321
  }
@@ -1299,6 +1392,14 @@ const ControlImageRevealSliderComponent = {
1299
1392
  },
1300
1393
  enum: ["system", "custom"]
1301
1394
  },
1395
+ target: {
1396
+ type: "string",
1397
+ title: "Target",
1398
+ display: {
1399
+ type: "ratio-group"
1400
+ },
1401
+ enum: ["area", "image"]
1402
+ },
1302
1403
  defaultCursor: {
1303
1404
  type: ["string", "null"],
1304
1405
  title: "Default",
@@ -1307,6 +1408,17 @@ const ControlImageRevealSliderComponent = {
1307
1408
  visible: false
1308
1409
  }
1309
1410
  },
1411
+ defaultCursorScale: {
1412
+ type: "number",
1413
+ title: "Scale",
1414
+ min: 1,
1415
+ max: 5,
1416
+ step: 0.1,
1417
+ display: {
1418
+ type: "range-control",
1419
+ visible: false
1420
+ }
1421
+ },
1310
1422
  hoverCursor: {
1311
1423
  type: ["string", "null"],
1312
1424
  title: "Hover",
@@ -1314,6 +1426,17 @@ const ControlImageRevealSliderComponent = {
1314
1426
  type: "settings-image-input",
1315
1427
  visible: false
1316
1428
  }
1429
+ },
1430
+ hoverCursorScale: {
1431
+ type: "number",
1432
+ title: "Scale",
1433
+ min: 1,
1434
+ max: 5,
1435
+ step: 0.1,
1436
+ display: {
1437
+ type: "range-control",
1438
+ visible: false
1439
+ }
1317
1440
  }
1318
1441
  }
1319
1442
  },
@@ -1332,17 +1455,11 @@ const ControlImageRevealSliderComponent = {
1332
1455
  },
1333
1456
  visible: {
1334
1457
  type: "string",
1458
+ title: "Visible",
1335
1459
  display: {
1336
1460
  type: "ratio-group"
1337
1461
  },
1338
1462
  enum: ["all", "last One"]
1339
- },
1340
- target: {
1341
- type: "string",
1342
- display: {
1343
- type: "ratio-group"
1344
- },
1345
- enum: ["area", "image"]
1346
1463
  }
1347
1464
  }
1348
1465
  }
@@ -1358,13 +1475,15 @@ const ControlImageRevealSliderComponent = {
1358
1475
  },
1359
1476
  cursor: {
1360
1477
  cursorType: "system",
1478
+ target: "area",
1361
1479
  defaultCursor: null,
1362
- hoverCursor: null
1480
+ defaultCursorScale: 2,
1481
+ hoverCursor: null,
1482
+ hoverCursorScale: 2
1363
1483
  },
1364
1484
  position: {
1365
1485
  revealPosition: "random",
1366
- visible: "all",
1367
- target: "area"
1486
+ visible: "all"
1368
1487
  }
1369
1488
  },
1370
1489
  displayRules: [
@@ -1390,7 +1509,7 @@ const ControlImageRevealSliderComponent = {
1390
1509
  },
1391
1510
  {
1392
1511
  if: [
1393
- { name: "position.target", value: "image" },
1512
+ { name: "cursor.target", value: "image" },
1394
1513
  { name: "cursor.cursorType", value: "custom" }
1395
1514
  ],
1396
1515
  then: {
@@ -1398,6 +1517,17 @@ const ControlImageRevealSliderComponent = {
1398
1517
  value: true
1399
1518
  }
1400
1519
  },
1520
+ {
1521
+ if: [
1522
+ { name: "cursor.target", value: "image" },
1523
+ { name: "cursor.cursorType", value: "custom" },
1524
+ { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1525
+ ],
1526
+ then: {
1527
+ name: "properties.cursor.properties.defaultCursorScale.display.visible",
1528
+ value: true
1529
+ }
1530
+ },
1401
1531
  {
1402
1532
  if: {
1403
1533
  name: "cursor.cursorType",
@@ -1407,6 +1537,16 @@ const ControlImageRevealSliderComponent = {
1407
1537
  name: "properties.cursor.properties.hoverCursor.display.visible",
1408
1538
  value: true
1409
1539
  }
1540
+ },
1541
+ {
1542
+ if: [
1543
+ { name: "cursor.cursorType", value: "custom" },
1544
+ { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1545
+ ],
1546
+ then: {
1547
+ name: "properties.cursor.properties.hoverCursorScale.display.visible",
1548
+ value: true
1549
+ }
1410
1550
  }
1411
1551
  ]
1412
1552
  },
package/dist/index.mjs CHANGED
@@ -1098,14 +1098,85 @@ 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: -100, y: -100 });
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);
1111
+ useEffect(() => {
1112
+ if (!divRef) return;
1113
+ const updateCursorPosition = (clientX, clientY) => {
1114
+ const rect = divRef.getBoundingClientRect();
1115
+ setCursorCenter({
1116
+ x: clientX - rect.left,
1117
+ y: clientY - rect.top
1118
+ });
1119
+ };
1120
+ const mouseMove = (e) => {
1121
+ e.stopPropagation();
1122
+ lastMousePos.current = { x: e.clientX, y: e.clientY };
1123
+ updateCursorPosition(e.clientX, e.clientY);
1124
+ };
1125
+ const handleScroll = () => {
1126
+ if (!isInside) return;
1127
+ updateCursorPosition(lastMousePos.current.x, lastMousePos.current.y);
1128
+ };
1129
+ divRef.addEventListener("mousemove", mouseMove);
1130
+ window.addEventListener("scroll", handleScroll, true);
1131
+ return () => {
1132
+ divRef.removeEventListener("mousemove", mouseMove);
1133
+ window.removeEventListener("scroll", handleScroll, true);
1134
+ };
1135
+ }, [divRef, isInside]);
1136
+ useEffect(() => {
1137
+ if (!isInside) {
1138
+ setCustomCursorImg("none");
1139
+ setCursorSize({ w: 0, h: 0 });
1140
+ }
1141
+ }, [isInside]);
1106
1142
  const { sizeType, imageWidth: customWidth, randomRangeImageWidth: randomRange } = settings.imageSize;
1107
- const { revealPosition, visible, target } = settings.position;
1108
- const { cursorType, defaultCursor, hoverCursor } = settings.cursor;
1143
+ const { revealPosition, visible } = settings.position;
1144
+ const { cursorType, target, defaultCursorScale, defaultCursor, hoverCursorScale, hoverCursor } = settings.cursor;
1145
+ useEffect(() => {
1146
+ const updateCursor = () => {
1147
+ if (!divRef) return;
1148
+ if (cursorType === "system") {
1149
+ setCustomCursorImg("none");
1150
+ setCursorSize({ w: defaultScale, h: defaultScale });
1151
+ return;
1152
+ }
1153
+ const cx = cursorCenter.x;
1154
+ const cy = cursorCenter.y;
1155
+ const rect = divRef.getBoundingClientRect();
1156
+ const el = document.elementFromPoint(
1157
+ rect.left + cx,
1158
+ rect.top + cy
1159
+ );
1160
+ if (el && el.closest("a")) {
1161
+ setCustomCursorImg("none");
1162
+ setCursorSize({ w: defaultScale, h: defaultScale });
1163
+ return;
1164
+ }
1165
+ 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 };
1166
+ setCustomCursorImg(next.img);
1167
+ setCursorSize({ w: next.w, h: next.h });
1168
+ };
1169
+ updateCursor();
1170
+ }, [
1171
+ cursorCenter,
1172
+ cursorType,
1173
+ target,
1174
+ hoverCursor,
1175
+ defaultCursor,
1176
+ hoverCursorScale,
1177
+ defaultCursorScale,
1178
+ placedImages
1179
+ ]);
1109
1180
  const createNewImage = async (imgData, containerWidth, containerHeight, position = {}) => {
1110
1181
  const { width, height, finalWidth } = await calculateImageWidthHeight(
1111
1182
  imgData.image.url,
@@ -1134,34 +1205,34 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1134
1205
  };
1135
1206
  };
1136
1207
  const defaultContentUrls = useMemo(() => {
1137
- const defaultContentLength = Math.min(content.length, defaultImageCount);
1208
+ const defaultContentLength = Math.min(content.length, 1);
1138
1209
  return content.filter((_, i) => i < defaultContentLength).map((c) => c.image.url).join("-");
1139
1210
  }, [content]);
1140
1211
  useEffect(() => {
1141
- if (!divRef.current || content.length === 0) return;
1142
- const rect = divRef.current.getBoundingClientRect();
1212
+ if (!divRef || content.length === 0) return;
1213
+ const rect = divRef.getBoundingClientRect();
1143
1214
  const containerWidth = rect.width;
1144
1215
  const containerHeight = rect.height;
1145
1216
  const defaultPlaced = [];
1146
1217
  const placeImages = async () => {
1147
- for (let i = 0; i < defaultImageCount && i < content.length; i++) {
1218
+ for (let i = 0; i < 1 && i < content.length; i++) {
1148
1219
  const imgData = content[i];
1149
1220
  const newImg = await createNewImage(imgData, containerWidth, containerHeight);
1150
1221
  defaultPlaced.push(newImg);
1151
1222
  }
1152
1223
  setPlacedImages(defaultPlaced);
1153
- setCounter(defaultImageCount % content.length);
1224
+ setCounter(1 % content.length);
1154
1225
  };
1155
1226
  placeImages();
1156
- }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition]);
1227
+ }, [defaultContentUrls, sizeType, customWidth, randomRange, revealPosition, divRef]);
1157
1228
  useEffect(() => {
1158
1229
  if (visible === "last One") {
1159
1230
  setPlacedImages((prev) => prev.length > 0 ? [prev[prev.length - 1]] : []);
1160
1231
  }
1161
1232
  }, [visible]);
1162
1233
  const handleClick = async (e) => {
1163
- if (!divRef.current) return;
1164
- const rect = divRef.current.getBoundingClientRect();
1234
+ if (!divRef) return;
1235
+ const rect = divRef.getBoundingClientRect();
1165
1236
  const clickX = e.clientX - rect.left;
1166
1237
  const clickY = e.clientY - rect.top;
1167
1238
  if (target === "image" && !isMouseOverImage(clickX, clickY, placedImages)) return;
@@ -1181,46 +1252,68 @@ function ImageRevealSlider({ settings, content, isEditor }) {
1181
1252
  setPlacedImages((prev) => visible === "all" ? [...prev, newImage] : [newImage]);
1182
1253
  setCounter((prev) => prev >= content.length - 1 ? 0 : prev + 1);
1183
1254
  };
1184
- return /* @__PURE__ */ jsx(
1255
+ return /* @__PURE__ */ jsxs(
1185
1256
  "div",
1186
1257
  {
1187
- ref: divRef,
1258
+ ref: setDivRef,
1188
1259
  onClick: handleClick,
1260
+ onMouseEnter: () => setIsInside(true),
1261
+ onMouseLeave: () => setIsInside(false),
1189
1262
  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
1263
+ style: { cursor: customCursorImg === "none" ? "default" : "none" },
1264
+ children: [
1265
+ placedImages.map((img2) => /* @__PURE__ */ jsx(
1266
+ "div",
1267
+ {
1268
+ className: styles.wrapper,
1269
+ style: {
1270
+ top: `${img2.y}px`,
1271
+ left: `${img2.x}px`,
1272
+ position: "absolute",
1273
+ transform: "translate(-50%, -50%)",
1274
+ width: img2.width ?? "auto",
1275
+ height: "auto",
1276
+ cursor: customCursorImg === "none" ? "default" : "none"
1218
1277
  },
1219
- img2.id
1220
- )
1221
- },
1222
- img2.id
1223
- ))
1278
+ children: target === "area" && img2.link ? /* @__PURE__ */ jsx("a", { href: img2.link, target: "_blank", className: styles.link, children: /* @__PURE__ */ jsx(
1279
+ "img",
1280
+ {
1281
+ src: img2.url,
1282
+ alt: img2.name,
1283
+ className: styles.image
1284
+ },
1285
+ img2.id
1286
+ ) }) : /* @__PURE__ */ jsx(
1287
+ "img",
1288
+ {
1289
+ src: img2.url,
1290
+ alt: img2.name,
1291
+ className: styles.image
1292
+ },
1293
+ img2.id
1294
+ )
1295
+ },
1296
+ img2.id
1297
+ )),
1298
+ isInside && /* @__PURE__ */ jsx(
1299
+ "div",
1300
+ {
1301
+ className: "cursor",
1302
+ style: {
1303
+ left: `${cursorCenter.x}px`,
1304
+ top: `${cursorCenter.y}px`,
1305
+ width: cursorSize.w,
1306
+ height: cursorSize.h,
1307
+ transform: "translate(-50%, -50%)",
1308
+ backgroundImage: `url('${customCursorImg}')`,
1309
+ backgroundSize: "cover",
1310
+ backgroundPosition: "center",
1311
+ position: "absolute",
1312
+ pointerEvents: "none"
1313
+ }
1314
+ }
1315
+ )
1316
+ ]
1224
1317
  }
1225
1318
  );
1226
1319
  }
@@ -1297,6 +1390,14 @@ const ControlImageRevealSliderComponent = {
1297
1390
  },
1298
1391
  enum: ["system", "custom"]
1299
1392
  },
1393
+ target: {
1394
+ type: "string",
1395
+ title: "Target",
1396
+ display: {
1397
+ type: "ratio-group"
1398
+ },
1399
+ enum: ["area", "image"]
1400
+ },
1300
1401
  defaultCursor: {
1301
1402
  type: ["string", "null"],
1302
1403
  title: "Default",
@@ -1305,6 +1406,17 @@ const ControlImageRevealSliderComponent = {
1305
1406
  visible: false
1306
1407
  }
1307
1408
  },
1409
+ defaultCursorScale: {
1410
+ type: "number",
1411
+ title: "Scale",
1412
+ min: 1,
1413
+ max: 5,
1414
+ step: 0.1,
1415
+ display: {
1416
+ type: "range-control",
1417
+ visible: false
1418
+ }
1419
+ },
1308
1420
  hoverCursor: {
1309
1421
  type: ["string", "null"],
1310
1422
  title: "Hover",
@@ -1312,6 +1424,17 @@ const ControlImageRevealSliderComponent = {
1312
1424
  type: "settings-image-input",
1313
1425
  visible: false
1314
1426
  }
1427
+ },
1428
+ hoverCursorScale: {
1429
+ type: "number",
1430
+ title: "Scale",
1431
+ min: 1,
1432
+ max: 5,
1433
+ step: 0.1,
1434
+ display: {
1435
+ type: "range-control",
1436
+ visible: false
1437
+ }
1315
1438
  }
1316
1439
  }
1317
1440
  },
@@ -1330,17 +1453,11 @@ const ControlImageRevealSliderComponent = {
1330
1453
  },
1331
1454
  visible: {
1332
1455
  type: "string",
1456
+ title: "Visible",
1333
1457
  display: {
1334
1458
  type: "ratio-group"
1335
1459
  },
1336
1460
  enum: ["all", "last One"]
1337
- },
1338
- target: {
1339
- type: "string",
1340
- display: {
1341
- type: "ratio-group"
1342
- },
1343
- enum: ["area", "image"]
1344
1461
  }
1345
1462
  }
1346
1463
  }
@@ -1356,13 +1473,15 @@ const ControlImageRevealSliderComponent = {
1356
1473
  },
1357
1474
  cursor: {
1358
1475
  cursorType: "system",
1476
+ target: "area",
1359
1477
  defaultCursor: null,
1360
- hoverCursor: null
1478
+ defaultCursorScale: 2,
1479
+ hoverCursor: null,
1480
+ hoverCursorScale: 2
1361
1481
  },
1362
1482
  position: {
1363
1483
  revealPosition: "random",
1364
- visible: "all",
1365
- target: "area"
1484
+ visible: "all"
1366
1485
  }
1367
1486
  },
1368
1487
  displayRules: [
@@ -1388,7 +1507,7 @@ const ControlImageRevealSliderComponent = {
1388
1507
  },
1389
1508
  {
1390
1509
  if: [
1391
- { name: "position.target", value: "image" },
1510
+ { name: "cursor.target", value: "image" },
1392
1511
  { name: "cursor.cursorType", value: "custom" }
1393
1512
  ],
1394
1513
  then: {
@@ -1396,6 +1515,17 @@ const ControlImageRevealSliderComponent = {
1396
1515
  value: true
1397
1516
  }
1398
1517
  },
1518
+ {
1519
+ if: [
1520
+ { name: "cursor.target", value: "image" },
1521
+ { name: "cursor.cursorType", value: "custom" },
1522
+ { name: "cursor.defaultCursor", value: null, isNotEqual: true }
1523
+ ],
1524
+ then: {
1525
+ name: "properties.cursor.properties.defaultCursorScale.display.visible",
1526
+ value: true
1527
+ }
1528
+ },
1399
1529
  {
1400
1530
  if: {
1401
1531
  name: "cursor.cursorType",
@@ -1405,6 +1535,16 @@ const ControlImageRevealSliderComponent = {
1405
1535
  name: "properties.cursor.properties.hoverCursor.display.visible",
1406
1536
  value: true
1407
1537
  }
1538
+ },
1539
+ {
1540
+ if: [
1541
+ { name: "cursor.cursorType", value: "custom" },
1542
+ { name: "cursor.hoverCursor", value: null, isNotEqual: true }
1543
+ ],
1544
+ then: {
1545
+ name: "properties.cursor.properties.hoverCursorScale.display.visible",
1546
+ value: true
1547
+ }
1408
1548
  }
1409
1549
  ]
1410
1550
  },
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-0",
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
+ }