element-properties-panel.component.html

<div *ngIf="selectedElements.length > 0 && combinedProperties"
     class="properties-panel fx-column-start-stretch fill">
  <div class="panel-title fx-column-start-stretch">
    <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-tab-group class="fx-flex" mat-stretch-tabs>
    <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-position-and-dimension-properties [dimensions]="combinedProperties.dimensions"
                                               [positionProperties]="combinedProperties.position">
      </aspect-position-and-dimension-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 class="button-group fx-column-start-stretch">
    <mat-checkbox class="fx-align-self-center"
                  [indeterminate]="interactionIndeterminate"
                  [checked]="interactionEnabled"
                  (change)="setElementInteractionEnabled($event.checked)">
      {{'propertiesPanel.setElementInteractionEnabled' | translate }}
    </mat-checkbox>
    <button mat-raised-button [disabled]="selectedElements.length > 1 ||
                                          combinedProperties.type == 'toggle-button' ||
                                          combinedProperties.type == 'text-field-simple'"
            (click)="duplicateElement()">
      {{'propertiesPanel.duplicateElement' | translate }}
    </button>
    <button mat-raised-button color="warn" [disabled]="combinedProperties.type == 'toggle-button' ||
                                                       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>