@mgdis/mg-components 5.6.0 → 5.7.0

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

@@ -0,0 +1,2 @@
+let e,t,n,l=!1,o=!1,s=!1,i=!1,r=!1;const c="http://www.w3.org/1999/xlink",f={},u=e=>"object"==(e=typeof e)||"function"===e;function a(e){var t,n,l;return null!==(l=null===(n=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===n?void 0:n.getAttribute("content"))&&void 0!==l?l:void 0}const d=(e,t,...n)=>{let l=null,o=null,s=null,i=!1,r=!1;const c=[],f=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?f(l):null!=l&&"boolean"!=typeof l&&((i="function"!=typeof e&&!u(l))&&(l+=""),i&&r?c[c.length-1].t+=l:c.push(i?$(null,l):l),r=i)};if(f(n),t){t.key&&(o=t.key),t.name&&(s=t.name);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}if("function"==typeof e)return e(null===t?{}:t,c,m);const a=$(e,null);return a.l=t,c.length>0&&(a.o=c),a.i=o,a.u=s,a},$=(e,t)=>({$:0,h:e,t,m:null,o:null,l:null,i:null,u:null}),h={},m={forEach:(e,t)=>e.map(p).forEach(t),map:(e,t)=>e.map(p).map(t).map(y)},p=e=>({vattrs:e.l,vchildren:e.o,vkey:e.i,vname:e.u,vtag:e.h,vtext:e.t}),y=e=>{if("function"==typeof e.vtag){const t=Object.assign({},e.vattrs);return e.vkey&&(t.key=e.vkey),e.vname&&(t.name=e.vname),d(e.vtag,t,...e.vchildren||[])}const t=$(e.vtag,e.vtext);return t.l=e.vattrs,t.o=e.vchildren,t.i=e.vkey,t.u=e.vname,t},b=e=>oe(e).p,v=(e,t,n)=>{const l=b(e);return{emit:e=>w(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},w=(e,t,n)=>{const l=he.ce(t,n);return e.dispatchEvent(l),l},g=new WeakMap,k=e=>"sc-"+e.v,j=(e,t,n,l,o,s)=>{if(n!==l){let i=re(e,t),r=t.toLowerCase();if("class"===t){const t=e.classList,o=O(n),s=O(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(i||"o"!==t[0]||"n"!==t[1]){const f=u(l);if((i||f&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}let a=!1;r!==(r=r.replace(/^xlink\:?/,""))&&(t=r,a=!0),null==l||!1===l?!1===l&&""!==e.getAttribute(t)||(a?e.removeAttributeNS(c,t):e.removeAttribute(t)):(!i||4&s||o)&&!f&&(l=!0===l?"":l,a?e.setAttributeNS(c,t,l):e.setAttribute(t,l))}else t="-"===t[2]?t.slice(3):re(de,r)?r.slice(2):r[2]+t.slice(3),n&&he.rel(e,t,n,!1),l&&he.ael(e,t,l,!1)}},S=/\s/,O=e=>e?e.split(S):[],M=(e,t,n,l)=>{const o=11===t.m.nodeType&&t.m.host?t.m.host:t.m,s=e&&e.l||f,i=t.l||f;for(l in s)l in i||j(o,l,s[l],void 0,n,t.$);for(l in i)j(o,l,s[l],i[l],n,t.$)},x=(o,r,c,f)=>{const u=r.o[c];let a,d,$,h=0;if(l||(s=!0,"slot"===u.h&&(e&&f.classList.add(e+"-s"),u.$|=u.o?2:1)),null!==u.t)a=u.m=$e.createTextNode(u.t);else if(1&u.$)a=u.m=$e.createTextNode("");else{if(i||(i="svg"===u.h),a=u.m=$e.createElementNS(i?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",2&u.$?"slot-fb":u.h),i&&"foreignObject"===u.h&&(i=!1),M(null,u,i),null!=e&&a["s-si"]!==e&&a.classList.add(a["s-si"]=e),u.o)for(h=0;h<u.o.length;++h)d=x(o,u,h,a),d&&a.appendChild(d);"svg"===u.h?i=!1:"foreignObject"===a.tagName&&(i=!0)}return a["s-hn"]=n,3&u.$&&(a["s-sr"]=!0,a["s-cr"]=t,a["s-sn"]=u.u||"",$=o&&o.o&&o.o[c],$&&$.h===u.h&&o.m&&C(o.m,!1)),a},C=(e,t)=>{he.$|=1;const l=e.childNodes;for(let e=l.length-1;e>=0;e--){const o=l[e];o["s-hn"]!==n&&o["s-ol"]&&(L(o).insertBefore(o,E(o)),o["s-ol"].remove(),o["s-ol"]=void 0,s=!0),t&&C(o,t)}he.$&=-2},R=(e,t,l,o,s,i)=>{let r,c=e["s-cr"]&&e["s-cr"].parentNode||e;for(c.shadowRoot&&c.tagName===n&&(c=c.shadowRoot);s<=i;++s)o[s]&&(r=x(null,l,s,e),r&&(o[s].m=r,c.insertBefore(r,E(t))))},P=(e,t,n,l,s)=>{for(;t<=n;++t)(l=e[t])&&(s=l.m,H(l),o=!0,s["s-ol"]?s["s-ol"].remove():C(s,!0),s.remove())},T=(e,t)=>e.h===t.h&&("slot"===e.h?e.u===t.u:e.i===t.i),E=e=>e&&e["s-ol"]||e,L=e=>(e["s-ol"]?e["s-ol"]:e).parentNode,N=(e,t)=>{const n=t.m=e.m,l=e.o,o=t.o,s=t.h,r=t.t;let c;null===r?(i="svg"===s||"foreignObject"!==s&&i,"slot"===s||M(e,t,i),null!==l&&null!==o?((e,t,n,l)=>{let o,s,i=0,r=0,c=0,f=0,u=t.length-1,a=t[0],d=t[u],$=l.length-1,h=l[0],m=l[$];for(;i<=u&&r<=$;)if(null==a)a=t[++i];else if(null==d)d=t[--u];else if(null==h)h=l[++r];else if(null==m)m=l[--$];else if(T(a,h))N(a,h),a=t[++i],h=l[++r];else if(T(d,m))N(d,m),d=t[--u],m=l[--$];else if(T(a,m))"slot"!==a.h&&"slot"!==m.h||C(a.m.parentNode,!1),N(a,m),e.insertBefore(a.m,d.m.nextSibling),a=t[++i],m=l[--$];else if(T(d,h))"slot"!==a.h&&"slot"!==m.h||C(d.m.parentNode,!1),N(d,h),e.insertBefore(d.m,a.m),d=t[--u],h=l[++r];else{for(c=-1,f=i;f<=u;++f)if(t[f]&&null!==t[f].i&&t[f].i===h.i){c=f;break}c>=0?(s=t[c],s.h!==h.h?o=x(t&&t[r],n,c,e):(N(s,h),t[c]=void 0,o=s.m),h=l[++r]):(o=x(t&&t[r],n,r,e),h=l[++r]),o&&L(a.m).insertBefore(o,E(a.m))}i>u?R(e,null==l[$+1]?null:l[$+1].m,n,l,r,$):r>$&&P(t,i,u)})(n,l,t,o):null!==o?(null!==e.t&&(n.textContent=""),R(n,null,t,o,0,o.length-1)):null!==l&&P(l,0,l.length-1),i&&"svg"===s&&(i=!1)):(c=n["s-cr"])?c.parentNode.textContent=r:e.t!==r&&(n.data=r)},W=e=>{const t=e.childNodes;let n,l,o,s,i,r;for(l=0,o=t.length;l<o;l++)if(n=t[l],1===n.nodeType){if(n["s-sr"])for(i=n["s-sn"],n.hidden=!1,s=0;s<o;s++)if(r=t[s].nodeType,t[s]["s-hn"]!==n["s-hn"]||""!==i){if(1===r&&i===t[s].getAttribute("slot")){n.hidden=!0;break}}else if(1===r||3===r&&""!==t[s].textContent.trim()){n.hidden=!0;break}W(n)}},A=[],D=e=>{let t,n,l,s,i,r,c=0;const f=e.childNodes,u=f.length;for(;c<u;c++){if(t=f[c],t["s-sr"]&&(n=t["s-cr"])&&n.parentNode)for(l=n.parentNode.childNodes,s=t["s-sn"],r=l.length-1;r>=0;r--)n=l[r],n["s-cn"]||n["s-nr"]||n["s-hn"]===t["s-hn"]||(F(n,s)?(i=A.find((e=>e.g===n)),o=!0,n["s-sn"]=n["s-sn"]||s,i?i.k=t:A.push({k:t,g:n}),n["s-sr"]&&A.map((e=>{F(e.g,n["s-sn"])&&(i=A.find((e=>e.g===n)),i&&!e.k&&(e.k=i.k))}))):A.some((e=>e.g===n))||A.push({g:n}));1===t.nodeType&&D(t)}},F=(e,t)=>1===e.nodeType?null===e.getAttribute("slot")&&""===t||e.getAttribute("slot")===t:e["s-sn"]===t||""===t,H=e=>{e.l&&e.l.ref&&e.l.ref(null),e.o&&e.o.map(H)},U=(e,t)=>{t&&!e.j&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.j=t)))},q=(e,t)=>{if(e.$|=16,!(4&e.$))return U(e,e.S),je((()=>V(e,t)));e.$|=512},V=(e,t)=>{const n=e.O;let l;return t&&(e.$|=256,e.M&&(e.M.map((([e,t])=>I(n,e,t))),e.M=null),l=I(n,"componentWillLoad")),J(l,(()=>_(e,n,t)))},_=async(e,t,n)=>{const l=e.p,o=l["s-rc"];n&&(e=>{const t=e.C,n=e.p,l=t.$,o=((e,t)=>{var n;let l=k(t);const o=ae.get(l);if(e=11===e.nodeType?e:$e,o)if("string"==typeof o){let t,s=g.get(e=e.head||e);if(s||g.set(e,s=new Set),!s.has(l)){{t=$e.createElement("style"),t.innerHTML=o;const l=null!==(n=he.R)&&void 0!==n?n:a($e);null!=l&&t.setAttribute("nonce",l),e.insertBefore(t,e.querySelector("link"))}s&&s.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"),2&l&&n.classList.add(o+"-s"))})(e);z(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>B(e);0===t.length?n():(Promise.all(t).then(n),e.$|=4,t.length=0)}},z=(i,r)=>{try{r=r.render(),i.$&=-17,i.$|=2,((i,r)=>{const c=i.p,f=i.C,u=i.P||$(null,null),a=(e=>e&&e.h===h)(r)?r:d(null,null,r);if(n=c.tagName,f.T&&(a.l=a.l||{},f.T.map((([e,t])=>a.l[t]=c[e]))),a.h=null,a.$|=4,i.P=a,a.m=u.m=c.shadowRoot||c,e=c["s-sc"],t=c["s-cr"],l=0!=(1&f.$),o=!1,N(u,a),he.$|=1,s){let e,t,n,l,o,s;D(a.m);let i=0;for(;i<A.length;i++)e=A[i],t=e.g,t["s-ol"]||(n=$e.createTextNode(""),n["s-nr"]=t,t.parentNode.insertBefore(t["s-ol"]=n,t));for(i=0;i<A.length;i++)if(e=A[i],t=e.g,e.k){for(l=e.k.parentNode,o=e.k.nextSibling,n=t["s-ol"];n=n.previousSibling;)if(s=n["s-nr"],s&&s["s-sn"]===t["s-sn"]&&l===s.parentNode&&(s=s.nextSibling,!s||!s["s-nr"])){o=s;break}(!o&&l!==t.parentNode||t.nextSibling!==o)&&t!==o&&(!t["s-hn"]&&t["s-ol"]&&(t["s-hn"]=t["s-ol"].parentNode.nodeName),l.insertBefore(t,o))}else 1===t.nodeType&&(t.hidden=!0)}o&&W(a.m),he.$&=-2,A.length=0})(i,r)}catch(e){ce(e,i.p)}return null},B=e=>{const t=e.p,n=e.O,l=e.S;I(n,"componentDidRender"),64&e.$||(e.$|=64,K(t),I(n,"componentDidLoad"),e.L(t),l||G()),e.N(t),e.j&&(e.j(),e.j=void 0),512&e.$&&ke((()=>q(e,!1))),e.$&=-517},G=()=>{K($e.documentElement),ke((()=>w(de,"appload",{detail:{namespace:"mg-components"}})))},I=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){ce(e)}},J=(e,t)=>e&&e.then?e.then(t):t(),K=e=>e.classList.add("hydrated"),Q=(e,t,n)=>{if(t.W){e.watchers&&(t.A=e.watchers);const l=Object.entries(t.W),o=e.prototype;if(l.map((([e,[l]])=>{31&l||2&n&&32&l?Object.defineProperty(o,e,{get(){return((e,t)=>oe(this).D.get(t))(0,e)},set(n){((e,t,n,l)=>{const o=oe(e),s=o.p,i=o.D.get(t),r=o.$,c=o.O;if(n=((e,t)=>null==e||u(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,l.W[t][0]),(!(8&r)||void 0===i)&&n!==i&&(!Number.isNaN(i)||!Number.isNaN(n))&&(o.D.set(t,n),c)){if(l.A&&128&r){const e=l.A[t];e&&e.map((e=>{try{c[e](n,i,t)}catch(e){ce(e,s)}}))}2==(18&r)&&q(o,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0}):1&n&&64&l&&Object.defineProperty(o,e,{value(...t){const n=oe(this);return n.F.then((()=>n.O[e](...t)))}})})),1&n){const n=new Map;o.attributeChangedCallback=function(e,t,l){he.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(o.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,l])=>{const o=l[1]||e;return n.set(o,e),512&l[0]&&t.T.push([e,o]),o}))}}return e},X=(e,t={})=>{var n;const l=[],o=t.exclude||[],s=de.customElements,i=$e.head,r=i.querySelector("meta[charset]"),c=$e.createElement("style"),f=[];let u,d=!0;Object.assign(he,t),he.H=new URL(t.resourcesUrl||"./",$e.baseURI).href,e.map((e=>{e[1].map((t=>{const n={$:t[0],v:t[1],W:t[2],U:t[3]};n.W=t[2],n.U=t[3],n.T=[],n.A={};const i=n.v,r=class extends HTMLElement{constructor(e){super(e),ie(e=this,n),1&n.$&&e.attachShadow({mode:"open"})}connectedCallback(){u&&(clearTimeout(u),u=null),d?f.push(this):he.jmp((()=>(e=>{if(0==(1&he.$)){const t=oe(e),n=t.C,l=()=>{};if(1&t.$)Y(e,t,n.U);else{t.$|=1,12&n.$&&(e=>{const t=e["s-cr"]=$e.createComment("");t["s-cn"]=!0,e.insertBefore(t,e.firstChild)})(e);{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){U(t,t.S=n);break}}n.W&&Object.entries(n.W).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,o)=>{if(0==(32&t.$)){{if(t.$|=32,(o=ue(n)).then){const e=()=>{};o=await o,e()}o.isProxied||(n.A=o.watchers,Q(o,n,2),o.isProxied=!0);const e=()=>{};t.$|=8;try{new o(t)}catch(e){ce(e)}t.$&=-9,t.$|=128,e()}if(o.style){let e=o.style;const t=k(n);if(!ae.has(t)){const l=()=>{};((e,t,n)=>{let l=ae.get(e);pe&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,ae.set(e,l)})(t,e,!!(1&n.$)),l()}}}const s=t.S,i=()=>q(t,!0);s&&s["s-rc"]?s["s-rc"].push(i):i()})(0,t,n)}l()}})(this)))}disconnectedCallback(){he.jmp((()=>(()=>{if(0==(1&he.$)){const e=oe(this),t=e.O;e.q&&(e.q.map((e=>e())),e.q=void 0),I(t,"disconnectedCallback")}})()))}componentOnReady(){return oe(this).V}};n._=e[0],o.includes(i)||s.get(i)||(l.push(i),s.define(i,Q(r,n,1)))}))}));{c.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",c.setAttribute("data-styles","");const e=null!==(n=he.R)&&void 0!==n?n:a($e);null!=e&&c.setAttribute("nonce",e),i.insertBefore(c,r?r.nextSibling:i.firstChild)}d=!1,f.length?f.map((e=>e.connectedCallback())):he.jmp((()=>u=setTimeout(G,30)))},Y=(e,t,n)=>{n&&n.map((([n,l,o])=>{const s=ee(e,n),i=Z(t,o),r=te(n);he.ael(s,l,i,r),(t.q=t.q||[]).push((()=>he.rel(s,l,i,r)))}))},Z=(e,t)=>n=>{try{256&e.$?e.O[t](n):(e.M=e.M||[]).push([t,n])}catch(e){ce(e)}},ee=(e,t)=>8&t?de:e,te=e=>0!=(2&e),ne=e=>he.R=e,le=new WeakMap,oe=e=>le.get(e),se=(e,t)=>le.set(t.O=e,t),ie=(e,t)=>{const n={$:0,p:e,C:t,D:new Map};return n.F=new Promise((e=>n.N=e)),n.V=new Promise((e=>n.L=e)),e["s-p"]=[],e["s-rc"]=[],Y(e,n,t.U),le.set(e,n)},re=(e,t)=>t in e,ce=(e,t)=>(0,console.error)(e,t),fe=new Map,ue=e=>{const t=e.v.replace(/-/g,"_"),n=e._,l=fe.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(fe.set(n,e),e[t])),ce)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},ae=new Map,de="undefined"!=typeof window?window:{},$e=de.document||{head:{}},he={$:0,H:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},me=e=>Promise.resolve(e),pe=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),ye=[],be=[],ve=(e,t)=>n=>{e.push(n),r||(r=!0,t&&4&he.$?ke(ge):he.raf(ge))},we=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){ce(e)}e.length=0},ge=()=>{we(ye),we(be),(r=ye.length>0)&&he.raf(ge)},ke=e=>me().then(e),je=ve(be,!0);export{h as H,X as b,v as c,b as g,d as h,me as p,se as r,ne as s}

package/dist/mg-components/styles/mg-icon-animation.scss

@@ -0,0 +1,6 @@
+@mixin rotate($selector, $duration) {
+  transition: $duration;
+  &--rotate#{$selector} {
+    transform: rotate(180deg);
+  }
+}

package/dist/mg-components/styles/navigation-button.scss

@@ -35,6 +35,7 @@ $navigation-button-column-gap: 1rem;
     background-color: unset;
     border: none;
     font-family: var(--font-family);
+    font-weight: 400;
     color: hsl(var(--#{$element}-color-hsl, var(--color-dark)));
     line-height: var(--line-height);
     text-decoration: none;
@@ -44,7 +45,7 @@ $navigation-button-column-gap: 1rem;
     &:disabled,
     &--disabled {
       cursor: default;
-      opacity: 0.3;
+      opacity: var(--mg-disabled-opacity);
     }
     &:focus-visible {
       z-index: 10;

package/dist/mg-components/variables.css

@@ -102,6 +102,7 @@
     Global
    */
   --default-size: 3.5rem;
+  --mg-disabled-opacity: 0.4;
 
   /*
     <mg-icon>
@@ -117,7 +118,7 @@
 
   --mg-button-border-radius: 0.3rem;
   --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: 0.6;
+  --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 */
 

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

@@ -143,7 +143,7 @@ export declare class MgInputTextarea {
   private handleBlur;
   /**
    * Get pattern validity
-   * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+   * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
    *
    * @returns {boolean} is pattern valid
    */

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

@@ -83,7 +83,7 @@ export declare class MgMenuItem {
   /**
    * Does an Element have given Status
    *
-   * @param {Element} element to parse
+   * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
    * @param {MgMenuItem['status']} status to check
    * @returns {boolean} true if element with status is found
    */
@@ -119,6 +119,12 @@ export declare class MgMenuItem {
    * @returns {void} update displayNotificationBadge value
    */
   private updateDisplayNotificationBadge;
+  /**
+   * Method to control if one of component children have active status
+   *
+   * @returns {boolean} truthy if component has active child
+   */
+  private hasActiveChild;
   /*************
    * Lifecycle *
    *************/

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

@@ -0,0 +1,42 @@
+import { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import { MgButton } from '../../atoms/mg-button/mg-button';
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+import { MgMenuItem } from '../menu/mg-menu-item/mg-menu-item';
+/**
+ * prop icon type
+ */
+export type MgActionMoreIconType = {
+  icon: MgIcon['icon'];
+};
+/**
+ * prop button type
+ */
+export type MgActionMoreButtonType = {
+  isIcon: MgButton['isIcon'];
+  variant: MgButton['variant'];
+  label?: MgButton['label'];
+};
+/**
+ * locals message type
+ */
+export type MgActionMoreMessageType = {
+  label: string;
+};
+/**
+ * prop item type
+ */
+export type MgActionMoreItemType = {
+  label: string;
+  mouseEventHandler: IMouseEventHandler;
+  status?: MgMenuItem['status'];
+  icon?: MgIcon['icon'];
+  href?: MgMenuItem['href'];
+  badge?: Pick<MgBadge, 'value' | 'label'>;
+};
+/**
+ * MouseEvent callback interface
+ */
+interface IMouseEventHandler {
+  (event: MouseEvent): void;
+}
+export {};

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

@@ -0,0 +1,81 @@
+import { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType } from './mg-action-more.conf';
+export declare class MgActionMore {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private readonly mgPopoverIdentifier;
+  private messages;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgActionMoreElement;
+  /**
+   * Define displaied icon
+   * Default: {icon: 'ellipsis'}
+   */
+  icon: MgActionMoreIconType;
+  validateIcon(newValue: MgActionMore['icon']): void;
+  /**
+   * Define button properties
+   * Default: {variant: 'flat', isIcon: true}.
+   */
+  button: MgActionMoreButtonType;
+  validateButton(newValue: MgActionMore['button']): void;
+  /**
+   * Define the menu-items elements
+   */
+  items: MgActionMoreItemType[];
+  validateItems(newValue: MgActionMore['items']): void;
+  /**
+   * Define if chevron is display
+   */
+  displayChevron: boolean;
+  validateDisplayChevron(newValue: MgActionMore['displayChevron']): void;
+  /**
+   * Menu expanded state
+   * Default: false.
+   */
+  expanded: boolean;
+  /************
+   * Merthods *
+   ***********/
+  /**
+   * Toogle expanded props
+   *
+   * @returns {void}
+   */
+  private toggleExpanded;
+  /**
+   * Button click handler
+   *
+   * @returns {void}
+   */
+  private handleButton;
+  /**
+   * Item click handler
+   *
+   * @param {MouseEvent} event click event
+   * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
+   * @returns {void}
+   */
+  private handleItemClick;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -21,6 +21,10 @@ export declare class MgPagination {
    * Customize default value can be usefull to improve accessibility
    */
   label: string;
+  /**
+   * Hide navigation label
+   */
+  hideNavigationLabels: boolean;
   /**
    * Component total pages
    */

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from '@popperjs/core';
 import { ClassList } from '../../../utils/components.utils';
+import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
    * Internal *
@@ -9,6 +9,7 @@ export declare class MgPopover {
   private popover;
   private closeButtonId;
   private windows;
+  private resizeObserver;
   private messages;
   private readonly classArrowHide;
   /**************

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
 import { IconSizeType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
@@ -20,6 +21,24 @@ import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.con
 import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button": MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron": boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon": MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -942,6 +961,10 @@ export namespace Components {
           * Component current page
          */
         "currentPage": number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -1153,6 +1176,12 @@ export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
     target: HTMLMgTabsElement;
 }
 declare global {
+    interface HTMLMgActionMoreElement extends Components.MgActionMore, HTMLStencilElement {
+    }
+    var HTMLMgActionMoreElement: {
+        prototype: HTMLMgActionMoreElement;
+        new (): HTMLMgActionMoreElement;
+    };
     interface HTMLMgBadgeElement extends Components.MgBadge, HTMLStencilElement {
     }
     var HTMLMgBadgeElement: {
@@ -1334,6 +1363,7 @@ declare global {
         new (): HTMLMgTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "mg-action-more": HTMLMgActionMoreElement;
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-card": HTMLMgCardElement;
@@ -1367,6 +1397,24 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button"?: MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron"?: boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon"?: MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -2343,6 +2391,10 @@ declare namespace LocalJSX {
           * Component current page
          */
         "currentPage"?: number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -2501,6 +2553,7 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface IntrinsicElements {
+        "mg-action-more": MgActionMore;
         "mg-badge": MgBadge;
         "mg-button": MgButton;
         "mg-card": MgCard;
@@ -2537,6 +2590,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "mg-action-more": LocalJSX.MgActionMore & JSXBase.HTMLAttributes<HTMLMgActionMoreElement>;
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
             "mg-card": LocalJSX.MgCard & JSXBase.HTMLAttributes<HTMLMgCardElement>;

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

@@ -22,7 +22,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -55,6 +57,9 @@ declare const messages: {
       moreLabel: string;
       badgeLabel: string;
     };
+    actionMore: {
+      label: string;
+    };
   };
   fr: {
     errors: {
@@ -79,7 +84,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -112,16 +119,19 @@ declare const messages: {
       moreLabel: string;
       badgeLabel: string;
     };
+    actionMore: {
+      label: string;
+    };
   };
 };
 /**
  * Get Intl object
  *
  * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;
-  messages: unknown;
+  messages: Record<string, unknown>;
 };
 export {};

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

@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for

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

@@ -7,7 +7,7 @@ export declare class OverflowBehavior {
   private element;
   private render;
   private resizeObserver;
-  private moreELement;
+  private moreElement;
   private children;
   constructor(element: Element, render: () => HTMLElement);
   /**********
@@ -19,12 +19,6 @@ export declare class OverflowBehavior {
    * @returns {void}
    */
   disconnect: () => void;
-  /**
-   * Update more element status if active child
-   *
-   * @returns {void}
-   */
-  updateActiveStatus: () => void;
   /************
    * Internal *
    ************/

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

@@ -6,7 +6,7 @@
  * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-export declare function localeCurrency(number: number, locale: string, currency: string): string;
+export declare const localeCurrency: (number: number, locale: string, currency: string) => string;
 /**
  * Format number to locale
  *
@@ -14,7 +14,7 @@ export declare function localeCurrency(number: number, locale: string, currency:
  * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-export declare function localeNumber(number: number, locale: string): string;
+export declare const localeNumber: (number: number, locale: string) => string;
 /**
  * Date RegExp
  */
@@ -26,7 +26,7 @@ export declare const dateRegExp: RegExp;
  * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-export declare function localeDate(date: string, locale: string): string;
+export declare const localeDate: (date: string, locale: string) => string;
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
@@ -34,9 +34,9 @@ export declare function localeDate(date: string, locale: string): string;
  * @param {HTMLElement} element element we need to get the language
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
   locale: string;
-  messages: unknown;
+  messages: Record<string, unknown>;
 };

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

@@ -70,9 +70,27 @@ export declare const setupResizeObserverMock: ({ disconnect, observe }: setupRes
 /**
  * force popover id when component use randomed identifier
  *
- * @param {Element} item element wich include mg-popover
+ * @param {Element} component element wich include mg-popover
  * @param {string} id new fixed id
+ * @param {string} interactiveElement element where attribute 'aria-controls' is set
  * @returns {void}
  */
-export declare const forcePopoverId: (item: Element, id: string) => void;
+export declare const forcePopoverId: (component: Element, id: string, interactiveElement?: string) => void;
+/**
+ * fix popper console.error in test
+ * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
+ * this is due to internal function isHTMLElement(), so we can not mock it directly.
+ * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
+ * so we only override the console.error side effect for this error
+ *
+ * @returns {void}
+ */
+export declare const mockConsoleError: () => void;
+/**
+ * Add missing window.frames property to test context
+ * usefull for component with iframe listeners, ex: mg-popover
+ *
+ * @returns {void}
+ */
+export declare const mockWindowFrames: () => void;
 export {};

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,
@@ -29,49 +29,50 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.21.0",
+    "@stencil/core": "^2.22.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/plugin-transform-react-jsx": "^7.20.7",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/html": "^6.5.15",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/html": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@types/jest-image-snapshot": "^4.3.2",
+    "@types/node": "^18.14.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
-    "chromatic": "^6.14.0",
+    "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
     "eslint": "^7.32.0",
     "eslint-plugin-jsdoc": "^38.1.6",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.10",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^13.2.0",
-    "jsx-dom": "^8.0.3",
+    "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "puppeteer": "^13.7.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "turbo": "^1.7.0",
+    "turbo": "^1.8.1",
     "typescript": "~4.4.4"
   },
   "license": "BSD-3-Clause",
@@ -85,7 +86,7 @@
     "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
     "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
     "test": "TZ=UTC stencil test --spec --e2e",
-    "test:unit": "TZ=UTC stencil test --spec",
+    "test:unit": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",

package/readme.md

@@ -102,24 +102,6 @@ When a selector contains too many declaration it is recommended to organize them
 }
 ```
 
-### Accessibility
-
-A good pratice is to manage hover, focus and active state at the same place.
-
-```SCSS
-/* SCSS */
-button {
-  &:hover, &:focus, &:active {
-    text-decoration: underline;
-  }
-}
-
-/* CSS */
-button:hover, button:focus, button:active {
-  text-decoration: underline;
-}
-```
-
 ## Storybook
 
 The plugin [storybook-addon-docs-stencil