fix(tm): set proper position if tiles are added on demand

Author: mtsvyatkova

src/components/tile-manager/position.ts

@@ -3,6 +3,8 @@ import type IgcTileManagerComponent from './tile-manager.js';
 import type IgcTileComponent from './tile.js';
 
 class TilesState {
+  private _nextEmptyPosition = 0;
+
   public manager: IgcTileManagerComponent;
 
   private get _tiles(): IgcTileComponent[] {
@@ -62,7 +64,11 @@ class TilesState {
         }
       }
     } else {
-      tile.position = tiles.length;
+      const positionedTiles = this._tiles.filter((tile) => tile.position > -1);
+      tile.position =
+        positionedTiles.length > 1
+          ? Math.max(...positionedTiles.map((tile) => tile.position)) + 1
+          : this._nextEmptyPosition++;
     }
   }
 

src/components/tile-manager/tile-manager.spec.ts

@@ -685,6 +685,21 @@ describe('Tile Manager component', () => {
       });
     });
 
+    it('should correctly position tiles added dynamically after initialization', async () => {
+      tileManager.replaceChildren();
+      const tiles = Array.from(range(5)).map(() =>
+        document.createElement(IgcTileComponent.tagName)
+      );
+
+      tiles.forEach((tile) => tileManager.appendChild(tile));
+      await elementUpdated(tileManager);
+
+      tileManager.tiles.forEach((tile, index) => {
+        expect(tile.position).to.equal(index);
+        expect(tile.style.order).to.equal(index.toString());
+      });
+    });
+
     it('should set proper CSS order based on position', async () => {
       const firstTile = first(getTiles());
       firstTile.position = 6;