<ng-container *ngIf="selectedElements.length > 0">
<mat-tab-group mat-stretch-tabs dynamicHeight>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">build</mat-icon>
</ng-template>
<div fxLayout="column">
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.id' | translate }}</mat-label>
<input matInput type="text" *ngIf="selectedElements.length === 1" [value]="combinedProperties.id"
(input)="updateModel('id', $any($event.target).value)">
<input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.label !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.label' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.label"
(input)="updateModel('label', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.buttonLabel !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.spellCorrectButtonLabel' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.buttonLabel"
(input)="updateModel('buttonLabel', $any($event.target).value)">
</mat-form-field>
<ng-container *ngIf="combinedProperties.text">
{{'propertiesPanel.text' | translate }}
<div class="text-text" [innerHTML]="$any(combinedProperties.text) | safeResourceHTML"
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
</div>
</ng-container>
<!-- Autostart for detecting a player-element -->
<ng-container *ngIf="combinedProperties.autostart !== undefined">
<button (click)="unitService.showDefaultEditDialog(selectedElements[0])">
<mat-icon>build_circle</mat-icon>
</button>
</ng-container>
<mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
<input matInput type="number" [value]="combinedProperties.borderRadius"
(input)="updateModel('borderRadius', $any($event.target).value)">
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.highlightable !== undefined"
[checked]="$any(combinedProperties.highlightable)"
(change)="updateModel('highlightable', $event.checked)">
{{'propertiesPanel.highlightable' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.strikeOtherOptions !== undefined"
[checked]="$any(combinedProperties.strikeOtherOptions)"
(change)="updateModel('strikeOtherOptions', $event.checked)">
{{'propertiesPanel.strikeOtherOptions' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
[checked]="$any(combinedProperties.allowUnset)"
(change)="updateModel('allowUnset', $event.checked)">
{{'propertiesPanel.allowUnset' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.readOnly !== undefined"
[checked]="$any(combinedProperties.readOnly)"
(change)="updateModel('readOnly', $event.checked)">
{{'propertiesPanel.readOnly' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.required !== undefined"
[checked]="$any(combinedProperties.required)"
(change)="updateModel('required', $event.checked)">
{{'propertiesPanel.requiredField' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.required"
appearance="fill">
<mat-label>{{'propertiesPanel.requiredWarnMessage' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.requiredWarnMessage"
(input)="updateModel('requiredWarnMessage', $any($event.target).value)">
</mat-form-field>
<mat-form-field disabled="true" *ngIf="combinedProperties.options !== undefined">
<ng-container>
<mat-label>{{'propertiesPanel.options' | translate }}</mat-label>
<div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.options"
(cdkDropListDropped)="reorderOptions('options', $any($event))">
<div *ngFor="let option of $any(combinedProperties.options); let i = index" cdkDrag
class="list-items" fxLayout="row" fxLayoutAlign="end center">
<div fxFlex="70">
{{option}}
</div>
<button mat-icon-button color="primary"
(click)="editTextOption('options', i)">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button color="primary"
(click)="removeOption('options', option)">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
</ng-container>
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button matPrefix
(click)="addOption('options', newOption.value); newOption.select()">
<mat-icon>add</mat-icon>
</button>
<input #newOption matInput type="text" placeholder="Optionstext"
(keyup.enter)="addOption('options', newOption.value); newOption.select()">
</div>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.alignment" appearance="fill">
<mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
<mat-select [value]="combinedProperties.alignment"
(selectionChange)="updateModel('alignment', $event.value)">
<mat-option *ngFor="let option of ['column', 'row']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.resizeEnabled !== undefined"
[checked]="$any(combinedProperties.resizeEnabled)"
(change)="updateModel('resizeEnabled', $event.checked)">
{{'propertiesPanel.resizeEnabled' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.rowCount != null"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'rows' | translate }}</mat-label>
<input matInput type="number" [value]="combinedProperties.rowCount"
(input)="updateModel('rowCount', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.action' | translate }}</mat-label>
<mat-select [value]="combinedProperties.action"
(selectionChange)="updateModel('action', $event.value)">
<mat-option *ngFor="let option of [undefined, 'previous', 'next', 'first', 'last', 'end']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<ng-container *ngIf="combinedProperties.imageSrc !== undefined">
<input #imageUpload type="file" hidden (click)="loadImage()">
<button mat-raised-button (click)="imageUpload.click()">{{'loadImage' | translate }}</button>
<button mat-raised-button (click)="removeImage()">{{'removeImage' | translate }}</button>
<img [src]="combinedProperties.imageSrc"
[style.object-fit]="'scale-down'"
[width]="200">
</ng-container>
<mat-form-field *ngIf="combinedProperties.options !== undefined && !combinedProperties.connectedTo"
appearance="fill">
<mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel('value', $event.value)">
<mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
<mat-option *ngFor="let option of $any(combinedProperties).options; let i = index" [value]="i">
{{option}} (Index: {{i}})
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.columns !== undefined"
appearance="fill">
<mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel('value', $event.value)">
<mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
<mat-option *ngFor="let column of $any(combinedProperties).columns; let i = index" [value]="i">
{{column.name}} (Index: {{i}})
</mat-option>
</mat-select>
</mat-form-field>
<ng-container *ngIf="combinedProperties.value === true || combinedProperties.value === false">
{{'propertiesPanel.preset' | translate }}
<mat-button-toggle-group [value]="combinedProperties.value"
(change)="updateModel('value', $event.value)">
<mat-button-toggle [value]="true">{{'propertiesPanel.true' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="false">{{'propertiesPanel.false' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
</ng-container>
<mat-form-field *ngIf="combinedProperties.minValue !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
<input matInput type="number" #value="ngModel"
[ngModel]="combinedProperties.value"
(ngModelChange)="updateModel('value', $event, value.valid)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.value !== undefined && combinedProperties.minValue === undefined &&
!combinedProperties.options && !combinedProperties.columns &&
combinedProperties.value !== true && combinedProperties.value !== false"
appearance="fill">
<mat-label>{{'propertiesPanel.preset' | translate }}</mat-label>
<textarea matInput type="text"
[value]="combinedProperties.value"
(input)="updateModel('value', $any($event.target).value)">
</textarea>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.appearance !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.appearance' | translate }}</mat-label>
<mat-select [value]="combinedProperties.appearance"
(selectionChange)="updateModel('appearance', $event.value)">
<mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
{displayValue: 'legacy', value: 'legacy'},
{displayValue: 'fill', value: 'fill'},
{displayValue: 'outline', value: 'outline'}]"
[value]="option.value">
{{option.displayValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.minLength !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.minLength' | translate }}</mat-label>
<input matInput type="number" #minLength="ngModel" min="0"
[ngModel]="combinedProperties.minLength"
(ngModelChange)="updateModel('minLength', $event, minLength.valid)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.minValue !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.minValue' | translate }}</mat-label>
<input matInput type="number" #minValue="ngModel" min="0"
[ngModel]="combinedProperties.minValue"
(ngModelChange)="updateModel('minValue', $event, minValue.valid)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.maxValue !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.maxValue' | translate }}</mat-label>
<input matInput type="number" #maxValue="ngModel" min="0"
[ngModel]="combinedProperties.maxValue"
(ngModelChange)="updateModel('maxValue', $event, maxValue.valid)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.minLength &&
$any(combinedProperties.minLength) > 0"
appearance="fill">
<mat-label>{{'propertiesPanel.minLengthWarnMessage' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.minLengthWarnMessage"
(input)="updateModel('minLengthWarnMessage', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.maxLength !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.maxLength' | translate }}</mat-label>
<input matInput type="number" #maxLength="ngModel" min="0"
[ngModel]="combinedProperties.maxLength"
(ngModelChange)="updateModel('maxLength', $event, maxLength.valid)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.maxLength &&
$any(combinedProperties.maxLength) > 0"
appearance="fill">
<mat-label>{{'propertiesPanel.maxLengthWarnMessage' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.maxLengthWarnMessage"
(input)="updateModel('maxLengthWarnMessage', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.pattern !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.pattern' | translate }}</mat-label>
<input matInput [value]="combinedProperties.pattern"
(input)="updateModel('pattern', $any($event.target).value)">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.pattern && $any(combinedProperties.pattern) !== ''"
appearance="fill"
matTooltip="Angabe als regulärer Ausdruck.">
<mat-label>{{'propertiesPanel.patternWarnMessage' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.patternWarnMessage"
(input)="updateModel('patternWarnMessage', $any($event.target).value)">
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.clearable !== undefined"
[checked]="$any(combinedProperties.clearable)"
(change)="updateModel('clearable', $event.checked)">
{{'propertiesPanel.clearable' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.inputAssistance' | translate }}</mat-label>
<mat-select [value]="combinedProperties.inputAssistancePreset"
(selectionChange)="updateModel('inputAssistancePreset', $event.value)">
<mat-option *ngFor="let option of ['none', 'french', 'numbers', 'numbersAndOperators']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== 'none' &&
combinedProperties.inputAssistancePosition !== undefined"
appearance="fill">
<mat-label>{{'propertiesPanel.inputAssistancePosition' | translate }}</mat-label>
<mat-select [value]="combinedProperties.inputAssistancePosition"
(selectionChange)="updateModel('inputAssistancePosition', $event.value)">
<mat-option *ngFor="let option of ['floating', 'right']"
[value]="option">
{{ 'propertiesPanel.' + option | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field disabled="true" *ngIf="combinedProperties.rows !== undefined">
<ng-container>
<mat-label>{{'rows' | translate }}</mat-label>
<div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.rows"
(cdkDropListDropped)="reorderOptions('rows', $any($event))">
<div *ngFor="let row of $any(combinedProperties.rows); let i = index" cdkDrag
class="list-items" fxLayout="row" fxLayoutAlign="end center">
<div fxFlex="70">
{{row.text}}
</div>
<button mat-icon-button color="primary"
(click)="editRowOption(i)">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button color="primary"
(click)="removeOption('rows', row)">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
</ng-container>
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button matPrefix
(click)="addRow(newRow.value); newRow.select()">
<mat-icon>add</mat-icon>
</button>
<input #newRow matInput type="text" placeholder="Fragetext"
(keyup.enter)="addRow(newRow.value); newRow.select()">
</div>
</mat-form-field>
<mat-form-field disabled="true" *ngIf="combinedProperties.columns !== undefined">
<ng-container>
<mat-label>{{'columns' | translate }}</mat-label>
<div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.columns"
(cdkDropListDropped)="reorderOptions('columns', $any($event))">
<div *ngFor="let column of $any(combinedProperties.columns); let i = index" cdkDrag
class="list-items" fxLayout="row" fxLayoutAlign="end center">
<div fxFlex="70">
{{column.text}}
</div>
<img [src]="column.imgSrc"
[style.object-fit]="'scale-down'"
[style.height.px]="40">
<button mat-icon-button color="primary"
(click)="editColumnOption(i)">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button color="primary"
(click)="removeOption('columns', column)">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
</ng-container>
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button matPrefix
(click)="addColumn(newColumn.value); newColumn.select()">
<mat-icon>add</mat-icon>
</button>
<input #newColumn matInput type="text" placeholder="Antworttext"
(keyup.enter)="addColumn(newColumn.value); newColumn.select()">
</div>
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.lineColoring !== undefined"
[checked]="$any(combinedProperties.lineColoring)"
(change)="updateModel('lineColoring', $event.checked)">
{{'propertiesPanel.lineColoring' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.lineColoring && combinedProperties.lineColoringColor"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.lineColoringColor' | translate }}</mat-label>
<input matInput type="color" [value]="combinedProperties.lineColoringColor"
(input)="updateModel('lineColoringColor', $any($event.target).value)">
</mat-form-field>
<mat-checkbox *ngIf="combinedProperties.magnifier !== undefined"
[checked]="$any(combinedProperties.magnifier)"
(change)="updateModel('magnifier', $event.checked)">
{{'propertiesPanel.magnifier' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.magnifier" appearance="fill">
<mat-label>{{'propertiesPanel.magnifierSize' | translate }} in px</mat-label>
<input matInput type="number" #magnifierSize="ngModel" min="0"
[ngModel]="combinedProperties.magnifierSize"
(ngModelChange)="updateModel('magnifierSize', $event, magnifierSize.valid)">
</mat-form-field>
<ng-container *ngIf="combinedProperties.magnifier">
{{'propertiesPanel.magnifierZoom' | translate }}
<mat-slider min="1" max="3" step="0.1" [ngModel]="combinedProperties.magnifierZoom"
(change)="updateModel('magnifierZoom', $event.value)">
</mat-slider>
<div *ngIf="combinedProperties.magnifier">
{{combinedProperties.magnifierZoom}}
</div>
</ng-container>
<mat-form-field disabled="true" *ngIf="combinedProperties.connectedTo !== undefined">
<ng-container>
<mat-label>{{'propertiesPanel.connectedDropList' | translate }}</mat-label>
<div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.connectedTo"
(cdkDropListDropped)="reorderOptions('connectedTo', $any($event))">
<div *ngFor="let connectedTo of $any(combinedProperties.connectedTo); let i = index" cdkDrag
class="list-items" fxLayout="row" fxLayoutAlign="end center">
<div fxFlex="70">
{{connectedTo}}
</div>
<button mat-icon-button color="primary"
(click)="editTextOption('connectedTo', i)">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button color="primary"
(click)="removeOption('connectedTo', connectedTo)">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
</ng-container>
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button matPrefix
(click)="addOption('connectedTo', newconnectedTo.value); newconnectedTo.select()">
<mat-icon>add</mat-icon>
</button>
<input #newconnectedTo matInput type="text"
(keyup.enter)="addOption('connectedTo', newconnectedTo.value); newconnectedTo.select()">
</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-checkbox *ngIf="combinedProperties.showValues !== undefined"
[checked]="$any(combinedProperties.showValues)"
(change)="updateModel('showValues', $event.checked)">
{{'propertiesPanel.showValues' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.barStyle !== undefined"
[checked]="$any(combinedProperties.barStyle)"
(change)="updateModel('barStyle', $event.checked)">
{{'propertiesPanel.barStyle' | translate }}
</mat-checkbox>
<mat-checkbox *ngIf="combinedProperties.thumbLabel !== undefined"
[checked]="$any(combinedProperties.thumbLabel)"
(change)="updateModel('thumbLabel', $event.checked)">
{{'propertiesPanel.thumbLabel' | translate }}
</mat-checkbox>
<mat-divider></mat-divider>
<button mat-raised-button class="element-button"
(click)="duplicateElement()">
{{'propertiesPanel.duplicateElement' | translate }}
</button>
<button mat-raised-button class="element-button" color="warn"
(click)="deleteElement()">
{{'propertiesPanel.deleteElement' | translate }}
</button>
</div>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">format_shapes</mat-icon>
</ng-template>
<app-element-sizing-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel($event.property, $event.value, $event.isInputValid)">
</app-element-sizing-properties>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">palette</mat-icon>
</ng-template>
<app-element-style-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel($event.property, $event.value)">
</app-element-style-properties>
</mat-tab>
</mat-tab-group>
</ng-container>
<ng-container *ngIf="selectedElements.length === 0">
<p>{{'propertiesPanel.noElementSelected' | translate }}</p>
</ng-container>