@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,143 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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);
-    }
-  }
-}