@kelvininc/ui-components/components/p-GHnCHOez.js

Kelvin UI Components

import { p as proxyCustomElement, H, h, e as Host } from './p-D6GMjtmE.js';
import { o as offset, a as shift, d as defineCustomElement$2, b as autoPlacement } from './p-BIWUEm1f.js';
import { a as getCollapsedElement } from './p-MyVVnlD9.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { m as mergeComputePositionConfigs } from './p-tvmoGbWd.js';
import { T as TOOLTIP_Z_INDEX } from './p-BEvgYojK.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
import { i as isEmpty } from './p-BZNGlO8m.js';

const DEFAULT_POSITION_CONFIG = {
    strategy: 'fixed',
    middleware: [offset(5), shift({ padding: 5 })]
};
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.withArrow = false;
        /** @inheritdoc */
        this.customClass = '';
        this.showTooltip = 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 = () => {
            this.showTooltip = false;
        };
        this.showTooltipHandler = () => {
            if (this.disabled || (this.truncate && !isElementCollapsed(this.el)))
                return;
            this.showTooltip = true;
        };
    }
    disconnectedCallback() {
        this.showTooltip = false;
    }
    render() {
        return (h(Host, { key: '46c2baab0215c134191247cd20f89cf46d6f53ba' }, h("div", { key: '4320d2ac877236f4df38de8f450bb1a475e52cc2', id: "content", part: "content", ref: el => (this.tooltipContent = el), onMouseOver: this.showTooltipHandler, onMouseOut: this.hideTooltipHandler, onBlur: this.hideTooltipHandler, onClick: this.hideTooltipHandler }, h("slot", { key: 'a1e9525c645045b029b37ee8278cd06270328fb5' })), this.showTooltip && !isEmpty(this.text) && (h("kv-portal", { key: 'a900bbe7b1cbeb131fb34b02e0ac00a2514173c9', 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: '479c0653ce129108e8e1a6c95d1fa43cb02d7cb2', class: Object.assign({}, getClassMap(this.customClass)), text: this.text, style: this.customStyle })))));
    }
    get el() { return this; }
}, [1, "kv-tooltip", {
        "text": [513],
        "position": [513],
        "allowedPositions": [16, "allowed-positions"],
        "options": [16],
        "disabled": [516],
        "contentElement": [16, "content-element"],
        "truncate": [4],
        "delay": [514],
        "withArrow": [516, "with-arrow"],
        "customClass": [513, "custom-class"],
        "customStyle": [16, "custom-style"],
        "showTooltip": [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 };