diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-datepicker')
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"> : </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"> : </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, '\\$&'); -} |