@sonny-ui/core 0.1.0-alpha.15 → 0.1.0-alpha.17

package/src/lib/tag-input/tag-input.component.spec.ts

@@ -0,0 +1,190 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyTagInputComponent } from './tag-input.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyTagInputComponent],
+  template: `
+    <sny-tag-input
+      [(value)]="tags"
+      [maxTags]="maxTags()"
+      [allowDuplicates]="allowDuplicates()"
+      [disabled]="disabled()"
+      [validate]="validateFn()"
+      (tagAdded)="lastAdded = $event"
+      (tagRemoved)="lastRemoved = $event"
+    />
+  `,
+})
+class TestHost {
+  tags = signal<string[]>([]);
+  maxTags = signal<number | null>(null);
+  allowDuplicates = signal(false);
+  disabled = signal(false);
+  validateFn = signal<((t: string) => boolean) | null>(null);
+  lastAdded: string | null = null;
+  lastRemoved: string | null = null;
+}
+
+describe('SnyTagInputComponent', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getInput(): HTMLInputElement {
+    return el.querySelector('input') as HTMLInputElement;
+  }
+
+  function getTags(): string[] {
+    return Array.from(el.querySelectorAll('span')).map((s) => s.textContent?.trim().replace('×', '').trim() ?? '');
+  }
+
+  function typeAndEnter(text: string): void {
+    const input = getInput();
+    input.value = text;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+  }
+
+  it('should render empty with placeholder', () => {
+    expect(getInput().placeholder).toBe('Add tag...');
+  });
+
+  it('should add tag on Enter', () => {
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags()).toContain('Angular');
+    expect(fixture.componentInstance.lastAdded).toBe('Angular');
+  });
+
+  it('should add tag on comma', () => {
+    const input = getInput();
+    input.value = 'React,';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('React');
+  });
+
+  it('should reject duplicates when allowDuplicates=false', () => {
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(1);
+  });
+
+  it('should allow duplicates when allowDuplicates=true', () => {
+    fixture.componentInstance.allowDuplicates.set(true);
+    fixture.detectChanges();
+    typeAndEnter('Angular');
+    typeAndEnter('Angular');
+    expect(fixture.componentInstance.tags().filter((t) => t === 'Angular').length).toBe(2);
+  });
+
+  it('should respect maxTags', () => {
+    fixture.componentInstance.maxTags.set(2);
+    fixture.detectChanges();
+    typeAndEnter('A');
+    typeAndEnter('B');
+    // Input should be hidden now (atMax), so we can't type more
+    const input = el.querySelector('input');
+    expect(input).toBeNull(); // hidden when at max
+    expect(fixture.componentInstance.tags().length).toBe(2);
+  });
+
+  it('should validate with custom function', () => {
+    fixture.componentInstance.validateFn.set((t: string) => t.length >= 3);
+    fixture.detectChanges();
+    typeAndEnter('AB');
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    typeAndEnter('ABC');
+    expect(fixture.componentInstance.tags()).toContain('ABC');
+  });
+
+  it('should remove tag on X click', () => {
+    typeAndEnter('Angular');
+    fixture.detectChanges();
+    const removeBtn = el.querySelector('[aria-label="Remove Angular"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags().length).toBe(0);
+    expect(fixture.componentInstance.lastRemoved).toBe('Angular');
+  });
+
+  it('should remove last tag on Backspace with empty input', () => {
+    typeAndEnter('A');
+    typeAndEnter('B');
+    const input = getInput();
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Backspace', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toEqual(['A']);
+  });
+
+  it('should add tag on blur when addOnBlur=true', () => {
+    const input = getInput();
+    input.value = 'BlurTag';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('blur', { bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.tags()).toContain('BlurTag');
+  });
+
+  it('should disable when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it('should emit tagAdded and tagRemoved', () => {
+    typeAndEnter('Test');
+    expect(fixture.componentInstance.lastAdded).toBe('Test');
+    const removeBtn = el.querySelector('[aria-label="Remove Test"]') as HTMLButtonElement;
+    removeBtn.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.lastRemoved).toBe('Test');
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyTagInputComponent],
+  template: `<sny-tag-input [formControl]="ctrl" />`,
+})
+class ReactiveHost {
+  ctrl = new FormControl<string[]>([]);
+}
+
+describe('SnyTagInputComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveHost);
+    fixture.detectChanges();
+  });
+
+  it('should populate tags from FormControl', () => {
+    fixture.componentInstance.ctrl.setValue(['A', 'B', 'C']);
+    fixture.detectChanges();
+    const tags = fixture.nativeElement.querySelectorAll('span');
+    expect(tags.length).toBe(3);
+  });
+
+  it('should update FormControl when tag added', () => {
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = 'New';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toContain('New');
+  });
+});

package/src/lib/tag-input/tag-input.component.ts

@@ -0,0 +1,173 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  forwardRef,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';
+
+@Component({
+  selector: 'sny-tag-input',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyTagInputComponent), multi: true },
+  ],
+  template: `
+    <div [class]="containerClass()" (click)="focusInput()">
+      @for (tag of value(); track tag; let i = $index) {
+        <span [class]="tagClass()">
+          {{ tag }}
+          @if (removable() && !isDisabled()) {
+            <button
+              type="button"
+              class="hover:text-destructive transition-colors leading-none"
+              (click)="removeTag(i); $event.stopPropagation()"
+              [attr.aria-label]="'Remove ' + tag"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          }
+        </span>
+      }
+      @if (!atMax()) {
+        <input
+          #inputEl
+          type="text"
+          class="flex-1 min-w-[80px] outline-none bg-transparent"
+          [placeholder]="value().length === 0 ? placeholder() : ''"
+          [disabled]="isDisabled()"
+          [value]="inputValue()"
+          (input)="onInput($event)"
+          (keydown)="onKeydown($event)"
+          (blur)="onBlur()"
+          [attr.aria-label]="'Add tag'"
+        />
+      }
+    </div>
+  `,
+})
+export class SnyTagInputComponent implements ControlValueAccessor {
+  readonly value = model<string[]>([]);
+  readonly placeholder = input('Add tag...');
+  readonly maxTags = input<number | null>(null);
+  readonly allowDuplicates = input(false);
+  readonly removable = input(true);
+  readonly addOnBlur = input(true);
+  readonly separators = input<string[]>(['Enter', ',']);
+  readonly validate = input<((tag: string) => boolean) | null>(null);
+  readonly disabled = input(false);
+  readonly size = input<TagInputSize>('md');
+  readonly class = input<string>('');
+
+  readonly tagAdded = output<string>();
+  readonly tagRemoved = output<string>();
+
+  readonly inputValue = signal('');
+  private readonly _disabledByCva = signal(false);
+  readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+  readonly atMax = computed(() => this.maxTags() !== null && this.value().length >= this.maxTags()!);
+
+  readonly containerClass = computed(() =>
+    cn(tagInputContainerVariants({ size: this.size() }), this.isDisabled() && 'opacity-50 cursor-not-allowed', this.class())
+  );
+
+  readonly tagClass = computed(() =>
+    cn(tagVariants({ size: this.size() }), 'bg-secondary text-secondary-foreground')
+  );
+
+  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');
+
+  private _onChange: (value: string[]) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  writeValue(val: string[]): void {
+    this.value.set(val ?? []);
+  }
+
+  registerOnChange(fn: (value: string[]) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  focusInput(): void {
+    this.inputRef()?.nativeElement.focus();
+  }
+
+  onInput(event: Event): void {
+    const val = (event.target as HTMLInputElement).value;
+    // Check if separator character was typed (e.g. comma)
+    const seps = this.separators().filter((s) => s.length === 1);
+    for (const sep of seps) {
+      if (val.includes(sep)) {
+        const parts = val.split(sep);
+        for (const part of parts) {
+          this.addTag(part);
+        }
+        this.inputValue.set('');
+        return;
+      }
+    }
+    this.inputValue.set(val);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (this.separators().includes(event.key) && event.key !== ',') {
+      event.preventDefault();
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+      return;
+    }
+
+    if (event.key === 'Backspace' && this.inputValue() === '') {
+      const tags = this.value();
+      if (tags.length > 0) {
+        this.removeTag(tags.length - 1);
+      }
+    }
+  }
+
+  onBlur(): void {
+    if (this.addOnBlur() && this.inputValue().trim()) {
+      this.addTag(this.inputValue());
+      this.inputValue.set('');
+    }
+    this._onTouched();
+  }
+
+  addTag(raw: string): void {
+    const tag = raw.trim();
+    if (!tag) return;
+    if (this.atMax()) return;
+    if (!this.allowDuplicates() && this.value().includes(tag)) return;
+
+    const validateFn = this.validate();
+    if (validateFn && !validateFn(tag)) return;
+
+    this.value.update((tags) => [...tags, tag]);
+    this._onChange(this.value());
+    this.tagAdded.emit(tag);
+  }
+
+  removeTag(index: number): void {
+    const removed = this.value()[index];
+    this.value.update((tags) => tags.filter((_, i) => i !== index));
+    this._onChange(this.value());
+    this.tagRemoved.emit(removed);
+  }
+}

package/src/lib/tag-input/tag-input.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const tagInputContainerVariants = cva(
+  'flex flex-wrap gap-1.5 border border-border rounded-md bg-background px-2 cursor-text transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'min-h-[36px] py-1 text-xs',
+        md: 'min-h-[40px] py-1.5 text-sm',
+        lg: 'min-h-[44px] py-2 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-md font-medium',
+  {
+    variants: {
+      size: {
+        sm: 'px-1.5 py-0.5 text-xs',
+        md: 'px-2 py-0.5 text-sm',
+        lg: 'px-2.5 py-1 text-sm',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type TagInputSize = 'sm' | 'md' | 'lg';