import { Cre8FormElement } from '../cre8-form-element';
import '../field-note/field-note';
/**
 * The Field component renders a form group with label, control, help text and validation styling. There are
 * convenience variants of Field to support HTML5 input types and static content.
 */
export declare class Cre8Field extends Cre8FormElement {
    static styles: import("lit").CSSResult[];
    /**
     * Autocomplete attribute that allows input to expect certain types of information. Note: autocomplete is supported
     * by most browsers, but the suggested 'completions' are also sourced from those browsers. Values come
     * from past user stored data from past interactions in that browser, such as:
     *
     *  1. From past values entered by the user, but they may also come from pre-configured values. For
     *  instance, a browser might let the user save their name, address, phone number, and email addresses for
     *  autocomplete purposes.
     *
     *  2. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion
     *  following a an authentication procedure.
     *  See: [MDN web docs_](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
     *
     *  NOTE:: In order to provide autocompletion, user-agents might require input, select, textarea
     *  elements to:
     *
     *  1. Have a {{name}} and/or {{id}} attribute
     *  2. Be descendants of a form element
     *  3. The form to have a [submit button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)
     *
     * @attr {string}
     */
    autocomplete?: 'on' | 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'url' | 'address-line1' | 'address-line2' | 'country' | 'postal-code';
    /**
     * Pattern attribute defines a regular expression to validate against input
     *
     * @attr {string}
     */
    pattern?: string;
    /**
     * Type variants
     * - **text** renders a standard text input
     * - **email** renders a text input for an email format
     * - **number** renders an input for number values only
     * - **url** renders an input for urls only
     * - **tel** renders an input for telephone number values only
     *
     * @attr {string}
     */
    type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date';
    /**
     * The placeholder text that appears inside the input
     *
     * @attr {string}
     */
    placeholder?: string;
    /**
     * The required label that appears above the input
     *
     * @attr {string}
     */
    label: string;
    /**
     * The name property on the input
     *
     * @attr {string}
     */
    /**
     * The unique id of the field
     * <br/><br/> _*This property is dynamically set_
     *
     * @attr {string}
     */
    fieldId?: string;
    /**
     * The text that displays below in text field input
     *
     * @attr {string}
     */
    fieldNote?: string;
    /**
     * Controls how the voiceover will experience the new information when field note changes,
     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
     * pause in their navigation using `polite`.
     */
    ariaLive: 'polite' | 'assertive';
    /**
     * Used to connect the field note in text field to the text menu for accessibility
     *
     * @attr {string}
     */
    ariaDescribedBy?: string;
    /**
     * The required attribute on the input
     *
     * @attr {boolean}
     */
    required?: boolean;
    /**
     * The disabled attribute on the input
     *
     * @attr {boolean}
     */
    disabled?: boolean;
    /**
     * Changes the component's treatment to represent an error state
     *
     * @attr {boolean}
     */
    isError?: boolean;
    /**
     * Visually hidden text that always signifies that this is an error for screen reader usage
     *
     * @attr {string}
     */
    errorText: string;
    /**
     * The error field note that appears below the default field note
     *
     * @attr {string}
     */
    errorNote?: string;
    /**
     * The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.
     * @attr {string | number}
     */
    max?: string;
    /**
    * The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute.
    * @attr {string | number}
    */
    min?: string;
    /**
     * The maxlength is an integer above 0 that indicates the maximum allowed characters to be entered. When using the
     * maxlength prop, you must also use the "required" prop to provide Constraint Validation on the input field.
     * This allows users to know why the input they attempted didn't render in the input field. see
     * [MDN maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength#constraint_validation)
     *
     * @attr {string}
     */
    maxlength?: number;
    /**
     * Additional aria-describedby connection to id for additional success and error notes to be accessible
     *
     * @attr {string}
     */
    validationAriaDescribedBy?: string;
    /**
     * Changes the component's treatment to represent a success state
     *
     * @attr {boolean}
     */
    isSuccess?: boolean;
    /**
     * Visually hidden text that always signifies that this is successful for screen reader usage
     *
     * @attr {string}
     */
    successText: string;
    /**
     * Readonly attribute
     *
     * @attr {boolean}
     */
    readonly?: boolean;
    /**
     * The success field note that appears below the default field note
     *
     * @attr {string}
     */
    successNote?: string;
    field: HTMLInputElement;
    /**
     * First update lifecycle hook
     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
     */
    firstUpdated(): void;
    /**
     * Initialize aria attributes
     */
    initializeAria(): void;
    /**
     * Aria describedby string based on field notes and error/success notes
     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
     * render both in the input's `aria-describedby` attribute
     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
     */
    fieldNoteAria(): string;
    /**
     * Handle On Input
     * 1) Set the input's value equal to the event.target.value when the input is changed.
     * 2) Set the internal form value of the input to the updated value
     */
    private _handleOnInput;
    /**
     * Render the success or error field notes
     * 1. If there is a successNote, then return the field note with the success message and state.
     * 2. If there is a errorNote, then return the field note with the error message and state.
     */
    renderSuccessErrorFieldNote(): import("lit-html").TemplateResult<1>;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-field': Cre8Field;
    }
}
export default Cre8Field;
//# sourceMappingURL=field.d.ts.map