diff --git a/projects/ion/src/lib/chip/chip.component.html b/projects/ion/src/lib/chip/chip.component.html index 9f5c9670e..7cfa2fc77 100644 --- a/projects/ion/src/lib/chip/chip.component.html +++ b/projects/ion/src/lib/chip/chip.component.html @@ -64,5 +64,6 @@ [searchOptions]="dropdownSearchConfig?.searchOptions" (searchChange)="dropdownSearchChange($event)" (selected)="selectDropdownItem($event)" + (clearBadgeValue)="clearBadgeValue()" > diff --git a/projects/ion/src/lib/chip/chip.component.spec.ts b/projects/ion/src/lib/chip/chip.component.spec.ts index 2bba6dd0d..92928e6f9 100644 --- a/projects/ion/src/lib/chip/chip.component.spec.ts +++ b/projects/ion/src/lib/chip/chip.component.spec.ts @@ -234,6 +234,13 @@ describe('With Multiple Dropdown', () => { expect(dropdown).toHaveClass('chip-selected'); }); + it('should clear badge when clear button be clicked', async () => { + fireEvent.click(screen.getByText('dropdown')); + fireEvent.click(screen.getByText(options[0].label)); + fireEvent.click(screen.getByText('Limpar')); + expect(screen.queryAllByTestId('badge-multiple')).toHaveLength(0); + }); + afterEach(() => { dropdownEvent.mockClear(); }); diff --git a/projects/ion/src/lib/chip/chip.component.ts b/projects/ion/src/lib/chip/chip.component.ts index dc2c0f3fc..f1b72021d 100644 --- a/projects/ion/src/lib/chip/chip.component.ts +++ b/projects/ion/src/lib/chip/chip.component.ts @@ -105,11 +105,15 @@ export class ChipComponent implements OnInit, OnChanges { } } + clearBadgeValue(): void { + this.setBadgeValue(0); + } + selectDropdownItem(selecteds: DropdownItem[]): void { this.dropdownEvents.emit(selecteds); if (selecteds && this.multiple) { - this.badge.value = selecteds.length; + this.setBadgeValue(selecteds.length); } if (!this.multiple) { @@ -148,4 +152,8 @@ export class ChipComponent implements OnInit, OnChanges { this.label = selectedOption.label; this.ref.markForCheck(); } + + private setBadgeValue(newValue: number): void { + this.badge = { ...this.badge, value: newValue }; + } }