Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

1 files changed, 35 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.ts
new file mode 100644
index 0000000000..4757c1f36d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-zone/zone-container.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, Output, ViewEncapsulation, EventEmitter, OnInit } from '@angular/core';
+import { ZoneInstanceType } from 'app/models/graph/zones/zone-instance';
+
+@Component({
+    selector: 'zone-container',
+    templateUrl: './zone-container.component.html',
+    styleUrls: ['./zone-container.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class ZoneContainerComponent implements OnInit {
+    @Input() title:string;
+    @Input() type:ZoneInstanceType;
+    @Input() count:number;   
+    @Input() visible:boolean;
+    @Input() minimized:boolean;
+    @Output() minimize: EventEmitter<any> = new EventEmitter<any>();
+    @Output() backgroundClick: EventEmitter<void> = new EventEmitter<void>();
+    private class:string;
+
+    constructor() {}
+
+    ngOnInit() {
+        this.class = ZoneInstanceType[this.type].toLowerCase();
+    }
+
+    private unminifyZone = () => {
+        this.minimize.emit();
+    }
+
+    private backgroundClicked = () => {
+        this.backgroundClick.emit();
+    }
+
+}
\ No newline at end of file