From e489a80172b84ce2622d13b1bea02f11d24f7f07 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Mon, 23 Sep 2024 15:16:06 +0400
Subject: [PATCH] chore: fix

---
 .../elastic-sticky/elastic-sticky.service.ts   | 18 +++---------------
 .../components/dialog/examples/4/index.html    |  5 ++---
 .../components/dialog/examples/4/index.less    | 10 +++++-----
 .../components/dialog/examples/4/index.ts      | 15 ++++-----------
 4 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts b/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts
index 9ff1f7d329c5..9fa136042a42 100644
--- a/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts
+++ b/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts
@@ -1,26 +1,16 @@
-import {
-    afterNextRender,
-    ChangeDetectorRef,
-    DestroyRef,
-    inject,
-    Injectable,
-    INJECTOR,
-    NgZone,
-} from '@angular/core';
+import {afterNextRender, DestroyRef, inject, Injectable, INJECTOR} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {tuiScrollFrom, tuiZonefree} from '@taiga-ui/cdk/observables';
+import {tuiScrollFrom} from '@taiga-ui/cdk/observables';
 import {tuiGetElementOffset, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {SCROLL_REF_SELECTOR} from '@taiga-ui/core/components/scrollbar';
 import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
-import {map, Observable, Subscription, tap} from 'rxjs';
+import {map, Observable, Subscription} from 'rxjs';
 
 @Injectable()
 export class TuiElasticStickyService extends Observable<number> {
     private readonly injector = inject(INJECTOR);
     private readonly el = tuiInjectElement();
     private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement;
-    private readonly zone = inject(NgZone);
-    private readonly cd = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
     constructor() {
@@ -34,7 +24,6 @@ export class TuiElasticStickyService extends Observable<number> {
                     const {offsetHeight} = this.el;
                     const teardown = tuiScrollFrom(host)
                         .pipe(
-                            tuiZonefree(this.zone),
                             map(() =>
                                 Math.max(
                                     1 -
@@ -46,7 +35,6 @@ export class TuiElasticStickyService extends Observable<number> {
                                     0,
                                 ),
                             ),
-                            tap(() => this.cd.detectChanges()),
                             takeUntilDestroyed(this.destroyRef),
                         )
                         .subscribe(subscriber);
diff --git a/projects/demo/src/modules/components/dialog/examples/4/index.html b/projects/demo/src/modules/components/dialog/examples/4/index.html
index 3c4c0d3d0baf..3e369f715904 100644
--- a/projects/demo/src/modules/components/dialog/examples/4/index.html
+++ b/projects/demo/src/modules/components/dialog/examples/4/index.html
@@ -25,10 +25,9 @@ <h3>Long mobile dialog with filters</h3>
 <ng-template #long>
     <div class="background"></div>
     <header
+        #header
         class="header"
-        [style.transform]="transform"
-        [style.width]="width"
-        (tuiElasticSticky)="onElastic($event)"
+        (tuiElasticSticky)="onElastic($event, header)"
     >
         <section class="logo">
             <label class="date">8 March, 23:51</label>
diff --git a/projects/demo/src/modules/components/dialog/examples/4/index.less b/projects/demo/src/modules/components/dialog/examples/4/index.less
index 713780771352..663e5d737643 100644
--- a/projects/demo/src/modules/components/dialog/examples/4/index.less
+++ b/projects/demo/src/modules/components/dialog/examples/4/index.less
@@ -18,9 +18,9 @@
 .header {
     position: sticky;
     top: 0;
-    inline-size: calc(100% + 4rem);
-    margin-top: -2rem;
-    margin-left: -2rem;
+    inline-size: calc(100% + 3.5rem);
+    margin-top: -1.75rem;
+    margin-left: -1.75rem;
     text-align: center;
     word-wrap: break-word;
     background: var(--tui-chart-categorical-20);
@@ -32,8 +32,8 @@
     position: sticky;
     top: -1rem;
     block-size: 2rem;
-    inline-size: calc(100% + 4rem);
-    margin: -2rem 0 -2rem -2rem;
+    inline-size: calc(100% + 3.5rem);
+    margin: -1.75rem 0 -1.75rem -1.75rem;
     background: var(--tui-chart-categorical-20);
     border-radius: 1rem 1rem 0 0;
 }
diff --git a/projects/demo/src/modules/components/dialog/examples/4/index.ts b/projects/demo/src/modules/components/dialog/examples/4/index.ts
index e6d3aac8ea74..9aa15c5cb3a6 100644
--- a/projects/demo/src/modules/components/dialog/examples/4/index.ts
+++ b/projects/demo/src/modules/components/dialog/examples/4/index.ts
@@ -37,18 +37,11 @@ export default class Example {
 
     protected filters = false;
 
-    protected scale = 1;
+    protected onElastic(value: number, {style}: HTMLElement): void {
+        const scale = tuiClamp(value, 0.7, 1);
 
-    protected get transform(): string {
-        return `scale(${this.scale})`;
-    }
-
-    protected get width(): string {
-        return `calc((100% + 4rem) * ${1 / this.scale})`;
-    }
-
-    protected onElastic(value: number): void {
-        this.scale = tuiClamp(value, 0.5, 1);
+        style.setProperty('transform', `scale(${scale})`);
+        style.setProperty('width', `calc((100% + 3.5rem) / ${scale})`);
     }
 
     protected onFilterClick(): void {