import '../field-note/field-note';
import Cre8FormElement from '../cre8-form-element.js';
export interface Cre8SelectOption {
    label: string;
    value: number | string;
}
export interface Cre8SelectOptionGroup {
    optGroupLabel: string;
    options: Cre8SelectOption[];
}
/**
 * The Select control is designed and built to be used for selecting between choices in a form.
 * It is not a Dropdown control which is generally used for displaying lists of choices
 * that act as links or actions, like filter options.
 *
 * Consider the use of a Select control carefully.
 * When you have less than 5 options for the user to choose from,
 * Radio or Checkbox inputs may be a better choice to display all of the options at once.
 * Users have to slow down to scan a list with more than 15 options,
 * so using an option group to give the options hierarchy may help users find their choice faster.
 * Alternately, a text input field might be a more appropriate control to use when there are too many options,
 * especially when used with typeahead/auto-complete.
 *
 * ## How to use
 * 1. The collapsed default state always shows a default placeholder value or a selected value.
 * 2. Sort list items in a logical order, such as grouping highly related options together,
 *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.
 * 3. A list that includes 6+ items should show a scrollbar.
 * 4. Users should be able to use a keystroke to quickly jump
 *    to selecting an option that begins with the entered letter.
 * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.
 * 6. Adhere to our common form field conventions and always include a Label,
 *    provide short and clear error messages in context, avoid using the Read-only
 *    and Disabled states as much as possible, and utilize the info/formatting tip
 *    or helpful link rather than placeholder text.
 *
 * @slot fieldNote - Container for optional field note content
 */
export declare class Cre8Select extends Cre8FormElement {
    readonly type = "select";
    static styles: import("lit").CSSResult[];
    /**
     * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:
     * - Cre8SelectOption
     *   - label: option label text - `string`
     *   - value: option value - `number | string`
     * - Cre8SelectOptionGroup
     *  - optGroupLabel: optgroup label text - `string`
     *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`
     */
    items: Array<Cre8SelectOption | Cre8SelectOptionGroup>;
    /**
     * The required label that appears above the select
     * @attr {string}
     */
    label: string;
    /**
    * The unique id of the select
    * @attr {string}
    */
    fieldId?: string;
    /**
     * Optional field note text can be added to provide additional field guidance.
     * @attr {string}
     */
    fieldNote?: string;
    /**
     * Used to connect the field note in text field to the text menu for accessibility
     * @attr {string}
     */
    ariaDescribedBy?: string;
    /**
     * Additional aria-describedby connection to id for additional success and error notes to be accessible
     * @attr {string}
     */
    validationAriaDescribedBy?: string;
    /**
     * The required attribute on the select
     * @attr {boolean}
     */
    required: boolean;
    /**
     * The disabled attribute on the select
     * @attr {boolean}
     */
    disabled: boolean;
    /**
     * Changes the component's treatment to represent an error state
     * @attr {boolean}
     */
    isError?: boolean;
    /**
     * The error field note that appears below the default field note
     * @attr {string}
     */
    errorNote?: string;
    /**
     * Changes the component's treatment to represent a success state
     * @attr {boolean}
     */
    isSuccess?: boolean;
    /**
     * The success field note that appears below the default field note
     * @attr {string}
     */
    successNote?: string;
    /**
     * Select input querySelector
     */
    /**
     * Get all select option elements
     */
    _selectOptions: HTMLOptionsCollection;
    /**
     * Selected item value
     */
    private selectedItem;
    /**
     * Initialize aria attributes
     */
    private _initializeAria;
    /**
     * 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)
     */
    private _fieldNoteAria;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * First updatedLifecycle
     * 1) Get the option in the items array with selected set to true. Set that as the selected item
     * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the
     * select the first item value like the native select.
     */
    firstUpdated(): void;
    /**
   * Set form data
   * 1) Set the element internals to the selected item value if it exists,
   *    otherwise the default selected item is the first one
   */
    private _setFormData;
    /**
     * Handle On Change
     * 1. Set the value when the select is changed.
     * 2. Fire the custom event with the current value.
     */
    private _handleOnChange;
    /**
     * Render the select options
     */
    private _renderSelectOptions;
    /**
     * 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.
     */
    private _renderSuccessErrorFieldNote;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-select': Cre8Select;
    }
}
//# sourceMappingURL=select.d.ts.map