<mat-card class="confirm-card mat-elevation-z dialog-creat-chat"> <mat-card-header> <mat-card-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle >{{ data.title }}</mat-card-title > <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)"> <i class="mdi mdi-window-close"></i> </button> </mat-card-header> <mat-card-content> <div> <ng-template #dialogContainer></ng-template> </div> <ng-template [ngTemplateOutlet]="selectedUserListTemplate"></ng-template> </mat-card-content> </mat-card> <ng-template #selectedUserListTemplate> <div class="list-chip"> <mat-chip-list aria-label="User selection"> <mat-chip *ngFor="let userInfo of selectedUserList" [selected]="getChipsRemoveYn(userInfo)" (removed)="onClickDeleteUser(userInfo)" > <!-- {{ userInfo | ucapTranslate: 'name' }} --> {{ userInfo.name }} <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)" >clear</mat-icon > </mat-chip> </mat-chip-list> </div> <ng-container *ngIf=" SelectUserDialogType.NewChat === SelectUserDialogType.NewChat; then newchatcount; else defaultcount " ></ng-container> <ng-template #newchatcount> <span [ngClass]="selectedUserList.length >= 300 ? 'text-warn-color' : ''"> {{ selectedUserList.length }} / 300 <!-- {{ environment.productConfig.CommonSetting.maxChatRoomUser - 1 }} --> <!-- {{ 'common.units.persons' | translate }} --> </span> <span class="text-warn-color" style="float: right;" *ngIf="selectedUserList.length >= 300" > <!-- ({{ 'chat.errors.maxCountOfRoomMemberWith' | translate : { maxCount: environment.productConfig.CommonSetting.maxChatRoomUser - 1 } }}) --> </span> </ng-template> <ng-template #defaultcount> <span> {{ selectedUserList.length }} <!-- {{ 'common.units.persons' | translate }} --> </span> </ng-template> </ng-template>