feat: add support for angular two way data binding (#706)

The current commit enables components to implement the interface for Angular two way data binding & form support.

Components that implement the interface:
 - Input
 - Checkbox
 - Datepicker
 - Switch

packages/base/src/UI5Element.js

@@ -1,5 +1,5 @@
 import boot from "./boot.js";
-import { getNoConflict } from "./config/NoConflict.js";
+import { skipOriginalEvent } from "./config/NoConflict.js";
 import { getCompactSize } from "./config/CompactSize.js";
 import DOMObserver from "./compatibility/DOMObserver.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
@@ -522,7 +522,6 @@ class UI5Element extends HTMLElement {
 	 */
 	fireEvent(name, data, cancelable) {
 		let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
-		const noConflict = getNoConflict();
 
 		const noConflictEvent = new CustomEvent(`ui5-${name}`, {
 			detail: data,
@@ -534,7 +533,7 @@ class UI5Element extends HTMLElement {
 		// This will be false if the compat event is prevented
 		compatEventResult = this.dispatchEvent(noConflictEvent);
 
-		if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
+		if (skipOriginalEvent(name)) {
 			return compatEventResult;
 		}
 

packages/base/src/config/NoConflict.js

@@ -1,16 +1,44 @@
 import { getNoConflict as getConfiguredNoConflict } from "../InitialConfiguration.js";
 
+// Fire these events even with noConflict: true
+const excludeList = [
+	"value-changed",
+];
+
+const shouldFireOriginalEvent = eventName => {
+	return excludeList.includes(eventName);
+};
+
 let noConflict = getConfiguredNoConflict();
 
+const shouldNotFireOriginalEvent = eventName => {
+	return !(noConflict.events && noConflict.events.includes && noConflict.events.includes(eventName));
+};
+
 const getNoConflict = () => {
 	return noConflict;
 };
 
+const skipOriginalEvent = eventName => {
+	// Always fire these events
+	if (shouldFireOriginalEvent(eventName)) {
+		return false;
+	}
+
+	// Read from the configuration
+	if (noConflict === true) {
+		return true;
+	}
+
+	return !shouldNotFireOriginalEvent(eventName);
+};
+
 const setNoConflict = noConflictData => {
 	noConflict = noConflictData;
 };
 
 export {
 	getNoConflict,
 	setNoConflict,
+	skipOriginalEvent,
 };

packages/main/src/CheckBox.js

@@ -245,6 +245,8 @@ class CheckBox extends UI5Element {
 		if (this.canToggle()) {
 			this.checked = !this.checked;
 			this.fireEvent("change");
+			// Angular two way data binding
+			this.fireEvent("value-changed");
 		}
 		return this;
 	}

packages/main/src/DatePicker.js

@@ -327,6 +327,8 @@ class DatePicker extends UI5Element {
 
 		this.value = nextValue;
 		this.fireEvent("change", { value: nextValue, valid: isValid });
+		// Angular two way data binding
+		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
 	}
 
 	_handleInputLiveChange() {
@@ -425,6 +427,8 @@ class DatePicker extends UI5Element {
 		this.closePicker();
 
 		this.fireEvent("change", { value: this.value, valid: true });
+		// Angular two way data binding
+		this.fireEvent("value-changed", { value: this.value, valid: true });
 	}
 
 	/**

packages/main/src/Input.js

@@ -483,6 +483,8 @@ class Input extends UI5Element {
 
 		if (isUserInput) { // input
 			this.fireEvent(this.EVENT_INPUT);
+			// Angular two way data binding
+			this.fireEvent("value-changed");
 			return;
 		}
 

packages/main/src/Switch.js

@@ -182,6 +182,8 @@ class Switch extends UI5Element {
 		if (!this.disabled) {
 			this.checked = !this.checked;
 			this.fireEvent("change");
+			// Angular two way data binding;
+			this.fireEvent("value-changed");
 		}
 	}