@scania/tegel
Version:
Tegel Design System
84 lines (80 loc) • 4.76 kB
JavaScript
import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';
const tooltipCss = () => `.sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}`;
const TdsTooltip = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** In case Tooltip contains only text, no HTML, a text can be passed by this prop */
this.text = '';
/** Decides if the component should be visible from the start. */
this.defaultShow = false;
/** Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button. */
this.mouseOverTooltip = false;
/** What triggers the popover to show */
this.trigger = 'hover';
/** Prop in control of showing and hiding prop. Takes precedence over `defaultOpen` prop. */
this.show = null;
/** Placement of Tooltip. */
this.placement = 'bottom';
/** Sets the offset skidding */
this.offsetSkidding = 0;
/** Sets the offset distance */
this.offsetDistance = 8;
this.border = '';
this.popperjsExtraModifiers = [
{
name: 'positionCalc',
enabled: true,
phase: 'main',
fn: ({ state }) => {
if (state.placement === 'bottom-start' || state.placement === 'right-start') {
this.border = 'top-left';
}
else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
this.border = 'top-right';
}
else if (state.placement === 'top-end' || state.placement === 'left-end') {
this.border = 'bottom-right';
}
else if (state.placement === 'top-start' || state.placement === 'right-end') {
this.border = 'bottom-left';
}
else if (state.placement === 'bottom' || state.placement === 'top') {
this.border = 'default';
}
},
},
];
this.inheritedAttributes = {};
}
handleKeyDown(event) {
if (event.key === 'Escape' && this.show) {
this.show = false;
}
}
componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
}
determineTrigger() {
if (this.trigger === 'hover') {
return this.mouseOverTooltip ? 'hover-popover' : 'hover';
}
return this.trigger;
}
render() {
var _a;
return (h(Host, { key: '1bd8ec7aed94718f305853bfe59cff193537c3f9', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '6dbe7c7c9662fccba29de2451b37bec6c3e77db4' }, this.inheritedAttributes, { class: {
'tds-tooltip': true,
[`tds-tooltip-${this.border}`]: true,
[(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
'tds-tooltip-show': !!this.show,
}, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
this.show = true;
}, onInternalTdsClose: () => {
this.show = false;
}, defaultShow: this.defaultShow }), this.text, h("slot", { key: '4a14caadf2026d45858f7de11b94faebf1b19f03' }))));
}
get host() { return getElement(this); }
};
TdsTooltip.style = tooltipCss();
export { TdsTooltip as tds_tooltip };