@devjuliovilla/jv-ui 1.5.6 → 1.6.1

package/README.md

@@ -44,7 +44,8 @@ export class App {}
 | Buttons | `JvButton`, `JvButtonGroup`, `JvIconButton` |
 | Forms | `JvInput`, `JvTextarea`, `JvSelect`, `JvCheckbox`, `JvRadio`, `JvSwitch`, `JvFormContainer` |
 | Data Grid | `JvGrid` — full-featured data table (see below) |
-| Containers | `JvCard`, `JvSection`, `JvDivider` |
+| Containeres | `JvCard`, `JvSection`, `JvDivider` |
+| List | `JvList`, `JvListItem` — list with title, description, icons, badges, and interactive items |
 | Feedback | `JvAlert`, `JvBadge`, `JvLoader`, `JvToast` |
 | Dialogs | `JvDialog`, `JvConfirmDialog` |
 | Layout | `JvDashboardShell`, `JvSidebar`, `JvTopbar`, `JvBreadcrumb`, `JvPage` |
@@ -196,6 +197,83 @@ export class ProductsComponent {
 }
 ```
 
+## List API
+
+```typescript
+import { JvListComponent, JvListItemComponent } from '@devjuliovilla/jv-ui';
+```
+
+**JvList inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `role` | `'list' \| 'navigation'` | `'list'` | ARIA role for the list |
+| `variant` | `'bordered' \| null` | `null` | Outer border + border-radius around the list (items always have bottom border) |
+| `ariaLabel` | `string` | `''` | Accessible label |
+
+**JvListItem inputs:**
+
+| Input | Type | Default | Description |
+|---|---|---|---|
+| `title` | `string` (required) | — | Primary text |
+| `description` | `string` | `''` | Secondary text below title |
+| `leadingIcon` | `string \| null` | `null` | Lucide icon name on the left |
+| `disabled` | `boolean` | `false` | Gray out and block interaction |
+| `active` | `boolean` | `false` | Highlight with primary color and left border |
+
+**JvListItem outputs:**
+
+| Output | Type |
+|---|---|
+| `activated` | `void` |
+
+**Content projection:** use the `meta` attribute selector for badges, icons, or any content on the right side:
+
+```html
+<jv-list-item title="Inbox" description="New messages">
+  <jv-badge tone="primary" meta>3</jv-badge>
+  <jv-icon name="chevron-right" meta />
+</jv-list-item>
+```
+
+### Example
+
+```typescript
+import { Component } from '@angular/core';
+import { JvListComponent, JvListItemComponent, JvBadgeComponent } from '@devjuliovilla/jv-ui';
+
+@Component({
+  selector: 'app-nav-list',
+  standalone: true,
+  imports: [JvListComponent, JvListItemComponent, JvBadgeComponent],
+  template: `
+    <jv-list variant="bordered">
+      <jv-list-item
+        title="Dashboard"
+        description="Main overview"
+        leadingIcon="layout-dashboard"
+        [active]="true"
+      />
+      <jv-list-item
+        title="Notifications"
+        description="3 pending"
+        (activated)="onOpen()"
+      >
+        <jv-badge tone="primary" meta>3</jv-badge>
+      </jv-list-item>
+      <jv-list-item
+        title="Reports"
+        description="Coming soon"
+        [disabled]="true"
+      />
+    </jv-list>
+  `,
+})
+export class NavListComponent {
+  onOpen() { /* handle activation */ }
+}
+```
+
 ## Pagination API
 
 ```typescript

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -18886,6 +18886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 const ES = {
+    'list.emptyMessage': 'No hay elementos',
     'grid.emptyMessage': 'No hay registros',
     'grid.noResults': 'No se encontraron resultados',
     'grid.searchPlaceholder': 'Buscar...',
@@ -18921,6 +18922,7 @@ const ES = {
 };
 
 const EN = {
+    'list.emptyMessage': 'No items',
     'grid.emptyMessage': 'No records found',
     'grid.noResults': 'No results found',
     'grid.searchPlaceholder': 'Search...',
@@ -19425,24 +19427,24 @@ class JvTextareaComponent {
                 useExisting: forwardRef(() => JvTextareaComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: `
-    <textarea
-      class="jv-textarea"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [value]="value"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled"
-      [readonly]="readonly()"
-      [rows]="rows()"
-      [cols]="cols()"
-      [attr.maxlength]="maxlength() ?? null"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      (input)="handleInput($event)"
-      (blur)="handleBlur()"
-    ></textarea>
+        ], ngImport: i0, template: `
+    <textarea
+      class="jv-textarea"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [value]="value"
+      [placeholder]="placeholder()"
+      [required]="required()"
+      [disabled]="disabled"
+      [readonly]="readonly()"
+      [rows]="rows()"
+      [cols]="cols()"
+      [attr.maxlength]="maxlength() ?? null"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      (input)="handleInput($event)"
+      (blur)="handleBlur()"
+    ></textarea>
   `, isInline: true, styles: [".jv-textarea{width:100%;min-height:var(--jv-density-control-height);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);resize:vertical;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box}.jv-textarea::placeholder{color:var(--jv-color-foreground-muted)}.jv-textarea.is-invalid{border-color:var(--jv-color-danger)}.jv-textarea:disabled{opacity:.7;cursor:not-allowed}.jv-textarea:read-only{background:var(--jv-color-surface-muted);cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvTextareaComponent, decorators: [{
@@ -19453,24 +19455,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => JvTextareaComponent),
                             multi: true,
                         },
-                    ], template: `
-    <textarea
-      class="jv-textarea"
-      [class.is-invalid]="invalid()"
-      [id]="inputId()"
-      [value]="value"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled"
-      [readonly]="readonly()"
-      [rows]="rows()"
-      [cols]="cols()"
-      [attr.maxlength]="maxlength() ?? null"
-      [attr.aria-invalid]="invalid() ? 'true' : null"
-      [attr.aria-describedby]="describedBy() || null"
-      (input)="handleInput($event)"
-      (blur)="handleBlur()"
-    ></textarea>
+                    ], template: `
+    <textarea
+      class="jv-textarea"
+      [class.is-invalid]="invalid()"
+      [id]="inputId()"
+      [value]="value"
+      [placeholder]="placeholder()"
+      [required]="required()"
+      [disabled]="disabled"
+      [readonly]="readonly()"
+      [rows]="rows()"
+      [cols]="cols()"
+      [attr.maxlength]="maxlength() ?? null"
+      [attr.aria-invalid]="invalid() ? 'true' : null"
+      [attr.aria-describedby]="describedBy() || null"
+      (input)="handleInput($event)"
+      (blur)="handleBlur()"
+    ></textarea>
   `, styles: [".jv-textarea{width:100%;min-height:var(--jv-density-control-height);padding:var(--jv-spacing-sm) var(--jv-spacing-md);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);background:var(--jv-color-surface);color:var(--jv-color-foreground);resize:vertical;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box}.jv-textarea::placeholder{color:var(--jv-color-foreground-muted)}.jv-textarea.is-invalid{border-color:var(--jv-color-danger)}.jv-textarea:disabled{opacity:.7;cursor:not-allowed}.jv-textarea:read-only{background:var(--jv-color-surface-muted);cursor:default}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
@@ -20281,6 +20283,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [".jv-page{display:grid;gap:var(--jv-spacing-lg);min-width:0}.jv-page-header{display:grid;gap:var(--jv-spacing-sm)}.jv-page-content{min-width:0}.eyebrow{margin:0;color:var(--jv-color-primary);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}h1,.description{margin:0}.description{color:var(--jv-color-foreground-muted);max-width:72ch}\n"] }]
         }], propDecorators: { eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }] } });
 
+class JvListComponent {
+    role = input('list', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    variantClass = computed(() => {
+        const v = this.variant();
+        return v ? `jv-list--${v}` : '';
+    }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JvListComponent, isStandalone: true, selector: "jv-list", inputs: { role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="role() === 'navigation' ? 'list' : null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, isInline: true, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-list', standalone: true, template: `
+    <ul
+      class="jv-list"
+      [class]="variantClass()"
+      [attr.role]="role() === 'navigation' ? 'list' : null"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content />
+    </ul>
+  `, styles: [".jv-list{display:block;list-style:none;margin:0;padding:0}.jv-list>:not(:last-child){border-bottom:1px solid var(--jv-color-border)}.jv-list--bordered{border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}\n"] }]
+        }], propDecorators: { role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class JvListItemComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    leadingIcon = input(null, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    activated = output();
+    onActivate() {
+        if (!this.disabled()) {
+            this.activated.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvListItemComponent, isStandalone: true, selector: "jv-list-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, ngImport: i0, template: `
+    <li
+      class="jv-list-item"
+      [class.jv-list-item--disabled]="disabled()"
+      [class.jv-list-item--active]="active()"
+      tabindex="0"
+      role="listitem"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate(); $event.preventDefault()"
+    >
+      @if (leadingIcon()) {
+        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
+      }
+      <div class="jv-list-item-text">
+        <span class="jv-list-item-title">{{ title() }}</span>
+        @if (description()) {
+          <span class="jv-list-item-description">{{ description() }}</span>
+        }
+      </div>
+      <div class="jv-list-item-meta">
+        <ng-content select="[meta]" />
+      </div>
+    </li>
+  `, isInline: true, styles: [":host{display:block}.jv-list-item{display:flex;align-items:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:default;outline:none;transition:background-color .16s ease}.jv-list-item:hover{background:var(--jv-color-surface-muted)}.jv-list-item:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.jv-list-item--active{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));border-left:3px solid var(--jv-color-primary);padding-left:calc(var(--jv-spacing-md) - 3px)}.jv-list-item-text{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.jv-list-item-title{font-weight:600;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-description{font-size:.85rem;color:var(--jv-color-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-meta{display:flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-list-item-leading{flex-shrink:0;color:var(--jv-color-foreground-muted)}\n"], dependencies: [{ kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jv-list-item', standalone: true, imports: [JvIconComponent], template: `
+    <li
+      class="jv-list-item"
+      [class.jv-list-item--disabled]="disabled()"
+      [class.jv-list-item--active]="active()"
+      tabindex="0"
+      role="listitem"
+      (click)="onActivate()"
+      (keydown.enter)="onActivate()"
+      (keydown.space)="onActivate(); $event.preventDefault()"
+    >
+      @if (leadingIcon()) {
+        <jv-icon [name]="leadingIcon()!" class="jv-list-item-leading" [size]="18" />
+      }
+      <div class="jv-list-item-text">
+        <span class="jv-list-item-title">{{ title() }}</span>
+        @if (description()) {
+          <span class="jv-list-item-description">{{ description() }}</span>
+        }
+      </div>
+      <div class="jv-list-item-meta">
+        <ng-content select="[meta]" />
+      </div>
+    </li>
+  `, styles: [":host{display:block}.jv-list-item{display:flex;align-items:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-md);background:var(--jv-color-surface);cursor:default;outline:none;transition:background-color .16s ease}.jv-list-item:hover{background:var(--jv-color-surface-muted)}.jv-list-item:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.jv-list-item--active{background:color-mix(in srgb,var(--jv-color-primary) 10%,var(--jv-color-surface));border-left:3px solid var(--jv-color-primary);padding-left:calc(var(--jv-spacing-md) - 3px)}.jv-list-item-text{flex:1;display:flex;flex-direction:column;gap:.125rem;min-width:0}.jv-list-item-title{font-weight:600;font-size:var(--jv-density-font-size);color:var(--jv-color-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-description{font-size:.85rem;color:var(--jv-color-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jv-list-item-meta{display:flex;align-items:center;gap:var(--jv-spacing-sm);flex-shrink:0}.jv-list-item-leading{flex-shrink:0;color:var(--jv-color-foreground-muted)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+
 const JV_GRID_DEFAULT_OPTIONS = {
     searchable: true,
     sortable: true,
@@ -21680,5 +21784,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
+export { EN, ES, JV_DEFAULT_LOCALE, JV_FALLBACK_ICON_NAME, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, JV_LUCIDE_ICON_REGISTRY, JV_UI_CONFIG, JV_UI_CONFIG_DEFAULTS, JV_UI_DEFAULT_CONFIG, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDialogComponent, JvDialogService, JvDividerComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
 //# sourceMappingURL=devjuliovilla-jv-ui.mjs.map