Merge branch 'master' into ikitanov/fix-16091

IvanKitanov17 · web-flow · commit ab2d940af01b · 2025-08-20T17:07:55.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 20.1.0
 ### New Features
 `IgxDateRangePicker`
@@ -13,6 +14,15 @@ All notable changes for each version of this project will be documented in this
     this.carousel.select(2, Direction.NEXT);
     ```
 
+- `IgxDateRangePicker`
+  - Added new properties:
+      - `usePredefinedRanges` - Whether to render built-in predefined ranges 
+      - `customRanges` - Allows the user to provide custom ranges rendered as chips
+      - `resourceStrings` - Allows the user to provide set of resource strings 
+        
+- `IgxPredefinedRangesAreaComponent`
+  - Added new component for rendering the predefined or custom ranges inside the calendar of the `IgxDateRangePicker`
+
 - `IgxOverlay`
     - Position Settings now accept a new optional `offset` input property of type `number`. Used to set the offset of the element from the target in pixels.
 
@@ -21,6 +31,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxTooltipTarget`
     - Introduced several new properties to enhance customization of tooltip content and behavior. Those include `positionSettings`, `hasArrow`, `sticky`, `closeButtonTemplate`. For detailed usage and examples, please refer to the Tooltip [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md).
 
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsBG = {
     igx_date_range_picker_date_separator: 'до',
     igx_date_range_picker_done_button: 'Завърши',
     igx_date_range_picker_cancel_button: 'Отмени'
+    igx_date_range_picker_last7Days: 'Последните 7 дни',
+    igx_date_range_picker_currentMonth: 'Текущ месец',
+    igx_date_range_picker_last30Days: 'Последните 30 дни',
+    igx_date_range_picker_yearToDate: 'От началото на годината'
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsCS = {
     igx_date_range_picker_date_separator: 'na',
     igx_date_range_picker_done_button: 'Hotovo',
     igx_date_range_picker_cancel_button: 'Zrušit'
+    igx_date_range_picker_last7Days: 'Posledních 7 dní',
+    igx_date_range_picker_currentMonth: 'Tento měsíc',
+    igx_date_range_picker_last30Days: 'Posledních 30 dní',
+    igx_date_range_picker_yearToDate: 'Od začátku roku',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsDA = {
     igx_date_range_picker_date_separator: 'till',
     igx_date_range_picker_done_button: 'Færdigt',
     igx_date_range_picker_cancel_button: 'Annuller'
+    igx_date_range_picker_last7Days: 'Sidste 7 dage',
+    igx_date_range_picker_currentMonth: 'Denne måned',
+    igx_date_range_picker_last30Days: 'Sidste 30 dage',
+    igx_date_range_picker_yearToDate: 'Året til dato',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsDE = {
     igx_date_range_picker_date_separator: 'bis',
     igx_date_range_picker_done_button: 'Fertig',
     igx_date_range_picker_cancel_button: 'Abbrechen'
+    igx_date_range_picker_last7Days: 'Letzte 7 Tage',
+    igx_date_range_picker_currentMonth: 'Aktueller Monat',
+    igx_date_range_picker_last30Days: 'Letzte 30 Tage',
+    igx_date_range_picker_yearToDate: 'Jahr bis heute',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsES = {
     igx_date_range_picker_date_separator: 'a',
     igx_date_range_picker_done_button: 'Listo',
     igx_date_range_picker_cancel_button: 'Cancelar'
+    igx_date_range_picker_last7Days: 'Últimos 7 días',
+    igx_date_range_picker_currentMonth: 'Mes actual',
+    igx_date_range_picker_last30Days: 'Últimos 30 días',
+    igx_date_range_picker_yearToDate: 'Año hasta la fecha',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsFR = {
     igx_date_range_picker_date_separator: 'à',
     igx_date_range_picker_done_button: 'Terminée',
     igx_date_range_picker_cancel_button: 'Annuler'
+    igx_date_range_picker_last7Days: '7 derniers jours',
+    igx_date_range_picker_currentMonth: 'Mois en cours',
+    igx_date_range_picker_last30Days: '30 derniers jours',
+    igx_date_range_picker_yearToDate: 'Année à ce jour',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsHU = {
     igx_date_range_picker_date_separator: '-',
     igx_date_range_picker_done_button: 'Kész',
     igx_date_range_picker_cancel_button: 'Mégse'
+    igx_date_range_picker_last7Days: 'Az elmúlt 7 nap',
+    igx_date_range_picker_currentMonth: 'Aktuális hónap',
+    igx_date_range_picker_last30Days: 'Az elmúlt 30 nap',
+    igx_date_range_picker_yearToDate: 'Év elejétől napjainkig',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsIT = {
     igx_date_range_picker_date_separator: 'a',
     igx_date_range_picker_done_button: 'Fine',
     igx_date_range_picker_cancel_button: 'Annulla'
+    igx_date_range_picker_last7Days: 'Ultimi 7 giorni',
+    igx_date_range_picker_currentMonth: 'Mese corrente',
+    igx_date_range_picker_last30Days: 'Ultimi 30 giorni',
+    igx_date_range_picker_yearToDate: 'Anno fino ad oggi',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsJA = {
     igx_date_range_picker_date_separator: '～',
     igx_date_range_picker_done_button: '完了',
     igx_date_range_picker_cancel_button: 'キャンセル'
+    igx_date_range_picker_last7Days: '過去7日間',
+    igx_date_range_picker_currentMonth: '今月',
+    igx_date_range_picker_last30Days: '過去30日間',
+    igx_date_range_picker_yearToDate: '年初来',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsKO = {
     igx_date_range_picker_date_separator: '에',
     igx_date_range_picker_done_button: '완료',
     igx_date_range_picker_cancel_button: '취소'
+    igx_date_range_picker_last7Days: '지난 7일',
+    igx_date_range_picker_currentMonth: '이번 달',
+    igx_date_range_picker_last30Days: '지난 30일',
+    igx_date_range_picker_yearToDate: '올해 초부터 현재까지',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsNB = {
     igx_date_range_picker_date_separator: 'til',
     igx_date_range_picker_done_button: 'Ferdig',
     igx_date_range_picker_cancel_button: 'Avbryt'
+    igx_date_range_picker_last7Days: 'Siste 7 dager',
+    igx_date_range_picker_currentMonth: 'Denne måneden',
+    igx_date_range_picker_last30Days: 'Siste 30 dager',
+    igx_date_range_picker_yearToDate: 'Året til dato',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsNL = {
     igx_date_range_picker_date_separator: 'tot',
     igx_date_range_picker_done_button: 'Gereed',
     igx_date_range_picker_cancel_button: 'Annuleren'
+    igx_date_range_picker_last7Days: 'Laatste 7 dagen',
+    igx_date_range_picker_currentMonth: 'Huidige maand',
+    igx_date_range_picker_last30Days: 'Laatste 30 dagen',
+    igx_date_range_picker_yearToDate: 'Jaar tot datum',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsPL = {
     igx_date_range_picker_date_separator: 'do',
     igx_date_range_picker_done_button: 'Gotowe',
     igx_date_range_picker_cancel_button: 'Anuluj'
+    igx_date_range_picker_last7Days: 'Ostatnie 7 dni',
+    igx_date_range_picker_currentMonth: 'Bieżący miesiąc',
+    igx_date_range_picker_last30Days: 'Ostatnie 30 dni',
+    igx_date_range_picker_yearToDate: 'Od początku roku',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsPT = {
     igx_date_range_picker_date_separator: 'para',
     igx_date_range_picker_done_button: 'Concluído',
     igx_date_range_picker_cancel_button: 'Cancelar'
+    igx_date_range_picker_last7Days: 'Últimos 7 dias',
+    igx_date_range_picker_currentMonth: 'Mês atual',
+    igx_date_range_picker_last30Days: 'Últimos 30 dias',
+    igx_date_range_picker_yearToDate: 'Ano até hoje',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsRO = {
     igx_date_range_picker_date_separator: 'la',
     igx_date_range_picker_done_button: 'Gata',
     igx_date_range_picker_cancel_button: 'Anulează'
+    igx_date_range_picker_last7Days: 'Ultimele 7 zile',
+    igx_date_range_picker_currentMonth: 'Luna curentă',
+    igx_date_range_picker_last30Days: 'Ultimele 30 de zile',
+    igx_date_range_picker_yearToDate: 'De la începutul anului',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsSV = {
     igx_date_range_picker_date_separator: 'till',
     igx_date_range_picker_done_button: 'Färdig',
     igx_date_range_picker_cancel_button: 'Avbryt'
+    igx_date_range_picker_last7Days: 'Senaste 7 dagarna',
+    igx_date_range_picker_currentMonth: 'Aktuell månad',
+    igx_date_range_picker_last30Days: 'Senaste 30 dagarna',
+    igx_date_range_picker_yearToDate: 'Året hittills',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsTR = {
     igx_date_range_picker_date_separator: '-',
     igx_date_range_picker_done_button: 'Bitti',
     igx_date_range_picker_cancel_button: 'İptal'
+    igx_date_range_picker_last7Days: 'Son 7 gün',
+    igx_date_range_picker_currentMonth: 'Geçerli ay',
+    igx_date_range_picker_last30Days: 'Son 30 gün',
+    igx_date_range_picker_yearToDate: 'Yılbaşı itibarıyla',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsZHHANS = {
     igx_date_range_picker_date_separator: '至',
     igx_date_range_picker_done_button: '完成',
     igx_date_range_picker_cancel_button: '取消'
+    igx_date_range_picker_last7Days: '最近7天',
+    igx_date_range_picker_currentMonth: '本月',
+    igx_date_range_picker_last30Days: '最近30天',
+    igx_date_range_picker_yearToDate: '年初至今',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/date-range-picker-resources.ts
@@ -8,4 +8,8 @@ export const DateRangePickerResourceStringsZHHANT = {
     igx_date_range_picker_date_separator: '到',
     igx_date_range_picker_done_button: '完成',
     igx_date_range_picker_cancel_button: '取消'
+    igx_date_range_picker_last7Days: '最近7天',
+    igx_date_range_picker_currentMonth: '本月',
+    igx_date_range_picker_last30Days: '最近30天',
+    igx_date_range_picker_yearToDate: '年初至今',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;
diff --git a/projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts
@@ -3,9 +3,18 @@ export interface IDateRangePickerResourceStrings {
     igx_date_range_picker_done_button?: string;
     igx_date_range_picker_cancel_button?: string;
 };
+    igx_date_range_picker_last7Days?: string;
+    igx_date_range_picker_currentMonth?: string;
+    igx_date_range_picker_last30Days?: string;
+    igx_date_range_picker_yearToDate?: string;
+}
 
 export const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings = {
     igx_date_range_picker_date_separator: 'to',
     igx_date_range_picker_done_button: 'Done',
     igx_date_range_picker_cancel_button: 'Cancel'
+    igx_date_range_picker_last7Days: 'Last 7 Days',
+    igx_date_range_picker_currentMonth: 'Current Month',
+    igx_date_range_picker_last30Days: 'Last 30 Days',
+    igx_date_range_picker_yearToDate: 'Year to Date',
 };
diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html
@@ -38,6 +38,16 @@
 
 <igx-calendar></igx-calendar>
 @if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {
+
+ @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){
+        <igx-predefined-ranges-area
+            [usePredefinedRanges]="usePredefinedRanges"
+            [customRanges]="customRanges"
+            [resourceStrings]="resourceStrings"
+            (rangeSelect)="rangeSelected.emit($event)">
+        </igx-predefined-ranges-area>
+    }
+@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) {
     <igx-divider></igx-divider>
 }
 @if (pickerActions?.template || (closeButtonLabel || cancelButtonLabel || todayButtonLabel)) {
diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts
@@ -13,6 +13,9 @@ import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
 import { IgxPickerActionsDirective } from '../picker-icons.common';
 import { IgxCalendarComponent } from '../../calendar/calendar.component';
 import { IgxDividerDirective } from "../../directives/divider/divider.directive";
+import { CustomDateRange, DateRange } from '../../date-range-picker/date-range-picker-inputs.common';
+import { IDateRangePickerResourceStrings } from '../../core/i18n/date-range-picker-resources';
+import { IgxPredefinedRangesAreaComponent } from '../../date-range-picker/predefined-ranges/predefined-ranges-area.component';
 
 /** @hidden */
 @Component({
@@ -25,6 +28,7 @@ import { IgxDividerDirective } from "../../directives/divider/divider.directive"
         IgxCalendarComponent,
         NgTemplateOutlet,
         IgxDividerDirective,
+        IgxPredefinedRangesAreaComponent
     ]
 })
 export class IgxCalendarContainerComponent {
@@ -40,6 +44,10 @@ export class IgxCalendarContainerComponent {
     @Output()
     public todaySelection = new EventEmitter<IBaseEventArgs>();
 
+    @Output()
+    public rangeSelected = new EventEmitter<DateRange>();
+
+
     @HostBinding('class.igx-date-picker')
     public styleClass = 'igx-date-picker';
 
@@ -48,6 +56,9 @@ export class IgxCalendarContainerComponent {
         return this.mode === PickerInteractionMode.DropDown;
     }
 
+    public usePredefinedRanges = false;
+    public customRanges: CustomDateRange[] = [];
+    public resourceStrings!: IDateRangePickerResourceStrings;
     public vertical = false;
     public closeButtonLabel: string;
     public cancelButtonLabel: string;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts
@@ -17,6 +17,11 @@ export interface DateRange {
     start: Date | string;
     end: Date | string;
 }
+/** Represents a range between two dates and a label used for predefined and custom date ranges. */
+export interface CustomDateRange {
+    label: string;
+    dateRange: DateRange;
+}
 
 /** @hidden @internal */
 @Pipe({
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.html b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.html
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area-component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts
diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
