@syncfusion/ej2-inputs
Advanced tools
Comparing version 16.1.48 to 16.2.41
122
CHANGELOG.md
@@ -5,102 +5,138 @@ # Changelog | ||
### Input | ||
### Common | ||
#### Bug Fixes | ||
#### Breaking Changes | ||
- Typing issues resolved in `Focus` and `Blur` event arguments. | ||
- The splitbuttons package is used by ColorPicker component, so the splitbuttons package is a dependency for the inputs package. | ||
## 16.1.45 (2018-05-23) | ||
### Form-validator | ||
### Input | ||
#### New Features | ||
#### Bug Fixes | ||
- Provided option to validate the hidden element by using `validateHidden` attribute. | ||
- Added `Focus` and `Blur` event arguments. | ||
### MaskedTextBox | ||
## 16.1.40 (2018-05-08) | ||
#### New Features | ||
### MaskedTextBox | ||
- Provided option to show/hide clear button to reset the value in MaskedTextBox | ||
#### Bug Fixes | ||
### NumericTextBox | ||
- While copying a text and hold the “Ctrl + v” on the MaskedTextBox with number mask, value is not updating properly | ||
along with script error issue has been fixed. | ||
#### New Features | ||
## 16.1.38 (2018-05-02) | ||
- Provided option to show/hide clear button to reset the value in NumericTextBox. | ||
- Prevented to type unwanted text and symbols in NumericTextBox. | ||
### Uploader | ||
### Slider | ||
#### Bug Fixes | ||
#### New Features | ||
- Provided option to customize request header on trigger `uploading` and `removing` events. | ||
- Limits implemented to limit movement interval of min and max values to certain range. | ||
- Drag interval implemented to interact with the range slider by dragging the range. | ||
- Provided to support custom value arrays. | ||
- Bootstrap theme tooltip appearance improved by enabling tooltip pointer. | ||
- Provided option to add additional data in `removing` event. | ||
#### Breaking Changes | ||
### NumericTextBox | ||
- The following API namings are renamed. | ||
#### Bug Fixes | ||
| Existing API Name | New API Name | | ||
| :-------------: |:-------------: | | ||
| readOnly | readonly | | ||
- Now native events triggered properly in Angular NumericTextBox component. | ||
### ColorPicker | ||
## 16.1.37 (2018-04-24) | ||
Color picker is a user interface that is used to select and adjust color values. | ||
### NumericTextBox | ||
- **Color specification**: Supports `Red Green Blue`, `Hue Saturation Value` and `Hex` codes. | ||
#### Features | ||
- **Mode**: Supports `Picker` and `Palette` mode. | ||
- Provided clear button option in NumericTextBox. | ||
- **Inline**: Supports inline type rendering of color picker. | ||
- **Custom palettes**: Allows you to customize palettes and supports multiple palette groups rendering. | ||
- **Opacity**: Allows to set and change the `opacity` of the selected color. | ||
- **Accessibility**: Built-in accessibility features to access color picker using the keyboard, screen readers, or other assistive technology devices. | ||
### Uploader | ||
#### New Features | ||
- Added `chunked upload` support to upload large files asynchronously with `pause` and `resume` options. | ||
- Support has been provided to resume automatically on failed chunk up to `maximum retry` options. | ||
- Included option to handle `retry upload` through UI (User Interface). | ||
- Support to `cancel the request` while uploading a file is added. | ||
#### Bug Fixes | ||
- NumericTextBox is now aligned properly in inline element when `showSpinButton` property disabled. | ||
- Provided option to customize request header on trigger uploading and removing events. | ||
- Provided option to add additional data in removing event. | ||
- The issue with rendering Uploader component in internet explorer browser has been fixed. | ||
- The issue with submitting single file upload's value has been fixed. | ||
## 16.1.35 (2018-04-17) | ||
### TextBox | ||
### MaskedTextBox | ||
#### New Features | ||
- The clear button can be enabled/disabled dynamically through `setClearButton` method. | ||
#### Bug Fixes | ||
- While dynamically changing the MaskedTextBox value as null, value not updated properly issue is fixed. | ||
- Theme compatibility issue resolved for CSS Input component. | ||
### Uploader | ||
## 16.1.45 (2018-05-23) | ||
### Input | ||
#### Bug Fixes | ||
- The script issue with removing uploaded files has been fixed. | ||
- Added `Focus` and `Blur` event arguments. | ||
## 16.1.34 (2018-04-10) | ||
## 16.1.40 (2018-05-08) | ||
### FormValidator | ||
### MaskedTextBox | ||
#### Bug Fixes | ||
- Resolved multiple form validation issue. | ||
- While copying a text and hold the “Ctrl + v” on the MaskedTextBox with number mask, value is not updating properly | ||
along with script error issue has been fixed. | ||
## 16.1.29 (2018-03-13) | ||
## 16.1.38 (2018-05-02) | ||
### Input | ||
### NumericTextBox | ||
#### Features | ||
#### Bug Fixes | ||
- The clear button can be enabled/disabled dynamically through `setClearButton` method. | ||
- Now native events triggered properly in Angular NumericTextBox component. | ||
## 16.1.28-preview (2018-03-09) | ||
## 16.1.37 (2018-04-24) | ||
### NumericTextBox | ||
#### New Features | ||
- Provided clear button option in NumericTextBox. | ||
#### Bug Fixes | ||
- In NumericTextBox, unwanted “change” events has been prevented from triggering. | ||
- NumericTextBox is now aligned properly in inline element when `showSpinButton` property disabled. | ||
### Uploader | ||
## 16.1.35 (2018-04-17) | ||
### MaskedTextBox | ||
#### Bug Fixes | ||
- The issue with rendering Uploader component in internet explorer browser has been fixed. | ||
- While dynamically changing the MaskedTextBox value as null, value not updated properly issue is fixed. | ||
### Input | ||
## 16.1.28 (2018-03-09) | ||
### NumericTextBox | ||
#### Bug Fixes | ||
- Theme compatibility issue resolved for CSS Input component. | ||
- In NumericTextBox, unwanted “change” events has been prevented from triggering. | ||
@@ -107,0 +143,0 @@ ## 16.1.24 (2018-02-22) |
@@ -1,10 +0,1 @@ | ||
/*! | ||
* filename: index.d.ts | ||
* version : 16.1.48 | ||
* 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'; | ||
@@ -14,2 +5,3 @@ import * as _base from '@syncfusion/ej2-base'; | ||
import * as _popups from '@syncfusion/ej2-popups'; | ||
import * as _splitbuttons from '@syncfusion/ej2-splitbuttons'; | ||
@@ -21,2 +13,3 @@ export declare namespace ej { | ||
const popups: typeof _popups; | ||
const splitbuttons: typeof _splitbuttons; | ||
} |
{ | ||
"name": "@syncfusion/ej2-inputs", | ||
"version": "16.1.48", | ||
"version": "16.2.41", | ||
"description": "Essential JS 2 Input Components", | ||
@@ -11,5 +11,6 @@ "author": "Syncfusion Inc.", | ||
"dependencies": { | ||
"@syncfusion/ej2-base": "~16.1.38", | ||
"@syncfusion/ej2-buttons": "~16.1.48", | ||
"@syncfusion/ej2-popups": "~16.1.47" | ||
"@syncfusion/ej2-base": "~16.2.41", | ||
"@syncfusion/ej2-buttons": "~16.2.41", | ||
"@syncfusion/ej2-popups": "~16.2.41", | ||
"@syncfusion/ej2-splitbuttons": "~16.2.41" | ||
}, | ||
@@ -45,3 +46,4 @@ "devDependencies": { | ||
"number formatting", | ||
"number input" | ||
"number input", | ||
"colorpicker" | ||
], | ||
@@ -48,0 +50,0 @@ "repository": { |
@@ -7,2 +7,3 @@ 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. | ||
* [MaskedTextBox Demos](http://ej2.syncfusion.com/demos/#/maskedtextbox/default.html) | ||
* [Uploader](http://ej2.syncfusion.com/demos/#/uploader/default.html) | ||
* [Uploader](http://ej2.syncfusion.com/demos/#/uploader/default.html) | ||
* [ColorPicker](http://ej2.syncfusion.com/demos/#/colorpicker/default.html) |
@@ -232,7 +232,7 @@ var __extends = (this && this.__extends) || (function () { | ||
FormValidator.prototype.createHTML5Rules = function () { | ||
var defRules = ['required', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits', 'pattern', | ||
'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min', | ||
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 = ['email', 'url', 'date', 'number', 'tel']; | ||
var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel']; | ||
for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) { | ||
@@ -429,42 +429,63 @@ var input = _a[_i]; | ||
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); | ||
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'); | ||
if (!this.infoElement) { | ||
this.createErrorElement(name, errorRule.message, this.inputElement); | ||
if (hPos !== -1) { | ||
hiddenType = true; | ||
} | ||
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.trigger('validationComplete', eventArgs); | ||
// Set aria-required to required rule elements | ||
if (rule === 'required') { | ||
this.inputElement.setAttribute('aria-required', 'true'); | ||
} | ||
break; | ||
} | ||
else { | ||
this.showMessage(errorRule); | ||
this.hideMessage(name); | ||
eventArgs.status = 'success'; | ||
this.trigger('validationComplete', eventArgs); | ||
} | ||
eventArgs.errorElement = this.infoElement; | ||
eventArgs.status = 'failure'; | ||
this.inputElement.classList.add(this.errorClass); | ||
this.inputElement.classList.remove(this.validClass); | ||
this.trigger('validationComplete', eventArgs); | ||
// Set aria-required to required rule elements | ||
if (rule === 'required') { | ||
this.inputElement.setAttribute('aria-required', 'true'); | ||
} | ||
break; | ||
} | ||
else { | ||
this.hideMessage(name); | ||
eventArgs.status = 'success'; | ||
this.trigger('validationComplete', eventArgs); | ||
} | ||
} | ||
else { | ||
return; | ||
} | ||
}; | ||
@@ -471,0 +492,0 @@ // Check the input element whether it's value satisfy the validation rule or not |
@@ -10,1 +10,2 @@ /** | ||
export * from './uploader/index'; | ||
export * from './color-picker/index'; |
@@ -1,2 +0,2 @@ | ||
define(["require", "exports", "./numerictextbox/index", "./maskedtextbox/index", "./input/index", "./slider/index", "./form-validator/index", "./uploader/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5, index_6) { | ||
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"; | ||
@@ -16,2 +16,3 @@ function __export(m) { | ||
__export(index_6); | ||
__export(index_7); | ||
}); |
@@ -108,4 +108,15 @@ /** | ||
function removeFloating(input: InputObject): void; | ||
function addFloating(input: HTMLInputElement, type: FloatLabelType, placeholder: string): void; | ||
function addFloating(input: HTMLInputElement, type: FloatLabelType | string, placeholder: string): void; | ||
/** | ||
* 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: boolean, inputObj: InputObject[]): void; | ||
/** | ||
* Creates a new span element with the given icons added and append it in container element. | ||
@@ -161,3 +172,3 @@ * ``` | ||
*/ | ||
floatLabelType?: FloatLabelType; | ||
floatLabelType?: FloatLabelType | string; | ||
/** | ||
@@ -213,3 +224,3 @@ * ``` | ||
*/ | ||
floatLabelType?: FloatLabelType; | ||
floatLabelType?: FloatLabelType | string; | ||
/** | ||
@@ -216,0 +227,0 @@ * Sets the change event mapping function to input. |
@@ -528,2 +528,53 @@ define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) { | ||
/** | ||
* 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); | ||
} | ||
} | ||
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'); | ||
} | ||
} | ||
function _onMouseDownRipple() { | ||
var ele = this; | ||
var parentEle = this.parentElement; | ||
while (!parentEle.classList.contains('e-input-group')) { | ||
parentEle = parentEle.parentElement; | ||
} | ||
_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. | ||
@@ -539,2 +590,3 @@ * ``` | ||
var button = ej2_base_1.createElement('span', { className: iconClass }); | ||
button.classList.add('e-input-group-icon'); | ||
container.appendChild(button); | ||
@@ -544,11 +596,3 @@ if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) { | ||
} | ||
button.addEventListener('mousedown', function () { | ||
if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) { | ||
this.classList.add('e-input-btn-ripple'); | ||
} | ||
}); | ||
button.addEventListener('mouseup', function () { | ||
var ele = this; | ||
setTimeout(function () { ele.classList.remove('e-input-btn-ripple'); }, 500); | ||
}); | ||
_internalRipple(true, container, button); | ||
return button; | ||
@@ -555,0 +599,0 @@ } |
@@ -30,2 +30,7 @@ /** | ||
* @hidden | ||
* To bind required events to the MaskedTextBox clearButton. | ||
*/ | ||
export declare function bindClearEvent(): void; | ||
/** | ||
* @hidden | ||
* To get masked value from the MaskedTextBox. | ||
@@ -38,3 +43,3 @@ */ | ||
*/ | ||
export declare function strippedValue(element: HTMLInputElement): string; | ||
export declare function strippedValue(element: HTMLInputElement, maskValues: string): string; | ||
export declare function maskInputFocusHandler(event: KeyboardEvent): void; | ||
@@ -41,0 +46,0 @@ export declare function maskInputBlurHandler(event: KeyboardEvent): void; |
@@ -30,4 +30,6 @@ define(["require", "exports", "@syncfusion/ej2-base", "../../input/input"], function (require, exports, ej2_base_1, input_1) { | ||
function createMask() { | ||
ej2_base_1.attributes(this.element, { 'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', | ||
'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' }); | ||
ej2_base_1.attributes(this.element, { | ||
'role': 'textbox', 'autocomplete': 'off', 'autocorrect': 'off', 'autocapitalize': 'off', | ||
'spellcheck': 'false', 'aria-live': 'assertive', 'aria-valuenow': '' | ||
}); | ||
if (this.mask) { | ||
@@ -131,2 +133,3 @@ var splitMask = this.mask.split(']'); | ||
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); | ||
@@ -137,2 +140,5 @@ ej2_base_1.EventHandler.add(this.element, 'blur', maskInputBlurHandler, this); | ||
ej2_base_1.EventHandler.add(this.element, 'drop', maskInputDropHandler, this); | ||
if (this.enabled) { | ||
bindClearEvent.call(this); | ||
} | ||
} | ||
@@ -148,2 +154,3 @@ exports.wireEvents = wireEvents; | ||
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); | ||
@@ -157,2 +164,27 @@ ej2_base_1.EventHandler.remove(this.element, 'blur', maskInputBlurHandler); | ||
* @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); | ||
} | ||
} | ||
exports.bindClearEvent = bindClearEvent; | ||
function resetHandler(e) { | ||
e.preventDefault(); | ||
if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) { | ||
clear.call(this, e); | ||
} | ||
} | ||
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. | ||
@@ -168,7 +200,9 @@ */ | ||
*/ | ||
function strippedValue(element) { | ||
function strippedValue(element, maskValues) { | ||
var value = ''; | ||
var k = 0; | ||
var checkMask = false; | ||
if (!ej2_base_1.isNullOrUndefined(element) && !ej2_base_1.isNullOrUndefined(this) && element.value !== this.promptMask) { | ||
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++) { | ||
@@ -184,3 +218,3 @@ if (checkMask) { | ||
if (!checkMask) { | ||
if ((element.value[i] !== this.promptChar) && (!ej2_base_1.isNullOrUndefined(this.customRegExpCollec[k]) && | ||
if ((maskValue[i] !== this.promptChar) && (!ej2_base_1.isNullOrUndefined(this.customRegExpCollec[k]) && | ||
((!ej2_base_1.isNullOrUndefined(this.regExpCollec[this.customRegExpCollec[k]])) || | ||
@@ -190,4 +224,4 @@ (this.customRegExpCollec[k].length > 2 && this.customRegExpCollec[k][0] === '[' && | ||
(!ej2_base_1.isNullOrUndefined(this.customCharacters) && | ||
(!ej2_base_1.isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (element.value !== '')) { | ||
value += element.value[i]; | ||
(!ej2_base_1.isNullOrUndefined(this.customCharacters[this.customRegExpCollec[k]]))))) && (maskValue !== '')) { | ||
value += maskValue[i]; | ||
} | ||
@@ -198,2 +232,5 @@ } | ||
} | ||
if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
value = maskValue; | ||
} | ||
return value; | ||
@@ -224,12 +261,17 @@ } | ||
this.isFocus = true; | ||
if (this.placeholder && this.element.value === '') { | ||
if (this.element.value === '') { | ||
setElementValue.call(this, this.promptMask); | ||
} | ||
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); | ||
}, 1); | ||
}, delay); | ||
} | ||
else { | ||
this.element.setSelectionRange(this.focusEventArgs.selectionStart, this.focusEventArgs.selectionEnd); | ||
} | ||
} | ||
@@ -258,4 +300,5 @@ } | ||
setElementValue.call(this, ''); | ||
this._callPasteHandler = true; | ||
setTimeout(function () { | ||
var value = _this.element.value; | ||
var value = _this.element.value.replace(/ /g, ''); | ||
if (_this.redoCollec.length > 0 && _this.redoCollec[0].value === _this.element.value) { | ||
@@ -274,2 +317,3 @@ value = strippedValue.call(_this, _this.element); | ||
_this.maskKeyPress = false; | ||
_this._callPasteHandler = false; | ||
if (_this.element.value === oldValue_1) { | ||
@@ -305,5 +349,42 @@ var i_1 = 0; | ||
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); | ||
} | ||
} | ||
} | ||
function maskInputKeyDownHandler(event) { | ||
var _this = this; | ||
if (this.mask) { | ||
var value = this; | ||
if (event.keyCode !== 229) { | ||
@@ -315,7 +396,2 @@ if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) { | ||
} | ||
else { | ||
setTimeout(function () { | ||
removeMaskInputValues.call(_this, event); | ||
}, 0); | ||
} | ||
var startValue = this.element.value; | ||
@@ -558,2 +634,9 @@ if (event.ctrlKey && (event.keyCode === 89 || event.keyCode === 90)) { | ||
} | ||
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); | ||
} | ||
} | ||
@@ -820,3 +903,3 @@ function mobileSwipeCheck(key) { | ||
var labelElement = this.element.parentNode.querySelector('.e-float-text'); | ||
if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && | ||
if (this.element.value === this.promptMask && this.floatLabelType === 'Auto' && this.placeholder && | ||
!ej2_base_1.isNullOrUndefined(labelElement) && labelElement.classList.contains(TOPLABEL) && !this.isFocus) { | ||
@@ -828,2 +911,5 @@ ej2_base_1.removeClass([labelElement], TOPLABEL); | ||
} | ||
if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
setElementValue.call(this, this.value); | ||
} | ||
} | ||
@@ -836,6 +922,15 @@ exports.setMaskValue = setMaskValue; | ||
function setElementValue(val, element) { | ||
if (!this.isFocus && this.floatLabelType === 'Auto' && ej2_base_1.isNullOrUndefined(this.value)) { | ||
if (!this.isFocus && this.floatLabelType === 'Auto' && this.placeholder && ej2_base_1.isNullOrUndefined(this.value)) { | ||
val = ''; | ||
} | ||
input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType); | ||
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'); | ||
} | ||
} | ||
else { | ||
input_1.Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton); | ||
} | ||
} | ||
@@ -842,0 +937,0 @@ exports.setElementValue = setElementValue; |
@@ -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 } 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 { 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"; | ||
@@ -49,2 +49,8 @@ import {ComponentModel} from '@syncfusion/ej2-base'; | ||
/** | ||
* Specifies whether to show or hide the clear icon. | ||
* @default false | ||
*/ | ||
showClearButton?: boolean; | ||
/** | ||
* Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page. | ||
@@ -69,3 +75,3 @@ * If enabled, the 'value' state will be persisted. | ||
* For more information on mask, refer to | ||
* [mask](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#standard-mask-elements). | ||
* [mask](./mask-configuration.html#standard-mask-elements). | ||
* * If the mask value is empty, the MaskedTextBox will behave as an input element with text type. | ||
@@ -80,3 +86,3 @@ * @default null | ||
* For more information on prompt-character, refer to | ||
* [prompt-character](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#prompt-character). | ||
* [prompt-character](./mask-configuration.html#prompt-character). | ||
* @default _ | ||
@@ -118,3 +124,3 @@ */ | ||
* For more information on customCharacters, refer to | ||
* [customCharacters](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#custom-characters). | ||
* [customCharacters](./mask-configuration.html#custom-characters). | ||
* @default null | ||
@@ -121,0 +127,0 @@ */ |
@@ -68,2 +68,7 @@ import { Component, EmitType, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base'; | ||
/** | ||
* Specifies whether to show or hide the clear icon. | ||
* @default false | ||
*/ | ||
showClearButton: boolean; | ||
/** | ||
* Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page. | ||
@@ -86,3 +91,3 @@ * If enabled, the 'value' state will be persisted. | ||
* For more information on mask, refer to | ||
* [mask](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#standard-mask-elements). | ||
* [mask](./mask-configuration.html#standard-mask-elements). | ||
* * If the mask value is empty, the MaskedTextBox will behave as an input element with text type. | ||
@@ -96,3 +101,3 @@ * @default null | ||
* For more information on prompt-character, refer to | ||
* [prompt-character](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#prompt-character). | ||
* [prompt-character](./mask-configuration.html#prompt-character). | ||
* @default _ | ||
@@ -132,3 +137,3 @@ */ | ||
* For more information on customCharacters, refer to | ||
* [customCharacters](http://ej2.syncfusion.com/documentation/maskedtextbox/mask-configuration.html#custom-characters). | ||
* [customCharacters](./mask-configuration.html#custom-characters). | ||
* @default null | ||
@@ -181,3 +186,3 @@ */ | ||
private resetMaskedTextBox(); | ||
private setMaskPlaceholder(setVal); | ||
private setMaskPlaceholder(setVal, dynamicPlaceholder); | ||
private setCssClass(cssClass, element); | ||
@@ -184,0 +189,0 @@ private setWidth(width); |
@@ -74,4 +74,8 @@ var __extends = (this && this.__extends) || (function () { | ||
} | ||
this.element.parentNode.appendChild(input); | ||
this.element.parentNode.removeChild(this.element); | ||
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; | ||
@@ -102,3 +106,3 @@ ej2_base_2.setValue('ej2_instances', ejInstance, this.element); | ||
this.isInitial = false; | ||
this.setMaskPlaceholder(true); | ||
this.setMaskPlaceholder(true, false); | ||
this.setWidth(this.width); | ||
@@ -119,2 +123,5 @@ } | ||
index_1.applyMask.call(this); | ||
if (this.mask === null || this.mask === '' && this.value !== undefined) { | ||
index_2.setElementValue.call(this, this.value); | ||
} | ||
var val = index_1.strippedValue.call(this, this.element); | ||
@@ -128,4 +135,4 @@ this.prevValue = val; | ||
}; | ||
MaskedTextBox.prototype.setMaskPlaceholder = function (setVal) { | ||
if (this.placeholder) { | ||
MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) { | ||
if (dynamicPlaceholder || this.placeholder) { | ||
input_1.Input.setPlaceholder(this.placeholder, this.element); | ||
@@ -148,2 +155,3 @@ if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') { | ||
this.element.style.width = ej2_base_2.formatUnit(width); | ||
this.inputObj.container.style.width = ej2_base_2.formatUnit(width); | ||
} | ||
@@ -154,8 +162,9 @@ }; | ||
element: this.element, | ||
customTag: this.angularTagName, | ||
floatLabelType: this.floatLabelType, | ||
properties: { | ||
enableRtl: this.enableRtl, | ||
cssClass: this.cssClass, | ||
enabled: this.enabled, | ||
placeholder: this.placeholder | ||
placeholder: this.placeholder, | ||
showClearButton: this.showClearButton | ||
} | ||
@@ -176,7 +185,7 @@ }); | ||
if (this.placeholder) { | ||
this.setMaskPlaceholder(false); | ||
this.setMaskPlaceholder(false, false); | ||
} | ||
break; | ||
case 'placeholder': | ||
this.setMaskPlaceholder(true); | ||
this.setMaskPlaceholder(true, true); | ||
break; | ||
@@ -199,2 +208,11 @@ case 'width': | ||
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': | ||
@@ -267,2 +285,5 @@ var strippedValue_1 = this.value; | ||
ej2_base_1.Property(false) | ||
], MaskedTextBox.prototype, "showClearButton", void 0); | ||
__decorate([ | ||
ej2_base_1.Property(false) | ||
], MaskedTextBox.prototype, "enablePersistence", void 0); | ||
@@ -269,0 +290,0 @@ __decorate([ |
@@ -26,3 +26,3 @@ import { Component, EventHandler, Property, Event, Browser, L10n, EmitType } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';import { createElement, attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';import { Internationalization, NumberFormatOptions, getNumericObject } from '@syncfusion/ej2-base';import { Input, InputObject, FloatLabelType } from '../input/input'; | ||
* For more information on min, refer to | ||
* [min](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [min](./getting-started.html#range-validation). | ||
* @default null | ||
@@ -35,3 +35,3 @@ */ | ||
* For more information on max, refer to | ||
* [max](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [max](./getting-started.html#range-validation). | ||
* @default null | ||
@@ -44,3 +44,3 @@ */ | ||
* For more information on step, refer to | ||
* [step](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [step](./getting-started.html#range-validation). | ||
* @default 1 | ||
@@ -105,3 +105,3 @@ */ | ||
* For more information on formats, refer to | ||
* [formats](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#standard-formats). | ||
* [formats](./formats.html#standard-formats). | ||
* @default 'n2' | ||
@@ -114,3 +114,3 @@ */ | ||
* For more information on decimals, refer to | ||
* [decimals](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#precision-of-numbers). | ||
* [decimals](./formats.html#precision-of-numbers). | ||
* @default null | ||
@@ -117,0 +117,0 @@ */ |
@@ -38,3 +38,5 @@ import { Component, EmitType } from '@syncfusion/ej2-base'; | ||
private isCalled; | ||
private isKeyDown; | ||
private prevVal; | ||
private nextEle; | ||
private cursorPosChanged; | ||
private changeEventArgs; | ||
@@ -56,3 +58,3 @@ private isInteract; | ||
* For more information on min, refer to | ||
* [min](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [min](./getting-started.html#range-validation). | ||
* @default null | ||
@@ -64,3 +66,3 @@ */ | ||
* For more information on max, refer to | ||
* [max](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [max](./getting-started.html#range-validation). | ||
* @default null | ||
@@ -72,3 +74,3 @@ */ | ||
* For more information on step, refer to | ||
* [step](http://ej2.syncfusion.com/documentation/numerictextbox/getting-started.html#range-validation). | ||
* [step](./getting-started.html#range-validation). | ||
* @default 1 | ||
@@ -124,3 +126,3 @@ */ | ||
* For more information on formats, refer to | ||
* [formats](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#standard-formats). | ||
* [formats](./formats.html#standard-formats). | ||
* @default 'n2' | ||
@@ -132,3 +134,3 @@ */ | ||
* For more information on decimals, refer to | ||
* [decimals](http://ej2.syncfusion.com/documentation/numerictextbox/formats.html#precision-of-numbers). | ||
* [decimals](./formats.html#precision-of-numbers). | ||
* @default null | ||
@@ -235,2 +237,5 @@ */ | ||
private pasteHandler(); | ||
private preventHandler(); | ||
private keyUpHandler(event); | ||
private inputHandler(event); | ||
private keyDownHandler(event); | ||
@@ -259,2 +264,3 @@ private performAction(value, step, operation); | ||
private getElementData(event); | ||
private floatLabelTypeUpdate(); | ||
private mouseUpClick(event); | ||
@@ -261,0 +267,0 @@ /** |
@@ -66,3 +66,2 @@ var __extends = (this && this.__extends) || (function () { | ||
this.element.classList.remove('e-control', 'e-numerictextbox'); | ||
this.element.classList.add('e-numeric-container'); | ||
this.element.appendChild(input); | ||
@@ -105,3 +104,3 @@ this.element = input; | ||
} | ||
this.changeValue(this.value); | ||
this.changeValue(this.value === null || isNaN(this.value) ? null : this.strictMode ? this.trimValue(this.value) : this.value); | ||
this.wireEvents(); | ||
@@ -180,3 +179,3 @@ if (this.value !== null && !isNaN(this.value)) { | ||
} | ||
this.hiddenInput = (ej2_base_3.createElement('input', { attrs: { type: 'hidden' } })); | ||
this.hiddenInput = (ej2_base_3.createElement('input', { attrs: { type: 'hidden', 'validateHidden': 'true' } })); | ||
this.inputName = this.inputName !== null ? this.inputName : this.element.id; | ||
@@ -267,2 +266,4 @@ this.element.removeAttribute('name'); | ||
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); | ||
@@ -287,2 +288,4 @@ ej2_base_1.EventHandler.add(this.element, 'change', this.changeHandler, this); | ||
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); | ||
@@ -331,22 +334,108 @@ ej2_base_1.EventHandler.remove(this.element, 'keypress', this.keyPressHandler); | ||
}; | ||
NumericTextBox.prototype.keyDownHandler = function (event) { | ||
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.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(); | ||
} | ||
_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; | ||
_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; | ||
} | ||
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(); | ||
} | ||
if (!this.element.value.length) { | ||
this.setProperties({ value: null }, true); | ||
this.isKeyDown = true; | ||
this.updateValue(this.instance.getNumberParser({ format: 'n' })(this.element.value)); | ||
this.isKeyDown = false; | ||
}; | ||
; | ||
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; | ||
} | ||
} | ||
}; | ||
; | ||
NumericTextBox.prototype.performAction = function (value, step, operation) { | ||
@@ -392,5 +481,3 @@ if (value === null || isNaN(value)) { | ||
this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value); | ||
if (!this.isKeyDown) { | ||
this.raiseChangeEvent(event); | ||
} | ||
this.raiseChangeEvent(event); | ||
}; | ||
@@ -537,2 +624,3 @@ NumericTextBox.prototype.updateCurrency = function (prop, propVal) { | ||
NumericTextBox.prototype.focusIn = function (event) { | ||
var _this = this; | ||
if (!this.enabled || this.readonly) { | ||
@@ -545,6 +633,9 @@ return; | ||
if ((this.value || this.value === 0)) { | ||
var formatValue = this.formatNumber(); | ||
this.setElementValue(formatValue); | ||
var formatValue_1 = this.formatNumber(); | ||
this.setElementValue(formatValue_1); | ||
if (!this.isPrevFocused) { | ||
this.element.setSelectionRange(0, formatValue.length); | ||
var delay = (ej2_base_1.Browser.isDevice && ej2_base_1.Browser.isIos) ? 600 : 0; | ||
setTimeout(function () { | ||
_this.element.setSelectionRange(0, formatValue_1.length); | ||
}, delay); | ||
} | ||
@@ -636,2 +727,9 @@ } | ||
}; | ||
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) { | ||
@@ -651,3 +749,5 @@ event.stopPropagation(); | ||
if (step === void 0) { step = this.step; } | ||
this.isInteract = false; | ||
this.changeValue(this.performAction(this.value, step, INCREMENT)); | ||
this.raiseChangeEvent(); | ||
}; | ||
@@ -661,3 +761,5 @@ /** | ||
if (step === void 0) { step = this.step; } | ||
this.isInteract = false; | ||
this.changeValue(this.performAction(this.value, step, DECREMENT)); | ||
this.raiseChangeEvent(); | ||
}; | ||
@@ -744,3 +846,8 @@ /** | ||
input_1.Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper); | ||
this.bindClearEvent(); | ||
break; | ||
case 'floatLabelType': | ||
this.floatLabelType = newProp.floatLabelType; | ||
this.floatLabelTypeUpdate(); | ||
break; | ||
case 'value': | ||
@@ -747,0 +854,0 @@ this.updateValue(newProp.value); |
@@ -1,2 +0,2 @@ | ||
import { Component, EventHandler, Property, Event, EmitType, Complex } 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'; | ||
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'; | ||
import {Placement,TooltipPlacement,TooltipShowOn,SliderType,SliderOrientation,SliderTooltipEventArgs} from "./slider"; | ||
@@ -48,2 +48,51 @@ import {ComponentModel} from '@syncfusion/ej2-base'; | ||
/** | ||
* Interface for a class LimitData | ||
*/ | ||
export interface LimitDataModel { | ||
/** | ||
* It is used to enable the limit in the slider. | ||
* @default false | ||
*/ | ||
enabled?: boolean; | ||
/** | ||
* It is used to set the minimum start limit value. | ||
* @default null | ||
*/ | ||
minStart?: number; | ||
/** | ||
* It is used to set the minimum end limit value. | ||
* @default null | ||
*/ | ||
minEnd?: number; | ||
/** | ||
* It is used to set the maximum start limit value. | ||
* @default null | ||
*/ | ||
maxStart?: number; | ||
/** | ||
* It is used to set the maximum end limit value. | ||
* @default null | ||
*/ | ||
maxEnd?: number; | ||
/** | ||
* It is used to lock the first handle. | ||
* @default false | ||
*/ | ||
startHandleFixed?: boolean; | ||
/** | ||
* It is used to lock the second handle. | ||
* @default false | ||
*/ | ||
endHandleFixed?: boolean; | ||
} | ||
/** | ||
* Interface for a class TooltipData | ||
@@ -102,2 +151,9 @@ */ | ||
/** | ||
* It is used to denote own array of slider values. | ||
* The value should be specified in array of number or string.The min,max and step value is not considered | ||
* @default null | ||
*/ | ||
customValues?: string[] | number[]; | ||
/** | ||
* It is used to denote the step value of Slider component which is the amount of Slider value change | ||
@@ -129,3 +185,3 @@ * when increase / decrease button is clicked or press arrow keys or drag the thumb. | ||
*/ | ||
readOnly?: boolean; | ||
readonly?: boolean; | ||
@@ -151,2 +207,11 @@ /** | ||
/** | ||
* It is used to limit the slider movement within certain limits. | ||
* Refer the documentation | ||
* {@link http://ej2.syncfusion.com/documentation/slider/limits.html?lang=typescript here} | ||
* to know more about this property with demo | ||
* @default { enabled: false } | ||
*/ | ||
limits?: LimitDataModel; | ||
/** | ||
* It is used to enable or disable the slider. | ||
@@ -153,0 +218,0 @@ * @default true |
import { Component, EmitType } from '@syncfusion/ej2-base'; | ||
import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base'; | ||
import { SliderModel, TicksDataModel, TooltipDataModel } from './slider-model'; | ||
import { SliderModel, TicksDataModel, TooltipDataModel, LimitDataModel } from './slider-model'; | ||
/** | ||
@@ -104,2 +104,42 @@ * Configures the ticks data of the Slider. | ||
/** | ||
* It illustrates the limit data in slider. | ||
*/ | ||
export declare class LimitData extends ChildProperty<LimitData> { | ||
/** | ||
* It is used to enable the limit in the slider. | ||
* @default false | ||
*/ | ||
enabled: boolean; | ||
/** | ||
* It is used to set the minimum start limit value. | ||
* @default null | ||
*/ | ||
minStart: number; | ||
/** | ||
* It is used to set the minimum end limit value. | ||
* @default null | ||
*/ | ||
minEnd: number; | ||
/** | ||
* It is used to set the maximum start limit value. | ||
* @default null | ||
*/ | ||
maxStart: number; | ||
/** | ||
* It is used to set the maximum end limit value. | ||
* @default null | ||
*/ | ||
maxEnd: number; | ||
/** | ||
* It is used to lock the first handle. | ||
* @default false | ||
*/ | ||
startHandleFixed: boolean; | ||
/** | ||
* It is used to lock the second handle. | ||
* @default false | ||
*/ | ||
endHandleFixed: boolean; | ||
} | ||
/** | ||
* It illustrates the tooltip data in slider. | ||
@@ -178,3 +218,3 @@ */ | ||
private onresize; | ||
private currentVal; | ||
private isElementFocused; | ||
private handlePos1; | ||
@@ -213,2 +253,4 @@ private handlePos2; | ||
private isMaterial; | ||
private bootstrapCollisionArgs; | ||
private isBootstrap; | ||
private zIndex; | ||
@@ -222,2 +264,8 @@ private l10n; | ||
private tickElementCollection; | ||
private limitBarFirst; | ||
private limitBarSecond; | ||
private firstPartRemain; | ||
private secondPartRemain; | ||
private minDiff; | ||
private drag; | ||
/** | ||
@@ -230,2 +278,8 @@ * It is used to denote the current value of the Slider. | ||
/** | ||
* It is used to denote own array of slider values. | ||
* The value should be specified in array of number or string.The min,max and step value is not considered | ||
* @default null | ||
*/ | ||
customValues: string[] | number[]; | ||
/** | ||
* It is used to denote the step value of Slider component which is the amount of Slider value change | ||
@@ -254,3 +308,3 @@ * when increase / decrease button is clicked or press arrow keys or drag the thumb. | ||
*/ | ||
readOnly: boolean; | ||
readonly: boolean; | ||
/** | ||
@@ -273,2 +327,10 @@ * It is used to denote the type of the Slider. The available options are: | ||
/** | ||
* It is used to limit the slider movement within certain limits. | ||
* Refer the documentation | ||
* {@link http://ej2.syncfusion.com/documentation/slider/limits.html?lang=typescript here} | ||
* to know more about this property with demo | ||
* @default { enabled: false } | ||
*/ | ||
limits: LimitDataModel; | ||
/** | ||
* It is used to enable or disable the slider. | ||
@@ -373,2 +435,3 @@ * @default true | ||
private createRangeBar(); | ||
private createLimitBar(); | ||
private setOrientClass(); | ||
@@ -408,3 +471,5 @@ private setAriaAttributes(element); | ||
private repeatHandlerUp(e); | ||
private customTickCounter(bigNum); | ||
private renderScale(); | ||
private tickesAlignment(orien, tickWidth); | ||
private createTick(li, start); | ||
@@ -416,2 +481,4 @@ private formatTicksValue(li, start); | ||
private handleValueUpdate(); | ||
private getLimitCorrectedValues(value); | ||
private focusSliderElement(); | ||
private buttonClick(args); | ||
@@ -421,2 +488,6 @@ private tooltipAnimation(); | ||
private setRangeBar(); | ||
private checkValidValueAndPos(value); | ||
private setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion?, toMaxpostion?); | ||
private setLimitBar(); | ||
private getLimitValueAndPosition(currentValue, minValue, maxValue, limitBar?); | ||
private setValue(); | ||
@@ -446,4 +517,7 @@ private rangeValueUpdate(); | ||
private sliderDown(event); | ||
private handleValueAdjust(handleValue, assignValue, handleNumber); | ||
private dragRangeBarMove(event); | ||
private sliderBarUp(); | ||
private sliderBarMove(evt); | ||
private dragRangeBarUp(event); | ||
private checkRepeatedValue(currentValue); | ||
@@ -465,2 +539,3 @@ private refreshTooltip(); | ||
private updateConfig(); | ||
private limitsPropertyChange(); | ||
/** | ||
@@ -467,0 +542,0 @@ * Get the properties to be maintained in the persisted state. |
@@ -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 } from '@syncfusion/ej2-base'; | ||
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 {SelectedEventArgs,RemovingEventArgs,ClearingEventArgs} from "./uploader"; | ||
@@ -37,3 +37,3 @@ import {ComponentModel} from '@syncfusion/ej2-base'; | ||
* Specifies the text or html content to browse button | ||
* @default 'Browse' | ||
* @default 'Browse...' | ||
*/ | ||
@@ -65,2 +65,3 @@ browse?: string | HTMLElement; | ||
* The upload operations could not perform without this property. | ||
* @default '' | ||
*/ | ||
@@ -72,6 +73,31 @@ saveUrl?: string; | ||
* The remove action type must be POST request and define “removeFileNames” attribute to get file information that will be removed. | ||
* This property is optional. | ||
* This property is optional. | ||
* @default '' | ||
*/ | ||
removeUrl?: string; | ||
/** | ||
* Specifies the chunk size to split the large file into chunks, and upload it to the server in a sequential order. | ||
* If the chunk size property has value, the uploader enables the chunk upload by default. | ||
* It must be specified in bytes value. | ||
* | ||
* > For more information, refer to the [chunk upload](./chunk-upload.html) section from the documentation. | ||
* | ||
* @default 0 | ||
*/ | ||
chunkSize?: number; | ||
/** | ||
* Specifies the number of retries that the uploader can perform on the file failed to upload. | ||
* By default, the uploader set 3 as maximum retries. This property must be specified to prevent infinity looping. | ||
* @default 3 | ||
*/ | ||
retryCount?: number; | ||
/** | ||
* Specifies the delay time in milliseconds that the automatic retry happens after the delay. | ||
* @default 500 | ||
*/ | ||
retryAfterDelay?: number; | ||
} | ||
@@ -105,2 +131,5 @@ | ||
* Specifies the HTML string that used to customize the content of each file in the list. | ||
* | ||
* > For more information, refer to the [template](./template.html) section from the documentation. | ||
* | ||
* @default null | ||
@@ -129,3 +158,3 @@ */ | ||
* the uploader component considers the buttons property value. | ||
* @default { browse : 'Browse', clear: 'Clear', upload: 'Upload' } | ||
* @default { browse : 'Browse...', clear: 'Clear', upload: 'Upload' } | ||
*/ | ||
@@ -159,2 +188,5 @@ buttons?: ButtonsPropsModel; | ||
* By default, the component creates wrapper around file input that will act as drop target. | ||
* | ||
* > For more information, refer to the [drag-and-drop](./draganddrop.html) section from the documentation. | ||
* | ||
* @default null | ||
@@ -171,16 +203,6 @@ */ | ||
* * Type | ||
* ```html | ||
* <input type="file" id="fileupload"/> | ||
* ``` | ||
* ```typescript | ||
* let preloadFiles = [{ | ||
* { name: 'Nature', size: 500000, type: '.png' }, | ||
* { name: 'TypeScript Succintly', size: 12000, type: '.pdf' }, | ||
* { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' } | ||
* }] | ||
* let uploadObj: Uploader = new Uploader({ | ||
* files: preloadFiles | ||
* }); | ||
* uploadObj.appendTo("#fileupload"); | ||
* ``` | ||
* | ||
* {% codeBlock src="uploader/files-api/index.ts" %}{% endcodeBlock %} | ||
* | ||
* {% codeBlock src="uploader/files-api/index.html" %}{% endcodeBlock %} | ||
* @default { name: '', size: null, type: '' } | ||
@@ -245,2 +267,32 @@ */ | ||
/** | ||
* Fires when the chunk file uploaded successfully. | ||
* @event | ||
*/ | ||
chunkSuccess?: EmitType<Object>; | ||
/** | ||
* Fires if the chunk file failed to upload. | ||
* @event | ||
*/ | ||
chunkFailure?: EmitType<Object>; | ||
/** | ||
* Fires if cancel the chunk file uploading. | ||
* @event | ||
*/ | ||
canceling?: EmitType<Object>; | ||
/** | ||
* Fires if pause the chunk file uploading. | ||
* @event | ||
*/ | ||
pausing?: EmitType<Object>; | ||
/** | ||
* Fires if resume the paused chunk file upload. | ||
* @event | ||
*/ | ||
resuming?: EmitType<Object>; | ||
} |
import { Component, EmitType } from '@syncfusion/ej2-base'; | ||
import { INotifyPropertyChanged } from '@syncfusion/ej2-base'; | ||
import { ChildProperty } from '@syncfusion/ej2-base'; | ||
import { KeyboardEventArgs, ChildProperty } from '@syncfusion/ej2-base'; | ||
import { Ajax } from '@syncfusion/ej2-base'; | ||
import { UploaderModel, AsyncSettingsModel, ButtonsPropsModel, FilesPropModel } from './uploader-model'; | ||
@@ -25,3 +26,3 @@ export declare class FilesProp extends ChildProperty<FilesProp> { | ||
* Specifies the text or html content to browse button | ||
* @default 'Browse' | ||
* @default 'Browse...' | ||
*/ | ||
@@ -45,2 +46,3 @@ browse: string | HTMLElement; | ||
* The upload operations could not perform without this property. | ||
* @default '' | ||
*/ | ||
@@ -52,14 +54,66 @@ saveUrl: string; | ||
* This property is optional. | ||
* @default '' | ||
*/ | ||
removeUrl: string; | ||
/** | ||
* Specifies the chunk size to split the large file into chunks, and upload it to the server in a sequential order. | ||
* If the chunk size property has value, the uploader enables the chunk upload by default. | ||
* It must be specified in bytes value. | ||
* | ||
* > For more information, refer to the [chunk upload](./chunk-upload.html) section from the documentation. | ||
* | ||
* @default 0 | ||
*/ | ||
chunkSize: number; | ||
/** | ||
* Specifies the number of retries that the uploader can perform on the file failed to upload. | ||
* By default, the uploader set 3 as maximum retries. This property must be specified to prevent infinity looping. | ||
* @default 3 | ||
*/ | ||
retryCount: number; | ||
/** | ||
* Specifies the delay time in milliseconds that the automatic retry happens after the delay. | ||
* @default 500 | ||
*/ | ||
retryAfterDelay: number; | ||
} | ||
export interface FileInfo { | ||
/** | ||
* Returns the upload file name. | ||
*/ | ||
name: string; | ||
/** | ||
* Returns the details about upload file. | ||
*/ | ||
rawFile: string | Blob; | ||
/** | ||
* Returns the size of file in bytes. | ||
*/ | ||
size: number; | ||
/** | ||
* Returns the status of file. | ||
*/ | ||
status: string; | ||
/** | ||
* Returns the MIME type of file as a string. Returns empty string if the file’s type is not determined. | ||
*/ | ||
type: string; | ||
/** | ||
* Returns the list of validation errors (if any). | ||
*/ | ||
validationMessages: ValidationMessages; | ||
/** | ||
* Returns the current state of the file such as Failed, Canceled, Selected, Uploaded, or Uploading. | ||
*/ | ||
statusCode: string; | ||
} | ||
export interface MetaData { | ||
chunkIndex: number; | ||
blob: Blob | string; | ||
file: FileInfo; | ||
start: number; | ||
end: number; | ||
retryCount: number; | ||
request: Ajax; | ||
} | ||
export interface ValidationMessages { | ||
@@ -70,28 +124,127 @@ minSize?: string; | ||
export interface SelectedEventArgs { | ||
/** | ||
* Returns the original event arguments. | ||
*/ | ||
event: MouseEvent | TouchEvent | DragEvent; | ||
/** | ||
* Defines whether the current action can be prevented. | ||
*/ | ||
cancel: boolean; | ||
/** | ||
* Returns the list of selected files. | ||
*/ | ||
filesData: FileInfo[]; | ||
/** | ||
* Determines whether the file list generates based on the modified data. | ||
*/ | ||
isModified: boolean; | ||
/** | ||
* Specifies the modified files data to generate the file items. The argument depends on `isModified` argument. | ||
*/ | ||
modifiedFilesData: FileInfo[]; | ||
/** | ||
* Specifies the step value to the progress bar. | ||
*/ | ||
progressInterval: string; | ||
} | ||
export interface RemovingEventArgs { | ||
/** | ||
* Defines whether the current action can be prevented. | ||
*/ | ||
cancel: boolean; | ||
filesData: FileInfo[]; | ||
/** | ||
* Defines the additional data with key and value pair format that will be submitted to the remove action. | ||
*/ | ||
customFormData: { | ||
[key: string]: Object; | ||
}[]; | ||
/** | ||
* Returns the original event arguments. | ||
*/ | ||
event: MouseEvent | TouchEvent | KeyboardEventArgs; | ||
/** | ||
* Returns the list of files’ details that will be removed. | ||
*/ | ||
filesData: FileInfo[]; | ||
/** | ||
* Returns the XMLHttpRequest instance that is associated with remove action. | ||
*/ | ||
currentRequest?: XMLHttpRequest; | ||
/** | ||
* Defines whether the selected raw file send to server remove action. | ||
* Set true to send raw file. | ||
* Set false to send file name only. | ||
*/ | ||
postRawFile?: boolean; | ||
} | ||
export interface ClearingEventArgs { | ||
/** | ||
* Defines whether the current action can be prevented. | ||
*/ | ||
cancel: boolean; | ||
/** | ||
* Returns the list of files that will be cleared from the FileList. | ||
*/ | ||
filesData: FileInfo[]; | ||
} | ||
export interface UploadingEventArgs { | ||
/** | ||
* Returns the list of files that will be uploaded. | ||
*/ | ||
fileData: FileInfo; | ||
/** | ||
* Defines the additional data in key and value pair format that will be submitted to the upload action. | ||
*/ | ||
customFormData: { | ||
[key: string]: Object; | ||
}[]; | ||
/** | ||
* Defines whether the current action can be prevented. | ||
*/ | ||
cancel: boolean; | ||
/** | ||
* Returns the chunk size in bytes if the chunk upload is enabled. | ||
*/ | ||
chunkSize?: number; | ||
/** | ||
* Returns the XMLHttpRequest instance that is associated with upload action. | ||
*/ | ||
currentRequest?: XMLHttpRequest; | ||
} | ||
export interface CancelEventArgs { | ||
/** | ||
* Defines whether the current action can be prevented. | ||
*/ | ||
cancel: boolean; | ||
/** | ||
* Returns the original event arguments. | ||
*/ | ||
event: ProgressEventInit; | ||
/** | ||
* Returns the file details that will be canceled. | ||
*/ | ||
fileData: FileInfo; | ||
} | ||
export interface PauseResumeEventArgs { | ||
/** | ||
* Returns the original event arguments. | ||
*/ | ||
event: Event; | ||
/** | ||
* Returns the file data that is Paused or Resumed. | ||
*/ | ||
file: FileInfo; | ||
/** | ||
* Returns the total number of chunks. | ||
*/ | ||
chunkCount: number; | ||
/** | ||
* Returns the index of chunk that is Paused or Resumed. | ||
*/ | ||
chunkIndex: number; | ||
/** | ||
* Returns the chunk size value in bytes. | ||
*/ | ||
chunkSize: number; | ||
} | ||
/** | ||
@@ -119,2 +272,4 @@ * The uploader component allows to upload images, documents, and other files from local to server. | ||
private clearButton; | ||
private pauseButton; | ||
private formElement; | ||
private dropAreaWrapper; | ||
@@ -132,4 +287,7 @@ private filesData; | ||
private isForm; | ||
private allTypes; | ||
private keyConfigs; | ||
private localeText; | ||
private pausedData; | ||
private uploadMetaData; | ||
/** | ||
@@ -153,2 +311,5 @@ * Configures the save and remove URL to perform the upload operations in the server asynchronously. | ||
* Specifies the HTML string that used to customize the content of each file in the list. | ||
* | ||
* > For more information, refer to the [template](./template.html) section from the documentation. | ||
* | ||
* @default null | ||
@@ -174,3 +335,3 @@ */ | ||
* the uploader component considers the buttons property value. | ||
* @default { browse : 'Browse', clear: 'Clear', upload: 'Upload' } | ||
* @default { browse : 'Browse...', clear: 'Clear', upload: 'Upload' } | ||
*/ | ||
@@ -200,2 +361,5 @@ buttons: ButtonsPropsModel; | ||
* By default, the component creates wrapper around file input that will act as drop target. | ||
* | ||
* > For more information, refer to the [drag-and-drop](./draganddrop.html) section from the documentation. | ||
* | ||
* @default null | ||
@@ -211,16 +375,6 @@ */ | ||
* * Type | ||
* ```html | ||
* <input type="file" id="fileupload"/> | ||
* ``` | ||
* ```typescript | ||
* let preloadFiles = [{ | ||
* { name: 'Nature', size: 500000, type: '.png' }, | ||
* { name: 'TypeScript Succintly', size: 12000, type: '.pdf' }, | ||
* { name: 'ASP.NET Webhooks', size: 500000, type: '.docx' } | ||
* }] | ||
* let uploadObj: Uploader = new Uploader({ | ||
* files: preloadFiles | ||
* }); | ||
* uploadObj.appendTo("#fileupload"); | ||
* ``` | ||
* | ||
* {% codeBlock src="uploader/files-api/index.ts" %}{% endcodeBlock %} | ||
* | ||
* {% codeBlock src="uploader/files-api/index.html" %}{% endcodeBlock %} | ||
* @default { name: '', size: null, type: '' } | ||
@@ -276,2 +430,27 @@ */ | ||
/** | ||
* Fires when the chunk file uploaded successfully. | ||
* @event | ||
*/ | ||
chunkSuccess: EmitType<Object>; | ||
/** | ||
* Fires if the chunk file failed to upload. | ||
* @event | ||
*/ | ||
chunkFailure: EmitType<Object>; | ||
/** | ||
* Fires if cancel the chunk file uploading. | ||
* @event | ||
*/ | ||
canceling: EmitType<Object>; | ||
/** | ||
* Fires if pause the chunk file uploading. | ||
* @event | ||
*/ | ||
pausing: EmitType<Object>; | ||
/** | ||
* Fires if resume the paused chunk file upload. | ||
* @event | ||
*/ | ||
resuming: EmitType<Object>; | ||
/** | ||
* Triggers when change the Uploader value. | ||
@@ -316,2 +495,3 @@ */ | ||
private keyActionHandler(e); | ||
private getCurrentMetaData(fileInfo?, e?); | ||
private setReverseFocus(e); | ||
@@ -330,7 +510,8 @@ private setTabFocus(e); | ||
private removeFilesData(file, customTemplate); | ||
private removeUploadedFile(file, eventArgs, custom); | ||
private removeUploadedFile(file, eventArgs, removeDirectly, custom); | ||
private updateFormData(formData, customData); | ||
private removeCompleted(e, files, customTemplate); | ||
private removeFailed(e, files, customTemplate); | ||
private onSelectFiles(args); | ||
private clearData(); | ||
private clearData(singleUpload?); | ||
private updateSortedFileList(filesData); | ||
@@ -352,5 +533,9 @@ private checkExtension(files); | ||
private changeProgressValue(li, progressValue); | ||
private uploadInProgress(e, files, customUI?); | ||
private uploadComplete(e, files, customUI?); | ||
private uploadFailed(e, files); | ||
private uploadInProgress(e, files, customUI?, request?); | ||
private removecanceledFile(e, file); | ||
private renderFailureState(e, file, liElement); | ||
private reloadcanceledFile(e, file, liElement); | ||
private uploadComplete(e, file, customUI?); | ||
private raiseSuccessEvent(e, file); | ||
private uploadFailed(e, file); | ||
private updateProgressBarClasses(li, className); | ||
@@ -365,3 +550,19 @@ private removeProgressbar(li, callType); | ||
private checkHTMLAttributes(); | ||
private updateFormData(formData, customData); | ||
private chunkUpload(file, custom?); | ||
private sendRequest(file, metaData, custom?); | ||
private eventCancelByArgs(e, eventArgs, file); | ||
private checkChunkUpload(); | ||
private chunkUploadComplete(e, metaData, custom?); | ||
private sendNextRequest(metaData); | ||
private removeChunkFile(e, metaData, custom); | ||
private pauseUpload(metaData, e?, custom?); | ||
private abortUpload(metaData, custom, eventArgs?); | ||
private resumeUpload(metaData, e?, custom?); | ||
private updateMetaData(metaData); | ||
private removeChunkProgressBar(metaData); | ||
private chunkUploadFailed(e, metaData, custom?); | ||
private retryRequest(liElement, metaData, custom?); | ||
private checkPausePlayAction(e); | ||
private retryUpload(metaData, fromcanceledStage?); | ||
private chunkUploadInProgress(e, metaData, custom?); | ||
/** | ||
@@ -390,6 +591,8 @@ * It is used to convert bytes value into kilobytes or megabytes depending on the size based | ||
* upload the specific file based on its argument. | ||
* @param { FileInfo[] } files - specifies the files data for upload. | ||
* @param { FileInfo | FileInfo[] } files - specifies the files data for upload. | ||
* @returns void | ||
*/ | ||
upload(files: FileInfo[], custom?: boolean): void; | ||
upload(files: FileInfo | FileInfo[], custom?: boolean): void; | ||
private validateFileType(files); | ||
private uploadFiles(files, custom?); | ||
/** | ||
@@ -400,5 +603,7 @@ * Remove the uploaded file from server manually by calling the remove URL action. | ||
* @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server. | ||
* @param { boolean } customTemplate - Set true if the component rendering with customize template. | ||
* @param { boolean } removeDirectly - Set true if files remove without removing event. | ||
* @returns void | ||
*/ | ||
remove(fileData?: FileInfo | FileInfo[], customTemplate?: boolean): void; | ||
remove(fileData?: FileInfo | FileInfo[], customTemplate?: boolean, removeDirectly?: boolean, args?: MouseEvent | TouchEvent | KeyboardEventArgs): void; | ||
/** | ||
@@ -409,3 +614,40 @@ * Clear all the file entries from list that can be uploaded files or added in upload queue. | ||
clearAll(): void; | ||
/** | ||
* Get the data of files which are shown in file list. | ||
* @returns FileInfo[] | ||
*/ | ||
getFilesData(): FileInfo[]; | ||
/** | ||
* Pauses the in-progress chunked upload based on the file data. | ||
* @param { FileInfo | FileInfo[] } fileData - specifies the files data to pause from uploading. | ||
* @param { boolean } custom - Set true if used custom UI. | ||
* @returns void | ||
*/ | ||
pause(fileData: FileInfo | FileInfo[], custom?: boolean): void; | ||
private pauseUploading(fileData, custom?); | ||
private getFiles(fileData); | ||
/** | ||
* Resumes the chunked upload that is previously paused based on the file data. | ||
* @param { FileInfo | FileInfo[] } fileData - specifies the files data to resume the paused file. | ||
* @param { boolean } custom - Set true if used custom UI. | ||
* @returns void | ||
*/ | ||
resume(fileData: FileInfo | FileInfo[], custom?: boolean): void; | ||
private resumeFiles(fileData, custom?); | ||
/** | ||
* Retries the canceled or failed file upload based on the file data. | ||
* @param { FileInfo | FileInfo[] } fileData - specifies the files data to retry the canceled or failed file. | ||
* @param { boolean } fromcanceledStage - Set true to retry from canceled stage and set false to retry from initial stage. | ||
* @returns void | ||
*/ | ||
retry(fileData: FileInfo | FileInfo[], fromcanceledStage?: boolean): void; | ||
private retryFailedFiles(fileData, fromcanceledStage?); | ||
/** | ||
* Stops the in-progress chunked upload based on the file data. | ||
* When the file upload is canceled, the partially uploaded file is removed from server. | ||
* @param { FileInfo | FileInfo[] } fileData - specifies the files data to cancel the progressing file. | ||
* @returns void | ||
*/ | ||
cancel(fileData: FileInfo[]): void; | ||
private cancelUpload(fileData); | ||
} |
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 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
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
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
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
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
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
18985744
179
181328
8
4
+ Added@syncfusion/ej2-base@16.2.50(transitive)
+ Added@syncfusion/ej2-buttons@16.2.50(transitive)
+ Added@syncfusion/ej2-popups@16.2.52(transitive)
+ Added@syncfusion/ej2-splitbuttons@16.2.50(transitive)
- Removed@syncfusion/ej2-base@16.1.38(transitive)
- Removed@syncfusion/ej2-buttons@16.1.48(transitive)
- Removed@syncfusion/ej2-popups@16.1.47(transitive)