kitchen-simulator 5.0.0-test.1 → 5.0.0-test.12

package/es/components/wizardstep/index.js

@@ -1,971 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject;
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import React, { Component } from 'react';
-import PropTypes, { element, elementType } from 'prop-types';
-import convert from 'convert-units';
-import * as S from './styles';
-import * as rectangleData from '../toolbar/main/rectangle.json';
-import * as lShaped from '../toolbar/main/lShaped.json';
-import * as oRectangle from '../toolbar/main/oRectangle.json';
-import * as longNarrow from '../toolbar/main/longNarrow.json';
-import { TEXT_COLOR_NEUTRAL_5, TEXT_COLOR_NEUTRAL_0, TEXT_COLOR_NEUTRAL_2, STATUS_NEGATIVE_COLOR, BG_COLOR_HOVER, BG_COLOR_1, TEXT_COLOR_NEUTRAL_3, SECONDARY_PURPLE_COLOR, DEFAULT_FONT_FAMILY, SHADE_LIGHT_PURPLE_COLOR, TEXT_COLOR_NEUTRAL_1, TEXT_COLOR_NEUTRAL_4, DECIMAL_PLACES_2 } from '../../constants';
-import Dialog from '@material-ui/core/Dialog';
-import styled from 'styled-components';
-import { formatNumber, toFixedFloat } from '../../utils/math';
-var StyledDialog = styled(Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiDialog-paperWidthSm {\n    border-radius: 10px;\n  }\n"])));
-var roomShapeData = [{
-  type: 'square',
-  name: 'Square',
-  url: '/assets/img/svg/wizardstep/Square.svg',
-  data: rectangleData,
-  key: 1
-}, {
-  type: 'l-shape',
-  name: 'L-Shaped',
-  url: '/assets/img/svg/wizardstep/L.svg',
-  data: lShaped,
-  key: 2
-}, {
-  type: 'irregular',
-  name: 'Irregular',
-  url: '/assets/img/svg/wizardstep/L2.svg',
-  data: longNarrow,
-  key: 3
-}, {
-  type: 'open',
-  name: 'Open',
-  url: '/assets/img/svg/wizardstep/Open.svg',
-  data: oRectangle,
-  key: 4
-}];
-var unitData = [{
-  _name: 'inch',
-  _unit: 'in'
-}, {
-  _name: 'centimeter',
-  _unit: 'cm'
-}, {
-  _name: 'millimeter',
-  _unit: 'mm'
-}, {
-  _name: 'meter',
-  _unit: 'm'
-}, {
-  _name: 'feet',
-  _unit: 'ft'
-}];
-var WizardStep = /*#__PURE__*/function (_Component) {
-  function WizardStep(props, context) {
-    var _this;
-    _classCallCheck(this, WizardStep);
-    _this = _callSuper(this, WizardStep, [props, context]);
-    var getDoorStyle = function getDoorStyle(items) {
-      if (!items || items.length === 0) return undefined;
-      var brilliantWhiteShaker = items.find(function (item) {
-        return item.name === 'Brilliant White Shaker';
-      });
-      if (brilliantWhiteShaker) {
-        return brilliantWhiteShaker;
-      }
-      return items[0];
-    };
-    _this.state = {
-      type: 1,
-      //1: wizard, 2: retrieve
-      step: 0,
-      measurementUnit: {
-        _name: 'inch',
-        _unit: 'in'
-      },
-      ceilingHeight: 96,
-      roomShape: {
-        type: '',
-        data: {}
-      },
-      colorFamily: {},
-      installation: _this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.items.filter(function (item1) {
-          return item1.items.length !== 0;
-        }).length !== 0;
-      })[0],
-      doorCategory: _this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.items.filter(function (item1) {
-          return item1.items.length !== 0;
-        }).length !== 0;
-      })[0].items.filter(function (item) {
-        return item.items.length !== 0;
-      })[0],
-      doorStyle: getDoorStyle(_this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.items.filter(function (item1) {
-          return item1.items.length !== 0;
-        }).length !== 0;
-      })[0].items.filter(function (item) {
-        return item.items.length !== 0;
-      })[0].items),
-      cancelDialogVisible: false,
-      hover: 0
-    };
-    return _this;
-  }
-  _inherits(WizardStep, _Component);
-  return _createClass(WizardStep, [{
-    key: "loadProject",
-    value: function loadProject(data) {
-      this.context.projectActions.loadProject(data, this.props.categoryData);
-    }
-  }, {
-    key: "_confirm",
-    value: function _confirm(type) {
-      this.props.close();
-      if (this.state.roomShape.type === 'custom') this.context.linesActions.selectToolDrawingLine('wall');else if (this.state.roomShape.type === '') {} else this.loadProject(this.state.roomShape.data, this.props.categoryData);
-      this.context.viewer2DActions.updateCeilHeight(toFixedFloat(this.state.ceilingHeight));
-      this.context.viewer2DActions.updateCeilHeightUnit(this.state.measurementUnit._unit);
-      this.context.viewer3DActions.update3DCeilHeight(toFixedFloat(this.state.ceilingHeight));
-      this.context.viewer3DActions.update3DCeilHeightUnit(this.state.measurementUnit._unit);
-      var doorStyle = _objectSpread(_objectSpread({}, this.state.doorStyle), {}, {
-        install: this.state.installation.name
-      });
-      !!type && this.context.itemsActions.setDoorStyle(doorStyle);
-    }
-  }, {
-    key: "_ok",
-    value: function _ok() {
-      if (this.state.step === 1 && this.state.roomShape.type === '') {
-        roomShapeData.map(function (item) {
-          document.getElementById("roomshape&".concat(item.type)).style.backgroundColor = STATUS_NEGATIVE_COLOR;
-          document.getElementById("roomlabel&".concat(item.type)).style.color = TEXT_COLOR_NEUTRAL_0;
-        });
-        document.getElementById('roomshape&custom').style.backgroundColor = STATUS_NEGATIVE_COLOR;
-        document.getElementById('roomshape&pencil').style.backgroundColor = STATUS_NEGATIVE_COLOR;
-        document.getElementById('roomlabel&custom').style.color = TEXT_COLOR_NEUTRAL_0;
-        document.getElementById('description').style.color = STATUS_NEGATIVE_COLOR;
-      } else this.setState({
-        step: this.state.step + 1
-      });
-    }
-  }, {
-    key: "onStepChange",
-    value: function onStepChange(e) {
-      if (this.state.step === 1 && this.state.roomShape.type === '') {
-        roomShapeData.map(function (item) {
-          document.getElementById("roomshape&".concat(item.type)).style.backgroundColor = STATUS_NEGATIVE_COLOR;
-          document.getElementById("roomlabel&".concat(item.type)).style.color = TEXT_COLOR_NEUTRAL_0;
-        });
-        document.getElementById('roomshape&custom').style.backgroundColor = STATUS_NEGATIVE_COLOR;
-        document.getElementById('roomshape&pencil').style.backgroundColor = STATUS_NEGATIVE_COLOR;
-        document.getElementById('roomlabel&custom').style.color = TEXT_COLOR_NEUTRAL_0;
-        document.getElementById('description').style.color = STATUS_NEGATIVE_COLOR;
-      } else {
-        this.setState({
-          step: e
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      var img = document.querySelector('img[src="/assets/img/svg/wizardstep/check-active.svg"]');
-      if (img) {
-        img.scrollIntoView({
-          behavior: 'smooth',
-          block: 'center'
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state = this.state,
-        step = _this$state.step,
-        roomShape = _this$state.roomShape,
-        installation = _this$state.installation,
-        doorCategory = _this$state.doorCategory,
-        doorStyle = _this$state.doorStyle,
-        measurementUnit = _this$state.measurementUnit,
-        ceilingHeight = _this$state.ceilingHeight,
-        cancelDialogVisible = _this$state.cancelDialogVisible,
-        colorFamily = _this$state.colorFamily,
-        hover = _this$state.hover,
-        type = _this$state.type;
-      var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,2})?$");
-      var stepBar = [{
-        index: 1,
-        title: 'ROOM SHAPE',
-        description: /*#__PURE__*/React.createElement("div", null, "Select units, add ceiling height and a predefined shape or draw your own.", /*#__PURE__*/React.createElement("br", null), "To get professional help, click on the Help button."),
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(S.ContentWrapper1, {
-          style: {
-            marginBottom: 25
-          }
-        }, /*#__PURE__*/React.createElement("div", {
-          style: {
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center'
-          }
-        }, /*#__PURE__*/React.createElement(S.MeasurementUnitLabel, null, "Measurement Unit"), /*#__PURE__*/React.createElement(S.MeasurementUnitSelect, {
-          id: "measurement_select",
-          onClick: function onClick() {
-            document.getElementById('measurement_option').style.display = document.getElementById('measurement_option').style.display === 'none' ? 'block' : 'none';
-            document.getElementById('measurement_select').style.borderColor = SECONDARY_PURPLE_COLOR;
-            document.getElementById('arrow-down').style.display = document.getElementById('arrow-down').style.display === 'none' ? 'block' : 'none';
-            document.getElementById('arrow-up').style.display = document.getElementById('arrow-up').style.display === 'block' ? 'none' : 'block';
-          }
-        }, "".concat(measurementUnit._name, "(").concat(measurementUnit._unit, ")")), /*#__PURE__*/React.createElement(S.SelectArrow, {
-          id: "arrow-down",
-          style: {
-            display: 'block'
-          },
-          maskImage: "/assets/img/svg/bottombar/arrow-down.svg"
-        }), /*#__PURE__*/React.createElement(S.SelectArrow, {
-          id: "arrow-up",
-          style: {
-            display: 'none'
-          },
-          maskImage: "/assets/img/svg/bottombar/arrow-up.svg"
-        }), /*#__PURE__*/React.createElement("div", {
-          id: "measurement_option",
-          style: {
-            display: 'none',
-            width: '100%',
-            zIndex: 3,
-            top: 55,
-            position: 'absolute',
-            borderRadius: 5,
-            backgroundColor: 'white',
-            boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)'
-          }
-        }, unitData.map(function (unit, key) {
-          return /*#__PURE__*/React.createElement(S.MeasurementUnitOption, {
-            onClick: function onClick() {
-              document.getElementById('measurement_option').style.display = 'none';
-              document.getElementById('arrow-down').style.display = 'block';
-              document.getElementById('arrow-up').style.display = 'none';
-              _this2.setState({
-                ceilingHeight: formatNumber(convert(ceilingHeight).from(measurementUnit._unit).to(unit._unit), DECIMAL_PLACES_2),
-                measurementUnit: unit
-              });
-            },
-            key: key
-          }, "".concat(unit._name, "(").concat(unit._unit, ")"));
-        }))), /*#__PURE__*/React.createElement("div", {
-          style: {
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            marginLeft: 40
-          }
-        }, /*#__PURE__*/React.createElement(S.MeasurementUnitLabel, null, "Ceiling Height"), /*#__PURE__*/React.createElement("input", {
-          style: {
-            width: 167,
-            textAlign: 'left',
-            padding: '15px 15px',
-            color: '#000f33',
-            fontSize: '13px',
-            lineHeight: '18px',
-            border: '2px solid #8791ab',
-            borderRadius: '5px',
-            outline: 0,
-            fontWeight: 600,
-            paddingRight: 90
-          },
-          value: ceilingHeight,
-          onChange: function onChange(evt) {
-            if (regexp.test(evt.target.value)) _this2.setState({
-              ceilingHeight: evt.target.value
-            });else _this2.setState({
-              ceilingHeight: ceilingHeight
-            });
-          }
-        }), /*#__PURE__*/React.createElement("span", {
-          style: {
-            position: 'absolute',
-            color: TEXT_COLOR_NEUTRAL_1,
-            fontSize: 16,
-            fontFamily: DEFAULT_FONT_FAMILY,
-            fontWeight: 400,
-            lineHeight: '22px',
-            textAlign: 'right',
-            right: 10
-          }
-        }, measurementUnit._unit === 'in' ? "".concat(measurementUnit._unit, "(default)") : measurementUnit._unit))), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, roomShapeData.map(function (item, key) {
-          return /*#__PURE__*/React.createElement(S.ContentItem, {
-            onClick: function onClick() {
-              _this2.setState({
-                roomShape: item
-              });
-              document.getElementById('description').style.color = TEXT_COLOR_NEUTRAL_0;
-            },
-            key: item.key
-          }, /*#__PURE__*/React.createElement(S.MaskImageWrapper, {
-            style: {
-              backgroundColor: roomShape.type === item.type && BG_COLOR_HOVER
-            }
-          }, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-            id: "roomshape&".concat(item.type),
-            maskImage: item.url,
-            style: {
-              backgroundColor: roomShape.type === item.type ? SECONDARY_PURPLE_COLOR : roomShape.type ? TEXT_COLOR_NEUTRAL_3 : TEXT_COLOR_NEUTRAL_0
-            }
-          })), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/wizardstep/check-normal.svg"
-          }), roomShape.type === item.type && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/wizardstep/check-active.svg"
-          }), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-            id: "roomlabel&".concat(item.type),
-            style: {
-              fontWeight: roomShape.type === item.type && 400,
-              color: roomShape.type === item.type ? SECONDARY_PURPLE_COLOR : roomShape.type ? TEXT_COLOR_NEUTRAL_3 : TEXT_COLOR_NEUTRAL_0
-            }
-          }, item.name));
-        })), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement(S.ContentItem, {
-          onClick: function onClick() {
-            _this2.setState({
-              roomShape: {
-                type: 'custom',
-                data: {}
-              }
-            });
-            document.getElementById('description').style.color = TEXT_COLOR_NEUTRAL_0;
-          }
-        }, /*#__PURE__*/React.createElement(S.MaskImageWrapper, {
-          style: {
-            backgroundColor: roomShape.type === 'custom' && BG_COLOR_HOVER
-          }
-        }, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          id: "roomshape&custom",
-          maskImage: "/assets/img/svg/wizardstep/Custom.svg",
-          style: {
-            backgroundColor: roomShape.type === 'custom' ? SECONDARY_PURPLE_COLOR : roomShape.type ? TEXT_COLOR_NEUTRAL_3 : TEXT_COLOR_NEUTRAL_0
-          }
-        }), /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          id: "roomshape&pencil",
-          maskImage: "/assets/img/svg/wizardstep/pencil.svg",
-          style: {
-            position: 'absolute',
-            top: 10,
-            right: 10,
-            height: 25,
-            width: 25,
-            backgroundColor: roomShape.type === 'custom' ? SECONDARY_PURPLE_COLOR : roomShape.type ? TEXT_COLOR_NEUTRAL_3 : TEXT_COLOR_NEUTRAL_0
-          }
-        })), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          id: "check",
-          src: "/assets/img/svg/wizardstep/check-normal.svg"
-        }), roomShape.type === 'custom' && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/wizardstep/check-active.svg"
-        }), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          id: "roomlabel&custom",
-          style: {
-            fontWeight: roomShape.type === 'custom' && 600,
-            color: roomShape.type === 'custom' ? SECONDARY_PURPLE_COLOR : roomShape.type ? TEXT_COLOR_NEUTRAL_3 : TEXT_COLOR_NEUTRAL_0
-          }
-        }, "Draw Custom"), /*#__PURE__*/React.createElement("span", {
-          id: "hint",
-          style: {
-            position: 'absolute',
-            fontFamily: DEFAULT_FONT_FAMILY,
-            fontSize: 16,
-            lineHeight: '20px',
-            textAlign: 'left',
-            backgroundColor: TEXT_COLOR_NEUTRAL_1,
-            opacity: 0.8,
-            color: BG_COLOR_1,
-            borderRadius: 3,
-            zIndex: 3,
-            width: 'max-content',
-            top: -30,
-            left: -10,
-            padding: '3px 8px'
-          }
-        }, "You will be able to draw your own space"))))
-      }, {
-        index: 2,
-        title: 'COLOR & STYLE',
-        description: 'Customize your door style. To get professional help, click on the Help button.',
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(S.Title, null, "Installation"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, this.props.categoryData.data.doorStyles.items.map(function (item, key) {
-          return /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                installation: item,
-                doorCategory: item.items[0]
-              });
-            },
-            key: key
-          }, /*#__PURE__*/React.createElement(S.DoorStyleContentImageWrapper, {
-            id: "item",
-            style: {
-              backgroundColor: installation.name === item.name && TEXT_COLOR_NEUTRAL_5,
-              borderColor: installation.name === item.name && SECONDARY_PURPLE_COLOR
-            }
-          }, /*#__PURE__*/React.createElement(S.DoorStyleContentImage, {
-            id: "doorstyle&".concat(item.name, "&image"),
-            maskImage: item.thumbnail,
-            style: {
-              backgroundColor: installation.name === item.name && SECONDARY_PURPLE_COLOR
-            }
-          })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-            style: {
-              color: installation.name === item.name && SECONDARY_PURPLE_COLOR,
-              fontSize: 15,
-              fontWeight: installation.name === item.name && 700
-            }
-          }, item.name));
-        })), /*#__PURE__*/React.createElement(S.Title, {
-          style: {
-            marginTop: 20
-          }
-        }, "Door Style"), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, this.props.categoryData.data.doorStyles.items.filter(function (item) {
-          return item.name === installation.name;
-        })[0].items.map(function (element, key) {
-          return /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                doorCategory: element
-              });
-            },
-            key: key
-          }, /*#__PURE__*/React.createElement(S.DoorStyleContentImageWrapper, {
-            id: "item",
-            style: {
-              backgroundColor: doorCategory.name === element.name && TEXT_COLOR_NEUTRAL_5,
-              borderColor: doorCategory.name === element.name && SECONDARY_PURPLE_COLOR
-            }
-          }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-            style: {
-              margin: doorCategory.name === element.name && 'unset',
-              backgroundColor: doorCategory.name === element.name && SECONDARY_PURPLE_COLOR
-            },
-            maskImage: element.thumbnail
-          })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-            id: "doorcategory&".concat(element.name, "&label"),
-            style: {
-              color: doorCategory.name === element.name ? SECONDARY_PURPLE_COLOR : TEXT_COLOR_NEUTRAL_0,
-              fontSize: 15,
-              fontWeight: doorCategory.name === element.name && 700
-            }
-          }, element.name));
-        })), /*#__PURE__*/React.createElement("div", {
-          style: {
-            display: 'flex',
-            gap: '1rem',
-            alignItems: 'center',
-            marginTop: 20,
-            height: 30
-          }
-        }, /*#__PURE__*/React.createElement(S.Title, null, "Color family"), Object.keys(this.state.colorFamily).length !== 0 && /*#__PURE__*/React.createElement(S.Button, {
-          style: {
-            fontSize: 12,
-            padding: '5px 10px',
-            border: '1px solid'
-          },
-          onClick: function onClick() {
-            return _this2.setState({
-              colorFamily: {}
-            });
-          }
-        }, "Clear filter")), /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement("div", {
-          style: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '0.5rem'
-          }
-        }, this.props.categoryData.data.doorColorFamily && this.props.categoryData.data.doorColorFamily.map(function (element, key) {
-          return /*#__PURE__*/React.createElement(S.ColorContentItem, {
-            onClick: function onClick() {
-              return _this2.setState({
-                colorFamily: element
-              });
-            },
-            key: key
-          }, /*#__PURE__*/React.createElement(S.ColorContentImage, {
-            src: element.thumbnail
-          }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            id: "check",
-            src: "/assets/img/svg/wizardstep/check-normal.svg",
-            style: {
-              height: 70,
-              width: 70,
-              borderRadius: '50%',
-              backgroundColor: 'unset',
-              zIndex: 2,
-              padding: 16
-            }
-          }), colorFamily.id === element.id && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/wizardstep/check-active.svg",
-            style: {
-              height: 70,
-              width: 70,
-              borderRadius: '50%',
-              backgroundColor: 'unset',
-              zIndex: 2,
-              padding: 16,
-              border: "2px solid ".concat(SECONDARY_PURPLE_COLOR)
-            }
-          }));
-        }))))
-      }, {
-        index: 3,
-        title: 'SUMMARY',
-        description: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Select from the door collection for all cabinets."), /*#__PURE__*/React.createElement("div", null, "To get professional help, click on the Help button.")),
-        content: /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(S.ContentWrapper1, null, /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement(S.Title, null, "Room Shape"), roomShapeData.map(function (item, key) {
-          return roomShape.type === item.type && /*#__PURE__*/React.createElement(S.ContentItem, {
-            style: {
-              margin: 'unset',
-              marginTop: 20
-            },
-            key: key
-          }, /*#__PURE__*/React.createElement(S.MaskImageWrapper, null, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-            maskImage: item.url,
-            style: {
-              backgroundColor: SECONDARY_PURPLE_COLOR
-            }
-          })), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-            src: "/assets/img/svg/wizardstep/check-active.svg"
-          }), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-            style: {
-              color: SECONDARY_PURPLE_COLOR
-            }
-          }, item.name));
-        }), roomShape.type === 'custom' && /*#__PURE__*/React.createElement(S.ContentItem, {
-          style: {
-            margin: 'unset',
-            marginTop: 20
-          }
-        }, /*#__PURE__*/React.createElement(S.MaskImageWrapper, null, /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          maskImage: "/assets/img/svg/wizardstep/Custom.svg",
-          style: {
-            backgroundColor: SECONDARY_PURPLE_COLOR
-          }
-        }), /*#__PURE__*/React.createElement(S.RoomContentImage, {
-          maskImage: "/assets/img/svg/wizardstep/pencil.svg",
-          style: {
-            position: 'absolute',
-            top: 10,
-            right: 25,
-            height: 25,
-            width: 25,
-            backgroundColor: SECONDARY_PURPLE_COLOR
-          }
-        })), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/wizardstep/check-active.svg"
-        }), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          style: {
-            color: SECONDARY_PURPLE_COLOR
-          }
-        }, "Draw Custom"), /*#__PURE__*/React.createElement("span", {
-          id: "hint",
-          style: {
-            position: 'absolute',
-            fontFamily: DEFAULT_FONT_FAMILY,
-            fontSize: 16,
-            lineHeight: '20px',
-            textAlign: 'left',
-            backgroundColor: TEXT_COLOR_NEUTRAL_1,
-            opacity: 0.8,
-            color: BG_COLOR_1,
-            borderRadius: 3,
-            zIndex: 3,
-            width: 'max-content',
-            top: -30,
-            left: -10,
-            padding: '3px 8px'
-          }
-        }, "You will be able to draw your own space"))), /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement(S.Title, null, "Installation"), /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-          style: {
-            margin: 'unset',
-            marginTop: 20
-          }
-        }, /*#__PURE__*/React.createElement(S.DoorStyleContentImageWrapper, {
-          style: {
-            borderColor: SECONDARY_PURPLE_COLOR,
-            backgroundColor: TEXT_COLOR_NEUTRAL_5
-          }
-        }, /*#__PURE__*/React.createElement(S.DoorStyleContentImage, {
-          maskImage: installation.thumbnail,
-          style: {
-            backgroundColor: SECONDARY_PURPLE_COLOR
-          }
-        })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          style: {
-            color: SECONDARY_PURPLE_COLOR
-          }
-        }, installation.name))), /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement(S.Title, null, "Color Family"), /*#__PURE__*/React.createElement(S.ColorContentItem, {
-          style: {
-            margin: 'unset',
-            marginTop: 20
-          }
-        }, colorFamily.thumbnail && /*#__PURE__*/React.createElement(S.ColorContentImage, {
-          src: colorFamily.thumbnail,
-          style: {
-            height: 120,
-            width: 120,
-            borderRadius: '100%'
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/wizardstep/check-active.svg",
-          style: {
-            height: 120,
-            width: 120,
-            borderRadius: '50%',
-            backgroundColor: 'unset',
-            zIndex: 2,
-            padding: 41,
-            border: "2px solid ".concat(SECONDARY_PURPLE_COLOR)
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          style: {
-            color: SECONDARY_PURPLE_COLOR
-          }
-        }, colorFamily.name))), /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement(S.Title, null, "Style"), /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-          style: {
-            margin: 'unset',
-            marginTop: 20
-          }
-        }, /*#__PURE__*/React.createElement(S.DoorStyleContentImageWrapper, {
-          style: {
-            backgroundColor: TEXT_COLOR_NEUTRAL_5,
-            borderColor: SECONDARY_PURPLE_COLOR
-          }
-        }, /*#__PURE__*/React.createElement(S.DoorCategoryContentImage, {
-          style: {
-            margin: 'unset',
-            backgroundColor: SECONDARY_PURPLE_COLOR
-          },
-          maskImage: doorCategory.thumbnail
-        })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          style: {
-            color: SECONDARY_PURPLE_COLOR
-          }
-        }, doorCategory.name))), /*#__PURE__*/React.createElement(S.ContentWrapper2, null, /*#__PURE__*/React.createElement(S.Title, null, "Finish"), /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-          style: {
-            margin: 'unset',
-            marginTop: 20
-          }
-        }, /*#__PURE__*/React.createElement(S.FinishContentImageWrapper, {
-          style: {
-            border: "2px solid ".concat(SECONDARY_PURPLE_COLOR),
-            backgroundColor: 'unset',
-            minHeight: 120,
-            height: 120,
-            width: 120
-          }
-        }, /*#__PURE__*/React.createElement(S.FinishContentImage, {
-          src: doorStyle.thumbnail,
-          style: {
-            height: '70%',
-            width: '100%',
-            objectFit: 'contain'
-          }
-        })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          style: {
-            color: SECONDARY_PURPLE_COLOR,
-            marginBottom: 15,
-            width: 120
-          }
-        }, doorStyle.name)))))
-      }];
-      return /*#__PURE__*/React.createElement("div", null, step === 0 ? /*#__PURE__*/React.createElement(S.WizardIntro, null, /*#__PURE__*/React.createElement(S.IntroPlane, null, /*#__PURE__*/React.createElement(S.IntroMark, null, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/loading/loading_1.svg",
-        width: 80
-      })), /*#__PURE__*/React.createElement(S.IntroTitle, null, "Welcome to DIY Design Space"), /*#__PURE__*/React.createElement(S.IntroDescription, null, "Let's start designing your kitchen. Select the type of project you want to start."), /*#__PURE__*/React.createElement(S.IntroSelect, null, /*#__PURE__*/React.createElement(S.IntroItem, {
-        onClick: function onClick() {
-          _this2.setState({
-            step: 1
-          });
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/svg/intro/1-start-with-floorplan".concat(hover === 1 ? '-whole' : '', ".svg"),
-        onMouseOut: function onMouseOut() {
-          _this2.setState({
-            hover: 0
-          });
-        },
-        onMouseOver: function onMouseOver() {
-          _this2.setState({
-            hover: 1
-          });
-        },
-        width: 140
-      }), /*#__PURE__*/React.createElement(S.IntroItemText, null, "Start with Floorplan")), /*#__PURE__*/React.createElement(S.IntroItem, {
-        onClick: function onClick() {
-          _this2.props.close();
-          _this2.context.viewer2DActions.updateCeilHeight(96);
-          _this2.context.viewer2DActions.updateCeilHeightUnit('in');
-          _this2.context.viewer3DActions.update3DCeilHeight(96);
-          _this2.context.viewer3DActions.update3DCeilHeightUnit('in');
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/svg/intro/2-start-from-scratch".concat(hover === 2 ? '-whole' : '', ".svg"),
-        onMouseOut: function onMouseOut() {
-          _this2.setState({
-            hover: 0
-          });
-        },
-        onMouseOver: function onMouseOver() {
-          _this2.setState({
-            hover: 2
-          });
-        },
-        width: 140
-      }), /*#__PURE__*/React.createElement(S.IntroItemText, null, "Start from Scratch"))))) : /*#__PURE__*/React.createElement(S.WizardStepWrapper, null, /*#__PURE__*/React.createElement(S.TitleBarWrapper, null, /*#__PURE__*/React.createElement(S.TitleBar, null, step === 1 ? 'Choose your room shape' : step === 3 ? 'Summary' : 'Choose your door style'), /*#__PURE__*/React.createElement(S.TitleBarButtonWrapper, null, /*#__PURE__*/React.createElement(S.TitleBarButton, {
-        style: {
-          border: "3px solid ".concat(BG_COLOR_1),
-          cursor: step === 1 && 'no-drop',
-          backgroundColor: step === 1 && BG_COLOR_1,
-          color: step === 1 && TEXT_COLOR_NEUTRAL_4
-        },
-        onClick: function onClick() {
-          return step !== 1 && _this2.setState({
-            cancelDialogVisible: true
-          });
-        }
-      }, "Cancel"), step > 1 && /*#__PURE__*/React.createElement(S.TitleBarButton, {
-        onClick: function onClick() {
-          _this2.setState({
-            step: step - 1
-          });
-          // switch (step) {
-          //   case 5:
-          //     this.setState({ doorStyle: '' });
-          //     break;
-          //   case 4:
-          //     this.setState({ doorCategory: { name: '', url: '' }});
-          //     break;
-          //   case 3:
-          //     this.setState({ installation: '', doorCategory: { name: '', url: '' } });
-          //     break;
-          //   case 2:
-          //     this.setState({ installation: '' });
-          //     this.setState({ doorColor: { name: '', url: '', color: '' } });
-          //   default:
-          //     break;
-          // }
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        style: {
-          paddingRight: 10
-        },
-        height: "10px",
-        src: "/assets/img/svg/toolbar/undo_button.svg"
-      }), "Back"), /*#__PURE__*/React.createElement(S.ConfirmButton, {
-        style: {
-          minWidth: 89
-        },
-        onClick: function onClick() {
-          return step < 3 ? _this2._ok() : _this2._confirm(1);
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        style: {
-          marginRight: 10,
-          height: 18,
-          width: 18,
-          WebkitMaskImage: 'url(/assets/img/svg/headerbar/check.svg)',
-          backgroundColor: BG_COLOR_1,
-          WebkitMaskSize: '100%',
-          WebkitMaskPosition: 'center'
-        }
-      }), step > 2 ? 'Confirm' : 'OK'))), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          gap: '2rem'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column'
-        }
-      }, /*#__PURE__*/React.createElement(S.StepBarWrapper, null, stepBar.map(function (element, key) {
-        switch (element.index) {
-          case 1:
-            return /*#__PURE__*/React.createElement(S.StepBullet, {
-              key: key
-            }, /*#__PURE__*/React.createElement(S.StepBulletLabel, {
-              style: {
-                color: step === element.index && SHADE_LIGHT_PURPLE_COLOR,
-                fontWeight: step >= element.index && 700
-              }
-            }, element.title), /*#__PURE__*/React.createElement(S.StepBulletIcon, {
-              src: step === element.index ? '/assets/img/svg/wizardstep/bullet-current.svg' : '/assets/img/svg/wizardstep/bullet-done.svg',
-              onClick: function onClick() {
-                return _this2.setState({
-                  step: element.index
-                });
-              }
-            }));
-          default:
-            return /*#__PURE__*/React.createElement(S.StepBullet, {
-              key: key
-            }, /*#__PURE__*/React.createElement(S.StepBulletLabel, {
-              style: {
-                color: step === element.index && SHADE_LIGHT_PURPLE_COLOR,
-                fontWeight: step >= element.index && 700
-              }
-            }, element.title), /*#__PURE__*/React.createElement("div", {
-              style: {
-                display: 'flex',
-                position: 'relative',
-                width: '100%',
-                right: 'calc((100% - 10px) / 2)'
-              }
-            }, /*#__PURE__*/React.createElement(S.StepBarIcon, {
-              src: step >= element.index - 1 ? '/assets/img/svg/wizardstep/bar-active.svg' : '/assets/img/svg/wizardstep/bar-normal.svg'
-            }), /*#__PURE__*/React.createElement(S.StepBulletIcon, {
-              src: step === element.index ? '/assets/img/svg/wizardstep/bullet-current.svg' : step > element.index ? '/assets/img/svg/wizardstep/bullet-done.svg' : '/assets/img/svg/wizardstep/bullet-not-done.svg',
-              onClick: function onClick() {
-                return _this2.onStepChange(element.index);
-              }
-            })));
-        }
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(S.Description, null, /*#__PURE__*/React.createElement("span", {
-        id: "description"
-      }, stepBar[step - 1].description))), stepBar[step - 1].content), step === 2 && /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React.createElement(S.DoorStyleWrapper, null, this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.name === installation.name;
-      })[0].items.filter(function (item1) {
-        return item1.name === doorCategory.name;
-      })[0].items.length === 0 ? /*#__PURE__*/React.createElement("span", {
-        style: {
-          fontFamily: DEFAULT_FONT_FAMILY,
-          fontSize: 22,
-          lineHeight: '28px',
-          fontWeight: 700,
-          margin: 'auto',
-          marginTop: 50,
-          color: STATUS_NEGATIVE_COLOR,
-          padding: '2rem'
-        }
-      }, "There is no door style with current dealer") : colorFamily.id && this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.name === installation.name;
-      })[0].items.filter(function (item1) {
-        return item1.name === doorCategory.name;
-      })[0].items.filter(function (element) {
-        return element.color_family.search(",".concat(colorFamily.id, ",")) === 0;
-      }).length === 0 ? /*#__PURE__*/React.createElement("span", {
-        style: {
-          fontFamily: DEFAULT_FONT_FAMILY,
-          fontSize: 22,
-          lineHeight: '28px',
-          fontWeight: 700,
-          margin: 'auto',
-          marginTop: 50,
-          color: STATUS_NEGATIVE_COLOR,
-          padding: '2rem'
-        }
-      }, "There is no door style with current door color family") : this.props.categoryData.data.doorStyles.items.filter(function (item) {
-        return item.name === installation.name;
-      })[0].items.filter(function (item1) {
-        return item1.name === doorCategory.name;
-      })[0].items.map(function (element, key) {
-        return !colorFamily.id || element.color_family.search(",".concat(colorFamily.id, ",")) === 0 ? /*#__PURE__*/React.createElement(S.DoorStyleContentItem, {
-          style: {
-            margin: 0,
-            height: 340,
-            width: 160,
-            backgroundColor: doorStyle.name === element.name && '#EDF1FB',
-            borderRadius: 6
-          },
-          onClick: function onClick() {
-            return _this2.setState({
-              doorStyle: element
-            });
-          },
-          key: key
-        }, /*#__PURE__*/React.createElement(S.FinishContentImageWrapper, {
-          id: "door&".concat(element.name, "&item"),
-          style: {
-            marginTop: 15,
-            border: doorStyle.name === element.name && "2px solid ".concat(SECONDARY_PURPLE_COLOR),
-            backgroundColor: doorStyle.name === element.name && TEXT_COLOR_NEUTRAL_5
-          }
-        }, /*#__PURE__*/React.createElement(S.FinishContentImage, {
-          src: element.thumbnail,
-          style: {
-            width: '100%',
-            height: '100%'
-          }
-        }), /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          id: "check",
-          src: "/assets/img/svg/wizardstep/check-normal.svg",
-          style: {
-            height: 160,
-            width: 120,
-            borderRadius: 10,
-            backgroundColor: 'unset',
-            zIndex: 2
-          }
-        }), doorStyle.name === element.name && /*#__PURE__*/React.createElement(S.ContentCheckImage, {
-          src: "/assets/img/svg/wizardstep/check-active.svg",
-          style: {
-            height: 160,
-            width: 120,
-            borderRadius: 10,
-            backgroundColor: 'unset'
-          }
-        })), /*#__PURE__*/React.createElement(S.ContentItemLabel, {
-          id: "door&".concat(element.name, "&label"),
-          style: {
-            fontWeight: doorStyle.name === element.name && 700,
-            color: doorStyle.name === element.name ? SECONDARY_PURPLE_COLOR : TEXT_COLOR_NEUTRAL_0,
-            maxWidth: '130px'
-          }
-        }, element.name)) : null;
-      })))), /*#__PURE__*/React.createElement(StyledDialog, {
-        open: cancelDialogVisible,
-        onClose: function onClose() {
-          return _this2.setState({
-            cancelDialogVisible: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.DialogContent, null, "Do you want to apply your current selections or start from scratch?"), /*#__PURE__*/React.createElement(S.DialogAction, null, /*#__PURE__*/React.createElement(S.Button, {
-        onClick: function onClick() {
-          _this2.props.close();
-          _this2.context.viewer2DActions.updateCeilHeight(96);
-          _this2.context.viewer2DActions.updateCeilHeightUnit('in');
-          _this2.context.viewer3DActions.update3DCeilHeight(96);
-          _this2.context.viewer3DActions.update3DCeilHeightUnit('in');
-        }
-      }, "Discard"), /*#__PURE__*/React.createElement(S.Button, {
-        onClick: function onClick() {
-          return _this2._confirm(0);
-        }
-      }, "Apply")))));
-    }
-  }]);
-}(Component);
-export { WizardStep as default };
-WizardStep.propTypes = {
-  state: PropTypes.object.isRequired,
-  content: PropTypes.number.isRequired
-};
-WizardStep.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired
-};
-//# sourceMappingURL=index.js.map