/** * Auro-input provides users a way to enter data into a text field. * * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. * @attr {Boolean} bordered - Applies bordered UI variant. * @attr {Boolean} borderless - Applies borderless UI variant. * @attr {Boolean} disabled - If set, disables the input. * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. * @prop {String} errorMessage - Contains the help text message for the current validity error. * @attr {String} helpText - Deprecated, see `slot`. * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. * @attr {String} id - Sets the unique ID of the element. * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. * @attr {String} label - Deprecated, see `slot`. * @attr {String} lang - defines the language of an element. * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. * @attr {String} validity - Specifies the `validityState` this element is in. * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. * * @slot helptext - Sets the help text displayed below the input. * @slot label - Sets the label text for the input. * * @csspart wrapper - Use for customizing the style of the root element * @csspart label - Use for customizing the style of the label element * @csspart helpText - Use for customizing the style of the helpText element * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) * @event input - Event fires when the value of an `auro-input` has been changed. * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. */ export default class BaseInput extends LitElement { static get properties(): { id: { type: StringConstructor; }; label: { type: StringConstructor; }; name: { type: StringConstructor; }; type: { type: StringConstructor; reflect: boolean; }; value: { type: StringConstructor; }; lang: { type: StringConstructor; }; pattern: { type: StringConstructor; reflect: boolean; }; icon: { type: BooleanConstructor; }; disabled: { type: BooleanConstructor; }; required: { type: BooleanConstructor; }; noValidate: { type: BooleanConstructor; }; helpText: { type: StringConstructor; }; spellcheck: { type: StringConstructor; }; autocorrect: { type: StringConstructor; }; autocapitalize: { type: StringConstructor; }; autocomplete: { type: StringConstructor; reflect: boolean; }; placeholder: { type: StringConstructor; }; activeLabel: { type: BooleanConstructor; reflect: boolean; }; max: { type: StringConstructor; }; min: { type: StringConstructor; }; maxLength: { type: NumberConstructor; }; minLength: { type: NumberConstructor; }; /** * @ignore */ showPassword: { state: boolean; }; validateOnInput: { type: BooleanConstructor; }; readonly: { type: BooleanConstructor; }; ready: { type: BooleanConstructor; }; error: { type: StringConstructor; reflect: boolean; }; errorMessage: { type: StringConstructor; }; isValid: { type: StringConstructor; reflect: boolean; }; validity: { type: StringConstructor; reflect: boolean; }; setCustomValidity: { type: StringConstructor; }; setCustomValidityCustomError: { type: StringConstructor; }; setCustomValidityValueMissing: { type: StringConstructor; }; setCustomValidityBadInput: { type: StringConstructor; }; setCustomValidityTooShort: { type: StringConstructor; }; setCustomValidityTooLong: { type: StringConstructor; }; setCustomValidityRangeOverflow: { type: StringConstructor; }; setCustomValidityRangeUnderflow: { type: StringConstructor; }; customValidityTypeEmail: { type: StringConstructor; }; }; static get styles(): import("lit").CSSResult[]; isValid: boolean; icon: boolean; disabled: boolean; required: boolean; noValidate: boolean; max: any; min: any; maxLength: any; minLength: any; label: string; ready: boolean; activeLabel: boolean; setCustomValidityForType: string; /** * Internal Defaults. * @private * @returns {void} */ private privateDefaults; validation: any; inputIconName: any; showPassword: any; validationCCLength: number; hasValue: boolean; allowedInputTypes: string[]; dateInputTypes: string[]; autoFormattingTypes: string[]; /** * Credit Card is not included as this caused cursor placement issues. * The Safari issue. */ setSelectionInputTypes: string[]; uniqueId: string; firstUpdated(): void; inputElement: HTMLInputElement; labelElement: HTMLLabelElement; ValidityMessageOverride: any; cursorPosition: number; /** * LitElement lifecycle method. Called after the DOM has been updated. * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. * @returns {void} */ updated(changedProperties: Map): void; autocorrect: any; /** * @private * @returns {void} Handles cursor position when input auto-formats. */ private autoFormatHandling; /** * @private * @returns {void} Notify validity state changed via event. */ private notifyValidityChange; /** * @private * @returns {void} Marks the component as ready and sends event. */ private notifyReady; /** * @private * @returns {string} */ private definePattern; /** * Function to set element focus. * @private * @return {void} */ private focus; /** * Required to convert SVG icons from data to HTML string. * @private * @param {string} icon HTML string for requested icon. * @returns {object} Appended HTML for SVG. */ private getIconAsHtml; /** * Sends event notifying that the input has changed it's value. * @private * @returns {void} */ private notifyValueChanged; /** * Handles event of clearing input content by clicking the X icon. * @private * @return {void} */ private handleClickClear; value: string; /** * @private * @return {void} */ private handleInput; /** * Function to support @focusin event. * @private * @return {void} */ private handleFocusin; /** * Function to support @blur event. * @private * @return {void} */ private handleBlur; /** * Returns focused element, even if it's in the shadow DOM. * @private * @param {Object} root - Element to check for focus. * @returns {Object} */ private getActiveElement; /** * Public method force validation of input. * @returns {void} */ validate(): void; /** * Sets configuration data used elsewhere based on the `type` attribute. * @private * @returns {void} */ private configureDataForType; dateStrLength: number; /** * Validates against list of supported this.allowedInputTypes; return type=text if invalid request. * @private * @param {string} type Value entered into component prop. * @returns {string} Iterates over allowed types array. */ private getInputType; /** * Determines default help text string. * @private * @param {string} type Value entered into component prop. * @returns {string} Evaluates pre-determined help text. */ private getHelpText; helpText: string; /** * Function to support show-password feature. * @private * @returns {void} */ private handleClickShowPassword; /** * Support placeholder text. * @private * @returns {string} */ private getPlaceholder; /** * Defines placement of input icon based on type, used with classMap. * @private * @returns {boolean} */ private defineInputIcon; /** * Defines padding of input label based on type, used with classMap. * @private * @returns {boolean} */ private defineLabelPadding; /** * Function to support credit-card feature type. * @private * @returns {void} */ private processCreditCard; setCustomValidity: any; /** * Function to support credit-card feature type. * @private * @returns {object} JSON with data for credit card formatting. */ private matchInputValueToCreditCard; } import { LitElement } from "lit"; //# sourceMappingURL=base-input.d.ts.map