diff --git a/docs/components-api/inputotp.md b/docs/components-api/inputotp.md index fee99841..d8c4be01 100644 --- a/docs/components-api/inputotp.md +++ b/docs/components-api/inputotp.md @@ -9,6 +9,7 @@ | `length` | количество полей ввода | `number` | | `mask` | скрывать введённое значение (как пароль) | `boolean` | | `integerOnly` | допускать только цифры | `boolean` | +| `autofocus` | автофокус на первой ячейке при инициализации | `boolean` | | `size` | размер ячейки | `small \| base \| large` | # События diff --git a/src/lib/components/inputotp/inputotp.component.ts b/src/lib/components/inputotp/inputotp.component.ts index d5fdacb1..68757bee 100644 --- a/src/lib/components/inputotp/inputotp.component.ts +++ b/src/lib/components/inputotp/inputotp.component.ts @@ -40,6 +40,7 @@ export interface ExtraInputOtpChangeEvent { [length]="length" [mask]="mask" [integerOnly]="integerOnly" + [autofocus]="autofocus" [size]="primeSize" [disabled]="disabled" [invalid]="invalid" @@ -59,6 +60,8 @@ export class ExtraInputOtpComponent implements ControlValueAccessor, OnInit { @Input() length = 4; @Input() mask = false; @Input() integerOnly = false; + /** Автофокус на первой ячейке при инициализации. */ + @Input() autofocus = false; /** Размер ячейки. */ @Input() size: ExtraInputOtpSize = 'base'; diff --git a/src/lib/components/inputotp/inputotp.figma.md b/src/lib/components/inputotp/inputotp.figma.md index e96ef56e..2acb63d5 100644 --- a/src/lib/components/inputotp/inputotp.figma.md +++ b/src/lib/components/inputotp/inputotp.figma.md @@ -26,6 +26,7 @@ updated: '2026-06-22' | `length` | `number` | `4` | Количество ячеек кода — соответствует числу элементов `` в Figma | | `mask` | `boolean` | `false` | Маскирование введённых символов (как пароль) | | `integerOnly` | `boolean` | `false` | Разрешает вводить только цифры | +| `autofocus` | `boolean` | `false` | Автофокус на первой ячейке при инициализации (не имеет отражения в Figma) | | `(onChange)` | `EventEmitter` | — | Событие изменения значения кода | | `[(ngModel)]` / `[formControl]` | `string` | `null` | Значение кода через ControlValueAccessor | @@ -85,6 +86,19 @@ Figma: ``, mask=true, state=default > ``` +### Автофокус (autofocus) + +Figma: отражения не имеет — поведенческое свойство. + +```html + +``` + ### Disabled (отключённое поле) Figma: ``, state=disabled diff --git a/src/stories/components/inputotp/examples/inputotp-autofocus.component.ts b/src/stories/components/inputotp/examples/inputotp-autofocus.component.ts new file mode 100644 index 00000000..c9ae7c5f --- /dev/null +++ b/src/stories/components/inputotp/examples/inputotp-autofocus.component.ts @@ -0,0 +1,48 @@ +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { StoryObj } from '@storybook/angular'; +import { ExtraInputOtpComponent } from '../../../../lib/components/inputotp/inputotp.component'; + +export const Autofocus: StoryObj = { + name: 'Autofocus', + render: (args) => { + const control = new FormControl(null); + return { + props: { ...args, control }, + template: `` + }; + }, + decorators: [ + (story: any) => ({ + ...story(), + moduleMetadata: { + imports: [ExtraInputOtpComponent, ReactiveFormsModule] + } + }) + ], + parameters: { + controls: { disable: true }, + docs: { + description: { + story: + 'Автофокус на первой ячейке при инициализации.' + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { ExtraInputOtpComponent } from '@cdek-it/angular-ui-kit'; + +@Component({ + standalone: true, + imports: [ExtraInputOtpComponent, ReactiveFormsModule], + template: \`\`, +}) +export class AutofocusExample { + control = new FormControl(null); +} + ` + } + } + } +}; diff --git a/src/stories/components/inputotp/inputotp.stories.ts b/src/stories/components/inputotp/inputotp.stories.ts index 63c82f35..1da0910f 100644 --- a/src/stories/components/inputotp/inputotp.stories.ts +++ b/src/stories/components/inputotp/inputotp.stories.ts @@ -5,6 +5,7 @@ import { Disabled } from './examples/inputotp-disabled.component'; import { Invalid } from './examples/inputotp-invalid.component'; import { Mask } from './examples/inputotp-mask.component'; import { IntegerOnly } from './examples/inputotp-integeronly.component'; +import { Autofocus } from './examples/inputotp-autofocus.component'; type InputOtpArgs = ExtraInputOtpComponent; @@ -62,6 +63,15 @@ import { ExtraInputOtpComponent } from '@cdek-it/angular-ui-kit'; type: { summary: 'boolean' } } }, + autofocus: { + control: 'boolean', + description: 'Автофокус на первой ячейке при инициализации', + table: { + category: 'Свойства', + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' } + } + }, size: { control: 'select', options: ['small', 'base', 'large'], @@ -107,6 +117,7 @@ import { ExtraInputOtpComponent } from '@cdek-it/angular-ui-kit'; length: 4, mask: false, integerOnly: false, + autofocus: false, size: 'base', disabled: false, invalid: false @@ -125,6 +136,7 @@ export const Default: Story = { if (args.length !== 4) parts.push(`[length]="${args.length}"`); if (args.mask) parts.push(`[mask]="true"`); if (args.integerOnly) parts.push(`[integerOnly]="true"`); + if (args.autofocus) parts.push(`[autofocus]="true"`); if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`); const validators = args.invalid ? [() => ({ invalid: true })] : []; @@ -145,4 +157,4 @@ export const Default: Story = { }; // ── Комбинаторные истории ────────────────────────────────────────────────── -export { Disabled, Invalid, Mask, IntegerOnly }; +export { Disabled, Invalid, Mask, IntegerOnly, Autofocus };