smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
761 lines (753 loc) • 45.7 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.textbox';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumericTextBoxComponent),
multi: true
};
class NumericTextBoxComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/**
* @description
* The registered callback function called when a change event occurs on the form elements.
*/
this._onChange = () => { };
/**
* @description
* The registered callback function called when a blur event occurs on the form elements.
*/
this._onTouched = () => { };
/** @description This event is triggered whenever the value changes, whether due to user input or programmatic updates. It allows you to respond in real time when the value is modified.
* @param event. The custom event. */
this.onChange = new EventEmitter();
/** @description This event is triggered whenever the input value is modified by the user through actions such as typing on the keyboard or pasting text into the field. It detects changes in real-time as they occur, allowing you to respond immediately to user input.
* @param event. The custom event. */
this.onChanging = new EventEmitter();
/** @description This event is triggered immediately after the dropdown menu has been closed by the user, either through selecting an option, clicking outside the dropdown, or using a keyboard action. Use this event to execute any actions or cleanup that should occur once the dropdown is no longer visible.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is fired just before the dropdown menu is closed, giving you an opportunity to execute custom logic or prevent the closure. If you wish to stop the dropdown from closing, you can call event.preventDefault() within your event handler. This allows for conditional closing behavior based on your application's requirements.
* @param event. The custom event. */
this.onClosing = new EventEmitter();
/** @description This event is triggered whenever the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown control or focuses on it using the keyboard.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is fired just before the dropdown menu begins to open. If you need to prevent the dropdown from opening—for example, based on certain conditions—you can call event.preventDefault() within your event handler function. Doing so cancels the opening operation, allowing you to control when or whether the dropdown appears.
* @param event. The custom event. */
this.onOpening = new EventEmitter();
/** @description This event is triggered whenever the radix value is modified by the user. It notifies listeners that the numerical base (such as decimal, binary, or hexadecimal) used for number input or display has been changed, allowing your application to update related components or recalculate values as necessary.
* @param event. The custom event. */
this.onRadixChange = new EventEmitter();
this._initialChange = true;
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-numeric-text-box');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed or executed within the component. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Specifies or retrieves the character used as the decimal separator when formatting or parsing numeric values. This determines how fractional numbers are represented, for example, using a period ('.') or a comma (',') between the integer and fractional parts. */
get decimalSeparator() {
return this.nativeElement ? this.nativeElement.decimalSeparator : undefined;
}
set decimalSeparator(value) {
this.nativeElement ? this.nativeElement.decimalSeparator = value : undefined;
}
/** @description Controls whether the jqxNumericTextBox component is active or inactive. When enabled, users can interact with and enter values in the numeric text box. When disabled, the component becomes read-only and user interaction is prevented. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies the parent HTML element or container to which the Radix dropdown will be rendered or appended. This determines the dropdown's positioning context within the DOM and can affect its stacking, placement, and overflow behavior. */
get dropDownAppendTo() {
return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
}
set dropDownAppendTo(value) {
this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
}
/** @description Controls whether a dropdown menu appears when the radix display button is clicked. If enabled, the dropdown presents selectable options for switching between different numeral systems: binary, octal, decimal, and hexadecimal. This allows users to easily change the numeral system used for number display or input. */
get dropDownEnabled() {
return this.nativeElement ? this.nativeElement.dropDownEnabled : undefined;
}
set dropDownEnabled(value) {
this.nativeElement ? this.nativeElement.dropDownEnabled = value : undefined;
}
/** @description Controls whether users can increase or decrease the value in the jqxNumericTextBox component by scrolling the mouse wheel. When enabled, scrolling the wheel while the input is focused will increment or decrement the numeric value accordingly. When disabled, mouse wheel actions will have no effect on the value. */
get enableMouseWheelAction() {
return this.nativeElement ? this.nativeElement.enableMouseWheelAction : undefined;
}
set enableMouseWheelAction(value) {
this.nativeElement ? this.nativeElement.enableMouseWheelAction = value : undefined;
}
/** @description Displays supplementary helper text below the element to provide users with additional information, guidance, or context related to the element's purpose or required input. */
get hint() {
return this.nativeElement ? this.nativeElement.hint : undefined;
}
set hint(value) {
this.nativeElement ? this.nativeElement.hint = value : undefined;
}
/** @description Specifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy. */
get inputFormat() {
return this.nativeElement ? this.nativeElement.inputFormat : undefined;
}
set inputFormat(value) {
this.nativeElement ? this.nativeElement.inputFormat = value : undefined;
}
/** @description Displays a descriptive text label above the element to provide context or identify its purpose for users. */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description When this property is enabled, the binary and hexadecimal representations of a number are automatically padded with leading zeros as needed to ensure their length matches the specified wordLength. This guarantees consistent output width, even for numbers whose standard representations would be shorter than wordLength. */
get leadingZeros() {
return this.nativeElement ? this.nativeElement.leadingZeros : undefined;
}
set leadingZeros(value) {
this.nativeElement ? this.nativeElement.leadingZeros = value : undefined;
}
/** @description Sets or retrieves the unlockKey used to activate and access the product’s full features. When provided, the unlockKey grants authorization to unlock the product; when requested, it returns the current unlock key in use. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Sets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for displaying localized content. It works together with the messages property, which should contain translations for each supported language. When the language is changed, the corresponding messages from the messages object are used for all localized text. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function associated with the localization module. This function is typically invoked when localization events occur, such as language changes or updates to localized content, enabling the application to respond dynamically to these changes. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or retrieves the maximum allowable value for the widget. This defines the highest value that the widget can accept or display. */
get max() {
return this.nativeElement ? this.nativeElement.max : undefined;
}
set max(value) {
this.nativeElement ? this.nativeElement.max = value : undefined;
}
/** @description Defines or retrieves an object containing customizable text strings used within the widget, enabling localization of UI elements such as labels, messages, and tooltips. This property works together with the locale setting to display the widget's interface in different languages according to the user's preferences. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Defines or retrieves the lowest allowable value that the widget can accept. This property determines the minimum limit for user input or programmatically set values. */
get min() {
return this.nativeElement ? this.nativeElement.min : undefined;
}
set min(value) {
this.nativeElement ? this.nativeElement.min = value : undefined;
}
/** @description Specifies the unique name assigned to the control element, which can be used to identify and reference the control within forms, scripts, or styles. This name is often utilized when processing form data or targeting the control with JavaScript or CSS. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Determines whether the value property can be set to null or an empty string. When enabled, assigning null or "" to the value property is allowed; otherwise, such assignments are prevented or ignored. Use this setting to control how empty or unset values are handled. */
get nullable() {
return this.nativeElement ? this.nativeElement.nullable : undefined;
}
set nullable(value) {
this.nativeElement ? this.nativeElement.nullable = value : undefined;
}
/** @description Controls whether the radix dropdown menu is open or closed. This property can be set to open or close the dropdown programmatically, or read to determine its current state. It is effective only when dropDownEnabled is set to true; otherwise, the dropdown cannot be opened regardless of this property's value. */
get opened() {
return this.nativeElement ? this.nativeElement.opened : undefined;
}
set opened(value) {
this.nativeElement ? this.nativeElement.opened = value : undefined;
}
/** @description Defines or retrieves the display format pattern used to present the input value when the element is not in focus. The specified pattern determines how the value appears to the user (for example, adding commas, decimal places, or currency symbols) while not editing. You can apply any formatting string supported by the NumberRenderer class as the outputFormatString, allowing for customized number formats such as '0,0.00' for thousands separators and two decimal places. */
get outputFormatString() {
return this.nativeElement ? this.nativeElement.outputFormatString : undefined;
}
set outputFormatString(value) {
this.nativeElement ? this.nativeElement.outputFormatString = value : undefined;
}
/** @description Specifies the placeholder text that appears within the widget's input field when no value has been entered. This text provides a hint or example to guide the user on what kind of input is expected. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when inputFormat is set to either 'floatingPoint' or 'complex', ensuring precise control over decimal precision for these input types. */
get precisionDigits() {
return this.nativeElement ? this.nativeElement.precisionDigits : undefined;
}
set precisionDigits(value) {
this.nativeElement ? this.nativeElement.precisionDigits = value : undefined;
}
/** @description Sets or retrieves the radix (base) used by the jqxNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value. */
get radix() {
return this.nativeElement ? this.nativeElement.radix : undefined;
}
set radix(value) {
this.nativeElement ? this.nativeElement.radix = value : undefined;
}
/** @description Controls the visibility of the radix (base) selection button in the jqxNumericTextBox component. This option is relevant only when the inputFormat property is set to 'integer'. When enabled, users can toggle between different numeric bases (e.g., decimal, hexadecimal). When disabled, the radix selection button is hidden. */
get radixDisplay() {
return this.nativeElement ? this.nativeElement.radixDisplay : undefined;
}
set radixDisplay(value) {
this.nativeElement ? this.nativeElement.radixDisplay = value : undefined;
}
/** @description Gets or sets the position of the radix (decimal separator) display button in the jqxNumericTextBox component. This property determines where the button for selecting a radix is shown within the numeric input field (e.g., to the left or right of the input box). */
get radixDisplayPosition() {
return this.nativeElement ? this.nativeElement.radixDisplayPosition : undefined;
}
set radixDisplayPosition(value) {
this.nativeElement ? this.nativeElement.radixDisplayPosition = value : undefined;
}
/** @description Controls whether the jqxNumericTextBox is in a read-only state. When set to true, the user cannot modify the value; when set to false, the input can be edited. This property can be used to retrieve the current read-only status or to update it programmatically. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Sets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, such as for languages like Arabic or Hebrew. When enabled, the element will display its content aligned appropriately for RTL locales. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Controls whether the output value is displayed using scientific notation (e.g., 1e+6 instead of 1000000). This option is only relevant when the inputFormat property is set to 'integer'. If enabled, large or small integer values will be formatted in scientific notation; if disabled, values will be displayed in standard numeric form. */
get scientificNotation() {
return this.nativeElement ? this.nativeElement.scientificNotation : undefined;
}
set scientificNotation(value) {
this.nativeElement ? this.nativeElement.scientificNotation = value : undefined;
}
/** @description Controls whether the dropdown displays the current value simultaneously in all four numeral systems (binary, octal, decimal, and hexadecimal). If enabled, users will see the value represented in each numeral system option within the dropdown list. */
get showDropDownValues() {
return this.nativeElement ? this.nativeElement.showDropDownValues : undefined;
}
set showDropDownValues(value) {
this.nativeElement ? this.nativeElement.showDropDownValues = value : undefined;
}
/** @description Controls whether units are displayed or hidden in the user interface. When enabled, units will be visible; when disabled, units will be concealed from view. */
get showUnit() {
return this.nativeElement ? this.nativeElement.showUnit : undefined;
}
set showUnit(value) {
this.nativeElement ? this.nativeElement.showUnit = value : undefined;
}
/** @description Calculates the number of significant digits present in a given number. This operation is only valid when the inputFormat is set to either 'floatingPoint' or 'complex', ensuring that the input is a numerical value represented as a floating-point or complex number. Use this functionality to assess numerical precision and significance within these specific formats. */
get significantDigits() {
return this.nativeElement ? this.nativeElement.significantDigits : undefined;
}
set significantDigits(value) {
this.nativeElement ? this.nativeElement.significantDigits = value : undefined;
}
/** @description Controls whether the spin buttons (increment and decrement controls) are displayed or hidden in the input field. When enabled, users can adjust the value using these buttons; when disabled, the spin buttons are not visible. */
get spinButtons() {
return this.nativeElement ? this.nativeElement.spinButtons : undefined;
}
set spinButtons(value) {
this.nativeElement ? this.nativeElement.spinButtons = value : undefined;
}
/** @description Specifies the amount of time, in milliseconds, to wait between consecutive activations of the spin buttons when a user holds down the control. This determines how quickly the value will increment or decrement while the button is continuously pressed. */
get spinButtonsDelay() {
return this.nativeElement ? this.nativeElement.spinButtonsDelay : undefined;
}
set spinButtonsDelay(value) {
this.nativeElement ? this.nativeElement.spinButtonsDelay = value : undefined;
}
/** @description Specifies the amount of time, in milliseconds, to wait before starting the first repeated action when a spin button is held down. This initial delay determines how long the user must press and hold the button before automatic repeating begins. */
get spinButtonsInitialDelay() {
return this.nativeElement ? this.nativeElement.spinButtonsInitialDelay : undefined;
}
set spinButtonsInitialDelay(value) {
this.nativeElement ? this.nativeElement.spinButtonsInitialDelay = value : undefined;
}
/** @description Specifies or retrieves the location of the spin buttons (increment and decrement controls) on the jqxNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field. */
get spinButtonsPosition() {
return this.nativeElement ? this.nativeElement.spinButtonsPosition : undefined;
}
set spinButtonsPosition(value) {
this.nativeElement ? this.nativeElement.spinButtonsPosition = value : undefined;
}
/** @description Specifies or retrieves the increment or decrement value used when adjusting the control. This value determines by how much the value increases or decreases with each step (such as when using up/down arrows or stepper buttons). */
get spinButtonsStep() {
return this.nativeElement ? this.nativeElement.spinButtonsStep : undefined;
}
set spinButtonsStep(value) {
this.nativeElement ? this.nativeElement.spinButtonsStep = value : undefined;
}
/** @description Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual design across the interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to the element using the Tab key or other focus methods. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Gets or sets the name of the unit (such as "kg", "cm", "$", etc.) displayed in the jqxNumericTextBox widget. This property allows you to specify the unit label that appears alongside the numeric input, providing context for the entered value. */
get unit() {
return this.nativeElement ? this.nativeElement.unit : undefined;
}
set unit(value) {
this.nativeElement ? this.nativeElement.unit = value : undefined;
}
/** @description Enhances value validation using the specified minimum and maximum constraints. - When set to 'strict', the value is continuously validated: any value outside the defined min or max boundaries is automatically corrected to the nearest valid value, regardless of how the value is updated (user interaction or programmatically). - When set to 'interaction', validation only occurs through user interactions such as typing or dragging. Programmatic changes to the value are not coerced within the min or max range. Additionally, if the min or max limits are updated, and the current value falls outside the new range, it remains unchanged and no change event is triggered. */
get validation() {
return this.nativeElement ? this.nativeElement.validation : undefined;
}
set validation(value) {
this.nativeElement ? this.nativeElement.validation = value : undefined;
}
/** @description Sets or retrieves the current numeric value of the jqxNumericTextBox widget. When used as a setter, it updates the widget's displayed value to the specified number. When used as a getter, it returns the widget’s current numeric value. This function supports both setting and getting the value, depending on whether a parameter is provided. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Specifies or retrieves the word length when the inputFormat is set to 'integer'. This property is only relevant for integer inputs. If the min and/or max values are not explicitly defined, they will be automatically calculated based on the given word length—ensuring that the valid input range matches the specified number of bits. */
get wordLength() {
return this.nativeElement ? this.nativeElement.wordLength : undefined;
}
set wordLength(value) {
this.nativeElement ? this.nativeElement.wordLength = value : undefined;
}
/** @description Sets the input focus to the NumericTextBox component, allowing users to immediately start entering numeric values. This method brings the NumericTextBox into active view, enabling keyboard interactions and improving accessibility.
*/
focus() {
if (this.nativeElement.isRendered) {
this.nativeElement.focus();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.focus();
});
}
}
/** @description Retrieves or updates the current numeric value displayed in the NumericTextBox component. Use this method to programmatically obtain the user-entered value or to set a new value within the control.
* @param {string | number} value?. The value to be set. If no parameter is passed, returns the displayed value of the jqxNumericTextBox.
* @param {boolean} suppressValidation?. If <em>true</em> is passed, the passed value will be set to the jqxNumericTextBox without validation.
* @returns {string}
*/
async val(value, suppressValidation) {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.val(value, suppressValidation);
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
valSync(value, suppressValidation) {
if (this.nativeElement.isRendered) {
return this.nativeElement.val(value, suppressValidation);
}
return null;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
get ngValue() {
if (!this.nativeElement) {
return null;
}
const value = this.nativeElement.value;
return value;
}
set ngValue(value) {
if (this.nativeElement) {
this.writeValue(value);
}
}
writeValue(value) {
const that = this;
const normalizedValue = value == null ? '' : value;
that.nativeElement.whenRendered(() => {
that.value = normalizedValue;
if (that._initialChange === false) {
that._onChange(that.value);
}
});
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['changingHandler'] = (event) => { that.onChanging.emit(event); };
that.nativeElement.addEventListener('changing', that.eventHandlers['changingHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['openingHandler'] = (event) => { that.onOpening.emit(event); };
that.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);
that.eventHandlers['radixChangeHandler'] = (event) => { that.onRadixChange.emit(event); };
that.nativeElement.addEventListener('radixChange', that.eventHandlers['radixChangeHandler']);
that.eventHandlers['changeModelHandler'] = (event) => {
that._initialChange = false;
that._onChange(that.nativeElement.value);
};
that.eventHandlers['blurModelHandler'] = (event) => {
that._onTouched();
};
that.nativeElement.whenRendered(() => {
if (that.nativeElement.querySelector('input')) {
that.eventHandlers['keyupModelHandler'] = (event) => {
if (event.key === ',' || event.key === '.') {
return;
}
that.nativeElement._validate(false, that.nativeElement.querySelector('input').value);
that.eventHandlers['changeModelHandler'](event);
};
that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
});
that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['changingHandler']) {
that.nativeElement.removeEventListener('changing', that.eventHandlers['changingHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['openingHandler']) {
that.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);
}
if (that.eventHandlers['radixChangeHandler']) {
that.nativeElement.removeEventListener('radixChange', that.eventHandlers['radixChangeHandler']);
}
if (that.eventHandlers['changeModelHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
if (that.nativeElement.querySelector('input')) {
that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
}
if (that.eventHandlers['blurModelHandler']) {
that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
}
}
}
NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
NumericTextBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: NumericTextBoxComponent, selector: "smart-numeric-text-box, [smart-numeric-text-box]", inputs: { animation: "animation", decimalSeparator: "decimalSeparator", disabled: "disabled", dropDownAppendTo: "dropDownAppendTo", dropDownEnabled: "dropDownEnabled", enableMouseWheelAction: "enableMouseWheelAction", hint: "hint", inputFormat: "inputFormat", label: "label", leadingZeros: "leadingZeros", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", max: "max", messages: "messages", min: "min", name: "name", nullable: "nullable", opened: "opened", outputFormatString: "outputFormatString", placeholder: "placeholder", precisionDigits: "precisionDigits", radix: "radix", radixDisplay: "radixDisplay", radixDisplayPosition: "radixDisplayPosition", readonly: "readonly", rightToLeft: "rightToLeft", scientificNotation: "scientificNotation", showDropDownValues: "showDropDownValues", showUnit: "showUnit", significantDigits: "significantDigits", spinButtons: "spinButtons", spinButtonsDelay: "spinButtonsDelay", spinButtonsInitialDelay: "spinButtonsInitialDelay", spinButtonsPosition: "spinButtonsPosition", spinButtonsStep: "spinButtonsStep", theme: "theme", unfocusable: "unfocusable", unit: "unit", validation: "validation", value: "value", wordLength: "wordLength" }, outputs: { onChange: "onChange", onChanging: "onChanging", onClose: "onClose", onClosing: "onClosing", onOpen: "onOpen", onOpening: "onOpening", onRadixChange: "onRadixChange" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-numeric-text-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-numeric-text-box', selector: 'smart-numeric-text-box, [smart-numeric-text-box]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], decimalSeparator: [{
type: Input
}], disabled: [{
type: Input
}], dropDownAppendTo: [{
type: Input
}], dropDownEnabled: [{
type: Input
}], enableMouseWheelAction: [{
type: Input
}], hint: [{
type: Input
}], inputFormat: [{
type: Input
}], label: [{
type: Input
}], leadingZeros: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], max: [{
type: Input
}], messages: [{
type: Input
}], min: [{
type: Input
}], name: [{
type: Input
}], nullable: [{
type: Input
}], opened: [{
type: Input
}], outputFormatString: [{
type: Input
}], placeholder: [{
type: Input
}], precisionDigits: [{
type: Input
}], radix: [{
type: Input
}], radixDisplay: [{
type: Input
}], radixDisplayPosition: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], scientificNotation: [{
type: Input
}], showDropDownValues: [{
type: Input
}], showUnit: [{
type: Input
}], significantDigits: [{
type: Input
}], spinButtons: [{
type: Input
}], spinButtonsDelay: [{
type: Input
}], spinButtonsInitialDelay: [{
type: Input
}], spinButtonsPosition: [{
type: Input
}], spinButtonsStep: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], unit: [{
type: Input
}], validation: [{
type: Input
}], value: [{
type: Input
}], wordLength: [{
type: Input
}], onChange: [{
type: Output
}], onChanging: [{
type: Output
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onOpen: [{
type: Output
}], onOpening: [{
type: Output
}], onRadixChange: [{
type: Output
}] } });
class NumericTextBoxModule {
}
NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxModule, declarations: [NumericTextBoxComponent], exports: [NumericTextBoxComponent] });
NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: NumericTextBoxModule, decorators: [{
type: NgModule,
args: [{
declarations: [NumericTextBoxComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [NumericTextBoxComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NumericTextBoxComponent, NumericTextBoxModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-numerictextbox.mjs.map