@syncfusion/ej2-inputs 31.1.17 → 31.1.21

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.17
+*  version : 31.1.21
 *  Copyright Syncfusion Inc. 2001 - 2024. 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,64 +1,19 @@
 {
-  "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@18.79.0",
-  "_inBundle": false,
-  "_integrity": "sha512-oqb85+M3SKXnSSqEDcFSKmajfgB0YVpTpgNGTznMJlMI3YVIuBF/C4xpVtBVg0Gg7JQGz51MdoZU9uGc6/ilWg==",
-  "_location": "/@syncfusion/ej2-inputs",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-inputs@*",
-    "name": "@syncfusion/ej2-inputs",
-    "escapedName": "@syncfusion%2fej2-inputs",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-inputs",
-    "/@syncfusion/ej2-calendars",
-    "/@syncfusion/ej2-diagrams",
-    "/@syncfusion/ej2-documenteditor",
-    "/@syncfusion/ej2-dropdowns",
-    "/@syncfusion/ej2-filemanager",
-    "/@syncfusion/ej2-gantt",
-    "/@syncfusion/ej2-grid-chart",
-    "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
-    "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-interactive-chat",
-    "/@syncfusion/ej2-kanban",
-    "/@syncfusion/ej2-navigations",
-    "/@syncfusion/ej2-pdfviewer",
-    "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
-    "/@syncfusion/ej2-react-inputs",
-    "/@syncfusion/ej2-richtexteditor",
-    "/@syncfusion/ej2-schedule",
-    "/@syncfusion/ej2-vue-inputs"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-inputs/-/ej2-inputs-18.79.0.tgz",
-  "_shasum": "d082a01205b38b9a0272a0f7a38ea9d2be4bbaa1",
-  "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-inputs",
+  "version": "31.1.21",
+  "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.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-inputs.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.17",
-    "@syncfusion/ej2-buttons": "~31.1.17",
-    "@syncfusion/ej2-popups": "~31.1.17",
+    "@syncfusion/ej2-base": "~31.1.20",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-popups": "~31.1.20",
     "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
-  "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.",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-inputs.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -112,16 +67,11 @@
     "floating-label",
     "chunk-upload"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-inputs.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-inputs",
   "repository": {
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "31.1.17",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -96,7 +96,8 @@ var ColorPicker = /** @class */ (function (_super) {
         if (this.formElement) {
             EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
         }
-        var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors' };
+        var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors',
+            CurrentColor: 'Current', PreviousColor: 'Previous' };
         this.l10n = new L10n('colorpicker', localeText, this.locale);
         if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {
             ele.setAttribute('name', ele.id);
@@ -555,11 +556,11 @@ var ColorPicker = /** @class */ (function (_super) {
     ColorPicker.prototype.createPreview = function (parentEle) {
         var previewContainer = this.createElement('div', { className: PREVIEW });
         parentEle.appendChild(previewContainer);
-        var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });
+        var preview = this.createElement('span', { className: 'e-preview ' + CURRENT, attrs: { title: this.l10n.getConstant('CurrentColor') } });
         previewContainer.appendChild(preview);
         var colorValue = this.convertToRgbString(this.rgb);
         preview.style.backgroundColor = colorValue;
-        preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });
+        preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS, attrs: { title: this.l10n.getConstant('PreviousColor') } });
         previewContainer.appendChild(preview);
         preview.style.backgroundColor = colorValue;
     };

package/src/textbox/textbox.js

@@ -571,6 +571,13 @@ var TextBox = /** @class */ (function (_super) {
      */
     TextBox.prototype.addIcon = function (position, icons) {
         Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);
+        var container = this.textboxWrapper.container;
+        var iconSpan = container.querySelector('span.e-icons');
+        var label = container.querySelector('label');
+        if (iconSpan && label) {
+            var labelWidth = (this.element.parentElement.offsetWidth) - (iconSpan.offsetWidth);
+            label.style.width = labelWidth + "px";
+        }
     };
     /**
      * Gets the properties to be maintained in the persisted state.

package/styles/bootstrap4-lite.css

@@ -2098,7 +2098,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2305,7 +2305,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap4.css

@@ -2098,7 +2098,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2305,7 +2305,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-dark-lite.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-dark.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-lite.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/input/_bootstrap4-definition.scss

@@ -181,7 +181,7 @@ $textarea-small-height: auto !default;
 $textarea-bigger-small-height: auto !default;
 $textarea-full-height: 100% !default;
 $input-group-disabled-color: $gray-600 !default;
-$input-group-hovered-color: $white !default;
+$input-group-hovered-color: $gray-100 !default;
 $input-icon-font-size: 14px !default;
 $input-bigger-icon-font-size: 16px !default;
 $input-small-icon-font-size: 12px !default;

package/styles/input/_bootstrap5-definition.scss

@@ -236,7 +236,7 @@ $float-label-font-color: $content-text-color-alt1 !default;
 $float-label-disbale-font-color: $content-text-color-alt3 !default;
 $input-placeholder-color: $placeholder-text-color !default;
 $input-group-disabled-color: $icon-color-disabled !default;
-$input-group-hovered-color: $icon-color-hover !default;
+$input-group-hovered-color: $secondary-text-color-hover !default;
 $input-readonly-bg-color: $content-bg-color !default;
 $input-readonly-color: $content-text-color-alt1 !default;
 $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;

package/styles/input/bootstrap4.css

@@ -2088,7 +2088,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2295,7 +2295,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/input/bootstrap5-dark.css

@@ -2131,7 +2131,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2335,7 +2335,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/input/bootstrap5.css

@@ -2131,7 +2131,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2335,7 +2335,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/dist/ts/color-picker/color-picker-model.d.ts

@@ -1,186 +0,0 @@
-import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
-import {ColorPickerMode,ColorPickerEventArgs,PaletteTileEventArgs,BeforeOpenCloseEventArgs,OpenEventArgs,ModeSwitchEventArgs} from "./color-picker";
-import {ComponentModel} from '@syncfusion/ej2-base';
-
-/**
- * Interface for a class ColorPicker
- */
-export interface ColorPickerModel extends ComponentModel{
-
-    /**
-     * It is used to set the color value for ColorPicker. It should be specified as Hex code.
-     *
-     * @default '#008000ff'
-     */
-    value?: string;
-
-    /**
-     * This property sets the CSS classes to root element of the ColorPicker
-     *  which helps to customize the UI styles.
-     *
-     * @default ''
-     */
-    cssClass?: string;
-
-    /**
-     * It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * It is used to render the ColorPicker with the specified mode.
-     *
-     * @default 'Picker'
-     */
-    mode?: ColorPickerMode;
-
-    /**
-     * It is used to show / hide the mode switcher button of ColorPicker component.
-     *
-     * @default true
-     */
-    modeSwitcher?: boolean;
-
-    /**
-     * It is used to load custom colors to palette.
-     *
-     * @default null
-     */
-    presetColors?: { [key: string]: string[] };
-
-    /**
-     * It is used to show / hide the control buttons (apply / cancel) of  ColorPicker component.
-     *
-     * @default true
-     */
-    showButtons?: boolean;
-
-    /**
-     * It is used to render the ColorPicker palette with specified columns.
-     *
-     * @default 10
-     */
-    columns?: number;
-
-    /**
-     * It is used to render the ColorPicker component as inline.
-     *
-     * @default false
-     */
-    inline?: boolean;
-
-    /**
-     * It is used to enable / disable the no color option of ColorPicker component.
-     *
-     * @default false
-     */
-    noColor?: boolean;
-
-    /**
-     * To enable or disable persisting component's state between page reloads and it is extended from component class.
-     *
-     * @default false
-     */
-    enablePersistence?: boolean;
-
-    /**
-     * It is used to enable / disable the opacity option of ColorPicker component.
-     *
-     * @default true
-     */
-    enableOpacity?: boolean;
-
-    /**
-     * Specifies the popup element creation on open.
-     *
-     * @default false
-     */
-    createPopupOnClick?: boolean;
-
-    /**
-     * Specifies to show the recent color options in the color picker in the palate mode.
-     * It accepts boolean value to configure recent colors. The default value is false.
-     * If this property value is false, then the recent color user interface is not rendered in color picker component.
-     * This recent color option is rendered only in the palette mode.
-     *
-     * @default false
-     */
-    showRecentColors?: boolean;
-
-    /**
-     * Triggers while selecting the color in picker / palette, when showButtons property is enabled.
-     *
-     * @event select
-     * @blazorProperty 'Selected'
-     */
-    select?: EmitType<ColorPickerEventArgs>;
-
-    /**
-     * Triggers while changing the colors. It will be triggered based on the showButtons property.
-     * If the property is false, the event will be triggered while selecting the colors.
-     * If the property is true, the event will be triggered while apply the selected color.
-     *
-     * @event change
-     * @blazorProperty 'ValueChange'
-     */
-    change?: EmitType<ColorPickerEventArgs>;
-
-    /**
-     * Trigger while rendering each palette tile.
-     *
-     * @event beforeTileRender
-     * @blazorProperty 'OnTileRender'
-     */
-    beforeTileRender?: EmitType<PaletteTileEventArgs>;
-
-    /**
-     * Triggers before opening the ColorPicker popup.
-     *
-     * @event beforeOpen
-     * @blazorProperty 'OnOpen'
-     */
-    beforeOpen?: EmitType<BeforeOpenCloseEventArgs>;
-
-    /**
-     * Triggers while opening the ColorPicker popup.
-     *
-     * @event open
-     * @blazorProperty 'Opened'
-     */
-    open?: EmitType<OpenEventArgs>;
-
-    /**
-     * Triggers before closing the ColorPicker popup.
-     *
-     * @event beforeClose
-     * @blazorProperty 'OnClose'
-     */
-    beforeClose?: EmitType<BeforeOpenCloseEventArgs>;
-
-    /**
-     * Triggers before Switching between ColorPicker mode.
-     *
-     * @event beforeModeSwitch
-     * @blazorProperty 'OnModeSwitch'
-     */
-    beforeModeSwitch?: EmitType<ModeSwitchEventArgs>;
-
-    /**
-     * Triggers after Switching between ColorPicker mode.
-     *
-     * @event onModeSwitch
-     * @blazorProperty 'ModeSwitched'
-     */
-    onModeSwitch?: EmitType<ModeSwitchEventArgs>;
-
-    /**
-     * Triggers once the component rendering is completed.
-     *
-     * @event created
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
-
-}