@kelvininc/ui-components
Version:
Kelvin UI Components
164 lines (159 loc) • 7.14 kB
JavaScript
import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';
import { o as offset, a as shift, d as defineCustomElement$2, b as autoPlacement } from './p-CgqRIP0M.js';
import { a as getCollapsedElement } from './p-B6zr3BG3.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { m as mergeComputePositionConfigs } from './p-tvmoGbWd.js';
import { T as TOOLTIP_Z_INDEX } from './p-CRcRM80a.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const DEFAULT_POSITION_CONFIG = {
strategy: 'fixed',
middleware: [offset(5), shift({ padding: 5 })]
};
const DEFAULT_HIDE_DELAY = 1000;
const DEFAULT_DELAY_CONFIG = 1000;
const DEFAULT_AUTO_PLACEMENT_CONFIG = {
padding: 5
};
const isElementCollapsed = (element) => {
const collapsedElement = getCollapsedElement(Array.from(element.childNodes));
if (collapsedElement !== undefined) {
const range = new Range();
range.selectNodeContents(collapsedElement);
const { width: rectWidth } = range.getBoundingClientRect();
const { clientWidth: collapsedWidth } = collapsedElement;
// once rectWidth comes as a real value and collapsedWidth as a rounded value, this calculation was incorrect.
if (collapsedWidth >= Math.round(rectWidth))
return false;
}
return true;
};
const KvTooltip = /*@__PURE__*/ proxyCustomElement(class KvTooltip extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** @inheritdoc */
this.text = '';
/** @inheritdoc */
this.options = DEFAULT_POSITION_CONFIG;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.contentElement = null;
/** @inheritdoc */
this.truncate = false;
/** @inheritdoc */
this.delay = DEFAULT_DELAY_CONFIG;
/** @inheritdoc */
this.hideDelay = DEFAULT_HIDE_DELAY;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.customClass = '';
this.showTooltip = false;
this.hoverContent = false;
this.hoverTooltip = false;
this.getContentElement = () => {
var _a;
return (_a = this.contentElement) !== null && _a !== void 0 ? _a : this.tooltipContent;
};
this.getOptions = () => {
const placement = isEmpty(this.allowedPositions) ? this.position : undefined;
const middleware = [];
if (!isEmpty(this.allowedPositions) && isEmpty(placement)) {
middleware.push(autoPlacement(Object.assign(Object.assign({}, DEFAULT_AUTO_PLACEMENT_CONFIG), { allowedPlacements: this.allowedPositions })));
}
return mergeComputePositionConfigs({ placement, middleware }, this.options);
};
this.hideTooltipHandler = (delay) => {
if (delay) {
setTimeout(() => {
if (!this.hoverContent && !this.hoverTooltip) {
this.showTooltip = false;
}
}, delay);
return;
}
this.showTooltip = false;
};
this.getTooltipSlotElement = () => {
return this.el.querySelector('[slot="tooltip-text"]');
};
this.showTooltipHandler = () => {
if (this.disabled || (this.truncate && !isElementCollapsed(this.el)))
return;
this.showTooltip = true;
};
}
disconnectedCallback() {
this.showTooltip = false;
}
render() {
const tooltipSlotElement = this.getTooltipSlotElement();
return (h(Host, { key: '8cb12be614c78d1bcf039d1b2199763d97735ee7' }, h("div", { key: '8de03a96446c4b1b84918df22059710f506bf117', id: "content", part: "content", ref: el => (this.tooltipContent = el), onMouseOver: () => {
this.showTooltipHandler();
this.hoverContent = true;
}, onMouseOut: () => {
this.hoverContent = false;
this.hideTooltipHandler(!isEmpty(tooltipSlotElement) ? this.hideDelay : undefined);
}, onBlur: () => {
this.hoverContent = false;
this.hideTooltipHandler(!isEmpty(tooltipSlotElement) ? this.hideDelay : undefined);
}, onClick: () => {
this.hoverContent = false;
this.hideTooltipHandler();
} }, h("slot", { key: 'adab3af0dbba69f4edbc50e708bfc272d9c59fb3' })), h("div", { key: 'e54dcd487a1b667861d556c176836603eb543b90', style: { display: 'none' } }, h("slot", { key: 'd12f4a5caa826634666eab65b2e04828764ca9ca', name: "tooltip-text" })), this.showTooltip && (!isEmpty(this.text) || !isEmpty(tooltipSlotElement)) && (h("kv-portal", { key: 'aee9fbd2781db2a074c93450f34646d357bd6a7c', zIndex: TOOLTIP_Z_INDEX, show: true, delay: this.delay, withArrow: this.withArrow, animated: true, reference: this.getContentElement(), options: this.getOptions() }, h("kv-tooltip-text", { key: '20b1f2e5f44b0c1b5da1d16a6f4f041a4457ae0c', class: Object.assign({}, getClassMap(this.customClass)), text: this.text, style: this.customStyle, onMouseOver: () => {
this.hoverTooltip = true;
this.showTooltipHandler();
}, onMouseOut: () => {
this.hoverTooltip = false;
this.hideTooltipHandler();
}, onBlur: () => {
this.hoverTooltip = false;
this.hideTooltipHandler();
} }, tooltipSlotElement && h("div", { key: 'b4178ca3ede4d6c087eed3f8989909aee5d51c87', innerHTML: tooltipSlotElement.innerHTML }))))));
}
get el() { return this; }
}, [257, "kv-tooltip", {
"text": [513],
"position": [513],
"allowedPositions": [16, "allowed-positions"],
"options": [16],
"disabled": [516],
"contentElement": [16, "content-element"],
"truncate": [4],
"delay": [514],
"hideDelay": [514, "hide-delay"],
"withArrow": [516, "with-arrow"],
"customClass": [513, "custom-class"],
"customStyle": [16, "custom-style"],
"showTooltip": [32],
"hoverContent": [32],
"hoverTooltip": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-tooltip", "kv-portal", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-tooltip":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvTooltip);
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvTooltip as K, defineCustomElement as d };