fix: order slots in state as in Light DOM (#874)

FIXES: #873

Order slotted children in components state properly, keeping their order in the Light DOM, not the order the children are defined

Author: ilhan007

packages/base/src/UI5Element.js

@@ -152,7 +152,9 @@ class UI5Element extends HTMLElement {
 		}
 
 		const autoIncrementMap = new Map();
-		const allChildrenUpgraded = domChildren.map(async child => {
+		const slottedChildrenMap = new Map();
+
+		const allChildrenUpgraded = domChildren.map(async (child, idx) => {
 			// Determine the type of the child (mainly by the slot attribute)
 			const slotName = this.constructor._getSlotName(child);
 			const slotData = slotsMap[slotName];
@@ -192,12 +194,22 @@ class UI5Element extends HTMLElement {
 				this._attachChildPropertyUpdated(child, slotData);
 			}
 
-			// Distribute the child in the _state object
 			const propertyName = slotData.propertyName || slotName;
-			this._state[propertyName].push(child);
+
+			if (slottedChildrenMap.has(propertyName)) {
+				slottedChildrenMap.get(propertyName).push({ child, idx });
+			} else {
+				slottedChildrenMap.set(propertyName, [{ child, idx }]);
+			}
 		});
 
 		await Promise.all(allChildrenUpgraded);
+
+		// Distribute the child in the _state object, keeping the Light DOM order,
+		// not the order elements are defined.
+		slottedChildrenMap.forEach((children, slot) => {
+			this._state[slot] = children.sort((a, b) => a.idx - b.idx).map(_ => _.child);
+		});
 		this._invalidate();
 	}