@mgdis/mg-components 4.0.1 → 4.1.0

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

@@ -1,44 +1,36 @@
 /* eslint-disable react/jsx-no-bind */
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-modal',
   title: 'Molecules/mg-modal',
   parameters: { actions: { handles: ['component-show', 'component-hide'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slotContent = args.slotContent;
-  delete args.slotContent;
-  const slotActions = args.slotActions;
-  delete args.slotActions;
-  const closeButton = args.closeButton;
-  delete args.closeButton;
-  const modalTitle = args.modalTitle;
-  delete args.modalTitle;
-  // return element
-  return (h("div", null,
-    h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
-        const mgModal = document.querySelector('mg-modal');
-        const isHide = mgModal.hide === true;
-        if (isHide) {
-          mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
-          mgModal.hide = false;
-        }
-        else {
-          mgModal.hide = true;
-        }
-      } }, "Open modal"),
-    h("mg-modal", Object.assign({}, args, { "close-button": closeButton, "modal-title": modalTitle }),
-      slotContent && h("span", { slot: "content", innerHTML: slotContent }),
-      slotActions && h("span", { slot: "actions", innerHTML: slotActions }))));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
+  h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
+      const mgModal = document.querySelector('mg-modal');
+      const isHide = mgModal.hide === true;
+      if (isHide) {
+        mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
+        mgModal.hide = false;
+      }
+      else {
+        mgModal.hide = true;
+      }
+    } }, "Open modal"),
+  h("mg-modal", Object.assign({}, filterArgs(args)),
+    args.slotContent && h("div", { slot: "content", innerHTML: args.slotContent }),
+    args.slotActions && h("div", { slot: "actions", innerHTML: args.slotActions }))));
 export const MgModal = Template.bind({});
 MgModal.args = {
-  slotContent: `<p slot="content">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.</p>`,
+  slotContent: `<p>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.</p>`,
   slotActions: ``,
   modalTitle: 'Modal title',
   identifier: 'identifier',
@@ -48,4 +40,4 @@ MgModal.args = {
 export const WithCloseButton = Template.bind({});
 WithCloseButton.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true });
 export const WithActions = Template.bind({});
-WithActions.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true, slotActions: `<div slot="actions" class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });
+WithActions.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true, slotActions: `<div class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });

package/dist/collection/components/molecules/mg-pagination/doc/mg-pagination.stories.js

@@ -1,22 +1,18 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-pagination',
   title: 'Molecules/mg-pagination',
   parameters: { actions: { handles: ['current-page-change'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const totalPages = args.totalPages;
-  delete args.totalPages;
-  const currentPage = args.currentPage;
-  delete args.currentPage;
-  // return element
-  return h("mg-pagination", Object.assign({}, args, { "total-pages": totalPages, "current-page": currentPage }));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-pagination", Object.assign({}, filterArgs(args)));
 export const MgPagination = Template.bind({});
 MgPagination.args = {
   totalPages: 5,

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

@@ -1,39 +1,29 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-panel',
   title: 'Molecules/mg-panel',
-  parameters: { actions: { handles: ['title-change'] } },
+  parameters: { actions: { handles: ['title-change', 'expanded-change'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const panelTitle = args.panelTitle;
-  delete args.panelTitle;
-  const titleEditable = args.titleEditable;
-  delete args.titleEditable;
-  const expandToggleDisabled = args.expandToggleDisabled;
-  delete args.expandToggleDisabled;
-  const titlePattern = args.titlePattern;
-  delete args.titlePattern;
-  const titlePatternErrorMessage = args.titlePatternErrorMessage;
-  delete args.titlePatternErrorMessage;
-  // return element
-  return (h("mg-panel", Object.assign({}, args, { "panel-title": panelTitle, "title-editable": titleEditable, "expand-toggle-disabled": expandToggleDisabled, "title-pattern": titlePattern, "title-pattern-error-message": titlePatternErrorMessage }),
-    h("div", null, "Content"),
-    h("div", { slot: "header-right" },
-      h("mg-button", { variant: "secondary" },
-        h("mg-icon", { icon: "file-upload" }),
-        " Upload"),
-      h("mg-button", { "is-icon": true, variant: "secondary", label: "delete" },
-        h("mg-icon", { icon: "trash" })))));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)),
+  h("div", null, "Content"),
+  h("div", { slot: "header-right" },
+    h("mg-button", { variant: "secondary" },
+      h("mg-icon", { icon: "file-upload" }),
+      " Upload"),
+    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }),
+      h("mg-icon", { icon: "trash" })))));
 export const MgPanel = Template.bind({});
 MgPanel.args = {
   panelTitle: 'title',
   expanded: false,
   titleEditable: true,
-  expandToggleDisabled: true,
+  expandToggleDisabled: false,
 };

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

@@ -12,10 +12,6 @@ export class MgPanel {
      * Panel is opened
      */
     this.expanded = false;
-    /**
-     * Disable possibility to toggle expand
-     */
-    this.expandToggleDisabled = false;
     /**
      * Panel title is editabled
      */
@@ -284,8 +280,7 @@ export class MgPanel {
         "text": "Disable possibility to toggle expand"
       },
       "attribute": "expand-toggle-disabled",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "titleEditable": {
       "type": "boolean",

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
@@ -6,35 +7,29 @@ export default {
   parameters: {
     layout: 'centered',
     docs: { iframeHeight: 600 },
+    actions: { handles: ['display-change'] },
   },
   argTypes: {
     placement: {
       options: placements,
       control: { type: 'select' },
       table: {
-        defaultValue: { summary: placements[0] },
+        defaultValue: { summary: 'bottom' },
       },
     },
   },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slotTitle = args.slotTitle;
-  delete args.slotTitle;
-  const slotContent = args.slotContent;
-  delete args.slotContent;
-  const closeButton = args.closeButton;
-  delete args.closeButton;
-  // return element
-  return (h("mg-popover", Object.assign({}, args, { "close-button": closeButton }),
-    h("mg-button", null, "Button"),
-    slotTitle && h("h2", { slot: "title" }, slotTitle),
-    slotContent && h("p", { slot: "content" }, slotContent)));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-popover", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
+  h("mg-button", null, "Button"),
+  args.slotTitle && h("h2", { slot: "title" }, args.slotTitle),
+  args.slotContent && h("p", { slot: "content" }, args.slotContent)));
 export const MgPopover = Template.bind({});
 MgPopover.args = {
   slotTitle: `Blu bli blo bla`,
@@ -43,4 +38,5 @@ MgPopover.args = {
   closeButton: false,
   disabled: false,
   display: false,
+  placement: undefined,
 };

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

@@ -52,7 +52,7 @@ mg-popover::slotted(*) {
   left: -6px;
 }
 
-.mg-popover__title ::slotted(*) {
+.mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem;
   font-size: var(--mg-popover-title-font-size);
   font-weight: 600;

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

@@ -1,5 +1,5 @@
-import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
-import { createID } from '../../../utils/components.utils';
+import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
+import { createID, isTagName } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { initLocales } from '../../../locales';
 export class MgPopover {
@@ -78,13 +78,14 @@ export class MgPopover {
       this.display = false;
     };
   }
-  handleDisplay(newVal) {
-    if (newVal) {
+  handleDisplay(newValue) {
+    if (newValue) {
       this.show();
     }
     else {
       this.hide();
     }
+    this.displayChange.emit(newValue);
   }
   /*************
    * Lifecycle *
@@ -104,11 +105,10 @@ export class MgPopover {
    * @returns {void}
    */
   componentDidLoad() {
-    //Check if slotted title is a heading
-    const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     const slotedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slotedTitleElement !== null && !headingElements.includes(slotedTitleElement.tagName.toLowerCase())) {
-      throw new Error(`<mg-popover> Slotted title must be a heading:  ${headingElements.join(', ')}.`);
+    if (slotedTitleElement && !isTagName(slotedTitleElement, headingTags)) {
+      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
     }
     // Set close button id
     if (this.closeButton) {
@@ -266,6 +266,22 @@ export class MgPopover {
       "defaultValue": "false"
     }
   }; }
+  static get events() { return [{
+      "method": "displayChange",
+      "name": "display-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emited event when display value change"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "display",

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 import { sizes, Status } from '../mg-tabs.conf';
 export default {
   component: 'mg-tabs',
@@ -12,19 +13,17 @@ export default {
   parameters: { actions: { handles: ['active-tab-change'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // return element
-  const activeTab = args.activeTab;
-  delete args.activeTab;
-  return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
-    h("div", { slot: "tab_content-1" }, "Content 1"),
-    h("div", { slot: "tab_content-2" }, "Content 2"),
-    h("div", { slot: "tab_content-3" }, "Content 3"),
-    h("div", { slot: "tab_content-4" }, "Content 4")));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-tabs", Object.assign({}, filterArgs(args, { size: sizes[0], activeTab: 1 })),
+  h("div", { slot: "tab_content-1" }, "Content 1"),
+  h("div", { slot: "tab_content-2" }, "Content 2"),
+  h("div", { slot: "tab_content-3" }, "Content 3"),
+  h("div", { slot: "tab_content-4" }, "Content 4")));
 export const MgTabs = Template.bind({});
 MgTabs.args = {
   items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop, State, Element, Watch } from '@stencil/core';
+import { Component, Event, h, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
 import { sizes, Status } from './mg-tabs.conf';
 /**
@@ -177,21 +177,21 @@ export class MgTabs {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null,
-      h("div", { class: this.classList.join() },
-        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
-            [`${this.buttonTabBaseClass}`]: true,
-            [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
-            [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
-            [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
-          }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
-          tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
-          tab.label,
-          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
-        this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
-          h("slot", { name: this.getElementId('tab_content', index) })))))));
+    return (h("div", { class: this.classList.join() },
+      h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+          [`${this.buttonTabBaseClass}`]: true,
+          [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+          [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+          [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+        }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
+        tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
+        tab.label,
+        tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
+      this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
+        h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["mg-tabs.scss"]
   }; }

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../.storybook/utils';
 export default {
   title: 'Style/Helpers',
   argTypes: {
@@ -8,7 +9,14 @@ export default {
     },
   },
 };
-const Template = args => (h("div", null,
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
   h("h1", null, "Helpers"),
   h("h2", null, ".mg-group-elements"),
   h("p", null,
@@ -22,10 +30,10 @@ const Template = args => (h("div", null,
   h("h3", null, "Demo"),
   h("div", { class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
     h("mg-button", null, "First Button"),
-    h("mg-button", { label: "" },
+    h("mg-button", null,
       h("mg-icon", { icon: "info-circle" }),
       "Second Button"),
-    h("mg-button", { "is-icon": true, label: "Third button" },
+    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { label: "Third button" }),
       h("mg-icon", { icon: "info-circle" })))));
 export const Helpers = Template.bind({});
 Helpers.args = {

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../.storybook/utils';
 import { icons, sizes } from '../components/atoms/mg-icon/mg-icon.conf';
 export default {
   title: 'Style/Icons',
@@ -9,9 +10,16 @@ export default {
     },
   },
 };
-const Template = args => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
   h("div", { style: { color: args.color, margin: '1rem' } },
-    h("mg-icon", { icon: icon, size: args.size })),
+    h("mg-icon", Object.assign({}, filterArgs({ icon, size: args.size }, { size: 'regular' })))),
   h("div", null, icon))))));
 export const Icons = Template.bind({});
 Icons.args = {

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

@@ -2,7 +2,14 @@ import { h } from '@stencil/core';
 export default {
   title: 'Style/Typography',
 };
-const Template = args => (h("div", null,
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
   h("h1", null, args.h1),
   h("h2", null, args.h2),
   h("h3", null, args.h3),

package/dist/collection/utils/components.utils.js

@@ -72,3 +72,13 @@ export class ClassList {
 export function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');
 }
+/**
+ * Check if element is a heading
+ *
+ * @param {Element} element slotted element
+ * @param {string[]} tagNames allowed tag names list
+ * @returns {boolean} element is a heading
+ */
+export function isTagName(element, tagNames) {
+  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+}

package/dist/components/components.utils.js

@@ -72,5 +72,15 @@ class ClassList {
 function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');
 }
+/**
+ * Check if element is a heading
+ *
+ * @param {Element} element slotted element
+ * @param {string[]} tagNames allowed tag names list
+ * @returns {boolean} element is a heading
+ */
+function isTagName(element, tagNames) {
+  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+}
 
-export { ClassList as C, allItemsAreString as a, createID as c };
+export { ClassList as C, allItemsAreString as a, createID as c, isTagName as i };

package/dist/components/index.d.ts

@@ -1,27 +1,29 @@
 /* MgComponents custom elements */
-export { MgBadge as MgBadge } from '../types/components/mg-badge/mg-badge';
-export { MgButton as MgButton } from '../types/components/mg-button/mg-button';
-export { MgCharacterLeft as MgCharacterLeft } from '../types/components/mg-character-left/mg-character-left';
-export { MgForm as MgForm } from '../types/components/mg-form/mg-form';
-export { MgIcon as MgIcon } from '../types/components/mg-icon/mg-icon';
-export { MgInputCheckbox as MgInputCheckbox } from '../types/components/mg-input-checkbox/mg-input-checkbox';
-export { MgInputDate as MgInputDate } from '../types/components/mg-input-date/mg-input-date';
-export { MgInputNumeric as MgInputNumeric } from '../types/components/mg-input-numeric/mg-input-numeric';
-export { MgInputPassword as MgInputPassword } from '../types/components/mg-input-password/mg-input-password';
-export { MgInputRadio as MgInputRadio } from '../types/components/mg-input-radio/mg-input-radio';
-export { MgInputSelect as MgInputSelect } from '../types/components/mg-input-select/mg-input-select';
-export { MgInputText as MgInputText } from '../types/components/mg-input-text/mg-input-text';
-export { MgInputTextarea as MgInputTextarea } from '../types/components/mg-input-textarea/mg-input-textarea';
-export { MgInputTitle as MgInputTitle } from '../types/components/mg-input-title/mg-input-title';
-export { MgInputToggle as MgInputToggle } from '../types/components/mg-input-toggle/mg-input-toggle';
-export { MgMessage as MgMessage } from '../types/components/mg-message/mg-message';
-export { MgModal as MgModal } from '../types/components/mg-modal/mg-modal';
-export { MgPagination as MgPagination } from '../types/components/mg-pagination/mg-pagination';
-export { MgPanel as MgPanel } from '../types/components/mg-panel/mg-panel';
-export { MgPopover as MgPopover } from '../types/components/mg-popover/mg-popover';
-export { MgTabs as MgTabs } from '../types/components/mg-tabs/mg-tabs';
-export { MgTag as MgTag } from '../types/components/mg-tag/mg-tag';
-export { MgTooltip as MgTooltip } from '../types/components/mg-tooltip/mg-tooltip';
+export { MgBadge as MgBadge } from '../types/components/atoms/mg-badge/mg-badge';
+export { MgButton as MgButton } from '../types/components/atoms/mg-button/mg-button';
+export { MgCharacterLeft as MgCharacterLeft } from '../types/components/atoms/mg-character-left/mg-character-left';
+export { MgDetails as MgDetails } from '../types/components/molecules/mg-details/mg-details';
+export { MgForm as MgForm } from '../types/components/molecules/mg-form/mg-form';
+export { MgIcon as MgIcon } from '../types/components/atoms/mg-icon/mg-icon';
+export { MgIllustratedMessage as MgIllustratedMessage } from '../types/components/molecules/mg-illustrated-message/mg-illustrated-message';
+export { MgInputCheckbox as MgInputCheckbox } from '../types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox';
+export { MgInputDate as MgInputDate } from '../types/components/molecules/inputs/mg-input-date/mg-input-date';
+export { MgInputNumeric as MgInputNumeric } from '../types/components/molecules/inputs/mg-input-numeric/mg-input-numeric';
+export { MgInputPassword as MgInputPassword } from '../types/components/molecules/inputs/mg-input-password/mg-input-password';
+export { MgInputRadio as MgInputRadio } from '../types/components/molecules/inputs/mg-input-radio/mg-input-radio';
+export { MgInputSelect as MgInputSelect } from '../types/components/molecules/inputs/mg-input-select/mg-input-select';
+export { MgInputText as MgInputText } from '../types/components/molecules/inputs/mg-input-text/mg-input-text';
+export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
+export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
+export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
+export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';
+export { MgModal as MgModal } from '../types/components/molecules/mg-modal/mg-modal';
+export { MgPagination as MgPagination } from '../types/components/molecules/mg-pagination/mg-pagination';
+export { MgPanel as MgPanel } from '../types/components/molecules/mg-panel/mg-panel';
+export { MgPopover as MgPopover } from '../types/components/molecules/mg-popover/mg-popover';
+export { MgTabs as MgTabs } from '../types/components/molecules/mg-tabs/mg-tabs';
+export { MgTag as MgTag } from '../types/components/atoms/mg-tag/mg-tag';
+export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-tooltip';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -2,8 +2,10 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
 export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
 export { MgCharacterLeft, defineCustomElement as defineCustomElementMgCharacterLeft } from './mg-character-left.js';
+export { MgDetails, defineCustomElement as defineCustomElementMgDetails } from './mg-details.js';
 export { MgForm, defineCustomElement as defineCustomElementMgForm } from './mg-form.js';
 export { MgIcon, defineCustomElement as defineCustomElementMgIcon } from './mg-icon.js';
+export { MgIllustratedMessage, defineCustomElement as defineCustomElementMgIllustratedMessage } from './mg-illustrated-message.js';
 export { MgInputCheckbox, defineCustomElement as defineCustomElementMgInputCheckbox } from './mg-input-checkbox.js';
 export { MgInputDate, defineCustomElement as defineCustomElementMgInputDate } from './mg-input-date.js';
 export { MgInputNumeric, defineCustomElement as defineCustomElementMgInputNumeric } from './mg-input-numeric.js';

package/dist/components/mg-button2.js

@@ -26,10 +26,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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.
@@ -40,15 +36,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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.
@@ -127,7 +114,10 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @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 }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
+    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))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -140,6 +130,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "identifier": [1],
     "label": [1],
+    "type": [1],
+    "form": [1025],
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],