@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

package/App/Modules/Creator/Components/ConfigurationvariantSelection/index.js

@@ -0,0 +1,130 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+require("./Styles.scss");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var ConfigurationvariantSelection = /*#__PURE__*/function (_React$Component) {
+  _inherits(ConfigurationvariantSelection, _React$Component);
+
+  var _super = _createSuper(ConfigurationvariantSelection);
+
+  function ConfigurationvariantSelection(props) {
+    var _this;
+
+    _classCallCheck(this, ConfigurationvariantSelection);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "onSelect", function (identifier) {
+      _this.setState({
+        selectedItem: identifier
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onProceed", function (identifier) {
+      var _this$props = _this.props,
+          onProceed = _this$props.onProceed,
+          showConfigurationVariantSelection = _this$props.showConfigurationVariantSelection;
+      onProceed(identifier, showConfigurationVariantSelection);
+    });
+
+    var initialSelection = null;
+
+    if (props.selectedItem !== undefined) {
+      initialSelection = props.selectedItem;
+    } else {
+      initialSelection = (0, _lodash.get)(props.configurationvariants, '[0].identifier');
+    }
+
+    _this.state = {
+      selectedItem: initialSelection
+    };
+    return _this;
+  }
+
+  _createClass(ConfigurationvariantSelection, [{
+    key: "renderTitleComponent",
+    value: function renderTitleComponent() {
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          configurationvariants = _this$props2.configurationvariants,
+          Carousel = _this$props2.Carousel,
+          ItemComponent = _this$props2.ItemComponent;
+
+      if (!(0, _lodash.isArray)(configurationvariants) || configurationvariants.length === 0) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "configurationvariantSelection"
+      }, this.renderTitleComponent(), /*#__PURE__*/_react["default"].createElement(Carousel, {
+        className: "configurationvariantItemWrapper"
+      }, configurationvariants.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement(ItemComponent, {
+          identifier: item.identifier,
+          key: 'configurationvariantItem_' + item.identifier,
+          item: item,
+          onSelect: _this2.onSelect,
+          selected: item.identifier === _this2.state.selectedItem,
+          onProceed: _this2.onProceed
+        });
+      })));
+    }
+  }]);
+
+  return ConfigurationvariantSelection;
+}(_react["default"].Component);
+
+_defineProperty(ConfigurationvariantSelection, "propTypes", {
+  configurationvariants: _propTypes["default"].array,
+  ItemComponent: _propTypes["default"].elementType,
+  Carousel: _propTypes["default"].elementType,
+  selectedItem: _propTypes["default"].string,
+  showConfigurationVariantSelection: _propTypes["default"].bool,
+  onProceed: _propTypes["default"].func
+});
+
+var _default = ConfigurationvariantSelection;
+exports["default"] = _default;

package/App/Modules/Creator/Components/CustomTitleEditor/Styles.scss

@@ -0,0 +1,43 @@
+@import '../../../../../App/Variables';
+
+.customTitleEditor-dialog {
+    width: 100%;
+    height: 100%;
+
+    .customTitleEditor-info {
+    }
+    .customTitleEditor-input {
+        display: block;
+        margin: 10px 0;
+        font-family: $font-family;
+        font-size: 1em;
+        width: 97%;
+        padding: 5px;
+        border: 1px solid #C4C4C4;
+        border-radius: 4px;
+        height: 40px;
+    }
+    .customTitleEditor-footer {
+        text-align: center;
+    }
+    .customTitleEditor-ok {
+        display: inline-block;
+        margin: 10px auto;
+    }
+    .customTitleEditor-message {
+        color: red;
+    }
+    .dialog-overlay {
+        z-index: 100000 !important;
+    }
+    .dialog {
+        z-index: 100001 !important;
+
+        position: absolute;
+        margin: 0;
+        top: 50% !important;
+        left: 50% !important;
+        margin-right: -50%;
+        transform: translate(-50%, -50%);
+    }
+}

package/App/Modules/Creator/Components/CustomTitleEditor/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CustomTitleEditor = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _Input = _interopRequireDefault(require("../../../../../Framework/Components/Input"));
+
+var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
+
+var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
+
+require("./Styles.scss");
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var CustomTitleEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(CustomTitleEditor, _React$Component);
+
+  var _super = _createSuper(CustomTitleEditor);
+
+  function CustomTitleEditor() {
+    var _this;
+
+    _classCallCheck(this, CustomTitleEditor);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      message: null
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function () {
+      if (_this.input.value.length === 0) {
+        _this.setState({
+          message: _this.t('customTitleEditor.emptyTitle')
+        });
+
+        _this.input.element.focus();
+      } else {
+        _this.props.onChange(_this.input.value);
+
+        _this.props.onClose();
+
+        if (_this.state.message) {
+          _this.setState({
+            message: null
+          });
+        }
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(CustomTitleEditor, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          show = _this$props.show,
+          onClose = _this$props.onClose,
+          title = _this$props.title;
+      return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+        open: show,
+        dialogTitle: (0, _i18n.t)('customTitleEditor.infoText'),
+        onClose: onClose,
+        onCancel: onClose,
+        className: 'customTitleEditor-dialog'
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+        className: "customTitleEditor-input",
+        value: title,
+        ref: function ref(_ref) {
+          return _this2.input = _ref;
+        },
+        autoFocus: true,
+        onEnterPressed: this.onChange
+      }), this.state.message && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "customTitleEditor-message"
+      }, this.state.message)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+        className: "primary-button customTitleEditor-ok",
+        onClick: this.onChange,
+        variant: "contained"
+      }, (0, _i18n.t)('customTitleEditor.okText'))));
+    }
+  }]);
+
+  return CustomTitleEditor;
+}(_react["default"].Component);
+
+exports.CustomTitleEditor = CustomTitleEditor;
+
+_defineProperty(CustomTitleEditor, "propTypes", {
+  DialogComponent: _propTypes["default"].elementType,
+  show: _propTypes["default"].bool,
+  title: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  setConfigurationName: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
+});
+
+var _default = (0, _i18n.translateComponent)(CustomTitleEditor);
+
+exports["default"] = _default;

package/App/Modules/Creator/Components/ExternalVisualization/index.js

@@ -0,0 +1,140 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadjs = _interopRequireDefault(require("loadjs"));
+
+var _configuration = require("../../../../configuration");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * @deprecated Used only in legacy projects
+ */
+var ExternalVisualization = /*#__PURE__*/function (_React$Component) {
+  _inherits(ExternalVisualization, _React$Component);
+
+  var _super = _createSuper(ExternalVisualization);
+
+  function ExternalVisualization(props) {
+    var _this;
+
+    _classCallCheck(this, ExternalVisualization);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "setRef", function (ref) {
+      return _this.container = ref;
+    });
+
+    _this.loadjs = _loadjs["default"]; // eslint-disable-next-line no-console
+
+    console.warn('ExternalVisualization should only be used as a backward compatibility wrapper for older projects.');
+    return _this;
+  }
+
+  _createClass(ExternalVisualization, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.loadVisualizationComponent();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // update Visualization component if it is present
+      if (this.visualizationcomponent !== undefined && this.shouldUpdateVisualizationComponent(prevProps)) {
+        this.visualizationcomponent.update(this.props.configuration);
+      }
+    }
+  }, {
+    key: "getVisualizationResourcesURL",
+    value: function getVisualizationResourcesURL() {
+      return (0, _configuration.getConf)('network.resourcesURL', '/');
+    }
+  }, {
+    key: "getVisualizationCustomConfiguration",
+    value: function getVisualizationCustomConfiguration() {
+      return {};
+    }
+  }, {
+    key: "loadVisualizationComponent",
+    value: function loadVisualizationComponent() {
+      var self = this; // load the visualization component's javascript asynchronously and init it
+
+      this.loadjs(['/visualizationcomponent/visualizationcomponent.js'], 'visualizationcomponent');
+      this.loadjs.ready('visualizationcomponent', {
+        success: function success() {
+          var config = {
+            basePath: self.getVisualizationResourcesURL()
+          };
+          var customConfig = self.getVisualizationCustomConfiguration();
+          config = Object.assign(config, customConfig); // eslint-disable-next-line no-undef
+
+          self.visualizationcomponent = new Visualizationcomponent();
+          self.visualizationcomponent.init(config, function () {}, function () {}, self.loadjs);
+        },
+        error: function error() {}
+      });
+    }
+    /**
+     * Override this function to fine tune the visualization component updates
+     * @param {object} prevProps
+     * @returns {boolean}
+     */
+    // eslint-disable-next-line no-unused-vars
+
+  }, {
+    key: "shouldUpdateVisualizationComponent",
+    value: function shouldUpdateVisualizationComponent(prevProps) {
+      return true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        id: "visualizationcomponentcontainer",
+        className: "visualizationcomponentcontainer",
+        ref: this.setRef
+      });
+    }
+  }]);
+
+  return ExternalVisualization;
+}(_react["default"].Component);
+
+exports["default"] = ExternalVisualization;
+
+_defineProperty(ExternalVisualization, "propTypes", {
+  configuration: _propTypes["default"].object
+});

package/App/Modules/Creator/Components/FastConfiguration/SelectableRow.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@material-ui/core");
+
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useStyles = (0, _core.makeStyles)(function () {
+  return {
+    arrow: {
+      display: 'table-cell',
+      verticalAlign: 'middle',
+      paddingLeft: 20
+    },
+    button: {
+      display: 'table'
+    },
+    label: {},
+    option: {
+      display: 'table-cell',
+      verticalAlign: 'middle',
+      width: '88%',
+      '&.selected': {},
+      '& .fastconfiguration-option': {
+        display: 'flex'
+      }
+    },
+    root: {
+      display: 'table-cell',
+      verticalAlign: 'middle',
+      cursor: 'pointer'
+    }
+  };
+}, {
+  name: 'SelectableRow'
+});
+
+var SelectableRow = function SelectableRow(_ref) {
+  var label = _ref.label,
+      selectedOption = _ref.selectedOption,
+      showSelected = _ref.showSelected,
+      closeDialog = _ref.closeDialog,
+      renderValue = _ref.renderValue,
+      toggleDialog = _ref.toggleDialog,
+      onFocus = _ref.onFocus,
+      onOptionRendered = _ref.onOptionRendered;
+  var classes = useStyles();
+
+  var onProductPartClicked = function onProductPartClicked() {
+    toggleDialog();
+    onFocus();
+  };
+
+  var renderArrow = function renderArrow() {
+    return /*#__PURE__*/_react["default"].createElement(_ArrowDropDown["default"], {
+      className: classes.arrow
+    });
+  };
+
+  var renderOption = function renderOption(option, key) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.option,
+      key: key,
+      "data-option": option.identifier,
+      onClick: closeDialog
+    }, onOptionRendered ? onOptionRendered(option) : option.title);
+  };
+
+  var renderComponent = function renderComponent() {
+    var topElement = null;
+
+    if (showSelected) {
+      if (selectedOption) {
+        if (renderValue) {
+          topElement = renderValue(selectedOption);
+        } else {
+          topElement = renderOption(selectedOption, true);
+        }
+      } else {
+        topElement = /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          className: classes.label
+        }, label);
+      }
+    } else {
+      topElement = /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.label
+      }, label);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.root
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.button,
+      onClick: onProductPartClicked
+    }, topElement, renderArrow()));
+  };
+
+  return renderComponent();
+};
+
+SelectableRow.propTypes = {
+  label: _propTypes["default"].string,
+  selectedOption: _propTypes["default"].object,
+  showSelected: _propTypes["default"].bool,
+  closeDialog: _propTypes["default"].func,
+  renderValue: _propTypes["default"].func,
+  toggleDialog: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onOptionRendered: _propTypes["default"].func
+};
+SelectableRow.defaultProps = {
+  selectedOption: {},
+  showSelected: false
+};
+var _default = SelectableRow;
+exports["default"] = _default;

package/App/Modules/Creator/Components/FastConfiguration/Styles.scss

@@ -0,0 +1,53 @@
+@import "../../../../../App/Variables";
+@import "../../../../../Framework/Mixins";
+
+.fastconfiguration-dialog {
+  width: 100%;
+  height: 100%;
+
+  > .dialog {
+    min-width: 800px;
+    position: absolute;
+    margin: 0;
+    top: 50% !important;
+    left: 50% !important;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+
+    @media screen and (max-width: 600px) {
+      min-width: 320px;
+      max-width: 100%;
+    }
+  }
+
+  .fastconfiguration-footer {
+    @include clear;
+    display: table;
+    width: 100%;
+  }
+
+  .fastconfiguration-price {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .fastconfiguration-done {
+    float: right;
+  }
+}
+
+.fastconfiguration {
+  margin: 30px;
+}
+
+.fastconfiguration-rows-wrapper {
+  max-height: $fastconfigurationRowsWrapper-height;
+  margin-bottom: $fastconfigurationDropdown-margin-bottom;
+  overflow: auto;
+}
+
+.fastconfiguration-row-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}