@mgdis/mg-components 3.3.0 → 4.0.0

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -1,11 +1,8 @@
-import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch, Event } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPanel {
   constructor() {
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -106,17 +103,17 @@ export class MgPanel {
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
+          h("mg-button", { "is-icon": true, variant: "flat", class: "mg-panel__edit-button", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
             h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
-            h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
+          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
+            h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
               h("mg-icon", { icon: "cross" })),
-            h("mg-button", { slot: "append-input", label: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
+            h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
               h("mg-icon", { icon: "check" }))),
         ];
       }
@@ -146,6 +143,9 @@ export class MgPanel {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validatetitlePattern(this.titlePattern);
   }
   /**
@@ -342,6 +342,7 @@ export class MgPanel {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "panelTitle",
       "methodName": "handelTileChange"

package/dist/collection/components/molecules/mg-popover/{mg-popover.stories.js → doc/mg-popover.stories.js}

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
   title: 'Molecules/mg-popover',
@@ -6,6 +7,15 @@ export default {
     layout: 'centered',
     docs: { iframeHeight: 600 },
   },
+  argTypes: {
+    placement: {
+      options: placements,
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: placements[0] },
+      },
+    },
+  },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}

package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js

@@ -0,0 +1,20 @@
+/**
+ * List of all possibles placements
+ */
+export const placements = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+];

package/dist/collection/components/molecules/mg-popover/mg-popover.js

@@ -1,7 +1,7 @@
 import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
@@ -66,7 +66,7 @@ export class MgPopover {
       this.popover.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove even listener
+      // Remove event listener
       document.removeEventListener('click', this.clickOutside, false);
     };
     /**
@@ -89,6 +89,15 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
   /**
    * Check if component props are well configured on init
    *
@@ -145,7 +154,7 @@ export class MgPopover {
     return (h(Host, null,
       h("slot", null),
       h("div", { id: this.identifier, class: "mg-popover" },
-        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.general.close, onClick: this.handleCloseButton },
+        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton },
           h("mg-icon", { icon: "cross" }))),
         h("div", { class: "mg-popover__title" },
           h("slot", { name: "title" })),
@@ -183,9 +192,14 @@ export class MgPopover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "original": "Placement",
         "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "./mg-popover.conf"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/molecules/mg-tabs/{mg-tabs.stories.js → doc/mg-tabs.stories.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import { sizes } from './mg-tabs.conf';
+import { sizes, Status } from '../mg-tabs.conf';
 export default {
   component: 'mg-tabs',
   title: 'Molecules/mg-tabs',
@@ -22,17 +22,18 @@ const Template = args => {
   return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
     h("div", { slot: "tab_content-1" }, "Content 1"),
     h("div", { slot: "tab_content-2" }, "Content 2"),
-    h("div", { slot: "tab_content-3" }, "Content 3")));
+    h("div", { slot: "tab_content-3" }, "Content 3"),
+    h("div", { slot: "tab_content-4" }, "Content 4")));
 };
 export const MgTabs = Template.bind({});
 MgTabs.args = {
-  items: ['Tab 1', 'Tab 2', 'Tab 3'],
+  items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
   label: 'Short tabs description. Needed for accessibility',
   activeTab: undefined,
   size: sizes[0], // regular
 };
 export const MgTabsItems = Template.bind({});
-MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3, items: [
     {
       label: 'Tab 1',
       icon: 'check',
@@ -41,10 +42,15 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
     {
       label: 'Tab 2',
       badge: { value: 5, label: 'messages' },
-      disabled: true,
+      status: Status.DISABLED,
     },
     {
       label: 'Tab 3',
       icon: 'cross',
     },
+    {
+      label: 'Tab 4',
+      icon: 'trash',
+      status: Status.HIDDEN,
+    },
   ] });

package/dist/collection/components/molecules/mg-tabs/mg-tabs.conf.js

@@ -1,3 +1,10 @@
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
 /**
  * List of all possibles sizes
  */

package/dist/collection/components/molecules/mg-tabs/mg-tabs.css

@@ -35,6 +35,9 @@
   border-bottom-color: hsl(var(--color-info));
   font-weight: 700;
 }
+.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden {
+  display: none;
+}
 
 .mg-tabs__content-container:focus-visible {
   outline: none;

package/dist/collection/components/molecules/mg-tabs/mg-tabs.js

@@ -1,6 +1,6 @@
 import { Component, Event, h, Host, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
-import { sizes } from './mg-tabs.conf';
+import { sizes, Status } from './mg-tabs.conf';
 /**
  * type TabItem validation function
  *
@@ -10,6 +10,12 @@ import { sizes } from './mg-tabs.conf';
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    this.tabPanel = 'panel';
+    this.startIndex = 1;
+    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -32,6 +38,46 @@ export class MgTabs {
      * Component classes
      */
     this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
      *
@@ -41,6 +87,14 @@ export class MgTabs {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
      *
@@ -51,16 +105,14 @@ export class MgTabs {
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -86,7 +138,7 @@ export class MgTabs {
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item, disabled: false }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -101,7 +153,7 @@ export class MgTabs {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
     else {
-      this.activeTabChange.emit(newValue);
+      this.setActiveTab(newValue);
     }
   }
   /*************
@@ -127,25 +179,19 @@ export class MgTabs {
   render() {
     return (h(Host, null,
       h("div", { class: this.classList.join() },
-        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
-          const tabIndex = index + 1;
-          return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: {
-              'mg-tabs__navigation-button': true,
-              'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
-              'mg-tabs__navigation-button--disabled': tab.disabled,
-            }, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex, disabled: tab.disabled },
-            tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
-            tab.label,
-            tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-        })),
-        this.tabs.map((_tab, index) => {
-          const tabIndex = index + 1;
-          return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" },
-            h("slot", { name: `tab_content-${tabIndex}` })));
-        }))));
+        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+            [`${this.buttonTabBaseClass}`]: true,
+            [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+            [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+            [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+          }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
+          tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
+          tab.label,
+          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
+        this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
+          h("slot", { name: this.getElementId('tab_content', index) })))))));
   }
   static get is() { return "mg-tabs"; }
-  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["mg-tabs.scss"]
   }; }

package/dist/collection/locales/index.js

@@ -1,4 +1,33 @@
-export const locale = 'fr-FR';
-import fr from './fr-FR/messages.json';
-export const messages = fr;
-export const currency = 'EUR';
+import en from './en/messages.json';
+import fr from './fr/messages.json';
+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
+export 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],
+  };
+};

package/dist/collection/stories/helpers.stories.js

@@ -0,0 +1,33 @@
+import { h } from '@stencil/core';
+export default {
+  title: 'Style/Helpers',
+  argTypes: {
+    align: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => (h("div", null,
+  h("h1", null, "Helpers"),
+  h("h2", null, ".mg-group-elements"),
+  h("p", null,
+    "Buttons can be grouped in an HTMLelement using the ",
+    h("code", null, ".mg-group-elements"),
+    " class, it will ensure a 10px margin space between them, even verticaly. Above exemples are using it."),
+  h("p", null,
+    "By adding the ",
+    h("code", null, ".mg-group-elements--align-right"),
+    " class you 'll set a right alignment of the button, even when line breaks."),
+  h("h3", null, "Demo"),
+  h("div", { class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
+    h("mg-button", null, "First Button"),
+    h("mg-button", { label: "" },
+      h("mg-icon", { icon: "info-circle" }),
+      "Second Button"),
+    h("mg-button", { "is-icon": true, label: "Third button" },
+      h("mg-icon", { icon: "info-circle" })))));
+export const Helpers = Template.bind({});
+Helpers.args = {
+  align: 'left',
+};

package/dist/collection/utils/locale.utils.js

@@ -1,20 +1,22 @@
-import { locale, currency } from '../locales';
 /**
  * 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
  */
-export function localeCurrency(number) {
+export 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
  */
-export function localeNumber(number) {
+export function localeNumber(number, locale) {
   return new Intl.NumberFormat(locale).format(number);
 }
 /**
@@ -25,9 +27,10 @@ export 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
  */
-export function localeDate(date) {
+export function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }

package/dist/collection/variables.css

@@ -53,11 +53,11 @@
   --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
 
   /* Danger */
-  /* #df242c; */
-  /* rgb(223, 36, 44); */
+  /* #db1f29; */
+  /* rgb(219, 31, 41); */
   --color-danger-h: 357;
-  --color-danger-s: 74.5%;
-  --color-danger-l: 50.8%;
+  --color-danger-s: 75%;
+  --color-danger-l: 49%;
   --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
 
   /* Dark */
@@ -99,6 +99,7 @@
   /*
     <mg-icon>
    */
+  --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
   --mg-icon-large-size: 2.4rem;
   --mg-icon-extra-large-size: 3.6rem;
@@ -111,6 +112,7 @@
   --mg-button-icon-border-radius: var(--default-size);
   --mg-button-disabled-opacity: 0.6;
   --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
+  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -161,7 +163,7 @@
    */
   --mg-modal-border-radius: 0.5rem;
   --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.3rem;
+  --mg-modal-content-font-size: 1.2rem;
 
   /*
     <mg-panel>
@@ -187,6 +189,9 @@
   --mg-inputs-color: #b5c2c9;
   --mg-inputs-spacer: 1rem;
 
+  /* Error message background */
+  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
+
   /* Input focus shadow */
   /* #b5c2c9 */
   /* rgb(0, 221, 255); */

package/dist/collection/variables.scss

@@ -53,11 +53,11 @@
   --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
 
   /* Danger */
-  /* #df242c; */
-  /* rgb(223, 36, 44); */
+  /* #db1f29; */
+  /* rgb(219, 31, 41); */
   --color-danger-h: 357;
-  --color-danger-s: 74.5%;
-  --color-danger-l: 50.8%;
+  --color-danger-s: 75%;
+  --color-danger-l: 49%;
   --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
 
   /* Dark */
@@ -99,6 +99,7 @@
   /*
     <mg-icon>
    */
+  --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
   --mg-icon-large-size: 2.4rem;
   --mg-icon-extra-large-size: 3.6rem;
@@ -111,6 +112,7 @@
   --mg-button-icon-border-radius: var(--default-size);
   --mg-button-disabled-opacity: 0.6;
   --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
+  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -161,7 +163,7 @@
    */
   --mg-modal-border-radius: 0.5rem;
   --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.3rem;
+  --mg-modal-content-font-size: 1.2rem;
 
   /*
     <mg-panel>
@@ -187,6 +189,9 @@
   --mg-inputs-color: #b5c2c9;
   --mg-inputs-spacer: 1rem;
 
+  /* Error message background */
+  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
+
   /* Input focus shadow */
   /* #b5c2c9 */
   /* rgb(0, 221, 255); */

package/dist/components/MgInput.js

@@ -1,13 +1,5 @@
 import { h } from '@stencil/core/internal/client';
 
-/**
- * Possible input classes
- */
-var InputClass;
-(function (InputClass) {
-  InputClass["ERROR"] = "is-not-valid";
-})(InputClass || (InputClass = {}));
-
 /**
  * Apply in all input child node the aria-describedby attribute
  *
@@ -36,11 +28,8 @@ const manageClasses = (props) => {
     props.classList.add('mg-input--label-on-top');
   if (props.readonly)
     props.classList.add('mg-input--readonly');
-  if (props.width !== undefined)
-    props.classList.add(`mg-input--width-${props.width}`);
-  if (props.readonly || props.disabled) {
-    props.classList.delete(InputClass.ERROR);
-  }
+  if (props.mgWidth !== undefined)
+    props.classList.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
@@ -74,12 +63,7 @@ const MgInput = (props, children, utils) => {
   /**
    * a11y IDs
    */
-  const ariaDescribedbyIDs = new Set();
-  // Character Left
-  const characterLeftId = `${props.identifier}-character-left`;
-  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
-    ariaDescribedbyIDs.add(characterLeftId);
-  }
+  const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
   // Help text
   const helpTextId = `${props.identifier}-help-text`;
   if (typeof props.helpText === 'string' && props.helpText !== '') {
@@ -135,12 +119,11 @@ const MgInput = (props, children, utils) => {
     props.readonly ? (h("div", { class: "mg-input__input-container" },
       h("strong", null, props.readonlyValue || props.value),
       children)) : (h("div", { class: "mg-input__input-container" },
-      h("div", { class: "mg-input__input" },
+      h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
         children,
         !props.labelOnTop && props.tooltip && getTooltip()),
-      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
       props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
-      props.errorMessage && h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+      props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
 
-export { InputClass as I, MgInput as M };
+export { MgInput as M };