igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
281 lines (280 loc) • 9.54 kB
TypeScript
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;
}