@crystaldesign/products-component 26.12.0-beta.4 → 26.12.0-beta.40

package/build/cjs/index.js

@@ -93,8 +93,8 @@ var NothingFound = function NothingFound(props) {
 };
 
 var _excluded = ["productState", "onClickFunction", "curProductId", "galleryConfig", "groupVariantsByField"];
-function ownKeys$3(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; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(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; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Products = function Products(_ref) {
   var _ref$productState = _ref.productState,
     loading = _ref$productState.loading,
@@ -131,13 +131,13 @@ var Products = function Products(_ref) {
       onClickFunction(product);
     }
   };
-  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames__default["default"](productsGrid, isMobile ? isMobileClass : undefined),
       children: [groups.map(function (group, i) {
         return /*#__PURE__*/jsxRuntime.jsx(contentBox.ContentBoxComponent, {
           settings: {
-            contentBoxProps: _objectSpread$3({
+            contentBoxProps: _objectSpread$4({
               type: 'ProductGallery',
               products: group.items,
               groupVariantsByField: groupVariantsByField !== null && groupVariantsByField !== void 0 ? groupVariantsByField : ['dc_color', 'dc_mainColor'],
@@ -327,6 +327,49 @@ function initFilterParams() {
   return initFilter;
 }
 
+function ownKeys$3(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; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Appends a page of the token-paged list to the loaded groups. A family that is already loaded keeps its position
+ * and only receives the variants it did not have yet: a family reappears on a later page when a further matching
+ * variant of it sorts after the page boundary.
+ */
+function mergeGroups(loaded, page) {
+  var byId = new Map(loaded.map(function (group) {
+    return [group._id, group];
+  }));
+  var _iterator = _createForOfIteratorHelper(page),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var group = _step.value;
+      var known = byId.get(group._id);
+      if (!known) {
+        byId.set(group._id, group);
+        return 1; // continue
+      }
+      var knownItemIds = new Set(known.items.map(function (item) {
+        return item._id;
+      }));
+      byId.set(group._id, _objectSpread$3(_objectSpread$3({}, known), {}, {
+        items: known.items.concat(group.items.filter(function (item) {
+          return !knownItemIds.has(item._id);
+        }))
+      }));
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      if (_loop()) continue;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return Array.from(byId.values());
+}
 function useProductState(_ref) {
   var parameters = _ref.parameters,
     sort = _ref.sort,
@@ -362,21 +405,18 @@ function useProductState(_ref) {
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
     categoryKey = _useState10[0],
     setCategoryKey = _useState10[1]; // if this key changes to category changed -> Warengruppe -> the facette filter - state should be destroyed and started empty
-  var _useState11 = react.useState(0),
+  // `next` of the last loaded page: the token of the page after it, undefined before the first page and once the list ended
+  var _useState11 = react.useState(),
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
-    page = _useState12[0],
-    setPage = _useState12[1];
+    next = _useState12[0],
+    setNext = _useState12[1];
   var _useState13 = react.useState(true),
     _useState14 = _slicedToArray__default["default"](_useState13, 2),
     loading = _useState14[0],
     setLoadProducts = _useState14[1];
-  var _useState15 = react.useState(0),
-    _useState16 = _slicedToArray__default["default"](_useState15, 2),
-    total = _useState16[0],
-    setTotal = _useState16[1];
   var INCREMENT = isMobile && isPortrait ? 6 : 50;
   var abortControlerRef = react.useRef();
-  var loadProducts = react.useCallback(function (page, currentFilter, currentSearch, onInitialized) {
+  var loadProducts = react.useCallback(function (after, currentFilter, currentSearch, onInitialized) {
     var _abortControlerRef$cu;
     if (!noFilter && (!Object.values(currentFilter).length || forcedFilter && !currentFilter[forcedFilter])) {
       return;
@@ -384,7 +424,7 @@ function useProductState(_ref) {
     setLoadProducts(true);
     if (disabled) {
       setGroups([]);
-      setTotal(0);
+      setNext(undefined);
       setFacets({});
       setLoadProducts(false);
       onInitialized === null || onInitialized === void 0 || onInitialized(true);
@@ -394,62 +434,58 @@ function useProductState(_ref) {
     //abort previous request
     (_abortControlerRef$cu = abortControlerRef.current) === null || _abortControlerRef$cu === void 0 || _abortControlerRef$cu.abort();
     abortControlerRef.current = new AbortController();
-    var resetData = page == 0;
-    var skip = resetData ? 0 : groups.length;
-    var limit = INCREMENT + (resetData ? 0 : page * INCREMENT - groups.length);
     var filterObject = getFilterObjectQuery(currentFilter, currentSearch);
     productHandler.apiLoadProductVariantsGrouped({
-      limit: limit,
-      skip: skip,
+      limit: INCREMENT,
+      after: after,
       sort: sort,
       search: filterObject,
       favorites: favorites,
       abortController: abortControlerRef.current
     }).then(function (result) {
-      var _result$facet;
-      if (resetData) setGroups(result.data);else setGroups(function (currentGroups) {
-        return currentGroups.concat(result.data);
+      setGroups(function (currentGroups) {
+        return after ? mergeGroups(currentGroups, result.data) : result.data;
       });
-      setTotal(result.total);
-      setFacets((_result$facet = result.facet) !== null && _result$facet !== void 0 ? _result$facet : {});
+      setNext(result.next);
       setLoadProducts(false);
       onInitialized === null || onInitialized === void 0 || onInitialized(result.data.length == 0);
     })["catch"](function (err) {
       if (err !== 'Request cancelled') {
+        // a failed page must not block the next scroll from retrying it; a cancelled one has a successor in flight
+        setLoadProducts(false);
         throw err;
       }
     });
-  }, [groups]);
+  }, [productHandler, sort, favorites, disabled, noFilter, forcedFilter, INCREMENT]);
   var setNewFilter = react.useCallback(function (newFilter) {
     if (JSON.stringify(filter) == JSON.stringify(newFilter)) return;
-    setPage(0);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
     });
     setFilter(newFilter);
-    loadProducts(0, newFilter, search);
+    loadProducts(undefined, newFilter, search);
   }, [filter, search, loadProducts]);
   var setNewSearch = react.useCallback(function (newSearch) {
     if (search == newSearch) return;
-    setPage(0);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
     });
     setSearch(newSearch);
-    loadProducts(0, filter, newSearch);
+    loadProducts(undefined, filter, newSearch);
   }, [filter, search, loadProducts]);
   var nextPage = react.useCallback(function () {
-    setPage(page + 1);
-    loadProducts(page + 1, filter, search);
-  }, [page, filter, search, loadProducts]);
+    // a page in flight already carries this token; requesting it again would only abort and repeat that request
+    if (!next || loading) return;
+    loadProducts(next, filter, search);
+  }, [next, loading, filter, search, loadProducts]);
   var hasNext = react.useCallback(function () {
-    return total > groups.length && total > (page - 1) * INCREMENT;
-  }, [total, groups, page]);
+    return !!next;
+  }, [next]);
   var resetPage = react.useCallback(function () {
-    setPage(0);
     setGroups([]);
+    setNext(undefined);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
@@ -475,7 +511,7 @@ function useProductState(_ref) {
     };
   }(), 50), [hasNext, nextPage]);
   react.useEffect(function () {
-    loadProducts(0, filter, search, onInitialized);
+    loadProducts(undefined, filter, search, onInitialized);
   }, []);
   react.useEffect(function () {
     if (!scroller) return;

package/build/esm/index.js

@@ -77,8 +77,8 @@ var NothingFound = function NothingFound(props) {
 };
 
 var _excluded = ["productState", "onClickFunction", "curProductId", "galleryConfig", "groupVariantsByField"];
-function ownKeys$3(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; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(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; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Products = function Products(_ref) {
   var _ref$productState = _ref.productState,
     loading = _ref$productState.loading,
@@ -115,13 +115,13 @@ var Products = function Products(_ref) {
       onClickFunction(product);
     }
   };
-  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3({}, props), {}, {
+  return /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames(productsGrid, isMobile ? isMobileClass : undefined),
       children: [groups.map(function (group, i) {
         return /*#__PURE__*/jsx(ContentBoxComponent, {
           settings: {
-            contentBoxProps: _objectSpread$3({
+            contentBoxProps: _objectSpread$4({
               type: 'ProductGallery',
               products: group.items,
               groupVariantsByField: groupVariantsByField !== null && groupVariantsByField !== void 0 ? groupVariantsByField : ['dc_color', 'dc_mainColor'],
@@ -311,6 +311,49 @@ function initFilterParams() {
   return initFilter;
 }
 
+function ownKeys$3(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; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Appends a page of the token-paged list to the loaded groups. A family that is already loaded keeps its position
+ * and only receives the variants it did not have yet: a family reappears on a later page when a further matching
+ * variant of it sorts after the page boundary.
+ */
+function mergeGroups(loaded, page) {
+  var byId = new Map(loaded.map(function (group) {
+    return [group._id, group];
+  }));
+  var _iterator = _createForOfIteratorHelper(page),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var group = _step.value;
+      var known = byId.get(group._id);
+      if (!known) {
+        byId.set(group._id, group);
+        return 1; // continue
+      }
+      var knownItemIds = new Set(known.items.map(function (item) {
+        return item._id;
+      }));
+      byId.set(group._id, _objectSpread$3(_objectSpread$3({}, known), {}, {
+        items: known.items.concat(group.items.filter(function (item) {
+          return !knownItemIds.has(item._id);
+        }))
+      }));
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      if (_loop()) continue;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return Array.from(byId.values());
+}
 function useProductState(_ref) {
   var parameters = _ref.parameters,
     sort = _ref.sort,
@@ -346,21 +389,18 @@ function useProductState(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     categoryKey = _useState10[0],
     setCategoryKey = _useState10[1]; // if this key changes to category changed -> Warengruppe -> the facette filter - state should be destroyed and started empty
-  var _useState11 = useState(0),
+  // `next` of the last loaded page: the token of the page after it, undefined before the first page and once the list ended
+  var _useState11 = useState(),
     _useState12 = _slicedToArray(_useState11, 2),
-    page = _useState12[0],
-    setPage = _useState12[1];
+    next = _useState12[0],
+    setNext = _useState12[1];
   var _useState13 = useState(true),
     _useState14 = _slicedToArray(_useState13, 2),
     loading = _useState14[0],
     setLoadProducts = _useState14[1];
-  var _useState15 = useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    total = _useState16[0],
-    setTotal = _useState16[1];
   var INCREMENT = isMobile && isPortrait ? 6 : 50;
   var abortControlerRef = useRef();
-  var loadProducts = useCallback(function (page, currentFilter, currentSearch, onInitialized) {
+  var loadProducts = useCallback(function (after, currentFilter, currentSearch, onInitialized) {
     var _abortControlerRef$cu;
     if (!noFilter && (!Object.values(currentFilter).length || forcedFilter && !currentFilter[forcedFilter])) {
       return;
@@ -368,7 +408,7 @@ function useProductState(_ref) {
     setLoadProducts(true);
     if (disabled) {
       setGroups([]);
-      setTotal(0);
+      setNext(undefined);
       setFacets({});
       setLoadProducts(false);
       onInitialized === null || onInitialized === void 0 || onInitialized(true);
@@ -378,62 +418,58 @@ function useProductState(_ref) {
     //abort previous request
     (_abortControlerRef$cu = abortControlerRef.current) === null || _abortControlerRef$cu === void 0 || _abortControlerRef$cu.abort();
     abortControlerRef.current = new AbortController();
-    var resetData = page == 0;
-    var skip = resetData ? 0 : groups.length;
-    var limit = INCREMENT + (resetData ? 0 : page * INCREMENT - groups.length);
     var filterObject = getFilterObjectQuery(currentFilter, currentSearch);
     productHandler.apiLoadProductVariantsGrouped({
-      limit: limit,
-      skip: skip,
+      limit: INCREMENT,
+      after: after,
       sort: sort,
       search: filterObject,
       favorites: favorites,
       abortController: abortControlerRef.current
     }).then(function (result) {
-      var _result$facet;
-      if (resetData) setGroups(result.data);else setGroups(function (currentGroups) {
-        return currentGroups.concat(result.data);
+      setGroups(function (currentGroups) {
+        return after ? mergeGroups(currentGroups, result.data) : result.data;
       });
-      setTotal(result.total);
-      setFacets((_result$facet = result.facet) !== null && _result$facet !== void 0 ? _result$facet : {});
+      setNext(result.next);
       setLoadProducts(false);
       onInitialized === null || onInitialized === void 0 || onInitialized(result.data.length == 0);
     })["catch"](function (err) {
       if (err !== 'Request cancelled') {
+        // a failed page must not block the next scroll from retrying it; a cancelled one has a successor in flight
+        setLoadProducts(false);
         throw err;
       }
     });
-  }, [groups]);
+  }, [productHandler, sort, favorites, disabled, noFilter, forcedFilter, INCREMENT]);
   var setNewFilter = useCallback(function (newFilter) {
     if (JSON.stringify(filter) == JSON.stringify(newFilter)) return;
-    setPage(0);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
     });
     setFilter(newFilter);
-    loadProducts(0, newFilter, search);
+    loadProducts(undefined, newFilter, search);
   }, [filter, search, loadProducts]);
   var setNewSearch = useCallback(function (newSearch) {
     if (search == newSearch) return;
-    setPage(0);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
     });
     setSearch(newSearch);
-    loadProducts(0, filter, newSearch);
+    loadProducts(undefined, filter, newSearch);
   }, [filter, search, loadProducts]);
   var nextPage = useCallback(function () {
-    setPage(page + 1);
-    loadProducts(page + 1, filter, search);
-  }, [page, filter, search, loadProducts]);
+    // a page in flight already carries this token; requesting it again would only abort and repeat that request
+    if (!next || loading) return;
+    loadProducts(next, filter, search);
+  }, [next, loading, filter, search, loadProducts]);
   var hasNext = useCallback(function () {
-    return total > groups.length && total > (page - 1) * INCREMENT;
-  }, [total, groups, page]);
+    return !!next;
+  }, [next]);
   var resetPage = useCallback(function () {
-    setPage(0);
     setGroups([]);
+    setNext(undefined);
     scroller === null || scroller === void 0 || scroller.scrollTo({
       top: 0,
       behavior: 'smooth'
@@ -459,7 +495,7 @@ function useProductState(_ref) {
     };
   }(), 50), [hasNext, nextPage]);
   useEffect(function () {
-    loadProducts(0, filter, search, onInitialized);
+    loadProducts(undefined, filter, search, onInitialized);
   }, []);
   useEffect(function () {
     if (!scroller) return;

package/build/types/products-component/src/hooks/useProductState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProductState.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAK/D,MAAM,WAAW,MAAM;IACrB,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC3C,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACxD,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EACN;QACE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,GACD,SAAS,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,GACd,EAAE,kBAAkB,GAAG,YAAY,CAiJnC"}
+{"version":3,"file":"useProductState.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAK/D,MAAM,WAAW,MAAM;IACrB,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC,CAAC;IACnD,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC3C,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACxD,WAAW,EAAE,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EACN;QACE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,GACD,SAAS,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3C;AAqBD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,UAAU,EACV,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAa,GACd,EAAE,kBAAkB,GAAG,YAAY,CAyInC"}

package/build/types/products-component/src/tests/useProductState.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useProductState.test.d.ts.map

package/build/types/products-component/src/tests/useProductState.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProductState.test.d.ts","sourceRoot":"","sources":["../../../../../src/tests/useProductState.test.tsx"],"names":[],"mappings":""}

package/build/umd/388.products-component.umd.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 388.products-component.umd.min.js.LICENSE.txt */
-"use strict";(self.webpackChunkCrystaldesignProductsComponent=self.webpackChunkCrystaldesignProductsComponent||[]).push([[388],{5388:(e,t,o)=>{o.r(t),o.d(t,{default:()=>ModalsWrapper});var n=o(7363),r=o(9420),i=o(3183),a=o(887),l=o(7726),s=o(1104),d=o(6659),c=o(4299),p=o(6809),u=o(4754),m=o(8077),g=o(8685),x=o(3086);function getDialogUtilityClass(e){return(0,x.ZP)("MuiDialog",e)}const h=(0,g.Z)("MuiDialog",["root","backdrop","scrollPaper","scrollBody","container","paper","paperScrollPaper","paperScrollBody","paperWidthFalse","paperWidthXs","paperWidthSm","paperWidthMd","paperWidthLg","paperWidthXl","paperFullWidth","paperFullScreen"]);const v=n.createContext({});var f=o(3560),y=o(5230),b=o(878),w=o(659),Z=o(3144),k=o(6751),S=o(4014),P=o(7514);const C=(0,y.ZP)(f.Z,{name:"MuiDialog",slot:"Backdrop"})({zIndex:-1}),D=(0,y.ZP)(p.Z,{name:"MuiDialog",slot:"Root"})({"@media print":{position:"absolute !important"}}),j=(0,y.ZP)("div",{name:"MuiDialog",slot:"Container",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.container,t[`scroll${(0,c.Z)(o.scroll)}`]]}})({height:"100%","@media print":{height:"auto"},outline:0,variants:[{props:{scroll:"paper"},style:{display:"flex",justifyContent:"center",alignItems:"center"}},{props:{scroll:"body"},style:{overflowY:"auto",overflowX:"hidden",textAlign:"center","&::after":{content:'""',display:"inline-block",verticalAlign:"middle",height:"100%",width:"0"}}}]}),M=(0,y.ZP)(m.Z,{name:"MuiDialog",slot:"Paper",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.paper,t[`scrollPaper${(0,c.Z)(o.scroll)}`],t[`paperWidth${(0,c.Z)(String(o.maxWidth))}`],o.fullWidth&&t.paperFullWidth,o.fullScreen&&t.paperFullScreen]}})((0,w.Z)((({theme:e})=>({margin:32,position:"relative",overflowY:"auto","@media print":{overflowY:"visible",boxShadow:"none"},variants:[{props:{scroll:"paper"},style:{display:"flex",flexDirection:"column",maxHeight:"calc(100% - 64px)"}},{props:{scroll:"body"},style:{display:"inline-block",verticalAlign:"middle",textAlign:"initial"}},{props:({ownerState:e})=>!e.maxWidth,style:{maxWidth:"calc(100% - 64px)"}},{props:{maxWidth:"xs"},style:{maxWidth:"px"===e.breakpoints.unit?Math.max(e.breakpoints.values.xs,444):`max(${e.breakpoints.values.xs}${e.breakpoints.unit}, 444px)`,[`&.${h.paperScrollBody}`]:{[e.breakpoints.down(Math.max(e.breakpoints.values.xs,444)+64)]:{maxWidth:"calc(100% - 64px)"}}}},...Object.keys(e.breakpoints.values).filter((e=>"xs"!==e)).map((t=>({props:{maxWidth:t},style:{maxWidth:`${e.breakpoints.values[t]}${e.breakpoints.unit}`,[`&.${h.paperScrollBody}`]:{[e.breakpoints.down(e.breakpoints.values[t]+64)]:{maxWidth:"calc(100% - 64px)"}}}}))),{props:({ownerState:e})=>e.fullWidth,style:{width:"calc(100% - 64px)"}},{props:({ownerState:e})=>e.fullScreen,style:{margin:0,width:"100%",maxWidth:"100%",height:"100%",maxHeight:"none",borderRadius:0,[`&.${h.paperScrollBody}`]:{margin:0,maxWidth:"100%"}}}]})))),W=n.forwardRef((function Dialog(e,t){const o=(0,Z.i)({props:e,name:"MuiDialog"}),r=(0,b.Z)(),i={enter:r.transitions.duration.enteringScreen,exit:r.transitions.duration.leavingScreen},{"aria-describedby":a,"aria-labelledby":p,"aria-modal":g=!0,BackdropComponent:x,BackdropProps:h,children:f,className:y,disableEscapeKeyDown:w=!1,fullScreen:W=!1,fullWidth:T=!1,maxWidth:F="sm",onClick:R,onClose:N,open:A,PaperComponent:I=m.Z,PaperProps:$={},role:B="dialog",scroll:E="paper",slots:U={},slotProps:z={},TransitionComponent:O=u.Z,transitionDuration:Y=i,TransitionProps:_,...H}=o,L={...o,disableEscapeKeyDown:w,fullScreen:W,fullWidth:T,maxWidth:F,scroll:E},X=(e=>{const{classes:t,scroll:o,maxWidth:n,fullWidth:r,fullScreen:i}=e,a={root:["root"],backdrop:["backdrop"],container:["container",`scroll${(0,c.Z)(o)}`],paper:["paper",`paperScroll${(0,c.Z)(o)}`,`paperWidth${(0,c.Z)(String(n))}`,r&&"paperFullWidth",i&&"paperFullScreen"]};return(0,s.Z)(a,getDialogUtilityClass,t)})(L),K=n.useRef(),J=(0,d.Z)(p),G=n.useMemo((()=>({titleId:J})),[J]),q={slots:{transition:O,...U},slotProps:{transition:_,paper:$,backdrop:h,...z}},[Q,V]=(0,k.Z)("root",{elementType:D,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:(0,l.Z)(X.root,y),ref:t}),[ee,te]=(0,k.Z)("backdrop",{elementType:C,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:X.backdrop}),[oe,ne]=(0,k.Z)("paper",{elementType:M,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:X.paper,additionalProps:{elevation:24,role:B,"aria-describedby":a,"aria-labelledby":J,"aria-modal":g,tabIndex:-1,[S.O]:""}}),[re,ie]=(0,k.Z)("container",{elementType:j,externalForwardedProps:q,ownerState:L,className:X.container}),[ae,le]=(0,k.Z)("transition",{elementType:u.Z,externalForwardedProps:q,ownerState:L,additionalProps:{appear:!0,in:A,timeout:Y,role:"presentation"}});return(0,P.jsx)(Q,{closeAfterTransition:!0,slots:{backdrop:ee},slotProps:{backdrop:{transitionDuration:Y,as:x,...te}},disableEscapeKeyDown:w,onClose:N,open:A,onClick:e=>{R&&R(e),K.current&&(K.current=null,N&&N(e,"backdropClick"))},...V,...H,children:(0,P.jsx)(ae,{...le,children:(0,P.jsx)(re,{onMouseDown:e=>{K.current=e.target===e.currentTarget},...ie,children:(0,P.jsx)(oe,{as:I,...ne,children:(0,P.jsx)(v.Provider,{value:G,children:f})})})})})}));function getDialogActionsUtilityClass(e){return(0,x.ZP)("MuiDialogActions",e)}(0,g.Z)("MuiDialogActions",["root","spacing"]);const T=(0,y.ZP)("div",{name:"MuiDialogActions",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.root,!o.disableSpacing&&t.spacing]}})({display:"flex",alignItems:"center",padding:8,justifyContent:"flex-end",flex:"0 0 auto",variants:[{props:({ownerState:e})=>!e.disableSpacing,style:{"& > :not(style) ~ :not(style)":{marginLeft:8}}}]}),F=n.forwardRef((function DialogActions(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogActions"}),{className:n,disableSpacing:r=!1,...i}=o,a={...o,disableSpacing:r},d=(e=>{const{classes:t,disableSpacing:o}=e,n={root:["root",!o&&"spacing"]};return(0,s.Z)(n,getDialogActionsUtilityClass,t)})(a);return(0,P.jsx)(T,{className:(0,l.Z)(d.root,n),ownerState:a,ref:t,...i})}));function getDialogContentUtilityClass(e){return(0,x.ZP)("MuiDialogContent",e)}(0,g.Z)("MuiDialogContent",["root","dividers"]);function getDialogTitleUtilityClass(e){return(0,x.ZP)("MuiDialogTitle",e)}const R=(0,g.Z)("MuiDialogTitle",["root"]),N=(0,y.ZP)("div",{name:"MuiDialogContent",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.root,o.dividers&&t.dividers]}})((0,w.Z)((({theme:e})=>({flex:"1 1 auto",WebkitOverflowScrolling:"touch",overflowY:"auto",padding:"20px 24px",variants:[{props:({ownerState:e})=>e.dividers,style:{padding:"16px 24px",borderTop:`1px solid ${(e.vars||e).palette.divider}`,borderBottom:`1px solid ${(e.vars||e).palette.divider}`}},{props:({ownerState:e})=>!e.dividers,style:{[`.${R.root} + &`]:{paddingTop:0}}}]})))),A=n.forwardRef((function DialogContent(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogContent"}),{className:n,dividers:r=!1,...i}=o,a={...o,dividers:r},d=(e=>{const{classes:t,dividers:o}=e,n={root:["root",o&&"dividers"]};return(0,s.Z)(n,getDialogContentUtilityClass,t)})(a);return(0,P.jsx)(N,{className:(0,l.Z)(d.root,n),ownerState:a,ref:t,...i})}));var I=o(9710),$=o(762);function getDialogContentTextUtilityClass(e){return(0,x.ZP)("MuiDialogContentText",e)}(0,g.Z)("MuiDialogContentText",["root"]);const B=(0,y.ZP)($.Z,{shouldForwardProp:e=>(0,I.Z)(e)||"classes"===e,name:"MuiDialogContentText",slot:"Root"})({}),E=n.forwardRef((function DialogContentText(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogContentText"}),{children:n,className:r,...i}=o,a=(e=>{const{classes:t}=e,o=(0,s.Z)({root:["root"]},getDialogContentTextUtilityClass,t);return{...t,...o}})(i);return(0,P.jsx)(B,{component:"p",variant:"body1",color:"textSecondary",ref:t,ownerState:i,className:(0,l.Z)(a.root,r),...o,classes:a})})),U=(0,y.ZP)($.Z,{name:"MuiDialogTitle",slot:"Root"})({padding:"16px 24px",flex:"0 0 auto"}),z=n.forwardRef((function DialogTitle(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogTitle"}),{className:r,id:i,...a}=o,d=o,c=(e=>{const{classes:t}=e;return(0,s.Z)({root:["root"]},getDialogTitleUtilityClass,t)})(d),{titleId:p=i}=n.useContext(v);return(0,P.jsx)(U,{component:"h2",className:(0,l.Z)(c.root,r),ownerState:d,ref:t,variant:"h6",id:i??p,...a})}));var O=o(3379),Y=o.n(O),_=o(7795),H=o.n(_),L=o(569),X=o.n(L),K=o(3565),J=o.n(K),G=o(9216),q=o.n(G),Q=o(4589),V=o.n(Q),ee=o(5297),te={};te.styleTagTransform=V(),te.setAttributes=J(),te.insert=X().bind(null,"head"),te.domAPI=H(),te.insertStyleElement=q();Y()(ee.Z,te);ee.Z&&ee.Z.locals&&ee.Z.locals;var oe=o(1678),ne=o(5054),re={};re.styleTagTransform=V(),re.setAttributes=J(),re.insert=X().bind(null,"head"),re.domAPI=H(),re.insertStyleElement=q();Y()(ne.ZP,re);ne.ZP&&ne.ZP.locals&&ne.ZP.locals;const ie=(0,r.Pi)((function Progress(e){var t=e.children,o=e.progress,n=Math.max(0,Math.min(1,Number.isFinite(o)?o:0));return(0,P.jsxs)("div",{className:ne.YS,children:[!!t&&t,(0,P.jsx)("div",{className:ne.l9,children:(0,P.jsx)("div",{className:ne.YJ,style:{width:100*n+"%"},children:(0,P.jsx)("div",{className:ne.zn})})})]})}));var ae=o(6489),le=o(4494),se=o(8623);const de=(0,r.Pi)((function Modal_Modal(){var e,t,o=(0,i.KH)().contentStore,r=(0,oe.$G)().t,l=function onAccept(e){var t,n=o.modal;o.closeModal(),null==n||null===(t=n.callback)||void 0===t||t.call(n,!n.content||e)},s=function onReject(){var e,t=o.modal;o.closeModal(),null==t||null===(e=t.callback)||void 0===e||e.call(t,!1)};(0,n.useEffect)((function(){return document.addEventListener("keydown",d,!1),function(){document.removeEventListener("keydown",d,!1)}}),[]);var d=(0,n.useCallback)((function(e){if(o.modal)if("Enter"!==e.key||o.modal.doNotAcceptOnEnter)"ESC"!==e.key&&"Escape"!=e.key||(s(),e.preventDefault());else{var t=document.getElementById("diva-modal-form");if(!t)return;l(new FormData(t)),e.preventDefault()}}),[]);if(!o.modal)return(0,P.jsx)(P.Fragment,{});var c=(0,se.ZN)(o.modal),p="string"==typeof c.text?r(c.text):c.text,u=(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(A,{style:c.maxWidth?{maxWidth:c.maxWidth}:void 0,children:c.iFrame?(0,P.jsx)(IFrame,{link:c.iFrame}):"string"==typeof p&&null==c.content?(0,P.jsx)(E,{component:"div",dangerouslySetInnerHTML:{__html:function tryDecodeURIComponent(e){try{return decodeURIComponent(e)}catch(t){return e}}(p)}}):(0,P.jsxs)(E,{component:"div",children:[p,c.content&&o.modal.content]})}),(c.reject||c.accept)&&(0,P.jsxs)(F,{children:[c.reject&&(0,P.jsx)(a.Z,{color:"primary",onClick:s,children:"string"==typeof c.reject?r(c.reject):r("modal.reject")}),c.accept&&(0,P.jsx)(a.Z,{color:"primary",type:"submit",id:"diva-dialog-submitbtn",children:"string"==typeof c.accept?r(c.accept):r("modal.accept")})]}),!!(c.image||void 0!==c.progress||null!==(e=c.actions)&&void 0!==e&&e.length)&&(0,P.jsxs)("div",{style:{margin:10},children:[c.image&&(0,P.jsx)("img",{src:c.image,style:{maxWidth:480}}),void 0!==c.progress&&(0,P.jsx)(ie,{progress:c.progress}),null===(t=c.actions)||void 0===t?void 0:t.map((function(e){var t;return(0,P.jsx)(a.Z,{fullWidth:!0,style:{marginBottom:10},variant:null!==(t=e.variant)&&void 0!==t?t:"contained",color:"primary",onClick:function onClick(){return function onSelect(e,t){var n,r=o.modal;0!=t&&o.closeModal(),null==r||null===(n=r.callback)||void 0===n||n.call(r,e)}(e.id,e.closeable)},children:r(e.text)})}))]})]}),m=!0===c.fullscreen||"mobile"==c.fullscreen&&o.containerDimensions.isMobile;return(0,P.jsx)("div",{className:ee.I,id:"diva-dialog",children:(0,P.jsxs)(W,{open:!0,disablePortal:!0,hideBackdrop:!0,disableEnforceFocus:!0,style:{position:"absolute",zIndex:0},maxWidth:"lg",fullScreen:m,slotProps:{paper:{style:{width:c.width,height:c.height,outline:"none"}}},children:[(0,P.jsx)(z,{style:c.rejectByIcon?{paddingRight:56}:void 0,children:"string"==typeof c.title?r(c.title):c.title}),c.rejectByIcon&&(0,P.jsx)(ae.Z,{onClick:s,style:{position:"absolute",right:8,top:8,zIndex:1000001},size:"large",children:(0,P.jsx)(le.Z,{})}),c.dontRenderForm&&u,!c.dontRenderForm&&(0,P.jsx)("form",{id:"diva-modal-form",autoComplete:"off",onSubmit:function onSubmit(e){e.preventDefault(),l(new FormData(e.target))},children:u})]})})}));function IFrame(e){var t=e.link;return(0,P.jsx)("iframe",{style:{border:0,width:"100%",height:"99%"},src:t})}function ModalsWrapper(){return(0,P.jsx)(de,{})}},5297:(e,t,o)=>{o.d(t,{I:()=>l,Z:()=>s});var n=o(8081),r=o.n(n),i=o(3645),a=o.n(i)()(r());a.push([e.id,".index-module--AtOcs {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255, 0.6);\n  z-index: 14500;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n",""]);var l="index-module--AtOcs";const s=a},5054:(e,t,o)=>{o.d(t,{YJ:()=>d,YS:()=>l,ZP:()=>p,l9:()=>s,zn:()=>c});var n=o(8081),r=o.n(n),i=o(3645),a=o.n(i)()(r());a.push([e.id,".index-module--Pww9z {\n  display: flex;\n  width: 100%;\n}\n\n.index-module--thPSh {\n  height: 10px;\n  position: relative;\n  border-radius: 5px;\n  width: 100%;\n}\n\n@keyframes index-module--_9_PO {\n  from {\n    background-position-x: 0;\n  }\n  to {\n    background-position-x: 113px;\n  }\n}\n\n.index-module--HhvXv {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  transition: width 0.4s ease-out;\n  overflow: hidden;\n  border-radius: 5px;\n}\n.index-module--f7imw {\n  border-radius: 5px;\n  height: 100%;\n  background-color: var(--diva-theme-palette-primary-main);\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 10px,\n    var(--diva-theme-palette-secondary-dark) 10px,\n    var(--diva-theme-palette-secondary-dark) 20px\n  );\n  animation: index-module--_9_PO 4s linear infinite;\n  will-change: background-position;\n}\n",""]);var l="index-module--Pww9z",s="index-module--thPSh",d="index-module--HhvXv",c="index-module--f7imw";const p=a}}]);
+"use strict";(self.webpackChunkCrystaldesignProductsComponent=self.webpackChunkCrystaldesignProductsComponent||[]).push([[388],{5388:(e,t,o)=>{o.r(t),o.d(t,{default:()=>ModalsWrapper});var n=o(7363),r=o(9420),i=o(1528),a=o(887),l=o(7726),s=o(1104),d=o(6659),c=o(4299),p=o(6809),u=o(4754),m=o(8077),g=o(8685),x=o(3086);function getDialogUtilityClass(e){return(0,x.ZP)("MuiDialog",e)}const h=(0,g.Z)("MuiDialog",["root","backdrop","scrollPaper","scrollBody","container","paper","paperScrollPaper","paperScrollBody","paperWidthFalse","paperWidthXs","paperWidthSm","paperWidthMd","paperWidthLg","paperWidthXl","paperFullWidth","paperFullScreen"]);const v=n.createContext({});var f=o(3560),y=o(5230),b=o(878),w=o(659),Z=o(3144),k=o(6751),S=o(4014),P=o(7514);const C=(0,y.ZP)(f.Z,{name:"MuiDialog",slot:"Backdrop"})({zIndex:-1}),D=(0,y.ZP)(p.Z,{name:"MuiDialog",slot:"Root"})({"@media print":{position:"absolute !important"}}),j=(0,y.ZP)("div",{name:"MuiDialog",slot:"Container",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.container,t[`scroll${(0,c.Z)(o.scroll)}`]]}})({height:"100%","@media print":{height:"auto"},outline:0,variants:[{props:{scroll:"paper"},style:{display:"flex",justifyContent:"center",alignItems:"center"}},{props:{scroll:"body"},style:{overflowY:"auto",overflowX:"hidden",textAlign:"center","&::after":{content:'""',display:"inline-block",verticalAlign:"middle",height:"100%",width:"0"}}}]}),M=(0,y.ZP)(m.Z,{name:"MuiDialog",slot:"Paper",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.paper,t[`scrollPaper${(0,c.Z)(o.scroll)}`],t[`paperWidth${(0,c.Z)(String(o.maxWidth))}`],o.fullWidth&&t.paperFullWidth,o.fullScreen&&t.paperFullScreen]}})((0,w.Z)((({theme:e})=>({margin:32,position:"relative",overflowY:"auto","@media print":{overflowY:"visible",boxShadow:"none"},variants:[{props:{scroll:"paper"},style:{display:"flex",flexDirection:"column",maxHeight:"calc(100% - 64px)"}},{props:{scroll:"body"},style:{display:"inline-block",verticalAlign:"middle",textAlign:"initial"}},{props:({ownerState:e})=>!e.maxWidth,style:{maxWidth:"calc(100% - 64px)"}},{props:{maxWidth:"xs"},style:{maxWidth:"px"===e.breakpoints.unit?Math.max(e.breakpoints.values.xs,444):`max(${e.breakpoints.values.xs}${e.breakpoints.unit}, 444px)`,[`&.${h.paperScrollBody}`]:{[e.breakpoints.down(Math.max(e.breakpoints.values.xs,444)+64)]:{maxWidth:"calc(100% - 64px)"}}}},...Object.keys(e.breakpoints.values).filter((e=>"xs"!==e)).map((t=>({props:{maxWidth:t},style:{maxWidth:`${e.breakpoints.values[t]}${e.breakpoints.unit}`,[`&.${h.paperScrollBody}`]:{[e.breakpoints.down(e.breakpoints.values[t]+64)]:{maxWidth:"calc(100% - 64px)"}}}}))),{props:({ownerState:e})=>e.fullWidth,style:{width:"calc(100% - 64px)"}},{props:({ownerState:e})=>e.fullScreen,style:{margin:0,width:"100%",maxWidth:"100%",height:"100%",maxHeight:"none",borderRadius:0,[`&.${h.paperScrollBody}`]:{margin:0,maxWidth:"100%"}}}]})))),W=n.forwardRef((function Dialog(e,t){const o=(0,Z.i)({props:e,name:"MuiDialog"}),r=(0,b.Z)(),i={enter:r.transitions.duration.enteringScreen,exit:r.transitions.duration.leavingScreen},{"aria-describedby":a,"aria-labelledby":p,"aria-modal":g=!0,BackdropComponent:x,BackdropProps:h,children:f,className:y,disableEscapeKeyDown:w=!1,fullScreen:W=!1,fullWidth:T=!1,maxWidth:F="sm",onClick:R,onClose:N,open:A,PaperComponent:I=m.Z,PaperProps:$={},role:B="dialog",scroll:E="paper",slots:U={},slotProps:z={},TransitionComponent:O=u.Z,transitionDuration:Y=i,TransitionProps:_,...H}=o,L={...o,disableEscapeKeyDown:w,fullScreen:W,fullWidth:T,maxWidth:F,scroll:E},X=(e=>{const{classes:t,scroll:o,maxWidth:n,fullWidth:r,fullScreen:i}=e,a={root:["root"],backdrop:["backdrop"],container:["container",`scroll${(0,c.Z)(o)}`],paper:["paper",`paperScroll${(0,c.Z)(o)}`,`paperWidth${(0,c.Z)(String(n))}`,r&&"paperFullWidth",i&&"paperFullScreen"]};return(0,s.Z)(a,getDialogUtilityClass,t)})(L),K=n.useRef(),J=(0,d.Z)(p),G=n.useMemo((()=>({titleId:J})),[J]),q={slots:{transition:O,...U},slotProps:{transition:_,paper:$,backdrop:h,...z}},[Q,V]=(0,k.Z)("root",{elementType:D,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:(0,l.Z)(X.root,y),ref:t}),[ee,te]=(0,k.Z)("backdrop",{elementType:C,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:X.backdrop}),[oe,ne]=(0,k.Z)("paper",{elementType:M,shouldForwardComponentProp:!0,externalForwardedProps:q,ownerState:L,className:X.paper,additionalProps:{elevation:24,role:B,"aria-describedby":a,"aria-labelledby":J,"aria-modal":g,tabIndex:-1,[S.O]:""}}),[re,ie]=(0,k.Z)("container",{elementType:j,externalForwardedProps:q,ownerState:L,className:X.container}),[ae,le]=(0,k.Z)("transition",{elementType:u.Z,externalForwardedProps:q,ownerState:L,additionalProps:{appear:!0,in:A,timeout:Y,role:"presentation"}});return(0,P.jsx)(Q,{closeAfterTransition:!0,slots:{backdrop:ee},slotProps:{backdrop:{transitionDuration:Y,as:x,...te}},disableEscapeKeyDown:w,onClose:N,open:A,onClick:e=>{R&&R(e),K.current&&(K.current=null,N&&N(e,"backdropClick"))},...V,...H,children:(0,P.jsx)(ae,{...le,children:(0,P.jsx)(re,{onMouseDown:e=>{K.current=e.target===e.currentTarget},...ie,children:(0,P.jsx)(oe,{as:I,...ne,children:(0,P.jsx)(v.Provider,{value:G,children:f})})})})})}));function getDialogActionsUtilityClass(e){return(0,x.ZP)("MuiDialogActions",e)}(0,g.Z)("MuiDialogActions",["root","spacing"]);const T=(0,y.ZP)("div",{name:"MuiDialogActions",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.root,!o.disableSpacing&&t.spacing]}})({display:"flex",alignItems:"center",padding:8,justifyContent:"flex-end",flex:"0 0 auto",variants:[{props:({ownerState:e})=>!e.disableSpacing,style:{"& > :not(style) ~ :not(style)":{marginLeft:8}}}]}),F=n.forwardRef((function DialogActions(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogActions"}),{className:n,disableSpacing:r=!1,...i}=o,a={...o,disableSpacing:r},d=(e=>{const{classes:t,disableSpacing:o}=e,n={root:["root",!o&&"spacing"]};return(0,s.Z)(n,getDialogActionsUtilityClass,t)})(a);return(0,P.jsx)(T,{className:(0,l.Z)(d.root,n),ownerState:a,ref:t,...i})}));function getDialogContentUtilityClass(e){return(0,x.ZP)("MuiDialogContent",e)}(0,g.Z)("MuiDialogContent",["root","dividers"]);function getDialogTitleUtilityClass(e){return(0,x.ZP)("MuiDialogTitle",e)}const R=(0,g.Z)("MuiDialogTitle",["root"]),N=(0,y.ZP)("div",{name:"MuiDialogContent",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:o}=e;return[t.root,o.dividers&&t.dividers]}})((0,w.Z)((({theme:e})=>({flex:"1 1 auto",WebkitOverflowScrolling:"touch",overflowY:"auto",padding:"20px 24px",variants:[{props:({ownerState:e})=>e.dividers,style:{padding:"16px 24px",borderTop:`1px solid ${(e.vars||e).palette.divider}`,borderBottom:`1px solid ${(e.vars||e).palette.divider}`}},{props:({ownerState:e})=>!e.dividers,style:{[`.${R.root} + &`]:{paddingTop:0}}}]})))),A=n.forwardRef((function DialogContent(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogContent"}),{className:n,dividers:r=!1,...i}=o,a={...o,dividers:r},d=(e=>{const{classes:t,dividers:o}=e,n={root:["root",o&&"dividers"]};return(0,s.Z)(n,getDialogContentUtilityClass,t)})(a);return(0,P.jsx)(N,{className:(0,l.Z)(d.root,n),ownerState:a,ref:t,...i})}));var I=o(9710),$=o(762);function getDialogContentTextUtilityClass(e){return(0,x.ZP)("MuiDialogContentText",e)}(0,g.Z)("MuiDialogContentText",["root"]);const B=(0,y.ZP)($.Z,{shouldForwardProp:e=>(0,I.Z)(e)||"classes"===e,name:"MuiDialogContentText",slot:"Root"})({}),E=n.forwardRef((function DialogContentText(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogContentText"}),{children:n,className:r,...i}=o,a=(e=>{const{classes:t}=e,o=(0,s.Z)({root:["root"]},getDialogContentTextUtilityClass,t);return{...t,...o}})(i);return(0,P.jsx)(B,{component:"p",variant:"body1",color:"textSecondary",ref:t,ownerState:i,className:(0,l.Z)(a.root,r),...o,classes:a})})),U=(0,y.ZP)($.Z,{name:"MuiDialogTitle",slot:"Root"})({padding:"16px 24px",flex:"0 0 auto"}),z=n.forwardRef((function DialogTitle(e,t){const o=(0,Z.i)({props:e,name:"MuiDialogTitle"}),{className:r,id:i,...a}=o,d=o,c=(e=>{const{classes:t}=e;return(0,s.Z)({root:["root"]},getDialogTitleUtilityClass,t)})(d),{titleId:p=i}=n.useContext(v);return(0,P.jsx)(U,{component:"h2",className:(0,l.Z)(c.root,r),ownerState:d,ref:t,variant:"h6",id:i??p,...a})}));var O=o(3379),Y=o.n(O),_=o(7795),H=o.n(_),L=o(569),X=o.n(L),K=o(3565),J=o.n(K),G=o(9216),q=o.n(G),Q=o(4589),V=o.n(Q),ee=o(5297),te={};te.styleTagTransform=V(),te.setAttributes=J(),te.insert=X().bind(null,"head"),te.domAPI=H(),te.insertStyleElement=q();Y()(ee.Z,te);ee.Z&&ee.Z.locals&&ee.Z.locals;var oe=o(1678),ne=o(5054),re={};re.styleTagTransform=V(),re.setAttributes=J(),re.insert=X().bind(null,"head"),re.domAPI=H(),re.insertStyleElement=q();Y()(ne.ZP,re);ne.ZP&&ne.ZP.locals&&ne.ZP.locals;const ie=(0,r.Pi)((function Progress(e){var t=e.children,o=e.progress,n=Math.max(0,Math.min(1,Number.isFinite(o)?o:0));return(0,P.jsxs)("div",{className:ne.YS,children:[!!t&&t,(0,P.jsx)("div",{className:ne.l9,children:(0,P.jsx)("div",{className:ne.YJ,style:{width:100*n+"%"},children:(0,P.jsx)("div",{className:ne.zn})})})]})}));var ae=o(6489),le=o(4494),se=o(8623);const de=(0,r.Pi)((function Modal_Modal(){var e,t,o=(0,i.KH)().contentStore,r=(0,oe.$G)().t,l=function onAccept(e){var t,n=o.modal;o.closeModal(),null==n||null===(t=n.callback)||void 0===t||t.call(n,!n.content||e)},s=function onReject(){var e,t=o.modal;o.closeModal(),null==t||null===(e=t.callback)||void 0===e||e.call(t,!1)};(0,n.useEffect)((function(){return document.addEventListener("keydown",d,!1),function(){document.removeEventListener("keydown",d,!1)}}),[]);var d=(0,n.useCallback)((function(e){if(o.modal)if("Enter"!==e.key||o.modal.doNotAcceptOnEnter)"ESC"!==e.key&&"Escape"!=e.key||(s(),e.preventDefault());else{var t=document.getElementById("diva-modal-form");if(!t)return;l(new FormData(t)),e.preventDefault()}}),[]);if(!o.modal)return(0,P.jsx)(P.Fragment,{});var c=(0,se.ZN)(o.modal),p="string"==typeof c.text?r(c.text):c.text,u=(0,P.jsxs)(P.Fragment,{children:[(0,P.jsx)(A,{style:c.maxWidth?{maxWidth:c.maxWidth}:void 0,children:c.iFrame?(0,P.jsx)(IFrame,{link:c.iFrame}):"string"==typeof p&&null==c.content?(0,P.jsx)(E,{component:"div",dangerouslySetInnerHTML:{__html:function tryDecodeURIComponent(e){try{return decodeURIComponent(e)}catch(t){return e}}(p)}}):(0,P.jsxs)(E,{component:"div",children:[p,c.content&&o.modal.content]})}),(c.reject||c.accept)&&(0,P.jsxs)(F,{children:[c.reject&&(0,P.jsx)(a.Z,{color:"primary",onClick:s,children:"string"==typeof c.reject?r(c.reject):r("modal.reject")}),c.accept&&(0,P.jsx)(a.Z,{color:"primary",type:"submit",id:"diva-dialog-submitbtn",children:"string"==typeof c.accept?r(c.accept):r("modal.accept")})]}),!!(c.image||void 0!==c.progress||null!==(e=c.actions)&&void 0!==e&&e.length)&&(0,P.jsxs)("div",{style:{margin:10},children:[c.image&&(0,P.jsx)("img",{src:c.image,style:{maxWidth:480}}),void 0!==c.progress&&(0,P.jsx)(ie,{progress:c.progress}),null===(t=c.actions)||void 0===t?void 0:t.map((function(e){var t;return(0,P.jsx)(a.Z,{fullWidth:!0,style:{marginBottom:10},variant:null!==(t=e.variant)&&void 0!==t?t:"contained",color:"primary",onClick:function onClick(){return function onSelect(e,t){var n,r=o.modal;0!=t&&o.closeModal(),null==r||null===(n=r.callback)||void 0===n||n.call(r,e)}(e.id,e.closeable)},children:r(e.text)})}))]})]}),m=!0===c.fullscreen||"mobile"==c.fullscreen&&o.containerDimensions.isMobile;return(0,P.jsx)("div",{className:ee.I,id:"diva-dialog",children:(0,P.jsxs)(W,{open:!0,disablePortal:!0,hideBackdrop:!0,disableEnforceFocus:!0,style:{position:"absolute",zIndex:0},maxWidth:"lg",fullScreen:m,slotProps:{paper:{style:{width:c.width,height:c.height,outline:"none"}}},children:[(0,P.jsx)(z,{style:c.rejectByIcon?{paddingRight:56}:void 0,children:"string"==typeof c.title?r(c.title):c.title}),c.rejectByIcon&&(0,P.jsx)(ae.Z,{onClick:s,style:{position:"absolute",right:8,top:8,zIndex:1000001},size:"large",children:(0,P.jsx)(le.Z,{})}),c.dontRenderForm&&u,!c.dontRenderForm&&(0,P.jsx)("form",{id:"diva-modal-form",autoComplete:"off",onSubmit:function onSubmit(e){e.preventDefault(),l(new FormData(e.target))},children:u})]})})}));function IFrame(e){var t=e.link;return(0,P.jsx)("iframe",{style:{border:0,width:"100%",height:"99%"},src:t})}function ModalsWrapper(){return(0,P.jsx)(de,{})}},5297:(e,t,o)=>{o.d(t,{I:()=>l,Z:()=>s});var n=o(8081),r=o.n(n),i=o(3645),a=o.n(i)()(r());a.push([e.id,".index-module--AtOcs {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  background-color: rgba(255, 255, 255, 0.6);\n  z-index: 14500;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n}\n",""]);var l="index-module--AtOcs";const s=a},5054:(e,t,o)=>{o.d(t,{YJ:()=>d,YS:()=>l,ZP:()=>p,l9:()=>s,zn:()=>c});var n=o(8081),r=o.n(n),i=o(3645),a=o.n(i)()(r());a.push([e.id,".index-module--Pww9z {\n  display: flex;\n  width: 100%;\n}\n\n.index-module--thPSh {\n  height: 10px;\n  position: relative;\n  border-radius: 5px;\n  width: 100%;\n}\n\n@keyframes index-module--_9_PO {\n  from {\n    background-position-x: 0;\n  }\n  to {\n    background-position-x: 113px;\n  }\n}\n\n.index-module--HhvXv {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  transition: width 0.4s ease-out;\n  overflow: hidden;\n  border-radius: 5px;\n}\n.index-module--f7imw {\n  border-radius: 5px;\n  height: 100%;\n  background-color: var(--diva-theme-palette-primary-main);\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 10px,\n    var(--diva-theme-palette-secondary-dark) 10px,\n    var(--diva-theme-palette-secondary-dark) 20px\n  );\n  animation: index-module--_9_PO 4s linear infinite;\n  will-change: background-position;\n}\n",""]);var l="index-module--Pww9z",s="index-module--thPSh",d="index-module--HhvXv",c="index-module--f7imw";const p=a}}]);