@syncfusion/ej2-inputs 20.4.54 → 21.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +0 -35
- package/README.md +196 -119
- package/dist/ej2-inputs.min.js +2 -2
- package/dist/ej2-inputs.umd.min.js +2 -2
- package/dist/ej2-inputs.umd.min.js.map +1 -1
- package/dist/es6/ej2-inputs.es2015.js +167 -119
- package/dist/es6/ej2-inputs.es2015.js.map +1 -1
- package/dist/es6/ej2-inputs.es5.js +161 -113
- package/dist/es6/ej2-inputs.es5.js.map +1 -1
- package/dist/global/ej2-inputs.min.js +2 -2
- package/dist/global/ej2-inputs.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +10 -10
- package/src/color-picker/color-picker.d.ts +6 -1
- package/src/color-picker/color-picker.js +21 -4
- package/src/common/signature-base.js +6 -3
- package/src/form-validator/form-validator.js +23 -21
- package/src/input/input.js +10 -10
- package/src/maskedtextbox/base/mask-base.js +5 -5
- package/src/maskedtextbox/maskedtextbox/maskedtextbox.js +3 -3
- package/src/numerictextbox/numerictextbox.js +4 -4
- package/src/rating/rating-model.d.ts +33 -11
- package/src/rating/rating.d.ts +25 -1
- package/src/rating/rating.js +64 -45
- package/src/slider/slider-model.d.ts +41 -6
- package/src/slider/slider.d.ts +113 -8
- package/src/slider/slider.js +8 -3
- package/src/textbox/textbox.js +4 -2
- package/src/uploader/uploader-model.d.ts +1 -1
- package/src/uploader/uploader.js +13 -13
- package/styles/bootstrap-dark.css +6 -0
- package/styles/bootstrap.css +6 -0
- package/styles/bootstrap4.css +6 -0
- package/styles/bootstrap5-dark.css +10 -4
- package/styles/bootstrap5.css +10 -4
- package/styles/color-picker/_layout.scss +78 -6
- package/styles/color-picker/_theme.scss +3 -0
- package/styles/color-picker/bootstrap-dark.css +6 -0
- package/styles/color-picker/bootstrap.css +6 -0
- package/styles/color-picker/bootstrap4.css +6 -0
- package/styles/color-picker/bootstrap5-dark.css +6 -0
- package/styles/color-picker/bootstrap5.css +6 -0
- package/styles/color-picker/fabric-dark.css +6 -0
- package/styles/color-picker/fabric.css +6 -0
- package/styles/color-picker/fluent-dark.css +6 -0
- package/styles/color-picker/fluent.css +6 -0
- package/styles/color-picker/highcontrast-light.css +6 -0
- package/styles/color-picker/highcontrast.css +6 -0
- package/styles/color-picker/material-dark.css +6 -0
- package/styles/color-picker/material.css +6 -0
- package/styles/color-picker/tailwind-dark.css +6 -0
- package/styles/color-picker/tailwind.css +6 -0
- package/styles/fabric-dark.css +6 -0
- package/styles/fabric.css +6 -0
- package/styles/fluent-dark.css +6 -0
- package/styles/fluent.css +6 -0
- package/styles/highcontrast-light.css +6 -0
- package/styles/highcontrast.css +6 -0
- package/styles/input/_bootstrap5-definition.scss +2 -2
- package/styles/input/_fluent-definition.scss +5 -5
- package/styles/input/_layout.scss +445 -445
- package/styles/input/_tailwind-definition.scss +14 -14
- package/styles/input/_theme.scss +218 -199
- package/styles/input/material-dark.css +1 -1
- package/styles/input/material.css +1 -1
- package/styles/maskedtextbox/_bootstrap5-definition.scss +2 -2
- package/styles/maskedtextbox/_fluent-definition.scss +2 -2
- package/styles/material-dark.css +7 -5
- package/styles/material.css +7 -1
- package/styles/numerictextbox/icons/_material3.scss +3 -3
- package/styles/rating/_bootstrap5-definition.scss +12 -15
- package/styles/rating/_fluent-definition.scss +12 -15
- package/styles/rating/_tailwind-definition.scss +12 -15
- package/styles/rating/_theme.scss +14 -2
- package/styles/rating/tailwind-dark.css +1 -1
- package/styles/rating/tailwind.css +1 -1
- package/styles/slider/_layout.scss +44 -25
- package/styles/slider/_theme.scss +6 -1
- package/styles/tailwind-dark.css +8 -2
- package/styles/tailwind.css +8 -2
- package/styles/uploader/_bootstrap5-definition.scss +12 -12
- package/styles/uploader/_fluent-definition.scss +10 -10
- package/styles/uploader/_layout.scss +7 -2
- package/styles/uploader/_tailwind-definition.scss +10 -10
- package/styles/uploader/_theme.scss +13 -3
- package/styles/uploader/bootstrap5-dark.css +4 -4
- package/styles/uploader/bootstrap5.css +4 -4
- package/styles/uploader/material-dark.css +0 -4
- package/styles/uploader/tailwind-dark.css +1 -1
- package/styles/uploader/tailwind.css +1 -1
- package/styles/color-picker/_material3-definition.scss +0 -133
- package/styles/input/_material3-definition.scss +0 -336
- package/styles/maskedtextbox/_material3-definition.scss +0 -7
- package/styles/numerictextbox/_material3-definition.scss +0 -3
- package/styles/rating/_material3-definition.scss +0 -46
- package/styles/signature/_material3-definition.scss +0 -3
- package/styles/slider/_material3-definition.scss +0 -90
- package/styles/textbox/_material3-definition.scss +0 -1
- package/styles/uploader/_material3-definition.scss +0 -216
package/dist/global/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: index.d.ts
|
|
3
|
-
* version :
|
|
3
|
+
* version : 21.1.35
|
|
4
4
|
* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
|
|
5
5
|
* Use of this code is subject to the terms of our license.
|
|
6
6
|
* A copy of the current license can be obtained at any time by e-mailing
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"_from": "@syncfusion/ej2-inputs@*",
|
|
3
|
-
"_id": "@syncfusion/ej2-inputs@
|
|
3
|
+
"_id": "@syncfusion/ej2-inputs@18.73.6",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
5
|
+
"_integrity": "sha512-WB1/kJo+OlqCDJJM3j1zp8FeX+PzU47yGOy2aVgakpqjLkImzuZzCJ9y+12OSpTGGwUu3a20xCJfcxC3OsRlbA==",
|
|
6
6
|
"_location": "/@syncfusion/ej2-inputs",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
@@ -39,19 +39,19 @@
|
|
|
39
39
|
"/@syncfusion/ej2-schedule",
|
|
40
40
|
"/@syncfusion/ej2-vue-inputs"
|
|
41
41
|
],
|
|
42
|
-
"_resolved": "https://nexus.syncfusion.com/repository/ej2-
|
|
43
|
-
"_shasum": "
|
|
42
|
+
"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.73.6.tgz",
|
|
43
|
+
"_shasum": "2315f6e283e561a3fffbf43013ec7970c6778981",
|
|
44
44
|
"_spec": "@syncfusion/ej2-inputs@*",
|
|
45
|
-
"_where": "/jenkins/workspace/
|
|
45
|
+
"_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
|
|
46
46
|
"author": {
|
|
47
47
|
"name": "Syncfusion Inc."
|
|
48
48
|
},
|
|
49
49
|
"bundleDependencies": false,
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@syncfusion/ej2-base": "~
|
|
52
|
-
"@syncfusion/ej2-buttons": "~
|
|
53
|
-
"@syncfusion/ej2-popups": "~
|
|
54
|
-
"@syncfusion/ej2-splitbuttons": "~
|
|
51
|
+
"@syncfusion/ej2-base": "~21.1.35",
|
|
52
|
+
"@syncfusion/ej2-buttons": "~21.1.35",
|
|
53
|
+
"@syncfusion/ej2-popups": "~21.1.35",
|
|
54
|
+
"@syncfusion/ej2-splitbuttons": "~21.1.35"
|
|
55
55
|
},
|
|
56
56
|
"deprecated": false,
|
|
57
57
|
"description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
"url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
|
|
120
120
|
},
|
|
121
121
|
"typings": "index.d.ts",
|
|
122
|
-
"version": "
|
|
122
|
+
"version": "21.1.35",
|
|
123
123
|
"sideEffects": false,
|
|
124
124
|
"homepage": "https://www.syncfusion.com/javascript-ui-controls"
|
|
125
125
|
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { BaseEventArgs, Component, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
|
|
2
2
|
import { ColorPickerModel } from './color-picker-model';
|
|
3
3
|
/**
|
|
4
|
-
* ColorPicker Mode
|
|
4
|
+
* Defines the ColorPicker Mode
|
|
5
|
+
* ```props
|
|
6
|
+
* Picker :- Specifies that the ColorPicker component should be rendered with the picker mode.
|
|
7
|
+
* Palette :- Specifies that the ColorPicker component should be rendered with the palette mode.
|
|
8
|
+
* ```
|
|
5
9
|
*/
|
|
6
10
|
export declare type ColorPickerMode = 'Picker' | 'Palette';
|
|
7
11
|
/**
|
|
@@ -266,6 +270,7 @@ export declare class ColorPicker extends Component<HTMLInputElement> implements
|
|
|
266
270
|
protected wireEvents(): void;
|
|
267
271
|
private formResetHandler;
|
|
268
272
|
private addCtrlSwitchEvent;
|
|
273
|
+
private ctrlBtnKeyDown;
|
|
269
274
|
private pickerKeyDown;
|
|
270
275
|
private enterKeyHandler;
|
|
271
276
|
private closePopup;
|
|
@@ -145,7 +145,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
145
145
|
wrapper.classList.add(RTL);
|
|
146
146
|
}
|
|
147
147
|
if (this.cssClass) {
|
|
148
|
-
addClass([wrapper], this.cssClass.split(' '));
|
|
148
|
+
addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
|
|
149
149
|
}
|
|
150
150
|
this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });
|
|
151
151
|
this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });
|
|
@@ -205,7 +205,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
205
205
|
var popupEle = this.getPopupEle();
|
|
206
206
|
addClass([popupEle], 'e-colorpicker-popup');
|
|
207
207
|
if (this.cssClass) {
|
|
208
|
-
addClass([popupEle], this.cssClass.split(' '));
|
|
208
|
+
addClass([popupEle], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
|
|
209
209
|
}
|
|
210
210
|
if (Browser.isDevice) {
|
|
211
211
|
var popupInst = this.getPopupInst();
|
|
@@ -844,6 +844,10 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
844
844
|
if (this.isPicker()) {
|
|
845
845
|
var dragHandler = this.getDragHandler();
|
|
846
846
|
EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);
|
|
847
|
+
var ctrlBtn = select('.' + CTRLBTN, this.container);
|
|
848
|
+
if (ctrlBtn) {
|
|
849
|
+
EventHandler.add(ctrlBtn, 'keydown', this.ctrlBtnKeyDown, this);
|
|
850
|
+
}
|
|
847
851
|
EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);
|
|
848
852
|
if (this.modeSwitcher || this.showButtons) {
|
|
849
853
|
this.addCtrlSwitchEvent();
|
|
@@ -865,6 +869,16 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
865
869
|
EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);
|
|
866
870
|
}
|
|
867
871
|
};
|
|
872
|
+
ColorPicker.prototype.ctrlBtnKeyDown = function (e) {
|
|
873
|
+
if (e.keyCode === 13) {
|
|
874
|
+
var applyBtn = select('.' + APPLY, this.container);
|
|
875
|
+
if (applyBtn) {
|
|
876
|
+
var cValue = this.rgbToHex(this.rgb);
|
|
877
|
+
this.triggerChangeEvent(cValue);
|
|
878
|
+
}
|
|
879
|
+
this.splitBtn.element.focus();
|
|
880
|
+
}
|
|
881
|
+
};
|
|
868
882
|
ColorPicker.prototype.pickerKeyDown = function (e) {
|
|
869
883
|
switch (e.keyCode) {
|
|
870
884
|
case 39:
|
|
@@ -889,7 +903,6 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
889
903
|
ColorPicker.prototype.enterKeyHandler = function (value, e) {
|
|
890
904
|
this.triggerChangeEvent(value);
|
|
891
905
|
if (!this.inline) {
|
|
892
|
-
this.closePopup(e);
|
|
893
906
|
this.splitBtn.element.focus();
|
|
894
907
|
}
|
|
895
908
|
};
|
|
@@ -1417,6 +1430,10 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
1417
1430
|
if (this.isPicker()) {
|
|
1418
1431
|
var dragHandler = this.getDragHandler();
|
|
1419
1432
|
EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);
|
|
1433
|
+
var ctrlBtn = select('.' + CTRLBTN, this.container);
|
|
1434
|
+
if (ctrlBtn) {
|
|
1435
|
+
EventHandler.remove(ctrlBtn, 'keydown', this.ctrlBtnKeyDown);
|
|
1436
|
+
}
|
|
1420
1437
|
EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);
|
|
1421
1438
|
if (this.modeSwitcher || this.showButtons) {
|
|
1422
1439
|
EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);
|
|
@@ -1658,7 +1675,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
|
1658
1675
|
removeClass([wrapper, popupWrapper], oldProp.split(' '));
|
|
1659
1676
|
}
|
|
1660
1677
|
if (newProp) {
|
|
1661
|
-
addClass([wrapper, popupWrapper], newProp.split(' '));
|
|
1678
|
+
addClass([wrapper, popupWrapper], newProp.replace(/\s+/g, ' ').trim().split(' '));
|
|
1662
1679
|
}
|
|
1663
1680
|
};
|
|
1664
1681
|
ColorPicker.prototype.changeRtlProps = function (newProp) {
|
|
@@ -90,6 +90,10 @@ var SignatureBase = /** @class */ (function (_super) {
|
|
|
90
90
|
this.element.width = this.element.offsetWidth;
|
|
91
91
|
this.isResponsive = true;
|
|
92
92
|
}
|
|
93
|
+
else if (this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1) {
|
|
94
|
+
this.element.height = this.element.offsetHeight;
|
|
95
|
+
this.element.width = this.element.offsetWidth;
|
|
96
|
+
}
|
|
93
97
|
this.canvasContext.scale(1, 1);
|
|
94
98
|
this.canvasContext.fillStyle = this.strokeColor;
|
|
95
99
|
if (this.backgroundImage) {
|
|
@@ -183,7 +187,6 @@ var SignatureBase = /** @class */ (function (_super) {
|
|
|
183
187
|
this.canvasContext.canvas.width = this.element.offsetWidth;
|
|
184
188
|
this.canvasContext.canvas.height = this.element.offsetHeight;
|
|
185
189
|
this.canvasContext.scale(1, 1);
|
|
186
|
-
this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
|
|
187
190
|
var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
|
|
188
191
|
for (var i = 0; i < this.signRatioPointsColl.length; i++) {
|
|
189
192
|
this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);
|
|
@@ -417,11 +420,11 @@ var SignatureBase = /** @class */ (function (_super) {
|
|
|
417
420
|
SignatureBase.prototype.enableOrDisable = function (isDisable) {
|
|
418
421
|
this.disabled = isDisable;
|
|
419
422
|
if (isDisable) {
|
|
420
|
-
this.canvasContext.canvas.style.filter =
|
|
423
|
+
this.canvasContext.canvas.style.filter = 'opacity(0.5)';
|
|
421
424
|
this.isRead(true);
|
|
422
425
|
}
|
|
423
426
|
else {
|
|
424
|
-
this.canvasContext.canvas.style.filter =
|
|
427
|
+
this.canvasContext.canvas.style.filter = '';
|
|
425
428
|
this.isRead(false);
|
|
426
429
|
}
|
|
427
430
|
};
|
|
@@ -29,6 +29,7 @@ export var regex = {
|
|
|
29
29
|
/* eslint-disable no-useless-escape */
|
|
30
30
|
EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +
|
|
31
31
|
'|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),
|
|
32
|
+
/* eslint-disable-next-line security/detect-unsafe-regex */
|
|
32
33
|
URL: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/m,
|
|
33
34
|
DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),
|
|
34
35
|
DIGITS: new RegExp('^[0-9]*$'),
|
|
@@ -146,10 +147,10 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
146
147
|
if (name) {
|
|
147
148
|
// eslint-disable-next-line no-prototype-builtins
|
|
148
149
|
if (this.rules.hasOwnProperty(name)) {
|
|
149
|
-
extend(this.rules[name], rules, {});
|
|
150
|
+
extend(this.rules["" + name], rules, {});
|
|
150
151
|
}
|
|
151
152
|
else {
|
|
152
|
-
this.rules[name] = rules;
|
|
153
|
+
this.rules["" + name] = rules;
|
|
153
154
|
}
|
|
154
155
|
}
|
|
155
156
|
};
|
|
@@ -165,12 +166,12 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
165
166
|
if (!name && !rules) {
|
|
166
167
|
this.rules = {};
|
|
167
168
|
}
|
|
168
|
-
else if (this.rules[name] && !rules) {
|
|
169
|
-
delete this.rules[name];
|
|
169
|
+
else if (this.rules["" + name] && !rules) {
|
|
170
|
+
delete this.rules["" + name];
|
|
170
171
|
}
|
|
171
|
-
else if (!isNullOrUndefined(this.rules[name] && rules)) {
|
|
172
|
+
else if (!isNullOrUndefined(this.rules["" + name] && rules)) {
|
|
172
173
|
for (var i = 0; i < rules.length; i++) {
|
|
173
|
-
delete this.rules[name][rules[i]];
|
|
174
|
+
delete this.rules["" + name][rules[parseInt(i.toString())]];
|
|
174
175
|
}
|
|
175
176
|
}
|
|
176
177
|
else {
|
|
@@ -268,7 +269,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
268
269
|
var key = _a[_i];
|
|
269
270
|
this.l10n.setLocale(this.locale);
|
|
270
271
|
var value = this.l10n.getConstant(key);
|
|
271
|
-
this.localyMessage[key] = value;
|
|
272
|
+
this.localyMessage["" + key] = value;
|
|
272
273
|
}
|
|
273
274
|
};
|
|
274
275
|
/**
|
|
@@ -417,7 +418,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
417
418
|
var customMessage;
|
|
418
419
|
if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {
|
|
419
420
|
this.getInputElement(input.name);
|
|
420
|
-
customMessage = this.getErrorMessage(this.rules[input.name][ruleName], ruleName);
|
|
421
|
+
customMessage = this.getErrorMessage(this.rules[input.name]["" + ruleName], ruleName);
|
|
421
422
|
}
|
|
422
423
|
if (message) {
|
|
423
424
|
value = [value, message];
|
|
@@ -428,7 +429,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
428
429
|
else if (customMessage) {
|
|
429
430
|
value = [value, customMessage];
|
|
430
431
|
}
|
|
431
|
-
ruleCon[ruleName] = value;
|
|
432
|
+
ruleCon["" + ruleName] = value;
|
|
432
433
|
};
|
|
433
434
|
// Wire events to the form elements
|
|
434
435
|
FormValidator.prototype.wireEvents = function () {
|
|
@@ -521,10 +522,10 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
521
522
|
};
|
|
522
523
|
// Validate each rule based on input element name
|
|
523
524
|
FormValidator.prototype.validateRules = function (name) {
|
|
524
|
-
if (!this.rules[name]) {
|
|
525
|
+
if (!this.rules["" + name]) {
|
|
525
526
|
return;
|
|
526
527
|
}
|
|
527
|
-
var rules = Object.keys(this.rules[name]);
|
|
528
|
+
var rules = Object.keys(this.rules["" + name]);
|
|
528
529
|
var hiddenType = false;
|
|
529
530
|
var validateHiddenType = false;
|
|
530
531
|
var vhPos = rules.indexOf('validateHidden');
|
|
@@ -546,7 +547,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
546
547
|
this.getErrorElement(name);
|
|
547
548
|
for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {
|
|
548
549
|
var rule = rules_2[_i];
|
|
549
|
-
var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);
|
|
550
|
+
var errorMessage = this.getErrorMessage(this.rules["" + name]["" + rule], rule);
|
|
550
551
|
var errorRule = { name: name, message: errorMessage };
|
|
551
552
|
var eventArgs = {
|
|
552
553
|
inputName: name,
|
|
@@ -592,7 +593,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
592
593
|
};
|
|
593
594
|
// Update the optional validation status
|
|
594
595
|
FormValidator.prototype.optionalValidationStatus = function (name, refer) {
|
|
595
|
-
if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
|
|
596
|
+
if (!this.rules["" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
|
|
596
597
|
this.infoElement.innerHTML = this.inputElement.value;
|
|
597
598
|
this.infoElement.setAttribute('aria-invalid', 'false');
|
|
598
599
|
refer.status = '';
|
|
@@ -601,9 +602,9 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
601
602
|
};
|
|
602
603
|
// Check the input element whether it's value satisfy the validation rule or not
|
|
603
604
|
FormValidator.prototype.isValid = function (name, rule) {
|
|
604
|
-
var params = this.rules[name][rule];
|
|
605
|
+
var params = this.rules["" + name]["" + rule];
|
|
605
606
|
var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;
|
|
606
|
-
var currentRule = this.rules[name][rule];
|
|
607
|
+
var currentRule = this.rules["" + name]["" + rule];
|
|
607
608
|
var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };
|
|
608
609
|
this.trigger('validationBegin', args);
|
|
609
610
|
if (!args.param && rule === 'required') {
|
|
@@ -620,7 +621,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
620
621
|
return selectAll('input[name="' + name + '"]:checked', this.element).length > 0;
|
|
621
622
|
}
|
|
622
623
|
else {
|
|
623
|
-
return FormValidator_1.checkValidator[rule](args);
|
|
624
|
+
return FormValidator_1.checkValidator["" + rule](args);
|
|
624
625
|
}
|
|
625
626
|
};
|
|
626
627
|
// Return default error message or custom error message
|
|
@@ -628,12 +629,12 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
628
629
|
var message = this.inputElement.getAttribute('data-' + rule + '-message') ?
|
|
629
630
|
this.inputElement.getAttribute('data-' + rule + '-message') :
|
|
630
631
|
(ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :
|
|
631
|
-
(Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[rule] : this.defaultMessages[rule];
|
|
632
|
+
(Object.keys(this.localyMessage).length !== 0) ? this.localyMessage["" + rule] : this.defaultMessages["" + rule];
|
|
632
633
|
var formats = message.match(/{(\d)}/g);
|
|
633
634
|
if (!isNullOrUndefined(formats)) {
|
|
634
635
|
for (var i = 0; i < formats.length; i++) {
|
|
635
|
-
var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;
|
|
636
|
-
message = message.replace(formats[i], value);
|
|
636
|
+
var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;
|
|
637
|
+
message = message.replace(formats[parseInt(i.toString())], value);
|
|
637
638
|
}
|
|
638
639
|
}
|
|
639
640
|
return message;
|
|
@@ -685,7 +686,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
685
686
|
// Remove existing rule from errorRules object
|
|
686
687
|
FormValidator.prototype.removeErrorRules = function (name) {
|
|
687
688
|
for (var i = 0; i < this.errorRules.length; i++) {
|
|
688
|
-
var rule = this.errorRules[i];
|
|
689
|
+
var rule = this.errorRules[parseInt(i.toString())];
|
|
689
690
|
if (rule.name === name) {
|
|
690
691
|
this.errorRules.splice(i, 1);
|
|
691
692
|
}
|
|
@@ -709,7 +710,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
709
710
|
};
|
|
710
711
|
// Check whether the input element have required rule and its value is not empty
|
|
711
712
|
FormValidator.prototype.checkRequired = function (name) {
|
|
712
|
-
if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
|
|
713
|
+
if (!this.rules["" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
|
|
713
714
|
this.infoElement.innerHTML = this.inputElement.value;
|
|
714
715
|
this.infoElement.setAttribute('aria-invalid', 'false');
|
|
715
716
|
this.hideMessage(name);
|
|
@@ -787,6 +788,7 @@ var FormValidator = /** @class */ (function (_super) {
|
|
|
787
788
|
}
|
|
788
789
|
},
|
|
789
790
|
regex: function (option) {
|
|
791
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
790
792
|
return new RegExp(option.param).test(option.value);
|
|
791
793
|
},
|
|
792
794
|
equalTo: function (option) {
|
package/src/input/input.js
CHANGED
|
@@ -302,7 +302,7 @@ export var Input;
|
|
|
302
302
|
}
|
|
303
303
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
304
304
|
function wireClearBtnEvents(element, button, container) {
|
|
305
|
-
if (isBindClearAction
|
|
305
|
+
if (isBindClearAction === undefined || isBindClearAction) {
|
|
306
306
|
button.addEventListener('click', function (event) {
|
|
307
307
|
if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
|
|
308
308
|
event.preventDefault();
|
|
@@ -431,7 +431,7 @@ export var Input;
|
|
|
431
431
|
* @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
|
|
432
432
|
*/
|
|
433
433
|
function calculateWidth(element, container, moduleName) {
|
|
434
|
-
var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
|
|
434
|
+
var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
|
|
435
435
|
if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
|
|
436
436
|
if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
|
|
437
437
|
container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
|
|
@@ -633,10 +633,10 @@ export var Input;
|
|
|
633
633
|
parentElement.classList.add(CLASSNAMES.DISABLE);
|
|
634
634
|
}
|
|
635
635
|
if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
|
|
636
|
-
parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];
|
|
636
|
+
parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs["" + key];
|
|
637
637
|
}
|
|
638
638
|
else {
|
|
639
|
-
element.setAttribute(key, attrs[key]);
|
|
639
|
+
element.setAttribute(key, attrs["" + key]);
|
|
640
640
|
}
|
|
641
641
|
}
|
|
642
642
|
}
|
|
@@ -738,7 +738,7 @@ export var Input;
|
|
|
738
738
|
*/
|
|
739
739
|
function setRipple(isRipple, inputObj) {
|
|
740
740
|
for (var i = 0; i < inputObj.length; i++) {
|
|
741
|
-
_internalRipple(isRipple, inputObj[i].container);
|
|
741
|
+
_internalRipple(isRipple, inputObj[parseInt(i.toString())].container);
|
|
742
742
|
}
|
|
743
743
|
}
|
|
744
744
|
Input.setRipple = setRipple;
|
|
@@ -749,14 +749,14 @@ export var Input;
|
|
|
749
749
|
container.querySelectorAll('.e-input-group-icon') : argsButton;
|
|
750
750
|
if (isRipple && buttons.length > 0) {
|
|
751
751
|
for (var index = 0; index < buttons.length; index++) {
|
|
752
|
-
buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);
|
|
753
|
-
buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);
|
|
752
|
+
buttons[parseInt(index.toString())].addEventListener('mousedown', _onMouseDownRipple, false);
|
|
753
|
+
buttons[parseInt(index.toString())].addEventListener('mouseup', _onMouseUpRipple, false);
|
|
754
754
|
}
|
|
755
755
|
}
|
|
756
756
|
else if (buttons.length > 0) {
|
|
757
757
|
for (var index = 0; index < buttons.length; index++) {
|
|
758
|
-
buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);
|
|
759
|
-
buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);
|
|
758
|
+
buttons[parseInt(index.toString())].removeEventListener('mousedown', _onMouseDownRipple, this);
|
|
759
|
+
buttons[parseInt(index.toString())].removeEventListener('mouseup', _onMouseUpRipple, this);
|
|
760
760
|
}
|
|
761
761
|
}
|
|
762
762
|
}
|
|
@@ -844,7 +844,7 @@ export var Input;
|
|
|
844
844
|
var result = container.querySelectorAll(inputElement.tagName + ' ~ *');
|
|
845
845
|
innerWrapper.appendChild(inputElement);
|
|
846
846
|
for (var i = 0; i < result.length; i++) {
|
|
847
|
-
innerWrapper.appendChild(result[i]);
|
|
847
|
+
innerWrapper.appendChild(result[parseInt(i.toString())]);
|
|
848
848
|
}
|
|
849
849
|
}
|
|
850
850
|
innerWrapper.parentNode.insertBefore(button, innerWrapper);
|
|
@@ -80,7 +80,7 @@ export function createMask() {
|
|
|
80
80
|
if (!isNullOrUndefined(this.customCharacters)) {
|
|
81
81
|
for (var i = 0; i < this.promptMask.length; i++) {
|
|
82
82
|
if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {
|
|
83
|
-
|
|
83
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
84
84
|
this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);
|
|
85
85
|
}
|
|
86
86
|
}
|
|
@@ -380,7 +380,7 @@ export function maskInputBlurHandler(event) {
|
|
|
380
380
|
event: event,
|
|
381
381
|
value: this.value,
|
|
382
382
|
maskedValue: this.element.value,
|
|
383
|
-
container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
|
|
383
|
+
container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
|
|
384
384
|
};
|
|
385
385
|
this.trigger('blur', this.blurEventArgs);
|
|
386
386
|
if (this.mask) {
|
|
@@ -843,13 +843,13 @@ function validateValue(key, isCtrlKey, event) {
|
|
|
843
843
|
var customValStr = this.customCharacters["" + curMask];
|
|
844
844
|
var customValArr = customValStr.split(',');
|
|
845
845
|
for (var i = 0; i < customValArr.length; i++) {
|
|
846
|
-
|
|
846
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
847
847
|
if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {
|
|
848
848
|
allowText = true;
|
|
849
849
|
break;
|
|
850
850
|
}
|
|
851
851
|
}
|
|
852
|
-
|
|
852
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
853
853
|
}
|
|
854
854
|
else if (!isNullOrUndefined(this.regExpCollec["" + curMask]) && keyValue.match(new RegExp(this.regExpCollec["" + curMask]))
|
|
855
855
|
&& this.promptMask[startIndex] === this.promptChar) {
|
|
@@ -857,7 +857,7 @@ function validateValue(key, isCtrlKey, event) {
|
|
|
857
857
|
}
|
|
858
858
|
else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['
|
|
859
859
|
&& this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'
|
|
860
|
-
|
|
860
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
861
861
|
&& keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {
|
|
862
862
|
allowText = true;
|
|
863
863
|
}
|
|
@@ -378,13 +378,13 @@ var MaskedTextBox = /** @class */ (function (_super) {
|
|
|
378
378
|
else {
|
|
379
379
|
this.promptChar = '_';
|
|
380
380
|
}
|
|
381
|
-
|
|
381
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
382
382
|
var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
|
|
383
383
|
if (this.promptMask === this.element.value) {
|
|
384
|
-
|
|
384
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
385
385
|
value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
|
|
386
386
|
}
|
|
387
|
-
|
|
387
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
388
388
|
this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
|
|
389
389
|
this.undoCollec = this.redoCollec = [];
|
|
390
390
|
setElementValue.call(this, value);
|
|
@@ -161,7 +161,7 @@ var NumericTextBox = /** @class */ (function (_super) {
|
|
|
161
161
|
if (this.element.hasAttribute('data-val')) {
|
|
162
162
|
this.element.setAttribute('data-val', 'false');
|
|
163
163
|
}
|
|
164
|
-
if (!isNullOrUndefined(closest(this.element,
|
|
164
|
+
if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
|
|
165
165
|
this.enabled = false;
|
|
166
166
|
}
|
|
167
167
|
this.renderComplete();
|
|
@@ -855,7 +855,7 @@ var NumericTextBox = /** @class */ (function (_super) {
|
|
|
855
855
|
}
|
|
856
856
|
var currentChar = String.fromCharCode(event.which);
|
|
857
857
|
var decimalSeparator = getValue('decimal', getNumericObject(this.locale));
|
|
858
|
-
var isAlterNumPadDecimalChar = event.code ===
|
|
858
|
+
var isAlterNumPadDecimalChar = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;
|
|
859
859
|
//EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different
|
|
860
860
|
if (isAlterNumPadDecimalChar) {
|
|
861
861
|
currentChar = decimalSeparator;
|
|
@@ -892,7 +892,7 @@ var NumericTextBox = /** @class */ (function (_super) {
|
|
|
892
892
|
if (this.decimals && this.validateDecimalOnType) {
|
|
893
893
|
fractionRule = '{0,' + this.decimals + '}';
|
|
894
894
|
}
|
|
895
|
-
|
|
895
|
+
/* eslint-disable-next-line security/detect-non-literal-regexp */
|
|
896
896
|
return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule +
|
|
897
897
|
')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
|
|
898
898
|
};
|
|
@@ -1005,7 +1005,7 @@ var NumericTextBox = /** @class */ (function (_super) {
|
|
|
1005
1005
|
};
|
|
1006
1006
|
NumericTextBox.prototype.touchMoveOnSpinner = function (event) {
|
|
1007
1007
|
var target;
|
|
1008
|
-
if (event.type ===
|
|
1008
|
+
if (event.type === 'touchmove') {
|
|
1009
1009
|
var touchEvent = event.touches;
|
|
1010
1010
|
target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);
|
|
1011
1011
|
}
|
|
@@ -10,7 +10,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
10
10
|
/**
|
|
11
11
|
* Defines whether to show or hide the reset button in a rating component.
|
|
12
12
|
* When set to "true", the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.
|
|
13
|
-
*
|
|
13
|
+
*
|
|
14
|
+
* {% codeBlock src='rating/allowReset/index.md' %}{% endcodeBlock %}
|
|
15
|
+
*
|
|
14
16
|
* @default false
|
|
15
17
|
*/
|
|
16
18
|
allowReset?: boolean;
|
|
@@ -58,7 +60,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
58
60
|
|
|
59
61
|
/**
|
|
60
62
|
* Defines the template that defines the appearance of each rated item in a rating component.
|
|
61
|
-
*
|
|
63
|
+
*
|
|
64
|
+
* {% codeBlock src='rating/fullTemplate/index.md' %}{% endcodeBlock %}
|
|
65
|
+
*
|
|
62
66
|
* @default ''
|
|
63
67
|
*/
|
|
64
68
|
fullTemplate?: string;
|
|
@@ -80,7 +84,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
80
84
|
* * Bottom
|
|
81
85
|
* * Left
|
|
82
86
|
* * Right
|
|
83
|
-
*
|
|
87
|
+
*
|
|
88
|
+
* {% codeBlock src='rating/labelPosition/index.md' %}{% endcodeBlock %}
|
|
89
|
+
*
|
|
84
90
|
* @isenumeration true
|
|
85
91
|
* @default LabelPosition.Right
|
|
86
92
|
* @asptype LabelPosition
|
|
@@ -89,7 +95,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
89
95
|
|
|
90
96
|
/**
|
|
91
97
|
* Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.
|
|
92
|
-
*
|
|
98
|
+
*
|
|
99
|
+
* {% codeBlock src='rating/labelTemplate/index.md' %}{% endcodeBlock %}
|
|
100
|
+
*
|
|
93
101
|
* @default ''
|
|
94
102
|
*/
|
|
95
103
|
labelTemplate?: string;
|
|
@@ -112,7 +120,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
112
120
|
* * Half
|
|
113
121
|
* * Quarter
|
|
114
122
|
* * Exact
|
|
115
|
-
*
|
|
123
|
+
*
|
|
124
|
+
* {% codeBlock src='rating/precision/index.md' %}{% endcodeBlock %}
|
|
125
|
+
*
|
|
116
126
|
* @isenumeration true
|
|
117
127
|
* @default PrecisionType.Full
|
|
118
128
|
* @asptype PrecisionType
|
|
@@ -130,7 +140,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
130
140
|
/**
|
|
131
141
|
* Defines a value that specifies whether to display a label that shows the current value of a rating.
|
|
132
142
|
* When set to "true", a label will be displayed that shows the current value of the rating; otherwise false.
|
|
133
|
-
*
|
|
143
|
+
*
|
|
144
|
+
* {% codeBlock src='rating/showLabel/index.md' %}{% endcodeBlock %}
|
|
145
|
+
*
|
|
134
146
|
* @default false
|
|
135
147
|
*/
|
|
136
148
|
showLabel?: boolean;
|
|
@@ -146,7 +158,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
146
158
|
/**
|
|
147
159
|
* Defines the template that used as tooltip content over default tooltip content of the rating.
|
|
148
160
|
* The current value of rating passed as context to build the content.
|
|
149
|
-
*
|
|
161
|
+
*
|
|
162
|
+
* {% codeBlock src='rating/tooltipTemplate/index.md' %}{% endcodeBlock %}
|
|
163
|
+
*
|
|
150
164
|
* @default ''
|
|
151
165
|
*/
|
|
152
166
|
tooltipTemplate?: string;
|
|
@@ -156,7 +170,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
156
170
|
* Based on "PrecisionType", users can select ratings with varying levels of precision.
|
|
157
171
|
* The "value" is a decimal value that ranges from the minimum value to the items count,
|
|
158
172
|
* as specified by the "min" and "itemsCount" properties of the rating.
|
|
159
|
-
*
|
|
173
|
+
*
|
|
174
|
+
* {% codeBlock src='rating/value/index.md' %}{% endcodeBlock %}
|
|
175
|
+
*
|
|
160
176
|
* @default 0.0
|
|
161
177
|
* @aspType double
|
|
162
178
|
*/
|
|
@@ -172,7 +188,9 @@ export interface RatingModel extends ComponentModel{
|
|
|
172
188
|
|
|
173
189
|
/**
|
|
174
190
|
* Event callback that is raised before rendering each item.
|
|
175
|
-
*
|
|
191
|
+
*
|
|
192
|
+
* {% codeBlock src='rating/beforeItemRenderEvent/index.md' %}{% endcodeBlock %}
|
|
193
|
+
*
|
|
176
194
|
* @event beforeItemRender
|
|
177
195
|
*/
|
|
178
196
|
beforeItemRender?: EmitType<RatingItemEventArgs>;
|
|
@@ -186,14 +204,18 @@ export interface RatingModel extends ComponentModel{
|
|
|
186
204
|
|
|
187
205
|
/**
|
|
188
206
|
* Event callback that is raised when a user hovers over an item.
|
|
189
|
-
*
|
|
207
|
+
*
|
|
208
|
+
* {% codeBlock src='rating/onItemHoverEvent/index.md' %}{% endcodeBlock %}
|
|
209
|
+
*
|
|
190
210
|
* @event onItemHover
|
|
191
211
|
*/
|
|
192
212
|
onItemHover?: EmitType<RatingHoverEventArgs>;
|
|
193
213
|
|
|
194
214
|
/**
|
|
195
215
|
* Event callback that is raised when the value is changed.
|
|
196
|
-
*
|
|
216
|
+
*
|
|
217
|
+
* {% codeBlock src='rating/valueChangedEvent/index.md' %}{% endcodeBlock %}
|
|
218
|
+
*
|
|
197
219
|
* @event valueChanged
|
|
198
220
|
*/
|
|
199
221
|
valueChanged?: EmitType<RatingChangedEventArgs>;
|