@trimble-oss/moduswebcomponents/components/modus-wc-tooltip.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';

const convertPropsToClasses = (props) => {
    let classes = '';
    if (Object.prototype.hasOwnProperty.call(props, 'disabled') &&
        !!props.disabled) {
        classes = `${classes} modus-wc-tooltip-disabled`;
    }
    if (Object.prototype.hasOwnProperty.call(props, 'forceOpen') &&
        !!props.forceOpen) {
        classes = `${classes} modus-wc-tooltip-open`;
    }
    if (Object.prototype.hasOwnProperty.call(props, 'position') &&
        props.position &&
        props.position !== 'auto') {
        classes = `${classes} modus-wc-tooltip-${props.position}`;
    }
    return classes;
};

const modusWcTooltipCss = ".modus-wc-tooltip{--tooltip-color:var(--modus-wc-color-neutral-content);--tooltip-text-color:var(--modus-wc-color-neutral);font-weight:var(--modus-wc-font-weight-regular)}[data-theme=modus-classic-light] modus-wc-tooltip .modus-wc-tooltip{--tooltip-color:var(--modus-wc-color-gray-7);--tooltip-text-color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-regular)}[data-theme=modus-classic-dark] modus-wc-tooltip .modus-wc-tooltip{--tooltip-color:var(--modus-wc-color-gray-0);--tooltip-text-color:var(--modus-wc-color-trimble-gray);font-weight:var(--modus-wc-font-weight-regular)}modus-wc-tooltip .modus-wc-tooltip-disabled::before,modus-wc-tooltip .modus-wc-tooltip-disabled::after{display:none;opacity:0;visibility:hidden}";

const ModusWcTooltip$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcTooltip extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** The text content of the tooltip. */
        this.content = '';
        /** Custom CSS class to apply to the inner div. */
        this.customClass = '';
        /** Disables displaying the tooltip on hover */
        this.disabled = false;
        /** The position that the tooltip will render in relation to the element. */
        this.position = 'auto';
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-tooltip'];
        const propClasses = convertPropsToClasses({
            disabled: this.disabled,
            forceOpen: this.forceOpen,
            position: this.position,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        return (h(Host, { key: '482cd87ddc139731c8b09ba6441231657aae0fcd' }, h("div", Object.assign({ key: 'c016ccf4f1d6b654da70a54d419a7a4edf9b652c', class: this.getClasses(), "data-tip": this.content, id: this.tooltipId, role: "tooltip" }, this.inheritedAttributes), h("slot", { key: '2bdb447f86f22eec7d559f1aac143ba5667a86aa' }))));
    }
    get el() { return this; }
    static get style() { return modusWcTooltipCss; }
}, [4, "modus-wc-tooltip", {
        "content": [1],
        "customClass": [1, "custom-class"],
        "disabled": [4],
        "forceOpen": [4, "force-open"],
        "tooltipId": [1, "tooltip-id"],
        "position": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcTooltip$1);
            }
            break;
    } });
}

const ModusWcTooltip = ModusWcTooltip$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcTooltip, defineCustomElement };