@crystaldesign/diva-seller 24.11.0-beta.40 → 24.11.0-beta.41
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/esm/index.js
CHANGED
|
@@ -63,7 +63,8 @@ import Skeleton from '@material-ui/lab/Skeleton';
|
|
|
63
63
|
import Carousel from 'react-material-ui-carousel';
|
|
64
64
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
65
65
|
import classnames from 'classnames';
|
|
66
|
-
import {
|
|
66
|
+
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
67
|
+
import { Autoplay, Thumbs, Pagination, FreeMode } from 'swiper/modules';
|
|
67
68
|
import '@babel/runtime/helpers/objectDestructuringEmpty';
|
|
68
69
|
import PropTypes from 'prop-types';
|
|
69
70
|
import ProductsComponent, { useProductState as useProductState$1 } from '@crystaldesign/products-component';
|
|
@@ -7644,8 +7645,8 @@ var descriptionContainer$1 = "description-container-k1vLT";
|
|
|
7644
7645
|
var modelTitle = "model-title-Sgm-0";
|
|
7645
7646
|
var description = "description-GyPZq";
|
|
7646
7647
|
var pdf = "pdf-oNnao";
|
|
7647
|
-
var css_248z$
|
|
7648
|
-
styleInject(css_248z$
|
|
7648
|
+
var css_248z$d = ".wrapper-fSL18 {\n display: flex;\n flex-direction: column;\n padding: 0 12px;\n max-height: calc(100% - 42px);\n}\n\n.title-iTDPA {\n padding: 16px 8px;\n font-size: 36px;\n}\n\n.subTitle-4-0PW {\n padding: 12px 18px;\n font-size: 28px;\n}\n\n.description-container-k1vLT {\n display: flex;\n flex-direction: column;\n background-color: #f8f8f8;\n padding: 18px;\n gap: 12px;\n height: calc(100% - 164px);\n}\n\n.model-title-Sgm-0 {\n font-size: 24px;\n font-weight: 600;\n}\n.description-GyPZq {\n font-size: 16px;\n overflow: auto;\n flex-grow: 3;\n}\n\n.pdf-oNnao {\n display: 'flex';\n flex: 1 1 10px;\n}\n\n.pdf-oNnao svg {\n margin-right: 10px;\n}\n";
|
|
7649
|
+
styleInject(css_248z$d);
|
|
7649
7650
|
|
|
7650
7651
|
var _excluded$a = ["data", "text"];
|
|
7651
7652
|
function ownKeys$t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -7701,8 +7702,8 @@ var button = "button-NXyWV";
|
|
|
7701
7702
|
var navBack = "nav-back-AzU6X";
|
|
7702
7703
|
var icon$1 = "icon-0h-39";
|
|
7703
7704
|
var text = "text-55Zpw";
|
|
7704
|
-
var css_248z$
|
|
7705
|
-
styleInject(css_248z$
|
|
7705
|
+
var css_248z$c = ".wrapper-oUrTP {\n right: 10px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n z-index: 500;\n background-color: #fff;\n position: absolute;\n bottom: 0;\n width: 83%;\n}\n\n.container-Sr3pC {\n display: flex;\n gap: 12px;\n width: 50%;\n justify-content: flex-end;\n padding: 8px;\n}\n\n.button-NXyWV {\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--diva-theme-palette-primary-main);\n border-radius: 2px;\n border-color: var(--diva-theme-palette-primary-main);\n border-style: solid;\n border-width: 1.5px;\n flex-grow: 1;\n cursor: pointer;\n}\n\n.nav-back-AzU6X {\n width: 50px;\n height: 50px;\n border-radius: 2px;\n border-color: var(--diva-theme-palette-primary-main);\n border-style: solid;\n border-width: 1.5px;\n background-color: #fff;\n background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%2218%22 viewBox%3D%220 0 10 18%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 1L1 9L9 17%22 stroke%3D%22%23713434%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n background-size: 27%;\n background-repeat: no-repeat;\n background-position: center center;\n cursor: pointer;\n}\n\n.icon-0h-39 {\n width: 24px;\n height: 24px;\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center center;\n}\n\n.text-55Zpw {\n text-align: center;\n /* flex-basis: 100%; */\n color: white;\n}\n";
|
|
7706
|
+
styleInject(css_248z$c);
|
|
7706
7707
|
|
|
7707
7708
|
var _excluded$9 = ["navigateBack", "buttons"];
|
|
7708
7709
|
function ownKeys$s(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -7751,13 +7752,16 @@ var favPlanning = "fav-planning-R8cxS";
|
|
|
7751
7752
|
var setPlanning = "set-planning-1AQNC";
|
|
7752
7753
|
var articleList = "article-list-uOn26";
|
|
7753
7754
|
var analyticsIcon = "analytics-icon-kCv53";
|
|
7754
|
-
var css_248z$
|
|
7755
|
+
var css_248z$b = ".layout-NhUpB {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n grid-template-rows: repeat(10, 1fr);\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n overflow: auto;\n height: 100%;\n}\n\n.info-9St01 {\n grid-area: 1 / 1 / 11 / 3;\n z-index: 100;\n}\n\n.right-side-64-Yz {\n grid-area: 1 / 3 / 11 / 13;\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.scroller-container-TAsAz {\n overflow: auto;\n height: calc(100% - 70px);\n}\n\n.catalog-images-jJGqW {\n padding: 12px 12px 0 12px;\n height: calc(50% - 12px);\n}\n.products-hidden-T6mTt .catalog-images-jJGqW {\n height: calc(100% - 12px);\n}\n.products-QxoIf {\n height: 50%;\n}\n.footer-1ONIt {\n bottom: 0;\n right: 8px;\n}\n\n.empty-planning-BZTrr {\n background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4 16L3.57574 15.5757C3.46321 15.6883 3.4 15.8409 3.4 16H4ZM17 3L17.4243 2.57574C17.1899 2.34142 16.8101 2.34142 16.5757 2.57574L17 3ZM21 7L21.4243 7.42426C21.6586 7.18995 21.6586 6.81005 21.4243 6.57574L21 7ZM8 20V20.6C8.15913 20.6 8.31174 20.5368 8.42426 20.4243L8 20ZM4 20H3.4C3.4 20.3314 3.66863 20.6 4 20.6V20ZM12 19.4C11.6686 19.4 11.4 19.6686 11.4 20C11.4 20.3314 11.6686 20.6 12 20.6V19.4ZM20.5 20.6C20.8314 20.6 21.1 20.3314 21.1 20C21.1 19.6686 20.8314 19.4 20.5 19.4V20.6ZM4.42426 16.4243L17.4243 3.42426L16.5757 2.57574L3.57574 15.5757L4.42426 16.4243ZM16.5757 3.42426L20.5757 7.42426L21.4243 6.57574L17.4243 2.57574L16.5757 3.42426ZM20.5757 6.57574L7.57574 19.5757L8.42426 20.4243L21.4243 7.42426L20.5757 6.57574ZM8 19.4H4V20.6H8V19.4ZM4.6 20V16H3.4V20H4.6ZM13.5757 6.42426L17.5757 10.4243L18.4243 9.57574L14.4243 5.57574L13.5757 6.42426ZM12 20.6H20.5V19.4H12V20.6Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.fav-planning-R8cxS {\n background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M4.3314 12.0474L12 20L19.6686 12.0474C20.5211 11.1633 21 9.96429 21 8.71405C21 6.11055 18.9648 4 16.4543 4C15.2487 4 14.0925 4.49666 13.24 5.38071L12 6.66667L10.76 5.38071C9.90749 4.49666 8.75128 4 7.54569 4C5.03517 4 3 6.11055 3 8.71405C3 9.96429 3.47892 11.1633 4.3314 12.0474Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.set-planning-1AQNC {\n background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M7.11164 16.5938L3.8061 18.9095C3.46519 19.1412 3 18.9011 3 18.4934V5.5064C3 5.12726 3.4083 4.88294 3.75042 5.05738L7.1021 6.77004M12.1193 16.7346V9.76989C12.1193 9.49058 12.3494 9.26416 12.6332 9.26416H16.1086C16.3924 9.26416 16.6225 9.49058 16.6225 9.76989V16.7346M7.46741 16.7346H19.486C19.7699 16.7346 20 16.5081 20 16.2288V7.12577C20 6.84647 19.7699 6.62004 19.486 6.62004H7.46741C7.18356 6.62004 6.95346 6.84647 6.95346 7.12577V16.2288C6.95346 16.5081 7.18356 16.7346 7.46741 16.7346Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.article-list-uOn26 {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 24 24%22 %3E %3Cpath fill%3D%22white%22 d%3D%22M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.analytics-icon-kCv53 {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 stroke%3D%22%23fff%22 fill%3D%22%23fff%22 stroke-width%3D%222px%22 height%3D%2248%22 width%3D%2248%22%3E%3Cpath d%3D%22M7.3 40.7v-2.1l1.1-1.1v3.2Zm8.1 0V30.6l1.1-1.1v11.2Zm8.05 0V29.5l1.1 1.15V40.7Zm8.1 0V30.65l1.1-1.1V40.7Zm8.05 0V22.6l1.1-1.1v19.2ZM7.3 28.05v-1.5L20 13.85l8 8 12.7-12.7v1.55L28 23.4l-8-8Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
|
|
7756
|
+
styleInject(css_248z$b);
|
|
7757
|
+
|
|
7758
|
+
var css_248z$a = "#diva-catalog-images .swiper {\n margin-left: auto;\n margin-right: auto;\n position: relative;\n overflow: hidden;\n list-style: none;\n padding: 0;\n /* Fix of Webkit flickering */\n z-index: 1;\n display: block;\n}\n#diva-catalog-images .swiper-vertical > .swiper-wrapper {\n flex-direction: column;\n}\n#diva-catalog-images .swiper-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1;\n display: flex;\n transition-property: transform;\n transition-timing-function: initial;\n transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);\n box-sizing: content-box;\n}\n#diva-catalog-images .swiper-android .swiper-slide,\n#diva-catalog-images .swiper-ios .swiper-slide,\n#diva-catalog-images .swiper-wrapper {\n transform: translate3d(0px, 0, 0);\n}\n#diva-catalog-images .swiper-horizontal {\n touch-action: pan-y;\n}\n#diva-catalog-images .swiper-vertical {\n touch-action: pan-x;\n}\n#diva-catalog-images .swiper-slide {\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n position: relative;\n transition-property: transform;\n display: block;\n}\n#diva-catalog-images .swiper-slide-invisible-blank {\n visibility: hidden;\n}\n/* Auto Height */\n#diva-catalog-images .swiper-autoheight,\n#diva-catalog-images .swiper-autoheight .swiper-slide {\n height: auto;\n}\n#diva-catalog-images .swiper-autoheight .swiper-wrapper {\n align-items: flex-start;\n transition-property: transform, height;\n}\n#diva-catalog-images .swiper-backface-hidden .swiper-slide {\n transform: translateZ(0);\n backface-visibility: hidden;\n}\n/* 3D Effects */\n#diva-catalog-images .swiper-3d.swiper-css-mode .swiper-wrapper {\n perspective: 1200px;\n}\n#diva-catalog-images .swiper-3d .swiper-wrapper {\n transform-style: preserve-3d;\n}\n#diva-catalog-images .swiper-3d {\n perspective: 1200px;\n}\n#diva-catalog-images .swiper-3d .swiper-slide,\n#diva-catalog-images .swiper-3d .swiper-cube-shadow {\n transform-style: preserve-3d;\n}\n/* CSS Mode */\n#diva-catalog-images .swiper-css-mode > .swiper-wrapper {\n overflow: auto;\n scrollbar-width: none;\n /* For Firefox */\n -ms-overflow-style: none;\n /* For Internet Explorer and Edge */\n}\n#diva-catalog-images .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n display: none;\n}\n#diva-catalog-images .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: start start;\n}\n#diva-catalog-images .swiper-css-mode.swiper-horizontal > .swiper-wrapper {\n scroll-snap-type: x mandatory;\n}\n#diva-catalog-images .swiper-css-mode.swiper-vertical > .swiper-wrapper {\n scroll-snap-type: y mandatory;\n}\n#diva-catalog-images .swiper-css-mode.swiper-free-mode > .swiper-wrapper {\n scroll-snap-type: none;\n}\n#diva-catalog-images .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: none;\n}\n#diva-catalog-images .swiper-css-mode.swiper-centered > .swiper-wrapper::before {\n content: '';\n flex-shrink: 0;\n order: 9999;\n}\n#diva-catalog-images .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {\n scroll-snap-align: center center;\n scroll-snap-stop: always;\n}\n[dir=\"ltr\"] #diva-catalog-images .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] #diva-catalog-images .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n margin-right: var(--swiper-centered-offset-before);\n}\n#diva-catalog-images .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n height: 100%;\n min-height: 1px;\n width: var(--swiper-centered-offset-after);\n}\n#diva-catalog-images .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n margin-top: var(--swiper-centered-offset-before);\n}\n#diva-catalog-images .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {\n width: 100%;\n min-width: 1px;\n height: var(--swiper-centered-offset-after);\n}\n/* Slide styles start */\n/* 3D Shadows */\n#diva-catalog-images .swiper-3d .swiper-slide-shadow,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-left,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-right,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-top,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-bottom,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-left,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-right,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-top,\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-bottom {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 10;\n}\n#diva-catalog-images .swiper-3d .swiper-slide-shadow {\n background: rgba(0, 0, 0, 0.15);\n}\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-left {\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-right {\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-top {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-catalog-images .swiper-3d .swiper-slide-shadow-bottom {\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n}\n#diva-catalog-images .swiper-lazy-preloader {\n width: 42px;\n height: 42px;\n position: absolute;\n left: 50%;\n top: 50%;\n margin-left: -21px;\n margin-top: -21px;\n z-index: 10;\n transform-origin: 50%;\n box-sizing: border-box;\n border: 4px solid var(--swiper-theme-color);\n border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n border-radius: 50%;\n border-top-color: transparent;\n}\n#diva-catalog-images .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,\n#diva-catalog-images .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {\n animation: swiper-preloader-spin 1s infinite linear;\n}\n#diva-catalog-images .swiper-lazy-preloader-white {\n --swiper-preloader-color: #fff;\n}\n#diva-catalog-images .swiper-lazy-preloader-black {\n --swiper-preloader-color: #000;\n}\n@keyframes swiper-preloader-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n/* Slide styles end */\n\n/* Pagination */\n\n#diva-catalog-images .swiper-pagination {\n position: absolute;\n text-align: center;\n transition: 300ms opacity;\n transform: translate3d(0, 0, 0);\n z-index: 10;\n}\n#diva-catalog-images .swiper-pagination.swiper-pagination-hidden {\n opacity: 0;\n}\n#diva-catalog-images .swiper-pagination-disabled > .swiper-pagination,\n#diva-catalog-images .swiper-pagination.swiper-pagination-disabled {\n display: none !important;\n}\n/* Common Styles */\n#diva-catalog-images .swiper-pagination-fraction,\n#diva-catalog-images .swiper-pagination-custom,\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-bullets,\n#diva-catalog-images .swiper-pagination-bullets.swiper-pagination-horizontal {\n bottom: 8px;\n bottom: var(--swiper-pagination-bottom, 8px);\n top: auto;\n top: var(--swiper-pagination-top, auto);\n left: 0;\n width: 100%;\n}\n/* Bullets */\n#diva-catalog-images .swiper-pagination-bullets-dynamic {\n overflow: hidden;\n font-size: 0;\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transform: scale(0.33);\n position: relative;\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n transform: scale(1);\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n transform: scale(1);\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n transform: scale(0.66);\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n transform: scale(0.33);\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n transform: scale(0.66);\n}\n#diva-catalog-images .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n transform: scale(0.33);\n}\n#diva-catalog-images .swiper-pagination-bullet {\n width: 8px;\n width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n height: 8px;\n height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n display: inline-block;\n border-radius: 50%;\n border-radius: var(--swiper-pagination-bullet-border-radius, 50%);\n background: #000;\n background: var(--swiper-pagination-bullet-inactive-color, #000);\n opacity: 0.2;\n opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n}\n#diva-catalog-images button.swiper-pagination-bullet {\n border: none;\n margin: 0;\n padding: 0;\n box-shadow: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n#diva-catalog-images .swiper-pagination-clickable .swiper-pagination-bullet {\n cursor: pointer;\n}\n#diva-catalog-images .swiper-pagination-bullet:only-child {\n display: none !important;\n}\n#diva-catalog-images .swiper-pagination-bullet-active {\n opacity: 1;\n opacity: var(--swiper-pagination-bullet-opacity, 1);\n background: var(--swiper-theme-color);\n background: var(--swiper-pagination-color, var(--swiper-theme-color));\n}\n#diva-catalog-images .swiper-vertical > .swiper-pagination-bullets,\n#diva-catalog-images .swiper-pagination-vertical.swiper-pagination-bullets {\n right: 8px;\n right: var(--swiper-pagination-right, 8px);\n left: auto;\n left: var(--swiper-pagination-left, auto);\n top: 50%;\n transform: translate3d(0px, -50%, 0);\n}\n#diva-catalog-images .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,\n#diva-catalog-images .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {\n margin: 6px 0;\n margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n display: block;\n}\n#diva-catalog-images .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n#diva-catalog-images .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n top: 50%;\n transform: translateY(-50%);\n width: 8px;\n}\n#diva-catalog-images .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,\n#diva-catalog-images .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n display: inline-block;\n transition: 200ms transform, 200ms top;\n}\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n#diva-catalog-images .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n margin: 0 4px;\n margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n}\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n#diva-catalog-images .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n left: 50%;\n transform: translateX(-50%);\n white-space: nowrap;\n}\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,\n#diva-catalog-images .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transition: 200ms transform, 200ms left;\n}\n#diva-catalog-images .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n transition: 200ms transform, 200ms right;\n}\n/* Fraction */\n#diva-catalog-images .swiper-pagination-fraction {\n color: inherit;\n color: var(--swiper-pagination-fraction-color, inherit);\n}\n/* Progress */\n#diva-catalog-images .swiper-pagination-progressbar {\n background: rgba(0, 0, 0, 0.25);\n background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));\n position: absolute;\n}\n#diva-catalog-images .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n background: var(--swiper-theme-color);\n background: var(--swiper-pagination-color, var(--swiper-theme-color));\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n transform: scale(0);\n transform-origin: left top;\n}\n#diva-catalog-images .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n transform-origin: right top;\n}\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-progressbar,\n#diva-catalog-images .swiper-pagination-progressbar.swiper-pagination-horizontal,\n#diva-catalog-images .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n#diva-catalog-images .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {\n width: 100%;\n height: 4px;\n height: var(--swiper-pagination-progressbar-size, 4px);\n left: 0;\n top: 0;\n}\n#diva-catalog-images .swiper-vertical > .swiper-pagination-progressbar,\n#diva-catalog-images .swiper-pagination-progressbar.swiper-pagination-vertical,\n#diva-catalog-images .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n#diva-catalog-images .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {\n width: 4px;\n width: var(--swiper-pagination-progressbar-size, 4px);\n height: 100%;\n left: 0;\n top: 0;\n}\n#diva-catalog-images .swiper-pagination-lock {\n display: none;\n}\n\n/* Free Mode */\n\n#diva-catalog-images .swiper-free-mode > .swiper-wrapper {\n transition-timing-function: ease-out;\n margin: 0 auto;\n}\n";
|
|
7755
7759
|
styleInject(css_248z$a);
|
|
7756
7760
|
|
|
7757
7761
|
var wrapper$5 = "wrapper-D5Cmc";
|
|
7758
|
-
var images = "images-qNHg7";
|
|
7759
7762
|
var thumbs = "thumbs-cWKAj";
|
|
7760
|
-
var
|
|
7763
|
+
var mainSlider = "mainSlider-S8opH";
|
|
7764
|
+
var css_248z$9 = ".wrapper-D5Cmc {\n display: flex;\n position: relative;\n width: calc(100% - 24px);\n gap: 12px;\n}\n\n.thumbs-cWKAj .swiper-slide {\n opacity: 0.4;\n}\n\n.thumbs-cWKAj .swiper-slide-thumb-active {\n opacity: 1;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active {\n background-color: var(--diva-theme-palette-primary-main) !important;\n}\n\n.mainSlider-S8opH .swiper-pagination-bullet-active { /* Active bullet color */\n}\n";
|
|
7761
7765
|
styleInject(css_248z$9);
|
|
7762
7766
|
|
|
7763
7767
|
var _excluded$8 = ["data"];
|
|
@@ -7768,70 +7772,66 @@ var CatalogImages = function CatalogImages(_ref) {
|
|
|
7768
7772
|
_useState2 = _slicedToArray(_useState, 2),
|
|
7769
7773
|
thumbsSwiper = _useState2[0],
|
|
7770
7774
|
setThumbsSwiper = _useState2[1];
|
|
7771
|
-
var
|
|
7772
|
-
return {
|
|
7773
|
-
content: /*#__PURE__*/jsx("img", {
|
|
7774
|
-
src: media.url,
|
|
7775
|
-
style: {
|
|
7776
|
-
objectFit: 'scale-down',
|
|
7777
|
-
width: '100%',
|
|
7778
|
-
height: '100%'
|
|
7779
|
-
}
|
|
7780
|
-
})
|
|
7781
|
-
};
|
|
7782
|
-
});
|
|
7783
|
-
var mediasTumb = data.images.map(function (media) {
|
|
7784
|
-
return {
|
|
7785
|
-
swiperSlideStyle: {
|
|
7786
|
-
width: '100%',
|
|
7787
|
-
height: 'auto'
|
|
7788
|
-
},
|
|
7789
|
-
content: /*#__PURE__*/jsx("img", {
|
|
7790
|
-
src: media.url,
|
|
7791
|
-
style: {
|
|
7792
|
-
objectFit: 'scale-down',
|
|
7793
|
-
width: '100%',
|
|
7794
|
-
height: 'auto'
|
|
7795
|
-
}
|
|
7796
|
-
})
|
|
7797
|
-
};
|
|
7798
|
-
});
|
|
7775
|
+
var mainSwiperRef = useRef(null);
|
|
7799
7776
|
return /*#__PURE__*/jsxs("div", {
|
|
7777
|
+
id: "diva-catalog-images",
|
|
7800
7778
|
className: classnames(wrapper$5, props.className),
|
|
7801
|
-
children: [/*#__PURE__*/jsx(
|
|
7802
|
-
|
|
7803
|
-
|
|
7804
|
-
|
|
7805
|
-
|
|
7806
|
-
|
|
7807
|
-
|
|
7808
|
-
|
|
7809
|
-
|
|
7810
|
-
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
|
|
7816
|
-
|
|
7817
|
-
|
|
7779
|
+
children: [/*#__PURE__*/jsx(Swiper, {
|
|
7780
|
+
ref: mainSwiperRef,
|
|
7781
|
+
pagination: {
|
|
7782
|
+
clickable: true
|
|
7783
|
+
},
|
|
7784
|
+
autoplay: {
|
|
7785
|
+
delay: 5000
|
|
7786
|
+
},
|
|
7787
|
+
modules: [Autoplay, Thumbs, Pagination],
|
|
7788
|
+
spaceBetween: 10,
|
|
7789
|
+
thumbs: {
|
|
7790
|
+
swiper: thumbsSwiper
|
|
7791
|
+
},
|
|
7792
|
+
style: {
|
|
7793
|
+
height: '100%'
|
|
7794
|
+
},
|
|
7795
|
+
className: mainSlider,
|
|
7796
|
+
children: data.images.map(function (media, index) {
|
|
7797
|
+
return /*#__PURE__*/jsx(SwiperSlide, {
|
|
7798
|
+
children: /*#__PURE__*/jsx("img", {
|
|
7799
|
+
src: media.url,
|
|
7800
|
+
style: {
|
|
7801
|
+
objectFit: 'scale-down',
|
|
7802
|
+
width: '100%',
|
|
7803
|
+
height: '100%'
|
|
7804
|
+
}
|
|
7805
|
+
})
|
|
7806
|
+
}, index);
|
|
7818
7807
|
})
|
|
7819
|
-
}), /*#__PURE__*/jsx(
|
|
7808
|
+
}), /*#__PURE__*/jsx(Swiper, {
|
|
7809
|
+
onSwiper: function onSwiper(swiper) {
|
|
7810
|
+
return setThumbsSwiper(swiper);
|
|
7811
|
+
},
|
|
7812
|
+
spaceBetween: 1,
|
|
7813
|
+
slidesPerView: props.showProducts ? 4 : 10,
|
|
7814
|
+
freeMode: true,
|
|
7815
|
+
direction: "vertical",
|
|
7816
|
+
watchSlidesProgress: true,
|
|
7817
|
+
modules: [Thumbs, FreeMode],
|
|
7818
|
+
style: {
|
|
7819
|
+
width: '100%',
|
|
7820
|
+
marginLeft: '10px',
|
|
7821
|
+
cursor: 'pointer'
|
|
7822
|
+
},
|
|
7820
7823
|
className: thumbs,
|
|
7821
|
-
children:
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
|
|
7825
|
-
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
spaceBetween: 12
|
|
7833
|
-
}
|
|
7834
|
-
}
|
|
7824
|
+
children: data.images.map(function (media, index) {
|
|
7825
|
+
return /*#__PURE__*/jsx(SwiperSlide, {
|
|
7826
|
+
children: /*#__PURE__*/jsx("img", {
|
|
7827
|
+
src: media.url,
|
|
7828
|
+
style: {
|
|
7829
|
+
width: '100%',
|
|
7830
|
+
height: 'auto',
|
|
7831
|
+
objectFit: 'cover'
|
|
7832
|
+
}
|
|
7833
|
+
})
|
|
7834
|
+
}, index);
|
|
7835
7835
|
})
|
|
7836
7836
|
})]
|
|
7837
7837
|
});
|
|
@@ -8302,6 +8302,7 @@ function Info(_ref) {
|
|
|
8302
8302
|
children: [/*#__PURE__*/jsxs("div", {
|
|
8303
8303
|
className: scrollerContainer,
|
|
8304
8304
|
children: [showImages && /*#__PURE__*/jsx(CatalogImages, {
|
|
8305
|
+
showProducts: showProducts,
|
|
8305
8306
|
data: data,
|
|
8306
8307
|
className: catalogImages
|
|
8307
8308
|
}, showProducts ? '0' : '1'), /*#__PURE__*/jsx(ProductsOrArticles, {
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { CatalogInfoData } from '../../../types';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
+
import './swiper.css';
|
|
3
4
|
interface Props extends ComponentProps<'div'> {
|
|
4
5
|
data: CatalogInfoData;
|
|
6
|
+
showProducts?: boolean;
|
|
5
7
|
}
|
|
6
8
|
declare const CatalogImages: ({ data, ...props }: Props) => JSX.Element;
|
|
7
9
|
export default CatalogImages;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/InfoWithProducts/CatalogImages/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAc,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/InfoWithProducts/CatalogImages/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAc,EAAE,cAAc,EAAoB,MAAM,OAAO,CAAC;AAKhE,OAAO,cAAc,CAAC;AAKtB,UAAU,KAAM,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC3C,IAAI,EAAE,eAAe,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,uBAAwB,KAAK,gBAsD/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@crystaldesign/diva-seller",
|
|
3
|
-
"version": "24.11.0-beta.
|
|
3
|
+
"version": "24.11.0-beta.41",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"react-i18next": "^11.7.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@crystaldesign/analytics": "24.11.0-beta.
|
|
39
|
-
"@crystaldesign/products-component": "24.11.0-beta.
|
|
40
|
-
"@crystaldesign/real-time-viewer": "24.11.0-beta.
|
|
38
|
+
"@crystaldesign/analytics": "24.11.0-beta.41",
|
|
39
|
+
"@crystaldesign/products-component": "24.11.0-beta.41",
|
|
40
|
+
"@crystaldesign/real-time-viewer": "24.11.0-beta.41",
|
|
41
41
|
"@tinymce/tinymce-react": "^3.13.0",
|
|
42
42
|
"react-error-boundary": "^4.0.13",
|
|
43
43
|
"react-material-ui-carousel": "^2.1.1",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
},
|
|
46
46
|
"types": "./build/types/seller/src/index.d.ts",
|
|
47
47
|
"module": "build/esm/index.js",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "cce920bc3e1378ebbf4aa8608808f2bfa5622a67"
|
|
49
49
|
}
|