@openui5/sap.ui.mdc 1.136.2 → 1.138.0

package/src/sap/ui/mdc/field/FieldBaseDelegate.js

@@ -232,12 +232,13 @@ sap.ui.define([
 	 * @param {object} oConditionPayload Additional context information for this key
 	 * @param {sap.ui.core.Control} oControl Instance of the calling control if it is not the field itself
 	 * @param {sap.ui.model.Type} oType Type of the value
+	 * @param {boolean} bEmptyAllowed If <code>true</code>, the connected control could be left empty (without conditions)
 	 * @returns {string|sap.ui.mdc.valuehelp.base.ValueHelpItem|Promise<string|sap.ui.mdc.valuehelp.base.ValueHelpItem>} Description for key or object containing description, key, and payload. If it is not available right away (must be requested), a <code>Promise</code> is returned.
 	 * @throws {sap.ui.model.FormatException} if the description cannot be determined
 	 * @since: 1.78.0
 	 * @public
 	 */
-	FieldBaseDelegate.getDescription = function(oField, oValueHelp, vKey, oInParameters, oOutParameters, oBindingContext, oDoNotUse, sDoNotUse, oConditionPayload, oControl, oType) {
+	FieldBaseDelegate.getDescription = function(oField, oValueHelp, vKey, oInParameters, oOutParameters, oBindingContext, oDoNotUse, sDoNotUse, oConditionPayload, oControl, oType, bEmptyAllowed) {
 		const oConfig = {
 			value: vKey,
 			parsedValue: vKey,
@@ -250,7 +251,9 @@ sap.ui.define([
 			caseSensitive: true, // case sensitive as used to get description for known key
 			exception: FormatException,
 			exactMatch: true,
-			control: oControl
+			control: oControl,
+			emptyAllowed: bEmptyAllowed
+
 		};
 		return oValueHelp && oValueHelp.getItemForValue(oConfig);
 

package/src/sap/ui/mdc/field/FieldInfoBase.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * A <code>FieldInfoBase</code> element is a base class that shows any kind of information related to the <code>Field</code> control, for example, navigation targets or contact details.
 	 * This is the basis for link-features. If the link is pressed a popover might be opened.
 	 * @extends sap.ui.mdc.Element
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @since 1.54.0
 	 * @public

package/src/sap/ui/mdc/field/FieldInput.js

@@ -24,7 +24,7 @@ sap.ui.define([
 	 * The <code>FieldInput</code> control is used to render an input field inside a control based on {@link sap.ui.mdc.field.FieldBase FieldBase}.
 	 * It enhances the {@link sap.m.Input Input} control to add ARIA attributes and other {@link sap.ui.mdc.field.FieldBase FieldBase}-specific logic.
 	 * @extends sap.m.Input
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @abstract
 	 * @private

package/src/sap/ui/mdc/field/FieldInputRenderUtil.js

@@ -16,7 +16,7 @@ sap.ui.define([
 		 * @class Functions uses in <code>FieldInputRenderer</code> and <code>FieldMultiInputRenderer</code> to adjust aria attributes.
 		 *
 		 * @author SAP SE
-		 * @version 1.136.2
+		 * @version 1.138.0
 		 * @since 1.86.0
 		 * @alias sap.ui.mdc.field.FieldInputRenderUtil
 		 *

package/src/sap/ui/mdc/field/FieldMultiInput.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * The <code>FieldMultiInput</code> control is used to render a multi-input field inside a control based on {@link sap.ui.mdc.field.FieldBase FieldBase}.
 	 * It enhances the {@link sap.m.MultiInput MultiInput} control to add ARIA attributes and other {@link sap.ui.mdc.field.FieldBase FieldBase}-specific logic.
 	 * @extends sap.m.MultiInput
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @abstract
 	 * @private

package/src/sap/ui/mdc/field/FieldSelect.js

@@ -0,0 +1,459 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+	'sap/m/Select',
+	'sap/ui/mdc/field/FieldSelectRenderer',
+	'sap/ui/mdc/field/ConditionsType',
+	'sap/ui/core/Element',
+	'sap/ui/base/ManagedObjectObserver',
+	'sap/base/util/merge'
+
+], (
+	Select,
+	SelectRenderer,
+	ConditionsType,
+	Element,
+	ManagedObjectObserver,
+	merge
+) => {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>FieldSelect</code>.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 * @class
+	 * The <code>FieldSelect</code> control is used to render an select field inside a control based on {@link sap.ui.mdc.field.FieldBase FieldBase}.
+	 * It enhances the {@link sap.m.Select Select} control to allow {@link sap.ui.mdc.field.FieldBase FieldBase}-specific ValueHelp logic.
+	 * @extends sap.m.Input
+	 * @version 1.138.0
+	 * @constructor
+	 * @abstract
+	 * @private
+	 * @ui5-restricted sap.ui.mdc.field.FieldBase
+	 * @since 1.138
+	 * @alias sap.ui.mdc.field.FieldSelect
+	 */
+	const FieldSelect = Select.extend("sap.ui.mdc.field.FieldSelect", /** @lends sap.ui.mdc.field.FieldSelect.prototype */ {
+		metadata: {
+			library: "sap.ui.mdc",
+			properties: {
+				/**
+				 * Sets the ARIA attributes added to the <code>Select</code> control.
+				 *
+				 * The object contains ARIA attributes in an <code>aria</code> node.
+				 * Additional attributes, such as <code>role</code>, <code>autocomplete</code> or <code>valueHelpEnabled</code>, are added on root level.
+				 */
+				ariaAttributes: {
+					type: "object",
+					defaultValue: {},
+					byValue: true
+				}
+			},
+			events: {
+				/**
+				 * Fired if value help is triggered.
+				 */
+				valueHelpRequest : {
+					parameters : {
+						/**
+						 * The event parameter is set to true, when the event is fired after keyboard interaction, otherwise false.
+						 */
+						fromKeyboard: {type: "boolean"}
+					}
+				}
+			}
+		},
+		renderer: SelectRenderer
+	});
+
+	FieldSelect.prototype.init = function() {
+
+		Select.prototype.init.apply(this, arguments);
+
+		this._sSelectedKeyOnFocus = null;
+
+		this._oObserver = new ManagedObjectObserver(_observeChanges.bind(this));
+		this._oObserver.observe(this, {
+			properties: ["ariaAttributes", "selectedKey"]
+		});
+
+	};
+
+	FieldSelect.prototype.exit = function() {
+
+		Select.prototype.exit.apply(this, arguments);
+
+		this._sSelectedKeyOnFocus = null;
+
+		if (this._oConditionsType) {
+			this._oConditionsType.destroy();
+			this._oConditionsType = undefined;
+		}
+
+		this._oObserver.disconnect();
+		this._oObserver = undefined;
+
+	};
+
+	FieldSelect.prototype.setProperty = function(sPropertyName, vValue, bSuppressInvalidate) {
+
+		// do not invalidate on ariaAttributes to prevent re-remdering. It needs to be changed directly in any case
+		if (sPropertyName === "ariaAttributes") {
+			bSuppressInvalidate = true;
+		}
+
+		return Select.prototype.setProperty.apply(this, [sPropertyName, vValue, bSuppressInvalidate]);
+
+	};
+
+	function _observeChanges(oChanges) {
+
+		if (oChanges.name === "ariaAttributes") {
+			// set aria-attributes directly as done so in Select
+			const oDomRef = this.getFocusDomRef();
+			if (oDomRef) {
+				const fUpdate = (oChanges, oDomRef, sName) => {
+					if (oChanges.current.aria?.[sName] !== oChanges.old.aria?.[sName]) {
+						if (!oChanges.current.aria?.[sName]) {
+							oDomRef.removeAttribute("aria-" + sName);
+						} else {
+							oDomRef.setAttribute("aria-" + sName, oChanges.current.aria[sName]);
+						}
+					}
+				};
+				fUpdate(oChanges, oDomRef, "activedescendant");
+				fUpdate(oChanges, oDomRef, "expanded");
+				fUpdate(oChanges, oDomRef, "controls");
+			}
+		} else if (oChanges.name === "selectedKey" && oChanges.current !== "") { // empty key handled by Select itself
+			this._bSetValuePending = true; // as value is set latest after rendering (don't set it before to prevent trigger async formatting multiple times)
+		}
+
+	}
+
+	FieldSelect.prototype.createPicker = function() {
+
+		return null; // use ValueHelp, no own popover and list
+
+	};
+
+	function _formatConditions(aConditions) {
+
+		const oField = this.getParent();
+
+		if (!oField?.isA("sap.ui.mdc.field.FieldBase")) { // called from generic tests
+			return "";
+		}
+
+		const oFormatOptions = merge({}, oField.getFormatOptions());
+		oFormatOptions.display = oField.getDisplay();
+		oFormatOptions.valueHelpID = oField._getValueHelp() || oField?._sDefaultValueHelp;
+
+		if (this._oConditionsType) {
+			this._oConditionsType.setFormatOptions(oFormatOptions); // as FormatOptions might be updated in Field
+		} else {
+			this._oConditionsType = new ConditionsType(oFormatOptions);
+		}
+
+		return this._oConditionsType.formatValue(aConditions, "string");
+
+	}
+
+	function _formatNavigateCondition(bSelectedKeyFallback) {
+
+		const oField = this.getParent();
+		let sValue;
+		if (oField?._oNavigateCondition) { // format NavigationCondition
+			sValue = _formatConditions.call(this, [oField._oNavigateCondition]);
+		} else if (oField?._oNavigateCondition === null) { // empty-value navigated
+			sValue = _formatConditions.call(this, []);
+		} else if (bSelectedKeyFallback) {
+			const aConditions = this.getBinding("selectedKey")?.getRawValue();
+			sValue = _formatConditions.call(this, aConditions);
+		}
+
+		return sValue;
+
+	}
+
+	function _formatNavigateConditionToKey() {
+
+		const oField = this.getParent();
+		let sKey;
+
+		if (oField?._oNavigateCondition) {
+			sKey = oField.getContentFactory().getConditionsType().formatValue([oField._oNavigateCondition]);
+		} else if (oField?._oNavigateCondition === null) {
+			sKey = "";
+		}
+
+		return sKey;
+
+	}
+
+	FieldSelect.prototype._getSelectedItemText = function(vItem) {
+
+		// TODO: can it happen that no item is selected in Field case?
+		if (this._sValue !== undefined) { // formatted text already determined
+			return this._sValue;
+		} else {
+			return _formatNavigateCondition.call(this, true);
+		}
+
+	};
+
+	FieldSelect.prototype.setValue = function(sValue) {
+
+		this._bSetValuePending = true;
+		Promise.all([sValue]).then((aResult) => { // as ConditionType.formatValue might return a Promise
+			const [sValue] = aResult;
+			this._sValue = sValue; // to also forward to _setHiddenSelectValue
+			Select.prototype.setValue.call(this, sValue);
+			delete this._sValue;
+			delete this._bSetValuePending;
+		});
+
+	};
+
+	// here it just sets the string-formatted key from navigation, typeahead or valuehelp-selection
+	FieldSelect.prototype.setDOMValue = function(sValue) {
+
+		const sNavigateValue = _formatNavigateCondition.call(this, false);
+		sValue = sNavigateValue === undefined ? sValue : sNavigateValue;
+
+		this.setValue(sValue);
+
+	};
+
+	FieldSelect.prototype.getDOMValue = function(sValue) {
+
+		const oDomRef = this.getDomRef();
+		const oTextPlaceholder = oDomRef?.querySelector(".sapMSelectListItemText");
+
+		if (oTextPlaceholder) {
+			return oTextPlaceholder.textContent; // TODO: parse to key?
+		}
+
+		return "";
+
+	};
+
+	FieldSelect.prototype._setHiddenSelectValue = function () {
+
+		const oSelect = this._getHiddenSelect();
+		const oInput = this._getHiddenInput();
+		let sSelectedKey = _formatNavigateConditionToKey.call(this);
+		const sSelectedItemText = this._sValue || this._getSelectedItemText();
+
+		if (sSelectedKey === undefined) {
+			sSelectedKey = this.getSelectedKey();
+		}
+
+		// the hidden INPUT is only used when the select is submitted
+		// with a form so update its value in all cases
+		oInput.attr("value", sSelectedKey || "");
+
+		if (!this._isIconOnly()) {
+			Promise.all([sSelectedItemText]).then((aResult) => {
+				const [sSelectedItemText] = aResult;
+				oSelect.text(sSelectedItemText);
+			});
+		}
+
+	};
+
+	FieldSelect.prototype.onBeforeRendering = function() {
+
+		Select.prototype.onBeforeRendering.apply(this, arguments);
+
+		// as text might be set via Navigation - just remember it
+		const sKey = this.getSelectedKey();
+		if (this._sSelectedKeyOnFocus === sKey && this.getDomRef() && !this._bSetValuePending) {
+			this._sValue = this.getDOMValue();
+		}
+
+	};
+
+	FieldSelect.prototype.onAfterRendering = function() {
+
+		Select.prototype.onAfterRendering.apply(this, arguments);
+
+		// as text might be formatted async, set after rendering (as rendering clears value if there is a Promise)
+		const sText = this._getSelectedItemText();
+		this.setValue(sText);
+		delete this._sValue;
+
+	};
+
+	// open/close handled by Field
+	FieldSelect.prototype.toggleOpenState = function() {
+		return this;
+	};
+
+	FieldSelect.prototype.ontap = function(oEvent) {
+
+		if (!this.getEnabled() || !this.getEditable()) {
+			return;
+		}
+
+		const oValueHelp = _getValueHelp.call(this);
+		if (this.isOpenArea(oEvent.target) && oValueHelp?.isOpen()) { // as dropdown should also close on click in field, opening is handled on Field
+			this.fireValueHelpRequest();
+		}
+
+	};
+
+	// disable Select-specific arrow-handling
+	FieldSelect.prototype.onsapdown = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsapup = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsappagedown = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsappageup = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsaphome = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsapend = function(oEvent) {
+	};
+
+	FieldSelect.prototype.onsapshow = function(oEvent) {
+
+		// prevents actions from occurring when the control is non-editable
+		if (!this.getEditable()) {
+			return;
+		}
+
+		Select.prototype.onsapshow.apply(this, arguments);
+
+		this.fireValueHelpRequest({fromKeyboard: true}); // fromKeyboard set to force visual focus in dropdown
+
+	};
+
+	FieldSelect.prototype.onsapenter = function(oEvent) {
+
+		_updateSelectedKey.call(this);
+
+		Select.prototype.onsapenter.apply(this, arguments);
+
+	};
+
+	function _updateSelectedKey() {
+
+		const sKey = _formatNavigateConditionToKey.call(this);
+
+		if (sKey !== undefined) {
+			this.setSelectedKey(sKey);
+		}
+
+	}
+
+	FieldSelect.prototype.onfocusin = function(oEvent) {
+
+		this._sSelectedKeyOnFocus = this.getSelectedKey();
+		Select.prototype.onfocusin.apply(this, arguments);
+
+	};
+
+	FieldSelect.prototype.onfocusout = function(oEvent) {
+
+		if (this.getId() !== oEvent.relatedControlId) {
+			_updateSelectedKey.call(this);
+		}
+
+		Select.prototype.onfocusout.apply(this, arguments);
+
+	};
+
+	FieldSelect.prototype._isKeyAvailable = function (sKey) {
+
+		return false;
+
+	};
+
+	FieldSelect.prototype._checkSelectionChange = function() {
+
+		const sKey = this.getSelectedKey();
+
+		if (this._sSelectedKeyOnFocus !== sKey) {
+			this.fireChange({ selectedItem: null, previousSelectedItem: null, selectedKey: sKey });
+			this._sSelectedKeyOnFocus = sKey;
+		}
+
+	};
+
+	FieldSelect.prototype._revertSelection = function() {
+
+		const sKey = _formatNavigateConditionToKey.call(this); // format NavigationCondition to key to compare with initial one
+
+		if (sKey !== undefined) {
+			if (this._sSelectedKeyOnFocus !== sKey) {
+				this.fireLiveChange({escPressed: true, value: this._sSelectedKeyOnFocus}); // let the Field close and reset ValueHelp and remove NavigationCondition
+				// this.setSelectedKey(this._sSelectedKeyOnFocus);
+				this.setValue(this._getSelectedItemText());
+			}
+		}
+
+	};
+
+	FieldSelect.prototype.searchNextItemByText = function(sText) {
+
+		// validation if sText is relevant string
+		if (!(typeof sText === "string" && sText !== "")) {
+			return null; // return null if sText is invalid
+		}
+
+		this.fireLiveChange({value: sText}); // let the Field do the typeahead
+
+		return null;
+
+	};
+
+	FieldSelect.prototype._addFocusClass = function () {
+
+		const oValueHelp = _getValueHelp.call(this);
+
+		if (!oValueHelp?.isOpen()) { // on open ValueHelp visual focus should be in dropdown
+			this.addStyleClass("sapMSltFocused"); // use addStyleClass to have same logoc like Input controls
+		}
+
+	};
+
+	FieldSelect.prototype._removeFocusClass = function () {
+
+		this.removeStyleClass("sapMSltFocused"); // use removeStyleClass to have same logoc like Input controls
+
+	};
+
+	function _getValueHelp() {
+
+		const oField = this.getParent();
+		let sId = oField?._getValueHelp();
+		let oValueHelp;
+
+		if (!sId && oField?._sDefaultValueHelp) {
+			sId = oField._sDefaultValueHelp;
+		}
+
+		if (sId) {
+			oValueHelp = Element.getElementById(sId);
+		}
+
+		return oValueHelp;
+
+	}
+
+	return FieldSelect;
+
+});

package/src/sap/ui/mdc/field/FieldSelectRenderer.js

@@ -0,0 +1,66 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/library', 'sap/m/library', 'sap/m/SelectRenderer'],
+	(Renderer, coreLibrary, library, SelectRenderer) => {
+		"use strict";
+
+		const {ValueState} = coreLibrary;
+		const {SelectType} = library;
+
+		/**
+		 * FieldSelect renderer.
+		 * @namespace
+		 */
+		const FieldSelectRenderer = Renderer.extend(SelectRenderer);
+		FieldSelectRenderer.apiVersion = 2;
+
+		FieldSelectRenderer.writeAccessibilityState = function(oRm, oSelect) {
+			const sValueState = oSelect.getValueState(),
+				bIconOnly = oSelect.getType() === SelectType.IconOnly,
+				bEditabledAndEnabled = oSelect.getEnabled() && oSelect.getEditable(),
+				aLabels = [];
+			let aAriaLabelledBy = [],
+				sAriaDescribedBy;
+			const oAriaAttributes = oSelect.getAriaAttributes();
+
+			oSelect.getLabels().forEach((oLabel) => {
+				if (oLabel && oLabel.getId) {
+					aLabels.push(oLabel.getId());
+				}
+			});
+
+			if (sValueState !== ValueState.None && bEditabledAndEnabled) {
+				sAriaDescribedBy = oSelect.getValueStateMessageId() + "-sr";
+			}
+
+			if (aLabels.length) {
+				aAriaLabelledBy = aAriaLabelledBy.concat(aLabels);
+			}
+
+			const oAriaLabelledBy = {
+				value: aAriaLabelledBy.join(" "),
+				append: true
+			};
+
+			oRm.accessibilityState(null, {
+				role: this.getAriaRole(oSelect),
+				roledescription: bIconOnly ? undefined : oSelect._sAriaRoleDescription,
+				readonly: bIconOnly ? undefined : oSelect.getEnabled() && !oSelect.getEditable(),
+				required: oSelect._isRequired() || undefined,
+				disabled: !oSelect.getEnabled() || undefined,
+				expanded: oAriaAttributes.aria?.expanded,
+				invalid: (oSelect.getValueState() === ValueState.Error && bEditabledAndEnabled) ? true : undefined,
+				labelledby: (bIconOnly || oAriaLabelledBy.value === "") ? undefined : oAriaLabelledBy,
+				describedby: sAriaDescribedBy,
+				activedescendant: oAriaAttributes.aria?.activedescendant,
+				controls: oAriaAttributes.aria?.controls,
+				haspopup: oSelect.getEditable() ? "listbox" : undefined
+			});
+		};
+
+		return FieldSelectRenderer;
+	});

package/src/sap/ui/mdc/field/ListFieldHelpItem.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.mdc.valuehelp.content.FixedListItem
 	 *
 	 * @author SAP SE
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 *
 	 * @private
 	 * @ui5-restricted sap.fe

package/src/sap/ui/mdc/field/MultiValueFieldItem.js

@@ -20,7 +20,7 @@ sap.ui.define([
 	 * Base type for <code>MultiValueFieldItem</code> control.
 	 * The {@link sap.ui.mdc.MultiValueField MultiValueField} holds its values as items. The <code>MultiValueFieldItem</code> element defines these items.
 	 * @extends sap.ui.core.Element
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @since 1.93.0
 	 * @public

package/src/sap/ui/mdc/field/TokenDisplay.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * The <code>TokenDisplay</code> control is used to render a field inside a control based on {@link sap.ui.mdc.field.FieldBase FieldBase}.
 	 * It enhances the {@link sap.m.Token Token} control to add ARIA attributes and other {@link sap.ui.mdc.field.FieldBase FieldBase}-specific logic.
 	 * @extends sap.m.Token
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @abstract
 	 * @private

package/src/sap/ui/mdc/field/TokenizerDisplay.js

@@ -29,7 +29,7 @@ sap.ui.define([
 	 * It enhances the {@link sap.m.Tokenizer Tokenizer} control to support display only tokens.
 	 * @extends sap.m.Tokenizer
 	 * @implements sap.ui.core.ILabelable
-	 * @version 1.136.2
+	 * @version 1.138.0
 	 * @constructor
 	 * @abstract
 	 *