@devjuliovilla/jv-ui 1.8.0 → 1.10.0

package/README.md

@@ -20,7 +20,7 @@ import { ApplicationConfig } from '@angular/core';
 import { provideJvUi } from '@devjuliovilla/jv-ui';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideJvUi({ locale: 'en' })],
+  providers: [provideJvUi({ messagesLocale: 'en', formatLocale: 'en-US' })],
 };
 ```
 
@@ -42,7 +42,7 @@ export class App {}
 | Category | Components |
 |---|---|
 | Buttons | `JvButton`, `JvButtonGroup`, `JvIconButton` |
-| Forms | `JvInput`, `JvTextarea`, `JvSelect`, `JvCheckbox`, `JvRadio`, `JvSwitch`, `JvFormContainer` |
+| Forms | `JvInput`, `JvTextarea`, `JvCode`, `JvSelect`, `JvCheckbox`, `JvRadio`, `JvSwitch`, `JvDatePicker`, `JvModalSelector`, `JvFileInput`, `JvFormContainer` |
 | Data Grid | `JvGrid` — full-featured data table (see below) |
 | Containers | `JvCard`, `JvSection`, `JvDivider` |
 | List | `JvList`, `JvListItem` — list with title, description, icons, badges, and interactive items |
@@ -124,7 +124,8 @@ import { JvGridComponent } from '@devjuliovilla/jv-ui';
 | `editOptions` | `{ label: string; value: unknown }[]` | Options for select editor |
 | `width` | `string` | Column width (e.g. '8rem') |
 | `align` | `'start' \| 'center' \| 'end'` | Text alignment |
-| `type` | `'text' \| 'number' \| 'currency' \| 'date' \| 'datetime' \| 'boolean'` | Data type for formatting |
+| `type` | `'text' \| 'integer' \| 'number' \| 'currency' \| 'percent' \| 'date' \| 'time' \| 'datetime' \| 'boolean'` | Data type for formatting |
+| `formatOptions` | `Intl.NumberFormatOptions & Intl.DateTimeFormatOptions` | Per-column formatting overrides |
 | `format` | `(value, row) => string` | Custom display formatter |
 | `children` | `JvGridColumn<T>[]` | Child columns for grouped headers |
 | `resizable` | `boolean` | Allow column resize |
@@ -337,6 +338,95 @@ export class ProfileComponent {
 }
 ```
 
+## Code API
+
+```typescript
+import { JvCodeComponent } from '@devjuliovilla/jv-ui';
+```
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `code` | `string` | — | Code or text content to render |
+| `language` | `string` | `''` | Optional language badge |
+| `title` | `string` | `''` | Optional header title |
+| `font` | `'jetbrains-mono' \| 'fira-code' \| 'cascadia' \| 'consolas' \| 'system'` | `'jetbrains-mono'` | Mono font preset for the rendered block |
+| `editable` | `boolean` | `false` | Renders a textarea-style editing surface instead of read-only preview |
+| `width` | `string` | `'100%'` | CSS width applied to the component |
+| `height` | `string` | `'auto'` | CSS height for the editable surface or minimum preview height |
+
+Use `JvCode` for read-only payloads or long single-line content where horizontal scrolling should be preserved instead of wrapping.
+The library does not bundle font files. `JvCode` references common mono families and will use any web font you load at the application level.
+
+When `editable` is enabled, `JvCode` emits `codeChange` on every edit so the parent can keep the source text in sync.
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { JvCodeComponent } from '@devjuliovilla/jv-ui';
+
+@Component({
+  selector: 'app-payload-preview',
+  standalone: true,
+  imports: [JvCodeComponent],
+  template: `
+    <jv-code
+      [code]="payload"
+      language="json"
+      title="HTTP payload preview"
+      font="fira-code"
+      [editable]="true"
+      width="100%"
+      height="18rem"
+      (codeChange)="payload = $event"
+    />
+  `,
+})
+export class PayloadPreviewComponent {
+  payload = '{"status":"ok"}';
+}
+```
+
+If you want hosted fonts without shipping them in your package, load them at the app level, for example:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');
+```
+
+## Confirm Dialog Labels
+
+`JvDialogService.confirm()` already supports `confirmLabel` and `cancelLabel` overrides per dialog. If you omit them, the defaults come from the active translation dictionary using `dialog.confirm` and `dialog.cancel`.
+
+This lets you either:
+
+- override labels directly for a specific action like `Guardar evento` / `Descartar cambios`
+- or register translated defaults in your i18n dictionary for each supported language
+
+Example with business copy:
+
+```typescript
+const confirmed = await dialogService.confirm({
+  title: 'Guardar evento',
+  message: 'Se aplicaran cambios a la agenda del equipo.',
+  confirmLabel: 'Guardar evento',
+  cancelLabel: 'Descartar cambios',
+  tone: 'primary',
+});
+
+if (confirmed) {
+  saveEvent();
+}
+```
+
+Example using translated defaults from your dictionary:
+
+```typescript
+await dialogService.confirm({
+  message: 'This action will publish the current draft.',
+  tone: 'primary',
+});
+```
+
 ## Icon System
 
 ```typescript