Merge pull request #194 from dintecom/currency-mask-input

Allow currencyMask to be used as input instead of options
nbfontana · Jun 4, 2024 · d41c0a2 · d41c0a2
2 parents 8681e4c + daf0c06
commit d41c0a2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git 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
@@ -23,7 +23,7 @@ import {
 
 @Directive({
   standalone: true,
-  selector: '[currencyMask]',
+  selector: 'input[currencyMask]',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -35,22 +35,36 @@ 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<
     keyof NgxCurrencyConfig,
     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
@@ -49,8 +49,7 @@
           autofocus
           placeholder="R$ 0,00"
           formControlName="value"
-          currencyMask
-          [options]="ngxCurrencyOptions"
+          [currencyMask]="ngxCurrencyOptions"
         />
       </div>
     </div>