gov-gui
Version:
Gov UI Component Library Typscript Build
267 lines (266 loc) • 9.09 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class Tooltip {
constructor() {
this.position = 'top'; // Position of the tooltip
this.color = 'dark'; // Tooltip color scheme
this.size = 'sm'; // Tooltip size
this.hoverDelay = 300; // Delay in ms before showing the tooltip on hover
this.isVisible = false; // Tooltip visibility state
this.animationDelay = '2s';
this.allClasses = '';
// Show tooltip with a delay on hover
this.handleMouseEnter = () => {
this.timeoutId = setTimeout(() => {
this.isVisible = true;
}, this.hoverDelay);
};
// Hide tooltip on mouse leave
this.handleMouseLeave = () => {
clearTimeout(this.timeoutId);
this.isVisible = false;
};
}
// Render the tooltip based on position and visibility
renderTooltip() {
const tooltipClass = {
'tooltip': true,
'tooltip--visible': this.isVisible,
[`tooltip--${this.position}`]: true,
[`tooltip--${this.size}`]: true,
[`tooltip--${this.color}`]: true,
};
// Convert the object to a string of space-separated class names
const tooltipClassString = Object.keys(tooltipClass)
.filter(key => tooltipClass[key])
.join(' ');
return (h("div", { class: `${tooltipClassString} ${this.allClasses}` }, this.text));
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
render() {
return (h("div", { key: '84281a0182e8bbf781d4cdebcb45c80084386502', class: `tooltip-container `, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: 'a34db012e75bb8ec2719a1f9af0e31e7b44affa0' }), " ", this.renderTooltip()));
}
static get is() { return "gov-tooltip"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-tooltip.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-tooltip.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "text",
"reflect": false
},
"position": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'top' | 'right' | 'bottom' | 'left'",
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "position",
"reflect": false,
"defaultValue": "'top'"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'dark' | 'light'",
"resolved": "\"dark\" | \"light\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "color",
"reflect": false,
"defaultValue": "'dark'"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'sm' | 'lg'",
"resolved": "\"lg\" | \"sm\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "size",
"reflect": false,
"defaultValue": "'sm'"
},
"hoverDelay": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "hover-delay",
"reflect": false,
"defaultValue": "300"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"isVisible": {}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-tooltip.js.map