Add ht-description component (#543)

* feat(description): create description component

* feat(description):  add text truncation recalculate on resize

* fix(description): use cahngedetctionref

* fix(description): linting

* fix(description): resize event

* fix(description): linting

Co-authored-by: Dmitriy Potychkin <dmitriy.traceable.ai>
Co-authored-by: Anand Tiwary <52081890+anandtiwary@users.noreply.github.com>

Author: DmitiryPotychkin

projects/components/src/description/description.component.scss

@@ -0,0 +1,22 @@
+:host {
+  min-width: 0;
+}
+
+.description {
+  display: flex;
+}
+
+.description-button {
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+  &-more {
+    margin-left: 5px;
+  }
+}
+
+.truncated-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

projects/components/src/description/description.component.test.ts

@@ -0,0 +1,34 @@
+import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { DescriptionComponent } from './description.component';
+
+describe('Description Component', () => {
+  let spectator: Spectator<DescriptionComponent>;
+
+  const createHost = createHostFactory<DescriptionComponent>({
+    component: DescriptionComponent,
+    shallow: true
+  });
+
+  test('should render the description', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+
+    expect(spectator.query('.description')).toExist();
+    expect(spectator.query('.description-text')).toHaveText('Description text');
+  });
+
+  test('should show full description text if pressed button show more', () => {
+    spectator = createHost('<ht-description [description] = "description"> </ht-description>', {
+      hostProps: {
+        description: 'Description text'
+      }
+    });
+
+    expect(spectator.component.isDescriptionTextToggled).toBeFalsy();
+    spectator.component.toggleDescriptionText();
+    expect(spectator.component.isDescriptionTextToggled).toBeTruthy();
+  });
+});

projects/components/src/description/description.component.ts

@@ -0,0 +1,81 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild
+} from '@angular/core';
+
+@Component({
+  selector: 'ht-description',
+  styleUrls: ['./description.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="description" (htLayoutChange)="this.remeasure()" #eventDescriptionContainer>
+      <div
+        class="description-text"
+        [ngClass]="{ 'truncated-text': !isDescriptionTextToggled }"
+        data-sensitive-pii
+        #eventDescriptionText
+      >
+        {{ description }}
+        <span
+          *ngIf="isDescriptionTruncated && isDescriptionTextToggled"
+          (click)="toggleDescriptionText()"
+          class="description-button"
+          >show less</span
+        >
+      </div>
+      <div
+        class="description-button description-button-more"
+        *ngIf="isDescriptionTruncated && !isDescriptionTextToggled"
+        (click)="toggleDescriptionText()"
+      >
+        show more
+      </div>
+    </div>
+  `
+})
+export class DescriptionComponent implements OnChanges, AfterViewInit {
+  public isInitialized: boolean = false;
+  public isDescriptionTextToggled: boolean = false;
+  public isDescriptionTruncated!: boolean;
+
+  @ViewChild('eventDescriptionText', { read: ElementRef })
+  public readonly eventDescriptionText!: ElementRef;
+
+  @ViewChild('eventDescriptionContainer', { read: ElementRef })
+  public readonly eventDescriptionContainer!: ElementRef;
+
+  @Input()
+  public description!: string;
+
+  public constructor(private readonly cdRef: ChangeDetectorRef) {}
+
+  public ngOnChanges(): void {
+    if (this.isInitialized) {
+      this.remeasure();
+    }
+  }
+
+  public ngAfterViewInit(): void {
+    this.isInitialized = true;
+    this.remeasure();
+  }
+
+  public toggleDescriptionText(): void {
+    this.isDescriptionTextToggled = !this.isDescriptionTextToggled;
+  }
+
+  public remeasure(): void {
+    this.isDescriptionTextToggled = false;
+    this.cdRef.detectChanges();
+
+    this.isDescriptionTruncated =
+      this.eventDescriptionContainer.nativeElement.offsetWidth < this.eventDescriptionText.nativeElement.scrollWidth;
+    this.cdRef.detectChanges();
+  }
+}

projects/components/src/description/description.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { LayoutChangeModule } from '../layout/layout-change.module';
+import { DescriptionComponent } from './description.component';
+
+@NgModule({
+  imports: [CommonModule, LayoutChangeModule],
+  declarations: [DescriptionComponent],
+  exports: [DescriptionComponent]
+})
+export class DescriptionModule {}

projects/components/src/public-api.ts

@@ -304,3 +304,7 @@ export * from './confirmation/confirmation.service';
 // Notification
 export * from './notification/notification.service';
 export * from './notification/notification.module';
+
+// Description
+export * from './description/description.component';
+export * from './description/description.module';