my-test123/app/components/card/card.component.html

A planner front-end for Fabric8.

<div class="f8-board-card card-pf card-pf-view card-pf-view-select card-pf-view-single-select"
  [routerLink]="cardValue.hasLink?cardValue?.link:null"
  [routerLinkActive]="cardValue.hasLink?['active']:['']"
  [queryParams]="cardValue.hasLink?existingQueryParams:null">
  <div class="f8-board-card__row">
    <span class="dropdown-kebab-pf dropdown pull-right" dropdown>
      <button class="btn btn-link color-grey dropdown-toggle"
        id="f8-board-card__row-button"
        type="button"
        aria-haspopup="true"
        aria-expanded="true"
        (click)="kebabClick($event)" dropdownToggle>
        <span class="fa fa-ellipsis-v"></span>
      </button>
      <ul class="dropdown-menu-right dropdown-menu"
        aria-labelledby="dropdownKebabRight" *dropdownMenu>
        <li *ngFor="let menu of cardValue.menuItem"
          [attr.id]="menu.id">
          <a *ngIf="menu.link"
            [routerLink]="menu.link?[menu.link]:null"
            [queryParams]="menu.link?existingQueryParams:null"
            (click)="kebabMenuClick($event, menu.id)">
              {{menu.value}}
          </a>
          <span
            *ngIf="!menu.link"
            (click)="kebabMenuClick($event, menu.id)">
            {{menu.value}}
          </span>
        </li>
      </ul>
    </span>
    <div class="pull-left">
      <span class="f8-board-card__type-icon fa {{cardValue.type}} pull-left"></span>
      <span class="f8-board-card__id pull-left padding-h-5"> {{cardValue?.id}} </span>
    </div>
  </div>
  <div class="f8-board-card__row">
    <div class="user-avatar pull-right margin-right-5">
      <img
        *ngIf="cardValue.avatar!==''"
        placement="top"
        tooltip="{{wItem?.attributes?.fullName}}"
        src="{{cardValue.avatar + '&s=20'}}"
        onError="this.src='https://avatars0.githubusercontent.com/u/563119?v=3&s=20'" />
      <span class="pficon-user not-assigned-user-icon"
        *ngIf="cardValue.avatar==''"
        tooltip="unassigned"
        placement="top"></span>
    </div>
    <div class="margin-right-15 padding-right-15"
      tooltip="{{cardValue.title}}"
      placement="top"
      [innerHTML]="cardValue.title | truncate : 80">
    </div>
  </div>
  <div class="f8-board-card__row">
    <f8-label [truncateAfter]='4'
      [labels]="cardValue.extraData.labels"
      [allowDelete]="false">
    </f8-label>
  </div>
</div>