feat(kit): Push add setting the number of lines of text (#6682)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Feb 5, 2024 · df5e07d · df5e07d
1 parent 43a79c4
commit df5e07d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/projects/demo/src/modules/components/push/push.component.ts b/projects/demo/src/modules/components/push/push.component.ts
@@ -32,6 +32,7 @@ export class ExampleTuiPushComponent {
 
     heading = '';
     type = '';
+    lines = 2;
 
     readonly timestampVars = ['', 'A moment ago', 123456789];
     timestamp = this.timestampVars[0];

diff --git a/projects/demo/src/modules/components/push/push.template.html b/projects/demo/src/modules/components/push/push.template.html
@@ -34,6 +34,7 @@
         <tui-doc-demo>
             <tui-push
                 [heading]="heading"
+                [lines]="lines"
                 [timestamp]="timestamp"
                 [type]="type"
                 (close)="documentationPropertyClose.emitEvent($event)"
@@ -69,6 +70,13 @@
             >
                 Heading of the push
             </ng-template>
+            <ng-template
+                documentationPropertyName="lines"
+                documentationPropertyType="number"
+                [(documentationPropertyValue)]="lines"
+            >
+                A number of visible lines
+            </ng-template>
             <ng-template
                 documentationPropertyName="type"
                 documentationPropertyType="string"

diff --git a/projects/kit/components/push/push.component.ts b/projects/kit/components/push/push.component.ts
@@ -15,6 +15,9 @@ import {Observable} from 'rxjs';
     templateUrl: './push.template.html',
     styleUrls: ['./push.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    host: {
+        '[style.--t-lines]': 'lines',
+    },
 })
 export class TuiPushComponent {
     @Input()
@@ -23,6 +26,9 @@ export class TuiPushComponent {
     @Input()
     type = '';
 
+    @Input()
+    lines = 2;
+
     @Input()
     timestamp: number | string = '';
 

diff --git a/projects/kit/components/push/push.style.less b/projects/kit/components/push/push.style.less
@@ -66,7 +66,7 @@
 
     /* autoprefixer: ignore next */
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: var(--t-lines);
     word-break: break-word;
     overflow: hidden;
 }