summaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-datepicker')
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/numberedFixLen.pipe.ts27
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.css366
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.html134
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.less434
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.component.ts1712
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/picker.module.ts27
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.css18
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.html14
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/pickerrange.component.ts162
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover-config.ts13
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts175
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/time.ts51
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker-config.ts19
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.less163
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/timepicker.ts558
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/popup.ts58
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/positioning.ts153
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/triggers.ts62
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/util/util.ts39
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, '\\$&');
-}