common-ui/src/lib/inputs/editable-input/editable-input.component.html
2023-09-07 19:23:36 +03:00

56 lines
1.7 KiB
HTML

<ng-container *ngIf="!editing">
<div *ngIf="showPreview">
{{ value }}
</div>
<div class="flex">
<iqser-circle-button
*ngIf="canEdit"
(action)="editing = true"
[tooltip]="editTooltip"
[type]="buttonsType"
[attr.help-mode-key]="helpModeKey"
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
*ngIf="!parentId; else expandableInput"
(ngModelChange)="newValue = $event"
[ngModel]="value"
[placeholder]="placeholder"
name="name"
/>
<ng-template #expandableInput>
<textarea
(ngModelChange)="newValue = $event"
[ngModel]="value"
[placeholder]="placeholder"
[id]="id"
name="name"
[style.width]="this.parentDimensions.width + 'px'"
[style.height]="this.parentDimensions.height + 'px'"
></textarea>
</ng-template>
</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>