1 files changed, 163 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts
new file mode 100644
index 00000000..ee529c5f
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/core/overlaypanel/overlaypanel.ts
@@ -0,0 +1,163 @@
+import {CommonModule} from '@angular/common';
+import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, Renderer} from '@angular/core';
+
+import {DomHandler} from '../domhandler';
+
+@Component({
+  selector: 'plx-overlay-panel',
+  template: `
+        <div [ngClass]="'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'" [ngStyle]="style" [class]="styleClass"
+            [style.display]="visible ? 'block' : 'none'" (click)="onPanelClick()">
+            <div class="ui-overlaypanel-content">
+                <ng-content></ng-content>
+            </div>
+            <a href="#" *ngIf="showCloseIcon" class="ui-overlaypanel-close ui-state-default" (click)="onCloseClick($event)">
+                <span class="fa fa-fw fa-close"></span>
+            </a>
+        </div>
+    `,
+  providers: [DomHandler]
+})
+export class PlxOverlayPanelComponent implements OnInit, AfterViewInit,
+												OnDestroy {
+  @Input() dismissable: boolean = true;
+
+  @Input() showCloseIcon: boolean;
+
+  @Input() style: any;
+
+  @Input() styleClass: string;
+
+  @Input() appendTo: any;
+
+  @Output() onBeforeShow: EventEmitter<any> = new EventEmitter();
+
+  @Output() onAfterShow: EventEmitter<any> = new EventEmitter();
+
+  @Output() onBeforeHide: EventEmitter<any> = new EventEmitter();
+
+  @Output() onAfterHide: EventEmitter<any> = new EventEmitter();
+
+  container: any;
+
+  visible: boolean = false;
+
+  documentClickListener: any;
+
+  selfClick: boolean;
+
+  targetEvent: boolean;
+
+  target: any;
+
+  constructor(
+		public el: ElementRef, public domHandler: DomHandler,
+		public renderer: Renderer) {}
+
+  ngOnInit() {
+	if (this.dismissable) {
+		this.documentClickListener =
+			this.renderer.listenGlobal('body', 'click', () => {
+			if (!this.selfClick && !this.targetEvent) {
+				this.hide();
+			}
+			this.selfClick = false;
+			this.targetEvent = false;
+			});
+	}
+  }
+
+  ngAfterViewInit() {
+	this.container = this.el.nativeElement.children[0];
+	if (this.appendTo) {
+		if (this.appendTo === 'body') {
+		document.body.appendChild(this.container);
+		} else {
+		this.domHandler.appendChild(this.container, this.appendTo);
+		}
+	}
+  }
+
+  toggle(event: any, target?: any) {
+	let currentTarget = (target || event.currentTarget || event.target);
+
+	if (!this.target || this.target === currentTarget) {
+		if (this.visible) {
+		this.hide();
+		} else {
+		this.show(event, target);
+		}
+	} else {
+		this.show(event, target);
+	}
+
+	if (this.dismissable) {
+		this.targetEvent = true;
+	}
+
+	this.target = currentTarget;
+  }
+
+  show(event: any, target?: any) {
+	if (this.dismissable) {
+		this.targetEvent = true;
+	}
+
+	this.onBeforeShow.emit(null);
+	let elementTarget = target || event.currentTarget || event.target;
+	this.container.style.zIndex = ++DomHandler.zindex;
+
+	if (this.visible) {
+		this.domHandler.absolutePosition(this.container, elementTarget);
+	} else {
+		this.visible = true;
+		this.domHandler.absolutePosition(this.container, elementTarget);
+		this.domHandler.fadeIn(this.container, 250);
+	}
+	this.onAfterShow.emit(null);
+  }
+
+  hide() {
+	if (this.visible) {
+		this.onBeforeHide.emit(null);
+		this.visible = false;
+		this.onAfterHide.emit(null);
+	}
+  }
+
+  onPanelClick() {
+	if (this.dismissable) {
+		this.selfClick = true;
+	}
+  }
+
+  onCloseClick(event: any) {
+	this.hide();
+
+	if (this.dismissable) {
+		this.selfClick = true;
+	}
+
+	event.preventDefault();
+  }
+
+  ngOnDestroy() {
+	if (this.documentClickListener) {
+		this.documentClickListener();
+	}
+
+	if (this.appendTo) {
+		this.el.nativeElement.appendChild(this.container);
+	}
+
+	this.target = null;
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [PlxOverlayPanelComponent],
+  declarations: [PlxOverlayPanelComponent]
+})
+export class PlxOverlayPanelModule {
+}
+\ No newline at end of file