Add onlyOneItem and orientation property to DropList

Also improve conditional border style. The additional dragPreview is 
needed so the dragged item does not have the border.

projects/common/element-components/compound-elements/drop-list.component.ts

 import { Component } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
-import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDropList, DragRef, DropListRef, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { DropListElement } from '../../models/compound-elements/drop-list';
 import { FormElementComponent } from '../../form-element-component.directive';
 
@@ -18,20 +18,30 @@ import { FormElementComponent } from '../../form-element-component.directive';
          [style.font-style]="elementModel.italic ? 'italic' : ''"
          [style.text-decoration]="elementModel.underline ? 'underline' : ''"
          [style.backgroundColor]="elementModel.backgroundColor"
+         [style.display]="elementModel.orientation === 'horizontal' ? 'flex' : ''"
+         [style.flex-direction]="elementModel.orientation === 'horizontal' ? 'row' : ''"
          cdkDropList
          [id]="elementModel.id"
          [cdkDropListData]="this"
          [cdkDropListConnectedTo]="elementModel.connectedTo"
+         [cdkDropListOrientation]="elementModel.orientation"
+         [cdkDropListEnterPredicate]="onlyOneItemPredicate"
          (cdkDropListDropped)="drop($event)">
-      <div class="item" *ngFor="let option of elementModel.options" cdkDrag>
+      <div class="item" *ngFor="let option of elementModel.options; let i = index" cdkDrag
+           [ngClass]="{'vertical-item': elementModel.orientation === 'vertical' &&
+                                   i+1 < elementModel.options.length,
+                       'horizontal-item': elementModel.orientation === 'horizontal' &&
+                                   i+1 < elementModel.options.length}">
+        <div *cdkDragPreview>{{option}}</div>
         {{option}}
       </div>
     </div>
   `,
   styles: [
-    '.list {border: 1px solid; border-radius: 3px}',
+    '.list {border: 1px solid; border-radius: 3px;}',
     '.item {padding: 10px;}',
-    '.item:not(:last-child) {border-bottom: 1px solid;}'
+    '.vertical-item {border-bottom: 1px solid}',
+    '.horizontal-item {border-right: 1px solid}'
   ]
 })
 export class DropListComponent extends FormElementComponent {
@@ -51,4 +61,8 @@ export class DropListComponent extends FormElementComponent {
     }
     this.elementFormControl.setValue(event.container.data.elementModel.options);
   }
+
+  onlyOneItemPredicate(drag: CdkDrag, drop: CdkDropList): boolean {
+    return !drop.data.elementModel.onlyOneItem || drop.data.elementModel.options.length < 1;
+  }
 }

projects/common/models/compound-elements/drop-list.ts

@@ -4,7 +4,9 @@ import { initFontElement, initSurfaceElement } from '../../util/unit-interface-i
 
 export class DropListElement extends InputElement implements FontElement, SurfaceUIElement {
   options: string[] = [];
+  onlyOneItem: boolean = false;
   connectedTo: string[] = [];
+  orientation: 'vertical' | 'horizontal' = 'vertical';
 
   fontColor: string = 'black';
   font: string = 'Roboto';

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html

@@ -407,6 +407,24 @@
           </div>
         </mat-form-field>
 
+        <mat-form-field *ngIf="combinedProperties.orientation !== undefined"
+                        appearance="fill">
+          <mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
+          <mat-select [value]="combinedProperties.orientation"
+                      (selectionChange)="updateModel('orientation', $event.value)">
+            <mat-option *ngFor="let option of ['vertical', 'horizontal']"
+                        [value]="option">
+              {{ 'propertiesPanel.' + option | translate }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-checkbox *ngIf="combinedProperties.onlyOneItem !== undefined"
+                      [checked]="$any(combinedProperties.onlyOneItem)"
+                      (change)="updateModel('onlyOneItem', $event.checked)">
+          {{'propertiesPanel.onlyOneItem' | translate }}
+        </mat-checkbox>
+
         <mat-divider></mat-divider>
 
         <button mat-raised-button class="element-button"

projects/editor/src/assets/i18n/de.json

@@ -105,6 +105,7 @@
     "magnifierSize": "Größe der Lupe",
     "magnifierZoom": "Vergrößerungsfaktor",
     "connectedDropList": "Verbundene Ablegelisten",
+    "onlyOneItem": "Nur ein erlaubtes Element",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
     "noElementSelected": "Kein Element ausgewählt"