Merge pull request #8325 from IgniteUI/PMiteva/fix-overlay-enums

Fix preset OverlaySettings enums & sample

Author: Lipata

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

@@ -150,8 +150,8 @@ export class IgxOverlayService implements OnDestroy {
      */
     public static createRelativeOverlaySettings(
         target: Point | HTMLElement,
-        strategy?: RelativePositionStrategy,
-        position?: RelativePosition):
+        position?: RelativePosition,
+        strategy?: RelativePositionStrategy):
         OverlaySettings {
         const positionSettings = this.createRelativePositionSettings(position);
         const overlaySettings: OverlaySettings = {

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

@@ -21,34 +21,31 @@ export enum VerticalAlignment {
 /**
  * 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];
+export enum RelativePositionStrategy {
+    Connected = 'connected',
+    Auto = 'auto',
+    Elastic = 'elastic'
+}
 
 /**
  * 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];
+export enum RelativePosition {
+    Above = 'above',
+    Below = 'below',
+    Before = 'before',
+    After = 'after',
+    Default = 'default'
+}
 
 /**
  * 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 enum AbsolutePosition {
+    Bottom = 'bottom',
+    Top = 'top',
+    Center = 'center'
+}
 
 export class Point {
     constructor(public x: number, public y: number) { }

src/app/overlay/overlay-presets.sample.ts

@@ -2,16 +2,7 @@ import { Component, ViewChild, ElementRef, ChangeDetectorRef, OnInit } from '@an
 import {
     IgxDropDownComponent,
     OverlaySettings,
-    AutoPositionStrategy,
-    GlobalPositionStrategy,
-    ConnectedPositioningStrategy,
-    AbsoluteScrollStrategy,
-    BlockScrollStrategy,
-    CloseScrollStrategy,
-    NoOpScrollStrategy,
-    ElasticPositionStrategy,
     IgxDragDirective,
-    ContainerPositionStrategy,
     IgxOverlayService
 } from 'igniteui-angular';
 import { RelativePositionStrategy, AbsolutePosition, RelativePosition } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
@@ -33,12 +24,12 @@ export class OverlayPresetsSampleComponent implements OnInit {
     private yAddition = 0;
     items = [];
     itemsCount = 10;
-    relStrategies = ['Auto', 'Connected', 'Elastic'];
+    relStrategies = [RelativePositionStrategy.Auto, RelativePositionStrategy.Connected, RelativePositionStrategy.Elastic];
     absStrategies = ['Global', 'Container'];
     positionStrategy = 'Global';
     absPosition: AbsolutePosition = AbsolutePosition.Center;
     absPositions = [AbsolutePosition.Center, AbsolutePosition.Top, AbsolutePosition.Bottom];
-    relPosition: RelativePosition = RelativePosition.Below;
+    relPosition: RelativePosition;
     relPositions = [
         RelativePosition.Above,
         RelativePosition.Below,
@@ -47,7 +38,6 @@ export class OverlayPresetsSampleComponent implements OnInit {
         RelativePosition.Default];
 
     constructor(
-        private cdr: ChangeDetectorRef
     ) {
         for (let item = 0; item < this.itemsCount; item++) {
             this.items.push(`Item ${item}`);
@@ -58,18 +48,20 @@ export class OverlayPresetsSampleComponent implements OnInit {
         this._overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(this.absPosition);
     }
 
-    onChange(ev) {
+    onChange() {
         switch (this.positionStrategy) {
-            case 'Auto':
-            case 'Connected':
-            case 'Elastic':
+            case RelativePositionStrategy.Auto:
+            case RelativePositionStrategy.Connected:
+            case RelativePositionStrategy.Elastic:
                 this.absPosition = null;
+                this.relPosition = this.relPosition || RelativePosition.Default;
                 this._overlaySettings = IgxOverlayService.createRelativeOverlaySettings(
                     this.button.nativeElement,
-                    RelativePositionStrategy[this.positionStrategy],
-                    this.relPosition);
+                    this.relPosition,
+                    this.positionStrategy);
                 break;
             case 'Global':
+                this.relPosition = null;
                 this._overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(this.absPosition);
                 break;
             case 'Container':