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,