Merge branch 'master' into ikitanov/fix-16088

Author: IvanKitanov17

CHANGELOG.md

@@ -20,9 +20,23 @@ All notable changes for each version of this project will be documented in this
 - `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/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-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>

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

@@ -1277,6 +1277,26 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.opening.emit).toHaveBeenCalledTimes(0);
                     expect(dateRange.opened.emit).toHaveBeenCalledTimes(0);
                 }));
+
+                it('should keep the calendar open when input is focused by click and while typing', fakeAsync(() => {
+                    fixture.componentInstance.dateRange.open();
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateClickAndSelectEvent(startInput.nativeElement);
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    expect(dateRange.collapsed).toBeFalsy();
+
+                    UIInteractions.simulateTyping('01/10/202', startInput);
+                    fixture.detectChanges();
+                    tick(DEBOUNCE_TIME);
+
+                    expect(dateRange.collapsed).toBeFalsy();
+                }));
             });
 
             it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {

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

@@ -810,7 +810,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             this.opened.emit({ owner: this });
         });
 
-        this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e) => {
+        this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e: OverlayCancelableEventArgs) => {
+            const isEscape = e.event && (e.event as KeyboardEvent).key === this.platform.KEYMAP.ESCAPE;
+            if (this.isProjectedInputTarget(e.event) && !isEscape) {
+                e.cancel = true;
+            }
             this.handleClosing(e as OverlayCancelableEventArgs);
         });
 
@@ -824,6 +828,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         });
     }
 
+    private isProjectedInputTarget(event: Event): boolean {
+        if (!this.hasProjectedInputs || !event) {
+            return false;
+        }
+        const path = event.composed ? event.composedPath() : [event.target];
+        return this.projectedInputs.some(i =>
+            path.includes(i.dateTimeEditor.nativeElement)
+        );
+    }
+
     private updateValue(value: DateRange) {
         this._value = value ? value : null;
         this.updateInputs();

projects/igniteui-angular/src/lib/directives/tooltip/README.md

@@ -100,15 +100,99 @@ Since the **IgxTooltip** directive extends the **IgxToggle** directive and there
 | tooltipDisabled | boolean | Specifies if the tooltip should not show when hovering its target with the mouse. (defaults to false) |
 | tooltipHidden | boolean | Indicates if the tooltip is currently hidden. |
 | nativeElement | any | Reference to the native element of the directive. |
+| positionSettings | PositionSettings | Controls the position and animation settings used by the tooltip. |
+| hasArrow | boolean | Controls whether to display an arrow indicator for the tooltip. Defaults to `false`. |
+| sticky | boolean | When set to `true`, the tooltip renders a default close icon `x`. The tooltip remains visible until the user closes it via the close icon `x` or `Esc` key. Defaults to `false`. |
+| closeButtonTemplate | TemplateRef<any> | Allows templating the default close icon `x`. |
+
+#### Templating the close button
+
+```html
+<igx-icon [igxTooltipTarget]="tooltipRef" [closeButtonTemplate]="customClose">
+    info
+</igx-icon>
+
+<span #tooltipRef="tooltip" igxTooltip>
+    Hello there, I am a tooltip!
+</span>
+
+<ng-template #customClose>
+    <button igxButton>Close</button>
+</ng-template>
+```
 
 ### Methods
 | Name | Type | Arguments | Description |
 | :--- |:--- | :--- | :--- |
-| showTooltip | void | N/A | Shows the tooltip after the amount of ms specified by the `showDelay` property. |
-| hideTooltip | void | N/A | Hides the tooltip after the amount of ms specified by the `hideDelay` property. |
+| showTooltip | void | N/A | Shows the tooltip. |
+| hideTooltip | void | N/A | Hides the tooltip. |
 
 ### Events
 |Name|Description|Cancelable|Event arguments|
 |--|--|--|--|
 | tooltipShow | Emitted when the tooltip starts showing. (This event is fired before the start of the countdown to showing the tooltip.) | True | ITooltipShowEventArgs |
 | tooltipHide | Emitted when the tooltip starts hiding. (This event is fired before the start of the countdown to hiding the tooltip.) | True | ITooltipHideEventArgs |
+
+### Notes
+
+The `IgxTooltipTarget` uses the `TooltipPositionStrategy` to position the tooltip and arrow element. If a custom position strategy is used (`overlaySettings.positionStrategy`) and `hasArrow` is set to `true`, the custom strategy should extend the `TooltipPositionStrategy`. Otherwise, the arrow will not be displayed.
+
+The arrow element is positioned based on the provided position settings. If the directions and starting points do not correspond to any of the predefined position values, the arrow is positioned in the top middle side of the tooltip (default tooltip position `bottom`).
+
+
+| Position     | Horizontal Direction          | Horizontal Start Point         | Vertical Direction            | Vertical Start Point           |
+|--------------|-------------------------------|--------------------------------|-------------------------------|--------------------------------|
+| top          | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Top         | VerticalAlignment.Top          |
+| top-start    | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Top          |
+| top-end      | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Top          |
+| bottom       | HorizontalAlignment.Center    | HorizontalAlignment.Center     | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+| bottom-start | HorizontalAlignment.Right     | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+| bottom-end   | HorizontalAlignment.Left      | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Bottom       |
+| right        | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
+| right-start  | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
+| right-end    | HorizontalAlignment.Right     | HorizontalAlignment.Right      | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
+| left         | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Middle      | VerticalAlignment.Middle       |
+| left-start   | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Bottom      | VerticalAlignment.Top          |
+| left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       |
+
+
+#### Customizing the arrow's position
+
+The arrow's position can be customized by overriding the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method.
+
+For example:
+
+```ts
+export class CustomStrategy extends TooltipPositioningStrategy {
+    constructor(settings?: PositionSettings) {
+        super(settings);
+    }
+
+    public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
+        Object.assign(arrow.style, {
+            left: '-0.25rem',
+            transform: 'rotate(-45deg)',
+            [arrowFit.direction]: '-0.25rem',
+        });
+    }
+}
+
+public overlaySettings: OverlaySettings = {
+    positionStrategy: new CustomStrategy({
+        horizontalDirection: HorizontalAlignment.Right,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Bottom,
+    })
+};
+```
+
+```html
+<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">
+    info
+</igx-icon>
+
+<span #tooltipRef="tooltip" igxTooltip>
+    Hello there, I am a tooltip!
+</span>
+```

projects/igniteui-angular/src/lib/directives/tooltip/public_api.ts

@@ -3,6 +3,7 @@ import { IgxTooltipDirective } from './tooltip.directive';
 
 export * from './tooltip.directive';
 export * from './tooltip-target.directive';
+export { ArrowFit, TooltipPositionStrategy } from './tooltip.common';
 
 /* NOTE: Tooltip directives collection for ease-of-use import in standalone components scenario */
 export const IGX_TOOLTIP_DIRECTIVES = [

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-close-button.component.ts

@@ -0,0 +1,28 @@
+import { Component, Output, EventEmitter, HostListener, Input, TemplateRef } from '@angular/core';
+import { IgxIconComponent } from '../../icon/icon.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'igx-tooltip-close-button',
+  template: `
+        <ng-container *ngIf="customTemplate; else defaultTemplate">
+            <ng-container *ngTemplateOutlet="customTemplate"></ng-container>
+        </ng-container>
+        <ng-template #defaultTemplate>
+            <igx-icon aria-hidden="true" family="default" name="close"></igx-icon>
+        </ng-template>
+  `,
+  imports: [IgxIconComponent, CommonModule],
+})
+export class IgxTooltipCloseButtonComponent {
+    @Input()
+    public customTemplate: TemplateRef<any>;
+
+    @Output()
+    public clicked = new EventEmitter<void>();
+
+    @HostListener('click')
+    public handleClick() {
+        this.clicked.emit();
+    }
+}