refactor(drp): polish resource strings

ddaribo · ddaribo · commit eebb4700b4db · 2025-05-16T14:06:35.000+03:00
diff --git a/src/components/common/i18n/date-range-picker.resources.ts b/src/components/common/i18n/date-range-picker.resources.ts
@@ -1,5 +1,11 @@
+import {
+  IgcCalendarResourceStringEN,
+  type IgcCalendarResourceStrings,
+} from './calendar.resources';
+
 /* blazorSuppress */
-export interface IgcDateRangePickerResourceStrings {
+export interface IgcDateRangePickerResourceStrings
+  extends IgcCalendarResourceStrings {
   separator: string;
   done: string;
   cancel: string;
@@ -18,4 +24,5 @@ export const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStri
     last30Days: 'Last 30 days',
     currentMonth: 'Current month',
     yearToDate: 'Year to date',
+    ...IgcCalendarResourceStringEN,
   };
diff --git a/src/components/date-range-picker/date-range-picker.common.spec.ts b/src/components/date-range-picker/date-range-picker.common.spec.ts
@@ -287,34 +287,60 @@ describe('Date range picker - common tests for single and two inputs mode', () =
         expect(picker.inputFormat).to.equal('dd-MM-yyyy');
         expect(picker.displayFormat).to.equal(picker.inputFormat);
       });
-    });
 
-    it('should expose the default strings for localization', async () => {
-      picker.useTwoInputs = true;
-      picker.resourceStrings.done = 'Done - localized';
-      picker.resourceStrings.cancel = 'Cancel - localized';
-      picker.resourceStrings.separator = 'Separator - localized';
-      picker.mode = 'dialog';
-      picker.open = true;
-      await elementUpdated(picker);
+      it('should expose the default strings for localization', async () => {
+        picker.useTwoInputs = true;
+        picker.resourceStrings.done = 'Done - localized';
+        picker.resourceStrings.cancel = 'Cancel - localized';
+        picker.resourceStrings.separator = 'Separator - localized';
+        picker.mode = 'dialog';
+        picker.open = true;
+        await elementUpdated(picker);
 
-      const doneBtn = picker.shadowRoot!.querySelector(
-        'igc-button[slot="footer"]:last-of-type'
-      ) as HTMLButtonElement;
-      expect(doneBtn.innerText).to.equal('Done - localized');
+        const doneBtn = picker.shadowRoot!.querySelector(
+          'igc-button[slot="footer"]:last-of-type'
+        ) as HTMLButtonElement;
+        expect(doneBtn.innerText).to.equal('Done - localized');
 
-      const cancelBtn = picker.shadowRoot!.querySelector(
-        'igc-button[slot="footer"]'
-      ) as HTMLButtonElement;
-      expect(cancelBtn.innerText).to.equal('Cancel - localized');
+        const cancelBtn = picker.shadowRoot!.querySelector(
+          'igc-button[slot="footer"]'
+        ) as HTMLButtonElement;
+        expect(cancelBtn.innerText).to.equal('Cancel - localized');
 
-      picker.open = false;
-      await elementUpdated(picker);
-      const separator = picker.shadowRoot!.querySelector(
-        '[part="separator"]'
-      ) as any;
-      expect(separator?.innerText).to.equal('Separator - localized');
+        picker.open = false;
+        await elementUpdated(picker);
+        const separator = picker.shadowRoot!.querySelector(
+          '[part="separator"]'
+        ) as any;
+        expect(separator?.innerText).to.equal('Separator - localized');
+      });
+
+      it('should set the resource strings of the predefined-ranges-area component', async () => {
+        picker.resourceStrings.currentMonth = 'Current month - localized';
+        picker.resourceStrings.nextMonth = 'Next month - localized';
+        picker.resourceStrings.last30Days = 'Last 30 days - localized';
+        picker.resourceStrings.yearToDate = 'Year to date - localized';
+        picker.usePredefinedRanges = true;
+        await elementUpdated(picker);
+
+        const predefinedArea = picker.renderRoot.querySelector(
+          IgcPredefinedRangesAreaComponent.tagName
+        );
+        expect(predefinedArea?.resourceStrings.currentMonth).to.equal(
+          'Current month - localized'
+        );
+        expect(predefinedArea?.resourceStrings.nextMonth).to.equal(
+          'Next month - localized'
+        );
+        expect(predefinedArea?.resourceStrings.last30Days).to.equal(
+          'Last 30 days - localized'
+        );
+        expect(predefinedArea?.resourceStrings.yearToDate).to.equal(
+          'Year to date - localized'
+        );
+      });
     });
+
     describe('Methods', () => {
       it('should open/close the picker on invoking show/hide/toggle and not emit events', async () => {
         const eventSpy = spy(picker, 'emitEvent');
diff --git a/src/components/date-range-picker/date-range-picker.ts b/src/components/date-range-picker/date-range-picker.ts
@@ -31,10 +31,6 @@ import {
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import {
-  IgcCalendarResourceStringEN,
-  type IgcCalendarResourceStrings,
-} from '../common/i18n/calendar.resources.js';
 import {
   type IgcDateRangePickerResourceStrings,
   IgcDateRangePickerResourceStringsEN,
@@ -341,11 +337,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   /** The resource strings of the date range picker. */
   @property({ attribute: false })
-  public resourceStrings: IgcCalendarResourceStrings &
-    IgcDateRangePickerResourceStrings = {
-    ...IgcCalendarResourceStringEN,
-    ...IgcDateRangePickerResourceStringsEN,
-  };
+  public resourceStrings: IgcDateRangePickerResourceStrings =
+    IgcDateRangePickerResourceStringsEN;
 
   // #region Input-related properties
 
@@ -1093,7 +1086,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
               <igc-predefined-ranges-area
                 .usePredefinedRanges=${this.usePredefinedRanges}
                 .customRanges=${this.customRanges}
-                @range-select=${this._selectPredefinedRange}
+                .resourceStrings=${this.resourceStrings}
               >
               </igc-predefined-ranges-area>
               ${this._renderActions()}
@@ -1115,7 +1108,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
             <igc-predefined-ranges-area
               .usePredefinedRanges=${this.usePredefinedRanges}
               .customRanges=${this.customRanges}
-              @range-select=${this._selectPredefinedRange}
+              .resourceStrings=${this.resourceStrings}
             >
             </igc-predefined-ranges-area>
             <igc-button
diff --git a/src/components/date-range-picker/predefined-ranges-area.ts b/src/components/date-range-picker/predefined-ranges-area.ts
@@ -3,37 +3,74 @@ import { property } from 'lit/decorators.js';
 import { CalendarDay } from '../calendar/model.js';
 import IgcChipComponent from '../chip/chip.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { IgcDateRangePickerResourceStringsEN } from '../common/i18n/date-range-picker.resources.js';
+import {
+  type IgcDateRangePickerResourceStrings,
+  IgcDateRangePickerResourceStringsEN,
+} from '../common/i18n/date-range-picker.resources.js';
 import type { CustomDateRange } from './date-range-picker.js';
 
+/**
+ * The predefined ranges area component is used within the `igc-date-range picker` element and it
+ * displays a set of chips with predefined date ranges. The component allows users to quickly select
+ * a predefined date range value. Users can also provide custom ranges to be displayed as chips.
+ *
+ * @element igc-predefined-ranges-area
+ */
 export default class IgcPredefinedRangesAreaComponent extends LitElement {
   public static readonly tagName = 'igc-predefined-ranges-area';
 
+  /* blazorSuppress */
+  public static register() {
+    registerComponent(IgcPredefinedRangesAreaComponent, IgcChipComponent);
+  }
+
+  /**
+   * Whether the control will show chips with predefined ranges.
+   * @attr
+   */
+  @property({
+    reflect: true,
+    type: Boolean,
+    attribute: 'use-predefined-ranges',
+  })
+  public usePredefinedRanges = false;
+
+  /**
+   * Renders chips with custom ranges based on the elements of the array.
+   */
+  @property({ type: Array })
+  public customRanges: CustomDateRange[] = [];
+
+  /** The resource strings of the date range area component. */
+  @property({ attribute: false })
+  public resourceStrings: IgcDateRangePickerResourceStrings =
+    IgcDateRangePickerResourceStringsEN;
+
   private _predefinedRanges: CustomDateRange[] = [
     {
-      label: IgcDateRangePickerResourceStringsEN.last7Days,
+      label: this.resourceStrings.last7Days,
       dateRange: {
         start: CalendarDay.today.add('day', -7).native,
         end: CalendarDay.today.native,
       },
     },
     {
-      label: IgcDateRangePickerResourceStringsEN.currentMonth,
+      label: this.resourceStrings.currentMonth,
       dateRange: {
         start: CalendarDay.today.set({ date: 1 }).native,
         end: CalendarDay.today.set({ date: 1 }).add('month', 1).add('day', -1)
           .native,
       },
     },
     {
-      label: IgcDateRangePickerResourceStringsEN.last30Days,
+      label: this.resourceStrings.last30Days,
       dateRange: {
         start: CalendarDay.today.add('day', -29).native,
         end: CalendarDay.today.native,
       },
     },
     {
-      label: IgcDateRangePickerResourceStringsEN.yearToDate,
+      label: this.resourceStrings.yearToDate,
       dateRange: {
         start: CalendarDay.today.set({
           year: CalendarDay.today.year,
@@ -45,28 +82,6 @@ export default class IgcPredefinedRangesAreaComponent extends LitElement {
     },
   ];
 
-  /* blazorSuppress */
-  public static register() {
-    registerComponent(IgcPredefinedRangesAreaComponent, IgcChipComponent);
-  }
-
-  /**
-   * Whether the control will show chips with predefined ranges.
-   * @attr
-   */
-  @property({
-    reflect: true,
-    type: Boolean,
-    attribute: 'use-predefined-ranges',
-  })
-  public usePredefinedRanges = false;
-
-  /**
-   * Renders chips with custom ranges based on the elements of the array.
-   */
-  @property({ type: Array })
-  public customRanges: CustomDateRange[] = [];
-
   private get _allRanges(): CustomDateRange[] {
     return this.usePredefinedRanges
       ? [...this._predefinedRanges, ...this.customRanges]
