@mgdis/mg-components 5.0.0 → 5.1.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],"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-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.
@@ -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-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/mg-details/doc/mg-details.stories.js

@@ -20,4 +20,5 @@ MgDetails.args = {
   toggleClosed: 'Show details',
   toggleOpened: 'Hide details',
   expanded: false,
+  hideSummary: false,
 };

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

@@ -1,3 +1,24 @@
+/**
+ * A11Y
+ */
+.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-details summary {
   display: flex;
   align-items: baseline;
@@ -7,6 +28,14 @@
 .mg-details__toggle {
   margin-left: 1.5rem;
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 0.6rem;
+  min-height: calc(var(--font-size) * var(--line-height));
+}
+.mg-details__toggle mg-icon {
+  align-self: self-end;
 }
 
 .mg-details__details {

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

@@ -1,6 +1,10 @@
 import { h } from '@stencil/core';
 export class MgDetails {
   constructor() {
+    /**
+     * Hide summary element
+     */
+    this.hideSummary = false;
     /**
      * Define if details are diplayed
      */
@@ -15,7 +19,7 @@ export class MgDetails {
     };
   }
   validateTitles(newValue) {
-    if (newValue === undefined || newValue === '') {
+    if (newValue === undefined || newValue.trim() === '') {
       throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
     }
   }
@@ -40,7 +44,7 @@ export class MgDetails {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), " ", this.expanded ? this.toggleOpened : this.toggleClosed)), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }
@@ -64,7 +68,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -81,7 +85,7 @@ export class MgDetails {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
@@ -90,6 +94,24 @@ export class MgDetails {
         "attribute": "toggle-opened",
         "reflect": false
       },
+      "hideSummary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide summary element"
+        },
+        "attribute": "hide-summary",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "expanded": {
         "type": "boolean",
         "mutable": true,

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

@@ -7,12 +7,13 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1000;
+  z-index: 2000;
   padding: 2rem 0;
   background-color: hsla(var(--color-light), 85%);
 }
 .mg-modal__dialog {
   display: flex;
+  position: relative;
   flex-direction: column;
   align-self: center;
   row-gap: 3rem;

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

@@ -1,11 +1,8 @@
 import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
+import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
-    /************
-     * Internal *
-     ************/
     // Classes
     this.classHide = 'mg-modal--hide';
     // IDs
@@ -36,6 +33,37 @@ export class MgModal {
      * Component classes
      */
     this.classList = new ClassList(['mg-modal']);
+    this.setFocus = () => {
+      // Get all focusable elements
+      this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
+        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+        return acc;
+      }, []);
+      // When close button is enabled it's the first focusable element.
+      if (this.closeButton) {
+        this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
+      }
+      // It at least one
+      if (this.modalFocusableElements.length >= 1) {
+        // Set focus on first element
+        this.modalFocusableElements[0].focus();
+        // Add event listener on last element
+        const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
+        lastFocusableElement.addEventListener('keydown', event => {
+          if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            this.modalFocusableElements[0].focus();
+          }
+        });
+        // Add event listener on first element (case shift + tab)
+        this.modalFocusableElements[0].addEventListener('keydown', event => {
+          if (event.key === 'Tab' && event.shiftKey) {
+            event.preventDefault();
+            lastFocusableElement.focus();
+          }
+        });
+      }
+    };
     /*************
      * Handlers *
      *************/
@@ -100,6 +128,26 @@ export class MgModal {
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
   }
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    new MutationObserver(mutationList => {
+      /*
+        TODO find a way to cover this callback
+      */
+      /* istanbul ignore next */
+      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
+        this.setFocus();
+      }
+    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
+    // Set focus if display on load
+    if (!this.hide) {
+      this.setFocus();
+    }
+  }
   /**
    * Render
    *

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

@@ -1,9 +1,8 @@
 .mg-panel {
   background-color: hsl(var(--mg-panel-background));
   border-radius: var(--mg-panel-border-radius);
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--mg-panel-box-shadow);
 }
-
 .mg-panel__header {
   display: flex;
   flex-wrap: wrap;
@@ -11,22 +10,14 @@
   padding: 0 1rem 0 0.3rem;
   align-items: flex-start;
 }
-
-.mg-panel__header-left,
-.mg-panel__header-right {
+.mg-panel__header-left, .mg-panel__header-right {
   display: flex;
   margin: 0.3rem 0;
 }
-
-.mg-panel__header-left--full {
-  flex: 1 1 auto;
-}
-
 .mg-panel__header-right {
   padding-left: 0.3rem;
   flex: 1 auto;
 }
-
 .mg-panel__header-left mg-input-text {
   flex-grow: 1;
   margin-left: 0.3rem;
@@ -34,16 +25,16 @@
 .mg-panel__header-left mg-button + mg-button:not([slot=append-input]) {
   margin-left: 0.3rem;
 }
-
+.mg-panel__header-left.mg-panel__header-left--full {
+  flex: 1 1 auto;
+}
 .mg-panel__collapse-button-content {
   --font-size: 1.4rem;
   --mg-button-font-weight: 600;
 }
-
 .mg-panel__content {
   padding: var(--mg-panel-content-padding);
 }
-
 .mg-panel ::slotted([slot=header-right]) {
   display: flex;
   flex-wrap: wrap;