DM-327 - Adaptable size of Component Edit value fields

src/lib/inputs/editable-input/editable-input.component.html

@@ -5,6 +5,7 @@
 
     <div class="flex">
         <iqser-circle-button
+            *ngIf="canEdit"
             (action)="editing = true"
             [tooltip]="editTooltip"
             [type]="buttonsType"
@@ -19,7 +20,24 @@
 <ng-container *ngIf="editing">
     <form (submit)="saveValue()">
         <div [class]="'iqser-input-group ' + class">
-            <input (ngModelChange)="newValue = $event" [ngModel]="value" [placeholder]="placeholder" name="name" />
+            <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>
 

src/lib/inputs/editable-input/editable-input.component.scss

@@ -11,3 +11,10 @@ iqser-circle-button {
         margin-left: 8px;
     }
 }
+
+textarea {
+    resize: both !important;
+    padding: 0;
+    margin: 0;
+    min-height: 0;
+}

src/lib/inputs/editable-input/editable-input.component.ts

@@ -12,6 +12,8 @@ import { FormsModule } from '@angular/forms';
     imports: [NgIf, CircleButtonComponent, FormsModule],
 })
 export class EditableInputComponent implements OnChanges {
+    @Input() id?: string;
+    @Input() parentId?: string;
     @Input() value!: string;
     @Input() editTooltip?: string;
     @Input() saveTooltip?: string;
@@ -19,8 +21,10 @@ export class EditableInputComponent implements OnChanges {
     @Input() placeholder = '';
     @Input() class?: string;
     @Input() showPreview = true;
+    @Input() canEdit = true;
     @Input() buttonsType?: CircleButtonType;
     @Output() readonly save = new EventEmitter<string>();
+    parentDimensions: { width: number; height: number };
     newValue = '';
 
     private _editing = false;
@@ -39,6 +43,12 @@ export class EditableInputComponent implements OnChanges {
         if (changes['value']) {
             this.editing = false;
         }
+        if (changes['parentId']?.currentValue) {
+            setTimeout(() => {
+                const parent = document.getElementById(this.parentId as string) as HTMLElement;
+                this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
+            }, 20);
+        }
     }
 
     saveValue(): void {