@mgdis/mg-components 5.3.0 → 5.5.0

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

@@ -20,39 +20,6 @@ export class MgInputRadio {
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is displayed on top
-     */
-    this.labelOnTop = false;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if inputs are display verticaly
-     */
-    this.inputVerticalList = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--radio']);
     /**
      * Handle input event
      *
@@ -102,6 +69,24 @@ export class MgInputRadio {
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = false;
+    this.labelHide = false;
+    this.inputVerticalList = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--radio']);
+    this.errorMessage = undefined;
+    this.options = undefined;
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);

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

@@ -242,6 +242,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 .mg-input__box {
   width: 100%;
   padding-top: 0;

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

@@ -44,39 +44,6 @@ export class MgInputSelect {
   constructor() {
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Option to remove placeholder
-     */
-    this.placeholderHide = false;
-    /**
-     * Option to disable placeholder
-     */
-    this.placeholderDisabled = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--select']);
     /**
      * Handle input event
      */
@@ -118,6 +85,29 @@ export class MgInputSelect {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.placeholderHide = false;
+    this.placeholderDisabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = undefined;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--select']);
+    this.errorMessage = undefined;
+    this.options = undefined;
+    this.valueExist = undefined;
+    this.readonlyValue = undefined;
   }
   handleValue(newValue) {
     if (newValue !== null) {

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

@@ -253,6 +253,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 /**
 * Icon in input
 */

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

@@ -13,47 +13,6 @@ export class MgInputText {
     this.classHasIcon = 'mg-input--has-icon';
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Input type
-     */
-    this.type = 'text';
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Input max length
-     */
-    this.maxlength = 400;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define input width
-     */
-    this.mgWidth = 'full';
-    /**
-     * Define if component should display character left
-     */
-    this.displayCharacterLeft = true;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--text']);
     /**
      * Handle input event
      *
@@ -144,6 +103,29 @@ export class MgInputText {
         this.classList.add('mg-input--has-buttons-group-append');
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.type = 'text';
+    this.icon = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.maxlength = 400;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = 'full';
+    this.pattern = undefined;
+    this.patternErrorMessage = undefined;
+    this.tooltip = undefined;
+    this.displayCharacterLeft = true;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--text']);
+    this.errorMessage = undefined;
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);

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

@@ -253,6 +253,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 /* Component Custom Style */
 .mg-input .mg-input__box {
   display: block;

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

@@ -12,51 +12,6 @@ export class MgInputTextarea {
     this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Input max length
-     */
-    this.maxlength = 4000;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define input width
-     */
-    this.mgWidth = 'full';
-    /**
-     * Define the number of visible text lines for the control
-     */
-    this.rows = 3;
-    /**
-     * Define if component should display character left
-     */
-    this.displayCharacterLeft = true;
-    /**
-     * Define if input is resizable
-     */
-    this.resizable = 'none';
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--textarea']);
     /**
      * Handle input event
      */
@@ -127,6 +82,29 @@ export class MgInputTextarea {
         throw new Error('<mg-input-textarea> prop "pattern" must be paired with the prop "patternErrorMessage"');
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.maxlength = 4000;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = 'full';
+    this.pattern = undefined;
+    this.patternErrorMessage = undefined;
+    this.rows = 3;
+    this.tooltip = undefined;
+    this.displayCharacterLeft = true;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.resizable = 'none';
+    this.classList = new ClassList(['mg-input--textarea']);
+    this.errorMessage = undefined;
   }
   handleValue(newValue) {
     this.checkValidity();

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

@@ -118,6 +118,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 /**
 * Toogle
 */

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

@@ -21,39 +21,6 @@ export class MgInputToggle {
     this.classIsActive = 'mg-input--toggle-is-active';
     this.classOnOff = 'mg-input--toggle-on-off';
     this.classIcon = 'mg-input--toggle-icon';
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if toggle have on/off style
-     */
-    this.isOnOff = false;
-    /**
-     * Define if toggle display icon
-     */
-    this.isIcon = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--toggle']);
-    /**
-     * Checked internal value
-     */
-    this.checked = false;
     /**
      * Change checked value
      *
@@ -78,6 +45,22 @@ export class MgInputToggle {
         slots.forEach(slot => slot.setAttribute('title', slot.textContent));
       }
     };
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.isOnOff = false;
+    this.isIcon = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.classList = new ClassList(['mg-input--toggle']);
+    this.options = undefined;
+    this.checked = false;
   }
   handleValue(newValue) {
     // Swich to the right option

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

@@ -3,7 +3,7 @@
   background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));
 }
 
-:host(.mg-menu--vertical) {
+:host([direction=vertical]) {
   flex-direction: column;
   height: 100%;
   overflow-y: auto;

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

@@ -1,5 +1,4 @@
 import { h, Host } from '@stencil/core';
-import { ClassList } from '../../../../utils/components.utils';
 import { Direction } from './mg-menu.conf';
 export class MgMenu {
   constructor() {
@@ -8,14 +7,6 @@ export class MgMenu {
      ************/
     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
      *
@@ -37,9 +28,7 @@ export class MgMenu {
       // 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();
+          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
             this.focusedMenuItem = menuItemIndex;
             // reset expanded on previous active menu item
             this.menuItems.forEach((item, index) => {
@@ -49,6 +38,9 @@ export class MgMenu {
         });
       });
     };
+    this.label = undefined;
+    this.direction = Direction.HORIZONTAL;
+    this.isChildMenu = undefined;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -56,13 +48,7 @@ export class MgMenu {
     }
   }
   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 {
+    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
       throw new Error(`<${this.name}> prop "direction" must be one of : ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
     }
   }
@@ -84,11 +70,11 @@ export class MgMenu {
    * @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.initMenuItems();
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
       // click outside management for child vertical menu
       if (!this.isChildMenu && this.direction === Direction.HORIZONTAL) {
@@ -108,7 +94,7 @@ export class MgMenu {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label, classList: this.classList.join() }, h("slot", null)));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
   }
   static get is() { return "mg-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -168,8 +154,7 @@ export class MgMenu {
   }
   static get states() {
     return {
-      "isChildMenu": {},
-      "classList": {}
+      "isChildMenu": {}
     };
   }
   static get elementRef() { return "element"; }

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

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../../.storybook/utils';
+import { Direction } from '../../mg-menu/mg-menu.conf';
 export default {
   component: 'mg-menu-item',
   title: 'Beta/menus/mg-menu-item',
@@ -17,6 +18,12 @@ MgMenuItem.args = {
   identifier: 'identifier',
   slot: h("span", { slot: "label" }, "My label"),
 };
+export const MgMenuItemAsLink = Template.bind({});
+MgMenuItemAsLink.args = {
+  identifier: 'identifier',
+  href: './',
+  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({});
@@ -28,5 +35,5 @@ MgMenuItemWhitMetadata.args = Object.assign(Object.assign({}, MgMenuItem.args),
 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" }))),
+    h("mg-menu", { direction: Direction.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" }))),
   ] });