1605 lines
72 KiB
JavaScript
1605 lines
72 KiB
JavaScript
|
import * as i1 from '@angular/common';
|
||
|
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
||
|
|
import * as i0 from '@angular/core';
|
||
|
|
import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
||
|
|
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
||
|
|
import { PrimeTemplate, SharedModule } from 'primeng/api';
|
||
|
|
import * as i4 from 'primeng/autofocus';
|
||
|
|
import { AutoFocusModule } from 'primeng/autofocus';
|
||
|
|
import * as i3 from 'primeng/button';
|
||
|
|
import { ButtonModule } from 'primeng/button';
|
||
|
|
import { DomHandler } from 'primeng/dom';
|
||
|
|
import { AngleDownIcon } from 'primeng/icons/angledown';
|
||
|
|
import { AngleUpIcon } from 'primeng/icons/angleup';
|
||
|
|
import { TimesIcon } from 'primeng/icons/times';
|
||
|
|
import * as i2 from 'primeng/inputtext';
|
||
|
|
import { InputTextModule } from 'primeng/inputtext';
|
||
|
|
|
||
|
|
const INPUTNUMBER_VALUE_ACCESSOR = {
|
||
|
|
provide: NG_VALUE_ACCESSOR,
|
||
|
|
useExisting: forwardRef(() => InputNumber),
|
||
|
|
multi: true
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* InputNumber is an input component to provide numerical input.
|
||
|
|
* @group Components
|
||
|
|
*/
|
||
|
|
class InputNumber {
|
||
|
|
document;
|
||
|
|
el;
|
||
|
|
cd;
|
||
|
|
injector;
|
||
|
|
/**
|
||
|
|
* Displays spinner buttons.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showButtons = false;
|
||
|
|
/**
|
||
|
|
* Whether to format the value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
format = true;
|
||
|
|
/**
|
||
|
|
* Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
buttonLayout = 'stacked';
|
||
|
|
/**
|
||
|
|
* Identifier of the focus input to match a label defined for the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
inputId;
|
||
|
|
/**
|
||
|
|
* Style class of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
styleClass;
|
||
|
|
/**
|
||
|
|
* Inline style of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
style;
|
||
|
|
/**
|
||
|
|
* Advisory information to display on input.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
placeholder;
|
||
|
|
/**
|
||
|
|
* Size of the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
size;
|
||
|
|
/**
|
||
|
|
* Maximum number of character allows in the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
maxlength;
|
||
|
|
/**
|
||
|
|
* Specifies tab order of the element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
tabindex;
|
||
|
|
/**
|
||
|
|
* Title text of the input text.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
title;
|
||
|
|
/**
|
||
|
|
* Specifies one or more IDs in the DOM that labels the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
ariaLabelledBy;
|
||
|
|
/**
|
||
|
|
* Used to define a string that labels the input element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
ariaLabel;
|
||
|
|
/**
|
||
|
|
* Used to indicate that user input is required on an element before a form can be submitted.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
ariaRequired;
|
||
|
|
/**
|
||
|
|
* Name of the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
name;
|
||
|
|
/**
|
||
|
|
* Indicates that whether the input field is required.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
required;
|
||
|
|
/**
|
||
|
|
* Used to define a string that autocomplete attribute the current element.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
autocomplete;
|
||
|
|
/**
|
||
|
|
* Mininum boundary value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
min;
|
||
|
|
/**
|
||
|
|
* Maximum boundary value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
max;
|
||
|
|
/**
|
||
|
|
* Style class of the increment button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
incrementButtonClass;
|
||
|
|
/**
|
||
|
|
* Style class of the decrement button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
decrementButtonClass;
|
||
|
|
/**
|
||
|
|
* Style class of the increment button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
incrementButtonIcon;
|
||
|
|
/**
|
||
|
|
* Style class of the decrement button.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
decrementButtonIcon;
|
||
|
|
/**
|
||
|
|
* When present, it specifies that an input field is read-only.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
readonly = false;
|
||
|
|
/**
|
||
|
|
* Step factor to increment/decrement the value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
step = 1;
|
||
|
|
/**
|
||
|
|
* Determines whether the input field is empty.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
allowEmpty = true;
|
||
|
|
/**
|
||
|
|
* Locale to be used in formatting.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
locale;
|
||
|
|
/**
|
||
|
|
* The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotiation for details.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
localeMatcher;
|
||
|
|
/**
|
||
|
|
* Defines the behavior of the component, valid values are "decimal" and "currency".
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
mode = 'decimal';
|
||
|
|
/**
|
||
|
|
* The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
currency;
|
||
|
|
/**
|
||
|
|
* How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
currencyDisplay;
|
||
|
|
/**
|
||
|
|
* Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
useGrouping = true;
|
||
|
|
/**
|
||
|
|
* Specifies the input variant of the component.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
variant = 'outlined';
|
||
|
|
/**
|
||
|
|
* The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information).
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
minFractionDigits;
|
||
|
|
/**
|
||
|
|
* The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information).
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
maxFractionDigits;
|
||
|
|
/**
|
||
|
|
* Text to display before the value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
prefix;
|
||
|
|
/**
|
||
|
|
* Text to display after the value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
suffix;
|
||
|
|
/**
|
||
|
|
* Inline style of the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
inputStyle;
|
||
|
|
/**
|
||
|
|
* Style class of the input field.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
inputStyleClass;
|
||
|
|
/**
|
||
|
|
* When enabled, a clear icon is displayed to clear the value.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
showClear = false;
|
||
|
|
/**
|
||
|
|
* When present, it specifies that the component should automatically get focus on load.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
autofocus;
|
||
|
|
/**
|
||
|
|
* When present, it specifies that the element should be disabled.
|
||
|
|
* @group Props
|
||
|
|
*/
|
||
|
|
get disabled() {
|
||
|
|
return this._disabled;
|
||
|
|
}
|
||
|
|
set disabled(disabled) {
|
||
|
|
if (disabled)
|
||
|
|
this.focused = false;
|
||
|
|
this._disabled = disabled;
|
||
|
|
if (this.timer)
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Callback to invoke on input.
|
||
|
|
* @param {InputNumberInputEvent} event - Custom input event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onInput = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke when the component receives focus.
|
||
|
|
* @param {Event} event - Browser event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onFocus = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke when the component loses focus.
|
||
|
|
* @param {Event} event - Browser event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onBlur = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke on input key press.
|
||
|
|
* @param {KeyboardEvent} event - Keyboard event.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onKeyDown = new EventEmitter();
|
||
|
|
/**
|
||
|
|
* Callback to invoke when clear token is clicked.
|
||
|
|
* @group Emits
|
||
|
|
*/
|
||
|
|
onClear = new EventEmitter();
|
||
|
|
input;
|
||
|
|
templates;
|
||
|
|
clearIconTemplate;
|
||
|
|
incrementButtonIconTemplate;
|
||
|
|
decrementButtonIconTemplate;
|
||
|
|
value;
|
||
|
|
onModelChange = () => { };
|
||
|
|
onModelTouched = () => { };
|
||
|
|
focused;
|
||
|
|
initialized;
|
||
|
|
groupChar = '';
|
||
|
|
prefixChar = '';
|
||
|
|
suffixChar = '';
|
||
|
|
isSpecialChar;
|
||
|
|
timer;
|
||
|
|
lastValue;
|
||
|
|
_numeral;
|
||
|
|
numberFormat;
|
||
|
|
_decimal;
|
||
|
|
_decimalChar;
|
||
|
|
_group;
|
||
|
|
_minusSign;
|
||
|
|
_currency;
|
||
|
|
_prefix;
|
||
|
|
_suffix;
|
||
|
|
_index;
|
||
|
|
_disabled;
|
||
|
|
ngControl = null;
|
||
|
|
constructor(document, el, cd, injector) {
|
||
|
|
this.document = document;
|
||
|
|
this.el = el;
|
||
|
|
this.cd = cd;
|
||
|
|
this.injector = injector;
|
||
|
|
}
|
||
|
|
ngOnChanges(simpleChange) {
|
||
|
|
const props = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'prefix', 'suffix'];
|
||
|
|
if (props.some((p) => !!simpleChange[p])) {
|
||
|
|
this.updateConstructParser();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngAfterContentInit() {
|
||
|
|
this.templates.forEach((item) => {
|
||
|
|
switch (item.getType()) {
|
||
|
|
case 'clearicon':
|
||
|
|
this.clearIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'incrementbuttonicon':
|
||
|
|
this.incrementButtonIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
case 'decrementbuttonicon':
|
||
|
|
this.decrementButtonIconTemplate = item.template;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
this.ngControl = this.injector.get(NgControl, null, { optional: true });
|
||
|
|
this.constructParser();
|
||
|
|
this.initialized = true;
|
||
|
|
}
|
||
|
|
getOptions() {
|
||
|
|
return {
|
||
|
|
localeMatcher: this.localeMatcher,
|
||
|
|
style: this.mode,
|
||
|
|
currency: this.currency,
|
||
|
|
currencyDisplay: this.currencyDisplay,
|
||
|
|
useGrouping: this.useGrouping,
|
||
|
|
minimumFractionDigits: this.minFractionDigits,
|
||
|
|
maximumFractionDigits: this.maxFractionDigits
|
||
|
|
};
|
||
|
|
}
|
||
|
|
constructParser() {
|
||
|
|
this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
|
||
|
|
const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse();
|
||
|
|
const index = new Map(numerals.map((d, i) => [d, i]));
|
||
|
|
this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
|
||
|
|
this._group = this.getGroupingExpression();
|
||
|
|
this._minusSign = this.getMinusSignExpression();
|
||
|
|
this._currency = this.getCurrencyExpression();
|
||
|
|
this._decimal = this.getDecimalExpression();
|
||
|
|
this._decimalChar = this.getDecimalChar();
|
||
|
|
this._suffix = this.getSuffixExpression();
|
||
|
|
this._prefix = this.getPrefixExpression();
|
||
|
|
this._index = (d) => index.get(d);
|
||
|
|
}
|
||
|
|
updateConstructParser() {
|
||
|
|
if (this.initialized) {
|
||
|
|
this.constructParser();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
escapeRegExp(text) {
|
||
|
|
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
|
||
|
|
}
|
||
|
|
getDecimalExpression() {
|
||
|
|
const decimalChar = this.getDecimalChar();
|
||
|
|
return new RegExp(`[${decimalChar}]`, 'g');
|
||
|
|
}
|
||
|
|
getDecimalChar() {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { ...this.getOptions(), useGrouping: false });
|
||
|
|
return formatter
|
||
|
|
.format(1.1)
|
||
|
|
.replace(this._currency, '')
|
||
|
|
.trim()
|
||
|
|
.replace(this._numeral, '');
|
||
|
|
}
|
||
|
|
getGroupingExpression() {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { useGrouping: true });
|
||
|
|
this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0);
|
||
|
|
return new RegExp(`[${this.groupChar}]`, 'g');
|
||
|
|
}
|
||
|
|
getMinusSignExpression() {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false });
|
||
|
|
return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
|
||
|
|
}
|
||
|
|
getCurrencyExpression() {
|
||
|
|
if (this.currency) {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
||
|
|
return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, '')}]`, 'g');
|
||
|
|
}
|
||
|
|
return new RegExp(`[]`, 'g');
|
||
|
|
}
|
||
|
|
getPrefixExpression() {
|
||
|
|
if (this.prefix) {
|
||
|
|
this.prefixChar = this.prefix;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay });
|
||
|
|
this.prefixChar = formatter.format(1).split('1')[0];
|
||
|
|
}
|
||
|
|
return new RegExp(`${this.escapeRegExp(this.prefixChar || '')}`, 'g');
|
||
|
|
}
|
||
|
|
getSuffixExpression() {
|
||
|
|
if (this.suffix) {
|
||
|
|
this.suffixChar = this.suffix;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
||
|
|
this.suffixChar = formatter.format(1).split('1')[1];
|
||
|
|
}
|
||
|
|
return new RegExp(`${this.escapeRegExp(this.suffixChar || '')}`, 'g');
|
||
|
|
}
|
||
|
|
formatValue(value) {
|
||
|
|
if (value != null) {
|
||
|
|
if (value === '-') {
|
||
|
|
// Minus sign
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
if (this.format) {
|
||
|
|
let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
|
||
|
|
let formattedValue = formatter.format(value);
|
||
|
|
if (this.prefix && value != this.prefix) {
|
||
|
|
formattedValue = this.prefix + formattedValue;
|
||
|
|
}
|
||
|
|
if (this.suffix && value != this.suffix) {
|
||
|
|
formattedValue = formattedValue + this.suffix;
|
||
|
|
}
|
||
|
|
return formattedValue;
|
||
|
|
}
|
||
|
|
return value.toString();
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
parseValue(text) {
|
||
|
|
const suffixRegex = new RegExp(this._suffix, '');
|
||
|
|
const prefixRegex = new RegExp(this._prefix, '');
|
||
|
|
const currencyRegex = new RegExp(this._currency, '');
|
||
|
|
let filteredText = text
|
||
|
|
.replace(suffixRegex, '')
|
||
|
|
.replace(prefixRegex, '')
|
||
|
|
.trim()
|
||
|
|
.replace(/\s/g, '')
|
||
|
|
.replace(currencyRegex, '')
|
||
|
|
.replace(this._group, '')
|
||
|
|
.replace(this._minusSign, '-')
|
||
|
|
.replace(this._decimal, '.')
|
||
|
|
.replace(this._numeral, this._index);
|
||
|
|
if (filteredText) {
|
||
|
|
if (filteredText === '-')
|
||
|
|
// Minus sign
|
||
|
|
return filteredText;
|
||
|
|
let parsedValue = +filteredText;
|
||
|
|
return isNaN(parsedValue) ? null : parsedValue;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
repeat(event, interval, dir) {
|
||
|
|
if (this.readonly) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let i = interval || 500;
|
||
|
|
this.clearTimer();
|
||
|
|
this.timer = setTimeout(() => {
|
||
|
|
this.repeat(event, 40, dir);
|
||
|
|
}, i);
|
||
|
|
this.spin(event, dir);
|
||
|
|
}
|
||
|
|
spin(event, dir) {
|
||
|
|
let step = this.step * dir;
|
||
|
|
let currentValue = this.parseValue(this.input?.nativeElement.value) || 0;
|
||
|
|
let newValue = this.validateValue(currentValue + step);
|
||
|
|
if (this.maxlength && this.maxlength < this.formatValue(newValue).length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.updateInput(newValue, null, 'spin', null);
|
||
|
|
this.updateModel(event, newValue);
|
||
|
|
this.handleOnInput(event, currentValue, newValue);
|
||
|
|
}
|
||
|
|
clear() {
|
||
|
|
this.value = null;
|
||
|
|
this.onModelChange(this.value);
|
||
|
|
this.onClear.emit();
|
||
|
|
}
|
||
|
|
onUpButtonMouseDown(event) {
|
||
|
|
if (event.button === 2) {
|
||
|
|
this.clearTimer();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.input?.nativeElement.focus();
|
||
|
|
this.repeat(event, null, 1);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onUpButtonMouseUp() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onUpButtonMouseLeave() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onUpButtonKeyDown(event) {
|
||
|
|
if (event.keyCode === 32 || event.keyCode === 13) {
|
||
|
|
this.repeat(event, null, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onUpButtonKeyUp() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDownButtonMouseDown(event) {
|
||
|
|
if (event.button === 2) {
|
||
|
|
this.clearTimer();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.input?.nativeElement.focus();
|
||
|
|
this.repeat(event, null, -1);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDownButtonMouseUp() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDownButtonMouseLeave() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDownButtonKeyUp() {
|
||
|
|
if (!this.disabled) {
|
||
|
|
this.clearTimer();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onDownButtonKeyDown(event) {
|
||
|
|
if (event.keyCode === 32 || event.keyCode === 13) {
|
||
|
|
this.repeat(event, null, -1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
onUserInput(event) {
|
||
|
|
if (this.readonly) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.isSpecialChar) {
|
||
|
|
event.target.value = this.lastValue;
|
||
|
|
}
|
||
|
|
this.isSpecialChar = false;
|
||
|
|
}
|
||
|
|
onInputKeyDown(event) {
|
||
|
|
if (this.readonly) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.lastValue = event.target.value;
|
||
|
|
if (event.shiftKey || event.altKey) {
|
||
|
|
this.isSpecialChar = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let selectionStart = event.target.selectionStart;
|
||
|
|
let selectionEnd = event.target.selectionEnd;
|
||
|
|
let inputValue = event.target.value;
|
||
|
|
let newValueStr = null;
|
||
|
|
if (event.altKey) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
switch (event.key) {
|
||
|
|
case 'ArrowUp':
|
||
|
|
this.spin(event, 1);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'ArrowDown':
|
||
|
|
this.spin(event, -1);
|
||
|
|
event.preventDefault();
|
||
|
|
break;
|
||
|
|
case 'ArrowLeft':
|
||
|
|
for (let index = selectionStart; index <= inputValue.length; index++) {
|
||
|
|
const previousCharIndex = index === 0 ? 0 : index - 1;
|
||
|
|
if (this.isNumeralChar(inputValue.charAt(previousCharIndex))) {
|
||
|
|
this.input.nativeElement.setSelectionRange(index, index);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'ArrowRight':
|
||
|
|
for (let index = selectionEnd; index >= 0; index--) {
|
||
|
|
if (this.isNumeralChar(inputValue.charAt(index))) {
|
||
|
|
this.input.nativeElement.setSelectionRange(index, index);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'Tab':
|
||
|
|
case 'Enter':
|
||
|
|
newValueStr = this.validateValue(this.parseValue(this.input.nativeElement.value));
|
||
|
|
this.input.nativeElement.value = this.formatValue(newValueStr);
|
||
|
|
this.input.nativeElement.setAttribute('aria-valuenow', newValueStr);
|
||
|
|
this.updateModel(event, newValueStr);
|
||
|
|
break;
|
||
|
|
case 'Backspace': {
|
||
|
|
event.preventDefault();
|
||
|
|
if (selectionStart === selectionEnd) {
|
||
|
|
if ((selectionStart == 1 && this.prefix) || (selectionStart == inputValue.length && this.suffix)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
const deleteChar = inputValue.charAt(selectionStart - 1);
|
||
|
|
const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue);
|
||
|
|
if (this.isNumeralChar(deleteChar)) {
|
||
|
|
const decimalLength = this.getDecimalLength(inputValue);
|
||
|
|
if (this._group.test(deleteChar)) {
|
||
|
|
this._group.lastIndex = 0;
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
|
||
|
|
}
|
||
|
|
else if (this._decimal.test(deleteChar)) {
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
if (decimalLength) {
|
||
|
|
this.input?.nativeElement.setSelectionRange(selectionStart - 1, selectionStart - 1);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
|
||
|
|
const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
|
||
|
|
}
|
||
|
|
else if (decimalCharIndexWithoutPrefix === 1) {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
|
||
|
|
newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (this.mode === 'currency' && deleteChar.search(this._currency) != -1) {
|
||
|
|
newValueStr = inputValue.slice(1);
|
||
|
|
}
|
||
|
|
this.updateValue(event, newValueStr, null, 'delete-single');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
|
||
|
|
this.updateValue(event, newValueStr, null, 'delete-range');
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
case 'Delete':
|
||
|
|
event.preventDefault();
|
||
|
|
if (selectionStart === selectionEnd) {
|
||
|
|
if ((selectionStart == 0 && this.prefix) || (selectionStart == inputValue.length - 1 && this.suffix)) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
const deleteChar = inputValue.charAt(selectionStart);
|
||
|
|
const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue);
|
||
|
|
if (this.isNumeralChar(deleteChar)) {
|
||
|
|
const decimalLength = this.getDecimalLength(inputValue);
|
||
|
|
if (this._group.test(deleteChar)) {
|
||
|
|
this._group.lastIndex = 0;
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
|
||
|
|
}
|
||
|
|
else if (this._decimal.test(deleteChar)) {
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
if (decimalLength) {
|
||
|
|
this.input?.nativeElement.setSelectionRange(selectionStart + 1, selectionStart + 1);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
|
||
|
|
const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0';
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
|
||
|
|
}
|
||
|
|
else if (decimalCharIndexWithoutPrefix === 1) {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
|
||
|
|
newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : '';
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.updateValue(event, newValueStr, null, 'delete-back-single');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
|
||
|
|
this.updateValue(event, newValueStr, null, 'delete-range');
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'Home':
|
||
|
|
if (this.min) {
|
||
|
|
this.updateModel(event, this.min);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case 'End':
|
||
|
|
if (this.max) {
|
||
|
|
this.updateModel(event, this.max);
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
this.onKeyDown.emit(event);
|
||
|
|
}
|
||
|
|
onInputKeyPress(event) {
|
||
|
|
if (this.readonly) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let code = event.which || event.keyCode;
|
||
|
|
let char = String.fromCharCode(code);
|
||
|
|
let isDecimalSign = this.isDecimalSign(char);
|
||
|
|
const isMinusSign = this.isMinusSign(char);
|
||
|
|
if (code != 13) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
if (!isDecimalSign && event.code === 'NumpadDecimal') {
|
||
|
|
isDecimalSign = true;
|
||
|
|
char = this._decimalChar;
|
||
|
|
code = char.charCodeAt(0);
|
||
|
|
}
|
||
|
|
const newValue = this.parseValue(this.input.nativeElement.value + char);
|
||
|
|
const newValueStr = newValue != null ? newValue.toString() : '';
|
||
|
|
if (this.maxlength && this.getSelectedText()?.length == this.maxlength) {
|
||
|
|
this.insert(event, char, { isDecimalSign, isMinusSign });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.maxlength && newValueStr.length > this.maxlength) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
|
||
|
|
this.insert(event, char, { isDecimalSign, isMinusSign });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getSelectedText() {
|
||
|
|
return (window
|
||
|
|
?.getSelection()
|
||
|
|
?.toString()
|
||
|
|
.replaceAll(/[^0-9']/g, '') || '');
|
||
|
|
}
|
||
|
|
onPaste(event) {
|
||
|
|
if (!this.disabled && !this.readonly) {
|
||
|
|
event.preventDefault();
|
||
|
|
let data = (event.clipboardData || this.document.defaultView['clipboardData']).getData('Text');
|
||
|
|
if (data) {
|
||
|
|
if (this.maxlength) {
|
||
|
|
data = data.toString().substring(0, this.maxlength);
|
||
|
|
}
|
||
|
|
let filteredData = this.parseValue(data);
|
||
|
|
if (filteredData != null) {
|
||
|
|
this.insert(event, filteredData.toString());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
allowMinusSign() {
|
||
|
|
return this.min == null || this.min < 0;
|
||
|
|
}
|
||
|
|
isMinusSign(char) {
|
||
|
|
if (this._minusSign.test(char) || char === '-') {
|
||
|
|
this._minusSign.lastIndex = 0;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
isDecimalSign(char) {
|
||
|
|
if (this._decimal.test(char)) {
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
isDecimalMode() {
|
||
|
|
return this.mode === 'decimal';
|
||
|
|
}
|
||
|
|
getDecimalCharIndexes(val) {
|
||
|
|
let decimalCharIndex = val.search(this._decimal);
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
const filteredVal = val
|
||
|
|
.replace(this._prefix, '')
|
||
|
|
.trim()
|
||
|
|
.replace(/\s/g, '')
|
||
|
|
.replace(this._currency, '');
|
||
|
|
const decimalCharIndexWithoutPrefix = filteredVal.search(this._decimal);
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
return { decimalCharIndex, decimalCharIndexWithoutPrefix };
|
||
|
|
}
|
||
|
|
getCharIndexes(val) {
|
||
|
|
const decimalCharIndex = val.search(this._decimal);
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
const minusCharIndex = val.search(this._minusSign);
|
||
|
|
this._minusSign.lastIndex = 0;
|
||
|
|
const suffixCharIndex = val.search(this._suffix);
|
||
|
|
this._suffix.lastIndex = 0;
|
||
|
|
const currencyCharIndex = val.search(this._currency);
|
||
|
|
this._currency.lastIndex = 0;
|
||
|
|
return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex };
|
||
|
|
}
|
||
|
|
insert(event, text, sign = { isDecimalSign: false, isMinusSign: false }) {
|
||
|
|
const minusCharIndexOnText = text.search(this._minusSign);
|
||
|
|
this._minusSign.lastIndex = 0;
|
||
|
|
if (!this.allowMinusSign() && minusCharIndexOnText !== -1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let selectionStart = this.input?.nativeElement.selectionStart;
|
||
|
|
let selectionEnd = this.input?.nativeElement.selectionEnd;
|
||
|
|
let inputValue = this.input?.nativeElement.value.trim();
|
||
|
|
const { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex } = this.getCharIndexes(inputValue);
|
||
|
|
let newValueStr;
|
||
|
|
if (sign.isMinusSign) {
|
||
|
|
if (selectionStart === 0) {
|
||
|
|
newValueStr = inputValue;
|
||
|
|
if (minusCharIndex === -1 || selectionEnd !== 0) {
|
||
|
|
newValueStr = this.insertText(inputValue, text, 0, selectionEnd);
|
||
|
|
}
|
||
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (sign.isDecimalSign) {
|
||
|
|
if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
|
||
|
|
this.updateValue(event, inputValue, text, 'insert');
|
||
|
|
}
|
||
|
|
else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
|
||
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
||
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
||
|
|
}
|
||
|
|
else if (decimalCharIndex === -1 && this.maxFractionDigits) {
|
||
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
||
|
|
this.updateValue(event, newValueStr, text, 'insert');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
|
||
|
|
const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
|
||
|
|
if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
|
||
|
|
if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
|
||
|
|
const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
|
||
|
|
newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
|
||
|
|
this.updateValue(event, newValueStr, text, operation);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
|
||
|
|
this.updateValue(event, newValueStr, text, operation);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
insertText(value, text, start, end) {
|
||
|
|
let textSplit = text === '.' ? text : text.split('.');
|
||
|
|
if (textSplit.length === 2) {
|
||
|
|
const decimalCharIndex = value.slice(start, end).search(this._decimal);
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
return decimalCharIndex > 0 ? value.slice(0, start) + this.formatValue(text) + value.slice(end) : value || this.formatValue(text);
|
||
|
|
}
|
||
|
|
else if (end - start === value.length) {
|
||
|
|
return this.formatValue(text);
|
||
|
|
}
|
||
|
|
else if (start === 0) {
|
||
|
|
return text + value.slice(end);
|
||
|
|
}
|
||
|
|
else if (end === value.length) {
|
||
|
|
return value.slice(0, start) + text;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return value.slice(0, start) + text + value.slice(end);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
deleteRange(value, start, end) {
|
||
|
|
let newValueStr;
|
||
|
|
if (end - start === value.length)
|
||
|
|
newValueStr = '';
|
||
|
|
else if (start === 0)
|
||
|
|
newValueStr = value.slice(end);
|
||
|
|
else if (end === value.length)
|
||
|
|
newValueStr = value.slice(0, start);
|
||
|
|
else
|
||
|
|
newValueStr = value.slice(0, start) + value.slice(end);
|
||
|
|
return newValueStr;
|
||
|
|
}
|
||
|
|
initCursor() {
|
||
|
|
let selectionStart = this.input?.nativeElement.selectionStart;
|
||
|
|
let inputValue = this.input?.nativeElement.value;
|
||
|
|
let valueLength = inputValue.length;
|
||
|
|
let index = null;
|
||
|
|
// remove prefix
|
||
|
|
let prefixLength = (this.prefixChar || '').length;
|
||
|
|
inputValue = inputValue.replace(this._prefix, '');
|
||
|
|
selectionStart = selectionStart - prefixLength;
|
||
|
|
let char = inputValue.charAt(selectionStart);
|
||
|
|
if (this.isNumeralChar(char)) {
|
||
|
|
return selectionStart + prefixLength;
|
||
|
|
}
|
||
|
|
//left
|
||
|
|
let i = selectionStart - 1;
|
||
|
|
while (i >= 0) {
|
||
|
|
char = inputValue.charAt(i);
|
||
|
|
if (this.isNumeralChar(char)) {
|
||
|
|
index = i + prefixLength;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
i--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (index !== null) {
|
||
|
|
this.input?.nativeElement.setSelectionRange(index + 1, index + 1);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
i = selectionStart;
|
||
|
|
while (i < valueLength) {
|
||
|
|
char = inputValue.charAt(i);
|
||
|
|
if (this.isNumeralChar(char)) {
|
||
|
|
index = i + prefixLength;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (index !== null) {
|
||
|
|
this.input?.nativeElement.setSelectionRange(index, index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return index || 0;
|
||
|
|
}
|
||
|
|
onInputClick() {
|
||
|
|
const currentValue = this.input?.nativeElement.value;
|
||
|
|
if (!this.readonly && currentValue !== DomHandler.getSelection()) {
|
||
|
|
this.initCursor();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
isNumeralChar(char) {
|
||
|
|
if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
|
||
|
|
this.resetRegex();
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
resetRegex() {
|
||
|
|
this._numeral.lastIndex = 0;
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
this._group.lastIndex = 0;
|
||
|
|
this._minusSign.lastIndex = 0;
|
||
|
|
}
|
||
|
|
updateValue(event, valueStr, insertedValueStr, operation) {
|
||
|
|
let currentValue = this.input?.nativeElement.value;
|
||
|
|
let newValue = null;
|
||
|
|
if (valueStr != null) {
|
||
|
|
newValue = this.parseValue(valueStr);
|
||
|
|
newValue = !newValue && !this.allowEmpty ? 0 : newValue;
|
||
|
|
this.updateInput(newValue, insertedValueStr, operation, valueStr);
|
||
|
|
this.handleOnInput(event, currentValue, newValue);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
handleOnInput(event, currentValue, newValue) {
|
||
|
|
if (this.isValueChanged(currentValue, newValue)) {
|
||
|
|
this.input.nativeElement.value = this.formatValue(newValue);
|
||
|
|
this.input?.nativeElement.setAttribute('aria-valuenow', newValue);
|
||
|
|
this.updateModel(event, newValue);
|
||
|
|
this.onInput.emit({ originalEvent: event, value: newValue, formattedValue: currentValue });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
isValueChanged(currentValue, newValue) {
|
||
|
|
if (newValue === null && currentValue !== null) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (newValue != null) {
|
||
|
|
let parsedCurrentValue = typeof currentValue === 'string' ? this.parseValue(currentValue) : currentValue;
|
||
|
|
return newValue !== parsedCurrentValue;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
validateValue(value) {
|
||
|
|
if (value === '-' || value == null) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
if (this.min != null && value < this.min) {
|
||
|
|
return this.min;
|
||
|
|
}
|
||
|
|
if (this.max != null && value > this.max) {
|
||
|
|
return this.max;
|
||
|
|
}
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
updateInput(value, insertedValueStr, operation, valueStr) {
|
||
|
|
insertedValueStr = insertedValueStr || '';
|
||
|
|
let inputValue = this.input?.nativeElement.value;
|
||
|
|
let newValue = this.formatValue(value);
|
||
|
|
let currentLength = inputValue.length;
|
||
|
|
if (newValue !== valueStr) {
|
||
|
|
newValue = this.concatValues(newValue, valueStr);
|
||
|
|
}
|
||
|
|
if (currentLength === 0) {
|
||
|
|
this.input.nativeElement.value = newValue;
|
||
|
|
this.input.nativeElement.setSelectionRange(0, 0);
|
||
|
|
const index = this.initCursor();
|
||
|
|
const selectionEnd = index + insertedValueStr.length;
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
let selectionStart = this.input.nativeElement.selectionStart;
|
||
|
|
let selectionEnd = this.input.nativeElement.selectionEnd;
|
||
|
|
if (this.maxlength && newValue.length > this.maxlength) {
|
||
|
|
newValue = newValue.slice(0, this.maxlength);
|
||
|
|
selectionStart = Math.min(selectionStart, this.maxlength);
|
||
|
|
selectionEnd = Math.min(selectionEnd, this.maxlength);
|
||
|
|
}
|
||
|
|
if (this.maxlength && this.maxlength < newValue.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.input.nativeElement.value = newValue;
|
||
|
|
let newLength = newValue.length;
|
||
|
|
if (operation === 'range-insert') {
|
||
|
|
const startValue = this.parseValue((inputValue || '').slice(0, selectionStart));
|
||
|
|
const startValueStr = startValue !== null ? startValue.toString() : '';
|
||
|
|
const startExpr = startValueStr.split('').join(`(${this.groupChar})?`);
|
||
|
|
const sRegex = new RegExp(startExpr, 'g');
|
||
|
|
sRegex.test(newValue);
|
||
|
|
const tExpr = insertedValueStr.split('').join(`(${this.groupChar})?`);
|
||
|
|
const tRegex = new RegExp(tExpr, 'g');
|
||
|
|
tRegex.test(newValue.slice(sRegex.lastIndex));
|
||
|
|
selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
else if (newLength === currentLength) {
|
||
|
|
if (operation === 'insert' || operation === 'delete-back-single')
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
|
||
|
|
else if (operation === 'delete-single')
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
|
||
|
|
else if (operation === 'delete-range' || operation === 'spin')
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
else if (operation === 'delete-back-single') {
|
||
|
|
let prevChar = inputValue.charAt(selectionEnd - 1);
|
||
|
|
let nextChar = inputValue.charAt(selectionEnd);
|
||
|
|
let diff = currentLength - newLength;
|
||
|
|
let isGroupChar = this._group.test(nextChar);
|
||
|
|
if (isGroupChar && diff === 1) {
|
||
|
|
selectionEnd += 1;
|
||
|
|
}
|
||
|
|
else if (!isGroupChar && this.isNumeralChar(prevChar)) {
|
||
|
|
selectionEnd += -1 * diff + 1;
|
||
|
|
}
|
||
|
|
this._group.lastIndex = 0;
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
else if (inputValue === '-' && operation === 'insert') {
|
||
|
|
this.input.nativeElement.setSelectionRange(0, 0);
|
||
|
|
const index = this.initCursor();
|
||
|
|
const selectionEnd = index + insertedValueStr.length + 1;
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
selectionEnd = selectionEnd + (newLength - currentLength);
|
||
|
|
this.input.nativeElement.setSelectionRange(selectionEnd, selectionEnd);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.input.nativeElement.setAttribute('aria-valuenow', value);
|
||
|
|
}
|
||
|
|
concatValues(val1, val2) {
|
||
|
|
if (val1 && val2) {
|
||
|
|
let decimalCharIndex = val2.search(this._decimal);
|
||
|
|
this._decimal.lastIndex = 0;
|
||
|
|
if (this.suffixChar) {
|
||
|
|
return decimalCharIndex !== -1 ? val1 : val1.replace(this.suffixChar, '').split(this._decimal)[0] + val2.replace(this.suffixChar, '').slice(decimalCharIndex) + this.suffixChar;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return val1;
|
||
|
|
}
|
||
|
|
getDecimalLength(value) {
|
||
|
|
if (value) {
|
||
|
|
const valueSplit = value.split(this._decimal);
|
||
|
|
if (valueSplit.length === 2) {
|
||
|
|
return valueSplit[1]
|
||
|
|
.replace(this._suffix, '')
|
||
|
|
.trim()
|
||
|
|
.replace(/\s/g, '')
|
||
|
|
.replace(this._currency, '').length;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
onInputFocus(event) {
|
||
|
|
this.focused = true;
|
||
|
|
this.onFocus.emit(event);
|
||
|
|
}
|
||
|
|
onInputBlur(event) {
|
||
|
|
this.focused = false;
|
||
|
|
const newValueNumber = this.validateValue(this.parseValue(this.input.nativeElement.value));
|
||
|
|
const newValueString = newValueNumber?.toString();
|
||
|
|
this.input.nativeElement.value = this.formatValue(newValueString);
|
||
|
|
this.input.nativeElement.setAttribute('aria-valuenow', newValueString);
|
||
|
|
this.updateModel(event, newValueNumber);
|
||
|
|
this.onBlur.emit(event);
|
||
|
|
}
|
||
|
|
formattedValue() {
|
||
|
|
const val = !this.value && !this.allowEmpty ? 0 : this.value;
|
||
|
|
return this.formatValue(val);
|
||
|
|
}
|
||
|
|
updateModel(event, value) {
|
||
|
|
const isBlurUpdateOnMode = this.ngControl?.control?.updateOn === 'blur';
|
||
|
|
if (this.value !== value) {
|
||
|
|
this.value = value;
|
||
|
|
if (!(isBlurUpdateOnMode && this.focused)) {
|
||
|
|
this.onModelChange(value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (isBlurUpdateOnMode) {
|
||
|
|
this.onModelChange(value);
|
||
|
|
}
|
||
|
|
this.onModelTouched();
|
||
|
|
}
|
||
|
|
writeValue(value) {
|
||
|
|
this.value = value;
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
registerOnChange(fn) {
|
||
|
|
this.onModelChange = fn;
|
||
|
|
}
|
||
|
|
registerOnTouched(fn) {
|
||
|
|
this.onModelTouched = fn;
|
||
|
|
}
|
||
|
|
setDisabledState(val) {
|
||
|
|
this.disabled = val;
|
||
|
|
this.cd.markForCheck();
|
||
|
|
}
|
||
|
|
get filled() {
|
||
|
|
return this.value != null && this.value.toString().length > 0;
|
||
|
|
}
|
||
|
|
clearTimer() {
|
||
|
|
if (this.timer) {
|
||
|
|
clearInterval(this.timer);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: InputNumber, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
||
|
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.7", type: InputNumber, selector: "p-inputNumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: ["size", "size", numberAttribute], maxlength: ["maxlength", "maxlength", numberAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], name: "name", required: ["required", "required", booleanAttribute], autocomplete: "autocomplete", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], step: ["step", "step", numberAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], variant: "variant", minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "p-element p-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
||
|
|
<span
|
||
|
|
[ngClass]="{
|
||
|
|
'p-inputnumber p-component': true,
|
||
|
|
'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
|
||
|
|
'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
|
||
|
|
'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
|
||
|
|
}"
|
||
|
|
[ngStyle]="style"
|
||
|
|
[class]="styleClass"
|
||
|
|
[attr.data-pc-name]="'inputnumber'"
|
||
|
|
[attr.data-pc-section]="'root'"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
pInputText
|
||
|
|
#input
|
||
|
|
[attr.id]="inputId"
|
||
|
|
role="spinbutton"
|
||
|
|
[ngClass]="'p-inputnumber-input'"
|
||
|
|
[ngStyle]="inputStyle"
|
||
|
|
[class]="inputStyleClass"
|
||
|
|
[value]="formattedValue()"
|
||
|
|
[variant]="variant"
|
||
|
|
[attr.aria-valuemin]="min"
|
||
|
|
[attr.aria-valuemax]="max"
|
||
|
|
[attr.aria-valuenow]="value"
|
||
|
|
[disabled]="disabled"
|
||
|
|
[readonly]="readonly"
|
||
|
|
[attr.placeholder]="placeholder"
|
||
|
|
[attr.aria-label]="ariaLabel"
|
||
|
|
[attr.aria-labelledby]="ariaLabelledBy"
|
||
|
|
[attr.title]="title"
|
||
|
|
[attr.size]="size"
|
||
|
|
[attr.name]="name"
|
||
|
|
[attr.autocomplete]="autocomplete"
|
||
|
|
[attr.maxlength]="maxlength"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-required]="ariaRequired"
|
||
|
|
[attr.required]="required"
|
||
|
|
[attr.min]="min"
|
||
|
|
[attr.max]="max"
|
||
|
|
inputmode="decimal"
|
||
|
|
(input)="onUserInput($event)"
|
||
|
|
(keydown)="onInputKeyDown($event)"
|
||
|
|
(keypress)="onInputKeyPress($event)"
|
||
|
|
(paste)="onPaste($event)"
|
||
|
|
(click)="onInputClick()"
|
||
|
|
(focus)="onInputFocus($event)"
|
||
|
|
(blur)="onInputBlur($event)"
|
||
|
|
[attr.data-pc-section]="'input'"
|
||
|
|
pAutoFocus
|
||
|
|
[autofocus]="autofocus"
|
||
|
|
/>
|
||
|
|
<ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
|
||
|
|
<TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
|
||
|
|
<span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
|
||
|
|
<ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
</ng-container>
|
||
|
|
<span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="incrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
(mousedown)="onUpButtonMouseDown($event)"
|
||
|
|
(mouseup)="onUpButtonMouseUp()"
|
||
|
|
(mouseleave)="onUpButtonMouseLeave()"
|
||
|
|
(keydown)="onUpButtonKeyDown($event)"
|
||
|
|
(keyup)="onUpButtonKeyUp()"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
[attr.data-pc-section]="'incrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!incrementButtonIcon">
|
||
|
|
<AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="decrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onDownButtonMouseDown($event)"
|
||
|
|
(mouseup)="onDownButtonMouseUp()"
|
||
|
|
(mouseleave)="onDownButtonMouseLeave()"
|
||
|
|
(keydown)="onDownButtonKeyDown($event)"
|
||
|
|
(keyup)="onDownButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="decrementbutton"
|
||
|
|
>
|
||
|
|
<span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!decrementButtonIcon">
|
||
|
|
<AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
*ngIf="showButtons && buttonLayout !== 'stacked'"
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
|
||
|
|
[class]="incrementButtonClass"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onUpButtonMouseDown($event)"
|
||
|
|
(mouseup)="onUpButtonMouseUp()"
|
||
|
|
(mouseleave)="onUpButtonMouseLeave()"
|
||
|
|
(keydown)="onUpButtonKeyDown($event)"
|
||
|
|
(keyup)="onUpButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="'incrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!incrementButtonIcon">
|
||
|
|
<AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
*ngIf="showButtons && buttonLayout !== 'stacked'"
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="decrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onDownButtonMouseDown($event)"
|
||
|
|
(mouseup)="onDownButtonMouseUp()"
|
||
|
|
(mouseleave)="onDownButtonMouseLeave()"
|
||
|
|
(keydown)="onDownButtonKeyDown($event)"
|
||
|
|
(keyup)="onDownButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="'decrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!decrementButtonIcon">
|
||
|
|
<AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
`, isInline: true, styles: ["@layer primeng{p-inputnumber,.p-inputnumber{display:inline-flex}.p-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label{display:none}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-button-group{display:flex;flex-direction:column}.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button{flex:1 1 auto}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.p-inputnumber-buttons-horizontal .p-inputnumber-input{order:2;border-radius:0}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-vertical{flex-direction:column}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.p-inputnumber-buttons-vertical .p-inputnumber-input{order:2;border-radius:0;text-align:center}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.p-inputnumber-input{flex:1 1 auto}.p-fluid p-inputnumber,.p-fluid .p-inputnumber{width:100%}.p-fluid .p-inputnumber .p-inputnumber-input{width:1%}.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input{width:100%}.p-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-inputnumber-clearable{position:relative}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i2.InputText), selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i0.forwardRef(() => i3.ButtonDirective), selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i0.forwardRef(() => i4.AutoFocus), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(() => AngleUpIcon), selector: "AngleUpIcon" }, { kind: "component", type: i0.forwardRef(() => AngleDownIcon), selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: InputNumber, decorators: [{
|
||
|
|
type: Component,
|
||
|
|
args: [{ selector: 'p-inputNumber', template: `
|
||
|
|
<span
|
||
|
|
[ngClass]="{
|
||
|
|
'p-inputnumber p-component': true,
|
||
|
|
'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
|
||
|
|
'p-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',
|
||
|
|
'p-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical'
|
||
|
|
}"
|
||
|
|
[ngStyle]="style"
|
||
|
|
[class]="styleClass"
|
||
|
|
[attr.data-pc-name]="'inputnumber'"
|
||
|
|
[attr.data-pc-section]="'root'"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
pInputText
|
||
|
|
#input
|
||
|
|
[attr.id]="inputId"
|
||
|
|
role="spinbutton"
|
||
|
|
[ngClass]="'p-inputnumber-input'"
|
||
|
|
[ngStyle]="inputStyle"
|
||
|
|
[class]="inputStyleClass"
|
||
|
|
[value]="formattedValue()"
|
||
|
|
[variant]="variant"
|
||
|
|
[attr.aria-valuemin]="min"
|
||
|
|
[attr.aria-valuemax]="max"
|
||
|
|
[attr.aria-valuenow]="value"
|
||
|
|
[disabled]="disabled"
|
||
|
|
[readonly]="readonly"
|
||
|
|
[attr.placeholder]="placeholder"
|
||
|
|
[attr.aria-label]="ariaLabel"
|
||
|
|
[attr.aria-labelledby]="ariaLabelledBy"
|
||
|
|
[attr.title]="title"
|
||
|
|
[attr.size]="size"
|
||
|
|
[attr.name]="name"
|
||
|
|
[attr.autocomplete]="autocomplete"
|
||
|
|
[attr.maxlength]="maxlength"
|
||
|
|
[attr.tabindex]="tabindex"
|
||
|
|
[attr.aria-required]="ariaRequired"
|
||
|
|
[attr.required]="required"
|
||
|
|
[attr.min]="min"
|
||
|
|
[attr.max]="max"
|
||
|
|
inputmode="decimal"
|
||
|
|
(input)="onUserInput($event)"
|
||
|
|
(keydown)="onInputKeyDown($event)"
|
||
|
|
(keypress)="onInputKeyPress($event)"
|
||
|
|
(paste)="onPaste($event)"
|
||
|
|
(click)="onInputClick()"
|
||
|
|
(focus)="onInputFocus($event)"
|
||
|
|
(blur)="onInputBlur($event)"
|
||
|
|
[attr.data-pc-section]="'input'"
|
||
|
|
pAutoFocus
|
||
|
|
[autofocus]="autofocus"
|
||
|
|
/>
|
||
|
|
<ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
|
||
|
|
<TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
|
||
|
|
<span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
|
||
|
|
<ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
|
||
|
|
</span>
|
||
|
|
</ng-container>
|
||
|
|
<span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="incrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
(mousedown)="onUpButtonMouseDown($event)"
|
||
|
|
(mouseup)="onUpButtonMouseUp()"
|
||
|
|
(mouseleave)="onUpButtonMouseLeave()"
|
||
|
|
(keydown)="onUpButtonKeyDown($event)"
|
||
|
|
(keyup)="onUpButtonKeyUp()"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
[attr.data-pc-section]="'incrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!incrementButtonIcon">
|
||
|
|
<AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="decrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onDownButtonMouseDown($event)"
|
||
|
|
(mouseup)="onDownButtonMouseUp()"
|
||
|
|
(mouseleave)="onDownButtonMouseLeave()"
|
||
|
|
(keydown)="onDownButtonKeyDown($event)"
|
||
|
|
(keyup)="onDownButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="decrementbutton"
|
||
|
|
>
|
||
|
|
<span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!decrementButtonIcon">
|
||
|
|
<AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
<button
|
||
|
|
*ngIf="showButtons && buttonLayout !== 'stacked'"
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
|
||
|
|
[class]="incrementButtonClass"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onUpButtonMouseDown($event)"
|
||
|
|
(mouseup)="onUpButtonMouseUp()"
|
||
|
|
(mouseleave)="onUpButtonMouseLeave()"
|
||
|
|
(keydown)="onUpButtonKeyDown($event)"
|
||
|
|
(keyup)="onUpButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="'incrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!incrementButtonIcon">
|
||
|
|
<AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
*ngIf="showButtons && buttonLayout !== 'stacked'"
|
||
|
|
type="button"
|
||
|
|
pButton
|
||
|
|
[ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
|
||
|
|
class="p-button-icon-only"
|
||
|
|
[class]="decrementButtonClass"
|
||
|
|
[disabled]="disabled"
|
||
|
|
tabindex="-1"
|
||
|
|
[attr.aria-hidden]="true"
|
||
|
|
(mousedown)="onDownButtonMouseDown($event)"
|
||
|
|
(mouseup)="onDownButtonMouseUp()"
|
||
|
|
(mouseleave)="onDownButtonMouseLeave()"
|
||
|
|
(keydown)="onDownButtonKeyDown($event)"
|
||
|
|
(keyup)="onDownButtonKeyUp()"
|
||
|
|
[attr.data-pc-section]="'decrementbutton'"
|
||
|
|
>
|
||
|
|
<span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
|
||
|
|
<ng-container *ngIf="!decrementButtonIcon">
|
||
|
|
<AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
|
||
|
|
<ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
|
||
|
|
</ng-container>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUTNUMBER_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, host: {
|
||
|
|
class: 'p-element p-inputwrapper',
|
||
|
|
'[class.p-inputwrapper-filled]': 'filled',
|
||
|
|
'[class.p-inputwrapper-focus]': 'focused',
|
||
|
|
'[class.p-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"'
|
||
|
|
}, styles: ["@layer primeng{p-inputnumber,.p-inputnumber{display:inline-flex}.p-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label{display:none}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;padding:0}.p-inputnumber-buttons-stacked .p-inputnumber-button-group{display:flex;flex-direction:column}.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button{flex:1 1 auto}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.p-inputnumber-buttons-horizontal .p-inputnumber-input{order:2;border-radius:0}.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.p-inputnumber-buttons-vertical{flex-direction:column}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.p-inputnumber-buttons-vertical .p-inputnumber-input{order:2;border-radius:0;text-align:center}.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.p-inputnumber-input{flex:1 1 auto}.p-fluid p-inputnumber,.p-fluid .p-inputnumber{width:100%}.p-fluid .p-inputnumber .p-inputnumber-input{width:1%}.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input{width:100%}.p-inputnumber-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-inputnumber-clearable{position:relative}}\n"] }]
|
||
|
|
}], ctorParameters: () => [{ type: Document, decorators: [{
|
||
|
|
type: Inject,
|
||
|
|
args: [DOCUMENT]
|
||
|
|
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { showButtons: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], format: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], buttonLayout: [{
|
||
|
|
type: Input
|
||
|
|
}], inputId: [{
|
||
|
|
type: Input
|
||
|
|
}], styleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], style: [{
|
||
|
|
type: Input
|
||
|
|
}], placeholder: [{
|
||
|
|
type: Input
|
||
|
|
}], size: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], maxlength: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], tabindex: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], title: [{
|
||
|
|
type: Input
|
||
|
|
}], ariaLabelledBy: [{
|
||
|
|
type: Input
|
||
|
|
}], ariaLabel: [{
|
||
|
|
type: Input
|
||
|
|
}], ariaRequired: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], name: [{
|
||
|
|
type: Input
|
||
|
|
}], required: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], autocomplete: [{
|
||
|
|
type: Input
|
||
|
|
}], min: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], max: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], incrementButtonClass: [{
|
||
|
|
type: Input
|
||
|
|
}], decrementButtonClass: [{
|
||
|
|
type: Input
|
||
|
|
}], incrementButtonIcon: [{
|
||
|
|
type: Input
|
||
|
|
}], decrementButtonIcon: [{
|
||
|
|
type: Input
|
||
|
|
}], readonly: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], step: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: numberAttribute }]
|
||
|
|
}], allowEmpty: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], locale: [{
|
||
|
|
type: Input
|
||
|
|
}], localeMatcher: [{
|
||
|
|
type: Input
|
||
|
|
}], mode: [{
|
||
|
|
type: Input
|
||
|
|
}], currency: [{
|
||
|
|
type: Input
|
||
|
|
}], currencyDisplay: [{
|
||
|
|
type: Input
|
||
|
|
}], useGrouping: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], variant: [{
|
||
|
|
type: Input
|
||
|
|
}], minFractionDigits: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: (value) => numberAttribute(value, null) }]
|
||
|
|
}], maxFractionDigits: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: (value) => numberAttribute(value, null) }]
|
||
|
|
}], prefix: [{
|
||
|
|
type: Input
|
||
|
|
}], suffix: [{
|
||
|
|
type: Input
|
||
|
|
}], inputStyle: [{
|
||
|
|
type: Input
|
||
|
|
}], inputStyleClass: [{
|
||
|
|
type: Input
|
||
|
|
}], showClear: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], autofocus: [{
|
||
|
|
type: Input,
|
||
|
|
args: [{ transform: booleanAttribute }]
|
||
|
|
}], disabled: [{
|
||
|
|
type: Input
|
||
|
|
}], onInput: [{
|
||
|
|
type: Output
|
||
|
|
}], onFocus: [{
|
||
|
|
type: Output
|
||
|
|
}], onBlur: [{
|
||
|
|
type: Output
|
||
|
|
}], onKeyDown: [{
|
||
|
|
type: Output
|
||
|
|
}], onClear: [{
|
||
|
|
type: Output
|
||
|
|
}], input: [{
|
||
|
|
type: ViewChild,
|
||
|
|
args: ['input']
|
||
|
|
}], templates: [{
|
||
|
|
type: ContentChildren,
|
||
|
|
args: [PrimeTemplate]
|
||
|
|
}] } });
|
||
|
|
class InputNumberModule {
|
||
|
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
||
|
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.7", ngImport: i0, type: InputNumberModule, declarations: [InputNumber], imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon, AngleUpIcon, AngleDownIcon], exports: [InputNumber, SharedModule] });
|
||
|
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: InputNumberModule, imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon, AngleUpIcon, AngleDownIcon, SharedModule] });
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: InputNumberModule, decorators: [{
|
||
|
|
type: NgModule,
|
||
|
|
args: [{
|
||
|
|
imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon, AngleUpIcon, AngleDownIcon],
|
||
|
|
exports: [InputNumber, SharedModule],
|
||
|
|
declarations: [InputNumber]
|
||
|
|
}]
|
||
|
|
}] });
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generated bundle index. Do not edit.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export { INPUTNUMBER_VALUE_ACCESSOR, InputNumber, InputNumberModule };
|
||
|
|
//# sourceMappingURL=primeng-inputnumber.mjs.map
|