feat(checkbox): add checkbox samples

projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <ids-checkbox [disabled]="true">Disabled</ids-checkbox>
+  <ids-checkbox [disabled]="true" [checked]="true">Disabled checked</ids-checkbox>
+  <ids-checkbox [readonly]="true" [checked]="true">Readonly</ids-checkbox>
+</div>

projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+  selector: 'app-checkbox-disabled-example',
+  imports: [IdsCheckboxComponent],
+  templateUrl: './checkbox-disabled-example.component.html',
+})
+export class CheckboxDisabledExampleComponent {}

projects/demo/src/app/components-example/checkbox/checkbox-examples.ts

@@ -0,0 +1,109 @@
+import { CheckboxDisabledExampleComponent } from './checkbox-disabled-example/checkbox-disabled-example.component';
+import { CheckboxFormControlExampleComponent } from './checkbox-form-control-example/checkbox-form-control-example.component';
+import { CheckboxFormControlNameExampleComponent } from './checkbox-form-control-name-example/checkbox-form-control-name-example.component';
+import { CheckboxHintExampleComponent } from './checkbox-hint-example/checkbox-hint-example.component';
+import { CheckboxNgModelExampleComponent } from './checkbox-ng-model-example/checkbox-ng-model-example.component';
+import { CheckboxSizeExampleComponent } from './checkbox-size-example/checkbox-size-example.component';
+import { CheckboxStatesExampleComponent } from './checkbox-states-example/checkbox-states-example.component';
+import { CheckboxVariantsExampleComponent } from './checkbox-variants-example/checkbox-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const CHECKBOX_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'checkbox-variants',
+    title: 'EXAMPLES.CHECKBOX.VARIANTS.TITLE',
+    description: 'EXAMPLES.CHECKBOX.VARIANTS.DESCRIPTION',
+    component: CheckboxVariantsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-sizes',
+    title: 'EXAMPLES.CHECKBOX.SIZES.TITLE',
+    description: 'EXAMPLES.CHECKBOX.SIZES.DESCRIPTION',
+    component: CheckboxSizeExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-states',
+    title: 'EXAMPLES.CHECKBOX.STATES.TITLE',
+    description: 'EXAMPLES.CHECKBOX.STATES.DESCRIPTION',
+    component: CheckboxStatesExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-disabled',
+    title: 'EXAMPLES.CHECKBOX.DISABLED.TITLE',
+    description: 'EXAMPLES.CHECKBOX.DISABLED.DESCRIPTION',
+    component: CheckboxDisabledExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-hint',
+    title: 'EXAMPLES.CHECKBOX.HINT.TITLE',
+    description: 'EXAMPLES.CHECKBOX.HINT.DESCRIPTION',
+    component: CheckboxHintExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-ng-model',
+    title: 'EXAMPLES.CHECKBOX.NG_MODEL.TITLE',
+    description: 'EXAMPLES.CHECKBOX.NG_MODEL.DESCRIPTION',
+    component: CheckboxNgModelExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-form-control',
+    title: 'EXAMPLES.CHECKBOX.FORM_CONTROL.TITLE',
+    description: 'EXAMPLES.CHECKBOX.FORM_CONTROL.DESCRIPTION',
+    component: CheckboxFormControlExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'checkbox-form-control-name',
+    title: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.TITLE',
+    description: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.DESCRIPTION',
+    component: CheckboxFormControlNameExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html',
+        TSpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts',
+      },
+    ],
+  },
+];

projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html

@@ -0,0 +1,10 @@
+<form class="flex flex-col gap-ids-container-gap-4" (submit)="onSubmit($event)">
+  <ids-checkbox [formControl]="marketing">I accept the marketing materials</ids-checkbox>
+  <ids-checkbox [formControl]="accepted">
+    I accept the terms and conditions
+    <ids-error-message>
+      <ids-error-def code="required">Terms and conditions is required.</ids-error-def>
+    </ids-error-message>
+  </ids-checkbox>
+  <button type="submit" idsButton>Submit</button>
+</form>

projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+  selector: 'app-checkbox-form-control-example',
+  imports: [
+    IdsButtonComponent,
+    IdsCheckboxComponent,
+    IdsErrorDefinitionDirective,
+    IdsErrorMessageComponent,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './checkbox-form-control-example.component.html',
+})
+export class CheckboxFormControlExampleComponent {
+  public marketing = new FormControl(false);
+  public accepted = new FormControl(false, { validators: [Validators.requiredTrue] });
+
+  public onSubmit(event: Event): void {
+    event.preventDefault();
+    this.accepted.markAsTouched();
+  }
+}

projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html

@@ -0,0 +1,10 @@
+<form class="flex flex-col gap-ids-container-gap-4" [formGroup]="form" (ngSubmit)="onSubmit()">
+  <ids-checkbox formControlName="marketing">I accept the marketing materials</ids-checkbox>
+  <ids-checkbox formControlName="accepted">
+    I accept the terms and conditions
+    <ids-error-message>
+      <ids-error-def code="required">Terms and conditions is required.</ids-error-def>
+    </ids-error-message>
+  </ids-checkbox>
+  <button type="submit" idsButton>Submit</button>
+</form>

projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+  selector: 'app-checkbox-form-control-name-example',
+  imports: [
+    IdsButtonComponent,
+    IdsCheckboxComponent,
+    IdsErrorDefinitionDirective,
+    IdsErrorMessageComponent,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './checkbox-form-control-name-example.component.html',
+})
+export class CheckboxFormControlNameExampleComponent {
+  public form = new FormGroup({
+    marketing: new FormControl(false),
+    accepted: new FormControl(false, { validators: [Validators.requiredTrue] }),
+  });
+
+  public onSubmit(): void {
+    this.form.controls.accepted.markAsTouched();
+  }
+}

projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html

@@ -0,0 +1,4 @@
+<ids-checkbox>
+  I accept the terms and conditions
+  <ids-hint-message>Accept the terms and conditions</ids-hint-message>
+</ids-checkbox>

projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+  selector: 'app-checkbox-hint-example',
+  imports: [
+    IdsCheckboxComponent,
+    IdsHintMessageComponent,
+  ],
+  templateUrl: './checkbox-hint-example.component.html',
+})
+export class CheckboxHintExampleComponent {}

projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html

@@ -0,0 +1,10 @@
+<form class="flex flex-col gap-ids-container-gap-4" (ngSubmit)="onSubmit(acceptedModel)">
+  <ids-checkbox name="marketing" [(ngModel)]="marketing">I accept the marketing materials</ids-checkbox>
+  <ids-checkbox #acceptedModel="ngModel" name="accepted" [required]="true" [(ngModel)]="accepted">
+    I accept the terms and conditions
+    <ids-error-message>
+      <ids-error-def code="required">Terms and conditions is required.</ids-error-def>
+    </ids-error-message>
+  </ids-checkbox>
+  <button type="submit" idsButton>Submit</button>
+</form>

projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormsModule, NgModel } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+  selector: 'app-checkbox-ng-model-example',
+  imports: [
+    FormsModule,
+    IdsButtonComponent,
+    IdsCheckboxComponent,
+    IdsErrorDefinitionDirective,
+    IdsErrorMessageComponent,
+  ],
+  templateUrl: './checkbox-ng-model-example.component.html',
+})
+export class CheckboxNgModelExampleComponent {
+  public marketing = false;
+  public accepted = false;
+
+  public onSubmit(accepted: NgModel): void {
+    accepted.control.markAsTouched();
+  }
+}

projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html

@@ -0,0 +1,6 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <ids-checkbox size="dense">Dense</ids-checkbox>
+  <ids-checkbox size="compact">Compact</ids-checkbox>
+  <ids-checkbox size="comfortable">Comfortable</ids-checkbox>
+  <ids-checkbox size="spacious">Spacious</ids-checkbox>
+</div>

projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+  selector: 'app-checkbox-size-example',
+  imports: [IdsCheckboxComponent],
+  templateUrl: './checkbox-size-example.component.html',
+})
+export class CheckboxSizeExampleComponent {}

projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <ids-checkbox>Unchecked</ids-checkbox>
+  <ids-checkbox [checked]="true">Checked</ids-checkbox>
+  <ids-checkbox [indeterminate]="true">Indeterminate</ids-checkbox>
+</div>

projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+  selector: 'app-checkbox-states-example',
+  imports: [IdsCheckboxComponent],
+  templateUrl: './checkbox-states-example.component.html',
+})
+export class CheckboxStatesExampleComponent {}

projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-ids-container-gap-4">
+  <ids-checkbox variant="surface">Surface</ids-checkbox>
+  <ids-checkbox variant="light">Light</ids-checkbox>
+  <ids-checkbox variant="dark">Dark</ids-checkbox>
+</div>

projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+  selector: 'app-checkbox-variants-example',
+  imports: [IdsCheckboxComponent],
+  templateUrl: './checkbox-variants-example.component.html',
+})
+export class CheckboxVariantsExampleComponent {}

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

@@ -139,3 +139,9 @@ <h2>{{ "COMMON.STANDALONE" | translate }}</h2>
     </app-tryout-controls>
   </div>
 </app-demo-and-code>
+
+<div examples class="flex flex-col gap-6 w-full pt-6 pb-2">
+  @for (example of checkboxExamples; track example.id) {
+    <ids-example-viewer [example]="example" />
+  }
+</div>

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

@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
 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 { CHECKBOX_EXAMPLES } from '../../components-example/checkbox/checkbox-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
 
 import { Component, inject } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -25,6 +27,7 @@ import { TranslateModule } from '@ngx-translate/core';
     DemoAndCodeComponent,
     TryoutControlComponent,
     ControlTableComponent,
+    IdsExampleViewerComponent,
   ],
   templateUrl: './checkbox-demo.component.html',
   styleUrls: [
@@ -34,4 +37,5 @@ import { TranslateModule } from '@ngx-translate/core';
 })
 export class CheckboxDemoComponent {
   protected _checkboxDemoService = inject(CheckboxDemoService);
+  public readonly checkboxExamples = CHECKBOX_EXAMPLES;
 }

projects/demo/src/assets/i18n/en.json

@@ -294,6 +294,40 @@
           "FOOTER_BUTTON": "Learn more"
         }
       }
+    },
+    "CHECKBOX": {
+      "VARIANTS": {
+        "TITLE": "Checkbox variants",
+        "DESCRIPTION": "Checkboxes with different color variants: surface (default), light, and dark."
+      },
+      "SIZES": {
+        "TITLE": "Checkbox sizes",
+        "DESCRIPTION": "Checkboxes with different sizes: dense, compact (default), comfortable and spacious."
+      },
+      "STATES": {
+        "TITLE": "Checkbox states",
+        "DESCRIPTION": "Checkboxes can be unchecked, checked, or indeterminate."
+      },
+      "DISABLED": {
+        "TITLE": "Disabled and readonly",
+        "DESCRIPTION": "Disabled checkboxes cannot be changed. Readonly checkboxes keep their value but are not interactive."
+      },
+      "HINT": {
+        "TITLE": "Checkbox with hint",
+        "DESCRIPTION": "Checkboxes can project a hint message below the label."
+      },
+      "NG_MODEL": {
+        "TITLE": "Checkbox with ngModel",
+        "DESCRIPTION": "Bind checkboxes with Angular template-driven forms using ngModel. Use the required input to add a requiredTrue validator."
+      },
+      "FORM_CONTROL": {
+        "TITLE": "Checkbox with FormControl",
+        "DESCRIPTION": "Bind checkboxes with Angular reactive forms using FormControl. Use Validators.requiredTrue for a required checkbox."
+      },
+      "FORM_CONTROL_NAME": {
+        "TITLE": "Checkbox with formControlName",
+        "DESCRIPTION": "Bind checkboxes inside a FormGroup using formControlName. Use Validators.requiredTrue on the control; the required input cannot be used with formControlName."
+      }
     }
   }
 }