feat(checkbox): Separate the checkbox group from the checkbox into a separate component

projects/demo/src/app/app.routes.ts

@@ -7,6 +7,7 @@ import { BreadcrumbDemoService } from './pages/breadcrumb/breadcrumb-demo.servic
 import { ButtonDemoService } from './pages/button/button-demo.service';
 import { CardDemoService } from './pages/card/card-demo.service';
 import { CheckboxDemoService } from './pages/checkbox/checkbox-demo.service';
+import { CheckboxGroupDemoService } from './pages/checkbox-group/checkbox-group-demo.service';
 import { ChipDemoService } from './pages/chip/chip-demo.service';
 import { ComponentDetailsComponent } from './pages/components/component-details/component-details.component';
 import { DatepickerDemoService } from './pages/datepicker/datepicker-demo.service';
@@ -49,6 +50,8 @@ const DEMO_IMPORTS: Record<string, () => Promise<Type<unknown>>> = {
   button: () => import('./pages/button/button-demo.component').then((module) => module.ButtonDemoComponent),
   card: () => import('./pages/card/card-demo.component').then((module) => module.CardDemoComponent),
   checkbox: () => import('./pages/checkbox/checkbox-demo.component').then((module) => module.CheckboxDemoComponent),
+  'checkbox-group': () =>
+    import('./pages/checkbox-group/checkbox-group-demo.component').then((module) => module.CheckboxGroupDemoComponent),
   chip: () => import('./pages/chip/chip-demo.component').then((module) => module.ChipDemoComponent),
   'date-picker': () => import('./pages/datepicker/datepicker-demo.component').then((module) => module.DatepickerDemoComponent),
   dialog: () => import('./pages/dialog/dialog-demo.component').then((module) => module.DialogDemoComponent),
@@ -138,6 +141,7 @@ export const routes: Routes = [
           buildComponentRoute('button', ButtonDemoService),
           buildComponentRoute('card', CardDemoService),
           buildComponentRoute('checkbox', CheckboxDemoService),
+          buildComponentRoute('checkbox-group', CheckboxGroupDemoService),
           buildComponentRoute('chip', ChipDemoService),
           buildComponentRoute('date-picker', DatepickerDemoService),
           buildComponentRoute('dialog', DialogDemoService),

projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.html

@@ -0,0 +1,122 @@
+<app-demo-and-code (resetDemo)="_checkboxGroupDemoService.reset()">
+  <div demo class="w-full h-full flex justify-center items-center">
+    <app-tryout
+      [title]="'COMPONENTS.CHECKBOX_GROUP' | translate"
+      [hasDarkBackground]="_checkboxGroupDemoService.model.variant === 'light'"
+      (resetted)="_checkboxGroupDemoService.reset()"
+    >
+      <ng-container component>
+        <div component class="checkbox-grid">
+          <div class="checkbox-item">
+            <h2>{{ "COMMON.GROUPED" | translate }}</h2>
+            <ids-checkbox-group
+              [label]="_checkboxGroupDemoService.model.groupLabel"
+              [allowParent]="_checkboxGroupDemoService.model.allowParent"
+              [parentLabel]="_checkboxGroupDemoService.model.parentLabel"
+              [size]="_checkboxGroupDemoService.model.size"
+              [variant]="_checkboxGroupDemoService.model.variant"
+              [orientation]="_checkboxGroupDemoService.model.orientation"
+              [showAsterisk]="_checkboxGroupDemoService.model.showAsterisk"
+            >
+              @if (_checkboxGroupDemoService.helperModel.allowHint) {
+                <ids-hint-message>Select at least two todos</ids-hint-message>
+              }
+              <ids-checkbox
+                [required]="_checkboxGroupDemoService.model.showAsterisk"
+                [(ngModel)]="_checkboxGroupDemoService.group.toothBrushing"
+              >
+                Tooth brushing
+              </ids-checkbox>
+              <ids-checkbox [required]="_checkboxGroupDemoService.model.showAsterisk" [(ngModel)]="_checkboxGroupDemoService.group.bath">
+                Bath
+              </ids-checkbox>
+              <ids-checkbox [required]="_checkboxGroupDemoService.model.showAsterisk" [(ngModel)]="_checkboxGroupDemoService.group.sleep">
+                Sleep
+              </ids-checkbox>
+
+              @if (_checkboxGroupDemoService.model.showAsterisk) {
+                <ids-error-message>
+                  {{ "FORM_FIELD.ERROR.REQUIRED" | translate: { fieldName: "Options" } }}
+                </ids-error-message>
+              }
+            </ids-checkbox-group>
+          </div>
+          <div class="checkbox-item">
+            <h2>{{ "CHECKBOX.GROUPED_WITH_VALIDATOR" | translate }}</h2>
+            <form [formGroup]="_checkboxGroupDemoService.formGroup">
+              <div formGroupName="toppings">
+                <ids-checkbox-group
+                  [label]="_checkboxGroupDemoService.model.groupLabel"
+                  [allowParent]="_checkboxGroupDemoService.model.allowParent"
+                  [parentLabel]="_checkboxGroupDemoService.model.parentLabel"
+                  [size]="_checkboxGroupDemoService.model.size"
+                  [variant]="_checkboxGroupDemoService.model.variant"
+                  [orientation]="_checkboxGroupDemoService.model.orientation"
+                  [showAsterisk]="_checkboxGroupDemoService.model.showAsterisk"
+                >
+                  @if (_checkboxGroupDemoService.helperModel.allowHint) {
+                    <ids-hint-message>Select at least two toppings</ids-hint-message>
+                  }
+                  <ids-checkbox formControlName="cheese">Cheese</ids-checkbox>
+                  <ids-checkbox formControlName="ham">Ham</ids-checkbox>
+                  <ids-checkbox formControlName="corn">Corn</ids-checkbox>
+                  <ids-checkbox formControlName="mushrooms">Mushrooms</ids-checkbox>
+                  <ids-error-message>
+                    <ids-error-def code="minimumCountSelected">
+                      {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 2 } }}</ids-error-def
+                    >
+                  </ids-error-message>
+                </ids-checkbox-group>
+              </div>
+              <div formGroupName="cheeses">
+                <ids-checkbox-group
+                  [label]="_checkboxGroupDemoService.model.groupLabel"
+                  [allowParent]="_checkboxGroupDemoService.model.allowParent"
+                  [parentLabel]="_checkboxGroupDemoService.model.parentLabel"
+                  [size]="_checkboxGroupDemoService.model.size"
+                  [variant]="_checkboxGroupDemoService.model.variant"
+                  [orientation]="_checkboxGroupDemoService.model.orientation"
+                  [showAsterisk]="_checkboxGroupDemoService.model.showAsterisk"
+                >
+                  @if (_checkboxGroupDemoService.helperModel.allowHint) {
+                    <ids-hint-message>Select at least one cheese</ids-hint-message>
+                  }
+                  <ids-checkbox formControlName="cheddar">Cheddar</ids-checkbox>
+                  <ids-checkbox formControlName="mozzarella">Mozzarella</ids-checkbox>
+                  <ids-checkbox formControlName="parmesan">Parmesan</ids-checkbox>
+                  <ids-error-message>
+                    <ids-error-def code="minimumCountSelected">
+                      {{ "CHECKBOX.ERROR.MINIMUM_COUNT_SELECTED" | translate: { minimumCount: 1 } }}</ids-error-def
+                    >
+                  </ids-error-message>
+                </ids-checkbox-group>
+              </div>
+            </form>
+          </div>
+        </div>
+      </ng-container>
+    </app-tryout>
+  </div>
+
+  <div controls class="h-full">
+    <app-tryout-controls>
+      <app-control-table
+        controls
+        controlName="Checkbox group"
+        configType="input"
+        [controlConfig]="_checkboxGroupDemoService.groupInputControlConfig"
+        [(model)]="_checkboxGroupDemoService.model"
+        (resetted)="_checkboxGroupDemoService.reset()"
+      />
+
+      <app-control-table
+        controls
+        controlName="Checkbox group"
+        configType="helper"
+        [controlConfig]="_checkboxGroupDemoService.helperControlConfig"
+        [(model)]="_checkboxGroupDemoService.helperModel"
+        (resetted)="_checkboxGroupDemoService.reset()"
+      />
+    </app-tryout-controls>
+  </div>
+</app-demo-and-code>

projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.scss

@@ -0,0 +1,21 @@
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    line-height: 1.5;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.checkbox-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.component.ts

@@ -0,0 +1,38 @@
+import { CheckboxGroupDemoService } from './checkbox-group-demo.service';
+
+import { ControlTableComponent } from '../../components/control-table/control-table.component';
+import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
+import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
+import { TryoutComponent } from '../../components/tryout/tryout.component';
+
+import { Component, inject } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IdsCheckboxComponent, IdsCheckboxGroupComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent, IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-checkbox-group-demo',
+  imports: [
+    TryoutComponent,
+    IdsCheckboxComponent,
+    IdsCheckboxGroupComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IdsHintMessageComponent,
+    IdsErrorMessageComponent,
+    IdsErrorDefinitionDirective,
+    TranslateModule,
+    DemoAndCodeComponent,
+    TryoutControlComponent,
+    ControlTableComponent,
+  ],
+  templateUrl: './checkbox-group-demo.component.html',
+  styleUrls: [
+    '../demo-page.scss',
+    './checkbox-group-demo.component.scss',
+  ],
+})
+export class CheckboxGroupDemoComponent {
+  protected _checkboxGroupDemoService = inject(CheckboxGroupDemoService);
+}

projects/demo/src/app/pages/checkbox-group/checkbox-group-demo.service.ts

@@ -0,0 +1,158 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { DemoControl, DemoControlConfig } from '@demo-types/demo-control.type';
+import { DemoMethodConfig } from '@demo-types/demo-method.type';
+import { convertEnumToStringArray } from '@demo-utils/convert-enum-to-string-array';
+import { getDefaultFromDemoConfig } from '@demo-utils/get-defaults-from-demo-config';
+import { IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY, IdsCheckboxVariant, IdsCheckboxVariantType } from '@i-cell/ids-angular/checkbox';
+import { IdsOrientation, IdsOrientationType, IdsSize, IdsSizeType } from '@i-cell/ids-angular/core';
+
+const defaultGroupConfig = IDS_CHECKBOX_GROUP_DEFAULT_CONFIG_FACTORY();
+
+type CheckboxGroupInputControls = {
+  groupLabel: string;
+  allowParent: boolean;
+  parentLabel: string;
+  size: IdsSizeType;
+  variant: IdsCheckboxVariantType;
+  orientation: IdsOrientationType;
+  showAsterisk: boolean;
+};
+
+type CheckboxGroupHelperControls = {
+  allowHint: boolean;
+};
+
+@Injectable()
+export class CheckboxGroupDemoService {
+  public formGroup = new FormGroup({
+    toppings: new FormGroup(
+      {
+        cheese: new FormControl(false, []),
+        ham: new FormControl(false, []),
+        corn: new FormControl(false, []),
+        mushrooms: new FormControl(false, []),
+      },
+      { validators: this._minimumCountSelectedValidator(2) },
+    ),
+    cheeses: new FormGroup(
+      {
+        cheddar: new FormControl(false, []),
+        mozzarella: new FormControl(false, []),
+        parmesan: new FormControl(false, []),
+      },
+      { validators: this._minimumCountSelectedValidator(1) },
+    ),
+  });
+
+  private _minimumCountSelectedValidator(minimumCount: number): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const group = control as FormGroup;
+
+      const checkedCount = Object.values(group.controls).filter((control) => control.value === true).length;
+
+      return checkedCount >= minimumCount ? null : { minimumCountSelected: true };
+    };
+  }
+
+  public readonly groupInputControlConfig: DemoControlConfig<CheckboxGroupInputControls> = {
+    groupLabel: {
+      description: 'Checkbox group\'s label.',
+      type: 'string',
+      default: '-',
+      demoDefault: 'Options',
+    },
+    allowParent: {
+      description: 'Whether to allow parent checkbox or not.',
+      type: 'boolean',
+      default: defaultGroupConfig.allowParent,
+      control: DemoControl.SWITCH,
+    },
+    parentLabel: {
+      description: 'Parent checkbox label.',
+      type: 'string',
+      default: '-',
+      demoDefault: 'Parent options',
+    },
+    size: {
+      description: 'Checkbox group size.',
+      type: 'IdsSizeType',
+      default: defaultGroupConfig.size,
+      control: DemoControl.SELECT,
+      list: convertEnumToStringArray(IdsSize),
+    },
+    variant: {
+      description: 'Checkbox group variant.',
+      type: 'IdsCheckboxVariantType',
+      default: defaultGroupConfig.variant,
+      control: DemoControl.SELECT,
+      list: convertEnumToStringArray(IdsCheckboxVariant),
+    },
+    orientation: {
+      description: 'Checkbox group variant.',
+      type: 'IdsOrientationType',
+      default: defaultGroupConfig.orientation,
+      control: DemoControl.SELECT,
+      list: convertEnumToStringArray(IdsOrientation),
+    },
+    showAsterisk: {
+      description: 'Whether to show an asterisk before to the checkbox group label or not. IMPORTANT: This is only for display purposes.',
+      type: 'boolean',
+      default: false,
+      control: DemoControl.SWITCH,
+    },
+  };
+
+  public readonly helperControlConfig: DemoControlConfig<CheckboxGroupHelperControls> = {
+    allowHint: {
+      description: 'Allow hint message',
+      type: 'boolean',
+      default: true,
+      control: DemoControl.SWITCH,
+    },
+  };
+
+  public readonly methodControlConfig: DemoMethodConfig = [
+    {
+      name: 'selectAllChild()',
+      description: 'Selects all child checkboxes in the checkbox-group.',
+      returnType: 'void',
+    },
+    {
+      name: 'deselectAllChild()',
+      description: 'Deselects all child checkboxes in the checkbox-group.',
+      returnType: 'void',
+    },
+  ];
+
+  public defaults = getDefaultFromDemoConfig<CheckboxGroupInputControls>(this.groupInputControlConfig);
+  public helperDefaults = getDefaultFromDemoConfig<CheckboxGroupHelperControls>(this.helperControlConfig);
+
+  public model: CheckboxGroupInputControls = { ...this.defaults };
+  public helperModel: CheckboxGroupHelperControls = { ...this.helperDefaults };
+
+  public group = {
+    toothBrushing: true,
+    bath: true,
+    sleep: false,
+  };
+
+  public reset(): void {
+    this.model = { ...this.defaults };
+    this.helperModel = { ...this.helperDefaults };
+
+    this.group = {
+      toothBrushing: true,
+      bath: true,
+      sleep: false,
+    };
+  }
+
+  public getMethodConfig(): DemoMethodConfig[] {
+    return [this.methodControlConfig];
+  }
+
+  public getApiConfig(): DemoControlConfig<unknown>[] {
+    return [this.groupInputControlConfig];
+  }
+}