input-otp

1import {
2  type AfterContentInit,
3  afterNextRender,
4  booleanAttribute,
5  ChangeDetectionStrategy,
6  Component,
7  computed,
8  contentChildren,
9  type ElementRef,
10  forwardRef,
11  inject,
12  Injector,
13  input,
14  output,
15  signal,
16  ViewEncapsulation,
17  viewChildren,
18} from '@angular/core';
19import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
20 
21import type { ClassValue } from 'clsx';
22 
23import { mergeClasses } from '@/shared/utils/merge-classes';
24 
25import { ZARD_INPUT_OTP_SLOT, type ZardInputOtpSlotApi } from './input-otp.tokens';
26import { isInputElement, isInputEvent } from './input-otp.utils';
27import { inputOtpSlotVariants, inputOtpVariants, type ZardInputOtpSize } from './input-otp.variants';
28 
29type OnTouchedType = () => void;
30type OnChangeType = (value: string) => void;
31 
32@Component({
33  selector: 'z-input-otp, [z-input-otp]',
34  template: `
35    <div [class]="classes()" [attr.data-input-otp-container]="''">
36      @if (!hasSlots()) {
37        @for (i of range(); track i) {
38          <input
39            #otpInput
40            type="text"
41            [value]="tokens()[i - 1] || ''"
42            [attr.maxlength]="1"
43            [attr.inputmode]="inputMode()"
44            [attr.autocomplete]="'one-time-code'"
45            [attr.aria-label]="ariaLabel(i)"
46            [attr.aria-invalid]="zInvalid() ? 'true' : null"
47            [attr.data-active]="allSelected() ? '' : null"
48            [disabled]="disabled()"
49            [readonly]="zReadonly()"
50            [class]="slotClasses(i - 1)"
51            (input)="onInput($event, i - 1)"
52            (focus)="onInputFocus($event, i - 1)"
53            (blur)="onInputBlur()"
54            (paste)="onPaste($event)"
55            (keydown)="onKeyDown($event)"
56          />
57        }
58      }
59      <ng-content />
60    </div>
61  `,
62  providers: [
63    {
64      provide: NG_VALUE_ACCESSOR,
65      useExisting: forwardRef(() => ZardInputOtpComponent),
66      multi: true,
67    },
68  ],
69  changeDetection: ChangeDetectionStrategy.OnPush,
70  encapsulation: ViewEncapsulation.None,
71  host: {
72    '[attr.data-slot]': '"input-otp"',
73    '[attr.data-disabled]': 'disabled() ? "" : null',
74    '(copy)': 'onCopy($event)',
75    '(cut)': 'onCut($event)',
76    '(mousedown)': 'clearSelectAll()',
77  },
78})
79export class ZardInputOtpComponent implements ControlValueAccessor, AfterContentInit {
80  readonly inputs = viewChildren<ElementRef<HTMLInputElement>>('otpInput');
81 
82  readonly zMaxLength = input<number | undefined>(undefined);
83// … truncated