@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-util/es6/Popup.js

@@ -0,0 +1,991 @@
+import { Ext } from './Ext.js';
+import { EventDispatcher } from './EventDispatcher.js';
+import { Dom } from './Dom.js';
+
+/** @typedef {Object} Popup~Options
+* @description Popup options
+* @property {Popup~Positioning=} positioning="under" Avialable value are under, right, over, fixed, custom
+* @property {boolean=} autoHiding=true Hide on blur or clicking outside of popup elements
+* @property {boolean=} hoverToShow=false Show popup when mouse is over the attached element.
+* @property {boolean=} autoClipping=true Clip popup element when there is not enough space to show popup
+* @property {Element=} attachedElement=null Target element that will be used as a base for positioning.
+* @property {Element=} focusElement=null Additional element that can be focused without triggering autoHiding
+* @property {Array.<Element>=} focusElements=null Additional elements that can be focused without triggering autoHiding
+* @property {Element=} parentElement=body Element that popup will become a child
+* @property {Element=} contentElement=null Content element that will be moved out of document and added as a child of popup element
+* @property {Popup=} popupChild=null Popup instance that will be hidden when its parent is hidden
+* @property {boolean=} uiBlocking=false To attach overlay to block user from interact with ui behind popup
+* @property {boolean=} hideOnScroll=true If disabled, popup will not be hidden when scrolling
+* @property {Element=} zIndexReference=null Popup will be opened with zIndex greater than the given element
+*/
+
+/** @typedef {string} Popup~Positioning
+* @description Available positioning type are: <br>
+* <b>under</b> : Popup appears under the attached element (Default) <br>
+* <b>right</b> : Popup appears on the right side of the attached element <br>
+* <b>over</b>  : Popup appears on the top left of the attached element (i.e. over the element) <br>
+* <b>center</b>: Deprecated. Popup appears at the center of the screen. No element should be supplied <br>
+* <b>fixed</b> : Popup appears without any positioning <br>
+* <b>custom</b>: Popup appears without any positioning <br>
+*
+*/
+
+/** @event Popup#show
+* @description Fired before popup element entering the DOM tree
+* @type {Object}
+* @property {string} type="show"
+* @property {Element} target
+* @property {Element} currentTarget
+* @property {boolean} cancel=false Set to true to cancel the operation
+*/
+/** @event Popup#hide
+* @description Fired before popup element leaving the DOM tree
+* @type {Object}
+* @property {string} type="hide"
+* @property {Element} target
+* @property {Element} currentTarget
+* @property {boolean} cancel=false Set to true to cancel the operation
+*/
+/** @event Popup#shown
+* @description Fired after popup element entering the DOM tree and before positioning
+* @type {Object}
+* @property {string} type="shown"
+* @property {Element} target
+* @property {Element} currentTarget
+*/
+/** @event Popup#hidden
+* @description Fired after popup element leaving the DOM tree
+* @type {Object}
+* @property {string} type="hidden"
+* @property {Element} target
+* @property {Element} currentTarget
+*/
+/** @event Popup#positioning
+* @description Fired after each positioning operation
+* @type {Object}
+* @property {Element} target
+* @property {Element} currentTarget
+*/
+
+/** Check if one of the target elements of the MouseEvent is contained inside the parentElement
+* @public
+* @param {Element} parentElem
+* @param {MouseEvent} e
+* @return {boolean}
+*/
+let containElements = function (parentElem, e) {
+	// Use e.composedPath() instead of e.target (if composedPath exists)
+	// when popup inside custom element and popup has been clicked
+	// e.target appear to be custom element itself (we expect to be element item inside popup)
+	// so use e.composedPath() will make the trick
+	if (e.composedPath) {
+		let elems = e.composedPath();
+		if (elems.indexOf(parentElem) >= 0) {
+			return true;
+		}
+		return parentElem.contains(elems[0]);
+	}
+	return parentElem.contains(e.target);
+};
+
+/** @constructor
+* @extends {EventDispatcher}
+* @param {(Element|Popup~Options)=} popupElem Popup element or popup configuration object
+* @param {Popup~Options=} options
+* @example
+* let pu = new Popup(popupElem);
+* pu.attachTo(some_elem);
+* pu.show();
+*/
+let Popup = function (popupElem, options) {
+	let t = this;
+	t["show"] = t.show = t.show.bind(t);
+	t["hide"] = t.hide = t.hide.bind(t);
+	t["toggle"] = t.toggle = t.toggle.bind(t);
+	t._onBlur = t._onBlur.bind(t); // For auto hiding
+	t._onBlurTimer = t._onBlurTimer.bind(t); // For auto hiding
+	t._onResize = t._onResize.bind(t); // For throttling
+	t.updatePosition = t.updatePosition.bind(t); // For throttling
+	t._onScroll = t._onScroll.bind(t); // For throttling
+	t._onMouseOver = t._onMouseOver.bind(t);
+	t._onMouseOut = t._onMouseOut.bind(t);
+	t._onMouseOverTimeout = t._onMouseOverTimeout.bind(t);
+
+	if (popupElem && popupElem.nodeType !== 1) {
+		options = popupElem;
+		popupElem = null;
+	}
+
+	if (popupElem) {
+		t._elem = popupElem;
+		Dom.removeParent(popupElem);
+	} else {
+		t._elem = document.createElement("div");
+	}
+	t._elem.style.position = "fixed";
+	t._elem.style.left = "0";
+	t._elem.style.top = "0";
+	t._elem.style.display = "inline-block";
+
+	t._focusElements = [t._elem];
+	t._children = [];
+	t._evtArg = {
+		"target": t._elem,
+		"currentTarget": t._elem
+	};
+
+	t._parentElement = document.body;
+	t.init(options);
+};
+Ext.inherits(Popup, EventDispatcher);
+
+/** @type {Element}
+* @private
+*/
+Popup.prototype._elem = null;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._inDoc = false;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._autoHiding = true;
+/** @type {number}
+* @private
+*/
+Popup.prototype._blurTimer = 0;
+/** @type {number}
+* @private
+*/
+Popup.prototype._resizeTimer = 0;
+
+/** @type {Element}
+* @private
+*/
+Popup.prototype._attachedElem = null;
+/** @type {Element}
+* @private
+*/
+Popup.prototype._zIndexRef = null;
+/** @type {string}
+* @private
+*/
+Popup.prototype._positioning = "under";
+/** @type {!Array.<Element>}
+* @private
+*/
+Popup.prototype._focusElements;
+/** @type {Element}
+* @private
+*/
+Popup.prototype._parentElement = null;
+/** @type {!Array.<Popup>}
+* @private
+*/
+Popup.prototype._children;
+/** @type {!Object}
+* @private
+*/
+Popup.prototype._evtArg;
+
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._autoClipping = true;
+/** @type {number|string|null}
+* @private
+*/
+Popup.prototype._origW = null;
+/** @type {number|string|null}
+* @private
+*/
+Popup.prototype._origH = null;
+
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._hoverToShow = false;
+/** @type {number}
+* @private
+*/
+Popup.prototype._hoverTimer = 0;
+/** @type {number}
+* @private
+*/
+Popup.prototype._gap = 0;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._uiBlocking = false;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._hideOnScroll = true;
+/** @type {boolean}
+* @private
+*/
+Popup.prototype._autoRepositioning = true;
+
+/** @public */
+Popup.prototype.dispose = function () {
+	this._removeEventListeners();
+	this._clearMouseOverTimer();
+
+	for (let i = this._children.length; --i >= 0;) {
+		this._children[i].dispose();
+	}
+
+	this._inDoc = false;
+	Dom.removeParent(this._elem);
+	Dom.removeParent(this._overlay);
+	this._elem = this._parentElement = this._attachedElem = this._zIndexRef = null;
+};
+/** @public
+* @return {Element}
+*/
+Popup.prototype.getElement = function () {
+	return this._elem;
+};
+/** @public
+* @param {Element} childElem
+*/
+Popup.prototype.appendChild = function (childElem) {
+	if (childElem) {
+		this._elem.appendChild(childElem);
+	}
+};
+
+/** @public
+* @param {boolean=} opt_bool
+*/
+Popup.prototype.disable = function (opt_bool) {
+	this._disabled = opt_bool !== false;
+};
+/** @public
+* @param {boolean=} opt_bool
+*/
+Popup.prototype.enable = function (opt_bool) {
+	this._disabled = opt_bool === false;
+};
+
+/** @public
+* @param {Popup~Options=} options
+*/
+Popup.prototype.init = function (options) {
+	if (!options) { return; }
+
+	let val = options["positioning"];
+	if (val) {
+		this._positioning = val;
+	}
+	val = options["autoHiding"];
+	if (val != null) {
+		this._autoHiding = val ? true : false;
+	}
+	val = options["uiBlocking"];
+	if (val != null) {
+		this.enableUIBlocking(val);
+	}
+	val = options["hoverToShow"];
+	if (val != null) {
+		this._hoverToShow = val ? true : false;
+	}
+	val = options["autoClipping"];
+	if (val != null) {
+		this._autoClipping = val ? true : false;
+	}
+	val = options["attachedElement"];
+	if (val !== undefined) { // eslint-disable-line
+		this.attachTo(val);
+	}
+	val = options["contentElement"];
+	if (val instanceof Element) {
+		this.appendChild(val);
+	}
+	val = options["parentElement"];
+	if (val !== undefined) { // eslint-disable-line
+		this.setParentElement(val);
+	}
+	val = options["popupChild"];
+	if (val) {
+		this.addPopupChild(val);
+	}
+	val = options["hideOnScroll"];
+	if (val != null) {
+		this._hideOnScroll = val ? true : false;
+	}
+	val = options["autoRepositioning"];
+	if (val != null) {
+		this._autoRepositioning = val ? true : false;
+	}
+	val = options["zIndexReference"];
+	if (val !== undefined) { // eslint-disable-line
+		this.setZIndexReference(val);
+	}
+
+	this.addListener(options, "show");
+	this.addListener(options, "hide");
+	this.addListener(options, "shown");
+	this.addListener(options, "hidden");
+
+	let fe = options["focusElement"] || options["focusElements"];
+	if (fe) {
+		if (Array.isArray(fe)) {
+			for (let i = fe.length; --i >= 0;) {
+				this.addFocusElement(fe[i]);
+			}
+		} else {
+			this.addFocusElement(fe);
+		}
+	}
+};
+
+/** Use {@link Popup#addPopupChild} method instead to create menu and submenus. <br>
+* attachTo() method is good for creating popup suggestion.
+* @public
+* @param {Element} elem
+* @param {Popup~Positioning=} positioning
+*/
+Popup.prototype.attachTo = function (elem, positioning) {
+	if (!elem) {
+		elem = null;
+	}
+	if (this._attachedElem !== elem) {
+		if (this._hoverToShow && this._attachedElem) {
+			this._attachedElem.removeEventListener("mouseover", this._onMouseOver, false);
+			this._attachedElem.removeEventListener("mouseout", this._onMouseOut, false);
+		}
+		this.removeFocusElement(this._attachedElem);
+		this._attachedElem = elem;
+		this.addFocusElement(this._attachedElem);
+
+		if (this._hoverToShow && this._attachedElem) {
+			this._attachedElem.addEventListener("mouseover", this._onMouseOver, false);
+			this._attachedElem.addEventListener("mouseout", this._onMouseOut, false);
+		}
+	}
+	if (positioning != null) {
+		this.setPositioning(positioning);
+	}
+};
+/** @public
+* @function
+* @returns {Element}
+*/
+Popup.prototype.getAttachedElement = function() {
+	return this._attachedElem;
+};
+/** @public
+* @function
+* @param {Element} elem
+* @param {Popup~Positioning=} positioning
+*/
+Popup.prototype.setAttachedElement = Popup.prototype.attachTo;
+
+/** @public
+* @param {Element} elem
+*/
+Popup.prototype.addFocusElement = function (elem) {
+	if (elem) {
+		if (this._focusElements.indexOf(elem) < 0) {
+			this._focusElements.push(elem);
+		}
+	}
+};
+/** @public
+* @param {Element} elem
+*/
+Popup.prototype.removeFocusElement = function (elem) {
+	if (elem) {
+		let at = this._focusElements.indexOf(elem);
+		if (at >= 0) {
+			this._focusElements.splice(at, 1);
+		}
+	}
+};
+/** @public
+* @param {Popup=} popup
+* @return {!Popup}
+*/
+Popup.prototype.addPopupChild = function (popup) {
+	if (!popup) {
+		popup = new Popup();
+		popup.setPositioning("right");
+		popup.attachTo(this._elem);
+	}
+	this.addFocusElement(popup.getElement());
+	this._children.push(popup);
+	return popup;
+};
+/** @public
+* @param {number=} gap
+*/
+Popup.prototype.setPopupGap = function (gap) {
+	if (typeof gap === "number") {
+		this._gap = gap;
+	} else {
+		this._gap = 0;
+	}
+};
+
+/** @public
+* @param {Element} parentElement
+* @return {Element} In order to set parent element of popup <br>
+* if parentElement is not Element (maybe undefined) then this._parentElement will be place with document.body;
+*/
+Popup.prototype.setParentElement = function (parentElement) {
+	if (parentElement instanceof Element) {
+		this._parentElement = parentElement;
+	} else {
+		this._parentElement = document.body;
+	}
+	return this._parentElement;
+};
+
+/** @public
+* @returns {Element}
+*/
+Popup.prototype.getZIndexReference = function () {
+	return this._zIndexRef;
+};
+/** @public
+* @param {Element} elem
+*/
+Popup.prototype.setZIndexReference = function (elem) {
+	this._zIndexRef = elem || null;
+};
+/** @private
+* @param {Element} elem
+* @returns {number}
+*/
+let _getComputedZIndex = function (elem) {
+	if(elem) {
+		try {
+			let comp = getComputedStyle(elem);
+			let zIndex = comp.getPropertyValue("z-index");
+			if(zIndex) {
+				return (+zIndex) || 0;
+			}
+		} catch(err) {}
+	}
+	return 0;
+};
+/** @private
+* @param {Element} elem
+* @returns {number}
+*/
+let _getElementZIndex = function (elem) {
+	if(!elem) {
+		return 0;
+	}
+
+	let zIndex = _getComputedZIndex(elem);
+	if(elem.getRootNode) {
+		let rn = elem.getRootNode();
+		let host = rn ? rn.host : null;
+		if(host) {
+			let rnZIndex = _getComputedZIndex(host);
+			return zIndex >= rnZIndex ? zIndex : rnZIndex;
+		}
+	}
+	return zIndex;
+};
+/** @private
+* @param {Element} elem
+* @param {number} zIndex
+*/
+let _setElementZIndex = function (elem, zIndex) {
+	if(elem) {
+		if(zIndex) {
+			elem.style.zIndex = zIndex + "";
+		} else if(elem.style.zIndex) {
+			elem.style.zIndex = "";
+		}
+	}
+};
+/** Recalculate popup's z-index based on existing elements and references.
+* @public
+*/
+Popup.prototype.updateZIndex = function () {
+	let zIndex = _getElementZIndex(this._elem.parentNode);
+	let aez = _getElementZIndex(this._attachedElem);
+	let rez = _getElementZIndex(this._zIndexRef);
+	if(zIndex < aez) {
+		zIndex = aez;
+	}
+	if(zIndex < rez) {
+		zIndex = rez;
+	}
+	if(zIndex) {
+		++zIndex;
+	}
+	_setElementZIndex(this._elem, zIndex);
+	_setElementZIndex(this._overlay, zIndex);
+};
+/** @public
+* @param {boolean=} opt_shown
+* @param {Element=} parentElement
+* @fires Popup#show
+* @fires Popup#hide
+* @fires Popup#shown
+* @fires Popup#hidden
+* @fires Popup#positioning
+*/
+Popup.prototype.show = function (opt_shown, parentElement) {
+	let t = this;
+	t._clearMouseOverTimer();
+	if (t._disabled) { return; }
+
+	let shown = opt_shown !== false;
+	let dirty = t._inDoc !== shown;
+	if (!dirty) {
+		t.updatePosition();
+		return;
+	}
+
+	let evtType = shown ? "show" : "hide";
+	t._evtArg["type"] = evtType;
+	t._dispatch(evtType, t._evtArg);
+	if (t._evtArg["cancel"]) {
+		t._evtArg["cancel"] = false;
+		return;
+	}
+
+	if (shown) {
+		t._inDoc = true;
+
+		if (!(parentElement instanceof Element)) {
+			parentElement = t._parentElement;
+		}
+		if (t._uiBlocking) {
+			t._attachOverlay(parentElement);
+		}
+
+		parentElement.appendChild(t._elem);
+		parentElement.addEventListener("scroll", t._onScroll, true); // TODO: Remove the listener
+
+		if (t._autoHiding) {
+			window.addEventListener("mousedown", t._onBlur, true);
+			window.addEventListener("touchstart", t._onBlur, true);
+		}
+		window.addEventListener("resize", t._onResize, false);
+		window.addEventListener("scroll", t._onScroll, true);
+	} else if (t._inDoc) {
+		t._removeEventListeners();
+		t._restoreElementSize();
+
+		for (let i = t._children.length; --i >= 0;) {
+			t._children[i].hide();
+		}
+		t._inDoc = false;
+
+		Dom.removeParent(t._elem);
+		Dom.removeParent(t._overlay);
+	}
+
+
+
+	if (shown) {
+		t.updatePosition(); // Position has to be updated after firing the event, for client element to be resized
+		t._evtArg["type"] = "shown";
+		t._dispatch("shown", t._evtArg);
+	} else {
+		t._evtArg["type"] = "hidden";
+		t._dispatch("hidden", t._evtArg);
+	}
+};
+/** @public
+* @param {boolean=} opt_hidden
+*/
+Popup.prototype.hide = function (opt_hidden) {
+	this.show(opt_hidden === false);
+};
+/** Toggle showing or hiding state
+* @public
+* @param {boolean=} force Force the state without toggling
+* @param {Element=} parentElement
+* @fires Popup#show
+* @fires Popup#hide
+* @fires Popup#shown
+* @fires Popup#hidden
+* @fires Popup#positioning
+*/
+Popup.prototype.toggle = function (force, parentElement) {
+	if (force == null) {
+		force = !this._inDoc;
+	}
+	if (force) {
+		this.show(true, parentElement);
+	} else {
+		this.hide();
+	}
+};
+
+/** @public
+* @return {boolean}
+*/
+Popup.prototype.isShown = function () {
+	return this._inDoc;
+};
+/** @public
+* @return {boolean}
+*/
+Popup.prototype.isHidden = function () {
+	return !this._inDoc;
+};
+
+/** @public
+* @param {Element|Array.<Element>} elems
+* @return {boolean}
+*/
+Popup.prototype.contains = function (elems) {
+	if (elems) {
+		elems = Array.isArray(elems) ? elems : [elems];
+
+		let fe = this._focusElements;
+		for (let i = fe.length; --i >= 0;) {
+			if (elems.indexOf(fe[i]) >= 0 || fe[i].contains(elems[0])) {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @public
+* @param {Popup~Positioning} posType
+* @fires Popup#positioning
+*/
+Popup.prototype.setPositioning = function (posType) {
+	if (this._positioning !== posType) {
+		this._positioning = posType;
+		this.updatePosition();
+	}
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Popup.prototype.disableAutoHiding = function (opt_disabled) {
+	let autoHiding = (opt_disabled === false);
+	if (this._autoHiding !== autoHiding) {
+		this._autoHiding = autoHiding;
+		if (this._inDoc) {
+			if (autoHiding) {
+				window.addEventListener("mousedown", this._onBlur, true);
+				window.addEventListener("touchstart", this._onBlur, true);
+			} else {
+				window.removeEventListener("mousedown", this._onBlur, true);
+				window.removeEventListener("touchstart", this._onBlur, true);
+			}
+		}
+	}
+};
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Popup.prototype.disableAutoRepositioning = function (opt_disabled) {
+	let autoRepositioning = (opt_disabled === false);
+	if (this._autoRepositioning !== autoRepositioning) {
+		this._autoRepositioning = autoRepositioning;
+	}
+};
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Popup.prototype.disableAutoClipping = function (opt_disabled) {
+	let autoClipping = (opt_disabled === false);
+	if (this._autoClipping !== autoClipping) {
+		this._autoClipping = autoClipping;
+	}
+};
+/** @public
+* @param {boolean=} opt_disabled
+*/
+Popup.prototype.disableHideOnScroll = function (opt_disabled) {
+	let hideOnScroll = (opt_disabled === false);
+	if (this._hideOnScroll !== hideOnScroll) {
+		this._hideOnScroll = hideOnScroll;
+	}
+};
+
+
+/** @public
+* @fires Popup#positioning
+* @param {boolean=} fallback=true
+*/
+Popup.prototype.updatePosition = function (fallback) {
+	if(fallback == null){
+		fallback = true;
+	}
+	let t = this;
+	t._resizeTimer = 0;
+
+	if (!t._inDoc) { return; }
+
+	t.updateZIndex();
+
+	if (t._attachedElem) {
+		if (!t._attachedElem.offsetWidth) { // Check if attached element is visible in the DOM
+			return; // If the element has has no parent
+		}
+
+		if (t._autoClipping) {
+			t._restoreElementSize();
+		}
+		let refElement = document.body;
+		if (t._positioning === "over") {
+			refElement = document.documentElement;
+		}
+		let pos = Dom.getRelativePosition(t._attachedElem, refElement);
+		let px = pos["x"];
+		let py = pos["y"];
+
+		let ww = window.innerWidth;
+		let wh = window.innerHeight;
+		let sx = (window.scrollX != null) ? window.scrollX : window.pageXOffset;
+		let sy = (window.scrollY != null) ? window.scrollY : window.pageYOffset;
+		let rb = ww + sx; // view port right bound
+		let bb = wh + sy; // view port bottom bound
+
+		let aw = t._attachedElem.offsetWidth;
+		let ah = t._attachedElem.offsetHeight;
+		let ew = t._elem.offsetWidth;
+		let eh = t._elem.offsetHeight;
+		let x, y;
+		if (t._positioning == "right") {
+			x = px + aw + this._gap;
+			y = py;
+		} else if (t._positioning == "over") {
+			x = px;
+			y = py;
+		} else { // under, bottom, or etc.
+			x = px;
+			y = py + ah;
+		}
+
+		if(fallback){
+			// Re-position for each type of positioning, if the popup exceeds the bounds
+			if (t._positioning == "right") {
+				if ((x + ew > rb) && (px - ew > sx)) {
+					x = px - ew - this._gap;
+				}
+				if ((y + eh > bb) && (py + ah - eh > sy)) {
+					y = py + ah - eh;
+				}
+			} else if (t._positioning == "over") {
+				if ((x + ew > rb) && (px + aw - ew > sx)) {
+					x = px + aw - ew;
+				}
+				if ((y + eh > bb) && (py + aw - eh > sy)) {
+					y = py + aw - eh;
+				}
+			} else { // under, bottom, or etc.
+				if ((x + ew > rb) && (px + aw - ew > sx)) {
+					x = px + aw - ew;
+				}
+				if (y + eh > bb) {
+					// If popup is exceeded bottom bound
+					if(py - eh > sy){
+						y = py - eh; // move popup to top of attached element, if it has enough space
+					} else {
+						y = y - (y + eh - bb); // shift the popup up to make everything in popup visible
+						if(y < 0){
+							y = 0; // popup should not shift beyond top bound
+						}
+					}
+				}
+			}
+		}
+
+		if (t._autoClipping) { // Last resort of positioning
+			if (x + ew > rb) {
+				if (t._origW == null) {
+					t._origW = t._elem.style.width;
+				}
+				t._elem.style.width = (rb - x) + "px";
+			}
+			if (y + eh > bb) {
+				if (t._origH == null) {
+					t._origH = t._elem.style.height;
+				}
+				t._elem.style.height = (bb - y) + "px";
+			}
+		}
+
+		t._elem.style.left = Math.floor(x - sx) + "px"; // Due to fixed position we have to subtract window scrolling
+		t._elem.style.top = Math.floor(y - sy) + "px";
+	} else if (t._positioning != "fixed" && t._positioning != "custom") { // Centering at the middle
+		t._elem.style.left = "calc(50vw - " + Math.floor(t._elem.offsetWidth / 2) + "px)";
+		t._elem.style.top = "calc(46vh - " + Math.floor(t._elem.offsetHeight / 2) + "px)";
+	}
+
+	let evtType = "positioning";
+	t._evtArg["type"] = evtType;
+	t._dispatch(evtType, t._evtArg);
+};
+
+/** @public
+* @param {boolean=} bool
+* @return {boolean} previous uiBlocking state
+*/
+Popup.prototype.enableUIBlocking = function (bool) {
+	let prev = this._uiBlocking;
+	this._uiBlocking = bool !== false;
+	return prev;
+};
+
+/** @private
+ * @param {Element} parentElem
+*/
+Popup.prototype._attachOverlay = function (parentElem) {
+	if (!this._overlay) {
+		let elem = this._overlay = document.createElement('div');
+
+		// set style to overlay
+		let style = elem.style;
+		style.height = "100%";
+		style.width = "100%";
+		style.top = "0";
+		style.left = "0";
+		style.backgroundColor = "rgba(0, 0, 0, 0)"; /* transparent and no color apply */
+	}
+
+
+	if (parentElem === document.body) {
+		// use position fixed only for window
+		this._overlay.style.position = 'fixed';
+	} else {
+		// position absolute is use for any element that not body eg. Grid in shadow dom
+		// the overlay will cover for parent that has position relative setted
+		this._overlay.style.position = 'absolute';
+	}
+	parentElem.appendChild(this._overlay);
+};
+
+/** @public
+ * @return {Element} Overlay element
+*/
+Popup.prototype.getOverlayElement = function () {
+	return this._overlay;
+};
+
+/** @private
+* @param {Object=} e
+*/
+Popup.prototype._onBlur = function (e) {
+	if (this._blurTimer || !this._inDoc) {
+		return;
+	}
+	if (e) {
+		// use e.composedPath() instead of e.target (if composedPath exists)
+		// when popup inside custom element and popup has been clicked
+		// e.target appear to be custom element itself (we expect to be element item inside popup)
+		// so use e.composedPath() will make the trick
+		if (e.composedPath) {
+			if (this.contains(e.composedPath())) {
+				return;
+			}
+		} else if (this.contains(e.target)) {
+			return;
+		}
+	}
+
+	this._blurTimer = setTimeout(this._onBlurTimer, 10);
+};
+/** @private */
+Popup.prototype._onBlurTimer = function () {
+	this._blurTimer = 0;
+	if (this.contains(document.activeElement)) {
+		return;
+	}
+	this.hide();
+};
+/** @private
+* @fires Popup#positioning
+*/
+Popup.prototype._onResize = function () {
+	if (!this._resizeTimer && this._inDoc && this._autoRepositioning) {
+		this._resizeTimer = setTimeout(this.updatePosition, 50);
+	}
+};
+/** @private
+* @param {Object} e
+*/
+Popup.prototype._onScroll = function (e) {
+	// only hide if target is not child of popup and e.target not the popup itself.
+	if (!this.contains(e.target) && this._hideOnScroll) {
+		this.hide();
+	}
+};
+/** @private
+* @param {Object} e
+*/
+Popup.prototype._onMouseOver = function (e) {
+	if (!this._hoverTimer && !this._inDoc) {
+		this._hoverTimer = setTimeout(this._onMouseOverTimeout, 500);
+	}
+};
+/** @private
+* @param {Object} e
+*/
+Popup.prototype._onMouseOut = function (e) {
+	if (this._hoverTimer) {
+		if (!e.currentTarget.contains(e.relatedTarget)) {
+			this._clearMouseOverTimer();
+		}
+	}
+};
+/** @private
+*/
+Popup.prototype._onMouseOverTimeout = function () {
+	this._hoverTimer = 0;
+	this.show();
+};
+/** @private
+*/
+Popup.prototype._clearMouseOverTimer = function () {
+	if (this._hoverTimer) {
+		clearTimeout(this._hoverTimer);
+		this._hoverTimer = 0;
+	}
+};
+
+/** @private */
+Popup.prototype._restoreElementSize = function () {
+	if (this._origW != null) {
+		this._elem.style.width = this._origW;
+		this._origW = null;
+	}
+	if (this._origH != null) {
+		this._elem.style.height = this._origH;
+		this._origH = null;
+	}
+};
+/** @private */
+Popup.prototype._removeEventListeners = function () {
+	if (this._blurTimer) {
+		clearTimeout(this._blurTimer);
+		this._blurTimer = 0;
+	}
+	if (this._resizeTimer) {
+		clearTimeout(this._resizeTimer);
+		this._resizeTimer = 0;
+	}
+
+	window.removeEventListener("mousedown", this._onBlur, true);
+	window.removeEventListener("touchstart", this._onBlur, true);
+	window.removeEventListener("resize", this._onResize, false);
+	window.removeEventListener("scroll", this._onScroll, true);
+	if (this._elem.parentElement) {
+		this._elem.parentElement.removeEventListener("scroll", this._onScroll, true);
+	}
+};
+
+export { Popup, containElements };
+export default Popup;