Skip to content

Commit c8e2490

Browse files
simeonoffsimeonoff
authored
fix(*): icon service doesn't work with scoped themes (#15140)
1 parent ac586e0 commit c8e2490

16 files changed

+298
-202
lines changed

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

+26-18
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',
@@ -492,28 +493,40 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
492493
*/
493494
private _required = false;
494495
private elRef = inject(ElementRef);
495-
private _theme$ = new Subject<IgxTheme>();
496-
private _subscription: Subscription;
497496
private destroyRef = inject(DestroyRef);
498497

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

509-
this.theme = this.themeService.globalTheme;
509+
this.theme = this.themeToken.theme;
510510

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

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

519532
/**
@@ -530,12 +543,7 @@ export class IgxCheckboxComponent implements EditorProvider, AfterViewInit, Cont
530543
}
531544
}
532545

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

541549
/** @hidden @internal */

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

+23-70
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)