sn-toggle 0.0.1

package/ng-package.json

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

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "sn-toggle",
+  "version": "0.0.1",
+  "description": "SnToggle is an Angular 21 standalone toggle switch component",
+  "author": {
+    "name": "Swapnil Nakate",
+    "email": "nakate.swapnil7@gmail.com",
+    "url": "https://swapnilnakate.in"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.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-toggle"
+  },
+  "license": "MIT"
+}

package/src/lib/sn-toggle.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SnToggleComponent } from './sn-toggle.component';
+
+describe('SnToggleComponent', () => {
+  let component: SnToggleComponent;
+  let fixture: ComponentFixture<SnToggleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SnToggleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SnToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should default checked to false', () => {
+    expect(component.checked).toBeFalse();
+  });
+
+  it('should default disabled to false', () => {
+    expect(component.disabled).toBeFalse();
+  });
+
+  it('should default scheme to "primary"', () => {
+    expect(component.scheme).toBe('primary');
+  });
+
+  it('should emit toggled with new value when onChange is called', () => {
+    let emittedValue: boolean | undefined;
+    component.toggled.subscribe((v: boolean) => (emittedValue = v));
+    const mockEvent = { target: { checked: true } } as unknown as Event;
+    component.onChange(mockEvent);
+    expect(component.checked).toBeTrue();
+    expect(emittedValue).toBeTrue();
+  });
+});

package/src/lib/sn-toggle.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';
+import { CommonModule, NgClass } from '@angular/common';
+
+@Component({
+  selector: 'sn-toggle',
+  standalone: true,
+  imports: [CommonModule, NgClass],
+  templateUrl: './sn-toggle.html',
+  styleUrl: 'sn-toggle.scss',
+})
+export class SnToggleComponent {
+  @Input({ transform: booleanAttribute }) checked: boolean = false;
+  @Input({ transform: booleanAttribute }) disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() scheme: string = 'primary';
+  @Output() toggled = new EventEmitter<boolean>();
+
+  private static _idCounter = 0;
+  readonly inputId = `sn-toggle-${++SnToggleComponent._idCounter}`;
+
+  onChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.checked = input.checked;
+    this.toggled.emit(this.checked);
+  }
+}

package/src/lib/sn-toggle.html

@@ -0,0 +1,18 @@
+<div class="sn-toggle-wrapper">
+  <input
+    type="checkbox"
+    class="sn-toggle-input"
+    [id]="inputId"
+    [checked]="checked"
+    [disabled]="disabled"
+    (change)="onChange($event)"
+  />
+  <label [htmlFor]="inputId" class="sn-toggle-label" [ngClass]="'scheme-' + scheme">
+    <span class="sn-toggle-track">
+      <span class="sn-toggle-thumb"></span>
+    </span>
+    @if (label) {
+      <span class="sn-toggle-text">{{ label }}</span>
+    }
+  </label>
+</div>

package/src/lib/sn-toggle.scss

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sn-toggle-wrapper {
+  @apply inline-flex items-center gap-2;
+}
+
+.sn-toggle-input {
+  @apply sr-only;
+}
+
+.sn-toggle-label {
+  @apply inline-flex items-center gap-2 cursor-pointer select-none;
+
+  &[class*="scheme-"] .sn-toggle-track { background-color: #d1d5db; }
+}
+
+.sn-toggle-track {
+  @apply relative inline-flex items-center w-10 h-6 rounded-full transition-colors duration-200;
+  background-color: #d1d5db;
+}
+
+.sn-toggle-thumb {
+  @apply absolute left-1 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200;
+}
+
+.sn-toggle-text {
+  @apply text-sm text-gray-700;
+}
+
+/* Move thumb when checked */
+.sn-toggle-input:checked + .sn-toggle-label .sn-toggle-thumb {
+  transform: translateX(1rem);
+}
+
+/* Scheme colours when checked */
+.sn-toggle-input:checked + .sn-toggle-label.scheme-primary .sn-toggle-track  { @apply bg-blue-500; }
+.sn-toggle-input:checked + .sn-toggle-label.scheme-warn    .sn-toggle-track  { @apply bg-yellow-500; }
+.sn-toggle-input:checked + .sn-toggle-label.scheme-danger  .sn-toggle-track  { @apply bg-red-500; }
+.sn-toggle-input:checked + .sn-toggle-label.scheme-success .sn-toggle-track  { @apply bg-green-500; }
+.sn-toggle-input:checked + .sn-toggle-label.scheme-default .sn-toggle-track  { @apply bg-gray-500; }
+
+/* Disabled state */
+.sn-toggle-input:disabled + .sn-toggle-label {
+  @apply opacity-50 cursor-not-allowed;
+}

package/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/sn-toggle.component';

package/tsconfig.lib.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}