1 files changed, 88 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
new file mode 100644
index 000000000..a94687b37
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html
@@ -0,0 +1,88 @@
+<div class="card creat-card">
+    <div class="single-line">
+        <label class="label-name">Mode</label>
+        <label name="trst" *ngFor="let mode of modes; let i = index">
+            <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
+                   name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
+
+            <span>
+                                            <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
+                {{mode.name}}
+                                            </span>
+        </label>
+    </div>
+
+</div>
+<div class="card creat-card">
+    <div class="single-line">
+        <label class="label-name">Name</label>
+        <div class="label-input">
+            <input type="input"
+                   [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
+        </div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">Description</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.description"
+                   placeholder="Descripe the package">
+        </div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">Version</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.version"
+                   (input)="validatePackageNameAndVersion()"
+                   placeholder="Example: 1.0.0">
+        </div>
+        <div><label style="color: red">{{errorMessage}}</label></div>
+    </div>
+    <hr/>
+    <div class="single-line">
+        <label class="label-name">tags</label>
+        <div class="label-input">
+            <input type="input" [(ngModel)]="metaDataTab.tags"
+                   placeholder="Ex., vDNS-CDS">
+        </div>
+    </div>
+</div>
+<div id="container">
+    <div id="target">
+        <div class="card creat-card">
+            <div class="single-line">
+                <h5 class="label-name">
+                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
+                </h5>
+
+            </div>
+            <div class="single-line">
+                <label class="label-name">Name</label>
+                <div class="label-input">
+                    <input name="key" type="input" placeholder="Enter Name">
+                </div>
+            </div>
+            <hr/>
+            <div class="single-line">
+                <label class="label-name">Value</label>
+                <div class="label-input">
+                    <input name="value" type="input"
+                           placeholder="Enter Value">
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+<div class="card creat-card">
+    <div class="single-line">
+        <div name="custom key">
+            <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
+                    class="fa fa-plus" aria-hidden="true"></i> Add a custom key
+            </button>
+
+
+        </div>
+    </div>
+</div>