cx 24.0.2 → 24.2.0

package/dist/ui.js

@@ -2895,7 +2895,7 @@ var subscribers$1,
 	eventBan = 0;
 function executeKeyboardShortcuts(e) {
 	if (Date.now() < eventBan) return;
-	//Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+	// Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
 	eventBan = Date.now() + 5;
 	subscribers$1 && subscribers$1.notify(e);
 }

package/dist/widgets.js

@@ -6410,6 +6410,55 @@ Label.prototype.baseClass = "label";
 Label.prototype.tag = "label";
 Label.prototype.asterisk = false;
 
+var FieldIcon = /*#__PURE__*/ (function (_Widget) {
+	_inheritsLoose(FieldIcon, _Widget);
+	function FieldIcon() {
+		return _Widget.apply(this, arguments) || this;
+	}
+	var _proto = FieldIcon.prototype;
+	_proto.declareData = function declareData() {
+		var _Widget$prototype$dec;
+		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+			args[_key] = arguments[_key];
+		}
+		(_Widget$prototype$dec = _Widget.prototype.declareData).call.apply(
+			_Widget$prototype$dec,
+			[this].concat(args, [
+				{
+					name: undefined,
+				},
+			]),
+		);
+	};
+	_proto.render = function render(context, instance, key) {
+		var _this = this;
+		var data = instance.data;
+		if (!data.name) return null;
+		var onClick, onMouseMove, onMouseLeave;
+		if (this.onClick)
+			onClick = function onClick(e) {
+				instance.invoke("onClick", e, instance);
+			};
+		if (this.tooltip) {
+			onMouseLeave = function onMouseLeave(e) {
+				tooltipMouseLeave$1(e, instance, _this.tooltip);
+			};
+			onMouseMove = function onMouseMove(e) {
+				tooltipMouseMove$1(e, instance, _this.tooltip);
+			};
+		}
+		return Icon.render(data.name, {
+			className: data.classNames,
+			style: data.style,
+			onClick: onClick,
+			onMouseMove: onMouseMove,
+			onMouseLeave: onMouseLeave,
+		});
+	};
+	return FieldIcon;
+})(Widget);
+FieldIcon.prototype.styled = true;
+
 var Field = /*#__PURE__*/ (function (_PureContainer) {
 	_inheritsLoose(Field, _PureContainer);
 	function Field() {
@@ -6451,6 +6500,11 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 		);
 	};
 	_proto.init = function init() {
+		this.inputStyle = parseStyle(this.inputStyle);
+		_PureContainer.prototype.init.call(this);
+	};
+	_proto.initComponents = function initComponents(context, instance) {
+		var _PureContainer$protot2;
 		if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
 			this.errorTooltip = _extends(
 				{
@@ -6497,17 +6551,21 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 			else Object.assign(labelConfig, this.label);
 			this.label = Label.create(labelConfig);
 		}
-		this.inputStyle = parseStyle(this.inputStyle);
-		_PureContainer.prototype.init.call(this);
-	};
-	_proto.initComponents = function initComponents(context, instance) {
-		var _PureContainer$protot2;
+		if (this.icon != null) {
+			var iconConfig = {
+				className: this.CSS.element(this.baseClass, "icon"),
+			};
+			if (isSelector(this.icon)) iconConfig.name = this.icon;
+			else Object.assign(iconConfig, this.icon);
+			this.icon = FieldIcon.create(iconConfig);
+		}
 		return (_PureContainer$protot2 = _PureContainer.prototype.initComponents).call.apply(
 			_PureContainer$protot2,
 			[this].concat(Array.prototype.slice.call(arguments), [
 				{
 					label: this.label,
 					help: this.help,
+					icon: this.icon,
 				},
 			]),
 		);
@@ -6694,6 +6752,9 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 	_proto.renderHelp = function renderHelp(context, instance, key) {
 		if (instance.components.help) return getContent(instance.components.help.render(context, key));
 	};
+	_proto.renderIcon = function renderIcon(context, instance, key) {
+		if (instance.components.icon) return getContent(instance.components.icon.render(context, key));
+	};
 	_proto.formatValue = function formatValue(context, _ref) {
 		var data = _ref.data;
 		return data.text || data.value;
@@ -6851,6 +6912,7 @@ var TextField = /*#__PURE__*/ (function (_Field) {
 				data: instance.data,
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
+				icon: this.renderIcon(context, instance, "icon"),
 			},
 			key,
 		);
@@ -6899,23 +6961,22 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 			instance = _this$props.instance,
 			data = _this$props.data,
 			label = _this$props.label,
-			help = _this$props.help;
+			help = _this$props.help,
+			iconVDOM = _this$props.icon;
 		var widget = instance.widget,
 			state = instance.state;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			suppressErrorsUntilVisited = widget.suppressErrorsUntilVisited;
 		var icon =
-			data.icon &&
+			iconVDOM &&
 			/*#__PURE__*/ jsx("div", {
 				className: CSS.element(baseClass, "left-icon"),
 				onMouseDown: preventDefault,
 				onClick: function onClick(e) {
-					return _this2.onChange(e, "enter");
+					return _this2.onChange(e.target.value, "enter");
 				},
-				children: Icon.render(data.icon, {
-					className: CSS.element(baseClass, "icon"),
-				}),
+				children: iconVDOM,
 			});
 		var insideButton;
 		if (
@@ -6977,10 +7038,10 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 							onMouseMove: this.onMouseMove.bind(this),
 							onMouseLeave: this.onMouseLeave.bind(this),
 							onInput: function onInput(e) {
-								return _this2.onChange(e, "input");
+								return _this2.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this2.onChange(e, "change");
+								return _this2.onChange(e.target.value, "change");
 							},
 							onKeyDown: this.onKeyDown.bind(this),
 							onFocus: this.onFocus.bind(this),
@@ -7019,7 +7080,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 			});
 			this.props.instance.set("focused", false);
 		}
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.onClearClick = function onClearClick(e) {
 		this.props.instance.set("value", this.props.instance.widget.emptyValue, {
@@ -7040,6 +7101,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.onKeyDown = function onKeyDown(e) {
@@ -7047,7 +7109,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (instance.widget.handleKeyDown(e, instance) === false) return;
 		switch (e.keyCode) {
 			case KeyCode.enter:
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.left:
 			case KeyCode.right:
@@ -7057,12 +7119,12 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 	};
 	_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
 		var data = props.data;
-		//the second check is required for debouncing, sometimes the value in the store lags after the input
-		//and update may be caused by some other property, i.e. visited
+		// The second check is required for debouncing, sometimes the value in the store lags after the input
+		// and update may be caused by some other property, i.e. visited
 		if (data.value != this.input.value && data.value != this.props.data.value) this.input.value = data.value || "";
 		tooltipParentWillReceiveProps$1.apply(void 0, [this.input].concat(getFieldTooltip(props.instance)));
 	};
-	_proto2.onChange = function onChange(e, change) {
+	_proto2.onChange = function onChange(textValue, change) {
 		var _this$props3 = this.props,
 			instance = _this$props3.instance,
 			data = _this$props3.data;
@@ -7074,7 +7136,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		var widget = instance.widget;
 		if (widget.reactOn.indexOf(change) != -1) {
-			var text = this.trimmed(e.target.value);
+			var text = this.trimmed(textValue);
 			if (data.maxLength != null && text.length > data.maxLength) {
 				text = text.substring(0, data.maxLength);
 				this.input.value = text;
@@ -7604,6 +7666,7 @@ var Select = /*#__PURE__*/ (function (_Field) {
 				},
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
+				icon: this.renderIcon(context, instance, "icon"),
 				children: this.renderChildren(context, instance),
 			},
 			key,
@@ -7655,19 +7718,18 @@ var SelectComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			select = _this$props.select,
 			instance = _this$props.instance,
 			label = _this$props.label,
-			help = _this$props.help;
+			help = _this$props.help,
+			iconVDOM = _this$props.icon;
 		var data = instance.data,
 			widget = instance.widget,
 			state = instance.state;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass;
 		var icon =
-			data.icon &&
+			iconVDOM &&
 			/*#__PURE__*/ jsx("div", {
 				className: CSS.element(baseClass, "left-icon"),
-				children: Icon.render(data.icon, {
-					className: CSS.element(baseClass, "icon"),
-				}),
+				children: iconVDOM,
 			});
 		var insideButton,
 			readOnly = data.disabled || data.readOnly;
@@ -7712,7 +7774,7 @@ var SelectComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				data.classNames,
 				CSS.state({
 					visited: state.visited,
-					icon: data.icon,
+					icon: !!iconVDOM,
 					focus: this.state.focus,
 					error: state.visited && data.error,
 					empty: data.empty && !data.placeholder,
@@ -8597,6 +8659,7 @@ var LookupField = /*#__PURE__*/ (function (_Field) {
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
 				forceUpdate: context.forceUpdate,
+				icon: this.renderIcon(context, instance, "icon"),
 			},
 			key,
 		);
@@ -9025,7 +9088,8 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var _this$props = this.props,
 			instance = _this$props.instance,
 			label = _this$props.label,
-			help = _this$props.help;
+			help = _this$props.help,
+			iconVDOM = _this$props.icon;
 		var data = instance.data,
 			widget = instance.widget,
 			state = instance.state;
@@ -9033,7 +9097,7 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			baseClass = widget.baseClass,
 			suppressErrorsUntilVisited = widget.suppressErrorsUntilVisited;
 		var icon =
-			data.icon &&
+			iconVDOM &&
 			/*#__PURE__*/ jsx(
 				"div",
 				{
@@ -9044,9 +9108,7 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						e.stopPropagation();
 						e.preventDefault();
 					},
-					children: Icon.render(data.icon, {
-						className: CSS.element(baseClass, "icon"),
-					}),
+					children: iconVDOM,
 				},
 				"icon",
 			);
@@ -9157,7 +9219,7 @@ var LookupComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var states = {
 			visited: state.visited,
 			focus: this.state.focus || this.state.dropdownOpen,
-			icon: !!data.icon,
+			icon: !!iconVDOM,
 			empty: !data.placeholder && data.empty,
 			error: data.error && (state.visited || !suppressErrorsUntilVisited || !data.empty),
 		};
@@ -9776,6 +9838,7 @@ var NumberField = /*#__PURE__*/ (function (_Field) {
 				instance: instance,
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
+				icon: this.renderIcon(context, instance, "icon"),
 			},
 			key,
 		);
@@ -9821,19 +9884,18 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 			data = _this$props.data,
 			instance = _this$props.instance,
 			label = _this$props.label,
-			help = _this$props.help;
+			help = _this$props.help,
+			iconVDOM = _this$props.icon;
 		var widget = instance.widget,
 			state = instance.state;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			suppressErrorsUntilVisited = widget.suppressErrorsUntilVisited;
 		var icon =
-			data.icon &&
+			iconVDOM &&
 			/*#__PURE__*/ jsx("div", {
 				className: CSS.element(baseClass, "left-icon"),
-				children: Icon.render(data.icon, {
-					className: CSS.element(baseClass, "icon"),
-				}),
+				children: iconVDOM,
 			});
 		var insideButton;
 		if (!data.readOnly && !data.disabled) {
@@ -9939,6 +10001,16 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(
+				{
+					target: {
+						value: this.input.value,
+					},
+				},
+				"blur",
+			);
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.getPreCursorDigits = function getPreCursorDigits(text, cursor, decimalSeparator) {
@@ -10082,12 +10154,12 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 			var fmt = data.format;
 			var decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
 			var formatted = Format.value(value, fmt);
-			//re-parse to avoid differences between formatted value and value in the store
+			// Re-parse to avoid differences between formatted value and value in the store
 
 			value = widget.parseValue(formatted, instance) * data.scale + data.offset;
 
-			//allow users to type numbers like 100.0003 or -0.05 without interruptions
-			//if the last typed in character is zero or dot (decimal separator) skip processing it
+			// Allow users to type numbers like 100.0003 or -0.05 without interruptions
+			// If the last typed character is zero or dot (decimal separator), skip processing it
 			if (
 				change == "change" &&
 				this.input.selectionStart == this.input.selectionEnd &&
@@ -10098,7 +10170,7 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 			)
 				return;
 			if (change != "blur") {
-				//format, but keep the correct cursor position
+				// Format, but keep the correct cursor position
 				var preCursorText = this.getPreCursorDigits(this.input.value, this.input.selectionStart, decimalSeparator);
 				this.input.value = formatted;
 				this.updateCursorPosition(preCursorText);
@@ -10229,13 +10301,13 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this2.onChange(e, "input");
+								return _this2.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this2.onChange(e, "change");
+								return _this2.onChange(e.target.value, "change");
 							},
 							onBlur: function onBlur(e) {
-								_this2.onChange(e, "blur");
+								_this2.onChange(e.target.value, "blur");
 							},
 							onFocus: function onFocus(e) {
 								return _this2.onFocus();
@@ -10259,6 +10331,9 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		});
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.componentDidMount = function componentDidMount() {
@@ -10288,7 +10363,7 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		tooltipParentWillReceiveProps$1.apply(void 0, [this.input].concat(getFieldTooltip(instance)));
 	};
-	_proto2.onChange = function onChange(e, change) {
+	_proto2.onChange = function onChange(inputValue, change) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
@@ -10304,11 +10379,11 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		if (data.required) {
 			instance.setState({
-				empty: !e.target.value,
+				empty: !inputValue,
 			});
 		}
 		if (instance.widget.reactOn.indexOf(change) != -1) {
-			var value = e.target.value || widget.emptyValue;
+			var value = inputValue || widget.emptyValue;
 			instance.set("value", value);
 		}
 	};
@@ -11855,6 +11930,7 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
 				},
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
+				icon: this.renderIcon(context, instance, "icon"),
 			},
 			key,
 		);
@@ -11968,7 +12044,8 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			instance = _this$props.instance,
 			label = _this$props.label,
 			help = _this$props.help,
-			data = _this$props.data;
+			data = _this$props.data,
+			iconVDOM = _this$props.icon;
 		var widget = instance.widget,
 			state = instance.state;
 		var CSS = widget.CSS,
@@ -12001,12 +12078,10 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					}),
 				});
 		}
-		if (data.icon) {
+		if (iconVDOM) {
 			icon = /*#__PURE__*/ jsx("div", {
 				className: CSS.element(baseClass, "left-icon"),
-				children: Icon.render(data.icon, {
-					className: CSS.element(baseClass, "icon"),
-				}),
+				children: iconVDOM,
 			});
 		}
 		var dropdown = false;
@@ -12050,10 +12125,10 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					tabIndex: data.tabIndex,
 					placeholder: data.placeholder,
 					onInput: function onInput(e) {
-						return _this3.onChange(e, "input");
+						return _this3.onChange(e.target.value, "input");
 					},
 					onChange: function onChange(e) {
-						return _this3.onChange(e, "change");
+						return _this3.onChange(e.target.value, "change");
 					},
 					onKeyDown: function onKeyDown(e) {
 						return _this3.onKeyDown(e);
@@ -12110,7 +12185,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		switch (e.keyCode) {
 			case KeyCode.enter:
 				e.stopPropagation();
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -12140,7 +12215,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -12196,13 +12271,16 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var instance = this.props.instance;
 		var widget = instance.widget;
 		if (widget.reactOn.indexOf(eventType) == -1) return;
-		var parts = e.target.value.split("-");
+		var parts = inputValue.split("-");
 		var date1 = widget.parseDate(parts[0]);
 		var date2 = widget.parseDate(parts[1]) || date1;
 		if ((date1 != null && isNaN(date1)) || (date2 != null && isNaN(date2))) {
@@ -12442,10 +12520,10 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this3.onChange(e, "input");
+								return _this3.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this3.onChange(e, "change");
+								return _this3.onChange(e.target.value, "change");
 							},
 							onKeyDown: function onKeyDown(e) {
 								return _this3.onKeyDown(e);
@@ -12504,7 +12582,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		switch (e.keyCode) {
 			case KeyCode.enter:
 				e.stopPropagation();
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -12530,7 +12608,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -12578,6 +12656,9 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.onClearClick = function onClearClick(e) {
@@ -12589,25 +12670,25 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		e.stopPropagation();
 		e.preventDefault();
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
 		var widget = instance.widget;
-		if (eventType == "blur")
+		if (eventType == "blur") {
 			instance.setState({
 				visited: true,
 			});
-		var text = e.target.value;
+		}
 		var isValid;
 		try {
-			parseColor(text);
+			parseColor(inputValue);
 			isValid = true;
 		} catch (e) {
 			isValid = false;
 		}
 		if (eventType == "blur" || eventType == "enter") {
-			var value = text || widget.emptyValue;
+			var value = inputValue || widget.emptyValue;
 			if (isValid && value !== data.value) instance.set("value", value);
 			instance.setState({
 				inputError: !isValid && "Invalid color entered.",
@@ -14343,6 +14424,7 @@ var DateTimeField = /*#__PURE__*/ (function (_Field) {
 				},
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
+				icon: getContent(this.renderIcon(context, instance, "icon")),
 			},
 			key,
 		);
@@ -14482,7 +14564,8 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		var _this$props = this.props,
 			instance = _this$props.instance,
 			label = _this$props.label,
-			help = _this$props.help;
+			help = _this$props.help,
+			iconVDOM = _this$props.icon;
 		var data = instance.data,
 			widget = instance.widget,
 			state = instance.state;
@@ -14516,12 +14599,10 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					}),
 				});
 		}
-		if (data.icon) {
+		if (iconVDOM) {
 			icon = /*#__PURE__*/ jsx("div", {
 				className: CSS.element(baseClass, "left-icon"),
-				children: Icon.render(data.icon, {
-					className: CSS.element(baseClass, "icon"),
-				}),
+				children: iconVDOM,
 			});
 		}
 		var dropdown = false;
@@ -14570,10 +14651,10 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this3.onChange(e, "input");
+								return _this3.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this3.onChange(e, "change");
+								return _this3.onChange(e.target.value, "change");
 							},
 							onKeyDown: function onKeyDown(e) {
 								return _this3.onKeyDown(e);
@@ -14635,7 +14716,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (instance.widget.handleKeyDown(e, instance) === false) return;
 		switch (e.keyCode) {
 			case KeyCode.enter:
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -14666,7 +14747,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -14722,9 +14803,12 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
@@ -14735,7 +14819,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			instance.setState({
 				visited: true,
 			});
-		this.setValue(e.target.value, data.value);
+		this.setValue(inputValue, data.value);
 	};
 	_proto2.setValue = function setValue(text, baseValue) {
 		var _this$props3 = this.props,
@@ -19157,6 +19241,7 @@ export {
 	HighlightedSearchText,
 	HtmlElement,
 	Icon,
+	Label,
 	LabeledContainer,
 	Link,
 	LinkButton,

package/locale/de-de.js

@@ -24,11 +24,14 @@ const calendarErrorMessages = {
    minValueErrorText: 'Wählen Sie {0:d} oder später.',
    minExclusiveErrorText: 'Wählen Sie ein Datum nach dem {0:d}.',
 };
+
 // Calendar
 Localization.localize(c, 'cx/widgets/Calendar', {
    ...calendarErrorMessages,
-   todayButtonText: 'Heute'
+   todayButtonText: 'Heute',
+   startWithMonday: true
 });
+
 // MonthPicker
 Localization.localize(c, 'cx/widgets/MonthPicker', calendarErrorMessages);
 
@@ -37,8 +40,10 @@ const dateFieldErrorMessages = {
    ...calendarErrorMessages,
    inputErrorText: 'Ungültiges Datum eingegeben.'
 };
+
 // MonthField
 Localization.localize(c, 'cx/widgets/MonthField', dateFieldErrorMessages);
+
 // DateField
 Localization.localize(c, 'cx/widgets/DateField', dateFieldErrorMessages);