import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime'; import { Color, StyleEvent, TextInputChangeEvent } from '../../interface'; import { DatasourceInterface } from '../../types/datasource-interface'; export declare class Input implements ComponentInterface, DatasourceInterface { private inputId; private nativeInput?; private didBlurAfterEdit; luInputEl: HTMLElement; /** * Does element have focus? */ hasFocus: boolean; /** * This is used when the parent form group receives the update event to tell the parent if it should validate or not. */ isResetting: boolean; /** * If the value of the type attribute is file, this attribute indicates the types of files that the server accepts. * otherwise it's ignored. The value must be comma-separated unique “content type specifiers”: * A case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc). * A valid MIME type with no extensions. * audio/* representing sound files. * video/* representing video files. * image/* representing image files. */ accept?: string; /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ ariaLabeledByAddition: string; /** * This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered. * There are a lot of options... refer to docs. Defaults to "off" */ autocomplete: string; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. */ autocapitalize: string; /** * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. */ autocorrect: string; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. */ autofocus: boolean; /** * used for autocomplete accessibility */ ariaAutoComplete: 'both' | 'list'; /** * used for combo box accessibility - defines the listbox if there is one */ ariaControls: string; /** * used for combo box accessibility - defines the active option */ ariaActiveDescendant: string; /** * If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. */ clearInput: boolean; /** * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ clearOnEdit?: boolean; /** * If the value of the type attribute is file, this Boolean attribute indicates that capture of media directly from the device's sensors using a media capture mechanism is preferred, such as a webcam or microphone. */ capture: string; /** * If the value of the type attribute is radio or checkbox, this Boolean attribute pre-checks the control before the user interacts with it. */ checked: boolean; /** * The color to use from the Liberty color palette. * Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ color?: Color; /** * Set the amount of time, in milliseconds, to wait to trigger the `luChange` event after each keystroke. Default `0`. */ debounce: number; protected debounceChanged(): void; /** * This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form. */ disabled: boolean; /** * The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a
element in the same document. If this attribute isn't used, the element is associated with its nearest ancestor element, if any. This attribute lets you to place elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form. */ form: string; /** * @internal - used by the form group element to declare it's presence */ hasFormGroup: boolean; /** * id set dynamically */ useId: string; /** * A hint to browsers for which virtual keyboard to display. This attribute applies when the the type attribute is text, password, email, or url. Possible values: * none: No virtual keyboard should be displayed. * text: Text input in the user's locale. * decimal: Fractional numeric input. * numeric: Numeric input. * tel: Telephone input, including asterisk and pound key. Prefer . * search: A virtual keyboard optimized for search input. * email: Email input. Prefer . * url: URL input. Prefer . */ inputmode: string; /** * Declares input as invalid */ invalid: boolean; /** * Points to a of predefined options to suggest to the user. The value must be the id of a element in the same document. Browsers display only valid options for the input. This attribute is ignored when the type attribute is hidden, checkbox, radio, file, or a button type. */ list: string; /** * The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */ max: number | string; /** * The minimum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */ min: number | string; /** * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */ minLength: number; /** * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */ maxLength: number; /** * This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file. */ multiple: boolean; /** * The name of the control, which is submitted with the form data. */ name: string; /** * removes the border */ noBorder: boolean; /** * A regular expression that the control's value is checked against. The pattern must match the entire value. Use the title attribute to describe the pattern to help the user. This attribute only applies when the value of the type attribute is text, search, tel, url, email, or password. The regular expression language is the same as the JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes. */ pattern: string; /** * A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text must not contain carriage returns or line-feeds. */ placeholder: string; /** * Prefix Icon. Select from Lu Icons list */ prefixIcon: string; /** * Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed */ prefixIconClickable: boolean; /** * Suffix Icon. Select from Lu Icons List. Does not show up if clearInput is set to true. */ suffixIcon: string; /** * Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed */ suffixIconClickable: boolean; /** * This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit). */ readOnly: boolean; /** * This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. */ required: boolean; /** * The initial size of the control. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20. */ size: number; /** * Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. */ spellcheck: boolean; /** * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum. */ step: number | string; /** * The position of the element in the tabbing navigation order for the current document. */ tabIndexWanted: number; /** * This specifies what type of input it is. * button | checkbox | color | date | datetime-local | email | file | hidden | image | month | number | password * radio | range | reset | search | submit | tel | text | time | url | week */ type: 'text' | 'email' | 'password'; /** * Declares input as validated */ valid: boolean; /** * The value of the input. */ value: string; /** * Update the native input element when the value changes */ protected valueChanged(): void; /** * Emitted when a keyboard input ocurred. */ luInput: EventEmitter; /** * Emitted when the value has changed. */ luChange: EventEmitter; /** * Emitted when the styles change. */ luStyle: EventEmitter; /** * Emitted when the input loses focus. */ luBlur: EventEmitter; /** * Emitted when the input has focus. */ luFocus: EventEmitter; /** * Emitted when the input has been created. */ luInputDidLoad: EventEmitter; /** * Emitted when the input has been removed. */ luInputDidUnload: EventEmitter; /** * Suffix icon clicked or tapped */ luSuffixClickedOrTapped: EventEmitter; /** * Prefix icon clicked or tapped */ luPrefixClickedOrTapped: EventEmitter; componentWillLoad(): void; componentDidLoad(): void; componentDidUnload(): void; /** * this gives us a handle to set focus on the element */ setFocus(): Promise; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ updateValue(update: any): Promise; private clearTextInput; private emitStyle; private focusChanged; private hasValue; private getValue; private getType; private onInput; private onBlur; private onFocus; private onKeydown; private onPrefixClickedOrTapped; private onSuffixClickedOrTapped; render(): any; }