@railzai/railz-visualizations
Version:
Railz.ai Visualizations
63 lines (58 loc) • 5.44 kB
JavaScript
/*!
* Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
* Built with Stencil
* Copyright (c) FIS.
*/
import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import './financial-ratios.js';
import { d as RAILZ_TOOLTIP_COLOR } from './colors.js';
import { i as isEmpty } from './isEmpty.js';
/* eslint-disable @typescript-eslint/no-unused-vars */
function TooltipImage({ fillColor = RAILZ_TOOLTIP_COLOR, width = '13px', height = '13px', }) {
return (h("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
h("path", { stroke: fillColor, d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 400c-18 0-32-14-32-32s13.1-32 32-32c17.1 0 32 14 32 32S273.1 400 256 400zM325.1 258L280 286V288c0 13-11 24-24 24S232 301 232 288V272c0-8 4-16 12-21l57-34C308 213 312 206 312 198C312 186 301.1 176 289.1 176h-51.1C225.1 176 216 186 216 198c0 13-11 24-24 24s-24-11-24-24C168 159 199 128 237.1 128h51.1C329 128 360 159 360 198C360 222 347 245 325.1 258z" })));
}
const tooltipCss = "@font-face{font-family:Inter;src:url(\"../assets/fonts/Inter-italic-var.woff2\");font-family:Inter;src:url(\"../assets/fonts/Inter-upright-var.woff2\")}body,div[class^=railz-],div[class*=\" railz-\"]{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.rv-tooltip{fill:currentcolor;color:#424242;position:relative;display:flex;align-items:center;flex-shrink:0;height:100%}.rv-tooltip .rv-tooltip-image{display:flex}.rv-tooltiptext{position:absolute;visibility:hidden;z-index:1;user-select:none;width:120px;max-width:300px;padding:4px 8px;margin:4px;border-radius:4px;background-color:rgba(97, 97, 97, 0.92);color:#fff;overflow-wrap:break-word;text-align:left;font-size:11px;font-weight:500}.rv-tooltiptext.rv-center-right{top:0;left:15px}.rv-tooltiptext.rv-top-right{left:15px}.rv-tooltiptext.rv-center-left{top:0;right:15px}.rv-tooltiptext.rv-top-left{right:15px}.rv-tooltiptext.rv-bottom-right{top:24px;left:-2px}.rv-tooltiptext.rv-bottom-left{top:24px;right:-2px}.rv-tooltiptext.rv-bottom-center{top:24px;left:-60px}.rv-tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.rv-tooltip-arrow-top{top:-5px;left:50%;transform:translateX(-50%);border-width:0 5px 5px;border-color:transparent transparent var(--rv-tooltip-arrow-color, rgba(97, 97, 97, 0.92)) transparent}.rv-tooltip-arrow-bottom{bottom:-5px;left:50%;transform:translateX(-50%);border-width:5px 5px 0;border-color:var(--rv-tooltip-arrow-color, rgba(97, 97, 97, 0.92)) transparent transparent transparent}.rv-tooltip-arrow-left{top:50%;left:-5px;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--rv-tooltip-arrow-color, rgba(97, 97, 97, 0.92)) transparent transparent}.rv-tooltip-arrow-right{top:50%;right:-5px;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--rv-tooltip-arrow-color, rgba(97, 97, 97, 0.92))}.rv-tooltip:hover .rv-tooltiptext,.rv-tooltip:focus .rv-tooltiptext{visibility:visible;display:inline-block;flex-shrink:0}";
const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/**
* Question mark with a tooltip text
*/
this.text = '';
/**
* Position of the Tooltip text when hovered
*/
this.tooltipStyle = { position: 'bottom-center' };
}
render() {
var _a, _b, _c, _d, _e, _f, _g;
const arrowPosition = ((_a = this.tooltipStyle) === null || _a === void 0 ? void 0 : _a.arrow) || 'top';
const fillColor = ((_b = this.tooltipStyle) === null || _b === void 0 ? void 0 : _b.fillColor) || RAILZ_TOOLTIP_COLOR;
return (!isEmpty(this.tooltipText) && (h("div", { class: "rv-tooltip", style: Object.assign({}, (_c = this.tooltipStyle) === null || _c === void 0 ? void 0 : _c.style) }, h("div", { class: "rv-tooltip-image", style: Object.assign({}, (_d = this.tooltipStyle) === null || _d === void 0 ? void 0 : _d.textStyle) }, isEmpty(this.text) ? h(TooltipImage, Object.assign({}, this.tooltipStyle)) : this.text), h("span", { class: `rv-tooltiptext rv-${(_e = this.tooltipStyle) === null || _e === void 0 ? void 0 : _e.position}`, style: Object.assign(Object.assign({}, (_f = this.tooltipStyle) === null || _f === void 0 ? void 0 : _f.tooltipTextStyle), { backgroundColor: fillColor }) }, this.tooltipText, ((_g = this.tooltipStyle) === null || _g === void 0 ? void 0 : _g.showArrow) && (h("span", { class: `rv-tooltip-arrow rv-tooltip-arrow-${arrowPosition}`, style: {
'--rv-tooltip-arrow-color': fillColor,
} }))))));
}
static get style() { return tooltipCss; }
}, [1, "railz-tooltip", {
"text": [1],
"tooltipText": [1, "tooltip-text"],
"tooltipStyle": [16]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["railz-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "railz-tooltip":
if (!customElements.get(tagName)) {
customElements.define(tagName, Tooltip);
}
break;
} });
}
export { Tooltip as T, defineCustomElement as d };
//# sourceMappingURL=tooltip.js.map