cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-inputnumber.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, ContentChildren, ViewChild, Output, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Input, ContentChildren, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { CaxTemplate, SharedModule } from 'cax-design-system/api';
@@ -10,8 +10,6 @@ import { AutoFocusModule } from 'cax-design-system/autofocus';
 import * as i4 from 'cax-design-system/button';
 import { ButtonModule } from 'cax-design-system/button';
 import { DomHandler } from 'cax-design-system/dom';
-import { AngleDownIcon } from 'cax-design-system/icons/angledown';
-import { AngleUpIcon } from 'cax-design-system/icons/angleup';
 import { TimesIcon } from 'cax-design-system/icons/times';
 import * as i3 from 'cax-design-system/inputtext';
 import { InputTextModule } from 'cax-design-system/inputtext';
@@ -70,7 +68,7 @@ class InputNumber {
      * Size of the input field.
      * @group Props
      */
-    size;
+    size = 'md';
     /**
      * Maximum number of character allows in the input field.
      * @group Props
@@ -196,6 +194,26 @@ class InputNumber {
      * @group Props
      */
     variant = 'outlined';
+    /**
+     * Text to display as label.
+     * @group Props
+     */
+    label;
+    /**
+     * Text to display when invalid.
+     * @group Props
+     */
+    errorText;
+    /**
+     * Text to display as helper.
+     * @group Props
+     */
+    successText;
+    /**
+     * When present, it specifies that the component is invalid.
+     * @group Props
+     */
+    invalid = false;
     /**
      * 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
@@ -289,7 +307,18 @@ class InputNumber {
     clearIconTemplate;
     incrementButtonIconTemplate;
     decrementButtonIconTemplate;
-    value;
+    /**
+     * Value of the component.
+     * @group Props
+     */
+    get value() {
+        return this._val;
+    }
+    set value(val) {
+        this._val = val;
+        this.writeValue(val);
+    }
+    _val;
     onModelChange = () => { };
     onModelTouched = () => { };
     focused;
@@ -437,12 +466,6 @@ class InputNumber {
             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();
@@ -495,8 +518,8 @@ class InputNumber {
         this.handleOnInput(event, currentValue, newValue);
     }
     clear() {
-        this.value = null;
-        this.onModelChange(this.value);
+        this._val = null;
+        this.onModelChange(this._val);
         this.onClear.emit();
     }
     onUpButtonMouseDown(event) {
@@ -1123,12 +1146,12 @@ class InputNumber {
         this.onBlur.emit(event);
     }
     formattedValue() {
-        const val = !this.value && !this.allowEmpty ? 0 : this.value;
+        const val = !this._val && !this.allowEmpty ? 0 : this._val;
         return this.formatValue(val);
     }
     updateModel(event, value) {
-        if (this.value !== value) {
-            this.value = value;
+        if (this._val !== value) {
+            this._val = value;
             if (!(this.isBlurUpdateOnMode && this.focused)) {
                 this.onModelChange(value);
             }
@@ -1139,7 +1162,7 @@ class InputNumber {
         this.onModelTouched();
     }
     writeValue(value) {
-        this.value = value;
+        this._val = value;
         this.cd.markForCheck();
     }
     registerOnChange(fn) {
@@ -1153,24 +1176,25 @@ class InputNumber {
         this.cd.markForCheck();
     }
     get filled() {
-        return this.value != null && this.value.toString().length > 0;
+        return this._val != null && this._val.toString().length > 0;
     }
     clearTimer() {
         if (this.timer) {
             clearInterval(this.timer);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InputNumber, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: InputNumber, isStandalone: true, selector: "cax-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)], prefixIcon: "prefixIcon", 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.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span\r\n    [ngClass]=\"{\r\n        'cax-inputnumber cax-component': true,\r\n        'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n        'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n        'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\r\n        'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\r\n        'cax-input-icon-right': suffix,\r\n        'cax-disabled': disabled\r\n    }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [attr.data-pc-name]=\"'inputnumber'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <!-- Only show prefix/icon in stacked layout -->\r\n    <ng-container *ngIf=\"(prefix || prefixIcon) && buttonLayout === 'stacked'\">\r\n        <i *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></i>\r\n    </ng-container>\r\n    <!-- Down button for horizontal layout -->\r\n    <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n        type=\"button\" caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        class=\"cax-inputnumber-button cax-inputnumber-button-down\"\r\n        [disabled]=\"disabled\"\r\n        (mousedown)=\"onDownButtonMouseDown($event)\"\r\n        (mouseup)=\"onDownButtonMouseUp()\"\r\n        (mouseleave)=\"onDownButtonMouseLeave()\"\r\n        (keydown)=\"onDownButtonKeyDown($event)\"\r\n        (keyup)=\"onDownButtonKeyUp()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        [attr.data-pc-section]=\"'decrementbutton'\">\r\n        <ng-container *ngIf=\"!decrementButtonIcon\">\r\n            <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n        <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\"></span>\r\n    </button>\r\n    <input\r\n        caxInputText\r\n        #input\r\n        [attr.id]=\"inputId\"\r\n        role=\"spinbutton\"\r\n        [ngClass]=\"'cax-inputnumber-input'\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [value]=\"formattedValue()\"\r\n        [attr.variant]=\"variant\"\r\n        [attr.aria-valuemin]=\"min\"\r\n        [attr.aria-valuemax]=\"max\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.title]=\"title\"\r\n        [attr.size]=\"size\"\r\n        [attr.name]=\"name\"\r\n        [attr.autocomplete]=\"autocomplete\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.tabindex]=\"tabindex\"\r\n        [attr.aria-required]=\"ariaRequired\"\r\n        [attr.required]=\"required\"\r\n        [attr.min]=\"min\"\r\n        [attr.max]=\"max\"\r\n        inputmode=\"decimal\"\r\n        (input)=\"onUserInput($event)\"\r\n        (keydown)=\"onInputKeyDown($event)\"\r\n        (keypress)=\"onInputKeyPress($event)\"\r\n        (paste)=\"onPaste($event)\"\r\n        (click)=\"onInputClick()\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n    />\r\n    <!-- Up button for horizontal layout -->\r\n    <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n        type=\"button\" caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        class=\"cax-inputnumber-button cax-inputnumber-button-up\"\r\n        [disabled]=\"disabled\"\r\n        (mousedown)=\"onUpButtonMouseDown($event)\"\r\n        (mouseup)=\"onUpButtonMouseUp()\"\r\n        (mouseleave)=\"onUpButtonMouseLeave()\"\r\n        (keydown)=\"onUpButtonKeyDown($event)\"\r\n        (keyup)=\"onUpButtonKeyUp()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        [attr.data-pc-section]=\"'incrementbutton'\">\r\n        <ng-container *ngIf=\"!incrementButtonIcon\">\r\n            <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n        <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\"></span>\r\n    </button>\r\n    <i *ngIf=\"suffix\" class=\"cax-input-suffix\" [innerHTML]=\"suffix\"></i>\r\n    <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n        <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n        <button\r\n            type=\"button\"\r\n            caxButton\r\n            [severity]=\"'secondary'\"\r\n            [size]=\"'small'\"\r\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n            class=\"cax-button-icon-only\"\r\n            [class]=\"incrementButtonClass\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"-1\"\r\n            (mousedown)=\"onUpButtonMouseDown($event)\"\r\n            (mouseup)=\"onUpButtonMouseUp()\"\r\n            (mouseleave)=\"onUpButtonMouseLeave()\"\r\n            (keydown)=\"onUpButtonKeyDown($event)\"\r\n            (keyup)=\"onUpButtonKeyUp()\"\r\n            [attr.aria-hidden]=\"true\"\r\n            [attr.data-pc-section]=\"'incrementbutton'\"\r\n        >\r\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n            <ng-container *ngIf=\"!incrementButtonIcon\">\r\n                <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <button\r\n            type=\"button\"\r\n            caxButton\r\n            [severity]=\"'secondary'\"\r\n            [size]=\"'small'\"\r\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n            class=\"cax-button-icon-only\"\r\n            [class]=\"decrementButtonClass\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-hidden]=\"true\"\r\n            (mousedown)=\"onDownButtonMouseDown($event)\"\r\n            (mouseup)=\"onDownButtonMouseUp()\"\r\n            (mouseleave)=\"onDownButtonMouseLeave()\"\r\n            (keydown)=\"onDownButtonKeyDown($event)\"\r\n            (keyup)=\"onDownButtonKeyUp()\"\r\n            [attr.data-pc-section]=\"'decrementbutton'\"\r\n        >\r\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n            <ng-container *ngIf=\"!decrementButtonIcon\">\r\n                <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n    </span>\r\n    <button\r\n        *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n        type=\"button\"\r\n        caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n        [class]=\"incrementButtonClass\"\r\n        class=\"cax-button-icon-only\"\r\n        [disabled]=\"disabled\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-hidden]=\"true\"\r\n        (mousedown)=\"onUpButtonMouseDown($event)\"\r\n        (mouseup)=\"onUpButtonMouseUp()\"\r\n        (mouseleave)=\"onUpButtonMouseLeave()\"\r\n        (keydown)=\"onUpButtonKeyDown($event)\"\r\n        (keyup)=\"onUpButtonKeyUp()\"\r\n        [attr.data-pc-section]=\"'incrementbutton'\"\r\n    >\r\n        <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n        <ng-container *ngIf=\"!incrementButtonIcon\">\r\n            <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\r\n    <button\r\n        *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n        type=\"button\"\r\n        caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n        class=\"cax-button-icon-only\"\r\n        [class]=\"decrementButtonClass\"\r\n        [disabled]=\"disabled\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-hidden]=\"true\"\r\n        (mousedown)=\"onDownButtonMouseDown($event)\"\r\n        (mouseup)=\"onDownButtonMouseUp()\"\r\n        (mouseleave)=\"onDownButtonMouseLeave()\"\r\n        (keydown)=\"onDownButtonKeyDown($event)\"\r\n        (keyup)=\"onDownButtonKeyUp()\"\r\n        [attr.data-pc-section]=\"'decrementbutton'\"\r\n    >\r\n        <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n        <ng-container *ngIf=\"!decrementButtonIcon\">\r\n            <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"], 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "variant"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: AngleUpIcon, selector: "AngleUpIcon" }, { kind: "component", type: AngleDownIcon, selector: "AngleDownIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumber, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: InputNumber, isStandalone: true, selector: "cax-inputNumber", inputs: { showButtons: ["showButtons", "showButtons", booleanAttribute], format: ["format", "format", booleanAttribute], buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", 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", label: "label", errorText: "errorText", successText: "successText", invalid: ["invalid", "invalid", booleanAttribute], minFractionDigits: ["minFractionDigits", "minFractionDigits", (value) => numberAttribute(value, null)], maxFractionDigits: ["maxFractionDigits", "maxFractionDigits", (value) => numberAttribute(value, null)], prefixIcon: "prefixIcon", prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: ["showClear", "showClear", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: "disabled", value: "value" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused", "class.cax-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"", "class.cax-input-readonly": "readonly" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"'cax-inputnumber-size-' + size\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\" [class.cax-input-readonly]=\"readonly\">\n    <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-semibold': !size || size === 'md', 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\">\n        {{ label }}\n    </label>\n\n    <span\n        [ngClass]=\"{\n            'cax-inputnumber cax-component cax-input-wrapper': true,\n            'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\n            'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\n            'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\n            'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\n            'cax-input-icon-right': suffix,\n            'cax-disabled': disabled,\n            'cax-input-readonly': readonly,\n            'cax-inputnumber-invalid': invalid\n        }\"\n        [attr.data-pc-name]=\"'inputnumber'\"\n        [attr.data-pc-section]=\"'root'\"\n    >\n        <!-- Prefix Icon or Text -->\n        <span *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></span>\n        <span *ngIf=\"prefix\" class=\"cax-input-prefix\">{{ prefix }}</span>\n        <!-- Down button for horizontal layout -->\n        <button\n            *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            class=\"cax-inputnumber-button cax-inputnumber-button-down\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            (mousedown)=\"onDownButtonMouseDown($event)\"\n            (mouseup)=\"onDownButtonMouseUp()\"\n            (mouseleave)=\"onDownButtonMouseLeave()\"\n            (keydown)=\"onDownButtonKeyDown($event)\"\n            (keyup)=\"onDownButtonKeyUp()\"\n            [attr.aria-hidden]=\"true\"\n            [attr.data-pc-section]=\"'decrementbutton'\"\n        >\n            <ng-container *ngIf=\"!decrementButtonIcon\">\n                <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\"></span>\n        </button>\n        <input\n            caxInputText\n            #input\n            [attr.id]=\"inputId\"\n            role=\"spinbutton\"\n            [ngClass]=\"'cax-inputnumber-input'\"\n            [ngStyle]=\"inputStyle\"\n            [class]=\"inputStyleClass\"\n            [value]=\"formattedValue()\"\n            [attr.variant]=\"variant\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.title]=\"title\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.maxlength]=\"maxlength\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-required]=\"ariaRequired\"\n            [attr.required]=\"required\"\n            [attr.min]=\"min\"\n            [attr.max]=\"max\"\n            inputmode=\"decimal\"\n            (input)=\"onUserInput($event)\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keypress)=\"onInputKeyPress($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            [attr.data-pc-section]=\"'input'\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n            [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\n            [class.cax-input-invalid]=\"invalid\"\n            [class.cax-text-action-md-regular]=\"!size || size === 'md'\"\n            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\n        />\n        <!-- Up button for horizontal layout -->\n        <button\n            *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            class=\"cax-inputnumber-button cax-inputnumber-button-up\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            (mousedown)=\"onUpButtonMouseDown($event)\"\n            (mouseup)=\"onUpButtonMouseUp()\"\n            (mouseleave)=\"onUpButtonMouseLeave()\"\n            (keydown)=\"onUpButtonKeyDown($event)\"\n            (keyup)=\"onUpButtonKeyUp()\"\n            [attr.aria-hidden]=\"true\"\n            [attr.data-pc-section]=\"'incrementbutton'\"\n        >\n            <ng-container *ngIf=\"!incrementButtonIcon\">\n                <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\"></span>\n        </button>\n        <!-- Suffix Text -->\n        <span *ngIf=\"suffix\" class=\"cax-input-suffix\">{{ suffix }}</span>\n        <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\n            <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\n            <button\n                type=\"button\"\n                caxButton\n                [severity]=\"'secondary'\"\n                [size]=\"'small'\"\n                [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\n                class=\"cax-button-icon-only\"\n                [class]=\"incrementButtonClass\"\n                [disabled]=\"disabled\"\n                [style.pointer-events]=\"readonly ? 'none' : null\"\n                tabindex=\"-1\"\n                (mousedown)=\"onUpButtonMouseDown($event)\"\n                (mouseup)=\"onUpButtonMouseUp()\"\n                (mouseleave)=\"onUpButtonMouseLeave()\"\n                (keydown)=\"onUpButtonKeyDown($event)\"\n                (keyup)=\"onUpButtonKeyUp()\"\n                [attr.aria-hidden]=\"true\"\n                [attr.data-pc-section]=\"'incrementbutton'\"\n            >\n                <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\n                <ng-container *ngIf=\"!incrementButtonIcon\">\n                    <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                    <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                    <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <button\n                type=\"button\"\n                caxButton\n                [severity]=\"'secondary'\"\n                [size]=\"'small'\"\n                [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\n                class=\"cax-button-icon-only\"\n                [class]=\"decrementButtonClass\"\n                [disabled]=\"disabled\"\n                [style.pointer-events]=\"readonly ? 'none' : null\"\n                tabindex=\"-1\"\n                [attr.aria-hidden]=\"true\"\n                (mousedown)=\"onDownButtonMouseDown($event)\"\n                (mouseup)=\"onDownButtonMouseUp()\"\n                (mouseleave)=\"onDownButtonMouseLeave()\"\n                (keydown)=\"onDownButtonKeyDown($event)\"\n                (keyup)=\"onDownButtonKeyUp()\"\n                [attr.data-pc-section]=\"'decrementbutton'\"\n            >\n                <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\n                <ng-container *ngIf=\"!decrementButtonIcon\">\n                    <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                    <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                    <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n        </span>\n        <button\n            *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\n            [class]=\"incrementButtonClass\"\n            class=\"cax-button-icon-only\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            tabindex=\"-1\"\n            [attr.aria-hidden]=\"true\"\n            (mousedown)=\"onUpButtonMouseDown($event)\"\n            (mouseup)=\"onUpButtonMouseUp()\"\n            (mouseleave)=\"onUpButtonMouseLeave()\"\n            (keydown)=\"onUpButtonKeyDown($event)\"\n            (keyup)=\"onUpButtonKeyUp()\"\n            [attr.data-pc-section]=\"'incrementbutton'\"\n        >\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\n            <ng-container *ngIf=\"!incrementButtonIcon\">\n                <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n        <button\n            *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\n            class=\"cax-button-icon-only\"\n            [class]=\"decrementButtonClass\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            tabindex=\"-1\"\n            [attr.aria-hidden]=\"true\"\n            (mousedown)=\"onDownButtonMouseDown($event)\"\n            (mouseup)=\"onDownButtonMouseUp()\"\n            (mouseleave)=\"onDownButtonMouseLeave()\"\n            (keydown)=\"onDownButtonKeyDown($event)\"\n            (keyup)=\"onDownButtonKeyUp()\"\n            [attr.data-pc-section]=\"'decrementbutton'\"\n        >\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\n            <ng-container *ngIf=\"!decrementButtonIcon\">\n                <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n    </span>\n\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-regular': !size || size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\">\n        {{ errorText }}\n    </small>\n    <small\n        *ngIf=\"successText && !invalid\"\n        class=\"cax-helper-text\"\n        [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-regular': !size || size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n    >\n        {{ successText }}\n    </small>\n</div>\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"], 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: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputtextDirective, selector: "[caxInputText]", inputs: ["placeholder", "disabled", "readonly", "variant", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InputNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumber, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-inputNumber', changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUTNUMBER_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon, AngleUpIcon, AngleDownIcon], host: {
+            args: [{ selector: 'cax-inputNumber', changeDetection: ChangeDetectionStrategy.OnPush, providers: [INPUTNUMBER_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, InputTextModule, ButtonModule, AutoFocusModule, TimesIcon], host: {
                         class: 'cax-element cax-inputwrapper',
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focused',
-                        '[class.cax-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"'
-                    }, template: "<span\r\n    [ngClass]=\"{\r\n        'cax-inputnumber cax-component': true,\r\n        'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\r\n        'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\r\n        'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\r\n        'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\r\n        'cax-input-icon-right': suffix,\r\n        'cax-disabled': disabled\r\n    }\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    [attr.data-pc-name]=\"'inputnumber'\"\r\n    [attr.data-pc-section]=\"'root'\"\r\n>\r\n    <!-- Only show prefix/icon in stacked layout -->\r\n    <ng-container *ngIf=\"(prefix || prefixIcon) && buttonLayout === 'stacked'\">\r\n        <i *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></i>\r\n    </ng-container>\r\n    <!-- Down button for horizontal layout -->\r\n    <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n        type=\"button\" caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        class=\"cax-inputnumber-button cax-inputnumber-button-down\"\r\n        [disabled]=\"disabled\"\r\n        (mousedown)=\"onDownButtonMouseDown($event)\"\r\n        (mouseup)=\"onDownButtonMouseUp()\"\r\n        (mouseleave)=\"onDownButtonMouseLeave()\"\r\n        (keydown)=\"onDownButtonKeyDown($event)\"\r\n        (keyup)=\"onDownButtonKeyUp()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        [attr.data-pc-section]=\"'decrementbutton'\">\r\n        <ng-container *ngIf=\"!decrementButtonIcon\">\r\n            <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n        <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\"></span>\r\n    </button>\r\n    <input\r\n        caxInputText\r\n        #input\r\n        [attr.id]=\"inputId\"\r\n        role=\"spinbutton\"\r\n        [ngClass]=\"'cax-inputnumber-input'\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [class]=\"inputStyleClass\"\r\n        [value]=\"formattedValue()\"\r\n        [attr.variant]=\"variant\"\r\n        [attr.aria-valuemin]=\"min\"\r\n        [attr.aria-valuemax]=\"max\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n        [attr.title]=\"title\"\r\n        [attr.size]=\"size\"\r\n        [attr.name]=\"name\"\r\n        [attr.autocomplete]=\"autocomplete\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [attr.tabindex]=\"tabindex\"\r\n        [attr.aria-required]=\"ariaRequired\"\r\n        [attr.required]=\"required\"\r\n        [attr.min]=\"min\"\r\n        [attr.max]=\"max\"\r\n        inputmode=\"decimal\"\r\n        (input)=\"onUserInput($event)\"\r\n        (keydown)=\"onInputKeyDown($event)\"\r\n        (keypress)=\"onInputKeyPress($event)\"\r\n        (paste)=\"onPaste($event)\"\r\n        (click)=\"onInputClick()\"\r\n        (focus)=\"onInputFocus($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        [attr.data-pc-section]=\"'input'\"\r\n        caxAutoFocus\r\n        [autofocus]=\"autofocus\"\r\n        [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\r\n    />\r\n    <!-- Up button for horizontal layout -->\r\n    <button *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\r\n        type=\"button\" caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        class=\"cax-inputnumber-button cax-inputnumber-button-up\"\r\n        [disabled]=\"disabled\"\r\n        (mousedown)=\"onUpButtonMouseDown($event)\"\r\n        (mouseup)=\"onUpButtonMouseUp()\"\r\n        (mouseleave)=\"onUpButtonMouseLeave()\"\r\n        (keydown)=\"onUpButtonKeyDown($event)\"\r\n        (keyup)=\"onUpButtonKeyUp()\"\r\n        [attr.aria-hidden]=\"true\"\r\n        [attr.data-pc-section]=\"'incrementbutton'\">\r\n        <ng-container *ngIf=\"!incrementButtonIcon\">\r\n            <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n        <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\"></span>\r\n    </button>\r\n    <i *ngIf=\"suffix\" class=\"cax-input-suffix\" [innerHTML]=\"suffix\"></i>\r\n    <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\r\n        <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n    <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\r\n        <button\r\n            type=\"button\"\r\n            caxButton\r\n            [severity]=\"'secondary'\"\r\n            [size]=\"'small'\"\r\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n            class=\"cax-button-icon-only\"\r\n            [class]=\"incrementButtonClass\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"-1\"\r\n            (mousedown)=\"onUpButtonMouseDown($event)\"\r\n            (mouseup)=\"onUpButtonMouseUp()\"\r\n            (mouseleave)=\"onUpButtonMouseLeave()\"\r\n            (keydown)=\"onUpButtonKeyDown($event)\"\r\n            (keyup)=\"onUpButtonKeyUp()\"\r\n            [attr.aria-hidden]=\"true\"\r\n            [attr.data-pc-section]=\"'incrementbutton'\"\r\n        >\r\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n            <ng-container *ngIf=\"!incrementButtonIcon\">\r\n                <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n        <button\r\n            type=\"button\"\r\n            caxButton\r\n            [severity]=\"'secondary'\"\r\n            [size]=\"'small'\"\r\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n            class=\"cax-button-icon-only\"\r\n            [class]=\"decrementButtonClass\"\r\n            [disabled]=\"disabled\"\r\n            tabindex=\"-1\"\r\n            [attr.aria-hidden]=\"true\"\r\n            (mousedown)=\"onDownButtonMouseDown($event)\"\r\n            (mouseup)=\"onDownButtonMouseUp()\"\r\n            (mouseleave)=\"onDownButtonMouseLeave()\"\r\n            (keydown)=\"onDownButtonKeyDown($event)\"\r\n            (keyup)=\"onDownButtonKeyUp()\"\r\n            [attr.data-pc-section]=\"'decrementbutton'\"\r\n        >\r\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n            <ng-container *ngIf=\"!decrementButtonIcon\">\r\n                <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n            </ng-container>\r\n        </button>\r\n    </span>\r\n    <button\r\n        *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n        type=\"button\"\r\n        caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\r\n        [class]=\"incrementButtonClass\"\r\n        class=\"cax-button-icon-only\"\r\n        [disabled]=\"disabled\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-hidden]=\"true\"\r\n        (mousedown)=\"onUpButtonMouseDown($event)\"\r\n        (mouseup)=\"onUpButtonMouseUp()\"\r\n        (mouseleave)=\"onUpButtonMouseLeave()\"\r\n        (keydown)=\"onUpButtonKeyDown($event)\"\r\n        (keyup)=\"onUpButtonKeyUp()\"\r\n        [attr.data-pc-section]=\"'incrementbutton'\"\r\n    >\r\n        <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\r\n        <ng-container *ngIf=\"!incrementButtonIcon\">\r\n            <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\r\n    <button\r\n        *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\r\n        type=\"button\"\r\n        caxButton\r\n        [severity]=\"'secondary'\"\r\n        [size]=\"'small'\"\r\n        [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\r\n        class=\"cax-button-icon-only\"\r\n        [class]=\"decrementButtonClass\"\r\n        [disabled]=\"disabled\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-hidden]=\"true\"\r\n        (mousedown)=\"onDownButtonMouseDown($event)\"\r\n        (mouseup)=\"onDownButtonMouseUp()\"\r\n        (mouseleave)=\"onDownButtonMouseLeave()\"\r\n        (keydown)=\"onDownButtonKeyDown($event)\"\r\n        (keyup)=\"onDownButtonKeyUp()\"\r\n        [attr.data-pc-section]=\"'decrementbutton'\"\r\n    >\r\n        <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\r\n        <ng-container *ngIf=\"!decrementButtonIcon\">\r\n            <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" />\r\n            <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\r\n        </ng-container>\r\n    </button>\r\n</span>\r\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"] }]
+                        '[class.cax-inputnumber-clearable]': 'showClear && buttonLayout != "vertical"',
+                        '[class.cax-input-readonly]': 'readonly'
+                    }, template: "<div class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"'cax-inputnumber-size-' + size\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\" [class.cax-input-readonly]=\"readonly\">\n    <label *ngIf=\"label\" class=\"cax-label\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-semibold': !size || size === 'md', 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\">\n        {{ label }}\n    </label>\n\n    <span\n        [ngClass]=\"{\n            'cax-inputnumber cax-component cax-input-wrapper': true,\n            'cax-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',\n            'cax-inputnumber-buttons-horizontal': this.showButtons && this.buttonLayout === 'horizontal',\n            'cax-inputnumber-buttons-vertical': this.showButtons && this.buttonLayout === 'vertical',\n            'cax-input-icon-left': (prefix || prefixIcon) && buttonLayout === 'stacked',\n            'cax-input-icon-right': suffix,\n            'cax-disabled': disabled,\n            'cax-input-readonly': readonly,\n            'cax-inputnumber-invalid': invalid\n        }\"\n        [attr.data-pc-name]=\"'inputnumber'\"\n        [attr.data-pc-section]=\"'root'\"\n    >\n        <!-- Prefix Icon or Text -->\n        <span *ngIf=\"prefixIcon\" class=\"cax-input-prefix-icon\" [ngClass]=\"prefixIcon\"></span>\n        <span *ngIf=\"prefix\" class=\"cax-input-prefix\">{{ prefix }}</span>\n        <!-- Down button for horizontal layout -->\n        <button\n            *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            class=\"cax-inputnumber-button cax-inputnumber-button-down\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            (mousedown)=\"onDownButtonMouseDown($event)\"\n            (mouseup)=\"onDownButtonMouseUp()\"\n            (mouseleave)=\"onDownButtonMouseLeave()\"\n            (keydown)=\"onDownButtonKeyDown($event)\"\n            (keyup)=\"onDownButtonKeyUp()\"\n            [attr.aria-hidden]=\"true\"\n            [attr.data-pc-section]=\"'decrementbutton'\"\n        >\n            <ng-container *ngIf=\"!decrementButtonIcon\">\n                <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\"></span>\n        </button>\n        <input\n            caxInputText\n            #input\n            [attr.id]=\"inputId\"\n            role=\"spinbutton\"\n            [ngClass]=\"'cax-inputnumber-input'\"\n            [ngStyle]=\"inputStyle\"\n            [class]=\"inputStyleClass\"\n            [value]=\"formattedValue()\"\n            [attr.variant]=\"variant\"\n            [attr.aria-valuemin]=\"min\"\n            [attr.aria-valuemax]=\"max\"\n            [attr.aria-valuenow]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.placeholder]=\"placeholder\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.title]=\"title\"\n            [attr.name]=\"name\"\n            [attr.autocomplete]=\"autocomplete\"\n            [attr.maxlength]=\"maxlength\"\n            [attr.tabindex]=\"tabindex\"\n            [attr.aria-required]=\"ariaRequired\"\n            [attr.required]=\"required\"\n            [attr.min]=\"min\"\n            [attr.max]=\"max\"\n            inputmode=\"decimal\"\n            (input)=\"onUserInput($event)\"\n            (keydown)=\"onInputKeyDown($event)\"\n            (keypress)=\"onInputKeyPress($event)\"\n            (paste)=\"onPaste($event)\"\n            (click)=\"onInputClick()\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputBlur($event)\"\n            [attr.data-pc-section]=\"'input'\"\n            caxAutoFocus\n            [autofocus]=\"autofocus\"\n            [class.cax-variant-filled]=\"variant === 'filled' || config.inputStyle() === 'filled'\"\n            [class.cax-input-invalid]=\"invalid\"\n            [class.cax-text-action-md-regular]=\"!size || size === 'md'\"\n            [class.cax-text-action-sm-medium]=\"size === 'sm'\"\n            [class.cax-text-action-lg-regular]=\"size === 'lg'\"\n        />\n        <!-- Up button for horizontal layout -->\n        <button\n            *ngIf=\"showButtons && buttonLayout === 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            class=\"cax-inputnumber-button cax-inputnumber-button-up\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            (mousedown)=\"onUpButtonMouseDown($event)\"\n            (mouseup)=\"onUpButtonMouseUp()\"\n            (mouseleave)=\"onUpButtonMouseLeave()\"\n            (keydown)=\"onUpButtonKeyDown($event)\"\n            (keyup)=\"onUpButtonKeyUp()\"\n            [attr.aria-hidden]=\"true\"\n            [attr.data-pc-section]=\"'incrementbutton'\"\n        >\n            <ng-container *ngIf=\"!incrementButtonIcon\">\n                <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\"></span>\n        </button>\n        <!-- Suffix Text -->\n        <span *ngIf=\"suffix\" class=\"cax-input-suffix\">{{ suffix }}</span>\n        <ng-container *ngIf=\"buttonLayout != 'vertical' && showClear && value\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [ngClass]=\"'cax-inputnumber-clear-icon'\" (click)=\"clear()\" [attr.data-pc-section]=\"'clearIcon'\" />\n            <span *ngIf=\"clearIconTemplate\" (click)=\"clear()\" class=\"cax-inputnumber-clear-icon\" [attr.data-pc-section]=\"'clearIcon'\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n        <span class=\"cax-inputnumber-button-group\" *ngIf=\"showButtons && buttonLayout === 'stacked'\" [attr.data-pc-section]=\"'buttonGroup'\">\n            <button\n                type=\"button\"\n                caxButton\n                [severity]=\"'secondary'\"\n                [size]=\"'small'\"\n                [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\n                class=\"cax-button-icon-only\"\n                [class]=\"incrementButtonClass\"\n                [disabled]=\"disabled\"\n                [style.pointer-events]=\"readonly ? 'none' : null\"\n                tabindex=\"-1\"\n                (mousedown)=\"onUpButtonMouseDown($event)\"\n                (mouseup)=\"onUpButtonMouseUp()\"\n                (mouseleave)=\"onUpButtonMouseLeave()\"\n                (keydown)=\"onUpButtonKeyDown($event)\"\n                (keyup)=\"onUpButtonKeyUp()\"\n                [attr.aria-hidden]=\"true\"\n                [attr.data-pc-section]=\"'incrementbutton'\"\n            >\n                <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\n                <ng-container *ngIf=\"!incrementButtonIcon\">\n                    <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                    <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                    <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n            <button\n                type=\"button\"\n                caxButton\n                [severity]=\"'secondary'\"\n                [size]=\"'small'\"\n                [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\n                class=\"cax-button-icon-only\"\n                [class]=\"decrementButtonClass\"\n                [disabled]=\"disabled\"\n                [style.pointer-events]=\"readonly ? 'none' : null\"\n                tabindex=\"-1\"\n                [attr.aria-hidden]=\"true\"\n                (mousedown)=\"onDownButtonMouseDown($event)\"\n                (mouseup)=\"onDownButtonMouseUp()\"\n                (mouseleave)=\"onDownButtonMouseLeave()\"\n                (keydown)=\"onDownButtonKeyDown($event)\"\n                (keyup)=\"onDownButtonKeyUp()\"\n                [attr.data-pc-section]=\"'decrementbutton'\"\n            >\n                <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\n                <ng-container *ngIf=\"!decrementButtonIcon\">\n                    <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                    <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                    <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n                </ng-container>\n            </button>\n        </span>\n        <button\n            *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-up': true }\"\n            [class]=\"incrementButtonClass\"\n            class=\"cax-button-icon-only\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            tabindex=\"-1\"\n            [attr.aria-hidden]=\"true\"\n            (mousedown)=\"onUpButtonMouseDown($event)\"\n            (mouseup)=\"onUpButtonMouseUp()\"\n            (mouseleave)=\"onUpButtonMouseLeave()\"\n            (keydown)=\"onUpButtonKeyDown($event)\"\n            (keyup)=\"onUpButtonKeyUp()\"\n            [attr.data-pc-section]=\"'incrementbutton'\"\n        >\n            <span *ngIf=\"incrementButtonIcon\" [ngClass]=\"incrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'incrementbuttonicon'\"></span>\n            <ng-container *ngIf=\"!incrementButtonIcon\">\n                <!-- <AngleUpIcon *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" /> -->\n                <i *ngIf=\"!incrementButtonIconTemplate\" [attr.data-pc-section]=\"'incrementbuttonicon'\" class=\"cax cax-alt-arrow-up cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"incrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n        <button\n            *ngIf=\"showButtons && buttonLayout !== 'stacked' && buttonLayout !== 'horizontal'\"\n            type=\"button\"\n            caxButton\n            [severity]=\"'secondary'\"\n            [size]=\"'small'\"\n            [ngClass]=\"{ 'cax-inputnumber-button cax-inputnumber-button-down': true }\"\n            class=\"cax-button-icon-only\"\n            [class]=\"decrementButtonClass\"\n            [disabled]=\"disabled\"\n            [style.pointer-events]=\"readonly ? 'none' : null\"\n            tabindex=\"-1\"\n            [attr.aria-hidden]=\"true\"\n            (mousedown)=\"onDownButtonMouseDown($event)\"\n            (mouseup)=\"onDownButtonMouseUp()\"\n            (mouseleave)=\"onDownButtonMouseLeave()\"\n            (keydown)=\"onDownButtonKeyDown($event)\"\n            (keyup)=\"onDownButtonKeyUp()\"\n            [attr.data-pc-section]=\"'decrementbutton'\"\n        >\n            <span *ngIf=\"decrementButtonIcon\" [ngClass]=\"decrementButtonIcon + ' cax-button-icon-center'\" [attr.data-pc-section]=\"'decrementbuttonicon'\"></span>\n            <ng-container *ngIf=\"!decrementButtonIcon\">\n                <!-- <AngleDownIcon *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" /> -->\n                <i *ngIf=\"!decrementButtonIconTemplate\" [attr.data-pc-section]=\"'decrementbuttonicon'\" class=\"cax cax-alt-arrow-down cax-button-icon-center\"></i>\n                <ng-template *ngTemplateOutlet=\"decrementButtonIconTemplate\"></ng-template>\n            </ng-container>\n        </button>\n    </span>\n\n    <small *ngIf=\"invalid\" class=\"cax-error\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-regular': !size || size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\">\n        {{ errorText }}\n    </small>\n    <small\n        *ngIf=\"successText && !invalid\"\n        class=\"cax-helper-text\"\n        [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-md-regular': !size || size === 'md', 'cax-text-action-sm-medium': size === 'sm', 'cax-text-action-lg-regular': size === 'lg' }\"\n    >\n        {{ successText }}\n    </small>\n</div>\n", styles: ["@layer cax{cax-inputnumber,.cax-inputnumber{display:inline-flex}.cax-inputnumber-button{display:flex;align-items:center;justify-content:center;flex:0 0 auto}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button .cax-button-label,.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button .cax-button-label{display:none}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-up{border-radius:0 8px 0 0;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-input{border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-stacked .cax-button.cax-inputnumber-button-down{border-radius:0 0 8px;padding:0}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group{display:flex;flex-direction:column}.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group .cax-button.cax-inputnumber-button{flex:1 1 auto}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-up{order:3;border-top-left-radius:0;border-bottom-left-radius:0}.cax-inputnumber-buttons-horizontal .cax-inputnumber-input{order:2;border-radius:0}.cax-inputnumber-buttons-horizontal .cax-button.cax-inputnumber-button-down{order:1;border-top-right-radius:0;border-bottom-right-radius:0}.cax-inputnumber-buttons-vertical{flex-direction:column}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-up{order:1;border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.cax-inputnumber-buttons-vertical .cax-inputnumber-input{order:2;border-radius:0;text-align:center}.cax-inputnumber-buttons-vertical .cax-button.cax-inputnumber-button-down{order:3;border-top-left-radius:0;border-top-right-radius:0;width:100%}.cax-inputnumber-input{flex:1 1 auto}.cax-fluid cax-inputnumber,.cax-fluid .cax-inputnumber{width:100%}.cax-fluid .cax-inputnumber .cax-inputnumber-input{width:1%}.cax-fluid .cax-inputnumber-buttons-vertical .cax-inputnumber-input{width:100%}.cax-inputnumber-clear-icon{position:absolute;cursor:pointer}.cax-inputnumber-clearable{position:relative}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1191,8 +1215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], placeholder: [{
                 type: Input
             }], size: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
+                type: Input
             }], maxlength: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -1253,6 +1276,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], variant: [{
                 type: Input
+            }], label: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], successText: [{
+                type: Input
+            }], invalid: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], minFractionDigits: [{
                 type: Input,
                 args: [{ transform: (value) => numberAttribute(value, null) }]
@@ -1293,14 +1325,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], templates: [{
                 type: ContentChildren,
                 args: [CaxTemplate]
+            }], value: [{
+                type: Input
             }] } });
 
 class InputNumberModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule], exports: [InputNumber, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule], exports: [InputNumber, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberModule, imports: [InputNumber, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: InputNumberModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [InputNumber, SharedModule],