Merge master into skrastev/localization

Author: skrustev

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
 - `IgxCarousel`
@@ -10,9 +11,32 @@ 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.
+
+- `IgxTooltip`
+    - The tooltip now remains open while interacting with it.
+- `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`.
 
+- `IgxTooltipTarget`
+    - **Behavioral Changes**
+        - The `showDelay` input property now defaults to `200`.
+        - The `hideDelay` input property now defaults to `300`.
+        - The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
 
 ## 20.0.6
 ### General

projects/igniteui-angular/src/lib/core/i18n/date-range-picker-resources.ts

@@ -4,6 +4,10 @@ import { convertToIgxResource } from './resources';
 export interface IDateRangePickerResourceStrings {
     igx_date_range_picker_date_separator?: string;
     igx_date_range_picker_done_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 = convertToIgxResource(ADateRangePickerResourceStrings);

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss

@@ -10,6 +10,22 @@
 
         @extend %tooltip-display !optional;
 
+        @include m(top) {
+            @extend %arrow--top !optional;
+        }
+
+        @include m(bottom) {
+            @extend %arrow--bottom !optional;
+        }
+
+        @include m(left) {
+            @extend %arrow--left !optional;
+        }
+
+        @include m(right) {
+            @extend %arrow--right !optional;
+        }
+
         @include m(hidden) {
             @extend %tooltip--hidden !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -8,23 +8,58 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
+    $transparent-border: rem(4px) solid transparent;
+    $color-border: rem(4px) solid var-get($theme, 'background');
+
     %tooltip-display {
-        display: inline-flex;
-        justify-content: center;
-        flex-flow: column wrap;
+        display: flex;
+        align-items: flex-start;
+        text-align: start;
         background: var-get($theme, 'background');
         color: var-get($theme, 'text-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
-        margin: 0 auto;
-        padding: 0 rem(8px);
+        padding: rem(4px) rem(8px);
+        gap: rem(8px);
         min-height: rem(24px);
+        min-width: rem(24px);
+        max-width: 200px;
+        width: fit-content;
+
+        igx-icon {
+            --component-size: 1;
+        }
 
-        @if $variant == 'indigo' {
-            padding: rem(4px) rem(8px);
+        igx-tooltip-close-button {
+            display: flex;
+            cursor: default;
         }
     }
 
+    %arrow--top {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-top: $color-border;
+    }
+
+    %arrow--bottom {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-bottom: $color-border;
+    }
+
+    %arrow--left {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-left: $color-border;
+    }
+
+    %arrow--right {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-right: $color-border;
+    }
+
     %tooltip--hidden {
         display: none;
     }
@@ -45,6 +80,7 @@
         }
     } @else {
         %tooltip-display {
+            line-height: rem(16px);
             font-size: rem(10px);
             font-weight: 600;
         }

projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html

@@ -28,6 +28,15 @@
 </ng-template>
 
 <igx-calendar></igx-calendar>
+
+ @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>
 }

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 {
@@ -37,6 +41,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';
 
@@ -45,6 +53,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 todayButtonLabel: string;

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({

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #defIcon>
-    <igx-icon family="default" name="date_range" [attr.aria-hidden]="true"></igx-icon>
+    <igx-icon family="default" name="date_range"></igx-icon>
 </ng-template>
 
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>