@scania/tegel
Version:
Tegel Design System
307 lines (306 loc) • 11.5 kB
JavaScript
import { h, Host } from "@stencil/core";
import inheritAttributes from "../../utils/inheritAttributes";
/**
* @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
*/
export class TdsTooltip {
constructor() {
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(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: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, 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, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
}
static get is() { return "tds-tooltip"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["tooltip.scss"]
};
}
static get styleUrls() {
return {
"$": ["tooltip.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "In case Tooltip contains only text, no HTML, a text can be passed by this prop"
},
"attribute": "text",
"reflect": false,
"defaultValue": "''"
},
"selector": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The CSS-selector for an element that will trigger the Tooltip"
},
"attribute": "selector",
"reflect": false
},
"referenceEl": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "HTMLElement | null",
"resolved": "HTMLElement",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Element that will trigger the Tooltip (takes priority over selector)"
}
},
"defaultShow": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides if the component should be visible from the start."
},
"attribute": "default-show",
"reflect": false,
"defaultValue": "false"
},
"mouseOverTooltip": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button."
},
"attribute": "mouse-over-tooltip",
"reflect": false,
"defaultValue": "false"
},
"trigger": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'click' | 'hover'",
"resolved": "\"click\" | \"hover\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "What triggers the popover to show"
},
"attribute": "trigger",
"reflect": false,
"defaultValue": "'hover'"
},
"show": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prop in control of showing and hiding prop. Takes precedence over `defaultOpen` prop."
},
"attribute": "show",
"reflect": false,
"defaultValue": "null"
},
"placement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Placement",
"resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
"references": {
"Placement": {
"location": "import",
"path": "@popperjs/core",
"id": "node_modules::Placement"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Placement of Tooltip."
},
"attribute": "placement",
"reflect": false,
"defaultValue": "'bottom'"
},
"offsetSkidding": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the offset skidding"
},
"attribute": "offset-skidding",
"reflect": false,
"defaultValue": "0"
},
"offsetDistance": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the offset distance"
},
"attribute": "offset-distance",
"reflect": false,
"defaultValue": "8"
},
"tdsAriaDescribedby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the aria-describedby attribute"
},
"attribute": "tds-aria-describedby",
"reflect": false
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": "window",
"capture": false,
"passive": false
}];
}
}