src/app/shared/components/picklist-reactive/picklist-reactive.component.html

<!--
  /********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
-->
<div class="row">
  <div class="col-md-5 nopadding">
    <div class="card">
      <div class="card-header">
        <span>{{headlineSource}}</span>
        <ng-content select="[sourceHeader]"></ng-content>
      </div>
      <div class="card-body">
        <ag-grid-angular style="height:351px;" [localeText]="localeText" domLayout="autoHeight" class="ag-theme-balham w-100"
          [defaultColDef]="defaultColDef" [rowData]="sourceList" [columnDefs]="sourceListColumnDefs" (gridReady)="onGridReadySource($event)"
          [rowSelection]="rowSelection" pagination="true" paginationPageSize="10" [id]="gridSourceId">
        </ag-grid-angular>
      </div>
    </div>
  </div>
  <div class="col-md-2 mt-5">
    <div *ngIf="authService.userHasRoles(['BP_Sachbearbeiter']) || (authService.userHasRoles(['BP_Admin']) && embedLocation !== 'standbygroup')">
      <button class="btn btn-primary w-100 mb-1" (click)="moveToTarget(false)" [id]="btnMoveToTargetId">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
      </button>
      <button class="btn btn-primary w-100 mb-1" (click)="moveToTarget(true)" *ngIf="showMultiMoveButtons" [id]="btnMoveAllToTargetId">
        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
      </button>
      <button class="btn btn-primary w-100 mb-1" (click)="moveToSource(false)" [id]="btnMoveToSourceId">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
      </button>
      <button class="btn btn-primary w-100 mb-1" (click)="moveToSource(true)" *ngIf="showMultiMoveButtons" [id]="btnMoveAllToSourceId">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="col-md-5 nopadding">
    <div class="card">
      <div class="card-header">
        <span>{{headlineTarget}}</span>
        <span *ngIf="authService.userHasRoles(['BP_Sachbearbeiter'])" class="float-right">
          <button class="btn btn-sm btn-primary mr-1" (click)="headerActionTargetLeft()" *ngIf="headerActionTargetLableLeft"
            id="headerActionLeft">{{headerActionTargetLableLeft}}</button>
          <button class="btn btn-sm btn-primary" (click)="headerActionTargetRight()" *ngIf="headerActionTargetLableRight"
            id="headerActionRight">{{headerActionTargetLableRight}}</button>
        </span>
      </div>
      <div class="card-body">
        <ag-grid-angular style="height:351px;" [localeText]="localeText" domLayout="autoHeight" class="ag-theme-balham w-100"
          [defaultColDef]="defaultColDef" [rowData]="targetList" [columnDefs]="targetListColumnDefs" (gridReady)="onGridReadyTarget($event)"
          [rowSelection]="rowSelection" pagination="true" paginationPageSize="10" [id]="gridTargetId">
        </ag-grid-angular>
      </div>
    </div>
  </div>
</div>