import { ChangeDetectorRef, EventEmitter, ElementRef, Renderer2, TemplateRef } from '@angular/core'; import { IDisplayDensityOptions, DisplayDensityBase } from '../core/displayDensity'; import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs } from '../directives/drag-drop/drag-drop.directive'; import { IBaseEventArgs } from '../core/utils'; export interface IBaseChipEventArgs extends IBaseEventArgs { originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent; owner: IgxChipComponent; } export interface IChipClickEventArgs extends IBaseChipEventArgs { cancel: boolean; } export interface IChipKeyDownEventArgs extends IBaseChipEventArgs { originalEvent: KeyboardEvent; cancel: boolean; } export interface IChipEnterDragAreaEventArgs extends IBaseChipEventArgs { dragChip: IgxChipComponent; } export interface IChipSelectEventArgs extends IBaseChipEventArgs { cancel: boolean; selected: boolean; } export declare class IgxChipComponent extends DisplayDensityBase { cdr: ChangeDetectorRef; elementRef: ElementRef; private renderer; protected _displayDensityOptions: IDisplayDensityOptions; /** * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated. * ```html * * ``` */ id: string; /** * An @Input property that stores data related to the chip. * ```html * * ``` */ data: any; /** * An @Input property that defines if the `IgxChipComponent` can be dragged in order to change it's position. * By default it is set to false. * ```html * * ``` */ draggable: boolean; /** * An @Input property that enables/disables the draggable element animation when the element is released. * By default it's set to true. * ```html * * ``` */ animateOnRelease: boolean; /** * An @Input property that enables/disables the hiding of the base element that has been dragged. * By default it's set to true. * ```html * * ``` */ hideBaseOnDrag: boolean; /** * An @Input property that defines if the `IgxChipComponent` should render remove button and throw remove events. * By default it is set to false. * ```html * * ``` */ removable: boolean; /** * An @Input property that overrides the default icon that the chip applies to the remove button. * ```html * * delete * ``` */ removeIcon: TemplateRef; /** * An @Input property that defines if the `IgxChipComponent` can be selected on click or through navigation, * By default it is set to false. * ```html * * ``` */ selectable: boolean; /** * An @Input property that overrides the default icon that the chip applies when it is selected. * ```html * * done_outline * ``` */ selectIcon: TemplateRef; /** * @hidden */ class: string; /** * An @Input property that defines if the `IgxChipComponent` is disabled. When disabled it restricts user interactions * like focusing on click or tab, selection on click or Space, dragging. * By default it is set to false. * ```html * * ``` */ disabled: boolean; /** * Sets the `IgxChipComponent` selected state. * ```html * * ``` * * Two-way data binding: * ```html * * ``` */ /** * Returns if the `IgxChipComponent` is selected. * ```typescript * @ViewChild('myChip') * public chip: IgxChipComponent; * selectedChip(){ * let selectedChip = this.chip.selected; * } * ``` */ selected: boolean; /** *@hidden */ selectedChange: EventEmitter; /** * An @Input property that sets the `IgxChipComponent` background color. * The `color` property supports string, rgb, hex. * ```html * * ``` */ /** * Returns the background color of the `IgxChipComponent`. * ```typescript * @ViewChild('myChip') * public chip: IgxChipComponent; * ngAfterViewInit(){ * let chipColor = this.chip.color; * } * ``` */ color: any; /** * Emits an event when the `IgxChipComponent` moving starts. * Returns the moving `IgxChipComponent`. * ```typescript * moveStarted(event: IBaseChipEventArgs){ * let movingChip = event.owner; * } * ``` * ```html * * ``` */ onMoveStart: EventEmitter; /** * Emits an event when the `IgxChipComponent` moving ends. * Returns the moved `IgxChipComponent`. * ```typescript * moveEnded(event: IBaseChipEventArgs){ * let movedChip = event.owner; * } * ``` * ```html * * ``` */ onMoveEnd: EventEmitter; /** * Emits an event when the `IgxChipComponent` is removed. * Returns the removed `IgxChipComponent`. * ```typescript * remove(event: IBaseChipEventArgs){ * let removedChip = event.owner; * } * ``` * ```html * * ``` */ onRemove: EventEmitter; /** * Emits an event when the `IgxChipComponent` is clicked. * Returns the clicked `IgxChipComponent`, whether the event should be canceled. * ```typescript * chipClick(event: IChipClickEventArgs){ * let clickedChip = event.owner; * } * ``` * ```html * * ``` */ onClick: EventEmitter; /** * Emits event when the `IgxChipComponent` is selected/deselected. * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`. * ```typescript * chipSelect(event: IChipSelectEventArgs){ * let selectedChip = event.owner; * } * ``` * ```html * * ``` */ onSelection: EventEmitter; /** * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end. * ```typescript * chipSelectEnd(event: IBaseChipEventArgs){ * let selectedChip = event.owner; * } * ``` * ```html * * ``` */ onSelectionDone: EventEmitter; /** * Emits an event when the `IgxChipComponent` keyboard navigation is being used. * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled, * if the `alt`, `shift` or `control` key is pressed and the pressed key name. * ```typescript * chipKeyDown(event: IChipKeyDownEventArgs){ * let keyDown = event.key; * } * ``` * ```html * * ``` */ onKeyDown: EventEmitter; /** * Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`. * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as well as * the original drop event arguments. * ```typescript * chipEnter(event: IChipEnterDragAreaEventArgs){ * let targetChip = event.targetChip; * } * ``` * ```html * * ``` */ onDragEnter: EventEmitter; /** * @hidden */ readonly hostClass: string; /** * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior. * ```html * * ``` * ```typescript * onMoveStart(event: IBaseChipEventArgs){ * let dragDirective = event.owner.dragDirective; * } * ``` */ dragDirective: IgxDragDirective; /** * @hidden */ chipArea: ElementRef; /** * @hidden */ selectContainer: ElementRef; /** * @hidden */ defaultRemoveIcon: TemplateRef; /** * @hidden */ defaultSelectIcon: TemplateRef; /** * @hidden */ readonly removeButtonTemplate: TemplateRef; /** * @hidden */ readonly selectIconTemplate: TemplateRef; /** * @hidden */ readonly ghostClass: string; readonly chipTabindex: "" | 0; protected _selected: boolean; protected _selectedItemClass: string; protected _movedWhileRemoving: boolean; constructor(cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2, _displayDensityOptions: IDisplayDensityOptions); /** * @hidden */ selectClass(condition: boolean): object; protected changeSelection(newValue: boolean, srcEvent?: any): void; onSelectTransitionDone(event: any): void; /** * @hidden */ onChipKeyDown(event: KeyboardEvent): void; /** * @hidden */ onRemoveBtnKeyDown(event: KeyboardEvent): void; onRemoveMouseDown(event: PointerEvent | MouseEvent): void; /** * @hidden */ onRemoveClick(event: MouseEvent | TouchEvent): void; /** * @hidden */ onRemoveTouchMove(): void; /** * @hidden */ onRemoveTouchEnd(event: TouchEvent): void; /** * @hidden */ onChipDragStart(event: IDragStartEventArgs): void; /** * @hidden */ onChipDragEnd(): void; /** * @hidden */ onChipMoveEnd(event: IDragBaseEventArgs): void; /** * @hidden */ onChipDragClicked(event: IDragBaseEventArgs): void; /** * @hidden */ onChipDragEnterHandler(event: IDropBaseEventArgs): void; /** * @hidden */ onChipDrop(event: IDropDroppedEventArgs): void; }