@syncfusion/ej2-inputs
Advanced tools
@syncfusion/ej2-inputs - npm Package Compare versions
Comparing version 16.2.45 to 16.2.46
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/color-picker/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * color-picker | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * color-picker | ||
| */ | ||
| export * from './src/color-picker/index'; |
@@ -0,1 +1,10 @@ | ||
| /*! | ||
| * filename: index.d.ts | ||
| * version : 16.2.46 | ||
| * Copyright Syncfusion Inc. 2001 - 2018. 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 | ||
| * licensing@syncfusion.com. Any infringement will be prosecuted under | ||
| * applicable laws. | ||
| */ | ||
| import * as _inputs from '@syncfusion/ej2-inputs'; | ||
@@ -2,0 +11,0 @@ import * as _base from '@syncfusion/ej2-base'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/form-validator/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * form-validator | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * form-validator | ||
| */ | ||
| export * from './src/form-validator/index'; |
15
index.js
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * index | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * index | ||
| */ | ||
| export * from './src/index'; |
15
input.js
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/input/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * input | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * input | ||
| */ | ||
| export * from './src/input/index'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/maskedtextbox/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * maskedtextbox | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * maskedtextbox | ||
| */ | ||
| export * from './src/maskedtextbox/index'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/numerictextbox/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * numerictextbox | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * numerictextbox | ||
| */ | ||
| export * from './src/numerictextbox/index'; |
| { | ||
| "name": "@syncfusion/ej2-inputs", | ||
| "version": "16.2.45", | ||
| "version": "16.2.46", | ||
| "description": "Essential JS 2 Input Components", | ||
@@ -8,9 +8,9 @@ "author": "Syncfusion Inc.", | ||
| "main": "./dist/ej2-inputs.umd.min.js", | ||
| "module": "./dist/es6/ej2-inputs.es5.js", | ||
| "module": "./index.js", | ||
| "es2015": "./dist/es6/ej2-inputs.es2015.js", | ||
| "dependencies": { | ||
| "@syncfusion/ej2-base": "~16.2.45", | ||
| "@syncfusion/ej2-buttons": "~16.2.45", | ||
| "@syncfusion/ej2-popups": "~16.2.45", | ||
| "@syncfusion/ej2-splitbuttons": "~16.2.45" | ||
| "@syncfusion/ej2-base": "~16.2.46", | ||
| "@syncfusion/ej2-buttons": "~16.2.46", | ||
| "@syncfusion/ej2-popups": "~16.2.46", | ||
| "@syncfusion/ej2-splitbuttons": "~16.2.46" | ||
| }, | ||
@@ -26,23 +26,11 @@ "devDependencies": { | ||
| "syncfusion", | ||
| "web-components", | ||
| "ej2-inputs", | ||
| "input", | ||
| "input box", | ||
| "textbox", | ||
| "form control", | ||
| "textbox html", | ||
| "text area", | ||
| "essential js 2 textbox", | ||
| "html5 textbox", | ||
| "floating input", | ||
| "floating label", | ||
| "ej2-numeric", | ||
| "numeric", | ||
| "spinner", | ||
| "numeric textbox", | ||
| "percent textbox", | ||
| "masked textbox", | ||
| "currency textbox", | ||
| "spin buttons", | ||
| "numeric updown", | ||
| "number formatting", | ||
| "number input", | ||
| "form controls", | ||
| "input controls", | ||
| "color", | ||
@@ -58,3 +46,32 @@ "color picker", | ||
| "ej2 colorpicker", | ||
| "color chooser" | ||
| "color chooser", | ||
| "validator", | ||
| "form", | ||
| "form validator", | ||
| "masked textbox", | ||
| "masked input", | ||
| "input mask", | ||
| "date mask", | ||
| "mask format", | ||
| "numeric textbox", | ||
| "percent textbox", | ||
| "percentage textbox", | ||
| "currency textbox", | ||
| "numeric spinner", | ||
| "numeric up-down", | ||
| "number input", | ||
| "slider", | ||
| "range slider", | ||
| "minrange", | ||
| "slider limits", | ||
| "localization slider", | ||
| "format slider", | ||
| "slider with tooltip", | ||
| "vertical slider", | ||
| "mobile slider", | ||
| "upload", | ||
| "upload-box", | ||
| "input-file", | ||
| "floating-label", | ||
| "chunk-upload" | ||
| ], | ||
@@ -61,0 +78,0 @@ "repository": { |
147
ReadMe.md
@@ -1,8 +0,141 @@ | ||
| A package of Essential JS 2 Input textbox components. It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started. | ||
| # ej2-inputs | ||
| ## Resources | ||
| * [NumericTextBoxes Demos](http://ej2.syncfusion.com/demos/#/numerictextbox/default.html) | ||
| * [TextBox Demos](http://ej2.syncfusion.com/demos/#/textboxes/default.html) | ||
| * [MaskedTextBox Demos](http://ej2.syncfusion.com/demos/#/maskedtextbox/default.html) | ||
| * [Uploader](http://ej2.syncfusion.com/demos/#/uploader/default.html) | ||
| * [ColorPicker](http://ej2.syncfusion.com/demos/#/colorpicker/default.html) | ||
| A package of Essential JS 2 Input textbox components. It comes with a collection of form components which is useful to get different input values from the users such as text, numbers, patterns, color and file inputs. | ||
|  | ||
| > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials). | ||
| > A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. | ||
| ## Setup | ||
| To install Input and its dependent packages, use the following command | ||
| ```sh | ||
| npm install @syncfusion/ej2-inputs | ||
| ``` | ||
| ## Components included | ||
| Following list of components are available in the package. | ||
| * **ColorPicker** - Color picker is a user interface that is used to select and adjust color values. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/color-picker/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=button) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=colorpicker#/material/colorpicker/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/color-picker) | ||
| * **FormValidator** - The FormValidator is used to validate the form elements before submitting to the server. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/form-validator/?lang=typescript&utm_source=npm&utm_campaign=formvalidator) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=formvalidator#/material/form-validator/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/form-validator) | ||
| * **TextBox** - The text box component is an extended version of the HTML input control which is used to edit or display text input on a form. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/textbox/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=textbox) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/text-box) | ||
| * **MaskedTextBox** - MaskedTextBox allows the user to enter the valid input only based on the provided mask. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/maskedtextbox/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/maskedtextbox) | ||
| * **NumericTextBox** - NumericTextBox is used to get the number inputs from the user. The input values can be incremented or decremented by a predefined step value. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=numerictextbox) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/numerictextbox) | ||
| * **Slider** - The slider component allows you to select a value or range of values between the min and max range. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/slider/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=slider) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/slider?utm_source=npm&utm_campaign=slider) | ||
| * **Uploader** - The uploader component is an extended version of the HTML5 upload control which is used to upload images, documents, and other files to a server. | ||
| * [Getting Started](https://ej2.syncfusion.com/documentation/uploader/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=upload) | ||
| * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/default.html) | ||
| * [Product Page](https://www.syncfusion.com/products/javascript/uploader) | ||
| ## Supported frameworks | ||
| Input component is also offered in following list of frameworks. | ||
| 1. [Angular](https://github.com/syncfusion/ej2-ng-inputs) | ||
| 2. [React](https://github.com/syncfusion/ej2-react-inputs) | ||
| 3. [VueJS](https://github.com/syncfusion/ej2-vue-inputs) | ||
| 4. [ASP.NET Core](https://www.syncfusion.com/products/aspnetcore/numerictextbox) | ||
| 5. [ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc/maskedtextbox) | ||
| 6. [JavaScript (ES5)](https://www.syncfusion.com/products/javascript/slider) | ||
| ## Showcase samples | ||
| * Expanse Tracker ([Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=numerictextbox#/expense)) | ||
| * Loan Calculator ([Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo]( https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=slider)) | ||
| * Cloud Pricing ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/azure-pricing.html)) | ||
| ## Key Features | ||
| ### 1. ColorPicker | ||
| - [**Color specification**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=colorpicker#/material/colorpicker/default.html) - Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes. | ||
| - [**Mode**](https://ej2.syncfusion.com/documentation/color-picker/mode-and-value.html?lang=typescript#mode-and-value) - Supports `Picker` and `Palette` mode. | ||
| - [**Inline**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=colorpicker#/material/colorpicker/inline.html) - Supports inline type rendering of color picker. | ||
| - [**Custom palettes**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=colorpicker#/material/colorpicker/custom.html) - Allows you to customize palettes and supports multiple palette groups rendering. | ||
| - [**Opacity**](https://ej2.syncfusion.com/documentation/color-picker/mode-and-value.html?lang=typescript#color-value) - Allows to set and change the `opacity` of the selected color. | ||
| - [**Accessibility**](https://ej2.syncfusion.com/documentation/color-picker/accessibility.html?lang=typescript#accessibility) - Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices. | ||
| ### 2. TextBox | ||
| - [**Floating Label**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) – floats the placeholder text while focus. | ||
| - [**Input Group**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) – group the icons, buttons along with textbox. | ||
| - [**Validation States**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) – provides styles for success, error, and warning states. | ||
| - [**Multiline**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=textbox#/material/textbox/default.html) – handles multiline input with placeholder text | ||
| ### 3. MaskedTextBox | ||
| - [**Custom Characters**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=maskedtextbox#/material/maskedtextbox/custommask.html) - allows you to use your own characters as the mask elements. | ||
| - [**Regular Expression**](https://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox#regular-expression) - can be used as a mask element for each character of the MaskedTextBox. | ||
| - [**Accessibility**](https://ej2.syncfusion.com/documentation/maskedtextbox/accessibility.html?lang=typescript&utm_source=npm&utm_campaign=maskedtextbox) - provides built-in accessibility support which helps to access all the MaskedTextBox component features through keyboard, on-screen readers, or other assistive technology devices. | ||
| ### 4. NumericTextBox | ||
| - [**Range Validation**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/range.html) - allows to set the minimum and maximum range of values in the NumericTextBox. | ||
| - [**Number Formats**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/format.html) - supports the number display formatting with MSDN standard and custom number formats. | ||
| - [**Precision Of Numbers**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=numerictextbox#/material/numerictextbox/restrict.html) - allows to restrict the number precision when enters the value. | ||
| - [**Keyboard Interaction**](https://ej2.syncfusion.com/documentation/numerictextbox/accessibility.html?lang=typescript&utm_source=npm&utm_campaign=numerictextbox#keyboard-interaction) - allows users to interact with the NumericTextBox using the keyboard. | ||
| - [**Accessibility**](https://ej2.syncfusion.com/documentation/numerictextbox/accessibility.html?lang=typescript&utm_source=npm&utm_campaign=numerictextbox) - provides built-in accessibility support which helps to access all the NumericTextBox component features through keyboard, on-screen readers or other assistive technology devices. | ||
| - [**Internationalization**](https://ej2.syncfusion.com/documentation/numerictextbox/internationalization.html?lang=typescript&utm_source=npm&utm_campaign=numerictextbox) - library provides support for formatting and parsing number using the official Unicode CLDR JSON data. | ||
| - [**Localization**](https://ej2.syncfusion.com/documentation/numerictextbox/internationalization.html?lang=typescript&utm_source=npm&utm_campaign=numerictextbox#localization) - Supports to localize spin up and down buttons title for the tooltip to different cultures. | ||
| ### 5. Slider | ||
| - [**Types**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Provided three types of Slider. | ||
| - [**Orientation**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/orientation.html) - Displays the Slider in horizontal or vertical direction. | ||
| - [**Buttons**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip.html) - Provided built-in support to render the buttons in both edges of the Slider. | ||
| - [**Tooltip**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/tooltip.html) - Displays a tooltip to show the currently selected value. | ||
| - [**Ticks**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/ticks.html) - Displays a scale with small and big ticks. | ||
| - [**Format**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/format.html) - Customize the slider values into various format. | ||
| - [**Limits**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/limits.html) - Slider thumb movement restriction enabled with interval dragging in range-slider. | ||
| - [**Accessibility**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/default.html) - Built-in compliance with the [WAI-ARIA](http://www.w3.org/WAI/PF/aria-practices/) specifications. | ||
| - [**Keyboard Interaction**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=slider#/material/slider/api.html) - The Slider can be intractable through the keyboard. | ||
| ### 6. Upload | ||
| - [**Chunk Upload**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/chunk-upload.html) – used to upload large files as chunks | ||
| - [**Drag-and-drop**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/drop-area.html) – drag the files and drop into component to upload them. | ||
| - [**Template**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/custom-template.html) – the file list and buttons can be customize using template | ||
| - [**Validation**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/validation.html) – validate extension and size of upload file | ||
| - [**Auto Upload**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/default.html) – Process the file to upload without interaction. | ||
| - [**Preload Files**](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=uploader#/material/uploader/preloadfiles.html) – View and manipulate previously uploaded files | ||
| ## Support | ||
| Product support is available for through following mediums. | ||
| * Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=input) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=input). | ||
| * New [GitHub issue](https://github.com/syncfusion/ej2-inputs/issues/new). | ||
| * Ask your query in Stack Overflow with tag `syncfusion`, `ej2`. | ||
| ## License | ||
| Check the license detail [here](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=input). | ||
| ## Changelog | ||
| Check the changelog [here](https://github.com/syncfusion/ej2-inputs/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=input) | ||
| © Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution. |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/slider/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * slider | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * slider | ||
| */ | ||
| export * from './src/slider/index'; |
@@ -1,2 +0,2 @@ | ||
| import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, createElement, 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, ClickEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider'; | ||
| 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, ClickEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup } 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"; | ||
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./color-picker"], function (require, exports, color_picker_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * ColorPicker modules | ||
| */ | ||
| __export(color_picker_1); | ||
| }); | ||
| /** | ||
| * ColorPicker modules | ||
| */ | ||
| export * from './color-picker'; |
@@ -17,722 +17,721 @@ var __extends = (this && this.__extends) || (function () { | ||
| }; | ||
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| import { selectAll, select, createElement, Base } from '@syncfusion/ej2-base'; | ||
| import { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base'; | ||
| import { Property, NotifyPropertyChanges, Event } from '@syncfusion/ej2-base'; | ||
| /** | ||
| * global declarations | ||
| */ | ||
| var VALIDATE_EMAIL = new RegExp('^[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,5}' + | ||
| '|[.]{1}[a-zA-Z]{2,4}[.]{1}[a-zA-Z]{2,4})$'); | ||
| var VALIDATE_URL = new RegExp('^((ftp|http|https):\/\/)?www\.([A-z]{2,})\.([A-z]{2,})$'); | ||
| var VALIDATE_DATE_ISO = new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'); | ||
| var VALIDATE_DIGITS = new RegExp('^[0-9]*$'); | ||
| var VALIDATE_PHONE = new RegExp('^[+]?[0-9]{9,13}$'); | ||
| var VALIDATE_CREDITCARD = new RegExp('^\\d{13,16}$'); | ||
| /** | ||
| * ErrorOption values | ||
| * @private | ||
| */ | ||
| export var ErrorOption; | ||
| (function (ErrorOption) { | ||
| ErrorOption[ErrorOption["Message"] = 0] = "Message"; | ||
| ErrorOption[ErrorOption["Label"] = 1] = "Label"; | ||
| })(ErrorOption || (ErrorOption = {})); | ||
| /** | ||
| * FormValidator class enables you to validate the form fields based on your defined rules | ||
| * ```html | ||
| * <form id='formId'> | ||
| * <input type='text' name='Name' /> | ||
| * <input type='text' name='Age' /> | ||
| * </form> | ||
| * <script> | ||
| * let formObject = new FormValidator('#formId', { | ||
| * rules: { Name: { required: true }, Age: { range: [18, 30] } }; | ||
| * }); | ||
| * formObject.validate(); | ||
| * </script> | ||
| * ``` | ||
| */ | ||
| var FormValidator = /** @class */ (function (_super) { | ||
| __extends(FormValidator, _super); | ||
| // Initializes the FormValidator | ||
| function FormValidator(element, options) { | ||
| var _this = _super.call(this, options, element) || this; | ||
| _this.validated = []; | ||
| _this.errorRules = []; | ||
| _this.allowSubmit = false; | ||
| _this.required = 'required'; | ||
| _this.infoElement = null; | ||
| _this.inputElement = null; | ||
| _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea'; | ||
| /** | ||
| * Specifies the default messages for validation rules. | ||
| * @default : { List of validation message }; | ||
| */ | ||
| _this.defaultMessages = { | ||
| required: 'This field is required.', | ||
| email: 'Please enter a valid email address.', | ||
| url: 'Please enter a valid URL.', | ||
| date: 'Please enter a valid date.', | ||
| dateIso: 'Please enter a valid date ( ISO ).', | ||
| creditcard: 'Please enter valid card number', | ||
| number: 'Please enter a valid number.', | ||
| digits: 'Please enter only digits.', | ||
| maxLength: 'Please enter no more than {0} characters.', | ||
| minLength: 'Please enter at least {0} characters.', | ||
| rangeLength: 'Please enter a value between {0} and {1} characters long.', | ||
| range: 'Please enter a value between {0} and {1}.', | ||
| max: 'Please enter a value less than or equal to {0}.', | ||
| min: 'Please enter a value greater than or equal to {0}.', | ||
| regex: 'Please enter a correct value.', | ||
| tel: 'Please enter a valid phone number.', | ||
| pattern: 'Please enter a correct pattern value.', | ||
| equalTo: 'Please enter the valid match text', | ||
| }; | ||
| if (typeof _this.rules === 'undefined') { | ||
| _this.rules = {}; | ||
| } | ||
| element = typeof element === 'string' ? select(element, document) : element; | ||
| // Set novalidate to prevent default HTML5 form validation | ||
| if (_this.element != null) { | ||
| _this.element.setAttribute('novalidate', ''); | ||
| _this.inputElements = selectAll(_this.selectQuery, _this.element); | ||
| _this.createHTML5Rules(); | ||
| _this.wireEvents(); | ||
| } | ||
| else { | ||
| return undefined; | ||
| } | ||
| return _this; | ||
| } | ||
| FormValidator_1 = FormValidator; | ||
| /** | ||
| * global declarations | ||
| * Add validation rules to the corresponding input element based on `name` attribute. | ||
| * @param {string} name `name` of form field. | ||
| * @param {Object} rules Validation rules for the corresponding element. | ||
| * @return {void} | ||
| */ | ||
| var VALIDATE_EMAIL = new RegExp('^[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,5}' + | ||
| '|[.]{1}[a-zA-Z]{2,4}[.]{1}[a-zA-Z]{2,4})$'); | ||
| var VALIDATE_URL = new RegExp('^((ftp|http|https):\/\/)?www\.([A-z]{2,})\.([A-z]{2,})$'); | ||
| var VALIDATE_DATE_ISO = new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'); | ||
| var VALIDATE_DIGITS = new RegExp('^[0-9]*$'); | ||
| var VALIDATE_PHONE = new RegExp('^[+]?[0-9]{9,13}$'); | ||
| var VALIDATE_CREDITCARD = new RegExp('^\\d{13,16}$'); | ||
| FormValidator.prototype.addRules = function (name, rules) { | ||
| if (name) { | ||
| if (this.rules.hasOwnProperty(name)) { | ||
| extend(this.rules[name], rules, {}); | ||
| } | ||
| else { | ||
| this.rules[name] = rules; | ||
| } | ||
| } | ||
| }; | ||
| /** | ||
| * ErrorOption values | ||
| * Remove validation to the corresponding field based on name attribute. | ||
| * When no parameter is passed, remove all the validations in the form. | ||
| * @param {string} name Input name attribute value. | ||
| * @param {string[]} rules List of validation rules need to be remove from the corresponding element. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.removeRules = function (name, rules) { | ||
| if (!name && !rules) { | ||
| this.rules = {}; | ||
| } | ||
| else if (this.rules[name] && !rules) { | ||
| delete this.rules[name]; | ||
| } | ||
| else if (!isNullOrUndefined(this.rules[name] && rules)) { | ||
| for (var i = 0; i < rules.length; i++) { | ||
| delete this.rules[name][rules[i]]; | ||
| } | ||
| } | ||
| else { | ||
| return; | ||
| } | ||
| }; | ||
| /** | ||
| * Validate the current form values using defined rules. | ||
| * Returns `true` when the form is valid otherwise `false` | ||
| * @param {string} selected - Optional parameter to validate specified element. | ||
| * @return {boolean} | ||
| */ | ||
| FormValidator.prototype.validate = function (selected) { | ||
| var rules = Object.keys(this.rules); | ||
| if (selected && rules.length) { | ||
| this.validateRules(selected); | ||
| //filter the selected element it don't have any valid input element | ||
| return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) { | ||
| return data.name === selected; | ||
| }).length === 0; | ||
| } | ||
| else { | ||
| for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) { | ||
| var name_1 = rules_1[_i]; | ||
| this.validateRules(name_1); | ||
| } | ||
| return this.errorRules.length === 0; | ||
| } | ||
| }; | ||
| /** | ||
| * Reset the value of all the fields in form. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.reset = function () { | ||
| this.element.reset(); | ||
| this.clearForm(); | ||
| }; | ||
| /** | ||
| * Get input element by name. | ||
| * @param {string} name - Input element name attribute value. | ||
| * @return {HTMLInputElement} | ||
| */ | ||
| FormValidator.prototype.getInputElement = function (name) { | ||
| this.inputElement = (select('[name=' + name + ']', this.element)); | ||
| return this.inputElement; | ||
| }; | ||
| /** | ||
| * Destroy the form validator object and error elements. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.destroy = function () { | ||
| this.reset(); | ||
| this.unwireEvents(); | ||
| this.rules = {}; | ||
| var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element); | ||
| for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) { | ||
| var element = elements_1[_i]; | ||
| element.remove(); | ||
| } | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| /** | ||
| * @private | ||
| */ | ||
| var ErrorOption; | ||
| (function (ErrorOption) { | ||
| ErrorOption[ErrorOption["Message"] = 0] = "Message"; | ||
| ErrorOption[ErrorOption["Label"] = 1] = "Label"; | ||
| })(ErrorOption = exports.ErrorOption || (exports.ErrorOption = {})); | ||
| FormValidator.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| // No code are needed | ||
| }; | ||
| ; | ||
| /** | ||
| * FormValidator class enables you to validate the form fields based on your defined rules | ||
| * ```html | ||
| * <form id='formId'> | ||
| * <input type='text' name='Name' /> | ||
| * <input type='text' name='Age' /> | ||
| * </form> | ||
| * <script> | ||
| * let formObject = new FormValidator('#formId', { | ||
| * rules: { Name: { required: true }, Age: { range: [18, 30] } }; | ||
| * }); | ||
| * formObject.validate(); | ||
| * </script> | ||
| * ``` | ||
| * @private | ||
| */ | ||
| var FormValidator = /** @class */ (function (_super) { | ||
| __extends(FormValidator, _super); | ||
| // Initializes the FormValidator | ||
| function FormValidator(element, options) { | ||
| var _this = _super.call(this, options, element) || this; | ||
| _this.validated = []; | ||
| _this.errorRules = []; | ||
| _this.allowSubmit = false; | ||
| _this.required = 'required'; | ||
| _this.infoElement = null; | ||
| _this.inputElement = null; | ||
| _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea'; | ||
| /** | ||
| * Specifies the default messages for validation rules. | ||
| * @default : { List of validation message }; | ||
| */ | ||
| _this.defaultMessages = { | ||
| required: 'This field is required.', | ||
| email: 'Please enter a valid email address.', | ||
| url: 'Please enter a valid URL.', | ||
| date: 'Please enter a valid date.', | ||
| dateIso: 'Please enter a valid date ( ISO ).', | ||
| creditcard: 'Please enter valid card number', | ||
| number: 'Please enter a valid number.', | ||
| digits: 'Please enter only digits.', | ||
| maxLength: 'Please enter no more than {0} characters.', | ||
| minLength: 'Please enter at least {0} characters.', | ||
| rangeLength: 'Please enter a value between {0} and {1} characters long.', | ||
| range: 'Please enter a value between {0} and {1}.', | ||
| max: 'Please enter a value less than or equal to {0}.', | ||
| min: 'Please enter a value greater than or equal to {0}.', | ||
| regex: 'Please enter a correct value.', | ||
| tel: 'Please enter a valid phone number.', | ||
| pattern: 'Please enter a correct pattern value.', | ||
| equalTo: 'Please enter the valid match text', | ||
| }; | ||
| if (typeof _this.rules === 'undefined') { | ||
| _this.rules = {}; | ||
| FormValidator.prototype.getModuleName = function () { | ||
| return 'formValidator'; | ||
| }; | ||
| FormValidator.prototype.clearForm = function () { | ||
| this.errorRules = []; | ||
| this.validated = []; | ||
| var elements = selectAll(this.selectQuery, this.element); | ||
| for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) { | ||
| var element = elements_2[_i]; | ||
| var input = element; | ||
| input.removeAttribute('aria-invalid'); | ||
| input.classList.remove(this.errorClass); | ||
| if (input.name.length > 0) { | ||
| this.getInputElement(input.name); | ||
| this.getErrorElement(input.name); | ||
| this.hideMessage(input.name); | ||
| } | ||
| element = typeof element === 'string' ? ej2_base_1.select(element, document) : element; | ||
| // Set novalidate to prevent default HTML5 form validation | ||
| if (_this.element != null) { | ||
| _this.element.setAttribute('novalidate', ''); | ||
| _this.inputElements = ej2_base_1.selectAll(_this.selectQuery, _this.element); | ||
| _this.createHTML5Rules(); | ||
| _this.wireEvents(); | ||
| } | ||
| else { | ||
| return undefined; | ||
| } | ||
| return _this; | ||
| input.classList.remove(this.validClass); | ||
| } | ||
| FormValidator_1 = FormValidator; | ||
| /** | ||
| * Add validation rules to the corresponding input element based on `name` attribute. | ||
| * @param {string} name `name` of form field. | ||
| * @param {Object} rules Validation rules for the corresponding element. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.addRules = function (name, rules) { | ||
| if (name) { | ||
| if (this.rules.hasOwnProperty(name)) { | ||
| ej2_base_2.extend(this.rules[name], rules, {}); | ||
| }; | ||
| FormValidator.prototype.createHTML5Rules = function () { | ||
| var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits', | ||
| 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min', | ||
| 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max', | ||
| 'data-val-creditcard', 'data-val-phone']; | ||
| var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel']; | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| // Default attribute rules | ||
| var allRule = {}; | ||
| for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) { | ||
| var rule = defRules_1[_b]; | ||
| if (input.getAttribute(rule) !== null) { | ||
| switch (rule) { | ||
| case 'required': | ||
| this.defRule(input, allRule, rule, input.required); | ||
| break; | ||
| case 'data-validation': | ||
| rule = input.getAttribute(rule); | ||
| this.defRule(input, allRule, rule, true); | ||
| break; | ||
| case 'type': | ||
| if (acceptedTypes.indexOf(input.type) !== -1) { | ||
| this.defRule(input, allRule, input.type, true); | ||
| } | ||
| break; | ||
| case 'rangeLength': | ||
| case 'range': | ||
| this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule))); | ||
| break; | ||
| case 'equalTo': | ||
| var id = input.getAttribute(rule); | ||
| this.defRule(input, allRule, rule, id); | ||
| break; | ||
| default: | ||
| if (input.getAttribute('data-val') === 'true') { | ||
| this.annotationRule(input, allRule, rule, input.getAttribute(rule)); | ||
| } | ||
| else { | ||
| this.defRule(input, allRule, rule, input.getAttribute(rule)); | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| this.rules[name] = rules; | ||
| } | ||
| } | ||
| }; | ||
| /** | ||
| * Remove validation to the corresponding field based on name attribute. | ||
| * When no parameter is passed, remove all the validations in the form. | ||
| * @param {string} name Input name attribute value. | ||
| * @param {string[]} rules List of validation rules need to be remove from the corresponding element. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.removeRules = function (name, rules) { | ||
| if (!name && !rules) { | ||
| this.rules = {}; | ||
| //adding pattern type validation | ||
| if (Object.keys(allRule).length !== 0) { | ||
| this.addRules(input.name, allRule); | ||
| } | ||
| else if (this.rules[name] && !rules) { | ||
| delete this.rules[name]; | ||
| } | ||
| }; | ||
| FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) { | ||
| var annotationRule = ruleName.split('-'); | ||
| var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto']; | ||
| var ruleFirstName = annotationRule[annotationRule.length - 1]; | ||
| var ruleSecondName = annotationRule[annotationRule.length - 2]; | ||
| if (rulesList.indexOf(ruleFirstName) !== -1) { | ||
| switch (ruleFirstName) { | ||
| case 'required': | ||
| this.defRule(input, ruleCon, 'required', value); | ||
| break; | ||
| case 'creditcard': | ||
| this.defRule(input, ruleCon, 'creditcard', value); | ||
| break; | ||
| case 'phone': | ||
| this.defRule(input, ruleCon, 'tel', value); | ||
| break; | ||
| } | ||
| else if (!ej2_base_2.isNullOrUndefined(this.rules[name] && rules)) { | ||
| for (var i = 0; i < rules.length; i++) { | ||
| delete this.rules[name][rules[i]]; | ||
| } | ||
| } | ||
| else if (rulesList.indexOf(ruleSecondName) !== -1) { | ||
| switch (ruleSecondName) { | ||
| case 'maxlength': | ||
| this.defRule(input, ruleCon, 'maxLength', value); | ||
| break; | ||
| case 'minlength': | ||
| this.defRule(input, ruleCon, 'minLength', value); | ||
| break; | ||
| case 'range': | ||
| var minvalue = input.getAttribute('data-val-range-min'); | ||
| var maxvalue = input.getAttribute('data-val-range-max'); | ||
| this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]); | ||
| break; | ||
| case 'equalto': | ||
| var id = input.getAttribute(ruleName).split('.'); | ||
| this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]); | ||
| break; | ||
| case 'regex': | ||
| this.defRule(input, ruleCon, 'regex', value); | ||
| break; | ||
| } | ||
| else { | ||
| return; | ||
| } | ||
| }; | ||
| FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) { | ||
| var message = input.getAttribute('data-' + ruleName + '-message'); | ||
| var annotationMessage = input.getAttribute('data-val-' + ruleName); | ||
| if (message) { | ||
| value = [value, message]; | ||
| } | ||
| else if (annotationMessage) { | ||
| value = [value, annotationMessage]; | ||
| } | ||
| ruleCon[ruleName] = value; | ||
| }; | ||
| // Wire events to the form elements | ||
| FormValidator.prototype.wireEvents = function () { | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| if (FormValidator_1.isCheckable(input)) { | ||
| EventHandler.add(input, 'click', this.clickHandler, this); | ||
| } | ||
| }; | ||
| /** | ||
| * Validate the current form values using defined rules. | ||
| * Returns `true` when the form is valid otherwise `false` | ||
| * @param {string} selected - Optional parameter to validate specified element. | ||
| * @return {boolean} | ||
| */ | ||
| FormValidator.prototype.validate = function (selected) { | ||
| var rules = Object.keys(this.rules); | ||
| if (selected && rules.length) { | ||
| this.validateRules(selected); | ||
| //filter the selected element it don't have any valid input element | ||
| return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) { | ||
| return data.name === selected; | ||
| }).length === 0; | ||
| else if (input.tagName === 'SELECT') { | ||
| EventHandler.add(input, 'change', this.changeHandler, this); | ||
| } | ||
| else { | ||
| for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) { | ||
| var name_1 = rules_1[_i]; | ||
| this.validateRules(name_1); | ||
| } | ||
| return this.errorRules.length === 0; | ||
| EventHandler.add(input, 'focusout', this.focusOutHandler, this); | ||
| EventHandler.add(input, 'keyup', this.keyUpHandler, this); | ||
| } | ||
| }; | ||
| /** | ||
| * Reset the value of all the fields in form. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.reset = function () { | ||
| this.element.reset(); | ||
| this.clearForm(); | ||
| }; | ||
| /** | ||
| * Get input element by name. | ||
| * @param {string} name - Input element name attribute value. | ||
| * @return {HTMLInputElement} | ||
| */ | ||
| FormValidator.prototype.getInputElement = function (name) { | ||
| this.inputElement = (ej2_base_1.select('[name=' + name + ']', this.element)); | ||
| return this.inputElement; | ||
| }; | ||
| /** | ||
| * Destroy the form validator object and error elements. | ||
| * @return {void} | ||
| */ | ||
| FormValidator.prototype.destroy = function () { | ||
| this.reset(); | ||
| this.unwireEvents(); | ||
| this.rules = {}; | ||
| var elements = ej2_base_1.selectAll('.' + this.errorClass + ', .' + this.validClass, this.element); | ||
| for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) { | ||
| var element = elements_1[_i]; | ||
| element.remove(); | ||
| } | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| /** | ||
| * @private | ||
| */ | ||
| FormValidator.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| // No code are needed | ||
| }; | ||
| ; | ||
| /** | ||
| * @private | ||
| */ | ||
| FormValidator.prototype.getModuleName = function () { | ||
| return 'formValidator'; | ||
| }; | ||
| FormValidator.prototype.clearForm = function () { | ||
| this.errorRules = []; | ||
| this.validated = []; | ||
| var elements = ej2_base_1.selectAll(this.selectQuery, this.element); | ||
| for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) { | ||
| var element = elements_2[_i]; | ||
| var input = element; | ||
| input.removeAttribute('aria-invalid'); | ||
| input.classList.remove(this.errorClass); | ||
| if (input.name.length > 0) { | ||
| this.getInputElement(input.name); | ||
| this.getErrorElement(input.name); | ||
| this.hideMessage(input.name); | ||
| } | ||
| input.classList.remove(this.validClass); | ||
| } | ||
| }; | ||
| FormValidator.prototype.createHTML5Rules = function () { | ||
| var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits', | ||
| 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min', | ||
| 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max', | ||
| 'data-val-creditcard', 'data-val-phone']; | ||
| var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel']; | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| // Default attribute rules | ||
| var allRule = {}; | ||
| for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) { | ||
| var rule = defRules_1[_b]; | ||
| if (input.getAttribute(rule) !== null) { | ||
| switch (rule) { | ||
| case 'required': | ||
| this.defRule(input, allRule, rule, input.required); | ||
| break; | ||
| case 'data-validation': | ||
| rule = input.getAttribute(rule); | ||
| this.defRule(input, allRule, rule, true); | ||
| break; | ||
| case 'type': | ||
| if (acceptedTypes.indexOf(input.type) !== -1) { | ||
| this.defRule(input, allRule, input.type, true); | ||
| } | ||
| break; | ||
| case 'rangeLength': | ||
| case 'range': | ||
| this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule))); | ||
| break; | ||
| case 'equalTo': | ||
| var id = input.getAttribute(rule); | ||
| this.defRule(input, allRule, rule, id); | ||
| break; | ||
| default: | ||
| if (input.getAttribute('data-val') === 'true') { | ||
| this.annotationRule(input, allRule, rule, input.getAttribute(rule)); | ||
| } | ||
| else { | ||
| this.defRule(input, allRule, rule, input.getAttribute(rule)); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| //adding pattern type validation | ||
| if (Object.keys(allRule).length !== 0) { | ||
| this.addRules(input.name, allRule); | ||
| } | ||
| } | ||
| }; | ||
| FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) { | ||
| var annotationRule = ruleName.split('-'); | ||
| var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto']; | ||
| var ruleFirstName = annotationRule[annotationRule.length - 1]; | ||
| var ruleSecondName = annotationRule[annotationRule.length - 2]; | ||
| if (rulesList.indexOf(ruleFirstName) !== -1) { | ||
| switch (ruleFirstName) { | ||
| case 'required': | ||
| this.defRule(input, ruleCon, 'required', value); | ||
| break; | ||
| case 'creditcard': | ||
| this.defRule(input, ruleCon, 'creditcard', value); | ||
| break; | ||
| case 'phone': | ||
| this.defRule(input, ruleCon, 'tel', value); | ||
| break; | ||
| } | ||
| } | ||
| else if (rulesList.indexOf(ruleSecondName) !== -1) { | ||
| switch (ruleSecondName) { | ||
| case 'maxlength': | ||
| this.defRule(input, ruleCon, 'maxLength', value); | ||
| break; | ||
| case 'minlength': | ||
| this.defRule(input, ruleCon, 'minLength', value); | ||
| break; | ||
| case 'range': | ||
| var minvalue = input.getAttribute('data-val-range-min'); | ||
| var maxvalue = input.getAttribute('data-val-range-max'); | ||
| this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]); | ||
| break; | ||
| case 'equalto': | ||
| var id = input.getAttribute(ruleName).split('.'); | ||
| this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]); | ||
| break; | ||
| case 'regex': | ||
| this.defRule(input, ruleCon, 'regex', value); | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) { | ||
| var message = input.getAttribute('data-' + ruleName + '-message'); | ||
| var annotationMessage = input.getAttribute('data-val-' + ruleName); | ||
| if (message) { | ||
| value = [value, message]; | ||
| } | ||
| else if (annotationMessage) { | ||
| value = [value, annotationMessage]; | ||
| } | ||
| ruleCon[ruleName] = value; | ||
| }; | ||
| // Wire events to the form elements | ||
| FormValidator.prototype.wireEvents = function () { | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| if (FormValidator_1.isCheckable(input)) { | ||
| ej2_base_2.EventHandler.add(input, 'click', this.clickHandler, this); | ||
| } | ||
| else if (input.tagName === 'SELECT') { | ||
| ej2_base_2.EventHandler.add(input, 'change', this.changeHandler, this); | ||
| } | ||
| else { | ||
| ej2_base_2.EventHandler.add(input, 'focusout', this.focusOutHandler, this); | ||
| ej2_base_2.EventHandler.add(input, 'keyup', this.keyUpHandler, this); | ||
| } | ||
| } | ||
| ej2_base_2.EventHandler.add(this.element, 'submit', this.submitHandler, this); | ||
| ej2_base_2.EventHandler.add(this.element, 'reset', this.resetHandler, this); | ||
| }; | ||
| // UnWire events to the form elements | ||
| FormValidator.prototype.unwireEvents = function () { | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| ej2_base_2.EventHandler.clearEvents(input); | ||
| } | ||
| ej2_base_2.EventHandler.remove(this.element, 'submit', this.submitHandler); | ||
| ej2_base_2.EventHandler.remove(this.element, 'reset', this.resetHandler); | ||
| }; | ||
| // Handle input element focusout event | ||
| FormValidator.prototype.focusOutHandler = function (e) { | ||
| this.trigger('focusout', e); | ||
| //FormValidator.triggerCallback(this.focusout, e); | ||
| var element = e.target; | ||
| if (this.rules[element.name]) { | ||
| if (this.rules[element.name][this.required] || element.value.length > 0) { | ||
| this.validate(element.name); | ||
| } | ||
| else if (this.validated.indexOf(element.name) === -1) { | ||
| this.validated.push(element.name); | ||
| } | ||
| } | ||
| }; | ||
| // Handle input element keyup event | ||
| FormValidator.prototype.keyUpHandler = function (e) { | ||
| this.trigger('keyup', e); | ||
| var element = e.target; | ||
| // List of keys need to prevent while validation | ||
| var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225]; | ||
| if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) { | ||
| return; | ||
| } | ||
| if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) { | ||
| } | ||
| EventHandler.add(this.element, 'submit', this.submitHandler, this); | ||
| EventHandler.add(this.element, 'reset', this.resetHandler, this); | ||
| }; | ||
| // UnWire events to the form elements | ||
| FormValidator.prototype.unwireEvents = function () { | ||
| for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
| var input = _a[_i]; | ||
| EventHandler.clearEvents(input); | ||
| } | ||
| EventHandler.remove(this.element, 'submit', this.submitHandler); | ||
| EventHandler.remove(this.element, 'reset', this.resetHandler); | ||
| }; | ||
| // Handle input element focusout event | ||
| FormValidator.prototype.focusOutHandler = function (e) { | ||
| this.trigger('focusout', e); | ||
| //FormValidator.triggerCallback(this.focusout, e); | ||
| var element = e.target; | ||
| if (this.rules[element.name]) { | ||
| if (this.rules[element.name][this.required] || element.value.length > 0) { | ||
| this.validate(element.name); | ||
| } | ||
| }; | ||
| // Handle input click event | ||
| FormValidator.prototype.clickHandler = function (e) { | ||
| this.trigger('click', e); | ||
| var element = e.target; | ||
| // If element type is not submit allow validation | ||
| if (element.type !== 'submit') { | ||
| this.validate(element.name); | ||
| else if (this.validated.indexOf(element.name) === -1) { | ||
| this.validated.push(element.name); | ||
| } | ||
| else if (element.getAttribute('formnovalidate') !== null) { | ||
| // Prevent form validation, if submit button has formnovalidate attribute | ||
| this.allowSubmit = true; | ||
| } | ||
| }; | ||
| // Handle input change event | ||
| FormValidator.prototype.changeHandler = function (e) { | ||
| this.trigger('change', e); | ||
| var element = e.target; | ||
| } | ||
| }; | ||
| // Handle input element keyup event | ||
| FormValidator.prototype.keyUpHandler = function (e) { | ||
| this.trigger('keyup', e); | ||
| var element = e.target; | ||
| // List of keys need to prevent while validation | ||
| var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225]; | ||
| if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) { | ||
| return; | ||
| } | ||
| if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) { | ||
| this.validate(element.name); | ||
| }; | ||
| // Handle form submit event | ||
| FormValidator.prototype.submitHandler = function (e) { | ||
| this.trigger('submit', e); | ||
| //FormValidator.triggerCallback(this.submit, e); | ||
| // Prevent form submit if validation failed | ||
| if (!this.allowSubmit && !this.validate()) { | ||
| e.preventDefault(); | ||
| } | ||
| }; | ||
| // Handle input click event | ||
| FormValidator.prototype.clickHandler = function (e) { | ||
| this.trigger('click', e); | ||
| var element = e.target; | ||
| // If element type is not submit allow validation | ||
| if (element.type !== 'submit') { | ||
| this.validate(element.name); | ||
| } | ||
| else if (element.getAttribute('formnovalidate') !== null) { | ||
| // Prevent form validation, if submit button has formnovalidate attribute | ||
| this.allowSubmit = true; | ||
| } | ||
| }; | ||
| // Handle input change event | ||
| FormValidator.prototype.changeHandler = function (e) { | ||
| this.trigger('change', e); | ||
| var element = e.target; | ||
| this.validate(element.name); | ||
| }; | ||
| // Handle form submit event | ||
| FormValidator.prototype.submitHandler = function (e) { | ||
| this.trigger('submit', e); | ||
| //FormValidator.triggerCallback(this.submit, e); | ||
| // Prevent form submit if validation failed | ||
| if (!this.allowSubmit && !this.validate()) { | ||
| e.preventDefault(); | ||
| } | ||
| else { | ||
| this.allowSubmit = false; | ||
| } | ||
| }; | ||
| // Handle form reset | ||
| FormValidator.prototype.resetHandler = function () { | ||
| this.clearForm(); | ||
| }; | ||
| // Validate each rule based on input element name | ||
| FormValidator.prototype.validateRules = function (name) { | ||
| if (!this.rules[name]) { | ||
| return; | ||
| } | ||
| var rules = Object.keys(this.rules[name]); | ||
| var hiddenType = false; | ||
| var validateHiddenType = false; | ||
| var vhPos = rules.indexOf('validateHidden'); | ||
| var hPos = rules.indexOf('hidden'); | ||
| this.getInputElement(name); | ||
| if (hPos !== -1) { | ||
| hiddenType = true; | ||
| } | ||
| if (vhPos !== -1) { | ||
| validateHiddenType = true; | ||
| } | ||
| if (!hiddenType || (hiddenType && validateHiddenType)) { | ||
| if (vhPos !== -1) { | ||
| rules.splice(vhPos, 1); | ||
| } | ||
| else { | ||
| this.allowSubmit = false; | ||
| } | ||
| }; | ||
| // Handle form reset | ||
| FormValidator.prototype.resetHandler = function () { | ||
| this.clearForm(); | ||
| }; | ||
| // Validate each rule based on input element name | ||
| FormValidator.prototype.validateRules = function (name) { | ||
| if (!this.rules[name]) { | ||
| return; | ||
| } | ||
| var rules = Object.keys(this.rules[name]); | ||
| var hiddenType = false; | ||
| var validateHiddenType = false; | ||
| var vhPos = rules.indexOf('validateHidden'); | ||
| var hPos = rules.indexOf('hidden'); | ||
| this.getInputElement(name); | ||
| if (hPos !== -1) { | ||
| hiddenType = true; | ||
| rules.splice((hPos - 1), 1); | ||
| } | ||
| if (vhPos !== -1) { | ||
| validateHiddenType = true; | ||
| } | ||
| if (!hiddenType || (hiddenType && validateHiddenType)) { | ||
| if (vhPos !== -1) { | ||
| rules.splice(vhPos, 1); | ||
| } | ||
| if (hPos !== -1) { | ||
| rules.splice((hPos - 1), 1); | ||
| } | ||
| this.getErrorElement(name); | ||
| for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) { | ||
| var rule = rules_2[_i]; | ||
| var errorMessage = this.getErrorMessage(this.rules[name][rule], rule); | ||
| var errorRule = { name: name, message: errorMessage }; | ||
| var eventArgs = { | ||
| inputName: name, | ||
| element: this.inputElement, | ||
| message: errorMessage | ||
| }; | ||
| if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) { | ||
| this.removeErrorRules(name); | ||
| this.errorRules.push(errorRule); | ||
| // Set aria attributes to invalid elements | ||
| this.inputElement.setAttribute('aria-invalid', 'true'); | ||
| this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info'); | ||
| this.inputElement.classList.add(this.errorClass); | ||
| this.inputElement.classList.remove(this.validClass); | ||
| if (!this.infoElement) { | ||
| this.createErrorElement(name, errorRule.message, this.inputElement); | ||
| } | ||
| else { | ||
| this.showMessage(errorRule); | ||
| } | ||
| eventArgs.errorElement = this.infoElement; | ||
| eventArgs.status = 'failure'; | ||
| this.inputElement.classList.add(this.errorClass); | ||
| this.inputElement.classList.remove(this.validClass); | ||
| this.optionalValidationStatus(name, eventArgs); | ||
| this.trigger('validationComplete', eventArgs); | ||
| // Set aria-required to required rule elements | ||
| if (rule === 'required') { | ||
| this.inputElement.setAttribute('aria-required', 'true'); | ||
| } | ||
| break; | ||
| this.getErrorElement(name); | ||
| for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) { | ||
| var rule = rules_2[_i]; | ||
| var errorMessage = this.getErrorMessage(this.rules[name][rule], rule); | ||
| var errorRule = { name: name, message: errorMessage }; | ||
| var eventArgs = { | ||
| inputName: name, | ||
| element: this.inputElement, | ||
| message: errorMessage | ||
| }; | ||
| if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) { | ||
| this.removeErrorRules(name); | ||
| this.errorRules.push(errorRule); | ||
| // Set aria attributes to invalid elements | ||
| this.inputElement.setAttribute('aria-invalid', 'true'); | ||
| this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info'); | ||
| this.inputElement.classList.add(this.errorClass); | ||
| this.inputElement.classList.remove(this.validClass); | ||
| if (!this.infoElement) { | ||
| this.createErrorElement(name, errorRule.message, this.inputElement); | ||
| } | ||
| else { | ||
| this.hideMessage(name); | ||
| eventArgs.status = 'success'; | ||
| this.trigger('validationComplete', eventArgs); | ||
| this.showMessage(errorRule); | ||
| } | ||
| eventArgs.errorElement = this.infoElement; | ||
| eventArgs.status = 'failure'; | ||
| this.inputElement.classList.add(this.errorClass); | ||
| this.inputElement.classList.remove(this.validClass); | ||
| this.optionalValidationStatus(name, eventArgs); | ||
| this.trigger('validationComplete', eventArgs); | ||
| // Set aria-required to required rule elements | ||
| if (rule === 'required') { | ||
| this.inputElement.setAttribute('aria-required', 'true'); | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| else { | ||
| return; | ||
| } | ||
| }; | ||
| // Update the optional validation status | ||
| FormValidator.prototype.optionalValidationStatus = function (name, refer) { | ||
| if (!this.rules[name][this.required] && !this.inputElement.value.length) { | ||
| this.infoElement.innerHTML = this.inputElement.value; | ||
| this.infoElement.setAttribute('aria-invalid', 'false'); | ||
| refer.status = ''; | ||
| this.hideMessage(name); | ||
| } | ||
| }; | ||
| // Check the input element whether it's value satisfy the validation rule or not | ||
| FormValidator.prototype.isValid = function (name, rule) { | ||
| var params = this.rules[name][rule]; | ||
| var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params; | ||
| var currentRule = this.rules[name][rule]; | ||
| var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element }; | ||
| this.trigger('validationBegin', args); | ||
| if (currentRule && typeof currentRule[0] === 'function') { | ||
| var fn = currentRule[0]; | ||
| return fn.call(this, { element: this.inputElement, value: this.inputElement.value }); | ||
| } | ||
| else if (FormValidator_1.isCheckable(this.inputElement)) { | ||
| if (rule !== 'required') { | ||
| return true; | ||
| else { | ||
| this.hideMessage(name); | ||
| eventArgs.status = 'success'; | ||
| this.trigger('validationComplete', eventArgs); | ||
| } | ||
| return ej2_base_1.selectAll('input[name=' + name + ']:checked', this.element).length > 0; | ||
| } | ||
| else { | ||
| return FormValidator_1.checkValidator[rule](args); | ||
| } | ||
| else { | ||
| return; | ||
| } | ||
| }; | ||
| // Update the optional validation status | ||
| FormValidator.prototype.optionalValidationStatus = function (name, refer) { | ||
| if (!this.rules[name][this.required] && !this.inputElement.value.length) { | ||
| this.infoElement.innerHTML = this.inputElement.value; | ||
| this.infoElement.setAttribute('aria-invalid', 'false'); | ||
| refer.status = ''; | ||
| this.hideMessage(name); | ||
| } | ||
| }; | ||
| // Check the input element whether it's value satisfy the validation rule or not | ||
| FormValidator.prototype.isValid = function (name, rule) { | ||
| var params = this.rules[name][rule]; | ||
| var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params; | ||
| var currentRule = this.rules[name][rule]; | ||
| var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element }; | ||
| this.trigger('validationBegin', args); | ||
| if (currentRule && typeof currentRule[0] === 'function') { | ||
| var fn = currentRule[0]; | ||
| return fn.call(this, { element: this.inputElement, value: this.inputElement.value }); | ||
| } | ||
| else if (FormValidator_1.isCheckable(this.inputElement)) { | ||
| if (rule !== 'required') { | ||
| return true; | ||
| } | ||
| }; | ||
| // Return default error message or custom error message | ||
| FormValidator.prototype.getErrorMessage = function (ruleValue, rule) { | ||
| var message = (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] : this.defaultMessages[rule]; | ||
| var formats = message.match(/{(\d)}/g); | ||
| if (!ej2_base_2.isNullOrUndefined(formats)) { | ||
| for (var i = 0; i < formats.length; i++) { | ||
| var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue; | ||
| message = message.replace(formats[i], value); | ||
| } | ||
| return selectAll('input[name=' + name + ']:checked', this.element).length > 0; | ||
| } | ||
| else { | ||
| return FormValidator_1.checkValidator[rule](args); | ||
| } | ||
| }; | ||
| // Return default error message or custom error message | ||
| FormValidator.prototype.getErrorMessage = function (ruleValue, rule) { | ||
| var message = (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] : this.defaultMessages[rule]; | ||
| var formats = message.match(/{(\d)}/g); | ||
| if (!isNullOrUndefined(formats)) { | ||
| for (var i = 0; i < formats.length; i++) { | ||
| var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue; | ||
| message = message.replace(formats[i], value); | ||
| } | ||
| return message; | ||
| }; | ||
| // Create error element based on name and error message | ||
| FormValidator.prototype.createErrorElement = function (name, message, input) { | ||
| var errorElement = ej2_base_1.createElement(this.errorElement, { | ||
| className: this.errorClass, | ||
| innerHTML: message, | ||
| attrs: { for: name } | ||
| }); | ||
| // Create message design if errorOption is message | ||
| if (this.errorOption === ErrorOption.Message) { | ||
| errorElement.classList.remove(this.errorClass); | ||
| errorElement.classList.add('e-message'); | ||
| errorElement = ej2_base_1.createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML }); | ||
| } | ||
| return message; | ||
| }; | ||
| // Create error element based on name and error message | ||
| FormValidator.prototype.createErrorElement = function (name, message, input) { | ||
| var errorElement = createElement(this.errorElement, { | ||
| className: this.errorClass, | ||
| innerHTML: message, | ||
| attrs: { for: name } | ||
| }); | ||
| // Create message design if errorOption is message | ||
| if (this.errorOption === ErrorOption.Message) { | ||
| errorElement.classList.remove(this.errorClass); | ||
| errorElement.classList.add('e-message'); | ||
| errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML }); | ||
| } | ||
| errorElement.id = this.inputElement.name + '-info'; | ||
| // Append error message into MVC error message element | ||
| if (this.element.querySelector('[data-valmsg-for="' + input.id + '"]')) { | ||
| this.element.querySelector('[data-valmsg-for="' + input.id + '"]').appendChild(errorElement); | ||
| } | ||
| else if (input.hasAttribute('data-msg-containerid') === true) { | ||
| // Append error message into custom div element | ||
| var containerId = input.getAttribute('data-msg-containerid'); | ||
| var divElement = this.element.querySelector('#' + containerId); | ||
| divElement.appendChild(errorElement); | ||
| } | ||
| else if (this.customPlacement != null) { | ||
| // Call custom placement function if customPlacement is not null | ||
| this.customPlacement.call(this, this.inputElement, errorElement); | ||
| } | ||
| else { | ||
| this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling); | ||
| } | ||
| errorElement.style.display = 'block'; | ||
| this.getErrorElement(name); | ||
| this.validated.push(name); | ||
| this.checkRequired(name); | ||
| }; | ||
| // Get error element by name | ||
| FormValidator.prototype.getErrorElement = function (name) { | ||
| this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement); | ||
| if (!this.infoElement) { | ||
| this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for="' + name + '"]'); | ||
| } | ||
| return this.infoElement; | ||
| }; | ||
| // Remove existing rule from errorRules object | ||
| FormValidator.prototype.removeErrorRules = function (name) { | ||
| for (var i = 0; i < this.errorRules.length; i++) { | ||
| var rule = this.errorRules[i]; | ||
| if (rule.name === name) { | ||
| this.errorRules.splice(i, 1); | ||
| } | ||
| errorElement.id = this.inputElement.name + '-info'; | ||
| // Append error message into MVC error message element | ||
| if (this.element.querySelector('[data-valmsg-for="' + input.id + '"]')) { | ||
| this.element.querySelector('[data-valmsg-for="' + input.id + '"]').appendChild(errorElement); | ||
| } | ||
| }; | ||
| // Show error message to the input element | ||
| FormValidator.prototype.showMessage = function (errorRule) { | ||
| this.infoElement.style.display = 'block'; | ||
| this.infoElement.innerHTML = errorRule.message; | ||
| this.checkRequired(errorRule.name); | ||
| }; | ||
| // Hide error message based on input name | ||
| FormValidator.prototype.hideMessage = function (name) { | ||
| if (this.infoElement) { | ||
| this.infoElement.style.display = 'none'; | ||
| this.removeErrorRules(name); | ||
| this.inputElement.classList.add(this.validClass); | ||
| this.inputElement.classList.remove(this.errorClass); | ||
| this.inputElement.setAttribute('aria-invalid', 'false'); | ||
| } | ||
| }; | ||
| // Check whether the input element have required rule and its value is not empty | ||
| FormValidator.prototype.checkRequired = function (name) { | ||
| if (!this.rules[name][this.required] && !this.inputElement.value.length) { | ||
| this.infoElement.innerHTML = this.inputElement.value; | ||
| this.infoElement.setAttribute('aria-invalid', 'false'); | ||
| this.hideMessage(name); | ||
| } | ||
| }; | ||
| // Return boolean result if the input have chekcable or submit types | ||
| FormValidator.isCheckable = function (input) { | ||
| var inputType = input.getAttribute('type'); | ||
| return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit'); | ||
| }; | ||
| // List of function to validate the rules | ||
| FormValidator.checkValidator = { | ||
| required: function (option) { | ||
| return option.value.length > 0; | ||
| }, | ||
| email: function (option) { | ||
| return VALIDATE_EMAIL.test(option.value); | ||
| }, | ||
| url: function (option) { | ||
| return VALIDATE_URL.test(option.value); | ||
| }, | ||
| dateIso: function (option) { | ||
| return VALIDATE_DATE_ISO.test(option.value); | ||
| }, | ||
| tel: function (option) { | ||
| return VALIDATE_PHONE.test(option.value); | ||
| }, | ||
| creditcard: function (option) { | ||
| return VALIDATE_CREDITCARD.test(option.value); | ||
| }, | ||
| number: function (option) { | ||
| return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1; | ||
| }, | ||
| digits: function (option) { | ||
| return VALIDATE_DIGITS.test(option.value); | ||
| }, | ||
| maxLength: function (option) { | ||
| return option.value.length <= option.param; | ||
| }, | ||
| minLength: function (option) { | ||
| return option.value.length >= option.param; | ||
| }, | ||
| rangeLength: function (option) { | ||
| var param = option.param; | ||
| return option.value.length >= param[0] && option.value.length <= param[1]; | ||
| }, | ||
| range: function (option) { | ||
| var param = option.param; | ||
| return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1]; | ||
| }, | ||
| date: function (option) { | ||
| return !isNaN(new Date(option.value).getTime()); | ||
| }, | ||
| max: function (option) { | ||
| if (!isNaN(Number(option.value))) { | ||
| // Maximum rule validation for number | ||
| return +option.value <= option.param; | ||
| } | ||
| else if (input.hasAttribute('data-msg-containerid') === true) { | ||
| // Append error message into custom div element | ||
| var containerId = input.getAttribute('data-msg-containerid'); | ||
| var divElement = this.element.querySelector('#' + containerId); | ||
| divElement.appendChild(errorElement); | ||
| // Maximum rule validation for date | ||
| return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime(); | ||
| }, | ||
| min: function (option) { | ||
| if (!isNaN(Number(option.value))) { | ||
| // Minimum rule validation for number | ||
| return +option.value >= option.param; | ||
| } | ||
| else if (this.customPlacement != null) { | ||
| // Call custom placement function if customPlacement is not null | ||
| this.customPlacement.call(this, this.inputElement, errorElement); | ||
| } | ||
| else { | ||
| this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling); | ||
| } | ||
| errorElement.style.display = 'block'; | ||
| this.getErrorElement(name); | ||
| this.validated.push(name); | ||
| this.checkRequired(name); | ||
| }; | ||
| // Get error element by name | ||
| FormValidator.prototype.getErrorElement = function (name) { | ||
| this.infoElement = ej2_base_1.select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement); | ||
| if (!this.infoElement) { | ||
| this.infoElement = ej2_base_1.select(this.errorElement + '.' + this.errorClass + '[for="' + name + '"]'); | ||
| } | ||
| return this.infoElement; | ||
| }; | ||
| // Remove existing rule from errorRules object | ||
| FormValidator.prototype.removeErrorRules = function (name) { | ||
| for (var i = 0; i < this.errorRules.length; i++) { | ||
| var rule = this.errorRules[i]; | ||
| if (rule.name === name) { | ||
| this.errorRules.splice(i, 1); | ||
| } | ||
| } | ||
| }; | ||
| // Show error message to the input element | ||
| FormValidator.prototype.showMessage = function (errorRule) { | ||
| this.infoElement.style.display = 'block'; | ||
| this.infoElement.innerHTML = errorRule.message; | ||
| this.checkRequired(errorRule.name); | ||
| }; | ||
| // Hide error message based on input name | ||
| FormValidator.prototype.hideMessage = function (name) { | ||
| if (this.infoElement) { | ||
| this.infoElement.style.display = 'none'; | ||
| this.removeErrorRules(name); | ||
| this.inputElement.classList.add(this.validClass); | ||
| this.inputElement.classList.remove(this.errorClass); | ||
| this.inputElement.setAttribute('aria-invalid', 'false'); | ||
| } | ||
| }; | ||
| // Check whether the input element have required rule and its value is not empty | ||
| FormValidator.prototype.checkRequired = function (name) { | ||
| if (!this.rules[name][this.required] && !this.inputElement.value.length) { | ||
| this.infoElement.innerHTML = this.inputElement.value; | ||
| this.infoElement.setAttribute('aria-invalid', 'false'); | ||
| this.hideMessage(name); | ||
| } | ||
| }; | ||
| // Return boolean result if the input have chekcable or submit types | ||
| FormValidator.isCheckable = function (input) { | ||
| var inputType = input.getAttribute('type'); | ||
| return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit'); | ||
| }; | ||
| // List of function to validate the rules | ||
| FormValidator.checkValidator = { | ||
| required: function (option) { | ||
| return option.value.length > 0; | ||
| }, | ||
| email: function (option) { | ||
| return VALIDATE_EMAIL.test(option.value); | ||
| }, | ||
| url: function (option) { | ||
| return VALIDATE_URL.test(option.value); | ||
| }, | ||
| dateIso: function (option) { | ||
| return VALIDATE_DATE_ISO.test(option.value); | ||
| }, | ||
| tel: function (option) { | ||
| return VALIDATE_PHONE.test(option.value); | ||
| }, | ||
| creditcard: function (option) { | ||
| return VALIDATE_CREDITCARD.test(option.value); | ||
| }, | ||
| number: function (option) { | ||
| return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1; | ||
| }, | ||
| digits: function (option) { | ||
| return VALIDATE_DIGITS.test(option.value); | ||
| }, | ||
| maxLength: function (option) { | ||
| return option.value.length <= option.param; | ||
| }, | ||
| minLength: function (option) { | ||
| return option.value.length >= option.param; | ||
| }, | ||
| rangeLength: function (option) { | ||
| var param = option.param; | ||
| return option.value.length >= param[0] && option.value.length <= param[1]; | ||
| }, | ||
| range: function (option) { | ||
| var param = option.param; | ||
| return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1]; | ||
| }, | ||
| date: function (option) { | ||
| return !isNaN(new Date(option.value).getTime()); | ||
| }, | ||
| max: function (option) { | ||
| if (!isNaN(Number(option.value))) { | ||
| // Maximum rule validation for number | ||
| return +option.value <= option.param; | ||
| } | ||
| // Maximum rule validation for date | ||
| return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime(); | ||
| }, | ||
| min: function (option) { | ||
| if (!isNaN(Number(option.value))) { | ||
| // Minimum rule validation for number | ||
| return +option.value >= option.param; | ||
| } | ||
| // Minimum rule validation for date | ||
| return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime(); | ||
| }, | ||
| regex: function (option) { | ||
| return new RegExp(option.param).test(option.value); | ||
| }, | ||
| equalTo: function (option) { | ||
| var compareTo = option.formElement.querySelector('#' + option.param); | ||
| option.param = compareTo.value; | ||
| return option.param === option.value; | ||
| }, | ||
| }; | ||
| __decorate([ | ||
| ej2_base_3.Property('e-hidden') | ||
| ], FormValidator.prototype, "ignore", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property() | ||
| ], FormValidator.prototype, "rules", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property('e-error') | ||
| ], FormValidator.prototype, "errorClass", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property('e-valid') | ||
| ], FormValidator.prototype, "validClass", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property('label') | ||
| ], FormValidator.prototype, "errorElement", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property('div') | ||
| ], FormValidator.prototype, "errorContainer", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Property(ErrorOption.Label) | ||
| ], FormValidator.prototype, "errorOption", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "focusout", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "keyup", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "click", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "change", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "submit", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "validationBegin", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "validationComplete", void 0); | ||
| __decorate([ | ||
| ej2_base_3.Event() | ||
| ], FormValidator.prototype, "customPlacement", void 0); | ||
| FormValidator = FormValidator_1 = __decorate([ | ||
| ej2_base_3.NotifyPropertyChanges | ||
| ], FormValidator); | ||
| return FormValidator; | ||
| var FormValidator_1; | ||
| }(ej2_base_1.Base)); | ||
| exports.FormValidator = FormValidator; | ||
| }); | ||
| // Minimum rule validation for date | ||
| return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime(); | ||
| }, | ||
| regex: function (option) { | ||
| return new RegExp(option.param).test(option.value); | ||
| }, | ||
| equalTo: function (option) { | ||
| var compareTo = option.formElement.querySelector('#' + option.param); | ||
| option.param = compareTo.value; | ||
| return option.param === option.value; | ||
| }, | ||
| }; | ||
| __decorate([ | ||
| Property('e-hidden') | ||
| ], FormValidator.prototype, "ignore", void 0); | ||
| __decorate([ | ||
| Property() | ||
| ], FormValidator.prototype, "rules", void 0); | ||
| __decorate([ | ||
| Property('e-error') | ||
| ], FormValidator.prototype, "errorClass", void 0); | ||
| __decorate([ | ||
| Property('e-valid') | ||
| ], FormValidator.prototype, "validClass", void 0); | ||
| __decorate([ | ||
| Property('label') | ||
| ], FormValidator.prototype, "errorElement", void 0); | ||
| __decorate([ | ||
| Property('div') | ||
| ], FormValidator.prototype, "errorContainer", void 0); | ||
| __decorate([ | ||
| Property(ErrorOption.Label) | ||
| ], FormValidator.prototype, "errorOption", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "focusout", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "keyup", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "click", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "change", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "submit", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "validationBegin", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "validationComplete", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], FormValidator.prototype, "customPlacement", void 0); | ||
| FormValidator = FormValidator_1 = __decorate([ | ||
| NotifyPropertyChanges | ||
| ], FormValidator); | ||
| return FormValidator; | ||
| var FormValidator_1; | ||
| }(Base)); | ||
| export { FormValidator }; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./form-validator"], function (require, exports, form_validator_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * Input box Component | ||
| */ | ||
| __export(form_validator_1); | ||
| }); | ||
| /** | ||
| * Input box Component | ||
| */ | ||
| export * from './form-validator'; |
@@ -1,17 +0,10 @@ | ||
| define(["require", "exports", "./numerictextbox/index", "./maskedtextbox/index", "./input/index", "./slider/index", "./form-validator/index", "./uploader/index", "./color-picker/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5, index_6, index_7) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * NumericTextBox all modules | ||
| */ | ||
| __export(index_1); | ||
| __export(index_2); | ||
| __export(index_3); | ||
| __export(index_4); | ||
| __export(index_5); | ||
| __export(index_6); | ||
| __export(index_7); | ||
| }); | ||
| /** | ||
| * NumericTextBox all modules | ||
| */ | ||
| export * from './numerictextbox/index'; | ||
| export * from './maskedtextbox/index'; | ||
| export * from './input/index'; | ||
| export * from './slider/index'; | ||
| export * from './form-validator/index'; | ||
| export * from './uploader/index'; | ||
| export * from './color-picker/index'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./input"], function (require, exports, input_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * Input box Component | ||
| */ | ||
| __export(input_1); | ||
| }); | ||
| /** | ||
| * Input box Component | ||
| */ | ||
| export * from './input'; |
@@ -1,599 +0,596 @@ | ||
| define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var CLASSNAMES = { | ||
| RTL: 'e-rtl', | ||
| DISABLE: 'e-disabled', | ||
| INPUT: 'e-input', | ||
| INPUTGROUP: 'e-input-group', | ||
| FLOATINPUT: 'e-float-input', | ||
| FLOATLINE: 'e-float-line', | ||
| FLOATTEXT: 'e-float-text', | ||
| CLEARICON: 'e-clear-icon', | ||
| CLEARICONHIDE: 'e-clear-icon-hide', | ||
| LABELTOP: 'e-label-top', | ||
| LABELBOTTOM: 'e-label-bottom', | ||
| NOFLOATLABEL: 'e-no-float-label', | ||
| INPUTCUSTOMTAG: 'e-input-custom-tag', | ||
| FLOATCUSTOMTAG: 'e-float-custom-tag' | ||
| import { createElement, attributes, addClass, removeClass, detach, classList, closest, isNullOrUndefined } from '@syncfusion/ej2-base'; | ||
| var CLASSNAMES = { | ||
| RTL: 'e-rtl', | ||
| DISABLE: 'e-disabled', | ||
| INPUT: 'e-input', | ||
| INPUTGROUP: 'e-input-group', | ||
| FLOATINPUT: 'e-float-input', | ||
| FLOATLINE: 'e-float-line', | ||
| FLOATTEXT: 'e-float-text', | ||
| CLEARICON: 'e-clear-icon', | ||
| CLEARICONHIDE: 'e-clear-icon-hide', | ||
| LABELTOP: 'e-label-top', | ||
| LABELBOTTOM: 'e-label-bottom', | ||
| NOFLOATLABEL: 'e-no-float-label', | ||
| INPUTCUSTOMTAG: 'e-input-custom-tag', | ||
| FLOATCUSTOMTAG: 'e-float-custom-tag' | ||
| }; | ||
| /** | ||
| * Base for Input creation through util methods. | ||
| */ | ||
| export var Input; | ||
| (function (Input) { | ||
| var privateInputObj = { | ||
| container: null, | ||
| buttons: [], | ||
| clearButton: null | ||
| }; | ||
| /** | ||
| * Base for Input creation through util methods. | ||
| * Create a wrapper to input element with multiple span elements and set the basic properties to input based components. | ||
| * ``` | ||
| * E.g : Input.createInput({ element: element, floatLabelType : "Auto", properties: { placeholder: 'Search' } }); | ||
| * ``` | ||
| * @param args | ||
| */ | ||
| var Input; | ||
| (function (Input) { | ||
| var privateInputObj = { | ||
| container: null, | ||
| buttons: [], | ||
| clearButton: null | ||
| }; | ||
| /** | ||
| * Create a wrapper to input element with multiple span elements and set the basic properties to input based components. | ||
| * ``` | ||
| * E.g : Input.createInput({ element: element, floatLabelType : "Auto", properties: { placeholder: 'Search' } }); | ||
| * ``` | ||
| * @param args | ||
| */ | ||
| function createInput(args) { | ||
| var inputObject = { container: null, buttons: [], clearButton: null }; | ||
| if (ej2_base_1.isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') { | ||
| inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span'); | ||
| args.element.parentNode.insertBefore(inputObject.container, args.element); | ||
| ej2_base_1.addClass([args.element], CLASSNAMES.INPUT); | ||
| inputObject.container.appendChild(args.element); | ||
| function createInput(args) { | ||
| var inputObject = { container: null, buttons: [], clearButton: null }; | ||
| if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') { | ||
| inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span'); | ||
| args.element.parentNode.insertBefore(inputObject.container, args.element); | ||
| addClass([args.element], CLASSNAMES.INPUT); | ||
| inputObject.container.appendChild(args.element); | ||
| } | ||
| else { | ||
| createFloatingInput(args, inputObject); | ||
| } | ||
| args.element.addEventListener('focus', function () { | ||
| var parent = getParentNode(this); | ||
| if (parent.classList.contains('e-input-group')) { | ||
| parent.classList.add('e-input-focus'); | ||
| } | ||
| else { | ||
| createFloatingInput(args, inputObject); | ||
| }); | ||
| args.element.addEventListener('blur', function () { | ||
| var parent = getParentNode(this); | ||
| if (parent.classList.contains('e-input-group')) { | ||
| parent.classList.remove('e-input-focus'); | ||
| } | ||
| args.element.addEventListener('focus', function () { | ||
| var parent = getParentNode(this); | ||
| if (parent.classList.contains('e-input-group')) { | ||
| parent.classList.add('e-input-focus'); | ||
| } | ||
| }); | ||
| args.element.addEventListener('blur', function () { | ||
| var parent = getParentNode(this); | ||
| if (parent.classList.contains('e-input-group')) { | ||
| parent.classList.remove('e-input-focus'); | ||
| } | ||
| }); | ||
| if (!ej2_base_1.isNullOrUndefined(args.properties) && !ej2_base_1.isNullOrUndefined(args.properties.showClearButton) && args.properties.showClearButton) { | ||
| setClearButton(args.properties.showClearButton, args.element, inputObject, true); | ||
| if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| ej2_base_1.addClass([inputObject.container], CLASSNAMES.INPUTGROUP); | ||
| } | ||
| }); | ||
| if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) && args.properties.showClearButton) { | ||
| setClearButton(args.properties.showClearButton, args.element, inputObject, true); | ||
| if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| addClass([inputObject.container], CLASSNAMES.INPUTGROUP); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(args.buttons)) { | ||
| for (var i = 0; i < args.buttons.length; i++) { | ||
| inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container)); | ||
| } | ||
| } | ||
| inputObject = setPropertyValue(args, inputObject); | ||
| privateInputObj = inputObject; | ||
| return inputObject; | ||
| } | ||
| Input.createInput = createInput; | ||
| function _focusFn() { | ||
| var label = getParentNode(this).getElementsByClassName('e-float-text')[0]; | ||
| ej2_base_1.addClass([label], CLASSNAMES.LABELTOP); | ||
| if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| ej2_base_1.removeClass([label], CLASSNAMES.LABELBOTTOM); | ||
| if (!isNullOrUndefined(args.buttons)) { | ||
| for (var i = 0; i < args.buttons.length; i++) { | ||
| inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container)); | ||
| } | ||
| } | ||
| function _blurFn() { | ||
| var parent = getParentNode(this); | ||
| if (parent.getElementsByTagName('input')[0].value === '') { | ||
| var label = parent.getElementsByClassName('e-float-text')[0]; | ||
| if (label.classList.contains(CLASSNAMES.LABELTOP)) { | ||
| ej2_base_1.removeClass([label], CLASSNAMES.LABELTOP); | ||
| } | ||
| ej2_base_1.addClass([label], CLASSNAMES.LABELBOTTOM); | ||
| inputObject = setPropertyValue(args, inputObject); | ||
| privateInputObj = inputObject; | ||
| return inputObject; | ||
| } | ||
| Input.createInput = createInput; | ||
| function _focusFn() { | ||
| var label = getParentNode(this).getElementsByClassName('e-float-text')[0]; | ||
| addClass([label], CLASSNAMES.LABELTOP); | ||
| if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| removeClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| } | ||
| function _blurFn() { | ||
| var parent = getParentNode(this); | ||
| if (parent.getElementsByTagName('input')[0].value === '') { | ||
| var label = parent.getElementsByClassName('e-float-text')[0]; | ||
| if (label.classList.contains(CLASSNAMES.LABELTOP)) { | ||
| removeClass([label], CLASSNAMES.LABELTOP); | ||
| } | ||
| addClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| function wireFloatingEvents(element) { | ||
| element.addEventListener('focus', _focusFn); | ||
| element.addEventListener('blur', _blurFn); | ||
| } | ||
| function wireFloatingEvents(element) { | ||
| element.addEventListener('focus', _focusFn); | ||
| element.addEventListener('blur', _blurFn); | ||
| } | ||
| function unwireFloatingEvents(element) { | ||
| element.removeEventListener('focus', _focusFn); | ||
| element.removeEventListener('blur', _blurFn); | ||
| } | ||
| function createFloatingInput(args, inputObject) { | ||
| var inputElement; | ||
| var floatLinelement; | ||
| var floatLabelElement; | ||
| if (args.floatLabelType === 'Auto') { | ||
| wireFloatingEvents(args.element); | ||
| } | ||
| function unwireFloatingEvents(element) { | ||
| element.removeEventListener('focus', _focusFn); | ||
| element.removeEventListener('blur', _blurFn); | ||
| if (isNullOrUndefined(inputObject.container)) { | ||
| inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div'); | ||
| args.element.parentNode.insertBefore(inputObject.container, args.element); | ||
| } | ||
| function createFloatingInput(args, inputObject) { | ||
| var inputElement; | ||
| var floatLinelement; | ||
| var floatLabelElement; | ||
| if (args.floatLabelType === 'Auto') { | ||
| wireFloatingEvents(args.element); | ||
| else { | ||
| if (!isNullOrUndefined(args.customTag)) { | ||
| inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG); | ||
| } | ||
| if (ej2_base_1.isNullOrUndefined(inputObject.container)) { | ||
| inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div'); | ||
| args.element.parentNode.insertBefore(inputObject.container, args.element); | ||
| } | ||
| else { | ||
| if (!ej2_base_1.isNullOrUndefined(args.customTag)) { | ||
| inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG); | ||
| } | ||
| inputObject.container.classList.add(CLASSNAMES.FLOATINPUT); | ||
| } | ||
| floatLinelement = ej2_base_1.createElement('span', { className: CLASSNAMES.FLOATLINE }); | ||
| floatLabelElement = ej2_base_1.createElement('label', { className: CLASSNAMES.FLOATTEXT }); | ||
| if (!ej2_base_1.isNullOrUndefined(args.element.id) && args.element.id !== '') { | ||
| floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_'); | ||
| ej2_base_1.attributes(args.element, { 'aria-labelledby': floatLabelElement.id }); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') { | ||
| floatLabelElement.innerHTML = args.element.placeholder; | ||
| args.element.removeAttribute('placeholder'); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(args.properties) && !ej2_base_1.isNullOrUndefined(args.properties.placeholder) && | ||
| args.properties.placeholder !== '') { | ||
| floatLabelElement.innerHTML = args.properties.placeholder; | ||
| } | ||
| if (!floatLabelElement.innerHTML) { | ||
| inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL); | ||
| } | ||
| inputObject.container.appendChild(args.element); | ||
| inputObject.container.appendChild(floatLinelement); | ||
| inputObject.container.appendChild(floatLabelElement); | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| if (args.floatLabelType === 'Always') { | ||
| if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| ej2_base_1.removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| ej2_base_1.addClass([floatLabelElement], CLASSNAMES.LABELTOP); | ||
| } | ||
| if (args.floatLabelType === 'Auto') { | ||
| args.element.addEventListener('input', function (event) { | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| }); | ||
| args.element.addEventListener('blur', function (event) { | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| }); | ||
| } | ||
| inputObject.container.classList.add(CLASSNAMES.FLOATINPUT); | ||
| } | ||
| function setPropertyValue(args, inputObject) { | ||
| if (!ej2_base_1.isNullOrUndefined(args.properties)) { | ||
| for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'cssClass': | ||
| setCssClass(args.properties.cssClass, [inputObject.container]); | ||
| break; | ||
| case 'enabled': | ||
| setEnabled(args.properties.enabled, args.element); | ||
| break; | ||
| case 'enableRtl': | ||
| setEnableRtl(args.properties.enableRtl, [inputObject.container]); | ||
| break; | ||
| case 'placeholder': | ||
| setPlaceholder(args.properties.placeholder, args.element); | ||
| break; | ||
| case 'readonly': | ||
| setReadonly(args.properties.readonly, args.element); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| return inputObject; | ||
| floatLinelement = createElement('span', { className: CLASSNAMES.FLOATLINE }); | ||
| floatLabelElement = createElement('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 }); | ||
| } | ||
| function updateIconState(value, button) { | ||
| if (value) { | ||
| ej2_base_1.removeClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| else { | ||
| ej2_base_1.addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') { | ||
| floatLabelElement.innerHTML = args.element.placeholder; | ||
| args.element.removeAttribute('placeholder'); | ||
| } | ||
| function updateLabelState(value, label) { | ||
| if (value) { | ||
| ej2_base_1.addClass([label], CLASSNAMES.LABELTOP); | ||
| if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| ej2_base_1.removeClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| } | ||
| else { | ||
| if (label.classList.contains(CLASSNAMES.LABELTOP)) { | ||
| ej2_base_1.removeClass([label], CLASSNAMES.LABELTOP); | ||
| } | ||
| ej2_base_1.addClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) && | ||
| args.properties.placeholder !== '') { | ||
| floatLabelElement.innerHTML = args.properties.placeholder; | ||
| } | ||
| function getParentNode(element) { | ||
| var parentNode = element.parentNode; | ||
| return parentNode; | ||
| if (!floatLabelElement.innerHTML) { | ||
| inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL); | ||
| } | ||
| /** | ||
| * To create clear button. | ||
| */ | ||
| function createClearButton(element, inputObject, initial) { | ||
| var button = ej2_base_1.createElement('span', { className: CLASSNAMES.CLEARICON }); | ||
| var container = inputObject.container; | ||
| if (!ej2_base_1.isNullOrUndefined(initial)) { | ||
| container.appendChild(button); | ||
| inputObject.container.appendChild(args.element); | ||
| inputObject.container.appendChild(floatLinelement); | ||
| inputObject.container.appendChild(floatLabelElement); | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| if (args.floatLabelType === 'Always') { | ||
| if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| else { | ||
| var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ? | ||
| inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element; | ||
| baseElement.insertAdjacentElement('afterend', button); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(container) && | ||
| container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| ej2_base_1.addClass([container], CLASSNAMES.INPUTGROUP); | ||
| } | ||
| ej2_base_1.addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| wireClearBtnEvents(element, button, container); | ||
| return button; | ||
| addClass([floatLabelElement], CLASSNAMES.LABELTOP); | ||
| } | ||
| function wireClearBtnEvents(element, button, container) { | ||
| button.addEventListener('click', function (event) { | ||
| if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) { | ||
| event.preventDefault(); | ||
| if (element !== document.activeElement) { | ||
| element.focus(); | ||
| } | ||
| element.value = ''; | ||
| ej2_base_1.addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| if (args.floatLabelType === 'Auto') { | ||
| args.element.addEventListener('input', function (event) { | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| }); | ||
| element.addEventListener('input', function (event) { | ||
| updateIconState(element.value, button); | ||
| args.element.addEventListener('blur', function (event) { | ||
| updateLabelState(args.element.value, floatLabelElement); | ||
| }); | ||
| element.addEventListener('focus', function (event) { | ||
| updateIconState(element.value, button); | ||
| }); | ||
| element.addEventListener('blur', function (event) { | ||
| setTimeout(function () { ej2_base_1.addClass([button], CLASSNAMES.CLEARICONHIDE); }, 200); | ||
| }); | ||
| } | ||
| function validateLabel(element, floatLabelType) { | ||
| 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); | ||
| } | ||
| function setPropertyValue(args, inputObject) { | ||
| if (!isNullOrUndefined(args.properties)) { | ||
| for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'cssClass': | ||
| setCssClass(args.properties.cssClass, [inputObject.container]); | ||
| break; | ||
| case 'enabled': | ||
| setEnabled(args.properties.enabled, args.element); | ||
| break; | ||
| case 'enableRtl': | ||
| setEnableRtl(args.properties.enableRtl, [inputObject.container]); | ||
| break; | ||
| case 'placeholder': | ||
| setPlaceholder(args.properties.placeholder, args.element); | ||
| break; | ||
| case 'readonly': | ||
| setReadonly(args.properties.readonly, args.element); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * To create input box contianer. | ||
| */ | ||
| function createInputContainer(args, className, tagClass, tag) { | ||
| var container; | ||
| if (!ej2_base_1.isNullOrUndefined(args.customTag)) { | ||
| container = ej2_base_1.createElement(args.customTag, { className: className }); | ||
| container.classList.add(tagClass); | ||
| return inputObject; | ||
| } | ||
| function updateIconState(value, button) { | ||
| if (value) { | ||
| removeClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| else { | ||
| addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| } | ||
| function updateLabelState(value, label) { | ||
| if (value) { | ||
| addClass([label], CLASSNAMES.LABELTOP); | ||
| if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) { | ||
| removeClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| else { | ||
| container = ej2_base_1.createElement(tag, { className: className }); | ||
| } | ||
| else { | ||
| if (label.classList.contains(CLASSNAMES.LABELTOP)) { | ||
| removeClass([label], CLASSNAMES.LABELTOP); | ||
| } | ||
| container.classList.add('e-control-wrapper'); | ||
| return container; | ||
| addClass([label], CLASSNAMES.LABELBOTTOM); | ||
| } | ||
| /** | ||
| * Sets the value to the input element. | ||
| * ``` | ||
| * E.g : Input.setValue('content', element, "Auto", true ); | ||
| * ``` | ||
| * @param value - Specify the value of the input element. | ||
| * @param element - The element on which the specified value is updated. | ||
| * @param floatLabelType - Specify the float label type of the input element. | ||
| * @param clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input. | ||
| */ | ||
| function setValue(value, element, floatLabelType, clearButton) { | ||
| element.value = value; | ||
| if ((!ej2_base_1.isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') { | ||
| validateLabel(element, floatLabelType); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(clearButton) && clearButton) { | ||
| var parentElement = getParentNode(element); | ||
| var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0]; | ||
| if (element.value && parentElement.classList.contains('e-input-focus')) { | ||
| ej2_base_1.removeClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| function getParentNode(element) { | ||
| var parentNode = element.parentNode; | ||
| return parentNode; | ||
| } | ||
| /** | ||
| * To create clear button. | ||
| */ | ||
| function createClearButton(element, inputObject, initial) { | ||
| var button = createElement('span', { className: CLASSNAMES.CLEARICON }); | ||
| var container = inputObject.container; | ||
| if (!isNullOrUndefined(initial)) { | ||
| container.appendChild(button); | ||
| } | ||
| else { | ||
| var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ? | ||
| inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element; | ||
| baseElement.insertAdjacentElement('afterend', button); | ||
| } | ||
| if (!isNullOrUndefined(container) && | ||
| container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| addClass([container], CLASSNAMES.INPUTGROUP); | ||
| } | ||
| addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| wireClearBtnEvents(element, button, container); | ||
| return button; | ||
| } | ||
| function wireClearBtnEvents(element, button, container) { | ||
| button.addEventListener('click', function (event) { | ||
| if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) { | ||
| event.preventDefault(); | ||
| if (element !== document.activeElement) { | ||
| element.focus(); | ||
| } | ||
| else { | ||
| ej2_base_1.addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| element.value = ''; | ||
| addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| }); | ||
| element.addEventListener('input', function (event) { | ||
| updateIconState(element.value, button); | ||
| }); | ||
| element.addEventListener('focus', function (event) { | ||
| updateIconState(element.value, button); | ||
| }); | ||
| element.addEventListener('blur', function (event) { | ||
| setTimeout(function () { addClass([button], CLASSNAMES.CLEARICONHIDE); }, 200); | ||
| }); | ||
| } | ||
| function validateLabel(element, floatLabelType) { | ||
| 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); | ||
| } | ||
| Input.setValue = setValue; | ||
| /** | ||
| * Sets the single or multiple cssClass to wrapper of input element. | ||
| * ``` | ||
| * E.g : Input.setCssClass('e-custom-class', [element]); | ||
| * ``` | ||
| * @param cssClass - Css class names which are needed to add. | ||
| * @param elements - The elements which are needed to add / remove classes. | ||
| * @param oldClass - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter. | ||
| */ | ||
| function setCssClass(cssClass, elements, oldClass) { | ||
| if (!ej2_base_1.isNullOrUndefined(oldClass) && oldClass !== '') { | ||
| ej2_base_1.removeClass(elements, oldClass); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(cssClass) && cssClass !== '') { | ||
| ej2_base_1.addClass(elements, cssClass); | ||
| } | ||
| } | ||
| /** | ||
| * To create input box contianer. | ||
| */ | ||
| function createInputContainer(args, className, tagClass, tag) { | ||
| var container; | ||
| if (!isNullOrUndefined(args.customTag)) { | ||
| container = createElement(args.customTag, { className: className }); | ||
| container.classList.add(tagClass); | ||
| } | ||
| Input.setCssClass = setCssClass; | ||
| /** | ||
| * Set the placeholder attribute to the input element. | ||
| * ``` | ||
| * E.g : Input.setPlaceholder('Search here', element); | ||
| * ``` | ||
| * @param placeholder - Placeholder value which is need to add. | ||
| * @param element - The element on which the placeholder is need to add. | ||
| */ | ||
| function setPlaceholder(placeholder, element) { | ||
| var parentElement; | ||
| parentElement = getParentNode(element); | ||
| if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| if (!ej2_base_1.isNullOrUndefined(placeholder) && placeholder !== '') { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder; | ||
| parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL); | ||
| } | ||
| else { | ||
| parentElement.classList.add(CLASSNAMES.NOFLOATLABEL); | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = ''; | ||
| } | ||
| else { | ||
| container = createElement(tag, { className: className }); | ||
| } | ||
| container.classList.add('e-control-wrapper'); | ||
| return container; | ||
| } | ||
| /** | ||
| * Sets the value to the input element. | ||
| * ``` | ||
| * E.g : Input.setValue('content', element, "Auto", true ); | ||
| * ``` | ||
| * @param value - Specify the value of the input element. | ||
| * @param element - The element on which the specified value is updated. | ||
| * @param floatLabelType - Specify the float label type of the input element. | ||
| * @param clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input. | ||
| */ | ||
| function setValue(value, element, floatLabelType, clearButton) { | ||
| element.value = value; | ||
| if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') { | ||
| validateLabel(element, floatLabelType); | ||
| } | ||
| if (!isNullOrUndefined(clearButton) && clearButton) { | ||
| var parentElement = getParentNode(element); | ||
| var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0]; | ||
| if (element.value && parentElement.classList.contains('e-input-focus')) { | ||
| removeClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| else { | ||
| if (!ej2_base_1.isNullOrUndefined(placeholder) && placeholder !== '') { | ||
| ej2_base_1.attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder }); | ||
| } | ||
| else { | ||
| element.removeAttribute('placeholder'); | ||
| element.removeAttribute('aria-placeholder'); | ||
| } | ||
| addClass([button], CLASSNAMES.CLEARICONHIDE); | ||
| } | ||
| } | ||
| Input.setPlaceholder = setPlaceholder; | ||
| /** | ||
| * Set the read only attribute to the input element | ||
| * ``` | ||
| * E.g : Input.setReadonly(true, element); | ||
| * ``` | ||
| * @param isReadonly | ||
| * - Boolean value to specify whether to set read only. Setting "True" value enables read only. | ||
| * @param element | ||
| * - The element which is need to enable read only. | ||
| */ | ||
| function setReadonly(isReadonly, element, floatLabelType) { | ||
| if (isReadonly) { | ||
| ej2_base_1.attributes(element, { readonly: '' }); | ||
| } | ||
| Input.setValue = setValue; | ||
| /** | ||
| * Sets the single or multiple cssClass to wrapper of input element. | ||
| * ``` | ||
| * E.g : Input.setCssClass('e-custom-class', [element]); | ||
| * ``` | ||
| * @param cssClass - Css class names which are needed to add. | ||
| * @param elements - The elements which are needed to add / remove classes. | ||
| * @param oldClass - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter. | ||
| */ | ||
| function setCssClass(cssClass, elements, oldClass) { | ||
| if (!isNullOrUndefined(oldClass) && oldClass !== '') { | ||
| removeClass(elements, oldClass); | ||
| } | ||
| if (!isNullOrUndefined(cssClass) && cssClass !== '') { | ||
| addClass(elements, cssClass); | ||
| } | ||
| } | ||
| Input.setCssClass = setCssClass; | ||
| /** | ||
| * Set the placeholder attribute to the input element. | ||
| * ``` | ||
| * E.g : Input.setPlaceholder('Search here', element); | ||
| * ``` | ||
| * @param placeholder - Placeholder value which is need to add. | ||
| * @param element - The element on which the placeholder is need to add. | ||
| */ | ||
| function setPlaceholder(placeholder, element) { | ||
| var parentElement; | ||
| parentElement = getParentNode(element); | ||
| if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| if (!isNullOrUndefined(placeholder) && placeholder !== '') { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder; | ||
| parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL); | ||
| } | ||
| else { | ||
| element.removeAttribute('readonly'); | ||
| parentElement.classList.add(CLASSNAMES.NOFLOATLABEL); | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = ''; | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(floatLabelType)) { | ||
| validateLabel(element, floatLabelType); | ||
| } | ||
| } | ||
| Input.setReadonly = setReadonly; | ||
| /** | ||
| * Displays the element direction from right to left when its enabled. | ||
| * ``` | ||
| * E.g : Input.setEnableRtl(true, [inputObj.container]); | ||
| * ``` | ||
| * @param isRtl | ||
| * - Boolean value to specify whether to set RTL. Setting "True" value enables the RTL mode. | ||
| * @param elements | ||
| * - The elements that are needed to enable/disable RTL. | ||
| */ | ||
| function setEnableRtl(isRtl, elements) { | ||
| if (isRtl) { | ||
| ej2_base_1.addClass(elements, CLASSNAMES.RTL); | ||
| else { | ||
| if (!isNullOrUndefined(placeholder) && placeholder !== '') { | ||
| attributes(element, { 'placeholder': placeholder, 'aria-placeholder': placeholder }); | ||
| } | ||
| else { | ||
| ej2_base_1.removeClass(elements, CLASSNAMES.RTL); | ||
| element.removeAttribute('placeholder'); | ||
| element.removeAttribute('aria-placeholder'); | ||
| } | ||
| } | ||
| Input.setEnableRtl = setEnableRtl; | ||
| /** | ||
| * Enables or disables the given input element. | ||
| * ``` | ||
| * E.g : Input.setEnabled(false, element); | ||
| * ``` | ||
| * @param isEnable | ||
| * - Boolean value to specify whether to enable or disable. | ||
| * @param element | ||
| * - Element to be enabled or disabled. | ||
| */ | ||
| function setEnabled(isEnable, element, floatLabelType) { | ||
| var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' }; | ||
| if (isEnable) { | ||
| } | ||
| Input.setPlaceholder = setPlaceholder; | ||
| /** | ||
| * Set the read only attribute to the input element | ||
| * ``` | ||
| * E.g : Input.setReadonly(true, element); | ||
| * ``` | ||
| * @param isReadonly | ||
| * - Boolean value to specify whether to set read only. Setting "True" value enables read only. | ||
| * @param element | ||
| * - The element which is need to enable read only. | ||
| */ | ||
| function setReadonly(isReadonly, element, floatLabelType) { | ||
| if (isReadonly) { | ||
| attributes(element, { readonly: '' }); | ||
| } | ||
| else { | ||
| element.removeAttribute('readonly'); | ||
| } | ||
| if (!isNullOrUndefined(floatLabelType)) { | ||
| validateLabel(element, floatLabelType); | ||
| } | ||
| } | ||
| Input.setReadonly = setReadonly; | ||
| /** | ||
| * Displays the element direction from right to left when its enabled. | ||
| * ``` | ||
| * E.g : Input.setEnableRtl(true, [inputObj.container]); | ||
| * ``` | ||
| * @param isRtl | ||
| * - Boolean value to specify whether to set RTL. Setting "True" value enables the RTL mode. | ||
| * @param elements | ||
| * - The elements that are needed to enable/disable RTL. | ||
| */ | ||
| function setEnableRtl(isRtl, elements) { | ||
| if (isRtl) { | ||
| addClass(elements, CLASSNAMES.RTL); | ||
| } | ||
| else { | ||
| removeClass(elements, CLASSNAMES.RTL); | ||
| } | ||
| } | ||
| Input.setEnableRtl = setEnableRtl; | ||
| /** | ||
| * Enables or disables the given input element. | ||
| * ``` | ||
| * E.g : Input.setEnabled(false, element); | ||
| * ``` | ||
| * @param isEnable | ||
| * - Boolean value to specify whether to enable or disable. | ||
| * @param element | ||
| * - Element to be enabled or disabled. | ||
| */ | ||
| function setEnabled(isEnable, element, floatLabelType) { | ||
| var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' }; | ||
| if (isEnable) { | ||
| element.classList.remove(CLASSNAMES.DISABLE); | ||
| removeAttributes(disabledAttrs, element); | ||
| } | ||
| else { | ||
| element.classList.add(CLASSNAMES.DISABLE); | ||
| addAttributes(disabledAttrs, element); | ||
| } | ||
| if (!isNullOrUndefined(floatLabelType)) { | ||
| validateLabel(element, floatLabelType); | ||
| } | ||
| } | ||
| Input.setEnabled = setEnabled; | ||
| function setClearButton(isClear, element, inputObject, initial) { | ||
| if (isClear) { | ||
| inputObject.clearButton = createClearButton(element, inputObject, initial); | ||
| } | ||
| else { | ||
| inputObject.clearButton.remove(); | ||
| inputObject.clearButton = null; | ||
| } | ||
| } | ||
| Input.setClearButton = setClearButton; | ||
| /** | ||
| * Removing the multiple attributes from the given element such as "disabled","id" , etc. | ||
| * ``` | ||
| * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element); | ||
| * ``` | ||
| * @param attrs | ||
| * - Array of attributes which are need to removed from the element. | ||
| * @param element | ||
| * - Element on which the attributes are needed to be removed. | ||
| */ | ||
| function removeAttributes(attrs, element) { | ||
| for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) { | ||
| var key = _a[_i]; | ||
| var parentElement = void 0; | ||
| parentElement = getParentNode(element); | ||
| if (key === 'disabled') { | ||
| element.classList.remove(CLASSNAMES.DISABLE); | ||
| removeAttributes(disabledAttrs, element); | ||
| } | ||
| if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| parentElement.classList.remove(CLASSNAMES.DISABLE); | ||
| } | ||
| if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = ''; | ||
| } | ||
| else { | ||
| element.removeAttribute(key); | ||
| } | ||
| } | ||
| } | ||
| Input.removeAttributes = removeAttributes; | ||
| /** | ||
| * Adding the multiple attributes to the given element such as "disabled","id" , etc. | ||
| * ``` | ||
| * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element); | ||
| * ``` | ||
| * @param attrs | ||
| * - Array of attributes which is added to element. | ||
| * @param element | ||
| * - Element on which the attributes are needed to be added. | ||
| */ | ||
| function addAttributes(attrs, element) { | ||
| for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) { | ||
| var key = _a[_i]; | ||
| var parentElement = void 0; | ||
| parentElement = getParentNode(element); | ||
| if (key === 'disabled') { | ||
| element.classList.add(CLASSNAMES.DISABLE); | ||
| addAttributes(disabledAttrs, element); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(floatLabelType)) { | ||
| validateLabel(element, floatLabelType); | ||
| if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| parentElement.classList.add(CLASSNAMES.DISABLE); | ||
| } | ||
| } | ||
| Input.setEnabled = setEnabled; | ||
| function setClearButton(isClear, element, inputObject, initial) { | ||
| if (isClear) { | ||
| inputObject.clearButton = createClearButton(element, inputObject, initial); | ||
| if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key]; | ||
| } | ||
| else { | ||
| inputObject.clearButton.remove(); | ||
| inputObject.clearButton = null; | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| Input.setClearButton = setClearButton; | ||
| /** | ||
| * Removing the multiple attributes from the given element such as "disabled","id" , etc. | ||
| * ``` | ||
| * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element); | ||
| * ``` | ||
| * @param attrs | ||
| * - Array of attributes which are need to removed from the element. | ||
| * @param element | ||
| * - Element on which the attributes are needed to be removed. | ||
| */ | ||
| function removeAttributes(attrs, element) { | ||
| for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) { | ||
| var key = _a[_i]; | ||
| var parentElement = void 0; | ||
| parentElement = getParentNode(element); | ||
| if (key === 'disabled') { | ||
| element.classList.remove(CLASSNAMES.DISABLE); | ||
| } | ||
| if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| parentElement.classList.remove(CLASSNAMES.DISABLE); | ||
| } | ||
| if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = ''; | ||
| } | ||
| else { | ||
| element.removeAttribute(key); | ||
| } | ||
| } | ||
| Input.addAttributes = addAttributes; | ||
| function removeFloating(input) { | ||
| var container = input.container; | ||
| if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| var inputEle = container.querySelector('input'); | ||
| var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent; | ||
| var clearButton = container.querySelector('.e-clear-icon') !== null; | ||
| detach(container.querySelector('.' + CLASSNAMES.FLOATLINE)); | ||
| detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT)); | ||
| classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]); | ||
| unwireFloatingEvents(inputEle); | ||
| attributes(inputEle, { 'placeholder': placeholder }); | ||
| inputEle.classList.add(CLASSNAMES.INPUT); | ||
| if (!clearButton) { | ||
| inputEle.removeAttribute('required'); | ||
| } | ||
| } | ||
| Input.removeAttributes = removeAttributes; | ||
| /** | ||
| * Adding the multiple attributes to the given element such as "disabled","id" , etc. | ||
| * ``` | ||
| * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element); | ||
| * ``` | ||
| * @param attrs | ||
| * - Array of attributes which is added to element. | ||
| * @param element | ||
| * - Element on which the attributes are needed to be added. | ||
| */ | ||
| function addAttributes(attrs, element) { | ||
| for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) { | ||
| var key = _a[_i]; | ||
| var parentElement = void 0; | ||
| parentElement = getParentNode(element); | ||
| if (key === 'disabled') { | ||
| element.classList.add(CLASSNAMES.DISABLE); | ||
| } | ||
| if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| parentElement.classList.add(CLASSNAMES.DISABLE); | ||
| } | ||
| if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key]; | ||
| } | ||
| else { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| Input.removeFloating = removeFloating; | ||
| function addFloating(input, type, placeholder) { | ||
| var container = closest(input, '.' + CLASSNAMES.INPUTGROUP); | ||
| if (type !== 'Never') { | ||
| var customTag = container.tagName; | ||
| customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null; | ||
| var args = { element: input, floatLabelType: type, customTag: customTag, properties: { placeholder: placeholder } }; | ||
| var iconEle = container.querySelector('.e-clear-icon'); | ||
| var inputObj = { container: container }; | ||
| input.classList.remove(CLASSNAMES.INPUT); | ||
| createFloatingInput(args, inputObj); | ||
| if (isNullOrUndefined(iconEle)) { | ||
| iconEle = container.querySelector('.e-input-group-icon'); | ||
| } | ||
| } | ||
| Input.addAttributes = addAttributes; | ||
| function removeFloating(input) { | ||
| var container = input.container; | ||
| if (!ej2_base_1.isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) { | ||
| var inputEle = container.querySelector('input'); | ||
| var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent; | ||
| var clearButton = container.querySelector('.e-clear-icon') !== null; | ||
| ej2_base_1.detach(container.querySelector('.' + CLASSNAMES.FLOATLINE)); | ||
| ej2_base_1.detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT)); | ||
| ej2_base_1.classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]); | ||
| unwireFloatingEvents(inputEle); | ||
| ej2_base_1.attributes(inputEle, { 'placeholder': placeholder }); | ||
| inputEle.classList.add(CLASSNAMES.INPUT); | ||
| if (!clearButton) { | ||
| inputEle.removeAttribute('required'); | ||
| } | ||
| if (isNullOrUndefined(iconEle)) { | ||
| container.classList.remove(CLASSNAMES.INPUTGROUP); | ||
| } | ||
| } | ||
| Input.removeFloating = removeFloating; | ||
| function addFloating(input, type, placeholder) { | ||
| var container = ej2_base_1.closest(input, '.' + CLASSNAMES.INPUTGROUP); | ||
| if (type !== 'Never') { | ||
| var customTag = container.tagName; | ||
| customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null; | ||
| var args = { element: input, floatLabelType: type, customTag: customTag, properties: { placeholder: placeholder } }; | ||
| var iconEle = container.querySelector('.e-clear-icon'); | ||
| var inputObj = { container: container }; | ||
| input.classList.remove(CLASSNAMES.INPUT); | ||
| createFloatingInput(args, inputObj); | ||
| if (ej2_base_1.isNullOrUndefined(iconEle)) { | ||
| iconEle = container.querySelector('.e-input-group-icon'); | ||
| } | ||
| if (ej2_base_1.isNullOrUndefined(iconEle)) { | ||
| container.classList.remove(CLASSNAMES.INPUTGROUP); | ||
| } | ||
| else { | ||
| var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE); | ||
| var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT); | ||
| container.insertBefore(input, iconEle); | ||
| container.insertBefore(floatLine, iconEle); | ||
| container.insertBefore(floatText, iconEle); | ||
| } | ||
| else { | ||
| var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE); | ||
| var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT); | ||
| container.insertBefore(input, iconEle); | ||
| container.insertBefore(floatLine, iconEle); | ||
| container.insertBefore(floatText, iconEle); | ||
| } | ||
| } | ||
| Input.addFloating = addFloating; | ||
| /** | ||
| * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme. | ||
| * ``` | ||
| * E.g : Input.setRipple(true, [inputObjects]); | ||
| * ``` | ||
| * @param isRipple | ||
| * - Boolean value to specify whether to enable the ripple effect. | ||
| * @param inputObject | ||
| * - Specify the collection of input objects. | ||
| */ | ||
| function setRipple(isRipple, inputObj) { | ||
| for (var i = 0; i < inputObj.length; i++) { | ||
| _internalRipple(isRipple, inputObj[i].container); | ||
| } | ||
| } | ||
| Input.addFloating = addFloating; | ||
| /** | ||
| * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme. | ||
| * ``` | ||
| * E.g : Input.setRipple(true, [inputObjects]); | ||
| * ``` | ||
| * @param isRipple | ||
| * - Boolean value to specify whether to enable the ripple effect. | ||
| * @param inputObject | ||
| * - Specify the collection of input objects. | ||
| */ | ||
| function setRipple(isRipple, inputObj) { | ||
| for (var i = 0; i < inputObj.length; i++) { | ||
| _internalRipple(isRipple, inputObj[i].container); | ||
| } | ||
| Input.setRipple = setRipple; | ||
| function _internalRipple(isRipple, container, button) { | ||
| var argsButton = []; | ||
| argsButton.push(button); | ||
| var buttons = ej2_base_1.isNullOrUndefined(button) ? | ||
| container.querySelectorAll('.e-input-group-icon') : argsButton; | ||
| if (isRipple && buttons.length > 0) { | ||
| for (var index = 0; index < buttons.length; index++) { | ||
| buttons[index].addEventListener('mousedown', _onMouseDownRipple, false); | ||
| buttons[index].addEventListener('mouseup', _onMouseUpRipple, false); | ||
| } | ||
| } | ||
| Input.setRipple = setRipple; | ||
| function _internalRipple(isRipple, container, button) { | ||
| var argsButton = []; | ||
| argsButton.push(button); | ||
| var buttons = isNullOrUndefined(button) ? | ||
| container.querySelectorAll('.e-input-group-icon') : argsButton; | ||
| if (isRipple && buttons.length > 0) { | ||
| for (var index = 0; index < buttons.length; index++) { | ||
| buttons[index].addEventListener('mousedown', _onMouseDownRipple, false); | ||
| buttons[index].addEventListener('mouseup', _onMouseUpRipple, false); | ||
| } | ||
| else if (buttons.length > 0) { | ||
| for (var index = 0; index < buttons.length; index++) { | ||
| buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this); | ||
| buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this); | ||
| } | ||
| } | ||
| } | ||
| function _onMouseRipple(container, button) { | ||
| if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) { | ||
| button.classList.add('e-input-btn-ripple'); | ||
| else if (buttons.length > 0) { | ||
| for (var index = 0; index < buttons.length; index++) { | ||
| buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this); | ||
| buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this); | ||
| } | ||
| } | ||
| function _onMouseDownRipple() { | ||
| var ele = this; | ||
| var parentEle = this.parentElement; | ||
| while (!parentEle.classList.contains('e-input-group')) { | ||
| parentEle = parentEle.parentElement; | ||
| } | ||
| _onMouseRipple(parentEle, ele); | ||
| } | ||
| function _onMouseRipple(container, button) { | ||
| if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) { | ||
| button.classList.add('e-input-btn-ripple'); | ||
| } | ||
| function _onMouseUpRipple() { | ||
| var ele = this; | ||
| setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500); | ||
| } | ||
| function _onMouseDownRipple() { | ||
| var ele = this; | ||
| var parentEle = this.parentElement; | ||
| while (!parentEle.classList.contains('e-input-group')) { | ||
| parentEle = parentEle.parentElement; | ||
| } | ||
| /** | ||
| * Creates a new span element with the given icons added and append it in container element. | ||
| * ``` | ||
| * E.g : Input.appendSpan('e-icon-spin', inputObj.container); | ||
| * ``` | ||
| * @param iconClass - Icon classes which are need to add to the span element which is going to created. | ||
| * Span element acts as icon or button element for input. | ||
| * @param container - The container on which created span element is going to append. | ||
| */ | ||
| function appendSpan(iconClass, container) { | ||
| var button = ej2_base_1.createElement('span', { className: iconClass }); | ||
| button.classList.add('e-input-group-icon'); | ||
| container.appendChild(button); | ||
| if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| container.classList.add(CLASSNAMES.INPUTGROUP); | ||
| } | ||
| _internalRipple(true, container, button); | ||
| return button; | ||
| _onMouseRipple(parentEle, ele); | ||
| } | ||
| function _onMouseUpRipple() { | ||
| var ele = this; | ||
| setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500); | ||
| } | ||
| /** | ||
| * Creates a new span element with the given icons added and append it in container element. | ||
| * ``` | ||
| * E.g : Input.appendSpan('e-icon-spin', inputObj.container); | ||
| * ``` | ||
| * @param iconClass - Icon classes which are need to add to the span element which is going to created. | ||
| * Span element acts as icon or button element for input. | ||
| * @param container - The container on which created span element is going to append. | ||
| */ | ||
| function appendSpan(iconClass, container) { | ||
| var button = createElement('span', { className: iconClass }); | ||
| button.classList.add('e-input-group-icon'); | ||
| container.appendChild(button); | ||
| if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
| container.classList.add(CLASSNAMES.INPUTGROUP); | ||
| } | ||
| Input.appendSpan = appendSpan; | ||
| })(Input = exports.Input || (exports.Input = {})); | ||
| }); | ||
| _internalRipple(true, container, button); | ||
| return button; | ||
| } | ||
| Input.appendSpan = appendSpan; | ||
| })(Input || (Input = {})); |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./mask-base"], function (require, exports, mask_base_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * MaskedTextbox base modules | ||
| */ | ||
| __export(mask_base_1); | ||
| }); | ||
| /** | ||
| * MaskedTextbox base modules | ||
| */ | ||
| export * from './mask-base'; |
@@ -1,993 +0,978 @@ | ||
| define(["require", "exports", "@syncfusion/ej2-base", "../../input/input"], function (require, exports, ej2_base_1, input_1) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var ERROR = 'e-error'; | ||
| var INPUTGROUP = 'e-input-group'; | ||
| var FLOATINPUT = 'e-float-input'; | ||
| var UTILMASK = 'e-utility-mask'; | ||
| var TOPLABEL = 'e-label-top'; | ||
| var BOTTOMLABEL = 'e-label-bottom'; | ||
| /** | ||
| * @hidden | ||
| * Built-in masking elements collection. | ||
| */ | ||
| exports.regularExpressions = { | ||
| '0': '[0-9]', | ||
| '9': '[0-9 ]', | ||
| '#': '[0-9 +-]', | ||
| 'L': '[A-Za-z]', | ||
| '?': '[A-Za-z ]', | ||
| '&': '[^\x7f ]+', | ||
| 'C': '[^\x7f]+', | ||
| 'A': '[A-Za-z0-9]', | ||
| 'a': '[A-Za-z0-9 ]', | ||
| }; | ||
| /** | ||
| * @hidden | ||
| * Generate required masking elements to the MaskedTextBox from user mask input. | ||
| */ | ||
| function createMask() { | ||
| ej2_base_1.attributes(this.element, { | ||
| 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', | ||
| 'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' | ||
| }); | ||
| if (this.mask) { | ||
| var splitMask = this.mask.split(']'); | ||
| for (var i = 0; i < splitMask.length; i++) { | ||
| if (splitMask[i][splitMask[i].length - 1] === '\\') { | ||
| splitMask[i] = splitMask[i] + ']'; | ||
| var splitInnerMask = splitMask[i].split('['); | ||
| /** | ||
| * MaskedTextBox base module | ||
| */ | ||
| import { EventHandler, isNullOrUndefined, merge, attributes, addClass, removeClass, Browser, extend } from '@syncfusion/ej2-base'; | ||
| import { Input } from '../../input/input'; | ||
| var ERROR = 'e-error'; | ||
| var INPUTGROUP = 'e-input-group'; | ||
| var FLOATINPUT = 'e-float-input'; | ||
| var UTILMASK = 'e-utility-mask'; | ||
| var TOPLABEL = 'e-label-top'; | ||
| var BOTTOMLABEL = 'e-label-bottom'; | ||
| /** | ||
| * @hidden | ||
| * Built-in masking elements collection. | ||
| */ | ||
| export var regularExpressions = { | ||
| '0': '[0-9]', | ||
| '9': '[0-9 ]', | ||
| '#': '[0-9 +-]', | ||
| 'L': '[A-Za-z]', | ||
| '?': '[A-Za-z ]', | ||
| '&': '[^\x7f ]+', | ||
| 'C': '[^\x7f]+', | ||
| 'A': '[A-Za-z0-9]', | ||
| 'a': '[A-Za-z0-9 ]', | ||
| }; | ||
| /** | ||
| * @hidden | ||
| * Generate required masking elements to the MaskedTextBox from user mask input. | ||
| */ | ||
| export function createMask() { | ||
| attributes(this.element, { | ||
| 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', | ||
| 'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' | ||
| }); | ||
| if (this.mask) { | ||
| var splitMask = this.mask.split(']'); | ||
| for (var i = 0; i < splitMask.length; i++) { | ||
| if (splitMask[i][splitMask[i].length - 1] === '\\') { | ||
| splitMask[i] = splitMask[i] + ']'; | ||
| var splitInnerMask = splitMask[i].split('['); | ||
| for (var j = 0; j < splitInnerMask.length; j++) { | ||
| if (splitInnerMask[j][splitInnerMask[j].length - 1] === '\\') { | ||
| splitInnerMask[j] = splitInnerMask[j] + '['; | ||
| } | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[j]); | ||
| } | ||
| } | ||
| else { | ||
| var splitInnerMask = splitMask[i].split('['); | ||
| if (splitInnerMask.length > 1) { | ||
| var chkSpace = false; | ||
| for (var j = 0; j < splitInnerMask.length; j++) { | ||
| if (splitInnerMask[j][splitInnerMask[j].length - 1] === '\\') { | ||
| splitInnerMask[j] = splitInnerMask[j] + '['; | ||
| if (splitInnerMask[j] === '\\') { | ||
| this.customRegExpCollec.push('['); | ||
| this.hiddenMask += splitInnerMask[j] + '['; | ||
| } | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[j]); | ||
| else if (splitInnerMask[j] === '') { | ||
| chkSpace = true; | ||
| } | ||
| else if ((splitInnerMask[j] !== '' && chkSpace) || j === splitInnerMask.length - 1) { | ||
| this.customRegExpCollec.push('[' + splitInnerMask[j] + ']'); | ||
| this.hiddenMask += this.promptChar; | ||
| chkSpace = false; | ||
| } | ||
| else { | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[j]); | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| var splitInnerMask = splitMask[i].split('['); | ||
| if (splitInnerMask.length > 1) { | ||
| var chkSpace = false; | ||
| for (var j = 0; j < splitInnerMask.length; j++) { | ||
| if (splitInnerMask[j] === '\\') { | ||
| this.customRegExpCollec.push('['); | ||
| this.hiddenMask += splitInnerMask[j] + '['; | ||
| } | ||
| else if (splitInnerMask[j] === '') { | ||
| chkSpace = true; | ||
| } | ||
| else if ((splitInnerMask[j] !== '' && chkSpace) || j === splitInnerMask.length - 1) { | ||
| this.customRegExpCollec.push('[' + splitInnerMask[j] + ']'); | ||
| this.hiddenMask += this.promptChar; | ||
| chkSpace = false; | ||
| } | ||
| else { | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[j]); | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[0]); | ||
| } | ||
| pushIntoRegExpCollec.call(this, splitInnerMask[0]); | ||
| } | ||
| } | ||
| this.escapeMaskValue = this.hiddenMask; | ||
| this.promptMask = this.hiddenMask.replace(/[09?LCAa#&]/g, this.promptChar); | ||
| if (!ej2_base_1.isNullOrUndefined(this.customCharacters)) { | ||
| for (var i = 0; i < this.promptMask.length; i++) { | ||
| if (!ej2_base_1.isNullOrUndefined(this.customCharacters[this.promptMask[i]])) { | ||
| this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar); | ||
| } | ||
| } | ||
| this.escapeMaskValue = this.hiddenMask; | ||
| this.promptMask = this.hiddenMask.replace(/[09?LCAa#&]/g, this.promptChar); | ||
| if (!isNullOrUndefined(this.customCharacters)) { | ||
| for (var i = 0; i < this.promptMask.length; i++) { | ||
| if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) { | ||
| this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar); | ||
| } | ||
| } | ||
| var escapeNumber = 0; | ||
| if (this.hiddenMask.match(new RegExp(/\\/))) { | ||
| for (var i = 0; i < this.hiddenMask.length; i++) { | ||
| var j = 0; | ||
| if (i >= 2) { | ||
| j = i; | ||
| } | ||
| escapeNumber = this.hiddenMask.length - this.promptMask.length; | ||
| j = j - escapeNumber; | ||
| if ((i > 0 && this.hiddenMask[i - 1] !== '\\') && (this.hiddenMask[i] === '>' || | ||
| this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|')) { | ||
| this.promptMask = this.promptMask.substring(0, j) + | ||
| this.promptMask.substring((i + 1) - escapeNumber, this.promptMask.length); | ||
| this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + | ||
| this.escapeMaskValue.substring((i + 1) - escapeNumber, this.escapeMaskValue.length); | ||
| } | ||
| if (this.hiddenMask[i] === '\\') { | ||
| this.promptMask = this.promptMask.substring(0, j) + this.hiddenMask[i + 1] + | ||
| this.promptMask.substring((i + 2) - escapeNumber, this.promptMask.length); | ||
| this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + this.escapeMaskValue[i + 1] + | ||
| this.escapeMaskValue.substring((i + 2) - escapeNumber, this.escapeMaskValue.length); | ||
| } | ||
| } | ||
| var escapeNumber = 0; | ||
| if (this.hiddenMask.match(new RegExp(/\\/))) { | ||
| for (var i = 0; i < this.hiddenMask.length; i++) { | ||
| var j = 0; | ||
| if (i >= 2) { | ||
| j = i; | ||
| } | ||
| escapeNumber = this.hiddenMask.length - this.promptMask.length; | ||
| j = j - escapeNumber; | ||
| if ((i > 0 && this.hiddenMask[i - 1] !== '\\') && (this.hiddenMask[i] === '>' || | ||
| this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|')) { | ||
| this.promptMask = this.promptMask.substring(0, j) + | ||
| this.promptMask.substring((i + 1) - escapeNumber, this.promptMask.length); | ||
| this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + | ||
| this.escapeMaskValue.substring((i + 1) - escapeNumber, this.escapeMaskValue.length); | ||
| } | ||
| if (this.hiddenMask[i] === '\\') { | ||
| this.promptMask = this.promptMask.substring(0, j) + this.hiddenMask[i + 1] + | ||
| this.promptMask.substring((i + 2) - escapeNumber, this.promptMask.length); | ||
| this.escapeMaskValue = this.escapeMaskValue.substring(0, j) + this.escapeMaskValue[i + 1] + | ||
| this.escapeMaskValue.substring((i + 2) - escapeNumber, this.escapeMaskValue.length); | ||
| } | ||
| } | ||
| else { | ||
| this.promptMask = this.promptMask.replace(/[>|<]/g, ''); | ||
| this.escapeMaskValue = this.hiddenMask.replace(/[>|<]/g, ''); | ||
| } | ||
| ej2_base_1.attributes(this.element, { 'aria-invalid': 'false' }); | ||
| } | ||
| else { | ||
| this.promptMask = this.promptMask.replace(/[>|<]/g, ''); | ||
| this.escapeMaskValue = this.hiddenMask.replace(/[>|<]/g, ''); | ||
| } | ||
| attributes(this.element, { 'aria-invalid': 'false' }); | ||
| } | ||
| exports.createMask = createMask; | ||
| /** | ||
| * @hidden | ||
| * Apply mask ability with masking elements to the MaskedTextBox. | ||
| */ | ||
| function applyMask() { | ||
| setElementValue.call(this, this.promptMask); | ||
| setMaskValue.call(this, this.value); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Apply mask ability with masking elements to the MaskedTextBox. | ||
| */ | ||
| export function applyMask() { | ||
| setElementValue.call(this, this.promptMask); | ||
| setMaskValue.call(this, this.value); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To wire required events to the MaskedTextBox. | ||
| */ | ||
| export function wireEvents() { | ||
| EventHandler.add(this.element, 'keydown', maskInputKeyDownHandler, this); | ||
| EventHandler.add(this.element, 'keypress', maskInputKeyPressHandler, this); | ||
| EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this); | ||
| EventHandler.add(this.element, 'input', maskInputHandler, this); | ||
| EventHandler.add(this.element, 'focus', maskInputFocusHandler, this); | ||
| EventHandler.add(this.element, 'blur', maskInputBlurHandler, this); | ||
| EventHandler.add(this.element, 'paste', maskInputPasteHandler, this); | ||
| EventHandler.add(this.element, 'cut', maskInputCutHandler, this); | ||
| EventHandler.add(this.element, 'drop', maskInputDropHandler, this); | ||
| if (this.enabled) { | ||
| bindClearEvent.call(this); | ||
| } | ||
| exports.applyMask = applyMask; | ||
| /** | ||
| * @hidden | ||
| * To wire required events to the MaskedTextBox. | ||
| */ | ||
| function wireEvents() { | ||
| ej2_base_1.EventHandler.add(this.element, 'keydown', maskInputKeyDownHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'keypress', maskInputKeyPressHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'keyup', maskInputKeyUpHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'input', maskInputHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'focus', maskInputFocusHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'blur', maskInputBlurHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'paste', maskInputPasteHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'cut', maskInputCutHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'drop', maskInputDropHandler, this); | ||
| if (this.enabled) { | ||
| bindClearEvent.call(this); | ||
| } | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To unwire events attached to the MaskedTextBox. | ||
| */ | ||
| export function unwireEvents() { | ||
| EventHandler.remove(this.element, 'keydown', maskInputKeyDownHandler); | ||
| EventHandler.remove(this.element, 'keypress', maskInputKeyPressHandler); | ||
| EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler); | ||
| EventHandler.remove(this.element, 'input', maskInputHandler); | ||
| EventHandler.remove(this.element, 'focus', maskInputFocusHandler); | ||
| EventHandler.remove(this.element, 'blur', maskInputBlurHandler); | ||
| EventHandler.remove(this.element, 'paste', maskInputPasteHandler); | ||
| EventHandler.remove(this.element, 'cut', maskInputCutHandler); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To bind required events to the MaskedTextBox clearButton. | ||
| */ | ||
| export function bindClearEvent() { | ||
| if (this.showClearButton) { | ||
| EventHandler.add(this.inputObj.clearButton, 'mousedown touchstart', resetHandler, this); | ||
| } | ||
| exports.wireEvents = wireEvents; | ||
| /** | ||
| * @hidden | ||
| * To unwire events attached to the MaskedTextBox. | ||
| */ | ||
| function unwireEvents() { | ||
| ej2_base_1.EventHandler.remove(this.element, 'keydown', maskInputKeyDownHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'keypress', maskInputKeyPressHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'keyup', maskInputKeyUpHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'input', maskInputHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'focus', maskInputFocusHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'blur', maskInputBlurHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'paste', maskInputPasteHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'cut', maskInputCutHandler); | ||
| } | ||
| function resetHandler(e) { | ||
| e.preventDefault(); | ||
| if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) { | ||
| clear.call(this, e); | ||
| } | ||
| exports.unwireEvents = unwireEvents; | ||
| /** | ||
| * @hidden | ||
| * To bind required events to the MaskedTextBox clearButton. | ||
| */ | ||
| function bindClearEvent() { | ||
| if (this.showClearButton) { | ||
| ej2_base_1.EventHandler.add(this.inputObj.clearButton, 'mousedown touchstart', resetHandler, this); | ||
| } | ||
| function clear(event) { | ||
| var value = this.element.value; | ||
| setElementValue.call(this, this.promptMask); | ||
| this.redoCollec.unshift({ | ||
| value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| triggerMaskChangeEvent.call(this, event, value); | ||
| this.element.setSelectionRange(0, 0); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To get masked value from the MaskedTextBox. | ||
| */ | ||
| export function unstrippedValue(element) { | ||
| return element.value; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To extract raw value from the MaskedTextBox. | ||
| */ | ||
| export function strippedValue(element, maskValues) { | ||
| var value = ''; | ||
| var k = 0; | ||
| var checkMask = false; | ||
| var maskValue = (!isNullOrUndefined(maskValues)) ? maskValues : (!isNullOrUndefined(element) && | ||
| !isNullOrUndefined(this)) ? element.value : maskValues; | ||
| if (maskValue !== this.promptMask) { | ||
| for (var i = 0; i < this.customRegExpCollec.length; i++) { | ||
| if (checkMask) { | ||
| checkMask = false; | ||
| } | ||
| if (this.customRegExpCollec[k] === '>' || this.customRegExpCollec[k] === '<' || | ||
| this.customRegExpCollec[k] === '|' || this.customRegExpCollec[k] === '\\') { | ||
| --i; | ||
| checkMask = true; | ||
| } | ||
| if (!checkMask) { | ||
| if ((maskValue[i] !== this.promptChar) && (!isNullOrUndefined(this.customRegExpCollec[k]) && | ||
| ((!isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) || | ||
| (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' && | ||
| this.customRegExpCollec[k][this.customRegExpCollec[k].length - 1] === ']') || | ||
| (!isNullOrUndefined(this.customCharacters) && | ||
| (!isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) { | ||
| value += maskValue[i]; | ||
| } | ||
| } | ||
| ++k; | ||
| } | ||
| } | ||
| exports.bindClearEvent = bindClearEvent; | ||
| function resetHandler(e) { | ||
| e.preventDefault(); | ||
| if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) { | ||
| clear.call(this, e); | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| value = maskValue; | ||
| } | ||
| return value; | ||
| } | ||
| function pushIntoRegExpCollec(value) { | ||
| for (var k = 0; k < value.length; k++) { | ||
| this.hiddenMask += value[k]; | ||
| if (value[k] !== '\\') { | ||
| this.customRegExpCollec.push(value[k]); | ||
| } | ||
| } | ||
| function clear(event) { | ||
| var value = this.element.value; | ||
| setElementValue.call(this, this.promptMask); | ||
| this.redoCollec.unshift({ | ||
| value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| triggerMaskChangeEvent.call(this, event, value); | ||
| this.element.setSelectionRange(0, 0); | ||
| } | ||
| export function maskInputFocusHandler(event) { | ||
| var _this = this; | ||
| if (this.promptMask.length > 0) { | ||
| this.focusEventArgs = { selectionStart: 0, selectionEnd: this.promptMask.length }; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To get masked value from the MaskedTextBox. | ||
| */ | ||
| function unstrippedValue(element) { | ||
| return element.value; | ||
| else { | ||
| this.focusEventArgs = { selectionStart: 0, selectionEnd: this.element.value.length }; | ||
| } | ||
| exports.unstrippedValue = unstrippedValue; | ||
| /** | ||
| * @hidden | ||
| * To extract raw value from the MaskedTextBox. | ||
| */ | ||
| function strippedValue(element, maskValues) { | ||
| var value = ''; | ||
| var k = 0; | ||
| var checkMask = false; | ||
| var maskValue = (!ej2_base_1.isNullOrUndefined(maskValues)) ? maskValues : (!ej2_base_1.isNullOrUndefined(element) && | ||
| !ej2_base_1.isNullOrUndefined(this)) ? element.value : maskValues; | ||
| if (maskValue !== this.promptMask) { | ||
| for (var i = 0; i < this.customRegExpCollec.length; i++) { | ||
| if (checkMask) { | ||
| checkMask = false; | ||
| } | ||
| if (this.customRegExpCollec[k] === '>' || this.customRegExpCollec[k] === '<' || | ||
| this.customRegExpCollec[k] === '|' || this.customRegExpCollec[k] === '\\') { | ||
| --i; | ||
| checkMask = true; | ||
| } | ||
| if (!checkMask) { | ||
| if ((maskValue[i] !== this.promptChar) && (!ej2_base_1.isNullOrUndefined(this.customRegExpCollec[k]) && | ||
| ((!ej2_base_1.isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) || | ||
| (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' && | ||
| this.customRegExpCollec[k][this.customRegExpCollec[k].length - 1] === ']') || | ||
| (!ej2_base_1.isNullOrUndefined(this.customCharacters) && | ||
| (!ej2_base_1.isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) { | ||
| value += maskValue[i]; | ||
| } | ||
| } | ||
| ++k; | ||
| } | ||
| var eventArgs = {}; | ||
| merge(eventArgs, this.focusEventArgs); | ||
| this.trigger('focus', eventArgs); | ||
| this.focusEventArgs = eventArgs; | ||
| if (this.mask) { | ||
| this.isFocus = true; | ||
| if (this.element.value === '') { | ||
| setElementValue.call(this, this.promptMask); | ||
| } | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| value = maskValue; | ||
| else { | ||
| setElementValue.call(this, this.element.value); | ||
| } | ||
| return value; | ||
| } | ||
| exports.strippedValue = strippedValue; | ||
| function pushIntoRegExpCollec(value) { | ||
| for (var k = 0; k < value.length; k++) { | ||
| this.hiddenMask += value[k]; | ||
| if (value[k] !== '\\') { | ||
| this.customRegExpCollec.push(value[k]); | ||
| } | ||
| if (!Browser.isDevice && Browser.info.version === '11.0') { | ||
| this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd); | ||
| } | ||
| } | ||
| function maskInputFocusHandler(event) { | ||
| var _this = this; | ||
| if (this.promptMask.length > 0) { | ||
| this.focusEventArgs = { selectionStart: 0, selectionEnd: this.promptMask.length }; | ||
| } | ||
| else { | ||
| this.focusEventArgs = { selectionStart: 0, selectionEnd: this.element.value.length }; | ||
| var delay = (Browser.isDevice && Browser.isIos) ? 450 : 0; | ||
| setTimeout(function () { | ||
| _this.element.setSelectionRange(_this.focusEventArgs.selectionStart, _this.focusEventArgs.selectionEnd); | ||
| }, delay); | ||
| } | ||
| var eventArgs = {}; | ||
| ej2_base_1.merge(eventArgs, this.focusEventArgs); | ||
| this.trigger('focus', eventArgs); | ||
| this.focusEventArgs = eventArgs; | ||
| if (this.mask) { | ||
| this.isFocus = true; | ||
| if (this.element.value === '') { | ||
| setElementValue.call(this, this.promptMask); | ||
| } | ||
| } | ||
| export function maskInputBlurHandler(event) { | ||
| if (this.mask) { | ||
| this.isFocus = false; | ||
| if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') { | ||
| setElementValue.call(this, ''); | ||
| var labelElement = this.element.parentNode.querySelector('.e-float-text'); | ||
| if (this.floatLabelType === 'Auto' && !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL)) { | ||
| removeClass([labelElement], TOPLABEL); | ||
| } | ||
| else { | ||
| setElementValue.call(this, this.element.value); | ||
| } | ||
| if (!ej2_base_1.Browser.isDevice && ej2_base_1.Browser.info.version === '11.0') { | ||
| this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd); | ||
| } | ||
| else { | ||
| var delay = (ej2_base_1.Browser.isDevice && ej2_base_1.Browser.isIos) ? 450 : 0; | ||
| setTimeout(function () { | ||
| _this.element.setSelectionRange(_this.focusEventArgs.selectionStart, _this.focusEventArgs.selectionEnd); | ||
| }, delay); | ||
| } | ||
| } | ||
| } | ||
| exports.maskInputFocusHandler = maskInputFocusHandler; | ||
| function maskInputBlurHandler(event) { | ||
| if (this.mask) { | ||
| this.isFocus = false; | ||
| if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') { | ||
| setElementValue.call(this, ''); | ||
| var labelElement = this.element.parentNode.querySelector('.e-float-text'); | ||
| if (this.floatLabelType === 'Auto' && !ej2_base_1.isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL)) { | ||
| ej2_base_1.removeClass([labelElement], TOPLABEL); | ||
| } | ||
| } | ||
| function maskInputPasteHandler(event) { | ||
| var _this = this; | ||
| if (this.mask) { | ||
| var sIndex_1 = this.element.selectionStart; | ||
| var eIndex_1 = this.element.selectionEnd; | ||
| var oldValue_1 = this.element.value; | ||
| setElementValue.call(this, ''); | ||
| this._callPasteHandler = true; | ||
| setTimeout(function () { | ||
| var value = _this.element.value.replace(/ /g, ''); | ||
| if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) { | ||
| value = strippedValue.call(_this, _this.element); | ||
| } | ||
| } | ||
| } | ||
| exports.maskInputBlurHandler = maskInputBlurHandler; | ||
| function maskInputPasteHandler(event) { | ||
| var _this = this; | ||
| if (this.mask) { | ||
| var sIndex_1 = this.element.selectionStart; | ||
| var eIndex_1 = this.element.selectionEnd; | ||
| var oldValue_1 = this.element.value; | ||
| setElementValue.call(this, ''); | ||
| this._callPasteHandler = true; | ||
| setTimeout(function () { | ||
| var value = _this.element.value.replace(/ /g, ''); | ||
| if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) { | ||
| value = strippedValue.call(_this, _this.element); | ||
| } | ||
| setElementValue.call(_this, oldValue_1); | ||
| _this.element.selectionStart = sIndex_1; | ||
| _this.element.selectionEnd = eIndex_1; | ||
| var i = 0; | ||
| setElementValue.call(_this, oldValue_1); | ||
| _this.element.selectionStart = sIndex_1; | ||
| _this.element.selectionEnd = eIndex_1; | ||
| var i = 0; | ||
| _this.maskKeyPress = true; | ||
| do { | ||
| validateValue.call(_this, value[i], false, null); | ||
| ++i; | ||
| } while (i < value.length); | ||
| _this.maskKeyPress = false; | ||
| _this._callPasteHandler = false; | ||
| if (_this.element.value === oldValue_1) { | ||
| var i_1 = 0; | ||
| _this.maskKeyPress = true; | ||
| do { | ||
| validateValue.call(_this, value[i], false, null); | ||
| ++i; | ||
| } while (i < value.length); | ||
| validateValue.call(_this, value[i_1], false, null); | ||
| ++i_1; | ||
| } while (i_1 < value.length); | ||
| _this.maskKeyPress = false; | ||
| _this._callPasteHandler = false; | ||
| if (_this.element.value === oldValue_1) { | ||
| var i_1 = 0; | ||
| _this.maskKeyPress = true; | ||
| do { | ||
| validateValue.call(_this, value[i_1], false, null); | ||
| ++i_1; | ||
| } while (i_1 < value.length); | ||
| _this.maskKeyPress = false; | ||
| } | ||
| }, 1); | ||
| } | ||
| } | ||
| }, 1); | ||
| } | ||
| function maskInputCutHandler(event) { | ||
| var _this = this; | ||
| if (this.mask) { | ||
| var sIndex_2 = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd }); | ||
| var value_1 = this.element.value.substring(0, sIndex_2) + this.promptMask.substring(sIndex_2, eIndex) + | ||
| this.element.value.substring(eIndex); | ||
| setTimeout(function () { | ||
| setElementValue.call(_this, value_1); | ||
| _this.element.selectionStart = _this.element.selectionEnd = sIndex_2; | ||
| }, 0); | ||
| } | ||
| } | ||
| function maskInputCutHandler(event) { | ||
| var _this = this; | ||
| if (this.mask) { | ||
| var sIndex_2 = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd }); | ||
| var value_1 = this.element.value.substring(0, sIndex_2) + this.promptMask.substring(sIndex_2, eIndex) + | ||
| this.element.value.substring(eIndex); | ||
| setTimeout(function () { | ||
| setElementValue.call(_this, value_1); | ||
| _this.element.selectionStart = _this.element.selectionEnd = sIndex_2; | ||
| }, 0); | ||
| } | ||
| function maskInputDropHandler(event) { | ||
| event.preventDefault(); | ||
| } | ||
| exports.maskInputDropHandler = maskInputDropHandler; | ||
| function maskInputHandler(event) { | ||
| var eventArgs = { ctrlKey: false, keyCode: 229 }; | ||
| // tslint:disable-next-line | ||
| ej2_base_1.extend(event, eventArgs); | ||
| if (this.mask) { | ||
| if (this.element.value === '') { | ||
| this.redoCollec.unshift({ | ||
| value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| if (this.element.value.length === 1) { | ||
| this.element.value = this.element.value + this.promptMask; | ||
| this.element.setSelectionRange(1, 1); | ||
| } | ||
| if (!this._callPasteHandler) { | ||
| removeMaskInputValues.call(this, event); | ||
| } | ||
| if (this.element.value.length > this.promptMask.length) { | ||
| var startIndex = this.element.selectionStart; | ||
| var addedValues = this.element.value.length - this.promptMask.length; | ||
| var value = this.element.value.substring(startIndex - addedValues, startIndex); | ||
| this.maskKeyPress = false; | ||
| var i = 0; | ||
| do { | ||
| validateValue.call(this, value[i], event.ctrlKey, event); | ||
| ++i; | ||
| } while (i < value.length); | ||
| } | ||
| var val = strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (val === '') { | ||
| setElementValue.call(this, this.promptMask); | ||
| this.element.setSelectionRange(0, 0); | ||
| } | ||
| } | ||
| export function maskInputDropHandler(event) { | ||
| event.preventDefault(); | ||
| } | ||
| function maskInputHandler(event) { | ||
| var eventArgs = { ctrlKey: false, keyCode: 229 }; | ||
| // tslint:disable-next-line | ||
| extend(event, eventArgs); | ||
| if (this.mask) { | ||
| if (this.element.value === '') { | ||
| this.redoCollec.unshift({ | ||
| value: this.promptMask, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| if (this.element.value.length === 1) { | ||
| this.element.value = this.element.value + this.promptMask; | ||
| this.element.setSelectionRange(1, 1); | ||
| } | ||
| if (!this._callPasteHandler) { | ||
| removeMaskInputValues.call(this, event); | ||
| } | ||
| if (this.element.value.length > this.promptMask.length) { | ||
| var startIndex = this.element.selectionStart; | ||
| var addedValues = this.element.value.length - this.promptMask.length; | ||
| var value = this.element.value.substring(startIndex - addedValues, startIndex); | ||
| this.maskKeyPress = false; | ||
| var i = 0; | ||
| do { | ||
| validateValue.call(this, value[i], event.ctrlKey, event); | ||
| ++i; | ||
| } while (i < value.length); | ||
| } | ||
| var val = strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (val === '') { | ||
| setElementValue.call(this, this.promptMask); | ||
| this.element.setSelectionRange(0, 0); | ||
| } | ||
| } | ||
| function maskInputKeyDownHandler(event) { | ||
| if (this.mask) { | ||
| var value = this; | ||
| if (event.keyCode !== 229) { | ||
| if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) { | ||
| event.preventDefault(); | ||
| } | ||
| removeMaskInputValues.call(this, event); | ||
| } | ||
| var startValue = this.element.value; | ||
| } | ||
| function maskInputKeyDownHandler(event) { | ||
| if (this.mask) { | ||
| var value = this; | ||
| if (event.keyCode !== 229) { | ||
| if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) { | ||
| var collec = void 0; | ||
| if (event.keyCode === 90 && this.undoCollec.length > 0 && startValue !== this.undoCollec[this.undoCollec.length - 1].value) { | ||
| collec = this.undoCollec[this.undoCollec.length - 1]; | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| setElementValue.call(this, collec.value); | ||
| this.element.selectionStart = collec.startIndex; | ||
| this.element.selectionEnd = collec.endIndex; | ||
| this.undoCollec.splice(this.undoCollec.length - 1, 1); | ||
| } | ||
| else if (event.keyCode === 89 && this.redoCollec.length > 0 && startValue !== this.redoCollec[0].value) { | ||
| collec = this.redoCollec[0]; | ||
| this.undoCollec.push({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| setElementValue.call(this, collec.value); | ||
| this.element.selectionStart = collec.startIndex; | ||
| this.element.selectionEnd = collec.endIndex; | ||
| this.redoCollec.splice(0, 1); | ||
| } | ||
| event.preventDefault(); | ||
| } | ||
| removeMaskInputValues.call(this, event); | ||
| } | ||
| } | ||
| function mobileRemoveFunction() { | ||
| var collec; | ||
| var sIndex = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| if (this.redoCollec.length > 0) { | ||
| collec = this.redoCollec[0]; | ||
| setElementValue.call(this, collec.value); | ||
| if ((collec.startIndex - sIndex) === 1) { | ||
| var startValue = this.element.value; | ||
| if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) { | ||
| var collec = void 0; | ||
| if (event.keyCode === 90 && this.undoCollec.length > 0 && startValue !== this.undoCollec[this.undoCollec.length - 1].value) { | ||
| collec = this.undoCollec[this.undoCollec.length - 1]; | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| setElementValue.call(this, collec.value); | ||
| this.element.selectionStart = collec.startIndex; | ||
| this.element.selectionEnd = collec.endIndex; | ||
| this.undoCollec.splice(this.undoCollec.length - 1, 1); | ||
| } | ||
| else { | ||
| this.element.selectionStart = sIndex + 1; | ||
| this.element.selectionEnd = eIndex + 1; | ||
| else if (event.keyCode === 89 && this.redoCollec.length > 0 && startValue !== this.redoCollec[0].value) { | ||
| collec = this.redoCollec[0]; | ||
| this.undoCollec.push({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| setElementValue.call(this, collec.value); | ||
| this.element.selectionStart = collec.startIndex; | ||
| this.element.selectionEnd = collec.endIndex; | ||
| this.redoCollec.splice(0, 1); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| export function mobileRemoveFunction() { | ||
| var collec; | ||
| var sIndex = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| if (this.redoCollec.length > 0) { | ||
| collec = this.redoCollec[0]; | ||
| setElementValue.call(this, collec.value); | ||
| if ((collec.startIndex - sIndex) === 1) { | ||
| this.element.selectionStart = collec.startIndex; | ||
| this.element.selectionEnd = collec.endIndex; | ||
| } | ||
| else { | ||
| setElementValue.call(this, this.promptMask); | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| this.element.selectionStart = sIndex + 1; | ||
| this.element.selectionEnd = eIndex + 1; | ||
| } | ||
| } | ||
| exports.mobileRemoveFunction = mobileRemoveFunction; | ||
| function removeMaskInputValues(event) { | ||
| var isRemove = false; | ||
| var oldEventVal; | ||
| var isDeleted = false; | ||
| if (this.element.value.length < this.promptMask.length) { | ||
| isRemove = true; | ||
| mobileRemoveFunction.call(this); | ||
| oldEventVal = this.element.value; | ||
| } | ||
| var initStartIndex = this.element.selectionStart; | ||
| var initEndIndex = this.element.selectionEnd; | ||
| var startIndex = this.element.selectionStart; | ||
| var endIndex = this.element.selectionEnd; | ||
| var maskValue = this.hiddenMask.replace(/[>|\\<]/g, ''); | ||
| var curMask = maskValue[startIndex - 1]; | ||
| var parentElement = this.element.parentNode; | ||
| if (isRemove || event.keyCode === 8 || event.keyCode === 46) { | ||
| this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: endIndex }); | ||
| var multipleDel = false; | ||
| if (startIndex > 0 || ((event.keyCode === 8 || event.keyCode === 46) && startIndex < this.element.value.length | ||
| && ((this.element.selectionEnd - startIndex) !== this.element.value.length))) { | ||
| var index = startIndex; | ||
| if (startIndex !== endIndex) { | ||
| startIndex = endIndex; | ||
| if (event.keyCode === 46) { | ||
| multipleDel = true; | ||
| else { | ||
| setElementValue.call(this, this.promptMask); | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| } | ||
| } | ||
| function removeMaskInputValues(event) { | ||
| var isRemove = false; | ||
| var oldEventVal; | ||
| var isDeleted = false; | ||
| if (this.element.value.length < this.promptMask.length) { | ||
| isRemove = true; | ||
| mobileRemoveFunction.call(this); | ||
| oldEventVal = this.element.value; | ||
| } | ||
| var initStartIndex = this.element.selectionStart; | ||
| var initEndIndex = this.element.selectionEnd; | ||
| var startIndex = this.element.selectionStart; | ||
| var endIndex = this.element.selectionEnd; | ||
| var maskValue = this.hiddenMask.replace(/[>|\\<]/g, ''); | ||
| var curMask = maskValue[startIndex - 1]; | ||
| var parentElement = this.element.parentNode; | ||
| if (isRemove || event.keyCode === 8 || event.keyCode === 46) { | ||
| this.undoCollec.push({ value: this.element.value, startIndex: this.element.selectionStart, endIndex: endIndex }); | ||
| var multipleDel = false; | ||
| if (startIndex > 0 || ((event.keyCode === 8 || event.keyCode === 46) && startIndex < this.element.value.length | ||
| && ((this.element.selectionEnd - startIndex) !== this.element.value.length))) { | ||
| var index = startIndex; | ||
| if (startIndex !== endIndex) { | ||
| startIndex = endIndex; | ||
| if (event.keyCode === 46) { | ||
| multipleDel = true; | ||
| } | ||
| } | ||
| else if (event.keyCode === 46) { | ||
| ++index; | ||
| } | ||
| else { | ||
| --index; | ||
| } | ||
| for (var k = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? k > index : k < index; (event.keyCode === 8 || isRemove || multipleDel) ? k-- : k++) { | ||
| for (var i = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? i > 0 : i < this.element.value.length; (event.keyCode === 8 || isRemove || multipleDel) ? i-- : i++) { | ||
| var sIndex = void 0; | ||
| if (((event.keyCode === 8 || multipleDel) && ((initStartIndex !== initEndIndex && initStartIndex !== startIndex) || | ||
| (initStartIndex === initEndIndex))) || isRemove) { | ||
| curMask = maskValue[i - 1]; | ||
| sIndex = startIndex - 1; | ||
| } | ||
| } | ||
| else if (event.keyCode === 46) { | ||
| ++index; | ||
| } | ||
| else { | ||
| --index; | ||
| } | ||
| for (var k = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? k > index : k < index; (event.keyCode === 8 || isRemove || multipleDel) ? k-- : k++) { | ||
| for (var i = startIndex; (event.keyCode === 8 || isRemove || multipleDel) ? i > 0 : i < this.element.value.length; (event.keyCode === 8 || isRemove || multipleDel) ? i-- : i++) { | ||
| var sIndex = void 0; | ||
| if (((event.keyCode === 8 || multipleDel) && ((initStartIndex !== initEndIndex && initStartIndex !== startIndex) || | ||
| (initStartIndex === initEndIndex))) || isRemove) { | ||
| curMask = maskValue[i - 1]; | ||
| sIndex = startIndex - 1; | ||
| else { | ||
| curMask = maskValue[i]; | ||
| sIndex = startIndex; | ||
| ++startIndex; | ||
| } | ||
| var oldValue = this.element.value[sIndex]; | ||
| if ((isNullOrUndefined(this.regExpCollec[curMask]) && (!isNullOrUndefined(this.customCharacters) | ||
| && isNullOrUndefined(this.customCharacters[curMask])) | ||
| && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '[' | ||
| && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']'))) | ||
| || (this.promptMask[sIndex] !== this.promptChar && isNullOrUndefined(this.customCharacters))) { | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| event.preventDefault(); | ||
| if (event.keyCode === 46 && !multipleDel) { | ||
| ++this.element.selectionStart; | ||
| } | ||
| else { | ||
| curMask = maskValue[i]; | ||
| sIndex = startIndex; | ||
| ++startIndex; | ||
| } | ||
| var oldValue = this.element.value[sIndex]; | ||
| if ((ej2_base_1.isNullOrUndefined(this.regExpCollec[curMask]) && (!ej2_base_1.isNullOrUndefined(this.customCharacters) | ||
| && ej2_base_1.isNullOrUndefined(this.customCharacters[curMask])) | ||
| && ((this.hiddenMask[sIndex] !== this.promptChar && this.customRegExpCollec[sIndex][0] !== '[' | ||
| && this.customRegExpCollec[sIndex][this.customRegExpCollec[sIndex].length - 1] !== ']'))) | ||
| || (this.promptMask[sIndex] !== this.promptChar && ej2_base_1.isNullOrUndefined(this.customCharacters))) { | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| event.preventDefault(); | ||
| if (event.keyCode === 46 && !multipleDel) { | ||
| ++this.element.selectionStart; | ||
| } | ||
| } | ||
| else { | ||
| var value = this.element.value; | ||
| var prompt_1 = this.promptChar; | ||
| var elementValue = value.substring(0, sIndex) + prompt_1 + value.substring(startIndex, value.length); | ||
| setElementValue.call(this, elementValue); | ||
| event.preventDefault(); | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| isDeleted = true; | ||
| } | ||
| startIndex = this.element.selectionStart; | ||
| if ((!isDeleted && event.keyCode === 8) || multipleDel || (!isDeleted && !(event.keyCode === 46))) { | ||
| sIndex = startIndex - 1; | ||
| } | ||
| else { | ||
| sIndex = startIndex; | ||
| isDeleted = false; | ||
| } | ||
| oldValue = this.element.value[sIndex]; | ||
| if (((initStartIndex !== initEndIndex) && (this.element.selectionStart === initStartIndex)) | ||
| || (this.promptMask[sIndex] === this.promptChar) || ((oldValue !== this.promptMask[sIndex]) && | ||
| (this.promptMask[sIndex] !== this.promptChar) && !ej2_base_1.isNullOrUndefined(this.customCharacters))) { | ||
| break; | ||
| } | ||
| } | ||
| else { | ||
| var value = this.element.value; | ||
| var prompt_1 = this.promptChar; | ||
| var elementValue = value.substring(0, sIndex) + prompt_1 + value.substring(startIndex, value.length); | ||
| setElementValue.call(this, elementValue); | ||
| event.preventDefault(); | ||
| this.element.selectionStart = this.element.selectionEnd = sIndex; | ||
| isDeleted = true; | ||
| } | ||
| startIndex = this.element.selectionStart; | ||
| if ((!isDeleted && event.keyCode === 8) || multipleDel || (!isDeleted && !(event.keyCode === 46))) { | ||
| sIndex = startIndex - 1; | ||
| } | ||
| else { | ||
| sIndex = startIndex; | ||
| isDeleted = false; | ||
| } | ||
| oldValue = this.element.value[sIndex]; | ||
| if (((initStartIndex !== initEndIndex) && (this.element.selectionStart === initStartIndex)) | ||
| || (this.promptMask[sIndex] === this.promptChar) || ((oldValue !== this.promptMask[sIndex]) && | ||
| (this.promptMask[sIndex] !== this.promptChar) && !isNullOrUndefined(this.customCharacters))) { | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| if (this.element.selectionStart === 0 && (this.element.selectionEnd === this.element.value.length)) { | ||
| setElementValue.call(this, this.promptMask); | ||
| } | ||
| if (this.element.selectionStart === 0 && (this.element.selectionEnd === this.element.value.length)) { | ||
| setElementValue.call(this, this.promptMask); | ||
| event.preventDefault(); | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex; | ||
| } | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| triggerMaskChangeEvent.call(this, event, oldEventVal); | ||
| } | ||
| } | ||
| function maskInputKeyPressHandler(event) { | ||
| if (this.mask) { | ||
| var oldValue = this.element.value; | ||
| if ((!event.ctrlKey) || (event.ctrlKey && event.code !== 'KeyA' && event.code !== 'KeyY' | ||
| && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) { | ||
| this.maskKeyPress = true; | ||
| var key = event.key; | ||
| if (key === 'Spacebar') { | ||
| key = String.fromCharCode(event.keyCode); | ||
| } | ||
| if (!key) { | ||
| this.isIosInvalid = true; | ||
| validateValue.call(this, String.fromCharCode(event.keyCode), event.ctrlKey, event); | ||
| event.preventDefault(); | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex; | ||
| this.isIosInvalid = false; | ||
| } | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, | ||
| endIndex: this.element.selectionEnd | ||
| }); | ||
| triggerMaskChangeEvent.call(this, event, oldEventVal); | ||
| else if (key && key.length === 1) { | ||
| validateValue.call(this, key, event.ctrlKey, event); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| triggerMaskChangeEvent.call(this, event, oldValue); | ||
| } | ||
| function maskInputKeyPressHandler(event) { | ||
| } | ||
| function triggerMaskChangeEvent(event, oldValue) { | ||
| if (!isNullOrUndefined(this.changeEventArgs)) { | ||
| var eventArgs = {}; | ||
| this.changeEventArgs = { value: this.element.value, maskedValue: this.element.value, isInteraction: false }; | ||
| if (this.mask) { | ||
| var oldValue = this.element.value; | ||
| if ((!event.ctrlKey) || (event.ctrlKey && event.code !== 'KeyA' && event.code !== 'KeyY' | ||
| && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) { | ||
| this.maskKeyPress = true; | ||
| var key = event.key; | ||
| if (key === 'Spacebar') { | ||
| key = String.fromCharCode(event.keyCode); | ||
| } | ||
| if (!key) { | ||
| this.isIosInvalid = true; | ||
| validateValue.call(this, String.fromCharCode(event.keyCode), event.ctrlKey, event); | ||
| event.preventDefault(); | ||
| this.isIosInvalid = false; | ||
| } | ||
| else if (key && key.length === 1) { | ||
| validateValue.call(this, key, event.ctrlKey, event); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| triggerMaskChangeEvent.call(this, event, oldValue); | ||
| this.changeEventArgs.value = strippedValue.call(this, this.element); | ||
| } | ||
| if (!isNullOrUndefined(event)) { | ||
| this.changeEventArgs.isInteraction = true; | ||
| this.changeEventArgs.event = event; | ||
| } | ||
| merge(eventArgs, this.changeEventArgs); | ||
| this.trigger('change', eventArgs); | ||
| } | ||
| function triggerMaskChangeEvent(event, oldValue) { | ||
| if (!ej2_base_1.isNullOrUndefined(this.changeEventArgs)) { | ||
| var eventArgs = {}; | ||
| this.changeEventArgs = { value: this.element.value, maskedValue: this.element.value, isInteraction: false }; | ||
| if (this.mask) { | ||
| this.changeEventArgs.value = strippedValue.call(this, this.element); | ||
| attributes(this.element, { 'aria-valuenow': this.element.value }); | ||
| } | ||
| function maskInputKeyUpHandler(event) { | ||
| if (this.mask) { | ||
| var collec = void 0; | ||
| if (!this.maskKeyPress && event.keyCode === 229) { | ||
| var oldEventVal = void 0; | ||
| if (this.element.value.length === 1) { | ||
| this.element.value = this.element.value + this.promptMask; | ||
| this.element.setSelectionRange(1, 1); | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(event)) { | ||
| this.changeEventArgs.isInteraction = true; | ||
| this.changeEventArgs.event = event; | ||
| } | ||
| ej2_base_1.merge(eventArgs, this.changeEventArgs); | ||
| this.trigger('change', eventArgs); | ||
| } | ||
| ej2_base_1.attributes(this.element, { 'aria-valuenow': this.element.value }); | ||
| } | ||
| function maskInputKeyUpHandler(event) { | ||
| if (this.mask) { | ||
| var collec = void 0; | ||
| if (!this.maskKeyPress && event.keyCode === 229) { | ||
| var oldEventVal = void 0; | ||
| if (this.element.value.length === 1) { | ||
| this.element.value = this.element.value + this.promptMask; | ||
| this.element.setSelectionRange(1, 1); | ||
| } | ||
| if (this.element.value.length > this.promptMask.length) { | ||
| var startIndex = this.element.selectionStart; | ||
| var addedValues = this.element.value.length - this.promptMask.length; | ||
| var val_1 = this.element.value.substring(startIndex - addedValues, startIndex); | ||
| if (this.undoCollec.length > 0) { | ||
| collec = this.undoCollec[this.undoCollec.length - 1]; | ||
| var startIndex_1 = this.element.selectionStart; | ||
| oldEventVal = collec.value; | ||
| var oldVal = collec.value.substring(startIndex_1 - addedValues, startIndex_1); | ||
| collec = this.redoCollec[0]; | ||
| val_1 = val_1.trim(); | ||
| var isSpace = ej2_base_1.Browser.isAndroid && val_1 === ''; | ||
| if (!isSpace && oldVal !== val_1 && collec.value.substring(startIndex_1 - addedValues, startIndex_1) !== val_1) { | ||
| validateValue.call(this, val_1, event.ctrlKey, event); | ||
| } | ||
| else if (isSpace) { | ||
| preventUnsupportedValues.call(this, event, startIndex_1 - 1, this.element.selectionEnd - 1, val_1, event.ctrlKey, false); | ||
| } | ||
| } | ||
| else { | ||
| oldEventVal = this.promptMask; | ||
| if (this.element.value.length > this.promptMask.length) { | ||
| var startIndex = this.element.selectionStart; | ||
| var addedValues = this.element.value.length - this.promptMask.length; | ||
| var val_1 = this.element.value.substring(startIndex - addedValues, startIndex); | ||
| if (this.undoCollec.length > 0) { | ||
| collec = this.undoCollec[this.undoCollec.length - 1]; | ||
| var startIndex_1 = this.element.selectionStart; | ||
| oldEventVal = collec.value; | ||
| var oldVal = collec.value.substring(startIndex_1 - addedValues, startIndex_1); | ||
| collec = this.redoCollec[0]; | ||
| val_1 = val_1.trim(); | ||
| var isSpace = Browser.isAndroid && val_1 === ''; | ||
| if (!isSpace && oldVal !== val_1 && collec.value.substring(startIndex_1 - addedValues, startIndex_1) !== val_1) { | ||
| validateValue.call(this, val_1, event.ctrlKey, event); | ||
| } | ||
| this.maskKeyPress = false; | ||
| triggerMaskChangeEvent.call(this, event, oldEventVal); | ||
| else if (isSpace) { | ||
| preventUnsupportedValues.call(this, event, startIndex_1 - 1, this.element.selectionEnd - 1, val_1, event.ctrlKey, false); | ||
| } | ||
| } | ||
| else { | ||
| oldEventVal = this.promptMask; | ||
| validateValue.call(this, val_1, event.ctrlKey, event); | ||
| } | ||
| this.maskKeyPress = false; | ||
| triggerMaskChangeEvent.call(this, event, oldEventVal); | ||
| } | ||
| else { | ||
| removeMaskError.call(this); | ||
| } | ||
| var val = strippedValue.call(this, this.element); | ||
| if (!((this.element.selectionStart === 0) && (this.promptMask === this.element.value) && val === '') | ||
| || (val === '' && this.value !== val)) { | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| } | ||
| } | ||
| else { | ||
| triggerMaskChangeEvent.call(this, event); | ||
| this.value = this.element.value; | ||
| removeMaskError.call(this); | ||
| } | ||
| if (this.element.selectionStart === 0 && this.element.selectionEnd === 0) { | ||
| // tslint:disable-next-line | ||
| var temp_1 = this.element; | ||
| setTimeout(function () { | ||
| temp_1.setSelectionRange(0, 0); | ||
| }, 0); | ||
| var val = strippedValue.call(this, this.element); | ||
| if (!((this.element.selectionStart === 0) && (this.promptMask === this.element.value) && val === '') | ||
| || (val === '' && this.value !== val)) { | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| } | ||
| } | ||
| function mobileSwipeCheck(key) { | ||
| if (key.length > 1 && ((this.promptMask.length + key.length) < this.element.value.length)) { | ||
| var elementValue = this.redoCollec[0].value.substring(0, this.redoCollec[0].startIndex) + key + | ||
| this.redoCollec[0].value.substring(this.redoCollec[0].startIndex, this.redoCollec[0].value.length); | ||
| setElementValue.call(this, elementValue); | ||
| this.element.selectionStart = this.element.selectionEnd = this.redoCollec[0].startIndex + key.length; | ||
| } | ||
| this.element.selectionStart = this.element.selectionStart - key.length; | ||
| this.element.selectionEnd = this.element.selectionEnd - key.length; | ||
| else { | ||
| triggerMaskChangeEvent.call(this, event); | ||
| this.value = this.element.value; | ||
| } | ||
| function mobileValidation(key) { | ||
| if (!this.maskKeyPress) { | ||
| mobileSwipeCheck.call(this, key); | ||
| } | ||
| if (this.element.selectionStart === 0 && this.element.selectionEnd === 0) { | ||
| // tslint:disable-next-line | ||
| var temp_1 = this.element; | ||
| setTimeout(function () { | ||
| temp_1.setSelectionRange(0, 0); | ||
| }, 0); | ||
| } | ||
| function validateValue(key, isCtrlKey, event) { | ||
| mobileValidation.call(this, key); | ||
| if (ej2_base_1.isNullOrUndefined(this) || ej2_base_1.isNullOrUndefined(key)) { | ||
| return; | ||
| } | ||
| function mobileSwipeCheck(key) { | ||
| if (key.length > 1 && ((this.promptMask.length + key.length) < this.element.value.length)) { | ||
| var elementValue = this.redoCollec[0].value.substring(0, this.redoCollec[0].startIndex) + key + | ||
| this.redoCollec[0].value.substring(this.redoCollec[0].startIndex, this.redoCollec[0].value.length); | ||
| setElementValue.call(this, elementValue); | ||
| this.element.selectionStart = this.element.selectionEnd = this.redoCollec[0].startIndex + key.length; | ||
| } | ||
| this.element.selectionStart = this.element.selectionStart - key.length; | ||
| this.element.selectionEnd = this.element.selectionEnd - key.length; | ||
| } | ||
| function mobileValidation(key) { | ||
| if (!this.maskKeyPress) { | ||
| mobileSwipeCheck.call(this, key); | ||
| } | ||
| } | ||
| function validateValue(key, isCtrlKey, event) { | ||
| mobileValidation.call(this, key); | ||
| if (isNullOrUndefined(this) || isNullOrUndefined(key)) { | ||
| return; | ||
| } | ||
| var startIndex = this.element.selectionStart; | ||
| var initStartIndex = startIndex; | ||
| var endIndex = this.element.selectionEnd; | ||
| var curMask; | ||
| var allowText = false; | ||
| var value = this.element.value; | ||
| var eventOldVal; | ||
| var prevSupport = false; | ||
| var isEqualVal = false; | ||
| for (var k = 0; k < key.length; k++) { | ||
| var keyValue = key[k]; | ||
| startIndex = this.element.selectionStart; | ||
| endIndex = this.element.selectionEnd; | ||
| if (!this.maskKeyPress && initStartIndex === startIndex) { | ||
| startIndex = startIndex + k; | ||
| } | ||
| var startIndex = this.element.selectionStart; | ||
| var initStartIndex = startIndex; | ||
| var endIndex = this.element.selectionEnd; | ||
| var curMask; | ||
| var allowText = false; | ||
| var value = this.element.value; | ||
| var eventOldVal; | ||
| var prevSupport = false; | ||
| var isEqualVal = false; | ||
| for (var k = 0; k < key.length; k++) { | ||
| var keyValue = key[k]; | ||
| startIndex = this.element.selectionStart; | ||
| endIndex = this.element.selectionEnd; | ||
| if (!this.maskKeyPress && initStartIndex === startIndex) { | ||
| startIndex = startIndex + k; | ||
| if ((!this.maskKeyPress || startIndex < this.promptMask.length)) { | ||
| for (var i = startIndex; i < this.promptMask.length; i++) { | ||
| var maskValue = this.escapeMaskValue; | ||
| curMask = maskValue[startIndex]; | ||
| if (this.hiddenMask[startIndex] === '\\' && this.hiddenMask[startIndex + 1] === key) { | ||
| isEqualVal = true; | ||
| } | ||
| if ((isNullOrUndefined(this.regExpCollec[curMask]) && (isNullOrUndefined(this.customCharacters) | ||
| || (!isNullOrUndefined(this.customCharacters) && isNullOrUndefined(this.customCharacters[curMask]))) | ||
| && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '[' | ||
| && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']'))) | ||
| || ((this.promptMask[startIndex] !== this.promptChar) && isNullOrUndefined(this.customCharacters)) | ||
| || (this.promptChar === curMask && this.escapeMaskValue === this.mask)) { | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex + 1; | ||
| startIndex = this.element.selectionStart; | ||
| curMask = this.hiddenMask[startIndex]; | ||
| } | ||
| } | ||
| if ((!this.maskKeyPress || startIndex < this.promptMask.length)) { | ||
| for (var i = startIndex; i < this.promptMask.length; i++) { | ||
| var maskValue = this.escapeMaskValue; | ||
| curMask = maskValue[startIndex]; | ||
| if (this.hiddenMask[startIndex] === '\\' && this.hiddenMask[startIndex + 1] === key) { | ||
| isEqualVal = true; | ||
| if (!isNullOrUndefined(this.customCharacters) && !isNullOrUndefined(this.customCharacters[curMask])) { | ||
| var customValStr = this.customCharacters[curMask]; | ||
| var customValArr = customValStr.split(','); | ||
| for (var i = 0; i < customValArr.length; i++) { | ||
| if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) { | ||
| allowText = true; | ||
| break; | ||
| } | ||
| if ((ej2_base_1.isNullOrUndefined(this.regExpCollec[curMask]) && (ej2_base_1.isNullOrUndefined(this.customCharacters) | ||
| || (!ej2_base_1.isNullOrUndefined(this.customCharacters) && ej2_base_1.isNullOrUndefined(this.customCharacters[curMask]))) | ||
| && ((this.hiddenMask[startIndex] !== this.promptChar && this.customRegExpCollec[startIndex][0] !== '[' | ||
| && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] !== ']'))) | ||
| || ((this.promptMask[startIndex] !== this.promptChar) && ej2_base_1.isNullOrUndefined(this.customCharacters)) | ||
| || (this.promptChar === curMask && this.escapeMaskValue === this.mask)) { | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex + 1; | ||
| startIndex = this.element.selectionStart; | ||
| curMask = this.hiddenMask[startIndex]; | ||
| } | ||
| } | ||
| if (!ej2_base_1.isNullOrUndefined(this.customCharacters) && !ej2_base_1.isNullOrUndefined(this.customCharacters[curMask])) { | ||
| var customValStr = this.customCharacters[curMask]; | ||
| var customValArr = customValStr.split(','); | ||
| for (var i = 0; i < customValArr.length; i++) { | ||
| if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) { | ||
| allowText = true; | ||
| break; | ||
| } | ||
| } | ||
| else if (!isNullOrUndefined(this.regExpCollec[curMask]) && keyValue.match(new RegExp(this.regExpCollec[curMask])) | ||
| && this.promptMask[startIndex] === this.promptChar) { | ||
| allowText = true; | ||
| } | ||
| else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '[' | ||
| && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']' | ||
| && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) { | ||
| allowText = true; | ||
| } | ||
| if ((!this.maskKeyPress || startIndex < this.hiddenMask.length) && allowText) { | ||
| if (k === 0) { | ||
| if (this.maskKeyPress) { | ||
| this.undoCollec.push({ value: value, startIndex: startIndex, endIndex: startIndex }); | ||
| } | ||
| } | ||
| else if (!ej2_base_1.isNullOrUndefined(this.regExpCollec[curMask]) && keyValue.match(new RegExp(this.regExpCollec[curMask])) | ||
| && this.promptMask[startIndex] === this.promptChar) { | ||
| allowText = true; | ||
| } | ||
| else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '[' | ||
| && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']' | ||
| && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) { | ||
| allowText = true; | ||
| } | ||
| if ((!this.maskKeyPress || startIndex < this.hiddenMask.length) && allowText) { | ||
| if (k === 0) { | ||
| if (this.maskKeyPress) { | ||
| this.undoCollec.push({ value: value, startIndex: startIndex, endIndex: startIndex }); | ||
| else { | ||
| var sIndex = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| if (this.redoCollec.length > 0) { | ||
| eventOldVal = this.redoCollec[0].value; | ||
| setElementValue.call(this, eventOldVal); | ||
| this.undoCollec.push(this.redoCollec[0]); | ||
| } | ||
| else { | ||
| var sIndex = this.element.selectionStart; | ||
| var eIndex = this.element.selectionEnd; | ||
| if (this.redoCollec.length > 0) { | ||
| eventOldVal = this.redoCollec[0].value; | ||
| setElementValue.call(this, eventOldVal); | ||
| this.undoCollec.push(this.redoCollec[0]); | ||
| } | ||
| else { | ||
| this.undoCollec.push({ value: this.promptMask, startIndex: startIndex, endIndex: startIndex }); | ||
| eventOldVal = this.promptMask; | ||
| setElementValue.call(this, eventOldVal); | ||
| } | ||
| this.element.selectionStart = sIndex; | ||
| this.element.selectionEnd = eIndex; | ||
| this.undoCollec.push({ value: this.promptMask, startIndex: startIndex, endIndex: startIndex }); | ||
| eventOldVal = this.promptMask; | ||
| setElementValue.call(this, eventOldVal); | ||
| } | ||
| this.element.selectionStart = sIndex; | ||
| this.element.selectionEnd = eIndex; | ||
| } | ||
| startIndex = this.element.selectionStart; | ||
| applySupportedValues.call(this, event, startIndex, keyValue, eventOldVal, isEqualVal); | ||
| prevSupport = true; | ||
| if (k === key.length - 1) { | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| allowText = false; | ||
| } | ||
| else { | ||
| startIndex = this.element.selectionStart; | ||
| preventUnsupportedValues.call(this, event, startIndex, initStartIndex, key, isCtrlKey, prevSupport); | ||
| startIndex = this.element.selectionStart; | ||
| applySupportedValues.call(this, event, startIndex, keyValue, eventOldVal, isEqualVal); | ||
| prevSupport = true; | ||
| if (k === key.length - 1) { | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| if (k === key.length - 1 && !allowText) { | ||
| if (!ej2_base_1.Browser.isAndroid || (ej2_base_1.Browser.isAndroid && startIndex < this.promptMask.length)) { | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| } | ||
| allowText = false; | ||
| } | ||
| else { | ||
| if (key.length === 1 && !isCtrlKey && !ej2_base_1.isNullOrUndefined(event)) { | ||
| addMaskErrorClass.call(this); | ||
| startIndex = this.element.selectionStart; | ||
| preventUnsupportedValues.call(this, event, startIndex, initStartIndex, key, isCtrlKey, prevSupport); | ||
| } | ||
| if (k === key.length - 1 && !allowText) { | ||
| if (!Browser.isAndroid || (Browser.isAndroid && startIndex < this.promptMask.length)) { | ||
| this.redoCollec.unshift({ | ||
| value: this.element.value, startIndex: this.element.selectionStart, endIndex: this.element.selectionEnd | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| if (key.length === 1 && !isCtrlKey && !isNullOrUndefined(event)) { | ||
| addMaskErrorClass.call(this); | ||
| } | ||
| } | ||
| } | ||
| function applySupportedValues(event, startIndex, keyValue, eventOldVal, isEqualVal) { | ||
| if (this.hiddenMask.length > this.promptMask.length) { | ||
| keyValue = changeToLowerUpperCase.call(this, keyValue, this.element.value); | ||
| } | ||
| function applySupportedValues(event, startIndex, keyValue, eventOldVal, isEqualVal) { | ||
| if (this.hiddenMask.length > this.promptMask.length) { | ||
| keyValue = changeToLowerUpperCase.call(this, keyValue, this.element.value); | ||
| } | ||
| if (!isEqualVal) { | ||
| var value = this.element.value; | ||
| var elementValue = value.substring(0, startIndex) + keyValue + value.substring(startIndex + 1, value.length); | ||
| setElementValue.call(this, elementValue); | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex + 1; | ||
| } | ||
| triggerMaskChangeEvent.call(this, event, eventOldVal); | ||
| } | ||
| function preventUnsupportedValues(event, sIdx, idx, key, ctrl, chkSupport) { | ||
| if (!this.maskKeyPress) { | ||
| var eventOldVal = void 0; | ||
| var value = this.element.value; | ||
| if (sIdx >= this.promptMask.length) { | ||
| setElementValue.call(this, value.substring(0, sIdx)); | ||
| } | ||
| if (!isEqualVal) { | ||
| var value = this.element.value; | ||
| var elementValue = value.substring(0, startIndex) + keyValue + value.substring(startIndex + 1, value.length); | ||
| setElementValue.call(this, elementValue); | ||
| this.element.selectionStart = this.element.selectionEnd = startIndex + 1; | ||
| } | ||
| triggerMaskChangeEvent.call(this, event, eventOldVal); | ||
| } | ||
| function preventUnsupportedValues(event, sIdx, idx, key, ctrl, chkSupport) { | ||
| if (!this.maskKeyPress) { | ||
| var eventOldVal = void 0; | ||
| var value = this.element.value; | ||
| if (sIdx >= this.promptMask.length) { | ||
| setElementValue.call(this, value.substring(0, sIdx)); | ||
| else { | ||
| if (idx === sIdx) { | ||
| setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx + 1, value.length)); | ||
| } | ||
| else { | ||
| if (idx === sIdx) { | ||
| setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx + 1, value.length)); | ||
| if (this.promptMask.length === this.element.value.length) { | ||
| setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx, value.length)); | ||
| } | ||
| else { | ||
| if (this.promptMask.length === this.element.value.length) { | ||
| setElementValue.call(this, value.substring(0, sIdx) + value.substring(sIdx, value.length)); | ||
| } | ||
| else { | ||
| setElementValue.call(this, value.substring(0, idx) + value.substring(idx + 1, value.length)); | ||
| } | ||
| setElementValue.call(this, value.substring(0, idx) + value.substring(idx + 1, value.length)); | ||
| } | ||
| this.element.selectionStart = this.element.selectionEnd = (chkSupport || | ||
| this.element.value[idx] !== this.promptChar) ? sIdx : idx; | ||
| } | ||
| eventOldVal = this.element.value; | ||
| triggerMaskChangeEvent.call(this, event, eventOldVal); | ||
| addMaskErrorClass.call(this); | ||
| this.element.selectionStart = this.element.selectionEnd = (chkSupport || | ||
| this.element.value[idx] !== this.promptChar) ? sIdx : idx; | ||
| } | ||
| if (key.length === 1 && !ctrl && !ej2_base_1.isNullOrUndefined(event)) { | ||
| addMaskErrorClass.call(this); | ||
| } | ||
| eventOldVal = this.element.value; | ||
| triggerMaskChangeEvent.call(this, event, eventOldVal); | ||
| addMaskErrorClass.call(this); | ||
| } | ||
| function addMaskErrorClass() { | ||
| var _this = this; | ||
| var parentElement = this.element.parentNode; | ||
| var timer = 200; | ||
| if (parentElement.classList.contains(INPUTGROUP) || parentElement.classList.contains(FLOATINPUT)) { | ||
| ej2_base_1.addClass([parentElement], ERROR); | ||
| if (key.length === 1 && !ctrl && !isNullOrUndefined(event)) { | ||
| addMaskErrorClass.call(this); | ||
| } | ||
| } | ||
| function addMaskErrorClass() { | ||
| var _this = this; | ||
| var parentElement = this.element.parentNode; | ||
| var timer = 200; | ||
| if (parentElement.classList.contains(INPUTGROUP) || parentElement.classList.contains(FLOATINPUT)) { | ||
| addClass([parentElement], ERROR); | ||
| } | ||
| else { | ||
| addClass([this.element], ERROR); | ||
| } | ||
| if (this.isIosInvalid === true) { | ||
| timer = 400; | ||
| } | ||
| attributes(this.element, { 'aria-invalid': 'true' }); | ||
| setTimeout(function () { | ||
| if (!_this.maskKeyPress) { | ||
| removeMaskError.call(_this); | ||
| } | ||
| else { | ||
| ej2_base_1.addClass([this.element], ERROR); | ||
| }, timer); | ||
| } | ||
| function removeMaskError() { | ||
| var parentElement = this.element.parentNode; | ||
| removeClass([parentElement], ERROR); | ||
| removeClass([this.element], ERROR); | ||
| attributes(this.element, { 'aria-invalid': 'false' }); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Validates user input using masking elements '<' , '>' and '|'. | ||
| */ | ||
| function changeToLowerUpperCase(key, value) { | ||
| var promptMask; | ||
| var i; | ||
| var j = 0; | ||
| var curVal = value; | ||
| var caseCount = 0; | ||
| for (i = 0; i < this.hiddenMask.length; i++) { | ||
| if (this.hiddenMask[i] === '\\') { | ||
| promptMask = curVal.substring(0, i) + '\\' + curVal.substring(i, curVal.length); | ||
| } | ||
| if (this.isIosInvalid === true) { | ||
| timer = 400; | ||
| } | ||
| ej2_base_1.attributes(this.element, { 'aria-invalid': 'true' }); | ||
| setTimeout(function () { | ||
| if (!_this.maskKeyPress) { | ||
| removeMaskError.call(_this); | ||
| if (this.hiddenMask[i] === '>' || this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|') { | ||
| if (this.hiddenMask[i] !== curVal[i]) { | ||
| promptMask = curVal.substring(0, i) + this.hiddenMask[i] + curVal.substring(i, curVal.length); | ||
| } | ||
| }, timer); | ||
| } | ||
| function removeMaskError() { | ||
| var parentElement = this.element.parentNode; | ||
| ej2_base_1.removeClass([parentElement], ERROR); | ||
| ej2_base_1.removeClass([this.element], ERROR); | ||
| ej2_base_1.attributes(this.element, { 'aria-invalid': 'false' }); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Validates user input using masking elements '<' , '>' and '|'. | ||
| */ | ||
| function changeToLowerUpperCase(key, value) { | ||
| var promptMask; | ||
| var i; | ||
| var j = 0; | ||
| var curVal = value; | ||
| var caseCount = 0; | ||
| for (i = 0; i < this.hiddenMask.length; i++) { | ||
| if (this.hiddenMask[i] === '\\') { | ||
| promptMask = curVal.substring(0, i) + '\\' + curVal.substring(i, curVal.length); | ||
| } | ||
| if (this.hiddenMask[i] === '>' || this.hiddenMask[i] === '<' || this.hiddenMask[i] === '|') { | ||
| if (this.hiddenMask[i] !== curVal[i]) { | ||
| promptMask = curVal.substring(0, i) + this.hiddenMask[i] + curVal.substring(i, curVal.length); | ||
| } | ||
| ++caseCount; | ||
| } | ||
| if (promptMask) { | ||
| if (((promptMask[i] === this.promptChar) && (i > this.element.selectionStart)) || | ||
| (this.element.value.indexOf(this.promptChar) < 0 && (this.element.selectionStart + caseCount) === i)) { | ||
| caseCount = 0; | ||
| break; | ||
| } | ||
| curVal = promptMask; | ||
| } | ||
| ++caseCount; | ||
| } | ||
| while (i >= 0 && promptMask) { | ||
| if (i === 0 || promptMask[i - 1] !== '\\') { | ||
| var val = this.element.value; | ||
| if (promptMask[i] === '>') { | ||
| key = key.toUpperCase(); | ||
| break; | ||
| } | ||
| else if (promptMask[i] === '<') { | ||
| key = key.toLowerCase(); | ||
| break; | ||
| } | ||
| else if (promptMask[i] === '|') { | ||
| break; | ||
| } | ||
| if (promptMask) { | ||
| if (((promptMask[i] === this.promptChar) && (i > this.element.selectionStart)) || | ||
| (this.element.value.indexOf(this.promptChar) < 0 && (this.element.selectionStart + caseCount) === i)) { | ||
| caseCount = 0; | ||
| break; | ||
| } | ||
| --i; | ||
| curVal = promptMask; | ||
| } | ||
| return key; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To set updated values in the MaskedTextBox. | ||
| */ | ||
| function setMaskValue(val) { | ||
| if (this.mask && val !== undefined && (val === '' || this.prevValue !== val)) { | ||
| this.maskKeyPress = true; | ||
| setElementValue.call(this, this.promptMask); | ||
| if (val !== '') { | ||
| this.element.selectionStart = 0; | ||
| this.element.selectionEnd = 0; | ||
| while (i >= 0 && promptMask) { | ||
| if (i === 0 || promptMask[i - 1] !== '\\') { | ||
| var val = this.element.value; | ||
| if (promptMask[i] === '>') { | ||
| key = key.toUpperCase(); | ||
| break; | ||
| } | ||
| if (val !== null) { | ||
| for (var i = 0; i < val.length; i++) { | ||
| validateValue.call(this, val[i], false, null); | ||
| } | ||
| else if (promptMask[i] === '<') { | ||
| key = key.toLowerCase(); | ||
| break; | ||
| } | ||
| this.value = strippedValue.call(this, this.element); | ||
| this.maskKeyPress = false; | ||
| var labelElement = this.element.parentNode.querySelector('.e-float-text'); | ||
| if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder && | ||
| !ej2_base_1.isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) { | ||
| ej2_base_1.removeClass([labelElement], TOPLABEL); | ||
| ej2_base_1.addClass([labelElement], BOTTOMLABEL); | ||
| setElementValue.call(this, ''); | ||
| else if (promptMask[i] === '|') { | ||
| break; | ||
| } | ||
| } | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| setElementValue.call(this, this.value); | ||
| } | ||
| --i; | ||
| } | ||
| exports.setMaskValue = setMaskValue; | ||
| /** | ||
| * @hidden | ||
| * To set updated values in the input element. | ||
| */ | ||
| function setElementValue(val, element) { | ||
| if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && ej2_base_1.isNullOrUndefined(this.value)) { | ||
| val = ''; | ||
| return key; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To set updated values in the MaskedTextBox. | ||
| */ | ||
| export function setMaskValue(val) { | ||
| if (this.mask && val !== undefined && (val === '' || this.prevValue !== val)) { | ||
| this.maskKeyPress = true; | ||
| setElementValue.call(this, this.promptMask); | ||
| if (val !== '') { | ||
| this.element.selectionStart = 0; | ||
| this.element.selectionEnd = 0; | ||
| } | ||
| var value = strippedValue.call(this, (element ? element : this.element), val); | ||
| if (value === null || value === '') { | ||
| input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, false); | ||
| if (this.showClearButton) { | ||
| this.inputObj.clearButton.classList.add('e-clear-icon-hide'); | ||
| if (val !== null) { | ||
| for (var i = 0; i < val.length; i++) { | ||
| validateValue.call(this, val[i], false, null); | ||
| } | ||
| } | ||
| else { | ||
| input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton); | ||
| this.value = strippedValue.call(this, this.element); | ||
| this.maskKeyPress = false; | ||
| var labelElement = this.element.parentNode.querySelector('.e-float-text'); | ||
| if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder && | ||
| !isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) { | ||
| removeClass([labelElement], TOPLABEL); | ||
| addClass([labelElement], BOTTOMLABEL); | ||
| setElementValue.call(this, ''); | ||
| } | ||
| } | ||
| exports.setElementValue = setElementValue; | ||
| /** | ||
| * @hidden | ||
| * Provide mask support to input textbox through utility method. | ||
| */ | ||
| function maskInput(args) { | ||
| var inputEle = getMaskInput(args); | ||
| applyMask.call(inputEle); | ||
| var val = strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (args.mask) { | ||
| unwireEvents.call(inputEle); | ||
| wireEvents.call(inputEle); | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| setElementValue.call(this, this.value); | ||
| } | ||
| } | ||
| /** | ||
| * @hidden | ||
| * To set updated values in the input element. | ||
| */ | ||
| export function setElementValue(val, element) { | ||
| if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && isNullOrUndefined(this.value)) { | ||
| val = ''; | ||
| } | ||
| var value = strippedValue.call(this, (element ? element : this.element), val); | ||
| if (value === null || value === '') { | ||
| Input.setValue(val, (element ? element : this.element), this.floatLabelType, false); | ||
| if (this.showClearButton) { | ||
| this.inputObj.clearButton.classList.add('e-clear-icon-hide'); | ||
| } | ||
| } | ||
| exports.maskInput = maskInput; | ||
| function getMaskInput(args) { | ||
| ej2_base_1.addClass([args.element], UTILMASK); | ||
| var inputEle = { | ||
| element: args.element, | ||
| mask: args.mask, | ||
| promptMask: '', | ||
| hiddenMask: '', | ||
| escapeMaskValue: '', | ||
| promptChar: args.promptChar ? (args.promptChar.length > 1) ? args.promptChar = args.promptChar[0] | ||
| : args.promptChar : '_', | ||
| value: args.value ? args.value : null, | ||
| regExpCollec: exports.regularExpressions, | ||
| customRegExpCollec: [], | ||
| customCharacters: args.customCharacters, | ||
| undoCollec: [], | ||
| redoCollec: [], | ||
| maskKeyPress: false, | ||
| prevValue: '' | ||
| }; | ||
| createMask.call(inputEle); | ||
| return inputEle; | ||
| else { | ||
| Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Gets raw value of the textbox which has been masked through utility method. | ||
| */ | ||
| function getVal(args) { | ||
| return strippedValue.call(getUtilMaskEle(args), args.element); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Provide mask support to input textbox through utility method. | ||
| */ | ||
| export function maskInput(args) { | ||
| var inputEle = getMaskInput(args); | ||
| applyMask.call(inputEle); | ||
| var val = strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (args.mask) { | ||
| unwireEvents.call(inputEle); | ||
| wireEvents.call(inputEle); | ||
| } | ||
| exports.getVal = getVal; | ||
| /** | ||
| * @hidden | ||
| * Gets masked value of the textbox which has been masked through utility method. | ||
| */ | ||
| function getMaskedVal(args) { | ||
| return unstrippedValue.call(getUtilMaskEle(args), args.element); | ||
| } | ||
| function getMaskInput(args) { | ||
| addClass([args.element], UTILMASK); | ||
| var inputEle = { | ||
| element: args.element, | ||
| mask: args.mask, | ||
| promptMask: '', | ||
| hiddenMask: '', | ||
| escapeMaskValue: '', | ||
| promptChar: args.promptChar ? (args.promptChar.length > 1) ? args.promptChar = args.promptChar[0] | ||
| : args.promptChar : '_', | ||
| value: args.value ? args.value : null, | ||
| regExpCollec: regularExpressions, | ||
| customRegExpCollec: [], | ||
| customCharacters: args.customCharacters, | ||
| undoCollec: [], | ||
| redoCollec: [], | ||
| maskKeyPress: false, | ||
| prevValue: '' | ||
| }; | ||
| createMask.call(inputEle); | ||
| return inputEle; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Gets raw value of the textbox which has been masked through utility method. | ||
| */ | ||
| export function getVal(args) { | ||
| return strippedValue.call(getUtilMaskEle(args), args.element); | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Gets masked value of the textbox which has been masked through utility method. | ||
| */ | ||
| export function getMaskedVal(args) { | ||
| return unstrippedValue.call(getUtilMaskEle(args), args.element); | ||
| } | ||
| function getUtilMaskEle(args) { | ||
| var value = ''; | ||
| var inputEle; | ||
| if (!isNullOrUndefined(args) && args.element.classList.contains(UTILMASK)) { | ||
| inputEle = getMaskInput(args); | ||
| } | ||
| exports.getMaskedVal = getMaskedVal; | ||
| function getUtilMaskEle(args) { | ||
| var value = ''; | ||
| var inputEle; | ||
| if (!ej2_base_1.isNullOrUndefined(args) && args.element.classList.contains(UTILMASK)) { | ||
| inputEle = getMaskInput(args); | ||
| } | ||
| return inputEle; | ||
| return inputEle; | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Arguments to perform undo and redo functionalities. | ||
| */ | ||
| var MaskUndo = /** @class */ (function () { | ||
| function MaskUndo() { | ||
| } | ||
| /** | ||
| * @hidden | ||
| * Arguments to perform undo and redo functionalities. | ||
| */ | ||
| var MaskUndo = /** @class */ (function () { | ||
| function MaskUndo() { | ||
| } | ||
| return MaskUndo; | ||
| }()); | ||
| exports.MaskUndo = MaskUndo; | ||
| var maskUndo = new MaskUndo(); | ||
| }); | ||
| return MaskUndo; | ||
| }()); | ||
| export { MaskUndo }; | ||
| var maskUndo = new MaskUndo(); |
@@ -1,12 +0,5 @@ | ||
| define(["require", "exports", "./base/index", "./maskedtextbox/index"], function (require, exports, index_1, index_2) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * MaskedTextbox modules | ||
| */ | ||
| __export(index_1); | ||
| __export(index_2); | ||
| }); | ||
| /** | ||
| * MaskedTextbox modules | ||
| */ | ||
| export * from './base/index'; | ||
| export * from './maskedtextbox/index'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./maskedtextbox"], function (require, exports, maskedtextbox_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * MaskedTextbox modules | ||
| */ | ||
| __export(maskedtextbox_1); | ||
| }); | ||
| /** | ||
| * MaskedTextbox modules | ||
| */ | ||
| export * from './maskedtextbox'; |
@@ -1,2 +0,2 @@ | ||
| import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base'; | ||
| import { Component, Event, Property, EmitType, NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, getValue, setValue, attributes, addClass, detach, createElement } from '@syncfusion/ej2-base';import { removeClass } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../../input/input';import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';import { setMaskValue, MaskUndo, setElementValue, bindClearEvent } from '../base/index';import { maskInputBlurHandler } from '../base/mask-base'; | ||
| import {MaskChangeEventArgs,MaskFocusEventArgs} from "./maskedtextbox"; | ||
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base'; |
@@ -17,299 +17,305 @@ var __extends = (this && this.__extends) || (function () { | ||
| }; | ||
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../input/input", "../base/index", "../base/index", "../base/mask-base"], function (require, exports, ej2_base_1, ej2_base_2, input_1, index_1, index_2, mask_base_1) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var ROOT = 'e-widget e-control-wrapper e-mask'; | ||
| var INPUT = 'e-input'; | ||
| import { Component, Event, Property, NotifyPropertyChanges } from '@syncfusion/ej2-base'; | ||
| import { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base'; | ||
| import { removeClass } from '@syncfusion/ej2-base'; | ||
| import { Input } from '../../input/input'; | ||
| import { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index'; | ||
| import { setMaskValue, setElementValue, bindClearEvent } from '../base/index'; | ||
| import { maskInputBlurHandler } from '../base/mask-base'; | ||
| var ROOT = 'e-widget e-control-wrapper e-mask'; | ||
| var INPUT = 'e-input'; | ||
| var COMPONENT = 'e-maskedtextbox'; | ||
| var CONTROL = 'e-control'; | ||
| /** | ||
| * The MaskedTextBox allows the user to enter the valid input only based on the provided mask. | ||
| * ```html | ||
| * <input id="mask" type="text" /> | ||
| * ``` | ||
| * ```typescript | ||
| * <script> | ||
| * var maskObj = new MaskedTextBox({ mask: "(999) 9999-999" }); | ||
| * maskObj.appendTo('#mask'); | ||
| * </script> | ||
| * ``` | ||
| */ | ||
| var MaskedTextBox = /** @class */ (function (_super) { | ||
| __extends(MaskedTextBox, _super); | ||
| function MaskedTextBox(options, element) { | ||
| return _super.call(this, options, element) || this; | ||
| } | ||
| /** | ||
| * The MaskedTextBox allows the user to enter the valid input only based on the provided mask. | ||
| * ```html | ||
| * <input id="mask" type="text" /> | ||
| * ``` | ||
| * ```typescript | ||
| * <script> | ||
| * var maskObj = new MaskedTextBox({ mask: "(999) 9999-999" }); | ||
| * maskObj.appendTo('#mask'); | ||
| * </script> | ||
| * ``` | ||
| * Gets the component name | ||
| * @private | ||
| */ | ||
| var MaskedTextBox = /** @class */ (function (_super) { | ||
| __extends(MaskedTextBox, _super); | ||
| function MaskedTextBox(options, element) { | ||
| return _super.call(this, options, element) || this; | ||
| } | ||
| /** | ||
| * Gets the component name | ||
| * @private | ||
| */ | ||
| MaskedTextBox.prototype.getModuleName = function () { | ||
| return 'maskedtextbox'; | ||
| }; | ||
| /** | ||
| * Initializes the event handler | ||
| * @private | ||
| */ | ||
| MaskedTextBox.prototype.preRender = function () { | ||
| this.promptMask = ''; | ||
| this.hiddenMask = ''; | ||
| this.escapeMaskValue = ''; | ||
| this.regExpCollec = index_1.regularExpressions; | ||
| this.customRegExpCollec = []; | ||
| this.undoCollec = []; | ||
| this.redoCollec = []; | ||
| this.changeEventArgs = {}; | ||
| this.focusEventArgs = {}; | ||
| this.maskKeyPress = false; | ||
| this.isFocus = false; | ||
| this.isInitial = false; | ||
| this.isIosInvalid = false; | ||
| var ejInstance = ej2_base_2.getValue('ej2_instances', this.element); | ||
| this.cloneElement = this.element.cloneNode(true); | ||
| this.angularTagName = null; | ||
| if (this.element.tagName === 'EJS-MASKEDTEXTBOX') { | ||
| this.angularTagName = this.element.tagName; | ||
| var input = ej2_base_2.createElement('input'); | ||
| for (var i = 0; i < this.element.attributes.length; i++) { | ||
| input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue); | ||
| input.innerHTML = this.element.innerHTML; | ||
| } | ||
| if (this.element.hasAttribute('id')) { | ||
| this.element.removeAttribute('id'); | ||
| } | ||
| this.element.classList.remove('e-control', 'e-maskedtextbox'); | ||
| this.element.classList.add('e-mask-container'); | ||
| this.element.appendChild(input); | ||
| this.element = input; | ||
| ej2_base_2.setValue('ej2_instances', ejInstance, this.element); | ||
| MaskedTextBox.prototype.getModuleName = function () { | ||
| return 'maskedtextbox'; | ||
| }; | ||
| /** | ||
| * Initializes the event handler | ||
| * @private | ||
| */ | ||
| MaskedTextBox.prototype.preRender = function () { | ||
| this.promptMask = ''; | ||
| this.hiddenMask = ''; | ||
| this.escapeMaskValue = ''; | ||
| this.regExpCollec = regularExpressions; | ||
| this.customRegExpCollec = []; | ||
| this.undoCollec = []; | ||
| this.redoCollec = []; | ||
| this.changeEventArgs = {}; | ||
| this.focusEventArgs = {}; | ||
| this.maskKeyPress = false; | ||
| this.isFocus = false; | ||
| this.isInitial = false; | ||
| this.isIosInvalid = false; | ||
| var ejInstance = getValue('ej2_instances', this.element); | ||
| this.cloneElement = this.element.cloneNode(true); | ||
| removeClass([this.cloneElement], [CONTROL, COMPONENT]); | ||
| this.angularTagName = null; | ||
| if (this.element.tagName === 'EJS-MASKEDTEXTBOX') { | ||
| this.angularTagName = this.element.tagName; | ||
| var input = this.createElement('input'); | ||
| for (var i = 0; i < this.element.attributes.length; i++) { | ||
| input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue); | ||
| input.innerHTML = this.element.innerHTML; | ||
| } | ||
| }; | ||
| /** | ||
| * Gets the properties to be maintained in the persisted state. | ||
| * @return {string} | ||
| */ | ||
| MaskedTextBox.prototype.getPersistData = function () { | ||
| var keyEntity = ['value']; | ||
| return this.addOnPersist(keyEntity); | ||
| }; | ||
| /** | ||
| * Initializes the component rendering. | ||
| * @private | ||
| */ | ||
| MaskedTextBox.prototype.render = function () { | ||
| if (this.element.tagName.toLowerCase() === 'input') { | ||
| if (this.floatLabelType === 'Never') { | ||
| ej2_base_2.addClass([this.element], INPUT); | ||
| } | ||
| this.createWrapper(); | ||
| this.isInitial = true; | ||
| this.resetMaskedTextBox(); | ||
| this.isInitial = false; | ||
| this.setMaskPlaceholder(true, false); | ||
| this.setWidth(this.width); | ||
| if (this.element.hasAttribute('id')) { | ||
| this.element.removeAttribute('id'); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.resetMaskedTextBox = function () { | ||
| this.promptMask = ''; | ||
| this.hiddenMask = ''; | ||
| this.escapeMaskValue = ''; | ||
| this.customRegExpCollec = []; | ||
| this.undoCollec = []; | ||
| this.redoCollec = []; | ||
| if (this.promptChar.length > 1) { | ||
| this.promptChar = this.promptChar[0]; | ||
| this.element.classList.remove('e-control', 'e-maskedtextbox'); | ||
| this.element.classList.add('e-mask-container'); | ||
| this.element.appendChild(input); | ||
| this.element = input; | ||
| setValue('ej2_instances', ejInstance, this.element); | ||
| } | ||
| }; | ||
| /** | ||
| * Gets the properties to be maintained in the persisted state. | ||
| * @return {string} | ||
| */ | ||
| MaskedTextBox.prototype.getPersistData = function () { | ||
| var keyEntity = ['value']; | ||
| return this.addOnPersist(keyEntity); | ||
| }; | ||
| /** | ||
| * Initializes the component rendering. | ||
| * @private | ||
| */ | ||
| MaskedTextBox.prototype.render = function () { | ||
| if (this.element.tagName.toLowerCase() === 'input') { | ||
| if (this.floatLabelType === 'Never') { | ||
| addClass([this.element], INPUT); | ||
| } | ||
| index_1.createMask.call(this); | ||
| index_1.applyMask.call(this); | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| index_2.setElementValue.call(this, this.value); | ||
| this.createWrapper(); | ||
| this.isInitial = true; | ||
| this.resetMaskedTextBox(); | ||
| this.isInitial = false; | ||
| this.setMaskPlaceholder(true, false); | ||
| this.setWidth(this.width); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.resetMaskedTextBox = function () { | ||
| this.promptMask = ''; | ||
| this.hiddenMask = ''; | ||
| this.escapeMaskValue = ''; | ||
| this.customRegExpCollec = []; | ||
| this.undoCollec = []; | ||
| this.redoCollec = []; | ||
| if (this.promptChar.length > 1) { | ||
| this.promptChar = this.promptChar[0]; | ||
| } | ||
| createMask.call(this); | ||
| applyMask.call(this); | ||
| if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
| setElementValue.call(this, this.value); | ||
| } | ||
| var val = strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (!this.isInitial) { | ||
| unwireEvents.call(this); | ||
| } | ||
| wireEvents.call(this); | ||
| }; | ||
| MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) { | ||
| if (dynamicPlaceholder || this.placeholder) { | ||
| Input.setPlaceholder(this.placeholder, this.element); | ||
| if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') { | ||
| setElementValue.call(this, ''); | ||
| } | ||
| var val = index_1.strippedValue.call(this, this.element); | ||
| this.prevValue = val; | ||
| this.value = val; | ||
| if (!this.isInitial) { | ||
| index_1.unwireEvents.call(this); | ||
| if (this.floatLabelType === 'Never') { | ||
| maskInputBlurHandler.call(this); | ||
| } | ||
| index_1.wireEvents.call(this); | ||
| }; | ||
| MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) { | ||
| if (dynamicPlaceholder || this.placeholder) { | ||
| input_1.Input.setPlaceholder(this.placeholder, this.element); | ||
| if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') { | ||
| index_2.setElementValue.call(this, ''); | ||
| } | ||
| if (this.floatLabelType === 'Never') { | ||
| mask_base_1.maskInputBlurHandler.call(this); | ||
| } | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.setCssClass = function (cssClass, element) { | ||
| if (cssClass) { | ||
| addClass(element, cssClass); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.setWidth = function (width) { | ||
| if (!isNullOrUndefined(width)) { | ||
| this.element.style.width = formatUnit(width); | ||
| this.inputObj.container.style.width = formatUnit(width); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.createWrapper = function () { | ||
| this.inputObj = Input.createInput({ | ||
| element: this.element, | ||
| floatLabelType: this.floatLabelType, | ||
| properties: { | ||
| enableRtl: this.enableRtl, | ||
| cssClass: this.cssClass, | ||
| enabled: this.enabled, | ||
| placeholder: this.placeholder, | ||
| showClearButton: this.showClearButton | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.setCssClass = function (cssClass, element) { | ||
| if (cssClass) { | ||
| ej2_base_2.addClass(element, cssClass); | ||
| }); | ||
| this.inputObj.container.setAttribute('class', ROOT + ' ' + this.inputObj.container.getAttribute('class')); | ||
| }; | ||
| /** | ||
| * Calls internally if any of the property value is changed. | ||
| * @hidden | ||
| */ | ||
| MaskedTextBox.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'value': | ||
| setMaskValue.call(this, this.value); | ||
| if (this.placeholder) { | ||
| this.setMaskPlaceholder(false, false); | ||
| } | ||
| break; | ||
| case 'placeholder': | ||
| this.setMaskPlaceholder(true, true); | ||
| break; | ||
| case 'width': | ||
| this.setWidth(newProp.width); | ||
| break; | ||
| case 'cssClass': | ||
| this.setCssClass(newProp.cssClass, [this.inputObj.container]); | ||
| break; | ||
| case 'enabled': | ||
| Input.setEnabled(newProp.enabled, this.element); | ||
| break; | ||
| case 'enableRtl': | ||
| Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]); | ||
| break; | ||
| case 'customCharacters': | ||
| this.customCharacters = newProp.customCharacters; | ||
| this.resetMaskedTextBox(); | ||
| break; | ||
| case 'showClearButton': | ||
| Input.setClearButton(newProp.showClearButton, this.element, this.inputObj); | ||
| bindClearEvent.call(this); | ||
| break; | ||
| case 'floatLabelType': | ||
| this.floatLabelType = newProp.floatLabelType; | ||
| Input.removeFloating(this.inputObj); | ||
| Input.addFloating(this.element, this.floatLabelType, this.placeholder); | ||
| break; | ||
| case 'mask': | ||
| var strippedValue_1 = this.value; | ||
| this.mask = newProp.mask; | ||
| this.updateValue(strippedValue_1); | ||
| break; | ||
| case 'promptChar': | ||
| if (newProp.promptChar.length > 1) { | ||
| newProp.promptChar = newProp.promptChar[0]; | ||
| } | ||
| if (newProp.promptChar) { | ||
| this.promptChar = newProp.promptChar; | ||
| } | ||
| else { | ||
| this.promptChar = '_'; | ||
| } | ||
| var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| if (this.promptMask === this.element.value) { | ||
| value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| } | ||
| this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| this.undoCollec = this.redoCollec = []; | ||
| setElementValue.call(this, value); | ||
| break; | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.setWidth = function (width) { | ||
| if (!ej2_base_2.isNullOrUndefined(width)) { | ||
| this.element.style.width = ej2_base_2.formatUnit(width); | ||
| this.inputObj.container.style.width = ej2_base_2.formatUnit(width); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.createWrapper = function () { | ||
| this.inputObj = input_1.Input.createInput({ | ||
| element: this.element, | ||
| floatLabelType: this.floatLabelType, | ||
| properties: { | ||
| enableRtl: this.enableRtl, | ||
| cssClass: this.cssClass, | ||
| enabled: this.enabled, | ||
| placeholder: this.placeholder, | ||
| showClearButton: this.showClearButton | ||
| } | ||
| }); | ||
| this.inputObj.container.setAttribute('class', ROOT + ' ' + this.inputObj.container.getAttribute('class')); | ||
| }; | ||
| /** | ||
| * Calls internally if any of the property value is changed. | ||
| * @hidden | ||
| */ | ||
| MaskedTextBox.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'value': | ||
| index_2.setMaskValue.call(this, this.value); | ||
| if (this.placeholder) { | ||
| this.setMaskPlaceholder(false, false); | ||
| } | ||
| break; | ||
| case 'placeholder': | ||
| this.setMaskPlaceholder(true, true); | ||
| break; | ||
| case 'width': | ||
| this.setWidth(newProp.width); | ||
| break; | ||
| case 'cssClass': | ||
| this.setCssClass(newProp.cssClass, [this.inputObj.container]); | ||
| break; | ||
| case 'enabled': | ||
| input_1.Input.setEnabled(newProp.enabled, this.element); | ||
| break; | ||
| case 'enableRtl': | ||
| input_1.Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]); | ||
| break; | ||
| case 'customCharacters': | ||
| this.customCharacters = newProp.customCharacters; | ||
| this.resetMaskedTextBox(); | ||
| break; | ||
| case 'showClearButton': | ||
| input_1.Input.setClearButton(newProp.showClearButton, this.element, this.inputObj); | ||
| index_2.bindClearEvent.call(this); | ||
| break; | ||
| case 'floatLabelType': | ||
| this.floatLabelType = newProp.floatLabelType; | ||
| input_1.Input.removeFloating(this.inputObj); | ||
| input_1.Input.addFloating(this.element, this.floatLabelType, this.placeholder); | ||
| break; | ||
| case 'mask': | ||
| var strippedValue_1 = this.value; | ||
| this.mask = newProp.mask; | ||
| this.updateValue(strippedValue_1); | ||
| break; | ||
| case 'promptChar': | ||
| if (newProp.promptChar.length > 1) { | ||
| newProp.promptChar = newProp.promptChar[0]; | ||
| } | ||
| if (newProp.promptChar) { | ||
| this.promptChar = newProp.promptChar; | ||
| } | ||
| else { | ||
| this.promptChar = '_'; | ||
| } | ||
| var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| if (this.promptMask === this.element.value) { | ||
| value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| } | ||
| this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar); | ||
| this.undoCollec = this.redoCollec = []; | ||
| index_2.setElementValue.call(this, value); | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.updateValue = function (strippedVal) { | ||
| this.resetMaskedTextBox(); | ||
| index_2.setMaskValue.call(this, strippedVal); | ||
| }; | ||
| /** | ||
| * Gets the value of the MaskedTextBox with the masked format. | ||
| * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters. | ||
| * @return {string} | ||
| */ | ||
| MaskedTextBox.prototype.getMaskedValue = function () { | ||
| return index_1.unstrippedValue.call(this, this.element); | ||
| }; | ||
| /** | ||
| * Removes the component from the DOM and detaches all its related event handlers. | ||
| * Also it maintains the initial input element from the DOM. | ||
| * @method destroy | ||
| * @return {void} | ||
| */ | ||
| MaskedTextBox.prototype.destroy = function () { | ||
| index_1.unwireEvents.call(this); | ||
| this.inputObj.container.parentElement.appendChild(this.cloneElement); | ||
| ej2_base_2.detach(this.inputObj.container); | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "cssClass", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "width", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property('Never') | ||
| ], MaskedTextBox.prototype, "floatLabelType", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(true) | ||
| ], MaskedTextBox.prototype, "enabled", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], MaskedTextBox.prototype, "showClearButton", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], MaskedTextBox.prototype, "enablePersistence", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], MaskedTextBox.prototype, "enableRtl", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "mask", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property('_') | ||
| ], MaskedTextBox.prototype, "promptChar", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "value", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], MaskedTextBox.prototype, "customCharacters", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], MaskedTextBox.prototype, "created", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], MaskedTextBox.prototype, "destroyed", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], MaskedTextBox.prototype, "change", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], MaskedTextBox.prototype, "focus", void 0); | ||
| MaskedTextBox = __decorate([ | ||
| ej2_base_1.NotifyPropertyChanges | ||
| ], MaskedTextBox); | ||
| return MaskedTextBox; | ||
| }(ej2_base_1.Component)); | ||
| exports.MaskedTextBox = MaskedTextBox; | ||
| }); | ||
| } | ||
| }; | ||
| MaskedTextBox.prototype.updateValue = function (strippedVal) { | ||
| this.resetMaskedTextBox(); | ||
| setMaskValue.call(this, strippedVal); | ||
| }; | ||
| /** | ||
| * Gets the value of the MaskedTextBox with the masked format. | ||
| * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters. | ||
| * @return {string} | ||
| */ | ||
| MaskedTextBox.prototype.getMaskedValue = function () { | ||
| return unstrippedValue.call(this, this.element); | ||
| }; | ||
| /** | ||
| * Removes the component from the DOM and detaches all its related event handlers. | ||
| * Also it maintains the initial input element from the DOM. | ||
| * @method destroy | ||
| * @return {void} | ||
| */ | ||
| MaskedTextBox.prototype.destroy = function () { | ||
| unwireEvents.call(this); | ||
| this.inputObj.container.parentElement.appendChild(this.cloneElement); | ||
| detach(this.inputObj.container); | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "cssClass", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "width", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| Property('Never') | ||
| ], MaskedTextBox.prototype, "floatLabelType", void 0); | ||
| __decorate([ | ||
| Property(true) | ||
| ], MaskedTextBox.prototype, "enabled", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], MaskedTextBox.prototype, "showClearButton", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], MaskedTextBox.prototype, "enablePersistence", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], MaskedTextBox.prototype, "enableRtl", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "mask", void 0); | ||
| __decorate([ | ||
| Property('_') | ||
| ], MaskedTextBox.prototype, "promptChar", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "value", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], MaskedTextBox.prototype, "customCharacters", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], MaskedTextBox.prototype, "created", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], MaskedTextBox.prototype, "destroyed", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], MaskedTextBox.prototype, "change", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], MaskedTextBox.prototype, "focus", void 0); | ||
| MaskedTextBox = __decorate([ | ||
| NotifyPropertyChanges | ||
| ], MaskedTextBox); | ||
| return MaskedTextBox; | ||
| }(Component)); | ||
| export { MaskedTextBox }; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./numerictextbox"], function (require, exports, numerictextbox_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * NumericTextBox modules | ||
| */ | ||
| __export(numerictextbox_1); | ||
| }); | ||
| /** | ||
| * NumericTextBox modules | ||
| */ | ||
| export * from './numerictextbox'; |
@@ -17,515 +17,480 @@ var __extends = (this && this.__extends) || (function () { | ||
| }; | ||
| define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../input/input"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, input_1) { | ||
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var ROOT = 'e-control-wrapper e-numeric'; | ||
| var SPINICON = 'e-input-group-icon'; | ||
| var SPINUP = 'e-spin-up'; | ||
| var SPINDOWN = 'e-spin-down'; | ||
| var ERROR = 'e-error'; | ||
| var INCREMENT = 'increment'; | ||
| var DECREMENT = 'decrement'; | ||
| var INTREGEXP = new RegExp('/^(-)?(\d*)$/'); | ||
| var DECIMALSEPARATOR = '.'; | ||
| import { Component, EventHandler, Property, Event, Browser, L10n } from '@syncfusion/ej2-base'; | ||
| import { NotifyPropertyChanges } from '@syncfusion/ej2-base'; | ||
| import { attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base'; | ||
| import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base'; | ||
| import { Internationalization, getNumericObject } from '@syncfusion/ej2-base'; | ||
| import { Input } from '../input/input'; | ||
| var ROOT = 'e-control-wrapper e-numeric'; | ||
| var SPINICON = 'e-input-group-icon'; | ||
| var SPINUP = 'e-spin-up'; | ||
| var SPINDOWN = 'e-spin-down'; | ||
| var ERROR = 'e-error'; | ||
| var INCREMENT = 'increment'; | ||
| var DECREMENT = 'decrement'; | ||
| var INTREGEXP = new RegExp('/^(-)?(\d*)$/'); | ||
| var DECIMALSEPARATOR = '.'; | ||
| var COMPONENT = 'e-numerictextbox'; | ||
| var CONTROL = 'e-control'; | ||
| /** | ||
| * Represents the NumericTextBox component that allows the user to enter only numeric values. | ||
| * ```html | ||
| * <input type='text' id="numeric"/> | ||
| * ``` | ||
| * ```typescript | ||
| * <script> | ||
| * var numericObj = new NumericTextBox({ value: 10 }); | ||
| * numericObj.appendTo("#numeric"); | ||
| * </script> | ||
| * ``` | ||
| */ | ||
| var NumericTextBox = /** @class */ (function (_super) { | ||
| __extends(NumericTextBox, _super); | ||
| function NumericTextBox(options, element) { | ||
| return _super.call(this, options, element) || this; | ||
| } | ||
| NumericTextBox.prototype.preRender = function () { | ||
| this.isPrevFocused = false; | ||
| this.decimalSeparator = '.'; | ||
| this.intRegExp = new RegExp('/^(-)?(\d*)$/'); | ||
| this.isCalled = false; | ||
| var ejInstance = getValue('ej2_instances', this.element); | ||
| this.cloneElement = this.element.cloneNode(true); | ||
| removeClass([this.cloneElement], [CONTROL, COMPONENT]); | ||
| this.angularTagName = null; | ||
| if (this.element.tagName === 'EJS-NUMERICTEXTBOX') { | ||
| this.angularTagName = this.element.tagName; | ||
| var input = this.createElement('input'); | ||
| var index = 0; | ||
| for (index; index < this.element.attributes.length; index++) { | ||
| input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue); | ||
| input.innerHTML = this.element.innerHTML; | ||
| } | ||
| if (this.element.hasAttribute('id')) { | ||
| this.element.removeAttribute('id'); | ||
| } | ||
| this.element.classList.remove('e-control', 'e-numerictextbox'); | ||
| this.element.appendChild(input); | ||
| this.element = input; | ||
| setValue('ej2_instances', ejInstance, this.element); | ||
| } | ||
| attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' }); | ||
| var localeText = { incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: '' }; | ||
| this.l10n = new L10n('numerictextbox', localeText, this.locale); | ||
| this.isValidState = true; | ||
| this.inputStyle = null; | ||
| this.inputName = null; | ||
| this.cultureInfo = {}; | ||
| this.initCultureInfo(); | ||
| this.initCultureFunc(); | ||
| this.checkAttributes(); | ||
| this.prevValue = this.value; | ||
| this.validateMinMax(); | ||
| this.validateStep(); | ||
| if (this.placeholder === null) { | ||
| this.updatePlaceholder(); | ||
| } | ||
| }; | ||
| /** | ||
| * Represents the NumericTextBox component that allows the user to enter only numeric values. | ||
| * ```html | ||
| * <input type='text' id="numeric"/> | ||
| * ``` | ||
| * ```typescript | ||
| * <script> | ||
| * var numericObj = new NumericTextBox({ value: 10 }); | ||
| * numericObj.appendTo("#numeric"); | ||
| * </script> | ||
| * ``` | ||
| * To Initialize the control rendering | ||
| * @private | ||
| */ | ||
| var NumericTextBox = /** @class */ (function (_super) { | ||
| __extends(NumericTextBox, _super); | ||
| function NumericTextBox(options, element) { | ||
| return _super.call(this, options, element) || this; | ||
| } | ||
| NumericTextBox.prototype.preRender = function () { | ||
| this.isPrevFocused = false; | ||
| this.decimalSeparator = '.'; | ||
| this.intRegExp = new RegExp('/^(-)?(\d*)$/'); | ||
| this.isCalled = false; | ||
| var ejInstance = ej2_base_4.getValue('ej2_instances', this.element); | ||
| this.cloneElement = this.element.cloneNode(true); | ||
| this.angularTagName = null; | ||
| if (this.element.tagName === 'EJS-NUMERICTEXTBOX') { | ||
| this.angularTagName = this.element.tagName; | ||
| var input = ej2_base_3.createElement('input'); | ||
| var index = 0; | ||
| for (index; index < this.element.attributes.length; index++) { | ||
| input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue); | ||
| input.innerHTML = this.element.innerHTML; | ||
| } | ||
| if (this.element.hasAttribute('id')) { | ||
| this.element.removeAttribute('id'); | ||
| } | ||
| this.element.classList.remove('e-control', 'e-numerictextbox'); | ||
| this.element.appendChild(input); | ||
| this.element = input; | ||
| ej2_base_4.setValue('ej2_instances', ejInstance, this.element); | ||
| NumericTextBox.prototype.render = function () { | ||
| if (this.element.tagName.toLowerCase() === 'input') { | ||
| this.createWrapper(); | ||
| if (this.showSpinButton) { | ||
| this.spinBtnCreation(); | ||
| } | ||
| ej2_base_3.attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' }); | ||
| var localeText = { incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: '' }; | ||
| this.l10n = new ej2_base_1.L10n('numerictextbox', localeText, this.locale); | ||
| this.isValidState = true; | ||
| this.inputStyle = null; | ||
| this.inputName = null; | ||
| this.cultureInfo = {}; | ||
| this.initCultureInfo(); | ||
| this.initCultureFunc(); | ||
| this.checkAttributes(); | ||
| this.prevValue = this.value; | ||
| this.validateMinMax(); | ||
| this.validateStep(); | ||
| if (this.placeholder === null) { | ||
| this.updatePlaceholder(); | ||
| if (!isNullOrUndefined(this.width)) { | ||
| setStyleAttribute(this.container, { 'width': formatUnit(this.width) }); | ||
| } | ||
| }; | ||
| /** | ||
| * To Initialize the control rendering | ||
| * @private | ||
| */ | ||
| NumericTextBox.prototype.render = function () { | ||
| if (this.element.tagName.toLowerCase() === 'input') { | ||
| this.createWrapper(); | ||
| if (this.showSpinButton) { | ||
| this.spinBtnCreation(); | ||
| } | ||
| if (!ej2_base_4.isNullOrUndefined(this.width)) { | ||
| ej2_base_3.setStyleAttribute(this.container, { 'width': ej2_base_4.formatUnit(this.width) }); | ||
| } | ||
| if (!this.container.classList.contains('e-input-group')) { | ||
| this.container.classList.add('e-input-group'); | ||
| } | ||
| this.changeValue(this.value === null || isNaN(this.value) ? null : this.strictMode ? this.trimValue(this.value) : this.value); | ||
| this.wireEvents(); | ||
| if (this.value !== null && !isNaN(this.value)) { | ||
| if (this.decimals) { | ||
| this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true); | ||
| } | ||
| } | ||
| if (!this.container.classList.contains('e-input-group')) { | ||
| this.container.classList.add('e-input-group'); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.checkAttributes = function () { | ||
| var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name']; | ||
| for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) { | ||
| var prop = attributes_1[_i]; | ||
| if (!ej2_base_4.isNullOrUndefined(this.element.getAttribute(prop))) { | ||
| switch (prop) { | ||
| case 'disabled': | ||
| var enabled = this.element.getAttribute(prop) === 'disabled' || | ||
| this.element.getAttribute(prop) === 'true' ? false : true; | ||
| this.setProperties({ enabled: enabled }, true); | ||
| break; | ||
| case 'readonly': | ||
| var readonly = this.element.getAttribute(prop) === 'readonly' | ||
| || this.element.getAttribute(prop) === 'true' ? true : false; | ||
| this.setProperties({ readonly: readonly }, true); | ||
| break; | ||
| case 'style': | ||
| this.inputStyle = this.element.getAttribute(prop); | ||
| break; | ||
| case 'name': | ||
| this.inputName = this.element.getAttribute(prop); | ||
| break; | ||
| default: | ||
| var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop)); | ||
| if ((value !== null && !isNaN(value)) || (prop === 'value')) { | ||
| this.setProperties(ej2_base_4.setValue(prop, value, {}), true); | ||
| } | ||
| break; | ||
| } | ||
| this.changeValue(this.value === null || isNaN(this.value) ? null : this.strictMode ? this.trimValue(this.value) : this.value); | ||
| this.wireEvents(); | ||
| if (this.value !== null && !isNaN(this.value)) { | ||
| if (this.decimals) { | ||
| this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true); | ||
| } | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.updatePlaceholder = function () { | ||
| this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true); | ||
| }; | ||
| NumericTextBox.prototype.initCultureFunc = function () { | ||
| this.instance = new ej2_base_5.Internationalization(this.locale); | ||
| }; | ||
| NumericTextBox.prototype.initCultureInfo = function () { | ||
| this.cultureInfo.format = this.format; | ||
| if (ej2_base_4.getValue('currency', this) !== null) { | ||
| ej2_base_4.setValue('currency', this.currency, this.cultureInfo); | ||
| this.setProperties({ currencyCode: this.currency }, true); | ||
| } | ||
| }; | ||
| /* Wrapper creation */ | ||
| NumericTextBox.prototype.createWrapper = function () { | ||
| var inputObj = input_1.Input.createInput({ | ||
| element: this.element, | ||
| floatLabelType: this.floatLabelType, | ||
| properties: { | ||
| readonly: this.readonly, | ||
| placeholder: this.placeholder, | ||
| cssClass: this.cssClass, | ||
| enableRtl: this.enableRtl, | ||
| showClearButton: this.showClearButton, | ||
| enabled: this.enabled | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.checkAttributes = function () { | ||
| var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name']; | ||
| for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) { | ||
| var prop = attributes_1[_i]; | ||
| if (!isNullOrUndefined(this.element.getAttribute(prop))) { | ||
| switch (prop) { | ||
| case 'disabled': | ||
| var enabled = this.element.getAttribute(prop) === 'disabled' || | ||
| this.element.getAttribute(prop) === 'true' ? false : true; | ||
| this.setProperties({ enabled: enabled }, true); | ||
| break; | ||
| case 'readonly': | ||
| var readonly = this.element.getAttribute(prop) === 'readonly' | ||
| || this.element.getAttribute(prop) === 'true' ? true : false; | ||
| this.setProperties({ readonly: readonly }, true); | ||
| break; | ||
| case 'style': | ||
| this.inputStyle = this.element.getAttribute(prop); | ||
| break; | ||
| case 'name': | ||
| this.inputName = this.element.getAttribute(prop); | ||
| break; | ||
| default: | ||
| var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop)); | ||
| if ((value !== null && !isNaN(value)) || (prop === 'value')) { | ||
| this.setProperties(setValue(prop, value, {}), true); | ||
| } | ||
| break; | ||
| } | ||
| }); | ||
| this.inputWrapper = inputObj; | ||
| this.container = inputObj.container; | ||
| this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class')); | ||
| if (this.readonly) { | ||
| ej2_base_3.attributes(this.element, { 'aria-readonly': 'true' }); | ||
| } | ||
| this.hiddenInput = (ej2_base_3.createElement('input', { attrs: { type: 'hidden', 'validateHidden': 'true' } })); | ||
| this.inputName = this.inputName !== null ? this.inputName : this.element.id; | ||
| this.element.removeAttribute('name'); | ||
| ej2_base_3.attributes(this.hiddenInput, { 'name': this.inputName }); | ||
| this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]); | ||
| if (this.inputStyle !== null) { | ||
| ej2_base_3.attributes(this.container, { 'style': this.inputStyle }); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.updatePlaceholder = function () { | ||
| this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true); | ||
| }; | ||
| NumericTextBox.prototype.initCultureFunc = function () { | ||
| this.instance = new Internationalization(this.locale); | ||
| }; | ||
| NumericTextBox.prototype.initCultureInfo = function () { | ||
| this.cultureInfo.format = this.format; | ||
| if (getValue('currency', this) !== null) { | ||
| setValue('currency', this.currency, this.cultureInfo); | ||
| this.setProperties({ currencyCode: this.currency }, true); | ||
| } | ||
| }; | ||
| /* Wrapper creation */ | ||
| NumericTextBox.prototype.createWrapper = function () { | ||
| var inputObj = Input.createInput({ | ||
| element: this.element, | ||
| floatLabelType: this.floatLabelType, | ||
| properties: { | ||
| readonly: this.readonly, | ||
| placeholder: this.placeholder, | ||
| cssClass: this.cssClass, | ||
| enableRtl: this.enableRtl, | ||
| showClearButton: this.showClearButton, | ||
| enabled: this.enabled | ||
| } | ||
| }; | ||
| /* Spinner creation */ | ||
| NumericTextBox.prototype.spinBtnCreation = function () { | ||
| this.spinDown = input_1.Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container); | ||
| ej2_base_3.attributes(this.spinDown, { | ||
| 'title': this.l10n.getConstant('decrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('decrementTitle') | ||
| }); | ||
| this.spinUp = input_1.Input.appendSpan(SPINICON + ' ' + SPINUP, this.container); | ||
| ej2_base_3.attributes(this.spinUp, { | ||
| 'title': this.l10n.getConstant('incrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('incrementTitle') | ||
| }); | ||
| this.wireSpinBtnEvents(); | ||
| }; | ||
| NumericTextBox.prototype.validateMinMax = function () { | ||
| if (!(typeof (this.min) === 'number' && !isNaN(this.min))) { | ||
| this.setProperties({ min: -(Number.MAX_VALUE) }, true); | ||
| }); | ||
| this.inputWrapper = inputObj; | ||
| this.container = inputObj.container; | ||
| this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class')); | ||
| if (this.readonly) { | ||
| attributes(this.element, { 'aria-readonly': 'true' }); | ||
| } | ||
| this.hiddenInput = (this.createElement('input', { attrs: { type: 'hidden', 'validateHidden': 'true' } })); | ||
| this.inputName = this.inputName !== null ? this.inputName : this.element.id; | ||
| this.element.removeAttribute('name'); | ||
| attributes(this.hiddenInput, { 'name': this.inputName }); | ||
| this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]); | ||
| if (this.inputStyle !== null) { | ||
| attributes(this.container, { 'style': this.inputStyle }); | ||
| } | ||
| }; | ||
| /* Spinner creation */ | ||
| NumericTextBox.prototype.spinBtnCreation = function () { | ||
| this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container); | ||
| attributes(this.spinDown, { | ||
| 'title': this.l10n.getConstant('decrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('decrementTitle') | ||
| }); | ||
| this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container); | ||
| attributes(this.spinUp, { | ||
| 'title': this.l10n.getConstant('incrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('incrementTitle') | ||
| }); | ||
| this.wireSpinBtnEvents(); | ||
| }; | ||
| NumericTextBox.prototype.validateMinMax = function () { | ||
| if (!(typeof (this.min) === 'number' && !isNaN(this.min))) { | ||
| this.setProperties({ min: -(Number.MAX_VALUE) }, true); | ||
| } | ||
| if (!(typeof (this.max) === 'number' && !isNaN(this.max))) { | ||
| this.setProperties({ max: Number.MAX_VALUE }, true); | ||
| } | ||
| if (this.decimals !== null) { | ||
| if (this.min !== -(Number.MAX_VALUE)) { | ||
| this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true); | ||
| } | ||
| if (!(typeof (this.max) === 'number' && !isNaN(this.max))) { | ||
| this.setProperties({ max: Number.MAX_VALUE }, true); | ||
| if (this.max !== (Number.MAX_VALUE)) { | ||
| this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true); | ||
| } | ||
| if (this.decimals !== null) { | ||
| if (this.min !== -(Number.MAX_VALUE)) { | ||
| this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true); | ||
| } | ||
| if (this.max !== (Number.MAX_VALUE)) { | ||
| this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true); | ||
| } | ||
| } | ||
| this.setProperties({ min: this.min > this.max ? this.max : this.min }, true); | ||
| ej2_base_3.attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() }); | ||
| }; | ||
| NumericTextBox.prototype.formattedValue = function (decimals, value) { | ||
| return this.instance.getNumberFormat({ | ||
| maximumFractionDigits: decimals, | ||
| minimumFractionDigits: decimals, useGrouping: false | ||
| })(value); | ||
| }; | ||
| NumericTextBox.prototype.validateStep = function () { | ||
| if (this.decimals !== null) { | ||
| this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.action = function (operation, event) { | ||
| this.isInteract = true; | ||
| var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value; | ||
| this.changeValue(this.performAction(value, this.step, operation)); | ||
| this.raiseChangeEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.checkErrorClass = function () { | ||
| if (this.isValidState) { | ||
| ej2_base_3.removeClass([this.container], ERROR); | ||
| } | ||
| else { | ||
| ej2_base_3.addClass([this.container], ERROR); | ||
| } | ||
| ej2_base_3.attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' }); | ||
| }; | ||
| NumericTextBox.prototype.bindClearEvent = function () { | ||
| if (this.showClearButton) { | ||
| ej2_base_1.EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.resetHandler = function (e) { | ||
| e.preventDefault(); | ||
| if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) { | ||
| this.clear(e); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.clear = function (event) { | ||
| } | ||
| this.setProperties({ min: this.min > this.max ? this.max : this.min }, true); | ||
| attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() }); | ||
| }; | ||
| NumericTextBox.prototype.formattedValue = function (decimals, value) { | ||
| return this.instance.getNumberFormat({ | ||
| maximumFractionDigits: decimals, | ||
| minimumFractionDigits: decimals, useGrouping: false | ||
| })(value); | ||
| }; | ||
| NumericTextBox.prototype.validateStep = function () { | ||
| if (this.decimals !== null) { | ||
| this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.action = function (operation, event) { | ||
| this.isInteract = true; | ||
| var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value; | ||
| this.changeValue(this.performAction(value, this.step, operation)); | ||
| this.raiseChangeEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.checkErrorClass = function () { | ||
| if (this.isValidState) { | ||
| removeClass([this.container], ERROR); | ||
| } | ||
| else { | ||
| addClass([this.container], ERROR); | ||
| } | ||
| attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' }); | ||
| }; | ||
| NumericTextBox.prototype.bindClearEvent = function () { | ||
| if (this.showClearButton) { | ||
| EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.resetHandler = function (e) { | ||
| e.preventDefault(); | ||
| if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) { | ||
| this.clear(e); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.clear = function (event) { | ||
| this.setProperties({ value: null }, true); | ||
| this.setElementValue(''); | ||
| }; | ||
| NumericTextBox.prototype.wireEvents = function () { | ||
| EventHandler.add(this.element, 'focus', this.focusIn, this); | ||
| EventHandler.add(this.element, 'blur', this.focusOut, this); | ||
| EventHandler.add(this.element, 'keydown', this.keyDownHandler, this); | ||
| EventHandler.add(this.element, 'keyup', this.keyUpHandler, this); | ||
| EventHandler.add(this.element, 'input', this.inputHandler, this); | ||
| EventHandler.add(this.element, 'keypress', this.keyPressHandler, this); | ||
| EventHandler.add(this.element, 'change', this.changeHandler, this); | ||
| EventHandler.add(this.element, 'paste', this.pasteHandler, this); | ||
| if (this.enabled) { | ||
| this.bindClearEvent(); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.wireSpinBtnEvents = function () { | ||
| /* bind spin button events */ | ||
| EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this); | ||
| EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this); | ||
| EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this); | ||
| EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this); | ||
| EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this); | ||
| EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this); | ||
| }; | ||
| NumericTextBox.prototype.unwireEvents = function () { | ||
| EventHandler.remove(this.element, 'focus', this.focusIn); | ||
| EventHandler.remove(this.element, 'blur', this.focusOut); | ||
| EventHandler.remove(this.element, 'keyup', this.keyUpHandler); | ||
| EventHandler.remove(this.element, 'input', this.inputHandler); | ||
| EventHandler.remove(this.element, 'keydown', this.keyDownHandler); | ||
| EventHandler.remove(this.element, 'keypress', this.keyPressHandler); | ||
| EventHandler.remove(this.element, 'change', this.changeHandler); | ||
| EventHandler.remove(this.element, 'paste', this.pasteHandler); | ||
| }; | ||
| NumericTextBox.prototype.unwireSpinBtnEvents = function () { | ||
| /* unbind spin button events */ | ||
| EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner); | ||
| EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner); | ||
| EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner); | ||
| EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner); | ||
| EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner); | ||
| EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner); | ||
| }; | ||
| NumericTextBox.prototype.changeHandler = function (event) { | ||
| if (!this.element.value.length) { | ||
| this.setProperties({ value: null }, true); | ||
| this.setElementValue(''); | ||
| }; | ||
| NumericTextBox.prototype.wireEvents = function () { | ||
| ej2_base_1.EventHandler.add(this.element, 'focus', this.focusIn, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'blur', this.focusOut, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'keydown', this.keyDownHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'keyup', this.keyUpHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'input', this.inputHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'keypress', this.keyPressHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'change', this.changeHandler, this); | ||
| ej2_base_1.EventHandler.add(this.element, 'paste', this.pasteHandler, this); | ||
| if (this.enabled) { | ||
| this.bindClearEvent(); | ||
| } | ||
| var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value); | ||
| this.updateValue(parsedInput, event); | ||
| }; | ||
| NumericTextBox.prototype.raiseChangeEvent = function (event) { | ||
| if (this.prevValue !== this.value) { | ||
| var eventArgs = {}; | ||
| this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteraction: this.isInteract, event: event }; | ||
| if (event) { | ||
| this.changeEventArgs.event = event; | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.wireSpinBtnEvents = function () { | ||
| /* bind spin button events */ | ||
| ej2_base_1.EventHandler.add(this.spinUp, ej2_base_1.Browser.touchStartEvent, this.mouseDownOnSpinner, this); | ||
| ej2_base_1.EventHandler.add(this.spinDown, ej2_base_1.Browser.touchStartEvent, this.mouseDownOnSpinner, this); | ||
| ej2_base_1.EventHandler.add(this.spinUp, ej2_base_1.Browser.touchEndEvent, this.mouseUpOnSpinner, this); | ||
| ej2_base_1.EventHandler.add(this.spinDown, ej2_base_1.Browser.touchEndEvent, this.mouseUpOnSpinner, this); | ||
| ej2_base_1.EventHandler.add(this.spinUp, ej2_base_1.Browser.touchMoveEvent, this.touchMoveOnSpinner, this); | ||
| ej2_base_1.EventHandler.add(this.spinDown, ej2_base_1.Browser.touchMoveEvent, this.touchMoveOnSpinner, this); | ||
| }; | ||
| NumericTextBox.prototype.unwireEvents = function () { | ||
| ej2_base_1.EventHandler.remove(this.element, 'focus', this.focusIn); | ||
| ej2_base_1.EventHandler.remove(this.element, 'blur', this.focusOut); | ||
| ej2_base_1.EventHandler.remove(this.element, 'keyup', this.keyUpHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'input', this.inputHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'keydown', this.keyDownHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'keypress', this.keyPressHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'change', this.changeHandler); | ||
| ej2_base_1.EventHandler.remove(this.element, 'paste', this.pasteHandler); | ||
| }; | ||
| NumericTextBox.prototype.unwireSpinBtnEvents = function () { | ||
| /* unbind spin button events */ | ||
| ej2_base_1.EventHandler.remove(this.spinUp, ej2_base_1.Browser.touchStartEvent, this.mouseDownOnSpinner); | ||
| ej2_base_1.EventHandler.remove(this.spinDown, ej2_base_1.Browser.touchStartEvent, this.mouseDownOnSpinner); | ||
| ej2_base_1.EventHandler.remove(this.spinUp, ej2_base_1.Browser.touchEndEvent, this.mouseUpOnSpinner); | ||
| ej2_base_1.EventHandler.remove(this.spinDown, ej2_base_1.Browser.touchEndEvent, this.mouseUpOnSpinner); | ||
| ej2_base_1.EventHandler.remove(this.spinUp, ej2_base_1.Browser.touchMoveEvent, this.touchMoveOnSpinner); | ||
| ej2_base_1.EventHandler.remove(this.spinDown, ej2_base_1.Browser.touchMoveEvent, this.touchMoveOnSpinner); | ||
| }; | ||
| NumericTextBox.prototype.changeHandler = function (event) { | ||
| if (!this.element.value.length) { | ||
| this.setProperties({ value: null }, true); | ||
| merge(eventArgs, this.changeEventArgs); | ||
| this.prevValue = this.value; | ||
| this.isInteract = false; | ||
| this.trigger('change', eventArgs); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.pasteHandler = function () { | ||
| var _this = this; | ||
| var beforeUpdate = this.element.value; | ||
| setTimeout(function () { | ||
| if (!_this.numericRegex().test(_this.element.value)) { | ||
| _this.setElementValue(beforeUpdate); | ||
| } | ||
| var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value); | ||
| this.updateValue(parsedInput, event); | ||
| }; | ||
| NumericTextBox.prototype.raiseChangeEvent = function (event) { | ||
| if (this.prevValue !== this.value) { | ||
| var eventArgs = {}; | ||
| this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteraction: this.isInteract, event: event }; | ||
| if (event) { | ||
| this.changeEventArgs.event = event; | ||
| }); | ||
| }; | ||
| NumericTextBox.prototype.preventHandler = function () { | ||
| var _this = this; | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| setTimeout(function () { | ||
| if (_this.element.selectionStart > 0) { | ||
| var currentPos = _this.element.selectionStart; | ||
| var prevPos = _this.element.selectionStart - 1; | ||
| var start = 0; | ||
| var ignoreKeyCode = void 0; | ||
| var valArray = _this.element.value.split(''); | ||
| var numericObject = getNumericObject(_this.locale); | ||
| var decimalSeparator = getValue('decimal', numericObject); | ||
| ignoreKeyCode = decimalSeparator.charCodeAt(0); | ||
| if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) { | ||
| if (isNullOrUndefined(_this.prevVal)) { | ||
| _this.element.value = _this.element.value.trim(); | ||
| } | ||
| else if (prevPos !== 0) { | ||
| _this.element.value = _this.prevVal; | ||
| } | ||
| else if (prevPos === 0) { | ||
| _this.element.value = _this.element.value.trim(); | ||
| } | ||
| _this.element.setSelectionRange(prevPos, prevPos); | ||
| } | ||
| ej2_base_4.merge(eventArgs, this.changeEventArgs); | ||
| this.prevValue = this.value; | ||
| this.isInteract = false; | ||
| this.trigger('change', eventArgs); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.pasteHandler = function () { | ||
| var _this = this; | ||
| var beforeUpdate = this.element.value; | ||
| setTimeout(function () { | ||
| if (!_this.numericRegex().test(_this.element.value)) { | ||
| _this.setElementValue(beforeUpdate); | ||
| } | ||
| }); | ||
| }; | ||
| NumericTextBox.prototype.preventHandler = function () { | ||
| var _this = this; | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| setTimeout(function () { | ||
| if (_this.element.selectionStart > 0) { | ||
| var currentPos = _this.element.selectionStart; | ||
| var prevPos = _this.element.selectionStart - 1; | ||
| var start = 0; | ||
| var ignoreKeyCode = void 0; | ||
| var valArray = _this.element.value.split(''); | ||
| var numericObject = ej2_base_5.getNumericObject(_this.locale); | ||
| var decimalSeparator = ej2_base_4.getValue('decimal', numericObject); | ||
| ignoreKeyCode = decimalSeparator.charCodeAt(0); | ||
| if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) { | ||
| if (ej2_base_4.isNullOrUndefined(_this.prevVal)) { | ||
| _this.element.value = _this.element.value.trim(); | ||
| } | ||
| else if (prevPos !== 0) { | ||
| _this.element.value = _this.prevVal; | ||
| } | ||
| else if (prevPos === 0) { | ||
| _this.element.value = _this.element.value.trim(); | ||
| } | ||
| else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) { | ||
| if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !== | ||
| valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) && | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) || | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) { | ||
| _this.element.value = _this.element.value.substring(0, prevPos) + | ||
| _this.element.value.substring(currentPos, _this.element.value.length); | ||
| _this.element.setSelectionRange(prevPos, prevPos); | ||
| } | ||
| else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) { | ||
| if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !== | ||
| valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) && | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) || | ||
| _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) { | ||
| _this.element.value = _this.element.value.substring(0, prevPos) + | ||
| _this.element.value.substring(currentPos, _this.element.value.length); | ||
| _this.element.setSelectionRange(prevPos, prevPos); | ||
| if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0 | ||
| && _this.element.value.length) { | ||
| _this.preventHandler(); | ||
| } | ||
| } | ||
| } | ||
| else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 && | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) { | ||
| if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !== | ||
| valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) && | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) || | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) { | ||
| _this.element.setSelectionRange(prevPos, prevPos); | ||
| _this.nextEle = _this.element.value[_this.element.selectionStart]; | ||
| _this.cursorPosChanged = true; | ||
| if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0 | ||
| && _this.element.value.length) { | ||
| _this.preventHandler(); | ||
| } | ||
| } | ||
| if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle && | ||
| isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) { | ||
| _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1); | ||
| _this.cursorPosChanged = false; | ||
| _this.nextEle = null; | ||
| } | ||
| else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 && | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) { | ||
| if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !== | ||
| valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) && | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) || | ||
| _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) { | ||
| _this.element.setSelectionRange(prevPos, prevPos); | ||
| _this.nextEle = _this.element.value[_this.element.selectionStart]; | ||
| _this.cursorPosChanged = true; | ||
| _this.preventHandler(); | ||
| } | ||
| if (_this.element.value.trim() === '') { | ||
| _this.element.setSelectionRange(start, start); | ||
| } | ||
| if (_this.element.selectionStart > 0) { | ||
| if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) { | ||
| if (ej2_base_4.isNullOrUndefined(_this.prevVal)) { | ||
| _this.element.value = _this.element.value; | ||
| } | ||
| else { | ||
| _this.element.value = _this.prevVal; | ||
| } | ||
| _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart); | ||
| } | ||
| } | ||
| _this.prevVal = _this.element.value; | ||
| } | ||
| }); | ||
| }; | ||
| NumericTextBox.prototype.keyUpHandler = function (event) { | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| if (!iOS && ej2_base_1.Browser.isDevice) { | ||
| this.preventHandler(); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.inputHandler = function (event) { | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| if (iOS && ej2_base_1.Browser.isDevice) { | ||
| this.preventHandler(); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.keyDownHandler = function (event) { | ||
| if (!this.readonly) { | ||
| switch (event.keyCode) { | ||
| case 38: | ||
| event.preventDefault(); | ||
| this.action(INCREMENT, event); | ||
| break; | ||
| case 40: | ||
| event.preventDefault(); | ||
| this.action(DECREMENT, event); | ||
| break; | ||
| default: break; | ||
| if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle && | ||
| isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) { | ||
| _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1); | ||
| _this.cursorPosChanged = false; | ||
| _this.nextEle = null; | ||
| } | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.performAction = function (value, step, operation) { | ||
| if (value === null || isNaN(value)) { | ||
| value = 0; | ||
| } | ||
| var updatedValue = operation === INCREMENT ? value + step : value - step; | ||
| updatedValue = this.correctRounding(value, step, updatedValue); | ||
| return this.strictMode ? this.trimValue(updatedValue) : updatedValue; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.correctRounding = function (value, step, result) { | ||
| var floatExp = new RegExp('[,.](.*)'); | ||
| var valueText = value.toString(); | ||
| var stepText = step.toString(); | ||
| var floatValue = floatExp.test(value.toString()); | ||
| var floatStep = floatExp.test(step.toString()); | ||
| if (floatValue || floatStep) { | ||
| var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0; | ||
| var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0; | ||
| var max = Math.max(valueCount, stepCount); | ||
| return value = this.roundValue(result, max); | ||
| } | ||
| return result; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.roundValue = function (result, precision) { | ||
| precision = precision || 0; | ||
| var divide = Math.pow(10, precision); | ||
| return result *= divide, result = Math.round(result) / divide; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.updateValue = function (value, event) { | ||
| if (event) { | ||
| this.isInteract = true; | ||
| } | ||
| if (value !== null && !isNaN(value)) { | ||
| if (this.decimals) { | ||
| value = this.roundNumber(value, this.decimals); | ||
| if (_this.element.value.trim() === '') { | ||
| _this.element.setSelectionRange(start, start); | ||
| } | ||
| } | ||
| this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value); | ||
| this.raiseChangeEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.updateCurrency = function (prop, propVal) { | ||
| ej2_base_4.setValue(prop, propVal, this.cultureInfo); | ||
| this.updateValue(this.value); | ||
| }; | ||
| NumericTextBox.prototype.changeValue = function (value) { | ||
| if (!(value || value === 0)) { | ||
| value = null; | ||
| this.setProperties({ value: value }, true); | ||
| } | ||
| else { | ||
| var numberOfDecimals = void 0; | ||
| var decimalPart = value.toString().split('.')[1]; | ||
| numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length; | ||
| if (this.decimals !== null) { | ||
| numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals; | ||
| if (_this.element.selectionStart > 0) { | ||
| if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) { | ||
| if (isNullOrUndefined(_this.prevVal)) { | ||
| _this.element.value = _this.element.value; | ||
| } | ||
| else { | ||
| _this.element.value = _this.prevVal; | ||
| } | ||
| _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart); | ||
| } | ||
| } | ||
| this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true); | ||
| _this.prevVal = _this.element.value; | ||
| } | ||
| this.modifyText(); | ||
| if (!this.strictMode) { | ||
| this.validateState(); | ||
| }); | ||
| }; | ||
| NumericTextBox.prototype.keyUpHandler = function (event) { | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| if (!iOS && Browser.isDevice) { | ||
| this.preventHandler(); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.inputHandler = function (event) { | ||
| var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); | ||
| if (iOS && Browser.isDevice) { | ||
| this.preventHandler(); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.keyDownHandler = function (event) { | ||
| if (!this.readonly) { | ||
| switch (event.keyCode) { | ||
| case 38: | ||
| event.preventDefault(); | ||
| this.action(INCREMENT, event); | ||
| break; | ||
| case 40: | ||
| event.preventDefault(); | ||
| this.action(DECREMENT, event); | ||
| break; | ||
| default: break; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.modifyText = function () { | ||
| if (this.value || this.value === 0) { | ||
| var value = this.formatNumber(); | ||
| var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value); | ||
| this.setElementValue(elementValue); | ||
| ej2_base_3.attributes(this.element, { 'aria-valuenow': value }); | ||
| this.hiddenInput.value = value; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.performAction = function (value, step, operation) { | ||
| if (value === null || isNaN(value)) { | ||
| value = 0; | ||
| } | ||
| var updatedValue = operation === INCREMENT ? value + step : value - step; | ||
| updatedValue = this.correctRounding(value, step, updatedValue); | ||
| return this.strictMode ? this.trimValue(updatedValue) : updatedValue; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.correctRounding = function (value, step, result) { | ||
| var floatExp = new RegExp('[,.](.*)'); | ||
| var valueText = value.toString(); | ||
| var stepText = step.toString(); | ||
| var floatValue = floatExp.test(value.toString()); | ||
| var floatStep = floatExp.test(step.toString()); | ||
| if (floatValue || floatStep) { | ||
| var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0; | ||
| var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0; | ||
| var max = Math.max(valueCount, stepCount); | ||
| return value = this.roundValue(result, max); | ||
| } | ||
| return result; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.roundValue = function (result, precision) { | ||
| precision = precision || 0; | ||
| var divide = Math.pow(10, precision); | ||
| return result *= divide, result = Math.round(result) / divide; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.updateValue = function (value, event) { | ||
| if (event) { | ||
| this.isInteract = true; | ||
| } | ||
| if (value !== null && !isNaN(value)) { | ||
| if (this.decimals) { | ||
| value = this.roundNumber(value, this.decimals); | ||
| } | ||
| else { | ||
| this.setElementValue(''); | ||
| this.element.removeAttribute('aria-valuenow'); | ||
| this.hiddenInput.value = null; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.setElementValue = function (val, element) { | ||
| input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton); | ||
| }; | ||
| NumericTextBox.prototype.validateState = function () { | ||
| this.isValidState = true; | ||
| if (this.value || this.value === 0) { | ||
| this.isValidState = !(this.value > this.max || this.value < this.min); | ||
| } | ||
| this.checkErrorClass(); | ||
| }; | ||
| NumericTextBox.prototype.formatNumber = function () { | ||
| var numberOfDecimals; | ||
| var currentValue = this.value; | ||
| var decimalPart = currentValue.toString().split('.')[1]; | ||
| } | ||
| this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value); | ||
| this.raiseChangeEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.updateCurrency = function (prop, propVal) { | ||
| setValue(prop, propVal, this.cultureInfo); | ||
| this.updateValue(this.value); | ||
| }; | ||
| NumericTextBox.prototype.changeValue = function (value) { | ||
| if (!(value || value === 0)) { | ||
| value = null; | ||
| this.setProperties({ value: value }, true); | ||
| } | ||
| else { | ||
| var numberOfDecimals = void 0; | ||
| var decimalPart = value.toString().split('.')[1]; | ||
| numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length; | ||
@@ -535,444 +500,484 @@ if (this.decimals !== null) { | ||
| } | ||
| return this.instance.getNumberFormat({ | ||
| maximumFractionDigits: numberOfDecimals, | ||
| minimumFractionDigits: numberOfDecimals, useGrouping: false | ||
| })(this.value); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.trimValue = function (value) { | ||
| if (value > this.max) { | ||
| return this.max; | ||
| } | ||
| if (value < this.min) { | ||
| return this.min; | ||
| } | ||
| return value; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.roundNumber = function (value, precision) { | ||
| var result = value; | ||
| var decimals = precision || 0; | ||
| var result1 = result.toString().split('e'); | ||
| result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals))); | ||
| var result2 = result.toString().split('e'); | ||
| result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals)); | ||
| return Number(result.toFixed(decimals)); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.cancelEvent = function (event) { | ||
| this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true); | ||
| } | ||
| this.modifyText(); | ||
| if (!this.strictMode) { | ||
| this.validateState(); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.modifyText = function () { | ||
| if (this.value || this.value === 0) { | ||
| var value = this.formatNumber(); | ||
| var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value); | ||
| this.setElementValue(elementValue); | ||
| attributes(this.element, { 'aria-valuenow': value }); | ||
| this.hiddenInput.value = value; | ||
| } | ||
| else { | ||
| this.setElementValue(''); | ||
| this.element.removeAttribute('aria-valuenow'); | ||
| this.hiddenInput.value = null; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.setElementValue = function (val, element) { | ||
| Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton); | ||
| }; | ||
| NumericTextBox.prototype.validateState = function () { | ||
| this.isValidState = true; | ||
| if (this.value || this.value === 0) { | ||
| this.isValidState = !(this.value > this.max || this.value < this.min); | ||
| } | ||
| this.checkErrorClass(); | ||
| }; | ||
| NumericTextBox.prototype.formatNumber = function () { | ||
| var numberOfDecimals; | ||
| var currentValue = this.value; | ||
| var decimalPart = currentValue.toString().split('.')[1]; | ||
| numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length; | ||
| if (this.decimals !== null) { | ||
| numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals; | ||
| } | ||
| return this.instance.getNumberFormat({ | ||
| maximumFractionDigits: numberOfDecimals, | ||
| minimumFractionDigits: numberOfDecimals, useGrouping: false | ||
| })(this.value); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.trimValue = function (value) { | ||
| if (value > this.max) { | ||
| return this.max; | ||
| } | ||
| if (value < this.min) { | ||
| return this.min; | ||
| } | ||
| return value; | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.roundNumber = function (value, precision) { | ||
| var result = value; | ||
| var decimals = precision || 0; | ||
| var result1 = result.toString().split('e'); | ||
| result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals))); | ||
| var result2 = result.toString().split('e'); | ||
| result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals)); | ||
| return Number(result.toFixed(decimals)); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.cancelEvent = function (event) { | ||
| event.preventDefault(); | ||
| return false; | ||
| }; | ||
| NumericTextBox.prototype.keyPressHandler = function (event) { | ||
| if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) { | ||
| return true; | ||
| } | ||
| var currentChar = String.fromCharCode(event.which); | ||
| var text = this.element.value; | ||
| text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd); | ||
| if (!this.numericRegex().test(text)) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| return false; | ||
| }; | ||
| NumericTextBox.prototype.keyPressHandler = function (event) { | ||
| if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) { | ||
| return true; | ||
| } | ||
| else { | ||
| return true; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.numericRegex = function () { | ||
| var numericObject = getNumericObject(this.locale); | ||
| var decimalSeparator = getValue('decimal', numericObject); | ||
| var fractionRule = '*'; | ||
| if (decimalSeparator === DECIMALSEPARATOR) { | ||
| decimalSeparator = '\\' + decimalSeparator; | ||
| } | ||
| if (this.decimals === 0) { | ||
| return INTREGEXP; | ||
| } | ||
| if (this.decimals && this.validateDecimalOnType) { | ||
| fractionRule = '{0,' + this.decimals + '}'; | ||
| } | ||
| return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule + | ||
| ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$'); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.mouseWheel = function (event) { | ||
| event.preventDefault(); | ||
| var delta; | ||
| var rawEvent = event; | ||
| if (rawEvent.wheelDelta) { | ||
| delta = rawEvent.wheelDelta / 120; | ||
| } | ||
| else if (rawEvent.detail) { | ||
| delta = -rawEvent.detail / 3; | ||
| } | ||
| if (delta > 0) { | ||
| this.action(INCREMENT, event); | ||
| } | ||
| else if (delta < 0) { | ||
| this.action(DECREMENT, event); | ||
| } | ||
| this.cancelEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.focusIn = function (event) { | ||
| var _this = this; | ||
| if (!this.enabled || this.readonly) { | ||
| return; | ||
| } | ||
| this.isFocused = true; | ||
| removeClass([this.container], ERROR); | ||
| this.prevValue = this.value; | ||
| if ((this.value || this.value === 0)) { | ||
| var formatValue_1 = this.formatNumber(); | ||
| this.setElementValue(formatValue_1); | ||
| if (!this.isPrevFocused) { | ||
| var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0; | ||
| setTimeout(function () { | ||
| _this.element.setSelectionRange(0, formatValue_1.length); | ||
| }, delay); | ||
| } | ||
| var currentChar = String.fromCharCode(event.which); | ||
| var text = this.element.value; | ||
| text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd); | ||
| if (!this.numericRegex().test(text)) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| return false; | ||
| } | ||
| else { | ||
| return true; | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.numericRegex = function () { | ||
| var numericObject = ej2_base_5.getNumericObject(this.locale); | ||
| var decimalSeparator = ej2_base_4.getValue('decimal', numericObject); | ||
| var fractionRule = '*'; | ||
| if (decimalSeparator === DECIMALSEPARATOR) { | ||
| decimalSeparator = '\\' + decimalSeparator; | ||
| } | ||
| if (this.decimals === 0) { | ||
| return INTREGEXP; | ||
| } | ||
| if (this.decimals && this.validateDecimalOnType) { | ||
| fractionRule = '{0,' + this.decimals + '}'; | ||
| } | ||
| return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule + | ||
| ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$'); | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.mouseWheel = function (event) { | ||
| } | ||
| if (!Browser.isDevice) { | ||
| EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.focusOut = function (event) { | ||
| var _this = this; | ||
| if (this.isPrevFocused) { | ||
| event.preventDefault(); | ||
| var delta; | ||
| var rawEvent = event; | ||
| if (rawEvent.wheelDelta) { | ||
| delta = rawEvent.wheelDelta / 120; | ||
| } | ||
| else if (rawEvent.detail) { | ||
| delta = -rawEvent.detail / 3; | ||
| } | ||
| if (delta > 0) { | ||
| this.action(INCREMENT, event); | ||
| } | ||
| else if (delta < 0) { | ||
| this.action(DECREMENT, event); | ||
| } | ||
| this.cancelEvent(event); | ||
| }; | ||
| NumericTextBox.prototype.focusIn = function (event) { | ||
| var _this = this; | ||
| if (!this.enabled || this.readonly) { | ||
| return; | ||
| } | ||
| this.isFocused = true; | ||
| ej2_base_3.removeClass([this.container], ERROR); | ||
| this.prevValue = this.value; | ||
| if ((this.value || this.value === 0)) { | ||
| var formatValue_1 = this.formatNumber(); | ||
| this.setElementValue(formatValue_1); | ||
| if (!this.isPrevFocused) { | ||
| var delay = (ej2_base_1.Browser.isDevice && ej2_base_1.Browser.isIos) ? 600 : 0; | ||
| setTimeout(function () { | ||
| _this.element.setSelectionRange(0, formatValue_1.length); | ||
| }, delay); | ||
| } | ||
| } | ||
| if (!ej2_base_1.Browser.isDevice) { | ||
| ej2_base_1.EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this); | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.focusOut = function (event) { | ||
| var _this = this; | ||
| if (this.isPrevFocused) { | ||
| event.preventDefault(); | ||
| if (ej2_base_1.Browser.isDevice) { | ||
| var value_1 = this.element.value; | ||
| this.element.focus(); | ||
| this.isPrevFocused = false; | ||
| var ele_1 = this.element; | ||
| setTimeout(function () { | ||
| _this.setElementValue(value_1, ele_1); | ||
| }, 200); | ||
| } | ||
| } | ||
| else { | ||
| this.isFocused = false; | ||
| if (!this.element.value.length) { | ||
| this.setProperties({ value: null }, true); | ||
| } | ||
| var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value); | ||
| this.updateValue(parsedInput); | ||
| if (!ej2_base_1.Browser.isDevice) { | ||
| ej2_base_1.EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel); | ||
| } | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.mouseDownOnSpinner = function (event) { | ||
| var _this = this; | ||
| if (this.isFocused) { | ||
| this.isPrevFocused = true; | ||
| event.preventDefault(); | ||
| } | ||
| if (!this.getElementData(event)) { | ||
| return; | ||
| } | ||
| var result = this.getElementData(event); | ||
| var target = event.currentTarget; | ||
| var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT; | ||
| ej2_base_1.EventHandler.add(target, 'mouseleave', this.mouseUpClick, this); | ||
| this.timeOut = setInterval(function () { _this.isCalled = true; _this.action(action, event); }, 150); | ||
| ej2_base_1.EventHandler.add(document, 'mouseup', this.mouseUpClick, this); | ||
| }; | ||
| NumericTextBox.prototype.touchMoveOnSpinner = function (event) { | ||
| var target = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (!(target.classList.contains(SPINICON))) { | ||
| clearInterval(this.timeOut); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.mouseUpOnSpinner = function (event) { | ||
| if (this.isPrevFocused) { | ||
| if (Browser.isDevice) { | ||
| var value_1 = this.element.value; | ||
| this.element.focus(); | ||
| if (!ej2_base_1.Browser.isDevice) { | ||
| this.isPrevFocused = false; | ||
| } | ||
| this.isPrevFocused = false; | ||
| var ele_1 = this.element; | ||
| setTimeout(function () { | ||
| _this.setElementValue(value_1, ele_1); | ||
| }, 200); | ||
| } | ||
| if (!ej2_base_1.Browser.isDevice) { | ||
| event.preventDefault(); | ||
| } | ||
| else { | ||
| this.isFocused = false; | ||
| if (!this.element.value.length) { | ||
| this.setProperties({ value: null }, true); | ||
| } | ||
| if (!this.getElementData(event)) { | ||
| return; | ||
| var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value); | ||
| this.updateValue(parsedInput); | ||
| if (!Browser.isDevice) { | ||
| EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel); | ||
| } | ||
| var target = event.currentTarget; | ||
| var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT; | ||
| ej2_base_1.EventHandler.remove(target, 'mouseleave', this.mouseUpClick); | ||
| if (!this.isCalled) { | ||
| this.action(action, event); | ||
| } | ||
| this.isCalled = false; | ||
| ej2_base_1.EventHandler.remove(document, 'mouseup', this.mouseUpClick); | ||
| }; | ||
| NumericTextBox.prototype.getElementData = function (event) { | ||
| if ((event.which && event.which === 3) || (event.button && event.button === 2) | ||
| || !this.enabled || this.readonly) { | ||
| return false; | ||
| } | ||
| } | ||
| }; | ||
| ; | ||
| NumericTextBox.prototype.mouseDownOnSpinner = function (event) { | ||
| var _this = this; | ||
| if (this.isFocused) { | ||
| this.isPrevFocused = true; | ||
| event.preventDefault(); | ||
| } | ||
| if (!this.getElementData(event)) { | ||
| return; | ||
| } | ||
| var result = this.getElementData(event); | ||
| var target = event.currentTarget; | ||
| var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT; | ||
| EventHandler.add(target, 'mouseleave', this.mouseUpClick, this); | ||
| this.timeOut = setInterval(function () { _this.isCalled = true; _this.action(action, event); }, 150); | ||
| EventHandler.add(document, 'mouseup', this.mouseUpClick, this); | ||
| }; | ||
| NumericTextBox.prototype.touchMoveOnSpinner = function (event) { | ||
| var target = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (!(target.classList.contains(SPINICON))) { | ||
| clearInterval(this.timeOut); | ||
| return true; | ||
| }; | ||
| NumericTextBox.prototype.floatLabelTypeUpdate = function () { | ||
| input_1.Input.removeFloating(this.inputWrapper); | ||
| var hiddenInput = this.hiddenInput; | ||
| this.hiddenInput.remove(); | ||
| input_1.Input.addFloating(this.element, this.floatLabelType, this.placeholder); | ||
| this.container.insertBefore(hiddenInput, this.container.childNodes[1]); | ||
| }; | ||
| NumericTextBox.prototype.mouseUpClick = function (event) { | ||
| event.stopPropagation(); | ||
| clearInterval(this.timeOut); | ||
| this.isCalled = false; | ||
| ej2_base_1.EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick); | ||
| ej2_base_1.EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick); | ||
| }; | ||
| /** | ||
| * Increments the NumericTextBox value with the specified step value. | ||
| * @param {number} step - Specifies the value used to increment the NumericTextBox value. | ||
| * if its not given then numeric value will be incremented based on the step property value. | ||
| */ | ||
| NumericTextBox.prototype.increment = function (step) { | ||
| if (step === void 0) { step = this.step; } | ||
| this.isInteract = false; | ||
| this.changeValue(this.performAction(this.value, step, INCREMENT)); | ||
| this.raiseChangeEvent(); | ||
| }; | ||
| /** | ||
| * Decrements the NumericTextBox value with specified step value. | ||
| * @param {number} step - Specifies the value used to decrement the NumericTextBox value. | ||
| * if its not given then numeric value will be decremented based on the step property value. | ||
| */ | ||
| NumericTextBox.prototype.decrement = function (step) { | ||
| if (step === void 0) { step = this.step; } | ||
| this.isInteract = false; | ||
| this.changeValue(this.performAction(this.value, step, DECREMENT)); | ||
| this.raiseChangeEvent(); | ||
| }; | ||
| /** | ||
| * Removes the component from the DOM and detaches all its related event handlers. | ||
| * Also it maintains the initial input element from the DOM. | ||
| * @method destroy | ||
| * @return {void} | ||
| */ | ||
| NumericTextBox.prototype.destroy = function () { | ||
| this.unwireEvents(); | ||
| ej2_base_3.detach(this.hiddenInput); | ||
| if (this.showSpinButton) { | ||
| this.unwireSpinBtnEvents(); | ||
| ej2_base_3.detach(this.spinUp); | ||
| ej2_base_3.detach(this.spinDown); | ||
| } | ||
| }; | ||
| NumericTextBox.prototype.mouseUpOnSpinner = function (event) { | ||
| if (this.isPrevFocused) { | ||
| this.element.focus(); | ||
| if (!Browser.isDevice) { | ||
| this.isPrevFocused = false; | ||
| } | ||
| this.container.parentElement.appendChild(this.cloneElement); | ||
| ej2_base_3.detach(this.container); | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| /** | ||
| * Returns the value of NumericTextBox with the format applied to the NumericTextBox. | ||
| */ | ||
| NumericTextBox.prototype.getText = function () { | ||
| return this.element.value; | ||
| }; | ||
| /** | ||
| * Gets the properties to be maintained in the persisted state. | ||
| * @return {string} | ||
| */ | ||
| NumericTextBox.prototype.getPersistData = function () { | ||
| var keyEntity = ['value']; | ||
| return this.addOnPersist(keyEntity); | ||
| }; | ||
| /** | ||
| * Calls internally if any of the property value is changed. | ||
| * @private | ||
| */ | ||
| NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| var elementVal; | ||
| for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'width': | ||
| ej2_base_3.setStyleAttribute(this.container, { 'width': ej2_base_4.formatUnit(newProp.width) }); | ||
| break; | ||
| case 'cssClass': | ||
| input_1.Input.setCssClass(newProp.cssClass, [this.container], oldProp.cssClass); | ||
| break; | ||
| case 'enabled': | ||
| input_1.Input.setEnabled(newProp.enabled, this.element); | ||
| break; | ||
| case 'enableRtl': | ||
| input_1.Input.setEnableRtl(newProp.enableRtl, [this.container]); | ||
| break; | ||
| case 'readonly': | ||
| input_1.Input.setReadonly(newProp.readonly, this.element); | ||
| if (this.readonly) { | ||
| ej2_base_3.attributes(this.element, { 'aria-readonly': 'true' }); | ||
| } | ||
| else { | ||
| this.element.removeAttribute('aria-readonly'); | ||
| } | ||
| break; | ||
| case 'placeholder': | ||
| input_1.Input.setPlaceholder(newProp.placeholder, this.element); | ||
| break; | ||
| case 'step': | ||
| this.step = newProp.step; | ||
| this.validateStep(); | ||
| break; | ||
| case 'showSpinButton': | ||
| if (newProp.showSpinButton) { | ||
| this.spinBtnCreation(); | ||
| } | ||
| else { | ||
| ej2_base_3.detach(this.spinUp); | ||
| ej2_base_3.detach(this.spinDown); | ||
| } | ||
| break; | ||
| case 'showClearButton': | ||
| input_1.Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper); | ||
| this.bindClearEvent(); | ||
| break; | ||
| case 'floatLabelType': | ||
| this.floatLabelType = newProp.floatLabelType; | ||
| this.floatLabelTypeUpdate(); | ||
| break; | ||
| case 'value': | ||
| this.updateValue(newProp.value); | ||
| break; | ||
| case 'min': | ||
| case 'max': | ||
| ej2_base_4.setValue(prop, ej2_base_4.getValue(prop, newProp), this); | ||
| this.validateMinMax(); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'strictMode': | ||
| this.strictMode = newProp.strictMode; | ||
| this.updateValue(this.value); | ||
| this.validateState(); | ||
| break; | ||
| case 'locale': | ||
| this.initCultureFunc(); | ||
| this.l10n.setLocale(this.locale); | ||
| if (!ej2_base_4.isNullOrUndefined(this.spinDown)) { | ||
| ej2_base_3.attributes(this.spinDown, { | ||
| 'title': this.l10n.getConstant('decrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('decrementTitle') | ||
| }); | ||
| } | ||
| if (!ej2_base_4.isNullOrUndefined(this.spinUp)) { | ||
| ej2_base_3.attributes(this.spinUp, { | ||
| 'title': this.l10n.getConstant('incrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('incrementTitle') | ||
| }); | ||
| } | ||
| this.updatePlaceholder(); | ||
| input_1.Input.setPlaceholder(this.placeholder, this.element); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'currency': | ||
| var propVal = ej2_base_4.getValue(prop, newProp); | ||
| this.setProperties({ currencyCode: propVal }, true); | ||
| this.updateCurrency(prop, propVal); | ||
| break; | ||
| case 'currencyCode': | ||
| var propValue = ej2_base_4.getValue(prop, newProp); | ||
| this.setProperties({ currency: propValue }, true); | ||
| this.updateCurrency('currency', propValue); | ||
| break; | ||
| case 'format': | ||
| ej2_base_4.setValue(prop, ej2_base_4.getValue(prop, newProp), this); | ||
| this.initCultureInfo(); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'decimals': | ||
| this.decimals = newProp.decimals; | ||
| this.updateValue(this.value); | ||
| } | ||
| } | ||
| if (!Browser.isDevice) { | ||
| event.preventDefault(); | ||
| } | ||
| if (!this.getElementData(event)) { | ||
| return; | ||
| } | ||
| var target = event.currentTarget; | ||
| var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT; | ||
| EventHandler.remove(target, 'mouseleave', this.mouseUpClick); | ||
| if (!this.isCalled) { | ||
| this.action(action, event); | ||
| } | ||
| this.isCalled = false; | ||
| EventHandler.remove(document, 'mouseup', this.mouseUpClick); | ||
| }; | ||
| NumericTextBox.prototype.getElementData = function (event) { | ||
| if ((event.which && event.which === 3) || (event.button && event.button === 2) | ||
| || !this.enabled || this.readonly) { | ||
| return false; | ||
| } | ||
| clearInterval(this.timeOut); | ||
| return true; | ||
| }; | ||
| NumericTextBox.prototype.floatLabelTypeUpdate = function () { | ||
| Input.removeFloating(this.inputWrapper); | ||
| var hiddenInput = this.hiddenInput; | ||
| this.hiddenInput.remove(); | ||
| Input.addFloating(this.element, this.floatLabelType, this.placeholder); | ||
| this.container.insertBefore(hiddenInput, this.container.childNodes[1]); | ||
| }; | ||
| NumericTextBox.prototype.mouseUpClick = function (event) { | ||
| event.stopPropagation(); | ||
| clearInterval(this.timeOut); | ||
| this.isCalled = false; | ||
| EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick); | ||
| EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick); | ||
| }; | ||
| /** | ||
| * Increments the NumericTextBox value with the specified step value. | ||
| * @param {number} step - Specifies the value used to increment the NumericTextBox value. | ||
| * if its not given then numeric value will be incremented based on the step property value. | ||
| */ | ||
| NumericTextBox.prototype.increment = function (step) { | ||
| if (step === void 0) { step = this.step; } | ||
| this.isInteract = false; | ||
| this.changeValue(this.performAction(this.value, step, INCREMENT)); | ||
| this.raiseChangeEvent(); | ||
| }; | ||
| /** | ||
| * Decrements the NumericTextBox value with specified step value. | ||
| * @param {number} step - Specifies the value used to decrement the NumericTextBox value. | ||
| * if its not given then numeric value will be decremented based on the step property value. | ||
| */ | ||
| NumericTextBox.prototype.decrement = function (step) { | ||
| if (step === void 0) { step = this.step; } | ||
| this.isInteract = false; | ||
| this.changeValue(this.performAction(this.value, step, DECREMENT)); | ||
| this.raiseChangeEvent(); | ||
| }; | ||
| /** | ||
| * Removes the component from the DOM and detaches all its related event handlers. | ||
| * Also it maintains the initial input element from the DOM. | ||
| * @method destroy | ||
| * @return {void} | ||
| */ | ||
| NumericTextBox.prototype.destroy = function () { | ||
| this.unwireEvents(); | ||
| detach(this.hiddenInput); | ||
| if (this.showSpinButton) { | ||
| this.unwireSpinBtnEvents(); | ||
| detach(this.spinUp); | ||
| detach(this.spinDown); | ||
| } | ||
| this.container.parentElement.appendChild(this.cloneElement); | ||
| detach(this.container); | ||
| _super.prototype.destroy.call(this); | ||
| }; | ||
| /** | ||
| * Returns the value of NumericTextBox with the format applied to the NumericTextBox. | ||
| */ | ||
| NumericTextBox.prototype.getText = function () { | ||
| return this.element.value; | ||
| }; | ||
| /** | ||
| * Gets the properties to be maintained in the persisted state. | ||
| * @return {string} | ||
| */ | ||
| NumericTextBox.prototype.getPersistData = function () { | ||
| var keyEntity = ['value']; | ||
| return this.addOnPersist(keyEntity); | ||
| }; | ||
| /** | ||
| * Calls internally if any of the property value is changed. | ||
| * @private | ||
| */ | ||
| NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) { | ||
| var elementVal; | ||
| for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) { | ||
| var prop = _a[_i]; | ||
| switch (prop) { | ||
| case 'width': | ||
| setStyleAttribute(this.container, { 'width': formatUnit(newProp.width) }); | ||
| break; | ||
| case 'cssClass': | ||
| Input.setCssClass(newProp.cssClass, [this.container], oldProp.cssClass); | ||
| break; | ||
| case 'enabled': | ||
| Input.setEnabled(newProp.enabled, this.element); | ||
| break; | ||
| case 'enableRtl': | ||
| Input.setEnableRtl(newProp.enableRtl, [this.container]); | ||
| break; | ||
| case 'readonly': | ||
| Input.setReadonly(newProp.readonly, this.element); | ||
| if (this.readonly) { | ||
| attributes(this.element, { 'aria-readonly': 'true' }); | ||
| } | ||
| else { | ||
| this.element.removeAttribute('aria-readonly'); | ||
| } | ||
| break; | ||
| case 'placeholder': | ||
| Input.setPlaceholder(newProp.placeholder, this.element); | ||
| break; | ||
| case 'step': | ||
| this.step = newProp.step; | ||
| this.validateStep(); | ||
| break; | ||
| case 'showSpinButton': | ||
| if (newProp.showSpinButton) { | ||
| this.spinBtnCreation(); | ||
| } | ||
| else { | ||
| detach(this.spinUp); | ||
| detach(this.spinDown); | ||
| } | ||
| break; | ||
| case 'showClearButton': | ||
| Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper); | ||
| this.bindClearEvent(); | ||
| break; | ||
| case 'floatLabelType': | ||
| this.floatLabelType = newProp.floatLabelType; | ||
| this.floatLabelTypeUpdate(); | ||
| break; | ||
| case 'value': | ||
| this.updateValue(newProp.value); | ||
| break; | ||
| case 'min': | ||
| case 'max': | ||
| setValue(prop, getValue(prop, newProp), this); | ||
| this.validateMinMax(); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'strictMode': | ||
| this.strictMode = newProp.strictMode; | ||
| this.updateValue(this.value); | ||
| this.validateState(); | ||
| break; | ||
| case 'locale': | ||
| this.initCultureFunc(); | ||
| this.l10n.setLocale(this.locale); | ||
| if (!isNullOrUndefined(this.spinDown)) { | ||
| attributes(this.spinDown, { | ||
| 'title': this.l10n.getConstant('decrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('decrementTitle') | ||
| }); | ||
| } | ||
| if (!isNullOrUndefined(this.spinUp)) { | ||
| attributes(this.spinUp, { | ||
| 'title': this.l10n.getConstant('incrementTitle'), | ||
| 'aria-label': this.l10n.getConstant('incrementTitle') | ||
| }); | ||
| } | ||
| this.updatePlaceholder(); | ||
| Input.setPlaceholder(this.placeholder, this.element); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'currency': | ||
| var propVal = getValue(prop, newProp); | ||
| this.setProperties({ currencyCode: propVal }, true); | ||
| this.updateCurrency(prop, propVal); | ||
| break; | ||
| case 'currencyCode': | ||
| var propValue = getValue(prop, newProp); | ||
| this.setProperties({ currency: propValue }, true); | ||
| this.updateCurrency('currency', propValue); | ||
| break; | ||
| case 'format': | ||
| setValue(prop, getValue(prop, newProp), this); | ||
| this.initCultureInfo(); | ||
| this.updateValue(this.value); | ||
| break; | ||
| case 'decimals': | ||
| this.decimals = newProp.decimals; | ||
| this.updateValue(this.value); | ||
| } | ||
| }; | ||
| /** | ||
| * Gets the component name | ||
| * @private | ||
| */ | ||
| NumericTextBox.prototype.getModuleName = function () { | ||
| return 'numerictextbox'; | ||
| }; | ||
| __decorate([ | ||
| ej2_base_1.Property('') | ||
| ], NumericTextBox.prototype, "cssClass", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "value", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(-(Number.MAX_VALUE)) | ||
| ], NumericTextBox.prototype, "min", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(Number.MAX_VALUE) | ||
| ], NumericTextBox.prototype, "max", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(1) | ||
| ], NumericTextBox.prototype, "step", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "width", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(true) | ||
| ], NumericTextBox.prototype, "showSpinButton", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], NumericTextBox.prototype, "readonly", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(true) | ||
| ], NumericTextBox.prototype, "enabled", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], NumericTextBox.prototype, "enableRtl", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], NumericTextBox.prototype, "showClearButton", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], NumericTextBox.prototype, "enablePersistence", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property('n2') | ||
| ], NumericTextBox.prototype, "format", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "decimals", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "currency", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(null) | ||
| ], NumericTextBox.prototype, "currencyCode", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(true) | ||
| ], NumericTextBox.prototype, "strictMode", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property(false) | ||
| ], NumericTextBox.prototype, "validateDecimalOnType", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Property('Never') | ||
| ], NumericTextBox.prototype, "floatLabelType", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], NumericTextBox.prototype, "created", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], NumericTextBox.prototype, "destroyed", void 0); | ||
| __decorate([ | ||
| ej2_base_1.Event() | ||
| ], NumericTextBox.prototype, "change", void 0); | ||
| NumericTextBox = __decorate([ | ||
| ej2_base_2.NotifyPropertyChanges | ||
| ], NumericTextBox); | ||
| return NumericTextBox; | ||
| }(ej2_base_1.Component)); | ||
| exports.NumericTextBox = NumericTextBox; | ||
| }); | ||
| } | ||
| }; | ||
| /** | ||
| * Gets the component name | ||
| * @private | ||
| */ | ||
| NumericTextBox.prototype.getModuleName = function () { | ||
| return 'numerictextbox'; | ||
| }; | ||
| __decorate([ | ||
| Property('') | ||
| ], NumericTextBox.prototype, "cssClass", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "value", void 0); | ||
| __decorate([ | ||
| Property(-(Number.MAX_VALUE)) | ||
| ], NumericTextBox.prototype, "min", void 0); | ||
| __decorate([ | ||
| Property(Number.MAX_VALUE) | ||
| ], NumericTextBox.prototype, "max", void 0); | ||
| __decorate([ | ||
| Property(1) | ||
| ], NumericTextBox.prototype, "step", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "width", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "placeholder", void 0); | ||
| __decorate([ | ||
| Property(true) | ||
| ], NumericTextBox.prototype, "showSpinButton", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], NumericTextBox.prototype, "readonly", void 0); | ||
| __decorate([ | ||
| Property(true) | ||
| ], NumericTextBox.prototype, "enabled", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], NumericTextBox.prototype, "enableRtl", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], NumericTextBox.prototype, "showClearButton", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], NumericTextBox.prototype, "enablePersistence", void 0); | ||
| __decorate([ | ||
| Property('n2') | ||
| ], NumericTextBox.prototype, "format", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "decimals", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "currency", void 0); | ||
| __decorate([ | ||
| Property(null) | ||
| ], NumericTextBox.prototype, "currencyCode", void 0); | ||
| __decorate([ | ||
| Property(true) | ||
| ], NumericTextBox.prototype, "strictMode", void 0); | ||
| __decorate([ | ||
| Property(false) | ||
| ], NumericTextBox.prototype, "validateDecimalOnType", void 0); | ||
| __decorate([ | ||
| Property('Never') | ||
| ], NumericTextBox.prototype, "floatLabelType", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], NumericTextBox.prototype, "created", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], NumericTextBox.prototype, "destroyed", void 0); | ||
| __decorate([ | ||
| Event() | ||
| ], NumericTextBox.prototype, "change", void 0); | ||
| NumericTextBox = __decorate([ | ||
| NotifyPropertyChanges | ||
| ], NumericTextBox); | ||
| return NumericTextBox; | ||
| }(Component)); | ||
| export { NumericTextBox }; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./slider"], function (require, exports, slider_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * Slider modules | ||
| */ | ||
| __export(slider_1); | ||
| }); | ||
| /** | ||
| * Slider modules | ||
| */ | ||
| export * from './slider'; |
@@ -145,2 +145,4 @@ import { Component, EventHandler, Property, Event, EmitType, Complex, classList } from '@syncfusion/ej2-base';import { L10n, Internationalization, NumberFormatOptions } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';import { Tooltip, Position, TooltipEventArgs } from '@syncfusion/ej2-popups'; | ||
| * The value should be specified in array of number when render Slider type as range. | ||
| * | ||
| * {% codeBlock src="slider/value-api/index.ts" %}{% endcodeBlock %} | ||
| * @default null | ||
@@ -163,2 +165,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/step-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 1 | ||
@@ -170,2 +174,4 @@ */ | ||
| * It sets the minimum value of Slider Component | ||
| * | ||
| * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 0 | ||
@@ -177,2 +183,4 @@ */ | ||
| * It sets the maximum value of Slider Component | ||
| * | ||
| * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 100 | ||
@@ -203,2 +211,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/ticks-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { placement: 'before' } | ||
@@ -213,2 +223,4 @@ */ | ||
| * to know more about this property with demo | ||
| * | ||
| * {% codeBlock src="slider/limits-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { enabled: false } | ||
@@ -232,2 +244,4 @@ */ | ||
| * It is used to denote the slider tooltip and it's position. | ||
| * | ||
| * {% codeBlock src="slider/tooltip-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { placement: 'Before', isVisible: false, showOn: 'Focus', format: null } | ||
@@ -243,2 +257,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/showButtons-api/index.ts" %}{% endcodeBlock %} | ||
| * @default false | ||
@@ -245,0 +261,0 @@ */ |
@@ -270,2 +270,4 @@ import { Component, EmitType } from '@syncfusion/ej2-base'; | ||
| * The value should be specified in array of number when render Slider type as range. | ||
| * | ||
| * {% codeBlock src="slider/value-api/index.ts" %}{% endcodeBlock %} | ||
| * @default null | ||
@@ -286,2 +288,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/step-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 1 | ||
@@ -292,2 +296,4 @@ */ | ||
| * It sets the minimum value of Slider Component | ||
| * | ||
| * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 0 | ||
@@ -298,2 +304,4 @@ */ | ||
| * It sets the maximum value of Slider Component | ||
| * | ||
| * {% codeBlock src="slider/min-max-api/index.ts" %}{% endcodeBlock %} | ||
| * @default 100 | ||
@@ -321,2 +329,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/ticks-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { placement: 'before' } | ||
@@ -330,2 +340,4 @@ */ | ||
| * to know more about this property with demo | ||
| * | ||
| * {% codeBlock src="slider/limits-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { enabled: false } | ||
@@ -346,2 +358,4 @@ */ | ||
| * It is used to denote the slider tooltip and it's position. | ||
| * | ||
| * {% codeBlock src="slider/tooltip-api/index.ts" %}{% endcodeBlock %} | ||
| * @default { placement: 'Before', isVisible: false, showOn: 'Focus', format: null } | ||
@@ -356,2 +370,4 @@ */ | ||
| * to know more about this property with demo. | ||
| * | ||
| * {% codeBlock src="slider/showButtons-api/index.ts" %}{% endcodeBlock %} | ||
| * @default false | ||
@@ -358,0 +374,0 @@ */ |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./uploader"], function (require, exports, uploader_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * Uploader modules | ||
| */ | ||
| __export(uploader_1); | ||
| }); | ||
| /** | ||
| * Uploader modules | ||
| */ | ||
| export * from './uploader'; |
@@ -1,2 +0,2 @@ | ||
| import { Component, Property, Event, EmitType, EventHandler, classList, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, createElement, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups'; | ||
| import { Component, Property, Event, EmitType, EventHandler, classList, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, append, Animation } from '@syncfusion/ej2-base';import { addClass, removeClass, KeyboardEvents, KeyboardEventArgs, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';import { Collection, Complex, Browser, Ajax, BeforeSendEventArgs } from '@syncfusion/ej2-base';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups'; | ||
| import {SelectedEventArgs,RemovingEventArgs,ClearingEventArgs} from "./uploader"; | ||
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base'; |
@@ -1,11 +0,4 @@ | ||
| define(["require", "exports", "./src/uploader/index"], function (require, exports, index_1) { | ||
| "use strict"; | ||
| function __export(m) { | ||
| for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; | ||
| } | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| /** | ||
| * uploader | ||
| */ | ||
| __export(index_1); | ||
| }); | ||
| /** | ||
| * uploader | ||
| */ | ||
| export * from './src/uploader/index'; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.39%
20211773
- Number of package files
- increased by1.12%
181
- Lines of code
- increased by0.63%
182570
- Number of lines in readme file
- increased by1675%
142