@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { IconSizeType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
@@ -13,13 +14,31 @@ import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
-import { Direction } from "./components/molecules/menu/mg-menu/mg-menu.conf";
-import { MenuItemSizeType, Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
+import { Direction, MenuSizeType, MoreItemType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
+import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button": MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron": boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon": MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -874,6 +893,14 @@ export namespace Components {
           * Menu label. Include short menu description. Required for accessibility
          */
         "label": string;
+        /**
+          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+         */
+        "moreitem": MoreItemType;
+        /**
+          * Define mg-menu size Default: 'regular'
+         */
+        "size": MenuSizeType;
     }
     interface MgMenuItem {
         /**
@@ -881,13 +908,9 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Define menu-item badge when defined menu-item contain an anchor instead of button
+          * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href": string;
-        /**
-          * Define menu-item size. Default: "large".
-         */
-        "size": MenuItemSizeType;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -938,6 +961,10 @@ export namespace Components {
           * Component current page
          */
         "currentPage": number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -982,6 +1009,10 @@ export namespace Components {
         "titlePatternErrorMessage": string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide": boolean;
         /**
           * Define if popover has a cross button
          */
@@ -1011,7 +1042,7 @@ export namespace Components {
     }
     interface MgTabs {
         /**
-          * Active tab number default: first is 1
+          * Active tab number
          */
         "activeTab": number;
         /**
@@ -1112,6 +1143,10 @@ export interface MgInputToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgInputToggleElement;
 }
+export interface MgMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgMenuItemElement;
+}
 export interface MgMessageCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgMessageElement;
@@ -1132,11 +1167,21 @@ export interface MgPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgPopoverElement;
 }
+export interface MgSkipLinksCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgSkipLinksElement;
+}
 export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgTabsElement;
 }
 declare global {
+    interface HTMLMgActionMoreElement extends Components.MgActionMore, HTMLStencilElement {
+    }
+    var HTMLMgActionMoreElement: {
+        prototype: HTMLMgActionMoreElement;
+        new (): HTMLMgActionMoreElement;
+    };
     interface HTMLMgBadgeElement extends Components.MgBadge, HTMLStencilElement {
     }
     var HTMLMgBadgeElement: {
@@ -1318,6 +1363,7 @@ declare global {
         new (): HTMLMgTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "mg-action-more": HTMLMgActionMoreElement;
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-card": HTMLMgCardElement;
@@ -1351,6 +1397,24 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button"?: MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron"?: boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon"?: MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -2239,6 +2303,14 @@ declare namespace LocalJSX {
           * Menu label. Include short menu description. Required for accessibility
          */
         "label": string;
+        /**
+          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+         */
+        "moreitem"?: MoreItemType;
+        /**
+          * Define mg-menu size Default: 'regular'
+         */
+        "size"?: MenuSizeType;
     }
     interface MgMenuItem {
         /**
@@ -2246,13 +2318,13 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Define menu-item badge when defined menu-item contain an anchor instead of button
+          * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href"?: string;
         /**
-          * Define menu-item size. Default: "large".
+          * Emited event when status change
          */
-        "size"?: MenuItemSizeType;
+        "onStatus-change"?: (event: MgMenuItemCustomEvent<MgMenuItem['status']>) => void;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -2319,6 +2391,10 @@ declare namespace LocalJSX {
           * Component current page
          */
         "currentPage"?: number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -2375,6 +2451,10 @@ declare namespace LocalJSX {
         "titlePatternErrorMessage"?: string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide"?: boolean;
         /**
           * Define if popover has a cross button
          */
@@ -2405,10 +2485,14 @@ declare namespace LocalJSX {
           * Skip links
          */
         "links"?: SkipLink[];
+        /**
+          * Emited event when link is clicked
+         */
+        "onGo-to-anchor"?: (event: MgSkipLinksCustomEvent<string>) => void;
     }
     interface MgTabs {
         /**
-          * Active tab number default: first is 1
+          * Active tab number
          */
         "activeTab"?: number;
         /**
@@ -2469,6 +2553,7 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface IntrinsicElements {
+        "mg-action-more": MgActionMore;
         "mg-badge": MgBadge;
         "mg-button": MgButton;
         "mg-card": MgCard;
@@ -2505,6 +2590,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "mg-action-more": LocalJSX.MgActionMore & JSXBase.HTMLAttributes<HTMLMgActionMoreElement>;
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
             "mg-card": LocalJSX.MgCard & JSXBase.HTMLAttributes<HTMLMgCardElement>;

package/dist/types/locales/index.d.ts

@@ -22,7 +22,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -51,6 +53,13 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: string;
+    };
+    actionMore: {
+      label: string;
+    };
   };
   fr: {
     errors: {
@@ -62,13 +71,7 @@ declare const messages: {
         minMax: string;
       };
       numeric: {
-        min: string; /**
-         * Get Intl object
-         * 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
-         * @returns {{ locale: string; messages: unknown }} messages object
-         */
+        min: string;
         max: string;
         minMax: string;
       };
@@ -81,7 +84,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -110,17 +115,23 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: string;
+    };
+    actionMore: {
+      label: string;
+    };
   };
 };
 /**
  * Get Intl object
- * 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
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;
-  messages: any;
+  messages: Record<string, unknown>;
 };
 export {};

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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 }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,8 +442,44 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {

package/dist/types/utils/behaviors.utils.d.ts

@@ -0,0 +1,77 @@
+export declare enum OverflowBehaviorElements {
+  MORE = "data-overflow-more",
+  BASE_INDEX = "data-overflow-base-index",
+  PROXY_INDEX = "data-overflow-proxy-index"
+}
+export declare class OverflowBehavior {
+  private element;
+  private render;
+  private resizeObserver;
+  private moreElement;
+  private children;
+  constructor(element: Element, render: () => HTMLElement);
+  /**********
+   * Public *
+   **********/
+  /**
+   * Disconnect ResizeObserver
+   *
+   * @returns {void}
+   */
+  disconnect: () => void;
+  /************
+   * Internal *
+   ************/
+  /**
+   * run overflow behavior
+   *
+   * @param {number} width width of the container
+   * @returns {void}
+   */
+  private run;
+  /**
+   * Update displayed items in container from a given available space
+   *
+   * @param {number} availableWidth available width in container to display child items
+   * @returns {void}
+   */
+  private updateDisplayedItems;
+  /**
+   * 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
+   */
+  private isOverflowElement;
+  /**
+   * 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
+   */
+  private isMoreElement;
+  /**
+   * Toggle display item element
+   *
+   * @param {HTMLElement} item item to control
+   * @param {boolean} isHidden is item hidden
+   * @returns {void}
+   */
+  private toggleItem;
+  /**
+   * Toggle element's hidde attribute
+   *
+   * @param {Element} element element to toggle
+   * @param {boolean} isHidden element is hidden
+   * @returns {void}
+   */
+  private toggleElement;
+  /**
+   * Remove hidden attributes on all items
+   *
+   * @returns {void}
+   */
+  private restoreItems;
+}

package/dist/types/utils/components.utils.d.ts

@@ -60,3 +60,17 @@ export declare const isTagName: (element: Element, tagNames: string[]) => boolea
  * Focusable elements query selector
  */
 export declare 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 declare const getWindows: (localWindow: Window) => Window[];
+/**
+ * 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 declare const getParentWindows: (localWindow: Window, windows?: Window[]) => Window[];

package/dist/types/utils/locale.utils.d.ts

@@ -6,7 +6,7 @@
  * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-export declare function localeCurrency(number: number, locale: string, currency: string): string;
+export declare const localeCurrency: (number: number, locale: string, currency: string) => string;
 /**
  * Format number to locale
  *
@@ -14,7 +14,7 @@ export declare function localeCurrency(number: number, locale: string, currency:
  * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-export declare function localeNumber(number: number, locale: string): string;
+export declare const localeNumber: (number: number, locale: string) => string;
 /**
  * Date RegExp
  */
@@ -26,4 +26,17 @@ export declare const dateRegExp: RegExp;
  * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-export declare function localeDate(date: string, locale: string): string;
+export declare const localeDate: (date: string, locale: string) => string;
+/**
+ * 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 declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
+  locale: string;
+  messages: Record<string, unknown>;
+};

package/dist/types/utils/unit.test.utils.d.ts

@@ -10,11 +10,11 @@ export declare const cloneDeep: (obj: unknown) => unknown;
  *
  * @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.
+ * mock the mutation 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
+ * @param {Function} mutationObserverMock.observe observe function
+ * @param {Function} mutationObserverMock.takeRecords takeRecords function
  * @returns {MutationObserver} Mocked MutationObserver
  * @example
  * ```
@@ -28,15 +28,69 @@ export declare const cloneDeep: (obj: unknown) => unknown;
  * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
  * ```
  */
-export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: {
-  disconnect: any;
-  observe: any;
-  takeRecords: any;
-}) => {
-  new (fn: any): {
-    disconnect: () => void;
-    observe: (target: Node, options?: MutationObserverInit) => void;
-    takeRecords: () => MutationRecord[];
-    cb: () => unknown;
-  };
+type SetupMutationObserverMockParams = {
+  disconnect: MutationObserver['disconnect'];
+  observe: MutationObserver['observe'];
+  takeRecords: MutationObserver['takeRecords'];
+};
+export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
+/**
+ * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
+ *
+ * @param resizeObserverMock - 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} resizeObserverMock.disconnect disconnect function
+ * @param {Function} resizeObserverMock.observe observe function
+ * @returns {ResizeObserver} Mocked ResizeObserver
+ * @example
+ * ```
+ * let fireRo;
+ * setupResizeObserverMock({
+ *   observe: function () {
+ *     fireRo = this.cb;
+ *   },
+ * });
+ * ...
+ * fireRo([{
+ *  borderBoxSize: ResizeObserverSize[],
+ *  contentBoxSize: ResizeObserverSize[],
+ *  contentRect: DOMRectReadOnly,
+ *  devicePixelContentBoxSize: ResizeObserverSize[],
+ *  target: yourMockElemenet
+ * }]);;
+ * ```
+ */
+type setupResizeObserverMockParams = {
+  disconnect: ResizeObserver['disconnect'];
+  observe: ResizeObserver['observe'];
 };
+export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
+/**
+ * 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 declare const forcePopoverId: (component: Element, id: string, interactiveElement?: string) => void;
+/**
+ * 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 declare const mockConsoleError: () => void;
+/**
+ * Add missing window.frames property to test context
+ * usefull for component with iframe listeners, ex: mg-popover
+ *
+ * @returns {void}
+ */
+export declare const mockWindowFrames: () => void;
+export {};

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<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 function setNonce(nonce: string): void;