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