@esri/calcite-components

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime"; import { Position, Scale, Status } from "../interfaces"; import { FormComponent } from "../../utils/form"; import { InteractiveComponent } from "../../utils/interactive"; import { LabelableComponent } from "../../utils/label"; import { LoadableComponent } from "../../utils/loadable"; import { LocalizedComponent, NumberingSystem } from "../../utils/locale"; import { T9nComponent } from "../../utils/t9n"; import { InputPlacement, NumberNudgeDirection } from "../input/interfaces"; import { InputNumberMessages } from "./assets/input-number/t9n"; /** * @slot action - A slot for positioning a button next to the component. */ export declare class InputNumber implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent { el: HTMLCalciteInputNumberElement; /** Specifies the text alignment of the component's value. */ alignment: Position; /** * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. * * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) */ autofocus: boolean; /** * When `true`, a clear button is displayed when the component has a value. */ clearable: boolean; /** * When `true`, interaction is prevented and the component is displayed with lower opacity. * * @mdn [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) */ disabled: boolean; disabledWatcher(): void; /** * The ID of the form that will be associated with the component. * * When not set, the component will be associated with its ancestor form element, if any. */ form: string; /** * When `true`, number values are displayed with a group separator corresponding to the language and country format. */ groupSeparator: boolean; /** * When `true`, the component will not be visible. * * @mdn [hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) */ hidden: boolean; /** * Specifies an icon to display. * * @futureBreaking Remove boolean type as it is not supported. */ icon: string | boolean; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ iconFlipRtl: boolean; /** Accessible name for the component's button or hyperlink. */ label: string; /** When `true`, the component is in the loading state and `calcite-progress` is displayed. */ loading: boolean; /** * Specifies the Unicode numeral system used by the component for localization. */ numberingSystem: NumberingSystem; /** * Toggles locale formatting for numbers. * * @internal */ localeFormat: boolean; /** * Specifies the maximum value. * * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max) */ max: number; /** watcher to update number-to-string for max */ maxWatcher(): void; /** * Specifies the minimum value. * * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min) */ min: number; /** watcher to update number-to-string for min */ minWatcher(): void; /** * Specifies the maximum length of text for the component's value. * * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength) */ maxLength: number; /** * Specifies the minimum length of text for the component's value. * * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength) */ minLength: number; /** * Specifies the name of the component. * * Required to pass the component's `value` on form submission. * * @mdn [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) */ name: string; /** Specifies the placement of the buttons. */ numberButtonType: InputPlacement; /** * Specifies placeholder text for the component. * * @mdn [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder) */ placeholder: string; /** Adds text to the start of the component. */ prefixText: string; /** * When `true`, the component's value can be read, but cannot be modified. * * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ readOnly: boolean; /** When `true`, the component must have a value in order for the form to submit. */ required: boolean; /** Specifies the size of the component. */ scale: Scale; /** Specifies the status of the input field, which determines message and icons. */ status: Status; /** * Specifies the granularity that the component's value must adhere to. * * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) */ step: number | "any"; /** * Specifies the type of content to autocomplete, for use in forms. * Read the native attribute's documentation on MDN for more info. * * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ autocomplete: string; /** * Specifies the type of content to help devices display an appropriate virtual keyboard. * Read the native attribute's documentation on MDN for more info. * * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) */ inputMode: string; /** * Specifies the action label or icon for the Enter key on virtual keyboards. * Read the native attribute's documentation on MDN for more info. * * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) */ enterKeyHint: string; /** Adds text to the end of the component. */ suffixText: string; /** * @internal */ editingEnabled: boolean; /** The component's value. */ value: string; /** * Made into a prop for testing purposes only * * @internal */ messages: InputNumberMessages; /** * Use this property to override individual strings used by the component. */ messageOverrides: Partial<InputNumberMessages>; onMessagesChange(): void; valueWatcher(newValue: string, previousValue: string): void; updateRequestedIcon(): void; labelEl: HTMLCalciteLabelElement; formEl: HTMLFormElement; defaultValue: InputNumber["value"]; inlineEditableEl: HTMLCalciteInlineEditableElement; /** number text input element for locale */ private childNumberEl?; get isClearable(): boolean; private minString?; private maxString?; private previousEmittedNumberValue; private previousValue; private previousValueOrigin; /** the computed icon to render */ private requestedIcon?; private nudgeNumberValueIntervalId; mutationObserver: import("../../utils/observers").ExtendedMutationObserver; private userChangedValue; effectiveLocale: string; effectiveLocaleWatcher(locale: string): void; defaultMessages: InputNumberMessages; localizedValue: string; slottedActionElDisabledInternally: boolean; connectedCallback(): void; componentDidLoad(): void; disconnectedCallback(): void; componentWillLoad(): Promise<void>; componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean; componentDidRender(): void; /** * @internal */ calciteInternalInputNumberFocus: EventEmitter<void>; /** * @internal */ calciteInternalInputNumberBlur: EventEmitter<void>; /** * Fires each time a new value is typed. */ calciteInputNumberInput: EventEmitter<void>; /** * Fires each time a new value is typed and committed. */ calciteInputNumberChange: EventEmitter<void>; /** Sets focus on the component. */ setFocus(): Promise<void>; /** Selects the text of the component's `value`. */ selectText(): Promise<void>; keyDownHandler: (event: KeyboardEvent) => void; onLabelClick(): void; incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void; private clearInputValue; private emitChangeIfUserModified; private inputNumberBlurHandler; private clickHandler; private inputNumberFocusHandler; private inputNumberInputHandler; private inputNumberKeyDownHandler; private nudgeNumberValue; private nudgeButtonPointerUpAndOutHandler; private nudgeButtonPointerDownHandler; onFormReset(): void; syncHiddenFormInput(input: HTMLInputElement): void; hiddenInputChangeHandler: (event: Event) => void; private setChildNumberElRef; private setDisabledAction; private setInputNumberValue; private setPreviousEmittedNumberValue; private normalizeValue; private setPreviousNumberValue; private setNumberValue; private inputNumberKeyUpHandler; private warnAboutInvalidNumberValue; render(): VNode; }