@spider-ui/tooltip
Version:
Bare tooltip web element.
400 lines (358 loc) • 33.7 kB
JavaScript
/*!
* @license MIT (https://github.com/geotrev/spider-ui/blob/master/LICENSE)
* @spider-ui/tooltip v0.2.7 (https://github.com/geotrev/spider-ui/tree/master/packages/tooltip#readme)
* Copyright 2020 George Treviranus <hello@geotrev.com>
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('upgraded-element'), require('@spider-ui/global-event-registry')) :
typeof define === 'function' && define.amd ? define(['upgraded-element', '@spider-ui/global-event-registry'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.UpgradedElement, global['spider-global-event-registry']));
}(this, (function (upgradedElement, globalEventRegistry) { 'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a 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);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
var Attributes = {
POSITION: "position",
MODE: "mode",
SHOW_ARROW: "show-arrow",
DELAY: "delay",
DELAY_ON: "delay-on",
DELAY_OFF: "delay-off",
// A11y
ARIA_DESCRIBEDBY: "aria-describedby",
ROLE: "role"
};
var Positions = {
BLOCK_START: "block-start",
BLOCK_END: "block-end",
INLINE_START: "inline-start",
INLINE_END: "inline-end"
};
var Modes = {
DARK: "dark",
LIGHT: "light"
};
var ClassNames = {
ARROW: "arrow",
VISIBLE: "visible",
HIDDEN: "hidden"
};
var Slots = {
TRIGGER: "[slot='trigger']",
CONTENT: "[slot='content']"
};
var TIMEOUT_DELAY = 300;
var ESCAPE_KEY = "Escape";
var styles = "/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:start}:host{display:inline-block}:host[hidden]{display:none}.tooltip{position:relative;display:inline-block}::slotted([slot=content]){font-size:14px;padding:4px 8px;border-radius:4px;position:absolute;display:block;transition:opacity cubic-bezier(0.12, 0.72, 0.58, 1.03) 100ms;word-wrap:break-word;white-space:nowrap;text-align:center}.light ::slotted([slot=content]){border:1px solid #dedede;background:#fff;color:#111}.dark ::slotted([slot=content]){border:1px solid #111;background:#111;color:#fff}.hidden ::slotted([slot=content]){pointer-events:none;opacity:0}.visible ::slotted([slot=content]){pointer-events:auto;opacity:1}.block-start ::slotted([slot=content]){bottom:100%;margin:0 0 7px 0}.inline-end ::slotted([slot=content]){margin-top:0;margin-bottom:0;bottom:auto;top:0}:root:not([dir=rtl]) .inline-end ::slotted([slot=content]),:host(:not([dir=rtl])) .inline-end ::slotted([slot=content]){left:100%}:root[dir=rtl] .inline-end ::slotted([slot=content]),:host([dir=rtl]) .inline-end ::slotted([slot=content]){right:100%}:root:not([dir=rtl]) .inline-end ::slotted([slot=content]),:host(:not([dir=rtl])) .inline-end ::slotted([slot=content]){margin-left:7px}:root[dir=rtl] .inline-end ::slotted([slot=content]),:host([dir=rtl]) .inline-end ::slotted([slot=content]){margin-right:7px}.inline-start ::slotted([slot=content]){margin-top:0;margin-bottom:0;bottom:auto;top:0}:root:not([dir=rtl]) .inline-start ::slotted([slot=content]),:host(:not([dir=rtl])) .inline-start ::slotted([slot=content]){right:100%}:root[dir=rtl] .inline-start ::slotted([slot=content]),:host([dir=rtl]) .inline-start ::slotted([slot=content]){left:100%}:root:not([dir=rtl]) .inline-start ::slotted([slot=content]),:host(:not([dir=rtl])) .inline-start ::slotted([slot=content]){left:auto}:root[dir=rtl] .inline-start ::slotted([slot=content]),:host([dir=rtl]) .inline-start ::slotted([slot=content]){right:auto}:root:not([dir=rtl]) .inline-start ::slotted([slot=content]),:host(:not([dir=rtl])) .inline-start ::slotted([slot=content]){margin-right:7px}:root[dir=rtl] .inline-start ::slotted([slot=content]),:host([dir=rtl]) .inline-start ::slotted([slot=content]){margin-left:7px}.block-end ::slotted([slot=content]){top:100%;margin:7px 0 0 0;bottom:auto}.dark.block-start.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;bottom:-12.5px;top:auto;border-top:7px solid #111}:root:not([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.block-start.arrow ::slotted([slot=content])::after{left:calc(50% - 7px)}:root[dir=rtl] .dark.block-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::after{right:calc(50% - 7px)}:root:not([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.block-start.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .dark.block-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::after{left:auto}.dark.block-start.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;bottom:-14px;top:auto;border-top:7px solid #111}:root:not([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.block-start.arrow ::slotted([slot=content])::before{left:calc(50% - 7px)}:root[dir=rtl] .dark.block-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::before{right:calc(50% - 7px)}:root:not([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.block-start.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .dark.block-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.block-start.arrow ::slotted([slot=content])::before{left:auto}.dark.inline-end.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::after{border-right:7px solid #111}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after{border-left:7px solid #111}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::after{left:-12.5px}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after{right:-12.5px}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::after{left:auto}.dark.inline-end.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::before{border-right:7px solid #111}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before{border-left:7px solid #111}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::before{left:-14px}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before{right:-14px}:root:not([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-end.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .dark.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-end.arrow ::slotted([slot=content])::before{left:auto}.dark.inline-start.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::after{border-left:7px solid #111}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after{border-right:7px solid #111}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::after{right:-12.5px}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after{left:-12.5px}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::after{left:auto}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::after{right:auto}.dark.inline-start.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::before{border-left:7px solid #111}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before{border-right:7px solid #111}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::before{right:-14px}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before{left:-14px}:root:not([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.inline-start.arrow ::slotted([slot=content])::before{left:auto}:root[dir=rtl] .dark.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.inline-start.arrow ::slotted([slot=content])::before{right:auto}.dark.block-end.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:-12.5px;bottom:auto;border-bottom:7px solid #111}:root:not([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.block-end.arrow ::slotted([slot=content])::after{left:calc(50% - 7px)}:root[dir=rtl] .dark.block-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::after{right:calc(50% - 7px)}:root:not([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .dark.block-end.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .dark.block-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::after{left:auto}.dark.block-end.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:-14px;bottom:auto;border-bottom:7px solid #111}:root:not([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.block-end.arrow ::slotted([slot=content])::before{left:calc(50% - 7px)}:root[dir=rtl] .dark.block-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::before{right:calc(50% - 7px)}:root:not([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .dark.block-end.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .dark.block-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .dark.block-end.arrow ::slotted([slot=content])::before{left:auto}.light.block-start.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;bottom:-12.5px;top:auto;border-top:7px solid #fff}:root:not([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.block-start.arrow ::slotted([slot=content])::after{left:calc(50% - 7px)}:root[dir=rtl] .light.block-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::after{right:calc(50% - 7px)}:root:not([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.block-start.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .light.block-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::after{left:auto}.light.block-start.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;bottom:-14px;top:auto;border-top:7px solid #dedede}:root:not([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.block-start.arrow ::slotted([slot=content])::before{left:calc(50% - 7px)}:root[dir=rtl] .light.block-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::before{right:calc(50% - 7px)}:root:not([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.block-start.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .light.block-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.block-start.arrow ::slotted([slot=content])::before{left:auto}.light.inline-end.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::after{border-right:7px solid #fff}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after{border-left:7px solid #fff}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::after{left:-12.5px}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after{right:-12.5px}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::after{left:auto}.light.inline-end.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::before{border-right:7px solid #dedede}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before{border-left:7px solid #dedede}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::before{left:-14px}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before{right:-14px}:root:not([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-end.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .light.inline-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-end.arrow ::slotted([slot=content])::before{left:auto}.light.inline-start.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::after{border-left:7px solid #fff}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after{border-right:7px solid #fff}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::after{right:-12.5px}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after{left:-12.5px}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::after{left:auto}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::after{right:auto}.light.inline-start.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:calc(50% - 7px);bottom:auto}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::before{border-left:7px solid #dedede}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before{border-right:7px solid #dedede}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::before{right:-14px}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before{left:-14px}:root:not([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.inline-start.arrow ::slotted([slot=content])::before{left:auto}:root[dir=rtl] .light.inline-start.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.inline-start.arrow ::slotted([slot=content])::before{right:auto}.light.block-end.arrow ::slotted([slot=content])::after{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:-12.5px;bottom:auto;border-bottom:7px solid #fff}:root:not([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.block-end.arrow ::slotted([slot=content])::after{left:calc(50% - 7px)}:root[dir=rtl] .light.block-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::after{right:calc(50% - 7px)}:root:not([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::after,:host(:not([dir=rtl])) .light.block-end.arrow ::slotted([slot=content])::after{right:auto}:root[dir=rtl] .light.block-end.arrow ::slotted([slot=content])::after,:host([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::after{left:auto}.light.block-end.arrow ::slotted([slot=content])::before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid transparent;border-top:7px solid transparent;content:\"\";position:absolute;top:-14px;bottom:auto;border-bottom:7px solid #dedede}:root:not([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.block-end.arrow ::slotted([slot=content])::before{left:calc(50% - 7px)}:root[dir=rtl] .light.block-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::before{right:calc(50% - 7px)}:root:not([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::before,:host(:not([dir=rtl])) .light.block-end.arrow ::slotted([slot=content])::before{right:auto}:root[dir=rtl] .light.block-end.arrow ::slotted([slot=content])::before,:host([dir=rtl]) .light.block-end.arrow ::slotted([slot=content])::before{left:auto}";
var SpiderTooltip = /*#__PURE__*/function (_UpgradedElement) {
_inherits(SpiderTooltip, _UpgradedElement);
var _super = _createSuper(SpiderTooltip);
_createClass(SpiderTooltip, [{
key: "classNames",
get: function get() {
var getValues = function getValues(obj) {
return Object.keys(obj).map(function (key) {
return obj[key];
});
};
var showArrow = this.hasAttribute(Attributes.SHOW_ARROW);
var positionValue = this.getAttribute(Attributes.POSITION);
var modeValue = this.getAttribute(Attributes.MODE);
var positionValues = getValues(Positions);
var modesValues = getValues(Modes);
var position = positionValues.includes(positionValue) ? positionValue : Positions.BLOCK_START;
var mode = modesValues.includes(modeValue) ? modeValue : Modes.DARK;
var arrow = showArrow ? ClassNames.ARROW : "";
var visible = this.isVisible ? ClassNames.VISIBLE : ClassNames.HIDDEN;
return {
position,
mode,
arrow,
visible
};
}
}], [{
key: "properties",
get: function get() {
return {
isVisible: {
type: "boolean",
default: false
}
};
}
}, {
key: "styles",
get: function get() {
return styles;
}
}]);
function SpiderTooltip() {
var _this;
_classCallCheck(this, SpiderTooltip);
_this = _super.call(this);
_this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
_this.handleClose = _this.handleClose.bind(_assertThisInitialized(_this));
_this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this));
_this.removeTimeout = _this.removeTimeout.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(SpiderTooltip, [{
key: "elementDidMount",
value: function elementDidMount() {
// set nodes
var trigger = this.querySelector(Slots.TRIGGER);
var content = this.querySelector(Slots.CONTENT); // set attributes
trigger.setAttribute(Attributes.ARIA_DESCRIBEDBY, this.elementId);
content.id = this.elementId;
content.setAttribute(Attributes.ROLE, "tooltip");
this.addOpenListeners();
this.addCloseListeners();
}
}, {
key: "elementWillUnmount",
value: function elementWillUnmount() {
this.handleOpen = null;
this.handleClose = null;
this.handleKeydown = null;
this.removeTimeout = null;
globalEventRegistry.globalEventRegistry.unregister(this.elementId);
}
}, {
key: "elementDidUpdate",
value: function elementDidUpdate() {
if (this.isVisible) {
if (this.isInlineTooltip()) {
this.alignTooltip("height");
} else {
this.alignTooltip("width");
}
globalEventRegistry.globalEventRegistry.register({
types: ["keydown"],
id: this.elementId,
handler: this.handleKeydown
});
} else {
globalEventRegistry.globalEventRegistry.unregister(this.elementId);
}
}
}, {
key: "setDelay",
value: function setDelay() {
var delayOn = this.getAttribute(Attributes.DELAY_ON);
var delayOff = this.getAttribute(Attributes.DELAY_OFF);
var delay = this.getAttribute(Attributes.DELAY);
this.delayOn = parseInt(delayOn || delay) || TIMEOUT_DELAY;
this.delayOff = parseInt(delayOff || delay) || TIMEOUT_DELAY;
}
}, {
key: "addOpenListeners",
value: function addOpenListeners() {
this.addEventListener("focusin", this.handleOpen);
this.addEventListener("focusin", this.handleOpen);
this.addEventListener("mouseover", this.handleOpen);
this.addEventListener("mouseover", this.handleOpen);
}
}, {
key: "addCloseListeners",
value: function addCloseListeners() {
this.addEventListener("focusout", this.handleClose);
this.addEventListener("focusout", this.handleClose);
this.addEventListener("mouseout", this.handleClose);
this.addEventListener("mouseout", this.handleClose);
}
}, {
key: "addOpenCancelListeners",
value: function addOpenCancelListeners() {
this.addEventListener("mouseout", this.removeTimeout);
this.addEventListener("focusout", this.removeTimeout);
this.addEventListener("mouseout", this.removeTimeout);
}
}, {
key: "addCloseCancelListeners",
value: function addCloseCancelListeners() {
this.addEventListener("mouseover", this.removeTimeout);
this.addEventListener("focusin", this.removeTimeout);
this.addEventListener("mouseover", this.removeTimeout);
}
}, {
key: "removeOpenCancelListeners",
value: function removeOpenCancelListeners() {
this.removeEventListener("mouseout", this.removeTimeout);
this.removeEventListener("focusout", this.removeTimeout);
this.removeEventListener("mouseout", this.removeTimeout);
}
}, {
key: "removeCloseCancelListeners",
value: function removeCloseCancelListeners() {
this.removeEventListener("mouseover", this.removeTimeout);
this.removeEventListener("focusin", this.removeTimeout);
this.removeEventListener("mouseover", this.removeTimeout);
}
}, {
key: "handleKeydown",
value: function handleKeydown(event) {
if (this.isVisible && event.key === ESCAPE_KEY) {
this.removeTimeout();
this.removeCloseCancelListeners();
this.isVisible = false;
}
}
}, {
key: "removeTimeout",
value: function removeTimeout() {
if (!this.isConnected) return;
if (!this.timeout) return;
clearTimeout(this.timeout);
this.timeout = null;
}
}, {
key: "handleOpen",
value: function handleOpen() {
var _this2 = this;
if (this.isVisible) return;
var context = this;
this.timeout = setTimeout(function () {
if (!context.isConnected) return;
_this2.removeOpenCancelListeners();
_this2.timeout = null;
_this2.isVisible = true;
}, this.delayOn);
this.addOpenCancelListeners();
}
}, {
key: "handleClose",
value: function handleClose() {
var _this3 = this;
if (!this.isVisible) return;
var context = this;
this.timeout = setTimeout(function () {
if (!context.isConnected) return;
_this3.removeCloseCancelListeners();
_this3.timeout = null;
_this3.isVisible = false;
}, this.delayOff);
this.addCloseCancelListeners();
}
}, {
key: "alignTooltip",
value: function alignTooltip(dimension) {
var trigger = this.querySelector(Slots.TRIGGER);
var content = this.querySelector(Slots.CONTENT);
var triggerSize = this.getSize(trigger, dimension);
var tooltipSize = this.getSize(content, dimension);
var triggerIsBigger = triggerSize > tooltipSize;
var offset = triggerIsBigger ? (triggerSize - tooltipSize) / 2 : (tooltipSize - triggerSize) / -2;
if (dimension === "height") {
content.style.top = "".concat(offset, "px");
} else {
content.style.left = "".concat(offset, "px");
}
}
}, {
key: "getSize",
value: function getSize(element, property) {
return Math.floor(element.getBoundingClientRect()[property]);
}
}, {
key: "isInlineTooltip",
value: function isInlineTooltip() {
var position = this.getAttribute(Attributes.POSITION);
return [Positions.INLINE_START, Positions.INLINE_END].includes(position);
}
}, {
key: "render",
value: function render() {
var _this$classNames = this.classNames,
position = _this$classNames.position,
mode = _this$classNames.mode,
arrow = _this$classNames.arrow,
visible = _this$classNames.visible;
this.setDelay();
return "\n <div class=\"tooltip ".concat(visible, " ").concat(position, " ").concat(mode, " ").concat(arrow, "\">\n <slot name=\"trigger\"></slot>\n <slot name=\"content\"></slot>\n </div>\n ");
}
}]);
return SpiderTooltip;
}(upgradedElement.UpgradedElement);
upgradedElement.register("spider-tooltip", SpiderTooltip);
})));
//# sourceMappingURL=tooltip.js.map