fix(kit): emit overflownChange after finished transitionend event

projects/demo-playwright/utils/page-objects/documentation-api-page.po.ts

@@ -30,20 +30,26 @@ export class TuiDocumentationApiPagePO {
         }
     }
 
-    public async hideContent(): Promise<void> {
+    public async hideScrollbars(): Promise<void> {
         const bars = await this.page
             .locator('tui-root > tui-scroll-controls .t-bar')
             .all();
 
         for (const bar of bars) {
             await tuiHideElement(bar);
         }
+    }
+
+    public async hideContent(): Promise<void> {
+        await this.hideScrollbars();
 
         return tuiHideElement(this.page.locator('tui-doc-page'));
     }
 
     public async hideDocumentation(): Promise<void> {
-        const documentations = await this.page.locator('tui-doc-documentation').all();
+        const documentations = await this.page
+            .locator('tui-doc-documentation, [tuiDocApi]')
+            .all();
 
         for (const documentation of documentations) {
             await tuiHideElement(documentation);
@@ -58,6 +64,7 @@ export class TuiDocumentationApiPagePO {
         await this.hideDocumentation();
         await this.hideNavigation();
         await this.hideNotifications();
+        await this.hideScrollbars();
 
         if ((await this.apiPageExample.all()).length) {
             await this.apiPageExample.evaluate((el) => el.scrollIntoView());

projects/demo/src/modules/components/line-clamp/examples/3/index.html

@@ -2,12 +2,13 @@
     <div
         #parent
         class="line-clamp-box"
+        (waResizeObserver)="onResize(parent)"
     >
         <tui-line-clamp
             class="line-clamp"
             [content]="content"
-            [lineHeight]="getDynamicLineHeight(parent)"
-            [linesLimit]="getDynamicLineLimit(parent)"
+            [lineHeight]="lineHeight || getDynamicLineHeight(parent)"
+            [linesLimit]="lineLimit || getDynamicLineLimit(parent)"
         />
 
         <ng-template #content>

projects/demo/src/modules/components/line-clamp/examples/3/index.ts

@@ -1,19 +1,23 @@
-import {Component, inject} from '@angular/core';
+import {ChangeDetectorRef, Component, inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {WA_WINDOW} from '@ng-web-apis/common';
+import {WaResizeObserver} from '@ng-web-apis/resize-observer';
 import {TuiLineClamp} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
-    imports: [TuiLineClamp],
+    imports: [TuiLineClamp, WaResizeObserver],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
 export default class Example {
     private readonly win = inject(WA_WINDOW);
+    private readonly cd = inject(ChangeDetectorRef);
+    protected lineHeight = NaN;
+    protected lineLimit = NaN;
 
     protected getDynamicLineHeight(element: HTMLDivElement): number {
         return parseInt(this.win.getComputedStyle(element).lineHeight, 10);
@@ -22,4 +26,10 @@ export default class Example {
     protected getDynamicLineLimit(element: HTMLDivElement): number {
         return Math.floor(element.offsetHeight / 24);
     }
+
+    protected onResize(element: HTMLDivElement): void {
+        this.lineHeight = this.getDynamicLineHeight(element);
+        this.lineLimit = this.getDynamicLineLimit(element);
+        this.cd.detectChanges();
+    }
 }

projects/demo/src/modules/components/line-clamp/index.html

@@ -56,7 +56,7 @@
                 [lineHeight]="lineHeight"
                 [linesLimit]="linesLimit"
                 [style.maxWidth.px]="maxWidth"
-                (overflownChange)="documentationPropertyOverflownChange.emitEvent($event)"
+                (overflownChange)="overflownChange.emitEvent($event)"
             />
             <ng-template #defaultExampleContent>
                 Lorem ipsum
@@ -68,54 +68,53 @@
                 Veni, vidi, vici
             </ng-template>
         </tui-doc-demo>
-        <tui-doc-documentation>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="content"
-                documentationPropertyType="PolymorpheusContent"
-                [(documentationPropertyValue)]="content"
+
+        <table tuiDocAPI>
+            <tr
+                name="[content]"
+                tuiDocAPIItem
+                type="PolymorpheusContent"
+                [(value)]="content"
             >
                 Content
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="lineHeight"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="lineHeight"
+            </tr>
+            <tr
+                name="[lineHeight]"
+                tuiDocAPIItem
+                type="number"
+                [(value)]="lineHeight"
             >
                 Height of single line. It used to limit component's height.
-            </ng-template>
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="linesLimit"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="linesLimit"
+            </tr>
+            <tr
+                name="[linesLimit]"
+                tuiDocAPIItem
+                type="number"
+                [(value)]="linesLimit"
             >
                 Number of visible lines
-            </ng-template>
-            <ng-template
-                #documentationPropertyOverflownChange="documentationProperty"
-                documentationPropertyMode="output"
-                documentationPropertyName="overflownChange"
-                documentationPropertyType="boolean"
+            </tr>
+            <tr
+                name="[style.max-width.px]"
+                tuiDocAPIItem
+                type="number"
+                [(value)]="maxWidth"
+            >
+                Value of max-width
+            </tr>
+            <tr
+                #overflownChange
+                name="(overflownChange)"
+                tuiDocAPIItem
+                type="boolean"
             >
                 Emits
                 <code>true</code>
                 if there's extra content which isn't visible otherwise
                 <code>false</code>
                 when all content is visible.
-            </ng-template>
-        </tui-doc-documentation>
-        <tui-doc-documentation heading="CSS customization">
-            <ng-template
-                documentationPropertyMode="input"
-                documentationPropertyName="style.maxWidth.px"
-                documentationPropertyType="number"
-                [(documentationPropertyValue)]="maxWidth"
-            >
-                Value of max-width
-            </ng-template>
-        </tui-doc-documentation>
+            </tr>
+        </table>
     </ng-template>
 
     <tui-setup *pageTab />

projects/kit/components/line-clamp/line-clamp.component.ts

@@ -11,32 +11,41 @@ import {
     ViewChild,
 } from '@angular/core';
 import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
-import {tuiTypedFromEvent} from '@taiga-ui/cdk/observables';
+import {ResizeObserverService} from '@ng-web-apis/resize-observer';
+import {tuiTakeUntilDestroyed, tuiTypedFromEvent} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement, tuiIsCurrentTarget} from '@taiga-ui/cdk/utils/dom';
 import {
     TUI_HINT_COMPONENT,
     TuiHint,
     TuiHintDirective,
 } from '@taiga-ui/core/directives/hint';
+import {TUI_ANIMATIONS_DEFAULT_DURATION} from '@taiga-ui/core/utils/miscellaneous';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 import type {Observable} from 'rxjs';
 import {
     BehaviorSubject,
+    combineLatest,
+    debounceTime,
     distinctUntilChanged,
     filter,
     map,
     of,
     pairwise,
+    race,
     startWith,
     Subject,
     switchMap,
+    timer,
 } from 'rxjs';
 
 import {TUI_LINE_CLAMP_OPTIONS} from './line-clamp.options';
 import {TuiLineClampBox} from './line-clamp-box.component';
 import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
 
+// 4px buffer for IE/Edge incorrectly rounding scrollHeight
+const BUFFER = 4;
+
 @Component({
     standalone: true,
     selector: 'tui-line-clamp',
@@ -45,6 +54,7 @@ import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
     styleUrls: ['./line-clamp.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
+        ResizeObserverService,
         {
             provide: TUI_HINT_COMPONENT,
             useValue: TuiLineClampBox,
@@ -71,7 +81,6 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
     protected initialized = signal(false);
     protected maxHeight = signal(0);
     protected height = signal(0);
-
     protected lineClamp = toSignal(
         this.linesLimit$.pipe(
             startWith(1),
@@ -89,6 +98,19 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
         {initialValue: 0},
     );
 
+    protected readonly $ = combineLatest(
+        inject(ResizeObserverService, {self: true}),
+        race(
+            timer(TUI_ANIMATIONS_DEFAULT_DURATION),
+            tuiTypedFromEvent(this.el, 'transitionend').pipe(filter(tuiIsCurrentTarget)),
+        ),
+    )
+        .pipe(debounceTime(0), tuiTakeUntilDestroyed())
+        .subscribe(() => {
+            this.ngDoCheck();
+            this.isOverflown$.next(this.overflown);
+        });
+
     @Input()
     public lineHeight = 24;
 
@@ -105,8 +127,11 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
     }
 
     public ngDoCheck(): void {
-        this.update();
-        this.isOverflown$.next(this.overflown);
+        if (this.outlet) {
+            this.height.set(this.outlet.nativeElement.scrollHeight + BUFFER);
+        }
+
+        this.maxHeight.set(this.lineHeight * this.linesLimit$.value);
     }
 
     public ngAfterViewInit(): void {
@@ -118,11 +143,18 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
             return false;
         }
 
-        const {scrollHeight, scrollWidth} = this.outlet.nativeElement;
+        const {
+            scrollHeight,
+            scrollWidth,
+            clientHeight: outletHeight,
+        } = this.outlet.nativeElement;
         const {clientHeight, clientWidth} = this.el;
 
-        // 4px buffer for IE/Edge incorrectly rounding scrollHeight
-        return scrollHeight - clientHeight > 4 || scrollWidth - clientWidth > 0;
+        return (
+            scrollHeight - clientHeight > BUFFER ||
+            scrollWidth - clientWidth > 0 ||
+            scrollHeight > outletHeight
+        );
     }
 
     protected get computedContent(): PolymorpheusContent {
@@ -132,12 +164,4 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
     protected updateView(): void {
         this.cd.detectChanges();
     }
-
-    private update(): void {
-        if (this.outlet) {
-            this.height.set(this.outlet.nativeElement.scrollHeight + 4);
-        }
-
-        this.maxHeight.set(this.lineHeight * this.linesLimit$.value);
-    }
 }

projects/kit/components/line-clamp/line-clamp.style.less

@@ -5,6 +5,9 @@
     display: block;
     overflow: hidden;
 
+    // To trigger transition event when duration is 0
+    transition-delay: 1ms;
+
     &._initialized {
         .transition(max-height);
     }