@mgdis/mg-components 4.0.1 → 4.1.0

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

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
+import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
   constructor() {
     /**
@@ -44,9 +45,51 @@ export class MgTooltip {
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
     };
+    /**
+     * Method to set display prop
+     *
+     * @param {boolean} newValue display prop new value
+     * @param {boolean} condition additionnal condition to apply display prop newValue
+     * @returns {void}
+     */
+    this.setDisplay = (newValue, condition = true) => {
+      if (!this.disabled && condition)
+        this.display = newValue;
+    };
+    /**
+     * Action for tooltip element and tooltiped element mouse listener
+     *
+     * @param {Guard} elementGuard tooltip element guard
+     * @param {boolean} isMouseenter mouseenter validation
+     * @param {Guard} conditionalGuard guard condition
+     * @returns {void}
+     */
+    this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
+      // we mutate elementGuard
+      if (this.guard !== Guard.FOCUS) {
+        this.guard = elementGuard;
+        if (!isMouseenter) {
+          setTimeout(() => {
+            this.setDisplay(isMouseenter, this.guard !== conditionalGuard);
+            this.resetGuard();
+          }, 100);
+        }
+        else if (isMouseenter && elementGuard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+          this.setDisplay(isMouseenter);
+        }
+      }
+    };
+    /**
+     * Method to reset guard value
+     *
+     * @returns {void}
+     */
+    this.resetGuard = () => {
+      this.guard = undefined;
+    };
   }
-  handleDisplay(newVal) {
-    if (newVal) {
+  handleDisplay(newValue) {
+    if (newValue) {
       this.show();
     }
     else {
@@ -97,21 +140,31 @@ export class MgTooltip {
         },
       ],
     });
-    // Add events
-    ['mouseenter', 'focus'].forEach(event => {
-      tooltipedElement.addEventListener(event, () => {
-        if (!this.disabled)
-          this.display = true;
-      });
+    // Manage tooltipedElement focus/blur events
+    tooltipedElement.addEventListener('focus', () => {
+      this.guard = Guard.FOCUS;
+      this.setDisplay(true);
     });
-    ['mouseleave', 'blur', 'keydown'].forEach(event => {
+    ['blur', 'keydown'].forEach(event => {
       tooltipedElement.addEventListener(event, (e) => {
         // we continue to process ONLY for KeyboardEvents 'Escape'
         if (e.type === 'keydown' && e.code !== 'Escape') {
           return;
         }
-        if (!this.disabled)
-          this.display = false;
+        this.resetGuard();
+        this.setDisplay(false);
+      });
+    });
+    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
+    ['mouseenter', 'mouseleave'].forEach(event => {
+      const isMouseenter = event === 'mouseenter';
+      [
+        { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+        { element: tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
+      ].forEach(({ element, action }) => {
+        element.addEventListener(event, () => {
+          action();
+        });
       });
     });
     this.handleDisplay(this.display);

package/dist/collection/components/molecules/inputs/mg-input-checkbox/doc/mg-input-checkbox.stories.js

@@ -1,30 +1,18 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-checkbox',
   title: 'Molecules/Inputs/mg-input-checkbox',
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  // Extract slot so it won't be render as an attribute
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const inputVerticalList = args.inputVerticalList;
-  delete args.inputVerticalList;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  // return element
-  return h("mg-input-checkbox", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "input-vertical-list": inputVerticalList }));
-};
+const Template = (args) => h("mg-input-checkbox", Object.assign({}, filterArgs(args)));
 export const MgInputCheckbox = Template.bind({});
 MgInputCheckbox.args = {
   // Global

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Manage style when input needs to be a fieldset, like checkbox and radio.
  */

package/dist/collection/components/molecules/inputs/mg-input-date/doc/mg-input-date.stories.js

@@ -1,27 +1,18 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-date',
   title: 'Molecules/Inputs/mg-input-date',
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  // return element
-  return h("mg-input-date", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText }));
-};
+const Template = (args) => h("mg-input-date", Object.assign({}, filterArgs(args)));
 const date = new Date();
 const getFormatedNumber = (number) => {
   return `${number > 9 ? number : '0' + number}`;

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]

package/dist/collection/components/molecules/inputs/mg-input-numeric/doc/mg-input-numeric.stories.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 import { types } from '../mg-input-numeric.conf';
 export default {
   component: 'mg-input-numeric',
@@ -16,25 +17,13 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const mgWidth = args.mgWidth;
-  delete args.mgWidth;
-  // return element
-  return h("mg-input-numeric", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "mg-width": mgWidth }));
-};
+const Template = (args) => h("mg-input-numeric", Object.assign({}, filterArgs(args)));
 /**
  * Global use
  */

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]

package/dist/collection/components/molecules/inputs/mg-input-password/doc/mg-input-password.stories.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-password',
   title: 'Molecules/Inputs/mg-input-password',
@@ -11,25 +12,13 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const mgWidth = args.mgWidth;
-  delete args.mgWidth;
-  // return element
-  return h("mg-input-password", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "mg-width": mgWidth }));
-};
+const Template = (args) => h("mg-input-password", Object.assign({}, filterArgs(args)));
 /**
  * Global use
  */

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-radio',
   title: 'Molecules/Inputs/mg-input-radio',
@@ -11,25 +12,13 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const inputVerticalList = args.inputVerticalList;
-  delete args.inputVerticalList;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  // return element
-  return h("mg-input-radio", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "input-vertical-list": inputVerticalList }));
-};
+const Template = (args) => h("mg-input-radio", Object.assign({}, filterArgs(args)));
 export const MgInputRadio = Template.bind({});
 MgInputRadio.args = {
   // Global

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Manage style when input needs to be a fieldset, like checkbox and radio.
  */

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 import messages from '../../../../../locales/en/messages.json';
 export default {
   component: 'mg-input-select',
@@ -24,22 +25,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const placeholderDisabled = args.placeholderDisabled;
-  delete args.placeholderDisabled;
-  const placeholderHide = args.placeholderHide;
-  delete args.placeholderHide;
-  const mgWidth = args.mgWidth;
-  delete args.mgWidth;
-  // return element
-  return (h("mg-input-select", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "placeholder-hide": placeholderHide, "placeholder-disabled": placeholderDisabled, "mg-width": mgWidth })));
-};
+const Template = (args) => h("mg-input-select", Object.assign({}, filterArgs(args, { placeholder: messages.input.select.placeholder })));
 export const MgInputSelect = Template.bind({});
 MgInputSelect.args = {
   // Global
@@ -61,6 +47,7 @@ MgInputSelect.args = {
   // Help Text
   helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
   // Placeholder
+  placeholder: undefined,
   placeholderHide: false,
   placeholderDisabled: false,
 };

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-text',
   title: 'Molecules/Inputs/mg-input-text',
@@ -11,28 +12,17 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const patternErrorMessage = args.patternErrorMessage;
-  delete args.patternErrorMessage;
   const displayCharacterLeft = args.displayCharacterLeft;
   delete args.displayCharacterLeft;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const mgWidth = args.mgWidth;
-  delete args.mgWidth;
   // return element
-  return (h("mg-input-text", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "pattern-error-message": patternErrorMessage, "display-character-left": displayCharacterLeft ? 'true' : 'false', "help-text": helpText, "mg-width": mgWidth })));
+  return h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }));
 };
 /**
  * Global use
@@ -56,6 +46,7 @@ MgInputText.args = {
   pattern: undefined,
   patternErrorMessage: undefined,
   mgWidth: 'full',
+  type: 'text',
   // Tooltip
   tooltip: 'This is a tooltip',
   // Nb Char Left
@@ -102,20 +93,18 @@ URL.args = Object.assign(Object.assign({}, Emails.args), { label: 'URL',
   // Help Text
   helpText: 'Exemple: https://www.exemple.fr' });
 /**
- * Search
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const SearchTemplate = args => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const patternErrorMessage = args.patternErrorMessage;
-  delete args.patternErrorMessage;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SearchTemplate = (args) => {
   const displayCharacterLeft = args.displayCharacterLeft;
   delete args.displayCharacterLeft;
   // return element
   return (h("form", { role: "search" },
-    h("mg-input-text", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "pattern-error-message": patternErrorMessage, "display-character-left": displayCharacterLeft }),
+    h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }),
       h("mg-button", { slot: "append-input", label: "search" },
         h("mg-icon", { icon: "magnifying-glass" }),
         " Search"))));

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
 export default {
   component: 'mg-input-textarea',
   title: 'Molecules/Inputs/mg-input-textarea',
@@ -11,28 +12,17 @@ export default {
   parameters: { actions: { handles: ['value-change', 'input-valid'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
  *
  * @param {any} args component arguments
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Template = (args) => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const patternErrorMessage = args.patternErrorMessage;
-  delete args.patternErrorMessage;
   const displayCharacterLeft = args.displayCharacterLeft;
   delete args.displayCharacterLeft;
-  const helpText = args.helpText;
-  delete args.helpText;
-  const mgWidth = args.mgWidth;
-  delete args.mgWidth;
   // return element
-  return (h("mg-input-textarea", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "pattern-error-message": patternErrorMessage, "display-character-left": displayCharacterLeft ? 'true' : 'false', "help-text": helpText, "mg-width": mgWidth })));
+  return h("mg-input-textarea", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }));
 };
 export const MgInputTextarea = Template.bind({});
 MgInputTextarea.args = {
@@ -54,6 +44,7 @@ MgInputTextarea.args = {
   patternErrorMessage: undefined,
   rows: 3,
   mgWidth: 'full',
+  resizable: 'none',
   // Tooltip
   tooltip: 'This is a tooltip',
   // Nb Char Left

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

@@ -64,9 +64,6 @@
   height: var(--mg-icon-regular-size);
   margin-left: var(--mg-inputs-spacer);
 }
-.mg-input__input-container mg-icon {
-  display: flex;
-}
 .mg-input__input-container .mg-input__help-text,
 .mg-input__input-container .mg-input__error {
   text-align: start;
@@ -96,6 +93,10 @@
   color: hsl(var(--color-danger));
 }
 
+.mg-input__input mg-icon, .mg-input__error mg-icon {
+  display: flex;
+}
+
 /**
  * Style for input "box":
  * - input[type="text"]