@mgdis/mg-components 5.6.0 → 5.8.0

package/dist/collection/utils/behaviors.utils.js

@@ -1,14 +1,12 @@
-import { Status } from '../components/molecules/menu/mg-menu-item/mg-menu-item.conf';
 /**
- * MgMenuItem type guard
+ * MgItemMore type guard
  *
  * @param {HTMLElement} element element to control type
- * @returns {boolean} truthy if element is mg-menu-item
+ * @returns {boolean} truthy if element is mg-item-more
  */
-const isMgMenuItem = (element) => element.nodeName === 'MG-MENU-ITEM';
+const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
 export var OverflowBehaviorElements;
 (function (OverflowBehaviorElements) {
-  OverflowBehaviorElements["MORE"] = "data-overflow-more";
   OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
   OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
 })(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
@@ -25,16 +23,7 @@ export class OverflowBehavior {
      * @returns {void}
      */
     this.disconnect = () => {
-      this.resizeObserver.disconnect();
-    };
-    /**
-     * Update more element status if active child
-     *
-     * @returns {void}
-     */
-    this.updateActiveStatus = () => {
-      const hasActiveChild = Array.from(this.moreELement.querySelector('mg-menu').children).some(element => element.nodeName === 'MG-MENU-ITEM' && element.getAttribute('status') === Status.ACTIVE && element.getAttribute('hidden') === null);
-      this.moreELement.setAttribute('status', hasActiveChild ? Status.ACTIVE : Status.VISIBLE);
+      this._resizeObserver.disconnect();
     };
     /************
      * Internal *
@@ -42,33 +31,35 @@ export class OverflowBehavior {
     /**
      * run overflow behavior
      *
-     * @param {number} width width of the container
+     * @param {number} width width of the container. Optional.
      * @returns {void}
      */
     this.run = (width) => {
-      if (this.moreELement === undefined) {
+      if (this._moreElement === undefined) {
         // set moreElement
-        this.moreELement = this.render();
-        this.moreELement.setAttribute(OverflowBehaviorElements.MORE, '');
+        this._moreElement = this.render();
         // set children
-        this.children = Array.from(this.element.children);
-        let moreELementChildren;
-        const allowedElements = ['MG-MENU-ITEM', 'MG-BUTTON'];
-        if (isMgMenuItem(this.moreELement)) {
-          moreELementChildren = Array.from(this.moreELement.querySelector('mg-menu').children).filter(element => allowedElements.includes(element.nodeName));
+        this._baseChildren = this.getInteractiveItems(this.element);
+        if (isMgItemMore(this._moreElement)) {
+          this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
         }
-        this.children.forEach((child, index) => {
+        // update children
+        this._baseChildren.forEach((child, index) => {
           child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-          if (child.getAttribute(OverflowBehaviorElements.MORE) === null) {
-            // set moreElement children
-            moreELementChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-          }
+          // set moreElement children
+          this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
         });
       }
-      this.updateDisplayedItems(width);
-      if (isMgMenuItem(this.moreELement))
-        this.updateActiveStatus();
+      if (width !== undefined)
+        this.updateDisplayedItems(width);
     };
+    /**
+     * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+     *
+     * @param {Element} element element to parse
+     * @returns {Element[]} children
+     */
+    this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
     /**
      * Update displayed items in container from a given available space
      *
@@ -77,24 +68,18 @@ export class OverflowBehavior {
      */
     this.updateDisplayedItems = (availableWidth) => {
       this.restoreItems();
-      this.children.reduce((acc, curr) => {
-        acc.accWidth += curr.offsetWidth;
+      const acc = { accWidth: 0, previousItem: null };
+      [...this._baseChildren, this._moreElement].forEach((child) => {
+        acc.accWidth += child.offsetWidth;
         const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;
         // if previous item is hidden AND is NOT more element we hidde current
         // OR if item has an overflow we hidde current
         // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
         // ELSE current is a display item
-        if ((isPreviousItemHidden && !this.isMoreElement(curr)) ||
-          this.isOverflowElement(acc.accWidth, curr, availableWidth) ||
-          (this.isMoreElement(curr) && !isPreviousItemHidden)) {
-          this.toggleItem(curr, true);
-        }
-        else
-          this.toggleItem(curr, false);
+        this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
         // update previous item with current item
-        acc.previousItem = curr;
-        return acc;
-      }, { accWidth: 0, previousItem: null });
+        acc.previousItem = child;
+      });
     };
     /**
      * Utility method to know if item overflow partialy or totaly in the container
@@ -108,7 +93,7 @@ export class OverflowBehavior {
       if (item.previousElementSibling === null || this.isMoreElement(item))
         return false;
       else if (!this.isMoreElement(item.nextElementSibling))
-        return cumulateWidth + this.moreELement.offsetWidth > availableWidth;
+        return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
       else
         return cumulateWidth > availableWidth;
     };
@@ -118,7 +103,7 @@ export class OverflowBehavior {
      * @param {Element} element element to match with 'MORE' element
      * @returns {boolean} truthy if element is the 'MORE' element
      */
-    this.isMoreElement = (element) => element.getAttribute(OverflowBehaviorElements.MORE) !== null;
+    this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
     /**
      * Toggle display item element
      *
@@ -129,10 +114,10 @@ export class OverflowBehavior {
     this.toggleItem = (item, isHidden) => {
       const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
       if (this.isMoreElement(item))
-        this.toggleElement(this.moreELement, isHidden);
+        this.toggleElement(this._moreElement, isHidden);
       else if (mgActionMenuindex >= 0) {
         this.toggleElement(item, isHidden);
-        this.toggleElement(this.moreELement.querySelector(`[${OverflowBehaviorElements.PROXY_INDEX}="${mgActionMenuindex}"]`), !isHidden);
+        this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
       }
     };
     /**
@@ -154,16 +139,17 @@ export class OverflowBehavior {
      * @returns {void}
      */
     this.restoreItems = () => {
-      this.children.forEach(item => item.removeAttribute('hidden'));
+      [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
     };
-    if (this.resizeObserver === undefined) {
+    if (this._resizeObserver === undefined) {
       // add resize observer
-      this.resizeObserver = new ResizeObserver(entries => {
+      this._resizeObserver = new ResizeObserver(entries => {
         entries.forEach(entry => {
           this.run(entry.contentRect.width);
         });
       });
-      this.resizeObserver.observe(this.element);
+      this._resizeObserver.observe(this.element);
     }
+    this.run();
   }
 }

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

@@ -128,10 +128,12 @@ export const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
+    // Window.frames is an array-like object, needs a classic for loop
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
     for (let i = 0; i < localWindow.frames.length; i++) {
       const childWindow = localWindow.frames[i];
       windows.push(childWindow);
-      windows.concat(getChildWindows(childWindow, windows));
+      getChildWindows(childWindow, windows);
     }
   }
   return windows;

package/dist/collection/utils/locale.utils.js

@@ -6,9 +6,9 @@
  * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-export function localeCurrency(number, locale, currency) {
+export const localeCurrency = (number, locale, currency) => {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
-}
+};
 /**
  * Format number to locale
  *
@@ -16,9 +16,9 @@ export function localeCurrency(number, locale, currency) {
  * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-export function localeNumber(number, locale) {
+export const localeNumber = (number, locale) => {
   return new Intl.NumberFormat(locale).format(number);
-}
+};
 /**
  * Date RegExp
  */
@@ -30,12 +30,12 @@ export const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
  * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-export function localeDate(date, locale) {
+export const localeDate = (date, locale) => {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }
   return new Intl.DateTimeFormat(locale).format(new Date(date));
-}
+};
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
@@ -43,12 +43,12 @@ export function localeDate(date, locale) {
  * @param {HTMLElement} element element we need to get the language
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export const getLocaleMessages = (element, messages, defaultLocale) => {
-  var _a;
   // Get local
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
+  const closestLangAttribute = element.closest('[lang]');
+  const closestLang = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute === null || closestLangAttribute === void 0 ? void 0 : closestLangAttribute.lang);
   const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
   // Only keep first subtag
   const localeSubtag = locale.split('-').shift();

package/dist/collection/utils/unit.test.utils.js

@@ -43,14 +43,42 @@ export const setupResizeObserverMock = ({ disconnect, observe }) => {
 /**
  * force popover id when component use randomed identifier
  *
- * @param {Element} item element wich include mg-popover
+ * @param {Element} component element wich include mg-popover
  * @param {string} id new fixed id
+ * @param {string} interactiveElement element where attribute 'aria-controls' is set
  * @returns {void}
  */
-export const forcePopoverId = (item, id) => {
-  const popover = item.shadowRoot.querySelector('mg-popover');
+export const forcePopoverId = (component, id, interactiveElement = 'button') => {
+  const popover = component.shadowRoot.querySelector('mg-popover');
   if (popover !== null) {
     popover.shadowRoot.querySelector('.mg-popover').setAttribute('id', id);
-    item.shadowRoot.querySelector('button').setAttribute('aria-controls', id);
+    component.shadowRoot.querySelector(interactiveElement).setAttribute('aria-controls', id);
   }
 };
+/**
+ * fix popper console.error in test
+ * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
+ * this is due to internal function isHTMLElement(), so we can not mock it directly.
+ * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
+ * so we only override the console.error side effect for this error
+ *
+ * @returns {void}
+ */
+export const mockConsoleError = () => {
+  jest.spyOn(console, 'error').mockImplementation(error => {
+    const compareWith = 'Popper: "arrow" element must be an HTMLElement (not an SVGElement). To use an SVG arrow, wrap it in an HTMLElement that will be used as the arrow.';
+    if (error !== compareWith)
+      console.log(error);
+  });
+};
+/**
+ * Add missing window.frames property to test context
+ * usefull for component with iframe listeners, ex: mg-popover
+ *
+ * @returns {void}
+ */
+export const mockWindowFrames = () => {
+  Object.defineProperty(window, 'frames', {
+    value: { length: 0 },
+  });
+};

package/dist/collection/variables.css

@@ -102,6 +102,7 @@
     Global
    */
   --default-size: 3.5rem;
+  --mg-disabled-opacity: 0.4;
 
   /*
     <mg-icon>
@@ -117,7 +118,7 @@
 
   --mg-button-border-radius: 0.3rem;
   --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: 0.6;
+  --mg-button-disabled-opacity: var(--mg-disabled-opacity);
   --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
   --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 

package/dist/components/MgInput.js

@@ -59,6 +59,11 @@ const MgInput = (props, children, utils) => {
   if (props.labelOnTop && props.labelHide) {
     throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
   }
+  /**
+   * Set readonly value
+   */
+  if (props.readonlyValue === undefined)
+    props.readonlyValue = props.value;
   /**
    * Component classes
    */
@@ -112,7 +117,7 @@ const MgInput = (props, children, utils) => {
       getInputTitle(),
       !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
     props.readonly ? (h("div", { class: "mg-input__input-container" },
-      h("strong", null, props.readonlyValue || props.value),
+      h("strong", null, props.readonlyValue),
       children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" },
       h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
         applyAriadescribedBy(children, ariaDescribedbyIDs, utils),

package/dist/components/components.utils.js

@@ -128,10 +128,12 @@ const getParentWindows = (localWindow, windows = []) => {
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {
+    // Window.frames is an array-like object, needs a classic for loop
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
     for (let i = 0; i < localWindow.frames.length; i++) {
       const childWindow = localWindow.frames[i];
       windows.push(childWindow);
-      windows.concat(getChildWindows(childWindow, windows));
+      getChildWindows(childWindow, windows);
     }
   }
   return windows;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 /* MgComponents custom elements */
+export { MgActionMore as MgActionMore } from '../types/components/molecules/mg-action-more/mg-action-more';
 export { MgBadge as MgBadge } from '../types/components/atoms/mg-badge/mg-badge';
 export { MgButton as MgButton } from '../types/components/atoms/mg-button/mg-button';
 export { MgCard as MgCard } from '../types/components/atoms/mg-card/mg-card';
@@ -18,6 +19,7 @@ export { MgInputText as MgInputText } from '../types/components/molecules/inputs
 export { MgInputTextarea as MgInputTextarea } from '../types/components/molecules/inputs/mg-input-textarea/mg-input-textarea';
 export { MgInputTitle as MgInputTitle } from '../types/components/atoms/mg-input-title/mg-input-title';
 export { MgInputToggle as MgInputToggle } from '../types/components/molecules/inputs/mg-input-toggle/mg-input-toggle';
+export { MgItemMore as MgItemMore } from '../types/components/molecules/mg-item-more/mg-item-more';
 export { MgMenu as MgMenu } from '../types/components/molecules/menu/mg-menu/mg-menu';
 export { MgMenuItem as MgMenuItem } from '../types/components/molecules/menu/mg-menu-item/mg-menu-item';
 export { MgMessage as MgMessage } from '../types/components/molecules/mg-message/mg-message';
@@ -42,6 +44,15 @@ export { MgTooltip as MgTooltip } from '../types/components/atoms/mg-tooltip/mg-
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,4 +1,5 @@
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { MgActionMore, defineCustomElement as defineCustomElementMgActionMore } from './mg-action-more.js';
 export { MgBadge, defineCustomElement as defineCustomElementMgBadge } from './mg-badge.js';
 export { MgButton, defineCustomElement as defineCustomElementMgButton } from './mg-button.js';
 export { MgCard, defineCustomElement as defineCustomElementMgCard } from './mg-card.js';
@@ -18,6 +19,7 @@ export { MgInputText, defineCustomElement as defineCustomElementMgInputText } fr
 export { MgInputTextarea, defineCustomElement as defineCustomElementMgInputTextarea } from './mg-input-textarea.js';
 export { MgInputTitle, defineCustomElement as defineCustomElementMgInputTitle } from './mg-input-title.js';
 export { MgInputToggle, defineCustomElement as defineCustomElementMgInputToggle } from './mg-input-toggle.js';
+export { MgItemMore, defineCustomElement as defineCustomElementMgItemMore } from './mg-item-more.js';
 export { MgMenu, defineCustomElement as defineCustomElementMgMenu } from './mg-menu.js';
 export { MgMenuItem, defineCustomElement as defineCustomElementMgMenuItem } from './mg-menu-item.js';
 export { MgMessage, defineCustomElement as defineCustomElementMgMessage } from './mg-message.js';

package/dist/components/index2.js

@@ -20,7 +20,9 @@ const input$1 = {
 };
 const form$1 = {
 	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
-	allRequired: "All fields are required"
+	requiredSingle: "Field with a <strong class=\"is-asterisk\">*</strong> is required",
+	allRequired: "All fields are required",
+	allRequiredSingle: "The field is required"
 };
 const message$1 = {
 	closeButton: "Close message"
@@ -53,6 +55,9 @@ const plusMenu$1 = {
 	moreLabel: "Additional menu",
 	badgeLabel: "Include notification(s)"
 };
+const actionMore$1 = {
+	label: "Actions"
+};
 const en = {
 	errors: errors$1,
 	nbCharLeft: nbCharLeft$1,
@@ -64,7 +69,8 @@ const en = {
 	panel: panel$1,
 	skipLinks: skipLinks$1,
 	general: general$1,
-	plusMenu: plusMenu$1
+	plusMenu: plusMenu$1,
+	actionMore: actionMore$1
 };
 
 const errors = {
@@ -89,7 +95,9 @@ const input = {
 };
 const form = {
 	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
-	allRequired: "Tous les champs sont obligatoires"
+	requiredSingle: "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
+	allRequired: "Tous les champs sont obligatoires",
+	allRequiredSingle: "Le champ est obligatoire"
 };
 const message = {
 	closeButton: "Fermer le message"
@@ -122,6 +130,9 @@ const plusMenu = {
 	moreLabel: "Menu complémentaire",
 	badgeLabel: "Notification(s) incluse(s)"
 };
+const actionMore = {
+	label: "Actions"
+};
 const fr = {
 	errors: errors,
 	nbCharLeft: nbCharLeft,
@@ -133,7 +144,8 @@ const fr = {
 	panel: panel,
 	skipLinks: skipLinks,
 	general: general,
-	plusMenu: plusMenu
+	plusMenu: plusMenu,
+	actionMore: actionMore
 };
 
 /**
@@ -144,9 +156,9 @@ const fr = {
  * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-function localeCurrency(number, locale, currency) {
+const localeCurrency = (number, locale, currency) => {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
-}
+};
 /**
  * Format number to locale
  *
@@ -154,9 +166,9 @@ function localeCurrency(number, locale, currency) {
  * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-function localeNumber(number, locale) {
+const localeNumber = (number, locale) => {
   return new Intl.NumberFormat(locale).format(number);
-}
+};
 /**
  * Date RegExp
  */
@@ -168,12 +180,12 @@ const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
  * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-function localeDate(date, locale) {
+const localeDate = (date, locale) => {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }
   return new Intl.DateTimeFormat(locale).format(new Date(date));
-}
+};
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
@@ -181,12 +193,12 @@ function localeDate(date, locale) {
  * @param {HTMLElement} element element we need to get the language
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 const getLocaleMessages = (element, messages, defaultLocale) => {
-  var _a;
   // Get local
-  const closestLang = Intl.NumberFormat.supportedLocalesOf((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang);
+  const closestLangAttribute = element.closest('[lang]');
+  const closestLang = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute === null || closestLangAttribute === void 0 ? void 0 : closestLangAttribute.lang);
   const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
   // Only keep first subtag
   const localeSubtag = locale.split('-').shift();
@@ -203,7 +215,7 @@ const messages = { en, fr };
  * Get Intl object
  *
  * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
 

package/dist/components/mg-action-more.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgActionMore extends Components.MgActionMore, HTMLElement {}
+export const MgActionMore: {
+  prototype: MgActionMore;
+  new (): MgActionMore;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;