@devjuliovilla/jv-ui 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devjuliovilla/jv-ui",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "Accessibility-first Angular component library — components, forms, data grids, dialogs, layout, services, and i18n infrastructure built with signals and standalone APIs.",
   "author": "@devjuliovilla",
   "license": "MIT",
@@ -26,12 +26,16 @@
   ],
   "peerDependencies": {
     "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0"
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/router": "^21.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "styles/**/*.css"
+  ],
   "module": "fesm2022/devjuliovilla-jv-ui.mjs",
   "typings": "types/devjuliovilla-jv-ui.d.ts",
   "exports": {
@@ -41,6 +45,9 @@
     ".": {
       "types": "./types/devjuliovilla-jv-ui.d.ts",
       "default": "./fesm2022/devjuliovilla-jv-ui.mjs"
+    },
+    "./styles/*": {
+      "default": "./styles/*"
     }
   },
   "type": "module"

package/styles/jv-theme.css

@@ -0,0 +1,130 @@
+:root {
+  --jv-color-primary: #2563eb;
+  --jv-color-secondary: #475569;
+  --jv-color-success: #16a34a;
+  --jv-color-warning: #d97706;
+  --jv-color-danger: #dc2626;
+  --jv-color-info: #0891b2;
+
+  --jv-color-background: #f8fafc;
+  --jv-color-surface: #ffffff;
+  --jv-color-surface-muted: #f1f5f9;
+  --jv-color-border: #dbe3ef;
+  --jv-color-foreground: #0f172a;
+  --jv-color-foreground-muted: #475569;
+
+  --jv-spacing-xs: 0.25rem;
+  --jv-spacing-sm: 0.5rem;
+  --jv-spacing-md: 1rem;
+  --jv-spacing-lg: 1.5rem;
+  --jv-spacing-xl: 2rem;
+
+  --jv-radius-sm: 0.375rem;
+  --jv-radius-md: 0.75rem;
+  --jv-radius-lg: 1rem;
+
+  --jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
+
+  --jv-density-control-height: 2.5rem;
+  --jv-density-padding-y: 0.75rem;
+  --jv-density-font-size: 0.95rem;
+}
+
+html[data-theme='dark'] {
+  --jv-color-background: #020617;
+  --jv-color-surface: #0f172a;
+  --jv-color-surface-muted: #111c31;
+  --jv-color-border: #243244;
+  --jv-color-foreground: #e2e8f0;
+  --jv-color-foreground-muted: #94a3b8;
+}
+
+html[data-theme='high-contrast'] {
+  --jv-color-primary: #00ffff;
+  --jv-color-secondary: #ffffff;
+  --jv-color-success: #00ff00;
+  --jv-color-warning: #ffff00;
+  --jv-color-danger: #ff4d4d;
+  --jv-color-info: #00ffff;
+  --jv-color-background: #000000;
+  --jv-color-surface: #000000;
+  --jv-color-surface-muted: #111111;
+  --jv-color-border: #ffffff;
+  --jv-color-foreground: #ffffff;
+  --jv-color-foreground-muted: #f5f5f5;
+}
+
+html[data-density='compact'] {
+  --jv-density-control-height: 2rem;
+  --jv-density-padding-y: 0.5rem;
+  --jv-density-font-size: 0.875rem;
+}
+
+html[data-density='comfortable'] {
+  --jv-density-control-height: 3rem;
+  --jv-density-padding-y: 0.95rem;
+  --jv-density-font-size: 1rem;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--jv-color-background);
+  color: var(--jv-color-foreground);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: var(--jv-density-font-size);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--jv-color-primary);
+  outline-offset: 2px;
+}
+
+.sr-only,
+.screen-reader-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.jv-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/types/devjuliovilla-jv-ui.d.ts

@@ -359,11 +359,6 @@ declare class JvSwitchComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvSwitchComponent, "jv-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-interface JvIconDefinition {
-    viewBox: string;
-    paths: string[];
-}
-
 declare class JvIconComponent {
     private readonly warnedNames;
     readonly name: _angular_core.InputSignal<string>;
@@ -372,11 +367,22 @@ declare class JvIconComponent {
     readonly decorative: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     protected readonly normalizedName: _angular_core.Signal<string>;
-    protected readonly iconDefinition: _angular_core.Signal<JvIconDefinition>;
+    protected readonly iconDefinition: _angular_core.Signal<_devjuliovilla_jv_ui.JvIconDefinition>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvIconComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvIconComponent, "jv-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface JvIconElement {
+    tag: 'path' | 'circle' | 'line' | 'polyline' | 'rect' | 'ellipse' | 'polygon';
+    attrs: Record<string, string>;
+}
+interface JvIconDefinition {
+    viewBox: string;
+    elements: JvIconElement[];
+}
+declare const JV_FALLBACK_ICON_NAME = "circle-alert";
+declare const JV_LUCIDE_ICON_REGISTRY: Record<string, JvIconDefinition>;
+
 declare const JV_UI_CONFIG: InjectionToken<Partial<JvUiConfig>[]>;
 declare const JV_UI_CONFIG_DEFAULTS: InjectionToken<JvUiConfig>;
 declare function provideJvUi(config?: Partial<JvUiConfig>): _angular_core.EnvironmentProviders;
@@ -704,5 +710,30 @@ declare class JvGridComponent<T = any> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvGridComponent<any>, "jv-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "selectedIds": { "alias": "selectedIds"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "actionClick": "actionClick"; "selectionChange": "selectionChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; "sortChange": "sortChange"; }, never, never, true, never>;
 }
 
-export { EN, ES, JV_DEFAULT_LOCALE, JV_GRID_DEFAULT_OPTIONS, JV_LOCALE_DICTIONARIES, 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, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
-export type { JvActiveConfirmDialog, JvBreadcrumbItem, JvChangePasswordSubmitEvent, JvConfirmOptions, JvDensity, JvForgotPasswordSubmitEvent, JvGridAction, JvGridColumn, JvGridOptions, JvGridPageEvent, JvGridRowId, JvGridSortDirection, JvGridSortState, JvGridTrackBy, JvIntent, JvLoaderState, JvLocale, JvLoginSubmitEvent, JvNavItem, JvSelectOption, JvTheme, JvThemeOption, JvToastItem, JvToastPosition, JvToastViewport, JvTone, JvTopbarAction, JvUiConfig };
+interface JvPaginationEvent {
+    pageIndex: number;
+    pageSize: number;
+}
+declare class JvPaginationComponent {
+    private readonly translationService;
+    readonly totalItems: _angular_core.InputSignal<number>;
+    readonly pageSize: _angular_core.InputSignal<number>;
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageIndex: _angular_core.InputSignal<number>;
+    readonly maxVisiblePages: _angular_core.InputSignal<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<JvPaginationEvent>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    protected readonly pageStart: _angular_core.Signal<number>;
+    protected readonly pageEnd: _angular_core.Signal<number>;
+    protected readonly pageRange: _angular_core.Signal<number[]>;
+    protected readonly pageSizeStr: _angular_core.Signal<string>;
+    protected readonly pageSizeOptionsList: _angular_core.Signal<JvSelectOption<string>[]>;
+    protected readonly t: (key: string, params?: Record<string, string | number>) => string;
+    protected goToPage(page: number): void;
+    protected onPageSizeChange(value: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvPaginationComponent, "jv-pagination", never, { "totalItems": { "alias": "totalItems"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+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, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
+export type { JvActiveConfirmDialog, JvBreadcrumbItem, JvChangePasswordSubmitEvent, JvConfirmOptions, JvDensity, JvForgotPasswordSubmitEvent, JvGridAction, JvGridColumn, JvGridOptions, JvGridPageEvent, JvGridRowId, JvGridSortDirection, JvGridSortState, JvGridTrackBy, JvIconDefinition, JvIconElement, JvIntent, JvLoaderState, JvLocale, JvLoginSubmitEvent, JvNavItem, JvPaginationEvent, JvSelectOption, JvTheme, JvThemeOption, JvToastItem, JvToastPosition, JvToastViewport, JvTone, JvTopbarAction, JvUiConfig };