next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/select-group.dialog.component.html

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title>{{ data.title }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="add-row">
      <button
        mat-button
        *ngIf="!isShowAddGroupField"
        (click)="isShowAddGroupField = !isShowAddGroupField"
        class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
      >
        <mat-icon>add</mat-icon>
        <span class="mat-fab__label">{{ 'group.addNew' | translate }}</span>
      </button>
      <div *ngIf="isShowAddGroupField" class="input-groupname-box">
        <mat-form-field
          hintLabel="{{
            'common.useOnlyForSpecialCharacter'
              | translate: { specialCharacter: '-,_' }
          }}"
        >
          <input
            matInput
            #inputGroupName
            type="text"
            maxlength="20"
            placeholder="{{ 'group.name' | translate }}"
            value=""
          />

          <button
            mat-button
            matSuffix
            mat-icon-button
            aria-label="Clear"
            (click)="inputGroupName.value = ''"
          >
            <mat-icon>close</mat-icon>
          </button>

          <mat-hint align="end"
            >{{ inputGroupName.value?.length || 0 }}/20</mat-hint
          >
        </mat-form-field>

        <div class="btn-box">
          <button mat-stroked-button (click)="onClickAddGroupCancel()">
            {{ 'common.messages.close' | translate }}
          </button>
          <button
            mat-stroked-button
            color="accent"
            (click)="onClickAddGroup(inputGroupName.value)"
            class="mat-accent"
          >
            {{ 'group.addNew' | translate }}
          </button>
        </div>
      </div>
    </div>
    <mat-selection-list #groups>
      <mat-list-option
        *ngFor="let groupBuddy of groupBuddyList$ | async"
        [value]="groupBuddy.group"
      >
        <span class="title-name ellipsis"> {{ groupBuddy.group.name }} </span>
        <span class="text-accent-color number"
          >({{ groupBuddy.buddyList.length
          }}{{ 'common.units.persons' | translate }})</span
        >
      </mat-list-option>
    </mat-selection-list>
    <!-- <div>
      <ucap-group-expansion-panel
        #groupExpansionPanel
        [groupBuddyList]="groupBuddyList$ | async"
        [checkable]="true"
      >
      </ucap-group-expansion-panel>
    </div> -->
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.no' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions>
</mat-card>