common-ui/src/lib/inputs/editable-input/editable-input.component.html
2023-01-18 06:51:56 +02:00

36 lines
1.1 KiB
HTML

<ng-container *ngIf="!editing">
<div *ngIf="showPreview">
{{ value }}
</div>
<div class="flex">
<iqser-circle-button
(action)="editing = true"
[tooltip]="editTooltip"
[type]="buttonsType"
class="edit-button"
icon="iqser:edit"
></iqser-circle-button>
<ng-content select="[slot=editing]"></ng-content>
</div>
</ng-container>
<ng-container *ngIf="editing">
<form (submit)="saveValue()">
<div [class]="'iqser-input-group ' + class">
<input (ngModelChange)="newValue = $event" [ngModel]="value" [placeholder]="placeholder" name="name" />
</div>
</form>
<div class="flex">
<iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
<iqser-circle-button
(action)="editing = false"
[tooltip]="cancelTooltip"
[type]="buttonsType"
icon="iqser:close"
></iqser-circle-button>
</div>
</ng-container>