@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,176 +1,176 @@
 declare const messages: {
-  en: {
-    errors: {
-      required: string;
-      date: {
-        badInput: string;
-        min: string;
-        max: string;
-        minMax: string;
-      };
-      numeric: {
-        min: string;
-        max: string;
-        minMax: string;
-      };
-    };
-    nbCharLeft: string;
-    input: {
-      select: {
-        placeholder: string;
-      };
-      checkbox: {
-        selectedValues: string;
-        selectedValue: string;
-        editButton: string;
-        selectButton: string;
-        showButton: string;
-        label: string;
-        result: string;
-        results: string;
-        searchResults: string;
-        noResult: string;
-        sections: {
-          selected: {
-            title: string;
-            titlePlurial: string;
-            action: string;
-          };
-          notSelected: {
-            title: string;
-            titlePlurial: string;
-            action: string;
-          };
-        };
-      };
-    };
-    form: {
-      required: string;
-      requiredSingle: string;
-      allRequired: string;
-      allRequiredSingle: string;
-    };
-    message: {
-      closeButton: string;
-    };
-    modal: {
-      closeButton: string;
-    };
-    pagination: {
-      label: string;
-      page: string;
-      pages: string;
-      nextPage: string;
-      previousPage: string;
-      selectPage: string;
-    };
-    panel: {
-      editLabel: string;
-    };
-    skipLinks: {
-      navLabel: string;
-    };
-    general: {
-      confirm: string;
-      cancel: string;
-      close: string;
-      next: string;
-      previous: string;
-    };
-    plusMenu: {
-      moreLabel: string;
-      badgeLabel: string;
-    };
-    actionMore: {
-      label: string;
-    };
-  };
-  fr: {
-    errors: {
-      required: string;
-      date: {
-        badInput: string;
-        min: string;
-        max: string;
-        minMax: string;
-      };
-      numeric: {
-        min: string;
-        max: string;
-        minMax: string;
-      };
-    };
-    nbCharLeft: string;
-    input: {
-      select: {
-        placeholder: string;
-      };
-      checkbox: {
-        selectedValues: string;
-        selectedValue: string;
-        editButton: string;
-        selectButton: string;
-        showButton: string;
-        label: string;
-        result: string;
-        results: string;
-        searchResults: string;
-        noResult: string;
-        sections: {
-          selected: {
-            title: string;
-            titlePlurial: string;
-            action: string;
-          };
-          notSelected: {
-            title: string;
-            titlePlurial: string;
-            action: string;
-          };
-        };
-      };
-    };
-    form: {
-      required: string;
-      requiredSingle: string;
-      allRequired: string;
-      allRequiredSingle: string;
-    };
-    message: {
-      closeButton: string;
-    };
-    modal: {
-      closeButton: string;
-    };
-    pagination: {
-      label: string;
-      page: string;
-      pages: string;
-      nextPage: string;
-      previousPage: string;
-      selectPage: string;
-    };
-    panel: {
-      editLabel: string;
-    };
-    skipLinks: {
-      navLabel: string;
-    };
-    general: {
-      confirm: string;
-      cancel: string;
-      close: string;
-      next: string;
-      previous: string;
-    };
-    plusMenu: {
-      moreLabel: string;
-      badgeLabel: string;
+    en: {
+        errors: {
+            required: string;
+            date: {
+                badInput: string;
+                min: string;
+                max: string;
+                minMax: string;
+            };
+            numeric: {
+                min: string;
+                max: string;
+                minMax: string;
+            };
+        };
+        nbCharLeft: string;
+        input: {
+            select: {
+                placeholder: string;
+            };
+            checkbox: {
+                selectedValues: string;
+                selectedValue: string;
+                editButton: string;
+                selectButton: string;
+                showButton: string;
+                label: string;
+                result: string;
+                results: string;
+                searchResults: string;
+                noResult: string;
+                sections: {
+                    selected: {
+                        title: string;
+                        titlePlurial: string;
+                        action: string;
+                    };
+                    notSelected: {
+                        title: string;
+                        titlePlurial: string;
+                        action: string;
+                    };
+                };
+            };
+        };
+        form: {
+            required: string;
+            requiredSingle: string;
+            allRequired: string;
+            allRequiredSingle: string;
+        };
+        message: {
+            closeButton: string;
+        };
+        modal: {
+            closeButton: string;
+        };
+        pagination: {
+            label: string;
+            page: string;
+            pages: string;
+            nextPage: string;
+            previousPage: string;
+            selectPage: string;
+        };
+        panel: {
+            editLabel: string;
+        };
+        skipLinks: {
+            navLabel: string;
+        };
+        general: {
+            confirm: string;
+            cancel: string;
+            close: string;
+            next: string;
+            previous: string;
+        };
+        plusMenu: {
+            moreLabel: string;
+            badgeLabel: string;
+        };
+        actionMore: {
+            label: string;
+        };
     };
-    actionMore: {
-      label: string;
+    fr: {
+        errors: {
+            required: string;
+            date: {
+                badInput: string;
+                min: string;
+                max: string;
+                minMax: string;
+            };
+            numeric: {
+                min: string;
+                max: string;
+                minMax: string;
+            };
+        };
+        nbCharLeft: string;
+        input: {
+            select: {
+                placeholder: string;
+            };
+            checkbox: {
+                selectedValues: string;
+                selectedValue: string;
+                editButton: string;
+                selectButton: string;
+                showButton: string;
+                label: string;
+                result: string;
+                results: string;
+                searchResults: string;
+                noResult: string;
+                sections: {
+                    selected: {
+                        title: string;
+                        titlePlurial: string;
+                        action: string;
+                    };
+                    notSelected: {
+                        title: string;
+                        titlePlurial: string;
+                        action: string;
+                    };
+                };
+            };
+        };
+        form: {
+            required: string;
+            requiredSingle: string;
+            allRequired: string;
+            allRequiredSingle: string;
+        };
+        message: {
+            closeButton: string;
+        };
+        modal: {
+            closeButton: string;
+        };
+        pagination: {
+            label: string;
+            page: string;
+            pages: string;
+            nextPage: string;
+            previousPage: string;
+            selectPage: string;
+        };
+        panel: {
+            editLabel: string;
+        };
+        skipLinks: {
+            navLabel: string;
+        };
+        general: {
+            confirm: string;
+            cancel: string;
+            close: string;
+            next: string;
+            previous: string;
+        };
+        plusMenu: {
+            moreLabel: string;
+            badgeLabel: string;
+        };
+        actionMore: {
+            label: string;
+        };
     };
-  };
 };
 /**
  * Get Intl object
@@ -178,7 +178,7 @@ declare const messages: {
  * @returns messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
-  locale: string;
-  messages: Record<string, unknown>;
+    locale: string;
+    messages: Record<string, unknown>;
 };
 export {};

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

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -791,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -952,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1115,11 +1140,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;
@@ -1202,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1210,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

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

@@ -1,69 +1,69 @@
 export declare enum OverflowBehaviorElements {
-  BASE_INDEX = "data-overflow-base-index",
-  PROXY_INDEX = "data-overflow-proxy-index"
+    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 _baseChildren;
-  private _proxyChildren;
-  constructor(element: Element, render: () => HTMLElement);
-  /**********
-   * Public *
-   **********/
-  /**
-   * Disconnect ResizeObserver
-   */
-  disconnect: () => void;
-  /************
-   * Internal *
-   ************/
-  /**
-   * run overflow behavior
-   * @param width - width of the container. Optional.
-   */
-  private run;
-  /**
-   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-   * @param element - element to parse
-   * @returns children
-   */
-  private getInteractiveItems;
-  /**
-   * Update displayed items in container from a given available space
-   * @param availableWidth - available width in container to display child items
-   */
-  private updateDisplayedItems;
-  /**
-   * Utility method to know if item overflow partialy or totaly in the container
-   * @param cumulateWidth - previous sibling elements cumulate width + item width
-   * @param item - item HTML element
-   * @param availableWidth - container available width
-   * @returns truthy if element is overflow
-   */
-  private isOverflowElement;
-  /**
-   * Utility method to know if a given element is the 'MORE' element
-   * @param element - element to match with 'MORE' element
-   * @returns truthy if element is the 'MORE' element
-   */
-  private isMoreElement;
-  /**
-   * Toggle display item element
-   * @param item - item to control
-   * @param isHidden - is item hidden
-   */
-  private toggleItem;
-  /**
-   * Toggle element's hidde attribute
-   * @param element - element to toggle
-   * @param isHidden - element is hidden
-   */
-  private toggleElement;
-  /**
-   * Remove hidden attributes on all items
-   */
-  private restoreItems;
+    private element;
+    private render;
+    private _resizeObserver;
+    private _moreElement;
+    private _baseChildren;
+    private _proxyChildren;
+    constructor(element: Element, render: () => HTMLElement);
+    /**********
+     * Public *
+     **********/
+    /**
+     * Disconnect ResizeObserver
+     */
+    disconnect: () => void;
+    /************
+     * Internal *
+     ************/
+    /**
+     * run overflow behavior
+     * @param width - width of the container. Optional.
+     */
+    private run;
+    /**
+     * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+     * @param element - element to parse
+     * @returns children
+     */
+    private getInteractiveItems;
+    /**
+     * Update displayed items in container from a given available space
+     * @param availableWidth - available width in container to display child items
+     */
+    private updateDisplayedItems;
+    /**
+     * Utility method to know if item overflow partialy or totaly in the container
+     * @param cumulateWidth - previous sibling elements cumulate width + item width
+     * @param item - item HTML element
+     * @param availableWidth - container available width
+     * @returns truthy if element is overflow
+     */
+    private isOverflowElement;
+    /**
+     * Utility method to know if a given element is the 'MORE' element
+     * @param element - element to match with 'MORE' element
+     * @returns truthy if element is the 'MORE' element
+     */
+    private isMoreElement;
+    /**
+     * Toggle display item element
+     * @param item - item to control
+     * @param isHidden - is item hidden
+     */
+    private toggleItem;
+    /**
+     * Toggle element's hidde attribute
+     * @param element - element to toggle
+     * @param isHidden - element is hidden
+     */
+    private toggleElement;
+    /**
+     * Remove hidden attributes on all items
+     */
+    private restoreItems;
 }

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

@@ -10,32 +10,32 @@ export declare const createID: (prefix?: string, length?: number) => string;
  * Set() are not working when imported in project
  */
 export declare class ClassList {
-  /**
-   * Available classes
-   */
-  classes: string[];
-  constructor(classlist?: string[]);
-  /**
-   * Add class
-   * @param className - class name to add
-   */
-  add: (className: string) => void;
-  /**
-   * Delete class
-   * @param className - class name to delete
-   */
-  delete: (className: string) => void;
-  /**
-   * Check if class exist in list
-   * @param className - class name to check
-   * @returns class name is in the list
-   */
-  has: (className: string) => boolean;
-  /**
-   * Join classes seperated by spaces
-   * @returns joined values
-   */
-  join: () => string;
+    /**
+     * Available classes
+     */
+    classes: string[];
+    constructor(classlist?: string[]);
+    /**
+     * Add class
+     * @param className - class name to add
+     */
+    add: (className: string) => void;
+    /**
+     * Delete class
+     * @param className - class name to delete
+     */
+    delete: (className: string) => void;
+    /**
+     * Check if class exist in list
+     * @param className - class name to check
+     * @returns class name is in the list
+     */
+    has: (className: string) => boolean;
+    /**
+     * Join classes seperated by spaces
+     * @returns joined values
+     */
+    join: () => string;
 }
 /**
  * Check if all items are string
@@ -79,3 +79,9 @@ export declare const isValidString: (value: unknown) => boolean;
  * @returns cleanded string
  */
 export declare const cleanString: (text: string) => string;
+/**
+ * Use to process code next tick in the event loop
+ * @param callback - code to excute on next tick
+ * @returns differed code excution
+ */
+export declare const nextTick: (callback: () => void) => Promise<void>;

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

@@ -33,6 +33,6 @@ export declare const localeDate: (date: string, locale: string) => string;
  * @returns messages object
  */
 export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
-  locale: string;
-  messages: Record<string, unknown>;
+    locale: string;
+    messages: Record<string, unknown>;
 };

package/dist/types/utils/playwright.fixture.d.ts

@@ -0,0 +1,3 @@
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+    page: void;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

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

@@ -26,14 +26,14 @@ export declare const cloneDeep: (obj: unknown) => unknown;
  * ```
  */
 type SetupMutationObserverMockParams = {
-  disconnect: MutationObserver['disconnect'];
-  observe: MutationObserver['observe'];
-  takeRecords: MutationObserver['takeRecords'];
+    disconnect: MutationObserver['disconnect'];
+    observe: MutationObserver['observe'];
+    takeRecords: MutationObserver['takeRecords'];
 };
 export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
 type setupResizeObserverMockParams = {
-  disconnect: ResizeObserver['disconnect'];
-  observe: ResizeObserver['observe'];
+    disconnect: ResizeObserver['disconnect'];
+    observe: ResizeObserver['observe'];
 };
 /**
  * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.