Checkbox

import { Component } from '@angular/core';
import { NdIcon } from '@ndop/core';
import { Checkbox, CheckboxIndicator } from '@/ui/checkbox/checkbox';
import { Label } from '@/ui/label/label';

/** A disabled checkbox, checked and unchecked, with dimmed labels. */
@Component({
  selector: 'example-checkbox-disabled',
  imports: [Checkbox, CheckboxIndicator, Label, NdIcon],
  template: `
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-3">
        <button ndCheckbox id="checkbox-disabled-off" disabled>
          <span ndCheckboxIndicator><svg ndIcon="check"></svg></span>
        </button>
        <label ndLabel for="checkbox-disabled-off">Sync contacts</label>
      </div>
      <div class="flex items-center gap-3">
        <button
          ndCheckbox
          id="checkbox-disabled-on"
          disabled
          [defaultChecked]="true"
        >
          <span ndCheckboxIndicator><svg ndIcon="check"></svg></span>
        </button>
        <label ndLabel for="checkbox-disabled-on">Required by your plan</label>
      </div>
    </div>
  `,
})
export class CheckboxDisabledExample {}

import { Component, computed, signal } from '@angular/core';
import { NdIcon } from '@ndop/core';
import { Checkbox, CheckboxIndicator } from '@/ui/checkbox/checkbox';
import { Label } from '@/ui/label/label';

/**
 * A select-all checkbox: checked when every item is, mixed when some are,
 * and checking or clearing them all when activated.
 */
@Component({
  selector: 'example-checkbox-indeterminate',
  imports: [Checkbox, CheckboxIndicator, Label, NdIcon],
  template: `
    <fieldset class="flex flex-col gap-3">
      <legend class="sr-only">Email me about</legend>
      <div class="flex items-center gap-3">
        <button
          ndCheckbox
          id="checkbox-indeterminate-all"
          [checked]="allChecked()"
          [indeterminate]="someChecked()"
          (checkedChange)="setAll($event)"
        >
          <span ndCheckboxIndicator>
            <svg [ndIcon]="someChecked() ? 'minus' : 'check'"></svg>
          </span>
        </button>
        <label ndLabel for="checkbox-indeterminate-all">All updates</label>
      </div>
      @for (topic of topics(); track topic.id) {
        <div class="flex items-center gap-3 ps-7">
          <button
            ndCheckbox
            [id]="'checkbox-indeterminate-' + topic.id"
            [checked]="topic.checked"
            (checkedChange)="set(topic.id, $event)"
          >
            <span ndCheckboxIndicator><svg ndIcon="check"></svg></span>
          </button>
          <label ndLabel [for]="'checkbox-indeterminate-' + topic.id">
            {{ topic.label }}
          </label>
        </div>
      }
    </fieldset>
  `,
})
export class CheckboxIndeterminateExample {
  protected readonly topics = signal([
    { id: 'product', label: 'Product news', checked: true },
    { id: 'events', label: 'Events near me', checked: false },
    { id: 'tips', label: 'Tips and tutorials', checked: false },
  ]);

  protected readonly allChecked = computed(() =>
    this.topics().every((topic) => topic.checked),
  );

  protected readonly someChecked = computed(
    () => !this.allChecked() && this.topics().some((topic) => topic.checked),
  );

  /**
   * Checks or clears one topic.
   *
   * @param id - The topic.
   * @param checked - Its new state.
   */
  protected set(id: string, checked: boolean): void {
    this.topics.update((topics) =>
      topics.map((topic) => (topic.id === id ? { ...topic, checked } : topic)),
    );
  }

  /**
   * Checks or clears every topic.
   *
   * @param checked - The new state.
   */
  protected setAll(checked: boolean): void {
    this.topics.update((topics) =>
      topics.map((topic) => ({ ...topic, checked })),
    );
  }
}

import { Component, signal } from '@angular/core';
import { form, FormField, required } from '@angular/forms/signals';
import { NdIcon } from '@ndop/core';
import { Button } from '@/ui/button/button';
import { Checkbox, CheckboxIndicator } from '@/ui/checkbox/checkbox';
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldLabel,
} from '@/ui/form-field/form-field';

/**
 * A terms checkbox that must be checked to continue, in a Signal Forms
 * form: its error shows once the box has been left unchecked, or the form
 * was submitted.
 */
@Component({
  selector: 'example-checkbox-form',
  imports: [
    Button,
    Checkbox,
    CheckboxIndicator,
    Field,
    FieldContent,
    FieldDescription,
    FieldError,
    FieldLabel,
    FormField,
    NdIcon,
  ],
  template: `
    <form class="flex max-w-sm flex-col gap-6" (submit)="submit($event)">
      <div ndField orientation="horizontal">
        <button ndCheckbox id="checkbox-form-terms" [formField]="signup.terms">
          <span ndCheckboxIndicator><svg ndIcon="check"></svg></span>
        </button>
        <div ndFieldContent>
          <label ndFieldLabel for="checkbox-form-terms">
            I agree to the terms of service
          </label>
          <p ndFieldDescription>Read them before you sign up.</p>
          <p ndFieldError>Agree to the terms to create your account.</p>
        </div>
      </div>
      <button ndButton type="submit" class="self-start">Create account</button>
    </form>
  `,
})
export class CheckboxFormExample {
  protected readonly model = signal({ terms: false });

  protected readonly signup = form(this.model, (path) => {
    required(path.terms);
  });

  /**
   * Marks the fields touched, so errors show, instead of reloading.
   *
   * @param event - The form's submit event.
   */
  protected submit(event: Event): void {
    event.preventDefault();
    this.signup().markAsTouched();
  }
}