diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
new file mode 100644
index 0000000..65f074e
--- /dev/null
+++ b/src/assets/icons/check.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 0000000..d12857a
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1,9 @@
+
+
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..7f137ce
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1,9 @@
+
+
diff --git a/src/index.ts b/src/index.ts
index eb1440a..1ceca69 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/lib/common-ui.module.ts b/src/lib/common-ui.module.ts
index 6151362..f76436a 100644
--- a/src/lib/common-ui.module.ts
+++ b/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`));
diff --git a/src/lib/inputs/editable-input/editable-input.component.html b/src/lib/inputs/editable-input/editable-input.component.html
new file mode 100644
index 0000000..179ec30
--- /dev/null
+++ b/src/lib/inputs/editable-input/editable-input.component.html
@@ -0,0 +1,23 @@
+
+ {{ value }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/inputs/editable-input/editable-input.component.scss b/src/lib/inputs/editable-input/editable-input.component.scss
new file mode 100644
index 0000000..241d303
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/lib/inputs/editable-input/editable-input.component.ts b/src/lib/inputs/editable-input/editable-input.component.ts
new file mode 100644
index 0000000..f8538a1
--- /dev/null
+++ b/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();
+ 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;
+ }
+}