@ng-matero/extensions 11.3.4 → 11.5.1

package/bundles/mtxPopover.umd.js

@@ -11,18 +11,18 @@
         throw Error("mtx-popover-trigger: must pass in an mtx-popover instance.\n\n    Example:\n      <mtx-popover #popover=\"mtxPopover\"></mtx-popover>\n      <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'.\n      Example: <mtx-popover mtxPopoverPositionX=\"before\" #popover=\"mtxPopover\"></mtx-popover>");
+    function throwMtxPopoverInvalidPositionStart() {
+        throw Error("mtxPopoverPosition[0] value must be either 'above', 'below', 'before' or 'after'.\n    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'.\n      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'.\n    Example: <mtx-popover [position]=\"['below', 'after']\" #popover=\"mtxPopover\"></mtx-popover>");
     }
 
     /**
@@ -59,26 +59,25 @@
             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;
@@ -88,31 +87,19 @@
             this.closed = new core.EventEmitter();
             this.setPositionClasses();
         }
-        Object.defineProperty(MtxPopover.prototype, "xPosition", {
-            /** Position of the popover in the X axis. */
+        Object.defineProperty(MtxPopover.prototype, "position", {
+            /** Position of the popover. */
             get: function () {
-                return this._xPosition;
+                return this._position;
             },
             set: function (value) {
-                if (value !== 'before' && value !== 'after' && value !== 'center') {
-                    throwMtxPopoverInvalidPositionX();
+                if (!['before', 'after', 'above', 'below'].includes(value[0])) {
+                    throwMtxPopoverInvalidPositionStart();
                 }
-                this._xPosition = value;
-                this.setPositionClasses();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(MtxPopover.prototype, "yPosition", {
-            /** Position of the popover in the Y axis. */
-            get: function () {
-                return this._yPosition;
-            },
-            set: function (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();
             },
             enumerable: false,
@@ -162,17 +149,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(MtxPopover.prototype, "overlapTrigger", {
-            /** Popover overlap trigger */
-            get: function () {
-                return this._overlapTrigger;
-            },
-            set: function (value) {
-                this._overlapTrigger = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
         Object.defineProperty(MtxPopover.prototype, "xOffset", {
             /** Popover target offset x */
             get: function () {
@@ -206,6 +182,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxPopover.prototype, "arrowOffsetY", {
+            /** Popover arrow offset y */
+            get: function () {
+                return this._arrowOffsetY;
+            },
+            set: function (value) {
+                this._arrowOffsetY = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxPopover.prototype, "arrowWidth", {
             /** Popover arrow width */
             get: function () {
@@ -217,6 +204,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(MtxPopover.prototype, "arrowHeight", {
+            /** Popover arrow height */
+            get: function () {
+                return this._arrowHeight;
+            },
+            set: function (value) {
+                this._arrowHeight = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MtxPopover.prototype, "closeOnPanelClick", {
             /** Popover close on container click */
             get: function () {
@@ -354,42 +352,61 @@
         // 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 */
-        MtxPopover.prototype.setCurrentStyles = function () {
-            var left = this.xPosition === 'after'
+        MtxPopover.prototype.setCurrentStyles = function (pos) {
+            if (pos === void 0) { pos = this.position; }
+            var left = pos[1] === 'after'
                 ? this.arrowOffsetX - this.arrowWidth / 2 + "px"
-                : this.xPosition === 'center'
+                : pos[1] === 'center'
                     ? "calc(50% - " + this.arrowWidth / 2 + "px)"
                     : '';
-            var 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,
-            };
+            var right = pos[1] === 'before' ? this.arrowOffsetX - this.arrowWidth / 2 + "px" : '';
+            var bottom = pos[1] === 'above'
+                ? this.arrowOffsetY - this.arrowHeight / 2 + "px"
+                : pos[1] === 'center'
+                    ? "calc(50% - " + this.arrowHeight / 2 + "px)"
+                    : '';
+            var 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: top,
+                        bottom: bottom,
+                    };
         };
         /**
          * It's necessary to set position-based classes to ensure the popover panel animation
          * folds out from the correct direction.
          */
-        MtxPopover.prototype.setPositionClasses = function (posX, posY) {
-            if (posX === void 0) { posX = this.xPosition; }
-            if (posY === void 0) { 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';
+        MtxPopover.prototype.setPositionClasses = function (pos) {
+            if (pos === void 0) { 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';
         };
         return MtxPopover;
     }());
     MtxPopover.decorators = [
         { type: core.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: core.ChangeDetectionStrategy.OnPush,
                     encapsulation: core.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 */
@@ -400,17 +417,17 @@
     ]; };
     MtxPopover.propDecorators = {
         role: [{ type: core.HostBinding, args: ['attr.role',] }],
-        xPosition: [{ type: core.Input }],
-        yPosition: [{ type: core.Input }],
+        position: [{ type: core.Input }],
         triggerEvent: [{ type: core.Input }],
         scrollStrategy: [{ type: core.Input }],
         enterDelay: [{ type: core.Input }],
         leaveDelay: [{ type: core.Input }],
-        overlapTrigger: [{ type: core.Input }],
         xOffset: [{ type: core.Input }],
         yOffset: [{ type: core.Input }],
         arrowOffsetX: [{ type: core.Input }],
+        arrowOffsetY: [{ type: core.Input }],
         arrowWidth: [{ type: core.Input }],
+        arrowHeight: [{ type: core.Input }],
         closeOnPanelClick: [{ type: core.Input }],
         closeOnBackdropClick: [{ type: core.Input }],
         disableAnimation: [{ type: core.Input }],
@@ -964,7 +981,7 @@
                 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;
         };
@@ -992,19 +1009,24 @@
         MtxPopoverTrigger.prototype._subscribeToPositions = function (position) {
             var _this = this;
             this._positionSubscription = position.positionChanges.subscribe(function (change) {
-                var posisionX = change.connectionPair.overlayX === 'start'
+                var posX = change.connectionPair.overlayX === 'start'
                     ? 'after'
                     : change.connectionPair.overlayX === 'end'
                         ? 'before'
                         : 'center';
-                var posisionY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
+                var posY = change.connectionPair.overlayY === 'top'
+                    ? 'below'
+                    : change.connectionPair.overlayY === 'bottom'
+                        ? 'above'
+                        : 'center';
+                var 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(function () {
-                    _this.popover.xPosition = posisionX;
-                    _this.popover.yPosition = posisionY;
-                    _this.popover.setCurrentStyles();
-                    _this.popover.setPositionClasses(posisionX, posisionY);
+                    _this.popover.setCurrentStyles(pos);
+                    _this.popover.setPositionClasses(pos);
                 });
             });
         };
@@ -1014,24 +1036,36 @@
          * @returns ConnectedPositionStrategy
          */
         MtxPopoverTrigger.prototype._getPosition = function () {
-            var _a = __read(this.popover.xPosition === 'before'
-                ? ['end', 'start', 'center']
-                : this.popover.xPosition === 'after'
-                    ? ['start', 'end', 'center']
+            var _a = __read(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'], 3), originX = _a[0], origin2ndX = _a[1], origin3rdX = _a[2];
-            var _b = __read(this.popover.yPosition === 'above' ? ['bottom', 'top'] : ['top', 'bottom'], 2), overlayY = _b[0], overlayFallbackY = _b[1];
-            /** Reverse overlayY and fallbackOverlayY when overlapTrigger is false */
-            var originY = this.popover.overlapTrigger ? overlayY : overlayFallbackY;
-            var originFallbackY = this.popover.overlapTrigger ? overlayFallbackY : overlayY;
-            var overlayX = originX;
+            var _b = __read(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'], 3), originY = _b[0], origin2ndY = _b[1], origin3rdY = _b[2];
+            var _c = __read(this.popover.position[0] === 'below' || this.popover.position[0] === 'above'
+                ? [originX, originX]
+                : this.popover.position[0] === 'before'
+                    ? ['end', 'start']
+                    : ['start', 'end'], 2), overlayX = _c[0], overlayFallbackX = _c[1];
+            var _d = __read(this.popover.position[0] === 'before' || this.popover.position[0] === 'after'
+                ? [originY, originY]
+                : this.popover.position[0] === 'below'
+                    ? ['top', 'bottom']
+                    : ['bottom', 'top'], 2), overlayY = _d[0], overlayFallbackY = _d[1];
+            var originFallbackX = overlayX;
+            var originFallbackY = overlayY;
             var offsetX = this.popover.xOffset && !isNaN(Number(this.popover.xOffset))
-                ? Number(this.popover.xOffset)
+                ? Number(this.dir === 'ltr' ? this.popover.xOffset : -this.popover.xOffset)
                 : 0;
             var 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.
              */
@@ -1040,54 +1074,68 @@
                 this.popover.containerPositioning = true;
                 element = this.targetElement._elementRef;
             }
+            var positions = [{ originX: originX, originY: originY, overlayX: overlayX, overlayY: overlayY }];
+            if (this.popover.position[0] === 'above' || this.popover.position[0] === 'below') {
+                positions = [
+                    { originX: originX, originY: originY, overlayX: overlayX, overlayY: overlayY, offsetY: offsetY },
+                    { originX: origin2ndX, originY: originY, overlayX: origin2ndX, overlayY: overlayY, offsetY: offsetY },
+                    { originX: origin3rdX, originY: originY, overlayX: origin3rdX, overlayY: overlayY, offsetY: offsetY },
+                    {
+                        originX: originX,
+                        originY: originFallbackY,
+                        overlayX: 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: originX, originY: originY, overlayX: overlayX, overlayY: overlayY, offsetX: offsetX },
+                    { originX: originX, originY: origin2ndY, overlayX: overlayX, overlayY: origin2ndY, offsetX: offsetX },
+                    { originX: originX, originY: origin3rdY, overlayX: overlayX, overlayY: origin3rdY, offsetX: offsetX },
+                    {
+                        originX: originFallbackX,
+                        originY: originY,
+                        overlayX: overlayFallbackX,
+                        overlayY: 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: originX,
-                    originY: originY,
-                    overlayX: overlayX,
-                    overlayY: overlayY,
-                    offsetY: offsetY,
-                },
-                {
-                    originX: origin2ndX,
-                    originY: originY,
-                    overlayX: origin2ndX,
-                    overlayY: overlayY,
-                    offsetY: offsetY,
-                },
-                {
-                    originX: originX,
-                    originY: originFallbackY,
-                    overlayX: overlayX,
-                    overlayY: overlayFallbackY,
-                    offsetY: -offsetY,
-                },
-                {
-                    originX: origin2ndX,
-                    originY: originFallbackY,
-                    overlayX: origin2ndX,
-                    overlayY: overlayFallbackY,
-                    offsetY: -offsetY,
-                },
-                {
-                    originX: origin3rdX,
-                    originY: originY,
-                    overlayX: origin3rdX,
-                    overlayY: overlayY,
-                    offsetY: offsetY,
-                },
-                {
-                    originX: origin3rdX,
-                    originY: originFallbackY,
-                    overlayX: origin3rdX,
-                    overlayY: overlayFallbackY,
-                    offsetY: -offsetY,
-                },
-            ])
+                .withLockedPosition()
+                .withPositions(positions)
                 .withDefaultOffsetX(offsetX)
                 .withDefaultOffsetY(offsetY);
         };