@devjuliovilla/jv-ui 1.5.0 → 1.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devjuliovilla/jv-ui",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.2",
|
|
4
4
|
"description": "Accessibility-first Angular component library — components, forms, data grids, dialogs, layout, services, and i18n infrastructure built with signals and standalone APIs.",
|
|
5
5
|
"author": "@devjuliovilla",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,12 +26,16 @@
|
|
|
26
26
|
],
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@angular/common": "^21.2.0",
|
|
29
|
-
"@angular/core": "^21.2.0"
|
|
29
|
+
"@angular/core": "^21.2.0",
|
|
30
|
+
"@angular/forms": "^21.2.0",
|
|
31
|
+
"@angular/router": "^21.2.0"
|
|
30
32
|
},
|
|
31
33
|
"dependencies": {
|
|
32
34
|
"tslib": "^2.3.0"
|
|
33
35
|
},
|
|
34
|
-
"sideEffects":
|
|
36
|
+
"sideEffects": [
|
|
37
|
+
"styles/**/*.css"
|
|
38
|
+
],
|
|
35
39
|
"module": "fesm2022/devjuliovilla-jv-ui.mjs",
|
|
36
40
|
"typings": "types/devjuliovilla-jv-ui.d.ts",
|
|
37
41
|
"exports": {
|
|
@@ -41,6 +45,9 @@
|
|
|
41
45
|
".": {
|
|
42
46
|
"types": "./types/devjuliovilla-jv-ui.d.ts",
|
|
43
47
|
"default": "./fesm2022/devjuliovilla-jv-ui.mjs"
|
|
48
|
+
},
|
|
49
|
+
"./styles/*": {
|
|
50
|
+
"default": "./styles/*"
|
|
44
51
|
}
|
|
45
52
|
},
|
|
46
53
|
"type": "module"
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--jv-color-primary: #2563eb;
|
|
3
|
+
--jv-color-secondary: #475569;
|
|
4
|
+
--jv-color-success: #16a34a;
|
|
5
|
+
--jv-color-warning: #d97706;
|
|
6
|
+
--jv-color-danger: #dc2626;
|
|
7
|
+
--jv-color-info: #0891b2;
|
|
8
|
+
|
|
9
|
+
--jv-color-background: #f8fafc;
|
|
10
|
+
--jv-color-surface: #ffffff;
|
|
11
|
+
--jv-color-surface-muted: #f1f5f9;
|
|
12
|
+
--jv-color-border: #dbe3ef;
|
|
13
|
+
--jv-color-foreground: #0f172a;
|
|
14
|
+
--jv-color-foreground-muted: #475569;
|
|
15
|
+
|
|
16
|
+
--jv-spacing-xs: 0.25rem;
|
|
17
|
+
--jv-spacing-sm: 0.5rem;
|
|
18
|
+
--jv-spacing-md: 1rem;
|
|
19
|
+
--jv-spacing-lg: 1.5rem;
|
|
20
|
+
--jv-spacing-xl: 2rem;
|
|
21
|
+
|
|
22
|
+
--jv-radius-sm: 0.375rem;
|
|
23
|
+
--jv-radius-md: 0.75rem;
|
|
24
|
+
--jv-radius-lg: 1rem;
|
|
25
|
+
|
|
26
|
+
--jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
27
|
+
--jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|
28
|
+
--jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
|
|
29
|
+
|
|
30
|
+
--jv-density-control-height: 2.5rem;
|
|
31
|
+
--jv-density-padding-y: 0.75rem;
|
|
32
|
+
--jv-density-font-size: 0.95rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
html[data-theme='dark'] {
|
|
36
|
+
--jv-color-background: #020617;
|
|
37
|
+
--jv-color-surface: #0f172a;
|
|
38
|
+
--jv-color-surface-muted: #111c31;
|
|
39
|
+
--jv-color-border: #243244;
|
|
40
|
+
--jv-color-foreground: #e2e8f0;
|
|
41
|
+
--jv-color-foreground-muted: #94a3b8;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
html[data-theme='high-contrast'] {
|
|
45
|
+
--jv-color-primary: #00ffff;
|
|
46
|
+
--jv-color-secondary: #ffffff;
|
|
47
|
+
--jv-color-success: #00ff00;
|
|
48
|
+
--jv-color-warning: #ffff00;
|
|
49
|
+
--jv-color-danger: #ff4d4d;
|
|
50
|
+
--jv-color-info: #00ffff;
|
|
51
|
+
--jv-color-background: #000000;
|
|
52
|
+
--jv-color-surface: #000000;
|
|
53
|
+
--jv-color-surface-muted: #111111;
|
|
54
|
+
--jv-color-border: #ffffff;
|
|
55
|
+
--jv-color-foreground: #ffffff;
|
|
56
|
+
--jv-color-foreground-muted: #f5f5f5;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
html[data-density='compact'] {
|
|
60
|
+
--jv-density-control-height: 2rem;
|
|
61
|
+
--jv-density-padding-y: 0.5rem;
|
|
62
|
+
--jv-density-font-size: 0.875rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
html[data-density='comfortable'] {
|
|
66
|
+
--jv-density-control-height: 3rem;
|
|
67
|
+
--jv-density-padding-y: 0.95rem;
|
|
68
|
+
--jv-density-font-size: 1rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
html,
|
|
72
|
+
body {
|
|
73
|
+
min-height: 100%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
body {
|
|
77
|
+
margin: 0;
|
|
78
|
+
background: var(--jv-color-background);
|
|
79
|
+
color: var(--jv-color-foreground);
|
|
80
|
+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
81
|
+
font-size: var(--jv-density-font-size);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
*,
|
|
85
|
+
*::before,
|
|
86
|
+
*::after {
|
|
87
|
+
box-sizing: border-box;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
button,
|
|
91
|
+
input,
|
|
92
|
+
select,
|
|
93
|
+
textarea {
|
|
94
|
+
font: inherit;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:focus-visible {
|
|
98
|
+
outline: 2px solid var(--jv-color-primary);
|
|
99
|
+
outline-offset: 2px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.sr-only,
|
|
103
|
+
.screen-reader-only {
|
|
104
|
+
position: absolute;
|
|
105
|
+
width: 1px;
|
|
106
|
+
height: 1px;
|
|
107
|
+
padding: 0;
|
|
108
|
+
margin: -1px;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
clip: rect(0, 0, 0, 0);
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
border: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.jv-icon {
|
|
116
|
+
display: inline-block;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
flex: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@media (prefers-reduced-motion: reduce) {
|
|
122
|
+
*,
|
|
123
|
+
*::before,
|
|
124
|
+
*::after {
|
|
125
|
+
animation-duration: 0.01ms !important;
|
|
126
|
+
animation-iteration-count: 1 !important;
|
|
127
|
+
scroll-behavior: auto !important;
|
|
128
|
+
transition-duration: 0.01ms !important;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
@@ -8,6 +8,7 @@ type JvIntent = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'succ
|
|
|
8
8
|
type JvTone = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
|
|
9
9
|
|
|
10
10
|
declare class JvButtonComponent {
|
|
11
|
+
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
11
12
|
readonly variant: _angular_core.InputSignal<JvIntent>;
|
|
12
13
|
readonly icon: _angular_core.InputSignal<string | null>;
|
|
13
14
|
readonly iconPosition: _angular_core.InputSignal<"start" | "end">;
|
|
@@ -15,7 +16,7 @@ declare class JvButtonComponent {
|
|
|
15
16
|
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
16
17
|
protected readonly buttonClass: _angular_core.Signal<string>;
|
|
17
18
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvButtonComponent, never>;
|
|
18
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvButtonComponent, "jv-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
19
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvButtonComponent, "jv-button", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
declare class JvButtonGroupComponent {
|
|
@@ -358,11 +359,6 @@ declare class JvSwitchComponent implements ControlValueAccessor {
|
|
|
358
359
|
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>;
|
|
359
360
|
}
|
|
360
361
|
|
|
361
|
-
interface JvIconDefinition {
|
|
362
|
-
viewBox: string;
|
|
363
|
-
paths: string[];
|
|
364
|
-
}
|
|
365
|
-
|
|
366
362
|
declare class JvIconComponent {
|
|
367
363
|
private readonly warnedNames;
|
|
368
364
|
readonly name: _angular_core.InputSignal<string>;
|
|
@@ -371,11 +367,18 @@ declare class JvIconComponent {
|
|
|
371
367
|
readonly decorative: _angular_core.InputSignal<boolean>;
|
|
372
368
|
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
373
369
|
protected readonly normalizedName: _angular_core.Signal<string>;
|
|
374
|
-
protected readonly iconDefinition: _angular_core.Signal<JvIconDefinition>;
|
|
370
|
+
protected readonly iconDefinition: _angular_core.Signal<_devjuliovilla_jv_ui.JvIconDefinition>;
|
|
375
371
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvIconComponent, never>;
|
|
376
372
|
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>;
|
|
377
373
|
}
|
|
378
374
|
|
|
375
|
+
interface JvIconDefinition {
|
|
376
|
+
viewBox: string;
|
|
377
|
+
paths: string[];
|
|
378
|
+
}
|
|
379
|
+
declare const JV_FALLBACK_ICON_NAME = "circle-alert";
|
|
380
|
+
declare const JV_LUCIDE_ICON_REGISTRY: Record<string, JvIconDefinition>;
|
|
381
|
+
|
|
379
382
|
declare const JV_UI_CONFIG: InjectionToken<Partial<JvUiConfig>[]>;
|
|
380
383
|
declare const JV_UI_CONFIG_DEFAULTS: InjectionToken<JvUiConfig>;
|
|
381
384
|
declare function provideJvUi(config?: Partial<JvUiConfig>): _angular_core.EnvironmentProviders;
|
|
@@ -703,5 +706,5 @@ declare class JvGridComponent<T = any> {
|
|
|
703
706
|
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>;
|
|
704
707
|
}
|
|
705
708
|
|
|
706
|
-
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 };
|
|
707
|
-
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 };
|
|
709
|
+
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, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvThemeService, JvToastComponent, JvToastService, JvTopbarComponent, JvTranslationService, provideJvUi };
|
|
710
|
+
export type { JvActiveConfirmDialog, JvBreadcrumbItem, JvChangePasswordSubmitEvent, JvConfirmOptions, JvDensity, JvForgotPasswordSubmitEvent, JvGridAction, JvGridColumn, JvGridOptions, JvGridPageEvent, JvGridRowId, JvGridSortDirection, JvGridSortState, JvGridTrackBy, JvIconDefinition, JvIntent, JvLoaderState, JvLocale, JvLoginSubmitEvent, JvNavItem, JvSelectOption, JvTheme, JvThemeOption, JvToastItem, JvToastPosition, JvToastViewport, JvTone, JvTopbarAction, JvUiConfig };
|