now supporting input directive

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angularfy/ng-autonumeric",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/autonumeric/autonumeric.component.html

@@ -1,4 +1,4 @@
-<input #input  [type]="!disabled && !readonly ? 'text' :'hidden'" [disabled]="disabled" [required]="required" />
+<input #input [type]="!disabled && !readonly ? 'text' :'hidden'" [placeholder]="placeholder" [title]="title" [required]="required" />
 <ng-container *ngIf="disabled || readonly">
   <span> {{internal}}</span>
-</ng-container>
+</ng-container>

src/autonumeric/autonumeric.directive.ts

@@ -0,0 +1,134 @@
+/**
+ * @author Abdelghani AINOUSS
+ * [email protected]
+ */
+
+import {
+    ChangeDetectorRef,
+    ElementRef,
+    EventEmitter,
+    forwardRef,
+    HostListener,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    Renderer2,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation,
+    Directive,
+    AfterViewInit,
+} from '@angular/core';
+import { NgAutonumericOptionsSelect } from './autonumeric-options-select';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import AutoNumeric from 'autonumeric';
+import { BasicInput } from './basic-input';
+
+@Directive({
+    selector: 'input[ngAutonumeric]',
+    exportAs: 'ngAutonumeric',
+    providers: [{
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => NgAutonumericDirective),
+        multi: true
+    }],
+})
+export class NgAutonumericDirective extends BasicInput implements OnInit, OnChanges, ControlValueAccessor, AfterViewInit, OnDestroy {
+
+    @Input()
+    ngModel: number | string;
+    @Input()
+    ngAutonumeric: NgAutonumericOptionsSelect;
+    instance: any;
+    unlistenFormatted: () => void;
+    @Output()
+    format = new EventEmitter();
+    _onChange = (_) => {
+    };
+    _onTouched = () => {
+    };
+
+    constructor(private cd: ChangeDetectorRef, private renderer: Renderer2, private input: ElementRef) {
+        super();
+    }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit(): void {
+        if (AutoNumeric === undefined) {
+            throw "AutoNumeric is a peer dependency, please make sure you install it before using this library. Hint : npm install --save autonumeric@latest";
+        }
+        this.instance = new AutoNumeric(this.input.nativeElement, this.ngAutonumeric);
+        setTimeout(()=>{
+            this.instance.set(this.ngModel);
+        },0);
+        this.unlistenFormatted = this.renderer.listen(this.input.nativeElement, 'autoNumeric:formatted', ($event) => {
+            this.onFormatted($event);
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!this.instance) {
+            return;
+        }
+        if (changes.ngModel) {
+            this.instance.set(this.ngModel);
+        }
+        if (changes.ngAutonumeric) {
+            this.instance.update(this.ngAutonumeric);
+        }
+    }
+
+    set(value) {
+        if (this.instance) {
+            this.instance.set(value);
+        } else throw 'NgAutonumeric instance not available. try using two binding by providing [(ngModel)]';
+    }
+
+    @HostListener('change', ['$event.target.value'])
+    handleChange(value) {
+        this.writeValue(value);
+        if (this.instance) {
+            value = this.instance.getNumber();
+        }
+        this._onChange(value);
+        this._onTouched();
+    }
+
+    onFormatted($event) {
+        let value = $event;
+        if (this.instance) {
+            value = this.instance.getFormatted()
+        }
+        this.format.emit(value);
+    }
+
+    @HostListener('blur')
+    handleTouched() {
+        this._onTouched();
+    }
+
+    registerOnChange(fn: any): void {
+        this._onChange = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this._onTouched = fn;
+    }
+
+    setDisabledState(isDisabled: boolean): void {
+        this.disabled = isDisabled;
+    }
+
+    writeValue(obj: any): void {
+        this.ngModel = obj;
+    }
+
+    ngOnDestroy(): void {
+        if (this.unlistenFormatted)
+            this.unlistenFormatted();
+    }
+}

src/autonumeric/autonumeric.module.ts

@@ -1,11 +1,13 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {NgAutonumericComponent} from './autonumeric.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgAutonumericComponent } from './autonumeric.component';
+import { NgAutonumericDirective } from './autonumeric.directive';
 
 @NgModule({
-  declarations: [NgAutonumericComponent],
-  imports: [CommonModule],
-  exports: [NgAutonumericComponent]
+  declarations: [NgAutonumericComponent, NgAutonumericDirective],
+  imports: [CommonModule, FormsModule],
+  exports: [NgAutonumericComponent, NgAutonumericDirective]
 })
 export class NgAutonumericModule {
 }

src/autonumeric/autonumeric.service.ts

@@ -0,0 +1,15 @@
+/**
+ * @author Abdelghani AINOUSS 
+ * 
+ */
+import { Injectable } from '@angular/core';
+
+
+
+@Injectable()
+export class NgAutonumericService {
+
+    constructor(){
+
+    }
+}

src/autonumeric/basic-input.ts

@@ -16,4 +16,6 @@ export class BasicInput implements Partial<HTMLInputElement> {
   readonly: boolean;
   @Input()
   title: string;
+  @Input()
+  placeholder: string;
 }

src/autonumeric/index.ts

@@ -1 +1,7 @@
+export * from './autonumeric-default-settings'
+export * from './autonumeric-options-select'
+export * from './autonumeric.component'
+export * from './autonumeric.directive'
 export * from './autonumeric.module'
+export * from './autonumeric.service'
+export * from './basic-input'

src/index.ts

@@ -1 +1 @@
-export * from './autonumeric/autonumeric.module'
+export * from './autonumeric/index'

src/ng-package.json

@@ -4,7 +4,7 @@
   "deleteDestPath": false,
   "lib": {
     "entryFile": "./index.ts",
-    "umdId": "ngautonumeric",
-    "amdId": "ngautonumeric"
+    "umdId": "nga",
+    "amdId": "nga"
   }
 }

src/ng-package.prod.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../dist/ng-bootstrap",
+  "dest": "../dist/ng-autonumeric",
   "lib": {
-    "flatModuleFile": "ng-bootstrap",
+    "flatModuleFile": "ng-autonumeric",
     "entryFile": "./index.ts",
-    "umdId": "ngb",
-    "amdId": "ngb"
+    "umdId": "nga",
+    "amdId": "nga"
   }
 }

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angularfy/ng-autonumeric",
-  "version": "4.5.4",
+  "version": "1.0.1",
   "description": "Angular implementation of autoNumeric",
   "keywords": [
     "angular",
@@ -29,6 +29,7 @@
   "peerDependencies": {
     "@angular/common": "^4.0.1",
     "@angular/core": "^4.0.1",
+    "@angular/forms": "^4.0.1",
     "autonumeric": "^4.0.1"
   }
 }

src/public_api.ts

@@ -1 +1 @@
-export * from './autonumeric/autonumeric.module'
+export * from './index'