@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/collection/styles/typography.scss

@@ -0,0 +1,75 @@
+/**
+ * Paragraph
+ */
+
+p {
+  margin: 0;
+  & + p {
+    margin-top: 1rem;
+  }
+}
+
+/**
+ * Headings
+ *
+ * Classes can also be used on element to match attending, for exemples :
+ * <h4 class="h3">blu</h4>
+ * <div role="heading" aria-level="4" class="h4">blu</div>
+ */
+
+@for $i from 1 through 6 {
+  h#{$i},
+  .h#{$i} {
+    font-family: var(--font-family-heading);
+  }
+}
+
+//h1
+h1,
+.h1 {
+  font-size: calc(var(--font-size) * 1.85);
+}
+
+//h2
+h2,
+.h2 {
+  font-size: calc(var(--font-size) * 1.65);
+}
+
+//h3
+h3,
+.h3 {
+  font-size: calc(var(--font-size) * 1.35);
+}
+
+//h4
+h4,
+.h4 {
+  font-size: calc(var(--font-size) * 1.2);
+}
+
+//h5
+h5,
+.h5 {
+  font-size: calc(var(--font-size) * 1.1);
+}
+
+//h6
+h6,
+.h6 {
+  font-size: calc(var(--font-size) * 0.8);
+}
+
+/**
+ * Links
+ */
+a {
+  color: hsl(var(--color-primary));
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}

package/dist/collection/styles/utilities.scss

@@ -0,0 +1,21 @@
+// Helper to manage space between elements
+.mg-group-elements {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  // remove default margin
+  & > * {
+    margin: 0 !important; // I would say important is allowed in utility classes ?
+  }
+
+  // Align button on right side
+  &.mg-group-elements--align-right {
+    justify-content: flex-end;
+  }
+}
+
+.no-padding {
+  padding: 0;
+}

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

@@ -0,0 +1,151 @@
+/**
+ * MgMenuItem type guard
+ *
+ * @param {HTMLElement} element element to control type
+ * @returns {boolean} truthy if element is mg-menu-item
+ */
+const isMgMenuItem = (element) => element.nodeName === 'MG-MENU-ITEM';
+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 = {}));
+export class OverflowBehavior {
+  constructor(element, render) {
+    this.element = element;
+    this.render = render;
+    /**********
+     * Public *
+     **********/
+    /**
+     * Disconnect ResizeObserver
+     *
+     * @returns {void}
+     */
+    this.disconnect = () => {
+      this.resizeObserver.disconnect();
+    };
+    /************
+     * Internal *
+     ************/
+    /**
+     * run overflow behavior
+     *
+     * @param {number} width width of the container
+     * @returns {void}
+     */
+    this.run = (width) => {
+      if (this.moreElement === undefined) {
+        // set moreElement
+        this.moreElement = this.render();
+        this.moreElement.setAttribute(OverflowBehaviorElements.MORE, '');
+        // 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.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}`);
+          }
+        });
+      }
+      this.updateDisplayedItems(width);
+    };
+    /**
+     * Update displayed items in container from a given available space
+     *
+     * @param {number} availableWidth available width in container to display child items
+     * @returns {void}
+     */
+    this.updateDisplayedItems = (availableWidth) => {
+      this.restoreItems();
+      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
+        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 = child;
+      });
+    };
+    /**
+     * Utility method to know if item overflow partialy or totaly in the container
+     *
+     * @param {number} cumulateWidth previous sibling elements cumulate width + item width
+     * @param {HTMLElement} item item HTML element
+     * @param {number} availableWidth container available width
+     * @returns {boolean} truthy if element is overflow
+     */
+    this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
+      if (item.previousElementSibling === null || this.isMoreElement(item))
+        return false;
+      else if (!this.isMoreElement(item.nextElementSibling))
+        return cumulateWidth + this.moreElement.offsetWidth > availableWidth;
+      else
+        return cumulateWidth > availableWidth;
+    };
+    /**
+     * Utility method to know if a given element is the 'MORE' element
+     *
+     * @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;
+    /**
+     * Toggle display item element
+     *
+     * @param {HTMLElement} item item to control
+     * @param {boolean} isHidden is item hidden
+     * @returns {void}
+     */
+    this.toggleItem = (item, isHidden) => {
+      const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
+      if (this.isMoreElement(item))
+        this.toggleElement(this.moreElement, isHidden);
+      else if (mgActionMenuindex >= 0) {
+        this.toggleElement(item, isHidden);
+        this.toggleElement(this.moreElement.querySelector(`[${OverflowBehaviorElements.PROXY_INDEX}="${mgActionMenuindex}"]`), !isHidden);
+      }
+    };
+    /**
+     * Toggle element's hidde attribute
+     *
+     * @param {Element} element element to toggle
+     * @param {boolean} isHidden element is hidden
+     * @returns {void}
+     */
+    this.toggleElement = (element, isHidden) => {
+      if (isHidden)
+        element.setAttribute('hidden', '');
+      else
+        element.removeAttribute('hidden');
+    };
+    /**
+     * Remove hidden attributes on all items
+     *
+     * @returns {void}
+     */
+    this.restoreItems = () => {
+      this.children.forEach(item => item.removeAttribute('hidden'));
+    };
+    if (this.resizeObserver === undefined) {
+      // add resize observer
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.run(entry.contentRect.width);
+        });
+      });
+      this.resizeObserver.observe(this.element);
+    }
+  }
+}

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

@@ -86,3 +86,55 @@ export const isTagName = (element, tagNames) => {
  * Focusable elements query selector
  */
 export const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
+/**
+ *
+ * @param {Window} localWindow the window we are lookink for other windows
+ * @returns {Window[]} The list of windows found
+ */
+export const getWindows = (localWindow) => {
+  const parentWindows = getParentWindows(localWindow);
+  const childWindows = getChildWindows(localWindow);
+  return [localWindow, ...parentWindows, ...childWindows];
+};
+/**
+ * Get parent windows
+ *
+ * @param {Window} localWindow the window we are lookink for parents
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+export const getParentWindows = (localWindow, windows = []) => {
+  // Check if is in iframe
+  if (localWindow.self !== localWindow.top) {
+    // Check if we have permission to access parent
+    try {
+      const parentWindow = localWindow.parent;
+      windows.push(parentWindow);
+      return getParentWindows(parentWindow, windows);
+    }
+    catch (err) {
+      console.error('Different hosts between iframes:', err);
+      return windows;
+    }
+  }
+  return windows;
+};
+/**
+ * Get child windows
+ *
+ * @param {Window} localWindow the window we are lookink for children
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+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);
+      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,9 +30,31 @@ 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
+ *
+ * @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: Record<string, unknown> }} messages object
+ */
+export const getLocaleMessages = (element, messages, defaultLocale) => {
+  // Get local
+  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();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};

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

@@ -5,29 +5,6 @@
  * @returns {unknown} cloned json
  */
 export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
-/**
- * Utility function that mocks the `MutationObserver` API. Recommended to execute inside `beforeEach`.
- *
- * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`
- * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
- * mock the resize observer, but its methods.
- * You can manually fire an intersection entry:
- * @param {Function} mutationObserverMock.disconnect disconnect function
- * @param {Function} mutationObserverMock.observe observe fnuction
- * @param {Function} mutationObserverMock.takeRecords takeRecords fnuction
- * @returns {MutationObserver} Mocked MutationObserver
- * @example
- * ```
- * let fireMo;
- * setupMutationObserverMock({
- *   observe: function () {
- *     fireMo = this.cb;
- *   },
- * });
- * ...
- * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
- * ```
- */
 export const setupMutationObserverMock = ({ disconnect, observe, takeRecords }) => {
   class MockMutationObserver {
     constructor(fn) {
@@ -37,15 +14,71 @@ export const setupMutationObserverMock = ({ disconnect, observe, takeRecords })
       this.cb = fn;
     }
   }
-  Object.defineProperty(window, 'MutationObserver', {
-    writable: true,
-    configurable: true,
-    value: MockMutationObserver,
-  });
-  Object.defineProperty(global, 'MutationObserver', {
-    writable: true,
-    configurable: true,
-    value: MockMutationObserver,
+  [window, global].forEach(element => {
+    Object.defineProperty(element, 'MutationObserver', {
+      writable: true,
+      configurable: true,
+      value: MockMutationObserver,
+    });
   });
   return MockMutationObserver;
 };
+export const setupResizeObserverMock = ({ disconnect, observe }) => {
+  class MockResizeObserver {
+    constructor(fn) {
+      this.disconnect = disconnect;
+      this.observe = observe;
+      this.cb = fn;
+    }
+  }
+  [window, global].forEach(element => {
+    Object.defineProperty(element, 'ResizeObserver', {
+      writable: true,
+      configurable: true,
+      value: MockResizeObserver,
+    });
+  });
+  return MockResizeObserver;
+};
+/**
+ * force popover id when component use randomed identifier
+ *
+ * @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 = (component, id, interactiveElement = 'button') => {
+  const popover = component.shadowRoot.querySelector('mg-popover');
+  if (popover !== null) {
+    popover.shadowRoot.querySelector('.mg-popover').setAttribute('id', 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

@@ -96,12 +96,13 @@
   --color-secondary: hsl(var(--color-neutral));
 
   /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
   /*
     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 */
 
@@ -180,7 +181,7 @@
   --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
-   /*
+  /*
     <mg-illustrated-message>
    */
 
@@ -189,16 +190,16 @@
   /*
     <mg-card>
    */
-  --mg-card-padding: 1.6rem;
-  --mg-card-border-radius: 0.5rem;
-  --mg-card-background: hsl(var(--color-light));
-  --mg-card-border: 0.1rem solid hsla(var(--color-dark), 5%);
-  --mg-card-box-shadow: var(--box-shadow);
+  --mg-card-padding-default: 1.6rem;
+  --mg-card-border-radius-default: 0.5rem;
+  --mg-card-background-default: hsl(var(--color-light));
+  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
+  --mg-card-box-shadow-default: var(--box-shadow);
 
   /*
     <mg-divider>
   */
-  --mg-divider-background-color: hsla(var(--color-dark), 15%);
+  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
   --mg-divider-thickness: 0.1rem;
   --mg-divider-vertical-spacing: 4rem;
 
@@ -245,7 +246,7 @@
   --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
   --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
-  
+
   /*
   <mg-tabs>
   */

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

@@ -86,5 +86,57 @@ const isTagName = (element, tagNames) => {
  * Focusable elements query selector
  */
 const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
+/**
+ *
+ * @param {Window} localWindow the window we are lookink for other windows
+ * @returns {Window[]} The list of windows found
+ */
+const getWindows = (localWindow) => {
+  const parentWindows = getParentWindows(localWindow);
+  const childWindows = getChildWindows(localWindow);
+  return [localWindow, ...parentWindows, ...childWindows];
+};
+/**
+ * Get parent windows
+ *
+ * @param {Window} localWindow the window we are lookink for parents
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+const getParentWindows = (localWindow, windows = []) => {
+  // Check if is in iframe
+  if (localWindow.self !== localWindow.top) {
+    // Check if we have permission to access parent
+    try {
+      const parentWindow = localWindow.parent;
+      windows.push(parentWindow);
+      return getParentWindows(parentWindow, windows);
+    }
+    catch (err) {
+      console.error('Different hosts between iframes:', err);
+      return windows;
+    }
+  }
+  return windows;
+};
+/**
+ * Get child windows
+ *
+ * @param {Window} localWindow the window we are lookink for children
+ * @param {Window[]} windows The list of allready found windows
+ * @returns {Window[]} The list of windows found
+ */
+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);
+      getChildWindows(childWindow, windows);
+    }
+  }
+  return windows;
+};
 
-export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, isTagName as i };
+export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };

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';