@mgdis/mg-components 6.20.0 → 6.21.0

package/dist/components/mg-tooltip2.js

@@ -1,421 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createID, n as nextTick, a as isValideID, t as toString, i as isValidString, g as getWindows, l as focusableElements } from './index2.js';
-import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
-import { c as createPopper } from './popper.js';
-
-const Guard = {
-    FOCUS: 'focus',
-    HOVER_TOOLTIP_ELEMENT: 'hoverTooltip',
-    HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',
-    DISABLE_ON_CLICK: 'disableOnClick',
-};
-
-const mgTooltipCss = "/*!\n * @prop --mg-c-tooltip-border-radius: Defines the border radius of the tooltip. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-tooltip-color-background: Defines the background color of the tooltip. Default value: `--mg-b-color-dark`.\n * @prop --mg-c-tooltip-color-text: Defines the font color of the tooltip. Default value: `--mg-b-color-light`.\n */:host{display:inline-block}";
-
-/**
- * HTMLMgButtonElement type guard
- * @param element - element to check
- * @returns return true if type is HTMLMgButtonElement
- */
-const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
-const MgTooltip = /*@__PURE__*/ proxyCustomElement(class MgTooltip extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Sets an `id` attribute.
-         * Needed by the input for accessibility `aria-decribedby`.
-         */
-        this.identifier = createID('mg-tooltip');
-        /**
-         * Tooltip placement
-         */
-        this.placement = 'bottom';
-        /**
-         * Display tooltip
-         */
-        this.display = false;
-        /**
-         * Disable tooltip
-         */
-        this.disabled = false;
-        /**
-         * Show tooltip
-         */
-        this.show = () => {
-            // Make the tooltip visible
-            this.mgTooltipContent.dataset.show = '';
-            // Enable the event listeners
-            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-            // hide when click outside on nextTick to prevent event to trigger after creation
-            nextTick(() => {
-                this.windows.forEach((localWindow) => {
-                    localWindow.addEventListener('click', this.handleClickOutside, false);
-                    localWindow.addEventListener('keydown', this.handlePressEscape, false);
-                });
-            });
-        };
-        /**
-         * Hide tooltip
-         */
-        this.hide = () => {
-            // Hide the tooltip
-            this.mgTooltipContent.removeAttribute('data-show');
-            // Disable the event listeners
-            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-            // Remove event listener
-            this.windows.forEach((localWindow) => {
-                localWindow.removeEventListener('click', this.handleClickOutside, false);
-                localWindow.removeEventListener('keyboard', this.handlePressEscape, false);
-            });
-        };
-        /**
-         * Check if clicked outside of component and hide tooltip
-         * @param event - mouse event
-         */
-        this.handleClickOutside = (event) => {
-            if (event.target.closest('mg-tooltip') !== this.element)
-                this.setDisplay(false);
-        };
-        /**
-         * Check if 'Escape' key is pressed of component and hide tooltip
-         * @param event - keyboard event
-         */
-        this.handlePressEscape = (event) => {
-            if (event.code === 'Escape') {
-                this.setDisplay(false);
-                this.resetGuard();
-            }
-        };
-        /**
-         * Method to set display prop
-         * @param newValue - display prop new value
-         * @param condition - additionnal condition to apply display prop newValue
-         */
-        this.setDisplay = (newValue, condition = true) => {
-            if (!this.disabled && condition)
-                this.display = newValue;
-        };
-        /**
-         * Action for tooltip element and tooltiped element mouse listener
-         * @param elementGuard -  tooltip element guard
-         * @param eventName - event name
-         * @param conditionalGuard - guard condition
-         */
-        this.tooltipMouseListenerAction = (elementGuard, eventName, conditionalGuard) => {
-            // active FOCUS guard cancel process
-            if ([Guard.FOCUS, Guard.DISABLE_ON_CLICK].includes(this.guard)) {
-                return;
-            }
-            // Update guard by element guard
-            this.guard = elementGuard;
-            if (eventName !== 'mouseenter') {
-                // process action in the next event loop macro task
-                setTimeout(() => {
-                    this.setDisplay(false, this.guard !== conditionalGuard);
-                    this.resetGuard();
-                }, 100);
-            }
-            else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
-                this.setDisplay(true);
-            }
-        };
-        /**
-         * Method to reset guard value
-         */
-        this.resetGuard = () => {
-            this.guard = undefined;
-        };
-        /**
-         * Update slot content when it is a mg-button
-         * @param mgButton - slotted mg-button
-         */
-        this.setMgButtonWrapper = (mgButton) => {
-            const buttonWrapperClass = 'mg-c-tooltip__mg-button-wrapper';
-            const hasButtonWrapper = mgButton.parentElement.classList.contains(buttonWrapperClass);
-            // For disabled mg-button, we need to wrap it in a new element
-            // We bind handlers to this new element to keep listener features as workaround to disabled mg-button `pointer-events: none`
-            // AND to prevent multiple nested wrappers from rendering when a new render is called with a disabled mg-button
-            if (mgButton.disabled && !hasButtonWrapper) {
-                // wrap mg-button in a div
-                const div = document.createElement('div');
-                div.classList.add(buttonWrapperClass);
-                mgButton.parentNode.insertBefore(div, mgButton);
-                div.appendChild(mgButton);
-                // update tooltipElement
-                this.setTooltipedElement(div);
-            }
-            else if (!mgButton.disabled && hasButtonWrapper) {
-                this.element.firstElementChild.replaceWith(mgButton);
-                // update tooltipElement
-                this.setTooltipedElement(mgButton);
-            }
-        };
-        /**
-         * Set popper instance
-         * @param strategy - popper strategy to apply on instance
-         */
-        this.setPopper = (strategy) => {
-            // Create popperjs tooltip
-            this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
-                placement: this.placement,
-                strategy,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 8],
-                        },
-                    },
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['auto'],
-                        },
-                    },
-                ],
-            });
-        };
-        /**
-         * Define selected element to become tooltip selector and init listeners
-         * @param element - tooltiped element
-         */
-        this.setTooltipedElement = (element) => {
-            this.tooltipedElement = element;
-            // Manage tooltipedElement focus events
-            this.tooltipedElement.addEventListener('focus', () => {
-                this.guard = Guard.FOCUS;
-                this.setDisplay(true);
-            });
-            // as `click` event is the composition of `mousedown` and `mouseup` event,
-            // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
-            // we reset the guard on `mouseup` event to unlock tooltip
-            this.tooltipedElement.addEventListener('mouseup', () => {
-                this.resetGuard();
-            });
-            this.tooltipedElement.addEventListener('blur', () => {
-                this.resetGuard();
-                this.setDisplay(false);
-            });
-            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            this.tooltipedElement.addEventListener('mouseenter', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
-            this.tooltipedElement.addEventListener('mouseleave', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIP_ELEMENT);
-            });
-        };
-        /**
-         * Set button mutation observer
-         * @param mgButton - mg-button to observe
-         */
-        this.setMgButtonMutationObserver = (mgButton) => {
-            new MutationObserver(mutationList => {
-                // stop process when none of mutations attributed is disabled
-                if (!mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName)))
-                    return;
-                // set guard when one of mutations is for a disabled with disabled-on-click
-                if (mutationList.some((mutation) => mutation.target.disabled && mutation.target.disableOnClick)) {
-                    this.guard = Guard.DISABLE_ON_CLICK;
-                }
-                // when the disabled-on-click guard is running we stop process
-                if (this.guard === Guard.DISABLE_ON_CLICK)
-                    return;
-                // update button wrapper
-                this.setMgButtonWrapper(mgButton);
-                // Since Firefox doesn't trigger a "blur" event when the "disabled" attribute is added or removed from a button
-                // we have to manually unlock the guard because the "blur" handler of the tooltipedElement won't do it.
-                this.resetGuard();
-                // update popper instance
-                this.popper.update();
-            }).observe(mgButton, { attributes: true });
-        };
-        /**
-         * Set tooltiped element aria-describedby
-         * @param element - element to update
-         */
-        this.setAriaDescribedby = (element) => {
-            // Set aria-describedby
-            if (!element.hasAttribute('aria-describedby')) {
-                this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
-            }
-            else {
-                // We ensure to have uniq ids
-                element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
-            }
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-        // use renderTooltipContent to update tooltip-content id
-        this.renderTooltipContent();
-    }
-    watchMessage(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        }
-        if (this.mgTooltipContent !== undefined)
-            this.mgTooltipContent.message = newValue;
-    }
-    watchDisplay(newValue) {
-        if (newValue) {
-            this.show();
-        }
-        else {
-            this.hide();
-        }
-    }
-    watchDisabled(newValue) {
-        if (this.hasCustomTabIndex) {
-            if (newValue)
-                this.tooltipedElement.removeAttribute('tabindex');
-            else if (!this.tooltipedElement.hasAttribute('tabindex'))
-                this.tooltipedElement.setAttribute('tabindex', '0');
-        }
-    }
-    /**
-     * Render tooltip content element and init listeners
-     */
-    renderTooltipContent() {
-        if (this.mgTooltipContent !== undefined) {
-            this.mgTooltipContent.setAttribute('id', this.identifier);
-        }
-        else {
-            this.mgTooltipContent = document.createElement('mg-tooltip-content');
-            this.mgTooltipContent.setAttribute('slot', 'content');
-            this.mgTooltipContent.setAttribute('id', this.identifier);
-            const arrow = document.createElement('div');
-            arrow.setAttribute('slot', 'arrow');
-            arrow.dataset.popperArrow = '';
-            this.mgTooltipContent.appendChild(arrow);
-            // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-            this.mgTooltipContent.addEventListener('mouseenter', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseenter', Guard.HOVER_TOOLTIPED_ELEMENT);
-            });
-            this.mgTooltipContent.addEventListener('mouseleave', () => {
-                this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, 'mouseleave', Guard.HOVER_TOOLTIPED_ELEMENT);
-            });
-            // append tooltip element to component
-            this.element.appendChild(this.mgTooltipContent);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * set variables
-     */
-    componentWillLoad() {
-        // Get windows to attach events
-        this.windows = getWindows(window);
-        // Get tooltip element
-        this.renderTooltipContent();
-        //validate properties
-        this.watchDisabled(this.disabled);
-        this.watchMessage(this.message);
-        this.watchIdentifier(this.identifier);
-    }
-    /**
-     * Get slotted element
-     * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
-     * We need to attach the focused element to the tooltip (aria-describedby)
-     */
-    componentDidLoad() {
-        var _a;
-        // get slotted element wich is not the tooltip
-        const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
-        // Get interactive element
-        const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
-        this.setTooltipedElement(interactiveElement || slotElement);
-        // Check if slotted element is a disabled mg-button
-        // In this case we wrap the mg-button into a div to enable the tooltip
-        if (isButton(slotElement)) {
-            this.setMgButtonMutationObserver(slotElement);
-            this.setMgButtonWrapper(slotElement);
-        }
-        // Add tabindex to slotted element if we can't find any interactive element
-        if (!this.disabled && [undefined, null].includes(interactiveElement)) {
-            this.hasCustomTabIndex = true;
-            slotElement.tabIndex = 0;
-            // Add role on non-interactive element to work with "aria-describedby" for screen readers
-            slotElement.setAttribute('role', 'button');
-        }
-        // apply a11y aria
-        this.setAriaDescribedby(slotElement);
-        // set Tooltip
-        this.setPopper(this.element.closest('mg-popover') !== null ? 'absolute' : 'fixed');
-        // add document keyboard handler
-        document.addEventListener('keydown', this.handlePressEscape);
-        // check props
-        this.watchDisplay(this.display);
-    }
-    /**
-     * update popper position after props change on component did update hook to benefit from render ended
-     */
-    componentDidUpdate() {
-        this.popper.update();
-    }
-    /**
-     * remove listeners
-     */
-    disconnectedCallback() {
-        var _a;
-        document.removeEventListener('keydown', this.handlePressEscape);
-        (_a = this.windows) === null || _a === void 0 ? void 0 : _a.forEach((localWindow) => {
-            localWindow.removeEventListener('click', this.handleClickOutside, false);
-            localWindow.removeEventListener('keydown', this.handlePressEscape, false);
-        });
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '1f5ee653d58185c2ab15b213ad323adaabca605f' }, h("slot", { key: 'd0c615db4429e84a295d01269c268f9239da85c5' }), h("slot", { key: 'e6c6deb2f94ab883da2a62fa53cb299f5ec83a06', name: "content" })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "message": ["watchMessage"],
-        "display": ["watchDisplay"],
-        "disabled": ["watchDisabled"]
-    }; }
-    static get style() { return mgTooltipCss; }
-}, [257, "mg-tooltip", {
-        "identifier": [1],
-        "message": [1],
-        "placement": [1],
-        "display": [1028],
-        "disabled": [4]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "message": ["watchMessage"],
-        "display": ["watchDisplay"],
-        "disabled": ["watchDisabled"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgTooltip);
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgTooltip as M, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as s,h as e,Host as h}from"@stencil/core/internal/client";import{c as o,n as a,a as n,t as d,i as c,g as l,l as r}from"./index2.js";import{d as m}from"./mg-tooltip-content2.js";import{c as p}from"./popper.js";const b={FOCUS:"focus",HOVER_TOOLTIP_ELEMENT:"hoverTooltip",HOVER_TOOLTIPED_ELEMENT:"hoverTooltiped",DISABLE_ON_CLICK:"disableOnClick"},u=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.identifier=o("mg-tooltip"),this.placement="bottom",this.display=!1,this.disabled=!1,this.show=()=>{this.mgTooltipContent.dataset.show="",this.popper.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:!0}]}))),a((()=>{this.windows.forEach((t=>{t.addEventListener("click",this.handleClickOutside,!1),t.addEventListener("keydown",this.handlePressEscape,!1)}))}))},this.hide=()=>{this.mgTooltipContent.removeAttribute("data-show"),this.popper.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:!1}]}))),this.windows.forEach((t=>{t.removeEventListener("click",this.handleClickOutside,!1),t.removeEventListener("keyboard",this.handlePressEscape,!1)}))},this.handleClickOutside=t=>{t.target.closest("mg-tooltip")!==this.element&&this.setDisplay(!1)},this.handlePressEscape=t=>{"Escape"===t.code&&(this.setDisplay(!1),this.resetGuard())},this.setDisplay=(t,i=!0)=>{!this.disabled&&i&&(this.display=t)},this.tooltipMouseListenerAction=(t,i,s)=>{[b.FOCUS,b.DISABLE_ON_CLICK].includes(this.guard)||(this.guard=t,"mouseenter"!==i?setTimeout((()=>{this.setDisplay(!1,this.guard!==s),this.resetGuard()}),100):this.guard===b.HOVER_TOOLTIPED_ELEMENT&&this.setDisplay(!0))},this.resetGuard=()=>{this.guard=void 0},this.setMgButtonWrapper=t=>{const i="mg-c-tooltip__mg-button-wrapper",s=t.parentElement.classList.contains(i);if(t.disabled&&!s){const s=document.createElement("div");s.classList.add(i),t.parentNode.insertBefore(s,t),s.appendChild(t),this.setTooltipedElement(s)}else!t.disabled&&s&&(this.element.firstElementChild.replaceWith(t),this.setTooltipedElement(t))},this.setPopper=t=>{this.popper=p(this.tooltipedElement,this.mgTooltipContent,{placement:this.placement,strategy:t,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"flip",options:{fallbackPlacements:["auto"]}}]})},this.setTooltipedElement=t=>{this.tooltipedElement=t,this.tooltipedElement.addEventListener("focus",(()=>{this.guard=b.FOCUS,this.setDisplay(!0)})),this.tooltipedElement.addEventListener("mouseup",(()=>{this.resetGuard()})),this.tooltipedElement.addEventListener("blur",(()=>{this.resetGuard(),this.setDisplay(!1)})),this.tooltipedElement.addEventListener("mouseenter",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIPED_ELEMENT,"mouseenter",b.HOVER_TOOLTIP_ELEMENT)})),this.tooltipedElement.addEventListener("mouseleave",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIPED_ELEMENT,"mouseleave",b.HOVER_TOOLTIP_ELEMENT)}))},this.setMgButtonMutationObserver=t=>{new MutationObserver((i=>{i.some((t=>["aria-disabled","disabled"].includes(t.attributeName)))&&(i.some((t=>t.target.disabled&&t.target.disableOnClick))&&(this.guard=b.DISABLE_ON_CLICK),this.guard!==b.DISABLE_ON_CLICK&&(this.setMgButtonWrapper(t),this.resetGuard(),this.popper.update()))})).observe(t,{attributes:!0})},this.setAriaDescribedby=t=>{t.hasAttribute("aria-describedby")?t.setAttribute("aria-describedby",`${[...new Set([...t.getAttribute("aria-describedby").split(" "),this.identifier])].join(" ")}`):this.tooltipedElement.setAttribute("aria-describedby",this.identifier)}}watchIdentifier(t){if(!n(t))throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${d(t)}.`);this.renderTooltipContent()}watchMessage(t){if(!c(t))throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${d(t)}.`);void 0!==this.mgTooltipContent&&(this.mgTooltipContent.message=t)}watchDisplay(t){t?this.show():this.hide()}watchDisabled(t){this.hasCustomTabIndex&&(t?this.tooltipedElement.removeAttribute("tabindex"):this.tooltipedElement.hasAttribute("tabindex")||this.tooltipedElement.setAttribute("tabindex","0"))}renderTooltipContent(){if(void 0!==this.mgTooltipContent)this.mgTooltipContent.setAttribute("id",this.identifier);else{this.mgTooltipContent=document.createElement("mg-tooltip-content"),this.mgTooltipContent.setAttribute("slot","content"),this.mgTooltipContent.setAttribute("id",this.identifier);const t=document.createElement("div");t.setAttribute("slot","arrow"),t.dataset.popperArrow="",this.mgTooltipContent.appendChild(t),this.mgTooltipContent.addEventListener("mouseenter",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIP_ELEMENT,"mouseenter",b.HOVER_TOOLTIPED_ELEMENT)})),this.mgTooltipContent.addEventListener("mouseleave",(()=>{this.tooltipMouseListenerAction(b.HOVER_TOOLTIP_ELEMENT,"mouseleave",b.HOVER_TOOLTIPED_ELEMENT)})),this.element.appendChild(this.mgTooltipContent)}}componentWillLoad(){this.windows=l(window),this.renderTooltipContent(),this.watchDisabled(this.disabled),this.watchMessage(this.message),this.watchIdentifier(this.identifier)}componentDidLoad(){var t;const i=this.element.querySelector(`*:not(#${this.identifier})`),s=i.matches(r)?i:null===(t=i.shadowRoot)||void 0===t?void 0:t.querySelector(r);var e;this.setTooltipedElement(s||i),"object"==typeof(e=i)&&["MG-BUTTON","BUTTON"].includes(e.tagName)&&(this.setMgButtonMutationObserver(i),this.setMgButtonWrapper(i)),!this.disabled&&[void 0,null].includes(s)&&(this.hasCustomTabIndex=!0,i.tabIndex=0,i.setAttribute("role","button")),this.setAriaDescribedby(i),this.setPopper(null!==this.element.closest("mg-popover")?"absolute":"fixed"),document.addEventListener("keydown",this.handlePressEscape),this.watchDisplay(this.display)}componentDidUpdate(){this.popper.update()}disconnectedCallback(){var t;document.removeEventListener("keydown",this.handlePressEscape),null===(t=this.windows)||void 0===t||t.forEach((t=>{t.removeEventListener("click",this.handleClickOutside,!1),t.removeEventListener("keydown",this.handlePressEscape,!1)}))}render(){return e(h,{key:"1f5ee653d58185c2ab15b213ad323adaabca605f"},e("slot",{key:"d0c615db4429e84a295d01269c268f9239da85c5"}),e("slot",{key:"e6c6deb2f94ab883da2a62fa53cb299f5ec83a06",name:"content"}))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],message:[{watchMessage:0}],display:[{watchDisplay:0}],disabled:[{watchDisabled:0}]}}static get style(){return":host{display:inline-block}"}},[257,"mg-tooltip",{identifier:[1],message:[1],placement:[1],display:[1028],disabled:[4]},void 0,{identifier:[{watchIdentifier:0}],message:[{watchMessage:0}],display:[{watchDisplay:0}],disabled:[{watchDisabled:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-tooltip":customElements.get(t(i))||customElements.define(t(i),u);break;case"mg-tooltip-content":customElements.get(t(i))||m()}}))}f();export{u as M,f as d}