@duetds/components
Version:
This package includes Duet Components and related tools.
59 lines (58 loc) • 5.53 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './chunk-5cdff7bc.js';
import { c as classNames } from './chunk-ea56b96b.js';
var DuetTooltip = /** @class */ (function () {
function DuetTooltip(hostRef) {
registerInstance(this, hostRef);
/**
* Theme of the tooltip. Can be one of: default, turva.
*/
this.theme = "";
/**
* Position of the tooltip. Can be one of: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.
*/
this.position = "bottom";
/**
* Toggle whether the tooltip is visible or not.
*/
this.active = false;
}
/**
* Component lifecycle events.
*/
DuetTooltip.prototype.componentWillLoad = function () {
// Check whether global Turva theme is active
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
};
/**
* render() function.
* Always the last one in the class.
*/
DuetTooltip.prototype.render = function () {
// Set constants for tooltip classes used.
var tooltipClasses = classNames("duet-tooltip", {
"duet-theme-turva": this.theme === "turva",
"bottom-center": this.position === "bottom-center",
"top-center": this.position === "top-center",
"top-right": this.position === "top-right",
"top-left": this.position === "top-left",
"bottom-right": this.position === "bottom-right",
"bottom-left": this.position === "bottom-left",
active: this.active === true,
});
return (h("div", { class: tooltipClasses }, h("div", { class: "duet-tooltip-scrollable" }, h("slot", null))));
};
Object.defineProperty(DuetTooltip.prototype, "element", {
get: function () { return getElement(this); },
enumerable: true,
configurable: true
});
Object.defineProperty(DuetTooltip, "style", {
get: function () { return ":host{background:transparent;border:0;padding:0;margin:0;margin-right:4px;margin-bottom:8px;display:block;width:auto;max-width:100%}.duet-tooltip,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.duet-tooltip{background:transparent;border:0;padding:0;margin:0;padding:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;opacity:0;visibility:hidden;-webkit-transition:.3s ease;transition:.3s ease;will-change:transform,opacity,visibility;-webkit-transform:scale(.85) translateZ(0) translateY(20px);transform:scale(.85) translateZ(0) translateY(20px);background:#fff;border:1px solid #e1e3e6;-webkit-box-shadow:0 2px 10px 0 rgba(0,41,77,.07);box-shadow:0 2px 10px 0 rgba(0,41,77,.07);border-radius:4px;min-height:48px;position:relative;max-height:340px;max-width:340px;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.875rem;color:#00294d;font-weight:400;line-height:1.25;z-index:950}.duet-tooltip.duet-theme-turva{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-color:#e6e6e6;-webkit-box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13);box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13)}.duet-tooltip:after{content:\"\";position:absolute;bottom:-20px;left:50%;width:0;height:0;z-index:200;border:10px solid transparent;border-top:10px solid #fff;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.duet-tooltip:before{content:\"\";position:absolute;bottom:-22px;left:50%;width:0;height:0;z-index:100;border:11px solid transparent;border-top:11px solid #e1e3e6;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.duet-theme-turva .duet-tooltip:before{background:#e6e6e6}.duet-tooltip.active{opacity:1;visibility:visible;-webkit-transform:scale(1) translateZ(0) translateY(0);transform:scale(1) translateZ(0) translateY(0)}.duet-tooltip.top-center:after,.duet-tooltip.top-left:after,.duet-tooltip.top-right:after{top:-20px;bottom:auto;border:10px solid transparent;border-bottom:10px solid #fff}.duet-tooltip.top-center:before,.duet-tooltip.top-left:before,.duet-tooltip.top-right:before{top:-22px;bottom:auto;border:11px solid transparent;border-bottom:11px solid #e1e3e6}.duet-theme-turva .duet-tooltip.top-center:before,.duet-theme-turva .duet-tooltip.top-left:before,.duet-theme-turva .duet-tooltip.top-right:before{border-bottom-color:#e6e6e6}.duet-tooltip.bottom-right:after,.duet-tooltip.top-right:after{left:90%}.duet-tooltip.bottom-right:before,.duet-tooltip.top-right:before{left:90%}.duet-tooltip.bottom-left:after,.duet-tooltip.top-left:after{left:10%}.duet-tooltip.bottom-left:before,.duet-tooltip.top-left:before{left:10%}.duet-tooltip-scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch;width:calc(100% - 8px);padding-right:12px;max-height:250px}.duet-tooltip-scrollable::-webkit-scrollbar{width:4px}.duet-tooltip-scrollable::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-scrollable::-webkit-scrollbar-thumb{border-radius:4px;background:#e1e3e6}.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:#e6e6e6}"; },
enumerable: true,
configurable: true
});
return DuetTooltip;
}());
export { DuetTooltip as duet_tooltip };