feat(components/core): allow currencyDisplay to be specified for SkyNumericOptions (Thanks @Blackbaud-MitchellThomas)

libs/components/core/src/lib/modules/numeric/numeric.options.ts

@@ -20,6 +20,11 @@ export interface SkyNumericOptions {
  */
  currencySign?: 'accounting' | 'standard';
 
+ /**
+ * Specifies the display of the currency. Defaults to 'symbol'.
+ */
+ currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name';
+
  /**
  * Specifies the ISO4217 currency code to use for currency formatting.
  */
@@ -61,6 +66,8 @@ export class NumericOptions implements SkyNumericOptions {
 
  public currencySign?: 'accounting' | 'standard' = 'standard';
 
+ public currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name';
+
  public iso?: string = 'USD';
 
  public locale?: string;

libs/components/core/src/lib/modules/numeric/numeric.service.spec.ts

@@ -272,6 +272,29 @@ describe('Numeric service', () => {
  expect(skyNumeric.formatNumber(value, options)).toBe('£15.50');
  });
 
+ it('formats 15.50 as Canadian Dollars with 2 digits as $CA15.50 when the local is not CA and the full symbol is used', () => {
+ const value = 15.5;
+ const options = new NumericOptions();
+ options.digits = 2;
+ options.iso = 'CAD';
+ options.locale = 'en-US';
+ options.format = 'currency';
+
+ expect(skyNumeric.formatNumber(value, options)).toBe('CA$15.50');
+ });
+
+ it('formats 15.50 as Canadian Dollars with 2 digits as $15.50 when the local is not CA and the narrow symbol is used', () => {
+ const value = 15.5;
+ const options = new NumericOptions();
+ options.digits = 2;
+ options.iso = 'CAD';
+ options.locale = 'en-US';
+ options.format = 'currency';
+ options.currencyDisplay = 'narrowSymbol';
+
+ expect(skyNumeric.formatNumber(value, options)).toBe('$15.50');
+ });
+
  // Testing ability only after a certain value is specified
  // using the truncateAfter configuration property
  it('does not truncate 5000 to 5K when truncateAfter set to 10000', () => {
@@ -389,7 +412,7 @@ describe('Numeric service', () => {
  style: SkyIntlNumberFormatStyle,
  digits?: string | null,
  currency: string | null = null,
- currencyAsSymbol = false,
+ currencyDisplay = 'code',
  ) => {
  return value as string | null;
  },

libs/components/core/src/lib/modules/numeric/numeric.service.ts

@@ -124,11 +124,7 @@ export class SkyNumericService {
  SkyIntlNumberFormatStyle.Currency,
  digitsFormatted,
  numericOptions.iso,
- // Angular 5+ needs a string for this parameter, but Angular 4 needs a boolean.
- // To support both versions we can supply 'symbol' which will evaluate truthy for Angular 4
- // and the appropriate string value for Angular 5+.
- // See: https://angular.io/api/common/CurrencyPipe#parameters
- 'symbol' as any,
+ numericOptions.currencyDisplay ?? 'symbol',
  numericOptions.currencySign,
  ) as string;
  // ^^^^^^ Result can't be null since the sanitized input is always a number.

libs/components/core/src/lib/modules/shared/number-format/number-format-utility.spec.ts

@@ -13,7 +13,7 @@ function formatCurrency(
  SkyIntlNumberFormatStyle.Currency,
  digits,
  'USD',
- true,
+ 'symbol',
  currencySign || 'standard',
  );
 }

libs/components/core/src/lib/modules/shared/number-format/number-format-utility.ts

@@ -32,7 +32,7 @@ export class SkyNumberFormatUtility {
  style: SkyIntlNumberFormatStyle,
  digits?: string | null,
  currency: string | null = null,
- currencyAsSymbol = false,
+ currencyDisplay: 'code' | 'symbol' | 'narrowSymbol' | 'name' = 'code',
  currencySign?: 'accounting' | 'standard',
  ): string | null {
  if (value == null) {
@@ -86,7 +86,7 @@ export class SkyNumberFormatUtility {
  minimumFractionDigits: minFraction,
  maximumFractionDigits: maxFraction,
  currency: currency,
- currencyAsSymbol: currencyAsSymbol,
+ currencyDisplay: currencyDisplay,
  currencySign: currencySign,
  });
  }

libs/components/i18n/src/lib/modules/i18n/intl-number-formatter-options.ts

@@ -3,6 +3,6 @@ export interface SkyIntlNumberFormatterOptions {
  minimumFractionDigits?: number;
  maximumFractionDigits?: number;
  currency?: string | null;
- currencyAsSymbol?: boolean;
  currencySign?: 'standard' | 'accounting';
+ currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name';
 }

libs/components/i18n/src/lib/modules/i18n/intl-number-formatter.spec.ts

@@ -14,6 +14,7 @@ describe('Intl number formatter', function () {
  SkyIntlNumberFormatStyle.Currency,
  {
  currency: 'EUR',
+ currencyDisplay: 'code',
  },
  );
 
@@ -27,13 +28,41 @@ describe('Intl number formatter', function () {
  SkyIntlNumberFormatStyle.Currency,
  {
  currency: 'EUR',
- currencyAsSymbol: true,
+ currencyDisplay: 'symbol',
  },
  );
 
  verifyResult(result, '123.456,79 €');
  });
 
+ it('should format currency for a locale with a full symbol when the currency is not in the locale', function () {
+ const result = SkyIntlNumberFormatter.format(
+ 123456.789,
+ 'en-US',
+ SkyIntlNumberFormatStyle.Currency,
+ {
+ currency: 'CAD',
+ currencyDisplay: 'symbol',
+ },
+ );
+
+ verifyResult(result, 'CA$123,456.79');
+ });
+
+ it('should format currency for a locale with a narrow symbol when the currency is not in the locale', function () {
+ const result = SkyIntlNumberFormatter.format(
+ 123456.789,
+ 'en-US',
+ SkyIntlNumberFormatStyle.Currency,
+ {
+ currency: 'CAD',
+ currencyDisplay: 'narrowSymbol',
+ },
+ );
+
+ verifyResult(result, '$123,456.79');
+ });
+
  it('should handle errors from Intl API', function () {
  try {
  SkyIntlNumberFormatter.format(
@@ -74,7 +103,7 @@ describe('Intl number formatter', function () {
  SkyIntlNumberFormatStyle.Currency,
  {
  currency: 'USD',
- currencyAsSymbol: true,
+ currencyDisplay: 'symbol',
  currencySign: 'accounting',
  },
  );
@@ -89,7 +118,7 @@ describe('Intl number formatter', function () {
  SkyIntlNumberFormatStyle.Currency,
  {
  currency: 'USD',
- currencyAsSymbol: true,
+ currencyDisplay: 'symbol',
  currencySign: 'accounting',
  },
  );

libs/components/i18n/src/lib/modules/i18n/intl-number-formatter.ts

@@ -13,8 +13,8 @@ export abstract class SkyIntlNumberFormatter {
  minimumFractionDigits,
  maximumFractionDigits,
  currency,
- currencyAsSymbol = false,
  currencySign = 'standard',
+ currencyDisplay = 'code',
  } = opts;
 
  const options: Intl.NumberFormatOptions & { currencySign: string } = {
@@ -30,7 +30,7 @@ export abstract class SkyIntlNumberFormatter {
 
  if (style === SkyIntlNumberFormatStyle.Currency) {
  options.currency = typeof currency === 'string' ? currency : undefined;
- options.currencyDisplay = currencyAsSymbol ? 'symbol' : 'code';
+ options.currencyDisplay = currencyDisplay;
  }
 
  return new Intl.NumberFormat(locale, options).format(num);