@crystaldesign/diva-web-planner-react 24.13.0-rc.2 → 24.13.0-rc.21

package/build/esm/index-ec269ceb.js

@@ -0,0 +1,113 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import RalDropdownFilter from './index-66ad06ec.js';
+import SlideFilter from './index-39eab3f3.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'react-dropdown';
+import 'classnames';
+import './index-7d98aa77.js';
+import '@crystaldesign/content-box';
+import './index-5b70a2a2.js';
+
+var css_248z = "#wcConfigurator .Dropdown-root {\n  position: relative;\n}\n\n#wcConfigurator .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 4px 24px 4px 10px;\n  transition: all 200ms ease;\n}\n\n#wcConfigurator .Dropdown-control:hover {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n}\n\n#wcConfigurator .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 10px;\n  top: 14px;\n  width: 0;\n}\n\n#wcConfigurator .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n#wcConfigurator .Dropdown-menu {\n  background-color: white;\n  border: 1px solid #ccc;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n  box-sizing: border-box;\n  margin-top: -1px;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n#wcConfigurator .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n#wcConfigurator .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n#wcConfigurator .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n#wcConfigurator .Dropdown-option:hover {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
+styleInject(css_248z);
+
+var defaultColorFilters = [{
+  rgb: '#CC3300',
+  text: 'red'
+}, {
+  rgb: '#FF8C00',
+  text: 'orange'
+}, {
+  rgb: '#E1C699',
+  text: 'beige'
+}, {
+  rgb: '#330000',
+  text: 'brown'
+}, {
+  rgb: '#F0E68C',
+  text: 'yellow'
+}, {
+  rgb: '#006633',
+  text: 'green'
+}, {
+  rgb: '#3333FF',
+  text: 'blue'
+}, {
+  rgb: '#6633FF',
+  text: 'violet'
+}, {
+  rgb: '#CCCCCC',
+  text: 'grey'
+}, {
+  rgb: '#000000',
+  text: 'black'
+}, {
+  rgb: '#eeeeee',
+  text: 'white'
+}, {
+  rgb: '#eeeeee',
+  text: 'else'
+}];
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var RalFilter = function RalFilter(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(props.id);
+  var visibleColorItems = [];
+  var deleteCurValue = function deleteCurValue() {
+    viewHandler.paletteViewHandler.onSelectFilter(props.id, '', 'RAL');
+  };
+  useEffect(function () {
+    if (palette && !(palette !== null && palette !== void 0 && palette.deleteCurFilter)) palette.deleteCurFilter = deleteCurValue;
+  }, [palette]);
+  palette === null || palette === void 0 || palette.groups.map(function (group) {
+    return group.items.map(function (itemP) {
+      var _item$colorGroups;
+      var item = itemP;
+      if (!((_item$colorGroups = item.colorGroups1) !== null && _item$colorGroups !== void 0 && _item$colorGroups.length)) return;
+      var colorGroups = [item.colorGroups1, item.colorGroups2, item.colorGroups3];
+      var _loop = function _loop() {
+        var groups = colorGroups[i];
+        var group = defaultColorFilters.find(function (group) {
+          return group.text === groups;
+        });
+        if (group && !visibleColorItems.find(function (i) {
+          return i.text === groups;
+        })) {
+          visibleColorItems.push(group);
+        }
+      };
+      for (var i = 0; i < colorGroups.length; i++) {
+        _loop();
+      }
+    });
+  });
+  if (viewHandler.uiState.isInMobileView && viewHandler.getViewConfig().ralFilter) return /*#__PURE__*/jsx(SlideFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));else return /*#__PURE__*/jsx(RalDropdownFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));
+};
+var RALFilter = observer(RalFilter);
+
+export { RALFilter as default };

package/build/esm/index-ec69dcdb.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-6177a8f1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SettingsItemAccessoireTemplate = function SettingsItemAccessoireTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Accessoires"
+  }));
+};
+
+export { SettingsItemAccessoireTemplate as default };

package/build/esm/index-ee75f2a1.js

@@ -0,0 +1,50 @@
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfigSingleDiv = "wcConfigSingleDiv-Vcdzw";
+var wcConfigSingleText = "wcConfigSingleText-iKpxJ";
+var css_248z = "#wcConfigSingleCheckbox-FeN-P input {\n  zoom: 1.2;\n  transform: scale(2);\n  -ms-transform: scale(2);\n  -webkit-transform: scale(1.2);\n  -o-transform: scale(2);\n  -moz-transform: scale(2);\n  transform-origin: 0 0;\n  -ms-transform-origin: 0 0;\n  -webkit-transform-origin: 0 0;\n  -o-transform-origin: 0 0;\n  -moz-transform-origin: 0 0;\n  margin: 3px 10px 3px 10px;\n}\n.wcConfigSingleDiv-Vcdzw {\n  min-height: 26px;\n  margin-top: 2px;\n  width: auto;\n}\n.wcConfigSingleText-iKpxJ {\n  line-height: 24px;\n}\n";
+styleInject(css_248z);
+
+var SettingsConfigSingle = function SettingsConfigSingle(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var configSingleIsChanged = function configSingleIsChanged() {
+    viewHandler.paletteViewHandler.configSingleIsChanged();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: wcConfigSingleDiv,
+    id: "wcConfigSingleCheckbox",
+    children: [/*#__PURE__*/jsx("input", {
+      style: {
+        "float": 'left'
+      },
+      type: "checkbox",
+      checked: viewHandler.settingsState.doConfigSingle,
+      onClick: configSingleIsChanged
+    }), /*#__PURE__*/jsx("a", {
+      className: wcConfigSingleText,
+      onClick: configSingleIsChanged,
+      children: t('configurator.CONFIG_SINGLE')
+    })]
+  });
+};
+var SettingsConfigSingle$1 = observer(SettingsConfigSingle);
+
+export { SettingsConfigSingle$1 as default };

package/build/esm/index-f0e9dad5.js

@@ -0,0 +1,76 @@
+import { s as styleInject, u as useViewHandler, a as usePlannerUIHandler } from './index-6177a8f1.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfiguratorGrid = "wcConfigurator-grid-DANlC";
+var wcConfiguratorGrid2DCanvas = "wcConfigurator-grid-2D-canvas-kC0d5";
+var grid2DBg = "Grid2D_BG-qKtq3";
+var css_248z = ".wcConfigurator-grid-DANlC {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  width: 100% !important;\n  height: 100% !important;\n  position: absolute !important;\n}\n\n.wcConfigurator-grid-2D-canvas-kC0d5 {\n  z-index: 5;\n}\n\n.Grid2D_BG-qKtq3 {\n  background-repeat: repeat;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfdDAUQEiovM6IXAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMUfzQjcAAAP7SURBVHhe7ZzZbtsKEEP7/38Yf0JWZEGWJxc0MMVAGFMUwN6rynw4DeA5kSkRUTBO7V8/Pz/nNZ6ensbHlzi97+9vyfv6+rp4W9xp1nF65eB8pnnndDqdU8hAChlIIQQlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQq5QFwZf11BOwu19fn5evC3uNOs4vXJwPtO8cykE8hG4v78fH98Lr6+vq9zd3eWWNbHrWxZQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXwAFxYIa63dbxpllH9ep5t7jTrOP0ysH5TPPOpRDIR2Dvm/rb29u4nXeyqV/B6ZUj/4RMgyVKOOD0UghBCQecXgohKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vZstBN/AqE1zmnXU7Va90KpXz/v4+DjOO2pGp1eOXAjkI/Dw8DA+vhewqa+RTf0KTq8c+SdkGixRwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6KYSghANOL4UQlHDA6d1sIRDXqAOuoZyE26tNGIvhNO9kU/8P2fum/v7+fv74+KDklnWF//WWNQ2WKOGA00shBCUccHophKCEA04vhRCUcMDppRCCEg44vRRCUMIBp5dCCEo44PRuthB8A6M2zWnWUbdb9UKrXj3vFneadZxeOXIhkMPf5+XlZZVLIdOg8/z8fHlZYpp1VA/hVA//k2SagT5XTxq+4tXLMNOss8XD9ZlmnUP9DsH7Q6Z5p9xp1nF65ci3rGmwRAkHnN7WQra406yTQgZSCEEJB5xeCiEo4YDTSyEEJRxweimEoIQDTi+FEJRwwOmlkCvUhcHXNZSTcHt56WSn1Ba+V6YPClhyqFsWXp6Y5p1D3LKAEg44va2FbHGnWSeFDKQQghIOOL0UQlDCAaeXQghKOOD0UghBCQecXgohKOGA07vZQiCugQPiwAx1u63jTbOO6tXzbnGnWcfplYPzmeady/vUIR+B+vv2XsEHA0zbeedQt6xs6gNOb2shW9xp1kkhAymEoIQDTi+FEJRwwOmlEIISDji9FEJQwgGnl0IISjjg9G62EHwDozbNadZRt1v1QqtePa+yh6gZnV45SiGH2tT3/jf15cf5TeSWdQWnV458y5oGS5RwwOmlEIISDji9FEJQwgGnl0IISjjg9FIIQQkHnF4KISjhgNNLIQQlHHB6N1sIxDXqgGsoJ+H2ahNW3oWbTT38IR/xN/BP3LKmwRIlHHB6KYSghANOL4UQlHDA6aUQghIOOL0UQlDCAaeXQghKOOD0UghBCQec3s0Wgn/CXjidfwOJNZK+WhRfKgAAAABJRU5ErkJggg==');\n  /*background-image: url(\"images/Standard/grid_standard.png\");*/\n  background-size: 100px 100px;\n  z-index: 0;\n  /* zoom: 200%;*/\n}\n";
+styleInject(css_248z);
+
+var touchMoveDetected = false;
+var Planner2DGrid = function Planner2DGrid(props) {
+  var viewHandler = useViewHandler();
+  var uiHandler = usePlannerUIHandler();
+  var gridRef = useRef(null);
+  useEffect(function () {
+    if (!gridRef) return;
+    viewHandler.productState.setPlanner2DGridElement(gridRef.current);
+    if (gridRef.current) uiHandler.setGrid2DUIElement(gridRef.current);
+  }, [gridRef]);
+  var on2DPlannerBGClick = function on2DPlannerBGClick(e) {
+    viewHandler.viewPlannerHandler.onClearElementSelection();
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ref: gridRef,
+    className: wcConfiguratorGrid,
+    id: "wcConfigurator-grid-container",
+    style: {
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      visibility: viewHandler.productState.doShowGrid ? 'visible' : 'hidden'
+    },
+    onClick: on2DPlannerBGClick,
+    onTouchStart: function onTouchStart() {
+      touchMoveDetected = false;
+    },
+    onTouchMove: function onTouchMove() {
+      touchMoveDetected = true;
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      if (!touchMoveDetected) {
+        on2DPlannerBGClick(e);
+      }
+      touchMoveDetected = false;
+    },
+    children: [/*#__PURE__*/jsx("canvas", {
+      className: wcConfiguratorGrid2DCanvas,
+      id: "wcConfigurator-grid-2D-canvas"
+    }), /*#__PURE__*/jsx("div", {
+      className: grid2DBg,
+      style: {
+        zoom: uiHandler.get2DGridBackgroundState().zoom,
+        backgroundPosition: uiHandler.get2DGridBackgroundState().position.x + 'px ' + uiHandler.get2DGridBackgroundState().position.y + 'px'
+      }
+    })]
+  });
+};
+var Planner2DGrid$1 = observer(Planner2DGrid);
+
+export { Planner2DGrid$1 as default };

package/build/esm/index-f1f73d3b.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-6177a8f1.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BasketAction = function BasketAction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Action/Basket"
+  }));
+};
+
+export { BasketAction as default };

package/build/esm/index-f4638b08.js

@@ -0,0 +1,81 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfiguratorSettingsSearch = "wcConfigurator-settings-Search-E9-UU";
+var wcInScroller = "wcInScroller-85YS9";
+var wcConfiguratorSettingsSearchExpanded = "wcConfigurator-settings-SearchExpanded-Jceqy";
+var wcConfiguratorSettingsSearchMaxExpanded = "wcConfigurator-settings-SearchMaxExpanded-AGbgn";
+var filterNotVisible = "filter-not-visible-Os1H1";
+var css_248z = "/*SearchFilter*/\n\n.wcConfigurator-settings-Search-E9-UU {\n  width: 96px;\n  margin-right: 12px;\n  font-size: 14.4px;\n  line-height: 20.8px;\n  border-radius: var(--globalBorderRadius);\n  border: none;\n  float: right;\n  color: var(--secondaryColor);\n  transition: 0.35s ease;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n\n  transition: width 0.2s ease;\n  max-width: 240px;\n}\n\n.wcInScroller-85YS9.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcInScroller-85YS9.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  display: block;\n  line-height: 20.8px;\n  width: 100%;\n  max-width: 192px;\n  padding-left: 1.1em;\n}\n\n.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n  width: 160px;\n  margin-right: 48px;\n  line-height: 27.2px;\n  font-size: 17px;\n}\n\n.wcConfigurator-settings-Search-E9-UU:focus {\n  outline: medium none invert;\n  outline: initial;\n}\n\n@media all and (max-width: 1350px) and (orientation: landscape), all and (max-width: 1350px) and (min-width: 801px) and (orientation: portrait) {\n  .wcConfigurator-settings-SearchExpanded-Jceqy,\n  .wcConfigurator-settings-SearchMaxExpanded-AGbgn {\n    display: block;\n  }\n}\n\n.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 25.6px;\n  display: block;\n  margin-right: 0px;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["isInScroller", "item", "doShowFilter"];
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Seachbar = function Seachbar(_ref) {
+  var isInScroller = _ref.isInScroller,
+    item = _ref.item,
+    doShowFilter = _ref.doShowFilter,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var filterFreeTextChanged = function filterFreeTextChanged(searchValue, paletteId) {
+    if (searchValue !== '') {
+      viewHandler.settingsState.onAllGroups(paletteId, false);
+    } else {
+      if (viewHandler.paletteViewHandler.isGroupFolded(item.id)) {
+        viewHandler.settingsState.onAllGroups(paletteId, true);
+      }
+    }
+    viewHandler.paletteViewHandler.onSearchTextChanged(searchValue, paletteId);
+  };
+  var searchElement = useRef(null);
+  useEffect(function () {
+    var palette = viewHandler.settingsState.itemPalettes.get(item.id);
+    if ((palette === null || palette === void 0 ? void 0 : palette.configStepKey) === item.configStepKey) viewHandler.settingsState.updateItemPalette(palette.id, _objectSpread(_objectSpread({}, palette), {}, {
+      htmlInputElement: searchElement.current
+    }));
+  }, [searchElement]);
+  return /*#__PURE__*/jsx("form", {
+    autoComplete: "off",
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    },
+    style: {
+      height: 'fit-content',
+      marginBottom: 0
+    },
+    children: /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({}, props), {}, {
+      ref: searchElement,
+      className: classnames(wcConfiguratorSettingsSearch, doShowFilter ? undefined : filterNotVisible, viewHandler.uiState.configSettingsIsExpanded ? wcConfiguratorSettingsSearchExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? wcConfiguratorSettingsSearchMaxExpanded : undefined, isInScroller ? wcInScroller : undefined),
+      autoComplete: 'off',
+      value: item.searchText,
+      onKeyUp: function onKeyUp(e) {
+        return filterFreeTextChanged(e.target.value, item.id);
+      },
+      placeholder: t('configurator.QUICKFILTER'),
+      type: "text",
+      "data-test-id": "plannerSearchbar"
+    }))
+  });
+};
+var Searchbar = observer(Seachbar);
+
+export { Searchbar as default };

package/build/esm/index-f60ef6f6.js

@@ -0,0 +1,56 @@
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import 'react';
+import classnames from 'classnames';
+import StepInfo from './index-b2c11fbb.js';
+import SettingsHeader from './index-509577cb.js';
+import ReplaceSwitch from './index-d6317d52.js';
+import { observer } from 'mobx-react-lite';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wcConfiguratorConfigPaletteContainer = "wcConfigurator-ConfigPaletteContainer-uKDCv";
+var css_248z = ".wcConfigurator-ConfigPaletteContainer-uKDCv {\n  width: 100%;\n  margin-bottom: 24px;\n}\n";
+styleInject(css_248z);
+
+var ItemWrapper = function ItemWrapper(_ref) {
+  var item = _ref.item,
+    gridItemSize = _ref.gridItemSize,
+    gridGap = _ref.gridGap,
+    children = _ref.children;
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      '--gridSize': gridItemSize,
+      '--gridGap': gridGap
+    },
+    className: classnames(wcConfiguratorConfigPaletteContainer, {
+      wcFilterVisible: item.filterVisible
+    }),
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    id: item.configStepKey,
+    children: [/*#__PURE__*/jsx(StepInfo, {
+      stepInfo: item.info
+    }), !item.isHeader && !item.hideHeader ? /*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: true,
+      isSettingsHeader: false,
+      item: item
+    }) : /*#__PURE__*/jsx(Fragment, {}), item.type == 'ART' && viewHandler.settingsState.doShowReplaceMode && (!viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements || item.id == 2) && /*#__PURE__*/jsx(ReplaceSwitch, {}), children]
+  });
+};
+var ItemWrapper$1 = observer(ItemWrapper);
+
+export { ItemWrapper$1 as default };

package/build/esm/index-f8e1ee53.js

@@ -0,0 +1,163 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-6177a8f1.js';
+import { useRef, useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import JSONEditor from 'jsoneditor';
+import DivaUtils from '@crystaldesign/diva-utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var wrapper = "wrapper-6V6Wr";
+var button = "button-VZm94";
+var infoWrapper = "infoWrapper-2WauG";
+var modifiedArticleList = "modifiedArticleList-jWfXL";
+var css_248z = ".wrapper-6V6Wr {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  /* width: 80%; */\n  height: 750px;\n  margin-left: 51px;\n  margin-right: 10px;\n  gap: 10px;\n}\n\n.button-VZm94 {\n  min-height: 45px;\n  min-width: 45px;\n  max-width: 60px;\n  width: auto;\n  margin-bottom: 20px;\n}\n.infoWrapper-2WauG {\n  display: flex;\n  flex-direction: column;\n}\n\n.modifiedArticleList-jWfXL {\n  font-size: 10px;\n}\n";
+styleInject(css_248z);
+
+var JsonEditor = function JsonEditor(_ref) {
+  var json = _ref.json;
+    _ref.plannerArticles;
+    var curBox = _ref.curBox,
+    divaArticles = _ref.divaArticles;
+  var viewHandler = useViewHandler();
+  var container = useRef(null);
+  var jsonEditor = useRef(null);
+  var _useState = useState(json !== null && json !== void 0 ? json : {}),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    validJson = _useState4[0],
+    setValidJson = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    modifiedArticles = _useState6[0],
+    setModifiedArticles = _useState6[1];
+  var actDivaArticle = divaArticles[curBox];
+  var options = {
+    mode: 'code',
+    onChange: function onChange() {
+      try {
+        var current = jsonEditor.current;
+        var e = current.get();
+        var valid = current.validate();
+        setValidJson(valid);
+      } catch (_unused) {
+        setValidJson(false);
+        return;
+      }
+    }
+  };
+  useEffect(function () {
+    setValue(json);
+  });
+  useEffect(function () {
+    if (container.current) {
+      if (!jsonEditor.current) jsonEditor.current = new JSONEditor(container.current, options);
+      if (jsonEditor.current) jsonEditor.current.set(value);
+    }
+  }, [value]);
+  var onClickSave = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var current;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            current = jsonEditor.current;
+            if (!(!current.get() || Object.keys(current.get()).length === 0)) {
+              _context.next = 4;
+              break;
+            }
+            alert('Cannot save empty value');
+            return _context.abrupt("return");
+          case 4:
+            actDivaArticle.catalogArticle.modifiedJ3D = current.get();
+            actDivaArticle.resetShelfPlanner();
+            _context.next = 8;
+            return actDivaArticle.updateShelfPlannerState();
+          case 8:
+            viewHandler.paletteViewHandler.updateCurPaletteData(false);
+            setModifiedInfo();
+            alert('Saved');
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onClickSave() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onClickExport = function onClickExport() {
+    if (!modifiedArticles || modifiedArticles.length === 0) {
+      alert('No modified Article found');
+      return;
+    }
+    for (var i = 0; i < modifiedArticles.length; i++) {
+      DivaUtils.downloadStringAsTxtFile(modifiedArticles[i].j3d, 'text/plain', modifiedArticles[i].articleCodex + '.txt');
+    }
+  };
+  function setModifiedInfo() {
+    var _viewHandler$divaWebP;
+    var articles = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getCatalogData()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.allCatalogArticles;
+    var arr = [];
+    for (var key in articles) {
+      if (articles[key]['catalogArticle'].modifiedJ3D) arr.push({
+        articleCodex: key,
+        j3d: JSON.stringify(articles[key]['catalogArticle'].modifiedJ3D)
+      });
+    }
+    setModifiedArticles(arr);
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      ref: container,
+      id: "jsoneditor",
+      style: {
+        width: '90%',
+        height: '100%'
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: infoWrapper,
+      children: [/*#__PURE__*/jsx("button", {
+        className: button,
+        disabled: !validJson,
+        onClick: function onClick() {
+          return onClickSave();
+        },
+        children: "Save"
+      }), /*#__PURE__*/jsx("button", {
+        className: button,
+        onClick: function onClick() {
+          return onClickExport();
+        },
+        children: "Export modified J3D"
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("h5", {
+          children: "Modified Articles"
+        }), modifiedArticles.map(function (item, index) {
+          return /*#__PURE__*/jsx("p", {
+            className: modifiedArticleList,
+            children: item.articleCodex
+          }, index);
+        })]
+      })]
+    })]
+  });
+};
+var JsonEditor$1 = observer(JsonEditor);
+
+export { JsonEditor$1 as default };