diff --git a/projects/common/classes/textFieldElement.ts b/projects/common/classes/textFieldElement.ts index 7181f15c5a180aa5c53b233dc0ee5b9ffd0bae52..989b3ec6da2b23995c31f3a869d26339b9872828 100644 --- a/projects/common/classes/textFieldElement.ts +++ b/projects/common/classes/textFieldElement.ts @@ -14,6 +14,8 @@ export class TextFieldElement extends InputElement implements FontElement, Surfa inputAssistance: boolean = false; inputAssistancePreset: 'french' | 'numbers' | 'numbersAndOperators' | null = null; + clearable: boolean = false; + fontColor: string = 'black'; font: string = 'Roboto'; fontSize: number = 18; diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts index 452211b95cfb83fcc36fcaa628955c93ae290d8e..b6a2046b170262175a6370634cfa8125d5764854 100644 --- a/projects/common/element-components/text-field.component.ts +++ b/projects/common/element-components/text-field.component.ts @@ -23,6 +23,10 @@ import { TextFieldElement } from '../classes/textFieldElement'; autocomplete="off" [formControl]="elementFormControl" placeholder="{{elementModel.label}}"> + <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear" + (click)="elementFormControl.setValue('')"> + <mat-icon>close</mat-icon> + </button> <mat-error *ngIf="elementFormControl.errors"> {{elementFormControl.errors | errorTransform: elementModel}} </mat-error> diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html index 70a36c4f57a14b568c7a85b81bfe7d2b05600056..5bfa5e3ad5d0023757ff16840b7e0327a3ea54e6 100644 --- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html +++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html @@ -206,6 +206,12 @@ (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)"> + Knopf zum Leeren anzeigen + </mat-checkbox> + <mat-checkbox *ngIf="combinedProperties.inputAssistance !== undefined" [checked]="$any(combinedProperties.inputAssistance)" (change)="updateModel('inputAssistance', $event.checked)">