From daf0c06a45db94fdc9e6e52455b54969c291d4bb Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem@dintecom.com>
Date: Mon, 3 Jun 2024 07:47:59 -0400
Subject: [PATCH] feat: allow currencyMask to be used as input instead of
 options

---
 README.md                                     |  6 +---
 .../src/lib/ngx-currency.directive.ts         | 32 +++++++++++++------
 src/app/app.component.html                    |  3 +-
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index f3ce014..e55a061 100644
--- a/README.md
+++ b/README.md
@@ -58,11 +58,7 @@ You can set options...
 
 ```html
 <!-- example for pt-BR money -->
-<input
-  currencyMask
-  formControlName="value"
-  [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
-/>
+<input [currencyMask]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }" formControlName="value" />
 ```
 
 Available options:
diff --git a/projects/ngx-currency/src/lib/ngx-currency.directive.ts b/projects/ngx-currency/src/lib/ngx-currency.directive.ts
index 50eade5..e242d1b 100644
--- a/projects/ngx-currency/src/lib/ngx-currency.directive.ts
+++ b/projects/ngx-currency/src/lib/ngx-currency.directive.ts
@@ -23,7 +23,7 @@ import {
 
 @Directive({
   standalone: true,
-  selector: '[currencyMask]',
+  selector: 'input[currencyMask]',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -35,7 +35,20 @@ import {
 export class NgxCurrencyDirective
   implements AfterViewInit, ControlValueAccessor, DoCheck, OnInit
 {
-  @Input() options: Partial<NgxCurrencyConfig> = {};
+  @Input()
+  set currencyMask(value: Partial<NgxCurrencyConfig> | string) {
+    if (typeof value === 'string') return;
+
+    this._options = value;
+  }
+
+  /**
+   * @deprecated Use currencyMask input instead
+   */
+  @Input()
+  set options(value: Partial<NgxCurrencyConfig>) {
+    this._options = value;
+  }
 
   private _inputHandler!: InputHandler;
   private readonly _keyValueDiffer: KeyValueDiffer<
@@ -43,14 +56,15 @@ export class NgxCurrencyDirective
     unknown
   >;
 
-  private _optionsTemplate: NgxCurrencyConfig;
+  private _options: Partial<NgxCurrencyConfig> = {};
+  private readonly _optionsTemplate: NgxCurrencyConfig;
 
   constructor(
     @Optional()
     @Inject(NGX_CURRENCY_CONFIG)
     globalOptions: Partial<NgxCurrencyConfig>,
     keyValueDiffers: KeyValueDiffers,
-    private readonly _elementRef: ElementRef
+    private readonly _elementRef: ElementRef<HTMLInputElement>,
   ) {
     this._optionsTemplate = {
       align: 'right',
@@ -72,23 +86,23 @@ export class NgxCurrencyDirective
   ngOnInit() {
     this._inputHandler = new InputHandler(this._elementRef.nativeElement, {
       ...this._optionsTemplate,
-      ...this.options,
+      ...this._options,
     });
   }
 
   ngAfterViewInit() {
     this._elementRef.nativeElement.style.textAlign =
-      this.options?.align ?? this._optionsTemplate.align;
+      this._options?.align ?? this._optionsTemplate.align;
   }
 
   ngDoCheck() {
-    if (this._keyValueDiffer.diff(this.options)) {
+    if (this._keyValueDiffer.diff(this._options)) {
       this._elementRef.nativeElement.style.textAlign =
-        this.options?.align ?? this._optionsTemplate.align;
+        this._options?.align ?? this._optionsTemplate.align;
 
       this._inputHandler.updateOptions({
         ...this._optionsTemplate,
-        ...this.options,
+        ...this._options,
       });
     }
   }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 317e881..457ca84 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -49,8 +49,7 @@
           autofocus
           placeholder="R$ 0,00"
           formControlName="value"
-          currencyMask
-          [options]="ngxCurrencyOptions"
+          [currencyMask]="ngxCurrencyOptions"
         />
       </div>
     </div>