Merge branch 'master' into mtihova/fix-15136-master

MarielaTihova · web-flow · commit 5b2d032c266d · 2025-02-21T16:33:55.000+02:00
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -2,18 +2,18 @@
 
 # Current Milestone
 
-## Milestone 35, (Due by Jan, 2025)
+## Milestone 36,  version 19.1 (Due by Feb, 2025)
 
-1. Tile Manager - new component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
-2. Query Builder component update [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
-3. IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
-4. Update of the carousel component [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
+1. Query Builder multi-table query support [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
+2. IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
+3. Carousel component vertical orientation support [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
 
 ## Going down the road
 
 1. Provide an option to modify the default enter edit mode conditions, to e.g. allow edit mode start on a single click [#14658](https://github.com/IgniteUI/igniteui-angular/issues/14658)
 2. Provide an excel-like navigation mode for editing where all arrow keys navigate the cell in edit mode. [#14659](https://github.com/IgniteUI/igniteui-angular/issues/14659)
 3. Extend the 18.2 editorOptions property to allow modifying numeric editors to not change the value on up/down arrow press [#14660](https://github.com/IgniteUI/igniteui-angular/issues/14660)
+4. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
 
 # Previous Milestone
 
diff --git a/projects/igniteui-angular-elements/src/themes/light/fluent.scss b/projects/igniteui-angular-elements/src/themes/light/fluent.scss
@@ -7,7 +7,6 @@ $palette: igx.$light-fluent-palette;
 
 @include igx.core();
 @include igx.typography($font-family: igx.$fluent-typeface, $type-scale: igx.$fluent-type-scale);
-@include igx.fluent-light-theme($palette: $palette, $exclude: vars.$unused-themes);
 
 @include util.elements-theme(
     $palette: $palette,
diff --git a/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json b/projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json
@@ -114,6 +114,12 @@
         "owner": "time-picker-theme",
         "remove": true,
         "type": "property"
+      },
+      {
+        "name": "$palette",
+        "owner": "color-classes",
+        "remove": true,
+        "type": "property"
       }
     ]
   }
diff --git a/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts
@@ -36,4 +36,26 @@ describe(`Update to ${version}`, () => {
             );
         });
     });
+
+    it('should remove the $palette property from the color-classes mixin', async () => {
+            const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+            appTree.create(
+                testFilePath,
+                `@include color-classes(
+                    $palette: $some-palette,
+                    $prop: 'color',
+                    $prefix: 'bg'
+                );`
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `@include color-classes(
+                    $prop: 'color',
+                    $prefix: 'bg'
+                );`
+            );
+    });
 });
diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts
@@ -7,14 +7,9 @@ import {
 } from '@angular/core';
 import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 import { CheckboxBaseDirective } from './checkbox-base.directive';
-import { IBaseEventArgs } from '../core/utils';
 import { ControlValueAccessor } from '@angular/forms';
 import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
 
-export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
-    checked: boolean;
-    value?: any;
-}
 /**
  * Allows users to make a binary choice for a certain condition.
  *
diff --git a/projects/igniteui-angular/src/lib/checkbox/public_api.ts b/projects/igniteui-angular/src/lib/checkbox/public_api.ts
@@ -0,0 +1,2 @@
+export { type LabelPosition, IChangeCheckboxEventArgs } from "./checkbox-base.directive";
+export * from "./checkbox.component";
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -36,7 +36,7 @@
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <div class="igx-combo__search" *ngIf="displaySearchInput">
-        <igx-input-group>
+        <igx-input-group type="line">
             <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
                    [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
                    (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -504,7 +504,7 @@
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'success', $variant: 600);
         } @else {
-            color: contrast-color($color: 'success', $variant: if($variant = 'indigo', 900, 500));
+            color: contrast-color($color: 'success', $variant: if($variant == 'indigo', 900, 500));
         }
         background: color($color: 'success', $variant: 500);
         border-color: color($color: 'success', $variant: 500);
@@ -590,7 +590,7 @@
         @if $variant == 'bootstrap' {
             color: contrast-color($color: 'error', $variant: 600);
         } @else {
-            color: contrast-color($color: 'error', $variant: if($variant = 'indigo', 900, 500));
+            color: contrast-color($color: 'error', $variant: if($variant == 'indigo', 900, 500));
         }
         background: color($color: 'error', $variant: 500);
         border-color: color($color: 'error', $variant: 500);
diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/projects/igniteui-angular/src/lib/directives/button/button.directive.ts
@@ -7,7 +7,8 @@ import {
     Output,
     Renderer2,
     booleanAttribute,
-    AfterContentInit
+    AfterContentInit,
+    OnDestroy
 } from '@angular/core';
 import { mkenum } from '../../core/utils';
 import { IBaseEventArgs } from '../../core/utils';
@@ -46,7 +47,7 @@ export type IgxButtonType = typeof IgxButtonType[keyof typeof IgxButtonType];
     selector: '[igxButton]',
     standalone: true
 })
-export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterContentInit {
+export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterContentInit, OnDestroy {
     private static ngAcceptInputType_type: IgxButtonType | '';
 
     /**
@@ -92,6 +93,12 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
      */
     private _selected = false;
 
+    private emitSelected() {
+        this.buttonSelected.emit({
+            button: this
+        });
+    }
+
     /**
      * Gets or sets whether the button is selected.
      * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
@@ -121,11 +128,11 @@ export class IgxButtonDirective extends IgxButtonBaseDirective implements AfterC
     }
 
     public ngAfterContentInit() {
-        this.nativeElement.addEventListener('click', () => {
-            this.buttonSelected.emit({
-                button: this
-            });
-        });
+        this.nativeElement.addEventListener('click', this.emitSelected.bind(this));
+    }
+
+    public ngOnDestroy(): void {
+        this.nativeElement.removeEventListener('click', this.emitSelected);
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts
@@ -10,7 +10,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 import { mkenum } from '../../core/utils';
 import { IgxRadioComponent } from '../../radio/radio.component';
 import { IgxDirectionality } from '../../services/direction/directionality';
-import { IChangeCheckboxEventArgs } from '../../checkbox/checkbox.component';
+import { IChangeCheckboxEventArgs } from '../../checkbox/public_api';
 
 /**
  * Determines the Radio Group alignment
diff --git a/projects/igniteui-angular/src/lib/grids/common/crud.service.ts b/projects/igniteui-angular/src/lib/grids/common/crud.service.ts
@@ -684,12 +684,13 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
             return;
         }
         this.endEdit(true, event);
-
-        if (parentRow != null && this.grid.expansionStates.get(parentRow.key)) {
-            this.grid.collapseRow(parentRow.key);
+        // work with copy of original row, since context may change on collapse.
+        const parentRowCopy = parentRow ? Object.assign(copyDescriptors(parentRow), parentRow) : null;
+        if (parentRowCopy != null && this.grid.expansionStates.get(parentRowCopy.key)) {
+            this.grid.collapseRow(parentRowCopy.key);
         }
 
-        this.createAddRow(parentRow, asChild);
+        this.createAddRow(parentRowCopy, asChild);
 
         this.grid.transactions.startPending();
         if (this.addRowParent.isPinned) {
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -19,7 +19,7 @@ import {
     IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand
 } from '../../../data-operations/filtering-condition';
 import { Subject } from 'rxjs';
-import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbox/checkbox.component';
+import { IChangeCheckboxEventArgs, IgxCheckboxComponent } from '../../../checkbox/public_api';
 import { takeUntil } from 'rxjs/operators';
 import { cloneHierarchicalArray, PlatformUtil } from '../../../core/utils';
 import { BaseFilteringComponent } from './base-filtering.component';
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts
@@ -9,6 +9,7 @@ import { IgxActionStripComponent } from '../../action-strip/public_api';
 import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 import { first } from 'rxjs/operators';
 import { IRowDataCancelableEventArgs } from '../public_api';
+import { wait } from '../../test-utils/ui-interactions.spec';
 
 describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     configureTestSuite();
@@ -216,5 +217,47 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
             const addedRow = treeGrid.getRowByKey(newRowId);
             expect(addedRow.data[treeGrid.foreignKey]).toBe(2);
         });
+
+        it('should collapse row when child row adding begins and it added row should go under correct parent.', async() => {
+            treeGrid.data = [
+                { ID: 1, ParentID: -1, Name: 'Casey Houston', JobTitle: 'Vice President', Age: 32 },
+                { ID: 2, ParentID: 10, Name: 'Gilberto Todd', JobTitle: 'Director', Age: 41 },
+                { ID: 3, ParentID: 10, Name: 'Tanya Bennett', JobTitle: 'Director', Age: 29 },
+                { ID: 4, ParentID: 6, Name: 'Jack Simon', JobTitle: 'Software Developer', Age: 33 },
+                { ID: 6, ParentID: -1, Name: 'Erma Walsh', JobTitle: 'CEO', Age: 52 },
+                { ID: 7, ParentID: 10, Name: 'Debra Morton', JobTitle: 'Associate Software Developer', Age: 35 },
+                { ID: 9, ParentID: 10, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', Age: 44 },
+                { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 }
+            ];
+            fix.detectChanges();
+            treeGrid.collapseAll();
+            treeGrid.height = "350px";
+            fix.detectChanges();
+            const parentRow1 = treeGrid.rowList.toArray()[1] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow1.key);
+            const parentRow2 = treeGrid.rowList.toArray()[3] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow2.key);
+            treeGrid.triggerPipes();
+            fix.detectChanges();
+
+            // scroll bottom
+            treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1);
+            await wait(50);
+            fix.detectChanges();
+            // start add row
+            parentRow2.beginAddChild();
+            fix.detectChanges();
+            // last row should be add row
+            const addRow = treeGrid.gridAPI.get_row_by_index(4);
+            expect(addRow.addRowUI).toBeTrue();
+            endTransition();
+
+            // end edit
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+
+            // row should be added under correct parent
+            expect(treeGrid.data[treeGrid.data.length - 1].ParentID).toBe(10);
+        });
     });
 });
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -1,6 +1,5 @@
 import { DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
-    AfterViewInit,
     ChangeDetectorRef,
     Component,
     ContentChild,
@@ -35,7 +34,7 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token
     providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }],
     imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault]
 })
-export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit {
+export class IgxInputGroupComponent implements IgxInputGroupBase {
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -219,15 +218,13 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit
         private themeToken: ThemeToken
     ) {
         this._theme = this.themeToken.theme;
-
-        const { unsubscribe } = this.themeToken.onChange((theme) => {
+        const themeChange = this.themeToken.onChange((theme) => {
             if (this._theme !== theme) {
                 this._theme = theme;
                 this.cdr.detectChanges();
             }
         });
-
-        this._destroyRef.onDestroy(() => unsubscribe);
+        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
     }
 
     /** @hidden */
@@ -457,7 +454,7 @@ export class IgxInputGroupComponent implements IgxInputGroupBase, AfterViewInit
     }
 
     /** @hidden @internal */
-    public ngAfterViewInit() {
+    public ngAfterContentChecked() {
         this.setComponentTheme();
     }
 }
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -36,7 +36,6 @@ const CSS_CLASS_SECONDSLIST = '.igx-time-picker__secondsList';
 const CSS_CLASS_AMPMLIST = 'igx-time-picker__ampmList';
 const CSS_CLASS_SELECTED_ITEM = '.igx-time-picker__item--selected';
 const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour';
-const CSS_CLASS_OVERLAY = 'igx-overlay';
 const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper';
 const TIME_PICKER_TOGGLE_ICON = 'access_time';
 const TIME_PICKER_CLEAR_ICON = 'clear';
@@ -192,7 +191,8 @@ describe('IgxTimePicker', () => {
             });
 
             mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
-            timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, null, mockCdr);
+            const platformUtil = TestBed.inject(PlatformUtil);
+            timePicker = new IgxTimePickerComponent(elementRef, 'en', null, mockInjector, platformUtil, mockCdr);
             (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective;
             (timePicker as any)._inputGroup = mockInputGroup;
             (timePicker as any).inputDirective = mockInputDirective;
@@ -936,7 +936,6 @@ describe('IgxTimePicker', () => {
                 expect(document.activeElement.children[3].innerHTML.trim()).toBe('10');
             });
 
-
             it('should navigate through items with arrow keys', () => {
                 timePicker.itemsDelta = { hours: 4, minutes: 7, seconds: 1 };
                 fixture.detectChanges();
@@ -1086,6 +1085,51 @@ describe('IgxTimePicker', () => {
                 expect(selectedMinutes).toEqual('00');
                 expect(selectedAMPM).toEqual('AM');
             });
+
+            it('should not reset the time when clicking on AM/PM - GH#15158', fakeAsync(() => {
+                timePicker.itemsDelta = { hours: 1, minutes: 15, seconds: 1 };
+                timePicker.mode = "dialog";
+
+                timePicker.open();
+                fixture.detectChanges();
+
+                const amElement = ampmColumn.query(e => e.nativeElement.textContent === 'AM');
+                const pmElement = ampmColumn.query(e => e.nativeElement.textContent === 'PM');
+
+                UIInteractions.simulateClickEvent(amElement.nativeElement);
+                fixture.detectChanges();
+
+                let selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM));
+                let selectedHour = selectedItems[0].nativeElement.innerText;
+                let selectedMinutes = selectedItems[1].nativeElement.innerText;
+                let selectedAMPM = selectedItems[2].nativeElement.innerText;
+
+                expect(selectedHour).toBe('11');
+                expect(selectedMinutes).toEqual('45');
+                expect(selectedAMPM).toEqual('AM');
+
+                UIInteractions.simulateClickEvent(pmElement.nativeElement); // move to the PM element
+                fixture.detectChanges();
+                UIInteractions.simulateClickEvent(pmElement.nativeElement); // click again to reproduce the issue
+                fixture.detectChanges();
+
+                selectedItems = fixture.debugElement.queryAll(By.css(CSS_CLASS_SELECTED_ITEM));
+                selectedHour = selectedItems[0].nativeElement.innerText;
+                selectedMinutes = selectedItems[1].nativeElement.innerText;
+
+                expect(selectedItems[2]).toBeDefined(); // if the minutes column has no elements, this will be undefined
+                selectedAMPM = selectedItems[2].nativeElement.innerText;
+                expect(selectedHour).toBe('11');
+                expect(selectedMinutes).toEqual('45');
+                expect(selectedAMPM).toEqual('PM');
+
+                // ensure there is content in each element of the spinners
+                // '08', '09', '10', '11', '12', '01', '02'
+                expect(hourColumn.queryAll(By.css('span')).every(e => !!e.nativeElement.innerText)).toBeTrue();
+
+                // '00', '15', '30', '45', '', '', '' - three empty elements to align the minutes spinner length with the hours spinner length
+                expect(minutesColumn.queryAll(By.css('span')).filter(e => !!e.nativeElement.innerText).length).toEqual(4);
+            }));
         });
 
         describe('Rendering tests', () => {
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -944,7 +944,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
             }
             case 'ampmList': {
                 let hour = this._selectedDate.getHours();
-                hour = DateTimeUtil.isAm(item) ? hour - 12 : hour + 12;
+                hour = DateTimeUtil.isAm(item)
+                    ? hour % 12
+                    : (hour % 12) + 12;
+
                 date.setHours(hour);
                 date = this.validateDropdownValue(date, true);
                 this.setSelectedValue(date);
@@ -1249,7 +1252,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
 
     private subscribeToToggleDirectiveEvents(): void {
         if (this.toggleRef) {
-            if (this._inputGroup) {
+            if (this._inputGroup && this.platform.isBrowser) {
                 this.toggleRef.element.style.width = this._inputGroup.element.nativeElement.getBoundingClientRect().width + 'px';
             }
 
diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
diff --git a/src/styles/hound/_palette.scss b/src/styles/hound/_palette.scss

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,12 @@`
`114`	`114`	`"owner": "time-picker-theme",`
`115`	`115`	`"remove": true,`
`116`	`116`	`"type": "property"`
	`117`	`+ },`
	`118`	`+ {`
	`119`	`+ "name": "$palette",`
	`120`	`+ "owner": "color-classes",`
	`121`	`+ "remove": true,`
	`122`	`+ "type": "property"`
`117`	`123`	`}`
`118`	`124`	`]`
`119`	`125`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { type LabelPosition, IChangeCheckboxEventArgs } from "./checkbox-base.directive";`
	`2`	`+export * from "./checkbox.component";`