@syncfusion/ej2-inputs 23.2.4 → 24.1.45

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.2.4
+*  version : 24.1.45
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@23.1.43",
+  "_id": "@syncfusion/ej2-inputs@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-0LdqRSDbGYpaqFgxEKyeR7Rov2Fi48KxYEq5k/0UOBsq65VFOmDlpV2KWnBXvz5I4Mny2wCYVS5kc82rcopcSQ==",
+  "_integrity": "sha512-wLwb/OydRKuWm8NToXgdWGEzvcJsot9t9xtDTYRvXUzU0KCBv4nS2XDuDOM9BbX+Po20u7o4tYorWYgy1QjDdA==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,19 +39,19 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-23.1.43.tgz",
-  "_shasum": "1e413ceb59bdb969c46f99f0b844a2b620c3a71f",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-24.1.41.tgz",
+  "_shasum": "20a7649afbc8c87d3983e343284c60dcb4b97fd0",
   "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.2.4",
-    "@syncfusion/ej2-buttons": "~23.2.4",
-    "@syncfusion/ej2-popups": "~23.2.4",
-    "@syncfusion/ej2-splitbuttons": "~23.2.4"
+    "@syncfusion/ej2-base": "~24.1.42",
+    "@syncfusion/ej2-buttons": "~24.1.45",
+    "@syncfusion/ej2-popups": "~24.1.44",
+    "@syncfusion/ej2-splitbuttons": "~24.1.45"
   },
   "deprecated": false,
   "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 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "23.2.4",
+  "version": "24.1.45",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/color-picker/color-picker.d.ts

@@ -282,6 +282,7 @@ export declare class ColorPicker extends Component<HTMLInputElement> implements
     private handlerEnd;
     private btnClickHandler;
     private switchToPalette;
+    private refreshImageEditorPopupPos;
     private refreshPopupPos;
     private formatSwitchHandler;
     private updateValue;

package/src/color-picker/color-picker.js

@@ -637,6 +637,7 @@ var ColorPicker = /** @class */ (function (_super) {
             opensOn: 'Custom',
             showTipPointer: false,
             cssClass: 'e-color-picker-tooltip',
+            htmlAttributes: { title: 'tooltip' },
             beforeOpen: function (args) {
                 _this.tooltipEle = args.element;
             },
@@ -646,6 +647,7 @@ var ColorPicker = /** @class */ (function (_super) {
         tooltip.appendTo(this.container);
         tooltip.open(this.container);
         this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
+        this.tooltipEle.setAttribute('aria-label', 'colorpicker-tooltip');
         select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
     };
     ColorPicker.prototype.getTooltipInst = function () {
@@ -1055,9 +1057,26 @@ var ColorPicker = /** @class */ (function (_super) {
         this.firstPaletteFocus();
         this.createInput();
         this.refreshPopupPos();
+        //for image editor popup position refreshing
+        if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
+            this.refreshImageEditorPopupPos();
+        }
+        ;
         this.wireEvents();
         this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });
     };
+    //for image editor popup position refreshing
+    ColorPicker.prototype.refreshImageEditorPopupPos = function () {
+        if (Browser.isDevice) {
+            var popupEle = this.getPopupEle();
+            popupEle.style.left = formatUnit(0 + pageXOffset);
+            popupEle.style.top = formatUnit(0 + pageYOffset);
+            var btnElem = document.querySelector("#" + this.element.parentElement.parentElement.id.split('-popup')[0]);
+            if (btnElem) {
+                popupEle.parentElement.ej2_instances[0].refreshPosition(btnElem);
+            }
+        }
+    };
     ColorPicker.prototype.refreshPopupPos = function () {
         if (!this.inline) {
             var popupEle = this.getPopupEle();
@@ -1179,6 +1198,11 @@ var ColorPicker = /** @class */ (function (_super) {
         this.getDragHandler().focus();
         this.createInput();
         this.refreshPopupPos();
+        //for image editor popup position refreshing
+        if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
+            this.refreshImageEditorPopupPos();
+        }
+        ;
         this.wireEvents();
         this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });
     };
@@ -1191,6 +1215,10 @@ var ColorPicker = /** @class */ (function (_super) {
             this.closePopup(e);
             this.splitBtn.element.focus();
         }
+        else if (ele.classList.contains(CANCEL)) {
+            var beforeCloseArgs = { element: this.container, event: e, cancel: false };
+            this.trigger('beforeClose', beforeCloseArgs);
+        }
     };
     ColorPicker.prototype.paletteKeyDown = function (e) {
         var target = e.target;

package/src/common/signature-base.js

@@ -95,7 +95,6 @@ var SignatureBase = /** @class */ (function (_super) {
             this.element.height = this.element.offsetHeight;
             this.element.width = this.element.offsetWidth;
         }
-        this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
         this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
         this.tempContext = this.tempCanvas.getContext('2d');

package/src/input/input.js

@@ -32,7 +32,6 @@ export var Input;
     };
     var floatType;
     var isBindClearAction = true;
-    var floatLabelElement;
     /**
      * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.
      * ```
@@ -181,7 +180,7 @@ export var Input;
             inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);
         }
         var floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });
-        floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });
+        var floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });
         if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {
             floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');
             attributes(args.element, { 'aria-labelledby': floatLabelElement.id });
@@ -218,11 +217,11 @@ export var Input;
         if (args.floatLabelType === 'Auto') {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             args.element.addEventListener('input', function (event) {
-                updateLabelState(args.element.value, floatLabelElement, args.element);
+                validateLabel(args.element, args.floatLabelType);
             });
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             args.element.addEventListener('blur', function (event) {
-                updateLabelState(args.element.value, floatLabelElement);
+                validateLabel(args.element, args.floatLabelType);
             });
         }
         if (!isNullOrUndefined(args.element.getAttribute('id'))) {
@@ -350,7 +349,6 @@ export var Input;
     }
     Input.wireClearBtnEvents = wireClearBtnEvents;
     function destroy() {
-        floatLabelElement = null;
         privateInputObj = null;
     }
     Input.destroy = destroy;

package/src/numerictextbox/numerictextbox.js

@@ -531,6 +531,7 @@ var NumericTextBox = /** @class */ (function (_super) {
         this.updateValue(parsedInput, event);
     };
     NumericTextBox.prototype.raiseChangeEvent = function (event) {
+        this.inputValue = (isNullOrUndefined(this.inputValue) || isNaN(this.inputValue)) ? null : this.inputValue;
         if (this.prevValue !== this.value || this.prevValue !== this.inputValue) {
             var eventArgs = {};
             this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,

package/src/rating/rating.d.ts

@@ -329,6 +329,7 @@ export declare class Rating extends Component<HTMLElement> implements INotifyPro
     private fullTemplateFunction;
     private tooltipOpen;
     private isReact?;
+    private isTouchSelected;
     /**
      * Constructor for creating the widget
      *

package/src/rating/rating.js

@@ -120,6 +120,7 @@ var Rating = /** @class */ (function (_super) {
             space: 'space'
         };
         this.tooltipOpen = false;
+        this.isTouchSelected = false;
     };
     Rating.prototype.render = function () {
         this.initialize();
@@ -182,6 +183,11 @@ var Rating = /** @class */ (function (_super) {
         EventHandler.add(this.ratingItemList, Browser.touchEndEvent, this.touchEndHandler, this);
     };
     Rating.prototype.touchMoveHandler = function (e) {
+        if (!this.isTouchSelected) {
+            this.wrapper.classList.add("e-rating-touch");
+            this.isTouchSelected = true;
+        }
+        this.wrapper.classList.add("e-touch-select");
         var rect = this.ratingItemList.getBoundingClientRect();
         var x = e.touches[0].clientX - rect.x;
         var currValue = (x / rect.width) * this.itemsCount;
@@ -212,6 +218,7 @@ var Rating = /** @class */ (function (_super) {
     };
     Rating.prototype.touchEndHandler = function () {
         this.closeRatingTooltip();
+        this.wrapper.classList.remove("e-touch-select");
     };
     Rating.prototype.updateTemplateFunction = function () {
         this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
@@ -491,6 +498,10 @@ var Rating = /** @class */ (function (_super) {
         this.trigger('valueChanged', eventArgs);
     };
     Rating.prototype.mouseMoveHandler = function (index, e) {
+        if (this.isTouchSelected) {
+            this.wrapper.classList.remove("e-rating-touch");
+            this.isTouchSelected = false;
+        }
         var currValue = this.calculateCurrentValue(index, e);
         currValue = this.validateValue(currValue);
         var element = this.itemElements[parseInt((index - 1).toString(), 10)];

package/styles/bootstrap-dark.css

@@ -6809,7 +6809,8 @@ body.e-colorpicker-overflow {
   padding: 0;
   margin: 4px;
 }
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
   outline: 1px solid;
 }
 .e-rating-container .e-rating-item-list:focus-visible {
@@ -6828,10 +6829,13 @@ body.e-colorpicker-overflow {
   min-height: calc(1em + 8px);
   position: relative;
 }
+.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-rating-container .e-rating-item-container .e-rating-item {
   display: block;
 }
-.e-rating-container.e-rating-animation:not(.e-disabled) .e-rating-item-container:hover .e-rating-item {
+.e-rating-container.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item, .e-rating-container.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform: scale(1.4);
   pointer-events: none;
@@ -6921,6 +6925,10 @@ body.e-colorpicker-overflow {
 .e-small .e-rating-container .e-rating-item-container {
   font-size: 16px;
 }
+.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 4px;
+}
 .e-small.e-rating-container .e-rating-label,
 .e-small .e-rating-container .e-rating-label {
   font-size: 10px;
@@ -6935,6 +6943,10 @@ body.e-colorpicker-overflow {
 .e-bigger .e-rating-container .e-rating-item-container {
   font-size: 32px;
 }
+.e-bigger.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 16px;
+}
 .e-bigger.e-rating-container .e-rating-label,
 .e-bigger .e-rating-container .e-rating-label {
   font-size: 14px;
@@ -6951,6 +6963,12 @@ body.e-colorpicker-overflow {
 .e-small .e-bigger.e-rating-container .e-rating-item-container {
   font-size: 26px;
 }
+.e-bigger.e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-bigger.e-small .e-rating-container .e-rating-item-container:has(svg),
+.e-bigger .e-small.e-rating-container .e-rating-item-container:has(svg),
+.e-small .e-bigger.e-rating-container .e-rating-item-container:has(svg) {
+  line-height: 9px;
+}
 .e-bigger.e-small.e-rating-container .e-rating-label,
 .e-bigger.e-small .e-rating-container .e-rating-label,
 .e-bigger .e-small.e-rating-container .e-rating-label,
@@ -6965,7 +6983,8 @@ body.e-colorpicker-overflow {
   font-size: 22px;
 }
 
-.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus {
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus:not(:has(svg)),
+.e-rating-container .e-rating-item-list:focus-visible:not(:hover) .e-rating-focus .e-rating-item:has(svg) {
   outline-color: #676767;
   border-radius: 2px;
 }
@@ -7058,4 +7077,245 @@ body.e-colorpicker-overflow {
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-background-clip: text;
   /* stylelint-enable property-no-vendor-prefix */
+}
+
+/*! Form bootstrap theme wise override definitions and variables */
+/*! data-form layout */
+.e-data-form .e-form-label {
+  font-size: 12px;
+  margin-bottom: 4px;
+  font-weight: 400;
+}
+.e-data-form .e-form-layout {
+  display: -ms-grid;
+  display: grid;
+}
+.e-data-form .e-grid-col-2 {
+  -ms-grid-columns: (minmax(0, 1fr))[2];
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-3 {
+  -ms-grid-columns: (minmax(0, 1fr))[3];
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-4 {
+  -ms-grid-columns: (minmax(0, 1fr))[4];
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-5 {
+  -ms-grid-columns: (minmax(0, 1fr))[5];
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-6 {
+  -ms-grid-columns: (minmax(0, 1fr))[6];
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-7 {
+  -ms-grid-columns: (minmax(0, 1fr))[7];
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-8 {
+  -ms-grid-columns: (minmax(0, 1fr))[8];
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-9 {
+  -ms-grid-columns: (minmax(0, 1fr))[9];
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-10 {
+  -ms-grid-columns: (minmax(0, 1fr))[10];
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-11 {
+  -ms-grid-columns: (minmax(0, 1fr))[11];
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+.e-data-form .e-grid-col-12 {
+  -ms-grid-columns: (minmax(0, 1fr))[12];
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.e-data-form .e-colspan-1 {
+  -ms-grid-column-span: 1;
+  -ms-grid-column: span 1;
+      grid-column: span 1/span 1;
+}
+.e-data-form .e-colspan-2 {
+  -ms-grid-column-span: 2;
+  -ms-grid-column: span 2;
+      grid-column: span 2/span 2;
+}
+.e-data-form .e-colspan-3 {
+  -ms-grid-column-span: 3;
+  -ms-grid-column: span 3;
+      grid-column: span 3/span 3;
+}
+.e-data-form .e-colspan-4 {
+  -ms-grid-column-span: 4;
+  -ms-grid-column: span 4;
+      grid-column: span 4/span 4;
+}
+.e-data-form .e-colspan-5 {
+  -ms-grid-column-span: 5;
+  -ms-grid-column: span 5;
+      grid-column: span 5/span 5;
+}
+.e-data-form .e-colspan-6 {
+  -ms-grid-column-span: 6;
+  -ms-grid-column: span 6;
+      grid-column: span 6/span 6;
+}
+.e-data-form .e-colspan-7 {
+  -ms-grid-column-span: 7;
+  -ms-grid-column: span 7;
+      grid-column: span 7/span 7;
+}
+.e-data-form .e-colspan-8 {
+  -ms-grid-column-span: 8;
+  -ms-grid-column: span 8;
+      grid-column: span 8/span 8;
+}
+.e-data-form .e-colspan-9 {
+  -ms-grid-column-span: 9;
+  -ms-grid-column: span 9;
+      grid-column: span 9/span 9;
+}
+.e-data-form .e-colspan-10 {
+  -ms-grid-column-span: 10;
+  -ms-grid-column: span 10;
+      grid-column: span 10/span 10;
+}
+.e-data-form .e-colspan-11 {
+  -ms-grid-column-span: 11;
+  -ms-grid-column: span 11;
+      grid-column: span 11/span 11;
+}
+.e-data-form .e-colspan-12 {
+  -ms-grid-column-span: 12;
+  -ms-grid-column: span 12;
+      grid-column: span 12/span 12;
+}
+.e-data-form .e-label-left .e-form-item-wrapper {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  max-width: calc(75% - 12px);
+}
+.e-data-form .e-label-left .e-form-label {
+  margin-right: 12px;
+  width: 25%;
+  text-align: end;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-align: end;
+      align-items: flex-end;
+  -ms-flex-pack: start;
+      justify-content: flex-start;
+}
+.e-data-form .e-label-left .validation-message {
+  display: -ms-flexbox;
+  display: flex;
+}
+.e-data-form .e-form-group {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.e-data-form .e-form-group .e-group-title {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 8px;
+  /* Gap between text and border */
+  margin-bottom: 4px;
+  font-size: 16px;
+}
+.e-data-form .e-form-group .e-group-title::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid #1a1a1a;
+}
+.e-data-form .e-label-top {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  margin-top: 20px;
+}
+.e-data-form .e-label-top .e-label-right {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+}
+.e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
+  margin-top: 3px;
+  margin-left: 5px;
+}
+.e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
+  margin-top: 5px;
+}
+.e-data-form .e-label-left {
+  display: -ms-flexbox;
+  display: flex;
+  text-align: center;
+  margin-top: 20px;
+}
+.e-data-form .e-button-left {
+  -ms-flex-pack: start;
+      justify-content: flex-start;
+}
+.e-data-form .e-button-right {
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+.e-data-form .e-button-center {
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+.e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
+  margin-top: 24px;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 10px;
+}
+.e-data-form .e-button-left .e-btn, .e-data-form .e-button-right .e-btn, .e-data-form .e-button-center .e-btn, .e-data-form .e-button-stretch .e-btn {
+  border-radius: 20px;
+  padding: 7px 16px;
+}
+.e-data-form .e-button-stretch .e-btn {
+  width: 100%;
+}
+.e-data-form > :first-child.e-form-layout {
+  margin-top: 0;
+}
+.e-data-form .e-form-group-layout {
+  display: -ms-grid;
+  display: grid;
+}
+
+/*! data-form theme */
+.e-data-form .e-form-label {
+  color: #fff;
+}
+.e-data-form .e-group-title {
+  color: #fff;
+}
+.e-data-form .validation-message {
+  color: #f2caca;
+  font-size: 12px;
+  font-style: italic;
+}
+
+.e-tooltip-wrap.e-popup.e-error-tooltip {
+  background-color: #832020;
+  border: #832020;
+}
+.e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
+  color: #f2caca;
+}
+.e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-outer.e-tip-top, .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
+  border-bottom-color: #832020;
+  color: #832020;
 }

package/styles/bootstrap-dark.scss

@@ -7,3 +7,4 @@
 @import 'uploader/bootstrap-dark.scss';
 @import 'color-picker/bootstrap-dark.scss';
 @import 'rating/bootstrap-dark.scss';
+@import 'data-form/bootstrap-dark.scss';