UNPKG

primeng

Version:

PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB

1,238 lines (1,204 loc) 88.5 kB
import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, ViewChild, HostBinding, NgModule } from '@angular/core'; import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms'; import { getSelection } from '@primeuix/utils'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { AutoFocus } from 'primeng/autofocus'; import { BaseComponent } from 'primeng/basecomponent'; import { TimesIcon, AngleUpIcon, AngleDownIcon } from 'primeng/icons'; import { InputText } from 'primeng/inputtext'; import { BaseStyle } from 'primeng/base'; const theme = ({ dt }) => ` .p-inputnumber { display: inline-flex; position: relative; } .p-inputnumber-button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; background: ${dt('inputnumber.button.background')}; color: ${dt('inputnumber.button.color')}; width: ${dt('inputnumber.button.width')}; transition: background ${dt('inputnumber.transition.duration')}, color ${dt('inputnumber.transition.duration')}, border-color ${dt('inputnumber.transition.duration')}, outline-color ${dt('inputnumber.transition.duration')}; } .p-inputnumber-button:hover { background: ${dt('inputnumber.button.hover.background')}; color: ${dt('inputnumber.button.hover.color')}; } .p-inputnumber-button:active { background: ${dt('inputnumber.button.active.background')}; color: ${dt('inputnumber.button.active.color')}; } .p-inputnumber-stacked .p-inputnumber-button { position: relative; border: 0 none; } .p-inputnumber-stacked .p-inputnumber-button-group { display: flex; flex-direction: column; position: absolute; top: 1px; inset-inline-end: 1px; height: calc(100% - 2px); z-index: 1; } .p-inputnumber-stacked .p-inputnumber-increment-button { padding: 0; border-end-start-radius: calc(${dt('inputnumber.button.border.radius')} - 1px); } .p-inputnumber-stacked .p-inputnumber-decrement-button { padding: 0; border-end-end-radius: calc(${dt('inputnumber.button.border.radius')} - 1px); } .p-inputnumber-stacked .p-inputnumber-button { flex: 1 1 auto; border: 0 none; } .p-inputnumber-horizontal .p-inputnumber-button { border: 1px solid ${dt('inputnumber.button.border.color')}; } .p-inputnumber-horizontal .p-inputnumber-button:hover { border-color: ${dt('inputnumber.button.hover.border.color')}; } .p-inputnumber-horizontal .p-inputnumber-button:active { border-color: ${dt('inputnumber.button.active.border.color')}; } .p-inputnumber-horizontal .p-inputnumber-increment-button { order: 3; border-start-end-radius: ${dt('inputnumber.button.border.radius')}; border-end-end-radius: ${dt('inputnumber.button.border.radius')}; border-inline-start: 0 none; } .p-inputnumber-horizontal .p-inputnumber-input { order: 2; border-radius: 0; } .p-inputnumber-horizontal .p-inputnumber-decrement-button { order: 1; border-start-start-radius: ${dt('inputnumber.button.border.radius')}; border-end-start-radius: ${dt('inputnumber.button.border.radius')}; border-inline-end: 0 none; } .p-floatlabel:has(.p-inputnumber-horizontal) label { margin-inline-start: ${dt('inputnumber.button.width')}; } .p-inputnumber-vertical { flex-direction: column; } .p-inputnumber-vertical .p-inputnumber-button { border: 1px solid ${dt('inputnumber.button.border.color')}; padding-block: ${dt('inputnumber.button.vertical.padding')}; padding-inline: 0; } .p-inputnumber-vertical .p-inputnumber-button:hover { border-color: ${dt('inputnumber.button.hover.border.color')}; } .p-inputnumber-vertical .p-inputnumber-button:active { border-color: ${dt('inputnumber.button.active.border.color')}; } .p-inputnumber-vertical .p-inputnumber-increment-button { order: 1; border-start-start-radius: ${dt('inputnumber.button.border.radius')}; border-start-end-radius: ${dt('inputnumber.button.border.radius')}; width: 100%; border-block-end: 0 none; } .p-inputnumber-vertical .p-inputnumber-input { order: 2; border-radius: 0; text-align: center; } .p-inputnumber-vertical .p-inputnumber-decrement-button { order: 3; border-end-start-radius: ${dt('inputnumber.button.border.radius')}; border-end-end-radius: ${dt('inputnumber.button.border.radius')}; width: 100%; border-block-start: 0 none; } .p-inputnumber-input { flex: 1 1 auto; } .p-inputnumber-fluid { width: 100%; } .p-inputnumber-fluid .p-inputnumber-input { width: 1%; } .p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input { width: 100%; } .p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon { font-size: ${dt('form.field.sm.font.size')}; width: ${dt('form.field.sm.font.size')}; height: ${dt('form.field.sm.font.size')}; } .p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon { font-size: ${dt('form.field.lg.font.size')}; width: ${dt('form.field.lg.font.size')}; height: ${dt('form.field.lg.font.size')}; } 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 { border-color: ${dt('inputtext.focus.border.color')}; } 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': true, '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 }), pcInput: 'p-inputnumber-input', buttonGroup: 'p-inputnumber-button-group', incrementButton: ({ instance }) => ({ 'p-inputnumber-button p-inputnumber-increment-button': true, 'p-disabled': instance.showButtons && instance.max !== null && instance.maxlength }), decrementButton: ({ instance }) => ({ 'p-inputnumber-button p-inputnumber-decrement-button': true, 'p-disabled': instance.showButtons && instance.min !== null && instance.minlength }) }; class InputNumberStyle extends BaseStyle { name = 'inputnumber'; theme = theme; classes = classes; static ɵfac = /*@__PURE__*/ (() => { let ɵInputNumberStyle_BaseFactory; return function InputNumberStyle_Factory(__ngFactoryType__) { return (ɵInputNumberStyle_BaseFactory || (ɵInputNumberStyle_BaseFactory = i0.ɵɵgetInheritedFactory(InputNumberStyle)))(__ngFactoryType__ || InputNumberStyle); }; })(); static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: InputNumberStyle, factory: InputNumberStyle.ɵfac }); } (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputNumberStyle, [{ type: Injectable }], null, null); })(); /** * * InputNumber is an input component to provide numerical input. * * [Live Demo](https://www.primeng.org/inputnumber/) * * @module inputnumberstyle * */ var InputNumberClasses; (function (InputNumberClasses) { /** * Class name of the root element */ InputNumberClasses["root"] = "p-inputnumber"; /** * Class name of the input element */ InputNumberClasses["pcInput"] = "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"; })(InputNumberClasses || (InputNumberClasses = {})); const _c0 = ["clearicon"]; const _c1 = ["incrementbuttonicon"]; const _c2 = ["decrementbuttonicon"]; const _c3 = ["input"]; function InputNumber_ng_container_2_TimesIcon_1_Template(rf, ctx) { if (rf & 1) { const _r2 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "TimesIcon", 7); i0.ɵɵlistener("click", function InputNumber_ng_container_2_TimesIcon_1_Template_TimesIcon_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clear()); }); i0.ɵɵelementEnd(); } if (rf & 2) { i0.ɵɵproperty("ngClass", "p-inputnumber-clear-icon"); i0.ɵɵattribute("data-pc-section", "clearIcon"); } } function InputNumber_ng_container_2_span_2_1_ng_template_0_Template(rf, ctx) { } function InputNumber_ng_container_2_span_2_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵtemplate(0, InputNumber_ng_container_2_span_2_1_ng_template_0_Template, 0, 0, "ng-template"); } } function InputNumber_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) { const _r4 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "span", 8); i0.ɵɵlistener("click", function InputNumber_ng_container_2_span_2_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clear()); }); i0.ɵɵtemplate(1, InputNumber_ng_container_2_span_2_1_Template, 1, 0, null, 9); i0.ɵɵelementEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵattribute("data-pc-section", "clearIcon"); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearIconTemplate || ctx_r2._clearIconTemplate); } } function InputNumber_ng_container_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, InputNumber_ng_container_2_TimesIcon_1_Template, 1, 2, "TimesIcon", 5)(2, InputNumber_ng_container_2_span_2_Template, 2, 2, "span", 6); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.clearIconTemplate && !ctx_r2._clearIconTemplate); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r2.clearIconTemplate || ctx_r2._clearIconTemplate); } } function InputNumber_span_3_span_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "span", 13); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵproperty("ngClass", ctx_r2.incrementButtonIcon); i0.ɵɵattribute("data-pc-section", "incrementbuttonicon"); } } function InputNumber_span_3_ng_container_3_AngleUpIcon_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "AngleUpIcon"); } if (rf & 2) { i0.ɵɵattribute("data-pc-section", "incrementbuttonicon"); } } function InputNumber_span_3_ng_container_3_2_ng_template_0_Template(rf, ctx) { } function InputNumber_span_3_ng_container_3_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵtemplate(0, InputNumber_span_3_ng_container_3_2_ng_template_0_Template, 0, 0, "ng-template"); } } function InputNumber_span_3_ng_container_3_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, InputNumber_span_3_ng_container_3_AngleUpIcon_1_Template, 1, 1, "AngleUpIcon", 2)(2, InputNumber_span_3_ng_container_3_2_Template, 1, 0, null, 9); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIconTemplate && !ctx_r2._incrementButtonIconTemplate); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementButtonIconTemplate || ctx_r2._incrementButtonIconTemplate); } } function InputNumber_span_3_span_5_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "span", 13); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵproperty("ngClass", ctx_r2.decrementButtonIcon); i0.ɵɵattribute("data-pc-section", "decrementbuttonicon"); } } function InputNumber_span_3_ng_container_6_AngleDownIcon_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "AngleDownIcon"); } if (rf & 2) { i0.ɵɵattribute("data-pc-section", "decrementbuttonicon"); } } function InputNumber_span_3_ng_container_6_2_ng_template_0_Template(rf, ctx) { } function InputNumber_span_3_ng_container_6_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵtemplate(0, InputNumber_span_3_ng_container_6_2_ng_template_0_Template, 0, 0, "ng-template"); } } function InputNumber_span_3_ng_container_6_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, InputNumber_span_3_ng_container_6_AngleDownIcon_1_Template, 1, 1, "AngleDownIcon", 2)(2, InputNumber_span_3_ng_container_6_2_Template, 1, 0, null, 9); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIconTemplate && !ctx_r2._decrementButtonIconTemplate); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementButtonIconTemplate || ctx_r2._decrementButtonIconTemplate); } } function InputNumber_span_3_Template(rf, ctx) { if (rf & 1) { const _r5 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "span", 10)(1, "button", 11); i0.ɵɵlistener("mousedown", function InputNumber_span_3_Template_button_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseDown($event)); })("mouseup", function InputNumber_span_3_Template_button_mouseup_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseUp()); })("mouseleave", function InputNumber_span_3_Template_button_mouseleave_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseLeave()); })("keydown", function InputNumber_span_3_Template_button_keydown_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonKeyDown($event)); })("keyup", function InputNumber_span_3_Template_button_keyup_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonKeyUp()); }); i0.ɵɵtemplate(2, InputNumber_span_3_span_2_Template, 1, 2, "span", 12)(3, InputNumber_span_3_ng_container_3_Template, 3, 2, "ng-container", 2); i0.ɵɵelementEnd(); i0.ɵɵelementStart(4, "button", 11); i0.ɵɵlistener("mousedown", function InputNumber_span_3_Template_button_mousedown_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseDown($event)); })("mouseup", function InputNumber_span_3_Template_button_mouseup_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseUp()); })("mouseleave", function InputNumber_span_3_Template_button_mouseleave_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseLeave()); })("keydown", function InputNumber_span_3_Template_button_keydown_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonKeyDown($event)); })("keyup", function InputNumber_span_3_Template_button_keyup_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonKeyUp()); }); i0.ɵɵtemplate(5, InputNumber_span_3_span_5_Template, 1, 2, "span", 12)(6, InputNumber_span_3_ng_container_6_Template, 3, 2, "ng-container", 2); i0.ɵɵelementEnd()(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵattribute("data-pc-section", "buttonGroup"); i0.ɵɵadvance(); i0.ɵɵclassMap(ctx_r2.incrementButtonClass); i0.ɵɵproperty("ngClass", ctx_r2._incrementButtonClass)("disabled", ctx_r2.disabled); i0.ɵɵattribute("aria-hidden", true)("data-pc-section", "incrementbutton"); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r2.incrementButtonIcon); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIcon); i0.ɵɵadvance(); i0.ɵɵclassMap(ctx_r2.decrementButtonClass); i0.ɵɵproperty("ngClass", ctx_r2._decrementButtonClass)("disabled", ctx_r2.disabled); i0.ɵɵattribute("aria-hidden", true)("data-pc-section", "decrementbutton"); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r2.decrementButtonIcon); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIcon); } } function InputNumber_button_4_span_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "span", 13); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵproperty("ngClass", ctx_r2.incrementButtonIcon); i0.ɵɵattribute("data-pc-section", "incrementbuttonicon"); } } function InputNumber_button_4_ng_container_2_AngleUpIcon_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "AngleUpIcon"); } if (rf & 2) { i0.ɵɵattribute("data-pc-section", "incrementbuttonicon"); } } function InputNumber_button_4_ng_container_2_2_ng_template_0_Template(rf, ctx) { } function InputNumber_button_4_ng_container_2_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵtemplate(0, InputNumber_button_4_ng_container_2_2_ng_template_0_Template, 0, 0, "ng-template"); } } function InputNumber_button_4_ng_container_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, InputNumber_button_4_ng_container_2_AngleUpIcon_1_Template, 1, 1, "AngleUpIcon", 2)(2, InputNumber_button_4_ng_container_2_2_Template, 1, 0, null, 9); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIconTemplate && !ctx_r2._incrementButtonIconTemplate); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.incrementButtonIconTemplate || ctx_r2._incrementButtonIconTemplate); } } function InputNumber_button_4_Template(rf, ctx) { if (rf & 1) { const _r6 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "button", 11); i0.ɵɵlistener("mousedown", function InputNumber_button_4_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseDown($event)); })("mouseup", function InputNumber_button_4_Template_button_mouseup_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseUp()); })("mouseleave", function InputNumber_button_4_Template_button_mouseleave_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonMouseLeave()); })("keydown", function InputNumber_button_4_Template_button_keydown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonKeyDown($event)); })("keyup", function InputNumber_button_4_Template_button_keyup_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpButtonKeyUp()); }); i0.ɵɵtemplate(1, InputNumber_button_4_span_1_Template, 1, 2, "span", 12)(2, InputNumber_button_4_ng_container_2_Template, 3, 2, "ng-container", 2); i0.ɵɵelementEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵclassMap(ctx_r2.incrementButtonClass); i0.ɵɵproperty("ngClass", ctx_r2._incrementButtonClass)("disabled", ctx_r2.disabled); i0.ɵɵattribute("aria-hidden", true)("data-pc-section", "incrementbutton"); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r2.incrementButtonIcon); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.incrementButtonIcon); } } function InputNumber_button_5_span_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "span", 13); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵproperty("ngClass", ctx_r2.decrementButtonIcon); i0.ɵɵattribute("data-pc-section", "decrementbuttonicon"); } } function InputNumber_button_5_ng_container_2_AngleDownIcon_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "AngleDownIcon"); } if (rf & 2) { i0.ɵɵattribute("data-pc-section", "decrementbuttonicon"); } } function InputNumber_button_5_ng_container_2_2_ng_template_0_Template(rf, ctx) { } function InputNumber_button_5_ng_container_2_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵtemplate(0, InputNumber_button_5_ng_container_2_2_ng_template_0_Template, 0, 0, "ng-template"); } } function InputNumber_button_5_ng_container_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, InputNumber_button_5_ng_container_2_AngleDownIcon_1_Template, 1, 1, "AngleDownIcon", 2)(2, InputNumber_button_5_ng_container_2_2_Template, 1, 0, null, 9); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIconTemplate && !ctx_r2._decrementButtonIconTemplate); i0.ɵɵadvance(); i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.decrementButtonIconTemplate || ctx_r2._decrementButtonIconTemplate); } } function InputNumber_button_5_Template(rf, ctx) { if (rf & 1) { const _r7 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "button", 11); i0.ɵɵlistener("mousedown", function InputNumber_button_5_Template_button_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseDown($event)); })("mouseup", function InputNumber_button_5_Template_button_mouseup_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseUp()); })("mouseleave", function InputNumber_button_5_Template_button_mouseleave_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonMouseLeave()); })("keydown", function InputNumber_button_5_Template_button_keydown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonKeyDown($event)); })("keyup", function InputNumber_button_5_Template_button_keyup_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDownButtonKeyUp()); }); i0.ɵɵtemplate(1, InputNumber_button_5_span_1_Template, 1, 2, "span", 12)(2, InputNumber_button_5_ng_container_2_Template, 3, 2, "ng-container", 2); i0.ɵɵelementEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵclassMap(ctx_r2.decrementButtonClass); i0.ɵɵproperty("ngClass", ctx_r2._decrementButtonClass)("disabled", ctx_r2.disabled); i0.ɵɵattribute("aria-hidden", true)("data-pc-section", "decrementbutton"); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", ctx_r2.decrementButtonIcon); i0.ɵɵadvance(); i0.ɵɵproperty("ngIf", !ctx_r2.decrementButtonIcon); } } 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 BaseComponent { injector; /** * Displays spinner buttons. * @group Props */ showButtons = false; /** * Whether to format the value. * @group Props */ format = true; /** * Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical". * @group Props */ buttonLayout = 'stacked'; /** * Identifier of the focus input to match a label defined for the component. * @group Props */ inputId; /** * Style class of the component. * @group Props */ styleClass; /** * Inline style of the component. * @group Props */ style; /** * Advisory information to display on input. * @group Props */ placeholder; /** * Defines the size of the component. * @group Props */ size; /** * Maximum number of character allows in the input field. * @group Props */ maxlength; /** * Specifies tab order of the element. * @group Props */ tabindex; /** * Title text of the input text. * @group Props */ title; /** * Specifies one or more IDs in the DOM that labels the input field. * @group Props */ ariaLabelledBy; /** * Used to define a string that labels the input element. * @group Props */ ariaLabel; /** * Used to indicate that user input is required on an element before a form can be submitted. * @group Props */ ariaRequired; /** * Name of the input field. * @group Props */ name; /** * Indicates that whether the input field is required. * @group Props */ required; /** * Used to define a string that autocomplete attribute the current element. * @group Props */ autocomplete; /** * Mininum boundary value. * @group Props */ min; /** * Maximum boundary value. * @group Props */ max; /** * Style class of the increment button. * @group Props */ incrementButtonClass; /** * Style class of the decrement button. * @group Props */ decrementButtonClass; /** * Style class of the increment button. * @group Props */ incrementButtonIcon; /** * Style class of the decrement button. * @group Props */ decrementButtonIcon; /** * When present, it specifies that an input field is read-only. * @group Props */ readonly = false; /** * Step factor to increment/decrement the value. * @group Props */ step = 1; /** * Determines whether the input field is empty. * @group Props */ allowEmpty = true; /** * Locale to be used in formatting. * @group Props */ locale; /** * The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotiation for details. * @group Props */ localeMatcher; /** * Defines the behavior of the component, valid values are "decimal" and "currency". * @group Props */ mode = 'decimal'; /** * The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided. * @group Props */ currency; /** * How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol". * @group Props */ currencyDisplay; /** * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. * @group Props */ useGrouping = true; /** * Specifies the input variant of the component. * @group Props */ variant = 'outlined'; /** * The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). * @group Props */ minFractionDigits; /** * The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information). * @group Props */ maxFractionDigits; /** * Text to display before the value. * @group Props */ prefix; /** * Text to display after the value. * @group Props */ suffix; /** * Inline style of the input field. * @group Props */ inputStyle; /** * Style class of the input field. * @group Props */ inputStyleClass; /** * When enabled, a clear icon is displayed to clear the value. * @group Props */ showClear = false; /** * When present, it specifies that the component should automatically get focus on load. * @group Props */ autofocus; /** * When present, it specifies that the element should be disabled. * @group Props */ get disabled() { return this._disabled; } set disabled(disabled) { if (disabled) this.focused = false; this._disabled = disabled; if (this.timer) this.clearTimer(); } /** * Spans 100% width of the container when enabled. * @group Props */ fluid = false; /** * 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(); /** * Template of the clear icon. * @group Templates */ clearIconTemplate; /** * Template of the increment button icon. * @group Templates */ incrementButtonIconTemplate; /** * Template of the decrement button icon. * @group Templates */ decrementButtonIconTemplate; templates; input; _clearIconTemplate; _incrementButtonIconTemplate; _decrementButtonIconTemplate; value; onModelChange = () => { }; onModelTouched = () => { }; focused; initialized; groupChar = ''; prefixChar = ''; suffixChar = ''; isSpecialChar; timer; lastValue; _numeral; numberFormat; _decimal; _decimalChar; _group; _minusSign; _currency; _prefix; _suffix; _index; _disabled; _componentStyle = inject(InputNumberStyle); ngControl = null; get _rootClass() { return this._componentStyle.classes.root({ instance: this }); } get hasFluid() { const nativeElement = this.el.nativeElement; const fluidComponent = nativeElement.closest('p-fluid'); return this.fluid || !!fluidComponent; } get _incrementButtonClass() { return this._componentStyle.classes.incrementButton({ instance: this }); } get _decrementButtonClass() { return this._componentStyle.classes.decrementButton({ instance: this }); } constructor(injector) { super(); this.injector = injector; } ngOnChanges(simpleChange) { super.ngOnChanges(simpleChange); const props = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'prefix', 'suffix']; if (props.some((p) => !!simpleChange[p])) { this.updateConstructParser(); } } get hostClasses() { if (typeof this._rootClass === 'string') { return this._rootClass; } if (Array.isArray(this._rootClass)) { return this._rootClass.join(' '); } if (typeof this._rootClass === 'object') { return Object.keys(this._rootClass) .filter((key) => this._rootClass[key]) .join(' '); } return ''; } ngOnInit() { super.ngOnInit(); this.ngControl = this.injector.get(NgControl, null, { optional: true }); this.constructParser(); this.initialized = true; } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'clearicon': this._clearIconTemplate = item.template; break; case 'incrementbuttonicon': this._incrementButtonIconTemplate = item.template; break; case 'decrementbuttonicon': this._decrementButtonIconTemplate = item.template; break; } }); } getOptions() { return { localeMatcher: this.localeMatcher, style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, useGrouping: this.useGrouping, minimumFractionDigits: this.minFractionDigits ?? undefined, maximumFractionDigits: this.maxFractionDigits ?? undefined }; } constructParser() { this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions()); const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse(); const index = new Map(numerals.map((d, i) => [d, i])); this._numeral = new RegExp(`[${numerals.join('')}]`, 'g'); this._group = this.getGroupingExpression(); this._minusSign = this.getMinusSignExpression(); this._currency = this.getCurrencyExpression(); this._decimal = this.getDecimalExpression(); this._decimalChar = this.getDecimalChar(); this._suffix = this.getSuffixExpression(); this._prefix = this.getPrefixExpression(); this._index = (d) => index.get(d); } updateConstructParser() { if (this.initialized) { this.constructParser(); } } escapeRegExp(text) { return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); } getDecimalExpression() { const decimalChar = this.getDecimalChar(); return new RegExp(`[${decimalChar}]`, 'g'); } getDecimalChar() { const formatter = new Intl.NumberFormat(this.locale, { ...this.getOptions(), useGrouping: false }); return formatter .format(1.1) .replace(this._currency, '') .trim() .replace(this._numeral, ''); } getGroupingExpression() { const formatter = new Intl.NumberFormat(this.locale, { useGrouping: true }); this.groupChar = formatter.format(1000000).trim().replace(this._numeral, '').charAt(0); return new RegExp(`[${this.groupChar}]`, 'g'); } getMinusSignExpression() { const formatter = new Intl.NumberFormat(this.locale, { useGrouping: false }); return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g'); } getCurrencyExpression() { if (this.currency) { const formatter = new Intl.NumberFormat(this.locale, { style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 }); return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._group, '')}]`, 'g'); } return new RegExp(`[]`, 'g'); } getPrefixExpression() { if (this.prefix) { this.prefixChar = this.prefix; } else { const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay }); this.prefixChar = formatter.format(1).split('1')[0]; } return new RegExp(`${this.escapeRegExp(this.prefixChar || '')}`, 'g'); } getSuffixExpression() { if (this.suffix) { this.suffixChar = this.suffix; } else { const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay, minimumFractionDigits: 0, maximumFractionDigits: 0 }); this.suffixChar = formatter.format(1).split('1')[1]; } return new RegExp(`${this.escapeRegExp(this.suffixChar || '')}`, 'g'); } formatValue(value) { if (value != null) { if (value === '-') { // Minus sign return value; } if (this.format) { let formatter = new Intl.NumberFormat(this.locale, this.getOptions()); let formattedValue = formatter.format(value); if (this.prefix && value != this.prefix) { formattedValue = this.prefix + formattedValue; } if (this.suffix && value != this.suffix) { formattedValue = formattedValue + this.suffix; } return formattedValue; } return value.toString(); } return ''; } parseValue(text) { const suffixRegex = new RegExp(this._suffix, ''); const prefixRegex = new RegExp(this._prefix, ''); const currencyRegex = new RegExp(this._currency, ''); let filteredText = text .replace(suffixRegex, '') .replace(prefixRegex, '') .trim() .replace(/\s/g, '') .replace(currencyRegex, '') .replace(this._group, '') .replace(this._minusSign, '-') .replace(this._decimal, '.') .replace(this._numeral, this._index); if (filteredText) { if (filteredText === '-') // Minus sign return filteredText; let parsedValue = +filteredText; return isNaN(parsedValue) ? null : parsedValue; } return null; } repeat(event, interval, dir) { if (this.readonly) { return; } let i = interval || 500; this.clearTimer(); this.timer = setTimeout(() => { this.repeat(event, 40, dir); }, i); this.spin(event, dir); } spin(event, dir) { let step = this.step * dir; let currentValue = this.parseValue(this.input?.nativeElement.value) || 0; let newValue = this.validateValue(currentValue + step); if (this.maxlength && this.maxlength < this.formatValue(newValue).length) { return; } this.updateInput(newValue, null, 'spin', null); this.updateModel(event, newValue); this.handleOnInput(event, currentValue, newValue); } clear() { this.value = null; this.onModelChange(this.value); this.onClear.emit(); } onUpButtonMouseDown(event) { if (event.button === 2) { this.clearTimer(); return; } if (!this.disabled) { this.input?.nativeElement.focus(); this.repeat(event, null, 1); event.preventDefault(); } } onUpButtonMouseUp() { if (!this.disabled) { this.clearTimer(); } } onUpButtonMouseLeave() { if (!this.disabled) { this.clearTimer(); } } onUpButtonKeyDown(event) { if (event.keyCode === 32 || event.keyCode === 13) { this.repeat(event, null, 1); } } onUpButtonKeyUp() { if (!this.disabled) { this.clearTimer(); } } onDownButtonMouseDown(event) { if (event.button === 2) { this.clearTimer(); return; } if (!this.disabled) { this.input?.nativeElement.focus(); this.repeat(event, null, -1); event.preventDefault(); } } onDownButtonMouseUp() { if (!this.disabled) { this.clearTimer(); } } onDownButtonMouseLeave() { if (!this.disabled) { this.clearTimer(); } } onDownButtonKeyUp() { if (!this.disabled) { this.clearTimer(); } } onDownButtonKeyDown(event) { if (event.keyCode === 32 || event.keyCode === 13) { this.repeat(event, null, -1); } } onUserInput(event) { if (this.readonly) { return; } if (this.isSpecialChar) { event.target.value = this.lastValue; } this.isSpecialChar = false; } onInputKeyDown(event) { if (this.readonly) { return; } this.lastValue = event.target.value; if (event.shiftKey || event.altKey) { this.isSpecialChar = true; return; } let selectionStart = event.target.selectionStart; let selectionEnd = event.target.selectionEnd; let inputValue = event.target.value; let newValueStr = null; if (event.altKey) { event.preventDefault(); } switch (event.key) { case 'ArrowUp': this.spin(event, 1); event.preventDefault(); break; case 'ArrowDown': this.spin(event, -1); event.preventDefault(); break; case 'ArrowLeft': for (let index = selectionStart; index <= inputValue.length; index++) { const previousCharIndex = index === 0 ? 0 : index - 1; if (this.isNumeralChar(inputValue.charAt(previousCharIndex))) { this.input.nativeElement.setSelectionRange(index, index); break; } } break; case 'ArrowRight': for (let index = selectionEnd; index >= 0; index--) { if (this.isNumeralChar(inputValue.charAt(index))) { this.input.nativeElement.setSelectionRange(index, index); break; } } break; case 'Tab': case 'Enter': newValueStr = this.validateValue(this.parseValue(this.input.nativeElement.value)); this.input.nativeElement.value = this.formatValue(newValueStr); this.input.nativeElement.setAttribute('aria-valuenow', newValueStr); this.updateModel(event, newValueStr); break; case 'Backspace': { event.preventDefault(); if (selectionStart === selectionEnd) { if ((selectionStart == 1 && this.prefix) || (selectionStart == inputValue.length && this.suffix)) { break; } const deleteChar = inputValue.charAt(selectionStart - 1); const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue); if (this.isNumeralChar(deleteChar)) { const decimalLength = this.getDecimalLength(inputValue); if (this._group.test(deleteChar)) { this._group.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1); } else if (this._decimal.test(deleteChar)) { this._decimal.lastIndex = 0; if (decimalLength) { this.input?.nativeElement.setSelectionRange(selectionStart - 1, selectionStart - 1); } else { newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart); } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0'; newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart); newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : ''; } else { newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart); } } else if (this.mode === 'currency' && deleteChar.search(this._currency) != -1) { newValueStr = inputValue.slice(1); } this.updateValue(event, newValueStr, null, 'delete-single'); } else { newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd); this.updateValue(event, newValueStr, null, 'delete-range'); } break; } case 'Delete': event.preventDefault(); if (selectionStart === selectionEnd) { if ((selectionStart == 0 && this.prefix) || (selectionStart == inputValue.length - 1 && this.suffix)) { break; } const deleteChar = inputValue.charAt(selectionStart); const { decimalCharIndex, decimalCharIndexWithoutPrefix } = this.getDecimalCharIndexes(inputValue); if (this.isNumeralChar(deleteChar)) { const decimalLength = this.getDecimalLength(inputValue); if (this._group.test(deleteChar)) { this._group.lastIndex = 0; newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2); } else if (this._decimal.test(deleteChar)) { this._decimal.lastIndex = 0; if (decimalLength) { this.input?.nativeElement.setSelectionRange(selectionStart + 1, selectionStart + 1); } else { newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1); } } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) { const insertedText = this.isDecimalMode() && (this.minFractionDigits || 0) < decimalLength ? '' : '0'; newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1); } else if (decimalCharIndexWithoutPrefix === 1) { newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1); newValueStr = this.parseValue(newValueStr) > 0 ? newValueStr : ''; } else { newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1); } } this.updateValue(event, newValueStr, null, 'delete-back-single'); } else { newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd); this.updateValue(event, newValueStr, null, 'delete-range'); } break; case 'Home': if (this.min) { this.updateModel(event, this.min); event.preventDefault(); } break; case 'End': if (this.max) { this.updateModel(event, this.max); event.preventDefault(); } break; default: break; } this.onKeyDown.emit(event); } onInputKeyPress(event) { if (this.readonly) { return; } let code = event.which || event.keyCode; let char = String.fromCharCode(code); let isDecimalSign = this.isDecimalSign(char); const isMinusSign = this.isMinusSign(char); if (code != 13) { event.preventDefault(); } if (!isDecimalSign && event.code === 'NumpadDecimal') { isDecimalSign = true; char = this._decimalChar; code = char.charCodeAt(0); }