@devjuliovilla/jv-ui 1.7.1 → 1.9.0

package/README.md

@@ -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`, `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 |
@@ -337,6 +337,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
@@ -420,7 +509,7 @@ The library includes basic responsive behavior:
 - **Flex-wrap** is used extensively for natural overflow handling
 - **Dialog** and **Toast** constrain width with `min()` to never exceed the viewport
 
-## Services
+## Services
 
 | Service | Import Path | Description |
 |---|---|---|