fix(ui5-avatar-group): use getSlottedNodes for transitive slot support (#13049)

Author: pskelin

packages/main/src/AvatarGroup.ts

@@ -259,12 +259,20 @@ class AvatarGroup extends UI5Element {
 	_hiddenItems = 0;
 	_itemNavigation: ItemNavigation;
 
+	/**
+	 * Returns the actual avatar items, handling transitive slotting.
+	 * @private
+	 */
+	get _slottedItems(): IAvatarGroupItem[] {
+		return this.getSlottedNodes<IAvatarGroupItem>("items");
+	}
+
 	constructor() {
 		super();
 
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => {
-				return this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);
+				return this._isGroup ? [] : this._slottedItems.slice(0, this._hiddenStartIndex);
 			},
 		});
 		this._onResizeHandler = this._onResize.bind(this);
@@ -276,7 +284,7 @@ class AvatarGroup extends UI5Element {
 	 * @public
 	 */
 	get hiddenItems(): IAvatarGroupItem[] {
-		return this.items.slice(this._hiddenStartIndex);
+		return this._slottedItems.slice(this._hiddenStartIndex);
 	}
 
 	/**
@@ -285,7 +293,7 @@ class AvatarGroup extends UI5Element {
 	 * @public
 	 */
 	get colorScheme(): AvatarColorScheme[] {
-		return this.items.map(avatar => avatar.effectiveBackgroundColor);
+		return this._slottedItems.map(avatar => avatar.effectiveBackgroundColor);
 	}
 
 	get _customOverflowButton() {
@@ -348,7 +356,7 @@ class AvatarGroup extends UI5Element {
 	}
 
 	get _itemsCount() {
-		return this.items.length;
+		return this._slottedItems.length;
 	}
 
 	get _groupTabIndex() {
@@ -376,7 +384,7 @@ class AvatarGroup extends UI5Element {
 		}
 
 		if (this._isGroup) {
-			let item: HTMLElement = this.items[1];
+			let item: HTMLElement = this._slottedItems[1];
 			const ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
 
 			// in some cases when second avatar is overflowed the offset of the button is the right one
@@ -391,7 +399,7 @@ class AvatarGroup extends UI5Element {
 	}
 
 	get firstAvatarSize() {
-		return this.items[0]?.size ?? AvatarSize.S;
+		return this._slottedItems[0]?.size ?? AvatarSize.S;
 	}
 
 	onAfterRendering() {
@@ -483,7 +491,7 @@ class AvatarGroup extends UI5Element {
 	_prepareAvatars() {
 		this._colorIndex = 0;
 
-		this.items.forEach((avatar, index) => {
+		this._slottedItems.forEach((avatar, index) => {
 			const colorIndex = this._getNextBackgroundColor();
 			avatar.interactive = !this._isGroup;
 
@@ -541,7 +549,7 @@ class AvatarGroup extends UI5Element {
 	 * @private
 	 */
 	_overflowItems() {
-		if (this.items.length < 2) {
+		if (this._slottedItems.length < 2) {
 			// no need to overflow avatars
 			this._setHiddenItems(0);
 			return;
@@ -550,7 +558,7 @@ class AvatarGroup extends UI5Element {
 		let hiddenItems = 0;
 
 		for (let index = 0; index < this._itemsCount; index++) {
-			const item: IAvatarGroupItem = this.items[index];
+			const item: IAvatarGroupItem = this._slottedItems[index];
 
 			// show item to determine if it will fit the new container size
 			item.hidden = false;
@@ -586,7 +594,7 @@ class AvatarGroup extends UI5Element {
 
 		this._hiddenItems = hiddenItems;
 
-		this.items.forEach((item, index) => {
+		this._slottedItems.forEach((item, index) => {
 			item.hidden = index >= this._hiddenStartIndex;
 		});