/** * The `auro-input` element provides users a way to enter data into a text field. * @customElement auro-input * * @slot ariaLabel.clear - Sets aria-label on clear button for screen reader to read * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password * @slot helpText - Sets the help text displayed below the input. * @slot label - Sets the label text for the input. * @slot optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label. * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused. * @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 input - Use for customizing the style of the input 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) * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin) * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin) * @csspart displayValue - Use for customizing the style of the displayValue element * @csspart inputHelpText - Use for customizing the style of the input help text wrapper */ export class AuroInput extends BaseInput { static get styles(): import("lit").CSSResult[]; /** * This will register this element with the browser. * @param {string} [name="auro-input"] - The name of the element that you want to register. * * @example * AuroInput.register("custom-input") // this will register this element to * */ static register(name?: string): void; /** * @private */ private buttonTag; /** * @private */ private hasDisplayValueContent; /** * @private */ private helpTextTag; /** * @private */ private iconTag; /** * Determines if the HTML input element should be visually hidden. * Returns true when display value content exists without focus and has a value, * or when the input has no value, is not focused, and has no placeholder text. * @returns {boolean} - True if the input should be visually hidden, false otherwise. * @private */ private get inputHidden(); /** * Determines if the input should display in a state with no focus or value indication. * Returns true when the input has display content without focus and has a value, * or when the input has no value and is not focused. * @returns {boolean} - True if the input should show no focus or value state, false otherwise. * @private */ private get noFocusOrValue(); /** * Whether the label is being hidden currently based on state. * @returns {boolean} - Returns true if the label is hidden. * @private */ private get labelHidden(); /** * Returns the label font class based on layout and visibility state. * @private * @returns {string} - The font class for the label. */ private get labelFontClass(); /** * Returns the input font class based on layout and visibility state. * @private * @returns {string} - The font class for the input. */ private get inputFontClass(); /** * Returns classmap configuration for html5 input labels in all layouts. * @private * @returns {Record} */ private get commonLabelClasses(); /** * Returns classmap configuration for html5 inputs in all layouts. * @private * @returns {Record} - Returns classmap. */ private get commonInputClasses(); /** * Common display value wrapper classes. * @private * @returns {Record} */ private get commonDisplayValueWrapperClasses(); /** * Returns classmap configuration for html5 inputs in each layout. * @private * @returns {object} - Returns classmap. */ private get legacyInputClasses(); /** * Returns classmap configuration for wrapper elements in each layout. * @private * @returns {object} - Returns classmap. */ private get commonWrapperClasses(); /** * Returns classmap configuration for helpText elements in each layout. * @private * @returns {object} - Returns classmap. */ private get helpTextClasses(); /** * Function to determine if the input is meant to render an icon visualizing the input type. * @private * @returns {boolean} - Returns true if the input type is meant to render an icon. */ private hasTypeIcon; /** * Function to determine if there is any displayValue content to render. * @private * @returns {void} */ private checkDisplayValueSlotChange; /** * Returns HTML for the validation error icon. * @private * @returns {html} - Returns HTML for the validation error icon. */ private renderValidationErrorIconHtml; /** * Returns HTML for the HTML5 input element. * @private * @param {boolean} [useLegacyHiddenState=false] - If true, the input will be visually hidden when not focused and has no value. * @returns {html} - Returns HTML for the HTML5 input element. */ private renderHtmlInput; /** * Returns HTML for the clear action button. * @private * @returns {html} - Returns HTML for the clear action button. */ private renderHtmlActionClear; /** * Returns HTML for the show password button. * @private * @returns {html} - Returns HTML for the show password button. */ private renderHtmlNotificationPassword; /** * Returns HTML for the input type icon. * @private * @returns {html} - Returns HTML for the input type icon. */ private renderHtmlTypeIcon; /** * Returns HTML for the help text and error message. * @private * @returns {html} - Returns HTML for the help text and error message. */ private renderHtmlHelpText; /** * Returns HTML for the classic layout. * @private * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout. */ private renderLayoutClassic; /** * Returns HTML for the emphasized layout. Does not support type="*". * @private * @returns {html} - Returns HTML for the emphasized layout. */ private renderLayoutEmphasized; /** * Returns HTML for the emphasized layout. Does not support type="*". * @private * @returns {html} - Returns HTML for the emphasized layout. */ private renderLayoutSnowflake; /** * Logic to determine the layout of the component. * @private * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use. * @returns {void} */ private renderLayout; } import BaseInput from './base-input.js';