@syncfusion/ej2-inputs 23.2.4 → 24.1.45
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 +3 -28
- package/README.md +1 -1
- 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 +43 -6
- package/dist/es6/ej2-inputs.es2015.js.map +1 -1
- package/dist/es6/ej2-inputs.es5.js +43 -6
- 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 +1 -0
- package/src/color-picker/color-picker.js +28 -0
- package/src/common/signature-base.js +0 -1
- package/src/input/input.js +3 -5
- package/src/numerictextbox/numerictextbox.js +1 -0
- package/src/rating/rating.d.ts +1 -0
- package/src/rating/rating.js +11 -0
- package/styles/bootstrap-dark.css +263 -3
- package/styles/bootstrap-dark.scss +1 -0
- package/styles/bootstrap.css +263 -3
- package/styles/bootstrap.scss +1 -0
- package/styles/bootstrap4.css +263 -3
- package/styles/bootstrap4.scss +1 -0
- package/styles/bootstrap5-dark.css +276 -3
- package/styles/bootstrap5-dark.scss +1 -0
- package/styles/bootstrap5.css +276 -3
- package/styles/bootstrap5.scss +1 -0
- package/styles/color-picker/_layout.scss +36 -0
- package/styles/color-picker/bootstrap5-dark.css +13 -0
- package/styles/color-picker/bootstrap5.css +13 -0
- package/styles/color-picker/fabric.css +5 -0
- package/styles/color-picker/fluent-dark.css +13 -0
- package/styles/color-picker/fluent.css +13 -0
- package/styles/color-picker/material.css +13 -0
- package/styles/color-picker/material3-dark.css +18 -0
- package/styles/color-picker/material3.css +18 -0
- package/styles/color-picker/tailwind-dark.css +13 -0
- package/styles/color-picker/tailwind.css +13 -0
- package/styles/data-form/_all.scss +2 -0
- package/styles/data-form/_bootstrap-dark-definition.scss +42 -0
- package/styles/data-form/_bootstrap-definition.scss +41 -0
- package/styles/data-form/_bootstrap4-definition.scss +41 -0
- package/styles/data-form/_bootstrap5-dark-definition.scss +1 -0
- package/styles/data-form/_bootstrap5-definition.scss +41 -0
- package/styles/data-form/_fabric-dark-definition.scss +41 -0
- package/styles/data-form/_fabric-definition.scss +41 -0
- package/styles/data-form/_fluent-dark-definition.scss +1 -0
- package/styles/data-form/_fluent-definition.scss +41 -0
- package/styles/data-form/_fusionnew-definition.scss +41 -0
- package/styles/data-form/_highcontrast-definition.scss +41 -0
- package/styles/data-form/_highcontrast-light-definition.scss +41 -0
- package/styles/data-form/_layout.scss +223 -0
- package/styles/data-form/_material-dark-definition.scss +41 -0
- package/styles/data-form/_material-definition.scss +42 -0
- package/styles/data-form/_material3-dark-definition.scss +1 -0
- package/styles/data-form/_material3-definition.scss +41 -0
- package/styles/data-form/_tailwind-dark-definition.scss +1 -0
- package/styles/data-form/_tailwind-definition.scss +41 -0
- package/styles/data-form/_theme.scss +38 -0
- package/styles/data-form/bootstrap-dark.css +240 -0
- package/styles/data-form/bootstrap-dark.scss +3 -0
- package/styles/data-form/bootstrap.css +240 -0
- package/styles/data-form/bootstrap.scss +3 -0
- package/styles/data-form/bootstrap4.css +240 -0
- package/styles/data-form/bootstrap4.scss +3 -0
- package/styles/data-form/bootstrap5-dark.css +240 -0
- package/styles/data-form/bootstrap5-dark.scss +3 -0
- package/styles/data-form/bootstrap5.css +240 -0
- package/styles/data-form/bootstrap5.scss +3 -0
- package/styles/data-form/fabric-dark.css +240 -0
- package/styles/data-form/fabric-dark.scss +3 -0
- package/styles/data-form/fabric.css +240 -0
- package/styles/data-form/fabric.scss +3 -0
- package/styles/data-form/fluent-dark.css +240 -0
- package/styles/data-form/fluent-dark.scss +3 -0
- package/styles/data-form/fluent.css +240 -0
- package/styles/data-form/fluent.scss +3 -0
- package/styles/data-form/highcontrast-light.css +240 -0
- package/styles/data-form/highcontrast-light.scss +3 -0
- package/styles/data-form/highcontrast.css +240 -0
- package/styles/data-form/highcontrast.scss +3 -0
- package/styles/data-form/material-dark.css +240 -0
- package/styles/data-form/material-dark.scss +3 -0
- package/styles/data-form/material.css +240 -0
- package/styles/data-form/material.scss +3 -0
- package/styles/data-form/material3-dark.css +295 -0
- package/styles/data-form/material3-dark.scss +4 -0
- package/styles/data-form/material3.css +351 -0
- package/styles/data-form/material3.scss +4 -0
- package/styles/data-form/tailwind-dark.css +240 -0
- package/styles/data-form/tailwind-dark.scss +3 -0
- package/styles/data-form/tailwind.css +240 -0
- package/styles/data-form/tailwind.scss +3 -0
- package/styles/fabric-dark.css +263 -3
- package/styles/fabric-dark.scss +1 -0
- package/styles/fabric.css +268 -3
- package/styles/fabric.scss +1 -0
- package/styles/fluent-dark.css +276 -3
- package/styles/fluent-dark.scss +1 -0
- package/styles/fluent.css +276 -3
- package/styles/fluent.scss +1 -0
- package/styles/highcontrast-light.css +263 -3
- package/styles/highcontrast-light.scss +1 -0
- package/styles/highcontrast.css +263 -3
- package/styles/highcontrast.scss +1 -0
- package/styles/material-dark.css +275 -3
- package/styles/material-dark.scss +1 -0
- package/styles/material.css +288 -3
- package/styles/material.scss +1 -0
- package/styles/material3-dark.css +293 -3
- package/styles/material3-dark.scss +1 -0
- package/styles/material3.css +293 -3
- package/styles/material3.scss +1 -0
- package/styles/rating/_bootstrap-dark-definition.scss +4 -0
- package/styles/rating/_bootstrap-definition.scss +4 -0
- package/styles/rating/_bootstrap4-definition.scss +4 -0
- package/styles/rating/_bootstrap5-definition.scss +4 -0
- package/styles/rating/_fabric-dark-definition.scss +4 -0
- package/styles/rating/_fabric-definition.scss +4 -0
- package/styles/rating/_fluent-definition.scss +4 -0
- package/styles/rating/_fusionnew-definition.scss +4 -0
- package/styles/rating/_highcontrast-definition.scss +4 -0
- package/styles/rating/_highcontrast-light-definition.scss +4 -0
- package/styles/rating/_layout.scss +21 -7
- package/styles/rating/_material-dark-definition.scss +4 -0
- package/styles/rating/_material-definition.scss +4 -0
- package/styles/rating/_material3-definition.scss +4 -0
- package/styles/rating/_tailwind-definition.scss +4 -0
- package/styles/rating/_theme.scss +5 -2
- package/styles/rating/bootstrap-dark.css +22 -3
- package/styles/rating/bootstrap.css +22 -3
- package/styles/rating/bootstrap4.css +22 -3
- package/styles/rating/bootstrap5-dark.css +22 -3
- package/styles/rating/bootstrap5.css +22 -3
- package/styles/rating/fabric-dark.css +22 -3
- package/styles/rating/fabric.css +22 -3
- package/styles/rating/fluent-dark.css +22 -3
- package/styles/rating/fluent.css +22 -3
- package/styles/rating/highcontrast-light.css +22 -3
- package/styles/rating/highcontrast.css +22 -3
- package/styles/rating/material-dark.css +22 -3
- package/styles/rating/material.css +22 -3
- package/styles/rating/material3-dark.css +22 -3
- package/styles/rating/material3.css +22 -3
- package/styles/rating/tailwind-dark.css +22 -3
- package/styles/rating/tailwind.css +22 -3
- package/styles/slider/_layout.scss +4 -0
- package/styles/slider/material-dark.css +12 -0
- package/styles/slider/material.css +12 -0
- package/styles/slider/material3-dark.css +12 -0
- package/styles/slider/material3.css +12 -0
- package/styles/tailwind-dark.css +276 -3
- package/styles/tailwind-dark.scss +1 -0
- package/styles/tailwind.css +276 -3
- package/styles/tailwind.scss +1 -0
|
@@ -29,7 +29,6 @@ var Input;
|
|
|
29
29
|
(function (Input) {
|
|
30
30
|
var floatType;
|
|
31
31
|
var isBindClearAction = true;
|
|
32
|
-
var floatLabelElement;
|
|
33
32
|
/**
|
|
34
33
|
* Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
|
|
35
34
|
* ```
|
|
@@ -177,7 +176,7 @@ var Input;
|
|
|
177
176
|
inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);
|
|
178
177
|
}
|
|
179
178
|
var floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });
|
|
180
|
-
floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });
|
|
179
|
+
var floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });
|
|
181
180
|
if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {
|
|
182
181
|
floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');
|
|
183
182
|
attributes(args.element, { 'aria-labelledby': floatLabelElement.id });
|
|
@@ -214,11 +213,11 @@ var Input;
|
|
|
214
213
|
if (args.floatLabelType === 'Auto') {
|
|
215
214
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
216
215
|
args.element.addEventListener('input', function (event) {
|
|
217
|
-
|
|
216
|
+
validateLabel(args.element, args.floatLabelType);
|
|
218
217
|
});
|
|
219
218
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
220
219
|
args.element.addEventListener('blur', function (event) {
|
|
221
|
-
|
|
220
|
+
validateLabel(args.element, args.floatLabelType);
|
|
222
221
|
});
|
|
223
222
|
}
|
|
224
223
|
if (!isNullOrUndefined(args.element.getAttribute('id'))) {
|
|
@@ -346,7 +345,6 @@ var Input;
|
|
|
346
345
|
}
|
|
347
346
|
Input.wireClearBtnEvents = wireClearBtnEvents;
|
|
348
347
|
function destroy() {
|
|
349
|
-
floatLabelElement = null;
|
|
350
348
|
|
|
351
349
|
}
|
|
352
350
|
Input.destroy = destroy;
|
|
@@ -1430,6 +1428,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
|
|
|
1430
1428
|
this.updateValue(parsedInput, event);
|
|
1431
1429
|
};
|
|
1432
1430
|
NumericTextBox.prototype.raiseChangeEvent = function (event) {
|
|
1431
|
+
this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;
|
|
1433
1432
|
if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {
|
|
1434
1433
|
var eventArgs = {};
|
|
1435
1434
|
this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,
|
|
@@ -12067,6 +12066,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
|
|
|
12067
12066
|
opensOn: 'Custom',
|
|
12068
12067
|
showTipPointer: false,
|
|
12069
12068
|
cssClass: 'e-color-picker-tooltip',
|
|
12069
|
+
htmlAttributes: { title: 'tooltip' },
|
|
12070
12070
|
beforeOpen: function (args) {
|
|
12071
12071
|
_this.tooltipEle = args.element;
|
|
12072
12072
|
},
|
|
@@ -12076,6 +12076,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
|
|
|
12076
12076
|
tooltip.appendTo(this.container);
|
|
12077
12077
|
tooltip.open(this.container);
|
|
12078
12078
|
this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
|
|
12079
|
+
this.tooltipEle.setAttribute('aria-label', 'colorpicker-tooltip');
|
|
12079
12080
|
select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
|
|
12080
12081
|
};
|
|
12081
12082
|
ColorPicker.prototype.getTooltipInst = function () {
|
|
@@ -12485,9 +12486,26 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
|
|
|
12485
12486
|
this.firstPaletteFocus();
|
|
12486
12487
|
this.createInput();
|
|
12487
12488
|
this.refreshPopupPos();
|
|
12489
|
+
//for image editor popup position refreshing
|
|
12490
|
+
if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
|
|
12491
|
+
this.refreshImageEditorPopupPos();
|
|
12492
|
+
}
|
|
12493
|
+
|
|
12488
12494
|
this.wireEvents();
|
|
12489
12495
|
this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });
|
|
12490
12496
|
};
|
|
12497
|
+
//for image editor popup position refreshing
|
|
12498
|
+
ColorPicker.prototype.refreshImageEditorPopupPos = function () {
|
|
12499
|
+
if (Browser.isDevice) {
|
|
12500
|
+
var popupEle = this.getPopupEle();
|
|
12501
|
+
popupEle.style.left = formatUnit(0 + pageXOffset);
|
|
12502
|
+
popupEle.style.top = formatUnit(0 + pageYOffset);
|
|
12503
|
+
var btnElem = document.querySelector("#" + this.element.parentElement.parentElement.id.split('-popup')[0]);
|
|
12504
|
+
if (btnElem) {
|
|
12505
|
+
popupEle.parentElement.ej2_instances[0].refreshPosition(btnElem);
|
|
12506
|
+
}
|
|
12507
|
+
}
|
|
12508
|
+
};
|
|
12491
12509
|
ColorPicker.prototype.refreshPopupPos = function () {
|
|
12492
12510
|
if (!this.inline) {
|
|
12493
12511
|
var popupEle = this.getPopupEle();
|
|
@@ -12609,6 +12627,11 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
|
|
|
12609
12627
|
this.getDragHandler().focus();
|
|
12610
12628
|
this.createInput();
|
|
12611
12629
|
this.refreshPopupPos();
|
|
12630
|
+
//for image editor popup position refreshing
|
|
12631
|
+
if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
|
|
12632
|
+
this.refreshImageEditorPopupPos();
|
|
12633
|
+
}
|
|
12634
|
+
|
|
12612
12635
|
this.wireEvents();
|
|
12613
12636
|
this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });
|
|
12614
12637
|
};
|
|
@@ -12621,6 +12644,10 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
|
|
|
12621
12644
|
this.closePopup(e);
|
|
12622
12645
|
this.splitBtn.element.focus();
|
|
12623
12646
|
}
|
|
12647
|
+
else if (ele.classList.contains(CANCEL)) {
|
|
12648
|
+
var beforeCloseArgs = { element: this.container, event: e, cancel: false };
|
|
12649
|
+
this.trigger('beforeClose', beforeCloseArgs);
|
|
12650
|
+
}
|
|
12624
12651
|
};
|
|
12625
12652
|
ColorPicker.prototype.paletteKeyDown = function (e) {
|
|
12626
12653
|
var target = e.target;
|
|
@@ -14232,7 +14259,6 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
|
|
|
14232
14259
|
this.element.height = this.element.offsetHeight;
|
|
14233
14260
|
this.element.width = this.element.offsetWidth;
|
|
14234
14261
|
}
|
|
14235
|
-
this.canvasContext.scale(1, 1);
|
|
14236
14262
|
this.canvasContext.fillStyle = this.strokeColor;
|
|
14237
14263
|
this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
|
|
14238
14264
|
this.tempContext = this.tempCanvas.getContext('2d');
|
|
@@ -15410,6 +15436,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
|
|
|
15410
15436
|
space: 'space'
|
|
15411
15437
|
};
|
|
15412
15438
|
this.tooltipOpen = false;
|
|
15439
|
+
this.isTouchSelected = false;
|
|
15413
15440
|
};
|
|
15414
15441
|
Rating.prototype.render = function () {
|
|
15415
15442
|
this.initialize();
|
|
@@ -15472,6 +15499,11 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
|
|
|
15472
15499
|
EventHandler.add(this.ratingItemList, Browser.touchEndEvent, this.touchEndHandler, this);
|
|
15473
15500
|
};
|
|
15474
15501
|
Rating.prototype.touchMoveHandler = function (e) {
|
|
15502
|
+
if (!this.isTouchSelected) {
|
|
15503
|
+
this.wrapper.classList.add("e-rating-touch");
|
|
15504
|
+
this.isTouchSelected = true;
|
|
15505
|
+
}
|
|
15506
|
+
this.wrapper.classList.add("e-touch-select");
|
|
15475
15507
|
var rect = this.ratingItemList.getBoundingClientRect();
|
|
15476
15508
|
var x = e.touches[0].clientX - rect.x;
|
|
15477
15509
|
var currValue = (x / rect.width) * this.itemsCount;
|
|
@@ -15502,6 +15534,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
|
|
|
15502
15534
|
};
|
|
15503
15535
|
Rating.prototype.touchEndHandler = function () {
|
|
15504
15536
|
this.closeRatingTooltip();
|
|
15537
|
+
this.wrapper.classList.remove("e-touch-select");
|
|
15505
15538
|
};
|
|
15506
15539
|
Rating.prototype.updateTemplateFunction = function () {
|
|
15507
15540
|
this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
|
|
@@ -15781,6 +15814,10 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
|
|
|
15781
15814
|
this.trigger('valueChanged', eventArgs);
|
|
15782
15815
|
};
|
|
15783
15816
|
Rating.prototype.mouseMoveHandler = function (index, e) {
|
|
15817
|
+
if (this.isTouchSelected) {
|
|
15818
|
+
this.wrapper.classList.remove("e-rating-touch");
|
|
15819
|
+
this.isTouchSelected = false;
|
|
15820
|
+
}
|
|
15784
15821
|
var currValue = this.calculateCurrentValue(index, e);
|
|
15785
15822
|
currValue = this.validateValue(currValue);
|
|
15786
15823
|
var element = this.itemElements[parseInt((index - 1).toString(), 10)];
|