valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/currency-input/currency-input.component.ts

@@ -0,0 +1,327 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { IonInput, IonSelect, IonSelectOption, IonNote } from '@ionic/angular/standalone';
+import { Subscription } from 'rxjs';
+import { ComponentStates } from '../../types';
+import { CurrencyInputMetadata, CurrencyInputChangeEvent, CurrencyConfig, COMMON_CURRENCIES } from './types';
+
+@Component({
+  selector: 'val-currency-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, IonInput, IonSelect, IonSelectOption, IonNote],
+  template: `
+    <div class="currency-input-container" [class]="props.cssClass" [class.has-error]="hasError">
+      @if (props.label) {
+        <label class="currency-label">{{ getLabel() }}</label>
+      }
+
+      <div class="currency-input-wrapper" [class.disabled]="props.state === states.DISABLED">
+        @if (props.showCurrencySelector) {
+          <div class="currency-selector">
+            <ion-select
+              [formControl]="currencyControl"
+              interface="popover"
+              [disabled]="props.state === states.DISABLED"
+              (ionChange)="onCurrencyChange($event)"
+            >
+              @for (curr of getCurrencyList(); track curr.code) {
+                <ion-select-option [value]="curr.code">
+                  {{ curr.code }} ({{ curr.symbol }})
+                </ion-select-option>
+              }
+            </ion-select>
+          </div>
+        } @else if (props.showSymbol !== false) {
+          <div
+            class="currency-symbol"
+            [class.prefix]="getSymbolPosition() === 'prefix'"
+            [class.suffix]="getSymbolPosition() === 'suffix'"
+          >
+            @if (getSymbolPosition() === 'prefix') {
+              {{ getCurrencySymbol() }}
+            }
+          </div>
+        }
+
+        <div class="amount-input">
+          <ion-input
+            [formControl]="displayControl"
+            type="text"
+            inputmode="decimal"
+            [placeholder]="getPlaceholder()"
+            [disabled]="props.state === states.DISABLED"
+            [readonly]="props.state === states.WORKING"
+            (ionInput)="onInput($event)"
+            (ionBlur)="onBlur()"
+            (ionFocus)="onFocus()"
+          ></ion-input>
+        </div>
+
+        @if (props.showSymbol !== false && getSymbolPosition() === 'suffix' && !props.showCurrencySelector) {
+          <div class="currency-symbol suffix">
+            {{ getCurrencySymbol() }}
+          </div>
+        }
+      </div>
+
+      @if (props.hint && !hasError) {
+        <ion-note class="hint">{{ getHint() }}</ion-note>
+      }
+
+      @if (hasError && props.showErrors) {
+        <ion-note class="error-message" color="danger">
+          {{ getErrorMessage() }}
+        </ion-note>
+      }
+    </div>
+  `,
+  styleUrls: ['./currency-input.component.scss'],
+})
+/**
+ * val-currency-input
+ *
+ * A currency/money input with formatting, symbol display, and optional currency selector.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-currency-input
+ *   [props]="{
+ *     control: priceControl,
+ *     currencyCode: 'USD',
+ *     placeholder: '0.00'
+ *   }"
+ * ></val-currency-input>
+ * ```
+ *
+ * @example With currency selector
+ * ```html
+ * <val-currency-input
+ *   [props]="{
+ *     control: amountControl,
+ *     label: 'Amount',
+ *     showCurrencySelector: true,
+ *     currencies: myCurrencies,
+ *     min: 0,
+ *     max: 10000,
+ *     showErrors: true
+ *   }"
+ *   (currencyChange)="onCurrencyChange($event)"
+ * ></val-currency-input>
+ * ```
+ */
+export class CurrencyInputComponent implements OnInit, OnDestroy {
+  @Input() props: CurrencyInputMetadata;
+
+  @Output() currencyChange = new EventEmitter<CurrencyInputChangeEvent>();
+
+  states = ComponentStates;
+
+  displayControl = new FormControl<string>('');
+  currencyControl = new FormControl<string>('');
+
+  private valueSubscription: Subscription | null = null;
+  private isFocused = false;
+
+  ngOnInit(): void {
+    // Set default currency
+    const defaultCurrency = this.props.currencyCode || this.props.currency?.code || 'USD';
+    this.currencyControl.setValue(defaultCurrency);
+
+    // Format initial value
+    if (this.props.control?.value !== null && this.props.control?.value !== undefined) {
+      this.displayControl.setValue(this.formatValue(this.props.control.value));
+    }
+
+    // Subscribe to main control changes
+    this.valueSubscription = this.props.control?.valueChanges.subscribe(value => {
+      if (!this.isFocused && value !== null && value !== undefined) {
+        this.displayControl.setValue(this.formatValue(value));
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.valueSubscription?.unsubscribe();
+  }
+
+  getLabel(): string {
+    return this.props.label || '';
+  }
+
+  getPlaceholder(): string {
+    return this.props.placeholder || this.getDefaultPlaceholder();
+  }
+
+  getHint(): string {
+    return this.props.hint || '';
+  }
+
+  private getDefaultPlaceholder(): string {
+    const decimals = this.getDecimalPlaces();
+    return decimals > 0 ? `0.${'0'.repeat(decimals)}` : '0';
+  }
+
+  getCurrencyList(): CurrencyConfig[] {
+    return this.props.currencies || COMMON_CURRENCIES;
+  }
+
+  getSelectedCurrency(): CurrencyConfig {
+    const code = this.currencyControl.value || 'USD';
+    return (
+      this.props.currency ||
+      this.getCurrencyList().find(c => c.code === code) ||
+      COMMON_CURRENCIES[0]
+    );
+  }
+
+  getCurrencySymbol(): string {
+    return this.getSelectedCurrency().symbol;
+  }
+
+  getSymbolPosition(): 'prefix' | 'suffix' {
+    return this.getSelectedCurrency().symbolPosition || 'prefix';
+  }
+
+  getDecimalPlaces(): number {
+    return this.props.decimalPlaces ?? this.getSelectedCurrency().decimalPlaces ?? 2;
+  }
+
+  get hasError(): boolean {
+    return !!(this.props.control?.touched && this.props.control?.invalid);
+  }
+
+  getErrorMessage(): string {
+    if (!this.props.control?.errors || !this.props.errors) {
+      return '';
+    }
+
+    const errorKeys = Object.keys(this.props.control.errors);
+    for (const key of errorKeys) {
+      if (this.props.errors[key]) {
+        return this.props.errors[key];
+      }
+    }
+
+    return '';
+  }
+
+  onInput(event: CustomEvent): void {
+    const inputValue = event.detail.value || '';
+
+    // Parse the numeric value
+    const numericValue = this.parseValue(inputValue);
+
+    // Update the main control with raw number
+    this.props.control?.setValue(numericValue);
+
+    // Emit change
+    this.emitChange(numericValue);
+  }
+
+  onFocus(): void {
+    this.isFocused = true;
+
+    // Show raw number for editing
+    const value = this.props.control?.value;
+    if (value !== null && value !== undefined) {
+      this.displayControl.setValue(String(value));
+    }
+  }
+
+  onBlur(): void {
+    this.isFocused = false;
+    this.props.control?.markAsTouched();
+
+    // Format the display value
+    const value = this.props.control?.value;
+    if (value !== null && value !== undefined) {
+      this.displayControl.setValue(this.formatValue(value));
+    }
+  }
+
+  onCurrencyChange(event: CustomEvent): void {
+    // Reformat with new currency settings
+    const value = this.props.control?.value;
+    if (value !== null && value !== undefined) {
+      this.displayControl.setValue(this.formatValue(value));
+    }
+
+    this.emitChange(value);
+  }
+
+  private parseValue(input: string): number | null {
+    if (!input || input.trim() === '') {
+      return null;
+    }
+
+    const currency = this.getSelectedCurrency();
+
+    // Remove currency symbol
+    let cleaned = input.replace(currency.symbol, '');
+
+    // Remove thousands separator
+    const thousandsSep = this.props.showThousandsSeparator !== false ? (currency.thousandsSeparator || ',') : '';
+    if (thousandsSep) {
+      cleaned = cleaned.split(thousandsSep).join('');
+    }
+
+    // Normalize decimal separator
+    const decimalSep = currency.decimalSeparator || '.';
+    cleaned = cleaned.replace(decimalSep, '.');
+
+    // Remove any remaining non-numeric characters (except minus and decimal)
+    cleaned = cleaned.replace(/[^\d.\-]/g, '');
+
+    // Handle negative
+    if (!this.props.allowNegative) {
+      cleaned = cleaned.replace('-', '');
+    }
+
+    const value = parseFloat(cleaned);
+
+    if (isNaN(value)) {
+      return null;
+    }
+
+    // Apply min/max constraints
+    if (this.props.min !== undefined && value < this.props.min) {
+      return this.props.min;
+    }
+    if (this.props.max !== undefined && value > this.props.max) {
+      return this.props.max;
+    }
+
+    return value;
+  }
+
+  private formatValue(value: number): string {
+    const currency = this.getSelectedCurrency();
+    const decimals = this.getDecimalPlaces();
+
+    // Format the number
+    let formatted = value.toFixed(decimals);
+
+    // Replace decimal separator
+    const decimalSep = currency.decimalSeparator || '.';
+    formatted = formatted.replace('.', decimalSep);
+
+    // Add thousands separator
+    if (this.props.showThousandsSeparator !== false) {
+      const thousandsSep = currency.thousandsSeparator || ',';
+      const parts = formatted.split(decimalSep);
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      formatted = parts.join(decimalSep);
+    }
+
+    return formatted;
+  }
+
+  private emitChange(value: number | null): void {
+    this.currencyChange.emit({
+      value,
+      formattedValue: value !== null ? this.formatValue(value) : '',
+      currency: this.getSelectedCurrency(),
+    });
+  }
+}

package/src/lib/components/molecules/currency-input/currency-input.stories.ts

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CurrencyInputComponent } from './currency-input.component';
+import { CurrencyInputMetadata, COMMON_CURRENCIES } from './types';
+
+const createCurrencyInputProps = (overrides: Partial<CurrencyInputMetadata> = {}): CurrencyInputMetadata => ({
+  control: new FormControl<number | null>(null),
+  token: 'currency-input',
+  label: 'Amount',
+  placeholder: '0.00',
+  currencyCode: 'USD',
+  showSymbol: true,
+  showThousandsSeparator: true,
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const defaultProps = createCurrencyInputProps();
+const withValueProps = createCurrencyInputProps({
+  control: new FormControl<number | null>(1234.56),
+  label: 'Price',
+});
+const usdProps = createCurrencyInputProps({
+  currencyCode: 'USD',
+  label: 'US Dollars',
+  placeholder: '0.00',
+});
+const eurProps = createCurrencyInputProps({
+  currencyCode: 'EUR',
+  label: 'Euros',
+  placeholder: '0,00',
+});
+const mxnProps = createCurrencyInputProps({
+  currencyCode: 'MXN',
+  label: 'Pesos Mexicanos',
+  placeholder: '0.00',
+});
+const withSelectorProps = createCurrencyInputProps({
+  showCurrencySelector: true,
+  label: 'Multi-currency',
+  placeholder: '0.00',
+});
+const withMinMaxProps = createCurrencyInputProps({
+  label: 'Amount (min: $10, max: $1000)',
+  min: 10,
+  max: 1000,
+  hint: 'Enter an amount between $10 and $1000',
+});
+const noDecimalsProps = createCurrencyInputProps({
+  currencyCode: 'JPY',
+  label: 'Japanese Yen',
+  decimalPlaces: 0,
+  placeholder: '0',
+});
+
+// Showcase props
+const showcasePriceProps = createCurrencyInputProps({
+  control: new FormControl<number | null>(99.99),
+  label: 'Product Price',
+  currencyCode: 'USD',
+});
+const showcaseSalaryProps = createCurrencyInputProps({
+  control: new FormControl<number | null>(50000),
+  label: 'Annual Salary',
+  currencyCode: 'USD',
+});
+const showcaseMultiProps = createCurrencyInputProps({
+  showCurrencySelector: true,
+  label: 'International Payment',
+});
+
+const meta: Meta<CurrencyInputComponent> = {
+  title: 'Molecules/CurrencyInput',
+  component: CurrencyInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ReactiveFormsModule, CurrencyInputComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Currency input configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'CurrencyInputMetadata',
+          detail: `{
+  control: FormControl<number | null>;
+  label?: string;
+  placeholder?: string;
+  currencyCode?: string;
+  showCurrencySelector?: boolean;
+  showSymbol?: boolean;
+  showThousandsSeparator?: boolean;
+  decimalPlaces?: number;
+  min?: number;
+  max?: number;
+  allowNegative?: boolean;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-currency-input
+
+A currency/money input with formatting, symbol display, and optional currency selector.
+
+### Features
+
+- **Currency Symbol**: Displays currency symbol (prefix or suffix)
+- **Thousands Separator**: Automatic formatting with commas/periods
+- **Decimal Support**: Configurable decimal places
+- **Currency Selector**: Optional dropdown to switch currencies
+- **Min/Max Validation**: Enforce value limits
+- **Form Integration**: Works with Angular Reactive Forms
+
+### Usage
+
+\`\`\`html
+<val-currency-input
+  [props]="{
+    control: priceControl,
+    currencyCode: 'USD',
+    label: 'Price',
+    placeholder: '0.00'
+  }"
+  (currencyChange)="onCurrencyChange($event)"
+></val-currency-input>
+\`\`\`
+
+### Supported Currencies
+
+${COMMON_CURRENCIES.map(c => `- ${c.code}: ${c.name} (${c.symbol})`).join('\n')}
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CurrencyInputComponent>;
+
+export const Default: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: defaultProps },
+  }),
+};
+
+export const WithValue: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: withValueProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Currency input with a pre-filled value showing formatting.',
+      },
+    },
+  },
+};
+
+export const USDollars: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: usdProps },
+  }),
+};
+
+export const Euros: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: eurProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Euro currency with suffix symbol and European number formatting.',
+      },
+    },
+  },
+};
+
+export const MexicanPesos: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: mxnProps },
+  }),
+};
+
+export const WithCurrencySelector: Story = {
+  render: () => ({
+    template: `<div style="max-width: 350px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: withSelectorProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Currency input with a dropdown to select different currencies.',
+      },
+    },
+  },
+};
+
+export const WithMinMax: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: withMinMaxProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Currency input with minimum and maximum value constraints.',
+      },
+    },
+  },
+};
+
+export const NoDecimals: Story = {
+  render: () => ({
+    template: `<div style="max-width: 300px;"><val-currency-input [props]="currencyProps"></val-currency-input></div>`,
+    props: { currencyProps: noDecimalsProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Japanese Yen with no decimal places.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
+        <h3 style="margin: 0; font-family: system-ui;">Currency Inputs</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 24px;">
+          <div>
+            <val-currency-input [props]="price"></val-currency-input>
+          </div>
+
+          <div>
+            <val-currency-input [props]="salary"></val-currency-input>
+          </div>
+
+          <div>
+            <val-currency-input [props]="multi"></val-currency-input>
+          </div>
+        </div>
+
+        <div style="background: #f5f5f5; padding: 16px; border-radius: 8px;">
+          <h4 style="margin: 0 0 12px; font-family: system-ui; font-size: 14px;">Available Currencies</h4>
+          <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+            <span style="font-family: monospace; font-size: 12px; background: white; padding: 4px 8px; border-radius: 4px;">USD $</span>
+            <span style="font-family: monospace; font-size: 12px; background: white; padding: 4px 8px; border-radius: 4px;">EUR €</span>
+            <span style="font-family: monospace; font-size: 12px; background: white; padding: 4px 8px; border-radius: 4px;">MXN $</span>
+            <span style="font-family: monospace; font-size: 12px; background: white; padding: 4px 8px; border-radius: 4px;">GBP £</span>
+            <span style="font-family: monospace; font-size: 12px; background: white; padding: 4px 8px; border-radius: 4px;">JPY ¥</span>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      price: showcasePriceProps,
+      salary: showcaseSalaryProps,
+      multi: showcaseMultiProps,
+    },
+  }),
+};