primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
475 lines (467 loc) • 17.4 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { AutoFocus } from 'primeng/autofocus';
import { BaseComponent } from 'primeng/basecomponent';
import { InputText } from 'primeng/inputtext';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
.p-inputotp-input.p-inputtext-sm {
text-align: center;
width: ${dt('inputotp.input.sm.width')};
}
.p-inputotp-input.p-inputtext-lg {
text-align: center;
width: ${dt('inputotp.input.lg.width')};
}
`;
const classes = {
root: 'p-inputotp p-component',
pcInput: 'p-inputotp-input'
};
class InputOtpStyle extends BaseStyle {
name = 'inputotp';
theme = theme;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtpStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtpStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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["pcInput"] = "p-inputotp-input";
})(InputOtpClasses || (InputOtpClasses = {}));
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 BaseComponent {
/**
* When present, it specifies that the component should have invalid state style.
* @group Props
*/
invalid = false;
/**
* When present, it specifies that the component should be disabled.
* @group Props
*/
disabled = false;
/**
* When present, it specifies that an input field is read-only.
* @group Props
*/
readonly = false;
/**
* Specifies the input variant of the component.
* @group Props
*/
variant;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = null;
/**
* Number of characters to initiate.
* @group Props
*/
length = 4;
/**
* Style class of the input element.
* @group Props
*/
styleClass;
/**
* Mask pattern.
* @group Props
*/
mask = false;
/**
* When present, it specifies that an input field is integer-only.
* @group Props
*/
integerOnly = false;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus;
/**
* Defines the size of the component.
* @group Props
*/
size;
/**
* Callback to invoke on value change.
* @group Emits
*/
onChange = new EventEmitter();
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
* @group Emits
*/
onFocus = new EventEmitter();
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
* @group Emits
*/
onBlur = new EventEmitter();
/**
* Input template.
* @param {InputOtpInputTemplateContext} context - Context of the template
* @see {@link InputOtpInputTemplateContext}
* @group Templates
*/
inputTemplate;
templates;
_inputTemplate;
tokens = [];
onModelChange = () => { };
onModelTouched = () => { };
value;
get inputMode() {
return this.integerOnly ? 'numeric' : 'text';
}
get inputType() {
return this.mask ? 'password' : 'text';
}
_componentStyle = inject(InputOtpStyle);
ngAfterContentInit() {
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.onModelChange(newValue);
this.onChange.emit({
originalEvent: event,
value: newValue
});
}
writeValue(value) {
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;
}
this.updateTokens();
this.cd.markForCheck();
}
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;
}
return false;
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
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.code) {
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:
if ((this.integerOnly && !(Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtp, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: InputOtp, isStandalone: true, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: { invalid: "invalid", disabled: "disabled", readonly: "readonly", variant: "variant", tabindex: "tabindex", length: "length", styleClass: "styleClass", mask: "mask", integerOnly: "integerOnly", autofocus: ["autofocus", "autofocus", booleanAttribute], size: "size" }, outputs: { onChange: "onChange", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "p-inputotp p-component" }, providers: [INPUT_OTP_VALUE_ACCESSOR, InputOtpStyle], queries: [{ propertyName: "inputTemplate", first: true, predicate: ["input"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
<ng-container *ngFor="let i of getRange(length); trackBy: trackByFn">
<ng-container *ngIf="!inputTemplate && !_inputTemplate">
<input
type="text"
pInputText
[value]="getModelValue(i)"
[maxLength]="i === 1 ? length : 1"
[type]="inputType"
class="p-inputotp-input"
[pSize]="size"
[variant]="variant"
[readonly]="readonly"
[disabled]="disabled"
[tabindex]="tabindex"
(input)="onInput($event, i - 1)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(paste)="onPaste($event)"
(keydown)="onKeyDown($event)"
[pAutoFocus]="getAutofocus(i)"
[ngClass]="styleClass"
/>
</ng-container>
<ng-container *ngIf="inputTemplate || _inputTemplate">
<ng-container *ngTemplateOutlet="inputTemplate || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }"> </ng-container>
</ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtp, decorators: [{
type: Component,
args: [{
selector: 'p-inputOtp, p-inputotp, p-input-otp',
standalone: true,
imports: [CommonModule, InputText, AutoFocus, SharedModule],
template: `
<ng-container *ngFor="let i of getRange(length); trackBy: trackByFn">
<ng-container *ngIf="!inputTemplate && !_inputTemplate">
<input
type="text"
pInputText
[value]="getModelValue(i)"
[maxLength]="i === 1 ? length : 1"
[type]="inputType"
class="p-inputotp-input"
[pSize]="size"
[variant]="variant"
[readonly]="readonly"
[disabled]="disabled"
[tabindex]="tabindex"
(input)="onInput($event, i - 1)"
(focus)="onInputFocus($event)"
(blur)="onInputBlur($event)"
(paste)="onPaste($event)"
(keydown)="onKeyDown($event)"
[pAutoFocus]="getAutofocus(i)"
[ngClass]="styleClass"
/>
</ng-container>
<ng-container *ngIf="inputTemplate || _inputTemplate">
<ng-container *ngTemplateOutlet="inputTemplate || _inputTemplate; context: { $implicit: getToken(i - 1), events: getTemplateEvents(i - 1), index: i }"> </ng-container>
</ng-container>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [INPUT_OTP_VALUE_ACCESSOR, InputOtpStyle],
host: {
class: 'p-inputotp p-component'
}
}]
}], propDecorators: { invalid: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], variant: [{
type: Input
}], tabindex: [{
type: Input
}], length: [{
type: Input
}], styleClass: [{
type: Input
}], mask: [{
type: Input
}], integerOnly: [{
type: Input
}], autofocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], size: [{
type: Input
}], onChange: [{
type: Output
}], onFocus: [{
type: Output
}], onBlur: [{
type: Output
}], inputTemplate: [{
type: ContentChild,
args: ['input', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class InputOtpModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule], exports: [InputOtp, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputOtpModule, imports: [InputOtp, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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