@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

package/dist/collection/components/nv-calendar/test/partials/day-cell.logic.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-cell.logic.test.js","sourceRoot":"","sources":["../../../../../src/components/nv-calendar/test/partials/day-cell.logic.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\nimport { describe, it, expect, vi } from 'vitest';\n\n/**\n * Logic tests for the DayCell partial\n *\n * These tests validate business logic without directly testing JSX.\n * They focus on testable aspects: class generation,\n * conditional logic, and event handling.\n */\n\n/**\n * Utility function that replicates the class generation logic\n * of the DayCell partial to allow unit testing\n * @param {object} props - DayCell state configuration\n * @param {boolean} props.isSelected - If the day is selected\n * @param {boolean} props.isStart - If the day is the start of a range\n * @param {boolean} props.isEnd - If the day is the end of a range\n * @param {boolean} props.isInRange - If the day is in a selected range\n * @param {boolean} props.isDisabled - If the day is disabled\n * @param {boolean} props.isCurrentMonth - If the day belongs to the current month\n * @param {boolean} props.isToday - If the day is today\n * @returns {string} String containing generated CSS classes\n */\nfunction generateDayCellClasses(props: {\n  isSelected: boolean;\n  isStart: boolean;\n  isEnd: boolean;\n  isInRange: boolean;\n  isDisabled: boolean;\n  isCurrentMonth: boolean;\n  isToday: boolean;\n}) {\n  const {\n    isSelected,\n    isStart,\n    isEnd,\n    isInRange,\n    isDisabled,\n    isCurrentMonth,\n    isToday,\n  } = props;\n\n  return [\n    'day',\n    isSelected ? 'selected' : '',\n    isStart ? 'range-start' : '',\n    isEnd ? 'range-end' : '',\n    isInRange ? 'in-range' : '',\n    isDisabled ? 'disabled' : '',\n    !isCurrentMonth ? 'outside-month' : '',\n    isToday ? 'is-today' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/**\n * Utility function that replicates the click handling logic\n * of the DayCell partial\n * @param {boolean} isDisabled - If the day is disabled\n * @param {((date: Date) => void) | undefined} onClick - Callback function to call on click\n * @param {Date} date - Date to pass to the callback\n */\nfunction simulateHandleClick(\n  isDisabled: boolean,\n  onClick: ((date: Date) => void) | undefined,\n  date: Date,\n) {\n  if (!isDisabled && onClick) {\n    onClick(date);\n  }\n}\n\ndescribe('DayCell - Logic Tests', () => {\n  describe('CSS Classes Generation Logic', () => {\n    it('should generate basic day class', () => {\n      const classes = generateDayCellClasses({\n        isSelected: false,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: false,\n      });\n\n      expect(classes).toBe('day');\n    });\n\n    it('should include selected class when isSelected is true', () => {\n      const classes = generateDayCellClasses({\n        isSelected: true,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: false,\n      });\n\n      expect(classes).toContain('selected');\n      expect(classes).toContain('day');\n    });\n\n    it('should include range classes for range selection', () => {\n      const startClasses = generateDayCellClasses({\n        isSelected: false,\n        isStart: true,\n        isEnd: false,\n        isInRange: true,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: false,\n      });\n\n      expect(startClasses).toContain('range-start');\n      expect(startClasses).toContain('in-range');\n      expect(startClasses).not.toContain('range-end');\n\n      const endClasses = generateDayCellClasses({\n        isSelected: false,\n        isStart: false,\n        isEnd: true,\n        isInRange: true,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: false,\n      });\n\n      expect(endClasses).toContain('range-end');\n      expect(endClasses).toContain('in-range');\n      expect(endClasses).not.toContain('range-start');\n    });\n\n    it('should include disabled class when isDisabled is true', () => {\n      const classes = generateDayCellClasses({\n        isSelected: false,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: true,\n        isCurrentMonth: true,\n        isToday: false,\n      });\n\n      expect(classes).toContain('disabled');\n    });\n\n    it('should include outside-month class when not current month', () => {\n      const classes = generateDayCellClasses({\n        isSelected: false,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: false,\n        isCurrentMonth: false,\n        isToday: false,\n      });\n\n      expect(classes).toContain('outside-month');\n    });\n\n    it('should include is-today class when isToday is true', () => {\n      const classes = generateDayCellClasses({\n        isSelected: false,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: true,\n      });\n\n      expect(classes).toContain('is-today');\n    });\n\n    it('should combine multiple classes correctly', () => {\n      const classes = generateDayCellClasses({\n        isSelected: true,\n        isStart: false,\n        isEnd: false,\n        isInRange: false,\n        isDisabled: false,\n        isCurrentMonth: true,\n        isToday: true,\n      });\n\n      const classList = classes.split(' ');\n      expect(classList).toContain('day');\n      expect(classList).toContain('selected');\n      expect(classList).toContain('is-today');\n      expect(classList).not.toContain('disabled');\n      expect(classList).not.toContain('outside-month');\n    });\n\n    it('should handle all states enabled simultaneously', () => {\n      const classes = generateDayCellClasses({\n        isSelected: true,\n        isStart: true,\n        isEnd: true,\n        isInRange: true,\n        isDisabled: true,\n        isCurrentMonth: false,\n        isToday: true,\n      });\n\n      const classList = classes.split(' ');\n      expect(classList).toContain('day');\n      expect(classList).toContain('selected');\n      expect(classList).toContain('range-start');\n      expect(classList).toContain('range-end');\n      expect(classList).toContain('in-range');\n      expect(classList).toContain('disabled');\n      expect(classList).toContain('outside-month');\n      expect(classList).toContain('is-today');\n    });\n  });\n\n  describe('Click Handler Logic', () => {\n    it('should call onClick when not disabled and onClick is provided', () => {\n      const mockOnClick = vi.fn();\n      const testDate = new Date('2024-01-15');\n\n      simulateHandleClick(false, mockOnClick, testDate);\n\n      expect(mockOnClick).toHaveBeenCalledWith(testDate);\n      expect(mockOnClick).toHaveBeenCalledTimes(1);\n    });\n\n    it('should not call onClick when disabled', () => {\n      const mockOnClick = vi.fn();\n      const testDate = new Date('2024-01-15');\n\n      simulateHandleClick(true, mockOnClick, testDate);\n\n      expect(mockOnClick).not.toHaveBeenCalled();\n    });\n\n    it('should not call onClick when onClick is undefined', () => {\n      const testDate = new Date('2024-01-15');\n\n      // Should not throw error\n      expect(() => {\n        simulateHandleClick(false, undefined, testDate);\n      }).not.toThrow();\n    });\n\n    it('should handle multiple clicks correctly', () => {\n      const mockOnClick = vi.fn();\n      const testDate = new Date('2024-01-15');\n\n      simulateHandleClick(false, mockOnClick, testDate);\n      simulateHandleClick(false, mockOnClick, testDate);\n      simulateHandleClick(false, mockOnClick, testDate);\n\n      expect(mockOnClick).toHaveBeenCalledTimes(3);\n      expect(mockOnClick).toHaveBeenCalledWith(testDate);\n    });\n  });\n\n  describe('Edge Cases and Validation', () => {\n    it('should handle all boolean combinations without errors', () => {\n      // Test all possible combinations of boolean flags\n      const booleanCombinations = [\n        [false, false, false, false, false, false, false],\n        [true, false, false, false, false, false, false],\n        [false, true, false, false, false, false, false],\n        [false, false, true, false, false, false, false],\n        [false, false, false, true, false, false, false],\n        [false, false, false, false, true, false, false],\n        [false, false, false, false, false, true, false],\n        [false, false, false, false, false, false, true],\n        [true, true, true, true, true, true, true],\n      ];\n\n      booleanCombinations.forEach(\n        ([\n          isSelected,\n          isStart,\n          isEnd,\n          isInRange,\n          isDisabled,\n          isCurrentMonth,\n          isToday,\n        ]) => {\n          expect(() => {\n            generateDayCellClasses({\n              isSelected,\n              isStart,\n              isEnd,\n              isInRange,\n              isDisabled,\n              isCurrentMonth,\n              isToday,\n            });\n          }).not.toThrow();\n        },\n      );\n    });\n\n    it('should always include base day class', () => {\n      // Test with different combinations that the 'day' class is always present\n      const testCases = [\n        { isSelected: true, isToday: true, isDisabled: false },\n        { isSelected: false, isToday: false, isDisabled: true },\n        { isInRange: true, isStart: true, isCurrentMonth: false },\n      ];\n\n      testCases.forEach(testCase => {\n        const classes = generateDayCellClasses({\n          isSelected: false,\n          isStart: false,\n          isEnd: false,\n          isInRange: false,\n          isDisabled: false,\n          isCurrentMonth: true,\n          isToday: false,\n          ...testCase,\n        });\n\n        expect(classes).toContain('day');\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/nv-calendar/test/partials/week-numbers.logic.test.js

@@ -0,0 +1,217 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { describe, it, expect } from "vitest";
+/**
+ * Logic tests for the WeekNumbers partial
+ *
+ * These tests validate the week numbers logic:
+ * - ISO 8601 week number calculation
+ * - Year transition handling
+ * - Consistency with calendar grid
+ */
+function getWeekNumber(date) {
+    // Create a copy of the date to avoid modifying the original
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    // Adjust to the same week Thursday (ISO 8601)
+    d.setUTCDate(d.getUTCDate() + 3 - ((d.getUTCDay() + 6) % 7));
+    // Calculate the first Thursday of the year
+    const week1 = new Date(Date.UTC(d.getUTCFullYear(), 0, 4));
+    // Calculate the week number
+    return (1 +
+        Math.round(((d.getTime() - week1.getTime()) / 86400000 -
+            3 +
+            ((week1.getUTCDay() + 6) % 7)) /
+            7));
+}
+function generateWeekNumbers(year, month) {
+    const firstDay = new Date(year, month, 1);
+    const weekNumbers = [];
+    // Calculate the first displayed day (may be from previous month)
+    const startDate = new Date(firstDay);
+    const dayOfWeek = firstDay.getDay();
+    const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    startDate.setDate(startDate.getDate() - daysToSubtract);
+    // Generate 6 weeks of numbers
+    for (let week = 0; week < 6; week++) {
+        const weekDate = new Date(startDate);
+        weekDate.setDate(startDate.getDate() + week * 7);
+        weekNumbers.push(getWeekNumber(weekDate));
+    }
+    return weekNumbers;
+}
+function isValidWeekNumber(weekNumber) {
+    return weekNumber >= 1 && weekNumber <= 53;
+}
+function getWeekYear(date) {
+    const d = new Date(date);
+    d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+    return d.getFullYear();
+}
+function shouldShowWeekNumbers(showWeekNumbers) {
+    return showWeekNumbers;
+}
+describe('WeekNumbers - Logic Tests', () => {
+    describe('ISO 8601 Week Number Calculation', () => {
+        it('should calculate correct week numbers for known dates', () => {
+            // January 1, 2024 (Monday) = week 1
+            expect(getWeekNumber(new Date(2024, 0, 1))).toBe(1);
+            // January 1, 2023 (Sunday) = week 52 of 2022
+            expect(getWeekNumber(new Date(2023, 0, 1))).toBe(52);
+            // January 1, 2022 (Saturday) = week 52 of 2021
+            expect(getWeekNumber(new Date(2022, 0, 1))).toBe(52);
+            // Mid-year - June 15, 2024 est dans la semaine 24 selon ISO 8601
+            expect(getWeekNumber(new Date(2024, 5, 15))).toBe(24);
+        });
+        it('should handle year transitions correctly', () => {
+            // December 31, 2023 (Sunday) = week 52
+            expect(getWeekNumber(new Date(2023, 11, 31))).toBe(52);
+            // January 1, 2024 (Monday) = week 1
+            expect(getWeekNumber(new Date(2024, 0, 1))).toBe(1);
+            // January 2, 2024 (Tuesday) = week 1
+            expect(getWeekNumber(new Date(2024, 0, 2))).toBe(1);
+        });
+        it('should handle leap years correctly', () => {
+            // Leap year 2024
+            expect(getWeekNumber(new Date(2024, 1, 29))).toBe(9); // February 29, 2024
+            // Non-leap year 2023
+            expect(getWeekNumber(new Date(2023, 1, 28))).toBe(9); // February 28, 2023
+        });
+        it('should calculate week year correctly', () => {
+            // January 1, 2023 belongs to week 52 of 2022
+            expect(getWeekYear(new Date(2023, 0, 1))).toBe(2022);
+            // January 1, 2024 belongs to week 1 of 2024
+            expect(getWeekYear(new Date(2024, 0, 1))).toBe(2024);
+            // December 30, 2024 (Monday) belongs to week 1 of 2025
+            expect(getWeekYear(new Date(2024, 11, 30))).toBe(2025);
+        });
+    });
+    describe('Week Numbers Generation for Calendar', () => {
+        it('should generate 6 week numbers for any month', () => {
+            const weekNumbers = generateWeekNumbers(2024, 5); // June 2024
+            expect(weekNumbers.length).toBe(6);
+        });
+        it('should generate valid week numbers', () => {
+            const weekNumbers = generateWeekNumbers(2024, 5);
+            weekNumbers.forEach(weekNum => {
+                expect(isValidWeekNumber(weekNum)).toBe(true);
+            });
+        });
+        it('should handle month with different starting days', () => {
+            // January 2024 starts on a Monday
+            const januaryWeeks = generateWeekNumbers(2024, 0);
+            expect(januaryWeeks[0]).toBe(1);
+            // February 2024 starts on a Thursday
+            const februaryWeeks = generateWeekNumbers(2024, 1);
+            expect(februaryWeeks[0]).toBe(5);
+            // March 2024 starts on a Friday
+            const marchWeeks = generateWeekNumbers(2024, 2);
+            expect(marchWeeks[0]).toBe(9);
+        });
+        it('should handle year boundaries in week generation', () => {
+            // December 2024
+            const decemberWeeks = generateWeekNumbers(2024, 11);
+            expect(decemberWeeks.length).toBe(6);
+            // January 2025
+            const januaryWeeks = generateWeekNumbers(2025, 0);
+            expect(januaryWeeks.length).toBe(6);
+        });
+        it('should generate consecutive week numbers within month', () => {
+            const weekNumbers = generateWeekNumbers(2024, 5); // June 2024
+            for (let i = 1; i < weekNumbers.length; i++) {
+                const currentWeek = weekNumbers[i];
+                const previousWeek = weekNumbers[i - 1];
+                // Week numbers must be consecutive or handle year transition
+                const isConsecutive = currentWeek === previousWeek + 1;
+                const isYearTransition = previousWeek >= 52 && currentWeek === 1; // Transition to new year
+                expect(isConsecutive || isYearTransition).toBe(true);
+            }
+        });
+    });
+    describe('Week Number Validation', () => {
+        it('should validate correct week number range', () => {
+            expect(isValidWeekNumber(1)).toBe(true);
+            expect(isValidWeekNumber(26)).toBe(true);
+            expect(isValidWeekNumber(52)).toBe(true);
+            expect(isValidWeekNumber(53)).toBe(true);
+        });
+        it('should reject invalid week numbers', () => {
+            expect(isValidWeekNumber(0)).toBe(false);
+            expect(isValidWeekNumber(-1)).toBe(false);
+            expect(isValidWeekNumber(54)).toBe(false);
+            expect(isValidWeekNumber(100)).toBe(false);
+        });
+    });
+    describe('Visibility Logic', () => {
+        it('should show week numbers when enabled', () => {
+            expect(shouldShowWeekNumbers(true)).toBe(true);
+        });
+        it('should hide week numbers when disabled', () => {
+            expect(shouldShowWeekNumbers(false)).toBe(false);
+        });
+    });
+    describe('Edge Cases and Special Scenarios', () => {
+        it('should handle week 53 years correctly', () => {
+            // 2020 had 53 weeks
+            const week53Date = new Date(2020, 11, 28); // December 28, 2020
+            expect(getWeekNumber(week53Date)).toBe(53);
+            // 2021 started with week 53 of 2020
+            const jan1_2021 = new Date(2021, 0, 1); // January 1, 2021
+            expect(getWeekNumber(jan1_2021)).toBe(53);
+            expect(getWeekYear(jan1_2021)).toBe(2020);
+        });
+        it('should handle February in leap and non-leap years', () => {
+            // February 2024 (leap year)
+            const leapFebWeeks = generateWeekNumbers(2024, 1);
+            expect(leapFebWeeks.length).toBe(6);
+            // February 2023 (normal year)
+            const normalFebWeeks = generateWeekNumbers(2023, 1);
+            expect(normalFebWeeks.length).toBe(6);
+        });
+        it('should handle different calendar systems edge cases', () => {
+            // Test with dates near week boundaries
+            const sundayDate = new Date(2024, 5, 16); // Sunday
+            const mondayDate = new Date(2024, 5, 17); // Monday
+            const sundayWeek = getWeekNumber(sundayDate);
+            const mondayWeek = getWeekNumber(mondayDate);
+            expect(mondayWeek).toBe(sundayWeek + 1);
+        });
+        it('should maintain consistency across month boundaries', () => {
+            // End of May / beginning of June 2024
+            const endMayWeeks = generateWeekNumbers(2024, 4); // May
+            const startJuneWeeks = generateWeekNumbers(2024, 5); // June
+            // Last week of May should be consistent with June
+            const lastMayWeek = endMayWeeks[endMayWeeks.length - 1];
+            const firstJuneWeek = startJuneWeeks[0];
+            // Not necessarily equal, but within logical range
+            expect(Math.abs(lastMayWeek - firstJuneWeek)).toBeLessThanOrEqual(6);
+        });
+    });
+    describe('Integration with Calendar Grid', () => {
+        it('should generate week numbers that align with 6-week calendar grid', () => {
+            const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+            months.forEach(month => {
+                const weekNumbers = generateWeekNumbers(2024, month);
+                expect(weekNumbers.length).toBe(6);
+                weekNumbers.forEach(weekNum => {
+                    expect(isValidWeekNumber(weekNum)).toBe(true);
+                });
+            });
+        });
+        it('should handle special calendar scenarios', () => {
+            // Months where the first week is incomplete
+            const specialMonths = [
+                { year: 2024, month: 0 }, // January 2024
+                { year: 2024, month: 8 }, // September 2024
+                { year: 2023, month: 0 }, // January 2023
+            ];
+            specialMonths.forEach(({ year, month }) => {
+                const weekNumbers = generateWeekNumbers(year, month);
+                expect(weekNumbers.length).toBe(6);
+                // All numbers must be valid
+                weekNumbers.forEach(weekNum => {
+                    expect(isValidWeekNumber(weekNum)).toBe(true);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=week-numbers.logic.test.js.map

package/dist/collection/components/nv-calendar/test/partials/week-numbers.logic.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"week-numbers.logic.test.js","sourceRoot":"","sources":["../../../../../src/components/nv-calendar/test/partials/week-numbers.logic.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\nimport { describe, it, expect } from 'vitest';\n\n/**\n * Logic tests for the WeekNumbers partial\n *\n * These tests validate the week numbers logic:\n * - ISO 8601 week number calculation\n * - Year transition handling\n * - Consistency with calendar grid\n */\n\nfunction getWeekNumber(date: Date): number {\n  // Create a copy of the date to avoid modifying the original\n  const d = new Date(\n    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),\n  );\n\n  // Adjust to the same week Thursday (ISO 8601)\n  d.setUTCDate(d.getUTCDate() + 3 - ((d.getUTCDay() + 6) % 7));\n\n  // Calculate the first Thursday of the year\n  const week1 = new Date(Date.UTC(d.getUTCFullYear(), 0, 4));\n\n  // Calculate the week number\n  return (\n    1 +\n    Math.round(\n      ((d.getTime() - week1.getTime()) / 86400000 -\n        3 +\n        ((week1.getUTCDay() + 6) % 7)) /\n        7,\n    )\n  );\n}\n\nfunction generateWeekNumbers(year: number, month: number): number[] {\n  const firstDay = new Date(year, month, 1);\n  const weekNumbers: number[] = [];\n\n  // Calculate the first displayed day (may be from previous month)\n  const startDate = new Date(firstDay);\n  const dayOfWeek = firstDay.getDay();\n  const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1;\n  startDate.setDate(startDate.getDate() - daysToSubtract);\n\n  // Generate 6 weeks of numbers\n  for (let week = 0; week < 6; week++) {\n    const weekDate = new Date(startDate);\n    weekDate.setDate(startDate.getDate() + week * 7);\n    weekNumbers.push(getWeekNumber(weekDate));\n  }\n\n  return weekNumbers;\n}\n\nfunction isValidWeekNumber(weekNumber: number): boolean {\n  return weekNumber >= 1 && weekNumber <= 53;\n}\n\nfunction getWeekYear(date: Date): number {\n  const d = new Date(date);\n  d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));\n  return d.getFullYear();\n}\n\nfunction shouldShowWeekNumbers(showWeekNumbers: boolean): boolean {\n  return showWeekNumbers;\n}\n\ndescribe('WeekNumbers - Logic Tests', () => {\n  describe('ISO 8601 Week Number Calculation', () => {\n    it('should calculate correct week numbers for known dates', () => {\n      // January 1, 2024 (Monday) = week 1\n      expect(getWeekNumber(new Date(2024, 0, 1))).toBe(1);\n\n      // January 1, 2023 (Sunday) = week 52 of 2022\n      expect(getWeekNumber(new Date(2023, 0, 1))).toBe(52);\n\n      // January 1, 2022 (Saturday) = week 52 of 2021\n      expect(getWeekNumber(new Date(2022, 0, 1))).toBe(52);\n\n      // Mid-year - June 15, 2024 est dans la semaine 24 selon ISO 8601\n      expect(getWeekNumber(new Date(2024, 5, 15))).toBe(24);\n    });\n\n    it('should handle year transitions correctly', () => {\n      // December 31, 2023 (Sunday) = week 52\n      expect(getWeekNumber(new Date(2023, 11, 31))).toBe(52);\n\n      // January 1, 2024 (Monday) = week 1\n      expect(getWeekNumber(new Date(2024, 0, 1))).toBe(1);\n\n      // January 2, 2024 (Tuesday) = week 1\n      expect(getWeekNumber(new Date(2024, 0, 2))).toBe(1);\n    });\n\n    it('should handle leap years correctly', () => {\n      // Leap year 2024\n      expect(getWeekNumber(new Date(2024, 1, 29))).toBe(9); // February 29, 2024\n\n      // Non-leap year 2023\n      expect(getWeekNumber(new Date(2023, 1, 28))).toBe(9); // February 28, 2023\n    });\n\n    it('should calculate week year correctly', () => {\n      // January 1, 2023 belongs to week 52 of 2022\n      expect(getWeekYear(new Date(2023, 0, 1))).toBe(2022);\n\n      // January 1, 2024 belongs to week 1 of 2024\n      expect(getWeekYear(new Date(2024, 0, 1))).toBe(2024);\n\n      // December 30, 2024 (Monday) belongs to week 1 of 2025\n      expect(getWeekYear(new Date(2024, 11, 30))).toBe(2025);\n    });\n  });\n\n  describe('Week Numbers Generation for Calendar', () => {\n    it('should generate 6 week numbers for any month', () => {\n      const weekNumbers = generateWeekNumbers(2024, 5); // June 2024\n      expect(weekNumbers.length).toBe(6);\n    });\n\n    it('should generate valid week numbers', () => {\n      const weekNumbers = generateWeekNumbers(2024, 5);\n      weekNumbers.forEach(weekNum => {\n        expect(isValidWeekNumber(weekNum)).toBe(true);\n      });\n    });\n\n    it('should handle month with different starting days', () => {\n      // January 2024 starts on a Monday\n      const januaryWeeks = generateWeekNumbers(2024, 0);\n      expect(januaryWeeks[0]).toBe(1);\n\n      // February 2024 starts on a Thursday\n      const februaryWeeks = generateWeekNumbers(2024, 1);\n      expect(februaryWeeks[0]).toBe(5);\n\n      // March 2024 starts on a Friday\n      const marchWeeks = generateWeekNumbers(2024, 2);\n      expect(marchWeeks[0]).toBe(9);\n    });\n\n    it('should handle year boundaries in week generation', () => {\n      // December 2024\n      const decemberWeeks = generateWeekNumbers(2024, 11);\n      expect(decemberWeeks.length).toBe(6);\n\n      // January 2025\n      const januaryWeeks = generateWeekNumbers(2025, 0);\n      expect(januaryWeeks.length).toBe(6);\n    });\n\n    it('should generate consecutive week numbers within month', () => {\n      const weekNumbers = generateWeekNumbers(2024, 5); // June 2024\n\n      for (let i = 1; i < weekNumbers.length; i++) {\n        const currentWeek = weekNumbers[i];\n        const previousWeek = weekNumbers[i - 1];\n\n        // Week numbers must be consecutive or handle year transition\n        const isConsecutive = currentWeek === previousWeek + 1;\n        const isYearTransition = previousWeek >= 52 && currentWeek === 1; // Transition to new year\n\n        expect(isConsecutive || isYearTransition).toBe(true);\n      }\n    });\n  });\n\n  describe('Week Number Validation', () => {\n    it('should validate correct week number range', () => {\n      expect(isValidWeekNumber(1)).toBe(true);\n      expect(isValidWeekNumber(26)).toBe(true);\n      expect(isValidWeekNumber(52)).toBe(true);\n      expect(isValidWeekNumber(53)).toBe(true);\n    });\n\n    it('should reject invalid week numbers', () => {\n      expect(isValidWeekNumber(0)).toBe(false);\n      expect(isValidWeekNumber(-1)).toBe(false);\n      expect(isValidWeekNumber(54)).toBe(false);\n      expect(isValidWeekNumber(100)).toBe(false);\n    });\n  });\n\n  describe('Visibility Logic', () => {\n    it('should show week numbers when enabled', () => {\n      expect(shouldShowWeekNumbers(true)).toBe(true);\n    });\n\n    it('should hide week numbers when disabled', () => {\n      expect(shouldShowWeekNumbers(false)).toBe(false);\n    });\n  });\n\n  describe('Edge Cases and Special Scenarios', () => {\n    it('should handle week 53 years correctly', () => {\n      // 2020 had 53 weeks\n      const week53Date = new Date(2020, 11, 28); // December 28, 2020\n      expect(getWeekNumber(week53Date)).toBe(53);\n\n      // 2021 started with week 53 of 2020\n      const jan1_2021 = new Date(2021, 0, 1); // January 1, 2021\n      expect(getWeekNumber(jan1_2021)).toBe(53);\n      expect(getWeekYear(jan1_2021)).toBe(2020);\n    });\n\n    it('should handle February in leap and non-leap years', () => {\n      // February 2024 (leap year)\n      const leapFebWeeks = generateWeekNumbers(2024, 1);\n      expect(leapFebWeeks.length).toBe(6);\n\n      // February 2023 (normal year)\n      const normalFebWeeks = generateWeekNumbers(2023, 1);\n      expect(normalFebWeeks.length).toBe(6);\n    });\n\n    it('should handle different calendar systems edge cases', () => {\n      // Test with dates near week boundaries\n      const sundayDate = new Date(2024, 5, 16); // Sunday\n      const mondayDate = new Date(2024, 5, 17); // Monday\n\n      const sundayWeek = getWeekNumber(sundayDate);\n      const mondayWeek = getWeekNumber(mondayDate);\n\n      expect(mondayWeek).toBe(sundayWeek + 1);\n    });\n\n    it('should maintain consistency across month boundaries', () => {\n      // End of May / beginning of June 2024\n      const endMayWeeks = generateWeekNumbers(2024, 4); // May\n      const startJuneWeeks = generateWeekNumbers(2024, 5); // June\n\n      // Last week of May should be consistent with June\n      const lastMayWeek = endMayWeeks[endMayWeeks.length - 1];\n      const firstJuneWeek = startJuneWeeks[0];\n\n      // Not necessarily equal, but within logical range\n      expect(Math.abs(lastMayWeek - firstJuneWeek)).toBeLessThanOrEqual(6);\n    });\n  });\n\n  describe('Integration with Calendar Grid', () => {\n    it('should generate week numbers that align with 6-week calendar grid', () => {\n      const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];\n\n      months.forEach(month => {\n        const weekNumbers = generateWeekNumbers(2024, month);\n        expect(weekNumbers.length).toBe(6);\n\n        weekNumbers.forEach(weekNum => {\n          expect(isValidWeekNumber(weekNum)).toBe(true);\n        });\n      });\n    });\n\n    it('should handle special calendar scenarios', () => {\n      // Months where the first week is incomplete\n      const specialMonths = [\n        { year: 2024, month: 0 }, // January 2024\n        { year: 2024, month: 8 }, // September 2024\n        { year: 2023, month: 0 }, // January 2023\n      ];\n\n      specialMonths.forEach(({ year, month }) => {\n        const weekNumbers = generateWeekNumbers(year, month);\n        expect(weekNumbers.length).toBe(6);\n\n        // All numbers must be valid\n        weekNumbers.forEach(weekNum => {\n          expect(isValidWeekNumber(weekNum)).toBe(true);\n        });\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/nv-datagrid/nv-datagrid.docs.js

@@ -22,18 +22,9 @@ const NvDatagridDocs = {
             args: {
                 noDataMessage: 'No element available to display.',
                 columns: [
-                    {
-                        header: 'Name',
-                        accessor: 'name',
-                    },
-                    {
-                        header: 'Age',
-                        accessor: 'age',
-                    },
-                    {
-                        header: 'Email',
-                        accessor: 'email',
-                    },
+                    { header: 'Name', accessor: 'name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
                 ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
@@ -50,13 +41,18 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: nameof(x => x.columnsJson),
+            name: 'ColumnGroup',
             args: {
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
-        ]`,
+                columns: [
+                    { header: 'FirstName', accessor: 'firstName', group: 'Name' },
+                    { header: 'LastName', accessor: 'lastName', group: 'Name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
+                    { header: 'Street', accessor: 'street', group: 'Address' },
+                    { header: 'StreetNr', accessor: 'streetNr', group: 'Address' },
+                    { header: 'ZipCode', accessor: 'zipCode', group: 'Address' },
+                    { header: 'City', accessor: 'city', group: 'Address' },
+                ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
@@ -70,16 +66,6 @@ const NvDatagridDocs = {
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
-        {
-            name: nameof(x => x.dataJson),
-            args: {
-                dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
-        ]`,
-            },
-            template: h("nv-datagrid", { "data-storybook-args": true }),
-        },
         {
             name: nameof(x => x.autoGenerateColumns),
             args: {
@@ -100,7 +86,7 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'ColumnsArrayAndDataArray',
+            name: 'ColumnsAndData',
             args: {
                 columns: [
                     { header: 'Name', accessor: 'name' },
@@ -115,17 +101,40 @@ const NvDatagridDocs = {
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
         {
-            name: 'ColumnsJSONAndDataJSON',
+            name: 'ColumnGroupAndData',
             args: {
-                columnsJson: `[
-          {"header":"Name","accessor":"name"},
-          {"header":"Age","accessor":"age"},
-          {"header":"Email","accessor":"email"}
-        ]`,
-                dataJson: `[
-          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
-          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
-        ]`,
+                columns: [
+                    { header: 'FirstName', accessor: 'firstName', group: 'Name' },
+                    { header: 'LastName', accessor: 'lastName', group: 'Name' },
+                    { header: 'Age', accessor: 'age' },
+                    { header: 'Email', accessor: 'email' },
+                    { header: 'Street', accessor: 'street', group: 'Address' },
+                    { header: 'StreetNr', accessor: 'streetNr', group: 'Address' },
+                    { header: 'ZipCode', accessor: 'zipCode', group: 'Address' },
+                    { header: 'City', accessor: 'city', group: 'Address' },
+                ],
+                data: [
+                    {
+                        firstName: 'Alice',
+                        lastName: 'Dupont',
+                        age: '25',
+                        email: 'alice@mail.com',
+                        street: 'SomeStreet',
+                        streetNr: '1',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                    {
+                        firstName: 'Bob',
+                        lastName: 'Debouwer',
+                        age: '30',
+                        email: 'bob@mail.com',
+                        street: 'AnyStreet',
+                        streetNr: '203',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                ],
             },
             template: h("nv-datagrid", { "data-storybook-args": true }),
         },
@@ -139,6 +148,36 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
+        {
+            name: 'WithDataAndTemplateAndColumnGroup',
+            args: {
+                data: [
+                    {
+                        id: 1,
+                        firstName: 'Alice',
+                        lastName: 'Dupont',
+                        age: '25',
+                        email: 'alice@mail.com',
+                        street: 'SomeStreet',
+                        streetNr: '1',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                    {
+                        id: 2,
+                        firstName: 'Bob',
+                        lastName: 'Debouwer',
+                        age: '30',
+                        email: 'bob@mail.com',
+                        street: 'AnyStreet',
+                        streetNr: '203',
+                        zipCode: '1000',
+                        city: 'Bruxelles',
+                    },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "street", header: "Street", group: "Address" }), h("nv-datagridcolumn", { accessor: "streetNr", header: "Street Number", group: "Address" }), h("nv-datagridcolumn", { accessor: "zipCode", header: "Zip Code", group: "Address" }), h("nv-datagridcolumn", { accessor: "city", header: "City", group: "Address" }), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
         {
             name: 'WithDataAndTemplateComplexData',
             args: {
@@ -179,6 +218,50 @@ const NvDatagridDocs = {
             },
             template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { class: "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
         },
+        {
+            name: 'WithDataAndTemplateComplexDataAndColumnGroup',
+            args: {
+                data: [
+                    {
+                        id: 1,
+                        firstName: 'John',
+                        lastName: 'Doe',
+                        age: 25,
+                        email: 'john.doe@mail.com',
+                        address: { city: 'New York', country: 'USA' },
+                        status: { label: 'success', color: '1', icon: 'check' },
+                    },
+                    {
+                        id: 2,
+                        firstName: 'Jane',
+                        lastName: 'Doe',
+                        age: 30,
+                        email: 'jane.doe@mail.com',
+                        address: { city: 'Los Angeles', country: 'USA' },
+                        status: { label: 'warning', color: '2', icon: 'alert-circle' },
+                    },
+                    {
+                        id: 3,
+                        firstName: 'John',
+                        lastName: 'Smith',
+                        age: 35,
+                        email: 'john.smith@mail.com',
+                        address: { city: 'London', country: 'UK' },
+                        status: { label: 'error', color: '3', icon: 'loader' },
+                    },
+                    {
+                        id: 4,
+                        firstName: 'Jane',
+                        lastName: 'Smith',
+                        age: 40,
+                        email: 'jane.smith@mail.com',
+                        address: { city: 'Paris', country: 'France' },
+                        status: { label: 'info', color: '5', icon: 'info-circle' },
+                    },
+                ],
+            },
+            template: (h("nv-datagrid", { "data-storybook-args": true }, h("nv-datagridcolumn", { accessor: "firstName", header: "FirstName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "FirstName")), h("div", { slot: "cell" }, h("strong", null, "__firstName__"))), h("nv-datagridcolumn", { accessor: "lastName", header: "LastName", group: "Name" }, h("div", { slot: "header" }, h("strong", null, "LastName")), h("div", { slot: "cell" }, h("strong", null, "__lastName__"))), h("nv-datagridcolumn", { accessor: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-datagridcolumn", { accessor: "email", header: "Mail Address", group: "Contact" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-datagridcolumn", { accessor: "address", header: "Address", group: "Contact" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-datagridcolumn", { accessor: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { class: "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-datagridcolumn", { accessor: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
+        },
         {
             name: nameof(x => x.enableGlobalFilter),
             args: {
@@ -685,9 +768,9 @@ const NvDatagridDocs = {
             name: 'SlotBefore',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
@@ -700,9 +783,9 @@ const NvDatagridDocs = {
             name: 'SlotAfter',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },
@@ -715,9 +798,9 @@ const NvDatagridDocs = {
             name: 'SlotBeforeAndAfter',
             args: {
                 columns: [
-                    { header: 'Name', accessor: 'name' },
-                    { header: 'Age', accessor: 'age' },
-                    { header: 'Email', accessor: 'email' },
+                    { header: 'Name', accessor: 'name', group: '' },
+                    { header: 'Age', accessor: 'age', group: '' },
+                    { header: 'Email', accessor: 'email', group: '' },
                 ],
                 data: [
                     { name: 'Alice', age: '25', email: 'alice@mail.com' },