import { EventEmitter } from "../../stencil-public-runtime"; import { A11yComponent, DuetNumericInput, ThemeableComponent } from "../../common"; import { DuetLanguage, DuetLocale, DuetMargin, DuetTheme } from "../../common-types"; import { DuetLangObject } from "../../utils/language-utils"; export type DuetNumberInputEvent = { originalEvent?: Event; component: "duet-number-input"; value: string; valueAsNumber: number; }; /** * @slot tooltip - Use to place a tooltip alongside the label. */ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericInput, A11yComponent { /** * Own Properties */ private duetInputElement?; private inputId; private proxyId; /** * Reference to host HTML element. */ element: HTMLElement; /** * The currently active language. This setting changes the accessible labels to match the * chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ language: DuetLanguage; /** * Locale used to format the entered value. Note that localization is used only for decimal separator, as using thousands * separators would break keyboard input. */ locale: DuetLocale; /** * Unit for the number input. */ unit: string; /** * State() variables * Inlined decorator, alphabetical order. */ focusedValue: string; /** * Indicates the id of a related component’s visually focused element. */ accessibleActiveDescendant: string; /** * Use this prop to add an aria-controls attribute. Use the attribute to * indicate the id of a component controlled by this component. */ accessibleControls: string; /** * Details of the component */ accessibleDetails: string; /** * String of id's that indicate alternative labels elements */ accessibleLabelledBy: string; /** * Aria description the button */ accessibleDescription: string; /** * Indicates the id of a component owned by the input. */ accessibleOwns: string; /** * Indicates the id of a component that describes the input. */ accessibleDescribedBy: string; /** * Defaults for accessibleLive * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ accessibleLiveDefaults: DuetLangObject | string; /** * Format of message used to announce current amount when switching between amounts. Note that the default has "euros" * so if you use another unit is is essential you set this attribute to reflect that unit. * The string {current} is replaced with the current amount. * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"} */ accessibleLive: string; /** * Disables the aria-live messaging used internally in this component. This could be useful when you want to use custom aria-live messages instead. */ accessibleLiveEnabled: boolean; /** * Defaults for accessibleAdd * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ accessibleAddDefaults: DuetLangObject | string; /** * Accessible label for the add button that is read for screen reader users. The placeholders {step} and {unit} * are replaced with respective properties. * @default {fi: "Lisää {step} {unit}", en: "Add {step} {unit}", sv: "Lägg till {step} {unit}"} */ accessibleAdd: string; /** * Defaults for accessibleSubtract * @default {fi: "Vähenn {step} {unit}ä", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ accessibleSubtractDefaults: DuetLangObject | string; /** * Accessible label for the subtract button that is read for screen reader users. The placeholders {step} and {unit} * are replaced with respective properties. * @default {fi: "Vähennä {step} {unit}", en: "Subtract {step} {unit}", sv: "Sutrahera {step} {unit}"} */ accessibleSubtract: string; /** * Theme of the input. */ theme: DuetTheme; /** * Controls the margin of the component. */ margin: DuetMargin; /** * Expands the input to fill 100% of the container width. */ expand: boolean; /** * Adds a unique identifier for the input. */ identifier: string; /** * Minimum value. */ min: number; /** * Defaults for Label * @default {fi: "Etiketti", en: "Label", sv: "Märka"} */ labelDefaults: DuetLangObject | string; /** * Label for the number input. * @default {fi: "Etiketti", en: "Label", sv: "Märka"} */ label: string; /** * Visually hide the label, but still show it to screen readers. */ labelHidden: boolean; /** * Maximum value. */ max: number; /** * Name of the input. */ name: string; /** * Display the input in error state along with an error message. */ error: string; /** * Tooltip to display next to the label of the input. */ tooltip: string; /** * Step amount. */ step: number; /** * Controls whether or not value gets rounded to the nearest * multiple of a step on blur. Set to "false" to disable this behaviour. */ rounding: boolean; /** * Defines a specific role attribute for the input. */ role: string | null; /** * Makes the number input component disabled. This prevents users from being able to * interact with the input, and conveys its inactive state to assistive technologies. */ disabled: boolean; /** * Set whether the input is required or not. Please note that this is required for * accessible inputs when the user is required to fill them. When using this property * you need to also set “novalidate” attribute to your form element to prevent * browser from displaying its own validation errors. */ required: boolean; /** * Value of the input. This is passed as a string since Number Input uses Duet’s Input component internally and we need the value to support spaces and the unit as well. */ value: string; /** * Emitted when the value has changed. */ duetChange: EventEmitter; /** * Emitted when a keyboard input has ocurred. */ duetInput: EventEmitter; /** * Emitted when the input loses focus. */ duetBlur: EventEmitter; /** * Emitted when the input has focus. */ duetFocus: EventEmitter; /** * Component lifecycle events. */ componentWillLoad(): void; connectedCallback(): void; disconnectedCallback(): void; componentDidRender(): void; /** * Component event handling. */ private handleFocus; private handleKeyDown; private handleChange; private handleBlur; /** * Sets focus on the specified `duet-number-input`. Use this method instead of the global * `input.focus()`. */ setFocus(options?: FocusOptions): Promise; /** * Returns a promise which resolves to the current input numeric value. */ getValueAsNumber(): Promise; /** * Local methods. */ private emitChange; private emitNull; private localizeValue; private clearValue; private setValue; private add; private subtract; private getUnitString; private formatAnnouncement; /** * render() function * Always the last one in the class. */ render(): any; }