@scania/tegel/dist/components/p-9cee9d7f.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { i as inheritAttributes } from './p-3fe9cbbf.js';
import { d as defineCustomElement$1 } from './p-d3866be7.js';

const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
const TdsTooltipStyle0 = tooltipCss;

const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
    constructor() {
        super();
        this.__registerHost();
        this.popperjsExtraModifiers = [
            {
                name: 'positionCalc',
                enabled: true,
                phase: 'main',
                fn: ({ state }) => {
                    if (state.placement === 'bottom-start' || state.placement === 'right-start') {
                        this.border = 'top-left';
                    }
                    else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
                        this.border = 'top-right';
                    }
                    else if (state.placement === 'top-end' || state.placement === 'left-end') {
                        this.border = 'bottom-right';
                    }
                    else if (state.placement === 'top-start' || state.placement === 'right-end') {
                        this.border = 'bottom-left';
                    }
                    else if (state.placement === 'bottom' || state.placement === 'top') {
                        this.border = 'default';
                    }
                },
            },
        ];
        this.inheritedAttributes = [];
        this.text = '';
        this.selector = undefined;
        this.referenceEl = undefined;
        this.defaultShow = false;
        this.mouseOverTooltip = false;
        this.trigger = 'hover';
        this.show = null;
        this.placement = 'bottom';
        this.offsetSkidding = 0;
        this.offsetDistance = 8;
        this.tdsAriaDescribedby = undefined;
    }
    handleKeyDown(event) {
        if (event.key === 'Escape' && this.show) {
            this.show = false;
        }
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
    }
    determineTrigger() {
        if (this.trigger === 'hover') {
            return this.mouseOverTooltip ? 'hover-popover' : 'hover';
        }
        return this.trigger;
    }
    render() {
        var _a;
        return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
                'tds-tooltip': true,
                [`tds-tooltip-${this.border}`]: true,
                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                'tds-tooltip-show': this.show,
            }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.determineTrigger(), modifiers: this.popperjsExtraModifiers, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, show: this.show, placement: this.placement, autoHide: false,
            // @ts-ignore
            onInternalTdsShow: () => {
                this.show = true;
            },
            // @ts-ignore
            onInternalTdsClose: () => {
                this.show = false;
            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
    }
    get host() { return this; }
    static get style() { return TdsTooltipStyle0; }
}, [6, "tds-tooltip", {
        "text": [1],
        "selector": [1],
        "referenceEl": [16],
        "defaultShow": [4, "default-show"],
        "mouseOverTooltip": [4, "mouse-over-tooltip"],
        "trigger": [1],
        "show": [1028],
        "placement": [1],
        "offsetSkidding": [2, "offset-skidding"],
        "offsetDistance": [2, "offset-distance"],
        "tdsAriaDescribedby": [1, "tds-aria-describedby"]
    }, [[8, "keydown", "handleKeyDown"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-tooltip", "tds-popover-core"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsTooltip);
            }
            break;
        case "tds-popover-core":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { TdsTooltip as T, defineCustomElement as d };