fix(i18n): Fix setting partial resources not filling the rest per component.

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

@@ -4,6 +4,7 @@ import { TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxIconComponent } from 'igniteui-angular/icon';
+import { ActionStripResourceStringsEN, changei18n } from 'igniteui-angular/core';
 import { wait } from '../../../test-utils/ui-interactions.spec';
 
 const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
@@ -153,6 +154,41 @@ describe('igxActionStrip', () => {
             expect(dropDownList.nativeElement.getAttribute('aria-hidden')).toBe('true');
         });
     });
+
+    describe('Resource Strings', () => {
+        it('should update resource strings when global i18n changes and no custom strings are set', () => {
+            const fix = TestBed.createComponent(IgxActionStripMenuTestingComponent);
+            fix.detectChanges();
+            actionStrip = fix.componentInstance.actionStrip;
+
+            try {
+                changei18n({ igx_action_strip_button_more_title: 'More Options' });
+                fix.detectChanges();
+
+                expect(actionStrip.resourceStrings.igx_action_strip_button_more_title).toBe('More Options');
+            } finally {
+                changei18n(ActionStripResourceStringsEN);
+            }
+        });
+
+        it('should preserve custom resource strings when global i18n changes', () => {
+            const fix = TestBed.createComponent(IgxActionStripMenuTestingComponent);
+            fix.detectChanges();
+            actionStrip = fix.componentInstance.actionStrip;
+
+            actionStrip.resourceStrings = { igx_action_strip_button_more_title: 'Custom More' };
+            fix.detectChanges();
+
+            try {
+                changei18n({ igx_action_strip_button_more_title: 'Global More' });
+                fix.detectChanges();
+
+                expect(actionStrip.resourceStrings.igx_action_strip_button_more_title).toBe('Custom More');
+            } finally {
+                changei18n(ActionStripResourceStringsEN);
+            }
+        });
+    });
 });
 
 @Component({

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

@@ -158,11 +158,12 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
      */
     @Input()
     public set resourceStrings(value: IActionStripResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
 
     public get resourceStrings(): IActionStripResourceStrings {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
 
     /**
@@ -202,12 +203,14 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterViewIn
 
     private _destroyRef = inject(DestroyRef);
     private _resourceStrings: IActionStripResourceStrings = null;
+    private _customResourceStrings: IActionStripResourceStrings = null;
     private _defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
     private _originalParent!: HTMLElement;
 
     constructor() {
         onResourceChangeHandle(this._destroyRef, () => {
             this._defaultResourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN, false);
+            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
         }, this);
     }
 

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

@@ -3,6 +3,7 @@ import { TestBed, ComponentFixture, tick, fakeAsync, waitForAsync } from '@angul
 import { By } from '@angular/platform-browser';
 import { IgxBannerComponent } from './banner.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { BannerResourceStringsEN, changei18n } from 'igniteui-angular/core';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxBannerActionsDirective } from './banner.directives';
 import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card';
@@ -525,6 +526,52 @@ describe('igxBanner', () => {
         }));
     });
 
+    describe('Resource Strings', () => {
+        it('should return full resource strings when partial resourceStrings are set', () => {
+            const fix = TestBed.createComponent(SimpleBannerEventsComponent);
+            fix.detectChanges();
+            const banner = fix.componentInstance.banner;
+
+            banner.resourceStrings = { igx_banner_button_dismiss: 'Close' };
+            fix.detectChanges();
+
+            expect(banner.resourceStrings.igx_banner_button_dismiss).toBe('Close');
+        });
+
+        it('should update resource strings when global i18n changes and no custom strings are set', () => {
+            const fix = TestBed.createComponent(SimpleBannerEventsComponent);
+            fix.detectChanges();
+            const banner = fix.componentInstance.banner;
+
+            try {
+                changei18n({ igx_banner_button_dismiss: 'Dismiss Global' });
+                fix.detectChanges();
+
+                expect(banner.resourceStrings.igx_banner_button_dismiss).toBe('Dismiss Global');
+            } finally {
+                changei18n(BannerResourceStringsEN);
+            }
+        });
+
+        it('should preserve custom resource strings when global i18n changes', () => {
+            const fix = TestBed.createComponent(SimpleBannerEventsComponent);
+            fix.detectChanges();
+            const banner = fix.componentInstance.banner;
+
+            banner.resourceStrings = { igx_banner_button_dismiss: 'Custom Dismiss' };
+            fix.detectChanges();
+
+            try {
+                changei18n({ igx_banner_button_dismiss: 'Global Dismiss' });
+                fix.detectChanges();
+
+                expect(banner.resourceStrings.igx_banner_button_dismiss).toBe('Custom Dismiss');
+            } finally {
+                changei18n(BannerResourceStringsEN);
+            }
+        });
+    });
+
     const getBaseClassElements = <T>(fixture: ComponentFixture<T>) => {
         bannerElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_BANNER));
         bannerMessageElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_BANNER_MESSAGE));

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

@@ -155,11 +155,12 @@ export class IgxBannerComponent implements IToggleView {
      */
     @Input()
     public set resourceStrings(value: IBannerResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings =  Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
 
     public get resourceStrings(): IBannerResourceStrings {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
 
     /**
@@ -240,14 +241,16 @@ export class IgxBannerComponent implements IToggleView {
     private _destroyRef = inject(DestroyRef);
     private _expanded: boolean = false;
     private _shouldFireEvent: boolean = false;
-    private _bannerEvent: BannerEventArgs;
-    private _animationSettings: ToggleAnimationSettings;
+    private _bannerEvent!: BannerEventArgs;
+    private _animationSettings!: ToggleAnimationSettings;
     private _resourceStrings: IBannerResourceStrings = null;
+    private _customResourceStrings: IBannerResourceStrings = null;
     private _defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN);
 
     constructor() {
         onResourceChangeHandle(this._destroyRef, () => {
             this._defaultResourceStrings = getCurrentResourceStrings(BannerResourceStringsEN, false);
+            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
         }, this);
     }
 

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

@@ -256,6 +256,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     private _selection: CalendarSelection | string = CalendarSelection.SINGLE;
     private _resourceStrings: ICalendarResourceStrings = null;
+    private _customResourceStrings: ICalendarResourceStrings = null;
     private _defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN);
 
     /**
@@ -283,14 +284,15 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     @Input()
     public set resourceStrings(value: ICalendarResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
 
     /**
      * An accessor that returns the resource strings.
      */
     public get resourceStrings(): ICalendarResourceStrings {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
 
     /**
@@ -328,7 +330,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         this._locale = this.i18nFormatter.verifyLocale(value);
         // changing locale runtime needs to update the `weekStart` too
         this._localeWeekStart = this.i18nFormatter.getLocaleFirstDayOfWeek(this._locale);
-        this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false, this._locale);
+        this.updateResources(this._locale);
     }
 
     /**
@@ -1038,8 +1040,14 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     private onResourceChange(args: CustomEvent<IResourceChangeEventArgs>) {
         this._defaultLocale = args.detail.newLocale;
         if (!this._locale) {
-            this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
+            // Avoid unnecessary fetch of resources, since they should be already retrieved when setting custom locale.
+            this.updateResources();
         }
         this._localeWeekStart = this.i18nFormatter.getLocaleFirstDayOfWeek(this.locale);
     }
+
+    private updateResources(locale?: string)    {
+        this._defaultResourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false, locale);
+        this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
+    }
 }

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

@@ -1,5 +1,5 @@
 import { Component, ViewChild, TemplateRef, ChangeDetectionStrategy, ElementRef } from '@angular/core';
-import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
     IgxCarouselComponent,
@@ -10,6 +10,7 @@ import { IgxSlideComponent } from './slide.component';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { CarouselIndicatorsOrientation, CarouselAnimationType } from './enums';
 import { UIInteractions, wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
+import { CarouselResourceStringsEN, changei18n } from 'igniteui-angular/core';
 
 describe('Carousel', () => {
     let fixture;
@@ -1046,6 +1047,49 @@ describe('Carousel', () => {
             expect(carousel.current).toEqual(2);
         });
     });
+
+    describe('Resource Strings', () => {
+        let fix: ComponentFixture<CarouselTestComponent>;
+
+        beforeEach(waitForAsync(() => {
+            TestBed.configureTestingModule({
+                imports: [NoopAnimationsModule, CarouselTestComponent]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(CarouselTestComponent);
+            fix.detectChanges();
+            carousel = fix.componentInstance.carousel;
+        });
+
+        it('should return full resource strings when partial resourceStrings are set', () => {
+            carousel.resourceStrings = { igx_carousel_of: 'out of' };
+            fix.detectChanges();
+
+            expect(carousel.resourceStrings.igx_carousel_of).toBe('out of');
+            expect(carousel.resourceStrings.igx_carousel_slide).toBe('slide');
+            expect(carousel.resourceStrings.igx_carousel_previous_slide).toBe('previous slide');
+            expect(carousel.resourceStrings.igx_carousel_next_slide).toBe('next slide');
+        });
+
+        it('should update non-overridden resource strings when global i18n changes', () => {
+            carousel.resourceStrings = { igx_carousel_of: 'custom of' };
+            fix.detectChanges();
+
+            try {
+                changei18n({ igx_carousel_slide: 'foto' });
+                fix.detectChanges();
+
+                expect(carousel.resourceStrings.igx_carousel_of).toBe('custom of');
+                expect(carousel.resourceStrings.igx_carousel_slide).toBe('foto');
+                expect(carousel.resourceStrings.igx_carousel_previous_slide).toBe('previous slide');
+                expect(carousel.resourceStrings.igx_carousel_next_slide).toBe('next slide');
+            } finally {
+                changei18n(CarouselResourceStringsEN);
+            }
+        });
+    });
 });
 
 class HelperTestFunctions {

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

@@ -379,11 +379,12 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      * @hidden
      * @internal
      */
-    public stoppedByInteraction: boolean;
-    protected override currentItem: IgxSlideComponent;
-    protected override previousItem: IgxSlideComponent;
-    private _interval: number;
+    public stoppedByInteraction!: boolean;
+    protected override currentItem!: IgxSlideComponent;
+    protected override previousItem!: IgxSlideComponent;
+    private _interval!: number;
     private _resourceStrings: ICarouselResourceStrings = null;
+    private _customResourceStrings: ICarouselResourceStrings = null;
     private _defaultResourceStrings = getCurrentResourceStrings(CarouselResourceStringsEN);
     private lastInterval: any;
     private playing: boolean;
@@ -399,14 +400,15 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      */
     @Input()
     public set resourceStrings(value: ICarouselResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
 
     /**
      * An accessor that returns the resource strings.
      */
     public get resourceStrings(): ICarouselResourceStrings {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
 
     /** @hidden */
@@ -549,6 +551,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         this.differ = this.iterableDiffers.find([]).create(null);
         onResourceChangeHandle(this.destroy$, () => {
             this._defaultResourceStrings = getCurrentResourceStrings(CarouselResourceStringsEN, false);
+            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
         }, this);
     }
 

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

@@ -345,14 +345,15 @@ export class IgxChipComponent implements OnInit, OnDestroy {
      */
     @Input()
     public set resourceStrings(value: IChipResourceStrings) {
-        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+        this._resourceStrings = value;
+        this._customResourceStrings = Object.assign({}, this._defaultResourceStrings, this._resourceStrings);
     }
 
     /**
      * An accessor that returns the resource strings.
      */
     public get resourceStrings(): IChipResourceStrings {
-        return this._resourceStrings || this._defaultResourceStrings;
+        return this._resourceStrings ? this._customResourceStrings : this._defaultResourceStrings;
     }
 
     /**
@@ -609,11 +610,13 @@ export class IgxChipComponent implements OnInit, OnDestroy {
     protected _movedWhileRemoving = false;
     protected computedStyles;
     private _resourceStrings: IChipResourceStrings = null;
+    private _customResourceStrings: IChipResourceStrings = null;
     private _defaultResourceStrings = getCurrentResourceStrings(ChipResourceStringsEN);
 
     constructor() {
         onResourceChangeHandle(this.destroy$, () => {
             this._defaultResourceStrings = getCurrentResourceStrings(ChipResourceStringsEN, false);
+            this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
         }, this);
     }