ohayolibs/packages/components/ellipsis/ellipsis.component.html

Ohayo is a set of essential modules for ohayojp.

<div (cdkObserveContent)="refresh()" #orgEl style="display: none;"><ng-content></ng-content></div>
<ng-template #tooltipTpl let-con>
  <span *ngIf="tooltip; else con" nz-tooltip [nzTooltipTitle]="titleTpl" [nzTooltipOverlayStyle]="{ 'overflow-wrap': 'break-word', 'word-wrap': 'break-word' }">
    <ng-container *ngTemplateOutlet="con"></ng-container>
    <ng-template #titleTpl><div [innerHTML]="orgHtml"></div></ng-template>
  </span>
</ng-template>
<ng-container [ngSwitch]="type">
  <span *ngSwitchCase="'default'" [ngClass]="cls"></span>
  <ng-container *ngSwitchCase="'length'">
    <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lengthTpl }"></ng-template>
    <ng-template #lengthTpl>{{ text }}</ng-template>
  </ng-container>
  <ng-container *ngSwitchCase="'line-clamp'">
    <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineClampTpl }"></ng-template>
    <ng-template #lineClampTpl>
      <div [ngClass]="cls" [ngStyle]="{ '-webkit-line-clamp': lines, '-webkit-box-orient': 'vertical' }"></div>
    </ng-template>
  </ng-container>
  <div *ngSwitchCase="'line'" [ngClass]="cls">
    <div class="ellipsis__handle">
      <ng-template [ngTemplateOutlet]="tooltipTpl" [ngTemplateOutletContext]="{ $implicit: lineTpl }"></ng-template>
      <ng-template #lineTpl>{{ linsWord }}</ng-template>
      <div class="ellipsis__shadow" #shadowOrgEl [innerHTML]="orgHtml"></div>
      <div class="ellipsis__shadow" #shadowTextEl>
        <span>{{ text }}</span>
      </div>
    </div>
  </div>
</ng-container>