@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/mg-components/p-c9e2c669.js

@@ -0,0 +1,2 @@
+const e={required:"This field is required.",date:{badInput:'The date format must be <span aria-hidden="true">mm/dd/yyyy</span><span class="mg-u-visually-hidden">m m / d d / y y y y</span> and the date must be greater than {min}',min:"The date cannot be earlier than {min}",max:"The date cannot be later than {max}",minMax:"The date must be between {min} and {max}"},numeric:{min:"The value cannot be less than {min}",max:"The value cannot be greater than {max}",minMax:"The value must be between {min} et {max}"}};const t="{counter} characters left.";const s={select:{placeholder:"Select a value"},checkbox:{selectedValues:"{nb} selected values",selectedValue:"{nb} selected value",editButton:"Edit",selectButton:"Select values",showButton:"Show",label:"Enter a value",result:"result",results:"results",searchResults:"Search result(s) list.",noResult:"No result.",sections:{selected:{title:"Selected",titlePlurial:"Selected",action:"Unselect all"},notSelected:{title:"Not selected",titlePlurial:"Not selected",action:"Select all"}}}};const n={required:'Fields with a <strong class="mg-u-is-asterisk">*</strong> are required',requiredSingle:'Field with a <strong class="mg-u-is-asterisk">*</strong> is required',allRequired:"All fields are required",allRequiredSingle:"The field is required"};const a={closeButton:"Close message"};const i={closeButton:"Close modal"};const l={label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."};const r={editLabel:"Edit section title."};const o={navLabel:"Quick access"};const c={confirm:"Confirm",cancel:"Cancel",close:"Close",next:"next",previous:"previous"};const u={moreLabel:"Additional menu",badgeLabel:"Include notification(s)"};const d={label:"Actions"};const m={errors:e,nbCharLeft:t,input:s,form:n,message:a,modal:i,pagination:l,panel:r,skipLinks:o,general:c,plusMenu:u,actionMore:d};const p={required:"Ce champ est obligatoire.",date:{badInput:'Le format de la date doit être du type <span aria-hidden="true">jj/mm/aaaa</span><span class="mg-u-visually-hidden">j j / m m / a a a a</span> et la date supérieure au {min}',min:"La date ne peut pas être antérieure au {min}",max:"La date ne peut pas être postérieure au {max}",minMax:"La date doit être comprise entre le {min} et le {max}"},numeric:{min:"La valeur ne peut pas être inférieure à {min}",max:"La valeur ne peut pas être supérieure à {max}",minMax:"La valeur doit être comprise entre {min} et {max}"}};const g="{counter} caractères disponibles.";const h={select:{placeholder:"Sélectionnez une valeur"},checkbox:{selectedValues:"{nb} valeurs selectionnées",selectedValue:"{nb} valeur selectionnée",editButton:"Modifier",selectButton:"Sélectionner des valeurs",showButton:"Voir",label:"Saisissez une valeur",result:"resultat",results:"resultats",searchResults:"List de resultat(s) de la recherche.",noResult:"Aucun resultat.",sections:{selected:{title:"Sélectionné",titlePlurial:"Sélectionnés",action:"Tout désélectionner"},notSelected:{title:"Non sélectionné",titlePlurial:"Non sélectionnés",action:"Tout sélectionner"}}}};const b={required:'Les champs marqués d\'un <strong class="mg-u-is-asterisk">*</strong> sont obligatoires',requiredSingle:'Le champ marqué d\'un <strong class="mg-u-is-asterisk">*</strong> est obligatoire',allRequired:"Tous les champs sont obligatoires",allRequiredSingle:"Le champ est obligatoire"};const f={closeButton:"Fermer le message"};const v={closeButton:"Fermer la modale"};const x={label:"Pagination",page:"page",pages:"pages",nextPage:"Page suivante",previousPage:"Page précédente",selectPage:"Sélectionner la page à afficher."};const y={editLabel:"Modifier le titre de la section."};const L={navLabel:"Accès rapide"};const S={confirm:"Valider",cancel:"Annuler",close:"Fermer",next:"suivant",previous:"précédent"};const q={moreLabel:"Menu complémentaire",badgeLabel:"Notification(s) incluse(s)"};const P={label:"Actions"};const w={errors:p,nbCharLeft:g,input:h,form:b,message:f,modal:v,pagination:x,panel:y,skipLinks:L,general:S,plusMenu:q,actionMore:P};const k=(e,t,s)=>new Intl.NumberFormat(t,{style:"currency",currency:s}).format(e);const M=(e,t)=>new Intl.NumberFormat(t).format(e);const T=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;const B=(e,t)=>{if(typeof e!=="string"||e===""||!T.test(e)){return""}return new Intl.DateTimeFormat(t).format(new Date(e))};const A=(e,t,s)=>{const n=e.closest("[lang]");const a=Intl.NumberFormat.supportedLocalesOf(n===null||n===void 0?void 0:n.lang);const i=a.length>0?a[0]:navigator.language||s;const l=i.split("-").shift();return{locale:i,messages:t[l]||t[s]}};const C="en";const N={en:m,fr:w};const R=e=>A(e,N,C);var I;(function(e){e["VERTICAL"]="vertical";e["HORIZONTAL"]="horizontal"})(I||(I={}));const j=["regular","medium","large"];const F=(e="",t=10)=>{const s="abcdefghijklmnopqrstuvwxyz0123456789";const n=s.length;let a="";let i=Date.now();while(t>0){i+=Math.pow(10,6);const e=i%n;a+=s.charAt(e);t--}return(e!==""?`${e}-`:"")+a};class V{constructor(e=[]){this.add=e=>{if(!this.has(e)){this.classes.push(e)}};this.delete=e=>{const t=this.classes.indexOf(e);if(t>-1){this.classes.splice(t,1)}};this.has=e=>this.classes.includes(e);this.join=()=>this.classes.join(" ");this.classes=e}}const D=e=>Array.isArray(e)&&e.every((e=>typeof e==="string"));const z=(e,t)=>t.includes(e===null||e===void 0?void 0:e.tagName.toLowerCase());const E='a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';const $=e=>{const t=Q(e);const s=U(e);return[e,...t,...s]};const Q=(e,t=[])=>{if(e.self!==e.top){try{const s=e.parent;t.push(s);return Q(s,t)}catch(e){console.error("Different hosts between iframes:",e);return t}}return t};const U=(e,t=[])=>{if(e.frames.length>0){for(const s of Array.from(e.frames)){t.push(s);U(s,t)}}return t};const G=e=>typeof e==="string"&&e.trim()!=="";const H=e=>typeof e==="string"&&e.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g,"");export{V as C,I as D,G as a,z as b,F as c,H as d,T as e,k as f,M as g,D as h,R as i,E as j,$ as k,B as l,j as s};
+//# sourceMappingURL=p-c9e2c669.js.map

package/dist/mg-components/p-c9e2c669.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["localeCurrency","number","locale","currency","Intl","NumberFormat","style","format","localeNumber","dateRegExp","localeDate","date","test","DateTimeFormat","Date","getLocaleMessages","element","messages","defaultLocale","closestLangAttribute","closest","closestLang","supportedLocalesOf","lang","length","navigator","language","localeSubtag","split","shift","en","fr","initLocales","Direction","sizes","createID","prefix","chars","charsLength","ID","now","Math","pow","index","charAt","ClassList","constructor","classlist","this","add","className","has","classes","push","delete","indexOf","splice","includes","join","allItemsAreString","items","Array","isArray","every","item","isTagName","tagNames","tagName","toLowerCase","focusableElements","getWindows","localWindow","parentWindows","getParentWindows","childWindows","getChildWindows","windows","self","top","parentWindow","parent","err","console","error","frames","childWindow","from","isValidString","value","trim","cleanString","text","toLocaleLowerCase","normalize","replaceAll"],"sources":["src/utils/locale.utils.ts","src/locales/index.ts","src/components/molecules/menu/mg-menu/mg-menu.conf.ts","src/utils/components.utils.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","/**\n * Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n */\nexport const createID = (prefix = '', length = 10): string => {\n  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n  const charsLength = chars.length;\n\n  let ID = '';\n  let now = Date.now();\n  while (length > 0) {\n    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n    const index = now % charsLength;\n    ID += chars.charAt(index);\n    length--;\n  }\n  return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/**\n * Class to manage component classlist\n * Set() are not working when imported in project\n */\nexport class ClassList {\n  /**\n   * Available classes\n   */\n  classes: string[];\n\n  constructor(classlist: string[] = []) {\n    this.classes = classlist;\n  }\n\n  /**\n   * Add class\n   * @param className - class name to add\n   */\n  add = (className: string): void => {\n    if (!this.has(className)) {\n      this.classes.push(className);\n    }\n  };\n\n  /**\n   * Delete class\n   * @param className - class name to delete\n   */\n  delete = (className: string): void => {\n    const index = this.classes.indexOf(className);\n    if (index > -1) {\n      this.classes.splice(index, 1);\n    }\n  };\n\n  /**\n   * Check if class exist in list\n   * @param className - class name to check\n   * @returns class name is in the list\n   */\n  has = (className: string): boolean => {\n    return this.classes.includes(className);\n  };\n\n  /**\n   * Join classes seperated by spaces\n   * @returns joined values\n   */\n  join = (): string => {\n    return this.classes.join(' ');\n  };\n}\n\n/**\n * Check if all items are string\n * @param items - items to check\n * @returns all items are string\n */\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/**\n * Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n */\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n  return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/**\n * Focusable elements query selector\n */\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/**\n * Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n */\nexport const getWindows = (localWindow: Window): Window[] => {\n  const parentWindows = getParentWindows(localWindow);\n  const childWindows = getChildWindows(localWindow);\n  return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/**\n * Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  // Check if is in iframe\n  if (localWindow.self !== localWindow.top) {\n    // Check if we have permission to access parent\n    try {\n      const parentWindow: Window = localWindow.parent;\n      windows.push(parentWindow);\n      return getParentWindows(parentWindow, windows);\n    } catch (err) {\n      console.error('Different hosts between iframes:', err);\n      return windows;\n    }\n  }\n  return windows;\n};\n\n/**\n * Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  if (localWindow.frames.length > 0) {\n    for (const childWindow of Array.from(localWindow.frames)) {\n      windows.push(childWindow);\n      getChildWindows(childWindow, windows);\n    }\n  }\n  return windows;\n};\n\n/**\n * Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n\n/**\n * Clean string caraters\n * @param text - text to cliean\n * @returns cleanded string\n */\nexport const cleanString = (text: string): string =>\n  typeof text === 'string' &&\n  text\n    .toLocaleLowerCase()\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '');\n"],"mappings":"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"}

package/dist/mg-components/variables.css

@@ -1,275 +1 @@
-:root {
-  /*
-    Fonts
-  */
-
-  --font-size: 1.3rem;
-  --line-height: 1.4;
-
-  /* Open Sans is used for the body (mostly all texts) */
-  --font-family: 'Open Sans', sans-serif;
-
-  /* Headings (h1 to h6) font can be customized */
-  --font-family-heading: var(--font-family);
-
-  /* Font colors */
-  --color-font-light: var(--color-light);
-  --color-font-dark: var(--color-dark);
-  /*
-    Colors
-    https://jira.mgdis.fr/browse/PDA9-690
-   */
-
-  /* App */
-  /* default color-info */
-  --mg-color-app-h: var(--color-info-h);
-  --mg-color-app-s: var(--color-info-s);
-  --mg-color-app-l: var(--color-info-l);
-  --mg-color-app-hsl: var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l);
-
-  /* Neutral */
-  /* #fefefe; */
-  /* rgb(254, 254, 254); */
-  --color-neutral-h: 0;
-  --color-neutral-s: 0%;
-  --color-neutral-l: 99.6%;
-  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
-
-  /* Warning */
-  /* #ffc33e */
-  /* rgb(255, 195, 62); */
-  --color-warning-h: 41;
-  --color-warning-s: 100%;
-  --color-warning-l: 62.2%;
-  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
-
-  /* Success */
-  /* #32d59c */
-  /* rgb(50, 213, 156); */
-  --color-success-h: 159;
-  --color-success-s: 66%;
-  --color-success-l: 51.6%;
-  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
-
-  /* Info */
-  /* #005e9c; */
-  /* rgb(0, 94, 156); */
-  --color-info-h: 204;
-  --color-info-s: 100%;
-  --color-info-l: 30.6%;
-  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
-
-  /* Danger */
-  /* #db1f29; */
-  /* rgb(219, 31, 41); */
-  --color-danger-h: 357;
-  --color-danger-s: 75%;
-  --color-danger-l: 49%;
-  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
-
-  /* Dark */
-  /* #15282e; */
-  /* rgb(21, 40, 46); */
-  --color-dark-h: 194;
-  --color-dark-s: 37.3%;
-  --color-dark-l: 13.1%;
-  --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-  
-  /* dark-40 */
-  --mg-color-dark-40-hsl: var(--color-dark-h), 7%, 43%;
-  /* dark-5 */
-  --mg-color-dark-5-hsl: var(--color-dark-h), 9%, 96%;
-  /* dark-soft */
-  --mg-color-dark-soft-hsl: var(--color-dark-h), var(--color-dark-s), 90%;
-
-  /* Light */
-  /* white; (#ffffff) */
-  /* rgb(255, 255, 255); */
-  --color-light-h: 0;
-  --color-light-s: 0%;
-  --color-light-l: 100%;
-  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
-
-  /* Primary */
-  --color-primary-h: var(--color-dark-h);
-  --color-primary-s: var(--color-dark-s);
-  --color-primary-l: var(--color-dark-l);
-  --color-primary: hsl(var(--color-dark));
-
-  /* Secondary */
-  --color-secondary-h: var(--color-neutral-h);
-  --color-secondary-s: var(--color-neutral-s);
-  --color-secondary-l: var(--color-neutral-l);
-  --color-secondary: hsl(var(--color-neutral));
-
-  /* Shadow */
-  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
-
-  /* Soft style */
-  --mg-color-soft-l: 90%;
-
-  /*
-    Global
-   */
-  --default-size: 3.5rem;
-  --mg-disabled-opacity: 0.4;
-
-  /*
-    <mg-icon>
-   */
-  --mg-icon-small-size: 1.2rem;
-  --mg-icon-regular-size: 1.6rem;
-  --mg-icon-medium-size: 2rem;
-  --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.2rem;
-  --mg-icon-border-radius: 50%;
-
-  /*
-    <mg-button>
-   */
-
-  --mg-button-border-radius: 0.3rem;
-  --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: var(--mg-disabled-opacity);
-  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
-  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
-
-  /* Primary */
-  --mg-button-primary-color-h: var(--color-dark-h);
-  --mg-button-primary-color-s: var(--color-dark-s);
-  --mg-button-primary-color-l: var(--color-dark-l);
-  --mg-button-primary-font-color: var(--color-neutral);
-
-  /* Secondary */
-  --mg-button-secondary-color-h: var(--color-neutral-h);
-  --mg-button-secondary-color-s: var(--color-neutral-s);
-  --mg-button-secondary-color-l: var(--color-neutral-l);
-  --mg-button-secondary-font-color: var(--color-dark);
-
-  /*
-    <mg-tag>
-   */
-  --mg-tag-height: 2.3rem;
-  --mg-tag-border-radius: 0.5rem;
-  --mg-tag-font-size: 1.2rem;
-
-  /*
-  <mg-badge>
-  */
-  --mg-badge-size: 1.6rem;
-  --mg-badge-font-size: 1.1rem;
-
-  /*
-    <mg-tooltip>
-   */
-  --mg-tooltip-border-radius: 0.5rem;
-  --mg-tooltip-background-color: var(--color-dark);
-  --mg-tooltip-font-color: var(--color-font-light);
-
-  /*
-    <mg-popover>
-   */
-  --mg-popover-background-color: var(--color-light);
-  --mg-popover-font-color: var(--color-font-dark);
-  --mg-popover-title-font-size: 1.4rem;
-  --mg-popover-max-width: 40rem;
-
-  /*
-    <mg-message>
-   */
-  --mg-message-border-radius: 0.3rem;
-
-  /*
-    <mg-modal>
-   */
-  --mg-modal-border-radius: 0.5rem;
-  --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.2rem;
-
-  /*
-    <mg-panel>
-   */
-  --mg-panel-border-radius: 0.5rem;
-  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
-  --mg-panel-box-shadow: var(--box-shadow);
-  --mg-panel-content-padding: 1.5rem;
-
-  /*
-    <mg-illustrated-message>
-   */
-
-  --mg-illustrated-message-padding-vertical: 4rem;
-
-  /*
-    <mg-card>
-   */
-  --mg-card-padding-default: 1.6rem;
-  --mg-card-border-radius-default: 0.5rem;
-  --mg-card-background-default: hsl(var(--color-light));
-  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
-  --mg-card-box-shadow-default: var(--box-shadow);
-
-  /*
-    <mg-divider>
-  */
-  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
-  --mg-divider-thickness: 0.1rem;
-  --mg-divider-vertical-spacing: 4rem;
-
-  /*
-    Layout
-   */
-  --mg-grid-spacing: 1rem;
-
-  /*
-    Forms
-   */
-
-  /*
-    <mg-input-...>
-   */
-  --mg-inputs-border-width: 0.1rem;
-  --mg-inputs-border-radius: 0.3rem;
-  --mg-inputs-color: #b5c2c9;
-  --mg-inputs-spacer: 1rem;
-
-  /* Error message background */
-  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
-
-  /* Input focus shadow */
-  /* #b5c2c9 */
-  /* rgb(0, 221, 255); */
-  /* hsl(188, 100%, 50%); */
-  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
-
-  /*
-    <mg-input-toggle>
-  */
-  --mg-input-toggle-border-radius-ratio: 2;
-
-  /*
-    <mg-input-checkbox>
-    <mg-input-radio>
-   */
-  --mg-input-check-size: 1.3rem;
-
-  /*
-    <mg-menu-item>
-   */
-  --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
-  --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
-  --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
-
-  /*
-  <mg-tabs>
-  */
-  --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
-  --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
-  --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
-  --mg-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));
-
-  /*
-    <mg-details>
-   */
-  --mg-details-spacing: 1.5rem;
-}
+:root{--font-size: 1.3rem;--line-height: 1.4;--font-family: "Open Sans", sans-serif;--font-family-heading: var(--font-family);--color-font-light: var(--color-light);--color-font-dark: var(--color-dark);--mg-color-app-h: var(--color-info-h);--mg-color-app-s: var(--color-info-s);--mg-color-app-l: var(--color-info-l);--mg-color-app-hsl: var(--mg-color-app-h) var(--mg-color-app-s) var(--mg-color-app-l);--color-neutral-h: 0;--color-neutral-s: 0%;--color-neutral-l: 99.6%;--color-neutral: var(--color-neutral-h) var(--color-neutral-s) var(--color-neutral-l);--color-warning-h: 41;--color-warning-s: 100%;--color-warning-l: 62.2%;--color-warning: var(--color-warning-h) var(--color-warning-s) var(--color-warning-l);--color-success-h: 159;--color-success-s: 66%;--color-success-l: 51.6%;--color-success: var(--color-success-h) var(--color-success-s) var(--color-success-l);--color-info-h: 204;--color-info-s: 100%;--color-info-l: 30.6%;--color-info: var(--color-info-h) var(--color-info-s) var(--color-info-l);--color-danger-h: 357;--color-danger-s: 75%;--color-danger-l: 49%;--color-danger: var(--color-danger-h) var(--color-danger-s) var(--color-danger-l);--color-dark-h: 194;--color-dark-s: 37.3%;--color-dark-l: 13.1%;--color-dark: var(--color-dark-h) var(--color-dark-s) var(--color-dark-l);--mg-color-dark-40-hsl: var(--color-dark-h) 7% 43%;--mg-color-dark-5-hsl: var(--color-dark-h) 9% 96%;--mg-color-dark-soft-hsl: var(--color-dark-h) var(--color-dark-s) 90%;--color-light-h: 0;--color-light-s: 0%;--color-light-l: 100%;--color-light: var(--color-light-h) var(--color-light-s) var(--color-light-l);--color-primary-h: var(--color-dark-h);--color-primary-s: var(--color-dark-s);--color-primary-l: var(--color-dark-l);--color-primary: hsl(var(--color-dark));--color-secondary-h: var(--color-neutral-h);--color-secondary-s: var(--color-neutral-s);--color-secondary-l: var(--color-neutral-l);--color-secondary: hsl(var(--color-neutral));--box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark) / 15%);--mg-color-soft-l: 90%;--default-size: 3.5rem;--mg-disabled-opacity: 0.4;--mg-icon-small-size: 1.2rem;--mg-icon-regular-size: 1.6rem;--mg-icon-medium-size: 2rem;--mg-icon-large-size: 2.4rem;--mg-icon-extra-large-size: 3.2rem;--mg-icon-border-radius: 50%;--mg-button-border-radius: 0.3rem;--mg-button-icon-border-radius: var(--default-size);--mg-button-disabled-opacity: var(--mg-disabled-opacity);--mg-button-gradient: 1;--mg-button-border-variation: 1;--mg-button-primary-color-h: var(--color-dark-h);--mg-button-primary-color-s: var(--color-dark-s);--mg-button-primary-color-l: var(--color-dark-l);--mg-button-primary-font-color: var(--color-neutral);--mg-button-secondary-color-h: var(--color-neutral-h);--mg-button-secondary-color-s: var(--color-neutral-s);--mg-button-secondary-color-l: var(--color-neutral-l);--mg-button-secondary-font-color: var(--color-dark);--mg-tag-height: 2.3rem;--mg-tag-border-radius: 0.5rem;--mg-tag-font-size: 1.2rem;--mg-badge-size: 1.6rem;--mg-badge-font-size: 1.1rem;--mg-tooltip-border-radius: 0.5rem;--mg-tooltip-background-color: var(--color-dark);--mg-tooltip-font-color: var(--color-font-light);--mg-popover-background-color: var(--color-light);--mg-popover-font-color: var(--color-font-dark);--mg-popover-title-font-size: 1.4rem;--mg-popover-max-width: 40rem;--mg-message-border-radius: 0.3rem;--mg-modal-border-radius: 0.5rem;--mg-modal-title-font-size: 1.8rem;--mg-modal-content-font-size: 1.2rem;--mg-panel-border-radius: 0.5rem;--mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);--mg-panel-box-shadow: var(--box-shadow);--mg-panel-content-padding: 1.5rem;--mg-illustrated-message-padding-vertical: 4rem;--mg-card-padding-default: 1.6rem;--mg-card-border-radius-default: 0.5rem;--mg-card-background-default: hsl(var(--color-light));--mg-card-border-default: 0.1rem solid hsl(var(--color-dark) / 5%);--mg-card-box-shadow-default: var(--box-shadow);--mg-divider-background-color: hsl(var(--color-dark) / 15%);--mg-divider-thickness: 0.1rem;--mg-divider-vertical-spacing: 4rem;--mg-grid-spacing: 1rem;--mg-inputs-border-width: 0.1rem;--mg-inputs-border-radius: 0.3rem;--mg-inputs-color: #b5c2c9;--mg-inputs-spacer: 1rem;--mg-inputs-error-bg-color: var(--color-danger-h) calc(var(--color-danger-s) + 5%) calc(var(--color-danger-l) + 49%);--mg-inputs-color-shadow-focus-hsl: 188 100% 50%;--mg-input-toggle-border-radius-ratio: 2;--mg-input-check-size: 1.3rem;--mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);--mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);--mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);--mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);--mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);--mg-tabs-color-active-hsl: var(--mg-color-app-hsl);--mg-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));--mg-details-spacing: 1.5rem}/*# sourceMappingURL=variables.css.map */

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

@@ -5,7 +5,7 @@ export declare class MgCard {
    * Private *
    *************/
   private readonly name;
-  private readonly baseClass;
+  private readonly classBase;
   /*************
    * Decorators *
    *************/

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -3,11 +3,15 @@ export declare class MgInputTitle {
    * Label input id
    */
   identifier: string;
-  validateIdentifier(newValue: string): void;
+  validateIdentifier(newValue: MgInputTitle['identifier']): void;
   /**
    * If input is required an asterisk is added at the end of the label
    */
   required: boolean;
+  /**
+   * If input is required an asterisk is added at the end of the label
+   */
+  readonly: boolean;
   /**
    * Switch from label to fieldset sementic
    */

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

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

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

@@ -26,7 +26,7 @@ export declare class MgTooltip {
    * Displayed message in the tooltip
    */
   message: string;
-  validateMessage(newValue: string): void;
+  validateMessage(newValue: MgTooltip['message']): void;
   /**
    * Tooltip placement
    */
@@ -35,7 +35,7 @@ export declare class MgTooltip {
    * Display tooltip
    */
   display: boolean;
-  handleDisplay(newValue: boolean): void;
+  handleDisplay(newValue: MgTooltip['display']): void;
   /**
    * Disable tooltip
    */

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

@@ -23,6 +23,10 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
    * Define mg-input-checkbox input name
    */
   name: string;
+  /**
+   * Define mg-input-checkbox input invalid
+   */
+  invalid: boolean;
   /**
    * Define checkboxes to paginate
    */
@@ -62,7 +66,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
    */
   private massActionHandler;
   /**
-   * Toogle items button handler
+   * Toggle items button handler
    */
   private handleToggleClick;
   /**

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

@@ -13,12 +13,12 @@ export interface CheckboxValue {
  * use to match checkbox attributes
  */
 export interface CheckboxItem extends CheckboxValue {
-  id: string;
-  handleInput: (event: InputEvent & {
+  _id: string;
+  _handleInput: (event: InputEvent & {
     target: HTMLInputElement;
   }) => void;
-  handleBlur: () => void;
-  handleKeydown: (event: KeyboardEvent & {
+  _handleBlur: () => void;
+  _handleKeydown: (event: KeyboardEvent & {
     target: HTMLElement;
   }) => void;
 }
@@ -30,10 +30,6 @@ export declare const checkboxTypes: readonly ["checkbox", "multi"];
  * ChecboxType from checkbox types
  */
 export type CheckboxType = (typeof checkboxTypes)[number];
-/**
- * Search value type
- */
-export type SearchValueType = string;
 /**
  * mg-input-checkbox-paginated section kind
  */
@@ -55,6 +51,7 @@ export interface IMgInputCheckboxBase {
   readonly: boolean;
   disabled: boolean;
   name: string;
+  invalid: boolean;
 }
 /**
  * mg-input-checkbox-list interface

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
   /************
    * Internal *
@@ -116,7 +116,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
   /**
    * Search value query
    */
-  searchValue: SearchValueType;
+  searchValue: string;
   validateSearchValue(): void;
   /**
    * Search current page

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

@@ -0,0 +1,9 @@
+/**
+ * List of all available text types
+ */
+declare const textTypes: readonly ["text", "search"];
+/**
+ * TextType from text types
+ */
+export type TextType = (typeof textTypes)[number];
+export {};

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 { 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: string[];
+  validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
   /**
    * Input max length
    */
@@ -172,6 +179,11 @@ export declare class MgInputText {
    * 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-toggle/mg-input-toggle.d.ts

@@ -84,6 +84,14 @@ export declare class MgInputToggle {
    * Formated items for display
    */
   options: ToggleValue[];
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Define input valid state
+   */
+  valid: boolean;
   /**
    * Checked internal value
    */
@@ -97,6 +105,20 @@ export declare class MgInputToggle {
    * Emited event when checking validity
    */
   inputValid: EventEmitter<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: boolean, errorMessage: string): Promise<void>;
+  /**
+   * Set input error message
+   * @param errorMessage - errorMessage override
+   */
+  private setErrorMessage;
   /**
    * Change checked value
    */

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

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

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

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

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

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

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

@@ -36,7 +36,5 @@ export type MgActionMoreItemType = {
 /**
  * MouseEvent callback interface
  */
-interface IMouseEventHandler {
-  (event: MouseEvent): void;
-}
+type IMouseEventHandler = (event: MouseEvent) => void;
 export {};

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-panel/mg-panel.d.ts

@@ -23,7 +23,7 @@ export declare class MgPanel {
    * Panel title
    */
   panelTitle: string;
-  validatePanelTitle(newValue: string): void;
+  validatePanelTitle(newValue: MgPanel['panelTitle']): void;
   /**
    * Panel title pattern
    */
@@ -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

@@ -34,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