@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/collection/styles/fonts.scss

@@ -0,0 +1,21 @@
+/**
+ * Open Sans
+ * https://fonts.google.com/specimen/Open+Sans
+ */
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 600;
+  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 700;
+  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
+}

package/dist/collection/styles/form.scss

@@ -0,0 +1,3 @@
+.is-asterisk {
+  color: hsl(var(--color-danger));
+}

package/dist/collection/styles/global.scss

@@ -0,0 +1,87 @@
+/**
+ * Here we building the CSS for the component library
+ */
+
+// Normalize CSS : https://necolas.github.io/normalize.css/
+@import '~normalize.css/normalize.css';
+
+// Fonts
+@import './fonts.scss';
+
+// Variables
+@import './variables.css';
+
+// Main style
+@import './main.scss';
+
+// Typography style
+@import './typography.scss';
+
+// Accessibility
+@import './a11y.scss';
+
+// Form
+// already included by mg-form
+// @import './form.scss';
+
+// Layout
+@import './layout.scss';
+
+// Utilities
+@import './utilities.scss';
+
+/**
+ * Components style
+ * molecules
+ */
+
+@import './components.scss';
+
+/* Atoms */
+
+// <mg-badge>
+@import '../components/atoms/mg-badge/mg-badge.scss';
+
+// <mg-button>
+@import '../components/atoms/mg-button/mg-button.scss';
+
+// <mg-character-left>
+@import '../components/atoms/mg-character-left/mg-character-left.scss';
+
+// <mg-icon>
+@import '../components/atoms/mg-icon/mg-icon.scss';
+
+// <mg-input-title>
+//! For now input style will not be included
+// @import '../components/atoms/mg-input-title/mg-input-title.scss';
+
+// <mg-tag>
+@import '../components/atoms/mg-tag/mg-tag.scss';
+
+// <mg-tooltip>
+@import '../components/atoms/mg-tooltip/mg-tooltip.scss';
+
+/* Molecules */
+
+// <mg-input-...>
+//! For now input style will not be included
+// @import '../components/molecules/inputs/styles/mg-input.scss';
+// @import '../components/molecules/inputs/styles/mg-input-box.scss';
+// @import '../components/molecules/inputs/styles/mg-input-charleft.scss';
+// @import '../components/molecules/inputs/styles/mg-input-fieldset.scss';
+// @import '../components/molecules/inputs/styles/mg-input-width.scss';
+
+// <mg-form>
+@import '../components/molecules/mg-form/mg-form.scss';
+
+// <mg-message>
+@import '../components/molecules/mg-message/mg-message.scss';
+
+// <mg-pagination>
+@import '../components/molecules/mg-pagination/mg-pagination.scss';
+
+// <mg-popover>
+@import '../components/molecules/mg-popover/mg-popover.scss';
+
+// <mg-tabs>
+@import '../components/molecules/mg-tabs/mg-tabs.scss';

package/dist/collection/styles/layout.scss

@@ -0,0 +1,29 @@
+@use 'sass:math';
+
+// Number of column
+$grid-columns: 12;
+
+// Calculate width
+@function round-width($i) {
+  $width: math.div(100 * $i, $grid-columns);
+  @return #{$width}#{'%'};
+}
+
+.mg-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// Those columns will equaly share space
+.mg-grid__col {
+  flex: 1 0 0;
+  padding: 0 var(--mg-grid-spacing);
+
+  // Building columns
+  @for $i from 1 through $grid-columns {
+    &.mg-grid__col-#{$i} {
+      flex: 0 0 auto;
+      width: round-width($i);
+    }
+  }
+}

package/dist/collection/styles/main.scss

@@ -0,0 +1,23 @@
+// Make all element use the border box model
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/**
+ * We set html font size to 62.5% to get 10px in most of the case.
+ * This is a common use for an easiest calculation : 1rem = 10px
+ * Default font size will be defined in body element.
+ */
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+  -webkit-font-smoothing: antialiased;
+}

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

@@ -0,0 +1,76 @@
+@use 'sass:map';
+
+$border-bottom-size: 0.3rem;
+$font-size-large: calc(var(--font-size) + 0.2rem);
+$navigation-button-column-gap: 1rem;
+
+@mixin navigation-button($element, $button-sizes) {
+  @each $name, $size in $button-sizes {
+    .#{$element}.#{$element}--size-#{$name} .#{$element}__navigation-button,
+    .#{$element}__navigation-button.#{$element}__navigation-button--size-#{$name} {
+      padding: #{map.get($size, 'vertical')} #{map.get($size, 'horizontal')};
+      height: calc(#{map.get($size, 'height')});
+      &,
+      ::slotted([slot='label']),
+      ::slotted([slot='metadata']) {
+        @if $name == 'regular' {
+          font-size: var(--font-size);
+        } @else {
+          font-size: $font-size-large;
+        }
+      }
+      &.#{$element}__navigation-button--horizontal {
+        padding-bottom: calc(#{map.get($size, 'vertical')} - #{$border-bottom-size});
+      }
+      &.#{$element}__navigation-button--vertical {
+        padding-left: calc(#{map.get($size, 'horizontal')} - #{$border-bottom-size});
+      }
+    }
+  }
+
+  .#{$element}__navigation-button {
+    display: flex;
+    align-items: center;
+    column-gap: var(--#{$element}-navigation-button-column-gap, $navigation-button-column-gap);
+    background-color: unset;
+    border: none;
+    font-family: var(--font-family);
+    color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
+    line-height: var(--line-height);
+    text-decoration: none;
+    white-space: nowrap;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:disabled,
+    &--disabled {
+      cursor: default;
+      opacity: 0.3;
+    }
+    &:focus-visible {
+      z-index: 10;
+    }
+    &:hover:not(.#{$element}__navigation-button--disabled),
+    &:focus-visible:not(.#{$element}__navigation-button--disabled) {
+      background-color: hsl(var(--#{$element}-focused-background-color-hsl), 0.1);
+    }
+    &.#{$element}__navigation-button--active {
+      color: hsl(var(--#{$element}-color-active-hsl));
+      font-weight: 600;
+      &.#{$element}__navigation-button--horizontal {
+        border-bottom-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+      &.#{$element}__navigation-button--vertical {
+        border-left-color: hsl(var(--#{$element}-border-color-active-hsl));
+      }
+    }
+    &.#{$element}__navigation-button--hidden {
+      display: none;
+    }
+    &.#{$element}__navigation-button--horizontal {
+      border-bottom: $border-bottom-size solid transparent;
+    }
+    &.#{$element}__navigation-button--vertical {
+      border-left: $border-bottom-size solid transparent;
+    }
+  }
+}

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -0,0 +1,9 @@
+@mixin reset-slot-card-variables() {
+  ::slotted(*) {
+    --mg-card-border: var(--mg-card-border-default);
+    --mg-card-padding: var(--mg-card-padding-default);
+    --mg-card-border-radius: var(--mg-card-border-radius-default);
+    --mg-card-background: var(--mg-card-background-default);
+    --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+  }
+}

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,169 @@
+import { Status } from '../components/molecules/menu/mg-menu-item/mg-menu-item.conf';
+/**
+ * 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();
+    };
+    /**
+     * 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 *
+     ************/
+    /**
+     * 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);
+      if (isMgMenuItem(this.moreELement))
+        this.updateActiveStatus();
+    };
+    /**
+     * 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();
+      this.children.reduce((acc, curr) => {
+        acc.accWidth += curr.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);
+        // update previous item with current item
+        acc.previousItem = curr;
+        return acc;
+      }, { accWidth: 0, previousItem: null });
+    };
+    /**
+     * 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,53 @@ 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) {
+    for (let i = 0; i < localWindow.frames.length; i++) {
+      const childWindow = localWindow.frames[i];
+      windows.push(childWindow);
+      windows.concat(getChildWindows(childWindow, windows));
+    }
+  }
+  return windows;
+};

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

@@ -36,3 +36,25 @@ export function localeDate(date, locale) {
   }
   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: 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 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,43 @@ 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} item element wich include mg-popover
+ * @param {string} id new fixed id
+ * @returns {void}
+ */
+export const forcePopoverId = (item, id) => {
+  const popover = item.shadowRoot.querySelector('mg-popover');
+  if (popover !== null) {
+    popover.shadowRoot.querySelector('.mg-popover').setAttribute('id', id);
+    item.shadowRoot.querySelector('button').setAttribute('aria-controls', id);
+  }
+};