@syncfusion/ej2-inputs 23.1.43 → 24.1.41
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 -31
- 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 -5
- package/dist/es6/ej2-inputs.es2015.js.map +1 -1
- package/dist/es6/ej2-inputs.es5.js +43 -5
- 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/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
|
let floatType;
|
|
31
31
|
let isBindClearAction = true;
|
|
32
|
-
let 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
|
const floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });
|
|
180
|
-
floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });
|
|
179
|
+
const 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', (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', (event) => {
|
|
221
|
-
|
|
220
|
+
validateLabel(args.element, args.floatLabelType);
|
|
222
221
|
});
|
|
223
222
|
}
|
|
224
223
|
if (!isNullOrUndefined(args.element.getAttribute('id'))) {
|
|
@@ -344,7 +343,6 @@ var Input;
|
|
|
344
343
|
}
|
|
345
344
|
Input.wireClearBtnEvents = wireClearBtnEvents;
|
|
346
345
|
function destroy() {
|
|
347
|
-
floatLabelElement = null;
|
|
348
346
|
|
|
349
347
|
}
|
|
350
348
|
Input.destroy = destroy;
|
|
@@ -1405,6 +1403,7 @@ let NumericTextBox = class NumericTextBox extends Component {
|
|
|
1405
1403
|
this.updateValue(parsedInput, event);
|
|
1406
1404
|
}
|
|
1407
1405
|
raiseChangeEvent(event) {
|
|
1406
|
+
this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;
|
|
1408
1407
|
if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {
|
|
1409
1408
|
const eventArgs = {};
|
|
1410
1409
|
this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,
|
|
@@ -11822,6 +11821,7 @@ let ColorPicker = class ColorPicker extends Component {
|
|
|
11822
11821
|
opensOn: 'Custom',
|
|
11823
11822
|
showTipPointer: false,
|
|
11824
11823
|
cssClass: 'e-color-picker-tooltip',
|
|
11824
|
+
htmlAttributes: { title: 'tooltip' },
|
|
11825
11825
|
beforeOpen: (args) => {
|
|
11826
11826
|
this.tooltipEle = args.element;
|
|
11827
11827
|
},
|
|
@@ -11831,6 +11831,7 @@ let ColorPicker = class ColorPicker extends Component {
|
|
|
11831
11831
|
tooltip.appendTo(this.container);
|
|
11832
11832
|
tooltip.open(this.container);
|
|
11833
11833
|
this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
|
|
11834
|
+
this.tooltipEle.setAttribute('aria-label', 'colorpicker-tooltip');
|
|
11834
11835
|
select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
|
|
11835
11836
|
}
|
|
11836
11837
|
getTooltipInst() {
|
|
@@ -12238,9 +12239,26 @@ let ColorPicker = class ColorPicker extends Component {
|
|
|
12238
12239
|
this.firstPaletteFocus();
|
|
12239
12240
|
this.createInput();
|
|
12240
12241
|
this.refreshPopupPos();
|
|
12242
|
+
//for image editor popup position refreshing
|
|
12243
|
+
if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
|
|
12244
|
+
this.refreshImageEditorPopupPos();
|
|
12245
|
+
}
|
|
12246
|
+
|
|
12241
12247
|
this.wireEvents();
|
|
12242
12248
|
this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });
|
|
12243
12249
|
}
|
|
12250
|
+
//for image editor popup position refreshing
|
|
12251
|
+
refreshImageEditorPopupPos() {
|
|
12252
|
+
if (Browser.isDevice) {
|
|
12253
|
+
const popupEle = this.getPopupEle();
|
|
12254
|
+
popupEle.style.left = formatUnit(0 + pageXOffset);
|
|
12255
|
+
popupEle.style.top = formatUnit(0 + pageYOffset);
|
|
12256
|
+
const btnElem = document.querySelector(`#${this.element.parentElement.parentElement.id.split('-popup')[0]}`);
|
|
12257
|
+
if (btnElem) {
|
|
12258
|
+
popupEle.parentElement.ej2_instances[0].refreshPosition(btnElem);
|
|
12259
|
+
}
|
|
12260
|
+
}
|
|
12261
|
+
}
|
|
12244
12262
|
refreshPopupPos() {
|
|
12245
12263
|
if (!this.inline) {
|
|
12246
12264
|
const popupEle = this.getPopupEle();
|
|
@@ -12361,6 +12379,11 @@ let ColorPicker = class ColorPicker extends Component {
|
|
|
12361
12379
|
this.getDragHandler().focus();
|
|
12362
12380
|
this.createInput();
|
|
12363
12381
|
this.refreshPopupPos();
|
|
12382
|
+
//for image editor popup position refreshing
|
|
12383
|
+
if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
|
|
12384
|
+
this.refreshImageEditorPopupPos();
|
|
12385
|
+
}
|
|
12386
|
+
|
|
12364
12387
|
this.wireEvents();
|
|
12365
12388
|
this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });
|
|
12366
12389
|
}
|
|
@@ -12373,6 +12396,10 @@ let ColorPicker = class ColorPicker extends Component {
|
|
|
12373
12396
|
this.closePopup(e);
|
|
12374
12397
|
this.splitBtn.element.focus();
|
|
12375
12398
|
}
|
|
12399
|
+
else if (ele.classList.contains(CANCEL)) {
|
|
12400
|
+
const beforeCloseArgs = { element: this.container, event: e, cancel: false };
|
|
12401
|
+
this.trigger('beforeClose', beforeCloseArgs);
|
|
12402
|
+
}
|
|
12376
12403
|
}
|
|
12377
12404
|
paletteKeyDown(e) {
|
|
12378
12405
|
const target = e.target;
|
|
@@ -15082,6 +15109,7 @@ let Rating = class Rating extends Component {
|
|
|
15082
15109
|
space: 'space'
|
|
15083
15110
|
};
|
|
15084
15111
|
this.tooltipOpen = false;
|
|
15112
|
+
this.isTouchSelected = false;
|
|
15085
15113
|
}
|
|
15086
15114
|
render() {
|
|
15087
15115
|
this.initialize();
|
|
@@ -15143,6 +15171,11 @@ let Rating = class Rating extends Component {
|
|
|
15143
15171
|
EventHandler.add(this.ratingItemList, Browser.touchEndEvent, this.touchEndHandler, this);
|
|
15144
15172
|
}
|
|
15145
15173
|
touchMoveHandler(e) {
|
|
15174
|
+
if (!this.isTouchSelected) {
|
|
15175
|
+
this.wrapper.classList.add("e-rating-touch");
|
|
15176
|
+
this.isTouchSelected = true;
|
|
15177
|
+
}
|
|
15178
|
+
this.wrapper.classList.add("e-touch-select");
|
|
15146
15179
|
const rect = this.ratingItemList.getBoundingClientRect();
|
|
15147
15180
|
const x = e.touches[0].clientX - rect.x;
|
|
15148
15181
|
let currValue = (x / rect.width) * this.itemsCount;
|
|
@@ -15173,6 +15206,7 @@ let Rating = class Rating extends Component {
|
|
|
15173
15206
|
}
|
|
15174
15207
|
touchEndHandler() {
|
|
15175
15208
|
this.closeRatingTooltip();
|
|
15209
|
+
this.wrapper.classList.remove("e-touch-select");
|
|
15176
15210
|
}
|
|
15177
15211
|
updateTemplateFunction() {
|
|
15178
15212
|
this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
|
|
@@ -15447,6 +15481,10 @@ let Rating = class Rating extends Component {
|
|
|
15447
15481
|
this.trigger('valueChanged', eventArgs);
|
|
15448
15482
|
}
|
|
15449
15483
|
mouseMoveHandler(index, e) {
|
|
15484
|
+
if (this.isTouchSelected) {
|
|
15485
|
+
this.wrapper.classList.remove("e-rating-touch");
|
|
15486
|
+
this.isTouchSelected = false;
|
|
15487
|
+
}
|
|
15450
15488
|
let currValue = this.calculateCurrentValue(index, e);
|
|
15451
15489
|
currValue = this.validateValue(currValue);
|
|
15452
15490
|
const element = this.itemElements[parseInt((index - 1).toString(), 10)];
|