Merge pull request #15925 from IgniteUI/20.0.x

Mass Merge 20.0.x to master

Author: ChronosSF

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+    $custom-contained-button: contained-button-theme(
+        $background: #09f;
+    );
+```
+
 ## 20.0.0
 
 ### General

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -14,16 +14,16 @@ import { IgxGridToolbarComponent } from "../../../igniteui-angular/src/lib/grids
 import { IgxToolbarToken } from "../../../igniteui-angular/src/lib/grids/toolbar/token";
 import { IgxColumnComponent } from "../../../igniteui-angular/src/lib/grids/columns/column.component";
 import { IgxColumnGroupComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-group.component";
+import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
+import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
+import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
+import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";
 import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component";
 import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component";
 import { IgxActionStripToken } from "../../../igniteui-angular/src/lib/action-strip/token";
 import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component";
 import { IgxGridActionsBaseDirective } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive";
 import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component";
-import { IgxColumnLayoutComponent } from "../../../igniteui-angular/src/lib/grids/columns/column-layout.component";
-import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component";
-import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component";
-import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component";
 import { IgxGridStateComponent } from "../lib/state.component";
 
 export const registerComponents = [

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -16,7 +16,6 @@ export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
-
     private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
 
     /**
@@ -28,7 +27,7 @@ export class TemplateWrapperComponent {
     public templateRefs: QueryList<TemplateRef<any>>;
 
     constructor(private cdr: ChangeDetectorRef) { }
-
+  
     protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         const part = render(templateFunc(arg), container);
 

projects/igniteui-angular/migrations/migration-collection.json

@@ -231,6 +231,11 @@
             "version": "20.0.0",
             "description": "Updates Ignite UI for Angular from v19.2.0 to v20.0.0",
             "factory": "./update-20_0_0"
+        },
+        "migration-47": {
+            "version": "20.0.2",
+            "description": "Updates Ignite UI for Angular from v20.0.0 to v20.0.2",
+            "factory": "./update-20_0_2"
         }
     }
 }

projects/igniteui-angular/migrations/update-20_0_2/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$interim-bottom-line-color",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type": "property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-20_0_2/index.spec.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '20.0.2';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-47';
+
+    it('should remove the $interim-bottom-line-color property from the input-group theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-input-group-theme: input-group-theme(
+                $box-background: #ccc,
+                $interim-bottom-line-color: orange,
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-input-group-theme: input-group-theme(
+                $box-background: #ccc,
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-20_0_2/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '20.0.2';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -596,18 +596,13 @@ describe("IgxCalendar - ", () => {
                         By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS}`),
                     );
 
+                    const expectedWeeks = ["W", "1", "2", "3", "4", "5", "6"];
+
                     calendarRows.forEach((row, idx) => {
                         const firstRowItem = row.nativeElement.children[0];
-
-                        if (idx === 0) {
-                            expect(firstRowItem.firstChild.innerText).toEqual(
-                                "W",
-                            );
-                        } else {
-                            expect(firstRowItem.firstChild.innerText).toEqual(
-                                idx.toString(),
-                            );
-                        }
+                        expect(firstRowItem.firstChild.innerText).toEqual(
+                            expectedWeeks[idx],
+                        );
                     });
                 });
 
@@ -626,12 +621,7 @@ describe("IgxCalendar - ", () => {
                         const firstRowItem = row.nativeElement.children[0];
                         if (idx === 5) {
                             expect(firstRowItem.firstChild.innerText).toEqual(
-                                "13",
-                            );
-                        }
-                        if (idx === 6) {
-                            expect(firstRowItem.firstChild.innerText).toEqual(
-                                "14",
+                                "12",
                             );
                         }
                     });
@@ -648,7 +638,7 @@ describe("IgxCalendar - ", () => {
                         const firstRowItem = row.nativeElement.children[0];
                         if (idx === 5) {
                             expect(firstRowItem.firstChild.innerText).toEqual(
-                                "44",
+                                "43",
                             );
                         }
                     });
@@ -664,6 +654,7 @@ describe("IgxCalendar - ", () => {
                     calendarRowsDec.forEach((row, idx) => {
                         const firstRowItem = row.nativeElement.children[0];
                         if (idx === 6) {
+                            // With simple counting for Sunday start, expect 53
                             expect(firstRowItem.firstChild.innerText).toEqual(
                                 "53",
                             );

projects/igniteui-angular/src/lib/calendar/common/model.spec.ts

@@ -20,9 +20,13 @@ describe("Calendar Day Model", () => {
             const { year, month, date } = firstOfJan;
             expect([year, month, date]).toEqual([2024, 0, 1]);
 
-            // First week of 2024
+            // First week of 2024 (ISO 8601 - January 1, 2024 is Monday, so Week 1)
             expect(firstOfJan.week).toEqual(1);
 
+            // Test week numbering with different week starts
+            expect(firstOfJan.getWeekNumber(1)).toEqual(1); // Monday start (ISO 8601)
+            expect(firstOfJan.getWeekNumber(0)).toBeGreaterThan(50); // Sunday start (belongs to prev year)
+
             // 2024/01/01 is a Monday
             expect(firstOfJan.day).toEqual(1);
             expect(firstOfJan.weekend).toBeFalse();
@@ -79,6 +83,124 @@ describe("Calendar Day Model", () => {
         });
     });
 
+    describe("Week numbering", () => {
+        it("should use ISO 8601 for Monday start and simple counting for others", () => {
+            // January 1, 2025 is a Wednesday
+            const jan1_2025 = new CalendarDay({ year: 2025, month: 0, date: 1 });
+            expect(jan1_2025.day).toEqual(3); // Wednesday
+
+            // Monday start: Uses ISO 8601 standard
+            expect(jan1_2025.getWeekNumber(1)).toEqual(1); // Week 1 contains Jan 1
+
+            // Sunday start: Uses simple counting - Jan 1 (Wed) belongs to prev year
+            expect(jan1_2025.getWeekNumber(0)).toBeGreaterThan(50); // Week 52 of 2024
+        });
+
+        it("should handle ISO 8601 year boundaries for Monday start", () => {
+            // January 1, 2026 is a Thursday
+            const jan1_2026 = new CalendarDay({ year: 2026, month: 0, date: 1 });
+            expect(jan1_2026.day).toEqual(4); // Thursday
+
+            // Monday start: ISO 8601 logic applies
+            expect(jan1_2026.getWeekNumber(1)).toEqual(1); // Week 1 of 2026
+        });
+
+        it("should handle previous year's last week for Monday start", () => {
+            // January 1, 2027 is a Friday
+            const jan1_2027 = new CalendarDay({ year: 2027, month: 0, date: 1 });
+            expect(jan1_2027.day).toEqual(5); // Friday
+
+            // Monday start: ISO 8601 logic - belongs to previous year
+            const actualWeek = jan1_2027.getWeekNumber(1);
+            expect(actualWeek).toBeGreaterThan(50); // Should be Week 52 or 53 of 2026
+        });
+
+        it("should work correctly with custom week starts using appropriate logic", () => {
+            const testDate = new CalendarDay({ year: 2024, month: 2, date: 15 }); // March 15, 2024 (Friday)
+
+            // Test different week start days
+            const mondayStart = testDate.getWeekNumber(1);     // ISO 8601
+            const tuesdayStart = testDate.getWeekNumber(2);    // Simple counting
+            const wednesdayStart = testDate.getWeekNumber(3);  // Simple counting
+            const thursdayStart = testDate.getWeekNumber(4);   // Simple counting
+            const fridayStart = testDate.getWeekNumber(5);     // Simple counting
+            const saturdayStart = testDate.getWeekNumber(6);   // Simple counting
+            const sundayStart = testDate.getWeekNumber(0);     // Simple counting
+
+            // All should be valid week numbers (positive integers)
+            expect(mondayStart).toBeGreaterThan(0);
+            expect(tuesdayStart).toBeGreaterThan(0);
+            expect(wednesdayStart).toBeGreaterThan(0);
+            expect(thursdayStart).toBeGreaterThan(0);
+            expect(fridayStart).toBeGreaterThan(0);
+            expect(saturdayStart).toBeGreaterThan(0);
+            expect(sundayStart).toBeGreaterThan(0);
+        });
+
+        it("should apply ISO 8601 logic only for Monday start", () => {
+            // January 4, 2024 is a Thursday - always Week 1 in ISO 8601
+            const jan4_2024 = new CalendarDay({ year: 2024, month: 0, date: 4 });
+            expect(jan4_2024.day).toEqual(4); // Thursday
+
+            // Only Monday start uses ISO 8601
+            expect(jan4_2024.getWeekNumber(1)).toEqual(1); // Monday start: ISO 8601
+
+            // Other starts use simple counting, so results may vary
+            const sundayWeek = jan4_2024.getWeekNumber(0);
+            const tuesdayWeek = jan4_2024.getWeekNumber(2);
+            expect(sundayWeek).toBeGreaterThan(0);
+            expect(tuesdayWeek).toBeGreaterThan(0);
+        });
+
+        it("should handle December dates that belong to next year's Week 1 for Monday start", () => {
+            // December 30, 2024 is a Monday
+            const dec30_2024 = new CalendarDay({ year: 2024, month: 11, date: 30 });
+            expect(dec30_2024.day).toEqual(1); // Monday
+
+            // Monday start: This should be Week 1 of 2025 in ISO 8601
+            expect(dec30_2024.getWeekNumber(1)).toEqual(1); // Week 1 of 2025
+        });
+
+        it("should default to Monday start when no parameter provided", () => {
+            const testDate = new CalendarDay({ year: 2024, month: 0, date: 1 });
+
+            // Should default to Monday start (ISO 8601 standard)
+            expect(testDate.getWeekNumber()).toEqual(testDate.getWeekNumber(1));
+            expect(testDate.week).toEqual(testDate.getWeekNumber(1));
+        });
+
+        it("should handle leap years correctly", () => {
+            // Test February 29, 2024 (leap year)
+            const feb29_2024 = new CalendarDay({ year: 2024, month: 1, date: 29 });
+            expect(feb29_2024.day).toEqual(4); // Thursday
+
+            // Should calculate week number correctly for leap year date
+            const weekNumber = feb29_2024.getWeekNumber(1);
+            expect(weekNumber).toBeGreaterThan(0);
+            expect(weekNumber).toBeLessThan(54); // Valid week range
+        });
+
+        it("should correctly handle the January 2024 Sunday start case", () => {
+            // January 1, 2024 is a Monday, with Sunday start (0)
+            const jan1_2024 = new CalendarDay({ year: 2024, month: 0, date: 1 });
+            const jan7_2024 = new CalendarDay({ year: 2024, month: 0, date: 7 }); // Sunday
+            const jan8_2024 = new CalendarDay({ year: 2024, month: 0, date: 8 }); // Monday
+
+            expect(jan1_2024.day).toEqual(1); // Monday
+            expect(jan7_2024.day).toEqual(0); // Sunday
+            expect(jan8_2024.day).toEqual(1); // Monday
+
+            // With Sunday start, Jan 1 should be in previous year's last week
+            expect(jan1_2024.getWeekNumber(0)).toBeGreaterThan(50); // Week 53 of 2023
+
+            // Jan 7 (first Sunday) should be Week 1
+            expect(jan7_2024.getWeekNumber(0)).toEqual(1);
+
+            // Jan 8 should also be Week 1 (same week as Jan 7)
+            expect(jan8_2024.getWeekNumber(0)).toEqual(1);
+        });
+    });
+
     describe("Date ranges", () => {
         start = new CalendarDay({ year: 2024, month: 0, date: 11 });
         const endFuture = start.add("day", 7);