@configuratorware/configurator-frontendgui 1.47.11 → 1.48.0

package/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -145,7 +145,17 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
     defaultFont = props.defaultFont,
     loadFonts = props.loadFonts,
     initialColor = props.initialColor,
-    autoFocusEditor = props.autoFocusEditor;
+    autoFocusEditor = props.autoFocusEditor,
+    alignVerticalCenterIcon = props.alignVerticalCenterIcon,
+    alignHorizontalCenterIcon = props.alignHorizontalCenterIcon,
+    moveDownIcon = props.moveDownIcon,
+    moveUpIcon = props.moveUpIcon,
+    formatAlignLeftIcon = props.formatAlignLeftIcon,
+    formatAlignCenterIcon = props.formatAlignCenterIcon,
+    formatAlignRightIcon = props.formatAlignRightIcon,
+    formatAlignJustifyIcon = props.formatAlignJustifyIcon,
+    formatBoldIcon = props.formatBoldIcon,
+    formatItalicIcon = props.formatItalicIcon;
   var rteRef = (0, _react.useRef)(null);
   var editorRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -291,7 +301,17 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
             canvas.selectedObject.content = getTextContent({
               isBulkName: isBulkName
             });
-          }
+          },
+          alignVerticalCenterIcon: alignVerticalCenterIcon,
+          alignHorizontalCenterIcon: alignHorizontalCenterIcon,
+          moveDownIcon: moveDownIcon,
+          moveUpIcon: moveUpIcon,
+          formatAlignLeftIcon: formatAlignLeftIcon,
+          formatAlignCenterIcon: formatAlignCenterIcon,
+          formatAlignRightIcon: formatAlignRightIcon,
+          formatAlignJustifyIcon: formatAlignJustifyIcon,
+          formatBoldIcon: formatBoldIcon,
+          formatItalicIcon: formatItalicIcon
         }), /*#__PURE__*/_react["default"].createElement(CustomFontOverlayComponent, {
           onClose: function onClose() {
             return toggleCustomFontOverlay(false);
@@ -319,7 +339,11 @@ var DesignerSelectionToolbox = function DesignerSelectionToolbox(props) {
           _handleObjectButtonClick(evt, canvas, onMoveUpClick, onMoveDownClick);
         },
         flipToBackDisabled: selectedObject.isFirst,
-        flipToFrontDisabled: selectedObject.isLast
+        flipToFrontDisabled: selectedObject.isLast,
+        alignVerticalCenterIcon: alignVerticalCenterIcon,
+        alignHorizontalCenterIcon: alignHorizontalCenterIcon,
+        moveDownIcon: moveDownIcon,
+        moveUpIcon: moveUpIcon
       });
     } else {
       // do not show control box for unknown object types

package/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -159,7 +159,11 @@ var ImageControlbox = /*#__PURE__*/function (_React$Component) {
         printQuality = _this$props2.printQuality,
         handleObjectButtonClick = _this$props2.handleObjectButtonClick,
         flipToFrontDisabled = _this$props2.flipToFrontDisabled,
-        flipToBackDisabled = _this$props2.flipToBackDisabled;
+        flipToBackDisabled = _this$props2.flipToBackDisabled,
+        alignVerticalCenterIcon = _this$props2.alignVerticalCenterIcon,
+        alignHorizontalCenterIcon = _this$props2.alignHorizontalCenterIcon,
+        moveDownIcon = _this$props2.moveDownIcon,
+        moveUpIcon = _this$props2.moveUpIcon;
       var printQualityInfoDialogOpen = this.state.printQualityInfoDialogOpen;
       var printQualityInfoExists = (0, _i18n.translationExists)('imageControlbox.printQuality.' + this.props.printQuality);
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
@@ -200,7 +204,11 @@ var ImageControlbox = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_ObjectTools["default"], {
         handleObjectButtonClick: handleObjectButtonClick,
         flipToFrontDisabled: flipToFrontDisabled,
-        flipToBackDisabled: flipToBackDisabled
+        flipToBackDisabled: flipToBackDisabled,
+        alignVerticalCenterIcon: alignVerticalCenterIcon,
+        alignHorizontalCenterIcon: alignHorizontalCenterIcon,
+        moveDownIcon: moveDownIcon,
+        moveUpIcon: moveUpIcon
       })), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 2,

package/App/Modules/Designer/Components/ImageEditDialog/ImageUpload.js

@@ -364,7 +364,11 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
         classes = _this$props2.classes,
         width = _this$props2.width,
-        checkOwnership = _this$props2.checkOwnership;
+        checkOwnership = _this$props2.checkOwnership,
+        imageIcon = _this$props2.imageIcon,
+        checkIcon = _this$props2.checkIcon,
+        errorIcon = _this$props2.errorIcon,
+        loopIcon = _this$props2.loopIcon;
       var _this$state2 = this.state,
         ownershipChecked = _this$state2.ownershipChecked,
         ownershipErrorVisible = _this$state2.ownershipErrorVisible,
@@ -381,7 +385,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         ref: this.dropZone
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.imageUploadContainer
-      }, selectedFile === null && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      }, selectedFile === null && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imageIcon !== null && imageIcon !== void 0 ? imageIcon : /*#__PURE__*/_react["default"].createElement(_Image["default"], {
         className: classes.imageUploadIcon
       }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.imageUploadText,
@@ -400,12 +404,12 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         src: imageData.src
       }), error === null ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.uploadTextIconContainer
-      }, /*#__PURE__*/_react["default"].createElement(_CheckCircle["default"], {
+      }, checkIcon !== null && checkIcon !== void 0 ? checkIcon : /*#__PURE__*/_react["default"].createElement(_CheckCircle["default"], {
         className: "\n                                                ".concat(classes.imageUploadIcon, "\n                                                ").concat(classes.imageUploadIconSuccess, "\n                                            ")
       }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "body2",
         className: classes.imageUploadTextSuccess
-      }, selectedFile.name)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+      }, selectedFile.name)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, errorIcon !== null && errorIcon !== void 0 ? errorIcon : /*#__PURE__*/_react["default"].createElement(_Error["default"], {
         className: classes.imageUploadIconError
       }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "body2",
@@ -417,7 +421,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick() {},
         variant: "text",
         className: "".concat(classes.imageUploadButton, " ").concat(classes.imageUploadChangeImageButton)
-      }, /*#__PURE__*/_react["default"].createElement(_Loop["default"], null), " ", (0, _i18n.t)('fileUpload.changeImage'), /*#__PURE__*/_react["default"].createElement("input", {
+      }, loopIcon !== null && loopIcon !== void 0 ? loopIcon : /*#__PURE__*/_react["default"].createElement(_Loop["default"], null), " ", (0, _i18n.t)('fileUpload.changeImage'), /*#__PURE__*/_react["default"].createElement("input", {
         type: "file",
         accept: this.getAllowedImageFormats(),
         onChange: this.handleInputChange

package/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -421,7 +421,12 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         uploadImage = _this$props2.uploadImage,
         selectUserImage = _this$props2.selectUserImage,
         showUploadPanel = _this$props2.showUploadPanel,
-        uploadDelayed = _this$props2.uploadDelayed;
+        uploadDelayed = _this$props2.uploadDelayed,
+        loopIcon = _this$props2.loopIcon,
+        colorizeIcon = _this$props2.colorizeIcon,
+        formatPaintIcon = _this$props2.formatPaintIcon,
+        photoLibraryIcon = _this$props2.photoLibraryIcon,
+        addIcon = _this$props2.addIcon;
       var userImagesIndex = this.state.userImagesIndex;
       var userImagesIndexes = [];
       for (var i = userImagesIndex; i < userImages.length && i < userImagesIndex + 3; i++) {
@@ -499,16 +504,16 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         textColor: "primary",
         variant: (0, _withWidth.isWidthDown)('xs', width) ? 'fullWidth' : 'standard'
       }, /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_Loop["default"], null),
+        icon: loopIcon !== null && loopIcon !== void 0 ? loopIcon : /*#__PURE__*/_react["default"].createElement(_Loop["default"], null),
         className: classes.imageTab,
         label: (0, _i18n.t)('imageEditDialog.changeFile')
       }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_Colorize["default"], null),
+        icon: colorizeIcon !== null && colorizeIcon !== void 0 ? colorizeIcon : /*#__PURE__*/_react["default"].createElement(_Colorize["default"], null),
         className: classes.imageTab,
         label: (0, _i18n.t)('imageEditDialog.background'),
         disabled: image && image.gallery
       }), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
-        icon: /*#__PURE__*/_react["default"].createElement(_FormatPaint["default"], null),
+        icon: formatPaintIcon !== null && formatPaintIcon !== void 0 ? formatPaintIcon : /*#__PURE__*/_react["default"].createElement(_FormatPaint["default"], null),
         className: classes.imageTab,
         label: (0, _i18n.t)('imageEditDialog.colorize'),
         disabled: colorDisabled
@@ -556,7 +561,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         variant: "outlined",
         className: classes.imageSelectButton,
         fullWidth: (0, _withWidth.isWidthDown)('sm', width)
-      }, /*#__PURE__*/_react["default"].createElement(_PhotoLibrary["default"], {
+      }, photoLibraryIcon !== null && photoLibraryIcon !== void 0 ? photoLibraryIcon : /*#__PURE__*/_react["default"].createElement(_PhotoLibrary["default"], {
         className: classes.iconButton
       }), /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.buttonContent
@@ -569,7 +574,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
         variant: "outlined",
         className: classes.imageSelectButton,
         fullWidth: (0, _withWidth.isWidthDown)('sm', width)
-      }, /*#__PURE__*/_react["default"].createElement(_AddBox["default"], {
+      }, addIcon !== null && addIcon !== void 0 ? addIcon : /*#__PURE__*/_react["default"].createElement(_AddBox["default"], {
         className: classes.iconButton
       }), /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.buttonContent
@@ -609,7 +614,7 @@ var ImageEditDialog = /*#__PURE__*/function (_React$Component) {
       })))), colorPickerEnabled && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "caption",
         className: classes.colorizeCaption
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("i", null, (0, _i18n.t)((0, _withWidth.isWidthDown)('xs', width) ? 'fileUpload.tabColorForRemove' : 'fileUpload.chooseColorForRemove')))), activeTabIndex === 2 && /*#__PURE__*/_react["default"].createElement("div", {
+      }, colorizeIcon !== null && colorizeIcon !== void 0 ? colorizeIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "colorize"), /*#__PURE__*/_react["default"].createElement("i", null, (0, _i18n.t)((0, _withWidth.isWidthDown)('xs', width) ? 'fileUpload.tabColorForRemove' : 'fileUpload.chooseColorForRemove')))), activeTabIndex === 2 && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.TabContent
       }, imageColorizeElement)))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], {
         className: classes.imageUploadSpacing

package/App/Modules/Designer/Components/ObjectTools/index.js

@@ -55,7 +55,11 @@ var ObjectTools = /*#__PURE__*/function (_React$Component) {
         classes = _this$props.classes,
         handleObjectButtonClick = _this$props.handleObjectButtonClick,
         flipToBackDisabled = _this$props.flipToBackDisabled,
-        flipToFrontDisabled = _this$props.flipToFrontDisabled;
+        flipToFrontDisabled = _this$props.flipToFrontDisabled,
+        alignVerticalCenterIcon = _this$props.alignVerticalCenterIcon,
+        alignHorizontalCenterIcon = _this$props.alignHorizontalCenterIcon,
+        moveDownIcon = _this$props.moveDownIcon,
+        moveUpIcon = _this$props.moveUpIcon;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
         targetId: "align_horizontal_center"
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -65,7 +69,7 @@ var ObjectTools = /*#__PURE__*/function (_React$Component) {
         onClick: handleObjectButtonClick
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
         title: (0, _i18n.t)('objectTools.alignHorizontalCenter')
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+      }, alignHorizontalCenterIcon !== null && alignHorizontalCenterIcon !== void 0 ? alignHorizontalCenterIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
         targetId: "align_vertical_center"
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         className: classes.toolButtonPositioning + ' object-btn',
@@ -74,7 +78,7 @@ var ObjectTools = /*#__PURE__*/function (_React$Component) {
         onClick: handleObjectButtonClick
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
         title: (0, _i18n.t)('objectTools.alignVerticalCenter')
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      }, alignVerticalCenterIcon !== null && alignVerticalCenterIcon !== void 0 ? alignVerticalCenterIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         style: {
           transform: 'rotate(90deg)'
         }
@@ -88,7 +92,7 @@ var ObjectTools = /*#__PURE__*/function (_React$Component) {
         disabled: flipToBackDisabled
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
         title: (0, _i18n.t)('objectTools.moveDown')
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip_to_back")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+      }, moveDownIcon !== null && moveDownIcon !== void 0 ? moveDownIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip_to_back")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
         targetId: "align_move_up"
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         className: classes.toolButtonPositioning + ' object-btn',
@@ -98,7 +102,7 @@ var ObjectTools = /*#__PURE__*/function (_React$Component) {
         disabled: flipToFrontDisabled
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
         title: (0, _i18n.t)('objectTools.moveUp')
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip_to_front")))));
+      }, moveUpIcon !== null && moveUpIcon !== void 0 ? moveUpIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "flip_to_front")))));
     }
   }]);
   return ObjectTools;

package/App/Modules/Designer/Components/TextControlbox/index.js

@@ -286,7 +286,17 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
         color = _this$props2.color,
         selectedObject = _this$props2.selectedObject,
         FontFamilySelect = _this$props2.components.FontFamilySelect,
-        isPortraitMode = _this$props2.isPortraitMode;
+        isPortraitMode = _this$props2.isPortraitMode,
+        alignVerticalCenterIcon = _this$props2.alignVerticalCenterIcon,
+        alignHorizontalCenterIcon = _this$props2.alignHorizontalCenterIcon,
+        moveDownIcon = _this$props2.moveDownIcon,
+        moveUpIcon = _this$props2.moveUpIcon,
+        formatAlignLeftIcon = _this$props2.formatAlignLeftIcon,
+        formatAlignCenterIcon = _this$props2.formatAlignCenterIcon,
+        formatAlignRightIcon = _this$props2.formatAlignRightIcon,
+        formatAlignJustifyIcon = _this$props2.formatAlignJustifyIcon,
+        formatBoldIcon = _this$props2.formatBoldIcon,
+        formatItalicIcon = _this$props2.formatItalicIcon;
       var textAlignFullEnabled = false;
       var renderEditor = function renderEditor() {
         return renderEditorComponent ? /*#__PURE__*/_react["default"].createElement(ContainerField, {
@@ -376,7 +386,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           disabled: boldDisabled
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           title: (0, _i18n.t)('textControlbox.tooltips.bold')
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_bold")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        }, formatBoldIcon !== null && formatBoldIcon !== void 0 ? formatBoldIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_bold")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           targetId: "text_italic"
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           className: classes.textToolButton + (isItalic ? ' ' + classes.textToolButtonPressed : ''),
@@ -387,7 +397,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           disabled: italicDisabled
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           title: (0, _i18n.t)('textControlbox.tooltips.italic')
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_italic")))));
+        }, formatItalicIcon !== null && formatItalicIcon !== void 0 ? formatItalicIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_italic")))));
       };
       var renderTextAlignments = function renderTextAlignments() {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
@@ -400,7 +410,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           onClick: handleButtonClick
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           title: (0, _i18n.t)('textControlbox.tooltips.alignLeft')
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_left")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        }, formatAlignLeftIcon !== null && formatAlignLeftIcon !== void 0 ? formatAlignLeftIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_left")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           targetId: "text_align_center"
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           className: classes.textToolButton + ' ' + classes.textToolButtonAlignment + (textAlign === 'center' ? ' ' + classes.textToolButtonPressed : ''),
@@ -410,7 +420,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           onClick: handleButtonClick
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           title: (0, _i18n.t)('textControlbox.tooltips.alignCenter')
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_center")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        }, formatAlignCenterIcon !== null && formatAlignCenterIcon !== void 0 ? formatAlignCenterIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_center")))), /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           targetId: "text_align_right"
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           className: classes.textToolButton + ' ' + classes.textToolButtonAlignment + (textAlign === 'right' ? ' ' + classes.textToolButtonPressed : ''),
@@ -420,7 +430,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           onClick: handleButtonClick
         }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
           title: (0, _i18n.t)('textControlbox.tooltips.alignRight')
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_right")))), textAlignFullEnabled && /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+        }, formatAlignRightIcon !== null && formatAlignRightIcon !== void 0 ? formatAlignRightIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_right")))), textAlignFullEnabled && /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
           targetId: "text_align_justify"
         }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           className: classes.textToolButton + ' ' + classes.textToolButtonAlignment + (textAlign === 'full' ? ' ' + classes.textToolButtonPressed : ''),
@@ -428,7 +438,7 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
           value: "justifyFull",
           onMouseDown: handleButtonMouseDown,
           onClick: handleButtonClick
-        }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_justify"))));
+        }, formatAlignJustifyIcon !== null && formatAlignJustifyIcon !== void 0 ? formatAlignJustifyIcon : /*#__PURE__*/_react["default"].createElement(_Icon["default"], null, "format_align_justify"))));
       };
       var renderTextColor = function renderTextColor() {
         return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -456,7 +466,11 @@ var TextControlbox = /*#__PURE__*/function (_React$Component2) {
         return /*#__PURE__*/_react["default"].createElement(_ObjectTools["default"], {
           handleObjectButtonClick: handleObjectButtonClick,
           flipToFrontDisabled: flipToFrontDisabled,
-          flipToBackDisabled: flipToBackDisabled
+          flipToBackDisabled: flipToBackDisabled,
+          alignVerticalCenterIcon: alignVerticalCenterIcon,
+          alignHorizontalCenterIcon: alignHorizontalCenterIcon,
+          moveDownIcon: moveDownIcon,
+          moveUpIcon: moveUpIcon
         });
       };
       return width === 'xs' ? /*#__PURE__*/_react["default"].createElement(_Card["default"], {

package/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -754,7 +754,15 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
         checkOwnership = _this$props6.checkOwnership,
         designProductionMethod = _this$props6.designProductionMethod,
         client = _this$props6.client,
-        uploadDelayed = _this$props6.uploadDelayed;
+        uploadDelayed = _this$props6.uploadDelayed,
+        loopIcon = _this$props6.loopIcon,
+        colorizeIcon = _this$props6.colorizeIcon,
+        formatPaintIcon = _this$props6.formatPaintIcon,
+        photoLibraryIcon = _this$props6.photoLibraryIcon,
+        addIcon = _this$props6.addIcon,
+        imageIcon = _this$props6.imageIcon,
+        checkIcon = _this$props6.checkIcon,
+        errorIcon = _this$props6.errorIcon;
       var _this$state3 = this.state,
         preview = _this$state3.preview,
         clipping = _this$state3.clipping,
@@ -839,8 +847,17 @@ var ImageEditDialogContainer = exports.ImageEditDialogContainer = /*#__PURE__*/f
             _this2.setUpload(null);
             _this2.onActiveTabChange(1);
           },
-          checkOwnership: checkOwnership
-        })
+          checkOwnership: checkOwnership,
+          imageIcon: imageIcon,
+          checkIcon: checkIcon,
+          errorIcon: errorIcon,
+          loopIcon: loopIcon
+        }),
+        loopIcon: loopIcon,
+        colorizeIcon: colorizeIcon,
+        formatPaintIcon: formatPaintIcon,
+        photoLibraryIcon: photoLibraryIcon,
+        addIcon: addIcon
       })), /*#__PURE__*/_react["default"].createElement(_AddGalleryImage["default"], {
         open: this.state.showAddImagePanel,
         onClose: this.closeAddImagePanel,

package/App/Reducers/Configurator/Actions.js

@@ -861,9 +861,11 @@ var getSwitchOptionData = function getSwitchOptionData(optionsList) {
       var component = _step4.value;
       switchOptionData[component.identifier] = component.selectedoptions.map(function (_ref5) {
         var identifier = _ref5.identifier,
-          amount = _ref5.amount;
+          amount = _ref5.amount,
+          inputText = _ref5.inputText;
         return {
           identifier: identifier,
+          inputText: inputText,
           amount: typeof amount === 'undefined' ? 1 : amount,
           check_results: null
         };

package/App/Shared/Components/SaveConfiguration/index.js

@@ -13,13 +13,16 @@ var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogAct
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
 var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _Error2 = _interopRequireDefault(require("@material-ui/icons/Error"));
 var _MainButton = _interopRequireDefault(require("../../../../Shared/Components/MainButton"));
 var _CustomDialog = _interopRequireDefault(require("../../../../Shared/Components/CustomDialog"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 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, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -112,31 +115,52 @@ var SaveConfiguration = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onCopyShareUrl", function (shareUrl) {
-      try {
-        navigator.clipboard.writeText(shareUrl);
-      } catch (err) {
-        // clipboard api only available in secure contexts (localhost, htttps) and modern(ish) browsers
-        var textArea = document.createElement('textarea');
-        textArea.textContent = shareUrl;
-        textArea.style.position = 'fixed'; //avoid scrolling to bottom
-        document.body.appendChild(textArea);
-        var selection = document.getSelection();
-        var range = document.createRange();
-        range.selectNode(textArea);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        try {
-          document.execCommand('copy');
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.log('Configuration link could not be copied: ', err);
-        } finally {
-          selection.removeAllRanges();
-          document.body.removeChild(textArea);
-        }
-      }
-    });
+    _defineProperty(_assertThisInitialized(_this), "onCopyShareUrl", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(shareUrl) {
+        var textArea, selection, range;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return navigator.clipboard.writeText(shareUrl);
+            case 3:
+              _context.next = 18;
+              break;
+            case 5:
+              _context.prev = 5;
+              _context.t0 = _context["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error('Error while using the clipboard api:', _context.t0);
+              // clipboard api only available in secure contexts (localhost, htttps) and modern(ish) browsers
+              textArea = document.createElement('textarea');
+              textArea.textContent = shareUrl;
+              textArea.style.position = 'fixed'; //avoid scrolling to bottom
+              document.body.appendChild(textArea);
+              selection = document.getSelection();
+              range = document.createRange();
+              range.selectNode(textArea);
+              selection.removeAllRanges();
+              selection.addRange(range);
+              try {
+                document.execCommand('copy');
+              } catch (err) {
+                // eslint-disable-next-line no-console
+                console.log('Configuration link could not be copied: ', err);
+              } finally {
+                selection.removeAllRanges();
+                document.body.removeChild(textArea);
+              }
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 5]]);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
     return _this;
   }
   _createClass(SaveConfiguration, [{
@@ -174,7 +198,7 @@ var SaveConfiguration = /*#__PURE__*/function (_React$Component) {
         id: "alert-dialog-description"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.errorResult
-      }, /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Error2["default"], {
         className: classes.errorResultIcon
       }), (0, _i18n.t)(errorMessage))), !workInProgress && code && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         variant: "body1",

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.47.11",
+  "version": "1.48.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.47.11",
+    "@configuratorware/scripts": "1.48.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.47.11",
-    "redhotmagma-visualization": "1.47.11",
+    "redhotmagma-graphics-editor": "1.48.0",
+    "redhotmagma-visualization": "1.48.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Modules/Designer/Components/DesignerSelectionToolbox/DesignerSelectionToolbox.js

@@ -134,6 +134,16 @@ const DesignerSelectionToolbox = props => {
         loadFonts,
         initialColor,
         autoFocusEditor,
+        alignVerticalCenterIcon,
+        alignHorizontalCenterIcon,
+        moveDownIcon,
+        moveUpIcon,
+        formatAlignLeftIcon,
+        formatAlignCenterIcon,
+        formatAlignRightIcon,
+        formatAlignJustifyIcon,
+        formatBoldIcon,
+        formatItalicIcon,
     } = props;
 
     const rteRef = useRef(null);
@@ -335,6 +345,16 @@ const DesignerSelectionToolbox = props => {
                                                         isBulkName,
                                                     });
                                                 }}
+                                                alignVerticalCenterIcon={alignVerticalCenterIcon}
+                                                alignHorizontalCenterIcon={alignHorizontalCenterIcon}
+                                                moveDownIcon={moveDownIcon}
+                                                moveUpIcon={moveUpIcon}
+                                                formatAlignLeftIcon={formatAlignLeftIcon}
+                                                formatAlignCenterIcon={formatAlignCenterIcon}
+                                                formatAlignRightIcon={formatAlignRightIcon}
+                                                formatAlignJustifyIcon={formatAlignJustifyIcon}
+                                                formatBoldIcon={formatBoldIcon}
+                                                formatItalicIcon={formatItalicIcon}
                                             />
                                             <CustomFontOverlayComponent
                                                 onClose={() => toggleCustomFontOverlay(false)}
@@ -370,6 +390,10 @@ const DesignerSelectionToolbox = props => {
                                 }}
                                 flipToBackDisabled={selectedObject.isFirst}
                                 flipToFrontDisabled={selectedObject.isLast}
+                                alignVerticalCenterIcon={alignVerticalCenterIcon}
+                                alignHorizontalCenterIcon={alignHorizontalCenterIcon}
+                                moveDownIcon={moveDownIcon}
+                                moveUpIcon={moveUpIcon}
                             />
                         );
                     } else {
@@ -404,6 +428,16 @@ DesignerSelectionToolbox.propTypes = {
     defaultFont: PropTypes.object,
     initialColor: PropTypes.object,
     autoFocusEditor: PropTypes.bool,
+    alignVerticalCenterIcon: PropTypes.element,
+    alignHorizontalCenterIcon: PropTypes.element,
+    moveDownIcon: PropTypes.element,
+    moveUpIcon: PropTypes.element,
+    formatAlignLeftIcon: PropTypes.element,
+    formatAlignCenterIcon: PropTypes.element,
+    formatAlignRightIcon: PropTypes.element,
+    formatAlignJustifyIcon: PropTypes.element,
+    formatBoldIcon: PropTypes.element,
+    formatItalicIcon: PropTypes.element,
 };
 
 DesignerSelectionToolbox.defaultProps = {

package/src/App/Modules/Designer/Components/ImageControlbox/index.js

@@ -113,6 +113,10 @@ class ImageControlbox extends React.Component {
         flipToFrontDisabled: PropTypes.bool,
         flipToBackDisabled: PropTypes.bool,
         canvas: PropTypes.object,
+        alignVerticalCenterIcon: PropTypes.element,
+        alignHorizontalCenterIcon: PropTypes.element,
+        moveDownIcon: PropTypes.element,
+        moveUpIcon: PropTypes.element,
     };
 
     constructor(props) {
@@ -148,6 +152,10 @@ class ImageControlbox extends React.Component {
             handleObjectButtonClick,
             flipToFrontDisabled,
             flipToBackDisabled,
+            alignVerticalCenterIcon,
+            alignHorizontalCenterIcon,
+            moveDownIcon,
+            moveUpIcon,
         } = this.props;
 
         const { printQualityInfoDialogOpen } = this.state;
@@ -203,6 +211,10 @@ class ImageControlbox extends React.Component {
                                     handleObjectButtonClick={handleObjectButtonClick}
                                     flipToFrontDisabled={flipToFrontDisabled}
                                     flipToBackDisabled={flipToBackDisabled}
+                                    alignVerticalCenterIcon={alignVerticalCenterIcon}
+                                    alignHorizontalCenterIcon={alignHorizontalCenterIcon}
+                                    moveDownIcon={moveDownIcon}
+                                    moveUpIcon={moveUpIcon}
                                 />
                             </Grid>
                             <Grid item xs={2} md={4} lg={4}>

package/src/App/Modules/Designer/Components/ImageEditDialog/ImageUpload.js

@@ -177,6 +177,10 @@ class ImageEditDialog extends React.Component {
         onUploadFinished: PropTypes.func,
         width: PropTypes.string,
         checkOwnership: PropTypes.bool,
+        imageIcon: PropTypes.element,
+        checkIcon: PropTypes.element,
+        errorIcon: PropTypes.element,
+        loopIcon: PropTypes.element,
     };
 
     static defaultProps = {
@@ -313,7 +317,7 @@ class ImageEditDialog extends React.Component {
     };
 
     render() {
-        const { classes, width, checkOwnership } = this.props;
+        const { classes, width, checkOwnership, imageIcon, checkIcon, errorIcon, loopIcon } = this.props;
         const { ownershipChecked, ownershipErrorVisible, selectedFile, error, imageData } = this.state;
 
         return (
@@ -327,7 +331,7 @@ class ImageEditDialog extends React.Component {
                     <div className={classes.imageUploadContainer}>
                         {selectedFile === null && (
                             <React.Fragment>
-                                <ImageIcon className={classes.imageUploadIcon} />
+                                {imageIcon ?? <ImageIcon className={classes.imageUploadIcon} />}
                                 <Typography className={classes.imageUploadText} variant="body2">
                                     {t(
                                         isWidthDown('sm', width)
@@ -362,12 +366,14 @@ class ImageEditDialog extends React.Component {
                                 )}
                                 {error === null ? (
                                     <div className={classes.uploadTextIconContainer}>
-                                        <CheckCircleIcon
-                                            className={`
+                                        {checkIcon ?? (
+                                            <CheckCircleIcon
+                                                className={`
                                                 ${classes.imageUploadIcon}
                                                 ${classes.imageUploadIconSuccess}
                                             `}
-                                        />
+                                            />
+                                        )}
                                         <Typography
                                             variant="body2"
                                             className={classes.imageUploadTextSuccess}
@@ -377,7 +383,7 @@ class ImageEditDialog extends React.Component {
                                     </div>
                                 ) : (
                                     <React.Fragment>
-                                        <ErrorIcon className={classes.imageUploadIconError} />
+                                        {errorIcon ?? <ErrorIcon className={classes.imageUploadIconError} />}
                                         <Typography
                                             variant="body2"
                                             className={`
@@ -401,7 +407,7 @@ class ImageEditDialog extends React.Component {
                                     variant="text"
                                     className={`${classes.imageUploadButton} ${classes.imageUploadChangeImageButton}`}
                                 >
-                                    <LoopIcon /> {t('fileUpload.changeImage')}
+                                    {loopIcon ?? <LoopIcon />} {t('fileUpload.changeImage')}
                                     <input
                                         type="file"
                                         accept={this.getAllowedImageFormats()}

package/src/App/Modules/Designer/Components/ImageEditDialog/index.js

@@ -380,6 +380,11 @@ class ImageEditDialog extends React.Component {
         onNewUploadClick: PropTypes.func.isRequired,
         uploadImage: PropTypes.func.isRequired,
         selectUserImage: PropTypes.func.isRequired,
+        loopIcon: PropTypes.element,
+        colorizeIcon: PropTypes.element,
+        formatPaintIcon: PropTypes.element,
+        photoLibraryIcon: PropTypes.element,
+        addIcon: PropTypes.element,
     };
 
     constructor(props) {
@@ -481,6 +486,11 @@ class ImageEditDialog extends React.Component {
             selectUserImage,
             showUploadPanel,
             uploadDelayed,
+            loopIcon,
+            colorizeIcon,
+            formatPaintIcon,
+            photoLibraryIcon,
+            addIcon,
         } = this.props;
 
         const { userImagesIndex } = this.state;
@@ -629,18 +639,18 @@ class ImageEditDialog extends React.Component {
                                     variant={isWidthDown('xs', width) ? 'fullWidth' : 'standard'}
                                 >
                                     <Tab
-                                        icon={<LoopIcon />}
+                                        icon={loopIcon ?? <LoopIcon />}
                                         className={classes.imageTab}
                                         label={t('imageEditDialog.changeFile')}
                                     />
                                     <Tab
-                                        icon={<ColorizeIcon />}
+                                        icon={colorizeIcon ?? <ColorizeIcon />}
                                         className={classes.imageTab}
                                         label={t('imageEditDialog.background')}
                                         disabled={image && image.gallery}
                                     />
                                     <Tab
-                                        icon={<FormatPaintIcon />}
+                                        icon={formatPaintIcon ?? <FormatPaintIcon />}
                                         className={classes.imageTab}
                                         label={t('imageEditDialog.colorize')}
                                         disabled={colorDisabled}
@@ -710,7 +720,9 @@ class ImageEditDialog extends React.Component {
                                                     className={classes.imageSelectButton}
                                                     fullWidth={isWidthDown('sm', width)}
                                                 >
-                                                    <PhotoLibrary className={classes.iconButton} />
+                                                    {photoLibraryIcon ?? (
+                                                        <PhotoLibrary className={classes.iconButton} />
+                                                    )}
                                                     <span className={classes.buttonContent}>
                                                         {t('imageEditDialog.selectFromGallery')}
                                                     </span>
@@ -725,7 +737,7 @@ class ImageEditDialog extends React.Component {
                                                     className={classes.imageSelectButton}
                                                     fullWidth={isWidthDown('sm', width)}
                                                 >
-                                                    <AddBox className={classes.iconButton} />
+                                                    {addIcon ?? <AddBox className={classes.iconButton} />}
                                                     <span className={classes.buttonContent}>
                                                         {t('imageEditDialog.uploadNewImage')}
                                                     </span>
@@ -775,7 +787,7 @@ class ImageEditDialog extends React.Component {
                                     </FormControl>
                                     {colorPickerEnabled && (
                                         <Typography variant="caption" className={classes.colorizeCaption}>
-                                            <Icon>colorize</Icon>
+                                            {colorizeIcon ?? <Icon>colorize</Icon>}
                                             <i>
                                                 {t(
                                                     isWidthDown('xs', width)

package/src/App/Modules/Designer/Components/ObjectTools/index.js

@@ -28,10 +28,23 @@ class ObjectTools extends React.Component {
         handleObjectButtonClick: PropTypes.func,
         flipToBackDisabled: PropTypes.bool,
         flipToFrontDisabled: PropTypes.bool,
+        alignVerticalCenterIcon: PropTypes.element,
+        alignHorizontalCenterIcon: PropTypes.element,
+        moveDownIcon: PropTypes.element,
+        moveUpIcon: PropTypes.element,
     };
 
     render() {
-        const { classes, handleObjectButtonClick, flipToBackDisabled, flipToFrontDisabled } = this.props;
+        const {
+            classes,
+            handleObjectButtonClick,
+            flipToBackDisabled,
+            flipToFrontDisabled,
+            alignVerticalCenterIcon,
+            alignHorizontalCenterIcon,
+            moveDownIcon,
+            moveUpIcon,
+        } = this.props;
 
         return (
             <React.Fragment>
@@ -43,7 +56,7 @@ class ObjectTools extends React.Component {
                         onClick={handleObjectButtonClick}
                     >
                         <Tooltip title={t('objectTools.alignHorizontalCenter')}>
-                            <Icon>flip</Icon>
+                            {alignHorizontalCenterIcon ?? <Icon>flip</Icon>}
                         </Tooltip>
                     </Button>
                 </AnalyticsWrapper>
@@ -55,7 +68,9 @@ class ObjectTools extends React.Component {
                         onClick={handleObjectButtonClick}
                     >
                         <Tooltip title={t('objectTools.alignVerticalCenter')}>
-                            <Icon style={{ transform: 'rotate(90deg)' }}>flip</Icon>
+                            {alignVerticalCenterIcon ?? (
+                                <Icon style={{ transform: 'rotate(90deg)' }}>flip</Icon>
+                            )}
                         </Tooltip>
                     </Button>
                 </AnalyticsWrapper>
@@ -68,7 +83,7 @@ class ObjectTools extends React.Component {
                         disabled={flipToBackDisabled}
                     >
                         <Tooltip title={t('objectTools.moveDown')}>
-                            <Icon>flip_to_back</Icon>
+                            {moveDownIcon ?? <Icon>flip_to_back</Icon>}
                         </Tooltip>
                     </Button>
                 </AnalyticsWrapper>
@@ -81,7 +96,7 @@ class ObjectTools extends React.Component {
                         disabled={flipToFrontDisabled}
                     >
                         <Tooltip title={t('objectTools.moveUp')}>
-                            <Icon>flip_to_front</Icon>
+                            {moveUpIcon ?? <Icon>flip_to_front</Icon>}
                         </Tooltip>
                     </Button>
                 </AnalyticsWrapper>

package/src/App/Modules/Designer/Components/TextControlbox/index.js

@@ -250,6 +250,16 @@ class TextControlbox extends React.Component {
         components: PropTypes.shape({
             FontFamilySelect: PropTypes.elementType.isRequired,
         }).isRequired,
+        alignVerticalCenterIcon: PropTypes.element,
+        alignHorizontalCenterIcon: PropTypes.element,
+        moveDownIcon: PropTypes.element,
+        moveUpIcon: PropTypes.element,
+        formatAlignLeftIcon: PropTypes.element,
+        formatAlignCenterIcon: PropTypes.element,
+        formatAlignRightIcon: PropTypes.element,
+        formatAlignJustifyIcon: PropTypes.element,
+        formatBoldIcon: PropTypes.element,
+        formatItalicIcon: PropTypes.element,
     };
 
     static defaultProps = {
@@ -297,6 +307,16 @@ class TextControlbox extends React.Component {
             selectedObject,
             components: { FontFamilySelect },
             isPortraitMode,
+            alignVerticalCenterIcon,
+            alignHorizontalCenterIcon,
+            moveDownIcon,
+            moveUpIcon,
+            formatAlignLeftIcon,
+            formatAlignCenterIcon,
+            formatAlignRightIcon,
+            formatAlignJustifyIcon,
+            formatBoldIcon,
+            formatItalicIcon,
         } = this.props;
         const textAlignFullEnabled = false;
 
@@ -408,7 +428,7 @@ class TextControlbox extends React.Component {
                             disabled={boldDisabled}
                         >
                             <Tooltip title={t('textControlbox.tooltips.bold')}>
-                                <Icon>format_bold</Icon>
+                                {formatBoldIcon ?? <Icon>format_bold</Icon>}
                             </Tooltip>
                         </Button>
                     </AnalyticsWrapper>
@@ -424,7 +444,7 @@ class TextControlbox extends React.Component {
                             disabled={italicDisabled}
                         >
                             <Tooltip title={t('textControlbox.tooltips.italic')}>
-                                <Icon>format_italic</Icon>
+                                {formatItalicIcon ?? <Icon>format_italic</Icon>}
                             </Tooltip>
                         </Button>
                     </AnalyticsWrapper>
@@ -450,7 +470,7 @@ class TextControlbox extends React.Component {
                             onClick={handleButtonClick}
                         >
                             <Tooltip title={t('textControlbox.tooltips.alignLeft')}>
-                                <Icon>format_align_left</Icon>
+                                {formatAlignLeftIcon ?? <Icon>format_align_left</Icon>}
                             </Tooltip>
                         </Button>
                     </AnalyticsWrapper>
@@ -468,7 +488,7 @@ class TextControlbox extends React.Component {
                             onClick={handleButtonClick}
                         >
                             <Tooltip title={t('textControlbox.tooltips.alignCenter')}>
-                                <Icon>format_align_center</Icon>
+                                {formatAlignCenterIcon ?? <Icon>format_align_center</Icon>}
                             </Tooltip>
                         </Button>
                     </AnalyticsWrapper>
@@ -486,7 +506,7 @@ class TextControlbox extends React.Component {
                             onClick={handleButtonClick}
                         >
                             <Tooltip title={t('textControlbox.tooltips.alignRight')}>
-                                <Icon>format_align_right</Icon>
+                                {formatAlignRightIcon ?? <Icon>format_align_right</Icon>}
                             </Tooltip>
                         </Button>
                     </AnalyticsWrapper>
@@ -504,7 +524,7 @@ class TextControlbox extends React.Component {
                                 onMouseDown={handleButtonMouseDown}
                                 onClick={handleButtonClick}
                             >
-                                <Icon>format_align_justify</Icon>
+                                {formatAlignJustifyIcon ?? <Icon>format_align_justify</Icon>}
                             </Button>
                         </AnalyticsWrapper>
                     )}
@@ -544,6 +564,10 @@ class TextControlbox extends React.Component {
                     handleObjectButtonClick={handleObjectButtonClick}
                     flipToFrontDisabled={flipToFrontDisabled}
                     flipToBackDisabled={flipToBackDisabled}
+                    alignVerticalCenterIcon={alignVerticalCenterIcon}
+                    alignHorizontalCenterIcon={alignHorizontalCenterIcon}
+                    moveDownIcon={moveDownIcon}
+                    moveUpIcon={moveUpIcon}
                 />
             );
         };

package/src/App/Modules/Designer/Containers/ImageEditDialog.js

@@ -129,6 +129,14 @@ export class ImageEditDialogContainer extends React.Component {
         client: PropTypes.object,
         designProductionMethod: PropTypes.object,
         uploadDelayed: PropTypes.bool,
+        loopIcon: PropTypes.element,
+        colorizeIcon: PropTypes.element,
+        formatPaintIcon: PropTypes.element,
+        photoLibraryIcon: PropTypes.element,
+        addIcon: PropTypes.element,
+        imageIcon: PropTypes.element,
+        checkIcon: PropTypes.element,
+        errorIcon: PropTypes.element,
     };
 
     static defaultProps = {
@@ -682,6 +690,14 @@ export class ImageEditDialogContainer extends React.Component {
             designProductionMethod,
             client,
             uploadDelayed,
+            loopIcon,
+            colorizeIcon,
+            formatPaintIcon,
+            photoLibraryIcon,
+            addIcon,
+            imageIcon,
+            checkIcon,
+            errorIcon,
         } = this.props;
         const {
             preview,
@@ -778,8 +794,17 @@ export class ImageEditDialogContainer extends React.Component {
                                 this.onActiveTabChange(1);
                             }}
                             checkOwnership={checkOwnership}
+                            imageIcon={imageIcon}
+                            checkIcon={checkIcon}
+                            errorIcon={errorIcon}
+                            loopIcon={loopIcon}
                         />
                     }
+                    loopIcon={loopIcon}
+                    colorizeIcon={colorizeIcon}
+                    formatPaintIcon={formatPaintIcon}
+                    photoLibraryIcon={photoLibraryIcon}
+                    addIcon={addIcon}
                 />
                 <AddGalleryImage
                     open={this.state.showAddImagePanel}

package/src/App/Reducers/Configurator/Actions.js

@@ -793,11 +793,14 @@ export const selectMultipleOptions = optionsList => (dispatch, getState) => {
 const getSwitchOptionData = optionsList => {
     const switchOptionData = {};
     for (const component of optionsList) {
-        switchOptionData[component.identifier] = component.selectedoptions.map(({ identifier, amount }) => ({
-            identifier,
-            amount: typeof amount === 'undefined' ? 1 : amount,
-            check_results: null,
-        }));
+        switchOptionData[component.identifier] = component.selectedoptions.map(
+            ({ identifier, amount, inputText }) => ({
+                identifier,
+                inputText,
+                amount: typeof amount === 'undefined' ? 1 : amount,
+                check_results: null,
+            })
+        );
     }
 
     return switchOptionData;

package/src/App/Shared/Components/SaveConfiguration/index.js

@@ -99,10 +99,12 @@ class SaveConfiguration extends React.Component {
     static defaultProps = {
         IconCopyShareUrl: FileCopy,
     };
-    onCopyShareUrl = shareUrl => {
+    onCopyShareUrl = async shareUrl => {
         try {
-            navigator.clipboard.writeText(shareUrl);
+            await navigator.clipboard.writeText(shareUrl);
         } catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('Error while using the clipboard api:', err);
             // clipboard api only available in secure contexts (localhost, htttps) and modern(ish) browsers
             const textArea = document.createElement('textarea');
             textArea.textContent = shareUrl;