import { AfterViewInit, ChangeDetectorRef, EventEmitter, Renderer2, OnDestroy, ElementRef } from '@angular/core';
import { Subject } from 'rxjs';
import { IgxButtonDirective } from '../directives/button/button.directive';
import { IBaseEventArgs } from '../core/utils';
import * as i0 from "@angular/core";
/**
 * Determines the Button Group alignment
 */
export declare const ButtonGroupAlignment: {
    horizontal: "horizontal";
    vertical: "vertical";
};
export type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];
/**
 * **Ignite UI for Angular Button Group** -
 * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)
 *
 * The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports
 * single, multi and singleRequired selection.
 *
 * Example:
 * ```html
 * <igx-buttongroup selectionMode="multi" [values]="fontOptions">
 * </igx-buttongroup>
 * ```
 * The `fontOptions` value shown above is defined as:
 * ```typescript
 * this.fontOptions = [
 *   { icon: 'format_bold', selected: false },
 *   { icon: 'format_italic', selected: false },
 *   { icon: 'format_underlined', selected: false }];
 * ```
 */
export declare class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
    private _cdr;
    private _renderer;
    private _el;
    /**
     * A collection containing all buttons inside the button group.
     */
    get buttons(): IgxButtonDirective[];
    /**
     * Gets/Sets the value of the `id` attribute. If not set it will be automatically generated.
     * ```html
     *  <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
     * ```
     */
    id: string;
    /**
     * @hidden
     */
    zIndex: number;
    /**
     * Allows you to set a style using the `itemContentCssClass` input.
     * The value should be the CSS class name that will be applied to the button group.
     * ```typescript
     * public style1 = "styleClass";
     *  //..
     * ```
     *  ```html
     * <igx-buttongroup [itemContentCssClass]="style1" [selectionMode]="'multi'" [values]="alignOptions">
     * ```
     */
    set itemContentCssClass(value: string);
    /**
     * Returns the CSS class of the item content of the `IgxButtonGroup`.
     * ```typescript
     *  @ViewChild("MyChild")
     * public buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    let buttonSelect = this.buttonG.itemContentCssClass;
     * }
     * ```
     */
    get itemContentCssClass(): string;
    /**
     * Enables selecting multiple buttons. By default, multi-selection is false.
     *
     * @deprecated in version 16.1.0. Use the `selectionMode` property instead.
     */
    get multiSelection(): boolean;
    set multiSelection(selectionMode: boolean);
    /**
     * Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
     * ```html
     * <igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
     * ```
     */
    get selectionMode(): 'single' | 'singleRequired' | 'multi';
    set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi');
    /**
     * Property that configures the buttons in the button group using a collection of `Button` objects.
     * ```typescript
     *  public ngOnInit() {
     *      this.cities = [
     *        new Button({
     *          label: "Sofia"
     *      }),
     *        new Button({
     *          label: "London"
     *      }),
     *        new Button({
     *          label: "New York",
     *          selected: true
     *      }),
     *        new Button({
     *          label: "Tokyo"
     *      })
     *  ];
     *  }
     *  //..
     * ```
     * ```html
     *  <igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>
     * ```
     */
    values: any;
    /**
     * Disables the `igx-buttongroup` component. By default it's false.
     * ```html
     * <igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
     * ```
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    /**
     * Allows you to set the button group alignment.
     * Available options are `ButtonGroupAlignment.horizontal` (default) and `ButtonGroupAlignment.vertical`.
     * ```typescript
     * public alignment = ButtonGroupAlignment.vertical;
     * //..
     * ```
     * ```html
     * <igx-buttongroup [selectionMode]="'single'" [values]="cities" [alignment]="alignment"></igx-buttongroup>
     * ```
     */
    set alignment(value: ButtonGroupAlignment);
    /**
     * Returns the alignment of the `igx-buttongroup`.
     * ```typescript
     * @ViewChild("MyChild")
     * public buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    let buttonAlignment = this.buttonG.alignment;
     * }
     * ```
     */
    get alignment(): ButtonGroupAlignment;
    /**
     * An @Ouput property that emits an event when a button is selected.
     * ```typescript
     * @ViewChild("toast")
     * private toast: IgxToastComponent;
     * public selectedHandler(buttongroup) {
     *     this.toast.open()
     * }
     *  //...
     * ```
     * ```html
     * <igx-buttongroup #MyChild [selectionMode]="'multi'" (selected)="selectedHandler($event)"></igx-buttongroup>
     * <igx-toast #toast>You have made a selection!</igx-toast>
     * ```
     */
    selected: EventEmitter<IButtonGroupEventArgs>;
    /**
     * An @Ouput property that emits an event when a button is deselected.
     * ```typescript
     *  @ViewChild("toast")
     *  private toast: IgxToastComponent;
     *  public deselectedHandler(buttongroup){
     *     this.toast.open()
     * }
     *  //...
     * ```
     * ```html
     * <igx-buttongroup> #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"></igx-buttongroup>
     * <igx-toast #toast>You have deselected a button!</igx-toast>
     * ```
     */
    deselected: EventEmitter<IButtonGroupEventArgs>;
    private viewButtons;
    private templateButtons;
    /**
     * Returns true if the `igx-buttongroup` alignment is vertical.
     * Note that in order for the accessor to work correctly the property should be set explicitly.
     * ```html
     * <igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions">
     * ```
     * ```typescript
     * //...
     * @ViewChild("MyChild")
     * private buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    let orientation = this.buttonG.isVertical;
     * }
     * ```
     */
    get isVertical(): boolean;
    /**
     * @hidden
     */
    selectedIndexes: number[];
    protected buttonClickNotifier$: Subject<void>;
    protected queryListNotifier$: Subject<void>;
    private _isVertical;
    private _itemContentCssClass;
    private _disabled;
    private _selectionMode;
    private mutationObserver;
    private observerConfig;
    constructor(_cdr: ChangeDetectorRef, _renderer: Renderer2, _el: ElementRef);
    /**
     * Gets the selected button/buttons.
     * ```typescript
     * @ViewChild("MyChild")
     * private buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    let selectedButton = this.buttonG.selectedButtons;
     * }
     * ```
     */
    get selectedButtons(): IgxButtonDirective[];
    /**
     * Selects a button by its index.
     * ```typescript
     * @ViewChild("MyChild")
     * private buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    this.buttonG.selectButton(2);
     *    this.cdr.detectChanges();
     * }
     * ```
     *
     * @memberOf {@link IgxButtonGroupComponent}
     */
    selectButton(index: number): void;
    /**
     * @hidden
     * @internal
     */
    updateSelected(index: number): void;
    updateDeselected(index: number): void;
    /**
     * Deselects a button by its index.
     * ```typescript
     * @ViewChild("MyChild")
     * private buttonG: IgxButtonGroupComponent;
     * ngAfterViewInit(){
     *    this.buttonG.deselectButton(2);
     *    this.cdr.detectChanges();
     * }
     * ```
     *
     * @memberOf {@link IgxButtonGroupComponent}
     */
    deselectButton(index: number): void;
    /**
     * @hidden
     */
    ngAfterViewInit(): void;
    /**
     * @hidden
     */
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    _clickHandler(index: number): void;
    private setMutationsObserver;
    private getUpdatedButtons;
    private updateButtonSelectionState;
    static ɵfac: i0.ɵɵFactoryDeclaration<IgxButtonGroupComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<IgxButtonGroupComponent, "igx-buttongroup", never, { "id": { "alias": "id"; "required": false; }; "itemContentCssClass": { "alias": "itemContentCssClass"; "required": false; }; "multiSelection": { "alias": "multiSelection"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "values": { "alias": "values"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, { "selected": "selected"; "deselected": "deselected"; }, ["templateButtons"], ["*"], true, never>;
    static ngAcceptInputType_disabled: unknown;
}
export interface IButtonGroupEventArgs extends IBaseEventArgs {
    owner: IgxButtonGroupComponent;
    button: IgxButtonDirective;
    index: number;
}