validator-pk
Version:
A lightweight library for validating and formatting Pakistani phone numbers and CNIC.
226 lines (218 loc) • 9.72 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, forwardRef, Component, Output, Input, Directive, HostListener, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class ValidatorPKService {
constructor() { }
}
ValidatorPKService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
ValidatorPKService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
function formatPhoneNumber(phoneNumber) {
let formattedNumber = phoneNumber;
if (phoneNumber.startsWith('+92')) {
formattedNumber = phoneNumber.replace(/^(\+92)(\d{3})(\d{7})$/, '$1 $2 $3');
}
else if (phoneNumber.startsWith('03')) {
formattedNumber = phoneNumber.replace(/^(03)(\d{2})(\d{7})$/, '$1$2 $3');
}
return formattedNumber;
}
function validatePhoneNumber(phoneNumber) {
const validPattern = /^(\+92\s?\d{3}\s?\d{7}|03\d{2}\s?\d{7})$/;
return { isValid: validPattern.test(phoneNumber.replace(/\s+/g, '')) };
}
function validateCNIC(cnic) {
const cnicRegex = /^\d{5}-?\d{7}-?\d$/;
return { isValid: cnicRegex.test(cnic) };
}
function formatCNIC(cnic) {
const sanitizedCNIC = cnic.replace(/-/g, '');
return sanitizedCNIC.replace(/^(\d{5})(\d{7})(\d)$/, '$1-$2-$3');
}
class ValidatorPKComponent {
constructor() {
this.validChange = new EventEmitter();
this.errorMessage = '';
this.class = '';
this.placeholder = 'Enter a phone number';
this.autoFormat = false;
this.type = 'phone';
this.isValid = false;
this.phoneNumber = '';
this.showError = false;
this.onChange = () => { };
this.onTouched = () => { };
}
get valid() {
return this.isValid;
}
// Prevent external modification of `valid`
set valid(value) {
console.warn('valid is read-only and cannot be set externally.');
}
onInputChange(event) {
const inputElement = event.target;
let value = inputElement?.value || '';
this.phoneNumber = value;
if (this.type === 'phone') {
const validation = validatePhoneNumber(this.phoneNumber);
this.isValid = validation.isValid;
if (this.isValid && this.autoFormat) {
this.phoneNumber = formatPhoneNumber(this.phoneNumber);
value = this.phoneNumber;
}
}
else if (this.type === 'cnic') {
const validation = validateCNIC(this.phoneNumber);
this.isValid = validation.isValid;
if (this.isValid && this.autoFormat) {
this.phoneNumber = formatCNIC(this.phoneNumber);
value = this.phoneNumber;
}
}
this.onChange(value);
this.validChange.emit(this.isValid);
this.showError = !this.isValid;
}
writeValue(value) {
this.phoneNumber = value || '';
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
}
ValidatorPKComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ValidatorPKComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ValidatorPKComponent, selector: "lib-validatorPK", inputs: { errorMessage: "errorMessage", class: "class", placeholder: "placeholder", autoFormat: "autoFormat", type: "type", valid: "valid" }, outputs: { validChange: "validChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValidatorPKComponent),
multi: true,
},
], ngImport: i0, template: `
<ng-container>
<input
id="phone"
type="text"
[class]="class"
[ngClass]="{
'is-invalid': showError
}"
[value]="phoneNumber"
(input)="onInputChange($event)"
[placeholder]="placeholder"
/>
<p *ngIf="errorMessage && showError" style="color: red;">{{ errorMessage }}</p>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-validatorPK', template: `
<ng-container>
<input
id="phone"
type="text"
[class]="class"
[ngClass]="{
'is-invalid': showError
}"
[value]="phoneNumber"
(input)="onInputChange($event)"
[placeholder]="placeholder"
/>
<p *ngIf="errorMessage && showError" style="color: red;">{{ errorMessage }}</p>
</ng-container>
`, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValidatorPKComponent),
multi: true,
},
] }]
}], propDecorators: { validChange: [{
type: Output
}], errorMessage: [{
type: Input
}], class: [{
type: Input
}], placeholder: [{
type: Input
}], autoFormat: [{
type: Input
}], type: [{
type: Input
}], valid: [{
type: Input
}] } });
class ValidatorPkDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
}
onInputChange(value) {
const validation = validatePhoneNumber(value);
if (validation.isValid) {
this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid green');
}
else {
this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid red');
}
}
}
ValidatorPkDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPkDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
ValidatorPkDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ValidatorPkDirective, selector: "[validatePhone]", host: { listeners: { "input": "onInputChange($event.target.value)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPkDirective, decorators: [{
type: Directive,
args: [{
selector: '[validatePhone]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { onInputChange: [{
type: HostListener,
args: ['input', ['$event.target.value']]
}] } });
class ValidatorPKModule {
}
ValidatorPKModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ValidatorPKModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKModule, declarations: [ValidatorPKComponent,
ValidatorPkDirective], imports: [FormsModule,
ReactiveFormsModule,
CommonModule], exports: [ValidatorPKComponent,
ValidatorPkDirective] });
ValidatorPKModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKModule, imports: [FormsModule,
ReactiveFormsModule,
CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidatorPKModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ValidatorPKComponent,
ValidatorPkDirective
],
imports: [
FormsModule,
ReactiveFormsModule,
CommonModule
],
exports: [
ValidatorPKComponent,
ValidatorPkDirective
]
}]
}] });
/*
* Public API Surface of validator-pk
*/
/**
* Generated bundle index. Do not edit.
*/
export { ValidatorPKComponent, ValidatorPKModule, ValidatorPKService, ValidatorPkDirective, formatCNIC, formatPhoneNumber, validateCNIC, validatePhoneNumber };
//# sourceMappingURL=validator-pk.mjs.map