chore(*): merge from base

Author: MKirova

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -460,15 +460,22 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             });
         };
 
-        this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => initButtons());
-        this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => initButtons());
-        initButtons();
-
-        this._cdr.detectChanges();
-
         this.mutationObserver = this.setMutationsObserver();
 
-        this.mutationObserver.observe(this._el.nativeElement, this.observerConfig);
+        this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {
+            this.mutationObserver.disconnect();
+            initButtons();
+            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);
+        });
+        this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => {
+            this.mutationObserver.disconnect();
+            initButtons();
+            this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);
+        });
+
+        initButtons();
+        this._cdr.detectChanges();
+        this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);
     }
 
     /**

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -257,12 +257,6 @@
 
     $variant: map.get($theme, '_meta', 'variant');
 
-    $chip-height: (
-        comfortable: rem(32px),
-        cosy: rem(24px),
-        compact: rem(20px)
-    );
-
     $chip-padding: (
         comfortable: rem(12px),
         cosy: rem(6px),

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -213,8 +213,20 @@
             );
         }
 
-        > igx-chip igx-prefix {
-            display: flex;
+        > igx-chip {
+            @if $variant != 'indigo-design' {
+                .igx-chip__item {
+                    border-block: none;
+                }
+            }
+
+            .igx-filter-tree__expression-column {
+                padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
+            }
+            
+            igx-prefix {
+                display: flex;
+            }
         }
     }
 

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts

@@ -378,11 +378,26 @@ describe('IgxDateTimeEditor', () => {
                 inputElement = fixture.debugElement.query(By.css('input'));
                 dateTimeEditorDirective = inputElement.injector.get(IgxDateTimeEditorDirective);
             });
+
             it('should properly update mask with inputFormat onInit', () => {
                 fixture = TestBed.createComponent(IgxDateTimeEditorBaseTestComponent);
                 fixture.detectChanges();
                 expect(fixture.componentInstance.dateEditor.elementRef.nativeElement.value).toEqual('09/11/2009');
             });
+
+            it('should update value and mask according to the display format and ISO string date as value', () => {
+                fixture.componentInstance.dateTimeFormat = 'dd/MM/yy';
+                fixture.componentInstance.displayFormat = 'shortDate';
+                dateTimeEditorDirective.value = new Date(2003, 3, 5).toISOString();
+                fixture.detectChanges();
+                inputElement.triggerEventHandler('focus', {});
+                fixture.detectChanges();
+                expect(dateTimeEditorDirective.mask).toEqual('00/00/00');
+                expect(inputElement.nativeElement.value).toEqual('05/04/03');
+                UIInteractions.simulateTyping('1', inputElement);
+                expect(inputElement.nativeElement.value).toEqual('15/04/03');
+            });
+
             it('should correctly display input format during user input', () => {
                 fixture.componentInstance.dateTimeFormat = 'dd/MM/yy';
                 fixture.detectChanges();

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -90,7 +90,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   @Input()
   public set minValue(value: string | Date) {
     this._minValue = value;
-    this.onValidatorChange();
+    this._onValidatorChange();
   }
 
   /**
@@ -111,7 +111,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   @Input()
   public set maxValue(value: string | Date) {
     this._maxValue = value;
-    this.onValidatorChange();
+    this._onValidatorChange();
   }
 
   /**
@@ -166,14 +166,14 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
    * ```
    */
   @Input()
-  public set value(value: Date | string) {
+  public set value(value: Date | string | undefined | null) {
     this._value = value;
     this.setDateValue(value);
     this.onChangeCallback(value);
     this.updateMask();
   }
 
-  public get value(): Date | string {
+  public get value(): Date | string | undefined | null {
     return this._value;
   }
 
@@ -218,7 +218,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
   private document: Document;
   private _isFocused: boolean;
   private _defaultInputFormat: string;
-  private _value: Date | string;
+  private _value?: Date | string;
   private _minValue: Date | string;
   private _maxValue: Date | string;
   private _inputDateParts: DatePartInfo[];
@@ -230,9 +230,9 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     minutes: 1,
     seconds: 1
   };
-  private onTouchCallback: (...args: any[]) => void = noop;
+
   private onChangeCallback: (...args: any[]) => void = noop;
-  private onValidatorChange: (...args: any[]) => void = noop;
+  private _onValidatorChange: (...args: any[]) => void = noop;
 
   private get datePartDeltas(): DatePartDeltas {
     return Object.assign({}, this._datePartDeltas, this.spinDelta);
@@ -392,7 +392,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
 
   /** @hidden @internal */
   public registerOnValidatorChange?(fn: () => void): void {
-    this.onValidatorChange = fn;
+    this._onValidatorChange = fn;
   }
 
   /** @hidden @internal */
@@ -402,7 +402,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
 
   /** @hidden @internal */
   public override registerOnTouched(fn: any): void {
-    this.onTouchCallback = fn;
+    this._onTouchedCallback = fn;
   }
 
   /** @hidden @internal */
@@ -472,7 +472,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
       return;
     }
     this._isFocused = true;
-    this.onTouchCallback();
+    this._onTouchedCallback();
     this.updateMask();
     super.onFocus();
     this.nativeElement.select();
@@ -552,7 +552,7 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
 
   private getMaskedValue(): string {
     let mask = this.emptyMask;
-    if (DateTimeUtil.isValidDate(this.value)) {
+    if (DateTimeUtil.isValidDate(this.value) || DateTimeUtil.parseIsoDate(this.value)) {
       for (const part of this._inputDateParts) {
         if (part.type === DatePart.Literal) {
           continue;

projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts

@@ -143,7 +143,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
 
     private readonly defaultMask = 'CCCCCCCCCC';
 
-    private _onTouchedCallback: () => void = noop;
+    protected _onTouchedCallback: () => void = noop;
     private _onChangeCallback: (_: any) => void = noop;
 
     constructor(

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -48,7 +48,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```html
      * <div
      *   igxToggle
-     *   (onOpened)='onToggleOpened($event)'>
+     *   (opened)='onToggleOpened($event)'>
      * </div>
      * ```
      */
@@ -67,7 +67,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```html
      * <div
      *   igxToggle
-     *   (onOpening)='onToggleOpening($event)'>
+     *   (opening)='onToggleOpening($event)'>
      * </div>
      * ```
      */
@@ -86,7 +86,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```html
      * <div
      *   igxToggle
-     *   (onClosed)='onToggleClosed($event)'>
+     *   (closed)='onToggleClosed($event)'>
      * </div>
      * ```
      */
@@ -124,7 +124,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```html
      * <div
      *   igxToggle
-     *   (onAppended)='onToggleAppended()'>
+     *   (appended)='onToggleAppended()'>
      * </div>
      * ```
      */
@@ -376,7 +376,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
 
                 //  in case event is not canceled this will close the toggle and we need to unsubscribe.
                 //  Otherwise if for some reason, e.g. close on outside click, close() gets called before
-                //  onClosed was fired we will end with calling onClosing more than once
+                //  closed was fired we will end with calling closing more than once
                 if (!e.cancel) {
                     this.clearSubscription(this._overlayClosingSub);
                 }

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -421,6 +421,7 @@ export class IgxRowCrudState extends IgxCellCrudState {
             nonCancelableArgs = this.rowEditDone(rowEditArgs.oldValue, event);
         } else {
             const rowAddArgs = this.row.createEditEventArgs(true, event);
+            rowAddArgs.rowData = this.row.newData ?? this.row.data;
             this.grid.rowAdd.emit(rowAddArgs);
             if (rowAddArgs.cancel) {
                 return rowAddArgs;

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -234,6 +234,10 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
         });
         esf.columnChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.virtDir?.resetScrollPosition();
+
+            if (this.virtDir) {
+                this.virtDir.state.startIndex = 0;
+            }
         });
 
         esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3213,7 +3213,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    public get template(): TemplateRef<any> {
+    public get template(): TemplateRef<IgxGridTemplateContext> {
         if (this.isLoading && (this.hasZeroResultFilter || this.hasNoData)) {
             return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
         }