npm - @madgex/design-system - Versions diffs - 13.5.1 → 13.6.0 - Mend

@madgex/design-system 13.5.1 → 13.6.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.

Files changed (23) hide show

package/dist/assets/icons.json +1 -1
package/dist/css/index.css +1 -1
package/dist/js/components/mds-image-cropper-standalone.js +1 -1
package/dist/js/{image-cropper-BlqRRHAU.js → image-cropper-BUN9gxO4.js} +1 -1
package/dist/js/index-fractal.js +1 -1
package/dist/js/index.js +1 -1
package/package.json +1 -1
package/src/components/_macro-index.njk +1 -0
package/src/components/image-cropper/README.md +39 -6
package/src/components/image-cropper/_macro.njk +3 -0
package/src/components/image-cropper/_template.njk +24 -0
package/src/components/image-cropper/image-cropper.js +2 -1
package/src/components/image-cropper/image-cropper.scss +7 -0
package/src/components/inputs/file-upload/README.md +15 -7
package/src/components/inputs/file-upload/_template.njk +52 -37
package/src/components/inputs/file-upload/file-upload.config.js +56 -2
package/src/components/inputs/file-upload/file-upload.js +166 -56
package/src/components/inputs/file-upload/file-upload.njk +5 -2
package/src/components/inputs/file-upload/file-upload.scss +98 -106
package/src/components/inputs/text-editor/_template.njk +1 -1
package/src/components/inputs/text-editor/text-editor.config.js +1 -1
package/src/components/modal/modal.js +2 -2
package/src/js/index.js +4 -2

package/dist/js/components/mds-image-cropper-standalone.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{M as r}from"../image-cropper-BlqRRHAU.js";const e='@charset "UTF-8";a{background-color:transparent}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring{outline:1px dotted ButtonText}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}template{display:none}div,a,img,center,label,output{margin:0;padding:0;border:0;font:inherit}*,*:before,*:after{box-sizing:border-box;word-wrap:break-word}.mds-visually-hidden{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}a:hover,a:focus{--link-color: var(--mds-color-link-hover, #15598e);--text-decoration: var(--mds-text-decoration-link-hover, underline);--text-decoration-thickness: max(2px, .12em)}a{--link-color: var(--mds-color-link-base, #1b75bb);--link-font-weight: var(--mds-font-weight-link-base);--text-decoration: var(--mds-text-decoration-link-base, underline);--text-decoration-thickness: 1px;color:var(--link-color);font-weight:var(--link-font-weight);text-decoration:var(--text-decoration);text-decoration-thickness:var(--text-decoration-thickness);text-underline-offset:.15rem}img{max-width:100%}.mds-grid-row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.mds-grid-col{box-sizing:border-box;flex:0 0 auto;padding-right:10px;padding-left:10px}.mds-grid-col{flex-grow:1;flex-basis:0;max-width:100%}.mds-grid-end{justify-content:flex-end;text-align:end}.mds-grid-fit-content{flex-grow:0;flex-basis:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mds-button{--button-background: var(--mds-color-button-bg-base);--button-border-color-top: var(--mds-color-button-border-top);--button-border-color-right: var(--mds-color-button-border-right);--button-border-color-bottom: var(--mds-color-button-border-bottom);--button-border-color-left: var(--mds-color-button-border-left);--button-border-color: var(--button-border-color-top) var(--button-border-color-right) var(--button-border-color-bottom) var(--button-border-color-left);--button-border-width: var(--mds-size-border-width-button);--button-border-radius: var(--mds-size-border-radius-button);--button-text-color: var(--mds-color-button-text-base);--button-font-family: var(--mds-font-family-button-base);--button-font-weight: var(--mds-font-weight-button-base);--button-text-transform: var(--mds-text-transform-button);--button-font-spacing: var(--mds-font-spacing-button);--text-decoration: none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;width:auto;background:var(--button-background, #000);border-width:var(--button-border-width, 1px);border-color:var(--button-border-color, transparent);border-style:solid;border-radius:var(--button-border-radius, 4px);padding:12px 20px;display:inline-block;text-align:center;color:var(--button-text-color, #fff);font-family:var(--button-font-family);font-weight:var(--button-font-weight);text-transform:var(--button-text-transform);letter-spacing:var(--button-font-spacing);text-decoration:var(--text-decoration)}.mds-button:hover,.mds-button:focus{--button-background: var(--mds-color-button-bg-hover, #333333);--button-border-color-top: var(--mds-color-button-border-hover-top);--button-border-color-right: var(--mds-color-button-border-hover-right);--button-border-color-bottom: var(--mds-color-button-border-hover-bottom);--button-border-color-left: var(--mds-color-button-border-hover-left);--button-text-color: var(--mds-color-button-text-hover);--text-decoration: none}.mds-button--neutral{--button-background: #fff;--button-text-color: var(--mds-color-text-base, #000);--button-border-color: #DDDDDD;--button-border-width: 1px}.mds-button--neutral:hover,.mds-button--neutral:focus{--button-background: #DDDDDD;--button-text-color: var(--mds-color-text-base, #000);--button-border-color: #DDDDDD}@keyframes notification-fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-75%)}to{opacity:1;transform:translate(-50%) translateY(-115%)}}.mds-form-label{display:flex;margin-bottom:12px}@keyframes spin-timeout-dialog{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mds-image-cropper__container{position:absolute;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;background:repeating-conic-gradient(gray 0 25%,#0000 0 50%) 50%/20px 20px}.mds-image-cropper__image{max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0;will-change:transform}.mds-image-cropper__area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999em;box-sizing:border-box;color:#000000b3;border:1px solid rgba(255,255,255,.5);overflow:hidden}.mds-image-cropper__background{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff}.mds-image-cropper-grid:before{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:0 33.33%;border-top:0;border-bottom:0}.mds-image-cropper-grid:after{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:33.33% 0;border-left:0;border-right:0}.mds-image-cropper__wrapper{position:relative;aspect-ratio:1}.mds-image-cropper__control{display:flex}.mds-image-cropper__control-label{margin-top:20px}.mds-image-cropper__control-zoom{flex:1}.mds-image-cropper__control-button{cursor:pointer;appearance:none;background:transparent;border:0;width:2.2rem;padding:0 6px}.mds-button{font-size:var(--mds-font-type-s0-size);line-height:var(--mds-font-type-s0-line-height)}.mds-margin-bottom-b8{margin-bottom:32px}',n='.mds-image-cropper__container{position:absolute;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;background:repeating-conic-gradient(gray 0 25%,#0000 0 50%) 50%/20px 20px}.mds-image-cropper__image{max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0;will-change:transform}.mds-image-cropper__area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999em;box-sizing:border-box;color:#000000b3;border:1px solid rgba(255,255,255,.5);overflow:hidden}.mds-image-cropper__background{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff}.mds-image-cropper-grid:before{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:0 33.33%;border-top:0;border-bottom:0}.mds-image-cropper-grid:after{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:33.33% 0;border-left:0;border-right:0}.mds-image-cropper__wrapper{position:relative;aspect-ratio:1}.mds-image-cropper__control{display:flex}.mds-image-cropper__control-label{margin-top:20px}.mds-image-cropper__control-zoom{flex:1}.mds-image-cropper__control-button{cursor:pointer;appearance:none;background:transparent;border:0;width:2.2rem;padding:0 6px}';class a extends r{constructor(...t){super(...t),this.attachShadow({mode:"open"});const o=new CSSStyleSheet;o.replaceSync(`
+import{M as r}from"../image-cropper-BUN9gxO4.js";const e='@charset "UTF-8";a{background-color:transparent}img{border-style:none}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button{text-transform:none}button,[type=button],[type=reset]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring{outline:1px dotted ButtonText}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}template{display:none}div,a,img,center,label,output{margin:0;padding:0;border:0;font:inherit}*,*:before,*:after{box-sizing:border-box;word-wrap:break-word}.mds-visually-hidden{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}a:hover,a:focus{--link-color: var(--mds-color-link-hover, #15598e);--text-decoration: var(--mds-text-decoration-link-hover, underline);--text-decoration-thickness: max(2px, .12em)}a{--link-color: var(--mds-color-link-base, #1b75bb);--link-font-weight: var(--mds-font-weight-link-base);--text-decoration: var(--mds-text-decoration-link-base, underline);--text-decoration-thickness: 1px;color:var(--link-color);font-weight:var(--link-font-weight);text-decoration:var(--text-decoration);text-decoration-thickness:var(--text-decoration-thickness);text-underline-offset:.15rem}img{max-width:100%}.mds-grid-row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}.mds-grid-col{box-sizing:border-box;flex:0 0 auto;padding-right:10px;padding-left:10px}.mds-grid-col{flex-grow:1;flex-basis:0;max-width:100%}.mds-grid-end{justify-content:flex-end;text-align:end}.mds-grid-fit-content{flex-grow:0;flex-basis:auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mds-button{--button-background: var(--mds-color-button-bg-base);--button-border-color-top: var(--mds-color-button-border-top);--button-border-color-right: var(--mds-color-button-border-right);--button-border-color-bottom: var(--mds-color-button-border-bottom);--button-border-color-left: var(--mds-color-button-border-left);--button-border-color: var(--button-border-color-top) var(--button-border-color-right) var(--button-border-color-bottom) var(--button-border-color-left);--button-border-width: var(--mds-size-border-width-button);--button-border-radius: var(--mds-size-border-radius-button);--button-text-color: var(--mds-color-button-text-base);--button-font-family: var(--mds-font-family-button-base);--button-font-weight: var(--mds-font-weight-button-base);--button-text-transform: var(--mds-text-transform-button);--button-font-spacing: var(--mds-font-spacing-button);--text-decoration: none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;width:auto;background:var(--button-background, #000);border-width:var(--button-border-width, 1px);border-color:var(--button-border-color, transparent);border-style:solid;border-radius:var(--button-border-radius, 4px);padding:12px 20px;display:inline-block;text-align:center;color:var(--button-text-color, #fff);font-family:var(--button-font-family);font-weight:var(--button-font-weight);text-transform:var(--button-text-transform);letter-spacing:var(--button-font-spacing);text-decoration:var(--text-decoration)}.mds-button:hover,.mds-button:focus{--button-background: var(--mds-color-button-bg-hover, #333333);--button-border-color-top: var(--mds-color-button-border-hover-top);--button-border-color-right: var(--mds-color-button-border-hover-right);--button-border-color-bottom: var(--mds-color-button-border-hover-bottom);--button-border-color-left: var(--mds-color-button-border-hover-left);--button-text-color: var(--mds-color-button-text-hover);--text-decoration: none}.mds-button--neutral{--button-background: #fff;--button-text-color: var(--mds-color-text-base, #000);--button-border-color: #DDDDDD;--button-border-width: 1px}.mds-button--neutral:hover,.mds-button--neutral:focus{--button-background: #DDDDDD;--button-text-color: var(--mds-color-text-base, #000);--button-border-color: #DDDDDD}@keyframes notification-fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-75%)}to{opacity:1;transform:translate(-50%) translateY(-115%)}}.mds-form-label{display:flex;margin-bottom:12px}@keyframes spin-timeout-dialog{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mds-image-cropper__container{position:absolute;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;background:repeating-conic-gradient(gray 0 25%,#0000 0 50%) 50%/20px 20px}.mds-image-cropper__container:focus,.mds-image-cropper__container:focus-visible{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:2px}.mds-image-cropper__image{max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0;will-change:transform}.mds-image-cropper__area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999em;box-sizing:border-box;color:#000000b3;border:1px solid rgba(255,255,255,.5);overflow:hidden}.mds-image-cropper__background{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff}.mds-image-cropper-grid:before{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:0 33.33%;border-top:0;border-bottom:0}.mds-image-cropper-grid:after{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:33.33% 0;border-left:0;border-right:0}.mds-image-cropper__wrapper{position:relative;aspect-ratio:1}.mds-image-cropper__control{display:flex}.mds-image-cropper__control-label{margin-top:20px}.mds-image-cropper__control-zoom{flex:1}.mds-image-cropper__control-button{cursor:pointer;appearance:none;background:transparent;border:0;width:2.2rem;padding:0 6px}.mds-button{font-size:var(--mds-font-type-s0-size);line-height:var(--mds-font-type-s0-line-height)}.mds-margin-bottom-b8{margin-bottom:32px}',n='.mds-image-cropper__container{position:absolute;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;background:repeating-conic-gradient(gray 0 25%,#0000 0 50%) 50%/20px 20px}.mds-image-cropper__container:focus,.mds-image-cropper__container:focus-visible{outline-color:Highlight;outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:2px}.mds-image-cropper__image{max-width:100%;max-height:100%;margin:auto;position:absolute;inset:0;will-change:transform}.mds-image-cropper__area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999em;box-sizing:border-box;color:#000000b3;border:1px solid rgba(255,255,255,.5);overflow:hidden}.mds-image-cropper__background{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff}.mds-image-cropper-grid:before{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:0 33.33%;border-top:0;border-bottom:0}.mds-image-cropper-grid:after{content:" ";box-sizing:border-box;border:1px solid rgba(255,255,255,.5);position:absolute;inset:33.33% 0;border-left:0;border-right:0}.mds-image-cropper__wrapper{position:relative;aspect-ratio:1}.mds-image-cropper__control{display:flex}.mds-image-cropper__control-label{margin-top:20px}.mds-image-cropper__control-zoom{flex:1}.mds-image-cropper__control-button{cursor:pointer;appearance:none;background:transparent;border:0;width:2.2rem;padding:0 6px}';class a extends r{constructor(...t){super(...t),this.attachShadow({mode:"open"});const o=new CSSStyleSheet;o.replaceSync(`
       * {border: 0;outline:0;padding: 0;margin:0;box-sizing:border-box;}
       ${e}
       ${n}`),this.rootNode.adoptedStyleSheets=[o]}get rootNode(){return this.shadowRoot}}window.customElements.get("mds-image-cropper-standalone")||window.customElements.define("mds-image-cropper-standalone",a);

package/dist/js/{image-cropper-BlqRRHAU.js → image-cropper-BUN9gxO4.js} RENAMED Viewed

@@ -55,4 +55,4 @@ function _(s=0,t=0,e){return s>=t*e?{width:t*e,height:t}:{width:s,height:s/e}}fu
           </button>
         </div>
       </div>
-    `,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};
+    `,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.#s>=1&&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 Viewed

@@ -1,2 +1,2 @@
-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]);
+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-BUN9gxO4.js"])))=>i.map(i=>d[i]);
 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 Viewed

	@@ -1 +1 @@
1	- import{M as Ot}from"./dropdown-nav-DGGzV21D.js";import{M as Tt}from"./timeout-dialog-plrFUmdZ.js";import{M as Pt}from"./image-cropper-BlqRRHAU.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const ft={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},pt={size:ft},qt="js-tabs-item",Ye="mds-tabs",$t="mds-tabs__list",Dt="mds-tabs__list-item",Je="mds-tabs__panel",me="mds-tabs__tab",he="mds-tabs__tab--selected",Ke="mds-tabs__panel--hidden",ve={left:37,right:39,up:38,down:40},_t=".js-desktop-tabbed",Bt=".js-full-tabbed",Mt=parseInt(pt.size.breakpoint.lg.$value,10),x={init:()=>{x.setTabs(Bt),window.innerWidth>Mt&&x.setTabs(_t)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${me}`)),r=Array.from(document.querySelectorAll(`${t} .${$t}`)),n=Array.from(document.querySelectorAll(`${t} .${Dt}`)),o=Array.from(document.querySelectorAll(`${t} .${Je}`));r.forEach(i=>{i.setAttribute("role","tablist")}),n.forEach(i=>{i.setAttribute("role","presentation")}),e.forEach(i=>{i.setAttribute("role","tab"),i.setAttribute("aria-controls",i.attributes.href.value.substring(1)),i.classList.contains(he)?i.setAttribute("tabindex","0"):i.setAttribute("tabindex","-1")}),o.forEach(i=>{i.setAttribute("role","tabpanel"),i.setAttribute("aria-labelledby",`label-${i.attributes.id.value}`)});const s=document.querySelectorAll(`${t} .${qt}`);Array.from(s).forEach(i=>{const l=window.location.hash.trim(),c=i.attributes.href.value,d=i.closest(`.${Ye}`),p=x.getAllPanels(d),f=x.getAllTabs(d),m=x.getTargetPanel(i,d);i.addEventListener("click",h=>{h.preventDefault(),x.updateTabs(f,p,i,m,c)}),c===l&&x.updateTabs(f,p,i,m,c)}),r.forEach(i=>{const l=i.closest(`.${Ye}`),c=x.getAllPanels(l),d=x.getAllTabs(l);i.addEventListener("keydown",p=>{switch(p.keyCode){case ve.left:case ve.up:p.preventDefault(),x.moveTab(i,l,d,c,!1);break;case ve.right:case ve.down:p.preventDefault(),x.moveTab(i,l,d,c,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${he}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${me}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${me}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Je}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${me}`)),moveTab:(t,e,r,n,o)=>{const s=x.getSelectedTab(t),a=o?x.getNextTab(s):x.getPrevTab(s);if(a){const i=a.attributes.href.value,l=x.getTargetPanel(a,e);x.updateTabs(r,n,a,l,i,!1)}},updateTabs:(t,e,r,n,o)=>{x.clearAllTabs(t),x.setActiveTab(r),x.clearAllPanels(e),x.setActivePanel(n,o)},clearAllTabs:t=>{t.forEach(e=>{e.classList.remove(he),e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1")})},clearAllPanels:t=>{t.forEach(e=>{e.classList.add(Ke)})},setActiveTab:t=>{t.classList.add(he),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Ke),window.history.replaceState({},"",e)}},jt="mds-accordion--breakpoint",Rt="mds-accordion__label",mt={init:()=>{const t=document.querySelectorAll(`.${jt}`),e=window.innerWidth;t.forEach(n=>{mt.checkBreakpoint(n,e)\|\|(n.open=!0,n.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Rt}`).forEach(n=>{n.addEventListener("click",({target:o})=>{const s=o.closest("details"),a=s.querySelector("summary");s.open=!1,a.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const n=t.dataset.bp.replace(/\D/g,""),o=t.dataset.bp.replace(/[0-9]/g,"");let s,a;switch(o){case"px":r=n;break;case"em":s=window.getComputedStyle(document.querySelector("body"))["font-size"],a=nparseFloat(s),r=a;break;case"rem":s=window.getComputedStyle(document.querySelector("body"))["font-size"],a=nparseFloat(s),r=a;break;default:return!0}return!(e>r)}return!0}},It={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(o=>{const s=o.querySelector(".mds-subnavigation__link-list"),a=Array.from(s.children),i=a[0],l=o.querySelector(".mds-subnavigation__mobile-title"),c=o.querySelector(".mds-subnavigation__drawer"),d=o.querySelector(".mds-subnavigation__drawer-label"),p=o.querySelector(".mds-subnavigation__drawer-label-text"),f=o.querySelector(".mds-subnavigation__drawer-content"),m=c.dataset.label,h=c.dataset.labelPlural;d.addEventListener("click",()=>{d.getAttribute("aria-expanded")==="true"?d.setAttribute("aria-expanded","false"):d.setAttribute("aria-expanded","true")}),c.addEventListener("focusout",v=>{c.contains(v.relatedTarget)\|\|d.setAttribute("aria-expanded","false")});const g=()=>s.clientHeight>i.offsetHeight;e.push(()=>{d.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(a.forEach(b=>{s.append(b)}),c.style.display="none",g()&&(c.style.display="list-item",a.slice().reverse().forEach(b=>{if(g()&&b!==c){f.prepend(b);const y=Array.from(f.children).length,A=y>1?h:m;p.innerText=A.replace("{count}",y)}else s.prepend(b)}),f.style.width=`${s.offsetWidth-c.offsetLeft}px`)):(a.forEach(b=>{b!==c&&b!==l&&f.append(b)}),f.style.width="initial",c.style.display="block")})});const n=()=>{e.forEach(o=>{o()})};n(),window.onresize=()=>{clearTimeout(r),r=setTimeout(n,100)}}},Wt="mds-checkbox-accordion__button",Ht="mds-checkbox-accordion__button--open",Nt={init:()=>{document.querySelectorAll(`.${Wt}`).forEach(e=>{e.classList.contains(Ht)?e.setAttribute("aria-expanded","true"):e.setAttribute("aria-expanded","false"),e.addEventListener("click",()=>{e.getAttribute("aria-expanded")==="true"?e.setAttribute("aria-expanded","false"):e.setAttribute("aria-expanded","true")})})}};var T="top",q="bottom",$="right",P="left",_e="auto",ce=[T,q,$,P],Q="start",Be="end",Ft="clippingParents",ht="viewport",te="popper",zt="reference",Ge=ce.reduce(function(t,e){return t.concat([e+"-"+Q,e+"-"+Be])},[]),vt=[].concat(ce,[_e]).reduce(function(t,e){return t.concat([e,e+"-"+Q,e+"-"+Be])},[]),Vt="beforeRead",Ut="read",Xt="afterRead",Yt="beforeMain",Jt="main",Kt="afterMain",Gt="beforeWrite",Qt="write",Zt="afterWrite",er=[Vt,Ut,Xt,Yt,Jt,Kt,Gt,Qt,Zt];function R(t){return t?(t.nodeName\|\|"").toLowerCase():null}function _(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView\|\|window}return t}function oe(t){var e=_(t).Element;return t instanceof e\|\|t instanceof Element}function D(t){var e=_(t).HTMLElement;return t instanceof e\|\|t instanceof HTMLElement}function bt(t){if(typeof ShadowRoot>"u")return!1;var e=_(t).ShadowRoot;return t instanceof e\|\|t instanceof ShadowRoot}function tr(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var n=e.styles[r]\|\|{},o=e.attributes[r]\|\|{},s=e.elements[r];!D(s)\|\|!R(s)\|\|(Object.assign(s.style,n),Object.keys(o).forEach(function(a){var i=o[a];i===!1?s.removeAttribute(a):s.setAttribute(a,i===!0?"":i)}))})}function rr(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(n){var o=e.elements[n],s=e.attributes[n]\|\|{},a=Object.keys(e.styles.hasOwnProperty(n)?e.styles[n]:r[n]),i=a.reduce(function(l,c){return l[c]="",l},{});!D(o)\|\|!R(o)\|\|(Object.assign(o.style,i),Object.keys(s).forEach(function(l){o.removeAttribute(l)}))})}}const nr={name:"applyStyles",enabled:!0,phase:"write",fn:tr,effect:rr,requires:["computeStyles"]};function j(t){return t.split("-")[0]}function Z(t){var e=t.getBoundingClientRect();return{width:e.width,height:e.height,top:e.top,right:e.right,bottom:e.bottom,left:e.left,x:e.left,y:e.top}}function Me(t){var e=Z(t),r=t.offsetWidth,n=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-n)<=1&&(n=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:n}}function gt(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&bt(r)){var n=e;do{if(n&&t.isSameNode(n))return!0;n=n.parentNode\|\|n.host}while(n)}return!1}function W(t){return _(t).getComputedStyle(t)}function or(t){return["table","td","th"].indexOf(R(t))>=0}function F(t){return((oe(t)?t.ownerDocument:t.document)\|\|window.document).documentElement}function xe(t){return R(t)==="html"?t:t.assignedSlot\|\|t.parentNode\|\|(bt(t)?t.host:null)\|\|F(t)}function Qe(t){return!D(t)\|\|W(t).position==="fixed"?null:t.offsetParent}function ir(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&D(t)){var n=W(t);if(n.position==="fixed")return null}for(var o=xe(t);D(o)&&["html","body"].indexOf(R(o))<0;){var s=W(o);if(s.transform!=="none"\|\|s.perspective!=="none"\|\|s.contain==="paint"\|\|["transform","perspective"].indexOf(s.willChange)!==-1\|\|e&&s.willChange==="filter"\|\|e&&s.filter&&s.filter!=="none")return o;o=o.parentNode}return null}function le(t){for(var e=_(t),r=Qe(t);r&&or(r)&&W(r).position==="static";)r=Qe(r);return r&&(R(r)==="html"\|\|R(r)==="body"&&W(r).position==="static")?e:r\|\|ir(t)\|\|e}function je(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var N=Math.max,ie=Math.min,be=Math.round;function Ae(t,e,r){return N(t,ie(e,r))}function yt(){return{top:0,right:0,bottom:0,left:0}}function wt(t){return Object.assign({},yt(),t)}function At(t,e){return e.reduce(function(r,n){return r[n]=t,r},{})}var sr=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,wt(typeof e!="number"?e:At(e,ce))};function ar(t){var e,r=t.state,n=t.name,o=t.options,s=r.elements.arrow,a=r.modifiersData.popperOffsets,i=j(r.placement),l=je(i),c=[P,$].indexOf(i)>=0,d=c?"height":"width";if(!(!s\|\|!a)){var p=sr(o.padding,r),f=Me(s),m=l==="y"?T:P,h=l==="y"?q:$,g=r.rects.reference[d]+r.rects.reference[l]-a[l]-r.rects.popper[d],v=a[l]-r.rects.reference[l],b=le(s),y=b?l==="y"?b.clientHeight\|\|0:b.clientWidth\|\|0:0,A=g/2-v/2,u=p[m],S=y-f[d]-p[h],w=y/2-f[d]/2+A,k=Ae(u,w,S),E=l;r.modifiersData[n]=(e={},e[E]=k,e.centerOffset=k-w,e)}}function cr(t){var e=t.state,r=t.options,n=r.element,o=n===void 0?"[data-popper-arrow]":n;o!=null&&(typeof o=="string"&&(o=e.elements.popper.querySelector(o),!o)\|\|gt(e.elements.popper,o)&&(e.elements.arrow=o))}const lr={name:"arrow",enabled:!0,phase:"main",fn:ar,effect:cr,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var dr={top:"auto",right:"auto",bottom:"auto",left:"auto"};function ur(t){var e=t.x,r=t.y,n=window,o=n.devicePixelRatio\|\|1;return{x:be(be(eo)/o)\|\|0,y:be(be(ro)/o)\|\|0}}function Ze(t){var e,r=t.popper,n=t.popperRect,o=t.placement,s=t.offsets,a=t.position,i=t.gpuAcceleration,l=t.adaptive,c=t.roundOffsets,d=c===!0?ur(s):typeof c=="function"?c(s):s,p=d.x,f=p===void 0?0:p,m=d.y,h=m===void 0?0:m,g=s.hasOwnProperty("x"),v=s.hasOwnProperty("y"),b=P,y=T,A=window;if(l){var u=le(r),S="clientHeight",w="clientWidth";u===_(r)&&(u=F(r),W(u).position!=="static"&&(S="scrollHeight",w="scrollWidth")),u=u,o===T&&(y=q,h-=u[S]-n.height,h=i?1:-1),o===P&&(b=$,f-=u[w]-n.width,f=i?1:-1)}var k=Object.assign({position:a},l&&dr);if(i){var E;return Object.assign({},k,(E={},E[y]=v?"0":"",E[b]=g?"0":"",E.transform=(A.devicePixelRatio\|\|1)<2?"translate("+f+"px, "+h+"px)":"translate3d("+f+"px, "+h+"px, 0)",E))}return Object.assign({},k,(e={},e[y]=v?h+"px":"",e[b]=g?f+"px":"",e.transform="",e))}function fr(t){var e=t.state,r=t.options,n=r.gpuAcceleration,o=n===void 0?!0:n,s=r.adaptive,a=s===void 0?!0:s,i=r.roundOffsets,l=i===void 0?!0:i,c={placement:j(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:o};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ze(Object.assign({},c,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ze(Object.assign({},c,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const pr={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:fr,data:{}};var ge={passive:!0};function mr(t){var e=t.state,r=t.instance,n=t.options,o=n.scroll,s=o===void 0?!0:o,a=n.resize,i=a===void 0?!0:a,l=_(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return s&&c.forEach(function(d){d.addEventListener("scroll",r.update,ge)}),i&&l.addEventListener("resize",r.update,ge),function(){s&&c.forEach(function(d){d.removeEventListener("scroll",r.update,ge)}),i&&l.removeEventListener("resize",r.update,ge)}}const hr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:mr,data:{}};var vr={left:"right",right:"left",bottom:"top",top:"bottom"};function Ee(t){return t.replace(/left\|right\|bottom\|top/g,function(e){return vr[e]})}var br={start:"end",end:"start"};function et(t){return t.replace(/start\|end/g,function(e){return br[e]})}function Re(t){var e=_(t),r=e.pageXOffset,n=e.pageYOffset;return{scrollLeft:r,scrollTop:n}}function Ie(t){return Z(F(t)).left+Re(t).scrollLeft}function gr(t){var e=_(t),r=F(t),n=e.visualViewport,o=r.clientWidth,s=r.clientHeight,a=0,i=0;return n&&(o=n.width,s=n.height,/^((?!chrome\|android).)safari/i.test(navigator.userAgent)\|\|(a=n.offsetLeft,i=n.offsetTop)),{width:o,height:s,x:a+Ie(t),y:i}}function yr(t){var e,r=F(t),n=Re(t),o=(e=t.ownerDocument)==null?void 0:e.body,s=N(r.scrollWidth,r.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=N(r.scrollHeight,r.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),i=-n.scrollLeft+Ie(t),l=-n.scrollTop;return W(o\|\|r).direction==="rtl"&&(i+=N(r.clientWidth,o?o.clientWidth:0)-s),{width:s,height:a,x:i,y:l}}function We(t){var e=W(t),r=e.overflow,n=e.overflowX,o=e.overflowY;return/auto\|scroll\|overlay\|hidden/.test(r+o+n)}function Et(t){return["html","body","#document"].indexOf(R(t))>=0?t.ownerDocument.body:D(t)&&We(t)?t:Et(xe(t))}function ne(t,e){var r;e===void 0&&(e=[]);var n=Et(t),o=n===((r=t.ownerDocument)==null?void 0:r.body),s=_(n),a=o?[s].concat(s.visualViewport\|\|[],We(n)?n:[]):n,i=e.concat(a);return o?i:i.concat(ne(xe(a)))}function qe(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function wr(t){var e=Z(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function tt(t,e){return e===ht?qe(gr(t)):D(e)?wr(e):qe(yr(F(t)))}function Ar(t){var e=ne(xe(t)),r=["absolute","fixed"].indexOf(W(t).position)>=0,n=r&&D(t)?le(t):t;return oe(n)?e.filter(function(o){return oe(o)&&gt(o,n)&&R(o)!=="body"}):[]}function Er(t,e,r){var n=e==="clippingParents"?Ar(t):[].concat(e),o=[].concat(n,[r]),s=o[0],a=o.reduce(function(i,l){var c=tt(t,l);return i.top=N(c.top,i.top),i.right=ie(c.right,i.right),i.bottom=ie(c.bottom,i.bottom),i.left=N(c.left,i.left),i},tt(t,s));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function se(t){return t.split("-")[1]}function xt(t){var e=t.reference,r=t.element,n=t.placement,o=n?j(n):null,s=n?se(n):null,a=e.x+e.width/2-r.width/2,i=e.y+e.height/2-r.height/2,l;switch(o){case T:l={x:a,y:e.y-r.height};break;case q:l={x:a,y:e.y+e.height};break;case $:l={x:e.x+e.width,y:i};break;case P:l={x:e.x-r.width,y:i};break;default:l={x:e.x,y:e.y}}var c=o?je(o):null;if(c!=null){var d=c==="y"?"height":"width";switch(s){case Q:l[c]=l[c]-(e[d]/2-r[d]/2);break;case Be:l[c]=l[c]+(e[d]/2-r[d]/2);break}}return l}function ae(t,e){e===void 0&&(e={});var r=e,n=r.placement,o=n===void 0?t.placement:n,s=r.boundary,a=s===void 0?Ft:s,i=r.rootBoundary,l=i===void 0?ht:i,c=r.elementContext,d=c===void 0?te:c,p=r.altBoundary,f=p===void 0?!1:p,m=r.padding,h=m===void 0?0:m,g=wt(typeof h!="number"?h:At(h,ce)),v=d===te?zt:te,b=t.elements.reference,y=t.rects.popper,A=t.elements[f?v:d],u=Er(oe(A)?A:A.contextElement\|\|F(t.elements.popper),a,l),S=Z(b),w=xt({reference:S,element:y,placement:o}),k=qe(Object.assign({},y,w)),E=d===te?k:S,L={top:u.top-E.top+g.top,bottom:E.bottom-u.bottom+g.bottom,left:u.left-E.left+g.left,right:E.right-u.right+g.right},O=t.modifiersData.offset;if(d===te&&O){var B=O[o];Object.keys(L).forEach(function(I){var C=[$,q].indexOf(I)>=0?1:-1,z=[T,q].indexOf(I)>=0?"y":"x";L[I]+=B[z]C})}return L}function xr(t,e){e===void 0&&(e={});var r=e,n=r.placement,o=r.boundary,s=r.rootBoundary,a=r.padding,i=r.flipVariations,l=r.allowedAutoPlacements,c=l===void 0?vt:l,d=se(n),p=d?i?Ge:Ge.filter(function(h){return se(h)===d}):ce,f=p.filter(function(h){return c.indexOf(h)>=0});f.length===0&&(f=p);var m=f.reduce(function(h,g){return h[g]=ae(t,{placement:g,boundary:o,rootBoundary:s,padding:a})[j(g)],h},{});return Object.keys(m).sort(function(h,g){return m[h]-m[g]})}function kr(t){if(j(t)===_e)return[];var e=Ee(t);return[et(t),e,et(e)]}function Sr(t){var e=t.state,r=t.options,n=t.name;if(!e.modifiersData[n]._skip){for(var o=r.mainAxis,s=o===void 0?!0:o,a=r.altAxis,i=a===void 0?!0:a,l=r.fallbackPlacements,c=r.padding,d=r.boundary,p=r.rootBoundary,f=r.altBoundary,m=r.flipVariations,h=m===void 0?!0:m,g=r.allowedAutoPlacements,v=e.options.placement,b=j(v),y=b===v,A=l\|\|(y\|\|!h?[Ee(v)]:kr(v)),u=[v].concat(A).reduce(function(U,M){return U.concat(j(M)===_e?xr(e,{placement:M,boundary:d,rootBoundary:p,padding:c,flipVariations:h,allowedAutoPlacements:g}):M)},[]),S=e.rects.reference,w=e.rects.popper,k=new Map,E=!0,L=u[0],O=0;O<u.length;O++){var B=u[O],I=j(B),C=se(B)===Q,z=[T,q].indexOf(I)>=0,ee=z?"width":"height",X=ae(e,{placement:B,boundary:d,rootBoundary:p,altBoundary:f,padding:c}),V=z?C?$:P:C?q:T;S[ee]>w[ee]&&(V=Ee(V));var ke=Ee(V),Y=[];if(s&&Y.push(X[I]<=0),i&&Y.push(X[V]<=0,X[ke]<=0),Y.every(function(U){return U})){L=B,E=!1;break}k.set(B,Y)}if(E)for(var de=h?3:1,Se=function(M){var fe=u.find(function(Le){var K=k.get(Le);if(K)return K.slice(0,M).every(function(Ce){return Ce})});if(fe)return L=fe,"break"},J=de;J>0;J--){var ue=Se(J);if(ue==="break")break}e.placement!==L&&(e.modifiersData[n]._skip=!0,e.placement=L,e.reset=!0)}}const Lr={name:"flip",enabled:!0,phase:"main",fn:Sr,requiresIfExists:["offset"],data:{_skip:!1}};function rt(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function nt(t){return[T,$,q,P].some(function(e){return t[e]>=0})}function Cr(t){var e=t.state,r=t.name,n=e.rects.reference,o=e.rects.popper,s=e.modifiersData.preventOverflow,a=ae(e,{elementContext:"reference"}),i=ae(e,{altBoundary:!0}),l=rt(a,n),c=rt(i,o,s),d=nt(l),p=nt(c);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":p})}const Or={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Cr};function Tr(t,e,r){var n=j(t),o=[P,T].indexOf(n)>=0?-1:1,s=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,a=s[0],i=s[1];return a=a\|\|0,i=(i\|\|0)o,[P,$].indexOf(n)>=0?{x:i,y:a}:{x:a,y:i}}function Pr(t){var e=t.state,r=t.options,n=t.name,o=r.offset,s=o===void 0?[0,0]:o,a=vt.reduce(function(d,p){return d[p]=Tr(p,e.rects,s),d},{}),i=a[e.placement],l=i.x,c=i.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=c),e.modifiersData[n]=a}const qr={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Pr};function $r(t){var e=t.state,r=t.name;e.modifiersData[r]=xt({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const Dr={name:"popperOffsets",enabled:!0,phase:"read",fn:$r,data:{}};function _r(t){return t==="x"?"y":"x"}function Br(t){var e=t.state,r=t.options,n=t.name,o=r.mainAxis,s=o===void 0?!0:o,a=r.altAxis,i=a===void 0?!1:a,l=r.boundary,c=r.rootBoundary,d=r.altBoundary,p=r.padding,f=r.tether,m=f===void 0?!0:f,h=r.tetherOffset,g=h===void 0?0:h,v=ae(e,{boundary:l,rootBoundary:c,padding:p,altBoundary:d}),b=j(e.placement),y=se(e.placement),A=!y,u=je(b),S=_r(u),w=e.modifiersData.popperOffsets,k=e.rects.reference,E=e.rects.popper,L=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,O={x:0,y:0};if(w){if(s\|\|i){var B=u==="y"?T:P,I=u==="y"?q:$,C=u==="y"?"height":"width",z=w[u],ee=w[u]+v[B],X=w[u]-v[I],V=m?-E[C]/2:0,ke=y===Q?k[C]:E[C],Y=y===Q?-E[C]:-k[C],de=e.elements.arrow,Se=m&&de?Me(de):{width:0,height:0},J=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:yt(),ue=J[B],U=J[I],M=Ae(0,k[C],Se[C]),fe=A?k[C]/2-V-M-ue-L:ke-M-ue-L,Le=A?-k[C]/2+V+M+U+L:Y+M+U+L,K=e.elements.arrow&&le(e.elements.arrow),Ce=K?u==="y"?K.clientTop\|\|0:K.clientLeft\|\|0:0,He=e.modifiersData.offset?e.modifiersData.offset[e.placement][u]:0,Ne=w[u]+fe-He-Ce,Fe=w[u]+Le-He;if(s){var ze=Ae(m?ie(ee,Ne):ee,z,m?N(X,Fe):X);w[u]=ze,O[u]=ze-z}if(i){var Lt=u==="x"?T:P,Ct=u==="x"?q:$,pe=w[S],Ve=pe+v[Lt],Ue=pe-v[Ct],Xe=Ae(m?ie(Ve,Ne):Ve,pe,m?N(Ue,Fe):Ue);w[S]=Xe,O[S]=Xe-pe}}e.modifiersData[n]=O}}const Mr={name:"preventOverflow",enabled:!0,phase:"main",fn:Br,requiresIfExists:["offset"]};function jr(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Rr(t){return t===_(t)\|\|!D(t)?Re(t):jr(t)}function Ir(t,e,r){r===void 0&&(r=!1);var n=F(e),o=Z(t),s=D(e),a={scrollLeft:0,scrollTop:0},i={x:0,y:0};return(s\|\|!s&&!r)&&((R(e)!=="body"\|\|We(n))&&(a=Rr(e)),D(e)?(i=Z(e),i.x+=e.clientLeft,i.y+=e.clientTop):n&&(i.x=Ie(n))),{x:o.left+a.scrollLeft-i.x,y:o.top+a.scrollTop-i.y,width:o.width,height:o.height}}function Wr(t){var e=new Map,r=new Set,n=[];t.forEach(function(s){e.set(s.name,s)});function o(s){r.add(s.name);var a=[].concat(s.requires\|\|[],s.requiresIfExists\|\|[]);a.forEach(function(i){if(!r.has(i)){var l=e.get(i);l&&o(l)}}),n.push(s)}return t.forEach(function(s){r.has(s.name)\|\|o(s)}),n}function Hr(t){var e=Wr(t);return er.reduce(function(r,n){return r.concat(e.filter(function(o){return o.phase===n}))},[])}function Nr(t){var e;return function(){return e\|\|(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Fr(t){var e=t.reduce(function(r,n){var o=r[n.name];return r[n.name]=o?Object.assign({},o,n,{options:Object.assign({},o.options,n.options),data:Object.assign({},o.data,n.data)}):n,r},{});return Object.keys(e).map(function(r){return e[r]})}var ot={placement:"bottom",modifiers:[],strategy:"absolute"};function it(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(n){return!(n&&typeof n.getBoundingClientRect=="function")})}function zr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,n=r===void 0?[]:r,o=e.defaultOptions,s=o===void 0?ot:o;return function(i,l,c){c===void 0&&(c=s);var d={placement:"bottom",orderedModifiers:[],options:Object.assign({},ot,s),modifiersData:{},elements:{reference:i,popper:l},attributes:{},styles:{}},p=[],f=!1,m={state:d,setOptions:function(b){g(),d.options=Object.assign({},s,d.options,b),d.scrollParents={reference:oe(i)?ne(i):i.contextElement?ne(i.contextElement):[],popper:ne(l)};var y=Hr(Fr([].concat(n,d.options.modifiers)));return d.orderedModifiers=y.filter(function(A){return A.enabled}),h(),m.update()},forceUpdate:function(){if(!f){var b=d.elements,y=b.reference,A=b.popper;if(it(y,A)){d.rects={reference:Ir(y,le(A),d.options.strategy==="fixed"),popper:Me(A)},d.reset=!1,d.placement=d.options.placement,d.orderedModifiers.forEach(function(O){return d.modifiersData[O.name]=Object.assign({},O.data)});for(var u=0;u<d.orderedModifiers.length;u++){if(d.reset===!0){d.reset=!1,u=-1;continue}var S=d.orderedModifiers[u],w=S.fn,k=S.options,E=k===void 0?{}:k,L=S.name;typeof w=="function"&&(d=w({state:d,options:E,name:L,instance:m})\|\|d)}}}},update:Nr(function(){return new Promise(function(v){m.forceUpdate(),v(d)})}),destroy:function(){g(),f=!0}};if(!it(i,l))return m;m.setOptions(c).then(function(v){!f&&c.onFirstUpdate&&c.onFirstUpdate(v)});function h(){d.orderedModifiers.forEach(function(v){var b=v.name,y=v.options,A=y===void 0?{}:y,u=v.effect;if(typeof u=="function"){var S=u({state:d,name:b,instance:m,options:A}),w=function(){};p.push(S\|\|w)}})}function g(){p.forEach(function(v){return v()}),p=[]}return m}}var Vr=[hr,Dr,pr,nr,qr,Lr,Mr,lr,Or],Ur=zr({defaultModifiers:Vr});const Xr=parseInt(ft.baseline.$value,10),Yr="js-mds-popover-trigger",ye="mds-popover--active",re={init:()=>{Array.from(document.querySelectorAll(`.${Yr}`)).forEach(e=>{const n=`${e.getAttribute("id")}-content`,o=document.getElementById(n),s=o.dataset?o.dataset.placement:null,a=Ur(e,o,{placement:s\|\|"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,Xr3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),o.setAttribute("aria-hidden","true"),e.addEventListener("click",i=>{i.preventDefault(),a.update(),o.classList.toggle(ye),re.setAriaAttr(e,o,ye)}),document.addEventListener("mousedown",i=>{re.hide(e,o,a,ye,i)}),document.addEventListener("keydown",i=>{re.hide(e,o,a,ye,i)})})},hide:(t,e,r,n,o)=>{!t.contains(o.target)&&!r.state.elements.popper.contains(o.target)&&e.classList.contains(n)&&(e.classList.remove(n),re.setAriaAttr(t,e,n))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Jr=parseInt(pt.size.breakpoint.md.$value,10),st="data-modal-id",at="mds-modal--active",Kr="js-mds-modal-close";let we;const G={init:()=>{window.innerWidth>Jr&&Array.from(document.querySelectorAll(`[${st}]`)).forEach(r=>{const n=r.getAttribute(st),o=document.getElementById(n),s=Array.from(o.querySelectorAll(`.${Kr}`)),a=o.getAttribute("data-site-container"),i=document.getElementById(a);let c=o.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');c=Array.prototype.slice.call(c);const d=c[0],p=c[c.length-1];r.addEventListener("click",f=>{f.preventDefault(),G.open(o,d,i)}),o.addEventListener("click",f=>{f.target===o&&G.close(o,we,i)}),o.addEventListener("keydown",f=>{G.trapFocus(f,d,p),(f.key==="Escape"\|\|f.key==="Esc")&&G.close(o,we,i)}),s.forEach(f=>{f.addEventListener("click",()=>{G.close(o,we,i)})})})},open:(t,e,r)=>{we=document.activeElement,t.classList.add(at),e.focus(),r.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r.removeAttribute("aria-hidden"),t.classList.remove(at),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}},Gr=".mds-form-element--file",Oe="mds-form-element--selected-file",ct="mds-form-element--dragover",Qr=".mds-file-upload__file-name",Zr=".mds-file-upload__remove-button",en="mds-form-element--file-supported",kt={init:()=>{kt.isBrowserIE()\|\|Array.from(document.querySelectorAll(Gr)).forEach(e=>{e.classList.add(en);const r=e.querySelector(Qr),n=e.querySelector("input[type=file]"),o=e.querySelector(Zr);document.addEventListener("readystatechange",()=>{n.files&&n.files.length&&(r.textContent=n.files[0].name,e.classList.add(Oe))}),n.addEventListener("change",()=>{n.files&&n.files.length&&(r.textContent=n.files[0].name,e.classList.add(Oe),o.focus())}),o.addEventListener("click",s=>{s.preventDefault(),n.value="",r.textContent="",e.classList.remove(Oe),n.focus()}),["dragover","dragenter"].forEach(s=>{n.addEventListener(s,a=>{a.stopPropagation(),e.classList.add(ct)})}),["dragleave","dragend","drop"].forEach(s=>{n.addEventListener(s,a=>{a.stopPropagation(),e.classList.remove(ct)})})})},isBrowserIE:()=>!!window.document.documentMode},tn=".mds-form-element--character-count",rn=".mds-form-message--character-count",nn=".js-character-count-number",on=".mds-form-control",$e={init:()=>{Array.from(document.querySelectorAll(tn)).forEach(e=>{const r=e.querySelector(on),n=r.getAttribute("maxlength"),o=e.querySelector(rn),s=e.querySelector(nn);r.removeAttribute("maxlength"),$e.updateCounter(r,n,s,o),r.addEventListener("keyup",a=>{a.stopPropagation(),$e.updateCounter(r,n,s,o)})})},updateCounter:(t,e,r,n)=>{const o=t.value.match(/(\r\n\|\n\|\r)/g),s=t.value.length+(o?o.length:0),a=e-s;r.textContent=a,a<0?n.classList.add("mds-form-message--error"):n.classList.remove("mds-form-message--error")}},sn="js-mds-button-double-submit",St={init:()=>{Array.from(document.querySelectorAll(`.${sn}`)).forEach(e=>{e.addEventListener("click",()=>{St.toggleDisable(e)})})},toggleDisable:t=>{setTimeout(()=>{t.setAttribute("disabled","")},1),setTimeout(()=>{t.removeAttribute("disabled")},1e3)}},an={setFluidVideos:()=>{Array.from(document.querySelectorAll(".mds-prose iframe, .mds-prose embed, .mds-prose object")).forEach(e=>{const r=document.createElement("div");r.classList.add("mds-fluid-video"),r.innerHTML=e.outerHTML,e.replaceWith(r)})}};class cn extends HTMLElement{connectedCallback(){const r=this.querySelector(".mds-card-link__link");let n;this.onmousedown=()=>{n=+new Date},this.onmouseup=()=>{+new Date-n<200&&r.click(),n=void 0}}disconnectedCallback(){this.onmousedown=this.onmouseup=null}}class ln extends HTMLElement{static observedAttributes=["form","field-name","show-when"];showHide=()=>{const{field:e}=this,r=this.getAttribute("show-when");(e.type==="checkbox"?e.checked.toString():e.value.toString())===r?this.hidden=!1:this.hidden=!0};setup=()=>{this.cleanup();const e=this.getAttribute("form"),r=this.getAttribute("field-name");if(this.formElement=e?document.querySelector(e):this.closest("form"),!this.formElement)throw new Error(`<mds-conditional-section> for ${r} could not find the associated form`);if(this.field=this.formElement.elements[r],!this.field)throw new Error(`<mds-conditional-section> for ${r} could not find the associated field`);this.showHide(),this.formElement.addEventListener("input",this.showHide)};connectedCallback(){this.setup()}cleanup=()=>{this.formElement?.removeEventListener("input",this.showHide)};disconnectedCallback(){this.cleanup()}attributeChangedCallback(e,r,n){const{showHide:o,setup:s}=this;this.isConnected&&r!==n&&(e==="show-when"?o():(e==="field-name"\|\|e==="form")&&s())}}const H=".mds-form-check",Te=".mds-form-check__input",dn=".mds-form-check__label",lt=".mds-form-check__nested-container",dt=".mds-category-picker__pill",Pe=".mds-category-picker__clear-pill",ut={optionsSelectedSingular:"1 option selected",optionsSelectedPlural:"{count} options selected",optionsFoundSingular:"1 option found",optionsFoundPlural:"{count} options found"};class un extends HTMLElement{#c;#r;#l;#d;#e;#u;#t;#i;#p;#s;#a=new WeakMap;#o=!1;connectedCallback(){const e=this.querySelector(".mds-category-picker__templates");if(this.#r=this.querySelector(".mds-category-picker__pillbox"),this.#e=this.querySelector(".mds-category-picker__search"),this.#u=this.querySelector(".mds-category-picker__input-wrapper"),this.#t=this.querySelector(".mds-category-picker__dropdown"),this.#i=this.querySelector(".mds-category-picker__live-region"),this.#p=this.querySelector(".mds-category-picker__no-results"),!e\|\|!this.#r\|\|!this.#e\|\|!this.#t)return;try{this.#s={...ut,...JSON.parse(this.getAttribute("i18n")\|\|"{}")}}catch{this.#s=ut}if(this.#l=e.querySelector(dt),this.#d=e.querySelector(Pe),!this.#l\|\|!this.#d)return;e.remove(),this.#c=new AbortController;const r={signal:this.#c.signal};this.#r.addEventListener("click",this.#A,r),this.#t.addEventListener("change",this.#E,r),this.#e.addEventListener("blur",this.#y,r),this.#e.addEventListener("input",this.#x,r),this.#e.addEventListener("keydown",this.#S,r),this.#u.addEventListener("click",()=>this.#e.focus(),r),this.#e.addEventListener("focus",()=>this.#m(),r),this.#t.addEventListener("mousedown",n=>{n.target!==this.#e&&n.preventDefault()},r),this.#t.addEventListener("focusout",n=>{(!n.relatedTarget\|\|!this.contains(n.relatedTarget))&&this.#n()},r),this.#t.addEventListener("keydown",n=>{n.key==="Escape"&&(this.#n(),this.#e.focus())},r),document.addEventListener("click",n=>{n.composedPath().includes(this)\|\|this.#n()},r),this.#h()}disconnectedCallback(){this.#c?.abort()}#m(){this.#o\|\|(this.#o=!0,this.classList.add("mds-category-picker--open"),this.#e.setAttribute("aria-expanded","true"))}#n(){this.#o&&(this.#o=!1,this.classList.remove("mds-category-picker--open"),this.#e.setAttribute("aria-expanded","false"),this.#e.value="",this.#f())}#y=e=>{const r=e.relatedTarget;r&&(this.#t.contains(r)\|\|this.#u.contains(r))\|\|this.#n()};#h=()=>{this.#r.replaceChildren(),this.#a=new WeakMap;const e="mds-form-check--has-selection";for(const r of this.#t.querySelectorAll(H))r.classList.remove(e);for(const r of this.#t.querySelectorAll(`${Te}:checked`)){this.#w(r);let n=r.closest(H)?.parentElement;for(;n&&n!==this.#t;)n.matches(H)&&n.classList.add(e),n=n.parentElement}};#w(e){const r=e.dataset.path;if(!r)return;const n=this.#l.cloneNode(!0),o=this.#d.cloneNode(!0);o.setAttribute("aria-label",`${o.getAttribute("aria-label")} ${r}`);const s=document.createElement("span");s.className="mds-category-picker__pill-text",s.textContent=r,n.appendChild(s),n.appendChild(o),this.#r.appendChild(n),this.#a.set(o,e)}#A=({target:e})=>{const r=this.#a.get(e.closest(Pe));r&&(r.checked=!1,r.dispatchEvent(new Event("change",{bubbles:!0})))};#E=()=>{this.#h(),this.#e.value="",this.#f();const e=this.#t.querySelectorAll(`${Te}:checked`).length;this.#g(this.#b("optionsSelectedSingular","optionsSelectedPlural",e))};#x=()=>{const e=this.#e.value.trim();e.length>=2?this.#k(e):this.#f()};#k(e){const r=e.toLowerCase(),n=this.#t.querySelectorAll(H),o=new Set,s=new Set;for(const i of n){const l=i.querySelector(dn)?.textContent.trim().toLowerCase()\|\|"";if(l){if(i.querySelector(lt)){l.includes(r)&&(o.add(i),s.add(i));continue}if(i.hidden=!l.includes(r),!i.hidden){let c=i.parentElement;for(;c&&c!==this.#t;)c.matches(H)&&o.add(c),c=c.parentElement}}}for(const i of n){const l=i.querySelector(lt);if(l)if(o.has(i)){if(i.hidden=!1,i.querySelector(".mds-checkbox-accordion__button")?.setAttribute("aria-expanded","true"),s.has(i))for(const c of l.querySelectorAll(H))c.hidden=!1}else i.hidden=!0}let a=0;for(const i of n)i.hidden\|\|a++;this.#v(a===0),this.#g(this.#b("optionsFoundSingular","optionsFoundPlural",a))}#f(){for(const e of this.#t.querySelectorAll(H))e.hidden=!1;this.#v(!1)}#v(e){this.#p?.classList.toggle("mds-category-picker__no-results--visible",e)}#S=e=>{switch(e.key){case"Escape":this.#n(),this.#e.blur();break;case"ArrowDown":{e.preventDefault(),this.#o\|\|this.#m();for(const r of this.#t.querySelectorAll(H)){if(r.hidden)continue;const n=r.querySelector(Te);if(n){n.focus();break}}break}case"Backspace":if(this.#e.value===""){const r=this.#r.querySelectorAll(dt),n=r[r.length-1];if(!n)break;const o=this.#a.get(n.querySelector(Pe));o&&(o.checked=!1,o.dispatchEvent(new Event("change",{bubbles:!0})))}break;case"Tab":this.#n();break}};#b(e,r,n){return n===1?this.#s[e]:this.#s[r].replace("{count}",String(n))}#g(e){this.#i&&(this.#i.textContent="",requestAnimationFrame(()=>{this.#i.textContent=e}))}}window.customElements.get("mds-dropdown-nav")\|\|window.customElements.define("mds-dropdown-nav",Ot);window.customElements.get("mds-timeout-dialog")\|\|window.customElements.define("mds-timeout-dialog",Tt);window.customElements.get("mds-card-link")\|\|window.customElements.define("mds-card-link",cn);window.customElements.get("mds-conditional-section")\|\|window.customElements.define("mds-conditional-section",ln);window.customElements.get("mds-image-cropper")\|\|window.customElements.define("mds-image-cropper",Pt);window.customElements.get("mds-category-picker")\|\|window.customElements.define("mds-category-picker",un);const De=()=>{x.init(),mt.init(),It.init(),Nt.init(),G.init(),kt.init(),$e.init(),re.init(),St.init(),an.setFluidVideos()};window.mdgxInitAll=De;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",De):De();
1	+ import{M as St}from"./dropdown-nav-DGGzV21D.js";import{M as Ct}from"./timeout-dialog-plrFUmdZ.js";import{M as Ot}from"./image-cropper-BUN9gxO4.js";window.addEventListener("hashchange",()=>{const t=window.location.hash.trim();Array.from(document.querySelectorAll(`a[href='${t}']`)).forEach(r=>{r.click()})},!1);const ut={baseline:{$value:"4px"},breakpoint:{md:{$value:"600px"},lg:{$value:"1008px"}}},ft={size:ut},Tt="js-tabs-item",Je="mds-tabs",Pt="mds-tabs__list",qt="mds-tabs__list-item",Ke="mds-tabs__panel",me="mds-tabs__tab",ve="mds-tabs__tab--selected",Ue="mds-tabs__panel--hidden",be={left:37,right:39,up:38,down:40},$t=".js-desktop-tabbed",Dt=".js-full-tabbed",_t=parseInt(ft.size.breakpoint.lg.$value,10),x={init:()=>{x.setTabs(Dt),window.innerWidth>_t&&x.setTabs($t)},setTabs:t=>{const e=Array.from(document.querySelectorAll(`${t} .${me}`)),r=Array.from(document.querySelectorAll(`${t} .${Pt}`)),n=Array.from(document.querySelectorAll(`${t} .${qt}`)),i=Array.from(document.querySelectorAll(`${t} .${Ke}`));r.forEach(s=>{s.setAttribute("role","tablist")}),n.forEach(s=>{s.setAttribute("role","presentation")}),e.forEach(s=>{s.setAttribute("role","tab"),s.setAttribute("aria-controls",s.attributes.href.value.substring(1)),s.classList.contains(ve)?s.setAttribute("tabindex","0"):s.setAttribute("tabindex","-1")}),i.forEach(s=>{s.setAttribute("role","tabpanel"),s.setAttribute("aria-labelledby",`label-${s.attributes.id.value}`)});const o=document.querySelectorAll(`${t} .${Tt}`);Array.from(o).forEach(s=>{const l=window.location.hash.trim(),c=s.attributes.href.value,d=s.closest(`.${Je}`),p=x.getAllPanels(d),f=x.getAllTabs(d),h=x.getTargetPanel(s,d);s.addEventListener("click",m=>{m.preventDefault(),x.updateTabs(f,p,s,h,c)}),c===l&&x.updateTabs(f,p,s,h,c)}),r.forEach(s=>{const l=s.closest(`.${Je}`),c=x.getAllPanels(l),d=x.getAllTabs(l);s.addEventListener("keydown",p=>{switch(p.keyCode){case be.left:case be.up:p.preventDefault(),x.moveTab(s,l,d,c,!1);break;case be.right:case be.down:p.preventDefault(),x.moveTab(s,l,d,c,!0);break}})})},getSelectedTab:t=>t.querySelector(`.${ve}`),getPrevTab:t=>t.parentElement.previousSibling?t.parentElement.previousSibling.querySelector(`.${me}`):!1,getNextTab:t=>t.parentElement.nextSibling?t.parentElement.nextSibling.querySelector(`.${me}`):!1,getTargetPanel:(t,e)=>{const r=t.attributes.href.value;return e.querySelector(r)},getAllPanels:t=>Array.from(t.querySelectorAll(`.${Ke}`)),getAllTabs:t=>Array.from(t.querySelectorAll(`.${me}`)),moveTab:(t,e,r,n,i)=>{const o=x.getSelectedTab(t),a=i?x.getNextTab(o):x.getPrevTab(o);if(a){const s=a.attributes.href.value,l=x.getTargetPanel(a,e);x.updateTabs(r,n,a,l,s,!1)}},updateTabs:(t,e,r,n,i)=>{x.clearAllTabs(t),x.setActiveTab(r),x.clearAllPanels(e),x.setActivePanel(n,i)},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(Ue)})},setActiveTab:t=>{t.classList.add(ve),t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0"),t.focus()},setActivePanel:(t,e)=>{t.classList.remove(Ue),window.history.replaceState({},"",e)}},It="mds-accordion--breakpoint",Bt="mds-accordion__label",pt={init:()=>{const t=document.querySelectorAll(`.${It}`),e=window.innerWidth;t.forEach(n=>{pt.checkBreakpoint(n,e)\|\|(n.open=!0,n.querySelector("summary").style.display="none")}),document.querySelectorAll(`.${Bt}`).forEach(n=>{n.addEventListener("click",({target:i})=>{const o=i.closest("details"),a=o.querySelector("summary");o.open=!1,a.focus()})})},checkBreakpoint:(t,e)=>{let r=0;if(t.dataset.bp){const n=t.dataset.bp.replace(/\D/g,""),i=t.dataset.bp.replace(/[0-9]/g,"");let o,a;switch(i){case"px":r=n;break;case"em":o=window.getComputedStyle(document.querySelector("body"))["font-size"],a=nparseFloat(o),r=a;break;case"rem":o=window.getComputedStyle(document.querySelector("body"))["font-size"],a=nparseFloat(o),r=a;break;default:return!0}return!(e>r)}return!0}},Mt={init:()=>{const t=document.querySelectorAll(".mds-subnavigation"),e=[];let r;t.forEach(i=>{const o=i.querySelector(".mds-subnavigation__link-list"),a=Array.from(o.children),s=a[0],l=i.querySelector(".mds-subnavigation__mobile-title"),c=i.querySelector(".mds-subnavigation__drawer"),d=i.querySelector(".mds-subnavigation__drawer-label"),p=i.querySelector(".mds-subnavigation__drawer-label-text"),f=i.querySelector(".mds-subnavigation__drawer-content"),h=c.dataset.label,m=c.dataset.labelPlural;d.addEventListener("click",()=>{d.getAttribute("aria-expanded")==="true"?d.setAttribute("aria-expanded","false"):d.setAttribute("aria-expanded","true")}),c.addEventListener("focusout",v=>{c.contains(v.relatedTarget)\|\|d.setAttribute("aria-expanded","false")});const g=()=>o.clientHeight>s.offsetHeight;e.push(()=>{d.setAttribute("aria-expanded","false"),window.getComputedStyle(l).getPropertyValue("display")==="none"?(a.forEach(b=>{o.append(b)}),c.style.display="none",g()&&(c.style.display="list-item",a.slice().reverse().forEach(b=>{if(g()&&b!==c){f.prepend(b);const y=Array.from(f.children).length,E=y>1?m:h;p.innerText=E.replace("{count}",y)}else o.prepend(b)}),f.style.width=`${o.offsetWidth-c.offsetLeft}px`)):(a.forEach(b=>{b!==c&&b!==l&&f.append(b)}),f.style.width="initial",c.style.display="block")})});const n=()=>{e.forEach(i=>{i()})};n(),window.onresize=()=>{clearTimeout(r),r=setTimeout(n,100)}}},Rt="mds-checkbox-accordion__button",jt="mds-checkbox-accordion__button--open",Nt={init:()=>{document.querySelectorAll(`.${Rt}`).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",q="bottom",$="right",P="left",_e="auto",le=[T,q,$,P],Z="start",Ie="end",Wt="clippingParents",ht="viewport",re="popper",Ft="reference",Ge=le.reduce(function(t,e){return t.concat([e+"-"+Z,e+"-"+Ie])},[]),mt=[].concat(le,[_e]).reduce(function(t,e){return t.concat([e,e+"-"+Z,e+"-"+Ie])},[]),Ht="beforeRead",zt="read",Vt="afterRead",Xt="beforeMain",Yt="main",Jt="afterMain",Kt="beforeWrite",Ut="write",Gt="afterWrite",Qt=[Ht,zt,Vt,Xt,Yt,Jt,Kt,Ut,Gt];function R(t){return t?(t.nodeName\|\|"").toLowerCase():null}function _(t){if(t==null)return window;if(t.toString()!=="[object Window]"){var e=t.ownerDocument;return e&&e.defaultView\|\|window}return t}function se(t){var e=_(t).Element;return t instanceof e\|\|t instanceof Element}function D(t){var e=_(t).HTMLElement;return t instanceof e\|\|t instanceof HTMLElement}function vt(t){if(typeof ShadowRoot>"u")return!1;var e=_(t).ShadowRoot;return t instanceof e\|\|t instanceof ShadowRoot}function Zt(t){var e=t.state;Object.keys(e.elements).forEach(function(r){var n=e.styles[r]\|\|{},i=e.attributes[r]\|\|{},o=e.elements[r];!D(o)\|\|!R(o)\|\|(Object.assign(o.style,n),Object.keys(i).forEach(function(a){var s=i[a];s===!1?o.removeAttribute(a):o.setAttribute(a,s===!0?"":s)}))})}function er(t){var e=t.state,r={popper:{position:e.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(e.elements.popper.style,r.popper),e.styles=r,e.elements.arrow&&Object.assign(e.elements.arrow.style,r.arrow),function(){Object.keys(e.elements).forEach(function(n){var i=e.elements[n],o=e.attributes[n]\|\|{},a=Object.keys(e.styles.hasOwnProperty(n)?e.styles[n]:r[n]),s=a.reduce(function(l,c){return l[c]="",l},{});!D(i)\|\|!R(i)\|\|(Object.assign(i.style,s),Object.keys(o).forEach(function(l){i.removeAttribute(l)}))})}}const tr={name:"applyStyles",enabled:!0,phase:"write",fn:Zt,effect:er,requires:["computeStyles"]};function M(t){return t.split("-")[0]}function ee(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 Be(t){var e=ee(t),r=t.offsetWidth,n=t.offsetHeight;return Math.abs(e.width-r)<=1&&(r=e.width),Math.abs(e.height-n)<=1&&(n=e.height),{x:t.offsetLeft,y:t.offsetTop,width:r,height:n}}function bt(t,e){var r=e.getRootNode&&e.getRootNode();if(t.contains(e))return!0;if(r&&vt(r)){var n=e;do{if(n&&t.isSameNode(n))return!0;n=n.parentNode\|\|n.host}while(n)}return!1}function W(t){return _(t).getComputedStyle(t)}function rr(t){return["table","td","th"].indexOf(R(t))>=0}function z(t){return((se(t)?t.ownerDocument:t.document)\|\|window.document).documentElement}function ke(t){return R(t)==="html"?t:t.assignedSlot\|\|t.parentNode\|\|(vt(t)?t.host:null)\|\|z(t)}function Qe(t){return!D(t)\|\|W(t).position==="fixed"?null:t.offsetParent}function nr(t){var e=navigator.userAgent.toLowerCase().indexOf("firefox")!==-1,r=navigator.userAgent.indexOf("Trident")!==-1;if(r&&D(t)){var n=W(t);if(n.position==="fixed")return null}for(var i=ke(t);D(i)&&["html","body"].indexOf(R(i))<0;){var o=W(i);if(o.transform!=="none"\|\|o.perspective!=="none"\|\|o.contain==="paint"\|\|["transform","perspective"].indexOf(o.willChange)!==-1\|\|e&&o.willChange==="filter"\|\|e&&o.filter&&o.filter!=="none")return i;i=i.parentNode}return null}function de(t){for(var e=_(t),r=Qe(t);r&&rr(r)&&W(r).position==="static";)r=Qe(r);return r&&(R(r)==="html"\|\|R(r)==="body"&&W(r).position==="static")?e:r\|\|nr(t)\|\|e}function Me(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var H=Math.max,oe=Math.min,ge=Math.round;function Ae(t,e,r){return H(t,oe(e,r))}function gt(){return{top:0,right:0,bottom:0,left:0}}function yt(t){return Object.assign({},gt(),t)}function wt(t,e){return e.reduce(function(r,n){return r[n]=t,r},{})}var ir=function(e,r){return e=typeof e=="function"?e(Object.assign({},r.rects,{placement:r.placement})):e,yt(typeof e!="number"?e:wt(e,le))};function sr(t){var e,r=t.state,n=t.name,i=t.options,o=r.elements.arrow,a=r.modifiersData.popperOffsets,s=M(r.placement),l=Me(s),c=[P,$].indexOf(s)>=0,d=c?"height":"width";if(!(!o\|\|!a)){var p=ir(i.padding,r),f=Be(o),h=l==="y"?T:P,m=l==="y"?q:$,g=r.rects.reference[d]+r.rects.reference[l]-a[l]-r.rects.popper[d],v=a[l]-r.rects.reference[l],b=de(o),y=b?l==="y"?b.clientHeight\|\|0:b.clientWidth\|\|0:0,E=g/2-v/2,u=p[h],L=y-f[d]-p[m],w=y/2-f[d]/2+E,k=Ae(u,w,L),A=l;r.modifiersData[n]=(e={},e[A]=k,e.centerOffset=k-w,e)}}function or(t){var e=t.state,r=t.options,n=r.element,i=n===void 0?"[data-popper-arrow]":n;i!=null&&(typeof i=="string"&&(i=e.elements.popper.querySelector(i),!i)\|\|bt(e.elements.popper,i)&&(e.elements.arrow=i))}const ar={name:"arrow",enabled:!0,phase:"main",fn:sr,effect:or,requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};var cr={top:"auto",right:"auto",bottom:"auto",left:"auto"};function lr(t){var e=t.x,r=t.y,n=window,i=n.devicePixelRatio\|\|1;return{x:ge(ge(ei)/i)\|\|0,y:ge(ge(ri)/i)\|\|0}}function Ze(t){var e,r=t.popper,n=t.popperRect,i=t.placement,o=t.offsets,a=t.position,s=t.gpuAcceleration,l=t.adaptive,c=t.roundOffsets,d=c===!0?lr(o):typeof c=="function"?c(o):o,p=d.x,f=p===void 0?0:p,h=d.y,m=h===void 0?0:h,g=o.hasOwnProperty("x"),v=o.hasOwnProperty("y"),b=P,y=T,E=window;if(l){var u=de(r),L="clientHeight",w="clientWidth";u===_(r)&&(u=z(r),W(u).position!=="static"&&(L="scrollHeight",w="scrollWidth")),u=u,i===T&&(y=q,m-=u[L]-n.height,m=s?1:-1),i===P&&(b=$,f-=u[w]-n.width,f=s?1:-1)}var k=Object.assign({position:a},l&&cr);if(s){var A;return Object.assign({},k,(A={},A[y]=v?"0":"",A[b]=g?"0":"",A.transform=(E.devicePixelRatio\|\|1)<2?"translate("+f+"px, "+m+"px)":"translate3d("+f+"px, "+m+"px, 0)",A))}return Object.assign({},k,(e={},e[y]=v?m+"px":"",e[b]=g?f+"px":"",e.transform="",e))}function dr(t){var e=t.state,r=t.options,n=r.gpuAcceleration,i=n===void 0?!0:n,o=r.adaptive,a=o===void 0?!0:o,s=r.roundOffsets,l=s===void 0?!0:s,c={placement:M(e.placement),popper:e.elements.popper,popperRect:e.rects.popper,gpuAcceleration:i};e.modifiersData.popperOffsets!=null&&(e.styles.popper=Object.assign({},e.styles.popper,Ze(Object.assign({},c,{offsets:e.modifiersData.popperOffsets,position:e.options.strategy,adaptive:a,roundOffsets:l})))),e.modifiersData.arrow!=null&&(e.styles.arrow=Object.assign({},e.styles.arrow,Ze(Object.assign({},c,{offsets:e.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:l})))),e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-placement":e.placement})}const ur={name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:dr,data:{}};var ye={passive:!0};function fr(t){var e=t.state,r=t.instance,n=t.options,i=n.scroll,o=i===void 0?!0:i,a=n.resize,s=a===void 0?!0:a,l=_(e.elements.popper),c=[].concat(e.scrollParents.reference,e.scrollParents.popper);return o&&c.forEach(function(d){d.addEventListener("scroll",r.update,ye)}),s&&l.addEventListener("resize",r.update,ye),function(){o&&c.forEach(function(d){d.removeEventListener("scroll",r.update,ye)}),s&&l.removeEventListener("resize",r.update,ye)}}const pr={name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:fr,data:{}};var hr={left:"right",right:"left",bottom:"top",top:"bottom"};function xe(t){return t.replace(/left\|right\|bottom\|top/g,function(e){return hr[e]})}var mr={start:"end",end:"start"};function et(t){return t.replace(/start\|end/g,function(e){return mr[e]})}function Re(t){var e=_(t),r=e.pageXOffset,n=e.pageYOffset;return{scrollLeft:r,scrollTop:n}}function je(t){return ee(z(t)).left+Re(t).scrollLeft}function vr(t){var e=_(t),r=z(t),n=e.visualViewport,i=r.clientWidth,o=r.clientHeight,a=0,s=0;return n&&(i=n.width,o=n.height,/^((?!chrome\|android).)safari/i.test(navigator.userAgent)\|\|(a=n.offsetLeft,s=n.offsetTop)),{width:i,height:o,x:a+je(t),y:s}}function br(t){var e,r=z(t),n=Re(t),i=(e=t.ownerDocument)==null?void 0:e.body,o=H(r.scrollWidth,r.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),a=H(r.scrollHeight,r.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),s=-n.scrollLeft+je(t),l=-n.scrollTop;return W(i\|\|r).direction==="rtl"&&(s+=H(r.clientWidth,i?i.clientWidth:0)-o),{width:o,height:a,x:s,y:l}}function Ne(t){var e=W(t),r=e.overflow,n=e.overflowX,i=e.overflowY;return/auto\|scroll\|overlay\|hidden/.test(r+i+n)}function Et(t){return["html","body","#document"].indexOf(R(t))>=0?t.ownerDocument.body:D(t)&&Ne(t)?t:Et(ke(t))}function ie(t,e){var r;e===void 0&&(e=[]);var n=Et(t),i=n===((r=t.ownerDocument)==null?void 0:r.body),o=_(n),a=i?[o].concat(o.visualViewport\|\|[],Ne(n)?n:[]):n,s=e.concat(a);return i?s:s.concat(ie(ke(a)))}function qe(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function gr(t){var e=ee(t);return e.top=e.top+t.clientTop,e.left=e.left+t.clientLeft,e.bottom=e.top+t.clientHeight,e.right=e.left+t.clientWidth,e.width=t.clientWidth,e.height=t.clientHeight,e.x=e.left,e.y=e.top,e}function tt(t,e){return e===ht?qe(vr(t)):D(e)?gr(e):qe(br(z(t)))}function yr(t){var e=ie(ke(t)),r=["absolute","fixed"].indexOf(W(t).position)>=0,n=r&&D(t)?de(t):t;return se(n)?e.filter(function(i){return se(i)&&bt(i,n)&&R(i)!=="body"}):[]}function wr(t,e,r){var n=e==="clippingParents"?yr(t):[].concat(e),i=[].concat(n,[r]),o=i[0],a=i.reduce(function(s,l){var c=tt(t,l);return s.top=H(c.top,s.top),s.right=oe(c.right,s.right),s.bottom=oe(c.bottom,s.bottom),s.left=H(c.left,s.left),s},tt(t,o));return a.width=a.right-a.left,a.height=a.bottom-a.top,a.x=a.left,a.y=a.top,a}function ae(t){return t.split("-")[1]}function At(t){var e=t.reference,r=t.element,n=t.placement,i=n?M(n):null,o=n?ae(n):null,a=e.x+e.width/2-r.width/2,s=e.y+e.height/2-r.height/2,l;switch(i){case T:l={x:a,y:e.y-r.height};break;case q:l={x:a,y:e.y+e.height};break;case $:l={x:e.x+e.width,y:s};break;case P:l={x:e.x-r.width,y:s};break;default:l={x:e.x,y:e.y}}var c=i?Me(i):null;if(c!=null){var d=c==="y"?"height":"width";switch(o){case Z:l[c]=l[c]-(e[d]/2-r[d]/2);break;case Ie:l[c]=l[c]+(e[d]/2-r[d]/2);break}}return l}function ce(t,e){e===void 0&&(e={});var r=e,n=r.placement,i=n===void 0?t.placement:n,o=r.boundary,a=o===void 0?Wt:o,s=r.rootBoundary,l=s===void 0?ht:s,c=r.elementContext,d=c===void 0?re:c,p=r.altBoundary,f=p===void 0?!1:p,h=r.padding,m=h===void 0?0:h,g=yt(typeof m!="number"?m:wt(m,le)),v=d===re?Ft:re,b=t.elements.reference,y=t.rects.popper,E=t.elements[f?v:d],u=wr(se(E)?E:E.contextElement\|\|z(t.elements.popper),a,l),L=ee(b),w=At({reference:L,element:y,placement:i}),k=qe(Object.assign({},y,w)),A=d===re?k:L,S={top:u.top-A.top+g.top,bottom:A.bottom-u.bottom+g.bottom,left:u.left-A.left+g.left,right:A.right-u.right+g.right},O=t.modifiersData.offset;if(d===re&&O){var I=O[i];Object.keys(S).forEach(function(j){var C=[$,q].indexOf(j)>=0?1:-1,V=[T,q].indexOf(j)>=0?"y":"x";S[j]+=I[V]C})}return S}function Er(t,e){e===void 0&&(e={});var r=e,n=r.placement,i=r.boundary,o=r.rootBoundary,a=r.padding,s=r.flipVariations,l=r.allowedAutoPlacements,c=l===void 0?mt:l,d=ae(n),p=d?s?Ge:Ge.filter(function(m){return ae(m)===d}):le,f=p.filter(function(m){return c.indexOf(m)>=0});f.length===0&&(f=p);var h=f.reduce(function(m,g){return m[g]=ce(t,{placement:g,boundary:i,rootBoundary:o,padding:a})[M(g)],m},{});return Object.keys(h).sort(function(m,g){return h[m]-h[g]})}function Ar(t){if(M(t)===_e)return[];var e=xe(t);return[et(t),e,et(e)]}function xr(t){var e=t.state,r=t.options,n=t.name;if(!e.modifiersData[n]._skip){for(var i=r.mainAxis,o=i===void 0?!0:i,a=r.altAxis,s=a===void 0?!0:a,l=r.fallbackPlacements,c=r.padding,d=r.boundary,p=r.rootBoundary,f=r.altBoundary,h=r.flipVariations,m=h===void 0?!0:h,g=r.allowedAutoPlacements,v=e.options.placement,b=M(v),y=b===v,E=l\|\|(y\|\|!m?[xe(v)]:Ar(v)),u=[v].concat(E).reduce(function(Y,B){return Y.concat(M(B)===_e?Er(e,{placement:B,boundary:d,rootBoundary:p,padding:c,flipVariations:m,allowedAutoPlacements:g}):B)},[]),L=e.rects.reference,w=e.rects.popper,k=new Map,A=!0,S=u[0],O=0;O<u.length;O++){var I=u[O],j=M(I),C=ae(I)===Z,V=[T,q].indexOf(j)>=0,te=V?"width":"height",J=ce(e,{placement:I,boundary:d,rootBoundary:p,altBoundary:f,padding:c}),X=V?C?$:P:C?q:T;L[te]>w[te]&&(X=xe(X));var Le=xe(X),K=[];if(o&&K.push(J[j]<=0),s&&K.push(J[X]<=0,J[Le]<=0),K.every(function(Y){return Y})){S=I,A=!1;break}k.set(I,K)}if(A)for(var ue=m?3:1,Se=function(B){var pe=u.find(function(Ce){var G=k.get(Ce);if(G)return G.slice(0,B).every(function(Oe){return Oe})});if(pe)return S=pe,"break"},U=ue;U>0;U--){var fe=Se(U);if(fe==="break")break}e.placement!==S&&(e.modifiersData[n]._skip=!0,e.placement=S,e.reset=!0)}}const kr={name:"flip",enabled:!0,phase:"main",fn:xr,requiresIfExists:["offset"],data:{_skip:!1}};function rt(t,e,r){return r===void 0&&(r={x:0,y:0}),{top:t.top-e.height-r.y,right:t.right-e.width+r.x,bottom:t.bottom-e.height+r.y,left:t.left-e.width-r.x}}function nt(t){return[T,$,q,P].some(function(e){return t[e]>=0})}function Lr(t){var e=t.state,r=t.name,n=e.rects.reference,i=e.rects.popper,o=e.modifiersData.preventOverflow,a=ce(e,{elementContext:"reference"}),s=ce(e,{altBoundary:!0}),l=rt(a,n),c=rt(s,i,o),d=nt(l),p=nt(c);e.modifiersData[r]={referenceClippingOffsets:l,popperEscapeOffsets:c,isReferenceHidden:d,hasPopperEscaped:p},e.attributes.popper=Object.assign({},e.attributes.popper,{"data-popper-reference-hidden":d,"data-popper-escaped":p})}const Sr={name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:Lr};function Cr(t,e,r){var n=M(t),i=[P,T].indexOf(n)>=0?-1:1,o=typeof r=="function"?r(Object.assign({},e,{placement:t})):r,a=o[0],s=o[1];return a=a\|\|0,s=(s\|\|0)i,[P,$].indexOf(n)>=0?{x:s,y:a}:{x:a,y:s}}function Or(t){var e=t.state,r=t.options,n=t.name,i=r.offset,o=i===void 0?[0,0]:i,a=mt.reduce(function(d,p){return d[p]=Cr(p,e.rects,o),d},{}),s=a[e.placement],l=s.x,c=s.y;e.modifiersData.popperOffsets!=null&&(e.modifiersData.popperOffsets.x+=l,e.modifiersData.popperOffsets.y+=c),e.modifiersData[n]=a}const Tr={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:Or};function Pr(t){var e=t.state,r=t.name;e.modifiersData[r]=At({reference:e.rects.reference,element:e.rects.popper,placement:e.placement})}const qr={name:"popperOffsets",enabled:!0,phase:"read",fn:Pr,data:{}};function $r(t){return t==="x"?"y":"x"}function Dr(t){var e=t.state,r=t.options,n=t.name,i=r.mainAxis,o=i===void 0?!0:i,a=r.altAxis,s=a===void 0?!1:a,l=r.boundary,c=r.rootBoundary,d=r.altBoundary,p=r.padding,f=r.tether,h=f===void 0?!0:f,m=r.tetherOffset,g=m===void 0?0:m,v=ce(e,{boundary:l,rootBoundary:c,padding:p,altBoundary:d}),b=M(e.placement),y=ae(e.placement),E=!y,u=Me(b),L=$r(u),w=e.modifiersData.popperOffsets,k=e.rects.reference,A=e.rects.popper,S=typeof g=="function"?g(Object.assign({},e.rects,{placement:e.placement})):g,O={x:0,y:0};if(w){if(o\|\|s){var I=u==="y"?T:P,j=u==="y"?q:$,C=u==="y"?"height":"width",V=w[u],te=w[u]+v[I],J=w[u]-v[j],X=h?-A[C]/2:0,Le=y===Z?k[C]:A[C],K=y===Z?-A[C]:-k[C],ue=e.elements.arrow,Se=h&&ue?Be(ue):{width:0,height:0},U=e.modifiersData["arrow#persistent"]?e.modifiersData["arrow#persistent"].padding:gt(),fe=U[I],Y=U[j],B=Ae(0,k[C],Se[C]),pe=E?k[C]/2-X-B-fe-S:Le-B-fe-S,Ce=E?-k[C]/2+X+B+Y+S:K+B+Y+S,G=e.elements.arrow&&de(e.elements.arrow),Oe=G?u==="y"?G.clientTop\|\|0:G.clientLeft\|\|0:0,We=e.modifiersData.offset?e.modifiersData.offset[e.placement][u]:0,Fe=w[u]+pe-We-Oe,He=w[u]+Ce-We;if(o){var ze=Ae(h?oe(te,Fe):te,V,h?H(J,He):J);w[u]=ze,O[u]=ze-V}if(s){var kt=u==="x"?T:P,Lt=u==="x"?q:$,he=w[L],Ve=he+v[kt],Xe=he-v[Lt],Ye=Ae(h?oe(Ve,Fe):Ve,he,h?H(Xe,He):Xe);w[L]=Ye,O[L]=Ye-he}}e.modifiersData[n]=O}}const _r={name:"preventOverflow",enabled:!0,phase:"main",fn:Dr,requiresIfExists:["offset"]};function Ir(t){return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function Br(t){return t===_(t)\|\|!D(t)?Re(t):Ir(t)}function Mr(t,e,r){r===void 0&&(r=!1);var n=z(e),i=ee(t),o=D(e),a={scrollLeft:0,scrollTop:0},s={x:0,y:0};return(o\|\|!o&&!r)&&((R(e)!=="body"\|\|Ne(n))&&(a=Br(e)),D(e)?(s=ee(e),s.x+=e.clientLeft,s.y+=e.clientTop):n&&(s.x=je(n))),{x:i.left+a.scrollLeft-s.x,y:i.top+a.scrollTop-s.y,width:i.width,height:i.height}}function Rr(t){var e=new Map,r=new Set,n=[];t.forEach(function(o){e.set(o.name,o)});function i(o){r.add(o.name);var a=[].concat(o.requires\|\|[],o.requiresIfExists\|\|[]);a.forEach(function(s){if(!r.has(s)){var l=e.get(s);l&&i(l)}}),n.push(o)}return t.forEach(function(o){r.has(o.name)\|\|i(o)}),n}function jr(t){var e=Rr(t);return Qt.reduce(function(r,n){return r.concat(e.filter(function(i){return i.phase===n}))},[])}function Nr(t){var e;return function(){return e\|\|(e=new Promise(function(r){Promise.resolve().then(function(){e=void 0,r(t())})})),e}}function Wr(t){var e=t.reduce(function(r,n){var i=r[n.name];return r[n.name]=i?Object.assign({},i,n,{options:Object.assign({},i.options,n.options),data:Object.assign({},i.data,n.data)}):n,r},{});return Object.keys(e).map(function(r){return e[r]})}var it={placement:"bottom",modifiers:[],strategy:"absolute"};function st(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return!e.some(function(n){return!(n&&typeof n.getBoundingClientRect=="function")})}function Fr(t){t===void 0&&(t={});var e=t,r=e.defaultModifiers,n=r===void 0?[]:r,i=e.defaultOptions,o=i===void 0?it:i;return function(s,l,c){c===void 0&&(c=o);var d={placement:"bottom",orderedModifiers:[],options:Object.assign({},it,o),modifiersData:{},elements:{reference:s,popper:l},attributes:{},styles:{}},p=[],f=!1,h={state:d,setOptions:function(b){g(),d.options=Object.assign({},o,d.options,b),d.scrollParents={reference:se(s)?ie(s):s.contextElement?ie(s.contextElement):[],popper:ie(l)};var y=jr(Wr([].concat(n,d.options.modifiers)));return d.orderedModifiers=y.filter(function(E){return E.enabled}),m(),h.update()},forceUpdate:function(){if(!f){var b=d.elements,y=b.reference,E=b.popper;if(st(y,E)){d.rects={reference:Mr(y,de(E),d.options.strategy==="fixed"),popper:Be(E)},d.reset=!1,d.placement=d.options.placement,d.orderedModifiers.forEach(function(O){return d.modifiersData[O.name]=Object.assign({},O.data)});for(var u=0;u<d.orderedModifiers.length;u++){if(d.reset===!0){d.reset=!1,u=-1;continue}var L=d.orderedModifiers[u],w=L.fn,k=L.options,A=k===void 0?{}:k,S=L.name;typeof w=="function"&&(d=w({state:d,options:A,name:S,instance:h})\|\|d)}}}},update:Nr(function(){return new Promise(function(v){h.forceUpdate(),v(d)})}),destroy:function(){g(),f=!0}};if(!st(s,l))return h;h.setOptions(c).then(function(v){!f&&c.onFirstUpdate&&c.onFirstUpdate(v)});function m(){d.orderedModifiers.forEach(function(v){var b=v.name,y=v.options,E=y===void 0?{}:y,u=v.effect;if(typeof u=="function"){var L=u({state:d,name:b,instance:h,options:E}),w=function(){};p.push(L\|\|w)}})}function g(){p.forEach(function(v){return v()}),p=[]}return h}}var Hr=[pr,qr,ur,tr,Tr,kr,_r,ar,Sr],zr=Fr({defaultModifiers:Hr});const Vr=parseInt(ut.baseline.$value,10),Xr="js-mds-popover-trigger",we="mds-popover--active",ne={init:()=>{Array.from(document.querySelectorAll(`.${Xr}`)).forEach(e=>{const n=`${e.getAttribute("id")}-content`,i=document.getElementById(n),o=i.dataset?i.dataset.placement:null,a=zr(e,i,{placement:o\|\|"top-end",strategy:"fixed",modifiers:[{name:"offset",options:{offset:[0,Vr3]}},{name:"arrow",options:{padding:5}}]});e.setAttribute("aria-expanded","false"),i.setAttribute("aria-hidden","true"),e.addEventListener("click",s=>{s.preventDefault(),a.update(),i.classList.toggle(we),ne.setAriaAttr(e,i,we)}),document.addEventListener("mousedown",s=>{ne.hide(e,i,a,we,s)}),document.addEventListener("keydown",s=>{ne.hide(e,i,a,we,s)})})},hide:(t,e,r,n,i)=>{!t.contains(i.target)&&!r.state.elements.popper.contains(i.target)&&e.classList.contains(n)&&(e.classList.remove(n),ne.setAriaAttr(t,e,n))},setAriaAttr:(t,e,r)=>{e.classList.contains(r)?(t.setAttribute("aria-expanded","true"),e.removeAttribute("aria-hidden")):(t.setAttribute("aria-expanded","false"),e.setAttribute("aria-hidden","true"))}},Yr=parseInt(ft.size.breakpoint.md.$value,10),ot="data-modal-id",at="mds-modal--active",Jr="js-mds-modal-close";let Ee;const Q={init:()=>{window.innerWidth>Yr&&Array.from(document.querySelectorAll(`[${ot}]`)).forEach(r=>{const n=r.getAttribute(ot),i=document.getElementById(n),o=Array.from(i.querySelectorAll(`.${Jr}`)),a=i.getAttribute("data-site-container"),s=document.getElementById(a);let c=i.querySelectorAll('a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]');c=Array.prototype.slice.call(c);const d=c[0],p=c[c.length-1];r.addEventListener("click",f=>{f.preventDefault(),Q.open(i,d,s)}),i.addEventListener("click",f=>{f.target===i&&Q.close(i,Ee,s)}),i.addEventListener("keydown",f=>{Q.trapFocus(f,d,p),(f.key==="Escape"\|\|f.key==="Esc")&&Q.close(i,Ee,s)}),o.forEach(f=>{f.addEventListener("click",()=>{Q.close(i,Ee,s)})})})},open:(t,e,r)=>{Ee=document.activeElement,t.classList.add(at),e.focus(),r?.setAttribute("aria-hidden","true")},close:(t,e,r)=>{r?.removeAttribute("aria-hidden"),t.classList.remove(at),e.focus()},trapFocus:(t,e,r)=>{t.key==="Tab"&&(t.shiftKey?document.activeElement===e&&(t.preventDefault(),r.focus()):document.activeElement===r&&(t.preventDefault(),e.focus()))}};class N extends HTMLElement{static selectedFileClass="mds-file-upload--selected-file";static selectedFileIsImageClass="mds-file-upload--selected-file-is-image";static dragOverClass="mds-file-upload--dragover";constructor(){super()}connectedCallback(){this.classList.add("mds-form-element--file-supported"),this.#e.addEventListener("change",this.#o),this.#r.addEventListener("click",this.#f),this.#e.addEventListener("dragover",this.#i),this.#e.addEventListener("dragenter",this.#i),this.#e.addEventListener("dragleave",this.#a),this.#e.addEventListener("dragend",this.#a),this.#e.addEventListener("drop",this.#a),this.#s?.addEventListener("commit",this.#p),this.#s?.addEventListener("reset",this.#v),this.#b(!0)}disconnectedCallback(){this.#e?.removeEventListener("change",this.#o),this.#r?.removeEventListener("click",this.#f),this.#e?.removeEventListener("dragover",this.#i),this.#e?.removeEventListener("dragenter",this.#i),this.#e?.removeEventListener("dragleave",this.#a),this.#e?.removeEventListener("dragend",this.#a),this.#e?.removeEventListener("drop",this.#a),this.#s?.removeEventListener("commit",this.#p),this.#s?.removeEventListener("reset",this.#v)}get rootNode(){return this}get#h(){return this.getRootNode({composed:!0})}get#n(){return this.#e?.files?.[0]}get#c(){return this.#n?.type?.startsWith("image/")}get#u(){const e=this.rootNode.getAttribute("no-auto-open-image-cropper");return e!==null&&e!=="false"}get#t(){return this.rootNode.querySelector(".mds-file-upload__file-name")}get#e(){return this.rootNode.querySelector("input[type=file]")}get#r(){return this.rootNode.querySelector(".mds-file-upload__remove-button")}get#l(){return this.rootNode.querySelector(".mds-file-upload__preview-image")}get#m(){return this.rootNode.querySelector(".mds-file-upload__open-modal")}get#d(){return this.rootNode.querySelector(".mds-modal")}get#s(){return this.rootNode.querySelector("mds-image-cropper")}#o=e=>{const{dontOpenModal:r=!1}=e?.detail\|\|{};this.#b(),this.#n&&this.#r.focus(),!r&&this.#c&&!this.#u&&this.#y()};#f=e=>{e.preventDefault(),this.removeFile(),this.#e.focus()};#i=e=>{e.stopPropagation(),this.classList.add(N.dragOverClass)};#a=e=>{e.stopPropagation(),this.classList.remove(N.dragOverClass)};#p=e=>{const r=e.detail;if(r){const n=new File([r],this.#n?.name\|\|"cropped-image",{type:r.type}),i=new DataTransfer;i.items.add(n),this.#e.files=i.files,this.#e.dispatchEvent(new CustomEvent("change",{detail:{dontOpenModal:!0},bubbles:!0})),this.#g()}};#v=()=>{this.#g()};#b(e=!1){if(this.#n)if(this.#t.textContent=this.#n.name,this.classList.add(N.selectedFileClass),this.#c){this.classList.add(N.selectedFileIsImageClass);const r=new FileReader;r.onload=n=>{this.#l.src=n.target.result,this.#s?.setAttribute("src",n.target.result)},r.readAsDataURL(this.#n)}else this.classList.remove(N.selectedFileIsImageClass);else e\|\|(this.#t.textContent="",this.classList.remove(N.selectedFileClass),this.classList.remove(N.selectedFileIsImageClass))}#y(){this.#m?.dispatchEvent(new Event("click"))}#g(){this.#d?.querySelector(".js-mds-modal-close").dispatchEvent(new Event("click"))}removeFile(){this.#e.value="",this.#e.dispatchEvent(new Event("change",{bubbles:!0}))}}const Kr=".mds-form-element--character-count",Ur=".mds-form-message--character-count",Gr=".js-character-count-number",Qr=".mds-form-control",$e={init:()=>{Array.from(document.querySelectorAll(Kr)).forEach(e=>{const r=e.querySelector(Qr),n=r.getAttribute("maxlength"),i=e.querySelector(Ur),o=e.querySelector(Gr);r.removeAttribute("maxlength"),$e.updateCounter(r,n,o,i),r.addEventListener("keyup",a=>{a.stopPropagation(),$e.updateCounter(r,n,o,i)})})},updateCounter:(t,e,r,n)=>{const i=t.value.match(/(\r\n\|\n\|\r)/g),o=t.value.length+(i?i.length:0),a=e-o;r.textContent=a,a<0?n.classList.add("mds-form-message--error"):n.classList.remove("mds-form-message--error")}},Zr="js-mds-button-double-submit",xt={init:()=>{Array.from(document.querySelectorAll(`.${Zr}`)).forEach(e=>{e.addEventListener("click",()=>{xt.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 n;this.onmousedown=()=>{n=+new Date},this.onmouseup=()=>{+new Date-n<200&&r.click(),n=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,n){const{showHide:i,setup:o}=this;this.isConnected&&r!==n&&(e==="show-when"?i():(e==="field-name"\|\|e==="form")&&o())}}const F=".mds-form-check",Te=".mds-form-check__input",nn=".mds-form-check__label",ct=".mds-form-check__nested-container",lt=".mds-category-picker__pill",Pe=".mds-category-picker__clear-pill",dt={optionsSelectedSingular:"1 option selected",optionsSelectedPlural:"{count} options selected",optionsFoundSingular:"1 option found",optionsFoundPlural:"{count} options found"};class sn extends HTMLElement{#h;#n;#c;#u;#t;#e;#r;#l;#m;#d;#s=new WeakMap;#o=!1;connectedCallback(){const e=this.querySelector(".mds-category-picker__templates");if(this.#n=this.querySelector(".mds-category-picker__pillbox"),this.#t=this.querySelector(".mds-category-picker__search"),this.#e=this.querySelector(".mds-category-picker__input-wrapper"),this.#r=this.querySelector(".mds-category-picker__dropdown"),this.#l=this.querySelector(".mds-category-picker__live-region"),this.#m=this.querySelector(".mds-category-picker__no-results"),!e\|\|!this.#n\|\|!this.#t\|\|!this.#r)return;try{this.#d={...dt,...JSON.parse(this.getAttribute("i18n")\|\|"{}")}}catch{this.#d=dt}if(this.#c=e.querySelector(lt),this.#u=e.querySelector(Pe),!this.#c\|\|!this.#u)return;e.remove(),this.#h=new AbortController;const r={signal:this.#h.signal};this.#n.addEventListener("click",this.#b,r),this.#r.addEventListener("change",this.#y,r),this.#t.addEventListener("blur",this.#a,r),this.#t.addEventListener("input",this.#g,r),this.#t.addEventListener("keydown",this.#L,r),this.#e.addEventListener("click",()=>this.#t.focus(),r),this.#t.addEventListener("focus",()=>this.#f(),r),this.#r.addEventListener("mousedown",n=>{n.target!==this.#t&&n.preventDefault()},r),this.#r.addEventListener("focusout",n=>{(!n.relatedTarget\|\|!this.contains(n.relatedTarget))&&this.#i()},r),this.#r.addEventListener("keydown",n=>{n.key==="Escape"&&(this.#i(),this.#t.focus())},r),document.addEventListener("click",n=>{n.composedPath().includes(this)\|\|this.#i()},r),this.#p()}disconnectedCallback(){this.#h?.abort()}#f(){this.#o\|\|(this.#o=!0,this.classList.add("mds-category-picker--open"),this.#t.setAttribute("aria-expanded","true"))}#i(){this.#o&&(this.#o=!1,this.classList.remove("mds-category-picker--open"),this.#t.setAttribute("aria-expanded","false"),this.#t.value="",this.#w())}#a=e=>{const r=e.relatedTarget;r&&(this.#r.contains(r)\|\|this.#e.contains(r))\|\|this.#i()};#p=()=>{this.#n.replaceChildren(),this.#s=new WeakMap;const e="mds-form-check--has-selection";for(const r of this.#r.querySelectorAll(F))r.classList.remove(e);for(const r of this.#r.querySelectorAll(`${Te}:checked`)){this.#v(r);let n=r.closest(F)?.parentElement;for(;n&&n!==this.#r;)n.matches(F)&&n.classList.add(e),n=n.parentElement}};#v(e){const r=e.dataset.path;if(!r)return;const n=this.#c.cloneNode(!0),i=this.#u.cloneNode(!0);i.setAttribute("aria-label",`${i.getAttribute("aria-label")} ${r}`);const o=document.createElement("span");o.className="mds-category-picker__pill-text",o.textContent=r,n.appendChild(o),n.appendChild(i),this.#n.appendChild(n),this.#s.set(i,e)}#b=({target:e})=>{const r=this.#s.get(e.closest(Pe));r&&(r.checked=!1,r.dispatchEvent(new Event("change",{bubbles:!0})))};#y=()=>{this.#p(),this.#t.value="",this.#w();const e=this.#r.querySelectorAll(`${Te}:checked`).length;this.#x(this.#A("optionsSelectedSingular","optionsSelectedPlural",e))};#g=()=>{const e=this.#t.value.trim();e.length>=2?this.#k(e):this.#w()};#k(e){const r=e.toLowerCase(),n=this.#r.querySelectorAll(F),i=new Set,o=new Set;for(const s of n){const l=s.querySelector(nn)?.textContent.trim().toLowerCase()\|\|"";if(l){if(s.querySelector(ct)){l.includes(r)&&(i.add(s),o.add(s));continue}if(s.hidden=!l.includes(r),!s.hidden){let c=s.parentElement;for(;c&&c!==this.#r;)c.matches(F)&&i.add(c),c=c.parentElement}}}for(const s of n){const l=s.querySelector(ct);if(l)if(i.has(s)){if(s.hidden=!1,s.querySelector(".mds-checkbox-accordion__button")?.setAttribute("aria-expanded","true"),o.has(s))for(const c of l.querySelectorAll(F))c.hidden=!1}else s.hidden=!0}let a=0;for(const s of n)s.hidden\|\|a++;this.#E(a===0),this.#x(this.#A("optionsFoundSingular","optionsFoundPlural",a))}#w(){for(const e of this.#r.querySelectorAll(F))e.hidden=!1;this.#E(!1)}#E(e){this.#m?.classList.toggle("mds-category-picker__no-results--visible",e)}#L=e=>{switch(e.key){case"Escape":this.#i(),this.#t.blur();break;case"ArrowDown":{e.preventDefault(),this.#o\|\|this.#f();for(const r of this.#r.querySelectorAll(F)){if(r.hidden)continue;const n=r.querySelector(Te);if(n){n.focus();break}}break}case"Backspace":if(this.#t.value===""){const r=this.#n.querySelectorAll(lt),n=r[r.length-1];if(!n)break;const i=this.#s.get(n.querySelector(Pe));i&&(i.checked=!1,i.dispatchEvent(new Event("change",{bubbles:!0})))}break;case"Tab":this.#i();break}};#A(e,r,n){return n===1?this.#d[e]:this.#d[r].replace("{count}",String(n))}#x(e){this.#l&&(this.#l.textContent="",requestAnimationFrame(()=>{this.#l.textContent=e}))}}window.customElements.get("mds-dropdown-nav")\|\|window.customElements.define("mds-dropdown-nav",St);window.customElements.get("mds-timeout-dialog")\|\|window.customElements.define("mds-timeout-dialog",Ct);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);window.customElements.get("mds-file-upload")\|\|window.customElements.define("mds-file-upload",N);window.customElements.get("mds-category-picker")\|\|window.customElements.define("mds-category-picker",sn);const De=()=>{x.init(),pt.init(),Mt.init(),Nt.init(),Q.init(),$e.init(),ne.init(),xt.init(),en.setFluidVideos()};window.mdgxInitAll=De;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",De):De();

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "13.5.1",
+  "version": "13.6.0",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/_macro-index.njk CHANGED Viewed

@@ -5,6 +5,7 @@
 {% from 'src/components/card/_macro.njk' import MdsCard %}
 {% from 'src/components/conditional-section/_macro.njk' import MdsConditionalSection %}
 {% from 'src/components/icons/_macro.njk' import MdsIcon %}
+{% from 'src/components/image-cropper/_macro.njk' import MdsImageCropper %}
 {% from 'src/components/inputs/_checkbox-elem/_macro.njk' import MdsCheckboxElem %}
 {% from 'src/components/inputs/_message/_macro.njk' import MdsInputMessages %}
 {% from 'src/components/inputs/category-picker/_macro.njk' import MdsCategoryPicker %}

package/src/components/image-cropper/README.md CHANGED Viewed

@@ -7,18 +7,24 @@ There are 2 flavours of this component: regular `<mds-image-cropper/>` bundled w
 ### Example
 ```html
+<input type="file" id="my-file-input" />
 <mds-image-cropper id="my-cropper" aspect-ratio="1" src="/assets/images/image-cropper-example.jpg"></mds-image-cropper>
 <script type="module">
+  const myFileInput = document.querySelector('#my-file-input');
   const myCropper = document.querySelector('#my-cropper');
-  myCropper.setAttribute('src', URL.createObjectURL(myFile)); // if getting image from file input or mds-image-cropper is already on the page
-  let previousUrlCreatedFromBlob;
+  // set image src from selected file
+  myFileInput.addEventListener('change', () => {
+    const tmpFileReader = new FileReader();
+    tmpFileReader.onload = (e) => {
+      myCropper.setAttribute('src', e.target.result);
+    };
+    tmpFileReader.readAsDataURL(myFileInput.files[0]);
+  });
   myCropper.addEventListener('commit', (e) => {
     if (e.detail) {
-      try {
-        // optionally cleanup any previous createObjectURL usage to clear memory
-        URL.revokeObjectURL(previousUrlCreatedFromBlob);
-      } catch (e) {}
       const croppedFile = new File([e.detail], 'my-file-name', { type: e.detail.type });
       const dataTransfer = new DataTransfer();
       dataTransfer.items.add(croppedFile);
@@ -78,3 +84,30 @@ There are 2 flavours of this component: regular `<mds-image-cropper/>` bundled w
 - `mouse`, `touch` on image container for panning
 - `pinch to zoom` and `mouse wheel` on image container for zoom
+## Nunjucks Macro MdsImageCropper
+This is a thin nunjucks wrapper around the Web Component - you don't really need to use this but this is used within other Nunjucks macros e.g. `MdsFileUpload`
+### Parameters
+- `aspectRatio` : see `aspect-ratio` attribute
+- `OutputWidth` : see `output-width` attribute
+- `OutputHeight` : see `output-height` attribute
+- `src` : see `src` attribute
+- `zoom`: see `zoom` attribute
+- `minZoom`: see `min-zoom` attribute
+- `maxZoom`: see `max-zoom` attribute
+- `cropX`: see `crop-x` attribute
+- `cropY`: see `crop-y` attribute
+- `noGrid`: see `no-grid` attribute
+- `restrictPosition`: see `restrict-position` attribute
+- `i18n` : Object
+  - `tZoomLabel` : see `t-zoom-label` attribute
+  - `tBtnReset` : see `t-btn-reset` attribute
+  - `tBtnCommit` : see `t-btn-commit` attribute
+  - `tBtnZoomOutAria`: see `t-btn-zoom-out-aria` attribute
+  - `tBtnZoomInAria`: see `t-btn-zoom-in-aria` attribute
+  - `tTouchAreaControls` see `t-touch-area-controls` attribute
+  - `tAriaLive` : see `t-aria-live` attribute
+- `attributes` : Object, any additional attributes you want to add to `<mds-image-cropper/>` element. Useful for adding an `id` attribute. Example: `attributes: { attribute-name: 'attribute-value', id: 'my-cropper' }`

package/src/components/image-cropper/_macro.njk ADDED Viewed

@@ -0,0 +1,3 @@
+{% macro MdsImageCropper(params) %}
+  {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/image-cropper/_template.njk ADDED Viewed

@@ -0,0 +1,24 @@
+{% from "../../sub-components/attributes/macro.njk" import MdsAttributes %}
+<mds-image-cropper
+  {% if params.aspectRatio %}aspect-ratio="{{params.aspectRatio}}"{%endif%}
+  {% if params.outputWidth %}output-width="{{params.outputWidth}}"{%endif%}
+  {% if params.outputHeight %}output-height="{{params.outputHeight}}"{%endif%}
+  {% if params.src %}src="{{params.src}}"{%endif%}
+  {% if params.zoom %}zoom="{{params.zoom}}"{%endif%}
+  {% if params.minZoom %}min-zoom="{{params.minZoom}}"{%endif%}
+  {% if params.maxZoom %}max-zoom="{{params.maxZoom}}"{%endif%}
+  {% if params.cropX %}crop-x="{{params.cropX}}"{%endif%}
+  {% if params.cropY %}crop-y="{{params.cropY}}"{%endif%}
+  {% if params.noGrid %}no-grid="{{params.noGrid}}"{%endif%}
+  {% if params.restrictPosition === "false" or params.restrictPosition === false %}restrict-position="{{params.restrictPosition}}"{%endif%}
+  {% if params.i18n.tZoomLabel%}t-zoom-label="{{params.i18n.tZoomLabel}}"{%endif%}
+  {% if params.i18n.tBtnReset%}t-btn-reset="{{params.i18n.tBtnReset}}"{%endif%}
+  {% if params.i18n.tBtnCommit%}t-btn-commit="{{params.i18n.tBtnCommit}}"{%endif%}
+  {% if params.i18n.tBtnZoomOutAria%}t-btn-zoom-out-aria="{{params.i18n.tBtnZoomOutAria}}"{%endif%}
+  {% if params.i18n.tBtnZoomInAria%}t-btn-zoom-in-aria="{{params.i18n.tBtnZoomInAria}}"{%endif%}
+  {% if params.i18n.tTouchAreaControls%}t-touch-area-controls="{{params.i18n.tTouchAreaControls}}"{%endif%}
+  {% if params.i18n.tAriaLive%}t-aria-live="{{params.i18n.tAriaLive}}"{%endif%}
+  {{- MdsAttributes(params.attributes) -}}
+></mds-image-cropper>

package/src/components/image-cropper/image-cropper.js CHANGED Viewed

@@ -395,7 +395,8 @@ export class MdsImageCropper extends HTMLElement {
         cropSize: this.#cropperSize,
         aspect: this.#aspectRatio,
         zoom: this.#zoom,
-        restrictPosition: this.#restrictPosition,
+        // edge case, if zoom is below 1 we must unlock restrict position when calculating crop, especially for rendered output
+        restrictPosition: this.#zoom >= 1 && this.#restrictPosition,
       }) || {}
     );
   }

package/src/components/image-cropper/image-cropper.scss CHANGED Viewed

@@ -10,6 +10,13 @@
   cursor: move;
   background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;
   // background-color: #fff;
+  &:focus,
+  &:focus-visible {
+    outline-color: Highlight;
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 2px;
+  }
 }
 .mds-image-cropper__image {

package/src/components/inputs/file-upload/README.md CHANGED Viewed

@@ -15,6 +15,11 @@
 - `fileTypes`: comma separated list of the different types of file you want to allow. It will add the `accept` attribute on the input - **optional** (see notes on validation)
 - `value`: name of a file - we can't pre-fill a file input for security reasons but using `value` will allow you to indicate to the user that the system will use a pre-saved file. You will need to add logic behind the scenes to cater for that option. **optional**
 - `i18n`: Text to translate/customise (object) **optional**
+- `noImageCropper`: don't show image cropper when an image file is detected
+- `noAutoOpenImageCropper`: don't automatically open image cropper modal on file change
+- `siteContainerId`: see MdsModal for `siteContainerId`
+- `cropper`: see MdsImageCropper [here](/components/detail/image-cropper)
 ```
 i18n: {
   requiredIcon: 'required', , // visually hidden text for the required icon
@@ -23,14 +28,17 @@ i18n: {
   buttonText: 'Choose a file',
   removeButtonText: 'Remove file',
   selectedFileText: 'Selected file:', // hidden text when a file has been selected
-  fallbackSelectedFileText: 'Use `[value]` or upload a different file'
+  fallbackSelectedFileText: 'Use `[value]` or upload a different file',
+  cropImageButtonText: 'Crop image'
 }
 ```
-  + `requiredIcon`: Visually hidden text for the required icon on the label
-  + `defaultFileText`: The default text to show in place of a file name when a user has not selected a file yet
-  + `buttonText`: The text for the file upload button
-  + `removeButtonText`: The text to show on the button that clears the input when a file has been selected
-  + `fallbackSelectedFileText`: To be used in combination with `value`. Add text which explains that the system will use a pre-saved file. Useful when there is no javascript or for browsers that don't support the drag and drop. To ensure accessibility, the text "Use `[value]` or upload a different file" is added by default when `value` is used.
+- `requiredIcon`: Visually hidden text for the required icon on the label
+- `defaultFileText`: The default text to show in place of a file name when a user has not selected a file yet
+- `buttonText`: The text for the file upload button
+- `removeButtonText`: The text to show on the button that clears the input when a file has been selected
+- `fallbackSelectedFileText`: To be used in combination with `value`. Add text which explains that the system will use a pre-saved file. Useful when there is no javascript or for browsers that don't support the drag and drop. To ensure accessibility, the text "Use `[value]` or upload a different file" is added by default when `value` is used.
 ## Accessibility
@@ -63,4 +71,4 @@ Because of this, you should make sure that expected requirements are validated s
 When a file is selected, the drag & drop/file selection area is disabled. When using cloud services such as Dropbox or Google Drive, the buttons to access those services will disappear as well. The user will need to click on the "remove file" button to be able to select a file again, either using the file input or the cloud services.
-11/11/20 - Removed `required` attribute from file input. It will be easier to manage when using the "pre-selected file" option. A back-end validation is required so only the HTML5 validation will be affected.
+11/11/20 - Removed `required` attribute from file input. It will be easier to manage when using the "pre-selected file" option. A back-end validation is required so only the HTML5 validation will be affected.

package/src/components/inputs/file-upload/_template.njk CHANGED Viewed

@@ -2,6 +2,8 @@
 {% from "../_message/_macro.njk" import MdsInputMessages %}
 {% from "../../icons/_macro.njk" import MdsIcon %}
 {% from "../../button/_macro.njk" import MdsButton %}
+{% from "../../modal/_macro.njk" import MdsModal %}
+{% from "../../image-cropper/_macro.njk" import MdsImageCropper %}
 {% if params.name %}
   {% set name = params.name %}
@@ -21,7 +23,7 @@
   {% set ariaDescribedBy = [validationErrorId, helpTextId] | join(' ') | trim %}
 {% endif %}
-<div class="mds-form-element mds-form-element--file{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.value %} mds-form-element--selected-file{% endif %}" id="{{ params.id }}-container" data-test="input{% if params.id %}-{{params.id}}{% endif %}">
+<div class="mds-form-element {% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}" id="{{ params.id }}-container" data-test="input{% if params.id %}-{{params.id}}{% endif %}">
   {{ MdsInputLabel({
       labelText: params.labelText,
       hideLabel: params.hideLabel,
@@ -30,7 +32,6 @@
       tooltipMessage: params.tooltipMessage,
       i18n: params.i18n
     }) }}
-  {% if params.value %}<p class="mds-file-upload__selected-file-fallback">{{ params.i18n.fallbackSelectedFileText | default('Use ' + params.value + ' or upload a different file') }}</p>{% endif %}
   {{ MdsInputMessages({
       id: params.id,
       helpTextId: helpTextId,
@@ -38,10 +39,10 @@
       validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
-  <div class="mds-file-upload">
-    <div class="mds-file-upload__input">
+  <mds-file-upload class="mds-file-upload {% if params.value %} mds-file-upload--selected-file{% endif %}" {% if params.noAutoOpenImageCropper %}no-auto-open-image-cropper{% endif %}>
+      {% if params.value %}<p class="mds-file-upload__selected-file-fallback">{{ params.i18n.fallbackSelectedFileText | default('Use ' + params.value + ' or upload a different file') }}</p>{% endif %}
       <input
-          class="mds-form-control"
+          class="mds-form-control mds-file-upload__input"
           type="file"
           name="{{ name }}"
           id="{{ params.id }}"
@@ -58,30 +59,30 @@
             aria-describedby="{{ariaDescribedBy}}"
           {% endif %}
       />
-      <div class="mds-file-upload__input-controls" aria-live="assertive" aria-atomic="true">
-        <div class="mds-file-upload__selection-state" aria-hidden="true">
-          <div class="mds-file-upload__prompt">
-            {{
-                MdsIcon({
-                  iconName: 'upload',
-                  classes: 'mds-icon--md mds-icon--before'
-                })
-              }}
-            <span>
-              {{ params.i18n.defaultFileText | default('Drag and drop') }}
-            </span>
-          </div>
-          <div class="mds-file-upload__browse-button mds-text-align-center">
-              <div class="mds-form-label">
-                <label class="mds-form-label__label" for="{{params.id}}">{{ params.i18n.buttonText | default('Choose a file') }}</label>
-              </div>
-          </div>
+    <div class="mds-file-upload__wrapper" aria-live="assertive" aria-atomic="true">
+      {# NO FILE STATE #}
+      <div class="mds-file-upload__state mds-file-upload__state--no-file" aria-hidden="true">
+        <div class="mds-file-upload__prompt">
+          {{ MdsIcon({ iconName: 'upload', classes: 'mds-icon--md mds-icon--before'}) }}
+          <span>{{ params.i18n.defaultFileText | default('Drag and drop') }}</span>
+        </div>
+        <div class="mds-form-label">
+          <label class="mds-form-label__label" for="{{params.id}}">{{ params.i18n.buttonText | default('Choose a file') }}</label>
         </div>
-        <div class="mds-file-upload__selected-state">
+      </div>
+      {# HAS FILE STATE #}
+      <div class="mds-file-upload__state mds-file-upload__state--selected">
+        <div class="mds-file-upload__preview">
+            {{ MdsIcon({ iconName: 'doc', classes: 'mds-icon--lg mds-file-upload__preview-icon'}) }}
+            <img class="mds-file-upload__preview-image" alt="" />
+          </div>
+        <div>
           <div class="mds-file-upload__file-name-container">
             {{- MdsIcon({
               iconName: 'check',
-              classes: 'mds-icon--md',
+              classes: 'mds-icon--sm',
               hasContainer: true,
               containerClasses: 'mds-icon-container--circle mds-icon-container--success mds-icon-container--before'
               })
@@ -89,20 +90,34 @@
             <span class="mds-visually-hidden">{{ params.i18n.selectedFileText | default('Selected file:') }} </span>
             <span class="mds-file-upload__file-name">{% if params.value %}{{ params.value }}{% endif %}</span>
           </div>
+          {# dont render cropper elements if opted out, mds-file-upload will handle missing elements #}
+          {% if not params.noImageCropper %}
+            {% call MdsButton({
+              classes: 'mds-button--plain mds-button--small mds-file-upload__open-modal',
+              attributes: { type: 'button', 'data-modal-id': params.id+'-cropper-modal' }
+            }) -%}
+            {{- params.i18n.cropImageButtonText | default('Crop image') -}}
+          {%- endcall %}
+          {% endif %}
           {% call MdsButton({
-            classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
-            attributes: { type: 'button' }
-          }) -%}
-          {{- params.i18n.removeButtonText | default('Remove file') -}}
-          {{-
-              MdsIcon({
-                iconName: 'cross',
-                classes: 'mds-icon--after'
-              })
-            -}}
-        {%- endcall %}
+              classes: 'mds-button--plain mds-button--small mds-file-upload__remove-button',
+              attributes: { type: 'button' }
+            }) -%}
+            {{- params.i18n.removeButtonText | default('Remove file') -}}
+            {{- MdsIcon({ iconName: 'cross', classes: 'mds-icon--after' }) -}}
+          {%- endcall %}
         </div>
       </div>
     </div>
-  </div>
+    {# dont render cropper elements if opted out, mds-file-upload will handle missing elements #}
+    {% if not params.noImageCropper %}
+    {% call MdsModal({  id: params.id+'-cropper-modal', siteContainerId: params.siteContainerId  }) -%}
+      <h2>{{params.i18n.cropperModalTitle | default('Edit image')}}</h2>
+      {{params.cropper}}
+      {{MdsImageCropper(params.cropper)}}
+    {%- endcall %}
+    {% endif %}
+  </mds-file-upload>
 </div>