@madgex/design-system 7.0.0 → 7.0.2
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/README.md +0 -4
- package/dist/_tokens/css/_tokens.css +1 -1
- package/dist/_tokens/js/_tokens-module.js +1 -1
- package/dist/assets/icons.json +1 -1
- package/dist/css/index.css +1 -1
- package/dist/js/index.js +1 -1
- package/package.json +2 -2
- package/src/components/accordion/README.md +4 -28
- package/src/components/button/README.md +3 -22
- package/src/components/icons/README.md +6 -25
- package/src/components/inputs/checkbox-list/README.md +0 -12
- package/src/components/inputs/combobox/README.md +1 -11
- package/src/components/inputs/input/README.md +3 -18
- package/src/components/inputs/label/README.md +2 -27
- package/src/components/inputs/radio/README.md +2 -30
- package/src/components/inputs/single-checkbox/README.md +2 -24
- package/src/components/pagination/README.md +2 -17
- package/src/components/pagination/pagination.scss +1 -0
- package/src/components/popover/README.md +3 -26
- package/src/components/tabs/tabs.config.js +2 -2
- package/src/components/toggle-button-links/README.md +0 -11
- package/src/helpers/prose/README.md +7 -0
- package/src/helpers/{edited-text/edited-text.js → prose/prose.js} +3 -5
- package/src/helpers/{edited-text/edited-text.njk → prose/prose.njk} +5 -5
- package/src/js/index.js +2 -2
- package/src/scss/constants/_sd-tokens.scss +1 -1
- package/src/scss/helpers/__index.scss +2 -2
- package/src/scss/helpers/_font-types.scss +0 -5
- package/src/scss/helpers/{_edited-text.scss → _prose.scss} +2 -5
- package/src/scss/resets/__index.scss +7 -7
- package/src/helpers/edited-text/README.md +0 -5
- package/src/typography/block-of-text.config.json +0 -3
- package/src/typography/block-of-text.njk +0 -4
package/dist/js/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
-
(()=>{var e={818:()=>{window.addEventListener("hashchange",(()=>{const e=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${e}']`)).forEach((e=>{e.click()}))}),!1)},333:()=>{Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value(e){if(null==this)throw TypeError('"this" is null or not defined');const t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw TypeError("predicate must be a function");const n=arguments[1];let o=0;for(;o<r;){const r=t[o];if(e.call(n,r,o,t))return r;o++}},configurable:!0,writable:!0})},616:()=>{Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){let t=this;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null})},626:()=>{"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e){if(null==e)throw new TypeError("Cannot convert undefined or null to object");const t=Object(e);for(let e=1;e<arguments.length;e++){const r=arguments[e];if(null!=r)for(const e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])}return t},writable:!0,configurable:!0})},516:()=>{"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)})},702:(e,t,r)=>{r.p=window.mdgx&&window.mdgx.baseUrl?window.mdgx.baseUrl:"/"},807:()=>{!function(){"use strict";if("undefined"!=typeof window&&window.addEventListener){var e,t,r,n=Object.create(null),o=function(){clearTimeout(t),t=setTimeout(e,100)},i=function(){},a=function(e){function t(e){var t;return void 0!==e.protocol?t=e:(t=document.createElement("a")).href=e,t.protocol.replace(/:/g,"")+t.host}var r,n,o;return window.XMLHttpRequest&&(r=new XMLHttpRequest,n=t(location),o=t(e),r=void 0===r.withCredentials&&""!==o&&o!==n?XDomainRequest||void 0:XMLHttpRequest),r},s="http://www.w3.org/1999/xlink";e=function(){var e,t,r,l,c,d,u,f,p,m,b=0;function v(){var e;0==(b-=1)&&(i(),window.addEventListener("resize",o,!1),window.addEventListener("orientationchange",o,!1),window.MutationObserver?((e=new MutationObserver(o)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),i=function(){try{e.disconnect(),window.removeEventListener("resize",o,!1),window.removeEventListener("orientationchange",o,!1)}catch(e){}}):(document.documentElement.addEventListener("DOMSubtreeModified",o,!1),i=function(){document.documentElement.removeEventListener("DOMSubtreeModified",o,!1),window.removeEventListener("resize",o,!1),window.removeEventListener("orientationchange",o,!1)}))}function h(e){return function(){!0!==n[e.base]&&(e.useEl.setAttributeNS(s,"xlink:href","#"+e.hash),e.useEl.hasAttribute("href")&&e.useEl.setAttribute("href","#"+e.hash))}}function g(e){return function(){var t,r=document.body,n=document.createElement("x");e.onload=null,n.innerHTML=e.responseText,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",r.insertBefore(t,r.firstChild)),v()}}function y(e){return function(){e.onerror=null,e.ontimeout=null,v()}}for(i(),p=document.getElementsByTagName("use"),c=0;c<p.length;c+=1){try{t=p[c].getBoundingClientRect()}catch(e){t=!1}e=(f=(l=p[c].getAttribute("href")||p[c].getAttributeNS(s,"href")||p[c].getAttribute("xlink:href"))&&l.split?l.split("#"):["",""])[0],r=f[1],d=t&&0===t.left&&0===t.right&&0===t.top&&0===t.bottom,t&&0===t.width&&0===t.height&&!d?(p[c].hasAttribute("href")&&p[c].setAttributeNS(s,"xlink:href",l),e.length&&(!0!==(m=n[e])&&setTimeout(h({useEl:p[c],base:e,hash:r}),0),void 0===m&&void 0!==(u=a(e))&&(m=new u,n[e]=m,m.onload=g(m),m.onerror=y(m),m.ontimeout=y(m),m.open("GET",e),m.send(),b+=1))):d?e.length&&n[e]&&setTimeout(h({useEl:p[c],base:e,hash:r}),0):void 0===n[e]?n[e]=!0:n[e].onload&&(n[e].abort(),delete n[e].onload,n[e]=!0)}p="",b+=1,v()},r=function(){window.removeEventListener("load",r,!1),t=setTimeout(e,0)},"complete"!==document.readyState?window.addEventListener("load",r,!1):r()}}()},435:e=>{"use strict";e.exports=JSON.parse('{"color":{"neutral":{"base":{"value":"#707070","private":true},"light":{"value":"#949494","private":true},"lighter":{"value":"#DDDDDD","private":true},"lightest":{"value":"#F8F8F8","private":true},"darker":{"value":"#333333","private":true}},"status":{"error":{"light":{"value":"#fd0826","private":true},"lightest":{"value":"#ffe3e6","private":true},"dark":{"value":"#d0021b","private":true},"darkest":{"value":"#ae0216","private":true},"base":{"value":"#e1021d","private":true}},"success":{"light":{"value":"#6ac52d","private":true},"lightest":{"value":"#f0faea","private":true},"dark":{"value":"#549b24","private":true},"darkest":{"value":"#40791B","private":true},"base":{"value":"#5ba927","private":true}},"info":{"light":{"value":"#ffc442","private":true},"lightest":{"value":"#fff7e5","private":true},"dark":{"value":"#f4aa08","private":true},"darkest":{"value":"#946500","private":true},"base":{"value":"#ffb411","private":true}}}},"size":{"baseline":{"value":"4px","private":true},"breakpoint":{"sm":{"value":"400px","private":true},"md":{"value":"600px","private":true},"lg":{"value":"1008px","private":true},"xl":{"value":"1280px","private":true}},"gutter-width":{"value":"20px","private":true}}}')}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var i=t[n]={exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.p="",(()=>{"use strict";r(702),r(818);const e=r(435),t="mds-tabs",n="mds-tabs__panel",o="mds-tabs__tab",i="mds-tabs__tab--selected",a="mds-tabs__panel--hidden",s=parseInt(e.size.breakpoint.lg.value,10),l={init:()=>{l.setTabs(".js-full-tabbed"),window.innerWidth>s&&l.setTabs(".js-desktop-tabbed")},setTabs:e=>{const r=Array.from(document.querySelectorAll(`${e} .${o}`)),a=Array.from(document.querySelectorAll(`${e} .mds-tabs__list`)),s=Array.from(document.querySelectorAll(`${e} .mds-tabs__list-item`)),c=Array.from(document.querySelectorAll(`${e} .${n}`));a.forEach((e=>{e.setAttribute("role","tablist")})),s.forEach((e=>{e.setAttribute("role","presentation")})),r.forEach((e=>{e.setAttribute("role","tab"),e.setAttribute("aria-controls",e.attributes.href.value.substring(1)),e.classList.contains(i)?e.setAttribute("tabindex","0"):e.setAttribute("tabindex","-1")})),c.forEach((e=>{e.setAttribute("role","tabpanel"),e.setAttribute("aria-labelledby",`label-${e.attributes.id.value}`)}));const d=document.querySelectorAll(`${e} .js-tabs-item`);Array.from(d).forEach((e=>{const r=window.location.hash.trim(),n=e.attributes.href.value,o=e.closest(`.${t}`),i=l.getAllPanels(o),a=l.getAllTabs(o),s=l.getTargetPanel(e,o);e.addEventListener("click",(t=>{t.preventDefault(),l.updateTabs(a,i,e,s,n)})),n===r&&l.updateTabs(a,i,e,s,n)})),a.forEach((e=>{const r=e.closest(`.${t}`),n=l.getAllPanels(r),o=l.getAllTabs(r);e.addEventListener("keydown",(t=>{switch(t.keyCode){case 37:case 38:t.preventDefault(),l.moveTab(e,r,o,n,!1);break;case 39:case 40:t.preventDefault(),l.moveTab(e,r,o,n,!0)}}))}))},getSelectedTab:e=>e.querySelector(`.${i}`),getPrevTab:e=>!!e.parentElement.previousSibling&&e.parentElement.previousSibling.querySelector(`.${o}`),getNextTab:e=>!!e.parentElement.nextSibling&&e.parentElement.nextSibling.querySelector(`.${o}`),getTargetPanel:(e,t)=>{const r=e.attributes.href.value;return t.querySelector(r)},getAllPanels:e=>Array.from(e.querySelectorAll(`.${n}`)),getAllTabs:e=>Array.from(e.querySelectorAll(`.${o}`)),moveTab:(e,t,r,n,o)=>{const i=l.getSelectedTab(e),a=o?l.getNextTab(i):l.getPrevTab(i);if(a){const e=a.attributes.href.value,o=l.getTargetPanel(a,t);l.updateTabs(r,n,a,o,e,!1)}},updateTabs:(e,t,r,n,o)=>{l.clearAllTabs(e),l.setActiveTab(r),l.clearAllPanels(t),l.setActivePanel(n,o)},clearAllTabs:e=>{e.forEach((e=>{e.classList.remove(i),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")}))},clearAllPanels:e=>{e.forEach((e=>{e.classList.add(a)}))},setActiveTab:e=>{e.classList.add(i),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0"),e.focus()},setActivePanel:(e,t)=>{e.classList.remove(a),window.history.replaceState({},"",t)}},c=l,d="mds-accordion-trigger",u="mds-accordion-trigger__button",f="mds-accordion-trigger__label",p="mds-accordion-trigger--expanded",m="mds-accordion-content--expanded",b={init:()=>{const e=Array.from(document.querySelectorAll(`.${d}`)),t=window.innerWidth;e.forEach((e=>{const r=e.nextElementSibling;b.checkBreakpoint(e,t)?b.setAccordion(e,r):(e.classList.add(p),r.classList.add(m))}))},checkBreakpoint:(e,t)=>{let r=0;if(e.dataset.bp){const n=e.dataset.bp.replace(/\D/g,"");let o,i;switch(e.dataset.bp.replace(/[0-9]/g,"")){case"px":r=n;break;case"em":case"rem":o=window.getComputedStyle(document.querySelector("body"))["font-size"],i=n*parseFloat(o),r=i;break;default:return!0}return!(t>r)}return!0},setAccordion:(e,t)=>{const r=e,n=b.createButton(r),o=n.querySelector(`.${f}`).innerText,i=n.getAttribute("aria-label"),a=e.classList.contains("mds-accordion-trigger--non-closing"),s=e.classList.contains("mds-accordion-trigger--content-first")&&!a;r.classList.remove("mds-display-none"),"fieldset"!==t.nodeName.toLowerCase()&&(i?t.setAttribute("aria-label",i):t.setAttribute("aria-label",o)),r.innerHTML="",r.appendChild(n);const l={triggerContainer:r,accordionContent:t,isNonClosing:a,isContentFirst:s},c=e=>{e.preventDefault(),b.toggleExpand(l,c,e)};n.addEventListener("click",c),r.dataset.expanded&&b.toggleExpand(l,c)},createButton:e=>{const t=e.querySelector(`.${d} > span`),r=document.createElement("button");return r.className=u,r.classList.add("mds-button"),r.classList.add("mds-button--plain"),r.classList.add("mds-padding-x-b0"),r.setAttribute("aria-expanded",!1),r.setAttribute("type","button"),e.dataset.arialabel&&r.setAttribute("aria-label",e.dataset.arialabel),t&&r.appendChild(t),r},cloneUnderButton:(e,t,r,n)=>{const o=e.cloneNode(!0),i=o.querySelector(`.${f}`);t.dataset.arialabeactive&&o.setAttribute("aria-label",t.dataset.arialabeactive),o.setAttribute("aria-expanded",!0),o.addEventListener("click",n),b.switchAriaLabel(o,t),b.switchLabel(i),r.after(o)},switchLabel:e=>{if(e.dataset.labelinverse){const t=e.textContent;e.textContent=e.dataset.labelinverse,e.setAttribute("data-labelinverse",t)}},switchAriaLabel:(e,t)=>{t.dataset.arialabelactive&&(e.getAttribute("aria-label")===t.dataset.arialabel?e.setAttribute("aria-label",t.dataset.arialabelactive):e.setAttribute("aria-label",t.dataset.arialabel))},toggleExpand:(e,t,r)=>{let n,{triggerContainer:o,accordionContent:i,isNonClosing:a,isContentFirst:s}=e;n=r?r.target.closest(`.${u}`):o.querySelector(`.${u}`);const l=n.querySelector(`.${f}`);if("false"===n.getAttribute("aria-expanded"))n.setAttribute("aria-expanded",!0),o.classList.add(p),i.classList.add(m),s&&b.cloneUnderButton(n,o,i,t),a||s?b.hideButton(n,t):(b.switchLabel(l),b.switchAriaLabel(n,o));else if(!a&&(n.setAttribute("aria-expanded",!1),o.classList.remove(p),i.classList.remove(m),b.switchLabel(l),b.switchAriaLabel(n,o),s)){const e=i.previousElementSibling.querySelector(`.${u}`);n.setAttribute("aria-expanded",!1),n.removeAttribute("aria-disabled"),n.setAttribute("tabIndex","0"),e.replaceWith(n),o.classList.remove("mds-visually-hidden"),n.focus()}},hideButton:(e,t)=>{e.setAttribute("aria-disabled",!0),e.parentElement.classList.add("mds-visually-hidden"),e.setAttribute("tabIndex","-1"),e.removeEventListener("click",t)}},v=b;function h(e){var t=e.getBoundingClientRect();return{width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left,x:t.left,y:t.top}}function g(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function y(e){var t=g(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function w(e){return e instanceof g(e).Element||e instanceof Element}function x(e){return e instanceof g(e).HTMLElement||e instanceof HTMLElement}function A(e){return"undefined"!=typeof ShadowRoot&&(e instanceof g(e).ShadowRoot||e instanceof ShadowRoot)}function E(e){return e?(e.nodeName||"").toLowerCase():null}function L(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function O(e){return h(L(e)).left+y(e).scrollLeft}function S(e){return g(e).getComputedStyle(e)}function k(e){var t=S(e),r=t.overflow,n=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(r+o+n)}function T(e,t,r){void 0===r&&(r=!1);var n,o,i=L(t),a=h(e),s=x(t),l={scrollLeft:0,scrollTop:0},c={x:0,y:0};return(s||!s&&!r)&&(("body"!==E(t)||k(i))&&(l=(n=t)!==g(n)&&x(n)?{scrollLeft:(o=n).scrollLeft,scrollTop:o.scrollTop}:y(n)),x(t)?((c=h(t)).x+=t.clientLeft,c.y+=t.clientTop):i&&(c.x=O(i))),{x:a.left+l.scrollLeft-c.x,y:a.top+l.scrollTop-c.y,width:a.width,height:a.height}}function j(e){var t=h(e),r=e.offsetWidth,n=e.offsetHeight;return Math.abs(t.width-r)<=1&&(r=t.width),Math.abs(t.height-n)<=1&&(n=t.height),{x:e.offsetLeft,y:e.offsetTop,width:r,height:n}}function D(e){return"html"===E(e)?e:e.assignedSlot||e.parentNode||(A(e)?e.host:null)||L(e)}function q(e){return["html","body","#document"].indexOf(E(e))>=0?e.ownerDocument.body:x(e)&&k(e)?e:q(D(e))}function P(e,t){var r;void 0===t&&(t=[]);var n=q(e),o=n===(null==(r=e.ownerDocument)?void 0:r.body),i=g(n),a=o?[i].concat(i.visualViewport||[],k(n)?n:[]):n,s=t.concat(a);return o?s:s.concat(P(D(a)))}function C(e){return["table","td","th"].indexOf(E(e))>=0}function M(e){return x(e)&&"fixed"!==S(e).position?e.offsetParent:null}function B(e){for(var t=g(e),r=M(e);r&&C(r)&&"static"===S(r).position;)r=M(r);return r&&("html"===E(r)||"body"===E(r)&&"static"===S(r).position)?t:r||function(e){var t=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&x(e)&&"fixed"===S(e).position)return null;for(var r=D(e);x(r)&&["html","body"].indexOf(E(r))<0;){var n=S(r);if("none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||-1!==["transform","perspective"].indexOf(n.willChange)||t&&"filter"===n.willChange||t&&n.filter&&"none"!==n.filter)return r;r=r.parentNode}return null}(e)||t}var $="top",_="bottom",N="right",W="left",H="auto",R=[$,_,N,W],I="start",z="end",F="viewport",U="popper",V=R.reduce((function(e,t){return e.concat([t+"-"+I,t+"-"+z])}),[]),X=[].concat(R,[H]).reduce((function(e,t){return e.concat([t,t+"-"+I,t+"-"+z])}),[]),Y=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function G(e){var t=new Map,r=new Set,n=[];function o(e){r.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!r.has(e)){var n=t.get(e);n&&o(n)}})),n.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){r.has(e.name)||o(e)})),n}var J={placement:"bottom",modifiers:[],strategy:"absolute"};function K(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return!t.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function Q(e){void 0===e&&(e={});var t=e,r=t.defaultModifiers,n=void 0===r?[]:r,o=t.defaultOptions,i=void 0===o?J:o;return function(e,t,r){void 0===r&&(r=i);var o,a,s={placement:"bottom",orderedModifiers:[],options:Object.assign({},J,i),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},l=[],c=!1,d={state:s,setOptions:function(r){u(),s.options=Object.assign({},i,s.options,r),s.scrollParents={reference:w(e)?P(e):e.contextElement?P(e.contextElement):[],popper:P(t)};var o,a,c=function(e){var t=G(e);return Y.reduce((function(e,r){return e.concat(t.filter((function(e){return e.phase===r})))}),[])}((o=[].concat(n,s.options.modifiers),a=o.reduce((function(e,t){var r=e[t.name];return e[t.name]=r?Object.assign({},r,t,{options:Object.assign({},r.options,t.options),data:Object.assign({},r.data,t.data)}):t,e}),{}),Object.keys(a).map((function(e){return a[e]}))));return s.orderedModifiers=c.filter((function(e){return e.enabled})),s.orderedModifiers.forEach((function(e){var t=e.name,r=e.options,n=void 0===r?{}:r,o=e.effect;if("function"==typeof o){var i=o({state:s,name:t,instance:d,options:n});l.push(i||function(){})}})),d.update()},forceUpdate:function(){if(!c){var e=s.elements,t=e.reference,r=e.popper;if(K(t,r)){s.rects={reference:T(t,B(r),"fixed"===s.options.strategy),popper:j(r)},s.reset=!1,s.placement=s.options.placement,s.orderedModifiers.forEach((function(e){return s.modifiersData[e.name]=Object.assign({},e.data)}));for(var n=0;n<s.orderedModifiers.length;n++)if(!0!==s.reset){var o=s.orderedModifiers[n],i=o.fn,a=o.options,l=void 0===a?{}:a,u=o.name;"function"==typeof i&&(s=i({state:s,options:l,name:u,instance:d})||s)}else s.reset=!1,n=-1}}},update:(o=function(){return new Promise((function(e){d.forceUpdate(),e(s)}))},function(){return a||(a=new Promise((function(e){Promise.resolve().then((function(){a=void 0,e(o())}))}))),a}),destroy:function(){u(),c=!0}};if(!K(e,t))return d;function u(){l.forEach((function(e){return e()})),l=[]}return d.setOptions(r).then((function(e){!c&&r.onFirstUpdate&&r.onFirstUpdate(e)})),d}}var Z={passive:!0};const ee={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,r=e.instance,n=e.options,o=n.scroll,i=void 0===o||o,a=n.resize,s=void 0===a||a,l=g(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return i&&c.forEach((function(e){e.addEventListener("scroll",r.update,Z)})),s&&l.addEventListener("resize",r.update,Z),function(){i&&c.forEach((function(e){e.removeEventListener("scroll",r.update,Z)})),s&&l.removeEventListener("resize",r.update,Z)}},data:{}};function te(e){return e.split("-")[0]}function re(e){return e.split("-")[1]}function ne(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function oe(e){var t,r=e.reference,n=e.element,o=e.placement,i=o?te(o):null,a=o?re(o):null,s=r.x+r.width/2-n.width/2,l=r.y+r.height/2-n.height/2;switch(i){case $:t={x:s,y:r.y-n.height};break;case _:t={x:s,y:r.y+r.height};break;case N:t={x:r.x+r.width,y:l};break;case W:t={x:r.x-n.width,y:l};break;default:t={x:r.x,y:r.y}}var c=i?ne(i):null;if(null!=c){var d="y"===c?"height":"width";switch(a){case I:t[c]=t[c]-(r[d]/2-n[d]/2);break;case z:t[c]=t[c]+(r[d]/2-n[d]/2)}}return t}const ie={name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,r=e.name;t.modifiersData[r]=oe({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}};var ae=Math.max,se=Math.min,le=Math.round,ce={top:"auto",right:"auto",bottom:"auto",left:"auto"};function de(e){var t,r=e.popper,n=e.popperRect,o=e.placement,i=e.offsets,a=e.position,s=e.gpuAcceleration,l=e.adaptive,c=e.roundOffsets,d=!0===c?function(e){var t=e.x,r=e.y,n=window.devicePixelRatio||1;return{x:le(le(t*n)/n)||0,y:le(le(r*n)/n)||0}}(i):"function"==typeof c?c(i):i,u=d.x,f=void 0===u?0:u,p=d.y,m=void 0===p?0:p,b=i.hasOwnProperty("x"),v=i.hasOwnProperty("y"),h=W,y=$,w=window;if(l){var x=B(r),A="clientHeight",E="clientWidth";x===g(r)&&"static"!==S(x=L(r)).position&&(A="scrollHeight",E="scrollWidth"),o===$&&(y=_,m-=x[A]-n.height,m*=s?1:-1),o===W&&(h=N,f-=x[E]-n.width,f*=s?1:-1)}var O,k=Object.assign({position:a},l&&ce);return s?Object.assign({},k,((O={})[y]=v?"0":"",O[h]=b?"0":"",O.transform=(w.devicePixelRatio||1)<2?"translate("+f+"px, "+m+"px)":"translate3d("+f+"px, "+m+"px, 0)",O)):Object.assign({},k,((t={})[y]=v?m+"px":"",t[h]=b?f+"px":"",t.transform="",t))}var ue={left:"right",right:"left",bottom:"top",top:"bottom"};function fe(e){return e.replace(/left|right|bottom|top/g,(function(e){return ue[e]}))}var pe={start:"end",end:"start"};function me(e){return e.replace(/start|end/g,(function(e){return pe[e]}))}function be(e,t){var r=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(r&&A(r)){var n=t;do{if(n&&e.isSameNode(n))return!0;n=n.parentNode||n.host}while(n)}return!1}function ve(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function he(e,t){return t===F?ve(function(e){var t=g(e),r=L(e),n=t.visualViewport,o=r.clientWidth,i=r.clientHeight,a=0,s=0;return n&&(o=n.width,i=n.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(a=n.offsetLeft,s=n.offsetTop)),{width:o,height:i,x:a+O(e),y:s}}(e)):x(t)?function(e){var t=h(e);return t.top=t.top+e.clientTop,t.left=t.left+e.clientLeft,t.bottom=t.top+e.clientHeight,t.right=t.left+e.clientWidth,t.width=e.clientWidth,t.height=e.clientHeight,t.x=t.left,t.y=t.top,t}(t):ve(function(e){var t,r=L(e),n=y(e),o=null==(t=e.ownerDocument)?void 0:t.body,i=ae(r.scrollWidth,r.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=ae(r.scrollHeight,r.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-n.scrollLeft+O(e),l=-n.scrollTop;return"rtl"===S(o||r).direction&&(s+=ae(r.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:s,y:l}}(L(e)))}function ge(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function ye(e,t){return t.reduce((function(t,r){return t[r]=e,t}),{})}function we(e,t){void 0===t&&(t={});var r=t,n=r.placement,o=void 0===n?e.placement:n,i=r.boundary,a=void 0===i?"clippingParents":i,s=r.rootBoundary,l=void 0===s?F:s,c=r.elementContext,d=void 0===c?U:c,u=r.altBoundary,f=void 0!==u&&u,p=r.padding,m=void 0===p?0:p,b=ge("number"!=typeof m?m:ye(m,R)),v=d===U?"reference":U,g=e.elements.reference,y=e.rects.popper,A=e.elements[f?v:d],O=function(e,t,r){var n="clippingParents"===t?function(e){var t=P(D(e)),r=["absolute","fixed"].indexOf(S(e).position)>=0&&x(e)?B(e):e;return w(r)?t.filter((function(e){return w(e)&&be(e,r)&&"body"!==E(e)})):[]}(e):[].concat(t),o=[].concat(n,[r]),i=o[0],a=o.reduce((function(t,r){var n=he(e,r);return t.top=ae(n.top,t.top),t.right=se(n.right,t.right),t.bottom=se(n.bottom,t.bottom),t.left=ae(n.left,t.left),t}),he(e,i));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}(w(A)?A:A.contextElement||L(e.elements.popper),a,l),k=h(g),T=oe({reference:k,element:y,strategy:"absolute",placement:o}),j=ve(Object.assign({},y,T)),q=d===U?j:k,C={top:O.top-q.top+b.top,bottom:q.bottom-O.bottom+b.bottom,left:O.left-q.left+b.left,right:q.right-O.right+b.right},M=e.modifiersData.offset;if(d===U&&M){var W=M[o];Object.keys(C).forEach((function(e){var t=[N,_].indexOf(e)>=0?1:-1,r=[$,_].indexOf(e)>=0?"y":"x";C[e]+=W[r]*t}))}return C}function xe(e,t,r){return ae(e,se(t,r))}function Ae(e,t,r){return void 0===r&&(r={x:0,y:0}),{top:e.top-t.height-r.y,right:e.right-t.width+r.x,bottom:e.bottom-t.height+r.y,left:e.left-t.width-r.x}}function Ee(e){return[$,N,_,W].some((function(t){return e[t]>=0}))}var Le=Q({defaultModifiers:[ee,ie,{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,r=e.options,n=r.gpuAcceleration,o=void 0===n||n,i=r.adaptive,a=void 0===i||i,s=r.roundOffsets,l=void 0===s||s,c={placement:te(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:o};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,de(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:l})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,de(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var r=t.styles[e]||{},n=t.attributes[e]||{},o=t.elements[e];x(o)&&E(o)&&(Object.assign(o.style,r),Object.keys(n).forEach((function(e){var t=n[e];!1===t?o.removeAttribute(e):o.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,r={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,r.popper),t.styles=r,t.elements.arrow&&Object.assign(t.elements.arrow.style,r.arrow),function(){Object.keys(t.elements).forEach((function(e){var n=t.elements[e],o=t.attributes[e]||{},i=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:r[e]).reduce((function(e,t){return e[t]="",e}),{});x(n)&&E(n)&&(Object.assign(n.style,i),Object.keys(o).forEach((function(e){n.removeAttribute(e)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,r=e.options,n=e.name,o=r.offset,i=void 0===o?[0,0]:o,a=X.reduce((function(e,r){return e[r]=function(e,t,r){var n=te(e),o=[W,$].indexOf(n)>=0?-1:1,i="function"==typeof r?r(Object.assign({},t,{placement:e})):r,a=i[0],s=i[1];return a=a||0,s=(s||0)*o,[W,N].indexOf(n)>=0?{x:s,y:a}:{x:a,y:s}}(r,t.rects,i),e}),{}),s=a[t.placement],l=s.x,c=s.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=l,t.modifiersData.popperOffsets.y+=c),t.modifiersData[n]=a}},{name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,r=e.options,n=e.name;if(!t.modifiersData[n]._skip){for(var o=r.mainAxis,i=void 0===o||o,a=r.altAxis,s=void 0===a||a,l=r.fallbackPlacements,c=r.padding,d=r.boundary,u=r.rootBoundary,f=r.altBoundary,p=r.flipVariations,m=void 0===p||p,b=r.allowedAutoPlacements,v=t.options.placement,h=te(v),g=l||(h!==v&&m?function(e){if(te(e)===H)return[];var t=fe(e);return[me(e),t,me(t)]}(v):[fe(v)]),y=[v].concat(g).reduce((function(e,r){return e.concat(te(r)===H?function(e,t){void 0===t&&(t={});var r=t,n=r.placement,o=r.boundary,i=r.rootBoundary,a=r.padding,s=r.flipVariations,l=r.allowedAutoPlacements,c=void 0===l?X:l,d=re(n),u=d?s?V:V.filter((function(e){return re(e)===d})):R,f=u.filter((function(e){return c.indexOf(e)>=0}));0===f.length&&(f=u);var p=f.reduce((function(t,r){return t[r]=we(e,{placement:r,boundary:o,rootBoundary:i,padding:a})[te(r)],t}),{});return Object.keys(p).sort((function(e,t){return p[e]-p[t]}))}(t,{placement:r,boundary:d,rootBoundary:u,padding:c,flipVariations:m,allowedAutoPlacements:b}):r)}),[]),w=t.rects.reference,x=t.rects.popper,A=new Map,E=!0,L=y[0],O=0;O<y.length;O++){var S=y[O],k=te(S),T=re(S)===I,j=[$,_].indexOf(k)>=0,D=j?"width":"height",q=we(t,{placement:S,boundary:d,rootBoundary:u,altBoundary:f,padding:c}),P=j?T?N:W:T?_:$;w[D]>x[D]&&(P=fe(P));var C=fe(P),M=[];if(i&&M.push(q[k]<=0),s&&M.push(q[P]<=0,q[C]<=0),M.every((function(e){return e}))){L=S,E=!1;break}A.set(S,M)}if(E)for(var B=function(e){var t=y.find((function(t){var r=A.get(t);if(r)return r.slice(0,e).every((function(e){return e}))}));if(t)return L=t,"break"},z=m?3:1;z>0&&"break"!==B(z);z--);t.placement!==L&&(t.modifiersData[n]._skip=!0,t.placement=L,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,r=e.options,n=e.name,o=r.mainAxis,i=void 0===o||o,a=r.altAxis,s=void 0!==a&&a,l=r.boundary,c=r.rootBoundary,d=r.altBoundary,u=r.padding,f=r.tether,p=void 0===f||f,m=r.tetherOffset,b=void 0===m?0:m,v=we(t,{boundary:l,rootBoundary:c,padding:u,altBoundary:d}),h=te(t.placement),g=re(t.placement),y=!g,w=ne(h),x="x"===w?"y":"x",A=t.modifiersData.popperOffsets,E=t.rects.reference,L=t.rects.popper,O="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,S={x:0,y:0};if(A){if(i||s){var k="y"===w?$:W,T="y"===w?_:N,D="y"===w?"height":"width",q=A[w],P=A[w]+v[k],C=A[w]-v[T],M=p?-L[D]/2:0,H=g===I?E[D]:L[D],R=g===I?-L[D]:-E[D],z=t.elements.arrow,F=p&&z?j(z):{width:0,height:0},U=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},V=U[k],X=U[T],Y=xe(0,E[D],F[D]),G=y?E[D]/2-M-Y-V-O:H-Y-V-O,J=y?-E[D]/2+M+Y+X+O:R+Y+X+O,K=t.elements.arrow&&B(t.elements.arrow),Q=K?"y"===w?K.clientTop||0:K.clientLeft||0:0,Z=t.modifiersData.offset?t.modifiersData.offset[t.placement][w]:0,ee=A[w]+G-Z-Q,oe=A[w]+J-Z;if(i){var ie=xe(p?se(P,ee):P,q,p?ae(C,oe):C);A[w]=ie,S[w]=ie-q}if(s){var le="x"===w?$:W,ce="x"===w?_:N,de=A[x],ue=de+v[le],fe=de-v[ce],pe=xe(p?se(ue,ee):ue,de,p?ae(fe,oe):fe);A[x]=pe,S[x]=pe-de}}t.modifiersData[n]=S}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,r=e.state,n=e.name,o=e.options,i=r.elements.arrow,a=r.modifiersData.popperOffsets,s=te(r.placement),l=ne(s),c=[W,N].indexOf(s)>=0?"height":"width";if(i&&a){var d=function(e,t){return ge("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:ye(e,R))}(o.padding,r),u=j(i),f="y"===l?$:W,p="y"===l?_:N,m=r.rects.reference[c]+r.rects.reference[l]-a[l]-r.rects.popper[c],b=a[l]-r.rects.reference[l],v=B(i),h=v?"y"===l?v.clientHeight||0:v.clientWidth||0:0,g=m/2-b/2,y=d[f],w=h-u[c]-d[p],x=h/2-u[c]/2+g,A=xe(y,x,w),E=l;r.modifiersData[n]=((t={})[E]=A,t.centerOffset=A-x,t)}},effect:function(e){var t=e.state,r=e.options.element,n=void 0===r?"[data-popper-arrow]":r;null!=n&&("string"!=typeof n||(n=t.elements.popper.querySelector(n)))&&be(t.elements.popper,n)&&(t.elements.arrow=n)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,r=e.name,n=t.rects.reference,o=t.rects.popper,i=t.modifiersData.preventOverflow,a=we(t,{elementContext:"reference"}),s=we(t,{altBoundary:!0}),l=Ae(a,n),c=Ae(s,o,i),d=Ee(l),u=Ee(c);t.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:u},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":u})}}]}),Oe=r(435);const Se=parseInt(Oe.size.baseline.value,10),ke="mds-popover--active",Te={init:()=>{Array.from(document.querySelectorAll(".js-mds-popover-trigger")).forEach((e=>{const t=`${e.getAttribute("id")}-content`,r=document.getElementById(t),n=r.dataset?r.dataset.placement:null,o=Le(e,r,{placement:n||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,3*Se]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),r.setAttribute("aria-hidden","true"),e.addEventListener("click",(t=>{t.preventDefault(),o.update(),r.classList.toggle(ke),Te.setAriaAttr(e,r,ke)})),document.addEventListener("mousedown",(t=>{Te.hide(e,r,o,ke,t)})),document.addEventListener("keydown",(t=>{Te.hide(e,r,o,ke,t)}))}))},hide:(e,t,r,n,o)=>{e.contains(o.target)||r.state.elements.popper.contains(o.target)||!t.classList.contains(n)||(t.classList.remove(n),Te.setAriaAttr(e,t,n))},setAriaAttr:(e,t,r)=>{t.classList.contains(r)?(e.setAttribute("aria-expanded","true"),t.removeAttribute("aria-hidden")):(e.setAttribute("aria-expanded","false"),t.setAttribute("aria-hidden","true"))}},je=Te,De=r(435),qe=parseInt(De.size.breakpoint.md.value,10),Pe="data-modal-id",Ce="mds-modal--active";let Me;const Be={init:()=>{window.innerWidth>qe&&Array.from(document.querySelectorAll(`[${Pe}]`)).forEach((e=>{const t=e.getAttribute(Pe),r=document.getElementById(t),n=Array.from(r.querySelectorAll(".js-mds-modal-close")),o=r.getAttribute("data-site-container"),i=document.getElementById(o);let a=r.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]');a=Array.prototype.slice.call(a);const s=a[0],l=a[a.length-1];e.addEventListener("click",(e=>{e.preventDefault(),Be.open(r,s,i)})),r.addEventListener("click",(e=>{e.target===r&&Be.close(r,Me,i)})),r.addEventListener("keydown",(e=>{Be.trapFocus(e,s,l),"Escape"!==e.key&&"Esc"!==e.key||Be.close(r,Me,i)})),n.forEach((e=>{e.addEventListener("click",(()=>{Be.close(r,Me,i)}))}))}))},open:(e,t,r)=>{Me=document.activeElement,e.classList.add(Ce),t.focus(),r.setAttribute("aria-hidden","true")},close:(e,t,r)=>{r.removeAttribute("aria-hidden"),e.classList.remove(Ce),t.focus()},trapFocus:(e,t,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===t&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),t.focus()))}},$e=Be,_e="mds-form-element--selected-file",Ne="mds-form-element--dragover",We={init:()=>{We.isBrowserIE()||Array.from(document.querySelectorAll(".mds-form-element--file")).forEach((e=>{e.classList.add("mds-form-element--file-supported");const t=e.querySelector(".mds-file-upload__file-name"),r=e.querySelector("input[type=file]"),n=e.querySelector(".mds-file-upload__remove-button");r.addEventListener("change",(()=>{r.files&&r.files.length&&(t.textContent=r.files[0].name,e.classList.add(_e),n.focus())})),n.addEventListener("click",(n=>{n.preventDefault(),r.value="",t.textContent="",e.classList.remove(_e),r.focus()})),["dragover","dragenter"].forEach((t=>{r.addEventListener(t,(t=>{t.stopPropagation(),e.classList.add(Ne)}))})),["dragleave","dragend","drop"].forEach((t=>{r.addEventListener(t,(t=>{t.stopPropagation(),e.classList.remove(Ne)}))}))}))},isBrowserIE:()=>!!window.document.documentMode},He=We,Re={init:()=>{Array.from(document.querySelectorAll(".mds-form-element--character-count")).forEach((e=>{const t=e.querySelector(".mds-form-control"),r=t.getAttribute("maxlength"),n=e.querySelector(".mds-form-message--character-count"),o=e.querySelector(".js-character-count-number");t.removeAttribute("maxlength"),Re.updateCounter(t,r,o,n),t.addEventListener("keyup",(e=>{e.stopPropagation(),Re.updateCounter(t,r,o,n)}))}))},updateCounter:(e,t,r,n)=>{const o=e.value.match(/(\r\n|\n|\r)/g),i=t-(e.value.length+(o?o.length:0));r.textContent=i,i<0?n.classList.add("mds-form-message--error"):n.classList.remove("mds-form-message--error")}},Ie=Re,ze={init:()=>{Array.from(document.querySelectorAll(".js-mds-button-double-submit")).forEach((e=>{e.addEventListener("click",(()=>{ze.toggleDisable(e)}))}))},toggleDisable:e=>{setTimeout((()=>{e.setAttribute("disabled","")}),1),setTimeout((()=>{e.removeAttribute("disabled")}),1e3)}},Fe=ze,Ue=()=>{Array.from(document.querySelectorAll(".mds-edited-text iframe, .mds-edited-text embed, .mds-edited-text object")).forEach((e=>{const t=document.createElement("div");t.classList.add("mds-fluid-video"),t.innerHTML=e.outerHTML,e.replaceWith(t)}))};document.addEventListener("DOMContentLoaded",(()=>{c.init(),v.init(),$e.init(),He.init(),Ie.init(),je.init(),Fe.init(),Ue()}))})(),(()=>{"use strict";r(807),r(616),r(516),r(626),r(333)})()})();
|
|
2
|
+
(()=>{var e={818:()=>{window.addEventListener("hashchange",(()=>{const e=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${e}']`)).forEach((e=>{e.click()}))}),!1)},333:()=>{Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value(e){if(null==this)throw TypeError('"this" is null or not defined');const t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw TypeError("predicate must be a function");const n=arguments[1];let o=0;for(;o<r;){const r=t[o];if(e.call(n,r,o,t))return r;o++}},configurable:!0,writable:!0})},616:()=>{Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){let t=this;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null})},626:()=>{"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(e){if(null==e)throw new TypeError("Cannot convert undefined or null to object");const t=Object(e);for(let e=1;e<arguments.length;e++){const r=arguments[e];if(null!=r)for(const e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])}return t},writable:!0,configurable:!0})},516:()=>{"remove"in Element.prototype||(Element.prototype.remove=function(){this.parentNode&&this.parentNode.removeChild(this)})},702:(e,t,r)=>{r.p=window.mdgx&&window.mdgx.baseUrl?window.mdgx.baseUrl:"/"},807:()=>{!function(){"use strict";if("undefined"!=typeof window&&window.addEventListener){var e,t,r,n=Object.create(null),o=function(){clearTimeout(t),t=setTimeout(e,100)},a=function(){},i=function(e){function t(e){var t;return void 0!==e.protocol?t=e:(t=document.createElement("a")).href=e,t.protocol.replace(/:/g,"")+t.host}var r,n,o;return window.XMLHttpRequest&&(r=new XMLHttpRequest,n=t(location),o=t(e),r=void 0===r.withCredentials&&""!==o&&o!==n?XDomainRequest||void 0:XMLHttpRequest),r},s="http://www.w3.org/1999/xlink";e=function(){var e,t,r,l,c,d,u,f,p,m,b=0;function v(){var e;0==(b-=1)&&(a(),window.addEventListener("resize",o,!1),window.addEventListener("orientationchange",o,!1),window.MutationObserver?((e=new MutationObserver(o)).observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),a=function(){try{e.disconnect(),window.removeEventListener("resize",o,!1),window.removeEventListener("orientationchange",o,!1)}catch(e){}}):(document.documentElement.addEventListener("DOMSubtreeModified",o,!1),a=function(){document.documentElement.removeEventListener("DOMSubtreeModified",o,!1),window.removeEventListener("resize",o,!1),window.removeEventListener("orientationchange",o,!1)}))}function h(e){return function(){!0!==n[e.base]&&(e.useEl.setAttributeNS(s,"xlink:href","#"+e.hash),e.useEl.hasAttribute("href")&&e.useEl.setAttribute("href","#"+e.hash))}}function g(e){return function(){var t,r=document.body,n=document.createElement("x");e.onload=null,n.innerHTML=e.responseText,(t=n.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",r.insertBefore(t,r.firstChild)),v()}}function y(e){return function(){e.onerror=null,e.ontimeout=null,v()}}for(a(),p=document.getElementsByTagName("use"),c=0;c<p.length;c+=1){try{t=p[c].getBoundingClientRect()}catch(e){t=!1}e=(f=(l=p[c].getAttribute("href")||p[c].getAttributeNS(s,"href")||p[c].getAttribute("xlink:href"))&&l.split?l.split("#"):["",""])[0],r=f[1],d=t&&0===t.left&&0===t.right&&0===t.top&&0===t.bottom,t&&0===t.width&&0===t.height&&!d?(p[c].hasAttribute("href")&&p[c].setAttributeNS(s,"xlink:href",l),e.length&&(!0!==(m=n[e])&&setTimeout(h({useEl:p[c],base:e,hash:r}),0),void 0===m&&void 0!==(u=i(e))&&(m=new u,n[e]=m,m.onload=g(m),m.onerror=y(m),m.ontimeout=y(m),m.open("GET",e),m.send(),b+=1))):d?e.length&&n[e]&&setTimeout(h({useEl:p[c],base:e,hash:r}),0):void 0===n[e]?n[e]=!0:n[e].onload&&(n[e].abort(),delete n[e].onload,n[e]=!0)}p="",b+=1,v()},r=function(){window.removeEventListener("load",r,!1),t=setTimeout(e,0)},"complete"!==document.readyState?window.addEventListener("load",r,!1):r()}}()},435:e=>{"use strict";e.exports=JSON.parse('{"color":{"neutral":{"base":{"value":"#707070","private":true},"light":{"value":"#949494","private":true},"lighter":{"value":"#DDDDDD","private":true},"lightest":{"value":"#F8F8F8","private":true},"darker":{"value":"#333333","private":true}},"status":{"error":{"light":{"value":"#fd0826","private":true},"lightest":{"value":"#ffe3e6","private":true},"dark":{"value":"#d0021b","private":true},"darkest":{"value":"#ae0216","private":true},"base":{"value":"#e1021d","private":true}},"success":{"light":{"value":"#6ac52d","private":true},"lightest":{"value":"#f0faea","private":true},"dark":{"value":"#549b24","private":true},"darkest":{"value":"#40791B","private":true},"base":{"value":"#5ba927","private":true}},"info":{"light":{"value":"#ffc442","private":true},"lightest":{"value":"#fff7e5","private":true},"dark":{"value":"#f4aa08","private":true},"darkest":{"value":"#946500","private":true},"base":{"value":"#ffb411","private":true}}}},"size":{"baseline":{"value":"4px","private":true},"breakpoint":{"sm":{"value":"400px","private":true},"md":{"value":"600px","private":true},"lg":{"value":"1008px","private":true},"xl":{"value":"1280px","private":true}},"gutter-width":{"value":"20px","private":true}}}')}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var a=t[n]={exports:{}};return e[n](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.p="",(()=>{"use strict";r(702),r(818);const e=r(435),t="mds-tabs",n="mds-tabs__panel",o="mds-tabs__tab",a="mds-tabs__tab--selected",i="mds-tabs__panel--hidden",s=parseInt(e.size.breakpoint.lg.value,10),l={init:()=>{l.setTabs(".js-full-tabbed"),window.innerWidth>s&&l.setTabs(".js-desktop-tabbed")},setTabs:e=>{const r=Array.from(document.querySelectorAll(`${e} .${o}`)),i=Array.from(document.querySelectorAll(`${e} .mds-tabs__list`)),s=Array.from(document.querySelectorAll(`${e} .mds-tabs__list-item`)),c=Array.from(document.querySelectorAll(`${e} .${n}`));i.forEach((e=>{e.setAttribute("role","tablist")})),s.forEach((e=>{e.setAttribute("role","presentation")})),r.forEach((e=>{e.setAttribute("role","tab"),e.setAttribute("aria-controls",e.attributes.href.value.substring(1)),e.classList.contains(a)?e.setAttribute("tabindex","0"):e.setAttribute("tabindex","-1")})),c.forEach((e=>{e.setAttribute("role","tabpanel"),e.setAttribute("aria-labelledby",`label-${e.attributes.id.value}`)}));const d=document.querySelectorAll(`${e} .js-tabs-item`);Array.from(d).forEach((e=>{const r=window.location.hash.trim(),n=e.attributes.href.value,o=e.closest(`.${t}`),a=l.getAllPanels(o),i=l.getAllTabs(o),s=l.getTargetPanel(e,o);e.addEventListener("click",(t=>{t.preventDefault(),l.updateTabs(i,a,e,s,n)})),n===r&&l.updateTabs(i,a,e,s,n)})),i.forEach((e=>{const r=e.closest(`.${t}`),n=l.getAllPanels(r),o=l.getAllTabs(r);e.addEventListener("keydown",(t=>{switch(t.keyCode){case 37:case 38:t.preventDefault(),l.moveTab(e,r,o,n,!1);break;case 39:case 40:t.preventDefault(),l.moveTab(e,r,o,n,!0)}}))}))},getSelectedTab:e=>e.querySelector(`.${a}`),getPrevTab:e=>!!e.parentElement.previousSibling&&e.parentElement.previousSibling.querySelector(`.${o}`),getNextTab:e=>!!e.parentElement.nextSibling&&e.parentElement.nextSibling.querySelector(`.${o}`),getTargetPanel:(e,t)=>{const r=e.attributes.href.value;return t.querySelector(r)},getAllPanels:e=>Array.from(e.querySelectorAll(`.${n}`)),getAllTabs:e=>Array.from(e.querySelectorAll(`.${o}`)),moveTab:(e,t,r,n,o)=>{const a=l.getSelectedTab(e),i=o?l.getNextTab(a):l.getPrevTab(a);if(i){const e=i.attributes.href.value,o=l.getTargetPanel(i,t);l.updateTabs(r,n,i,o,e,!1)}},updateTabs:(e,t,r,n,o)=>{l.clearAllTabs(e),l.setActiveTab(r),l.clearAllPanels(t),l.setActivePanel(n,o)},clearAllTabs:e=>{e.forEach((e=>{e.classList.remove(a),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")}))},clearAllPanels:e=>{e.forEach((e=>{e.classList.add(i)}))},setActiveTab:e=>{e.classList.add(a),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0"),e.focus()},setActivePanel:(e,t)=>{e.classList.remove(i),window.history.replaceState({},"",t)}},c=l,d="mds-accordion-trigger",u="mds-accordion-trigger__button",f="mds-accordion-trigger__label",p="mds-accordion-trigger--expanded",m="mds-accordion-content--expanded",b={init:()=>{const e=Array.from(document.querySelectorAll(`.${d}`)),t=window.innerWidth;e.forEach((e=>{const r=e.nextElementSibling;b.checkBreakpoint(e,t)?b.setAccordion(e,r):(e.classList.add(p),r.classList.add(m))}))},checkBreakpoint:(e,t)=>{let r=0;if(e.dataset.bp){const n=e.dataset.bp.replace(/\D/g,"");let o,a;switch(e.dataset.bp.replace(/[0-9]/g,"")){case"px":r=n;break;case"em":case"rem":o=window.getComputedStyle(document.querySelector("body"))["font-size"],a=n*parseFloat(o),r=a;break;default:return!0}return!(t>r)}return!0},setAccordion:(e,t)=>{const r=e,n=b.createButton(r),o=n.querySelector(`.${f}`).innerText,a=n.getAttribute("aria-label"),i=e.classList.contains("mds-accordion-trigger--non-closing"),s=e.classList.contains("mds-accordion-trigger--content-first")&&!i;r.classList.remove("mds-display-none"),"fieldset"!==t.nodeName.toLowerCase()&&(a?t.setAttribute("aria-label",a):t.setAttribute("aria-label",o)),r.innerHTML="",r.appendChild(n);const l={triggerContainer:r,accordionContent:t,isNonClosing:i,isContentFirst:s},c=e=>{e.preventDefault(),b.toggleExpand(l,c,e)};n.addEventListener("click",c),r.dataset.expanded&&b.toggleExpand(l,c)},createButton:e=>{const t=e.querySelector(`.${d} > span`),r=document.createElement("button");return r.className=u,r.classList.add("mds-button"),r.classList.add("mds-button--plain"),r.classList.add("mds-padding-x-b0"),r.setAttribute("aria-expanded",!1),r.setAttribute("type","button"),e.dataset.arialabel&&r.setAttribute("aria-label",e.dataset.arialabel),t&&r.appendChild(t),r},cloneUnderButton:(e,t,r,n)=>{const o=e.cloneNode(!0),a=o.querySelector(`.${f}`);t.dataset.arialabeactive&&o.setAttribute("aria-label",t.dataset.arialabeactive),o.setAttribute("aria-expanded",!0),o.addEventListener("click",n),b.switchAriaLabel(o,t),b.switchLabel(a),r.after(o)},switchLabel:e=>{if(e.dataset.labelinverse){const t=e.textContent;e.textContent=e.dataset.labelinverse,e.setAttribute("data-labelinverse",t)}},switchAriaLabel:(e,t)=>{t.dataset.arialabelactive&&(e.getAttribute("aria-label")===t.dataset.arialabel?e.setAttribute("aria-label",t.dataset.arialabelactive):e.setAttribute("aria-label",t.dataset.arialabel))},toggleExpand:(e,t,r)=>{let n,{triggerContainer:o,accordionContent:a,isNonClosing:i,isContentFirst:s}=e;n=r?r.target.closest(`.${u}`):o.querySelector(`.${u}`);const l=n.querySelector(`.${f}`);if("false"===n.getAttribute("aria-expanded"))n.setAttribute("aria-expanded",!0),o.classList.add(p),a.classList.add(m),s&&b.cloneUnderButton(n,o,a,t),i||s?b.hideButton(n,t):(b.switchLabel(l),b.switchAriaLabel(n,o));else if(!i&&(n.setAttribute("aria-expanded",!1),o.classList.remove(p),a.classList.remove(m),b.switchLabel(l),b.switchAriaLabel(n,o),s)){const e=a.previousElementSibling.querySelector(`.${u}`);n.setAttribute("aria-expanded",!1),n.removeAttribute("aria-disabled"),n.setAttribute("tabIndex","0"),e.replaceWith(n),o.classList.remove("mds-visually-hidden"),n.focus()}},hideButton:(e,t)=>{e.setAttribute("aria-disabled",!0),e.parentElement.classList.add("mds-visually-hidden"),e.setAttribute("tabIndex","-1"),e.removeEventListener("click",t)}},v=b;function h(e){var t=e.getBoundingClientRect();return{width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left,x:t.left,y:t.top}}function g(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function y(e){var t=g(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function w(e){return e instanceof g(e).Element||e instanceof Element}function x(e){return e instanceof g(e).HTMLElement||e instanceof HTMLElement}function A(e){return"undefined"!=typeof ShadowRoot&&(e instanceof g(e).ShadowRoot||e instanceof ShadowRoot)}function E(e){return e?(e.nodeName||"").toLowerCase():null}function L(e){return((w(e)?e.ownerDocument:e.document)||window.document).documentElement}function O(e){return h(L(e)).left+y(e).scrollLeft}function S(e){return g(e).getComputedStyle(e)}function k(e){var t=S(e),r=t.overflow,n=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(r+o+n)}function T(e,t,r){void 0===r&&(r=!1);var n,o,a=L(t),i=h(e),s=x(t),l={scrollLeft:0,scrollTop:0},c={x:0,y:0};return(s||!s&&!r)&&(("body"!==E(t)||k(a))&&(l=(n=t)!==g(n)&&x(n)?{scrollLeft:(o=n).scrollLeft,scrollTop:o.scrollTop}:y(n)),x(t)?((c=h(t)).x+=t.clientLeft,c.y+=t.clientTop):a&&(c.x=O(a))),{x:i.left+l.scrollLeft-c.x,y:i.top+l.scrollTop-c.y,width:i.width,height:i.height}}function j(e){var t=h(e),r=e.offsetWidth,n=e.offsetHeight;return Math.abs(t.width-r)<=1&&(r=t.width),Math.abs(t.height-n)<=1&&(n=t.height),{x:e.offsetLeft,y:e.offsetTop,width:r,height:n}}function D(e){return"html"===E(e)?e:e.assignedSlot||e.parentNode||(A(e)?e.host:null)||L(e)}function q(e){return["html","body","#document"].indexOf(E(e))>=0?e.ownerDocument.body:x(e)&&k(e)?e:q(D(e))}function P(e,t){var r;void 0===t&&(t=[]);var n=q(e),o=n===(null==(r=e.ownerDocument)?void 0:r.body),a=g(n),i=o?[a].concat(a.visualViewport||[],k(n)?n:[]):n,s=t.concat(i);return o?s:s.concat(P(D(i)))}function C(e){return["table","td","th"].indexOf(E(e))>=0}function M(e){return x(e)&&"fixed"!==S(e).position?e.offsetParent:null}function B(e){for(var t=g(e),r=M(e);r&&C(r)&&"static"===S(r).position;)r=M(r);return r&&("html"===E(r)||"body"===E(r)&&"static"===S(r).position)?t:r||function(e){var t=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&x(e)&&"fixed"===S(e).position)return null;for(var r=D(e);x(r)&&["html","body"].indexOf(E(r))<0;){var n=S(r);if("none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||-1!==["transform","perspective"].indexOf(n.willChange)||t&&"filter"===n.willChange||t&&n.filter&&"none"!==n.filter)return r;r=r.parentNode}return null}(e)||t}var $="top",_="bottom",N="right",W="left",H="auto",R=[$,_,N,W],I="start",z="end",F="viewport",U="popper",V=R.reduce((function(e,t){return e.concat([t+"-"+I,t+"-"+z])}),[]),X=[].concat(R,[H]).reduce((function(e,t){return e.concat([t,t+"-"+I,t+"-"+z])}),[]),Y=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function G(e){var t=new Map,r=new Set,n=[];function o(e){r.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!r.has(e)){var n=t.get(e);n&&o(n)}})),n.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){r.has(e.name)||o(e)})),n}var J={placement:"bottom",modifiers:[],strategy:"absolute"};function K(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return!t.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function Q(e){void 0===e&&(e={});var t=e,r=t.defaultModifiers,n=void 0===r?[]:r,o=t.defaultOptions,a=void 0===o?J:o;return function(e,t,r){void 0===r&&(r=a);var o,i,s={placement:"bottom",orderedModifiers:[],options:Object.assign({},J,a),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},l=[],c=!1,d={state:s,setOptions:function(r){u(),s.options=Object.assign({},a,s.options,r),s.scrollParents={reference:w(e)?P(e):e.contextElement?P(e.contextElement):[],popper:P(t)};var o,i,c=function(e){var t=G(e);return Y.reduce((function(e,r){return e.concat(t.filter((function(e){return e.phase===r})))}),[])}((o=[].concat(n,s.options.modifiers),i=o.reduce((function(e,t){var r=e[t.name];return e[t.name]=r?Object.assign({},r,t,{options:Object.assign({},r.options,t.options),data:Object.assign({},r.data,t.data)}):t,e}),{}),Object.keys(i).map((function(e){return i[e]}))));return s.orderedModifiers=c.filter((function(e){return e.enabled})),s.orderedModifiers.forEach((function(e){var t=e.name,r=e.options,n=void 0===r?{}:r,o=e.effect;if("function"==typeof o){var a=o({state:s,name:t,instance:d,options:n});l.push(a||function(){})}})),d.update()},forceUpdate:function(){if(!c){var e=s.elements,t=e.reference,r=e.popper;if(K(t,r)){s.rects={reference:T(t,B(r),"fixed"===s.options.strategy),popper:j(r)},s.reset=!1,s.placement=s.options.placement,s.orderedModifiers.forEach((function(e){return s.modifiersData[e.name]=Object.assign({},e.data)}));for(var n=0;n<s.orderedModifiers.length;n++)if(!0!==s.reset){var o=s.orderedModifiers[n],a=o.fn,i=o.options,l=void 0===i?{}:i,u=o.name;"function"==typeof a&&(s=a({state:s,options:l,name:u,instance:d})||s)}else s.reset=!1,n=-1}}},update:(o=function(){return new Promise((function(e){d.forceUpdate(),e(s)}))},function(){return i||(i=new Promise((function(e){Promise.resolve().then((function(){i=void 0,e(o())}))}))),i}),destroy:function(){u(),c=!0}};if(!K(e,t))return d;function u(){l.forEach((function(e){return e()})),l=[]}return d.setOptions(r).then((function(e){!c&&r.onFirstUpdate&&r.onFirstUpdate(e)})),d}}var Z={passive:!0};const ee={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,r=e.instance,n=e.options,o=n.scroll,a=void 0===o||o,i=n.resize,s=void 0===i||i,l=g(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return a&&c.forEach((function(e){e.addEventListener("scroll",r.update,Z)})),s&&l.addEventListener("resize",r.update,Z),function(){a&&c.forEach((function(e){e.removeEventListener("scroll",r.update,Z)})),s&&l.removeEventListener("resize",r.update,Z)}},data:{}};function te(e){return e.split("-")[0]}function re(e){return e.split("-")[1]}function ne(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function oe(e){var t,r=e.reference,n=e.element,o=e.placement,a=o?te(o):null,i=o?re(o):null,s=r.x+r.width/2-n.width/2,l=r.y+r.height/2-n.height/2;switch(a){case $:t={x:s,y:r.y-n.height};break;case _:t={x:s,y:r.y+r.height};break;case N:t={x:r.x+r.width,y:l};break;case W:t={x:r.x-n.width,y:l};break;default:t={x:r.x,y:r.y}}var c=a?ne(a):null;if(null!=c){var d="y"===c?"height":"width";switch(i){case I:t[c]=t[c]-(r[d]/2-n[d]/2);break;case z:t[c]=t[c]+(r[d]/2-n[d]/2)}}return t}const ae={name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,r=e.name;t.modifiersData[r]=oe({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}};var ie=Math.max,se=Math.min,le=Math.round,ce={top:"auto",right:"auto",bottom:"auto",left:"auto"};function de(e){var t,r=e.popper,n=e.popperRect,o=e.placement,a=e.offsets,i=e.position,s=e.gpuAcceleration,l=e.adaptive,c=e.roundOffsets,d=!0===c?function(e){var t=e.x,r=e.y,n=window.devicePixelRatio||1;return{x:le(le(t*n)/n)||0,y:le(le(r*n)/n)||0}}(a):"function"==typeof c?c(a):a,u=d.x,f=void 0===u?0:u,p=d.y,m=void 0===p?0:p,b=a.hasOwnProperty("x"),v=a.hasOwnProperty("y"),h=W,y=$,w=window;if(l){var x=B(r),A="clientHeight",E="clientWidth";x===g(r)&&"static"!==S(x=L(r)).position&&(A="scrollHeight",E="scrollWidth"),o===$&&(y=_,m-=x[A]-n.height,m*=s?1:-1),o===W&&(h=N,f-=x[E]-n.width,f*=s?1:-1)}var O,k=Object.assign({position:i},l&&ce);return s?Object.assign({},k,((O={})[y]=v?"0":"",O[h]=b?"0":"",O.transform=(w.devicePixelRatio||1)<2?"translate("+f+"px, "+m+"px)":"translate3d("+f+"px, "+m+"px, 0)",O)):Object.assign({},k,((t={})[y]=v?m+"px":"",t[h]=b?f+"px":"",t.transform="",t))}var ue={left:"right",right:"left",bottom:"top",top:"bottom"};function fe(e){return e.replace(/left|right|bottom|top/g,(function(e){return ue[e]}))}var pe={start:"end",end:"start"};function me(e){return e.replace(/start|end/g,(function(e){return pe[e]}))}function be(e,t){var r=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(r&&A(r)){var n=t;do{if(n&&e.isSameNode(n))return!0;n=n.parentNode||n.host}while(n)}return!1}function ve(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function he(e,t){return t===F?ve(function(e){var t=g(e),r=L(e),n=t.visualViewport,o=r.clientWidth,a=r.clientHeight,i=0,s=0;return n&&(o=n.width,a=n.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(i=n.offsetLeft,s=n.offsetTop)),{width:o,height:a,x:i+O(e),y:s}}(e)):x(t)?function(e){var t=h(e);return t.top=t.top+e.clientTop,t.left=t.left+e.clientLeft,t.bottom=t.top+e.clientHeight,t.right=t.left+e.clientWidth,t.width=e.clientWidth,t.height=e.clientHeight,t.x=t.left,t.y=t.top,t}(t):ve(function(e){var t,r=L(e),n=y(e),o=null==(t=e.ownerDocument)?void 0:t.body,a=ie(r.scrollWidth,r.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),i=ie(r.scrollHeight,r.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-n.scrollLeft+O(e),l=-n.scrollTop;return"rtl"===S(o||r).direction&&(s+=ie(r.clientWidth,o?o.clientWidth:0)-a),{width:a,height:i,x:s,y:l}}(L(e)))}function ge(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function ye(e,t){return t.reduce((function(t,r){return t[r]=e,t}),{})}function we(e,t){void 0===t&&(t={});var r=t,n=r.placement,o=void 0===n?e.placement:n,a=r.boundary,i=void 0===a?"clippingParents":a,s=r.rootBoundary,l=void 0===s?F:s,c=r.elementContext,d=void 0===c?U:c,u=r.altBoundary,f=void 0!==u&&u,p=r.padding,m=void 0===p?0:p,b=ge("number"!=typeof m?m:ye(m,R)),v=d===U?"reference":U,g=e.elements.reference,y=e.rects.popper,A=e.elements[f?v:d],O=function(e,t,r){var n="clippingParents"===t?function(e){var t=P(D(e)),r=["absolute","fixed"].indexOf(S(e).position)>=0&&x(e)?B(e):e;return w(r)?t.filter((function(e){return w(e)&&be(e,r)&&"body"!==E(e)})):[]}(e):[].concat(t),o=[].concat(n,[r]),a=o[0],i=o.reduce((function(t,r){var n=he(e,r);return t.top=ie(n.top,t.top),t.right=se(n.right,t.right),t.bottom=se(n.bottom,t.bottom),t.left=ie(n.left,t.left),t}),he(e,a));return i.width=i.right-i.left,i.height=i.bottom-i.top,i.x=i.left,i.y=i.top,i}(w(A)?A:A.contextElement||L(e.elements.popper),i,l),k=h(g),T=oe({reference:k,element:y,strategy:"absolute",placement:o}),j=ve(Object.assign({},y,T)),q=d===U?j:k,C={top:O.top-q.top+b.top,bottom:q.bottom-O.bottom+b.bottom,left:O.left-q.left+b.left,right:q.right-O.right+b.right},M=e.modifiersData.offset;if(d===U&&M){var W=M[o];Object.keys(C).forEach((function(e){var t=[N,_].indexOf(e)>=0?1:-1,r=[$,_].indexOf(e)>=0?"y":"x";C[e]+=W[r]*t}))}return C}function xe(e,t,r){return ie(e,se(t,r))}function Ae(e,t,r){return void 0===r&&(r={x:0,y:0}),{top:e.top-t.height-r.y,right:e.right-t.width+r.x,bottom:e.bottom-t.height+r.y,left:e.left-t.width-r.x}}function Ee(e){return[$,N,_,W].some((function(t){return e[t]>=0}))}var Le=Q({defaultModifiers:[ee,ae,{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,r=e.options,n=r.gpuAcceleration,o=void 0===n||n,a=r.adaptive,i=void 0===a||a,s=r.roundOffsets,l=void 0===s||s,c={placement:te(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:o};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,de(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:i,roundOffsets:l})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,de(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var r=t.styles[e]||{},n=t.attributes[e]||{},o=t.elements[e];x(o)&&E(o)&&(Object.assign(o.style,r),Object.keys(n).forEach((function(e){var t=n[e];!1===t?o.removeAttribute(e):o.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,r={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,r.popper),t.styles=r,t.elements.arrow&&Object.assign(t.elements.arrow.style,r.arrow),function(){Object.keys(t.elements).forEach((function(e){var n=t.elements[e],o=t.attributes[e]||{},a=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:r[e]).reduce((function(e,t){return e[t]="",e}),{});x(n)&&E(n)&&(Object.assign(n.style,a),Object.keys(o).forEach((function(e){n.removeAttribute(e)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,r=e.options,n=e.name,o=r.offset,a=void 0===o?[0,0]:o,i=X.reduce((function(e,r){return e[r]=function(e,t,r){var n=te(e),o=[W,$].indexOf(n)>=0?-1:1,a="function"==typeof r?r(Object.assign({},t,{placement:e})):r,i=a[0],s=a[1];return i=i||0,s=(s||0)*o,[W,N].indexOf(n)>=0?{x:s,y:i}:{x:i,y:s}}(r,t.rects,a),e}),{}),s=i[t.placement],l=s.x,c=s.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=l,t.modifiersData.popperOffsets.y+=c),t.modifiersData[n]=i}},{name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,r=e.options,n=e.name;if(!t.modifiersData[n]._skip){for(var o=r.mainAxis,a=void 0===o||o,i=r.altAxis,s=void 0===i||i,l=r.fallbackPlacements,c=r.padding,d=r.boundary,u=r.rootBoundary,f=r.altBoundary,p=r.flipVariations,m=void 0===p||p,b=r.allowedAutoPlacements,v=t.options.placement,h=te(v),g=l||(h!==v&&m?function(e){if(te(e)===H)return[];var t=fe(e);return[me(e),t,me(t)]}(v):[fe(v)]),y=[v].concat(g).reduce((function(e,r){return e.concat(te(r)===H?function(e,t){void 0===t&&(t={});var r=t,n=r.placement,o=r.boundary,a=r.rootBoundary,i=r.padding,s=r.flipVariations,l=r.allowedAutoPlacements,c=void 0===l?X:l,d=re(n),u=d?s?V:V.filter((function(e){return re(e)===d})):R,f=u.filter((function(e){return c.indexOf(e)>=0}));0===f.length&&(f=u);var p=f.reduce((function(t,r){return t[r]=we(e,{placement:r,boundary:o,rootBoundary:a,padding:i})[te(r)],t}),{});return Object.keys(p).sort((function(e,t){return p[e]-p[t]}))}(t,{placement:r,boundary:d,rootBoundary:u,padding:c,flipVariations:m,allowedAutoPlacements:b}):r)}),[]),w=t.rects.reference,x=t.rects.popper,A=new Map,E=!0,L=y[0],O=0;O<y.length;O++){var S=y[O],k=te(S),T=re(S)===I,j=[$,_].indexOf(k)>=0,D=j?"width":"height",q=we(t,{placement:S,boundary:d,rootBoundary:u,altBoundary:f,padding:c}),P=j?T?N:W:T?_:$;w[D]>x[D]&&(P=fe(P));var C=fe(P),M=[];if(a&&M.push(q[k]<=0),s&&M.push(q[P]<=0,q[C]<=0),M.every((function(e){return e}))){L=S,E=!1;break}A.set(S,M)}if(E)for(var B=function(e){var t=y.find((function(t){var r=A.get(t);if(r)return r.slice(0,e).every((function(e){return e}))}));if(t)return L=t,"break"},z=m?3:1;z>0&&"break"!==B(z);z--);t.placement!==L&&(t.modifiersData[n]._skip=!0,t.placement=L,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,r=e.options,n=e.name,o=r.mainAxis,a=void 0===o||o,i=r.altAxis,s=void 0!==i&&i,l=r.boundary,c=r.rootBoundary,d=r.altBoundary,u=r.padding,f=r.tether,p=void 0===f||f,m=r.tetherOffset,b=void 0===m?0:m,v=we(t,{boundary:l,rootBoundary:c,padding:u,altBoundary:d}),h=te(t.placement),g=re(t.placement),y=!g,w=ne(h),x="x"===w?"y":"x",A=t.modifiersData.popperOffsets,E=t.rects.reference,L=t.rects.popper,O="function"==typeof b?b(Object.assign({},t.rects,{placement:t.placement})):b,S={x:0,y:0};if(A){if(a||s){var k="y"===w?$:W,T="y"===w?_:N,D="y"===w?"height":"width",q=A[w],P=A[w]+v[k],C=A[w]-v[T],M=p?-L[D]/2:0,H=g===I?E[D]:L[D],R=g===I?-L[D]:-E[D],z=t.elements.arrow,F=p&&z?j(z):{width:0,height:0},U=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},V=U[k],X=U[T],Y=xe(0,E[D],F[D]),G=y?E[D]/2-M-Y-V-O:H-Y-V-O,J=y?-E[D]/2+M+Y+X+O:R+Y+X+O,K=t.elements.arrow&&B(t.elements.arrow),Q=K?"y"===w?K.clientTop||0:K.clientLeft||0:0,Z=t.modifiersData.offset?t.modifiersData.offset[t.placement][w]:0,ee=A[w]+G-Z-Q,oe=A[w]+J-Z;if(a){var ae=xe(p?se(P,ee):P,q,p?ie(C,oe):C);A[w]=ae,S[w]=ae-q}if(s){var le="x"===w?$:W,ce="x"===w?_:N,de=A[x],ue=de+v[le],fe=de-v[ce],pe=xe(p?se(ue,ee):ue,de,p?ie(fe,oe):fe);A[x]=pe,S[x]=pe-de}}t.modifiersData[n]=S}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,r=e.state,n=e.name,o=e.options,a=r.elements.arrow,i=r.modifiersData.popperOffsets,s=te(r.placement),l=ne(s),c=[W,N].indexOf(s)>=0?"height":"width";if(a&&i){var d=function(e,t){return ge("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:ye(e,R))}(o.padding,r),u=j(a),f="y"===l?$:W,p="y"===l?_:N,m=r.rects.reference[c]+r.rects.reference[l]-i[l]-r.rects.popper[c],b=i[l]-r.rects.reference[l],v=B(a),h=v?"y"===l?v.clientHeight||0:v.clientWidth||0:0,g=m/2-b/2,y=d[f],w=h-u[c]-d[p],x=h/2-u[c]/2+g,A=xe(y,x,w),E=l;r.modifiersData[n]=((t={})[E]=A,t.centerOffset=A-x,t)}},effect:function(e){var t=e.state,r=e.options.element,n=void 0===r?"[data-popper-arrow]":r;null!=n&&("string"!=typeof n||(n=t.elements.popper.querySelector(n)))&&be(t.elements.popper,n)&&(t.elements.arrow=n)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,r=e.name,n=t.rects.reference,o=t.rects.popper,a=t.modifiersData.preventOverflow,i=we(t,{elementContext:"reference"}),s=we(t,{altBoundary:!0}),l=Ae(i,n),c=Ae(s,o,a),d=Ee(l),u=Ee(c);t.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:u},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":u})}}]}),Oe=r(435);const Se=parseInt(Oe.size.baseline.value,10),ke="mds-popover--active",Te={init:()=>{Array.from(document.querySelectorAll(".js-mds-popover-trigger")).forEach((e=>{const t=`${e.getAttribute("id")}-content`,r=document.getElementById(t),n=r.dataset?r.dataset.placement:null,o=Le(e,r,{placement:n||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,3*Se]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),r.setAttribute("aria-hidden","true"),e.addEventListener("click",(t=>{t.preventDefault(),o.update(),r.classList.toggle(ke),Te.setAriaAttr(e,r,ke)})),document.addEventListener("mousedown",(t=>{Te.hide(e,r,o,ke,t)})),document.addEventListener("keydown",(t=>{Te.hide(e,r,o,ke,t)}))}))},hide:(e,t,r,n,o)=>{e.contains(o.target)||r.state.elements.popper.contains(o.target)||!t.classList.contains(n)||(t.classList.remove(n),Te.setAriaAttr(e,t,n))},setAriaAttr:(e,t,r)=>{t.classList.contains(r)?(e.setAttribute("aria-expanded","true"),t.removeAttribute("aria-hidden")):(e.setAttribute("aria-expanded","false"),t.setAttribute("aria-hidden","true"))}},je=Te,De=r(435),qe=parseInt(De.size.breakpoint.md.value,10),Pe="data-modal-id",Ce="mds-modal--active";let Me;const Be={init:()=>{window.innerWidth>qe&&Array.from(document.querySelectorAll(`[${Pe}]`)).forEach((e=>{const t=e.getAttribute(Pe),r=document.getElementById(t),n=Array.from(r.querySelectorAll(".js-mds-modal-close")),o=r.getAttribute("data-site-container"),a=document.getElementById(o);let i=r.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]');i=Array.prototype.slice.call(i);const s=i[0],l=i[i.length-1];e.addEventListener("click",(e=>{e.preventDefault(),Be.open(r,s,a)})),r.addEventListener("click",(e=>{e.target===r&&Be.close(r,Me,a)})),r.addEventListener("keydown",(e=>{Be.trapFocus(e,s,l),"Escape"!==e.key&&"Esc"!==e.key||Be.close(r,Me,a)})),n.forEach((e=>{e.addEventListener("click",(()=>{Be.close(r,Me,a)}))}))}))},open:(e,t,r)=>{Me=document.activeElement,e.classList.add(Ce),t.focus(),r.setAttribute("aria-hidden","true")},close:(e,t,r)=>{r.removeAttribute("aria-hidden"),e.classList.remove(Ce),t.focus()},trapFocus:(e,t,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===t&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),t.focus()))}},$e=Be,_e="mds-form-element--selected-file",Ne="mds-form-element--dragover",We={init:()=>{We.isBrowserIE()||Array.from(document.querySelectorAll(".mds-form-element--file")).forEach((e=>{e.classList.add("mds-form-element--file-supported");const t=e.querySelector(".mds-file-upload__file-name"),r=e.querySelector("input[type=file]"),n=e.querySelector(".mds-file-upload__remove-button");r.addEventListener("change",(()=>{r.files&&r.files.length&&(t.textContent=r.files[0].name,e.classList.add(_e),n.focus())})),n.addEventListener("click",(n=>{n.preventDefault(),r.value="",t.textContent="",e.classList.remove(_e),r.focus()})),["dragover","dragenter"].forEach((t=>{r.addEventListener(t,(t=>{t.stopPropagation(),e.classList.add(Ne)}))})),["dragleave","dragend","drop"].forEach((t=>{r.addEventListener(t,(t=>{t.stopPropagation(),e.classList.remove(Ne)}))}))}))},isBrowserIE:()=>!!window.document.documentMode},He=We,Re={init:()=>{Array.from(document.querySelectorAll(".mds-form-element--character-count")).forEach((e=>{const t=e.querySelector(".mds-form-control"),r=t.getAttribute("maxlength"),n=e.querySelector(".mds-form-message--character-count"),o=e.querySelector(".js-character-count-number");t.removeAttribute("maxlength"),Re.updateCounter(t,r,o,n),t.addEventListener("keyup",(e=>{e.stopPropagation(),Re.updateCounter(t,r,o,n)}))}))},updateCounter:(e,t,r,n)=>{const o=e.value.match(/(\r\n|\n|\r)/g),a=t-(e.value.length+(o?o.length:0));r.textContent=a,a<0?n.classList.add("mds-form-message--error"):n.classList.remove("mds-form-message--error")}},Ie=Re,ze={init:()=>{Array.from(document.querySelectorAll(".js-mds-button-double-submit")).forEach((e=>{e.addEventListener("click",(()=>{ze.toggleDisable(e)}))}))},toggleDisable:e=>{setTimeout((()=>{e.setAttribute("disabled","")}),1),setTimeout((()=>{e.removeAttribute("disabled")}),1e3)}},Fe=ze,Ue=()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach((e=>{const t=document.createElement("div");t.classList.add("mds-fluid-video"),t.innerHTML=e.outerHTML,e.replaceWith(t)}))};document.addEventListener("DOMContentLoaded",(()=>{c.init(),v.init(),$e.init(),He.init(),Ie.init(),je.init(),Fe.init(),Ue()}))})(),(()=>{"use strict";r(807),r(616),r(516),r(626),r(333)})()})();
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@madgex/design-system",
|
|
3
3
|
"author": "Madgex",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "7.0.
|
|
5
|
+
"version": "7.0.2",
|
|
6
6
|
"main": "dist/js/index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": "./dist/js/index.js",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"webpack-dev-server": "^3.11.2",
|
|
99
99
|
"webpack-stream": "^6.1.2"
|
|
100
100
|
},
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "a81c69546c6625ede4028b4fa18d66e2d0bd40c0"
|
|
102
102
|
}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `id`: it will be used to create the id on the trigger and the content **required**
|
|
6
4
|
- `triggerLabel`: label of the trigger button. Be as descriptive as you can as it will help for a11y. **required**
|
|
@@ -24,7 +22,7 @@
|
|
|
24
22
|
- `contentFirst`: Boolean, places the content above the trigger, pushing the trigger down below the content when open
|
|
25
23
|
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
## Accessibility
|
|
28
26
|
|
|
29
27
|
When javascript is enabled, accordion will contains `aria-label` and `aria-expanded` for screen readers.
|
|
30
28
|
`triggerIsNonClosing` will set `aria-disabled` and `aria-expanded` to true once the accordion has been triggered
|
|
@@ -32,7 +30,7 @@ Use a descriptive label for the trigger.
|
|
|
32
30
|
|
|
33
31
|
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.
|
|
34
32
|
|
|
35
|
-
|
|
33
|
+
## Design usage guidelines
|
|
36
34
|
|
|
37
35
|
Where possible, the defaults should remain as they are to ensure we remain consistent across the platform, though there are a few areas where you may need to step
|
|
38
36
|
outside these guidelines, this offers an insight into the design decisions to best ensure you understand context and usage.
|
|
@@ -41,7 +39,7 @@ outside these guidelines, this offers an insight into the design decisions to be
|
|
|
41
39
|
- `collapseIcon`: Where possible, we should ensure that this remains unchanged as the chevrons 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`
|
|
42
40
|
- `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.
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
## Notes
|
|
45
43
|
|
|
46
44
|
- 09/12/20 - Non closing accordion - Moved `mds-visually-hidden` to trigger's parent. We noticed an issue on NVDA in Chrome, where the changes on the button like `aria-expanded` or `aria-disabled` were not announced when the button itself was visually hidden.
|
|
47
45
|
|
|
@@ -51,25 +49,3 @@ References:
|
|
|
51
49
|
|
|
52
50
|
- https://heydonworks.com/article/aria-controls-is-poop/ (that article's title says it all)
|
|
53
51
|
- https://a11ysupport.io/tech/aria/aria-controls_attribute
|
|
54
|
-
|
|
55
|
-
## Vue
|
|
56
|
-
|
|
57
|
-
### slots
|
|
58
|
-
|
|
59
|
-
- `default <slot/>`: this can also be a custom component or html **required**
|
|
60
|
-
- `triggerLabel`: label of the trigger button. Be as descriptive as you can as it will help for a11y. **required**
|
|
61
|
-
- `triggerLabelActive`: label of the trigger button when accordion is expanded
|
|
62
|
-
|
|
63
|
-
### Parameters
|
|
64
|
-
|
|
65
|
-
- `v-model:expanded`: if `true`, the accordion will be expanded by default **required**
|
|
66
|
-
- `triggerNoJsHidden`: trigger button to show/hide when js is disabled
|
|
67
|
-
- `triggerElement`: trigger is `p` tag by default, you can pass an html tag if needed (`h2`, `h3`, `div`)
|
|
68
|
-
Note: Don't use `span` as it creates a bug with VoiceOver where you can't access the expanded content when the trigger is within an inline, inline block or floated element.
|
|
69
|
-
- `triggerClasses`: class will be added to the trigger (useful to change the font size)
|
|
70
|
-
- `triggerIsNonClosing`: boolean to visually hide (for accessibility) the trigger and keep the accordion expanded
|
|
71
|
-
- `activateOnMediaQuery`: if media query is supplied (`(min-width: 600px)`), the accordion will be enabled only when query is true, otherwise content will show as if not an accordion
|
|
72
|
-
- `expandIcon`: This allows you to override the iconography for the expand icon (default: chevron-down) - See design usage guidelines
|
|
73
|
-
- `collapseIcon`: This allows you to override the iconography for the collapse icon (default: chevron-up) - See design usage guidelines
|
|
74
|
-
- `leftAligned`: This will determine if the icon should sit on the left or the right of the label (default: false) - See design usage guidelines
|
|
75
|
-
- `hideTriggerLabel`: Boolean
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `text`: Text on the button
|
|
6
4
|
- `html`: if you want to add html markup instead of plain text, use `html` attribute instead
|
|
@@ -12,7 +10,7 @@
|
|
|
12
10
|
- `attributes`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
|
|
13
11
|
- `type`: by default it will be `submit`
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
## Full width button
|
|
16
14
|
|
|
17
15
|
We have 2 helpers classes that can help you achieve full width buttons at different sizes.
|
|
18
16
|
`.mds-width-full` and `.mds-width-auto`.
|
|
@@ -23,25 +21,8 @@ For example, if you would like your button to be full width at mobile size and h
|
|
|
23
21
|
|
|
24
22
|
Both helper classes are set with breakpoints. Just add the name of the class followed by the breakpoint name (`sm`, `md`, `lg`, `xl`) and the value (`full` or `auto`).
|
|
25
23
|
|
|
26
|
-
|
|
24
|
+
## Prevent Double Submit
|
|
27
25
|
|
|
28
26
|
Helper class `.js-mds-button-double-submit`
|
|
29
27
|
|
|
30
28
|
If you click the form button twice in a row (slower than dobule click but faster than submitting), the browser can submit the form twice. Adding this class will disable the button for 1 second to prevent a double submission.
|
|
31
|
-
|
|
32
|
-
## Vue
|
|
33
|
-
|
|
34
|
-
### Slots
|
|
35
|
-
|
|
36
|
-
- `default <slot/>` - Content of the `<button />` element.
|
|
37
|
-
|
|
38
|
-
### Props
|
|
39
|
-
|
|
40
|
-
- `element`: `String` _optional_ - Root element type (e.g. `input`). If `to` is provided, `<a>` or `<RouterLink>` will be automatically used. Default value: `'button'`.
|
|
41
|
-
- `type`: `String` _optional_ - `type` attribute for root element. Default value: `'submit'`
|
|
42
|
-
- `to`: `String` _optional_ - A url (defaults `element` to `<a>`) , or an object (defaults `element` to `<RouterLink>`).
|
|
43
|
-
- `preventDoubleSubmit`: `Boolean`_optional_ - Throttle `click` event by 700ms. Default value: `false`
|
|
44
|
-
|
|
45
|
-
### Notes
|
|
46
|
-
|
|
47
|
-
Thanks to Vue's _attribute inheritance_ (which merges HTML attributes directly into the root element) we do not need `id`, `name`, `disabled`, `classes` or `attributes` props.
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Setup
|
|
1
|
+
## Setup
|
|
4
2
|
|
|
5
3
|
**Default path of the icons file**:
|
|
6
4
|
|
|
@@ -9,7 +7,7 @@ https://mozilla.github.io/nunjucks/api.html#addglobal
|
|
|
9
7
|
|
|
10
8
|
If you prefer using inline svgs, don't set the path and include the file `icons-inline.svg` in your template instead.
|
|
11
9
|
|
|
12
|
-
|
|
10
|
+
## Parameters
|
|
13
11
|
|
|
14
12
|
- `iconName`: the name of the icon you want to use
|
|
15
13
|
- `classes`: add extra CSS classes to the icon
|
|
@@ -18,13 +16,13 @@ If you prefer using inline svgs, don't set the path and include the file `icons-
|
|
|
18
16
|
- `hasContainer`: `true/false` - used to add a container arount the icon _optional_
|
|
19
17
|
- `containerClasses`: classes for the container (see Container notes below)
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
## Accessibility
|
|
22
20
|
|
|
23
21
|
The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.
|
|
24
22
|
|
|
25
23
|
If using the 'Icon' macro, simply pass the parameter `visuallyHiddenLabel` with the label you'd like as its value. It will add a `<span>` next to the SVG that will be visually hidden but accessible to screen readers (thanks to the class `mds-visually-hidden`).
|
|
26
24
|
|
|
27
|
-
|
|
25
|
+
## Sizes
|
|
28
26
|
|
|
29
27
|
By default, the icon size (width and height) is set to 1em.
|
|
30
28
|
We also have 3 fixed sizes:
|
|
@@ -39,11 +37,11 @@ We also have 3 fixed sizes:
|
|
|
39
37
|
|
|
40
38
|
If using an icon next to some text, use classes `mds-icon--before` or `mds-icon--after` to add `margin-right` or `margin-left` to the icon.
|
|
41
39
|
|
|
42
|
-
|
|
40
|
+
## Alignment
|
|
43
41
|
|
|
44
42
|
To make sure that the icons have the same baseline as the text, we are adding `top: 0.125em` on them which corresponds to the icon offset divided by the size of the icon. Please see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 to see how it is calculated.
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
## Container
|
|
47
45
|
|
|
48
46
|
You can use the attributes `hasContainer` and `containerClasses` to add an icon within an container.
|
|
49
47
|
We currently only have a circle.
|
|
@@ -62,20 +60,3 @@ If the icon is next to some text, you can also add `mds-icon-container--before`
|
|
|
62
60
|
### IE support
|
|
63
61
|
|
|
64
62
|
Internet Explorer doesn't support `<use href="url" />` if we use a URL in the href. We are using https://github.com/Keyamoon/svgxuse as a polyfill.
|
|
65
|
-
|
|
66
|
-
## Vue
|
|
67
|
-
|
|
68
|
-
### Props
|
|
69
|
-
|
|
70
|
-
- `iconName`: `String` - The name of the icon you want to use. **Required**.
|
|
71
|
-
- `classes`: `String` - Add extra CSS classes to the icon. _Optional_, default value: `''`.
|
|
72
|
-
- `path`: `String` - If you need to use a different path than your default. _Optional_.
|
|
73
|
-
- `visuallyHiddenLabel`: `String` - Add a visually hidden label (see Accessibility notes above). _Optional_, default value: `''`.
|
|
74
|
-
- `hasContainer`: `Boolean` - Used to add a container arount the icon. _Optional_, default value: `false`.
|
|
75
|
-
- `containerClasses`: `String` - Classes for the container. _Optional_, default value: `''`.
|
|
76
|
-
|
|
77
|
-
### Notes
|
|
78
|
-
|
|
79
|
-
Unlike the Nunjucks version, the wrapper `<span>` in this Vue component will always be added.
|
|
80
|
-
|
|
81
|
-
We're conditionally attaching the class `mds-icon-container` and the classes passed in the `containerClasses` prop to the `<span>` only when `hasContainer` is `true`.
|
|
@@ -46,15 +46,3 @@ options: [
|
|
|
46
46
|
## Accessibility
|
|
47
47
|
|
|
48
48
|
This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that.
|
|
49
|
-
|
|
50
|
-
# Vue
|
|
51
|
-
|
|
52
|
-
## Parameters
|
|
53
|
-
|
|
54
|
-
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
55
|
-
- `id`: The id attribute of the field, **required**
|
|
56
|
-
- `disabled`: Should the input be disabled **optional**,
|
|
57
|
-
- `describedBy`: adding aria-describeby to the fieldset (if multiple checkboxes) or the input field if only one checkbox - **optional**
|
|
58
|
-
- `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes`
|
|
59
|
-
- `v-model (:modelValue)`: Preselected checkboxes - Array **optional**
|
|
60
|
-
- `i18n`: Text to translate/customise (object) **optional**
|
|
@@ -27,18 +27,8 @@ i18n: {
|
|
|
27
27
|
}
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
## Props - Vue component
|
|
31
|
-
|
|
32
|
-
- `comboboxid`: the id of your combobox. Populated automatically from Nunjucks parameters
|
|
33
|
-
- `labeltext`: the text used in the label. Populated automatically from Nunjucks parameters
|
|
34
|
-
- `placeholder`: the placeholder for your input. Populated automatically from Nunjucks parameters
|
|
35
|
-
- `name`: the name of the input for form submission. Will only be populated automatically if fallbackTo is 'input'
|
|
36
|
-
- `value`: a default value for the combobox input. Populated automatically from Nunjucks parameters
|
|
37
|
-
- `options`: an array of options, which should be objects with a `label` and a `value`. The array should be provided externally by selecting the custom `<mds-combobox>` element and setting it as an attribute
|
|
38
|
-
- `filterOptions`: whether or not the Vue component should internally filter the options array according to the search input (defaults to true)
|
|
39
|
-
- `i18n`: Text to translate/customise. Populated automatically from Nunjucks parameters
|
|
40
|
-
|
|
41
30
|
## Events
|
|
31
|
+
|
|
42
32
|
The following events are emiited.
|
|
43
33
|
- `select-option`
|
|
44
34
|
- `search`
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `labelText`: The label for the input **required**,
|
|
6
4
|
- `hideLabel`: true/false - Add this parameter if you need to visually hide the label. The text of the label will the used by default as a placeholder, unless overridden by the placeholder parameter **optional**
|
|
@@ -28,7 +26,7 @@ i18n: {
|
|
|
28
26
|
}
|
|
29
27
|
```
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
## Accessibility
|
|
32
30
|
|
|
33
31
|
This input relies entirely on the browser standard input and applies the accessibility provided by that.
|
|
34
32
|
Additional accessibility aria attributes are applied to the label `aria-live=polite` to inform users of help text or error messages attributed to a form
|
|
@@ -38,19 +36,6 @@ The placeholder can also be a problem given its lower contrast so don't rely on
|
|
|
38
36
|
|
|
39
37
|
Useful article: https://www.nngroup.com/articles/form-design-placeholders/
|
|
40
38
|
|
|
41
|
-
|
|
39
|
+
## Note
|
|
42
40
|
|
|
43
41
|
We have not placed any specific ruleing to stop `Select`/`Radio`/`Checkbox` being selected but have made no effort to style them
|
|
44
|
-
|
|
45
|
-
## Vue
|
|
46
|
-
|
|
47
|
-
### Parameters
|
|
48
|
-
|
|
49
|
-
- `v-model (:modelValue)`: The value of the input
|
|
50
|
-
- `error`: `Boolean` _optional_ - Used for a11y (`:aria-invalid` attribute). Default: `false`.
|
|
51
|
-
|
|
52
|
-
### Notes
|
|
53
|
-
|
|
54
|
-
In the Nunjucks version, the `placeholder` attribute defaults to the value of `labelText` when the label is visually hidden (and there is no `placeholder` already). This behaviour is not followed by Vue, as we have separate component for the input and the label.
|
|
55
|
-
|
|
56
|
-
-
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `id`: The id for this component **optional**
|
|
6
4
|
- `inputId`: The id for the component this is a label for **required**
|
|
@@ -18,29 +16,6 @@ i18n: {
|
|
|
18
16
|
}
|
|
19
17
|
```
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
## Accessibility
|
|
22
20
|
|
|
23
21
|
Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form.
|
|
24
|
-
|
|
25
|
-
## Vue
|
|
26
|
-
|
|
27
|
-
### Slots
|
|
28
|
-
|
|
29
|
-
- `default <slot/>`: The label text/html
|
|
30
|
-
- `tooltip <slot/>`: The tooltip text/html (If no content is provided no tooltip will be displayed)
|
|
31
|
-
|
|
32
|
-
### Props
|
|
33
|
-
|
|
34
|
-
- `inputId`: `String` **required** - The `id` attribute for the component this is a label for.
|
|
35
|
-
- `id`: `String` _optional_ - The `id`attribute for this component. No default.
|
|
36
|
-
- `optional`: `Boolean` _optional_ - Is the input optional, otherwise required. Default: `false`.
|
|
37
|
-
- `isLegend`: `Boolean` _optional_ - If the component should be a `<legend>` element instead of a `<label>`. Default: `false`.
|
|
38
|
-
- `hideLabel`: `Boolean` _optional_ - If label visually hidden. The text of the label will the used by default as a placeholder.
|
|
39
|
-
**(please see accessibility notes regarding the use of this parameter)**
|
|
40
|
-
- `i18n`: `Object` _optional_ - Text to translate/customise. Default: `{}`.
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
i18n: {
|
|
44
|
-
requiredIcon: 'required', // visually hidden text for the required icon
|
|
45
|
-
}
|
|
46
|
-
```
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `labelText`: The label for the input **required**,
|
|
6
4
|
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
@@ -41,32 +39,6 @@ options: [
|
|
|
41
39
|
],
|
|
42
40
|
```
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
## Accessibility
|
|
45
43
|
|
|
46
44
|
This input relies entirely on the browser standard radio input and applies the accessibility provided by that.
|
|
47
|
-
|
|
48
|
-
## Vue
|
|
49
|
-
|
|
50
|
-
### Slots
|
|
51
|
-
|
|
52
|
-
- `default <slot/>` - Content of the `<label>` for the input.
|
|
53
|
-
|
|
54
|
-
### Props
|
|
55
|
-
|
|
56
|
-
- `name`: `String` **required** - `name` attribute for the input field.
|
|
57
|
-
- `id`: `String` **required** - `id` attribute for the input field, `for` attribute for the label field.
|
|
58
|
-
- `v-model`: `Any type` _optional_ - Reactive value for the input. No default value.
|
|
59
|
-
- `value`: `Any type` _optional_ - `value` attribute for the input field. No default value.
|
|
60
|
-
- `disabled`: `Boolean` _optional_ - `disabled` attribute for input field. Default value: `false`.
|
|
61
|
-
|
|
62
|
-
### Notes
|
|
63
|
-
|
|
64
|
-
> When using multiple `<MdsRadio>` sharing the same `v-model` remember to wrap them in a `<fieldset>`.
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<fieldset>
|
|
68
|
-
<mds-radio v-for="item in radios" v-model="sharedModel" :name="name" :id="item.id" :key="item.id" :value="item.value">
|
|
69
|
-
{{item.label}}
|
|
70
|
-
</mds-radio>
|
|
71
|
-
</fieldset>
|
|
72
|
-
```
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `name`: The name of the input field, uses ID unless specified **optional**,
|
|
6
4
|
- `id`: The id attribute of the field, **required**
|
|
@@ -44,26 +42,6 @@ options: {
|
|
|
44
42
|
}
|
|
45
43
|
```
|
|
46
44
|
|
|
47
|
-
|
|
45
|
+
## Accessibility
|
|
48
46
|
|
|
49
47
|
This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that.
|
|
50
|
-
|
|
51
|
-
## Vue
|
|
52
|
-
|
|
53
|
-
### Parameters
|
|
54
|
-
|
|
55
|
-
- `v-model (:modelValue)`: Boolean is checked (true/false), or an array of checked values see https://vuejs.org/guide/essentials/forms.html#checkbox
|
|
56
|
-
- `value`: value of checbox
|
|
57
|
-
- `name`: The name of the input field **optional**,
|
|
58
|
-
- `id`: The id attribute of the field, **required**
|
|
59
|
-
- `optional`: Boolean , default to false **optional**,
|
|
60
|
-
- `disabled`: Should the input be disabled **optional**,
|
|
61
|
-
- `describedBy`: adding aria-describeby to the input field - **optional**
|
|
62
|
-
- `i18n`: Text to translate/customise (object) **optional**
|
|
63
|
-
|
|
64
|
-
```
|
|
65
|
-
i18n: {
|
|
66
|
-
requiredIcon: 'required', // visually hidden text for the required icon (label)
|
|
67
|
-
errorIcon: default is 'Error', // visually hidden text for the error icon
|
|
68
|
-
}
|
|
69
|
-
```
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
##
|
|
2
|
-
|
|
3
|
-
### Parameters
|
|
1
|
+
## Parameters
|
|
4
2
|
|
|
5
3
|
- `classes`: add extra CSS classes to the component
|
|
6
4
|
- `hideIcons`: hide caret icons
|
|
@@ -23,23 +21,10 @@ i18n: {
|
|
|
23
21
|
}
|
|
24
22
|
```
|
|
25
23
|
|
|
26
|
-
|
|
24
|
+
## Accessibility
|
|
27
25
|
|
|
28
26
|
We use aria labels to provide more context about the navigation element and the links.
|
|
29
27
|
|
|
30
28
|
Adding an aria label on the `<nav>` element (here `navAriaLabel`) allow an assistive technology user to be able to quickly understand the purpose of the landmark.
|
|
31
29
|
|
|
32
30
|
As for the links, since they can be read out of context of the page, it is important to provide descriptive text. Instead of just using "Next" which doesn't mean much out of context, please add "Next job/article/event..." for the aria label as it is clearer to the user what clicking on the link will do.
|
|
33
|
-
|
|
34
|
-
## Vue
|
|
35
|
-
|
|
36
|
-
### Props
|
|
37
|
-
|
|
38
|
-
- `prevUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the previous link. _Optional prop_, default value: `null`.
|
|
39
|
-
- `nextUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the next link. _Optional prop_, default value: `null`.
|
|
40
|
-
- `backToUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the "back to" link. _Optional prop_, default value: `null`.
|
|
41
|
-
- `hideIcons`: `Boolean` - Hide caret icons. _Optional_, default value: `false`.
|
|
42
|
-
- `classes`: `String` - Add extra CSS classes to the component. _Optional prop_, default value: `''`.
|
|
43
|
-
- `prevExtraLabel`: `String` - Extra label of the previous link (i.e. title of the page). _Optional_, default value: `''`.
|
|
44
|
-
- `nextExtraLabel`: `String` - Extra label of the next link (i.e. title of the page). _Optional_, default value: `''`.
|
|
45
|
-
- `i18n`: `Object` - Text to translate/customise. _Optional_, default value: `''`.
|