Enhancement: better monetary field with currency code (#5858)

src-ui/src/app/components/common/input/monetary/monetary.component.html

@@ -0,0 +1,27 @@
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+        </button>
+      }
+    </div>
+    <div class="position-relative" [class.col-md-9]="horizontal">
+      <div class="input-group" [class.is-invalid]="error">
+        <span class="input-group-text fw-bold bg-light">{{monetaryValue | currency: currencyCode }}</span>
+        <input #currencyField class="form-control text-muted mw-60" tabindex="0" [(ngModel)]="currencyCode" maxlength="3" [class.is-invalid]="error" (change)="onChange(value)" [disabled]="disabled">
+        <input #inputField type="number" tabindex="0" class="form-control text-muted" step=".01" [id]="inputId" [(ngModel)]="monetaryValue" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
+      </div>
+      <div class="invalid-feedback position-absolute top-100">
+        {{error}}
+      </div>
+      @if (hint) {
+        <small class="form-text text-muted">{{hint}}</small>
+      }
+    </div>
+  </div>
+</div>

src-ui/src/app/components/common/input/monetary/monetary.component.scss

@@ -0,0 +1,11 @@
+.input-group-text {
+    font-size: inherit;
+}
+
+.text-muted:focus-within {
+    color: var(--bs-body-color) !important;
+}
+
+.mw-60 {
+    max-width: 60px;
+}

src-ui/src/app/components/common/input/monetary/monetary.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { CurrencyPipe } from '@angular/common'
+import { MonetaryComponent } from './monetary.component'
+
+describe('MonetaryComponent', () => {
+  let component: MonetaryComponent
+  let fixture: ComponentFixture<MonetaryComponent>
+  let input: HTMLInputElement
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MonetaryComponent],
+      providers: [CurrencyPipe],
+      imports: [FormsModule, ReactiveFormsModule, HttpClientTestingModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MonetaryComponent)
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    input = component.inputField.nativeElement
+  })
+
+  it('should set the currency code correctly', () => {
+    expect(component.currencyCode).toEqual('USD') // default
+    component.currencyCode = 'EUR'
+    expect(component.currencyCode).toEqual('EUR')
+
+    component.value = 'G123.4'
+    jest
+      .spyOn(document, 'activeElement', 'get')
+      .mockReturnValue(component.currencyField.nativeElement)
+    expect(component.currencyCode).toEqual('G')
+  })
+
+  it('should parse monetary value only when out of focus', () => {
+    component.monetaryValue = 10.5
+    jest.spyOn(document, 'activeElement', 'get').mockReturnValue(null)
+    expect(component.monetaryValue).toEqual('10.50')
+
+    component.value = 'GBP123.4'
+    jest
+      .spyOn(document, 'activeElement', 'get')
+      .mockReturnValue(component.inputField.nativeElement)
+    expect(component.monetaryValue).toEqual('123.4')
+  })
+
+  it('should report value including currency code and monetary value', () => {
+    component.currencyCode = 'EUR'
+    component.monetaryValue = 10.5
+    expect(component.value).toEqual('EUR10.50')
+  })
+})

src-ui/src/app/components/common/input/monetary/monetary.component.ts

@@ -0,0 +1,59 @@
+import {
+  Component,
+  DEFAULT_CURRENCY_CODE,
+  ElementRef,
+  forwardRef,
+  Inject,
+  ViewChild,
+} from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MonetaryComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-monetary',
+  templateUrl: './monetary.component.html',
+  styleUrls: ['./monetary.component.scss'],
+})
+export class MonetaryComponent extends AbstractInputComponent<string> {
+  @ViewChild('currencyField')
+  currencyField: ElementRef
+
+  constructor(
+    @Inject(DEFAULT_CURRENCY_CODE) public defaultCurrencyCode: string
+  ) {
+    super()
+  }
+
+  get currencyCode(): string {
+    const focused = document.activeElement === this.currencyField?.nativeElement
+    if (focused && this.value) return this.value.match(/^([A-Z]{0,3})/)?.[0]
+    return (
+      this.value
+        ?.toString()
+        .toUpperCase()
+        .match(/^([A-Z]{1,3})/)?.[0] ?? this.defaultCurrencyCode
+    )
+  }
+
+  set currencyCode(value: string) {
+    this.value = value + this.monetaryValue?.toString()
+  }
+
+  get monetaryValue(): string {
+    if (!this.value) return null
+    const focused = document.activeElement === this.inputField?.nativeElement
+    const val = parseFloat(this.value.toString().replace(/[^0-9.,]+/g, ''))
+    return focused ? val.toString() : val.toFixed(2)
+  }
+
+  set monetaryValue(value: number) {
+    this.value = this.currencyCode + value.toFixed(2)
+  }
+}