@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/mg-components/p-af42d17b.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 r={label:"Pagination",page:"page",pages:"pages",nextPage:"Next page",previousPage:"Previous page",selectPage:"Select the page to display."};const l={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:r,panel:l,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:"résultat",results:"résultats",searchResults:"List de résultat(s) de la recherche.",noResult:"Aucun résultat.",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 T=(e,t)=>new Intl.NumberFormat(t).format(e);const A=/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;const M=(e,t)=>{if(typeof e!=="string"||e===""||!A.test(e)){return""}return new Intl.DateTimeFormat(t).format(new Date(e))};const B=(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 r=i.split("-").shift();return{locale:i,messages:t[r]||t[s]}};const C="en";const N={en:m,fr:w};const R=e=>B(e,N,C);var I;(function(e){e["VERTICAL"]="vertical";e["HORIZONTAL"]="horizontal"})(I||(I={}));const F=["regular","medium","large"];const V=(e="",t=10)=>{const s=new Uint8Array(t);crypto.getRandomValues(s);const n=Array.from(s).map((e=>e.toString(16).padStart(2,"0"))).join("").slice(0,t);return e!==""?`${e}-${n}`:n};class j{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=U(e);const s=Q(e);return[e,...t,...s]};const U=(e,t=[])=>{if(e.self!==e.top){try{const s=e.parent;t.push(s);return U(s,t)}catch(e){console.error("Different hosts between iframes:",e);return t}}return t};const Q=(e,t=[])=>{if(e.frames.length>0){for(const s of Array.from(e.frames)){t.push(s);Q(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,"");const J=async e=>e();export{j as C,I as D,G as a,z as b,V as c,H as d,A as e,k as f,T as g,D as h,R as i,E as j,$ as k,M as l,J as n,F as s};
+//# sourceMappingURL=p-af42d17b.js.map

package/dist/mg-components/p-af42d17b.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","randomBytes","Uint8Array","crypto","getRandomValues","hexString","Array","from","map","byte","toString","padStart","join","slice","ClassList","constructor","classlist","this","add","className","has","classes","push","delete","index","indexOf","splice","includes","allItemsAreString","items","isArray","every","item","isTagName","tagNames","tagName","toLowerCase","focusableElements","getWindows","localWindow","parentWindows","getParentWindows","childWindows","getChildWindows","windows","self","top","parentWindow","parent","err","console","error","frames","childWindow","isValidString","value","trim","cleanString","text","toLocaleLowerCase","normalize","replaceAll","nextTick","async","callback"],"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 randomBytes = new Uint8Array(length);\n\n  crypto.getRandomValues(randomBytes);\n\n  const hexString = Array.from(randomBytes)\n    .map(byte => byte.toString(16).padStart(2, '0'))\n    .join('')\n    .slice(0, length);\n\n  return prefix !== '' ? `${prefix}-${hexString}` : hexString;\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\n/**\n * Use to process code next tick in the event loop\n * @param callback - code to excute on next tick\n * @returns differed code excution\n */\nexport const nextTick = async (callback: () => void): Promise<void> => callback();\n"],"mappings":"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"}

package/dist/mg-components/{p-01ebc95a.entry.js → p-e0fb0f3c.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as e,g as s}from"./p-1aa89acf.js";import{a as o,i as n,D as h}from"./p-c9e2c669.js";const r=t=>t.nodeName==="MG-ITEM-MORE";var a;(function(t){t["BASE_INDEX"]="data-overflow-base-index";t["PROXY_INDEX"]="data-overflow-proxy-index"})(a||(a={}));class l{constructor(t,i){this.element=t;this.render=i;this.disconnect=()=>{this._resizeObserver.disconnect()};this.run=t=>{if(this._moreElement===undefined){this._moreElement=this.render();this._baseChildren=this.getInteractiveItems(this.element);if(r(this._moreElement)){this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))}this._baseChildren.forEach(((t,i)=>{t.setAttribute(a.BASE_INDEX,`${i}`);this._proxyChildren[i].setAttribute(a.PROXY_INDEX,`${i}`)}))}if(t!==undefined)this.updateDisplayedItems(t)};this.getInteractiveItems=t=>{var i;return(((i=t.children)===null||i===void 0?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))};this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((e=>{i.accWidth+=e.offsetWidth;const s=i.previousItem!==null;const o=s&&i.previousItem.getAttribute("hidden")!==null;this.toggleItem(e,o&&!this.isMoreElement(e)||this.isOverflowElement(i.accWidth,e,t)||this.isMoreElement(e)&&!o);i.previousItem=e}))};this.isOverflowElement=(t,i,e)=>{if(i.previousElementSibling===null||this.isMoreElement(i))return false;else if(!this.isMoreElement(i.nextElementSibling))return t+this._moreElement.offsetWidth>e;else return t>e};this.isMoreElement=t=>t.nodeName==="MG-ITEM-MORE";this.toggleItem=(t,i)=>{const e=Number(t.getAttribute(a.BASE_INDEX));if(this.isMoreElement(t))this.toggleElement(this._moreElement,i);else if(e>=0){this.toggleElement(t,i);this.toggleElement(this._proxyChildren[e],!i)}};this.toggleElement=(t,i)=>{if(i)t.setAttribute("hidden","");else t.removeAttribute("hidden")};this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))};if(this._resizeObserver===undefined){this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))}));this._resizeObserver.observe(this.element)}this.run()}}const m=".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";const c=class{constructor(i){t(this,i);this.name="mg-item-more";this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(true))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,e)=>{t.addEventListener("click",(()=>{const t=i[e].shadowRoot.querySelector("a, button");if(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement)t.click()}));if(o(t.id))t.id=`${t.id}-proxy`;i[e].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))}));return this.element};this.icon={icon:"ellipsis-vertical"};this.slotlabel={display:false};this.size=undefined;this.parentMenu=undefined}validateIcon(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.icon!=="string")throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.display!=="boolean")throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);else if(typeof t.label!=="string")this.slotlabel.label=this.messages.moreLabel}validateSize(t){if(t&&typeof t!=="string")throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=n(this.element).messages.plusMenu;this.parentMenu=this.element.closest("mg-menu");this.menuItems=Array.from(this.parentMenu.children).filter((t=>t.nodeName==="MG-MENU-ITEM"));this.validateIcon(this.icon);this.validateSlotLabel(this.slotlabel);this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new l(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(e,{role:"listitem"},i("mg-menu-item",{"data-overflow-more":true,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return s(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};c.style=m;export{c as mg_item_more};
-//# sourceMappingURL=p-01ebc95a.entry.js.map
+import{r as t,h as i,H as e,g as s}from"./p-7444ff40.js";import{a as o,i as n,D as h}from"./p-af42d17b.js";const r=t=>t.nodeName==="MG-ITEM-MORE";var a;(function(t){t["BASE_INDEX"]="data-overflow-base-index";t["PROXY_INDEX"]="data-overflow-proxy-index"})(a||(a={}));class l{constructor(t,i){this.element=t;this.render=i;this.disconnect=()=>{this._resizeObserver.disconnect()};this.run=t=>{if(this._moreElement===undefined){this._moreElement=this.render();this._baseChildren=this.getInteractiveItems(this.element);if(r(this._moreElement)){this._proxyChildren=this.getInteractiveItems(this._moreElement.shadowRoot.querySelector("mg-menu"))}this._baseChildren.forEach(((t,i)=>{t.setAttribute(a.BASE_INDEX,`${i}`);this._proxyChildren[i].setAttribute(a.PROXY_INDEX,`${i}`)}))}if(t!==undefined)this.updateDisplayedItems(t)};this.getInteractiveItems=t=>{var i;return(((i=t.children)===null||i===void 0?void 0:i.length)>0?Array.from(t.children):[]).filter((t=>["MG-MENU-ITEM","MG-BUTTON"].includes(t.nodeName)))};this.updateDisplayedItems=t=>{this.restoreItems();const i={accWidth:0,previousItem:null};[...this._baseChildren,this._moreElement].forEach((e=>{i.accWidth+=e.offsetWidth;const s=i.previousItem!==null;const o=s&&i.previousItem.getAttribute("hidden")!==null;this.toggleItem(e,o&&!this.isMoreElement(e)||this.isOverflowElement(i.accWidth,e,t)||this.isMoreElement(e)&&!o);i.previousItem=e}))};this.isOverflowElement=(t,i,e)=>{if(i.previousElementSibling===null||this.isMoreElement(i))return false;else if(!this.isMoreElement(i.nextElementSibling))return t+this._moreElement.offsetWidth>e;else return t>e};this.isMoreElement=t=>t.nodeName==="MG-ITEM-MORE";this.toggleItem=(t,i)=>{const e=Number(t.getAttribute(a.BASE_INDEX));if(this.isMoreElement(t))this.toggleElement(this._moreElement,i);else if(e>=0){this.toggleElement(t,i);this.toggleElement(this._proxyChildren[e],!i)}};this.toggleElement=(t,i)=>{if(i)t.setAttribute("hidden","");else t.removeAttribute("hidden")};this.restoreItems=()=>{[...this._baseChildren,this._moreElement].forEach((t=>t.removeAttribute("hidden")))};if(this._resizeObserver===undefined){this._resizeObserver=new ResizeObserver((t=>{t.forEach((t=>{this.run(t.contentRect.width)}))}));this._resizeObserver.observe(this.element)}this.run()}}const m=".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";const d=class{constructor(i){t(this,i);this.name="mg-item-more";this.renderMgMenuItemOverflowElement=()=>{const t=this.element.shadowRoot.querySelector("mg-menu-item");this.menuItems.forEach((i=>{t.querySelector("mg-menu").appendChild(i.cloneNode(true))}));const i=Array.from(this.parentMenu.querySelectorAll("mg-menu-item:not([data-overflow-more])"));Array.from(t.querySelectorAll("mg-menu-item:not([data-overflow-more])")).forEach(((t,e)=>{t.addEventListener("click",(()=>{const t=i[e].shadowRoot.querySelector("a, button");if(t instanceof HTMLButtonElement||t instanceof HTMLAnchorElement)t.click()}));if(o(t.id))t.id=`${t.id}-proxy`;i[e].addEventListener("status-change",(i=>{t.setAttribute("status",i.detail)}))}));return this.element};this.icon={icon:"ellipsis-vertical"};this.slotlabel={display:false};this.size=undefined;this.parentMenu=undefined}validateIcon(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.icon!=="string")throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`)}validateSlotLabel(t){if(typeof t!=="object"||typeof t==="object"&&typeof t.display!=="boolean")throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);else if(typeof t.label!=="string")this.slotlabel.label=this.messages.moreLabel}validateSize(t){if(t&&typeof t!=="string")throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`)}disconnectedCallback(){this.overflowBehavior.disconnect()}componentWillLoad(){this.messages=n(this.element).messages.plusMenu;this.parentMenu=this.element.closest("mg-menu");this.menuItems=Array.from(this.parentMenu.children).filter((t=>t.nodeName==="MG-MENU-ITEM"));this.validateIcon(this.icon);this.validateSlotLabel(this.slotlabel);this.validateSize(this.size)}componentDidLoad(){this.overflowBehavior=new l(this.parentMenu,this.renderMgMenuItemOverflowElement)}render(){return i(e,{role:"listitem"},i("mg-menu-item",{"data-overflow-more":true,"data-size":this.parentMenu.size},i("mg-icon",{icon:this.icon.icon,slot:"image"}),i("span",{class:{"mg-u-visually-hidden":!this.slotlabel.display},slot:"label"},this.slotlabel.label),i("mg-menu",{direction:h.VERTICAL,label:this.messages.moreLabel,size:this.size})))}get element(){return s(this)}static get watchers(){return{icon:["validateIcon"],slotlabel:["validateSlotLabel"],size:["validateSize"]}}};d.style=m;export{d as mg_item_more};
+//# sourceMappingURL=p-e0fb0f3c.entry.js.map

package/dist/mg-components/p-e0fb0f3c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isMgItemMore","element","nodeName","OverflowBehaviorElements","OverflowBehavior","constructor","render","this","disconnect","_resizeObserver","run","width","_moreElement","undefined","_baseChildren","getInteractiveItems","_proxyChildren","shadowRoot","querySelector","forEach","child","index","setAttribute","BASE_INDEX","PROXY_INDEX","updateDisplayedItems","_a","children","length","Array","from","filter","includes","availableWidth","restoreItems","acc","accWidth","previousItem","offsetWidth","hasPreviuosItem","isPreviousItemHidden","getAttribute","toggleItem","isMoreElement","isOverflowElement","cumulateWidth","item","previousElementSibling","nextElementSibling","isHidden","mgActionMenuindex","Number","toggleElement","removeAttribute","ResizeObserver","entries","entry","contentRect","observe","mgItemMoreCss","MgItemMore","name","renderMgMenuItemOverflowElement","moreElementMenuItem","menuItems","appendChild","cloneNode","allMenuItem","parentMenu","querySelectorAll","proxy","addEventListener","navElement","HTMLButtonElement","HTMLAnchorElement","click","isValidString","id","event","detail","icon","display","validateIcon","newValue","Error","validateSlotLabel","label","slotlabel","messages","moreLabel","validateSize","disconnectedCallback","overflowBehavior","componentWillLoad","initLocales","plusMenu","closest","size","componentDidLoad","h","Host","role","slot","class","direction","Direction","VERTICAL"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\n    private element: Element,\n    private render: () => HTMLElement,\n  ) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}/*# sourceMappingURL=mg-item-more.css.map */\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\n          <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n          <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n            {this.slotlabel.label}\n          </span>\n          <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/types/assets/icons/index.d.ts

@@ -0,0 +1,193 @@
+export declare const icons: {
+    'address-card': string;
+    'align-center': string;
+    'align-justify': string;
+    'align-left': string;
+    'align-right': string;
+    api: string;
+    archive: string;
+    'archive-outline': string;
+    'arrow-clock': string;
+    'arrow-down': string;
+    'arrow-down-a-z': string;
+    'arrow-down-right': string;
+    'arrow-left': string;
+    'arrow-right': string;
+    'arrow-rotate': string;
+    'arrow-rotate-backward': string;
+    'arrow-up': string;
+    'arrow-up-right': string;
+    'arrow-up-right-square': string;
+    'arrow-up-z-a': string;
+    'arrows-compare': string;
+    'arrows-right-down': string;
+    'arrows-right-left': string;
+    'arrows-rotate': string;
+    'arrows-rotate-backward': string;
+    ban: string;
+    bell: string;
+    'bell-outline': string;
+    book: string;
+    'book-outline': string;
+    briefcase: string;
+    'briefcase-outline': string;
+    'building-outline': string;
+    calculator: string;
+    calendar: string;
+    'calendar-euro': string;
+    'calendar-euro-outline': string;
+    'calendar-outline': string;
+    check: string;
+    'check-circle': string;
+    'check-circle-outline': string;
+    'chevron-down': string;
+    'chevron-down-circle': string;
+    'chevron-left': string;
+    'chevron-left-circle': string;
+    'chevron-right': string;
+    'chevron-right-circle': string;
+    'chevron-up': string;
+    'chevron-up-circle': string;
+    circle: string;
+    clock: string;
+    'clock-outline': string;
+    'code-square-outline': string;
+    cog: string;
+    'cog-outline': string;
+    comment: string;
+    'comment-outline': string;
+    'comment-sms': string;
+    conversation: string;
+    'conversation-outline': string;
+    copy: string;
+    'credit-card': string;
+    cross: string;
+    'cross-circle': string;
+    'cross-circle-outline': string;
+    dashboard: string;
+    'dashboard-outline': string;
+    download: string;
+    earth: string;
+    'earth-outline': string;
+    ellipsis: string;
+    'ellipsis-vertical': string;
+    euro: string;
+    'euro-circle': string;
+    'exclamation-circle': string;
+    'exclamation-circle-outline': string;
+    'exclamation-stamp': string;
+    'exclamation-triangle': string;
+    'exclamation-triangle-outline': string;
+    eye: string;
+    'eye-slash': string;
+    fax: string;
+    'fax-outline': string;
+    file: string;
+    'file-cog': string;
+    'file-download': string;
+    'file-excel': string;
+    'file-excel-outline': string;
+    'file-outline': string;
+    'file-pdf': string;
+    'file-pdf-outline': string;
+    'file-text': string;
+    'file-text-outline': string;
+    'file-upload': string;
+    'file-word': string;
+    'file-word-outline': string;
+    filter: string;
+    'floppy-disk': string;
+    folder: string;
+    'folder-check': string;
+    'folder-check-outline': string;
+    'folder-lines': string;
+    'folder-lines-outline': string;
+    'folder-link': string;
+    'folder-link-outline': string;
+    'folder-outline': string;
+    'folder-star': string;
+    folders: string;
+    'folders-outline': string;
+    gavel: string;
+    'gavel-outline': string;
+    'graduation-cap': string;
+    'hand-up': string;
+    history: string;
+    home: string;
+    'home-outline': string;
+    'info-circle': string;
+    'info-circle-outline': string;
+    'interrogation-circle': string;
+    'interrogation-circle-outline': string;
+    key: string;
+    laptop: string;
+    'life-ring': string;
+    'lines-rectangle': string;
+    link: string;
+    list: string;
+    loader: string;
+    location: string;
+    'location-outline': string;
+    lock: string;
+    'log-in': string;
+    'log-out': string;
+    'magnifying-glass': string;
+    mail: string;
+    'mail-outline': string;
+    'messages-square': string;
+    'messages-square-outline': string;
+    mobile: string;
+    'mobile-outline': string;
+    notes: string;
+    'notes-outline': string;
+    'paper-plane': string;
+    'paper-plane-slash': string;
+    paperclip: string;
+    pen: string;
+    'pen-circle': string;
+    'pen-fancy': string;
+    'pen-fancy-files-outline': string;
+    'pen-fancy-outline': string;
+    'pen-outline': string;
+    phone: string;
+    'phone-outline': string;
+    picture: string;
+    'play-circle': string;
+    plus: string;
+    'plus-circle': string;
+    'question-circle': string;
+    share: string;
+    shuffle: string;
+    sitemap: string;
+    sliders: string;
+    'sliders-outline': string;
+    squares: string;
+    star: string;
+    'star-outline': string;
+    table: string;
+    tag: string;
+    tags: string;
+    'thumb-up': string;
+    'thumb-up-outline': string;
+    thumbtack: string;
+    'thumbtack-outline': string;
+    trash: string;
+    'trash-outline': string;
+    'universal-access': string;
+    unlink: string;
+    unlock: string;
+    upload: string;
+    user: string;
+    'user-circle': string;
+    'user-group': string;
+    'user-lock': string;
+    'user-outline': string;
+    'user-pen-fancy-outline': string;
+    'user-plus': string;
+    'user-question-outline': string;
+    'user-shield-outline': string;
+    users: string;
+    'users-outline': string;
+    wallet: string;
+    'wallet-outline': string;
+};

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

@@ -1,45 +1,45 @@
 import { BadgeVariantType } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgBadge {
-  /************
-   * Internal *
-   ************/
-  private readonly classOutline;
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Badge value
-   */
-  value: string | number;
-  validateValue(newValue: MgBadge['value']): void;
-  /**
-   * Badge label. Include short description.
-   * Required for accessibility
-   */
-  label: string;
-  validateLabel(newValue: MgBadge['label']): void;
-  /**
-   * Define button variant
-   */
-  variant?: BadgeVariantType;
-  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void;
-  /**
-   * Define if button is using outline style
-   */
-  outline: boolean;
-  validateOutline(newValue: MgBadge['outline']): void;
-  /**
-   * Component classes
-   */
-  classCollection: ClassList;
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad(): void;
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render(): HTMLElement;
+    /************
+     * Internal *
+     ************/
+    private readonly classOutline;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Badge value
+     */
+    value: string | number;
+    validateValue(newValue: MgBadge['value']): void;
+    /**
+     * Badge label. Include short description.
+     * Required for accessibility
+     */
+    label: string;
+    validateLabel(newValue: MgBadge['label']): void;
+    /**
+     * Define button variant
+     */
+    variant?: BadgeVariantType;
+    validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void;
+    /**
+     * Define if button is using outline style
+     */
+    outline: boolean;
+    validateOutline(newValue: MgBadge['outline']): void;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render(): HTMLElement;
 }

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

@@ -2,100 +2,104 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import { VariantType, ButtonType } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgButton {
-  /************
-   * Internal *
-   ************/
-  private onClickElementFn;
-  private readonly classDisabled;
-  private readonly classLoading;
-  private readonly classFullWidth;
-  /**************
-   * Decorators *
-   **************/
-  /**
-   * Get component DOM element
-   */
-  element: HTMLMgButtonElement;
-  /**
-   * Define button variant
-   */
-  variant: VariantType;
-  validateVariant(newValue: VariantType, oldValue?: VariantType): void;
-  /**
-   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
-   */
-  identifier: string;
-  /**
-   * aria-label
-   * In case button text is not explicit enough
-   */
-  label: string;
-  /**
-   * Define button type
-   */
-  type: ButtonType;
-  /**
-   * Set button to full-width
-   */
-  fullWidth: boolean;
-  validateFullWidth(newValue: MgButton['fullWidth']): void;
-  /**
-   * Define form id to attach button with.
-   * If this attribute is not set, the <button> is associated with its ancestor <form> element.
-   */
-  form: string;
-  /**
-   * Disable button
-   */
-  disabled: boolean;
-  disabledHandler(isDisabled: MgButton['disabled']): void;
-  /**
-   * Define if button is round.
-   * Used for icon button.
-   */
-  isIcon: boolean;
-  /**
-   * Option to set input disable on click, in order to prevent multi-click.
-   * Parent component have to remove the attribute 'disabled' when the process ends.
-   */
-  disableOnClick: boolean;
-  /**
-   * Define if button is loading, default to false.
-   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
-   * It's required to reset to false when action/promise in parent is done to stop the loading state
-   */
-  loading: boolean;
-  loadingHandler(newValue: MgButton['loading']): void;
-  /**
-   * Component classes
-   */
-  classCollection: ClassList;
-  /**
-   * Emmited event when disabled change
-   */
-  disabledChange: EventEmitter<MgButton['disabled']>;
-  /**
-   * Trigger actions onClick event
-   * @param event - click event
-   */
-  private handleClick;
-  /**
-   * Handle onKeydown event
-   * @param event - keyboard event
-   */
-  private handleKeydown;
-  /**
-   * Handle onKeyup event
-   * @param event - keyboard event
-   */
-  private handleKeyup;
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad(): void;
-  /**
-   * Render component
-   * @returns html element
-   */
-  render(): HTMLElement;
+    /************
+     * Internal *
+     ************/
+    private onClickElementFn;
+    private readonly classDisabled;
+    private readonly classLoading;
+    private readonly classFullWidth;
+    /**************
+     * Decorators *
+     **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgButtonElement;
+    /**
+     * Define button variant
+     */
+    variant: VariantType;
+    validateVariant(newValue: VariantType, oldValue?: VariantType): void;
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     */
+    identifier: string;
+    /**
+     * aria-label
+     * In case button text is not explicit enough
+     */
+    label: string;
+    /**
+     * Define button type
+     */
+    type: ButtonType;
+    /**
+     * Set button to full-width
+     */
+    fullWidth: boolean;
+    validateFullWidth(newValue: MgButton['fullWidth']): void;
+    /**
+     * Define form id to attach button with.
+     * If this attribute is not set, the <button> is associated with its ancestor <form> element.
+     */
+    form: string;
+    /**
+     * Disable button
+     */
+    disabled: boolean;
+    disabledHandler(isDisabled: MgButton['disabled']): void;
+    /**
+     * Define if button is round.
+     * Used for icon button.
+     */
+    isIcon: boolean;
+    /**
+     * Option to set input disable on click, in order to prevent multi-click.
+     * Parent component have to remove the attribute 'disabled' when the process ends.
+     */
+    disableOnClick: boolean;
+    /**
+     * Define if button is loading, default to false.
+     * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+     * It's required to reset to false when action/promise in parent is done to stop the loading state
+     */
+    loading: boolean;
+    loadingHandler(newValue: MgButton['loading']): void;
+    /**
+     * Component classes
+     */
+    classCollection: ClassList;
+    /**
+     * Emmited event when disabled change
+     */
+    disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;
+    /**
+     * Trigger actions onClick event
+     * @param event - click event
+     */
+    private handleClick;
+    /**
+     * Handle onKeydown event
+     * @param event - keyboard event
+     */
+    private handleKeydown;
+    /**
+     * Handle onKeyup event
+     * @param event - keyboard event
+     */
+    private handleKeyup;
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad(): void;
+    /**
+     * Add listners
+     */
+    componentDidLoad(): void;
+    /**
+     * Render component
+     * @returns html element
+     */
+    render(): HTMLElement;
 }