@crystaldesign/product-gallery 25.5.0-beta.8 → 25.5.0-beta.9

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.
@@ -6,6 +6,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
6
6
  import { ContentBoxComponent } from '@crystaldesign/content-box';
7
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
8
8
  import { useDivaCore } from '@crystaldesign/diva-core';
9
+ import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
9
10
  import ProductsComponent, { useProductState, createFilterParams, getFilterObject, Facets, ProductHeader } from '@crystaldesign/products-component';
10
11
 
11
12
  (function() {
@@ -112,7 +113,7 @@ var navigationVisible = "navigation-visible-omUqh";
112
113
  var pdpBackground = "pdp-background-uw3-u";
113
114
  var pdpContainer = "pdp-container--d0P1";
114
115
  var isMobileClass = "is-mobile-class-3tbms";
115
- var css_248z = ".scroller-class-J6Z4Z {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n.max-width-XHcc4 {\n position: relative;\n max-width: 1600px;\n margin: auto;\n height: 100%;\n width: 100%;\n}\n\n.parent-qDEav {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n margin-top: 12px;\n}\n\n.parent-qDEav.is-mobile-class {\n flex-direction: column;\n margin-top: 0;\n margin-top: initial;\n}\n\n.right-side-VPkpL {\n height: 100%;\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-template-rows: repeat(10, 1fr);\n grid-column-gap: 0px;\n padding-right: 12px;\n width: calc(100% - 12px);\n}\n\n.is-mobile-class .right-side-VPkpL {\n overflow: auto;\n padding-left: 6px;\n padding-right: 6px;\n width: calc(100% - 12px);\n}\n\n.disabled-nOvnY {\n pointer-events: none;\n}\n\n.products-Ui7d6 {\n grid-area: 5 / 1 / 11 / 6;\n}\n\n.filter-DmVHL {\n margin: 0 10px;\n min-width: 244px;\n max-width: 244px;\n z-index: 12;\n height: -moz-fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n /* gap: 12px; */\n}\n\n.is-mobile-class .filter-DmVHL {\n margin: 8px;\n width: calc(100% - 16px);\n}\n\n.top-image-zf6oO {\n grid-area: 1 / 1 / 5 / 6;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n z-index: 10;\n}\n\n.is-mobile-class .top-image-zf6oO {\n grid-area: 1 / 1 / 3 / 6;\n}\n.is-mobile-class .products-Ui7d6 {\n grid-area: 3 / 1 / 6 / 6;\n}\n\n.header-hidden-class .products-Ui7d6 {\n grid-area: 1 / 1 / 6 / 6;\n}\n.pdp-overlay-O21gM {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 500;\n}\n.navigation-visible-omUqh.pdp-overlay-O21gM {\n position: absolute;\n}\n\n.pdp-background-uw3-u {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(244, 244, 244, 0.8);\n\n z-index: 540;\n}\n\n.pdp-container--d0P1 {\n z-index: 580;\n background-color: #fff;\n height: 100%;\n width: 100%;\n max-width: 1650px;\n max-height: 1000px;\n}\n\n.is-mobile-class-3tbms .pdp-container--d0P1 {\n max-width: none;\n max-width: initial;\n max-height: none;\n max-height: initial;\n}\n";
116
+ var css_248z = ".scroller-class-J6Z4Z {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n.max-width-XHcc4 {\n position: relative;\n max-width: 1600px;\n margin: auto;\n height: 100%;\n width: 100%;\n}\n\n.parent-qDEav {\n height: 100%;\n width: 100%;\n position: relative;\n display: flex;\n margin-top: 12px;\n}\n\n.parent-qDEav.is-mobile-class {\n flex-direction: column;\n margin-top: 0;\n margin-top: initial;\n}\n\n.right-side-VPkpL {\n height: 100%;\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n grid-template-rows: repeat(10, 1fr);\n grid-column-gap: 0px;\n padding-right: 12px;\n width: calc(100% - 12px);\n}\n\n.is-mobile-class .right-side-VPkpL {\n overflow: auto;\n padding-left: 6px;\n padding-right: 6px;\n width: calc(100% - 12px);\n}\n\n.disabled-nOvnY {\n pointer-events: none;\n}\n\n.products-Ui7d6 {\n grid-area: 5 / 1 / 11 / 6;\n}\n\n.filter-DmVHL {\n margin: 0 10px;\n min-width: 244px;\n max-width: 244px;\n z-index: 12;\n height: -moz-fit-content;\n height: fit-content;\n display: flex;\n flex-direction: column;\n /* gap: 12px; */\n}\n\n.is-mobile-class .filter-DmVHL {\n margin: 8px;\n width: calc(100% - 16px);\n}\n\n.top-image-zf6oO {\n grid-area: 1 / 1 / 5 / 6;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n z-index: 10;\n}\n\n.is-mobile-class .top-image-zf6oO {\n grid-area: 1 / 1 / 3 / 6;\n}\n.is-mobile-class .products-Ui7d6 {\n grid-area: 3 / 1 / 6 / 6;\n}\n\n.header-hidden-class .products-Ui7d6 {\n grid-area: 1 / 1 / 6 / 6;\n}\n.pdp-overlay-O21gM {\n display: flex;\n justify-content: center;\n align-items: center;\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 500;\n}\n.navigation-visible-omUqh.pdp-overlay-O21gM {\n position: absolute;\n}\n\n.pdp-background-uw3-u {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(244, 244, 244, 0.8);\n\n z-index: 540;\n}\n\n.pdp-container--d0P1 {\n z-index: 580;\n background-color: #fff;\n height: 100%;\n width: 100%;\n max-width: 1650px;\n max-height: 1000px;\n overflow: auto;\n}\n\n.is-mobile-class-3tbms .pdp-container--d0P1 {\n max-width: none;\n max-width: initial;\n max-height: none;\n max-height: initial;\n}\n";
116
117
  styleInject(css_248z);
117
118
 
118
119
  function ownKeys$1(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; }
@@ -124,11 +125,11 @@ var Gallery = function Gallery(_ref) {
124
125
  filterObject = _ref$filterObject === void 0 ? [] : _ref$filterObject,
125
126
  imageContentBoxSettings = _ref.imageContentBoxSettings,
126
127
  imageContents = _ref.imageContents,
127
- imageContentsMobile = _ref.imageContentsMobile,
128
- pdpSettings = _ref.pdpSettings;
128
+ imageContentsMobile = _ref.imageContentsMobile;
129
+ _ref.pdpSettings;
129
130
  var _useState = useState(!!(parameters !== null && parameters !== void 0 && parameters.id)),
130
- _useState2 = _slicedToArray(_useState, 1),
131
- initializedWithProductId = _useState2[0];
131
+ _useState2 = _slicedToArray(_useState, 1);
132
+ _useState2[0];
132
133
  var curProductId = parameters === null || parameters === void 0 ? void 0 : parameters.id;
133
134
  var _useDivaCore = useDivaCore(),
134
135
  _useDivaCore$actions = _useDivaCore.actions,
@@ -143,7 +144,6 @@ var Gallery = function Gallery(_ref) {
143
144
  var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
144
145
  var filterHidden = filterObject.length === 0;
145
146
  var headerHidden = Object.keys(imageContents !== null && imageContents !== void 0 ? imageContents : {}).length === 0;
146
- var isMobileLandscape = isMobile && !isPortrait && height < 500;
147
147
  var scroller = useRef(null);
148
148
  var productState = useProductState({
149
149
  parameters: parameters,
@@ -187,29 +187,6 @@ var Gallery = function Gallery(_ref) {
187
187
  breadcrumb: true
188
188
  });
189
189
  };
190
- var setCategoryFilter = function setCategoryFilter(filters) {
191
- if (initializedWithProductId) {
192
- var newState = _objectSpread$1({}, productState.filter[0]);
193
- for (var key in filters) {
194
- var value = filters[key];
195
- if (value === undefined) delete newState[key];else newState[key] = {
196
- type: 'singleSelect',
197
- mustBeSelected: true,
198
- value: value
199
- };
200
- }
201
- productState.filter[1](newState);
202
- }
203
- openComponent({
204
- type: 'PRODUCT_GALLERY',
205
- parameters: _objectSpread$1(_objectSpread$1({
206
- id: curProductId
207
- }, parameters !== null && parameters !== void 0 && parameters.update ? {
208
- update: parameters.update
209
- } : {}), createFilterParams(getFilterObject(productState.filter[0], productState.search[0]))),
210
- breadcrumb: true
211
- });
212
- };
213
190
  var ProductHeaderJSX = /*#__PURE__*/jsx(ProductHeader, {
214
191
  filterObject: filterObject,
215
192
  productState: productState,
@@ -263,28 +240,12 @@ var Gallery = function Gallery(_ref) {
263
240
  className: pdpBackground
264
241
  }), /*#__PURE__*/jsx("div", {
265
242
  className: pdpContainer,
266
- children: /*#__PURE__*/jsx(ContentBoxComponent, {
267
- onClose: closePdp,
243
+ children: /*#__PURE__*/jsx(ProductDetailPageComponent, {
268
244
  settings: {
269
- contentBoxProps: {
270
- type: 'CloseButtonContainer',
271
- switchCloseIconToLeftInPortrait: !!(pdpSettings !== null && pdpSettings !== void 0 && pdpSettings.marginLeftHeader),
272
- hideCloseIconInPortrait: currentlyMobile && !(pdpSettings !== null && pdpSettings !== void 0 && pdpSettings.marginLeftHeader),
273
- hideCloseIcon: isMobileLandscape,
274
- content: _objectSpread$1(_objectSpread$1({
275
- cta1Params: {
276
- initMode: 'OPENCONFIGTABGROUP'
277
- }
278
- }, pdpSettings), {}, {
279
- type: 'PDP',
280
- productId: curProductId,
281
- groupVariantsByField: ['dc_color', 'dc_mainColor'],
282
- breadcrumb: true,
283
- setCategoryFilter: setCategoryFilter
284
- })
285
- }
286
- }
287
- }, parameters.update)
245
+ onClose: closePdp
246
+ },
247
+ productId: curProductId
248
+ })
288
249
  })]
289
250
  })]
290
251
  });
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAuB,eAAe,EAAW,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAgBjH,OAA0B,EAMxB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAE3C,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,CAAC,EAAE,oBAAoB,CAAC;IAC/C,UAAU,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAClD,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QACZ,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;QACF,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;KACH,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,2GAAiH,KAAK,sBAiKlI,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAuB,eAAe,EAAW,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAgBjH,OAA0B,EAMxB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAE3C,KAAK,KAAK,GAAG;IACX,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,uBAAuB,CAAC,EAAE,oBAAoB,CAAC;IAC/C,UAAU,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAClD,aAAa,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IAC/F,mBAAmB,CAAC,EAAE;QAAE,CAAC,SAAS,EAAE,MAAM,GAAG;YAAE,CAAC,KAAK,EAAE,MAAM,GAAG;gBAAE,QAAQ,EAAE,eAAe,EAAE,CAAA;aAAE,CAAA;SAAE,CAAA;KAAE,EAAE,CAAC;IACtG,WAAW,CAAC,EAAE;QACZ,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;QAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;QACF,UAAU,CAAC,EAAE;YACX,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;SACrC,CAAC;KACH,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,2GAAiH,KAAK,sBA6IlI,CAAC;AAEF,eAAe,OAAO,CAAC"}