Merge branch '16.1.x' into mkirova/fix-14138-16.1.x

Author: ChronosSF

CHANGELOG.md

@@ -7,6 +7,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxButtonGroup`:
     - Reverted cancellable on `selected` and `deselected` events (added in 15.1.24) as it was breaking firing order and related handling.
 
+### General
+- `IgxSimpleCombo`
+    - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
+
 ## 16.1.4
 ### New Features
 - `Themes`:

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/directives/tooltip/tooltip-target.directive.ts

@@ -100,7 +100,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     @Input('igxTooltipTarget')
     public override set target(target: any) {
-        if (target !== null && target !== '') {
+        if (target instanceof IgxTooltipDirective) {
             this._target = target;
         }
     }

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -1,7 +1,7 @@
 import { fakeAsync, TestBed, tick, flush, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent } from '../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent } from '../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
@@ -24,7 +24,8 @@ describe('IgxTooltip', () => {
                 NoopAnimationsModule,
                 IgxTooltipSingleTargetComponent,
                 IgxTooltipMultipleTargetsComponent,
-                IgxTooltipPlainStringComponent
+                IgxTooltipPlainStringComponent,
+                IgxTooltipWithToggleActionComponent
             ]
         }).compileComponents();
         UIInteractions.clearOverlay();
@@ -554,6 +555,36 @@ describe('IgxTooltip', () => {
             verifyTooltipPosition(tooltipNativeElement, buttonOne, false);
         }));
     });
+
+    describe('Tooltip integration', () => {
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipWithToggleActionComponent);
+            fix.detectChanges();
+            tooltipNativeElement = fix.debugElement.query(By.directive(IgxTooltipDirective)).nativeElement;
+            tooltipTarget = fix.componentInstance.tooltipTarget as IgxTooltipTargetDirective;
+            button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective));
+        }));
+
+        it('Correctly sets tooltip target when defined before igxToggleAction directive on same host - issue #14196', fakeAsync(() => {
+            expect(tooltipTarget.target.element).toBe(tooltipNativeElement);
+            expect(fix.componentInstance.toggleDir.collapsed).toBe(true);
+
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+
+            UIInteractions.simulateClickEvent(button.nativeElement);
+            fix.detectChanges();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+
+            UIInteractions.simulateClickEvent(button.nativeElement);
+            fix.detectChanges();
+
+            expect(fix.componentInstance.toggleDir.collapsed).toBe(false);
+        }));
+    });
 });
 
 const hoverElement = (element) => element.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));