chore(select): Adress comments-2 #5911

Author: IvayloG

projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

@@ -1,9 +1,9 @@
-import { VerticalAlignment, HorizontalAlignment, PositionSettings, Size, Point, Util } from '../services/overlay/utilities';
+import { VerticalAlignment, HorizontalAlignment, PositionSettings, Size, Util, ConnectedFit  } from '../services/overlay/utilities';
 import { IPositionStrategy } from '../services/overlay/position';
 import { fadeOut, fadeIn } from '../animations/main';
 import { IgxSelectBase } from './select.common';
 import { isIE } from '../core/utils';
-import { BaseFitPositionStrategy, ConnectedFit } from '../services/overlay/position/base-fit-position-strategy';
+import { BaseFitPositionStrategy } from '../services/overlay/position/base-fit-position-strategy';
 import { DisplayDensity } from '../core/density';
 
 /** @hidden @internal */
@@ -44,7 +44,8 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
         const rects = super.calculateElementRectangles(contentElement);
         // selectFit obj, to be used for both cases of initialCall and !initialCall(page scroll/overlay repositionAll)
         const selectFit: SelectFit = {
-            yOffset: this.global_yOffset, xOffset: this.global_xOffset,
+            verticalOffset: this.global_yOffset,
+            horizontalOffset: this.global_xOffset,
             targetRect: rects.targetRect,
             contentElementRect: rects.elementRect,
             styles: this.global_styles
@@ -54,7 +55,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
             selectFit.viewPortRect = Util.getViewportRect(document);
 
             // Fill in the required selectFit object properties.
-            this.calculateVariables(contentElement, selectFit);
+            this.calculateVariables(selectFit);
             selectFit.viewPortRect = Util.getViewportRect(document);
 
             // Calculate how much to offset the overlay container.
@@ -118,8 +119,8 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
 
     // This method can be scrambled and combined in manageScrollToItem()
     private compensateYScroll(selectFit: SelectFit, compensation: number ) {
-        selectFit.yOffset += compensation;
-        this.global_yOffset = selectFit.yOffset;
+        selectFit.verticalOffset += compensation;
+        this.global_yOffset = selectFit.verticalOffset;
     }
 
     // Position the items outer container Below or Above the input.
@@ -163,16 +164,12 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
         this.global_styles.contentElementNewWidth = selectFit.styles.contentElementNewWidth;
     }
 
-    private calculateVariables(contentElement: HTMLElement, selectFit: SelectFit) {
-        const targetRect = Util.getTargetRect(this.settings);
-        const contentElementRect = contentElement.getBoundingClientRect();
+    private calculateVariables(selectFit: SelectFit) {
         const itemHeight = this.getInteractionItemElement().getBoundingClientRect().height;
         selectFit.styles = {};
         selectFit.itemElement = this.getInteractionItemElement();
         selectFit.itemHeight = itemHeight;
         selectFit.dropDownList = this.select.scrollContainer;
-        selectFit.targetRect = targetRect;
-        selectFit.contentElementRect = contentElementRect;
         selectFit.inputElement = this.select.getEditElement();
         // Calculate input and selected item elements style related variables
         this.calculateStyles(selectFit);
@@ -219,14 +216,14 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
 
     protected calculateYoffset(selectFit: SelectFit) {
         const contentElementTopLeftPointY = selectFit.contentElementRect.top;
-        selectFit.yOffset =
+        selectFit.verticalOffset =
             -(selectFit.itemElement.getBoundingClientRect().top - contentElementTopLeftPointY + selectFit.styles.itemTextToInputTextDiff);
-        this.global_yOffset = selectFit.yOffset;
+        this.global_yOffset = selectFit.verticalOffset;
     }
 
     protected calculateXoffset(selectFit: SelectFit) {
-        selectFit.xOffset = selectFit.styles.itemTextIndent - selectFit.styles.itemTextPadding;
-        this.global_xOffset = selectFit.xOffset;
+        selectFit.horizontalOffset = selectFit.styles.itemTextIndent - selectFit.styles.itemTextPadding;
+        this.global_xOffset = selectFit.horizontalOffset;
     }
 }
 
@@ -240,8 +237,8 @@ export interface SelectFit extends ConnectedFit {
     right?: number;
     top?: number;
     bottom?: number;
-    xOffset?: number;
-    yOffset?: number;
+    horizontalOffset?: number;
+    verticalOffset?: number;
 
     // New properties
     inputElement?: HTMLElement;

projects/igniteui-angular/src/lib/services/overlay/position/auto-position-strategy.ts

@@ -1,5 +1,5 @@
-import { VerticalAlignment, HorizontalAlignment } from './../utilities';
-import { BaseFitPositionStrategy, ConnectedFit } from './base-fit-position-strategy';
+import { VerticalAlignment, HorizontalAlignment, ConnectedFit } from './../utilities';
+import { BaseFitPositionStrategy } from './base-fit-position-strategy';
 
 /**
  * Positions the element as in **Connected** positioning strategy and re-positions the element in

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -1,15 +1,14 @@
 import { ConnectedPositioningStrategy } from './connected-positioning-strategy';
-import { HorizontalAlignment, VerticalAlignment, PositionSettings, Size, Util } from '../utilities';
+import { HorizontalAlignment, VerticalAlignment, PositionSettings, Size, Util, ConnectedFit } from '../utilities';
 
 export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrategy {
     protected _initialSize: Size;
     protected _initialSettings: PositionSettings;
 
     /** @inheritdoc */
     position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void {
-        const targetRect = Util.getTargetRect(this.settings);
+        const targetRect = super.calculateElementRectangles(contentElement).targetRect;
         const contentElementRect = contentElement.getBoundingClientRect();
-        // let exposedConnectedFit = {};
         const connectedFit: ConnectedFit = {};
         if (initialCall) {
             connectedFit.targetRect = targetRect;
@@ -21,9 +20,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             if (!connectedFit.fitHorizontal || !connectedFit.fitVertical) {
                 this.fitInViewport(contentElement, connectedFit);
             }
-            //exposedConnectedFit = connectedFit;
         }
-        // this.setStyle(contentElement, targetRect, contentElementRect, exposedConnectedFit);
         this.setStyle(contentElement, targetRect, contentElementRect, connectedFit);
     }
 
@@ -38,7 +35,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.contentElementRect,
             this.settings.horizontalStartPoint,
             this.settings.horizontalDirection,
-            connectedFit.xOffset);
+            connectedFit.horizontalOffset);
         connectedFit.right = connectedFit.left + connectedFit.contentElementRect.width;
         connectedFit.fitHorizontal =
             connectedFit.viewPortRect.left < connectedFit.left && connectedFit.right < connectedFit.viewPortRect.right;
@@ -48,7 +45,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
             connectedFit.contentElementRect,
             this.settings.verticalStartPoint,
             this.settings.verticalDirection,
-            connectedFit.yOffset);
+            connectedFit.verticalOffset);
         connectedFit.bottom = connectedFit.top + connectedFit.contentElementRect.height;
         connectedFit.fitVertical =
             connectedFit.viewPortRect.top < connectedFit.top && connectedFit.bottom < connectedFit.viewPortRect.bottom;
@@ -92,17 +89,4 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
         connectedFit: ConnectedFit);
 }
 
-export interface ConnectedFit {
-    contentElementRect?: ClientRect;
-    targetRect?: ClientRect;
-    viewPortRect?: ClientRect;
-    fitHorizontal?: boolean;
-    fitVertical?: boolean;
-    left?: number;
-    right?: number;
-    top?: number;
-    bottom?: number;
-    xOffset?: number;
-    yOffset?: number;
-}
 

projects/igniteui-angular/src/lib/services/overlay/position/connected-positioning-strategy.ts

@@ -8,7 +8,7 @@ import {
   VerticalAlignment
 } from './../utilities';
 import { scaleInVerTop, scaleOutVerTop } from '../../../animations/main';
-import { ConnectedFit } from './base-fit-position-strategy';
+import { ConnectedFit } from '../utilities';
 
 /**
  * Positions the element based on the directions and start point passed in trough PositionSettings.
@@ -65,8 +65,8 @@ export class ConnectedPositioningStrategy implements IPositionStrategy {
    */
   protected setStyle(element: HTMLElement, targetRect: ClientRect, elementRect: ClientRect, connectedFit?: ConnectedFit) {
     const startPoint: Point = {
-      x: targetRect.right + targetRect.width * this.settings.horizontalStartPoint + (connectedFit ? connectedFit.xOffset : 0),
-      y: targetRect.bottom + targetRect.height * this.settings.verticalStartPoint + (connectedFit ? connectedFit.yOffset : 0)
+      x: targetRect.right + targetRect.width * this.settings.horizontalStartPoint + (connectedFit ? connectedFit.horizontalOffset : 0),
+      y: targetRect.bottom + targetRect.height * this.settings.verticalStartPoint + (connectedFit ? connectedFit.verticalOffset : 0)
     };
     const wrapperRect: ClientRect = element.parentElement.getBoundingClientRect();
 

projects/igniteui-angular/src/lib/services/overlay/position/elastic-position-strategy.ts

@@ -1,5 +1,5 @@
-import { BaseFitPositionStrategy, ConnectedFit } from './base-fit-position-strategy';
-import { HorizontalAlignment, VerticalAlignment } from '../utilities';
+import { BaseFitPositionStrategy } from './base-fit-position-strategy';
+import { HorizontalAlignment, VerticalAlignment, ConnectedFit } from '../utilities';
 
 /**
  * Positions the element as in **Connected** positioning strategy and resize the element

projects/igniteui-angular/src/lib/services/overlay/scroll/absolute-scroll-strategy.ts

@@ -60,7 +60,9 @@ export class AbsoluteScrollStrategy extends ScrollStrategy {
         }
     }
 
-    private onScroll = () => {
-        this._overlayService.repositionAll();
+    private onScroll = (e) => {
+        if (!this._overlayService.getOverlayById(this._id).elementRef.nativeElement.contains(e.target)) {
+            this._overlayService.reposition(this._id);
+        }
     }
 }

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

@@ -106,6 +106,21 @@ export interface OverlayInfo {
     transformY?: number;
 }
 
+/** @hidden */
+export interface ConnectedFit {
+    contentElementRect?: ClientRect;
+    targetRect?: ClientRect;
+    viewPortRect?: ClientRect;
+    fitHorizontal?: boolean;
+    fitVertical?: boolean;
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+    horizontalOffset?: number;
+    verticalOffset?: number;
+}
+
 /** @hidden */
 export class Util {
     /**