@ng-matero/extensions 11.3.4 → 11.5.1

package/fesm2015/mtxPopover.js

@@ -14,27 +14,27 @@ import { takeUntil } from 'rxjs/operators';
  * Throws an exception for the case when popover trigger doesn't have a valid mtx-popover instance
  */
 function throwMtxPopoverMissingError() {
-    throw Error(`mtx-popover-trigger: must pass in an mtx-popover instance.
-
-    Example:
-      <mtx-popover #popover="mtxPopover"></mtx-popover>
+    throw Error(`mtx-popover-trigger: must pass in an mtx-popover instance.
+
+    Example:
+      <mtx-popover #popover="mtxPopover"></mtx-popover>
       <button [mtxPopoverTriggerFor]="popover"></button>`);
 }
 /**
- * Throws an exception for the case when popover's mtxPopoverPositionX value isn't valid.
- * In other words, it doesn't match 'before' or 'after'.
+ * Throws an exception for the case when popover's mtxPopoverPosition[0] value isn't valid.
+ * In other words, it doesn't match 'above', 'below', 'before' or 'after'.
  */
-function throwMtxPopoverInvalidPositionX() {
-    throw Error(`mtxPopoverPositionX value must be either 'before', 'center' or after'.
-      Example: <mtx-popover mtxPopoverPositionX="before" #popover="mtxPopover"></mtx-popover>`);
+function throwMtxPopoverInvalidPositionStart() {
+    throw Error(`mtxPopoverPosition[0] value must be either 'above', 'below', 'before' or 'after'.
+    Example: <mtx-popover [position]="['below', 'after']" #popover="mtxPopover"></mtx-popover>`);
 }
 /**
- * Throws an exception for the case when popover's mtxPopoverPositionY value isn't valid.
- * In other words, it doesn't match 'above' or 'below'.
+ * Throws an exception for the case when popover's mtxPopoverPosition[1] value isn't valid.
+ * In other words, it doesn't match 'above', 'below', 'before', 'after' or 'center'.
  */
-function throwMtxPopoverInvalidPositionY() {
-    throw Error(`mtxPopoverPositionY value must be either 'above' or below'.
-      Example: <mtx-popover mtxPopoverPositionY="above" #popover="mtxPopover"></mtx-popover>`);
+function throwMtxPopoverInvalidPositionEnd() {
+    throw Error(`mtxPopoverPosition[1] value must be either 'above', 'below', 'before', 'after' or 'center'.
+    Example: <mtx-popover [position]="['below', 'after']" #popover="mtxPopover"></mtx-popover>`);
 }
 
 /**
@@ -71,26 +71,25 @@ class MtxPopover {
         this.zone = zone;
         this.role = 'dialog';
         /** Settings for popover, view setters and getters for more detail */
-        this._xPosition = 'after';
-        this._yPosition = 'below';
+        this._position = ['below', 'after'];
         this._triggerEvent = 'hover';
         this._scrollStrategy = 'reposition';
         this._enterDelay = 100;
         this._leaveDelay = 100;
-        this._overlapTrigger = false;
-        this._disableAnimation = false;
         this._panelOffsetX = 0;
         this._panelOffsetY = 0;
         this._closeOnPanelClick = false;
         this._closeOnBackdropClick = true;
+        this._disableAnimation = false;
         this._focusTrapEnabled = true;
         this._focusTrapAutoCaptureEnabled = true;
         this._arrowOffsetX = 20;
+        this._arrowOffsetY = 20;
         this._arrowWidth = 16;
+        this._arrowHeight = 16;
         /** Config object to be passed into the popover's ngClass */
         this._classList = {};
-        // TODO: Write comment description
-        /** */
+        /** Whether popover's `targetElement` is defined */
         this.containerPositioning = false;
         /** Closing disabled on popover */
         this.closeDisabled = false;
@@ -100,26 +99,18 @@ class MtxPopover {
         this.closed = new EventEmitter();
         this.setPositionClasses();
     }
-    /** Position of the popover in the X axis. */
-    get xPosition() {
-        return this._xPosition;
+    /** Position of the popover. */
+    get position() {
+        return this._position;
     }
-    set xPosition(value) {
-        if (value !== 'before' && value !== 'after' && value !== 'center') {
-            throwMtxPopoverInvalidPositionX();
+    set position(value) {
+        if (!['before', 'after', 'above', 'below'].includes(value[0])) {
+            throwMtxPopoverInvalidPositionStart();
         }
-        this._xPosition = value;
-        this.setPositionClasses();
-    }
-    /** Position of the popover in the Y axis. */
-    get yPosition() {
-        return this._yPosition;
-    }
-    set yPosition(value) {
-        if (value !== 'above' && value !== 'below') {
-            throwMtxPopoverInvalidPositionY();
+        if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
+            throwMtxPopoverInvalidPositionEnd();
         }
-        this._yPosition = value;
+        this._position = value;
         this.setPositionClasses();
     }
     /** Popover trigger event */
@@ -150,13 +141,6 @@ class MtxPopover {
     set leaveDelay(value) {
         this._leaveDelay = value;
     }
-    /** Popover overlap trigger */
-    get overlapTrigger() {
-        return this._overlapTrigger;
-    }
-    set overlapTrigger(value) {
-        this._overlapTrigger = value;
-    }
     /** Popover target offset x */
     get xOffset() {
         return this._panelOffsetX;
@@ -178,6 +162,13 @@ class MtxPopover {
     set arrowOffsetX(value) {
         this._arrowOffsetX = value;
     }
+    /** Popover arrow offset y */
+    get arrowOffsetY() {
+        return this._arrowOffsetY;
+    }
+    set arrowOffsetY(value) {
+        this._arrowOffsetY = value;
+    }
     /** Popover arrow width */
     get arrowWidth() {
         return this._arrowWidth;
@@ -185,6 +176,13 @@ class MtxPopover {
     set arrowWidth(value) {
         this._arrowWidth = value;
     }
+    /** Popover arrow height */
+    get arrowHeight() {
+        return this._arrowHeight;
+    }
+    set arrowHeight(value) {
+        this._arrowHeight = value;
+    }
     /** Popover close on container click */
     get closeOnPanelClick() {
         return this._closeOnPanelClick;
@@ -294,39 +292,58 @@ class MtxPopover {
     // TODO: Refactor how styles are set and updated on the component, use best practices.
     // TODO: If arrow left and right positioning is requested, see if flex direction can be used to work with order.
     /** Sets the current styles for the popover to allow for dynamically changing settings */
-    setCurrentStyles() {
-        const left = this.xPosition === 'after'
+    setCurrentStyles(pos = this.position) {
+        const left = pos[1] === 'after'
             ? `${this.arrowOffsetX - this.arrowWidth / 2}px`
-            : this.xPosition === 'center'
+            : pos[1] === 'center'
                 ? `calc(50% - ${this.arrowWidth / 2}px)`
                 : '';
-        const right = this.xPosition === 'before' ? `${this.arrowOffsetX - this.arrowWidth / 2}px` : '';
-        this.popoverArrowStyles = {
-            left: this._dir.value === 'ltr' ? left : right,
-            right: this._dir.value === 'ltr' ? right : left,
-        };
+        const right = pos[1] === 'before' ? `${this.arrowOffsetX - this.arrowWidth / 2}px` : '';
+        const bottom = pos[1] === 'above'
+            ? `${this.arrowOffsetY - this.arrowHeight / 2}px`
+            : pos[1] === 'center'
+                ? `calc(50% - ${this.arrowHeight / 2}px)`
+                : '';
+        const top = pos[1] === 'below' ? `${this.arrowOffsetY - this.arrowHeight / 2}px` : '';
+        this.popoverArrowStyles =
+            pos[0] === 'above' || pos[0] === 'below'
+                ? {
+                    left: this._dir.value === 'ltr' ? left : right,
+                    right: this._dir.value === 'ltr' ? right : left,
+                }
+                : {
+                    top,
+                    bottom,
+                };
     }
     /**
      * It's necessary to set position-based classes to ensure the popover panel animation
      * folds out from the correct direction.
      */
-    setPositionClasses(posX = this.xPosition, posY = this.yPosition) {
-        this._classList['mtx-popover-before'] = posX === 'before';
-        this._classList['mtx-popover-center'] = posX === 'center';
-        this._classList['mtx-popover-after'] = posX === 'after';
-        this._classList['mtx-popover-above'] = posY === 'above';
-        this._classList['mtx-popover-below'] = posY === 'below';
+    setPositionClasses(pos = this.position) {
+        this._classList['mtx-popover-before-above'] = pos[0] === 'before' && pos[1] === 'above';
+        this._classList['mtx-popover-before-center'] = pos[0] === 'before' && pos[1] === 'center';
+        this._classList['mtx-popover-before-below'] = pos[0] === 'before' && pos[1] === 'below';
+        this._classList['mtx-popover-after-above'] = pos[0] === 'after' && pos[1] === 'above';
+        this._classList['mtx-popover-after-center'] = pos[0] === 'after' && pos[1] === 'center';
+        this._classList['mtx-popover-after-below'] = pos[0] === 'after' && pos[1] === 'below';
+        this._classList['mtx-popover-above-before'] = pos[0] === 'above' && pos[1] === 'before';
+        this._classList['mtx-popover-above-center'] = pos[0] === 'above' && pos[1] === 'center';
+        this._classList['mtx-popover-above-after'] = pos[0] === 'above' && pos[1] === 'after';
+        this._classList['mtx-popover-below-before'] = pos[0] === 'below' && pos[1] === 'before';
+        this._classList['mtx-popover-below-center'] = pos[0] === 'below' && pos[1] === 'center';
+        this._classList['mtx-popover-below-after'] = pos[0] === 'below' && pos[1] === 'after';
     }
 }
 MtxPopover.decorators = [
     { type: Component, args: [{
                 selector: 'mtx-popover',
-                template: "<ng-template>\r\n  <div class=\"mtx-popover-panel mat-elevation-z8\" role=\"dialog\"\r\n       [class.mtx-popover-overlap]=\"overlapTrigger\"\r\n       [ngClass]=\"_classList\"\r\n       [ngStyle]=\"popoverPanelStyles\"\r\n       (keydown)=\"_handleKeydown($event)\"\r\n       (click)=\"onClick()\"\r\n       (mouseover)=\"onMouseOver()\"\r\n       (mouseleave)=\"onMouseLeave()\"\r\n       [@.disabled]=\"disableAnimation\"\r\n       [@transformPopover]=\"'enter'\">\r\n    <div class=\"mtx-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\" *ngIf=\"!overlapTrigger\">\r\n    </div>\r\n    <div class=\"mtx-popover-content\"\r\n         [ngStyle]=\"popoverContentStyles\"\r\n         [cdkTrapFocus]=\"focusTrapEnabled\"\r\n         [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
+                template: "<ng-template>\r\n  <div class=\"mtx-popover-panel mat-elevation-z8\" role=\"dialog\"\r\n       [ngClass]=\"_classList\"\r\n       [ngStyle]=\"popoverPanelStyles\"\r\n       (keydown)=\"_handleKeydown($event)\"\r\n       (click)=\"onClick()\"\r\n       (mouseover)=\"onMouseOver()\"\r\n       (mouseleave)=\"onMouseLeave()\"\r\n       [@.disabled]=\"disableAnimation\"\r\n       [@transformPopover]=\"'enter'\">\r\n    <div class=\"mtx-popover-direction-arrow\" [ngStyle]=\"popoverArrowStyles\"></div>\r\n    <div class=\"mtx-popover-content\"\r\n         [ngStyle]=\"popoverContentStyles\"\r\n         [cdkTrapFocus]=\"focusTrapEnabled\"\r\n         [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 animations: [transformPopover],
                 exportAs: 'mtxPopover',
-                styles: [".mtx-popover-panel{max-height:calc(100vh - 48px);padding:8px;border-radius:4px}.mtx-popover-panel.mtx-popover-below{margin-top:10px}.mtx-popover-panel.mtx-popover-above{margin-bottom:10px}.mtx-popover-panel.mtx-popover-overlap{margin:0}.mtx-popover-direction-arrow{position:absolute;width:16px}.mtx-popover-direction-arrow:after,.mtx-popover-direction-arrow:before{position:absolute;display:inline-block;content:\"\"}.mtx-popover-direction-arrow:before{border:8px solid transparent}.mtx-popover-direction-arrow:after{border:7px solid transparent;left:1px}[dir=rtl] .mtx-popover-direction-arrow:after{right:1px;left:auto}.mtx-popover-below .mtx-popover-direction-arrow{top:0}.mtx-popover-below .mtx-popover-direction-arrow:after,.mtx-popover-below .mtx-popover-direction-arrow:before{bottom:0;border-top-width:0}.mtx-popover-above .mtx-popover-direction-arrow{bottom:0}.mtx-popover-above .mtx-popover-direction-arrow:after,.mtx-popover-above .mtx-popover-direction-arrow:before{top:0;border-bottom-width:0}"]
+                styles: [".mtx-popover-panel{max-height:calc(100vh - 48px);padding:8px;border-radius:4px;font-size:16px}.mtx-popover-panel[class*=mtx-popover-below]{margin-top:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-above]{margin-bottom:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.mtx-popover-direction-arrow{position:absolute}.mtx-popover-direction-arrow:after,.mtx-popover-direction-arrow:before{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.mtx-popover-direction-arrow:after{border-width:calc(.5em - 1px)}[class*=mtx-popover-above] .mtx-popover-direction-arrow,[class*=mtx-popover-below] .mtx-popover-direction-arrow{width:1em}[class*=mtx-popover-above] .mtx-popover-direction-arrow:after,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=mtx-popover-above] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-below] .mtx-popover-direction-arrow:after{right:1px;left:auto}[class*=mtx-popover-below] .mtx-popover-direction-arrow{top:0}[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-below] .mtx-popover-direction-arrow:before{bottom:0;border-top-width:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow{bottom:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:before{top:0;border-bottom-width:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow,[class*=mtx-popover-before] .mtx-popover-direction-arrow{height:1em}[class*=mtx-popover-after] .mtx-popover-direction-arrow:after,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after{top:1px}[class*=mtx-popover-before] .mtx-popover-direction-arrow{right:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-before] .mtx-popover-direction-arrow:before{left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=mtx-popover-after] .mtx-popover-direction-arrow{left:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:before{right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}"]
             },] }
 ];
 /** @nocollapse */
@@ -337,17 +354,17 @@ MtxPopover.ctorParameters = () => [
 ];
 MtxPopover.propDecorators = {
     role: [{ type: HostBinding, args: ['attr.role',] }],
-    xPosition: [{ type: Input }],
-    yPosition: [{ type: Input }],
+    position: [{ type: Input }],
     triggerEvent: [{ type: Input }],
     scrollStrategy: [{ type: Input }],
     enterDelay: [{ type: Input }],
     leaveDelay: [{ type: Input }],
-    overlapTrigger: [{ type: Input }],
     xOffset: [{ type: Input }],
     yOffset: [{ type: Input }],
     arrowOffsetX: [{ type: Input }],
+    arrowOffsetY: [{ type: Input }],
     arrowWidth: [{ type: Input }],
+    arrowHeight: [{ type: Input }],
     closeOnPanelClick: [{ type: Input }],
     closeOnBackdropClick: [{ type: Input }],
     disableAnimation: [{ type: Input }],
@@ -576,7 +593,7 @@ class MtxPopoverTrigger {
             overlayState.hasBackdrop = true;
             overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
         }
-        overlayState.direction = this.dir;
+        overlayState.direction = this._dir;
         overlayState.scrollStrategy = this._getOverlayScrollStrategy(this.popover.scrollStrategy);
         return overlayState;
     }
@@ -603,19 +620,24 @@ class MtxPopoverTrigger {
      */
     _subscribeToPositions(position) {
         this._positionSubscription = position.positionChanges.subscribe(change => {
-            const posisionX = change.connectionPair.overlayX === 'start'
+            const posX = change.connectionPair.overlayX === 'start'
                 ? 'after'
                 : change.connectionPair.overlayX === 'end'
                     ? 'before'
                     : 'center';
-            const posisionY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
+            const posY = change.connectionPair.overlayY === 'top'
+                ? 'below'
+                : change.connectionPair.overlayY === 'bottom'
+                    ? 'above'
+                    : 'center';
+            const pos = this.popover.position[0] === 'above' || this.popover.position[0] === 'below'
+                ? [posY, posX]
+                : [posX, posY];
             // required for ChangeDetectionStrategy.OnPush
             this._changeDetectorRef.markForCheck();
             this.popover.zone.run(() => {
-                this.popover.xPosition = posisionX;
-                this.popover.yPosition = posisionY;
-                this.popover.setCurrentStyles();
-                this.popover.setPositionClasses(posisionX, posisionY);
+                this.popover.setCurrentStyles(pos);
+                this.popover.setPositionClasses(pos);
             });
         });
     }
@@ -625,24 +647,36 @@ class MtxPopoverTrigger {
      * @returns ConnectedPositionStrategy
      */
     _getPosition() {
-        const [originX, origin2ndX, origin3rdX] = this.popover.xPosition === 'before'
-            ? ['end', 'start', 'center']
-            : this.popover.xPosition === 'after'
-                ? ['start', 'end', 'center']
+        const [originX, origin2ndX, origin3rdX] = this.popover.position[0] === 'before' || this.popover.position[1] === 'after'
+            ? ['start', 'center', 'end']
+            : this.popover.position[0] === 'after' || this.popover.position[1] === 'before'
+                ? ['end', 'center', 'start']
                 : ['center', 'start', 'end'];
-        const [overlayY, overlayFallbackY] = this.popover.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'];
-        /** Reverse overlayY and fallbackOverlayY when overlapTrigger is false */
-        const originY = this.popover.overlapTrigger ? overlayY : overlayFallbackY;
-        const originFallbackY = this.popover.overlapTrigger ? overlayFallbackY : overlayY;
-        const overlayX = originX;
+        const [originY, origin2ndY, origin3rdY] = this.popover.position[0] === 'above' || this.popover.position[1] === 'below'
+            ? ['top', 'center', 'bottom']
+            : this.popover.position[0] === 'below' || this.popover.position[1] === 'above'
+                ? ['bottom', 'center', 'top']
+                : ['center', 'top', 'bottom'];
+        const [overlayX, overlayFallbackX] = this.popover.position[0] === 'below' || this.popover.position[0] === 'above'
+            ? [originX, originX]
+            : this.popover.position[0] === 'before'
+                ? ['end', 'start']
+                : ['start', 'end'];
+        const [overlayY, overlayFallbackY] = this.popover.position[0] === 'before' || this.popover.position[0] === 'after'
+            ? [originY, originY]
+            : this.popover.position[0] === 'below'
+                ? ['top', 'bottom']
+                : ['bottom', 'top'];
+        const originFallbackX = overlayX;
+        const originFallbackY = overlayY;
         const offsetX = this.popover.xOffset && !isNaN(Number(this.popover.xOffset))
-            ? Number(this.popover.xOffset)
+            ? Number(this.dir === 'ltr' ? this.popover.xOffset : -this.popover.xOffset)
             : 0;
         const offsetY = this.popover.yOffset && !isNaN(Number(this.popover.yOffset))
             ? Number(this.popover.yOffset)
             : 0;
         /**
-         * For overriding position element, when mtxPopoverTargetAt has a valid element reference.
+         * For overriding position element, when `mtxPopoverTargetAt` has a valid element reference.
          * Useful for sticking popover to parent element and offsetting arrow to trigger element.
          * If undefined defaults to the trigger element reference.
          */
@@ -651,54 +685,68 @@ class MtxPopoverTrigger {
             this.popover.containerPositioning = true;
             element = this.targetElement._elementRef;
         }
+        let positions = [{ originX, originY, overlayX, overlayY }];
+        if (this.popover.position[0] === 'above' || this.popover.position[0] === 'below') {
+            positions = [
+                { originX, originY, overlayX, overlayY, offsetY },
+                { originX: origin2ndX, originY, overlayX: origin2ndX, overlayY, offsetY },
+                { originX: origin3rdX, originY, overlayX: origin3rdX, overlayY, offsetY },
+                {
+                    originX,
+                    originY: originFallbackY,
+                    overlayX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+                {
+                    originX: origin2ndX,
+                    originY: originFallbackY,
+                    overlayX: origin2ndX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+                {
+                    originX: origin3rdX,
+                    originY: originFallbackY,
+                    overlayX: origin3rdX,
+                    overlayY: overlayFallbackY,
+                    offsetY: -offsetY,
+                },
+            ];
+        }
+        if (this.popover.position[0] === 'before' || this.popover.position[0] === 'after') {
+            positions = [
+                { originX, originY, overlayX, overlayY, offsetX },
+                { originX, originY: origin2ndY, overlayX, overlayY: origin2ndY, offsetX },
+                { originX, originY: origin3rdY, overlayX, overlayY: origin3rdY, offsetX },
+                {
+                    originX: originFallbackX,
+                    originY,
+                    overlayX: overlayFallbackX,
+                    overlayY,
+                    offsetX: -offsetX,
+                },
+                {
+                    originX: originFallbackX,
+                    originY: origin2ndY,
+                    overlayX: overlayFallbackX,
+                    overlayY: origin2ndY,
+                    offsetX: -offsetX,
+                },
+                {
+                    originX: originFallbackX,
+                    originY: origin3rdY,
+                    overlayX: overlayFallbackX,
+                    overlayY: origin3rdY,
+                    offsetX: -offsetX,
+                },
+            ];
+        }
         return this._overlay
             .position()
             .flexibleConnectedTo(element)
-            .withLockedPosition(true)
-            .withPositions([
-            {
-                originX,
-                originY,
-                overlayX,
-                overlayY,
-                offsetY,
-            },
-            {
-                originX: origin2ndX,
-                originY,
-                overlayX: origin2ndX,
-                overlayY,
-                offsetY,
-            },
-            {
-                originX,
-                originY: originFallbackY,
-                overlayX,
-                overlayY: overlayFallbackY,
-                offsetY: -offsetY,
-            },
-            {
-                originX: origin2ndX,
-                originY: originFallbackY,
-                overlayX: origin2ndX,
-                overlayY: overlayFallbackY,
-                offsetY: -offsetY,
-            },
-            {
-                originX: origin3rdX,
-                originY,
-                overlayX: origin3rdX,
-                overlayY,
-                offsetY,
-            },
-            {
-                originX: origin3rdX,
-                originY: originFallbackY,
-                overlayX: origin3rdX,
-                overlayY: overlayFallbackY,
-                offsetY: -offsetY,
-            },
-        ])
+            .withLockedPosition()
+            .withPositions(positions)
             .withDefaultOffsetX(offsetX)
             .withDefaultOffsetY(offsetY);
     }