Merge branch '18.2.x' into igniteui-angular-15002-18-2-x

Author: desig9stein

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

@@ -201,6 +201,11 @@
             "version": "18.2.0",
             "description": "Updates Ignite UI for Angular from v18.1.x to v18.2.0",
             "factory": "./update-18_2_0"
+        },
+        "migration-41": {
+            "version": "18.2.3",
+            "description": "Updates Ignite UI for Angular from v18.2.0 to v18.2.3",
+            "factory": "./update-18_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/update-18_2_3/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$header-time-period-color",
+      "remove": true,
+      "owner": "time-picker-theme",
+      "type":"property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-18_2_3/index.spec.ts

@@ -0,0 +1,36 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '18.2.3';
+
+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-41';
+
+    it('should remove the $header-time-period-color property from the time-picker-theme', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red,
+                $header-time-period-color: pink
+            );`
+        );
+
+        const tree = await schematicRunner
+            .runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-time-picker: time-picker-theme(
+                $text-color: red
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-18_2_3/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '18.2.3';
+
+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/core/styles/components/time-picker/_time-picker-component.scss

@@ -24,10 +24,6 @@
             @extend %time-picker__wrapper !optional;
         }
 
-        @include e(header-ampm) {
-            @extend %time-picker__header-ampm !optional;
-        }
-
         @include e(header-hour){
             @extend %time-picker__header-hour !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -23,7 +23,6 @@
 /// @param {Color} $disabled-item-background [null] - The background color for disabled values .
 /// @param {Color} $header-background [null] - The header background color of a time picker.
 /// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.
-/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.
 /// @param {Color} $background-color [null] - The time-picker panel background color.
 /// @param {Number} $time-item-size [null] - The height of the time item.
 /// @param {Color} $divider-color [null] - The color for the actions area divider.
@@ -56,7 +55,6 @@
     $disabled-item-background: null,
     $header-background: null,
     $header-hour-text-color: null,
-    $header-time-period-color: null,
     $background-color: null,
     $modal-shadow: null,
     $dropdown-shadow: null,
@@ -85,12 +83,6 @@
         $header-hour-text-color: text-contrast($header-background);
     }
 
-    @if not($header-time-period-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-time-period-color: rgba(text-contrast($header-background), .8);
-        }
-    }
-
     @if not($selected-text-color) and $active-item-background {
         $selected-text-color: text-contrast($active-item-background);
     }
@@ -135,7 +127,6 @@
         disabled-item-background: $disabled-item-background,
         header-background: $header-background,
         header-hour-text-color: $header-hour-text-color,
-        header-time-period-color: $header-time-period-color,
         background-color: $background-color,
         modal-shadow: $modal-shadow,
         dropdown-shadow: $dropdown-shadow,
@@ -162,15 +153,15 @@
     $picker-buttons-padding: map.get((
         'material': rem(8px),
         'fluent': rem(8px),
-        'bootstrap': rem(16px),
+        'bootstrap': rem(8px),
         'indigo': rem(8px) rem(16px),
     ), $variant);
 
     $picker-header-padding: map.get((
-        'material': rem(24px) rem(16px),
+        'material': rem(16px) rem(24px),
         'fluent': rem(16px),
         'bootstrap': rem(16px),
-        'indigo': rem(16px) rem(24px) ,
+        'indigo': rem(16px),
     ), $variant);
 
     %time-picker-display {
@@ -287,7 +278,7 @@
     }
 
     %time-picker__item {
-        width: if($variant == 'indigo', rem(46px), rem(54px));
+        width: rem(46px);
         padding: rem(5px) rem(10px);
         border-radius: var-get($theme, 'active-item-border-radius');
         height: var-get($theme, 'time-item-size');
@@ -355,10 +346,6 @@
         }
     }
 
-    %time-picker__header-ampm {
-        color: var-get($theme, 'header-time-period-color');
-    }
-
     %time-picker__header--vertical {
         @if $variant == 'indigo' {
             min-width: rem(136px);
@@ -371,18 +358,14 @@
     %time-picker__header-hour {
         display: flex;
         color: var-get($theme, 'header-hour-text-color');
+        margin: 0;
 
         [dir='rtl'] & {
             flex-direction: row-reverse;
             justify-content: flex-end;
         }
     }
 
-    %time-picker__header-ampm,
-    %time-picker__header-hour {
-        margin: 0;
-    }
-
     %time-picker__buttons {
         display: flex;
         min-height: sizable(rem(40px), rem(44px), rem(48px));
@@ -413,24 +396,20 @@
     header-hour: 'h4',
     selected-time: 'h5'
 )) {
-    $time-period: map.get($categories, 'header-time-period');
     $header-hour: map.get($categories, 'header-hour');
     $selected-time: map.get($categories, 'selected-time');
 
-
-    %time-picker__header-ampm {
-        @include type-style($time-period, false);
-    }
-
     %time-picker__header-hour {
         @include type-style($header-hour, false) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 
     %time-picker__item--selected {
         @include type-style($selected-time) {
             margin-top: 0;
+            margin-bottom: 0;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

@@ -103,7 +103,6 @@
     ));
     @include tabs-typography();
     @include time-picker-typography($categories: (
-        header-time-period: 'subtitle-1',
         header-hour: 'h4',
         selected-time: 'h4'
     ));

projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

@@ -106,7 +106,6 @@
         label: 'subtitle-2',
     ));
     @include time-picker-typography($categories: (
-        header-time-period: 'subtitle-1',
         header-hour: 'h5',
         selected-time: 'h6'
     ));

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts

@@ -15,6 +15,7 @@ import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { HierarchicalGridFunctions } from '../../test-utils/hierarchical-grid-functions.spec';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
 import { IgxHierarchicalGridDefaultComponent } from '../../test-utils/hierarchical-grid-components.spec';
+import { firstValueFrom } from 'rxjs';
 
 describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
     let fixture;
@@ -101,7 +102,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         fixture.detectChanges();
 
         const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
-        const childCell =  childGrid.gridAPI.get_cell_by_index(0, 'ID');
+        const childCell = childGrid.gridAPI.get_cell_by_index(0, 'ID');
         GridFunctions.focusCell(fixture, childCell);
         fixture.detectChanges();
 
@@ -169,7 +170,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         await wait(100);
         fixture.detectChanges();
         const startIndex = hierarchicalGrid.verticalScrollContainer.state.startIndex;
-        const topOffset =  GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top;
+        const topOffset = GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top;
         const secondRow = hierarchicalGrid.dataRowList.toArray()[1];
         // expand second row
         (secondRow.nativeElement.children[0] as HTMLElement).click();
@@ -194,6 +195,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
     });
 
     it('should not lose scroll position after expanding a row when there are already expanded rows above.', async () => {
+
         // Expand two rows at the top
         (hierarchicalGrid.dataRowList.toArray()[2].nativeElement.children[0] as HTMLElement).click();
         await wait();
@@ -205,7 +207,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
 
         // Scroll to bottom
         hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 5000;
-        await wait(50);
+        await firstValueFrom(hierarchicalGrid.verticalScrollContainer.chunkLoad);
         fixture.detectChanges();
         // Expand two rows at the bottom
         (hierarchicalGrid.dataRowList.toArray()[6].nativeElement.children[0] as HTMLElement).click();
@@ -218,12 +220,12 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
 
         // Scroll to top to make sure top.
         hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 0;
-        await wait();
+        await firstValueFrom(hierarchicalGrid.verticalScrollContainer.chunkLoad);
         fixture.detectChanges();
 
         // Scroll to somewhere in the middle and make sure scroll position stays when expanding/collapsing.
         hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 1250;
-        await wait();
+        await firstValueFrom(hierarchicalGrid.verticalScrollContainer.chunkLoad);
         fixture.detectChanges();
         const startIndex = hierarchicalGrid.verticalScrollContainer.state.startIndex;
         const topOffset = GridFunctions.getGridDisplayContainer(fixture).nativeElement.style.top;
@@ -266,7 +268,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
             hierarchicalGrid.verticalScrollContainer.state.chunkSize).toBe(80);
         expect(hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop)
             .toEqual(hierarchicalGrid.verticalScrollContainer.getScroll().scrollHeight -
-                    parseInt(hierarchicalGrid.verticalScrollContainer.igxForContainerSize, 10));
+                parseInt(hierarchicalGrid.verticalScrollContainer.igxForContainerSize, 10));
     });
 
     it('should update scroll height after expanding/collapsing rows.', async () => {
@@ -326,7 +328,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         expect(scrHeight).toBe(3 * 51 + (childGrid1.nativeElement.closest('.igx-grid__tr-container') as HTMLElement).offsetHeight - 1);
     });
 
-    it('should update context information correctly for child grid container after scrolling',  async () => {
+    it('should update context information correctly for child grid container after scrolling', async () => {
         // expand 3rd row
         const row = hierarchicalGrid.dataRowList.toArray()[3];
         (row.nativeElement.children[0] as HTMLElement).click();
@@ -345,7 +347,7 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         expect(childRowComponent.index).toBe(4);
     });
 
-    it('should update scrollbar when expanding a row with data loaded after initial view initialization',  (done) => {
+    it('should update scrollbar when expanding a row with data loaded after initial view initialization', (done) => {
         fixture.componentInstance.data = fixture.componentInstance.generateData(10, 0);
         fixture.detectChanges();
 
@@ -446,7 +448,7 @@ describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => {
         });
     }));
 
-    it('should show scrollbar after expanding a row with data loaded after initial view initialization',  async () => {
+    it('should show scrollbar after expanding a row with data loaded after initial view initialization', async () => {
         const fixture = TestBed.createComponent(IgxHierarchicalGridNoScrollTestComponent);
         fixture.detectChanges();
         await wait();
@@ -505,12 +507,13 @@ export class IgxHierarchicalGridTestBaseComponent {
         let children;
         for (let i = 0; i < count; i++) {
             const rowID = parendID ? parendID + i : i.toString();
-           if (level > 0 ) {
-                children = this.generateData(count / 2 , currLevel - 1, rowID);
-           }
-           prods.push({
-            ID: rowID, ChildLevels: currLevel,  ProductName: 'Product: A' + i, Col1: i,
-            Col2: i, Col3: i, childData: children, childData2: children });
+            if (level > 0) {
+                children = this.generateData(count / 2, currLevel - 1, rowID);
+            }
+            prods.push({
+                ID: rowID, ChildLevels: currLevel, ProductName: 'Product: A' + i, Col1: i,
+                Col2: i, Col3: i, childData: children, childData2: children
+            });
         }
         return prods;
     }