@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/number-field/number-field.ts

@@ -0,0 +1,143 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  Directive,
+  ElementRef,
+  inject,
+  InjectionToken,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { SC_FIELD } from '../field';
+
+// Token for number field context
+export const SC_NUMBER_FIELD = new InjectionToken<ScNumberField>(
+  'SC_NUMBER_FIELD',
+);
+
+@Directive({
+  selector: 'div[sc-number-field], label[sc-number-field]',
+  exportAs: 'scNumberField',
+  providers: [
+    { provide: SC_NUMBER_FIELD, useExisting: ScNumberField },
+    { provide: SC_FIELD, useExisting: ScNumberField },
+  ],
+  host: {
+    '[attr.role]': 'role()',
+    'data-slot': 'number-field',
+    '[attr.data-disabled]': 'disabled() || null',
+  },
+})
+export class ScNumberField {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly id = input(inject(_IdGenerator).getId('sc-number-field-'));
+
+  protected readonly role = computed(() => {
+    const tagName = this.elementRef.nativeElement.tagName;
+    return tagName === 'LABEL' ? null : 'group';
+  });
+  readonly value = model<number | null>(null);
+  readonly min = input<number | null>(null);
+  readonly max = input<number | null>(null);
+  readonly step = input<number>(1);
+  readonly disabled = input<boolean>(false);
+  readonly allowEmpty = input<boolean>(true);
+  readonly scrubSpeed = input<number>(1);
+  readonly formatOptions = input<Intl.NumberFormatOptions>({});
+
+  readonly valueChange = output<number | null>();
+
+  readonly canIncrement = computed(() => {
+    if (this.disabled()) return false;
+    const val = this.value();
+    const max = this.max();
+    if (val === null) return true;
+    if (max === null) return true;
+    return val < max;
+  });
+
+  readonly canDecrement = computed(() => {
+    if (this.disabled()) return false;
+    const val = this.value();
+    const min = this.min();
+    if (val === null) return true;
+    if (min === null) return true;
+    return val > min;
+  });
+
+  increment(): void {
+    if (!this.canIncrement()) return;
+
+    const current = this.value() ?? 0;
+    const step = this.step();
+    const max = this.max();
+    let newValue = current + step;
+
+    if (max !== null && newValue > max) {
+      newValue = max;
+    }
+
+    this.setValue(this.roundToStep(newValue));
+  }
+
+  decrement(): void {
+    if (!this.canDecrement()) return;
+
+    const current = this.value() ?? 0;
+    const step = this.step();
+    const min = this.min();
+    let newValue = current - step;
+
+    if (min !== null && newValue < min) {
+      newValue = min;
+    }
+
+    this.setValue(this.roundToStep(newValue));
+  }
+
+  setValue(value: number | null): void {
+    if (this.disabled()) return;
+
+    if (value === null) {
+      if (this.allowEmpty()) {
+        this.value.set(null);
+        this.valueChange.emit(null);
+      }
+      return;
+    }
+
+    const min = this.min();
+    const max = this.max();
+
+    let clamped = value;
+    if (min !== null && clamped < min) clamped = min;
+    if (max !== null && clamped > max) clamped = max;
+
+    const rounded = this.roundToStep(clamped);
+    this.value.set(rounded);
+    this.valueChange.emit(rounded);
+  }
+
+  formatValue(value: number | null): string {
+    if (value === null) return '';
+    const options = this.formatOptions();
+    if (Object.keys(options).length > 0) {
+      return new Intl.NumberFormat(undefined, options).format(value);
+    }
+    return String(value);
+  }
+
+  private roundToStep(value: number): number {
+    const step = this.step();
+    const decimals = this.getDecimalPlaces(step);
+    return Number(value.toFixed(decimals));
+  }
+
+  private getDecimalPlaces(num: number): number {
+    const str = num.toString();
+    const dotIndex = str.indexOf('.');
+    return dotIndex === -1 ? 0 : str.length - dotIndex - 1;
+  }
+}

package/src/lib/components/opt-field/index.ts

@@ -0,0 +1,7 @@
+export * from './opt-field';
+export * from './opt-field-slot-group';
+export * from './opt-field-slot';
+export * from './opt-field-slot-input';
+export * from './opt-field-slot-caret';
+export * from './opt-field-slot-char';
+export * from './opt-field-separator';

package/src/lib/components/opt-field/opt-field-separator.ts

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-opt-field-separator]',
+  host: {
+    'data-slot': 'opt-field-separator',
+    role: 'separator',
+    '[class]': 'class()',
+  },
+})
+export class ScOptFieldSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center', this.classInput()),
+  );
+}

package/src/lib/components/opt-field/opt-field-slot-caret.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-opt-field-slot-caret]',
+  host: {
+    'data-slot': 'opt-field-slot-caret',
+    '[class]': 'class()',
+  },
+  template: `
+    <div class="h-4 w-px animate-caret-blink bg-foreground"></div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScOptFieldSlotCaret {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'pointer-events-none absolute inset-0 flex items-center justify-center',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/opt-field/opt-field-slot-char.ts

@@ -0,0 +1,19 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'span[sc-opt-field-slot-char]',
+  host: {
+    'data-slot': 'opt-field-slot-char',
+    '[class]': 'class()',
+    '[textContent]': 'char()',
+  },
+})
+export class ScOptFieldSlotChar {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly char = input<string>('');
+
+  protected readonly class = computed(() =>
+    cn('pointer-events-none', this.classInput()),
+  );
+}

package/src/lib/components/opt-field/opt-field-slot-group.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-opt-field-slot-group]',
+  host: {
+    'data-slot': 'opt-field-slot-group',
+    '[class]': 'class()',
+  },
+})
+export class ScOptFieldSlotGroup {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center', this.classInput()),
+  );
+}

package/src/lib/components/opt-field/opt-field-slot-input.ts

@@ -0,0 +1,60 @@
+import {
+  computed,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'input[sc-opt-field-slot-input]',
+  host: {
+    'data-slot': 'opt-field-slot-input',
+    type: 'text',
+    inputmode: 'numeric',
+    autocomplete: 'one-time-code',
+    maxlength: '1',
+    '[value]': 'value()',
+    '[disabled]': 'disabled()',
+    '[class]': 'class()',
+    '(input)': 'onInput($event)',
+    '(keydown)': 'keydownEvent.emit($event)',
+    '(focus)': 'focused.emit(true)',
+    '(blur)': 'focused.emit(false)',
+  },
+})
+export class ScOptFieldSlotInput {
+  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = input<string>('');
+  readonly disabled = input<boolean>(false);
+
+  readonly inputChange = output<string>();
+  readonly keydownEvent = output<KeyboardEvent>();
+  readonly focused = output<boolean>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute inset-0 size-full bg-transparent text-center text-sm outline-none caret-transparent selection:bg-transparent disabled:cursor-not-allowed',
+      this.classInput(),
+    ),
+  );
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
+  }
+
+  protected onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const value = input.value;
+
+    if (value.length > 0) {
+      const char = value.slice(-1);
+      input.value = char;
+      this.inputChange.emit(char);
+    }
+  }
+}

package/src/lib/components/opt-field/opt-field-slot.ts

@@ -0,0 +1,111 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScOptField } from './opt-field';
+import { ScOptFieldSlotInput } from './opt-field-slot-input';
+import { ScOptFieldSlotCaret } from './opt-field-slot-caret';
+import { ScOptFieldSlotChar } from './opt-field-slot-char';
+
+@Component({
+  selector: 'sc-opt-field-slot',
+  imports: [ScOptFieldSlotInput, ScOptFieldSlotCaret, ScOptFieldSlotChar],
+  host: {
+    'data-slot': 'opt-field-slot',
+    '[class]': 'class()',
+    '[attr.data-active]': 'isActive() ? "" : null',
+    '[attr.data-filled]': 'isFilled() ? "" : null',
+  },
+  template: `
+    <input
+      #input
+      sc-opt-field-slot-input
+      [value]="char()"
+      [disabled]="optField.disabled()"
+      (inputChange)="onInputChange($event)"
+      (keydownEvent)="onKeydown($event)"
+      (focused)="onFocusChange($event)"
+    />
+    @if (isActive() && !isFilled()) {
+      <div sc-opt-field-slot-caret></div>
+    }
+    <span sc-opt-field-slot-char [char]="char()"></span>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScOptFieldSlot {
+  readonly optField = inject(ScOptField);
+  private readonly inputComponent = viewChild.required(ScOptFieldSlotInput);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  private readonly index = signal<number>(0);
+  private readonly focused = signal<boolean>(false);
+
+  readonly char = computed(() => this.optField.getChar(this.index()));
+  readonly isActive = computed(
+    () => this.focused() && !this.optField.disabled(),
+  );
+  readonly isFilled = computed(() => this.char() !== '');
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+      this.isActive() && 'z-10 ring-2 ring-ring ring-offset-background',
+      this.classInput(),
+    ),
+  );
+
+  setIndex(idx: number): void {
+    this.index.set(idx);
+  }
+
+  focus(): void {
+    this.inputComponent().focus();
+  }
+
+  protected onFocusChange(isFocused: boolean): void {
+    this.focused.set(isFocused);
+  }
+
+  protected onInputChange(char: string): void {
+    if (this.optField.disabled()) return;
+
+    this.optField.setChar(this.index(), char);
+    // Move to next slot
+    this.optField.focusSlot(this.index() + 1);
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    if (this.optField.disabled()) return;
+
+    if (event.key === 'Backspace') {
+      if (this.char() === '') {
+        // Move to previous slot and clear it
+        const prevIndex = this.index() - 1;
+        if (prevIndex >= 0) {
+          this.optField.setChar(prevIndex, '');
+          this.optField.focusSlot(prevIndex);
+        }
+      } else {
+        // Clear current slot
+        this.optField.setChar(this.index(), '');
+      }
+      event.preventDefault();
+    } else if (event.key === 'ArrowLeft') {
+      this.optField.focusSlot(this.index() - 1);
+      event.preventDefault();
+    } else if (event.key === 'ArrowRight') {
+      this.optField.focusSlot(this.index() + 1);
+      event.preventDefault();
+    }
+  }
+}

package/src/lib/components/opt-field/opt-field.ts

@@ -0,0 +1,113 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  contentChildren,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FIELD } from '../field';
+import { ScOptFieldSlot } from './opt-field-slot';
+
+@Directive({
+  selector: 'div[sc-opt-field], label[sc-opt-field]',
+  providers: [{ provide: SC_FIELD, useExisting: ScOptField }],
+  host: {
+    '[attr.role]': 'role()',
+    'data-slot': 'opt-field',
+    '[class]': 'class()',
+    '(paste)': 'onPaste($event)',
+  },
+})
+export class ScOptField {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly id = input(inject(_IdGenerator).getId('sc-opt-field-'));
+
+  protected readonly role = computed(() => {
+    const tagName = this.elementRef.nativeElement.tagName;
+    return tagName === 'LABEL' ? null : 'group';
+  });
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly value = model<string>('');
+  readonly disabled = input<boolean>(false);
+
+  private readonly slots = contentChildren(ScOptFieldSlot, {
+    descendants: true,
+  });
+
+  readonly maxLength = computed(() => this.slots().length);
+
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-2 has-[:disabled]:opacity-50', this.classInput()),
+  );
+
+  readonly chars = computed(() => {
+    const val = this.value();
+    const max = this.maxLength();
+    const result: string[] = [];
+    for (let i = 0; i < max; i++) {
+      result.push(val[i] || '');
+    }
+    return result;
+  });
+
+  constructor() {
+    effect(() => {
+      const allSlots = this.slots();
+      allSlots.forEach((slot, index) => {
+        slot.setIndex(index);
+      });
+    });
+  }
+
+  getChar(index: number): string {
+    return this.chars()[index] || '';
+  }
+
+  setChar(index: number, char: string): void {
+    const current = this.value();
+    const chars = current.split('');
+
+    // Pad with empty strings if needed
+    while (chars.length < index) {
+      chars.push('');
+    }
+
+    chars[index] = char;
+
+    // Join and trim trailing empty chars
+    let newValue = chars.join('');
+    // Keep only up to maxLength
+    newValue = newValue.slice(0, this.maxLength());
+
+    this.value.set(newValue);
+  }
+
+  focusSlot(index: number): void {
+    const allSlots = this.slots();
+    if (index >= 0 && index < allSlots.length) {
+      allSlots[index].focus();
+    }
+  }
+
+  protected onPaste(event: Event): void {
+    if (this.disabled()) return;
+    if (!(event instanceof ClipboardEvent)) return;
+
+    event.preventDefault();
+    const pastedData = event.clipboardData?.getData('text') || '';
+    const cleanData = pastedData.replace(/\s/g, '').slice(0, this.maxLength());
+
+    if (cleanData) {
+      this.value.set(cleanData);
+      // Focus the slot after the last pasted character or the last slot
+      const focusIndex = Math.min(cleanData.length, this.maxLength() - 1);
+      this.focusSlot(focusIndex);
+    }
+  }
+}