@madgex/design-system 13.5.0 → 13.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/js/index.js CHANGED
@@ -1 +1 @@
1
- import{M as xt}from"./dropdown-nav-DGGzV21D.js";import{M as Et}from"./timeout-dialog-plrFUmdZ.js";import{M as Ot}from"./image-cropper-BlqRRHAU.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const it={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},st={size:it},Ct="js-tabs-item",Ve="mds-tabs",Lt="mds-tabs__list",kt="mds-tabs__list-item",Ue="mds-tabs__panel",pe="mds-tabs__tab",me="mds-tabs__tab--selected",Xe="mds-tabs__panel--hidden",ve={left:37,right:39,up:38,down:40},St=".js-desktop-tabbed",Tt=".js-full-tabbed",$t=parseInt(st.size.breakpoint.lg.$value,10),E={init:()=>{E.setTabs(Tt),window.innerWidth>$t&&E.setTabs(St)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${pe}`)),r=Array.from(document.querySelectorAll(`${t} .${Lt}`)),o=Array.from(document.querySelectorAll(`${t} .${kt}`)),n=Array.from(document.querySelectorAll(`${t} .${Ue}`));r.forEach(a=>{a.setAttribute("role","tablist")}),o.forEach(a=>{a.setAttribute("role","presentation")}),e.forEach(a=>{a.setAttribute("role","tab"),a.setAttribute("aria-controls",a.attributes.href.value.substring(1)),a.classList.contains(me)?a.setAttribute("tabindex","0"):a.setAttribute("tabindex","-1")}),n.forEach(a=>{a.setAttribute("role","tabpanel"),a.setAttribute("aria-labelledby",`label-${a.attributes.id.value}`)});const i=document.querySelectorAll(`${t} .${Ct}`);Array.from(i).forEach(a=>{const l=window.location.hash.trim(),d=a.attributes.href.value,c=a.closest(`.${Ve}`),p=E.getAllPanels(c),u=E.getAllTabs(c),m=E.getTargetPanel(a,c);a.addEventListener("click",v=>{v.preventDefault(),E.updateTabs(u,p,a,m,d)}),d===l&&E.updateTabs(u,p,a,m,d)}),r.forEach(a=>{const l=a.closest(`.${Ve}`),d=E.getAllPanels(l),c=E.getAllTabs(l);a.addEventListener("keydown",p=>{switch(p.keyCode){case ve.left:case ve.up:p.preventDefault(),E.moveTab(a,l,c,d,!1);break;case ve.right:case ve.down:p.preventDefault(),E.moveTab(a,l,c,d,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${me}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${pe}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${pe}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Ue}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${pe}`)),moveTab:(t,e,r,o,n)=>{const i=E.getSelectedTab(t),s=n?E.getNextTab(i):E.getPrevTab(i);if(s){const a=s.attributes.href.value,l=E.getTargetPanel(s,e);E.updateTabs(r,o,s,l,a,!1)}},updateTabs:(t,e,r,o,n)=>{E.clearAllTabs(t),E.setActiveTab(r),E.clearAllPanels(e),E.setActivePanel(o,n)},clearAllTabs:t=>{t.forEach(e=>{e.classList.remove(me),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")})},clearAllPanels:t=>{t.forEach(e=>{e.classList.add(Xe)})},setActiveTab:t=>{t.classList.add(me),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Xe),window.history.replaceState({},"",e)}},Pt="mds-accordion--breakpoint",Dt="mds-accordion__label",ct={init:()=>{const t=document.querySelectorAll(`.${Pt}`),e=window.innerWidth;t.forEach(o=>{ct.checkBreakpoint(o,e)||(o.open=!0,o.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Dt}`).forEach(o=>{o.addEventListener("click",({target:n})=>{const i=n.closest("details"),s=i.querySelector("summary");i.open=!1,s.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const o=t.dataset.bp.replace(/\D/g,""),n=t.dataset.bp.replace(/[0-9]/g,"");let i,s;switch(n){case"px":r=o;break;case"em":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;case"rem":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;default:return!0}return!(e>r)}return!0}},qt={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(n=>{const i=n.querySelector(".mds-subnavigation__link-list"),s=Array.from(i.children),a=s[0],l=n.querySelector(".mds-subnavigation__mobile-title"),d=n.querySelector(".mds-subnavigation__drawer"),c=n.querySelector(".mds-subnavigation__drawer-label"),p=n.querySelector(".mds-subnavigation__drawer-label-text"),u=n.querySelector(".mds-subnavigation__drawer-content"),m=d.dataset.label,v=d.dataset.labelPlural;c.addEventListener("click",()=>{c.getAttribute("aria-expanded")==="true"?c.setAttribute("aria-expanded","false"):c.setAttribute("aria-expanded","true")}),d.addEventListener("focusout",h=>{d.contains(h.relatedTarget)||c.setAttribute("aria-expanded","false")});const g=()=>i.clientHeight>a.offsetHeight;e.push(()=>{c.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(s.forEach(b=>{i.append(b)}),d.style.display="none",g()&&(d.style.display="list-item",s.slice().reverse().forEach(b=>{if(g()&&b!==d){u.prepend(b);const y=Array.from(u.children).length,A=y>1?v:m;p.innerText=A.replace("{count}",y)}else i.prepend(b)}),u.style.width=`${i.offsetWidth-d.offsetLeft}px`)):(s.forEach(b=>{b!==d&&b!==l&&u.append(b)}),u.style.width="initial",d.style.display="block")})});const o=()=>{e.forEach(n=>{n()})};o(),window.onresize=()=>{clearTimeout(r),r=setTimeout(o,100)}}},Bt="mds-checkbox-accordion__button",jt="mds-checkbox-accordion__button--open",Mt={init:()=>{document.querySelectorAll(`.${Bt}`).forEach(e=>{e.classList.contains(jt)?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false"),e.addEventListener("click",()=>{e.getAttribute("aria-expanded")==="true"?e.setAttribute("aria-expanded","false"):e.setAttribute("aria-expanded","true")})})}};var T="top",P="bottom",D="right",$="left",Pe="auto",se=[T,P,D,$],G="start",De="end",Rt="clippingParents",lt="viewport",ee="popper",Wt="reference",Ye=se.reduce(function(t,e){return t.concat([e+"-"+G,e+"-"+De])},[]),dt=[].concat(se,[Pe]).reduce(function(t,e){return t.concat([e,e+"-"+G,e+"-"+De])},[]),It="beforeRead",_t="read",Ht="afterRead",Nt="beforeMain",Ft="main",zt="afterMain",Vt="beforeWrite",Ut="write",Xt="afterWrite",Yt=[It,_t,Ht,Nt,Ft,zt,Vt,Ut,Xt];function W(t){return t?(t.nodeName||"").toLowerCase():null}function B(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function ne(t){var e=B(t).Element;return t instanceof e||t instanceof Element}function q(t){var e=B(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function ft(t){if(typeof ShadowRoot>"u")return!1;var e=B(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function Jt(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var o=e.styles[r]||{},n=e.attributes[r]||{},i=e.elements[r];!q(i)||!W(i)||(Object.assign(i.style,o),Object.keys(n).forEach(function(s){var a=n[s];a===!1?i.removeAttribute(s):i.setAttribute(s,a===!0?"":a)}))})}function Kt(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(o){var n=e.elements[o],i=e.attributes[o]||{},s=Object.keys(e.styles.hasOwnProperty(o)?e.styles[o]:r[o]),a=s.reduce(function(l,d){return l[d]="",l},{});!q(n)||!W(n)||(Object.assign(n.style,a),Object.keys(i).forEach(function(l){n.removeAttribute(l)}))})}}const Gt={name:"applyStyles",enabled:!0,phase:"write",fn:Jt,effect:Kt,requires:["computeStyles"]};function R(t){return t.split("-")[0]}function Q(t){var e=t.getBoundingClientRect();return{width:e.width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function qe(t){var e=Q(t),r=t.offsetWidth,o=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-o)<=1&&(o=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:o}}function ut(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&ft(r)){var o=e;do{if(o&&t.isSameNode(o))return!0;o=o.parentNode||o.host}while(o)}return!1}function _(t){return B(t).getComputedStyle(t)}function Qt(t){return["table","td","th"].indexOf(W(t))>=0}function N(t){return((ne(t)?t.ownerDocument:t.document)||window.document).documentElement}function xe(t){return W(t)==="html"?t:t.assignedSlot||t.parentNode||(ft(t)?t.host:null)||N(t)}function Je(t){return!q(t)||_(t).position==="fixed"?null:t.offsetParent}function Zt(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&q(t)){var o=_(t);if(o.position==="fixed")return null}for(var n=xe(t);q(n)&&["html","body"].indexOf(W(n))<0;){var i=_(n);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||e&&i.willChange==="filter"||e&&i.filter&&i.filter!=="none")return n;n=n.parentNode}return null}function ce(t){for(var e=B(t),r=Je(t);r&&Qt(r)&&_(r).position==="static";)r=Je(r);return r&&(W(r)==="html"||W(r)==="body"&&_(r).position==="static")?e:r||Zt(t)||e}function Be(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var H=Math.max,oe=Math.min,he=Math.round;function we(t,e,r){return H(t,oe(e,r))}function pt(){return{top:0,right:0,bottom:0,left:0}}function mt(t){return Object.assign({},pt(),t)}function vt(t,e){return e.reduce(function(r,o){return r[o]=t,r},{})}var er=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,mt(typeof e!="number"?e:vt(e,se))};function tr(t){var e,r=t.state,o=t.name,n=t.options,i=r.elements.arrow,s=r.modifiersData.popperOffsets,a=R(r.placement),l=Be(a),d=[$,D].indexOf(a)>=0,c=d?"height":"width";if(!(!i||!s)){var p=er(n.padding,r),u=qe(i),m=l==="y"?T:$,v=l==="y"?P:D,g=r.rects.reference[c]+r.rects.reference[l]-s[l]-r.rects.popper[c],h=s[l]-r.rects.reference[l],b=ce(i),y=b?l==="y"?b.clientHeight||0:b.clientWidth||0:0,A=g/2-h/2,f=p[m],C=y-u[c]-p[v],w=y/2-u[c]/2+A,O=we(f,w,C),x=l;r.modifiersData[o]=(e={},e[x]=O,e.centerOffset=O-w,e)}}function rr(t){var e=t.state,r=t.options,o=r.element,n=o===void 0?"[data-popper-arrow]":o;n!=null&&(typeof n=="string"&&(n=e.elements.popper.querySelector(n),!n)||ut(e.elements.popper,n)&&(e.elements.arrow=n))}const nr={name:"arrow",enabled:!0,phase:"main",fn:tr,effect:rr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var or={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ar(t){var e=t.x,r=t.y,o=window,n=o.devicePixelRatio||1;return{x:he(he(e*n)/n)||0,y:he(he(r*n)/n)||0}}function Ke(t){var e,r=t.popper,o=t.popperRect,n=t.placement,i=t.offsets,s=t.position,a=t.gpuAcceleration,l=t.adaptive,d=t.roundOffsets,c=d===!0?ar(i):typeof d=="function"?d(i):i,p=c.x,u=p===void 0?0:p,m=c.y,v=m===void 0?0:m,g=i.hasOwnProperty("x"),h=i.hasOwnProperty("y"),b=$,y=T,A=window;if(l){var f=ce(r),C="clientHeight",w="clientWidth";f===B(r)&&(f=N(r),_(f).position!=="static"&&(C="scrollHeight",w="scrollWidth")),f=f,n===T&&(y=P,v-=f[C]-o.height,v*=a?1:-1),n===$&&(b=D,u-=f[w]-o.width,u*=a?1:-1)}var O=Object.assign({position:s},l&&or);if(a){var x;return Object.assign({},O,(x={},x[y]=h?"0":"",x[b]=g?"0":"",x.transform=(A.devicePixelRatio||1)<2?"translate("+u+"px, "+v+"px)":"translate3d("+u+"px, "+v+"px, 0)",x))}return Object.assign({},O,(e={},e[y]=h?v+"px":"",e[b]=g?u+"px":"",e.transform="",e))}function ir(t){var e=t.state,r=t.options,o=r.gpuAcceleration,n=o===void 0?!0:o,i=r.adaptive,s=i===void 0?!0:i,a=r.roundOffsets,l=a===void 0?!0:a,d={placement:R(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:n};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ke(Object.assign({},d,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:s,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ke(Object.assign({},d,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const sr={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:ir,data:{}};var be={passive:!0};function cr(t){var e=t.state,r=t.instance,o=t.options,n=o.scroll,i=n===void 0?!0:n,s=o.resize,a=s===void 0?!0:s,l=B(e.elements.popper),d=[].concat(e.scrollParents.reference,e.scrollParents.popper);return i&&d.forEach(function(c){c.addEventListener("scroll",r.update,be)}),a&&l.addEventListener("resize",r.update,be),function(){i&&d.forEach(function(c){c.removeEventListener("scroll",r.update,be)}),a&&l.removeEventListener("resize",r.update,be)}}const lr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:cr,data:{}};var dr={left:"right",right:"left",bottom:"top",top:"bottom"};function Ae(t){return t.replace(/left|right|bottom|top/g,function(e){return dr[e]})}var fr={start:"end",end:"start"};function Ge(t){return t.replace(/start|end/g,function(e){return fr[e]})}function je(t){var e=B(t),r=e.pageXOffset,o=e.pageYOffset;return{scrollLeft:r,scrollTop:o}}function Me(t){return Q(N(t)).left+je(t).scrollLeft}function ur(t){var e=B(t),r=N(t),o=e.visualViewport,n=r.clientWidth,i=r.clientHeight,s=0,a=0;return o&&(n=o.width,i=o.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(s=o.offsetLeft,a=o.offsetTop)),{width:n,height:i,x:s+Me(t),y:a}}function pr(t){var e,r=N(t),o=je(t),n=(e=t.ownerDocument)==null?void 0:e.body,i=H(r.scrollWidth,r.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),s=H(r.scrollHeight,r.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0),a=-o.scrollLeft+Me(t),l=-o.scrollTop;return _(n||r).direction==="rtl"&&(a+=H(r.clientWidth,n?n.clientWidth:0)-i),{width:i,height:s,x:a,y:l}}function Re(t){var e=_(t),r=e.overflow,o=e.overflowX,n=e.overflowY;return/auto|scroll|overlay|hidden/.test(r+n+o)}function ht(t){return["html","body","#document"].indexOf(W(t))>=0?t.ownerDocument.body:q(t)&&Re(t)?t:ht(xe(t))}function re(t,e){var r;e===void 0&&(e=[]);var o=ht(t),n=o===((r=t.ownerDocument)==null?void 0:r.body),i=B(o),s=n?[i].concat(i.visualViewport||[],Re(o)?o:[]):o,a=e.concat(s);return n?a:a.concat(re(xe(s)))}function Se(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function mr(t){var e=Q(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function Qe(t,e){return e===lt?Se(ur(t)):q(e)?mr(e):Se(pr(N(t)))}function vr(t){var e=re(xe(t)),r=["absolute","fixed"].indexOf(_(t).position)>=0,o=r&&q(t)?ce(t):t;return ne(o)?e.filter(function(n){return ne(n)&&ut(n,o)&&W(n)!=="body"}):[]}function hr(t,e,r){var o=e==="clippingParents"?vr(t):[].concat(e),n=[].concat(o,[r]),i=n[0],s=n.reduce(function(a,l){var d=Qe(t,l);return a.top=H(d.top,a.top),a.right=oe(d.right,a.right),a.bottom=oe(d.bottom,a.bottom),a.left=H(d.left,a.left),a},Qe(t,i));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function ae(t){return t.split("-")[1]}function bt(t){var e=t.reference,r=t.element,o=t.placement,n=o?R(o):null,i=o?ae(o):null,s=e.x+e.width/2-r.width/2,a=e.y+e.height/2-r.height/2,l;switch(n){case T:l={x:s,y:e.y-r.height};break;case P:l={x:s,y:e.y+e.height};break;case D:l={x:e.x+e.width,y:a};break;case $:l={x:e.x-r.width,y:a};break;default:l={x:e.x,y:e.y}}var d=n?Be(n):null;if(d!=null){var c=d==="y"?"height":"width";switch(i){case G:l[d]=l[d]-(e[c]/2-r[c]/2);break;case De:l[d]=l[d]+(e[c]/2-r[c]/2);break}}return l}function ie(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=o===void 0?t.placement:o,i=r.boundary,s=i===void 0?Rt:i,a=r.rootBoundary,l=a===void 0?lt:a,d=r.elementContext,c=d===void 0?ee:d,p=r.altBoundary,u=p===void 0?!1:p,m=r.padding,v=m===void 0?0:m,g=mt(typeof v!="number"?v:vt(v,se)),h=c===ee?Wt:ee,b=t.elements.reference,y=t.rects.popper,A=t.elements[u?h:c],f=hr(ne(A)?A:A.contextElement||N(t.elements.popper),s,l),C=Q(b),w=bt({reference:C,element:y,placement:n}),O=Se(Object.assign({},y,w)),x=c===ee?O:C,L={top:f.top-x.top+g.top,bottom:x.bottom-f.bottom+g.bottom,left:f.left-x.left+g.left,right:x.right-f.right+g.right},S=t.modifiersData.offset;if(c===ee&&S){var j=S[n];Object.keys(L).forEach(function(I){var k=[D,P].indexOf(I)>=0?1:-1,F=[T,P].indexOf(I)>=0?"y":"x";L[I]+=j[F]*k})}return L}function br(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=r.boundary,i=r.rootBoundary,s=r.padding,a=r.flipVariations,l=r.allowedAutoPlacements,d=l===void 0?dt:l,c=ae(o),p=c?a?Ye:Ye.filter(function(v){return ae(v)===c}):se,u=p.filter(function(v){return d.indexOf(v)>=0});u.length===0&&(u=p);var m=u.reduce(function(v,g){return v[g]=ie(t,{placement:g,boundary:n,rootBoundary:i,padding:s})[R(g)],v},{});return Object.keys(m).sort(function(v,g){return m[v]-m[g]})}function gr(t){if(R(t)===Pe)return[];var e=Ae(t);return[Ge(t),e,Ge(e)]}function yr(t){var e=t.state,r=t.options,o=t.name;if(!e.modifiersData[o]._skip){for(var n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!0:s,l=r.fallbackPlacements,d=r.padding,c=r.boundary,p=r.rootBoundary,u=r.altBoundary,m=r.flipVariations,v=m===void 0?!0:m,g=r.allowedAutoPlacements,h=e.options.placement,b=R(h),y=b===h,A=l||(y||!v?[Ae(h)]:gr(h)),f=[h].concat(A).reduce(function(V,M){return V.concat(R(M)===Pe?br(e,{placement:M,boundary:c,rootBoundary:p,padding:d,flipVariations:v,allowedAutoPlacements:g}):M)},[]),C=e.rects.reference,w=e.rects.popper,O=new Map,x=!0,L=f[0],S=0;S<f.length;S++){var j=f[S],I=R(j),k=ae(j)===G,F=[T,P].indexOf(I)>=0,Z=F?"width":"height",U=ie(e,{placement:j,boundary:c,rootBoundary:p,altBoundary:u,padding:d}),z=F?k?D:$:k?P:T;C[Z]>w[Z]&&(z=Ae(z));var Ee=Ae(z),X=[];if(i&&X.push(U[I]<=0),a&&X.push(U[z]<=0,U[Ee]<=0),X.every(function(V){return V})){L=j,x=!1;break}O.set(j,X)}if(x)for(var le=v?3:1,Oe=function(M){var fe=f.find(function(Ce){var J=O.get(Ce);if(J)return J.slice(0,M).every(function(Le){return Le})});if(fe)return L=fe,"break"},Y=le;Y>0;Y--){var de=Oe(Y);if(de==="break")break}e.placement!==L&&(e.modifiersData[o]._skip=!0,e.placement=L,e.reset=!0)}}const wr={name:"flip",enabled:!0,phase:"main",fn:yr,requiresIfExists:["offset"],data:{_skip:!1}};function Ze(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function et(t){return[T,D,P,$].some(function(e){return t[e]>=0})}function Ar(t){var e=t.state,r=t.name,o=e.rects.reference,n=e.rects.popper,i=e.modifiersData.preventOverflow,s=ie(e,{elementContext:"reference"}),a=ie(e,{altBoundary:!0}),l=Ze(s,o),d=Ze(a,n,i),c=et(l),p=et(d);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:d,isReferenceHidden:c,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":p})}const xr={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Ar};function Er(t,e,r){var o=R(t),n=[$,T].indexOf(o)>=0?-1:1,i=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,s=i[0],a=i[1];return s=s||0,a=(a||0)*n,[$,D].indexOf(o)>=0?{x:a,y:s}:{x:s,y:a}}function Or(t){var e=t.state,r=t.options,o=t.name,n=r.offset,i=n===void 0?[0,0]:n,s=dt.reduce(function(c,p){return c[p]=Er(p,e.rects,i),c},{}),a=s[e.placement],l=a.x,d=a.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=d),e.modifiersData[o]=s}const Cr={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Or};function Lr(t){var e=t.state,r=t.name;e.modifiersData[r]=bt({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const kr={name:"popperOffsets",enabled:!0,phase:"read",fn:Lr,data:{}};function Sr(t){return t==="x"?"y":"x"}function Tr(t){var e=t.state,r=t.options,o=t.name,n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!1:s,l=r.boundary,d=r.rootBoundary,c=r.altBoundary,p=r.padding,u=r.tether,m=u===void 0?!0:u,v=r.tetherOffset,g=v===void 0?0:v,h=ie(e,{boundary:l,rootBoundary:d,padding:p,altBoundary:c}),b=R(e.placement),y=ae(e.placement),A=!y,f=Be(b),C=Sr(f),w=e.modifiersData.popperOffsets,O=e.rects.reference,x=e.rects.popper,L=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,S={x:0,y:0};if(w){if(i||a){var j=f==="y"?T:$,I=f==="y"?P:D,k=f==="y"?"height":"width",F=w[f],Z=w[f]+h[j],U=w[f]-h[I],z=m?-x[k]/2:0,Ee=y===G?O[k]:x[k],X=y===G?-x[k]:-O[k],le=e.elements.arrow,Oe=m&&le?qe(le):{width:0,height:0},Y=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:pt(),de=Y[j],V=Y[I],M=we(0,O[k],Oe[k]),fe=A?O[k]/2-z-M-de-L:Ee-M-de-L,Ce=A?-O[k]/2+z+M+V+L:X+M+V+L,J=e.elements.arrow&&ce(e.elements.arrow),Le=J?f==="y"?J.clientTop||0:J.clientLeft||0:0,We=e.modifiersData.offset?e.modifiersData.offset[e.placement][f]:0,Ie=w[f]+fe-We-Le,_e=w[f]+Ce-We;if(i){var He=we(m?oe(Z,Ie):Z,F,m?H(U,_e):U);w[f]=He,S[f]=He-F}if(a){var wt=f==="x"?T:$,At=f==="x"?P:D,ue=w[C],Ne=ue+h[wt],Fe=ue-h[At],ze=we(m?oe(Ne,Ie):Ne,ue,m?H(Fe,_e):Fe);w[C]=ze,S[C]=ze-ue}}e.modifiersData[o]=S}}const $r={name:"preventOverflow",enabled:!0,phase:"main",fn:Tr,requiresIfExists:["offset"]};function Pr(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Dr(t){return t===B(t)||!q(t)?je(t):Pr(t)}function qr(t,e,r){r===void 0&&(r=!1);var o=N(e),n=Q(t),i=q(e),s={scrollLeft:0,scrollTop:0},a={x:0,y:0};return(i||!i&&!r)&&((W(e)!=="body"||Re(o))&&(s=Dr(e)),q(e)?(a=Q(e),a.x+=e.clientLeft,a.y+=e.clientTop):o&&(a.x=Me(o))),{x:n.left+s.scrollLeft-a.x,y:n.top+s.scrollTop-a.y,width:n.width,height:n.height}}function Br(t){var e=new Map,r=new Set,o=[];t.forEach(function(i){e.set(i.name,i)});function n(i){r.add(i.name);var s=[].concat(i.requires||[],i.requiresIfExists||[]);s.forEach(function(a){if(!r.has(a)){var l=e.get(a);l&&n(l)}}),o.push(i)}return t.forEach(function(i){r.has(i.name)||n(i)}),o}function jr(t){var e=Br(t);return Yt.reduce(function(r,o){return r.concat(e.filter(function(n){return n.phase===o}))},[])}function Mr(t){var e;return function(){return e||(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Rr(t){var e=t.reduce(function(r,o){var n=r[o.name];return r[o.name]=n?Object.assign({},n,o,{options:Object.assign({},n.options,o.options),data:Object.assign({},n.data,o.data)}):o,r},{});return Object.keys(e).map(function(r){return e[r]})}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function rt(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(o){return!(o&&typeof o.getBoundingClientRect=="function")})}function Wr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,o=r===void 0?[]:r,n=e.defaultOptions,i=n===void 0?tt:n;return function(a,l,d){d===void 0&&(d=i);var c={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:a,popper:l},attributes:{},styles:{}},p=[],u=!1,m={state:c,setOptions:function(b){g(),c.options=Object.assign({},i,c.options,b),c.scrollParents={reference:ne(a)?re(a):a.contextElement?re(a.contextElement):[],popper:re(l)};var y=jr(Rr([].concat(o,c.options.modifiers)));return c.orderedModifiers=y.filter(function(A){return A.enabled}),v(),m.update()},forceUpdate:function(){if(!u){var b=c.elements,y=b.reference,A=b.popper;if(rt(y,A)){c.rects={reference:qr(y,ce(A),c.options.strategy==="fixed"),popper:qe(A)},c.reset=!1,c.placement=c.options.placement,c.orderedModifiers.forEach(function(S){return c.modifiersData[S.name]=Object.assign({},S.data)});for(var f=0;f<c.orderedModifiers.length;f++){if(c.reset===!0){c.reset=!1,f=-1;continue}var C=c.orderedModifiers[f],w=C.fn,O=C.options,x=O===void 0?{}:O,L=C.name;typeof w=="function"&&(c=w({state:c,options:x,name:L,instance:m})||c)}}}},update:Mr(function(){return new Promise(function(h){m.forceUpdate(),h(c)})}),destroy:function(){g(),u=!0}};if(!rt(a,l))return m;m.setOptions(d).then(function(h){!u&&d.onFirstUpdate&&d.onFirstUpdate(h)});function v(){c.orderedModifiers.forEach(function(h){var b=h.name,y=h.options,A=y===void 0?{}:y,f=h.effect;if(typeof f=="function"){var C=f({state:c,name:b,instance:m,options:A}),w=function(){};p.push(C||w)}})}function g(){p.forEach(function(h){return h()}),p=[]}return m}}var Ir=[lr,kr,sr,Gt,Cr,wr,$r,nr,xr],_r=Wr({defaultModifiers:Ir});const Hr=parseInt(it.baseline.$value,10),Nr="js-mds-popover-trigger",ge="mds-popover--active",te={init:()=>{Array.from(document.querySelectorAll(`.${Nr}`)).forEach(e=>{const o=`${e.getAttribute("id")}-content`,n=document.getElementById(o),i=n.dataset?n.dataset.placement:null,s=_r(e,n,{placement:i||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,Hr*3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),e.addEventListener("click",a=>{a.preventDefault(),s.update(),n.classList.toggle(ge),te.setAriaAttr(e,n,ge)}),document.addEventListener("mousedown",a=>{te.hide(e,n,s,ge,a)}),document.addEventListener("keydown",a=>{te.hide(e,n,s,ge,a)})})},hide:(t,e,r,o,n)=>{!t.contains(n.target)&&!r.state.elements.popper.contains(n.target)&&e.classList.contains(o)&&(e.classList.remove(o),te.setAriaAttr(t,e,o))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Fr=parseInt(st.size.breakpoint.md.$value,10),nt="data-modal-id",ot="mds-modal--active",zr="js-mds-modal-close";let ye;const K={init:()=>{window.innerWidth>Fr&&Array.from(document.querySelectorAll(`[${nt}]`)).forEach(r=>{const o=r.getAttribute(nt),n=document.getElementById(o),i=Array.from(n.querySelectorAll(`.${zr}`)),s=n.getAttribute("data-site-container"),a=document.getElementById(s);let d=n.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');d=Array.prototype.slice.call(d);const c=d[0],p=d[d.length-1];r.addEventListener("click",u=>{u.preventDefault(),K.open(n,c,a)}),n.addEventListener("click",u=>{u.target===n&&K.close(n,ye,a)}),n.addEventListener("keydown",u=>{K.trapFocus(u,c,p),(u.key==="Escape"||u.key==="Esc")&&K.close(n,ye,a)}),i.forEach(u=>{u.addEventListener("click",()=>{K.close(n,ye,a)})})})},open:(t,e,r)=>{ye=document.activeElement,t.classList.add(ot),e.focus(),r.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r.removeAttribute("aria-hidden"),t.classList.remove(ot),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}},Vr=".mds-form-element--file",ke="mds-form-element--selected-file",at="mds-form-element--dragover",Ur=".mds-file-upload__file-name",Xr=".mds-file-upload__remove-button",Yr="mds-form-element--file-supported",gt={init:()=>{gt.isBrowserIE()||Array.from(document.querySelectorAll(Vr)).forEach(e=>{e.classList.add(Yr);const r=e.querySelector(Ur),o=e.querySelector("input[type=file]"),n=e.querySelector(Xr);document.addEventListener("readystatechange",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke))}),o.addEventListener("change",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke),n.focus())}),n.addEventListener("click",i=>{i.preventDefault(),o.value="",r.textContent="",e.classList.remove(ke),o.focus()}),["dragover","dragenter"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.add(at)})}),["dragleave","dragend","drop"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.remove(at)})})})},isBrowserIE:()=>!!window.document.documentMode},Jr=".mds-form-element--character-count",Kr=".mds-form-message--character-count",Gr=".js-character-count-number",Qr=".mds-form-control",Te={init:()=>{Array.from(document.querySelectorAll(Jr)).forEach(e=>{const r=e.querySelector(Qr),o=r.getAttribute("maxlength"),n=e.querySelector(Kr),i=e.querySelector(Gr);r.removeAttribute("maxlength"),Te.updateCounter(r,o,i,n),r.addEventListener("keyup",s=>{s.stopPropagation(),Te.updateCounter(r,o,i,n)})})},updateCounter:(t,e,r,o)=>{const n=t.value.match(/(\r\n|\n|\r)/g),i=t.value.length+(n?n.length:0),s=e-i;r.textContent=s,s<0?o.classList.add("mds-form-message--error"):o.classList.remove("mds-form-message--error")}},Zr="js-mds-button-double-submit",yt={init:()=>{Array.from(document.querySelectorAll(`.${Zr}`)).forEach(e=>{e.addEventListener("click",()=>{yt.toggleDisable(e)})})},toggleDisable:t=>{setTimeout(()=>{t.setAttribute("disabled","")},1),setTimeout(()=>{t.removeAttribute("disabled")},1e3)}},en={setFluidVideos:()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach(e=>{const r=document.createElement("div");r.classList.add("mds-fluid-video"),r.innerHTML=e.outerHTML,e.replaceWith(r)})}};class tn extends HTMLElement{connectedCallback(){const r=this.querySelector(".mds-card-link__link");let o;this.onmousedown=()=>{o=+new Date},this.onmouseup=()=>{+new Date-o<200&&r.click(),o=void 0}}disconnectedCallback(){this.onmousedown=this.onmouseup=null}}class rn extends HTMLElement{static observedAttributes=["form","field-name","show-when"];showHide=()=>{const{field:e}=this,r=this.getAttribute("show-when");(e.type==="checkbox"?e.checked.toString():e.value.toString())===r?this.hidden=!1:this.hidden=!0};setup=()=>{this.cleanup();const e=this.getAttribute("form"),r=this.getAttribute("field-name");if(this.formElement=e?document.querySelector(e):this.closest("form"),!this.formElement)throw new Error(`<mds-conditional-section> for ${r} could not find the associated form`);if(this.field=this.formElement.elements[r],!this.field)throw new Error(`<mds-conditional-section> for ${r} could not find the associated field`);this.showHide(),this.formElement.addEventListener("input",this.showHide)};connectedCallback(){this.setup()}cleanup=()=>{this.formElement?.removeEventListener("input",this.showHide)};disconnectedCallback(){this.cleanup()}attributeChangedCallback(e,r,o){const{showHide:n,setup:i}=this;this.isConnected&&r!==o&&(e==="show-when"?n():(e==="field-name"||e==="form")&&i())}}window.customElements.get("mds-dropdown-nav")||window.customElements.define("mds-dropdown-nav",xt);window.customElements.get("mds-timeout-dialog")||window.customElements.define("mds-timeout-dialog",Et);window.customElements.get("mds-card-link")||window.customElements.define("mds-card-link",tn);window.customElements.get("mds-conditional-section")||window.customElements.define("mds-conditional-section",rn);window.customElements.get("mds-image-cropper")||window.customElements.define("mds-image-cropper",Ot);const $e=()=>{E.init(),ct.init(),qt.init(),Mt.init(),K.init(),gt.init(),Te.init(),te.init(),yt.init(),en.setFluidVideos()};window.mdgxInitAll=$e;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",$e):$e();
1
+ import{M as Ot}from"./dropdown-nav-DGGzV21D.js";import{M as Tt}from"./timeout-dialog-plrFUmdZ.js";import{M as Pt}from"./image-cropper-BlqRRHAU.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const ft={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},pt={size:ft},qt="js-tabs-item",Ye="mds-tabs",$t="mds-tabs__list",Dt="mds-tabs__list-item",Je="mds-tabs__panel",me="mds-tabs__tab",he="mds-tabs__tab--selected",Ke="mds-tabs__panel--hidden",ve={left:37,right:39,up:38,down:40},_t=".js-desktop-tabbed",Bt=".js-full-tabbed",Mt=parseInt(pt.size.breakpoint.lg.$value,10),x={init:()=>{x.setTabs(Bt),window.innerWidth>Mt&&x.setTabs(_t)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${me}`)),r=Array.from(document.querySelectorAll(`${t} .${$t}`)),n=Array.from(document.querySelectorAll(`${t} .${Dt}`)),o=Array.from(document.querySelectorAll(`${t} .${Je}`));r.forEach(i=>{i.setAttribute("role","tablist")}),n.forEach(i=>{i.setAttribute("role","presentation")}),e.forEach(i=>{i.setAttribute("role","tab"),i.setAttribute("aria-controls",i.attributes.href.value.substring(1)),i.classList.contains(he)?i.setAttribute("tabindex","0"):i.setAttribute("tabindex","-1")}),o.forEach(i=>{i.setAttribute("role","tabpanel"),i.setAttribute("aria-labelledby",`label-${i.attributes.id.value}`)});const s=document.querySelectorAll(`${t} .${qt}`);Array.from(s).forEach(i=>{const l=window.location.hash.trim(),c=i.attributes.href.value,d=i.closest(`.${Ye}`),p=x.getAllPanels(d),f=x.getAllTabs(d),m=x.getTargetPanel(i,d);i.addEventListener("click",h=>{h.preventDefault(),x.updateTabs(f,p,i,m,c)}),c===l&&x.updateTabs(f,p,i,m,c)}),r.forEach(i=>{const l=i.closest(`.${Ye}`),c=x.getAllPanels(l),d=x.getAllTabs(l);i.addEventListener("keydown",p=>{switch(p.keyCode){case ve.left:case ve.up:p.preventDefault(),x.moveTab(i,l,d,c,!1);break;case ve.right:case ve.down:p.preventDefault(),x.moveTab(i,l,d,c,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${he}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${me}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${me}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Je}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${me}`)),moveTab:(t,e,r,n,o)=>{const s=x.getSelectedTab(t),a=o?x.getNextTab(s):x.getPrevTab(s);if(a){const i=a.attributes.href.value,l=x.getTargetPanel(a,e);x.updateTabs(r,n,a,l,i,!1)}},updateTabs:(t,e,r,n,o)=>{x.clearAllTabs(t),x.setActiveTab(r),x.clearAllPanels(e),x.setActivePanel(n,o)},clearAllTabs:t=>{t.forEach(e=>{e.classList.remove(he),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")})},clearAllPanels:t=>{t.forEach(e=>{e.classList.add(Ke)})},setActiveTab:t=>{t.classList.add(he),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Ke),window.history.replaceState({},"",e)}},jt="mds-accordion--breakpoint",Rt="mds-accordion__label",mt={init:()=>{const t=document.querySelectorAll(`.${jt}`),e=window.innerWidth;t.forEach(n=>{mt.checkBreakpoint(n,e)||(n.open=!0,n.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Rt}`).forEach(n=>{n.addEventListener("click",({target:o})=>{const s=o.closest("details"),a=s.querySelector("summary");s.open=!1,a.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const n=t.dataset.bp.replace(/\D/g,""),o=t.dataset.bp.replace(/[0-9]/g,"");let s,a;switch(o){case"px":r=n;break;case"em":s=window.getComputedStyle(document.querySelector("body"))["font-size"],a=n*parseFloat(s),r=a;break;case"rem":s=window.getComputedStyle(document.querySelector("body"))["font-size"],a=n*parseFloat(s),r=a;break;default:return!0}return!(e>r)}return!0}},It={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(o=>{const s=o.querySelector(".mds-subnavigation__link-list"),a=Array.from(s.children),i=a[0],l=o.querySelector(".mds-subnavigation__mobile-title"),c=o.querySelector(".mds-subnavigation__drawer"),d=o.querySelector(".mds-subnavigation__drawer-label"),p=o.querySelector(".mds-subnavigation__drawer-label-text"),f=o.querySelector(".mds-subnavigation__drawer-content"),m=c.dataset.label,h=c.dataset.labelPlural;d.addEventListener("click",()=>{d.getAttribute("aria-expanded")==="true"?d.setAttribute("aria-expanded","false"):d.setAttribute("aria-expanded","true")}),c.addEventListener("focusout",v=>{c.contains(v.relatedTarget)||d.setAttribute("aria-expanded","false")});const g=()=>s.clientHeight>i.offsetHeight;e.push(()=>{d.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(a.forEach(b=>{s.append(b)}),c.style.display="none",g()&&(c.style.display="list-item",a.slice().reverse().forEach(b=>{if(g()&&b!==c){f.prepend(b);const y=Array.from(f.children).length,A=y>1?h:m;p.innerText=A.replace("{count}",y)}else s.prepend(b)}),f.style.width=`${s.offsetWidth-c.offsetLeft}px`)):(a.forEach(b=>{b!==c&&b!==l&&f.append(b)}),f.style.width="initial",c.style.display="block")})});const n=()=>{e.forEach(o=>{o()})};n(),window.onresize=()=>{clearTimeout(r),r=setTimeout(n,100)}}},Wt="mds-checkbox-accordion__button",Ht="mds-checkbox-accordion__button--open",Nt={init:()=>{document.querySelectorAll(`.${Wt}`).forEach(e=>{e.classList.contains(Ht)?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false"),e.addEventListener("click",()=>{e.getAttribute("aria-expanded")==="true"?e.setAttribute("aria-expanded","false"):e.setAttribute("aria-expanded","true")})})}};var T="top",q="bottom",$="right",P="left",_e="auto",ce=[T,q,$,P],Q="start",Be="end",Ft="clippingParents",ht="viewport",te="popper",zt="reference",Ge=ce.reduce(function(t,e){return t.concat([e+"-"+Q,e+"-"+Be])},[]),vt=[].concat(ce,[_e]).reduce(function(t,e){return t.concat([e,e+"-"+Q,e+"-"+Be])},[]),Vt="beforeRead",Ut="read",Xt="afterRead",Yt="beforeMain",Jt="main",Kt="afterMain",Gt="beforeWrite",Qt="write",Zt="afterWrite",er=[Vt,Ut,Xt,Yt,Jt,Kt,Gt,Qt,Zt];function R(t){return t?(t.nodeName||"").toLowerCase():null}function _(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function oe(t){var e=_(t).Element;return t instanceof e||t instanceof Element}function D(t){var e=_(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function bt(t){if(typeof ShadowRoot>"u")return!1;var e=_(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function tr(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var n=e.styles[r]||{},o=e.attributes[r]||{},s=e.elements[r];!D(s)||!R(s)||(Object.assign(s.style,n),Object.keys(o).forEach(function(a){var i=o[a];i===!1?s.removeAttribute(a):s.setAttribute(a,i===!0?"":i)}))})}function rr(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(n){var o=e.elements[n],s=e.attributes[n]||{},a=Object.keys(e.styles.hasOwnProperty(n)?e.styles[n]:r[n]),i=a.reduce(function(l,c){return l[c]="",l},{});!D(o)||!R(o)||(Object.assign(o.style,i),Object.keys(s).forEach(function(l){o.removeAttribute(l)}))})}}const nr={name:"applyStyles",enabled:!0,phase:"write",fn:tr,effect:rr,requires:["computeStyles"]};function j(t){return t.split("-")[0]}function Z(t){var e=t.getBoundingClientRect();return{width:e.width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function Me(t){var e=Z(t),r=t.offsetWidth,n=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-n)<=1&&(n=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:n}}function gt(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&bt(r)){var n=e;do{if(n&&t.isSameNode(n))return!0;n=n.parentNode||n.host}while(n)}return!1}function W(t){return _(t).getComputedStyle(t)}function or(t){return["table","td","th"].indexOf(R(t))>=0}function F(t){return((oe(t)?t.ownerDocument:t.document)||window.document).documentElement}function xe(t){return R(t)==="html"?t:t.assignedSlot||t.parentNode||(bt(t)?t.host:null)||F(t)}function Qe(t){return!D(t)||W(t).position==="fixed"?null:t.offsetParent}function ir(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&D(t)){var n=W(t);if(n.position==="fixed")return null}for(var o=xe(t);D(o)&&["html","body"].indexOf(R(o))<0;){var s=W(o);if(s.transform!=="none"||s.perspective!=="none"||s.contain==="paint"||["transform","perspective"].indexOf(s.willChange)!==-1||e&&s.willChange==="filter"||e&&s.filter&&s.filter!=="none")return o;o=o.parentNode}return null}function le(t){for(var e=_(t),r=Qe(t);r&&or(r)&&W(r).position==="static";)r=Qe(r);return r&&(R(r)==="html"||R(r)==="body"&&W(r).position==="static")?e:r||ir(t)||e}function je(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var N=Math.max,ie=Math.min,be=Math.round;function Ae(t,e,r){return N(t,ie(e,r))}function yt(){return{top:0,right:0,bottom:0,left:0}}function wt(t){return Object.assign({},yt(),t)}function At(t,e){return e.reduce(function(r,n){return r[n]=t,r},{})}var sr=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,wt(typeof e!="number"?e:At(e,ce))};function ar(t){var e,r=t.state,n=t.name,o=t.options,s=r.elements.arrow,a=r.modifiersData.popperOffsets,i=j(r.placement),l=je(i),c=[P,$].indexOf(i)>=0,d=c?"height":"width";if(!(!s||!a)){var p=sr(o.padding,r),f=Me(s),m=l==="y"?T:P,h=l==="y"?q:$,g=r.rects.reference[d]+r.rects.reference[l]-a[l]-r.rects.popper[d],v=a[l]-r.rects.reference[l],b=le(s),y=b?l==="y"?b.clientHeight||0:b.clientWidth||0:0,A=g/2-v/2,u=p[m],S=y-f[d]-p[h],w=y/2-f[d]/2+A,k=Ae(u,w,S),E=l;r.modifiersData[n]=(e={},e[E]=k,e.centerOffset=k-w,e)}}function cr(t){var e=t.state,r=t.options,n=r.element,o=n===void 0?"[data-popper-arrow]":n;o!=null&&(typeof o=="string"&&(o=e.elements.popper.querySelector(o),!o)||gt(e.elements.popper,o)&&(e.elements.arrow=o))}const lr={name:"arrow",enabled:!0,phase:"main",fn:ar,effect:cr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var dr={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ur(t){var e=t.x,r=t.y,n=window,o=n.devicePixelRatio||1;return{x:be(be(e*o)/o)||0,y:be(be(r*o)/o)||0}}function Ze(t){var e,r=t.popper,n=t.popperRect,o=t.placement,s=t.offsets,a=t.position,i=t.gpuAcceleration,l=t.adaptive,c=t.roundOffsets,d=c===!0?ur(s):typeof c=="function"?c(s):s,p=d.x,f=p===void 0?0:p,m=d.y,h=m===void 0?0:m,g=s.hasOwnProperty("x"),v=s.hasOwnProperty("y"),b=P,y=T,A=window;if(l){var u=le(r),S="clientHeight",w="clientWidth";u===_(r)&&(u=F(r),W(u).position!=="static"&&(S="scrollHeight",w="scrollWidth")),u=u,o===T&&(y=q,h-=u[S]-n.height,h*=i?1:-1),o===P&&(b=$,f-=u[w]-n.width,f*=i?1:-1)}var k=Object.assign({position:a},l&&dr);if(i){var E;return Object.assign({},k,(E={},E[y]=v?"0":"",E[b]=g?"0":"",E.transform=(A.devicePixelRatio||1)<2?"translate("+f+"px, "+h+"px)":"translate3d("+f+"px, "+h+"px, 0)",E))}return Object.assign({},k,(e={},e[y]=v?h+"px":"",e[b]=g?f+"px":"",e.transform="",e))}function fr(t){var e=t.state,r=t.options,n=r.gpuAcceleration,o=n===void 0?!0:n,s=r.adaptive,a=s===void 0?!0:s,i=r.roundOffsets,l=i===void 0?!0:i,c={placement:j(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ze(Object.assign({},c,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ze(Object.assign({},c,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const pr={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:fr,data:{}};var ge={passive:!0};function mr(t){var e=t.state,r=t.instance,n=t.options,o=n.scroll,s=o===void 0?!0:o,a=n.resize,i=a===void 0?!0:a,l=_(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return s&&c.forEach(function(d){d.addEventListener("scroll",r.update,ge)}),i&&l.addEventListener("resize",r.update,ge),function(){s&&c.forEach(function(d){d.removeEventListener("scroll",r.update,ge)}),i&&l.removeEventListener("resize",r.update,ge)}}const hr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:mr,data:{}};var vr={left:"right",right:"left",bottom:"top",top:"bottom"};function Ee(t){return t.replace(/left|right|bottom|top/g,function(e){return vr[e]})}var br={start:"end",end:"start"};function et(t){return t.replace(/start|end/g,function(e){return br[e]})}function Re(t){var e=_(t),r=e.pageXOffset,n=e.pageYOffset;return{scrollLeft:r,scrollTop:n}}function Ie(t){return Z(F(t)).left+Re(t).scrollLeft}function gr(t){var e=_(t),r=F(t),n=e.visualViewport,o=r.clientWidth,s=r.clientHeight,a=0,i=0;return n&&(o=n.width,s=n.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(a=n.offsetLeft,i=n.offsetTop)),{width:o,height:s,x:a+Ie(t),y:i}}function yr(t){var e,r=F(t),n=Re(t),o=(e=t.ownerDocument)==null?void 0:e.body,s=N(r.scrollWidth,r.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=N(r.scrollHeight,r.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),i=-n.scrollLeft+Ie(t),l=-n.scrollTop;return W(o||r).direction==="rtl"&&(i+=N(r.clientWidth,o?o.clientWidth:0)-s),{width:s,height:a,x:i,y:l}}function We(t){var e=W(t),r=e.overflow,n=e.overflowX,o=e.overflowY;return/auto|scroll|overlay|hidden/.test(r+o+n)}function Et(t){return["html","body","#document"].indexOf(R(t))>=0?t.ownerDocument.body:D(t)&&We(t)?t:Et(xe(t))}function ne(t,e){var r;e===void 0&&(e=[]);var n=Et(t),o=n===((r=t.ownerDocument)==null?void 0:r.body),s=_(n),a=o?[s].concat(s.visualViewport||[],We(n)?n:[]):n,i=e.concat(a);return o?i:i.concat(ne(xe(a)))}function qe(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function wr(t){var e=Z(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function tt(t,e){return e===ht?qe(gr(t)):D(e)?wr(e):qe(yr(F(t)))}function Ar(t){var e=ne(xe(t)),r=["absolute","fixed"].indexOf(W(t).position)>=0,n=r&&D(t)?le(t):t;return oe(n)?e.filter(function(o){return oe(o)&&gt(o,n)&&R(o)!=="body"}):[]}function Er(t,e,r){var n=e==="clippingParents"?Ar(t):[].concat(e),o=[].concat(n,[r]),s=o[0],a=o.reduce(function(i,l){var c=tt(t,l);return i.top=N(c.top,i.top),i.right=ie(c.right,i.right),i.bottom=ie(c.bottom,i.bottom),i.left=N(c.left,i.left),i},tt(t,s));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function se(t){return t.split("-")[1]}function xt(t){var e=t.reference,r=t.element,n=t.placement,o=n?j(n):null,s=n?se(n):null,a=e.x+e.width/2-r.width/2,i=e.y+e.height/2-r.height/2,l;switch(o){case T:l={x:a,y:e.y-r.height};break;case q:l={x:a,y:e.y+e.height};break;case $:l={x:e.x+e.width,y:i};break;case P:l={x:e.x-r.width,y:i};break;default:l={x:e.x,y:e.y}}var c=o?je(o):null;if(c!=null){var d=c==="y"?"height":"width";switch(s){case Q:l[c]=l[c]-(e[d]/2-r[d]/2);break;case Be:l[c]=l[c]+(e[d]/2-r[d]/2);break}}return l}function ae(t,e){e===void 0&&(e={});var r=e,n=r.placement,o=n===void 0?t.placement:n,s=r.boundary,a=s===void 0?Ft:s,i=r.rootBoundary,l=i===void 0?ht:i,c=r.elementContext,d=c===void 0?te:c,p=r.altBoundary,f=p===void 0?!1:p,m=r.padding,h=m===void 0?0:m,g=wt(typeof h!="number"?h:At(h,ce)),v=d===te?zt:te,b=t.elements.reference,y=t.rects.popper,A=t.elements[f?v:d],u=Er(oe(A)?A:A.contextElement||F(t.elements.popper),a,l),S=Z(b),w=xt({reference:S,element:y,placement:o}),k=qe(Object.assign({},y,w)),E=d===te?k:S,L={top:u.top-E.top+g.top,bottom:E.bottom-u.bottom+g.bottom,left:u.left-E.left+g.left,right:E.right-u.right+g.right},O=t.modifiersData.offset;if(d===te&&O){var B=O[o];Object.keys(L).forEach(function(I){var C=[$,q].indexOf(I)>=0?1:-1,z=[T,q].indexOf(I)>=0?"y":"x";L[I]+=B[z]*C})}return L}function xr(t,e){e===void 0&&(e={});var r=e,n=r.placement,o=r.boundary,s=r.rootBoundary,a=r.padding,i=r.flipVariations,l=r.allowedAutoPlacements,c=l===void 0?vt:l,d=se(n),p=d?i?Ge:Ge.filter(function(h){return se(h)===d}):ce,f=p.filter(function(h){return c.indexOf(h)>=0});f.length===0&&(f=p);var m=f.reduce(function(h,g){return h[g]=ae(t,{placement:g,boundary:o,rootBoundary:s,padding:a})[j(g)],h},{});return Object.keys(m).sort(function(h,g){return m[h]-m[g]})}function kr(t){if(j(t)===_e)return[];var e=Ee(t);return[et(t),e,et(e)]}function Sr(t){var e=t.state,r=t.options,n=t.name;if(!e.modifiersData[n]._skip){for(var o=r.mainAxis,s=o===void 0?!0:o,a=r.altAxis,i=a===void 0?!0:a,l=r.fallbackPlacements,c=r.padding,d=r.boundary,p=r.rootBoundary,f=r.altBoundary,m=r.flipVariations,h=m===void 0?!0:m,g=r.allowedAutoPlacements,v=e.options.placement,b=j(v),y=b===v,A=l||(y||!h?[Ee(v)]:kr(v)),u=[v].concat(A).reduce(function(U,M){return U.concat(j(M)===_e?xr(e,{placement:M,boundary:d,rootBoundary:p,padding:c,flipVariations:h,allowedAutoPlacements:g}):M)},[]),S=e.rects.reference,w=e.rects.popper,k=new Map,E=!0,L=u[0],O=0;O<u.length;O++){var B=u[O],I=j(B),C=se(B)===Q,z=[T,q].indexOf(I)>=0,ee=z?"width":"height",X=ae(e,{placement:B,boundary:d,rootBoundary:p,altBoundary:f,padding:c}),V=z?C?$:P:C?q:T;S[ee]>w[ee]&&(V=Ee(V));var ke=Ee(V),Y=[];if(s&&Y.push(X[I]<=0),i&&Y.push(X[V]<=0,X[ke]<=0),Y.every(function(U){return U})){L=B,E=!1;break}k.set(B,Y)}if(E)for(var de=h?3:1,Se=function(M){var fe=u.find(function(Le){var K=k.get(Le);if(K)return K.slice(0,M).every(function(Ce){return Ce})});if(fe)return L=fe,"break"},J=de;J>0;J--){var ue=Se(J);if(ue==="break")break}e.placement!==L&&(e.modifiersData[n]._skip=!0,e.placement=L,e.reset=!0)}}const Lr={name:"flip",enabled:!0,phase:"main",fn:Sr,requiresIfExists:["offset"],data:{_skip:!1}};function rt(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function nt(t){return[T,$,q,P].some(function(e){return t[e]>=0})}function Cr(t){var e=t.state,r=t.name,n=e.rects.reference,o=e.rects.popper,s=e.modifiersData.preventOverflow,a=ae(e,{elementContext:"reference"}),i=ae(e,{altBoundary:!0}),l=rt(a,n),c=rt(i,o,s),d=nt(l),p=nt(c);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":p})}const Or={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Cr};function Tr(t,e,r){var n=j(t),o=[P,T].indexOf(n)>=0?-1:1,s=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,a=s[0],i=s[1];return a=a||0,i=(i||0)*o,[P,$].indexOf(n)>=0?{x:i,y:a}:{x:a,y:i}}function Pr(t){var e=t.state,r=t.options,n=t.name,o=r.offset,s=o===void 0?[0,0]:o,a=vt.reduce(function(d,p){return d[p]=Tr(p,e.rects,s),d},{}),i=a[e.placement],l=i.x,c=i.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=c),e.modifiersData[n]=a}const qr={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Pr};function $r(t){var e=t.state,r=t.name;e.modifiersData[r]=xt({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const Dr={name:"popperOffsets",enabled:!0,phase:"read",fn:$r,data:{}};function _r(t){return t==="x"?"y":"x"}function Br(t){var e=t.state,r=t.options,n=t.name,o=r.mainAxis,s=o===void 0?!0:o,a=r.altAxis,i=a===void 0?!1:a,l=r.boundary,c=r.rootBoundary,d=r.altBoundary,p=r.padding,f=r.tether,m=f===void 0?!0:f,h=r.tetherOffset,g=h===void 0?0:h,v=ae(e,{boundary:l,rootBoundary:c,padding:p,altBoundary:d}),b=j(e.placement),y=se(e.placement),A=!y,u=je(b),S=_r(u),w=e.modifiersData.popperOffsets,k=e.rects.reference,E=e.rects.popper,L=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,O={x:0,y:0};if(w){if(s||i){var B=u==="y"?T:P,I=u==="y"?q:$,C=u==="y"?"height":"width",z=w[u],ee=w[u]+v[B],X=w[u]-v[I],V=m?-E[C]/2:0,ke=y===Q?k[C]:E[C],Y=y===Q?-E[C]:-k[C],de=e.elements.arrow,Se=m&&de?Me(de):{width:0,height:0},J=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:yt(),ue=J[B],U=J[I],M=Ae(0,k[C],Se[C]),fe=A?k[C]/2-V-M-ue-L:ke-M-ue-L,Le=A?-k[C]/2+V+M+U+L:Y+M+U+L,K=e.elements.arrow&&le(e.elements.arrow),Ce=K?u==="y"?K.clientTop||0:K.clientLeft||0:0,He=e.modifiersData.offset?e.modifiersData.offset[e.placement][u]:0,Ne=w[u]+fe-He-Ce,Fe=w[u]+Le-He;if(s){var ze=Ae(m?ie(ee,Ne):ee,z,m?N(X,Fe):X);w[u]=ze,O[u]=ze-z}if(i){var Lt=u==="x"?T:P,Ct=u==="x"?q:$,pe=w[S],Ve=pe+v[Lt],Ue=pe-v[Ct],Xe=Ae(m?ie(Ve,Ne):Ve,pe,m?N(Ue,Fe):Ue);w[S]=Xe,O[S]=Xe-pe}}e.modifiersData[n]=O}}const Mr={name:"preventOverflow",enabled:!0,phase:"main",fn:Br,requiresIfExists:["offset"]};function jr(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Rr(t){return t===_(t)||!D(t)?Re(t):jr(t)}function Ir(t,e,r){r===void 0&&(r=!1);var n=F(e),o=Z(t),s=D(e),a={scrollLeft:0,scrollTop:0},i={x:0,y:0};return(s||!s&&!r)&&((R(e)!=="body"||We(n))&&(a=Rr(e)),D(e)?(i=Z(e),i.x+=e.clientLeft,i.y+=e.clientTop):n&&(i.x=Ie(n))),{x:o.left+a.scrollLeft-i.x,y:o.top+a.scrollTop-i.y,width:o.width,height:o.height}}function Wr(t){var e=new Map,r=new Set,n=[];t.forEach(function(s){e.set(s.name,s)});function o(s){r.add(s.name);var a=[].concat(s.requires||[],s.requiresIfExists||[]);a.forEach(function(i){if(!r.has(i)){var l=e.get(i);l&&o(l)}}),n.push(s)}return t.forEach(function(s){r.has(s.name)||o(s)}),n}function Hr(t){var e=Wr(t);return er.reduce(function(r,n){return r.concat(e.filter(function(o){return o.phase===n}))},[])}function Nr(t){var e;return function(){return e||(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Fr(t){var e=t.reduce(function(r,n){var o=r[n.name];return r[n.name]=o?Object.assign({},o,n,{options:Object.assign({},o.options,n.options),data:Object.assign({},o.data,n.data)}):n,r},{});return Object.keys(e).map(function(r){return e[r]})}var ot={placement:"bottom",modifiers:[],strategy:"absolute"};function it(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(n){return!(n&&typeof n.getBoundingClientRect=="function")})}function zr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,n=r===void 0?[]:r,o=e.defaultOptions,s=o===void 0?ot:o;return function(i,l,c){c===void 0&&(c=s);var d={placement:"bottom",orderedModifiers:[],options:Object.assign({},ot,s),modifiersData:{},elements:{reference:i,popper:l},attributes:{},styles:{}},p=[],f=!1,m={state:d,setOptions:function(b){g(),d.options=Object.assign({},s,d.options,b),d.scrollParents={reference:oe(i)?ne(i):i.contextElement?ne(i.contextElement):[],popper:ne(l)};var y=Hr(Fr([].concat(n,d.options.modifiers)));return d.orderedModifiers=y.filter(function(A){return A.enabled}),h(),m.update()},forceUpdate:function(){if(!f){var b=d.elements,y=b.reference,A=b.popper;if(it(y,A)){d.rects={reference:Ir(y,le(A),d.options.strategy==="fixed"),popper:Me(A)},d.reset=!1,d.placement=d.options.placement,d.orderedModifiers.forEach(function(O){return d.modifiersData[O.name]=Object.assign({},O.data)});for(var u=0;u<d.orderedModifiers.length;u++){if(d.reset===!0){d.reset=!1,u=-1;continue}var S=d.orderedModifiers[u],w=S.fn,k=S.options,E=k===void 0?{}:k,L=S.name;typeof w=="function"&&(d=w({state:d,options:E,name:L,instance:m})||d)}}}},update:Nr(function(){return new Promise(function(v){m.forceUpdate(),v(d)})}),destroy:function(){g(),f=!0}};if(!it(i,l))return m;m.setOptions(c).then(function(v){!f&&c.onFirstUpdate&&c.onFirstUpdate(v)});function h(){d.orderedModifiers.forEach(function(v){var b=v.name,y=v.options,A=y===void 0?{}:y,u=v.effect;if(typeof u=="function"){var S=u({state:d,name:b,instance:m,options:A}),w=function(){};p.push(S||w)}})}function g(){p.forEach(function(v){return v()}),p=[]}return m}}var Vr=[hr,Dr,pr,nr,qr,Lr,Mr,lr,Or],Ur=zr({defaultModifiers:Vr});const Xr=parseInt(ft.baseline.$value,10),Yr="js-mds-popover-trigger",ye="mds-popover--active",re={init:()=>{Array.from(document.querySelectorAll(`.${Yr}`)).forEach(e=>{const n=`${e.getAttribute("id")}-content`,o=document.getElementById(n),s=o.dataset?o.dataset.placement:null,a=Ur(e,o,{placement:s||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,Xr*3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),o.setAttribute("aria-hidden","true"),e.addEventListener("click",i=>{i.preventDefault(),a.update(),o.classList.toggle(ye),re.setAriaAttr(e,o,ye)}),document.addEventListener("mousedown",i=>{re.hide(e,o,a,ye,i)}),document.addEventListener("keydown",i=>{re.hide(e,o,a,ye,i)})})},hide:(t,e,r,n,o)=>{!t.contains(o.target)&&!r.state.elements.popper.contains(o.target)&&e.classList.contains(n)&&(e.classList.remove(n),re.setAriaAttr(t,e,n))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Jr=parseInt(pt.size.breakpoint.md.$value,10),st="data-modal-id",at="mds-modal--active",Kr="js-mds-modal-close";let we;const G={init:()=>{window.innerWidth>Jr&&Array.from(document.querySelectorAll(`[${st}]`)).forEach(r=>{const n=r.getAttribute(st),o=document.getElementById(n),s=Array.from(o.querySelectorAll(`.${Kr}`)),a=o.getAttribute("data-site-container"),i=document.getElementById(a);let c=o.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');c=Array.prototype.slice.call(c);const d=c[0],p=c[c.length-1];r.addEventListener("click",f=>{f.preventDefault(),G.open(o,d,i)}),o.addEventListener("click",f=>{f.target===o&&G.close(o,we,i)}),o.addEventListener("keydown",f=>{G.trapFocus(f,d,p),(f.key==="Escape"||f.key==="Esc")&&G.close(o,we,i)}),s.forEach(f=>{f.addEventListener("click",()=>{G.close(o,we,i)})})})},open:(t,e,r)=>{we=document.activeElement,t.classList.add(at),e.focus(),r.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r.removeAttribute("aria-hidden"),t.classList.remove(at),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}},Gr=".mds-form-element--file",Oe="mds-form-element--selected-file",ct="mds-form-element--dragover",Qr=".mds-file-upload__file-name",Zr=".mds-file-upload__remove-button",en="mds-form-element--file-supported",kt={init:()=>{kt.isBrowserIE()||Array.from(document.querySelectorAll(Gr)).forEach(e=>{e.classList.add(en);const r=e.querySelector(Qr),n=e.querySelector("input[type=file]"),o=e.querySelector(Zr);document.addEventListener("readystatechange",()=>{n.files&&n.files.length&&(r.textContent=n.files[0].name,e.classList.add(Oe))}),n.addEventListener("change",()=>{n.files&&n.files.length&&(r.textContent=n.files[0].name,e.classList.add(Oe),o.focus())}),o.addEventListener("click",s=>{s.preventDefault(),n.value="",r.textContent="",e.classList.remove(Oe),n.focus()}),["dragover","dragenter"].forEach(s=>{n.addEventListener(s,a=>{a.stopPropagation(),e.classList.add(ct)})}),["dragleave","dragend","drop"].forEach(s=>{n.addEventListener(s,a=>{a.stopPropagation(),e.classList.remove(ct)})})})},isBrowserIE:()=>!!window.document.documentMode},tn=".mds-form-element--character-count",rn=".mds-form-message--character-count",nn=".js-character-count-number",on=".mds-form-control",$e={init:()=>{Array.from(document.querySelectorAll(tn)).forEach(e=>{const r=e.querySelector(on),n=r.getAttribute("maxlength"),o=e.querySelector(rn),s=e.querySelector(nn);r.removeAttribute("maxlength"),$e.updateCounter(r,n,s,o),r.addEventListener("keyup",a=>{a.stopPropagation(),$e.updateCounter(r,n,s,o)})})},updateCounter:(t,e,r,n)=>{const o=t.value.match(/(\r\n|\n|\r)/g),s=t.value.length+(o?o.length:0),a=e-s;r.textContent=a,a<0?n.classList.add("mds-form-message--error"):n.classList.remove("mds-form-message--error")}},sn="js-mds-button-double-submit",St={init:()=>{Array.from(document.querySelectorAll(`.${sn}`)).forEach(e=>{e.addEventListener("click",()=>{St.toggleDisable(e)})})},toggleDisable:t=>{setTimeout(()=>{t.setAttribute("disabled","")},1),setTimeout(()=>{t.removeAttribute("disabled")},1e3)}},an={setFluidVideos:()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach(e=>{const r=document.createElement("div");r.classList.add("mds-fluid-video"),r.innerHTML=e.outerHTML,e.replaceWith(r)})}};class cn extends HTMLElement{connectedCallback(){const r=this.querySelector(".mds-card-link__link");let n;this.onmousedown=()=>{n=+new Date},this.onmouseup=()=>{+new Date-n<200&&r.click(),n=void 0}}disconnectedCallback(){this.onmousedown=this.onmouseup=null}}class ln extends HTMLElement{static observedAttributes=["form","field-name","show-when"];showHide=()=>{const{field:e}=this,r=this.getAttribute("show-when");(e.type==="checkbox"?e.checked.toString():e.value.toString())===r?this.hidden=!1:this.hidden=!0};setup=()=>{this.cleanup();const e=this.getAttribute("form"),r=this.getAttribute("field-name");if(this.formElement=e?document.querySelector(e):this.closest("form"),!this.formElement)throw new Error(`<mds-conditional-section> for ${r} could not find the associated form`);if(this.field=this.formElement.elements[r],!this.field)throw new Error(`<mds-conditional-section> for ${r} could not find the associated field`);this.showHide(),this.formElement.addEventListener("input",this.showHide)};connectedCallback(){this.setup()}cleanup=()=>{this.formElement?.removeEventListener("input",this.showHide)};disconnectedCallback(){this.cleanup()}attributeChangedCallback(e,r,n){const{showHide:o,setup:s}=this;this.isConnected&&r!==n&&(e==="show-when"?o():(e==="field-name"||e==="form")&&s())}}const H=".mds-form-check",Te=".mds-form-check__input",dn=".mds-form-check__label",lt=".mds-form-check__nested-container",dt=".mds-category-picker__pill",Pe=".mds-category-picker__clear-pill",ut={optionsSelectedSingular:"1 option selected",optionsSelectedPlural:"{count} options selected",optionsFoundSingular:"1 option found",optionsFoundPlural:"{count} options found"};class un extends HTMLElement{#c;#r;#l;#d;#e;#u;#t;#i;#p;#s;#a=new WeakMap;#o=!1;connectedCallback(){const e=this.querySelector(".mds-category-picker__templates");if(this.#r=this.querySelector(".mds-category-picker__pillbox"),this.#e=this.querySelector(".mds-category-picker__search"),this.#u=this.querySelector(".mds-category-picker__input-wrapper"),this.#t=this.querySelector(".mds-category-picker__dropdown"),this.#i=this.querySelector(".mds-category-picker__live-region"),this.#p=this.querySelector(".mds-category-picker__no-results"),!e||!this.#r||!this.#e||!this.#t)return;try{this.#s={...ut,...JSON.parse(this.getAttribute("i18n")||"{}")}}catch{this.#s=ut}if(this.#l=e.querySelector(dt),this.#d=e.querySelector(Pe),!this.#l||!this.#d)return;e.remove(),this.#c=new AbortController;const r={signal:this.#c.signal};this.#r.addEventListener("click",this.#A,r),this.#t.addEventListener("change",this.#E,r),this.#e.addEventListener("blur",this.#y,r),this.#e.addEventListener("input",this.#x,r),this.#e.addEventListener("keydown",this.#S,r),this.#u.addEventListener("click",()=>this.#e.focus(),r),this.#e.addEventListener("focus",()=>this.#m(),r),this.#t.addEventListener("mousedown",n=>{n.target!==this.#e&&n.preventDefault()},r),this.#t.addEventListener("focusout",n=>{(!n.relatedTarget||!this.contains(n.relatedTarget))&&this.#n()},r),this.#t.addEventListener("keydown",n=>{n.key==="Escape"&&(this.#n(),this.#e.focus())},r),document.addEventListener("click",n=>{n.composedPath().includes(this)||this.#n()},r),this.#h()}disconnectedCallback(){this.#c?.abort()}#m(){this.#o||(this.#o=!0,this.classList.add("mds-category-picker--open"),this.#e.setAttribute("aria-expanded","true"))}#n(){this.#o&&(this.#o=!1,this.classList.remove("mds-category-picker--open"),this.#e.setAttribute("aria-expanded","false"),this.#e.value="",this.#f())}#y=e=>{const r=e.relatedTarget;r&&(this.#t.contains(r)||this.#u.contains(r))||this.#n()};#h=()=>{this.#r.replaceChildren(),this.#a=new WeakMap;const e="mds-form-check--has-selection";for(const r of this.#t.querySelectorAll(H))r.classList.remove(e);for(const r of this.#t.querySelectorAll(`${Te}:checked`)){this.#w(r);let n=r.closest(H)?.parentElement;for(;n&&n!==this.#t;)n.matches(H)&&n.classList.add(e),n=n.parentElement}};#w(e){const r=e.dataset.path;if(!r)return;const n=this.#l.cloneNode(!0),o=this.#d.cloneNode(!0);o.setAttribute("aria-label",`${o.getAttribute("aria-label")} ${r}`);const s=document.createElement("span");s.className="mds-category-picker__pill-text",s.textContent=r,n.appendChild(s),n.appendChild(o),this.#r.appendChild(n),this.#a.set(o,e)}#A=({target:e})=>{const r=this.#a.get(e.closest(Pe));r&&(r.checked=!1,r.dispatchEvent(new Event("change",{bubbles:!0})))};#E=()=>{this.#h(),this.#e.value="",this.#f();const e=this.#t.querySelectorAll(`${Te}:checked`).length;this.#g(this.#b("optionsSelectedSingular","optionsSelectedPlural",e))};#x=()=>{const e=this.#e.value.trim();e.length>=2?this.#k(e):this.#f()};#k(e){const r=e.toLowerCase(),n=this.#t.querySelectorAll(H),o=new Set,s=new Set;for(const i of n){const l=i.querySelector(dn)?.textContent.trim().toLowerCase()||"";if(l){if(i.querySelector(lt)){l.includes(r)&&(o.add(i),s.add(i));continue}if(i.hidden=!l.includes(r),!i.hidden){let c=i.parentElement;for(;c&&c!==this.#t;)c.matches(H)&&o.add(c),c=c.parentElement}}}for(const i of n){const l=i.querySelector(lt);if(l)if(o.has(i)){if(i.hidden=!1,i.querySelector(".mds-checkbox-accordion__button")?.setAttribute("aria-expanded","true"),s.has(i))for(const c of l.querySelectorAll(H))c.hidden=!1}else i.hidden=!0}let a=0;for(const i of n)i.hidden||a++;this.#v(a===0),this.#g(this.#b("optionsFoundSingular","optionsFoundPlural",a))}#f(){for(const e of this.#t.querySelectorAll(H))e.hidden=!1;this.#v(!1)}#v(e){this.#p?.classList.toggle("mds-category-picker__no-results--visible",e)}#S=e=>{switch(e.key){case"Escape":this.#n(),this.#e.blur();break;case"ArrowDown":{e.preventDefault(),this.#o||this.#m();for(const r of this.#t.querySelectorAll(H)){if(r.hidden)continue;const n=r.querySelector(Te);if(n){n.focus();break}}break}case"Backspace":if(this.#e.value===""){const r=this.#r.querySelectorAll(dt),n=r[r.length-1];if(!n)break;const o=this.#a.get(n.querySelector(Pe));o&&(o.checked=!1,o.dispatchEvent(new Event("change",{bubbles:!0})))}break;case"Tab":this.#n();break}};#b(e,r,n){return n===1?this.#s[e]:this.#s[r].replace("{count}",String(n))}#g(e){this.#i&&(this.#i.textContent="",requestAnimationFrame(()=>{this.#i.textContent=e}))}}window.customElements.get("mds-dropdown-nav")||window.customElements.define("mds-dropdown-nav",Ot);window.customElements.get("mds-timeout-dialog")||window.customElements.define("mds-timeout-dialog",Tt);window.customElements.get("mds-card-link")||window.customElements.define("mds-card-link",cn);window.customElements.get("mds-conditional-section")||window.customElements.define("mds-conditional-section",ln);window.customElements.get("mds-image-cropper")||window.customElements.define("mds-image-cropper",Pt);window.customElements.get("mds-category-picker")||window.customElements.define("mds-category-picker",un);const De=()=>{x.init(),mt.init(),It.init(),Nt.init(),G.init(),kt.init(),$e.init(),re.init(),St.init(),an.setFluidVideos()};window.mdgxInitAll=De;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",De):De();
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@madgex/design-system",
3
3
  "author": "Madgex",
4
4
  "license": "UNLICENSED",
5
- "version": "13.5.0",
5
+ "version": "13.5.1",
6
6
  "main": "dist/js/index.js",
7
7
  "exports": {
8
8
  ".": "./dist/js/index.js",
@@ -7,6 +7,7 @@
7
7
  {% from 'src/components/icons/_macro.njk' import MdsIcon %}
8
8
  {% from 'src/components/inputs/_checkbox-elem/_macro.njk' import MdsCheckboxElem %}
9
9
  {% from 'src/components/inputs/_message/_macro.njk' import MdsInputMessages %}
10
+ {% from 'src/components/inputs/category-picker/_macro.njk' import MdsCategoryPicker %}
10
11
  {% from 'src/components/inputs/checkbox-list/_macro.njk' import MdsCheckboxList %}
11
12
  {% from 'src/components/inputs/combobox/_macro.njk' import MdsCombobox %}
12
13
  {% from 'src/components/inputs/file-upload/_macro.njk' import MdsFileUpload %}
@@ -4,18 +4,21 @@ Use the [callable](https://mozilla.github.io/nunjucks/templating.html#call) synt
4
4
 
5
5
  ## Parameters
6
6
 
7
- - `trigger`: trigger of the trigger button. Be as descriptive as you can as it will help for a11y. **required**
8
- - `triggerActive`: trigger of the trigger button when accordion is expanded
9
- - `triggerClasses`: class will be added to the trigger (useful to change the font size)
7
+ - `label`: The text inside the trigger button. Be as descriptive as you can as it will help for a11y. **required**
8
+ - `labelOpen`: The text inside of the trigger button when accordion is expanded
9
+ - `labelClasses`: class will be added to the trigger (useful to change the font size)
10
10
  - `icon`: override the default icon for the closed state
11
- - `iconActive`: override the default icon for the open state
11
+ - `iconOpen`: override the default icon for the open state
12
12
  - `noIcon`: Boolean, removes the icon from the accordion completely
13
- - `isActive`: if `true`, the accordion will be expanded by default
13
+ - `startsOpen`: if `true`, the accordion will be expanded by default. This will be overridden in JS when used as part of a checkbox list with pills, but is still recommended
14
+ as it will auto open the component for people not using JS surfacing the categories.
14
15
  - `nonClosing`: boolean to visually hide (for accessibility) the trigger and keep the accordion expanded
15
16
  - `breakpoint`: if a value (in px, em, rem) is passed, the accordion will be enabled only when screen size is smaller than the breakpoint
16
17
  - `leftAligned`: This will determine if the icon should sit on the left or the right of the trigger (default: false) - See design usage guidelines
17
18
  - `contentFirst`: Boolean, places the content above the trigger, pushing the trigger down below the content when open
18
19
 
20
+ **Note:** Checkbox list with pills is a dependent component and should be checked and updated if any changes to this component are made.
21
+
19
22
  ## Accessibility
20
23
 
21
24
  When using the non closing accordion, the trigger will be disabled and hidden from view so screenreaders can inform that the content has been expanded. The trigger is also removed from the navigation flow to make sure that it can't be tabbed into when using a keyboard.
@@ -26,7 +29,7 @@ Where possible, the defaults should remain as they are to ensure we remain consi
26
29
  outside these guidelines, this offers an insight into the design decisions to best ensure you understand context and usage.
27
30
 
28
31
  - `icon`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of collapsable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `minus`
29
- - `iconActive`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of expandable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `plus-small` (Plus is a little too big to align nicely with the content of the trigger)
32
+ - `iconOpen`: Where possible, we should ensure that this remains unchanged as the triangles are a universal indicator of expandable content. However, there are scenarios where this may not work for you. In these scenarios, it is suggested you use one of the following icons: `plus-small` (Plus is a little too big to align nicely with the content of the trigger)
30
33
  - `leftAligned`: Usage for this parameter depends largely on the content surrounding it. There are some cases where we have a list where some items are expandable while others are not so to avoid a misalignment due to the presence of icons or not, we've decided that when in a list the accordions would have the icons on the right. When used as a single component on the page, the icon is on the left instead.
31
34
 
32
35
  ## Notes
@@ -130,6 +130,10 @@
130
130
  }
131
131
  }
132
132
 
133
+ .mds-form-check-container--border--tall {
134
+ max-height: 400px;
135
+ }
136
+
133
137
  .mds-form-check {
134
138
  margin-bottom: $constant-size-baseline * 2;
135
139
 
@@ -0,0 +1,45 @@
1
+ ## Category Picker (Tags with Combobox)
2
+
3
+ A tags-with-combobox control: an input-like wrapper displays selected items as removable pills. Clicking or focusing the input reveals a dropdown containing a checkbox-list. Typing 2+ characters filters the visible options.
4
+
5
+ ### Parameters — Nunjucks
6
+
7
+ - `removeButtonAria`: Base aria-label for pill remove buttons. Defaults to `'remove category'`. The pill's path text is appended.
8
+ - `searchPlaceholder`: Placeholder text for the search input. Defaults to `'Search or select…'`.
9
+ - `checkboxList`: Passes parameters through to the checkbox-list component. See checkbox-list README.
10
+ - `i18n.selectedTermsLabel`: Visually hidden label for the pill list. Defaults to `'Selected terms:'`.
11
+ - `i18n.noResults`: Message shown when search filter finds no matches. Defaults to `'No matching options'`.
12
+ - `i18n.optionsSelectedSingular`: Announcement when 1 option is selected. Defaults to `'1 option selected'`.
13
+ - `i18n.optionsSelectedPlural`: Announcement when multiple options are selected. Use `{count}` placeholder. Defaults to `'{count} options selected'`.
14
+ - `i18n.optionsFoundSingular`: Announcement when 1 option matches the filter. Defaults to `'1 option found'`.
15
+ - `i18n.optionsFoundPlural`: Announcement when multiple options match the filter. Use `{count}` placeholder. Defaults to `'{count} options found'`.
16
+
17
+ ### Behaviour
18
+
19
+ - **Click / focus input** → dropdown opens with checkbox-list
20
+ - **Check a checkbox** → pill appears in the input, search clears, dropdown stays open
21
+ - **Click pill ✕ / uncheck checkbox** → pill removed
22
+ - **Type 2+ characters** → options filtered by label text (case-insensitive); parent groups auto-expand to show matches; if a parent label matches, all its children are shown
23
+ - **Backspace on empty input** → removes last pill
24
+ - **Escape** → closes dropdown and clears search (works from search input or within dropdown)
25
+ - **ArrowDown** → moves focus from input into the first visible checkbox
26
+ - **Tab** → closes dropdown and moves to next form field
27
+ - **Click outside** → closes dropdown
28
+
29
+ ### Accessibility
30
+
31
+ - Search input has `role="combobox"`, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `aria-haspopup="dialog"`
32
+ - Dropdown has `role="dialog"` with `aria-label` from the checkbox-list label
33
+ - Real `<input type="checkbox">` elements inside dropdown for native checked/unchecked announcements
34
+ - `aria-live="polite"` region announces filter result count and selection changes
35
+ - Pill remove buttons have `aria-label="remove category {path}"`
36
+ - Visually hidden "Selected terms:" label introduces the pill list for screen readers
37
+ - Pills are rendered as a list (`ul`/`li`) for semantic structure
38
+
39
+ ### Progressive Enhancement
40
+
41
+ Without JS the checkbox-list renders normally (visible, no dropdown, no pills). The custom element upgrades the markup when JS is available.
42
+
43
+ ### Note
44
+
45
+ The JS, especially for finding the input hierarchy, is highly dependent on checkbox-list and should be updated with it if any changes are made.
@@ -0,0 +1,3 @@
1
+ {% macro MdsCategoryPicker(params) %}
2
+ {%- include "./_template.njk" -%}
3
+ {% endmacro %}
@@ -0,0 +1,83 @@
1
+ {% from "../checkbox-list/_macro.njk" import MdsCheckboxList %}
2
+ {% from "../label/_macro.njk" import MdsInputLabel %}
3
+ {% from "../_message/_macro.njk" import MdsInputMessages %}
4
+ {% from "../../icons/_macro.njk" import MdsIcon %}
5
+
6
+ {%- if params.checkboxList -%}
7
+ {%- set pickerI18n = params.i18n or {} -%}
8
+ {%- set pickerId = params.checkboxList.id | default('category-picker') -%}
9
+ {%- set dropdownId = pickerId ~ '-dropdown' -%}
10
+ {%- set searchId = pickerId ~ '-search' -%}
11
+
12
+ {% if params.checkboxList.helpText %}
13
+ {% set helpTextId = [pickerId, '-help-text'] | join %}
14
+ {% endif %}
15
+ {% if params.checkboxList.validationError %}
16
+ {% set validationErrorId = [pickerId, '-validation-error'] | join %}
17
+ {% endif %}
18
+ {% if helpTextId or validationErrorId or params.checkboxList.describedBy %}
19
+ {% set ariaDescribedBy = [validationErrorId, helpTextId, params.checkboxList.describedBy] | join(' ') | trim %}
20
+ {% endif %}
21
+
22
+ <div class="mds-form-element{% if params.checkboxList.state %} mds-form-element--{{ params.checkboxList.state }}{% endif %}">
23
+ {{ MdsInputLabel({
24
+ labelText: params.checkboxList.labelText,
25
+ hideLabel: params.checkboxList.hideLabel,
26
+ inputId: searchId,
27
+ optional: params.checkboxList.optional,
28
+ tooltipMessage: params.checkboxList.tooltipMessage,
29
+ i18n: params.checkboxList.i18n
30
+ }) }}
31
+ {{ MdsInputMessages({
32
+ id: pickerId,
33
+ helpTextId: helpTextId,
34
+ helpText: params.checkboxList.helpText,
35
+ validationErrorId: validationErrorId,
36
+ validationError: params.checkboxList.validationError
37
+ }) }}
38
+
39
+ <mds-category-picker i18n="{{ pickerI18n | dump }}">
40
+ <span class="mds-category-picker__templates">{# Removed with JS on load #}
41
+ <ul><li class="mds-category-picker__pill mds-border"></li></ul>
42
+ <button class="mds-category-picker__clear-pill" type="button" aria-label="{{ params.removeButtonAria | default('remove category') }}">{{- MdsIcon({ iconName: 'close' }) -}}</button>
43
+ </span>
44
+
45
+ <div class="mds-category-picker__input-wrapper">
46
+ <span class="mds-visually-hidden">{{ pickerI18n.selectedTermsLabel | default('Selected terms:') }}</span>
47
+ <ul class="mds-category-picker__pillbox" role="list">{# Pills added with JS #}</ul>
48
+ <input
49
+ class="mds-category-picker__search"
50
+ id="{{ searchId }}"
51
+ type="text"
52
+ role="combobox"
53
+ autocomplete="off"
54
+ aria-expanded="false"
55
+ aria-controls="{{ dropdownId }}"
56
+ aria-autocomplete="list"
57
+ aria-haspopup="dialog"
58
+ placeholder="{{ params.searchPlaceholder | default('Search or select…') }}"
59
+ {% if ariaDescribedBy %}aria-describedby="{{ ariaDescribedBy }}"{% endif %}
60
+ />
61
+ </div>
62
+
63
+ <div id="{{ dropdownId }}" class="mds-category-picker__dropdown" role="dialog" aria-label="{{ params.checkboxList.labelText | default('Options') }}">
64
+ {# Hide the checkbox-list's built-in legend since we render the label above #}
65
+ {{- MdsCheckboxList({
66
+ labelText: params.checkboxList.labelText,
67
+ hideLabel: true,
68
+ id: params.checkboxList.id,
69
+ name: params.checkboxList.name,
70
+ options: params.checkboxList.options,
71
+ selectedOptions: params.checkboxList.selectedOptions,
72
+ disabled: params.checkboxList.disabled,
73
+ containerClasses: params.checkboxList.containerClasses,
74
+ i18n: params.checkboxList.i18n,
75
+ describedBy: params.checkboxList.describedBy
76
+ }) -}}
77
+ <div class="mds-category-picker__no-results">{{ pickerI18n.noResults | default('No matching options') }}</div>
78
+ </div>
79
+
80
+ <div class="mds-category-picker__live-region mds-visually-hidden" aria-live="polite" aria-atomic="true"></div>
81
+ </mds-category-picker>
82
+ </div>
83
+ {%- endif -%}
@@ -0,0 +1,176 @@
1
+ const options = [
2
+ {
3
+ value: 101,
4
+ labelText: 'Arts & heritage',
5
+ options: [
6
+ { value: 600102, labelText: 'Artist agency & management', options: [] },
7
+ { value: 600104, labelText: 'Arts education & training', options: [] },
8
+ {
9
+ value: 123,
10
+ labelText: 'Art sales',
11
+ options: [
12
+ { value: 12301, labelText: 'Art auction', options: [] },
13
+ { value: 12302, labelText: 'Art dealer', options: [] },
14
+ ],
15
+ },
16
+ { value: 104, labelText: 'Dance', options: [] },
17
+ { value: 600105, labelText: 'Events', options: [] },
18
+ { value: 600106, labelText: 'Festival', options: [] },
19
+ { value: 600107, labelText: 'Funding body', options: [] },
20
+ { value: 107, labelText: 'Heritage', options: [] },
21
+ { value: 600109, labelText: 'Librarian & archivist', options: [] },
22
+ { value: 108, labelText: 'Museums & galleries', options: [] },
23
+ { value: 109, labelText: 'Music', options: [] },
24
+ { value: 600110, labelText: 'Press, publicity & PR', options: [] },
25
+ { value: 600111, labelText: 'Promoter', options: [] },
26
+ { value: 110, labelText: 'Theatre', options: [] },
27
+ { value: 600113, labelText: 'Venue', options: [] },
28
+ { value: 106, labelText: 'Visual arts', options: [] },
29
+ { value: 600114, labelText: 'Writing & literature', options: [] },
30
+ ],
31
+ },
32
+ {
33
+ value: 111,
34
+ labelText: 'Charities',
35
+ options: [
36
+ { value: 112, labelText: 'Advice', options: [] },
37
+ { value: 113, labelText: 'Advocacy', options: [] },
38
+ { value: 114, labelText: 'Animal', options: [] },
39
+ { value: 600116, labelText: 'Arts & culture', options: [] },
40
+ { value: 600117, labelText: 'Charity & volunteering support', options: [] },
41
+ { value: 115, labelText: 'Children', options: [] },
42
+ { value: 600118, labelText: 'Community development', options: [] },
43
+ { value: 600119, labelText: 'Crime', options: [] },
44
+ { value: 116, labelText: 'Disability', options: [] },
45
+ { value: 117, labelText: 'Environment', options: [] },
46
+ { value: 118, labelText: 'Equality', options: [] },
47
+ { value: 600120, labelText: 'Faith-based', options: [] },
48
+ { value: 119, labelText: 'Fundraising', options: [] },
49
+ { value: 121, labelText: 'Health', options: [] },
50
+ { value: 600122, labelText: 'Housing & homelessness', options: [] },
51
+ { value: 348, labelText: 'Human rights', options: [] },
52
+ { value: 122, labelText: 'International', options: [] },
53
+ { value: 300, labelText: 'Mental health', options: [] },
54
+ { value: 600123, labelText: 'Policy & research', options: [] },
55
+ { value: 600124, labelText: 'Poverty relief', options: [] },
56
+ { value: 600125, labelText: 'Social welfare', options: [] },
57
+ { value: 349, labelText: 'Trustee', options: [] },
58
+ { value: 600126, labelText: 'Volunteer management', options: [] },
59
+ ],
60
+ },
61
+ { value: 124, labelText: 'Construction', options: [] },
62
+ { value: 142, labelText: 'Design', options: [] },
63
+ {
64
+ value: 137,
65
+ labelText: 'Engineering',
66
+ options: [
67
+ { value: 138, labelText: 'General', options: [] },
68
+ { value: 139, labelText: 'Manufacturing', options: [] },
69
+ { value: 140, labelText: 'Utility', options: [] },
70
+ ],
71
+ },
72
+ {
73
+ value: 141,
74
+ labelText: 'Environment',
75
+ options: [
76
+ { value: 600131, labelText: 'Agriculture & land management', options: [] },
77
+ { value: 600132, labelText: 'Auditing', options: [] },
78
+ { value: 147, labelText: 'Built environment', options: [] },
79
+ { value: 600136, labelText: 'Climate change', options: [] },
80
+ { value: 600137, labelText: 'Corporate social responsibility', options: [] },
81
+ { value: 600138, labelText: 'Ecology & conservation', options: [] },
82
+ { value: 600139, labelText: 'Energy efficiency & renewable energy', options: [] },
83
+ { value: 600140, labelText: 'Energy management', options: [] },
84
+ { value: 143, labelText: 'Environmental education', options: [] },
85
+ { value: 600141, labelText: 'Environmental management', options: [] },
86
+ { value: 145, labelText: 'Green & clean technology', options: [] },
87
+ { value: 600143, labelText: 'International development', options: [] },
88
+ { value: 146, labelText: 'Policy, legislation & strategy', options: [] },
89
+ { value: 148, labelText: 'Recycling & waste management', options: [] },
90
+ { value: 600145, labelText: 'Supply chain', options: [] },
91
+ { value: 600146, labelText: 'Sustainability', options: [] },
92
+ { value: 600147, labelText: 'Water & wastewater', options: [] },
93
+ ],
94
+ },
95
+ ];
96
+
97
+ const defaultI18n = {
98
+ selectedTermsLabel: 'Selected terms:',
99
+ noResults: 'No matching options',
100
+ optionsSelectedSingular: '1 option selected',
101
+ optionsSelectedPlural: '{count} options selected',
102
+ optionsFoundSingular: '1 option found',
103
+ optionsFoundPlural: '{count} options found',
104
+ };
105
+
106
+ const variant = (name, context, { note } = {}) => ({
107
+ name,
108
+ context: {
109
+ sectionTitle: `<h2>${name}</h2>${note ? `<p><em>${note}</em></p>` : ''}`,
110
+ i18n: defaultI18n,
111
+ ...context,
112
+ },
113
+ });
114
+
115
+ module.exports = {
116
+ title: 'Category Picker',
117
+ status: 'ready',
118
+ context: {
119
+ sectionTitle: '<h2>Default</h2>',
120
+ searchPlaceholder: 'Search or select…',
121
+ i18n: defaultI18n,
122
+ checkboxList: {
123
+ labelText: 'Job sectors',
124
+ id: 'category-picker',
125
+ selectedOptions: [142, 12302],
126
+ i18n: {
127
+ accordionTrigger: 'Please find more options under {label}',
128
+ },
129
+ options,
130
+ },
131
+ },
132
+ variants: [
133
+ variant('With error state', {
134
+ checkboxList: {
135
+ id: 'category-picker-error',
136
+ state: 'error',
137
+ validationError: 'This field is required',
138
+ selectedOptions: [142, 12302],
139
+ },
140
+ }),
141
+ variant(
142
+ 'No preselection',
143
+ {
144
+ checkboxList: {
145
+ id: 'category-picker-empty',
146
+ selectedOptions: [],
147
+ },
148
+ },
149
+ { note: 'Empty state — click input to reveal dropdown.' },
150
+ ),
151
+ variant(
152
+ 'i18n example',
153
+ {
154
+ searchPlaceholder: 'Rechercher ou sélectionner…',
155
+ i18n: {
156
+ selectedTermsLabel: 'Termes sélectionnés :',
157
+ noResults: 'Aucune option correspondante',
158
+ optionsSelectedSingular: '1 option sélectionnée',
159
+ optionsSelectedPlural: '{count} options sélectionnées',
160
+ optionsFoundSingular: '1 option trouvée',
161
+ optionsFoundPlural: '{count} options trouvées',
162
+ },
163
+ checkboxList: {
164
+ labelText: "Secteurs d'activité",
165
+ id: 'category-picker-i18n',
166
+ selectedOptions: [142, 12302],
167
+ i18n: {
168
+ accordionTrigger: "Voir plus d'options sous {label}",
169
+ },
170
+ options,
171
+ },
172
+ },
173
+ { note: 'Example with French translations for all i18n strings.' },
174
+ ),
175
+ ],
176
+ };