Merge branch '19.2.x' into rivanova/fix-15848-19.2.x

Author: RivaIvanova

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -3,7 +3,7 @@
         <ng-content select="[igxLabel]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-prefix">
-        <ng-content select="igx-prefix"></ng-content>
+        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-hint, [igxHint]">
         <ng-content select="igx-hint, [igxHint]"></ng-content>
@@ -15,7 +15,7 @@
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
         (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
-        <ng-content select="igx-suffix"></ng-content>
+        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
     @if (displayValue) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     inset-inline-end: 0;
+    width: var(--vhelper-scrollbar-size);
 }
 
 %vhelper--horizontal {

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -165,18 +165,15 @@
     %igx-combo__case-icon,
     %igx-combo__case-icon--active {
         line-height: 0;
-
-        igx-icon {
-            --size: rem(18px);
-        }
     }
 
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
         igx-icon {
-            // Important is needed since the .igx-icon--inactive has !important
-            color: color($color: 'gray', $variant: 600) !important;
+            --igx-icon-disabled-color: var(--ig-gray-600);
+            
+            opacity: 1;
         }
     }
 
@@ -244,6 +241,13 @@
         }
     }
 
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        %igx-combo__search {
+            --igx-input-group-input-suffix-background: transparent;
+            --igx-input-group-input-suffix-background--focused: transparent;
+        }
+    }
+
     .igx-input-group {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background');

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

@@ -242,6 +242,10 @@
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
         position: relative;
+
+        igx-display-container {
+            padding-inline-end: var(--vhelper-scrollbar-size);
+        }
     }
 
     %igx-drop-down__content {

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -124,6 +124,12 @@
         inherits: true;
     }
 
+    @property --vhelper-scollbar-size {
+        syntax: '<length>';
+        initial-value: 16px;
+        inherits: true;
+    }
+
     // Component styles
     @include ripple.component();
     @include action-strip.component();

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

@@ -13,13 +13,11 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('scrollTop')
     public scrollTop;
 
-    @HostBinding('style.width.px')
     public scrollWidth;
 
     @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr;
     @Input() public itemsLength: number;
 
-
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
@@ -29,6 +27,10 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
 
     public ngOnInit() {
         this.scrollWidth = this.scrollNativeSize;
+        this.document.documentElement.style.setProperty(
+            '--vhelper-scrollbar-size',
+            `${this.scrollNativeSize}px`
+        );
     }
 
     protected override restoreScroll() {

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -2309,7 +2309,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         // estimate the exact index at which column will be inserted
         // takes into account initial unpinned index of the column
         if (!hasIndex) {
-            const indices = grid.unpinnedColumns.map(col => col.index);
+            const indices = grid._unpinnedColumns.map(col => col.index);
             indices.push(this.index);
             indices.sort((a, b) => a - b);
             index = indices.indexOf(this.index);

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

@@ -108,27 +108,6 @@ describe('Column Pinning UI #grid', () => {
             verifyColumnIsPinned(column, false, 0);
         });
 
-        it('Checks order of columns after unpinning', () => {
-            for (const column of grid.columnList) {
-                column.pin();
-            }
-            fix.detectChanges();
-            grid.getColumnByName('ID').unpin();
-            grid.getColumnByName('ReleaseDate').unpin();
-            grid.getColumnByName('Downloads').unpin();
-            grid.getColumnByName('ProductName').unpin();
-            grid.getColumnByName('Released').unpin();
-            fix.detectChanges();
-            grid.unpinnedColumns.forEach((column, index) => {
-                if (index === grid.unpinnedColumns.length - 1) {
-                    return;
-                }
-                expect(
-                    column.index < grid.unpinnedColumns[index + 1].index
-                ).toBe(true);
-            });
-        });
-
         it('reflects properly grid column pinned value changes.', () => {
             const name = 'ReleaseDate';
             verifyCheckbox(name, false, false, columnChooserElement);
@@ -307,6 +286,36 @@ describe('Column Pinning UI #grid', () => {
                 ).toBe(true);
             });
         });
+
+        it('Checks order of columns after unpinning if there are hidden columns', () => {
+            // Columns are ordered like this: ID, ProductName, Downloads, Released, ReleaseDate
+            expect(grid.getColumnByName('Downloads').index).toBe(2);
+            expect(grid.getColumnByName('Released').index).toBe(3);
+
+            grid.getColumnByName('ID').hidden = true;
+            grid.getColumnByName('Downloads').pin();
+            grid.getColumnByName('Released').pin();
+            fix.detectChanges();
+
+            // unpinnedColumns contains only visible cols
+            expect(grid.unpinnedColumns.length).toBe(2);
+            // _unpinnedColumns contains all unpinned cols (including hidden)
+            expect((grid as any)._unpinnedColumns.length).toBe(3);
+
+            grid.getColumnByName('Released').unpin();
+            fix.detectChanges();
+
+            expect(grid.unpinnedColumns.length).toBe(3);
+            expect((grid as any)._unpinnedColumns.length).toBe(4);
+            // Downloads is still pinned; ID is not part of unpinnedColumns
+            expect(grid.getColumnByName('Released').field).toEqual((grid as any).unpinnedColumns[1].field);
+            expect(grid.getColumnByName('Released').field).toEqual((grid as any)._unpinnedColumns[2].field);
+
+            grid.getColumnByName('Downloads').unpin();
+            fix.detectChanges();
+            expect(grid.getColumnByName('Downloads').field).toEqual((grid as any).unpinnedColumns[1].field);
+            expect(grid.getColumnByName('Downloads').field).toEqual((grid as any)._unpinnedColumns[2].field);
+        });
     });
 
     describe('Pinning with Column Groups', () => {

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

@@ -173,6 +173,18 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
             expect($('#csvEntry').textContent).toMatch(instance.customCSVText);
         });
 
+        it('progress indicator should stop on canceling the export', () => {
+            fixture.componentInstance.exportStartCancelled = true;
+            fixture.detectChanges();
+            $(TOOLBAR_EXPORTER_TAG).querySelector('button').click();
+            fixture.detectChanges();
+            $('#excelEntry').click();
+            fixture.detectChanges();
+
+            expect(instance.exporterAction.isExporting).toBeFalse();
+            expect(instance.exporterAction.toolbar.showProgress).toBeFalse();
+        });
+
         it('Setting overlaySettings for each toolbar columns action', () => {
             const defaultSettings = instance.pinningAction.overlaySettings;
             const defaultFiltSettings = instance.advancedFiltAction.overlaySettings;
@@ -297,7 +309,7 @@ export class DefaultToolbarComponent {
                 <igx-grid-toolbar-advanced-filtering #advancedFiltAction>
                     {{ advancedFilteringTitle }}
                 </igx-grid-toolbar-advanced-filtering>
-                <igx-grid-toolbar-exporter #exporterAction [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename">
+                <igx-grid-toolbar-exporter #exporterAction [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename" (exportStarted)="exportStarted($event)">
                     {{ exporterText }}
                     <span id="excelEntry" excelText>{{ customExcelText }}</span>
                     <span id="csvEntry" csvText>{{ customCSVText }}</span>
@@ -346,8 +358,15 @@ export class ToolbarActionsComponent {
         modal: true,
         closeOnEscape: false
     };
+    public exportStartCancelled = false;
 
     constructor() {
         this.data = [...DATA];
     }
+
+    public exportStarted(args) {
+        if (this.exportStartCancelled) {
+            args.cancel = true;
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts

@@ -126,13 +126,14 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 
         this.exportStarted.emit(args);
         this.grid.toolbarExporting.emit(args);
-        this.isExporting = true;
-        this.toolbar.showProgress = true;
 
         if (args.cancel) {
             return;
         }
 
+        this.isExporting = true;
+        this.toolbar.showProgress = true;
+
         exporter.exportEnded.pipe(first()).subscribe(() => {
             this.exportEnded.emit();
             this.isExporting = false;