fix(tour): calculate arrow position correctly on size change

Author: chintankavathia

playwright/e2e/element-examples/si-tour.spec.ts

@@ -11,11 +11,8 @@ test.describe('si-tour', () => {
     const nextClick = (): Promise<any> =>
       page.locator('si-tour button', { hasText: 'Next' }).click();
 
-    const waitForTourStep = async (hasArrow = true): Promise<void> => {
+    const waitForTourStep = async (): Promise<void> => {
       await expect(page.locator('si-tour .tour-content.show')).toBeVisible();
-      if (hasArrow) {
-        await expect(page.locator('si-tour .popover-arrow')).toBeVisible();
-      }
     };
 
     await si.visitExample(example);
@@ -33,7 +30,7 @@ test.describe('si-tour', () => {
     await waitForTourStep();
     await si.runVisualAndA11yTests('open-menu');
     await nextClick();
-    await waitForTourStep(false);
+    await waitForTourStep();
     await si.runVisualAndA11yTests('last-step');
   });
 });

projects/element-ng/tour/si-tour.component.ts

@@ -54,6 +54,7 @@ export class SiTourComponent implements OnDestroy {
   private elementRef: ElementRef<HTMLElement> = inject(ElementRef);
   private subscription?: Subscription;
   private prevFocus: Element | null = null;
+  private lastPositionChange: PositionChange | undefined;
 
   private readonly focusTrap = viewChild<CdkTrapFocus>('focusTrap');
   private document = inject(DOCUMENT);
@@ -71,6 +72,9 @@ export class SiTourComponent implements OnDestroy {
     this.subscription.add(
       this.tourToken.positionChange.subscribe(update => this.updatePosition(update))
     );
+    this.subscription.add(
+      this.tourToken.sizeChange.subscribe(() => this.updatePosition(this.lastPositionChange))
+    );
   }
 
   ngOnDestroy(): void {
@@ -110,6 +114,7 @@ export class SiTourComponent implements OnDestroy {
   }
 
   private updatePosition(update: PositionChange | undefined): void {
+    this.lastPositionChange = update;
     if (!update) {
       this.positionClass.set('');
       this.arrowPos.set(undefined);

projects/element-ng/tour/si-tour.service.ts

@@ -224,11 +224,11 @@ export class SiTourService {
         { originX: 'start', overlayX: 'end', originY: 'center', overlayY: 'center' },
         { originX: 'end', overlayX: 'start', originY: 'center', overlayY: 'center' }
       ]);
-    this.overlayRef!.updatePositionStrategy(positionStrategy);
     this.positionChangeSub = positionStrategy.positionChanges
       .pipe(map(change => ({ change, anchor })))
       // We only want to forward the next channel, as the positionChanges completes when setting a new origin.
       .subscribe(value => this.tourToken.positionChange.next(value));
+    this.overlayRef!.updatePositionStrategy(positionStrategy);
   }
 
   private createOrUpdateOverlays(): void {