@mgdis/mg-components 5.0.0 → 5.2.0

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(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]}],[1,"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],"direction":[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]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"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);
+  return index.bootstrapLazy([["mg-badge_27.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]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"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"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-card"],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[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]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"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]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -2,7 +2,9 @@
   "entries": [
     "./components/atoms/mg-badge/mg-badge.js",
     "./components/atoms/mg-button/mg-button.js",
+    "./components/atoms/mg-card/mg-card.js",
     "./components/atoms/mg-character-left/mg-character-left.js",
+    "./components/atoms/mg-divider/mg-divider.js",
     "./components/atoms/mg-icon/mg-icon.js",
     "./components/atoms/mg-input-title/mg-input-title.js",
     "./components/atoms/mg-tag/mg-tag.js",

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

@@ -6,7 +6,7 @@ export class MgBadge {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classOutline = `mg-badge--outline`;
     /**
      * Define button variant

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

@@ -37,6 +37,7 @@ MgButton.args = {
   disableOnClick: false,
   isIcon: false,
   type: undefined,
+  fullWidth: 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.css

@@ -21,6 +21,10 @@
   background: hsla(var(--color-dark), 0.1);
 }
 
+:host([full-width]) {
+  display: block;
+}
+
 .mg-button.mg-button--primary {
   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));
@@ -140,6 +144,10 @@
   background: none;
   border: none;
 }
+.mg-button.mg-button--full-width {
+  display: flex;
+  justify-content: center;
+}
 .mg-button.mg-button--loading > mg-icon:first-of-type {
   position: absolute;
   left: 50%;

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

@@ -9,10 +9,15 @@ export class MgButton {
     this.onClickElementFn = null;
     this.classDisabled = 'mg-button--disabled';
     this.classLoading = 'mg-button--loading';
+    this.classFullWidth = 'mg-button--full-width';
     /**
      * Define button variant
      */
     this.variant = variants[0]; // Primary
+    /**
+     * Set button to full-width
+     */
+    this.fullWidth = false;
     /**
      * Define if button is round.
      * Used for icon button.
@@ -49,7 +54,7 @@ export class MgButton {
       }
     };
     /**
-     * Handle onKeyDown event
+     * Handle onKeydown event
      *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
@@ -64,7 +69,7 @@ export class MgButton {
       }
     };
     /**
-     * Handle onKeyUp event
+     * Handle onKeyup event
      *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
@@ -87,6 +92,17 @@ export class MgButton {
       this.classList.add(`mg-button--${newValue}`);
     }
   }
+  validateFullWidth(newValue) {
+    if (newValue && this.isIcon) {
+      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    }
+    else if (newValue) {
+      this.classList.add(this.classFullWidth);
+    }
+    else {
+      this.classList.delete(this.classFullWidth);
+    }
+  }
   disabledHandler(isDisabled) {
     // Remove loading when enable
     // Will be set back onclick
@@ -119,6 +135,7 @@ export class MgButton {
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
+    this.validateFullWidth(this.fullWidth);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
       if (typeof this.label !== 'string' || this.label.trim() === '') {
@@ -135,7 +152,7 @@ export class MgButton {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h(Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
+    return (h(Host, { role: "button", tabIndex: this.disabled ? -1 : 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { class: this.classList.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null)))));
   }
   static get is() { return "mg-button"; }
   static get encapsulation() { return "shadow"; }
@@ -230,6 +247,24 @@ export class MgButton {
         "attribute": "type",
         "reflect": false
       },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set button to full-width"
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "form": {
         "type": "string",
         "mutable": true,
@@ -313,6 +348,9 @@ export class MgButton {
     return [{
         "propName": "variant",
         "methodName": "validateVariant"
+      }, {
+        "propName": "fullWidth",
+        "methodName": "validateFullWidth"
       }, {
         "propName": "disabled",
         "methodName": "disabledHandler"

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

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-card',
+  title: 'Atoms/mg-card',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-card", Object.assign({}, filterArgs(args)), args.slot);
+export const MgCard = Template.bind({});
+MgCard.args = {
+  slot: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};

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

@@ -0,0 +1,7 @@
+.mg-card {
+  padding: var(--mg-card-padding);
+  border-radius: var(--mg-card-border-radius);
+  background: var(--mg-card-background);
+  border: var(--mg-card-border);
+  box-shadow: var(--mg-card-box-shadow);
+}

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

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export class MgCard {
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: "mg-card" }, h("slot", null)));
+  }
+  static get is() { return "mg-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-card.css"]
+    };
+  }
+}

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

@@ -0,0 +1,18 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-divider',
+  title: 'Atoms/mg-divider',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-divider", Object.assign({}, filterArgs(args, { size: 'regular' })));
+export const MgDivider = Template.bind({});
+MgDivider.args = {
+  size: 'regular',
+};

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

@@ -0,0 +1,9 @@
+.mg-divider {
+  margin: var(--mg-divider-vertical-spacing) auto;
+  width: 12rem;
+  height: var(--mg-divider-thickness);
+  background-color: var(--mg-divider-background-color);
+}
+.mg-divider.mg-divider--full {
+  width: 100%;
+}

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

@@ -0,0 +1,57 @@
+import { h } from '@stencil/core';
+export class MgDivider {
+  constructor() {
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Define component size
+     */
+    this.size = 'regular';
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("div", { class: {
+        'mg-divider': true,
+        'mg-divider--full': this.size === 'full',
+      } }));
+  }
+  static get is() { return "mg-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-divider.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-divider.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'regular' | 'full'",
+          "resolved": "\"full\" | \"regular\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define component size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
+}

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

@@ -6,7 +6,7 @@ export class MgTag {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classOutline = `mg-tag--outline`;
     /**************
      * Decorators *

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

@@ -1,6 +1,5 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../.storybook/utils';
-import { placements } from '../mg-tooltip.conf';
 export default {
   component: 'mg-tooltip',
   title: 'Atoms/mg-tooltip',
@@ -9,11 +8,7 @@ export default {
   },
   argTypes: {
     placement: {
-      options: placements,
       control: { type: 'select' },
-      table: {
-        defaultValue: { summary: 'bottom' },
-      },
     },
   },
 };

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

@@ -1,23 +1,3 @@
-/**
- * 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',
-];
 export var Guard;
 (function (Guard) {
   Guard["FOCUS"] = "focus";

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

@@ -5,7 +5,7 @@
 .mg-tooltip {
   display: none;
   padding: 0.5rem 0.8rem;
-  z-index: 9999;
+  z-index: 1000;
   border-radius: var(--mg-tooltip-border-radius);
   background-color: hsl(var(--mg-tooltip-background-color));
   color: hsl(var(--mg-tooltip-font-color));

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

@@ -136,6 +136,7 @@ export class MgTooltip {
     // Create popperjs tooltip
     this.popper = createPopper(tooltipedElement, this.tooltip, {
       placement: this.placement,
+      strategy: 'fixed',
       modifiers: [
         {
           name: 'offset',
@@ -241,7 +242,7 @@ export class MgTooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "./mg-tooltip.conf"
+              "path": "@popperjs/core"
             }
           }
         },

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -76,15 +76,6 @@ export const MgInput = (props, children, utils) => {
   if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
     ariaDescribedbyIDs.add(helpTextErrorId);
   }
-  /**
-   * Update input(s) in children
-   */
-  if (props.readonly) {
-    children = children.filter(child => child.$name$ === 'append-input');
-  }
-  else {
-    children = applyAriadescribedBy(children, ariaDescribedbyIDs, utils);
-  }
   /**
    * Return template
    *
@@ -109,9 +100,10 @@ export const MgInput = (props, children, utils) => {
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
+   * Display asterisk only if not disabled and not readonly
    *
    * @returns {VNode[]} mg-input-title
    */
-  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classList.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), 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': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, children, !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
+  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
+  return (h(TagName, { class: props.classList.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-input__input-container" }, h("strong", null, props.readonlyValue || props.value), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -16,6 +16,8 @@ export class MgInputCheckbox {
      ************/
     // HTML selector
     this.inputs = [];
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -70,25 +72,27 @@ export class MgInputCheckbox {
     this.handleBlur = () => {
       // Check validity
       this.checkValidity();
-      this.checkError();
+      this.setErrorMessage();
     };
+    /**
+     * get invalid element
+     *
+     * @returns {HTMLInputElement} element
+     */
+    this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
     /**
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly) {
-        const validity = this.getInvalidElement() === undefined;
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
       // Set error message
       this.errorMessage = undefined;
@@ -96,12 +100,6 @@ export class MgInputCheckbox {
         this.errorMessage = this.messages.errors.required;
       }
     };
-    /**
-     * get invalid element
-     *
-     * @returns {HTMLInputElement} element
-     */
-    this.getInvalidElement = () => this.inputs.find((element) => !element.disabled && !element.checkValidity());
   }
   validateValue(newValue) {
     if (newValue && newValue.every(item => isCheckboxItem(item))) {
@@ -117,6 +115,16 @@ export class MgInputCheckbox {
       throw new Error('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    this.inputs.forEach(input => {
+      input[prop] = newValue;
+    });
+    this.checkValidity();
+    if (this.hasDisplayedError) {
+      this.setErrorMessage();
+      this.hasDisplayedError = false;
+    }
+  }
   /**
    * Public method to display errors
    *
@@ -124,7 +132,8 @@ export class MgInputCheckbox {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -152,11 +161,14 @@ export class MgInputCheckbox {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
+    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value && this.value.toString(), readonlyValue: undefined, tooltip: !this.readonly ? this.tooltip : undefined, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList } }, this.checkboxItems
       .filter(item => {
       return !this.readonly || item.value;
     })
-      .map(input => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => this.inputs.push(el) }), h("label", { htmlFor: input.id }, input.title)))))));
+      .map((input, index) => (h("li", { class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "checkbox", id: input.id, name: this.identifier, value: input.value && input.value.toString(), checked: Boolean(input.value), disabled: this.readonly || this.disabled || input.disabled, required: this.required, indeterminate: input.value === null, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.inputs[index] = el;
+      } }), h("label", { htmlFor: input.id }, input.title)))))));
   }
   static get is() { return "mg-input-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -494,6 +506,15 @@ export class MgInputCheckbox {
     return [{
         "propName": "value",
         "methodName": "validateValue"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }