@frame-ui-ng/components 0.1.0-beta.0

package/fesm2022/frame-ui-ng-components-input-otp.mjs

@@ -0,0 +1,327 @@
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, input, numberAttribute, booleanAttribute, output, signal, computed, ViewChild, ChangeDetectionStrategy, Component, Directive, inject, NgModule } from '@angular/core';
+import { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';
+import { FrInput } from '@frame-ui-ng/components/input';
+
+const FR_INPUT_OTP_PATTERN_DIGITS = /^[0-9]$/;
+const FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS = /^[a-zA-Z0-9]$/;
+const FR_INPUT_OTP_CONTROLLER = new InjectionToken('FrInputOtpController');
+class FrInputOtp extends FrControlValueAccessor {
+    nativeInput;
+    maxLength = input(6, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    pattern = input(FR_INPUT_OTP_PATTERN_DIGITS, ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'invalid', transform: booleanAttribute });
+    ariaLabel = input('One-time password', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    complete = output();
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = computed(() => this.invalidInput() || this.formInvalid(), ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    isComplete = computed(() => this.value().length >= this.maxLength(), ...(ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []));
+    focus(index = this.activeIndex()) {
+        if (this.disabled()) {
+            return;
+        }
+        const inputElement = this.nativeInput?.nativeElement;
+        if (!inputElement) {
+            return;
+        }
+        const nextIndex = clamp(index, 0, this.maxLength());
+        inputElement.focus();
+        inputElement.setSelectionRange(nextIndex, nextIndex);
+        this.activeIndex.set(nextIndex);
+    }
+    charAt(index) {
+        return this.value().at(index) ?? '';
+    }
+    handleNativeInput(rawValue) {
+        this.commitValue(this.sanitize(rawValue));
+        this.syncActiveIndex();
+    }
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.focus(this.activeIndex() - 1);
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this.focus(this.activeIndex() + 1);
+            return;
+        }
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            this.removeAt(this.activeIndex());
+            return;
+        }
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            this.insertAt(event.key, this.activeIndex());
+        }
+    }
+    handlePaste(event) {
+        const text = event.clipboardData?.getData('text') ?? '';
+        if (!text) {
+            return;
+        }
+        event.preventDefault();
+        const next = this.replaceFrom(this.activeIndex(), this.sanitize(text));
+        this.commitValue(next);
+        this.focus(Math.min(next.length, this.maxLength()));
+    }
+    syncActiveIndex() {
+        const inputElement = this.nativeInput?.nativeElement;
+        const index = inputElement?.selectionStart ?? this.value().length;
+        this.activeIndex.set(clamp(index, 0, this.maxLength()));
+    }
+    markTouched() {
+        this.markAsTouched();
+    }
+    setViewValue(value) {
+        this.value.set(this.sanitize(value ?? ''));
+        this.activeIndex.set(Math.min(this.value().length, this.maxLength()));
+    }
+    insertAt(character, index) {
+        const sanitized = this.sanitize(character);
+        if (!sanitized) {
+            return;
+        }
+        const next = this.replaceFrom(index, sanitized.at(0) ?? '');
+        this.commitValue(next);
+        this.focus(Math.min(index + 1, this.maxLength()));
+    }
+    removeAt(index) {
+        const value = this.value();
+        const targetIndex = value.at(index) ? index : index - 1;
+        if (targetIndex < 0) {
+            return;
+        }
+        const next = `${value.slice(0, targetIndex)}${value.slice(targetIndex + 1)}`;
+        this.commitValue(next);
+        this.focus(targetIndex);
+    }
+    replaceFrom(index, text) {
+        const value = this.value();
+        const start = clamp(index, 0, this.maxLength());
+        const next = `${value.slice(0, start)}${text}${value.slice(start + text.length)}`;
+        return this.sanitize(next);
+    }
+    commitValue(value) {
+        const next = this.sanitize(value);
+        this.value.set(next);
+        this.notifyValueChange(next);
+        this.valueChange.emit(next);
+        if (next.length >= this.maxLength()) {
+            this.complete.emit(next);
+        }
+    }
+    sanitize(value) {
+        const matcher = toMatcher(this.pattern());
+        const characters = Array.from(value).filter((character) => matcher(character));
+        return characters.slice(0, this.maxLength()).join('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrInputOtp, isStandalone: true, selector: "frame-input-otp", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", complete: "complete" }, host: { attributes: { "role": "group" }, listeners: { "click": "focus(activeIndex())" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "invalid() ? \"\" : null", "attr.data-complete": "isComplete() ? \"\" : null" }, classAttribute: "frame-input-otp" }, providers: [
+            provideDsValueAccessor(FrInputOtp),
+            {
+                provide: FR_INPUT_OTP_CONTROLLER,
+                useExisting: FrInputOtp,
+            },
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], exportAs: ["frInputOtp"], usesInheritance: true, ngImport: i0, template: `
+    <input
+      #nativeInput
+      frInput
+      class="frame-input-otp__native"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [value]="value()"
+      (blur)="markTouched()"
+      (focus)="syncActiveIndex()"
+      (input)="handleNativeInput($any($event.target).value)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+      (select)="syncActiveIndex()"
+      (click)="syncActiveIndex()"
+    />
+
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "directive", type: FrInput, selector: "input[frInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtp, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'frame-input-otp',
+                    exportAs: 'frInputOtp',
+                    imports: [FrInput],
+                    providers: [
+                        provideDsValueAccessor(FrInputOtp),
+                        {
+                            provide: FR_INPUT_OTP_CONTROLLER,
+                            useExisting: FrInputOtp,
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'frame-input-otp',
+                        role: 'group',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-invalid]': 'invalid() ? "" : null',
+                        '[attr.data-complete]': 'isComplete() ? "" : null',
+                        '(click)': 'focus(activeIndex())',
+                    },
+                    template: `
+    <input
+      #nativeInput
+      frInput
+      class="frame-input-otp__native"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-label]="ariaLabel()"
+      [disabled]="disabled()"
+      [maxLength]="maxLength()"
+      [value]="value()"
+      (blur)="markTouched()"
+      (focus)="syncActiveIndex()"
+      (input)="handleNativeInput($any($event.target).value)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+      (select)="syncActiveIndex()"
+      (click)="syncActiveIndex()"
+    />
+
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { nativeInput: [{
+                type: ViewChild,
+                args: ['nativeInput']
+            }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
+class FrInputOtpGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputOtpGroup, isStandalone: true, selector: "[frInputOtpGroup], frame-input-otp-group", host: { classAttribute: "frame-input-otp__group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputOtpGroup], frame-input-otp-group',
+                    host: {
+                        class: 'frame-input-otp__group',
+                    },
+                }]
+        }] });
+class FrInputOtpSlot {
+    root = inject(FR_INPUT_OTP_CONTROLLER);
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    char = computed(() => this.root.charAt(this.index()), ...(ngDevMode ? [{ debugName: "char" }] : /* istanbul ignore next */ []));
+    filled = computed(() => !!this.char(), ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.root.activeIndex() === this.index(), ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: FrInputOtpSlot, isStandalone: true, selector: "[frInputOtpSlot], frame-input-otp-slot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, listeners: { "click": "root.focus(index())" }, properties: { "attr.data-active": "active() ? \"\" : null", "attr.data-filled": "filled() ? \"\" : null", "attr.data-invalid": "root.invalid() ? \"\" : null", "attr.data-disabled": "root.disabled() ? \"\" : null" }, classAttribute: "frame-input-otp__slot" }, ngImport: i0, template: `
+    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
+      {{ char() || placeholder() }}
+    </span>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSlot, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[frInputOtpSlot], frame-input-otp-slot',
+                    imports: [NgClass],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'frame-input-otp__slot',
+                        role: 'presentation',
+                        '[attr.data-active]': 'active() ? "" : null',
+                        '[attr.data-filled]': 'filled() ? "" : null',
+                        '[attr.data-invalid]': 'root.invalid() ? "" : null',
+                        '[attr.data-disabled]': 'root.disabled() ? "" : null',
+                        '(click)': 'root.focus(index())',
+                    },
+                    template: `
+    <span class="frame-input-otp__slot-char" [ngClass]="{ 'frame-input-otp__slot-char--empty': !filled() }">
+      {{ char() || placeholder() }}
+    </span>
+  `,
+                }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+class FrInputOtpSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputOtpSeparator, isStandalone: true, selector: "[frInputOtpSeparator], frame-input-otp-separator", host: { attributes: { "role": "separator", "aria-hidden": "true" }, classAttribute: "frame-input-otp__separator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputOtpSeparator], frame-input-otp-separator',
+                    host: {
+                        class: 'frame-input-otp__separator',
+                        role: 'separator',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+function toMatcher(pattern) {
+    if (!pattern) {
+        return () => true;
+    }
+    if (pattern instanceof RegExp) {
+        return (character) => {
+            pattern.lastIndex = 0;
+            return pattern.test(character);
+        };
+    }
+    const regex = new RegExp(pattern);
+    return (character) => regex.test(character);
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+
+class FrInputOtpModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpModule, imports: [FrInputOtp,
+            FrInputOtpGroup,
+            FrInputOtpSeparator,
+            FrInputOtpSlot], exports: [FrInputOtp,
+            FrInputOtpGroup,
+            FrInputOtpSeparator,
+            FrInputOtpSlot] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputOtpModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrInputOtp,
+                        FrInputOtpGroup,
+                        FrInputOtpSeparator,
+                        FrInputOtpSlot,
+                    ],
+                    exports: [
+                        FrInputOtp,
+                        FrInputOtpGroup,
+                        FrInputOtpSeparator,
+                        FrInputOtpSlot,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FR_INPUT_OTP_PATTERN_DIGITS, FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS, FrInputOtp, FrInputOtpGroup, FrInputOtpModule, FrInputOtpSeparator, FrInputOtpSlot };
+//# sourceMappingURL=frame-ui-ng-components-input-otp.mjs.map

package/fesm2022/frame-ui-ng-components-input-otp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-ui-ng-components-input-otp.mjs","sources":["../../../projects/components/input-otp/src/input-otp.ts","../../../projects/components/input-otp/input-otp.module.ts","../../../projects/components/input-otp/frame-ui-ng-components-input-otp.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  InjectionToken,\n  ViewChild,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  numberAttribute,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { FrControlValueAccessor, provideDsValueAccessor } from '@frame-ui-ng/components/forms';\nimport { FrInput } from '@frame-ui-ng/components/input';\n\nexport const FR_INPUT_OTP_PATTERN_DIGITS = /^[0-9]$/;\nexport const FR_INPUT_OTP_PATTERN_DIGITS_AND_CHARS = /^[a-zA-Z0-9]$/;\n\nexport type FrInputOtpPattern = RegExp | string | null;\n\ntype FrInputOtpController = {\n  activeIndex: () => number;\n  charAt: (index: number) => string;\n  disabled: () => boolean;\n  focus: (index?: number) => void;\n  invalid: () => boolean;\n};\n\nconst FR_INPUT_OTP_CONTROLLER = new InjectionToken<FrInputOtpController>('FrInputOtpController');\n\n@Component({\n  selector: 'frame-input-otp',\n  exportAs: 'frInputOtp',\n  imports: [FrInput],\n  providers: [\n    provideDsValueAccessor(FrInputOtp),\n    {\n      provide: FR_INPUT_OTP_CONTROLLER,\n      useExisting: FrInputOtp,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'frame-input-otp',\n    role: 'group',\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\n    '[attr.data-invalid]': 'invalid() ? \"\" : null',\n    '[attr.data-complete]': 'isComplete() ? \"\" : null',\n    '(click)': 'focus(activeIndex())',\n  },\n  template: `\n    <input\n      #nativeInput\n      frInput\n      class=\"frame-input-otp__native\"\n      type=\"text\"\n      inputmode=\"numeric\"\n      autocomplete=\"one-time-code\"\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [disabled]=\"disabled()\"\n      [maxLength]=\"maxLength()\"\n      [value]=\"value()\"\n      (blur)=\"markTouched()\"\n      (focus)=\"syncActiveIndex()\"\n      (input)=\"handleNativeInput($any($event.target).value)\"\n      (keydown)=\"handleKeydown($event)\"\n      (paste)=\"handlePaste($event)\"\n      (select)=\"syncActiveIndex()\"\n      (click)=\"syncActiveIndex()\"\n    />\n\n    <ng-content />\n  `,\n})\nexport class FrInputOtp extends FrControlValueAccessor<string> {\n  @ViewChild('nativeInput') private readonly nativeInput?: ElementRef<HTMLInputElement>;\n\n  readonly maxLength = input(6, { transform: numberAttribute });\n  readonly pattern = input<FrInputOtpPattern>(FR_INPUT_OTP_PATTERN_DIGITS);\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n  readonly invalidInput = input(false, { alias: 'invalid', transform: booleanAttribute });\n  readonly ariaLabel = input('One-time password');\n\n  readonly valueChange = output<string>();\n  readonly complete = output<string>();\n\n  protected readonly value = signal('');\n  readonly activeIndex = signal(0);\n  readonly disabled = computed(() => this.disabledInput() || this.formDisabled());\n  readonly invalid = computed(() => this.invalidInput() || this.formInvalid());\n  readonly isComplete = computed(() => this.value().length >= this.maxLength());\n\n  focus(index = this.activeIndex()): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    const inputElement = this.nativeInput?.nativeElement;\n\n    if (!inputElement) {\n      return;\n    }\n\n    const nextIndex = clamp(index, 0, this.maxLength());\n    inputElement.focus();\n    inputElement.setSelectionRange(nextIndex, nextIndex);\n    this.activeIndex.set(nextIndex);\n  }\n\n  charAt(index: number): string {\n    return this.value().at(index) ?? '';\n  }\n\n  handleNativeInput(rawValue: string): void {\n    this.commitValue(this.sanitize(rawValue));\n    this.syncActiveIndex();\n  }\n\n  handleKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.focus(this.activeIndex() - 1);\n      return;\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.focus(this.activeIndex() + 1);\n      return;\n    }\n\n    if (event.key === 'Backspace') {\n      event.preventDefault();\n      this.removeAt(this.activeIndex());\n      return;\n    }\n\n    if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n      event.preventDefault();\n      this.insertAt(event.key, this.activeIndex());\n    }\n  }\n\n  handlePaste(event: ClipboardEvent): void {\n    const text = event.clipboardData?.getData('text') ?? '';\n\n    if (!text) {\n      return;\n    }\n\n    event.preventDefault();\n    const next = this.replaceFrom(this.activeIndex(), this.sanitize(text));\n    this.commitValue(next);\n    this.focus(Math.min(next.length, this.maxLength()));\n  }\n\n  syncActiveIndex(): void {\n    const inputElement = this.nativeInput?.nativeElement;\n    const index = inputElement?.selectionStart ?? this.value().length;\n    this.activeIndex.set(clamp(index, 0, this.maxLength()));\n  }\n\n  markTouched(): void {\n    this.markAsTouched();\n  }\n\n  protected setViewValue(value: string | null): void {\n    this.value.set(this.sanitize(value ?? ''));\n    this.activeIndex.set(Math.min(this.value().length, this.maxLength()));\n  }\n\n  private insertAt(character: string, index: number): void {\n    const sanitized = this.sanitize(character);\n\n    if (!sanitized) {\n      return;\n    }\n\n    const next = this.replaceFrom(index, sanitized.at(0) ?? '');\n    this.commitValue(next);\n    this.focus(Math.min(index + 1, this.maxLength()));\n  }\n\n  private removeAt(index: number): void {\n    const value = this.value();\n    const targetIndex = value.at(index) ? index : index - 1;\n\n    if (targetIndex < 0) {\n      return;\n    }\n\n    const next = `${value.slice(0, targetIndex)}${value.slice(targetIndex + 1)}`;\n    this.commitValue(next);\n    this.focus(targetIndex);\n  }\n\n  private replaceFrom(index: number, text: string): string {\n    const value = this.value();\n    const start = clamp(index, 0, this.maxLength());\n    const next = `${value.slice(0, start)}${text}${value.slice(start + text.length)}`;\n\n    return this.sanitize(next);\n  }\n\n  private commitValue(value: string): void {\n    const next = this.sanitize(value);\n    this.value.set(next);\n    this.notifyValueChange(next);\n    this.valueChange.emit(next);\n\n    if (next.length >= this.maxLength()) {\n      this.complete.emit(next);\n    }\n  }\n\n  private sanitize(value: string): string {\n    const matcher = toMatcher(this.pattern());\n    const characters = Array.from(value).filter((character) => matcher(character));\n\n    return characters.slice(0, this.maxLength()).join('');\n  }\n}\n\n@Directive({\n  selector: '[frInputOtpGroup], frame-input-otp-group',\n  host: {\n    class: 'frame-input-otp__group',\n  },\n})\nexport class FrInputOtpGroup {}\n\n@Component({\n  selector: '[frInputOtpSlot], frame-input-otp-slot',\n  imports: [NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'frame-input-otp__slot',\n    role: 'presentation',\n    '[attr.data-active]': 'active() ? \"\" : null',\n    '[attr.data-filled]': 'filled() ? \"\" : null',\n    '[attr.data-invalid]': 'root.invalid() ? \"\" : null',\n    '[attr.data-disabled]': 'root.disabled() ? \"\" : null',\n    '(click)': 'root.focus(index())',\n  },\n  template: `\n    <span class=\"frame-input-otp__slot-char\" [ngClass]=\"{ 'frame-input-otp__slot-char--empty': !filled() }\">\n      {{ char() || placeholder() }}\n    </span>\n  `,\n})\nexport class FrInputOtpSlot {\n  protected readonly root = inject(FR_INPUT_OTP_CONTROLLER);\n\n  readonly index = input.required<number>();\n  readonly placeholder = input('');\n\n  readonly char = computed(() => this.root.charAt(this.index()));\n  readonly filled = computed(() => !!this.char());\n  readonly active = computed(() => this.root.activeIndex() === this.index());\n}\n\n@Directive({\n  selector: '[frInputOtpSeparator], frame-input-otp-separator',\n  host: {\n    class: 'frame-input-otp__separator',\n    role: 'separator',\n    'aria-hidden': 'true',\n  },\n})\nexport class FrInputOtpSeparator {}\n\nfunction toMatcher(pattern: FrInputOtpPattern): (character: string) => boolean {\n  if (!pattern) {\n    return () => true;\n  }\n\n  if (pattern instanceof RegExp) {\n    return (character) => {\n      pattern.lastIndex = 0;\n      return pattern.test(character);\n    };\n  }\n\n  const regex = new RegExp(pattern);\n  return (character) => regex.test(character);\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, value));\n}\n\r\n","import { NgModule } from '@angular/core';\nimport {\n  FrInputOtp,\n  FrInputOtpGroup,\n  FrInputOtpSeparator,\n  FrInputOtpSlot,\n} from './src/input-otp';\n\n@NgModule({\n  imports: [\n    FrInputOtp,\n    FrInputOtpGroup,\n    FrInputOtpSeparator,\n    FrInputOtpSlot,\n  ],\n  exports: [\n    FrInputOtp,\n    FrInputOtpGroup,\n    FrInputOtpSeparator,\n    FrInputOtpSlot,\n  ],\n})\nexport class FrInputOtpModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-ui-ng-components-input.mjs

@@ -0,0 +1,250 @@
+import * as i0 from '@angular/core';
+import { Directive, input, NgModule } from '@angular/core';
+
+class FrInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInput, isStandalone: true, selector: "input[frInput]", host: { classAttribute: "frame-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[frInput]',
+                    host: {
+                        class: 'frame-input',
+                    },
+                }]
+        }] });
+class FrInputField {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputField, isStandalone: true, selector: "[frInputField], frame-input-field", host: { classAttribute: "frame-input-field" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputField], frame-input-field',
+                    host: {
+                        class: 'frame-input-field',
+                    },
+                }]
+        }] });
+class FrInputHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputHeader, isStandalone: true, selector: "[frInputHeader], frame-input-header", host: { classAttribute: "frame-input-header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputHeader], frame-input-header',
+                    host: {
+                        class: 'frame-input-header',
+                    },
+                }]
+        }] });
+class FrInputControl {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputControl, isStandalone: true, selector: "[frInputControl], frame-input-control", host: { classAttribute: "frame-input-control" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputControl], frame-input-control',
+                    host: {
+                        class: 'frame-input-control',
+                    },
+                }]
+        }] });
+class FrInputFieldGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputFieldGroup, isStandalone: true, selector: "[frInputFieldGroup], frame-input-field-group", host: { classAttribute: "frame-input-field-group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputFieldGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputFieldGroup], frame-input-field-group',
+                    host: {
+                        class: 'frame-input-field-group',
+                    },
+                }]
+        }] });
+class FrInputLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputLabel, isStandalone: true, selector: "[frInputLabel], frame-input-label", host: { classAttribute: "frame-input-label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputLabel], frame-input-label',
+                    host: {
+                        class: 'frame-input-label',
+                    },
+                }]
+        }] });
+class FrInputDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputDescription, isStandalone: true, selector: "[frInputDescription], frame-input-description", host: { classAttribute: "frame-input-description" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputDescription], frame-input-description',
+                    host: {
+                        class: 'frame-input-description',
+                    },
+                }]
+        }] });
+class FrInputError {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputError, isStandalone: true, selector: "[frInputError], frame-input-error", host: { attributes: { "aria-live": "polite" }, classAttribute: "frame-input-error" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputError], frame-input-error',
+                    host: {
+                        class: 'frame-input-error',
+                        'aria-live': 'polite',
+                    },
+                }]
+        }] });
+class FrInputBadge {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputBadge, isStandalone: true, selector: "[frInputBadge], frame-input-badge", host: { classAttribute: "frame-input-badge" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputBadge], frame-input-badge',
+                    host: {
+                        class: 'frame-input-badge',
+                    },
+                }]
+        }] });
+
+const FR_INPUT_GROUP_ADDON_ALIGNS = ['inline-start', 'inline-end'];
+class FrInputGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroup, isStandalone: true, selector: "[frInputGroup], frame-input-group", host: { classAttribute: "frame-input-group" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputGroup], frame-input-group',
+                    host: {
+                        class: 'frame-input-group',
+                    },
+                }]
+        }] });
+class FrInputGroupAddon {
+    align = input('inline-start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupAddon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrInputGroupAddon, isStandalone: true, selector: "[frInputGroupAddon], frame-input-group-addon", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-align": "align()" }, classAttribute: "frame-input-group__addon" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupAddon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputGroupAddon], frame-input-group-addon',
+                    host: {
+                        class: 'frame-input-group__addon',
+                        '[attr.data-align]': 'align()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+class FrInputGroupText {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroupText, isStandalone: true, selector: "[frInputGroupText], frame-input-group-text", host: { classAttribute: "frame-input-group__text" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupText, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frInputGroupText], frame-input-group-text',
+                    host: {
+                        class: 'frame-input-group__text',
+                    },
+                }]
+        }] });
+class FrInputGroupInput {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrInputGroupInput, isStandalone: true, selector: "input[frInputGroupInput]", host: { classAttribute: "frame-input-group__input" }, hostDirectives: [{ directive: FrInput }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputGroupInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[frInputGroupInput]',
+                    hostDirectives: [FrInput],
+                    host: {
+                        class: 'frame-input-group__input',
+                    },
+                }]
+        }] });
+
+class FrInputModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrInputModule, imports: [FrInput,
+            FrInputBadge,
+            FrInputControl,
+            FrInputDescription,
+            FrInputError,
+            FrInputField,
+            FrInputFieldGroup,
+            FrInputGroup,
+            FrInputGroupAddon,
+            FrInputGroupInput,
+            FrInputGroupText,
+            FrInputHeader,
+            FrInputLabel], exports: [FrInput,
+            FrInputBadge,
+            FrInputControl,
+            FrInputDescription,
+            FrInputError,
+            FrInputField,
+            FrInputFieldGroup,
+            FrInputGroup,
+            FrInputGroupAddon,
+            FrInputGroupInput,
+            FrInputGroupText,
+            FrInputHeader,
+            FrInputLabel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrInput,
+                        FrInputBadge,
+                        FrInputControl,
+                        FrInputDescription,
+                        FrInputError,
+                        FrInputField,
+                        FrInputFieldGroup,
+                        FrInputGroup,
+                        FrInputGroupAddon,
+                        FrInputGroupInput,
+                        FrInputGroupText,
+                        FrInputHeader,
+                        FrInputLabel,
+                    ],
+                    exports: [
+                        FrInput,
+                        FrInputBadge,
+                        FrInputControl,
+                        FrInputDescription,
+                        FrInputError,
+                        FrInputField,
+                        FrInputFieldGroup,
+                        FrInputGroup,
+                        FrInputGroupAddon,
+                        FrInputGroupInput,
+                        FrInputGroupText,
+                        FrInputHeader,
+                        FrInputLabel,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FR_INPUT_GROUP_ADDON_ALIGNS, FrInput, FrInputBadge, FrInputControl, FrInputDescription, FrInputError, FrInputField, FrInputFieldGroup, FrInputGroup, FrInputGroupAddon, FrInputGroupInput, FrInputGroupText, FrInputHeader, FrInputLabel, FrInputModule };
+//# sourceMappingURL=frame-ui-ng-components-input.mjs.map