@postnord/web-components
Version:
PostNord Web Components
94 lines (88 loc) • 7.57 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.js');
var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');
const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
const alert_question_circle = icon;
const pnTooltipCss = "pn-tooltip{display:inline-block;font-size:1em}pn-tooltip .pn-tooltip{background:none;background-color:transparent;border:none;position:relative;padding:0;border-radius:50%;transition-property:outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}pn-tooltip .pn-tooltip:hover{background-color:#e0f8ff}pn-tooltip .pn-tooltip[data-light] pn-icon .pn-icon-svg path{fill:#ffffff}pn-tooltip .pn-tooltip[data-light]:focus,pn-tooltip .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}pn-tooltip .pn-tooltip[data-warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-tooltip .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tooltip .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}pn-tooltip .pn-tooltip[data-warning]:hover{background-color:#fdefee}pn-tooltip .pn-tooltip-content{position:absolute;text-align:left;bottom:calc(100% + 0.75em);left:50%;background:#ffffff;padding:1em;border-radius:0.8rem;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}pn-tooltip .pn-tooltip-content[data-simple]{background:#0d234b;color:#ffffff;border-radius:10em;padding:0.5em 0.85em;bottom:100%;font-size:0.875em;font-weight:300;margin-bottom:0.1em;margin-top:0.1em}pn-tooltip .pn-tooltip>pn-icon{position:relative;pointer-events:none}pn-tooltip .pn-tooltip>pn-icon:before{content:\"\";pointer-events:none;width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #ffffff;filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));bottom:102%;left:50%;position:absolute;z-index:2;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tooltip .pn-tooltip>pn-icon:before{transition-duration:0s;transition-delay:0s}}pn-tooltip .pn-tooltip>pn-icon:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}pn-tooltip .pn-tooltip>pn-icon[data-simple]:before{content:none}pn-tooltip .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}pn-tooltip .pn-tooltip[data-open] pn-icon:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}pn-tooltip .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}pn-tooltip .pn-tooltip[data-downwards] pn-icon:before{top:102%;transform-origin:bottom left;filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #ffffff}";
const PnTooltip = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
content;
button;
openEvents = ['mouseover', 'focus'];
closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
eventListeners = [...this.openEvents, ...this.closeEvents];
timeout;
get hostElement() { return index.getElement(this); }
downwards = false;
open = false;
deltaX = '0';
/** Apply the warning color and change the icon to `!`. */
warning = false;
/** Apply the light color if you use a dark background. */
light = false;
/** Overrides the slotted content to create a small tooltip instead. @since v7.3.0 */
tooltip;
openHandler() {
if (this.open)
this.checkPosition();
else
this.setTransform();
}
componentDidLoad() {
this.initTooltip();
}
setTransform() {
this.content.style.transform = `scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`;
}
getSymbol() {
return this.warning ? alert_exclamation_circle.alert_exclamation_circle : alert_question_circle;
}
checkPosition() {
this.content.style.transition = 'none';
this.content.style.transform = 'scale(1) translateX(-50%)';
this.downwards = false;
requestAnimationFrame(() => {
const { x, y, right } = this.content.getBoundingClientRect();
const extraMargin = 8;
this.deltaX = '0';
this.downwards = y < 0;
this.content.style.transform = '';
if (x < 0)
this.deltaX = `${x * -1 + extraMargin}`; // left edge
if (right > window.innerWidth)
this.deltaX = `${window.innerWidth - right - extraMargin}`; // right edge
requestAnimationFrame(() => {
this.content.style.transition = '';
this.setTransform();
});
});
}
initTooltip() {
this.eventListeners.forEach(name => this.button.addEventListener(name, (event) => this.toggleTooltip(event)));
}
toggleTooltip(event) {
const status = this.openEvents.includes(event.type);
let time = 500;
if (status)
time = 0;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.open = status;
}, time);
}
render() {
return (index.h("button", { key: '1898e87fa0848bb546807416112feb7ee9f8c5a5', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, index.h("pn-icon", { key: 'd4a28061a6c69ffa41cb69c4fd39961b4927949c', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: 'cc7ae46d8c228136a29356083734104bfbb2a30d', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: '9ccae396edf92999920b99bf97d0818541a44bf1', hidden: !!this.tooltip }, index.h("slot", { key: '61b67be4486d95208e09630d58a3dc3b344c5354' })))));
}
static get watchers() { return {
"open": ["openHandler"]
}; }
};
PnTooltip.style = pnTooltipCss;
exports.pn_tooltip = PnTooltip;
//# sourceMappingURL=pn-tooltip.entry.cjs.js.map