@syncfusion/ej2-inputs 19.3.53 → 19.4.42

package/src/index.d.ts

@@ -9,3 +9,5 @@ export * from './form-validator/index';
 export * from './uploader/index';
 export * from './color-picker/index';
 export * from './textbox/index';
+export * from './signature/index';
+export * from './common/index';

package/src/index.js

@@ -9,3 +9,5 @@ export * from './form-validator/index';
 export * from './uploader/index';
 export * from './color-picker/index';
 export * from './textbox/index';
+export * from './signature/index';
+export * from './common/index';

package/src/input/input.js

@@ -192,7 +192,7 @@ 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);
+                updateLabelState(args.element.value, floatLabelElement, args.element);
             });
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             args.element.addEventListener('blur', function (event) {
@@ -242,7 +242,8 @@ export var Input;
             addClass([button], CLASSNAMES.CLEARICONHIDE);
         }
     }
-    function updateLabelState(value, label) {
+    function updateLabelState(value, label, element) {
+        if (element === void 0) { element = null; }
         if (value) {
             addClass([label], CLASSNAMES.LABELTOP);
             if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {
@@ -250,10 +251,13 @@ export var Input;
             }
         }
         else {
-            if (label.classList.contains(CLASSNAMES.LABELTOP)) {
-                removeClass([label], CLASSNAMES.LABELTOP);
+            var isNotFocused = element != null ? element !== document.activeElement : true;
+            if (isNotFocused) {
+                if (label.classList.contains(CLASSNAMES.LABELTOP)) {
+                    removeClass([label], CLASSNAMES.LABELTOP);
+                }
+                addClass([label], CLASSNAMES.LABELBOTTOM);
             }
-            addClass([label], CLASSNAMES.LABELBOTTOM);
         }
     }
     function getParentNode(element) {
@@ -322,7 +326,7 @@ export var Input;
         var parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
             var label = getParentNode(element).getElementsByClassName('e-float-text')[0];
-            updateLabelState(element.value, label);
+            updateLabelState(element.value, label, element);
         }
     }
     /**

package/src/numerictextbox/numerictextbox.js

@@ -615,6 +615,10 @@ var NumericTextBox = /** @class */ (function (_super) {
                         }
                         _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);
                     }
+                    if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {
+                        _this.element.value = _this.element.value.substring(0, prevPos) +
+                            _this.element.value.substring(currentPos, _this.element.value.length);
+                    }
                 }
                 _this.prevVal = _this.element.value;
             }
@@ -662,6 +666,11 @@ var NumericTextBox = /** @class */ (function (_super) {
         if (this.isVue) {
             var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);
             var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
+            //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
+            var nonZeroRegex = new RegExp('[^1-9]+$');
+            if (nonZeroRegex.test(this.element.value)) {
+                current = this.value;
+            }
             var eventArgs = {
                 event: event,
                 value: (current === null || isNaN(current) ? null : current),
@@ -979,6 +988,7 @@ var NumericTextBox = /** @class */ (function (_super) {
         }
     };
     NumericTextBox.prototype.mouseUpOnSpinner = function (event) {
+        this.prevValue = this.value;
         if (this.isPrevFocused) {
             this.element.focus();
             if (!Browser.isDevice) {

package/src/signature/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Signature modules
+ */
+export * from './signature';
+export * from './signature-model';

package/src/signature/index.js

@@ -0,0 +1,4 @@
+/**
+ * Signature modules
+ */
+export * from './signature';

package/src/signature/signature-model.d.ts

@@ -0,0 +1,131 @@
+import { Event, EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class Signature
+ */
+export interface SignatureModel {
+
+    /**
+     * Gets or sets the background color of the component.
+     * The background color of the component that accepts hex value, rgb and text (like 'red'). The default value is ''.
+     *
+     * @default ''
+     */
+    backgroundColor?: string;
+
+    /**
+     * Gets or sets the background image for the component.
+     * An image that used to fill the background of the component. The default value is ''.
+     *
+     * @default ''
+     */
+    backgroundImage?: string;
+
+    /**
+     * Gets or sets whether to disable the signature component where the opacity is set to show disabled state.
+     * True, if the signature component is disabled for user interaction. The default value is false.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Gets or sets whether to prevent the interaction in signature component.
+     * True, if the signature component is read only state where the user interaction is prevented. The default value is false.
+     *
+     * @default false
+     */
+    isReadOnly?: boolean;
+
+    /**
+     * Gets or sets whether to save the signature along with Background Color and background Image while saving.
+     * True, if signature component to save with background. The default value is true.
+     *
+     * @default true
+     */
+    saveWithBackground?: boolean;
+
+    /**
+     * Gets or sets the stroke color of the signature.
+     * The color of the signature stroke that accepts hex value, rgb and text (like 'red'). The default value is "#000000".
+     *
+     * @default '#000000'
+     */
+    strokeColor?: string;
+
+    /**
+     * Gets or sets the minimum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The minimum width of stroke. The default value is 0.5.
+     *
+     * @default 0.5
+     */
+    minStrokeWidth?: number;
+
+    /**
+     * Gets or sets the maximum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The maximum width of stroke. The default value is 2.0.
+     *
+     * @default 2
+     */
+    maxStrokeWidth?: number;
+
+    /**
+     * Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface.
+     * The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The default value is 0.7.
+     *
+     * @default 0.7
+     */
+    velocity?: number;
+
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
+     *
+     * @default 'en-US'
+     * @private
+     */
+    locale?: string;
+
+    /**
+     * Specifies the Signature in RTL mode that displays the content in the right-to-left direction.
+     *
+     * @default false
+     * @private
+     */
+    enableRtl?: boolean;
+
+    /**
+     * Gets or sets whether to persist component's state between page reloads.
+     * True, if the component's state persistence is enabled. The default value is false.
+     * Component's property will be stored in browser local storage to persist component's state when page reloads.
+     *
+     * @default false
+     */
+    enablePersistence?: boolean;
+
+    /**
+     * Gets or sets an event callback that is raised while saving the signature.
+     * The file name and the file type can be changed using SignatureBeforeSaveEventArgs and SignatureFileType.
+     * The event callback is raised only for the keyboard action (Ctrl + S).
+     *
+     * @event beforeSave
+     */
+    beforeSave?: EmitType<SignatureBeforeSaveEventArgs>;
+
+    /**
+     * Gets or sets an event callback that is raised for the actions like undo, redo, clear and while user complete signing on signature component.
+     *
+     * @event change
+     */
+    change?: EmitType<SignatureChangeEventArgs>;
+
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+}

package/src/signature/signature.d.ts

@@ -0,0 +1,167 @@
+import { EmitType, INotifyPropertyChanged } from '@syncfusion/ej2-base';
+import { SignatureBase, SignatureBeforeSaveEventArgs, SignatureChangeEventArgs } from '../common/signature-base';
+import { SignatureModel } from './signature-model';
+/**
+ * The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation.
+ * It allows to save signature as image.
+ * You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.
+ * Signature component is a user interface to draw the Signature or Text.
+ * It provides supports for various Background color, Stroke color and Background Image.
+ * ```html
+ * <canvas id="signature"></canvas>
+ * ```
+ * ```typescript
+ * <script>
+ *   let signatureObj: Signature = new Signature(null , "#signature");
+ * </script>
+ * ```
+ */
+export declare class Signature extends SignatureBase implements INotifyPropertyChanged {
+    /**
+     * Gets or sets the background color of the component.
+     * The background color of the component that accepts hex value, rgb and text (like 'red'). The default value is ''.
+     *
+     * @default ''
+     */
+    backgroundColor: string;
+    /**
+     * Gets or sets the background image for the component.
+     * An image that used to fill the background of the component. The default value is ''.
+     *
+     * @default ''
+     */
+    backgroundImage: string;
+    /**
+     * Gets or sets whether to disable the signature component where the opacity is set to show disabled state.
+     * True, if the signature component is disabled for user interaction. The default value is false.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Gets or sets whether to prevent the interaction in signature component.
+     * True, if the signature component is read only state where the user interaction is prevented. The default value is false.
+     *
+     * @default false
+     */
+    isReadOnly: boolean;
+    /**
+     * Gets or sets whether to save the signature along with Background Color and background Image while saving.
+     * True, if signature component to save with background. The default value is true.
+     *
+     * @default true
+     */
+    saveWithBackground: boolean;
+    /**
+     * Gets or sets the stroke color of the signature.
+     * The color of the signature stroke that accepts hex value, rgb and text (like 'red'). The default value is "#000000".
+     *
+     * @default '#000000'
+     */
+    strokeColor: string;
+    /**
+     * Gets or sets the minimum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The minimum width of stroke. The default value is 0.5.
+     *
+     * @default 0.5
+     */
+    minStrokeWidth: number;
+    /**
+     * Gets or sets the maximum stroke width for signature.
+     * The signature component calculates stroke width based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The maximum width of stroke. The default value is 2.0.
+     *
+     * @default 2
+     */
+    maxStrokeWidth: number;
+    /**
+     * Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface.
+     * The Signature component calculates stroke thickness based on Velocity, MinStrokeWidth and MaxStrokeWidth.
+     * The default value is 0.7.
+     *
+     * @default 0.7
+     */
+    velocity: number;
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
+     *
+     * @default 'en-US'
+     * @private
+     */
+    locale: string;
+    /**
+     * Specifies the Signature in RTL mode that displays the content in the right-to-left direction.
+     *
+     * @default false
+     * @private
+     */
+    enableRtl: boolean;
+    /**
+     * Gets or sets whether to persist component's state between page reloads.
+     * True, if the component's state persistence is enabled. The default value is false.
+     * Component's property will be stored in browser local storage to persist component's state when page reloads.
+     *
+     * @default false
+     */
+    enablePersistence: boolean;
+    /**
+     * Gets or sets an event callback that is raised while saving the signature.
+     * The file name and the file type can be changed using SignatureBeforeSaveEventArgs and SignatureFileType.
+     * The event callback is raised only for the keyboard action (Ctrl + S).
+     *
+     * @event beforeSave
+     */
+    beforeSave: EmitType<SignatureBeforeSaveEventArgs>;
+    /**
+     * Gets or sets an event callback that is raised for the actions like undo, redo, clear and while user complete signing on signature component.
+     *
+     * @event change
+     */
+    change: EmitType<SignatureChangeEventArgs>;
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param {SignatureModel} options - Specifies the Signature model.
+     * @param {string | HTMLCanvasElement} element - Specifies the element.
+     * @private
+     */
+    constructor(options?: SignatureModel, element?: string | HTMLCanvasElement);
+    protected preRender(): void;
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    protected render(): void;
+    initialize(): void;
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    protected getModuleName(): string;
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    protected getPersistData(): string;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {SignatureModel} newProp - Specifies new properties
+     * @param  {SignatureModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp: SignatureModel, oldProp: SignatureModel): void;
+}

package/src/signature/signature.js

@@ -0,0 +1,171 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Event } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, Property, addClass } from '@syncfusion/ej2-base';
+import { SignatureBase } from '../common/signature-base';
+/**
+ * The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation.
+ * It allows to save signature as image.
+ * You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.
+ * Signature component is a user interface to draw the Signature or Text.
+ * It provides supports for various Background color, Stroke color and Background Image.
+ * ```html
+ * <canvas id="signature"></canvas>
+ * ```
+ * ```typescript
+ * <script>
+ *   let signatureObj: Signature = new Signature(null , "#signature");
+ * </script>
+ * ```
+ */
+var Signature = /** @class */ (function (_super) {
+    __extends(Signature, _super);
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param {SignatureModel} options - Specifies the Signature model.
+     * @param {string | HTMLCanvasElement} element - Specifies the element.
+     * @private
+     */
+    function Signature(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    Signature.prototype.preRender = function () {
+        // pre render code snippets
+    };
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    Signature.prototype.render = function () {
+        this.initialize();
+    };
+    Signature.prototype.initialize = function () {
+        addClass([this.element], 'e-' + this.getModuleName());
+        _super.prototype.initialize.call(this, this.element);
+        if (this.enablePersistence) {
+            this.loadPersistedSignature();
+        }
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    Signature.prototype.getModuleName = function () {
+        return 'signature';
+    };
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    Signature.prototype.getPersistData = function () {
+        return this.addOnPersist(['signatureValue']);
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {SignatureModel} newProp - Specifies new properties
+     * @param  {SignatureModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    Signature.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'backgroundColor':
+                    _super.prototype.propertyChanged.call(this, prop, newProp.backgroundColor);
+                    break;
+                case 'backgroundImage':
+                    _super.prototype.propertyChanged.call(this, prop, newProp.backgroundImage);
+                    break;
+                case 'strokeColor':
+                    if (newProp.strokeColor !== oldProp.strokeColor) {
+                        _super.prototype.propertyChanged.call(this, prop, newProp.strokeColor);
+                    }
+                    break;
+                case 'saveWithBackground':
+                    _super.prototype.propertyChanged.call(this, prop, newProp.saveWithBackground);
+                    break;
+                case 'isReadOnly':
+                    _super.prototype.propertyChanged.call(this, prop, newProp.isReadOnly);
+                    break;
+                case 'disabled':
+                    _super.prototype.propertyChanged.call(this, prop, newProp.disabled);
+                    break;
+            }
+        }
+    };
+    __decorate([
+        Property('')
+    ], Signature.prototype, "backgroundColor", void 0);
+    __decorate([
+        Property('')
+    ], Signature.prototype, "backgroundImage", void 0);
+    __decorate([
+        Property(false)
+    ], Signature.prototype, "disabled", void 0);
+    __decorate([
+        Property(false)
+    ], Signature.prototype, "isReadOnly", void 0);
+    __decorate([
+        Property(true)
+    ], Signature.prototype, "saveWithBackground", void 0);
+    __decorate([
+        Property('#000000')
+    ], Signature.prototype, "strokeColor", void 0);
+    __decorate([
+        Property(0.5)
+    ], Signature.prototype, "minStrokeWidth", void 0);
+    __decorate([
+        Property(2)
+    ], Signature.prototype, "maxStrokeWidth", void 0);
+    __decorate([
+        Property(0.7)
+    ], Signature.prototype, "velocity", void 0);
+    __decorate([
+        Property('en-US')
+    ], Signature.prototype, "locale", void 0);
+    __decorate([
+        Property(false)
+    ], Signature.prototype, "enableRtl", void 0);
+    __decorate([
+        Property(false)
+    ], Signature.prototype, "enablePersistence", void 0);
+    __decorate([
+        Event()
+    ], Signature.prototype, "beforeSave", void 0);
+    __decorate([
+        Event()
+    ], Signature.prototype, "change", void 0);
+    __decorate([
+        Event()
+    ], Signature.prototype, "created", void 0);
+    Signature = __decorate([
+        NotifyPropertyChanges
+    ], Signature);
+    return Signature;
+}(SignatureBase));
+export { Signature };

package/src/slider/slider.d.ts

@@ -534,6 +534,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private repeatButton;
     private repeatHandlerMouse;
     private materialChange;
+    private focusHandle;
     private repeatHandlerUp;
     private customTickCounter;
     private renderScale;

package/src/slider/slider.js

@@ -614,9 +614,11 @@ var Slider = /** @class */ (function (_super) {
         this.sliderBarClick(e);
         if (e.currentTarget === this.firstHandle) {
             this.firstHandle.classList.add(classNames.sliderHandleFocused);
+            this.firstHandle.classList.add(classNames.sliderTabHandle);
         }
         else {
             this.secondHandle.classList.add(classNames.sliderHandleFocused);
+            this.secondHandle.classList.add(classNames.sliderTabHandle);
         }
         EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);
         EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);
@@ -1030,6 +1032,11 @@ var Slider = /** @class */ (function (_super) {
             this.getHandle().classList.add('e-large-thumb-size');
         }
     };
+    Slider.prototype.focusHandle = function () {
+        if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {
+            this.getHandle().classList.add(classNames.sliderTabHandle);
+        }
+    };
     Slider.prototype.repeatHandlerUp = function (e) {
         this.changeEvent('changed', e);
         this.closeTooltip();
@@ -1427,6 +1434,7 @@ var Slider = /** @class */ (function (_super) {
         }
         this.tooltipToggle(this.getHandle());
         this.getHandle().focus();
+        this.focusHandle();
         if (args.currentTarget.classList.contains(classNames.firstButton)) {
             EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);
         }
@@ -2371,6 +2379,7 @@ var Slider = /** @class */ (function (_super) {
         event.preventDefault();
         this.focusSliderElement();
         this.sliderBarClick(event);
+        this.focusHandle();
     };
     Slider.prototype.wireEvents = function () {
         this.onresize = this.reposition.bind(this);