@devjuliovilla/jv-ui 1.9.0 → 1.11.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,10 +42,13 @@ export class App {}
 | Category | Components |
 |---|---|
 | Buttons | `JvButton`, `JvButtonGroup`, `JvIconButton` |
-| Forms | `JvInput`, `JvTextarea`, `JvCode`, `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 |
+| Tabs | `JvTabs`, `JvTabPanelDirective` — horizontal tabs with keyboard navigation and animated transitions |
+| Slider | `JvImageSlider` — responsive image slider with thumbnails and keyboard navigation |
+| Gallery | `JvImageGallery` — horizontal image gallery with wheel scrolling and full-screen viewer |
 | Feedback | `JvAlert`, `JvBadge`, `JvLoader`, `JvToast` |
 | Dialogs | `JvDialog`, `JvConfirmDialog` |
 | Layout | `JvDashboardShell`, `JvSidebar`, `JvTopbar`, `JvBreadcrumb`, `JvPage` |
@@ -124,7 +127,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 |
@@ -292,6 +296,265 @@ import { JvPaginationComponent } from '@devjuliovilla/jv-ui';
 |---|---|
 | `pageChange` | `{ pageIndex: number; pageSize: number }` |
 
+## Tabs API
+
+```typescript
+import { JvTabsComponent, JvTabPanelDirective, JvTabItem } from '@devjuliovilla/jv-ui';
+```
+
+**Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `tabs` | `JvTabItem[]` | `[]` | Tab definitions (`{ id, label, icon?, disabled? }`) |
+| `activeTabId` | `string \| null` | `null` | Controlled active tab ID |
+| `keepMounted` | `boolean` | `true` | Keep all panels in DOM; `false` renders only active panel |
+| `transition` | `'none' \| 'fade' \| 'slide' \| null` | `null` | Panel transition animation (falls back to global config) |
+
+**Outputs:**
+
+| Output | Type |
+|---|---|
+| `activeTabChange` | `string` |
+
+**Content projection:** use `jvTabPanel` directive on `ng-template` to define panel content:
+
+```html
+<jv-tabs [tabs]="tabs" [activeTabId]="activeTabId()" (activeTabChange)="activeTabId.set($event)">
+  <ng-template jvTabPanel="overview">
+    <p>Overview content</p>
+  </ng-template>
+  <ng-template jvTabPanel="analytics">
+    <p>Analytics content</p>
+  </ng-template>
+</jv-tabs>
+```
+
+### Tab Transitions
+
+Tabs support animated transitions between panels. Configure globally via `provideJvUi()` or per-instance via the `transition` input:
+
+```typescript
+// Global default
+provideJvUi({ tabsTransition: 'fade' })
+```
+
+```typescript
+// Per-instance override
+<jv-tabs transition="slide" [keepMounted]="false">...</jv-tabs>
+```
+
+| Transition | `keepMounted=true` | `keepMounted=false` | Description |
+|---|---|---|---|
+| `'none'` | Instant switch | Instant switch | No animation |
+| `'fade'` | Opacity cross-fade | Opacity cross-fade | Smooth fade between panels |
+| `'slide'` | Falls back to `'fade'` | Directional slide | Slides left/right based on tab index |
+
+**Note:** `slide` requires `keepMounted=false` because it needs to animate both entering and exiting panels simultaneously. When used with `keepMounted=true`, it automatically falls back to `fade`.
+
+### Tabs Example
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { JvTabItem, JvTabPanelDirective, JvTabsComponent } from '@devjuliovilla/jv-ui';
+
+@Component({
+  standalone: true,
+  imports: [JvTabsComponent, JvTabPanelDirective],
+  template: `
+    <jv-tabs
+      [tabs]="tabs"
+      [activeTabId]="activeTabId()"
+      transition="fade"
+      (activeTabChange)="activeTabId.set($event)"
+    >
+      <ng-template jvTabPanel="overview">
+        <p>Overview content</p>
+      </ng-template>
+      <ng-template jvTabPanel="analytics">
+        <p>Analytics content</p>
+      </ng-template>
+    </jv-tabs>
+  `,
+})
+export class TabsExampleComponent {
+  readonly activeTabId = signal('overview');
+  readonly tabs: JvTabItem[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'analytics', label: 'Analytics', icon: 'chart-column' },
+  ];
+}
+```
+
+## Image Slider API
+
+```typescript
+import { JvImageSliderComponent, JvSliderImage } from '@devjuliovilla/jv-ui';
+```
+
+**JvSliderImage:**
+
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `src` | `string` | Yes | Image URL |
+| `alt` | `string` | Yes | Alternative text for accessibility |
+| `description` | `string` | No | Caption displayed below the image |
+| `thumbnail` | `string` | No | Custom thumbnail URL (defaults to `src`) |
+
+**Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `images` | `JvSliderImage[]` | `[]` | Array of images to display |
+| `showThumbnails` | `boolean` | `true` | Show thumbnail strip below slider |
+| `showDescription` | `boolean` | `true` | Show image description |
+
+**Outputs:**
+
+| Output | Type | Description |
+|---|---|---|
+| `imageChange` | `number` | Emits index when active image changes |
+
+**i18n support:**
+
+The component automatically translates aria labels using `JvTranslationService`:
+
+| Key | English | Spanish |
+|---|---|---|
+| `slider.prevImage` | Previous image | Imagen anterior |
+| `slider.nextImage` | Next image | Imagen siguiente |
+| `slider.thumbnailList` | Image thumbnails | Miniaturas de imagenes |
+
+### Features
+
+- **Keyboard navigation:** ArrowLeft/ArrowRight to navigate, Home/End for first/last image
+- **Responsive:** Images scale to fit container with `object-fit: contain`
+- **Thumbnails:** Scrollable thumbnail strip with active state indicator
+- **Single image mode:** Navigation controls hidden when only one image is provided
+- **Lazy loading:** Images use native `loading="lazy"` attribute
+- **i18n:** Aria labels automatically translated based on configured locale
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { JvImageSliderComponent, JvSliderImage } from '@devjuliovilla/jv-ui';
+
+@Component({
+  standalone: true,
+  imports: [JvImageSliderComponent],
+  template: `
+    <jv-image-slider
+      [images]="images"
+      [showThumbnails]="true"
+      [showDescription]="true"
+      (imageChange)="onImageChange($event)"
+    />
+  `,
+})
+export class SliderComponent {
+  readonly images: JvSliderImage[] = [
+    { src: 'photo1.jpg', alt: 'Sunset', description: 'Beautiful sunset over the ocean' },
+    { src: 'photo2.jpg', alt: 'Mountain', description: 'Snow-capped mountain peak' },
+    { src: 'photo3.jpg', alt: 'Forest', description: 'Dense forest trail' },
+  ];
+
+  onImageChange(index: number) {
+    console.log('Viewing image:', index);
+  }
+}
+```
+
+## Image Gallery API
+
+```typescript
+import { JvImageGalleryComponent, JvGalleryImage, JvGalleryAction } from '@devjuliovilla/jv-ui';
+```
+
+**JvGalleryImage:**
+
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `src` | `string` | Yes | Image URL |
+| `alt` | `string` | Yes | Alternative text for accessibility |
+| `thumbnail` | `string` | No | Custom thumbnail URL (defaults to `src`) |
+
+**JvGalleryAction:**
+
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `id` | `string` | Yes | Unique action identifier |
+| `label` | `string` | Yes | Button label text |
+| `icon` | `string` | No | Lucide icon name |
+| `tone` | `JvIntent` | No | Button variant |
+
+**Inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `images` | `JvGalleryImage[]` | `[]` | Array of images to display |
+| `stripHeightVh` | `number` | `25` | Height of the thumbnail strip in viewport-height units, clamped between `0` and `100` |
+| `actions` | `JvGalleryAction[]` | `[]` | Action buttons shown in dialog footer |
+
+**Outputs:**
+
+| Output | Type | Description |
+|---|---|---|
+| `imageClick` | `JvGalleryImage` | Emits when an image is clicked |
+| `actionClick` | `{ actionId: string; image: JvGalleryImage }` | Emits when an action button is clicked |
+
+### Features
+
+- **Horizontal strip:** Scrollable thumbnail strip with configurable height in `vh`
+- **Full-screen viewer:** Click any image to open in a dialog with dark background
+- **Navigation:** Prev/next buttons and keyboard arrows (← →) in the viewer
+- **Configurable actions:** Action buttons in dialog footer (favorite, edit, delete, etc.)
+- **Responsive:** Shows multiple columns on desktop, single column with scroll on mobile
+- **Lazy loading:** All images use native `loading="lazy"` attribute
+- **i18n:** Close and navigation labels automatically translated
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { JvImageGalleryComponent, JvGalleryImage, JvGalleryAction } from '@devjuliovilla/jv-ui';
+
+@Component({
+  standalone: true,
+  imports: [JvImageGalleryComponent],
+  template: `
+    <jv-image-gallery
+      [images]="images"
+      [stripHeightVh]="30"
+      [actions]="actions"
+      (imageClick)="onImageClick($event)"
+      (actionClick)="onActionClick($event)"
+    />
+  `,
+})
+export class GalleryComponent {
+  readonly images: JvGalleryImage[] = [
+    { src: 'photo1.jpg', alt: 'Sunset' },
+    { src: 'photo2.jpg', alt: 'Mountain' },
+    { src: 'photo3.jpg', alt: 'Forest' },
+  ];
+
+  readonly actions: JvGalleryAction[] = [
+    { id: 'favorite', label: 'Favorite', icon: 'heart', tone: 'danger' },
+    { id: 'edit', label: 'Edit', icon: 'pencil' },
+    { id: 'delete', label: 'Delete', icon: 'trash-2', tone: 'danger' },
+  ];
+
+  onImageClick(image: JvGalleryImage) {
+    console.log('Viewing:', image.alt);
+  }
+
+  onActionClick(event: { actionId: string; image: JvGalleryImage }) {
+    console.log(event.actionId, 'on', event.image.alt);
+  }
+}
+```
+
 ## Textarea API
 
 ```typescript