Skip to content

Commit 217ea33

Browse files
simeonoffsimeonoff
authored
fix(*): icon service doesn't work with scoped themes (#15150)
1 parent 3d8fb51 commit 217ea33

File tree

16 files changed

+300
-202
lines changed

16 files changed

+300
-202
lines changed

‎projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@ import {
1414
Self,
1515
booleanAttribute,
1616
inject,
17-
DestroyRef
17+
DestroyRef,
18+
Inject
1819
} from '@angular/core';
1920
import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
2021
import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
21-
import { IBaseEventArgs, mkenum } from '../core/utils';
22+
import { IBaseEventArgs, getComponentTheme, mkenum } from '../core/utils';
2223
import { EditorProvider, EDITOR_PROVIDER } from '../core/edit-provider';
23-
import { noop, Subject, Subscription } from 'rxjs';
24+
import { noop, Subject } from 'rxjs';
2425
import { takeUntil } from 'rxjs/operators';
25-
import { IgxTheme, ThemeService } from '../services/theme/theme.service';
26+
import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token';
2627

2728
export const LabelPosition = /*@__PURE__*/mkenum({
2829
BEFORE: 'before',
@@ -493,28 +494,40 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
493494
*/
494495
private _required = false;
495496
private elRef = inject(ElementRef);
496-
private _theme$ = new Subject<IgxTheme>();
497-
private _subscription: Subscription;
498497
private destroyRef = inject(DestroyRef);
499498

500499
constructor(
501500
protected cdr: ChangeDetectorRef,
502501
protected renderer: Renderer2,
503-
protected themeService: ThemeService,
502+
@Inject(THEME_TOKEN)
503+
protected themeToken: ThemeToken,
504504
@Optional() @Self() public ngControl: NgControl,
505505
) {
506506
if (this.ngControl !== null) {
507507
this.ngControl.valueAccessor = this;
508508
}
509509

510-
this.theme = this.themeService.globalTheme;
510+
this.theme = this.themeToken.theme;
511511

512-
this._subscription = this._theme$.asObservable().subscribe(value => {
513-
this.theme = value as IgxTheme;
514-
this.cdr.detectChanges();
512+
const { unsubscribe } = this.themeToken.onChange((theme) => {
513+
if (this.theme !== theme) {
514+
this.theme = theme;
515+
this.cdr.detectChanges();
516+
}
515517
});
516518

517-
this.destroyRef.onDestroy(() => this._subscription.unsubscribe());
519+
this.destroyRef.onDestroy(() => unsubscribe);
520+
}
521+
522+
private setComponentTheme() {
523+
if(!this.themeToken.preferToken) {
524+
const theme = getComponentTheme(this.elRef.nativeElement);
525+
526+
if (theme && theme !== this.theme) {
527+
this.theme = theme;
528+
this.cdr.markForCheck();
529+
}
530+
}
518531
}
519532

520533
/**
@@ -531,12 +544,7 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
531544
}
532545
}
533546

534-
const theme = this.themeService.getComponentTheme(this.elRef);
535-
536-
if (theme) {
537-
this._theme$.next(theme);
538-
this.cdr.markForCheck();
539-
}
547+
this.setComponentTheme();
540548
}
541549

542550
/** @hidden @internal */

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

Lines changed: 23 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { IBaseCancelableBrowserEventArgs } from '../core/utils';
1313
import { SortingDirection } from '../data-operations/sorting-strategy';
1414
import { IForOfState } from '../directives/for-of/for_of.directive';
1515
import { IgxInputState } from '../directives/input/input.directive';
16-
import { IgxIconService } from '../icon/public_api';
1716
import { IgxLabelDirective } from '../input-group/public_api';
1817
import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
1918
import { configureTestSuite } from '../test-utils/configure-suite';
@@ -87,7 +86,6 @@ describe('igxCombo', () => {
8786
get: mockNgControl
8887
});
8988
mockSelection.get.and.returnValue(new Set([]));
90-
const mockIconService = new IgxIconService(null, null, null, null);
9189
const mockDocument = jasmine.createSpyObj('DOCUMENT', [], { 'defaultView': { getComputedStyle: () => null }});
9290

9391
it('should correctly implement interface methods - ControlValueAccessor ', () => {
@@ -98,11 +96,9 @@ describe('igxCombo', () => {
9896
mockComboService,
9997
mockDocument,
10098
null,
101-
mockInjector,
102-
mockIconService
99+
mockInjector
103100
);
104101

105-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
106102
combo.ngOnInit();
107103
expect(mockInjector.get).toHaveBeenCalledWith(NgControl, null);
108104
combo.registerOnChange(mockNgControl.registerOnChangeCb);
@@ -146,12 +142,10 @@ describe('igxCombo', () => {
146142
mockComboService,
147143
mockDocument,
148144
null,
149-
mockInjector,
150-
mockIconService
145+
mockInjector
151146
);
152147

153148
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']);
154-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
155149
combo.ngOnInit();
156150
combo.dropdown = dropdown;
157151
dropdown.collapsed = true;
@@ -179,12 +173,10 @@ describe('igxCombo', () => {
179173
mockComboService,
180174
mockDocument,
181175
null,
182-
mockInjector,
183-
mockIconService
176+
mockInjector
184177
);
185178
const dropdownContainer = { nativeElement: { focus: () => { } } };
186179
combo['dropdownContainer'] = dropdownContainer;
187-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
188180
spyOn(combo, 'focusSearchInput');
189181

190182
combo.autoFocusSearch = false;
@@ -207,11 +199,9 @@ describe('igxCombo', () => {
207199
mockComboService,
208200
mockDocument,
209201
null,
210-
mockInjector,
211-
mockIconService
202+
mockInjector
212203
);
213204
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['toggle']);
214-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
215205
combo.ngOnInit();
216206
combo.dropdown = dropdown;
217207
const defaultSettings = (combo as any)._overlaySettings;
@@ -234,10 +224,8 @@ describe('igxCombo', () => {
234224
mockComboService,
235225
mockDocument,
236226
null,
237-
mockInjector,
238-
mockIconService
227+
mockInjector
239228
);
240-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
241229
combo.ngOnInit();
242230
combo.valueKey = 'field';
243231
expect(combo.displayKey).toEqual(combo.valueKey);
@@ -253,10 +241,8 @@ describe('igxCombo', () => {
253241
mockComboService,
254242
mockDocument,
255243
null,
256-
mockInjector,
257-
mockIconService
244+
mockInjector
258245
);
259-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
260246
combo.ngOnInit();
261247
combo.data = data;
262248
mockSelection.select_items.calls.reset();
@@ -281,11 +267,9 @@ describe('igxCombo', () => {
281267
mockComboService,
282268
mockDocument,
283269
null,
284-
mockInjector,
285-
mockIconService
270+
mockInjector
286271
);
287272
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
288-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
289273
combo.ngOnInit();
290274
combo.data = complexData;
291275
combo.valueKey = 'country';
@@ -336,11 +320,9 @@ describe('igxCombo', () => {
336320
mockComboService,
337321
mockDocument,
338322
null,
339-
mockInjector,
340-
mockIconService
323+
mockInjector
341324
);
342325
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
343-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
344326
combo.ngOnInit();
345327
combo.data = data;
346328
combo.dropdown = dropdown;
@@ -375,10 +357,8 @@ describe('igxCombo', () => {
375357
mockComboService,
376358
mockDocument,
377359
null,
378-
mockInjector,
379-
mockIconService
360+
mockInjector
380361
);
381-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
382362
combo.ngOnInit();
383363
spyOn(combo.opening, 'emit').and.callThrough();
384364
spyOn(combo.closing, 'emit').and.callThrough();
@@ -423,11 +403,9 @@ describe('igxCombo', () => {
423403
mockComboService,
424404
mockDocument,
425405
null,
426-
mockInjector,
427-
mockIconService
406+
mockInjector
428407
);
429408
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
430-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
431409
combo.ngOnInit();
432410
combo.data = data;
433411
combo.dropdown = dropdown;
@@ -524,11 +502,9 @@ describe('igxCombo', () => {
524502
mockComboService,
525503
mockDocument,
526504
null,
527-
mockInjector,
528-
mockIconService
505+
mockInjector
529506
);
530507
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
531-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
532508
combo.ngOnInit();
533509
combo.data = complexData;
534510
combo.valueKey = 'country';
@@ -570,11 +546,9 @@ describe('igxCombo', () => {
570546
mockComboService,
571547
mockDocument,
572548
null,
573-
mockInjector,
574-
mockIconService
549+
mockInjector
575550
);
576551
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
577-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
578552
combo.ngOnInit();
579553
combo.data = complexData;
580554
combo.valueKey = 'country';
@@ -637,11 +611,9 @@ describe('igxCombo', () => {
637611
mockComboService,
638612
mockDocument,
639613
null,
640-
mockInjector,
641-
mockIconService
614+
mockInjector
642615
);
643616
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
644-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
645617
combo.ngOnInit();
646618
combo.data = data;
647619
combo.dropdown = dropdown;
@@ -666,11 +638,9 @@ describe('igxCombo', () => {
666638
mockComboService,
667639
mockDocument,
668640
null,
669-
mockInjector,
670-
mockIconService
641+
mockInjector
671642
);
672643
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
673-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
674644
combo.ngOnInit();
675645
combo.data = data;
676646
combo.dropdown = dropdown;
@@ -720,11 +690,9 @@ describe('igxCombo', () => {
720690
mockComboService,
721691
mockDocument,
722692
null,
723-
mockInjector,
724-
mockIconService
693+
mockInjector
725694
);
726695
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
727-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
728696
combo.ngOnInit();
729697
combo.data = data;
730698
combo.dropdown = dropdown;
@@ -745,10 +713,8 @@ describe('igxCombo', () => {
745713
mockComboService,
746714
mockDocument,
747715
null,
748-
mockInjector,
749-
mockIconService
716+
mockInjector
750717
);
751-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
752718
combo.ngOnInit();
753719
let errorMessage = '';
754720
try {
@@ -769,10 +735,8 @@ describe('igxCombo', () => {
769735
mockComboService,
770736
mockDocument,
771737
null,
772-
mockInjector,
773-
mockIconService
738+
mockInjector
774739
);
775-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
776740
combo.ngOnInit();
777741
let errorMessage = '';
778742
try {
@@ -793,11 +757,9 @@ describe('igxCombo', () => {
793757
mockComboService,
794758
mockDocument,
795759
null,
796-
mockInjector,
797-
mockIconService
760+
mockInjector
798761
);
799762
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
800-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
801763
combo.ngOnInit();
802764
combo.data = data;
803765
combo.dropdown = dropdown;
@@ -841,10 +803,8 @@ describe('igxCombo', () => {
841803
mockComboService,
842804
mockDocument,
843805
null,
844-
mockInjector,
845-
mockIconService
806+
mockInjector
846807
);
847-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
848808
combo.ngOnInit();
849809
combo.data = data;
850810
combo.disableFiltering = false;
@@ -866,12 +826,10 @@ describe('igxCombo', () => {
866826
mockComboService,
867827
mockDocument,
868828
null,
869-
mockInjector,
870-
mockIconService
829+
mockInjector
871830
);
872831
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['open', 'close', 'toggle']);
873832
const spyObj = jasmine.createSpyObj('event', ['stopPropagation', 'preventDefault']);
874-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
875833
combo.ngOnInit();
876834
combo.dropdown = dropdown;
877835
dropdown.collapsed = true;
@@ -889,12 +847,10 @@ describe('igxCombo', () => {
889847
mockComboService,
890848
mockDocument,
891849
null,
892-
mockInjector,
893-
mockIconService
850+
mockInjector
894851
);
895852
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
896853
const spyObj = jasmine.createSpyObj('event', ['stopPropagation']);
897-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
898854
combo.ngOnInit();
899855
combo.data = data;
900856
combo.dropdown = dropdown;
@@ -916,16 +872,14 @@ describe('igxCombo', () => {
916872
mockComboService,
917873
mockDocument,
918874
null,
919-
mockInjector,
920-
mockIconService
875+
mockInjector
921876
);
922877
const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
923878
const mockVirtDir = jasmine.createSpyObj('virtDir', ['scrollTo']);
924879
const mockInput = jasmine.createSpyObj('mockInput', [], {
925880
nativeElement: jasmine.createSpyObj('mockElement', ['focus'])
926881
});
927882
spyOn(combo.addition, 'emit').and.callThrough();
928-
spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
929883
const subParams: { cancel: boolean; newValue: string; modify: boolean } = {
930884
cancel: false,
931885
modify: false,
@@ -1023,8 +977,7 @@ describe('igxCombo', () => {
1023977
mockComboService,
1024978
mockDocument,
1025979
null,
1026-
mockInjector,
1027-
mockIconService
980+
mockInjector
1028981
);
1029982
combo.ngOnDestroy();
1030983
expect(mockComboService.clear).toHaveBeenCalled();

0 commit comments

Comments
 (0)