6 files changed, 90 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
new file mode 100644
index 0000000000..34404e50a5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/modal-forms.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { SdcUiComponentsModule } from "sdc-ui/lib/angular";
+import { ValueEditComponent } from './value-edit/value-edit.component';
+import { UnsavedChangesComponent } from "./unsaved-changes/unsaved-changes.component";
+import { UiElementsModule } from "../ui-elements.module";
+
+
+
+@NgModule({
+    declarations: [
+        ValueEditComponent,
+        UnsavedChangesComponent
+    ],
+    imports: [
+        CommonModule,
+        SdcUiComponentsModule,
+        UiElementsModule
+    ],
+    exports: [ValueEditComponent, UnsavedChangesComponent],
+    entryComponents: [ UnsavedChangesComponent
+    ],
+    providers: []
+})
+export class ModalFormsModule {
+
+}
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
new file mode 100644
index 0000000000..bdf21dec62
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.html
@@ -0,0 +1,6 @@
+<div class="unsaved-changes-modal">
+    <div class="message">
+        <p>Your changes {{isValidChangedData ? '' : '(invalid)'}} have not been saved.</p>
+        <p>Do you want to {{isValidChangedData ? 'save' : 'discard'}} them?</p>
+    </div>
+</div>
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
new file mode 100644
index 0000000000..b8fdeaf659
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/unsaved-changes/unsaved-changes.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'unsaved-changes',
+    templateUrl: './unsaved-changes.component.html',
+    styleUrls: []
+})
+export class UnsavedChangesComponent {
+
+    @Input() isValidChangedData:boolean;
+
+    constructor(){
+    }
+
+
+
+}
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
new file mode 100644
index 0000000000..464b756a3f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.html
@@ -0,0 +1,12 @@
+<div class="name-update-container">
+     <sdc-input #updateNameInput 
+        label="Instance Name" 
+        required="true" 
+        [maxLength]="50" 
+        [(value)]="name" 
+        testId="instanceName"></sdc-input>
+     <sdc-validation [validateElement]="updateNameInput" (validityChanged)="validityChanged($event)">
+        <sdc-required-validator message="Name is required."></sdc-required-validator>
+        <sdc-regex-validator message="Special characters not allowed." [pattern]="pattern"></sdc-regex-validator>
+    </sdc-validation>
+</div>
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
new file mode 100644
index 0000000000..b958ca17b7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.less
@@ -0,0 +1,3 @@
+.name-update-container {
+    min-height: 90px;
+}
+\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
new file mode 100644
index 0000000000..08bc0586c7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/forms/value-edit/value-edit.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: 'value-edit',
+    templateUrl: './value-edit.component.html',
+    styleUrls: ['./value-edit.component.less']
+})
+export class ValueEditComponent {
+
+    @Input() name:String;
+    @Input() validityChangedCallback: Function;
+
+    private pattern:string = "^[\\s\\w\&_.:-]{1,1024}$"
+    constructor(){
+    }
+
+    private validityChanged = (value):void => {
+        if(this.validityChangedCallback) {
+            this.validityChangedCallback(value);
+        }
+    }
+
+
+
+}
+\ No newline at end of file