Merge branch '18.2.x' into ganastasov/fix-15019-18.2.x

Author: hanastasov

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/combo/combo.component.spec.ts

@@ -1745,71 +1745,60 @@ describe('igxCombo', () => {
                     expect(dropdown).toBeDefined();
                     expect(dropdown.focusedItem).toBeFalsy();
                     expect(combo.virtualScrollContainer).toBeDefined();
+                    combo.allowCustomValues = true;
                     const mockClick = jasmine.createSpyObj('event', ['preventDefault', 'stopPropagation']);
                     const virtualMockUP = spyOn<any>(dropdown, 'navigatePrev').and.callThrough();
                     const virtualMockDOWN = spyOn<any>(dropdown, 'navigateNext').and.callThrough();
                     expect(dropdown.focusedItem).toEqual(null);
                     expect(combo.collapsed).toBeTruthy();
                     combo.toggle();
-                    await wait(30);
+                    await wait();
                     fixture.detectChanges();
                     expect(combo.collapsed).toBeFalsy();
                     combo.virtualScrollContainer.scrollTo(51);
-                    await wait(30);
+                    await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
                     fixture.detectChanges();
                     let items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
                     let lastItem = items[items.length - 1].componentInstance;
                     expect(lastItem).toBeDefined();
                     lastItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(lastItem);
                     dropdown.navigateItem(-1);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(virtualMockDOWN).toHaveBeenCalledTimes(0);
                     lastItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(lastItem);
                     dropdown.navigateNext();
-                    await wait(30);
                     fixture.detectChanges();
                     expect(virtualMockDOWN).toHaveBeenCalledTimes(1);
                     combo.searchValue = 'New';
                     combo.handleInputChange();
                     fixture.detectChanges();
-                    await wait(30);
-                    items = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`));
-                    lastItem = items[items.length - 1].componentInstance;
-                    (lastItem as IgxComboAddItemComponent).clicked(mockClick);
-                    await wait(30);
+                    await firstValueFrom(combo.virtualScrollContainer.chunkLoad);
+                    const addItemButton = fixture.debugElement.query(By.directive(IgxComboAddItemComponent));
+                    addItemButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
                     fixture.detectChanges();
                     // After `Add Item` is clicked, the input is focused and the item is added to the list
-                    // expect(dropdown.focusedItem).toEqual(null);
+                    expect(dropdown.focusedItem).toEqual(null);
                     expect(document.activeElement).toEqual(combo.searchInput.nativeElement);
                     expect(combo.customValueFlag).toBeFalsy();
                     expect(combo.searchInput.nativeElement.value).toBeTruthy();
 
                     // TEST move from first item
-                    combo.virtualScrollContainer.scrollTo(0);
-                    await wait();
-                    fixture.detectChanges();
                     const firstItem = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[0].componentInstance;
                     firstItem.clicked(mockClick);
-                    await wait(30);
                     fixture.detectChanges();
                     expect(dropdown.focusedItem).toEqual(firstItem);
                     expect(dropdown.focusedItem.itemIndex).toEqual(0);
-                    // spyOnProperty(dropdown, 'focusedItem', 'get').and.returnValue(firstItem);
                     dropdown.navigateFirst();
-                    await wait(30);
                     fixture.detectChanges();
                     dropdown.navigatePrev();
-                    await wait(30);
                     fixture.detectChanges();
-                    // Called once before the `await` and called once more, because item @ index 0 is a header
+                    // Called once manually and called once more, because item @ index 0 is a header
                     expect(virtualMockUP).toHaveBeenCalledTimes(2);
+                    expect(dropdown.focusedItem).toBeNull();
                 }));
                 it('should properly get the first focusable item when focusing the component list', () => {
                     const expectedItemText = 'State: MichiganRegion: East North Central';

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/filtering/excel-style/excel-style-filtering.component.ts

@@ -221,13 +221,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the minimum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [minHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [minHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [minHeight]="'700px'"
      * ```
@@ -258,13 +258,13 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the maximum height.
-     * 
-     * Setting value in template: 
+     *
+     * Setting value in template:
      * ```ts
-     * [maxHeight]="'<number><unit (px|rem|etc..)>'" 
+     * [maxHeight]="'<number><unit (px|rem|etc..)>'"
      * ```
-     * 
-     * Example for setting a value: 
+     *
+     * Example for setting a value:
      * ```ts
      * [maxHeight]="'700px'"
      * ```
@@ -509,6 +509,11 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
     private renderValues() {
         this.filterValues = this.generateFilterValues();
         this.generateListData();
+        this.expressionsList.forEach(expr => {
+            if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
+                this.modifyExpression(expr);
+            }
+        });
     }
 
     private generateFilterValues() {
@@ -539,6 +544,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
         return filterValues;
     }
 
+    private modifyExpression(expr: ExpressionUI) {
+        const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value: string) => value.toLowerCase()));
+
+        this.grid.data.forEach(item => {
+            if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
+                expr.expression.searchVal.add(item[this.column.field]);
+            }
+        });
+    }
+
     private generateListData() {
         this.listData = new Array<FilterListItem>();
         const shouldUpdateSelection = this.areExpressionsSelectable();