Editable input component

src/assets/icons/check.svg

@@ -0,0 +1,11 @@
+<svg id="Capa_1" style="enable-background:new 0 0 426.667 426.667;" version="1.1"
+     viewBox="0 0 426.667 426.667" x="0px"
+     xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
+<g>
+	<g>
+		<path d="M421.876,56.307c-6.548-6.78-17.352-6.968-24.132-0.42c-0.142,0.137-0.282,0.277-0.42,0.42L119.257,334.375
+			l-90.334-90.334c-6.78-6.548-17.584-6.36-24.132,0.42c-6.388,6.614-6.388,17.099,0,23.713l102.4,102.4
+			c6.665,6.663,17.468,6.663,24.132,0L421.456,80.44C428.236,73.891,428.424,63.087,421.876,56.307z" />
+	</g>
+</g>
+</svg>

src/assets/icons/close.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="currentColor" fill-rule="evenodd" id="close" stroke="none" stroke-width="1">
+        <path
+            d="M93,0 L100,7 L57,50 L100,93 L93,100 L50,57 L7,100 L3.55271368e-15,93 L43,50 L3.55271368e-15,7 L7,0 L50,43 L93,0 Z"
+            fill-rule="nonzero" id="Combined-Shape"></path>
+    </g>
+</svg>

src/assets/icons/edit.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
+     xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd" id="edit" stroke="none" stroke-width="1">
+        <path
+            d="M97.0465218,17 L83.0398073,3 C79.0378889,-1 72.5347714,-1 69.0330928,3 L0,71.5 L0,100 L28.5136688,100 L97.0465218,31 C102.54916,25.5 99.047481,19 97.0465218,17 Z M24.0115105,90 L10.0047961,90 L10.0047961,76 L62.0297356,24 L76.03645,38 L24.0115105,90 Z M83.0398073,31 L69.0330928,17 L76.03645,10 L90.0431645,24 L83.0398073,31 Z"
+            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
+    </g>
+</svg>

src/index.ts

@@ -29,3 +29,4 @@ export * from './lib/tables/table-column-name/table-column-name.component';
 export * from './lib/tables/table-header/table-header.component';
 export * from './lib/misc/status-bar/status-bar.component';
 export * from './lib/misc/status-bar/status-bar-config.model';
+export * from './lib/inputs/editable-input/editable-input.component';

src/lib/common-ui.module.ts

@@ -16,14 +16,16 @@ import { TableHeaderComponent } from './tables/table-header/table-header.compone
 import { TranslateModule } from '@ngx-translate/core';
 import { SyncWidthDirective } from './tables/sync-width.directive';
 import { StatusBarComponent } from './misc/status-bar/status-bar.component';
+import { EditableInputComponent } from './inputs/editable-input/editable-input.component';
+import { FormsModule } from '@angular/forms';
 
 const buttons = [IconButtonComponent, ChevronButtonComponent, CircleButtonComponent];
 
-const inputs = [RoundCheckboxComponent];
+const inputs = [RoundCheckboxComponent, EditableInputComponent];
 
 const matModules = [MatIconModule, MatButtonModule, MatTooltipModule];
 
-const modules = [...matModules, TranslateModule];
+const modules = [...matModules, FormsModule, TranslateModule];
 
 const components = [...buttons, ...inputs, TableColumnNameComponent, QuickFiltersComponent, TableHeaderComponent, StatusBarComponent];
 
@@ -36,7 +38,7 @@ const utils = [SortByPipe, HumanizePipe, SyncWidthDirective];
 })
 export class CommonUiModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
-        const icons = ['arrow-down', 'sort-asc', 'sort-desc'];
+        const icons = ['arrow-down', 'check', 'close', 'edit', 'sort-asc', 'sort-desc'];
 
         for (const icon of icons) {
             _iconRegistry.addSvgIconInNamespace('iqser', icon, _sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${icon}.svg`));

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

@@ -0,0 +1,23 @@
+<div *ngIf="!editing">
+    {{ value }}
+</div>
+
+<form (submit)="saveValue()" *ngIf="editing">
+    <div [class]="'red-input-group ' + class">
+        <input [(ngModel)]="newValue" name="name" />
+    </div>
+</form>
+
+<iqser-circle-button
+    (action)="editing = true"
+    *ngIf="!editing"
+    [tooltip]="editTooltip"
+    [type]="buttonsType"
+    class="edit-button"
+    icon="red:edit"
+></iqser-circle-button>
+
+<ng-container *ngIf="editing">
+    <iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="red:check"></iqser-circle-button>
+    <iqser-circle-button (action)="editing = false" [tooltip]="cancelTooltip" [type]="buttonsType" icon="red:close"></iqser-circle-button>
+</ng-container>

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

@@ -0,0 +1,12 @@
+:host {
+    display: flex;
+    align-items: center;
+}
+
+iqser-circle-button {
+    margin-left: 2px;
+
+    &:first-of-type {
+        margin-left: 8px;
+    }
+}

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

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { Required } from '../../utils/decorators/required.decorator';
+import { CircleButtonType } from '../../buttons/circle-button/circle-button.type';
+
+@Component({
+    selector: 'iqser-editable-input',
+    templateUrl: './editable-input.component.html',
+    styleUrls: ['./editable-input.component.scss']
+})
+export class EditableInputComponent {
+    @Input() @Required() value!: string;
+    @Input() editTooltip?: string;
+    @Input() saveTooltip?: string;
+    @Input() cancelTooltip?: string;
+    @Input() class?: string;
+    @Input() buttonsType?: CircleButtonType;
+    @Output() save = new EventEmitter<string>();
+    newValue = '';
+
+    private _editing = false;
+
+    @HostBinding('class.editing')
+    get editing(): boolean {
+        return this._editing;
+    }
+
+    set editing(value: boolean) {
+        this._editing = value;
+        this.newValue = this.value;
+    }
+
+    saveValue() {
+        this.save.emit(this.newValue);
+        this.editing = false;
+    }
+}