Skip to content

Commit 8e86e3f

Browse files
committed
fix(localization): Apply new internal handling for localization events and handle detach on destroy.
1 parent d10f5f9 commit 8e86e3f

24 files changed

+205
-146
lines changed

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import {
1313
ChangeDetectorRef,
1414
AfterViewInit,
1515
ElementRef,
16-
booleanAttribute
16+
booleanAttribute,
17+
inject,
18+
DestroyRef
1719
} from '@angular/core';
1820
import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
1921
import { IgxDropDownComponent } from '../drop-down/drop-down.component';
@@ -28,8 +30,7 @@ import { NgTemplateOutlet } from '@angular/common';
2830
import { getCurrentResourceStrings } from '../core/i18n/resources';
2931
import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
3032
import { IgxActionStripToken } from './token';
31-
import { trackByIdentity } from '../core/utils';
32-
import { getI18nManager } from 'igniteui-i18n-core';
33+
import { onResourceChangeHandle, trackByIdentity } from '../core/utils';
3334

3435
@Directive({
3536
selector: '[igxActionStripMenuItem]',
@@ -188,6 +189,7 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
188189
*/
189190
public menuOverlaySettings: OverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
190191

192+
private _destroyRef = inject(DestroyRef);
191193
private _hidden = false;
192194
private _resourceStrings: IActionStripResourceStrings = null;
193195
private _defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
@@ -200,9 +202,9 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
200202
/** @hidden @internal **/
201203
public cdr: ChangeDetectorRef,
202204
) {
203-
getI18nManager().onResourceChange(() => {
205+
onResourceChangeHandle(this._destroyRef, () => {
204206
this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);
205-
});
207+
}, this);
206208
}
207209

208210
/**

projects/igniteui-angular/src/lib/banner/banner.component.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import {
22
Component,
33
ContentChild,
4+
DestroyRef,
45
ElementRef,
56
EventEmitter,
67
HostBinding,
8+
inject,
79
Input,
810
Output,
911
ViewChild
@@ -14,13 +16,12 @@ import { IToggleView } from '../core/navigation';
1416
import { IgxButtonDirective } from '../directives/button/button.directive';
1517
import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
1618
import { IgxBannerActionsDirective } from './banner.directives';
17-
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
19+
import { CancelableEventArgs, IBaseEventArgs, onResourceChangeHandle } from '../core/utils';
1820
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
1921
import { IgxExpansionPanelBodyComponent } from '../expansion-panel/expansion-panel-body.component';
2022
import { IgxExpansionPanelComponent } from '../expansion-panel/expansion-panel.component';
2123
import { BannerResourceStringsEN, IBannerResourceStrings } from '../core/i18n/banner-resources';
2224
import { getCurrentResourceStrings } from '../core/i18n/resources';
23-
import { getI18nManager } from 'igniteui-i18n-core';
2425

2526
export interface BannerEventArgs extends IBaseEventArgs {
2627
event?: Event;
@@ -232,6 +233,7 @@ export class IgxBannerComponent implements IToggleView {
232233
@ContentChild(IgxBannerActionsDirective)
233234
private _bannerActionTemplate: IgxBannerActionsDirective;
234235

236+
private _destroyRef = inject(DestroyRef);
235237
private _expanded: boolean = false;
236238
private _shouldFireEvent: boolean = false;
237239
private _bannerEvent: BannerEventArgs;
@@ -240,9 +242,9 @@ export class IgxBannerComponent implements IToggleView {
240242
private _defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
241243

242244
constructor(public elementRef: ElementRef<HTMLElement>) {
243-
getI18nManager().onResourceChange(() => {
245+
onResourceChangeHandle(this._destroyRef, () => {
244246
this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);
245-
});
247+
}, this);
246248
}
247249

248250
/**

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID, HostListener, booleanAttribute, ViewChildren, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';
1+
import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID, HostListener, booleanAttribute, ViewChildren, QueryList, ElementRef, ChangeDetectorRef, inject, DestroyRef } from '@angular/core';
22
import { WEEKDAYS, IFormattingOptions, IFormattingViews, IViewDateChangeEventArgs, ScrollDirection, IgxCalendarView, CalendarSelection } from './calendar';
33
import { ControlValueAccessor } from '@angular/forms';
44
import { DateRangeDescriptor } from '../core/dates';
55
import { noop, Subject } from 'rxjs';
6-
import { getLocaleFirstDayOfWeek, isDate, isEqual, PlatformUtil } from '../core/utils';
6+
import { getLocaleFirstDayOfWeek, isDate, isEqual, onResourceChangeHandle, PlatformUtil } from '../core/utils';
77
import { CalendarResourceStringsEN, ICalendarResourceStrings } from '../core/i18n/calendar-resources';
88
import { DateTimeUtil } from '../date-common/util/date-time.util';
99
import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
1010
import { KeyboardNavigationService } from './calendar.services';
1111
import { getYearRange, isDateInRanges } from './common/helpers';
1212
import { CalendarDay } from './common/model';
13-
import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
13+
import { getCurrentI18n, getI18nManager, IResourceChangeEventArgs } from 'igniteui-i18n-core';
1414

1515
/** @hidden @internal */
1616
@Directive({
@@ -239,6 +239,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
239239
*/
240240
private _selection: CalendarSelection | string = CalendarSelection.SINGLE;
241241

242+
protected _destroyRef = inject(DestroyRef);
242243
private _resourceStrings: ICalendarResourceStrings = null;
243244
private _defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN);
244245

@@ -665,18 +666,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
665666
protected keyboardNavigation?: KeyboardNavigationService,
666667
protected cdr?: ChangeDetectorRef,
667668
) {
668-
initi18n(_localeId);
669-
this._defaultLocale = getCurrentI18n();
670-
this._localeWeekStart = getLocaleFirstDayOfWeek(this.locale);
669+
this.initLocale();
671670
this.viewDate = this.viewDate ? this.viewDate : new Date();
672-
673-
getI18nManager().onResourceChange((args: ResourceChangeEventArgs) => {
674-
this._defaultLocale = args.newLocale;
675-
this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
676-
this._localeWeekStart = getLocaleFirstDayOfWeek(this.locale);
677-
});
678671
}
679672

673+
680674
/**
681675
* Multi/Range selection with shift key
682676
*
@@ -1025,4 +1019,17 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
10251019
private validateDate(value: Date) {
10261020
return DateTimeUtil.isValidDate(value) ? value : new Date();
10271021
}
1022+
1023+
private initLocale() {
1024+
initi18n(this._localeId);
1025+
this._defaultLocale = getCurrentI18n();
1026+
this._localeWeekStart = getLocaleFirstDayOfWeek(this.locale);
1027+
onResourceChangeHandle(this._destroyRef, this.onResourceChange, this);
1028+
}
1029+
1030+
private onResourceChange(args: CustomEvent<IResourceChangeEventArgs>) {
1031+
this._defaultLocale = args.detail.newLocale;
1032+
this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
1033+
this._localeWeekStart = getLocaleFirstDayOfWeek(this.locale);
1034+
}
10281035
}

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ let NEXT_ID = 0;
7474
templateUrl: 'calendar.component.html',
7575
imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxDateFormatterPipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
7676
})
77-
export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
77+
export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit {
7878
/**
7979
* @hidden
8080
* @internal
@@ -512,6 +512,10 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
512512
currentValue: this.viewDate
513513
});
514514
});
515+
516+
this._destroyRef.onDestroy(() => {
517+
this.keyboardNavigation.detachKeyboardHandlers();
518+
});
515519
}
516520

517521
protected onWrapperFocus(_event: FocusEvent) {
@@ -1051,14 +1055,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
10511055
this.activeDate = outOfRange ? date : target.native;
10521056
}
10531057

1054-
/**
1055-
* @hidden
1056-
* @internal
1057-
*/
1058-
public ngOnDestroy(): void {
1059-
this.keyboardNavigation.detachKeyboardHandlers();
1060-
}
1061-
10621058
/**
10631059
* @hidden
10641060
* @internal

projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import {
1010
HostBinding,
1111
InjectionToken,
1212
Inject,
13+
inject,
14+
DestroyRef,
1315
} from "@angular/core";
1416
import { noop } from "rxjs";
1517
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -21,8 +23,8 @@ import {
2123
import { CalendarDay, DayInterval } from "../common/model";
2224
import { getNextActiveDate, isDateInRanges } from "./helpers";
2325
import { DateRangeType } from "../../core/dates";
24-
import { isDate } from "../../core/utils";
25-
import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
26+
import { isDate, onResourceChangeHandle } from "../../core/utils";
27+
import { getCurrentI18n, getI18nManager, IResourceChangeEventArgs } from 'igniteui-i18n-core';
2628

2729
export enum Direction {
2830
NEXT = 1,
@@ -123,11 +125,8 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
123125
*/
124126
protected _defaultLocale;
125127

126-
/**
127-
* @hidden
128-
* @internal
129-
*/
130-
private _date = new Date();
128+
private _date = new Date();
129+
private _destroyRef = inject(DestroyRef);
131130

132131
/**
133132
* @hidden
@@ -185,10 +184,7 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
185184
}
186185

187186
constructor(@Inject(DAY_INTERVAL_TOKEN) protected dayInterval?: DayInterval) {
188-
this._defaultLocale = getCurrentI18n();
189-
getI18nManager().onResourceChange((args: ResourceChangeEventArgs) => {
190-
this._defaultLocale = args.newLocale;
191-
});
187+
this.initLocale();
192188
}
193189

194190
/**
@@ -342,4 +338,11 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
342338
* @hidden
343339
*/
344340
protected abstract get range(): Date[];
341+
342+
private initLocale() {
343+
this._defaultLocale = getCurrentI18n();
344+
onResourceChangeHandle(this._destroyRef, (args: CustomEvent<IResourceChangeEventArgs>) => {
345+
this._defaultLocale = args.detail.newLocale;
346+
}, this);
347+
}
345348
}

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ let NEXT_ID = 0;
4646
IgxYearsViewComponent,
4747
]
4848
})
49-
export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements OnInit, AfterViewInit, OnDestroy {
49+
export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements OnInit, AfterViewInit {
5050
/**
5151
* Sets/gets the `id` of the month picker.
5252
* If not set, the `id` will have value `"igx-month-picker-0"`.
@@ -340,6 +340,10 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
340340
currentValue: this.viewDate
341341
});
342342
});
343+
344+
this._destroyRef.onDestroy(() => {
345+
this.keyboardNavigation.detachKeyboardHandlers();
346+
});
343347
}
344348

345349
protected onWrapperFocus(event: FocusEvent) {
@@ -448,14 +452,6 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
448452
}
449453
}
450454

451-
/**
452-
* @hidden
453-
* @internal
454-
*/
455-
public ngOnDestroy(): void {
456-
this.keyboardNavigation.detachKeyboardHandlers();
457-
}
458-
459455
/**
460456
* @hidden
461457
* @internal

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-br
2828
import { merge, Subject } from 'rxjs';
2929
import { takeUntil } from 'rxjs/operators';
3030
import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18n/carousel-resources';
31-
import { first, IBaseEventArgs, last, PlatformUtil } from '../core/utils';
31+
import { first, IBaseEventArgs, last, onResourceChangeHandle, PlatformUtil } from '../core/utils';
3232
import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
3333
import { AnimationService } from '../services/animation/animation';
3434
import { Direction, IgxCarouselComponentBase } from './carousel-base';
@@ -40,7 +40,6 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
4040
import { HammerGesturesManager } from '../core/touch';
4141
import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
4242
import { IgxDirectionality } from '../services/direction/directionality';
43-
import { getI18nManager } from 'igniteui-i18n-core';
4443

4544
let NEXT_ID = 0;
4645

@@ -578,9 +577,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
578577
) {
579578
super(animationService, cdr);
580579
this.differ = this.iterableDiffers.find([]).create(null);
581-
getI18nManager().onResourceChange(() => {
580+
onResourceChangeHandle(this.destroy$, () => {
582581
this._defaultResourceStrings = getCurrentResourceStrings(CarouselResourceStringsEN, false);
583-
});
582+
}, this);
584583
}
585584

586585
/** @hidden */

projects/igniteui-angular/src/lib/chips/chip.component.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,13 @@ import {
1717
DOCUMENT
1818
} from '@angular/core';
1919
import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive';
20-
import { IBaseEventArgs } from '../core/utils';
20+
import { IBaseEventArgs, onResourceChangeHandle } from '../core/utils';
2121
import { ChipResourceStringsEN, IChipResourceStrings } from '../core/i18n/chip-resources';
2222
import { Subject } from 'rxjs';
2323
import { IgxIconComponent } from '../icon/icon.component';
2424
import { NgClass, NgTemplateOutlet } from '@angular/common';
2525
import { getCurrentResourceStrings } from '../core/i18n/resources';
2626
import { Size } from '../grids/common/enums';
27-
import { getI18nManager } from 'igniteui-i18n-core';
2827

2928
export const IgxChipTypeVariant = {
3029
PRIMARY: 'primary',
@@ -613,9 +612,9 @@ export class IgxChipComponent implements OnInit, OnDestroy {
613612
private ref: ElementRef<HTMLElement>,
614613
private renderer: Renderer2,
615614
@Inject(DOCUMENT) public document: any) {
616-
getI18nManager().onResourceChange(() => {
615+
onResourceChangeHandle(this.destroy$, () => {
617616
this._defaultResourceStrings = getCurrentResourceStrings(ChipResourceStringsEN, false);
618-
});
617+
}, this);
619618
}
620619

621620
/**

projects/igniteui-angular/src/lib/combo/combo.common.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import { caseSensitive } from '@igniteui/material-icons-extended';
3030
import { noop, Subject } from 'rxjs';
3131
import { takeUntil } from 'rxjs/operators';
3232
import { IgxSelectionAPIService } from '../core/selection';
33-
import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, rem } from '../core/utils';
33+
import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, onResourceChangeHandle, rem } from '../core/utils';
3434
import { SortingDirection } from '../data-operations/sorting-strategy';
3535
import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
3636
import { IgxIconService } from '../icon/icon.service';
@@ -47,7 +47,6 @@ import { IComboItemAdditionEvent, IComboSearchInputEventArgs } from './public_ap
4747
import { ComboResourceStringsEN, IComboResourceStrings } from '../core/i18n/combo-resources';
4848
import { getCurrentResourceStrings } from '../core/i18n/resources';
4949
import { isEqual } from 'lodash-es';
50-
import { getI18nManager } from 'igniteui-i18n-core';
5150

5251
export const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken<IgxComboBase>('IgxComboComponentToken');
5352

@@ -977,9 +976,9 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
977976
@Optional() protected _injector: Injector,
978977
@Optional() @Inject(IgxIconService) protected _iconService?: IgxIconService,
979978
) {
980-
getI18nManager().onResourceChange(() => {
979+
onResourceChangeHandle(this.destroy$, () => {
981980
this._defaultResourceStrings = getCurrentResourceStrings(ComboResourceStringsEN, false);
982-
});
981+
}, this);
983982
}
984983

985984
public ngAfterViewChecked() {

0 commit comments

Comments
 (0)