primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
446 lines (441 loc) • 21 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, output, contentChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SharedModule } from 'primeng/api';
import { AutoFocus } from 'primeng/autofocus';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import { PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { InputText } from 'primeng/inputtext';
import { style } from '@primeuix/styles/inputotp';
import { BaseStyle } from 'primeng/base';
const classes = {
root: 'p-inputotp p-component',
pcInputText: 'p-inputotp-input'
};
class InputOtpStyle extends BaseStyle {
name = 'inputotp';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtpStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtpStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.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 InputOtpClasses;
(function (InputOtpClasses) {
/**
* Class name of the root element
*/
InputOtpClasses["root"] = "p-inputotp";
/**
* Class name of the input element
*/
InputOtpClasses["pcInputText"] = "p-inputotp-input";
})(InputOtpClasses || (InputOtpClasses = {}));
const INPUTOTP_INSTANCE = new InjectionToken('INPUTOTP_INSTANCE');
const INPUT_OTP_VALUE_ACCESSOR = {
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(false, { ...(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, { ...(ngDevMode ? { debugName: "mask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* When present, it specifies that an input field is integer-only.
* @group Props
*/
integerOnly = input(false, { ...(ngDevMode ? { debugName: "integerOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus = input(false, { ...(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 });
tokens = [];
value = signal(undefined, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
$variant = computed(() => this.variant() || this.config.inputVariant(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$variant" }] : /* istanbul ignore next */ []));
inputMode = computed(() => (this.integerOnly() ? 'numeric' : 'text'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
inputType = computed(() => (this.mask() ? 'password' : 'text'), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
attrRequired = computed(() => (this.required() ? '' : undefined), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "attrRequired" }] : /* istanbul ignore next */ []));
attrReadonly = computed(() => (this.readonly() ? '' : undefined), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "attrReadonly" }] : /* istanbul ignore next */ []));
attrDisabled = computed(() => (this.$disabled() ? '' : undefined), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "attrDisabled" }] : /* istanbul ignore next */ []));
getToken(index) {
return this.tokens[index];
}
getTemplateContext(i) {
return {
$implicit: this.getToken(i - 1),
events: this.getTemplateEvents(i - 1),
index: i
};
}
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 inputEvent = event;
const target = event.target;
const value = target.value;
if (index === 0 && value.length > 1) {
this.handleOnPaste(value, event);
event.stopPropagation();
return;
}
this.tokens[index] = value;
this.updateModel(event);
if (inputEvent.inputType === 'deleteContentBackward') {
this.moveToPrev(event);
}
else if (inputEvent.inputType === 'insertText' || inputEvent.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() {
const currentValue = this.value();
if (currentValue !== null && currentValue !== undefined) {
if (Array.isArray(currentValue)) {
this.tokens = [...currentValue];
}
else {
this.tokens = currentValue.toString().split('');
}
}
else {
this.tokens = [];
}
}
getModelValue(i) {
return this.tokens[i - 1] || '';
}
getAutofocus(i) {
if (i === 1) {
return this.autofocus();
}
return false;
}
moveToPrev(event) {
const prevInput = this.findPrevInput(event.target);
if (prevInput) {
prevInput.focus();
prevInput.select();
}
}
moveToNext(event) {
const nextInput = this.findNextInput(event.target);
if (nextInput) {
nextInput.focus();
nextInput.select();
}
}
findNextInput(element) {
const nextElement = element.nextElementSibling;
if (!nextElement)
return;
return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
}
findPrevInput(element) {
const 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()) {
const paste = event.clipboardData?.getData('text') ?? '';
if (paste.length) {
this.handleOnPaste(paste, event);
}
event.preventDefault();
}
}
handleOnPaste(paste, event) {
const pastedCode = paste.substring(0, this.length() + 1);
if (!this.integerOnly() || !isNaN(Number(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(newValue, setModelValue) {
const incomingString = newValue == null ? '' : Array.isArray(newValue) ? newValue.join('') : newValue.toString();
if (incomingString === this.tokens.join('')) {
setModelValue(this.value());
return;
}
if (newValue) {
if (Array.isArray(newValue) && newValue.length > 0) {
this.value.set(newValue.slice(0, this.length()));
}
else {
this.value.set(newValue.toString().split('').slice(0, this.length()));
}
}
else {
this.value.set(newValue);
}
setModelValue(this.value());
this.updateTokens();
this.cd.markForCheck();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InputOtp, isStandalone: true, selector: "p-inputotp, p-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 }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(i of getRange(length()); track i) {
(!inputTemplate()) {
<input
type="text"
pInputText
[value]="getModelValue(i)"
[attr.maxlength]="i === 1 ? length() : 1"
[attr.type]="inputType()"
[class]="cn(cx('pcInputText'), styleClass())"
[pSize]="size()"
[variant]="$variant()"
[invalid]="invalid()"
[attr.inputmode]="inputMode()"
[attr.name]="name()"
[attr.tabindex]="tabindex()"
[attr.required]="attrRequired()"
[attr.readonly]="attrReadonly()"
[attr.disabled]="attrDisabled()"
(input)="onInput($event, i - 1)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(paste)="onPaste($event)"
(keydown)="onKeyDown($event)"
[pAutoFocus]="getAutofocus(i)"
[pt]="ptm('pcInputText')"
[unstyled]="unstyled()"
/>
} {
<ng-container *ngTemplateOutlet="inputTemplate(); context: getTemplateContext(i)"> </ng-container>
}
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtp, decorators: [{
type: Component,
args: [{
selector: 'p-inputotp, p-input-otp',
standalone: true,
imports: [NgTemplateOutlet, InputText, AutoFocus, SharedModule, BindModule],
template: `
(i of getRange(length()); track i) {
(!inputTemplate()) {
<input
type="text"
pInputText
[value]="getModelValue(i)"
[attr.maxlength]="i === 1 ? length() : 1"
[attr.type]="inputType()"
[class]="cn(cx('pcInputText'), styleClass())"
[pSize]="size()"
[variant]="$variant()"
[invalid]="invalid()"
[attr.inputmode]="inputMode()"
[attr.name]="name()"
[attr.tabindex]="tabindex()"
[attr.required]="attrRequired()"
[attr.readonly]="attrReadonly()"
[attr.disabled]="attrDisabled()"
(input)="onInput($event, i - 1)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(paste)="onPaste($event)"
(keydown)="onKeyDown($event)"
[pAutoFocus]="getAutofocus(i)"
[pt]="ptm('pcInputText')"
[unstyled]="unstyled()"
/>
} {
<ng-container *ngTemplateOutlet="inputTemplate(); context: getTemplateContext(i)"> </ng-container>
}
}
`,
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')"
}
}]
}], 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 }] }] } });
class InputOtpModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule], exports: [InputOtp, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InputOtpModule, decorators: [{
type: NgModule,
args: [{
imports: [InputOtp, SharedModule],
exports: [InputOtp, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { INPUT_OTP_VALUE_ACCESSOR, InputOtp, InputOtpClasses, InputOtpModule, InputOtpStyle };
//# sourceMappingURL=primeng-inputotp.mjs.map