@mgdis/mg-components 4.1.0 → 4.2.0

package/dist/collection/locales/en/messages.json

@@ -0,0 +1,50 @@
+{
+  "errors": {
+    "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}"
+    }
+  },
+  "nbCharLeft": "{counter} characters left.",
+  "input": {
+    "select": {
+      "placeholder": "Select a value"
+    }
+  },
+  "form": {
+    "required": "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+    "allRequired": "All fields are required"
+  },
+  "message": {
+    "closeButton": "Close message"
+  },
+  "modal": {
+    "closeButton": "Close modal"
+  },
+  "pagination": {
+    "label": "Pagination",
+    "page": "page",
+    "pages": "pages",
+    "nextPage": "Next page",
+    "previousPage": "Previous page",
+    "selectPage": "Select the page to display."
+  },
+  "panel": {
+    "editLabel": "Edit section title."
+  },
+  "general": {
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "close": "Close",
+    "next": "next",
+    "previous": "previous"
+  }
+}

package/dist/collection/locales/fr/messages.json

@@ -0,0 +1,50 @@
+{
+  "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 le {min} et le {max}"
+    },
+    "numeric": {
+      "min": "La valeur ne peut pas être inférieure à {min}",
+      "max": "La valeur ne peut pas être supérieure à {max}",
+      "minMax": "La valeur doit être comprise entre {min} et {max}"
+    }
+  },
+  "nbCharLeft": "{counter} caractères disponibles.",
+  "input": {
+    "select": {
+      "placeholder": "Sélectionnez une valeur"
+    }
+  },
+  "form": {
+    "required": "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
+    "allRequired": "Tous les champs sont obligatoires"
+  },
+  "message": {
+    "closeButton": "Fermer le message"
+  },
+  "modal": {
+    "closeButton": "Fermer la modale"
+  },
+  "pagination": {
+    "label": "Pagination",
+    "page": "page",
+    "pages": "pages",
+    "nextPage": "Page suivante",
+    "previousPage": "Page précédente",
+    "selectPage": "Sélectionner la page à afficher."
+  },
+  "panel": {
+    "editLabel": "Modifier le titre de la section."
+  },
+  "general": {
+    "confirm": "Valider",
+    "cancel": "Annuler",
+    "close": "Fermer",
+    "next": "suivant",
+    "previous": "précédent"
+  }
+}

package/dist/collection/stories/grids.stories.js

@@ -2,49 +2,6 @@ import { h } from '@stencil/core';
 export default {
   title: 'Style/Layout/Grid',
 };
-const Template = () => (h("main", { id: "demo" },
-  h("h1", null, "Grid"),
-  h("p", null,
-    "You can use grid classes by using the ",
-    h("code", null, ".mg-grid"),
-    " class in the container. This call will add flex properties to the container."),
-  h("h2", null, "Auto layout"),
-  h("p", null,
-    "Default column class is ",
-    h("code", null, "mg-grid__col"),
-    ". The width will be defined by the number of element using the class."),
-  h("div", { class: "mg-grid" },
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
-  h("div", { class: "mg-grid" },
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
-  h("div", { class: "mg-grid" },
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
-  h("h2", null, "Sized column"),
-  h("p", null, "Like Bootstrap, you can use sized colomn based on a 12 colomns grid."),
-  h("p", null,
-    "The library is using the BEM methodology, so to define a column width we need to set a modifier class, for exemple ",
-    h("code", null, "mg-grid__col-2"),
-    "."),
-  [...Array.from(Array(12).keys())].map((_e, i) => (h("div", { class: "mg-grid" },
-    h("div", { class: `mg-grid__col mg-grid__col-${i + 1}` },
-      ".mg-grid__col.mg-grid__col-",
-      i + 1)))),
-  h("h2", null, "Mix"),
-  h("p", null, "You can also mix unsized column with sized column."),
-  h("div", { class: "mg-grid" },
-    h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3")),
-  h("div", { class: "mg-grid" },
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
-    h("div", { class: "mg-grid__col mg-grid__col-5" }, ".mg-grid__col.mg-grid__col-5"),
-    h("div", { class: "mg-grid__col" }, ".mg-grid__col"))));
+const Template = () => (h("main", { id: "demo" }, h("h1", null, "Grid"), h("p", null, "You can use grid classes by using the ", h("code", null, ".mg-grid"), " class in the container. This call will add flex properties to the container."), h("h2", null, "Auto layout"), h("p", null, "Default column class is ", h("code", null, "mg-grid__col"), ". The width will be defined by the number of element using the class."), h("div", { class: "mg-grid" }, h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col")), h("div", { class: "mg-grid" }, h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col")), h("div", { class: "mg-grid" }, h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col" }, ".mg-grid__col")), h("h2", null, "Sized column"), h("p", null, "Like Bootstrap, you can use sized colomn based on a 12 colomns grid."), h("p", null, "The library is using the BEM methodology, so to define a column width we need to set a modifier class, for exemple ", h("code", null, "mg-grid__col-2"), "."), [...Array.from(Array(12).keys())].map((_e, i) => (h("div", { class: "mg-grid" }, h("div", { class: `mg-grid__col mg-grid__col-${i + 1}` }, ".mg-grid__col.mg-grid__col-", i + 1)))), h("h2", null, "Mix"), h("p", null, "You can also mix unsized column with sized column."), h("div", { class: "mg-grid" }, h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3")), h("div", { class: "mg-grid" }, h("div", { class: "mg-grid__col" }, ".mg-grid__col"), h("div", { class: "mg-grid__col mg-grid__col-5" }, ".mg-grid__col.mg-grid__col-5"), h("div", { class: "mg-grid__col" }, ".mg-grid__col"))));
 export const Grid = Template.bind({});
 Grid.args = {};

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

@@ -16,25 +16,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-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", null,
-      h("mg-icon", { icon: "info-circle" }),
-      "Second Button"),
-    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { label: "Third button" }),
-      h("mg-icon", { icon: "info-circle" })))));
+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", null, h("mg-icon", { icon: "info-circle" }), "Second Button"), h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { label: "Third button" }), h("mg-icon", { icon: "info-circle" })))));
 export const Helpers = Template.bind({});
 Helpers.args = {
   align: 'left',

package/dist/collection/stories/icons.stories.js

@@ -17,10 +17,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
-  h("div", { style: { color: args.color, margin: '1rem' } },
-    h("mg-icon", Object.assign({}, filterArgs({ icon, size: args.size }, { size: 'regular' })))),
-  h("div", null, icon))))));
+const Template = (args) => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } }, h("div", { style: { color: args.color, margin: '1rem' } }, h("mg-icon", Object.assign({}, filterArgs({ icon, size: args.size }, { size: 'regular' })))), h("div", null, icon))))));
 export const Icons = Template.bind({});
 Icons.args = {
   color: '',

package/dist/collection/stories/typography.stories.js

@@ -9,18 +9,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("div", null,
-  h("h1", null, args.h1),
-  h("h2", null, args.h2),
-  h("h3", null, args.h3),
-  h("h4", null, args.h4),
-  h("h5", null, args.h5),
-  h("h6", null, args.h6),
-  h("p", null, args.p),
-  h("p", null,
-    h("strong", null, args.strong)),
-  h("p", null,
-    h("small", null, args.small))));
+const Template = (args) => (h("div", null, h("h1", null, args.h1), h("h2", null, args.h2), h("h3", null, args.h3), h("h4", null, args.h4), h("h5", null, args.h5), h("h6", null, args.h6), h("p", null, args.p), h("p", null, h("strong", null, args.strong)), h("p", null, h("small", null, args.small))));
 export const Typography = Template.bind({});
 Typography.args = {
   h1: 'The h1 heading element',

package/dist/collection/variables.css

@@ -9,8 +9,8 @@
   /* Open Sans is used for the body (mostly all texts) */
   --font-family: 'Open Sans', sans-serif;
 
-  /* Poppins is used for the headings (h1 to h6) */
-  --font-family-heading: 'Poppins', sans-serif;
+  /* Headings (h1 to h6) font can be customized */
+  --font-family-heading: var(--font-family);
 
   /* Font colors */
   --color-font-light: var(--color-light);
@@ -171,6 +171,7 @@
 
   --mg-panel-border-radius: 0.5rem;
   --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
+  --mg-panel-content-padding: 1.5rem;
 
   /*
     Layout

package/dist/collection/variables.scss

@@ -9,8 +9,8 @@
   /* Open Sans is used for the body (mostly all texts) */
   --font-family: 'Open Sans', sans-serif;
 
-  /* Poppins is used for the headings (h1 to h6) */
-  --font-family-heading: 'Poppins', sans-serif;
+  /* Headings (h1 to h6) font can be customized */
+  --font-family-heading: var(--font-family);
 
   /* Font colors */
   --color-font-light: var(--color-light);
@@ -171,6 +171,7 @@
 
   --mg-panel-border-radius: 0.5rem;
   --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
+  --mg-panel-content-padding: 1.5rem;
 
   /*
     Layout

package/dist/components/MgInput.js

@@ -50,11 +50,14 @@ const MgInput = (props, children, utils) => {
   /**
    * Check required properties
    */
-  if (typeof props.label !== 'string' || props.label === '') {
-    throw new Error('<mg-input> prop "label" is required');
+  if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
+    throw new Error('<mg-input> prop "identifier" is required.');
+  }
+  if (typeof props.label !== 'string' || props.label.trim() === '') {
+    throw new Error('<mg-input> prop "label" is required.');
   }
   if (props.labelOnTop && props.labelHide) {
-    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
   }
   /**
    * Component classes

package/dist/components/mg-badge2.js

@@ -32,6 +32,11 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
     }
   }
+  validateLabel(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      throw new Error('<mg-badge> prop "label" is required.');
+    }
+  }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
@@ -56,6 +61,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   componentWillLoad() {
     this.validateValue(this.value);
+    this.validateLabel(this.label);
     this.validateVariant(this.variant);
     this.validateOutline(this.outline);
   }
@@ -69,6 +75,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   static get watchers() { return {
     "value": ["validateValue"],
+    "label": ["validateLabel"],
     "variant": ["validateVariant"],
     "outline": ["validateOutline"]
   }; }

package/dist/components/mg-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
@@ -21,11 +21,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Define button variant
      */
     this.variant = variants[0]; // Primary
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-button');
     /**
      * Define if button is round.
      * Used for icon button.
@@ -100,7 +95,7 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.validateVariant(this.variant);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
-      if (typeof this.label !== 'string' || this.label === '') {
+      if (typeof this.label !== 'string' || this.label.trim() === '') {
         throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
       }
     }

package/dist/components/mg-input-checkbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
@@ -27,11 +27,6 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      ************/
     // HTML selector
     this.inputs = [];
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-checkbox');
     /**
      * Input name
      * If not set the value equals the identifier

package/dist/components/mg-input-date.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { l as localeDate, d as dateRegExp } from './locale.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
@@ -26,11 +26,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-date');
     /**
      * Input name
      * If not set the value equals the identifier
@@ -147,18 +142,17 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
   }
   validateValue(newValue) {
-    if (newValue !== undefined && newValue !== '' && !(typeof newValue === 'string' && dateRegExp.test(newValue))) {
+    if (newValue !== undefined && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {
       throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
     }
     else {
       this.valueChange.emit(this.value);
     }
   }
-  validateMin(newValue) {
-    this.validateDateFormat(newValue);
-  }
-  validateMax(newValue) {
-    this.validateDateFormat(newValue);
+  validateMinMax(newValue) {
+    if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === 0 || ((newValue === null || newValue === void 0 ? void 0 : newValue.length) > 0 && !(typeof newValue === 'string' && dateRegExp.test(newValue)))) {
+      throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
+    }
   }
   /**
    * Public method to display errors
@@ -170,17 +164,6 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.checkError();
     this.hasError = this.invalid;
   }
-  /**
-   * Date format validation
-   *
-   * @param {string} date date to validate
-   * @returns {void}
-   */
-  validateDateFormat(date) {
-    if ((date === null || date === void 0 ? void 0 : date.length) > 0 && !(typeof date === 'string' && dateRegExp.test(date))) {
-      throw new Error("<mg-input-date> props 'min/max' doesn't match pattern: yyyy-mm-dd");
-    }
-  }
   /*************
    * Lifecycle *
    *************/
@@ -196,8 +179,8 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.messages = locales.messages;
     // Validate
     this.validateValue(this.value);
-    this.validateMin(this.min);
-    this.validateMax(this.max);
+    this.validateMinMax(this.min);
+    this.validateMinMax(this.max);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -216,8 +199,8 @@ const MgInputDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get element() { return this; }
   static get watchers() { return {
     "value": ["validateValue"],
-    "min": ["validateMin"],
-    "max": ["validateMax"]
+    "min": ["validateMinMax"],
+    "max": ["validateMinMax"]
   }; }
   static get style() { return mgInputDateCss; }
 }, [1, "mg-input-date", {

package/dist/components/mg-input-numeric.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { a as localeCurrency, b as localeNumber } from './locale.utils.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
@@ -30,11 +30,6 @@ const MgInputNumeric$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-numeric');
     /**
      * Input name
      * If not set the value equals the identifier

package/dist/components/mg-input-password.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
@@ -17,11 +17,6 @@ const MgInputPassword$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-password');
     /**
      * Input name
      * If not set the value equals the identifier

package/dist/components/mg-input-radio.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList, a as allItemsAreString } from './components.utils.js';
+import { C as ClassList, a as allItemsAreString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
@@ -27,11 +27,6 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      ************/
     // HTML selector
     this.inputs = [];
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-radio');
     /**
      * Input name
      * If not set the value equals the identifier

package/dist/components/mg-input-select2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList, a as allItemsAreString } from './components.utils.js';
+import { C as ClassList, a as allItemsAreString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$3 } from './mg-icon2.js';
 import { d as defineCustomElement$2 } from './mg-input-title2.js';
@@ -53,11 +53,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-select');
     /**
      * Input name
      * If not set the value equals the identifier

package/dist/components/mg-input-text2.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$4 } from './mg-character-left2.js';
 import { d as defineCustomElement$3 } from './mg-icon2.js';
 import { d as defineCustomElement$2 } from './mg-input-title2.js';
 import { d as defineCustomElement$1 } from './mg-tooltip2.js';
 
-const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex;width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
+const mgInputTextCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0%;border-bottom-right-radius:0%}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{width:100%}.mg-input.mg-input--width-16 .mg-input__box{width:21rem}.mg-input.mg-input--width-4 .mg-input__box{width:7rem}.mg-input.mg-input--width-2 .mg-input__box{width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.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-input.mg-input--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex}.mg-input--width-full .mg-input__with-character-left{width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
 
 const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -25,11 +25,6 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classHasIcon = 'mg-input--has-icon';
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-text');
     /**
      * Input name
      * If not set the value equals the identifier
@@ -227,7 +222,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
   }
   get element() { return this; }
   static get watchers() { return {

package/dist/components/mg-input-textarea.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { c as createID, C as ClassList } from './components.utils.js';
+import { C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-character-left2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
@@ -24,11 +24,6 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
     // hasError (triggered by blur event)
     this.hasError = false;
-    /**
-     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-     * If not set, it will be created.
-     */
-    this.identifier = createID('mg-input-textarea');
     /**
      * Input name
      * If not set the value equals the identifier
@@ -203,7 +198,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
         'mg-input__box--resizable-vertical': this.resizable === 'vertical',
-      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
   get element() { return this; }
   static get watchers() { return {