@ojiepermana/angular-component 22.0.27

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-input-group.mjs","sources":["../../../library/component/input-group/input-group.component.ts","../../../library/component/input-group/ojiepermana-angular-component-input-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular-component/utils';\nimport { buttonVariants, type ButtonSize, type ButtonVariant } from '@ojiepermana/angular-component/button';\n\nexport type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';\nexport type InputGroupButtonSize = Extract<ButtonSize, 'xs' | 'icon-xs' | 'sm' | 'icon-sm'>;\n\nconst GROUP_BASE = [\n  'relative flex min-w-0 flex-wrap overflow-hidden rounded-lg border border-input bg-transparent text-sm shadow-sm',\n  'transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',\n  '[&>[data-slot=input-group-control]]:min-w-0',\n  '[&>[data-slot=input-group-control]]:flex-1',\n  '[&>[data-slot=input-group-control]]:rounded-none',\n  '[&>[data-slot=input-group-control]]:border-0',\n  '[&>[data-slot=input-group-control]]:bg-transparent',\n  '[&>[data-slot=input-group-control]]:shadow-none',\n  '[&>[data-slot=input-group-control]]:outline-none',\n  '[&>[data-slot=input-group-control]]:focus-visible:ring-0',\n  '[&>[data-slot=input-group-control]]:focus-visible:outline-none',\n].join(' ');\n\nconst addonAlignClasses: Record<InputGroupAddonAlign, string> = {\n  'inline-start': ['order-10', '[border-inline-end-width:1px]', '[border-inline-end-color:hsl(var(--border))]'].join(\n    ' ',\n  ),\n  'inline-end': ['order-30', '[border-inline-start-width:1px]', '[border-inline-start-color:hsl(var(--border))]'].join(\n    ' ',\n  ),\n  'block-start': [\n    'order-0 basis-full py-2',\n    '[border-block-end-width:1px]',\n    '[border-block-end-color:hsl(var(--border))]',\n  ].join(' '),\n  'block-end': [\n    'order-40 basis-full py-2',\n    '[border-block-start-width:1px]',\n    '[border-block-start-color:hsl(var(--border))]',\n  ].join(' '),\n};\n\nconst ADDON_BASE = [\n  'flex min-h-9 shrink-0 items-center gap-1.5 bg-[hsl(var(--muted)/var(--opacity-30))] px-3 text-sm text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n].join(' ');\n\nconst CONTROL_BASE = [\n  'order-20 min-w-0 flex-1 bg-transparent text-sm text-foreground',\n  'placeholder:text-muted-foreground',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n  'focus-visible:outline-none',\n  'aria-[invalid=true]:text-destructive',\n].join(' ');\n\n@Component({\n  selector: 'InputGroup',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: `<ng-content />`,\n})\nexport class InputGroupComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(GROUP_BASE, this.class()));\n}\n\n@Component({\n  selector: 'InputGroupAddon',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-align]': 'align()',\n  },\n  template: `<ng-content />`,\n})\nexport class InputGroupAddonComponent {\n  readonly align = input<InputGroupAddonAlign>('inline-start');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(ADDON_BASE, addonAlignClasses[this.align()], this.class()));\n}\n\n@Component({\n  selector: 'InputGroupText',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: `<ng-content />`,\n})\nexport class InputGroupTextComponent {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn('inline-flex items-center gap-1.5 whitespace-nowrap text-sm leading-none text-current', this.class()),\n  );\n}\n\n@Component({\n  selector: 'button[InputGroupButton], a[InputGroupButton]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-variant]': 'variant()',\n  },\n  template: `<ng-content />`,\n})\nexport class InputGroupButtonComponent {\n  readonly variant = input<ButtonVariant>('ghost');\n  readonly size = input<InputGroupButtonSize>('xs');\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(buttonVariants({ variant: this.variant(), size: this.size() }), 'shrink-0 shadow-none', this.class()),\n  );\n}\n\n@Component({\n  selector: 'input[InputGroupInput]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    'data-slot': 'input-group-control',\n  },\n  template: '',\n})\nexport class InputGroupInputComponent {\n  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);\n\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(CONTROL_BASE, 'h-9 px-3 py-2', this.class()));\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n}\n\n@Component({\n  selector: 'textarea[InputGroupTextarea]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    'data-slot': 'input-group-control',\n  },\n  template: '',\n})\nexport class InputGroupTextareaComponent {\n  private readonly el = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\n\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() =>\n    cn(CONTROL_BASE, 'min-h-[120px] w-full resize-none px-3 py-2.5', this.class()),\n  );\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,517 @@
+import * as i0 from '@angular/core';
+import { Directive, input, computed, ChangeDetectionStrategy, 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, uniqueId } from '@ojiepermana/angular-component/utils';
+
+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.0.2", ngImport: i0, type: InputOtpContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: InputOtpContextBase, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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.0.2", ngImport: i0, type: InputOtpGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputOtpGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpGroup',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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-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.0.2", ngImport: i0, type: InputOtpSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputOtpSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpSeparator',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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');
+    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-10 w-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);
+    }
+    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.0.2", ngImport: i0, type: InputOtpSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputOtpSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtpSlot',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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 = uniqueId('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() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    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 null;
+        }
+        if (pattern instanceof RegExp) {
+            return pattern;
+        }
+        try {
+            return new RegExp(pattern);
+        }
+        catch {
+            return null;
+        }
+    }, /* @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 });
+        if (this.formFieldContext) {
+            this.formFieldContext.control.set(this.ngControl?.control ?? null);
+        }
+    }
+    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(this.normalizeValue(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();
+        }
+    }
+    commitValue(value) {
+        const nextValue = this.normalizeValue(value);
+        this.internalValue.set(nextValue);
+        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) {
+        const pattern = this.compiledPattern();
+        if (!pattern) {
+            return true;
+        }
+        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.0.2", ngImport: i0, type: InputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: InputOtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'InputOtp',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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 }] }] } });
+let _id = 0;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputOtpComponent, InputOtpGroupComponent, InputOtpSeparatorComponent, InputOtpSlotComponent, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
+//# sourceMappingURL=ojiepermana-angular-component-input-otp.mjs.map