fix(kit): correctly loose box shadow on tile after dragged (#9733)

projects/demo-playwright/tests/kit/tiles/tiles.pw.spec.ts

@@ -0,0 +1,20 @@
+import {DemoRoute} from '@demo/routes';
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+test.describe('Tiles', () => {
+    test('correctly loose box shadow after dragged', async ({page}) => {
+        await tuiGoto(page, `${DemoRoute.Tiles}#vertical`);
+
+        const example = new TuiDocumentationPagePO(page).getExample('#vertical');
+        const first = example.locator('tui-tile').first();
+        const last = example.locator('tui-tile').last();
+
+        await expect(example).toHaveScreenshot('01-tiles-drag-and-drop.png');
+
+        await first.dragTo(last);
+        await page.waitForTimeout(300);
+
+        await expect(example).toHaveScreenshot('02-tiles-drag-and-drop.png');
+    });
+});

projects/demo-playwright/utils/goto.ts

@@ -52,6 +52,10 @@ export async function tuiGoto(
         route.fulfill({path: `${__dirname}/../stubs/manrope-fonts.ttf`}),
     );
 
+    await page.route('https://www.youtube.com/**', async (route) =>
+        route.fulfill({path: `${__dirname}/../stubs/angular-logo.mp4`}),
+    );
+
     const response = await page.goto(url, playwrightGotoOptions);
     const app = page.locator('app');
 

projects/kit/components/tiles/tile.component.ts

@@ -4,6 +4,7 @@ import {
     Component,
     inject,
     Input,
+    signal,
     ViewChild,
 } from '@angular/core';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
@@ -18,7 +19,7 @@ import {TuiTilesComponent} from './tiles.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TuiTileService],
     host: {
-        '[class._dragged]': 'dragged',
+        '[class._dragged]': 'dragged()',
         '[style.gridColumn]': 'column',
         '[style.gridRow]': 'row',
         '(pointerenter)': 'onEnter()',
@@ -31,7 +32,7 @@ export class TuiTile implements OnDestroy, AfterViewInit {
     private readonly service = inject(TuiTileService);
     private readonly tiles = inject(TuiTilesComponent);
 
-    protected dragged = false;
+    protected dragged = signal(false);
 
     @Input()
     public width = 1;
@@ -44,8 +45,14 @@ export class TuiTile implements OnDestroy, AfterViewInit {
     public onDrag(offset: readonly [number, number]): void {
         const dragged = !Number.isNaN(offset[0]);
 
-        this.dragged = this.dragged || dragged;
-        this.tiles.element = dragged ? this.element : null;
+        /**
+         * TODO: should be this.dragged.set(this.dragged() || dragged);
+         * but transitionend doesn't work like that for some unknown reason
+         * due to a conflict with parent change detection
+         */
+        this.dragged.set(dragged);
+
+        this.tiles.element.set(dragged ? this.element : null);
         this.service.setOffset(offset);
     }
 
@@ -56,8 +63,8 @@ export class TuiTile implements OnDestroy, AfterViewInit {
     }
 
     public ngOnDestroy(): void {
-        if (this.tiles.element === this.element) {
-            this.tiles.element = null;
+        if (this.tiles.element() === this.element) {
+            this.tiles.element.set(null);
         }
     }
 
@@ -74,6 +81,6 @@ export class TuiTile implements OnDestroy, AfterViewInit {
     }
 
     protected onTransitionEnd(): void {
-        this.dragged = false;
+        this.dragged.set(false);
     }
 }

projects/kit/components/tiles/tiles.component.ts

@@ -3,6 +3,7 @@ import {
     Component,
     Input,
     Output,
+    signal,
     ViewEncapsulation,
 } from '@angular/core';
 import {
@@ -29,7 +30,7 @@ import {BehaviorSubject, debounce, filter, map, Subject, timer} from 'rxjs';
         },
     ],
     host: {
-        '[class._dragged]': 'element',
+        '[class._dragged]': 'element()',
         '(pointerleave.silent)': 'rearrange()',
     },
 })
@@ -47,7 +48,7 @@ export class TuiTilesComponent {
         map((element) => this.reorder(element)),
     );
 
-    public element: Element | null = null;
+    public element = signal<Element | null>(null);
 
     public readonly order$ = new BehaviorSubject(new Map<number, number>());
 
@@ -65,12 +66,12 @@ export class TuiTilesComponent {
     }
 
     private filter(element?: Element): element is Element {
-        return !!this.element && !!element && this.element !== element;
+        return !!this.element() && !!element && this.element() !== element;
     }
 
     private reorder(element: Element): Map<number, number> {
         const elements = Array.from(this.el.children);
-        const currentIndex = elements.indexOf(this.element || element);
+        const currentIndex = elements.indexOf(this.element() || element);
         const newIndex = elements.indexOf(element);
         const order = this.order.size
             ? new Map(this.order)