@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-action-more.js

@@ -1,254 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createID, t as toString } from './index2.js';
-import { d as defineCustomElement$4, a as directions, S as Status } from './mg-menu-item2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$b } from './mg-badge2.js';
-import { d as defineCustomElement$a } from './mg-button2.js';
-import { d as defineCustomElement$9 } from './mg-card2.js';
-import { d as defineCustomElement$8 } from './mg-divider2.js';
-import { d as defineCustomElement$7 } from './mg-icon2.js';
-import { b as defineCustomElement$5, d as defineCustomElement$6 } from './mg-item-more2.js';
-import { d as defineCustomElement$3 } from './mg-popover2.js';
-import { d as defineCustomElement$2 } from './mg-popover-content2.js';
-
-const mgActionMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-padding-vertical:var(--mg-b-size-8);--mg-c-popover-padding-horizontal:0;--mg-c-popover-max-width:unset}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:var(--mg-b-size-4)}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}";
-
-/**
- * MgActionMore['items'] type guard
- * @param prop - commponent items prop
- * @returns return true if type is valid
- */
-const isMgActionMoreItems = (prop) => {
-    const items = prop;
-    return (typeof items === 'object' &&
-        items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item)));
-};
-/**
- * MgActionMoreDividerType type guard
- * @param item - component item
- * @returns return true if type is valid
- */
-const isMgActionMoreDivider = (item) => typeof item === 'object' && item.isDivider;
-/**
- * MgActionMore['button'] type guard
- * @param prop - commponent button prop
- * @returns return true if type is valid
- */
-const isMgActionMoreButton = (prop) => {
-    const button = prop;
-    return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';
-};
-/**
- * MgActionMore['icon'] type guard
- * @param prop - commponent icon prop
- * @returns return true if type is valid
- */
-const isMgActionMoreIcon = (prop) => {
-    const icon = prop;
-    return typeof icon === 'object' && typeof icon.icon === 'string';
-};
-const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-action-more';
-        this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = createID(this.name);
-        /**
-         * Define button properties
-         */
-        this.button = { variant: 'flat', isIcon: true };
-        /**
-         * Define if chevron is display
-         */
-        this.displayChevron = false;
-        /**
-         * Menu expanded state
-         */
-        this.expanded = false;
-        /************
-         * Methods *
-         ***********/
-        /**
-         * Toggle expanded props
-         */
-        this.toggleExpanded = () => {
-            this.expanded = !this.expanded;
-        };
-        /**
-         * Handle popover display change value
-         * @param event - display change updated value
-         */
-        this.handleDisplayChange = (event) => {
-            this.expanded = event.detail;
-        };
-        /**
-         * Button click handler
-         */
-        this.handleButton = () => {
-            this.toggleExpanded();
-        };
-        /**
-         * Item click handler
-         * @param event - click event
-         * @param customHandler - item['mouseEventHandler']
-         */
-        this.handleItemClick = (event, customHandler) => {
-            this.expanded = false;
-            customHandler(event);
-        };
-    }
-    validateItems(newValue) {
-        if (!isMgActionMoreItems(newValue)) {
-            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`);
-        }
-        else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
-            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateIcon(newValue) {
-        if (newValue && !isMgActionMoreIcon(newValue)) {
-            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${toString(newValue)}.`);
-        }
-        else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
-            this.icon = { icon: 'ellipsis' };
-        }
-    }
-    validateButton(newValue) {
-        if (newValue && !isMgActionMoreButton(newValue)) {
-            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateDisplayChevron(newValue) {
-        if (newValue && this.button.isIcon === true) {
-            throw new Error(`<${this.name}> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Validate props
-     */
-    componentWillLoad() {
-        this.messages = initLocales(this.element).messages.actionMore;
-        this.validateItems(this.items);
-        this.validateButton(this.button);
-        this.validateIcon(this.icon);
-        this.validateDisplayChevron(this.displayChevron);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        const buttonLabel = this.button.label || this.messages.label;
-        const buttonContent = [buttonLabel];
-        if (!this.button.isIcon && this.displayChevron) {
-            buttonContent.push(h("span", { class: {
-                    [`${this.classBase}__chevron`]: true,
-                    [`${this.classBase}__chevron--rotate`]: this.expanded === true,
-                } }, h("mg-icon", { icon: "chevron-down" })));
-        }
-        return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
-            var _a, _b;
-            return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
-        })))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "items": ["validateItems"],
-        "icon": ["validateIcon"],
-        "button": ["validateButton"],
-        "displayChevron": ["validateDisplayChevron"]
-    }; }
-    static get style() { return mgActionMoreCss; }
-}, [257, "mg-action-more", {
-        "items": [16],
-        "icon": [1040],
-        "button": [16],
-        "displayChevron": [4, "display-chevron"],
-        "expanded": [32]
-    }, undefined, {
-        "items": ["validateItems"],
-        "icon": ["validateIcon"],
-        "button": ["validateButton"],
-        "displayChevron": ["validateDisplayChevron"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-action-more", "mg-badge", "mg-button", "mg-card", "mg-divider", "mg-icon", "mg-item-more", "mg-menu", "mg-menu-item", "mg-popover", "mg-popover-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-action-more":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgActionMore$1);
-            }
-            break;
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "mg-divider":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-item-more":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-popover-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgActionMore = MgActionMore$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgActionMore, defineCustomElement };
+import{transformTag as t,proxyCustomElement as e,HTMLElement as i,h as o,Host as s}from"@stencil/core/internal/client";import{c as a,t as r}from"./index2.js";import{d as n,a as m,S as c}from"./mg-menu-item2.js";import{i as d}from"./index3.js";import{d as p}from"./mg-badge2.js";import{d as h}from"./mg-button2.js";import{d as l}from"./mg-card2.js";import{d as g}from"./mg-divider2.js";import{d as v}from"./mg-icon2.js";import{b as u,d as b}from"./mg-item-more2.js";import{d as f}from"./mg-popover2.js";import{d as y}from"./mg-popover-content2.js";const k=t=>"object"==typeof t&&t.every((t=>"object"==typeof t&&"string"==typeof t.label&&"function"==typeof t.mouseEventHandler||E(t))),E=t=>"object"==typeof t&&t.isDivider,j=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.name="mg-action-more",this.classBase="mg-c-action-more",this.mgPopoverIdentifier=a(this.name),this.button={variant:"flat",isIcon:!0},this.displayChevron=!1,this.expanded=!1,this.toggleExpanded=()=>{this.expanded=!this.expanded},this.handleDisplayChange=t=>{this.expanded=t.detail},this.handleButton=()=>{this.toggleExpanded()},this.handleItemClick=(t,e)=>{this.expanded=!1,e(t)}}validateItems(t){if(!k(t))throw Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${r(t)}.`);if(k(t)&&t.length>0&&(E(t[0])||E(t[t.length-1])))throw Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${r(t)}.`)}validateIcon(t){if(t&&!(t=>"object"==typeof t&&"string"==typeof t.icon)(t))throw Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${r(t)}.`);void 0===(null==t?void 0:t.icon)&&this.button.isIcon&&(this.icon={icon:"ellipsis"})}validateButton(t){if(t&&!(t=>"object"==typeof t&&"string"==typeof t.variant&&"boolean"==typeof t.isIcon)(t))throw Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${r(t)}.`)}validateDisplayChevron(t){if(t&&!0===this.button.isIcon)throw Error(`<${this.name}> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`)}componentWillLoad(){this.messages=d(this.element).messages.actionMore,this.validateItems(this.items),this.validateButton(this.button),this.validateIcon(this.icon),this.validateDisplayChevron(this.displayChevron)}render(){const t=this.button.label||this.messages.label,e=[t];return!this.button.isIcon&&this.displayChevron&&e.push(o("span",{class:{[this.classBase+"__chevron"]:!0,[this.classBase+"__chevron--rotate"]:!0===this.expanded}},o("mg-icon",{icon:"chevron-down"}))),o(s,{key:"bef7d0e0c5a991f321ca930d65fa458873fc7564","data-mg-popover-guard":this.mgPopoverIdentifier},o("span",{key:"4e47d1513749cc1ac15ef8febd2fb914e362bbee",class:this.classBase},o("mg-popover",{key:"ab6dfc93422f03b49a78d2896196aa6901841aef",identifier:this.mgPopoverIdentifier,display:this.expanded,"onDisplay-change":this.handleDisplayChange},o("mg-button",{key:"921f17c4ede5f1783dc336429539b0b082902fdd",variant:this.button.variant,isIcon:this.button.isIcon,disabled:this.button.disabled,type:"button",label:t,onClick:this.handleButton},this.icon&&o("mg-icon",Object.assign({key:"19bf9e015cbd82d8dffc62269de735607ab4f2bb"},this.icon)),!this.button.isIcon&&e),o("div",{key:"56a43a5adebd31264742c0ef8905ccb0bd8fb581",slot:"content"},o("mg-menu",{key:"70520957ac07a3190ef753ee435996af96dbc5b5",direction:m.VERTICAL,label:this.messages.label},this.items.map((t=>{var e,i;return E(t)?o("mg-divider",{class:"mg-c-action-more__divider",key:"divider","full-width":!0}):o("mg-menu-item",{key:t.label,status:t.status||c.VISIBLE,target:t.target,href:t.href,onClick:e=>this.handleItemClick(e,t.mouseEventHandler)},(null===(e=t.icon)||void 0===e?void 0:e.icon)&&o("mg-icon",{icon:t.icon.icon,variant:t.icon.variant,variantStyle:t.icon.variantStyle,slot:"image"}),o("span",{slot:"label"},t.label),(null===(i=t.badge)||void 0===i?void 0:i.label)&&o("mg-badge",{label:t.badge.label,value:t.badge.value,slot:"information",variant:"text-color"}))})))))))}get element(){return this}static get watchers(){return{items:[{validateItems:0}],icon:[{validateIcon:0}],button:[{validateButton:0}],displayChevron:[{validateDisplayChevron:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{--mg-c-popover-spacing-vertical:var(--mg-b-size-4);--mg-c-popover-spacing-horizontal:0;--mg-c-popover-max-width:unset;--mg-c-popover-overflow:hidden}.mg-c-action-more__divider{--mg-c-divider-spacing-vertical:0.2rem}.mg-c-action-more__chevron{transition:200ms}.mg-c-action-more__chevron--rotate.mg-c-action-more__chevron{transform:rotate(180deg)}.mg-c-action-more mg-menu-item{--mg-c-menu-item-button-margin-horizontal:var(--mg-b-size-4)}"}},[1,"mg-action-more",{items:[16],icon:[1040],button:[16],displayChevron:[4,"display-chevron"],expanded:[32]},void 0,{items:[{validateItems:0}],icon:[{validateIcon:0}],button:[{validateButton:0}],displayChevron:[{validateDisplayChevron:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-action-more","mg-badge","mg-button","mg-card","mg-divider","mg-icon","mg-item-more","mg-menu","mg-menu-item","mg-popover","mg-popover-content"].forEach((e=>{switch(e){case"mg-action-more":customElements.get(t(e))||customElements.define(t(e),j);break;case"mg-badge":customElements.get(t(e))||p();break;case"mg-button":customElements.get(t(e))||h();break;case"mg-card":customElements.get(t(e))||l();break;case"mg-divider":customElements.get(t(e))||g();break;case"mg-icon":customElements.get(t(e))||v();break;case"mg-item-more":customElements.get(t(e))||b();break;case"mg-menu":customElements.get(t(e))||u();break;case"mg-menu-item":customElements.get(t(e))||n();break;case"mg-popover":customElements.get(t(e))||f();break;case"mg-popover-content":customElements.get(t(e))||y()}}))}w();const _=j,I=w;export{_ as MgActionMore,I as defineCustomElement}

package/dist/components/mg-alert.js

@@ -1,224 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h } from '@stencil/core/internal/client';
-import { C as ClassList, t as toString } from './index2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$5 } from './mg-button2.js';
-import { d as defineCustomElement$4 } from './mg-card2.js';
-import { d as defineCustomElement$3 } from './mg-icon2.js';
-import { d as defineCustomElement$2 } from './mg-message2.js';
-
-/**
- * List available variants
- */
-const variants = ['info', 'warning', 'success', 'danger'];
-/**
- * List available variant styles
- */
-const variantStyles = ['bar-left', 'background'];
-
-const mgAlertCss = ".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}";
-
-const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.componentShow = createEvent(this, "component-show", 3);
-        this.componentHide = createEvent(this, "component-hide", 3);
-        this.componentClose = createEvent(this, "component-close", 3);
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classCloseButton = 'mg-c-alert--close-button';
-        // Stored timer setted when hide action is run from setTimeOut
-        this.storedTimer = null;
-        // Manage hover
-        this.isFocused = false;
-        this.isHovered = false;
-        /**
-         * Define variant
-         */
-        this.variant = 'info';
-        /**
-         * Define variant style
-         */
-        this.variantStyle = 'bar-left';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-alert']);
-        /**
-         * Define if component is using actions slot
-         */
-        this.hasActions = false;
-        /**
-         * Set timer
-         */
-        this.setTimer = () => {
-            this.storedTimer = setTimeout(() => (this.element.hidden = true), this.delay * 1000);
-        };
-        /**
-         * Clear timer
-         */
-        this.clearTimer = () => {
-            clearTimeout(this.storedTimer);
-        };
-        /**
-         * Event to add on element
-         * @param event - event
-         */
-        this.timerEvents = (event) => {
-            this.clearTimer();
-            const isMouseEvent = event.type === 'mouseenter';
-            // Needed to ensure we don't start the timer
-            this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
-            // Restart timer when loose focus AND mouse leave
-            this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
-                this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
-                // Start timer if needed
-                if (!this.isFocused && !this.isHovered)
-                    this.setTimer();
-            }, { once: true });
-        };
-        /**
-         * Handle close button
-         */
-        this.handleClose = () => {
-            this.element.hidden = true;
-            this.componentClose.emit();
-        };
-    }
-    watchDelay(newValue) {
-        if (newValue !== undefined && newValue < 2) {
-            throw new Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchVariant(newValue) {
-        if (newValue && !variants.includes(newValue)) {
-            throw new Error(`<mg-alert> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchVariantStyle(newValue) {
-        if (newValue && !variantStyles.includes(newValue)) {
-            throw new Error(`<mg-alert> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    /**
-     * Watch hidden prop
-     */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
-    watchHidden(newValue) {
-        if (typeof newValue === 'string' && newValue === '') {
-            newValue = true;
-        }
-        if (newValue) {
-            this.componentHide.emit();
-            // Remove event Listener
-            ['focusin', 'mouseenter'].forEach(event => {
-                this.element.removeEventListener(event, this.timerEvents);
-            });
-            // Clear Timer
-            this.clearTimer();
-        }
-        else {
-            this.componentShow.emit();
-            // If delay is set
-            if (this.delay > 1) {
-                // Start timer
-                this.setTimer();
-                // Stop timer when get focus or mouse enter
-                ['focusin', 'mouseenter'].forEach(event => {
-                    this.element.addEventListener(event, this.timerEvents);
-                });
-            }
-        }
-        forceUpdate(this);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
-        this.watchVariant(this.variant);
-        this.watchVariantStyle(this.variantStyle);
-        this.watchDelay(this.delay);
-        this.watchHidden(this.element.hidden);
-        // Check if component has actions slot
-        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-        if (!this.hasActions) {
-            this.classCollection.add(this.classCloseButton);
-        }
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("mg-message", { key: '4b974a10812e527a2c481ec00f22324ab490a135', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '9133a3cca56d67e75e8c3f018c52838c31e908f2' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "delay": ["watchDelay"],
-        "variant": ["watchVariant"],
-        "variantStyle": ["watchVariantStyle"],
-        "hidden": ["watchHidden"]
-    }; }
-    static get style() { return mgAlertCss; }
-}, [257, "mg-alert", {
-        "delay": [2],
-        "variant": [1],
-        "variantStyle": [1, "variant-style"],
-        "classCollection": [32],
-        "hasActions": [32]
-    }, undefined, {
-        "delay": ["watchDelay"],
-        "variant": ["watchVariant"],
-        "variantStyle": ["watchVariantStyle"],
-        "hidden": ["watchHidden"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-alert", "mg-button", "mg-card", "mg-icon", "mg-message"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-alert":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgAlert$1);
-            }
-            break;
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-message":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgAlert = MgAlert$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgAlert, defineCustomElement };
+import{transformTag as t,proxyCustomElement as s,HTMLElement as e,createEvent as i,forceUpdate as a,h as o}from"@stencil/core/internal/client";import{C as n,t as r}from"./index2.js";import{i as h}from"./index3.js";import{d as c}from"./mg-button2.js";import{d as m}from"./mg-card2.js";import{d as l}from"./mg-icon2.js";import{d}from"./mg-message2.js";const u=["info","warning","success","danger"],g=["bar-left","background"],f=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.componentShow=i(this,"component-show",3),this.componentHide=i(this,"component-hide",3),this.componentClose=i(this,"component-close",3),this.classCloseButton="mg-c-alert--close-button",this.storedTimer=null,this.isFocused=!1,this.isHovered=!1,this.variant="info",this.variantStyle="bar-left",this.classCollection=new n(["mg-c-alert"]),this.hasActions=!1,this.setTimer=()=>{this.storedTimer=setTimeout((()=>this.element.hidden=!0),1e3*this.delay)},this.clearTimer=()=>{clearTimeout(this.storedTimer)},this.timerEvents=t=>{this.clearTimer();const s="mouseenter"===t.type;this[s?"isHovered":"isFocused"]=!0,this.element.addEventListener(s?"mouseleave":"focusout",(t=>{this["mouseleave"===t.type?"isHovered":"isFocused"]=!1,this.isFocused||this.isHovered||this.setTimer()}),{once:!0})},this.handleClose=()=>{this.element.hidden=!0,this.componentClose.emit()}}watchDelay(t){if(void 0!==t&&t<2)throw Error(`<mg-alert> prop "delay" must be greater than 2 seconds. Passed value: ${r(t)}.`)}watchVariant(t){if(t&&!u.includes(t))throw Error(`<mg-alert> prop "variant" must be one of: ${u.join(", ")}. Passed value: ${r(t)}.`)}watchVariantStyle(t){if(t&&!g.includes(t))throw Error(`<mg-alert> prop "variantStyle" must be one of: ${g.join(", ")}. Passed value: ${r(t)}.`)}watchHidden(t){"string"==typeof t&&""===t&&(t=!0),t?(this.componentHide.emit(),["focusin","mouseenter"].forEach((t=>{this.element.removeEventListener(t,this.timerEvents)})),this.clearTimer()):(this.componentShow.emit(),this.delay>1&&(this.setTimer(),["focusin","mouseenter"].forEach((t=>{this.element.addEventListener(t,this.timerEvents)})))),a(this)}componentWillLoad(){this.messages=h(this.element).messages,this.watchVariant(this.variant),this.watchVariantStyle(this.variantStyle),this.watchDelay(this.delay),this.watchHidden(this.element.hidden),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.hasActions||this.classCollection.add(this.classCloseButton)}render(){return o("mg-message",{key:"6085a45d00c4762bae88d98e89f44c20d5f9b6c4",class:this.classCollection.join(),role:["info","success"].includes(this.variant)?"status":"alert",variant:this.variant,variantStyle:this.variantStyle},o("slot",{key:"55491d1b41609883958680c14a2ddb8dd84a3bd4"}),this.hasActions?o("span",{slot:"actions"},o("slot",{name:"actions"})):o("span",{class:"mg-c-alert__close-button"},o("mg-button",{"is-icon":!0,variant:"flat",label:this.messages.alert.closeButton,onClick:this.handleClose},o("mg-icon",{icon:"cross"}))))}get element(){return this}static get watchers(){return{delay:[{watchDelay:0}],variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],hidden:[{watchHidden:0}]}}static get style(){return".mg-c-alert__close-button{position:absolute;top:0;right:0}.mg-c-alert.mg-c-alert--close-button{--mg-c-card-spacing:0 var(--mg-b-size-min-height) 0 0}"}},[257,"mg-alert",{delay:[2],variant:[1],variantStyle:[1,"variant-style"],classCollection:[32],hasActions:[32]},void 0,{delay:[{watchDelay:0}],variant:[{watchVariant:0}],variantStyle:[{watchVariantStyle:0}],hidden:[{watchHidden:0}]}]);function b(){"undefined"!=typeof customElements&&["mg-alert","mg-button","mg-card","mg-icon","mg-message"].forEach((s=>{switch(s){case"mg-alert":customElements.get(t(s))||customElements.define(t(s),f);break;case"mg-button":customElements.get(t(s))||c();break;case"mg-card":customElements.get(t(s))||m();break;case"mg-icon":customElements.get(t(s))||l();break;case"mg-message":customElements.get(t(s))||d()}}))}b();const p=f,y=b;export{p as MgAlert,y as defineCustomElement}

package/dist/components/mg-badge.js

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

package/dist/components/mg-badge2.js

@@ -1,113 +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 = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
-
-const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-badge-size: Defines the height and minimum width of the badge. The default value is `--mg-b-size-16`.\n * @prop --mg-c-badge-font-size: Defines the font size of the badge. The default value is `--mg-b-font-size-small`.\n * @prop --mg-c-badge-color-text: Defines the font color of the badge when used with the `text-color` variant and without `outline`. The default value is `--mg-b-color-light`.\n */.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
-
-const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /************
-         * Internal *
-         ************/
-        // Classes
-        this.classOutline = `mg-c-badge--outline`;
-        /**
-         * Define badge variant
-         */
-        this.variant = 'info';
-        /**
-         * Define if button is using outline style
-         */
-        this.outline = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-badge']);
-    }
-    validateValue(newValue) {
-        if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
-            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateLabel(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateVariant(newValue, oldValue) {
-        if (!variants.includes(newValue)) {
-            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        else {
-            if (oldValue !== undefined) {
-                this.classCollection.delete(`mg-c-badge--${oldValue}`);
-            }
-            this.classCollection.add(`mg-c-badge--${newValue}`);
-        }
-    }
-    validateOutline(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classOutline);
-        else
-            this.classCollection.delete(this.classOutline);
-    }
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateValue(this.value);
-        this.validateLabel(this.label);
-        this.validateVariant(this.variant);
-        this.validateOutline(this.outline);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("span", { key: '27e42212d525a31576dbe826babca52d99a3476b', class: this.classCollection.join() }, h("span", { key: 'f24658252cc62a38879a1e8321c477723c2dc919', class: "mg-c-badge__value" }, this.value), h("span", { key: '9f51fe7c868a8d53d9f138ec4229e1ba09e7284e', class: "mg-u-visually-hidden" }, this.label)));
-    }
-    static get watchers() { return {
-        "value": ["validateValue"],
-        "label": ["validateLabel"],
-        "variant": ["validateVariant"],
-        "outline": ["validateOutline"]
-    }; }
-    static get style() { return mgBadgeCss; }
-}, [257, "mg-badge", {
-        "value": [8],
-        "label": [1],
-        "variant": [1],
-        "outline": [4],
-        "classCollection": [32]
-    }, undefined, {
-        "value": ["validateValue"],
-        "label": ["validateLabel"],
-        "variant": ["validateVariant"],
-        "outline": ["validateOutline"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-badge"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-badge":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgBadge);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgBadge as M, defineCustomElement as d };
+import{transformTag as r,proxyCustomElement as a,HTMLElement as e,h as o}from"@stencil/core/internal/client";import{C as c,t as g,i as t}from"./index2.js";const i=["info","primary","secondary","success","warning","danger","text-color"],n=a(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.classOutline="mg-c-badge--outline",this.variant="info",this.outline=!1,this.classCollection=new c(["mg-c-badge"])}validateValue(r){if(null===/^[^A-Z]+$/i.exec(`${r}`))throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${g(r)}.`)}validateLabel(r){if(!t(r))throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${g(r)}.`)}validateVariant(r,a){if(!i.includes(r))throw new Error(`<mg-badge> prop "variant" must be one of: ${i.join(", ")}. Passed value: ${g(r)}.`);void 0!==a&&this.classCollection.delete(`mg-c-badge--${a}`),this.classCollection.add(`mg-c-badge--${r}`)}validateOutline(r){r?this.classCollection.add(this.classOutline):this.classCollection.delete(this.classOutline)}componentWillLoad(){this.validateValue(this.value),this.validateLabel(this.label),this.validateVariant(this.variant),this.validateOutline(this.outline)}render(){return o("span",{key:"27e42212d525a31576dbe826babca52d99a3476b",class:this.classCollection.join()},o("span",{key:"f24658252cc62a38879a1e8321c477723c2dc919",class:"mg-c-badge__value"},this.value),o("span",{key:"9f51fe7c868a8d53d9f138ec4229e1ba09e7284e",class:"mg-u-visually-hidden"},this.label))}static get watchers(){return{value:[{validateValue:0}],label:[{validateLabel:0}],variant:[{validateVariant:0}],outline:[{validateOutline:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-c-badge-size);height:var(--mg-c-badge-size);box-sizing:border-box;padding:0 var(--mg-b-size-4);border:var(--mg-b-size-border) solid;border-radius:calc(var(--mg-c-badge-size)/2);font-size:var(--mg-c-badge-font-size);font-weight:600;line-height:var(--mg-c-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:var(--mg-b-color-primary);background-color:var(--mg-b-color-primary);color:var(--mg-b-color-text-on-primary)}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-primary)}.mg-c-badge.mg-c-badge--secondary{border-color:var(--mg-b-color-secondary);background-color:var(--mg-b-color-secondary);color:var(--mg-b-color-text-on-secondary)}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-secondary)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-danger)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-info)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-success)}.mg-c-badge.mg-c-badge--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-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:var(--mg-b-color-warning)}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:var(--mg-c-badge-color-text, var(--mg-b-color-light))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}"}},[1,"mg-badge",{value:[8],label:[1],variant:[1],outline:[4],classCollection:[32]},void 0,{value:[{validateValue:0}],label:[{validateLabel:0}],variant:[{validateVariant:0}],outline:[{validateOutline:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-badge"].forEach((a=>{"mg-badge"===a&&(customElements.get(r(a))||customElements.define(r(a),n))}))}l();export{n as M,l as d}

package/dist/components/mg-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgBreadcrumb extends Components.MgBreadcrumb, HTMLElement {}
+export const MgBreadcrumb: {
+    prototype: MgBreadcrumb;
+    new (): MgBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/mg-breadcrumb.js

@@ -0,0 +1 @@
+import{transformTag as e,proxyCustomElement as t,HTMLElement as r,h as i}from"@stencil/core/internal/client";import{i as a}from"./index3.js";import{t as s,i as m}from"./index2.js";import{d as c}from"./mg-icon2.js";const n=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}validateItems(e){if(void 0===e||!(e=>Array.isArray(e)&&e.length>0&&e.every(((t,r)=>"object"==typeof t&&null!==t&&m(t.label)&&(r===e.length-1||m(t.href)))))(e))throw Error(`<mg-breadcrumb> prop "items" is required and all values must be the same type, BreadcrumbItemType. Passed value: ${s(e)}.`)}renderItem(e,t){return m(e.href)?i("a",{href:e.href,"aria-label":void 0!==e.icon?e.label:void 0,"aria-current":t?"page":void 0},void 0!==e.icon?i("mg-icon",{icon:e.icon}):e.label):i("span",null,e.label)}componentWillLoad(){this.validateItems(this.items),this.messages=a(this.element).messages.breadcrumb}render(){return i("nav",{key:"5181512072a7de6e161adcbb9988ae3407f61301","aria-label":this.messages.label,class:"mg-c-breadcrumb"},i("ol",{key:"2a4cec366a72027091ebcbccd78d552884005b93",class:"mg-c-breadcrumb__list"},this.items.map(((e,t)=>{var r;return i("li",{key:`${t}-${null!==(r=e.href)&&void 0!==r?r:e.label}`,class:"mg-c-breadcrumb__list-item"},this.renderItem(e,t===this.items.length-1))}))))}get element(){return this}static get watchers(){return{items:[{validateItems:0}]}}static get style(){return'a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}.mg-c-breadcrumb{display:block}.mg-c-breadcrumb__list{padding:0;margin:0;list-style:none}.mg-c-breadcrumb__list-item{display:inline;color:var(--mg-b-color-dark);font-weight:700}.mg-c-breadcrumb__list-item:not(:last-child)::after{content:"/";font-weight:600;margin-inline:var(--mg-b-size-8)}.mg-c-breadcrumb__list-item:has(mg-icon) a{padding:var(--mg-b-size-4);margin:calc(var(--mg-b-size-4)*-1)}.mg-c-breadcrumb__list-item mg-icon{margin-block-start:.2rem;vertical-align:top}'}},[1,"mg-breadcrumb",{items:[16]},void 0,{items:[{validateItems:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-breadcrumb","mg-icon"].forEach((t=>{switch(t){case"mg-breadcrumb":customElements.get(e(t))||customElements.define(e(t),n);break;case"mg-icon":customElements.get(e(t))||c()}}))}o();const l=n,d=o;export{l as MgBreadcrumb,d as defineCustomElement}