diff --git a/CHANGELOG.md b/CHANGELOG.md index c2c96d3e859..da08058cdcb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -71,6 +71,11 @@ There are also prebuilt schema presets for all components (light-round/dark-roun - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - **Breaking Change** The **condition** parameter of the `filterGlobal` method is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns. +- `IgxChip` + - `hideBaseOnDrag` input is added that allow the chip base that stays at place to be visible while dragging it. + - `animateOnRelease` input is added that allows to disable the animation that returns the chip when the chip is released somewhere. + + ## 7.3.4 - `IgxGrid` - summaries - `clearSummaryCache()` and `recalculateSummaries()` methods are now removed from the IgxGrid API, beacause they are no longer needed; summaries are updated when some change is perform and the summary cache is cleared automatically when needed; diff --git a/projects/igniteui-angular/src/lib/chips/README.md b/projects/igniteui-angular/src/lib/chips/README.md index 06c9b6efd94..60ff3fac8c8 100644 --- a/projects/igniteui-angular/src/lib/chips/README.md +++ b/projects/igniteui-angular/src/lib/chips/README.md @@ -153,6 +153,8 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b | `disabled` | `boolean` | Sets if the chip is disabled. | | `displayDensity`| `DisplayDensity | string` | Sets the chip theme. Available options are `compact`, `cosy`, `comfortable`. | | `color` | `string` | Sets the chip background color. | +| `hideBaseOnDrag` | `boolean` | Sets if the chip base should be hidden when the chip is dragged. | +| `animateOnRelease` | `boolean` | Sets if the chip should animate to its position when released. | ### Outputs | Name | Argument Type | Description | diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html index 1835a1ac58e..710e6bf7bff 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.html +++ b/projects/igniteui-angular/src/lib/chips/chip.component.html @@ -2,8 +2,8 @@ [attr.tabindex]="chipTabindex" (keydown)="onChipKeyDown($event)" [igxDrag]="{chip: this}" - [hideBaseOnDrag]="true" - [animateOnRelease]="true" + [hideBaseOnDrag]="hideBaseOnDrag" + [animateOnRelease]="animateOnRelease" [ghostImageClass]="ghostClass" (dragStart)="onChipDragStart($event)" (dragEnd)="onChipDragEnd()" diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index c98ad4013b2..dac46908ed2 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -82,6 +82,26 @@ export class IgxChipComponent extends DisplayDensityBase { @Input() public draggable = false; + /** + * An @Input property that enables/disables the draggable element animation when the element is released. + * By default it's set to true. + * ```html + * + * ``` + */ + @Input() + public animateOnRelease = true; + + /** + * An @Input property that enables/disables the hiding of the base element that has been dragged. + * By default it's set to true. + * ```html + * + * ``` + */ + @Input() + public hideBaseOnDrag = true; + /** * An @Input property that defines if the `IgxChipComponent` should render remove button and throw remove events. * By default it is set to false. @@ -311,16 +331,24 @@ export class IgxChipComponent extends DisplayDensityBase { } /** - * @hidden + * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior. + * ```html + * + * ``` + * ```typescript + * onMoveStart(event: IBaseChipEventArgs){ + * let dragDirective = event.owner.dragDirective; + * } + * ``` */ - @ViewChild('chipArea', { read: ElementRef, static: true }) - public chipArea: ElementRef; + @ViewChild('chipArea', { read: IgxDragDirective, static: true }) + public dragDirective: IgxDragDirective; /** * @hidden */ - @ViewChild('chipArea', { read: IgxDragDirective, static: true }) - public dragDir: IgxDragDirective; + @ViewChild('chipArea', { read: ElementRef, static: true }) + public chipArea: ElementRef; /** * @hidden @@ -501,7 +529,7 @@ export class IgxChipComponent extends DisplayDensityBase { * @hidden */ public onChipDragEnd() { - this.dragDir.dropFinished(); + this.dragDirective.dropFinished(); } /** @@ -542,7 +570,7 @@ export class IgxChipComponent extends DisplayDensityBase { // ----------------------------- // Start chip igxDrop behaviour public onChipDragEnterHandler(event: IgxDropEnterEventArgs) { - if (this.dragDir === event.drag || !event.dragData || !event.dragData.chip) { + if (this.dragDirective === event.drag || !event.dragData || !event.dragData.chip) { return; } diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index 779675be39c..c841f4b1aed 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts @@ -387,12 +387,12 @@ describe('IgxChip', () => { }).then(() => { fix.detectChanges(); - expect(thirdChip.dragDir['dragGhost'].className).toEqual('igx-chip__item igx-chip__ghost--compact'); + expect(thirdChip.dragDirective['dragGhost'].className).toEqual('igx-chip__item igx-chip__ghost--compact'); return fix.whenStable(); }).then(() => { fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDir['dragGhost'], startingX + 10, startingY + 10); + UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDirective['dragGhost'], startingX + 10, startingY + 10); done(); }); diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts index 49fc69c5e30..353947e2f85 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts @@ -208,7 +208,7 @@ describe('IgxChipsArea', () => { return fix.whenStable(); }).then(() => { fix.detectChanges(); - const dragDir = firstChip.dragDir['dragGhost']; + const dragDir = firstChip.dragDirective['dragGhost']; expect(dragDir).toBeUndefined(); }); @@ -245,14 +245,14 @@ describe('IgxChipsArea', () => { fix.detectChanges(); UIInteractions.simulatePointerEvent( 'pointermove', - secondChip.dragDir['dragGhost'], + secondChip.dragDirective['dragGhost'], startingX + xDragDifference, startingY + yDragDifference ); setTimeout(() => { - const afterDragTop = secondChip.dragDir['dragGhost'].getBoundingClientRect().top; - const afterDragLeft = secondChip.dragDir['dragGhost'].getBoundingClientRect().left; + const afterDragTop = secondChip.dragDirective['dragGhost'].getBoundingClientRect().top; + const afterDragLeft = secondChip.dragDirective['dragGhost'].getBoundingClientRect().left; expect(afterDragTop - startingTop).toEqual(yDragDifference); expect(afterDragLeft - startingLeft).toEqual(xDragDifference); }, 100); @@ -269,8 +269,8 @@ describe('IgxChipsArea', () => { const firstChip = chipComponents[0].componentInstance; const secondChip = chipComponents[1].componentInstance; - firstChip.dragDir.animateOnRelease = false; - secondChip.dragDir.animateOnRelease = false; + firstChip.dragDirective.animateOnRelease = false; + secondChip.dragDirective.animateOnRelease = false; const firstChipElem = firstChip.chipArea.nativeElement; const secondChipElem = secondChip.chipArea.nativeElement; @@ -301,12 +301,12 @@ describe('IgxChipsArea', () => { return fix.whenStable(); }).then(() => { fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointermove', firstChip.dragDir['dragGhost'], secondChipX, secondChipY); + UIInteractions.simulatePointerEvent('pointermove', firstChip.dragDirective['dragGhost'], secondChipX, secondChipY); fix.detectChanges(); return fix.whenRenderingDone(); }).then(() => { - UIInteractions.simulatePointerEvent('pointerup', firstChip.dragDir['dragGhost'], secondChipX, secondChipY); + UIInteractions.simulatePointerEvent('pointerup', firstChip.dragDirective['dragGhost'], secondChipX, secondChipY); return fix.whenRenderingDone(); }).then(() => { setTimeout(() => { @@ -329,8 +329,8 @@ describe('IgxChipsArea', () => { const firstChip = chipComponents[0].componentInstance; const secondChip = chipComponents[1].componentInstance; - firstChip.dragDir.animateOnRelease = false; - secondChip.dragDir.animateOnRelease = false; + firstChip.dragDirective.animateOnRelease = false; + secondChip.dragDirective.animateOnRelease = false; const firstChipElem = firstChip.chipArea.nativeElement; const secondChipElem = secondChip.chipArea.nativeElement; @@ -361,12 +361,12 @@ describe('IgxChipsArea', () => { return fix.whenStable(); }).then(() => { fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointermove', secondChip.dragDir['dragGhost'], firstChipX, firstChipY); + UIInteractions.simulatePointerEvent('pointermove', secondChip.dragDirective['dragGhost'], firstChipX, firstChipY); fix.detectChanges(); return fix.whenRenderingDone(); }).then(() => { - UIInteractions.simulatePointerEvent('pointerup', secondChip.dragDir['dragGhost'], firstChipX, firstChipY); + UIInteractions.simulatePointerEvent('pointerup', secondChip.dragDirective['dragGhost'], firstChipX, firstChipY); return fix.whenRenderingDone(); }).then(() => { setTimeout(() => { @@ -746,7 +746,7 @@ describe('IgxChipsArea', () => { const secondChip = chipComponents[1].componentInstance; const secondChipElem = secondChip.chipArea.nativeElement; - secondChip.dragDir.animateOnRelease = false; + secondChip.dragDirective.animateOnRelease = false; secondChip.chipArea.nativeElement.dispatchEvent(spaceKeyEvent); const startingTop = secondChipElem.getBoundingClientRect().top; @@ -770,7 +770,7 @@ describe('IgxChipsArea', () => { fix.detectChanges(); UIInteractions.simulatePointerEvent( 'pointermove', - secondChip.dragDir['dragGhost'], + secondChip.dragDirective['dragGhost'], startingX + xDragDifference, startingY + yDragDifference ); @@ -779,7 +779,7 @@ describe('IgxChipsArea', () => { UIInteractions.simulatePointerEvent( 'pointerup', - secondChip.dragDir['dragGhost'], + secondChip.dragDirective['dragGhost'], startingX + xDragDifference, startingY + yDragDifference ); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index fd38f983292..6ab9e48366e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -1836,21 +1836,22 @@ describe('IgxGrid - GroupBy', () => { const chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent)); // Disable chip animations chipComponents.forEach((chip) => { - chip.componentInstance.dragDir.animateOnRelease = false; + chip.componentInstance.dragDirective.animateOnRelease = false; }); // Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events. - UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 75, 30); + UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDirective.element.nativeElement, 75, 30); await wait(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30); + UIInteractions.simulatePointerEvent('pointermove', + chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges(); const chipsElems = fix.nativeElement.querySelectorAll('igx-chip'); @@ -1903,22 +1904,24 @@ describe('IgxGrid - GroupBy', () => { let chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent)); // Disable chip animations chipComponents.forEach((chip) => { - chip.componentInstance.dragDir.animateOnRelease = false; + chip.componentInstance.dragDirective.animateOnRelease = false; }); fix.detectChanges(); // Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events. - UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 100, 30); + UIInteractions.simulatePointerEvent('pointerdown', + chipComponents[0].componentInstance.dragDirective.element.nativeElement, 100, 30); await wait(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30); + UIInteractions.simulatePointerEvent('pointermove', + chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges(); @@ -1933,17 +1936,19 @@ describe('IgxGrid - GroupBy', () => { chipComponents = fix.debugElement.queryAll(By.directive(IgxChipComponent)); // Trigger initial pointer events on the element with igxDrag. When the drag begins the dragGhost should receive events. - UIInteractions.simulatePointerEvent('pointerdown', chipComponents[0].componentInstance.dragDir.element.nativeElement, 100, 30); + UIInteractions.simulatePointerEvent('pointerdown', + chipComponents[0].componentInstance.dragDirective.element.nativeElement, 100, 30); await wait(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir.element.nativeElement, 110, 30); + UIInteractions.simulatePointerEvent('pointermove', + chipComponents[0].componentInstance.dragDirective.element.nativeElement, 110, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointermove', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges(); - UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDir['dragGhost'], 250, 30); + UIInteractions.simulatePointerEvent('pointerup', chipComponents[0].componentInstance.dragDirective['dragGhost'], 250, 30); await wait(); fix.detectChanges();