@nova-design-system/nova-react 3.15.0 → 3.17.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.
Files changed (62) hide show
  1. package/dist/cjs/generated/components.server.js +826 -0
  2. package/dist/cjs/{index-BK1_MpRZ.js → index-B0fvq6nd.js} +4818 -1376
  3. package/dist/cjs/index.js +3 -2
  4. package/dist/cjs/{nv-accordion-item.entry-BPaDkIFa.js → nv-accordion-item.entry-DSXSMuOt.js} +2 -2
  5. package/dist/cjs/{nv-accordion.entry-BaHER2iL.js → nv-accordion.entry-D2GTCEoF.js} +6 -6
  6. package/dist/cjs/{nv-alert.entry-Hv-y3Bwl.js → nv-alert.entry-CxrdJWzE.js} +2 -2
  7. package/dist/cjs/nv-avatar.entry-Boe2Bp39.js +68 -0
  8. package/dist/cjs/{nv-badge_2.entry-CwlWa72m.js → nv-badge_2.entry-Cvu8cWAm.js} +1 -1
  9. package/dist/cjs/{nv-breadcrumb.entry-BvHgDgxV.js → nv-breadcrumb.entry-IBd49U13.js} +2 -2
  10. package/dist/cjs/{nv-breadcrumbs.entry-BdptRKYA.js → nv-breadcrumbs.entry-CxDCe3pi.js} +1 -1
  11. package/dist/cjs/nv-button.entry-veszqyTF.js +159 -0
  12. package/dist/cjs/{nv-buttongroup.entry-Bh0f3bAn.js → nv-buttongroup.entry-BoqH0Kje.js} +1 -1
  13. package/dist/cjs/{nv-calendar.entry-BZLITXEC.js → nv-calendar.entry-D-Wl56-6.js} +1 -1
  14. package/dist/cjs/{nv-col.entry-I3bCSLB5.js → nv-col.entry-BhKZwFpL.js} +1 -1
  15. package/dist/cjs/{nv-datagrid.entry-BzIkgOV6.js → nv-datagrid.entry-DnMZbymp.js} +177 -10
  16. package/dist/cjs/{nv-datagridcolumn.entry-BuFhEECG.js → nv-datagridcolumn.entry-U38uoM6D.js} +1 -1
  17. package/dist/cjs/{nv-dialog.entry-DIbIIXo2.js → nv-dialog.entry-BF4VplVi.js} +32 -29
  18. package/dist/cjs/{nv-dialogfooter_2.entry-Thzk1kVd.js → nv-dialogfooter_2.entry-TqO3Mryg.js} +2 -2
  19. package/dist/cjs/{nv-fieldcheckbox.entry-mkas423y.js → nv-fieldcheckbox.entry-C_rJ7Jrf.js} +2 -2
  20. package/dist/cjs/{nv-fielddate.entry-Cek70TQM.js → nv-fielddate.entry-DZdztKCP.js} +51 -26
  21. package/dist/cjs/{nv-fielddaterange.entry-C3BYAnVq.js → nv-fielddaterange.entry-CMxpi6X9.js} +68 -42
  22. package/dist/cjs/{nv-fielddropdown.entry-Djz5-R1T.js → nv-fielddropdown.entry-T-qNo0gM.js} +33 -7
  23. package/dist/cjs/{nv-fielddropdownitem.entry-B2z13jEI.js → nv-fielddropdownitem.entry-BfIqaxW3.js} +1 -1
  24. package/dist/cjs/{nv-fieldmultiselect.entry-uJ9i2gtz.js → nv-fieldmultiselect.entry-rtKSNZ5F.js} +187 -156
  25. package/dist/cjs/{nv-fieldnumber.entry-zpWCDG_-.js → nv-fieldnumber.entry-BD-xCdb5.js} +2 -2
  26. package/dist/cjs/{nv-fieldpassword.entry-C835HE_i.js → nv-fieldpassword.entry-Dmt91T4y.js} +2 -2
  27. package/dist/cjs/{nv-fieldradio.entry-CzLMbo4W.js → nv-fieldradio.entry-CAoRufTW.js} +2 -2
  28. package/dist/cjs/{nv-fieldselect.entry-BzcYzmqe.js → nv-fieldselect.entry-2YLbIpBO.js} +2 -2
  29. package/dist/cjs/{nv-fieldslider.entry-B5vyrQZw.js → nv-fieldslider.entry-D6g_MrUd.js} +2 -2
  30. package/dist/cjs/{nv-fieldtext.entry-DnPQxVqp.js → nv-fieldtext.entry-D-SS4OPR.js} +2 -2
  31. package/dist/cjs/{nv-fieldtextarea.entry-n2MJK2Jg.js → nv-fieldtextarea.entry-L0XDrdHL.js} +2 -2
  32. package/dist/cjs/{nv-fieldtime.entry-DChhvqKi.js → nv-fieldtime.entry-Hw5VOmpK.js} +25 -12
  33. package/dist/cjs/nv-icon.entry-B7mLhu0c.js +80 -0
  34. package/dist/cjs/{nv-iconbutton_2.entry-u0l16LeW.js → nv-iconbutton_2.entry-iinBJBb6.js} +2 -2
  35. package/dist/cjs/{nv-menu.entry-OYVh6iMu.js → nv-menu.entry-BTW4XauN.js} +24 -9
  36. package/dist/cjs/{nv-menuitem.entry-Dj6N1n9X.js → nv-menuitem.entry-CIT2_Fbe.js} +1 -1
  37. package/dist/cjs/{nv-notification.entry-D1dVSEYZ.js → nv-notification.entry-CVyzCsSh.js} +2 -2
  38. package/dist/cjs/{nv-notificationcontainer.entry-Bp2NR_fe.js → nv-notificationcontainer.entry-CqoyGWAa.js} +1 -1
  39. package/dist/cjs/{nv-popover.entry-Bf2AEn9B.js → nv-popover.entry-Bf5ihsdq.js} +67 -61
  40. package/dist/cjs/{nv-row.entry-Bi9eoQEh.js → nv-row.entry-Chp5QzjD.js} +1 -1
  41. package/dist/cjs/nv-split.entry-DSB_HMU-.js +337 -0
  42. package/dist/cjs/{nv-stack.entry-Dd680LIT.js → nv-stack.entry-D6L6830W.js} +2 -2
  43. package/dist/cjs/nv-table.entry-B-UuWaI5.js +245 -0
  44. package/dist/cjs/{nv-toggle.entry-gBokGnGe.js → nv-toggle.entry-AG7sAORg.js} +2 -2
  45. package/dist/cjs/{nv-togglebutton.entry-ZpltTrQe.js → nv-togglebutton.entry-Btlxm5gO.js} +1 -1
  46. package/dist/cjs/{nv-togglebuttongroup.entry-Bu0C6Iq3.js → nv-togglebuttongroup.entry-CM3nWiUU.js} +2 -2
  47. package/dist/cjs/{nv-tooltip.entry-DR4aj5qF.js → nv-tooltip.entry-m4AYXhW3.js} +1 -1
  48. package/dist/components/NvDatatable.js +45 -0
  49. package/dist/generated/components.js +10 -10
  50. package/dist/generated/components.server.js +10 -16
  51. package/dist/index.js +1 -0
  52. package/dist/types/components/NvDatatable.d.ts +25 -0
  53. package/dist/types/generated/components.d.ts +7 -12
  54. package/dist/types/generated/components.server.d.ts +7 -12
  55. package/dist/types/index.d.ts +1 -0
  56. package/package.json +14 -6
  57. package/dist/cjs/dom.utils-ac71e0ef-CmIwRr6O.js +0 -168
  58. package/dist/cjs/nv-avatar.entry-BTmGyeGF.js +0 -68
  59. package/dist/cjs/nv-button.entry-6O39hBHY.js +0 -165
  60. package/dist/cjs/nv-icon.entry-agdqxUMS.js +0 -80
  61. package/dist/cjs/nv-table.entry-wxn9GDDo.js +0 -339
  62. package/dist/cjs/nv-tablecolumn.entry-Bo0z0XyB.js +0 -19
@@ -1,339 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BK1_MpRZ.js');
4
- var dom_utilsAc71e0ef = require('./dom.utils-ac71e0ef-CmIwRr6O.js');
5
- require('react');
6
- require('react-dom');
7
-
8
- const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-header-text)}nv-table td{border-bottom:1px solid var(--components-datagrid-body-border);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
9
- const NvTableStyle0 = nvTableCss;
10
-
11
- const NvTable = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.action = index.createEvent(this, "action");
15
- this.templateCache = new Map();
16
- this.headerTemplateCache = new Map();
17
- /****************************************************************************/
18
- //#region STATES
19
- this.parsedColumns = [];
20
- this.parsedData = [];
21
- this.table = null;
22
- //#endregion STATES
23
- /****************************************************************************/
24
- //#region PROPERTIES
25
- /**
26
- * Data to be displayed in the table
27
- */
28
- this.data = [];
29
- /**
30
- * Configuration of the columns of the table
31
- */
32
- this.columnsConfig = [];
33
- /**
34
- * Fallback value to be displayed when data is not available
35
- */
36
- this.fallbackValue = 'N/A';
37
- /**
38
- * Message to be displayed when no data is available
39
- */
40
- this.noDataMessage = 'No data available';
41
- /**
42
- * The message to display when there are no columns or data available.
43
- * @default 'No data or columns available to display.'
44
- */
45
- this.noColumnsNoDataMessage = 'No data or columns available to display.';
46
- }
47
- //#endregion PROPERTIES
48
- /****************************************************************************/
49
- //#region METHODS
50
- /**
51
- * Caches templates for cells and headers upfront to improve performance.
52
- */
53
- cacheTemplates() {
54
- const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));
55
- columns.forEach((col) => {
56
- const key = col.name;
57
- const cellSlot = col.querySelector('[slot="cell"]');
58
- if (cellSlot) {
59
- const element = dom_utilsAc71e0ef.deepCopyElement(cellSlot);
60
- this.templateCache.set(key, element);
61
- }
62
- const headerSlot = col.querySelector('[slot="header"]');
63
- if (headerSlot) {
64
- const element = dom_utilsAc71e0ef.deepCopyElement(headerSlot);
65
- this.headerTemplateCache.set(key, element);
66
- }
67
- else {
68
- const header = col.header;
69
- if (header) {
70
- const headerDiv = document.createElement('div');
71
- headerDiv.textContent = header;
72
- this.headerTemplateCache.set(key, headerDiv);
73
- }
74
- }
75
- });
76
- }
77
- parseDataAndColumns() {
78
- if (this.dataJson) {
79
- this.parseJsonData(this.dataJson);
80
- }
81
- else if (this.data && this.data.length > 0) {
82
- this.parseDataArray(this.data, this.parsedData);
83
- }
84
- if (this.columnsConfigJson) {
85
- this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);
86
- }
87
- else if (this.columnsConfig && this.columnsConfig.length > 0) {
88
- this.parseColumnsArray(this.columnsConfig, this.parsedColumns);
89
- }
90
- else if (this.headerTemplateCache.size > 0) {
91
- const headerKeys = Array.from(this.headerTemplateCache.keys());
92
- const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { name: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
93
- this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
94
- }
95
- else if (this.parsedData.length > 0) {
96
- const firstRow = this.parsedData[0];
97
- const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
98
- name: key,
99
- header: key.charAt(0).toUpperCase() + key.slice(1),
100
- }));
101
- this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
102
- }
103
- }
104
- deepEqual(a, b) {
105
- return JSON.stringify(a) === JSON.stringify(b);
106
- }
107
- /**
108
- * Parses the data array and sets the state accordingly
109
- * @param {any[]} newValue - New value of the data array
110
- * @param {any[]} oldValue - Old value of the data array
111
- * @returns {void}
112
- */
113
- parseDataArray(newValue, oldValue) {
114
- // Ensure both are arrays for proper comparison
115
- const safeNewValue = Array.isArray(newValue) ? newValue : [];
116
- const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
117
- if (this.deepEqual(safeNewValue, safeOldValue)) {
118
- return; // Deep comparison
119
- }
120
- this.parsedData = Array.isArray(newValue) ? newValue : [];
121
- }
122
- /**
123
- * Parses the columns array and sets the state accordingly
124
- * @param {ColumnConfig[]} newValue - New value of the columns array
125
- * @param {ColumnConfig[]} oldValue - Old value of the columns array
126
- * @returns {void}
127
- */
128
- parseColumnsArray(newValue, oldValue) {
129
- // Ensure both are arrays for proper comparison
130
- const safeNewValue = Array.isArray(newValue) ? newValue : [];
131
- const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
132
- // Use a proper deep comparison function (e.g., Lodash's isEqual)
133
- if (this.deepEqual(safeNewValue, safeOldValue)) {
134
- return;
135
- }
136
- // Assign only after confirming changes
137
- this.parsedColumns = safeNewValue;
138
- }
139
- initializeTable() {
140
- // Clear the previous table instance (if any)
141
- this.table = null;
142
- if (this.parsedColumns.length > 0) {
143
- this.table = {
144
- columns: this.parsedColumns,
145
- data: this.getTableData(),
146
- };
147
- }
148
- else {
149
- this.table = null;
150
- }
151
- }
152
- getTableData() {
153
- if (this.parsedData &&
154
- Array.isArray(this.parsedData) &&
155
- this.parsedData.length > 0) {
156
- return [...this.parsedData];
157
- }
158
- else {
159
- return [];
160
- }
161
- }
162
- // Helper function to get nested property value
163
- replaceKeyWithValue(obj, path) {
164
- var _a;
165
- return ((_a = path
166
- .split('.')
167
- .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)) !== null && _a !== void 0 ? _a : this.fallbackValue);
168
- }
169
- renderTemplate(template, row) {
170
- if (!template) {
171
- return null;
172
- }
173
- // Handle <template> elements correctly
174
- const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
175
- const element = dom_utilsAc71e0ef.deepCopyElement(templateContent);
176
- // Replace placeholders in text content, attributes, and properties
177
- element.querySelectorAll('*').forEach(el => {
178
- // Replace placeholders in text content
179
- this.replacePlaceholdersTextContent(el, row);
180
- // Replace placeholders in attributes
181
- this.replacePlaceholdersAttributes(el, row);
182
- // Replace placeholders in properties
183
- this.replacePlaceholdersProperties(el, row);
184
- });
185
- // Handle `data-bind-event`
186
- element.querySelectorAll('[data-bind-event]').forEach(el => {
187
- const bindEvent = el.getAttribute('data-bind-event') || '';
188
- const splitted = bindEvent.split(':');
189
- if (!bindEvent.includes(':') || splitted.length < 2) {
190
- console.warn('Invalid data-bind-event format:', bindEvent);
191
- return;
192
- }
193
- const eventType = splitted[0];
194
- const keyAction = splitted[1];
195
- const details = splitted.length > 2 ? splitted[2] : null;
196
- el.addEventListener(eventType, () => {
197
- var _a;
198
- const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
199
- // Convert keys into a single object instead of an array of objects
200
- const keyValue = keys.reduce((acc, key) => {
201
- acc[key] = row === null || row === void 0 ? void 0 : row[key];
202
- return acc;
203
- }, {});
204
- const action = { keyAction, details: keyValue };
205
- this.action.emit(action);
206
- });
207
- });
208
- // Ensure Web Components are properly connected
209
- setTimeout(() => {
210
- element.querySelectorAll('*').forEach(child => {
211
- if (typeof child.connectedCallback === 'function') {
212
- child.connectedCallback();
213
- }
214
- });
215
- }, 0);
216
- return (index.h("div", { ref: el => {
217
- if (el) {
218
- el.innerHTML = ''; // Remove existing content
219
- el.appendChild(element); // Append new element
220
- }
221
- } }));
222
- }
223
- replacePlaceholdersTextContent(element, row) {
224
- // ✅ Replace placeholders in text content
225
- element.childNodes.forEach(node => {
226
- if (node.nodeType === Node.TEXT_NODE) {
227
- node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
228
- }
229
- });
230
- }
231
- replacePlaceholdersAttributes(element, row) {
232
- // ✅ Replace placeholders in attributes
233
- Array.from(element.attributes).forEach(attr => {
234
- if (attr.value.includes('__')) {
235
- attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
236
- }
237
- });
238
- }
239
- replacePlaceholdersProperties(element, row) {
240
- // ✅ Dynamically extract relevant properties
241
- const properties = new Set();
242
- // Collect only own enumerable properties
243
- Object.keys(element).forEach(key => properties.add(key));
244
- // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
245
- let proto = Object.getPrototypeOf(element);
246
- while (proto && proto !== HTMLElement.prototype) {
247
- Object.keys(proto).forEach(key => properties.add(key));
248
- proto = Object.getPrototypeOf(proto);
249
- }
250
- // ✅ Filter and copy only non-function properties and exclude irrelevant ones
251
- properties.forEach(prop => {
252
- if (typeof element[prop] !== 'function' && // Ignore methods
253
- !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
254
- !dom_utilsAc71e0ef.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
255
- ) {
256
- try {
257
- const value = element[prop];
258
- // ✅ Replace placeholders only if the value is a string
259
- if (typeof value === 'string' && value.includes('__')) {
260
- element[prop] = value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key)); // ✅ TypeScript safe
261
- }
262
- }
263
- catch (error) {
264
- console.warn(`Could not assign property ${prop}:`, error.message);
265
- }
266
- }
267
- });
268
- }
269
- //#endregion METHODS
270
- /****************************************************************************/
271
- //#region WATCHERS
272
- parseColumns(newValue, oldValue) {
273
- this.parseColumnsArray(newValue, oldValue);
274
- }
275
- parseJsonColumns(newValue, oldValue) {
276
- try {
277
- const newItems = newValue ? JSON.parse(newValue) : [];
278
- this.parseColumnsArray(newItems, oldValue);
279
- }
280
- catch (e) {
281
- console.error('Invalid JSON format for columnsConfigJson:', e.message);
282
- this.parsedColumns = [];
283
- }
284
- }
285
- parseData(newValue, oldValue) {
286
- this.parseDataArray(newValue, oldValue);
287
- }
288
- parseJsonData(newValue) {
289
- try {
290
- const newItems = newValue ? JSON.parse(newValue) : [];
291
- this.parseDataArray(newItems, this.parsedData);
292
- }
293
- catch (e) {
294
- console.error('Invalid JSON format for dataJson:', e.message);
295
- this.parsedData = [];
296
- }
297
- }
298
- handleParsedChange() {
299
- this.initializeTable();
300
- }
301
- //#endregion WATCHERS
302
- /****************************************************************************/
303
- //#region LIFECYCLE
304
- componentWillLoad() {
305
- this.cacheTemplates();
306
- this.parseDataAndColumns();
307
- }
308
- //#endregion EVENTS
309
- /****************************************************************************/
310
- //#region RENDER
311
- render() {
312
- const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
313
- ? []
314
- : this.table.columns;
315
- const rows = !this.table || this.table === undefined || this.parsedData.length === 0
316
- ? []
317
- : this.table.data;
318
- return (index.h(index.Host, { key: '08082f0800c32a59606968aa2a80cfa3c2f07960' }, index.h("div", { key: 'f55f5409f45d90ef072abb09006ef6366e7e8c95', class: "hidden" }, index.h("slot", { key: '0b5326e8c7c6f97f419819744a132335d4435bb4' })), index.h("slot", { key: '07d4538957b466ed332cd598e2c132d85a801979', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", { class: "table-header" }, index.h("tr", null, headerGroups &&
319
- headerGroups.map(col => {
320
- return (index.h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
321
- })))), index.h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (index.h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
322
- var _a;
323
- return (index.h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
324
- ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
325
- })))))))), index.h("slot", { key: '1f505261da2c2e05511940ec90f7375981cb0823', name: "after" })));
326
- }
327
- get el() { return index.getElement(this); }
328
- static get watchers() { return {
329
- "columnsConfig": ["parseColumns"],
330
- "columnsConfigJson": ["parseJsonColumns"],
331
- "data": ["parseData"],
332
- "dataJson": ["parseJsonData"],
333
- "parsedColumns": ["handleParsedChange"],
334
- "parsedData": ["handleParsedChange"]
335
- }; }
336
- };
337
- NvTable.style = NvTableStyle0;
338
-
339
- exports.nv_table = NvTable;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var index = require('./index-BK1_MpRZ.js');
4
- require('react');
5
- require('react-dom');
6
-
7
- const NvTablecolumn = class {
8
- constructor(hostRef) {
9
- index.registerInstance(this, hostRef);
10
- }
11
- //#endregion PROPERTIES
12
- /****************************************************************************/
13
- //#region RENDER
14
- render() {
15
- return null;
16
- }
17
- };
18
-
19
- exports.nv_tablecolumn = NvTablecolumn;