Skip to content

Commit a49ff04

Browse files
ChronosSFChronosSF
authored
Merge branch '19.2.x' into ikitanov-fix/15989-19.2.x
2 parents 6265eed + 5221b7c commit a49ff04

19 files changed

+240
-68
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@
243243
-webkit-overflow-scrolling: touch;
244244
position: relative;
245245

246-
igx-display-container {
246+
.igx-display-container--scrollbar {
247247
padding-inline-end: var(--vhelper-scrollbar-size);
248248
}
249249
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -737,8 +737,7 @@
737737
igx-time-picker {
738738
position: relative;
739739
height: calc(100% - #{$editing-outline-width * 2});
740-
width: calc(100% - #{$editing-outline-width * 2}) !important;
741-
inset-inline-start: $editing-outline-width;
740+
width: 100% !important;
742741
overflow: hidden;
743742
}
744743

@@ -1514,6 +1513,9 @@
15141513
}
15151514

15161515
%igx-grid__td--bool {
1516+
display: flex;
1517+
flex-grow: 1;
1518+
15171519
igx-icon {
15181520
--component-size: #{if($variant == 'indigo', 2, 1)};
15191521
}
@@ -1783,7 +1785,6 @@
17831785
padding-inline-end: rem(4px) !important;
17841786

17851787
> igx-icon {
1786-
margin-inline-start: auto;
17871788
color: color($color: 'error');
17881789
width: var(--igx-icon-size, rem(18px));
17891790
height: var(--igx-icon-size, rem(18px));
@@ -1889,11 +1890,10 @@
18891890
%igx-grid__td--editing {
18901891
background: var-get($theme, 'cell-editing-background') !important;
18911892
box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
1892-
padding: 0 !important;
1893+
padding-inline: rem(4px);
18931894

18941895
&.igx-grid__td--invalid {
18951896
box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
1896-
padding-inline-end: rem(4px) !important;
18971897
}
18981898

18991899
&%grid-cell-number {
@@ -2084,7 +2084,7 @@
20842084

20852085
.sort-icon {
20862086
color: var-get($theme, 'header-selected-text-color');
2087-
2087+
20882088
::after {
20892089
background: var-get($theme, 'header-selected-background');
20902090
}
@@ -2112,15 +2112,15 @@
21122112
&%igx-grid-th--sorted {
21132113
.sort-icon {
21142114
color: var-get($theme, 'header-selected-text-color');
2115-
2115+
21162116
> igx-icon {
21172117
color: inherit;
21182118
}
21192119

21202120
&:focus,
21212121
&:hover {
21222122
color: var-get($theme, 'header-selected-text-color');
2123-
2123+
21242124
> igx-icon {
21252125
color: inherit;
21262126
}
@@ -2177,14 +2177,14 @@
21772177
.sort-icon {
21782178
opacity: 1;
21792179
color: var-get($theme, 'sorted-header-icon-color');
2180-
2180+
21812181
> igx-icon {
21822182
color: inherit;
21832183
}
21842184

21852185
&:hover {
21862186
color: var-get($theme, 'sortable-header-icon-hover-color');
2187-
2187+
21882188
> igx-icon {
21892189
color: inherit;
21902190
}
@@ -2220,6 +2220,7 @@
22202220
%grid-cell-number {
22212221
text-align: $grid-cell-align-num;
22222222
justify-content: flex-end;
2223+
flex-grow: 1;
22232224

22242225
%grid-cell-header-icons {
22252226
justify-content: flex-start;

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,14 @@
114114
%advanced-filter {
115115
@include sizable();
116116

117+
--tree-scrollbar-gutter: #{rem(16px)};
118+
119+
@if $variant == 'bootstrap' {
120+
--query-builder-outer-padding: #{rem(16px)};
121+
} @else {
122+
--query-builder-outer-padding: #{rem(24px)};
123+
}
124+
117125
width: auto;
118126
min-width: rem(660px);
119127
background-color: var-get($theme, 'background');
@@ -122,11 +130,19 @@
122130
overflow: hidden;
123131

124132
&:has(:not(igx-query-builder-header)) {
125-
padding-block-start: if($variant != 'bootstrap', rem(24px), rem(16px))
133+
padding-block-start: var(--query-builder-outer-padding);
134+
135+
%query-level-0 {
136+
padding-block: 0 var(--query-builder-outer-padding);
137+
}
126138
}
127139

128140
&:has(igx-query-builder-header) {
129141
padding-block-start: 0;
142+
143+
%query-level-0 {
144+
padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding);
145+
}
130146
}
131147

132148
.igx-chip__ghost {
@@ -145,10 +161,8 @@
145161
%query-level-0 {
146162
display: block;
147163
width: 100%;
148-
padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
149-
padding-block:
150-
if($variant != 'bootstrap', 0, rem(16px))
151-
if($variant != 'bootstrap', rem(24px), rem(16px));
164+
165+
padding-inline: var(--query-builder-outer-padding);
152166

153167
> %advanced-filter__main {
154168
gap: rem(16px);
@@ -159,7 +173,7 @@
159173
max-height: rem(570px);
160174
overflow-y: auto;
161175
overflow-x: hidden;
162-
padding-inline-end: rem(16px);
176+
padding-inline-end: var(--tree-scrollbar-gutter);
163177
}
164178
}
165179
}
@@ -230,8 +244,8 @@
230244
margin-bottom: 0;
231245
border-block-end: rem(1px) solid var-get($theme, 'header-border');
232246

233-
padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
234-
padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
247+
padding-inline: var(--query-builder-outer-padding);
248+
padding-block: var(--query-builder-outer-padding) rem(16px);
235249
}
236250

237251
%advanced-filter__title {

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

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ import {
66
Directive,
77
AfterViewInit,
88
Inject,
9-
NgZone
9+
NgZone,
10+
Renderer2,
11+
PLATFORM_ID,
12+
inject
1013
} from '@angular/core';
1114
import { DOCUMENT } from '@angular/common';
1215
import { Subject } from 'rxjs';
1316
import { takeUntil, throttleTime } from 'rxjs/operators';
1417
import { resizeObservable, PlatformUtil } from '../../core/utils';
18+
import { isPlatformBrowser } from '@angular/common';
1519

1620
@Directive({
1721
selector: '[igxVirtualHelperBase]',
@@ -27,13 +31,16 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
2731
private _afterViewInit = false;
2832
private _scrollNativeSize: number;
2933
private _detached = false;
34+
protected renderer = inject(Renderer2);
35+
protected platformId = inject(PLATFORM_ID);
36+
protected ngZone = inject(NgZone);
3037

3138
constructor(
3239
public elementRef: ElementRef<HTMLElement>,
3340
public cdr: ChangeDetectorRef,
3441
protected _zone: NgZone,
3542
@Inject(DOCUMENT) public document: any,
36-
protected platformUtil: PlatformUtil,
43+
protected platformUtil: PlatformUtil
3744
) {
3845
this._scrollNativeSize = this.calculateScrollNativeSize();
3946
}
@@ -104,6 +111,34 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
104111
return this.document.body.contains(this.nativeElement);
105112
}
106113

114+
private toggleClass(element: HTMLElement, className: string, shouldHaveClass: boolean): void {
115+
if (shouldHaveClass) {
116+
this.renderer.addClass(element, className);
117+
} else {
118+
this.renderer.removeClass(element, className);
119+
}
120+
}
121+
122+
private updateScrollbarClass() {
123+
if (!isPlatformBrowser(this.platformId)) {
124+
return;
125+
}
126+
127+
this.ngZone.runOutsideAngular(() => {
128+
requestAnimationFrame(() => {
129+
const el = this.nativeElement;
130+
const hasScrollbar = el.scrollHeight > el.clientHeight;
131+
const prevSibling = el.previousElementSibling as HTMLElement | null;
132+
const scrollbarClass = 'igx-display-container--scrollbar';
133+
134+
if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
135+
this.toggleClass(prevSibling, scrollbarClass, hasScrollbar);
136+
}
137+
});
138+
});
139+
}
140+
141+
107142
protected handleMutations(event) {
108143
const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
109144
if (!hasSize && !this.isAttachedToDom) {
@@ -113,6 +148,8 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
113148
// attached back now.
114149
this.restoreScroll();
115150
}
151+
152+
this.updateScrollbarClass();
116153
}
117154

118155
protected restoreScroll() {}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
1919
@HostBinding('class')
2020
public cssClasses = 'igx-vhelper--horizontal';
2121

22-
constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
22+
constructor(
23+
elementRef: ElementRef,
24+
cdr: ChangeDetectorRef,
25+
zone: NgZone,
26+
@Inject(DOCUMENT) document: any,
27+
platformUtil: PlatformUtil
28+
) {
2329
super(elementRef, cdr, zone, document, platformUtil);
2430
}
2531

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
2-
ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
2+
ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone} from '@angular/core';
33
import { VirtualHelperBaseDirective } from './base.helper.component';
44
import { DOCUMENT } from '@angular/common';
55
import { PlatformUtil } from '../../core/utils';
@@ -21,7 +21,13 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
2121
@HostBinding('class')
2222
public cssClasses = 'igx-vhelper--vertical';
2323

24-
constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
24+
constructor(
25+
elementRef: ElementRef,
26+
cdr: ChangeDetectorRef,
27+
zone: NgZone,
28+
@Inject(DOCUMENT) document: any,
29+
platformUtil: PlatformUtil,
30+
) {
2531
super(elementRef, cdr, zone, document, platformUtil);
2632
}
2733

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {
1+
import { useAnimation } from '@angular/animations';
2+
import {
23
ChangeDetectionStrategy,
34
ChangeDetectorRef,
45
Component,
@@ -52,6 +53,7 @@ import { IgxFocusDirective } from '../directives/focus/focus.directive';
5253
import { IgxInputDirective } from '../directives/input/input.directive';
5354
import { IgxInputGroupComponent } from '../input-group/input-group.component';
5455
import { IgxChipComponent } from '../chips/chip.component';
56+
import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
5557

5658
/**
5759
* Providing reference to `IgxGridCellComponent`:
@@ -883,7 +885,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
883885
modal: false,
884886
positionStrategy: new AutoPositionStrategy({
885887
horizontalStartPoint: HorizontalAlignment.Center,
886-
horizontalDirection: HorizontalAlignment.Center
888+
horizontalDirection: HorizontalAlignment.Center,
889+
openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),
890+
closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } })
887891
})
888892
}
889893
);

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6136,7 +6136,7 @@ export abstract class IgxGridBaseDirective implements GridType,
61366136
* @hidden @internal
61376137
*/
61386138
public trackColumnChanges(_index, col) {
6139-
return col.field + col._calcWidth;
6139+
return col.field + col._calcWidth.toString();
61406140
}
61416141

61426142
/**
@@ -6316,6 +6316,9 @@ export abstract class IgxGridBaseDirective implements GridType,
63166316
// TODO: do not remove this, as it is used in rowEditTemplate, but mark is as internal and hidden
63176317
/* blazorCSSuppress */
63186318
public endEdit(commit = true, event?: Event): boolean {
6319+
if (!this.crudService.cellInEditMode && !this.crudService.rowInEditMode) {
6320+
return;
6321+
}
63196322
const document = this.nativeElement?.getRootNode() as Document | ShadowRoot;
63206323
const focusWithin = this.nativeElement?.contains(document.activeElement);
63216324

‎projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<div
99
igxTextHighlight class="igx-grid__td-text"
1010
[cssClass]="highlightClass"
11+
[class.igx-grid__td--number]="column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'"
1112
[activeCssClass]="activeHighlightClass"
1213
[groupName]="gridID"
1314
[value]="formatter ? (value | columnFormatter:formatter:rowData)
@@ -32,11 +33,13 @@
3233
}
3334

3435
@if (column.dataType === 'boolean' && !this.formatter) {
36+
<div [class.igx-grid__td--bool]="column.dataType === 'boolean'">
3537
<igx-icon
3638
family="default"
3739
[name]="value ? 'confirm' : 'close'"
3840
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }">
3941
</igx-icon>
42+
</div>
4043
}
4144
@if (column.dataType === 'image') {
4245
<img [src]="value" [alt]="value | igxCellImageAlt" />

‎projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ describe('IgxGrid - Cell selection #grid', () => {
8484

8585
UIInteractions.simulatePointerOverElementEvent('pointerup', endCell.nativeElement);
8686
detect();
87+
// Invoke endEdit() to make sure if no editing is going on,
88+
// the cell activation shouldn't be lost (https://infragistics.visualstudio.com/Indigo_Platform/_workitems/edit/37933)
89+
grid.endEdit(true, null);
90+
fix.detectChanges();
8791

8892
expect(startCell.active).toBe(true);
8993
GridSelectionFunctions.verifyCellsRegionSelected(grid, 2, 3, 1, 0);

0 commit comments

Comments
 (0)