@crystaldesign/diva-web-planner-react 26.6.0-beta.9 → 26.6.0-rc.0

package/build/esm/index-e1cbd2dc.js

@@ -0,0 +1,113 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect, useState } 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/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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wcConfiguratorSettingsSearch = "wcConfigurator-settings-Search-E9-UU";
+var mobile = "mobile-rgzgc";
+var tablet = "tablet-KFzjP";
+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\ninput.wcConfigurator-settings-Search-E9-UU {\n  width: 96px;\n  padding: 2px;\n  margin-right: 12px;\n  font-size: 14px;\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  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n  transition: width 0.2s ease;\n  max-width: 240px;\n  cursor: text;\n  background: white;\n  opacity: 1;\n}\n\n.mobile-rgzgc.wcConfigurator-settings-Search-E9-UU {\n  font-size: 12px;\n}\n\n.tablet-KFzjP.wcConfigurator-settings-Search-E9-UU {\n  font-size: 15px;\n}\n\n.wcConfigurator-settings-Search-E9-UU.wcInScroller-85YS9.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-Search-E9-UU.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-Search-E9-UU.wcConfigurator-settings-SearchExpanded-Jceqy,\n.wcConfigurator-settings-Search-E9-UU.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.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 25.6px;\n  display: block;\n  margin-right: 0px;\n}\n\n.mobile-rgzgc.wcInScroller-85YS9.wcConfigurator-settings-Search-E9-UU.filter-not-visible-Os1H1 {\n  height: 19px;\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]);
+  var _useState = useState(viewHandler.uiState.isInMobileView),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDisabled = _useState2[0],
+    setIsDisabled = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    didFocus = _useState4[0],
+    setDidFocus = _useState4[1];
+  return /*#__PURE__*/jsx("form", {
+    autoComplete: "off",
+    autoFocus: false,
+    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, viewHandler.uiState.isInMobileView ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : 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",
+      onMouseDown: function onMouseDown(e) {
+        return setIsDisabled(false);
+      },
+      onTouchStart: function onTouchStart(e) {
+        setIsDisabled(false);
+        setTimeout(function () {
+          setDidFocus(true);
+        }, 100);
+      },
+      onBlur: function onBlur() {
+        if (didFocus) {
+          setIsDisabled(viewHandler.uiState.isInMobileView);
+          setDidFocus(false);
+        }
+      },
+      disabled: isDisabled
+    }))
+  });
+};
+var Searchbar = observer(Seachbar);
+
+export { Searchbar as default };

package/build/esm/index-e33b02df.js

@@ -0,0 +1,149 @@
+import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-ce7786d2.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useRef, useCallback, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var productsGrid = "products-grid-b9XWQ";
+var productsGridDisabled = "products-grid-disabled-1BegM";
+var skeleton = "skeleton-XdjqR";
+var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n\n.products-grid-disabled-1BegM {\n  pointer-events: none;\n}\n\n.mobile .products-grid-b9XWQ {\n  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
+styleInject(css_248z);
+
+var PromotedProducts = function PromotedProducts(_ref) {
+  var _viewHandler$configSt, _settingsState$promot, _viewHandler$divaWebP;
+  var item = _ref.item;
+  var _useDivaCore = useDivaCore(),
+    openComponent = _useDivaCore.actions.openComponent,
+    productHandler = _useDivaCore.handler.productHandler,
+    _useDivaCore$state = _useDivaCore.state,
+    organization = _useDivaCore$state.organization,
+    hidePrices = _useDivaCore$state.hidePrices;
+  var viewHandler = useViewHandler();
+  var settingsState = viewHandler.settingsState;
+  var productsConfig = viewHandler.getViewConfig().productsConfig;
+  var isOpeningProductRef = useRef(false);
+  var didStartLoadingRef = useRef(false);
+  var onAddProduct = useCallback(function (productId) {
+    if (viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current) return;
+    isOpeningProductRef.current = true;
+    didStartLoadingRef.current = false;
+    settingsState.setPromotedOptimisticProductId(productId);
+    openComponent({
+      type: 'DIVA_WEBPLANNER',
+      parameters: {
+        productId: productId
+      },
+      internal: {
+        forceReload: '1',
+        keepCache: '1'
+      }
+    });
+  }, [openComponent, settingsState, viewHandler.uiState]);
+  var configProductId = (_viewHandler$configSt = viewHandler.configState.productId) !== null && _viewHandler$configSt !== void 0 ? _viewHandler$configSt : !viewHandler.configState.divaNr && viewHandler.divaWebPlanner.getStartProductId();
+  var selectedProduct = (_settingsState$promot = settingsState.promotedOptimisticProductId) !== null && _settingsState$promot !== void 0 ? _settingsState$promot : configProductId;
+  useEffect(function () {
+    if (!isOpeningProductRef.current) return;
+    if (viewHandler.uiState.isLogicLoading) {
+      didStartLoadingRef.current = true;
+      return;
+    }
+    if (didStartLoadingRef.current) {
+      isOpeningProductRef.current = false;
+      didStartLoadingRef.current = false;
+      settingsState.setPromotedOptimisticProductId(null);
+    }
+  }, [settingsState, viewHandler.uiState.isLogicLoading]);
+  useEffect(function () {
+    settingsState.setPromotedOptimisticProductId(null);
+  }, [organization._id, settingsState]);
+  var catalogCodex = (_viewHandler$divaWebP = viewHandler.divaWebPlanner.getCatalogData()) === null || _viewHandler$divaWebP === void 0 ? void 0 : _viewHandler$divaWebP.catalogCodex;
+  useEffect(function () {
+    var _viewHandler$divaWebP2;
+    if (viewHandler.uiState.isLogicLoading) return;
+    settingsState.loadPromotedProducts(productHandler, organization._id, catalogCodex, (_viewHandler$divaWebP2 = viewHandler.divaWebPlanner) === null || _viewHandler$divaWebP2 === void 0 ? void 0 : _viewHandler$divaWebP2.getCurPlannerType(), productsConfig);
+  }, [organization._id, viewHandler.uiState.isLogicLoading, catalogCodex]);
+  var groups = settingsState.promotedGroups;
+  var skeletons = productsConfig !== null && productsConfig !== void 0 && productsConfig.maxCount && productsConfig.showSkeletions ? getSkeletons(productsConfig.maxCount, groups.length) : [];
+  var areProductsDisabled = viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SettingsHeader, {
+      isInScroller: false,
+      isSettingsHeader: true,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames(productsGrid, areProductsDisabled ? productsGridDisabled : undefined),
+      "aria-disabled": areProductsDisabled,
+      children: [groups.map(function (group, i) {
+        var _ref2;
+        return /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: {
+              type: 'ProductGallery',
+              products: group.items,
+              groupVariantsByField: ['dc_color', 'dc_mainColor'],
+              onClick: onAddProduct,
+              imageWrapperStyle: {
+                aspectRatio: 'unset'
+              },
+              wrapperStyle: group.items.find(function (i) {
+                return i._id == selectedProduct;
+              }) ? {
+                border: '1px solid var(--diva-theme-palette-primary-main)',
+                borderRadius: '5px'
+              } : undefined,
+              imageStyle: {
+                aspectRatio: '14.5 / 10',
+                objectFit: 'scale-down',
+                objectPosition: 'bottom'
+              },
+              hidePrices: (_ref2 = hidePrices || viewHandler.getViewConfig().promotedHidePrices) !== null && _ref2 !== void 0 ? _ref2 : false
+            }
+          }
+        }, group._id);
+      }), skeletons.map(function (index) {
+        return /*#__PURE__*/jsx("div", {
+          className: skeleton,
+          children: /*#__PURE__*/jsx("div", {
+            children: index
+          })
+        }, index);
+      })]
+    })]
+  });
+};
+var getSkeletons = function getSkeletons(maxCount, itemsCount) {
+  var skeletonsCount = 0;
+  if (maxCount > itemsCount) {
+    skeletonsCount = maxCount - itemsCount;
+  }
+  var skeletons = [];
+  if (skeletonsCount) {
+    for (var i = skeletonsCount - 1; i >= 0; i--) {
+      skeletons.push(maxCount - i);
+    }
+  }
+  return skeletons;
+};
+var PromotedProducts$1 = observer(PromotedProducts);
+
+export { PromotedProducts$1 as default };

package/build/esm/index-e395a092.js

@@ -0,0 +1,56 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var wrapper = "wrapper-8LcgO";
+var icon = "icon-TWMmb";
+var visible = "visible-RvpD0";
+var tablet = "tablet-XGdK1";
+var css_248z = ".wrapper-8LcgO {\n  position: absolute;\n  transform: translateZ(0);\n  bottom: 12px;\n  right: 12px;\n  width: 42px;\n  height: 42px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--diva-theme-palette-primary-main);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 12000;\n  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n  opacity: 0;\n  transition:\n    opacity 1.5s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: none;\n}\n\n.wrapper-8LcgO:hover {\n  scale: 0.8;\n}\n\n.wrapper-8LcgO:focus {\n  scale: 0.9;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.icon-TWMmb {\n  width: 20px;\n  height: 20px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2213%22 viewBox%3D%220 0 8 13%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0.947266 1.14893L6.94727 6.29178L0.947266 11.9489%22 stroke%3D%22%23fff%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E %3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.visible-RvpD0 {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.vaul-dragging .wrapper-8LcgO {\n  opacity: 0;\n  transition:\n    opacity 0s ease,\n    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n    scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.tablet-XGdK1 {\n  bottom: 16px;\n  right: 16px;\n  width: 52px;\n  height: 52px;\n}\n\n.tablet-XGdK1 .icon-TWMmb {\n  width: 26px;\n  height: 26px;\n}\n";
+styleInject(css_248z);
+
+var NavForwardButton = function NavForwardButton(props) {
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  useEffect(function () {
+    setTimeout(function () {
+      setIsVisible(!viewHandler.actionButtonState.isOnLastStep && !viewHandler.actionButtonState.isOnFirstStepDisabled);
+    }, 400);
+  }, [viewHandler.actionButtonState.isOnLastStep, viewHandler.actionButtonState.isOnFirstStepDisabled]);
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wrapper, isVisible && visible, viewHandler.uiState.isTablet ? tablet : undefined),
+    onClick: function onClick() {
+      window.lastNavigationType = 'SETTINGS_SWIPER_FORWARD_BUTTON';
+      viewHandler.actionButtonState.onClickConfiguratorSettingsForth();
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: icon
+    })
+  });
+};
+var NavForwardButton$1 = observer(NavForwardButton);
+
+export { NavForwardButton$1 as default };

package/build/esm/index-e39b73b2.js

@@ -0,0 +1,41 @@
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import classnames from 'classnames';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var infoContainer = "info-container-7yeog";
+var mobile = "mobile-EMOn-";
+var css_248z = ".info-container-7yeog {\n  position: absolute;\n  top: 0;\n  right: 0;\n  background-color: rgba(248, 248, 248, 0.75);\n  z-index: 800;\n  width: 300px;\n}\n\n.mobile-EMOn-.info-container-7yeog {\n  bottom: 0;\n  left: 0;\n  top: auto;\n  top: initial;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+var ProductInfo = function ProductInfo(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(Fragment, {
+    children: viewHandler.settingsState.infoBoxContent && /*#__PURE__*/jsx("div", {
+      className: classnames(infoContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      children: viewHandler.settingsState.infoBoxContent && toJS(viewHandler.settingsState.infoBoxContent.content)
+    })
+  });
+};
+var ProductInfo$1 = observer(ProductInfo);
+
+export { ProductInfo$1 as default };

package/build/esm/index-e4a02474.js

@@ -0,0 +1,72 @@
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var styleIndicator = "styleIndicator-7N0ZJ";
+var mobile = "mobile-lyZP8";
+var styleIndicatorTextGroup = "styleIndicatorTextGroup-4bDAv";
+var styleIndicatorSubtitle = "styleIndicatorSubtitle-vVzrQ";
+var styleIndicatorLabel = "styleIndicatorLabel-8rCfE";
+var styleIndicatorImage = "styleIndicatorImage-DRo7q";
+var css_248z = ".styleIndicator-7N0ZJ {\n  border-radius: 14px !important;\n}\n\n.styleIndicator-7N0ZJ {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 8px;\n  background: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  -webkit-backdrop-filter: blur(8px);\n          backdrop-filter: blur(8px);\n  list-style: none;\n  cursor: default;\n  animation: styleIndicatorAppear-JwPL- 0.5s ease-out;\n}\n\n.mobile-lyZP8 {\n  border-radius: 10px !important;\n}\n\n.mobile-lyZP8 {\n  gap: 8px;\n  padding: 6px 12px 6px 6px;\n}\n\n.mobile-lyZP8 .styleIndicatorTextGroup-4bDAv {\n  gap: 0;\n}\n\n.mobile-lyZP8 .styleIndicatorSubtitle-vVzrQ {\n  font-size: 8px;\n}\n\n.mobile-lyZP8 .styleIndicatorLabel-8rCfE {\n  font-size: 11px;\n}\n\n.styleIndicatorImage-DRo7q {\n  width: 52px;\n  height: 40px;\n  border-radius: 6px;\n  overflow: hidden;\n  flex-shrink: 0;\n  border: 1px solid rgba(0, 0, 0, 0.06);\n}\n\n.mobile-lyZP8 .styleIndicatorImage-DRo7q {\n  width: 36px;\n  height: 28px;\n}\n\n.styleIndicatorImage-DRo7q img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.styleIndicatorTextGroup-4bDAv {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.styleIndicatorSubtitle-vVzrQ {\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  text-transform: uppercase;\n  color: #999;\n  color: var(--diva-theme-palette-text-secondary, #999);\n  white-space: nowrap;\n}\n\n.styleIndicatorLabel-8rCfE {\n  font-size: 14px;\n  font-weight: 400;\n  color: var(--globalColor);\n  white-space: nowrap;\n}\n\n@keyframes styleIndicatorAppear-JwPL- {\n  0% {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  60% {\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n";
+styleInject(css_248z);
+
+var StyleIndicator = function StyleIndicator() {
+  var _aiState$enrichedAiRo;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var viewHandler = useViewHandler();
+  var aiState = viewHandler.aiState;
+  var configuratorStructureHandler = viewHandler.configuratorStructureHandler;
+  var step = configuratorStructureHandler.getConfigStepByKey('STYLE_CONSULTANT');
+  var selectedStyle = aiState.aiStyleKeyInitializedByEvent ? (_aiState$enrichedAiRo = aiState.enrichedAiRoomRenderings()) === null || _aiState$enrichedAiRo === void 0 ? void 0 : _aiState$enrichedAiRo.find(function (r) {
+    return r.key === aiState.aiSelectedStyleKey;
+  }) : undefined;
+  if (!selectedStyle || !step) return /*#__PURE__*/jsx(Fragment, {});
+  var isMobileOnly = viewHandler.getIsInMobileView() && !viewHandler.uiState.isTablet;
+  return /*#__PURE__*/jsxs("li", {
+    className: classnames(styleIndicator, isMobileOnly ? mobile : undefined),
+    onClick: function onClick() {
+      return viewHandler.navigateToConfigStep(step.configStep.key);
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: styleIndicatorImage,
+      children: /*#__PURE__*/jsx("img", {
+        src: selectedStyle.image,
+        alt: selectedStyle.name
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: styleIndicatorTextGroup,
+      children: [/*#__PURE__*/jsx("span", {
+        className: styleIndicatorSubtitle,
+        children: t('configurator.inspiration.yourStyle', 'Dein Stil')
+      }), /*#__PURE__*/jsx("span", {
+        className: styleIndicatorLabel,
+        children: selectedStyle.name
+      })]
+    })]
+  });
+};
+var StyleIndicator$1 = observer(StyleIndicator);
+
+export { StyleIndicator$1 as default };

package/build/esm/index-e91a4e7d.js

@@ -0,0 +1,80 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var TabGroupItemHorizontal = function TabGroupItemHorizontal(_ref) {
+  var _tabGroupsArray$;
+  var tabGroup = _ref.tabGroup;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var allTabGroups = viewHandler.tabGroupState.allTabGroups;
+  var tabGroupsArray = allTabGroups ? Object.entries(allTabGroups).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      tg = _ref3[1];
+    return tg;
+  }) : [];
+  var firstTabKey = (_tabGroupsArray$ = tabGroupsArray[0]) === null || _tabGroupsArray$ === void 0 ? void 0 : _tabGroupsArray$.key;
+  var isFirstItem = firstTabKey === tabGroup.key;
+  var onTabGroupClick = useCallback(function (tg) {
+    window.lastNavigationType = 'TABGROUP_BY_POS_NR';
+    viewHandler.tabGroupState.navigateToTabgroupByPosNr(+tg.posNr);
+  }, [viewHandler.tabGroupState]);
+  var setTabRef = useCallback(function (key) {
+    return function (el) {
+      if (el) viewHandler.tabGroupState.setTabGroupItems(key, el);
+    };
+  }, [viewHandler.tabGroupState]);
+  var curTabGroup = viewHandler.tabGroupState.curTabGroup;
+  var activeKey = curTabGroup === null || curTabGroup === void 0 ? void 0 : curTabGroup.key;
+  if (!isFirstItem || tabGroupsArray.length === 0) return null;
+  return /*#__PURE__*/jsx("div", {
+    className: "wysiwyg-tab-group-tabs",
+    style: {
+      display: 'flex',
+      gap: 0,
+      borderBottom: '1px solid #d9d9d9'
+    },
+    children: tabGroupsArray.map(function (tg) {
+      return /*#__PURE__*/jsx("button", {
+        ref: setTabRef(tg.key),
+        onClick: function onClick() {
+          return onTabGroupClick(tg);
+        },
+        style: {
+          padding: '8px 16px',
+          border: 'none',
+          borderBottom: tg.key === activeKey ? '2px solid var(--primaryColor, #1677ff)' : '2px solid transparent',
+          background: 'none',
+          cursor: 'pointer',
+          fontWeight: tg.key === activeKey ? 600 : 400,
+          color: tg.key === activeKey ? 'var(--primaryColor, #1677ff)' : 'inherit'
+        },
+        children: t('configurator.' + tg.title, tg.title)
+      }, tg.key);
+    })
+  });
+};
+var index = observer(TabGroupItemHorizontal);
+
+export { index as default };

package/build/esm/index-e9fa2c35.js

@@ -0,0 +1,68 @@
+import { u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import Collapsible from 'react-collapsible';
+import ConfigStep from './index-3965eee2.js';
+import Header from './index-2d7ddf12.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var VerticalTabGroupItemClassification = function VerticalTabGroupItemClassification(_ref) {
+  var tabGroup = _ref.tabGroup;
+    _ref.height;
+    _ref.minHeight;
+  var viewHandler = useViewHandler();
+  var tabGroupItemRef = useRef(null);
+  useEffect(function () {
+    viewHandler.tabGroupState.setTabGroupItems(tabGroup.key, tabGroupItemRef.current);
+  }, [tabGroupItemRef]);
+  var configSteps = Array.from(tabGroup.options.values()).map(function (o) {
+    return Array.from(o.configSteps.values()).map(function (s) {
+      return {
+        configStep: s,
+        option: o
+      };
+    });
+  }).flat();
+  return /*#__PURE__*/jsx("div", {
+    ref: tabGroupItemRef,
+    children: /*#__PURE__*/jsx(Collapsible, {
+      open: true,
+      easing: "ease",
+      trigger: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: false
+      }),
+      triggerWhenOpen: /*#__PURE__*/jsx(Header, {
+        tabGroup: tabGroup,
+        open: true
+      }),
+      children: configSteps.map(function (step) {
+        return /*#__PURE__*/jsx(ConfigStep, {
+          step: step
+        }, step.configStep.key);
+      })
+    })
+  });
+};
+var index = observer(VerticalTabGroupItemClassification);
+
+export { index as default };