/**
* 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';