src/app/features/forms/statement-editor/components/statement-editor-form/statement-editor-form.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
 -------------------------------------------------------------------------------->

<app-file-preview
  *ngIf="file$ | async"
  [appFile]="file$ | async"
  class="pdf-overlay">
</app-file-preview>

<app-statement-editor-side-menu
  (appCompile)="compile()"
  (appCompleteFinalization)="finalize($event)"
  (appSave)="submit()"
  (appSaveAndCompleteTask)="submit({ completeTask: $event.variables, claimNext: $event.claimNext})"
  (appSaveAndContribute)="submit({ contribute: true })"
  (appSaveAndFinalize)="submit({ compile: true })"
  (appValidate)="validate()"
  [appForFinalization]="(file$ | async) != null"
  [appLoading]="isLoading$ | async"
  [appTask]="task$ | async"
  [appUserRoles]="userRoles$ | async">

</app-statement-editor-side-menu>

<app-collapsible
  *ngIf="showContributions$ | async"
  [appTitle]="('statementEditorForm.container.contributionStatus' | translate)
     + ' (' + (selectedContributionsCount$ | async) + '/' + (requiredContributionOptions$ | async).length + ')'"
  [formGroup]="appFormGroup">

  <app-select-group
    [appGroups]="requiredContributionGroups$ | async"
    [appOptions]="requiredContributionOptions$ | async"
    [formControlName]="'contributions'"
    style="padding: 1em;">
  </app-select-group>

</app-collapsible>

<app-collapsible
  [appHeaderTemplateRef]="arrangementHeaderRef"
  [appTitle]="'statementEditorForm.container.draft' | translate"
  [formGroup]="appFormGroup">

  <app-arrangement-form-group
    [appControls]="controls$ | async"
    [appFormGroup]="appFormGroup"
    [appSelectedTextBlockIds]="selectedTextBlockIds$ | async"
    [appShortMode]="appShortMode"
    [appShowPreview]="appShowPreview"
    [appReplacements]="replacements$ | async"
    [appTextBlockGroups]="textBlockGroups$ | async">
  </app-arrangement-form-group>

</app-collapsible>

<app-collapsible
  [appCollapsed]="false"
  [appTitle]="'statementEditorForm.container.attachments' | translate">

  <app-attachments-form-group
    [appAutoTagIds]="[outboxTagId]"
    [appFormGroup]="appFormGroup | getFormGroup: 'attachments'"
    [appRestrictedTagIds]="[outboxTagId]"
    [appForbiddenTagIds]="[statementTagId]"
    [appWithoutTagControl]="true">
  </app-attachments-form-group>

</app-collapsible>

<ng-template #arrangementHeaderRef>
  <div class="editor--arrangement--header">
    <button (click)="appShortMode = !appShortMode"
            class="openk-button editor--arrangement--header--button" type="button">
      <mat-icon class="editor--arrangement--header--button--icon">
        {{appShortMode ? "unfold_more" : "unfold_less"}}
      </mat-icon>
    </button>

    <button (click)="appShowPreview = !appShowPreview"
            class="openk-button editor--arrangement--header--button" type="button">
      <mat-icon class="editor--arrangement--header--button--icon">
        {{appShowPreview ? "chevron_right" : "chevron_left"}}
      </mat-icon>
    </button>
  </div>

</ng-template>