@mgdis/mg-components 4.0.1 → 4.1.0

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-88560a66.js');
-const index$1 = require('./index-a39c5567.js');
+const index$1 = require('./index-179621c8.js');
 
 const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal .mg-modal__content{overflow-y:auto}.mg-modal .mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
 

package/dist/collection/collection-manifest.json

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

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

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

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

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

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

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

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

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

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

@@ -1,23 +1,20 @@
 import { h } from '@stencil/core';
-import messages from '../../../../locales/en/messages.json';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-character-left',
   title: 'Atoms/mg-character-left',
-  argTypes: {
-    template: {
-      table: {
-        defaultValue: { summary: messages.nbCharLeft },
-      },
-    },
-  },
 };
-const Template = args => h("mg-character-left", Object.assign({}, args));
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-character-left", Object.assign({}, filterArgs(args)));
 export const MgCharacterLeft = Template.bind({});
 MgCharacterLeft.args = {
   identifier: 'identifier',
   characters: '',
   maxlength: 400,
-  template: undefined,
 };
-export const CustomTemplate = Template.bind({});
-CustomTemplate.args = Object.assign(Object.assign({}, MgCharacterLeft.args), { maxlength: 100, template: 'Custom template with {counter} characters left.' });

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 import { icons, sizes, variants } from '../mg-icon.conf';
 export default {
   component: 'mg-icon',
@@ -18,17 +19,24 @@ export default {
     },
   },
 };
-const Template = args => {
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => {
   const color = args.color;
   delete args.color;
   // return element
   return (h("div", { style: { color } },
-    h("mg-icon", Object.assign({}, args))));
+    h("mg-icon", Object.assign({}, filterArgs(args, { size: sizes[1] })))));
 };
 export const MgIcon = Template.bind({});
 MgIcon.args = {
   color: '',
   icon: Object.keys(icons)[0],
-  size: sizes[0],
+  size: undefined,
   spin: false,
 };

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

@@ -10,12 +10,16 @@ export const icons = {
   'align-right': () => (h("path", { fill: "currentColor", d: "M2.12 7.1h11.76c.25 0 .45-.21.45-.46v-.9c0-.25-.2-.45-.45-.45H2.12c-.25 0-.45.2-.45.45v.9c0 .25.2.45.45.46Zm11.76 5.42H2.12c-.25 0-.45.21-.45.46v.9c0 .25.2.45.45.45h11.76c.25 0 .45-.2.45-.45V13a.466.466 0 0 0-.44-.48h-.01ZM14 1.67H6.55a.36.36 0 0 0-.36.33v1.11c0 .2.16.36.36.37H14c.2 0 .36-.17.36-.37V2a.36.36 0 0 0-.36-.33Zm0 7.23H6.55c-.2 0-.36.17-.36.37v1.08c0 .2.16.36.36.36H14c.2 0 .36-.16.36-.36V9.27c0-.2-.16-.36-.36-.37Z" })),
   'api': () => (h("path", { fill: "currentColor", d: "M14.44 11.47h-.02l-.66-.1-.02-.08c-.03-.11-.08-.21-.13-.31l-.04-.07.4-.54v-.02l-.52-.52h-.02l-.54.41-.07-.04c-.1-.05-.2-.09-.31-.13l-.08-.02-.1-.67v-.01h-.73v.02l-.1.66-.08.02c-.11.03-.21.08-.31.13l-.07.04-.55-.41-.52.52v.02l.41.54-.04.07c-.05.1-.09.2-.13.31l-.02.08-.67.1h-.01v.73h.02l.66.1.02.08c.03.1.08.21.13.3l.04.07-.41.55.52.52h.02l.54-.41.07.04c.1.05.2.09.31.13l.08.02.1.67v.01h.73v-.02l.1-.66.08-.02c.11-.03.21-.08.31-.13l.07-.04.55.41.52-.52v-.02l-.4-.54.04-.07c.05-.1.09-.2.13-.31l.02-.08.67-.1h.01v-.73Zm-2.46 1.38c-.56 0-1.01-.45-1.01-1.01s.45-1.01 1.01-1.01 1.01.45 1.01 1.01-.45 1.01-1.01 1.01ZM8.51 5.81c-.11-.09-.27-.14-.5-.14h-.38v1.17h.27c.26 0 .45-.05.58-.15.13-.1.19-.25.19-.44s-.05-.34-.16-.43Zm1.57 5.13-.3-.4c-.1-.1-.09-.27 0-.37l.52-.52c.1-.1.26-.1.37 0l.4.29c.06-.03.13-.06.2-.08l.07-.49c0-.14.12-.25.26-.25h.45a5.44 5.44 0 1 0-10.5-1.99 5.44 5.44 0 0 0 5.44 5.44c.78 0 1.54-.17 2.25-.49v-.6c0-.14.11-.26.26-.26l.49-.07c.02-.07.05-.13.08-.2Zm.18-5.96h.84v3.94h-.84V4.98ZM5.4 8.92l-.29-.94H3.67l-.29.94h-.9l1.39-3.96h1.02l1.4 3.96h-.9Zm3.72-1.74c-.26.23-.64.34-1.13.34h-.36v1.4h-.84V4.98h1.26c.48 0 .84.1 1.09.31.25.21.37.51.37.92 0 .42-.13.75-.4.97ZM4.4 5.57c-.06.23-.23.8-.51 1.71h1.03c-.26-.85-.41-1.33-.45-1.44-.03-.11-.06-.2-.07-.26Z" })),
   'arrow-down': () => (h("path", { fill: "currentColor", d: "M13,10.1H10.23a.31.31,0,0,1-.32-.28h0V.94A.3.3,0,0,0,9.59.65H6.37A.32.32,0,0,0,6,.94H6V9.81a.29.29,0,0,1-.31.29H3a.3.3,0,0,0-.31.29.27.27,0,0,0,.08.22l5.06,4.58a.36.36,0,0,0,.46,0l5-4.58a.29.29,0,0,0,0-.42C13.22,10.1,13.12,10.1,13,10.1Z" })),
+  'arrow-down-right': () => (h("path", { fill: "currentColor", d: "m1.98 3.47 8.75 8.75H6.94c-.58 0-1.05.47-1.05 1.06s.47 1.05 1.05 1.05h6.33c.58 0 1.05-.47 1.05-1.05V6.94a1.05 1.05 0 1 0-2.1 0v3.79L3.47 1.98c-.41-.41-1.08-.41-1.49 0-.41.41-.41 1.08 0 1.49Z" })),
   'arrow-left': () => (h("path", { fill: "currentColor", d: "M5.88,12.93V10.18a.3.3,0,0,1,.28-.32H15a.31.31,0,0,0,.29-.33h0V6.32A.31.31,0,0,0,15,6H6.17a.32.32,0,0,1-.29-.31h0V2.93a.3.3,0,0,0-.28-.32.32.32,0,0,0-.23.09L.79,7.76a.36.36,0,0,0,0,.46l4.58,5a.31.31,0,0,0,.43,0A.4.4,0,0,0,5.88,12.93Z" })),
   'arrow-right': () => (h("path", { fill: "currentColor", d: "M10.16,3V5.75a.3.3,0,0,1-.28.32H1a.31.31,0,0,0-.29.33h0V9.61A.31.31,0,0,0,1,9.94H9.87a.29.29,0,0,1,.29.31h0V13a.3.3,0,0,0,.28.32.32.32,0,0,0,.23-.09l4.58-5.06a.36.36,0,0,0,0-.46l-4.58-5a.3.3,0,0,0-.42,0C10.16,2.76,10.16,2.87,10.16,3Z" })),
   'arrow-rotate': () => (h("path", { fill: "currentColor", d: "M8.02 1.67c-1.6 0-3.15.59-4.33 1.67a6.316 6.316 0 0 0-.38 8.94 6.324 6.324 0 0 0 8.94.37.29.29 0 0 0 0-.42l-1-1a.296.296 0 0 0-.41 0 4.302 4.302 0 0 1-5.76-.09 4.276 4.276 0 0 1-.21-6.06 4.276 4.276 0 0 1 6.06-.21L9.86 5.95c-.11.12-.18.27-.18.43 0 .34.28.62.62.62h3.44c.34-.01.6-.29.59-.63V2.94a.62.62 0 0 0-.18-.44.61.61 0 0 0-.85 0l-.91.91a6.37 6.37 0 0 0-4.38-1.75h.02Z" })),
   'arrow-rotate-backward': () => (h("path", { fill: "currentColor", d: "M8 1.67c-1.63 0-3.2.63-4.38 1.75l-.91-.91a.6.6 0 0 0-.85-.01h-.01a.62.62 0 0 0-.18.44v3.43c-.01.34.25.62.59.63H5.7c.34 0 .62-.28.62-.62 0-.16-.07-.31-.18-.43L5.07 4.87a4.276 4.276 0 0 1 6.06.21 4.276 4.276 0 0 1-.21 6.06 4.302 4.302 0 0 1-5.76.09.296.296 0 0 0-.41 0l-1 1a.29.29 0 0 0 0 .42 6.324 6.324 0 0 0 8.94-.37 6.316 6.316 0 0 0-.38-8.94 6.365 6.365 0 0 0-4.33-1.67Z" })),
   'arrow-up': () => (h("path", { fill: "currentColor", d: "M3.06,5.82H5.81a.31.31,0,0,1,.32.28h0V15a.31.31,0,0,0,.33.29H9.67A.3.3,0,0,0,10,15h0V6.11a.3.3,0,0,1,.31-.29h2.75a.3.3,0,0,0,.23-.51L8.23.73a.36.36,0,0,0-.46,0l-5,4.58a.3.3,0,0,0,0,.43C2.82,5.83,2.92,5.82,3.06,5.82Z" })),
+  'arrow-up-right': () => (h("path", { fill: "currentColor", d: "m3.47 14.02 8.75-8.75v3.78c0 .58.47 1.05 1.06 1.05s1.05-.47 1.05-1.05V2.72c0-.58-.47-1.05-1.05-1.05H6.94a1.05 1.05 0 1 0 0 2.1h3.78l-8.74 8.76c-.41.41-.41 1.08 0 1.49s1.08.41 1.49 0Z" })),
   'arrow-up-right-square': () => (h("path", { fill: "currentColor", d: "M14.33 3v10A1.34 1.34 0 0 1 13 14.33H3A1.34 1.34 0 0 1 1.67 13V3A1.34 1.34 0 0 1 3 1.67h10A1.34 1.34 0 0 1 14.33 3Zm-2.48.46H8.68a.67.67 0 0 0-.68.7.63.63 0 0 0 .2.47l.91.91-5.53 5.53a.33.33 0 0 0 0 .48l.87.87a.33.33 0 0 0 .48 0l5.53-5.52.91.9a.69.69 0 0 0 1 0 .71.71 0 0 0 .19-.48V4.15a.67.67 0 0 0-.67-.67Z" })),
+  'arrows-compare': () => h("path", { fill: "currentColor", d: "M5.81 9.47H.67v1.47h5.14v2.2l2.93-2.93-2.93-2.93v2.2Zm4.39-.73v-2.2h5.14V5.07H10.2v-2.2L7.27 5.8l2.93 2.93Z" }),
+  'arrows-right-down': () => (h("path", { fill: "currentColor", d: "M10.68 10.78c.16.17.16.45-.02.61l-2.8 2.78a.43.43 0 0 1-.31.12.42.42 0 0 1-.31-.12l-2.8-2.78a.44.44 0 0 1 0-.62.44.44 0 0 1 .62 0l2.06 2.05V5.38H2.11c-.24 0-.44-.19-.44-.44 0-.24.2-.44.44-.44H8v8.32l2.06-2.05a.44.44 0 0 1 .62 0Zm3.53-6.14-2.78-2.8a.438.438 0 0 0-.61-.02.44.44 0 0 0 0 .62l2.05 2.06H8.89v.88h3.98l-2.05 2.06a.44.44 0 0 0 0 .62c.17.17.45.17.62 0l2.78-2.8s.07-.09.09-.14c.02-.05.03-.11.03-.17 0-.11-.04-.23-.12-.31Z" })),
   'arrows-right-left': () => (h("path", { fill: "currentColor", d: "M.73,5.65V5.23a.64.64,0,0,1,.64-.64H12V3.31a.64.64,0,0,1,.64-.64.63.63,0,0,1,.45.18L15.19,5a.63.63,0,0,1,0,.9L13.05,8A.65.65,0,0,1,12,7.57V6.29H1.37a.64.64,0,0,1-.64-.64Zm14,4.06H4.09V8.43A.64.64,0,0,0,3,8L.87,10.11a.63.63,0,0,0,0,.9L3,13.15a.64.64,0,0,0,.91,0,.61.61,0,0,0,.18-.45V11.41H14.73a.63.63,0,0,0,.64-.64h0v-.42a.63.63,0,0,0-.64-.64Z" })),
   'arrows-rotate': () => (h("path", { fill: "currentColor", d: "M14.3 6.37V2.94c0-.16-.06-.32-.18-.43a.6.6 0 0 0-.85 0l-.91.91a6.354 6.354 0 0 0-3.31-1.65 6.365 6.365 0 0 0-7.33 5.22h2.14c.16-.72.5-1.38 1-1.92v-.02a4.281 4.281 0 0 1 6.05-.18L9.84 6c-.1.1-.16.24-.18.38 0 .34.28.62.62.62h3.44c.33-.02.59-.3.58-.63ZM1.71 9.63v3.43c0 .16.06.32.18.43a.6.6 0 0 0 .85 0l.91-.91c.92.88 2.09 1.46 3.35 1.66 3.47.57 6.74-1.77 7.31-5.24h-2.14c-.17.74-.54 1.42-1.06 1.97a4.254 4.254 0 0 1-6.02.16l1.07-1.08c.11-.11.17-.27.17-.42A.63.63 0 0 0 5.72 9H2.28c-.33.03-.58.3-.57.63Z" })),
   'arrows-rotate-backward': () => (h("path", { fill: "currentColor", d: "M2.3,7h3.4c0.3,0,0.6-0.3,0.6-0.6c0-0.1-0.1-0.3-0.2-0.4L5.1,4.9c1.7-1.6,4.4-1.5,6,0.2c0,0,0,0,0,0  c0.5,0.5,0.8,1.2,1,1.9h2.1C13.7,3.5,10.4,1.2,7,1.8C5.7,2,4.6,2.6,3.6,3.4L2.7,2.5c-0.2-0.2-0.6-0.2-0.8,0c0,0,0,0,0,0l0,0  C1.8,2.6,1.7,2.8,1.7,2.9v3.4C1.7,6.7,1.9,7,2.3,7z M13.7,9h-3.4C9.9,9,9.7,9.3,9.7,9.6c0,0.2,0.1,0.3,0.2,0.4l1.1,1.1  c-1.7,1.6-4.4,1.5-6-0.2C4.4,10.4,4,9.7,3.8,9H1.7c0.6,3.5,3.9,5.8,7.3,5.2c1.3-0.2,2.4-0.8,3.3-1.7l0.9,0.9c0.2,0.2,0.6,0.2,0.8,0  c0,0,0,0,0,0l0,0c0.1-0.1,0.2-0.3,0.2-0.4V9.6C14.3,9.3,14.1,9,13.7,9z" })),
@@ -39,11 +43,15 @@ export const icons = {
   'conversation': () => (h("path", { fill: "currentColor", d: "M11.22,6.48c0-2.11-2.36-3.81-5.28-3.81S.67,4.37.67,6.48a3.15,3.15,0,0,0,1,2.19A5.17,5.17,0,0,1,.72,10a.2.2,0,0,0,0,.21.23.23,0,0,0,.19.12,4.79,4.79,0,0,0,2.25-.6,6.84,6.84,0,0,0,2.82.6C8.86,10.29,11.22,8.58,11.22,6.48Zm3.1,5.23a3.08,3.08,0,0,0,1-2.19C15.28,7.93,14,6.57,12,6a3.84,3.84,0,0,1,0,.48C12,9,9.3,11.05,6,11.05a7.16,7.16,0,0,1-.8-.05A5.6,5.6,0,0,0,10,13.33a6.7,6.7,0,0,0,2.82-.59,4.66,4.66,0,0,0,2.25.59.21.21,0,0,0,.19-.11.2.2,0,0,0,0-.21,5.15,5.15,0,0,1-.91-1.3Z" })),
   'cog': () => (h("path", { fill: "currentColor", d: "M14.82 9.76 13.56 9a5.54 5.54 0 0 0 0-2.07l1.26-.72a.36.36 0 0 0 .18-.38A7.5 7.5 0 0 0 13.37 3a.35.35 0 0 0-.44 0l-1.26.72a5.51 5.51 0 0 0-1.79-1V1.21a.34.34 0 0 0-.27-.34 7.29 7.29 0 0 0-3.22 0 .34.34 0 0 0-.28.34v1.45a5.83 5.83 0 0 0-1.79 1L3.06 3a.35.35 0 0 0-.43 0A7.24 7.24 0 0 0 1 5.83a.34.34 0 0 0 .16.41L2.44 7a5.49 5.49 0 0 0 0 2l-1.26.73a.35.35 0 0 0-.16.41A7.24 7.24 0 0 0 2.63 13a.35.35 0 0 0 .43.07l1.26-.73a5.56 5.56 0 0 0 1.79 1v1.45a.35.35 0 0 0 .28.34 7.29 7.29 0 0 0 3.22 0 .35.35 0 0 0 .28-.34v-1.45a6 6 0 0 0 1.79-1l1.26.73a.35.35 0 0 0 .43-.07A7.39 7.39 0 0 0 15 10.17a.37.37 0 0 0-.17-.41Zm-6.82.6A2.36 2.36 0 1 1 10.35 8 2.36 2.36 0 0 1 8 10.36Z" })),
   'comment': () => (h("path", { fill: "currentColor", d: "M8 1.67c-3.37-.12-6.21 2.51-6.33 5.88 0 1.36.5 2.68 1.41 3.69-.26 1-.72 1.94-1.36 2.76-.04.08-.04.17 0 .25.03.08.1.13.18.13 1.3-.03 2.54-.55 3.48-1.45.83.34 1.72.51 2.62.5 3.37.12 6.21-2.51 6.33-5.88-.12-3.37-2.96-6-6.33-5.88Zm2.53 8.43c0 .14-.11.25-.25.25H5.73c-.14 0-.25-.1-.26-.24V9.2c0-.17.13-.3.3-.31h4.5c.14 0 .26.12.26.26v.95Zm.92-3.29c0 .17-.13.3-.3.3h-6.3c-.17 0-.3-.13-.3-.3V6c0-.16.12-.29.28-.3H11.15c.16 0 .29.12.3.28V6.81Z" })),
+  'comment-sms': () => (h("path", { fill: "currentColor", d: "M8 2.67c-3.37 0-6.1 2.21-6.1 4.95.02 1.18.51 2.3 1.36 3.11-.26.85-.71 1.62-1.3 2.28a.2.2 0 0 0-.04.21c.03.07.1.11.17.11 1.22-.02 2.4-.45 3.34-1.22.82.31 1.68.46 2.56.46 3.37 0 6.1-2.22 6.1-4.95S11.37 2.67 8 2.67M4.95 8.39a.76.76 0 1 1 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1 .76-.76c0 .42-.34.76-.76.76m3.05 0a.76.76 0 1 1-.02-1.52c.42 0 .77.33.77.75v.01c0 .42-.34.76-.76.76" })),
   'credit-card': () => (h("path", { fill: "currentColor", d: "M14 2.67H2A1.33 1.33 0 0 0 .67 4v8A1.32 1.32 0 0 0 2 13.33h12A1.32 1.32 0 0 0 15.33 12V4A1.32 1.32 0 0 0 14 2.67M14 12H2V8h12Zm0-6.67H2V4h12Z" })),
   'cross': () => (h("path", { fill: "currentColor", d: "M14.26 12.74 9.52 8l4.7-4.7a.29.29 0 0 0 0-.41l-1.1-1.1a.29.29 0 0 0-.41 0L8 6.48 3.26 1.74a.24.24 0 0 0-.34 0L1.74 2.91a.24.24 0 0 0 0 .34L6.48 8l-4.7 4.7a.29.29 0 0 0 0 .41l1.1 1.1a.29.29 0 0 0 .41 0L8 9.52l4.74 4.74a.24.24 0 0 0 .34 0l1.17-1.17a.24.24 0 0 0 0-.34Z" })),
   'cross-circle': () => (h("path", { fill: "currentColor", d: "M8.06.67H8A7.33 7.33 0 0 0 .68 8v.1a7.42 7.42 0 0 0 7.23 7.23A7.33 7.33 0 1 0 8.06.67Zm3.6 9.57a.28.28 0 0 1 0 .4l-.19.2-.61.61-.2.19a.27.27 0 0 1-.39 0L8 9.41l-2.23 2.24a.27.27 0 0 1-.39 0l-.2-.2-.6-.6-.19-.2a.28.28 0 0 1 0-.4L6.6 8 4.36 5.76a.28.28 0 0 1 0-.4l1-1a.28.28 0 0 1 .4 0L8 6.59l2.24-2.24a.28.28 0 0 1 .4 0l.2.2.6.6.2.2a.28.28 0 0 1 0 .4L9.42 8Z" })),
+  'dashboard': () => h("path", { fill: "currentColor", d: "M1.67 8.7H7.3V1.67H1.67v7.04Zm0 5.63H7.3v-4.22H1.67v4.22Zm7.04 0h5.63V7.3H8.71v7.04Zm0-12.67v4.23h5.63V1.67H8.71Z" }),
+  'dashboard-outline': () => (h("path", { fill: "currentColor", d: "M13.33 2.67v2.22H9.7V2.67h3.63m-7.04 0V7.7H2.67V2.67H6.3m7.04 5.63v5.04H9.71V8.3h3.63M6.3 11.11v2.22H2.67v-2.22H6.3m8.03-9.44H8.7v4.22h5.63V1.67Zm-7.04 0H1.67v7.04H7.3V1.67Zm7.04 5.63H8.7v7.04h5.63V7.3Zm-7.04 2.81H1.67v4.22H7.3v-4.22Z" })),
   'download': () => (h("path", { fill: "currentColor", d: "M6.4 2v4.1c0 .2-.1.3-.3.3H4c-.2 0-.3.1-.3.3 0 .1 0 .2.1.2l4 4c.1.1.3.1.4 0l4-4c.1-.1.1-.3 0-.4-.1-.1-.1-.1-.2-.1H9.9c-.2 0-.3-.1-.3-.3V2c0-.2-.1-.3-.3-.3H6.7c-.1 0-.3.1-.3.3zm7.9 11v1c0 .2-.1.3-.3.3H2c-.2 0-.3-.1-.3-.3v-1c0-.2.1-.3.3-.3h12c.2 0 .3.1.3.3z" })),
   'euro': () => (h("path", { fill: "currentColor", d: "M13 13.14a.4.4 0 0 0-.47-.31A7.79 7.79 0 0 1 11 13a4.31 4.31 0 0 1-4-2.79h3.8a.41.41 0 0 0 .39-.31l.19-.9a.39.39 0 0 0-.3-.47H6.51a7.07 7.07 0 0 1 0-1.38h4.89a.4.4 0 0 0 .39-.31l.22-1a.4.4 0 0 0-.3-.47H7a4.2 4.2 0 0 1 3.92-2.45 6.57 6.57 0 0 1 1.26.14.41.41 0 0 0 .47-.29l.4-1.45a.4.4 0 0 0-.28-.48A9.43 9.43 0 0 0 11 .67a7.12 7.12 0 0 0-6.83 4.7h-1.1a.4.4 0 0 0-.4.39v1a.4.4 0 0 0 .4.39h.72a9.08 9.08 0 0 0 0 1.38h-.72a.39.39 0 0 0-.4.39v.93a.4.4 0 0 0 .4.39h1A7 7 0 0 0 11 15.3a8.7 8.7 0 0 0 2-.25.39.39 0 0 0 .3-.46l-.3-1.45Z" })),
+  'euro-circle': () => (h("path", { fill: "currentColor", d: "M8 .67C3.95.67.67 3.95.67 8S3.95 15.33 8 15.33s7.33-3.28 7.33-7.33S12.05.67 8 .67Zm2.27 11.4c-.38.09-.76.14-1.15.14a4.038 4.038 0 0 1-3.99-2.92h-.58c-.13 0-.23-.1-.23-.22v-.54c0-.12.11-.22.23-.22h.41a5.34 5.34 0 0 1 0-.8h-.41c-.13 0-.23-.1-.23-.22v-.58c0-.13.11-.22.23-.22h.63c.6-1.65 2.18-2.74 3.94-2.71.34 0 .68.03 1.02.1.12.03.19.16.16.28l-.23.84c-.03.12-.15.19-.27.17-.24-.05-.48-.08-.73-.08A2.42 2.42 0 0 0 6.81 6.5h2.71c.12.03.2.15.17.27l-.13.58c-.02.1-.12.18-.22.18H6.52c-.03.26-.03.53 0 .8h2.63c.12.03.2.15.17.27l-.11.52c-.03.1-.12.18-.22.18H6.8c.36.96 1.28 1.6 2.31 1.61.3 0 .59-.04.88-.1.12-.02.24.05.27.18l.17.84c.02.12-.05.24-.17.27v-.03Z" })),
   'exclamation-circle': () => (h("path", { fill: "currentColor", d: "M8 15.33c4.05 0 7.33-3.28 7.33-7.33S12.05.67 8 .67.67 3.95.67 8 3.95 15.33 8 15.33Zm.95-3.3c0 .15-.12.27-.28.27h-1.4c-.15 0-.28-.12-.28-.27v-1.31c0-.15.12-.28.28-.28h1.4c.15 0 .28.12.28.28v1.31ZM7 3.96c0-.14.11-.25.25-.25H8.7c.14 0 .25.11.25.25v4.8c0 .14-.11.25-.25.25H7.25c-.14 0-.25-.11-.25-.25V3.95Z" })),
   'exclamation-triangle': () => (h("path", { fill: "currentColor", d: "m14.3 13.88-6-12a.32.32 0 0 0-.41-.15.31.31 0 0 0-.15.15l-6 12a.31.31 0 0 0 .14.42.32.32 0 0 0 .14 0H14a.31.31 0 0 0 .33-.29.23.23 0 0 0-.03-.13ZM7 6a.28.28 0 0 1 .28-.28h1.46A.28.28 0 0 1 9 6v4a.29.29 0 0 1-.28.29H7.3A.29.29 0 0 1 7 10Zm2 7a.31.31 0 0 1-.31.32H7.34A.32.32 0 0 1 7 13v-1.37a.31.31 0 0 1 .32-.31h1.39a.31.31 0 0 1 .31.31Z" })),
   'eye': () => [
@@ -76,6 +84,7 @@ export const icons = {
   'folder': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Z" })),
   'folder-lines': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-4.57 6.38a.2.2 0 0 1-.2.2H3.41a.2.2 0 0 1-.2-.2v-.9a.2.2 0 0 1 .2-.2h5.82a.2.2 0 0 1 .2.2Zm3.36-2.95a.2.2 0 0 1-.2.2H3.42a.2.2 0 0 1-.2-.2V7a.2.2 0 0 1 .2-.2h9.17a.2.2 0 0 1 .2.2Z" })),
   'folder-link': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34Zm-6.82 6.88H5.65c-1.34 0-2.42-1.08-2.42-2.42 0-1.34 1.08-2.42 2.42-2.42h.84c.14 0 .25.11.25.25 0 .06-.02.13-.06.17-.2.21-.36.45-.49.71-.04.07-.11.13-.19.14h-.33c-.62-.15-1.24.22-1.39.84-.15.62.22 1.24.84 1.39.15.04.31.04.47.02h1.58c.62 0 1.12-.48 1.15-1.1v-.22c-.02-.08 0-.16.06-.22.12-.13.29-.2.47-.2h.45c.12 0 .23.09.25.21.02.14.02.29 0 .43 0 1.32-1.05 2.39-2.37 2.42Zm3.17 0h-.84c-.06 0-.13-.02-.17-.07-.1-.1-.1-.25 0-.35.2-.21.36-.45.49-.71.02-.09.08-.16.17-.19h.36c.63.04 1.18-.43 1.23-1.07.04-.63-.43-1.18-1.07-1.23H8.83c-.64 0-1.15.51-1.15 1.15v.25c.02.08 0 .16-.06.22-.12.13-.29.21-.47.21H6.7c-.13 0-.24-.09-.26-.22-.01-.14-.01-.27 0-.41a2.41 2.41 0 0 1 2.38-2.43h1.52c1.34 0 2.42 1.07 2.43 2.41 0 1.34-1.09 2.42-2.42 2.43Z" })),
+  'folder-outline': () => (h("path", { fill: "currentColor", d: "m6.22 3.67 1.55 1.49.29.28h5.93c.19 0 .34.16.34.34v6.21c0 .18-.15.34-.33.34H2.01c-.18 0-.34-.15-.34-.33V4.01c0-.18.15-.34.33-.34h4.22m.4-1H2C1.27 2.67.68 3.27.67 4v8c0 .73.6 1.32 1.33 1.33h12c.73 0 1.32-.6 1.33-1.33V5.78c0-.73-.6-1.33-1.33-1.34H8.46L6.62 2.67Z" })),
   'folder-star': () => (h("path", { fill: "currentColor", d: "M14 4.44H8.46L6.62 2.67H2A1.35 1.35 0 0 0 .67 4v8A1.35 1.35 0 0 0 2 13.33h12A1.35 1.35 0 0 0 15.33 12V5.78A1.36 1.36 0 0 0 14 4.44Zm-.2 3.89L12 9.66l.69 2a.22.22 0 0 1-.08.27.26.26 0 0 1-.13.06.39.39 0 0 1-.15-.06l-1.77-1.26L8.75 12a.34.34 0 0 1-.15 0 .31.31 0 0 1-.13 0 .23.23 0 0 1-.08-.27l.69-2-1.81-1.35a.23.23 0 0 1-.1-.17.24.24 0 0 1 .24-.24h2.21l.67-2a.26.26 0 0 1 .15-.14.24.24 0 0 1 .31.14l.67 2h2.2a.26.26 0 0 1 .26.24.3.3 0 0 1-.08.12Z" })),
   'graduation-cap': () => (h("path", { fill: "currentColor", d: "M14.93 5.14 8.54 2.76c-.35-.13-.73-.13-1.08 0L1.07 5.14c-.31.13-.48.47-.39.8.04.22.19.39.39.47l1.12.42c-.26.38-.4.84-.41 1.3-.35.28-.47.75-.3 1.16.06.12.14.23.24.31l-.59 3.19c-.06.22.07.45.28.53h1.37c.22-.02.38-.22.36-.44v-.1L2.55 9.6c.32-.31.4-.79.2-1.18a.814.814 0 0 0-.24-.28c0-.38.18-.75.47-1l4.48 1.65c.35.13.73.13 1.08 0l6.39-2.38c.31-.13.48-.47.39-.8a.625.625 0 0 0-.39-.47Zm-6.18 4.5c-.48.18-1.02.18-1.5 0L3.93 8.4l-.33 3.15c0 1 2 1.78 4.4 1.78s4.4-.79 4.4-1.78l-.33-3.15-3.32 1.24Z" })),
   'history': () => [
@@ -107,7 +116,10 @@ export const icons = {
   'paper-plane': () => (h("path", { fill: "currentColor", d: "M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z" })),
   'paper-plane-slash': () => (h("path", { fill: "currentColor", d: "M2.67,1.69,14.26,13.28l-1,1-2.79-2.8-1.1,2.67a.3.3,0,0,1-.13.12.28.28,0,0,1-.37-.12L6.75,10.74a.52.52,0,0,1,0-.63L7.82,8.9l-.76-.76L5.76,9.27a.57.57,0,0,1-.61.06L1.88,7.51a.29.29,0,0,1-.16-.15A.28.28,0,0,1,1.87,7L4.68,5.76l-3-3Zm11.53,0a.28.28,0,0,0-.22,0L7.53,4.51,9.26,6.24l3-2.54s.15-.1.19-.06,0,.14-.06.18L9.75,6.73l1.88,1.88,2.71-6.54A.3.3,0,0,0,14.2,1.7Z" })),
   'pen': () => (h("path", { fill: "currentColor", d: "M1.67,11.69v2.64h2.64l7.78-7.78-2.64-2.64L1.67,11.69ZM14.13,4.51c.27-.28,.27-.72,0-1h0l-1.65-1.64c-.28-.27-.72-.27-1,0h0l-1.28,1.29,2.64,2.64,1.29-1.29Z" })),
+  'pen-circle': () => (h("path", { fill: "currentColor", d: "M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7" })),
   'pen-fancy': () => (h("path", { fill: "currentColor", d: "M3.63,8.65c-.24,.07-.43,.26-.5,.5l-1.46,4.37,.11,.12,2.3-2.3c0-.06,0-.13,0-.19,0-.44,.35-.8,.79-.81,.44,0,.8,.35,.81,.79,0,.44-.35,.8-.79,.81,0,0-.01,0-.02,0h-.19l-2.3,2.3,.12,.11,4.37-1.46c.24-.07,.43-.26,.5-.5l.82-2.08-2.49-2.48-2.07,.82ZM10.8,2.35L6.27,7.28l2.42,2.42,4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z" })),
+  'pen-fancy-outline': () => (h("path", { fill: "currentColor", d: "M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z" })),
+  'phone': () => (h("path", { fill: "currentColor", d: "M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z" })),
   'picture': () => (h("path", { fill: "currentColor", d: "M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z" })),
   'play-circle': () => (h("path", { fill: "currentColor", d: "M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.42 8-5.2 3a.72.72 0 0 1-1-.28.73.73 0 0 1-.09-.35V4.92a.71.71 0 0 1 .71-.71 1.06 1.06 0 0 1 .35.09l5.2 3.17a.71.71 0 0 1 .27 1 .64.64 0 0 1-.24.24Z" })),
   'plus': () => (h("path", { fill: "currentColor", d: "M9.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25H9.41Z" })),
@@ -136,6 +148,7 @@ export const icons = {
   'user-circle': () => (h("path", { fill: "currentColor", d: "M8 .62C3.95.61.66 3.9.65 7.95c0 4.05 3.28 7.34 7.33 7.35 4.04 0 7.33-3.26 7.35-7.3.02-4.05-3.25-7.36-7.3-7.38H8Zm0 .75c3.64 0 6.59 2.96 6.58 6.6V8c0 1.35-.41 2.66-1.19 3.76a2.713 2.713 0 0 0-2.66-2.37H9.54c-.98.46-2.1.46-3.08 0H5.28c-1.36 0-2.5 1.02-2.67 2.37A6.483 6.483 0 0 1 1.42 8a6.59 6.59 0 0 1 6.55-6.63H8ZM5 5.63c0-1.68 1.37-3.05 3.05-3.05 1.68 0 3.05 1.37 3.05 3.05 0 1.68-1.37 3.05-3.05 3.05H8c-1.66-.03-3-1.39-3-3.05Z" })),
   'user-group': () => (h("path", { fill: "currentColor", d: "M13.15 4.12c-.81-.01-1.47.65-1.48 1.46 0 .82.65 1.47 1.46 1.48s1.47-.65 1.48-1.46-.65-1.47-1.46-1.48Zm-10.04.01a1.47 1.47 0 0 0-1.58 1.59c.06.71.62 1.28 1.34 1.34.81.07 1.52-.53 1.59-1.34.06-.81-.54-1.52-1.35-1.59Zm7.36.39c-.22-.84-.87-1.51-1.71-1.75-1.36-.41-2.8.36-3.22 1.72-.18.61-.13 1.27.14 1.85.41.9 1.33 1.48 2.32 1.45 1.41.01 2.56-1.14 2.57-2.55 0-.24-.03-.49-.1-.72Zm-.71 4h-.19c-.99.49-2.14.49-3.13 0h-.19c-1.46 0-2.64 1.18-2.64 2.64v2.69c1.23.93 2.74 1.47 4.39 1.47s3.17-.55 4.4-1.48v-2.68c0-1.46-1.18-2.64-2.64-2.64Zm5.52.25a7.282 7.282 0 0 1-1.65 3.91c-.08.1-.16.19-.25.28-.08.09-.17.18-.25.27v-.55h.03v-.72s.01-.07 0-.1v-.66c.01-1.25-.66-2.4-1.76-3 .27-.26.63-.41 1-.41h1.51c.63.01 1.17.41 1.37.98ZM2.86 11.16v1.52h.01v.55l-.28-.31c-.08-.08-.15-.16-.22-.24A7.238 7.238 0 0 1 .74 8.86c.16-.62.72-1.07 1.4-1.07h1.47c.37-.01.73.12 1.01.37-1.1.6-1.77 1.75-1.76 3Z" })),
   'user-plus': () => (h("path", { fill: "currentColor", d: "M14,3.33H12.65V2a.36.36,0,0,0-.35-.33h-.65A.36.36,0,0,0,11.3,2V3.33H10a.34.34,0,0,0-.33.34v.66a.34.34,0,0,0,.33.34H11.3V6a.37.37,0,0,0,.35.33h.65A.37.37,0,0,0,12.65,6V4.67H14a.34.34,0,0,0,.32-.34V3.67A.34.34,0,0,0,14,3.33ZM9.28,9.77h-.2a5.19,5.19,0,0,1-3.91,0H5A3,3,0,0,0,1.7,12.46h0v.72A1.27,1.27,0,0,0,3,14.33h8.25a1.26,1.26,0,0,0,1.36-1.14v-.68A3,3,0,0,0,9.37,9.76H9.28ZM7.13,3.7A2.64,2.64,0,1,1,4.5,6.34h0A2.64,2.64,0,0,1,7.13,3.7Z" })),
+  'user-question-outline': () => (h("path", { fill: "currentColor", d: "M5.23 11.14c.86-.66 1.01-1.9.35-2.75s-1.9-1.01-2.75-.35a1.96 1.96 0 0 0 0 3.1c-.72.42-1.16 1.2-1.16 2.03v.8c0 .2.17.37.37.37h3.98c.2 0 .37-.17.37-.37v-.8c0-.83-.44-1.61-1.16-2.03ZM2.81 9.59c0-.67.55-1.22 1.22-1.22s1.22.55 1.22 1.22-.55 1.22-1.22 1.22-1.22-.55-1.22-1.22Zm2.83 4H2.41v-.42c0-.89.72-1.62 1.62-1.62s1.62.72 1.62 1.62v.42h-.01Zm7.13-11.93H8c-.86 0-1.56.7-1.56 1.56v7.16c0 .21.17.37.37.37.08 0 .16-.03.22-.07l1.49-1.12h4.25c.86 0 1.56-.7 1.56-1.56V3.22c0-.86-.7-1.56-1.56-1.56Zm.82 6.33c0 .45-.37.82-.82.82H8.4a.41.41 0 0 0-.22.07l-1 .75V3.22c0-.45.37-.82.82-.82h4.77c.45 0 .82.37.82.82v4.77Zm-2.8-.42c0 .23-.18.41-.41.41s-.41-.18-.41-.41.18-.41.41-.41c.23 0 .41.18.41.41Zm-.41-4.34c-.83 0-1.5.67-1.5 1.5 0 .23.18.41.41.41s.41-.18.41-.41c0-.38.31-.68.69-.68.38 0 .68.31.68.69 0 .38-.31.68-.68.68-.23 0-.41.18-.41.41v.44c0 .23.18.41.41.41s.41-.18.41-.41v-.09c.8-.23 1.26-1.06 1.04-1.85-.18-.65-.77-1.09-1.44-1.09Z" })),
   'users': () => (h("path", { fill: "currentColor", d: "M12,8.76h-.2a5.24,5.24,0,0,1-3.93,0H7.61a3.05,3.05,0,0,0-3.3,2.75v.69a1.28,1.28,0,0,0,1.38,1.14H14a1.27,1.27,0,0,0,1.37-1.14v-.69A3.07,3.07,0,0,0,12,8.75Zm-6.4-.32A2,2,0,0,0,4.31,8H2.48A1.69,1.69,0,0,0,.65,9.53v.76a.85.85,0,0,0,.91.76H3.45A3.58,3.58,0,0,1,5.61,8.44ZM9.81,2.66A2.65,2.65,0,1,1,7.16,5.31h0A2.65,2.65,0,0,1,9.81,2.66ZM3.31,4.18A1.51,1.51,0,1,1,1.8,5.69,1.51,1.51,0,0,1,3.31,4.18Z" })),
   'wallet': () => (h("path", { fill: "currentColor", d: "M13.88 5H3a.43.43 0 0 1-.46-.38.43.43 0 0 1 .46-.43h11a.43.43 0 0 0 .46-.38A1.28 1.28 0 0 0 13 2.67H2.5A1.7 1.7 0 0 0 .67 4.19v7.62a1.7 1.7 0 0 0 1.83 1.52h11.38a1.32 1.32 0 0 0 1.45-1.14V6.1A1.33 1.33 0 0 0 13.88 5Zm-1.21 5.29a1.1 1.1 0 1 1 1.1-1.1 1.1 1.1 0 0 1-1.1 1.05Z" })),
 };

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

@@ -1,17 +1,17 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 export default {
   component: 'mg-input-title',
   title: 'Atoms/mg-input-title',
 };
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slot = args.slot;
-  delete args.slot;
-  const isLegend = args.isLegend;
-  delete args.isLegend;
-  // return element
-  return (h("mg-input-title", Object.assign({}, args, { "is-legend": isLegend }), slot));
-};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-input-title", Object.assign({}, filterArgs(args)), args.slot);
 export const MgInputTitle = Template.bind({});
 MgInputTitle.args = {
   slot: 'Label',

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

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

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
 import { placements } from '../mg-tooltip.conf';
 export default {
   component: 'mg-tooltip',
@@ -11,29 +12,47 @@ export default {
       options: placements,
       control: { type: 'select' },
       table: {
-        defaultValue: { summary: placements[0] },
+        defaultValue: { summary: 'bottom' },
       },
     },
-    value: {
-      control: { type: 'text' },
-    },
   },
 };
-const Template = args => (h("mg-tooltip", Object.assign({}, args),
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
   h("mg-icon", { icon: "info-circle" })));
 export const MgTooltip = Template.bind({});
 MgTooltip.args = {
   identifier: 'identifier',
   message: 'This is a tooltip message',
-  placement: placements[0],
+  placement: undefined,
   display: false,
   disabled: false,
 };
-const TemplateButton = args => (h("mg-tooltip", Object.assign({}, args),
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TemplateButton = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
   h("mg-button", null, "Action")));
 export const MgTooltipOnButton = TemplateButton.bind({});
 MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
-const TemplateSpan = args => (h("mg-tooltip", Object.assign({}, args),
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TemplateSpan = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
   h("span", null, "any text")));
 export const MgTooltipOnSpan = TemplateSpan.bind({});
 MgTooltipOnSpan.args = Object.assign({}, MgTooltip.args);

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

@@ -18,3 +18,9 @@ export const placements = [
   'left-start',
   'left-end',
 ];
+export var Guard;
+(function (Guard) {
+  Guard["FOCUS"] = "focus";
+  Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
+  Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
+})(Guard || (Guard = {}));