import '../icon/icon';
import '../field-note/field-note';
import { Cre8FormElement } from '../cre8-form-element';
/**
 * Checkbox Field Item is the combination of a checkbox input, label and field note.
 * Checkboxes can turn an option on or off.
 *
 * Checkboxes should be used when the user is allowed to select one, none or multiple options
 * OR to "opt-in" (ex. I would like to receive the newsletter by email)
 * or as a required acknowledgement(ex. I've read the Terms and Conditions).
 * If the user can only chose one option from many, use `radio-field-item`.
 *
 * ## How to Use
 *
 * - A checkbox is independent of all other checkboxes in the list,
 *   so checking one box should not uncheck the others in the group.
 * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.
 * - Avoid disabled and read-only states as much as possible.
 *
 * ## Universal Form Field Rules
 * - Unless indicated with the "(Optional)" label, all fields are assumed required.
 *   Minimize the number of optional fields to keep forms as short as possible.
 * - Always include a label written in sentence case.
 * - Avoid using the read-only and disabled states as much as possible.
 */
export declare class Cre8CheckboxFieldItem extends Cre8FormElement {
    readonly type = "checkbox";
    static styles: import("lit").CSSResult[];
    /**
     * The checkbox label
     */
    label?: string;
    /**
     * 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
     */
    errorNote?: 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
     */
    successText: string;
    /**
     * The success field note that appears below the default field note
     */
    successNote?: string;
    /**
     * Disabled State
     * @attr {boolean}
     */
    disabled?: boolean;
    /**
     * Checked State
     * @attr {boolean}
     */
    checked?: boolean;
    /**
     * Checkbox FieldId
     * @attr {string}
     */
    fieldId?: string;
    /**
     * Checkbox FieldNote
     */
    fieldNote?: string;
    /**
     * Checkbox fieldnote ariaDescribeBy
     * @attr {string}
     */
    ariaDescribedBy?: string;
    /**
     * Additional aria-describedby connection to id for additional success and error notes to be accessible
     */
    validationAriaDescribedBy?: string;
    /**
     * Required property
     * @attr {boolean}
     */
    required?: boolean;
    /**
     * Checkbox fieldnote icon name
     */
    fieldNoteIconName?: string;
    /**
     * Get the input element within the shadow root and set it to this.field
     */
    field: HTMLInputElement;
    protected defaultValue: boolean;
    /**
     * Connected callback lifecycle
     * 1) Set the fieldID to a random string if not provided so form is always accessible
     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property
     * or a random string to always make the form field accessible.
     * 3) Set the form internal data to set that to the default checked state.
     * 4) Set the default value of the checkbox field item to the checked property
    */
    connectedCallback(): void;
    /**
     * access role when check-box-field-item embedded in checkbox-field
     */
    private getRole;
    /**
     * Set form data
     * 1) If a checked property is provided, set the form value the checkbox value attribute.
     * Otherwise, don't provide a value for the checkbox data array
     */
    private setFormData;
    /**
     * Handle on checkbox change
     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.
     */
    private _clickHandler;
    /**
     * Handle On Change
     * 1. Set the value when the select is changed.
     * 2. Fire the custom event with the current value.
     */
    private _handleOnChange;
    /**
     * Form reset callback
     * 1) Set checked property to the default value and then set the input's checked attribute to that default value
     * 2) Set the input's checked attribute to that default value
     * 3) Set the element internals form data when the form is reset
     * 4) Change the new value to the old value on reset
     */
    formResetCallback(): void;
    /**
     * 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;
    /**
     * 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-checkbox-field-item': Cre8CheckboxFieldItem;
    }
}
export default Cre8CheckboxFieldItem;
//# sourceMappingURL=checkbox-field-item.d.ts.map