Newer
Older
<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.emit({property: 'id', value: $any($event.target).value })">
<input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
</mat-form-field>
<aspect-input-element-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-input-element-properties>
<ng-container *ngIf="combinedProperties.document">
<button (click)="unitService.showDefaultEditDialog(selectedElements[0])">
<mat-icon>build_circle</mat-icon>
</button>
</ng-container>
<ng-container *ngIf="combinedProperties.player">
<button mat-raised-button fxFlexAlign="center" fxFill
[style.width.%]="95" [style.min-width.%]="95"
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
Medienoptionen
</button>
</ng-container>
<ng-container *ngIf="combinedProperties.src">
<button mat-fab color="primary" fxFlexAlign="center"
[matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'"
(click)="changeMediaSrc(combinedProperties.type)">
<mat-icon>upload_file</mat-icon>
<aspect-text-properties-field-set [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-text-properties-field-set>
<aspect-options-field-set [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-options-field-set>
<aspect-select-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-select-properties>
<mat-form-field *ngIf="combinedProperties.alignment" appearance="fill">
<mat-label>{{'propertiesPanel.alignment' | translate }}</mat-label>
<mat-select [value]="combinedProperties.alignment"
(selectionChange)="updateModel.emit({ property: 'alignment', value: $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.emit({ property: 'resizeEnabled', value: $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]="$any(combinedProperties.rowCount)"
(input)="updateModel.emit({ property: 'rowCount', value: $any($event.target).value })">
</mat-form-field>
<aspect-button-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-button-properties>
<mat-form-field *ngIf="combinedProperties.options !== undefined && !combinedProperties.connectedTo"
appearance="fill">
<mat-label>{{'preset' | translate }}</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel.emit({ property: 'value', 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.richTextOptions !== undefined && !combinedProperties.connectedTo"
appearance="fill">
<mat-label>{{'preset' | translate }}</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel.emit({ property: 'value', value: $event.value })">
<mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
<mat-option *ngFor="let option of $any(combinedProperties.richTextOptions); let i = index" [value]="i"
[innerHTML]="option + ' (Index: ' + i + ')'">
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.columns !== undefined && combinedProperties.rows === undefined"
appearance="fill">
<mat-label>{{'preset' | translate }}</mat-label>
<mat-select [value]="combinedProperties.value"
(selectionChange)="updateModel.emit({ property: 'value', 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>
<aspect-slider-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-slider-properties>
<ng-container *ngIf="combinedProperties.value === true || combinedProperties.value === false">
{{'preset' | translate }}
<mat-button-toggle-group [value]="combinedProperties.value"
(change)="updateModel.emit({ property: 'value', 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" #presetValue="ngModel"
[ngModel]="combinedProperties.value"
(ngModelChange)="updateModel.emit({
property: 'value',
value: $event,
isInputValid: presetValue.valid})">
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.type === 'text-area'"
appearance="fill">
<mat-label>{{'preset' | translate }}</mat-label>
<textarea matInput type="text"
[value]="$any(combinedProperties.value)"
(input)="updateModel.emit({ property: 'value', value: $any($event.target).value })">
</textarea>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.type === 'text-field'"
appearance="fill">
<mat-label>{{'preset' | translate }}</mat-label>
<input matInput type="text" [value]="$any(combinedProperties).value"
(input)="updateModel.emit({property: 'value', value: $any($event.target).value })">
</mat-form-field>
<aspect-text-field-element-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-text-field-element-properties>
<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)="moveListValue('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.rowLabel.text}}
<img [src]="row.rowLabel.imgSrc"
[style.object-fit]="'scale-down'"
[style.height.px]="40">
(click)="editLikertRow(i)">
<mat-icon>build</mat-icon>
</button>
<button mat-icon-button color="primary"
(click)="removeListValue('rows', row)">
<mat-icon>clear</mat-icon>
</button>
</div>
</div>
</ng-container>
<div fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button matPrefix
(click)="addLikertRow(newRow.value); newRow.select()">
<mat-icon>add</mat-icon>
</button>
<input #newRow matInput type="text" placeholder="Fragetext"
(keyup.enter)="addLikertRow(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)="moveListValue('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" [innerHTML]="sanitizer.bypassSecurityTrustHtml(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)="removeListValue('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>
<aspect-scale-and-zoom-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-scale-and-zoom-properties>
<mat-checkbox *ngIf="combinedProperties.verticalOrientation !== undefined"
[checked]="$any(combinedProperties.verticalOrientation)"
(change)="updateModel.emit({ property: 'verticalOrientation', value: $event.checked })">
{{'propertiesPanel.verticalOrientation' | translate }}
</mat-checkbox>
<aspect-drop-list-properties [combinedProperties]="combinedProperties"
(updateModel)="updateModel.emit($event)">
</aspect-drop-list-properties>
<mat-form-field *ngIf="combinedProperties.firstColumnSizeRatio != null"
matTooltip="{{'propertiesPanel.firstColumnSizeRatioExplanation' | translate }}"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.firstColumnSizeRatio' | translate }}</mat-label>
<input matInput type="number" [value]="$any(combinedProperties.firstColumnSizeRatio)"
(input)="updateModel.emit({ property: 'firstColumnSizeRatio', value: $any($event.target).value })">
</mat-form-field>
</div>