@a11y-ngx/overlay-base 1.0.0

package/bundles/a11y-ngx-overlay-base.umd.js

@@ -0,0 +1,1477 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@a11y-ngx/overlay-base', ['exports', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.a11yNGx = global.a11yNGx || {}, global.a11yNGx.overlayBase = {}), global.rxjs, global.rxjs.operators));
+})(this, (function (exports, rxjs, operators) { 'use strict';
+
+    exports.POSITION = void 0;
+    (function (POSITION) {
+        POSITION["TOP"] = "top";
+        POSITION["BOTTOM"] = "bottom";
+        POSITION["LEFT"] = "left";
+        POSITION["RIGHT"] = "right";
+    })(exports.POSITION || (exports.POSITION = {}));
+    exports.ALIGNMENT = void 0;
+    (function (ALIGNMENT) {
+        ALIGNMENT["START"] = "start";
+        ALIGNMENT["END"] = "end";
+        ALIGNMENT["CENTER"] = "center";
+    })(exports.ALIGNMENT || (exports.ALIGNMENT = {}));
+    exports.POSITION_STRATEGY = void 0;
+    (function (POSITION_STRATEGY) {
+        POSITION_STRATEGY["FIXED"] = "fixed";
+        POSITION_STRATEGY["ABSOLUTE"] = "absolute";
+    })(exports.POSITION_STRATEGY || (exports.POSITION_STRATEGY = {}));
+    var OVERLAY_BASE_DEFAULTS = {
+        offsetSize: 5,
+        fluidAlignment: false,
+        fluidSize: true,
+        position: [exports.POSITION.TOP, exports.ALIGNMENT.CENTER],
+        positionStrategy: exports.POSITION_STRATEGY.FIXED,
+        positionsAllowed: [exports.POSITION.TOP, exports.POSITION.BOTTOM, exports.POSITION.LEFT, exports.POSITION.RIGHT],
+        alignmentsAllowed: [exports.ALIGNMENT.CENTER, exports.ALIGNMENT.START, exports.ALIGNMENT.END],
+        safeSpace: { top: 0, bottom: 0, left: 0, right: 0 },
+        allowScrollListener: true,
+    };
+
+    var formatConsoleMsg = function (msg) { return msg.replace(/ {2,}/g, ''); };
+    var ERROR_NO_TRIGGER_PROVIDED = function () {
+        var msg = "\n        A11y Overlay Base:\n        No Trigger element or DOMRect provided!\n    ";
+        return formatConsoleMsg(msg);
+    };
+
+    var uid = 0;
+    var OverlayBase = /** @class */ (function () {
+        function OverlayBase() {
+            var _this = this;
+            this.uid = uid++;
+            this.overlayConfig = {};
+            this.boundaryRect = new DOMRect(0, 0, this.viewportSize.width, this.viewportSize.height);
+            this.isAttached = false;
+            this.resize$ = new rxjs.Subject();
+            this.resizeFn = function () { return _this.resize$.next(); };
+            this.scroll$ = new rxjs.Subject();
+            this.scrollFn = function () { return _this.scroll$.next(); };
+            this.boundaryScroll$ = new rxjs.Subject();
+            this.boundaryScrollFn = function () { return _this.boundaryScroll$.next(); };
+            /**
+             * @description
+             * Allowed Positions & Alignments provided by the user.
+             */
+            this.allowed = {
+                positions: OVERLAY_BASE_DEFAULTS.positionsAllowed,
+                alignments: OVERLAY_BASE_DEFAULTS.alignmentsAllowed,
+            };
+            /**
+             * @description
+             * An array of the listeners (for repositioning purposes).
+             */
+            this.listeners = [];
+            /**
+             * @description
+             * To allow listening on page scrolling for repositioning.
+             */
+            this.allowScrollListener = true;
+            /**
+             * @description
+             * Max `width` & `height` values allowed for the Overlay to perform
+             * proper calculations in case `fluidSize` is active.
+             */
+            this.maxSize = {
+                width: null,
+                height: null,
+            };
+            /**
+             * @description
+             * This will provide the side of the Viewport/Boundary where the Overlay would be out of
+             * in case `fluidAlignment` is active and the Overlay, by the chosen alignment, is out of the visible area.
+             */
+            this.overlayOutside = undefined;
+        }
+        Object.defineProperty(OverlayBase.prototype, "viewportSize", {
+            /**
+             * @description
+             * The Viewport size (without the scrollbars into consideration).
+             */
+            get: function () {
+                return {
+                    width: document.documentElement.clientWidth,
+                    height: document.documentElement.clientHeight,
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "viewportSizeSafe", {
+            /**
+             * @description
+             * The Viewport safe size.
+             * This will return width/height values taking into consideration a given custom Boundary and/or Safe Space.
+             */
+            get: function () {
+                return this.viewportSafe;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getCurrentPosition", {
+            /**
+             * @description
+             * The chosen Position by the calculations.
+             */
+            get: function () {
+                return this.currentPosition;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getCurrentAlignment", {
+            /**
+             * @description
+             * The chosen Alignment by the calculations.
+             */
+            get: function () {
+                return this.currentAlignment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Checks that either TOP or BOTTOM positions are inside or outside the visible area.
+         *
+         * @param { number } valueTop - The numeric value for TOP position.
+         * @param { number } valueBottom - The numeric value for BOTTOM position.
+         */
+        OverlayBase.prototype.overlayOutsideCheckY = function (valueTop, valueBottom) {
+            this.overlayOutside = valueTop < 0 ? exports.POSITION.TOP : valueBottom < 0 ? exports.POSITION.BOTTOM : undefined;
+        };
+        /**
+         * @description
+         * Checks that either LEFT or RIGHT positions are inside or outside the visible area.
+         *
+         * @param { number } valueLeft - The numeric value for LEFT position.
+         * @param { number } valueRight - The numeric value for RIGHT position.
+         */
+        OverlayBase.prototype.overlayOutsideCheckX = function (valueLeft, valueRight) {
+            this.overlayOutside = valueLeft < 0 ? exports.POSITION.LEFT : valueRight < 0 ? exports.POSITION.RIGHT : undefined;
+        };
+        Object.defineProperty(OverlayBase.prototype, "triggerElement", {
+            /**
+             * @description
+             * The Trigger element to which the Overlay will be attached to.
+             */
+            get: function () {
+                return this.overlayConfig.trigger;
+            },
+            set: function (triggerElement) {
+                this.overlayConfig.trigger = triggerElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "overlayElement", {
+            /**
+             * @description
+             * The Overlay element.
+             */
+            get: function () {
+                return this.overlayMainElement;
+            },
+            set: function (overlayElement) {
+                var overlayInnerElement = overlayElement === null || overlayElement === void 0 ? void 0 : overlayElement.querySelector('[overlay-wrapper]');
+                this.overlayMainElement = (overlayInnerElement || overlayElement);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "overlayPosition", {
+            /**
+             * @description
+             * Process and save the desired position & alignment.
+             */
+            set: function (position) {
+                var _a, _b, _c, _d, _e, _f;
+                var defaultValues = OVERLAY_BASE_DEFAULTS.position;
+                if (!position)
+                    position = [undefined, undefined];
+                if (typeof position === 'string') {
+                    position = position.split('-').map(function (pos) { return pos.toLowerCase().trim(); });
+                }
+                if (!position[0])
+                    position[0] = (_b = (_a = this.desiredPosition) !== null && _a !== void 0 ? _a : this.allowed.positions[0]) !== null && _b !== void 0 ? _b : defaultValues[0];
+                if (!position[1])
+                    position[1] = (_d = (_c = this.desiredAlignment) !== null && _c !== void 0 ? _c : this.allowed.alignments[0]) !== null && _d !== void 0 ? _d : defaultValues[1];
+                var isValidPosition = this.isValidPosition(position[0]) && this.isPositionAllowed(position[0]);
+                this.desiredPosition = isValidPosition ? position[0] : (_e = this.allowed.positions[0]) !== null && _e !== void 0 ? _e : exports.POSITION.TOP;
+                var isValidAlignment = this.isValidAlignment(position[1]) && this.isAlignmentAllowed(position[1]);
+                var defaultAlignment = this.isAlignmentCenterAllowed
+                    ? exports.ALIGNMENT.CENTER
+                    : exports.ALIGNMENT.START;
+                this.desiredAlignment = isValidAlignment ? position[1] : (_f = this.allowed.alignments[0]) !== null && _f !== void 0 ? _f : defaultAlignment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Verifies if the given position is a valid value.
+         *
+         * @param { string } position - A given position (top, bottom, left, right).
+         * @returns { boolean }
+         */
+        OverlayBase.prototype.isValidPosition = function (position) {
+            return Object.values(exports.POSITION).includes(position);
+        };
+        /**
+         * @description
+         * Verifies if the given alignment is a valid value.
+         *
+         * @param { string } alignment - A given alignment (start, center, end).
+         * @returns { boolean }
+         */
+        OverlayBase.prototype.isValidAlignment = function (alignment) {
+            return Object.values(exports.ALIGNMENT).includes(alignment);
+        };
+        Object.defineProperty(OverlayBase.prototype, "positionStrategy", {
+            /**
+             * @description
+             * The position strategy to use (Fixed or Absolute).
+             */
+            get: function () {
+                var _a;
+                return ((_a = this.overlayConfig.positionStrategy) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.positionStrategy);
+            },
+            set: function (positionStrategy) {
+                positionStrategy = positionStrategy === null || positionStrategy === void 0 ? void 0 : positionStrategy.toLowerCase().trim();
+                this.overlayConfig.positionStrategy = Object.values(exports.POSITION_STRATEGY).includes(positionStrategy)
+                    ? positionStrategy
+                    : OVERLAY_BASE_DEFAULTS.positionStrategy;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "positionsAllowed", {
+            /**
+             * @description
+             * Sets the allowed positions.
+             */
+            set: function (allowed) {
+                if (typeof allowed === 'string')
+                    allowed = allowed.split(',');
+                allowed = allowed
+                    .map(function (position) { return position.toLowerCase().trim(); })
+                    .filter(this.isValidPosition);
+                this.allowed.positions = allowed.length
+                    ? allowed
+                    : OVERLAY_BASE_DEFAULTS.positionsAllowed;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "oppositePositionsAllowed", {
+            /**
+             * @description
+             * Sets the allowed opposite positions.
+             */
+            set: function (position) {
+                var _a, _b;
+                position = (_a = position !== null && position !== void 0 ? position : this.desiredPosition) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.position;
+                if (typeof position === 'string')
+                    position = position.split('-');
+                if (!this.isValidPosition(position[0]))
+                    position[0] = (_b = this.desiredPosition) !== null && _b !== void 0 ? _b : exports.POSITION.TOP;
+                var opposites = {
+                    top: exports.POSITION.BOTTOM,
+                    bottom: exports.POSITION.TOP,
+                    left: exports.POSITION.RIGHT,
+                    right: exports.POSITION.LEFT,
+                };
+                this.allowed.positions = [position[0], opposites[position[0]]];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Verifies if the given position is allowed.
+         *
+         * @param { string } position - A given position (top, bottom, left, right).
+         * @returns { boolean }
+         */
+        OverlayBase.prototype.isPositionAllowed = function (position) {
+            return this.allowed.positions.includes(position);
+        };
+        Object.defineProperty(OverlayBase.prototype, "alignmentsAllowed", {
+            /**
+             * @description
+             * Sets the allowed alignments.
+             */
+            set: function (allowed) {
+                if (allowed === 'edges') {
+                    this.allowed.alignments = [exports.ALIGNMENT.START, exports.ALIGNMENT.END];
+                }
+                else if (allowed === 'center' && this.fluidAlignment) {
+                    this.allowed.alignments = [exports.ALIGNMENT.CENTER];
+                }
+                else {
+                    if (typeof allowed === 'string')
+                        allowed = allowed.split(',');
+                    allowed = allowed
+                        .map(function (alignment) { return alignment.toLowerCase().trim(); })
+                        .filter(this.isValidAlignment);
+                    this.allowed.alignments = allowed.length
+                        ? allowed
+                        : OVERLAY_BASE_DEFAULTS.alignmentsAllowed;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Verifies if the given alignment is allowed.
+         *
+         * @param { string } alignment - A given alignment (start, center, end).
+         * @returns { boolean }
+         */
+        OverlayBase.prototype.isAlignmentAllowed = function (alignment) {
+            return this.allowed.alignments.includes(alignment);
+        };
+        Object.defineProperty(OverlayBase.prototype, "isAlignmentStartAllowed", {
+            get: function () {
+                return this.isAlignmentAllowed(exports.ALIGNMENT.START);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isAlignmentCenterAllowed", {
+            get: function () {
+                return this.isAlignmentAllowed(exports.ALIGNMENT.CENTER);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isAlignmentEndAllowed", {
+            get: function () {
+                return this.isAlignmentAllowed(exports.ALIGNMENT.END);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isAlignmentCenterOnly", {
+            get: function () {
+                return this.allowed.alignments.length === 1 && this.allowed.alignments[0] === exports.ALIGNMENT.CENTER;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isDesiredAlignmentStart", {
+            get: function () {
+                return this.desiredAlignment === exports.ALIGNMENT.START;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isDesiredAlignmentCenter", {
+            get: function () {
+                return this.desiredAlignment === exports.ALIGNMENT.CENTER;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isDesiredAlignmentEnd", {
+            get: function () {
+                return this.desiredAlignment === exports.ALIGNMENT.END;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "boundaryElement", {
+            /**
+             * @description
+             * Sets a custom Boundary element.
+             *
+             * @default <body>
+             */
+            get: function () {
+                var _a;
+                return (_a = this.overlayConfig.boundary) !== null && _a !== void 0 ? _a : document.body;
+            },
+            set: function (boundaryElement) {
+                this.overlayConfig.boundary = boundaryElement instanceof HTMLElement ? boundaryElement : document.body;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isBoundaryCustom", {
+            /**
+             * @description
+             * Checks if the Boundary is the `<body>` or not (custom).
+             */
+            get: function () {
+                return this.boundaryElement.tagName !== 'BODY';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "safeSpace", {
+            /**
+             * @description
+             * Considers an extra (safe) space for the Viewport.
+             */
+            get: function () {
+                var _a;
+                return (_a = this.overlayConfig.safeSpace) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.safeSpace;
+            },
+            set: function (safeSpace) {
+                this.overlayConfig.safeSpace = Object.assign(Object.assign({}, OVERLAY_BASE_DEFAULTS.safeSpace), (safeSpace || {}));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "offsetSize", {
+            /**
+             * @description
+             * Distance between Trigger & Overlay.
+             */
+            get: function () {
+                var _a;
+                return (_a = this.overlayConfig.offsetSize) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.offsetSize;
+            },
+            set: function (offsetSize) {
+                var _a;
+                this.overlayConfig.offsetSize = (_a = this.getNumericValue(offsetSize)) !== null && _a !== void 0 ? _a : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "fluidAlignment", {
+            /**
+             * @description
+             * Overlay alignment is fluid, it doesn't make jumps between Start, Center or End.
+             * The Overlay will stick to the edges of the Viewport/Boundary when reaches any of them.
+             */
+            get: function () {
+                return !!this.overlayConfig.fluidAlignment;
+            },
+            set: function (fluidAlignment) {
+                this.overlayConfig.fluidAlignment = fluidAlignment;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "fluidSize", {
+            /**
+             * @description
+             * Overlay size is fluid, it will adapt its width (for `left`/`right` positions) or
+             * height (for `top`/`bottom` positions) to the available free space.
+             *
+             * Hand in hand with this, would be good to establish `maxSize` values.
+             */
+            get: function () {
+                var _a;
+                return (_a = this.overlayConfig.fluidSize) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.fluidSize;
+            },
+            set: function (fluidSize) {
+                this.overlayConfig.fluidSize = fluidSize;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isTop", {
+            get: function () {
+                return this.currentPosition === exports.POSITION.TOP;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isBottom", {
+            get: function () {
+                return this.currentPosition === exports.POSITION.BOTTOM;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isLeft", {
+            get: function () {
+                return this.currentPosition === exports.POSITION.LEFT;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isRight", {
+            get: function () {
+                return this.currentPosition === exports.POSITION.RIGHT;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isStart", {
+            get: function () {
+                return this.currentAlignment === exports.ALIGNMENT.START;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isCenter", {
+            get: function () {
+                return this.currentAlignment === exports.ALIGNMENT.CENTER;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isEnd", {
+            get: function () {
+                return this.currentAlignment === exports.ALIGNMENT.END;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "isTopBottom", {
+            get: function () {
+                return this.isTop || this.isBottom;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "triggerOverlayDistance", {
+            /**
+             * @description
+             * Distance between Trigger & Overlay.
+             */
+            get: function () {
+                return this.offsetSize;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "triggerOverlayDifferenceWidth", {
+            /**
+             * @description
+             * Real Width difference between Trigger & Overlay.
+             *
+             * Positive value means the Overlay is wider than the Trigger.
+             */
+            get: function () {
+                return this.overlayRect.width - this.triggerRect.width;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "triggerOverlayDifferenceHeight", {
+            /**
+             * @description
+             * Real Height difference between Trigger & Overlay.
+             *
+             * Positive value means the Overlay is higher than the Trigger.
+             */
+            get: function () {
+                return this.overlayRect.height - this.triggerRect.height;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "triggerOverlayOriginalDifferenceWidth", {
+            /**
+             * @description
+             * Original Width difference between Trigger & Overlay.
+             *
+             * Positive value means the Overlay is wider than the Trigger.
+             */
+            get: function () {
+                return this.overlayOriginalRect.width - this.triggerRect.width;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "triggerOverlayOriginalDifferenceHeight", {
+            /**
+             * @description
+             * Original Height difference between Trigger & Overlay.
+             *
+             * Positive value means the Overlay is higher than the Trigger.
+             */
+            get: function () {
+                return this.overlayOriginalRect.height - this.triggerRect.height;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Distance between Boundary & Viewport for the given Position.
+         *
+         * @param { OverlayBasePosition } position - A given position (top, bottom, left, right).
+         * @returns { number } The number of pixels between both elements.
+         */
+        OverlayBase.prototype.boundaryViewportDistance = function (position) {
+            var boundarySide = this.boundaryData[position];
+            if (position === exports.POSITION.TOP || position === exports.POSITION.LEFT)
+                return boundarySide;
+            if (position === exports.POSITION.BOTTOM)
+                return this.viewportSize.height - boundarySide;
+            return this.viewportSize.width - boundarySide; // right
+        };
+        /**
+         * @description
+         * Distance between Trigger & Boundary for the given Position.
+         * This will take into consideration a given custom Boundary and/or Safe Space.
+         *
+         * @param { OverlayBasePosition } position - A given position (top, bottom, left, right).
+         * @returns { number } The number of pixels between both elements.
+         */
+        OverlayBase.prototype.triggerBoundaryDistance = function (position) {
+            var safeSpace = this.isBoundaryCustom
+                ? Math.min(this.boundaryViewportDistance(position) - Number(this.safeSpace[position]), 0) * -1
+                : Number(this.safeSpace[position]);
+            var triggerPos = this.triggerRect[position];
+            var boundaryPos = this.boundaryData[position];
+            var distance = position === exports.POSITION.TOP || position === exports.POSITION.LEFT
+                ? triggerPos - boundaryPos
+                : boundaryPos - triggerPos;
+            return distance - safeSpace;
+        };
+        /**
+         * @description
+         * Verifies if there is enough vertical/horizontal available space for the Overlay to fit.
+         */
+        OverlayBase.prototype.enoughAlignmentSpace = function (position) {
+            var isTopBottom = position === exports.POSITION.TOP || position === exports.POSITION.BOTTOM;
+            return isTopBottom ? this.overlayFitsHorizontally : this.overlayFitsVertically;
+        };
+        Object.defineProperty(OverlayBase.prototype, "overlayFitsHorizontally", {
+            /**
+             * @description
+             * Verifies if there is enough horizontal available space (horizontal scrolling)
+             * for the Overlay to fit.
+             */
+            get: function () {
+                var triggerOverlayDifferenceWidth = this.triggerOverlayOriginalDifferenceWidth;
+                var distanceLeft = this.triggerBoundaryDistance(exports.POSITION.LEFT);
+                var distanceRight = this.triggerBoundaryDistance(exports.POSITION.RIGHT);
+                if (triggerOverlayDifferenceWidth >= 0) {
+                    return (distanceLeft >= 0 && distanceRight >= 0) || this.allowedOpposite;
+                }
+                var overlayTriggerDiff = triggerOverlayDifferenceWidth * -1;
+                var overlayTriggerDiffHalf = overlayTriggerDiff / 2;
+                var canBeStart = distanceLeft > 0 && distanceRight + overlayTriggerDiff > 0;
+                var canBeCenter = distanceLeft + overlayTriggerDiffHalf > 0 && distanceRight + overlayTriggerDiffHalf > 0;
+                var canBeEnd = distanceLeft + overlayTriggerDiff > 0 && distanceRight > 0;
+                var fitsHorizontally = (this.isAlignmentStartAllowed && canBeStart) ||
+                    (this.isAlignmentCenterAllowed && canBeCenter) ||
+                    (this.isAlignmentEndAllowed && canBeEnd);
+                return fitsHorizontally || this.allowedOpposite;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "overlayFitsVertically", {
+            /**
+             * @description
+             * Verifies if there is enough vertical available space (vertical scrolling)
+             * for the Overlay to fit.
+             */
+            get: function () {
+                var triggerOverlayDifferenceHeight = this.triggerOverlayOriginalDifferenceHeight;
+                var distanceTop = this.triggerBoundaryDistance(exports.POSITION.TOP);
+                var distanceBottom = this.triggerBoundaryDistance(exports.POSITION.BOTTOM);
+                if (triggerOverlayDifferenceHeight >= 0) {
+                    return (distanceTop >= 0 && distanceBottom >= 0) || this.allowedOpposite;
+                }
+                var overlayTriggerDiff = triggerOverlayDifferenceHeight * -1;
+                var overlayTriggerDiffHalf = overlayTriggerDiff / 2;
+                var canBeStart = distanceTop > 0 && distanceBottom + overlayTriggerDiff > 0;
+                var canBeCenter = distanceTop + overlayTriggerDiffHalf > 0 && distanceBottom + overlayTriggerDiffHalf > 0;
+                var canBeEnd = distanceTop + overlayTriggerDiff > 0 && distanceBottom > 0;
+                var fitsVertically = (this.isAlignmentStartAllowed && canBeStart) ||
+                    (this.isAlignmentCenterAllowed && canBeCenter) ||
+                    (this.isAlignmentEndAllowed && canBeEnd);
+                return fitsVertically || this.allowedOpposite;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Verifies if there is enough free space at the given position for the Overlay to fit.
+         *
+         * @param { OverlayBasePosition } position - A given position (top, bottom, left, right).
+         * @returns { boolean }
+         */
+        OverlayBase.prototype.enoughBoundarySpace = function (position) {
+            var enoughSpace = this.triggerBoundaryDistance(position);
+            if (position === exports.POSITION.TOP || position === exports.POSITION.BOTTOM) {
+                enoughSpace -= this.overlayOriginalRect.height + this.triggerOverlayDistance;
+            }
+            else {
+                enoughSpace -= this.overlayOriginalRect.width + this.triggerOverlayDistance;
+            }
+            return enoughSpace - 2 >= 0;
+        };
+        /**
+         * @description
+         * Returns if the given Position is allowed and has enough space for the Overlay to fit.
+         */
+        OverlayBase.prototype.canPositionAt = function (position) {
+            var canPositionAt = this.isPositionAllowed(position) &&
+                this.enoughBoundarySpace(position) &&
+                this.enoughAlignmentSpace(position);
+            return canPositionAt ? position : undefined;
+        };
+        Object.defineProperty(OverlayBase.prototype, "getAlignmentVertically", {
+            /**
+             * @description
+             * Calculates and returns the vertical alignment (for `left`/`right` positions).
+             */
+            get: function () {
+                var overlayTriggerDiff = this.triggerOverlayOriginalDifferenceHeight;
+                var overlayTriggerDiffHalf = overlayTriggerDiff / 2;
+                if (this.fluidAlignment && overlayTriggerDiff > 0)
+                    return this.desiredAlignment;
+                var distanceTop = this.triggerBoundaryDistance(exports.POSITION.TOP);
+                var distanceBottom = this.triggerBoundaryDistance(exports.POSITION.BOTTOM);
+                var canBeStart;
+                var canBeCentered;
+                var canBeEnd;
+                if (overlayTriggerDiff > 0) {
+                    // Overlay is higher than Trigger
+                    var topSpaceCentered = distanceTop - overlayTriggerDiffHalf > 0 ? distanceTop : 0;
+                    var bottomSpaceCentered = distanceBottom - overlayTriggerDiffHalf > 0 ? distanceBottom : 0;
+                    canBeStart = overlayTriggerDiff <= bottomSpaceCentered;
+                    canBeCentered = overlayTriggerDiffHalf <= topSpaceCentered && overlayTriggerDiffHalf <= bottomSpaceCentered;
+                    canBeEnd = overlayTriggerDiff <= topSpaceCentered;
+                }
+                else {
+                    // Overlay is shorter than Trigger
+                    overlayTriggerDiff = overlayTriggerDiff * -1;
+                    overlayTriggerDiffHalf = overlayTriggerDiffHalf * -1;
+                    canBeStart = distanceTop > 0 && distanceBottom + overlayTriggerDiff > 0;
+                    canBeCentered = distanceTop + overlayTriggerDiffHalf > 0 && distanceBottom + overlayTriggerDiffHalf > 0;
+                    canBeEnd = distanceTop + overlayTriggerDiff > 0 && distanceBottom > 0;
+                }
+                return this.getFinalAlignment(distanceTop, canBeCentered, canBeStart, canBeEnd);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getAlignmentHorizontally", {
+            /**
+             * @description
+             * Calculates and return the horizontal alignment (for `top`/`bottom` positions).
+             */
+            get: function () {
+                var overlayTriggerDiff = this.triggerOverlayOriginalDifferenceWidth;
+                var overlayTriggerDiffHalf = overlayTriggerDiff / 2;
+                if (this.fluidAlignment && overlayTriggerDiff > 0)
+                    return this.desiredAlignment;
+                var distanceLeft = this.triggerBoundaryDistance(exports.POSITION.LEFT);
+                var distanceRight = this.triggerBoundaryDistance(exports.POSITION.RIGHT);
+                var canBeStart;
+                var canBeCentered;
+                var canBeEnd;
+                if (overlayTriggerDiff > 0) {
+                    // Overlay is wider than Trigger
+                    var leftSpaceCentered = distanceLeft - overlayTriggerDiffHalf > 0 ? distanceLeft : 0;
+                    var rightSpaceCentered = distanceRight - overlayTriggerDiffHalf > 0 ? distanceRight : 0;
+                    canBeStart = overlayTriggerDiff <= rightSpaceCentered;
+                    canBeCentered = overlayTriggerDiffHalf <= leftSpaceCentered && overlayTriggerDiffHalf <= rightSpaceCentered;
+                    canBeEnd = overlayTriggerDiff <= leftSpaceCentered;
+                }
+                else {
+                    // Overlay is narrower than Trigger
+                    overlayTriggerDiff = overlayTriggerDiff * -1;
+                    overlayTriggerDiffHalf = overlayTriggerDiffHalf * -1;
+                    canBeStart = distanceLeft > 0 && distanceRight + overlayTriggerDiff > 0;
+                    canBeCentered = distanceLeft + overlayTriggerDiffHalf > 0 && distanceRight + overlayTriggerDiffHalf > 0;
+                    canBeEnd = distanceLeft + overlayTriggerDiff > 0 && distanceRight > 0;
+                }
+                return this.getFinalAlignment(distanceLeft, canBeCentered, canBeStart, canBeEnd);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Calculates the right alignment based on the
+         *
+         * @param { number } distance - The main distance (`top` for vertical alignment, `left` for horizontal alignment).
+         * @param { boolean } canBeCentered - If the Overlay can be aligned to the center.
+         * @param { boolean } canBeStart - If the Overlay can be aligned to the start.
+         * @param { boolean } canBeEnd - If the Overlay can be aligned to the end.
+         * @returns { OverlayBaseAlignment } The alignment.
+         */
+        OverlayBase.prototype.getFinalAlignment = function (distance, canBeCentered, canBeStart, canBeEnd) {
+            var isAlignmentStartAllowed = this.isAlignmentStartAllowed;
+            var isAlignmentCenterAllowed = this.isAlignmentCenterAllowed;
+            var isAlignmentEndAllowed = this.isAlignmentEndAllowed;
+            var isDesiredAllowedAlignmentStart = isAlignmentStartAllowed && this.isDesiredAlignmentStart;
+            var isDesiredAllowedAlignmentCenter = isAlignmentCenterAllowed && this.isDesiredAlignmentCenter;
+            var isDesiredAllowedAlignmentEnd = isAlignmentEndAllowed && this.isDesiredAlignmentEnd;
+            // Check for desired alignment
+            if (isDesiredAllowedAlignmentCenter && canBeCentered)
+                return exports.ALIGNMENT.CENTER;
+            if (isDesiredAllowedAlignmentStart && canBeStart)
+                return exports.ALIGNMENT.START;
+            if (isDesiredAllowedAlignmentEnd && canBeEnd)
+                return exports.ALIGNMENT.END;
+            // Check for allowed alignment
+            if (isAlignmentCenterAllowed && canBeCentered)
+                return exports.ALIGNMENT.CENTER;
+            if (isAlignmentStartAllowed && canBeStart)
+                return exports.ALIGNMENT.START;
+            if (isAlignmentEndAllowed && canBeEnd)
+                return exports.ALIGNMENT.END;
+            // Check for which edge has more free space
+            if (!isAlignmentCenterAllowed && isAlignmentStartAllowed && isAlignmentEndAllowed) {
+                return distance > 0 ? exports.ALIGNMENT.START : exports.ALIGNMENT.END;
+            }
+            // Check the defaults
+            if (isAlignmentStartAllowed && !isAlignmentEndAllowed && !isAlignmentCenterAllowed)
+                return exports.ALIGNMENT.START;
+            if (isAlignmentEndAllowed && !isAlignmentStartAllowed && !isAlignmentCenterAllowed)
+                return exports.ALIGNMENT.END;
+            return exports.ALIGNMENT.CENTER;
+        };
+        Object.defineProperty(OverlayBase.prototype, "getMaxSize", {
+            /**
+             * @description
+             * Calculates maximum size (`width` or `height`) in case the overlay does not fit in the screen.
+             */
+            get: function () {
+                var maxSize = { width: null, height: null };
+                if (this.fluidSize) {
+                    var size = this.triggerBoundaryDistance(this.currentPosition) - this.triggerOverlayDistance;
+                    if (this.isTopBottom) {
+                        maxSize.height = Math.min(this.maxSize.height || Infinity, size);
+                    }
+                    else {
+                        maxSize.width = Math.min(this.maxSize.width || Infinity, size);
+                    }
+                }
+                return maxSize;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getCalculatedPosition", {
+            /**
+             * @description
+             * Returns the final Position, Alignment, Render and MaxSize.
+             */
+            get: function () {
+                this.getElementsSizeInfo();
+                var isPositionFixed = this.positionStrategy === exports.POSITION_STRATEGY.FIXED;
+                var position = this.getPosition;
+                this.currentPosition = position;
+                var alignment = this.getAlignment;
+                this.currentAlignment = alignment;
+                var render = Object.assign(Object.assign({}, (isPositionFixed ? this.getFixedY : this.getAbsoluteY)), (isPositionFixed ? this.getFixedX : this.getAbsoluteX));
+                var maxSize = this.getMaxSize;
+                return { position: position, alignment: alignment, render: render, maxSize: maxSize };
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getFixedY", {
+            /**
+             * @description
+             * Returns the Overlay's `top` or `bottom` render Position/Alignment for the Strategy FIXED.
+             */
+            get: function () {
+                var posY = { top: null, bottom: null };
+                if (this.isTop) {
+                    posY.bottom = this.viewportSize.height - this.triggerRect.top + this.triggerOverlayDistance;
+                }
+                else if (this.isBottom) {
+                    posY.top = this.triggerRect.bottom + this.triggerOverlayDistance;
+                }
+                else {
+                    var triggerOverlayDifferenceHeight = this.triggerOverlayDifferenceHeight;
+                    var triggerOverlayDifferenceHalf = triggerOverlayDifferenceHeight / 2;
+                    // Fluid Alignment only works for Overlays that are higher than the Trigger
+                    if (this.fluidAlignment && triggerOverlayDifferenceHeight > 0) {
+                        var distanceTop = this.triggerBoundaryDistance(exports.POSITION.TOP);
+                        var distanceBottom = this.triggerBoundaryDistance(exports.POSITION.BOTTOM);
+                        var overlayTop = void 0;
+                        var posTop = void 0;
+                        var posBottom = void 0;
+                        if (this.isAlignmentCenterOnly || (this.isAlignmentCenterAllowed && this.isCenter)) {
+                            overlayTop = distanceTop - triggerOverlayDifferenceHalf;
+                            posTop = this.triggerRect.top - triggerOverlayDifferenceHalf;
+                            posBottom = distanceBottom - triggerOverlayDifferenceHalf;
+                        }
+                        else if (this.isStart) {
+                            overlayTop = distanceTop;
+                            posTop = this.triggerRect.top;
+                            posBottom = distanceBottom - triggerOverlayDifferenceHeight;
+                        }
+                        else if (this.isEnd) {
+                            overlayTop = distanceTop - triggerOverlayDifferenceHeight;
+                            posTop = this.triggerRect.top - triggerOverlayDifferenceHeight;
+                            posBottom = distanceBottom;
+                        }
+                        this.overlayOutsideCheckY(overlayTop, posBottom);
+                        if (posBottom > 0) {
+                            posY.top = Math.max(posTop, this.boundaryViewportDistance(exports.POSITION.TOP), Number(this.safeSpace.top));
+                        }
+                        else {
+                            posY.bottom = Math.max(posBottom, this.boundaryViewportDistance(exports.POSITION.BOTTOM), Number(this.safeSpace.bottom));
+                        }
+                    }
+                    else {
+                        if (this.isStart) {
+                            posY.top = this.triggerRect.top;
+                        }
+                        else if (this.isEnd) {
+                            posY.bottom = this.viewportSize.height - this.triggerRect.bottom;
+                        }
+                        else {
+                            posY.top = this.triggerRect.top - triggerOverlayDifferenceHalf;
+                        }
+                    }
+                }
+                return posY;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getFixedX", {
+            /**
+             * @description
+             * Returns the Overlay's `left` or `right` render Position/Alignment for the Strategy FIXED.
+             */
+            get: function () {
+                var posX = { left: null, right: null };
+                if (this.isLeft) {
+                    posX.right = this.viewportSize.width - this.triggerRect.left + this.triggerOverlayDistance;
+                }
+                else if (this.isRight) {
+                    posX.left = this.triggerRect.right + this.triggerOverlayDistance;
+                }
+                else {
+                    var triggerOverlayDifferenceWidth = this.triggerOverlayDifferenceWidth;
+                    var triggerOverlayDifferenceHalf = triggerOverlayDifferenceWidth / 2;
+                    // Fluid Alignment only works for Overlays that are wider than the Trigger
+                    if (this.fluidAlignment && triggerOverlayDifferenceWidth > 0) {
+                        var distanceLeft = this.triggerBoundaryDistance(exports.POSITION.LEFT);
+                        var distanceRight = this.triggerBoundaryDistance(exports.POSITION.RIGHT);
+                        var overlayLeft = void 0;
+                        var posLeft = void 0;
+                        var posRight = void 0;
+                        if (this.isAlignmentCenterOnly || (this.isAlignmentCenterAllowed && this.isCenter)) {
+                            overlayLeft = distanceLeft - triggerOverlayDifferenceHalf;
+                            posLeft = this.triggerRect.left - triggerOverlayDifferenceHalf;
+                            posRight = distanceRight - triggerOverlayDifferenceHalf;
+                        }
+                        else if (this.isStart) {
+                            overlayLeft = distanceLeft;
+                            posLeft = this.triggerRect.left;
+                            posRight = distanceRight - triggerOverlayDifferenceWidth;
+                        }
+                        else if (this.isEnd) {
+                            overlayLeft = distanceLeft - triggerOverlayDifferenceWidth;
+                            posLeft = this.triggerRect.left - triggerOverlayDifferenceWidth;
+                            posRight = distanceRight;
+                        }
+                        this.overlayOutsideCheckX(overlayLeft, posRight);
+                        if (posRight > 0) {
+                            posX.left = Math.max(posLeft, this.boundaryViewportDistance(exports.POSITION.LEFT), Number(this.safeSpace.left));
+                        }
+                        else {
+                            posX.right = Math.max(posRight, this.boundaryViewportDistance(exports.POSITION.RIGHT), Number(this.safeSpace.right));
+                        }
+                    }
+                    else {
+                        if (this.isStart) {
+                            posX.left = this.triggerRect.left;
+                        }
+                        else if (this.isEnd) {
+                            posX.right = this.viewportSize.width - this.triggerRect.right;
+                        }
+                        else {
+                            posX.left = this.triggerRect.left - triggerOverlayDifferenceHalf;
+                        }
+                    }
+                }
+                return posX;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Returns the absolute offset distance for the given position.
+         *
+         * @param { 'left' | 'top' } position - A given position (left, top).
+         * @returns { number } The number of pixels between the chosen side and the Boundary.
+         */
+        OverlayBase.prototype.getAbsoluteOffset = function (position) {
+            var currentEl = this.triggerElement;
+            var offset = 0;
+            do {
+                offset += position === 'top' ? currentEl.offsetTop : currentEl.offsetLeft;
+                currentEl = currentEl.offsetParent;
+            } while (this.boundaryElement.contains(currentEl === null || currentEl === void 0 ? void 0 : currentEl.offsetParent));
+            return offset;
+        };
+        /**
+         * @description
+         * Returns the scroll distance for the given position.
+         *
+         * @param { 'left' | 'top' } position - A given position (left, top).
+         * @returns { number } The number of pixels scrolled on the chosen side for the Boundary.
+         */
+        OverlayBase.prototype.getAbsoluteScroll = function (position) {
+            var scrollElement = !this.isBoundaryCustom ? document.documentElement : this.boundaryElement;
+            return position === 'top' ? scrollElement.scrollTop : scrollElement.scrollLeft;
+        };
+        Object.defineProperty(OverlayBase.prototype, "getAbsoluteY", {
+            /**
+             * @description
+             * Returns the Overlay's `top` or `bottom` render Position/Alignment for the Strategy ABSOLUTE.
+             */
+            get: function () {
+                var posY = { top: null, bottom: null };
+                var offsetPosition = this.getAbsoluteOffset('top');
+                if (this.isTop) {
+                    posY.bottom = this.boundaryData.height - offsetPosition + this.triggerOverlayDistance;
+                }
+                else if (this.isBottom) {
+                    posY.top = offsetPosition + this.triggerRect.height + this.triggerOverlayDistance;
+                }
+                else {
+                    var triggerOverlayDifferenceHeight = this.triggerOverlayDifferenceHeight;
+                    var triggerOverlayDifferenceHalf = triggerOverlayDifferenceHeight / 2;
+                    // Fluid Alignment only works for Overlays that are higher than the Trigger
+                    if (this.fluidAlignment && triggerOverlayDifferenceHeight > 0) {
+                        var scrollTop = this.getAbsoluteScroll('top');
+                        var distanceTop = this.triggerBoundaryDistance(exports.POSITION.TOP);
+                        var distanceBottom = this.triggerBoundaryDistance(exports.POSITION.BOTTOM);
+                        var boundaryTop = this.isBoundaryCustom ? this.boundaryRect.top : 0;
+                        var boundaryBottom = this.isBoundaryCustom
+                            ? this.viewportSize.height - this.boundaryRect.bottom + this.boundaryScrollSize.horizontal
+                            : 0;
+                        var posTop = void 0;
+                        var posBottom = void 0;
+                        if (this.isAlignmentCenterOnly || (this.isAlignmentCenterAllowed && this.isCenter)) {
+                            posTop = distanceTop - triggerOverlayDifferenceHalf;
+                            posBottom = distanceBottom - triggerOverlayDifferenceHalf;
+                        }
+                        else if (this.isStart) {
+                            posTop = distanceTop;
+                            posBottom = distanceBottom - triggerOverlayDifferenceHeight;
+                        }
+                        else if (this.isEnd) {
+                            posTop = distanceTop - triggerOverlayDifferenceHeight;
+                            posBottom = distanceBottom;
+                        }
+                        this.overlayOutsideCheckY(posTop, posBottom);
+                        if (posBottom > 0) {
+                            posY.top =
+                                Math.max(posTop + scrollTop, scrollTop) - Math.min(boundaryTop - Number(this.safeSpace.top), 0);
+                        }
+                        else {
+                            posY.bottom = scrollTop * -1 - Math.min(boundaryBottom - Number(this.safeSpace.bottom), 0);
+                        }
+                    }
+                    else {
+                        if (this.isStart) {
+                            posY.top = offsetPosition;
+                        }
+                        else if (this.isEnd) {
+                            posY.top = offsetPosition - triggerOverlayDifferenceHeight;
+                        }
+                        else {
+                            posY.top = offsetPosition - triggerOverlayDifferenceHalf;
+                        }
+                    }
+                }
+                return posY;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getAbsoluteX", {
+            /**
+             * @description
+             * Returns the Overlay's `left` or `right` render Position/Alignment for the Strategy ABSOLUTE.
+             */
+            get: function () {
+                var posX = { left: null, right: null };
+                var offsetPosition = this.getAbsoluteOffset('left');
+                if (this.isLeft) {
+                    posX.right = this.boundaryData.width - offsetPosition + this.triggerOverlayDistance;
+                }
+                else if (this.isRight) {
+                    posX.left = offsetPosition + this.triggerRect.width + this.triggerOverlayDistance;
+                }
+                else {
+                    var triggerOverlayDifferenceWidth = this.triggerOverlayDifferenceWidth;
+                    var triggerOverlayDifferenceHalf = triggerOverlayDifferenceWidth / 2;
+                    // Fluid Alignment only works for Overlays that are wider than the Trigger
+                    if (this.fluidAlignment && triggerOverlayDifferenceWidth > 0) {
+                        var scrollLeft = this.getAbsoluteScroll('left');
+                        var distanceLeft = this.triggerBoundaryDistance(exports.POSITION.LEFT);
+                        var distanceRight = this.triggerBoundaryDistance(exports.POSITION.RIGHT);
+                        var boundaryLeft = this.isBoundaryCustom ? this.boundaryRect.left : 0;
+                        var boundaryRight = this.isBoundaryCustom
+                            ? this.viewportSize.width - this.boundaryRect.right + this.boundaryScrollSize.vertical
+                            : 0;
+                        var posLeft = void 0;
+                        var posRight = void 0;
+                        if (this.isAlignmentCenterOnly || (this.isAlignmentCenterAllowed && this.isCenter)) {
+                            posLeft = distanceLeft - triggerOverlayDifferenceHalf;
+                            posRight = distanceRight - triggerOverlayDifferenceHalf;
+                        }
+                        else if (this.isStart) {
+                            posLeft = distanceLeft;
+                            posRight = distanceRight - triggerOverlayDifferenceWidth;
+                        }
+                        else if (this.isEnd) {
+                            posLeft = distanceLeft - triggerOverlayDifferenceWidth;
+                            posRight = distanceRight;
+                        }
+                        this.overlayOutsideCheckX(posLeft, posRight);
+                        if (posRight > 0) {
+                            posX.left =
+                                Math.max(posLeft + scrollLeft, scrollLeft) -
+                                    Math.min(boundaryLeft - Number(this.safeSpace.left), 0);
+                        }
+                        else {
+                            posX.right = scrollLeft * -1 - Math.min(boundaryRight - Number(this.safeSpace.right), 0);
+                        }
+                    }
+                    else {
+                        if (this.isStart) {
+                            posX.left = offsetPosition;
+                        }
+                        else if (this.isEnd) {
+                            posX.left = offsetPosition - triggerOverlayDifferenceWidth;
+                        }
+                        else {
+                            posX.left = offsetPosition - triggerOverlayDifferenceHalf;
+                        }
+                    }
+                }
+                return posX;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getAutoPosition", {
+            /**
+             * @description
+             * If the Trigger is (at least partially) outside of the Boundary on one or both of its axes
+             * and the viewport size is not big enough to fit the overlay,
+             * it'll choose the side with more available space.
+             */
+            get: function () {
+                var _g;
+                var viewport = this.viewportSizeSafe;
+                var squareAreas = (_g = {},
+                    _g[exports.POSITION.TOP] = this.triggerBoundaryDistance(exports.POSITION.TOP) * viewport.width,
+                    _g[exports.POSITION.BOTTOM] = this.triggerBoundaryDistance(exports.POSITION.BOTTOM) * viewport.width,
+                    _g[exports.POSITION.LEFT] = this.triggerBoundaryDistance(exports.POSITION.LEFT) * viewport.height,
+                    _g[exports.POSITION.RIGHT] = this.triggerBoundaryDistance(exports.POSITION.RIGHT) * viewport.height,
+                    _g);
+                var maxVisibleArea = -Infinity;
+                var availablePosition;
+                for (var theArea in squareAreas) {
+                    var area = theArea;
+                    var squareArea = squareAreas[area];
+                    if (this.isPositionAllowed(area) && squareArea > maxVisibleArea) {
+                        maxVisibleArea = squareArea;
+                        availablePosition = area;
+                    }
+                }
+                return availablePosition;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getPosition", {
+            /**
+             * @description
+             * Returns the final position.
+             */
+            get: function () {
+                var position = undefined;
+                var order;
+                if (this.desiredPosition === exports.POSITION.TOP) {
+                    order = [exports.POSITION.TOP, exports.POSITION.BOTTOM, exports.POSITION.LEFT, exports.POSITION.RIGHT];
+                }
+                else if (this.desiredPosition === exports.POSITION.BOTTOM) {
+                    order = [exports.POSITION.BOTTOM, exports.POSITION.TOP, exports.POSITION.LEFT, exports.POSITION.RIGHT];
+                }
+                else if (this.desiredPosition === exports.POSITION.LEFT) {
+                    order = [exports.POSITION.LEFT, exports.POSITION.RIGHT, exports.POSITION.TOP, exports.POSITION.BOTTOM];
+                }
+                else if (this.desiredPosition === exports.POSITION.RIGHT) {
+                    order = [exports.POSITION.RIGHT, exports.POSITION.LEFT, exports.POSITION.TOP, exports.POSITION.BOTTOM];
+                }
+                for (var pos = 0; pos < order.length; pos++) {
+                    position = this.canPositionAt(order[pos]);
+                    if (position)
+                        break;
+                }
+                // If no position found, check for best option based on free space
+                return position || this.getAutoPosition;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "getAlignment", {
+            /**
+             * @description
+             * Returns the final alignment.
+             */
+            get: function () {
+                if (this.isTopBottom)
+                    return this.getAlignmentHorizontally;
+                return this.getAlignmentVertically;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(OverlayBase.prototype, "overlayListeners$", {
+            /**
+             * @description
+             * Base listeners for Page Scroll, Page Resize, Boundary Scroll & Update on demand.
+             */
+            get: function () {
+                return rxjs.from(this.listeners).pipe(operators.mergeAll());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /**
+         * @description
+         * Update on demand to return recalculated position/alignment data.
+         */
+        OverlayBase.prototype.recalculate = function () {
+            this.forceUpdate$.next();
+        };
+        /**
+         * @description
+         * Update Overlay ClientRect data on demand in case its content changes.
+         *
+         * This will force recalculations.
+         */
+        OverlayBase.prototype.updateOverlaySize = function () {
+            this.getOverlayOriginalClientRect(true);
+            this.recalculate();
+        };
+        /**
+         * @description
+         * Sets / updates the basic config.
+         */
+        OverlayBase.prototype.setBaseConfig = function (customConfig) {
+            var _a, _b, _c;
+            if (!customConfig)
+                return;
+            if ('trigger' in customConfig) {
+                if (customConfig.trigger instanceof HTMLElement) {
+                    this.triggerElement = customConfig.trigger;
+                }
+                else {
+                    this.virtualTriggerRect = customConfig.trigger;
+                }
+            }
+            if ('fluidAlignment' in customConfig)
+                this.fluidAlignment = (_a = this.getBooleanValue(customConfig.fluidAlignment)) !== null && _a !== void 0 ? _a : OVERLAY_BASE_DEFAULTS.fluidAlignment;
+            if ('fluidSize' in customConfig)
+                this.fluidSize = (_b = this.getBooleanValue(customConfig.fluidSize)) !== null && _b !== void 0 ? _b : OVERLAY_BASE_DEFAULTS.fluidSize;
+            if ('alignmentsAllowed' in customConfig)
+                this.alignmentsAllowed = customConfig.alignmentsAllowed;
+            if ('positionsAllowed' in customConfig) {
+                var positionsAllowed = customConfig.positionsAllowed;
+                this.allowedOpposite =
+                    typeof positionsAllowed === 'string' && positionsAllowed.toLowerCase().trim() === 'opposite';
+                if (!this.allowedOpposite)
+                    this.positionsAllowed = positionsAllowed;
+            }
+            // First input will not have desired position nor alignment.
+            var noDefaultPositionOrAlignment = !this.desiredPosition && !this.desiredAlignment;
+            if (noDefaultPositionOrAlignment || 'position' in customConfig) {
+                if (this.allowedOpposite)
+                    this.oppositePositionsAllowed = customConfig.position;
+                this.overlayPosition = customConfig.position;
+            }
+            else {
+                if (this.allowedOpposite) {
+                    this.oppositePositionsAllowed = undefined;
+                }
+                else {
+                    this.overlayPosition = undefined;
+                }
+            }
+            if ('positionStrategy' in customConfig)
+                this.positionStrategy = customConfig.positionStrategy;
+            if ('boundary' in customConfig)
+                this.boundaryElement = customConfig.boundary;
+            if ('safeSpace' in customConfig)
+                this.safeSpace = customConfig.safeSpace;
+            if ('offsetSize' in customConfig)
+                this.offsetSize = customConfig.offsetSize;
+            if ('allowScrollListener' in customConfig)
+                this.allowScrollListener =
+                    (_c = this.getBooleanValue(customConfig.allowScrollListener)) !== null && _c !== void 0 ? _c : OVERLAY_BASE_DEFAULTS.allowScrollListener;
+        };
+        /**
+         * @description
+         * Assigns the provided overlay element and starts listening to the scroll & resize to calculate and return the best position for it.
+         *
+         * @param { HTMLElement } overlayElement - The `overlay` HTML element to base all calculation on.
+         * @param { number } debounceTimeMs - Delay between emissions.
+         * @returns { Observable<OverlayBaseCalculatedPosition> } An `observable` with
+         *  - the `position` (top, bottom, left, right),
+         *  - the `alignment` (start, center, end),
+         *  - the position to `render` (top, bottom, left, right) based on the chosen `position strategy` and
+         *  - the `max size` (if "`fluidSize`" is active) that'll provide max width/height so the overlay is always visible on screen.
+         */
+        OverlayBase.prototype.attachOverlay = function (overlayElement, debounceTimeMs) {
+            var _this = this;
+            if (debounceTimeMs === void 0) { debounceTimeMs = 10; }
+            if (!this.isAttached) {
+                this.overlayElement = overlayElement;
+                if (this.isBoundaryCustom) {
+                    this.boundaryElement.addEventListener('scroll', this.boundaryScrollFn);
+                }
+                this.forceUpdate$ = new rxjs.BehaviorSubject(undefined);
+                this.isDetached$ = new rxjs.Subject();
+                this.isAttached = true;
+                if (this.allowScrollListener && this.triggerElement) {
+                    window.addEventListener('scroll', this.scrollFn);
+                    this.listeners.push(this.scroll$);
+                }
+                window.addEventListener('resize', this.resizeFn);
+                this.listeners.push(this.resize$, this.boundaryScroll$, this.forceUpdate$);
+            }
+            return this.overlayListeners$.pipe(operators.debounceTime(debounceTimeMs), operators.map(function () { return _this.getCalculatedPosition; }));
+        };
+        /**
+         * @description
+         * Detaches the Overlay and removes the scroll listener for custom Boundary.
+         */
+        OverlayBase.prototype.detachOverlay = function () {
+            if (!this.isAttached)
+                return;
+            this.isAttached = false;
+            this.isDetached$.next();
+            this.isDetached$.complete();
+            this.forceUpdate$.complete();
+            window.removeEventListener('scroll', this.scrollFn);
+            window.removeEventListener('resize', this.resizeFn);
+            this.listeners.length = 0;
+            if (this.isBoundaryCustom) {
+                this.boundaryElement.removeEventListener('scroll', this.boundaryScrollFn);
+            }
+        };
+        /**
+         * @description
+         * Gets all the necessary ClientRect, Boundary and Viewport data.
+         */
+        OverlayBase.prototype.getElementsSizeInfo = function () {
+            this.getTriggerClientRect();
+            this.getOverlayClientRect();
+            this.getBoundaryClientRect();
+            this.getBoundaryScrollSize();
+            this.getBoundaryCalculatedRect();
+            this.getViewportSizeSafe();
+        };
+        OverlayBase.prototype.getTriggerClientRect = function () {
+            var _a;
+            this.triggerRect = this.virtualTriggerRect || ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect());
+            if (!this.triggerRect)
+                throw new Error(ERROR_NO_TRIGGER_PROVIDED());
+        };
+        OverlayBase.prototype.getOverlayClientRect = function () {
+            this.overlayRect = this.overlayElement.getBoundingClientRect();
+            this.getOverlayOriginalClientRect();
+        };
+        OverlayBase.prototype.getOverlayOriginalClientRect = function (forceUpdate) {
+            if (!this.overlayOriginalRect || forceUpdate) {
+                this.overlayOriginalRect = this.overlayElement.getBoundingClientRect();
+            }
+        };
+        OverlayBase.prototype.getBoundaryClientRect = function () {
+            var _a;
+            this.boundaryRect = (_a = this.boundaryElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        };
+        OverlayBase.prototype.getBoundaryCalculatedRect = function () {
+            var viewportSize = this.viewportSize;
+            var top = 0;
+            var bottom = viewportSize.height;
+            var left = 0;
+            var right = viewportSize.width;
+            var width = viewportSize.width;
+            var height = viewportSize.height;
+            if (this.isBoundaryCustom) {
+                var boundaryBottom = this.boundaryRect.bottom - this.boundaryScrollSize.horizontal;
+                var boundaryRight = this.boundaryRect.right - this.boundaryScrollSize.vertical;
+                height = boundaryBottom - this.boundaryRect.top;
+                width = boundaryRight - this.boundaryRect.left;
+                top = this.boundaryRect.top;
+                left = this.boundaryRect.left;
+                bottom = boundaryBottom;
+                right = boundaryRight;
+            }
+            this.boundaryData = { top: top, bottom: bottom, left: left, right: right, width: width, height: height };
+        };
+        OverlayBase.prototype.getBoundaryScrollSize = function () {
+            var vertical = this.isBoundaryCustom
+                ? this.boundaryElement.offsetWidth - this.boundaryElement.clientWidth
+                : 0;
+            var horizontal = this.isBoundaryCustom
+                ? this.boundaryElement.offsetHeight - this.boundaryElement.clientHeight
+                : 0;
+            this.boundaryScrollSize = { vertical: vertical, horizontal: horizontal };
+        };
+        OverlayBase.prototype.getViewportSizeSafe = function () {
+            var viewportSize = this.viewportSize;
+            this.viewportSafe = {
+                width: viewportSize.width -
+                    Math.max(this.boundaryViewportDistance(exports.POSITION.LEFT), Number(this.safeSpace.left)) -
+                    Math.max(this.boundaryViewportDistance(exports.POSITION.RIGHT), Number(this.safeSpace.right)),
+                height: viewportSize.height -
+                    Math.max(this.boundaryViewportDistance(exports.POSITION.TOP), Number(this.safeSpace.top)) -
+                    Math.max(this.boundaryViewportDistance(exports.POSITION.BOTTOM), Number(this.safeSpace.bottom)),
+            };
+        };
+        OverlayBase.prototype.getNumericValue = function (value) {
+            var isNumeric = function (val) {
+                var _a;
+                return ((_a = String(val)) === null || _a === void 0 ? void 0 : _a.trim().length) > 0 && !isNaN(Number(val !== null && val !== void 0 ? val : '!'));
+            };
+            var numericValue = parseFloat(String(value !== null && value !== void 0 ? value : ''));
+            if (!isNumeric(value) || isNaN(numericValue))
+                return null;
+            return numericValue;
+        };
+        OverlayBase.prototype.getBooleanValue = function (value) {
+            var isBoolean = function (val) {
+                var valueStr = String(val).trim();
+                return ['true', 'false'].indexOf(valueStr) !== -1;
+            };
+            try {
+                return isBoolean(value) ? JSON.parse(String(value)) : null;
+            }
+            catch (_a) {
+                return null;
+            }
+        };
+        return OverlayBase;
+    }());
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.OVERLAY_BASE_DEFAULTS = OVERLAY_BASE_DEFAULTS;
+    exports.OverlayBase = OverlayBase;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=a11y-ngx-overlay-base.umd.js.map