import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import { OptionInterface } from '../option/option-interface';
import { InputChangeEventDetail } from '../input/input-interface';
import { SelectChangeEventDetail } from './select-interface';
import type { ControlValidityEventDetail, ControlValidity } from '../../types/shared';
import type { Dropdown as DropdownInterface } from '../dropdown/dropdown';
/**
 * Selects allow users to choose items from a menu of options.
 *
 * @status stable
 * @version 1.0.0
 *
 * @slot start - suitable for inline action buttons or icons that may add extra contextual information
 * @slot end - suitable for inline action buttons or icons that may add extra contextual information
 * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist
 * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secondary 'value' for context or to show a dropdown arrow if using a datalist
 * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
 * @slot helper - helper text to accompany the form field underneath.
 * @slot helper-end - helper text to accompany the form field on the side.
 * @slot down-arrow - use this to replace the default down arrow
 * @slot - default slot; nest `nano-option` elements
 */
export declare class Select implements ComponentInterface {
    private nativeSelect?;
    private valueItems;
    private dragVal;
    private mo?;
    private selectId;
    private rtl;
    private onInit;
    private customError;
    private get inputCtrl();
    private set inputCtrl(value);
    private _inputCtrl?;
    private _selectWrap;
    private get selectWrap();
    private set selectWrap(value);
    private _datalist;
    private get datalist();
    private set datalist(value);
    currInsertIndex: number;
    showErrorMsg: boolean;
    errorMessage: string;
    hasFocus: boolean;
    hasOpened: boolean;
    hasLabelSlot: boolean;
    hasHelperSlot: boolean;
    hasHelperEndSlot: boolean;
    inputSearchVal: string;
    el: HTMLNanoSelectElement;
    /**
     * This will be true when the control is in an invalid state.
     * Validity is determined by the `required` prop. Or if custom validity message is set.
     */
    get invalid(): any;
    _invalid: any;
    /**
     * Current validation message - if any. @readonly
     */
    get validityMessage(): string;
    /**
     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
     */
    autofocus: boolean;
    /**
     * If `true`, the user cannot interact with the select.
     */
    disabled: boolean;
    /**
     * When should the field perform validation
     * @default 'submitThenDirty'
     */
    validateOn?: 'dirty' | 'submit' | 'submitThenDirty';
    /**
     * Whether to show validation errors underneath input
     */
    showInlineError: boolean;
    private _label;
    /**
     * String to place within a label element. Alternatively you may use a label slot.
     */
    get label(): string;
    set label(value: string);
    /**
     * Visually hide the label - but make it accessible.
     */
    hideLabel?: boolean;
    /**
     * Enable floating label behaviour. Will disable placeholder if set.
     */
    floatLabel: boolean;
    /**
     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
     */
    multiple?: boolean;
    /** When `multiple="true"`, control how many values to show within the control at once.
     * After the maximum, "+n" will be shown to indicate the number of additional items that are selected. */
    maxValuesVisible?: boolean | number;
    private _maxValuesVisible;
    watchMaxValuesVisible(): void;
    /**
     * The name of the control, which is submitted with the form data.
     */
    name: string;
    /**
     * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set.
     * If you don't want this behaviour just set the first option to have no value.
     */
    placeholder?: string | null;
    /**
     * If `true`, the user cannot modify the value.
     */
    readonly: boolean;
    /**
     * If `true`, the user must fill in a value before submitting a form.
     * By default, setting this will also add an asterisk to the label.
     * You can disable this by using the `label` slot instead.
     */
    required: boolean;
    /**
     * The initial size of the control.
     */
    size?: number;
    /**
     * Maximum number of options that can be selected when multiple is true
     */
    max?: number;
    /**
     * Minimum number of options that can be selected when multiple is true
     */
    min?: number;
    /**
     * The form element to associate the select with (its form owner). Must be the id of a form.
     */
    form?: string | null;
    /**
     * in multiple mode, allow users to enter their own values
     */
    allowCustomValues: boolean;
    /**
     * The value of the select.
     */
    get value(): string | string[];
    set value(val: string | string[]);
    private _value;
    /**
     * Update the native select element when the value changes
     */
    valueChanged(): void;
    /**
     * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
     * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
     * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
     * Regardless - reading `options` will return the current component options - slotted or otherwise
     */
    get options(): Array<OptionInterface | string>;
    set options(opts: Array<OptionInterface | string>);
    private _options;
    _elementOptions: OptionInterface[];
    /**
     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
     */
    clearable: boolean;
    /**
     * Hide the native select element and cover with a value 'mask'.
     * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
     */
    mask: boolean;
    /**
     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
     */
    debounce: number;
    protected debounceChanged(): void;
    protected shouldValidate(): void;
    /** nano-dropdown config options you can pass to the nested dropdown component */
    dropDownConfig?: Partial<DropdownInterface>;
    setDataListOpts(): void;
    /**
     * A function that customizes the tag value to be rendered when `multiple="true"`.
     * @param option - the incoming option that was selected
     * @param index - the incoming option index
     * @returns Should return either a string / templateResult or a string containing trusted HTML or an HTMLElement
     */
    valueTagTemplate: (option: OptionInterface, index: number) => string;
    /**
     * Emitted when the value has changed.
     */
    nanoChange: EventEmitter<SelectChangeEventDetail>;
    /**
     * Emitted when the select loses focus.
     */
    nanoBlur: EventEmitter<void>;
    /**
     * Emitted when the select has focus.
     */
    nanoFocus: EventEmitter<void>;
    /**
     * Emitted when the select has been created.
     * @internal
     */
    nanoDidLoad: EventEmitter<void>;
    /**
     * Emitted when the select has been removed.
     * @internal
     */
    nanoDidUnload: EventEmitter<void>;
    /**
     * Emitted when a keyboard input occurred on a multiple="true" input
     */
    nanoSearchChange: EventEmitter<InputChangeEventDetail>;
    /**
     * Called when validation is performed (which depends on `validateOn`).
     * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.
     */
    nanoValidate: EventEmitter<ControlValidityEventDetail>;
    /**
     * Get the current state of the control.
     * @param validateFirst - perform validation first before reporting
     * @returns `{ isValid: boolean, errorMessage: string }`
     */
    reportValidity(validateFirst: boolean): Promise<ControlValidity>;
    /**
     * Sets focus on the specified `nano-select`. Use this method instead of the global
     * `select.focus()`.
     */
    setFocus(): Promise<void>;
    /**
     * @returns the native `<select>` element used under the hood.
     */
    getSelectElement(): Promise<HTMLSelectElement>;
    /**
     * Invalidate the field and show a custom error message.
     * To clear the error you will need to re-call this method with an empty string.
     */
    showError(message: string): Promise<void>;
    private get valArray();
    private isValidValues;
    private customValidate;
    private showInlineValidation;
    private handleInvalid;
    private setValue;
    private removeValue;
    private slotChangeObserver;
    private processSlottedContent;
    private getOptionWithValue;
    private getLabel;
    onReset(e: any): void;
    handleBlur(): void;
    private setOptions;
    private handleDocumentKeyDown;
    private onBlur;
    private onFocus;
    private clearSelectValue;
    private onClick;
    private onDragStart;
    private onDragEnd;
    private onDragLeave;
    private onMultiInput;
    connectedCallback(): void;
    disconnectedCallback(): void;
    componentDidLoad(): void;
    componentWillLoad(): void;
    render(): any;
    private multipleValues;
}
