@crystaldesign/diva-web-planner-react 24.14.0-beta.3 → 24.14.0-beta.30

package/build/esm/index-c8ef6550.js

@@ -0,0 +1,58 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { a as usePlannerUIHandler } from './index-3addff46.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import Outline3D from './index-1566930b.js';
+import ItemsContainer from './index-126caed2.js';
+import { jsxs, Fragment, 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 '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import './index-c88c9e30.js';
+import './index-53dcb514.js';
+import './index-8260f670.js';
+import './index-f8070dc7.js';
+import './index-e21fc2d3.js';
+import './index-b1c7799e.js';
+import './index-5d358574.js';
+import './index-7b8da2b7.js';
+import './index-8b20245c.js';
+import './index-eccc778a.js';
+import './index-69a951b7.js';
+import 'react-draggable';
+import './index-fff71203.js';
+import './index-be3e8366.js';
+import './index-0b2f0ee3.js';
+
+var PlannerUI = function PlannerUI(_ref) {
+  var plannerUIProps = _ref.plannerUIProps;
+  var plannerUIHandler = usePlannerUIHandler();
+  var uiItems = plannerUIHandler.getItems();
+  var uiOutline3DItemsArr = plannerUIHandler.getItemsOutline3D();
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [_toConsumableArray(uiItems.keys()).map(function (setId) {
+      return _toConsumableArray(uiItems.get(setId).keys()).map(function (elementId) {
+        return /*#__PURE__*/jsx(ItemsContainer, {
+          plannerUIProps: plannerUIProps,
+          items: uiItems.get(setId).get(elementId)
+        }, setId + '_' + elementId);
+      });
+    }), /*#__PURE__*/jsx(Outline3D, {
+      items: uiOutline3DItemsArr,
+      plannerUIProps: plannerUIProps
+    })]
+  });
+};
+var PlannerUI$1 = observer(PlannerUI);
+
+export { PlannerUI$1 as default };

package/build/esm/index-c9a7f5ff.js

@@ -0,0 +1,152 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3addff46.js';
+import SettingsHeader from './index-d4ff90bc.js';
+import { useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
+import { useState, useEffect } from 'react';
+import Dropdown from 'react-dropdown';
+import MobileDropdown from './index-03040e62.js';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-f23a59fb.js';
+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/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';
+import './index-8bd2dba4.js';
+import 'classnames';
+
+var wrapper = "wrapper-xpzd5";
+var wcDropDownSelect = "wcDropDownSelect-sB9TS";
+var dropDownArea = "dropDownArea-2LjDI";
+var image = "image-Ox-79";
+var css_248z = ".wrapper-xpzd5 {\n  display: flex;\n  position: relative;\n}\n.wcDropDownSelect-sB9TS {\n  padding: 10.2px 24px 7px 16px !important;\n}\n.wcDropDownSelect-sB9TS {\n  height: 39px;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  letter-spacing: 0pt;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -16px center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 24px;\n  transition: box-shadow 0.5s, border-color 0.25s ease-in-out;\n\n  font-weight: 300;\n}\n\n.wcDropDownSelect-sB9TS > div > div {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.dropDownArea-2LjDI {\n  max-height: 520px;\n\n  right: 0;\n  width: 100%;\n  min-width: 150px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n\n.dropDownArea-2LjDI .dropOption-lwWxd {\n  white-space: nowrap;\n}\n\n.row-fy2V4 {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-KdLW7 {\n  text-align: right;\n  padding-bottom: 9px;\n  padding-top: 9px;\n}\n\n.colum-yG36- {\n  width: 50%;\n  margin: 15px;\n}\n\n.dropDownArea-2LjDI .deltaPrice-rxxE7 {\n  right: 16px;\n}\n\n.image-Ox-79 {\n  width: 45%;\n}\n";
+styleInject(css_248z);
+
+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; }
+var DropDowmText = function DropDowmText(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.dimensions.isMobile;
+  var allItemsP = item.groups.flatMap(function (group) {
+    return group.items;
+  });
+  var allItems = allItemsP;
+  var sel = allItems.find(function (item) {
+    return item.sel;
+  });
+  var options = [];
+  var selOption = undefined;
+  var onChange = function onChange(val) {
+    setActValue(val.value);
+  };
+  var mobileOptions = [];
+  var selectedMobileOption = undefined;
+  var onChangeMobile = function onChangeMobile(e) {
+    setActValue(e.target.value);
+  };
+  var _useState = useState(sel === null || sel === void 0 ? void 0 : sel.text),
+    _useState2 = _slicedToArray(_useState, 2),
+    actValue = _useState2[0],
+    setActValue = _useState2[1];
+  useEffect(function () {
+    var val = allItems.find(function (item) {
+      return item.codex == actValue;
+    });
+    if (val) viewHandler.paletteViewHandler.clickedOnConfigPalette(val, undefined, paletteId);
+  }, [actValue]);
+  useEffect(function () {
+    if (viewHandler.uiState.configSettingsIsHidden) setActValue(undefined);
+  }, [viewHandler.uiState.configSettingsIsHidden]);
+  var _iterator = _createForOfIteratorHelper(allItems),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item = _step.value;
+      mobileOptions.push({
+        text: _item.text,
+        codex: _item.codex,
+        price: _item.deltaPrice !== undefined && _item.deltaPrice !== 0 ? DivaUtils.formatPrice(Math.abs(_item.deltaPrice)) : undefined
+      });
+      var option = {
+        label: /*#__PURE__*/jsxs("div", {
+          children: [_item.text, _item.deltaPrice !== undefined && _item.deltaPrice !== 0 && /*#__PURE__*/jsx("span", {
+            children: (_item.deltaPrice > 0 ? ' + ' : ' - ') + DivaUtils.formatPrice(Math.abs(_item.deltaPrice))
+          })]
+        }),
+        text: _item.text,
+        value: _item.codex
+      };
+      if (_item.sel) {
+        selOption = option;
+        selectedMobileOption = _item.codex;
+      }
+      options.push(option);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var paletteIsLastPalette = false;
+  if (paletteId) {
+    var nextPalette = viewHandler.settingsState.itemPalettes.get(paletteId + 1);
+    if (!(nextPalette !== null && nextPalette !== void 0 && nextPalette.visible)) {
+      paletteIsLastPalette = true;
+    }
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx(SettingsHeader, {
+        isInScroller: true,
+        isSettingsHeader: false,
+        item: item
+      }), ((_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement[0].contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+        item: item.selectedElements[0],
+        style: {
+          position: 'relative',
+          bottom: -16
+        }
+      })]
+    }), isMobile ? /*#__PURE__*/jsx(MobileDropdown, {
+      id: 'wcConfigurator-mobiledropdown-' + item.id,
+      onChange: onChangeMobile,
+      mobileOptions: mobileOptions,
+      selectedOption: selectedMobileOption
+    }) : /*#__PURE__*/jsx(Dropdown, {
+      className: 'wcConfigurator-dropdown-' + item.id,
+      controlClassName: wcDropDownSelect,
+      menuClassName: dropDownArea,
+      options: options,
+      value: selOption,
+      onChange: onChange
+    }), item.type == 'DROPDOWN_IMAGE' && (sel === null || sel === void 0 ? void 0 : sel.image) && /*#__PURE__*/jsx("img", {
+      className: image,
+      src: sel.image.replace('_gal.', '.')
+    }), paletteIsLastPalette && /*#__PURE__*/jsx("div", {
+      style: {
+        height: options.length * 32 + 10
+      }
+    })]
+  });
+};
+var index = observer(DropDowmText);
+
+export { index as default };

package/build/esm/index-ca4d04a8.js

@@ -0,0 +1,46 @@
+import { s as styleInject, u as useViewHandler } from './index-3addff46.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } 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 container = "container-vxlYB";
+var totalPrice = "totalPrice-sBu4C";
+var price = "price-jVSu8";
+var css_248z = ".container-vxlYB {\n  width: 100%;\n  border-top: 1px #6d6e71 solid;\n  color: #6d6e71;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  padding-top: 1rem;\n}\n\n.totalPrice-sBu4C {\n  float: left;\n  margin-left: 2rem;\n}\n\n.price-jVSu8 {\n  float: right;\n  margin-right: 2rem;\n}\n";
+styleInject(css_248z);
+
+var SummaryTotalPrice = function SummaryTotalPrice(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: !hidePrices && /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsx("div", {
+        className: totalPrice,
+        children: t('configurator.TotalPrice', 'TotalPrice')
+      }), /*#__PURE__*/jsx("div", {
+        className: price,
+        children: viewHandler.productState.formatedTotalPrice
+      })]
+    })
+  });
+};
+var TotalPrice = observer(SummaryTotalPrice);
+
+export { TotalPrice as default };

package/build/esm/index-cb94bb61.js

@@ -0,0 +1,127 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-3addff46.js';
+import Dropdown from 'react-dropdown';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import InfoIcon from './index-f23a59fb.js';
+import { jsx, jsxs } 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/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 wcDropDownSelect = "wcDropDownSelect-RE7qJ";
+var dropDownArea = "dropDownArea-yEewD";
+var dropOption = "dropOption-i-M5T";
+var row = "row-80qIj";
+var title = "title-2mKgp";
+var colum = "colum-cjf3n";
+var dropdownWidth = "dropdownWidth-D5Fng";
+var image = "image-7MOa9";
+var css_248z = ".wcDropDownSelect-RE7qJ {\n  padding: 8px 24px 8px 8px !important;\n  box-sizing: border-box !important;\n}\n\n.wcDropDownSelect-RE7qJ {\n  height: 2.4375rem;\n  padding: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 22px;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -1rem center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 1.5rem;\n  transition:\n    box-shadow 0.5s,\n    border-color 0.25s ease-in-out;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD {\n  max-height: 520px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  display: inline-block !important;\n}\n\n.dropDownArea-yEewD {\n\n  right: 0;\n  min-width: 152px;\n  max-width: 370px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD .dropOption-i-M5T {\n  white-space: nowrap;\n}\n.wcDropDownSelect-RE7qJ .dropOption-i-M5T {\n  width: 110px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.row-80qIj {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-2mKgp {\n  text-align: left;\n  padding-bottom: 9px;\n  padding-top: 9px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.colum-cjf3n {\n  width: 50%;\n}\n.dropdownWidth-D5Fng {\n  width: 155px;\n  margin: 10px 15px;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.image-7MOa9 {\n  width: 45%;\n}\n";
+styleInject(css_248z);
+
+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; }
+var DropDowmText = function DropDowmText(_ref) {
+  var _item$selectedElement;
+  var item = _ref.item,
+    paletteId = _ref.paletteId,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var allItemsP = item.groups.flatMap(function (group) {
+    return group.items;
+  });
+  var allItems = allItemsP;
+  var sel = allItems.find(function (item) {
+    return item.sel;
+  });
+  var _useState = useState(sel === null || sel === void 0 ? void 0 : sel.text),
+    _useState2 = _slicedToArray(_useState, 2),
+    actValue = _useState2[0],
+    setActValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forceClick = _useState4[0],
+    setForceClick = _useState4[1];
+  useEffect(function () {
+    var val = allItems.find(function (item) {
+      return item.codex == actValue;
+    });
+    if (val) viewHandler.paletteViewHandler.clickedOnConfigPalette(val, undefined, paletteId);
+  }, [actValue, forceClick]);
+  var selOption = undefined;
+  var options = [];
+  var onChange = function onChange(val) {
+    setActValue(val.value);
+    setForceClick(!forceClick);
+  };
+  var _iterator = _createForOfIteratorHelper(allItems),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item = _step.value;
+      var option = {
+        label: /*#__PURE__*/jsx("div", {
+          className: dropOption,
+          dangerouslySetInnerHTML: {
+            __html: _item.text
+          }
+        }),
+        text: _item.text,
+        value: _item.codex
+      };
+      if (_item.sel) selOption = option;
+      options.push(option);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var contentItem = (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && _item$selectedElement[0].contentItemId ? item.selectedElements[0] : item.optionContentItemId ? {
+    contentItemId: item.optionContentItemId,
+    codex: item.configStepKey
+  } : undefined;
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title),
+      children: item.name
+    }), /*#__PURE__*/jsx(Dropdown, {
+      className: dropdownWidth,
+      controlClassName: wcDropDownSelect,
+      menuClassName: dropDownArea,
+      options: options,
+      value: selOption,
+      placeholderClassName: dropOption,
+      onChange: onChange
+    }), item.type == 'DROPDOWN_IMAGE' && (sel === null || sel === void 0 ? void 0 : sel.image) && /*#__PURE__*/jsx("img", {
+      className: image,
+      src: sel.image.replace('_gal.', '.')
+    }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
+      item: contentItem,
+      style: {
+        bottom: '24px',
+        right: '20px'
+      }
+    })]
+  });
+};
+var index = observer(DropDowmText);
+
+export { index as default };

package/build/esm/index-cbf955c5.js

@@ -0,0 +1,65 @@
+import { s as styleInject, u as useViewHandler } from './index-3addff46.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { g as getIconOfTabGroup } from './IconHandler-03ad8419.js';
+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 wcTabGroupItem = "wcTabGroupItem-RxTRT";
+var landscape = "landscape-XFSPQ";
+var wcActiveStep = "wcActiveStep-W687q";
+var wcVisitedStep = "wcVisitedStep-IGlR4";
+var wcTabGroupItemMobile = "wcTabGroupItemMobile-tMZbr";
+var secondaryColorDiv = "secondaryColorDiv-fx0Cm";
+var wcStepIcon = "wcStepIcon-JtMDZ";
+var css_248z = ".wcTabGroupItem-RxTRT {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: background-color 0.3s ease-out;\n  line-height: 56px;\n  padding: 0 13px;\n}\n\n.landscape-XFSPQ.wcTabGroupItem-RxTRT {\n  line-height: 38px;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q,\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q.wcTabGroupItem-RxTRT:hover {\n  background-color: var(--primaryColor);\n}\n\n.wcTabGroupItem-RxTRT.wcVisitedStep-IGlR4 {\n  background-color: #b1b1b1;\n}\n\n.wcVisitedStep-IGlR4.wcTabGroupItem-RxTRT:hover {\n  background-color: #bbbbbb;\n}\n.wcTabGroupItem-RxTRT.wcTabGroupItem-RxTRT:hover {\n  background-color: #c8c8c8;\n}\n\n.wcTabGroupItem-RxTRT.wcActiveStep-W687q {\n  color: white;\n}\n\n.wcTabGroupItemMobile-tMZbr {\n  height: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n  float: left;\n  border: none;\n  transition: width 0.4s ease;\n  line-height: 56px;\n  padding: 0 6px 0 13px;\n  color: var(--secondaryColor);\n  font-size: 10px;\n  font-weight: 600;\n  position: relative;\n}\n\n.secondaryColorDiv-fx0Cm {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n  background-color: var(--secondaryColor);\n}\n\n.wcTabGroupItemMobile-tMZbr.wcActiveStep-W687q {\n  background-color: var(--thirdColor);\n}\n\n.wcStepIcon-JtMDZ {\n  display: block;\n  background-color: var(--secondaryColor);\n  background-position: center center;\n  width: 30px;\n  height: 50px;\n  margin: auto;\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center center;\n  float: right;\n}\n.wcActiveStep-W687q .wcStepIcon-JtMDZ {\n  margin-left: 5px;\n}\n";
+styleInject(css_248z);
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tabGroupItemRef = useRef(null);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var onTabGroupClick = function onTabGroupClick(tabGroup) {
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tabGroup.posNr);
+  };
+  var active = tabGroup.title == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.title) && tabGroup.posNr == (curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.posNr);
+  var icon = getIconOfTabGroup(tabGroup.key, viewHandler.getViewConfig().tabGroupsIcons);
+  return /*#__PURE__*/jsxs("div", {
+    ref: tabGroupItemRef,
+    onClick: function onClick() {
+      return onTabGroupClick(tabGroup);
+    },
+    className: classnames(!viewHandler.uiState.isInMobileView ? wcTabGroupItem : wcTabGroupItemMobile, viewHandler.uiState.isMobileLandscape ? landscape : undefined, active ? wcActiveStep : undefined, viewHandler.tabGroupAlreadyVisited(tabGroup) && !active ? wcVisitedStep : undefined),
+    children: [(active || !icon) && t('configurator.' + tabGroup.title, tabGroup.title), active && /*#__PURE__*/jsx("div", {
+      className: secondaryColorDiv
+    }), icon && /*#__PURE__*/jsx("div", {
+      className: wcStepIcon,
+      style: {
+        WebkitMaskImage: 'url(' + icon + ')',
+        maskImage: 'url(' + icon + ')'
+      }
+    })]
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };

package/build/esm/index-cf0e1225.js

@@ -0,0 +1,102 @@
+import { s as styleInject, u as useViewHandler } from './index-3addff46.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import ToolContainer from './index-a4250246.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsxs, Fragment, 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';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-6a5b26f2.js';
+import './index.module-bbfbad7d.js';
+import './index-9d4f8e10.js';
+import './index-e66e776d.js';
+import 'classnames';
+import './index-33a625fb.js';
+import 'react-collapsible';
+import './index-4a6031b0.js';
+import './index-1165761b.js';
+import './index.module-2bb9ec9d.js';
+import 'react-json-view';
+import './index-51fa0209.js';
+import './index.module-623fa0ec.js';
+import './index-fb82d6e8.js';
+import 'jsoneditor';
+import './index-af05107b.js';
+import './index-0277afb0.js';
+import './index-8849a7f8.js';
+import './index-abc4a445.js';
+import './index-fcd1a05f.js';
+import './index.module-a09e68cc.js';
+import './index-e9f64d02.js';
+import './index-6741cc5b.js';
+import './index-9753c134.js';
+import './index-8626184b.js';
+import 'react-dropdown';
+import './index.module-609bf476.js';
+import './index-8bd2dba4.js';
+import './index-e1a7e0a9.js';
+import './index-3a129b1e.js';
+import './index-906d5ba8.js';
+import './index-ab20d479.js';
+import './index-25ca0d3c.js';
+import './index-eb1a5f5c.js';
+import './index-318d6a33.js';
+import './index-dcc0df2d.js';
+import 'react-switch';
+import './CatalogProperties-109e25fe.js';
+import './ArticleProperties-bcdc15e9.js';
+import './OptionProperties-e99eb551.js';
+import './OptionValueProperties-7b692d86.js';
+import 'react-select';
+
+var container = "container-43rJg";
+var item = "item-JRY9h";
+var css_248z = ".container-43rJg {\n  display: flex;\n  height: 42px;\n  gap: 12px;\n  justify-content: space-around;\n  overflow: auto;\n  align-items: center;\n  background-color: #f3f3f3;\n}\n\n.item-JRY9h {\n  cursor: pointer;\n  min-width: 80px;\n  padding-left: 12px;\n  padding-right: 12px;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var Toolbar = function Toolbar(props) {
+  var _viewHandler$divaWebP, _viewHandler$divaWebP2;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    wwsClient = _useDivaCore.state.organization.settings.wwsClient;
+  var changeVal = function changeVal(newValue) {
+    var value = newValue === viewHandler.uiState.activeCatalogSection ? '3D/2D' : newValue;
+    localStorage.setItem('lastWindow', value);
+    viewHandler.uiState.setActiveCatalogSection(value);
+  };
+  var partlistsExist = !!Object.values((_viewHandler$divaWebP = (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner.actSet()) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.CatalogData.allCatalogArticles) !== null && _viewHandler$divaWebP !== void 0 ? _viewHandler$divaWebP : {}).find(function (a) {
+    return a.partlistArticlesRules;
+  });
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [viewHandler.uiState.activeCatalogSection != '3D/2D' && /*#__PURE__*/jsx(ToolContainer, {}), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [partlistsExist && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('PartList');
+        },
+        children: "St\xFCckliste"
+      }), wwsClient == 'Pfister' && /*#__PURE__*/jsx("div", {
+        className: item,
+        onClick: function onClick() {
+          return changeVal('ekText');
+        },
+        children: "Ek Text"
+      })]
+    })]
+  });
+};
+var Toolbar$1 = observer(Toolbar);
+
+export { Toolbar$1 as default };