igniteui-angular/fesm2022/igniteui-angular-chips.mjs.map

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

{"version":3,"file":"igniteui-angular-chips.mjs","sources":["../../../projects/igniteui-angular/chips/src/chips/chip.component.ts","../../../projects/igniteui-angular/chips/src/chips/chip.component.html","../../../projects/igniteui-angular/chips/src/chips/chips-area.component.ts","../../../projects/igniteui-angular/chips/src/chips/chips-area.component.html","../../../projects/igniteui-angular/chips/src/chips/public_api.ts","../../../projects/igniteui-angular/chips/src/chips/chips.module.ts","../../../projects/igniteui-angular/chips/src/igniteui-angular-chips.ts"],"sourcesContent":["import {\n    Component,\n    ChangeDetectorRef,\n    EventEmitter,\n    ElementRef,\n    HostBinding,\n    HostListener,\n    Input,\n    Output,\n    ViewChild,\n    Renderer2,\n    TemplateRef,\n    OnDestroy,\n    booleanAttribute,\n    OnInit,\n    inject,\n    DOCUMENT\n} from '@angular/core';\nimport { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from 'igniteui-angular/directives';\nimport { IBaseEventArgs, ɵSize } from 'igniteui-angular/core';\nimport { ChipResourceStringsEN, IChipResourceStrings } from 'igniteui-angular/core';\nimport { Subject } from 'rxjs';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { getCurrentResourceStrings } from 'igniteui-angular/core';\n\nexport const IgxChipTypeVariant = {\n    PRIMARY: 'primary',\n    INFO: 'info',\n    SUCCESS: 'success',\n    WARNING: 'warning',\n    DANGER: 'danger'\n} as const;\nexport type IgxChipTypeVariant = (typeof IgxChipTypeVariant)[keyof typeof IgxChipTypeVariant];\n\nexport interface IBaseChipEventArgs extends IBaseEventArgs {\n    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;\n    owner: IgxChipComponent;\n}\n\nexport interface IChipClickEventArgs extends IBaseChipEventArgs {\n    cancel: boolean;\n}\n\nexport interface IChipKeyDownEventArgs extends IBaseChipEventArgs {\n    originalEvent: KeyboardEvent;\n    cancel: boolean;\n}\n\nexport interface IChipEnterDragAreaEventArgs extends IBaseChipEventArgs {\n    dragChip: IgxChipComponent;\n}\n\nexport interface IChipSelectEventArgs extends IBaseChipEventArgs {\n    cancel: boolean;\n    selected: boolean;\n}\n\nlet CHIP_ID = 0;\n\n/**\n * Chip is compact visual component that displays information in an obround.\n *\n * @igxModule IgxChipsModule\n *\n * @igxTheme igx-chip-theme\n *\n * @igxKeywords chip\n *\n * @igxGroup display\n *\n * @remarks\n * The Ignite UI Chip can be templated, deleted, and selected.\n * Multiple chips can be reordered and visually connected to each other.\n * Chips reside in a container called chips area which is responsible for managing the interactions between the chips.\n *\n * @example\n * ```html\n * <igx-chip class=\"chipStyle\" [id]=\"901\" [draggable]=\"true\" [removable]=\"true\" (remove)=\"chipRemoved($event)\">\n *    <igx-avatar class=\"chip-avatar-resized\" igxPrefix></igx-avatar>\n * </igx-chip>\n * ```\n */\n@Component({\n    selector: 'igx-chip',\n    templateUrl: 'chip.component.html',\n    imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent]\n})\nexport class IgxChipComponent implements OnInit, OnDestroy {\n    public cdr = inject(ChangeDetectorRef);\n    private ref = inject<ElementRef<HTMLElement>>(ElementRef);\n    private renderer = inject(Renderer2);\n    public document = inject(DOCUMENT);\n\n\n    /**\n     * Sets/gets the variant of the chip.\n     *\n     * @remarks\n     * Allowed values are `primary`, `info`, `success`, `warning`, `danger`.\n     * Providing no/nullish value leaves the chip in its default state.\n     *\n     * @example\n     * ```html\n     * <igx-chip variant=\"success\"></igx-chip>\n     * ```\n     */\n    @Input()\n    public variant?: IgxChipTypeVariant | null;\n    /**\n     * Sets the value of `id` attribute. If not provided it will be automatically generated.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\"></igx-chip>\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-chip-${CHIP_ID++}`;\n\n    /**\n     * Returns the `role` attribute of the chip.\n     *\n     * @example\n     * ```typescript\n     * let chipRole = this.chip.role;\n     * ```\n     */\n    @HostBinding('attr.role')\n    public role = 'option';\n\n    /**\n     * Sets the value of `tabindex` attribute. If not provided it will use the element's tabindex if set.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\" [tabIndex]=\"1\"></igx-chip>\n     * ```\n     */\n    @HostBinding('attr.tabIndex')\n    @Input()\n    public set tabIndex(value: number) {\n        this._tabIndex = value;\n    }\n\n    public get tabIndex() {\n        if (this._tabIndex !== null) {\n            return this._tabIndex;\n        }\n        return !this.disabled ? 0 : null;\n    }\n\n    /**\n     * Stores data related to the chip.\n     *\n     * @example\n     * ```html\n     * <igx-chip [data]=\"{ value: 'Country' }\"></igx-chip>\n     * ```\n     */\n    @Input()\n    public data: any;\n\n    /**\n     * Defines if the `IgxChipComponent` can be dragged in order to change it's position.\n     * By default it is set to false.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\" [draggable]=\"true\"></igx-chip>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public draggable = false;\n\n    /**\n     * Enables/disables the draggable element animation when the element is released.\n     * By default it's set to true.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\" [draggable]=\"true\" [animateOnRelease]=\"false\"></igx-chip>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public animateOnRelease = true;\n\n    /**\n     * Enables/disables the hiding of the base element that has been dragged.\n     * By default it's set to true.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\" [draggable]=\"true\" [hideBaseOnDrag]=\"false\"></igx-chip>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public hideBaseOnDrag = true;\n\n    /**\n     * Defines if the `IgxChipComponent` should render remove button and throw remove events.\n     * By default it is set to false.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"'igx-chip-1'\" [draggable]=\"true\" [removable]=\"true\"></igx-chip>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public removable = false;\n\n    /**\n     * Overrides the default icon that the chip applies to the remove button.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"chip.id\" [removable]=\"true\" [removeIcon]=\"iconTemplate\"></igx-chip>\n     * <ng-template #iconTemplate><igx-icon>delete</igx-icon></ng-template>\n     * ```\n     */\n    @Input()\n    public removeIcon: TemplateRef<any>;\n\n    /**\n     * Defines if the `IgxChipComponent` can be selected on click or through navigation,\n     * By default it is set to false.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"chip.id\" [draggable]=\"true\" [removable]=\"true\" [selectable]=\"true\"></igx-chip>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public selectable = false;\n\n    /**\n     * Overrides the default icon that the chip applies when it is selected.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"chip.id\" [selectable]=\"true\" [selectIcon]=\"iconTemplate\"></igx-chip>\n     * <ng-template #iconTemplate><igx-icon>done_outline</igx-icon></ng-template>\n     * ```\n     */\n    @Input()\n    public selectIcon: TemplateRef<any>;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @Input()\n    public class = '';\n\n    /**\n     * Disables the `IgxChipComponent`. When disabled it restricts user interactions\n     * like focusing on click or tab, selection on click or Space, dragging.\n     * By default it is set to false.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"chip.id\" [disabled]=\"true\"></igx-chip>\n     * ```\n     */\n    @HostBinding('class.igx-chip--disabled')\n    @Input({ transform: booleanAttribute })\n    public disabled = false;\n\n    /**\n     * Sets the `IgxChipComponent` selected state.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [selectable]=\"true\" [selected]=\"true\">\n     * ```\n     *\n     * Two-way data binding:\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [selectable]=\"true\" [(selected)]=\"model.isSelected\">\n     * ```\n     */\n    @HostBinding('attr.aria-selected')\n    @Input({ transform: booleanAttribute })\n    public set selected(newValue: boolean) {\n        this.changeSelection(newValue);\n    }\n\n    /**\n     * Returns if the `IgxChipComponent` is selected.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild('myChip')\n     * public chip: IgxChipComponent;\n     * selectedChip(){\n     *     let selectedChip = this.chip.selected;\n     * }\n     * ```\n     */\n    public get selected() {\n        return this._selected;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @Output()\n    public selectedChange = new EventEmitter<boolean>();\n\n    /**\n     * Sets the `IgxChipComponent` background color.\n     * The `color` property supports string, rgb, hex.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [color]=\"'#ff0000'\"></igx-chip>\n     * ```\n     */\n    @Input()\n    public set color(newColor) {\n        this.chipArea.nativeElement.style.backgroundColor = newColor;\n    }\n\n    /**\n     * Returns the background color of the `IgxChipComponent`.\n     *\n     * @example\n     * ```typescript\n     * @ViewChild('myChip')\n     * public chip: IgxChipComponent;\n     * ngAfterViewInit(){\n     *     let chipColor = this.chip.color;\n     * }\n     * ```\n     */\n    public get color() {\n        return this.chipArea.nativeElement.style.backgroundColor;\n    }\n\n    /**\n     * An accessor that sets the resource strings.\n     * By default it uses EN resources.\n     */\n    @Input()\n    public set resourceStrings(value: IChipResourceStrings) {\n        this._resourceStrings = Object.assign({}, this._resourceStrings, value);\n    }\n\n    /**\n     * An accessor that returns the resource strings.\n     */\n    public get resourceStrings(): IChipResourceStrings {\n        return this._resourceStrings;\n    }\n\n    /**\n     * Emits an event when the `IgxChipComponent` moving starts.\n     * Returns the moving `IgxChipComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (moveStart)=\"moveStarted($event)\">\n     * ```\n     */\n    @Output()\n    public moveStart = new EventEmitter<IBaseChipEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` moving ends.\n     * Returns the moved `IgxChipComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (moveEnd)=\"moveEnded($event)\">\n     * ```\n     */\n    @Output()\n    public moveEnd = new EventEmitter<IBaseChipEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` is removed.\n     * Returns the removed `IgxChipComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (remove)=\"remove($event)\">\n     * ```\n     */\n    @Output()\n    public remove = new EventEmitter<IBaseChipEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` is clicked.\n     * Returns the clicked `IgxChipComponent`, whether the event should be canceled.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (click)=\"chipClick($event)\">\n     * ```\n     */\n    @Output()\n    public chipClick = new EventEmitter<IChipClickEventArgs>();\n\n    /**\n     * Emits event when the `IgxChipComponent` is selected/deselected.\n     * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and\n     * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [selectable]=\"true\" (selectedChanging)=\"chipSelect($event)\">\n     * ```\n     */\n    @Output()\n    public selectedChanging = new EventEmitter<IChipSelectEventArgs>();\n\n    /**\n     * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [selectable]=\"true\" (selectedChanged)=\"chipSelectEnd($event)\">\n     * ```\n     */\n    @Output()\n    public selectedChanged = new EventEmitter<IBaseChipEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` keyboard navigation is being used.\n     * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,\n     * if the `alt`, `shift` or `control` key is pressed and the pressed key name.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (keyDown)=\"chipKeyDown($event)\">\n     * ```\n     */\n    @Output()\n    public keyDown = new EventEmitter<IChipKeyDownEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` has entered the `IgxChipsAreaComponent`.\n     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as\n     * the original drop event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (dragEnter)=\"chipEnter($event)\">\n     * ```\n     */\n    @Output()\n    public dragEnter = new EventEmitter<IChipEnterDragAreaEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` has left the `IgxChipsAreaComponent`.\n     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as\n     * the original drop event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (dragLeave)=\"chipLeave($event)\">\n     * ```\n     */\n    @Output()\n    public dragLeave = new EventEmitter<IChipEnterDragAreaEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` is over the `IgxChipsAreaComponent`.\n     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as\n     * the original drop event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (dragOver)=\"chipOver($event)\">\n     * ```\n     */\n    @Output()\n    public dragOver = new EventEmitter<IChipEnterDragAreaEventArgs>();\n\n    /**\n     * Emits an event when the `IgxChipComponent` has been dropped in the `IgxChipsAreaComponent`.\n     * Returns the target `IgxChipComponent`, the drag `IgxChipComponent`, as  well as\n     * the original drop event arguments.\n     *\n     * @example\n     * ```html\n     * <igx-chip #myChip [id]=\"'igx-chip-1'\" [draggable]=\"true\" (dragDrop)=\"chipLeave($event)\">\n     * ```\n     */\n    @Output()\n    public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();\n\n    @HostBinding('class.igx-chip')\n    protected defaultClass = 'igx-chip';\n\n    @HostBinding('class.igx-chip--primary')\n    protected get isPrimary() {\n        return this.variant === IgxChipTypeVariant.PRIMARY;\n    }\n\n    @HostBinding('class.igx-chip--info')\n    protected get isInfo() {\n        return this.variant === IgxChipTypeVariant.INFO;\n    }\n\n    @HostBinding('class.igx-chip--success')\n    protected get isSuccess() {\n        return this.variant === IgxChipTypeVariant.SUCCESS;\n    }\n\n    @HostBinding('class.igx-chip--warning')\n    protected get isWarning() {\n        return this.variant === IgxChipTypeVariant.WARNING;\n    }\n\n    @HostBinding('class.igx-chip--danger')\n    protected get isDanger() {\n        return this.variant === IgxChipTypeVariant.DANGER;\n    }\n\n    /**\n     * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.\n     *\n     * @example\n     * ```html\n     * <igx-chip [id]=\"chip.id\" [draggable]=\"true\"></igx-chip>\n     * ```\n     * ```typescript\n     * onMoveStart(event: IBaseChipEventArgs){\n     *     let dragDirective = event.owner.dragDirective;\n     * }\n     * ```\n     */\n    @ViewChild('chipArea', { read: IgxDragDirective, static: true })\n    public dragDirective: IgxDragDirective;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @ViewChild('chipArea', { read: ElementRef, static: true })\n    public chipArea: ElementRef;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @ViewChild('defaultRemoveIcon', { read: TemplateRef, static: true })\n    public defaultRemoveIcon: TemplateRef<any>;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @ViewChild('defaultSelectIcon', { read: TemplateRef, static: true })\n    public defaultSelectIcon: TemplateRef<any>;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public get removeButtonTemplate() {\n        if (!this.disabled) {\n            return this.removeIcon || this.defaultRemoveIcon;\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public get selectIconTemplate() {\n        return this.selectIcon || this.defaultSelectIcon;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public get ghostStyles() {\n        return { '--ig-size': `${this.chipSize}` };\n    }\n\n    /** @hidden @internal */\n    public get nativeElement() {\n        return this.ref.nativeElement;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public hideBaseElement = false;\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public destroy$ = new Subject<void>();\n\n    protected get chipSize(): ɵSize {\n        return this.computedStyles?.getPropertyValue('--ig-size') || ɵSize.Medium;\n    }\n    protected _tabIndex = null;\n    protected _selected = false;\n    protected _selectedItemClass = 'igx-chip__item--selected';\n    protected _movedWhileRemoving = false;\n    protected computedStyles;\n    private _resourceStrings = getCurrentResourceStrings(ChipResourceStringsEN);\n\n    /**\n     * @hidden\n     * @internal\n     */\n    @HostListener('keydown', ['$event'])\n    public keyEvent(event: KeyboardEvent) {\n        this.onChipKeyDown(event);\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public selectClass(condition: boolean): any {\n        const SELECT_CLASS = 'igx-chip__select';\n\n        return {\n            [SELECT_CLASS]: condition,\n            [`${SELECT_CLASS}--hidden`]: !condition\n        };\n    }\n\n    public onSelectTransitionDone(event) {\n        if (event.target.tagName) {\n            // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).\n            this.selectedChanged.emit({\n                owner: this,\n                originalEvent: event\n            });\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipKeyDown(event: KeyboardEvent) {\n        const keyDownArgs: IChipKeyDownEventArgs = {\n            originalEvent: event,\n            owner: this,\n            cancel: false\n        };\n\n        this.keyDown.emit(keyDownArgs);\n        if (keyDownArgs.cancel) {\n            return;\n        }\n\n        if ((event.key === 'Delete' || event.key === 'Del') && this.removable) {\n            this.remove.emit({\n                originalEvent: event,\n                owner: this\n            });\n        }\n\n        if ((event.key === ' ' || event.key === 'Spacebar') && this.selectable && !this.disabled) {\n            this.changeSelection(!this.selected, event);\n        }\n\n        if (event.key !== 'Tab') {\n            event.preventDefault();\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onRemoveBtnKeyDown(event: KeyboardEvent) {\n        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {\n            this.remove.emit({\n                originalEvent: event,\n                owner: this\n            });\n\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }\n\n    public onRemoveMouseDown(event: PointerEvent | MouseEvent) {\n        event.stopPropagation();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onRemoveClick(event: MouseEvent | TouchEvent) {\n        this.remove.emit({\n            originalEvent: event,\n            owner: this\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onRemoveTouchMove() {\n        // We don't remove chip if user starting touch interacting on the remove button moves the chip\n        this._movedWhileRemoving = true;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onRemoveTouchEnd(event: TouchEvent) {\n        if (!this._movedWhileRemoving) {\n            this.onRemoveClick(event);\n        }\n        this._movedWhileRemoving = false;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    // -----------------------------\n    // Start chip igxDrag behavior\n    public onChipDragStart(event: IDragStartEventArgs) {\n        this.moveStart.emit({\n            originalEvent: event,\n            owner: this\n        });\n        event.cancel = !this.draggable || this.disabled;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipDragEnd() {\n        if (this.animateOnRelease) {\n            this.dragDirective.transitionToOrigin();\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipMoveEnd(event: IDragBaseEventArgs) {\n        // moveEnd is triggered after return animation has finished. This happen when we drag and release the chip.\n        this.moveEnd.emit({\n            originalEvent: event,\n            owner: this\n        });\n\n        if (this.selected) {\n            this.chipArea.nativeElement.focus();\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipGhostCreate() {\n        this.hideBaseElement = this.hideBaseOnDrag;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipGhostDestroy() {\n        this.hideBaseElement = false;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipDragClicked(event: IDragBaseEventArgs) {\n        const clickEventArgs: IChipClickEventArgs = {\n            originalEvent: event,\n            owner: this,\n            cancel: false\n        };\n        this.chipClick.emit(clickEventArgs);\n\n        if (!clickEventArgs.cancel && this.selectable && !this.disabled) {\n            this.changeSelection(!this.selected, event);\n        }\n    }\n    // End chip igxDrag behavior\n\n    /**\n     * @hidden\n     * @internal\n     */\n    // -----------------------------\n    // Start chip igxDrop behavior\n    public onChipDragEnterHandler(event: IDropBaseEventArgs) {\n        if (this.dragDirective === event.drag) {\n            return;\n        }\n\n        const eventArgs: IChipEnterDragAreaEventArgs = {\n            owner: this,\n            dragChip: event.drag.data?.chip,\n            originalEvent: event\n        };\n        this.dragEnter.emit(eventArgs);\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipDragLeaveHandler(event: IDropBaseEventArgs) {\n        if (this.dragDirective === event.drag) {\n            return;\n        }\n\n        const eventArgs: IChipEnterDragAreaEventArgs = {\n            owner: this,\n            dragChip: event.drag.data?.chip,\n            originalEvent: event\n        };\n        this.dragLeave.emit(eventArgs);\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipDrop(event: IDropDroppedEventArgs) {\n        // Cancel the default drop logic\n        event.cancel = true;\n        if (this.dragDirective === event.drag) {\n            return;\n        }\n\n        const eventArgs: IChipEnterDragAreaEventArgs = {\n            owner: this,\n            dragChip: event.drag.data?.chip,\n            originalEvent: event\n        };\n        this.dragDrop.emit(eventArgs);\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public onChipOverHandler(event: IDropBaseEventArgs) {\n        if (this.dragDirective === event.drag) {\n            return;\n        }\n\n        const eventArgs: IChipEnterDragAreaEventArgs = {\n            owner: this,\n            dragChip: event.drag.data?.chip,\n            originalEvent: event\n        };\n        this.dragOver.emit(eventArgs);\n    }\n    // End chip igxDrop behavior\n\n    protected changeSelection(newValue: boolean, srcEvent = null) {\n        const onSelectArgs: IChipSelectEventArgs = {\n            originalEvent: srcEvent,\n            owner: this,\n            selected: false,\n            cancel: false\n        };\n\n        if (newValue && !this._selected) {\n            onSelectArgs.selected = true;\n            this.selectedChanging.emit(onSelectArgs);\n\n            if (!onSelectArgs.cancel) {\n                this.renderer.addClass(this.chipArea.nativeElement, this._selectedItemClass);\n                this._selected = newValue;\n                this.selectedChange.emit(this._selected);\n                this.selectedChanged.emit({\n                    owner: this,\n                    originalEvent: srcEvent\n                });\n            }\n        } else if (!newValue && this._selected) {\n            this.selectedChanging.emit(onSelectArgs);\n\n            if (!onSelectArgs.cancel) {\n                this.renderer.removeClass(this.chipArea.nativeElement, this._selectedItemClass);\n                this._selected = newValue;\n                this.selectedChange.emit(this._selected);\n                this.selectedChanged.emit({\n                    owner: this,\n                    originalEvent: srcEvent\n                });\n            }\n        }\n    }\n\n    public ngOnInit(): void {\n        this.computedStyles = this.document.defaultView.getComputedStyle(this.nativeElement);\n    }\n\n    public ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n}\n","<div #chipArea class=\"igx-chip__item\"\n    [igxDrag]=\"{chip: this}\"\n    [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n    ghostClass=\"igx-chip__ghost\"\n    [ghostStyle]=\"ghostStyles\"\n    (dragStart)=\"onChipDragStart($event)\"\n    (ghostCreate)=\"onChipGhostCreate()\"\n    (ghostDestroy)=\"onChipGhostDestroy()\"\n    (dragEnd)=\"onChipDragEnd()\"\n    (transitioned)=\"onChipMoveEnd($event)\"\n    (dragClick)=\"onChipDragClicked($event)\"\n    igxDrop\n    (enter)=\"onChipDragEnterHandler($event)\"\n    (leave)=\"onChipDragLeaveHandler($event)\"\n    (over)=\"onChipOverHandler($event)\"\n    (dropped)=\"onChipDrop($event)\">\n\n    <div class=\"igx-chip__start\" #selectContainer>\n        @if (selected) {\n            <div [ngClass]=\"selectClass(selected)\">\n                <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n            </div>\n        }\n\n        <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n    </div>\n\n    <div class=\"igx-chip__content\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"igx-chip__end\">\n        <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n        @if (removable) {\n            <div class=\"igx-chip__remove\"\n                [attr.tabIndex]=\"tabIndex\"\n                (keydown)=\"onRemoveBtnKeyDown($event)\"\n                (pointerdown)=\"onRemoveMouseDown($event)\"\n                (mousedown)=\"onRemoveMouseDown($event)\"\n                (click)=\"onRemoveClick($event)\"\n                (touchmove)=\"onRemoveTouchMove()\"\n                (touchend)=\"onRemoveTouchEnd($event)\">\n                <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n        family=\"default\"\n        name=\"selected\"\n    ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n    <igx-icon\n        [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n        family=\"default\"\n        name=\"remove\"\n    ></igx-icon>\n</ng-template>\n","import { Component, ContentChildren, ChangeDetectorRef, EventEmitter, HostBinding, Input, IterableDiffer, IterableDiffers, Output, QueryList, DoCheck, AfterViewInit, OnDestroy, ElementRef, inject } from '@angular/core';\nimport {\n    IgxChipComponent,\n    IChipSelectEventArgs,\n    IChipKeyDownEventArgs,\n    IChipEnterDragAreaEventArgs,\n    IBaseChipEventArgs\n} from './chip.component';\nimport { IDropBaseEventArgs, IDragBaseEventArgs } from 'igniteui-angular/directives';\nimport { takeUntil } from 'rxjs/operators';\nimport { Subject } from 'rxjs';\nimport { rem } from 'igniteui-angular/core';\n\nexport interface IBaseChipsAreaEventArgs {\n    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;\n    owner: IgxChipsAreaComponent;\n}\n\nexport interface IChipsAreaReorderEventArgs extends IBaseChipsAreaEventArgs {\n    chipsArray: IgxChipComponent[];\n}\n\nexport interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs {\n    newSelection: IgxChipComponent[];\n}\n\n/**\n * The chip area allows you to perform more complex scenarios with chips that require interaction,\n * like dragging, selection, navigation, etc.\n *\n * @igxModule IgxChipsModule\n *\n * @igxTheme igx-chip-theme\n *\n * @igxKeywords chip area, chip\n *\n * @igxGroup display\n *\n * @example\n * ```html\n * <igx-chips-area>\n *    <igx-chip *ngFor=\"let chip of chipList\" [id]=\"chip.id\">\n *        <span>{{chip.text}}</span>\n *    </igx-chip>\n * </igx-chips-area>\n * ```\n */\n@Component({\n    selector: 'igx-chips-area',\n    templateUrl: 'chips-area.component.html',\n    standalone: true\n})\nexport class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy {\n     public cdr = inject(ChangeDetectorRef);\n     public element = inject(ElementRef);\n     private _iterableDiffers = inject(IterableDiffers);\n\n\n    /**\n     * Returns the `role` attribute of the chips area.\n     *\n     * @example\n     * ```typescript\n     * let chipsAreaRole = this.chipsArea.role;\n     * ```\n     */\n     @HostBinding('attr.role')\n     public role = 'listbox';\n\n    /**\n     * Returns the `aria-label` attribute of the chips area.\n     *\n     * @example\n     * ```typescript\n     * let ariaLabel = this.chipsArea.ariaLabel;\n     * ```\n     *\n     */\n     @HostBinding('attr.aria-label')\n     public ariaLabel = 'chip area';\n\n    /**\n     * Sets the width of the `IgxChipsAreaComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"300\" [height]=\"10\" (onReorder)=\"chipsOrderChanged($event)\"></igx-chips-area>\n     * ```\n     */\n    @Input()\n    public width: number;\n\n    /** @hidden @internal */\n    @HostBinding('style.width.rem')\n    public get _widthToRem() {\n        return rem(this.width);\n    }\n\n    /**\n     * Sets the height of the `IgxChipsAreaComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"300\" [height]=\"10\" (onReorder)=\"chipsOrderChanged($event)\"></igx-chips-area>\n     * ```\n     */\n    @Input()\n    public height: number;\n\n    /** @hidden @internal */\n    @HostBinding('style.height.rem')\n    public get _heightToRem() {\n        return rem(this.height);\n    }\n\n    /**\n     * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered.\n     * Returns an array of `IgxChipComponent`s.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"'300'\" [height]=\"'10'\" (onReorder)=\"changedOrder($event)\"></igx-chips-area>\n     * ```\n     */\n    @Output()\n    public reorder = new EventEmitter<IChipsAreaReorderEventArgs>();\n\n    /**\n     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected.\n     * Fired after the chips area is initialized if there are initially selected chips as well.\n     * Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"'300'\" [height]=\"'10'\" (selectionChange)=\"selection($event)\"></igx-chips-area>\n     * ```\n     */\n    @Output()\n    public selectionChange = new EventEmitter<IChipsAreaSelectEventArgs>();\n\n    /**\n     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"'300'\" [height]=\"'10'\" (moveStart)=\"moveStart($event)\"></igx-chips-area>\n     * ```\n     */\n    @Output()\n    public moveStart = new EventEmitter<IBaseChipsAreaEventArgs>();\n\n    /**\n     * Emits an event after an `IgxChipComponent` in the `IgxChipsAreaComponent` is moved.\n     *\n     * @example\n     * ```html\n     * <igx-chips-area #chipsArea [width]=\"'300'\" [height]=\"'10'\" (moveEnd)=\"moveEnd($event)\"></igx-chips-area>\n     * ```\n     */\n    @Output()\n    public moveEnd = new EventEmitter<IBaseChipsAreaEventArgs>();\n\n    /**\n     * Holds the `IgxChipComponent` in the `IgxChipsAreaComponent`.\n     *\n     * @example\n     * ```typescript\n     * ngAfterViewInit(){\n     *    let chips = this.chipsArea.chipsList;\n     * }\n     * ```\n     */\n    @ContentChildren(IgxChipComponent, { descendants: true })\n    public chipsList: QueryList<IgxChipComponent>;\n\n    protected destroy$ = new Subject<boolean>();\n\n    @HostBinding('class')\n    protected hostClass = 'igx-chip-area';\n\n    private modifiedChipsArray: IgxChipComponent[];\n    private _differ: IterableDiffer<IgxChipComponent> | null = null;\n\n    constructor() {\n        this._differ = this._iterableDiffers.find([]).create(null);\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngAfterViewInit() {\n        // If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet.\n        if (this.chipsList.length) {\n            const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);\n            if (selectedChips.length) {\n                this.selectionChange.emit({\n                    originalEvent: null,\n                    newSelection: selectedChips,\n                    owner: this\n                });\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngDoCheck(): void {\n        if (this.chipsList) {\n            const changes = this._differ.diff(this.chipsList.toArray());\n            if (changes) {\n                changes.forEachAddedItem((addedChip) => {\n                    addedChip.item.moveStart.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {\n                        this.onChipMoveStart(args);\n                    });\n                    addedChip.item.moveEnd.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {\n                        this.onChipMoveEnd(args);\n                    });\n                    addedChip.item.dragEnter.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {\n                        this.onChipDragEnter(args);\n                    });\n                    addedChip.item.keyDown.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {\n                        this.onChipKeyDown(args);\n                    });\n                    if (addedChip.item.selectable) {\n                        addedChip.item.selectedChanging.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {\n                            this.onChipSelectionChange(args);\n                        });\n                    }\n                });\n                this.modifiedChipsArray = this.chipsList.toArray();\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    public ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.complete();\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected onChipKeyDown(event: IChipKeyDownEventArgs) {\n        let orderChanged = false;\n        const chipsArray = this.chipsList.toArray();\n        const dragChipIndex = chipsArray.findIndex((el) => el === event.owner);\n        if (event.originalEvent.shiftKey === true) {\n            if (event.originalEvent.key === 'ArrowLeft' || event.originalEvent.key === 'Left') {\n                orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex - 1, false, event.originalEvent);\n                if (orderChanged) {\n                    setTimeout(() => {\n                        this.chipsList.get(dragChipIndex - 1).nativeElement.focus();\n                    });\n                }\n            } else if (event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') {\n                orderChanged = this.positionChipAtIndex(dragChipIndex, dragChipIndex + 1, true, event.originalEvent);\n            }\n        } else {\n            if ((event.originalEvent.key === 'ArrowLeft' || event.originalEvent.key === 'Left') && dragChipIndex > 0) {\n                chipsArray[dragChipIndex - 1].nativeElement.focus();\n            } else if ((event.originalEvent.key === 'ArrowRight' || event.originalEvent.key === 'Right') &&\n                dragChipIndex < chipsArray.length - 1) {\n                chipsArray[dragChipIndex + 1].nativeElement.focus();\n            }\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected onChipMoveStart(event: IBaseChipEventArgs) {\n        this.moveStart.emit({\n            originalEvent: event.originalEvent,\n            owner: this\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected onChipMoveEnd(event: IBaseChipEventArgs) {\n        this.moveEnd.emit({\n            originalEvent: event.originalEvent,\n            owner: this\n        });\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected onChipDragEnter(event: IChipEnterDragAreaEventArgs) {\n        const dropChipIndex = this.chipsList.toArray().findIndex((el) => el === event.owner);\n        const dragChipIndex = this.chipsList.toArray().findIndex((el) => el === event.dragChip);\n        if (dragChipIndex < dropChipIndex) {\n            // from the left to right\n            this.positionChipAtIndex(dragChipIndex, dropChipIndex, true, event.originalEvent);\n        } else {\n            // from the right to left\n            this.positionChipAtIndex(dragChipIndex, dropChipIndex, false, event.originalEvent);\n        }\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected positionChipAtIndex(chipIndex, targetIndex, shiftRestLeft, originalEvent) {\n        if (chipIndex < 0 || this.chipsList.length <= chipIndex ||\n            targetIndex < 0 || this.chipsList.length <= targetIndex) {\n            return false;\n        }\n\n        const chipsArray = this.chipsList.toArray();\n        const result: IgxChipComponent[] = [];\n        for (let i = 0; i < chipsArray.length; i++) {\n            if (shiftRestLeft) {\n                if (chipIndex <= i && i < targetIndex) {\n                    result.push(chipsArray[i + 1]);\n                } else if (i === targetIndex) {\n                    result.push(chipsArray[chipIndex]);\n                } else {\n                    result.push(chipsArray[i]);\n                }\n            } else {\n                if (targetIndex < i && i <= chipIndex) {\n                    result.push(chipsArray[i - 1]);\n                } else if (i === targetIndex) {\n                    result.push(chipsArray[chipIndex]);\n                } else {\n                    result.push(chipsArray[i]);\n                }\n            }\n        }\n        this.modifiedChipsArray = result;\n\n        const eventData: IChipsAreaReorderEventArgs = {\n            chipsArray: this.modifiedChipsArray,\n            originalEvent,\n            owner: this\n        };\n        this.reorder.emit(eventData);\n        return true;\n    }\n\n    /**\n     * @hidden\n     * @internal\n     */\n    protected onChipSelectionChange(event: IChipSelectEventArgs) {\n        let selectedChips = this.chipsList.filter((chip) => chip.selected);\n        if (event.selected && !selectedChips.includes(event.owner)) {\n            selectedChips.push(event.owner);\n        } else if (!event.selected && selectedChips.includes(event.owner)) {\n            selectedChips = selectedChips.filter((chip) => chip.id !== event.owner.id);\n        }\n        this.selectionChange.emit({\n            originalEvent: event.originalEvent,\n            newSelection: selectedChips,\n            owner: this\n        });\n    }\n}\n","<ng-content></ng-content>\n","import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';\nimport { IgxChipComponent } from './chip.component';\nimport { IgxChipsAreaComponent } from './chips-area.component';\n\nexport * from './chip.component';\nexport * from './chips-area.component';\n\n/* NOTE: Chips directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_CHIPS_DIRECTIVES = [\n    IgxChipsAreaComponent,\n    IgxChipComponent,\n    IgxPrefixDirective,\n    IgxSuffixDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_CHIPS_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    exports: [\n        ...IGX_CHIPS_DIRECTIVES\n    ],\n    imports: [\n        ...IGX_CHIPS_DIRECTIVES\n    ]\n})\nexport class IgxChipsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["ɵSize","i1.IgxChipsAreaComponent","i2.IgxChipComponent"],"mappings":"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