diff --git a/projects/ion/src/lib/chip-group/chip-group.component.html b/projects/ion/src/lib/chip-group/chip-group.component.html index 6416fe4f0..acc67fc0f 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.html +++ b/projects/ion/src/lib/chip-group/chip-group.component.html @@ -1,6 +1,7 @@
diff --git a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts index cbdf41ee8..699914af5 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts +++ b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts @@ -106,6 +106,24 @@ describe('ChipGroupComponent', () => { const element = screen.getByTestId('ion-chip'); expect(element).toHaveAttribute('disabled'); }); + + it('should render chip selected and not unselect when group is required', async () => { + const chips = [ + { label: 'Option 1', selected: true }, + { label: 'Option 2', selected: false }, + ]; + + await sut({ + chips, + required: true, + selected: { + emit: selectEvent, + } as SafeAny, + }); + const optionElement = screen.getByTestId(`chip-group-${chips[0].label}`); + fireEvent.click(optionElement); + expect(optionElement).toHaveAttribute('ng-reflect-selected', 'true'); + }); }); describe('With Dropdown', () => { diff --git a/projects/ion/src/lib/chip-group/chip-group.component.ts b/projects/ion/src/lib/chip-group/chip-group.component.ts index 29f1d82d5..34b8d246a 100644 --- a/projects/ion/src/lib/chip-group/chip-group.component.ts +++ b/projects/ion/src/lib/chip-group/chip-group.component.ts @@ -14,29 +14,55 @@ import { DropdownItem } from '../core/types/dropdown'; styleUrls: ['./chip-group.component.scss'], }) export class IonChipGroupComponent { - @Input() chips: ChipInGroup[]; + @Input() chips: ChipInGroup[] = []; @Input() size?: ChipSize = 'sm'; @Input() infoBadge?: IonChipProps['infoBadge']; @Input() iconPosition?: IconDirection = 'left'; @Input() rightBadge?: RightBadge; @Input() disabled = false; @Input() multiple = false; + @Input() required = false; @Output() selected? = new EventEmitter(); @Output() dropdown? = new EventEmitter(); selectChip(chipSelected: ChipInGroup): void { - if (chipSelected.multiple && chipSelected.selected) { + const isChipSelectedOrMultiple = + chipSelected.multiple && chipSelected.selected; + if (isChipSelectedOrMultiple) { return; } + + chipSelected = this.setChip(chipSelected); + + this.selected.emit(chipSelected); + } + + setChip(chipSelected: ChipInGroup): ChipInGroup { const isChipSelected = chipSelected.selected; + if (!this.multiple) { this.clearChips(); } - if (!chipSelected.multiple || !isChipSelected) { + + const isSingleOrSelectedChip = !chipSelected.multiple || !isChipSelected; + + if (isSingleOrSelectedChip) { chipSelected.selected = !isChipSelected; } - this.selected.emit(chipSelected); + + if (this.required) { + this.checkRequired(chipSelected); + } + + return chipSelected; + } + + checkRequired(chipSelected: ChipInGroup): void { + const selectedChips = this.chips.filter((chip) => chip.selected); + if (!selectedChips.length) { + chipSelected.selected = true; + } } dropdownEvents(options: DropdownItem[]): void { diff --git a/projects/ion/src/lib/chip/chip.component.ts b/projects/ion/src/lib/chip/chip.component.ts index a8324bd77..dc3797d00 100644 --- a/projects/ion/src/lib/chip/chip.component.ts +++ b/projects/ion/src/lib/chip/chip.component.ts @@ -70,6 +70,9 @@ export class ChipComponent implements OnInit, AfterViewInit, DoCheck { @Input() showToggle = false; @Input() required = false; + @Input() chipGroup = false; + @Input() chipGroupRequired = false; + @Output() events = new EventEmitter(); @Output() dropdownEvents = new EventEmitter(); @Output() dropdownSearchEvents = new EventEmitter(); @@ -88,9 +91,14 @@ export class ChipComponent implements OnInit, AfterViewInit, DoCheck { select(): void { this.toggleDropdown(); - if (!this.options) { + + if ( + (!this.options && this.chipGroup && !this.chipGroupRequired) || + !this.chipGroup + ) { this.selected = !this.selected; } + this.events.emit({ selected: this.selected, disabled: this.disabled, diff --git a/projects/ion/src/lib/core/types/chip-group.ts b/projects/ion/src/lib/core/types/chip-group.ts index beee6689e..49fdcf2e9 100644 --- a/projects/ion/src/lib/core/types/chip-group.ts +++ b/projects/ion/src/lib/core/types/chip-group.ts @@ -9,6 +9,7 @@ export interface ChipGroupProps { disabled?: boolean; size?: ChipSize; multiple?: boolean; + required?: boolean; events?: EventEmitter; selected?: EventEmitter; } diff --git a/stories/ChipGroup.stories.ts b/stories/ChipGroup.stories.ts index 0bafe1c5e..d41dc1d96 100644 --- a/stories/ChipGroup.stories.ts +++ b/stories/ChipGroup.stories.ts @@ -64,6 +64,22 @@ SelectedByDefault.args = { ], }; +export const RequiredSelected = Template.bind({}); +RequiredSelected.args = { + chips: [ + { + label: 'Chip 1', + selected: true, + }, + { + label: 'Chip 2', + selected: false, + }, + ], + required: true, + multiple: false, +}; + export const Multiple = Template.bind({}); Multiple.args = { chips,