@mgdis/mg-components 3.3.0 → 4.0.0

package/dist/components/index.d.ts

@@ -1,6 +1,27 @@
 /* MgComponents custom elements */
-
-import type { Components, JSX } from "../types/components";
+export { MgBadge as MgBadge } from '../types/components/mg-badge/mg-badge';
+export { MgButton as MgButton } from '../types/components/mg-button/mg-button';
+export { MgCharacterLeft as MgCharacterLeft } from '../types/components/mg-character-left/mg-character-left';
+export { MgForm as MgForm } from '../types/components/mg-form/mg-form';
+export { MgIcon as MgIcon } from '../types/components/mg-icon/mg-icon';
+export { MgInputCheckbox as MgInputCheckbox } from '../types/components/mg-input-checkbox/mg-input-checkbox';
+export { MgInputDate as MgInputDate } from '../types/components/mg-input-date/mg-input-date';
+export { MgInputNumeric as MgInputNumeric } from '../types/components/mg-input-numeric/mg-input-numeric';
+export { MgInputPassword as MgInputPassword } from '../types/components/mg-input-password/mg-input-password';
+export { MgInputRadio as MgInputRadio } from '../types/components/mg-input-radio/mg-input-radio';
+export { MgInputSelect as MgInputSelect } from '../types/components/mg-input-select/mg-input-select';
+export { MgInputText as MgInputText } from '../types/components/mg-input-text/mg-input-text';
+export { MgInputTextarea as MgInputTextarea } from '../types/components/mg-input-textarea/mg-input-textarea';
+export { MgInputTitle as MgInputTitle } from '../types/components/mg-input-title/mg-input-title';
+export { MgInputToggle as MgInputToggle } from '../types/components/mg-input-toggle/mg-input-toggle';
+export { MgMessage as MgMessage } from '../types/components/mg-message/mg-message';
+export { MgModal as MgModal } from '../types/components/mg-modal/mg-modal';
+export { MgPagination as MgPagination } from '../types/components/mg-pagination/mg-pagination';
+export { MgPanel as MgPanel } from '../types/components/mg-panel/mg-panel';
+export { MgPopover as MgPopover } from '../types/components/mg-popover/mg-popover';
+export { MgTabs as MgTabs } from '../types/components/mg-tabs/mg-tabs';
+export { MgTag as MgTag } from '../types/components/mg-tag/mg-tag';
+export { MgTooltip as MgTooltip } from '../types/components/mg-tooltip/mg-tooltip';
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -20,7 +41,4 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
 export * from '../types';

package/dist/components/index.js

@@ -1 +1,24 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
+export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
+export { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
+export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
+export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
+export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
+export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
+export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';
+export { MgInputPassword, defineCustomElement as defineCustomElementMgInputPassword } from './mg-input-password.js';
+export { MgInputRadio, defineCustomElement as defineCustomElementMgInputRadio } from './mg-input-radio.js';
+export { MgInputSelect, defineCustomElement as defineCustomElementMgInputSelect } from './mg-input-select.js';
+export { MgInputText, defineCustomElement as defineCustomElementMgInputText } from './mg-input-text.js';
+export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
+export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
+export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
+export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';
+export { MgModal, defineCustomElement as defineCustomElementMgModal } from './mg-modal.js';
+export { MgPagination, defineCustomElement as defineCustomElementMgPagination } from './mg-pagination.js';
+export { MgPanel, defineCustomElement as defineCustomElementMgPanel } from './mg-panel.js';
+export { MgPopover, defineCustomElement as defineCustomElementMgPopover } from './mg-popover.js';
+export { MgTabs, defineCustomElement as defineCustomElementMgTabs } from './mg-tabs.js';
+export { MgTag, defineCustomElement as defineCustomElementMgTag } from './mg-tag.js';
+export { MgTooltip, defineCustomElement as defineCustomElementMgTooltip } from './mg-tooltip.js';

package/dist/components/index2.js

@@ -1,10 +1,70 @@
+const errors$1 = {
+	required: "This field is required.",
+	date: {
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		min: "The date cannot be earlier than {min}",
+		max: "The date cannot be later than {max}",
+		minMax: "The date must be between {min} and {max}"
+	},
+	numeric: {
+		min: "The value cannot be less than {min}",
+		max: "The value cannot be greater than {max}",
+		minMax: "The value must be between {min} et {max}"
+	}
+};
+const nbCharLeft$1 = "{counter} characters left.";
+const input$1 = {
+	select: {
+		placeholder: "Select a value"
+	}
+};
+const form$1 = {
+	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+	allRequired: "All fields are required"
+};
+const message$1 = {
+	closeButton: "Close message"
+};
+const modal$1 = {
+	closeButton: "Close modal"
+};
+const pagination$1 = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Next page",
+	previousPage: "Previous page",
+	selectPage: "Select the page to display."
+};
+const panel$1 = {
+	editLabel: "Edit section title."
+};
+const general$1 = {
+	confirm: "Confirm",
+	cancel: "Cancel",
+	close: "Close",
+	next: "next",
+	previous: "previous"
+};
+const en = {
+	errors: errors$1,
+	nbCharLeft: nbCharLeft$1,
+	input: input$1,
+	form: form$1,
+	message: message$1,
+	modal: modal$1,
+	pagination: pagination$1,
+	panel: panel$1,
+	general: general$1
+};
+
 const errors = {
 	required: "Ce champ est obligatoire.",
 	date: {
 		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
 		min: "La date ne peut pas être antérieure au {min}",
 		max: "La date ne peut pas être postérieure au {max}",
-		minMax: "La date doit être comprise entre {min} et {max}"
+		minMax: "La date doit être comprise entre le {min} et le {max}"
 	},
 	numeric: {
 		min: "La valeur ne peut pas être inférieure à {min}",
@@ -26,9 +86,10 @@ const message = {
 	closeButton: "Fermer le message"
 };
 const modal = {
-	closeButton: "Fermer la modal"
+	closeButton: "Fermer la modale"
 };
 const pagination = {
+	label: "Pagination",
 	page: "page",
 	pages: "pages",
 	nextPage: "Page suivante",
@@ -36,10 +97,10 @@ const pagination = {
 	selectPage: "Sélectionner la page à afficher."
 };
 const panel = {
-	editLabel: "Modifer le titre de la section."
+	editLabel: "Modifier le titre de la section."
 };
 const general = {
-	validate: "Valider",
+	confirm: "Valider",
 	cancel: "Annuler",
 	close: "Fermer",
 	next: "suivant",
@@ -57,8 +118,36 @@ const fr = {
 	general: general
 };
 
-const locale = 'fr-FR';
-const messages = fr;
-const currency = 'EUR';
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get locale
+ *
+ * @param {HTMLElement} element element that needs to know the locale to use
+ * @returns {string} locale
+ */
+const getLocale = (element) => {
+  var _a;
+  return ((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang) || navigator.language || defaultLocale;
+};
+/**
+ * Get Intl object
+ * We load the defined locale but for now we only support the first subtag for messages
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const initLocales = (element) => {
+  // Get local
+  const locale = getLocale(element);
+  // Only keep first subtag
+  const localeSubtag = locale.split('-').shift();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};
 
-export { currency as c, locale as l, messages as m };
+export { initLocales as i };

package/dist/components/locale.utils.js

@@ -1,21 +1,22 @@
-import { l as locale, c as currency } from './index2.js';
-
 /**
  * Format number to the locale currency
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-function localeCurrency(number) {
+function localeCurrency(number, locale, currency) {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 }
 /**
  * Format number to locale
  *
  * @param {number} number number to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-function localeNumber(number) {
+function localeNumber(number, locale) {
   return new Intl.NumberFormat(locale).format(number);
 }
 /**
@@ -26,9 +27,10 @@ const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
  * Locale date format
  *
  * @param {string} date date to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-function localeDate(date) {
+function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }

package/dist/components/mg-badge2.js

@@ -6,13 +6,18 @@ import { C as ClassList } from './components.utils.js';
  */
 const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'];
 
-const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);-webkit-box-sizing:border-box;box-sizing:border-box;border:0.1rem solid;border-radius:50%;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+const mgBadgeCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}.mg-badge{padding:0 0.4rem;height:var(--mg-badge-size);min-width:var(--mg-badge-size);box-sizing:border-box;border:0.1rem solid;border-radius:calc(var(--mg-badge-size) / 2);font-size:var(--mg-badge-font-size);font-weight:600;text-align:center;line-height:var(--mg-badge-size)}.mg-badge.mg-badge--primary{background-color:hsl(var(--color-dark));border-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-badge.mg-badge--primary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary{background-color:hsl(var(--color-light));border-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-badge.mg-badge--secondary.mg-badge--outline{background-color:transparent;color:hsl(var(--color-light))}.mg-badge.mg-badge--success{background-color:hsl(var(--color-success));border-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-badge.mg-badge--success.mg-badge--outline{background-color:transparent;color:hsl(var(--color-success))}.mg-badge.mg-badge--warning{background-color:hsl(var(--color-warning));border-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-badge.mg-badge--warning.mg-badge--outline{background-color:transparent;color:hsl(var(--color-warning))}.mg-badge.mg-badge--danger{background-color:hsl(var(--color-danger));border-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-badge.mg-badge--danger.mg-badge--outline{background-color:transparent;color:hsl(var(--color-danger))}.mg-badge.mg-badge--info{background-color:hsl(var(--color-info));border-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-badge.mg-badge--info.mg-badge--outline{background-color:transparent;color:hsl(var(--color-info))}.mg-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant
      */
@@ -27,15 +32,22 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
     }
-    this.classList.add(`mg-badge--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-badge--${oldValue}`);
+      }
+      this.classList.add(`mg-badge--${newValue}`);
+    }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(`mg-badge--outline`);
+      this.classList.add(this.classOutline);
+    else
+      this.classList.delete(this.classOutline);
   }
   /**
    * Check if props are well configured on init

package/dist/components/mg-button2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$1 } from './mg-icon2.js';
  */
 const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
 
-const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);-webkit-box-sizing:border-box;box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;-ms-touch-action:manipulation;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;-ms-flex-pack:center;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));border-color:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));color:hsl(var(--mg-button-primary-font-color));background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))), to(hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));border-color:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));color:hsl(var(--mg-button-secondary-font-color));background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))), to(hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));border-color:hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))), to(hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));border-color:hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));color:hsl(var(--color-danger));background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))), to(hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));border-color:hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));color:hsl(var(--color-neutral));background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))), to(hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));border-color:hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - 10%));color:hsl(var(--color-dark));background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));background:-webkit-gradient(linear, left top, left bottom, from(hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))), to(hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%))));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.6rem;-moz-column-gap:0.6rem;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
+const mgButtonCss = ".mg-button.sc-mg-button{position:relative;display:inline-flex;align-items:center;column-gap:0.6rem;padding:calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;min-height:var(--default-size);box-sizing:border-box;border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));cursor:pointer;background-image:none;border-top-width:var(--mg-button-border-top-width, 0.1rem);border-right-width:var(--mg-button-border-right-width, 0.1rem);border-bottom-width:var(--mg-button-border-bottom-width, 0.1rem);border-left-width:var(--mg-button-border-left-width, 0.1rem);border-style:solid;font-family:inherit;text-decoration:none;font-weight:normal;text-align:left;touch-action:manipulation}.mg-button[disabled].sc-mg-button,.mg-button[aria-disabled=true].sc-mg-button,.mg-button.disabled.sc-mg-button{opacity:var(--mg-button-disabled-opacity);cursor:default}.mg-button.mg-button--icon.sc-mg-button{padding:0;justify-content:center;width:var(--default-size);height:var(--default-size);border-top-right-radius:var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius));border-top-left-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius));border-bottom-right-radius:var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius));border-bottom-left-radius:var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-button.mg-button--primary.sc-mg-button{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-primary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--primary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--primary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-button.mg-button--secondary.sc-mg-button{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--mg-button-secondary-font-color));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--secondary.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--secondary.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-button.mg-button--danger.sc-mg-button{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-button.mg-button--danger-alt.sc-mg-button{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-danger));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--danger-alt.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--danger-alt.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-button.mg-button--info.sc-mg-button{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-neutral));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--info.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--info.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-button.mg-button--success.sc-mg-button{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));color:hsl(var(--color-dark));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)))}.mg-button.mg-button--success.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--success.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-button.mg-button--flat.sc-mg-button{background:none;border:none}.mg-button.mg-button--flat.sc-mg-button:hover:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:focus:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button,.mg-button.mg-button--flat.sc-mg-button:active:not([disabled],[aria-disabled=true].sc-mg-button,.disabled).sc-mg-button{background:hsla(var(--color-dark), 0.1)}.mg-button.sc-mg-button mg-icon.sc-mg-button:only-child,.mg-button .sc-mg-button-s>mg-icon{display:inline-flex;flex-shrink:0;line-height:1;margin:auto 0}.mg-button.mg-button--loading.sc-mg-button>mg-icon.sc-mg-button{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.mg-button.mg-button--loading.sc-mg-button .mg-button__content.sc-mg-button{opacity:0}.mg-button__content.sc-mg-button{display:flex;align-items:center;column-gap:0.6rem}mg-button.sc-mg-button{display:inline-block}.mg-button.sc-mg-button,mg-button.sc-mg-button{vertical-align:middle;max-width:100%}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -75,11 +75,16 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
   }
-  validateVariant(newValue) {
+  validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-button> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    this.classList.add(`mg-button--${this.variant}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-button--${oldValue}`);
+      }
+      this.classList.add(`mg-button--${newValue}`);
+    }
   }
   disabledHandler(isDisabled) {
     // Remove loading when enable

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 
 const mgCharacterLeftCss = "mg-character-left.sc-mg-character-left{display:block}";
 
@@ -7,32 +7,10 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    /************
-     * Internal *
-     ************/
-    this.mustacheCounter = '{counter}';
-    /**
-     * Template to display remaining characters.
-     * Must have {counter} inside
-     */
-    this.template = messages.nbCharLeft;
     /**
      * Sets the characters to count
      */
     this.characters = '';
-    /**
-     * Calculate number character left
-     *
-     * @returns {string} message
-     */
-    this.getMessage = () => {
-      return this.template.replace(this.mustacheCounter, `<strong>${this.maxlength - this.characters.length}</strong>`);
-    };
-  }
-  validateTemplate(newValue) {
-    if (typeof newValue !== 'string' || newValue === '' || newValue.indexOf(this.mustacheCounter) === -1) {
-      throw new Error(`<mg-character-left> prop "template" must contain "${this.mustacheCounter}".`);
-    }
   }
   validateMaxlength(newValue) {
     if (typeof newValue !== 'number') {
@@ -48,8 +26,8 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @returns {void}
    */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -57,16 +35,15 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return h("span", { id: this.identifier, innerHTML: this.getMessage(), "aria-live": "polite" });
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
+  get element() { return this; }
   static get watchers() { return {
-    "template": ["validateTemplate"],
     "maxlength": ["validateMaxlength"]
   }; }
   static get style() { return mgCharacterLeftCss; }
 }, [2, "mg-character-left", {
     "identifier": [1],
-    "template": [1],
     "characters": [1],
     "maxlength": [2]
   }]);

package/dist/components/mg-form.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
-import { m as messages } from './index2.js';
+import { i as initLocales } from './index2.js';
 
-const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}";
+const mgFormCss = ".is-asterisk{color:hsl(var(--color-danger))}.mg-form,.mg-form-group{--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-title-width:15rem;--mg-inputs-shrink:0}.mg-form.mg-form--all-required,.mg-form-group.mg-form--all-required{--mg-input-title-display:none}.mg-form>p,.mg-form-group>p{font-size:1.2rem}";
 
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -44,12 +44,12 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       // All fields are required
       // mg-input-toggle can not be required
       if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-        this.requiredMessage = messages.form.allRequired;
+        this.requiredMessage = this.messages.form.allRequired;
         this.classList.add('mg-form--all-required');
       }
       // Some fields are required
       else if (requiredInputs.length > 0) {
-        this.requiredMessage = messages.form.required;
+        this.requiredMessage = this.messages.form.required;
       }
     };
     /**
@@ -86,6 +86,8 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
     // Get slotted mgIputs
     this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
     // Define required message