Skip to content

Commit f9403e6

Browse files
IMinchev64IMinchev64
authored
Merge branch '20.0.x' into dkamburov/fix-37933
2 parents b90c428 + 8911970 commit f9403e6

18 files changed

+240
-78
lines changed

‎projects/igniteui-angular/src/lib/carousel/carousel-base.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,14 @@ export abstract class IgxCarouselComponentBase implements OnDestroy {
5252
}
5353

5454
public ngOnDestroy(): void {
55-
this.enterAnimationPlayer?.destroy();
56-
this.leaveAnimationPlayer?.destroy();
55+
if (this.enterAnimationPlayer) {
56+
this.enterAnimationPlayer.destroy();
57+
this.enterAnimationPlayer = null;
58+
}
59+
if (this.leaveAnimationPlayer) {
60+
this.leaveAnimationPlayer.destroy();
61+
this.leaveAnimationPlayer = null;
62+
}
5763
}
5864

5965
/** @hidden */

‎projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -745,6 +745,17 @@ describe('Carousel', () => {
745745
expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
746746
expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
747747
});
748+
749+
it('should not throw an error when playing an animation and destroying the component - #15976', () => {
750+
expect(() => {
751+
carousel.next();
752+
carousel.ngOnDestroy();
753+
fixture.detectChanges();
754+
}).not.toThrow();
755+
756+
expect(carousel['enterAnimationPlayer']).toBe(null);
757+
expect(carousel['leaveAnimationPlayer']).toBe(null);
758+
});
748759
});
749760

750761
describe('Dynamic Slides: ', () => {

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@
259259
-webkit-overflow-scrolling: touch;
260260
position: relative;
261261

262-
igx-display-container {
262+
.igx-display-container--scrollbar {
263263
padding-inline-end: var(--vhelper-scrollbar-size);
264264
}
265265
}
@@ -299,20 +299,16 @@
299299
bottom: 0;
300300
}
301301

302-
igx-icon {
302+
igx-icon,
303+
igc-icon {
303304
justify-content: center;
304-
--component-size: 1;
305-
306-
@if $variant == 'fluent' {
307-
--component-size: 3;
308-
}
309305

310306
@if $variant == 'indigo' {
311307
$icon-size: sizable(rem(14px), rem(16px), rem(16px));
312308

313-
width: var(--ig-icon-size, $icon-size);
314-
height: var(--ig-icon-size, $icon-size);
315-
font-size: var(--ig-icon-size, $icon-size);
309+
--size: #{$icon-size};
310+
} @else {
311+
--component-size: 1;
316312
}
317313
}
318314
}

‎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
@@ -758,8 +758,7 @@
758758
igx-time-picker {
759759
position: relative;
760760
height: calc(100% - #{$editing-outline-width * 2});
761-
width: calc(100% - #{$editing-outline-width * 2}) !important;
762-
inset-inline-start: $editing-outline-width;
761+
width: 100% !important;
763762
overflow: hidden;
764763
}
765764

@@ -1535,6 +1534,9 @@
15351534
}
15361535

15371536
%igx-grid__td--bool {
1537+
display: flex;
1538+
flex-grow: 1;
1539+
15381540
igx-icon {
15391541
--component-size: #{if($variant == 'indigo', 2, 1)};
15401542
}
@@ -1804,7 +1806,6 @@
18041806
padding-inline-end: rem(4px) !important;
18051807

18061808
> igx-icon {
1807-
margin-inline-start: auto;
18081809
color: color($color: 'error');
18091810
width: var(--igx-icon-size, rem(18px));
18101811
height: var(--igx-icon-size, rem(18px));
@@ -1910,11 +1911,10 @@
19101911
%igx-grid__td--editing {
19111912
background: var-get($theme, 'cell-editing-background') !important;
19121913
box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
1913-
padding: 0 !important;
1914+
padding-inline: rem(4px);
19141915

19151916
&.igx-grid__td--invalid {
19161917
box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
1917-
padding-inline-end: rem(4px) !important;
19181918
}
19191919

19201920
&%grid-cell-number {
@@ -2105,7 +2105,7 @@
21052105

21062106
.sort-icon {
21072107
color: var-get($theme, 'header-selected-text-color');
2108-
2108+
21092109
::after {
21102110
background: var-get($theme, 'header-selected-background');
21112111
}
@@ -2133,15 +2133,15 @@
21332133
&%igx-grid-th--sorted {
21342134
.sort-icon {
21352135
color: var-get($theme, 'header-selected-text-color');
2136-
2136+
21372137
> igx-icon {
21382138
color: inherit;
21392139
}
21402140

21412141
&:focus,
21422142
&:hover {
21432143
color: var-get($theme, 'header-selected-text-color');
2144-
2144+
21452145
> igx-icon {
21462146
color: inherit;
21472147
}
@@ -2198,14 +2198,14 @@
21982198
.sort-icon {
21992199
opacity: 1;
22002200
color: var-get($theme, 'sorted-header-icon-color');
2201-
2201+
22022202
> igx-icon {
22032203
color: inherit;
22042204
}
22052205

22062206
&:hover {
22072207
color: var-get($theme, 'sortable-header-icon-hover-color');
2208-
2208+
22092209
> igx-icon {
22102210
color: inherit;
22112211
}
@@ -2241,6 +2241,7 @@
22412241
%grid-cell-number {
22422242
text-align: $grid-cell-align-num;
22432243
justify-content: flex-end;
2244+
flex-grow: 1;
22442245

22452246
%grid-cell-header-icons {
22462247
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
@@ -131,6 +131,14 @@
131131
%advanced-filter {
132132
@include sizable();
133133

134+
--_tree-scrollbar-gutter: #{rem(16px)};
135+
136+
@if $variant == 'bootstrap' {
137+
--query-builder-outer-padding: #{rem(16px)};
138+
} @else {
139+
--query-builder-outer-padding: #{rem(24px)};
140+
}
141+
134142
width: auto;
135143
min-width: rem(660px);
136144
background-color: var-get($theme, 'background');
@@ -139,11 +147,19 @@
139147
overflow: hidden;
140148

141149
&:has(:not(igx-query-builder-header)) {
142-
padding-block-start: if($variant != 'bootstrap', rem(24px), rem(16px))
150+
padding-block-start: var(--query-builder-outer-padding);
151+
152+
%query-level-0 {
153+
padding-block: 0 var(--query-builder-outer-padding);
154+
}
143155
}
144156

145157
&:has(igx-query-builder-header) {
146158
padding-block-start: 0;
159+
160+
%query-level-0 {
161+
padding-block: if($variant != 'bootstrap', 0, rem(16px)) var(--query-builder-outer-padding);
162+
}
147163
}
148164

149165
.igx-chip__ghost {
@@ -162,10 +178,8 @@
162178
%query-level-0 {
163179
display: block;
164180
width: 100%;
165-
padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
166-
padding-block:
167-
if($variant != 'bootstrap', 0, rem(16px))
168-
if($variant != 'bootstrap', rem(24px), rem(16px));
181+
182+
padding-inline: var(--query-builder-outer-padding);
169183

170184
> %advanced-filter__main {
171185
gap: rem(16px);
@@ -176,7 +190,7 @@
176190
max-height: rem(570px);
177191
overflow-y: auto;
178192
overflow-x: hidden;
179-
padding-inline-end: rem(16px);
193+
padding-inline-end: var(--_tree-scrollbar-gutter);
180194
}
181195
}
182196
}
@@ -247,8 +261,8 @@
247261
margin-bottom: 0;
248262
border-block-end: rem(1px) solid var-get($theme, 'header-border');
249263

250-
padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
251-
padding-block: if($variant != 'bootstrap', rem(24px), rem(16px)) rem(16px);
264+
padding-inline: var(--query-builder-outer-padding);
265+
padding-block: var(--query-builder-outer-padding) rem(16px);
252266
}
253267

254268
%advanced-filter__title {

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ import {
77
AfterViewInit,
88
Inject,
99
NgZone,
10-
DOCUMENT
10+
Renderer2,
11+
PLATFORM_ID,
12+
inject
1113
} from '@angular/core';
1214
import { Subject } from 'rxjs';
1315
import { takeUntil, throttleTime } from 'rxjs/operators';
1416
import { resizeObservable, PlatformUtil } from '../../core/utils';
17+
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
1518

1619
@Directive({
1720
selector: '[igxVirtualHelperBase]',
@@ -27,13 +30,16 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
2730
private _afterViewInit = false;
2831
private _scrollNativeSize: number;
2932
private _detached = false;
33+
protected renderer = inject(Renderer2);
34+
protected platformId = inject(PLATFORM_ID);
35+
protected ngZone = inject(NgZone);
3036

3137
constructor(
3238
public elementRef: ElementRef<HTMLElement>,
3339
public cdr: ChangeDetectorRef,
3440
protected _zone: NgZone,
3541
@Inject(DOCUMENT) public document: any,
36-
protected platformUtil: PlatformUtil,
42+
protected platformUtil: PlatformUtil
3743
) {
3844
this._scrollNativeSize = this.calculateScrollNativeSize();
3945
}
@@ -104,6 +110,34 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
104110
return this.document.body.contains(this.nativeElement);
105111
}
106112

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

118154
protected restoreScroll() {}

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone, DOCUMENT } from '@angular/core';
1+
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core';
22
import { VirtualHelperBaseDirective } from './base.helper.component';
3+
import { DOCUMENT } from '@angular/common';
34
import { PlatformUtil } from '../../core/utils';
45

56
/**
@@ -18,7 +19,13 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
1819
@HostBinding('class')
1920
public cssClasses = 'igx-vhelper--horizontal';
2021

21-
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+
) {
2229
super(elementRef, cdr, zone, document, platformUtil);
2330
}
2431

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
2-
ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone, DOCUMENT } from '@angular/core';
2+
ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone} from '@angular/core';
33
import { VirtualHelperBaseDirective } from './base.helper.component';
4+
import { DOCUMENT } from '@angular/common';
45
import { PlatformUtil } from '../../core/utils';
56

67
@Component({
@@ -20,7 +21,13 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
2021
@HostBinding('class')
2122
public cssClasses = 'igx-vhelper--vertical';
2223

23-
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+
) {
2431
super(elementRef, cdr, zone, document, platformUtil);
2532
}
2633

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6169,7 +6169,7 @@ export abstract class IgxGridBaseDirective implements GridType,
61696169
* @hidden @internal
61706170
*/
61716171
public trackColumnChanges(_index, col) {
6172-
return col.field + col._calcWidth;
6172+
return col.field + col._calcWidth.toString();
61736173
}
61746174

61756175
/**

‎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" />

0 commit comments

Comments
 (0)