element-properties-panel.component.html

<div *ngIf="selectedElements.length > 0 && combinedProperties"
     class="properties-panel" fxFlexFill
     fxLayout="column" fxLayoutAlign="start stretch">
  <div class="panel-title" fxLayout="column">
    <ng-container *ngIf="combinedProperties.type">
      {{'toolbox.' + combinedProperties.type | translate}}
      <span>{{combinedProperties.id}}</span>
    </ng-container>
    <ng-container *ngIf="!combinedProperties.type">
      <i>Mehrfachauswahl</i>
    </ng-container>
  </div>

  <mat-divider></mat-divider>

  <mat-tab-group mat-stretch-tabs fxFlex>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon">build</mat-icon>
      </ng-template>
      <aspect-element-model-properties-component [combinedProperties]="combinedProperties"
                                                 [selectedElements]="selectedElements"
                                                 (updateModel)="updateModel($event.property, $event.value)">
      </aspect-element-model-properties-component>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon">format_shapes</mat-icon>
      </ng-template>
      <aspect-element-postion-properties [dimensions]="{ width: combinedProperties.width,
                                                         height: combinedProperties.height,
                                                         dynamicWidth: $any(combinedProperties).dynamicWidth}"
                                         [positionProperties]="combinedProperties.position">
      </aspect-element-postion-properties>
    </mat-tab>

    <mat-tab *ngIf="combinedProperties.styling">
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon">palette</mat-icon>
      </ng-template>
        <aspect-element-style-properties [styles]="combinedProperties.styling">
        </aspect-element-style-properties>
    </mat-tab>
  </mat-tab-group>

  <div fxLayout="column" class="button-group">
    <mat-divider></mat-divider>
    <button mat-raised-button [disabled]="selectedElements.length > 1 ||
                                          combinedProperties.type == 'toggle-button' ||
                                          combinedProperties.type == 'drop-list-simple' ||
                                          combinedProperties.type == 'text-field-simple'"
            (click)="duplicateElement()">
      {{'propertiesPanel.duplicateElement' | translate }}
    </button>
    <button mat-raised-button color="warn" [disabled]="combinedProperties.type == 'toggle-button' ||
                                                       combinedProperties.type == 'drop-list-simple' ||
                                                       combinedProperties.type == 'text-field-simple'"
            (click)="deleteElement()">
      {{'propertiesPanel.deleteElement' | translate }}
    </button>
  </div>
</div>
<ng-container *ngIf="selectedElements.length === 0">
  <p>{{'propertiesPanel.noElementSelected' | translate }}</p>
</ng-container>