Include paletx components

Include paletx components to WF Designer UI.

Issue-ID: SDC-1130,SDC-1131

Change-Id: Iad06b2dde8fc98d03a0e3633e829b686d75cafd0
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>

46 files changed, 7792 insertions, 0 deletions

diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/numberedFixLen.pipe.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/numberedFixLen.pipe.ts
new file mode 100644
index 00000000..9d26b16f
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/numberedFixLen.pipe.ts
@@ -0,0 +1,27 @@
+/**
+ * numberFixedLen.pipe
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'numberFixedLen'
+})
+export class NumberFixedLenPipe implements PipeTransform {
+    transform(num: number, len: number): any {
+        let numberInt = Math.floor(num);
+        let length = Math.floor(len);
+
+        if (num === null || isNaN(numberInt) || isNaN(length)) {
+            return num;
+        }
+
+        let numString = numberInt.toString();
+
+        while (numString.length < length) {
+            numString = '0' + numString;
+        }
+
+        return numString;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.html b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.html
new file mode 100644
index 00000000..8e4102c2
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.html
@@ -0,0 +1,134 @@
+<div 
+    class="owl-dateTime owl-widget"
+    [ngClass]="{'owl-dateTime-inline': inline}"   
+    [ngStyle]="style"
+    #container>
+   <div *ngIf="!inline && customTemp.children.length == 0" class="owl-dateTime-inputWrapper" (mouseout)="Mouseout($event)" (mouseover)="Mouseover($event)">
+       <input *ngIf="!supportKeyboardInput" type="text" [class]="inputStyleClass"
+              [ngClass]="{
+           'owl-dateTime-input owl-inputtext owl-state-default': true
+           }"
+              [ngStyle]="inputStyle"
+              [attr.placeholder]="placeHolder"
+              [attr.tabindex]="tabIndex" [attr.id]="inputId"
+              [attr.required]="required"
+              [disabled]="disabled"
+              [value]="formattedValue"
+              (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (click)="onInputClick($event)" readonly>
+        <input *ngIf="supportKeyboardInput" type="text" [class]="inputStyleClass"
+              [ngClass]="{
+           'owl-dateTime-input owl-inputtext owl-state-default': true
+           }"
+              [ngStyle]="inputStyle"
+              [attr.placeholder]="placeHolder"
+              [attr.tabindex]="tabIndex" [attr.id]="inputId"
+              (change)="onInputChange($event)"
+              [attr.required]="required"
+              [value]="formattedValue"
+              (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (click)="onInputClick($event)">
+       <i class="ict ict-close  owl-icon" style="margin-right: 5px;" [hidden]="(!value)||(disabled)||(!mouseIn)||(!canClear)" (click)="clearValue($event)"></i>
+       <i class="fa fa-calendar  owl-icon" style="margin-right: 5px;" [hidden]="value&&(!disabled)"  (click)="onInputClick($event)" ></i>
+   </div>
+   <!-- Workaround of ng-content default content (angular issue #12530) -->
+   <div [ngClass]="{'owl-dateTime-customTemp': customTemp.children.length !== 0}" #customTemp (click)="onInputClick($event)">
+       <ng-content></ng-content>
+   </div>
+   <div class="owl-dateTime-dialog owl-state-default owl-corner-all"
+        [ngStyle]="{'display': inline ? 'inline-block' : null}"
+        [@fadeInOut]="dialogVisible? 'visible' : (!inline? 'hidden': null)"
+        (click)="onDialogClick($event)" #dialog>
+       <div *ngIf="showHeader" class="owl-dateTime-dialogHeader owl-corner-top">
+           <span *ngIf="value; else elseBlock">{{formattedValue}}</span>
+           <ng-template #elseBlock><span>{{placeHolder}}</span></ng-template>
+       </div>
+       <div *ngIf="type ==='both' || type === 'calendar'" class="owl-calendar-wrapper owl-corner-all owl-padding">
+           <div class="owl-calendar-control owl-cal-header">
+               <div class="owl-calendar-controlNav">
+                   <span class="fa fa-angle-left" style="padding: 8px;margin-left:12px; font-size: 20px;"
+                    (click)="prevNav($event)"></span>
+               </div>
+               <div class="owl-calendar-controlContent">
+                   <span class="month-control" (click)="changeDialogType(2)">{{pickerMonth}}</span>
+                   <span class="year-control" (click)="changeDialogType(3)">{{pickerYear}}</span>
+               </div>
+               <div class="owl-calendar-controlNav">
+                   <span class="fa fa-angle-right" style="padding: 8px;  font-size: 20px;" (click)="nextNav($event)"></span>
+               </div>
+           </div>
+           <div class="owl-calendar" [hidden]="dialogType !== 1">
+               <table class="owl-calendar-day">
+                   <thead class="owl-cal-header">
+                   <tr class="owl-weekdays" style="height:40px">
+                       <th *ngFor="let weekDay of calendarWeekdays" class="owl-weekday" scope="col">
+                           <span>{{weekDay}}</span>
+                       </th>
+                   </tr>
+                   </thead>
+                   <tbody>
+                   <tr class="owl-days" *ngFor="let week of calendarDays">
+                       <td *ngFor="let d of week" class="owl-day" style="padding: 5px;"
+                           [ngClass]="{
+                       'owl-calendar-invalid': !isValidDay(d.date),
+                       'owl-calendar-outFocus': d.otherMonth,
+                       'owl-calendar-hidden': d.hide,
+                       'owl-day-today': d.today
+                   }" (click)="selectDate($event, d.date)">
+                   <div style="height:32px;"  class="owl-day day" [ngClass]=" {'owl-calendar-selected': isSelectedDay(d.date), 'owl-calendar-invalid': !isValidDay(d.date)}">
+                           <a style="line-height:32px;">{{d.num}}</a>
+                        </div>
+                       </td>
+                   </tr>
+                   </tbody>
+               </table>
+           </div>
+           <div class="owl-calendar" [hidden]="dialogType !== 2">
+               <table class="owl-calendar-month">
+                   <tbody>
+                   <tr class="owl-months" *ngFor="let months of calendarMonths; let i = index">
+                       <td *ngFor="let month of months; let j = index" class="owl-month"
+                           (click)="selectMonth(i*3 + j)">
+                           <div class="owl-month" [ngClass]="{'owl-calendar-div-selected': isCurrentMonth(i*3 + j),'owl-calendar-month-part':true,'owl-calendar-month-selected': isCurrentMonth(i*3 + j)}">
+                           <a>{{month}}</a>
+                           </div>
+                       </td>
+                   </tr>
+                   </tbody>
+               </table>
+           </div>
+           <div class="owl-calendar" [hidden]="dialogType !== 3">
+               <table class="owl-calendar-year">
+                   <tbody>
+                   <tr class="owl-years" *ngFor="let years of calendarYears">
+                       <td class="owl-year" *ngFor="let year of years"
+                           (click)="selectYear(+year)">
+                           <div [ngClass]="{'owl-calendar-year-part':true,'owl-calendar-year-selected': isCurrentYear(year)}">
+                            <a>{{year}}</a>
+                        </div>
+                       </td>
+                   </tr>
+                   </tbody>
+               </table>
+               <!--
+               <div class="owl-calendar-yearArrow left" style="left: 12px;
+               font-size: 20px;
+               margin-top: -116px;" (click)="generateYearList('prev')">
+                   <i style="padding:8px" class="fa fa-angle-left"></i>
+               </div>
+               <div class="owl-calendar-yearArrow right" style="left: 261px;
+               font-size: 20px;
+               margin-top: -116px;" (click)="generateYearList('next')">
+                   <i style="padding:8px" class="fa fa-angle-right"></i>
+               </div>
+            -->
+           </div>
+       </div>
+       <div *ngIf="type ==='both' || type === 'timer'" [hidden]="dialogType !== 1" >
+           <div style="height: 35px; padding: 8px;margin-bottom: 20px;">
+       <oes-timepickerr #timepicker [max]="_max" [min]="_min" class="time-picker" (TimerChange)="TimerChange($event)"  [showSecondsTimer]="showSeconds" [(ngModel)]="mtime" [size]="'small'" [seconds]="seconds"></oes-timepickerr>
+       <div class="confirm-btn-div" style="    float: right; margin-top: -35px;">
+             <button class="plx-btn plx-btn-primary plx-btn-xs" (click)="confirm()" type="button"> {{locale.confirm}} </button>
+        </div>
+    </div>
+       </div>
+   </div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.less b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.less
new file mode 100644
index 00000000..8e50660b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.less
@@ -0,0 +1,434 @@
+@import "../../assets/components/themes/default/theme.less";
+@import "../../assets/components/themes/common/plx-input.less";
+@import "../../assets/components/themes/common/plx-button.less";
+
+.owl-dateTime {
+  display: inline-block;
+  position: relative;
+  width: 100%; 
+  font-family: @font-family;
+  font-size: @font-size;
+  background: @component-bg;
+  color: @text-color;
+}
+
+.owl-dateTime input {
+  .plx-input;
+}
+
+.owl-dateTime input:-ms-input-placeholder {
+  color: @unselected-text-color !important;
+}
+.owl-dateTime input::-webkit-input-placeholder {
+  color: @unselected-text-color !important;
+}
+
+.owl-dateTime-input {
+  width: 100%;
+  padding-right: 1.5em; }
+
+.owl-dateTime-cancel {
+  position: absolute;
+  top: 50%;
+  right: .1em;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: inherit; }
+
+.owl-dateTime-inputWrapper {
+  position: relative; }
+
+.owl-dateTime-customTemp {
+  display: inline-block;
+  position: relative; }
+
+.owl-dateTime-dialog {
+  padding:  0px;
+  position: absolute; }
+
+.owl-dateTime-dialogHeader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%; }
+
+.owl-calendar-wrapper,
+.owl-timer-wrapper {
+  position: relative;
+  width: 100%;
+  padding: .2em .5em; }
+
+.owl-calendar-control {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 2em; }
+  .owl-calendar-control .owl-calendar-controlNav {
+    position: relative;
+    cursor: pointer;
+    width: 12.5%; }
+  .owl-calendar-control .owl-calendar-controlContent {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 75%;
+    height: 100%; }
+
+.owl-calendar {
+  position: relative;
+  min-height: 13.7em; }
+  .owl-calendar table {
+    width: 100%;
+    border-collapse: collapse; }
+  .owl-calendar tbody td {
+    position: relative;
+    text-align: center; }
+    .owl-calendar tbody td a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      text-decoration: none;
+      color: inherit;
+      font-size:12px;
+       }
+  .owl-calendar .owl-calendar-yearArrow {
+    position: absolute;
+    top: 50%;
+    width: 1.5em;
+    height: 1.5em;
+    transform: translateY(-50%);
+    cursor: pointer; }
+    .owl-calendar .owl-calendar-yearArrow.left {
+      left: -.5em; }
+    .owl-calendar .owl-calendar-yearArrow.right {
+      right: -.5em; }
+
+.owl-timer-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center; }
+  .owl-timer-wrapper .owl-timer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 25%;
+    height: 100%; }
+  .owl-timer-wrapper .owl-timer-control {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30%;
+    width: 100%;
+    cursor: pointer; }
+    .owl-timer-wrapper .owl-timer-control .icon:before {
+      margin: 0; }
+  .owl-timer-wrapper .owl-timer-input {
+    width: 60%;
+    height: 100%; }
+
+/*# sourceMappingURL=picker.component.css.map */
+.font-face {
+  font-weight: normal;
+  font-style: normal; }
+
+[class^="paletx-datepicker-icon-"]:before, [class*="paletx-datepicker-icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
+
+.paletx-datepicker-icon-cancel:before {
+  content: '\e802'; }
+
+/* '' */
+.paletx-datepicker-icon-up-open:before {
+  content: '\e805'; }
+
+/* '' */
+.paletx-datepicker-icon-down-open:before {
+  content: '\e80b'; }
+
+/* '' */
+.paletx-datepicker-icon-left-open:before {
+  content: '\e817'; }
+
+/* '' */
+.paletx-datepicker-icon-right-open:before {
+  content: '\e818'; }
+
+/* '' */
+.owl-widget,
+.owl-widget * {
+  box-sizing: border-box; }
+
+.owl-widget {
+  font-size: 1em; }
+.owl-padding{
+  padding: 0px;
+}
+.owl-corner-all {
+  border-radius: 3px; }
+
+.owl-corner-top {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px; }
+
+.owl-state-default {
+  border: 1px solid @border-color-base;
+  background: @component-bg;
+  color: @text-color; }
+
+.owl-inputtext {
+  margin: 0;
+  outline: medium none;
+  transition: .2s; }
+
+
+  .owl-dateTime.owl-dateTime-inline {
+    width: auto; }
+    .owl-dateTime.owl-dateTime-inline .owl-dateTime-dialog {
+      position: relative;
+      z-index: auto; }
+
+.owl-dateTime-dialog {
+  width: 300px;
+  user-select: none;
+  z-index: 99999; }
+
+.owl-dateTime-dialogHeader {
+  height: 2.5em;
+  padding: .25em;
+  background-color: @component-bg;
+  overflow-y: auto; }
+
+.owl-calendar-control .owl-calendar-controlNav .nav-prev,
+.owl-calendar-control .owl-calendar-controlNav .nav-next {
+  position: absolute;
+  top: 50%;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+}
+
+.owl-cal-header{
+  background: @selected-bg-color;
+  //color: @form-label;
+  height: 35px;
+  //width: 105%;
+  //margin-left: -7px;
+}
+  .owl-calendar-control .owl-calendar-controlNav .nav-prev:before,
+  .owl-calendar-control .owl-calendar-controlNav .nav-next:before {
+    //content: "";
+    border-top: .5em solid transparent;
+    border-bottom: .5em solid transparent;
+    border-right: 0.75em solid #000000;
+    width: 0;
+    height: 0;
+    display: block;
+    margin: 0 auto; }
+.owl-calendar-control .owl-calendar-controlNav .nav-next:before {
+  border-right: 0;
+  border-left: 0.75em solid #000000; }
+.owl-calendar-control .owl-calendar-controlContent .month-control,
+.owl-calendar-control .owl-calendar-controlContent .year-control {
+  color: @unselected-text-color;
+  display: inline-block;
+  cursor: pointer;
+  transition: transform 200ms ease; }
+  .owl-calendar-control .owl-calendar-controlContent .month-control:hover,
+  .owl-calendar-control .owl-calendar-controlContent .year-control:hover {
+   // transform: scale(1.2); }
+    color: @guide-color; }
+.owl-calendar-control .owl-calendar-controlContent .month-control {
+  font-size: @font-size-title-group;
+  margin-right: .8rem;
+}
+.owl-calendar-control .owl-calendar-controlContent .year-control {
+  font-size: @font-size-title-group;
+}
+
+.owl-calendar tbody td.owl-calendar-selected {
+  background-color: @guide-color;
+  color: @component-bg }
+.owl-calendar tbody td.owl-calendar-invalid {
+  color: @disabled-text-color }
+.owl-calendar tbody td.owl-calendar-outFocus {
+  color: @unselected-text-color; }
+.owl-calendar tbody td.owl-calendar-hidden {
+  visibility: hidden; }
+  /**
+.owl-calendar tbody td:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
+  background-color: @hover-bg-color;
+  color: @shadow-color }
+**/
+.owl-years td.owl-year,
+.owl-years td.owl-month,
+.owl-months td.owl-year,
+.owl-months td.owl-month {
+  font-size: 1.2em;
+  height: 2.5em;
+  width: 33.33%;
+  line-height: 2.5em; 
+  border-radius: 60px;
+  }
+
+.owl-weekdays th.owl-weekday {
+  height: 1em;
+  line-height: 2em;
+  text-align: center;
+  font-weight: normal;
+  font-size: @font-size;
+  /**color: @unselected-text-color; **/
+  }
+
+.owl-days td.owl-day {
+  border-radius: 30px;
+  height: 2em;
+  width: calc(100% / 7);
+  line-height: 2em; }
+  .owl-days td.owl-day.owl-day-today:before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    color: @primary-color;
+    border-top: 0.5em solid @primary-color-hover;
+    border-left: .5em solid transparent;
+  }
+
+.owl-timer-wrapper {
+  height: 5.4em;
+  background-color: @shadow-color; }
+  .owl-timer-wrapper .owl-timer-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 40%;
+    font-size: 1.5em; }
+  .owl-timer-wrapper .owl-meridian-btn {
+    font-size: .8em;
+    color: @guide-color;
+    background-image: none;
+    background-color: transparent;
+    border-color: @guide-color; }
+    .owl-timer-wrapper .owl-meridian-btn:hover {
+      color: @scene-textcolor;
+      background-color: @guide-color;
+      border-color: @guide-color; }
+
+.owl-timer-divider {
+  display: inline-block;
+  align-self: flex-end;
+  position: absolute;
+  width: .6em;
+  height: 100%;
+  left: -.3em; }
+  .owl-timer-divider .owl-timer-dot {
+    display: block;
+    width: .3em;
+    height: .3em;
+    position: absolute;
+    left: 50%;
+    border-radius: 50%;
+    transform: translateX(-50%); }
+    .owl-timer-divider .owl-timer-dot.dot-top {
+      top: 38%; }
+    .owl-timer-divider .owl-timer-dot.dot-bottom {
+      bottom: 38%; }
+.owl-icon{
+  position: absolute;
+  top: 50%;
+  right: .1em;
+  border-radius: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: @fonticon-color;
+}
+
+.oes-time-control{
+  color: @text-color !important;
+}
+.owl-calendar-selected {
+  background-color: @guide-color;
+  color: #fff;
+  border-radius: 50%;
+}
+.owl-calendar tbody td div.day:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
+  background-color: @hover-bg-color;
+  color:#000;
+  border-radius: 50%; }
+.oes-time-control{
+  font-size: @font-size;
+}
+.owl-calendar-year-part{
+  width: 42px;
+  margin-left: 30px;
+  text-align: center;
+}
+.owl-calendar-year-part:hover{
+  background-color: @hover-bg-color;
+  color:#000;
+  border-radius: 50%;
+}
+.owl-calendar-year-selected{
+  background-color: @guide-color;
+  color: #fff;
+  border-radius: 50%;
+}
+.owl-calendar-year-selected:hover{
+  background-color: @guide-color;
+  color: #fff;
+  border-radius: 50%;
+}
+.owl-calendar-month-part{
+  width: 42px;
+  margin-left: 30px;
+  text-align: center;
+}
+.owl-calendar-month-part:hover{
+  background-color: @hover-bg-color;
+  color:#000;
+  border-radius: 50%;
+}
+.owl-calendar-month-selected{
+  background-color: @guide-color;
+  color: #fff;
+  border-radius: 50%;
+}
+.owl-calendar-month-selected:hover{
+  background-color: @guide-color;
+  color: #fff;
+  border-radius: 50%;
+}
+
+/*# sourceMappingURL=picker.css.map */
+
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.ts
new file mode 100644
index 00000000..493e0cb2
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.ts
@@ -0,0 +1,1712 @@
+/**
+ * picker.component
+ */
+
+import {
+    AfterViewInit,
+    Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output, Renderer2,
+    ViewChild
+} from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {
+    parse,
+    isValid,
+    startOfMonth,
+    getDate,
+    getDay,
+    addDays,
+    addMonths,
+    isSameDay,
+    isSameMonth,
+    isToday,
+    getMonth,
+    setMonth,
+    getYear,
+    addYears,
+    differenceInCalendarDays,
+    setYear,
+    getHours,
+    setHours,
+    getMinutes,
+    setMinutes,
+    getSeconds,
+    setSeconds,
+    isBefore,
+    isAfter,
+    compareAsc,
+    startOfDay,
+    format,
+    endOfDay,
+} from 'date-fns';
+import { NumberFixedLenPipe } from './numberedFixLen.pipe';
+
+export interface LocaleSettings {
+    firstDayOfWeek?: number;
+    dayNames: string[];
+    dayNamesShort: string[];
+    monthNames: string[];
+    monthNamesShort: string[];
+    dateFns: any;
+    confirm: string;
+}
+
+export enum DialogType {
+    Time,
+    Date,
+    Month,
+    Year,
+}
+
+export const DATETIMEPICKER_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DateTimePickerComponent),
+    multi: true
+};
+
+@Component({
+    selector: 'plx-datepicker',
+    templateUrl: './picker.component.html',
+    styleUrls: ['./picker.component.less'],
+    providers: [NumberFixedLenPipe, DATETIMEPICKER_VALUE_ACCESSOR],
+    animations: [
+        trigger('fadeInOut', [
+            state('hidden', style({
+                opacity: 0,
+                display: 'none'
+            })),
+            state('visible', style({
+                opacity: 1,
+                display: 'block'
+            })),
+            transition('visible => hidden', animate('200ms ease-in')),
+            transition('hidden => visible', animate('400ms ease-out'))
+        ])
+    ],
+})
+
+export class DateTimePickerComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+
+    @ViewChild('timepicker') public timepicker;
+
+    /**
+     * Type of the value to write back to ngModel
+     * @default 'date' -- Javascript Date type
+     * @type {'string' | 'date'}
+     * */
+    @Input() dataType: 'string' | 'date' = 'date';
+
+    /**
+     * Format of the date
+     * @default 'y/MM/dd'
+     * @type {String}
+     * */
+    @Input() dateFormat: string = 'YYYY-MM-DD HH:mm';
+    /**
+     * When present, it specifies that the component should be disabled
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() disabled: boolean;
+    /**
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() supportKeyboardInput: boolean = false;
+    /**
+     * Array with dates that should be disabled (not selectable)
+     * @default null
+     * @type {Date[]}
+     * */
+    @Input() disabledDates: Date[] = [];
+
+    /**
+     * Array with weekday numbers that should be disabled (not selectable)
+     * @default null
+     * @type {number[]}
+     * */
+    @Input() disabledDays: number[];
+
+    /**
+     * When enabled, displays the calendar as inline
+     * @default false -- popup mode
+     * @type {boolean}
+     * */
+    @Input() inline: boolean;
+
+    /**
+     * Identifier of the focus input to match a label defined for the component
+     * @default null
+     * @type {String}
+     * */
+    @Input() inputId: string;
+
+    /**
+     * Inline style of the picker text input
+     * @default null
+     * @type {any}
+     * */
+    @Input() inputStyle: any;
+
+    /**
+     * Style class of the picker text input
+     * @default null
+     * @type {String}
+     * */
+    @Input() inputStyleClass: string;
+
+    /**
+     * Maximum number of selectable dates in multiple mode
+     * @default null
+     * @type {number}
+     * */
+    @Input() maxDateCount: number;
+
+    /**
+     * The minimum selectable date time
+     * @default null
+     * @type {Date | string}
+     * */
+    private _max: Date;
+    @Input()
+    get max() {
+        return this._max;
+    }
+
+    set max(val: Date | string) {
+        this._max = this.parseToDate(val);
+    }
+
+    @Input()
+    get maxDate() {
+        return this._max;
+    }
+
+    set maxDate(val: Date | string) {
+        this._max = this.parseToDate(val);
+    }
+
+    /**
+     * The maximum selectable date time
+     * @default null
+     * @type {Date | string }
+     * */
+    private _min: Date;
+    @Input()
+    get min() {
+        return this._min;
+    }
+
+    set min(val: Date | string) {
+        this._min = this.parseToDate(val);
+    }
+    @Input()
+    get minDate() {
+        return this._min;
+    }
+
+    set minDate(val: Date | string) {
+        this._min = this.parseToDate(val);
+    }
+
+    @Input()
+    get dateValue() {
+        return this.value;
+    }
+
+    set dateValue(val: Date | string) {
+        let newvalue =  this.parseToDate(val);
+        if(newvalue!==undefined)
+        {
+            this.updateModel(newvalue);
+            this.updateCalendar(newvalue);
+            this.updateTimer(newvalue);
+            this.updateFormattedValue();
+        }
+    }
+
+
+    /**
+     * Picker input placeholder value
+     * @default
+     * @type {String}
+     * */
+    @Input() placeHolder: string = 'yyyy-mm-dd hh:mm';
+
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() required: boolean;
+
+    /**
+     * Defines the quantity of the selection
+     *      'single' -- allow only a date value to be selected
+     *      'multiple' -- allow multiple date value to be selected
+     *      'range' -- allow to select an range ot date values
+     * @default 'single'
+     * @type {string}
+     * */
+    @Input() selectionMode: 'single' | 'multiple' | 'range' = 'single';
+
+    /**
+     * Whether to show the picker dialog header
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() showHeader: boolean;
+
+    @Input() canClear: boolean = true;
+
+    /**
+     * Whether to show the second's timer
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() showSeconds: boolean;
+
+    /**
+     * Inline style of the element
+     * @default null
+     * @type {any}
+     * */
+    @Input() style: any;
+
+    /**
+     * Style class of the element
+     * @default null
+     * @type {String}
+     * */
+    @Input() styleClass: string;
+
+    /**
+     * Index of the element in tabbing order
+     * @default null
+     * @type {Number}
+     * */
+    @Input() tabIndex: number;
+
+    /**
+     * Set the type of the dateTime picker
+     *      'both' -- show both calendar and timer
+     *      'calendar' -- show only calendar
+     *      'timer' -- show only timer
+     * @default 'both'
+     * @type {'both' | 'calendar' | 'timer'}
+     * */
+    @Input() type: 'both' | 'calendar' | 'timer' = 'calendar';
+
+    //附加方法
+    @Input()
+    set timeOnly(value: boolean) {
+        if (value) {
+            this.type = 'timer';
+        }
+        else {
+            this.type = "both";
+        }
+    }
+
+    @Input()
+    set showTime(value: boolean) {
+        if (value) {
+            this.type = 'both';
+        }
+        else {
+            this.type = "calendar";
+        }
+    }
+
+    /**
+     * An object having regional configuration properties for the dateTimePicker
+     * */
+    @Input()
+    get locale(): any {
+        return this._locale;
+    }
+    set locale(val: any) {
+        if (val !== undefined) {
+            this._locale = val;
+            this._userlocale = true;
+        }
+    }
+
+    @Input() localePrefab: 'Zh' | 'En' = 'En';
+    /**
+     * Determine the hour format (12 or 24)
+     * @default '24'
+     * @type {'24'| '12'}
+     * */
+    @Input() hourFormat: '12' | '24' = '24';
+
+
+    /**
+     * When it is set to false, only show current month's days in calendar
+     * @default true
+     * @type {boolean}
+     * */
+    @Input() showOtherMonths: boolean = true;
+
+    /**
+     * Callback to invoke when dropdown gets focus.
+     * */
+    @Output() onFocus: any = new EventEmitter<any>();
+
+    /**
+     * Callback to invoke when dropdown gets focus.
+     * */
+    @Output() onConfirm: any = new EventEmitter<any>();
+
+    /**
+     * Callback to invoke when dropdown loses focus.
+     * */
+    @Output() onBlur: any = new EventEmitter<any>();
+
+    /**
+     * Callback to invoke when a invalid date is selected.
+     * */
+    @Output() onInvalid: any = new EventEmitter<any>();
+
+
+
+    @ViewChild('container') containerElm: ElementRef;
+    @ViewChild('textInput') textInputElm: ElementRef;
+    @ViewChild('dialog') dialogElm: ElementRef;
+
+    public calendarDays: Array<any[]>;
+    public calendarWeekdays: string[];
+    public calendarMonths: Array<string[]>;
+    public calendarYears: Array<string[]> = [];
+    public dialogType: DialogType = DialogType.Date;
+    public dialogVisible: boolean;
+    public focus: boolean;
+    public formattedValue: string = '';
+    public value: any;
+    public pickerMoment: Date;
+    public pickerMonth: string;
+    public pickerYear: string;
+
+    public hourValue: number;
+    public minValue: number;
+    public secValue: number;
+    public meridianValue: string = 'AM';
+    private _userlocale: boolean = false;
+    private _locale: LocaleSettings = {
+        firstDayOfWeek: 0,
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        //dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        dateFns: null,
+        confirm: 'OK'
+    };
+    private _localeEn: LocaleSettings = {
+        firstDayOfWeek: 0,
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        dateFns: null,
+        confirm: 'OK'
+    };
+    private _localeZh: LocaleSettings = {
+        firstDayOfWeek: 0,
+        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
+        dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
+        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        dateFns: null,
+        confirm: '确定'
+    };
+    private dialogClick: boolean;
+    private documentClickListener: Function;
+    private valueIndex: number = 0;
+    private onModelChange: Function = () => {
+        //
+    }
+    private onModelTouched: Function = () => {
+        //
+    }
+
+    constructor(private renderer: Renderer2,
+        private numFixedLenPipe: NumberFixedLenPipe) {
+    }
+    private updateDate(newvalue : Date)
+    {
+        if(newvalue!==undefined&&newvalue!==null)
+        {
+            if(this.min)
+            {
+            newvalue = this._min.getTime()<=newvalue.getTime()?newvalue:new Date(this._min);
+            }
+            if(this.max)
+            {
+            newvalue = this._max.getTime()>=newvalue.getTime()?newvalue:new Date(this._max);
+            }
+            this.updateModel(newvalue);
+            this.updateCalendar(newvalue);
+            this.updateTimer(newvalue);
+            this.updateFormattedValue();
+            return;
+        }
+    }
+    public onInputChange(event:any): void {
+        let newvalue =  this.parseToDate(event.target.value);
+        if(newvalue!==undefined&&newvalue!==null)
+        {
+            if(this.min)
+            {
+            newvalue = this._min.getTime()<=newvalue.getTime()?newvalue:new Date(this._min);
+            }
+            if(this.max)
+            {
+            newvalue = this._max.getTime()>=newvalue.getTime()?newvalue:new Date(this._max);
+            }
+            this.updateModel(newvalue);
+            this.updateCalendar(newvalue);
+            this.updateTimer(newvalue);
+            this.updateFormattedValue();
+            return;
+        }
+        this.updateModel(null);
+        this.updateCalendar(null);
+        this.updateTimer(null);
+        this.updateFormattedValue();
+    }
+    public ngOnInit(): void {
+
+        if ((!this._userlocale) || this.locale === null && this.locale === undefined) {
+            switch (this.localePrefab) {
+
+                case 'Zh': {
+                    this._locale = this._localeZh;
+                    break;
+                }
+                case 'En': {
+                    this._locale = this._localeEn;
+                    break;
+                }
+                default:
+                    {
+                        this._locale = this._localeEn;
+                        break;
+                    }
+            }
+        }
+        this.pickerMoment = new Date();
+
+        if (this.type === 'both' || this.type === 'calendar') {
+            this.generateWeekDays();
+            this.generateMonthList();
+        }
+        this.updateTimer(this.value);
+    }
+
+    public ngAfterViewInit(): void {
+        this.updateCalendar(this.value);
+        this.updateTimer(this.value);
+    }
+
+    public ngOnDestroy(): void {
+        this.unbindDocumentClickListener();
+    }
+
+    public writeValue(obj: any): void {
+
+        if (obj instanceof Array) {
+            this.value = [];
+            for (let o of obj) {
+                let v = this.parseToDate(o);
+                this.value.push(v);
+            }
+            this.updateCalendar(this.value[0]);
+            this.updateTimer(this.value[0]);
+        } else {
+            this.value = this.parseToDate(obj);
+            this.updateCalendar(this.value);
+            this.updateTimer(this.value);
+        }
+        this.updateFormattedValue();
+    }
+
+    public registerOnChange(fn: any): void {
+        this.onModelChange = fn;
+    }
+
+    public registerOnTouched(fn: any): void {
+        this.onModelTouched = fn;
+    }
+
+    public setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+
+
+    private initflag = true;
+    /**
+     * Handle click event on the text input
+     * @param {any} event
+     * @return {void}
+     * */
+    public onInputClick(event: any): void {
+
+        if (this.timepicker !== undefined && this.initflag) {
+            this.initflag = false;
+            if (this.value !== undefined && this.value !== null) {
+                this.timepicker.updateHour(this.value.getHours());
+                this.timepicker.updateMinute(this.value.getMinutes());
+                this.timepicker.updateSecond(this.value.getSeconds());
+            }
+            else {
+                this.timepicker.updateHour(0);
+                this.timepicker.updateMinute(0);
+                this.timepicker.updateSecond(0);
+                this.updateModel(null);
+                this.updateFormattedValue();
+            }
+        }
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        this.dialogClick = true;
+        if (!this.dialogVisible) {
+            this.show();
+        }
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Set the element on focus
+     * @param {any} event
+     * @return {void}
+     * */
+    public onInputFocus(event: any): void {
+        this.focus = true;
+        this.onFocus.emit(event);
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Set the element on blur
+     * @param {any} event
+     * @return {void}
+     * */
+    public onInputBlur(event: any): void {
+        this.focus = false;
+        this.onModelTouched();
+        this.onBlur.emit(event);
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Handle click event on the dialog
+     * @param {any} event
+     * @return {void}
+     * */
+    public onDialogClick(event: any): void {
+        this.dialogClick = true;
+    }
+
+    /**
+     * Go to previous month
+     * @param {any} event
+     * @return {void}
+     * */
+    public prevMonth(event: any): void {
+
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        this.pickerMoment = addMonths(this.pickerMoment, -1);
+        this.generateCalendar();
+        if(this.value!==undefined&&this.value!==null)
+        {
+        let nowvalue = new Date(this.value);
+        nowvalue.setMonth(this.pickerMoment.getMonth());
+        this.updateDate(nowvalue);
+        }
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Go to next month
+     * @param {any} event
+     * @return {void}
+     * */
+    public nextMonth(event: any): void {
+
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        this.pickerMoment = addMonths(this.pickerMoment, 1);
+        this.generateCalendar();
+        if(this.value!==undefined&&this.value!==null)
+        {
+        let nowvalue = new Date(this.value);
+        nowvalue.setMonth(this.pickerMoment.getMonth());
+        this.updateDate(nowvalue);
+        }
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Select a date
+     * @param {any} event
+     * @param {Date} date
+     * @return {void}
+     * */
+    public selectDate(event: any, date: Date): void {
+
+        if (this.disabled || !date) {
+            event.preventDefault();
+            return;
+        }
+
+        let temp: Date;
+        // check if the selected date is valid
+        if (this.isValidValue(date)) {
+            temp = date;
+        } else {
+            if (isSameDay(date, this._min)) {
+                temp = new Date(this._min);
+            } else if (isSameDay(date, this._max)) {
+                temp = new Date(this._max);
+            } else {
+                this.onInvalid.emit({ originalEvent: event, value: date });
+                return;
+            }
+        }
+        if (this.minValue !== undefined) {
+            temp.setMinutes(this.minValue);
+        }
+        if (this.secValue !== undefined) {
+            temp.setSeconds(this.secValue);
+        }
+        if (this.hourValue !== undefined) {
+            temp.setHours(this.hourValue);
+        }
+        let selected;
+        if (this.isSingleSelection()) {
+            if (!isSameDay(this.value, temp)) {
+                selected = temp;
+            }
+        } else if (this.isRangeSelection()) {
+            if (this.value && this.value.length) {
+                let startDate = this.value[0];
+                let endDate = this.value[1];
+
+                if (!endDate && temp.getTime() > startDate.getTime()) {
+                    endDate = temp;
+                    this.valueIndex = 1;
+                } else {
+                    startDate = temp;
+                    endDate = null;
+                    this.valueIndex = 0;
+                }
+                selected = [startDate, endDate];
+            } else {
+                selected = [temp, null];
+                this.valueIndex = 0;
+            }
+        } else if (this.isMultiSelection()) {
+
+            // check if it exceeds the maxDateCount limit
+            if (this.maxDateCount && this.value &&
+                this.value.length && this.value.length >= this.maxDateCount) {
+                this.onInvalid.emit({ originalEvent: event, value: 'Exceed max date count.' });
+                return;
+            }
+
+            if (this.isSelectedDay(temp)) {
+                selected = this.value.filter((d: Date) => {
+                    return !isSameDay(d, temp);
+                });
+            } else {
+                selected = this.value ? [...this.value, temp] : [temp];
+                this.valueIndex = selected.length - 1;
+            }
+        }
+        if (selected) {
+            this.updateModel(selected);
+            if (this.value instanceof Array) {
+                this.updateCalendar(this.value[this.valueIndex]);
+                this.updateTimer(this.value[this.valueIndex]);
+            } else {
+                this.updateCalendar(this.value);
+                this.updateTimer(this.value);
+            }
+            this.updateFormattedValue();
+        }
+    }
+
+    /**
+     * Set a pickerMoment's month
+     * @param {Number} monthNum
+     * @return {void}
+     * */
+    public selectMonth(monthNum: number): void {
+        this.pickerMoment = setMonth(this.pickerMoment, monthNum);
+        this.generateCalendar();
+        if(this.value!==undefined&&this.value!==null)
+        {
+        let nowvalue = new Date(this.value);
+        nowvalue.setMonth(monthNum);
+        this.updateDate(nowvalue);
+        }
+        this.changeDialogType(DialogType.Month);
+    }
+
+    /**
+     * Set a pickerMoment's year
+     * @param {Number} yearNum
+     * @return {void}
+     * */
+    public selectYear(yearNum: number): void {
+        this.pickerMoment = setYear(this.pickerMoment, yearNum);
+        this.generateCalendar();
+        if(this.value!==undefined&&this.value!==null)
+        {
+        let nowvalue = new Date(this.value);
+        nowvalue.setFullYear(yearNum);
+        this.updateDate(nowvalue);
+        }
+        this.changeDialogType(DialogType.Year);
+    }
+
+    /**
+     * Set the selected moment's meridian
+     * @param {any} event
+     * @return {void}
+     * */
+    public toggleMeridian(event: any): void {
+
+        let value = this.value ? (this.value.length ? this.value[this.valueIndex] : this.value) : null;
+
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        if (!value) {
+            this.meridianValue = this.meridianValue === 'AM' ? 'PM' : 'AM';
+            return;
+        }
+
+        let hours = getHours(value);
+        if (this.meridianValue === 'AM') {
+            hours += 12;
+        } else if (this.meridianValue === 'PM') {
+            hours -= 12;
+        }
+
+        let selectedTime = setHours(value, hours);
+        this.setSelectedTime(selectedTime);
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Set the selected moment's hour
+     * @param {any} event
+     * @param {'increase' | 'decrease' | number} val
+     *      'increase' -- increase hour value by 1
+     *      'decrease' -- decrease hour value by 1
+     *      number -- set hour value to val
+     * @param {HTMLInputElement} input -- optional
+     * @return {boolean}
+     * */
+    public setHours(event: any, val: 'increase' | 'decrease' | number, input?: HTMLInputElement): boolean {
+
+        let value;
+        if (this.value) {
+            if (this.value.length) {
+                value = this.value[this.valueIndex];
+            } else {
+                value = this.value;
+            }
+        } else {
+            if (this.type === 'timer') {
+                value = new Date();
+            } else {
+                value = null;
+            }
+        }
+
+        if (this.disabled || !value) {
+            event.preventDefault();
+            return false;
+        }
+
+        let hours = getHours(value);
+        if (val === 'increase') {
+            hours += 1;
+        } else if (val === 'decrease') {
+            hours -= 1;
+        } else {
+            hours = val;
+        }
+
+        if (hours > 23) {
+            hours = 0;
+        } else if (hours < 0) {
+            hours = 23;
+        }
+
+        let selectedTime = setHours(value, hours);
+        let done = this.setSelectedTime(selectedTime);
+
+        // Focus the input and select its value when model updated
+        if (input) {
+            setTimeout(() => {
+                input.focus();
+            }, 0);
+        }
+
+        event.preventDefault();
+        return done;
+    }
+
+    /**
+     * Set the selected moment's minute
+     * @param {any} event
+     * @param {'increase' | 'decrease' | number} val
+     *      'increase' -- increase minute value by 1
+     *      'decrease' -- decrease minute value by 1
+     *      number -- set minute value to val
+     * @param {HTMLInputElement} input -- optional
+     * @return {boolean}
+     * */
+    public setMinutes(event: any, val: 'increase' | 'decrease' | number, input?: HTMLInputElement): boolean {
+
+        let value;
+        if (this.value) {
+            if (this.value.length) {
+                value = this.value[this.valueIndex];
+            } else {
+                value = this.value;
+            }
+        } else {
+            if (this.type === 'timer') {
+                value = new Date();
+            } else {
+                value = null;
+            }
+        }
+
+        if (this.disabled || !value) {
+            event.preventDefault();
+            return false;
+        }
+
+        let minutes = getMinutes(value);
+        if (val === 'increase') {
+            minutes += 1;
+        } else if (val === 'decrease') {
+            minutes -= 1;
+        } else {
+            minutes = val;
+        }
+
+        if (minutes > 59) {
+            minutes = 0;
+        } else if (minutes < 0) {
+            minutes = 59;
+        }
+
+        let selectedTime = setMinutes(value, minutes);
+        let done = this.setSelectedTime(selectedTime);
+
+        // Focus the input and select its value when model updated
+        if (input) {
+            setTimeout(() => {
+                input.focus();
+            }, 0);
+        }
+
+        event.preventDefault();
+        return done;
+    }
+
+    /**
+     * Set the selected moment's second
+     * @param {any} event
+     * @param {'increase' | 'decrease' | number} val
+     *      'increase' -- increase second value by 1
+     *      'decrease' -- decrease second value by 1
+     *      number -- set second value to val
+     * @param {HTMLInputElement} input -- optional
+     * @return {boolean}
+     * */
+    public setSeconds(event: any, val: 'increase' | 'decrease' | number, input?: HTMLInputElement): boolean {
+
+        let value;
+        if (this.value) {
+            if (this.value.length) {
+                value = this.value[this.valueIndex];
+            } else {
+                value = this.value;
+            }
+        } else {
+            if (this.type === 'timer') {
+                value = new Date();
+            } else {
+                value = null;
+            }
+        }
+
+        if (this.disabled || !value) {
+            event.preventDefault();
+            return false;
+        }
+
+        let seconds = getSeconds(value);
+        if (val === 'increase') {
+            seconds = this.secValue + 1;
+        } else if (val === 'decrease') {
+            seconds = this.secValue - 1;
+        } else {
+            seconds = val;
+        }
+
+        if (seconds > 59) {
+            seconds = 0;
+        } else if (seconds < 0) {
+            seconds = 59;
+        }
+
+        let selectedTime = setSeconds(value, seconds);
+        let done = this.setSelectedTime(selectedTime);
+
+        // Focus the input and select its value when model updated
+        if (input) {
+            setTimeout(() => {
+                input.focus();
+            }, 0);
+        }
+
+        event.preventDefault();
+        return done;
+    }
+
+    /**
+     * Check if the date is selected
+     * @param {Date} date
+     * @return {Boolean}
+     * */
+    public isSelectedDay(date: Date): boolean {
+        if (this.isSingleSelection()) {
+            return this.value && isSameDay(this.value, date);
+        } else if (this.isRangeSelection() && this.value && this.value.length) {
+            if (this.value[1]) {
+                return (isSameDay(this.value[0], date) || isSameDay(this.value[1], date) ||
+                    this.isDayBetween(this.value[0], this.value[1], date)) && this.isValidDay(date);
+            } else {
+                return isSameDay(this.value[0], date);
+            }
+        } else if (this.isMultiSelection() && this.value && this.value.length) {
+            let selected;
+            for (let d of this.value) {
+                selected = isSameDay(d, date);
+                if (selected) {
+                    break;
+                }
+            }
+            return selected;
+        }
+        return false;
+    }
+
+    /**
+     * Check if a day is between two specific days
+     * @param {Date} start
+     * @param {Date} end
+     * @param {Date} day
+     * @return {boolean}
+     * */
+    public isDayBetween(start: Date, end: Date, day: Date): boolean {
+        if (start && end) {
+            return isAfter(day, start) && isBefore(day, end);
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * Check if the calendar day is a valid day
+     * @param {Date}  date
+     * @return {Boolean}
+     * */
+    public isValidDay(date: Date): boolean {
+        let isValid = true;
+        if (this.disabledDates && this.disabledDates.length) {
+            for (let disabledDate of this.disabledDates) {
+                if (isSameDay(disabledDate, date)) {
+                    return false;
+                }
+            }
+        }
+
+        if (isValid && this.disabledDays && this.disabledDays.length) {
+            let weekdayNum = getDay(date);
+            isValid = this.disabledDays.indexOf(weekdayNum) === -1;
+        }
+
+        if (isValid && this.min) {
+            isValid = isValid && !isBefore(date, startOfDay(this.min));
+        }
+
+        if (isValid && this.max) {
+            isValid = isValid && !isAfter(date, endOfDay(this.max));
+        }
+        return isValid;
+    }
+
+    /**
+     * Check if the month is current pickerMoment's month
+     * @param {Number} monthNum
+     * @return {Boolean}
+     * */
+    public isCurrentMonth(monthNum: number): boolean {
+        return getMonth(this.pickerMoment) === monthNum;
+    }
+
+    /**
+     * Check if the year is current pickerMoment's year
+     * @param {Number} yearNum
+     * @return {Boolean}
+     * */
+    public isCurrentYear(yearNum: any): boolean {
+        return getYear(this.pickerMoment) === yearNum||(getYear(this.pickerMoment)+"") === yearNum;
+    }
+
+    /**
+     * Change the dialog type
+     * @param {DialogType} type
+     * @return {void}
+     * */
+    public changeDialogType(type: DialogType): void {
+        if (this.dialogType === type) {
+            this.dialogType = DialogType.Date;
+            return;
+        } else {
+            this.dialogType = type;
+        }
+
+        if (this.dialogType === DialogType.Year) {
+            this.generateYearList();
+        }
+    }
+
+    /**
+     * Handle blur event on timer input
+     * @param {any} event
+     * @param {HTMLInputElement} input
+     * @param {string} type
+     * @param {number} modelValue
+     * @return {void}
+     * */
+    public onTimerInputBlur(event: any, input: HTMLInputElement, type: string, modelValue: number): void {
+        let val = +input.value;
+
+        if (this.disabled || val === modelValue) {
+            event.preventDefault();
+            return;
+        }
+
+        let done;
+        if (!isNaN(val)) {
+            switch (type) {
+                case 'hours':
+                    if (this.hourFormat === '24' &&
+                        val >= 0 && val <= 23) {
+                        done = this.setHours(event, val);
+                    } else if (this.hourFormat === '12'
+                        && val >= 1 && val <= 12) {
+                        if (this.meridianValue === 'AM' && val === 12) {
+                            val = 0;
+                        } else if (this.meridianValue === 'PM' && val < 12) {
+                            val = val + 12;
+                        }
+                        done = this.setHours(event, val);
+                    }
+                    break;
+                case 'minutes':
+                    if (val >= 0 && val <= 59) {
+                        done = this.setMinutes(event, val);
+                    }
+                    break;
+                case 'seconds':
+                    if (val >= 0 && val <= 59) {
+                        done = this.setSeconds(event, val);
+                    }
+                    break;
+            }
+        }
+
+        if (!done) {
+            input.value = this.numFixedLenPipe.transform(modelValue, 2);
+            input.focus();
+            return;
+        }
+        event.preventDefault();
+        return;
+    }
+
+    /**
+     * Set value to null
+     * @param {any} event
+     * @return {void}
+     * */
+    public clearValue(event: any): void {
+        this.dialogClick = true;
+        this.updateModel(null);
+        this.updateTimer(this.value);
+        if (this.timepicker!==undefined) {
+            this.timepicker.settime(undefined);
+        }
+        this.updateFormattedValue();
+        if(this.value!==null)
+        {
+        event.date=new Date(this.value);
+        }
+        this.onConfirm.emit(event);
+        event.preventDefault();
+    }
+
+    /**
+     * Show the dialog
+     * @return {void}
+     * */
+    private show(): void {
+        this.alignDialog();
+        this.dialogVisible = true;
+        this.dialogType = DialogType.Date;
+        this.bindDocumentClickListener();
+        return;
+    }
+    private nextNav(event : any):void {
+        if( this.dialogType===DialogType.Date|| this.dialogType===DialogType.Month)
+        {
+            this.nextMonth(event);
+        }
+        else if(this.dialogType===DialogType.Year){
+            this.generateYearList('next');
+        }
+    }
+    private prevNav(event : any):void {
+        if( this.dialogType===DialogType.Date|| this.dialogType===DialogType.Month)
+        {
+            this.prevMonth(event);
+        }
+        else if(this.dialogType===DialogType.Year){
+            this.generateYearList('prev');
+        }
+    }
+    /**
+     * Hide the dialog
+     * @return {void}
+     * */
+    private hide(): void {
+        this.dialogVisible = false;
+        this.timepicker ? this.timepicker.closeProp() : 0;
+        this.unbindDocumentClickListener();
+        if(this.value!==null)
+        {
+        event["date"]=new Date(this.value);
+        }
+        this.onConfirm.emit(event);
+        return;
+    }
+
+    /**
+     * Set the dialog position
+     * @return {void}
+     * */
+    private alignDialog(): void {
+        let element = this.dialogElm.nativeElement;
+        let target = this.containerElm.nativeElement;
+        let elementDimensions = element.offsetParent ? {
+            width: element.offsetWidth,
+            height: element.offsetHeight
+        } : this.getHiddenElementDimensions(element);
+        let targetHeight = target.offsetHeight;
+        let targetWidth = target.offsetWidth;
+        let targetOffset = target.getBoundingClientRect();
+        let viewport = this.getViewport();
+        let top, left;
+
+        if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
+            top = -1 * (elementDimensions.height);
+            if (targetOffset.top + top < 0) {
+                top = 0;
+            }
+        } else {
+            top = targetHeight;
+        }
+
+
+        if ((targetOffset.left + elementDimensions.width) > viewport.width) {
+            left = targetWidth - elementDimensions.width;
+        } else {
+            left = 0;
+        }
+
+        element.style.top = top + 'px';
+        element.style.left = left + 'px';
+    }
+
+    /**
+     * Bind click event on document
+     * @return {void}
+     * */
+    private bindDocumentClickListener(): void {
+        let firstClick = true;
+        if (!this.documentClickListener) {
+            this.documentClickListener = this.renderer.listen('document', 'click', () => {
+                if (!firstClick && !this.dialogClick) {
+                    this.hide();
+                }
+
+                firstClick = false;
+                this.dialogClick = false;
+            });
+        }
+        return;
+    }
+
+    /**
+     * Unbind click event on document
+     * @return {void}
+     * */
+    private unbindDocumentClickListener(): void {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+        }
+        return;
+    }
+
+    /**
+     * Parse a object to Date object
+     * @param {any} val
+     * @return {Date}
+     * */
+    private parseToDate(val: any): Date {
+        if (!val) {
+            return;
+        }
+
+        let parsedVal;
+        if (typeof val === 'string') {
+            parsedVal = parse(val);
+        } else {
+            parsedVal = val;
+        }
+
+        return isValid(parsedVal) ? parsedVal : null;
+    }
+
+    /**
+     * Generate the calendar days array
+     * @return {void}
+     * */
+    private generateCalendar(): void {
+
+        if (!this.pickerMoment) {
+            return;
+        }
+
+        this.calendarDays = [];
+        let startDateOfMonth = startOfMonth(this.pickerMoment);
+        let startWeekdayOfMonth = getDay(startDateOfMonth);
+
+        let dayDiff = 0 - (startWeekdayOfMonth + (7 - this.locale.firstDayOfWeek)) % 7;
+
+        for (let i = 1; i < 7; i++) {
+            let week = [];
+            for (let j = 0; j < 7; j++) {
+                let date = addDays(startDateOfMonth, dayDiff);
+                let inOtherMonth = !isSameMonth(date, this.pickerMoment);
+                week.push({
+                    date,
+                    num: getDate(date),
+                    today: isToday(date),
+                    otherMonth: inOtherMonth,
+                    hide: !this.showOtherMonths && inOtherMonth,
+                });
+                dayDiff += 1;
+            }
+            this.calendarDays.push(week);
+        }
+
+        this.pickerMonth = this.locale.monthNames[getMonth(this.pickerMoment)];
+        this.pickerYear = getYear(this.pickerMoment).toString();
+    }
+
+    /**
+     * Generate the calendar weekdays array
+     * */
+    private generateWeekDays(): void {
+        this.calendarWeekdays = [];
+        let dayIndex = this.locale.firstDayOfWeek;
+        for (let i = 0; i < 7; i++) {
+            this.calendarWeekdays.push(this.locale.dayNamesShort[dayIndex]);
+            dayIndex = (dayIndex === 6) ? 0 : ++dayIndex;
+        }
+    }
+
+    /**
+     * Generate the calendar month array
+     * @return {void}
+     * */
+    private generateMonthList(): void {
+        this.calendarMonths = [];
+        let monthIndex = 0;
+        for (let i = 0; i < 4; i++) {
+            let months = [];
+            for (let j = 0; j < 3; j++) {
+                months.push(this.locale.monthNamesShort[monthIndex]);
+                monthIndex += 1;
+            }
+            this.calendarMonths.push(months);
+        }
+    }
+
+    /**
+     * Generate the calendar year array
+     * @return {void}
+     * */
+    public generateYearList(dir?: string): void {
+
+        if (!this.pickerMoment) {
+            return;
+        }
+        let start;
+
+        if (dir === 'prev') {
+            start = +this.calendarYears[0][0] - 12;
+            if(start<0)
+            {
+                start=0;
+            }
+        } else if (dir === 'next') {
+            start = +this.calendarYears[3][2] + 1;
+        } else {
+            start = getYear(addYears(this.pickerMoment, -4));
+        }
+
+        for (let i = 0; i < 4; i++) {
+            let years = [];
+            for (let j = 0; j < 3; j++) {
+                let year = (start + i * 3 + j).toString();
+                years.push(year);
+            }
+            this.calendarYears[i] = years;
+        }
+        return;
+    }
+
+    /**
+     * Update the calendar
+     * @param {Date} value
+     * @return {void}
+     * */
+    private updateCalendar(value: Date): void {
+
+        // if the dateTime picker is only the timer,
+        // no need to update the update Calendar.
+        if (this.type === 'timer') {
+            return;
+        }
+
+        if (value && (!this.calendarDays || !isSameMonth(value, this.pickerMoment))) {
+            this.pickerMoment = setMonth(this.pickerMoment, getMonth(value));
+            this.pickerMoment = setYear(this.pickerMoment, getYear(value));
+            this.generateCalendar();
+        } else if (!value && !this.calendarDays) {
+            this.generateCalendar();
+        }
+        return;
+    }
+
+    /**
+     * Update the timer
+     * @param {Date} value
+     * @return {boolean}
+     * */
+    private updateTimer(value: Date): boolean {
+
+        // if the dateTime picker is only the calendar,
+        // no need to update the timer
+        if (this.type === 'calendar') {
+            return false;
+        }
+
+        if (!value) {
+            this.hourValue = null;
+            this.minValue = null;
+            this.secValue = null;
+            this.mtime.hour = 0;
+            this.mtime.minute = 0;
+            this.mtime.second = 0;
+            return true;
+        }
+        this.mtime.hour = value.getHours();
+        this.mtime.minute = value.getMinutes();
+        this.mtime.second = value.getSeconds();;
+
+        let time = value;
+        let hours = getHours(time);
+        if (this.hourFormat === '12') {
+            if (hours < 12 && hours > 0) {
+                this.hourValue = hours;
+                this.meridianValue = 'AM';
+            } else if (hours > 12) {
+                this.hourValue = hours - 12;
+                this.meridianValue = 'PM';
+            } else if (hours === 12) {
+                this.hourValue = 12;
+                this.meridianValue = 'PM';
+            } else if (hours === 0) {
+                this.hourValue = 12;
+                this.meridianValue = 'AM';
+            }
+        } else if (this.hourFormat === '24') {
+            this.hourValue = hours;
+        }
+
+        this.minValue = getMinutes(time);
+        this.secValue = getSeconds(time);
+        if(this.value!==undefined&&this.timepicker!==undefined)
+        {
+        this.timepicker.settime(new Date(this.value));
+        }
+        return true;
+    }
+
+    /**
+     * Update ngModel
+     * @param {Date} value
+     * @return {Boolean}
+     * */
+    private updateModel(value: Date | Date[]): boolean {
+        this.value = value;
+        if (this.dataType === 'date') {
+            this.onModelChange(this.value);
+        } else if (this.dataType === 'string') {
+            if (this.value && this.value.length) {
+                let formatted = [];
+                for (let v of this.value) {
+                    if (v) {
+                        formatted.push(format(v, this.dateFormat, { locale: this.locale.dateFns }));
+                    } else {
+                        formatted.push(null);
+                    }
+                }
+                this.onModelChange(formatted);
+            } else {
+                this.onModelChange(format(this.value, this.dateFormat, { locale: this.locale.dateFns }));
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Update variable formattedValue
+     * @return {void}
+     * */
+    private updateFormattedValue(): void {
+        let formattedValue = '';
+
+        if (this.value) {
+            if (this.isSingleSelection()) {
+                formattedValue = format(this.value, this.dateFormat, { locale: this.locale.dateFns });
+            } else if (this.isRangeSelection()) {
+                let startDate = this.value[0];
+                let endDate = this.value[1];
+
+                formattedValue = format(startDate, this.dateFormat, { locale: this.locale.dateFns });
+
+                if (endDate) {
+                    formattedValue += ' - ' + format(endDate, this.dateFormat, { locale: this.locale.dateFns });
+                } else {
+                    formattedValue += ' - ' + this.dateFormat;
+                }
+            } else if (this.isMultiSelection()) {
+                for (let i = 0; i < this.value.length; i++) {
+                    let dateAsString = format(this.value[i], this.dateFormat, { locale: this.locale.dateFns });
+                    formattedValue += dateAsString;
+                    if (i !== (this.value.length - 1)) {
+                        formattedValue += ', ';
+                    }
+                }
+            }
+        }
+
+        this.formattedValue = formattedValue;
+
+        return;
+    }
+
+    /**
+     * Set the time
+     * @param {Date} val
+     * @return {boolean}
+     * */
+    public setSelectedTime(val: Date): boolean {
+        let done;
+        if (this.isValidValue(val)) {
+            if (this.value instanceof Array) {
+                this.value[this.valueIndex] = val;
+                done = this.updateModel(this.value);
+                done = done && this.updateTimer(this.value[this.valueIndex]);
+            } else {
+                done = this.updateModel(val);
+                done = done && this.updateTimer(this.value);
+            }
+            this.updateFormattedValue();
+        } else {
+            this.onInvalid.emit({ originalEvent: event, value: val });
+            done = false;
+        }
+        return done;
+    }
+
+    private isValidValue(value: Date): boolean {
+        let isValid = true;
+
+        if (this.disabledDates && this.disabledDates.length) {
+            for (let disabledDate of this.disabledDates) {
+                if (isSameDay(disabledDate, value)) {
+                    return false;
+                }
+            }
+        }
+
+        if (isValid && this.disabledDays && this.disabledDays.length) {
+            let weekdayNum = getDay(value);
+            isValid = this.disabledDays.indexOf(weekdayNum) === -1;
+        }
+
+        if (isValid && this.min) {
+            isValid = isValid && !isBefore(value, this.min);
+        }
+
+        if (isValid && this.max) {
+            isValid = isValid && !isAfter(value, this.max);
+        }
+
+        return isValid;
+    }
+
+    /**
+     * Check if the selection mode is 'single'
+     * @return {boolean}
+     * */
+    private isSingleSelection(): boolean {
+        return this.selectionMode === 'single';
+    }
+
+    /**
+     * Check if the selection mode is 'range'
+     * @return {boolean}
+     * */
+    private isRangeSelection(): boolean {
+        return this.selectionMode === 'range';
+    }
+
+    /**
+     * Check if the selection mode is 'multiple'
+     * @return {boolean}
+     * */
+    private isMultiSelection(): boolean {
+        return this.selectionMode === 'multiple';
+    }
+
+    private getHiddenElementDimensions(element: any): any {
+        let dimensions: any = {};
+        element.style.visibility = 'hidden';
+        element.style.display = 'block';
+        dimensions.width = element.offsetWidth;
+        dimensions.height = element.offsetHeight;
+        element.style.display = 'none';
+        element.style.visibility = 'visible';
+
+        return dimensions;
+    }
+
+    private getViewport(): any {
+        let win = window,
+            d = document,
+            e = d.documentElement,
+            g = d.getElementsByTagName('body')[0],
+            w = win.innerWidth || e.clientWidth || g.clientWidth,
+            h = win.innerHeight || e.clientHeight || g.clientHeight;
+
+        return { width: w, height: h };
+    }
+    public confirm() {
+        this.hide();
+    }
+    public seconds = false;
+    public mtime: any = { hour: 0, minute: 0, second: 0 };
+    public TimerChange(time: any) {
+        let value;
+        if (this.value) {
+            if (this.value.length) {
+                value = this.value[this.valueIndex];
+            } else {
+                value = this.value;
+            }
+        } else {
+            if (this.type === 'timer') {
+                value = new Date();
+            } else {
+                value = new Date();
+            }
+        }
+
+        if (this.disabled || !value) {
+            event.preventDefault();
+            return false;
+        }
+
+        let minute = time.minute;
+        let hour = time.hour;
+        let second = time.second;
+        this.minValue = minute;
+        this.hourValue = hour;
+        this.secValue = second;
+        let selectedTime = setMinutes(value, minute);
+        selectedTime = setHours(selectedTime, hour);
+        selectedTime = setSeconds(selectedTime, second);
+        let done = this.setSelectedTime(selectedTime);
+
+        // Focus the input and select its value when model updated
+
+        event.preventDefault();
+        return done;
+    }
+    private mouseIn :boolean = false; 
+    private Mouseout(event:any)
+    {
+        this.mouseIn = false;
+    }
+    private Mouseover(event:any)
+    {
+        this.mouseIn = true;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.module.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.module.ts
new file mode 100644
index 00000000..0511ad71
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.module.ts
@@ -0,0 +1,27 @@
+/**
+ * picker.module
+ */
+
+import { NgModule } from '@angular/core';
+
+import { DateTimePickerComponent } from './picker.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NumberFixedLenPipe } from './numberedFixLen.pipe';
+import { NgbTimepickerr } from './timepicker';
+import { OesDaterangePopover, OesDaterangePopoverWindow } from './popover';
+import { OesDaterangePopoverConfig } from './popover-config';
+import { NgbTimepickerConfig } from './timepicker-config';
+import { PlxDateRangePickerComponent } from './pickerrange.component'
+export {DateTimePickerComponent} from './picker.component';
+
+@NgModule({
+    imports: [CommonModule, FormsModule],
+    exports: [DateTimePickerComponent, NgbTimepickerr, OesDaterangePopover,PlxDateRangePickerComponent],
+    declarations: [DateTimePickerComponent, NumberFixedLenPipe, NgbTimepickerr, OesDaterangePopoverWindow, OesDaterangePopover,PlxDateRangePickerComponent],
+    providers: [OesDaterangePopoverConfig, NgbTimepickerConfig, OesDaterangePopoverConfig],
+    entryComponents: [DateTimePickerComponent, OesDaterangePopoverWindow]
+})
+export class PlxDatePickerModule {
+}
+
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.html b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.html
new file mode 100644
index 00000000..2b1986fe
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.html
@@ -0,0 +1,14 @@
+<div style="width:100%;">
+<div class="datepickboxleft" >
+    <plx-datepicker [canClear]="canClear" [supportKeyboardInput]="supportKeyboardInput" [disabled]="disabled" [(ngModel)]="startDate" [showTime]="showTime" [showSeconds]="showSeconds" [timeOnly]="timeOnly" [dateFormat]="dateFormat"  [locale]="locale"  [minDate]="startMinDate" [maxDate]="_startMaxDate"  (onConfirm)="EvonStartDateClosed($event)"
+            placeHolder="{{placeHolderStartDate}}"></plx-datepicker>
+</div>
+<div class="datepickboxto" >
+{{locale.to}}
+</div>
+<div  class="datepickboxright" >
+    <plx-datepicker [canClear]="canClear" [supportKeyboardInput]="supportKeyboardInput" [disabled]="disabled" [(ngModel)]="endDate" [showTime]="showTime" [showSeconds]="showSeconds" [timeOnly]="timeOnly" [dateFormat]="dateFormat"  [locale]="locale"  [minDate]="_endMinDate"  [maxDate]="endMaxDate"   (onConfirm)="EvonEndDateClosed($event)"
+            placeHolder="{{placeHolderEndDate}}"></plx-datepicker>
+</div>
+<br/>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.ts
new file mode 100644
index 00000000..a84e0987
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.ts
@@ -0,0 +1,162 @@
+/**
+ * picker.component
+ */
+
+import {
+    AfterViewInit,
+    Component, ElementRef, EventEmitter, forwardRef, Input, OnDestroy, OnInit, Output, Renderer2,
+    ViewChild
+} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+export interface LocaleSettings {
+    firstDayOfWeek?: number;
+    dayNames: string[];
+    dayNamesShort: string[];
+    monthNames: string[];
+    monthNamesShort: string[];
+    dateFns: any;
+}
+
+export enum DialogType {
+    Time,
+    Date,
+    Month,
+    Year,
+}
+
+@Component({
+    selector: 'plx-daterange-picker',
+    templateUrl: './pickerrange.component.html',
+    styleUrls: ['./pickerrange.component.css'],
+    providers: [],
+})
+
+export class PlxDateRangePickerComponent  {
+    /*
+disabled	boolean	false	设置为true时input框不能输入
+minDate	Date	null	最小可选日期
+maxDate	Date	null	最大可选日期
+showTime	boolean	false	设置为true时显示时间选择器
+showSeconds	boolean	false	时间选择器显示秒
+timeOnly	boolean	false	设置为true时只显示时间选择器
+dateFormat	string	YYYY-MM-DD HH:mm	设置时间选择模式
+locale	Object	null	设置国际化对象，请参考国际化例子。
+改变组件时间*/
+
+    @Input() disabled : boolean = false;
+    @Input() showTime : boolean = false;
+    @Input() showSeconds : boolean = false;
+    @Input() timeOnly : boolean = false;
+    @Input() dateFormat	: string = "YYYY-MM-DD HH:mm";
+    @Input() placeHolderStartDate	: string = "";
+    @Input() placeHolderEndDate	: string = "";
+    @Input() locale	: any ={
+        firstDayOfWeek: 0,
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        dateFns: null,
+        confirm:'OK',
+        to:"to"
+    };
+    @Input() startDate : Date;
+    @Input() endDate : Date;
+    @Input() canClear: boolean = true;
+    @Input() startMinDate:Date;
+    @Input() endMaxDate:Date;
+    /**
+     * @default false
+     * @type {Boolean}
+     * */
+    @Input() supportKeyboardInput: boolean = false;
+    _startSetMaxDate:Date;
+    _startMaxDate:Date;
+    @Input() 
+    set startMaxDate( date:Date)
+    {
+        this._startSetMaxDate=date;
+        this.BuildstartMaxDate();
+    }    
+    _endSetMinDate:Date;
+    _endMinDate:Date;
+    @Input() 
+    set endMinDate( date:Date)
+    {
+        this._endSetMinDate=date;
+        this.BuildendMinDate();
+    }
+    BuildstartMaxDate()
+    {
+        if(this._startSetMaxDate===undefined)
+        {
+            this._startMaxDate=this.endDate
+            return;
+        }
+        if(this.endDate!==undefined)
+        {
+            this._startMaxDate= this.endDate<this._startSetMaxDate?this.endDate:this._startSetMaxDate;
+            return;
+        }
+        this._startMaxDate=this._startSetMaxDate;
+    }
+    BuildendMinDate()
+    {
+        if(this._endSetMinDate===undefined)
+        {
+            this._endMinDate=this.startDate
+            return;
+        }
+        if(this.startDate!==undefined)
+        {
+            this._endMinDate= this.startDate>this._endSetMinDate?this.startDate:this._endSetMinDate;
+            return;
+        }
+        this._endMinDate=this._endSetMinDate;
+    }
+    
+    @Output()
+    onStartDateClosed: EventEmitter<any> = new EventEmitter<any>();
+    @Output()
+    onEndDateClosed: EventEmitter<any> = new EventEmitter<any>();
+
+    EvonStartDateClosed(event : any)
+    {
+        this.BuildendMinDate();
+        if(this.startDate!==null)
+        {
+        event.date=new Date(this.startDate);
+        }
+        this.onStartDateClosed.emit(event);
+        event.preventDefault();
+        let dd= this;
+        return;
+    }
+
+
+    EvonEndDateClosed (event : any)
+    {
+
+        this.BuildstartMaxDate()
+        if(this.endDate!==null)
+        {
+        event.date=new Date(this.endDate);
+        }
+        this.onEndDateClosed.emit(event);
+        event.preventDefault();
+        let dd= this;
+        return;
+    }
+
+
+    public navigateTo (startDate: Date, endDate: Date)
+    {
+        this.startDate=startDate;
+        this.endDate = endDate;
+    }
+    
+
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover-config.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover-config.ts
new file mode 100644
index 00000000..5ac773c5
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover-config.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Configuration service for the OesDaterangePopover directive.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the popovers used in the application.
+ */
+@Injectable()
+export class OesDaterangePopoverConfig {
+    public placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+    public triggers = 'click';
+    public container: string;
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts
new file mode 100644
index 00000000..3d054120
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts
@@ -0,0 +1,175 @@
+import {
+  Component,
+  Directive,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  OnInit,
+  OnDestroy,
+  Injector,
+  Renderer,
+  ComponentRef,
+  ElementRef,
+  TemplateRef,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  NgZone
+} from '@angular/core';
+
+import { listenToTriggers } from './util/triggers';
+import { positionElements } from './util/positioning';
+import { PopupService } from './util/popup';
+import { OesDaterangePopoverConfig } from './popover-config';
+
+let nextId = 0;
+
+@Component({
+  selector: 'ngb-popover-window',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { '[class]': '"popover show popover-" + placement', 'role': 'tooltip', '[id]': 'id' },
+  styles: [`
+
+    .popover-title,.popover-content{
+        background-color: #fff;
+    }
+     .popover-custom{
+        padding:9px 5px !important;
+     }
+
+
+   `],
+  template: `
+    <h3 class="popover-title">{{title}}</h3><div class="popover-content popover-custom"><ng-content></ng-content></div>
+    `
+})
+export class OesDaterangePopoverWindow {
+  @Input() public placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  @Input() public title: string;
+  @Input() public id: string;
+}
+
+/**
+ * A lightweight, extensible directive for fancy oes-popover creation.
+ */
+@Directive({ selector: '[oesDaterangePopover]', exportAs: 'oesDaterangePopover' })
+export class OesDaterangePopover implements OnInit, OnDestroy {
+  /**
+   * Content to be displayed as oes-popover.
+   */
+  @Input() public oesDaterangePopover: string | TemplateRef<any>;
+  /**
+   * Title of a oes-popover.
+   */
+  @Input() public popoverTitle: string;
+  /**
+   * Placement of a oes-popover. Accepts: "top", "bottom", "left", "right"
+   */
+  @Input() public placement: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Specifies events that should trigger. Supports a space separated list of event names.
+   */
+  @Input() public triggers: string;
+  /**
+   * A selector specifying the element the oes-popover should be appended to.
+   * Currently only supports "body".
+   */
+  @Input() public container: string;
+  /**
+   * Emits an event when the oes-popover is shown
+   */
+  @Output() public shown = new EventEmitter();
+  /**
+   * Emits an event when the oes-popover is hidden
+   */
+  @Output() public hidden = new EventEmitter();
+
+  private _OesDaterangePopoverWindowId = `ngb-popover-${nextId++}`;
+  private _popupService: PopupService<OesDaterangePopoverWindow>;
+  private _windowRef: ComponentRef<OesDaterangePopoverWindow>;
+  private _unregisterListenersFn;
+  private _zoneSubscription: any;
+
+  constructor(
+    private _elementRef: ElementRef, private _renderer: Renderer, injector: Injector,
+    componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, config: OesDaterangePopoverConfig,
+    ngZone: NgZone) {
+    this.placement = config.placement;
+    this.triggers = config.triggers;
+    this.container = config.container;
+    this._popupService = new PopupService<OesDaterangePopoverWindow>(
+      OesDaterangePopoverWindow, injector, viewContainerRef, _renderer, componentFactoryResolver);
+
+    this._zoneSubscription = ngZone.onStable.subscribe(() => {
+      if (this._windowRef) {
+        positionElements(
+          this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement,
+          this.container === 'body');
+      }
+    });
+  }
+
+  /**
+   * Opens an element’s oes-popover. This is considered a “manual” triggering of the oes-popover.
+   * The context is an optional value to be injected into the oes-popover template when it is created.
+   */
+  public open(context?: any) {
+    if (!this._windowRef) {
+      this._windowRef = this._popupService.open(this.oesDaterangePopover, context);
+      this._windowRef.instance.placement = this.placement;
+      this._windowRef.instance.title = this.popoverTitle;
+      this._windowRef.instance.id = this._OesDaterangePopoverWindowId;
+
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', this._OesDaterangePopoverWindowId);
+
+      if (this.container === 'body') {
+        window.document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
+      }
+
+      // we need to manually invoke change detection since events registered via
+      // Renderer::listen() are not picked up by change detection with the OnPush strategy
+      this._windowRef.changeDetectorRef.markForCheck();
+      this.shown.emit();
+    }
+  }
+
+  /**
+   * Closes an element’s oes-popover. This is considered a “manual” triggering of the oes-popover.
+   */
+  public close(): void {
+    if (this._windowRef) {
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', null);
+      this._popupService.close();
+      this._windowRef = null;
+      this.hidden.emit();
+    }
+  }
+
+  /**
+   * Toggles an element’s oes-popover. This is considered a “manual” triggering of the oes-popover.
+   */
+  public toggle(): void {
+    if (this._windowRef) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Returns whether or not the oes-popover is currently being shown
+   */
+  public isOpen(): boolean { return this._windowRef !== null; }
+
+  public ngOnInit() {
+    this._unregisterListenersFn = listenToTriggers(
+      this._renderer, this._elementRef.nativeElement, this.triggers, this.open.bind(this), this.close.bind(this),
+      this.toggle.bind(this));
+  }
+
+  public ngOnDestroy() {
+    this.close();
+    this._unregisterListenersFn();
+    this._zoneSubscription.unsubscribe();
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/time.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/time.ts
new file mode 100644
index 00000000..ab31a498
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/time.ts
@@ -0,0 +1,51 @@
+import { isNumber, toInteger } from './util/util';
+
+export class NgbTime {
+  public hour: number;
+  public minute: number;
+  public second: number;
+
+  constructor(hour?: number, minute?: number, second?: number) {
+    this.hour = toInteger(hour);
+    this.minute = toInteger(minute);
+    this.second = toInteger(second);
+  }
+
+  public changeHour(step = 1) { this.updateHour((isNaN(this.hour) ? 0 : this.hour) + step); }
+
+  public updateHour(hour: number) {
+    if (isNumber(hour)) {
+      this.hour = (hour < 0 ? 24 + hour : hour) % 24;
+    } else {
+      this.hour = NaN;
+    }
+  }
+
+  public changeMinute(step = 1) { this.updateMinute((isNaN(this.minute) ? 0 : this.minute) + step); }
+
+  public updateMinute(minute: number) {
+    if (isNumber(minute)) {
+      this.minute = minute % 60 < 0 ? 60 + minute % 60 : minute % 60;
+      this.changeHour(Math.floor(minute / 60));
+    } else {
+      this.minute = NaN;
+    }
+  }
+
+  public changeSecond(step = 1) { this.updateSecond((isNaN(this.second) ? 0 : this.second) + step); }
+
+  public updateSecond(second: number) {
+    if (isNumber(second)) {
+      this.second = second < 0 ? 60 + second % 60 : second % 60;
+      this.changeMinute(Math.floor(second / 60));
+    } else {
+      this.second = NaN;
+    }
+  }
+
+  public isValid(checkSecs = true) {
+    return isNumber(this.hour) && isNumber(this.minute) && (checkSecs ? isNumber(this.second) : true);
+  }
+
+  public toString() { return `${this.hour || 0}:${this.minute || 0}:${this.second || 0}`; }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker-config.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker-config.ts
new file mode 100644
index 00000000..8b752866
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker-config.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Configuration service for the NgbTimepicker component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the timepickers used in the application.
+ */
+@Injectable()
+export class NgbTimepickerConfig {
+  public meridian = false;
+  public spinners = true;
+  public seconds = false;
+  public hourStep = 1;
+  public minuteStep = 1;
+  public secondStep = 1;
+  public disabled = false;
+  public readonlyInputs = false;
+  public size: 'small' | 'medium' | 'large' = 'medium';
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.less b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.less
new file mode 100644
index 00000000..60acfa6b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.less
@@ -0,0 +1,163 @@
+@import "../../assets/components/themes/default/theme.less";
+@import "../../assets/components/themes/common/plx-input.less";
+@import "../../assets/components/themes/common/plx-button.less";
+.oes-time-table .chevron::before {
+  border-style: solid;
+  border-width: 0.29em 0.29em 0 0;
+  content: '';
+  display: inline-block;
+  height: 0.69em;
+  left: 0.05em;
+  position: relative;
+  top: 0.15em;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  vertical-align: middle;
+  width: 0.71em;
+}
+
+.oes-time-table .chevron.bottom:before {
+  top: -.3em;
+  -webkit-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
+.oes-time-table .btn-link {
+  border: none!important;
+  cursor: pointer;
+  outline: 0;
+  display: block;
+}
+
+.oes-time-table .btn-link.disabled {
+  cursor: not-allowed;
+  opacity: .65;
+}
+
+.oes-time-control {
+  text-align: center;
+}
+
+.datapicker-form-control {
+   width: auto !important;
+   display: inline-block;
+}
+
+.oes-time-table .ict-stretch{
+
+    font-size: 8px;
+}
+
+.oes-time-table .ict-shrink{
+   font-size: 8px;
+}
+.time-pick-bk{
+    background-color: #fff;
+}
+
+.btn-link:focus, .btn-link:hover{
+   text-decoration: none;
+}
+.oes-time-control{
+  border: 0;
+  width: 30px !important;
+  padding: 3px 0;
+  margin: 0;
+  font-size: @font-size;
+}
+
+.oes-time-control:hover{
+  background-color: #e6e6e6;
+  color:#000;
+  cursor: pointer;
+}
+
+
+.oes-time-control-foucs-bk{
+ background-color: #00abff !important;
+ color:#fff!important;
+
+}
+
+.oes-time-separator{
+    margin: 0 -5px;
+}
+.oes-time-group,.oes-time-group:hover{
+
+     border-bottom:  1px solid #ccc;
+     border-left:  1px solid #ccc;
+     border-top:  1px solid #ccc;
+     border-radius: 0.2em;
+ }
+ .oes-time-btns,.oes-time-btns:hover{
+
+     border-bottom:  1px solid #ccc;
+     border-right:  1px solid #ccc;
+     border-top:  1px solid #ccc;
+     border-radius: 0.2em;
+     padding: 0 0 7px 0 !important;
+
+ }
+
+ .oes-time-btns-wrapper {
+    margin-top:-3px;
+     transform:scale(0.6,0.6);
+ }
+
+ .i18nTimeDes,.i18nTimeDes:hover{
+
+     padding:  0 5px 0px 0;
+
+ }
+
+ .oes-time-btn{
+
+   height: 5px;
+ }
+
+
+ .oes-time-table{
+    margin-bottom: 10px;
+ }
+
+.hour-table{
+
+    font-size:12px;
+}
+
+.hour-table td{
+
+    padding: 5px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    cursor: pointer;
+}
+.oes-time-btn-shrink{
+  position: relative;
+  top:-5px;
+  left:0px;
+  color:#CCC;
+}
+
+.oes-time-btn-stretch{
+  position: relative;
+  left:0px;
+  color:#CCC;
+}
+.owl-calendar-timer-invalid{
+  color: #acacac;
+}
+.owl-calendar-timer-selected{
+  background-color: #00abff;
+  color: #FFFFFF;
+  border-radius: 1.2em; 
+}
+.hour-table td:not(.owl-calendar-timer-selected):not(.owl-calendar-timer-invalid):hover {
+  background-color: #ebf6fd;
+  color: #000000;
+  border-radius: 1.2em; 
+}
+
+
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.ts
new file mode 100644
index 00000000..45dd7a4a
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.ts
@@ -0,0 +1,558 @@
+import { Component, Input, Output, forwardRef, OnChanges, EventEmitter, SimpleChanges, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { isNumber, padNumber, toInteger, isDefined } from './util/util';
+import { NgbTime } from './time';
+import { NgbTimepickerConfig } from './timepicker-config';
+
+const NGB_TIMEPICKER_VALUE_ACCESSOR = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => NgbTimepickerr),
+  multi: true
+};
+
+/**
+ * A lightweight & configurable timepicker directive.
+ */
+@Component({
+  selector: 'oes-timepickerr',
+  styleUrls: ['./timepicker.less'],
+  template: `
+     <template #popContentHour>
+
+         <table class="hour-table">
+            <tbody>
+                <tr><td (click)="selectHour(hour,$event)" *ngFor="let hour of hours1 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedHour(hour), 'owl-calendar-timer-invalid': !isValidHour(hour)}">{{hour}}</td></tr>
+                <tr><td (click)="selectHour(hour,$event)" *ngFor="let hour of hours2 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedHour(hour), 'owl-calendar-timer-invalid': !isValidHour(hour)}">{{hour}}</td></tr>
+                <tr><td (click)="selectHour(hour,$event)" *ngFor="let hour of hours3 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedHour(hour), 'owl-calendar-timer-invalid': !isValidHour(hour)}">{{hour}}</td></tr>
+
+            </tbody>
+        </table>
+
+     </template>
+
+   <template #popContentMin>
+
+         <table class="hour-table">
+            <tbody>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute1 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute2 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute3 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute4 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute5 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+                <tr><td (click)="selectMin(minuter,$event)" *ngFor="let minuter of minute6 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedMin(minuter), 'owl-calendar-timer-invalid': !isValidMin(minuter)}">{{minuter}}</td></tr>
+
+            </tbody>
+        </table>
+
+     </template>
+
+     <template #popContentSecond>
+              <table class="hour-table">
+                 <tbody>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute1 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute2 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute3 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute4 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute5 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                     <tr><td (click)="selectSecond(minuter,$event)" *ngFor="let minuter of minute6 "  [ngClass]=" {'owl-calendar-timer-selected': isSelectedSec(minuter), 'owl-calendar-timer-invalid': !isValidSec(minuter)}">{{minuter}}</td></tr>
+                 </tbody>
+             </table>
+    </template>
+      <table class="oes-time-table">
+        <tr>
+          <td class="i18nTimeDes">
+                {{i18nTimeDes}}
+          </td>
+          <td class="oes-time-group">
+            <input placement="top" style="padding-left:1px;padding-right:1px;border: 0; width: 30px !important;padding: 3px 0; margin: 0; font-size: 12px;"
+              [oesDaterangePopover]="popContentHour"  #propHour="oesDaterangePopover" 
+              #hourItem type="text" (focus)="selectItem('hour')"
+              [ngClass]="{'oes-time-control-foucs-bk': currSelectedItem === 'hour'}"
+              class="form-control datapicker-form-control form-control-sm oes-time-control "  maxlength="2" size="2" placeholder="HH"
+              [value]="formatHour(model?.hour)" (change)="updateHour($event.target.value)"
+              [readonly]="readonlyInputs" [disabled]="disabled">
+               <span class="oes-time-separator">&nbsp;:&nbsp;</span>
+               <input
+               [oesDaterangePopover]="popContentMin"  #propMin="oesDaterangePopover"
+               #minuteItem type="text"
+                (focus)="selectItem('minute')"  style="padding-left:1px;padding-right:1px;border: 0; width: 30px !important;padding: 3px 0; margin: 0; font-size: 12px;"
+               [ngClass]="{'oes-time-control-foucs-bk': currSelectedItem === 'minute'}"
+               class="form-control datapicker-form-control form-control-sm  oes-time-control"  maxlength="2" size="2" placeholder="MM"
+              [value]="formatMinSec(model?.minute)" (change)="updateMinute($event.target.value)"
+              [readonly]="readonlyInputs" [disabled]="disabled">
+              <span *ngIf="showSecondsTimer" class="oes-time-separator">&nbsp;:&nbsp;</span>
+              <input  *ngIf="showSecondsTimer"  style="padding-left:1px;padding-right:1px;border: 0; width: 30px !important;padding: 3px 0; margin: 0; font-size: 12px;"
+              [oesDaterangePopover]="popContentSecond"  #propSecond="oesDaterangePopover"
+              #secondItem type="text"
+               (focus)="selectItem('second')"
+              [ngClass]="{'oes-time-control-foucs-bk': currSelectedItem === 'second'}"
+              class="form-control datapicker-form-control form-control-sm  oes-time-control"  maxlength="2" size="2" placeholder="SS"
+             [value]="formatMinSec(model?.second)" (change)="updateSecond($event.target.value)"
+             [readonly]="readonlyInputs" [disabled]="disabled">
+             </td>
+
+          <td class="text-center oes-time-btns">
+            <div class="oes-time-btns-wrapper">
+            <button type="button" class="btn-link btn-sm oes-time-btn  oes-time-btn-shrink " (click)="changeTime(hourStep)"
+              [disabled]="disabled" [class.disabled]="disabled">
+              <span class="ict-shrink"></span>
+            </button>
+            <button type="button" class="btn-link btn-sm oes-time-btn oes-time-btn-stretch" (click)="changeTime(-hourStep)"
+              [disabled]="disabled" [class.disabled]="disabled">
+              <span class="ict-stretch"></span>
+            </button>
+           </div>
+          </td>
+        </tr>
+      </table>
+  `,
+  providers: [NGB_TIMEPICKER_VALUE_ACCESSOR]
+})
+export class NgbTimepickerr implements ControlValueAccessor,
+  OnChanges {
+  public disabled: boolean;
+  public model: NgbTime;
+  public datemodel: Date;
+  @Output() TimerChange = new EventEmitter<NgbTime>();
+  /**
+   * Whether to display 12H or 24H mode.
+   */
+  @Input() public meridian: boolean;
+
+  /**
+   * Whether to display the spinners above and below the inputs.
+   */
+  @Input() public spinners: boolean;
+
+  /**
+   * Whether to display seconds input.
+   */
+  @Input() public seconds: boolean;
+
+  /**
+   * Number of hours to increase or decrease when using a button.
+   */
+  @Input() public hourStep: number;
+
+  /**
+   * Number of minutes to increase or decrease when using a button.
+   */
+  @Input() public minuteStep: number;
+
+  /**
+   * Number of seconds to increase or decrease when using a button.
+   */
+  @Input() public secondStep: number;
+
+  /**
+   * To make timepicker readonly
+   */
+  @Input() public readonlyInputs: boolean;
+
+  /**
+   * To set the size of the inputs and button
+   */
+  @Input() public size: 'small' | 'medium' | 'large';
+
+  
+
+  private _max: Date;
+  @Input()
+  get max() {
+      return this._max;
+  }
+
+  set max(val: Date) {
+      this._max = val;
+  }
+  private _min: Date;
+  @Input()
+  get min() {
+      return this._min;
+  }
+
+  set min(val: Date) {
+      this._min = val;
+  }
+
+  /**
+ * Whether to show the second's timer
+ * @default false
+ * @type {Boolean}
+ * */
+  @Input() showSecondsTimer: boolean;
+  /**
+   * datePicker的国际化描述
+   */
+  @Input() public i18nTimeDes: string;
+
+  @ViewChild('hourItem') public hourItem;
+
+  @ViewChild('minuteItem') public minuteItem;
+  @ViewChild('secondItem') public secondItem;
+
+  @ViewChild('propHour') public propHour;
+
+  @ViewChild('propMin') public propMin;
+  @ViewChild('propSecond') public propSecond;
+
+  public currSelectedItem: 'hour' | 'minute' | 'second';
+
+  public hours1 = ['00', '01', '02', '03', '04', '05', '06', '07'];
+
+  public hours2 = ['08', '09', '10', '11', '12', '13', '14', '15'];
+
+  public hours3 = ['16', '17', '18', '19', '20', '21', '22', '23'];
+
+  public minute1 = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
+
+  public minute2 = ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'];
+
+  public minute3 = ['20', '21', '22', '23', '24', '25', '26', '27', '28', '29'];
+
+  public minute4 = ['30', '31', '32', '33', '34', '35', '36', '37', '38', '39'];
+
+  public minute5 = ['40', '41', '42', '43', '44', '45', '46', '47', '48', '49'];
+
+  public minute6 = ['50', '51', '52', '53', '54', '55', '56', '57', '58', '59'];
+
+  constructor(config: NgbTimepickerConfig) {
+    this.meridian = config.meridian;
+    this.spinners = config.spinners;
+    this.seconds = config.seconds;
+    this.hourStep = config.hourStep;
+    this.minuteStep = config.minuteStep;
+    this.secondStep = config.secondStep;
+    this.disabled = config.disabled;
+    this.readonlyInputs = config.readonlyInputs;
+    this.size = config.size;
+  }
+
+  public onChange = (_: any) => {
+    // TO DO
+  }
+  public onTouched = () => {
+    // TO DO
+  }
+  public settime(date : Date)
+  {
+    if(date!=null&&date!==undefined)
+    {
+    if(this._max!==undefined&&this._max.getTime()<date.getTime())
+    {
+      date.setHours(this._max.getHours());
+      date.setMinutes(this._max.getMinutes());
+      date.setSeconds(this._max.getSeconds());
+      this.TimerChange.emit(new NgbTime(date.getHours(),date.getMinutes(),date.getSeconds()));
+    }
+    if(this._min!==undefined&&this._min.getTime()>date.getTime())
+    {
+      date.setHours(this._min.getHours());
+      date.setMinutes(this._min.getMinutes());
+      date.setSeconds(this._min.getSeconds());
+      this.TimerChange.emit(new NgbTime(date.getHours(),date.getMinutes(),date.getSeconds()));
+    }
+    }
+    if(date!==null&&date!==undefined)
+    {
+      let temptime = new NgbTime(date.getHours(),date.getMinutes(),date.getSeconds())
+      this.model = temptime;
+      this.datemodel = date;
+    }
+    else
+    {
+      let temptime = new NgbTime(0,0,0)
+      this.model = temptime;
+      this.datemodel = date;
+    }
+   
+  }
+  public selectHour(hour: string, event) {
+    if(!this.isValidHour(parseInt(hour)))
+    {
+      return;
+    }
+    this.model.hour = parseInt(hour);
+    this.propHour.close();
+    this.propagateModelChange();
+    event.stopPropagation();
+  }
+
+  public selectMin(minute: string, event) {
+    if(!this.isValidMin(parseInt(minute)))
+    {
+      return;
+    }
+    this.model.minute = parseInt(minute);
+    this.propMin.close();
+    this.propagateModelChange();
+
+    event.stopPropagation();
+  }
+  public selectSecond(second: string, event) {
+    if(!this.isValidSec(parseInt(second)))
+    {
+      return;
+    }
+    this.model.second = parseInt(second);
+    this.propSecond.close();
+    this.propagateModelChange();
+
+    event.stopPropagation();
+  }
+
+  /**
+   * ###描述
+   * 单击小时或者分钟选项时触发的事件
+   *
+   *
+   * */
+
+  public selectItem(item: 'hour' | 'minute' | 'second') {
+
+    // 切换选中项
+    this.currSelectedItem = item;
+
+    if (item === 'hour') {
+
+      this.propMin?this.propMin.close():0;
+      this.propSecond?this.propSecond.close():0;
+    } else if (item === 'minute') {
+      this.propHour?this.propHour.close():0;
+      this.propSecond?this.propSecond.close():0;
+    } else if (item === 'second') {
+      this.propHour?this.propHour.close():0;
+      this.propMin?this.propMin.close():0;
+    }
+
+    this.minuteItem.nativeElement.blur();
+    this.hourItem.nativeElement.blur();
+
+    this.secondItem?this.secondItem.nativeElement.blur():0;
+
+    // 弹出时间选择列表
+  }
+
+  public changeTime(stepTime) {
+
+    if (this.currSelectedItem === 'hour') { // 如果当前选中的是小时
+
+      this.changeHour(stepTime);
+
+    } else if (this.currSelectedItem === 'minute') {
+
+      this.changeMinute(stepTime);
+    } else if (this.currSelectedItem === 'second') {
+
+      this.changeSecond(stepTime);
+    }
+
+  }
+
+
+  public writeValue(value) {
+    this.model = value ? new NgbTime(value.hour, value.minute, value.second) : new NgbTime();
+    if (!this.seconds && (!value || !isNumber(value.second))) {
+      this.model.second = 0;
+    }
+  }
+
+  public registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
+
+  public registerOnTouched(fn: () => any): void { this.onTouched = fn; }
+
+  public setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; }
+
+  public changeHour(step: number) {
+    let newDate = new Date(this.datemodel.getTime());
+    newDate.setHours(newDate.getHours()+step);
+    if(!this.isValidDate(newDate))
+    {
+      return;
+    }
+    this.model.changeHour(step);
+    this.propagateModelChange();
+  }
+
+  public changeMinute(step: number) {
+    let newDate = new Date(this.datemodel.getTime());
+    newDate.setMinutes(newDate.getMinutes()+step);
+    if(!this.isValidDate(newDate))
+    {
+      return;
+    }
+    this.model.changeMinute(step);
+    this.propagateModelChange();
+  }
+
+  public changeSecond(step: number) {
+    let newDate = new Date(this.datemodel.getTime());
+    newDate.setSeconds(newDate.getSeconds()+step);
+    if(!this.isValidDate(newDate))
+    {
+      return;
+    }
+    this.model.changeSecond(step);
+    this.propagateModelChange();
+  }
+
+  public updateHour(newVal: string) {
+    this.model.updateHour(toInteger(newVal));
+    this.propagateModelChange();
+  }
+
+  public updateMinute(newVal: string) {
+    this.model.updateMinute(toInteger(newVal));
+    this.propagateModelChange();
+  }
+
+  public updateSecond(newVal: string) {
+    this.model.updateSecond(toInteger(newVal));
+    this.propagateModelChange();
+  }
+
+  public toggleMeridian() {
+    if (this.meridian) {
+      this.changeHour(12);
+    }
+  }
+
+  public formatHour(value: number) {
+    if (isNumber(value)) {
+      if (this.meridian) {
+        return padNumber(value % 12 === 0 ? 12 : value % 12);
+      } else {
+        return padNumber(value % 24);
+      }
+    } else {
+      return padNumber(NaN);
+    }
+  }
+
+  public formatMinSec(value: number) { return padNumber(value); }
+
+  public setFormControlSize() { return { 'form-control-sm': this.size === 'small', 'form-control-lg': this.size === 'large' }; }
+
+  public setButtonSize() { return { 'btn-sm': this.size === 'small', 'btn-lg': this.size === 'large' }; }
+
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['seconds'] && !this.seconds && this.model && !isNumber(this.model.second)) {
+      this.model.second = 0;
+      this.propagateModelChange(false);
+    }
+  }
+
+  private propagateModelChange(touched = true) {
+    this.TimerChange.emit(this.model);
+    if (touched) {
+      this.onTouched();
+    }
+    if (this.model.isValid(this.seconds)) {
+      this.onChange({ hour: this.model.hour, minute: this.model.minute, second: this.model.second });
+    } else {
+      this.onChange(null);
+    }
+  }
+  public closeProp()
+  {
+    
+    if(this.propSecond!==undefined)
+    {
+      this.propSecond.close();
+    }
+    if(this.propMin!==undefined)
+    {
+      this.propMin.close();
+    }
+    if(this.propHour!==undefined)
+    {
+      this.propHour.close();
+    }
+  }
+  private isValidDate(date: Date)
+  {
+    let isValid = true;
+    if (isValid  && this._min!==undefined&&this._min!==null) {
+      isValid = date.getTime()>=this._min.getTime();
+    }
+    if (isValid  && this._max!==undefined&&this._max!==null) {
+      isValid =  date.getTime()<=this._max.getTime();
+    }
+    return isValid;
+  }
+  private isSelectedMin(strvalue:any): boolean {
+    let value = parseInt(strvalue);
+    if(this.model!==null&&this.model!==undefined)
+    {
+       return this.model.minute === value;
+    }
+    else
+    {
+      return false;
+    }
+}
+  private isValidMin(strvalue:any): boolean {
+    let value = parseInt(strvalue);
+    let nowdate = new Date();
+    if(this.datemodel===undefined||this.datemodel===null)
+    {
+    }
+    else
+    {
+      nowdate = new Date(this.datemodel);
+    }
+    nowdate.setMinutes(value);
+    return this.isValidDate(nowdate);
+}
+private isSelectedSec(strvalue:any): boolean {
+  let value = parseInt(strvalue);
+  if(this.model!==null&&this.model!==undefined)
+  {
+     return this.model.second === value;
+  }
+  else
+  {
+    return false;
+  }
+}
+private isValidSec(strvalue:any): boolean {
+  let value = parseInt(strvalue);
+  let nowdate = new Date();
+  if(this.datemodel===undefined||this.datemodel===null)
+  {
+  }
+  else
+  {
+    nowdate = new Date(this.datemodel);
+  }
+  nowdate.setSeconds(value);
+  return this.isValidDate(nowdate);
+}
+private isSelectedHour(strvalue:any): boolean {
+  let value = parseInt(strvalue);
+  if(this.model!==null&&this.model!==undefined)
+  {
+     return this.model.hour === value;
+  }
+  else
+  {
+    return false;
+  }
+}
+private isValidHour(strvalue:any): boolean {
+  debugger;
+  let value = parseInt(strvalue);
+  let nowdate = new Date();
+  if(this.datemodel===undefined||this.datemodel===null)
+  {
+  }
+  else
+  {
+    nowdate = new Date(this.datemodel);
+  }
+  nowdate.setHours(value);
+  return this.isValidDate(nowdate);
+}
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/popup.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/popup.ts
new file mode 100644
index 00000000..56c26d62
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/popup.ts
@@ -0,0 +1,58 @@
+import {
+  Injector,
+  TemplateRef,
+  ViewRef,
+  ViewContainerRef,
+  Renderer,
+  ComponentRef,
+  ComponentFactory,
+  ComponentFactoryResolver
+} from '@angular/core';
+
+export class ContentRef {
+  constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) {}
+}
+
+export class PopupService<T> {
+  private _windowFactory: ComponentFactory<T>;
+  private _windowRef: ComponentRef<T>;
+  private _contentRef: ContentRef;
+
+  constructor(
+      type: any, private _injector: Injector, private _viewContainerRef: ViewContainerRef, private _renderer: Renderer,
+      componentFactoryResolver: ComponentFactoryResolver) {
+    this._windowFactory = componentFactoryResolver.resolveComponentFactory<T>(type);
+  }
+
+  public open(content?: string | TemplateRef<any>, context?: any): ComponentRef<T> {
+    if (!this._windowRef) {
+      this._contentRef = this._getContentRef(content, context);
+      this._windowRef =
+          this._viewContainerRef.createComponent(this._windowFactory, 0, this._injector, this._contentRef.nodes);
+    }
+    return this._windowRef;
+  }
+
+  public close() {
+    if (this._windowRef) {
+      this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._windowRef.hostView));
+      this._windowRef = null;
+
+      if (this._contentRef.viewRef) {
+        this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._contentRef.viewRef));
+        this._contentRef = null;
+      }
+    }
+  }
+
+  private _getContentRef(content: string | TemplateRef<any>, context?: any): ContentRef {
+    if (!content) {
+      return new ContentRef([]);
+    } else if (content instanceof TemplateRef) {
+      const viewRef = this._viewContainerRef.createEmbeddedView(<TemplateRef<T>>content, context);
+      return new ContentRef([viewRef.rootNodes], viewRef);
+    } else {
+      return new ContentRef([[this._renderer.createText(null, `${content}`)]]);
+    }
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/positioning.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/positioning.ts
new file mode 100644
index 00000000..ed9005c1
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/positioning.ts
@@ -0,0 +1,153 @@
+// previous version:
+// https://github.com/angular-ui/bootstrap/blob/07c31d0731f7cb068a1932b8e01d2312b796b4ec/src/position/position.js
+export class Positioning {
+  private getStyle(element: HTMLElement, prop: string): string { return window.getComputedStyle(element)[prop]; }
+
+  private isStaticPositioned(element: HTMLElement): boolean {
+    return (this.getStyle(element, 'position') || 'static') === 'static';
+  }
+
+  private offsetParent(element: HTMLElement): HTMLElement {
+    let offsetParentEl = <HTMLElement>element.offsetParent || document.documentElement;
+
+    while (offsetParentEl && offsetParentEl !== document.documentElement && this.isStaticPositioned(offsetParentEl)) {
+      offsetParentEl = <HTMLElement>offsetParentEl.offsetParent;
+    }
+
+    return offsetParentEl || document.documentElement;
+  }
+
+  public position(element: HTMLElement, round = true): ClientRect {
+    let elPosition: ClientRect;
+    let parentOffset: ClientRect = {width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0};
+
+    if (this.getStyle(element, 'position') === 'fixed') {
+      elPosition = element.getBoundingClientRect();
+    } else {
+      const offsetParentEl = this.offsetParent(element);
+
+      elPosition = this.offset(element, false);
+
+      if (offsetParentEl !== document.documentElement) {
+        parentOffset = this.offset(offsetParentEl, false);
+      }
+
+      parentOffset.top += offsetParentEl.clientTop;
+      parentOffset.left += offsetParentEl.clientLeft;
+    }
+
+    elPosition.top -= parentOffset.top;
+    elPosition.bottom -= parentOffset.top;
+    elPosition.left -= parentOffset.left;
+    elPosition.right -= parentOffset.left;
+
+    if (round) {
+      elPosition.top = Math.round(elPosition.top);
+      elPosition.bottom = Math.round(elPosition.bottom);
+      elPosition.left = Math.round(elPosition.left);
+      elPosition.right = Math.round(elPosition.right);
+    }
+
+    return elPosition;
+  }
+
+  public offset(element: HTMLElement, round = true): ClientRect {
+    const elBcr = element.getBoundingClientRect();
+    const viewportOffset = {
+      top: window.pageYOffset - document.documentElement.clientTop,
+      left: window.pageXOffset - document.documentElement.clientLeft
+    };
+
+    let elOffset = {
+      height: elBcr.height || element.offsetHeight,
+      width: elBcr.width || element.offsetWidth,
+      top: elBcr.top + viewportOffset.top,
+      bottom: elBcr.bottom + viewportOffset.top,
+      left: elBcr.left + viewportOffset.left,
+      right: elBcr.right + viewportOffset.left
+    };
+
+    if (round) {
+      elOffset.height = Math.round(elOffset.height);
+      elOffset.width = Math.round(elOffset.width);
+      elOffset.top = Math.round(elOffset.top);
+      elOffset.bottom = Math.round(elOffset.bottom);
+      elOffset.left = Math.round(elOffset.left);
+      elOffset.right = Math.round(elOffset.right);
+    }
+
+    return elOffset;
+  }
+
+  public positionElements(hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean):
+      ClientRect {
+    const hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
+    const shiftWidth: any = {
+      left: hostElPosition.left,
+      left2: (hostElPosition.left - 85),
+      center: hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2,
+      right: hostElPosition.left + hostElPosition.width
+    };
+    const shiftHeight: any = {
+      top: hostElPosition.top,
+      center: hostElPosition.top + hostElPosition.height / 2 - targetElement.offsetHeight / 2,
+      bottom: hostElPosition.top + hostElPosition.height
+    };
+    const targetElBCR = targetElement.getBoundingClientRect();
+    const placementPrimary = placement.split('-')[0] || 'top';
+    const placementSecondary = placement.split('-')[1] || 'center';
+
+    let targetElPosition: ClientRect = {
+      height: targetElBCR.height || targetElement.offsetHeight,
+      width: targetElBCR.width || targetElement.offsetWidth,
+      top: 0,
+      bottom: targetElBCR.height || targetElement.offsetHeight,
+      left: 0,
+      right: targetElBCR.width || targetElement.offsetWidth
+    };
+
+    switch (placementPrimary) {
+      case 'top':
+        targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;
+        targetElPosition.bottom += hostElPosition.top - targetElement.offsetHeight;
+        targetElPosition.left = shiftWidth[placementSecondary];
+        targetElPosition.right += shiftWidth[placementSecondary];
+        break;
+      case 'bottom':
+        targetElPosition.top = shiftHeight[placementPrimary];
+        targetElPosition.bottom += shiftHeight[placementPrimary];
+        targetElPosition.left = shiftWidth[placementSecondary];
+        targetElPosition.right += shiftWidth[placementSecondary];
+        break;
+      case 'left':
+        targetElPosition.top = shiftHeight[placementSecondary];
+        targetElPosition.bottom += shiftHeight[placementSecondary];
+        targetElPosition.left = hostElPosition.left - targetElement.offsetWidth;
+        targetElPosition.right += hostElPosition.left - targetElement.offsetWidth;
+        break;
+      case 'right':
+        targetElPosition.top = shiftHeight[placementSecondary];
+        targetElPosition.bottom += shiftHeight[placementSecondary];
+        targetElPosition.left = shiftWidth[placementPrimary];
+        targetElPosition.right += shiftWidth[placementPrimary];
+        break;
+
+    }
+
+    targetElPosition.top = Math.round(targetElPosition.top);
+    targetElPosition.bottom = Math.round(targetElPosition.bottom);
+    targetElPosition.left = Math.round(targetElPosition.left);
+    targetElPosition.right = Math.round(targetElPosition.right);
+
+    return targetElPosition;
+  }
+}
+
+const positionService = new Positioning();
+export function positionElements(
+    hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean): void {
+  const pos = positionService.positionElements(hostElement, targetElement, placement, appendToBody);
+
+  targetElement.style.top = `${pos.top}px`;
+  targetElement.style.left = `${pos.left}px`;
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/triggers.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/triggers.ts
new file mode 100644
index 00000000..8197de5b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/triggers.ts
@@ -0,0 +1,62 @@
+export class Trigger {
+  constructor(public open: string, public close?: string) {
+    if (!close) {
+      this.close = open;
+    }
+  }
+
+  public isManual() { return this.open === 'manual' || this.close === 'manual'; }
+}
+
+const DEFAULT_ALIASES = {
+  hover: ['mouseenter', 'mouseleave']
+};
+
+export function parseTriggers(triggers: string, aliases = DEFAULT_ALIASES): Trigger[] {
+  const trimmedTriggers = (triggers || '').trim();
+
+  if (trimmedTriggers.length === 0) {
+    return [];
+  }
+
+  const parsedTriggers = trimmedTriggers.split(/\s+/).map(trigger => trigger.split(':')).map((triggerPair) => {
+    let alias = aliases[triggerPair[0]] || triggerPair;
+    return new Trigger(alias[0], alias[1]);
+  });
+
+  const manualTriggers = parsedTriggers.filter(triggerPair => triggerPair.isManual());
+
+  if (manualTriggers.length > 1) {
+    throw 'Triggers parse error: only one manual trigger is allowed';
+  }
+
+  if (manualTriggers.length === 1 && parsedTriggers.length > 1) {
+    throw 'Triggers parse error: manual trigger can\'t be mixed with other triggers';
+  }
+
+  return parsedTriggers;
+}
+
+const noopFn = () => {
+  // TO DO
+};
+
+export function listenToTriggers(renderer: any, nativeElement: any, triggers: string, openFn, closeFn, toggleFn) {
+  const parsedTriggers = parseTriggers(triggers);
+  const listeners = [];
+
+  if (parsedTriggers.length === 1 && parsedTriggers[0].isManual()) {
+    return noopFn;
+  }
+
+  parsedTriggers.forEach((trigger: Trigger) => {
+    if (trigger.open === trigger.close) {
+      listeners.push(renderer.listen(nativeElement, trigger.open, toggleFn));
+    } else {
+      listeners.push(
+          renderer.listen(nativeElement, trigger.open, openFn), renderer.listen(nativeElement, trigger.close, closeFn));
+    }
+  });
+
+  return () => { listeners.forEach(unsubscribeFn => unsubscribeFn()); };
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/util.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/util.ts
new file mode 100644
index 00000000..fcabe960
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/util.ts
@@ -0,0 +1,39 @@
+export function toInteger(value: any): number {
+  return parseInt(`${value}`, 10);
+}
+
+export function toString(value: any): string {
+  return (value !== undefined && value !== null) ? `${value}` : '';
+}
+
+export function getValueInRange(value: number, max: number, min = 0): number {
+  return Math.max(Math.min(value, max), min);
+}
+
+export function isString(value: any): boolean {
+  return typeof value === 'string';
+}
+
+export function isNumber(value: any): boolean {
+  return !isNaN(toInteger(value));
+}
+
+export function isInteger(value: any): boolean {
+  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
+}
+
+export function isDefined(value: any): boolean {
+  return value !== undefined && value !== null;
+}
+
+export function padNumber(value: number) {
+  if (isNumber(value)) {
+    return value > 9? `${value}`.slice(-2):'0' + `${value}`.slice(-2);
+  } else {
+    return '';
+  }
+}
+
+export function regExpEscape(text) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.spec.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.spec.ts
new file mode 100644
index 00000000..887b66e4
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.spec.ts
@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+import {PlxModalBackdrop} from './modal-backdrop';
+
+describe('plx-modal-backdrop', () => {
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({declarations: [PlxModalBackdrop]});
+    });
+
+    it('should render backdrop with required CSS classes', () => {
+        const fixture = TestBed.createComponent(PlxModalBackdrop);
+
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveCssClass('modal-backdrop');
+    });
+});
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.ts
new file mode 100644
index 00000000..07e2ff84
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-backdrop.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'plx-modal-backdrop',
+    template: '',
+    host: {'class': 'modal-backdrop fade show'}
+})
+export class PlxModalBackdrop {
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-dismiss-reasons.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-dismiss-reasons.ts
new file mode 100644
index 00000000..08395852
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-dismiss-reasons.ts
@@ -0,0 +1,4 @@
+export enum ModalDismissReasons {
+    BACKDROP_CLICK,
+    ESC
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-ref.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-ref.ts
new file mode 100644
index 00000000..061dc70e
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-ref.ts
@@ -0,0 +1,109 @@
+import {Injectable, ComponentRef} from '@angular/core';
+import {PlxModalBackdrop} from './modal-backdrop';
+import {PlxModalWindow} from './modal-window';
+import {ContentRef} from '../util/popup';
+
+/**
+ * A reference to an active (currently opened) modal. Instances of this class
+ * can be injected into components passed as modal content.
+ */
+@Injectable()
+export class PlxActiveModal {
+    /**
+     * Can be used to close a modal, passing an optional result.
+     */
+    public close(result?: any): void {
+        // TO DO
+    }
+
+    /**
+     * Can be used to dismiss a modal, passing an optional reason.
+     */
+    public dismiss(reason?: any): void {
+        // TO DO
+    }
+}
+
+/**
+ * A reference to a newly opened modal.
+ */
+@Injectable()
+export class PlxModalRef {
+    private _resolve: (result?: any) => void;
+    private _reject: (reason?: any) => void;
+
+    /**
+     * The instance of component used as modal's content.
+     * Undefined when a TemplateRef is used as modal's content.
+     */
+    get componentInstance(): any {
+        if (this._contentRef.componentRef) {
+            return this._contentRef.componentRef.instance;
+        }
+    }
+
+    // only needed to keep TS1.8 compatibility
+    set componentInstance(instance: any) {
+        // TO DO
+    }
+
+    /**
+     * A promise that is resolved when a modal is closed and rejected when a modal is dismissed.
+     */
+    public result: Promise<any>;
+
+    constructor(private _windowCmptRef: ComponentRef<PlxModalWindow>, private _contentRef: ContentRef,
+                private _backdropCmptRef?: ComponentRef<PlxModalBackdrop>) {
+        _windowCmptRef.instance.dismissEvent.subscribe((reason: any) => {
+            this.dismiss(reason);
+        });
+
+        this.result = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        });
+        this.result.then(null, () => {
+            // TO DO
+        });
+    }
+
+    /**
+     * Can be used to close a modal, passing an optional result.
+     */
+    public close(result?: any): void {
+        if (this._windowCmptRef) {
+            this._resolve(result);
+            this._removeModalElements();
+        }
+    }
+
+    /**
+     * Can be used to dismiss a modal, passing an optional reason.
+     */
+    public dismiss(reason?: any): void {
+        if (this._windowCmptRef) {
+            this._reject(reason);
+            this._removeModalElements();
+        }
+    }
+
+    private _removeModalElements() {
+        const windowNativeEl = this._windowCmptRef.location.nativeElement;
+        windowNativeEl.parentNode.removeChild(windowNativeEl);
+        this._windowCmptRef.destroy();
+
+        if (this._backdropCmptRef) {
+            const backdropNativeEl = this._backdropCmptRef.location.nativeElement;
+            backdropNativeEl.parentNode.removeChild(backdropNativeEl);
+            this._backdropCmptRef.destroy();
+        }
+
+        if (this._contentRef && this._contentRef.viewRef) {
+            this._contentRef.viewRef.destroy();
+        }
+
+        this._windowCmptRef = null;
+        this._backdropCmptRef = null;
+        this._contentRef = null;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-stack.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-stack.ts
new file mode 100644
index 00000000..37f5b171
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-stack.ts
@@ -0,0 +1,103 @@
+import {
+    ApplicationRef,
+    Injectable,
+    Injector,
+    ReflectiveInjector,
+    ComponentFactory,
+    ComponentFactoryResolver,
+    ComponentRef,
+    TemplateRef
+} from '@angular/core';
+
+import {ContentRef} from '../util/popup';
+import {isDefined, isString} from '../util/util';
+
+import {PlxModalBackdrop} from './modal-backdrop';
+import {PlxModalWindow} from './modal-window';
+import {PlxActiveModal, PlxModalRef} from './modal-ref';
+
+@Injectable()
+export class PlxModalStack {
+    private _backdropFactory: ComponentFactory<PlxModalBackdrop>;
+    private _windowFactory: ComponentFactory<PlxModalWindow>;
+
+    constructor(private _applicationRef: ApplicationRef, private _injector: Injector,
+                private _componentFactoryResolver: ComponentFactoryResolver) {
+        this._backdropFactory = _componentFactoryResolver.resolveComponentFactory(PlxModalBackdrop);
+        this._windowFactory = _componentFactoryResolver.resolveComponentFactory(PlxModalWindow);
+    }
+
+    public open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): PlxModalRef {
+        const containerSelector = options.container || 'body';
+        const containerEl = document.querySelector(containerSelector);// 默认获取到body的DOM
+
+        if (!containerEl) {
+            throw new Error(`The specified modal container "${containerSelector}" was not found in the DOM.`);
+        }
+
+        const activeModal = new PlxActiveModal();
+        const contentRef = this._getContentRef(moduleCFR, contentInjector, content, activeModal);
+
+        let windowCmptRef: ComponentRef<PlxModalWindow>;
+        let backdropCmptRef: ComponentRef<PlxModalBackdrop>;
+        let ngbModalRef: PlxModalRef;
+
+
+        if (options.backdrop !== false) {
+            backdropCmptRef = this._backdropFactory.create(this._injector);
+            this._applicationRef.attachView(backdropCmptRef.hostView);
+            containerEl.appendChild(backdropCmptRef.location.nativeElement);
+        }
+        windowCmptRef = this._windowFactory.create(this._injector, contentRef.nodes);
+
+        /**
+         * Attaches a view so that it will be dirty checked.
+         * The view will be automatically detached when it is destroyed.
+         * This will throw if the view is already attached to a ViewContainer.
+         */
+        this._applicationRef.attachView(windowCmptRef.hostView);
+
+        containerEl.appendChild(windowCmptRef.location.nativeElement);
+
+        ngbModalRef = new PlxModalRef(windowCmptRef, contentRef, backdropCmptRef);
+
+        activeModal.close = (result: any) => {
+            ngbModalRef.close(result);
+        };
+        activeModal.dismiss = (reason: any) => {
+            ngbModalRef.dismiss(reason);
+        };
+
+        this._applyWindowOptions(windowCmptRef.instance, options);
+
+        return ngbModalRef;
+    }
+
+    private _applyWindowOptions(windowInstance: PlxModalWindow, options: Object): void {
+        ['backdrop', 'keyboard', 'size', 'windowClass'].forEach((optionName: string) => {
+            if (isDefined(options[optionName])) {
+                windowInstance[optionName] = options[optionName];
+            }
+        });
+    }
+
+    private _getContentRef(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
+                           context: PlxActiveModal): ContentRef {
+        if (!content) {
+            return new ContentRef([]);
+        } else if (content instanceof TemplateRef) {
+            const viewRef = content.createEmbeddedView(context);
+            this._applicationRef.attachView(viewRef);
+            return new ContentRef([viewRef.rootNodes], viewRef);
+        } else if (isString(content)) {
+            return new ContentRef([[document.createTextNode(`${content}`)]]);
+        } else {
+            const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
+            const modalContentInjector =
+                ReflectiveInjector.resolveAndCreate([{provide: PlxActiveModal, useValue: context}], contentInjector);
+            const componentRef = contentCmptFactory.create(modalContentInjector);
+            this._applicationRef.attachView(componentRef.hostView);
+            return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.spec.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.spec.ts
new file mode 100644
index 00000000..5767bfee
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.spec.ts
@@ -0,0 +1,114 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+
+import {PlxModalWindow} from './modal-window';
+import {ModalDismissReasons} from './modal-dismiss-reasons';
+
+describe('plx-modal-dialog', () => {
+
+    let fixture: ComponentFixture<PlxModalWindow>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({declarations: [PlxModalWindow]});
+        fixture = TestBed.createComponent(PlxModalWindow);
+    });
+
+    describe('basic rendering functionality', () => {
+
+        it('should render default modal window', () => {
+            fixture.detectChanges();
+
+            const modalEl: Element = fixture.nativeElement;
+            const dialogEl: Element = fixture.nativeElement.querySelector('.modal-dialog');
+
+            expect(modalEl).toHaveCssClass('modal');
+            expect(dialogEl).toHaveCssClass('modal-dialog');
+        });
+
+        it('should render default modal window with a specified size', () => {
+            fixture.componentInstance.size = 'sm';
+            fixture.detectChanges();
+
+            const dialogEl: Element = fixture.nativeElement.querySelector('.modal-dialog');
+            expect(dialogEl).toHaveCssClass('modal-dialog');
+            expect(dialogEl).toHaveCssClass('modal-sm');
+        });
+
+        it('should render default modal window with a specified class', () => {
+            fixture.componentInstance.windowClass = 'custom-class';
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveCssClass('custom-class');
+        });
+
+        it('aria attributes', () => {
+            fixture.detectChanges();
+            const dialogEl: Element = fixture.nativeElement.querySelector('.modal-dialog');
+
+            expect(fixture.nativeElement.getAttribute('role')).toBe('dialog');
+            expect(dialogEl.getAttribute('role')).toBe('document');
+        });
+    });
+
+    describe('dismiss', () => {
+
+        it('should dismiss on backdrop click by default', (done) => {
+            fixture.detectChanges();
+
+            fixture.componentInstance.dismissEvent.subscribe(($event) => {
+                expect($event).toBe(ModalDismissReasons.BACKDROP_CLICK);
+                done();
+            });
+
+            fixture.nativeElement.click();
+        });
+
+        it('should not dismiss on modal content click when there is active backdrop', (done) => {
+            fixture.detectChanges();
+            fixture.componentInstance.dismissEvent.subscribe(
+                () => {
+                    done.fail(new Error('Should not trigger dismiss event'));
+                });
+
+            fixture.nativeElement.querySelector('.modal-content').click();
+            setTimeout(done, 200);
+        });
+
+        it('should ignore backdrop clicks when there is no backdrop', (done) => {
+            fixture.componentInstance.backdrop = false;
+            fixture.detectChanges();
+
+            fixture.componentInstance.dismissEvent.subscribe(($event) => {
+                expect($event).toBe(ModalDismissReasons.BACKDROP_CLICK);
+                done.fail(new Error('Should not trigger dismiss event'));
+            });
+
+            fixture.nativeElement.querySelector('.modal-dialog').click();
+            setTimeout(done, 200);
+        });
+
+        it('should ignore backdrop clicks when backdrop is "static"', (done) => {
+            fixture.componentInstance.backdrop = 'static';
+            fixture.detectChanges();
+
+            fixture.componentInstance.dismissEvent.subscribe(($event) => {
+                expect($event).toBe(ModalDismissReasons.BACKDROP_CLICK);
+                done.fail(new Error('Should not trigger dismiss event'));
+            });
+
+            fixture.nativeElement.querySelector('.modal-dialog').click();
+            setTimeout(done, 200);
+        });
+
+        it('should dismiss on esc press by default', (done) => {
+            fixture.detectChanges();
+
+            fixture.componentInstance.dismissEvent.subscribe(($event) => {
+                expect($event).toBe(ModalDismissReasons.ESC);
+                done();
+            });
+
+            fixture.debugElement.triggerEventHandler('keyup.esc', {});
+        });
+    });
+
+});
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts
new file mode 100644
index 00000000..eda5b39f
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts
@@ -0,0 +1,82 @@
+import {
+    Component,
+    Output,
+    EventEmitter,
+    Input,
+    ElementRef,
+    Renderer,
+    OnInit,
+    AfterViewInit,
+    OnDestroy, ViewEncapsulation
+} from '@angular/core';
+
+import {ModalDismissReasons} from './modal-dismiss-reasons';
+
+@Component({
+    selector: 'plx-modal-window',
+    host: {
+        '[class]': '"modal plx-modal fade show" + (windowClass ? " " + windowClass : "")',
+        'role': 'dialog',
+        'tabindex': '-1',
+        'style': 'display: block;',
+        '(keyup.esc)': 'escKey($event)',
+        '(click)': 'backdropClick($event)'
+    },
+    template: `
+        <div [class]="'modal-dialog' + (size ? ' modal-' + size : '')" role="document">
+            <div class="modal-content"><ng-content></ng-content></div>
+        </div>
+    `,
+    styleUrls: ['modal.less'],
+    encapsulation: ViewEncapsulation.None
+})
+export class PlxModalWindow implements OnInit, AfterViewInit, OnDestroy {
+    private _elWithFocus: Element;  // element that is focused prior to modal opening
+
+    @Input() public backdrop: boolean | string = true;
+    @Input() public keyboard = true;
+    @Input() public size: string;
+    @Input() public windowClass: string;
+
+    @Output('dismiss') public dismissEvent = new EventEmitter();
+
+    constructor(private _elRef: ElementRef, private _renderer: Renderer) {
+    }
+
+    public backdropClick($event): void {
+        if (this.backdrop === true && this._elRef.nativeElement === $event.target) {
+            this.dismiss(ModalDismissReasons.BACKDROP_CLICK);
+        }
+    }
+
+    public escKey($event): void {
+        if (this.keyboard && !$event.defaultPrevented) {
+            this.dismiss(ModalDismissReasons.ESC);
+        }
+    }
+
+    public dismiss(reason): void {
+        this.dismissEvent.emit(reason);
+    }
+
+    public ngOnInit() {
+        this._elWithFocus = document.activeElement;
+        this._renderer.setElementClass(document.body, 'modal-open', true);
+    }
+
+    public ngAfterViewInit() {
+        if (!this._elRef.nativeElement.contains(document.activeElement)) {
+            this._renderer.invokeElementMethod(this._elRef.nativeElement, 'focus', []);
+        }
+    }
+
+    public ngOnDestroy() {
+        if (this._elWithFocus && document.body.contains(this._elWithFocus)) {
+            this._renderer.invokeElementMethod(this._elWithFocus, 'focus', []);
+        } else {
+            this._renderer.invokeElementMethod(document.body, 'focus', []);
+        }
+        this._elWithFocus = null;
+        this._renderer.setElementClass(document.body, 'modal-open', false);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.less b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.less
new file mode 100644
index 00000000..c17a7fd1
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.less
@@ -0,0 +1,125 @@
+@import "../../assets/components/themes/default/theme.less";

+

+plx-modal-window {

+  .modal {

+    position: fixed;

+    top: 0;

+    right: 0;

+    bottom: 0;

+    left: 0;

+    display: none;

+    outline: 0;

+    z-index: 10000;

+  }

+  .modal-dialog {

+    position: relative;

+    max-width: 600px;

+    margin: 30px auto;

+    &.modal-sm {

+      max-width: 600px;

+    }

+    &.modal-lg {

+      max-width: 1000px;

+    }

+  }

+  .modal-content {

+    position: relative;

+    display: flex;

+    -webkit-box-orient: vertical;

+    -webkit-box-direction: normal;

+    -ms-flex-direction: column;

+    flex-direction: column;

+    background-color: @component-bg;

+    background-clip: padding-box;

+    border-radius: @radius;

+    box-shadow: 0 5px 15px @shadow-color;

+    outline: 0;

+    .modal-header {

+      border-bottom: 0;

+      display: flex;

+      -webkit-box-align: center;

+      -ms-flex-align: center;

+      align-items: center;

+      -webkit-box-pack: justify;

+      -ms-flex-pack: justify;

+      justify-content: space-between;

+      padding: 15px;

+    }

+    .modal-body {

+      .form-group:last-child, form:last-child {

+        margin-bottom: 0;

+      }

+    }

+    .modal-footer {

+      display: block;

+      border-top: 0;

+      margin-top: 0;

+      padding: 0 15px 15px 15px;

+    }

+    .modal-title {

+      font-size: @font-size-title-level1;

+      margin-bottom: 0;

+      line-height: 1.5;

+    }

+    .modal-btn {

+      text-align: center;

+      font-size: 0;

+    }

+  }

+  .close {

+    color: @fonticon-color;

+    font-size: @font-size-title-level2;

+    text-shadow: none;

+    width: 24px;

+    height: 24px;

+    background: @scene-textcolor;

+    border-radius: 20px;

+    padding-bottom: 2px;

+    outline: none;

+    &:hover {

+      color: @fonticon-color;

+      background: @fonticon-bg-color-hover;

+    }

+  }

+  .alert-modal {

+    &.row {

+      margin-left: 100px;

+      margin-bottom: 30px;

+      text-align: left;

+      .tip-img {

+        display: inline-block;

+        width: 52px;

+        height: 52px;

+        border-radius: 50px;

+        font-size: 45px;

+        text-align: center;

+        line-height: 1;

+        margin-top: -5px;

+        margin-right: 15px;

+        &::before {

+          content: "!";

+        }

+      }

+      .tip-info {

+        width: 300px;

+        .alert-title {

+          font-size: @font-size-title-level2;

+          color: @title-text-color;

+        }

+        .alert-result {

+          margin-top: 5px;

+          font-size: @font-size;

+          color: @unselected-text-color;

+        }

+      }

+      .warning {

+        border: 3px solid @warning-color;

+        color: @warning-color;

+      }

+      .error {

+        border: 3px solid @error-color;

+        color: @error-color;

+      }

+    }

+  }

+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.module.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.module.ts
new file mode 100644
index 00000000..67fdb478
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.module.ts
@@ -0,0 +1,21 @@
+import {NgModule, ModuleWithProviders} from '@angular/core';
+
+import {PlxModalBackdrop} from './modal-backdrop';
+import {PlxModalWindow} from './modal-window';
+import {PlxModalStack} from './modal-stack';
+import {PlxModal} from './modal';
+
+export {PlxModal, PlxModalOptions} from './modal';
+export {PlxModalRef, PlxActiveModal} from './modal-ref';
+export {ModalDismissReasons} from './modal-dismiss-reasons';
+
+@NgModule({
+    declarations: [PlxModalBackdrop, PlxModalWindow],
+    entryComponents: [PlxModalBackdrop, PlxModalWindow],
+    providers: [PlxModal]
+})
+export class PlxModalModule {
+    public static forRoot(): ModuleWithProviders {
+        return {ngModule: PlxModalModule, providers: [PlxModal, PlxModalStack]};
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.spec.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.spec.ts
new file mode 100644
index 00000000..a99c86b1
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.spec.ts
@@ -0,0 +1,597 @@
+import {Component, Injectable, ViewChild, OnDestroy, NgModule, getDebugNode, DebugElement} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+
+import {PlxModalModule, PlxModal, PlxActiveModal, PlxModalRef} from './modal.module';
+
+const NOOP = () => {
+};
+
+@Injectable()
+class SpyService {
+    called = false;
+}
+
+describe('plx-modal', () => {
+
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(() => {
+        jasmine.addMatchers({
+            toHaveModal: function (util, customEqualityTests) {
+                return {
+                    compare: function (actual, content?, selector?) {
+                        const allModalsContent = document.querySelector(selector || 'body').querySelectorAll('.modal-content');
+                        let pass = true;
+                        let errMsg;
+
+                        if (!content) {
+                            pass = allModalsContent.length > 0;
+                            errMsg = 'at least one modal open but found none';
+                        } else if (Array.isArray(content)) {
+                            pass = allModalsContent.length === content.length;
+                            errMsg = `${content.length} modals open but found ${allModalsContent.length}`;
+                        } else {
+                            pass = allModalsContent.length === 1 && allModalsContent[0].textContent.trim() === content;
+                            errMsg = `exactly one modal open but found ${allModalsContent.length}`;
+                        }
+
+                        return {pass: pass, message: `Expected ${actual.outerHTML} to have ${errMsg}`};
+                    },
+                    negativeCompare: function (actual) {
+                        const allOpenModals = actual.querySelectorAll('plx-modal-window');
+
+                        return {
+                            pass: allOpenModals.length === 0,
+                            message: `Expected ${actual.outerHTML} not to have any modals open but found ${allOpenModals.length}`
+                        };
+                    }
+                };
+            }
+        });
+
+        jasmine.addMatchers({
+            toHaveBackdrop: function (util, customEqualityTests) {
+                return {
+                    compare: function (actual) {
+                        return {
+                            pass: document.querySelectorAll('plx-modal-backdrop').length === 1,
+                            message: `Expected ${actual.outerHTML} to have exactly one backdrop element`
+                        };
+                    },
+                    negativeCompare: function (actual) {
+                        const allOpenModals = document.querySelectorAll('plx-modal-backdrop');
+
+                        return {
+                            pass: allOpenModals.length === 0,
+                            message: `Expected ${actual.outerHTML} not to have any backdrop elements`
+                        };
+                    }
+                };
+            }
+        });
+    });
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({imports: [OesModalTestModule]});
+        fixture = TestBed.createComponent(TestComponent);
+    });
+
+    afterEach(() => {
+        // detect left-over modals and close them or report errors when can't
+
+        const remainingModalWindows = document.querySelectorAll('plx-modal-window');
+        if (remainingModalWindows.length) {
+            fail(`${remainingModalWindows.length} modal windows were left in the DOM.`);
+        }
+
+        const remainingModalBackdrops = document.querySelectorAll('plx-modal-backdrop');
+        if (remainingModalBackdrops.length) {
+            fail(`${remainingModalBackdrops.length} modal backdrops were left in the DOM.`);
+        }
+    });
+
+    describe('basic functionality', () => {
+
+        it('should open and close modal with default options', () => {
+            const modalInstance = fixture.componentInstance.open('foo');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should open and close modal from a TemplateRef content', () => {
+            const modalInstance = fixture.componentInstance.openTpl();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('Hello, World!');
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should properly destroy TemplateRef content', () => {
+            const spyService = fixture.debugElement.injector.get(SpyService);
+            const modalInstance = fixture.componentInstance.openDestroyableTpl();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('Some content');
+            expect(spyService.called).toBeFalsy();
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(spyService.called).toBeTruthy();
+        });
+
+        it('should open and close modal from a component type', () => {
+            const spyService = fixture.debugElement.injector.get(SpyService);
+            const modalInstance = fixture.componentInstance.openCmpt(DestroyableCmpt);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('Some content');
+            expect(spyService.called).toBeFalsy();
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(spyService.called).toBeTruthy();
+        });
+
+        it('should inject active modal ref when component is used as content', () => {
+            fixture.componentInstance.openCmpt(WithActiveModalCmpt);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('Close');
+
+            (<HTMLElement>document.querySelector('button.closeFromInside')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should expose component used as modal content', () => {
+            const modalInstance = fixture.componentInstance.openCmpt(WithActiveModalCmpt);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('Close');
+            expect(modalInstance.componentInstance instanceof WithActiveModalCmpt).toBeTruthy();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should open and close modal from inside', () => {
+            fixture.componentInstance.openTplClose();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            (<HTMLElement>document.querySelector('button#close')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should open and dismiss modal from inside', () => {
+            fixture.componentInstance.openTplDismiss().result.catch(NOOP);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            (<HTMLElement>document.querySelector('button#dismiss')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should resolve result promise on close', () => {
+            let resolvedResult;
+            fixture.componentInstance.openTplClose().result.then((result) => resolvedResult = result);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            (<HTMLElement>document.querySelector('button#close')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+
+            fixture.whenStable().then(() => {
+                expect(resolvedResult).toBe('myResult');
+            });
+        });
+
+        it('should reject result promise on dismiss', () => {
+            let rejectReason;
+            fixture.componentInstance.openTplDismiss().result.catch((reason) => rejectReason = reason);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            (<HTMLElement>document.querySelector('button#dismiss')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+
+            fixture.whenStable().then(() => {
+                expect(rejectReason).toBe('myReason');
+            });
+        });
+
+        it('should add / remove "modal-open" class to body when modal is open', () => {
+            const modalRef = fixture.componentInstance.open('bar');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+            expect(document.body).toHaveCssClass('modal-open');
+
+            modalRef.close('bar result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(document.body).not.toHaveCssClass('modal-open');
+        });
+
+        it('should not throw when close called multiple times', () => {
+            const modalInstance = fixture.componentInstance.open('foo');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+
+            modalInstance.close('some result');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should not throw when dismiss called multiple times', () => {
+            const modalRef = fixture.componentInstance.open('foo');
+            modalRef.result.catch(NOOP);
+
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            modalRef.dismiss('some reason');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+
+            modalRef.dismiss('some reason');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+    });
+
+    describe('backdrop options', () => {
+
+        it('should have backdrop by default', () => {
+            const modalInstance = fixture.componentInstance.open('foo');
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(fixture.nativeElement).toHaveBackdrop();
+
+            modalInstance.close('some reason');
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+        });
+
+        it('should open and close modal without backdrop', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {backdrop: false});
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+
+            modalInstance.close('some reason');
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+        });
+
+        it('should open and close modal without backdrop from template content', () => {
+            const modalInstance = fixture.componentInstance.openTpl({backdrop: false});
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal('Hello, World!');
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+
+            modalInstance.close('some reason');
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+        });
+
+        it('should dismiss on backdrop click', () => {
+            fixture.componentInstance.open('foo').result.catch(NOOP);
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(fixture.nativeElement).toHaveBackdrop();
+
+            (<HTMLElement>document.querySelector('plx-modal-window')).click();
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(fixture.nativeElement).not.toHaveBackdrop();
+        });
+
+        it('should not dismiss on "static" backdrop click', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {backdrop: 'static'});
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(fixture.nativeElement).toHaveBackdrop();
+
+            (<HTMLElement>document.querySelector('plx-modal-window')).click();
+            fixture.detectChanges();
+
+            expect(fixture.nativeElement).toHaveModal();
+            expect(fixture.nativeElement).toHaveBackdrop();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should not dismiss on clicks outside content where there is no backdrop', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {backdrop: false});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            (<HTMLElement>document.querySelector('plx-modal-window')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should not dismiss on clicks that result in detached elements', () => {
+            const modalInstance = fixture.componentInstance.openTplIf({});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            (<HTMLElement>document.querySelector('button#if')).click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+    });
+
+    describe('container options', () => {
+
+        it('should attach window and backdrop elements to the specified container', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {container: '#testContainer'});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo', '#testContainer');
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should throw when the specified container element doesnt exist', () => {
+            const brokenSelector = '#notInTheDOM';
+            expect(() => {
+                fixture.componentInstance.open('foo', {container: brokenSelector});
+            }).toThrowError(`The specified modal container "${brokenSelector}" was not found in the DOM.`);
+        });
+    });
+
+    describe('keyboard options', () => {
+
+        it('should dismiss modals on ESC by default', () => {
+            fixture.componentInstance.open('foo').result.catch(NOOP);
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            (<DebugElement>getDebugNode(document.querySelector('plx-modal-window'))).triggerEventHandler('keyup.esc', {});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should not dismiss modals on ESC when keyboard option is false', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {keyboard: false});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            (<DebugElement>getDebugNode(document.querySelector('plx-modal-window'))).triggerEventHandler('keyup.esc', {});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+        it('should not dismiss modals on ESC when default is prevented', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {keyboard: true});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+
+            (<DebugElement>getDebugNode(document.querySelector('plx-modal-window'))).triggerEventHandler('keyup.esc', {
+                defaultPrevented: true
+            });
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal();
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+    });
+
+    describe('size options', () => {
+
+        it('should render modals with specified size', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {size: 'sm'});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(document.querySelector('.modal-dialog')).toHaveCssClass('modal-sm');
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+    });
+
+    describe('custom class options', () => {
+
+        it('should render modals with the correct custom classes', () => {
+            const modalInstance = fixture.componentInstance.open('foo', {windowClass: 'bar'});
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(document.querySelector('plx-modal-window')).toHaveCssClass('bar');
+
+            modalInstance.close();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).not.toHaveModal();
+        });
+
+    });
+
+    describe('focus management', () => {
+
+        it('should focus modal window and return focus to previously focused element', () => {
+            fixture.detectChanges();
+            const openButtonEl = fixture.nativeElement.querySelector('button#open');
+
+            openButtonEl.focus();
+            openButtonEl.click();
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('from button');
+            expect(document.activeElement).toBe(document.querySelector('plx-modal-window'));
+
+            fixture.componentInstance.close();
+            expect(fixture.nativeElement).not.toHaveModal();
+            expect(document.activeElement).toBe(openButtonEl);
+        });
+
+
+        it('should return focus to body if no element focused prior to modal opening', () => {
+            const modalInstance = fixture.componentInstance.open('foo');
+            fixture.detectChanges();
+            expect(fixture.nativeElement).toHaveModal('foo');
+            expect(document.activeElement).toBe(document.querySelector('plx-modal-window'));
+
+            modalInstance.close('ok!');
+            expect(document.activeElement).toBe(document.body);
+        });
+    });
+
+    describe('window element ordering', () => {
+        it('should place newer windows on top of older ones', () => {
+            const modalInstance1 = fixture.componentInstance.open('foo', {windowClass: 'window-1'});
+            fixture.detectChanges();
+
+            const modalInstance2 = fixture.componentInstance.open('bar', {windowClass: 'window-2'});
+            fixture.detectChanges();
+
+            let windows = document.querySelectorAll('plx-modal-window');
+            expect(windows.length).toBe(2);
+            expect(windows[0]).toHaveCssClass('window-1');
+            expect(windows[1]).toHaveCssClass('window-2');
+
+            modalInstance2.close();
+            modalInstance1.close();
+            fixture.detectChanges();
+        });
+    });
+});
+
+@Component({selector: 'destroyable-cmpt', template: 'Some content'})
+export class DestroyableCmpt implements OnDestroy {
+    constructor(private _spyService: SpyService) {
+    }
+
+    ngOnDestroy(): void {
+        this._spyService.called = true;
+    }
+}
+
+@Component(
+    {selector: 'modal-content-cmpt', template: '<button class="closeFromInside" (click)="close()">Close</button>'})
+export class WithActiveModalCmpt {
+    constructor(public activeModal: PlxActiveModal) {
+    }
+
+    close() {
+        this.activeModal.close('from inside');
+    }
+}
+
+@Component({
+    selector: 'test-cmpt',
+    template: `
+    <div id="testContainer"></div>
+    <template #content>Hello, {{name}}!</template>
+    <template #destroyableContent><destroyable-cmpt></destroyable-cmpt></template>
+    <template #contentWithClose let-close="close"><button id="close" (click)="close('myResult')">Close me</button></template>
+    <template #contentWithDismiss let-dismiss="dismiss"><button id="dismiss" (click)="dismiss('myReason')">Dismiss me</button></template>
+    <template #contentWithIf>
+      <template [ngIf]="show">
+        <button id="if" (click)="show = false">Click me</button>
+      </template>
+    </template>
+    <button id="open" (click)="open('from button')">Open</button>
+  `
+})
+class TestComponent {
+    name = 'World';
+    openedModal: PlxModalRef;
+    show = true;
+    @ViewChild('content') tplContent;
+    @ViewChild('destroyableContent') tplDestroyableContent;
+    @ViewChild('contentWithClose') tplContentWithClose;
+    @ViewChild('contentWithDismiss') tplContentWithDismiss;
+    @ViewChild('contentWithIf') tplContentWithIf;
+
+    constructor(private modalService: PlxModal) {
+    }
+
+    open(content: string, options?: Object) {
+        this.openedModal = this.modalService.open(content, options);
+        return this.openedModal;
+    }
+
+    close() {
+        if (this.openedModal) {
+            this.openedModal.close('ok');
+        }
+    }
+
+    openTpl(options?: Object) {
+        return this.modalService.open(this.tplContent, options);
+    }
+
+    openCmpt(cmptType: any, options?: Object) {
+        return this.modalService.open(cmptType, options);
+    }
+
+    openDestroyableTpl(options?: Object) {
+        return this.modalService.open(this.tplDestroyableContent, options);
+    }
+
+    openTplClose(options?: Object) {
+        return this.modalService.open(this.tplContentWithClose, options);
+    }
+
+    openTplDismiss(options?: Object) {
+        return this.modalService.open(this.tplContentWithDismiss, options);
+    }
+
+    openTplIf(options?: Object) {
+        return this.modalService.open(this.tplContentWithIf, options);
+    }
+}
+
+@NgModule({
+    declarations: [TestComponent, DestroyableCmpt, WithActiveModalCmpt],
+    exports: [TestComponent, DestroyableCmpt],
+    imports: [CommonModule, PlxModalModule.forRoot()],
+    entryComponents: [DestroyableCmpt, WithActiveModalCmpt],
+    providers: [SpyService]
+})
+class OesModalTestModule {
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.ts
new file mode 100644
index 00000000..5935eee6
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal.ts
@@ -0,0 +1,54 @@
+import {Injectable, Injector, ComponentFactoryResolver} from '@angular/core';
+import {PlxModalStack} from './modal-stack';
+import {PlxModalRef} from './modal-ref';
+
+/**
+ * Represent options available when opening new modal windows.
+ */
+export interface PlxModalOptions {
+    /**
+     * Whether a backdrop element should be created for a given modal (true by default).
+     * Alternatively, specify 'static' for a backdrop which doesn't close the modal on click.
+     */
+    backdrop?: boolean | 'static';
+
+    /**
+     * An element to which to attach newly opened modal windows.
+     */
+    container?: string;
+
+    /**
+     * Whether to close the modal when escape key is pressed (true by default).
+     */
+    keyboard?: boolean;
+
+    /**
+     * Size of a new modal window.
+     */
+    size?: 'sm' | 'lg';
+
+    /**
+     * Custom class to append to the modal window
+     */
+    windowClass?: string;
+}
+
+/**
+ * A service to open modal windows. Creating a modal is straightforward: create a template and pass it as an argument to
+ * the "open" method!
+ */
+@Injectable()
+export class PlxModal {
+    constructor(private _moduleCFR: ComponentFactoryResolver, private _injector: Injector, private _modalStack: PlxModalStack) {
+    }
+
+    /**
+     * Opens a new modal window with the specified content and using supplied options. Content can be provided
+     * as a TemplateRef or a component type. If you pass a component type as content than instances of those
+     * components can be injected with an instance of the PlxActiveModal class. You can use methods on the
+     * PlxActiveModal class to close / dismiss modals from "inside" of a component.
+     */
+    public open(content: any, options: PlxModalOptions = {}): PlxModalRef {
+        return this._modalStack.open(this._moduleCFR, this._injector, content, options);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/index.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/index.ts
new file mode 100644
index 00000000..c677a944
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/index.ts
@@ -0,0 +1,8 @@
+export * from './text-input.component';
+export * from './text-input.module';
+export * from './ipv4-validator.directive';
+export * from './ipv6-validator.directive';
+export * from './max-validator.directive';
+export * from './min-validator.directive';
+export * from './text-input-ip.component';
+export * from './text-input-ip-address.component';
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv4-validator.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv4-validator.directive.ts
new file mode 100644
index 00000000..312ea5f3
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv4-validator.directive.ts
@@ -0,0 +1,24 @@
+import {Directive, forwardRef} from '@angular/core';
+import {AbstractControl, NG_VALIDATORS, Validators} from '@angular/forms';
+
+@Directive({
+  selector: '[ipv4][ngModel],[ipv4][formControl],[ipv4][formControlName]',
+  providers: [{
+	provide: NG_VALIDATORS,
+	useExisting: forwardRef(() => Ipv4ValidatorDirective),
+	multi: true
+  }],
+})
+
+export class Ipv4ValidatorDirective {
+  validate(c: AbstractControl) {
+	if (Validators.required(c) !== undefined &&
+		Validators.required(c) !== null) {
+		return null;
+	}
+	const ipv4Reg =
+		/^((25[0-5]|2[0-4]\d|[0-1]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[0-1]?\d\d?)$/;
+	let regex = new RegExp(ipv4Reg);
+	return regex.test(c.value) ? null : {'ipv4': true};
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv6-validator.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv6-validator.directive.ts
new file mode 100644
index 00000000..45182036
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/ipv6-validator.directive.ts
@@ -0,0 +1,24 @@
+import {Directive, forwardRef} from '@angular/core';

+import {AbstractControl, NG_VALIDATORS, Validators} from '@angular/forms';

+

+@Directive({

+	selector: '[ipv6][ngModel],[ipv6][formControl],[ipv6][formControlName]',

+	providers: [{

+		provide: NG_VALIDATORS,

+		useExisting: forwardRef(() => Ipv6ValidatorDirective),

+		multi: true

+	}],

+})

+

+export class Ipv6ValidatorDirective {

+	validate(c: AbstractControl) {

+		if (Validators.required(c) !== undefined &&

+			Validators.required(c) !== null) {

+			return null;

+		}

+		const ipv6Reg =

+			/^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;

+		let regex = new RegExp(ipv6Reg);

+		return regex.test(c.value) ? null : {'ipv6': true};

+	}4

+}

diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/max-validator.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/max-validator.directive.ts
new file mode 100644
index 00000000..143dccc6
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/max-validator.directive.ts
@@ -0,0 +1,49 @@
+import {AfterViewInit, Directive, ElementRef, forwardRef, Input} from '@angular/core';
+import {AbstractControl, NG_VALIDATORS, ValidatorFn, Validators} from '@angular/forms';
+
+import {NumberWrapperParseFloat} from '../core/number-wrapper-parse';
+
+@Directive({
+  selector: '[max][ngModel],[max][formControl],[max][formControlName]',
+  providers: [{
+	provide: NG_VALIDATORS,
+	useExisting: forwardRef(() => MaxValidatorDirective),
+	multi: true
+  }],
+})
+
+export class MaxValidatorDirective implements AfterViewInit {
+  private _validator: ValidatorFn;
+  private inputElement: any;
+  constructor(elementRef: ElementRef) {
+	this.inputElement = elementRef;
+  }
+  ngAfterViewInit() {
+	this.inputElement = this.inputElement.nativeElement.querySelector('input');
+	if (this.inputElement && this.inputElement.querySelector('input')) {
+		this._validator = max(NumberWrapperParseFloat(
+			this.inputElement.querySelector('input').getAttribute('max')));
+	}
+  }
+  @Input()
+  set max(maxValue: string) {
+	this._validator = max(NumberWrapperParseFloat(maxValue));
+  }
+
+  validate(c: AbstractControl): {[key: string]: any} {
+	return this._validator(c);
+  }
+}
+
+function max(maxvalue: number): ValidatorFn {
+  return (control: AbstractControl): {[key: string]: any} => {
+	if (Validators.required(control) !== undefined &&
+		Validators.required(control) !== null) {
+		return null;
+	}
+	let v: Number = Number(control.value);
+	return v > maxvalue ?
+		{'max': {'requiredValue': maxvalue, 'actualValue': v}} :
+		null;
+  };
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/min-validator.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/min-validator.directive.ts
new file mode 100644
index 00000000..260a93ed
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/min-validator.directive.ts
@@ -0,0 +1,49 @@
+import {AfterViewInit, Directive, ElementRef, forwardRef, Input} from '@angular/core';
+import {AbstractControl, NG_VALIDATORS, ValidatorFn, Validators} from '@angular/forms';
+
+import {NumberWrapperParseFloat} from '../core/number-wrapper-parse';
+
+@Directive({
+  selector: '[min][ngModel],[min][formControl],[min][formControlName]',
+  providers: [{
+	provide: NG_VALIDATORS,
+	useExisting: forwardRef(() => MinValidatorDirective),
+	multi: true
+  }],
+})
+
+export class MinValidatorDirective implements AfterViewInit {
+  private _validator: ValidatorFn;
+  private inputElement: any;
+  constructor(elementRef: ElementRef) {
+	this.inputElement = elementRef;
+  }
+  ngAfterViewInit() {
+	this.inputElement = this.inputElement.nativeElement.querySelector('input');
+	if (this.inputElement && this.inputElement.querySelector('input')) {
+		this._validator = min(NumberWrapperParseFloat(
+			this.inputElement.querySelector('input').getAttribute('min')));
+	}
+  }
+  @Input()
+  set min(minValue: string) {
+	this._validator = min(NumberWrapperParseFloat(minValue));
+  }
+
+  validate(c: AbstractControl): {[key: string]: any} {
+	return this._validator(c);
+  }
+}
+
+function min(minvalue: number): ValidatorFn {
+  return (control: AbstractControl): {[key: string]: any} => {
+	if (Validators.required(control) !== undefined &&
+		Validators.required(control) !== null) {
+		return null;
+	}
+	let v: Number = Number(control.value);
+	return v < minvalue ?
+		{'min': {'requiredValue': minvalue, 'actualValue': v}} :
+		null;
+  };
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts
new file mode 100644
index 00000000..501d2326
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts
@@ -0,0 +1,170 @@
+import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';

+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

+import {BooleanFieldValue} from '../core/boolean-field-value';

+

+const noop = () => {};

+

+export const PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR: any = {

+	provide: NG_VALUE_ACCESSOR,

+	useExisting: forwardRef(() => PlxTextInputIpAddressComponent),

+	multi: true

+};

+@Component({

+	selector: 'plx-text-input-ip-address',

+	template: `

+		<div>

+			<plx-text-input #textInputIpAddress type="text" [(ngModel)]="ipValue"

+			 [width]="'280px'" [numberShowSpinner]="false" minlength="1"

+			 (keyup)="keyUp($event)" (paste)="paste($event)" class="{{sizeClass}}"></plx-text-input>

+			<div class="plx-text-input-error">{{errMsg}}</div>

+		</div>

+	`,

+	styleUrls: ['text-input.less'],

+	host: {'style': 'display: inline-block;'},

+	providers: [PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR]

+})

+

+export class PlxTextInputIpAddressComponent implements OnInit, ControlValueAccessor {

+	@Input() lang: string = 'zh'; //zh|en

+	@Input() size: string; //空代表普通尺寸，sm代表小尺寸

+	@Input() ipAddressCheckTip: string = ''; //

+

+	@Input() @BooleanFieldValue() required: boolean = false;

+

+	@Input() public ipValue: string;

+	@Output() public ipValueChange: EventEmitter<any> = new EventEmitter<any>();

+

+	@Input() public ipValueFlg : boolean;

+	@Output() public ipValueFlgChange: EventEmitter<any> = new EventEmitter<any>();

+

+	private isNull : boolean = true;

+

+	/** Callback registered via registerOnTouched (ControlValueAccessor) */

+	private _onTouchedCallback: () => void = noop;

+	/** Callback registered via registerOnChange (ControlValueAccessor) */

+	private _onChangeCallback: (_: any) => void = noop;

+

+	public errMsgs = {

+		'zh': {

+			'empty': '此项不能为空',

+			'invalidate': 'IP格式不对',

+			'range': '请输入正确的IPV4地址或IPV6地址',

+			'range-IPV4': '请输入正确的IPV4',

+			'range-IPV6': '请输入正确的IPV6'

+		},

+		'en': {

+			'empty': 'IP can not be empty',

+			'invalidate': 'IP format is incorrect',

+			'range': 'IP range is  IPV4 or IPV6',

+			'range-IPV4': 'IP range is  IPV4',

+			'range-IPV6': 'IP range is IPV6'

+		}

+	};

+	public errMsg: string;

+	public sizeClass: string;

+

+	constructor() {

+	}

+

+	ngOnInit(): void {

+		if (this.size === 'sm') {

+			this.sizeClass = 'plx-input-sm';

+		}

+		this.isNull = this.ipValueFlg;

+		if(this.repIPStr(this.ipValue) === ''&& !this.ipValueFlg){

+			this.ipValueFlg = false;

+			this.emitValue();

+		}

+	}

+

+	public keyUp(event: any): void {

+		this.setValueToOutside(this.validate());

+		this.emitValue();

+	}

+

+	public paste(event: any): void{

+		setTimeout(() => {

+			this.ipValue = event.target.value;

+			this.setValueToOutside(this.validate());

+			this.emitValue();

+		}, 0);

+	}

+

+	private emitValue(){

+		this.ipValueChange.emit(this.ipValue);

+		this.ipValueFlgChange.emit(this.ipValueFlg);

+	}

+

+	private setValueToOutside(validateFlg: boolean): void {

+		this.ipValueFlg = validateFlg;

+		let value;

+		if (validateFlg) {

+			if (this.ipValue) {

+				value = this.ipValue;

+			}

+			if(this.ipValue === ""  && !this.isNull){

+				this.ipValueFlg = false;

+			}

+		} else {

+			value = false;

+		}

+		this._onChangeCallback(value);

+	}

+

+	writeValue(value: any): void {

+      //

+      this.errMsg = '';

+      this.ipValue = value;

+      if (value) {

+          this.validate();

+      }

+	}

+

+	registerOnChange(fn: any) {

+		this._onChangeCallback = fn;

+	}

+

+	registerOnTouched(fn: any) {

+		this._onTouchedCallback = fn;

+	}

+

+	public validate(): boolean {

+		this.errMsg = '';

+		if (this.required) {

+			if (!this.ipValue) {

+				this.errMsg = this.errMsgs[this.lang]['empty'];

+				return false;

+			}

+		}

+		if ((this.ipValue) && (!this.ipValue)) {

+			this.errMsg = this.errMsgs[this.lang]['invalidate'];

+			return false;

+		}

+		let blackStr = this.repIPStr(this.ipValue);

+		if(this.ipAddressCheckTip === ''){

+			if(this.ipValue !== '' && blackStr === ''){

+				this.errMsg = this.errMsgs[this.lang]['range'];

+				return false;

+			}

+		}else{

+			if(this.ipValue !== '' && this.ipAddressCheckTip !== blackStr) {

+				this.errMsg = this.errMsgs[this.lang]['range-'+ this.ipAddressCheckTip];

+				return false;

+			}

+		}

+		return true;

+	}

+

+	private repIPStr(value: any): string {

+		let blackStr = '';

+		var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;

+		if (regip4.test(value)) {

+			return "IPV4";

+		}

+		var regip6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;

+		if (regip6.test(value)) {

+			return "IPV6";

+		}

+		return blackStr;

+	}

+}

diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts
new file mode 100644
index 00000000..7c9d616d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts
@@ -0,0 +1,189 @@
+import {Component, forwardRef, Input, OnInit} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+import {BooleanFieldValue} from '../core/boolean-field-value';
+
+const noop = () => {};
+
+export const PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => PlxTextInputIpComponent),
+  multi: true
+};
+
+@Component({
+	selector: 'plx-text-input-ip',
+	template: `
+		<div>
+			<plx-text-input #textInputIp1 type="number" [(ngModel)]="ipValue1"
+			 [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
+			 (keyup)="keyup($event, null, textInputIp2)" (change)="change($event)"
+			  [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
+			<span class="plx-text-input-ip-dot">.</span>
+			<plx-text-input #textInputIp2 type="number" [(ngModel)]="ipValue2"
+			 [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
+			 (keyup)="keyup($event, textInputIp1, textInputIp3)" (change)="change($event)"
+			  [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
+			<span class="plx-text-input-ip-dot">.</span>
+			<plx-text-input #textInputIp3 type="number" [(ngModel)]="ipValue3"
+			 [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
+			 (keyup)="keyup($event, textInputIp2, textInputIp4)" (change)="change($event)"
+			  [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
+			<span class="plx-text-input-ip-dot">.</span>
+			<plx-text-input #textInputIp4 type="number" [(ngModel)]="ipValue4"
+			 [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
+			 (keyup)="keyup($event, textInputIp3, null)" (change)="change($event)"
+			  [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
+			<div class="plx-text-input-error">{{errMsg}}</div>
+		</div>
+	`,
+	styleUrls: ['text-input.less'],
+	host: {'style': 'display: inline-block;'},
+	providers: [PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR]
+})
+
+export class PlxTextInputIpComponent implements OnInit, ControlValueAccessor {
+	@Input() lang: string = 'zh'; //zh|en
+	@Input() size: string; //空代表普通尺寸，sm代表小尺寸
+	@Input() @BooleanFieldValue() required: boolean = false;
+	/** Callback registered via registerOnTouched (ControlValueAccessor) */
+	private _onTouchedCallback: () => void = noop;
+	/** Callback registered via registerOnChange (ControlValueAccessor) */
+	private _onChangeCallback: (_: any) => void = noop;
+	public ipValue1: number;
+	public ipValue2: number;
+	public ipValue3: number;
+	public ipValue4: number;
+	public errMsgs = {
+		'zh': {
+			'empty': 'IP不能为空',
+			'invalidate': '非法IP',
+			'range': 'IP范围[0.0.0.0]~[255.255.255.255]'
+		},
+		'en': {
+			'empty': 'IP can not be empty',
+			'invalidate': 'Invalid IP',
+			'range': 'IP range is [0.0.0.0]~[255.255.255.255]'
+		}
+	};
+	public errMsg: string;
+
+	constructor() {
+	}
+
+	ngOnInit(): void {
+	}
+
+  public change(event: any) :void {
+      event.target.value = this.repNumber(event.target.value);
+      this.setValueToOutside(this.validate());
+  }
+
+	public keyup(event: any, frontElement: any, backElement: any): void {
+		event.target.value = this.repNumber(event.target.value);
+		if (((event.keyCode === 13 || event.keyCode === 110 || event.keyCode === 190)
+				&& event.target.value.length !== 0)
+			|| event.target.value.length === 3) {       //enter:13,dot:110、190
+        if (event.keyCode !== 9) {   //tab:9
+            if (backElement) {
+                backElement.autoFocus = true;
+                backElement.inputViewChild.nativeElement.select();
+            } else {
+                if (event.keyCode !== 110 && event.keyCode !== 190) {
+                    event.target.blur();
+                }
+            }
+        }
+		}
+
+		if (event.target.value.length === 0  // backspace:8  delete:46
+			&& (event.keyCode === 8 || event.keyCode === 46)) {
+			if (frontElement) {
+				frontElement.autoFocus = true;
+				frontElement.inputViewChild.nativeElement.select();
+			}
+		}
+
+		this.setValueToOutside(this.validate());
+	}
+
+	private setValueToOutside(validateFlg: boolean): void {
+		let value;
+		if (validateFlg) {
+			if (this.ipValue1 && this.ipValue2 && this.ipValue3 && this.ipValue4) {
+				value = this.ipValue1 + '.'
+					+ this.ipValue2 + '.'+ this.ipValue3 + '.'+ this.ipValue4;
+			}
+		} else {
+			value = false;
+		}
+		this._onChangeCallback(value);
+	}
+
+	writeValue(value: any): void {
+		//
+    this.errMsg = '';
+    if (value) {
+      if (this.isIPStr(value)) {
+          let ipArr = value.split('.');
+          this.ipValue1 = ipArr[0];
+          this.ipValue2 = ipArr[1];
+          this.ipValue3 = ipArr[2];
+          this.ipValue4 = ipArr[3];
+      } else {
+          this.errMsg = this.errMsgs[this.lang]['invalidate'] + ' : ' + value;
+      }
+    }
+	}
+
+	registerOnChange(fn: any) {
+		this._onChangeCallback = fn;
+	}
+
+	registerOnTouched(fn: any) {
+		this._onTouchedCallback = fn;
+	}
+
+	public validate(): boolean {
+		this.errMsg = '';
+		if (this.required) {
+			if (!this.ipValue1 && !this.ipValue2 && !this.ipValue3 && !this.ipValue4) {
+				this.errMsg = this.errMsgs[this.lang]['empty'];
+				return false;
+			}
+		}
+		if ((this.ipValue1 || this.ipValue2 || this.ipValue3 || this.ipValue4)
+			&& (!this.ipValue1 || !this.ipValue2 || !this.ipValue3 || !this.ipValue4)) {
+			this.errMsg = this.errMsgs[this.lang]['invalidate'];
+			return false;
+		}
+		if ((this.ipValue1 && (this.ipValue1 < 0 || this.ipValue1 > 255))
+			|| (this.ipValue2 && (this.ipValue2 < 0 || this.ipValue2 > 255))
+			|| (this.ipValue3 && (this.ipValue3 < 0 || this.ipValue3 > 255))
+			|| (this.ipValue4 && (this.ipValue4 < 0 || this.ipValue4 > 255))) {
+			this.errMsg = this.errMsgs[this.lang]['range'];
+			return false;
+		}
+
+		return true;
+	}
+
+	private repNumber(value: any): number {
+		var reg = /^[\d]+$/g;
+		if (!reg.test(value)) {
+			let txt = value;
+			txt.replace(/[^0-9]+/, function (char, index, val) {    //匹配第一次非数字字符
+				value = val.replace(/\D/g, "");    //将非数字字符替换成""
+			})
+		}
+		return value;
+	}
+
+  private isIPStr(value: any): boolean {
+    var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+    if (regip4.test(value)) {
+      return true;
+    }
+    return false;
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts
new file mode 100644
index 00000000..9b5a01e9
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.component.ts
@@ -0,0 +1,765 @@
+import {AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, OnInit, Output, Renderer2, ViewChild} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+
+import {BooleanFieldValue} from '../core/boolean-field-value';
+import {NumberWrapperParseFloat} from '../core/number-wrapper-parse';
+import {UUID} from '../core/uuid';
+
+const noop = () => {};
+
+export const PX_TEXT_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => PlxTextInputComponent),
+  multi: true
+};
+
+@Component({
+	selector: 'plx-text-input',
+	templateUrl: 'text-input.html',
+	styleUrls: ['text-input.less'],
+	host: {'style': 'display: inline-block;'},
+	providers: [PX_TEXT_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+
+export class PlxTextInputComponent implements ControlValueAccessor, OnInit,
+                                             AfterContentInit {
+  private _focused: boolean = false;
+  private _value: any = '';
+  /** Callback registered via registerOnTouched (ControlValueAccessor) */
+  private _onTouchedCallback: () => void = noop;
+  /** Callback registered via registerOnChange (ControlValueAccessor) */
+  private _onChangeCallback: (_: any) => void = noop;
+
+  /** Readonly properties. */
+  get empty() {
+    return this._value === null || this._value === '';
+  }
+  get inputId(): string {
+    return `${this.id}`;
+  }
+  get isShowHintLabel() {
+    return this._focused && this.hintLabel !== null;
+  }
+  get inputType() {
+    return this.type === 'number' ? 'text' : this.type;
+  }
+
+  @Input() id: string = `plx-input-${UUID.UUID()}`;
+  @Input() name: string = null;
+  @Input() hintLabel: string = null;
+  @Input() lang: string = 'zh';
+  @Input() @BooleanFieldValue() disabled: boolean = false;
+
+	@Input() numberShowSpinner = true;
+  @Input() max: string|number = null;
+  @Input() maxLength: number = 64;
+  @Input() min: string|number = null;
+  @Input() minLength: number = null;
+  @Input() placeholder: string = '';
+  @Input() @BooleanFieldValue() readOnly: boolean = false;
+  @Input() @BooleanFieldValue() required: boolean = false;
+  @Input() @BooleanFieldValue() notShowOption: boolean = true;
+  @Input() type: string = 'text';
+  @Input() tabIndex: number = null;
+  @Input() pattern: string = null;
+
+  @Input() @BooleanFieldValue() shortInput: boolean = false;
+  @Input() unit: string = null;
+  @Input() unitOptions: string[] = null;
+  @Input() prefix: string = null;
+  @Input() suffixList: string[] = null;
+
+  // @Input() precision: number = 0;
+  @Input() step: number = 1;
+  @Input() width: string = '400px';
+  @Input() unitWidth: string = '45px';
+  @Input() unitOptionWidth: string = '84px';
+  @Input() prefixWidth: string = '70px';
+  @Input() historyList: string[];
+
+	@Input() prefixOptions: string[] = [];
+	@Input() prefixOptionWidth: string = '84px';
+
+	@Input() @BooleanFieldValue() passwordSwitch: boolean = false;
+
+  @ViewChild('input') inputViewChild: ElementRef;
+  @ViewChild('inputOutter') pxTextInputElement: ElementRef;
+
+  @HostBinding('class.input-invalid') selectClass: boolean = true;
+
+  isDisabledUp: boolean = false;
+  isDisabledDown: boolean = false;
+  displayDataList: string[];
+  currentPrecision: number = 0;
+  keyPattern: RegExp = /[0-9\-]/;
+  langPattern: RegExp =
+      /[a-zA-Z]|[\u4e00-\u9fa5]|[\uff08\uff09\u300a\u300b\u2014\u2014\uff1a\uff1b\uff0c\u201c\u201d\u2018\u2019\+\=\{\}\u3001\u3002\u3010\u3011\<\>\uff01\uff1f\/\|]/g;
+  timer: any;
+  optionalLabel: string = null;
+  hasSelection = false;
+  _precision: number = 0;
+  displayValue: any;
+
+  isOpenDataList: boolean = false;
+  dataListClicked: boolean = false;
+  isOpenSuffixList: boolean = false;
+  suffixListClicked: boolean = false;
+
+  showUnit: string;
+  isShowUnitOption: boolean = false;
+  unitOptionClicked: boolean = false;
+
+	prefixOptionClicked: boolean = false;
+	isShowPrefixOption = false;
+	showPrefix: string;
+	showPassword: boolean = false;
+	tooltipText: string;
+	tooltipTexts = {
+		'zh': {
+			'true': '隐藏',
+			'false': '显示',
+		},
+		'en': {
+			'true': 'hidden',
+			'false': 'show',
+		}
+	};
+  isPwdSwithHover: boolean = false;
+  isPwdSwithClick: boolean = false;
+
+  _autoFocus: boolean = false;
+  @Input()
+  set autoFocus(value: boolean) {
+    this._autoFocus = value;
+
+    const that = this;
+    if (this._autoFocus) {
+      setTimeout(() => {
+        that.inputViewChild.nativeElement.focus();
+      }, 0);
+    }
+  }
+  get autoFocus() {
+    return this._autoFocus;
+  }
+
+  @Input()
+  set precision(value: string) {
+    this._precision = parseInt(value);
+  }
+  get precision() {
+    return this._value;
+  }
+
+  get inputWidth() {
+  	if (this.prefixOptions && this.prefixOptions.length > 0) {
+	    if (this.unitOptions && this.unitOptions.length > 0) {
+		    return `calc(${this.width} - ${this.prefixOptionWidth} - ${this.unitOptionWidth})`;
+	    } else if (this.unit !== null) {
+		    return `calc(${this.width} - ${this.prefixOptionWidth} - ${this.unitWidth})`;
+	    } else {
+		    return `calc(${this.width} - ${this.prefixOptionWidth})`;
+	    }
+    }
+
+    if (this.unit !== null && this.prefix !== null) {
+      return `calc(${this.width} - ${this.unitWidth} - ${this.prefixWidth})`;
+    }
+
+    if (this.unit !== null) {
+      return `calc(${this.width} - ${this.unitWidth})`;
+    }
+
+    if (!!this.unitOptions && this.unitOptions.length !== 0 &&
+        this.prefix !== null) {
+      return `calc(${this.width} - ${this.unitOptionWidth} - ${
+                                                               this.prefixWidth
+                                                             })`;
+    }
+
+    if (!!this.unitOptions && this.unitOptions.length !== 0) {
+      return `calc(${this.width} - ${this.unitOptionWidth})`;
+    }
+    if (this.prefix !== null) {
+      return `calc(${this.width} - ${this.prefixWidth})`;
+    }
+    return this.width;
+  }
+
+
+  get hasUnit() {
+    return this.unit !== null;
+  }
+  get hasUnitOption() {
+    return this.showUnit !== undefined;
+  }
+  get hasPrefix() {
+    return this.prefix !== null;
+  }
+	get hasPrefixOption() {
+		return this.prefixOptions && this.prefixOptions.length > 0;
+	}
+  get isFocus() {
+    return this._focused;
+  }
+
+  private _blurEmitter: EventEmitter<FocusEvent> =
+      new EventEmitter<FocusEvent>();
+  private _focusEmitter: EventEmitter<FocusEvent> =
+      new EventEmitter<FocusEvent>();
+  private click = new EventEmitter<any>();
+  private unitChange = new EventEmitter<any>();
+	@Output() public prefixChange = new EventEmitter<any>();
+
+  @Output('blur')
+  get onBlur(): Observable<FocusEvent> {
+    return this._blurEmitter.asObservable();
+  }
+
+  @Output('focus')
+  get onFocus(): Observable<FocusEvent> {
+    return this._focusEmitter.asObservable();
+  }
+
+  @HostListener('focus')
+  onHostFocus() {
+    this.renderer.addClass(this.el.nativeElement, 'input-focus');
+    this.renderer.removeClass(this.el.nativeElement, 'input-blur');
+  }
+
+  @HostListener('blur')
+  onHostBlur() {
+    this.renderer.addClass(this.el.nativeElement, 'input-blur');
+    this.renderer.removeClass(this.el.nativeElement, 'input-focus');
+  }
+
+  @Input()
+  set value(v: any) {
+    v = this.filterZhChar(v);
+    v = this._convertValueForInputType(v);
+    if (v !== this._value) {
+      this._value = v;
+      if (this.type === 'number') {
+        if (this._value === '') {
+          this._onChangeCallback(null);
+        } else if (isNaN(this._value)) {
+          this._onChangeCallback(this._value);
+        } else {
+          this._onChangeCallback(NumberWrapperParseFloat(this._value));
+        }
+      } else {
+        this._onChangeCallback(this._value);
+      }
+    }
+  }
+  get value(): any {
+    return this._value;
+  }
+
+  constructor(
+      private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    if (this.shortInput) {
+      this.width = '120px';
+      this.unitWidth = '40px';
+      this.prefixWidth = '40px';
+    }
+    this.translateLabel();
+
+    if (!!this.unitOptions && this.unitOptions.length !== 0) {
+      this.showUnit = this.unitOptions[0];
+    }
+
+	  if (!!this.prefixOptions && this.prefixOptions.length !== 0) {
+		  this.showPrefix = this.prefixOptions[0];
+	  }
+  }
+
+  ngAfterContentInit() {
+    if (this.pxTextInputElement) {
+      Array.from(this.pxTextInputElement.nativeElement.childNodes)
+          .forEach((node: HTMLElement) => {
+            if (node.nodeType === 3) {
+              this.pxTextInputElement.nativeElement.removeChild(node);
+            }
+          });
+    }
+  }
+  private translateLabel() {
+    if (this.lang === 'zh') {
+      this.optionalLabel = '（可选）';
+    } else {
+      this.optionalLabel = '(Optional)';
+    }
+  }
+
+  _handleFocus(event: FocusEvent) {
+    this._focused = true;
+    this._focusEmitter.emit(event);
+  }
+
+  _handleBlur(event: FocusEvent) {
+    this._focused = false;
+    this._onTouchedCallback();
+    this._blurEmitter.emit(event);
+  }
+
+  _checkValueLimit(value: any) {
+    if (this.type === 'number') {
+      if ((value === '' || value === undefined || value === null) &&
+          !this.required) {
+        return '';
+      } else if (
+          this.min !== null &&
+          NumberWrapperParseFloat(value) < NumberWrapperParseFloat(this.min)) {
+        return this.min;
+      } else if (
+          this.max !== null &&
+          NumberWrapperParseFloat(value) > NumberWrapperParseFloat(this.max)) {
+        return this.max;
+      } else {
+        return value;
+      }
+    }
+    return value;
+  }
+
+  _checkValue() {
+    this.value = this._checkValueLimit(this.value);
+    this.displayValue = this.value;
+  }
+
+  _handleChange(event: Event) {
+    this.value = (<HTMLInputElement>event.target).value;
+    this._onTouchedCallback();
+  }
+
+  openDataList() {
+    this.dataListClicked = true;
+    if (this.historyList) {
+      if (this.value) {
+        this.filterOption(this.value);
+      } else {
+        this.displayDataList = this.historyList;
+        if (!this.isOpenDataList) {
+          this.isOpenDataList = true;
+        }
+      }
+    }
+  }
+
+  _handleClick(event: Event) {
+    if (this.isShowUnitOption) {
+      this.isShowUnitOption = false;
+    }
+    this.click.emit(event);
+
+    if (this.historyList) {
+      this.openDataList();
+    }
+  }
+
+  _handleSelect(event: Event) {  // 输入框文本被选中时处理
+    if (!this.hasSelection) {
+      this.hasSelection = true;
+    }
+  }
+  deleteSelection() {  // 删除选中文本，
+    document.getSelection().deleteFromDocument();
+    this.hasSelection = false;
+  }
+
+  _onWindowClick(event: Event) {
+    if (this.historyList) {
+      if (!this.dataListClicked) {
+        this.isOpenDataList = false;
+      }
+      this.dataListClicked = false;
+    }
+
+    if (this.suffixList) {
+      if (!this.suffixListClicked) {
+        this.isOpenSuffixList = false;
+      }
+      this.suffixListClicked = false;
+    }
+
+    if (this.unitOptions) {
+      if (!this.unitOptionClicked) {
+        this.isShowUnitOption = false;
+      }
+      this.unitOptionClicked = false;
+    }
+
+	if (this.prefixOptions) {
+		if (!this.prefixOptionClicked) {
+			this.isShowPrefixOption = false;
+		}
+		this.prefixOptionClicked = false;
+	}
+  }
+
+	_showPrefixOption(event: Event) {
+		this.isShowPrefixOption = !this.isShowPrefixOption;
+		this.prefixOptionClicked = true;
+	}
+
+  _showUnitOption(event: Event) {
+    this.isShowUnitOption = !this.isShowUnitOption;
+    this.unitOptionClicked = true;
+  }
+
+  _setUnit(unitValue: string) {
+    this.unitOptionClicked = true;
+    this.showUnit = unitValue;
+    this.unitChange.emit(unitValue);
+    this.isShowUnitOption = false;
+  }
+
+	_setPrefix(value: string) {
+		if (value !== this.showPrefix) {
+			this.showPrefix = value;
+			this.prefixChange.emit(value);
+		}
+		this.prefixOptionClicked = true;
+		this.isShowPrefixOption = false;
+	}
+
+  filterOption(value: any) {
+    this.displayDataList = [];
+    this.displayDataList = this.historyList.filter((data: string) => {
+      return data.toLowerCase().indexOf(value.toLowerCase()) > -1;
+    });
+
+    this.isOpenDataList = this.displayDataList.length !== 0;
+  }
+
+  concatValueAndSuffix(value: string) {
+    const that = this;
+    that.displayDataList = [];
+    let mark = '@';
+    if (value === '') {
+      that.displayDataList = [];
+    } else if (value.trim().toLowerCase().indexOf(mark) === -1) {
+      that.displayDataList.push(value);
+      that.suffixList.map((item: string) => {
+        let tempValue = value + mark + item;
+        that.displayDataList.push(tempValue);
+      });
+    } else {
+      that.suffixList.map((item: string) => {
+        let tempValue = value.split(mark)[0] + mark + item;
+        that.displayDataList.push(tempValue);
+      });
+      that.displayDataList = that.displayDataList.filter((item: string) => {
+        return item.trim().toLowerCase().indexOf(value) > -1;
+      });
+    }
+
+    that.isOpenSuffixList = that.displayDataList.length !== 0;
+  }
+
+  _handleInput(event: any) {
+    let inputValue = event.target.value.trim().toLowerCase();
+
+    if (this.historyList) {
+      this.filterOption(inputValue);
+    }
+
+    if (this.suffixList) {
+      this.concatValueAndSuffix(inputValue);
+    }
+  }
+
+  chooseInputData(data: any) {
+    this.displayValue = data;
+    this.value = data;
+
+    this.isOpenDataList = false;
+    this.dataListClicked = true;
+    this.isOpenSuffixList = false;
+    this.suffixListClicked = true;
+  }
+
+  writeValue(value: any) {
+    this.displayValue = this._checkValueLimit(value);
+    this._value = this.displayValue;
+  }
+
+  registerOnChange(fn: any) {
+    this._onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this._onTouchedCallback = fn;
+  }
+
+  private getConvertValue(v: any) {
+    this.currentPrecision = v.toString().split('.')[1].length;
+    if (this.currentPrecision === 0) {  // 输入小数点，但小数位数为0时
+      return v;
+    }
+    if (this.currentPrecision <
+        this._precision) {  // 输入小数点，且小数位数不为0
+      return this.toFixed(v, this.currentPrecision);
+    } else {
+      return this.toFixed(v, this._precision);
+    }
+  }
+
+  private filterZhChar(v: any) {
+    if (this.type === 'number') {
+		    let reg = /[^0-9.-]/;
+		    while (reg.test(v)) {
+				    v = v.replace(reg, '');
+		    }
+    }
+    return v;
+  }
+
+  private _convertValueForInputType(v: any): any {
+    switch (this.type) {
+      case 'number': {
+        if (v === '' || v === '-') {
+          return v;
+        }
+
+        if (v.toString().indexOf('.') === -1) {  // 整数
+          return this.toFixed(v, 0);
+        } else {
+          return this.getConvertValue(v);
+        }
+      }
+      default:
+        return v;
+    }
+  }
+
+  private toFixed(value: number, precision: number) {
+    return Number(value).toFixed(precision);
+  }
+
+  repeat(interval: number, dir: number) {
+    let i = interval || 500;
+
+    this.clearTimer();
+    this.timer = setTimeout(() => {
+      this.repeat(40, dir);
+    }, i);
+
+    this.spin(dir);
+  }
+
+  clearTimer() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+
+  spin(dir: number) {
+    let step = this.step * dir;
+    let currentValue = this._convertValueForInputType(this.value) || 0;
+
+    this.value = Number(currentValue) + step;
+
+    if (this.maxLength !== null &&
+        this.value.toString().length > this.maxLength) {
+      this.value = currentValue;
+    }
+
+    if (this.min !== null && this.value <= NumberWrapperParseFloat(this.min)) {
+      this.value = this.min;
+      this.isDisabledDown = true;
+    }
+
+    if (this.max !== null && this.value >= NumberWrapperParseFloat(this.max)) {
+      this.value = this.max;
+      this.isDisabledUp = true;
+    }
+    this.displayValue = this.value;
+    this._onChangeCallback(NumberWrapperParseFloat(this.value));
+  }
+
+  onUpButtonMousedown(event: Event, input: HTMLInputElement) {
+    if (!this.disabled && this.type === 'number') {
+      input.focus();
+      this.repeat(null, 1);
+      event.preventDefault();
+    }
+  }
+
+  onUpButtonMouseup(event: Event) {
+    if (!this.disabled) {
+      this.clearTimer();
+    }
+  }
+
+  onUpButtonMouseleave(event: Event) {
+    if (!this.disabled) {
+      this.clearTimer();
+    }
+  }
+
+  onDownButtonMousedown(event: Event, input: HTMLInputElement) {
+    if (!this.disabled && this.type === 'number') {
+      input.focus();
+      this.repeat(null, -1);
+      event.preventDefault();
+    }
+  }
+
+  onDownButtonMouseup(event: Event) {
+    if (!this.disabled) {
+      this.clearTimer();
+    }
+  }
+
+  onDownButtonMouseleave(event: Event) {
+    if (!this.disabled) {
+      this.clearTimer();
+    }
+  }
+
+  onInputKeydown(event: KeyboardEvent) {
+    if (this.type === 'number') {
+      if (event.which === 229) {
+        event.preventDefault();
+        return;
+      } else if (event.which === 38) {
+        this.spin(1);
+        event.preventDefault();
+      } else if (event.which === 40) {
+        this.spin(-1);
+        event.preventDefault();
+      }
+    }
+  }
+  onInputKeyPress(event: KeyboardEvent) {
+    let inputChar = String.fromCharCode(event.charCode);
+    if (this.type === 'number') {
+      if (event.which === 8) {
+        return;
+      }
+
+      // if (!this.isValueLimit()) {
+      //   this.handleSelection(event);
+      // }
+
+      if (inputChar === '-' && this.min !== null &&
+          NumberWrapperParseFloat(this.min) >= 0) {
+        event.preventDefault();
+        return;
+      }
+      if (this.isIllegalNumberInputChar(event) ||
+          this.isIllegalIntergerInput(inputChar)) {
+        event.preventDefault();
+        return;
+      }
+      if (this.isIllegalFloatInput(
+              inputChar)) {  // 当该函数返回true时，执行两种情景
+        this.handleSelection(event);
+      }
+      if (this.hasSelection) {  // 文本被选中，执行文本替换
+        this.deleteSelection();
+      }
+    }
+  }
+
+  private handleSelection(event: any) {
+    if (this.hasSelection) {  // 文本被选中，执行文本替换
+      this.deleteSelection();
+    } else {  // 无选中文本，阻止非法输入
+      event.preventDefault();
+    }
+  }
+  // private isValueLimit() {
+  //   if (this.min !== null && NumberWrapperParseFloat(this.value) !== 0 &&
+  //       this.value <= NumberWrapperParseFloat(this.min)) {
+  //     return false;
+  //   }
+  //   if (this.max !== null && NumberWrapperParseFloat(this.value) !== 0 &&
+  //       this.value >= NumberWrapperParseFloat(this.max)) {
+  //     return false;
+  //   }
+  //   return true;
+  // }
+
+  private isIllegalNumberInputChar(event: KeyboardEvent) {
+    /* 8:backspace, 46:. */
+    return !this.keyPattern.test(String.fromCharCode(event.charCode)) &&
+        event.which !== 46 && event.which !== 0;
+  }
+
+  private isIllegalIntergerInput(inputChar: string) {
+    return this._precision === 0 &&
+        (inputChar === '.' ||
+         (this._value && this._value && this._value.toString().length > 0 &&
+          inputChar === '-'));
+  }
+
+  private isIllegalFloatInput(inputChar: string) {
+    return this._precision > 0 && this._value &&
+        ((this._value.toString().length > 0 && inputChar === '-') ||
+         ((this._value.toString() === '' ||
+           this._value.toString().indexOf('.') > 0) &&
+          inputChar === '.') ||
+         (this._value.toString().indexOf('.') > 0 &&
+          this._value.toString().split('.')[1].length === this._precision));
+  }
+
+  onInput(event: Event, inputValue: string) {
+    this.value = inputValue;
+  }
+
+  //处理鼠标经过上下箭头时，样式设置
+  isEmptyValue() {
+    if (this.value === undefined || this.value === null || this.value === '') {
+      return true;
+    }
+    return false;
+  }
+
+  isDisabledUpCaret() {
+    if (this.isEmptyValue()) {
+      return true;
+    } else if (
+        this.max !== null &&
+        (NumberWrapperParseFloat(this.value) >=
+         NumberWrapperParseFloat(this.max))) {
+      return true;
+    }
+    return false;
+  }
+
+  isDisabledDownCaret() {
+    if (this.isEmptyValue()) {
+      return true;
+    } else if (
+        this.min !== null &&
+        (NumberWrapperParseFloat(this.value) <=
+         NumberWrapperParseFloat(this.min))) {
+      return true;
+    }
+    return false;
+  }
+
+  _handleMouseEnterUp() {
+    this.isDisabledUp = this.isDisabledUpCaret();
+  }
+
+  _handleMouseEnterDown() {
+    this.isDisabledDown = this.isDisabledDownCaret();
+  }
+
+  public switch(): void {
+	  this.showPassword = !this.showPassword;
+	  this.showPassword?this.inputViewChild.nativeElement.type =
+		  'text':this.inputViewChild.nativeElement.type = 'password';
+  }
+
+	private setPasswordTooltip(): void {
+		this.tooltipTexts[this.lang][this.showPassword.toString()]
+	}
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.html b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.html
new file mode 100644
index 00000000..9065badd
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.html
@@ -0,0 +1,69 @@
+<div #inputOutter class="text-input"
+     [class.text-input-with-hint]="isShowHintLabel"
+     [class.short-text-input]="shortInput"
+     [class.text-input-with-unit]="hasUnit"
+     [class.text-input-with-unitOption]="hasUnitOption"
+     [class.text-input-with-prefix]="hasPrefix"
+     [class.text-input-with-prefixOption]="hasPrefixOption"
+     [class.text-input-with-passwordSwith]="passwordSwitch"
+     [class.input-right-border]="isShowUnitOption"
+     [class.input-left-border]="isShowPrefixOption"
+     [class.input-right-border-pwdswith-hover]="isPwdSwithHover"
+     [class.input-right-border-pwdswith-click]="isPwdSwithClick"
+     (window:click)="_onWindowClick($event)">
+	<div #prefixOpt *ngIf="hasPrefixOption" [class.prefix-focus]="isShowPrefixOption" class="text-input-prefix-option" (click)="_showPrefixOption($event)">{{showPrefix}}<span class="toggle"></span></div>
+	<div *ngIf="isShowPrefixOption" class="plx-text-input-prefix-group">
+		<li *ngFor="let option of prefixOptions" (click)="_setPrefix(option)" [ngClass]="{'group-selected':showPrefix===option}">{{option}}</li>
+	</div>
+    <div *ngIf="hasPrefix" class="text-input-prefix" [style.width]="prefixWidth">{{prefix}}</div>
+	<span [class.input-span-focus]="isFocus ||isOpenDataList" class="input-span">
+        <input #input
+           class="plx-input"
+           [disabled]="disabled"
+           [id]="inputId"
+           [name]="name"
+           [attr.max]="max"
+           [attr.maxlength]="maxLength"
+           [attr.min]="min"
+           [attr.minlength]="minLength"
+           [attr.tabindex]="tabIndex"
+           [attr.pattern]="pattern"
+           [placeholder]="placeholder"
+           [readonly]="readOnly"
+           [required]="required"
+           [type]="inputType"
+           [(ngModel)]="displayValue"
+           (click)="_handleClick($event)"
+           (focus)="_handleFocus($event)"
+           (blur)="_handleBlur($event);_checkValue()"
+           (input)="_handleInput($event)"
+           (change)="_handleChange($event)"
+           (select)="_handleSelect($event)"
+           (keydown)="onInputKeydown($event)" (keyup)="onInput($event,input.value)"
+           (keypress)="onInputKeyPress($event)" [style.width]="inputWidth" validateOnBlur/>
+        <a class="input-spinner-up" [style.cursor]="isDisabledUp ? 'not-allowed' : 'pointer'" *ngIf="type === 'number' && numberShowSpinner" (mouseenter)="_handleMouseEnterUp()"
+           (mouseleave)="onUpButtonMouseleave($event)" (mousedown)="onUpButtonMousedown($event,input)"
+            (mouseup)="onUpButtonMouseup($event)">
+            <span class="caret-up" [class.caret-up-hover]="!isDisabledUp"></span>
+        </a>
+        <a class="input-spinner-down" [style.cursor]="isDisabledDown ? 'not-allowed':'pointer'" *ngIf="type === 'number' && numberShowSpinner" (mouseenter)="_handleMouseEnterDown()"
+            (mouseleave)="onDownButtonMouseleave($event)" (mousedown)="onDownButtonMousedown($event,input)"
+            (mouseup)="onDownButtonMouseup($event)">
+            <span class="caret-down"  [class.caret-down-hover]="!isDisabledDown"></span>
+        </a>
+    </span><div *ngIf="hasUnit" class="text-input-unit" [style.width]="unitWidth">{{unit}}</div>
+
+    <div *ngIf="hasUnitOption" [class.unit-focus]="isShowUnitOption" class="text-input-unit-option" (click)="_showUnitOption($event)" [style.width]="unitOptionWidth" >{{showUnit}}<span class="toggle"></span></div>
+    <div *ngIf="isShowUnitOption" class="plx-text-input-unit-group" [style.margin-left]="inputWidth">
+      <li *ngFor="let option of unitOptions" (click)="_setUnit(option)" [ngClass]="{'group-selected':showUnit===option}">{{option}}</li>
+    </div>
+    <div *ngIf="!required && !notShowOption" class="text-input-optional">{{optionalLabel}}</div>
+    <div *ngIf="isShowHintLabel" class="text-input-hint">{{hintLabel}}</div>
+    <div *ngIf = "isOpenDataList || isOpenSuffixList" class = "text-input-dataList">
+      <li *ngFor="let data of displayDataList" (click)="chooseInputData(data)">{{data}}</li>
+    </div>
+	<span *ngIf="passwordSwitch" placement="bottom" plxTooltip="{{tooltipText}}" [ngClass]="showPassword?'ict-eye-closed':'ict-eye'"
+	      class="plx-input-passwordSwitch" (click)='switch()'
+        (mouseover)="isPwdSwithHover=true" (mouseleave)="isPwdSwithHover=false"
+        (mousedown)="isPwdSwithClick=true" (mouseup)="isPwdSwithClick=false"></span>
+</div>
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.less b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.less
new file mode 100644
index 00000000..6a93c1c1
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.less
@@ -0,0 +1,423 @@
+@import "../../assets/components/themes/default/theme.less";
+@import "../../assets/components/themes/common/plx-input.less";
+
+@input-short-width: 120px;
+@padding-left: 10px;
+@padding: 10px;
+@border-width: 1px;
+@unit-span-width: 45px;
+@unit-option-width: 84px;
+@short-unit-span-width: 40px;
+@prefix-span-width: 70px;
+@prefix-option-width: 84px;
+@short-prefix-span-width: 40px;
+@password-switch: 40px;
+
+.font {
+	font-family: @font-family;
+	font-size: @font-size;
+}
+
+.text-input {
+	//height: @input-height;
+	//position: relative;
+	//margin-bottom: 0;
+	display: inline-block;
+
+	.caret-down {
+		display: block;
+		width: 0;
+		height: 0;
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+		border-top: 4px solid lighten(@fonticon-color, 5%);
+		margin-top: 4px;
+		margin-bottom: 10px;
+
+		&.caret-down-hover:hover, &.caret-down-hover:active {
+			border-top: 4px solid @primary-color;
+		}
+	}
+	.caret-up {
+		display: block;
+		width: 0;
+		height: 0;
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+		border-bottom: 4px solid lighten(@fonticon-color, 5%);
+		margin-top: 10px;
+
+		&.caret-up-hover:hover, &.caret-up-hover:active {
+			border-bottom: 4px solid @primary-color;
+		}
+	}
+	.toggle {
+		float: right;
+		margin-right: 10px;
+		margin-top: 14px;
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+		border-top: 4px solid lighten(@fonticon-color, 5%);
+	}
+	.text-input-dataList {
+		 margin-top: 2px;
+		 position: absolute;
+		 z-index: @z-index-dropdown;
+		 border: 1px solid @gray-grade-7;
+		 background: #fff;
+		 cursor: pointer;
+		 border-radius: @radius;
+		 li {
+			 list-style: none;
+			 height: @input-height;
+			 width: @input-width;
+			 padding-left: @padding-left;
+			 &:hover {
+				 background-color: @hover-bg-color;
+			 }
+		 }
+	 }
+}
+
+.input-span {
+	display: inline-block;
+	overflow: visible;
+	padding: 0;
+	position: relative;
+}
+
+.text-input-with-hint {
+  margin-bottom: -8px;
+  :host(.ng-touched.ng-invalid.input-blur) & {
+    height: auto;
+    margin-bottom: 0;
+  }
+}
+
+.plx-text-input-unit-group, .plx-text-input-prefix-group {
+	position: absolute;
+	margin-top: @overlay-margin-top;
+	width: @unit-option-width;
+	z-index: @z-index-dropdown;
+	border-radius: @radius;
+	background: @component-bg;
+	border: 1px solid @border-color-base;
+	.shadow;
+	cursor: pointer;
+	li {
+		padding-left: 10px;
+		height: @input-height;
+		list-style: none;
+		line-height: @input-height;
+		font-size: @font-size;
+		&:hover {
+			background-color: @hover-bg-color;
+		}
+		&.group-selected, &.group-selected:hover {
+			background-color: @selected-bg-color;
+			color: @text-color;
+		}
+	}
+}
+
+.text-input-optional {
+  display: inline-block;
+  margin-right: 6px;
+  padding-left:5px;
+}
+
+.input-right-border .plx-input {
+	border-right: 1px solid @primary-color;
+}
+
+.input-left-border .plx-input {
+	border-left: 1px solid @primary-color;
+}
+
+.text-input-hint {
+	top: 42px;
+	left: 10px;
+	font-family: @font-family;
+	font-size: @font-size;
+	color: @disabled-text-color;
+	:host(.ng-touched.ng-invalid.input-blur) & {
+		display: none;
+	}
+}
+
+.text-input-prefix {
+	.font;
+	display: inline-block;
+	width: @prefix-span-width;
+	height: @input-height;
+	text-align: center;
+	line-height: @input-height;
+	border-top-left-radius: @radius;
+	border-bottom-left-radius: @radius;
+	color: @disabled-text-color;
+	border: 1px solid @border-color-base;
+	border-right: 0;
+	vertical-align: middle;
+	.short-text-input & {
+		width: @short-prefix-span-width;
+	}
+	.input-span-focus & {
+		border-color: @primary-color;
+	}
+	.input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur &,
+	.input-invalid.ng-dirty.ng-invalid.ng-touched.input-blur .input-span-focus:focus & {
+		border-color: @error-color;
+	}
+}
+
+.input-unit {
+  .font;
+  display: inline-block;
+  height: @input-height;
+  text-align: center;
+  line-height: @input-height;
+  border-top-right-radius: @radius;
+  border-bottom-right-radius: @radius;
+}
+
+.text-input-unit {
+	border: 1px solid @border-color-base;
+	border-left: 0;
+	.input-unit;
+	color: @disabled-text-color;
+	width: @unit-span-width;
+	text-align: center;
+	vertical-align: middle;
+	.short-text-input & {
+		width: @short-unit-span-width;
+	}
+	.input-span-focus & {
+		border-color: @primary-color;
+	}
+}
+
+.text-input-prefix-option {
+	.font;
+	display: inline-block;
+	height: @input-height;
+	text-align: center;
+	line-height: @input-height;
+	border-top-left-radius: @radius;
+	border-bottom-left-radius: @radius;
+	width: @prefix-option-width;
+	text-align: left;
+	padding-left: 10px;
+	cursor: pointer;
+	border: 1px solid @border-color-base;;
+	border-right: 0;
+	vertical-align: middle;
+	&.prefix-focus {
+		border-color: @primary-color;
+	}
+}
+
+.text-input-unit-option {
+	&:extend(.input-unit);
+	width: @unit-option-width;
+	text-align: left;
+	padding-left: 10px;
+	cursor: pointer;
+	border: 1px solid @border-color-base;;
+	border-left: 0;
+	vertical-align: middle;
+	.input-span-focus & {
+		border-color: @primary-color;
+	}
+}
+
+.text-input-with-unitOption {
+	div.unit-focus {
+		border-color: @primary-color;
+	}
+}
+
+.plx-input {
+  .short-text-input & {
+    width: @input-short-width;
+  }
+
+  .text-input-with-unit & {
+    width: @input-width - @unit-span-width;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .text-input-with-unitOption & {
+    width: @input-width - @unit-option-width;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .text-input-with-prefix & {
+    width: @input-width - @prefix-span-width;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+	.text-input-with-prefixOption & {
+		width: @input-width - @prefix-option-width;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.text-input-with-passwordSwith & {
+		width: @input-width - @password-switch;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+  .text-input-with-prefix.text-input-with-unit & {
+    width: @input-width - @prefix-span-width - @unit-span-width;
+  }
+
+  .text-input-with-prefix.text-input-with-unitOption & {
+    width: @input-width - @prefix-span-width - @unit-option-width;
+  }
+
+  .short-text-input.text-input-with-prefix & {
+    width: @input-short-width - @short-prefix-span-width;
+  }
+
+  .short-text-input.text-input-with-unit & {
+    width: @input-short-width - @short-unit-span-width;
+  }
+
+  .short-text-input.text-input-with-prefix.text-input-with-unit & {
+    width: @input-short-width - @short-prefix-span-width - @short-unit-span-width;
+  }
+}
+
+.input-spinner() {
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  position: absolute;
+  margin: 0;
+  right: 0;
+  overflow: hidden;
+  border: none;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 18px;
+}
+
+.input-spinner-up {
+  .input-spinner();
+  top: 0;
+}
+
+.input-spinner-down {
+  .input-spinner();
+  bottom: 0;
+}
+
+:host(.plx-input-sm) {
+    .plx-input-sm-common;
+}
+
+.plx-input-sm {
+     .plx-input-sm-common;
+}
+
+.plx-input-sm-common {
+    .plx-input {
+        height: @input-height-sm;
+        line-height: @input-height-sm;
+    }
+    .text-input-prefix,
+    .text-input-unit,
+    .text-input-unit-option,
+    .text-input-prefix-option {
+        height: @input-height-sm;
+        line-height: @input-height-sm;
+    }
+    div.text-input-dataList {
+        height: @input-height-sm;
+    }
+    .toggle {
+        margin-top: 11px;
+    }
+    .caret-down {
+        margin-bottom: 8px;
+    }
+    .caret-up {
+        margin-top: 8px;
+    }
+    .plx-input-passwordSwitch {
+        line-height: @input-height-sm - 2px;
+    }
+}
+
+.plx-input-passwordSwitch {
+	display: inline-block;
+	line-height: @input-height - 2px;
+	width: @password-switch;
+	text-align: center;
+	vertical-align: middle;
+	background-color: @common-color;
+	border: 1px solid @border-color-base;
+	border-left: 0;
+	border-bottom-right-radius: @radius;
+	border-top-right-radius: @radius;
+	cursor: pointer;
+	&:focus,
+	&:hover {
+    border-color: @btn-common-color-border-hover;
+		background-color: @common-color-hover;
+    &.ict-eye-closed, &.ict-eye {
+      color: @btn-common-color-text-hover;
+    }
+	}
+	&:active {
+		background-color: @common-color-click;
+    border-color: @btn-common-color-border-click;
+    &.ict-eye-closed, &.ict-eye {
+      color: @btn-common-color-text-click;
+    }
+	}
+	&.ict-eye-closed, &.ict-eye {
+		color: @fonticon-color;
+		font-size: 16px;
+	}
+ }
+.input-right-border-pwdswith-hover .plx-input {
+  border-right-color: @btn-common-color-border-hover;
+}
+.input-right-border-pwdswith-click .plx-input {
+  border-right-color: @btn-common-color-border-click;
+}
+
+.plx-text-input-ip-dot {
+	display: inline-block;
+	vertical-align: bottom;
+	color: #999;
+}
+
+.plx-text-input-error {
+	font-size: 12px;
+	color: @error-color;
+	margin-top: 5px;
+}
+
+:host(.plx-text-input-ip-invalid) {
+    .plx-text-input-ip-invalid-common;
+}
+
+.plx-text-input-ip-invalid {
+     .plx-text-input-ip-invalid-common;
+}
+
+.plx-text-input-ip-invalid-common {
+    .plx-input {
+        border-color: @error-color;
+    }
+    .input-span-focus .plx-input {
+        border-color: @primary-color;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.module.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.module.ts
new file mode 100644
index 00000000..4374770a
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input.module.ts
@@ -0,0 +1,31 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+import {PlxTooltipModule} from '../plx-tooltip/plx-tooltip.module';
+import {Ipv4ValidatorDirective} from './ipv4-validator.directive';
+import {Ipv6ValidatorDirective} from './ipv6-validator.directive';
+import {MaxValidatorDirective} from './max-validator.directive';
+import {MinValidatorDirective} from './min-validator.directive';
+import {PlxTextInputComponent} from './text-input.component';
+import {PlxValidateOnBlurDirective} from './validate-on-blur.directive';
+import {PlxTextInputIpComponent} from './text-input-ip.component';
+import {PlxTextInputIpAddressComponent} from './text-input-ip-address.component';
+
+
+@NgModule({
+  imports: [CommonModule, FormsModule, PlxTooltipModule],
+  declarations: [
+    PlxTextInputComponent, Ipv4ValidatorDirective, Ipv6ValidatorDirective,
+	  MaxValidatorDirective, MinValidatorDirective, PlxValidateOnBlurDirective,
+	  PlxTextInputIpComponent, PlxTextInputIpAddressComponent
+  ],
+  exports: [
+    PlxTextInputComponent, Ipv4ValidatorDirective, Ipv6ValidatorDirective,
+	  MaxValidatorDirective, MinValidatorDirective, PlxValidateOnBlurDirective,
+	  PlxTextInputIpComponent, PlxTextInputIpAddressComponent
+  ]
+})
+
+export class PlxTextInputModule {
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/validate-on-blur.directive.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/validate-on-blur.directive.ts
new file mode 100644
index 00000000..b4a940c8
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/validate-on-blur.directive.ts
@@ -0,0 +1,18 @@
+import {Directive, HostListener} from '@angular/core';
+import {NgControl} from '@angular/forms';
+
+@Directive({selector: '[validateOnBlur]'})
+
+export class PlxValidateOnBlurDirective {
+  constructor(private formControl: NgControl) {}
+
+  @HostListener('focus')
+  onFocus() {
+    // this.formControl.control.markAsUntouched(false);
+  }
+
+  @HostListener('blur')
+  onBlur() {
+    // this.formControl.control.markAsTouched(true);
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.spec.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.spec.ts
new file mode 100644
index 00000000..4a19dd17
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.spec.ts
@@ -0,0 +1,11 @@
+import {PlxTooltipConfig} from './plx-tooltip-config';
+
+describe('plx-tooltip-config', () => {
+    it('should have sensible default values', () => {
+        const config = new PlxTooltipConfig();
+
+        expect(config.placement).toBe('top');
+        expect(config.triggers).toBe('hover');
+        expect(config.container).toBeUndefined();
+    });
+});
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.ts
new file mode 100644
index 00000000..dd1cc254
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip-config.ts
@@ -0,0 +1,13 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the PlxTooltip directive.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the tooltips used in the application.
+ */
+@Injectable()
+export class PlxTooltipConfig {
+  public placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+  public triggers = 'hover';
+  public container: string;
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.less b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.less
new file mode 100644
index 00000000..d7ce015f
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.less
@@ -0,0 +1,241 @@
+@import "../../assets/components/themes/common/plx-input.less";

+

+@tooltip-arrow-border-width: 4px;

+@tooltip-arrow-border-width-before: 5px;

+@tooltip-arrow-border-height: @tooltip-arrow-border-width-before - @tooltip-arrow-border-width;

+@tooltip-arrow-away: 5px;

+@tooltip-arrow-background-color: #595959;

+@tooltip-arrow-border-color: #595959;

+@tooltip-away-host: 3px;

+

+.plx-tooltip {

+    font-family: @font-family;

+    font-size: @font-size;

+    opacity: 1;

+    position: absolute;

+    z-index: 10001;

+    display: block;

+    font-style: normal;

+    font-weight: normal;

+    letter-spacing: normal;

+    line-break: auto;

+    line-height: 1.5;

+    text-align: left;

+    text-decoration: none;

+    text-shadow: none;

+    text-transform: none;

+    white-space: normal;

+    word-break: normal;

+    word-spacing: normal;

+    word-wrap: break-word;

+    &::before,

+    &::after {

+        content: "";

+        position: absolute;

+        display: block;

+        width: 0;

+        height: 0;

+        border: solid transparent;

+    }

+    &::before {

+        border-width: @tooltip-arrow-border-width-before;

+    }

+    &::after {

+        border-width: @tooltip-arrow-border-width;

+    }

+}

+

+.plx-tooltip-inner {

+    min-width: 60px;

+    max-width: 200px;

+    padding: 3px 8px;

+    color: #fff;

+    text-align: center;

+    background-color: #000;

+}

+

+.plx-tooltip.show {

+	font-size: @font-size;

+	opacity: 1;

+}

+.plx-tooltip.show .plx-tooltip-inner {

+	background-color: #595959;

+	border-radius: @radius;

+	padding: 0px 12px;

+	height: 30px;

+	line-height: 30px;

+}

+

+.plx-tooltip-top-common {

+    margin-top: -(@tooltip-arrow-border-width + @tooltip-away-host);

+    &::before {

+        border-top-color: @tooltip-arrow-border-color;

+        border-bottom-width: 0;

+        bottom: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        border-top-color: @tooltip-arrow-background-color;

+        border-bottom-width: 0;

+        bottom: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip-top {

+    .plx-tooltip-top-common;

+    &::before {

+        left: 50%;

+        margin-left: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        left: 50%;

+        margin-left: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip.plx-tooltip-top-left {

+    .plx-tooltip-top-common;

+    &::before {

+        left: @tooltip-arrow-away;

+    }

+    &::after {

+        left: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+.plx-tooltip.plx-tooltip-top-right {

+    .plx-tooltip-top-common;

+    &::before {

+        right: @tooltip-arrow-away;

+    }

+    &::after {

+        right: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+

+.plx-tooltip-right-common {

+    margin-left: @tooltip-arrow-border-width + @tooltip-away-host;

+    &::before {

+        border-right-color: @tooltip-arrow-border-color;

+        border-left-width: 0;

+        left: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        border-right-color: @tooltip-arrow-background-color;

+        border-left-width: 0;

+        left: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip.plx-tooltip-right {

+    .plx-tooltip-right-common;

+    &::before {

+        top: 50%;

+        margin-top: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        top: 50%;

+        margin-top: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip.plx-tooltip-right-top {

+    .plx-tooltip-right-common;

+    &::before {

+        top: @tooltip-arrow-away;

+    }

+    &::after {

+        top: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+.plx-tooltip.plx-tooltip-right-bottom {

+    .plx-tooltip-right-common;

+    &::before {

+        bottom: @tooltip-arrow-away;

+    }

+    &::after {

+        bottom: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+

+.plx-tooltip-bottom-common {

+    margin-top: @tooltip-arrow-border-width + @tooltip-away-host;

+    &::before {

+        border-bottom-color: @tooltip-arrow-border-color;

+        border-top-width: 0;

+        top: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        border-bottom-color: @tooltip-arrow-background-color;

+        border-top-width: 0;

+        top: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip.plx-tooltip-bottom {

+    .plx-tooltip-bottom-common;

+    &::before {

+        left: 50%;

+        margin-left: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        left: 50%;

+        margin-left: -@tooltip-arrow-border-width;

+    }

+}

+.plx-tooltip.plx-tooltip-bottom-left {

+    .plx-tooltip-bottom-common;

+    &::before {

+        left: @tooltip-arrow-away;

+    }

+    &::after {

+        left: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+.plx-tooltip.plx-tooltip-bottom-right {

+    .plx-tooltip-bottom-common;

+    &::before {

+        right: @tooltip-arrow-away;

+    }

+    &::after {

+        right: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+

+.plx-tooltip-left-common {

+    margin-left: -(@tooltip-arrow-border-width + @tooltip-away-host);

+    &::before {

+        border-left-color: @tooltip-arrow-border-color;

+        border-right-width: 0;

+        right: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        border-left-color: @tooltip-arrow-background-color;

+        border-right-width: 0;

+        right: -@tooltip-arrow-border-width;

+    }

+}

+

+.plx-tooltip.plx-tooltip-left {

+    .plx-tooltip-left-common;

+    &::before {

+        top: 50%;

+        margin-top: -@tooltip-arrow-border-width-before;

+    }

+    &::after {

+        top: 50%;

+        margin-top: -@tooltip-arrow-border-width;

+    }

+}

+

+.plx-tooltip.plx-tooltip-left-top {

+    .plx-tooltip-left-common;

+    &::before {

+        top: @tooltip-arrow-away;

+    }

+    &::after {

+        top: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}

+.plx-tooltip.plx-tooltip-left-bottom {

+    .plx-tooltip-left-common;

+    &::before {

+        bottom: @tooltip-arrow-away;

+    }

+    &::after {

+        bottom: @tooltip-arrow-away + @tooltip-arrow-border-height;

+    }

+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.module.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.module.ts
new file mode 100644
index 00000000..062ded1c
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.module.ts
@@ -0,0 +1,12 @@
+import {NgModule, ModuleWithProviders} from '@angular/core';
+
+import {PlxTooltip, PlxTooltipWindow} from './plx-tooltip';
+import {PlxTooltipConfig} from './plx-tooltip-config';
+
+export {PlxTooltipConfig} from './plx-tooltip-config';
+export {PlxTooltip} from './plx-tooltip';
+
+@NgModule({declarations: [PlxTooltip, PlxTooltipWindow], exports: [PlxTooltip], entryComponents: [PlxTooltipWindow]})
+export class PlxTooltipModule {
+  public static forRoot(): ModuleWithProviders { return {ngModule: PlxTooltipModule, providers: [PlxTooltipConfig]}; }
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.spec.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.spec.ts
new file mode 100644
index 00000000..cd2d8a6a
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.spec.ts
@@ -0,0 +1,485 @@
+import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
+import {createGenericTestComponent} from '../test/common';
+
+import {By} from '@angular/platform-browser';
+import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
+
+import {PlxTooltipModule} from './plx-tooltip.module';
+import {PlxTooltipWindow, PlxTooltip} from './plx-tooltip';
+import {PlxTooltipConfig} from './plx-tooltip-config';
+
+const createTestComponent =
+    (html: string) => <ComponentFixture<TestComponent>>createGenericTestComponent(html, TestComponent);
+
+const createOnPushTestComponent =
+    (html: string) => <ComponentFixture<TestOnPushComponent>>createGenericTestComponent(html, TestOnPushComponent);
+
+describe('plx-tooltip-window', () => {
+  beforeEach(() => { TestBed.configureTestingModule({imports: [PlxTooltipModule.forRoot()]}); });
+
+  it('should render tooltip on top by default', () => {
+    const fixture = TestBed.createComponent(PlxTooltipWindow);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement).toHaveCssClass('tooltip');
+    expect(fixture.nativeElement).toHaveCssClass('tooltip-top');
+    expect(fixture.nativeElement.getAttribute('role')).toBe('tooltip');
+  });
+
+  it('should position tooltips as requested', () => {
+    const fixture = TestBed.createComponent(PlxTooltipWindow);
+    fixture.componentInstance.placement = 'left';
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveCssClass('tooltip-left');
+  });
+});
+
+describe('plx-tooltip', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule(
+        {declarations: [TestComponent, TestOnPushComponent], imports: [PlxTooltipModule.forRoot()]});
+  });
+
+  function getWindow(element) { return element.querySelector('plx-tooltip-window'); }
+
+  describe('basic functionality', () => {
+
+    it('should open and close a tooltip - default settings and content as string', () => {
+      const fixture = createTestComponent(`<div plxTooltip="Great tip!"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+      const defaultConfig = new PlxTooltipConfig();
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl).toHaveCssClass('tooltip');
+      expect(windowEl).toHaveCssClass(`tooltip-${defaultConfig.placement}`);
+      expect(windowEl.textContent.trim()).toBe('Great tip!');
+      expect(windowEl.getAttribute('role')).toBe('tooltip');
+      expect(windowEl.getAttribute('id')).toBe('plx-tooltip-0');
+      expect(windowEl.parentNode).toBe(fixture.nativeElement);
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBe('plx-tooltip-0');
+
+      directive.triggerEventHandler('mouseleave', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
+    });
+
+    it('should open and close a tooltip - default settings and content from a template', () => {
+      const fixture = createTestComponent(`<template #t>Hello, {{name}}!</template><div [plxTooltip]="t"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl).toHaveCssClass('tooltip');
+      expect(windowEl).toHaveCssClass('tooltip-top');
+      expect(windowEl.textContent.trim()).toBe('Hello, World!');
+      expect(windowEl.getAttribute('role')).toBe('tooltip');
+      expect(windowEl.getAttribute('id')).toBe('plx-tooltip-1');
+      expect(windowEl.parentNode).toBe(fixture.nativeElement);
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBe('plx-tooltip-1');
+
+      directive.triggerEventHandler('mouseleave', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
+    });
+
+    it('should open and close a tooltip - default settings, content from a template and context supplied', () => {
+      const fixture = createTestComponent(`<template #t let-name="name">Hello, {{name}}!</template><div [plxTooltip]="t"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.context.tooltip.open({name: 'John'});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl).toHaveCssClass('tooltip');
+      expect(windowEl).toHaveCssClass('tooltip-top');
+      expect(windowEl.textContent.trim()).toBe('Hello, John!');
+      expect(windowEl.getAttribute('role')).toBe('tooltip');
+      expect(windowEl.getAttribute('id')).toBe('plx-tooltip-2');
+      expect(windowEl.parentNode).toBe(fixture.nativeElement);
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBe('plx-tooltip-2');
+
+      directive.triggerEventHandler('mouseleave', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
+    });
+
+    it('should not open a tooltip if content is falsy', () => {
+      const fixture = createTestComponent(`<div [plxTooltip]="notExisting"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl).toBeNull();
+    });
+
+    it('should close the tooltip tooltip if content becomes falsy', () => {
+      const fixture = createTestComponent(`<div [plxTooltip]="name"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+      fixture.componentInstance.name = null;
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+    });
+
+    it('should allow re-opening previously closed tooltips', () => {
+      const fixture = createTestComponent(`<div plxTooltip="Great tip!"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+      directive.triggerEventHandler('mouseleave', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+    });
+
+    it('should not leave dangling tooltips in the DOM', () => {
+      const fixture = createTestComponent(`<template [ngIf]="show"><div plxTooltip="Great tip!"></div></template>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+    });
+
+    it('should properly cleanup tooltips with manual triggers', () => {
+      const fixture = createTestComponent(`
+            <template [ngIf]="show">
+              <div plxTooltip="Great tip!" triggers="manual" #t="plxTooltip" (mouseenter)="t.open()"></div>
+            </template>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+    });
+
+    describe('positioning', () => {
+
+      it('should use requested position', () => {
+        const fixture = createTestComponent(`<div plxTooltip="Great tip!" placement="left"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        const windowEl = getWindow(fixture.nativeElement);
+
+        expect(windowEl).toHaveCssClass('tooltip');
+        expect(windowEl).toHaveCssClass('tooltip-left');
+        expect(windowEl.textContent.trim()).toBe('Great tip!');
+      });
+
+      it('should properly position tooltips when a component is using the OnPush strategy', () => {
+        const fixture = createOnPushTestComponent(`<div plxTooltip="Great tip!" placement="left"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        const windowEl = getWindow(fixture.nativeElement);
+
+        expect(windowEl).toHaveCssClass('tooltip');
+        expect(windowEl).toHaveCssClass('tooltip-left');
+        expect(windowEl.textContent.trim()).toBe('Great tip!');
+      });
+    });
+
+    describe('triggers', () => {
+
+      it('should support toggle triggers', () => {
+        const fixture = createTestComponent(`<div plxTooltip="Great tip!" triggers="click"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('click', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        directive.triggerEventHandler('click', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should non-default toggle triggers', () => {
+        const fixture = createTestComponent(`<div plxTooltip="Great tip!" triggers="mouseenter:click"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        directive.triggerEventHandler('click', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should support multiple triggers', () => {
+        const fixture =
+            createTestComponent(`<div plxTooltip="Great tip!" triggers="mouseenter:mouseleave click"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        directive.triggerEventHandler('click', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should not use default for manual triggers', () => {
+        const fixture = createTestComponent(`<div plxTooltip="Great tip!" triggers="manual"></div>`);
+        const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should allow toggling for manual triggers', () => {
+        const fixture = createTestComponent(`
+                <div plxTooltip="Great tip!" triggers="manual" #t="plxTooltip"></div>
+                <button (click)="t.toggle()">T</button>`);
+        const button = fixture.nativeElement.querySelector('button');
+
+        button.click();
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        button.click();
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should allow open / close for manual triggers', () => {
+        const fixture = createTestComponent(`
+                <div plxTooltip="Great tip!" triggers="manual" #t="plxTooltip"></div>
+                <button (click)="t.open()">O</button>
+                <button (click)="t.close()">C</button>`);
+
+        const buttons = fixture.nativeElement.querySelectorAll('button');
+
+        buttons[0].click();  // open
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        buttons[1].click();  // close
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+
+      it('should not throw when open called for manual triggers and open tooltip', () => {
+        const fixture = createTestComponent(`
+                <div plxTooltip="Great tip!" triggers="manual" #t="plxTooltip"></div>
+                <button (click)="t.open()">O</button>`);
+        const button = fixture.nativeElement.querySelector('button');
+
+        button.click();  // open
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+
+        button.click();  // open
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).not.toBeNull();
+      });
+
+      it('should not throw when closed called for manual triggers and closed tooltip', () => {
+        const fixture = createTestComponent(`
+                <div plxTooltip="Great tip!" triggers="manual" #t="plxTooltip"></div>
+                <button (click)="t.close()">C</button>`);
+
+        const button = fixture.nativeElement.querySelector('button');
+
+        button.click();  // close
+        fixture.detectChanges();
+        expect(getWindow(fixture.nativeElement)).toBeNull();
+      });
+    });
+  });
+
+  describe('container', () => {
+
+    it('should be appended to the element matching the selector passed to "container"', () => {
+      const selector = 'body';
+      const fixture = createTestComponent(`<div plxTooltip="Great tip!" container="` + selector + `"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(getWindow(document.querySelector(selector))).not.toBeNull();
+    });
+
+    it('should properly destroy tooltips when the "container" option is used', () => {
+      const selector = 'body';
+      const fixture =
+          createTestComponent(`<div *ngIf="show" plxTooltip="Great tip!" container="` + selector + `"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      directive.triggerEventHandler('mouseenter', {});
+      fixture.detectChanges();
+
+      expect(getWindow(document.querySelector(selector))).not.toBeNull();
+      fixture.componentRef.instance.show = false;
+      fixture.detectChanges();
+      expect(getWindow(document.querySelector(selector))).toBeNull();
+    });
+  });
+
+  describe('visibility', () => {
+    it('should emit events when showing and hiding popover', () => {
+      const fixture = createTestComponent(
+          `<div plxTooltip="Great tip!" triggers="click" (shown)="shown()" (hidden)="hidden()"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PlxTooltip));
+
+      let shownSpy = spyOn(fixture.componentInstance, 'shown');
+      let hiddenSpy = spyOn(fixture.componentInstance, 'hidden');
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+      expect(shownSpy).toHaveBeenCalled();
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(hiddenSpy).toHaveBeenCalled();
+    });
+
+    it('should not emit close event when already closed', () => {
+      const fixture = createTestComponent(
+          `<div plxTooltip="Great tip!" triggers="manual" (shown)="shown()" (hidden)="hidden()"></div>`);
+
+      let shownSpy = spyOn(fixture.componentInstance, 'shown');
+      let hiddenSpy = spyOn(fixture.componentInstance, 'hidden');
+
+      fixture.componentInstance.tooltip.open();
+      fixture.detectChanges();
+
+      fixture.componentInstance.tooltip.open();
+      fixture.detectChanges();
+
+      expect(getWindow(fixture.nativeElement)).not.toBeNull();
+      expect(shownSpy).toHaveBeenCalled();
+      expect(shownSpy.calls.count()).toEqual(1);
+      expect(hiddenSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not emit open event when already opened', () => {
+      const fixture = createTestComponent(
+          `<div plxTooltip="Great tip!" triggers="manual" (shown)="shown()" (hidden)="hidden()"></div>`);
+
+      let shownSpy = spyOn(fixture.componentInstance, 'shown');
+      let hiddenSpy = spyOn(fixture.componentInstance, 'hidden');
+
+      fixture.componentInstance.tooltip.close();
+      fixture.detectChanges();
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(shownSpy).not.toHaveBeenCalled();
+      expect(hiddenSpy).toHaveBeenCalled();
+    });
+
+    it('should report correct visibility', () => {
+      const fixture = createTestComponent(`<div plxTooltip="Great tip!" triggers="manual"></div>`);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.tooltip.isOpen()).toBeFalsy();
+
+      fixture.componentInstance.tooltip.open();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.tooltip.isOpen()).toBeTruthy();
+
+      fixture.componentInstance.tooltip.close();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.tooltip.isOpen()).toBeFalsy();
+    });
+  });
+
+  describe('Custom config', () => {
+    let config: PlxTooltipConfig;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({imports: [PlxTooltipModule.forRoot()]});
+      TestBed.overrideComponent(TestComponent, {set: {template: `<div plxTooltip="Great tip!"></div>`}});
+    });
+
+    beforeEach(inject([PlxTooltipConfig], (c: PlxTooltipConfig) => {
+      config = c;
+      config.placement = 'bottom';
+      config.triggers = 'click';
+      config.container = 'body';
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+      const tooltip = fixture.componentInstance.tooltip;
+
+      expect(tooltip.placement).toBe(config.placement);
+      expect(tooltip.triggers).toBe(config.triggers);
+      expect(tooltip.container).toBe(config.container);
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new PlxTooltipConfig();
+    config.placement = 'bottom';
+    config.triggers = 'click';
+    config.container = 'body';
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [PlxTooltipModule.forRoot()], providers: [{provide: PlxTooltipConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = createTestComponent(`<div plxTooltip="Great tip!"></div>`);
+      const tooltip = fixture.componentInstance.tooltip;
+
+      expect(tooltip.placement).toBe(config.placement);
+      expect(tooltip.triggers).toBe(config.triggers);
+      expect(tooltip.container).toBe(config.container);
+    });
+  });
+});
+
+@Component({selector: 'test-cmpt', template: ``})
+export class TestComponent {
+  name = 'World';
+  show = true;
+
+  @ViewChild(PlxTooltip) tooltip: PlxTooltip;
+
+  shown() {}
+  hidden() {}
+}
+
+@Component({selector: 'test-onpush-cmpt', changeDetection: ChangeDetectionStrategy.OnPush, template: ``})
+export class TestOnPushComponent {
+}
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.ts
new file mode 100644
index 00000000..f52cc11d
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/paletx/plx-tooltip/plx-tooltip.ts
@@ -0,0 +1,176 @@
+import {
+	Component,
+	Directive,
+	Input,
+	Output,
+	EventEmitter,
+	ChangeDetectionStrategy,
+	OnInit,
+	OnDestroy,
+	Injector,
+	Renderer,
+	ComponentRef,
+	ElementRef,
+	TemplateRef,
+	ViewContainerRef,
+	ComponentFactoryResolver,
+	NgZone, ViewEncapsulation
+} from '@angular/core';
+import {listenToTriggers} from '../util/triggers';
+import {positionElements, getPlacement} from '../util/positioning';
+import {PopupService} from '../util/popup';
+import {PlxTooltipConfig} from './plx-tooltip-config';
+
+let nextId = 0;
+
+@Component({
+	selector: 'plx-tooltip-window',
+	encapsulation: ViewEncapsulation.None,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {'[class]': '"plx-tooltip show plx-tooltip-" + placement', 'role': 'tooltip', '[id]': 'id'},
+	template: `
+    <div class="plx-tooltip-inner"><ng-content></ng-content></div>
+    `,
+	styleUrls: ['./plx-tooltip.less']
+})
+export class PlxTooltipWindow {
+	@Input() public placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	@Input() public id: string;
+}
+
+/**
+ * A lightweight, extensible directive for fancy tooltip creation.
+ */
+@Directive({selector: '[plxTooltip]', exportAs: 'plxTooltip'})
+export class PlxTooltip implements OnInit, OnDestroy {
+    /**
+     * Placement of a tooltip. Accepts: "top", "bottom", "left", "right"
+     */
+	@Input() public placement: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Specifies events that should trigger. Supports a space separated list of event names.
+     */
+	@Input() public triggers: string;
+    /**
+     * A selector specifying the element the tooltip should be appended to.
+     * Currently only supports "body".
+     */
+	@Input() public container: string;
+    /**
+     * Emits an event when the tooltip is shown
+     */
+	@Output() public shown = new EventEmitter();
+    /**
+     * Emits an event when the tooltip is hidden
+     */
+	@Output() public hidden = new EventEmitter();
+
+	private _plxTooltip: string | TemplateRef<any>;
+	private _plxTooltipWindowId = `plx-tooltip-${nextId++}`;
+	private _popupService: PopupService<PlxTooltipWindow>;
+	private _windowRef: ComponentRef<PlxTooltipWindow>;
+	private _unregisterListenersFn;
+	private _zoneSubscription: any;
+
+	constructor(private _elementRef: ElementRef, private _renderer: Renderer, injector: Injector,
+				componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, config: PlxTooltipConfig,
+				ngZone: NgZone) {
+		this.placement = config.placement;
+		this.triggers = config.triggers;
+		this.container = config.container;
+		this._popupService = new PopupService<PlxTooltipWindow>(
+			PlxTooltipWindow, injector, viewContainerRef, _renderer, componentFactoryResolver);
+
+		this._zoneSubscription = ngZone.onStable.subscribe(() => {
+			if (this._windowRef) {
+				positionElements(
+					this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement,
+					this.container === 'body');
+					let tmpPlace = getPlacement(this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement);
+					this._windowRef.instance.placement = tmpPlace;
+					this._windowRef.changeDetectorRef.detectChanges();
+			}
+		});
+	}
+
+    /**
+     * Content to be displayed as tooltip. If falsy, the tooltip won't open.
+     */
+	@Input()
+	set plxTooltip(value: string | TemplateRef<any>) {
+		this._plxTooltip = value;
+		if (!value && this._windowRef) {
+			this.close();
+		}
+	}
+
+	get plxTooltip() {
+		return this._plxTooltip;
+	}
+
+    /**
+     * Opens an element’s tooltip. This is considered a “manual” triggering of the tooltip.
+     * The context is an optional value to be injected into the tooltip template when it is created.
+     */
+	public open(context?: any) {
+		if (!this._windowRef && this._plxTooltip) {
+			this._windowRef = this._popupService.open(this._plxTooltip, context);
+			// let tmpPlace = getPlacement(this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement);
+			this._windowRef.instance.placement = this.placement;
+			this._windowRef.instance.id = this._plxTooltipWindowId;
+
+			this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', this._plxTooltipWindowId);
+
+			if (this.container === 'body') {
+				window.document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
+			}
+
+            // we need to manually invoke change detection since events registered via
+            // Renderer::listen() - to be determined if this is a bug in the Angular itself
+			this._windowRef.changeDetectorRef.markForCheck();
+			this.shown.emit();
+		}
+	}
+
+    /**
+     * Closes an element’s tooltip. This is considered a “manual” triggering of the tooltip.
+     */
+	public close(): void {
+		if (this._windowRef !== null) {
+			this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', null);
+			this._popupService.close();
+			this._windowRef = null;
+			this.hidden.emit();
+		}
+	}
+
+    /**
+     * Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.
+     */
+	public toggle(): void {
+		if (this._windowRef) {
+			this.close();
+		} else {
+			this.open();
+		}
+	}
+
+    /**
+     * Returns whether or not the tooltip is currently being shown
+     */
+	public isOpen(): boolean {
+		return !!this._windowRef;
+	}
+
+	public ngOnInit() {
+		this._unregisterListenersFn = listenToTriggers(
+			this._renderer, this._elementRef.nativeElement, this.triggers, this.open.bind(this), this.close.bind(this),
+			this.toggle.bind(this));
+	}
+
+	public ngOnDestroy() {
+		this.close();
+		this._unregisterListenersFn();
+		this._zoneSubscription.unsubscribe();
+	}
+}