@mgdis/mg-components 5.1.0 → 5.3.0

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

@@ -7,12 +7,12 @@ export class MgInputText {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classFocus = 'is-focused';
     this.classIsInputGroupAppend = 'mg-input--is-input-group-append';
     this.classHasIcon = 'mg-input--has-icon';
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -61,8 +61,8 @@ export class MgInputText {
      */
     this.handleInput = () => {
       this.checkValidity();
-      if (this.hasError) {
-        this.checkError();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -93,21 +93,18 @@ export class MgInputText {
      * @returns {void}
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      *
      * @returns {void}
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
@@ -120,7 +117,7 @@ export class MgInputText {
       }
     };
     /**
-     * Validate patern configuration
+     * Validate pattern configuration
      *
      * @returns {void}
      */
@@ -159,6 +156,16 @@ export class MgInputText {
       this.classList.delete(this.classHasIcon);
     }
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   /**
    * Public method to play input focus
    *
@@ -174,8 +181,8 @@ export class MgInputText {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -210,7 +217,10 @@ export class MgInputText {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));
   }
   static get is() { return "mg-input-text"; }
   static get encapsulation() { return "shadow"; }
@@ -688,6 +698,15 @@ export class MgInputText {
       }, {
         "propName": "icon",
         "methodName": "validateIcon"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }];
   }
 }

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -185,21 +185,40 @@
 .mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
   justify-content: space-between;
 }
+.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
+  width: 100%;
+}
 .mg-input.mg-input--width-full .mg-input__input-container {
   flex: auto;
   width: 100%;
 }
 .mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
+  max-width: 100%;
+}
+.mg-input:not(.mg-input--label-on-top) .mg-input__box {
+  width: 100%;
+  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
+  min-width: 5rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container {
+  width: 100%;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
+  width: 100%;
+  max-width: 21rem;
+}
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
   width: 100%;
 }
-.mg-input.mg-input--width-16 .mg-input__box {
-  width: 21rem;
+.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
+  max-width: 21rem;
+  min-width: 100%;
 }
-.mg-input.mg-input--width-4 .mg-input__box {
-  width: 7rem;
+.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
+  max-width: 7rem;
 }
-.mg-input.mg-input--width-2 .mg-input__box {
-  width: 5rem;
+.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
+  max-width: 5rem;
 }
 
 /**

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

@@ -7,11 +7,11 @@ export class MgInputTextarea {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classFocus = 'is-focused';
     this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
-    // hasError (triggered by blur event)
-    this.hasError = false;
+    // hasDisplayedError (triggered by blur event)
+    this.hasDisplayedError = false;
     /**
      * Input name
      * If not set the value equals the identifier
@@ -61,9 +61,9 @@ export class MgInputTextarea {
      * Handle input event
      */
     this.handleInput = () => {
-      if (this.hasError) {
+      if (this.hasDisplayedError) {
         this.checkValidity();
-        this.checkError();
+        this.setErrorMessage();
       }
       this.value = this.input.value;
     };
@@ -95,19 +95,16 @@ export class MgInputTextarea {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      if (!this.readonly && this.input !== undefined) {
-        const validity = this.input.checkValidity && this.input.checkValidity() && this.getPatternValidity();
-        // Set validity
-        this.valid = validity;
-        this.invalid = !validity;
-        //Send event
-        this.inputValid.emit(validity);
-      }
+      var _a;
+      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity());
+      this.invalid = !this.valid;
+      // We need to send valid event even if it is the same value
+      this.inputValid.emit(this.valid);
     };
     /**
-     * Check input errors
+     * Set input error message
      */
-    this.checkError = () => {
+    this.setErrorMessage = () => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
@@ -135,6 +132,16 @@ export class MgInputTextarea {
     this.checkValidity();
     this.valueChange.emit(newValue);
   }
+  handleValidityChange(newValue, _oldValue, prop) {
+    if (this.input !== undefined) {
+      this.input[prop] = newValue;
+      this.checkValidity();
+      if (this.hasDisplayedError) {
+        this.setErrorMessage();
+        this.hasDisplayedError = false;
+      }
+    }
+  }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
       this.classList.add(this.classHasDisplayCharacterLeft);
@@ -150,8 +157,8 @@ export class MgInputTextarea {
    */
   async displayError() {
     this.checkValidity();
-    this.checkError();
-    this.hasError = this.invalid;
+    this.setErrorMessage();
+    this.hasDisplayedError = this.invalid;
   }
   /*************
    * Lifecycle *
@@ -186,7 +193,10 @@ export class MgInputTextarea {
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
         'mg-input__box--resizable-vertical': this.resizable === 'vertical',
-      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => (this.input = el) }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+        if (el !== null)
+          this.input = el;
+      } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));
   }
   static get is() { return "mg-input-textarea"; }
   static get encapsulation() { return "shadow"; }
@@ -643,6 +653,15 @@ export class MgInputTextarea {
     return [{
         "propName": "value",
         "methodName": "handleValue"
+      }, {
+        "propName": "required",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "readonly",
+        "methodName": "handleValidityChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleValidityChange"
       }, {
         "propName": "displayCharacterLeft",
         "methodName": "validateDisplayCharacterLeft"

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

@@ -15,7 +15,7 @@ export class MgInputToggle {
     /************
      * Internal *
      ************/
-    // classes
+    // Classes
     this.classReadonly = 'mg-input--toggle-readonly';
     this.classDisabled = 'mg-input--toggle-disabled';
     this.classIsActive = 'mg-input--toggle-is-active';

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

@@ -0,0 +1,87 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
+import { Status } from '../../mg-menu-item/mg-menu-item.conf';
+import { Direction } from '../mg-menu.conf';
+export default {
+  component: 'mg-menu',
+  title: 'Beta/menus/mg-menu',
+  argTypes: {
+    direction: {
+      options: [undefined, Direction.HORIZONTAL, Direction.VERTICAL],
+      control: { type: 'select' },
+    },
+  },
+};
+const getItemArgs = ({ size, label, direction, status, metadata, icon, badge, content, submenu }) => ({
+  size: size !== undefined ? size : direction === Direction.VERTICAL ? 'medium' : undefined,
+  status,
+  slot: {
+    label,
+    metadata,
+    icon,
+    badge,
+    content,
+    submenu,
+  },
+});
+const getMenuArgs = (direction, level = 0, isSubmenu = false) => ({
+  label: 'Batman menu',
+  direction,
+  slot: {
+    items: [
+      getItemArgs({
+        label: 'label 1',
+        direction,
+      }),
+      getItemArgs({
+        label: 'label 2',
+        direction,
+        status: Status.DISABLED,
+      }),
+      getItemArgs({
+        label: 'label 3 with long text',
+        direction,
+        badge: true,
+        icon: true,
+      }),
+      getItemArgs({
+        label: 'label 4',
+        direction,
+        badge: true,
+        icon: true,
+        status: Status.ACTIVE,
+        submenu: level,
+      }),
+      getItemArgs({
+        label: 'label 5',
+        direction,
+        icon: true,
+        metadata: 'my metadata',
+        content: true,
+        size: !isSubmenu && direction === Direction.HORIZONTAL ? 'regular' : undefined,
+      }),
+    ],
+  },
+});
+const menu = args => h("mg-menu", Object.assign({}, filterArgs(args, { direction: Direction.HORIZONTAL })), args.slot.items.map(item => menuItem(item)));
+const menuItem = args => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  return (h("mg-menu-item", Object.assign({}, filterArgs(args)), ((_a = args.slot) === null || _a === void 0 ? void 0 : _a.label) && h("span", { slot: "label" }, (_b = args.slot) === null || _b === void 0 ? void 0 : _b.label), ((_c = args.slot) === null || _c === void 0 ? void 0 : _c.metadata) && h("span", { slot: "metadata" }, (_d = args.slot) === null || _d === void 0 ? void 0 : _d.metadata), ((_e = args.slot) === null || _e === void 0 ? void 0 : _e.icon) && h("mg-icon", { slot: "illustration", icon: "user" }), ((_f = args.slot) === null || _f === void 0 ? void 0 : _f.badge) && (h("mg-badge", { slot: "information", label: "information", value: "1" }, (_g = args.slot) === null || _g === void 0 ? void 0 : _g.icon)), ((_h = args.slot) === null || _h === void 0 ? void 0 : _h.content) && (h("div", null, h("h3", null, "Demo title"), h("p", null, "some content"))), ((_j = args.slot) === null || _j === void 0 ? void 0 : _j.submenu) && menu(getMenuArgs(Direction.VERTICAL, ((_k = args.slot) === null || _k === void 0 ? void 0 : _k.submenu) - 1, true))));
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("div", null, menu(args));
+export const MgMenuHorizontal = Template.bind({});
+MgMenuHorizontal.args = getMenuArgs(Direction.HORIZONTAL, 2);
+export const MgMenuVertical = Template.bind({});
+MgMenuVertical.args = getMenuArgs(Direction.VERTICAL, 2);
+const TemplateSmallContainer = (args) => {
+  return h("div", { style: { width: '25rem', height: '20rem' } }, menu(args));
+};
+export const MgMenuVerticalSmallContainer = TemplateSmallContainer.bind({});
+MgMenuVerticalSmallContainer.args = Object.assign({}, MgMenuVertical.args);

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js

@@ -0,0 +1,8 @@
+/**
+ * Menu direction type
+ */
+export var Direction;
+(function (Direction) {
+  Direction["VERTICAL"] = "vertical";
+  Direction["HORIZONTAL"] = "horizontal";
+})(Direction || (Direction = {}));

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

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));
+}
+
+:host(.mg-menu--vertical) {
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,185 @@
+import { h, Host } from '@stencil/core';
+import { ClassList } from '../../../../utils/components.utils';
+import { Direction } from './mg-menu.conf';
+export class MgMenu {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-menu';
+    this.focusedMenuItem = 0;
+    /**
+     * Component display direction. Default: "horizontal"
+     */
+    this.direction = Direction.HORIZONTAL;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList([this.name]);
+    /**
+     * Close matching menu-item
+     *
+     * @param {HTMLMgMenuItemElement} item menu-item to close
+     * @param {boolean} condition addionnal condition
+     * @returns {void}
+     */
+    this.closeMenuItem = (item, condition) => {
+      if (!this.isChildMenu && condition) {
+        item.expanded = false;
+      }
+    };
+    /**
+     * Store menu-items on component init and add listeners
+     */
+    this.initMenuItems = () => {
+      // store all menu-items
+      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+      // add listeners on menu item and edit index
+      this.menuItems.forEach((item, menuItemIndex) => {
+        ['click', 'focus'].forEach(trigger => {
+          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusedMenuItem = menuItemIndex;
+            // reset expanded on previous active menu item
+            this.menuItems.forEach((item, index) => {
+              this.closeMenuItem(item, index !== this.focusedMenuItem);
+            });
+          });
+        });
+      });
+    };
+  }
+  validateLabel(newValue) {
+    if (newValue === undefined) {
+      throw new Error(`<${this.name}> prop "label" is required.`);
+    }
+  }
+  validateDirection(newValue) {
+    if (newValue === Direction.VERTICAL) {
+      this.classList.add(`${this.name}--${Direction.VERTICAL}`);
+    }
+    else if (newValue === Direction.HORIZONTAL) {
+      this.classList.add(`${this.name}--${Direction.HORIZONTAL}`);
+    }
+    else {
+      throw new Error(`<${this.name}> prop "direction" must be one of : ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateDirection(this.direction);
+    this.validateLabel(this.label);
+  }
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad() {
+    this.initMenuItems();
+    // update props and states after componentDidLoad hook
+    // return a promise to process action only in the FIRST render().
+    // https://stenciljs.com/docs/component-lifecycle#componentwillload
+    return setTimeout(() => {
+      this.isChildMenu = this.element.closest('mg-menu-item') !== null;
+      // click outside management for child vertical menu
+      if (!this.isChildMenu && this.direction === Direction.HORIZONTAL) {
+        document.addEventListener('click', (event) => {
+          if (event.target.closest('mg-menu') === null) {
+            this.menuItems.forEach(item => {
+              this.closeMenuItem(item, this.direction === Direction.HORIZONTAL);
+            });
+          }
+        });
+      }
+    }, 0);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label, classList: this.classList.join() }, h("slot", null)));
+  }
+  static get is() { return "mg-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Menu label. Include short menu description.\nRequired for accessibility"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Direction",
+          "resolved": "Direction.HORIZONTAL | Direction.VERTICAL",
+          "references": {
+            "Direction": {
+              "location": "import",
+              "path": "./mg-menu.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component display direction. Default: \"horizontal\""
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "Direction.HORIZONTAL"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isChildMenu": {},
+      "classList": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "validateLabel"
+      }, {
+        "propName": "direction",
+        "methodName": "validateDirection"
+      }];
+  }
+}

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

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
+export default {
+  component: 'mg-menu-item',
+  title: 'Beta/menus/mg-menu-item',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-menu-item", Object.assign({}, filterArgs(args)), args.slot);
+export const MgMenuItem = Template.bind({});
+MgMenuItem.args = {
+  identifier: 'identifier',
+  slot: h("span", { slot: "label" }, "My label"),
+};
+export const MgMenuItemWhitIcon = Template.bind({});
+MgMenuItemWhitIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-icon", { icon: "user", slot: "illustration" })] });
+export const MgMenuItemWhitBadge = Template.bind({});
+MgMenuItemWhitBadge.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" })] });
+export const MgMenuItemWhitBadgeAndIcon = Template.bind({});
+MgMenuItemWhitBadgeAndIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" }), h("mg-icon", { icon: "user", slot: "illustration" })] });
+export const MgMenuItemWhitMetadata = Template.bind({});
+MgMenuItemWhitMetadata.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("span", { slot: "metadata" }, "My metadata")] });
+export const MgMenuItemWhithSubmenu = Template.bind({});
+MgMenuItemWhithSubmenu.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [
+    h("span", { slot: "label" }, "My label"),
+    h("mg-menu-vertical", { label: "submenu" }, h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 1")), h("mg-menu-item", null, h("mg-icon", { icon: "user", slot: "illustration" }), h("span", { slot: "label" }, "Subitem 2")), h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 3"), h("mg-icon", { icon: "user", slot: "illustration" }), h("mg-badge", { value: "2", label: "hello", slot: "information" }))),
+  ] });

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js

@@ -0,0 +1,22 @@
+/**
+ * Available menu-item positions
+ */
+export var ElementPosition;
+(function (ElementPosition) {
+  ElementPosition["FIRST"] = "first";
+  ElementPosition["LAST"] = "last";
+})(ElementPosition || (ElementPosition = {}));
+/**
+ * Available menu item status
+ */
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'medium', 'large'];