alfresco-ng2-components/lib/process-services/task-list/components/checklist.component.html

<div class="adf-checklist-control">
    <mat-chip-list data-automation-id="checklist-label">
        <span class="activiti-label">{{ 'ADF_TASK_LIST.DETAILS.LABELS.CHECKLIST' | translate }}</span>
        <mat-chip class="adf-process-badge" color="accent" selected="true">{{checklist?.length}}</mat-chip>
    </mat-chip-list>


    <button mat-icon-button *ngIf="!readOnly" matTooltip="Add a checklist" [matTooltipPosition]="'before'"
            id="add-checklist" class="adf-add-to-checklist-button" (click)="showDialog()">
        <mat-icon>add</mat-icon>
    </button>
</div>

<div class="adf-checklist-menu-container" *ngIf="checklist?.length > 0">
    <mat-chip-list class="mat-chip-list-stacked">
        <mat-chip id="check-{{check.id}}" class="adf-checklist-chip" *ngFor="let check of checklist"
                  (removed)="delete(check.id)">
            <span>{{check.name}}</span>
            <mat-icon *ngIf="!readOnly && !check.endDate" id="remove-{{check.id}}" matChipRemove>cancel
            </mat-icon>
        </mat-chip>
    </mat-chip-list>

</div>
<div *ngIf="checklist?.length === 0" id="checklist-none-message">
    {{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.NONE' | translate }}
</div>

<ng-template #dialog>
    <div class="adf-checklist-dialog" id="checklist-dialog">
        <h4 matDialogTitle id="add-checklist-title">{{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.DIALOG.TITLE' | translate }}</h4>
        <mat-dialog-content>
            <mat-form-field>
                <input matInput placeholder="{{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.DIALOG.PLACEHOLDER' | translate }}" [(ngModel)]="taskName" id="checklist-name"
                       data-automation-id="checklist-name">
            </mat-form-field>
        </mat-dialog-content>
        <mat-dialog-actions class="adf-checklist-dialog-actions">
            <button mat-button type="button" id="close-check-dialog" (click)="cancel()">{{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.DIALOG.CANCEL-BUTTON' | translate }}</button>
            <button mat-button type="button" id="add-check" (click)="add()">{{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.DIALOG.ADD-BUTTON' | translate }}</button>
        </mat-dialog-actions>
    </div>
</ng-template>