@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-tabs2.js

@@ -1,315 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, n as nextTick, a as isValideID, t as toString, i as isValidString, d as allItemsAreString } from './index2.js';
-import { K as Keys } from './events.utils.js';
-import { d as defineCustomElement$2 } from './mg-badge2.js';
-import { d as defineCustomElement$1 } from './mg-icon2.js';
-
-/**
- * Available tabs items status
- */
-const Status = {
-    VISIBLE: 'visible',
-    HIDDEN: 'hidden',
-    DISABLED: 'disabled',
-    ACTIVE: 'active',
-};
-/**
- * List of all possibles sizes
- */
-const sizes = ['medium', 'large'];
-
-const mgTabsCss = "/*!\n * @prop --mg-c-tabs-color: Defines tabs global color, used for bottom line and active tabs. Default value: `--mg-b-color-app`.\n * @prop --mg-c-tabs-color-text: Defines tabs text color. Unset by default, fallback on `--mg-b-color-dark`.\n */.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium{padding:var(--mg-b-size-12) var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-12)}.mg-c-tabs.mg-c-tabs--size-medium .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-medium.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large{padding:var(--mg-b-size-16) var(--mg-b-size-32)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button,.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button ::slotted([slot=metadata]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=label]),.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large ::slotted([slot=metadata]){font-size:var(--mg-b-font-size-h4)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--horizontal{padding-bottom:var(--mg-b-size-16)}.mg-c-tabs.mg-c-tabs--size-large .mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--vertical,.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--size-large.mg-c-tabs__navigation-button--vertical{padding-left:var(--mg-b-size-32)}.mg-c-tabs__navigation-button{display:flex;box-sizing:border-box;align-items:center;border:none;background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-c-tabs-navigation-button-column-gap, var(--mg-b-size-8));cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled),.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled){background-color:color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal{box-shadow:inset 0 calc(-1*var(--mg-b-size-4)) var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical{box-shadow:inset var(--mg-b-size-4) 0 var(--mg-c-tabs-color)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-c-tabs-color), transparent 90%)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}";
-
-/**
- * type TabItem validation function
- * @param tab - tab item
- * @returns tab item type is valid
- */
-const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
-const MgTabs = /*@__PURE__*/ proxyCustomElement(class MgTabs extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.activeTabChange = createEvent(this, "active-tab-change", 7);
-        /************
-         * Internal *
-         ************/
-        // classes
-        this.tabPanel = 'panel';
-        this.buttonTabBaseClass = 'mg-c-tabs__navigation-button';
-        this.startIndex = 1;
-        /**
-         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-         * If not set, it will be created.
-         */
-        this.identifier = createID('mg-tabs');
-        /**
-         * Define tabs size
-         */
-        this.size = 'medium';
-        /**
-         * Component tabs
-         */
-        this.tabs = [];
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-tabs']);
-        /**
-         * Validate that new tab status can be `Status.ACTIVE`
-         * @param tab - tab item
-         * @returns true when tab match condition to get a `Status.ACTIVE`
-         */
-        this.isActivableTab = (tab) => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);
-        /**
-         * Method to know if given tab has the given status
-         * @param tab - item tab key to set to ACTIVE status
-         * @param status - status to valide
-         * @returns status comparaison
-         */
-        this.tabHasStatus = (tab, status) => tab.status === status;
-        /**
-         * Method to get element id from index
-         * @param element - to get id
-         * @param index - to generate id
-         * @returns generated element id
-         */
-        this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
-        /**
-         * Method to get tab item index
-         * @param index - to get
-         * @returns index
-         */
-        this.getTabItemIndex = (index) => index + this.startIndex;
-        /**
-         * Handle click events on tabs
-         * @param event - mouse event
-         */
-        this.handleClick = (event) => {
-            const tabId = event.currentTarget.dataset.index;
-            if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {
-                event.preventDefault();
-            }
-            else {
-                this.activeTab = Number(tabId);
-                this.tabFocus = undefined;
-            }
-        };
-        /**
-         * get navigation button class from given status
-         * @param status - button tab status
-         * @returns button class/selector variant
-         */
-        this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
-        /**
-         * Handle keyboard event on tabs
-         * @param event - mouse event
-         */
-        this.handleKeydown = (event) => {
-            const parent = event.target.parentElement;
-            if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
-                this.tabFocus = Number(event.target.dataset.index);
-                parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
-                // Move right
-                if (event.key === Keys.ARROWRIGHT) {
-                    this.tabFocus++;
-                    // If we're at the end, go to the start
-                    if (this.tabFocus > this.tabs.length)
-                        this.tabFocus = this.startIndex;
-                    // Move left
-                }
-                else if (event.key === Keys.ARROWLEFT) {
-                    this.tabFocus--;
-                    // If we're at the start, move to the end
-                    if (this.tabFocus < this.startIndex)
-                        this.tabFocus = this.tabs.length;
-                }
-                const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
-                // if focus item is ['hidden'] we recursively repeat action
-                if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
-                    parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
-                    // else run focus methods on tabFocus element
-                }
-                else {
-                    parentButtonElement.setAttribute('tabindex', '0');
-                    parentButtonElement.focus();
-                }
-            }
-            else if (event.key === Keys.TAB) {
-                this.resetFocus();
-            }
-        };
-        /**
-         * Reset focus on document click
-         * @param event - mouse event
-         */
-        this.handleDocumentClick = (event) => {
-            if (event.target.closest('mg-tabs') !== this.element)
-                this.resetFocus();
-        };
-        /**
-         * Method to reset focus behavior
-         */
-        this.resetFocus = () => {
-            // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            nextTick(() => {
-                this.tabFocus = undefined;
-                Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
-                    tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
-                });
-            });
-        };
-        /**
-         * Validate slots setting
-         */
-        this.validateSlots = () => {
-            const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
-            if (slots.length !== this.tabs.length)
-                throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
-        };
-    }
-    watchIdentifier(newValue) {
-        if (!isValideID(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateLabel(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateSize(newValue) {
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        this.classCollection.add(`mg-c-tabs--size-${this.size}`);
-    }
-    validateItems(newValue) {
-        // String array
-        if (allItemsAreString(newValue))
-            this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
-        // Object array
-        else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
-            this.tabs = newValue;
-        else
-            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);
-    }
-    validateActiveTab(newValue) {
-        // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
-        // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
-        if (newValue === undefined) {
-            this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
-                ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
-                : this.startIndex;
-        }
-        else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
-            // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
-            this.tabs.forEach((tab, index) => {
-                const isNewActiveTab = index === newValue - this.startIndex;
-                // reset active tabs
-                if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab)
-                    tab.status = Status.VISIBLE;
-                // set active tab from given tab key
-                else if (this.isActivableTab(tab) && isNewActiveTab)
-                    tab.status = Status.ACTIVE;
-            });
-            // emit change active tab key event
-            this.activeTabChange.emit(newValue);
-        }
-        else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${toString(newValue)}.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Check tabs format
-        this.watchIdentifier(this.identifier);
-        this.validateLabel(this.label);
-        this.validateItems(this.items);
-        this.validateActiveTab(this.activeTab);
-        this.validateSize(this.size);
-        this.validateSlots();
-    }
-    /**
-     * add listners
-     */
-    componentDidLoad() {
-        document.addEventListener('click', this.handleDocumentClick, false);
-    }
-    /**
-     * remove listeners
-     */
-    disconnectedCallback() {
-        document.removeEventListener('keydown', this.handleDocumentClick);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: 'ae71d21c9ce3acb07b3adf67bbe25f205d382abc', class: this.classCollection.join() }, h("header", { key: 'cf6cdae863602c956aa450a34e91a6d8b950d8f5', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
-                [`${this.buttonTabBaseClass}`]: true,
-                [`${this.buttonTabBaseClass}--horizontal`]: true,
-                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
-                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
-                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-            }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "label": ["validateLabel"],
-        "size": ["validateSize"],
-        "items": ["validateItems"],
-        "activeTab": ["validateActiveTab"]
-    }; }
-    static get style() { return mgTabsCss; }
-}, [257, "mg-tabs", {
-        "identifier": [1],
-        "label": [1],
-        "size": [1],
-        "items": [16],
-        "activeTab": [1538, "active-tab"],
-        "tabs": [32],
-        "classCollection": [32]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "label": ["validateLabel"],
-        "size": ["validateSize"],
-        "items": ["validateItems"],
-        "activeTab": ["validateActiveTab"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-tabs", "mg-badge", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgTabs);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgTabs as M, Status as S, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as a,HTMLElement as i,createEvent as s,h as e}from"@stencil/core/internal/client";import{c as o,C as n,n as r,a as b,t as c,i as g,d as h}from"./index2.js";import{K as l}from"./events.utils.js";import{d as m}from"./mg-badge2.js";import{d}from"./mg-icon2.js";const v={VISIBLE:"visible",HIDDEN:"hidden",DISABLED:"disabled",ACTIVE:"active"},u=t=>"object"==typeof t&&"string"==typeof t.label,_=a(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.activeTabChange=s(this,"active-tab-change",7),this.tabPanel="panel",this.buttonTabBaseClass="mg-c-tabs__navigation-button",this.startIndex=1,this.identifier=o("mg-tabs"),this.tabs=[],this.classCollection=new n(["mg-c-tabs"]),this.isActivableTab=t=>[void 0,v.ACTIVE,v.VISIBLE].includes(t.status),this.tabHasStatus=(t,a)=>t.status===a,this.getElementId=(t,a)=>`${t}-${this.getTabItemIndex(a)}`,this.getTabItemIndex=t=>t+this.startIndex,this.handleClick=t=>{const a=t.currentTarget.dataset.index;this.isActivableTab(this.tabs[Number(a)-this.startIndex])?(this.activeTab=Number(a),this.tabFocus=void 0):t.preventDefault()},this.getNavigationButtonClass=t=>`${this.buttonTabBaseClass}--${t}`,this.handleKeydown=t=>{const a=t.target.parentElement;if([l.ARROWLEFT,l.ARROWRIGHT].includes(t.key)){this.tabFocus=Number(t.target.dataset.index),a.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute("tabindex","-1"),t.key===l.ARROWRIGHT?(this.tabFocus++,this.tabFocus>this.tabs.length&&(this.tabFocus=this.startIndex)):t.key===l.ARROWLEFT&&(this.tabFocus--,this.tabFocus<this.startIndex&&(this.tabFocus=this.tabs.length));const i=a.querySelector(`[data-index="${this.tabFocus}"]`);this.tabHasStatus(this.tabs[this.tabFocus-1],v.HIDDEN)?i.dispatchEvent(new KeyboardEvent("keydown",{key:t.key,bubbles:!0})):(i.setAttribute("tabindex","0"),i.focus())}else t.key===l.TAB&&this.resetFocus()},this.handleDocumentClick=t=>{t.target.closest("mg-tabs")!==this.element&&this.resetFocus()},this.resetFocus=()=>{r((()=>{this.tabFocus=void 0,Array.from(this.element.shadowRoot.querySelectorAll("[data-index]")).forEach(((t,a)=>{t.setAttribute("tabindex",this.activeTab-this.startIndex!==a?"-1":"0")}))}))},this.validateSlots=()=>{if(Array.from(this.element.children).filter((t=>{var a;return null===(a=t.getAttribute("slot"))||void 0===a?void 0:a.includes("tab_content-")})).length!==this.tabs.length)throw new Error("<mg-tabs> Must have slots counts equal to tabs count.")}}watchIdentifier(t){b(t)||console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${c(t)}.`)}validateLabel(t){if(!g(t))throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${c(t)}.`)}validateItems(t){if(h(t))this.tabs=t.map((t=>({label:t,status:v.VISIBLE})));else{if(!(Array.isArray(t)&&t.length>0&&t.every(u)))throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${c(t)}.`);this.tabs=t}}validateActiveTab(t){if(void 0===t)this.activeTab=this.tabs.some((t=>this.tabHasStatus(t,v.ACTIVE)))?this.getTabItemIndex(this.tabs.findIndex((t=>this.tabHasStatus(t,v.ACTIVE)))):this.startIndex;else{if(!("number"==typeof t&&t>=this.startIndex&&t<=this.tabs.length&&this.isActivableTab(this.tabs[t-this.startIndex])))throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${c(t)}.`);this.tabs.forEach(((a,i)=>{const s=i===t-this.startIndex;this.tabHasStatus(a,v.ACTIVE)&&!s?a.status=v.VISIBLE:this.isActivableTab(a)&&s&&(a.status=v.ACTIVE)})),this.activeTabChange.emit(t)}}componentWillLoad(){this.watchIdentifier(this.identifier),this.validateLabel(this.label),this.validateItems(this.items),this.validateActiveTab(this.activeTab),this.validateSlots()}componentDidLoad(){document.addEventListener("click",this.handleDocumentClick,!1)}disconnectedCallback(){document.removeEventListener("keydown",this.handleDocumentClick)}render(){return e("div",{key:"c971ca94267dd64a173740d9d7a81c0ea00852b9",class:this.classCollection.join()},e("header",{key:"d160fdca50842a310fe2b710f8ffcc6f7cd1bd3d",role:"tablist","aria-label":this.label,class:"mg-c-tabs__header"},this.tabs.map(((t,a)=>e("button",{key:t.label,role:"tab",id:this.getElementId(this.identifier,a),class:{[`${this.buttonTabBaseClass}`]:!0,[`${this.buttonTabBaseClass}--horizontal`]:!0,[`${this.getNavigationButtonClass(v.ACTIVE)}`]:this.tabHasStatus(t,v.ACTIVE),[`${this.getNavigationButtonClass(v.DISABLED)}`]:this.tabHasStatus(t,v.DISABLED),[`${this.getNavigationButtonClass(v.HIDDEN)}`]:this.tabHasStatus(t,v.HIDDEN)},tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,"aria-selected":this.tabHasStatus(t,v.ACTIVE).toString(),"aria-controls":this.getElementId(this.tabPanel,a),"aria-disabled":this.tabHasStatus(t,v.DISABLED),onClick:this.handleClick,onKeyDown:this.handleKeydown,"data-index":this.getTabItemIndex(a)},void 0!==t.icon&&e("mg-icon",{icon:t.icon,size:"small"}),t.label,void 0!==t.badge&&e("mg-badge",{variant:"text-color",value:t.badge.value,label:t.badge.label,outline:"information"===t.badge.role}))))),this.tabs.map(((t,a)=>e("article",{key:t.label,role:"tabpanel",id:this.getElementId(this.tabPanel,a),hidden:!this.tabHasStatus(t,v.ACTIVE),"aria-labelledby":this.getElementId(this.identifier,a),tabindex:this.tabHasStatus(t,v.ACTIVE)?0:-1,class:"mg-c-tabs__content-container"},e("slot",{name:this.getElementId("tab_content",a)})))))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}}static get style(){return'.mg-c-tabs__navigation-button{position:relative;display:flex;height:calc(var(--mg-c-tabs-button-spacing-vertical)*2 + var(--mg-c-tabs-height));box-sizing:border-box;align-items:center;padding:var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal)) var(--mg-c-tabs-button-spacing-vertical) calc(var(--mg-c-tabs-button-margin-horizontal) + var(--mg-c-tabs-button-padding-horizontal));border:none;border-radius:var(--mg-b-size-8);background-color:unset;color:var(--mg-c-tabs-color-text, var(--mg-b-color-dark));column-gap:var(--mg-b-size-8);cursor:pointer;font-family:var(--mg-b-font-family);font-weight:400;line-height:var(--mg-b-line-height);text-decoration:none;white-space:nowrap}.mg-c-tabs__navigation-button::after{position:absolute;background-color:var(--mg-c-tabs-color);content:""}.mg-c-tabs__navigation-button:disabled,.mg-c-tabs__navigation-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-tabs__navigation-button:hover,.mg-c-tabs__navigation-button:focus-visible{z-index:10}.mg-c-tabs__navigation-button:hover:not(.mg-c-tabs__navigation-button--disabled)::before,.mg-c-tabs__navigation-button:focus-visible:not(.mg-c-tabs__navigation-button--disabled)::before{position:absolute;z-index:-1;top:0;left:0;width:stretch;height:var(--mg-c-tabs-height);box-sizing:border-box;border-radius:var(--mg-b-size-8);margin-right:var(--mg-c-tabs-button-margin-horizontal);margin-left:var(--mg-c-tabs-button-margin-horizontal);background-color:color-mix(in srgb, var(--mg-c-tabs-color-text, var(--mg-b-color-dark)), transparent 90%);content:""}.mg-c-tabs__navigation-button,.mg-c-tabs__navigation-button ::slotted([slot=label]),.mg-c-tabs__navigation-button ::slotted([slot=metadata]){font-size:var(--mg-b-font-size)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--horizontal::before{margin:var(--mg-c-tabs-button-spacing-vertical) var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button:not(.mg-c-tabs__navigation-button--disabled).mg-c-tabs__navigation-button--vertical::before{height:100%;margin:0 var(--mg-c-tabs-button-margin-horizontal)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active{color:var(--mg-c-tabs-color);font-weight:600}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--horizontal::after{bottom:0;left:50%;width:calc(100% - var(--mg-b-size-12)*2);height:var(--mg-b-size-4);border-top-left-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateX(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--active.mg-c-tabs__navigation-button--vertical::after{top:50%;left:0;width:var(--mg-b-size-4);height:calc(100% - var(--mg-b-size-8)*2);border-bottom-right-radius:var(--mg-b-size-8);border-top-right-radius:var(--mg-b-size-8);transform:translateY(-50%)}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--hidden{display:none}.mg-c-tabs__header{display:flex;flex-flow:row wrap;border-bottom:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-tabs__content-container:focus-visible{outline:none}.mg-c-tabs__navigation-button-text{flex:0 0 content}.mg-c-tabs__navigation-button.mg-c-tabs__navigation-button--horizontal{--mg-c-tabs-height:var(--mg-b-size-24);--mg-c-tabs-button-spacing-vertical:var(--mg-b-size-8);--mg-c-tabs-button-margin-horizontal:var(--mg-b-size-4);--mg-c-tabs-button-padding-horizontal:var(--mg-b-size-8)}'}},[257,"mg-tabs",{identifier:[1],label:[1],size:[16],items:[16],activeTab:[1538,"active-tab"],tabs:[32],classCollection:[32]},void 0,{identifier:[{watchIdentifier:0}],label:[{validateLabel:0}],items:[{validateItems:0}],activeTab:[{validateActiveTab:0}]}]);function f(){"undefined"!=typeof customElements&&["mg-tabs","mg-badge","mg-icon"].forEach((a=>{switch(a){case"mg-tabs":customElements.get(t(a))||customElements.define(t(a),_);break;case"mg-badge":customElements.get(t(a))||m();break;case"mg-icon":customElements.get(t(a))||d()}}))}f();export{_ as M,v as S,f as d}

package/dist/components/mg-tag.js

@@ -1,133 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList, t as toString, i as isValidString } from './index2.js';
-
-/**
- * List of all possibles variants
- */
-const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
-
-const mgTagCss = "/*!\n * @prop --mg-c-tag-height: Defines the height of the tag. Default value is `--mg-b-size-24`.\n * @prop --mg-c-tag-border-radius: Defines the border radius of the tag. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-tag-font-size: Defines the font size of the tag. Default value is `--mg-b-font-size-small`.\n */:host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-c-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-c-tag-height) - 2*var(--mg-b-size-border) - var(--mg-c-tag-font-size)*var(--mg-b-line-height))/2) calc(var(--mg-b-size-8) - var(--mg-b-size-border));border:var(--mg-b-size-border) solid;border-radius:var(--mg-c-tag-border-radius);font-size:var(--mg-c-tag-font-size);font-weight:600;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110);color:var(--mg-b-color-text-on-primary)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--secondary{border-color:var(--mg-b-color-neutral-10);background-color:var(--mg-b-color-neutral-10);color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-10)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:var(--mg-b-color-red-20);background-color:var(--mg-b-color-red-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:var(--mg-b-color-blue-20);background-color:var(--mg-b-color-blue-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:var(--mg-b-color-green-20);background-color:var(--mg-b-color-green-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:var(--mg-b-color-yellow-20);background-color:var(--mg-b-color-yellow-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-warning)}::slotted(mg-icon){align-self:start;margin-right:var(--mg-b-size-4)}::slotted(mg-icon[size=small]){margin-top:calc(var(--mg-b-line-height)*1rem - var(--mg-b-size-12))}slot{display:inline-flex;align-items:center}";
-
-const MgTag$1 = /*@__PURE__*/ proxyCustomElement(class MgTag extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classOutline = 'mg-c-tag--outline';
-        this.classSoft = 'mg-c-tag--soft';
-        /**
-         * Define tag variant
-         */
-        this.variant = 'primary';
-        /**
-         * Define if tag is using outline style
-         */
-        this.outline = false;
-        /**
-         * Define if tag is using soft style
-         */
-        this.soft = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-tag']);
-    }
-    validateVariant(newValue, oldValue) {
-        if (!variants.includes(newValue)) {
-            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        else {
-            if (oldValue !== undefined) {
-                this.classCollection.delete(`mg-c-tag--${oldValue}`);
-            }
-            this.classCollection.add(`mg-c-tag--${newValue}`);
-        }
-    }
-    validateOutline(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classOutline);
-        else
-            this.classCollection.delete(this.classOutline);
-    }
-    validateSoft(newValue) {
-        // usage validation
-        if (newValue && this.outline)
-            throw new Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');
-        // apply class
-        if (newValue)
-            this.classCollection.add(this.classSoft);
-        else
-            this.classCollection.delete(this.classSoft);
-    }
-    /*************
-     * Methods *
-     *************/
-    /**
-     * Validate the given textContent
-     * @param textContent - html element textContent property
-     */
-    validateTextContent(textContent) {
-        if (!isValidString(textContent))
-            throw new Error('<mg-tag> slot must contain a text content.');
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateVariant(this.variant);
-        this.validateOutline(this.outline);
-        this.validateSoft(this.soft);
-        this.validateTextContent(this.element.textContent);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("span", { key: '8edd72c80d7179fdb5c1c37caeaecb54c086df8c', class: this.classCollection.join() }, h("slot", { key: 'e6bf4574a943f83856a6a61cba480d54ff153cb3' })));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "variant": ["validateVariant"],
-        "outline": ["validateOutline"],
-        "soft": ["validateSoft"]
-    }; }
-    static get style() { return mgTagCss; }
-}, [257, "mg-tag", {
-        "variant": [1],
-        "outline": [4],
-        "soft": [4],
-        "classCollection": [32]
-    }, undefined, {
-        "variant": ["validateVariant"],
-        "outline": ["validateOutline"],
-        "soft": ["validateSoft"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-tag"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-tag":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgTag$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgTag = MgTag$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgTag, defineCustomElement };
+import{transformTag as o,proxyCustomElement as r,HTMLElement as g,h as a}from"@stencil/core/internal/client";import{C as t,t as c,i as e}from"./index2.js";const l=["primary","secondary","success","warning","danger","info"],n=r(class extends g{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.classOutline="mg-c-tag--outline",this.classSoft="mg-c-tag--soft",this.variant="primary",this.outline=!1,this.soft=!1,this.classCollection=new t(["mg-c-tag"])}validateVariant(o,r){if(!l.includes(o))throw Error(`<mg-tag> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(o)}.`);void 0!==r&&this.classCollection.delete("mg-c-tag--"+r),this.classCollection.add("mg-c-tag--"+o)}validateOutline(o){o?this.classCollection.add(this.classOutline):this.classCollection.delete(this.classOutline)}validateSoft(o){if(o&&this.outline)throw Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');o?this.classCollection.add(this.classSoft):this.classCollection.delete(this.classSoft)}validateTextContent(o){if(!e(o))throw Error("<mg-tag> slot must contain a text content.")}componentWillLoad(){this.validateVariant(this.variant),this.validateOutline(this.outline),this.validateSoft(this.soft),this.validateTextContent(this.element.textContent)}render(){return a("span",{key:"3604851191691e002f8f7a701e37abe0059238e3",class:this.classCollection.join()},a("slot",{key:"c51e18e61908772878f380d1ae798e5e5f43ca02"}))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],outline:[{validateOutline:0}],soft:[{validateSoft:0}]}}static get style(){return":host{display:inline-block}.mg-c-tag{display:inline-flex;min-height:var(--mg-c-tag-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-c-tag-height) - 2*var(--mg-b-size-border) - var(--mg-c-tag-font-size)*var(--mg-b-line-height))/2) calc(var(--mg-b-size-8) - var(--mg-b-size-border));border:var(--mg-b-size-border) solid;border-radius:var(--mg-c-tag-border-radius);font-size:var(--mg-c-tag-font-size);font-weight:600;vertical-align:middle}.mg-c-tag.mg-c-tag--primary{border-color:var(--mg-b-color-neutral-110);background-color:var(--mg-b-color-neutral-110);color:var(--mg-b-color-text-on-primary)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--primary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-neutral-110)}.mg-c-tag.mg-c-tag--secondary{border-color:var(--mg-b-color-neutral-10);background-color:var(--mg-b-color-neutral-10);color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-neutral-10)}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft{border-color:var(--mg-b-color-neutral-20);background-color:var(--mg-b-color-neutral-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--secondary.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-text-on-secondary)}.mg-c-tag.mg-c-tag--danger{border-color:var(--mg-b-color-danger);background-color:var(--mg-b-color-danger);color:var(--mg-b-color-text-on-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft{border-color:var(--mg-b-color-red-20);background-color:var(--mg-b-color-red-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--danger.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-danger)}.mg-c-tag.mg-c-tag--info{border-color:var(--mg-b-color-info);background-color:var(--mg-b-color-info);color:var(--mg-b-color-text-on-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft{border-color:var(--mg-b-color-blue-20);background-color:var(--mg-b-color-blue-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--info.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-info)}.mg-c-tag.mg-c-tag--success{border-color:var(--mg-b-color-success);background-color:var(--mg-b-color-success);color:var(--mg-b-color-text-on-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft{border-color:var(--mg-b-color-green-20);background-color:var(--mg-b-color-green-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--success.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-success)}.mg-c-tag.mg-c-tag--warning{border-color:var(--mg-b-color-warning);background-color:var(--mg-b-color-warning);color:var(--mg-b-color-text-on-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft{border-color:var(--mg-b-color-yellow-20);background-color:var(--mg-b-color-yellow-20);color:var(--mg-b-color-dark);font-weight:400}.mg-c-tag.mg-c-tag--warning.mg-c-tag--soft ::slotted(mg-icon){color:var(--mg-b-color-warning)}::slotted(mg-icon){align-self:start;margin-right:var(--mg-b-size-4)}::slotted(mg-icon[size=small]){margin-top:calc(var(--mg-b-line-height)*1rem - var(--mg-b-size-12))}slot{display:inline-flex;align-items:center}"}},[257,"mg-tag",{variant:[1],outline:[4],soft:[4],classCollection:[32]},void 0,{variant:[{validateVariant:0}],outline:[{validateOutline:0}],soft:[{validateSoft:0}]}]);function m(){"undefined"!=typeof customElements&&["mg-tag"].forEach((r=>{"mg-tag"===r&&(customElements.get(o(r))||customElements.define(o(r),n))}))}m();const i=n,s=m;export{i as MgTag,s as defineCustomElement}

package/dist/components/mg-tooltip-content.js

@@ -1,6 +1 @@
-import { M as MgTooltipContent$1, d as defineCustomElement$1 } from './mg-tooltip-content2.js';
-
-const MgTooltipContent = MgTooltipContent$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgTooltipContent, defineCustomElement };
+import{M as o,d as t}from"./mg-tooltip-content2.js";const s=o,m=t;export{s as MgTooltipContent,m as defineCustomElement}

package/dist/components/mg-tooltip-content2.js

@@ -1,42 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const mgTooltipContentCss = ":host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:\"\";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}";
-
-const MgTooltipContent = /*@__PURE__*/ proxyCustomElement(class MgTooltipContent extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h(Host, { key: '2221de3ca0ef7c9d6e46e24b19c69007fababf81', role: "tooltip" }, h("span", { key: '9e14f7f5b3f5e5060ed9f42e8d7259b17575168e', innerHTML: this.message, class: "mg-tooltip-content__message" }), h("slot", { key: 'bc083567d77e8f4ffccee98b96036ba8ac494fb6', name: "arrow" })));
-    }
-    static get style() { return mgTooltipContentCss; }
-}, [257, "mg-tooltip-content", {
-        "message": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgTooltipContent);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgTooltipContent as M, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as o,HTMLElement as e,h as a,Host as r}from"@stencil/core/internal/client";const s=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){return a(r,{key:"efe7a2b2622713929caf9a2e114e7a1267643f5e",role:"tooltip"},a("span",{key:"00f0066cfa058e55a88533f8b6daaa8ab283b29c",innerHTML:this.message,class:"mg-tooltip-content__message"}),a("slot",{key:"fd952c4db7b77b54591bf2c58012096579de45c2",name:"arrow"}))}static get style(){return':host{z-index:1000;display:none;max-width:var(--mg-b-size-floating-element-max-width);box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-c-tooltip-border-radius);background-color:var(--mg-c-tooltip-color-background);color:var(--mg-c-tooltip-color-text);font-family:var(--mg-b-font-family);font-size:var(--mg-b-font-size);font-weight:400;text-align:start}:host([data-show]){display:block}::slotted([slot=arrow]){visibility:hidden}::slotted([slot=arrow])::before{content:"";transform:rotate(45deg);visibility:visible}::slotted([slot=arrow]),::slotted([slot=arrow])::before{position:absolute;z-index:9999;width:var(--mg-b-size-8);height:var(--mg-b-size-8);background-color:var(--mg-c-tooltip-color-background)}:host([data-popper-placement^=top])>::slotted([slot=arrow]){bottom:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=bottom])>::slotted([slot=arrow]){top:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=left])>::slotted([slot=arrow]){right:calc(-1*var(--mg-b-size-4))}:host([data-popper-placement^=right])>::slotted([slot=arrow]){left:calc(-1*var(--mg-b-size-4))}'}},[257,"mg-tooltip-content",{message:[1]}]);function i(){"undefined"!=typeof customElements&&["mg-tooltip-content"].forEach((o=>{"mg-tooltip-content"===o&&(customElements.get(t(o))||customElements.define(t(o),s))}))}i();export{s as M,i as d}

package/dist/components/mg-tooltip.js

@@ -1,6 +1 @@
-import { M as MgTooltip$1, d as defineCustomElement$1 } from './mg-tooltip2.js';
-
-const MgTooltip = MgTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgTooltip, defineCustomElement };
+import{M as o,d as t}from"./mg-tooltip2.js";const s=o,m=t;export{s as MgTooltip,m as defineCustomElement}