next-ucap-messenger/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html

<div
  *ngIf="
    isShowTranslationPreview &&
    !!translationPreviewInfo &&
    !!translationPreviewInfo.previewInfo &&
    !!translationPreviewInfo.previewInfo.translation
  "
  class="translation-preview"
>
  <span class="translation-section">
    {{ translationPreviewInfo.previewInfo.translation }}
  </span>

  <button
    mat-stroked-button
    (click)="onClickSendTranslationMessage(translationPreviewInfo)"
  >
    {{ 'chat.send' | translate }}
  </button>
  <span class="btn-close">
    <button
      mat-button
      matSuffix
      mat-icon-button
      aria-label="Close"
      (click)="onClickTranslationCancel()"
    >
      <mat-icon>close</mat-icon>
    </button>
  </span>
</div>
<div>
  <form name="translationForm" [formGroup]="translationForm">
    <mat-form-field>
      <mat-label>{{
        'common.translations.targetLanguage' | translate
      }}</mat-label>
      <mat-select
        formControlName="destType"
        (selectionChange)="onChangeSelection($event)"
      >
        <mat-option value="">{{
          'common.translations.noTranslation' | translate
        }}</mat-option>
        <mat-option *ngFor="let dest of translationDestList" [value]="dest.key"
          >{{ dest.text }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-slide-toggle
      labelPosition="before"
      [checked]="simpleView"
      (change)="onChangToggleSimpleview($event)"
      >{{ 'common.translations.simpleView' | translate }}</mat-slide-toggle
    >
    <mat-slide-toggle
      labelPosition="before"
      [checked]="preView"
      (change)="onChangTogglePreview($event)"
      >{{ 'common.translations.preview' | translate }}</mat-slide-toggle
    >
  </form>
</div>