@mgdis/mg-components 6.20.0 → 6.22.0

package/dist/components/mg-button.js

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

package/dist/components/mg-button2.js

@@ -1,275 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ClassList, t as toString, i as isValidString, n as nextTick } from './index2.js';
-import { K as Keys } from './events.utils.js';
-import { d as defineCustomElement$1 } from './mg-icon2.js';
-
-/**
- * List of all possibles sizes
- */
-const sizes = ['medium', 'large'];
-/**
- * List of all possibles variants
- */
-const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'];
-
-const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the border radius of the button. The default value is `--mg-b-size-radius`.\n * @prop --mg-c-button-border-top-width: Defines the top border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-right-width: Defines the right border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-bottom-width: Defines the bottom border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-left-width: Defines the left border width of the button. Unset by default, fallback on `--mg-b-size-border`.\n * @prop --mg-c-button-border-radius-top-left: Defines the top left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-top-right: Defines the top right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-right: Defines the bottom right border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-border-radius-bottom-left: Defines the bottom left border radius of the button. Unset by default, fallback on `--mg-c-button-border-radius`.\n * @prop --mg-c-button-font-weight: Defines the font weight of the button. Unset by default, fallback on `normal`.\n * @prop --mg-c-button-icon-border-radius: Defines the border radius of the button in icon mode. The default value is `--mg-b-size-min-height`.\n */:host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{/*!\n * @prop --mg-c-button-color-background-primary: Defines the background color for the primary variant button.\n * @prop --mg-c-button-color-border-primary: Defines the border color for the primary variant button.\n * @prop --mg-c-button-color-gradient-primary: Defines the gradient color for the primary variant button.\n * @prop --mg-c-button-color-text-primary: Defines the font color for the primary variant button.\n */border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{/*!\n * @prop --mg-c-button-color-background-secondary: Defines the background color for the secondary variant button.\n * @prop --mg-c-button-color-border-secondary: Defines the border color for the secondary variant button.\n * @prop --mg-c-button-color-gradient-secondary: Defines the gradient color for the secondary variant button.\n * @prop --mg-c-button-color-text-secondary: Defines the font color for the secondary variant button.\n */border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{/*!\n * @prop --mg-c-button-color-background-danger: Defines the background color for the danger variant button.\n * @prop --mg-c-button-color-border-danger: Defines the border color for the danger variant button.\n * @prop --mg-c-button-color-gradient-danger: Defines the gradient color for the danger variant button.\n * @prop --mg-c-button-color-text-danger: Defines the font color for the danger variant button.\n */border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{/*!\n * @prop --mg-c-button-color-background-info: Defines the background color for the info variant button.\n * @prop --mg-c-button-color-border-info: Defines the border color for the info variant button.\n * @prop --mg-c-button-color-gradient-info: Defines the gradient color for the info variant button.\n * @prop --mg-c-button-color-text-info: Defines the font color for the info variant button.\n */border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{/*!\n * @prop --mg-c-button-color-background-success: Defines the background color for the success variant button.\n * @prop --mg-c-button-color-border-success: Defines the border color for the success variant button.\n * @prop --mg-c-button-color-gradient-success: Defines the gradient color for the success variant button.\n * @prop --mg-c-button-color-text-success: Defines the font color for the success variant button.\n */border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{/*!\n * @prop --mg-c-button-color-background-warning: Defines the background color for the warning variant button.\n * @prop --mg-c-button-color-border-warning: Defines the border color for the warning variant button.\n * @prop --mg-c-button-color-gradient-warning: Defines the gradient color for the warning variant button.\n * @prop --mg-c-button-color-text-warning: Defines the font color for the warning variant button.\n */border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{/*!\n * @prop --mg-c-button-color-background-danger-alt: Defines the background color for the danger-alt variant button.\n * @prop --mg-c-button-color-border-danger-alt: Defines the border color for the danger-alt variant button.\n * @prop --mg-c-button-color-gradient-danger-alt: Defines the gradient color for the danger-alt variant button.\n * @prop --mg-c-button-color-text-danger-alt: Defines the font color for the danger-alt variant button.\n */border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
-
-const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.disabledChange = createEvent(this, "disabled-change", 7);
-        /************
-         * Internal *
-         ************/
-        this.onClickElementFn = null;
-        this.classDisabled = 'mg-c-button--disabled';
-        this.classLoading = 'mg-c-button--loading';
-        this.classFullWidth = 'mg-c-button--full-width';
-        /**
-         * Define button variant
-         */
-        this.variant = 'primary';
-        /**
-         * Define button size
-         */
-        this.size = 'medium';
-        /**
-         * Set button to full-width
-         */
-        this.fullWidth = false;
-        /**
-         * Define if button is round.
-         * Used for icon button.
-         */
-        this.isIcon = false;
-        /**
-         * Option to set input disable on click, in order to prevent multi-click.
-         * Parent component have to remove the attribute 'disabled' when the process ends.
-         */
-        this.disableOnClick = false;
-        /**
-         * Define if button is loading, default to false.
-         * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
-         * It's required to reset to false when action/promise in parent is done to stop the loading state
-         */
-        this.loading = false;
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-button']);
-        /**
-         * Trigger actions onClick event
-         * @param event - click event
-         */
-        this.handleClick = (event) => {
-            if (this.disabled)
-                event.stopPropagation();
-            // Used to prevent multi-click.
-            else if (this.disableOnClick) {
-                this.loading = true;
-                this.disabled = true;
-            }
-        };
-        /**
-         * Handle onKeydown event
-         * @param event - keyboard event
-         */
-        this.handleKeydown = (event) => {
-            if (!this.disabled && event.key === ' ') {
-                event.preventDefault();
-            }
-            else if (!this.disabled && [Keys.ENTER, Keys.NUMPADENTER, Keys.SPACE].includes(event.key)) {
-                event.preventDefault();
-                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            }
-        };
-        /**
-         * Handle onKeyup event
-         * @param event - keyboard event
-         */
-        this.handleKeyup = (event) => {
-            if (!this.disabled && event.key === ' ') {
-                event.preventDefault();
-                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-            }
-        };
-        /**
-         * Set child `<mg-icon>` element `size` prop to follow the current `size` prop
-         */
-        this.setIconSize = () => {
-            var _a, _b;
-            if (this.size === 'medium') {
-                (_a = this.element.querySelector('mg-icon[size]')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
-            }
-            else if (this.isIcon) {
-                (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
-            }
-        };
-    }
-    validateVariant(newValue, oldValue) {
-        // validate new value
-        if (!variants.includes(newValue)) {
-            if (newValue === '') {
-                // Reactive framework like VUE render with `""` when prop is update to undefined
-                this.variant = variants[0];
-                return;
-            }
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        else {
-            if (oldValue !== undefined) {
-                this.classCollection.delete(`mg-c-button--${oldValue}`);
-            }
-            this.classCollection.add(`mg-c-button--${newValue}`);
-        }
-    }
-    validateSize(newValue, oldValue) {
-        // validate new value
-        if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
-        }
-        else {
-            if (oldValue !== undefined) {
-                this.classCollection.delete(`mg-c-button--${oldValue}`);
-            }
-            this.classCollection.add(`mg-c-button--${newValue}`);
-            this.setIconSize();
-        }
-    }
-    validateFullWidth(newValue) {
-        if (newValue && this.isIcon) {
-            throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
-        }
-        else if (newValue) {
-            this.classCollection.add(this.classFullWidth);
-        }
-        else {
-            this.classCollection.delete(this.classFullWidth);
-        }
-    }
-    disabledHandler(isDisabled) {
-        // Remove loading when enable
-        // Will be set back onclick
-        if (!isDisabled && this.disableOnClick) {
-            this.loading = false;
-        }
-        // Manage if onclick
-        this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
-        // apply style
-        if (isDisabled) {
-            this.classCollection.add(this.classDisabled);
-        }
-        else {
-            this.classCollection.delete(this.classDisabled);
-        }
-        // emit value update
-        this.disabledChange.emit(isDisabled);
-    }
-    watchIsIcon(newValue) {
-        if (newValue) {
-            this.classCollection.add(`mg-c-button--icon`);
-            if (!isValidString(this.label)) {
-                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-            }
-        }
-        this.setIconSize();
-    }
-    loadingHandler(newValue) {
-        // we add loading style if it newvalue is true else we remove it
-        if (newValue) {
-            this.classCollection.add(this.classLoading);
-        }
-        else {
-            this.classCollection.delete(this.classLoading);
-        }
-    }
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateVariant(this.variant);
-        this.validateFullWidth(this.fullWidth);
-        this.validateSize(this.size);
-        this.watchIsIcon(this.isIcon);
-        // Store the onclick fn
-        this.onClickElementFn = this.element.onclick;
-        this.disabledHandler(this.disabled);
-    }
-    /**
-     * Add listners
-     */
-    componentDidLoad() {
-        nextTick(() => {
-            var _a;
-            const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
-            // submit buttons should trigger form submition;
-            if (closestForm && ['submit', undefined].includes(this.type)) {
-                this.element.addEventListener('click', () => {
-                    closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
-                });
-            }
-        });
-    }
-    /**
-     * Render component
-     * @returns html element
-     */
-    render() {
-        var _a;
-        return (h(Host, { key: '82e03b7b699a821125d066a5ca1d435a87a75675', role: "button", tabIndex: this.element.getAttribute('tabindex') || 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '92a0a1fbcf320f8afc10106418a992fffd748646', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'f5d0bf31534c2dc8dbd7f9e2fc63bd8af055a9a3', icon: "loader", spin: true }), h("div", { key: '7557988a9a70881f25c86b78a3ea28d9842c439b', class: "mg-c-button__content" }, h("slot", { key: '98b64ef7efc4d761fdda8c593b05ec6959b0ea22' })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "variant": ["validateVariant"],
-        "size": ["validateSize"],
-        "fullWidth": ["validateFullWidth"],
-        "disabled": ["disabledHandler"],
-        "isIcon": ["watchIsIcon"],
-        "loading": ["loadingHandler"]
-    }; }
-    static get style() { return mgButtonCss; }
-}, [257, "mg-button", {
-        "variant": [1025],
-        "label": [1],
-        "type": [1],
-        "size": [1],
-        "fullWidth": [4, "full-width"],
-        "form": [1],
-        "disabled": [1028],
-        "isIcon": [4, "is-icon"],
-        "disableOnClick": [4, "disable-on-click"],
-        "loading": [32],
-        "classCollection": [32]
-    }, undefined, {
-        "variant": ["validateVariant"],
-        "size": ["validateSize"],
-        "fullWidth": ["validateFullWidth"],
-        "disabled": ["disabledHandler"],
-        "isIcon": ["watchIsIcon"],
-        "loading": ["loadingHandler"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-button", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgButton);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgButton as M, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as s}from"./index2.js";import{K as d}from"./events.utils.js";import{d as g}from"./mg-icon2.js";const u=["medium","large"],m=["primary","secondary","danger","danger-alt","info","flat","success","link"],l=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[d.ENTER,d.NUMPADENTER,d.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!m.includes(t)){if(""===t)return void(this.variant=m[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!u.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${u.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t&&(this.classCollection.add("mg-c-button--icon"),!b(this.label)))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.');this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){s((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"82e03b7b699a821125d066a5ca1d435a87a75675",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"92a0a1fbcf320f8afc10106418a992fffd748646",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"f5d0bf31534c2dc8dbd7f9e2fc63bd8af055a9a3",icon:"loader",spin:!0}),i("div",{key:"7557988a9a70881f25c86b78a3ea28d9842c439b",class:"mg-c-button__content"},i("slot",{key:"98b64ef7efc4d761fdda8c593b05ec6959b0ea22"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function h(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),l);break;case"mg-icon":customElements.get(t(o))||g()}}))}h();export{l as M,h as d}

package/dist/components/mg-card.js

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

package/dist/components/mg-card2.js

@@ -1,92 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ClassList } from './index2.js';
-
-/**
- * List of all possibles radius size
- */
-const radiusSizes = ['xsmall', 'small', 'medium'];
-
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-max-height: Defines the max-height property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-12`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}";
-
-const MgCard = /*@__PURE__*/ proxyCustomElement(class MgCard extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * Add box-shadow style
-         */
-        this.shadow = false;
-        /**
-         * Define the border radius size
-         */
-        this.radiusSize = 'medium';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-card']);
-    }
-    watchShadow(newValue) {
-        if (newValue) {
-            this.classCollection.add('mg-c-card--shadow');
-        }
-        else {
-            this.classCollection.delete('mg-c-card--shadow');
-        }
-    }
-    watchRadiusSize(newValue, oldValue) {
-        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
-            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
-        }
-        if (radiusSizes.includes(newValue)) {
-            this.classCollection.add(`mg-c-card--radius-${newValue}`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        this.watchShadow(this.shadow);
-        this.watchRadiusSize(this.radiusSize);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
-    }
-    static get watchers() { return {
-        "shadow": ["watchShadow"],
-        "radiusSize": ["watchRadiusSize"]
-    }; }
-    static get style() { return mgCardCss; }
-}, [257, "mg-card", {
-        "shadow": [4],
-        "radiusSize": [1, "radius-size"],
-        "classCollection": [32]
-    }, undefined, {
-        "shadow": ["watchShadow"],
-        "radiusSize": ["watchRadiusSize"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-card"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgCard);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgCard as M, defineCustomElement as d };
+import{transformTag as a,proxyCustomElement as r,HTMLElement as d,h as c}from"@stencil/core/internal/client";import{C as e}from"./index2.js";const s=["xsmall","small","medium"],o=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.shadow=!1,this.radiusSize="medium",this.classCollection=new e(["mg-c-card"])}watchShadow(a){a?this.classCollection.add("mg-c-card--shadow"):this.classCollection.delete("mg-c-card--shadow")}watchRadiusSize(a,r){void 0!==r&&s.includes(r)&&this.classCollection.delete(`mg-c-card--radius-${r}`),s.includes(a)&&this.classCollection.add(`mg-c-card--radius-${a}`)}componentWillLoad(){this.watchShadow(this.shadow),this.watchRadiusSize(this.radiusSize)}render(){return c("div",{key:"fe5eff1e1d7c533cd533e27d3fb070a4e57194a8",class:this.classCollection.join()},c("slot",{key:"ca27dc4039d7bcaa21284714b7820de257625009"}))}static get watchers(){return{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}}static get style(){return".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}"}},[257,"mg-card",{shadow:[4],radiusSize:[1,"radius-size"],classCollection:[32]},void 0,{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}]);function m(){"undefined"!=typeof customElements&&["mg-card"].forEach((r=>{"mg-card"===r&&(customElements.get(a(r))||customElements.define(a(r),o))}))}m();export{o as M,m as d}

package/dist/components/mg-character-left.js

@@ -1,6 +1 @@
-import { M as MgCharacterLeft$1, d as defineCustomElement$1 } from './mg-character-left2.js';
-
-const MgCharacterLeft = MgCharacterLeft$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgCharacterLeft, defineCustomElement };
+import{M as r,d as t}from"./mg-character-left2.js";const a=r,o=t;export{a as MgCharacterLeft,o as defineCustomElement}

package/dist/components/mg-character-left2.js

@@ -1,75 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { i as initLocales } from './index3.js';
-import { a as isValideID, t as toString } from './index2.js';
-
-const mgCharacterLeftCss = ".mg-u-visually-hidden.sc-mg-character-left{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}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}";
-
-const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class MgCharacterLeft extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Sets the characters to count
-         */
-        this.characters = '';
-    }
-    watchIdentifier(newValue) {
-        if (newValue !== undefined && !isValideID(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    validateMaxlength(newValue) {
-        if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if props are well configured on init
-     */
-    componentWillLoad() {
-        this.watchIdentifier(this.identifier);
-        this.validateMaxlength(this.maxlength);
-        this.messages = initLocales(this.element).messages;
-    }
-    /**
-     * Render component
-     * @returns HTML Element
-     */
-    render() {
-        return (h("span", { key: '22f23b636aaebc8857e4efa2fdb87a85977c59bf', id: this.identifier, "aria-live": "polite" }, h("span", { key: '55addb97bc00800b1ec644b0eff68e779a03528a', "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { key: 'd5bd60b48b6a02cdaff4166f14e4ea6cf921f749', class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "identifier": ["watchIdentifier"],
-        "maxlength": ["validateMaxlength"]
-    }; }
-    static get style() { return mgCharacterLeftCss; }
-}, [258, "mg-character-left", {
-        "identifier": [1],
-        "characters": [1],
-        "maxlength": [2]
-    }, undefined, {
-        "identifier": ["watchIdentifier"],
-        "maxlength": ["validateMaxlength"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-character-left"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-character-left":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgCharacterLeft);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { MgCharacterLeft as M, defineCustomElement as d };
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as a}from"@stencil/core/internal/client";import{i as r}from"./index3.js";import{a as n,t as s}from"./index2.js";const c=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.characters=""}watchIdentifier(e){void 0===e||n(e)||console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${s(e)}.`)}validateMaxlength(e){if("number"!=typeof e)throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${s(e)}.`)}componentWillLoad(){this.watchIdentifier(this.identifier),this.validateMaxlength(this.maxlength),this.messages=r(this.element).messages}render(){return a("span",{key:"41b489eafc25e9fe2e32b54a72542090d79e1052",id:this.identifier,"aria-live":"polite"},a("span",{key:"c9dd3eb15ebc866333d4e911e1a560cac1c07ef7","aria-hidden":"true"},this.maxlength-this.characters.length,"/",this.maxlength),a("span",{key:"0e4664f577b8db68f0355fc92f9df251f945dedd",class:"mg-u-visually-hidden"},this.messages.nbCharLeft.replace("{counter}",this.maxlength-this.characters.length)))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],maxlength:[{validateMaxlength:0}]}}static get style(){return".mg-u-visually-hidden.sc-mg-character-left{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}*.sc-mg-character-left:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*.sc-mg-character-left{animation:none !important;transition:none !important}}mg-character-left.sc-mg-character-left{display:block}"}},[2,"mg-character-left",{identifier:[1],characters:[1],maxlength:[2]},void 0,{identifier:[{watchIdentifier:0}],maxlength:[{validateMaxlength:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-character-left"].forEach((t=>{"mg-character-left"===t&&(customElements.get(e(t))||customElements.define(e(t),c))}))}o();export{c as M,o as d}

package/dist/components/mg-details.js

@@ -1,104 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { i as isValidString } from './index2.js';
-import { d as defineCustomElement$2 } from './mg-icon2.js';
-
-const mgDetailsCss = ".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-details-spacing: Defines the spacing between the summary and the details. Default value: `--mg-b-size-8`.\n */.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{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}}";
-
-const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.expandedChange = createEvent(this, "expanded-change", 7);
-        /**
-         * Hide summary element
-         */
-        this.hideSummary = false;
-        /**
-         * Define if details are diplayed
-         */
-        this.expanded = false;
-        /**
-         * Handle details toggle
-         */
-        this.handleToggle = () => {
-            this.expanded = this.details.open;
-        };
-    }
-    validateTitles(newValue) {
-        if (!isValidString(newValue)) {
-            throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
-        }
-    }
-    handleExpanded(newValue) {
-        this.expandedChange.emit(newValue);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     */
-    componentWillLoad() {
-        this.validateTitles(this.toggleClosed);
-        this.validateTitles(this.toggleOpened);
-        // Check if summary slot is empty
-        const summarySlot = this.element.querySelector('[slot="summary"]');
-        this.isEmptySummary = summarySlot === null || !isValidString(summarySlot.textContent);
-        // Add event listener to prevent default action on summary click
-        this.element.addEventListener('click', (event) => {
-            if (event.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]') !== null) {
-                event.preventDefault();
-            }
-        });
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "toggleClosed": ["validateTitles"],
-        "toggleOpened": ["validateTitles"],
-        "expanded": ["handleExpanded"]
-    }; }
-    static get style() { return mgDetailsCss; }
-}, [257, "mg-details", {
-        "toggleClosed": [1, "toggle-closed"],
-        "toggleOpened": [1, "toggle-opened"],
-        "hideSummary": [4, "hide-summary"],
-        "expanded": [1028]
-    }, undefined, {
-        "toggleClosed": ["validateTitles"],
-        "toggleOpened": ["validateTitles"],
-        "expanded": ["handleExpanded"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-details", "mg-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgDetails$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgDetails = MgDetails$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgDetails, defineCustomElement };
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{i as n}from"./index2.js";import{d as m}from"./mg-icon2.js";const o=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedChange=a(this,"expanded-change",7),this.hideSummary=!1,this.expanded=!1,this.handleToggle=()=>{this.expanded=this.details.open}}validateTitles(e){if(!n(e))throw Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`)}handleExpanded(e){this.expandedChange.emit(e)}componentWillLoad(){this.validateTitles(this.toggleClosed),this.validateTitles(this.toggleOpened);const e=this.element.querySelector('[slot="summary"]');this.isEmptySummary=null===e||!n(e.textContent),this.element.addEventListener("click",(e=>{null!==e.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]')&&e.preventDefault()}))}render(){return s("details",{key:"4da17afd7a964a14b5b101bcfadc241be569d55a",class:{"mg-c-details":!0,"mg-c-details--empty-summary":this.isEmptySummary},onToggle:this.handleToggle,open:this.expanded,ref:e=>this.details=e},s("summary",{key:"515d6c4e117b547fe80a310fb90e114900f645e8"},s("slot",{key:"0c9c0dcc47dd418e34e541d878bfc03ca137c68d",name:"summary"}),s("span",{key:"c94f52994843b10c1161c0d85f38f8cb917ea806",class:"mg-c-details__toggle"},s("mg-icon",{key:"9421452572af3deb03146a8dfd189369b249ba2d",icon:"chevron-up",class:{"mg-c-details__toggle-icon":!0,"mg-c-details__toggle-icon--reverse":!this.expanded}}),s("span",{key:"dbfb0b34da00e37f55ec07236611c2babdd6b7c5",class:{"mg-u-visually-hidden":this.hideSummary}},this.expanded?this.toggleOpened:this.toggleClosed))),s("div",{key:"1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76",class:"mg-c-details__details"},s("slot",{key:"81c213594b1b67747db439624090784eaa5e6fcd",name:"details"})))}get element(){return this}static get watchers(){return{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded: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-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{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}}"}},[257,"mg-details",{toggleClosed:[1,"toggle-closed"],toggleOpened:[1,"toggle-opened"],hideSummary:[4,"hide-summary"],expanded:[1028]},void 0,{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}]);function d(){"undefined"!=typeof customElements&&["mg-details","mg-icon"].forEach((t=>{switch(t){case"mg-details":customElements.get(e(t))||customElements.define(e(t),o);break;case"mg-icon":customElements.get(e(t))||m()}}))}d();const l=o,r=d;export{l as MgDetails,r as defineCustomElement}