@devjuliovilla/jv-ui 1.13.0 → 1.15.0
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/LICENSE +21 -21
- package/README.md +1035 -994
- package/fesm2022/devjuliovilla-jv-ui.mjs +4114 -3838
- package/fesm2022/devjuliovilla-jv-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/jv-theme.css +135 -135
- package/types/devjuliovilla-jv-ui.d.ts +51 -19
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devjuliovilla/jv-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
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",
|
package/styles/jv-theme.css
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
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-breakpoint-sm: 640px;
|
|
27
|
-
--jv-breakpoint-md: 768px;
|
|
28
|
-
--jv-breakpoint-lg: 1024px;
|
|
29
|
-
--jv-breakpoint-xl: 1280px;
|
|
30
|
-
|
|
31
|
-
--jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
32
|
-
--jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|
33
|
-
--jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
|
|
34
|
-
|
|
35
|
-
--jv-density-control-height: 2.5rem;
|
|
36
|
-
--jv-density-padding-y: 0.75rem;
|
|
37
|
-
--jv-density-font-size: 0.95rem;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
html[data-theme='dark'] {
|
|
41
|
-
--jv-color-background: #020617;
|
|
42
|
-
--jv-color-surface: #0f172a;
|
|
43
|
-
--jv-color-surface-muted: #111c31;
|
|
44
|
-
--jv-color-border: #243244;
|
|
45
|
-
--jv-color-foreground: #e2e8f0;
|
|
46
|
-
--jv-color-foreground-muted: #94a3b8;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
html[data-theme='high-contrast'] {
|
|
50
|
-
--jv-color-primary: #00ffff;
|
|
51
|
-
--jv-color-secondary: #ffffff;
|
|
52
|
-
--jv-color-success: #00ff00;
|
|
53
|
-
--jv-color-warning: #ffff00;
|
|
54
|
-
--jv-color-danger: #ff4d4d;
|
|
55
|
-
--jv-color-info: #00ffff;
|
|
56
|
-
--jv-color-background: #000000;
|
|
57
|
-
--jv-color-surface: #000000;
|
|
58
|
-
--jv-color-surface-muted: #111111;
|
|
59
|
-
--jv-color-border: #ffffff;
|
|
60
|
-
--jv-color-foreground: #ffffff;
|
|
61
|
-
--jv-color-foreground-muted: #f5f5f5;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
html[data-density='compact'] {
|
|
65
|
-
--jv-density-control-height: 2rem;
|
|
66
|
-
--jv-density-padding-y: 0.5rem;
|
|
67
|
-
--jv-density-font-size: 0.875rem;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
html[data-density='comfortable'] {
|
|
71
|
-
--jv-density-control-height: 3rem;
|
|
72
|
-
--jv-density-padding-y: 0.95rem;
|
|
73
|
-
--jv-density-font-size: 1rem;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
html,
|
|
77
|
-
body {
|
|
78
|
-
min-height: 100%;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
body {
|
|
82
|
-
margin: 0;
|
|
83
|
-
background: var(--jv-color-background);
|
|
84
|
-
color: var(--jv-color-foreground);
|
|
85
|
-
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
86
|
-
font-size: var(--jv-density-font-size);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
*,
|
|
90
|
-
*::before,
|
|
91
|
-
*::after {
|
|
92
|
-
box-sizing: border-box;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
button,
|
|
96
|
-
input,
|
|
97
|
-
select,
|
|
98
|
-
textarea {
|
|
99
|
-
font: inherit;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
:focus-visible {
|
|
103
|
-
outline: 2px solid var(--jv-color-primary);
|
|
104
|
-
outline-offset: 2px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.sr-only,
|
|
108
|
-
.screen-reader-only {
|
|
109
|
-
position: absolute;
|
|
110
|
-
width: 1px;
|
|
111
|
-
height: 1px;
|
|
112
|
-
padding: 0;
|
|
113
|
-
margin: -1px;
|
|
114
|
-
overflow: hidden;
|
|
115
|
-
clip: rect(0, 0, 0, 0);
|
|
116
|
-
white-space: nowrap;
|
|
117
|
-
border: 0;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.jv-icon {
|
|
121
|
-
display: inline-block;
|
|
122
|
-
vertical-align: middle;
|
|
123
|
-
flex: none;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@media (prefers-reduced-motion: reduce) {
|
|
127
|
-
*,
|
|
128
|
-
*::before,
|
|
129
|
-
*::after {
|
|
130
|
-
animation-duration: 0.01ms !important;
|
|
131
|
-
animation-iteration-count: 1 !important;
|
|
132
|
-
scroll-behavior: auto !important;
|
|
133
|
-
transition-duration: 0.01ms !important;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
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-breakpoint-sm: 640px;
|
|
27
|
+
--jv-breakpoint-md: 768px;
|
|
28
|
+
--jv-breakpoint-lg: 1024px;
|
|
29
|
+
--jv-breakpoint-xl: 1280px;
|
|
30
|
+
|
|
31
|
+
--jv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
|
|
32
|
+
--jv-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|
33
|
+
--jv-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.16);
|
|
34
|
+
|
|
35
|
+
--jv-density-control-height: 2.5rem;
|
|
36
|
+
--jv-density-padding-y: 0.75rem;
|
|
37
|
+
--jv-density-font-size: 0.95rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
html[data-theme='dark'] {
|
|
41
|
+
--jv-color-background: #020617;
|
|
42
|
+
--jv-color-surface: #0f172a;
|
|
43
|
+
--jv-color-surface-muted: #111c31;
|
|
44
|
+
--jv-color-border: #243244;
|
|
45
|
+
--jv-color-foreground: #e2e8f0;
|
|
46
|
+
--jv-color-foreground-muted: #94a3b8;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
html[data-theme='high-contrast'] {
|
|
50
|
+
--jv-color-primary: #00ffff;
|
|
51
|
+
--jv-color-secondary: #ffffff;
|
|
52
|
+
--jv-color-success: #00ff00;
|
|
53
|
+
--jv-color-warning: #ffff00;
|
|
54
|
+
--jv-color-danger: #ff4d4d;
|
|
55
|
+
--jv-color-info: #00ffff;
|
|
56
|
+
--jv-color-background: #000000;
|
|
57
|
+
--jv-color-surface: #000000;
|
|
58
|
+
--jv-color-surface-muted: #111111;
|
|
59
|
+
--jv-color-border: #ffffff;
|
|
60
|
+
--jv-color-foreground: #ffffff;
|
|
61
|
+
--jv-color-foreground-muted: #f5f5f5;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
html[data-density='compact'] {
|
|
65
|
+
--jv-density-control-height: 2rem;
|
|
66
|
+
--jv-density-padding-y: 0.5rem;
|
|
67
|
+
--jv-density-font-size: 0.875rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
html[data-density='comfortable'] {
|
|
71
|
+
--jv-density-control-height: 3rem;
|
|
72
|
+
--jv-density-padding-y: 0.95rem;
|
|
73
|
+
--jv-density-font-size: 1rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
html,
|
|
77
|
+
body {
|
|
78
|
+
min-height: 100%;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
body {
|
|
82
|
+
margin: 0;
|
|
83
|
+
background: var(--jv-color-background);
|
|
84
|
+
color: var(--jv-color-foreground);
|
|
85
|
+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
86
|
+
font-size: var(--jv-density-font-size);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
*,
|
|
90
|
+
*::before,
|
|
91
|
+
*::after {
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
button,
|
|
96
|
+
input,
|
|
97
|
+
select,
|
|
98
|
+
textarea {
|
|
99
|
+
font: inherit;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:focus-visible {
|
|
103
|
+
outline: 2px solid var(--jv-color-primary);
|
|
104
|
+
outline-offset: 2px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.sr-only,
|
|
108
|
+
.screen-reader-only {
|
|
109
|
+
position: absolute;
|
|
110
|
+
width: 1px;
|
|
111
|
+
height: 1px;
|
|
112
|
+
padding: 0;
|
|
113
|
+
margin: -1px;
|
|
114
|
+
overflow: hidden;
|
|
115
|
+
clip: rect(0, 0, 0, 0);
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
border: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.jv-icon {
|
|
121
|
+
display: inline-block;
|
|
122
|
+
vertical-align: middle;
|
|
123
|
+
flex: none;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@media (prefers-reduced-motion: reduce) {
|
|
127
|
+
*,
|
|
128
|
+
*::before,
|
|
129
|
+
*::after {
|
|
130
|
+
animation-duration: 0.01ms !important;
|
|
131
|
+
animation-iteration-count: 1 !important;
|
|
132
|
+
scroll-behavior: auto !important;
|
|
133
|
+
transition-duration: 0.01ms !important;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -55,14 +55,12 @@ declare class JvTranslationService {
|
|
|
55
55
|
|
|
56
56
|
declare class JvDayPlannerDetailDirective {
|
|
57
57
|
readonly templateRef: TemplateRef<JvDayPlannerDetailContext>;
|
|
58
|
-
constructor(templateRef: TemplateRef<JvDayPlannerDetailContext>);
|
|
59
58
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvDayPlannerDetailDirective, never>;
|
|
60
59
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvDayPlannerDetailDirective, "ng-template[jvDayPlannerDetail]", never, {}, {}, never, never, true, never>;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
declare class JvDayPlannerItemDirective {
|
|
64
63
|
readonly templateRef: TemplateRef<JvDayPlannerItemContext>;
|
|
65
|
-
constructor(templateRef: TemplateRef<JvDayPlannerItemContext>);
|
|
66
64
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvDayPlannerItemDirective, never>;
|
|
67
65
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvDayPlannerItemDirective, "ng-template[jvDayPlannerItem]", never, {}, {}, never, never, true, never>;
|
|
68
66
|
}
|
|
@@ -149,7 +147,6 @@ interface JvModalSelectorOption<T = string> {
|
|
|
149
147
|
|
|
150
148
|
declare class JvMonthCalendarDayDirective {
|
|
151
149
|
readonly templateRef: TemplateRef<JvMonthCalendarDayContext>;
|
|
152
|
-
constructor(templateRef: TemplateRef<JvMonthCalendarDayContext>);
|
|
153
150
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvMonthCalendarDayDirective, never>;
|
|
154
151
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvMonthCalendarDayDirective, "ng-template[jvMonthCalendarDay]", never, {}, {}, never, never, true, never>;
|
|
155
152
|
}
|
|
@@ -333,9 +330,8 @@ declare class JvSectionComponent {
|
|
|
333
330
|
}
|
|
334
331
|
|
|
335
332
|
declare class JvAccordionPanelDirective {
|
|
336
|
-
readonly templateRef: TemplateRef<unknown>;
|
|
337
333
|
readonly id: _angular_core.InputSignal<string>;
|
|
338
|
-
|
|
334
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
339
335
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvAccordionPanelDirective, never>;
|
|
340
336
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvAccordionPanelDirective, "ng-template[jvAccordionPanel]", never, { "id": { "alias": "jvAccordionPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
341
337
|
}
|
|
@@ -1226,7 +1222,7 @@ declare class JvListItemComponent {
|
|
|
1226
1222
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<JvListItemComponent, "jv-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "activated": "activated"; }, never, ["[meta]"], true, never>;
|
|
1227
1223
|
}
|
|
1228
1224
|
|
|
1229
|
-
interface JvListItemModel<T =
|
|
1225
|
+
interface JvListItemModel<T = unknown> {
|
|
1230
1226
|
title: string;
|
|
1231
1227
|
description?: string;
|
|
1232
1228
|
value?: T;
|
|
@@ -1236,9 +1232,8 @@ interface JvListItemModel<T = any> {
|
|
|
1236
1232
|
}
|
|
1237
1233
|
|
|
1238
1234
|
declare class JvTabPanelDirective {
|
|
1239
|
-
readonly templateRef: TemplateRef<unknown>;
|
|
1240
1235
|
readonly id: _angular_core.InputSignal<string>;
|
|
1241
|
-
|
|
1236
|
+
readonly templateRef: TemplateRef<unknown>;
|
|
1242
1237
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JvTabPanelDirective, never>;
|
|
1243
1238
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<JvTabPanelDirective, "ng-template[jvTabPanel]", never, { "id": { "alias": "jvTabPanel"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1244
1239
|
}
|
|
@@ -1324,8 +1319,9 @@ interface JvGridSortState {
|
|
|
1324
1319
|
direction: JvGridSortDirection;
|
|
1325
1320
|
}
|
|
1326
1321
|
type JvGridColumnType = 'text' | 'integer' | 'number' | 'currency' | 'percent' | 'date' | 'time' | 'datetime' | 'boolean';
|
|
1322
|
+
type JvGridEditType = 'text' | 'number' | 'date' | 'time' | 'datetime' | 'select' | 'boolean';
|
|
1327
1323
|
type JvGridColumnFormatOptions = Intl.NumberFormatOptions & Intl.DateTimeFormatOptions;
|
|
1328
|
-
interface JvGridColumn<T =
|
|
1324
|
+
interface JvGridColumn<T = unknown> {
|
|
1329
1325
|
key: keyof T | string;
|
|
1330
1326
|
header: string;
|
|
1331
1327
|
sortable?: boolean;
|
|
@@ -1344,7 +1340,7 @@ interface JvGridColumn<T = any> {
|
|
|
1344
1340
|
cellClass?: string;
|
|
1345
1341
|
headerClass?: string;
|
|
1346
1342
|
format?: (value: unknown, row: T) => string;
|
|
1347
|
-
editType?:
|
|
1343
|
+
editType?: JvGridEditType;
|
|
1348
1344
|
editOptions?: {
|
|
1349
1345
|
label: string;
|
|
1350
1346
|
value: unknown;
|
|
@@ -1352,7 +1348,7 @@ interface JvGridColumn<T = any> {
|
|
|
1352
1348
|
children?: JvGridColumn<T>[];
|
|
1353
1349
|
filterValue?: string;
|
|
1354
1350
|
}
|
|
1355
|
-
interface JvGridAction<T =
|
|
1351
|
+
interface JvGridAction<T = unknown> {
|
|
1356
1352
|
id: string;
|
|
1357
1353
|
label: string;
|
|
1358
1354
|
icon?: string;
|
|
@@ -1376,7 +1372,7 @@ interface JvGridOptions {
|
|
|
1376
1372
|
noResultsMessage?: string;
|
|
1377
1373
|
searchPlaceholder?: string;
|
|
1378
1374
|
ariaLabel?: string;
|
|
1379
|
-
trackBy?: JvGridTrackBy<
|
|
1375
|
+
trackBy?: JvGridTrackBy<unknown>;
|
|
1380
1376
|
serverSide?: boolean;
|
|
1381
1377
|
totalItems?: number;
|
|
1382
1378
|
stickyColumns?: boolean;
|
|
@@ -1389,6 +1385,7 @@ interface JvGridOptions {
|
|
|
1389
1385
|
exportFileName?: string;
|
|
1390
1386
|
columnFilters?: boolean;
|
|
1391
1387
|
rowDoubleClick?: boolean;
|
|
1388
|
+
keyboardNavigation?: boolean;
|
|
1392
1389
|
}
|
|
1393
1390
|
interface JvGridPageEvent {
|
|
1394
1391
|
pageIndex: number;
|
|
@@ -1402,7 +1399,7 @@ interface JvGridColumnResizeEvent {
|
|
|
1402
1399
|
columnKey: string;
|
|
1403
1400
|
width: string;
|
|
1404
1401
|
}
|
|
1405
|
-
interface JvGridRowEditEvent<T =
|
|
1402
|
+
interface JvGridRowEditEvent<T = unknown> {
|
|
1406
1403
|
row: T;
|
|
1407
1404
|
column: JvGridColumn<T>;
|
|
1408
1405
|
value: unknown;
|
|
@@ -1415,9 +1412,11 @@ interface JvGridColumnFilter {
|
|
|
1415
1412
|
}
|
|
1416
1413
|
declare const JV_GRID_DEFAULT_OPTIONS: JvGridOptions;
|
|
1417
1414
|
|
|
1418
|
-
declare class JvGridComponent<T =
|
|
1415
|
+
declare class JvGridComponent<T = unknown> {
|
|
1419
1416
|
private readonly gridId;
|
|
1420
1417
|
protected readonly gridSearchInputId: string;
|
|
1418
|
+
private readonly destroyRef;
|
|
1419
|
+
private readonly document;
|
|
1421
1420
|
private readonly formatService;
|
|
1422
1421
|
private readonly translationService;
|
|
1423
1422
|
readonly data: _angular_core.InputSignal<T[]>;
|
|
@@ -1425,7 +1424,7 @@ declare class JvGridComponent<T = any> {
|
|
|
1425
1424
|
readonly actions: _angular_core.InputSignal<JvGridAction<T>[]>;
|
|
1426
1425
|
readonly options: _angular_core.InputSignal<Partial<JvGridOptions>>;
|
|
1427
1426
|
readonly trackBy: _angular_core.InputSignal<keyof T | ((row: T, index: number) => JvGridRowId) | null>;
|
|
1428
|
-
readonly selectedIds: _angular_core.InputSignal<JvGridRowId[]>;
|
|
1427
|
+
readonly selectedIds: _angular_core.InputSignal<JvGridRowId[] | null>;
|
|
1429
1428
|
readonly rowClick: _angular_core.OutputEmitterRef<T>;
|
|
1430
1429
|
readonly rowDoubleClick: _angular_core.OutputEmitterRef<T>;
|
|
1431
1430
|
readonly actionClick: _angular_core.OutputEmitterRef<{
|
|
@@ -1458,7 +1457,7 @@ declare class JvGridComponent<T = any> {
|
|
|
1458
1457
|
noResultsMessage?: string;
|
|
1459
1458
|
searchPlaceholder?: string;
|
|
1460
1459
|
ariaLabel?: string;
|
|
1461
|
-
trackBy?: _devjuliovilla_jv_ui.JvGridTrackBy<
|
|
1460
|
+
trackBy?: _devjuliovilla_jv_ui.JvGridTrackBy<unknown>;
|
|
1462
1461
|
serverSide?: boolean;
|
|
1463
1462
|
totalItems?: number;
|
|
1464
1463
|
stickyColumns?: boolean;
|
|
@@ -1471,19 +1470,32 @@ declare class JvGridComponent<T = any> {
|
|
|
1471
1470
|
exportFileName?: string;
|
|
1472
1471
|
columnFilters?: boolean;
|
|
1473
1472
|
rowDoubleClick?: boolean;
|
|
1473
|
+
keyboardNavigation?: boolean;
|
|
1474
1474
|
}>;
|
|
1475
1475
|
protected readonly gridLabel: _angular_core.Signal<string>;
|
|
1476
1476
|
protected readonly columnOrder: _angular_core.WritableSignal<string[]>;
|
|
1477
1477
|
protected readonly colFilters: _angular_core.WritableSignal<Record<string, JvGridColumnFilter>>;
|
|
1478
1478
|
protected readonly columnWidths: _angular_core.WritableSignal<Record<string, string>>;
|
|
1479
|
+
protected readonly activeCell: _angular_core.WritableSignal<{
|
|
1480
|
+
row: number;
|
|
1481
|
+
column: number;
|
|
1482
|
+
}>;
|
|
1479
1483
|
protected readonly visibleColumns: _angular_core.Signal<JvGridColumn<T>[]>;
|
|
1480
1484
|
protected readonly groupedHeaders: _angular_core.Signal<JvGridColumn<T>[]>;
|
|
1481
1485
|
private readonly internalSelectedIds;
|
|
1482
1486
|
readonly searchTerm: _angular_core.WritableSignal<string>;
|
|
1483
1487
|
readonly sortState: _angular_core.WritableSignal<JvGridSortState>;
|
|
1484
1488
|
readonly pageIndex: _angular_core.WritableSignal<number>;
|
|
1489
|
+
private readonly internalPageSize;
|
|
1485
1490
|
protected readonly pageSize: _angular_core.Signal<number>;
|
|
1491
|
+
protected readonly pageSizeStr: _angular_core.Signal<string>;
|
|
1492
|
+
protected readonly pageSizeOptions: _angular_core.Signal<{
|
|
1493
|
+
label: string;
|
|
1494
|
+
value: string;
|
|
1495
|
+
}[]>;
|
|
1496
|
+
private readonly pageSizeInputSync;
|
|
1486
1497
|
private readonly searchPageResetter;
|
|
1498
|
+
private readonly pageBoundsGuard;
|
|
1487
1499
|
private readonly selectedIdSet;
|
|
1488
1500
|
protected readonly hasActiveFilters: _angular_core.Signal<boolean>;
|
|
1489
1501
|
protected readonly filteredData: _angular_core.Signal<T[]>;
|
|
@@ -1491,9 +1503,10 @@ declare class JvGridComponent<T = any> {
|
|
|
1491
1503
|
protected readonly effectiveTotalItems: _angular_core.Signal<number>;
|
|
1492
1504
|
protected readonly effectiveTotalPages: _angular_core.Signal<number>;
|
|
1493
1505
|
protected readonly displayData: _angular_core.Signal<T[]>;
|
|
1494
|
-
protected readonly
|
|
1506
|
+
protected readonly virtualScrollEnabled: _angular_core.Signal<boolean | undefined>;
|
|
1495
1507
|
protected readonly virtualStartIndex: _angular_core.WritableSignal<number>;
|
|
1496
1508
|
protected readonly virtualEndIndex: _angular_core.WritableSignal<number>;
|
|
1509
|
+
private readonly virtualRangeResetter;
|
|
1497
1510
|
protected readonly virtualDisplayData: _angular_core.Signal<T[]>;
|
|
1498
1511
|
protected readonly virtualTotalHeight: _angular_core.Signal<number>;
|
|
1499
1512
|
protected readonly virtualOffsetY: _angular_core.Signal<number>;
|
|
@@ -1504,6 +1517,13 @@ declare class JvGridComponent<T = any> {
|
|
|
1504
1517
|
protected readonly someSelected: _angular_core.Signal<boolean>;
|
|
1505
1518
|
protected readonly colspan: _angular_core.Signal<number>;
|
|
1506
1519
|
protected readonly densityClass: _angular_core.Signal<string>;
|
|
1520
|
+
protected cellTabIndex(rowIndex: number, columnIndex: number, col: JvGridColumn<T>): number | null;
|
|
1521
|
+
private flattenColumns;
|
|
1522
|
+
protected onCellFocus(rowIndex: number, columnIndex: number): void;
|
|
1523
|
+
protected onCellKeydown(event: KeyboardEvent, rowIndex: number, columnIndex: number): void;
|
|
1524
|
+
protected onCellF2(event: Event, rowIndex: number, columnIndex: number): void;
|
|
1525
|
+
protected onHeaderFocus(columnIndex: number): void;
|
|
1526
|
+
protected onHeaderKeydown(event: KeyboardEvent, columnIndex: number): void;
|
|
1507
1527
|
protected editState: _angular_core.WritableSignal<{
|
|
1508
1528
|
rowId: JvGridRowId;
|
|
1509
1529
|
colKey: string;
|
|
@@ -1514,6 +1534,14 @@ declare class JvGridComponent<T = any> {
|
|
|
1514
1534
|
protected getRawCellValue(row: T, col: JvGridColumn<T>): unknown;
|
|
1515
1535
|
protected getCellValue(row: T, col: JvGridColumn<T>): unknown;
|
|
1516
1536
|
protected getEditValue(row: T, col: JvGridColumn<T>): string;
|
|
1537
|
+
protected getBooleanEditValue(row: T, col: JvGridColumn<T>): boolean;
|
|
1538
|
+
protected isBooleanTrue(value: unknown): boolean;
|
|
1539
|
+
protected editType(col: JvGridColumn<T>): JvGridEditType;
|
|
1540
|
+
protected inputType(col: JvGridColumn<T>): 'text' | 'number' | 'date' | 'time' | 'datetime-local';
|
|
1541
|
+
protected normalizeEditValue(col: JvGridColumn<T>, value: unknown): unknown;
|
|
1542
|
+
private toDateInputValue;
|
|
1543
|
+
private toDateTimeInputValue;
|
|
1544
|
+
private toTimeInputValue;
|
|
1517
1545
|
protected formatValue(value: unknown, col: JvGridColumn<T>, _row: T): string;
|
|
1518
1546
|
protected getComparableValue(value: unknown, col: JvGridColumn<T>): string | number | boolean | null;
|
|
1519
1547
|
protected getSearchValue(value: unknown, col: JvGridColumn<T>): string;
|
|
@@ -1538,17 +1566,20 @@ declare class JvGridComponent<T = any> {
|
|
|
1538
1566
|
protected goToPage(page: number): void;
|
|
1539
1567
|
protected isSelected(row: T): boolean;
|
|
1540
1568
|
protected toggleRow(row: T): void;
|
|
1569
|
+
protected onPageSizeChange(value: string): void;
|
|
1541
1570
|
protected toggleSelectAll(checked: boolean): void;
|
|
1542
1571
|
protected onRowClick(event: Event | T, row?: T): void;
|
|
1543
1572
|
protected onRowDblClick(row: T): void;
|
|
1544
1573
|
protected onActionClick(action: JvGridAction<T>, row: T): void;
|
|
1545
1574
|
protected onColumnFilterChange(col: JvGridColumn<T>, value: string): void;
|
|
1546
|
-
protected getRowLabel(row: T,
|
|
1575
|
+
protected getRowLabel(row: T, _index: number): string;
|
|
1547
1576
|
protected startEdit(row: T, col: JvGridColumn<T>, event: Event): void;
|
|
1548
1577
|
protected commitEdit(row: T, col: JvGridColumn<T>, value: unknown): void;
|
|
1578
|
+
protected commitEditFromKeyboard(event: Event, row: T, col: JvGridColumn<T>, value: unknown): void;
|
|
1549
1579
|
protected cancelEdit(): void;
|
|
1550
1580
|
protected onEditValueChange(row: T, col: JvGridColumn<T>, value: string): void;
|
|
1551
1581
|
private resizeData;
|
|
1582
|
+
constructor();
|
|
1552
1583
|
protected onResizeStart(event: MouseEvent, col: JvGridColumn<T>, _colIdx: number): void;
|
|
1553
1584
|
private readonly onResizeMove;
|
|
1554
1585
|
private readonly onResizeEnd;
|
|
@@ -1571,6 +1602,7 @@ interface JvPaginationEvent {
|
|
|
1571
1602
|
pageSize: number;
|
|
1572
1603
|
}
|
|
1573
1604
|
declare class JvPaginationComponent {
|
|
1605
|
+
protected readonly pageSizeInputId: string;
|
|
1574
1606
|
private readonly translationService;
|
|
1575
1607
|
readonly totalItems: _angular_core.InputSignal<number>;
|
|
1576
1608
|
readonly pageSize: _angular_core.InputSignal<number>;
|
|
@@ -1592,4 +1624,4 @@ declare class JvPaginationComponent {
|
|
|
1592
1624
|
}
|
|
1593
1625
|
|
|
1594
1626
|
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, JvAccordionComponent, JvAccordionPanelDirective, JvAlertComponent, JvAnnouncementService, JvBadgeComponent, JvBreadcrumbComponent, JvButtonComponent, JvButtonGroupComponent, JvCardComponent, JvChangePasswordPageComponent, JvCheckboxComponent, JvCodeComponent, JvCollapsiblePanelComponent, JvConfirmDialogComponent, JvDashboardShellComponent, JvDatePickerComponent, JvDayPlannerComponent, JvDayPlannerDetailDirective, JvDayPlannerItemDirective, JvDialogComponent, JvDialogService, JvDividerComponent, JvFileInputComponent, JvForgotPasswordPageComponent, JvFormContainerComponent, JvFormatService, JvGridComponent, JvIconButtonComponent, JvIconComponent, JvImageGalleryComponent, JvImageSliderComponent, JvInputComponent, JvListComponent, JvListItemComponent, JvLoaderComponent, JvLoaderService, JvLoginPageComponent, JvModalSelectorComponent, JvMonthCalendarComponent, JvMonthCalendarDayDirective, JvPageComponent, JvPaginationComponent, JvRadioComponent, JvSectionComponent, JvSelectComponent, JvSidebarComponent, JvSwitchComponent, JvTabPanelDirective, JvTabsComponent, JvTextareaComponent, JvThemeService, JvToastComponent, JvToastService, JvTooltipDirective, JvTopbarComponent, JvTranslationService, JvWindowModalComponent, provideJvUi };
|
|
1595
|
-
export type { JvAccordionItem, JvActiveConfirmDialog, JvBreadcrumbItem, JvChangePasswordSubmitEvent, JvCodeFont, JvCollapsiblePanelVariant, JvConfirmOptions, JvDayPlannerDetailContext, JvDayPlannerItem, JvDayPlannerItemContext, JvDensity, JvFileInputRejection, JvForgotPasswordSubmitEvent, JvFormatKind, JvFormatOverrides, JvGalleryAction, JvGalleryImage, JvGridAction, JvGridColumn, JvGridColumnFilter, JvGridColumnFormatOptions, JvGridColumnReorderEvent, JvGridColumnResizeEvent, JvGridColumnType, JvGridColumnWidth, JvGridFilterOperator, JvGridOptions, JvGridPageEvent, JvGridRowEditEvent, JvGridRowId, JvGridSortDirection, JvGridSortState, JvGridTrackBy, JvIconDefinition, JvIconElement, JvIntent, JvListItemModel, JvLoaderState, JvLocale, JvLoginSubmitEvent, JvMessagesLocale, JvModalSelectorOption, JvMonthCalendarCell, JvMonthCalendarDayContext, JvMonthCalendarDayMeta, JvMonthCalendarNavigation, JvMonthCalendarResolvedMeta, JvNavItem, JvPaginationEvent, JvSelectOption, JvSliderImage, JvTabItem, JvTabTransition, JvTheme, JvThemeOption, JvToastItem, JvToastPosition, JvToastViewport, JvTone, JvTooltipPosition, JvTopbarAction, JvUiConfig, JvUiConfigInput, JvUiFormats };
|
|
1627
|
+
export type { JvAccordionItem, JvActiveConfirmDialog, JvBreadcrumbItem, JvChangePasswordSubmitEvent, JvCodeFont, JvCollapsiblePanelVariant, JvConfirmOptions, JvDayPlannerDetailContext, JvDayPlannerItem, JvDayPlannerItemContext, JvDensity, JvFileInputRejection, JvForgotPasswordSubmitEvent, JvFormatKind, JvFormatOverrides, JvGalleryAction, JvGalleryImage, JvGridAction, JvGridColumn, JvGridColumnFilter, JvGridColumnFormatOptions, JvGridColumnReorderEvent, JvGridColumnResizeEvent, JvGridColumnType, JvGridColumnWidth, JvGridEditType, JvGridFilterOperator, JvGridOptions, JvGridPageEvent, JvGridRowEditEvent, JvGridRowId, JvGridSortDirection, JvGridSortState, JvGridTrackBy, JvIconDefinition, JvIconElement, JvIntent, JvListItemModel, JvLoaderState, JvLocale, JvLoginSubmitEvent, JvMessagesLocale, JvModalSelectorOption, JvMonthCalendarCell, JvMonthCalendarDayContext, JvMonthCalendarDayMeta, JvMonthCalendarNavigation, JvMonthCalendarResolvedMeta, JvNavItem, JvPaginationEvent, JvSelectOption, JvSliderImage, JvTabItem, JvTabTransition, JvTheme, JvThemeOption, JvToastItem, JvToastPosition, JvToastViewport, JvTone, JvTooltipPosition, JvTopbarAction, JvUiConfig, JvUiConfigInput, JvUiFormats };
|