sn-checkbox-x 0.0.1

package/README.md

@@ -0,0 +1,189 @@
+# sn-checkbox
+
+A customizable and accessible checkbox component for Angular applications.
+
+## Overview
+
+The `sn-checkbox` component provides a modern, styled checkbox input with support for:
+
+- ✅ Standard checked/unchecked states
+- ✅ Indeterminate state (for multi-select patterns)
+- ✅ Disabled state
+- ✅ Custom labels
+- ✅ Form control integration (ControlValueAccessor)
+- ✅ Full accessibility support (ARIA labels)
+- ✅ Keyboard navigation
+
+## Installation
+
+```bash
+npm install sn-checkbox
+```
+
+## Usage
+
+### Basic Checkbox
+
+```typescript
+import { Component } from '@angular/core';
+import { SnCheckboxComponent } from 'sn-checkbox';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+    <sn-checkbox 
+      id="agree"
+      label="I agree to the terms"
+      (changed)="onChecked($event)"
+    ></sn-checkbox>
+  `,
+  imports: [SnCheckboxComponent]
+})
+export class DemoComponent {
+  onChecked(value: boolean): void {
+    console.log('Checkbox value:', value);
+  }
+}
+```
+
+### With Reactive Forms
+
+```typescript
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { SnCheckboxComponent } from 'sn-checkbox';
+
+@Component({
+  selector: 'app-form',
+  template: `
+    <form [formGroup]="form">
+      <sn-checkbox 
+        id="newsletter"
+        label="Subscribe to newsletter"
+        formControlName="newsletter"
+      ></sn-checkbox>
+    </form>
+  `,
+  imports: [SnCheckboxComponent, ReactiveFormsModule]
+})
+export class FormComponent {
+  form: FormGroup;
+
+  constructor(fb: FormBuilder) {
+    this.form = fb.group({
+      newsletter: [false]
+    });
+  }
+}
+```
+
+### With Template Forms
+
+```typescript
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { SnCheckboxComponent } from 'sn-checkbox';
+
+@Component({
+  selector: 'app-template-form',
+  template: `
+    <sn-checkbox 
+      id="terms"
+      [(ngModel)]="accepted"
+      label="I accept"
+    ></sn-checkbox>
+  `,
+  imports: [SnCheckboxComponent, FormsModule]
+})
+export class TemplateFormComponent {
+  accepted: boolean = false;
+}
+```
+
+### Indeterminate State
+
+```typescript
+<sn-checkbox 
+  id="select-all"
+  [indeterminate]="someSelected && !allSelected"
+  [checked]="allSelected"
+  label="Select All"
+></sn-checkbox>
+```
+
+### Disabled State
+
+```typescript
+<sn-checkbox 
+  id="disabled-check"
+  [disabled]="true"
+  label="Disabled checkbox"
+></sn-checkbox>
+```
+
+## API
+
+### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `id` | `string` | `''` | HTML id attribute for the checkbox |
+| `label` | `string` | `''` | Label text displayed next to the checkbox |
+| `name` | `string` | `''` | HTML name attribute for the checkbox |
+| `disabled` | `boolean` | `false` | Whether the checkbox is disabled |
+| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `changed` | `EventEmitter<boolean>` | Emitted when checkbox state changes |
+
+### Methods
+
+The component implements `ControlValueAccessor` for seamless integration with Angular forms.
+
+## Styling
+
+The component uses Tailwind CSS for styling. It includes:
+
+- Blue color scheme (customizable via CSS variables)
+- Smooth transitions and hover effects
+- Focus states with shadow effects
+- Disabled state styling
+- Dark and light mode compatible
+
+## Testing
+
+```bash
+ng test sn-checkbox
+```
+
+## Building
+
+```bash
+ng build sn-checkbox
+```
+
+## Accessibility
+
+The component includes:
+
+- Proper ARIA labels for screen readers
+- Keyboard navigation support
+- Focus indicators
+- Semantic HTML structure
+- Support for indeterminate state indication
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sn-checkbox",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "sn-checkbox-x",
+  "version": "0.0.1",
+  "description": "Angular checkbox component with indeterminate state support - SnUI Library",
+  "author": {
+    "name": "Swapnil Nakate",
+    "email": "nakate.swapnil7@gmail.com",
+    "url": "https://swapnilnakate.in"
+  },
+  "keywords": [
+    "checkbox",
+    "angular",
+    "form-control",
+    "indeterminate",
+    "tailwindcss",
+    "accessible",
+    "aria",
+    "snui"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/swapnilnakate7/sn-ui/issues",
+    "email": "nakate.swapnil7@gmail.com"
+  },
+  "repository": {
+    "url": "https://github.com/swapnilnakate7/sn-ui",
+    "type": "git",
+    "directory": "projects/sn-checkbox"
+  },
+  "license": "MIT"
+}

package/src/lib/sn-checkbox-x.html

@@ -0,0 +1,20 @@
+<div class="sn-checkbox-wrapper">
+  <input
+    type="checkbox"
+    class="sn-checkbox-input"
+    [id]="id"
+    [name]="name"
+    [checked]="checked"
+    [disabled]="disabled"
+    [indeterminate]="indeterminate"
+    (change)="onCheckboxChange($event)"
+    (blur)="onBlur()"
+    aria-role="checkbox"
+    [attr.aria-checked]="indeterminate ? 'mixed' : checked"
+    [attr.aria-label]="label"
+  />
+  <label class="sn-checkbox-label" [attr.for]="id" *ngIf="label">
+    {{ label }}
+  </label>
+</div>
+

package/src/lib/sn-checkbox-x.scss

@@ -0,0 +1,96 @@
+.sn-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  user-select: none;
+}
+
+.sn-checkbox-input {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  appearance: none;
+  border: 2px solid #d1d5db;
+  border-radius: 0.375rem;
+  background-color: #ffffff;
+  transition: all 0.2s ease-in-out;
+
+  &:hover:not(:disabled):not(:checked) {
+    border-color: #3b82f6;
+    background-color: #f0f9ff;
+  }
+
+  &:checked {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    position: relative;
+
+    &:hover:not(:disabled) {
+      background-color: #2563eb;
+    }
+
+    &::after {
+      content: '✓';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 0.875rem;
+      font-weight: bold;
+    }
+  }
+
+  &:indeterminate {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    position: relative;
+
+    &::after {
+      content: '−';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      font-size: 1rem;
+      font-weight: bold;
+    }
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: #f3f4f6;
+    border-color: #e5e7eb;
+  }
+
+  &:disabled:checked {
+    background-color: #9ca3af;
+    border-color: #9ca3af;
+  }
+}
+
+.sn-checkbox-label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: #374151;
+  transition: color 0.2s ease-in-out;
+
+  .sn-checkbox-input:disabled ~ & {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    color: #1f2937;
+  }
+}
+

package/src/lib/sn-checkbox-x.spec.ts

@@ -0,0 +1,96 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnCheckboxXComponent } from './sn-checkbox-x';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('SnCheckboxXComponent', () => {
+  let component: SnCheckboxXComponent;
+  let fixture: ComponentFixture<SnCheckboxXComponent>;
+  let inputElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnCheckboxXComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnCheckboxXComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle checkbox value on change', () => {
+    const spy = jasmine.createSpy('onChange');
+    component.registerOnChange(spy);
+
+    inputElement.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.checked).toBe(true);
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('should emit changed event on checkbox change', () => {
+    const spy = spyOn(component.changed, 'emit');
+
+    inputElement.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(spy).toHaveBeenCalledWith(true);
+  });
+
+  it('should update checked value from writeValue', () => {
+    component.writeValue(true);
+    fixture.detectChanges();
+
+    expect(component.checked).toBe(true);
+  });
+
+  it('should handle disabled state', () => {
+    component.setDisabledState(true);
+    fixture.detectChanges();
+
+    expect(component.disabled).toBe(true);
+    expect(inputElement.nativeElement.disabled).toBe(true);
+  });
+
+  it('should set indeterminate state', () => {
+    component.indeterminate = true;
+    fixture.detectChanges();
+
+    expect(inputElement.nativeElement.indeterminate).toBe(true);
+  });
+
+  it('should clear indeterminate state on checkbox change', () => {
+    component.indeterminate = true;
+    inputElement.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(component.indeterminate).toBe(false);
+  });
+
+  it('should display label when provided', () => {
+    component.label = 'Accept Terms';
+    component.id = 'accept-terms';
+    fixture.detectChanges();
+
+    const labelElement = fixture.debugElement.query(By.css('label'));
+    expect(labelElement).toBeTruthy();
+    expect(labelElement.nativeElement.textContent).toContain('Accept Terms');
+    expect(labelElement.nativeElement.getAttribute('for')).toBe('accept-terms');
+  });
+
+  it('should call onTouched on blur', () => {
+    const spy = jasmine.createSpy('onTouched');
+    component.registerOnTouched(spy);
+
+    inputElement.nativeElement.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/src/lib/sn-checkbox-x.ts

@@ -0,0 +1,59 @@
+import { Component, Input, Output, EventEmitter, forwardRef, booleanAttribute } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'sn-checkbox-x',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './sn-checkbox-x.html',
+  styleUrl: './sn-checkbox-x.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SnCheckboxXComponent),
+      multi: true,
+    },
+  ],
+})
+export class SnCheckboxXComponent implements ControlValueAccessor {
+  @Input() id: string = '';
+  @Input() label: string = '';
+  @Input() name: string = '';
+  @Input({ transform: booleanAttribute }) disabled: boolean = false;
+  @Input({ transform: booleanAttribute }) indeterminate: boolean = false;
+  @Output() changed = new EventEmitter<boolean>();
+
+  checked: boolean = false;
+  private onChange: (value: boolean) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  onCheckboxChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.checked = target.checked;
+    this.indeterminate = false;
+    this.onChange(this.checked);
+    this.changed.emit(this.checked);
+  }
+
+  onBlur(): void {
+    this.onTouched();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: boolean): void {
+    this.checked = value ?? false;
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of sn-checkbox-x
+ */
+
+export * from './lib/sn-checkbox-x';

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}