Replaced old implementation at root

Old project files and directories has been moved
under 'deprecated-workflow-designer'. The old project
is not built by the CI anymore, but can be still built manually.
New modules/directories have been moved up and integrated with
the CI system.

Change-Id: I1528c792bcbcce9e50bfc294a1328a20e72c91cf
Issue-ID: SDC-1559
Signed-off-by: vempo <vitaliy.emporopulo@amdocs.com>

19 files changed, 0 insertions, 4185 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
deleted file mode 100644
index 9d26b16f..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/numberedFixLen.pipe.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.css b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css
deleted file mode 100644
index 02983835..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css
+++ /dev/null
@@ -1,366 +0,0 @@
-.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 {
-  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^="icon-"]:before, [class*=" 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); */ }
-
-.icon-cancel:before {
-  content: '\e802'; }
-
-/* '' */
-.icon-up-open:before {
-  content: '\e805'; }
-
-/* '' */
-.icon-down-open:before {
-  content: '\e80b'; }
-
-/* '' */
-.icon-left-open:before {
-  content: '\e817'; }
-
-/* '' */
-.icon-right-open:before {
-  content: '\e818'; }
-
-/* '' */
-.owl-widget,
-.owl-widget * {
-  box-sizing: border-box; }
-
-.owl-widget {
-  font-size: 1em; }
-
-.owl-state-focus {
-  box-shadow: 0px 0px 5px #1f89ce; }
-
-.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 #d6d6d6;
-  background: #ffffff;
-  color: #555555; }
-
-.owl-inputtext {
-  margin: 0;
-  outline: medium none;
-  padding: .25em;
-  background: #ffffff;
-  color: #222222;
-  transition: .2s; }
-  .owl-inputtext:focus, .owl-inputtext.owl-state-focus {
-    box-shadow: 0 0 5px #1f89ce; }
-
-.owl-dateTime {
-  display: inline-block;
-  position: relative;
-  width: 100%; }
-  .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: rgba(0, 0, 0, 0.1);
-  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-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 {
-  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); }
-.owl-calendar-control .owl-calendar-controlContent .month-control {
-  font-size: 1em;
-  margin-right: .8rem;
-  font-weight: 700; }
-.owl-calendar-control .owl-calendar-controlContent .year-control {
-  font-size: .8em;
-  font-style: italic;
-  color: #999; }
-
-
-.owl-calendar tbody td .owl-calendar-selected {
-  background-color: #00abff;
-  color: #FFFFFF; }
-.owl-calendar tbody td.owl-calendar-invalid {
-  color: #acacac; }
-.owl-calendar tbody td.owl-calendar-outFocus {
-  color: #dddddd; }
-.owl-calendar tbody td.owl-calendar-hidden {
-  visibility: hidden; }
-.owl-calendar tbody td:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
-  background-color: #bae4ff;
-  color: #000000; }
-
-.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; }
-
-.owl-weekdays th.owl-weekday {
-  height: 1em;
-  line-height: 2em;
-  text-align: center;
-  font-size: .7em;
-  color: #999; }
-
-.owl-days td.owl-day {
-  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;
-    border-top: 0.5em solid #21a7ff;
-    border-left: .5em solid transparent;
-  }
-
-.owl-timer-wrapper {
-  height: 5.4em;
-  background-color: rgba(0, 0, 0, 0.1); }
-  .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: #00abff;
-    background-image: none;
-    background-color: transparent;
-    border-color: #00abff; }
-    .owl-timer-wrapper .owl-meridian-btn:hover {
-      color: #FFFFFF;
-      background-color: #00abff;
-      border-color: #00abff; }
-
-.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: #9a9a9a;
-}
-.plx-btn{color: #00abff;
-min-width: 80px;
-letter-spacing: 1px;
-padding: 0px 16px;
-height: 32px;
-font-size: 12px;
-cursor: pointer;
-text-align: center;
-white-space: nowrap;
-margin-right: 10px;
-vertical-align: middle;
-border: 1px solid #d9d9d9;
-background-color: #fff;
-border-radius: 3px;
-line-height: 30px;
-}
-.plx-btn-xs{
-  height: 24px;
-  padding: 0px 12px;
-  min-width: 60px;
-  margin-right: 5px;
-  line-height: 22px;
-}
-/*# sourceMappingURL=picker.css.map */
-
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
deleted file mode 100644
index 8e4102c2..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<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
deleted file mode 100644
index 8e50660b..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.less
+++ /dev/null
@@ -1,434 +0,0 @@
-@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
deleted file mode 100644
index 493e0cb2..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.ts
+++ /dev/null
@@ -1,1712 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 0511ad71..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.css b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css
deleted file mode 100644
index 2fb5b2b4..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.datepickboxleft
-{
-    width:45%;
-    margin-right: 3%;
-    float: left;
-}
-.datepickboxright
-{
-    width:45%;
-    margin-left: 3%;
-    float: left;
-}
-.datepickboxto{
-    width:4%;  
-    float: left;
-    margin-top: 6px; 
-    text-align: center;
-}
\ No newline at end of file
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
deleted file mode 100644
index 2b1986fe..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<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
deleted file mode 100644
index a84e0987..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 5ac773c5..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover-config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 3d054120..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-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
deleted file mode 100644
index ab31a498..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/time.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-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
deleted file mode 100644
index 8b752866..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker-config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 60acfa6b..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.less
+++ /dev/null
@@ -1,163 +0,0 @@
-@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
deleted file mode 100644
index 45dd7a4a..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.ts
+++ /dev/null
@@ -1,558 +0,0 @@
-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
deleted file mode 100644
index 56c26d62..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/popup.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-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
deleted file mode 100644
index ed9005c1..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/positioning.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-// 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
deleted file mode 100644
index 8197de5b..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/triggers.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-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
deleted file mode 100644
index fcabe960..00000000
--- a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/util.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-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, '\\$&');
-}