@mgdis/mg-components 5.22.0 → 5.23.0

package/dist/types/components/atoms/mg-badge/mg-badge.d.ts

@@ -1,5 +1,5 @@
 import { BadgeVariantType } from './mg-badge.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgBadge {
     /************
      * Internal *

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { VariantType, ButtonType } from './mg-button.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgButton {
     /************
      * Internal *

package/dist/types/components/atoms/mg-card/mg-card.d.ts

@@ -1,4 +1,4 @@
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { type VariantStyleType, type VariantType } from './mg-card.conf';
 export declare class MgCard {
     /*************

package/dist/types/components/atoms/mg-icon/mg-icon.d.ts

@@ -1,5 +1,5 @@
 import { IconVariantType, IconSizeType, IconVariantStyleType } from './mg-icon.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgIcon {
     private svg;
     /**

package/dist/types/components/atoms/mg-tag/mg-tag.d.ts

@@ -1,5 +1,5 @@
 import { TagVariantType } from './mg-tag.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgTag {
     /************
      * Internal *

package/dist/types/components/molecules/inputs/MgInput.d.ts

@@ -1,6 +1,6 @@
 import { FunctionalComponent } from '../../../stencil-public-runtime';
 import { Width } from './MgInput.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';
 /**
  * MgInput Interface

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps, SelectValuesButtonKey } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
     /************

package/dist/types/components/molecules/inputs/mg-input-date/mg-input-date.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputDate {
     /************
      * Internal *
@@ -7,6 +7,7 @@ export declare class MgInputDate {
     private input;
     private messages;
     private locale;
+    private systemLocale;
     private hasDisplayedError;
     private handlerInProgress;
     /**************
@@ -61,6 +62,11 @@ export declare class MgInputDate {
     tooltip: string;
     /**
      * Add a help text under the input, usually expected data format and example
+     * Available string variables:
+     *  - `{pattern}`: render innerHTML pattern based on system
+     *  - `{date}`: render innerText date with a pattern base format.
+     *  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text.
+     * ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
      */
     helpText: string;
     /**
@@ -111,6 +117,12 @@ export declare class MgInputDate {
      * @param errorMessage - the error message to display
      */
     setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void>;
+    /**
+     * Format help text to display
+     * @param helpText - help text format
+     * @returns formated pattern help text. Ex: Format attendu : jj/mm/aaaa (ex : 20/12/2020)
+     */
+    private formatHelpText;
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -146,6 +158,11 @@ export declare class MgInputDate {
      * @returns timeout
      */
     componentWillLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Render pattern
+     * @returns translated html pattern
+     */
+    private renderPattern;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputNumeric {
     /************
      * Internal *

package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputPassword {
     /************
      * Internal *

package/dist/types/components/molecules/inputs/mg-input-radio/mg-input-radio.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { RadioOption } from './mg-input-radio.conf';
 export declare class MgInputRadio {
     /************

package/dist/types/components/molecules/inputs/mg-input-select/mg-input-select.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { SelectOption, OptGroup } from './mg-input-select.conf';
 export declare class MgInputSelect {
     /************

package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { TextType } from './mg-input-text.conf';
 export declare class MgInputText {
     /************

package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgInputTextarea {
     /************
      * Internal *

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { ToggleValue } from './mg-input-toggle.conf';
 export declare class MgInputToggle {
     /************

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { Status } from './mg-menu-item.conf';
 import type { MenuSizeType } from '../mg-menu/mg-menu.conf';
 import type { DirectionType } from './mg-menu-item.conf';

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { AriaRoleType, RequiredMessageStatusType } from './mg-form.conf';
 export declare class MgForm {
     /************

package/dist/types/components/molecules/mg-message/mg-message.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { VariantType } from './mg-message.conf';
 export declare class MgMessage {
     /************

package/dist/types/components/molecules/mg-modal/mg-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { DialogRoleType } from './mg-modal.conf';
 export declare class MgModal {
     /************

package/dist/types/components/molecules/mg-panel/mg-panel.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { type ExpandToggleDisplayType, type TitlePositionType } from './mg-panel.conf';
 export declare class MgPanel {
     /************

package/dist/types/components/molecules/mg-popover/mg-popover-content/mg-popover-content.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
-import { ClassList } from '../../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 export declare class MgPopoverContent {
     /************
      * Internal *

package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { ClassList } from '../../../utils/components.utils';
+import { ClassList } from '@mgdis/stencil-helpers';
 import { TabItem, SizeType } from './mg-tabs.conf';
 export declare class MgTabs {
     /************

package/dist/types/components.d.ts

@@ -365,7 +365,7 @@ export namespace Components {
          */
         "displayError": () => Promise<void>;
         /**
-          * Add a help text under the input, usually expected data format and example
+          * Add a help text under the input, usually expected data format and example Available string variables:  - `{pattern}`: render innerHTML pattern based on system  - `{date}`: render innerText date with a pattern base format.  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text. ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
          */
         "helpText": string;
         /**
@@ -2216,7 +2216,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Add a help text under the input, usually expected data format and example
+          * Add a help text under the input, usually expected data format and example Available string variables:  - `{pattern}`: render innerHTML pattern based on system  - `{date}`: render innerText date with a pattern base format.  - `{defaultHelpText}`: render default `helpText` usefull to concat helpText local with your custom text. ex: `Input use {pattern} pattern` as `helpText` prop value will be render as `Input use mm/dd/yyyy pattern`
          */
         "helpText"?: string;
         /**

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

@@ -1,181 +1,3 @@
-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;
-                        tooltip: string;
-                    };
-                    notSelected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                        tooltip: 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;
-                        tooltip: string;
-                    };
-                    notSelected: {
-                        title: string;
-                        titlePlurial: string;
-                        action: string;
-                        tooltip: 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
  * @param element - element we need to get the language
@@ -183,6 +5,5 @@ declare const messages: {
  */
 export declare const initLocales: (element: HTMLElement) => {
     locale: string;
-    messages: Record<string, unknown>;
+    messages: import("@mgdis/stencil-helpers/dist/locale/index.conf").ObjectType;
 };
-export {};

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

@@ -1,76 +1,3 @@
-import { MockCustomEvent } from '@stencil/core/mock-doc';
-/**
- * Clone Deep function
- * @param obj - object to clone
- * @returns 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 mutationObserverMock - configuration object
- * @returns 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;
-type setupResizeObserverMockParams = {
-    disconnect: ResizeObserver['disconnect'];
-    observe: ResizeObserver['observe'];
-};
-/**
- * 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 resizeObserverMock - configuration object
- * @returns Mocked ResizeObserver
- * @example
- * ```
- * let fireRo;
- * setupResizeObserverMock({
- *   observe: function () {
- *     fireRo = this.cb;
- *   },
- * });
- * ...
- * fireRo([{
- *  borderBoxSize: ResizeObserverSize[],
- *  contentBoxSize: ResizeObserverSize[],
- *  contentRect: DOMRectReadOnly,
- *  devicePixelContentBoxSize: ResizeObserverSize[],
- *  target: yourMockElemenet
- * }]);;
- * ```
- */
-export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
-/**
- * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- * @example
- * ```
- * setupSubmitEventMock();
- * ```
- * @returns custom event mock
- */
-export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
  * @param component - element wich include mg-popover
@@ -78,17 +5,8 @@ export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
  * @param interactiveElement - element where attribute 'aria-controls' is set
  */
 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
- */
-export declare const mockConsoleError: () => void;
 /**
  * Add missing window.frames property to test context
  * usefull for component with iframe listeners, ex: mg-popover
  */
 export declare const mockWindowFrames: () => void;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.22.0",
+  "version": "5.23.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,41 +23,42 @@
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@stencil/core": "4.9.1",
+    "@popperjs/core": "2.11.8",
+    "@stencil/core": "4.11.0",
     "@mgdis/img": "1.6.0",
+    "@mgdis/stencil-helpers": "1.0.0",
     "@mgdis/styles": "1.1.0"
   },
   "devDependencies": {
-    "@playwright/test": "1.40.1",
-    "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-actions": "^7.5.3",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-mdx-gfm": "^7.5.3",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/html": "^7.5.3",
-    "@storybook/html-vite": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/jest": "^29.5.8",
-    "@types/node": "^20.9.0",
-    "chromatic": "^10.0.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "jest-junit": "^16.0.0",
-    "jest-transform-stub": "^2.0.0",
-    "prettier": "^3.0.0",
-    "puppeteer": "^21.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-textarea-autosize": "^8.5.3",
-    "sass": "^1.69.5",
-    "storybook": "^7.5.3",
-    "ts-node": "^10.9.1",
+    "@playwright/test": "1.41.1",
+    "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
+    "@storybook/addon-a11y": "7.6.10",
+    "@storybook/addon-actions": "7.6.10",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addon-interactions": "7.6.10",
+    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-mdx-gfm": "7.6.10",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/html": "7.6.10",
+    "@storybook/html-vite": "7.6.10",
+    "@storybook/testing-library": "0.2.2",
+    "@types/jest": "29.5.11",
+    "@types/node": "20.11.6",
+    "chromatic": "10.5.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-storybook": "0.6.15",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-junit": "16.0.0",
+    "jest-transform-stub": "2.0.0",
+    "prettier": "3.2.4",
+    "puppeteer": "21.9.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-textarea-autosize": "8.5.3",
+    "sass": "1.70.0",
+    "storybook": "7.6.10",
+    "ts-node": "10.9.2",
     "typescript": "5.3.3",
     "@mgdis/linting-stencil": "1.1.0",
     "@mgdis/playwright-helpers": "1.0.0",