Merge branch 'master' into mvenkov/handle_correctly_target_as_point

Author: wnvko

CHANGELOG.md

@@ -73,6 +73,19 @@ All notable changes for each version of this project will be documented in this
 - `IgxOverlay`
     - The `PositionSettings` `target` property has been deprecated and moved to `OverlaySettings`.
     - An optional Point/HTML Element parameter `target` has been added to the `position()` method
+    - Added `createAbsoluteOverlaySettings` and `createRelativeOverlaySettings` methods which create non-modal `OverlaySettings` based on predefined `PositionSettings`. The methods are exposed off the `IgxOverlayService`.
+        - `createAbsoluteOverlaySettings` creates non-modal `OverlaySettings` with `GlobalPositionStrategy` or `ContainerPositionStrategy` if an outlet is provided. Accepts `AbsolutePosition` enumeration, which could be `Center`, `Top` and `Bottom`. Default is `Center`.
+        ```typescript
+            const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);
+        ```
+        - `createRelativeOverlaySettings` creates `OverlaySettings` with `AutoPositionStrategy`, `ConnectedPositioningStrategy` or `ElasticPositionStrategy`. Accepts target, strategy and position. The `target` is the attaching point or element for the component to show. The position strategy is a `RelativePositionStrategy` enumeration, which defaults to `Auto`. The position is a `RelativePosition` enumeration. Possible values are `Above`, `Below`, `Before`, `After` and `Default`. The default option is `Default`, which positions the element below the target, left aligned.
+        ```typescript
+            const targetElement = this.button.nativeElement;
+            const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
+                    targetElement,
+                    RelativePositionStrategy.Connected,
+                    RelativePosition.Above);
+        ```
 - `IgxToast`
     - The component now utilizes the `IgxOverlayService` to position itself in the DOM.
     - An additional input property `outlet` has been added to allow users to specify custom Overlay Outlets using the `IgxOverlayOutletDirective`;

package-lock.json

@@ -61,6 +61,7 @@
     "igniteui-trial-watermark": "^1.0.3",
     "jszip": "^3.5.0",
     "lodash.merge": "^4.6.2",
+    "uuid": "^8.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.6.3",
     "setimmediate": "^1.0.5",

package.json

@@ -11,6 +11,7 @@
       "jszip",
       "resize-observer-polyfill",
       "igniteui-trial-watermark",
-      "lodash.merge"
+      "lodash.merge",
+      "uuid"
     ]
 }

projects/igniteui-angular/ng-package.json

@@ -13,6 +13,7 @@
       "jszip",
       "resize-observer-polyfill",
       "igniteui-trial-watermark",
-      "lodash.merge"
+      "lodash.merge",
+      "uuid"
     ]
 }

projects/igniteui-angular/ng-package.prod.json

@@ -72,7 +72,8 @@
         "tslib": "^2.0.0",
         "resize-observer-polyfill": "^1.5.1",
         "igniteui-trial-watermark": "^1.0.3",
-        "lodash.merge": "^4.6.2"
+        "lodash.merge": "^4.6.2",
+        "uuid": "^8.3.0"
     },
     "peerDependencies": {
         "@angular/common": "^10.0.0",

projects/igniteui-angular/package.json

@@ -30,6 +30,7 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
         { name: '@types/hammerjs', target: PackageTarget.DEV },
         { name: 'igniteui-trial-watermark', target: PackageTarget.NONE },
         { name: 'lodash.merge', target: PackageTarget.NONE },
+        { name: 'uuid', target: PackageTarget.NONE },
         // peerDependencies
         { name: '@angular/forms', target: PackageTarget.NONE },
         { name: '@angular/common', target: PackageTarget.NONE },

projects/igniteui-angular/schematics/utils/dependency-handler.ts

@@ -119,6 +119,8 @@ this.overlay.show(component, overlaySettings);
 | Name            | Description                                                                     | Parameters |
 |-----------------|---------------------------------------------------------------------------------|------------|
 |getPointFromPositionsSettings| Calculates the point from which the overlay should start showing    |settings    |
+|createAbsoluteOverlaySettings| Creates overlay settings with global or container position strategy based on a preset position settings    |position?, outlet?|
+|createRelativeOverlaySettings| Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings    |target, strategy?, position?|
 
 
 ##### Events

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -15,16 +15,26 @@ import {
 } from '@angular/core';
 import { fromEvent, Subject, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
-import { IAnimationParams } from '../../animations/main';
+import { IAnimationParams, slideInTop, slideOutBottom, slideOutTop, slideInBottom, fadeIn, fadeOut,
+    scaleInVerTop, scaleOutVerTop, scaleOutVerBottom, scaleInVerBottom, scaleInHorRight, scaleOutHorRight,
+    scaleOutHorLeft, scaleInHorLeft } from '../../animations/main';
 import { showMessage } from '../../core/deprecateDecorators';
+import { IPositionStrategy } from './position/IPositionStrategy';
+import { ConnectedPositioningStrategy } from './position/connected-positioning-strategy';
 import { GlobalPositionStrategy } from './position/global-position-strategy';
 import { NoOpScrollStrategy } from './scroll/NoOpScrollStrategy';
 import {
     OverlayAnimationEventArgs,
     OverlayCancelableEventArgs,
     OverlayClosingEventArgs, OverlayEventArgs,
-    OverlayInfo, OverlaySettings
+    OverlayInfo, OverlaySettings,
+    HorizontalAlignment, VerticalAlignment, Point,
+    PositionSettings, AbsolutePosition, RelativePosition, RelativePositionStrategy
 } from './utilities';
+import { ContainerPositionStrategy } from './position/container-position-strategy';
+import { ElasticPositionStrategy } from './position/elastic-position-strategy';
+import { AutoPositionStrategy } from './position/auto-position-strategy';
+import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
 
 
 let warningShown = false;
@@ -111,6 +121,150 @@ export class IgxOverlayService implements OnDestroy {
      */
     public onAnimation = new EventEmitter<OverlayAnimationEventArgs>();
 
+    /**
+     * Creates overlay settings with global or container position strategy and preset position settings
+     * @param position Preset position settings. Default position is 'center'
+     * @param outlet The outlet container to attach the overlay to
+     * @returns Non-modal overlay settings based on Global or Container position strategy and the provided position.
+     */
+    public static createAbsoluteOverlaySettings(
+        position?: AbsolutePosition, outlet?: IgxOverlayOutletDirective | ElementRef): OverlaySettings {
+        const positionSettings = this.createAbsolutePositionSettings(position);
+        const strategy = outlet ? new ContainerPositionStrategy(positionSettings) : new GlobalPositionStrategy(positionSettings);
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: strategy,
+            scrollStrategy: new NoOpScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true,
+            outlet: outlet
+        };
+        return overlaySettings;
+    }
+
+    /**
+     * Creates overlay settings with auto, connected or elastic position strategy and preset position settings
+     * @param target Attaching target for the component to show
+     * @param strategy The relative position strategy to be applied to the overlay settings. Default is Auto positioning strategy.
+     * @param position Preset position settings. By default the element is positioned below the target, left aligned.
+     * @returns Non-modal overlay settings based on the provided target, strategy and position.
+     */
+    public static createRelativeOverlaySettings(
+        target: Point | HTMLElement,
+        strategy?: RelativePositionStrategy,
+        position?: RelativePosition):
+        OverlaySettings {
+        const positionSettings = this.createRelativePositionSettings(position);
+        const overlaySettings: OverlaySettings = {
+            target: target,
+            positionStrategy: this.createPositionStrategy(strategy, positionSettings),
+            scrollStrategy: new NoOpScrollStrategy(),
+            modal: false,
+            closeOnOutsideClick: true
+        };
+        return overlaySettings;
+    }
+
+    private static createAbsolutePositionSettings(position: AbsolutePosition): PositionSettings {
+        let positionSettings: PositionSettings;
+        switch (position) {
+            case AbsolutePosition.Bottom:
+                positionSettings = {
+                    horizontalDirection: HorizontalAlignment.Center,
+                    verticalDirection: VerticalAlignment.Bottom,
+                    openAnimation: slideInBottom,
+                    closeAnimation: slideOutBottom
+                };
+                break;
+            case AbsolutePosition.Top:
+                positionSettings = {
+                    horizontalDirection: HorizontalAlignment.Center,
+                    verticalDirection: VerticalAlignment.Top,
+                    openAnimation: slideInTop,
+                    closeAnimation: slideOutTop
+                };
+                break;
+            case AbsolutePosition.Center:
+            default:
+                positionSettings = {
+                    horizontalDirection: HorizontalAlignment.Center,
+                    verticalDirection: VerticalAlignment.Middle,
+                    openAnimation: fadeIn,
+                    closeAnimation: fadeOut
+                };
+        }
+        return positionSettings;
+    }
+
+    private static createRelativePositionSettings(position: RelativePosition): PositionSettings {
+        let positionSettings: PositionSettings;
+        switch (position) {
+            case RelativePosition.Above:
+                positionSettings = {
+                    horizontalStartPoint: HorizontalAlignment.Center,
+                    verticalStartPoint: VerticalAlignment.Top,
+                    horizontalDirection: HorizontalAlignment.Center,
+                    verticalDirection: VerticalAlignment.Top,
+                    openAnimation: scaleInVerBottom,
+                    closeAnimation: scaleOutVerBottom,
+                };
+                break;
+            case RelativePosition.Below:
+                positionSettings = {
+                    horizontalStartPoint: HorizontalAlignment.Center,
+                    verticalStartPoint: VerticalAlignment.Bottom,
+                    horizontalDirection: HorizontalAlignment.Center,
+                    verticalDirection: VerticalAlignment.Bottom,
+                    openAnimation: scaleInVerTop,
+                    closeAnimation: scaleOutVerTop
+                };
+                break;
+            case RelativePosition.After:
+                positionSettings = {
+                    horizontalStartPoint: HorizontalAlignment.Right,
+                    verticalStartPoint: VerticalAlignment.Middle,
+                    horizontalDirection: HorizontalAlignment.Right,
+                    verticalDirection: VerticalAlignment.Middle,
+                    openAnimation: scaleInHorLeft,
+                    closeAnimation: scaleOutHorLeft
+                };
+                break;
+            case RelativePosition.Before:
+                positionSettings = {
+                    horizontalStartPoint: HorizontalAlignment.Left,
+                    verticalStartPoint: VerticalAlignment.Middle,
+                    horizontalDirection: HorizontalAlignment.Left,
+                    verticalDirection: VerticalAlignment.Middle,
+                    openAnimation: scaleInHorRight,
+                    closeAnimation: scaleOutHorRight
+                };
+                break;
+            case RelativePosition.Default:
+            default:
+                positionSettings = {
+                    horizontalStartPoint: HorizontalAlignment.Left,
+                    verticalStartPoint: VerticalAlignment.Bottom,
+                    horizontalDirection: HorizontalAlignment.Right,
+                    verticalDirection: VerticalAlignment.Bottom,
+                    openAnimation: scaleInVerTop,
+                    closeAnimation: scaleOutVerTop,
+                };
+                break;
+        }
+        return positionSettings;
+    }
+
+    private static createPositionStrategy(strategy: RelativePositionStrategy, positionSettings: PositionSettings): IPositionStrategy {
+        switch (strategy) {
+            case RelativePositionStrategy.Connected:
+                return new ConnectedPositioningStrategy(positionSettings);
+            case RelativePositionStrategy.Elastic:
+                return new ElasticPositionStrategy(positionSettings);
+            case RelativePositionStrategy.Auto:
+            default:
+                return new AutoPositionStrategy(positionSettings);
+        }
+    }
+
     constructor(
         private _factoryResolver: ComponentFactoryResolver,
         private _appRef: ApplicationRef,

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -4,7 +4,7 @@ import { IScrollStrategy } from './scroll';
 import { AnimationReferenceMetadata, AnimationPlayer } from '@angular/animations';
 import { ComponentRef, ElementRef, NgZone } from '@angular/core';
 import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
-import { CancelableEventArgs, CancelableBrowserEventArgs, cloneValue, IBaseEventArgs } from '../../core/utils';
+import { CancelableEventArgs, CancelableBrowserEventArgs, cloneValue, IBaseEventArgs, mkenum } from '../../core/utils';
 
 export enum HorizontalAlignment {
     Left = -1,
@@ -18,6 +18,38 @@ export enum VerticalAlignment {
     Bottom = 0
 }
 
+/**
+ * Defines the possible values of the overlays' position strategy.
+ */
+export const RelativePositionStrategy = mkenum({
+    Connected: 'connected',
+    Auto: 'auto',
+    Elastic: 'elastic'
+});
+export type RelativePositionStrategy = (typeof RelativePositionStrategy)[keyof typeof RelativePositionStrategy];
+
+/**
+ * Defines the possible positions for the relative overlay settings presets.
+ */
+export const RelativePosition = mkenum({
+    Above: 'above',
+    Below: 'below',
+    Before: 'before',
+    After: 'after',
+    Default: 'default'
+});
+export type RelativePosition = (typeof RelativePosition)[keyof typeof RelativePosition];
+
+/**
+ * Defines the possible positions for the absolute overlay settings presets.
+ */
+export const AbsolutePosition = mkenum({
+    Bottom: 'bottom',
+    Top: 'top',
+    Center: 'center'
+});
+export type AbsolutePosition = (typeof AbsolutePosition)[keyof typeof AbsolutePosition];
+
 export class Point {
     constructor(public x: number, public y: number) { }
 }