input

1import { computed, Directive, input } from '@angular/core'
2 
3import { cn } from '~/lib/utils'
4 
5export type InputType
6  = | 'date'
7    | 'datetime-local'
8    | 'email'
9    | 'month'
10    | 'number'
11    | 'password'
12    | 'tel'
13    | 'file'
14    | 'search'
15    | 'text'
16 
17@Directive({
18  selector: '[ubInput]',
19  standalone: true,
20  host: {
21    '[class]': 'computedClass()',
22    '[type]': 'type()',
23  },
24})
25export class UbInputDirective<Type extends InputType> {
26  readonly type = input.required<Type>()
27  readonly class = input<string>()
28 
29  protected computedClass = computed(() =>
30    cn(
31      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
32      this.class(),
33    ),
34  )
35}