# Formatting Utility

Reactive locale-aware formatting for Angular 19 applications using the SDK `TranslationService` as the single source of truth for active language.

This utility provides:

- `FormattingService` for formatting in TypeScript
- standalone reactive pipes: `stDate`, `stCurrency`, `stDecimal`, `stPercent`
- locale resolution wired through runtime translation JSON
- SDK-owned formatting contracts without exposing `dayjs` or Angular native locale pipes

---

## Quick Start

```typescript
import { provideRuntimeTranslation } from '@sixbell-telco/sdk/utils/translation';

bootstrapApplication(AppComponent, {
  providers: [provideRuntimeTranslation('/assets/translation/translation.json')],
});
```

```json
{
  "meta": {
    "hash": "showcase-translations-v2",
    "schemaVersion": "3"
  },
  "defaultLang": "es",
  "translationPaths": ["/assets/i18n/", "/assets/i18n/sdk/", "/assets/themes/i18n"],
  "locale": {
    "defaultLocale": "en-US",
    "languageToLocale": {
      "en": "en-US",
      "es": "es-CL",
      "pt": "pt-BR"
    }
  }
}
```

Template usage:

```html
{{ createdAt | stDate:'DD/MM/YYYY HH:mm:ss' }} {{ amount | stCurrency:'CLP':'symbol':'1.0-0' }} {{ total | stDecimal:'1.0-2' }} {{ ratio |
stPercent:'1.0-2' }}
```

TypeScript usage:

```typescript
import { Component, computed, inject } from '@angular/core';
import { FormattingService } from '@sixbell-telco/sdk/utils/formatting';

@Component({
  selector: 'app-example',
  template: `{{ formattedAmount() }}`,
})
export class ExampleComponent {
  private readonly formatting = inject(FormattingService);

  amount = 1234.5;

  formattedAmount = computed(() =>
    this.formatting.formatCurrency(this.amount, 'CLP', {
      display: 'symbol',
      digitsInfo: '1.0-0',
    }),
  );
}
```

---

## `stDate` formats

Supports both SDK token patterns and locale presets.

Token examples:

```html
{{ value | stDate:'DD/MM/YYYY' }} {{ value | stDate:'DD/MM/YY HH:mm:ss' }} {{ value | stDate:'MMMM YYYY' }}
```

Locale preset examples:

```html
{{ value | stDate:'locale-short' }} {{ value | stDate:'locale-medium' }} {{ value | stDate:'locale-long' }} {{ value | stDate:'locale-full' }}
```

---

## Notes

- `dayjs` is used internally by the SDK for token-based date formatting.
- Applications should not import or rely on `dayjs` directly for SDK formatting flows.
- Angular native pipes (`date`, `currency`, `number`, `percent`) are intentionally outside this API.
- Formatting follows `TranslationService.currentLocale()`, so changing language in the showcase header updates `stDate`, `stCurrency`, `stDecimal`, and `stPercent` outputs automatically.
- Showcase reference: `projects/showcase/src/app/features/formatting/formatting.component.ts`