From 6b5b01bae837802f0b0ec37b562c7f0f748010f6 Mon Sep 17 00:00:00 2001 From: Svyatoslav Zaytsev Date: Fri, 16 Feb 2024 09:13:00 +0600 Subject: [PATCH] feat(kit): add auto lineHeight for TuiLineClamp --- .../line-clamp/examples/6/index.html | 13 +++++++++++++ .../line-clamp/examples/6/index.less | 7 +++++++ .../components/line-clamp/examples/6/index.ts | 12 ++++++++++++ .../line-clamp/line-clamp.component.ts | 6 ++++++ .../line-clamp/line-clamp.module.ts | 2 ++ .../line-clamp/line-clamp.template.html | 8 ++++++++ .../line-clamp/line-clamp.component.ts | 19 +++++++++++++++++-- 7 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 projects/demo/src/modules/components/line-clamp/examples/6/index.html create mode 100644 projects/demo/src/modules/components/line-clamp/examples/6/index.less create mode 100644 projects/demo/src/modules/components/line-clamp/examples/6/index.ts diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.html b/projects/demo/src/modules/components/line-clamp/examples/6/index.html new file mode 100644 index 000000000000..c2f833c6a24f --- /dev/null +++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.html @@ -0,0 +1,13 @@ + + + + + + + diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.less b/projects/demo/src/modules/components/line-clamp/examples/6/index.less new file mode 100644 index 000000000000..1a3031d5df86 --- /dev/null +++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.less @@ -0,0 +1,7 @@ +.huge { + line-height: 40px; +} + +.small { + line-height: 20px; +} diff --git a/projects/demo/src/modules/components/line-clamp/examples/6/index.ts b/projects/demo/src/modules/components/line-clamp/examples/6/index.ts new file mode 100644 index 000000000000..bc9f6ec9279a --- /dev/null +++ b/projects/demo/src/modules/components/line-clamp/examples/6/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-line-clamp-example-6', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiLineClampExample6 {} diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts index 4b2c10170cdf..cb821f4efd54 100644 --- a/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts +++ b/projects/demo/src/modules/components/line-clamp/line-clamp.component.ts @@ -46,4 +46,10 @@ export class ExampleTuiLineClampComponent { HTML: import('./examples/5/index.html?raw'), LESS: import('./examples/5/index.less?raw'), }; + + readonly example6: TuiDocExample = { + TypeScript: import('./examples/6/index.ts?raw'), + HTML: import('./examples/6/index.html?raw'), + LESS: import('./examples/6/index.less?raw'), + }; } diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts index 5b2bfd03dc5b..cc00d51accf4 100644 --- a/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts +++ b/projects/demo/src/modules/components/line-clamp/line-clamp.module.ts @@ -23,6 +23,7 @@ import {TuiLineClampExample2} from './examples/2'; import {TuiLineClampExample3} from './examples/3'; import {TuiLineClampExample4} from './examples/4'; import {TuiLineClampExample5} from './examples/5'; +import {TuiLineClampExample6} from './examples/6'; import {ExampleTuiLineClampComponent} from './line-clamp.component'; @NgModule({ @@ -49,6 +50,7 @@ import {ExampleTuiLineClampComponent} from './line-clamp.component'; TuiLineClampExample3, TuiLineClampExample4, TuiLineClampExample5, + TuiLineClampExample6, ], exports: [ExampleTuiLineClampComponent], }) diff --git a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html index 7bf3dd8d449e..3e675bb1b946 100644 --- a/projects/demo/src/modules/components/line-clamp/line-clamp.template.html +++ b/projects/demo/src/modules/components/line-clamp/line-clamp.template.html @@ -45,6 +45,14 @@ > + + + + diff --git a/projects/kit/components/line-clamp/line-clamp.component.ts b/projects/kit/components/line-clamp/line-clamp.component.ts index 9e04d1bb908f..7b466423f20a 100644 --- a/projects/kit/components/line-clamp/line-clamp.component.ts +++ b/projects/kit/components/line-clamp/line-clamp.component.ts @@ -13,6 +13,7 @@ import { Renderer2, ViewChild, } from '@angular/core'; +import {WINDOW} from '@ng-web-apis/common'; import {tuiIsCurrentTarget, tuiPx, tuiTypedFromEvent, tuiZonefree} from '@taiga-ui/cdk'; import {TUI_HINT_COMPONENT, TuiHintDirective} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; @@ -55,7 +56,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit { } @Input() - lineHeight = 24; + lineHeight: number | 'auto' = 24; @Input() content: PolymorpheusContent; @@ -82,6 +83,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit { @Inject(Renderer2) private readonly renderer: Renderer2, @Inject(ChangeDetectorRef) private readonly cd: ChangeDetectorRef, @Inject(NgZone) private readonly zone: NgZone, + @Inject(WINDOW) private readonly window: Window, @Inject(TUI_LINE_CLAMP_OPTIONS) private readonly options: TuiLineClampOptions, ) { this.skipInitialTransition(); @@ -103,6 +105,19 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit { return this.options.showHint && this.overflown ? this.content : ''; } + private get computedLineHeight(): number { + if (this.lineHeight === 'auto') { + return ( + parseInt( + this.window.getComputedStyle(this.el.nativeElement).lineHeight, + 10, + ) || 24 + ); + } + + return this.lineHeight; + } + @HostListener('transitionend') updateView(): void { this.cd.detectChanges(); @@ -139,7 +154,7 @@ export class TuiLineClampComponent implements DoCheck, AfterViewInit { this.renderer.setStyle( this.el.nativeElement, 'max-height', - tuiPx(this.lineHeight * this.linesLimit$.value), + tuiPx(this.computedLineHeight * this.linesLimit$.value), ); } }