Merge branch '19.2.x' into ganastasov/fix-15808-19.2

Author: georgianastasov

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -243,7 +243,7 @@
         -webkit-overflow-scrolling: touch;
         position: relative;
 
-        igx-display-container {
+        .igx-display-container--scrollbar {
             padding-inline-end: var(--vhelper-scrollbar-size);
         }
     }

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

@@ -114,6 +114,14 @@
     %advanced-filter {
         @include sizable();
 
+        --tree-scrollbar-gutter: #{rem(16px)};
+
+        @if $variant == 'bootstrap' {
+            --query-builder-outer-padding: #{rem(16px)};
+        } @else {
+            --query-builder-outer-padding: #{rem(24px)};
+        }
+
         width: auto;
         min-width: rem(660px);
         background-color: var-get($theme, 'background');
@@ -122,11 +130,19 @@
         overflow: hidden;
 
         &:has(:not(igx-query-builder-header)) {
-            padding-block-start: if($variant != 'bootstrap', rem(24px), rem(16px))
+            padding-block-start: var(--query-builder-outer-padding);
+
+            %query-level-0 {
+                padding-block: 0 var(--query-builder-outer-padding);
+            }
         }
 
         &:has(igx-query-builder-header) {
             padding-block-start: 0;
+
+            %query-level-0 {
+                padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding);
+            }
         }
 
 	    .igx-chip__ghost {
@@ -145,10 +161,8 @@
     %query-level-0 {
         display: block;
         width: 100%;
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block:
-            if($variant != 'bootstrap', 0, rem(16px))
-            if($variant != 'bootstrap', rem(24px), rem(16px));
+
+        padding-inline: var(--query-builder-outer-padding);
 
         > %advanced-filter__main {
             gap: rem(16px);
@@ -159,7 +173,7 @@
                 max-height: rem(570px);
                 overflow-y: auto;
                 overflow-x: hidden;
-                padding-inline-end: rem(16px);
+                padding-inline-end: var(--tree-scrollbar-gutter);
             }
         }
     }
@@ -230,8 +244,8 @@
         margin-bottom: 0;
         border-block-end: rem(1px) solid var-get($theme, 'header-border');
 
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
+        padding-inline: var(--query-builder-outer-padding);
+        padding-block: var(--query-builder-outer-padding) rem(16px);
     }
 
     %advanced-filter__title {

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -6,12 +6,16 @@ import {
     Directive,
     AfterViewInit,
     Inject,
-    NgZone
+    NgZone,
+    Renderer2,
+    PLATFORM_ID,
+    inject
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil, throttleTime } from 'rxjs/operators';
 import { resizeObservable, PlatformUtil } from '../../core/utils';
+import { isPlatformBrowser } from '@angular/common';
 
 @Directive({
     selector: '[igxVirtualHelperBase]',
@@ -27,13 +31,16 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     private _afterViewInit = false;
     private _scrollNativeSize: number;
     private _detached = false;
+    protected renderer = inject(Renderer2);
+    protected platformId = inject(PLATFORM_ID);
+    protected ngZone = inject(NgZone);
 
     constructor(
         public elementRef: ElementRef<HTMLElement>,
         public cdr: ChangeDetectorRef,
         protected _zone: NgZone,
         @Inject(DOCUMENT) public document: any,
-        protected platformUtil: PlatformUtil,
+        protected platformUtil: PlatformUtil
     ) {
         this._scrollNativeSize = this.calculateScrollNativeSize();
     }
@@ -104,6 +111,34 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         return this.document.body.contains(this.nativeElement);
     }
 
+    private toggleClass(element: HTMLElement, className: string, shouldHaveClass: boolean): void {
+        if (shouldHaveClass) {
+            this.renderer.addClass(element, className);
+        } else {
+            this.renderer.removeClass(element, className);
+        }
+    }
+
+    private updateScrollbarClass() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+            const el = this.nativeElement;
+            const hasScrollbar = el.scrollHeight > el.clientHeight;
+            const prevSibling = el.previousElementSibling as HTMLElement | null;
+            const scrollbarClass = 'igx-display-container--scrollbar';
+
+            if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
+                this.toggleClass(prevSibling, scrollbarClass, hasScrollbar);
+            }
+            });
+        });
+    }
+
+
     protected handleMutations(event) {
         const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
         if (!hasSize && !this.isAttachedToDom) {
@@ -113,6 +148,8 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
             // attached back now.
             this.restoreScroll();
         }
+
+        this.updateScrollbarClass();
     }
 
     protected restoreScroll() {}

projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts

@@ -19,7 +19,13 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--horizontal';
 
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        zone: NgZone,
+        @Inject(DOCUMENT) document: any,
+        platformUtil: PlatformUtil
+    ) {
         super(elementRef, cdr, zone, document, platformUtil);
     }
 

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
-     ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
+    ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone} from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
 import { DOCUMENT } from '@angular/common';
 import { PlatformUtil } from '../../core/utils';
@@ -21,7 +21,13 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        zone: NgZone,
+        @Inject(DOCUMENT) document: any,
+        platformUtil: PlatformUtil,
+    ) {
         super(elementRef, cdr, zone, document, platformUtil);
     }
 

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -1,4 +1,5 @@
-import {
+import { useAnimation } from '@angular/animations';
+import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -52,6 +53,7 @@ import { IgxFocusDirective } from '../directives/focus/focus.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxChipComponent } from '../chips/chip.component';
+import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -883,7 +885,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 modal: false,
                 positionStrategy: new AutoPositionStrategy({
                     horizontalStartPoint: HorizontalAlignment.Center,
-                    horizontalDirection: HorizontalAlignment.Center
+                    horizontalDirection: HorizontalAlignment.Center,
+                    openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),
+                    closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } })
                 })
             }
         );

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

@@ -17,6 +17,7 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { IGridFormGroupCreatedEventArgs } from '../common/grid.interface';
 import { IgxTreeGridComponent } from '../tree-grid/tree-grid.component';
 import { IgxGridComponent } from './grid.component';
+import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService, VerticalAlignment } from '../../services/public_api';
 
 describe('IgxGrid - Validation #grid', () => {
 
@@ -187,6 +188,18 @@ describe('IgxGrid - Validation #grid', () => {
             const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
             expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
 
+            const overlayService = TestBed.inject(IgxOverlayService);
+            const info = overlayService.getOverlayById(cell.errorTooltip.first.overlayId);
+            const positionSettings = info.settings.positionStrategy.settings;
+
+            expect(info.settings.positionStrategy instanceof AutoPositionStrategy).toBe(true);
+            expect(positionSettings.horizontalStartPoint).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.horizontalDirection).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.verticalStartPoint).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.verticalDirection).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.openAnimation.options.params).toEqual({ duration: '150ms' });
+            expect(positionSettings.closeAnimation.options.params).toEqual({ duration: '75ms' });
+
             cell.errorTooltip.first.close();
             tick();
             fixture.detectChanges();