@scania/tegel
Version:
Tegel Design System
87 lines (81 loc) • 4.49 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-ca8040ad.js');
const inheritAttributes = require('./inheritAttributes-ff9ad737.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 TdsTooltipStyle0 = tooltipCss;
const TdsTooltip = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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 = [];
this.text = '';
this.selector = undefined;
this.referenceEl = undefined;
this.defaultShow = false;
this.mouseOverTooltip = false;
this.trigger = 'hover';
this.show = null;
this.placement = 'bottom';
this.offsetSkidding = 0;
this.offsetDistance = 8;
this.tdsAriaDescribedby = undefined;
}
handleKeyDown(event) {
if (event.key === 'Escape' && this.show) {
this.show = false;
}
}
componentWillLoad() {
this.inheritedAttributes = inheritAttributes.inheritAttributes(this.host, ['style', 'class']);
}
determineTrigger() {
if (this.trigger === 'hover') {
return this.mouseOverTooltip ? 'hover-popover' : 'hover';
}
return this.trigger;
}
render() {
var _a;
return (index.h(index.Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, index.h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, 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,
// @ts-ignore
onInternalTdsShow: () => {
this.show = true;
},
// @ts-ignore
onInternalTdsClose: () => {
this.show = false;
}, defaultShow: this.defaultShow }), this.text, index.h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
}
get host() { return index.getElement(this); }
};
TdsTooltip.style = TdsTooltipStyle0;
exports.tds_tooltip = TdsTooltip;