@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-component-input-otp.mjs

@@ -1,7 +1,554 @@
-export * from '@ojiepermana/angular-component/input-otp';
+import * as i0 from '@angular/core';
+import { Directive, input, computed, Component, inject, numberAttribute, booleanAttribute, viewChild, ElementRef, Injector, output, linkedSignal, signal, contentChildren, forwardRef } from '@angular/core';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormFieldContext } from '@ojiepermana/angular/component/form';
+import { cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const REGEXP_ONLY_DIGITS = /^[0-9]$/;
+const REGEXP_ONLY_DIGITS_AND_CHARS = /^[A-Za-z0-9]$/;
+class InputOtpContextBase {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: InputOtpContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpContextBase, decorators: [{
+            type: Directive
+        }] });
+class InputOtpGroupComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex items-center overflow-hidden rounded-md border border-input bg-background shadow-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputOtpGroupComponent, isStandalone: true, selector: "InputOtpGroup", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpGroup',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"input-otp-group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputOtpSeparatorComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex h-control-10 w-6 items-center justify-center text-muted-foreground [&>svg]:h-4 [&>svg]:w-4', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputOtpSeparatorComponent, isStandalone: true, selector: "InputOtpSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()", "attr.data-slot": "\"input-otp-separator\"" } }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14" />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpSeparator',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"input-otp-separator"',
+                        'aria-hidden': 'true',
+                    },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class InputOtpSlotComponent {
+    ctx = inject(InputOtpContextBase);
+    index = input(0, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
+    inputRef = viewChild.required('inputRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    maxLength = computed(() => this.ctx.maxLength(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    character = computed(() => this.ctx.slotValue(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "character" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.ctx.isActive(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    filled = computed(() => this.character() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.ctx.isDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.ctx.isRequired(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    inputId = computed(() => this.ctx.slotId(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    inputMode = computed(() => this.ctx.slotInputMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    autocomplete = computed(() => this.ctx.slotAutocomplete(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    ariaLabel = computed(() => this.ctx.slotAriaLabel(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = computed(() => this.ctx.slotAriaLabelledBy(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = computed(() => this.ctx.slotAriaDescribedBy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    effectiveInvalid = computed(() => this.invalid() || this.ctx.isInvalid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative flex h-control-10 w-control-10 items-center justify-center border-r border-border text-sm font-medium transition-[background-color,box-shadow,opacity] last:border-r-0', this.active() && !this.effectiveInvalid() && 'z-10 ring-1 ring-inset ring-ring', this.effectiveInvalid() &&
+        'bg-destructive/5 text-destructive ring-1 ring-inset ring-destructive/50', this.disabled() && 'opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus(select = true) {
+        const input = this.inputRef().nativeElement;
+        input.focus();
+        if (select) {
+            input.select();
+        }
+    }
+    handleFocus() {
+        this.ctx.handleSlotFocus(this.index());
+        this.inputRef().nativeElement.select();
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.ctx.handleSlotInput(this.index(), target.value);
+        this.syncElementValue(target);
+    }
+    /**
+     * Push the model back onto the element the browser just wrote to.
+     *
+     * `[value]` only repaints when `character()` CHANGES, and a character the
+     * pattern rejects leaves the model exactly as it was — so without this the
+     * rejected character stays on screen until some later, unrelated value change.
+     * It covers the paste of an entirely unacceptable string too: that one is not
+     * prevented, so the browser drops it in and the `input` event lands here.
+     */
+    syncElementValue(target) {
+        const character = this.character();
+        if (target.value !== character) {
+            target.value = character;
+        }
+    }
+    handleKeydown(event) {
+        this.ctx.handleSlotKeydown(this.index(), event);
+    }
+    handlePaste(event) {
+        this.ctx.handleSlotPaste(this.index(), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: InputOtpSlotComponent, isStandalone: true, selector: "InputOtpSlot", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"input-otp-slot\"", "attr.data-active": "active() ? \"\" : null", "attr.data-filled": "filled() ? \"\" : null", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "effectiveInvalid() ? \"\" : null" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <input
+      #inputRef
+      class="h-full w-full border-0 bg-transparent px-0 text-center text-inherit font-inherit outline-none disabled:cursor-not-allowed"
+      type="text"
+      spellcheck="false"
+      autocapitalize="none"
+      [value]="character()"
+      [attr.id]="inputId()"
+      [attr.maxlength]="maxLength()"
+      [attr.inputmode]="inputMode()"
+      [attr.autocomplete]="autocomplete()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledBy()"
+      [attr.aria-describedby]="ariaDescribedBy()"
+      [attr.aria-invalid]="effectiveInvalid() ? 'true' : null"
+      [disabled]="disabled()"
+      [required]="required() || null"
+      (focus)="handleFocus()"
+      (input)="handleInput($event)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+    />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpSlot',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"input-otp-slot"',
+                        '[attr.data-active]': 'active() ? "" : null',
+                        '[attr.data-filled]': 'filled() ? "" : null',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-invalid]': 'effectiveInvalid() ? "" : null',
+                    },
+                    template: `
+    <input
+      #inputRef
+      class="h-full w-full border-0 bg-transparent px-0 text-center text-inherit font-inherit outline-none disabled:cursor-not-allowed"
+      type="text"
+      spellcheck="false"
+      autocapitalize="none"
+      [value]="character()"
+      [attr.id]="inputId()"
+      [attr.maxlength]="maxLength()"
+      [attr.inputmode]="inputMode()"
+      [attr.autocomplete]="autocomplete()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-labelledby]="ariaLabelledBy()"
+      [attr.aria-describedby]="ariaDescribedBy()"
+      [attr.aria-invalid]="effectiveInvalid() ? 'true' : null"
+      [disabled]="disabled()"
+      [required]="required() || null"
+      (focus)="handleFocus()"
+      (input)="handleInput($event)"
+      (keydown)="handleKeydown($event)"
+      (paste)="handlePaste($event)"
+    />
+  `,
+                }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], inputRef: [{ type: i0.ViewChild, args: ['inputRef', { isSignal: true }] }] } });
+class InputOtpComponent extends InputOtpContextBase {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    formFieldContext = inject(FormFieldContext, { optional: true });
+    maxLengthInput = input(6, { ...(ngDevMode ? { debugName: "maxLengthInput" } : /* istanbul ignore next */ {}), alias: 'maxLength', transform: numberAttribute });
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    pattern = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+    id = input(null, { ...(ngDevMode ? { debugName: "id" } : /* istanbul ignore next */ {}), alias: 'id' });
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    inputMode = input('numeric', { ...(ngDevMode ? { debugName: "inputMode" } : /* istanbul ignore next */ {}), alias: 'inputmode' });
+    autocomplete = input('one-time-code', { ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'autocomplete' });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled', transform: booleanAttribute });
+    invalidInput = input(false, { ...(ngDevMode ? { debugName: "invalidInput" } : /* istanbul ignore next */ {}), alias: 'aria-invalid', transform: booleanAttribute });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    generatedId = injectUniqueId('InputOtp');
+    /**
+     * Single source of truth for the rendered value. Re-seeds from the `value`
+     * binding when it changes, but writes from typing or the Forms API
+     * (writeValue) win until the binding changes again — so `form.reset()` is
+     * never shadowed by a stale `[value]` binding.
+     */
+    internalValue = linkedSignal(() => this.normalizeValue(this.value() ?? ''), {
+        debugName: 'InputOtp.internalValue',
+        set: (value, rawSet) => rawSet(this.normalizeValue(value)),
+    });
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    slots = contentChildren(InputOtpSlotComponent, { ...(ngDevMode ? { debugName: "slots" } : /* istanbul ignore next */ {}), descendants: true });
+    compiledPattern = computed(() => {
+        const pattern = this.pattern();
+        if (!pattern) {
+            return [];
+        }
+        if (pattern instanceof RegExp) {
+            return [pattern];
+        }
+        if (typeof pattern !== 'string') {
+            return pattern;
+        }
+        try {
+            return [new RegExp(pattern)];
+        }
+        catch {
+            return [];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compiledPattern" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex flex-wrap items-center gap-2', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.disabledState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => this.internalValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    ngControl = null;
+    onChange = () => { };
+    onTouched = () => { };
+    ngOnInit() {
+        this.ngControl = this.injector.get(NgControl, null, { optional: true, self: true });
+        this.publishControl();
+    }
+    ngAfterViewInit() {
+        // `formControlName` assigns `.control` in FormControlName.ngOnChanges, which
+        // Angular runs AFTER this component's ngOnInit — both are pre-order hooks,
+        // and the component's are registered first. Reading it once at init would
+        // park `null` in the FormField forever, so the field could never surface the
+        // control's invalid state. By now the node is fully set up, whichever
+        // directive owns the binding.
+        this.publishControl();
+    }
+    maxLength() {
+        return Math.max(1, this.maxLengthInput());
+    }
+    slotId(index) {
+        const baseId = this.id() ?? this.formFieldContext?.controlId ?? this.generatedId;
+        return index === 0 ? baseId : `${baseId}-${index + 1}`;
+    }
+    slotValue(index) {
+        return this.toCharArray()[index] ?? '';
+    }
+    slotAriaLabel(index) {
+        const baseLabel = this.ariaLabel() ?? 'One-time password';
+        return `${baseLabel} character ${index + 1} of ${this.maxLength()}`;
+    }
+    slotAriaLabelledBy(index) {
+        return index === 0 ? this.ariaLabelledby() : null;
+    }
+    slotAriaDescribedBy() {
+        return this.describedBy();
+    }
+    slotInputMode() {
+        return this.inputMode();
+    }
+    slotAutocomplete(index) {
+        return index === 0 ? this.autocomplete() : 'off';
+    }
+    isDisabled() {
+        return this.disabled();
+    }
+    isRequired() {
+        return this.required();
+    }
+    isInvalid() {
+        return this.invalidInput() || this.formFieldContext?.invalid() || false;
+    }
+    isActive(index) {
+        return this.activeIndex() === index;
+    }
+    handleSlotFocus(index) {
+        this.activeIndex.set(index);
+    }
+    handleSlotInput(index, value) {
+        if (this.disabled()) {
+            return;
+        }
+        const accepted = this.filterCharacters(value);
+        if (accepted.length === 0) {
+            return;
+        }
+        if (accepted.length > 1) {
+            this.applyFragment(index, accepted);
+            return;
+        }
+        const next = this.replaceAt(index, accepted[0]);
+        this.commitValue(next);
+        this.focusSlot(Math.min(index + 1, this.maxLength() - 1));
+    }
+    handleSlotKeydown(index, event) {
+        if (this.disabled()) {
+            return;
+        }
+        const isRtl = this.isRtl();
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusSlot(Math.max(0, index + (isRtl ? 1 : -1)));
+                return;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusSlot(Math.min(this.maxLength() - 1, index + (isRtl ? -1 : 1)));
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.focusSlot(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                this.focusSlot(this.maxLength() - 1);
+                return;
+            case 'Backspace': {
+                event.preventDefault();
+                const current = this.slotValue(index);
+                const deleteIndex = current === '' ? index - 1 : index;
+                if (deleteIndex < 0) {
+                    return;
+                }
+                this.commitValue(this.removeAt(deleteIndex));
+                this.focusSlot(Math.max(0, deleteIndex));
+                return;
+            }
+            case 'Delete':
+                event.preventDefault();
+                this.commitValue(this.removeAt(index));
+                this.focusSlot(index);
+                return;
+            default:
+                return;
+        }
+    }
+    handleSlotPaste(index, event) {
+        if (this.disabled()) {
+            return;
+        }
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        const accepted = this.filterCharacters(pasted);
+        if (accepted.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        this.applyFragment(index, accepted);
+    }
+    focus() {
+        const index = Math.min(this.displayValue().length, this.maxLength() - 1);
+        this.focusSlot(Math.max(index, 0));
+    }
+    writeValue(value) {
+        this.internalValue.set(typeof value === 'string' ? value : '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabledState.set(disabled);
+    }
+    describedBy() {
+        const rawIds = [this.ariaDescribedby(), this.formFieldContext?.describedBy() ?? null].filter((value) => !!value);
+        const ids = [...new Set(rawIds.flatMap((value) => value.split(/\s+/)).filter(Boolean))];
+        return ids.length > 0 ? ids.join(' ') : null;
+    }
+    handleFocusOut(event) {
+        const nextTarget = event.relatedTarget;
+        if (!(nextTarget instanceof Node) || !this.host.nativeElement.contains(nextTarget)) {
+            this.onTouched();
+        }
+    }
+    /** Hand the bound control to `<FormField>`, if this OTP is inside one. */
+    publishControl() {
+        const context = this.formFieldContext;
+        if (!context) {
+            return;
+        }
+        const control = this.ngControl?.control ?? null;
+        if (control !== context.control()) {
+            context.control.set(control);
+        }
+    }
+    commitValue(value) {
+        this.internalValue.set(value);
+        const nextValue = this.internalValue();
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    replaceAt(index, character) {
+        const chars = this.toCharArray();
+        chars[index] = character;
+        return this.serialize(chars);
+    }
+    removeAt(index) {
+        const chars = this.toCharArray();
+        if (index < 0 || index >= chars.length) {
+            return this.displayValue();
+        }
+        chars.splice(index, 1);
+        chars.push('');
+        return this.serialize(chars);
+    }
+    applyFragment(index, characters) {
+        const chars = this.toCharArray();
+        let cursor = index;
+        for (const character of characters) {
+            if (cursor >= chars.length) {
+                break;
+            }
+            chars[cursor] = character;
+            cursor += 1;
+        }
+        this.commitValue(this.serialize(chars));
+        this.focusSlot(Math.min(cursor, this.maxLength() - 1));
+    }
+    focusSlot(index) {
+        const slot = this.slots().find((candidate) => candidate.index() === index);
+        if (!slot) {
+            return;
+        }
+        this.activeIndex.set(index);
+        slot.focus();
+    }
+    toCharArray() {
+        const chars = Array.from({ length: this.maxLength() }, () => '');
+        for (const [index, character] of Array.from(this.displayValue()).entries()) {
+            if (index >= chars.length) {
+                break;
+            }
+            chars[index] = character;
+        }
+        return chars;
+    }
+    serialize(chars) {
+        let lastFilledIndex = -1;
+        for (let index = chars.length - 1; index >= 0; index -= 1) {
+            if (chars[index] !== '') {
+                lastFilledIndex = index;
+                break;
+            }
+        }
+        return lastFilledIndex === -1 ? '' : chars.slice(0, lastFilledIndex + 1).join('');
+    }
+    normalizeValue(value) {
+        return this.filterCharacters(value).slice(0, this.maxLength()).join('');
+    }
+    filterCharacters(value) {
+        return Array.from(value).filter((character) => this.acceptsCharacter(character));
+    }
+    acceptsCharacter(character) {
+        return this.compiledPattern().every((pattern) => {
+            pattern.lastIndex = 0;
+            return pattern.test(character);
+        });
+    }
+    isRtl() {
+        return getComputedStyle(this.host.nativeElement).direction === 'rtl';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: InputOtpComponent, isStandalone: true, selector: "InputOtp", inputs: { maxLengthInput: { classPropertyName: "maxLengthInput", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "handleFocusOut($event)" }, properties: { "class": "classes()", "attr.id": "null", "attr.role": "\"group\"", "attr.data-slot": "\"input-otp\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-invalid": "isInvalid() ? \"\" : null", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledby()", "attr.aria-describedby": "describedBy()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-invalid": "isInvalid() ? \"true\" : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
+            { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },
+        ], queries: [{ propertyName: "slots", predicate: InputOtpSlotComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputOtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtp',
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputOtpComponent), multi: true },
+                        { provide: InputOtpContextBase, useExisting: forwardRef(() => InputOtpComponent) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.id]': 'null',
+                        '[attr.role]': '"group"',
+                        '[attr.data-slot]': '"input-otp"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-invalid]': 'isInvalid() ? "" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'ariaLabelledby()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-invalid]': 'isInvalid() ? "true" : null',
+                        '(focusout)': 'handleFocusOut($event)',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { maxLengthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], slots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputOtpSlotComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { InputOtpComponent, InputOtpGroupComponent, InputOtpSeparatorComponent, InputOtpSlotComponent, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/fesm2022/ojiepermana-angular-component-input.mjs

@@ -1,7 +1,56 @@
-export * from '@ojiepermana/angular-component/input';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import * as i1 from '@ojiepermana/angular/component/utils/scale';
+import { ComponentScaleDirective } from '@ojiepermana/angular/component/utils/scale';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const BASE = [
+    'flex h-control-md 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 file:text-foreground',
+    'placeholder:text-muted-foreground',
+    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',
+].join(' ');
+/**
+ * Styled native `<input>`. Works with Angular's DefaultValueAccessor,
+ * so `ngModel` and reactive forms just work.
+ */
+class InputComponent {
+    componentScale = inject(ComponentScaleDirective);
+    radius = this.componentScale.radius;
+    density = this.componentScale.density;
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: InputComponent, isStandalone: true, selector: "input[Input]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, hostDirectives: [{ directive: i1.ComponentScaleDirective, inputs: ["radius", "radius", "density", "density"] }], ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[Input]',
+                    hostDirectives: [
+                        {
+                            directive: ComponentScaleDirective,
+                            inputs: ['radius', 'density'],
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { InputComponent };