import * as i0 from '@angular/core';
import { EventEmitter, AfterContentInit, QueryList, OnInit, OnDestroy, AfterViewInit, Injector } from '@angular/core';
import { TFormFieldSize, FormFieldControlBaseComponent, FormFieldControl } from '@talenra/ngx-base/form-field';
import { ControlValueAccessor } from '@angular/forms';
import { ScrollStrategy } from '@angular/cdk/overlay';

/**
 * `<talenra-chip>` is used to display a chip with a label and a close button in a multiselect.
 * The close button emits an event when clicked.
 *
 * The label is displayed in the chip and the value is emitted when the close button is clicked.
 *
 * @internal
 */
declare class ChipComponent {
    value: string;
    label: string;
    disabled: boolean;
    size: i0.InputSignal<TFormFieldSize>;
    closeClicked: EventEmitter<string>;
    protected closeClick($event: MouseEvent): void;
    private get hostClass();
    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "talenra-chip", never, { "value": { "alias": "value"; "required": true; }; "label": { "alias": "label"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "closeClicked": "closeClicked"; }, never, never, true, never>;
}

/** @internal */
interface OptionDimensions {
    offsetHeight: number;
    offsetTop: number;
}
/**
 * Option represents a single option in the context of a Select. Each Option has a value property that can be used to
 * set the value that will be selected if the user chooses this option. The content of the Option is displayed in the
 * Select's dropdown list.
 *
 * #### Reactive form
 *
 * ```typescript
 * // Component class
 * sampleForm: FormGroup = new FormGroup({
 *   size: new FormControl('m'),
 * });
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <form [formGroup]="sampleForm">
 *   <talenra-form-field label="Size">
 *     <talenra-select formControlName="size">
 *       <talenra-option value="s">S</talenra-option>
 *       <talenra-option value="m">M</talenra-option>
 *       <talenra-option value="l">L</talenra-option>
 *     </talenra-select>
 *   </talenra-form-field>
 * </form>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { SelectModule } from '@talenra/ngx-base/select';
 * ```
 *
 * <example-url>../../#/select</example-url>
 *
 * @see {@link FormFieldComponent}
 * @see {@link SelectComponent}
 */
declare class OptionComponent implements AfterContentInit {
    /**
     * The option's value. Might differ from the label shown to the user.
     */
    value: any;
    /**
     * The icon to be displayed beside the label.
     *
     * See `@talenra/icons` for a list of available icons.
     */
    icon?: string;
    /**
     * Label displayed to the user
     *
     * @internal
     */
    label: string;
    /**
     * The option's index in the containing `SelectComponent`'s options array.
     *
     * @internal
     */
    index?: number;
    /**
     * Determines whether the option is shown in the UI. Used to hide options when they do not match filter.
     *
     * @internal
     */
    get isHidden(): boolean;
    /** @internal */
    set isHidden(value: boolean);
    private _isHidden;
    /** @internal */
    get isSelected(): boolean;
    /** @internal */
    set isSelected(value: boolean);
    private _isSelected;
    /** @internal */
    get isSelectedForMultiselect(): boolean;
    /** @internal */
    set isSelectedForMultiselect(value: boolean);
    private _isSelectedForMultiselect;
    /** @internal */
    get hasFocus(): boolean;
    /** @internal */
    set hasFocus(value: boolean);
    private _hasFocus;
    private elementRef;
    private changeDetector;
    private select;
    /** @internal */
    ngAfterContentInit(): void;
    /**
     * Returns the height and the vertical offset relative to the options list.
     *
     * @internal
     */
    get dimensions(): OptionDimensions;
    private selectOption;
    private handleMouseEvent;
    private get hostClass();
    static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "talenra-option", never, { "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "isHidden": { "alias": "isHidden"; "required": false; }; }, {}, never, ["*"], true, never>;
}

/**
 * OptionGroup is a container for single options in the context of a Select.
 *
 * #### Reactive form
 *
 * ```typescript
 * // Component class
 * sampleForm: FormGroup = new FormGroup({
 *   animalia: new FormControl(),
 * });
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <form [formGroup]="sampleForm">
 *   <talenra-form-field label="Size">
 *     <talenra-select formControlName="animalia">
 *       <talenra-option-group label="Insects">
 *         <talenra-option value="ant">Ant</talenra-option>
 *         <talenra-option value="bee">Bee</talenra-option>
 *       </talenra-option-group>
 *       <talenra-option-group label="Mammals">
 *         <talenra-option value="cat">Cat</talenra-option>
 *         <talenra-option value="cow">Cow</talenra-option>
 *         <talenra-option value="dog">Dog</talenra-option>
 *       </talenra-option-group>
 *     </talenra-select>
 *   </talenra-form-field>
 * </form>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { SelectModule } from '@talenra/ngx-base/select';
 * ```
 *
 * <example-url>../../#/select</example-url>
 *
 * @see {@link FormFieldComponent}
 * @see {@link SelectComponent}
 */
declare class OptionGroupComponent {
    /** Label to be displayed for the option group */
    label: string;
    /**
     * Determines whether the option is shown in the UI. Used to hide options when they do not match filter.
     *
     * @internal
     */
    get isHidden(): boolean;
    /** @internal */
    set isHidden(value: boolean);
    private _isHidden;
    /**
     * The options associated with this option group
     *
     * @internal
     */
    options?: QueryList<OptionComponent>;
    private select;
    private changeDetector;
    private get hostClass();
    static ɵfac: i0.ɵɵFactoryDeclaration<OptionGroupComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<OptionGroupComponent, "talenra-option-group", never, { "label": { "alias": "label"; "required": false; }; "isHidden": { "alias": "isHidden"; "required": false; }; }, {}, ["options"], ["*"], true, never>;
}

/**
 * Values accepted by the `Select`'s `kind` property.
 *
 * ```html
 * <talenra-select kind="ghost">
 * <!-- ... -->
 * </talenra-select>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { SelectKind } from '@talenra/ngx-base/select';
 * ```
 *
 * @see {@link SelectComponent}
 */
declare const SelectKind: {
    readonly Ghost: "ghost";
    readonly Primary: "primary";
};
/**
 * Type of values accepted by the `SelectComponent`'s `kind` property.
 *
 * ### Import
 *
 * ```typescript
 * import { TSelectKind } from '@talenra/ngx-base/select';
 * ```
 *
 * @see {@link SelectComponent}
 */
type TSelectKind = (typeof SelectKind)[keyof typeof SelectKind];
/**
 * Event emitted when the user has changed the select's value.
 *
 * ### Import
 *
 * ```typescript
 * import { SelectChange } from '@talenra/ngx-base/select';
 * ```
 *
 * @see {@link SelectComponent}
 */
interface SelectChange {
    /** Reference to the emitting select component */
    source: SelectComponent;
    /** Current value of the emitting select component */
    value: any;
}

/** @internal */
interface Option {
    value: string;
    label: string;
}
/**
 * Select is a form control for selecting a value from a set of options, similar to the native `<select>` element. It is
 * typically used in a form context (in combination with FormField). Kind "ghost" offers an alternative appearance and
 * slightly different behavior which is typically applied when Select is used outside a classic form context, e.g. in a
 * toolbar.
 *
 * Use Option as children of Select to add options. Each Option has a value property that can be used to set the value
 * that will be selected if the user chooses this option. The content of the Option is displayed in the option list.
 *
 * Select supports selection of multiple options. Use the `allowMultiple` input property to activate this optional
 * feature.
 *
 * #### Reactive form
 *
 * ```typescript
 * // Component class
 * sampleForm: FormGroup = new FormGroup({
 *   size: new FormControl('m'),
 * });
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <form [formGroup]="sampleForm">
 *   <talenra-form-field label="Size">
 *     <talenra-select formControlName="size">
 *       <talenra-option value="s">S</talenra-option>
 *       <talenra-option value="m">M</talenra-option>
 *       <talenra-option value="l">L</talenra-option>
 *     </talenra-select>
 *   </talenra-form-field>
 * </form>
 * ```
 *
 * #### Reactive form (Multiselect with multiple items)
 *
 * ```typescript
 * // Component class
 * sampleForm: FormGroup = new FormGroup({
 *   sizes: new FormControl(['S', 'M']),
 * });
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <form [formGroup]="sampleForm">
 *   <talenra-form-field label="Size">
 *     <talenra-select allowMultiple="true" formControlName="size">
 *       <talenra-option value="s">S</talenra-option>
 *       <talenra-option value="m">M</talenra-option>
 *       <talenra-option value="l">L</talenra-option>
 *       <talenra-option value="xl">XL</talenra-option>
 *     </talenra-select>
 *   </talenra-form-field>
 * </form>
 * ```
 *
 * #### Template driven form
 *
 * ```typescript
 * // Import `FormsModule` in the declaring module
 * import { FormsModule } from '@angular/forms';
 * @NgModule({
 *  // ...
 *  imports: [FormsModule],
 *})
 * ```
 *
 * ```typescript
 * // Component class
 * size = 'm';
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <form #templateDrivenForm="ngForm">
 *   <talenra-form-field label="Size">
 *     <talenra-select name="size" [(ngModel)]="size">
 *       <talenra-option value="s">S</talenra-option>
 *       <talenra-option value="m">M</talenra-option>
 *       <talenra-option value="l">L</talenra-option>
 *     </talenra-select>
 *   </talenra-form-field>
 * </form>
 * ```
 *
 * #### Formless
 *
 * ```typescript
 * // Component class
 * size = 'm';
 * ```
 *
 * ```html
 * <!-- Component template -->
 * <talenra-form-field label="Size">
 *   <talenra-select [(ngModel)]="size">
 *     <talenra-option value="s">S</talenra-option>
 *     <talenra-option value="m">M</talenra-option>
 *     <talenra-option value="l">L</talenra-option>
 *   </talenra-select>
 * </talenra-form-field>
 * ```
 *
 * ### Import
 *
 * ```typescript
 * import { SelectModule } from '@talenra/ngx-base/select';
 * ```
 *
 * <example-url>../../#/select</example-url>
 *
 * @see {@link FormFieldComponent}
 * @see {@link OptionComponent}
 */
declare class SelectComponent extends FormFieldControlBaseComponent implements OnInit, OnDestroy, AfterViewInit, AfterContentInit, ControlValueAccessor, FormFieldControl<SelectComponent> {
    /**
     * Shows a input field to filter options if `true` and option list contains at least two items.
     */
    useFilter: boolean;
    /**
     * Allow to select multiple values.
     */
    allowMultiple: boolean;
    /**
     * Message displayed to the user if Select contains no Options (e.g. while loading, due to backend issues etc.).
     *
     * ```html
     * <talenra-form-field label="Animal">
     *   <talenra-select formControlName="animal" noOptionsMessage="No options available.">
     *   </talenra-select>
     * </talenra-form-field>
     * ```
     */
    noOptionsMessage: i0.InputSignal<string>;
    /**
     * Message displayed to the user if the filter query does not match any option.
     *
     * ```html
     * <talenra-form-field label="Animal">
     *   <talenra-select formControlName="animal" useFilter noMatchMessage="No option matches your query.">
     *     <talenra-option value="alpaca">Alpaca</talenra-option>
     *     <talenra-option value="donkey">Donkey</talenra-option>
     *     <!-- a bunch of options -->
     *   </talenra-select>
     * </talenra-form-field>
     * ```
     */
    noMatchMessage: string;
    /** Determines whether the control is disabled/enabled. */
    get disabled(): boolean;
    /** Set the control's disabled state */
    set disabled(value: boolean);
    /** The control's current value. */
    get value(): any;
    /** Set the control's current value. */
    set value(value: any);
    /** @internal */
    setValue(value: any): void;
    /**
     * Determines whether the control is read-only.
     *
     * ```html
     * <talenra-form-field label="Role">
     *  <talenra-select readonly formControlName="role">
     *    <talenra-option value="reader">Reader</talenra-option>
     *    <talenra-option value="editor">Editor</talenra-option>
     *  </talenra-select>
     * </talenra-form-field>
     * ```
     */
    get readonly(): boolean;
    /** Set the control's read-only state */
    set readonly(value: boolean);
    /** @internal */
    _readonly: boolean;
    /**
     * Determines the Select's style. Kind "ghost" is typically used when Select is used outside a classic form context,
     * e.g. in a toolbar.
     *
     * ```html
     * <talenra-select formControlName="role" kind="ghost">
     *   <talenra-option value="reader">Reader</talenra-option>
     *   <talenra-option value="editor">Editor</talenra-option>
     * </talenra-select>
     * ```
     */
    kind: i0.InputSignal<TSelectKind>;
    /**
     * Placeholder displayed if Select's value is not set. Has no effect if Select's `kind` is not "ghost".
     *
     * ```typescript
     * // Component class
     * role: FormControl = new FormControl();
     * ```
     *
     * ```html
     * <!-- Component template -->
     * <talenra-select formControlName="role" kind="ghost" placeholder="Choose user role…">
     *   <talenra-option value="reader">Reader</talenra-option>
     *   <talenra-option value="editor">Editor</talenra-option>
     * </talenra-select>
     * ```
     */
    placeholder: i0.InputSignal<string>;
    /**
     * Emitted when the selected value has been changed by the user.
     * Emitted (with [] or null) when the clear button (×) is clicked.
     * Emitted when the clear button (×) in a Chips component is clicked.
     *
     *
     * ```typescript
     * // Component class
     * import { SelectChange } from '@talenra/ngx-base/select';
     * public selectionChange(change: SelectChange): void {
     *   console.log(`Select (id: ${change.source.id}) has value ${change.value}`);
     * }
     * ```
     *
     * ```html
     * <!-- Component template -->
     * <talenra-form-field label="Size" (selectionChange)="selectionChange($event)">
     *   <talenra-select [(ngModel)]="formless.size">
     *     <talenra-option value="s">S</talenra-option>
     *     <talenra-option value="m">M</talenra-option>
     *     <talenra-option value="l">L</talenra-option>
     *   </talenra-select>
     * </talenra-form-field>
     * ```
     *
     * @see {@link SelectChange}
     */
    selectionChange: EventEmitter<SelectChange>;
    /**
     * @internal
     */
    selectedOptions: Option[];
    /**
     * Controls whether the control is focusable.
     */
    private updateTabindex;
    /**
     * Label displayed to the user. Derived from the currently selected option.
     */
    label: string;
    /** @internal */
    get isEmpty(): boolean;
    /**
     * The options associated with this select
     *
     * @internal
     */
    protected options?: QueryList<OptionComponent>;
    /**
     * The OptionGroups associated with this select
     *
     * @internal
     */
    private optionGroups?;
    /**
     * Options matched by the current filter query. Array holding indexes for matching options from `options` property.
     *
     * @internal
     */
    matches: number[];
    /**
     * The options list component
     *
     * @internal
     */
    private optionsList?;
    private destroyRef;
    /**
     * Index of the focussed option. Can be triggered by pointer/mouse or keyboard and needs to
     * be synced.
     *
     * @internal
     */
    set focussedOptionIndex(index: number | undefined);
    /** @internal */
    get focussedOptionIndex(): number | undefined;
    private _focussedOptionIndex?;
    /**
     * Determines whether the option list is displayed.
     */
    set showPanel(value: boolean);
    /** @internal */
    get showPanel(): boolean;
    private _showPanel;
    /**
     * State of the option list panel (attached or detached).
     * The value is derived from the overlay.
     */
    private panelAttached;
    /**
     * References for resize observers so we can disconnect when the component is destroyed.
     */
    private resizeObservers;
    /**
     * Width of the control in px. Used to set the overlay panel width.
     *
     * @internal
     */
    width: number;
    /**
     * Scroll strategy for the overlay panel.
     */
    private overlay;
    protected scrollStrategy: ScrollStrategy;
    protected injector: Injector;
    private elementRef;
    /** @internal */
    ngOnInit(): void;
    /** @internal */
    ngOnDestroy(): void;
    /** @internal */
    ngAfterViewInit(): void;
    /** @internal */
    ngAfterContentInit(): void;
    private focusChanged;
    private handleClick;
    /** @internal */
    attached(): void;
    /** @internal */
    detached(): void;
    /** @internal */
    closePanel(): void;
    /**
     * Triggered when the user changes the value (typically by picking an option).
     * Emits the selectionChange event and updates the value.
     *
     * @internal
     */
    changeSelection(value: any): void;
    /**
     * Handling keyboard events
     */
    private handleKeydown;
    /**
     * Focusses the select
     *
     * @internal
     */
    focus(): void;
    /**
     * Focus the option list's filter
     */
    private focusFilter;
    /**
     * Clear the value and focus the input element. Triggered by the clear button in FormField.
     *
     * @internal
     */
    clearValue(): void;
    /**
     * Updates the options visibility whenever the filter query changes.
     *
     * @internal
     */
    filterOptions(query: string): void;
    /**
     * Public handle to close the panel.
     *
     * @internal
     */
    hidePanel(): void;
    /**
     * Scroll the given option into view.
     */
    private scrollToOption;
    private get hostClass();
    /**
     * Helper: Get option by index
     */
    private optionByIndex;
    /**
     * Helper: Get option by value. Returns the first option matching a given value.
     */
    private optionByValue;
    /**
     * Removes a single option from a multi-select value. Triggered when the clear button (×) in a Chips component is
     * clicked.
     */
    protected removeOption(value: string): void;
    private calculateNewValue;
    private handleValueSelected;
    private handleValueRemoved;
    private setSelectedOptions;
    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "talenra-select", never, { "useFilter": { "alias": "useFilter"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; "noOptionsMessage": { "alias": "noOptionsMessage"; "required": false; "isSignal": true; }; "noMatchMessage": { "alias": "noMatchMessage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["options", "optionGroups"], ["*"], true, never>;
    static ngAcceptInputType_useFilter: unknown;
    static ngAcceptInputType_allowMultiple: unknown;
    static ngAcceptInputType_disabled: unknown;
    static ngAcceptInputType_readonly: unknown;
}

export { ChipComponent, OptionComponent, OptionGroupComponent, SelectComponent, SelectKind };
export type { OptionDimensions, SelectChange, TSelectKind };