@mgdis/mg-components 5.6.0 → 5.7.0

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

@@ -76,13 +76,13 @@ export class MgPanel {
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+          h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
+          h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();

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

@@ -18,7 +18,6 @@
 }
 .mg-popover mg-card {
   position: relative;
-  z-index: -1;
 }
 .mg-popover[data-show] {
   display: block;

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

@@ -1,7 +1,6 @@
 import { Host, h } from '@stencil/core';
-import { createID, isTagName } from '../../../utils/components.utils';
+import { createID, isTagName, getWindows, ClassList } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { getWindows, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
@@ -15,7 +14,10 @@ export class MgPopover {
      * @returns {void}
      */
     this.clickOutside = (event) => {
-      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
+      var _a;
+      if (!this.disabled &&
+        event.target.closest('mg-popover') !== this.element &&
+        !(((_a = event.target.closest(`[data-mg-popover-guard]`)) === null || _a === void 0 ? void 0 : _a.dataset.mgPopoverGuard) === this.identifier)) {
         this.display = false;
       }
     };
@@ -26,7 +28,7 @@ export class MgPopover {
      */
     this.show = () => {
       // Make the popover visible
-      this.popover.setAttribute('data-show', '');
+      this.popover.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
@@ -135,6 +137,17 @@ export class MgPopover {
         },
       ],
     });
+    if (this.resizeObserver === undefined) {
+      // add resize observer
+      this.resizeObserver = new ResizeObserver(entries => {
+        if (entries.some(entrie => entrie.target.getAttribute('slot') !== null)) {
+          this.popper.update();
+        }
+      });
+      Array.from(this.element.querySelectorAll('[slot]')).forEach(element => {
+        this.resizeObserver.observe(element);
+      });
+    }
     // Add events to toggle display
     interactiveElement.addEventListener('click', () => {
       if (!this.disabled)

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 import { h } from '@stencil/core';
 import { initLocales } from '../../../locales';
 export class MgSkipLinks {
@@ -42,7 +43,7 @@ export class MgSkipLinks {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list" }, this.links.map(link => (h("li", null, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+    return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
   }
   static get is() { return "mg-skip-links"; }
   static get encapsulation() { return "shadow"; }

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

@@ -49,6 +49,7 @@
   background-color: unset;
   border: none;
   font-family: var(--font-family);
+  font-weight: 400;
   color: hsl(var(--mg-tabs-color-hsl, var(--color-dark)));
   line-height: var(--line-height);
   text-decoration: none;
@@ -58,7 +59,7 @@
 }
 .mg-tabs__navigation-button:disabled, .mg-tabs__navigation-button--disabled {
   cursor: default;
-  opacity: 0.3;
+  opacity: var(--mg-disabled-opacity);
 }
 .mg-tabs__navigation-button:focus-visible {
   z-index: 10;

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

@@ -52,7 +52,7 @@ export class MgTabs {
      * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
-      const tabId = event.currentTarget.getAttribute('data-index');
+      const tabId = event.currentTarget.dataset.index;
       const tab = this.tabs[Number(tabId) - this.startIndex];
       if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {
         event.preventDefault();
@@ -78,7 +78,7 @@ export class MgTabs {
     this.handleKeydown = (event) => {
       const parent = event.target.parentElement;
       if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-        this.tabFocus = Number(event.target.getAttribute('data-index'));
+        this.tabFocus = Number(event.target.dataset.index);
         parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
         // Move right
         if (event.key === 'ArrowRight') {
@@ -94,14 +94,15 @@ export class MgTabs {
           if (this.tabFocus < this.startIndex)
             this.tabFocus = this.tabs.length;
         }
+        const parentButtonElement = parent.querySelector(`[data-index="${this.tabFocus}"]`);
         // if focus item is ['hidden'] we recursively repeat action
         if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {
-          parent.querySelector(`[data-index="${this.tabFocus}"]`).dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
+          parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));
           // else run focus methods on tabFocus element
         }
         else {
-          parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '0');
-          parent.querySelector(`[data-index="${this.tabFocus}"]`).focus();
+          parentButtonElement.setAttribute('tabindex', '0');
+          parentButtonElement.focus();
         }
       }
       else if (event.key === 'Tab') {
@@ -145,7 +146,7 @@ export class MgTabs {
   }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
-      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+      throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
     this.classList.add(`mg-tabs--size-${this.size}`);
   }
@@ -218,13 +219,13 @@ export class MgTabs {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
         [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
         [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+      }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/locales/en/messages.json

@@ -21,7 +21,9 @@
   },
   "form": {
     "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"
   },
   "message": {
     "closeButton": "Close message"
@@ -53,5 +55,8 @@
   "plusMenu": {
     "moreLabel": "Additional menu",
     "badgeLabel": "Include notification(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

package/dist/collection/locales/fr/messages.json

@@ -21,7 +21,9 @@
   },
   "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"
   },
   "message": {
     "closeButton": "Fermer le message"
@@ -53,5 +55,8 @@
   "plusMenu": {
     "moreLabel": "Menu complémentaire",
     "badgeLabel": "Notification(s) incluse(s)"
+  },
+  "actionMore": {
+    "label": "Actions"
   }
 }

package/dist/collection/locales/index.js

@@ -7,6 +7,6 @@ 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
  */
 export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);

package/dist/collection/styles/mg-icon-animation.scss

@@ -0,0 +1,6 @@
+@mixin rotate($selector, $duration) {
+  transition: $duration;
+  &--rotate#{$selector} {
+    transform: rotate(180deg);
+  }
+}

package/dist/collection/styles/navigation-button.scss

@@ -35,6 +35,7 @@ $navigation-button-column-gap: 1rem;
     background-color: unset;
     border: none;
     font-family: var(--font-family);
+    font-weight: 400;
     color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
     line-height: var(--line-height);
     text-decoration: none;
@@ -44,7 +45,7 @@ $navigation-button-column-gap: 1rem;
     &:disabled,
     &--disabled {
       cursor: default;
-      opacity: 0.3;
+      opacity: var(--mg-disabled-opacity);
     }
     &:focus-visible {
       z-index: 10;

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

@@ -1,4 +1,3 @@
-import { Status } from '../components/molecules/menu/mg-menu-item/mg-menu-item.conf';
 /**
  * MgMenuItem type guard
  *
@@ -27,15 +26,6 @@ export class OverflowBehavior {
     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);
-    };
     /************
      * Internal *
      ************/
@@ -46,28 +36,26 @@ export class OverflowBehavior {
      * @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();
+        this.moreElement.setAttribute(OverflowBehaviorElements.MORE, '');
         // set children
         this.children = Array.from(this.element.children);
-        let moreELementChildren;
+        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));
+        if (isMgMenuItem(this.moreElement)) {
+          moreElementChildren = Array.from(this.moreElement.querySelector('mg-menu').children).filter(element => allowedElements.includes(element.nodeName));
         }
         this.children.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}`);
+            moreElementChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
           }
         });
       }
       this.updateDisplayedItems(width);
-      if (isMgMenuItem(this.moreELement))
-        this.updateActiveStatus();
     };
     /**
      * Update displayed items in container from a given available space
@@ -77,24 +65,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.children.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 +90,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;
     };
@@ -129,10 +111,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.moreElement.querySelector(`[${OverflowBehaviorElements.PROXY_INDEX}="${mgActionMenuindex}"]`), !isHidden);
       }
     };
     /**

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';
@@ -42,6 +43,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';