@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.
Files changed (156) hide show
  1. package/CHANGELOG.md +0 -31
  2. package/dist/ej2-inputs.min.js +2 -2
  3. package/dist/ej2-inputs.umd.min.js +2 -2
  4. package/dist/ej2-inputs.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-inputs.es2015.js +43 -5
  6. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es5.js +43 -5
  8. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  9. package/dist/global/ej2-inputs.min.js +2 -2
  10. package/dist/global/ej2-inputs.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/color-picker/color-picker.d.ts +1 -0
  14. package/src/color-picker/color-picker.js +28 -0
  15. package/src/input/input.js +3 -5
  16. package/src/numerictextbox/numerictextbox.js +1 -0
  17. package/src/rating/rating.d.ts +1 -0
  18. package/src/rating/rating.js +11 -0
  19. package/styles/bootstrap-dark.css +263 -3
  20. package/styles/bootstrap-dark.scss +1 -0
  21. package/styles/bootstrap.css +263 -3
  22. package/styles/bootstrap.scss +1 -0
  23. package/styles/bootstrap4.css +263 -3
  24. package/styles/bootstrap4.scss +1 -0
  25. package/styles/bootstrap5-dark.css +276 -3
  26. package/styles/bootstrap5-dark.scss +1 -0
  27. package/styles/bootstrap5.css +276 -3
  28. package/styles/bootstrap5.scss +1 -0
  29. package/styles/color-picker/_layout.scss +36 -0
  30. package/styles/color-picker/bootstrap5-dark.css +13 -0
  31. package/styles/color-picker/bootstrap5.css +13 -0
  32. package/styles/color-picker/fabric.css +5 -0
  33. package/styles/color-picker/fluent-dark.css +13 -0
  34. package/styles/color-picker/fluent.css +13 -0
  35. package/styles/color-picker/material.css +13 -0
  36. package/styles/color-picker/material3-dark.css +18 -0
  37. package/styles/color-picker/material3.css +18 -0
  38. package/styles/color-picker/tailwind-dark.css +13 -0
  39. package/styles/color-picker/tailwind.css +13 -0
  40. package/styles/data-form/_all.scss +2 -0
  41. package/styles/data-form/_bootstrap-dark-definition.scss +42 -0
  42. package/styles/data-form/_bootstrap-definition.scss +41 -0
  43. package/styles/data-form/_bootstrap4-definition.scss +41 -0
  44. package/styles/data-form/_bootstrap5-dark-definition.scss +1 -0
  45. package/styles/data-form/_bootstrap5-definition.scss +41 -0
  46. package/styles/data-form/_fabric-dark-definition.scss +41 -0
  47. package/styles/data-form/_fabric-definition.scss +41 -0
  48. package/styles/data-form/_fluent-dark-definition.scss +1 -0
  49. package/styles/data-form/_fluent-definition.scss +41 -0
  50. package/styles/data-form/_fusionnew-definition.scss +41 -0
  51. package/styles/data-form/_highcontrast-definition.scss +41 -0
  52. package/styles/data-form/_highcontrast-light-definition.scss +41 -0
  53. package/styles/data-form/_layout.scss +223 -0
  54. package/styles/data-form/_material-dark-definition.scss +41 -0
  55. package/styles/data-form/_material-definition.scss +42 -0
  56. package/styles/data-form/_material3-dark-definition.scss +1 -0
  57. package/styles/data-form/_material3-definition.scss +41 -0
  58. package/styles/data-form/_tailwind-dark-definition.scss +1 -0
  59. package/styles/data-form/_tailwind-definition.scss +41 -0
  60. package/styles/data-form/_theme.scss +38 -0
  61. package/styles/data-form/bootstrap-dark.css +240 -0
  62. package/styles/data-form/bootstrap-dark.scss +3 -0
  63. package/styles/data-form/bootstrap.css +240 -0
  64. package/styles/data-form/bootstrap.scss +3 -0
  65. package/styles/data-form/bootstrap4.css +240 -0
  66. package/styles/data-form/bootstrap4.scss +3 -0
  67. package/styles/data-form/bootstrap5-dark.css +240 -0
  68. package/styles/data-form/bootstrap5-dark.scss +3 -0
  69. package/styles/data-form/bootstrap5.css +240 -0
  70. package/styles/data-form/bootstrap5.scss +3 -0
  71. package/styles/data-form/fabric-dark.css +240 -0
  72. package/styles/data-form/fabric-dark.scss +3 -0
  73. package/styles/data-form/fabric.css +240 -0
  74. package/styles/data-form/fabric.scss +3 -0
  75. package/styles/data-form/fluent-dark.css +240 -0
  76. package/styles/data-form/fluent-dark.scss +3 -0
  77. package/styles/data-form/fluent.css +240 -0
  78. package/styles/data-form/fluent.scss +3 -0
  79. package/styles/data-form/highcontrast-light.css +240 -0
  80. package/styles/data-form/highcontrast-light.scss +3 -0
  81. package/styles/data-form/highcontrast.css +240 -0
  82. package/styles/data-form/highcontrast.scss +3 -0
  83. package/styles/data-form/material-dark.css +240 -0
  84. package/styles/data-form/material-dark.scss +3 -0
  85. package/styles/data-form/material.css +240 -0
  86. package/styles/data-form/material.scss +3 -0
  87. package/styles/data-form/material3-dark.css +295 -0
  88. package/styles/data-form/material3-dark.scss +4 -0
  89. package/styles/data-form/material3.css +351 -0
  90. package/styles/data-form/material3.scss +4 -0
  91. package/styles/data-form/tailwind-dark.css +240 -0
  92. package/styles/data-form/tailwind-dark.scss +3 -0
  93. package/styles/data-form/tailwind.css +240 -0
  94. package/styles/data-form/tailwind.scss +3 -0
  95. package/styles/fabric-dark.css +263 -3
  96. package/styles/fabric-dark.scss +1 -0
  97. package/styles/fabric.css +268 -3
  98. package/styles/fabric.scss +1 -0
  99. package/styles/fluent-dark.css +276 -3
  100. package/styles/fluent-dark.scss +1 -0
  101. package/styles/fluent.css +276 -3
  102. package/styles/fluent.scss +1 -0
  103. package/styles/highcontrast-light.css +263 -3
  104. package/styles/highcontrast-light.scss +1 -0
  105. package/styles/highcontrast.css +263 -3
  106. package/styles/highcontrast.scss +1 -0
  107. package/styles/material-dark.css +275 -3
  108. package/styles/material-dark.scss +1 -0
  109. package/styles/material.css +288 -3
  110. package/styles/material.scss +1 -0
  111. package/styles/material3-dark.css +293 -3
  112. package/styles/material3-dark.scss +1 -0
  113. package/styles/material3.css +293 -3
  114. package/styles/material3.scss +1 -0
  115. package/styles/rating/_bootstrap-dark-definition.scss +4 -0
  116. package/styles/rating/_bootstrap-definition.scss +4 -0
  117. package/styles/rating/_bootstrap4-definition.scss +4 -0
  118. package/styles/rating/_bootstrap5-definition.scss +4 -0
  119. package/styles/rating/_fabric-dark-definition.scss +4 -0
  120. package/styles/rating/_fabric-definition.scss +4 -0
  121. package/styles/rating/_fluent-definition.scss +4 -0
  122. package/styles/rating/_fusionnew-definition.scss +4 -0
  123. package/styles/rating/_highcontrast-definition.scss +4 -0
  124. package/styles/rating/_highcontrast-light-definition.scss +4 -0
  125. package/styles/rating/_layout.scss +21 -7
  126. package/styles/rating/_material-dark-definition.scss +4 -0
  127. package/styles/rating/_material-definition.scss +4 -0
  128. package/styles/rating/_material3-definition.scss +4 -0
  129. package/styles/rating/_tailwind-definition.scss +4 -0
  130. package/styles/rating/_theme.scss +5 -2
  131. package/styles/rating/bootstrap-dark.css +22 -3
  132. package/styles/rating/bootstrap.css +22 -3
  133. package/styles/rating/bootstrap4.css +22 -3
  134. package/styles/rating/bootstrap5-dark.css +22 -3
  135. package/styles/rating/bootstrap5.css +22 -3
  136. package/styles/rating/fabric-dark.css +22 -3
  137. package/styles/rating/fabric.css +22 -3
  138. package/styles/rating/fluent-dark.css +22 -3
  139. package/styles/rating/fluent.css +22 -3
  140. package/styles/rating/highcontrast-light.css +22 -3
  141. package/styles/rating/highcontrast.css +22 -3
  142. package/styles/rating/material-dark.css +22 -3
  143. package/styles/rating/material.css +22 -3
  144. package/styles/rating/material3-dark.css +22 -3
  145. package/styles/rating/material3.css +22 -3
  146. package/styles/rating/tailwind-dark.css +22 -3
  147. package/styles/rating/tailwind.css +22 -3
  148. package/styles/slider/_layout.scss +4 -0
  149. package/styles/slider/material-dark.css +12 -0
  150. package/styles/slider/material.css +12 -0
  151. package/styles/slider/material3-dark.css +12 -0
  152. package/styles/slider/material3.css +12 -0
  153. package/styles/tailwind-dark.css +276 -3
  154. package/styles/tailwind-dark.scss +1 -0
  155. package/styles/tailwind.css +276 -3
  156. 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
- updateLabelState(args.element.value, floatLabelElement, args.element);
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
- updateLabelState(args.element.value, floatLabelElement);
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)];