summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
blob: 9828645bf57c1a0c8610afa5d7f1a238d325a1a7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {HighlightPipe} from "../../pipes/highlight/highlight-filter.pipe";
import * as _ from 'lodash';

@Component({
  selector: 'custom-ellipsis',
  template: `
    <span
      custom-tooltip
      class="ellipsis"
      [attr.data-tests-id]="dataTestId"
      id="{{id}}"
      [innerHtml]="displayValue | safe : 'html'"
      [ngStyle]="{'white-space' :  showDots ? 'nowrap' : 'initial'}"
      [ngClass]="{'breakWord' : breakWord == true}"
      [tooltip-text]="value">
      </span>`,
  styles: [
      `
      .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        width: 99%;
        text-align: left;
      }

      .breakWord {
        word-wrap: break-word;
        white-space: normal;
      }
    `
  ],
  providers: [HighlightPipe]
})
export class EllipsisComponent implements OnChanges {
  @Input() value: string;
  @Input() id: string;
  @Input() hightlight: string;
  @Input() breakWord: boolean = false;
  @Input() dataTestId: string;
  @Input() showDots: boolean = false;

  displayValue: string;

  constructor(private _highlightPipe: HighlightPipe) {
    this.displayValue = this.value;
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.displayValue = this.value;
    if (!_.isNil(this.hightlight)) {
      this.displayValue = this._highlightPipe.transform(this.value, this.hightlight ? this.hightlight : '');
    }
  }
}