@trafilea/afrodita-components 6.8.5 → 6.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.css +2 -2
- package/build/index.esm.css +2 -2
- package/build/index.esm.js +25 -25
- package/build/index.js +25 -25
- package/package.json +1 -1
package/build/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}.slick-list:focus{outline:none;}.slick-list.dragging{cursor:pointer;cursor:hand;}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}.slick-track:before,.slick-track:after{display:table;content:'';}.slick-track:after{clear:both;}.slick-loading .slick-track{visibility:hidden;}.slick-slide{display:none;float:left;height:100%;min-height:0.063rem;}[dir='rtl'] .slick-slide{float:right;}.slick-slide img{display:block;}.slick-slide.slick-loading img{display:none;}.slick-slide.dragging img{pointer-events:none;}.slick-initialized .slick-slide{display:block;}.slick-loading .slick-slide{visibility:hidden;}.slick-vertical .slick-slide{display:block;height:auto;border:0.063rem solid transparent;}.slick-arrow.slick-hidden{display:none;}
|
|
2
2
|
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:1.25rem;height:1.25rem;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent;}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.25;}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:1.25rem;line-height:1;opacity:0.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left:-1.5rem;}[dir='rtl'] .slick-prev{right:-1.5rem;left:auto;}.slick-prev:before{content:'←';}[dir='rtl'] .slick-prev:before{content:'→';}.slick-next{right:-1.5rem;}[dir='rtl'] .slick-next{right:auto;left:-1.5rem;}.slick-next:before{content:'→';}[dir='rtl'] .slick-next:before{content:'←';}.slick-dotted.slick-slider{margin-bottom:1.875rem;}.slick-dots{position:absolute;bottom:-1.5rem;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots li{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin:0 0.313rem;padding:0;cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;width:1.25rem;height:1.25rem;padding:0.313rem;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}.slick-dots li button:before{font-family:'slick';font-size:0.375rem;line-height:1.25rem;position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;content:'•';text-align:center;opacity:0.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:0.75;color:black;}
|
|
3
3
|
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1}.iiz__img--hidden{visibility:hidden;opacity:0}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}.iiz__btn{background:rgba(255,255,255,.8);width:40px;height:40px;border:none;outline:0;padding:0;position:absolute;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none}.iiz__btn:before{content:" ";background-position:center;background-repeat:no-repeat;display:block}.iiz__hint{bottom:10px;right:10px;pointer-events:none}.iiz__hint:before{content:" ";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.9 19.9'%3E%3Cpath d='M13.9 7.4C13.9 3.8 11 .9 7.4.9S.9 3.8.9 7.4s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5zm5.3 12.5l-6.7-7.2c-1.4 1.3-3.2 2.1-5.1 2.1-4.1 0-7.4-3.3-7.4-7.4S3.3 0 7.4 0s7.4 3.3 7.4 7.4c0 1.7-.6 3.4-1.7 4.7l6.8 7.2-.7.6z' fill='%23000222'/%3E%3C/svg%3E");width:20px;height:20px}.iiz__close{top:10px;right:10px;visibility:hidden;opacity:0}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer}.iiz__close::before{content:" ";width:29px;height:29px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:100% 1px,1px 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
|
|
4
|
-
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}
|
|
4
|
+
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track{height:auto;}div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div{height:auto;}}
|
|
5
5
|
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}
|
|
6
|
-
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){.slick-list > .slick-track{height:396px;}.zoomWrapper.iiz > div{height:396px;width:100%;display:flex;flex-direction:column;justify-content:center;}}
|
|
6
|
+
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){div[data-testid='product-gallery-mobile-v3'] .slick-list > .slick-track{height:396px;}div[data-testid='product-gallery-mobile-v3'] .zoomWrapper.iiz > div{height:396px;width:100%;display:flex;flex-direction:column;justify-content:center;}}
|
package/build/index.esm.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}.slick-list:focus{outline:none;}.slick-list.dragging{cursor:pointer;cursor:hand;}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;}.slick-track:before,.slick-track:after{display:table;content:'';}.slick-track:after{clear:both;}.slick-loading .slick-track{visibility:hidden;}.slick-slide{display:none;float:left;height:100%;min-height:0.063rem;}[dir='rtl'] .slick-slide{float:right;}.slick-slide img{display:block;}.slick-slide.slick-loading img{display:none;}.slick-slide.dragging img{pointer-events:none;}.slick-initialized .slick-slide{display:block;}.slick-loading .slick-slide{visibility:hidden;}.slick-vertical .slick-slide{display:block;height:auto;border:0.063rem solid transparent;}.slick-arrow.slick-hidden{display:none;}
|
|
2
2
|
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:50%;display:block;width:1.25rem;height:1.25rem;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:none;background:transparent;}.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{color:transparent;outline:none;background:transparent;}.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1;}.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.25;}.slick-prev:before,.slick-next:before{font-family:'slick';font-size:1.25rem;line-height:1;opacity:0.75;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-prev{left:-1.5rem;}[dir='rtl'] .slick-prev{right:-1.5rem;left:auto;}.slick-prev:before{content:'←';}[dir='rtl'] .slick-prev:before{content:'→';}.slick-next{right:-1.5rem;}[dir='rtl'] .slick-next{right:auto;left:-1.5rem;}.slick-next:before{content:'→';}[dir='rtl'] .slick-next:before{content:'←';}.slick-dotted.slick-slider{margin-bottom:1.875rem;}.slick-dots{position:absolute;bottom:-1.5rem;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;}.slick-dots li{position:relative;display:inline-block;width:1.25rem;height:1.25rem;margin:0 0.313rem;padding:0;cursor:pointer;}.slick-dots li button{font-size:0;line-height:0;display:block;width:1.25rem;height:1.25rem;padding:0.313rem;cursor:pointer;color:transparent;border:0;outline:none;background:transparent;}.slick-dots li button:hover,.slick-dots li button:focus{outline:none;}.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}.slick-dots li button:before{font-family:'slick';font-size:0.375rem;line-height:1.25rem;position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;content:'•';text-align:center;opacity:0.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.slick-dots li.slick-active button:before{opacity:0.75;color:black;}
|
|
3
3
|
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1}.iiz__img--hidden{visibility:hidden;opacity:0}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}.iiz__btn{background:rgba(255,255,255,.8);width:40px;height:40px;border:none;outline:0;padding:0;position:absolute;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none}.iiz__btn:before{content:" ";background-position:center;background-repeat:no-repeat;display:block}.iiz__hint{bottom:10px;right:10px;pointer-events:none}.iiz__hint:before{content:" ";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.9 19.9'%3E%3Cpath d='M13.9 7.4C13.9 3.8 11 .9 7.4.9S.9 3.8.9 7.4s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5zm5.3 12.5l-6.7-7.2c-1.4 1.3-3.2 2.1-5.1 2.1-4.1 0-7.4-3.3-7.4-7.4S3.3 0 7.4 0s7.4 3.3 7.4 7.4c0 1.7-.6 3.4-1.7 4.7l6.8 7.2-.7.6z' fill='%23000222'/%3E%3C/svg%3E");width:20px;height:20px}.iiz__close{top:10px;right:10px;visibility:hidden;opacity:0}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer}.iiz__close::before{content:" ";width:29px;height:29px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:100% 1px,1px 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
|
|
4
|
-
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}
|
|
4
|
+
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){div[data-testid='product-gallery-mobile-v1'] .slick-list > .slick-track{height:auto;}div[data-testid='product-gallery-mobile-v1'] .zoomWrapper.iiz > div{height:auto;}}
|
|
5
5
|
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:510px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:95px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}
|
|
6
|
-
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){.slick-list > .slick-track{height:396px;}.zoomWrapper.iiz > div{height:396px;width:100%;display:flex;flex-direction:column;justify-content:center;}}
|
|
6
|
+
.iiz{max-width:100%;margin:0;position:relative;overflow:hidden;display:inline-block;cursor:-webkit-zoom-in;cursor:zoom-in;}.zoomWrapper.iiz{max-height:524px;vertical-align:top;}.iiz--drag .iiz__zoom-img--visible{cursor:-webkit-grab;cursor:grab;}.iiz__img{max-width:100%;height:auto;display:block;pointer-events:none;visibility:visible;opacity:1;}.iiz__img--hidden{visibility:hidden;opacity:0;}.iiz__img--abs{width:100%;height:100%;position:absolute;top:0;left:0;display:block;}.iiz__zoom-img{width:auto!important;max-width:none!important;position:absolute;visibility:hidden;opacity:0;pointer-events:none;display:block;}.iiz__zoom-img--visible{visibility:visible;opacity:1;pointer-events:auto;cursor:-webkit-zoom-out;cursor:zoom-out;-ms-touch-action:none;touch-action:none;zoom:1.2;}.iiz__zoom-portal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;}.iiz__btn{background:rgba(255,255,255,0.8);max-width:98px;min-width:fit-content;height:32px;border:none;outline:none;padding:0 8px;position:absolute;z-index:5;text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;}.iiz__btn:before{content:' ';background-position:center;background-repeat:no-repeat;display:block;}.iiz__hint{bottom:10%;right:0;pointer-events:none;border-radius:150px 0 0 150px;}.iiz__hint:before{content:'+';background-image:none;width:17px;height:17px;font-size:19px;border-radius:500px;border:2px solid #292929;display:inline-block;position:relative;text-align:center;line-height:17px;font-weight:600;}.iiz__hint:after{content:'Zoom in';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.iiz__close{border-radius:150px;top:auto;right:0;left:0;margin:auto;bottom:20px;visibility:hidden;opacity:0;color:#292929;}.iiz__close--visible{visibility:visible;opacity:1;cursor:pointer;}.iiz__close::before{content:' ';width:16px;height:16px;background-image:-webkit-gradient(linear,left top,left bottom,from(#222),to(#222)),-webkit-gradient(linear,left top,left bottom,from(#222),to(#222));background-image:linear-gradient(#222,#222),linear-gradient(#222,#222);background-size:65% 2px,2px 65%;transform:rotate(45deg);border-radius:500px;border:2px solid #292929;}.iiz__close::after{content:'Close';font-size:14px;font-weight:600;display:inline-block;margin-left:5px;}.slick-slide{position:relative;}.slick-arrow{cursor:pointer;display:none!important;position:absolute;top:45%;z-index:1;}.slick-arrow::before{content:''!important;}@media only screen and (max-width:480px){.slick-arrow{display:block!important;}}.slick-arrow.slick-disabled{display:none!important;}.slick-prev{left:0;}.slick-next{right:0;}.slick-dots{bottom:15px;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%;}.slick-dots li{position:relative;display:inline-block;height:20px;width:20px;margin:0;padding:0;cursor:pointer;}.slick-dots li.slick-active{display:inline-block!important;}.slick-dots li:nth-child(n + 10){display:none;}.slick-dots li button{background:transparent;border:0;color:transparent;cursor:pointer;display:block;height:20px;line-height:0;outline:none;padding:5px;width:20px;}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:0.5;}.slick-dots li button:before{background:rgba(27,25,25,0.5);border-radius:20px;content:' ';display:block;height:8px;left:0;margin:5px;position:absolute;top:0;width:8px;opacity:1;}.slick-dots li.slick-active button:before{background-color:#fff;opacity:1;width:12px;height:12px;top:-1px;}.slick-dots li:not(.slick-active) button:before{border:1px solid hsla(0,0%,100%,0.6);}@media only screen and (max-width:768px){div[data-testid='product-gallery-mobile-v3'] .slick-list > .slick-track{height:396px;}div[data-testid='product-gallery-mobile-v3'] .zoomWrapper.iiz > div{height:396px;width:100%;display:flex;flex-direction:column;justify-content:center;}}
|
package/build/index.esm.js
CHANGED
|
@@ -13618,7 +13618,7 @@ var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4
|
|
|
13618
13618
|
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13619
13619
|
var ProductGalleryMobile = function (_a) {
|
|
13620
13620
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13621
|
-
return (jsx$1(Container$y, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13621
|
+
return (jsx$1(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13622
13622
|
};
|
|
13623
13623
|
var templateObject_1$J;
|
|
13624
13624
|
|
|
@@ -13887,41 +13887,27 @@ function useSwipeable(options) {
|
|
|
13887
13887
|
return handlers;
|
|
13888
13888
|
}
|
|
13889
13889
|
|
|
13890
|
-
var
|
|
13891
|
-
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13892
|
-
return borderRadiusVariant &&
|
|
13893
|
-
"\n border-radius: 40px;\n ";
|
|
13894
|
-
});
|
|
13895
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13896
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13897
|
-
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13898
|
-
var _b, _c;
|
|
13899
|
-
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13900
|
-
return (jsxs$1(Container$x, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13901
|
-
});
|
|
13902
|
-
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
13903
|
-
|
|
13904
|
-
var Button$2 = newStyled.button(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13890
|
+
var Button$2 = newStyled.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13905
13891
|
var ArrowButton = function (_a) {
|
|
13906
13892
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13907
13893
|
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13908
13894
|
};
|
|
13909
|
-
var templateObject_1$
|
|
13895
|
+
var templateObject_1$I;
|
|
13910
13896
|
|
|
13911
|
-
var Container$
|
|
13897
|
+
var Container$x = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13912
13898
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13913
13899
|
var SlideDots = function (_a) {
|
|
13914
13900
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13915
13901
|
var theme = useTheme();
|
|
13916
|
-
return (jsx$1(Container$
|
|
13902
|
+
return (jsx$1(Container$x, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13917
13903
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13918
13904
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
13919
13905
|
};
|
|
13920
|
-
var templateObject_1$
|
|
13906
|
+
var templateObject_1$H;
|
|
13921
13907
|
|
|
13922
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13923
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13924
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13908
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13909
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13910
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13925
13911
|
var SlideNavigation = function (_a) {
|
|
13926
13912
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13927
13913
|
var theme = useTheme();
|
|
@@ -13933,6 +13919,20 @@ var SlideNavigation = function (_a) {
|
|
|
13933
13919
|
onNavigate(selectedIndex + 1);
|
|
13934
13920
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13935
13921
|
};
|
|
13922
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
13923
|
+
|
|
13924
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13925
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13926
|
+
return borderRadiusVariant &&
|
|
13927
|
+
"\n border-radius: 40px;\n ";
|
|
13928
|
+
});
|
|
13929
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13930
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13931
|
+
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13932
|
+
var _b, _c;
|
|
13933
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13934
|
+
return (jsxs$1(Container$w, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13935
|
+
});
|
|
13936
13936
|
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13937
13937
|
|
|
13938
13938
|
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
@@ -13957,7 +13957,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13957
13957
|
useEffect(function () {
|
|
13958
13958
|
setSelectedImage(images[index]);
|
|
13959
13959
|
}, [index, images]);
|
|
13960
|
-
return (jsxs$1(Container$v, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13960
|
+
return (jsxs$1(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
13961
13961
|
};
|
|
13962
13962
|
var templateObject_1$E;
|
|
13963
13963
|
|
|
@@ -14075,7 +14075,7 @@ var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4
|
|
|
14075
14075
|
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14076
14076
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14077
14077
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14078
|
-
return (jsx$1(Container$t, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14078
|
+
return (jsx$1(Container$t, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14079
14079
|
};
|
|
14080
14080
|
var templateObject_1$C;
|
|
14081
14081
|
|
package/build/index.js
CHANGED
|
@@ -13644,7 +13644,7 @@ var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4
|
|
|
13644
13644
|
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13645
13645
|
var ProductGalleryMobile = function (_a) {
|
|
13646
13646
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13647
|
-
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13647
|
+
return (jsxRuntime.jsx(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13648
13648
|
};
|
|
13649
13649
|
var templateObject_1$J;
|
|
13650
13650
|
|
|
@@ -13913,41 +13913,27 @@ function useSwipeable(options) {
|
|
|
13913
13913
|
return handlers;
|
|
13914
13914
|
}
|
|
13915
13915
|
|
|
13916
|
-
var
|
|
13917
|
-
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13918
|
-
return borderRadiusVariant &&
|
|
13919
|
-
"\n border-radius: 40px;\n ";
|
|
13920
|
-
});
|
|
13921
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13922
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13923
|
-
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13924
|
-
var _b, _c;
|
|
13925
|
-
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13926
|
-
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13927
|
-
});
|
|
13928
|
-
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
13929
|
-
|
|
13930
|
-
var Button$2 = newStyled.button(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13916
|
+
var Button$2 = newStyled.button(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13931
13917
|
var ArrowButton = function (_a) {
|
|
13932
13918
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13933
13919
|
return (jsxRuntime.jsx(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13934
13920
|
};
|
|
13935
|
-
var templateObject_1$
|
|
13921
|
+
var templateObject_1$I;
|
|
13936
13922
|
|
|
13937
|
-
var Container$
|
|
13923
|
+
var Container$x = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13938
13924
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13939
13925
|
var SlideDots = function (_a) {
|
|
13940
13926
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13941
13927
|
var theme = useTheme();
|
|
13942
|
-
return (jsxRuntime.jsx(Container$
|
|
13928
|
+
return (jsxRuntime.jsx(Container$x, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13943
13929
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13944
13930
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
13945
13931
|
};
|
|
13946
|
-
var templateObject_1$
|
|
13932
|
+
var templateObject_1$H;
|
|
13947
13933
|
|
|
13948
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13949
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13950
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13934
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13935
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13936
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13951
13937
|
var SlideNavigation = function (_a) {
|
|
13952
13938
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13953
13939
|
var theme = useTheme();
|
|
@@ -13959,6 +13945,20 @@ var SlideNavigation = function (_a) {
|
|
|
13959
13945
|
onNavigate(selectedIndex + 1);
|
|
13960
13946
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13961
13947
|
};
|
|
13948
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
13949
|
+
|
|
13950
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
13951
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13952
|
+
return borderRadiusVariant &&
|
|
13953
|
+
"\n border-radius: 40px;\n ";
|
|
13954
|
+
});
|
|
13955
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13956
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13957
|
+
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13958
|
+
var _b, _c;
|
|
13959
|
+
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13960
|
+
return (jsxRuntime.jsxs(Container$w, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13961
|
+
});
|
|
13962
13962
|
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13963
13963
|
|
|
13964
13964
|
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
@@ -13983,7 +13983,7 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13983
13983
|
React$2.useEffect(function () {
|
|
13984
13984
|
setSelectedImage(images[index]);
|
|
13985
13985
|
}, [index, images]);
|
|
13986
|
-
return (jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13986
|
+
return (jsxRuntime.jsxs(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
13987
13987
|
};
|
|
13988
13988
|
var templateObject_1$E;
|
|
13989
13989
|
|
|
@@ -14101,7 +14101,7 @@ var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4
|
|
|
14101
14101
|
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14102
14102
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14103
14103
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14104
|
-
return (jsxRuntime.jsx(Container$t, { children: jsxRuntime.jsx(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14104
|
+
return (jsxRuntime.jsx(Container$t, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14105
14105
|
};
|
|
14106
14106
|
var templateObject_1$C;
|
|
14107
14107
|
|
package/package.json
CHANGED