@madgex/design-system 13.3.2 → 13.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/index.css +1 -1
- package/dist/js/components/mds-image-cropper-standalone.js +4 -0
- package/dist/js/image-cropper-BlqRRHAU.js +58 -0
- package/dist/js/index-fractal.js +2 -2
- package/dist/js/index.js +1 -1
- package/package.json +6 -4
- package/src/components/image-cropper/README.md +80 -0
- package/src/components/image-cropper/helpers.js +229 -0
- package/src/components/image-cropper/helpers.spec.js +111 -0
- package/src/components/image-cropper/image-cropper-standalone.scss +2 -0
- package/src/components/image-cropper/image-cropper-touch-area.js +270 -0
- package/src/components/image-cropper/image-cropper.config.js +6 -0
- package/src/components/image-cropper/image-cropper.js +447 -0
- package/src/components/image-cropper/image-cropper.njk +99 -0
- package/src/components/image-cropper/image-cropper.scss +93 -0
- package/src/components/image-cropper/mds-image-cropper-standalone.js +39 -0
- package/src/components/inputs/_checkbox-elem/_template.njk +1 -0
- package/src/components/inputs/checkbox-list/_template.njk +11 -2
- package/src/components/inputs/checkbox-list/checkbox-list.config.js +8 -0
- package/src/js/index-fractal.js +1 -0
- package/src/js/index.js +4 -1
- package/src/scss/components/__index.scss +1 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
function _(s=0,t=0,e){return s>=t*e?{width:t*e,height:t}:{width:s,height:s/e}}function x(s,t,e,i){return{x:y(s.x,t.width,e.width,i),y:y(s.y,t.height,e.height,i)}}function y(s,t,e,i){let o=t*i/2-e/2;return i<1&&(o=e/2-t*i/2),Math.min(o,Math.max(s,-o))}function L({crop:s,imageSize:t,cropSize:e,aspect:i,zoom:o,restrictPosition:a=!0}){if(!e?.width)return;const r=a?M:(g,p)=>p,n={x:r(100,((t.width-e.width/o)/2-s.x/o)/t.width*100),y:r(100,((t.height-e.height/o)/2-s.y/o)/t.height*100),width:r(100,e.width/t.width*100/o),height:r(100,e.height/t.height*100/o)},c=r(t.naturalWidth,n.width*t.naturalWidth/100,!0),h=r(t.naturalHeight,n.height*t.naturalHeight/100,!0),u=t.naturalWidth>=t.naturalHeight*i?{width:Math.round(h*i),height:h}:{width:c,height:Math.round(c/i)},m={...u,x:r(t.naturalWidth-u.width,n.x*t.naturalWidth/100,!0),y:r(t.naturalHeight-u.height,n.y*t.naturalHeight/100,!0)};return{percent:n,pixels:m}}function M(s,t,e=!1){const i=e?Math.round(t):t;return Math.min(s,Math.max(0,i))}const C=s=>new Promise((t,e)=>{const i=new Image;i.addEventListener("load",()=>t(i)),i.addEventListener("error",o=>e(o)),i.setAttribute("crossOrigin","anonymous"),i.src=s}),P=Math.PI/180;async function k({imageEl:s,crop:t,rotateDeg:e=0,format:i="png",backgroundFill:o,width:a,height:r}){if(!s||!t)return null;const n=await C(s.src),c=document.createElement("canvas"),h=c.getContext("2d");if(!h)return null;const l=a?a/t.width:1,u=r?r/t.height:1;c.width=Math.floor(t.width*l),c.height=Math.floor(t.height*u),h.imageSmoothingQuality="high";const m=t.x*l,g=t.y*u,p=e*P,v=n.naturalWidth/2*l,b=n.naturalHeight/2*u;return h.save(),h.fillStyle=o,h.fillRect(0,0,c.width,c.height),h.translate(-m,-g),h.translate(v,b),h.rotate(p),h.translate(-v,-b),h.drawImage(n,0,0,n.naturalWidth,n.naturalHeight,0,0,n.naturalWidth*l,n.naturalHeight*u),new Promise((f,w)=>{c.toBlob(A=>{try{f(A)}catch(E){w(E)}},`image/${i}`,.9)})}function d(s){return s&&(new DOMParser().parseFromString(s,"text/html").body.textContent||"")}class D extends HTMLElement{#d={x:0,y:0};#l={x:0,y:0};#f=0;#v=null;#n=null;#P=1;constructor(){super()}get rootNode(){return this}get#e(){return this.getRootNode({composed:!0})}connectedCallback(){this.create(),this.setAttribute("tabindex","0")}disconnectedCallback(){this.destroy()}#i(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}create(){this.addEventListener("gesturestart",this.#g),this.addEventListener("gesturechange",this.#g),this.addEventListener("touchstart",this.#r),this.addEventListener("mousedown",this.#h),this.addEventListener("wheel",this.#c,{passive:!1}),this.addEventListener("keydown",this.#y)}destroy(){this.removeEventListener("gesturestart",this.#g),this.removeEventListener("gesturechange",this.#g),this.removeEventListener("touchstart",this.#r),this.removeEventListener("mousedown",this.#h),this.removeEventListener("wheel",this.#c),this.removeEventListener("keydown",this.#y),this.#k()}get#t(){const t=this.getAttribute("position-x"),e=this.getAttribute("position-y");return{x:t?parseFloat(t):0,y:e?parseFloat(e):0}}set#t({x:t,y:e}){this.#i("position",{x:t,y:e})}get#o(){return parseFloat(this.getAttribute("zoom")||"1")}set#o(t){this.#i("zoom",t)}get#b(){return parseFloat(this.getAttribute("min-zoom")||"1")}get#x(){return parseFloat(this.getAttribute("max-zoom")||"3")}#w(t,e){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}#A(t,e){return Math.sqrt(Math.pow(t.y-e.y,2)+Math.pow(t.x-e.x,2))}#g=t=>{t.preventDefault()};#h=t=>{t.preventDefault(),this.#e.addEventListener("mousemove",this.#s),this.#e.addEventListener("mouseup",this.#m),this.#a({x:t.clientX,y:t.clientY})};#s=t=>{this.#E({x:t.clientX,y:t.clientY})};#r=t=>{t.preventDefault(),this.#e.addEventListener("touchmove",this.#u,{passive:!1}),this.#e.addEventListener("touchend",this.#m),t.touches.length===2?this.#_(t):t.touches.length===1&&this.#a({x:t.touches[0].clientX,y:t.touches[0].clientY})};#u=t=>{t.preventDefault(),t.touches.length===2?this.#L(t):t.touches.length===1&&this.#E({x:t.touches[0].clientX,y:t.touches[0].clientY})};#a({x:t,y:e}){this.#d={x:t,y:e},this.#l={x:this.#t.x,y:this.#t.y}}#E({x:t,y:e}){this.#v&&window.cancelAnimationFrame(this.#v),this.#v=window.requestAnimationFrame(()=>{if(t===void 0||e===void 0)return;const i=t-this.#d.x,o=e-this.#d.y,a={x:this.#l.x+i,y:this.#l.y+o};this.#t=a})}#m=()=>{this.#k(),this.#i("dragstopped")};#_=t=>{const e={x:t.touches[0].clientX,y:t.touches[0].clientY},i={x:t.touches[1].clientX,y:t.touches[1].clientY};this.#f=this.#A(e,i),this.#a(this.#w(e,i))};#L=t=>{const e={x:t.touches[0].clientX,y:t.touches[0].clientY},i={x:t.touches[1].clientX,y:t.touches[1].clientY},o=this.#w(e,i);this.#E(o),this.#n&&window.cancelAnimationFrame(this.#n),this.#n=window.requestAnimationFrame(()=>{const a=this.#A(e,i),r=this.#o*(a/this.#f);this.#M(r,o),this.#f=a})};#c=t=>{t.preventDefault();const e={x:t.clientX,y:t.clientY},i=this.#o-t.deltaY*this.#P/200;this.#M(i,e)};#y=t=>{switch(t.key){case"ArrowDown":t.preventDefault(),this.#t={x:this.#t.x,y:this.#t.y+10};break;case"ArrowUp":t.preventDefault(),this.#t={x:this.#t.x,y:this.#t.y-10};break;case"ArrowLeft":t.preventDefault(),this.#t={x:this.#t.x-10,y:this.#t.y};break;case"ArrowRight":t.preventDefault(),this.#t={x:this.#t.x+10,y:this.#t.y};break;case"PageUp":t.preventDefault(),this.#o=Math.min(this.#x,Math.max(this.#o+.1,this.#b));break;case"PageDown":t.preventDefault(),this.#o=Math.min(this.#x,Math.max(this.#o-.1,this.#b));break;default:return}};#k(){this.#e.removeEventListener("mousemove",this.#s),this.#e.removeEventListener("mouseup",this.#m),this.#e.removeEventListener("touchmove",this.#u),this.#e.removeEventListener("touchend",this.#m)}#p({x:t,y:e}){const i=this.getBoundingClientRect();if(!i)throw new Error("The element is not mounted");return{x:i.width/2-(t-i.left),y:i.height/2-(e-i.top)}}#D({x:t,y:e}){return{x:(t+this.#t.x)/this.#o,y:(e+this.#t.y)/this.#o}}#M(t,e){const i=this.#p(e),o=this.#D(i);this.#o=Math.min(this.#x,Math.max(t,this.#b));const a={x:o.x*this.#o-i.x,y:o.y*this.#o-i.y};this.#t=a}}window.customElements.get("mds-image-cropper-touch-area")||window.customElements.define("mds-image-cropper-touch-area",D);class T extends HTMLElement{static get observedAttributes(){return["src","aspect-ratio","output-width","output-height","zoom","min-zoom","max-zoom","crop-x","crop-y","no-grid","restrict-position"]}#d=null;#l=window.crypto.randomUUID();constructor(){super()}get rootNode(){return this}get#f(){return this.getRootNode({composed:!0})}attributeChangedCallback(t,e=null,i=null){if(!this.isConnected||e===i)return;t==="zoom"&&this.#z(),["zoom","min-zoom","max-zoom","crop-x","crop-y"].includes(t)&&this.#T(),t==="src"&&this.#B(i),["src","aspect-ratio","output-width","output-height","zoom","min-zoom","max-zoom","crop-x","crop-y","no-grid","restrict-position"].includes(t)&&this.#H()}connectedCallback(){this.create()}disconnectedCallback(){this.destroy()}create(){this.rootNode.setHTML?this.rootNode.setHTML(this.#v.innerHTML,{sanitizer:{}}):this.rootNode.replaceChildren(this.#v.content.cloneNode(!0)),this.#T(),this.#e.addEventListener("zoom",this.#F),this.#e.addEventListener("position",this.#$),this.#e.addEventListener("dragstopped",this.#R),this.#d=new ResizeObserver(()=>this.#X()),this.#d.observe(this.#e),this.#i.addEventListener("load",this.#q),this.#B(this.#k),this.#n.addEventListener("input",this.#D),this.#A.addEventListener("click",this.#M),this.#g.addEventListener("click",this.#I),this.#x.addEventListener("click",this.#Z),this.#w.addEventListener("click",this.#W)}destroy(){this.#d?.disconnect(),this.#d=null,this.#i?.removeEventListener("load",this.#q),this.#e?.removeEventListener("zoom",this.#F),this.#e?.removeEventListener("position",this.#$),this.#e?.removeEventListener("dragstopped",this.#R),this.#n?.removeEventListener("input",this.#D),this.#A?.removeEventListener("click",this.#M),this.#g?.removeEventListener("click",this.#I),this.#x?.removeEventListener("click",this.#Z),this.#w?.removeEventListener("click",this.#W),this.rootNode?.replaceChildren()}get#v(){const t=this.#f.createElement("template");return t.innerHTML=`
|
|
2
|
+
<div class="mds-image-cropper__wrapper">
|
|
3
|
+
<mds-image-cropper-touch-area
|
|
4
|
+
class="mds-image-cropper__container"
|
|
5
|
+
aria-describedby="${this.#l}-touch-area-controls"
|
|
6
|
+
>
|
|
7
|
+
<div class="mds-image-cropper__background"></div>
|
|
8
|
+
<img class="mds-image-cropper__image" alt="" />
|
|
9
|
+
<div class="mds-image-cropper__area"></div>
|
|
10
|
+
</mds-image-cropper-touch-area>
|
|
11
|
+
<div class="mds-visually-hidden" id="${this.#l}-touch-area-controls">
|
|
12
|
+
${this.#h["touch-area-controls"]}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="mds-image-cropper__aria-live mds-visually-hidden" aria-live="polite"></div>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<label class="mds-form-label mds-image-cropper__control-label" for="${this.#l}-zoom">
|
|
18
|
+
${this.#h["zoom-label"]}
|
|
19
|
+
</label>
|
|
20
|
+
<div class="mds-image-cropper__control mds-margin-bottom-b8">
|
|
21
|
+
<button
|
|
22
|
+
type="button"
|
|
23
|
+
class="mds-image-cropper__control-button mds-image-cropper__control-button-out"
|
|
24
|
+
aria-label="${this.#h["btn-zoom-out-aria"]}"
|
|
25
|
+
>
|
|
26
|
+
<svg aria-hidden viewBox="0 0 32 32" fill="currentColor">
|
|
27
|
+
<path
|
|
28
|
+
d="M4 16c0-1.14.846-2.08 1.945-2.23l.305-.02h19.5a2.25 2.25 0 0 1 .305 4.48l-.305.02H6.25A2.25 2.25 0 0 1 4 16Z"
|
|
29
|
+
></path>
|
|
30
|
+
</svg>
|
|
31
|
+
</button>
|
|
32
|
+
<input id="${this.#l}-zoom" type="range" class="mds-image-cropper__control-zoom" step="0.1" />
|
|
33
|
+
<button
|
|
34
|
+
type="button"
|
|
35
|
+
class="mds-image-cropper__control-button mds-image-cropper__control-button-in"
|
|
36
|
+
aria-label="${this.#h["btn-zoom-in-aria"]}"
|
|
37
|
+
>
|
|
38
|
+
<svg aria-hidden viewBox="0 0 32 32" fill="currentColor">
|
|
39
|
+
<path
|
|
40
|
+
d="M16 4c1.14 0 2.08.846 2.23 1.945l.02.305v7.5h7.5a2.25 2.25 0 0 1 .305 4.48l-.305.02h-7.5v7.5a2.25 2.25 0 0 1-4.48.305l-.02-.305v-7.5h-7.5a2.25 2.25 0 0 1-.305-4.48l.305-.02h7.5v-7.5A2.25 2.25 0 0 1 16 4Z"
|
|
41
|
+
></path>
|
|
42
|
+
</svg>
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="mds-grid-row mds-grid-end">
|
|
47
|
+
<div class="mds-grid-col mds-grid-fit-content">
|
|
48
|
+
<button type="button" class="mds-button mds-button--neutral mds-image-cropper__button-reset">
|
|
49
|
+
${this.#h["btn-reset"]}
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="mds-grid-col mds-grid-fit-content">
|
|
53
|
+
<button type="button" class="mds-button mds-image-cropper__button-commit">
|
|
54
|
+
${this.#h["btn-commit"]}
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
`,t}get#n(){return this.rootNode.querySelector(".mds-image-cropper__control-zoom")}get#P(){return this.rootNode.querySelector(".mds-image-cropper__wrapper")}get#e(){return this.rootNode.querySelector(".mds-image-cropper__container")}get#i(){return this.rootNode.querySelector(".mds-image-cropper__image")}get#t(){return this.rootNode.querySelector(".mds-image-cropper__area")}get#o(){return this.rootNode.querySelector(".mds-image-cropper__background")}get#b(){return this.rootNode.querySelector(".mds-image-cropper__aria-live")}get#x(){return this.rootNode.querySelector(".mds-image-cropper__button-reset")}get#w(){return this.rootNode.querySelector(".mds-image-cropper__button-commit")}get#A(){return this.rootNode.querySelector(".mds-image-cropper__control-button-out")}get#g(){return this.rootNode.querySelector(".mds-image-cropper__control-button-in")}get#h(){return{"zoom-label":d(this.getAttribute("t-zoom-label"))||"Zoom","btn-reset":d(this.getAttribute("t-btn-reset"))||"Reset","btn-commit":d(this.getAttribute("t-btn-commit"))||"Save and crop","btn-zoom-out-aria":d(this.getAttribute("t-btn-zoom-out-aria"))||"Minus button - Zoom out","btn-zoom-in-aria":d(this.getAttribute("t-btn-zoom-in-aria"))||"Plus button - Zoom in","touch-area-controls":d(this.getAttribute("t-touch-area-controls"))||"On this element you can use arrow keys to pan the image around the crop area, and Page Up / Page Down to zoom in and out.","aria-live":d(this.getAttribute("t-aria-live"))||"Crop Top Position: {y} pixels, Crop Left Position: {x} pixels, Crop Width {width} pixels, Crop Height: {height} pixels. Image Width: {imageWidth} pixels, Image Height: {imageHeight} pixels."}}get#s(){return parseFloat(this.getAttribute("zoom")||"1")}set#s(t){this.setAttribute("zoom",t)}get#r(){const t=this.getAttribute("crop-x"),e=this.getAttribute("crop-y"),i={x:t?parseFloat(t):0,y:e?parseFloat(e):0};return this.#y?x(i,this.#p,this.#c,this.#s):i}set#r(t){const{x:e,y:i}=this.#y?x(t,this.#p,this.#c,this.#s):t;this.setAttribute("crop-x",e),this.setAttribute("crop-y",i)}get#u(){return parseFloat(this.getAttribute("min-zoom")||"1")}get#a(){return parseFloat(this.getAttribute("max-zoom")||"3")}get#E(){const t=this.getAttribute("no-grid");return t!==null&&t!=="false"}get#m(){const t=parseInt(this.getAttribute("output-width"),10);return Number.isNaN(t)?null:t}get#_(){const t=parseInt(this.getAttribute("output-height"),10);return Number.isNaN(t)?null:t}get#L(){return this.#_&&this.#m?this.#m/this.#_:parseFloat(this.getAttribute("aspect-ratio")||"1.77777")}get#c(){return _(this.#i?.width,this.#i?.height,this.#L)}get#y(){return this.getAttribute("restrict-position")!=="false"}get#k(){return this.getAttribute("src")}get#p(){return{width:this.#i?.width||0,height:this.#i?.height||0,naturalWidth:this.#i?.naturalWidth||0,naturalHeight:this.#i?.naturalHeight||0}}#D=t=>{this.#s=Math.min(this.#a,Math.max(t.target.value,this.#u))};#M=()=>{this.#s=Math.min(this.#a,Math.max(this.#s-.1,this.#u))};#I=()=>{this.#s=Math.min(this.#a,Math.max(this.#s+.1,this.#u))};#Z=()=>{this.#Y(),this.#C("reset")};#W=async()=>{const{pixels:t}=this.#N||{};if(!t){const e=new Error("Can't perform image crop, pixel crop data missing");this.#C("error",e);return}try{const e=await k({imageEl:this.#i,crop:t,backgroundFill:"#fff",width:this.#m,height:this.#_});this.#C("commit",e)}catch(e){this.#C("error",e)}};#F=t=>{t.detail&&(this.#s=t.detail),this.#T()};#$=t=>{t.detail&&(this.#r=t.detail),this.#T()};#R=()=>{this.#z()};#q=()=>{this.#z(),this.#H()};#X(){this.#H()}#C(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}#B(t){if(this.#i){if(!t){this.#i.removeAttribute("src");return}this.#i.src=t,this.#Y()}}#Y(){this.#s=Math.min(this.#a,Math.max(1,this.#u)),this.#r={x:0,y:0}}#T(){this.#e?.setAttribute("zoom",this.#s),this.#e?.setAttribute("position-x",this.#r.x),this.#e?.setAttribute("position-y",this.#r.y),this.#e?.setAttribute("min-zoom",this.#u),this.#e?.setAttribute("max-zoom",this.#a)}get#N(){return L({crop:this.#r,imageSize:this.#p,cropSize:this.#c,aspect:this.#L,zoom:this.#s,restrictPosition:this.#y})||{}}async#z(){const{percent:t,pixels:e}=this.#N;try{this.#C("cropchange",{percent:t,pixels:e})}catch(i){console.error(i)}}#H(){this.#i&&(this.#i.style.transform=`translate(${this.#r.x}px, ${this.#r.y}px) scale(${this.#s})`),this.#t&&(this.#t.style.width=`${this.#c?.width||0}px`,this.#t.style.height=`${this.#c?.height||0}px`,this.#t.classList[this.#E?"remove":"add"]("mds-image-cropper-grid")),this.#o&&(this.#o.style.width=`${this.#c?.width||0}px`,this.#o.style.height=`${this.#c?.height||0}px`),this.#P&&(this.#P.style.aspectRatio=this.#L),this.#n&&(this.#n.setAttribute("min",this.#u),this.#n.setAttribute("max",this.#a),this.#n.value=this.#s),this.#O()}#O(){const{pixels:t}=this.#N||{};!this.#b||!this.#p?.naturalWidth||!t?.width||(this.#b.textContent=this.#h["aria-live"].replace("{imageWidth}",this.#p.naturalWidth).replace("{imageHeight}",this.#p.naturalHeight).replace("{x}",t.x).replace("{y}",t.y).replace("{width}",t.width).replace("{height}",t.height))}}export{T as M};
|
package/dist/js/index-fractal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["js/components/mds-timeout-dialog-standalone.js","js/timeout-dialog-plrFUmdZ.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
const
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["js/components/mds-timeout-dialog-standalone.js","js/timeout-dialog-plrFUmdZ.js","js/components/mds-image-cropper-standalone.js","js/image-cropper-BlqRRHAU.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
const L="modulepreload",T=function(e){return"/"+e},p={},v=function(n,r,s){let t=Promise.resolve();if(r&&r.length>0){let g=function(o){return Promise.all(o.map(l=>Promise.resolve(l).then(d=>({status:"fulfilled",value:d}),d=>({status:"rejected",reason:d}))))};var h=g;document.getElementsByTagName("link");const a=document.querySelector("meta[property=csp-nonce]"),i=a?.nonce||a?.getAttribute("nonce");t=g(r.map(o=>{if(o=T(o),o in p)return;p[o]=!0;const l=o.endsWith(".css"),d=l?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${d}`))return;const c=document.createElement("link");if(c.rel=l?"stylesheet":L,l||(c.as="script"),c.crossOrigin="",c.href=o,i&&c.setAttribute("nonce",i),document.head.appendChild(c),l)return new Promise((E,y)=>{c.addEventListener("load",E),c.addEventListener("error",()=>y(new Error(`Unable to preload CSS for ${o}`)))})}))}function m(a){const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=a,window.dispatchEvent(i),!i.defaultPrevented)throw a}return t.then(a=>{for(const i of a||[])i.status==="rejected"&&m(i.reason);return n().catch(m)})},f={switchToinverse:e=>{e.classList.remove("mds-switch-state--default"),e.classList.add("mds-switch-state--inverse")},switchTodefault:e=>{e.classList.remove("mds-switch-state--inverse"),e.classList.add("mds-switch-state--default")}},A={init:()=>{Array.from(document.querySelectorAll(".js-mds-switch-state")).forEach(n=>{n.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();const t=s.currentTarget;t.classList.contains("mds-switch-state--default")?f.switchToinverse(t):(t.classList.contains("mds-switch-state--inverse"),f.switchTodefault(t))})})}},w="mds-notification",u={init:(e,n,r=3e3)=>{const{body:s}=document;u.hide(s);const t=document.createElement("div");t.setAttribute("role","alert"),t.classList.add(w,"mds-message",`mds-message--${n}`),t.innerText=e,u.show(s,t),setTimeout(u.hide,r,s)},show:(e,n)=>{e.appendChild(n)},hide:e=>{Array.from(e.querySelectorAll(`.${w}`)).forEach(r=>{r.parentNode.removeChild(r)})}},S={init:()=>{Array.from(document.querySelectorAll(".js-notification-example")).forEach(n=>{n.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();const t=s.currentTarget,m=t.innerText,{messageType:h}=t.dataset;u.init(m,h)})})}};document.addEventListener("DOMContentLoaded",async()=>{A.init(),S.init(),await v(()=>import("./components/mds-timeout-dialog-standalone.js"),__vite__mapDeps([0,1])),await v(()=>import("./components/mds-image-cropper-standalone.js"),__vite__mapDeps([2,3]))});
|
package/dist/js/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{M as xt}from"./dropdown-nav-DGGzV21D.js";import{M as Et}from"./timeout-dialog-plrFUmdZ.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const it={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},st={size:it},Ot="js-tabs-item",Ve="mds-tabs",Ct="mds-tabs__list",Lt="mds-tabs__list-item",Ue="mds-tabs__panel",pe="mds-tabs__tab",ve="mds-tabs__tab--selected",Xe="mds-tabs__panel--hidden",me={left:37,right:39,up:38,down:40},kt=".js-desktop-tabbed",St=".js-full-tabbed",Tt=parseInt(st.size.breakpoint.lg.$value,10),E={init:()=>{E.setTabs(St),window.innerWidth>Tt&&E.setTabs(kt)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${pe}`)),r=Array.from(document.querySelectorAll(`${t} .${Ct}`)),o=Array.from(document.querySelectorAll(`${t} .${Lt}`)),n=Array.from(document.querySelectorAll(`${t} .${Ue}`));r.forEach(a=>{a.setAttribute("role","tablist")}),o.forEach(a=>{a.setAttribute("role","presentation")}),e.forEach(a=>{a.setAttribute("role","tab"),a.setAttribute("aria-controls",a.attributes.href.value.substring(1)),a.classList.contains(ve)?a.setAttribute("tabindex","0"):a.setAttribute("tabindex","-1")}),n.forEach(a=>{a.setAttribute("role","tabpanel"),a.setAttribute("aria-labelledby",`label-${a.attributes.id.value}`)});const i=document.querySelectorAll(`${t} .${Ot}`);Array.from(i).forEach(a=>{const l=window.location.hash.trim(),d=a.attributes.href.value,c=a.closest(`.${Ve}`),p=E.getAllPanels(c),u=E.getAllTabs(c),v=E.getTargetPanel(a,c);a.addEventListener("click",m=>{m.preventDefault(),E.updateTabs(u,p,a,v,d)}),d===l&&E.updateTabs(u,p,a,v,d)}),r.forEach(a=>{const l=a.closest(`.${Ve}`),d=E.getAllPanels(l),c=E.getAllTabs(l);a.addEventListener("keydown",p=>{switch(p.keyCode){case me.left:case me.up:p.preventDefault(),E.moveTab(a,l,c,d,!1);break;case me.right:case me.down:p.preventDefault(),E.moveTab(a,l,c,d,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${ve}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${pe}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${pe}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Ue}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${pe}`)),moveTab:(t,e,r,o,n)=>{const i=E.getSelectedTab(t),s=n?E.getNextTab(i):E.getPrevTab(i);if(s){const a=s.attributes.href.value,l=E.getTargetPanel(s,e);E.updateTabs(r,o,s,l,a,!1)}},updateTabs:(t,e,r,o,n)=>{E.clearAllTabs(t),E.setActiveTab(r),E.clearAllPanels(e),E.setActivePanel(o,n)},clearAllTabs:t=>{t.forEach(e=>{e.classList.remove(ve),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")})},clearAllPanels:t=>{t.forEach(e=>{e.classList.add(Xe)})},setActiveTab:t=>{t.classList.add(ve),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Xe),window.history.replaceState({},"",e)}},$t="mds-accordion--breakpoint",Pt="mds-accordion__label",ct={init:()=>{const t=document.querySelectorAll(`.${$t}`),e=window.innerWidth;t.forEach(o=>{ct.checkBreakpoint(o,e)||(o.open=!0,o.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Pt}`).forEach(o=>{o.addEventListener("click",({target:n})=>{const i=n.closest("details"),s=i.querySelector("summary");i.open=!1,s.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const o=t.dataset.bp.replace(/\D/g,""),n=t.dataset.bp.replace(/[0-9]/g,"");let i,s;switch(n){case"px":r=o;break;case"em":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;case"rem":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;default:return!0}return!(e>r)}return!0}},Dt={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(n=>{const i=n.querySelector(".mds-subnavigation__link-list"),s=Array.from(i.children),a=s[0],l=n.querySelector(".mds-subnavigation__mobile-title"),d=n.querySelector(".mds-subnavigation__drawer"),c=n.querySelector(".mds-subnavigation__drawer-label"),p=n.querySelector(".mds-subnavigation__drawer-label-text"),u=n.querySelector(".mds-subnavigation__drawer-content"),v=d.dataset.label,m=d.dataset.labelPlural;c.addEventListener("click",()=>{c.getAttribute("aria-expanded")==="true"?c.setAttribute("aria-expanded","false"):c.setAttribute("aria-expanded","true")}),d.addEventListener("focusout",h=>{d.contains(h.relatedTarget)||c.setAttribute("aria-expanded","false")});const g=()=>i.clientHeight>a.offsetHeight;e.push(()=>{c.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(s.forEach(b=>{i.append(b)}),d.style.display="none",g()&&(d.style.display="list-item",s.slice().reverse().forEach(b=>{if(g()&&b!==d){u.prepend(b);const y=Array.from(u.children).length,A=y>1?m:v;p.innerText=A.replace("{count}",y)}else i.prepend(b)}),u.style.width=`${i.offsetWidth-d.offsetLeft}px`)):(s.forEach(b=>{b!==d&&b!==l&&u.append(b)}),u.style.width="initial",d.style.display="block")})});const o=()=>{e.forEach(n=>{n()})};o(),window.onresize=()=>{clearTimeout(r),r=setTimeout(o,100)}}},qt="mds-checkbox-accordion__button",Bt="mds-checkbox-accordion__button--open",jt={init:()=>{document.querySelectorAll(`.${qt}`).forEach(e=>{e.classList.contains(Bt)?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false"),e.addEventListener("click",()=>{e.getAttribute("aria-expanded")==="true"?e.setAttribute("aria-expanded","false"):e.setAttribute("aria-expanded","true")})})}};var T="top",P="bottom",D="right",$="left",Pe="auto",se=[T,P,D,$],G="start",De="end",Mt="clippingParents",lt="viewport",ee="popper",Rt="reference",Ye=se.reduce(function(t,e){return t.concat([e+"-"+G,e+"-"+De])},[]),dt=[].concat(se,[Pe]).reduce(function(t,e){return t.concat([e,e+"-"+G,e+"-"+De])},[]),Wt="beforeRead",It="read",_t="afterRead",Ht="beforeMain",Nt="main",Ft="afterMain",zt="beforeWrite",Vt="write",Ut="afterWrite",Xt=[Wt,It,_t,Ht,Nt,Ft,zt,Vt,Ut];function W(t){return t?(t.nodeName||"").toLowerCase():null}function B(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function ne(t){var e=B(t).Element;return t instanceof e||t instanceof Element}function q(t){var e=B(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function ft(t){if(typeof ShadowRoot>"u")return!1;var e=B(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function Yt(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var o=e.styles[r]||{},n=e.attributes[r]||{},i=e.elements[r];!q(i)||!W(i)||(Object.assign(i.style,o),Object.keys(n).forEach(function(s){var a=n[s];a===!1?i.removeAttribute(s):i.setAttribute(s,a===!0?"":a)}))})}function Jt(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(o){var n=e.elements[o],i=e.attributes[o]||{},s=Object.keys(e.styles.hasOwnProperty(o)?e.styles[o]:r[o]),a=s.reduce(function(l,d){return l[d]="",l},{});!q(n)||!W(n)||(Object.assign(n.style,a),Object.keys(i).forEach(function(l){n.removeAttribute(l)}))})}}const Kt={name:"applyStyles",enabled:!0,phase:"write",fn:Yt,effect:Jt,requires:["computeStyles"]};function R(t){return t.split("-")[0]}function Q(t){var e=t.getBoundingClientRect();return{width:e.width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function qe(t){var e=Q(t),r=t.offsetWidth,o=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-o)<=1&&(o=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:o}}function ut(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&ft(r)){var o=e;do{if(o&&t.isSameNode(o))return!0;o=o.parentNode||o.host}while(o)}return!1}function _(t){return B(t).getComputedStyle(t)}function Gt(t){return["table","td","th"].indexOf(W(t))>=0}function N(t){return((ne(t)?t.ownerDocument:t.document)||window.document).documentElement}function xe(t){return W(t)==="html"?t:t.assignedSlot||t.parentNode||(ft(t)?t.host:null)||N(t)}function Je(t){return!q(t)||_(t).position==="fixed"?null:t.offsetParent}function Qt(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&q(t)){var o=_(t);if(o.position==="fixed")return null}for(var n=xe(t);q(n)&&["html","body"].indexOf(W(n))<0;){var i=_(n);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||e&&i.willChange==="filter"||e&&i.filter&&i.filter!=="none")return n;n=n.parentNode}return null}function ce(t){for(var e=B(t),r=Je(t);r&&Gt(r)&&_(r).position==="static";)r=Je(r);return r&&(W(r)==="html"||W(r)==="body"&&_(r).position==="static")?e:r||Qt(t)||e}function Be(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var H=Math.max,oe=Math.min,he=Math.round;function we(t,e,r){return H(t,oe(e,r))}function pt(){return{top:0,right:0,bottom:0,left:0}}function vt(t){return Object.assign({},pt(),t)}function mt(t,e){return e.reduce(function(r,o){return r[o]=t,r},{})}var Zt=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,vt(typeof e!="number"?e:mt(e,se))};function er(t){var e,r=t.state,o=t.name,n=t.options,i=r.elements.arrow,s=r.modifiersData.popperOffsets,a=R(r.placement),l=Be(a),d=[$,D].indexOf(a)>=0,c=d?"height":"width";if(!(!i||!s)){var p=Zt(n.padding,r),u=qe(i),v=l==="y"?T:$,m=l==="y"?P:D,g=r.rects.reference[c]+r.rects.reference[l]-s[l]-r.rects.popper[c],h=s[l]-r.rects.reference[l],b=ce(i),y=b?l==="y"?b.clientHeight||0:b.clientWidth||0:0,A=g/2-h/2,f=p[v],C=y-u[c]-p[m],w=y/2-u[c]/2+A,O=we(f,w,C),x=l;r.modifiersData[o]=(e={},e[x]=O,e.centerOffset=O-w,e)}}function tr(t){var e=t.state,r=t.options,o=r.element,n=o===void 0?"[data-popper-arrow]":o;n!=null&&(typeof n=="string"&&(n=e.elements.popper.querySelector(n),!n)||ut(e.elements.popper,n)&&(e.elements.arrow=n))}const rr={name:"arrow",enabled:!0,phase:"main",fn:er,effect:tr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var nr={top:"auto",right:"auto",bottom:"auto",left:"auto"};function or(t){var e=t.x,r=t.y,o=window,n=o.devicePixelRatio||1;return{x:he(he(e*n)/n)||0,y:he(he(r*n)/n)||0}}function Ke(t){var e,r=t.popper,o=t.popperRect,n=t.placement,i=t.offsets,s=t.position,a=t.gpuAcceleration,l=t.adaptive,d=t.roundOffsets,c=d===!0?or(i):typeof d=="function"?d(i):i,p=c.x,u=p===void 0?0:p,v=c.y,m=v===void 0?0:v,g=i.hasOwnProperty("x"),h=i.hasOwnProperty("y"),b=$,y=T,A=window;if(l){var f=ce(r),C="clientHeight",w="clientWidth";f===B(r)&&(f=N(r),_(f).position!=="static"&&(C="scrollHeight",w="scrollWidth")),f=f,n===T&&(y=P,m-=f[C]-o.height,m*=a?1:-1),n===$&&(b=D,u-=f[w]-o.width,u*=a?1:-1)}var O=Object.assign({position:s},l&&nr);if(a){var x;return Object.assign({},O,(x={},x[y]=h?"0":"",x[b]=g?"0":"",x.transform=(A.devicePixelRatio||1)<2?"translate("+u+"px, "+m+"px)":"translate3d("+u+"px, "+m+"px, 0)",x))}return Object.assign({},O,(e={},e[y]=h?m+"px":"",e[b]=g?u+"px":"",e.transform="",e))}function ar(t){var e=t.state,r=t.options,o=r.gpuAcceleration,n=o===void 0?!0:o,i=r.adaptive,s=i===void 0?!0:i,a=r.roundOffsets,l=a===void 0?!0:a,d={placement:R(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:n};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ke(Object.assign({},d,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:s,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ke(Object.assign({},d,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const ir={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:ar,data:{}};var be={passive:!0};function sr(t){var e=t.state,r=t.instance,o=t.options,n=o.scroll,i=n===void 0?!0:n,s=o.resize,a=s===void 0?!0:s,l=B(e.elements.popper),d=[].concat(e.scrollParents.reference,e.scrollParents.popper);return i&&d.forEach(function(c){c.addEventListener("scroll",r.update,be)}),a&&l.addEventListener("resize",r.update,be),function(){i&&d.forEach(function(c){c.removeEventListener("scroll",r.update,be)}),a&&l.removeEventListener("resize",r.update,be)}}const cr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:sr,data:{}};var lr={left:"right",right:"left",bottom:"top",top:"bottom"};function Ae(t){return t.replace(/left|right|bottom|top/g,function(e){return lr[e]})}var dr={start:"end",end:"start"};function Ge(t){return t.replace(/start|end/g,function(e){return dr[e]})}function je(t){var e=B(t),r=e.pageXOffset,o=e.pageYOffset;return{scrollLeft:r,scrollTop:o}}function Me(t){return Q(N(t)).left+je(t).scrollLeft}function fr(t){var e=B(t),r=N(t),o=e.visualViewport,n=r.clientWidth,i=r.clientHeight,s=0,a=0;return o&&(n=o.width,i=o.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(s=o.offsetLeft,a=o.offsetTop)),{width:n,height:i,x:s+Me(t),y:a}}function ur(t){var e,r=N(t),o=je(t),n=(e=t.ownerDocument)==null?void 0:e.body,i=H(r.scrollWidth,r.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),s=H(r.scrollHeight,r.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0),a=-o.scrollLeft+Me(t),l=-o.scrollTop;return _(n||r).direction==="rtl"&&(a+=H(r.clientWidth,n?n.clientWidth:0)-i),{width:i,height:s,x:a,y:l}}function Re(t){var e=_(t),r=e.overflow,o=e.overflowX,n=e.overflowY;return/auto|scroll|overlay|hidden/.test(r+n+o)}function ht(t){return["html","body","#document"].indexOf(W(t))>=0?t.ownerDocument.body:q(t)&&Re(t)?t:ht(xe(t))}function re(t,e){var r;e===void 0&&(e=[]);var o=ht(t),n=o===((r=t.ownerDocument)==null?void 0:r.body),i=B(o),s=n?[i].concat(i.visualViewport||[],Re(o)?o:[]):o,a=e.concat(s);return n?a:a.concat(re(xe(s)))}function Se(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function pr(t){var e=Q(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function Qe(t,e){return e===lt?Se(fr(t)):q(e)?pr(e):Se(ur(N(t)))}function vr(t){var e=re(xe(t)),r=["absolute","fixed"].indexOf(_(t).position)>=0,o=r&&q(t)?ce(t):t;return ne(o)?e.filter(function(n){return ne(n)&&ut(n,o)&&W(n)!=="body"}):[]}function mr(t,e,r){var o=e==="clippingParents"?vr(t):[].concat(e),n=[].concat(o,[r]),i=n[0],s=n.reduce(function(a,l){var d=Qe(t,l);return a.top=H(d.top,a.top),a.right=oe(d.right,a.right),a.bottom=oe(d.bottom,a.bottom),a.left=H(d.left,a.left),a},Qe(t,i));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function ae(t){return t.split("-")[1]}function bt(t){var e=t.reference,r=t.element,o=t.placement,n=o?R(o):null,i=o?ae(o):null,s=e.x+e.width/2-r.width/2,a=e.y+e.height/2-r.height/2,l;switch(n){case T:l={x:s,y:e.y-r.height};break;case P:l={x:s,y:e.y+e.height};break;case D:l={x:e.x+e.width,y:a};break;case $:l={x:e.x-r.width,y:a};break;default:l={x:e.x,y:e.y}}var d=n?Be(n):null;if(d!=null){var c=d==="y"?"height":"width";switch(i){case G:l[d]=l[d]-(e[c]/2-r[c]/2);break;case De:l[d]=l[d]+(e[c]/2-r[c]/2);break}}return l}function ie(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=o===void 0?t.placement:o,i=r.boundary,s=i===void 0?Mt:i,a=r.rootBoundary,l=a===void 0?lt:a,d=r.elementContext,c=d===void 0?ee:d,p=r.altBoundary,u=p===void 0?!1:p,v=r.padding,m=v===void 0?0:v,g=vt(typeof m!="number"?m:mt(m,se)),h=c===ee?Rt:ee,b=t.elements.reference,y=t.rects.popper,A=t.elements[u?h:c],f=mr(ne(A)?A:A.contextElement||N(t.elements.popper),s,l),C=Q(b),w=bt({reference:C,element:y,placement:n}),O=Se(Object.assign({},y,w)),x=c===ee?O:C,L={top:f.top-x.top+g.top,bottom:x.bottom-f.bottom+g.bottom,left:f.left-x.left+g.left,right:x.right-f.right+g.right},S=t.modifiersData.offset;if(c===ee&&S){var j=S[n];Object.keys(L).forEach(function(I){var k=[D,P].indexOf(I)>=0?1:-1,F=[T,P].indexOf(I)>=0?"y":"x";L[I]+=j[F]*k})}return L}function hr(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=r.boundary,i=r.rootBoundary,s=r.padding,a=r.flipVariations,l=r.allowedAutoPlacements,d=l===void 0?dt:l,c=ae(o),p=c?a?Ye:Ye.filter(function(m){return ae(m)===c}):se,u=p.filter(function(m){return d.indexOf(m)>=0});u.length===0&&(u=p);var v=u.reduce(function(m,g){return m[g]=ie(t,{placement:g,boundary:n,rootBoundary:i,padding:s})[R(g)],m},{});return Object.keys(v).sort(function(m,g){return v[m]-v[g]})}function br(t){if(R(t)===Pe)return[];var e=Ae(t);return[Ge(t),e,Ge(e)]}function gr(t){var e=t.state,r=t.options,o=t.name;if(!e.modifiersData[o]._skip){for(var n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!0:s,l=r.fallbackPlacements,d=r.padding,c=r.boundary,p=r.rootBoundary,u=r.altBoundary,v=r.flipVariations,m=v===void 0?!0:v,g=r.allowedAutoPlacements,h=e.options.placement,b=R(h),y=b===h,A=l||(y||!m?[Ae(h)]:br(h)),f=[h].concat(A).reduce(function(V,M){return V.concat(R(M)===Pe?hr(e,{placement:M,boundary:c,rootBoundary:p,padding:d,flipVariations:m,allowedAutoPlacements:g}):M)},[]),C=e.rects.reference,w=e.rects.popper,O=new Map,x=!0,L=f[0],S=0;S<f.length;S++){var j=f[S],I=R(j),k=ae(j)===G,F=[T,P].indexOf(I)>=0,Z=F?"width":"height",U=ie(e,{placement:j,boundary:c,rootBoundary:p,altBoundary:u,padding:d}),z=F?k?D:$:k?P:T;C[Z]>w[Z]&&(z=Ae(z));var Ee=Ae(z),X=[];if(i&&X.push(U[I]<=0),a&&X.push(U[z]<=0,U[Ee]<=0),X.every(function(V){return V})){L=j,x=!1;break}O.set(j,X)}if(x)for(var le=m?3:1,Oe=function(M){var fe=f.find(function(Ce){var J=O.get(Ce);if(J)return J.slice(0,M).every(function(Le){return Le})});if(fe)return L=fe,"break"},Y=le;Y>0;Y--){var de=Oe(Y);if(de==="break")break}e.placement!==L&&(e.modifiersData[o]._skip=!0,e.placement=L,e.reset=!0)}}const yr={name:"flip",enabled:!0,phase:"main",fn:gr,requiresIfExists:["offset"],data:{_skip:!1}};function Ze(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function et(t){return[T,D,P,$].some(function(e){return t[e]>=0})}function wr(t){var e=t.state,r=t.name,o=e.rects.reference,n=e.rects.popper,i=e.modifiersData.preventOverflow,s=ie(e,{elementContext:"reference"}),a=ie(e,{altBoundary:!0}),l=Ze(s,o),d=Ze(a,n,i),c=et(l),p=et(d);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:d,isReferenceHidden:c,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":p})}const Ar={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:wr};function xr(t,e,r){var o=R(t),n=[$,T].indexOf(o)>=0?-1:1,i=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,s=i[0],a=i[1];return s=s||0,a=(a||0)*n,[$,D].indexOf(o)>=0?{x:a,y:s}:{x:s,y:a}}function Er(t){var e=t.state,r=t.options,o=t.name,n=r.offset,i=n===void 0?[0,0]:n,s=dt.reduce(function(c,p){return c[p]=xr(p,e.rects,i),c},{}),a=s[e.placement],l=a.x,d=a.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=d),e.modifiersData[o]=s}const Or={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Er};function Cr(t){var e=t.state,r=t.name;e.modifiersData[r]=bt({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const Lr={name:"popperOffsets",enabled:!0,phase:"read",fn:Cr,data:{}};function kr(t){return t==="x"?"y":"x"}function Sr(t){var e=t.state,r=t.options,o=t.name,n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!1:s,l=r.boundary,d=r.rootBoundary,c=r.altBoundary,p=r.padding,u=r.tether,v=u===void 0?!0:u,m=r.tetherOffset,g=m===void 0?0:m,h=ie(e,{boundary:l,rootBoundary:d,padding:p,altBoundary:c}),b=R(e.placement),y=ae(e.placement),A=!y,f=Be(b),C=kr(f),w=e.modifiersData.popperOffsets,O=e.rects.reference,x=e.rects.popper,L=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,S={x:0,y:0};if(w){if(i||a){var j=f==="y"?T:$,I=f==="y"?P:D,k=f==="y"?"height":"width",F=w[f],Z=w[f]+h[j],U=w[f]-h[I],z=v?-x[k]/2:0,Ee=y===G?O[k]:x[k],X=y===G?-x[k]:-O[k],le=e.elements.arrow,Oe=v&&le?qe(le):{width:0,height:0},Y=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:pt(),de=Y[j],V=Y[I],M=we(0,O[k],Oe[k]),fe=A?O[k]/2-z-M-de-L:Ee-M-de-L,Ce=A?-O[k]/2+z+M+V+L:X+M+V+L,J=e.elements.arrow&&ce(e.elements.arrow),Le=J?f==="y"?J.clientTop||0:J.clientLeft||0:0,We=e.modifiersData.offset?e.modifiersData.offset[e.placement][f]:0,Ie=w[f]+fe-We-Le,_e=w[f]+Ce-We;if(i){var He=we(v?oe(Z,Ie):Z,F,v?H(U,_e):U);w[f]=He,S[f]=He-F}if(a){var wt=f==="x"?T:$,At=f==="x"?P:D,ue=w[C],Ne=ue+h[wt],Fe=ue-h[At],ze=we(v?oe(Ne,Ie):Ne,ue,v?H(Fe,_e):Fe);w[C]=ze,S[C]=ze-ue}}e.modifiersData[o]=S}}const Tr={name:"preventOverflow",enabled:!0,phase:"main",fn:Sr,requiresIfExists:["offset"]};function $r(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Pr(t){return t===B(t)||!q(t)?je(t):$r(t)}function Dr(t,e,r){r===void 0&&(r=!1);var o=N(e),n=Q(t),i=q(e),s={scrollLeft:0,scrollTop:0},a={x:0,y:0};return(i||!i&&!r)&&((W(e)!=="body"||Re(o))&&(s=Pr(e)),q(e)?(a=Q(e),a.x+=e.clientLeft,a.y+=e.clientTop):o&&(a.x=Me(o))),{x:n.left+s.scrollLeft-a.x,y:n.top+s.scrollTop-a.y,width:n.width,height:n.height}}function qr(t){var e=new Map,r=new Set,o=[];t.forEach(function(i){e.set(i.name,i)});function n(i){r.add(i.name);var s=[].concat(i.requires||[],i.requiresIfExists||[]);s.forEach(function(a){if(!r.has(a)){var l=e.get(a);l&&n(l)}}),o.push(i)}return t.forEach(function(i){r.has(i.name)||n(i)}),o}function Br(t){var e=qr(t);return Xt.reduce(function(r,o){return r.concat(e.filter(function(n){return n.phase===o}))},[])}function jr(t){var e;return function(){return e||(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Mr(t){var e=t.reduce(function(r,o){var n=r[o.name];return r[o.name]=n?Object.assign({},n,o,{options:Object.assign({},n.options,o.options),data:Object.assign({},n.data,o.data)}):o,r},{});return Object.keys(e).map(function(r){return e[r]})}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function rt(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(o){return!(o&&typeof o.getBoundingClientRect=="function")})}function Rr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,o=r===void 0?[]:r,n=e.defaultOptions,i=n===void 0?tt:n;return function(a,l,d){d===void 0&&(d=i);var c={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:a,popper:l},attributes:{},styles:{}},p=[],u=!1,v={state:c,setOptions:function(b){g(),c.options=Object.assign({},i,c.options,b),c.scrollParents={reference:ne(a)?re(a):a.contextElement?re(a.contextElement):[],popper:re(l)};var y=Br(Mr([].concat(o,c.options.modifiers)));return c.orderedModifiers=y.filter(function(A){return A.enabled}),m(),v.update()},forceUpdate:function(){if(!u){var b=c.elements,y=b.reference,A=b.popper;if(rt(y,A)){c.rects={reference:Dr(y,ce(A),c.options.strategy==="fixed"),popper:qe(A)},c.reset=!1,c.placement=c.options.placement,c.orderedModifiers.forEach(function(S){return c.modifiersData[S.name]=Object.assign({},S.data)});for(var f=0;f<c.orderedModifiers.length;f++){if(c.reset===!0){c.reset=!1,f=-1;continue}var C=c.orderedModifiers[f],w=C.fn,O=C.options,x=O===void 0?{}:O,L=C.name;typeof w=="function"&&(c=w({state:c,options:x,name:L,instance:v})||c)}}}},update:jr(function(){return new Promise(function(h){v.forceUpdate(),h(c)})}),destroy:function(){g(),u=!0}};if(!rt(a,l))return v;v.setOptions(d).then(function(h){!u&&d.onFirstUpdate&&d.onFirstUpdate(h)});function m(){c.orderedModifiers.forEach(function(h){var b=h.name,y=h.options,A=y===void 0?{}:y,f=h.effect;if(typeof f=="function"){var C=f({state:c,name:b,instance:v,options:A}),w=function(){};p.push(C||w)}})}function g(){p.forEach(function(h){return h()}),p=[]}return v}}var Wr=[cr,Lr,ir,Kt,Or,yr,Tr,rr,Ar],Ir=Rr({defaultModifiers:Wr});const _r=parseInt(it.baseline.$value,10),Hr="js-mds-popover-trigger",ge="mds-popover--active",te={init:()=>{Array.from(document.querySelectorAll(`.${Hr}`)).forEach(e=>{const o=`${e.getAttribute("id")}-content`,n=document.getElementById(o),i=n.dataset?n.dataset.placement:null,s=Ir(e,n,{placement:i||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,_r*3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),e.addEventListener("click",a=>{a.preventDefault(),s.update(),n.classList.toggle(ge),te.setAriaAttr(e,n,ge)}),document.addEventListener("mousedown",a=>{te.hide(e,n,s,ge,a)}),document.addEventListener("keydown",a=>{te.hide(e,n,s,ge,a)})})},hide:(t,e,r,o,n)=>{!t.contains(n.target)&&!r.state.elements.popper.contains(n.target)&&e.classList.contains(o)&&(e.classList.remove(o),te.setAriaAttr(t,e,o))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Nr=parseInt(st.size.breakpoint.md.$value,10),nt="data-modal-id",ot="mds-modal--active",Fr="js-mds-modal-close";let ye;const K={init:()=>{window.innerWidth>Nr&&Array.from(document.querySelectorAll(`[${nt}]`)).forEach(r=>{const o=r.getAttribute(nt),n=document.getElementById(o),i=Array.from(n.querySelectorAll(`.${Fr}`)),s=n.getAttribute("data-site-container"),a=document.getElementById(s);let d=n.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');d=Array.prototype.slice.call(d);const c=d[0],p=d[d.length-1];r.addEventListener("click",u=>{u.preventDefault(),K.open(n,c,a)}),n.addEventListener("click",u=>{u.target===n&&K.close(n,ye,a)}),n.addEventListener("keydown",u=>{K.trapFocus(u,c,p),(u.key==="Escape"||u.key==="Esc")&&K.close(n,ye,a)}),i.forEach(u=>{u.addEventListener("click",()=>{K.close(n,ye,a)})})})},open:(t,e,r)=>{ye=document.activeElement,t.classList.add(ot),e.focus(),r.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r.removeAttribute("aria-hidden"),t.classList.remove(ot),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}},zr=".mds-form-element--file",ke="mds-form-element--selected-file",at="mds-form-element--dragover",Vr=".mds-file-upload__file-name",Ur=".mds-file-upload__remove-button",Xr="mds-form-element--file-supported",gt={init:()=>{gt.isBrowserIE()||Array.from(document.querySelectorAll(zr)).forEach(e=>{e.classList.add(Xr);const r=e.querySelector(Vr),o=e.querySelector("input[type=file]"),n=e.querySelector(Ur);document.addEventListener("readystatechange",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke))}),o.addEventListener("change",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke),n.focus())}),n.addEventListener("click",i=>{i.preventDefault(),o.value="",r.textContent="",e.classList.remove(ke),o.focus()}),["dragover","dragenter"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.add(at)})}),["dragleave","dragend","drop"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.remove(at)})})})},isBrowserIE:()=>!!window.document.documentMode},Yr=".mds-form-element--character-count",Jr=".mds-form-message--character-count",Kr=".js-character-count-number",Gr=".mds-form-control",Te={init:()=>{Array.from(document.querySelectorAll(Yr)).forEach(e=>{const r=e.querySelector(Gr),o=r.getAttribute("maxlength"),n=e.querySelector(Jr),i=e.querySelector(Kr);r.removeAttribute("maxlength"),Te.updateCounter(r,o,i,n),r.addEventListener("keyup",s=>{s.stopPropagation(),Te.updateCounter(r,o,i,n)})})},updateCounter:(t,e,r,o)=>{const n=t.value.match(/(\r\n|\n|\r)/g),i=t.value.length+(n?n.length:0),s=e-i;r.textContent=s,s<0?o.classList.add("mds-form-message--error"):o.classList.remove("mds-form-message--error")}},Qr="js-mds-button-double-submit",yt={init:()=>{Array.from(document.querySelectorAll(`.${Qr}`)).forEach(e=>{e.addEventListener("click",()=>{yt.toggleDisable(e)})})},toggleDisable:t=>{setTimeout(()=>{t.setAttribute("disabled","")},1),setTimeout(()=>{t.removeAttribute("disabled")},1e3)}},Zr={setFluidVideos:()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach(e=>{const r=document.createElement("div");r.classList.add("mds-fluid-video"),r.innerHTML=e.outerHTML,e.replaceWith(r)})}};class en extends HTMLElement{connectedCallback(){const r=this.querySelector(".mds-card-link__link");let o;this.onmousedown=()=>{o=+new Date},this.onmouseup=()=>{+new Date-o<200&&r.click(),o=void 0}}disconnectedCallback(){this.onmousedown=this.onmouseup=null}}class tn extends HTMLElement{static observedAttributes=["form","field-name","show-when"];showHide=()=>{const{field:e}=this,r=this.getAttribute("show-when");(e.type==="checkbox"?e.checked.toString():e.value.toString())===r?this.hidden=!1:this.hidden=!0};setup=()=>{this.cleanup();const e=this.getAttribute("form"),r=this.getAttribute("field-name");if(this.formElement=e?document.querySelector(e):this.closest("form"),!this.formElement)throw new Error(`<mds-conditional-section> for ${r} could not find the associated form`);if(this.field=this.formElement.elements[r],!this.field)throw new Error(`<mds-conditional-section> for ${r} could not find the associated field`);this.showHide(),this.formElement.addEventListener("input",this.showHide)};connectedCallback(){this.setup()}cleanup=()=>{this.formElement?.removeEventListener("input",this.showHide)};disconnectedCallback(){this.cleanup()}attributeChangedCallback(e,r,o){const{showHide:n,setup:i}=this;this.isConnected&&r!==o&&(e==="show-when"?n():(e==="field-name"||e==="form")&&i())}}window.customElements.get("mds-dropdown-nav")||window.customElements.define("mds-dropdown-nav",xt);window.customElements.get("mds-timeout-dialog")||window.customElements.define("mds-timeout-dialog",Et);window.customElements.get("mds-card-link")||window.customElements.define("mds-card-link",en);window.customElements.get("mds-conditional-section")||window.customElements.define("mds-conditional-section",tn);const $e=()=>{E.init(),ct.init(),Dt.init(),jt.init(),K.init(),gt.init(),Te.init(),te.init(),yt.init(),Zr.setFluidVideos()};window.mdgxInitAll=$e;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",$e):$e();
|
|
1
|
+
import{M as xt}from"./dropdown-nav-DGGzV21D.js";import{M as Et}from"./timeout-dialog-plrFUmdZ.js";import{M as Ot}from"./image-cropper-BlqRRHAU.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const it={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},st={size:it},Ct="js-tabs-item",Ve="mds-tabs",Lt="mds-tabs__list",kt="mds-tabs__list-item",Ue="mds-tabs__panel",pe="mds-tabs__tab",me="mds-tabs__tab--selected",Xe="mds-tabs__panel--hidden",ve={left:37,right:39,up:38,down:40},St=".js-desktop-tabbed",Tt=".js-full-tabbed",$t=parseInt(st.size.breakpoint.lg.$value,10),E={init:()=>{E.setTabs(Tt),window.innerWidth>$t&&E.setTabs(St)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${pe}`)),r=Array.from(document.querySelectorAll(`${t} .${Lt}`)),o=Array.from(document.querySelectorAll(`${t} .${kt}`)),n=Array.from(document.querySelectorAll(`${t} .${Ue}`));r.forEach(a=>{a.setAttribute("role","tablist")}),o.forEach(a=>{a.setAttribute("role","presentation")}),e.forEach(a=>{a.setAttribute("role","tab"),a.setAttribute("aria-controls",a.attributes.href.value.substring(1)),a.classList.contains(me)?a.setAttribute("tabindex","0"):a.setAttribute("tabindex","-1")}),n.forEach(a=>{a.setAttribute("role","tabpanel"),a.setAttribute("aria-labelledby",`label-${a.attributes.id.value}`)});const i=document.querySelectorAll(`${t} .${Ct}`);Array.from(i).forEach(a=>{const l=window.location.hash.trim(),d=a.attributes.href.value,c=a.closest(`.${Ve}`),p=E.getAllPanels(c),u=E.getAllTabs(c),m=E.getTargetPanel(a,c);a.addEventListener("click",v=>{v.preventDefault(),E.updateTabs(u,p,a,m,d)}),d===l&&E.updateTabs(u,p,a,m,d)}),r.forEach(a=>{const l=a.closest(`.${Ve}`),d=E.getAllPanels(l),c=E.getAllTabs(l);a.addEventListener("keydown",p=>{switch(p.keyCode){case ve.left:case ve.up:p.preventDefault(),E.moveTab(a,l,c,d,!1);break;case ve.right:case ve.down:p.preventDefault(),E.moveTab(a,l,c,d,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${me}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${pe}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${pe}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Ue}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${pe}`)),moveTab:(t,e,r,o,n)=>{const i=E.getSelectedTab(t),s=n?E.getNextTab(i):E.getPrevTab(i);if(s){const a=s.attributes.href.value,l=E.getTargetPanel(s,e);E.updateTabs(r,o,s,l,a,!1)}},updateTabs:(t,e,r,o,n)=>{E.clearAllTabs(t),E.setActiveTab(r),E.clearAllPanels(e),E.setActivePanel(o,n)},clearAllTabs:t=>{t.forEach(e=>{e.classList.remove(me),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")})},clearAllPanels:t=>{t.forEach(e=>{e.classList.add(Xe)})},setActiveTab:t=>{t.classList.add(me),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Xe),window.history.replaceState({},"",e)}},Pt="mds-accordion--breakpoint",Dt="mds-accordion__label",ct={init:()=>{const t=document.querySelectorAll(`.${Pt}`),e=window.innerWidth;t.forEach(o=>{ct.checkBreakpoint(o,e)||(o.open=!0,o.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Dt}`).forEach(o=>{o.addEventListener("click",({target:n})=>{const i=n.closest("details"),s=i.querySelector("summary");i.open=!1,s.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const o=t.dataset.bp.replace(/\D/g,""),n=t.dataset.bp.replace(/[0-9]/g,"");let i,s;switch(n){case"px":r=o;break;case"em":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;case"rem":i=window.getComputedStyle(document.querySelector("body"))["font-size"],s=o*parseFloat(i),r=s;break;default:return!0}return!(e>r)}return!0}},qt={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(n=>{const i=n.querySelector(".mds-subnavigation__link-list"),s=Array.from(i.children),a=s[0],l=n.querySelector(".mds-subnavigation__mobile-title"),d=n.querySelector(".mds-subnavigation__drawer"),c=n.querySelector(".mds-subnavigation__drawer-label"),p=n.querySelector(".mds-subnavigation__drawer-label-text"),u=n.querySelector(".mds-subnavigation__drawer-content"),m=d.dataset.label,v=d.dataset.labelPlural;c.addEventListener("click",()=>{c.getAttribute("aria-expanded")==="true"?c.setAttribute("aria-expanded","false"):c.setAttribute("aria-expanded","true")}),d.addEventListener("focusout",h=>{d.contains(h.relatedTarget)||c.setAttribute("aria-expanded","false")});const g=()=>i.clientHeight>a.offsetHeight;e.push(()=>{c.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(s.forEach(b=>{i.append(b)}),d.style.display="none",g()&&(d.style.display="list-item",s.slice().reverse().forEach(b=>{if(g()&&b!==d){u.prepend(b);const y=Array.from(u.children).length,A=y>1?v:m;p.innerText=A.replace("{count}",y)}else i.prepend(b)}),u.style.width=`${i.offsetWidth-d.offsetLeft}px`)):(s.forEach(b=>{b!==d&&b!==l&&u.append(b)}),u.style.width="initial",d.style.display="block")})});const o=()=>{e.forEach(n=>{n()})};o(),window.onresize=()=>{clearTimeout(r),r=setTimeout(o,100)}}},Bt="mds-checkbox-accordion__button",jt="mds-checkbox-accordion__button--open",Mt={init:()=>{document.querySelectorAll(`.${Bt}`).forEach(e=>{e.classList.contains(jt)?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false"),e.addEventListener("click",()=>{e.getAttribute("aria-expanded")==="true"?e.setAttribute("aria-expanded","false"):e.setAttribute("aria-expanded","true")})})}};var T="top",P="bottom",D="right",$="left",Pe="auto",se=[T,P,D,$],G="start",De="end",Rt="clippingParents",lt="viewport",ee="popper",Wt="reference",Ye=se.reduce(function(t,e){return t.concat([e+"-"+G,e+"-"+De])},[]),dt=[].concat(se,[Pe]).reduce(function(t,e){return t.concat([e,e+"-"+G,e+"-"+De])},[]),It="beforeRead",_t="read",Ht="afterRead",Nt="beforeMain",Ft="main",zt="afterMain",Vt="beforeWrite",Ut="write",Xt="afterWrite",Yt=[It,_t,Ht,Nt,Ft,zt,Vt,Ut,Xt];function W(t){return t?(t.nodeName||"").toLowerCase():null}function B(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView||window}return t}function ne(t){var e=B(t).Element;return t instanceof e||t instanceof Element}function q(t){var e=B(t).HTMLElement;return t instanceof e||t instanceof HTMLElement}function ft(t){if(typeof ShadowRoot>"u")return!1;var e=B(t).ShadowRoot;return t instanceof e||t instanceof ShadowRoot}function Jt(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var o=e.styles[r]||{},n=e.attributes[r]||{},i=e.elements[r];!q(i)||!W(i)||(Object.assign(i.style,o),Object.keys(n).forEach(function(s){var a=n[s];a===!1?i.removeAttribute(s):i.setAttribute(s,a===!0?"":a)}))})}function Kt(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(o){var n=e.elements[o],i=e.attributes[o]||{},s=Object.keys(e.styles.hasOwnProperty(o)?e.styles[o]:r[o]),a=s.reduce(function(l,d){return l[d]="",l},{});!q(n)||!W(n)||(Object.assign(n.style,a),Object.keys(i).forEach(function(l){n.removeAttribute(l)}))})}}const Gt={name:"applyStyles",enabled:!0,phase:"write",fn:Jt,effect:Kt,requires:["computeStyles"]};function R(t){return t.split("-")[0]}function Q(t){var e=t.getBoundingClientRect();return{width:e.width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function qe(t){var e=Q(t),r=t.offsetWidth,o=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-o)<=1&&(o=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:o}}function ut(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&ft(r)){var o=e;do{if(o&&t.isSameNode(o))return!0;o=o.parentNode||o.host}while(o)}return!1}function _(t){return B(t).getComputedStyle(t)}function Qt(t){return["table","td","th"].indexOf(W(t))>=0}function N(t){return((ne(t)?t.ownerDocument:t.document)||window.document).documentElement}function xe(t){return W(t)==="html"?t:t.assignedSlot||t.parentNode||(ft(t)?t.host:null)||N(t)}function Je(t){return!q(t)||_(t).position==="fixed"?null:t.offsetParent}function Zt(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&q(t)){var o=_(t);if(o.position==="fixed")return null}for(var n=xe(t);q(n)&&["html","body"].indexOf(W(n))<0;){var i=_(n);if(i.transform!=="none"||i.perspective!=="none"||i.contain==="paint"||["transform","perspective"].indexOf(i.willChange)!==-1||e&&i.willChange==="filter"||e&&i.filter&&i.filter!=="none")return n;n=n.parentNode}return null}function ce(t){for(var e=B(t),r=Je(t);r&&Qt(r)&&_(r).position==="static";)r=Je(r);return r&&(W(r)==="html"||W(r)==="body"&&_(r).position==="static")?e:r||Zt(t)||e}function Be(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var H=Math.max,oe=Math.min,he=Math.round;function we(t,e,r){return H(t,oe(e,r))}function pt(){return{top:0,right:0,bottom:0,left:0}}function mt(t){return Object.assign({},pt(),t)}function vt(t,e){return e.reduce(function(r,o){return r[o]=t,r},{})}var er=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,mt(typeof e!="number"?e:vt(e,se))};function tr(t){var e,r=t.state,o=t.name,n=t.options,i=r.elements.arrow,s=r.modifiersData.popperOffsets,a=R(r.placement),l=Be(a),d=[$,D].indexOf(a)>=0,c=d?"height":"width";if(!(!i||!s)){var p=er(n.padding,r),u=qe(i),m=l==="y"?T:$,v=l==="y"?P:D,g=r.rects.reference[c]+r.rects.reference[l]-s[l]-r.rects.popper[c],h=s[l]-r.rects.reference[l],b=ce(i),y=b?l==="y"?b.clientHeight||0:b.clientWidth||0:0,A=g/2-h/2,f=p[m],C=y-u[c]-p[v],w=y/2-u[c]/2+A,O=we(f,w,C),x=l;r.modifiersData[o]=(e={},e[x]=O,e.centerOffset=O-w,e)}}function rr(t){var e=t.state,r=t.options,o=r.element,n=o===void 0?"[data-popper-arrow]":o;n!=null&&(typeof n=="string"&&(n=e.elements.popper.querySelector(n),!n)||ut(e.elements.popper,n)&&(e.elements.arrow=n))}const nr={name:"arrow",enabled:!0,phase:"main",fn:tr,effect:rr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var or={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ar(t){var e=t.x,r=t.y,o=window,n=o.devicePixelRatio||1;return{x:he(he(e*n)/n)||0,y:he(he(r*n)/n)||0}}function Ke(t){var e,r=t.popper,o=t.popperRect,n=t.placement,i=t.offsets,s=t.position,a=t.gpuAcceleration,l=t.adaptive,d=t.roundOffsets,c=d===!0?ar(i):typeof d=="function"?d(i):i,p=c.x,u=p===void 0?0:p,m=c.y,v=m===void 0?0:m,g=i.hasOwnProperty("x"),h=i.hasOwnProperty("y"),b=$,y=T,A=window;if(l){var f=ce(r),C="clientHeight",w="clientWidth";f===B(r)&&(f=N(r),_(f).position!=="static"&&(C="scrollHeight",w="scrollWidth")),f=f,n===T&&(y=P,v-=f[C]-o.height,v*=a?1:-1),n===$&&(b=D,u-=f[w]-o.width,u*=a?1:-1)}var O=Object.assign({position:s},l&&or);if(a){var x;return Object.assign({},O,(x={},x[y]=h?"0":"",x[b]=g?"0":"",x.transform=(A.devicePixelRatio||1)<2?"translate("+u+"px, "+v+"px)":"translate3d("+u+"px, "+v+"px, 0)",x))}return Object.assign({},O,(e={},e[y]=h?v+"px":"",e[b]=g?u+"px":"",e.transform="",e))}function ir(t){var e=t.state,r=t.options,o=r.gpuAcceleration,n=o===void 0?!0:o,i=r.adaptive,s=i===void 0?!0:i,a=r.roundOffsets,l=a===void 0?!0:a,d={placement:R(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:n};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ke(Object.assign({},d,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:s,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ke(Object.assign({},d,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const sr={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:ir,data:{}};var be={passive:!0};function cr(t){var e=t.state,r=t.instance,o=t.options,n=o.scroll,i=n===void 0?!0:n,s=o.resize,a=s===void 0?!0:s,l=B(e.elements.popper),d=[].concat(e.scrollParents.reference,e.scrollParents.popper);return i&&d.forEach(function(c){c.addEventListener("scroll",r.update,be)}),a&&l.addEventListener("resize",r.update,be),function(){i&&d.forEach(function(c){c.removeEventListener("scroll",r.update,be)}),a&&l.removeEventListener("resize",r.update,be)}}const lr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:cr,data:{}};var dr={left:"right",right:"left",bottom:"top",top:"bottom"};function Ae(t){return t.replace(/left|right|bottom|top/g,function(e){return dr[e]})}var fr={start:"end",end:"start"};function Ge(t){return t.replace(/start|end/g,function(e){return fr[e]})}function je(t){var e=B(t),r=e.pageXOffset,o=e.pageYOffset;return{scrollLeft:r,scrollTop:o}}function Me(t){return Q(N(t)).left+je(t).scrollLeft}function ur(t){var e=B(t),r=N(t),o=e.visualViewport,n=r.clientWidth,i=r.clientHeight,s=0,a=0;return o&&(n=o.width,i=o.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(s=o.offsetLeft,a=o.offsetTop)),{width:n,height:i,x:s+Me(t),y:a}}function pr(t){var e,r=N(t),o=je(t),n=(e=t.ownerDocument)==null?void 0:e.body,i=H(r.scrollWidth,r.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),s=H(r.scrollHeight,r.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0),a=-o.scrollLeft+Me(t),l=-o.scrollTop;return _(n||r).direction==="rtl"&&(a+=H(r.clientWidth,n?n.clientWidth:0)-i),{width:i,height:s,x:a,y:l}}function Re(t){var e=_(t),r=e.overflow,o=e.overflowX,n=e.overflowY;return/auto|scroll|overlay|hidden/.test(r+n+o)}function ht(t){return["html","body","#document"].indexOf(W(t))>=0?t.ownerDocument.body:q(t)&&Re(t)?t:ht(xe(t))}function re(t,e){var r;e===void 0&&(e=[]);var o=ht(t),n=o===((r=t.ownerDocument)==null?void 0:r.body),i=B(o),s=n?[i].concat(i.visualViewport||[],Re(o)?o:[]):o,a=e.concat(s);return n?a:a.concat(re(xe(s)))}function Se(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function mr(t){var e=Q(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function Qe(t,e){return e===lt?Se(ur(t)):q(e)?mr(e):Se(pr(N(t)))}function vr(t){var e=re(xe(t)),r=["absolute","fixed"].indexOf(_(t).position)>=0,o=r&&q(t)?ce(t):t;return ne(o)?e.filter(function(n){return ne(n)&&ut(n,o)&&W(n)!=="body"}):[]}function hr(t,e,r){var o=e==="clippingParents"?vr(t):[].concat(e),n=[].concat(o,[r]),i=n[0],s=n.reduce(function(a,l){var d=Qe(t,l);return a.top=H(d.top,a.top),a.right=oe(d.right,a.right),a.bottom=oe(d.bottom,a.bottom),a.left=H(d.left,a.left),a},Qe(t,i));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function ae(t){return t.split("-")[1]}function bt(t){var e=t.reference,r=t.element,o=t.placement,n=o?R(o):null,i=o?ae(o):null,s=e.x+e.width/2-r.width/2,a=e.y+e.height/2-r.height/2,l;switch(n){case T:l={x:s,y:e.y-r.height};break;case P:l={x:s,y:e.y+e.height};break;case D:l={x:e.x+e.width,y:a};break;case $:l={x:e.x-r.width,y:a};break;default:l={x:e.x,y:e.y}}var d=n?Be(n):null;if(d!=null){var c=d==="y"?"height":"width";switch(i){case G:l[d]=l[d]-(e[c]/2-r[c]/2);break;case De:l[d]=l[d]+(e[c]/2-r[c]/2);break}}return l}function ie(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=o===void 0?t.placement:o,i=r.boundary,s=i===void 0?Rt:i,a=r.rootBoundary,l=a===void 0?lt:a,d=r.elementContext,c=d===void 0?ee:d,p=r.altBoundary,u=p===void 0?!1:p,m=r.padding,v=m===void 0?0:m,g=mt(typeof v!="number"?v:vt(v,se)),h=c===ee?Wt:ee,b=t.elements.reference,y=t.rects.popper,A=t.elements[u?h:c],f=hr(ne(A)?A:A.contextElement||N(t.elements.popper),s,l),C=Q(b),w=bt({reference:C,element:y,placement:n}),O=Se(Object.assign({},y,w)),x=c===ee?O:C,L={top:f.top-x.top+g.top,bottom:x.bottom-f.bottom+g.bottom,left:f.left-x.left+g.left,right:x.right-f.right+g.right},S=t.modifiersData.offset;if(c===ee&&S){var j=S[n];Object.keys(L).forEach(function(I){var k=[D,P].indexOf(I)>=0?1:-1,F=[T,P].indexOf(I)>=0?"y":"x";L[I]+=j[F]*k})}return L}function br(t,e){e===void 0&&(e={});var r=e,o=r.placement,n=r.boundary,i=r.rootBoundary,s=r.padding,a=r.flipVariations,l=r.allowedAutoPlacements,d=l===void 0?dt:l,c=ae(o),p=c?a?Ye:Ye.filter(function(v){return ae(v)===c}):se,u=p.filter(function(v){return d.indexOf(v)>=0});u.length===0&&(u=p);var m=u.reduce(function(v,g){return v[g]=ie(t,{placement:g,boundary:n,rootBoundary:i,padding:s})[R(g)],v},{});return Object.keys(m).sort(function(v,g){return m[v]-m[g]})}function gr(t){if(R(t)===Pe)return[];var e=Ae(t);return[Ge(t),e,Ge(e)]}function yr(t){var e=t.state,r=t.options,o=t.name;if(!e.modifiersData[o]._skip){for(var n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!0:s,l=r.fallbackPlacements,d=r.padding,c=r.boundary,p=r.rootBoundary,u=r.altBoundary,m=r.flipVariations,v=m===void 0?!0:m,g=r.allowedAutoPlacements,h=e.options.placement,b=R(h),y=b===h,A=l||(y||!v?[Ae(h)]:gr(h)),f=[h].concat(A).reduce(function(V,M){return V.concat(R(M)===Pe?br(e,{placement:M,boundary:c,rootBoundary:p,padding:d,flipVariations:v,allowedAutoPlacements:g}):M)},[]),C=e.rects.reference,w=e.rects.popper,O=new Map,x=!0,L=f[0],S=0;S<f.length;S++){var j=f[S],I=R(j),k=ae(j)===G,F=[T,P].indexOf(I)>=0,Z=F?"width":"height",U=ie(e,{placement:j,boundary:c,rootBoundary:p,altBoundary:u,padding:d}),z=F?k?D:$:k?P:T;C[Z]>w[Z]&&(z=Ae(z));var Ee=Ae(z),X=[];if(i&&X.push(U[I]<=0),a&&X.push(U[z]<=0,U[Ee]<=0),X.every(function(V){return V})){L=j,x=!1;break}O.set(j,X)}if(x)for(var le=v?3:1,Oe=function(M){var fe=f.find(function(Ce){var J=O.get(Ce);if(J)return J.slice(0,M).every(function(Le){return Le})});if(fe)return L=fe,"break"},Y=le;Y>0;Y--){var de=Oe(Y);if(de==="break")break}e.placement!==L&&(e.modifiersData[o]._skip=!0,e.placement=L,e.reset=!0)}}const wr={name:"flip",enabled:!0,phase:"main",fn:yr,requiresIfExists:["offset"],data:{_skip:!1}};function Ze(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function et(t){return[T,D,P,$].some(function(e){return t[e]>=0})}function Ar(t){var e=t.state,r=t.name,o=e.rects.reference,n=e.rects.popper,i=e.modifiersData.preventOverflow,s=ie(e,{elementContext:"reference"}),a=ie(e,{altBoundary:!0}),l=Ze(s,o),d=Ze(a,n,i),c=et(l),p=et(d);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:d,isReferenceHidden:c,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":c,"data-popper-escaped":p})}const xr={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Ar};function Er(t,e,r){var o=R(t),n=[$,T].indexOf(o)>=0?-1:1,i=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,s=i[0],a=i[1];return s=s||0,a=(a||0)*n,[$,D].indexOf(o)>=0?{x:a,y:s}:{x:s,y:a}}function Or(t){var e=t.state,r=t.options,o=t.name,n=r.offset,i=n===void 0?[0,0]:n,s=dt.reduce(function(c,p){return c[p]=Er(p,e.rects,i),c},{}),a=s[e.placement],l=a.x,d=a.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=d),e.modifiersData[o]=s}const Cr={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Or};function Lr(t){var e=t.state,r=t.name;e.modifiersData[r]=bt({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const kr={name:"popperOffsets",enabled:!0,phase:"read",fn:Lr,data:{}};function Sr(t){return t==="x"?"y":"x"}function Tr(t){var e=t.state,r=t.options,o=t.name,n=r.mainAxis,i=n===void 0?!0:n,s=r.altAxis,a=s===void 0?!1:s,l=r.boundary,d=r.rootBoundary,c=r.altBoundary,p=r.padding,u=r.tether,m=u===void 0?!0:u,v=r.tetherOffset,g=v===void 0?0:v,h=ie(e,{boundary:l,rootBoundary:d,padding:p,altBoundary:c}),b=R(e.placement),y=ae(e.placement),A=!y,f=Be(b),C=Sr(f),w=e.modifiersData.popperOffsets,O=e.rects.reference,x=e.rects.popper,L=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,S={x:0,y:0};if(w){if(i||a){var j=f==="y"?T:$,I=f==="y"?P:D,k=f==="y"?"height":"width",F=w[f],Z=w[f]+h[j],U=w[f]-h[I],z=m?-x[k]/2:0,Ee=y===G?O[k]:x[k],X=y===G?-x[k]:-O[k],le=e.elements.arrow,Oe=m&&le?qe(le):{width:0,height:0},Y=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:pt(),de=Y[j],V=Y[I],M=we(0,O[k],Oe[k]),fe=A?O[k]/2-z-M-de-L:Ee-M-de-L,Ce=A?-O[k]/2+z+M+V+L:X+M+V+L,J=e.elements.arrow&&ce(e.elements.arrow),Le=J?f==="y"?J.clientTop||0:J.clientLeft||0:0,We=e.modifiersData.offset?e.modifiersData.offset[e.placement][f]:0,Ie=w[f]+fe-We-Le,_e=w[f]+Ce-We;if(i){var He=we(m?oe(Z,Ie):Z,F,m?H(U,_e):U);w[f]=He,S[f]=He-F}if(a){var wt=f==="x"?T:$,At=f==="x"?P:D,ue=w[C],Ne=ue+h[wt],Fe=ue-h[At],ze=we(m?oe(Ne,Ie):Ne,ue,m?H(Fe,_e):Fe);w[C]=ze,S[C]=ze-ue}}e.modifiersData[o]=S}}const $r={name:"preventOverflow",enabled:!0,phase:"main",fn:Tr,requiresIfExists:["offset"]};function Pr(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Dr(t){return t===B(t)||!q(t)?je(t):Pr(t)}function qr(t,e,r){r===void 0&&(r=!1);var o=N(e),n=Q(t),i=q(e),s={scrollLeft:0,scrollTop:0},a={x:0,y:0};return(i||!i&&!r)&&((W(e)!=="body"||Re(o))&&(s=Dr(e)),q(e)?(a=Q(e),a.x+=e.clientLeft,a.y+=e.clientTop):o&&(a.x=Me(o))),{x:n.left+s.scrollLeft-a.x,y:n.top+s.scrollTop-a.y,width:n.width,height:n.height}}function Br(t){var e=new Map,r=new Set,o=[];t.forEach(function(i){e.set(i.name,i)});function n(i){r.add(i.name);var s=[].concat(i.requires||[],i.requiresIfExists||[]);s.forEach(function(a){if(!r.has(a)){var l=e.get(a);l&&n(l)}}),o.push(i)}return t.forEach(function(i){r.has(i.name)||n(i)}),o}function jr(t){var e=Br(t);return Yt.reduce(function(r,o){return r.concat(e.filter(function(n){return n.phase===o}))},[])}function Mr(t){var e;return function(){return e||(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Rr(t){var e=t.reduce(function(r,o){var n=r[o.name];return r[o.name]=n?Object.assign({},n,o,{options:Object.assign({},n.options,o.options),data:Object.assign({},n.data,o.data)}):o,r},{});return Object.keys(e).map(function(r){return e[r]})}var tt={placement:"bottom",modifiers:[],strategy:"absolute"};function rt(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(o){return!(o&&typeof o.getBoundingClientRect=="function")})}function Wr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,o=r===void 0?[]:r,n=e.defaultOptions,i=n===void 0?tt:n;return function(a,l,d){d===void 0&&(d=i);var c={placement:"bottom",orderedModifiers:[],options:Object.assign({},tt,i),modifiersData:{},elements:{reference:a,popper:l},attributes:{},styles:{}},p=[],u=!1,m={state:c,setOptions:function(b){g(),c.options=Object.assign({},i,c.options,b),c.scrollParents={reference:ne(a)?re(a):a.contextElement?re(a.contextElement):[],popper:re(l)};var y=jr(Rr([].concat(o,c.options.modifiers)));return c.orderedModifiers=y.filter(function(A){return A.enabled}),v(),m.update()},forceUpdate:function(){if(!u){var b=c.elements,y=b.reference,A=b.popper;if(rt(y,A)){c.rects={reference:qr(y,ce(A),c.options.strategy==="fixed"),popper:qe(A)},c.reset=!1,c.placement=c.options.placement,c.orderedModifiers.forEach(function(S){return c.modifiersData[S.name]=Object.assign({},S.data)});for(var f=0;f<c.orderedModifiers.length;f++){if(c.reset===!0){c.reset=!1,f=-1;continue}var C=c.orderedModifiers[f],w=C.fn,O=C.options,x=O===void 0?{}:O,L=C.name;typeof w=="function"&&(c=w({state:c,options:x,name:L,instance:m})||c)}}}},update:Mr(function(){return new Promise(function(h){m.forceUpdate(),h(c)})}),destroy:function(){g(),u=!0}};if(!rt(a,l))return m;m.setOptions(d).then(function(h){!u&&d.onFirstUpdate&&d.onFirstUpdate(h)});function v(){c.orderedModifiers.forEach(function(h){var b=h.name,y=h.options,A=y===void 0?{}:y,f=h.effect;if(typeof f=="function"){var C=f({state:c,name:b,instance:m,options:A}),w=function(){};p.push(C||w)}})}function g(){p.forEach(function(h){return h()}),p=[]}return m}}var Ir=[lr,kr,sr,Gt,Cr,wr,$r,nr,xr],_r=Wr({defaultModifiers:Ir});const Hr=parseInt(it.baseline.$value,10),Nr="js-mds-popover-trigger",ge="mds-popover--active",te={init:()=>{Array.from(document.querySelectorAll(`.${Nr}`)).forEach(e=>{const o=`${e.getAttribute("id")}-content`,n=document.getElementById(o),i=n.dataset?n.dataset.placement:null,s=_r(e,n,{placement:i||"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,Hr*3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),e.addEventListener("click",a=>{a.preventDefault(),s.update(),n.classList.toggle(ge),te.setAriaAttr(e,n,ge)}),document.addEventListener("mousedown",a=>{te.hide(e,n,s,ge,a)}),document.addEventListener("keydown",a=>{te.hide(e,n,s,ge,a)})})},hide:(t,e,r,o,n)=>{!t.contains(n.target)&&!r.state.elements.popper.contains(n.target)&&e.classList.contains(o)&&(e.classList.remove(o),te.setAriaAttr(t,e,o))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Fr=parseInt(st.size.breakpoint.md.$value,10),nt="data-modal-id",ot="mds-modal--active",zr="js-mds-modal-close";let ye;const K={init:()=>{window.innerWidth>Fr&&Array.from(document.querySelectorAll(`[${nt}]`)).forEach(r=>{const o=r.getAttribute(nt),n=document.getElementById(o),i=Array.from(n.querySelectorAll(`.${zr}`)),s=n.getAttribute("data-site-container"),a=document.getElementById(s);let d=n.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');d=Array.prototype.slice.call(d);const c=d[0],p=d[d.length-1];r.addEventListener("click",u=>{u.preventDefault(),K.open(n,c,a)}),n.addEventListener("click",u=>{u.target===n&&K.close(n,ye,a)}),n.addEventListener("keydown",u=>{K.trapFocus(u,c,p),(u.key==="Escape"||u.key==="Esc")&&K.close(n,ye,a)}),i.forEach(u=>{u.addEventListener("click",()=>{K.close(n,ye,a)})})})},open:(t,e,r)=>{ye=document.activeElement,t.classList.add(ot),e.focus(),r.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r.removeAttribute("aria-hidden"),t.classList.remove(ot),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}},Vr=".mds-form-element--file",ke="mds-form-element--selected-file",at="mds-form-element--dragover",Ur=".mds-file-upload__file-name",Xr=".mds-file-upload__remove-button",Yr="mds-form-element--file-supported",gt={init:()=>{gt.isBrowserIE()||Array.from(document.querySelectorAll(Vr)).forEach(e=>{e.classList.add(Yr);const r=e.querySelector(Ur),o=e.querySelector("input[type=file]"),n=e.querySelector(Xr);document.addEventListener("readystatechange",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke))}),o.addEventListener("change",()=>{o.files&&o.files.length&&(r.textContent=o.files[0].name,e.classList.add(ke),n.focus())}),n.addEventListener("click",i=>{i.preventDefault(),o.value="",r.textContent="",e.classList.remove(ke),o.focus()}),["dragover","dragenter"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.add(at)})}),["dragleave","dragend","drop"].forEach(i=>{o.addEventListener(i,s=>{s.stopPropagation(),e.classList.remove(at)})})})},isBrowserIE:()=>!!window.document.documentMode},Jr=".mds-form-element--character-count",Kr=".mds-form-message--character-count",Gr=".js-character-count-number",Qr=".mds-form-control",Te={init:()=>{Array.from(document.querySelectorAll(Jr)).forEach(e=>{const r=e.querySelector(Qr),o=r.getAttribute("maxlength"),n=e.querySelector(Kr),i=e.querySelector(Gr);r.removeAttribute("maxlength"),Te.updateCounter(r,o,i,n),r.addEventListener("keyup",s=>{s.stopPropagation(),Te.updateCounter(r,o,i,n)})})},updateCounter:(t,e,r,o)=>{const n=t.value.match(/(\r\n|\n|\r)/g),i=t.value.length+(n?n.length:0),s=e-i;r.textContent=s,s<0?o.classList.add("mds-form-message--error"):o.classList.remove("mds-form-message--error")}},Zr="js-mds-button-double-submit",yt={init:()=>{Array.from(document.querySelectorAll(`.${Zr}`)).forEach(e=>{e.addEventListener("click",()=>{yt.toggleDisable(e)})})},toggleDisable:t=>{setTimeout(()=>{t.setAttribute("disabled","")},1),setTimeout(()=>{t.removeAttribute("disabled")},1e3)}},en={setFluidVideos:()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach(e=>{const r=document.createElement("div");r.classList.add("mds-fluid-video"),r.innerHTML=e.outerHTML,e.replaceWith(r)})}};class tn extends HTMLElement{connectedCallback(){const r=this.querySelector(".mds-card-link__link");let o;this.onmousedown=()=>{o=+new Date},this.onmouseup=()=>{+new Date-o<200&&r.click(),o=void 0}}disconnectedCallback(){this.onmousedown=this.onmouseup=null}}class rn extends HTMLElement{static observedAttributes=["form","field-name","show-when"];showHide=()=>{const{field:e}=this,r=this.getAttribute("show-when");(e.type==="checkbox"?e.checked.toString():e.value.toString())===r?this.hidden=!1:this.hidden=!0};setup=()=>{this.cleanup();const e=this.getAttribute("form"),r=this.getAttribute("field-name");if(this.formElement=e?document.querySelector(e):this.closest("form"),!this.formElement)throw new Error(`<mds-conditional-section> for ${r} could not find the associated form`);if(this.field=this.formElement.elements[r],!this.field)throw new Error(`<mds-conditional-section> for ${r} could not find the associated field`);this.showHide(),this.formElement.addEventListener("input",this.showHide)};connectedCallback(){this.setup()}cleanup=()=>{this.formElement?.removeEventListener("input",this.showHide)};disconnectedCallback(){this.cleanup()}attributeChangedCallback(e,r,o){const{showHide:n,setup:i}=this;this.isConnected&&r!==o&&(e==="show-when"?n():(e==="field-name"||e==="form")&&i())}}window.customElements.get("mds-dropdown-nav")||window.customElements.define("mds-dropdown-nav",xt);window.customElements.get("mds-timeout-dialog")||window.customElements.define("mds-timeout-dialog",Et);window.customElements.get("mds-card-link")||window.customElements.define("mds-card-link",tn);window.customElements.get("mds-conditional-section")||window.customElements.define("mds-conditional-section",rn);window.customElements.get("mds-image-cropper")||window.customElements.define("mds-image-cropper",Ot);const $e=()=>{E.init(),ct.init(),qt.init(),Mt.init(),K.init(),gt.init(),Te.init(),te.init(),yt.init(),en.setFluidVideos()};window.mdgxInitAll=$e;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",$e):$e();
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@madgex/design-system",
|
|
3
3
|
"author": "Madgex",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "13.
|
|
5
|
+
"version": "13.5.0",
|
|
6
6
|
"main": "dist/js/index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
".": "./dist/js/index.js",
|
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
"build:icons": "svgo -f src/icons ./dist/assets/icons",
|
|
30
30
|
"build:fractal": "fractal build",
|
|
31
31
|
"build:vite": "vite build --config=./vite.config.js",
|
|
32
|
+
"test": "vitest run",
|
|
33
|
+
"test:watch": "vitest",
|
|
32
34
|
"prepublishOnly": "npm run build",
|
|
33
35
|
"semantic-release": "semantic-release -e semantic-release-monorepo"
|
|
34
36
|
},
|
|
@@ -51,7 +53,7 @@
|
|
|
51
53
|
"del": "^6.0.0",
|
|
52
54
|
"globby": "^11.0.4",
|
|
53
55
|
"gulp": "^4.0.2",
|
|
54
|
-
"jsdom": "^
|
|
56
|
+
"jsdom": "^28.1.0",
|
|
55
57
|
"nunjucks": "^3.2.4",
|
|
56
58
|
"postcss": "^8.5.6",
|
|
57
59
|
"postcss-combine-media-query": "^1.0.1",
|
|
@@ -60,8 +62,8 @@
|
|
|
60
62
|
"sass": "^1.93.3",
|
|
61
63
|
"svgo": "^2.8.0",
|
|
62
64
|
"svgstore": "^3.0.0-2",
|
|
63
|
-
"vite": "^7.
|
|
64
|
-
"vitest": "^4.0.
|
|
65
|
+
"vite": "^7.3.1",
|
|
66
|
+
"vitest": "^4.0.18"
|
|
65
67
|
},
|
|
66
68
|
"engines": {
|
|
67
69
|
"node": ">=22"
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# mds-image-cropper
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
|
|
5
|
+
There are 2 flavours of this component: regular `<mds-image-cropper/>` bundled with Design System JS, and Standalone ShadowDOM version `<mds-image-cropper-standalone />`.
|
|
6
|
+
|
|
7
|
+
### Example
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<mds-image-cropper id="my-cropper" aspect-ratio="1" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper>
|
|
11
|
+
|
|
12
|
+
<script type="module">
|
|
13
|
+
const myCropper = document.querySelector('#my-cropper');
|
|
14
|
+
myCropper.setAttribute('src', URL.createObjectURL(myFile)); // if getting image from file input or mds-image-cropper is already on the page
|
|
15
|
+
let previousUrlCreatedFromBlob;
|
|
16
|
+
myCropper.addEventListener('commit', (e) => {
|
|
17
|
+
if (e.detail) {
|
|
18
|
+
try {
|
|
19
|
+
// optionally cleanup any previous createObjectURL usage to clear memory
|
|
20
|
+
URL.revokeObjectURL(previousUrlCreatedFromBlob);
|
|
21
|
+
} catch (e) {}
|
|
22
|
+
const croppedFile = new File([e.detail], 'my-file-name', { type: e.detail.type });
|
|
23
|
+
const dataTransfer = new DataTransfer();
|
|
24
|
+
dataTransfer.items.add(croppedFile);
|
|
25
|
+
myFileInput.files = dataTransfer.files;
|
|
26
|
+
// close modal here
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
myCropper.addEventListener('reset', (e) => {
|
|
30
|
+
// close modal here
|
|
31
|
+
});
|
|
32
|
+
myCropper.addEventListener('error', (e) => {
|
|
33
|
+
// cropping failed?
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Attributes
|
|
39
|
+
|
|
40
|
+
- `aspect-ratio` : optional, default `1.77777`. Should be a int/float Number e.g. `1` for square aspect-ratio, `1.77777` for an aspect ratio of `16/9`.
|
|
41
|
+
- If `output-width` and `output-height` attributes are set then aspect will be automatically calculated from those values, and this attribute will be ignored.
|
|
42
|
+
- `output-width` : optional, Int representing exact pixels for output image, and also used to calculate `aspect-ratio` of crop. You should also set `output-height` attribute.
|
|
43
|
+
- `output-height` : optional, Int representing exact pixels for output image, and also used to calculate `aspect-ratio` of crop. You should also set `output-width` attribute.
|
|
44
|
+
- `src` : required, image source
|
|
45
|
+
- `zoom`: optional, default `1`
|
|
46
|
+
- `min-zoom`: optional, default `1`. Set to a value between `0` and `1` to allow "zooming out", combined with `restrict-position="false"`
|
|
47
|
+
- `max-zoom`: optional, default `3`
|
|
48
|
+
- `crop-x`: optional, default `0`. `0` is center of image on `x axis`
|
|
49
|
+
- `crop-y`: optional, default `0`. `0` is center of image on `y axis`
|
|
50
|
+
- `no-grid`: optional, default `false`. set empty attribute or to `true` to hide grid
|
|
51
|
+
- `restrict-position`: optional, default `true`. set to `false` to allow moving the image outside of the crop area
|
|
52
|
+
|
|
53
|
+
### translations
|
|
54
|
+
|
|
55
|
+
- `t-zoom-label` : optional, default : `Zoom`
|
|
56
|
+
- `t-btn-reset` : optional, default : `Reset`
|
|
57
|
+
- `t-btn-commit` : optional, default : `Save and crop`
|
|
58
|
+
- `t-btn-zoom-out-aria`: optional, default : `Minus button - Zoom out`
|
|
59
|
+
- `t-btn-zoom-in-aria`: optional, default : `Plus button - Zoom in`
|
|
60
|
+
- `t-touch-area-controls` : optional, default : `On this element you can use arrow keys to pan the image around the crop area, and Page Up / Page Down to zoom in and out.`
|
|
61
|
+
- `t-aria-live` : optional, default : `Crop Top Position: {y} pixels, Crop Left Position: {x} pixels, Crop Width {width} pixels, Crop Height: {height} pixels. Image Width: {imageWidth} pixels, Image Height: {imageHeight} pixels.`
|
|
62
|
+
|
|
63
|
+
## Events
|
|
64
|
+
|
|
65
|
+
- `cropchange` `e.detail = { percent, pixels }` : This event is fired when the crop data has changed. emits crop area of image as pixels and percentage
|
|
66
|
+
- `reset`: Reset button was clicked - zoom & crop has been reset. Useful to listen to if you want to close a dialog or reset something outside of this component
|
|
67
|
+
- `commit` `e.detail = Blob`: "Save" button was clicked, emits a `Blob` of the cropped image data
|
|
68
|
+
- `error`: usually failure to crop image
|
|
69
|
+
|
|
70
|
+
## Accessibility
|
|
71
|
+
|
|
72
|
+
### Keyboard controls
|
|
73
|
+
|
|
74
|
+
- `image container` element : `Arrow keys` to pan, `PageUp` and `PageDown` to zoom.
|
|
75
|
+
- `zoom buttons` and `zoom range input`: control zoom with natural controls
|
|
76
|
+
|
|
77
|
+
### Mouse controls
|
|
78
|
+
|
|
79
|
+
- `mouse`, `touch` on image container for panning
|
|
80
|
+
- `pinch to zoom` and `mouse wheel` on image container for zoom
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Compute the dimension of the crop area based on image size and aspect ratio
|
|
3
|
+
* @param imgWidth width of the src image in pixels
|
|
4
|
+
* @param imgHeight height of the src image in pixels
|
|
5
|
+
* @param aspect aspect ratio of the crop
|
|
6
|
+
*/
|
|
7
|
+
export function getCropSize(imgWidth = 0, imgHeight = 0, aspect) {
|
|
8
|
+
if (imgWidth >= imgHeight * aspect) {
|
|
9
|
+
return {
|
|
10
|
+
width: imgHeight * aspect,
|
|
11
|
+
height: imgHeight,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
return {
|
|
15
|
+
width: imgWidth,
|
|
16
|
+
height: imgWidth / aspect,
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Ensure a new image position stays in the crop area.
|
|
22
|
+
* @param position new x/y position requested for the image
|
|
23
|
+
* @param imageSize width/height of the src image
|
|
24
|
+
* @param cropSize width/height of the crop area
|
|
25
|
+
* @param zoom zoom value
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export function restrictPosition(position, imageSize, cropSize, zoom) {
|
|
29
|
+
return {
|
|
30
|
+
x: restrictPositionCoord(position.x, imageSize.width, cropSize.width, zoom),
|
|
31
|
+
y: restrictPositionCoord(position.y, imageSize.height, cropSize.height, zoom),
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function restrictPositionCoord(position, imageSize, cropSize, zoom) {
|
|
36
|
+
// Default max position calculation
|
|
37
|
+
let maxPosition = (imageSize * zoom) / 2 - cropSize / 2;
|
|
38
|
+
// Allow free movement of the image inside the crop area if zoom is less than 1
|
|
39
|
+
// But limit the image's position to inside the cropBox
|
|
40
|
+
if (zoom < 1) {
|
|
41
|
+
maxPosition = cropSize / 2 - (imageSize * zoom) / 2;
|
|
42
|
+
}
|
|
43
|
+
return Math.min(maxPosition, Math.max(position, -maxPosition));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Compute the output cropped area of the image in percentages and pixels.
|
|
48
|
+
* x/y are the top-left coordinates on the src image
|
|
49
|
+
* @param crop x/y position of the current center of the image
|
|
50
|
+
* @param imageSize width/height of the src image (default is size on the screen, natural is the original size)
|
|
51
|
+
* @param cropSize width/height of the crop area
|
|
52
|
+
* @param aspect aspect value
|
|
53
|
+
* @param zoom zoom value
|
|
54
|
+
* @param restrictPosition whether we should limit or not the cropped area
|
|
55
|
+
*/
|
|
56
|
+
export function computeCroppedArea({ crop, imageSize, cropSize, aspect, zoom, restrictPosition = true }) {
|
|
57
|
+
if (!cropSize?.width) return;
|
|
58
|
+
const limitAreaFn = restrictPosition ? limitArea : (_, value) => value;
|
|
59
|
+
const croppedAreaPercentages = {
|
|
60
|
+
x: limitAreaFn(100, (((imageSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / imageSize.width) * 100),
|
|
61
|
+
y: limitAreaFn(100, (((imageSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / imageSize.height) * 100),
|
|
62
|
+
width: limitAreaFn(100, ((cropSize.width / imageSize.width) * 100) / zoom),
|
|
63
|
+
height: limitAreaFn(100, ((cropSize.height / imageSize.height) * 100) / zoom),
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
// we compute the pixels size naively
|
|
67
|
+
const widthInPixels = limitAreaFn(
|
|
68
|
+
imageSize.naturalWidth,
|
|
69
|
+
(croppedAreaPercentages.width * imageSize.naturalWidth) / 100,
|
|
70
|
+
true,
|
|
71
|
+
);
|
|
72
|
+
const heightInPixels = limitAreaFn(
|
|
73
|
+
imageSize.naturalHeight,
|
|
74
|
+
(croppedAreaPercentages.height * imageSize.naturalHeight) / 100,
|
|
75
|
+
true,
|
|
76
|
+
);
|
|
77
|
+
const isImgWiderThanHigh = imageSize.naturalWidth >= imageSize.naturalHeight * aspect;
|
|
78
|
+
|
|
79
|
+
// then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
|
|
80
|
+
// if the image is wider than high, when zoom is 0, the crop height will be equals to image height
|
|
81
|
+
// thus we want to compute the width from the height and aspect for accuracy.
|
|
82
|
+
// Otherwise, we compute the height from width and aspect.
|
|
83
|
+
const sizePixels = isImgWiderThanHigh
|
|
84
|
+
? {
|
|
85
|
+
width: Math.round(heightInPixels * aspect),
|
|
86
|
+
height: heightInPixels,
|
|
87
|
+
}
|
|
88
|
+
: {
|
|
89
|
+
width: widthInPixels,
|
|
90
|
+
height: Math.round(widthInPixels / aspect),
|
|
91
|
+
};
|
|
92
|
+
const croppedAreaPixels = {
|
|
93
|
+
...sizePixels,
|
|
94
|
+
x: limitAreaFn(
|
|
95
|
+
imageSize.naturalWidth - sizePixels.width,
|
|
96
|
+
(croppedAreaPercentages.x * imageSize.naturalWidth) / 100,
|
|
97
|
+
true,
|
|
98
|
+
),
|
|
99
|
+
y: limitAreaFn(
|
|
100
|
+
imageSize.naturalHeight - sizePixels.height,
|
|
101
|
+
(croppedAreaPercentages.y * imageSize.naturalHeight) / 100,
|
|
102
|
+
true,
|
|
103
|
+
),
|
|
104
|
+
};
|
|
105
|
+
return { percent: croppedAreaPercentages, pixels: croppedAreaPixels };
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Ensure the returned value is between 0 and max
|
|
110
|
+
* @param max
|
|
111
|
+
* @param value
|
|
112
|
+
* @param shouldRound
|
|
113
|
+
*/
|
|
114
|
+
function limitArea(max, value, shouldRound = false) {
|
|
115
|
+
const v = shouldRound ? Math.round(value) : value;
|
|
116
|
+
return Math.min(max, Math.max(0, v));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const createImage = (url) =>
|
|
120
|
+
new Promise((resolve, reject) => {
|
|
121
|
+
const image = new Image();
|
|
122
|
+
image.addEventListener('load', () => resolve(image));
|
|
123
|
+
image.addEventListener('error', (error) => reject(error));
|
|
124
|
+
image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues
|
|
125
|
+
image.src = url;
|
|
126
|
+
});
|
|
127
|
+
const RAD_TO_DEG = Math.PI / 180;
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
*
|
|
131
|
+
* @param {object} options
|
|
132
|
+
* @param {HTMLImageElement} options.imageEl
|
|
133
|
+
* @param {{x:number, y:number, width: number, height: number}} options.crop realsize in pixels vs original image dimensions, crop bounding box, origin 0 is center
|
|
134
|
+
* @param {number} options.rotateDeg degrees
|
|
135
|
+
* @param {string} options.format optional, default `png`
|
|
136
|
+
* @param {string} options.backgroundFill, optional, e.g. `#fff`
|
|
137
|
+
* @param {number} options.width, optional, fixed output width
|
|
138
|
+
* @param {number} options.height, optional, fixed output height
|
|
139
|
+
* @returns
|
|
140
|
+
*/
|
|
141
|
+
export async function getCroppedImage({
|
|
142
|
+
imageEl: origImageEl,
|
|
143
|
+
crop,
|
|
144
|
+
rotateDeg = 0,
|
|
145
|
+
format = 'png',
|
|
146
|
+
backgroundFill,
|
|
147
|
+
width,
|
|
148
|
+
height,
|
|
149
|
+
}) {
|
|
150
|
+
if (!origImageEl || !crop) return null;
|
|
151
|
+
|
|
152
|
+
const imageEl = await createImage(origImageEl.src);
|
|
153
|
+
const canvas = document.createElement('canvas');
|
|
154
|
+
const ctx = canvas.getContext('2d');
|
|
155
|
+
if (!ctx) return null;
|
|
156
|
+
|
|
157
|
+
const scaleX = width ? width / crop.width : 1;
|
|
158
|
+
const scaleY = height ? height / crop.height : 1;
|
|
159
|
+
|
|
160
|
+
// const scaleX = imageEl.naturalWidth / imageEl.width;
|
|
161
|
+
// const scaleY = imageEl.naturalHeight / imageEl.height;
|
|
162
|
+
|
|
163
|
+
canvas.width = Math.floor(crop.width * scaleX);
|
|
164
|
+
canvas.height = Math.floor(crop.height * scaleY);
|
|
165
|
+
|
|
166
|
+
ctx.imageSmoothingQuality = 'high';
|
|
167
|
+
|
|
168
|
+
const cropX = crop.x * scaleX;
|
|
169
|
+
const cropY = crop.y * scaleY;
|
|
170
|
+
|
|
171
|
+
const rotateRads = rotateDeg * RAD_TO_DEG;
|
|
172
|
+
const centerX = (imageEl.naturalWidth / 2) * scaleX;
|
|
173
|
+
const centerY = (imageEl.naturalHeight / 2) * scaleY;
|
|
174
|
+
|
|
175
|
+
ctx.save();
|
|
176
|
+
// background fill color
|
|
177
|
+
if (backgroundFill) {
|
|
178
|
+
ctx.fillStyle = backgroundFill;
|
|
179
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// Move the crop origin to the canvas origin (0,0)
|
|
183
|
+
ctx.translate(-cropX, -cropY);
|
|
184
|
+
// Move the origin to the center of the original image
|
|
185
|
+
ctx.translate(centerX, centerY);
|
|
186
|
+
// Rotate around the origin
|
|
187
|
+
ctx.rotate(rotateRads);
|
|
188
|
+
// Move the center of the image to the origin (0,0)
|
|
189
|
+
ctx.translate(-centerX, -centerY);
|
|
190
|
+
|
|
191
|
+
ctx.drawImage(
|
|
192
|
+
imageEl,
|
|
193
|
+
0, // canvas is translated, origin is "0"
|
|
194
|
+
0, // canvas is translated, origin is "0"
|
|
195
|
+
imageEl.naturalWidth, // source image size
|
|
196
|
+
imageEl.naturalHeight, // source image size
|
|
197
|
+
0, // canvas is translated, origin is "0"
|
|
198
|
+
0, // canvas is translated, origin is "0"
|
|
199
|
+
imageEl.naturalWidth * scaleX, // destination image size
|
|
200
|
+
imageEl.naturalHeight * scaleY, // destination image size
|
|
201
|
+
);
|
|
202
|
+
|
|
203
|
+
// As Base64 string
|
|
204
|
+
// return canvas.toDataURL('image/jpeg');
|
|
205
|
+
// As a blob
|
|
206
|
+
return new Promise((resolve, reject) => {
|
|
207
|
+
canvas.toBlob(
|
|
208
|
+
(blob) => {
|
|
209
|
+
try {
|
|
210
|
+
resolve(blob);
|
|
211
|
+
} catch (error) {
|
|
212
|
+
reject(error);
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
`image/${format}`,
|
|
216
|
+
0.9,
|
|
217
|
+
);
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
/**
|
|
221
|
+
* Strip all HTML from a string. Useful as Safari does not support `setHTML`, a safe XSS function
|
|
222
|
+
* @param {string} htmlString
|
|
223
|
+
* @returns {string} clean text string
|
|
224
|
+
*/
|
|
225
|
+
export function stripHTML(htmlString) {
|
|
226
|
+
if (!htmlString) return htmlString;
|
|
227
|
+
let doc = new DOMParser().parseFromString(htmlString, 'text/html');
|
|
228
|
+
return doc.body.textContent || '';
|
|
229
|
+
}
|