feat: add required to chip group #734

projects/ion/src/lib/chip-group/chip-group.component.html

@@ -1,6 +1,7 @@
 <div data-testid="ion-chip-group" class="chip-group">
   <ion-chip
     *ngFor="let chip of chips; index as i"
+    [chipGroupRequired]="required"
     [label]="chip.label"
     [disabled]="chip.disabled || disabled"
     [selected]="chip.selected"
@@ -14,5 +15,7 @@
     [rightBadge]="chip.rightBadge || rightBadge"
     (click)="selectChip(chip)"
     (dropdownEvents)="dropdownEvents($event)"
+    [attr.data-testid]="'chip-group-' + chip.label"
+    [chipGroup]="true"
   ></ion-chip>
 </div>

projects/ion/src/lib/chip-group/chip-group.component.spec.ts

@@ -106,6 +106,25 @@ 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}`);
+    expect(optionElement).toBeInTheDocument();
+    fireEvent.click(optionElement);
+    expect(optionElement).toHaveAttribute('ng-reflect-selected', 'true');
+  });
 });
 
 describe('With Dropdown', () => {

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<ChipInGroup>();
   @Output() dropdown? = new EventEmitter<DropdownItem[]>();
 
   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 {

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<ChipEvent>();
   @Output() dropdownEvents = new EventEmitter<DropdownItem[]>();
   @Output() dropdownSearchEvents = new EventEmitter<string>();
@@ -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,

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<ChipEvent>;
   selected?: EventEmitter<ChipInGroup>;
 }

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,