@watermarkinsights/ripple 3.6.0 → 3.7.0-0

package/dist/ripple/{p-2b3f75eb.entry.js → p-9d6e4c64.entry.js}

@@ -1 +1 @@
-import{r as e,f as t,h as r,H as n,g as a}from"./p-9baa3039.js";import{g as i,d as o,b as s,f as p,i as h,c as l}from"./p-08e67884.js";const c=class{constructor(r){e(this,r),this.chartType="doughnut1",this.showLegend=!0,this.notStartedColor=!1,this.labelPosition="top",this.isTabbing=!1,this.uid=i(),this.slicesData=[],this.colors={salmon:"#ff5f4e",cyan:"#19a1a9",forest:"#088000",sleet:"#7f97ad",midnight:"#2e1b46",lavender:"#8b86ca"},this.types={doughnut0:{size:155,colors:[this.colors.forest,"#bfbfbf"],thickness:.73,padding:25,isBar:!1},doughnut1:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut2:{size:130,colors:[this.colors.cyan,this.colors.salmon,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut3:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],thickness:.5,padding:90,isBar:!1},bar1:{size:350,colors:[this.colors.forest,"#bfbfbf"],padding:0,isBar:!0},bar2:{size:400,colors:["#d4d4d4",this.colors.sleet,this.colors.cyan,this.colors.salmon],padding:0,isBar:!0},bar3:{size:300,colors:["#0d696e",this.colors.cyan,"#8e4129",this.colors.salmon],padding:0,isBar:!0},bar4:{size:400,colors:["#d4d4d4",this.colors.sleet,"#33a919"],padding:0,isBar:!0},bar5:{size:400,colors:["#d4d4d4",this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],padding:0,isBar:!0}},this.debouncedResize=o((async()=>{this.setHybridType(),await this.getData(),t(this.el)}),10),this.debouncedSliceUpdate=o((async()=>{await this.getData(),t(this.el)}),100)}get tempValueFormat(){return this.valueFormat||this.showValues||"none"}get sliceEls(){const e=this.currentChartType.includes("bar"),t=this.currentChartType.includes("doughnut");return e?Array.from(this.barEl.querySelectorAll(".bar-segment")):t?Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment")):void 0}get currentChartType(){return"hybrid"===this.chartType?this.hybridType:this.chartType}toggleTabbingOn(){this.isTabbing=!0}toggleTabbingOff(){this.isTabbing=!1}handleKeydown(e){switch(e.keyCode){case 37:case 38:e.preventDefault(),this.isTabbing=!0,this.focusPrevious();break;case 39:case 40:e.preventDefault(),this.isTabbing=!0,this.focusNext();break;case 9:this.exitChart();break;case 27:this.popoverEl.open=!1}}handleSliceClick(e,t){this.popoverEl&&!this.isTabbing&&(t.coords={x:e.clientX,y:e.clientY},this.openPopover(t))}handleSliceFocus(e,t){this.popoverEl&&this.isTabbing&&(t.coords=s(e.target),this.openPopover(t))}handleSliceKeyDown(e){if(this.popoverEl&&this.popoverEl.open&&"Enter"===e.key){const e=this.popoverEl.querySelector("button");e&&e.click()}}focusNext(){const e=l(document.activeElement),t=(this.sliceEls.indexOf(e)+1)%this.sliceEls.length;this.focusSlice(t)}focusPrevious(){if(this.sliceEls){const e=l(document.activeElement);let t=this.sliceEls.indexOf(e);-1===t?t=0:0===t?t=this.sliceEls.length-1:t-=1,this.focusSlice(t)}}focusSlice(e){this.sliceEls&&this.el&&(this.popoverEl&&(this.popoverEl.open=!1),this.el.tabIndex=-1,this.el.focusable=!1,this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),this.sliceEls[e].tabIndex=0,this.sliceEls[e].focusable=!0,this.sliceEls[e].focus(),window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),10))}exitChart(){this.sliceEls&&this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),window.setTimeout((()=>{this.el&&(this.el.tabIndex=0,this.el.focusable=!0,this.popoverEl&&(this.popoverEl.open=!1))}),100)}openPopover(e){if(this.popoverEl&&e.title&&e.text){this.popoverEl.popoverTitle=e.title,this.popoverEl.popoverText=e.text,this.popoverEl.buttonText=e.buttonText,this.popoverEl.coords=e.coords,this.popoverEl.sliceRef=e.sliceRef,window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),30);const t=o((async()=>{this.popoverEl.open=!1}),10);document.addEventListener("scroll",(()=>{t()}));const r=p(this.el);r&&r.addEventListener("scroll",(()=>{t()}))}}amountToPercent(e,t){return t?Math.round(100*e/this.total):Math.round(1e4*e/this.total)/100}amountToDegree(e){return 360*e/this.total}toFixed(e){return parseFloat((Math.floor(100*e)/100).toFixed(2))}polarToCartesian(e,t,r,n){var a=this.toFixed(e+e*t*Math.cos(Math.PI*r/180)),i=this.toFixed(e+e*t*Math.sin(Math.PI*r/180));return void 0!==n?{x1:a,y1:i,x2:this.toFixed(e+e*t*Math.cos(Math.PI*n/180)),y2:this.toFixed(e+e*t*Math.sin(Math.PI*n/180))}:{x:a,y:i}}getPathData(e,t){var r=this.amountToDegree(t)-90,n=e/this.total*360,a=r+n,i=n>180?"1 1":"0 1",o=n>180?"1 0":"0 0",s=this.chartData.size/2,p=this.chartData.thickness;360===n&&(a-=.01);var h=this.polarToCartesian(s,1,r+1.5,a),l=this.polarToCartesian(s,p,r+3,a);return`M ${h.x1}, ${h.y1} `+this.getArc(1,i,h.x2,h.y2)+` L ${l.x2}, ${l.y2} `+this.getArc(p,o,l.x1,l.y1)+" z"}getArc(e,t,r,n){var a=this.toFixed(this.chartData.size/2*e);return`A ${a}, ${a} 0 ${t} ${this.toFixed(r)}, ${this.toFixed(n)}`}setHybridType(){this.hybridType=window.innerWidth>1340?"doughnut0":"bar1"}async getData(){this.slicesData=[];let e=0;const t=this.el.querySelectorAll("wm-chart-slice");this.total=Array.from(t).reduce(((e,t)=>e+parseInt(t.getAttribute("amount")||"0")),0),t.forEach(((r,n)=>{const a=parseInt(r.getAttribute("amount")||"0"),i=this.amountToPercent(a,!0),o=this.amountToPercent(parseInt(t[0===n?t.length-1:n-1].getAttribute("amount")||"0"),!0),s=this.amountToPercent(parseInt(t[n===t.length-1?0:n+1].getAttribute("amount")||"0"),!0);let p=i<4&&(o<5||s<5);0===i&&a>0&&(s<8||o<8)&&(p=!0);const h=this.types[this.currentChartType].colors["bar5"===this.currentChartType?this.notStartedColor?n:n+1:n],l={amount:a,perc:i,legend:r.getAttribute("legend"),color:h||"#d4d4d4",offset:e,id:`${this.uid}-${n+1}`,title:r.getAttribute("popover-title"),text:r.getAttribute("popover-text"),buttonText:r.getAttribute("popover-button-text"),sliceRef:r,inSmallCluster:p};e+=a,this.slicesData.push(l)})),this.chartData=this.types[this.currentChartType]}handleResize(){"hybrid"===this.chartType&&this.debouncedResize()}async componentWillLoad(){if(!this.label)throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");this.showValues&&console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead."),"hybrid"===this.chartType&&this.setHybridType(),await this.getData()}handleSliceUpdate(){this.debouncedSliceUpdate()}renderFilter(){return r("defs",null,r("filter",{id:"wmHoverDropShadow"},r("feGaussianBlur",{stdDeviation:"3"}),r("feOffset",{result:"offsetblur"}),r("feFlood",{"flood-color":"#333"}),r("feComposite",{operator:"in",in2:"offsetblur"}),r("feMerge",null,r("feMergeNode",null),r("feMergeNode",{in:"SourceGraphic"}))))}renderDoughnut(){const e=this.chartData.size+this.chartData.padding;return r("div",{class:"chart-wrapper doughnut-wrapper"},r("svg",{width:e+"px",height:e+"px",ref:e=>this.doughnutEl=e,id:`graphic-${this.uid}`,class:"doughnut-svg"},this.renderFilter(),this.slicesData.map((e=>this.renderPath(e))),"doughnut0"===this.currentChartType?r("text",{class:"value",x:"50%",y:"50%","font-size":"1.5rem","font-weight":"500","text-anchor":"middle","dominant-baseline":"middle"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`,"text-anchor":"middle","dominant-baseline":"middle"},this.slicesData.map((e=>e.amount>0?this.renderDoughnutText(e):"")))))}renderPath(e){return r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`},r("path",{id:e.id,class:"doughnut-segment",fill:e.amount?e.color:"transparent",d:this.getPathData(e.amount,e.offset),onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)}),r("text",{class:"sr-only"},e.legend))}renderDoughnutText(e){if(!e.inSmallCluster){const t=this.amountToDegree(e.offset+e.amount/2);let{x:n,y:a}=this.polarToCartesian(this.chartData.size/2,1.4,t-90);return r("text",{class:"value",x:n+"px",y:a+"px"},`${e.perc>0?e.perc:"<1"}%`)}}renderBar(){return r("div",{class:"chart-wrapper bar-wrapper"},"bar1"===this.currentChartType?r("div",{class:"single-perc"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):"",this.drawAxis(),r("div",{class:{"inner-bar-wrapper":!0,"show-values":"percentage"===this.tempValueFormat||"amount"===this.tempValueFormat}},"bar1"!==this.currentChartType?r("div",null,this.slicesData.map(((e,t)=>e.perc>0?this.renderBarText(e,t):""))):"",r("div",{class:"bar-segments-wrapper",ref:e=>this.barEl=e},this.slicesData.map(((e,t)=>this.renderBarSegment(e,t)))),this.renderCompletionMessage()))}renderBarSegment(e,t){const n=t!==this.slicesData.length-1,a=`calc(${this.amountToPercent(e.amount,!1)}%${n?" - 2px":""})`;return r("div",{class:"bar-segment "+(0===this.amountToPercent(e.amount,!1)?"zero":""),style:{backgroundColor:e.color,width:a},onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)},r("text",{class:"sr-only"},e.legend))}renderBarText(e,t){let n;if("percentage"===this.tempValueFormat)n=e.perc+"%";else{if("amount"!==this.tempValueFormat)return;n=e.amount}return r("span",{class:"value",style:{width:`calc(${this.amountToPercent(e.amount,!1)}%\n        ${t!==this.slicesData.length-1?" - 2px":""}`}},n)}drawAxis(){if("bar3"===this.currentChartType)return r("svg",{class:"axis"},r("line",{x1:"0",x2:"100%",y1:"0",y2:"0"}),r("line",{x1:"0",x2:"0",y1:"0",y2:"-85px"}),r("line",{class:"tick",x1:"0.5",x2:"0.5",y1:"0",y2:"6"}),r("text",{x:"0.5",y:"-6"},"0%"),r("line",{class:"tick",x1:"100%",x2:"100%",y1:"0",y2:"6"}),r("text",{x:"100%",y:"-6"},"100%"))}renderCompletionMessage(){if("hybrid"===this.chartType&&this.completionMessage)return r("div",{class:"completion-message"},this.completionMessage)}renderLegend(){if(this.showLegend){const e=this.slicesData.reduce(((e,t)=>!!t.inSmallCluster||e),!1);return r("div",{class:"legend-wrapper"},r("div",{class:"legend "+(this.chartData.isBar?"--top":"--bottom"),"aria-hidden":"true"},this.total>0?this.slicesData.map((e=>{if(e.amount||e.legend)return r("div",{class:"legend-item"},r("div",{class:"legend-color",style:{"background-color":e.color}}),r("div",{class:"legend-text"},e.legend))})):""),!this.chartData.isBar&&e?r("div",{class:"cluster-warning"},h.formatMessage({id:"chart.hiddenPercentages",defaultMessage:"Percentages smaller than 5% are not shown when too close to each other."}),r("br",null),h.formatMessage({id:"chart.clickToSeeDetails",defaultMessage:"Click or use arrow keys to see details."})):"")}}render(){return r(n,{role:"application","aria-label":this.label+", "+h.formatMessage({id:"chart.interactiveChart",defaultMessage:"Interactive chart. Use arrow keys to browse elements, press Tab to exit."}),tabindex:"0"},r("div",{class:`component-wrapper ${this.currentChartType} ${this.isTabbing?"user-is-tabbing":""} ${"left"===this.labelPosition&&"bar4"===this.chartType?"left-label":""}`},r("label",{class:"label",id:`label-${this.uid}`,htmlFor:`graphic-${this.uid}`},r("span",{class:"label-text"},this.label),this.subinfo?r("span",{class:"subinfo"},this.subinfo):""),this.chartData.isBar?this.renderLegend():"",this.total>0&&this.chartData.isBar?this.renderBar():this.renderDoughnut(),this.chartData.isBar?"":this.renderLegend(),r("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":"",ref:e=>this.popoverEl=e}),"doughnut0"===this.hybridType?this.renderCompletionMessage():""))}get el(){return a(this)}};c.style=".component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .doughnut-svg,.component-wrapper .inner-bar-wrapper{overflow:visible}.component-wrapper .bar-wrapper{flex-grow:1;width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:flex}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}.component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}.component-wrapper .value{display:inline-block;text-align:center}.component-wrapper .value:not(:last-of-type){margin-right:2px}.component-wrapper path:active,.component-wrapper path:hover,.component-wrapper path:focus,.component-wrapper .bar-segment:active,.component-wrapper .bar-segment:hover,.component-wrapper .bar-segment:focus{outline:none}.component-wrapper path:active.bar-segment,.component-wrapper path:hover.bar-segment,.component-wrapper path:focus.bar-segment,.component-wrapper .bar-segment:active.bar-segment,.component-wrapper .bar-segment:hover.bar-segment,.component-wrapper .bar-segment:focus.bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}.component-wrapper path:active.doughnut-segment,.component-wrapper path:hover.doughnut-segment,.component-wrapper path:focus.doughnut-segment,.component-wrapper .bar-segment:active.doughnut-segment,.component-wrapper .bar-segment:hover.doughnut-segment,.component-wrapper .bar-segment:focus.doughnut-segment{filter:url(#wmHoverDropShadow)}.component-wrapper path::-moz-focus-inner,.component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}.component-wrapper.doughnut1 label,.component-wrapper.doughnut1 .label-text,.component-wrapper.doughnut2 label,.component-wrapper.doughnut2 .label-text,.component-wrapper.doughnut3 label,.component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.component-wrapper.doughnut0{align-items:center}.component-wrapper.doughnut0 label{text-align:center;width:100%;padding-bottom:1.5rem}.component-wrapper.doughnut0 label .subinfo{position:absolute}.component-wrapper.doughnut0 .legend{display:flex}.component-wrapper.doughnut0 .completion-message{padding-top:0.625rem}.component-wrapper.bar1{padding:1.25rem;align-items:flex-start}.component-wrapper.bar1 label{display:flex;flex-direction:column}.component-wrapper.bar1 label .subinfo{position:initial}.component-wrapper.bar1 .legend{display:none}.component-wrapper.bar1 .chart-wrapper{display:flex}.component-wrapper.bar1 .chart-wrapper .single-perc{width:4rem;flex:none;display:flex;height:30px;align-items:center}.component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper{flex:1}.component-wrapper.bar1 .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){.component-wrapper.bar1{flex-direction:row}.component-wrapper.bar1 label{display:flex;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;flex:none}.component-wrapper.bar1 .bar-wrapper{flex-direction:row-reverse}.component-wrapper.bar1 .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;justify-content:center}}.component-wrapper.bar2,.component-wrapper.bar3,.component-wrapper.bar4,.component-wrapper.bar5{align-items:flex-start}.component-wrapper.bar2 .inner-bar-wrapper,.component-wrapper.bar4 .inner-bar-wrapper,.component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}.component-wrapper.bar2 .inner-bar-wrapper.show-values,.component-wrapper.bar4 .inner-bar-wrapper.show-values,.component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}.component-wrapper.bar3 .legend{padding-bottom:1.25rem}.component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}.component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;transform:translateY(90px)}.component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}.component-wrapper.bar3 .chart-wrapper .axis text{transform:translate(4px, 24px);text-anchor:middle}.component-wrapper.left-label{flex-direction:row}.component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;flex:none;align-self:flex-end;min-height:30px;display:flex;align-items:center}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";export{c as wm_chart}
+import{r as e,f as t,h as r,H as n,g as a}from"./p-9baa3039.js";import{g as i,d as o,b as s,f as p,i as h,c as l}from"./p-b5edcf38.js";const c=class{constructor(r){e(this,r),this.chartType="doughnut1",this.showLegend=!0,this.notStartedColor=!1,this.labelPosition="top",this.isTabbing=!1,this.uid=i(),this.slicesData=[],this.colors={salmon:"#ff5f4e",cyan:"#19a1a9",forest:"#088000",sleet:"#7f97ad",midnight:"#2e1b46",lavender:"#8b86ca"},this.types={doughnut0:{size:155,colors:[this.colors.forest,"#bfbfbf"],thickness:.73,padding:25,isBar:!1},doughnut1:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut2:{size:130,colors:[this.colors.cyan,this.colors.salmon,"#d4d4d4"],thickness:.5,padding:90,isBar:!1},doughnut3:{size:130,colors:[this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],thickness:.5,padding:90,isBar:!1},bar1:{size:350,colors:[this.colors.forest,"#bfbfbf"],padding:0,isBar:!0},bar2:{size:400,colors:["#d4d4d4",this.colors.sleet,this.colors.cyan,this.colors.salmon],padding:0,isBar:!0},bar3:{size:300,colors:["#0d696e",this.colors.cyan,"#8e4129",this.colors.salmon],padding:0,isBar:!0},bar4:{size:400,colors:["#d4d4d4",this.colors.sleet,"#33a919"],padding:0,isBar:!0},bar5:{size:400,colors:["#d4d4d4",this.colors.lavender,this.colors.midnight,"#919834","#c177cf","#c16e00","#029af2","#2a6993"],padding:0,isBar:!0}},this.debouncedResize=o((async()=>{this.setHybridType(),await this.getData(),t(this.el)}),10),this.debouncedSliceUpdate=o((async()=>{await this.getData(),t(this.el)}),100)}get tempValueFormat(){return this.valueFormat||this.showValues||"none"}get sliceEls(){const e=this.currentChartType.includes("bar"),t=this.currentChartType.includes("doughnut");return e?Array.from(this.barEl.querySelectorAll(".bar-segment")):t?Array.from(this.doughnutEl.querySelectorAll(".doughnut-segment")):void 0}get currentChartType(){return"hybrid"===this.chartType?this.hybridType:this.chartType}toggleTabbingOn(){this.isTabbing=!0}toggleTabbingOff(){this.isTabbing=!1}handleKeydown(e){switch(e.keyCode){case 37:case 38:e.preventDefault(),this.isTabbing=!0,this.focusPrevious();break;case 39:case 40:e.preventDefault(),this.isTabbing=!0,this.focusNext();break;case 9:this.exitChart();break;case 27:this.popoverEl.open=!1}}handleSliceClick(e,t){this.popoverEl&&!this.isTabbing&&(t.coords={x:e.clientX,y:e.clientY},this.openPopover(t))}handleSliceFocus(e,t){this.popoverEl&&this.isTabbing&&(t.coords=s(e.target),this.openPopover(t))}handleSliceKeyDown(e){if(this.popoverEl&&this.popoverEl.open&&"Enter"===e.key){const e=this.popoverEl.querySelector("button");e&&e.click()}}focusNext(){const e=l(document.activeElement),t=(this.sliceEls.indexOf(e)+1)%this.sliceEls.length;this.focusSlice(t)}focusPrevious(){if(this.sliceEls){const e=l(document.activeElement);let t=this.sliceEls.indexOf(e);-1===t?t=0:0===t?t=this.sliceEls.length-1:t-=1,this.focusSlice(t)}}focusSlice(e){this.sliceEls&&this.el&&(this.popoverEl&&(this.popoverEl.open=!1),this.el.tabIndex=-1,this.el.focusable=!1,this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),this.sliceEls[e].tabIndex=0,this.sliceEls[e].focusable=!0,this.sliceEls[e].focus(),window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),10))}exitChart(){this.sliceEls&&this.sliceEls.map((e=>{e.tabIndex=-1,e.focusable=!1})),window.setTimeout((()=>{this.el&&(this.el.tabIndex=0,this.el.focusable=!0,this.popoverEl&&(this.popoverEl.open=!1))}),100)}openPopover(e){if(this.popoverEl&&e.title&&e.text){this.popoverEl.popoverTitle=e.title,this.popoverEl.popoverText=e.text,this.popoverEl.buttonText=e.buttonText,this.popoverEl.coords=e.coords,this.popoverEl.sliceRef=e.sliceRef,window.setTimeout((()=>{this.popoverEl&&(this.popoverEl.open=!0)}),30);const t=o((async()=>{this.popoverEl.open=!1}),10);document.addEventListener("scroll",(()=>{t()}));const r=p(this.el);r&&r.addEventListener("scroll",(()=>{t()}))}}amountToPercent(e,t){return t?Math.round(100*e/this.total):Math.round(1e4*e/this.total)/100}amountToDegree(e){return 360*e/this.total}toFixed(e){return parseFloat((Math.floor(100*e)/100).toFixed(2))}polarToCartesian(e,t,r,n){var a=this.toFixed(e+e*t*Math.cos(Math.PI*r/180)),i=this.toFixed(e+e*t*Math.sin(Math.PI*r/180));return void 0!==n?{x1:a,y1:i,x2:this.toFixed(e+e*t*Math.cos(Math.PI*n/180)),y2:this.toFixed(e+e*t*Math.sin(Math.PI*n/180))}:{x:a,y:i}}getPathData(e,t){var r=this.amountToDegree(t)-90,n=e/this.total*360,a=r+n,i=n>180?"1 1":"0 1",o=n>180?"1 0":"0 0",s=this.chartData.size/2,p=this.chartData.thickness;360===n&&(a-=.01);var h=this.polarToCartesian(s,1,r+1.5,a),l=this.polarToCartesian(s,p,r+3,a);return`M ${h.x1}, ${h.y1} `+this.getArc(1,i,h.x2,h.y2)+` L ${l.x2}, ${l.y2} `+this.getArc(p,o,l.x1,l.y1)+" z"}getArc(e,t,r,n){var a=this.toFixed(this.chartData.size/2*e);return`A ${a}, ${a} 0 ${t} ${this.toFixed(r)}, ${this.toFixed(n)}`}setHybridType(){this.hybridType=window.innerWidth>1340?"doughnut0":"bar1"}async getData(){this.slicesData=[];let e=0;const t=this.el.querySelectorAll("wm-chart-slice");this.total=Array.from(t).reduce(((e,t)=>e+parseInt(t.getAttribute("amount")||"0")),0),t.forEach(((r,n)=>{const a=parseInt(r.getAttribute("amount")||"0"),i=this.amountToPercent(a,!0),o=this.amountToPercent(parseInt(t[0===n?t.length-1:n-1].getAttribute("amount")||"0"),!0),s=this.amountToPercent(parseInt(t[n===t.length-1?0:n+1].getAttribute("amount")||"0"),!0);let p=i<4&&(o<5||s<5);0===i&&a>0&&(s<8||o<8)&&(p=!0);const h=this.types[this.currentChartType].colors["bar5"===this.currentChartType?this.notStartedColor?n:n+1:n],l={amount:a,perc:i,legend:r.getAttribute("legend"),color:h||"#d4d4d4",offset:e,id:`${this.uid}-${n+1}`,title:r.getAttribute("popover-title"),text:r.getAttribute("popover-text"),buttonText:r.getAttribute("popover-button-text"),sliceRef:r,inSmallCluster:p};e+=a,this.slicesData.push(l)})),this.chartData=this.types[this.currentChartType]}handleResize(){"hybrid"===this.chartType&&this.debouncedResize()}async componentWillLoad(){if(!this.label)throw new Error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");this.showValues&&console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead."),"hybrid"===this.chartType&&this.setHybridType(),await this.getData()}handleSliceUpdate(){this.debouncedSliceUpdate()}renderFilter(){return r("defs",null,r("filter",{id:"wmHoverDropShadow"},r("feGaussianBlur",{stdDeviation:"3"}),r("feOffset",{result:"offsetblur"}),r("feFlood",{"flood-color":"#333"}),r("feComposite",{operator:"in",in2:"offsetblur"}),r("feMerge",null,r("feMergeNode",null),r("feMergeNode",{in:"SourceGraphic"}))))}renderDoughnut(){const e=this.chartData.size+this.chartData.padding;return r("div",{class:"chart-wrapper doughnut-wrapper"},r("svg",{width:e+"px",height:e+"px",ref:e=>this.doughnutEl=e,id:`graphic-${this.uid}`,class:"doughnut-svg"},this.renderFilter(),this.slicesData.map((e=>this.renderPath(e))),"doughnut0"===this.currentChartType?r("text",{class:"value",x:"50%",y:"50%","font-size":"1.5rem","font-weight":"500","text-anchor":"middle","dominant-baseline":"middle"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`,"text-anchor":"middle","dominant-baseline":"middle"},this.slicesData.map((e=>e.amount>0?this.renderDoughnutText(e):"")))))}renderPath(e){return r("g",{transform:`translate(${this.chartData.padding/2}, ${this.chartData.padding/2})`},r("path",{id:e.id,class:"doughnut-segment",fill:e.amount?e.color:"transparent",d:this.getPathData(e.amount,e.offset),onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)}),r("text",{class:"sr-only"},e.legend))}renderDoughnutText(e){if(!e.inSmallCluster){const t=this.amountToDegree(e.offset+e.amount/2);let{x:n,y:a}=this.polarToCartesian(this.chartData.size/2,1.4,t-90);return r("text",{class:"value",x:n+"px",y:a+"px"},`${e.perc>0?e.perc:"<1"}%`)}}renderBar(){return r("div",{class:"chart-wrapper bar-wrapper"},"bar1"===this.currentChartType?r("div",{class:"single-perc"},this.amountToPercent(this.slicesData[0].amount,!0)+"%"):"",this.drawAxis(),r("div",{class:{"inner-bar-wrapper":!0,"show-values":"percentage"===this.tempValueFormat||"amount"===this.tempValueFormat}},"bar1"!==this.currentChartType?r("div",null,this.slicesData.map(((e,t)=>e.perc>0?this.renderBarText(e,t):""))):"",r("div",{class:"bar-segments-wrapper",ref:e=>this.barEl=e},this.slicesData.map(((e,t)=>this.renderBarSegment(e,t)))),this.renderCompletionMessage()))}renderBarSegment(e,t){const n=t!==this.slicesData.length-1,a=`calc(${this.amountToPercent(e.amount,!1)}%${n?" - 2px":""})`;return r("div",{class:"bar-segment "+(0===this.amountToPercent(e.amount,!1)?"zero":""),style:{backgroundColor:e.color,width:a},onClick:t=>this.handleSliceClick(t,e),onFocus:t=>this.handleSliceFocus(t,e),onKeyDown:e=>this.handleSliceKeyDown(e)},r("text",{class:"sr-only"},e.legend))}renderBarText(e,t){let n;if("percentage"===this.tempValueFormat)n=e.perc+"%";else{if("amount"!==this.tempValueFormat)return;n=e.amount}return r("span",{class:"value",style:{width:`calc(${this.amountToPercent(e.amount,!1)}%\n        ${t!==this.slicesData.length-1?" - 2px":""}`}},n)}drawAxis(){if("bar3"===this.currentChartType)return r("svg",{class:"axis"},r("line",{x1:"0",x2:"100%",y1:"0",y2:"0"}),r("line",{x1:"0",x2:"0",y1:"0",y2:"-85px"}),r("line",{class:"tick",x1:"0.5",x2:"0.5",y1:"0",y2:"6"}),r("text",{x:"0.5",y:"-6"},"0%"),r("line",{class:"tick",x1:"100%",x2:"100%",y1:"0",y2:"6"}),r("text",{x:"100%",y:"-6"},"100%"))}renderCompletionMessage(){if("hybrid"===this.chartType&&this.completionMessage)return r("div",{class:"completion-message"},this.completionMessage)}renderLegend(){if(this.showLegend){const e=this.slicesData.reduce(((e,t)=>!!t.inSmallCluster||e),!1);return r("div",{class:"legend-wrapper"},r("div",{class:"legend "+(this.chartData.isBar?"--top":"--bottom"),"aria-hidden":"true"},this.total>0?this.slicesData.map((e=>{if(e.amount||e.legend)return r("div",{class:"legend-item"},r("div",{class:"legend-color",style:{"background-color":e.color}}),r("div",{class:"legend-text"},e.legend))})):""),!this.chartData.isBar&&e?r("div",{class:"cluster-warning"},h.formatMessage({id:"chart.hiddenPercentages",defaultMessage:"Percentages smaller than 5% are not shown when too close to each other."}),r("br",null),h.formatMessage({id:"chart.clickToSeeDetails",defaultMessage:"Click or use arrow keys to see details."})):"")}}render(){return r(n,{role:"application","aria-label":this.label+", "+h.formatMessage({id:"chart.interactiveChart",defaultMessage:"Interactive chart. Use arrow keys to browse elements, press Tab to exit."}),tabindex:"0"},r("div",{class:`component-wrapper ${this.currentChartType} ${this.isTabbing?"user-is-tabbing":""} ${"left"===this.labelPosition&&"bar4"===this.chartType?"left-label":""}`},r("label",{class:"label",id:`label-${this.uid}`,htmlFor:`graphic-${this.uid}`},r("span",{class:"label-text"},this.label),this.subinfo?r("span",{class:"subinfo"},this.subinfo):""),this.chartData.isBar?this.renderLegend():"",this.total>0&&this.chartData.isBar?this.renderBar():this.renderDoughnut(),this.chartData.isBar?"":this.renderLegend(),r("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":"",ref:e=>this.popoverEl=e}),"doughnut0"===this.hybridType?this.renderCompletionMessage():""))}get el(){return a(this)}};c.style=".component-wrapper{display:flex;flex-direction:column;align-items:center;font-size:0.875rem;position:relative;}.component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}.component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}.component-wrapper .legend-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.component-wrapper .legend-wrapper .legend{display:flex;align-items:center;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;box-sizing:border-box}.component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}.component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}.component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}.component-wrapper .legend-wrapper .legend .legend-item{position:relative}.component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}.component-wrapper .legend-wrapper .legend .legend-text{padding-left:1rem;line-height:1}.component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}.component-wrapper .legend-wrapper .cluster-warning{font-size:0.75rem;font-style:italic;max-width:100%}.component-wrapper .doughnut-svg,.component-wrapper .inner-bar-wrapper{overflow:visible}.component-wrapper .bar-wrapper{flex-grow:1;width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper{width:100%}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper{display:flex}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment{height:30px;cursor:pointer}.component-wrapper .bar-wrapper .inner-bar-wrapper .bar-segments-wrapper .bar-segment:not(.zero):not(:last-of-type){margin-right:2px}.component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}.component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}.component-wrapper .value{display:inline-block;text-align:center}.component-wrapper .value:not(:last-of-type){margin-right:2px}.component-wrapper path:active,.component-wrapper path:hover,.component-wrapper path:focus,.component-wrapper .bar-segment:active,.component-wrapper .bar-segment:hover,.component-wrapper .bar-segment:focus{outline:none}.component-wrapper path:active.bar-segment,.component-wrapper path:hover.bar-segment,.component-wrapper path:focus.bar-segment,.component-wrapper .bar-segment:active.bar-segment,.component-wrapper .bar-segment:hover.bar-segment,.component-wrapper .bar-segment:focus.bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}.component-wrapper path:active.doughnut-segment,.component-wrapper path:hover.doughnut-segment,.component-wrapper path:focus.doughnut-segment,.component-wrapper .bar-segment:active.doughnut-segment,.component-wrapper .bar-segment:hover.doughnut-segment,.component-wrapper .bar-segment:focus.doughnut-segment{filter:url(#wmHoverDropShadow)}.component-wrapper path::-moz-focus-inner,.component-wrapper .bar-segment::-moz-focus-inner{border:0;outline:none}.component-wrapper.doughnut1 label,.component-wrapper.doughnut1 .label-text,.component-wrapper.doughnut2 label,.component-wrapper.doughnut2 .label-text,.component-wrapper.doughnut3 label,.component-wrapper.doughnut3 .label-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.component-wrapper.doughnut0{align-items:center}.component-wrapper.doughnut0 label{text-align:center;width:100%;padding-bottom:1.5rem}.component-wrapper.doughnut0 label .subinfo{position:absolute}.component-wrapper.doughnut0 .legend{display:flex}.component-wrapper.doughnut0 .completion-message{padding-top:0.625rem}.component-wrapper.bar1{padding:1.25rem;align-items:flex-start}.component-wrapper.bar1 label{display:flex;flex-direction:column}.component-wrapper.bar1 label .subinfo{position:initial}.component-wrapper.bar1 .legend{display:none}.component-wrapper.bar1 .chart-wrapper{display:flex}.component-wrapper.bar1 .chart-wrapper .single-perc{width:4rem;flex:none;display:flex;height:30px;align-items:center}.component-wrapper.bar1 .chart-wrapper .inner-bar-wrapper{flex:1}.component-wrapper.bar1 .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){.component-wrapper.bar1{flex-direction:row}.component-wrapper.bar1 label{display:flex;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;flex:none}.component-wrapper.bar1 .bar-wrapper{flex-direction:row-reverse}.component-wrapper.bar1 .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;justify-content:center}}.component-wrapper.bar2,.component-wrapper.bar3,.component-wrapper.bar4,.component-wrapper.bar5{align-items:flex-start}.component-wrapper.bar2 .inner-bar-wrapper,.component-wrapper.bar4 .inner-bar-wrapper,.component-wrapper.bar5 .inner-bar-wrapper{height:30px;margin-bottom:0}.component-wrapper.bar2 .inner-bar-wrapper.show-values,.component-wrapper.bar4 .inner-bar-wrapper.show-values,.component-wrapper.bar5 .inner-bar-wrapper.show-values{height:60px;margin-top:0}.component-wrapper.bar3 .legend{padding-bottom:1.25rem}.component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}.component-wrapper.bar3 .chart-wrapper .inner-bar-wrapper text{fill:#4a4a4a}.component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;transform:translateY(90px)}.component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}.component-wrapper.bar3 .chart-wrapper .axis text{transform:translate(4px, 24px);text-anchor:middle}.component-wrapper.left-label{flex-direction:row}.component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;flex:none;align-self:flex-end;min-height:30px;display:flex;align-items:center}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";export{c as wm_chart}

package/dist/ripple/{p-97884327.entry.js → p-ad73d523.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,h as o,H as i,g as s}from"./p-9baa3039.js";import{g as a,j as n,c as d}from"./p-08e67884.js";const m=class{constructor(o){t(this,o),this.focusLastElement=e(this,"focusLastElement",7),this.focusFirstElement=e(this,"focusFirstElement",7),this.wmModalCloseTriggered=e(this,"wmModalCloseTriggered",7),this.wmCloseTriggered=e(this,"wmCloseTriggered",7),this.wmModalPrimaryTriggered=e(this,"wmModalPrimaryTriggered",7),this.wmPrimaryTriggered=e(this,"wmPrimaryTriggered",7),this.wmModalSecondaryTriggered=e(this,"wmModalSecondaryTriggered",7),this.wmSecondaryTriggered=e(this,"wmSecondaryTriggered",7),this.open=!1,this.isOpen=!1,this.elementToFocus="",this.modalType=null,this.isTypeDialog=null,this.bodyFocusListener=()=>this.redirectFocusOnBody()}get tempOpen(){return this.open||this.isOpen}get tempModalType(){return this.modalType?this.modalType:this.isTypeDialog?"dialog":"modal"}toggleModal(){this.tempOpen?this.showModal():this.hideModal()}showModal(){this.setElToFocusOnClose(),document.body.style.overflow="hidden",document.body.tabIndex=0,document.body.removeEventListener("focus",this.bodyFocusListener,!0),document.body.addEventListener("focus",this.bodyFocusListener,!0),window.requestAnimationFrame((()=>{this.setElToFocusOnOpen(),window.requestAnimationFrame((()=>this.focusOnOpen.focus()))}))}handleClick(t){this.tempOpen&&t.target===this.overlayEl&&this.focusOnOpen.focus()}closeModalOnEscape(t){"Escape"===t.key&&(this.wmModalCloseTriggered.emit(),this.wmCloseTriggered.emit(),this.open=!1)}hideModal(){document.body.style.overflow="visible",document.body.tabIndex=-1,document.body.removeEventListener("focus",this.bodyFocusListener,!0),window.requestAnimationFrame((()=>this.focusOnClose.focus()))}componentWillLoad(){if(this.isOpen&&console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead."),this.isTypeDialog&&console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead."),("primary"===this.elementToFocus||"secondary"===this.elementToFocus)&&!this.el.id)throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");this.uid=this.el.id?this.el.id:a()}componentDidLoad(){this.tempOpen&&this.showModal()}async emitCloseEvent(){this.wmModalCloseTriggered.emit(),this.wmCloseTriggered.emit()}async emitPrimaryEvent(){this.wmModalPrimaryTriggered.emit(),this.wmPrimaryTriggered.emit()}async emitSecondaryEvent(){this.wmModalSecondaryTriggered.emit(),this.wmSecondaryTriggered.emit()}setElToFocusOnOpen(){const t=n(this.el.querySelector(`#wm-modal-close-${this.uid}`));if(this.elementToFocus){"primary"!==this.elementToFocus&&"secondary"!==this.elementToFocus||(this.setAriaDescribedbyOnModal(),this.elementToFocus=`wm-${this.elementToFocus}-${this.uid}`);const e=this.el.querySelector(`#${this.elementToFocus}`);if(e){const o=n(e);o?this.focusOnOpen=o:(console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens."),this.focusOnOpen=t)}else console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens."),this.focusOnOpen=t}else this.focusOnOpen=t}setAriaDescribedbyOnModal(){document.getElementById(`content-${this.uid}`)?this.el.setAttribute("aria-describedby",`wm-modal-heading-text-${this.uid} content-${this.uid}`):console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.")}setElToFocusOnClose(){const t=document.activeElement;this.focusOnClose="WM-MENUITEM"===t.tagName?t.parentElement:d(t)}redirectFocusOnBody(){"BODY"===document.activeElement.tagName&&(this.setElToFocusOnOpen(),this.focusOnOpen.focus())}render(){return o(i,{class:`${this.tempOpen?"":"hide "}${"wm-"+this.tempModalType}`,role:"dialog","aria-describedby":`wm-modal-heading-text-${this.uid}`,"aria-modal":"true",tabindex:this.tempOpen?0:null,onFocus:()=>{this.focusLastElement.emit()}},o("div",{class:"overlay",ref:t=>this.overlayEl=t}),o("div",{class:"sr-only",tabIndex:0,onFocus:()=>{this.focusFirstElement.emit()}}))}get el(){return s(this)}static get watchers(){return{open:["toggleModal"],isOpen:["toggleModal"]}}};m.style="wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";export{m as wm_modal}
+import{r as t,c as e,h as o,H as i,g as s}from"./p-9baa3039.js";import{g as a,j as n,c as d}from"./p-b5edcf38.js";const m=class{constructor(o){t(this,o),this.focusLastElement=e(this,"focusLastElement",7),this.focusFirstElement=e(this,"focusFirstElement",7),this.wmModalCloseTriggered=e(this,"wmModalCloseTriggered",7),this.wmCloseTriggered=e(this,"wmCloseTriggered",7),this.wmModalPrimaryTriggered=e(this,"wmModalPrimaryTriggered",7),this.wmPrimaryTriggered=e(this,"wmPrimaryTriggered",7),this.wmModalSecondaryTriggered=e(this,"wmModalSecondaryTriggered",7),this.wmSecondaryTriggered=e(this,"wmSecondaryTriggered",7),this.open=!1,this.isOpen=!1,this.elementToFocus="",this.modalType=null,this.isTypeDialog=null,this.bodyFocusListener=()=>this.redirectFocusOnBody()}get tempOpen(){return this.open||this.isOpen}get tempModalType(){return this.modalType?this.modalType:this.isTypeDialog?"dialog":"modal"}toggleModal(){this.tempOpen?this.showModal():this.hideModal()}showModal(){this.setElToFocusOnClose(),document.body.style.overflow="hidden",document.body.tabIndex=0,document.body.removeEventListener("focus",this.bodyFocusListener,!0),document.body.addEventListener("focus",this.bodyFocusListener,!0),window.requestAnimationFrame((()=>{this.setElToFocusOnOpen(),window.requestAnimationFrame((()=>this.focusOnOpen.focus()))}))}handleClick(t){this.tempOpen&&t.target===this.overlayEl&&this.focusOnOpen.focus()}closeModalOnEscape(t){"Escape"===t.key&&(this.wmModalCloseTriggered.emit(),this.wmCloseTriggered.emit(),this.open=!1)}hideModal(){document.body.style.overflow="visible",document.body.tabIndex=-1,document.body.removeEventListener("focus",this.bodyFocusListener,!0),window.requestAnimationFrame((()=>this.focusOnClose.focus()))}componentWillLoad(){if(this.isOpen&&console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead."),this.isTypeDialog&&console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead."),("primary"===this.elementToFocus||"secondary"===this.elementToFocus)&&!this.el.id)throw new Error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");this.uid=this.el.id?this.el.id:a()}componentDidLoad(){this.tempOpen&&this.showModal()}async emitCloseEvent(){this.wmModalCloseTriggered.emit(),this.wmCloseTriggered.emit()}async emitPrimaryEvent(){this.wmModalPrimaryTriggered.emit(),this.wmPrimaryTriggered.emit()}async emitSecondaryEvent(){this.wmModalSecondaryTriggered.emit(),this.wmSecondaryTriggered.emit()}setElToFocusOnOpen(){const t=n(this.el.querySelector(`#wm-modal-close-${this.uid}`));if(this.elementToFocus){"primary"!==this.elementToFocus&&"secondary"!==this.elementToFocus||(this.setAriaDescribedbyOnModal(),this.elementToFocus=`wm-${this.elementToFocus}-${this.uid}`);const e=this.el.querySelector(`#${this.elementToFocus}`);if(e){const o=n(e);o?this.focusOnOpen=o:(console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens."),this.focusOnOpen=t)}else console.warn("Ripple Component Library: The modal component couldn't find an element matching the value you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens."),this.focusOnOpen=t}else this.focusOnOpen=t}setAriaDescribedbyOnModal(){document.getElementById(`content-${this.uid}`)?this.el.setAttribute("aria-describedby",`wm-modal-heading-text-${this.uid} content-${this.uid}`):console.warn("Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.")}setElToFocusOnClose(){const t=document.activeElement;this.focusOnClose="WM-MENUITEM"===t.tagName?t.parentElement:d(t)}redirectFocusOnBody(){"BODY"===document.activeElement.tagName&&(this.setElToFocusOnOpen(),this.focusOnOpen.focus())}render(){return o(i,{class:`${this.tempOpen?"":"hide "}${"wm-"+this.tempModalType}`,role:"dialog","aria-describedby":`wm-modal-heading-text-${this.uid}`,"aria-modal":"true",tabindex:this.tempOpen?0:null,onFocus:()=>{this.focusLastElement.emit()}},o("div",{class:"overlay",ref:t=>this.overlayEl=t}),o("div",{class:"sr-only",tabIndex:0,onFocus:()=>{this.focusFirstElement.emit()}}))}get el(){return s(this)}static get watchers(){return{open:["toggleModal"],isOpen:["toggleModal"]}}};m.style="wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";export{m as wm_modal}