@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/types/components.d.ts

@@ -13,10 +13,12 @@ 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 MgBadge {
         /**
@@ -872,6 +874,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 {
         /**
@@ -879,13 +889,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"
          */
@@ -980,6 +986,10 @@ export namespace Components {
         "titlePatternErrorMessage": string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide": boolean;
         /**
           * Define if popover has a cross button
          */
@@ -1001,9 +1011,15 @@ export namespace Components {
          */
         "placement": Placement;
     }
+    interface MgSkipLinks {
+        /**
+          * Skip links
+         */
+        "links": SkipLink[];
+    }
     interface MgTabs {
         /**
-          * Active tab number default: first is 1
+          * Active tab number
          */
         "activeTab": number;
         /**
@@ -1025,13 +1041,17 @@ export namespace Components {
     }
     interface MgTag {
         /**
-          * Define if button is using outline style
+          * Define if tag is using outline style
          */
         "outline": boolean;
         /**
-          * Define button variant
+          * Define if tag is using soft style
          */
-        "variant": string;
+        "soft": boolean;
+        /**
+          * Define tag variant
+         */
+        "variant": TagVariantType;
     }
     interface MgTooltip {
         /**
@@ -1100,6 +1120,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;
@@ -1120,6 +1144,10 @@ 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;
@@ -1281,6 +1309,12 @@ declare global {
         prototype: HTMLMgPopoverElement;
         new (): HTMLMgPopoverElement;
     };
+    interface HTMLMgSkipLinksElement extends Components.MgSkipLinks, HTMLStencilElement {
+    }
+    var HTMLMgSkipLinksElement: {
+        prototype: HTMLMgSkipLinksElement;
+        new (): HTMLMgSkipLinksElement;
+    };
     interface HTMLMgTabsElement extends Components.MgTabs, HTMLStencilElement {
     }
     var HTMLMgTabsElement: {
@@ -1326,6 +1360,7 @@ declare global {
         "mg-pagination": HTMLMgPaginationElement;
         "mg-panel": HTMLMgPanelElement;
         "mg-popover": HTMLMgPopoverElement;
+        "mg-skip-links": HTMLMgSkipLinksElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
         "mg-tooltip": HTMLMgTooltipElement;
@@ -2220,6 +2255,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 {
         /**
@@ -2227,13 +2270,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"
          */
@@ -2356,6 +2399,10 @@ declare namespace LocalJSX {
         "titlePatternErrorMessage"?: string;
     }
     interface MgPopover {
+        /**
+          * Hide popover arrow
+         */
+        "arrowHide"?: boolean;
         /**
           * Define if popover has a cross button
          */
@@ -2381,9 +2428,19 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface MgSkipLinks {
+        /**
+          * 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;
         /**
@@ -2409,13 +2466,17 @@ declare namespace LocalJSX {
     }
     interface MgTag {
         /**
-          * Define if button is using outline style
+          * Define if tag is using outline style
          */
         "outline"?: boolean;
         /**
-          * Define button variant
+          * Define if tag is using soft style
          */
-        "variant"?: string;
+        "soft"?: boolean;
+        /**
+          * Define tag variant
+         */
+        "variant"?: TagVariantType;
     }
     interface MgTooltip {
         /**
@@ -2466,6 +2527,7 @@ declare namespace LocalJSX {
         "mg-pagination": MgPagination;
         "mg-panel": MgPanel;
         "mg-popover": MgPopover;
+        "mg-skip-links": MgSkipLinks;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
         "mg-tooltip": MgTooltip;
@@ -2501,6 +2563,7 @@ declare module "@stencil/core" {
             "mg-pagination": LocalJSX.MgPagination & JSXBase.HTMLAttributes<HTMLMgPaginationElement>;
             "mg-panel": LocalJSX.MgPanel & JSXBase.HTMLAttributes<HTMLMgPanelElement>;
             "mg-popover": LocalJSX.MgPopover & JSXBase.HTMLAttributes<HTMLMgPopoverElement>;
+            "mg-skip-links": LocalJSX.MgSkipLinks & JSXBase.HTMLAttributes<HTMLMgSkipLinksElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;
             "mg-tooltip": LocalJSX.MgTooltip & JSXBase.HTMLAttributes<HTMLMgTooltipElement>;

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

@@ -41,6 +41,9 @@ declare const messages: {
     panel: {
       editLabel: string;
     };
+    skipLinks: {
+      navLabel: string;
+    };
     general: {
       confirm: string;
       cancel: string;
@@ -48,6 +51,10 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: string;
+    };
   };
   fr: {
     errors: {
@@ -59,13 +66,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;
       };
@@ -97,6 +98,9 @@ declare const messages: {
     panel: {
       editLabel: string;
     };
+    skipLinks: {
+      navLabel: string;
+    };
     general: {
       confirm: string;
       cancel: string;
@@ -104,17 +108,20 @@ declare const messages: {
       next: string;
       previous: string;
     };
+    plusMenu: {
+      moreLabel: string;
+      badgeLabel: 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
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;
-  messages: any;
+  messages: 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.
  */
@@ -223,6 +223,7 @@ export declare const setMode: (handler: ResolutionHandler) => void;
 /**
  * `getMode()` is used for libraries which provide multiple "modes" for styles.
  * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -237,6 +238,7 @@ export declare function setPlatformHelpers(helpers: {
  * if the path needs to be customized.
  * @param path the path to use in calculating the asset path. this value will be
  * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -252,11 +254,13 @@ export declare function getAssetPath(path: string): string;
  * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
@@ -269,6 +273,7 @@ export declare function getElement(ref: any): HTMLStencilElement;
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -428,8 +433,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,83 @@
+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;
+  /**
+   * Update more element status if active child
+   *
+   * @returns {void}
+   */
+  updateActiveStatus: () => 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

@@ -27,3 +27,16 @@ export declare const dateRegExp: RegExp;
  * @returns {string} formatted date
  */
 export declare function 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: unknown }} messages object
+ */
+export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
+  locale: string;
+  messages: unknown;
+};

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

@@ -0,0 +1,78 @@
+/**
+ * Clone Deep function
+ *
+ * @param {unknown} obj object to clone
+ * @returns {unknown} cloned json
+ */
+export declare const cloneDeep: (obj: unknown) => unknown;
+/**
+ * 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 mutation observer, but its methods.
+ * You can manually fire an intersection entry:
+ * @param {Function} mutationObserverMock.disconnect disconnect function
+ * @param {Function} mutationObserverMock.observe observe function
+ * @param {Function} mutationObserverMock.takeRecords takeRecords function
+ * @returns {MutationObserver} Mocked MutationObserver
+ * @example
+ * ```
+ * let fireMo;
+ * setupMutationObserverMock({
+ *   observe: function () {
+ *     fireMo = this.cb;
+ *   },
+ * });
+ * ...
+ * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
+ * ```
+ */
+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} item element wich include mg-popover
+ * @param {string} id new fixed id
+ * @returns {void}
+ */
+export declare const forcePopoverId: (item: Element, id: string) => void;
+export {};