@anguless/angulux 22.0.0-rc.0

package/fesm2022/anguless-angulux-inputnumber.mjs

@@ -0,0 +1,1673 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, inject, EventEmitter, booleanAttribute, numberAttribute, ViewChild, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { getSelection } from '@anguless/angulux-utils';
+import { SharedModule, AglTemplate } from '@anguless/angulux/api';
+import { AutoFocus } from '@anguless/angulux/autofocus';
+import { PARENT_INSTANCE } from '@anguless/angulux/basecomponent';
+import { BaseInput } from '@anguless/angulux/baseinput';
+import * as i1 from '@anguless/angulux/bind';
+import { Bind, BindModule } from '@anguless/angulux/bind';
+import { TimesIcon, AngleUpIcon, AngleDownIcon } from '@anguless/angulux/icons';
+import { InputText } from '@anguless/angulux/inputtext';
+import { style as style$1 } from '@anguless/angulux-styles/inputnumber';
+import { BaseStyle } from '@anguless/angulux/base';
+export * from '@anguless/angulux/types/inputnumber';
+
+const style = /*css*/ `
+    ${style$1}
+
+    /* For AnguluxConfig */
+    p-inputNumber.ng-invalid.ng-dirty > .p-inputtext,
+    p-input-number.ng-invalid.ng-dirty > .p-inputtext,
+    p-inputnumber.ng-invalid.ng-dirty > .p-inputtext {
+        border-color: dt('inputtext.invalid.border.color');
+    }
+
+    p-inputNumber.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
+    p-input-number.ng-invalid.ng-dirty > .p-inputtext:enabled:focus,
+    p-inputnumber.ng-invalid.ng-dirty > .p-inputtext:enabled:focus {
+        border-color: dt('inputtext.focus.border.color');
+    }
+
+    p-inputNumber.ng-invalid.ng-dirty > .p-inputtext::placeholder,
+    p-input-number.ng-invalid.ng-dirty > .p-inputtext::placeholder,
+    p-inputnumber.ng-invalid.ng-dirty > .p-inputtext::placeholder {
+        color: dt('inputtext.invalid.placeholder.color');
+    }
+`;
+const classes = {
+    root: ({ instance }) => [
+        'p-inputnumber p-component p-inputwrapper',
+        {
+            'p-inputwrapper-filled': instance.$filled() || instance.allowEmpty === false,
+            'p-inputwrapper-focus': instance.focused,
+            'p-inputnumber-stacked': instance.showButtons && instance.buttonLayout === 'stacked',
+            'p-inputnumber-horizontal': instance.showButtons && instance.buttonLayout === 'horizontal',
+            'p-inputnumber-vertical': instance.showButtons && instance.buttonLayout === 'vertical',
+            'p-inputnumber-fluid': instance.hasFluid,
+            'p-invalid': instance.invalid()
+        }
+    ],
+    pcInputText: 'p-inputnumber-input',
+    buttonGroup: 'p-inputnumber-button-group',
+    incrementButton: ({ instance }) => [
+        'p-inputnumber-button p-inputnumber-increment-button',
+        {
+            'p-disabled': instance.showButtons && instance.max() != null && instance.maxlength()
+        }
+    ],
+    decrementButton: ({ instance }) => [
+        'p-inputnumber-button p-inputnumber-decrement-button',
+        {
+            'p-disabled': instance.showButtons && instance.min() != null && instance.minlength()
+        }
+    ],
+    clearIcon: 'p-inputnumber-clear-icon'
+};
+class InputNumberStyle extends BaseStyle {
+    name = 'inputnumber';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * InputNumber is an input component to provide numerical input.
+ *
+ * @module inputnumberstyle
+ *
+ */
+var InputNumberClasses;
+(function (InputNumberClasses) {
+    /**
+     * Class name of the root element
+     */
+    InputNumberClasses["root"] = "p-inputnumber";
+    /**
+     * Class name of the input element
+     */
+    InputNumberClasses["pcInputText"] = "p-inputnumber-input";
+    /**
+     * Class name of the button group element
+     */
+    InputNumberClasses["buttonGroup"] = "p-inputnumber-button-group";
+    /**
+     * Class name of the increment button element
+     */
+    InputNumberClasses["incrementButton"] = "p-inputnumber-increment-button";
+    /**
+     * Class name of the decrement button element
+     */
+    InputNumberClasses["decrementButton"] = "p-inputnumber-decrement-button";
+    /**
+     * Class name of the clear icon
+     */
+    InputNumberClasses["clearIcon"] = "p-autocomplete-clear-icon";
+})(InputNumberClasses || (InputNumberClasses = {}));
+
+const INPUTNUMBER_INSTANCE = new InjectionToken('INPUTNUMBER_INSTANCE');
+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 extends BaseInput {
+    injector;
+    componentName = 'InputNumber';
+    $pcInputNumber = inject(INPUTNUMBER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    _componentStyle = inject(InputNumberStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * 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.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Advisory information to display on input.
+     * @group Props
+     */
+    placeholder;
+    /**
+     * 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;
+    /**
+     * Specifies one or more IDs in the DOM that describes the input field.
+     * @group Props
+     */
+    ariaDescribedBy;
+    /**
+     * 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;
+    /**
+     * Used to define a string that autocomplete attribute the current element.
+     * @group Props
+     */
+    autocomplete;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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();
+    /**
+     * Custom clear icon template.
+     * @group Templates
+     */
+    clearIconTemplate;
+    /**
+     * Custom increment button icon template.
+     * @group Templates
+     */
+    incrementButtonIconTemplate;
+    /**
+     * Custom decrement button icon template.
+     * @group Templates
+     */
+    decrementButtonIconTemplate;
+    templates;
+    input;
+    _clearIconTemplate;
+    _incrementButtonIconTemplate;
+    _decrementButtonIconTemplate;
+    value;
+    focused;
+    initialized;
+    groupChar = '';
+    prefixChar = '';
+    suffixChar = '';
+    isSpecialChar;
+    timer;
+    lastValue;
+    _numeral;
+    numberFormat;
+    _decimal;
+    _decimalChar = '';
+    _group;
+    _minusSign;
+    _currency;
+    _prefix;
+    _suffix;
+    _index;
+    ngControl = null;
+    constructor(injector) {
+        super();
+        this.injector = injector;
+    }
+    onChanges(simpleChange) {
+        const props = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'prefix', 'suffix'];
+        if (props.some((p) => !!simpleChange[p])) {
+            this.updateConstructParser();
+        }
+    }
+    onInit() {
+        this.ngControl = this.injector.get(NgControl, null, { optional: true });
+        this.constructParser();
+        this.initialized = true;
+    }
+    onAfterContentInit() {
+        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;
+            }
+        });
+    }
+    getOptions() {
+        // Validate fraction digits according to Intl.NumberFormat specifications
+        // Handle potential NaN, Infinity, or invalid values
+        const validateFractionDigits = (value, min, max) => {
+            if (value == null || isNaN(value) || !isFinite(value)) {
+                return undefined;
+            }
+            return Math.max(min, Math.min(max, Math.floor(value)));
+        };
+        const minFractionDigits = validateFractionDigits(this.minFractionDigits, 0, 20);
+        const maxFractionDigits = validateFractionDigits(this.maxFractionDigits, 0, 100);
+        // Ensure minFractionDigits <= maxFractionDigits
+        const validatedMinFractionDigits = minFractionDigits != null && maxFractionDigits != null && minFractionDigits > maxFractionDigits ? maxFractionDigits : minFractionDigits;
+        return {
+            localeMatcher: this.localeMatcher,
+            style: this.mode,
+            currency: this.currency,
+            currencyDisplay: this.currencyDisplay,
+            useGrouping: this.useGrouping,
+            minimumFractionDigits: validatedMinFractionDigits,
+            maximumFractionDigits: maxFractionDigits
+        };
+    }
+    constructParser() {
+        const options = this.getOptions();
+        // Remove any properties with undefined or invalid values to let Intl.NumberFormat use defaults
+        const cleanOptions = Object.fromEntries(Object.entries(options).filter(([_key, value]) => value !== undefined));
+        this.numberFormat = new Intl.NumberFormat(this.locale, cleanOptions);
+        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 = this._suffix ? new RegExp(this._suffix, '') : /(?:)/;
+        const prefixRegex = this._prefix ? new RegExp(this._prefix, '') : /(?:)/;
+        const currencyRegex = this._currency ? 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() ?? 1) * dir;
+        let currentValue = this.parseValue(this.input?.nativeElement.value) || 0;
+        let newValue = this.validateValue(currentValue + step);
+        const max = this.maxlength();
+        if (max && max < 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' && this._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 { value, selectionStart, selectionEnd } = this.input.nativeElement;
+        const newValue = this.parseValue(value + char);
+        const newValueStr = newValue != null ? newValue.toString() : '';
+        const selectedValue = value.substring(selectionStart, selectionEnd);
+        const selectedValueParsed = this.parseValue(selectedValue);
+        const selectedValueStr = selectedValueParsed != null ? selectedValueParsed.toString() : '';
+        if (selectionStart !== selectionEnd && selectedValueStr.length > 0) {
+            this.insert(event, char, { isDecimalSign, isMinusSign });
+            return;
+        }
+        const max = this.maxlength();
+        if (max && newValueStr.length > max) {
+            return;
+        }
+        if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
+            this.insert(event, char, { isDecimalSign, isMinusSign });
+        }
+    }
+    onPaste(event) {
+        if (!this.$disabled() && !this.readonly) {
+            event.preventDefault();
+            let data = (event.clipboardData || this.document.defaultView['clipboardData']).getData('Text');
+            if (this.inputId === 'integeronly' && /[^\d-]/.test(data)) {
+                return;
+            }
+            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() {
+        const min = this.min();
+        return min == null || 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 selectionEnd = this.input?.nativeElement.selectionEnd;
+        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, '');
+        // Will allow selecting whole prefix. But not a part of it.
+        // Negative values will trigger clauses after this to fix the cursor position.
+        if (selectionStart === selectionEnd || selectionStart !== 0 || selectionEnd < prefixLength) {
+            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 !== 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;
+        }
+        const min = this.min();
+        const max = this.max();
+        if (min != null && value < min) {
+            return this.min();
+        }
+        if (max != null && value > max) {
+            return 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;
+            const maxlength = this.maxlength();
+            if (maxlength && newValue.length > maxlength) {
+                newValue = newValue.slice(0, maxlength);
+                selectionStart = Math.min(selectionStart, maxlength);
+                selectionEnd = Math.min(selectionEnd, maxlength);
+            }
+            if (maxlength && 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.replace(this.suffixChar, '').split(this._decimal)[0] + val2.replace(this.suffixChar, '').slice(decimalCharIndex) + this.suffixChar : val1;
+            }
+            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.onModelTouched();
+        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);
+        }
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
+        this.value = value ? Number(value) : value;
+        setModelValue(value);
+        this.cd.markForCheck();
+    }
+    clearTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+    get dataP() {
+        return this.cn({
+            invalid: this.invalid(),
+            disabled: this.$disabled(),
+            focus: this.focused,
+            fluid: this.hasFluid,
+            filled: this.$variant() === 'filled',
+            empty: !this.$filled(),
+            [this.size()]: this.size(),
+            [this.buttonLayout]: this.showButtons && this.buttonLayout
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumber, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.8", type: InputNumber, isStandalone: true, selector: "agl-inputNumber, agl-inputnumber, agl-input-number", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", tabindex: ["tabindex", "tabindex", numberAttribute], title: "title", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", ariaLabel: "ariaLabel", ariaRequired: ["ariaRequired", "ariaRequired", booleanAttribute], autocomplete: "autocomplete", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: ["readonly", "readonly", booleanAttribute], allowEmpty: ["allowEmpty", "allowEmpty", booleanAttribute], locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: ["useGrouping", "useGrouping", booleanAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, undefined)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, undefined)], prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "dataP" } }, providers: [INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle, { provide: INPUTNUMBER_INSTANCE, useExisting: InputNumber }, { provide: PARENT_INSTANCE, useExisting: InputNumber }], queries: [{ propertyName: "clearIconTemplate", first: true, predicate: ["clearicon"] }, { propertyName: "incrementButtonIconTemplate", first: true, predicate: ["incrementbuttonicon"] }, { propertyName: "decrementButtonIconTemplate", first: true, predicate: ["decrementbuttonicon"] }, { propertyName: "templates", predicate: AglTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <input
+            aglInputText
+            #input
+            [attr.id]="inputId"
+            role="spinbutton"
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [value]="formattedValue()"
+            [ngStyle]="inputStyle"
+            [variant]="$variant()"
+            [invalid]="invalid()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="value"
+            [attr.placeholder]="placeholder"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-describedby]="ariaDescribedBy"
+            [attr.title]="title"
+            [aglSize]="size()"
+            [attr.size]="inputSize()"
+            [attr.name]="name()"
+            [attr.autocomplete]="autocomplete"
+            [attr.maxlength]="maxlength()"
+            [attr.minlength]="minlength()"
+            [attr.tabindex]="tabindex"
+            [attr.aria-required]="ariaRequired"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.step]="step() ?? 1"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            inputmode="decimal"
+            (input)="onUserInput($event)"
+            (keydown)="onInputKeyDown($event)"
+            (keypress)="onInputKeyPress($event)"
+            (paste)="onPaste($event)"
+            (click)="onInputClick()"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            [pt]="ptm('pcInputText')"
+            [unstyled]="unstyled()"
+            [aglAutoFocus]="autofocus"
+            [fluid]="hasFluid"
+            [attr.data-p]="dataP"
+        />
+        <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [aglBind]="ptm('clearIcon')" [class]="cx('clearIcon')" (click)="clear()" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [aglBind]="ptm('clearIcon')" (click)="clear()" [class]="cx('clearIcon')">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <span [aglBind]="ptm('buttonGroup')" [class]="cx('buttonGroup')" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-p]="dataP">
+            <button
+                type="button"
+                [aglBind]="ptm('incrementButton')"
+                [class]="cn(cx('incrementButton'), incrementButtonClass)"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                tabindex="-1"
+                (mousedown)="onUpButtonMouseDown($event)"
+                (mouseup)="onUpButtonMouseUp()"
+                (mouseleave)="onUpButtonMouseLeave()"
+                (keydown)="onUpButtonKeyDown($event)"
+                (keyup)="onUpButtonKeyUp()"
+                [attr.aria-hidden]="true"
+                [attr.data-p]="dataP"
+            >
+                <span *ngIf="incrementButtonIcon" [aglBind]="ptm('incrementButtonIcon')" [ngClass]="incrementButtonIcon"></span>
+                <ng-container *ngIf="!incrementButtonIcon">
+                    <svg data-p-icon="angle-up" [aglBind]="ptm('incrementButtonIcon')" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" />
+                    <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
+                </ng-container>
+            </button>
+
+            <button
+                type="button"
+                [aglBind]="ptm('decrementButton')"
+                [class]="cn(cx('decrementButton'), decrementButtonClass)"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
+                (mousedown)="onDownButtonMouseDown($event)"
+                (mouseup)="onDownButtonMouseUp()"
+                (mouseleave)="onDownButtonMouseLeave()"
+                (keydown)="onDownButtonKeyDown($event)"
+                (keyup)="onDownButtonKeyUp()"
+                [attr.data-p]="dataP"
+            >
+                <span *ngIf="decrementButtonIcon" [aglBind]="ptm('decrementButtonIcon')" [ngClass]="decrementButtonIcon"></span>
+                <ng-container *ngIf="!decrementButtonIcon">
+                    <svg data-p-icon="angle-down" [aglBind]="ptm('decrementButtonIcon')" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" />
+                    <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
+                </ng-container>
+            </button>
+        </span>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [aglBind]="ptm('incrementButton')"
+            [class]="cn(cx('incrementButton'), incrementButtonClass)"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onUpButtonMouseDown($event)"
+            (mouseup)="onUpButtonMouseUp()"
+            (mouseleave)="onUpButtonMouseLeave()"
+            (keydown)="onUpButtonKeyDown($event)"
+            (keyup)="onUpButtonKeyUp()"
+            [attr.data-p]="dataP"
+        >
+            <span *ngIf="incrementButtonIcon" [aglBind]="ptm('incrementButtonIcon')" [ngClass]="incrementButtonIcon"></span>
+            <ng-container *ngIf="!incrementButtonIcon">
+                <svg data-p-icon="angle-up" [aglBind]="ptm('incrementButtonIcon')" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" />
+                <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [aglBind]="ptm('decrementButton')"
+            [class]="cn(cx('decrementButton'), decrementButtonClass)"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onDownButtonMouseDown($event)"
+            (mouseup)="onDownButtonMouseUp()"
+            (mouseleave)="onDownButtonMouseLeave()"
+            (keydown)="onDownButtonKeyDown($event)"
+            (keyup)="onDownButtonKeyUp()"
+            [attr.data-p]="dataP"
+        >
+            <span *ngIf="decrementButtonIcon" [aglBind]="ptm('decrementButtonIcon')" [ngClass]="decrementButtonIcon"></span>
+            <ng-container *ngIf="!decrementButtonIcon">
+                <svg data-p-icon="angle-down" [aglBind]="ptm('decrementButtonIcon')" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" />
+                <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputText, selector: "[aglInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "aglSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[aglAutoFocus]", inputs: ["aglAutoFocus"] }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: AngleUpIcon, selector: "[data-p-icon=\"angle-up\"]" }, { kind: "component", type: AngleDownIcon, selector: "[data-p-icon=\"angle-down\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[aglBind]", inputs: ["aglBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumber, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'agl-inputNumber, agl-inputnumber, agl-input-number',
+                    standalone: true,
+                    imports: [CommonModule, InputText, AutoFocus, TimesIcon, AngleUpIcon, AngleDownIcon, SharedModule, BindModule],
+                    template: `
+        <input
+            aglInputText
+            #input
+            [attr.id]="inputId"
+            role="spinbutton"
+            [class]="cn(cx('pcInputText'), inputStyleClass)"
+            [value]="formattedValue()"
+            [ngStyle]="inputStyle"
+            [variant]="$variant()"
+            [invalid]="invalid()"
+            [attr.aria-valuemin]="min()"
+            [attr.aria-valuemax]="max()"
+            [attr.aria-valuenow]="value"
+            [attr.placeholder]="placeholder"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-describedby]="ariaDescribedBy"
+            [attr.title]="title"
+            [aglSize]="size()"
+            [attr.size]="inputSize()"
+            [attr.name]="name()"
+            [attr.autocomplete]="autocomplete"
+            [attr.maxlength]="maxlength()"
+            [attr.minlength]="minlength()"
+            [attr.tabindex]="tabindex"
+            [attr.aria-required]="ariaRequired"
+            [attr.min]="min()"
+            [attr.max]="max()"
+            [attr.step]="step() ?? 1"
+            [attr.required]="required() ? '' : undefined"
+            [attr.readonly]="readonly ? '' : undefined"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            inputmode="decimal"
+            (input)="onUserInput($event)"
+            (keydown)="onInputKeyDown($event)"
+            (keypress)="onInputKeyPress($event)"
+            (paste)="onPaste($event)"
+            (click)="onInputClick()"
+            (focus)="onInputFocus($event)"
+            (blur)="onInputBlur($event)"
+            [pt]="ptm('pcInputText')"
+            [unstyled]="unstyled()"
+            [aglAutoFocus]="autofocus"
+            [fluid]="hasFluid"
+            [attr.data-p]="dataP"
+        />
+        <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+            <svg data-p-icon="times" *ngIf="!clearIconTemplate && !_clearIconTemplate" [aglBind]="ptm('clearIcon')" [class]="cx('clearIcon')" (click)="clear()" />
+            <span *ngIf="clearIconTemplate || _clearIconTemplate" [aglBind]="ptm('clearIcon')" (click)="clear()" [class]="cx('clearIcon')">
+                <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
+            </span>
+        </ng-container>
+        <span [aglBind]="ptm('buttonGroup')" [class]="cx('buttonGroup')" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-p]="dataP">
+            <button
+                type="button"
+                [aglBind]="ptm('incrementButton')"
+                [class]="cn(cx('incrementButton'), incrementButtonClass)"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                tabindex="-1"
+                (mousedown)="onUpButtonMouseDown($event)"
+                (mouseup)="onUpButtonMouseUp()"
+                (mouseleave)="onUpButtonMouseLeave()"
+                (keydown)="onUpButtonKeyDown($event)"
+                (keyup)="onUpButtonKeyUp()"
+                [attr.aria-hidden]="true"
+                [attr.data-p]="dataP"
+            >
+                <span *ngIf="incrementButtonIcon" [aglBind]="ptm('incrementButtonIcon')" [ngClass]="incrementButtonIcon"></span>
+                <ng-container *ngIf="!incrementButtonIcon">
+                    <svg data-p-icon="angle-up" [aglBind]="ptm('incrementButtonIcon')" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" />
+                    <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
+                </ng-container>
+            </button>
+
+            <button
+                type="button"
+                [aglBind]="ptm('decrementButton')"
+                [class]="cn(cx('decrementButton'), decrementButtonClass)"
+                [attr.disabled]="$disabled() ? '' : undefined"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
+                (mousedown)="onDownButtonMouseDown($event)"
+                (mouseup)="onDownButtonMouseUp()"
+                (mouseleave)="onDownButtonMouseLeave()"
+                (keydown)="onDownButtonKeyDown($event)"
+                (keyup)="onDownButtonKeyUp()"
+                [attr.data-p]="dataP"
+            >
+                <span *ngIf="decrementButtonIcon" [aglBind]="ptm('decrementButtonIcon')" [ngClass]="decrementButtonIcon"></span>
+                <ng-container *ngIf="!decrementButtonIcon">
+                    <svg data-p-icon="angle-down" [aglBind]="ptm('decrementButtonIcon')" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" />
+                    <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
+                </ng-container>
+            </button>
+        </span>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [aglBind]="ptm('incrementButton')"
+            [class]="cn(cx('incrementButton'), incrementButtonClass)"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onUpButtonMouseDown($event)"
+            (mouseup)="onUpButtonMouseUp()"
+            (mouseleave)="onUpButtonMouseLeave()"
+            (keydown)="onUpButtonKeyDown($event)"
+            (keyup)="onUpButtonKeyUp()"
+            [attr.data-p]="dataP"
+        >
+            <span *ngIf="incrementButtonIcon" [aglBind]="ptm('incrementButtonIcon')" [ngClass]="incrementButtonIcon"></span>
+            <ng-container *ngIf="!incrementButtonIcon">
+                <svg data-p-icon="angle-up" [aglBind]="ptm('incrementButtonIcon')" *ngIf="!incrementButtonIconTemplate && !_incrementButtonIconTemplate" />
+                <ng-template *ngTemplateOutlet="incrementButtonIconTemplate || _incrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+        <button
+            *ngIf="showButtons && buttonLayout !== 'stacked'"
+            type="button"
+            [aglBind]="ptm('decrementButton')"
+            [class]="cn(cx('decrementButton'), decrementButtonClass)"
+            [attr.disabled]="$disabled() ? '' : undefined"
+            tabindex="-1"
+            [attr.aria-hidden]="true"
+            (mousedown)="onDownButtonMouseDown($event)"
+            (mouseup)="onDownButtonMouseUp()"
+            (mouseleave)="onDownButtonMouseLeave()"
+            (keydown)="onDownButtonKeyDown($event)"
+            (keyup)="onDownButtonKeyUp()"
+            [attr.data-p]="dataP"
+        >
+            <span *ngIf="decrementButtonIcon" [aglBind]="ptm('decrementButtonIcon')" [ngClass]="decrementButtonIcon"></span>
+            <ng-container *ngIf="!decrementButtonIcon">
+                <svg data-p-icon="angle-down" [aglBind]="ptm('decrementButtonIcon')" *ngIf="!decrementButtonIconTemplate && !_decrementButtonIconTemplate" />
+                <ng-template *ngTemplateOutlet="decrementButtonIconTemplate || _decrementButtonIconTemplate"></ng-template>
+            </ng-container>
+        </button>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [INPUTNUMBER_VALUE_ACCESSOR, InputNumberStyle, { provide: INPUTNUMBER_INSTANCE, useExisting: InputNumber }, { provide: PARENT_INSTANCE, useExisting: InputNumber }],
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-p]': 'dataP'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [{ 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
+            }], placeholder: [{
+                type: Input
+            }], tabindex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], title: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaRequired: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autocomplete: [{
+                type: Input
+            }], incrementButtonClass: [{
+                type: Input
+            }], decrementButtonClass: [{
+                type: Input
+            }], incrementButtonIcon: [{
+                type: Input
+            }], decrementButtonIcon: [{
+                type: Input
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], 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 }]
+            }], minFractionDigits: [{
+                type: Input,
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
+            }], maxFractionDigits: [{
+                type: Input,
+                args: [{ transform: (value) => numberAttribute(value, undefined) }]
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], inputStyle: [{
+                type: Input
+            }], inputStyleClass: [{
+                type: Input
+            }], showClear: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autofocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onInput: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], onKeyDown: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }], clearIconTemplate: [{
+                type: ContentChild,
+                args: ['clearicon', { descendants: false }]
+            }], incrementButtonIconTemplate: [{
+                type: ContentChild,
+                args: ['incrementbuttonicon', { descendants: false }]
+            }], decrementButtonIconTemplate: [{
+                type: ContentChild,
+                args: ['decrementbuttonicon', { descendants: false }]
+            }], templates: [{
+                type: ContentChildren,
+                args: [AglTemplate]
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+class InputNumberModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule], exports: [InputNumber, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InputNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [InputNumber, SharedModule],
+                    exports: [InputNumber, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { INPUTNUMBER_VALUE_ACCESSOR, InputNumber, InputNumberClasses, InputNumberModule, InputNumberStyle };
+//# sourceMappingURL=anguless-angulux-inputnumber.mjs.map