@crystaldesign/diva-web-planner-react 24.13.0-rc.1 → 24.13.0-rc.11

package/build/esm/index-9df7a917.js

@@ -0,0 +1,39 @@
+import './index-ce87f7de.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { 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 BoxCopy = function BoxCopy(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps,
+    invertLeftRight = _ref.invertLeftRight;
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), item.type == 'BoxCopyLeft' ? 'LEFT' : item.type == 'BoxCopyRight' ? 'RIGHT' : item.type == 'BoxCopyTop' ? 'TOP' : 'STD');
+    },
+    style: {
+      left: rect.left + '%',
+      top: 100 - rect.top + '%'
+    },
+    className: classnames(plannerUIProps.classes.copy.BoxPlannerCopy.copyGlobal, item.type == 'BoxCopyLeft' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : undefined, item.type == 'BoxCopyTop' ? plannerUIProps.classes.copy.BoxPlannerCopy.copyTop : undefined, item.type == 'BoxCopyRight' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : undefined)
+  });
+};
+var BoxCopy$1 = observer(BoxCopy);
+
+export { BoxCopy$1 as default };

package/build/esm/index-a2f8eddd.js

@@ -0,0 +1,52 @@
+import { u as useViewHandler } from './index-ce87f7de.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-d8319912.js';
+import IsActive from './index-ace1d448.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/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 ViewPoint = function ViewPoint(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item);
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), /*#__PURE__*/jsx("div", {
+        className: wcImage,
+        style: {
+          backgroundImage: "url(".concat(item.url, ")")
+        }
+      }), /*#__PURE__*/jsx("div", {
+        className: textContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: wcConfiguratorSettingsTitle,
+          children: t('configurator.' + item.N)
+        })
+      })]
+    })
+  });
+};
+var ViewPoint$1 = observer(ViewPoint);
+
+export { ViewPoint$1 as default };

package/build/esm/index-a3746c5f.js

@@ -0,0 +1,59 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject } from './index-ce87f7de.js';
+import 'react';
+import SettingsItemHeader from './index-77ef5246.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 'mobx-react-lite';
+import 'classnames';
+import './index-7f3a387f.js';
+import './index-a3daa5a9.js';
+import './index-6f8757a5.js';
+import 'react-dropdown';
+import './index-5864e079.js';
+import './index-f0963d23.js';
+import '@crystaldesign/content-box';
+import './index-c5090889.js';
+import './index-6cfe98da.js';
+import './index-b49ccd63.js';
+import './index-49d3d9e9.js';
+import 'react-switch';
+import './index-44bdcffe.js';
+import './index-af055081.js';
+import './index-6eb5c0af.js';
+import './index-60298be3.js';
+import './index-0b54d65c.js';
+import './index-83917cdf.js';
+import 'react-laag';
+import './index-4791c330.js';
+import './index-2fd411f3.js';
+import './index-db9a16bf.js';
+
+var settingsHeaderContainer = "settingsHeaderContainer-ywbxo";
+var settingsHeaderTitle = "settingsHeaderTitle-AeKfm";
+var css_248z = ".settingsHeaderContainer-ywbxo {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.settingsHeaderContainer-ywbxo {\n  height: 100%;\n  position: relative;\n  display: block;\n  width: 100%;\n  border-bottom: 1px solid #e6e6e6;\n  width: calc(100% - 32px);\n  margin-top: 12px;\n  height: -moz-fit-content;\n  height: fit-content;\n  padding-bottom: 16px;\n  display: flow-root;\n  position: relative;\n}\n\n.settingsHeaderTitle-AeKfm {\n  font-size: 26px;\n  line-height: 1;\n  margin: 6px 0 0 0;\n  width: auto;\n  font-weight: 300;\n  line-height: 24px;\n  -webkit-font-smoothing: antialiased;\n  color: var(--secondaryColor);\n  float: left;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n";
+styleInject(css_248z);
+
+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 SettingsItemHeaderSerious = function SettingsItemHeaderSerious(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(SettingsItemHeader, _objectSpread(_objectSpread({}, props), {}, {
+    titleClass: settingsHeaderTitle,
+    containerClass: settingsHeaderContainer
+  }));
+};
+
+export { SettingsItemHeaderSerious as default };

package/build/esm/index-a3daa5a9.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-ce87f7de.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import RalDropdownFilter from './index-6f8757a5.js';
+import SlideFilter from './index-f0963d23.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-5864e079.js';
+import '@crystaldesign/content-box';
+import './index-c5090889.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-a5450a70.js

@@ -0,0 +1,223 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-ce87f7de.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import Dropdown from 'react-dropdown';
+import RALFilter from './index-a3daa5a9.js';
+import Searchbar from './index-6cfe98da.js';
+import Arrow from './index-5864e079.js';
+import InfoIcon from './index-db9a16bf.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/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 '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-6f8757a5.js';
+import './index-f0963d23.js';
+import '@crystaldesign/content-box';
+import './index-c5090889.js';
+
+var container = "container-sQHMr";
+var dropdownRoot = "Dropdown-root-elxKM";
+var dropdownControl = "Dropdown-control-K74AD";
+var dropdownMenu = "dropdown-menu-Zxk-s";
+var row = "row-qZvF1";
+var colum = "colum-BalsH";
+var css_248z = ".container-sQHMr {\n  display: inline-block;\n  width: 100%;\n}\n.container-sQHMr .Dropdown-root-elxKM {\n  box-shadow: var(--boxShadowHover);\n}\n\n.container-sQHMr .Dropdown-control-K74AD {\n  border-radius: var(--globalBorderRadius);\n  border-color: white;\n  padding: 2px 52px 3px 10px;\n  line-height: 20.8px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  color: var(--secondaryColor);\n}\n.container-sQHMr .dropdown-menu-Zxk-s {\n  max-height: 400px !important;\n}\n\n.row-qZvF1 {\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  display: inline-block;\n\n  --infoIconSize: 24px;\n}\n.colum-BalsH {\n  width: calc(50% - 6px);\n  margin: 3px;\n  float: left;\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 GroupDropdown = function GroupDropdown(_ref) {
+  var _filteredGroups$, _filteredGroups$index, _filteredGroups$index2;
+  var filteredGroups = _ref.filteredGroups,
+    PaletteComponent = _ref.PaletteComponent,
+    id = _ref.id,
+    item = _ref.item,
+    showSearchBar = _ref.showSearchBar,
+    contentInnerClassName = _ref.contentInnerClassName;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    actGroup = _useState2[0],
+    setActGroup = _useState2[1];
+  var options = [];
+  var selectedItem;
+  var indexOfSelGroup = -1;
+  var indexOfSelGroupItem = -1;
+  var indexOfActGroup = -1;
+  var displayParentNameInDropDown = false;
+  var actDropdownValue = '---';
+  if (filteredGroups[0] && (_filteredGroups$ = filteredGroups[0]) !== null && _filteredGroups$ !== void 0 && (_filteredGroups$ = _filteredGroups$.items) !== null && _filteredGroups$ !== void 0 && _filteredGroups$[0]) {
+    var _filteredGroups$2;
+    if (((_filteredGroups$2 = filteredGroups[0]) === null || _filteredGroups$2 === void 0 || (_filteredGroups$2 = _filteredGroups$2.items) === null || _filteredGroups$2 === void 0 ? void 0 : _filteredGroups$2[0]).parentName) {
+      displayParentNameInDropDown = true;
+    }
+    var _loop = function _loop() {
+      if (!selectedItem) {
+        selectedItem = filteredGroups[i].items.find(function (item) {
+          return item.sel;
+        });
+        if (selectedItem) {
+          indexOfSelGroup = i;
+        }
+      }
+      if (displayParentNameInDropDown) {
+        var parentName = filteredGroups[i].items[0].parentName;
+        var group = options.find(function (option) {
+          return option.name == parentName;
+        });
+        if (!group) {
+          group = {
+            type: 'group',
+            name: parentName,
+            items: []
+          };
+          options.push(group);
+        }
+        group.items.push({
+          label: filteredGroups[i].name,
+          value: filteredGroups[i].name
+        });
+        if (indexOfSelGroup == i) {
+          indexOfSelGroupItem = group.items.length - 1;
+          indexOfSelGroup = options.findIndex(function (group) {
+            return group.name == parentName;
+          });
+        }
+      } else {
+        options.push(filteredGroups[i].name);
+      }
+    };
+    for (var i = 0; i < filteredGroups.length; i++) {
+      _loop();
+    }
+    indexOfActGroup = indexOfSelGroup;
+    if (actGroup) {
+      indexOfActGroup = filteredGroups.findIndex(function (val) {
+        return val.name == actGroup;
+      });
+    }
+    if (item.currentItemsFilter) {
+      actDropdownValue = '---';
+    } else if (actGroup) {
+      actDropdownValue = actGroup;
+    } else {
+      if (typeof options[indexOfSelGroup] == 'string') {
+        actDropdownValue = options[indexOfSelGroup];
+        indexOfActGroup = indexOfSelGroup;
+      } else if (indexOfSelGroup >= 0) {
+        var _options$indexOfSelGr;
+        actDropdownValue = (_options$indexOfSelGr = options[indexOfSelGroup]) === null || _options$indexOfSelGr === void 0 || (_options$indexOfSelGr = _options$indexOfSelGr.items) === null || _options$indexOfSelGr === void 0 ? void 0 : _options$indexOfSelGr[indexOfSelGroupItem];
+        var index = indexOfSelGroupItem;
+        for (var _i = 0; _i < options.length && _i < indexOfSelGroup; _i++) {
+          index = index + options[_i].items.length;
+        }
+        indexOfActGroup = index;
+      }
+    }
+  }
+  var onGroupSel = function onGroupSel(val) {
+    var _item$deleteCurFilter;
+    (_item$deleteCurFilter = item.deleteCurFilter) === null || _item$deleteCurFilter === void 0 || _item$deleteCurFilter.call(item);
+    setActGroup(val.value);
+  };
+  var allItems = [];
+  var _iterator = _createForOfIteratorHelper(filteredGroups),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _row = _step.value;
+      var _iterator2 = _createForOfIteratorHelper(_row.items),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var e = _step2.value;
+          allItems.push(e);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [showSearchBar && /*#__PURE__*/jsx(Searchbar, {
+      doShowFilter: true,
+      style: {
+        margin: '6px 2px 6px 0px',
+        width: 'calc(100% - 10px)',
+        maxWidth: 'unset',
+        border: '1px solid lightgrey'
+      },
+      isInScroller: false,
+      item: item
+    }), /*#__PURE__*/jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: row,
+        children: [/*#__PURE__*/jsx("div", {
+          className: colum,
+          children: /*#__PURE__*/jsx(RALFilter, {
+            id: id,
+            dropdownRootClass: dropdownRoot
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: colum,
+          children: [/*#__PURE__*/jsx(Dropdown, {
+            className: classnames(dropdownRoot),
+            controlClassName: dropdownControl,
+            options: options,
+            value: actDropdownValue,
+            onChange: onGroupSel,
+            menuClassName: dropdownMenu,
+            arrowClosed: /*#__PURE__*/jsx(Arrow, {
+              open: false
+            }),
+            arrowOpen: /*#__PURE__*/jsx(Arrow, {
+              open: true
+            })
+          }), ((_filteredGroups$index = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index === void 0 ? void 0 : _filteredGroups$index.contentItemId) && /*#__PURE__*/jsx(InfoIcon, {
+            item: filteredGroups[indexOfActGroup],
+            style: {
+              zIndex: 100,
+              top: '10px',
+              right: '-28px'
+            }
+          })]
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: contentInnerClassName,
+        children: item.currentItemsFilter ? allItems.map(function (item, i) {
+          return /*#__PURE__*/jsx(PaletteComponent, {
+            paletteId: id,
+            item: item
+          }, i);
+        }) : (_filteredGroups$index2 = filteredGroups[indexOfActGroup]) === null || _filteredGroups$index2 === void 0 ? void 0 : _filteredGroups$index2.items.map(function (item, i) {
+          return /*#__PURE__*/jsx(PaletteComponent, {
+            paletteId: id,
+            item: item
+          }, i);
+        })
+      })]
+    })]
+  });
+};
+var GroupDropdown$1 = observer(GroupDropdown);
+
+export { GroupDropdown$1 as default };

package/build/esm/index-a60eb5fa.js

@@ -0,0 +1,94 @@
+import { s as styleInject, u as useViewHandler } from './index-ce87f7de.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import SettingsHeader from './index-1a256308.js';
+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 wcTextBox = "wcTextBox-S90ki";
+var row = "row-U3gX-";
+var title = "title-Hgohv";
+var left = "left-0Vchg";
+var right = "right-jyg7C";
+var colum = "colum-DdC26";
+var languageWrapper = "language-wrapper-mZdxS";
+var languageTitle = "language-title-OOwzi";
+var css_248z = ".PaletteItem-pPFog {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n  transition: all 0.15s ease;\n}\n\n.PaletteItem-pPFog:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-pPFog:active {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.6);\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcTextBox-S90ki {\n  width: 100%;\n  padding: 12px 20px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.row-U3gX- {\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-Hgohv {\n  display: flex;\n}\n.left-0Vchg {\n  width: 40%;\n}\n.right-jyg7C {\n  width: 60%;\n}\n\n.colum-DdC26 {\n  margin: 8px;\n  white-space: nowrap;\n}\n\n.language-wrapper-mZdxS {\n  display: flex;\n}\n.language-title-OOwzi {\n  width: 50px;\n  line-height: 60px;\n}\n";
+styleInject(css_248z);
+
+var TextBox = function TextBox(_ref) {
+  var _viewHandler$getViewC, _items$2;
+  var item = _ref.item,
+    paletteId = _ref.paletteId;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var handleChange = function handleChange(e) {
+    if (items[0]) {
+      items[0].freeText = e.target.value;
+      viewHandler.paletteViewHandler.clickedOnConfigPalette(items[0], 'inputbox', paletteId);
+    }
+  };
+  //for classification
+  var handleLangTextChange = function handleLangTextChange(lang, value) {
+    viewHandler.paletteViewHandler.onFreeTextLangChanged(lang, value, items[0], paletteId);
+  };
+  var languages = (_viewHandler$getViewC = viewHandler.getViewConfig().languagesForInput) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : [];
+  return /*#__PURE__*/jsxs("div", {
+    className: row,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(colum, title, left),
+      children: /*#__PURE__*/jsx(SettingsHeader, {
+        item: item,
+        isInScroller: true,
+        isSettingsHeader: false
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(colum, right),
+      children: languages.length ? /*#__PURE__*/jsx(Fragment, {
+        children: languages.map(function (lang) {
+          var _items$;
+          return /*#__PURE__*/jsxs("div", {
+            className: languageWrapper,
+            children: [/*#__PURE__*/jsx("div", {
+              className: languageTitle,
+              children: lang
+            }), /*#__PURE__*/jsx("input", {
+              className: wcTextBox,
+              onChange: function onChange(e) {
+                return handleLangTextChange(lang, e.target.value);
+              },
+              type: "text",
+              value: (_items$ = items[0]) !== null && _items$ !== void 0 && (_items$ = _items$.freeTextLang) !== null && _items$ !== void 0 && _items$[lang] ? items[0].freeTextLang[lang] : ''
+            })]
+          }, lang);
+        })
+      }) : /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx("input", {
+          className: wcTextBox,
+          onChange: handleChange,
+          type: "text",
+          value: (_items$2 = items[0]) !== null && _items$2 !== void 0 && _items$2.freeText ? items[0].freeText : ''
+        })
+      })
+    })]
+  });
+};
+var TextBox$1 = observer(TextBox);
+
+export { TextBox$1 as default };

package/build/esm/index-a7acc864.js

@@ -0,0 +1,68 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-ce87f7de.js';
+import classnames from 'classnames';
+import { useState, useEffect } from 'react';
+import Dropdown from 'react-dropdown';
+import { w as wrapper, d as dropdownRoot, a as dropdownControl } from './index.module-f932477d.js';
+import Arrow from './index-5864e079.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 '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var LAYOUTS = ['IMAGE', 'TEXT', 'DROPDOWN_TEXT', 'TOGGLE_NAME', 'TOGGLE', 'DROPDOWN_IMAGE', 'GAL_SMALL_GROUP_DROPDOWN', 'NUMBER', 'GAL_BIG', 'GAL_GROUP_DROPDOWN', 'TEXTBOX', 'GAL_TEXT', 'GAL_BIG_TEXT', 'GAL_SMALL_TEXT'];
+var LayoutSelection = function LayoutSelection(_ref) {
+  var option = _ref.option;
+  var _useState = useState(option.layout),
+    _useState2 = _slicedToArray(_useState, 1),
+    origLayout = _useState2[0];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    option.layout = value !== null && value !== void 0 ? value : origLayout;
+    viewHandler.paletteViewHandler.updateCurPaletteData(true);
+  }, [value]);
+  useEffect(function () {
+    return function () {
+      option.layout = origLayout;
+      viewHandler.paletteViewHandler.updateCurPaletteData(true);
+    };
+  }, []);
+  var ArrowElement = /*#__PURE__*/jsx(Arrow, {
+    onClick: function onClick() {
+      return setValue(undefined);
+    },
+    open: false,
+    iconAsDelete: !!value
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: ["Layout:", /*#__PURE__*/jsx(Dropdown, {
+      className: classnames(dropdownRoot),
+      controlClassName: dropdownControl,
+      options: LAYOUTS,
+      value: value,
+      onChange: function onChange(val) {
+        return setValue(val.value);
+      },
+      placeholder: origLayout,
+      arrowClosed: ArrowElement,
+      arrowOpen: ArrowElement
+    })]
+  });
+};
+
+export { LayoutSelection as default };