feat(kit): add auto lineHeight for TuiLineClamp

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

@@ -0,0 +1,13 @@
+<tui-island class="huge">
+    <tui-line-clamp
+        content="Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons"
+        lineHeight="auto"
+    ></tui-line-clamp>
+</tui-island>
+
+<tui-island class="small">
+    <tui-line-clamp
+        content="Daenerys of the House Targaryen, the First of Her Name, The Unburnt, Queen of the Andals, the Rhoynar and the First Men, Queen of Meereen, Khaleesi of the Great Grass Sea, Protector of the Realm, Lady Regent of the Seven Kingdoms, Breaker of Chains and Mother of Dragons"
+        lineHeight="auto"
+    ></tui-line-clamp>
+</tui-island>

projects/demo/src/modules/components/line-clamp/examples/6/index.less

@@ -0,0 +1,7 @@
+.huge {
+    line-height: 40px;
+}
+
+.small {
+    line-height: 20px;
+}

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 {}

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'),
+    };
 }

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],
 })

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

@@ -45,6 +45,14 @@
         >
             <tui-line-clamp-example-5></tui-line-clamp-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="clamp-auto-line-height"
+            heading="Clamp lineHeight auto"
+            [content]="example6"
+        >
+            <tui-line-clamp-example-6></tui-line-clamp-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

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),
             );
         }
     }