@mgdis/mg-components 5.17.0 → 5.19.0

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
+import { DatalistOption, TextType } from './mg-input-text.conf';
 export declare class MgInputText {
   /************
    * Internal *
@@ -9,6 +10,7 @@ export declare class MgInputText {
   private classIsInputGroupAppend;
   private classHasIcon;
   private characterLeftId;
+  private datalistId;
   private input;
   private messages;
   private hasDisplayedError;
@@ -40,7 +42,7 @@ export declare class MgInputText {
   /**
    * Input type
    */
-  type: 'text' | 'search';
+  type: TextType;
   /**
    * Input icon
    */
@@ -59,6 +61,11 @@ export declare class MgInputText {
    * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
    */
   placeholder: string;
+  /**
+   * Define datalist options
+   */
+  datalistoptions: DatalistOption[];
+  validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
   /**
    * Input max length
    */
@@ -88,6 +95,7 @@ export declare class MgInputText {
    * Define input pattern error message
    */
   patternErrorMessage: string;
+  validatePattern(newValue: string): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -129,9 +137,23 @@ export declare class MgInputText {
    */
   setFocus(): Promise<void>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputText['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -150,16 +172,18 @@ export declare class MgInputText {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
-  /**
-   * Validate pattern configuration
-   */
-  private validatePattern;
   /**
    * Validate append slot
    */
   private validateAppendSlot;
+  /**
+   * Methode to control datalist display condition
+   * @returns true if display condition success
+   */
+  private hasDatalist;
   /*************
    * Lifecycle *
    *************/

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

@@ -0,0 +1 @@
+export {};

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

@@ -78,6 +78,7 @@ export declare class MgInputTextarea {
    * Define input pattern error message
    */
   patternErrorMessage: string;
+  validatePattern(newValue: string): void;
   /**
    * Define the number of visible text lines for the control
    */
@@ -124,9 +125,23 @@ export declare class MgInputTextarea {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -151,12 +166,9 @@ export declare class MgInputTextarea {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
-  /**
-   * Validate pattern configuration
-   */
-  private validatePattern;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts

@@ -4,6 +4,7 @@ export declare class MgActionMore {
    * Internal *
    ************/
   private readonly name;
+  private readonly classBase;
   private readonly mgPopoverIdentifier;
   private messages;
   /**************
@@ -41,7 +42,7 @@ export declare class MgActionMore {
    * Methods *
    ***********/
   /**
-   * Toogle expanded props
+   * Toggle expanded props
    */
   private toggleExpanded;
   /**

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

@@ -61,7 +61,7 @@ export declare class MgForm {
    */
   formSubmit: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
   /**

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

@@ -23,16 +23,16 @@ export declare class MgPanel {
    * Panel title
    */
   panelTitle: string;
-  validatePanelTitle(newValue: string): void;
+  validatePanelTitle(newValue: MgPanel['panelTitle']): void;
   /**
    * Panel title pattern
    */
   titlePattern: string;
-  validatetitlePattern(newValue: string): void;
   /**
    * Panel title pattern error message
    */
   titlePatternErrorMessage: string;
+  validateTitlePattern(newValue: string): void;
   /**
    * Define if panel title is editable
    */
@@ -46,7 +46,7 @@ export declare class MgPanel {
    * Panel is opened
    */
   expanded: boolean;
-  handleExpanded(newValue: boolean): void;
+  handleExpanded(newValue: MgPanel['expanded']): void;
   /**
    * Define expand toggle button display
    */

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

@@ -20,6 +20,7 @@ export declare class MgPopover {
    * Needed by the input for accessibility `aria-decribedby`.
    */
   identifier: string;
+  validateIdentifier(): void;
   /**
    * Popover placement
    */
@@ -33,7 +34,7 @@ export declare class MgPopover {
    * Define if popover has a cross button
    */
   closeButton: boolean;
-  validateCloseButton(newValue: MgPopover['arrowHide']): void;
+  validateCloseButton(newValue: MgPopover['closeButton']): void;
   /**
    * Display popover
    */

package/dist/types/components/molecules/mg-popover/test/mg-popover.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -54,6 +54,12 @@ export declare class MgTabs {
    * Emited event when active tab change
    */
   activeTabChange: EventEmitter<number>;
+  /**
+   * Validate that new tab status can be `Status.ACTIVE`
+   * @param tab - tab item
+   * @returns true when tab match condition to get a `Status.ACTIVE`
+   */
+  private isActivableTab;
   /**
    * Method to know if given tab has the given status
    * @param tab - item tab key to set to ACTIVE status
@@ -74,11 +80,6 @@ export declare class MgTabs {
    * @returns index
    */
   private getTabItemIndex;
-  /**
-   * Method to get the active-tab value
-   * @returns of the active-tab
-   */
-  private getActiveTab;
   /**
    * Handle click events on tabs
    * @param event - mouse event

package/dist/types/components.d.ts

@@ -14,6 +14,7 @@ import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 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 { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -34,6 +35,7 @@ export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 export { Width } from "./components/molecules/inputs/MgInput.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
+export { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 export { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -174,7 +176,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -236,7 +238,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -283,12 +285,18 @@ export namespace Components {
           * Define if mg-input-checkbox is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputCheckbox['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
         "tooltip": string;
         /**
-          * Define checkbox type
+          * Define checkbox type When it's undefined the type is dynamic: - With 0-5 items type is 'checkbox' - With 5-10 items type is 'multi' When it set the type is locked to the defined value. When type is dynamic OR with 'multi' type AND Over 10 items "search" feature is enabled
          */
         "type": CheckboxType;
         /**
@@ -335,7 +343,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -382,6 +390,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputDate['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -409,7 +423,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -468,6 +482,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputNumeric['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -491,7 +511,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -538,6 +558,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputPassword['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -557,7 +583,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -604,6 +630,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputRadio['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -623,7 +655,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -682,6 +714,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputSelect['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -696,6 +734,10 @@ export namespace Components {
         "value": any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions": DatalistOption[];
         /**
           * Define if input is disabled
          */
@@ -705,7 +747,7 @@ export namespace Components {
          */
         "displayCharacterLeft": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -768,6 +810,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputText['valid'], errorMessage: string) => Promise<void>;
         /**
           * Public method to play input focus
          */
@@ -779,7 +827,7 @@ export namespace Components {
         /**
           * Input type
          */
-        "type": 'text' | 'search';
+        "type": TextType;
         /**
           * Define input valid state
          */
@@ -799,7 +847,7 @@ export namespace Components {
          */
         "displayCharacterLeft": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -866,6 +914,12 @@ export namespace Components {
           * Define the number of visible text lines for the control
          */
         "rows": number;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: MgInputTextarea['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -1807,7 +1861,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define checkbox type
+          * Define checkbox type When it's undefined the type is dynamic: - With 0-5 items type is 'checkbox' - With 5-10 items type is 'multi' When it set the type is locked to the defined value. When type is dynamic OR with 'multi' type AND Over 10 items "search" feature is enabled
          */
         "type"?: CheckboxType;
         /**
@@ -2239,6 +2293,10 @@ declare namespace LocalJSX {
         "value"?: any;
     }
     interface MgInputText {
+        /**
+          * Define datalist options
+         */
+        "datalistoptions"?: DatalistOption[];
         /**
           * Define if input is disabled
          */
@@ -2322,7 +2380,7 @@ declare namespace LocalJSX {
         /**
           * Input type
          */
-        "type"?: 'text' | 'search';
+        "type"?: TextType;
         /**
           * Define input valid state
          */

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

@@ -67,3 +67,15 @@ export declare const getWindows: (localWindow: Window) => Window[];
  * @returns The list of windows found
  */
 export declare const getParentWindows: (localWindow: Window, windows?: Window[]) => Window[];
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+export declare const isValidString: (value: unknown) => boolean;
+/**
+ * Clean string caraters
+ * @param text - text to cliean
+ * @returns cleanded string
+ */
+export declare const cleanString: (text: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.17.0",
+  "version": "5.19.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@stencil/core": "^4.3.0",
-    "normalize.css": "^8.0.1",
-    "@mgdis/img": "1.3.0"
+    "@mgdis/img": "1.3.0",
+    "@mgdis/styles": "1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -35,9 +35,8 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.x",
+    "@playwright/test": "1.39.0",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@stencil/sass": "^1.5.2",
     "@storybook/addon-a11y": "^7.2.0",
     "@storybook/addon-actions": "^7.2.0",
     "@storybook/addon-essentials": "^7.2.0",
@@ -48,21 +47,20 @@
     "@storybook/html-webpack5": "^7.2.0",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "npm:@types/jest@^26",
-    "@types/jest-image-snapshot": "^4.3.2",
+    "@types/jest-image-snapshot": "^6.0.0",
     "@types/node": "^18.15.10",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^9.0.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.15.0",
-    "css-loader": "^5.2.7",
+    "chromatic": "^7.0.0",
+    "css-loader": "^6.0.0",
     "eslint": "^8.x",
     "eslint-plugin-storybook": "^0.6.13",
     "jest": "npm:jest@^26",
     "jest-cli": "npm:jest-cli@^26",
-    "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^15.0.0",
+    "jest-image-snapshot": "^6.0.0",
+    "jest-junit": "^16.0.0",
     "jest-transform-stub": "^2.0.0",
     "jsx-dom": "^8.0.4",
-    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
@@ -73,9 +71,9 @@
     "storybook": "^7.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "@mgdis/linting-stencil": "1.1.0",
+    "typescript": "^5.0.0",
     "eslint-config-stencil": "1.1.1",
+    "@mgdis/linting-stencil": "1.1.0",
     "playwright-config": "1.0.0",
     "tsconfig": "1.0.0"
   },
@@ -84,16 +82,17 @@
     "prebuild": "node ./bin/build-icons",
     "build": "pnpm prebuild && stencil build --docs",
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
-    "lint": "run-s lint:es lint:prettier",
-    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
+    "lint": "pnpm lint:es && pnpm lint:prettier",
+    "lint:fix": "pnpm lint:es:fix && pnpm lint:prettier:fix",
     "lint:es": "eslint src/**/*.{ts,tsx}",
     "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
-    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
+    "lint:prettier": "prettier --check **/*.{ts,tsx,html,mdx,json}",
+    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,html,mdx,json}",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "pnpm prebuild && stencil test --e2e --collectCoverage --collectCoverageFrom=\"src/**/*.e2e.ts\" --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e:playwright": "pnpm --package=@pnpm/@playwright/test dlx playwright test",
+    "test:e2e:playwright:docker": "pnpm dlx @playwright/test test",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "storybook": "storybook dev -p 6006",

package/readme.md

@@ -66,37 +66,6 @@ All of the MGDIS generated web components must use the prefix `mg`.
 
 You will find how to use the library instructions in the [Getting Started section](./getting-started.md).
 
-### Style
-
-#### Naming methodology
-
-MG Components is using [BEM](https://en.bem.info/) (Block, Element, Modifier) methodology with the [two dashes style](https://en.bem.info/methodology/naming-convention/#two-dashes-style) naming scheme.
-
-#### Declaration organisation
-
-When a selector contains too many declaration it is recommended to organize them by theme : Display, Decoration, Font, Others.
-
-```CSS
-.mg-button {
-  // Display
-  display: inline-block;
-  vertical-align: middle;
-  min-height: 3.5rem;
-  padding: 0.6rem 1.2rem;
-  // Decoration
-  background-image: none;
-  border-radius: 0.3rem;
-  border: 0.1rem solid transparent;
-  cursor: pointer;
-  // Font
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  // Others
-  touch-action: manipulation;
-}
-```
-
 ### Storybook
 
 The plugin [storybook-addon-docs-stencil

package/dist/cjs/mg-menu.conf-43aacf30.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-43aacf30.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;MAOa,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB;EAC7E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,EAAE;AAEF;;;;;;MAMa,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc;EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,EAAE;AAEF;;;MAGa,UAAU,GAAG,gDAAgD;AAE1E;;;;;;MAMa,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc;EACrD,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,EAAE;AAEF;;;;;;;;AAQO,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB;;EAE9F,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;;EAE7F,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;;EAE/C,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC;;ACvDD,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAE5B;;;;;MAKa,WAAW,GAAG,CAAC,OAAoB,KAA4D,iBAAiB,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa;;ACV9J;;;AAGYA;AAAZ,WAAY,SAAS;EACnB,kCAAqB,CAAA;EACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHWA,iBAAS,KAATA,iBAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;","names":["Direction"],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n","import en from './en/messages.json';\nimport fr from './fr/messages.json';\nimport { getLocaleMessages } from '../utils/locale.utils';\n\nconst defaultLocale = 'en';\nconst messages = { en, fr };\n\n/**\n * Get Intl object\n * @param element - element we need to get the language\n * @returns messages object\n */\nexport const initLocales = (element: HTMLElement): { locale: string; messages: Record<string, unknown> } => getLocaleMessages(element, messages, defaultLocale);\n","import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}