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" [matTooltip]="'Elementspezifische Eigenschaften'">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 *ngIf="combinedProperties.position || combinedProperties.dimensions">
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon" [matTooltip]="'Position & Maße'">format_shapes</mat-icon>
      </ng-template>
      <aspect-position-and-dimension-properties
        [dimensions]="combinedProperties.type === 'trigger' ? null : combinedProperties.dimensions"
        [positionProperties]="combinedProperties.position"
        [isZIndexDisabled]="combinedProperties.type === 'trigger'">
      </aspect-position-and-dimension-properties>
    </mat-tab>

    <mat-tab *ngIf="combinedProperties.styling">
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon" [matTooltip]="'Gestaltung'">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 [style.align-self]="'center'"
                  [indeterminate]="interactionIndeterminate"
                  [checked]="interactionEnabled"
                  (change)="setElementInteractionEnabled($event.checked)">
      {{'propertiesPanel.setElementInteractionEnabled' | translate }}
    </mat-checkbox>
    <button mat-raised-button [disabled]="selectedElements.length > 1 || selectionService.isCompoundChildSelected"
            (click)="duplicateElement()">
      {{'propertiesPanel.duplicateElement' | translate }}
    </button>
    <button mat-raised-button color="warn" [disabled]="selectionService.isCompoundChildSelected"
            (click)="deleteElement()">
      {{'propertiesPanel.deleteElement' | translate }}
    </button>
  </div>
</div>
<ng-container *ngIf="selectedElements.length === 0">
  <p class="no-selection">{{'propertiesPanel.noElementSelected' | translate }}</p>
</ng-container>