extra-input-otp: добавлен autofocus

docs/components-api/inputotp.md

@@ -9,6 +9,7 @@
 | `length`       | количество полей ввода                   | `number`                 |
 | `mask`         | скрывать введённое значение (как пароль) | `boolean`                |
 | `integerOnly`  | допускать только цифры                   | `boolean`                |
+| `autofocus`    | автофокус на первой ячейке при инициализации | `boolean`            |
 | `size`         | размер ячейки                            | `small \| base \| large` |
 
 # События

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';
 

src/lib/components/inputotp/inputotp.figma.md

@@ -26,6 +26,7 @@ updated: '2026-06-22'
 | `length` | `number` | `4` | Количество ячеек кода — соответствует числу элементов `<InputOtp.Item>` в Figma |
 | `mask` | `boolean` | `false` | Маскирование введённых символов (как пароль) |
 | `integerOnly` | `boolean` | `false` | Разрешает вводить только цифры |
+| `autofocus` | `boolean` | `false` | Автофокус на первой ячейке при инициализации (не имеет отражения в Figma) |
 | `(onChange)` | `EventEmitter<ExtraInputOtpChangeEvent>` | — | Событие изменения значения кода |
 | `[(ngModel)]` / `[formControl]` | `string` | `null` | Значение кода через ControlValueAccessor |
 
@@ -85,6 +86,19 @@ Figma: `<InputOtp>`, mask=true, state=default
 ></extra-input-otp>
 ```
 
+### Автофокус (autofocus)
+
+Figma: отражения не имеет — поведенческое свойство.
+
+```html
+<extra-input-otp
+  [length]="6"
+  [autofocus]="true"
+  [(ngModel)]="smsCode"
+  name="smsCode"
+></extra-input-otp>
+```
+
 ### Disabled (отключённое поле)
 
 Figma: `<InputOtp>`, state=disabled

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<string | null>(null);
+    return {
+      props: { ...args, control },
+      template: `<extra-input-otp [autofocus]="true" [formControl]="control"></extra-input-otp>`
+    };
+  },
+  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: \`<extra-input-otp [autofocus]="true" [formControl]="control"></extra-input-otp>\`,
+})
+export class AutofocusExample {
+  control = new FormControl<string | null>(null);
+}
+        `
+      }
+    }
+  }
+};

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 };