vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts

   1 import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
   2 import {HighlightPipe} from "../../pipes/highlight/highlight-filter.pipe";
   3 import * as _ from 'lodash';
   4
   5 @Component({
   6   selector: 'custom-ellipsis',
   7   template: `
   8     <span
   9       custom-tooltip
  10       class="ellipsis"
  11       [attr.data-tests-id]="dataTestId"
  12       id="{{id}}"
  13       [innerHtml]="displayValue | safe : 'html'"
  14       [ngStyle]="{'white-space' :  showDots ? 'nowrap' : 'initial'}"
  15       [ngClass]="{'breakWord' : breakWord == true}"
  16       [tooltip-text]="value">
  17       </span>`,
  18   styles: [
  19       `
  20       .ellipsis {
  21         white-space: nowrap;
  22         overflow: hidden;
  23         text-overflow: ellipsis;
  24         display: inline-block;
  25         width: 99%;
  26         text-align: left;
  27       }
  28
  29       .breakWord {
  30         word-wrap: break-word;
  31         white-space: normal;
  32       }
  33     `
  34   ],
  35   providers: [HighlightPipe]
  36 })
  37 export class EllipsisComponent implements OnChanges {
  38   @Input() value: string;
  39   @Input() id: string;
  40   @Input() hightlight: string;
  41   @Input() breakWord: boolean = false;
  42   @Input() dataTestId: string;
  43   @Input() showDots: boolean = false;
  44
  45   displayValue: string;
  46
  47   constructor(private _highlightPipe: HighlightPipe) {
  48     this.displayValue = this.value;
  49   }
  50
  51   ngOnChanges(changes: SimpleChanges): void {
  52     this.displayValue = this.value;
  53     if (!_.isNil(this.hightlight)) {
  54       this.displayValue = this._highlightPipe.transform(this.value, this.hightlight ? this.hightlight : '');
  55     }
  56   }
  57 }