1 files changed, 178 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts
new file mode 100644
index 00000000..842b9fb4
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/core/pxbutton/button.directive.ts
@@ -0,0 +1,178 @@
+import {AfterViewInit, Directive, ElementRef, Input, OnDestroy} from '@angular/core';
+
+import {DomHandler} from '../domhandler';
+
+import {PlxButtonState} from './button-state';
+
+@Directive({selector: '[pxButton]', providers: [DomHandler]})
+export class PlxButtonDirective implements AfterViewInit, OnDestroy {
+  @Input() iconPos: string = 'left';
+
+  @Input() cornerStyleClass: string = 'ui-corner-all';
+
+  _label: string;
+
+  _loadinglabel: string;
+
+  _icon: string;
+
+  _state: number;
+
+  initialized: boolean;
+
+  constructor(
+		public el: ElementRef, public domHandler: DomHandler) {}
+
+  ngAfterViewInit() {
+	this.domHandler.addMultipleClasses(
+		this.el.nativeElement, this.getStyleClass());
+	if (this.icon) {
+		let iconElement = document.createElement('span');
+		let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' :
+														'ui-button-icon-left';
+		iconElement.className =
+			iconPosClass + ' ui-c iconfont plx-icon-' + this.icon;
+		this.el.nativeElement.appendChild(iconElement);
+	}
+
+	let iconAnimationElement = document.createElement('span');
+	iconAnimationElement.className =
+		'ui-button-icon-left ui-c iconfont plx-icon-circle-o-notch plx-spin';
+	iconAnimationElement.style.display = 'none';
+	this.el.nativeElement.appendChild(iconAnimationElement);
+
+	let labelElement = document.createElement('span');
+	labelElement.className = 'ui-button-text ui-c';
+	labelElement.appendChild(document.createTextNode(this.label || ''));
+	this.el.nativeElement.appendChild(labelElement);
+
+	if (this.state) {
+		let spanElement =
+			this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text');
+		if (this.state === PlxButtonState.DOING) {
+		if (spanElement) {
+			spanElement.innerText = this.loadinglabel || 'loading';
+		}
+		this.el.nativeElement.disabled = true;
+		this.setIconELement(true);
+		} else {
+		spanElement.innerText = this.label || '';
+		this.el.nativeElement.disabled = false;
+		this.setIconELement(false);
+		}
+	}
+
+	this.initialized = true;
+  }
+
+  getStyleClass(): string {
+	let styleClass =
+		'ui-button ui-widget ui-state-default ' + this.cornerStyleClass;
+	if (this.icon) {
+		if (this.label  !== null && this.label  !== undefined) {
+		if (this.iconPos === 'left') {
+			styleClass = styleClass + ' ui-button-text-icon-left';
+		} else {
+			styleClass = styleClass + ' ui-button-text-icon-right';
+		}
+		} else {
+		styleClass = styleClass + ' ui-button-icon-only';
+		}
+	} else {
+		styleClass = styleClass + ' ui-button-text-only';
+	}
+
+	return styleClass;
+  }
+
+  setIconELement(isShowAnimation: boolean) {
+	let iconLeftElement = this.domHandler.findSingle(
+		this.el.nativeElement, '.ui-button-icon-left.iconfont');
+	if (iconLeftElement) {
+		iconLeftElement.style.display = isShowAnimation ? 'none' : 'inline-block';
+	}
+	let iconRightElement = this.domHandler.findSingle(
+		this.el.nativeElement, '.ui-button-icon-left.iconfont');
+	if (iconRightElement) {
+		iconRightElement.style.display =
+			isShowAnimation ? 'none' : 'inline-block';
+	}
+	let iconAnimationElement = this.domHandler.findSingle(
+		this.el.nativeElement, '.iconfont.plx-icon-circle-o-notch.plx-spin');
+	if (iconAnimationElement) {
+		iconAnimationElement.style.display =
+			isShowAnimation ? 'inline-block' : 'none';
+	}
+  }
+
+  @Input()
+  get label(): string {
+	return this._label;
+  }
+
+  set label(val: string) {
+	this._label = val;
+
+	if (this.initialized) {
+		this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text')
+			.textContent = this._label;
+	}
+  }
+
+  @Input()
+  get loadinglabel(): string {
+	return this._loadinglabel;
+  }
+
+  set loadinglabel(val: string) {
+	this._loadinglabel = val;
+  }
+
+  @Input()
+  get icon(): string {
+	return this._icon;
+  }
+
+  set icon(val: string) {
+	this._icon = val;
+
+	if (this.initialized) {
+		let iconPosClass = (this.iconPos === 'right') ? 'ui-button-icon-right' :
+														'ui-button-icon-left';
+		this.domHandler.findSingle(this.el.nativeElement, '.iconfont').className =
+			iconPosClass + ' ui-c iconfont plx-icon-' + this.icon;
+	}
+  }
+
+  @Input()
+  get state(): number {
+	return this._state;
+  }
+
+  set state(val: number) {
+	this._state = val;
+	if (this.initialized) {
+		let spanElement =
+			this.domHandler.findSingle(this.el.nativeElement, '.ui-button-text');
+		if (this.state === PlxButtonState.DOING) {
+		if (spanElement) {
+			spanElement.innerText = this.loadinglabel || 'loading';
+		}
+		this.el.nativeElement.disabled = true;
+		this.setIconELement(true);
+		} else {
+		spanElement.innerText = this.label || '';
+		this.el.nativeElement.disabled = false;
+		this.setIconELement(false);
+		}
+	}
+  }
+
+  ngOnDestroy() {
+	while (this.el.nativeElement.hasChildNodes()) {
+		this.el.nativeElement.removeChild(this.el.nativeElement.lastChild);
+	}
+
+	this.initialized = false;
+  }
+}