src/app/features/forms/statement-editor/components/arrangement-form-group/arrangement-form-group.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<mat-drawer-container [formGroup]="appFormGroup"
                      [hasBackdrop]="false"
                      class="editor--arrangement">
  <mat-drawer-content class="editor--arangement--content">
    <div #cdkDropListRef="cdkDropList"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="textBlockSelectComponent.dropList"
         [cdkDropListData]="appControls"
         [formArrayName]="appFormArrayName"
         cdkDropList
         class="editor--arrangement--panel">

      <app-text-block-control
        (appAdd)="addControl($event,i + 1)"
        (appRemove)="removeControlAt(i)"
        (cdkDragEnded)="isDragging = false"
        (cdkDragReleased)="isDragging = false"
        (cdkDragStarted)="isDragging = true"
        *ngFor="let control of appControls; let i = index; trackBy: trackBy;"
        [appErrors]="appFormGroup | getFormError : 'arrangement' : appFormArrayName: i | errorToMessages"
        [appReplacements]="control.replacements"
        [appSelects]="control.selects"
        [appTextBlockModel]="control.textBlock"
        [formControlName]="i"
        cdkDrag
        [cdkDragDisabled]="appFormGroup.disabled"
        class="grab">
      </app-text-block-control>

    </div>

    <div class="editor--arrangement--panel editor--arrangement--panel---border-left">
      <app-text-block-select
        #textBlockSelectComponent
        (appAdd)="addTextBlock($event)"
        (appRemove)="removeControlAt($event)"
        [appConnectedTo]="cdkDropListRef"
        [appGroups]="appTextBlockGroups"
        [appSelectedIds]="appSelectedTextBlockIds"
        [appDisabled]="appFormGroup.disabled"
        [appReplacements]="appReplacements"
        [appShortMode]="appShortMode">
      </app-text-block-select>
    </div>
  </mat-drawer-content>

  <mat-drawer [(opened)]="appShowPreview" [autoFocus]="false" [position]="'end'" class="editor--arrangement--preview">
    <div class="editor--arrangement--preview--text">
      <app-statement-preview [appTextArrangements]="appControls | arrangementToPreview | combineBlockdataText"
                             [class.disable]="appFormGroup.disabled"></app-statement-preview>
    </div>
  </mat-drawer>
</mat-drawer-container>

<ng-container
  *ngIf="isDragging"
  [appGlobalClass]="'grabbing'">
</ng-container>