@cntrl-site/components 0.1.0-18 → 0.1.0-19
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.
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Alignment, Offset } from '../utils/getPositionStyles';
|
|
1
2
|
type LightboxGalleryProps = {
|
|
2
3
|
settings: LightboxSettings;
|
|
3
4
|
content: LightboxImage[];
|
|
@@ -14,10 +15,6 @@ type LightboxImage = {
|
|
|
14
15
|
};
|
|
15
16
|
imageCaption: any[];
|
|
16
17
|
};
|
|
17
|
-
type Offset = {
|
|
18
|
-
x: number;
|
|
19
|
-
y: number;
|
|
20
|
-
};
|
|
21
18
|
type LightboxControls = {
|
|
22
19
|
arrowsImgUrl: string | null;
|
|
23
20
|
isActive: boolean;
|
|
@@ -26,7 +23,6 @@ type LightboxControls = {
|
|
|
26
23
|
offset: Offset;
|
|
27
24
|
scale: number;
|
|
28
25
|
};
|
|
29
|
-
type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
30
26
|
type Caption = {
|
|
31
27
|
isActive: boolean;
|
|
32
28
|
alignment: Alignment;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
3
|
+
export type Offset = {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
};
|
|
7
|
+
export declare const getPositionStyles: (position: Alignment, offset: Offset) => CSSProperties;
|
package/dist/components.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.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__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}.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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;justify-content:center;width:100%;height:100%;overflow:hidden}.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;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .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%;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)}.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__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;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__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content: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__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}@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}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
|
|
1
|
+
.ControlSlider-module__wrapper___sHEkd{position:relative;width:100%;height:100%}.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__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}.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__backdropStyle___yWDe2{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9999}.LightBox-module__contentStyle___Bgnsq{position:relative;width:100%;max-width:100vw;max-height:100vh;height:100vh;overflow:auto;background:transparent;box-sizing:border-box}.LightBox-module__stageStyle___7C4KB{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}.LightBox-module__imageStyle___tLIlB{display:block;cursor:pointer;background-color:transparent}.LightBox-module__sliderItem___iFlJ9{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.LightBox-module__imgWrapper___LuFUp{display:flex;justify-content:center;width:100%;height:100%;overflow:hidden}.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;max-width:100%;max-height:100%}.LightBox-module__caption___b6L2I{position:absolute;display:flex}.LightBox-module__contentStyle___Bgnsq .splide,.LightBox-module__contentStyle___Bgnsq .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%;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)}.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__counterStyle___JFgB3{bottom:calc(var(--is-editor, 0) * .8333333333vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .8333333333vw);right:calc(var(--is-editor, 0) * 1.1111111111vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 1.1111111111vw);font-size:calc(var(--is-editor, 0) * .9722222222vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * .9722222222vw);position:absolute;color:#fff;opacity:.85}.LightBox-module__thumbsContainerVertical___wttk5{flex-direction:column;display:flex}.LightBox-module__thumbsContainer___osSma{position:absolute;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__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignStart___MO6tY{align-items:center;justify-content:flex-start}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignCenter___Q4sUx{align-items:center;justify-content:center}.LightBox-module__thumbsContainerVertical___wttk5.LightBox-module__thumbsAlignEnd___p4y9R{align-items:center;justify-content: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__thumbImage___OJ19m{display:block;height:100%;width:calc(var(--is-editor, 0) * 5.5555555556vw / var(--cntrl-reverse-layout-deviation, 1) + (1 - var(--is-editor, 0)) * 5.5555555556vw)}.LightBox-module__closeButton___g2khP{position:absolute}@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}.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}@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__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
|
package/dist/index.js
CHANGED
|
@@ -1463,6 +1463,7 @@ const thumbsAlignCenter = "LightBox-module__thumbsAlignCenter___Q4sUx";
|
|
|
1463
1463
|
const thumbsAlignEnd = "LightBox-module__thumbsAlignEnd___p4y9R";
|
|
1464
1464
|
const thumbItem = "LightBox-module__thumbItem___HvnF3";
|
|
1465
1465
|
const thumbImage = "LightBox-module__thumbImage___OJ19m";
|
|
1466
|
+
const closeButton = "LightBox-module__closeButton___g2khP";
|
|
1466
1467
|
const fadeIn = "LightBox-module__fadeIn___0m5GW";
|
|
1467
1468
|
const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
|
|
1468
1469
|
const slideInRight = "LightBox-module__slideInRight___S-pPp";
|
|
@@ -1489,12 +1490,45 @@ const styles = {
|
|
|
1489
1490
|
thumbsAlignEnd,
|
|
1490
1491
|
thumbItem,
|
|
1491
1492
|
thumbImage,
|
|
1493
|
+
closeButton,
|
|
1492
1494
|
fadeIn,
|
|
1493
1495
|
slideInLeft,
|
|
1494
1496
|
slideInRight,
|
|
1495
1497
|
slideInTop,
|
|
1496
1498
|
slideInBottom
|
|
1497
1499
|
};
|
|
1500
|
+
const getPositionStyles = (position, offset) => {
|
|
1501
|
+
const styles2 = {};
|
|
1502
|
+
const [vertical, horizontal] = position.split("-");
|
|
1503
|
+
if (vertical === "top") {
|
|
1504
|
+
styles2.top = `${offset.y}px`;
|
|
1505
|
+
styles2.bottom = "auto";
|
|
1506
|
+
} else if (vertical === "middle") {
|
|
1507
|
+
styles2.top = "50%";
|
|
1508
|
+
styles2.bottom = "auto";
|
|
1509
|
+
} else if (vertical === "bottom") {
|
|
1510
|
+
styles2.top = "auto";
|
|
1511
|
+
styles2.bottom = `${offset.y}px`;
|
|
1512
|
+
}
|
|
1513
|
+
if (horizontal === "left") {
|
|
1514
|
+
styles2.left = `${offset.x}px`;
|
|
1515
|
+
styles2.right = "auto";
|
|
1516
|
+
} else if (horizontal === "center") {
|
|
1517
|
+
styles2.left = "50%";
|
|
1518
|
+
styles2.right = "auto";
|
|
1519
|
+
} else if (horizontal === "right") {
|
|
1520
|
+
styles2.left = "auto";
|
|
1521
|
+
styles2.right = `${offset.x}px`;
|
|
1522
|
+
}
|
|
1523
|
+
if (vertical === "middle" && horizontal === "center") {
|
|
1524
|
+
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
1525
|
+
} else if (vertical === "middle") {
|
|
1526
|
+
styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
|
|
1527
|
+
} else if (horizontal === "center") {
|
|
1528
|
+
styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
|
|
1529
|
+
}
|
|
1530
|
+
return styles2;
|
|
1531
|
+
};
|
|
1498
1532
|
function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
|
|
1499
1533
|
const [open, setOpen] = React.useState(false);
|
|
1500
1534
|
const { url } = settings.thumbnailBlock.cover;
|
|
@@ -1604,38 +1638,6 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1604
1638
|
}
|
|
1605
1639
|
return styles.fadeIn;
|
|
1606
1640
|
})();
|
|
1607
|
-
const getThumbnailPositionStyles = (position, offset) => {
|
|
1608
|
-
const styles2 = {};
|
|
1609
|
-
const [vertical, horizontal] = position.split("-");
|
|
1610
|
-
if (vertical === "top") {
|
|
1611
|
-
styles2.top = `${offset.y}px`;
|
|
1612
|
-
styles2.bottom = "auto";
|
|
1613
|
-
} else if (vertical === "middle") {
|
|
1614
|
-
styles2.top = "50%";
|
|
1615
|
-
styles2.bottom = "auto";
|
|
1616
|
-
} else if (vertical === "bottom") {
|
|
1617
|
-
styles2.top = "auto";
|
|
1618
|
-
styles2.bottom = `${offset.y}px`;
|
|
1619
|
-
}
|
|
1620
|
-
if (horizontal === "left") {
|
|
1621
|
-
styles2.left = `${offset.x}px`;
|
|
1622
|
-
styles2.right = "auto";
|
|
1623
|
-
} else if (horizontal === "center") {
|
|
1624
|
-
styles2.left = "50%";
|
|
1625
|
-
styles2.right = "auto";
|
|
1626
|
-
} else if (horizontal === "right") {
|
|
1627
|
-
styles2.left = "auto";
|
|
1628
|
-
styles2.right = `${offset.x}px`;
|
|
1629
|
-
}
|
|
1630
|
-
if (vertical === "middle" && horizontal === "center") {
|
|
1631
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
1632
|
-
} else if (vertical === "middle") {
|
|
1633
|
-
styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
|
|
1634
|
-
} else if (horizontal === "center") {
|
|
1635
|
-
styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
|
|
1636
|
-
}
|
|
1637
|
-
return styles2;
|
|
1638
|
-
};
|
|
1639
1641
|
if (!isOpen) return null;
|
|
1640
1642
|
return reactDom.createPortal(
|
|
1641
1643
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1753,7 +1755,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1753
1755
|
}
|
|
1754
1756
|
)
|
|
1755
1757
|
] }),
|
|
1756
|
-
area.closeIconUrl && /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles.closeButton, style:
|
|
1758
|
+
area.closeIconUrl && /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles.closeButton, style: getPositionStyles(area.closeIconAlign, area.closeIconOffset), onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: area.closeIconUrl, fill: area.color }) }),
|
|
1757
1759
|
caption2.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: caption2.offset.y, left: caption2.offset.x }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
|
|
1758
1760
|
thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1759
1761
|
"div",
|
|
@@ -1771,7 +1773,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1771
1773
|
gap: `${thumbnail.grid.gap}px`,
|
|
1772
1774
|
...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
|
|
1773
1775
|
...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
|
|
1774
|
-
...
|
|
1776
|
+
...getPositionStyles(thumbnail.position, thumbnail.offset)
|
|
1775
1777
|
},
|
|
1776
1778
|
children: content.map((item, index) => {
|
|
1777
1779
|
const isActive = index === currentIndex;
|
|
@@ -1893,6 +1895,7 @@ const LightboxComponent = {
|
|
|
1893
1895
|
type: "string",
|
|
1894
1896
|
title: "FROM",
|
|
1895
1897
|
display: {
|
|
1898
|
+
visible: true,
|
|
1896
1899
|
type: "direction-control"
|
|
1897
1900
|
},
|
|
1898
1901
|
enum: ["top", "left", "right", "bottom"]
|
|
@@ -2257,6 +2260,12 @@ const LightboxComponent = {
|
|
|
2257
2260
|
tooltip: "Description",
|
|
2258
2261
|
type: "object",
|
|
2259
2262
|
properties: {
|
|
2263
|
+
isActive: {
|
|
2264
|
+
type: "boolean",
|
|
2265
|
+
display: {
|
|
2266
|
+
type: "setting-toggle"
|
|
2267
|
+
}
|
|
2268
|
+
},
|
|
2260
2269
|
alignment: {
|
|
2261
2270
|
type: "string",
|
|
2262
2271
|
display: {
|
|
@@ -2339,7 +2348,7 @@ const LightboxComponent = {
|
|
|
2339
2348
|
isActive: true,
|
|
2340
2349
|
arrowsImgUrl: null,
|
|
2341
2350
|
offset: { x: 0, y: 0 },
|
|
2342
|
-
scale:
|
|
2351
|
+
scale: 1,
|
|
2343
2352
|
color: "#000000",
|
|
2344
2353
|
hover: "#cccccc"
|
|
2345
2354
|
},
|
|
@@ -2351,6 +2360,7 @@ const LightboxComponent = {
|
|
|
2351
2360
|
closeIconOffset: { x: 0, y: 0 }
|
|
2352
2361
|
},
|
|
2353
2362
|
caption: {
|
|
2363
|
+
isActive: true,
|
|
2354
2364
|
alignment: "middle-center",
|
|
2355
2365
|
offset: { x: 0, y: 0 },
|
|
2356
2366
|
hover: "#cccccc"
|
package/dist/index.mjs
CHANGED
|
@@ -1461,6 +1461,7 @@ const thumbsAlignCenter = "LightBox-module__thumbsAlignCenter___Q4sUx";
|
|
|
1461
1461
|
const thumbsAlignEnd = "LightBox-module__thumbsAlignEnd___p4y9R";
|
|
1462
1462
|
const thumbItem = "LightBox-module__thumbItem___HvnF3";
|
|
1463
1463
|
const thumbImage = "LightBox-module__thumbImage___OJ19m";
|
|
1464
|
+
const closeButton = "LightBox-module__closeButton___g2khP";
|
|
1464
1465
|
const fadeIn = "LightBox-module__fadeIn___0m5GW";
|
|
1465
1466
|
const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
|
|
1466
1467
|
const slideInRight = "LightBox-module__slideInRight___S-pPp";
|
|
@@ -1487,12 +1488,45 @@ const styles = {
|
|
|
1487
1488
|
thumbsAlignEnd,
|
|
1488
1489
|
thumbItem,
|
|
1489
1490
|
thumbImage,
|
|
1491
|
+
closeButton,
|
|
1490
1492
|
fadeIn,
|
|
1491
1493
|
slideInLeft,
|
|
1492
1494
|
slideInRight,
|
|
1493
1495
|
slideInTop,
|
|
1494
1496
|
slideInBottom
|
|
1495
1497
|
};
|
|
1498
|
+
const getPositionStyles = (position, offset) => {
|
|
1499
|
+
const styles2 = {};
|
|
1500
|
+
const [vertical, horizontal] = position.split("-");
|
|
1501
|
+
if (vertical === "top") {
|
|
1502
|
+
styles2.top = `${offset.y}px`;
|
|
1503
|
+
styles2.bottom = "auto";
|
|
1504
|
+
} else if (vertical === "middle") {
|
|
1505
|
+
styles2.top = "50%";
|
|
1506
|
+
styles2.bottom = "auto";
|
|
1507
|
+
} else if (vertical === "bottom") {
|
|
1508
|
+
styles2.top = "auto";
|
|
1509
|
+
styles2.bottom = `${offset.y}px`;
|
|
1510
|
+
}
|
|
1511
|
+
if (horizontal === "left") {
|
|
1512
|
+
styles2.left = `${offset.x}px`;
|
|
1513
|
+
styles2.right = "auto";
|
|
1514
|
+
} else if (horizontal === "center") {
|
|
1515
|
+
styles2.left = "50%";
|
|
1516
|
+
styles2.right = "auto";
|
|
1517
|
+
} else if (horizontal === "right") {
|
|
1518
|
+
styles2.left = "auto";
|
|
1519
|
+
styles2.right = `${offset.x}px`;
|
|
1520
|
+
}
|
|
1521
|
+
if (vertical === "middle" && horizontal === "center") {
|
|
1522
|
+
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
1523
|
+
} else if (vertical === "middle") {
|
|
1524
|
+
styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
|
|
1525
|
+
} else if (horizontal === "center") {
|
|
1526
|
+
styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
|
|
1527
|
+
}
|
|
1528
|
+
return styles2;
|
|
1529
|
+
};
|
|
1496
1530
|
function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
|
|
1497
1531
|
const [open, setOpen] = React.useState(false);
|
|
1498
1532
|
const { url } = settings.thumbnailBlock.cover;
|
|
@@ -1602,38 +1636,6 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1602
1636
|
}
|
|
1603
1637
|
return styles.fadeIn;
|
|
1604
1638
|
})();
|
|
1605
|
-
const getThumbnailPositionStyles = (position, offset) => {
|
|
1606
|
-
const styles2 = {};
|
|
1607
|
-
const [vertical, horizontal] = position.split("-");
|
|
1608
|
-
if (vertical === "top") {
|
|
1609
|
-
styles2.top = `${offset.y}px`;
|
|
1610
|
-
styles2.bottom = "auto";
|
|
1611
|
-
} else if (vertical === "middle") {
|
|
1612
|
-
styles2.top = "50%";
|
|
1613
|
-
styles2.bottom = "auto";
|
|
1614
|
-
} else if (vertical === "bottom") {
|
|
1615
|
-
styles2.top = "auto";
|
|
1616
|
-
styles2.bottom = `${offset.y}px`;
|
|
1617
|
-
}
|
|
1618
|
-
if (horizontal === "left") {
|
|
1619
|
-
styles2.left = `${offset.x}px`;
|
|
1620
|
-
styles2.right = "auto";
|
|
1621
|
-
} else if (horizontal === "center") {
|
|
1622
|
-
styles2.left = "50%";
|
|
1623
|
-
styles2.right = "auto";
|
|
1624
|
-
} else if (horizontal === "right") {
|
|
1625
|
-
styles2.left = "auto";
|
|
1626
|
-
styles2.right = `${offset.x}px`;
|
|
1627
|
-
}
|
|
1628
|
-
if (vertical === "middle" && horizontal === "center") {
|
|
1629
|
-
styles2.transform = `translate(calc(-50% + ${offset.x}px), calc(-50% + ${offset.y}px))`;
|
|
1630
|
-
} else if (vertical === "middle") {
|
|
1631
|
-
styles2.transform = `translateY(calc(-50% + ${offset.y}px))`;
|
|
1632
|
-
} else if (horizontal === "center") {
|
|
1633
|
-
styles2.transform = `translateX(calc(-50% + ${offset.x}px))`;
|
|
1634
|
-
}
|
|
1635
|
-
return styles2;
|
|
1636
|
-
};
|
|
1637
1639
|
if (!isOpen) return null;
|
|
1638
1640
|
return createPortal(
|
|
1639
1641
|
/* @__PURE__ */ jsx(
|
|
@@ -1751,7 +1753,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1751
1753
|
}
|
|
1752
1754
|
)
|
|
1753
1755
|
] }),
|
|
1754
|
-
area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style:
|
|
1756
|
+
area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: getPositionStyles(area.closeIconAlign, area.closeIconOffset), onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.color }) }),
|
|
1755
1757
|
caption2.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: caption2.offset.y, left: caption2.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
|
|
1756
1758
|
thumbnail.isActive && /* @__PURE__ */ jsx(
|
|
1757
1759
|
"div",
|
|
@@ -1769,7 +1771,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
|
|
|
1769
1771
|
gap: `${thumbnail.grid.gap}px`,
|
|
1770
1772
|
...slider.direction === "horiz" ? { height: `${thumbnail.grid.height}px` } : {},
|
|
1771
1773
|
...slider.direction === "vert" ? { width: `${thumbnail.grid.width}px` } : {},
|
|
1772
|
-
...
|
|
1774
|
+
...getPositionStyles(thumbnail.position, thumbnail.offset)
|
|
1773
1775
|
},
|
|
1774
1776
|
children: content.map((item, index) => {
|
|
1775
1777
|
const isActive = index === currentIndex;
|
|
@@ -1891,6 +1893,7 @@ const LightboxComponent = {
|
|
|
1891
1893
|
type: "string",
|
|
1892
1894
|
title: "FROM",
|
|
1893
1895
|
display: {
|
|
1896
|
+
visible: true,
|
|
1894
1897
|
type: "direction-control"
|
|
1895
1898
|
},
|
|
1896
1899
|
enum: ["top", "left", "right", "bottom"]
|
|
@@ -2255,6 +2258,12 @@ const LightboxComponent = {
|
|
|
2255
2258
|
tooltip: "Description",
|
|
2256
2259
|
type: "object",
|
|
2257
2260
|
properties: {
|
|
2261
|
+
isActive: {
|
|
2262
|
+
type: "boolean",
|
|
2263
|
+
display: {
|
|
2264
|
+
type: "setting-toggle"
|
|
2265
|
+
}
|
|
2266
|
+
},
|
|
2258
2267
|
alignment: {
|
|
2259
2268
|
type: "string",
|
|
2260
2269
|
display: {
|
|
@@ -2337,7 +2346,7 @@ const LightboxComponent = {
|
|
|
2337
2346
|
isActive: true,
|
|
2338
2347
|
arrowsImgUrl: null,
|
|
2339
2348
|
offset: { x: 0, y: 0 },
|
|
2340
|
-
scale:
|
|
2349
|
+
scale: 1,
|
|
2341
2350
|
color: "#000000",
|
|
2342
2351
|
hover: "#cccccc"
|
|
2343
2352
|
},
|
|
@@ -2349,6 +2358,7 @@ const LightboxComponent = {
|
|
|
2349
2358
|
closeIconOffset: { x: 0, y: 0 }
|
|
2350
2359
|
},
|
|
2351
2360
|
caption: {
|
|
2361
|
+
isActive: true,
|
|
2352
2362
|
alignment: "middle-center",
|
|
2353
2363
|
offset: { x: 0, y: 0 },
|
|
2354
2364
|
hover: "#cccccc"
|