@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-inputotp.mjs

@@ -1,18 +1,17 @@
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, output, contentChild, contentChildren, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { AutoFocus } from '@gravionlabs/helix-core/autofocus';
-import { BaseEditableHolder } from '@gravionlabs/helix-core/baseeditableholder';
-import { PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { InputText } from '@gravionlabs/helix-core/inputtext';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, forwardRef, inject, input, output } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { AutoFocus } from "@gravionlabs/helix-core/autofocus";
+import { BaseEditableHolder } from "@gravionlabs/helix-core/baseeditableholder";
+import { PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { InputText } from "@gravionlabs/helix-core/inputtext";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+const style = `
     .h-inputotp {
         display: flex;
         align-items: center;
@@ -34,358 +33,572 @@ const style = /*css*/ `
         width: dt('inputotp.input.lg.width');
     }
 `;
-
 const classes = {
-    root: 'h-inputotp h-component',
-    pcInputText: 'h-inputotp-input'
+	root: "h-inputotp h-component",
+	pcInputText: "h-inputotp-input"
 };
-class InputOtpStyle extends BaseStyle {
-    name = 'inputotp';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * InputOtp is used to enter one time passwords.
- *
- * [Live Demo](https://www.primeng.org/inputotp/)
- *
- * @module inputotpstyle
- *
- */
+var InputOtpStyle = class InputOtpStyle extends BaseStyle {
+	name = "inputotp";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtpStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtpStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: InputOtpStyle,
+	decorators: [{ type: Injectable }]
+});
 var InputOtpClasses;
-(function (InputOtpClasses) {
-    /**
-     * Class name of the root element
-     */
-    InputOtpClasses["root"] = "h-inputotp";
-    /**
-     * Class name of the input element
-     */
-    InputOtpClasses["pcInputText"] = "h-inputotp-input";
+(function(InputOtpClasses) {
+	InputOtpClasses["root"] = "h-inputotp";
+	InputOtpClasses["pcInputText"] = "h-inputotp-input";
 })(InputOtpClasses || (InputOtpClasses = {}));
-
-const INPUTOTP_INSTANCE = new InjectionToken('INPUTOTP_INSTANCE');
+const INPUTOTP_INSTANCE = new InjectionToken("INPUTOTP_INSTANCE");
 const INPUT_OTP_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => InputOtp),
-    multi: true
+	provide: NG_VALUE_ACCESSOR,
+	useExisting: forwardRef(() => InputOtp),
+	multi: true
 };
-/**
- * Input Otp is used to enter one time passwords.
- * @group Components
- */
-class InputOtp extends BaseEditableHolder {
-    componentName = 'InputOtp';
-    _componentStyle = inject(InputOtpStyle);
-    $pcInputOtp = inject(INPUTOTP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    /**
-     * When present, it specifies that an input field is read-only.
-     * @group Props
-     */
-    readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Index of the element in tabbing order.
-     * @group Props
-     */
-    tabindex = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
-    /**
-     * Number of characters to initiate.
-     * @group Props
-     */
-    length = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the input element.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Mask pattern.
-     * @group Props
-     */
-    mask = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
-    /**
-     * When present, it specifies that an input field is integer-only.
-     * @group Props
-     */
-    integerOnly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "integerOnly" }] : /* istanbul ignore next */ []));
-    /**
-     * When present, it specifies that the component should automatically get focus on load.
-     * @group Props
-     */
-    autofocus = input(undefined, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Specifies the input variant of the component.
-     * @defaultValue undefined
-     * @group Props
-     */
-    variant = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
-    /**
-     * Specifies the size of the component.
-     * @defaultValue undefined
-     * @group Props
-     */
-    size = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke on value change.
-     * @group Emits
-     */
-    onChange = output();
-    /**
-     * Callback to invoke when the component receives focus.
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onFocus = output();
-    /**
-     * Callback to invoke when the component loses focus.
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onBlur = output();
-    /**
-     * Custom input template.
-     * @param {InputOtpInputTemplateContext} context - Context of the template
-     * @see {@link InputOtpInputTemplateContext}
-     * @group Templates
-     */
-    inputTemplate = contentChild('input', { ...(ngDevMode ? { debugName: "inputTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _inputTemplate;
-    tokens = [];
-    value;
-    $variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$variant" }] : /* istanbul ignore next */ []));
-    get inputMode() {
-        return this.integerOnly() ? 'numeric' : 'text';
-    }
-    get inputType() {
-        return this.mask() ? 'password' : 'text';
-    }
-    onAfterContentInit() {
-        this.templates().forEach((item) => {
-            switch (item.getType()) {
-                case 'input':
-                    this._inputTemplate = item.template;
-                    break;
-                default:
-                    this._inputTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    getToken(index) {
-        return this.tokens[index];
-    }
-    getTemplateEvents(index) {
-        return {
-            input: (event) => this.onInput(event, index),
-            keydown: (event) => this.onKeyDown(event),
-            focus: (event) => this.onFocus.emit(event),
-            blur: (event) => this.onBlur.emit(event),
-            paste: (event) => this.onPaste(event)
-        };
-    }
-    onInput(event, index) {
-        const value = event.target.value;
-        if (index === 0 && value.length > 1) {
-            this.handleOnPaste(value, event);
-            event.stopPropagation();
-            return;
-        }
-        this.tokens[index] = value;
-        this.updateModel(event);
-        if (event.inputType === 'deleteContentBackward') {
-            this.moveToPrev(event);
-        }
-        else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
-            this.moveToNext(event);
-        }
-    }
-    updateModel(event) {
-        const newValue = this.tokens.join('');
-        this.writeModelValue(newValue);
-        this.onModelChange(newValue);
-        this.onChange.emit({
-            originalEvent: event,
-            value: newValue
-        });
-    }
-    updateTokens() {
-        if (this.value !== null && this.value !== undefined) {
-            if (Array.isArray(this.value)) {
-                this.tokens = [...this.value];
-            }
-            else {
-                this.tokens = this.value.toString().split('');
-            }
-        }
-        else {
-            this.tokens = [];
-        }
-    }
-    getModelValue(i) {
-        return this.tokens[i - 1] || '';
-    }
-    getAutofocus(i) {
-        if (i === 1) {
-            return this.autofocus() || false;
-        }
-        return false;
-    }
-    moveToPrev(event) {
-        let prevInput = this.findPrevInput(event.target);
-        if (prevInput) {
-            prevInput.focus();
-            prevInput.select();
-        }
-    }
-    moveToNext(event) {
-        let nextInput = this.findNextInput(event.target);
-        if (nextInput) {
-            nextInput.focus();
-            nextInput.select();
-        }
-    }
-    findNextInput(element) {
-        let nextElement = element.nextElementSibling;
-        if (!nextElement)
-            return;
-        return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
-    }
-    findPrevInput(element) {
-        let prevElement = element.previousElementSibling;
-        if (!prevElement)
-            return;
-        return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
-    }
-    onInputFocus(event) {
-        event.target.select();
-        this.onFocus.emit(event);
-    }
-    onInputBlur(event) {
-        this.onBlur.emit(event);
-    }
-    onKeyDown(event) {
-        if (event.altKey || event.ctrlKey || event.metaKey) {
-            return;
-        }
-        switch (event.key) {
-            case 'ArrowLeft':
-                this.moveToPrev(event);
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-            case 'ArrowDown':
-                event.preventDefault();
-                break;
-            case 'Backspace':
-                if (event.target.value.length === 0) {
-                    this.moveToPrev(event);
-                    event.preventDefault();
-                }
-                break;
-            case 'ArrowRight':
-                this.moveToNext(event);
-                event.preventDefault();
-                break;
-            default:
-                const target = event.target;
-                const hasSelection = target.selectionStart !== target.selectionEnd;
-                const isAtMaxLength = this.tokens.join('').length >= this.length();
-                const isValidKey = this.integerOnly() ? /^[0-9]$/.test(event.key) : true;
-                if (!isValidKey || (isAtMaxLength && event.key !== 'Delete' && !hasSelection)) {
-                    event.preventDefault();
-                }
-                break;
-        }
-    }
-    onPaste(event) {
-        if (!this.$disabled() && !this.readonly()) {
-            let paste = event.clipboardData.getData('text');
-            if (paste.length) {
-                this.handleOnPaste(paste, event);
-            }
-            event.preventDefault();
-        }
-    }
-    handleOnPaste(paste, event) {
-        let pastedCode = paste.substring(0, this.length() + 1);
-        if (!this.integerOnly() || !isNaN(pastedCode)) {
-            this.tokens = pastedCode.split('');
-            this.updateModel(event);
-        }
-    }
-    getRange(n) {
-        return Array.from({ length: n }, (_, index) => index + 1);
-    }
-    trackByFn(index) {
-        return index;
-    }
-    /**
-     * @override
-     *
-     * @see {@link BaseEditableHolder.writeControlValue}
-     * Writes the value to the control.
-     */
-    writeControlValue(value, setModelValue) {
-        if (value) {
-            if (Array.isArray(value) && value.length > 0) {
-                this.value = value.slice(0, this.length());
-            }
-            else {
-                this.value = value.toString().split('').slice(0, this.length());
-            }
-        }
-        else {
-            this.value = value;
-        }
-        setModelValue(this.value);
-        this.updateTokens();
-        this.cd.markForCheck();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: InputOtp, isStandalone: true, selector: "h-inputOtp, h-inputotp, h-input-otp", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, integerOnly: { classPropertyName: "integerOnly", publicName: "integerOnly", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class": "cx('root')" } }, providers: [INPUT_OTP_VALUE_ACCESSOR, InputOtpStyle, { provide: INPUTOTP_INSTANCE, useExisting: InputOtp }, { provide: PARENT_INSTANCE, useExisting: InputOtp }], queries: [{ propertyName: "inputTemplate", first: true, predicate: ["input"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@for (i of getRange(length()); track trackByFn($index)) {\n  @if (!inputTemplate() && !_inputTemplate) {\n    <input\n      type=\"text\"\n      hInputText\n      [value]=\"getModelValue(i)\"\n      [attr.maxlength]=\"i === 1 ? length() : 1\"\n      [attr.type]=\"inputType\"\n      [class]=\"cn(cx('pcInputText'), styleClass())\"\n      [pSize]=\"size()\"\n      [variant]=\"$variant()\"\n      [invalid]=\"invalid()\"\n      [attr.inputmode]=\"inputMode\"\n      [attr.name]=\"name()\"\n      [attr.tabindex]=\"tabindex()\"\n      [attr.required]=\"required() ? '' : undefined\"\n      [attr.readonly]=\"readonly() ? '' : undefined\"\n      [attr.disabled]=\"$disabled() ? '' : undefined\"\n      (input)=\"onInput($event, i - 1)\"\n      (focus)=\"onInputFocus($event)\"\n      (blur)=\"onInputBlur($event)\"\n      (paste)=\"onPaste($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [hAutoFocus]=\"getAutofocus(i)\"\n      [pt]=\"ptm('pcInputText')\"\n      [unstyled]=\"unstyled()\"\n      />\n  }\n  @if (inputTemplate() || _inputTemplate) {\n    <ng-container *ngTemplateOutlet=\"inputTemplate() || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }\"> </ng-container>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[hInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[hAutoFocus]", inputs: ["hAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtp, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-inputOtp, h-inputotp, h-input-otp', standalone: true, imports: [CommonModule, InputText, AutoFocus, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [INPUT_OTP_VALUE_ACCESSOR, InputOtpStyle, { provide: INPUTOTP_INSTANCE, useExisting: InputOtp }, { provide: PARENT_INSTANCE, useExisting: InputOtp }], hostDirectives: [Bind], host: {
-                        '[class]': "cx('root')"
-                    }, template: "@for (i of getRange(length()); track trackByFn($index)) {\n  @if (!inputTemplate() && !_inputTemplate) {\n    <input\n      type=\"text\"\n      hInputText\n      [value]=\"getModelValue(i)\"\n      [attr.maxlength]=\"i === 1 ? length() : 1\"\n      [attr.type]=\"inputType\"\n      [class]=\"cn(cx('pcInputText'), styleClass())\"\n      [pSize]=\"size()\"\n      [variant]=\"$variant()\"\n      [invalid]=\"invalid()\"\n      [attr.inputmode]=\"inputMode\"\n      [attr.name]=\"name()\"\n      [attr.tabindex]=\"tabindex()\"\n      [attr.required]=\"required() ? '' : undefined\"\n      [attr.readonly]=\"readonly() ? '' : undefined\"\n      [attr.disabled]=\"$disabled() ? '' : undefined\"\n      (input)=\"onInput($event, i - 1)\"\n      (focus)=\"onInputFocus($event)\"\n      (blur)=\"onInputBlur($event)\"\n      (paste)=\"onPaste($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [hAutoFocus]=\"getAutofocus(i)\"\n      [pt]=\"ptm('pcInputText')\"\n      [unstyled]=\"unstyled()\"\n      />\n  }\n  @if (inputTemplate() || _inputTemplate) {\n    <ng-container *ngTemplateOutlet=\"inputTemplate() || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }\"> </ng-container>\n  }\n}\n" }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], inputTemplate: [{ type: i0.ContentChild, args: ['input', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class InputOtpModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule], exports: [InputOtp, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: InputOtpModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [InputOtp, SharedModule],
-                    exports: [InputOtp, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var InputOtp = class InputOtp extends BaseEditableHolder {
+	componentName = "InputOtp";
+	_componentStyle = inject(InputOtpStyle);
+	$pcInputOtp = inject(INPUTOTP_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	readonly = input(void 0, {
+		...ngDevMode ? { debugName: "readonly" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tabindex = input(null, ...ngDevMode ? [{ debugName: "tabindex" }] : 	/* istanbul ignore next */ []);
+	length = input(4, ...ngDevMode ? [{ debugName: "length" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	mask = input(false, ...ngDevMode ? [{ debugName: "mask" }] : 	/* istanbul ignore next */ []);
+	integerOnly = input(false, ...ngDevMode ? [{ debugName: "integerOnly" }] : 	/* istanbul ignore next */ []);
+	autofocus = input(void 0, {
+		...ngDevMode ? { debugName: "autofocus" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	variant = input(...ngDevMode ? [void 0, { debugName: "variant" }] : 	/* istanbul ignore next */ []);
+	size = input(...ngDevMode ? [void 0, { debugName: "size" }] : 	/* istanbul ignore next */ []);
+	onChange = output();
+	onFocus = output();
+	onBlur = output();
+	inputTemplate = contentChild("input", {
+		...ngDevMode ? { debugName: "inputTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_inputTemplate;
+	tokens = [];
+	value;
+	$variant = computed(() => this.variant() || this.config.inputStyle() || this.config.inputVariant(), ...ngDevMode ? [{ debugName: "$variant" }] : 	/* istanbul ignore next */ []);
+	get inputMode() {
+		return this.integerOnly() ? "numeric" : "text";
+	}
+	get inputType() {
+		return this.mask() ? "password" : "text";
+	}
+	onAfterContentInit() {
+		this.templates().forEach((item) => {
+			switch (item.getType()) {
+				case "input":
+					this._inputTemplate = item.template;
+					break;
+				default:
+					this._inputTemplate = item.template;
+					break;
+			}
+		});
+	}
+	getToken(index) {
+		return this.tokens[index];
+	}
+	getTemplateEvents(index) {
+		return {
+			input: (event) => this.onInput(event, index),
+			keydown: (event) => this.onKeyDown(event),
+			focus: (event) => this.onFocus.emit(event),
+			blur: (event) => this.onBlur.emit(event),
+			paste: (event) => this.onPaste(event)
+		};
+	}
+	onInput(event, index) {
+		const value = event.target.value;
+		if (index === 0 && value.length > 1) {
+			this.handleOnPaste(value, event);
+			event.stopPropagation();
+			return;
+		}
+		this.tokens[index] = value;
+		this.updateModel(event);
+		if (event.inputType === "deleteContentBackward") this.moveToPrev(event);
+		else if (event.inputType === "insertText" || event.inputType === "deleteContentForward") this.moveToNext(event);
+	}
+	updateModel(event) {
+		const newValue = this.tokens.join("");
+		this.writeModelValue(newValue);
+		this.onModelChange(newValue);
+		this.onChange.emit({
+			originalEvent: event,
+			value: newValue
+		});
+	}
+	updateTokens() {
+		if (this.value !== null && this.value !== void 0) if (Array.isArray(this.value)) this.tokens = [...this.value];
+		else this.tokens = this.value.toString().split("");
+		else this.tokens = [];
+	}
+	getModelValue(i) {
+		return this.tokens[i - 1] || "";
+	}
+	getAutofocus(i) {
+		if (i === 1) return this.autofocus() || false;
+		return false;
+	}
+	moveToPrev(event) {
+		let prevInput = this.findPrevInput(event.target);
+		if (prevInput) {
+			prevInput.focus();
+			prevInput.select();
+		}
+	}
+	moveToNext(event) {
+		let nextInput = this.findNextInput(event.target);
+		if (nextInput) {
+			nextInput.focus();
+			nextInput.select();
+		}
+	}
+	findNextInput(element) {
+		let nextElement = element.nextElementSibling;
+		if (!nextElement) return;
+		return nextElement.nodeName === "INPUT" ? nextElement : this.findNextInput(nextElement);
+	}
+	findPrevInput(element) {
+		let prevElement = element.previousElementSibling;
+		if (!prevElement) return;
+		return prevElement.nodeName === "INPUT" ? prevElement : this.findPrevInput(prevElement);
+	}
+	onInputFocus(event) {
+		event.target.select();
+		this.onFocus.emit(event);
+	}
+	onInputBlur(event) {
+		this.onBlur.emit(event);
+	}
+	onKeyDown(event) {
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		switch (event.key) {
+			case "ArrowLeft":
+				this.moveToPrev(event);
+				event.preventDefault();
+				break;
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				break;
+			case "Backspace":
+				if (event.target.value.length === 0) {
+					this.moveToPrev(event);
+					event.preventDefault();
+				}
+				break;
+			case "ArrowRight":
+				this.moveToNext(event);
+				event.preventDefault();
+				break;
+			default:
+				const target = event.target;
+				const hasSelection = target.selectionStart !== target.selectionEnd;
+				const isAtMaxLength = this.tokens.join("").length >= this.length();
+				if (!(this.integerOnly() ? /^[0-9]$/.test(event.key) : true) || isAtMaxLength && event.key !== "Delete" && !hasSelection) event.preventDefault();
+				break;
+		}
+	}
+	onPaste(event) {
+		if (!this.$disabled() && !this.readonly()) {
+			let paste = event.clipboardData.getData("text");
+			if (paste.length) this.handleOnPaste(paste, event);
+			event.preventDefault();
+		}
+	}
+	handleOnPaste(paste, event) {
+		let pastedCode = paste.substring(0, this.length() + 1);
+		if (!this.integerOnly() || !isNaN(pastedCode)) {
+			this.tokens = pastedCode.split("");
+			this.updateModel(event);
+		}
+	}
+	getRange(n) {
+		return Array.from({ length: n }, (_, index) => index + 1);
+	}
+	trackByFn(index) {
+		return index;
+	}
+	writeControlValue(value, setModelValue) {
+		if (value) if (Array.isArray(value) && value.length > 0) this.value = value.slice(0, this.length());
+		else this.value = value.toString().split("").slice(0, this.length());
+		else this.value = value;
+		setModelValue(this.value);
+		this.updateTokens();
+		this.cd.markForCheck();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtp,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: InputOtp,
+		isStandalone: true,
+		selector: "h-inputOtp, h-inputotp, h-input-otp",
+		inputs: {
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tabindex: {
+				classPropertyName: "tabindex",
+				publicName: "tabindex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			length: {
+				classPropertyName: "length",
+				publicName: "length",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mask: {
+				classPropertyName: "mask",
+				publicName: "mask",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			integerOnly: {
+				classPropertyName: "integerOnly",
+				publicName: "integerOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onChange: "onChange",
+			onFocus: "onFocus",
+			onBlur: "onBlur"
+		},
+		host: { properties: { "class": "cx('root')" } },
+		providers: [
+			INPUT_OTP_VALUE_ACCESSOR,
+			InputOtpStyle,
+			{
+				provide: INPUTOTP_INSTANCE,
+				useExisting: InputOtp
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: InputOtp
+			}
+		],
+		queries: [{
+			propertyName: "inputTemplate",
+			first: true,
+			predicate: ["input"],
+			isSignal: true
+		}, {
+			propertyName: "templates",
+			predicate: HelixTemplate,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@for (i of getRange(length()); track trackByFn($index)) {\n  @if (!inputTemplate() && !_inputTemplate) {\n    <input\n      type=\"text\"\n      hInputText\n      [value]=\"getModelValue(i)\"\n      [attr.maxlength]=\"i === 1 ? length() : 1\"\n      [attr.type]=\"inputType\"\n      [class]=\"cn(cx('pcInputText'), styleClass())\"\n      [pSize]=\"size()\"\n      [variant]=\"$variant()\"\n      [invalid]=\"invalid()\"\n      [attr.inputmode]=\"inputMode\"\n      [attr.name]=\"name()\"\n      [attr.tabindex]=\"tabindex()\"\n      [attr.required]=\"required() ? '' : undefined\"\n      [attr.readonly]=\"readonly() ? '' : undefined\"\n      [attr.disabled]=\"$disabled() ? '' : undefined\"\n      (input)=\"onInput($event, i - 1)\"\n      (focus)=\"onInputFocus($event)\"\n      (blur)=\"onInputBlur($event)\"\n      (paste)=\"onPaste($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [hAutoFocus]=\"getAutofocus(i)\"\n      [pt]=\"ptm('pcInputText')\"\n      [unstyled]=\"unstyled()\"\n      />\n  }\n  @if (inputTemplate() || _inputTemplate) {\n    <ng-container *ngTemplateOutlet=\"inputTemplate() || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }\"> </ng-container>\n  }\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputText,
+				selector: "[hInputText]",
+				inputs: [
+					"hostName",
+					"ptInputText",
+					"pInputTextPT",
+					"pInputTextUnstyled",
+					"pSize",
+					"variant",
+					"fluid",
+					"invalid"
+				]
+			},
+			{
+				kind: "directive",
+				type: AutoFocus,
+				selector: "[hAutoFocus]",
+				inputs: ["hAutoFocus"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: InputOtp,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-inputOtp, h-inputotp, h-input-otp",
+			standalone: true,
+			imports: [
+				CommonModule,
+				InputText,
+				AutoFocus,
+				SharedModule,
+				BindModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				INPUT_OTP_VALUE_ACCESSOR,
+				InputOtpStyle,
+				{
+					provide: INPUTOTP_INSTANCE,
+					useExisting: InputOtp
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: InputOtp
+				}
+			],
+			hostDirectives: [Bind],
+			host: { "[class]": "cx('root')" },
+			template: "@for (i of getRange(length()); track trackByFn($index)) {\n  @if (!inputTemplate() && !_inputTemplate) {\n    <input\n      type=\"text\"\n      hInputText\n      [value]=\"getModelValue(i)\"\n      [attr.maxlength]=\"i === 1 ? length() : 1\"\n      [attr.type]=\"inputType\"\n      [class]=\"cn(cx('pcInputText'), styleClass())\"\n      [pSize]=\"size()\"\n      [variant]=\"$variant()\"\n      [invalid]=\"invalid()\"\n      [attr.inputmode]=\"inputMode\"\n      [attr.name]=\"name()\"\n      [attr.tabindex]=\"tabindex()\"\n      [attr.required]=\"required() ? '' : undefined\"\n      [attr.readonly]=\"readonly() ? '' : undefined\"\n      [attr.disabled]=\"$disabled() ? '' : undefined\"\n      (input)=\"onInput($event, i - 1)\"\n      (focus)=\"onInputFocus($event)\"\n      (blur)=\"onInputBlur($event)\"\n      (paste)=\"onPaste($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      [hAutoFocus]=\"getAutofocus(i)\"\n      [pt]=\"ptm('pcInputText')\"\n      [unstyled]=\"unstyled()\"\n      />\n  }\n  @if (inputTemplate() || _inputTemplate) {\n    <ng-container *ngTemplateOutlet=\"inputTemplate() || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }\"> </ng-container>\n  }\n}\n"
+		}]
+	}],
+	propDecorators: {
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		tabindex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tabindex",
+				required: false
+			}]
+		}],
+		length: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "length",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		mask: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mask",
+				required: false
+			}]
+		}],
+		integerOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "integerOnly",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		onChange: [{
+			type: i0.Output,
+			args: ["onChange"]
+		}],
+		onFocus: [{
+			type: i0.Output,
+			args: ["onFocus"]
+		}],
+		onBlur: [{
+			type: i0.Output,
+			args: ["onBlur"]
+		}],
+		inputTemplate: [{
+			type: i0.ContentChild,
+			args: ["input", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var InputOtpModule = class InputOtpModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtpModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtpModule,
+		imports: [InputOtp, SharedModule],
+		exports: [InputOtp, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: InputOtpModule,
+		imports: [
+			InputOtp,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: InputOtpModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [InputOtp, SharedModule],
+			exports: [InputOtp, SharedModule]
+		}]
+	}]
+});
 export { INPUT_OTP_VALUE_ACCESSOR, InputOtp, InputOtpClasses, InputOtpModule, InputOtpStyle };
-//# sourceMappingURL=gravionlabs-helix-core-inputotp.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-inputotp.mjs.map