Skip to content

Commit

Permalink
fix(kit): LineClamp fix initial transition (#10070)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladimirpotekhin authored Dec 26, 2024
1 parent aa9ff64 commit 14426cd
Showing 1 changed file with 4 additions and 22 deletions.
26 changes: 4 additions & 22 deletions projects/kit/components/line-clamp/line-clamp.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {AsyncPipe} from '@angular/common';
import type {AfterViewInit, DoCheck} from '@angular/core';
import {
ChangeDetectionStrategy,
Expand All @@ -7,22 +6,20 @@ import {
ElementRef,
inject,
Input,
NgZone,
Output,
signal,
ViewChild,
} from '@angular/core';
import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
import {WaResizeObserver} from '@ng-web-apis/resize-observer';
import {tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk/observables';
import {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 type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
import type {Observable} from 'rxjs';
import {
BehaviorSubject,
Expand All @@ -34,7 +31,6 @@ import {
startWith,
Subject,
switchMap,
timer,
} from 'rxjs';

import {TUI_LINE_CLAMP_OPTIONS} from './line-clamp.options';
Expand All @@ -44,14 +40,7 @@ import {TuiLineClampPositionDirective} from './line-clamp-position.directive';
@Component({
standalone: true,
selector: 'tui-line-clamp',
imports: [
AsyncPipe,
PolymorpheusOutlet,
PolymorpheusTemplate,
TuiHint,
TuiLineClampPositionDirective,
WaResizeObserver,
],
imports: [PolymorpheusOutlet, TuiHint, TuiLineClampPositionDirective],
templateUrl: './line-clamp.template.html',
styleUrls: ['./line-clamp.style.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
Expand All @@ -77,17 +66,12 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
private readonly options = inject(TUI_LINE_CLAMP_OPTIONS);
private readonly el = tuiInjectElement();
private readonly cd = inject(ChangeDetectorRef);
private readonly zone: NgZone = inject(NgZone);
private readonly linesLimit$ = new BehaviorSubject(1);
private readonly isOverflown$ = new Subject<boolean>();
protected initialized = signal(false);
protected maxHeight = signal(0);
protected height = signal(0);

protected readonly $ = timer(0)
.pipe(tuiZonefree(this.zone), takeUntilDestroyed())
.subscribe(() => this.initialized.set(true));

protected lineClamp = toSignal(
this.linesLimit$.pipe(
startWith(1),
Expand Down Expand Up @@ -154,8 +138,6 @@ export class TuiLineClamp implements DoCheck, AfterViewInit {
this.height.set(this.outlet.nativeElement.scrollHeight + 4);
}

if (this.initialized()) {
this.maxHeight.set(this.lineHeight * this.linesLimit$.value);
}
this.maxHeight.set(this.lineHeight * this.linesLimit$.value);
}
}

0 comments on commit 14426cd

Please sign in to comment.