@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/cjs/mg-components.cjs.js

@@ -1,15 +1,11 @@
 'use strict';
 
-const index = require('./index-bead7dbd.js');
+const index = require('./index-88560a66.js');
 
 /*
- Stencil Client Patch Browser v2.15.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.17.4 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
-    {
-        // shim css vars
-        index.plt.$cssShim$ = index.win.__cssshim;
-    }
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mg-components.cjs.js', document.baseURI).href));
     const opts = {};
     if (importMeta !== '') {
@@ -19,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-badge_21.cjs",[[1,"mg-pagination",{"identifier":[1],"label":[1],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"width":[8],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"width":[8],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"width":[8],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"characterLeftTemplate":[1,"character-left-template"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[6,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"displayError":[64]}],[1,"mg-tag",{"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"width":[8],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"width":[8],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"characterLeftTemplate":[1,"character-left-template"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[6,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"expanded":[4],"controls":[1],"haspopup":[8],"loading":[32],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"template":[1],"characters":[1],"maxlength":[2]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[6,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-modal.cjs",[[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]]]],["mg-popover.cjs",[[6,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}]]]], options);
+  return index.bootstrapLazy([["mg-badge_24.cjs",[[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[6,"mg-popover",{"identifier":[1],"placement":[1],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028]}],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"expanded":[1028]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1]}],[1,"mg-tag",{"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[6,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"expanded":[4],"controls":[1],"haspopup":[8],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[6,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-modal.cjs",[[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]]]]], options);
 });

package/dist/cjs/mg-modal.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bead7dbd.js');
-const index$1 = require('./index-369388eb.js');
+const index = require('./index-88560a66.js');
+const index$1 = require('./index-179621c8.js');
 
-const mgModalCss = ".mg-modal{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 70%)}.mg-modal__dialog{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:none;flex:none;-ms-flex-item-align:center;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;max-width:100%;max-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:hsl(var(--color-light));-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__content{overflow-y:auto}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal .mg-modal__content ::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal .mg-modal__content{overflow-y:auto}.mg-modal .mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
 
 const MgModal = class {
   constructor(hostRef) {
@@ -15,6 +15,9 @@ const MgModal = class {
     /************
      * Internal *
      ************/
+    // Classes
+    this.classHide = 'mg-modal--hide';
+    // IDs
     this.closeButtonId = '';
     this.titleId = '';
     /**
@@ -57,11 +60,11 @@ const MgModal = class {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-modal--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-modal--hide');
+      this.classList.delete(this.classHide);
     }
   }
   /**
@@ -85,6 +88,9 @@ const MgModal = class {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = index$1.initLocales(this.element).messages;
+    // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
     if (this.closeButton) {
@@ -99,7 +105,7 @@ const MgModal = class {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (index.h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("article", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: index$1.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" }))))));
+    return (index.h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, index.h("article", { class: "mg-modal__dialog" }, index.h("header", { class: "mg-modal__header" }, this.closeButton && (index.h("span", { class: "mg-modal__close-button" }, index.h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { icon: "cross" })))), index.h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (index.h("article", { class: "mg-modal__content" }, index.h("slot", { name: "content" }))), this.hasActions && (index.h("footer", { class: "mg-modal__footer" }, index.h("slot", { name: "actions" }))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/collection/collection-manifest.json

@@ -16,7 +16,9 @@
     "./components/molecules/inputs/mg-input-text/mg-input-text.js",
     "./components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
     "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
+    "./components/molecules/mg-details/mg-details.js",
     "./components/molecules/mg-form/mg-form.js",
+    "./components/molecules/mg-illustrated-message/mg-illustrated-message.js",
     "./components/molecules/mg-message/mg-message.js",
     "./components/molecules/mg-modal/mg-modal.js",
     "./components/molecules/mg-pagination/mg-pagination.js",
@@ -26,7 +28,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.15.1",
+    "version": "2.17.4",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/atoms/mg-badge/{mg-badge.stories.js → doc/mg-badge.stories.js}

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-badge.conf';
+import { filterArgs } from '../../../../../.storybook/utils';
+import { variants } from '../mg-badge.conf';
 export default {
   component: 'mg-badge',
   title: 'Atoms/mg-badge',
@@ -16,11 +17,14 @@ export default {
     },
   },
 };
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  // return element
-  return h("mg-badge", Object.assign({}, args));
-};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-badge", Object.assign({}, filterArgs(args, { variant: variants[0] })));
 export const MgBadge = Template.bind({});
 MgBadge.args = {
   value: '99',

package/dist/collection/components/atoms/mg-badge/mg-badge.css

@@ -28,8 +28,6 @@
   min-width: var(--mg-badge-size);
   box-sizing: border-box;
   border: 0.1rem solid;
-  border-radius: 50%;
-  /* IE FIX */
   border-radius: calc(var(--mg-badge-size) / 2);
   font-size: var(--mg-badge-font-size);
   font-weight: 600;

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -3,6 +3,11 @@ import { variants } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgBadge {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    // classes
+    this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant
      */
@@ -17,15 +22,22 @@ export class MgBadge {
       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/collection/components/atoms/mg-button/{mg-button.stories.js → doc/mg-button.stories.js}

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-button.conf';
-import { icons } from '../mg-icon/mg-icon.conf';
+import { variants, buttonTypes } from '../mg-button.conf';
+import { icons } from '../../mg-icon/mg-icon.conf';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-button',
   title: 'Atoms/mg-button',
@@ -12,19 +13,20 @@ export default {
         defaultValue: { summary: variants[0] },
       },
     },
+    type: {
+      options: [undefined, ...buttonTypes],
+      control: { type: 'select' },
+    },
   },
 };
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slot = args.slot;
-  delete args.slot;
-  const disableOnClick = args.disableOnClick;
-  delete args.disableOnClick;
-  const isIcon = args.isIcon;
-  delete args.isIcon;
-  // return element
-  return (h("mg-button", Object.assign({}, args, { "disable-on-click": disableOnClick, "is-icon": isIcon }), slot));
-};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-button", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slot);
 export const MgButton = Template.bind({});
 MgButton.args = {
   slot: 'Text button',
@@ -36,6 +38,7 @@ MgButton.args = {
   isIcon: false,
   expanded: false,
   controls: undefined,
+  type: undefined,
 };
 export const IsIcon = Template.bind({});
 IsIcon.args = Object.assign(Object.assign({}, MgButton.args), { isIcon: true, slot: h("mg-icon", { icon: Object.keys(icons)[0] }) });

package/dist/collection/components/atoms/mg-button/mg-button.conf.js

@@ -2,3 +2,7 @@
  * List of all possibles variants
  */
 export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success'];
+/**
+ * List of all possibles button types
+ */
+export const buttonTypes = ['button', 'submit', 'reset'];

package/dist/collection/components/atoms/mg-button/mg-button.css

@@ -43,72 +43,48 @@
   line-height: var(--font-size);
 }
 .mg-button.mg-button--primary {
-  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-  /* IE FIX */
-  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));
+  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: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--primary:active:not([disabled], [aria-disabled=true], .disabled) {
   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 {
-  border-color: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-  /* IE FIX */
-  border-color: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));
+  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: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--secondary:active:not([disabled], [aria-disabled=true], .disabled) {
   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 {
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));
+  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: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger:active:not([disabled], [aria-disabled=true], .disabled) {
   background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
 }
 .mg-button.mg-button--danger-alt {
-  border-color: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));
+  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: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--danger-alt:active:not([disabled], [aria-disabled=true], .disabled) {
   background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
 }
 .mg-button.mg-button--info {
-  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));
+  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: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--info:active:not([disabled], [aria-disabled=true], .disabled) {
   background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
 }
 .mg-button.mg-button--success {
-  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-  /* IE FIX */
-  border-color: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - 10%));
+  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: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
-  /* IE FIX */
   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:hover:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:focus:not([disabled], [aria-disabled=true], .disabled), .mg-button.mg-button--success:active:not([disabled], [aria-disabled=true], .disabled) {

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -16,10 +16,6 @@ export class MgButton {
      * If not set, it will be created.
      */
     this.identifier = createID('mg-button');
-    /**
-     * Disable button
-     */
-    this.disabled = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -30,15 +26,6 @@ export class MgButton {
      * Parent component have to remove the attribute 'disabled' when the process ends.
      */
     this.disableOnClick = false;
-    /**
-     * Prop to set aria-expanded on button element
-     */
-    this.expanded = false;
-    /**
-     * Option to set aria-haspopup
-     * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
-     */
-    this.haspopup = false;
     /**
      * Define if button is loading, default to false.
      * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -65,11 +52,16 @@ export class MgButton {
       }
     };
   }
-  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
@@ -112,7 +104,10 @@ export class MgButton {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled.toString(), "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-haspopup": this.haspopup, onClick: this.handleClick },
+    return (h("button", { id: this.identifier, class: this.classList.join(), type: this.type, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": this.controls, "aria-haspopup": this.haspopup !== undefined && this.haspopup.toString(), onClick: this.handleClick, 
+      // has stencil does not support form attribute on button, we set the attribute from the ref
+      // https://github.com/ionic-team/stencil/issues/2703#issuecomment-1050943715
+      ref: btn => this.form && btn.setAttribute('form', this.form) },
       this.loading && h("mg-icon", { icon: "loader", spin: true }),
       h("div", { class: "mg-button__content" },
         h("slot", null))));
@@ -179,6 +174,45 @@ export class MgButton {
       "attribute": "label",
       "reflect": false
     },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonType",
+        "resolved": "\"button\" | \"reset\" | \"submit\"",
+        "references": {
+          "ButtonType": {
+            "location": "import",
+            "path": "./mg-button.conf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define button type\nDefault: 'submit', as HTMLButtonElement type is submit by default"
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "form": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
+      },
+      "attribute": "form",
+      "reflect": false
+    },
     "disabled": {
       "type": "boolean",
       "mutable": true,
@@ -194,8 +228,7 @@ export class MgButton {
         "text": "Disable button"
       },
       "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "isIcon": {
       "type": "boolean",
@@ -248,8 +281,7 @@ export class MgButton {
         "text": "Prop to set aria-expanded on button element"
       },
       "attribute": "expanded",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "controls": {
       "type": "string",
@@ -283,8 +315,7 @@ export class MgButton {
         "text": "Option to set aria-haspopup\nThe aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity."
       },
       "attribute": "haspopup",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/atoms/mg-character-left/doc/mg-character-left.stories.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-character-left',
+  title: 'Atoms/mg-character-left',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-character-left", Object.assign({}, filterArgs(args)));
+export const MgCharacterLeft = Template.bind({});
+MgCharacterLeft.args = {
+  identifier: 'identifier',
+  characters: '',
+  maxlength: 400,
+};

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

@@ -1,33 +1,11 @@
-import { Component, h, Prop, Watch } from '@stencil/core';
-import { messages } from '../../../locales';
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { initLocales } from '../../../locales';
 export class MgCharacterLeft {
   constructor() {
-    /************
-     * 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') {
@@ -43,8 +21,8 @@ export class MgCharacterLeft {
    * @returns {void}
    */
   componentWillLoad() {
-    this.validateTemplate(this.template);
     this.validateMaxlength(this.maxlength);
+    this.messages = initLocales(this.element).messages;
   }
   /**
    * Render component
@@ -52,7 +30,12 @@ export class MgCharacterLeft {
    * @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))));
   }
   static get is() { return "mg-character-left"; }
   static get encapsulation() { return "scoped"; }
@@ -80,24 +63,6 @@ export class MgCharacterLeft {
       "attribute": "identifier",
       "reflect": false
     },
-    "template": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Template to display remaining characters.\nMust have {counter} inside"
-      },
-      "attribute": "template",
-      "reflect": false,
-      "defaultValue": "messages.nbCharLeft"
-    },
     "characters": {
       "type": "string",
       "mutable": false,
@@ -134,10 +99,8 @@ export class MgCharacterLeft {
       "reflect": false
     }
   }; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
-      "propName": "template",
-      "methodName": "validateTemplate"
-    }, {
       "propName": "maxlength",
       "methodName": "validateMaxlength"
     }]; }