Add Z-Index property to elements

This defines the elements priority when stacking elements on the canvas. 
Directly maps to the CSS property.

Also show tooltip on the input to explain what it is for.

projects/common/app.module.ts

@@ -18,6 +18,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { ButtonComponent } from './element-components/button.component';
 import { CorrectionComponent } from './element-components/compound-components/correction.component';
@@ -78,7 +79,8 @@ import { DropdownComponent } from './element-components/dropdown.component';
     CheckboxComponent,
     DropdownComponent,
     CorrectionComponent,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatTooltipModule
   ]
 })
 export class SharedModule { }

projects/common/unit.ts

@@ -22,6 +22,7 @@ export interface UnitUIElement {
   id: string;
   xPosition: number;
   yPosition: number;
+  zIndex: number
   width: number;
   height: number;
   backgroundColor: string;

projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts

@@ -49,6 +49,7 @@ export class CanvasDragOverlayComponent implements OnInit {
       border: this._selected ? '2px solid' : '',
       width: `${this.element.width}px`,
       height: `${this.element.height}px`,
+      'z-index': `${this.element.zIndex}`,
       left: `${this.element.xPosition.toString()}px`,
       top: `${this.element.yPosition.toString()}px`
     };

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

@@ -102,6 +102,12 @@
           <input matInput type="number" [value]="combinedProperties.yPosition"
                  (input)="updateModel('yPosition', $any($event.target).value)">
         </mat-form-field>
+        <mat-form-field *ngIf="combinedProperties.hasOwnProperty('zIndex')">
+          <mat-label>Z-Index</mat-label>
+          <input matInput type="number" [value]="combinedProperties.zIndex"
+                 (input)="updateModel('zIndex', $any($event.target).value)"
+                 matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne.">
+        </mat-form-field>
       </div>
     </mat-tab>
 

projects/editor/src/app/model/UnitFactory.ts

@@ -6,7 +6,6 @@ import {
   VideoElement
 } from '../../../../common/unit';
 
-
 export function createUnit(): Unit {
   return {
     pages: []
@@ -37,6 +36,7 @@ export function createUnitUIElement(type: string): UnitUIElement {
     id: 'id_placeholder',
     xPosition: 0,
     yPosition: 0,
+    zIndex: 0,
     width: 180,
     height: 60,
     backgroundColor: 'lightgrey',