/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.16.1
* @license
* Copyright (c) 2016 Federico Zivolo and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && typeof navigator !== 'undefined';
var timeoutDuration = function () {
var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox'];
for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) {
if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) {
return 1;
}
}
return 0;
}();
function microtaskDebounce(fn) {
var called = false;
return function () {
if (called) {
return;
}
called = true;
window.Promise.resolve().then(function () {
called = false;
fn();
});
};
}
function taskDebounce(fn) {
var scheduled = false;
return function () {
if (!scheduled) {
scheduled = true;
setTimeout(function () {
scheduled = false;
fn();
}, timeoutDuration);
}
};
}
var supportsMicroTasks = isBrowser && window.Promise;
/**
* Create a debounced version of a method, that's asynchronously deferred
* but called in the minimum time possible.
*
* @method
* @memberof Popper.Utils
* @argument {Function} fn
* @returns {Function}
*/
var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce;
/**
* Check if the given variable is a function
* @method
* @memberof Popper.Utils
* @argument {Any} functionToCheck - variable to check
* @returns {Boolean} answer to: is a function?
*/
function isFunction(functionToCheck) {
var getType = {};
return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}
/**
* Get CSS computed property of the given element
* @method
* @memberof Popper.Utils
* @argument {Eement} element
* @argument {String} property
*/
function getStyleComputedProperty(element, property) {
if (element.nodeType !== 1) {
return [];
}
// NOTE: 1 DOM access here
var window = element.ownerDocument.defaultView;
var css = window.getComputedStyle(element, null);
return property ? css[property] : css;
}
/**
* Returns the parentNode or the host of the element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} parent
*/
function getParentNode(element) {
if (element.nodeName === 'HTML') {
return element;
}
return element.parentNode || element.host;
}
/**
* Returns the scrolling parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} scroll parent
*/
function getScrollParent(element) {
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
if (!element) {
return document.body;
}
switch (element.nodeName) {
case 'HTML':
case 'BODY':
return element.ownerDocument.body;
case '#document':
return element.body;
}
// Firefox want us to check `-x` and `-y` variations as well
var _getStyleComputedProp = getStyleComputedProperty(element),
overflow = _getStyleComputedProp.overflow,
overflowX = _getStyleComputedProp.overflowX,
overflowY = _getStyleComputedProp.overflowY;
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
return element;
}
return getScrollParent(getParentNode(element));
}
/**
* Returns the reference node of the reference object, or the reference object itself.
* @method
* @memberof Popper.Utils
* @param {Element|Object} reference - the reference element (the popper will be relative to this)
* @returns {Element} parent
*/
function getReferenceNode(reference) {
return reference && reference.referenceNode ? reference.referenceNode : reference;
}
var isIE11 = isBrowser && !!(window.MSInputMethodContext && document.documentMode);
var isIE10 = isBrowser && /MSIE 10/.test(navigator.userAgent);
/**
* Determines if the browser is Internet Explorer
* @method
* @memberof Popper.Utils
* @param {Number} version to check
* @returns {Boolean} isIE
*/
function isIE(version) {
if (version === 11) {
return isIE11;
}
if (version === 10) {
return isIE10;
}
return isIE11 || isIE10;
}
/**
* Returns the offset parent of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} offset parent
*/
function getOffsetParent(element) {
if (!element) {
return document.documentElement;
}
var noOffsetParent = isIE(10) ? document.body : null;
// NOTE: 1 DOM access here
var offsetParent = element.offsetParent || null;
// Skip hidden elements which don't have an offsetParent
while (offsetParent === noOffsetParent && element.nextElementSibling) {
offsetParent = (element = element.nextElementSibling).offsetParent;
}
var nodeName = offsetParent && offsetParent.nodeName;
if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') {
return element ? element.ownerDocument.documentElement : document.documentElement;
}
// .offsetParent will return the closest TH, TD or TABLE in case
// no offsetParent is present, I hate this job...
if (['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') {
return getOffsetParent(offsetParent);
}
return offsetParent;
}
function isOffsetContainer(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY') {
return false;
}
return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element;
}
/**
* Finds the root node (document, shadowDOM root) of the given element
* @method
* @memberof Popper.Utils
* @argument {Element} node
* @returns {Element} root node
*/
function getRoot(node) {
if (node.parentNode !== null) {
return getRoot(node.parentNode);
}
return node;
}
/**
* Finds the offset parent common to the two provided nodes
* @method
* @memberof Popper.Utils
* @argument {Element} element1
* @argument {Element} element2
* @returns {Element} common offset parent
*/
function findCommonOffsetParent(element1, element2) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) {
return document.documentElement;
}
// Here we make sure to give as "start" the element that comes first in the DOM
var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING;
var start = order ? element1 : element2;
var end = order ? element2 : element1;
// Get common ancestor container
var range = document.createRange();
range.setStart(start, 0);
range.setEnd(end, 0);
var commonAncestorContainer = range.commonAncestorContainer;
// Both nodes are inside #document
if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) {
if (isOffsetContainer(commonAncestorContainer)) {
return commonAncestorContainer;
}
return getOffsetParent(commonAncestorContainer);
}
// one of the nodes is inside shadowDOM, find which one
var element1root = getRoot(element1);
if (element1root.host) {
return findCommonOffsetParent(element1root.host, element2);
} else {
return findCommonOffsetParent(element1, getRoot(element2).host);
}
}
/**
* Gets the scroll value of the given element in the given side (top and left)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {String} side `top` or `left`
* @returns {number} amount of scrolled pixels
*/
function getScroll(element) {
var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft';
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
var html = element.ownerDocument.documentElement;
var scrollingElement = element.ownerDocument.scrollingElement || html;
return scrollingElement[upperSide];
}
return element[upperSide];
}
/*
* Sum or subtract the element scroll values (left and top) from a given rect object
* @method
* @memberof Popper.Utils
* @param {Object} rect - Rect object you want to change
* @param {HTMLElement} element - The element from the function reads the scroll values
* @param {Boolean} subtract - set to true if you want to subtract the scroll values
* @return {Object} rect - The modifier rect object
*/
function includeScroll(rect, element) {
var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
var modifier = subtract ? -1 : 1;
rect.top += scrollTop * modifier;
rect.bottom += scrollTop * modifier;
rect.left += scrollLeft * modifier;
rect.right += scrollLeft * modifier;
return rect;
}
/*
* Helper to detect borders of a given element
* @method
* @memberof Popper.Utils
* @param {CSSStyleDeclaration} styles
* Result of `getStyleComputedProperty` on the given element
* @param {String} axis - `x` or `y`
* @return {number} borders - The borders size of the given axis
*/
function getBordersSize(styles, axis) {
var sideA = axis === 'x' ? 'Left' : 'Top';
var sideB = sideA === 'Left' ? 'Right' : 'Bottom';
return parseFloat(styles['border' + sideA + 'Width']) + parseFloat(styles['border' + sideB + 'Width']);
}
function getSize(axis, body, html, computedStyle) {
return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE(10) ? parseInt(html['offset' + axis]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')]) + parseInt(computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')]) : 0);
}
function getWindowSizes(document) {
var body = document.body;
var html = document.documentElement;
var computedStyle = isIE(10) && getComputedStyle(html);
return {
height: getSize('Height', body, html, computedStyle),
width: getSize('Width', body, html, computedStyle)
};
}
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var defineProperty = function (obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
/**
* Given element offsets, generate an output similar to getBoundingClientRect
* @method
* @memberof Popper.Utils
* @argument {Object} offsets
* @returns {Object} ClientRect like output
*/
function getClientRect(offsets) {
return _extends({}, offsets, {
right: offsets.left + offsets.width,
bottom: offsets.top + offsets.height
});
}
/**
* Get bounding client rect of given element
* @method
* @memberof Popper.Utils
* @param {HTMLElement} element
* @return {Object} client rect
*/
function getBoundingClientRect(element) {
var rect = {};
// IE10 10 FIX: Please, don't ask, the element isn't
// considered in DOM in some circumstances...
// This isn't reproducible in IE10 compatibility mode of IE11
try {
if (isIE(10)) {
rect = element.getBoundingClientRect();
var scrollTop = getScroll(element, 'top');
var scrollLeft = getScroll(element, 'left');
rect.top += scrollTop;
rect.left += scrollLeft;
rect.bottom += scrollTop;
rect.right += scrollLeft;
} else {
rect = element.getBoundingClientRect();
}
} catch (e) {}
var result = {
left: rect.left,
top: rect.top,
width: rect.right - rect.left,
height: rect.bottom - rect.top
};
// subtract scrollbar size from sizes
var sizes = element.nodeName === 'HTML' ? getWindowSizes(element.ownerDocument) : {};
var width = sizes.width || element.clientWidth || result.width;
var height = sizes.height || element.clientHeight || result.height;
var horizScrollbar = element.offsetWidth - width;
var vertScrollbar = element.offsetHeight - height;
// if an hypothetical scrollbar is detected, we must be sure it's not a `border`
// we make this check conditional for performance reasons
if (horizScrollbar || vertScrollbar) {
var styles = getStyleComputedProperty(element);
horizScrollbar -= getBordersSize(styles, 'x');
vertScrollbar -= getBordersSize(styles, 'y');
result.width -= horizScrollbar;
result.height -= vertScrollbar;
}
return getClientRect(result);
}
function getOffsetRectRelativeToArbitraryNode(children, parent) {
var fixedPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var isIE10 = isIE(10);
var isHTML = parent.nodeName === 'HTML';
var childrenRect = getBoundingClientRect(children);
var parentRect = getBoundingClientRect(parent);
var scrollParent = getScrollParent(children);
var styles = getStyleComputedProperty(parent);
var borderTopWidth = parseFloat(styles.borderTopWidth);
var borderLeftWidth = parseFloat(styles.borderLeftWidth);
// In cases where the parent is fixed, we must ignore negative scroll in offset calc
if (fixedPosition && isHTML) {
parentRect.top = Math.max(parentRect.top, 0);
parentRect.left = Math.max(parentRect.left, 0);
}
var offsets = getClientRect({
top: childrenRect.top - parentRect.top - borderTopWidth,
left: childrenRect.left - parentRect.left - borderLeftWidth,
width: childrenRect.width,
height: childrenRect.height
});
offsets.marginTop = 0;
offsets.marginLeft = 0;
// Subtract margins of documentElement in case it's being used as parent
// we do this only on HTML because it's the only element that behaves
// differently when margins are applied to it. The margins are included in
// the box of the documentElement, in the other cases not.
if (!isIE10 && isHTML) {
var marginTop = parseFloat(styles.marginTop);
var marginLeft = parseFloat(styles.marginLeft);
offsets.top -= borderTopWidth - marginTop;
offsets.bottom -= borderTopWidth - marginTop;
offsets.left -= borderLeftWidth - marginLeft;
offsets.right -= borderLeftWidth - marginLeft;
// Attach marginTop and marginLeft because in some circumstances we may need them
offsets.marginTop = marginTop;
offsets.marginLeft = marginLeft;
}
if (isIE10 && !fixedPosition ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') {
offsets = includeScroll(offsets, parent);
}
return offsets;
}
function getViewportOffsetRectRelativeToArtbitraryNode(element) {
var excludeScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var html = element.ownerDocument.documentElement;
var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html);
var width = Math.max(html.clientWidth, window.innerWidth || 0);
var height = Math.max(html.clientHeight, window.innerHeight || 0);
var scrollTop = !excludeScroll ? getScroll(html) : 0;
var scrollLeft = !excludeScroll ? getScroll(html, 'left') : 0;
var offset = {
top: scrollTop - relativeOffset.top + relativeOffset.marginTop,
left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft,
width: width,
height: height
};
return getClientRect(offset);
}
/**
* Check if the given element is fixed or is inside a fixed parent
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @argument {Element} customContainer
* @returns {Boolean} answer to "isFixed?"
*/
function isFixed(element) {
var nodeName = element.nodeName;
if (nodeName === 'BODY' || nodeName === 'HTML') {
return false;
}
if (getStyleComputedProperty(element, 'position') === 'fixed') {
return true;
}
var parentNode = getParentNode(element);
if (!parentNode) {
return false;
}
return isFixed(parentNode);
}
/**
* Finds the first parent of an element that has a transformed property defined
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Element} first transformed parent or documentElement
*/
function getFixedPositionOffsetParent(element) {
// This check is needed to avoid errors in case one of the elements isn't defined for any reason
if (!element || !element.parentElement || isIE()) {
return document.documentElement;
}
var el = element.parentElement;
while (el && getStyleComputedProperty(el, 'transform') === 'none') {
el = el.parentElement;
}
return el || document.documentElement;
}
/**
* Computed the boundaries limits and return them
* @method
* @memberof Popper.Utils
* @param {HTMLElement} popper
* @param {HTMLElement} reference
* @param {number} padding
* @param {HTMLElement} boundariesElement - Element used to define the boundaries
* @param {Boolean} fixedPosition - Is in fixed position mode
* @returns {Object} Coordinates of the boundaries
*/
function getBoundaries(popper, reference, padding, boundariesElement) {
var fixedPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
// NOTE: 1 DOM access here
var boundaries = { top: 0, left: 0 };
var offsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
// Handle viewport case
if (boundariesElement === 'viewport') {
boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent, fixedPosition);
} else {
// Handle other cases based on DOM element used as boundaries
var boundariesNode = void 0;
if (boundariesElement === 'scrollParent') {
boundariesNode = getScrollParent(getParentNode(reference));
if (boundariesNode.nodeName === 'BODY') {
boundariesNode = popper.ownerDocument.documentElement;
}
} else if (boundariesElement === 'window') {
boundariesNode = popper.ownerDocument.documentElement;
} else {
boundariesNode = boundariesElement;
}
var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent, fixedPosition);
// In case of HTML, we need a different computation
if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) {
var _getWindowSizes = getWindowSizes(popper.ownerDocument),
height = _getWindowSizes.height,
width = _getWindowSizes.width;
boundaries.top += offsets.top - offsets.marginTop;
boundaries.bottom = height + offsets.top;
boundaries.left += offsets.left - offsets.marginLeft;
boundaries.right = width + offsets.left;
} else {
// for all the other DOM elements, this one is good
boundaries = offsets;
}
}
// Add paddings
padding = padding || 0;
var isPaddingNumber = typeof padding === 'number';
boundaries.left += isPaddingNumber ? padding : padding.left || 0;
boundaries.top += isPaddingNumber ? padding : padding.top || 0;
boundaries.right -= isPaddingNumber ? padding : padding.right || 0;
boundaries.bottom -= isPaddingNumber ? padding : padding.bottom || 0;
return boundaries;
}
function getArea(_ref) {
var width = _ref.width,
height = _ref.height;
return width * height;
}
/**
* Utility used to transform the `auto` placement to the placement with more
* available space.
* @method
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) {
var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
if (placement.indexOf('auto') === -1) {
return placement;
}
var boundaries = getBoundaries(popper, reference, padding, boundariesElement);
var rects = {
top: {
width: boundaries.width,
height: refRect.top - boundaries.top
},
right: {
width: boundaries.right - refRect.right,
height: boundaries.height
},
bottom: {
width: boundaries.width,
height: boundaries.bottom - refRect.bottom
},
left: {
width: refRect.left - boundaries.left,
height: boundaries.height
}
};
var sortedAreas = Object.keys(rects).map(function (key) {
return _extends({
key: key
}, rects[key], {
area: getArea(rects[key])
});
}).sort(function (a, b) {
return b.area - a.area;
});
var filteredAreas = sortedAreas.filter(function (_ref2) {
var width = _ref2.width,
height = _ref2.height;
return width >= popper.clientWidth && height >= popper.clientHeight;
});
var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key;
var variation = placement.split('-')[1];
return computedPlacement + (variation ? '-' + variation : '');
}
/**
* Get offsets to the reference element
* @method
* @memberof Popper.Utils
* @param {Object} state
* @param {Element} popper - the popper element
* @param {Element} reference - the reference element (the popper will be relative to this)
* @param {Element} fixedPosition - is in fixed position mode
* @returns {Object} An object containing the offsets which will be applied to the popper
*/
function getReferenceOffsets(state, popper, reference) {
var fixedPosition = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var commonOffsetParent = fixedPosition ? getFixedPositionOffsetParent(popper) : findCommonOffsetParent(popper, getReferenceNode(reference));
return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent, fixedPosition);
}
/**
* Get the outer sizes of the given element (offset size + margins)
* @method
* @memberof Popper.Utils
* @argument {Element} element
* @returns {Object} object containing width and height properties
*/
function getOuterSizes(element) {
var window = element.ownerDocument.defaultView;
var styles = window.getComputedStyle(element);
var x = parseFloat(styles.marginTop || 0) + parseFloat(styles.marginBottom || 0);
var y = parseFloat(styles.marginLeft || 0) + parseFloat(styles.marginRight || 0);
var result = {
width: element.offsetWidth + y,
height: element.offsetHeight + x
};
return result;
}
/**
* Get the opposite placement of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement
* @returns {String} flipped placement
*/
function getOppositePlacement(placement) {
var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' };
return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash[matched];
});
}
/**
* Get offsets to the popper
* @method
* @memberof Popper.Utils
* @param {Object} position - CSS position the Popper will get applied
* @param {HTMLElement} popper - the popper element
* @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this)
* @param {String} placement - one of the valid placement options
* @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper
*/
function getPopperOffsets(popper, referenceOffsets, placement) {
placement = placement.split('-')[0];
// Get popper node sizes
var popperRect = getOuterSizes(popper);
// Add position, width and height to our offsets object
var popperOffsets = {
width: popperRect.width,
height: popperRect.height
};
// depending by the popper placement we have to compute its offsets slightly differently
var isHoriz = ['right', 'left'].indexOf(placement) !== -1;
var mainSide = isHoriz ? 'top' : 'left';
var secondarySide = isHoriz ? 'left' : 'top';
var measurement = isHoriz ? 'height' : 'width';
var secondaryMeasurement = !isHoriz ? 'height' : 'width';
popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2;
if (placement === secondarySide) {
popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement];
} else {
popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)];
}
return popperOffsets;
}
/**
* Mimics the `find` method of Array
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function find(arr, check) {
// use native find if supported
if (Array.prototype.find) {
return arr.find(check);
}
// use `filter` to obtain the same behavior of `find`
return arr.filter(check)[0];
}
/**
* Return the index of the matching object
* @method
* @memberof Popper.Utils
* @argument {Array} arr
* @argument prop
* @argument value
* @returns index or -1
*/
function findIndex(arr, prop, value) {
// use native findIndex if supported
if (Array.prototype.findIndex) {
return arr.findIndex(function (cur) {
return cur[prop] === value;
});
}
// use `find` + `indexOf` if `findIndex` isn't supported
var match = find(arr, function (obj) {
return obj[prop] === value;
});
return arr.indexOf(match);
}
/**
* Loop trough the list of modifiers and run them in order,
* each of them will then edit the data object.
* @method
* @memberof Popper.Utils
* @param {dataObject} data
* @param {Array} modifiers
* @param {String} ends - Optional modifier name used as stopper
* @returns {dataObject}
*/
function runModifiers(modifiers, data, ends) {
var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends));
modifiersToRun.forEach(function (modifier) {
if (modifier['function']) {
// eslint-disable-line dot-notation
console.warn('`modifier.function` is deprecated, use `modifier.fn`!');
}
var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation
if (modifier.enabled && isFunction(fn)) {
// Add properties to offsets to make them a complete clientRect object
// we do this before each modifier to make sure the previous one doesn't
// mess with these values
data.offsets.popper = getClientRect(data.offsets.popper);
data.offsets.reference = getClientRect(data.offsets.reference);
data = fn(data, modifier);
}
});
return data;
}
/**
* Updates the position of the popper, computing the new offsets and applying
* the new style.
* Prefer `scheduleUpdate` over `update` because of performance reasons.
* @method
* @memberof Popper
*/
function update() {
// if popper is destroyed, don't perform any further update
if (this.state.isDestroyed) {
return;
}
var data = {
instance: this,
styles: {},
arrowStyles: {},
attributes: {},
flipped: false,
offsets: {}
};
// compute reference element offsets
data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference, this.options.positionFixed);
// compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding);
// store the computed placement inside `originalPlacement`
data.originalPlacement = data.placement;
data.positionFixed = this.options.positionFixed;
// compute the popper offsets
data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement);
data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
// run the modifiers
data = runModifiers(this.modifiers, data);
// the first `update` will call `onCreate` callback
// the other ones will call `onUpdate` callback
if (!this.state.isCreated) {
this.state.isCreated = true;
this.options.onCreate(data);
} else {
this.options.onUpdate(data);
}
}
/**
* Helper used to know if the given modifier is enabled.
* @method
* @memberof Popper.Utils
* @returns {Boolean}
*/
function isModifierEnabled(modifiers, modifierName) {
return modifiers.some(function (_ref) {
var name = _ref.name,
enabled = _ref.enabled;
return enabled && name === modifierName;
});
}
/**
* Get the prefixed supported property name
* @method
* @memberof Popper.Utils
* @argument {String} property (camelCase)
* @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix)
*/
function getSupportedPropertyName(property) {
var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O'];
var upperProp = property.charAt(0).toUpperCase() + property.slice(1);
for (var i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
var toCheck = prefix ? '' + prefix + upperProp : property;
if (typeof document.body.style[toCheck] !== 'undefined') {
return toCheck;
}
}
return null;
}
/**
* Destroys the popper.
* @method
* @memberof Popper
*/
function destroy() {
this.state.isDestroyed = true;
// touch DOM only if `applyStyle` modifier is enabled
if (isModifierEnabled(this.modifiers, 'applyStyle')) {
this.popper.removeAttribute('x-placement');
this.popper.style.position = '';
this.popper.style.top = '';
this.popper.style.left = '';
this.popper.style.right = '';
this.popper.style.bottom = '';
this.popper.style.willChange = '';
this.popper.style[getSupportedPropertyName('transform')] = '';
}
this.disableEventListeners();
// remove the popper if user explicitly asked for the deletion on destroy
// do not use `remove` because IE11 doesn't support it
if (this.options.removeOnDestroy) {
this.popper.parentNode.removeChild(this.popper);
}
return this;
}
/**
* Get the window associated with the element
* @argument {Element} element
* @returns {Window}
*/
function getWindow(element) {
var ownerDocument = element.ownerDocument;
return ownerDocument ? ownerDocument.defaultView : window;
}
function attachToScrollParents(scrollParent, event, callback, scrollParents) {
var isBody = scrollParent.nodeName === 'BODY';
var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent;
target.addEventListener(event, callback, { passive: true });
if (!isBody) {
attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents);
}
scrollParents.push(target);
}
/**
* Setup needed event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function setupEventListeners(reference, options, state, updateBound) {
// Resize event listener on window
state.updateBound = updateBound;
getWindow(reference).addEventListener('resize', state.updateBound, { passive: true });
// Scroll event listener on scroll parents
var scrollElement = getScrollParent(reference);
attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents);
state.scrollElement = scrollElement;
state.eventsEnabled = true;
return state;
}
/**
* It will add resize/scroll events and start recalculating
* position of the popper element when they are triggered.
* @method
* @memberof Popper
*/
function enableEventListeners() {
if (!this.state.eventsEnabled) {
this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate);
}
}
/**
* Remove event listeners used to update the popper position
* @method
* @memberof Popper.Utils
* @private
*/
function removeEventListeners(reference, state) {
// Remove resize event listener on window
getWindow(reference).removeEventListener('resize', state.updateBound);
// Remove scroll event listener on scroll parents
state.scrollParents.forEach(function (target) {
target.removeEventListener('scroll', state.updateBound);
});
// Reset state
state.updateBound = null;
state.scrollParents = [];
state.scrollElement = null;
state.eventsEnabled = false;
return state;
}
/**
* It will remove resize/scroll events and won't recalculate popper position
* when they are triggered. It also won't trigger `onUpdate` callback anymore,
* unless you call `update` method manually.
* @method
* @memberof Popper
*/
function disableEventListeners() {
if (this.state.eventsEnabled) {
cancelAnimationFrame(this.scheduleUpdate);
this.state = removeEventListeners(this.reference, this.state);
}
}
/**
* Tells if a given input is a number
* @method
* @memberof Popper.Utils
* @param {*} input to check
* @return {Boolean}
*/
function isNumeric(n) {
return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
}
/**
* Set the style to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the style to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setStyles(element, styles) {
Object.keys(styles).forEach(function (prop) {
var unit = '';
// add unit if the value is numeric and is one of the following
if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) {
unit = 'px';
}
element.style[prop] = styles[prop] + unit;
});
}
/**
* Set the attributes to the given popper
* @method
* @memberof Popper.Utils
* @argument {Element} element - Element to apply the attributes to
* @argument {Object} styles
* Object with a list of properties and values which will be applied to the element
*/
function setAttributes(element, attributes) {
Object.keys(attributes).forEach(function (prop) {
var value = attributes[prop];
if (value !== false) {
element.setAttribute(prop, attributes[prop]);
} else {
element.removeAttribute(prop);
}
});
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} data.styles - List of style properties - values to apply to popper element
* @argument {Object} data.attributes - List of attribute properties - values to apply to popper element
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The same data object
*/
function applyStyle(data) {
// any property present in `data.styles` will be applied to the popper,
// in this way we can make the 3rd party modifiers add custom styles to it
// Be aware, modifiers could override the properties defined in the previous
// lines of this modifier!
setStyles(data.instance.popper, data.styles);
// any property present in `data.attributes` will be applied to the popper,
// they will be set as HTML attributes of the element
setAttributes(data.instance.popper, data.attributes);
// if arrowElement is defined and arrowStyles has some properties
if (data.arrowElement && Object.keys(data.arrowStyles).length) {
setStyles(data.arrowElement, data.arrowStyles);
}
return data;
}
/**
* Set the x-placement attribute before everything else because it could be used
* to add margins to the popper margins needs to be calculated to get the
* correct popper offsets.
* @method
* @memberof Popper.modifiers
* @param {HTMLElement} reference - The reference element used to position the popper
* @param {HTMLElement} popper - The HTML element used as popper
* @param {Object} options - Popper.js options
*/
function applyStyleOnLoad(reference, popper, options, modifierOptions, state) {
// compute reference element offsets
var referenceOffsets = getReferenceOffsets(state, popper, reference, options.positionFixed);
// compute auto placement, store placement inside the data object,
// modifiers will be able to edit `placement` if needed
// and refer to originalPlacement to know the original value
var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding);
popper.setAttribute('x-placement', placement);
// Apply `position` to popper before anything else because
// without the position applied we can't guarantee correct computations
setStyles(popper, { position: options.positionFixed ? 'fixed' : 'absolute' });
return options;
}
/**
* @function
* @memberof Popper.Utils
* @argument {Object} data - The data object generated by `update` method
* @argument {Boolean} shouldRound - If the offsets should be rounded at all
* @returns {Object} The popper's position offsets rounded
*
* The tale of pixel-perfect positioning. It's still not 100% perfect, but as
* good as it can be within reason.
* Discussion here: https://github.com/FezVrasta/popper.js/pull/715
*
* Low DPI screens cause a popper to be blurry if not using full pixels (Safari
* as well on High DPI screens).
*
* Firefox prefers no rounding for positioning and does not have blurriness on
* high DPI screens.
*
* Only horizontal placement and left/right values need to be considered.
*/
function getRoundedOffsets(data, shouldRound) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var round = Math.round,
floor = Math.floor;
var noRound = function noRound(v) {
return v;
};
var referenceWidth = round(reference.width);
var popperWidth = round(popper.width);
var isVertical = ['left', 'right'].indexOf(data.placement) !== -1;
var isVariation = data.placement.indexOf('-') !== -1;
var sameWidthParity = referenceWidth % 2 === popperWidth % 2;
var bothOddWidth = referenceWidth % 2 === 1 && popperWidth % 2 === 1;
var horizontalToInteger = !shouldRound ? noRound : isVertical || isVariation || sameWidthParity ? round : floor;
var verticalToInteger = !shouldRound ? noRound : round;
return {
left: horizontalToInteger(bothOddWidth && !isVariation && shouldRound ? popper.left - 1 : popper.left),
top: verticalToInteger(popper.top),
bottom: verticalToInteger(popper.bottom),
right: horizontalToInteger(popper.right)
};
}
var isFirefox = isBrowser && /Firefox/i.test(navigator.userAgent);
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function computeStyle(data, options) {
var x = options.x,
y = options.y;
var popper = data.offsets.popper;
// Remove this legacy support in Popper.js v2
var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'applyStyle';
}).gpuAcceleration;
if (legacyGpuAccelerationOption !== undefined) {
console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!');
}
var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration;
var offsetParent = getOffsetParent(data.instance.popper);
var offsetParentRect = getBoundingClientRect(offsetParent);
// Styles
var styles = {
position: popper.position
};
var offsets = getRoundedOffsets(data, window.devicePixelRatio < 2 || !isFirefox);
var sideA = x === 'bottom' ? 'top' : 'bottom';
var sideB = y === 'right' ? 'left' : 'right';
// if gpuAcceleration is set to `true` and transform is supported,
// we use `translate3d` to apply the position to the popper we
// automatically use the supported prefixed version if needed
var prefixedProperty = getSupportedPropertyName('transform');
// now, let's make a step back and look at this code closely (wtf?)
// If the content of the popper grows once it's been positioned, it
// may happen that the popper gets misplaced because of the new content
// overflowing its reference element
// To avoid this problem, we provide two options (x and y), which allow
// the consumer to define the offset origin.
// If we position a popper on top of a reference element, we can set
// `x` to `top` to make the popper grow towards its top instead of
// its bottom.
var left = void 0,
top = void 0;
if (sideA === 'bottom') {
// when offsetParent is the positioning is relative to the bottom of the screen (excluding the scrollbar)
// and not the bottom of the html element
if (offsetParent.nodeName === 'HTML') {
top = -offsetParent.clientHeight + offsets.bottom;
} else {
top = -offsetParentRect.height + offsets.bottom;
}
} else {
top = offsets.top;
}
if (sideB === 'right') {
if (offsetParent.nodeName === 'HTML') {
left = -offsetParent.clientWidth + offsets.right;
} else {
left = -offsetParentRect.width + offsets.right;
}
} else {
left = offsets.left;
}
if (gpuAcceleration && prefixedProperty) {
styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
styles[sideA] = 0;
styles[sideB] = 0;
styles.willChange = 'transform';
} else {
// othwerise, we use the standard `top`, `left`, `bottom` and `right` properties
var invertTop = sideA === 'bottom' ? -1 : 1;
var invertLeft = sideB === 'right' ? -1 : 1;
styles[sideA] = top * invertTop;
styles[sideB] = left * invertLeft;
styles.willChange = sideA + ', ' + sideB;
}
// Attributes
var attributes = {
'x-placement': data.placement
};
// Update `data` attributes, styles and arrowStyles
data.attributes = _extends({}, attributes, data.attributes);
data.styles = _extends({}, styles, data.styles);
data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
return data;
}
/**
* Helper used to know if the given modifier depends from another one.
* It checks if the needed modifier is listed and enabled.
* @method
* @memberof Popper.Utils
* @param {Array} modifiers - list of modifiers
* @param {String} requestingName - name of requesting modifier
* @param {String} requestedName - name of requested modifier
* @returns {Boolean}
*/
function isModifierRequired(modifiers, requestingName, requestedName) {
var requesting = find(modifiers, function (_ref) {
var name = _ref.name;
return name === requestingName;
});
var isRequired = !!requesting && modifiers.some(function (modifier) {
return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order;
});
if (!isRequired) {
var _requesting = '`' + requestingName + '`';
var requested = '`' + requestedName + '`';
console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!');
}
return isRequired;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function arrow(data, options) {
var _data$offsets$arrow;
// arrow depends on keepTogether in order to work
if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) {
return data;
}
var arrowElement = options.element;
// if arrowElement is a string, suppose it's a CSS selector
if (typeof arrowElement === 'string') {
arrowElement = data.instance.popper.querySelector(arrowElement);
// if arrowElement is not found, don't run the modifier
if (!arrowElement) {
return data;
}
} else {
// if the arrowElement isn't a query selector we must check that the
// provided DOM node is child of its popper node
if (!data.instance.popper.contains(arrowElement)) {
console.warn('WARNING: `arrow.element` must be child of its popper element!');
return data;
}
}
var placement = data.placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isVertical = ['left', 'right'].indexOf(placement) !== -1;
var len = isVertical ? 'height' : 'width';
var sideCapitalized = isVertical ? 'Top' : 'Left';
var side = sideCapitalized.toLowerCase();
var altSide = isVertical ? 'left' : 'top';
var opSide = isVertical ? 'bottom' : 'right';
var arrowElementSize = getOuterSizes(arrowElement)[len];
//
// extends keepTogether behavior making sure the popper and its
// reference have enough pixels in conjunction
//
// top/left side
if (reference[opSide] - arrowElementSize < popper[side]) {
data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize);
}
// bottom/right side
if (reference[side] + arrowElementSize > popper[opSide]) {
data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide];
}
data.offsets.popper = getClientRect(data.offsets.popper);
// compute center of the popper
var center = reference[side] + reference[len] / 2 - arrowElementSize / 2;
// Compute the sideValue using the updated popper offsets
// take popper margin in account because we don't have this info available
var css = getStyleComputedProperty(data.instance.popper);
var popperMarginSide = parseFloat(css['margin' + sideCapitalized]);
var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width']);
var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide;
// prevent arrowElement from being placed not contiguously to its popper
sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0);
data.arrowElement = arrowElement;
data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow);
return data;
}
/**
* Get the opposite placement variation of the given one
* @method
* @memberof Popper.Utils
* @argument {String} placement variation
* @returns {String} flipped placement variation
*/
function getOppositeVariation(variation) {
if (variation === 'end') {
return 'start';
} else if (variation === 'start') {
return 'end';
}
return variation;
}
/**
* List of accepted placements to use as values of the `placement` option.
* Valid placements are:
* - `auto`
* - `top`
* - `right`
* - `bottom`
* - `left`
*
* Each placement can have a variation from this list:
* - `-start`
* - `-end`
*
* Variations are interpreted easily if you think of them as the left to right
* written languages. Horizontally (`top` and `bottom`), `start` is left and `end`
* is right.
* Vertically (`left` and `right`), `start` is top and `end` is bottom.
*
* Some valid examples are:
* - `top-end` (on top of reference, right aligned)
* - `right-start` (on right of reference, top aligned)
* - `bottom` (on bottom, centered)
* - `auto-end` (on the side with more space available, alignment depends by placement)
*
* @static
* @type {Array}
* @enum {String}
* @readonly
* @method placements
* @memberof Popper
*/
var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
// Get rid of `auto` `auto-start` and `auto-end`
var validPlacements = placements.slice(3);
/**
* Given an initial placement, returns all the subsequent placements
* clockwise (or counter-clockwise).
*
* @method
* @memberof Popper.Utils
* @argument {String} placement - A valid placement (it accepts variations)
* @argument {Boolean} counter - Set to true to walk the placements counterclockwise
* @returns {Array} placements including their variations
*/
function clockwise(placement) {
var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var index = validPlacements.indexOf(placement);
var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index));
return counter ? arr.reverse() : arr;
}
var BEHAVIORS = {
FLIP: 'flip',
CLOCKWISE: 'clockwise',
COUNTERCLOCKWISE: 'counterclockwise'
};
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function flip(data, options) {
// if `inner` modifier is enabled, we can't use the `flip` modifier
if (isModifierEnabled(data.instance.modifiers, 'inner')) {
return data;
}
if (data.flipped && data.placement === data.originalPlacement) {
// seems like flip is trying to loop, probably there's not enough space on any of the flippable sides
return data;
}
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement, data.positionFixed);
var placement = data.placement.split('-')[0];
var placementOpposite = getOppositePlacement(placement);
var variation = data.placement.split('-')[1] || '';
var flipOrder = [];
switch (options.behavior) {
case BEHAVIORS.FLIP:
flipOrder = [placement, placementOpposite];
break;
case BEHAVIORS.CLOCKWISE:
flipOrder = clockwise(placement);
break;
case BEHAVIORS.COUNTERCLOCKWISE:
flipOrder = clockwise(placement, true);
break;
default:
flipOrder = options.behavior;
}
flipOrder.forEach(function (step, index) {
if (placement !== step || flipOrder.length === index + 1) {
return data;
}
placement = data.placement.split('-')[0];
placementOpposite = getOppositePlacement(placement);
var popperOffsets = data.offsets.popper;
var refOffsets = data.offsets.reference;
// using floor because the reference offsets may contain decimals we are not going to consider here
var floor = Math.floor;
var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom);
var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left);
var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right);
var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top);
var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom);
var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom;
// flip the variation if required
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
// flips variation if reference element overflows boundaries
var flippedVariationByRef = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom);
// flips variation if popper content overflows boundaries
var flippedVariationByContent = !!options.flipVariationsByContent && (isVertical && variation === 'start' && overflowsRight || isVertical && variation === 'end' && overflowsLeft || !isVertical && variation === 'start' && overflowsBottom || !isVertical && variation === 'end' && overflowsTop);
var flippedVariation = flippedVariationByRef || flippedVariationByContent;
if (overlapsRef || overflowsBoundaries || flippedVariation) {
// this boolean to detect any flip loop
data.flipped = true;
if (overlapsRef || overflowsBoundaries) {
placement = flipOrder[index + 1];
}
if (flippedVariation) {
variation = getOppositeVariation(variation);
}
data.placement = placement + (variation ? '-' + variation : '');
// this object contains `position`, we want to preserve it along with
// any additional property we may add in the future
data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
data = runModifiers(data.instance.modifiers, data, 'flip');
}
});
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function keepTogether(data) {
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var placement = data.placement.split('-')[0];
var floor = Math.floor;
var isVertical = ['top', 'bottom'].indexOf(placement) !== -1;
var side = isVertical ? 'right' : 'bottom';
var opSide = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
if (popper[side] < floor(reference[opSide])) {
data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement];
}
if (popper[opSide] > floor(reference[side])) {
data.offsets.popper[opSide] = floor(reference[side]);
}
return data;
}
/**
* Converts a string containing value + unit into a px value number
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} str - Value + unit string
* @argument {String} measurement - `height` or `width`
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @returns {Number|String}
* Value in pixels, or original string if no values were extracted
*/
function toValue(str, measurement, popperOffsets, referenceOffsets) {
// separate value from unit
var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/);
var value = +split[1];
var unit = split[2];
// If it's not a number it's an operator, I guess
if (!value) {
return str;
}
if (unit.indexOf('%') === 0) {
var element = void 0;
switch (unit) {
case '%p':
element = popperOffsets;
break;
case '%':
case '%r':
default:
element = referenceOffsets;
}
var rect = getClientRect(element);
return rect[measurement] / 100 * value;
} else if (unit === 'vh' || unit === 'vw') {
// if is a vh or vw, we calculate the size based on the viewport
var size = void 0;
if (unit === 'vh') {
size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
} else {
size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
}
return size / 100 * value;
} else {
// if is an explicit pixel unit, we get rid of the unit and keep the value
// if is an implicit unit, it's px, and we return just the value
return value;
}
}
/**
* Parse an `offset` string to extrapolate `x` and `y` numeric offsets.
* @function
* @memberof {modifiers~offset}
* @private
* @argument {String} offset
* @argument {Object} popperOffsets
* @argument {Object} referenceOffsets
* @argument {String} basePlacement
* @returns {Array} a two cells array with x and y offsets in numbers
*/
function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) {
var offsets = [0, 0];
// Use height if placement is left or right and index is 0 otherwise use width
// in this way the first offset will use an axis and the second one
// will use the other one
var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1;
// Split the offset string to obtain a list of values and operands
// The regex addresses values with the plus or minus sign in front (+10, -20, etc)
var fragments = offset.split(/(\+|\-)/).map(function (frag) {
return frag.trim();
});
// Detect if the offset string contains a pair of values or a single one
// they could be separated by comma or space
var divider = fragments.indexOf(find(fragments, function (frag) {
return frag.search(/,|\s/) !== -1;
}));
if (fragments[divider] && fragments[divider].indexOf(',') === -1) {
console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.');
}
// If divider is found, we divide the list of values and operands to divide
// them by ofset X and Y.
var splitRegex = /\s*,\s*|\s+/;
var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments];
// Convert the values with units to absolute pixels to allow our computations
ops = ops.map(function (op, index) {
// Most of the units rely on the orientation of the popper
var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width';
var mergeWithPrevious = false;
return op
// This aggregates any `+` or `-` sign that aren't considered operators
// e.g.: 10 + +5 => [10, +, +5]
.reduce(function (a, b) {
if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) {
a[a.length - 1] = b;
mergeWithPrevious = true;
return a;
} else if (mergeWithPrevious) {
a[a.length - 1] += b;
mergeWithPrevious = false;
return a;
} else {
return a.concat(b);
}
}, [])
// Here we convert the string values into number values (in px)
.map(function (str) {
return toValue(str, measurement, popperOffsets, referenceOffsets);
});
});
// Loop trough the offsets arrays and execute the operations
ops.forEach(function (op, index) {
op.forEach(function (frag, index2) {
if (isNumeric(frag)) {
offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1);
}
});
});
return offsets;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @argument {Number|String} options.offset=0
* The offset value as described in the modifier description
* @returns {Object} The data object, properly modified
*/
function offset(data, _ref) {
var offset = _ref.offset;
var placement = data.placement,
_data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var basePlacement = placement.split('-')[0];
var offsets = void 0;
if (isNumeric(+offset)) {
offsets = [+offset, 0];
} else {
offsets = parseOffset(offset, popper, reference, basePlacement);
}
if (basePlacement === 'left') {
popper.top += offsets[0];
popper.left -= offsets[1];
} else if (basePlacement === 'right') {
popper.top += offsets[0];
popper.left += offsets[1];
} else if (basePlacement === 'top') {
popper.left += offsets[0];
popper.top -= offsets[1];
} else if (basePlacement === 'bottom') {
popper.left += offsets[0];
popper.top += offsets[1];
}
data.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function preventOverflow(data, options) {
var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper);
// If offsetParent is the reference element, we really want to
// go one step up and use the next offsetParent as reference to
// avoid to make this modifier completely useless and look like broken
if (data.instance.reference === boundariesElement) {
boundariesElement = getOffsetParent(boundariesElement);
}
// NOTE: DOM access here
// resets the popper's position so that the document size can be calculated excluding
// the size of the popper element itself
var transformProp = getSupportedPropertyName('transform');
var popperStyles = data.instance.popper.style; // assignment to help minification
var top = popperStyles.top,
left = popperStyles.left,
transform = popperStyles[transformProp];
popperStyles.top = '';
popperStyles.left = '';
popperStyles[transformProp] = '';
var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement, data.positionFixed);
// NOTE: DOM access here
// restores the original style properties after the offsets have been computed
popperStyles.top = top;
popperStyles.left = left;
popperStyles[transformProp] = transform;
options.boundaries = boundaries;
var order = options.priority;
var popper = data.offsets.popper;
var check = {
primary: function primary(placement) {
var value = popper[placement];
if (popper[placement] < boundaries[placement] && !options.escapeWithReference) {
value = Math.max(popper[placement], boundaries[placement]);
}
return defineProperty({}, placement, value);
},
secondary: function secondary(placement) {
var mainSide = placement === 'right' ? 'left' : 'top';
var value = popper[mainSide];
if (popper[placement] > boundaries[placement] && !options.escapeWithReference) {
value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height));
}
return defineProperty({}, mainSide, value);
}
};
order.forEach(function (placement) {
var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
popper = _extends({}, popper, check[side](placement));
});
data.offsets.popper = popper;
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function shift(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var shiftvariation = placement.split('-')[1];
// if shift shiftvariation is specified, run the modifier
if (shiftvariation) {
var _data$offsets = data.offsets,
reference = _data$offsets.reference,
popper = _data$offsets.popper;
var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1;
var side = isVertical ? 'left' : 'top';
var measurement = isVertical ? 'width' : 'height';
var shiftOffsets = {
start: defineProperty({}, side, reference[side]),
end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement])
};
data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]);
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by update method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function hide(data) {
if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) {
return data;
}
var refRect = data.offsets.reference;
var bound = find(data.instance.modifiers, function (modifier) {
return modifier.name === 'preventOverflow';
}).boundaries;
if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === true) {
return data;
}
data.hide = true;
data.attributes['x-out-of-boundaries'] = '';
} else {
// Avoid unnecessary DOM access if visibility hasn't changed
if (data.hide === false) {
return data;
}
data.hide = false;
data.attributes['x-out-of-boundaries'] = false;
}
return data;
}
/**
* @function
* @memberof Modifiers
* @argument {Object} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {Object} The data object, properly modified
*/
function inner(data) {
var placement = data.placement;
var basePlacement = placement.split('-')[0];
var _data$offsets = data.offsets,
popper = _data$offsets.popper,
reference = _data$offsets.reference;
var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1;
var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1;
popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0);
data.placement = getOppositePlacement(placement);
data.offsets.popper = getClientRect(popper);
return data;
}
/**
* Modifier function, each modifier can have a function of this type assigned
* to its `fn` property.
* These functions will be called on each update, this means that you must
* make sure they are performant enough to avoid performance bottlenecks.
*
* @function ModifierFn
* @argument {dataObject} data - The data object generated by `update` method
* @argument {Object} options - Modifiers configuration and options
* @returns {dataObject} The data object, properly modified
*/
/**
* Modifiers are plugins used to alter the behavior of your poppers.
* Popper.js uses a set of 9 modifiers to provide all the basic functionalities
* needed by the library.
*
* Usually you don't want to override the `order`, `fn` and `onLoad` props.
* All the other properties are configurations that could be tweaked.
* @namespace modifiers
*/
var modifiers = {
/**
* Modifier used to shift the popper on the start or end of its reference
* element.
* It will read the variation of the `placement` property.
* It can be one either `-end` or `-start`.
* @memberof modifiers
* @inner
*/
shift: {
/** @prop {number} order=100 - Index used to define the order of execution */
order: 100,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: shift
},
/**
* The `offset` modifier can shift your popper on both its axis.
*
* It accepts the following units:
* - `px` or unit-less, interpreted as pixels
* - `%` or `%r`, percentage relative to the length of the reference element
* - `%p`, percentage relative to the length of the popper element
* - `vw`, CSS viewport width unit
* - `vh`, CSS viewport height unit
*
* For length is intended the main axis relative to the placement of the popper.
* This means that if the placement is `top` or `bottom`, the length will be the
* `width`. In case of `left` or `right`, it will be the `height`.
*
* You can provide a single value (as `Number` or `String`), or a pair of values
* as `String` divided by a comma or one (or more) white spaces.
* The latter is a deprecated method because it leads to confusion and will be
* removed in v2.
* Additionally, it accepts additions and subtractions between different units.
* Note that multiplications and divisions aren't supported.
*
* Valid examples are:
* ```
* 10
* '10%'
* '10, 10'
* '10%, 10'
* '10 + 10%'
* '10 - 5vh + 3%'
* '-10px + 5vh, 5px - 6%'
* ```
* > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap
* > with their reference element, unfortunately, you will have to disable the `flip` modifier.
* > You can read more on this at this [issue](https://github.com/FezVrasta/popper.js/issues/373).
*
* @memberof modifiers
* @inner
*/
offset: {
/** @prop {number} order=200 - Index used to define the order of execution */
order: 200,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: offset,
/** @prop {Number|String} offset=0
* The offset value as described in the modifier description
*/
offset: 0
},
/**
* Modifier used to prevent the popper from being positioned outside the boundary.
*
* A scenario exists where the reference itself is not within the boundaries.
* We can say it has "escaped the boundaries" — or just "escaped".
* In this case we need to decide whether the popper should either:
*
* - detach from the reference and remain "trapped" in the boundaries, or
* - if it should ignore the boundary and "escape with its reference"
*
* When `escapeWithReference` is set to`true` and reference is completely
* outside its boundaries, the popper will overflow (or completely leave)
* the boundaries in order to remain attached to the edge of the reference.
*
* @memberof modifiers
* @inner
*/
preventOverflow: {
/** @prop {number} order=300 - Index used to define the order of execution */
order: 300,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: preventOverflow,
/**
* @prop {Array} [priority=['left','right','top','bottom']]
* Popper will try to prevent overflow following these priorities by default,
* then, it could overflow on the left and on top of the `boundariesElement`
*/
priority: ['left', 'right', 'top', 'bottom'],
/**
* @prop {number} padding=5
* Amount of pixel used to define a minimum distance between the boundaries
* and the popper. This makes sure the popper always has a little padding
* between the edges of its container
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='scrollParent'
* Boundaries used by the modifier. Can be `scrollParent`, `window`,
* `viewport` or any DOM element.
*/
boundariesElement: 'scrollParent'
},
/**
* Modifier used to make sure the reference and its popper stay near each other
* without leaving any gap between the two. Especially useful when the arrow is
* enabled and you want to ensure that it points to its reference element.
* It cares only about the first axis. You can still have poppers with margin
* between the popper and its reference element.
* @memberof modifiers
* @inner
*/
keepTogether: {
/** @prop {number} order=400 - Index used to define the order of execution */
order: 400,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: keepTogether
},
/**
* This modifier is used to move the `arrowElement` of the popper to make
* sure it is positioned between the reference element and its popper element.
* It will read the outer size of the `arrowElement` node to detect how many
* pixels of conjunction are needed.
*
* It has no effect if no `arrowElement` is provided.
* @memberof modifiers
* @inner
*/
arrow: {
/** @prop {number} order=500 - Index used to define the order of execution */
order: 500,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: arrow,
/** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */
element: '[x-arrow]'
},
/**
* Modifier used to flip the popper's placement when it starts to overlap its
* reference element.
*
* Requires the `preventOverflow` modifier before it in order to work.
*
* **NOTE:** this modifier will interrupt the current update cycle and will
* restart it if it detects the need to flip the placement.
* @memberof modifiers
* @inner
*/
flip: {
/** @prop {number} order=600 - Index used to define the order of execution */
order: 600,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: flip,
/**
* @prop {String|Array} behavior='flip'
* The behavior used to change the popper's placement. It can be one of
* `flip`, `clockwise`, `counterclockwise` or an array with a list of valid
* placements (with optional variations)
*/
behavior: 'flip',
/**
* @prop {number} padding=5
* The popper will flip if it hits the edges of the `boundariesElement`
*/
padding: 5,
/**
* @prop {String|HTMLElement} boundariesElement='viewport'
* The element which will define the boundaries of the popper position.
* The popper will never be placed outside of the defined boundaries
* (except if `keepTogether` is enabled)
*/
boundariesElement: 'viewport',
/**
* @prop {Boolean} flipVariations=false
* The popper will switch placement variation between `-start` and `-end` when
* the reference element overlaps its boundaries.
*
* The original placement should have a set variation.
*/
flipVariations: false,
/**
* @prop {Boolean} flipVariationsByContent=false
* The popper will switch placement variation between `-start` and `-end` when
* the popper element overlaps its reference boundaries.
*
* The original placement should have a set variation.
*/
flipVariationsByContent: false
},
/**
* Modifier used to make the popper flow toward the inner of the reference element.
* By default, when this modifier is disabled, the popper will be placed outside
* the reference element.
* @memberof modifiers
* @inner
*/
inner: {
/** @prop {number} order=700 - Index used to define the order of execution */
order: 700,
/** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */
enabled: false,
/** @prop {ModifierFn} */
fn: inner
},
/**
* Modifier used to hide the popper when its reference element is outside of the
* popper boundaries. It will set a `x-out-of-boundaries` attribute which can
* be used to hide with a CSS selector the popper when its reference is
* out of boundaries.
*
* Requires the `preventOverflow` modifier before it in order to work.
* @memberof modifiers
* @inner
*/
hide: {
/** @prop {number} order=800 - Index used to define the order of execution */
order: 800,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: hide
},
/**
* Computes the style that will be applied to the popper element to gets
* properly positioned.
*
* Note that this modifier will not touch the DOM, it just prepares the styles
* so that `applyStyle` modifier can apply it. This separation is useful
* in case you need to replace `applyStyle` with a custom implementation.
*
* This modifier has `850` as `order` value to maintain backward compatibility
* with previous versions of Popper.js. Expect the modifiers ordering method
* to change in future major versions of the library.
*
* @memberof modifiers
* @inner
*/
computeStyle: {
/** @prop {number} order=850 - Index used to define the order of execution */
order: 850,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: computeStyle,
/**
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: true,
/**
* @prop {string} [x='bottom']
* Where to anchor the X axis (`bottom` or `top`). AKA X offset origin.
* Change this if your popper should grow in a direction different from `bottom`
*/
x: 'bottom',
/**
* @prop {string} [x='left']
* Where to anchor the Y axis (`left` or `right`). AKA Y offset origin.
* Change this if your popper should grow in a direction different from `right`
*/
y: 'right'
},
/**
* Applies the computed styles to the popper element.
*
* All the DOM manipulations are limited to this modifier. This is useful in case
* you want to integrate Popper.js inside a framework or view library and you
* want to delegate all the DOM manipulations to it.
*
* Note that if you disable this modifier, you must make sure the popper element
* has its position set to `absolute` before Popper.js can do its work!
*
* Just disable this modifier and define your own to achieve the desired effect.
*
* @memberof modifiers
* @inner
*/
applyStyle: {
/** @prop {number} order=900 - Index used to define the order of execution */
order: 900,
/** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */
enabled: true,
/** @prop {ModifierFn} */
fn: applyStyle,
/** @prop {Function} */
onLoad: applyStyleOnLoad,
/**
* @deprecated since version 1.10.0, the property moved to `computeStyle` modifier
* @prop {Boolean} gpuAcceleration=true
* If true, it uses the CSS 3D transformation to position the popper.
* Otherwise, it will use the `top` and `left` properties
*/
gpuAcceleration: undefined
}
};
/**
* The `dataObject` is an object containing all the information used by Popper.js.
* This object is passed to modifiers and to the `onCreate` and `onUpdate` callbacks.
* @name dataObject
* @property {Object} data.instance The Popper.js instance
* @property {String} data.placement Placement applied to popper
* @property {String} data.originalPlacement Placement originally defined on init
* @property {Boolean} data.flipped True if popper has been flipped by flip modifier
* @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper
* @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier
* @property {Object} data.styles Any CSS property defined here will be applied to the popper. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow. It expects the JavaScript nomenclature (eg. `marginBottom`)
* @property {Object} data.boundaries Offsets of the popper boundaries
* @property {Object} data.offsets The measurements of popper, reference and arrow elements
* @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values
* @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0
*/
/**
* Default options provided to Popper.js constructor.
* These can be overridden using the `options` argument of Popper.js.
* To override an option, simply pass an object with the same
* structure of the `options` object, as the 3rd argument. For example:
* ```
* new Popper(ref, pop, {
* modifiers: {
* preventOverflow: { enabled: false }
* }
* })
* ```
* @type {Object}
* @static
* @memberof Popper
*/
var Defaults = {
/**
* Popper's placement.
* @prop {Popper.placements} placement='bottom'
*/
placement: 'bottom',
/**
* Set this to true if you want popper to position it self in 'fixed' mode
* @prop {Boolean} positionFixed=false
*/
positionFixed: false,
/**
* Whether events (resize, scroll) are initially enabled.
* @prop {Boolean} eventsEnabled=true
*/
eventsEnabled: true,
/**
* Set to true if you want to automatically remove the popper when
* you call the `destroy` method.
* @prop {Boolean} removeOnDestroy=false
*/
removeOnDestroy: false,
/**
* Callback called when the popper is created.
* By default, it is set to no-op.
* Access Popper.js instance with `data.instance`.
* @prop {onCreate}
*/
onCreate: function onCreate() {},
/**
* Callback called when the popper is updated. This callback is not called
* on the initialization/creation of the popper, but only on subsequent
* updates.
* By default, it is set to no-op.
* Access Popper.js instance with `data.instance`.
* @prop {onUpdate}
*/
onUpdate: function onUpdate() {},
/**
* List of modifiers used to modify the offsets before they are applied to the popper.
* They provide most of the functionalities of Popper.js.
* @prop {modifiers}
*/
modifiers: modifiers
};
/**
* @callback onCreate
* @param {dataObject} data
*/
/**
* @callback onUpdate
* @param {dataObject} data
*/
// Utils
// Methods
var Popper = function () {
/**
* Creates a new Popper.js instance.
* @class Popper
* @param {Element|referenceObject} reference - The reference element used to position the popper
* @param {Element} popper - The HTML / XML element used as the popper
* @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults)
* @return {Object} instance - The generated Popper.js instance
*/
function Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate = function () {
return requestAnimationFrame(_this.update);
};
// make update() debounced, so that it only runs at most once-per-tick
this.update = debounce(this.update.bind(this));
// with {} we create a new object with the options inside it
this.options = _extends({}, Popper.Defaults, options);
// init state
this.state = {
isDestroyed: false,
isCreated: false,
scrollParents: []
};
// get reference and popper elements (allow jQuery wrappers)
this.reference = reference && reference.jquery ? reference[0] : reference;
this.popper = popper && popper.jquery ? popper[0] : popper;
// Deep merge modifiers options
this.options.modifiers = {};
Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) {
_this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
});
// Refactoring modifiers' list (Object => Array)
this.modifiers = Object.keys(this.options.modifiers).map(function (name) {
return _extends({
name: name
}, _this.options.modifiers[name]);
})
// sort the modifiers by order
.sort(function (a, b) {
return a.order - b.order;
});
// modifiers have the ability to execute arbitrary code when Popper.js get inited
// such code is executed in the same order of its modifier
// they could add new properties to their options configuration
// BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`!
this.modifiers.forEach(function (modifierOptions) {
if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) {
modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state);
}
});
// fire the first update to position the popper in the right place
this.update();
var eventsEnabled = this.options.eventsEnabled;
if (eventsEnabled) {
// setup event listeners, they will take care of update the position in specific situations
this.enableEventListeners();
}
this.state.eventsEnabled = eventsEnabled;
}
// We can't use class properties because they don't get listed in the
// class prototype and break stuff like Sinon stubs
createClass(Popper, [{
key: 'update',
value: function update$$1() {
return update.call(this);
}
}, {
key: 'destroy',
value: function destroy$$1() {
return destroy.call(this);
}
}, {
key: 'enableEventListeners',
value: function enableEventListeners$$1() {
return enableEventListeners.call(this);
}
}, {
key: 'disableEventListeners',
value: function disableEventListeners$$1() {
return disableEventListeners.call(this);
}
/**
* Schedules an update. It will run on the next UI update available.
* @method scheduleUpdate
* @memberof Popper
*/
/**
* Collection of utilities useful when writing custom modifiers.
* Starting from version 1.7, this method is available only if you
* include `popper-utils.js` before `popper.js`.
*
* **DEPRECATION**: This way to access PopperUtils is deprecated
* and will be removed in v2! Use the PopperUtils module directly instead.
* Due to the high instability of the methods contained in Utils, we can't
* guarantee them to follow semver. Use them at your own risk!
* @static
* @private
* @type {Object}
* @deprecated since version 1.8
* @member Utils
* @memberof Popper
*/
}]);
return Popper;
}();
/**
* The `referenceObject` is an object that provides an interface compatible with Popper.js
* and lets you use it as replacement of a real DOM node.
* You can use this method to position a popper relatively to a set of coordinates
* in case you don't have a DOM node to use as reference.
*
* ```
* new Popper(referenceObject, popperNode);
* ```
*
* NB: This feature isn't supported in Internet Explorer 10.
* @name referenceObject
* @property {Function} data.getBoundingClientRect
* A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method.
* @property {number} data.clientWidth
* An ES6 getter that will return the width of the virtual reference element.
* @property {number} data.clientHeight
* An ES6 getter that will return the height of the virtual reference element.
*/
Popper.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils;
Popper.placements = placements;
Popper.Defaults = Defaults;
/**!
* tippy.js v4.3.5
* (c) 2017-2019 atomiks
* MIT License
*/
var css = ".tippy-iOS{cursor:pointer!important;-webkit-tap-highlight-color:transparent}.tippy-popper{transition-timing-function:cubic-bezier(.165,.84,.44,1);max-width:calc(100% - 8px);pointer-events:none;outline:0}.tippy-popper[x-placement^=top] .tippy-backdrop{border-radius:40% 40% 0 0}.tippy-popper[x-placement^=top] .tippy-roundarrow{bottom:-7px;bottom:-6.5px;-webkit-transform-origin:50% 0;transform-origin:50% 0;margin:0 3px}.tippy-popper[x-placement^=top] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-popper[x-placement^=top] .tippy-arrow{border-top:8px solid #333;border-right:8px solid transparent;border-left:8px solid transparent;bottom:-7px;margin:0 3px;-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-backdrop{-webkit-transform-origin:0 25%;transform-origin:0 25%}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%)}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-50%,-45%);transform:scale(.2) translate(-50%,-45%);opacity:0}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateY(-10px);transform:perspective(700px) translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) rotateX(60deg);transform:perspective(700px) rotateX(60deg)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-popper[x-placement^=top] [data-animation=scale]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(-10px) scale(.5);transform:translateY(-10px) scale(.5)}.tippy-popper[x-placement^=bottom] .tippy-backdrop{border-radius:0 0 30% 30%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow{top:-7px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;margin:0 3px}.tippy-popper[x-placement^=bottom] .tippy-roundarrow svg{position:absolute;left:0}.tippy-popper[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #333;border-right:8px solid transparent;border-left:8px solid transparent;top:-7px;margin:0 3px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-backdrop{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%)}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-50%);transform:scale(.2) translate(-50%);opacity:0}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateY(10px);transform:perspective(700px) translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) rotateX(-60deg);transform:perspective(700px) rotateX(-60deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-popper[x-placement^=bottom] [data-animation=scale]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(10px) scale(.5);transform:translateY(10px) scale(.5)}.tippy-popper[x-placement^=left] .tippy-backdrop{border-radius:50% 0 0 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow{right:-12px;-webkit-transform-origin:33.33333333% 50%;transform-origin:33.33333333% 50%;margin:3px 0}.tippy-popper[x-placement^=left] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-popper[x-placement^=left] .tippy-arrow{border-left:8px solid #333;border-top:8px solid transparent;border-bottom:8px solid transparent;right:-7px;margin:3px 0;-webkit-transform-origin:0 50%;transform-origin:0 50%}.tippy-popper[x-placement^=left] .tippy-backdrop{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-75%,-50%);transform:scale(.2) translate(-75%,-50%);opacity:0}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateX(-10px);transform:perspective(700px) translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) rotateY(-60deg);transform:perspective(700px) rotateY(-60deg)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-popper[x-placement^=left] [data-animation=scale]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(-10px) scale(.5);transform:translateX(-10px) scale(.5)}.tippy-popper[x-placement^=right] .tippy-backdrop{border-radius:0 50% 50% 0}.tippy-popper[x-placement^=right] .tippy-roundarrow{left:-12px;-webkit-transform-origin:66.66666666% 50%;transform-origin:66.66666666% 50%;margin:3px 0}.tippy-popper[x-placement^=right] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-popper[x-placement^=right] .tippy-arrow{border-right:8px solid #333;border-top:8px solid transparent;border-bottom:8px solid transparent;left:-7px;margin:3px 0;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.tippy-popper[x-placement^=right] .tippy-backdrop{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-25%,-50%);transform:scale(.2) translate(-25%,-50%);opacity:0}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateX(10px);transform:perspective(700px) translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) rotateY(60deg);transform:perspective(700px) rotateY(60deg)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-popper[x-placement^=right] [data-animation=scale]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(10px) scale(.5);transform:translateX(10px) scale(.5)}.tippy-tooltip{position:relative;color:#fff;border-radius:.25rem;font-size:.875rem;padding:.3125rem .5625rem;line-height:1.4;text-align:center;background-color:#333}.tippy-tooltip[data-size=small]{padding:.1875rem .375rem;font-size:.75rem}.tippy-tooltip[data-size=large]{padding:.375rem .75rem;font-size:1rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:initial}.tippy-tooltip[data-interactive],.tippy-tooltip[data-interactive] .tippy-roundarrow path{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow,.tippy-roundarrow{position:absolute;width:0;height:0}.tippy-roundarrow{width:18px;height:7px;fill:#333;pointer-events:none}.tippy-backdrop{position:absolute;background-color:#333;border-radius:50%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop:after{content:\"\";float:left;padding-top:100%}.tippy-backdrop+.tippy-content{transition-property:opacity;will-change:opacity}.tippy-backdrop+.tippy-content[data-state=hidden]{opacity:0}";
function _extends$1() {
_extends$1 = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$1.apply(this, arguments);
}
var version = "4.3.5";
var isBrowser$1 = typeof window !== 'undefined' && typeof document !== 'undefined';
var ua = isBrowser$1 ? navigator.userAgent : '';
var isIE$1 = /MSIE |Trident\//.test(ua);
var isUCBrowser = /UCBrowser\//.test(ua);
var isIOS = isBrowser$1 && /iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream;
var defaultProps = {
a11y: true,
allowHTML: true,
animateFill: true,
animation: 'shift-away',
appendTo: function appendTo() {
return document.body;
},
aria: 'describedby',
arrow: false,
arrowType: 'sharp',
boundary: 'scrollParent',
content: '',
delay: 0,
distance: 10,
duration: [325, 275],
flip: true,
flipBehavior: 'flip',
flipOnUpdate: false,
followCursor: false,
hideOnClick: true,
ignoreAttributes: false,
inertia: false,
interactive: false,
interactiveBorder: 2,
interactiveDebounce: 0,
lazy: true,
maxWidth: 350,
multiple: false,
offset: 0,
onHidden: function onHidden() {},
onHide: function onHide() {},
onMount: function onMount() {},
onShow: function onShow() {},
onShown: function onShown() {},
onTrigger: function onTrigger() {},
placement: 'top',
popperOptions: {},
role: 'tooltip',
showOnInit: false,
size: 'regular',
sticky: false,
target: '',
theme: 'dark',
touch: true,
touchHold: false,
trigger: 'mouseenter focus',
triggerTarget: null,
updateDuration: 0,
wait: null,
zIndex: 9999
/**
* If the set() method encounters one of these, the popperInstance must be
* recreated
*/
};
var POPPER_INSTANCE_DEPENDENCIES = ['arrow', 'arrowType', 'boundary', 'distance', 'flip', 'flipBehavior', 'flipOnUpdate', 'offset', 'placement', 'popperOptions'];
var elementProto = isBrowser$1 ? Element.prototype : {};
var matches = elementProto.matches || elementProto.matchesSelector || elementProto.webkitMatchesSelector || elementProto.mozMatchesSelector || elementProto.msMatchesSelector;
/**
* Ponyfill for Array.from - converts iterable values to an array
*/
function arrayFrom(value) {
return [].slice.call(value);
}
/**
* Ponyfill for Element.prototype.closest
*/
function closest(element, selector) {
return closestCallback(element, function (el) {
return matches.call(el, selector);
});
}
/**
* Works like Element.prototype.closest, but uses a callback instead
*/
function closestCallback(element, callback) {
while (element) {
if (callback(element)) {
return element;
}
element = element.parentElement;
}
return null;
}
// Passive event listener config
var PASSIVE = {
passive: true // Popper `preventOverflow` padding
};
var PADDING = 4; // Popper attributes
// In Popper v2 these will be `data-*` instead of `x-*` to adhere to HTML5 spec
var PLACEMENT_ATTRIBUTE = 'x-placement';
var OUT_OF_BOUNDARIES_ATTRIBUTE = 'x-out-of-boundaries'; // Classes
var IOS_CLASS = "tippy-iOS";
var ACTIVE_CLASS = "tippy-active";
var POPPER_CLASS = "tippy-popper";
var TOOLTIP_CLASS = "tippy-tooltip";
var CONTENT_CLASS = "tippy-content";
var BACKDROP_CLASS = "tippy-backdrop";
var ARROW_CLASS = "tippy-arrow";
var ROUND_ARROW_CLASS = "tippy-roundarrow"; // Selectors
var POPPER_SELECTOR = ".".concat(POPPER_CLASS);
var TOOLTIP_SELECTOR = ".".concat(TOOLTIP_CLASS);
var CONTENT_SELECTOR = ".".concat(CONTENT_CLASS);
var BACKDROP_SELECTOR = ".".concat(BACKDROP_CLASS);
var ARROW_SELECTOR = ".".concat(ARROW_CLASS);
var ROUND_ARROW_SELECTOR = ".".concat(ROUND_ARROW_CLASS);
var isUsingTouch = false;
function onDocumentTouch() {
if (isUsingTouch) {
return;
}
isUsingTouch = true;
if (isIOS) {
document.body.classList.add(IOS_CLASS);
}
if (window.performance) {
document.addEventListener('mousemove', onDocumentMouseMove);
}
}
var lastMouseMoveTime = 0;
function onDocumentMouseMove() {
var now = performance.now(); // Chrome 60+ is 1 mousemove per animation frame, use 20ms time difference
if (now - lastMouseMoveTime < 20) {
isUsingTouch = false;
document.removeEventListener('mousemove', onDocumentMouseMove);
if (!isIOS) {
document.body.classList.remove(IOS_CLASS);
}
}
lastMouseMoveTime = now;
}
function onWindowBlur() {
var _document = document,
activeElement = _document.activeElement;
if (activeElement && activeElement.blur && activeElement._tippy) {
activeElement.blur();
}
}
/**
* Adds the needed global event listeners
*/
function bindGlobalEventListeners() {
document.addEventListener('touchstart', onDocumentTouch, PASSIVE);
window.addEventListener('blur', onWindowBlur);
}
var keys = Object.keys(defaultProps);
/**
* Returns an object of optional props from data-tippy-* attributes
*/
function getDataAttributeOptions(reference) {
return keys.reduce(function (acc, key) {
var valueAsString = (reference.getAttribute("data-tippy-".concat(key)) || '').trim();
if (!valueAsString) {
return acc;
}
if (key === 'content') {
acc[key] = valueAsString;
} else {
try {
acc[key] = JSON.parse(valueAsString);
} catch (e) {
acc[key] = valueAsString;
}
}
return acc;
}, {});
}
/**
* Polyfills the virtual reference (plain object) with Element.prototype props
* Mutating because DOM elements are mutated, adds `_tippy` property
*/
function polyfillElementPrototypeProperties(virtualReference) {
var polyfills = {
isVirtual: true,
attributes: virtualReference.attributes || {},
contains: function contains() {},
setAttribute: function setAttribute(key, value) {
virtualReference.attributes[key] = value;
},
getAttribute: function getAttribute(key) {
return virtualReference.attributes[key];
},
removeAttribute: function removeAttribute(key) {
delete virtualReference.attributes[key];
},
hasAttribute: function hasAttribute(key) {
return key in virtualReference.attributes;
},
addEventListener: function addEventListener() {},
removeEventListener: function removeEventListener() {},
classList: {
classNames: {},
add: function add(key) {
virtualReference.classList.classNames[key] = true;
},
remove: function remove(key) {
delete virtualReference.classList.classNames[key];
},
contains: function contains(key) {
return key in virtualReference.classList.classNames;
}
}
};
for (var key in polyfills) {
virtualReference[key] = polyfills[key];
}
}
/**
* Determines if a value is a "bare" virtual element (before mutations done
* by `polyfillElementPrototypeProperties()`). JSDOM elements show up as
* [object Object], we can check if the value is "element-like" if it has
* `addEventListener`
*/
function isBareVirtualElement(value) {
return {}.toString.call(value) === '[object Object]' && !value.addEventListener;
}
/**
* Determines if the value is a reference element
*/
function isReferenceElement(value) {
return !!value._tippy && !matches.call(value, POPPER_SELECTOR);
}
/**
* Safe .hasOwnProperty check, for prototype-less objects
*/
function hasOwnProperty(obj, key) {
return {}.hasOwnProperty.call(obj, key);
}
/**
* Returns an array of elements based on the value
*/
function getArrayOfElements(value) {
if (isSingular(value)) {
// TODO: VirtualReference is not compatible to type Element
return [value];
}
if (value instanceof NodeList) {
return arrayFrom(value);
}
if (Array.isArray(value)) {
return value;
}
try {
return arrayFrom(document.querySelectorAll(value));
} catch (e) {
return [];
}
}
/**
* Returns a value at a given index depending on if it's an array or number
*/
function getValue(value, index, defaultValue) {
if (Array.isArray(value)) {
var v = value[index];
return v == null ? defaultValue : v;
}
return value;
}
/**
* Debounce utility. To avoid bloating bundle size, we're only passing 1
* argument here, a more generic function would pass all arguments. Only
* `onMouseMove` uses this which takes the event object for now.
*/
function debounce$1(fn, ms) {
// Avoid wrapping in `setTimeout` if ms is 0 anyway
if (ms === 0) {
return fn;
}
var timeout;
return function (arg) {
clearTimeout(timeout);
timeout = setTimeout(function () {
fn(arg);
}, ms);
};
}
/**
* Prevents errors from being thrown while accessing nested modifier objects
* in `popperOptions`
*/
function getModifier(obj, key) {
return obj && obj.modifiers && obj.modifiers[key];
}
/**
* Determines if an array or string includes a value
*/
function includes(a, b) {
return a.indexOf(b) > -1;
}
/**
* Determines if the value is a real element
*/
function isRealElement(value) {
return value instanceof Element;
}
/**
* Determines if the value is singular-like
*/
function isSingular(value) {
return !!(value && hasOwnProperty(value, 'isVirtual')) || isRealElement(value);
}
/**
* Firefox extensions don't allow setting .innerHTML directly, this will trick it
*/
function innerHTML() {
return 'innerHTML';
}
/**
* Evaluates a function if one, or returns the value
*/
function invokeWithArgsOrReturn(value, args) {
return typeof value === 'function' ? value.apply(null, args) : value;
}
/**
* Sets a popperInstance `flip` modifier's enabled state
*/
function setFlipModifierEnabled(modifiers, value) {
modifiers.filter(function (m) {
return m.name === 'flip';
})[0].enabled = value;
}
/**
* Determines if an element can receive focus
* Always returns true for virtual objects
*/
function canReceiveFocus(element) {
return isRealElement(element) ? matches.call(element, 'a[href],area[href],button,details,input,textarea,select,iframe,[tabindex]') && !element.hasAttribute('disabled') : true;
}
/**
* Returns a new `div` element
*/
function div() {
return document.createElement('div');
}
/**
* Applies a transition duration to a list of elements
*/
function setTransitionDuration(els, value) {
els.forEach(function (el) {
if (el) {
el.style.transitionDuration = "".concat(value, "ms");
}
});
}
/**
* Sets the visibility state to elements so they can begin to transition
*/
function setVisibilityState(els, state) {
els.forEach(function (el) {
if (el) {
el.setAttribute('data-state', state);
}
});
}
/**
* Evaluates the props object by merging data attributes and
* disabling conflicting options where necessary
*/
function evaluateProps(reference, props) {
var out = _extends$1({}, props, {
content: invokeWithArgsOrReturn(props.content, [reference])
}, props.ignoreAttributes ? {} : getDataAttributeOptions(reference));
if (out.arrow || isUCBrowser) {
out.animateFill = false;
}
return out;
}
/**
* Validates an object of options with the valid default props object
*/
function validateOptions(options, defaultProps) {
Object.keys(options).forEach(function (option) {
if (!hasOwnProperty(defaultProps, option)) {
throw new Error("[tippy]: `".concat(option, "` is not a valid option"));
}
});
}
/**
* Sets the innerHTML of an element
*/
function setInnerHTML(element, html) {
element[innerHTML()] = isRealElement(html) ? html[innerHTML()] : html;
}
/**
* Sets the content of a tooltip
*/
function setContent(contentEl, props) {
if (isRealElement(props.content)) {
setInnerHTML(contentEl, '');
contentEl.appendChild(props.content);
} else if (typeof props.content !== 'function') {
var key = props.allowHTML ? 'innerHTML' : 'textContent';
contentEl[key] = props.content;
}
}
/**
* Returns the child elements of a popper element
*/
function getChildren(popper) {
return {
tooltip: popper.querySelector(TOOLTIP_SELECTOR),
backdrop: popper.querySelector(BACKDROP_SELECTOR),
content: popper.querySelector(CONTENT_SELECTOR),
arrow: popper.querySelector(ARROW_SELECTOR) || popper.querySelector(ROUND_ARROW_SELECTOR)
};
}
/**
* Adds `data-inertia` attribute
*/
function addInertia(tooltip) {
tooltip.setAttribute('data-inertia', '');
}
/**
* Removes `data-inertia` attribute
*/
function removeInertia(tooltip) {
tooltip.removeAttribute('data-inertia');
}
/**
* Creates an arrow element and returns it
*/
function createArrowElement(arrowType) {
var arrow = div();
if (arrowType === 'round') {
arrow.className = ROUND_ARROW_CLASS;
setInnerHTML(arrow, '');
} else {
arrow.className = ARROW_CLASS;
}
return arrow;
}
/**
* Creates a backdrop element and returns it
*/
function createBackdropElement() {
var backdrop = div();
backdrop.className = BACKDROP_CLASS;
backdrop.setAttribute('data-state', 'hidden');
return backdrop;
}
/**
* Adds interactive-related attributes
*/
function addInteractive(popper, tooltip) {
popper.setAttribute('tabindex', '-1');
tooltip.setAttribute('data-interactive', '');
}
/**
* Removes interactive-related attributes
*/
function removeInteractive(popper, tooltip) {
popper.removeAttribute('tabindex');
tooltip.removeAttribute('data-interactive');
}
/**
* Add/remove transitionend listener from tooltip
*/
function updateTransitionEndListener(tooltip, action, listener) {
// UC Browser hasn't adopted the `transitionend` event despite supporting
// unprefixed transitions...
var eventName = isUCBrowser && document.body.style.webkitTransition !== undefined ? 'webkitTransitionEnd' : 'transitionend';
tooltip[action + 'EventListener'](eventName, listener);
}
/**
* Returns the popper's placement, ignoring shifting (top-start, etc)
*/
function getBasicPlacement(popper) {
var fullPlacement = popper.getAttribute(PLACEMENT_ATTRIBUTE);
return fullPlacement ? fullPlacement.split('-')[0] : '';
}
/**
* Triggers reflow
*/
function reflow(popper) {
void popper.offsetHeight;
}
/**
* Adds/removes theme from tooltip's classList
*/
function updateTheme(tooltip, action, theme) {
theme.split(' ').forEach(function (themeName) {
tooltip.classList[action](themeName + '-theme');
});
}
/**
* Constructs the popper element and returns it
*/
function createPopperElement(id, props) {
var popper = div();
popper.className = POPPER_CLASS;
popper.id = "tippy-".concat(id);
popper.style.zIndex = '' + props.zIndex;
popper.style.position = 'absolute';
popper.style.top = '0';
popper.style.left = '0';
if (props.role) {
popper.setAttribute('role', props.role);
}
var tooltip = div();
tooltip.className = TOOLTIP_CLASS;
tooltip.style.maxWidth = props.maxWidth + (typeof props.maxWidth === 'number' ? 'px' : '');
tooltip.setAttribute('data-size', props.size);
tooltip.setAttribute('data-animation', props.animation);
tooltip.setAttribute('data-state', 'hidden');
updateTheme(tooltip, 'add', props.theme);
var content = div();
content.className = CONTENT_CLASS;
content.setAttribute('data-state', 'hidden');
if (props.interactive) {
addInteractive(popper, tooltip);
}
if (props.arrow) {
tooltip.appendChild(createArrowElement(props.arrowType));
}
if (props.animateFill) {
tooltip.appendChild(createBackdropElement());
tooltip.setAttribute('data-animatefill', '');
}
if (props.inertia) {
addInertia(tooltip);
}
setContent(content, props);
tooltip.appendChild(content);
popper.appendChild(tooltip);
return popper;
}
/**
* Updates the popper element based on the new props
*/
function updatePopperElement(popper, prevProps, nextProps) {
var _getChildren = getChildren(popper),
tooltip = _getChildren.tooltip,
content = _getChildren.content,
backdrop = _getChildren.backdrop,
arrow = _getChildren.arrow;
popper.style.zIndex = '' + nextProps.zIndex;
tooltip.setAttribute('data-size', nextProps.size);
tooltip.setAttribute('data-animation', nextProps.animation);
tooltip.style.maxWidth = nextProps.maxWidth + (typeof nextProps.maxWidth === 'number' ? 'px' : '');
if (nextProps.role) {
popper.setAttribute('role', nextProps.role);
} else {
popper.removeAttribute('role');
}
if (prevProps.content !== nextProps.content) {
setContent(content, nextProps);
} // animateFill
if (!prevProps.animateFill && nextProps.animateFill) {
tooltip.appendChild(createBackdropElement());
tooltip.setAttribute('data-animatefill', '');
} else if (prevProps.animateFill && !nextProps.animateFill) {
tooltip.removeChild(backdrop);
tooltip.removeAttribute('data-animatefill');
} // arrow
if (!prevProps.arrow && nextProps.arrow) {
tooltip.appendChild(createArrowElement(nextProps.arrowType));
} else if (prevProps.arrow && !nextProps.arrow) {
tooltip.removeChild(arrow);
} // arrowType
if (prevProps.arrow && nextProps.arrow && prevProps.arrowType !== nextProps.arrowType) {
tooltip.replaceChild(createArrowElement(nextProps.arrowType), arrow);
} // interactive
if (!prevProps.interactive && nextProps.interactive) {
addInteractive(popper, tooltip);
} else if (prevProps.interactive && !nextProps.interactive) {
removeInteractive(popper, tooltip);
} // inertia
if (!prevProps.inertia && nextProps.inertia) {
addInertia(tooltip);
} else if (prevProps.inertia && !nextProps.inertia) {
removeInertia(tooltip);
} // theme
if (prevProps.theme !== nextProps.theme) {
updateTheme(tooltip, 'remove', prevProps.theme);
updateTheme(tooltip, 'add', nextProps.theme);
}
}
/**
* Hides all visible poppers on the document
*/
function hideAll() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
excludedReferenceOrInstance = _ref.exclude,
duration = _ref.duration;
arrayFrom(document.querySelectorAll(POPPER_SELECTOR)).forEach(function (popper) {
var instance = popper._tippy;
if (instance) {
var isExcluded = false;
if (excludedReferenceOrInstance) {
isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : popper === excludedReferenceOrInstance.popper;
}
if (!isExcluded) {
instance.hide(duration);
}
}
});
}
/**
* Determines if the mouse cursor is outside of the popper's interactive border
* region
*/
function isCursorOutsideInteractiveBorder(popperPlacement, popperRect, event, props) {
if (!popperPlacement) {
return true;
}
var x = event.clientX,
y = event.clientY;
var interactiveBorder = props.interactiveBorder,
distance = props.distance;
var exceedsTop = popperRect.top - y > (popperPlacement === 'top' ? interactiveBorder + distance : interactiveBorder);
var exceedsBottom = y - popperRect.bottom > (popperPlacement === 'bottom' ? interactiveBorder + distance : interactiveBorder);
var exceedsLeft = popperRect.left - x > (popperPlacement === 'left' ? interactiveBorder + distance : interactiveBorder);
var exceedsRight = x - popperRect.right > (popperPlacement === 'right' ? interactiveBorder + distance : interactiveBorder);
return exceedsTop || exceedsBottom || exceedsLeft || exceedsRight;
}
/**
* Returns the distance offset, taking into account the default offset due to
* the transform: translate() rule (10px) in CSS
*/
function getOffsetDistanceInPx(distance) {
return -(distance - 10) + 'px';
}
var idCounter = 1; // Workaround for IE11's lack of new MouseEvent constructor
var mouseMoveListeners = [];
/**
* Creates and returns a Tippy object. We're using a closure pattern instead of
* a class so that the exposed object API is clean without private members
* prefixed with `_`.
*/
function createTippy(reference, collectionProps) {
var props = evaluateProps(reference, collectionProps); // If the reference shouldn't have multiple tippys, return null early
if (!props.multiple && reference._tippy) {
return null;
}
/* ======================= 🔒 Private members 🔒 ======================= */
var lastTriggerEventType;
var lastMouseMoveEvent;
var showTimeoutId;
var hideTimeoutId;
var scheduleHideAnimationFrameId;
var isScheduledToShow = false;
var isBeingDestroyed = false;
var previousPlacement;
var wasVisibleDuringPreviousUpdate = false;
var hasMountCallbackRun = false;
var currentMountCallback;
var currentTransitionEndListener;
var listeners = [];
var currentComputedPadding;
var debouncedOnMouseMove = debounce$1(onMouseMove, props.interactiveDebounce);
/* ======================= 🔑 Public members 🔑 ======================= */
var id = idCounter++;
var popper = createPopperElement(id, props);
var popperChildren = getChildren(popper);
var popperInstance = null;
var state = {
// Is the instance currently enabled?
isEnabled: true,
// Is the tippy currently showing and not transitioning out?
isVisible: false,
// Has the instance been destroyed?
isDestroyed: false,
// Is the tippy currently mounted to the DOM?
isMounted: false,
// Has the tippy finished transitioning in?
isShown: false
};
var instance = {
// properties
id: id,
reference: reference,
popper: popper,
popperChildren: popperChildren,
popperInstance: popperInstance,
props: props,
state: state,
// methods
clearDelayTimeouts: clearDelayTimeouts,
set: set,
setContent: setContent,
show: show,
hide: hide,
enable: enable,
disable: disable,
destroy: destroy
/* ==================== Initial instance mutations =================== */
};
reference._tippy = instance;
popper._tippy = instance;
addTriggersToReference();
if (!props.lazy) {
createPopperInstance();
}
if (props.showOnInit) {
scheduleShow();
} // Ensure the event listeners target can receive focus
if (props.a11y && !props.target && !canReceiveFocus(getEventListenersTarget())) {
getEventListenersTarget().setAttribute('tabindex', '0');
} // Prevent a tippy with a delay from hiding if the cursor left then returned
// before it started hiding
popper.addEventListener('mouseenter', function (event) {
if (instance.props.interactive && instance.state.isVisible && lastTriggerEventType === 'mouseenter') {
// We don't want props.onTrigger() to be called here, since the `event`
// object is not related to the reference element
scheduleShow(event, true);
}
});
popper.addEventListener('mouseleave', function () {
if (instance.props.interactive && lastTriggerEventType === 'mouseenter') {
document.addEventListener('mousemove', debouncedOnMouseMove);
}
});
return instance;
/* ======================= 🔒 Private methods 🔒 ======================= */
/**
* Removes the follow cursor listener
*/
function removeFollowCursorListener() {
document.removeEventListener('mousemove', positionVirtualReferenceNearCursor);
}
/**
* Cleans up interactive mouse listeners
*/
function cleanupInteractiveMouseListeners() {
document.body.removeEventListener('mouseleave', scheduleHide);
document.removeEventListener('mousemove', debouncedOnMouseMove);
mouseMoveListeners = mouseMoveListeners.filter(function (listener) {
return listener !== debouncedOnMouseMove;
});
}
/**
* Returns correct target used for event listeners
*/
function getEventListenersTarget() {
return instance.props.triggerTarget || reference;
}
/**
* Adds the document click event listener for the instance
*/
function addDocumentClickListener() {
document.addEventListener('click', onDocumentClick, true);
}
/**
* Removes the document click event listener for the instance
*/
function removeDocumentClickListener() {
document.removeEventListener('click', onDocumentClick, true);
}
/**
* Returns transitionable inner elements used in show/hide methods
*/
function getTransitionableElements() {
return [instance.popperChildren.tooltip, instance.popperChildren.backdrop, instance.popperChildren.content];
}
/**
* Determines if the instance is in `followCursor` mode.
* NOTE: in v5, touch devices will use `initial` behavior no matter the value.
*/
function getIsInLooseFollowCursorMode() {
var followCursor = instance.props.followCursor;
return followCursor && lastTriggerEventType !== 'focus' || isUsingTouch && followCursor === 'initial';
}
/**
* Updates the tooltip's position on each animation frame
*/
function makeSticky() {
setTransitionDuration([popper], isIE$1 ? 0 : instance.props.updateDuration);
var prevRefRect = reference.getBoundingClientRect();
function updatePosition() {
var currentRefRect = reference.getBoundingClientRect(); // Only schedule an update if the reference rect has changed
if (prevRefRect.top !== currentRefRect.top || prevRefRect.right !== currentRefRect.right || prevRefRect.bottom !== currentRefRect.bottom || prevRefRect.left !== currentRefRect.left) {
instance.popperInstance.scheduleUpdate();
}
prevRefRect = currentRefRect;
if (instance.state.isMounted) {
requestAnimationFrame(updatePosition);
}
}
updatePosition();
}
/**
* Invokes a callback once the tooltip has fully transitioned out
*/
function onTransitionedOut(duration, callback) {
onTransitionEnd(duration, function () {
if (!instance.state.isVisible && popper.parentNode && popper.parentNode.contains(popper)) {
callback();
}
});
}
/**
* Invokes a callback once the tooltip has fully transitioned in
*/
function onTransitionedIn(duration, callback) {
onTransitionEnd(duration, callback);
}
/**
* Invokes a callback once the tooltip's CSS transition ends
*/
function onTransitionEnd(duration, callback) {
var tooltip = instance.popperChildren.tooltip;
/**
* Listener added as the `transitionend` handler
*/
function listener(event) {
if (event.target === tooltip) {
updateTransitionEndListener(tooltip, 'remove', listener);
callback();
}
} // Make callback synchronous if duration is 0
// `transitionend` won't fire otherwise
if (duration === 0) {
return callback();
}
updateTransitionEndListener(tooltip, 'remove', currentTransitionEndListener);
updateTransitionEndListener(tooltip, 'add', listener);
currentTransitionEndListener = listener;
}
/**
* Adds an event listener to the reference and stores it in `listeners`
*/
function on(eventType, handler) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
getEventListenersTarget().addEventListener(eventType, handler, options);
listeners.push({
eventType: eventType,
handler: handler,
options: options
});
}
/**
* Adds event listeners to the reference based on the `trigger` prop
*/
function addTriggersToReference() {
if (instance.props.touchHold && !instance.props.target) {
on('touchstart', onTrigger, PASSIVE);
on('touchend', onMouseLeave, PASSIVE);
}
instance.props.trigger.trim().split(' ').forEach(function (eventType) {
if (eventType === 'manual') {
return;
} // Non-delegates
if (!instance.props.target) {
on(eventType, onTrigger);
switch (eventType) {
case 'mouseenter':
on('mouseleave', onMouseLeave);
break;
case 'focus':
on(isIE$1 ? 'focusout' : 'blur', onBlur);
break;
}
} else {
// Delegates
switch (eventType) {
case 'mouseenter':
on('mouseover', onDelegateShow);
on('mouseout', onDelegateHide);
break;
case 'focus':
on('focusin', onDelegateShow);
on('focusout', onDelegateHide);
break;
case 'click':
on(eventType, onDelegateShow);
break;
}
}
});
}
/**
* Removes event listeners from the reference
*/
function removeTriggersFromReference() {
listeners.forEach(function (_ref) {
var eventType = _ref.eventType,
handler = _ref.handler,
options = _ref.options;
getEventListenersTarget().removeEventListener(eventType, handler, options);
});
listeners = [];
}
/**
* Positions the virtual reference near the cursor
*/
function positionVirtualReferenceNearCursor(event) {
var _lastMouseMoveEvent = lastMouseMoveEvent = event,
x = _lastMouseMoveEvent.clientX,
y = _lastMouseMoveEvent.clientY; // Gets set once popperInstance `onCreate` has been called
if (!currentComputedPadding) {
return;
} // If the instance is interactive, avoid updating the position unless it's
// over the reference element
var isCursorOverReference = closestCallback(event.target, function (el) {
return el === reference;
});
var rect = reference.getBoundingClientRect();
var followCursor = instance.props.followCursor;
var isHorizontal = followCursor === 'horizontal';
var isVertical = followCursor === 'vertical'; // The virtual reference needs some size to prevent itself from overflowing
var isVerticalPlacement = includes(['top', 'bottom'], getBasicPlacement(popper));
var fullPlacement = popper.getAttribute(PLACEMENT_ATTRIBUTE);
var isVariation = fullPlacement ? !!fullPlacement.split('-')[1] : false;
var size = isVerticalPlacement ? popper.offsetWidth : popper.offsetHeight;
var halfSize = size / 2;
var verticalIncrease = isVerticalPlacement ? 0 : isVariation ? size : halfSize;
var horizontalIncrease = isVerticalPlacement ? isVariation ? size : halfSize : 0;
if (isCursorOverReference || !instance.props.interactive) {
instance.popperInstance.reference = _extends$1({}, instance.popperInstance.reference, {
// This will exist in next Popper.js feature release to fix #532
// @ts-ignore
referenceNode: reference,
// These `client` values don't get used by Popper.js if they are 0
clientWidth: 0,
clientHeight: 0,
getBoundingClientRect: function getBoundingClientRect() {
return {
width: isVerticalPlacement ? size : 0,
height: isVerticalPlacement ? 0 : size,
top: (isHorizontal ? rect.top : y) - verticalIncrease,
bottom: (isHorizontal ? rect.bottom : y) + verticalIncrease,
left: (isVertical ? rect.left : x) - horizontalIncrease,
right: (isVertical ? rect.right : x) + horizontalIncrease
};
}
});
instance.popperInstance.update();
}
if (followCursor === 'initial' && instance.state.isVisible) {
removeFollowCursorListener();
}
}
/**
* Creates the tippy instance for a delegate when it's been triggered
*/
function createDelegateChildTippy(event) {
if (event) {
var targetEl = closest(event.target, instance.props.target);
if (targetEl && !targetEl._tippy) {
createTippy(targetEl, _extends$1({}, instance.props, {
content: invokeWithArgsOrReturn(collectionProps.content, [targetEl]),
appendTo: collectionProps.appendTo,
target: '',
showOnInit: true
}));
}
}
}
/**
* Event listener invoked upon trigger
*/
function onTrigger(event) {
if (!instance.state.isEnabled || isEventListenerStopped(event)) {
return;
}
if (!instance.state.isVisible) {
lastTriggerEventType = event.type;
if (event instanceof MouseEvent) {
lastMouseMoveEvent = event; // If scrolling, `mouseenter` events can be fired if the cursor lands
// over a new target, but `mousemove` events don't get fired. This
// causes interactive tooltips to get stuck open until the cursor is
// moved
mouseMoveListeners.forEach(function (listener) {
return listener(event);
});
}
} // Toggle show/hide when clicking click-triggered tooltips
if (event.type === 'click' && instance.props.hideOnClick !== false && instance.state.isVisible) {
scheduleHide();
} else {
scheduleShow(event);
}
}
/**
* Event listener used for interactive tooltips to detect when they should
* hide
*/
function onMouseMove(event) {
var isCursorOverPopper = closest(event.target, POPPER_SELECTOR) === popper;
var isCursorOverReference = closestCallback(event.target, function (el) {
return el === reference;
});
if (isCursorOverPopper || isCursorOverReference) {
return;
}
if (isCursorOutsideInteractiveBorder(getBasicPlacement(popper), popper.getBoundingClientRect(), event, instance.props)) {
cleanupInteractiveMouseListeners();
scheduleHide();
}
}
/**
* Event listener invoked upon mouseleave
*/
function onMouseLeave(event) {
if (isEventListenerStopped(event)) {
return;
}
if (instance.props.interactive) {
document.body.addEventListener('mouseleave', scheduleHide);
document.addEventListener('mousemove', debouncedOnMouseMove);
mouseMoveListeners.push(debouncedOnMouseMove);
return;
}
scheduleHide();
}
/**
* Event listener invoked upon blur
*/
function onBlur(event) {
if (event.target !== getEventListenersTarget()) {
return;
}
if (instance.props.interactive && event.relatedTarget && popper.contains(event.relatedTarget)) {
return;
}
scheduleHide();
}
/**
* Event listener invoked when a child target is triggered
*/
function onDelegateShow(event) {
if (closest(event.target, instance.props.target)) {
scheduleShow(event);
}
}
/**
* Event listener invoked when a child target should hide
*/
function onDelegateHide(event) {
if (closest(event.target, instance.props.target)) {
scheduleHide();
}
}
/**
* Determines if an event listener should stop further execution due to the
* `touchHold` option
*/
function isEventListenerStopped(event) {
var supportsTouch = 'ontouchstart' in window;
var isTouchEvent = includes(event.type, 'touch');
var touchHold = instance.props.touchHold;
return supportsTouch && isUsingTouch && touchHold && !isTouchEvent || isUsingTouch && !touchHold && isTouchEvent;
}
/**
* Runs the mount callback
*/
function runMountCallback() {
if (!hasMountCallbackRun && currentMountCallback) {
hasMountCallbackRun = true;
reflow(popper);
currentMountCallback();
}
}
/**
* Creates the popper instance for the instance
*/
function createPopperInstance() {
var popperOptions = instance.props.popperOptions;
var _instance$popperChild = instance.popperChildren,
tooltip = _instance$popperChild.tooltip,
arrow = _instance$popperChild.arrow;
var preventOverflowModifier = getModifier(popperOptions, 'preventOverflow');
function applyMutations(data) {
if (instance.props.flip && !instance.props.flipOnUpdate) {
if (data.flipped) {
instance.popperInstance.options.placement = data.placement;
}
setFlipModifierEnabled(instance.popperInstance.modifiers, false);
} // Apply all of the popper's attributes to the tootip node as well.
// Allows users to avoid using the .tippy-popper selector for themes.
tooltip.setAttribute(PLACEMENT_ATTRIBUTE, data.placement);
if (data.attributes[OUT_OF_BOUNDARIES_ATTRIBUTE] !== false) {
tooltip.setAttribute(OUT_OF_BOUNDARIES_ATTRIBUTE, '');
} else {
tooltip.removeAttribute(OUT_OF_BOUNDARIES_ATTRIBUTE);
} // Prevents a transition when changing placements (while tippy is visible)
// for scroll/resize updates
if (previousPlacement && previousPlacement !== data.placement && wasVisibleDuringPreviousUpdate) {
tooltip.style.transition = 'none';
requestAnimationFrame(function () {
tooltip.style.transition = '';
});
}
previousPlacement = data.placement;
wasVisibleDuringPreviousUpdate = instance.state.isVisible;
var basicPlacement = getBasicPlacement(popper);
var styles = tooltip.style; // Account for the `distance` offset
styles.top = styles.bottom = styles.left = styles.right = '';
styles[basicPlacement] = getOffsetDistanceInPx(instance.props.distance);
var padding = preventOverflowModifier && preventOverflowModifier.padding !== undefined ? preventOverflowModifier.padding : PADDING;
var isPaddingNumber = typeof padding === 'number';
var computedPadding = _extends$1({
top: isPaddingNumber ? padding : padding.top,
bottom: isPaddingNumber ? padding : padding.bottom,
left: isPaddingNumber ? padding : padding.left,
right: isPaddingNumber ? padding : padding.right
}, !isPaddingNumber && padding);
computedPadding[basicPlacement] = isPaddingNumber ? padding + instance.props.distance : (padding[basicPlacement] || 0) + instance.props.distance;
instance.popperInstance.modifiers.filter(function (m) {
return m.name === 'preventOverflow';
})[0].padding = computedPadding;
currentComputedPadding = computedPadding;
}
var config = _extends$1({
eventsEnabled: false,
placement: instance.props.placement
}, popperOptions, {
modifiers: _extends$1({}, popperOptions ? popperOptions.modifiers : {}, {
preventOverflow: _extends$1({
boundariesElement: instance.props.boundary,
padding: PADDING
}, preventOverflowModifier),
arrow: _extends$1({
element: arrow,
enabled: !!arrow
}, getModifier(popperOptions, 'arrow')),
flip: _extends$1({
enabled: instance.props.flip,
// The tooltip is offset by 10px from the popper in CSS,
// we need to account for its distance
padding: instance.props.distance + PADDING,
behavior: instance.props.flipBehavior
}, getModifier(popperOptions, 'flip')),
offset: _extends$1({
offset: instance.props.offset
}, getModifier(popperOptions, 'offset'))
}),
onCreate: function onCreate(data) {
applyMutations(data);
runMountCallback();
if (popperOptions && popperOptions.onCreate) {
popperOptions.onCreate(data);
}
},
onUpdate: function onUpdate(data) {
applyMutations(data);
runMountCallback();
if (popperOptions && popperOptions.onUpdate) {
popperOptions.onUpdate(data);
}
}
});
instance.popperInstance = new Popper(reference, popper, config);
}
/**
* Mounts the tooltip to the DOM
*/
function mount() {
hasMountCallbackRun = false;
var isInLooseFollowCursorMode = getIsInLooseFollowCursorMode();
if (instance.popperInstance) {
setFlipModifierEnabled(instance.popperInstance.modifiers, instance.props.flip);
if (!isInLooseFollowCursorMode) {
instance.popperInstance.reference = reference;
instance.popperInstance.enableEventListeners();
}
instance.popperInstance.scheduleUpdate();
} else {
createPopperInstance();
if (!isInLooseFollowCursorMode) {
instance.popperInstance.enableEventListeners();
}
}
var appendTo = instance.props.appendTo;
var parentNode = appendTo === 'parent' ? reference.parentNode : invokeWithArgsOrReturn(appendTo, [reference]);
if (!parentNode.contains(popper)) {
parentNode.appendChild(popper);
instance.props.onMount(instance);
instance.state.isMounted = true;
}
}
/**
* Setup before show() is invoked (delays, etc.)
*/
function scheduleShow(event, shouldAvoidCallingOnTrigger) {
clearDelayTimeouts();
if (instance.state.isVisible) {
return;
} // Is a delegate, create an instance for the child target
if (instance.props.target) {
return createDelegateChildTippy(event);
}
isScheduledToShow = true;
if (event && !shouldAvoidCallingOnTrigger) {
instance.props.onTrigger(instance, event);
}
if (instance.props.wait) {
return instance.props.wait(instance, event);
} // If the tooltip has a delay, we need to be listening to the mousemove as
// soon as the trigger event is fired, so that it's in the correct position
// upon mount.
// Edge case: if the tooltip is still mounted, but then scheduleShow() is
// called, it causes a jump.
if (getIsInLooseFollowCursorMode() && !instance.state.isMounted) {
if (!instance.popperInstance) {
createPopperInstance();
}
document.addEventListener('mousemove', positionVirtualReferenceNearCursor);
}
addDocumentClickListener();
var delay = getValue(instance.props.delay, 0, defaultProps.delay);
if (delay) {
showTimeoutId = setTimeout(function () {
show();
}, delay);
} else {
show();
}
}
/**
* Setup before hide() is invoked (delays, etc.)
*/
function scheduleHide() {
clearDelayTimeouts();
if (!instance.state.isVisible) {
removeFollowCursorListener();
removeDocumentClickListener();
return;
}
isScheduledToShow = false;
var delay = getValue(instance.props.delay, 1, defaultProps.delay);
if (delay) {
hideTimeoutId = setTimeout(function () {
if (instance.state.isVisible) {
hide();
}
}, delay);
} else {
// Fixes a `transitionend` problem when it fires 1 frame too
// late sometimes, we don't want hide() to be called.
scheduleHideAnimationFrameId = requestAnimationFrame(function () {
hide();
});
}
}
/**
* Listener to handle clicks on the document to determine if the
* instance should hide
*/
function onDocumentClick(event) {
// Clicked on interactive popper
if (instance.props.interactive && popper.contains(event.target)) {
return;
} // Clicked on the event listeners target
if (getEventListenersTarget().contains(event.target)) {
if (isUsingTouch) {
return;
}
if (instance.state.isVisible && includes(instance.props.trigger, 'click')) {
return;
}
}
if (instance.props.hideOnClick === true) {
clearDelayTimeouts();
hide();
}
}
/* ======================= 🔑 Public methods 🔑 ======================= */
/**
* Enables the instance to allow it to show or hide
*/
function enable() {
instance.state.isEnabled = true;
}
/**
* Disables the instance to disallow it to show or hide
*/
function disable() {
instance.state.isEnabled = false;
}
/**
* Clears pending timeouts related to the `delay` prop if any
*/
function clearDelayTimeouts() {
clearTimeout(showTimeoutId);
clearTimeout(hideTimeoutId);
cancelAnimationFrame(scheduleHideAnimationFrameId);
}
/**
* Sets new props for the instance and redraws the tooltip
*/
function set(options) {
// Backwards-compatible after TypeScript change
options = options || {};
validateOptions(options, defaultProps);
removeTriggersFromReference();
var prevProps = instance.props;
var nextProps = evaluateProps(reference, _extends$1({}, instance.props, {}, options, {
ignoreAttributes: true
}));
nextProps.ignoreAttributes = hasOwnProperty(options, 'ignoreAttributes') ? options.ignoreAttributes || false : prevProps.ignoreAttributes;
instance.props = nextProps;
addTriggersToReference();
cleanupInteractiveMouseListeners();
debouncedOnMouseMove = debounce$1(onMouseMove, nextProps.interactiveDebounce);
updatePopperElement(popper, prevProps, nextProps);
instance.popperChildren = getChildren(popper);
if (instance.popperInstance) {
if (POPPER_INSTANCE_DEPENDENCIES.some(function (prop) {
return hasOwnProperty(options, prop) && options[prop] !== prevProps[prop];
})) {
instance.popperInstance.destroy();
createPopperInstance();
if (instance.state.isVisible) {
instance.popperInstance.enableEventListeners();
}
if (instance.props.followCursor && lastMouseMoveEvent) {
positionVirtualReferenceNearCursor(lastMouseMoveEvent);
}
} else {
instance.popperInstance.update();
}
}
}
/**
* Shortcut for .set({ content: newContent })
*/
function setContent(content) {
set({
content: content
});
}
/**
* Shows the tooltip
*/
function show() {
var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getValue(instance.props.duration, 0, defaultProps.duration[1]);
if (instance.state.isDestroyed || !instance.state.isEnabled || isUsingTouch && !instance.props.touch) {
return;
} // Standardize `disabled` behavior across browsers.
// Firefox allows events on disabled elements, but Chrome doesn't.
// Using a wrapper element (i.e. ) is recommended.
if (getEventListenersTarget().hasAttribute('disabled')) {
return;
}
if (instance.props.onShow(instance) === false) {
return;
}
addDocumentClickListener();
popper.style.visibility = 'visible';
instance.state.isVisible = true;
if (instance.props.interactive) {
getEventListenersTarget().classList.add(ACTIVE_CLASS);
} // Prevent a transition if the popper is at the opposite placement
var transitionableElements = getTransitionableElements();
setTransitionDuration(transitionableElements.concat(popper), 0);
currentMountCallback = function currentMountCallback() {
if (!instance.state.isVisible) {
return;
}
var isInLooseFollowCursorMode = getIsInLooseFollowCursorMode();
if (isInLooseFollowCursorMode && lastMouseMoveEvent) {
positionVirtualReferenceNearCursor(lastMouseMoveEvent);
} else if (!isInLooseFollowCursorMode) {
// Double update will apply correct mutations
instance.popperInstance.update();
}
if (instance.popperChildren.backdrop) {
instance.popperChildren.content.style.transitionDelay = Math.round(duration / 12) + 'ms';
}
if (instance.props.sticky) {
makeSticky();
}
setTransitionDuration([popper], instance.props.updateDuration);
setTransitionDuration(transitionableElements, duration);
setVisibilityState(transitionableElements, 'visible');
onTransitionedIn(duration, function () {
if (instance.props.aria) {
getEventListenersTarget().setAttribute("aria-".concat(instance.props.aria), popper.id);
}
instance.props.onShown(instance);
instance.state.isShown = true;
});
};
mount();
}
/**
* Hides the tooltip
*/
function hide() {
var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getValue(instance.props.duration, 1, defaultProps.duration[1]);
if (instance.state.isDestroyed || !instance.state.isEnabled && !isBeingDestroyed) {
return;
}
if (instance.props.onHide(instance) === false && !isBeingDestroyed) {
return;
}
removeDocumentClickListener();
popper.style.visibility = 'hidden';
instance.state.isVisible = false;
instance.state.isShown = false;
wasVisibleDuringPreviousUpdate = false;
if (instance.props.interactive) {
getEventListenersTarget().classList.remove(ACTIVE_CLASS);
}
var transitionableElements = getTransitionableElements();
setTransitionDuration(transitionableElements, duration);
setVisibilityState(transitionableElements, 'hidden');
onTransitionedOut(duration, function () {
if (!isScheduledToShow) {
removeFollowCursorListener();
}
if (instance.props.aria) {
getEventListenersTarget().removeAttribute("aria-".concat(instance.props.aria));
}
instance.popperInstance.disableEventListeners();
instance.popperInstance.options.placement = instance.props.placement;
popper.parentNode.removeChild(popper);
instance.props.onHidden(instance);
instance.state.isMounted = false;
});
}
/**
* Destroys the tooltip
*/
function destroy(destroyTargetInstances) {
if (instance.state.isDestroyed) {
return;
}
isBeingDestroyed = true; // If the popper is currently mounted to the DOM, we want to ensure it gets
// hidden and unmounted instantly upon destruction
if (instance.state.isMounted) {
hide(0);
}
removeTriggersFromReference();
delete reference._tippy;
var target = instance.props.target;
if (target && destroyTargetInstances && isRealElement(reference)) {
arrayFrom(reference.querySelectorAll(target)).forEach(function (child) {
if (child._tippy) {
child._tippy.destroy();
}
});
}
if (instance.popperInstance) {
instance.popperInstance.destroy();
}
isBeingDestroyed = false;
instance.state.isDestroyed = true;
}
}
/**
* Groups an array of instances by taking control of their props during
* certain lifecycles.
*/
function group(instances) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$delay = _ref.delay,
delay = _ref$delay === void 0 ? instances[0].props.delay : _ref$delay,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 0 : _ref$duration;
var isAnyTippyOpen = false;
instances.forEach(function (instance) {
if (instance._originalProps) {
instance.set(instance._originalProps);
} else {
instance._originalProps = _extends$1({}, instance.props);
}
});
function setIsAnyTippyOpen(value) {
isAnyTippyOpen = value;
updateInstances();
}
function onShow(instance) {
instance._originalProps.onShow(instance);
instances.forEach(function (instance) {
instance.set({
duration: duration
});
if (instance.state.isVisible) {
instance.hide();
}
});
setIsAnyTippyOpen(true);
}
function onHide(instance) {
instance._originalProps.onHide(instance);
setIsAnyTippyOpen(false);
}
function onShown(instance) {
instance._originalProps.onShown(instance);
instance.set({
duration: instance._originalProps.duration
});
}
function updateInstances() {
instances.forEach(function (instance) {
instance.set({
onShow: onShow,
onShown: onShown,
onHide: onHide,
delay: isAnyTippyOpen ? [0, Array.isArray(delay) ? delay[1] : delay] : delay,
duration: isAnyTippyOpen ? duration : instance._originalProps.duration
});
});
}
updateInstances();
}
var globalEventListenersBound = false;
/**
* Exported module
*/
function tippy(targets, options) {
validateOptions(options || {}, defaultProps);
if (!globalEventListenersBound) {
bindGlobalEventListeners();
globalEventListenersBound = true;
}
var props = _extends$1({}, defaultProps, {}, options); // If they are specifying a virtual positioning reference, we need to polyfill
// some native DOM props
if (isBareVirtualElement(targets)) {
polyfillElementPrototypeProperties(targets);
}
var instances = getArrayOfElements(targets).reduce(function (acc, reference) {
var instance = reference && createTippy(reference, props);
if (instance) {
acc.push(instance);
}
return acc;
}, []);
return isSingular(targets) ? instances[0] : instances;
}
/**
* Static props
*/
tippy.version = version;
tippy.defaults = defaultProps;
/**
* Static methods
*/
tippy.setDefaults = function (partialDefaults) {
Object.keys(partialDefaults).forEach(function (key) {
// @ts-ignore
defaultProps[key] = partialDefaults[key];
});
};
tippy.hideAll = hideAll;
tippy.group = group;
/**
* Auto-init tooltips for elements with a `data-tippy="..."` attribute
*/
function autoInit() {
arrayFrom(document.querySelectorAll('[data-tippy]')).forEach(function (el) {
var content = el.getAttribute('data-tippy');
if (content) {
tippy(el, {
content: content
});
}
});
}
if (isBrowser$1) {
setTimeout(autoInit);
}
/**
* Injects a string of CSS styles to a style node in
*/
function injectCSS(css) {
if (isBrowser$1) {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = css;
style.setAttribute('data-tippy-stylesheet', '');
var head = document.head;
var firstStyleOrLinkTag = head.querySelector('style,link');
if (firstStyleOrLinkTag) {
head.insertBefore(style, firstStyleOrLinkTag);
} else {
head.appendChild(style);
}
}
}
injectCSS(css);
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var humps = createCommonjsModule(function (module) {
(function(global) {
var _processKeys = function(convert, obj, options) {
if(!_isObject(obj) || _isDate(obj) || _isRegExp(obj) || _isBoolean(obj) || _isFunction(obj)) {
return obj;
}
var output,
i = 0,
l = 0;
if(_isArray(obj)) {
output = [];
for(l=obj.length; i 0) {
elm = this.$refs.trigger;
} else {
elm = this.$el.parentElement;
}
}
if (!elm) {
return;
}
var tip = tippy(elm, this.getOptions());
if (!tip) {
return;
}
if (Array.isArray(tip)) {
if (tip.length > 0) {
this.tip = tip[0];
} else {
return;
}
}
this.tip = tip;
this.$emit("onCreate", this.tip);
this.$emit("init", this.tip);
if (this.enabled === false) {
this.tip.disable();
}
if (this.isManualTrigger && this.visible === true) {
this.tip.show();
}
},
tippy: function tippy() {
return this.tip;
},
filterOptions: function filterOptions() {
var getValue = function getValue(key, value) {
if (booleanProps.hasOwnProperty(key)) {
if (value === "") return true;
if (value === "false") return false;
if (value === "true") return true;
}
return value;
};
for (var _i = 0, _Object$keys = Object.keys(this.options); _i < _Object$keys.length; _i++) {
var key = _Object$keys[_i];
if (!defaultProps$1.hasOwnProperty(key)) {
// We're replacing this.options anyway, we don't have to worry about modifying the object
delete this.options[key];
} else {
this.options[key] = getValue(key, this.options[key]);
}
}
return this.options;
},
getOptions: function getOptions() {
var _this = this;
Object.assign(this.options, humps.camelizeKeys(this.$attrs));
this.filterOptions();
if (!this.options.onShow && this.$listeners && this.$listeners["show"]) {
this.options.onShow = function () {
var _this$$listeners$show;
return (_this$$listeners$show = _this.$listeners["show"]).fns.apply(_this$$listeners$show, arguments);
};
}
if (!this.options.onShown) {
this.options.onShown = function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this.$emit.apply(_this, ["shown"].concat(args));
};
}
if (!this.options.onHidden) {
this.options.onHidden = function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this.$emit.apply(_this, ["hidden"].concat(args));
};
}
if (!this.options.onHide && this.$listeners && this.$listeners["hide"]) {
this.options.onHide = function () {
var _this$$listeners$hide;
return (_this$$listeners$hide = _this.$listeners["hide"]).fns.apply(_this$$listeners$hide, arguments);
};
}
if (!this.options.onMount) {
this.options.onMount = function () {
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
_this.$emit.apply(_this, ["mount"].concat(args));
};
}
if (!this.options.hasOwnProperty("content")) {
this.options.content = this.content ? this.content : this.$refs.content;
}
this.options.triggerTarget = this.triggerTarget;
return this.options;
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", [_c("div", {
ref: "trigger"
}, [_vm._t("trigger")], 2), _vm._v(" "), _c("div", {
ref: "content"
}, [_vm._t("default")], 2)]);
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var TippyComponent = normalizeComponent_1({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
var tippyDirective = 'tippy';
var plugin = {
install: function install(Vue) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
tippyDirective = options.directive || 'tippy';
tippy.setDefaults(options || {});
function createTippy(el, binding, vnode) {
var handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
var opts = binding.value || {};
opts = Object.assign({}, options, opts);
if (handlers && handlers['show']) {
opts.onShow = function () {
var _handlers$show;
return (_handlers$show = handlers['show']).fns.apply(_handlers$show, arguments);
};
}
if (handlers && handlers['shown']) {
opts.onShown = function () {
var _handlers$shown;
(_handlers$shown = handlers['shown']).fns.apply(_handlers$shown, arguments);
};
}
if (handlers && handlers['hidden']) {
opts.onHidden = function () {
var _handlers$hidden;
(_handlers$hidden = handlers['hidden']).fns.apply(_handlers$hidden, arguments);
};
}
if (handlers && handlers['hide']) {
opts.onHide = function () {
var _handlers$hide;
return (_handlers$hide = handlers['hide']).fns.apply(_handlers$hide, arguments);
};
}
if (handlers && handlers['mount']) {
opts.onMount = function () {
var _handlers$mount;
(_handlers$mount = handlers['mount']).fns.apply(_handlers$mount, arguments);
};
}
if (el.getAttribute('title') && !opts.content) {
opts.content = el.getAttribute('title');
el.removeAttribute('title');
}
if (el.getAttribute('content') && !opts.content) {
opts.content = el.getAttribute('content');
}
tippy(el, opts);
if (opts.showOnLoad) {
el._tippy.show();
}
Vue.nextTick(function () {
if (handlers && handlers['init']) {
handlers['init'].fns(el._tippy, el);
}
});
}
Vue.directive(tippyDirective, {
inserted: function inserted(el, binding, vnode) {
Vue.nextTick(function () {
createTippy(el, binding, vnode);
});
},
unbind: function unbind(el) {
el._tippy && el._tippy.destroy();
},
componentUpdated: function componentUpdated(el, binding, vnode) {
if (el._tippy) {
var opts = binding.value || {};
if (el.getAttribute('title') && !opts.content) {
opts.content = el.getAttribute('title');
el.removeAttribute('title');
}
if (el.getAttribute('content') && !opts.content) {
opts.content = el.getAttribute('content');
}
el._tippy.set(opts);
}
}
});
}
};
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
window.Vue.component('tippy', TippyComponent);
}
export default plugin;
export { TippyComponent, tippy };