@crystaldesign/diva-web-planner-react 25.5.0-beta.9 → 25.5.0-rc.1

package/build/esm/index-68195666.js

@@ -0,0 +1,245 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import './index-50519ff7.js';
+import { useState } from 'react';
+import { s as subWrapper, t as textWrapper, d as boldText, e as icon, f as checkGreen, h as inputWrapper, j as input, k as errorText, l as checkboxWrapper, m as checkbox, n as text, b as button, a as inverted, o as disabled, q as mail } from './index.module-49f5aab7.js';
+import classnames from 'classnames';
+import { getLogger, useDivaCore, useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import AcceptTerms from './index-5f1cd827.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 '@crystaldesign/widget-contact-form';
+
+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 LOG = getLogger('Planner', 'WEB-PLANNER-REACT');
+var Save = function Save(_ref) {
+  var _ref$config = _ref.config,
+    emailConfig = _ref$config.emailConfig,
+    event = _ref$config.event,
+    returnTo = _ref$config.returnTo,
+    _ref$config$showDSGVO = _ref$config.showDSGVO,
+    showDSGVO = _ref$config$showDSGVO === void 0 ? true : _ref$config$showDSGVO,
+    showSubscription = _ref$config.showSubscription,
+    basket = _ref.basket,
+    viewHandler = _ref.viewHandler;
+  var _useDivaCore = useDivaCore(),
+    navigationConfiguration = _useDivaCore.state.navigationConfiguration,
+    analyticsHandler = _useDivaCore.handler.analyticsHandler,
+    sendEmail = _useDivaCore.actions.sendEmail;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n,
+    t = _useTranslation.t;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    ableToSend = _useState2[0],
+    setAbleToSend = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showWarningEmail = _useState4[0],
+    setShowWarningEmail = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showWarningDSGVO = _useState6[0],
+    setShowWarningDSGVO = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    mail$1 = _useState8[0],
+    setMail = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    name = _useState10[0],
+    setName = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    checkDSGVO = _useState12[0],
+    setCheckDSGVO = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    checkSubscriptionToNewsletter = _useState14[0],
+    setCheckSubscriptionToNewsletter = _useState14[1];
+  var sendMail = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _viewHandler$actions;
+      var returnAfter, result;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            returnAfter = false;
+            if (!DivaUtils.validateEmail(mail$1)) {
+              setAbleToSend(false);
+              setShowWarningEmail(true);
+              returnAfter = true;
+            }
+            if (showDSGVO && !checkDSGVO) {
+              setAbleToSend(false);
+              setShowWarningDSGVO(true);
+              returnAfter = true;
+            }
+            if (!returnAfter) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            LOG.businessEvent('onPlannerSaveEMail', 'Planner', "Eine Konfiguration wurde gespeichert und als Mail gesendet", {
+              hasAcceptedMarketing: checkSubscriptionToNewsletter
+            });
+            (_viewHandler$actions = viewHandler.actions) === null || _viewHandler$actions === void 0 || _viewHandler$actions.closeModal();
+            //save basket if needed
+            _context.next = 10;
+            return viewHandler.divaWebPlanner.getCurrentBasket(event, true, returnTo, true);
+          case 10:
+            result = _context.sent;
+            if (result) {
+              _context.next = 13;
+              break;
+            }
+            return _context.abrupt("return");
+          case 13:
+            emailConfig === null || emailConfig === void 0 || emailConfig.map(function (c) {
+              return sendEmail({
+                showDialog: false,
+                content: _objectSpread(_objectSpread({}, c), {}, {
+                  to: mail$1,
+                  divaNr: basket.DivaNr,
+                  type: 'basket',
+                  language: i18n.language
+                })
+              });
+            });
+            analyticsHandler.createLead({
+              organizationId: basket.OrganizationId,
+              divaNr: basket.DivaNr,
+              email: mail$1,
+              firstName: name,
+              marketingAccepted: checkSubscriptionToNewsletter,
+              type: 'SAVED_PLANNING'
+            });
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function sendMail() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onChangeMail = function onChangeMail(input) {
+    var validMail = DivaUtils.validateEmail(input);
+    setAbleToSend(validMail);
+    if (validMail) setShowWarningEmail(false);
+    setMail(input);
+  };
+  var onChangeDSGVO = function onChangeDSGVO(val) {
+    setCheckDSGVO(val);
+    if (val) setShowWarningDSGVO(false);
+    if (!showWarningEmail) setAbleToSend(true);
+  };
+  var onChangeName = function onChangeName(input) {
+    setName(input);
+    var basket = viewHandler.divaWebPlanner.getBasket();
+    if (!basket.Client) viewHandler.divaWebPlanner.getBasket().Client = {};
+    basket.Client.firstName = input;
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: subWrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(textWrapper, boldText),
+      children: t('checkout.save.advantages')
+    }), /*#__PURE__*/jsxs("div", {
+      className: textWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(icon, checkGreen)
+      }), t('checkout.save.advantege1')]
+    }), /*#__PURE__*/jsxs("div", {
+      className: textWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(icon, checkGreen)
+      }), t('checkout.save.advantege2')]
+    }), /*#__PURE__*/jsxs("div", {
+      className: inputWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(boldText),
+        children: t('checkout.save.email')
+      }), /*#__PURE__*/jsx("input", {
+        className: input,
+        type: "email",
+        value: mail$1,
+        onChange: function onChange(e) {
+          return onChangeMail(e.target.value);
+        }
+      }), showWarningEmail && /*#__PURE__*/jsx("div", {
+        className: errorText,
+        children: t('checkout.save.mail-error')
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: inputWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(boldText),
+        children: t('checkout.save.firstname')
+      }), /*#__PURE__*/jsx("input", {
+        className: input,
+        type: "text",
+        value: name,
+        onChange: function onChange(e) {
+          return onChangeName(e.target.value);
+        }
+      })]
+    }), (!!showSubscription || !!showDSGVO) && /*#__PURE__*/jsxs("div", {
+      className: inputWrapper,
+      children: [!!showDSGVO && /*#__PURE__*/jsxs("div", {
+        className: checkboxWrapper,
+        children: [/*#__PURE__*/jsx("input", {
+          type: "checkbox",
+          className: checkbox,
+          defaultChecked: checkDSGVO,
+          onChange: function onChange(e) {
+            return onChangeDSGVO(e.target.checked);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(text),
+          children: /*#__PURE__*/jsx(AcceptTerms, {
+            agbUrl: navigationConfiguration.tosUrl,
+            privacyUrl: navigationConfiguration.privacyUrl
+          })
+        })]
+      }), !!showSubscription && /*#__PURE__*/jsxs("div", {
+        className: checkboxWrapper,
+        children: [/*#__PURE__*/jsx("input", {
+          type: "checkbox",
+          className: checkbox,
+          defaultChecked: checkSubscriptionToNewsletter,
+          onChange: function onChange(e) {
+            return setCheckSubscriptionToNewsletter(e.target.checked);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(text),
+          children: t('checkout.appointment.subscription')
+        })]
+      }), showWarningDSGVO && /*#__PURE__*/jsx("div", {
+        className: errorText,
+        children: t('checkout.dsgvo_error')
+      })]
+    }), /*#__PURE__*/jsxs("button", {
+      className: classnames(button, inverted, !ableToSend ? disabled : undefined),
+      onClick: sendMail,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(icon, mail)
+      }), t('checkout.save.save_now')]
+    })]
+  });
+};
+
+export { Save as default };

package/build/esm/index-697fb652.js

@@ -0,0 +1,53 @@
+import { s as styleInject, u as useViewHandler } from './index-50519ff7.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-6cb9c067.js

@@ -0,0 +1,166 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-50519ff7.js';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { w as wrapper, t as tabs, s as sel, a as selectionWrapper, b as selectionText, c as selection, T as Table } from './index-39c1b490.js';
+import classnames from 'classnames';
+import properties from './CatalogProperties-9a62b049.js';
+import properties$1 from './ArticleProperties-2fc0ad65.js';
+import properties$2 from './OptionProperties-06fdc54c.js';
+import properties$3 from './OptionValueProperties-1aca4c51.js';
+import Select from 'react-select';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 '@crystaldesign/widget-contact-form';
+import './index-513c5edd.js';
+import 'react-switch';
+
+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 PropertiesEditor = function PropertiesEditor(props) {
+  var _catalogData$allCatal, _allArticles$find, _allOptions$find, _allOptionsValues$fin;
+  var viewHandler = useViewHandler();
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var _useState = useState('catalog'),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentProperties = _useState2[0],
+    setCurrentProperties = _useState2[1];
+  var allArticles = Object.values((_catalogData$allCatal = catalogData === null || catalogData === void 0 ? void 0 : catalogData.allCatalogArticles) !== null && _catalogData$allCatal !== void 0 ? _catalogData$allCatal : {});
+  var allOptions = catalogData === null || catalogData === void 0 ? void 0 : catalogData.getOptions();
+  var allOptionsValues = catalogData === null || catalogData === void 0 ? void 0 : catalogData.getOptionValues();
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentArticleCodex = _useState4[0],
+    setCurrentArticleCodex = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentOptionCodex = _useState6[0],
+    setCurrentOptionCodex = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentOptionValueCodex = _useState8[0],
+    setCurrentOptionValueCodex = _useState8[1];
+  if (!catalogData) return /*#__PURE__*/jsx(Fragment, {});
+  var dataDictionary = {
+    catalog: {
+      data: catalogData.catalogProps,
+      properties: properties
+    },
+    article: {
+      data: allArticles === null || allArticles === void 0 || (_allArticles$find = allArticles.find(function (a) {
+        return a.articleCodex === currentArticleCodex;
+      })) === null || _allArticles$find === void 0 ? void 0 : _allArticles$find.catalogArticle,
+      properties: properties$1
+    },
+    option: {
+      data: allOptions === null || allOptions === void 0 || (_allOptions$find = allOptions.find(function (o) {
+        return o.codex === currentOptionCodex;
+      })) === null || _allOptions$find === void 0 ? void 0 : _allOptions$find.opt,
+      properties: properties$2
+    },
+    optionvalue: {
+      data: allOptionsValues === null || allOptionsValues === void 0 || (_allOptionsValues$fin = allOptionsValues.find(function (o) {
+        return o.codex === currentOptionValueCodex;
+      })) === null || _allOptionsValues$fin === void 0 ? void 0 : _allOptionsValues$fin.opv,
+      properties: properties$3
+    }
+  };
+  var tabsArray = ['catalog', 'article', 'option', 'optionvalue'];
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(wrapper, props.className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: tabs,
+      children: tabsArray.map(function (t) {
+        return /*#__PURE__*/jsx("div", {
+          className: classnames(currentProperties === t ? sel : undefined),
+          onClick: function onClick() {
+            return setCurrentProperties(t);
+          },
+          children: t
+        }, t);
+      })
+    }), currentProperties !== 'catalog' && /*#__PURE__*/jsxs("div", {
+      className: selectionWrapper,
+      children: [/*#__PURE__*/jsx("div", {
+        className: selectionText,
+        children: 'select ' + currentProperties + ':'
+      }), currentProperties === 'article' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentArticleCodex ? {
+          label: currentArticleCodex
+        } : undefined,
+        options: allArticles.map(function (a) {
+          return {
+            label: a.articleCodex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentArticleCodex(v.label);
+        }
+      }), currentProperties === 'option' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentOptionCodex ? {
+          label: currentOptionCodex
+        } : undefined,
+        options: allOptions === null || allOptions === void 0 ? void 0 : allOptions.map(function (a) {
+          return {
+            label: a.codex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentOptionCodex(v.label);
+        }
+      }), currentProperties === 'optionvalue' && /*#__PURE__*/jsx(Select, {
+        styles: colourStyles,
+        className: selection,
+        value: currentOptionValueCodex ? {
+          label: currentOptionValueCodex
+        } : undefined,
+        options: allOptionsValues === null || allOptionsValues === void 0 ? void 0 : allOptionsValues.map(function (a) {
+          return {
+            label: a.codex
+          };
+        }),
+        onChange: function onChange(v) {
+          return setCurrentOptionValueCodex(v.label);
+        }
+      })]
+    }), /*#__PURE__*/jsx(Table, _objectSpread(_objectSpread({}, dataDictionary[currentProperties]), {}, {
+      id: currentProperties
+    }))]
+  }));
+};
+var PropertiesEditor$1 = observer(PropertiesEditor);
+var colourStyles = {
+  control: function control(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundColor: 'white'
+    });
+  },
+  option: function option(styles, _ref) {
+    var isDisabled = _ref.isDisabled,
+      isFocused = _ref.isFocused,
+      isSelected = _ref.isSelected;
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      backgroundColor: isDisabled ? undefined : isFocused ? 'lightblue' : isSelected ? '#fff' : undefined,
+      cursor: isDisabled ? 'not-allowed' : 'default',
+      color: 'black',
+      ':active': _objectSpread({}, styles[':active'])
+    });
+  }
+};
+
+export { PropertiesEditor$1 as default };

package/build/esm/index-6cc77119.js

@@ -0,0 +1,82 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-50519ff7.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';
+import '@crystaldesign/widget-contact-form';
+
+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 };