wninputpattern/fesm2022/wninputpattern.mjs

Simple directive for your input pattern.

import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output, HostListener, Injectable, Component, NgModule } from '@angular/core';

class EmailDirective {
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
        this.params = '';
        this.validater = new EventEmitter();
        this.regEx = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
    }
    onIputChange(event) {
        // const e = <KeyboardEvent>event;
        // const ch = String.fromCharCode(e.keyCode);
        // const regEx = new RegExp(this.regEx);
        // if (regEx.test(ch)) {
        //   e.preventDefault();
        // }
        const inputValue = this.el.nativeElement.value;
        if (!this.isValidEmail(inputValue)) {
            this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid red');
        }
        else {
            this.renderer.setStyle(this.el.nativeElement, 'border', '1px solid #ccc');
        }
    }
    isValidEmail(email) {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        return emailRegex.test(email);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EmailDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: EmailDirective, selector: "[Email]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "input": "onIputChange($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EmailDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[Email]',
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { params: [{
                type: Input,
                args: ['specialChar']
            }], validater: [{
                type: Output
            }], onIputChange: [{
                type: HostListener,
                args: ['input', ['$event']]
            }] } });

class SpecialDirective {
    constructor() {
        this.params = '';
        this.validater = new EventEmitter();
        //Accept ; , . () ' : - / + # @ & _ [ ] % *
        this.regEx = new RegExp(/[!${}^<>~=|"?\\]/g);
    }
    onKeyPress(event) {
        const e = event;
        if (e.key === 'Tab' || e.key === 'TAB') {
            return;
        }
        const ch = String.fromCharCode(e.keyCode);
        const regEx = new RegExp(this.regEx);
        if (regEx.test(ch)) {
            e.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SpecialDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SpecialDirective, selector: "[Special]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SpecialDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[Special]',
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input,
                args: ['specialChar']
            }], validater: [{
                type: Output
            }], onKeyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

class SpecialAllDirective {
    constructor() {
        this.params = '';
        this.validater = new EventEmitter();
        this.regEx = new RegExp(/[!#${}*&^<>~`=|;฿%()'+",./:?@_\[\]\/\-\\]/g);
    }
    onKeyPress(event) {
        const e = event;
        if (e.key === 'Tab' || e.key === 'TAB') {
            return;
        }
        const ch = String.fromCharCode(e.keyCode);
        const regEx = new RegExp(this.regEx);
        if (regEx.test(ch)) {
            e.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SpecialAllDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SpecialAllDirective, selector: "[SpecialAll]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SpecialAllDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[SpecialAll]',
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input,
                args: ['specialChar']
            }], validater: [{
                type: Output
            }], onKeyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

class NumberDirective {
    constructor() {
        this.params = '';
        this.validater = new EventEmitter();
        this.regEx = new RegExp(/^[0-9]*$/g);
    }
    onKeyPress(event) {
        const e = event;
        if (e.key === 'Tab' || e.key === 'TAB') {
            return;
        }
        const ch = String.fromCharCode(e.keyCode);
        const regEx = new RegExp(this.regEx);
        if (!regEx.test(ch)) {
            e.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: NumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: NumberDirective, selector: "[Number]", inputs: { params: ["specialNumber", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: NumberDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[Number]',
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input,
                args: ['specialNumber']
            }], validater: [{
                type: Output
            }], onKeyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

class EnglishDirective {
    constructor() {
        this.params = '';
        this.validater = new EventEmitter();
        this.regEx = new RegExp(/^[a-zA-Z().-\s]*$/);
    }
    onKeyPress(event) {
        const e = event;
        const ch = String.fromCharCode(e.keyCode);
        const regEx = new RegExp(this.regEx);
        if (!regEx.test(ch)) {
            e.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EnglishDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: EnglishDirective, selector: "[English]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: EnglishDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[English]',
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input,
                args: ['specialChar']
            }], validater: [{
                type: Output
            }], onKeyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

class ThaiDirective {
    constructor() {
        this.params = '';
        this.validater = new EventEmitter();
        this.regEx = new RegExp(/^[\u0E00-\u0E7F().-\s]*$/);
    }
    onKeyPress(event) {
        const e = event;
        const ch = String.fromCharCode(e.keyCode);
        const regEx = new RegExp(this.regEx);
        if (!regEx.test(ch)) {
            e.preventDefault();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ThaiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: ThaiDirective, selector: "[Thai]", inputs: { params: ["specialChar", "params"] }, outputs: { validater: "validater" }, host: { listeners: { "keypress": "onKeyPress($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ThaiDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[Thai]',
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input,
                args: ['specialChar']
            }], validater: [{
                type: Output
            }], onKeyPress: [{
                type: HostListener,
                args: ['keypress', ['$event']]
            }] } });

class WninputpatternService {
    constructor() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return []; } });

class WninputpatternComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: WninputpatternComponent, selector: "lib-wninputpattern", ngImport: i0, template: `
    <p>
      wninputpattern works!
    </p>
  `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-wninputpattern', template: `
    <p>
      wninputpattern works!
    </p>
  ` }]
        }] });

class WninputpatternModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternModule, declarations: [WninputpatternComponent,
            NumberDirective,
            ThaiDirective,
            EnglishDirective,
            SpecialDirective,
            SpecialAllDirective,
            EmailDirective], exports: [WninputpatternComponent,
            NumberDirective,
            ThaiDirective,
            EnglishDirective,
            SpecialDirective,
            SpecialAllDirective,
            EmailDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: WninputpatternModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        WninputpatternComponent,
                        NumberDirective,
                        ThaiDirective,
                        EnglishDirective,
                        SpecialDirective,
                        SpecialAllDirective,
                        EmailDirective
                    ],
                    imports: [],
                    exports: [
                        WninputpatternComponent,
                        NumberDirective,
                        ThaiDirective,
                        EnglishDirective,
                        SpecialDirective,
                        SpecialAllDirective,
                        EmailDirective
                    ]
                }]
        }] });

/*
 * Public API Surface of wninputpattern
 */

/**
 * Generated bundle index. Do not edit.
 */

export { EmailDirective, EnglishDirective, NumberDirective, SpecialAllDirective, SpecialDirective, ThaiDirective, WninputpatternComponent, WninputpatternModule, WninputpatternService };
//# sourceMappingURL=wninputpattern.mjs.map