<!-- This component is a card that holds a colored sidebar with icons indicating
functionality, then space for a label & legend, then space for other contents. -->
<mat-card fxFlex [attr.id]="id" fxLayout="row" fxLayoutAlign="none center" (resized)="resize($event)">
  <div fxFlex fxLayout="column" fxFlexAlign="stretch" fxShrink='0' fxGrow='0' fxLayoutAlign="space-between center"
    [style.background-color]="color" class="colorbar">
    <mat-icon *ngIf="isEditable" matTooltip="You can edit this card">edit</mat-icon>
    <mat-icon *ngIf="isDraggable">
      drag_indicator
    </mat-icon>
    <mat-icon *ngIf="isRemovable" class="removeCardButton" (click)="remove($event)" matTooltip="Remove this card">clear</mat-icon>
  </div>
  <div *ngIf="label" fxFlex fxLayout="column" fxFlexAlign="stretch" fxGrow="0" fxShrink="0" class="labelColumn">
    <div fxFlex class="mat-title label">{{label}}</div>
    <!--Give the div that you want to appear here the class "legends-block".-->
    <ng-content select=".legends-block"></ng-content>
  </div>
  <!--Give the div that you want to appear here the class "contents-block".-->
  <ng-content select=".contents-block"></ng-content>
</mat-card>

<!-- This component is a card that holds a colored sidebar with icons indicating
functionality, then space for a label & legend, then space for other contents. -->
<mat-card fxFlex [attr.id]="id" fxLayout="row" fxLayoutAlign="none center" (resized)="resize($event)">
  <div fxFlex fxLayout="column" fxFlexAlign="stretch" fxShrink='0' fxGrow='0' fxLayoutAlign="space-between center"
    [style.background-color]="color" class="colorbar">
    <mat-icon *ngIf="isDraggable">
      drag_indicator
    </mat-icon>
    <mat-icon *ngIf="isEditable" matTooltip="You can edit this card">edit</mat-icon>
    <mat-icon *ngIf="isRemovable" class="removeCardButton" (click)="remove($event)" matTooltip="Remove this card">clear</mat-icon>
  </div>
  <div *ngIf="label" fxFlex fxLayout="column" fxFlexAlign="stretch" fxGrow="0" fxShrink="0" class="labelColumn">
    <div fxFlex class="mat-title label">{{label}}</div>
    <!--Give the div that you want to appear here the class "legends-block".-->
    <ng-content select=".legends-block"></ng-content>
  </div>
  <!--Give the div that you want to appear here the class "contents-block".-->
  <ng-content select=".contents-block"></ng-content>
</mat-card>

Move the dragger to be at the top of every card.
Move the dragger to be at the top of every card.

Change-Id: Ia4c6155ce7fb5faa6aa5e3f67deda4aa4e1f363e
GitOrigin-RevId: 2c3470a64155386d85194c08f5ee292634d65a83
