@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/ripple/{p-e252738e.entry.js → p-78a7278d.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,H as s,g as n,f as o}from"./p-1c23de4a.js";import{i as a,w as r}from"./p-9fd3badc.js";const l=":host{z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);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}}";const h=class{constructor(e){t(this,e);this.wmNavigationStateChanged=i(this,"wmNavigationStateChanged",7);this.mainNavigationMessage=a.formatMessage({id:"navigation.mainNavigation",defaultMessage:"Main",description:"Label describing the site navigation, for screen reader users"});this.openTooltipMessage=a.formatMessage({id:"global.openVerb",defaultMessage:"Open",description:"For a button, to open a user interface element"});this.closeTooltipMessage=a.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.throttledRerender=r((()=>o(this.el)),50);this.open=false;this.isTabbing=false}get isCollapsible(){return window.innerWidth<1024}get ariaExpanded(){return this.isCollapsible?this.open.toString():undefined}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}closeOnEscape(t){if(t.key==="Escape"){this.open=false}}handleWindowResize(){this.throttledRerender()}handleHamburgerClicked(){this.open=!this.open}handleClickOnItem(){this.open=false}handleStateChange(){if(this.isCollapsible){this.wmNavigationStateChanged.emit();this.open?this.expand():this.collapse()}}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=()=>{const t=this.open?this.el.shadowRoot.querySelector(".toggle"):document.querySelector("wm-navigation-hamburger");const i=this.el.querySelector("wm-navigation-item");this.isCollapsible?t.focus():i.focus()};if(this.isCollapsible&&this.open){this.wmNavigationStateChanged.emit();this.expand()}}redirectFocusFromBody(t){if(document.activeElement.tagName==="BODY"&&!t.relatedTarget){this.el.focus()}}expand(){document.body.tabIndex=0;document.body.addEventListener("focus",this.redirectFocusFromBody.bind(this),true);setTimeout((()=>this.toggleEl.focus()),250)}collapse(){document.body.tabIndex=-1;document.body.removeEventListener("focus",this.redirectFocusFromBody.bind(this));const t=document.querySelector("wm-navigation-hamburger");if(t)t.focus()}focusLastItem(){const t=this.el.querySelectorAll("wm-navigation-item");const i=Array.from(t).pop();i.focus()}renderOverlay(){return e("div",{class:"overlay",onClick:()=>{this.open=false}})}render(){return e(s,{role:"navigation","aria-expanded":this.ariaExpanded,"aria-label":this.mainNavigationMessage},this.open?this.renderOverlay():"",this.isCollapsible&&e("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:()=>this.focusLastItem()}),e("div",{class:"tray"},e("div",{class:"toggle-wrapper"},e("wm-button",{ref:t=>this.toggleEl=t,class:`toggle ${this.isTabbing?"user-is-tabbing":""}`,"button-type":"navigational",icon:this.open?"f156":"f35c","icon-size":"2rem",tooltip:this.open?this.closeTooltipMessage:this.openTooltipMessage,"tooltip-position":"left",tabIndex:this.open?undefined:-1,onClick:()=>{this.open=!this.open}})),e("ul",{class:"navlist"},e("slot",null))),this.isCollapsible&&e("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:()=>this.toggleEl.focus()}))}static get delegatesFocus(){return true}get el(){return n(this)}static get watchers(){return{open:["handleStateChange"]}}};h.style=l;const c='button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-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}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f35c";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}';const d=class{constructor(e){t(this,e);this.wmNavigationHamburgerClicked=i(this,"wmNavigationHamburgerClicked",7);this.showNavMessage=a.formatMessage({id:"navigation.showNavigation",defaultMessage:"Show navigation",description:"For user interface element opening a navigation menu"});this.navId=undefined;this.tooltipVisible=false;this.isTabbing=false;this.open=false}get tooltipEl(){return document.getElementById("wm-tooltip")}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleNavigationStateChanged(t){this.open=t.target.open}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(!this.navId){console.error("wm-navigation-hamburger: nav-id is a required prop")}}showTooltip(){const t=this.showNavMessage;this.tooltipEl.textContent=t;this.tooltipEl.style.setProperty("--wmTooltipTop","1.125rem");this.tooltipEl.style.setProperty("--wmTooltipLeft","2.75rem");this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";const i=t.match(/^[^\s]+$/);if(i){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}setTimeout((()=>{this.tooltipVisible=true}),500)}hideTooltip(){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false}showTooltipForKeyboardUsers(){if(this.isTabbing){this.showTooltip()}}handleClick(){this.hideTooltip();this.wmNavigationHamburgerClicked.emit()}render(){return e(s,{class:`hamburger ${this.open?"nav-open":"nav-closed"}`},e("button",{class:this.isTabbing?"user-is-tabbing":undefined,"aria-expanded":this.open,"aria-controls":this.navId,"aria-label":this.showNavMessage,onMouseEnter:()=>this.showTooltip(),onMouseLeave:()=>this.hideTooltip(),onFocus:()=>this.showTooltipForKeyboardUsers(),onBlur:()=>this.hideTooltip(),onClick:()=>this.handleClick()},e("span",{class:"icon"})))}static get delegatesFocus(){return true}get el(){return n(this)}};d.style=c;const g='.link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:"";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}';const u=class{constructor(e){t(this,e);this.wmNavigationItemClicked=i(this,"wmNavigationItemClicked",7);this.href=undefined;this.text=undefined;this.active=undefined;this.isTabbing=false}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}}render(){return e(s,{role:"listitem"},e("a",{class:`link ${this.active?"active":""} ${this.isTabbing?"user-is-tabbing":""}`,href:this.href,onClick:()=>this.wmNavigationItemClicked.emit()},e("div",{class:"icon","aria-hidden":"true"},e("slot",null)),e("div",{class:"text"},this.text)))}static get delegatesFocus(){return true}get el(){return n(this)}};u.style=g;export{h as wm_navigation,d as wm_navigation_hamburger,u as wm_navigation_item};
-//# sourceMappingURL=p-e252738e.entry.js.map
+import{r as t,c as i,h as e,H as s,g as n,f as o}from"./p-1c23de4a.js";import{i as a,w as r}from"./p-edfba0e1.js";const l=":host{z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);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}}";const h=class{constructor(e){t(this,e);this.wmNavigationStateChanged=i(this,"wmNavigationStateChanged",7);this.mainNavigationMessage=a.formatMessage({id:"navigation.mainNavigation",defaultMessage:"Main",description:"Label describing the site navigation, for screen reader users"});this.openTooltipMessage=a.formatMessage({id:"global.openVerb",defaultMessage:"Open",description:"For a button, to open a user interface element"});this.closeTooltipMessage=a.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.throttledRerender=r((()=>o(this.el)),50);this.open=false;this.isTabbing=false}get isCollapsible(){return window.innerWidth<1024}get ariaExpanded(){return this.isCollapsible?this.open.toString():undefined}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}closeOnEscape(t){if(t.key==="Escape"){this.open=false}}handleWindowResize(){this.throttledRerender()}handleHamburgerClicked(){this.open=!this.open}handleClickOnItem(){this.open=false}handleStateChange(){if(this.isCollapsible){this.wmNavigationStateChanged.emit();this.open?this.expand():this.collapse()}}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=()=>{const t=this.open?this.el.shadowRoot.querySelector(".toggle"):document.querySelector("wm-navigation-hamburger");const i=this.el.querySelector("wm-navigation-item");this.isCollapsible?t.focus():i.focus()};if(this.isCollapsible&&this.open){this.wmNavigationStateChanged.emit();this.expand()}}redirectFocusFromBody(t){if(document.activeElement.tagName==="BODY"&&!t.relatedTarget){this.el.focus()}}expand(){document.body.tabIndex=0;document.body.addEventListener("focus",this.redirectFocusFromBody.bind(this),true);setTimeout((()=>this.toggleEl.focus()),250)}collapse(){document.body.tabIndex=-1;document.body.removeEventListener("focus",this.redirectFocusFromBody.bind(this));const t=document.querySelector("wm-navigation-hamburger");if(t)t.focus()}focusLastItem(){const t=this.el.querySelectorAll("wm-navigation-item");const i=Array.from(t).pop();i.focus()}renderOverlay(){return e("div",{class:"overlay",onClick:()=>{this.open=false}})}render(){return e(s,{role:"navigation","aria-expanded":this.ariaExpanded,"aria-label":this.mainNavigationMessage},this.open?this.renderOverlay():"",this.isCollapsible&&e("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:()=>this.focusLastItem()}),e("div",{class:"tray"},e("div",{class:"toggle-wrapper"},e("wm-button",{ref:t=>this.toggleEl=t,class:`toggle ${this.isTabbing?"user-is-tabbing":""}`,"button-type":"navigational",icon:this.open?"f156":"f35c","icon-size":"2rem",tooltip:this.open?this.closeTooltipMessage:this.openTooltipMessage,"tooltip-position":"left",tabIndex:this.open?undefined:-1,onClick:()=>{this.open=!this.open}})),e("ul",{class:"navlist"},e("slot",null))),this.isCollapsible&&e("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:()=>this.toggleEl.focus()}))}static get delegatesFocus(){return true}get el(){return n(this)}static get watchers(){return{open:["handleStateChange"]}}};h.style=l;const c='button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-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}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f35c";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}';const d=class{constructor(e){t(this,e);this.wmNavigationHamburgerClicked=i(this,"wmNavigationHamburgerClicked",7);this.showNavMessage=a.formatMessage({id:"navigation.showNavigation",defaultMessage:"Show navigation",description:"For user interface element opening a navigation menu"});this.navId=undefined;this.tooltipVisible=false;this.isTabbing=false;this.open=false}get tooltipEl(){return document.getElementById("wm-tooltip")}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleNavigationStateChanged(t){this.open=t.target.open}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(!this.navId){console.error("wm-navigation-hamburger: nav-id is a required prop")}}showTooltip(){const t=this.showNavMessage;this.tooltipEl.textContent=t;this.tooltipEl.style.setProperty("--wmTooltipTop","1.125rem");this.tooltipEl.style.setProperty("--wmTooltipLeft","2.75rem");this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";const i=t.match(/^[^\s]+$/);if(i){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}setTimeout((()=>{this.tooltipVisible=true}),500)}hideTooltip(){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false}showTooltipForKeyboardUsers(){if(this.isTabbing){this.showTooltip()}}handleClick(){this.hideTooltip();this.wmNavigationHamburgerClicked.emit()}render(){return e(s,{class:`hamburger ${this.open?"nav-open":"nav-closed"}`},e("button",{class:this.isTabbing?"user-is-tabbing":undefined,"aria-expanded":this.open,"aria-controls":this.navId,"aria-label":this.showNavMessage,onMouseEnter:()=>this.showTooltip(),onMouseLeave:()=>this.hideTooltip(),onFocus:()=>this.showTooltipForKeyboardUsers(),onBlur:()=>this.hideTooltip(),onClick:()=>this.handleClick()},e("span",{class:"icon"})))}static get delegatesFocus(){return true}get el(){return n(this)}};d.style=c;const g='.link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:"";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}';const u=class{constructor(e){t(this,e);this.wmNavigationItemClicked=i(this,"wmNavigationItemClicked",7);this.href=undefined;this.text=undefined;this.active=undefined;this.isTabbing=false}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}componentWillLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}}render(){return e(s,{role:"listitem"},e("a",{class:`link ${this.active?"active":""} ${this.isTabbing?"user-is-tabbing":""}`,href:this.href,onClick:()=>this.wmNavigationItemClicked.emit()},e("div",{class:"icon","aria-hidden":"true"},e("slot",null)),e("div",{class:"text"},this.text)))}static get delegatesFocus(){return true}get el(){return n(this)}};u.style=g;export{h as wm_navigation,d as wm_navigation_hamburger,u as wm_navigation_item};
+//# sourceMappingURL=p-78a7278d.entry.js.map

package/dist/ripple/p-78a7278d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmNavigationCss","Navigation","this","mainNavigationMessage","intl","formatMessage","id","defaultMessage","description","openTooltipMessage","closeTooltipMessage","throttledRerender","throttle","forceUpdate","el","isCollapsible","window","innerWidth","ariaExpanded","open","toString","undefined","toggleTabbingOn","isTabbing","toggleTabbingOff","closeOnEscape","ev","key","handleWindowResize","handleHamburgerClicked","handleClickOnItem","handleStateChange","wmNavigationStateChanged","emit","expand","collapse","componentWillLoad","document","body","classList","contains","focus","btn","shadowRoot","querySelector","firstItem","redirectFocusFromBody","activeElement","tagName","relatedTarget","tabIndex","addEventListener","bind","setTimeout","toggleEl","removeEventListener","hamburgerBtn","focusLastItem","items","querySelectorAll","lastItem","Array","from","pop","renderOverlay","h","class","onClick","render","Host","role","tabindex","onFocus","ref","icon","tooltip","wmNavigationHamburgerCss","NavigationHamburger","showNavMessage","tooltipEl","getElementById","handleNavigationStateChanged","target","navId","console","error","showTooltip","tooltipText","textContent","style","setProperty","transitionDelay","opacity","hasNoWhitespace","match","add","remove","removeProperty","tooltipVisible","hideTooltip","showTooltipForKeyboardUsers","handleClick","wmNavigationHamburgerClicked","onMouseEnter","onMouseLeave","onBlur","wmNavigationItemCss","NavigationItem","active","href","wmNavigationItemClicked","text"],"sources":["./src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","./src/components/wm-navigation/wm-navigation.tsx","./src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-hamburger.tsx","./src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","./src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\r\n  z-index: 10;\r\n}\r\n\r\n:host([aria-expanded=\"true\"]) {\r\n  z-index: 5000;\r\n}\r\n\r\n.tray {\r\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: rem-calc(121);\r\n  background-color: $light-background;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  font-size: rem-calc(14);\r\n  height: 100%;\r\n}\r\n\r\n.navlist {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.toggle-wrapper {\r\n  display: none;\r\n}\r\n\r\n/* COLLAPSIBLE STYLES */\r\n@media screen and (max-width: 1023px) {\r\n  .tray {\r\n    @include transition(transform 0.33s ease);\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    transform: translateX(-100%);\r\n\r\n    ul {\r\n      visibility: hidden;\r\n    }\r\n\r\n    .toggle-wrapper {\r\n      display: inline-block;\r\n      min-height: 5rem;\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  :host([aria-expanded=\"true\"]) {\r\n    .tray {\r\n      transform: translateX(0);\r\n\r\n      ul {\r\n        visibility: visible;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    max-width: none;\r\n    max-height: none;\r\n    position: fixed !important;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    transform: translate(0%, 0%);\r\n    background-color: rgba(25, 25, 25, 0.4);\r\n    @include transition(opacity 0.5s ease-out);\r\n  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Element,\r\n  Prop,\r\n  State,\r\n  Listen,\r\n  Host,\r\n  Watch,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { intl, throttle } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation\",\r\n  styleUrl: \"wm-navigation.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Navigation {\r\n  @Element() el!: HTMLWmNavigationElement;\r\n  toggleEl!: HTMLWmButtonElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @Event() wmNavigationStateChanged!: EventEmitter;\r\n\r\n  private mainNavigationMessage: string = intl.formatMessage({\r\n    id: \"navigation.mainNavigation\",\r\n    defaultMessage: \"Main\",\r\n    description: \"Label describing the site navigation, for screen reader users\",\r\n  });\r\n\r\n  private openTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.openVerb\",\r\n    defaultMessage: \"Open\",\r\n    description: \"For a button, to open a user interface element\",\r\n  });\r\n\r\n  private closeTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.closeVerb\",\r\n    defaultMessage: \"Close\",\r\n    description: \"For a button, to close a user interface element\",\r\n  });\r\n\r\n  get isCollapsible() {\r\n    return window.innerWidth < 1024;\r\n  }\r\n\r\n  get ariaExpanded() {\r\n    return this.isCollapsible\r\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\r\n        this.open.toString()\r\n      : // otherwise, do not render attr at all\r\n        undefined;\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  closeOnEscape(ev: KeyboardEvent) {\r\n    if (ev.key === \"Escape\") {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleWindowResize() {\r\n    // for component to react when breakpoint is crossed\r\n    // (doesn't rerender on window resize)\r\n    this.throttledRerender();\r\n  }\r\n\r\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\r\n  handleHamburgerClicked() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  @Listen(\"wmNavigationItemClicked\")\r\n  handleClickOnItem() {\r\n    this.open = false;\r\n  }\r\n\r\n  @Watch(\"open\")\r\n  handleStateChange() {\r\n    if (this.isCollapsible) {\r\n      this.wmNavigationStateChanged.emit();\r\n      this.open ? this.expand() : this.collapse();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\r\n      const btn = this.open\r\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\r\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\r\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\r\n      this.isCollapsible ? btn.focus() : firstItem.focus();\r\n    };\r\n\r\n    if (this.isCollapsible && this.open) {\r\n      // hamburger needs to know if open was initially set to true\r\n      this.wmNavigationStateChanged.emit();\r\n      this.expand();\r\n    }\r\n  }\r\n\r\n  redirectFocusFromBody(ev: FocusEvent) {\r\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\r\n    // which should not redirect focus\r\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\r\n      this.el.focus();\r\n    }\r\n  }\r\n\r\n  expand() {\r\n    // listen to focus on body and redirect to the component\r\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\r\n    // and is tabbing back in\r\n    document.body.tabIndex = 0;\r\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\r\n\r\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\r\n    setTimeout(() => this.toggleEl.focus(), 250);\r\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\r\n  }\r\n\r\n  collapse() {\r\n    // rm event listener on body\r\n    document.body.tabIndex = -1;\r\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\r\n\r\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\r\n    // should fail silently if el doesn't exist\r\n    // (dev may have chosen not to use the hamburger component)\r\n    if (hamburgerBtn) hamburgerBtn.focus();\r\n  }\r\n\r\n  focusLastItem() {\r\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\r\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\r\n    lastItem.focus();\r\n  }\r\n\r\n  renderOverlay() {\r\n    return (\r\n      <div\r\n        class=\"overlay\"\r\n        onClick={() => {\r\n          this.open = false;\r\n        }}\r\n      ></div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\r\n        {this.open ? this.renderOverlay() : \"\"}\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\r\n        )}\r\n        <div class=\"tray\">\r\n          <div class=\"toggle-wrapper\">\r\n            <wm-button\r\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\r\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n              button-type=\"navigational\"\r\n              icon={this.open ? \"f156\" : \"f35c\"}\r\n              icon-size=\"2rem\"\r\n              tooltip={this.open ? this.closeTooltipMessage : this.openTooltipMessage}\r\n              tooltip-position=\"left\"\r\n              tabIndex={this.open ? undefined : -1}\r\n              onClick={() => {\r\n                this.open = !this.open;\r\n              }}\r\n            />\r\n          </div>\r\n          <ul class=\"navlist\">\r\n            <slot />\r\n          </ul>\r\n        </div>\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n","button {\r\n  display: none;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: none;\r\n  box-shadow: none;\r\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\r\n  background-color: transparent;\r\n  outline: none;\r\n  padding: 0;\r\n\r\n  &.user-is-tabbing:focus {\r\n    @include focus-style;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: $button-default-hover;\r\n  }\r\n}\r\n\r\n.icon {\r\n  &:before {\r\n    @include mdi-icon;\r\n    content: \"\\f35c\";\r\n    font-size: rem-calc(24);\r\n    color: $button-default-text;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 1023px) {\r\n  :host {\r\n    width: rem-calc(60);\r\n    height: rem-calc(60);\r\n  }\r\n\r\n  button {\r\n    display: initial;\r\n  }\r\n}\r\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-hamburger\",\r\n  styleUrl: \"wm-navigation-hamburger.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationHamburger {\r\n  @Element() el!: HTMLWmNavigationHamburgerElement;\r\n  nav!: HTMLWmNavigationElement;\r\n\r\n  @Prop() navId?: string;\r\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @State() open: boolean = false;\r\n\r\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\r\n\r\n  showNavMessage = intl.formatMessage({\r\n    id: \"navigation.showNavigation\",\r\n    defaultMessage: \"Show navigation\",\r\n    description: \"For user interface element opening a navigation menu\",\r\n  });\r\n\r\n  get tooltipEl(): HTMLElement {\r\n    return document.getElementById(\"wm-tooltip\")!;\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  // this also works on initial load because event is fired then\r\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\r\n  handleNavigationStateChanged(ev: CustomEvent) {\r\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n    if (!this.navId) {\r\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\r\n    }\r\n  }\r\n\r\n  showTooltip() {\r\n    const tooltipText = this.showNavMessage;\r\n    this.tooltipEl.textContent = tooltipText;\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\r\n    this.tooltipEl.style.transitionDelay = \"500ms\";\r\n    this.tooltipEl.style.opacity = \"1\";\r\n\r\n    // tooltip only has a maxWidth if it contains whitespace and can break\r\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\r\n    if (hasNoWhitespace) {\r\n      this.tooltipEl.classList.add(\"single-word\");\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n    } else {\r\n      this.tooltipEl.classList.remove(\"single-word\");\r\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n    }\r\n\r\n    // tooltip is only visible after the transition delay.\r\n    // This also fixes an issue for keyboard users:\r\n    // if they tab to a button out of screen bounds, the page scrolls\r\n    // and hideTooltip() would be triggered before the tooltip would show\r\n    setTimeout(() => {\r\n      this.tooltipVisible = true;\r\n    }, 500);\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.style.transitionDelay = \"0s\";\r\n    this.tooltipEl.style.opacity = \"0\";\r\n    this.tooltipVisible = false;\r\n  }\r\n\r\n  showTooltipForKeyboardUsers() {\r\n    if (this.isTabbing) {\r\n      this.showTooltip();\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.hideTooltip();\r\n    this.wmNavigationHamburgerClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\r\n        <button\r\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\r\n          aria-expanded={this.open}\r\n          aria-controls={this.navId}\r\n          aria-label={this.showNavMessage}\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltipForKeyboardUsers()}\r\n          onBlur={() => this.hideTooltip()}\r\n          onClick={() => this.handleClick()}\r\n        >\r\n          <span class=\"icon\"></span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",".link {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  color: inherit;\r\n  text-decoration: none;\r\n  min-height: rem-calc(72);\r\n  text-align: center;\r\n  padding: 1.25rem 0.5rem;\r\n  font-weight: 500;\r\n  outline: none;\r\n  position: relative;\r\n\r\n  &:hover {\r\n    background-color: $light-background-hover;\r\n  }\r\n\r\n  .icon {\r\n    font-size: rem-calc(22);\r\n    color: $sidenav-icon;\r\n  }\r\n\r\n  .text {\r\n    font-size: rem-calc(14);\r\n  }\r\n\r\n  &.user-is-tabbing:focus {\r\n    // from P&SS\r\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\r\n  }\r\n}\r\n\r\n.link.active {\r\n  background-color: $pale-lilac-gray;\r\n  &:before {\r\n    content: \"\";\r\n    // link to or create semantic name\r\n    background-color: $periwinkle;\r\n    position: absolute;\r\n    height: 100%;\r\n    width: 5px;\r\n    left: 0;\r\n  }\r\n\r\n  .text {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n\r\n  .icon {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n}\r\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-item\",\r\n  styleUrl: \"wm-navigation-item.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationItem {\r\n  @Element() el!: HTMLWmNavigationItemElement;\r\n  @Prop() href?: string;\r\n  @Prop() text?: string;\r\n  @Prop() active?: boolean;\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @Event() wmNavigationItemClicked!: EventEmitter;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\">\r\n        <a\r\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n          href={this.href}\r\n          onClick={() => this.wmNavigationItemClicked.emit()}\r\n        >\r\n          <div class=\"icon\" aria-hidden=\"true\">\r\n            <slot />\r\n          </div>\r\n          <div class=\"text\">{this.text}</div>\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/{p-45e7b944.entry.js → p-81c698e2.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as o,h as i,H as e,g as n}from"./p-1c23de4a.js";import{i as r}from"./p-9fd3badc.js";const s="priv-chart-popover{position:fixed;z-index:10;border-radius:0.1875rem;-webkit-box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);-moz-box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);background-color:#fff;font-size:0.875rem;text-align:left}priv-chart-popover.user-is-tabbing .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}.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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.popover{width:10.5rem;padding:0.625rem 0.9375rem;-webkit-box-sizing:border-box;box-sizing:border-box}.popover .title{font-size:1em;font-weight:500;margin:0;padding-top:0;padding-left:0;padding-bottom:0.25rem}.popover .title.positive{color:#088000}.popover .title.negative{color:#c0392b}.popover .text{margin:0;margin-bottom:0.5rem}.popover .popover-button{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;position:relative;display:inline-block;margin-left:1rem;padding-left:0;padding-right:0;height:auto;border:none;background:transparent;cursor:pointer;text-decoration:none;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;font-weight:700;color:#575195;line-height:normal}.popover .popover-button .btn-icon{position:absolute;top:0.1875rem;left:-1rem}.popover .popover-button:focus{outline:none}.popover .popover-button::-moz-focus-inner{border:0;outline:none}.popover .popover-button:hover{text-decoration:none;background:none;color:#454077}.popover .popover-button:hover span{text-decoration:underline}";const p=class{constructor(i){t(this,i);this.wmChartPopoverButtonTriggered=o(this,"wmChartPopoverButtonTriggered",7);this.wmProgressIndicatorButtonTriggered=o(this,"wmProgressIndicatorButtonTriggered",7);this.chartEl=this.el.parentElement.getRootNode().host;this.popoverWidth=168;this.popoverClicked=false;this.sliceRef=undefined;this.popoverTitle=undefined;this.popoverText=undefined;this.buttonText=undefined;this.open=false;this.coords={}}get eventToEmit(){return this.chartEl.nodeName==="WM-CHART"?this.wmChartPopoverButtonTriggered:this.wmProgressIndicatorButtonTriggered}handleClickOnDocument(){this.open=this.popoverClicked;this.popoverClicked=false}handleClick(t){let o=false;if(this.btnEl){o=t.target===this.btnEl||this.btnEl.contains(t.target)}this.popoverClicked=!o&&(t.target===this.el||this.el.contains(t.target))}handleButtonClick(){if(this.sliceRef){this.sliceRef.click();this.eventToEmit.emit(this.sliceRef)}this.open=false}renderLiveRegion(){if(this.liveRegion){this.liveRegion.innerHTML="";const t=document.createElement("div");const o=document.createElement("span");o.innerHTML=this.popoverTitle+" "||"";t.appendChild(o);const i=document.createElement("span");i.innerHTML=this.popoverText+" "||"";t.appendChild(i);if(this.buttonText){const o=document.createElement("span");o.innerHTML=this.buttonText+" "+r.formatMessage({id:"chart.infoButton",defaultMessage:"Button. Click for more information."});t.appendChild(o)}this.liveRegion.appendChild(t)}}positionPopover(){this.el.style.top=this.coords.y+"px";if(window.innerWidth-this.coords.x>=this.popoverWidth+10){this.el.style.left=this.coords.x+"px"}else{this.el.style.left=this.coords.x-this.popoverWidth+"px"}}render(){const t=this.popoverTitle&&(this.popoverTitle[0]==="-"?"negative":this.popoverTitle[0]==="+"?"positive":"");return i(e,null,!!this.open?i("div",{"aria-hidden":"true",class:"popover"},i("h1",{class:`title ${t}`},this.popoverTitle),i("p",{class:"text"},this.popoverText),this.buttonText?i("button",{tabindex:"-1",focusable:"false",ref:t=>this.btnEl=t,class:"popover-button",onClick:()=>this.handleButtonClick()},i("svg",{class:"btn-icon",height:"9",width:"9"},i("path",{fill:"#575195",d:"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z"})),i("span",{class:"button-text"},this.buttonText)):""):"",i("div",{ref:t=>this.liveRegion=t,class:"live-region sr-only","aria-live":"polite","aria-atomic":"true"},this.open&&this.renderLiveRegion()))}get el(){return n(this)}static get watchers(){return{coords:["positionPopover"]}}};p.style=s;export{p as priv_chart_popover};
-//# sourceMappingURL=p-45e7b944.entry.js.map
+import{r as t,c as o,h as i,H as e,g as n}from"./p-1c23de4a.js";import{i as r}from"./p-edfba0e1.js";const s="priv-chart-popover{position:fixed;z-index:10;border-radius:0.1875rem;-webkit-box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);-moz-box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);box-shadow:0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12);background-color:#fff;font-size:0.875rem;text-align:left}priv-chart-popover.user-is-tabbing .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}.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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.popover{width:10.5rem;padding:0.625rem 0.9375rem;-webkit-box-sizing:border-box;box-sizing:border-box}.popover .title{font-size:1em;font-weight:500;margin:0;padding-top:0;padding-left:0;padding-bottom:0.25rem}.popover .title.positive{color:#088000}.popover .title.negative{color:#c0392b}.popover .text{margin:0;margin-bottom:0.5rem}.popover .popover-button{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;position:relative;display:inline-block;margin-left:1rem;padding-left:0;padding-right:0;height:auto;border:none;background:transparent;cursor:pointer;text-decoration:none;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;font-weight:700;color:#575195;line-height:normal}.popover .popover-button .btn-icon{position:absolute;top:0.1875rem;left:-1rem}.popover .popover-button:focus{outline:none}.popover .popover-button::-moz-focus-inner{border:0;outline:none}.popover .popover-button:hover{text-decoration:none;background:none;color:#454077}.popover .popover-button:hover span{text-decoration:underline}";const p=class{constructor(i){t(this,i);this.wmChartPopoverButtonTriggered=o(this,"wmChartPopoverButtonTriggered",7);this.wmProgressIndicatorButtonTriggered=o(this,"wmProgressIndicatorButtonTriggered",7);this.chartEl=this.el.parentElement.getRootNode().host;this.popoverWidth=168;this.popoverClicked=false;this.sliceRef=undefined;this.popoverTitle=undefined;this.popoverText=undefined;this.buttonText=undefined;this.open=false;this.coords={}}get eventToEmit(){return this.chartEl.nodeName==="WM-CHART"?this.wmChartPopoverButtonTriggered:this.wmProgressIndicatorButtonTriggered}handleClickOnDocument(){this.open=this.popoverClicked;this.popoverClicked=false}handleClick(t){let o=false;if(this.btnEl){o=t.target===this.btnEl||this.btnEl.contains(t.target)}this.popoverClicked=!o&&(t.target===this.el||this.el.contains(t.target))}handleButtonClick(){if(this.sliceRef){this.sliceRef.click();this.eventToEmit.emit(this.sliceRef)}this.open=false}renderLiveRegion(){if(this.liveRegion){this.liveRegion.innerHTML="";const t=document.createElement("div");const o=document.createElement("span");o.innerHTML=this.popoverTitle+" "||"";t.appendChild(o);const i=document.createElement("span");i.innerHTML=this.popoverText+" "||"";t.appendChild(i);if(this.buttonText){const o=document.createElement("span");o.innerHTML=this.buttonText+" "+r.formatMessage({id:"chart.infoButton",defaultMessage:"Button. Click for more information."});t.appendChild(o)}this.liveRegion.appendChild(t)}}positionPopover(){this.el.style.top=this.coords.y+"px";if(window.innerWidth-this.coords.x>=this.popoverWidth+10){this.el.style.left=this.coords.x+"px"}else{this.el.style.left=this.coords.x-this.popoverWidth+"px"}}render(){const t=this.popoverTitle&&(this.popoverTitle[0]==="-"?"negative":this.popoverTitle[0]==="+"?"positive":"");return i(e,null,!!this.open?i("div",{"aria-hidden":"true",class:"popover"},i("h1",{class:`title ${t}`},this.popoverTitle),i("p",{class:"text"},this.popoverText),this.buttonText?i("button",{tabindex:"-1",focusable:"false",ref:t=>this.btnEl=t,class:"popover-button",onClick:()=>this.handleButtonClick()},i("svg",{class:"btn-icon",height:"9",width:"9"},i("path",{fill:"#575195",d:"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z"})),i("span",{class:"button-text"},this.buttonText)):""):"",i("div",{ref:t=>this.liveRegion=t,class:"live-region sr-only","aria-live":"polite","aria-atomic":"true"},this.open&&this.renderLiveRegion()))}get el(){return n(this)}static get watchers(){return{coords:["positionPopover"]}}};p.style=s;export{p as priv_chart_popover};
+//# sourceMappingURL=p-81c698e2.entry.js.map

package/dist/ripple/p-81c698e2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["privChartPopoverCss","ChartPopover","this","chartEl","el","parentElement","getRootNode","host","popoverWidth","popoverClicked","eventToEmit","nodeName","wmChartPopoverButtonTriggered","wmProgressIndicatorButtonTriggered","handleClickOnDocument","open","handleClick","ev","popoverBtnClicked","btnEl","target","contains","handleButtonClick","sliceRef","click","emit","renderLiveRegion","liveRegion","innerHTML","wrapper","document","createElement","titleEl","popoverTitle","appendChild","textEl","popoverText","buttonText","buttonEl","intl","formatMessage","id","defaultMessage","positionPopover","style","top","coords","y","window","innerWidth","x","left","render","titleAffordance","h","Host","class","tabindex","focusable","ref","onClick","height","width","fill","d"],"sources":["./src/components/charts/priv-chart-popover/priv-chart-popover.scss?tag=priv-chart-popover","./src/components/charts/priv-chart-popover/priv-chart-popover.tsx"],"sourcesContent":["priv-chart-popover {\r\n  position: fixed;\r\n\r\n  z-index: 10;\r\n  border-radius: rem-calc(3);\r\n  @include box-shadow(0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12));\r\n  background-color: $light-background;\r\n  font-size: 0.875rem;\r\n  text-align: left;\r\n\r\n  &.user-is-tabbing {\r\n    .button-text {\r\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n      background-size: 6px 3px;\r\n      background-position: 0 1em;\r\n      border-radius: 0;\r\n      line-height: normal;\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n\r\n.popover {\r\n  width: rem-calc(168);\r\n  padding: rem-calc(10 15);\r\n  box-sizing: border-box;\r\n\r\n  & .title {\r\n    font-size: 1em;\r\n    font-weight: 500;\r\n    margin: 0;\r\n    padding-top: 0;\r\n    padding-left: 0;\r\n    padding-bottom: rem-calc(4);\r\n\r\n    &.positive {\r\n      color: $success;\r\n    }\r\n\r\n    &.negative {\r\n      color: $error;\r\n    }\r\n  }\r\n\r\n  & .text {\r\n    margin: 0;\r\n    margin-bottom: rem-calc(8);\r\n  }\r\n\r\n  & .popover-button {\r\n    @include box-shadow(none);\r\n    position: relative;\r\n    display: inline-block;\r\n    margin-left: rem-calc(16);\r\n    padding-left: 0;\r\n    padding-right: 0;\r\n    height: auto;\r\n    border: none;\r\n    background: transparent;\r\n    cursor: pointer;\r\n\r\n    text-decoration: none;\r\n    letter-spacing: 0;\r\n    text-transform: none;\r\n    text-align: initial;\r\n    font-size: rem-calc(14);\r\n    font-weight: 700;\r\n    color: $button-default-text;\r\n    line-height: normal;\r\n\r\n    & .btn-icon {\r\n      position: absolute;\r\n      top: rem-calc(3);\r\n      left: rem-calc(-16);\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &::-moz-focus-inner {\r\n      border: 0;\r\n      outline: none;\r\n    }\r\n\r\n    &:hover {\r\n      text-decoration: none;\r\n      background: none;\r\n      color: #454077;\r\n      span {\r\n        text-decoration: underline;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Prop, Host, Element, Watch, Listen, Event, EventEmitter } from \"@stencil/core\";\r\nimport { intl } from \"../../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"priv-chart-popover\",\r\n  styleUrl: \"priv-chart-popover.scss\",\r\n})\r\nexport class ChartPopover {\r\n  @Element() el!: HTMLPrivChartPopoverElement;\r\n  private chartEl: Element = (this.el.parentElement!.getRootNode() as ShadowRoot).host;\r\n  private btnEl?: HTMLButtonElement;\r\n  private liveRegion?: HTMLDivElement;\r\n\r\n  @Event()\r\n  wmChartPopoverButtonTriggered!: EventEmitter<HTMLWmChartSliceElement>;\r\n  @Event()\r\n  wmProgressIndicatorButtonTriggered!: EventEmitter<HTMLWmProgressSliceElement>;\r\n  get eventToEmit() {\r\n    return this.chartEl.nodeName === \"WM-CHART\"\r\n      ? this.wmChartPopoverButtonTriggered\r\n      : this.wmProgressIndicatorButtonTriggered;\r\n  }\r\n\r\n  @Prop() sliceRef?: HTMLWmChartSliceElement;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() buttonText?: string;\r\n  @Prop({ mutable: true }) open: boolean = false;\r\n  @Prop() coords: { x?: number; y?: number } = {};\r\n  private popoverWidth: number = 168;\r\n\r\n  private popoverClicked = false;\r\n\r\n  @Listen(\"click\", { capture: false, target: \"document\" })\r\n  handleClickOnDocument() {\r\n    // because this listener is set document-wide, whenever something inside it is clicked\r\n    // the event target returned will always be the host (wm-chart)\r\n    // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here\r\n    // capture = false in @Listen ensures order of execution\r\n    this.open = this.popoverClicked;\r\n    this.popoverClicked = false;\r\n  }\r\n\r\n  @Listen(\"click\", { capture: false })\r\n  handleClick(ev: MouseEvent) {\r\n    let popoverBtnClicked = false;\r\n    if (this.btnEl) {\r\n      popoverBtnClicked = ev.target === this.btnEl || this.btnEl.contains(ev.target as HTMLElement);\r\n    }\r\n    // if the click is on the popover (except the popover button),\r\n    // set popoverClicked to true. It will be used by the other listener above\r\n    this.popoverClicked = !popoverBtnClicked && (ev.target === this.el || this.el.contains(ev.target as HTMLElement));\r\n  }\r\n\r\n  handleButtonClick() {\r\n    if (this.sliceRef) {\r\n      this.sliceRef.click();\r\n      this.eventToEmit.emit(this.sliceRef);\r\n    }\r\n    this.open = false;\r\n  }\r\n\r\n  renderLiveRegion() {\r\n    if (this.liveRegion) {\r\n      this.liveRegion.innerHTML = \"\";\r\n\r\n      const wrapper = document.createElement(\"div\");\r\n\r\n      const titleEl = document.createElement(\"span\");\r\n      titleEl.innerHTML = this.popoverTitle + \" \" || \"\";\r\n      wrapper.appendChild(titleEl);\r\n\r\n      const textEl = document.createElement(\"span\");\r\n      textEl.innerHTML = this.popoverText + \" \" || \"\";\r\n      wrapper.appendChild(textEl);\r\n\r\n      if (this.buttonText) {\r\n        const buttonEl = document.createElement(\"span\");\r\n        buttonEl.innerHTML =\r\n          this.buttonText +\r\n          \" \" +\r\n          intl.formatMessage({\r\n            id: \"chart.infoButton\",\r\n            defaultMessage: \"Button. Click for more information.\",\r\n          });\r\n        wrapper.appendChild(buttonEl);\r\n      }\r\n      this.liveRegion.appendChild(wrapper);\r\n    }\r\n  }\r\n\r\n  @Watch(\"coords\")\r\n  positionPopover() {\r\n    this.el!.style.top = this.coords.y + \"px\";\r\n    if (window.innerWidth - this.coords.x! >= this.popoverWidth + 10) {\r\n      this.el!.style.left = this.coords.x + \"px\"; // opens on the right\r\n    } else {\r\n      this.el!.style.left = this.coords.x! - this.popoverWidth + \"px\"; // opens on the left\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const titleAffordance = this.popoverTitle && (this.popoverTitle[0] === \"-\" ? \"negative\" : this.popoverTitle[0] === \"+\" ? \"positive\" : \"\"); \r\n    return (\r\n      <Host>\r\n        {!!this.open ? (\r\n          <div aria-hidden=\"true\" class=\"popover\">\r\n            <h1 class={`title ${titleAffordance}`}>{this.popoverTitle}</h1>\r\n            <p class=\"text\">{this.popoverText}</p>\r\n            {this.buttonText ? (\r\n              // @ts-ignore\r\n              <button\r\n                tabindex=\"-1\"\r\n                // @ts-ignore\r\n                focusable=\"false\"\r\n                ref={(el) => (this.btnEl = el as HTMLButtonElement)}\r\n                class=\"popover-button\"\r\n                onClick={() => this.handleButtonClick()}\r\n              >\r\n                <svg class=\"btn-icon\" height=\"9\" width=\"9\">\r\n                  <path fill=\"#575195\" d=\"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z\" />\r\n                </svg>\r\n                <span class=\"button-text\">{this.buttonText}</span>\r\n              </button>\r\n            ) : (\r\n              \"\"\r\n            )}\r\n          </div>\r\n        ) : (\r\n          \"\"\r\n        )}\r\n        <div\r\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\r\n          class=\"live-region sr-only\"\r\n          aria-live=\"polite\"\r\n          aria-atomic=\"true\"\r\n        >\r\n          {this.open && this.renderLiveRegion()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oGAAA,MAAMA,EAAsB,kgE,MCOfC,EAAY,M,6LAEfC,KAAAC,QAAoBD,KAAKE,GAAGC,cAAeC,cAA6BC,KAoBxEL,KAAAM,aAAuB,IAEvBN,KAAAO,eAAiB,M,mHAJgB,M,YACI,E,CAXzCC,kBACF,OAAOR,KAAKC,QAAQQ,WAAa,WAC7BT,KAAKU,8BACLV,KAAKW,kC,CAcXC,wBAKEZ,KAAKa,KAAOb,KAAKO,eACjBP,KAAKO,eAAiB,K,CAIxBO,YAAYC,GACV,IAAIC,EAAoB,MACxB,GAAIhB,KAAKiB,MAAO,CACdD,EAAoBD,EAAGG,SAAWlB,KAAKiB,OAASjB,KAAKiB,MAAME,SAASJ,EAAGG,O,CAIzElB,KAAKO,gBAAkBS,IAAsBD,EAAGG,SAAWlB,KAAKE,IAAMF,KAAKE,GAAGiB,SAASJ,EAAGG,Q,CAG5FE,oBACE,GAAIpB,KAAKqB,SAAU,CACjBrB,KAAKqB,SAASC,QACdtB,KAAKQ,YAAYe,KAAKvB,KAAKqB,S,CAE7BrB,KAAKa,KAAO,K,CAGdW,mBACE,GAAIxB,KAAKyB,WAAY,CACnBzB,KAAKyB,WAAWC,UAAY,GAE5B,MAAMC,EAAUC,SAASC,cAAc,OAEvC,MAAMC,EAAUF,SAASC,cAAc,QACvCC,EAAQJ,UAAY1B,KAAK+B,aAAe,KAAO,GAC/CJ,EAAQK,YAAYF,GAEpB,MAAMG,EAASL,SAASC,cAAc,QACtCI,EAAOP,UAAY1B,KAAKkC,YAAc,KAAO,GAC7CP,EAAQK,YAAYC,GAEpB,GAAIjC,KAAKmC,WAAY,CACnB,MAAMC,EAAWR,SAASC,cAAc,QACxCO,EAASV,UACP1B,KAAKmC,WACL,IACAE,EAAKC,cAAc,CACjBC,GAAI,mBACJC,eAAgB,wCAEpBb,EAAQK,YAAYI,E,CAEtBpC,KAAKyB,WAAWO,YAAYL,E,EAKhCc,kBACEzC,KAAKE,GAAIwC,MAAMC,IAAM3C,KAAK4C,OAAOC,EAAI,KACrC,GAAIC,OAAOC,WAAa/C,KAAK4C,OAAOI,GAAMhD,KAAKM,aAAe,GAAI,CAChEN,KAAKE,GAAIwC,MAAMO,KAAOjD,KAAK4C,OAAOI,EAAI,I,KACjC,CACLhD,KAAKE,GAAIwC,MAAMO,KAAOjD,KAAK4C,OAAOI,EAAKhD,KAAKM,aAAe,I,EAI/D4C,SACE,MAAMC,EAAkBnD,KAAK+B,eAAiB/B,KAAK+B,aAAa,KAAO,IAAM,WAAa/B,KAAK+B,aAAa,KAAO,IAAM,WAAa,IACtI,OACEqB,EAACC,EAAI,OACArD,KAAKa,KACNuC,EAAA,qBAAiB,OAAOE,MAAM,WAC5BF,EAAA,MAAIE,MAAO,SAASH,KAAoBnD,KAAK+B,cAC7CqB,EAAA,KAAGE,MAAM,QAAQtD,KAAKkC,aACrBlC,KAAKmC,WAEJiB,EAAA,UACEG,SAAS,KAETC,UAAU,QACVC,IAAMvD,GAAQF,KAAKiB,MAAQf,EAC3BoD,MAAM,iBACNI,QAAS,IAAM1D,KAAKoB,qBAEpBgC,EAAA,OAAKE,MAAM,WAAWK,OAAO,IAAIC,MAAM,KACrCR,EAAA,QAAMS,KAAK,UAAUC,EAAE,uEAEzBV,EAAA,QAAME,MAAM,eAAetD,KAAKmC,aACzB,IAIP,GAIRiB,EAAA,OACEK,IAAMvD,GAAQF,KAAKyB,WAAavB,EAChCoD,MAAM,sBAAqB,YACjB,SAAQ,cACN,QAEXtD,KAAKa,MAAQb,KAAKwB,oB"}

package/dist/ripple/{p-87da5d8e.entry.js → p-82323561.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as i,g as s}from"./p-1c23de4a.js";import{i as o}from"./p-9fd3badc.js";const a="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";const r=class{constructor(t){e(this,t);this.closeTooltipMessage=o.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}componentWillLoad(){this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(()=>{this.closeButtonEl.focus()}))}emitParentCloseEvent(){const e=this.el.parentElement;e.emitCloseEvent()}render(){return t(i,null,t("div",{class:"wm-wrapper"},t("div",null,t("h2",{class:"title",id:`wm-modal-heading-text-${this.uid}`},this.heading,t("span",{class:"subtitle"},this.subheading))),t("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:`wm-modal-close-${this.uid}`,ref:e=>this.closeButtonEl=e,onClick:()=>this.emitParentCloseEvent()})))}get el(){return s(this)}};r.style=a;export{r as wm_modal_header};
-//# sourceMappingURL=p-87da5d8e.entry.js.map
+import{r as e,h as t,H as i,g as s}from"./p-1c23de4a.js";import{i as o}from"./p-edfba0e1.js";const a="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";const r=class{constructor(t){e(this,t);this.closeTooltipMessage=o.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}componentWillLoad(){this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(()=>{this.closeButtonEl.focus()}))}emitParentCloseEvent(){const e=this.el.parentElement;e.emitCloseEvent()}render(){return t(i,null,t("div",{class:"wm-wrapper"},t("div",null,t("h2",{class:"title",id:`wm-modal-heading-text-${this.uid}`},this.heading,t("span",{class:"subtitle"},this.subheading))),t("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:`wm-modal-close-${this.uid}`,ref:e=>this.closeButtonEl=e,onClick:()=>this.emitParentCloseEvent()})))}get el(){return s(this)}};r.style=a;export{r as wm_modal_header};
+//# sourceMappingURL=p-82323561.entry.js.map

package/dist/ripple/p-82323561.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmModalHeaderCss","ModalHeader","this","closeTooltipMessage","intl","formatMessage","id","defaultMessage","description","componentWillLoad","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","heading","subheading","icon","tooltip","ref","onClick"],"sources":["./src/components/wm-modal/wm-modal-header.scss?tag=wm-modal-header","./src/components/wm-modal/wm-modal-header.tsx"],"sourcesContent":["wm-modal-header {\r\n  @include border-radius(5px 5px 0 0px);\r\n  //Fix for Chrome sometimes leaving space between header and content, making the overlay show through\r\n  margin-bottom: -1px;\r\n\r\n  .wm-wrapper {\r\n    @include displayFlex();\r\n    @include justifyContent(space-between);\r\n    @include alignItems(center);\r\n\r\n    .title {\r\n      margin: 0;\r\n      font-weight: 600;\r\n      font-size: rem-calc(18);\r\n      color: rgb(74, 74, 74);\r\n      line-height: normal;\r\n\r\n      .subtitle {\r\n        display: block;\r\n        font-size: rem-calc(14);\r\n        font-weight: normal;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop, Host } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-modal-header\",\r\n  styleUrl: \"wm-modal-header.scss\",\r\n})\r\nexport class ModalHeader {\r\n  @Element() el!: HTMLElement;\r\n  private closeButtonEl!: HTMLElement;\r\n\r\n  @Prop() heading?: string = \"\";\r\n  @Prop() subheading?: string = \"\";\r\n  private uid!: string;\r\n\r\n  private closeTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.closeVerb\",\r\n    defaultMessage: \"Close\",\r\n    description: \"For a button, to close a user interface element\",\r\n  });\r\n\r\n  componentWillLoad() {\r\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\r\n\r\n    // Trap focus when user tabs past last element in modal\r\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\r\n    // if we listen to the whole doc each modal on the page reacts to every event\r\n    this.el.parentElement!.addEventListener(\"focusFirstElement\", () => {\r\n      this.closeButtonEl.focus();\r\n    });\r\n  }\r\n\r\n  emitParentCloseEvent() {\r\n    const parentModal = this.el.parentElement;\r\n    //@ts-ignore\r\n    parentModal.emitCloseEvent();\r\n  }\r\n\r\n  // @Listen(\"click\")\r\n  // directFocusOnClick() {\r\n  //   this.headingElement.tabIndex = 0;\r\n  //   this.headingElement.focus();\r\n  // }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"wm-wrapper\">\r\n          <div>\r\n            <h2\r\n              class=\"title\"\r\n              id={`wm-modal-heading-text-${this.uid}`}\r\n              // ref={el => (this.headingElement = el as HTMLElement)}\r\n              // onBlur={() => (this.headingElement.tabIndex = -1)}\r\n            >\r\n              {this.heading}\r\n              <span class=\"subtitle\">{this.subheading}</span>\r\n            </h2>\r\n          </div>\r\n          <wm-button\r\n            button-type=\"navigational\"\r\n            icon=\"f156\"\r\n            tooltip={this.closeTooltipMessage}\r\n            tooltip-position=\"left\"\r\n            id={`wm-modal-close-${this.uid}`}\r\n            ref={(el) => (this.closeButtonEl = el as HTMLElement)}\r\n            onClick={() => this.emitParentCloseEvent()}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAmB,ouB,MCOZC,EAAW,M,yBAQdC,KAAAC,oBAA8BC,EAAKC,cAAc,CACvDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,oD,aAPY,G,gBACG,E,CAS9BC,oBACEP,KAAKQ,IAAOR,KAAKS,GAAGC,cAAqCF,IAKzDR,KAAKS,GAAGC,cAAeC,iBAAiB,qBAAqB,KAC3DX,KAAKY,cAAcC,OAAO,G,CAI9BC,uBACE,MAAMC,EAAcf,KAAKS,GAAGC,cAE5BK,EAAYC,gB,CASdC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNhB,GAAI,yBAAyBJ,KAAKQ,OAIjCR,KAAKqB,QACNH,EAAA,QAAME,MAAM,YAAYpB,KAAKsB,cAGjCJ,EAAA,2BACc,eACZK,KAAK,OACLC,QAASxB,KAAKC,oBAAmB,mBAChB,OACjBG,GAAI,kBAAkBJ,KAAKQ,MAC3BiB,IAAMhB,GAAQT,KAAKY,cAAgBH,EACnCiB,QAAS,IAAM1B,KAAKc,0B"}

package/dist/ripple/{p-2b577e99.entry.js → p-873a5f0f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as r,h as t,H as a,g as p}from"./p-1c23de4a.js";import{g as o,d as n,i as s}from"./p-9fd3badc.js";import{g as c,a as m,h as i,b as w,r as h,c as l,d as b,e as d,f as g,i as u,j as x,k as f}from"./p-23e54ad4.js";const k=":host,wm-chart{display:block}:host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-chart .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-chart .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-chart .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-chart .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-chart .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-chart .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-chart .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-chart .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-chart .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-chart .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-chart .component-wrapper.bar6,:host .component-wrapper.bar7,wm-chart .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-chart .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-chart .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-chart .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-chart .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-chart .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-chart .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-chart .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-chart .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-chart .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-chart .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-chart .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-chart .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-chart .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-chart .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-chart .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-chart .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-chart .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-chart .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-chart .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-chart .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-chart .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-chart .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-chart .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-chart .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-chart .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-chart .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-chart .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-chart .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-chart .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-chart .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-chart .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-chart .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-chart .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-chart .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-chart .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-chart .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-chart .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-chart #chart-instructions{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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-chart .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-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 .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";const v=class{constructor(t){e(this,t);this.uid=o();this.slicesDetails=[];this.handleStackedBarResize=n((async()=>{let e=false;const r=this.el.shadowRoot.querySelectorAll(".value");if(r.length){let t=r.length?r[0].getBoundingClientRect().right:0;let a=4;r.forEach(((r,p)=>{if(p>0){const p=r.getBoundingClientRect();if(p.left-a<t){r.classList.add("hidden");e=true}else{r.classList.remove("hidden");t=p.right}}}))}this.hasHiddenBarValue=e}),100);this.debouncedUpdate=n((async()=>{r(this.el)}),10);this.debouncedSliceUpdate=n((async()=>{await c.call(this,this.currentChartType);r(this.el)}),100);this.chartType="doughnut1";this.label=undefined;this.labelWidth="150px";this.subinfo=undefined;this.completionMessage=undefined;this.valueFormat=undefined;this.showValues=undefined;this.showGrid=true;this.showLegend=true;this.showBarLegend=false;this.notStartedColor=false;this.labelPosition="top";this.isTabbing=false;this.userIsNavigating=false;this.hasHiddenBarValue=false}get tempValueFormat(){return this.valueFormat||this.showValues||"none"}get hybridType(){return window.innerWidth>1340?"doughnut0":"bar1"}get popoverEl(){return this.el.shadowRoot.querySelector("priv-chart-popover")}get sliceEls(){return Array.from(this.el.shadowRoot.querySelectorAll(".segment"))}get currentChartType(){let e=this.chartType;if(this.chartType==="hybrid"){e=this.hybridType}else if(this.chartType==="doughnut2"&&this.el.children.length>3){e="doughnut2plus"}return e}get chartDetails(){return m[this.currentChartType]}get ariaLabelText(){let e=`${this.label}`;if(this.subinfo){e+=` ${this.subinfo}`}return e}get isDoughnut(){return this.chartDetails.category==="doughnut"}get isStackedBar(){return this.chartDetails.category==="stackedBar"}get isSimpleBar(){return this.chartDetails.category==="simpleBar"}get isBar(){return this.isStackedBar||this.isSimpleBar}get chartRoleDescription(){return s.formatMessage({id:"chart.roleDescription",defaultMessage:"Interactive chart",description:"For screen readers only, a description clarifying the role of the chart widget"})}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleKeydown(e){i.call(this,e)}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.")}if(this.showValues){console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.")}await c.call(this,this.currentChartType);if(this.chartType==="hybrid"||!this.isDoughnut){const e=new ResizeObserver((()=>{this.isStackedBar?this.handleStackedBarResize():this.debouncedUpdate()}));e.observe(this.el)}}handleSliceUpdate(){this.debouncedSliceUpdate()}renderBarText(e,r){let a;if(this.tempValueFormat==="percentage"){a=e.perc===0&&e.amount>0?"<1%":`${e.perc}%`}else if(this.tempValueFormat==="amount"){a=e.amount}return t("div",{class:"value-wrapper",style:{width:`calc(${w(e.amount,this.total,false)}%\n        ${r!==this.slicesDetails.length-1?" - 2px":""}`}},t("span",{class:"value"},e.amount>0&&a))}drawAxis(){if(this.currentChartType==="bar3"){return t("svg",{class:"axis"},t("line",{x1:"0",x2:"100%",y1:"0",y2:"0"}),t("line",{x1:"0",x2:"0",y1:"0",y2:"-85px"}),t("line",{class:"tick",x1:"0.5",x2:"0.5",y1:"0",y2:"6"}),t("text",{x:"0.5",y:"-6"},"0%"),t("line",{class:"tick",x1:"100%",x2:"100%",y1:"0",y2:"6"}),t("text",{x:"100%",y:"-6"},"100%"))}}renderChart(){if(this.total>0){if(this.isStackedBar){return h.call(this,this.currentChartType)}else if(this.isSimpleBar){return l.call(this,this.currentChartType)}else if(this.isDoughnut){return b.call(this,this.currentChartType)}}}render(){return t(a,{onBlur:()=>f.call(this)},t("div",{ref:e=>this.componentWrapperEl=e,class:`component-wrapper ${this.currentChartType} ${this.isTabbing&&!this.userIsNavigating?"user-is-tabbing":""} ${this.labelPosition==="left"&&this.currentChartType==="bar4"?"left-label":""}`,role:"application","aria-label":this.ariaLabelText,tabindex:0,"aria-roledescription":this.chartRoleDescription,"aria-describedby":"chart-instructions"},t("label",{class:"label",id:`label-${this.uid}`,htmlFor:`graphic-${this.uid}`},t("span",{class:"label-text"},this.label),this.subinfo?t("span",{class:"subinfo"},this.subinfo):""),this.isBar&&g.call(this,this.currentChartType),this.renderChart(),this.isDoughnut&&g.call(this,this.currentChartType),t("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":""}),this.currentChartType==="doughnut0"?u.call(this):"",this.hasHiddenBarValue&&x()),d())}static get delegatesFocus(){return true}get el(){return p(this)}};v.style=k;export{v as wm_chart};
-//# sourceMappingURL=p-2b577e99.entry.js.map
+import{r as e,f as r,h as t,H as a,g as p}from"./p-1c23de4a.js";import{g as o,d as n,i as s}from"./p-edfba0e1.js";import{g as c,a as m,h as i,b as w,r as h,c as l,d as b,e as d,f as g,i as u,j as x,k as f}from"./p-f8d1e5a0.js";const k=":host,wm-chart{display:block}:host .component-wrapper,wm-chart .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:0.875rem;position:relative;outline:none;}:host .component-wrapper .label,wm-chart .component-wrapper .label{display:block;margin:0;padding-bottom:0.25rem;font-weight:500;position:relative}:host .component-wrapper .label .subinfo,wm-chart .component-wrapper .label .subinfo{display:block;font-weight:normal;font-style:italic;bottom:0.25rem;width:100%;color:#6b6b6b}:host .component-wrapper .label.custom-width,wm-chart .component-wrapper .label.custom-width{width:var(--custom-label-width)}:host .component-wrapper .doughnut-svg,wm-chart .component-wrapper .doughnut-svg,:host .component-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .inner-stacked-bar-wrapper{overflow:visible}:host .component-wrapper .bar-wrapper,wm-chart .component-wrapper .bar-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper{width:100%}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .values{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment,wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment{height:30px;cursor:pointer}:host .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type),wm-chart .component-wrapper .bar-wrapper .inner-stacked-bar-wrapper .stacked-bar-segments-wrapper .stacked-bar-segment:not(.zero):not(:last-of-type){margin-right:2px}:host .component-wrapper .doughnut-wrapper,wm-chart .component-wrapper .doughnut-wrapper{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}:host .component-wrapper .doughnut-wrapper .doughnut-segment,wm-chart .component-wrapper .doughnut-wrapper .doughnut-segment{cursor:pointer}:host .component-wrapper .value-wrapper,wm-chart .component-wrapper .value-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .component-wrapper .value-wrapper:not(:last-of-type),wm-chart .component-wrapper .value-wrapper:not(:last-of-type){margin-right:2px}:host .component-wrapper .value-wrapper .value.hidden,wm-chart .component-wrapper .value-wrapper .value.hidden{visibility:hidden}:host .component-wrapper path:active,wm-chart .component-wrapper path:active,:host .component-wrapper path:hover,wm-chart .component-wrapper path:hover,:host .component-wrapper path:focus,wm-chart .component-wrapper path:focus,:host .component-wrapper .stacked-bar-segment:active,wm-chart .component-wrapper .stacked-bar-segment:active,:host .component-wrapper .stacked-bar-segment:hover,wm-chart .component-wrapper .stacked-bar-segment:hover,:host .component-wrapper .stacked-bar-segment:focus,wm-chart .component-wrapper .stacked-bar-segment:focus{outline:none}:host .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:active.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.stacked-bar-segment,:host .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.stacked-bar-segment{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper path:active.doughnut-segment,wm-chart .component-wrapper path:active.doughnut-segment,:host .component-wrapper path:hover.doughnut-segment,wm-chart .component-wrapper path:hover.doughnut-segment,:host .component-wrapper path:focus.doughnut-segment,wm-chart .component-wrapper path:focus.doughnut-segment,:host .component-wrapper .stacked-bar-segment:active.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:active.doughnut-segment,:host .component-wrapper .stacked-bar-segment:hover.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:hover.doughnut-segment,:host .component-wrapper .stacked-bar-segment:focus.doughnut-segment,wm-chart .component-wrapper .stacked-bar-segment:focus.doughnut-segment{-webkit-filter:url(#wmHoverDropShadow);filter:url(#wmHoverDropShadow)}:host .component-wrapper path::-moz-focus-inner,wm-chart .component-wrapper path::-moz-focus-inner,:host .component-wrapper .stacked-bar-segment::-moz-focus-inner,wm-chart .component-wrapper .stacked-bar-segment::-moz-focus-inner{border:0;outline:none}:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{width:300px}:host .component-wrapper.doughnut1 label,wm-chart .component-wrapper.doughnut1 label,:host .component-wrapper.doughnut1 .label-text,wm-chart .component-wrapper.doughnut1 .label-text,:host .component-wrapper.doughnut2 label,wm-chart .component-wrapper.doughnut2 label,:host .component-wrapper.doughnut2 .label-text,wm-chart .component-wrapper.doughnut2 .label-text,:host .component-wrapper.doughnut2plus label,wm-chart .component-wrapper.doughnut2plus label,:host .component-wrapper.doughnut2plus .label-text,wm-chart .component-wrapper.doughnut2plus .label-text,:host .component-wrapper.doughnut3 label,wm-chart .component-wrapper.doughnut3 label,:host .component-wrapper.doughnut3 .label-text,wm-chart .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper.doughnut0,wm-chart .component-wrapper.doughnut0,:host .component-wrapper.doughnut,wm-chart .component-wrapper.doughnut{-ms-flex-align:center;align-items:center}:host .component-wrapper.doughnut0 label,wm-chart .component-wrapper.doughnut0 label,:host .component-wrapper.doughnut label,wm-chart .component-wrapper.doughnut label{text-align:center;width:100%;padding-bottom:1.5rem}:host .component-wrapper.doughnut0 label .subinfo,wm-chart .component-wrapper.doughnut0 label .subinfo,:host .component-wrapper.doughnut label .subinfo,wm-chart .component-wrapper.doughnut label .subinfo{position:absolute}:host .component-wrapper.doughnut0 .completion-message,wm-chart .component-wrapper.doughnut0 .completion-message,:host .component-wrapper.doughnut .completion-message,wm-chart .component-wrapper.doughnut .completion-message{padding-top:0.625rem}:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{padding:1.25rem;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .component-wrapper.bar1 label .subinfo,wm-chart .component-wrapper.bar1 label .subinfo,:host .component-wrapper.bar label .subinfo,wm-chart .component-wrapper.bar label .subinfo{position:initial}:host .component-wrapper.bar1 .chart-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper,:host .component-wrapper.bar .chart-wrapper,wm-chart .component-wrapper.bar .chart-wrapper{display:-ms-flexbox;display:flex}:host .component-wrapper.bar1 .chart-wrapper .single-perc,wm-chart .component-wrapper.bar1 .chart-wrapper .single-perc,:host .component-wrapper.bar .chart-wrapper .single-perc,wm-chart .component-wrapper.bar .chart-wrapper .single-perc{width:4rem;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;height:30px;-ms-flex-align:center;align-items:center}:host .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar1 .chart-wrapper .inner-stacked-bar-wrapper,:host .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar .chart-wrapper .inner-stacked-bar-wrapper{-ms-flex:1;flex:1}:host .component-wrapper.bar1 .chart-wrapper .completion-message,wm-chart .component-wrapper.bar1 .chart-wrapper .completion-message,:host .component-wrapper.bar .chart-wrapper .completion-message,wm-chart .component-wrapper.bar .chart-wrapper .completion-message{width:100%;text-align:right;margin-top:0.25rem}@media screen and (min-width: 768px){:host .component-wrapper.bar1,wm-chart .component-wrapper.bar1,:host .component-wrapper.bar,wm-chart .component-wrapper.bar{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.bar1 label,wm-chart .component-wrapper.bar1 label,:host .component-wrapper.bar label,wm-chart .component-wrapper.bar label{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-height:30px;width:12rem;text-align:left;padding-right:1.25rem;padding-bottom:0;-ms-flex:none;flex:none}:host .component-wrapper.bar1 .bar-wrapper,wm-chart .component-wrapper.bar1 .bar-wrapper,:host .component-wrapper.bar .bar-wrapper,wm-chart .component-wrapper.bar .bar-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host .component-wrapper.bar1 .bar-wrapper .single-perc,wm-chart .component-wrapper.bar1 .bar-wrapper .single-perc,:host .component-wrapper.bar .bar-wrapper .single-perc,wm-chart .component-wrapper.bar .bar-wrapper .single-perc{text-align:center;padding-left:0.5rem;-ms-flex-pack:center;justify-content:center}}:host .component-wrapper.bar2,wm-chart .component-wrapper.bar2,:host .component-wrapper.bar3,wm-chart .component-wrapper.bar3,:host .component-wrapper.bar4,wm-chart .component-wrapper.bar4,:host .component-wrapper.bar5,wm-chart .component-wrapper.bar5{-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper{height:30px;margin-bottom:0}:host .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar2 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar4 .inner-stacked-bar-wrapper.show-values,:host .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values,wm-chart .component-wrapper.bar5 .inner-stacked-bar-wrapper.show-values{height:60px;margin-top:0}:host .component-wrapper.bar3 .chart-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper{position:relative;height:100px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper{position:absolute;top:35px;left:0;right:0;bottom:0;height:30px}:host .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text,wm-chart .component-wrapper.bar3 .chart-wrapper .inner-stacked-bar-wrapper text{fill:#4a4a4a}:host .component-wrapper.bar3 .chart-wrapper .axis,wm-chart .component-wrapper.bar3 .chart-wrapper .axis{position:absolute;top:0;left:0;height:90px;width:100%;overflow:visible;-webkit-transform:translateY(90px);transform:translateY(90px)}:host .component-wrapper.bar3 .chart-wrapper .axis line,wm-chart .component-wrapper.bar3 .chart-wrapper .axis line{stroke:#eeedf4;stroke-width:1px}:host .component-wrapper.bar3 .chart-wrapper .axis text,wm-chart .component-wrapper.bar3 .chart-wrapper .axis text{-webkit-transform:translate(4px, 24px);transform:translate(4px, 24px);text-anchor:middle}:host .component-wrapper.bar3 .hidden-values-warning,wm-chart .component-wrapper.bar3 .hidden-values-warning{margin-top:1.25rem}:host .component-wrapper.bar6,wm-chart .component-wrapper.bar6,:host .component-wrapper.bar7,wm-chart .component-wrapper.bar7{--chartPadding:48px;-ms-flex-align:start;align-items:flex-start}:host .component-wrapper.bar6 .chart-wrapper,wm-chart .component-wrapper.bar6 .chart-wrapper,:host .component-wrapper.bar7 .chart-wrapper,wm-chart .component-wrapper.bar7 .chart-wrapper{width:100%}:host .component-wrapper.bar6 .chart,wm-chart .component-wrapper.bar6 .chart,:host .component-wrapper.bar7 .chart,wm-chart .component-wrapper.bar7 .chart{position:relative;padding-right:var(--chartPadding)}:host .component-wrapper.bar6 .gridlines,wm-chart .component-wrapper.bar6 .gridlines,:host .component-wrapper.bar7 .gridlines,wm-chart .component-wrapper.bar7 .gridlines{position:absolute;left:var(--labelWidth);right:var(--chartPadding);top:0;bottom:0;background-image:linear-gradient(90deg, #8f8f8f 1px, transparent 1px);background-position:-1px;border-left:1px solid #8f8f8f;border-bottom:1px solid #8f8f8f;background-size:var(--backgroundSize)}:host .component-wrapper.bar6 .rows,wm-chart .component-wrapper.bar6 .rows,:host .component-wrapper.bar7 .rows,wm-chart .component-wrapper.bar7 .rows{display:grid;grid-template-columns:var(--labelWidth) auto;grid-auto-rows:minmax(30px, 1fr);-ms-flex-align:center;align-items:center;position:relative;z-index:1}:host .component-wrapper.bar6 .rows .label,wm-chart .component-wrapper.bar6 .rows .label,:host .component-wrapper.bar7 .rows .label,wm-chart .component-wrapper.bar7 .rows .label{font-weight:400;padding:0 0.75rem 0 0;text-align:right;margin:0.75rem 0}:host .component-wrapper.bar6 .rows .label.hidden,wm-chart .component-wrapper.bar6 .rows .label.hidden,:host .component-wrapper.bar7 .rows .label.hidden,wm-chart .component-wrapper.bar7 .rows .label.hidden{visibility:hidden;white-space:nowrap}:host .component-wrapper.bar6 .bar,wm-chart .component-wrapper.bar6 .bar,:host .component-wrapper.bar7 .bar,wm-chart .component-wrapper.bar7 .bar{height:30px;position:relative}:host .component-wrapper.bar6 .bar .value,wm-chart .component-wrapper.bar6 .bar .value,:host .component-wrapper.bar7 .bar .value,wm-chart .component-wrapper.bar7 .bar .value{position:absolute;top:50%;right:-0.5rem;-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}:host .component-wrapper.bar6 .x-axis,wm-chart .component-wrapper.bar6 .x-axis,:host .component-wrapper.bar7 .x-axis,wm-chart .component-wrapper.bar7 .x-axis{margin-left:var(--labelWidth);margin-right:var(--chartPadding);display:-ms-flexbox;display:flex;postion:relative}:host .component-wrapper.bar6 .tick,wm-chart .component-wrapper.bar6 .tick,:host .component-wrapper.bar7 .tick,wm-chart .component-wrapper.bar7 .tick{-ms-flex:1;flex:1;text-align:right}:host .component-wrapper.bar6 .tick span,wm-chart .component-wrapper.bar6 .tick span,:host .component-wrapper.bar7 .tick span,wm-chart .component-wrapper.bar7 .tick span{-webkit-transform:translateX(50%);transform:translateX(50%);display:inline-block}:host .component-wrapper.bar6 .zero,wm-chart .component-wrapper.bar6 .zero,:host .component-wrapper.bar7 .zero,wm-chart .component-wrapper.bar7 .zero{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host .component-wrapper.bar6 .bar:active,wm-chart .component-wrapper.bar6 .bar:active,:host .component-wrapper.bar6 .bar:hover,wm-chart .component-wrapper.bar6 .bar:hover,:host .component-wrapper.bar6 .bar:focus,wm-chart .component-wrapper.bar6 .bar:focus,:host .component-wrapper.bar7 .bar:active,wm-chart .component-wrapper.bar7 .bar:active,:host .component-wrapper.bar7 .bar:hover,wm-chart .component-wrapper.bar7 .bar:hover,:host .component-wrapper.bar7 .bar:focus,wm-chart .component-wrapper.bar7 .bar:focus{outline:none}:host .component-wrapper.bar6 .bar:active.bar,wm-chart .component-wrapper.bar6 .bar:active.bar,:host .component-wrapper.bar6 .bar:hover.bar,wm-chart .component-wrapper.bar6 .bar:hover.bar,:host .component-wrapper.bar6 .bar:focus.bar,wm-chart .component-wrapper.bar6 .bar:focus.bar,:host .component-wrapper.bar7 .bar:active.bar,wm-chart .component-wrapper.bar7 .bar:active.bar,:host .component-wrapper.bar7 .bar:hover.bar,wm-chart .component-wrapper.bar7 .bar:hover.bar,:host .component-wrapper.bar7 .bar:focus.bar,wm-chart .component-wrapper.bar7 .bar:focus.bar{-webkit-box-shadow:0px 0px 6px #333;-moz-box-shadow:0px 0px 6px #333;box-shadow:0px 0px 6px #333}:host .component-wrapper.left-label,wm-chart .component-wrapper.left-label{-ms-flex-direction:row;flex-direction:row}:host .component-wrapper.left-label .label,wm-chart .component-wrapper.left-label .label{width:12rem;padding-right:1.25rem;-ms-flex:none;flex:none;-ms-flex-item-align:end;align-self:flex-end;min-height:30px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .component-wrapper .hidden-values-warning,wm-chart .component-wrapper .hidden-values-warning{font-size:0.75rem;font-style:italic;max-width:100%}:host #chart-instructions,wm-chart #chart-instructions{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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .component-wrapper .legend-wrapper,wm-chart .component-wrapper .legend-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-align:center}:host .component-wrapper .legend-wrapper .legend,wm-chart .component-wrapper .legend-wrapper .legend{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:center;padding-top:0.25rem;padding-bottom:0.75rem;-webkit-box-sizing:border-box;box-sizing:border-box}:host .component-wrapper .legend-wrapper .legend.bar1,wm-chart .component-wrapper .legend-wrapper .legend.bar1,:host .component-wrapper .legend-wrapper .legend.bar6,wm-chart .component-wrapper .legend-wrapper .legend.bar6{display:none}:host .component-wrapper .legend-wrapper .legend.--top,wm-chart .component-wrapper .legend-wrapper .legend.--top{margin-top:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-item{padding-top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--top .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--top .legend-color{top:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom,wm-chart .component-wrapper .legend-wrapper .legend.--bottom{margin-bottom:-0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-item,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-item{padding-bottom:0.75rem}:host .component-wrapper .legend-wrapper .legend.--bottom .legend-color,wm-chart .component-wrapper .legend-wrapper .legend.--bottom .legend-color{top:-0.75rem}:host .component-wrapper .legend-wrapper .legend .legend-item,wm-chart .component-wrapper .legend-wrapper .legend .legend-item{position:relative}:host .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type),wm-chart .component-wrapper .legend-wrapper .legend .legend-item:not(:last-of-type){padding-right:1.25rem}:host .component-wrapper .legend-wrapper .legend .legend-text,wm-chart .component-wrapper .legend-wrapper .legend .legend-text{font-size:0.875rem;padding-left:1rem;line-height:1}:host .component-wrapper .legend-wrapper .legend .legend-color,wm-chart .component-wrapper .legend-wrapper .legend .legend-color{position:absolute;left:0;bottom:0;margin:auto;width:0.6875rem;height:0.6875rem}:host .component-wrapper .legend-wrapper .legend.bar3,wm-chart .component-wrapper .legend-wrapper .legend.bar3{padding-bottom:1.25rem}:host(:focus){outline:none}:host(:focus) .component-wrapper.user-is-tabbing .stacked-bar-segments-wrapper,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-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 .stacked-bar-segments-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .simple-bar-wrapper::-moz-focus-inner,:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner{border:0}";const v=class{constructor(t){e(this,t);this.uid=o();this.slicesDetails=[];this.handleStackedBarResize=n((async()=>{let e=false;const r=this.el.shadowRoot.querySelectorAll(".value");if(r.length){let t=r.length?r[0].getBoundingClientRect().right:0;let a=4;r.forEach(((r,p)=>{if(p>0){const p=r.getBoundingClientRect();if(p.left-a<t){r.classList.add("hidden");e=true}else{r.classList.remove("hidden");t=p.right}}}))}this.hasHiddenBarValue=e}),100);this.debouncedUpdate=n((async()=>{r(this.el)}),10);this.debouncedSliceUpdate=n((async()=>{await c.call(this,this.currentChartType);r(this.el)}),100);this.chartType="doughnut1";this.label=undefined;this.labelWidth="150px";this.subinfo=undefined;this.completionMessage=undefined;this.valueFormat=undefined;this.showValues=undefined;this.showGrid=true;this.showLegend=true;this.showBarLegend=false;this.notStartedColor=false;this.labelPosition="top";this.isTabbing=false;this.userIsNavigating=false;this.hasHiddenBarValue=false}get tempValueFormat(){return this.valueFormat||this.showValues||"none"}get hybridType(){return window.innerWidth>1340?"doughnut0":"bar1"}get popoverEl(){return this.el.shadowRoot.querySelector("priv-chart-popover")}get sliceEls(){return Array.from(this.el.shadowRoot.querySelectorAll(".segment"))}get currentChartType(){let e=this.chartType;if(this.chartType==="hybrid"){e=this.hybridType}else if(this.chartType==="doughnut2"&&this.el.children.length>3){e="doughnut2plus"}return e}get chartDetails(){return m[this.currentChartType]}get ariaLabelText(){let e=`${this.label}`;if(this.subinfo){e+=` ${this.subinfo}`}return e}get isDoughnut(){return this.chartDetails.category==="doughnut"}get isStackedBar(){return this.chartDetails.category==="stackedBar"}get isSimpleBar(){return this.chartDetails.category==="simpleBar"}get isBar(){return this.isStackedBar||this.isSimpleBar}get chartRoleDescription(){return s.formatMessage({id:"chart.roleDescription",defaultMessage:"Interactive chart",description:"For screen readers only, a description clarifying the role of the chart widget"})}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleKeydown(e){i.call(this,e)}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.")}if(this.showValues){console.warn("wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.")}await c.call(this,this.currentChartType);if(this.chartType==="hybrid"||!this.isDoughnut){const e=new ResizeObserver((()=>{this.isStackedBar?this.handleStackedBarResize():this.debouncedUpdate()}));e.observe(this.el)}}handleSliceUpdate(){this.debouncedSliceUpdate()}renderBarText(e,r){let a;if(this.tempValueFormat==="percentage"){a=e.perc===0&&e.amount>0?"<1%":`${e.perc}%`}else if(this.tempValueFormat==="amount"){a=e.amount}return t("div",{class:"value-wrapper",style:{width:`calc(${w(e.amount,this.total,false)}%\n        ${r!==this.slicesDetails.length-1?" - 2px":""}`}},t("span",{class:"value"},e.amount>0&&a))}drawAxis(){if(this.currentChartType==="bar3"){return t("svg",{class:"axis"},t("line",{x1:"0",x2:"100%",y1:"0",y2:"0"}),t("line",{x1:"0",x2:"0",y1:"0",y2:"-85px"}),t("line",{class:"tick",x1:"0.5",x2:"0.5",y1:"0",y2:"6"}),t("text",{x:"0.5",y:"-6"},"0%"),t("line",{class:"tick",x1:"100%",x2:"100%",y1:"0",y2:"6"}),t("text",{x:"100%",y:"-6"},"100%"))}}renderChart(){if(this.total>0){if(this.isStackedBar){return h.call(this,this.currentChartType)}else if(this.isSimpleBar){return l.call(this,this.currentChartType)}else if(this.isDoughnut){return b.call(this,this.currentChartType)}}}render(){return t(a,{onBlur:()=>f.call(this)},t("div",{ref:e=>this.componentWrapperEl=e,class:`component-wrapper ${this.currentChartType} ${this.isTabbing&&!this.userIsNavigating?"user-is-tabbing":""} ${this.labelPosition==="left"&&this.currentChartType==="bar4"?"left-label":""}`,role:"application","aria-label":this.ariaLabelText,tabindex:0,"aria-roledescription":this.chartRoleDescription,"aria-describedby":"chart-instructions"},t("label",{class:"label",id:`label-${this.uid}`,htmlFor:`graphic-${this.uid}`},t("span",{class:"label-text"},this.label),this.subinfo?t("span",{class:"subinfo"},this.subinfo):""),this.isBar&&g.call(this,this.currentChartType),this.renderChart(),this.isDoughnut&&g.call(this,this.currentChartType),t("priv-chart-popover",{class:this.isTabbing?"user-is-tabbing":""}),this.currentChartType==="doughnut0"?u.call(this):"",this.hasHiddenBarValue&&x()),d())}static get delegatesFocus(){return true}get el(){return p(this)}};v.style=k;export{v as wm_chart};
+//# sourceMappingURL=p-873a5f0f.entry.js.map

package/dist/ripple/p-873a5f0f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmChartCss","Chart","this","uid","generateId","slicesDetails","handleStackedBarResize","debounce","async","hasHiddenBarValue","valueEls","el","shadowRoot","querySelectorAll","length","lastVisibleRightEdge","getBoundingClientRect","right","margin","forEach","valueEl","idx","bounds","left","classList","add","remove","debouncedUpdate","forceUpdate","debouncedSliceUpdate","getDetails","call","currentChartType","tempValueFormat","valueFormat","showValues","hybridType","window","innerWidth","popoverEl","querySelector","sliceEls","Array","from","current","chartType","children","chartDetails","allChartsDetails","ariaLabelText","text","label","subinfo","isDoughnut","category","isStackedBar","isSimpleBar","isBar","chartRoleDescription","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","Error","console","warn","resizeObserver","ResizeObserver","observe","handleSliceUpdate","renderBarText","s","val","perc","amount","h","class","style","width","amountToPercent","total","drawAxis","x1","x2","y1","y2","x","y","renderChart","renderStackedBar","renderSimpleBar","renderDoughnut","render","Host","onBlur","exitChart","ref","componentWrapperEl","userIsNavigating","labelPosition","role","tabindex","htmlFor","renderLegend","renderCompletionMessage","renderHiddenValuesMessage","renderInstructionsText"],"sources":["./src/components/charts/wm-chart/wm-chart.scss?tag=wm-chart&encapsulation=shadow","./src/components/charts/wm-chart/wm-chart.tsx"],"sourcesContent":[":host,\r\nwm-chart {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { debounce, generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  amountToPercent,\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderSimpleBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderHiddenValuesMessage,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\nimport { ChartType, SliceDetails, SliceElement } from \"../../../global/interfaces\";\r\n\r\n@Component({\r\n  tag: \"wm-chart\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-chart.scss\",\r\n})\r\nexport class Chart {\r\n  @Element() el!: HTMLWmChartElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() chartType: ChartType | \"hybrid\" = \"doughnut1\"; // hybrid is not a real ChartType, it gets converted to something else.\r\n  @Prop() label?: string;\r\n  @Prop() labelWidth: string = \"150px\";\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() valueFormat?: \"percentage\" | \"amount\";\r\n  @Prop() showValues?: \"percentage\" | \"amount\"; // DEPRECATED in favor of value-format\r\n  @Prop() showGrid?: boolean = true; \r\n  get tempValueFormat() {\r\n    // use of this getter should be replaced with dateFormat when showValues is fully phased out\r\n    return this.valueFormat || this.showValues || \"none\";\r\n  }\r\n  @Prop() showLegend: boolean = true;\r\n  @Prop() showBarLegend: boolean = false;\r\n  @Prop() notStartedColor: boolean = false;\r\n  // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented\r\n  // it only works with bar4 and should be used without a legend\r\n  @Prop() labelPosition: \"left\" | \"top\" = \"top\";\r\n  @State() isTabbing: boolean = false;\r\n  @State() userIsNavigating: boolean = false;\r\n  @State() hasHiddenBarValue: boolean = false;\r\n\r\n  get hybridType(): \"doughnut0\" | \"bar1\" {\r\n    return window.innerWidth > 1340 ? \"doughnut0\" : \"bar1\";\r\n  }\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  private slicesDetails: SliceDetails[] = [];\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n\r\n  get sliceEls(): SliceElement[] {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\"));\r\n  }\r\n\r\n  get currentChartType(): ChartType {\r\n    let current = this.chartType as ChartType;\r\n\r\n    if (this.chartType === \"hybrid\") {\r\n      current = this.hybridType;\r\n    } else if (this.chartType === \"doughnut2\" && this.el.children.length > 3) {\r\n      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices\r\n      current = \"doughnut2plus\";\r\n    }\r\n    return current; \r\n  }\r\n\r\n  get chartDetails() {\r\n    return allChartsDetails[this.currentChartType];\r\n  }\r\n\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get isDoughnut() {\r\n    return this.chartDetails.category === \"doughnut\";\r\n  }\r\n\r\n  get isStackedBar() {\r\n    return this.chartDetails.category === \"stackedBar\";\r\n  }\r\n\r\n  get isSimpleBar() {\r\n    return this.chartDetails.category === \"simpleBar\";\r\n  }\r\n\r\n  get isBar() {\r\n    return this.isStackedBar || this.isSimpleBar;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */\r\n\r\n  async componentWillLoad() {\r\n    if (!this.label) {\r\n      throw new Error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n    if (this.showValues) {\r\n      console.warn(\"wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.\");\r\n    }\r\n    await getDetails.call(this, this.currentChartType);\r\n\r\n    // rerender on resize\r\n    // unnecessary for doughnuts (except hybrid) as layout doesn't change\r\n    if (this.chartType === \"hybrid\" || !this.isDoughnut) {\r\n      const resizeObserver = new ResizeObserver(() => {\r\n        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();\r\n      });\r\n      resizeObserver.observe(this.el);\r\n    }\r\n  }\r\n\r\n  handleStackedBarResize = debounce(async () => {\r\n    let hasHiddenBarValue = false;\r\n\r\n    // if any value text overlaps with another, hide it and display warning\r\n    const valueEls = this.el.shadowRoot!.querySelectorAll(\".value\");\r\n\r\n    if (valueEls.length) {\r\n      let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;\r\n      let margin = 4;\r\n\r\n      valueEls.forEach((valueEl, idx) => {\r\n        // checks are to the left of each valueEl, so skip the first one\r\n        if (idx > 0) {\r\n          const bounds = valueEl.getBoundingClientRect();\r\n\r\n          if (bounds.left - margin < lastVisibleRightEdge) {\r\n            // left edge of current value is overlapping right edge of last visible value\r\n            valueEl.classList.add(\"hidden\");\r\n            hasHiddenBarValue = true;\r\n          } else {\r\n            valueEl.classList.remove(\"hidden\");\r\n            lastVisibleRightEdge = bounds.right;\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    this.hasHiddenBarValue = hasHiddenBarValue;\r\n  }, 100);\r\n\r\n  debouncedUpdate = debounce(async () => {\r\n    forceUpdate(this.el);\r\n  }, 10);\r\n\r\n  debouncedSliceUpdate = debounce(async () => {\r\n    await getDetails.call(this, this.currentChartType);\r\n    forceUpdate(this.el);\r\n  }, 100);\r\n\r\n  @Listen(\"wmChartSliceUpdated\")\r\n  handleSliceUpdate() {\r\n    this.debouncedSliceUpdate();\r\n  }\r\n\r\n  /* RENDERING */\r\n  renderBarText(s: SliceDetails, idx: number) {\r\n    let val;\r\n    if (this.tempValueFormat === \"percentage\") {\r\n      // if segment has an amount, but \"0\" percentage (it's below 0.5% and rounded down), still display it as <1%\r\n      val = s.perc === 0 && s.amount > 0 ? \"<1%\" : `${s.perc}%`;\r\n    } else if (this.tempValueFormat === \"amount\") {\r\n      val = s.amount;\r\n    }\r\n\r\n    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper\r\n    // in order to not disturb the positioning of the other value texts in the entire row\r\n    return (\r\n      <div\r\n        class=\"value-wrapper\"\r\n        style={{\r\n          width: `calc(${amountToPercent(s.amount, this.total, false)}%\r\n        ${idx !== this.slicesDetails.length - 1 ? \" - 2px\" : \"\"}`,\r\n        }}\r\n      >\r\n        <span class=\"value\">{s.amount > 0 && val}</span>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  drawAxis() {\r\n    if (this.currentChartType === \"bar3\") {\r\n      return (\r\n        <svg class=\"axis\">\r\n          <line x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\" />\r\n          <line x1=\"0\" x2=\"0\" y1=\"0\" y2=\"-85px\" />\r\n          <line class=\"tick\" x1=\"0.5\" x2=\"0.5\" y1=\"0\" y2=\"6\" />\r\n          <text x=\"0.5\" y=\"-6\">\r\n            0%\r\n          </text>\r\n          <line class=\"tick\" x1=\"100%\" x2=\"100%\" y1=\"0\" y2=\"6\" />\r\n          <text x=\"100%\" y=\"-6\">\r\n            100%\r\n          </text>\r\n        </svg>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderChart() {\r\n    if (this.total > 0) {\r\n      if (this.isStackedBar) {\r\n        return renderStackedBar.call(this, this.currentChartType);\r\n      } else if (this.isSimpleBar) {\r\n        return renderSimpleBar.call(this, this.currentChartType);\r\n      } else if (this.isDoughnut) {\r\n        return renderDoughnut.call(this, this.currentChartType);\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.currentChartType} ${\r\n            this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"\r\n          } ${this.labelPosition === \"left\" && this.currentChartType === \"bar4\" ? \"left-label\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex={0}\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby=\"chart-instructions\"\r\n        >\r\n          <label class=\"label\" id={`label-${this.uid}`} htmlFor={`graphic-${this.uid}`}>\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.isBar && renderLegend.call(this, this.currentChartType)}\r\n          {this.renderChart()}\r\n          {this.isDoughnut && renderLegend.call(this, this.currentChartType)}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.currentChartType === \"doughnut0\" ? renderCompletionMessage.call(this) : \"\"}\r\n          {this.hasHiddenBarValue && renderHiddenValuesMessage()}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-8c51e9f8.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["privNavigatorItemCss","PrivNavigatorItem","exports","class_1","prototype","handleKeyDown","ev","key","el","this","preventDefault","keydownOnNavItem","emit","navItem","render","selectedClass","selected","focusedClass","focused","h","class","concat"],"sources":["src/components/wm-navigator/priv-navigator-item/priv-navigator-item.scss?tag=priv-navigator-item&encapsulation=shadow","src/components/wm-navigator/priv-navigator-item/priv-navigator-item.tsx"],"sourcesContent":[":host,\npriv-navigator-item {\n  list-style: none;\n  border-bottom: 1px solid #e0dde4;\n  width: 100%;\n  display: block;\n  cursor: pointer;\n\n  .navoption {\n    color: #404248;\n    padding: 0.9375rem 1.25rem;\n    background: #fff;\n    font-size: rem-calc(14);\n\n    &.selected,\n    &:hover {\n      background: #e5e5e5;\n    }\n\n    &.focused:not(.selected) {\n      background: $background;\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: \"priv-navigator-item\",\n  styleUrl: \"priv-navigator-item.scss\",\n  shadow: true,\n})\nexport class PrivNavigatorItem {\n  @Element() el!: any;\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Prop({ mutable: true }) focused: boolean = false;\n  @Prop({ mutable: true }) link: string = \"\";\n  @Event() keydownOnNavItem!: EventEmitter<{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }>;\n\n  @Listen(\"keydown\")\n  handleKeyDown(ev: KeyboardEvent) {\n    const key = ev.key;\n    const el = this.el;\n    if (key !== \"Tab\") {\n      ev.preventDefault();\n    }\n    this.keydownOnNavItem.emit({ navItem: el, key: key });\n  }\n\n  render() {\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const focusedClass = this.focused ? \"focused\" : \"\";\n\n    return (\n      <div class={`navoption ${selectedClass} ${focusedClass}`}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"0JAAA,IAAMA,EAAuB,4f,ICOhBC,EAAiBC,EAAA,iC,yFAEiB,M,aACD,M,UACJ,E,CAOxCC,EAAAC,UAAAC,cAAA,SAAcC,GACZ,IAAMC,EAAMD,EAAGC,IACf,IAAMC,EAAKC,KAAKD,GAChB,GAAID,IAAQ,MAAO,CACjBD,EAAGI,gB,CAELD,KAAKE,iBAAiBC,KAAK,CAAEC,QAASL,EAAID,IAAKA,G,EAGjDJ,EAAAC,UAAAU,OAAA,WACE,IAAMC,EAAgBN,KAAKO,SAAW,WAAa,GACnD,IAAMC,EAAeR,KAAKS,QAAU,UAAY,GAEhD,OACEC,EAAA,OAAKC,MAAO,aAAAC,OAAaN,EAAa,KAAAM,OAAIJ,IACxCE,EAAA,a,uHA1BsB,I"}
+{"version":3,"names":["privNavigatorItemCss","PrivNavigatorItem","exports","class_1","prototype","handleKeyDown","ev","key","el","this","preventDefault","keydownOnNavItem","emit","navItem","render","selectedClass","selected","focusedClass","focused","h","class","concat"],"sources":["src/components/wm-navigator/priv-navigator-item/priv-navigator-item.scss?tag=priv-navigator-item&encapsulation=shadow","src/components/wm-navigator/priv-navigator-item/priv-navigator-item.tsx"],"sourcesContent":[":host,\r\npriv-navigator-item {\r\n  list-style: none;\r\n  border-bottom: 1px solid #e0dde4;\r\n  width: 100%;\r\n  display: block;\r\n  cursor: pointer;\r\n\r\n  .navoption {\r\n    color: #404248;\r\n    padding: 0.9375rem 1.25rem;\r\n    background: #fff;\r\n    font-size: rem-calc(14);\r\n\r\n    &.selected,\r\n    &:hover {\r\n      background: #e5e5e5;\r\n    }\r\n\r\n    &.focused:not(.selected) {\r\n      background: $background;\r\n      opacity: 1;\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"priv-navigator-item\",\r\n  styleUrl: \"priv-navigator-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class PrivNavigatorItem {\r\n  @Element() el!: any;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop({ mutable: true }) focused: boolean = false;\r\n  @Prop({ mutable: true }) link: string = \"\";\r\n  @Event() keydownOnNavItem!: EventEmitter<{\r\n    navItem: HTMLPrivNavigatorItemElement;\r\n    key: string;\r\n  }>;\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    const key = ev.key;\r\n    const el = this.el;\r\n    if (key !== \"Tab\") {\r\n      ev.preventDefault();\r\n    }\r\n    this.keydownOnNavItem.emit({ navItem: el, key: key });\r\n  }\r\n\r\n  render() {\r\n    const selectedClass = this.selected ? \"selected\" : \"\";\r\n    const focusedClass = this.focused ? \"focused\" : \"\";\r\n\r\n    return (\r\n      <div class={`navoption ${selectedClass} ${focusedClass}`}>\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0JAAA,IAAMA,EAAuB,4f,ICOhBC,EAAiBC,EAAA,iC,yFAEiB,M,aACD,M,UACJ,E,CAOxCC,EAAAC,UAAAC,cAAA,SAAcC,GACZ,IAAMC,EAAMD,EAAGC,IACf,IAAMC,EAAKC,KAAKD,GAChB,GAAID,IAAQ,MAAO,CACjBD,EAAGI,gB,CAELD,KAAKE,iBAAiBC,KAAK,CAAEC,QAASL,EAAID,IAAKA,G,EAGjDJ,EAAAC,UAAAU,OAAA,WACE,IAAMC,EAAgBN,KAAKO,SAAW,WAAa,GACnD,IAAMC,EAAeR,KAAKS,QAAU,UAAY,GAEhD,OACEC,EAAA,OAAKC,MAAO,aAAAC,OAAaN,EAAa,KAAAM,OAAIJ,IACxCE,EAAA,a,uHA1BsB,I"}

package/dist/ripple/{p-be954fba.system.entry.js → p-8e11777d.system.entry.js}

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(e,t,a){if(a||arguments.length===2)for(var n=0,r=t.length,i;n<r;n++){if(i||!(n in t)){if(!i)i=Array.prototype.slice.call(t,0,n);i[n]=t[n]}}return e.concat(i||Array.prototype.slice.call(t))};System.register(["./p-7b2fc615.system.js","./p-e782194d.system.js"],(function(e){"use strict";var t,a,n,r,i;return{setters:[function(e){t=e.r;a=e.c;n=e.h;r=e.g},function(e){i=e.d}],execute:function(){var s='nav .largescreen,nav .smallscreen{margin-bottom:0.625rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-ms-flex-pack:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;font-size:0.875rem}nav .largescreen .pageview,nav .smallscreen .pageview{font-size:0.875rem;margin:0 0.625rem}nav .largescreen .paginationbtn,nav .smallscreen .paginationbtn{position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none;border:none;color:#575195;background-color:transparent;margin:0;padding:0;height:2.5rem;width:2.5rem;font-family:inherit;letter-spacing:0.3px;font-size:0.875rem;font-weight:500;cursor:pointer;text-transform:none}nav .largescreen .paginationbtn svg *,nav .smallscreen .paginationbtn svg *{fill:#565397}nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]){text-decoration:underline}nav .largescreen .paginationbtn:focus,nav .smallscreen .paginationbtn:focus{outline:none}nav .largescreen .paginationbtn::-moz-focus-inner,nav .smallscreen .paginationbtn::-moz-focus-inner{border:0;outline:none}nav .largescreen .paginationbtn[disabled],nav .smallscreen .paginationbtn[disabled]{color:#9f9f9f;pointer-events:none}nav .largescreen .paginationbtn[disabled] svg *,nav .smallscreen .paginationbtn[disabled] svg *{fill:#9f9f9f}nav .largescreen .previousbtn,nav .smallscreen .previousbtn{margin-right:0.625rem;width:auto !important}nav .largescreen .nextbtn,nav .smallscreen .nextbtn{margin-left:0.625rem;margin-right:0;width:auto !important}nav .largescreen .previousbtn,nav .largescreen .nextbtn,nav .smallscreen .previousbtn,nav .smallscreen .nextbtn{-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none}nav .largescreen .ellipsis,nav .smallscreen .ellipsis{display:inline-block;width:2.5rem;text-align:center}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]),nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before{position:absolute;content:"";height:auto;width:16px;top:0;bottom:0;left:12px;right:0;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 2px;background-position:0 2em;border-radius:0;line-height:normal}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus{-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}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner{border:0}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{width:56px !important}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{width:32px !important}nav .largescreen .paginationbtn[aria-current=page]{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background-color:#575195;color:#fff}nav .largescreen .paginationbtn[aria-current=page]:hover{-webkit-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background:#4e4986}.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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var o=e("wm_pagination",function(){function e(e){var n=this;t(this,e);this.wmPaginationPageClicked=a(this,"wmPaginationPageClicked",7);this.pageClicked=a(this,"pageClicked",7);this.focusCurrentPage=a(this,"focusCurrentPage",7);this.totalPages=0;this.debouncedResize=i((function(){n.isLargeViewport=window.innerWidth>600}),250);this.getMiddlePageNums=function(){var e;if(n.currentPage<4){e=[2,3,4]}else if(n.currentPage>n.totalPages-3){e=[n.totalPages-3,n.totalPages-2,n.totalPages-1]}else{e=[n.currentPage-1,n.currentPage,n.currentPage+1]}return e};this.currentPage=1;this.totalItems=undefined;this.itemsPerPage=undefined;this.value=1;this.isLargeViewport=window.innerWidth>600;this.isTabbing=false;this.srAnnouncement=""}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.maintainFocusOnNumberChange=function(e){var t=this;window.requestAnimationFrame((function(){switch(e){case"previous":t.currentPage===1&&t.el.shadowRoot.querySelector("button#wm-1").focus();break;case"next":t.currentPage===t.totalPages&&t.el.shadowRoot.querySelector("button#wm-".concat(t.totalPages)).focus();break;case"prev-arrow":t.currentPage===1&&t.el.shadowRoot.querySelector("#next-arw").focus();break;case"next-arrow":t.currentPage===t.totalPages&&t.el.shadowRoot.querySelector("#previous-arw").focus();break;case"page":t.el.shadowRoot.querySelector("button#wm-".concat(t.currentPage)).focus();default:return}}))};e.prototype.handleResize=function(){this.debouncedResize()};e.prototype.calculateTotalPages=function(){this.totalPages=Math.ceil(this.totalItems/this.itemsPerPage)};e.prototype.componentWillLoad=function(){var e=this;if(!this.totalItems||!this.itemsPerPage||!this.currentPage){throw new Error("Please check the required attributes")}this.calculateTotalPages();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=function(){if(e.isLargeViewport){e.el.shadowRoot.getElementById("wm-".concat(e.currentPage)).focus()}else{e.currentPage===1?e.el.shadowRoot.getElementById("next-arw").focus():e.el.shadowRoot.getElementById("wm-1-arw").focus()}}};e.prototype.updatePageDisplayed=function(e){this.value=e;this.wmPaginationPageClicked.emit();this.pageClicked.emit();this.srAnnouncement="Current page, ".concat(this.currentPage,". ").concat(this.getCurrentPagesInView())};e.prototype.displayShortPagination=function(){var e=[];for(var t=1;t<=this.totalPages;t++){e.push(this.displayPageNumber(t))}return e};e.prototype.displayLongPagination=function(){var e=this;var t=__spreadArray(__spreadArray([this.displayPageNumber(1),this.currentPage>3&&this.displayEllipsis()],this.getMiddlePageNums().map((function(t){return e.displayPageNumber(t)})),true),[this.currentPage+2<this.totalPages&&this.displayEllipsis(),this.displayPageNumber(this.totalPages)],false);return t};e.prototype.displayPageNumber=function(e){var t=this;return n("button",{id:"wm-".concat(e),class:"paginationbtn",onClick:function(){t.currentPage=e;t.updatePageDisplayed(e);t.maintainFocusOnNumberChange("page")},value:e,"aria-label":this.currentPage!==e?"Go to page ".concat(e):"","aria-current":this.currentPage===e?"page":undefined},e)};e.prototype.displayEllipsis=function(){return n("span",{class:"ellipsis"},"...")};e.prototype.getCurrentPagesInView=function(){var e=this.itemsPerPage*this.currentPage;var t=e-this.itemsPerPage+1;if(e>this.totalItems){e=this.totalItems}return"Viewing "+(t===e?"".concat(t):"".concat(t,"–").concat(e," of ").concat(this.totalItems))};e.prototype.renderLarge=function(){var e=this;return n("div",{class:"largescreen"},n("div",{class:"pageview"},this.getCurrentPagesInView()),n("div",{class:"pagebtncontainer ".concat(this.isTabbing?"user-is-tabbing":"")},n("button",{id:"previous",class:"paginationbtn previousbtn",onClick:function(){e.currentPage=e.currentPage-1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("previous")},disabled:this.currentPage===1,"aria-label":"Go to previous page","aria-controls":"status"},"Previous"),this.totalPages<6?this.displayShortPagination():this.displayLongPagination(),n("button",{id:"next",class:"paginationbtn nextbtn",onClick:function(){e.currentPage=e.currentPage+1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("next")},disabled:this.currentPage===this.totalPages,"aria-label":"Go to next page","aria-controls":"status"},"Next")))};e.prototype.renderSmall=function(){var e=this;return n("div",{class:"smallscreen"},n("div",{class:"pagebtncontainer ".concat(this.isTabbing?"user-is-tabbing":"")},n("button",{id:"wm-1-arw",class:"paginationbtn",onClick:function(){e.currentPage=1;e.updatePageDisplayed(1);e.maintainFocusOnNumberChange("prev-arrow")},value:1,"aria-current":this.currentPage===1?"page":undefined,"aria-label":"Go to page 1","aria-controls":"status",disabled:this.currentPage===1},n("svg",{width:"16",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z"}))),n("button",{id:"previous-arw",class:"paginationbtn previousbtn",onClick:function(){e.currentPage-=1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("prev-arrow")},disabled:this.currentPage===1,"aria-label":"Go to previous page"},n("svg",{width:"8",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z"}))),"Page ",this.currentPage," of ",this.totalPages,n("button",{id:"next-arw",class:"paginationbtn nextbtn",onClick:function(){e.currentPage+=1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("next-arrow")},disabled:this.currentPage===this.totalPages,"aria-label":"Go to next page"},n("svg",{width:"8",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z"}))),n("button",{id:"wm-".concat(this.totalPages,"-arw"),class:"paginationbtn",onClick:function(){e.currentPage=e.totalPages;e.updatePageDisplayed(e.totalPages);e.maintainFocusOnNumberChange("next-arrow")},value:this.totalPages,"aria-current":this.currentPage===this.totalPages?"page":undefined,"aria-label":"Go to last page, page ".concat(this.totalPages),"aria-controls":"status",disabled:this.currentPage===this.totalPages},n("svg",{width:"17",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z"})))))};e.prototype.render=function(){return this.totalItems>this.itemsPerPage&&n("nav",{"aria-label":"Pagination Navigation. ".concat(this.getCurrentPagesInView(),". Current page, ").concat(this.currentPage,".")},this.isLargeViewport?this.renderLarge():this.renderSmall(),n("div",{id:"status",class:"sr-only","aria-live":"polite","aria-relevant":"text","aria-atomic":"true"},this.srAnnouncement))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{totalItems:["calculateTotalPages"],itemsPerPage:["calculateTotalPages"]}},enumerable:false,configurable:true});return e}());o.style=s}}}));
-//# sourceMappingURL=p-be954fba.system.entry.js.map
+var __spreadArray=this&&this.__spreadArray||function(e,t,a){if(a||arguments.length===2)for(var n=0,r=t.length,i;n<r;n++){if(i||!(n in t)){if(!i)i=Array.prototype.slice.call(t,0,n);i[n]=t[n]}}return e.concat(i||Array.prototype.slice.call(t))};System.register(["./p-7b2fc615.system.js","./p-f08e6a5a.system.js"],(function(e){"use strict";var t,a,n,r,i;return{setters:[function(e){t=e.r;a=e.c;n=e.h;r=e.g},function(e){i=e.d}],execute:function(){var s='nav .largescreen,nav .smallscreen{margin-bottom:0.625rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-ms-flex-pack:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;font-size:0.875rem}nav .largescreen .pageview,nav .smallscreen .pageview{font-size:0.875rem;margin:0 0.625rem}nav .largescreen .paginationbtn,nav .smallscreen .paginationbtn{position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none;border:none;color:#575195;background-color:transparent;margin:0;padding:0;height:2.5rem;width:2.5rem;font-family:inherit;letter-spacing:0.3px;font-size:0.875rem;font-weight:500;cursor:pointer;text-transform:none}nav .largescreen .paginationbtn svg *,nav .smallscreen .paginationbtn svg *{fill:#565397}nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]){text-decoration:underline}nav .largescreen .paginationbtn:focus,nav .smallscreen .paginationbtn:focus{outline:none}nav .largescreen .paginationbtn::-moz-focus-inner,nav .smallscreen .paginationbtn::-moz-focus-inner{border:0;outline:none}nav .largescreen .paginationbtn[disabled],nav .smallscreen .paginationbtn[disabled]{color:#9f9f9f;pointer-events:none}nav .largescreen .paginationbtn[disabled] svg *,nav .smallscreen .paginationbtn[disabled] svg *{fill:#9f9f9f}nav .largescreen .previousbtn,nav .smallscreen .previousbtn{margin-right:0.625rem;width:auto !important}nav .largescreen .nextbtn,nav .smallscreen .nextbtn{margin-left:0.625rem;margin-right:0;width:auto !important}nav .largescreen .previousbtn,nav .largescreen .nextbtn,nav .smallscreen .previousbtn,nav .smallscreen .nextbtn{-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none}nav .largescreen .ellipsis,nav .smallscreen .ellipsis{display:inline-block;width:2.5rem;text-align:center}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]),nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before{position:absolute;content:"";height:auto;width:16px;top:0;bottom:0;left:12px;right:0;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 2px;background-position:0 2em;border-radius:0;line-height:normal}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus{-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}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner{border:0}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{width:56px !important}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{width:32px !important}nav .largescreen .paginationbtn[aria-current=page]{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background-color:#575195;color:#fff}nav .largescreen .paginationbtn[aria-current=page]:hover{-webkit-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background:#4e4986}.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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var o=e("wm_pagination",function(){function e(e){var n=this;t(this,e);this.wmPaginationPageClicked=a(this,"wmPaginationPageClicked",7);this.pageClicked=a(this,"pageClicked",7);this.focusCurrentPage=a(this,"focusCurrentPage",7);this.totalPages=0;this.debouncedResize=i((function(){n.isLargeViewport=window.innerWidth>600}),250);this.getMiddlePageNums=function(){var e;if(n.currentPage<4){e=[2,3,4]}else if(n.currentPage>n.totalPages-3){e=[n.totalPages-3,n.totalPages-2,n.totalPages-1]}else{e=[n.currentPage-1,n.currentPage,n.currentPage+1]}return e};this.currentPage=1;this.totalItems=undefined;this.itemsPerPage=undefined;this.value=1;this.isLargeViewport=window.innerWidth>600;this.isTabbing=false;this.srAnnouncement=""}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.maintainFocusOnNumberChange=function(e){var t=this;window.requestAnimationFrame((function(){switch(e){case"previous":t.currentPage===1&&t.el.shadowRoot.querySelector("button#wm-1").focus();break;case"next":t.currentPage===t.totalPages&&t.el.shadowRoot.querySelector("button#wm-".concat(t.totalPages)).focus();break;case"prev-arrow":t.currentPage===1&&t.el.shadowRoot.querySelector("#next-arw").focus();break;case"next-arrow":t.currentPage===t.totalPages&&t.el.shadowRoot.querySelector("#previous-arw").focus();break;case"page":t.el.shadowRoot.querySelector("button#wm-".concat(t.currentPage)).focus();default:return}}))};e.prototype.handleResize=function(){this.debouncedResize()};e.prototype.calculateTotalPages=function(){this.totalPages=Math.ceil(this.totalItems/this.itemsPerPage)};e.prototype.componentWillLoad=function(){var e=this;if(!this.totalItems||!this.itemsPerPage||!this.currentPage){throw new Error("Please check the required attributes")}this.calculateTotalPages();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=function(){if(e.isLargeViewport){e.el.shadowRoot.getElementById("wm-".concat(e.currentPage)).focus()}else{e.currentPage===1?e.el.shadowRoot.getElementById("next-arw").focus():e.el.shadowRoot.getElementById("wm-1-arw").focus()}}};e.prototype.updatePageDisplayed=function(e){this.value=e;this.wmPaginationPageClicked.emit();this.pageClicked.emit();this.srAnnouncement="Current page, ".concat(this.currentPage,". ").concat(this.getCurrentPagesInView())};e.prototype.displayShortPagination=function(){var e=[];for(var t=1;t<=this.totalPages;t++){e.push(this.displayPageNumber(t))}return e};e.prototype.displayLongPagination=function(){var e=this;var t=__spreadArray(__spreadArray([this.displayPageNumber(1),this.currentPage>3&&this.displayEllipsis()],this.getMiddlePageNums().map((function(t){return e.displayPageNumber(t)})),true),[this.currentPage+2<this.totalPages&&this.displayEllipsis(),this.displayPageNumber(this.totalPages)],false);return t};e.prototype.displayPageNumber=function(e){var t=this;return n("button",{id:"wm-".concat(e),class:"paginationbtn",onClick:function(){t.currentPage=e;t.updatePageDisplayed(e);t.maintainFocusOnNumberChange("page")},value:e,"aria-label":this.currentPage!==e?"Go to page ".concat(e):"","aria-current":this.currentPage===e?"page":undefined},e)};e.prototype.displayEllipsis=function(){return n("span",{class:"ellipsis"},"...")};e.prototype.getCurrentPagesInView=function(){var e=this.itemsPerPage*this.currentPage;var t=e-this.itemsPerPage+1;if(e>this.totalItems){e=this.totalItems}return"Viewing "+(t===e?"".concat(t):"".concat(t,"–").concat(e," of ").concat(this.totalItems))};e.prototype.renderLarge=function(){var e=this;return n("div",{class:"largescreen"},n("div",{class:"pageview"},this.getCurrentPagesInView()),n("div",{class:"pagebtncontainer ".concat(this.isTabbing?"user-is-tabbing":"")},n("button",{id:"previous",class:"paginationbtn previousbtn",onClick:function(){e.currentPage=e.currentPage-1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("previous")},disabled:this.currentPage===1,"aria-label":"Go to previous page","aria-controls":"status"},"Previous"),this.totalPages<6?this.displayShortPagination():this.displayLongPagination(),n("button",{id:"next",class:"paginationbtn nextbtn",onClick:function(){e.currentPage=e.currentPage+1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("next")},disabled:this.currentPage===this.totalPages,"aria-label":"Go to next page","aria-controls":"status"},"Next")))};e.prototype.renderSmall=function(){var e=this;return n("div",{class:"smallscreen"},n("div",{class:"pagebtncontainer ".concat(this.isTabbing?"user-is-tabbing":"")},n("button",{id:"wm-1-arw",class:"paginationbtn",onClick:function(){e.currentPage=1;e.updatePageDisplayed(1);e.maintainFocusOnNumberChange("prev-arrow")},value:1,"aria-current":this.currentPage===1?"page":undefined,"aria-label":"Go to page 1","aria-controls":"status",disabled:this.currentPage===1},n("svg",{width:"16",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z"}))),n("button",{id:"previous-arw",class:"paginationbtn previousbtn",onClick:function(){e.currentPage-=1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("prev-arrow")},disabled:this.currentPage===1,"aria-label":"Go to previous page"},n("svg",{width:"8",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z"}))),"Page ",this.currentPage," of ",this.totalPages,n("button",{id:"next-arw",class:"paginationbtn nextbtn",onClick:function(){e.currentPage+=1;e.updatePageDisplayed(e.currentPage);e.maintainFocusOnNumberChange("next-arrow")},disabled:this.currentPage===this.totalPages,"aria-label":"Go to next page"},n("svg",{width:"8",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z"}))),n("button",{id:"wm-".concat(this.totalPages,"-arw"),class:"paginationbtn",onClick:function(){e.currentPage=e.totalPages;e.updatePageDisplayed(e.totalPages);e.maintainFocusOnNumberChange("next-arrow")},value:this.totalPages,"aria-current":this.currentPage===this.totalPages?"page":undefined,"aria-label":"Go to last page, page ".concat(this.totalPages),"aria-controls":"status",disabled:this.currentPage===this.totalPages},n("svg",{width:"17",height:"12",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z"})))))};e.prototype.render=function(){return this.totalItems>this.itemsPerPage&&n("nav",{"aria-label":"Pagination Navigation. ".concat(this.getCurrentPagesInView(),". Current page, ").concat(this.currentPage,".")},this.isLargeViewport?this.renderLarge():this.renderSmall(),n("div",{id:"status",class:"sr-only","aria-live":"polite","aria-relevant":"text","aria-atomic":"true"},this.srAnnouncement))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{totalItems:["calculateTotalPages"],itemsPerPage:["calculateTotalPages"]}},enumerable:false,configurable:true});return e}());o.style=s}}}));
+//# sourceMappingURL=p-8e11777d.system.entry.js.map

package/dist/ripple/p-8e11777d.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmPaginationCss","Pagination","exports","this","totalPages","debouncedResize","debounce","_this","isLargeViewport","window","innerWidth","getMiddlePageNums","coreBtns","currentPage","undefined","class_1","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","maintainFocusOnNumberChange","el","requestAnimationFrame","shadowRoot","querySelector","focus","concat","handleResize","calculateTotalPages","Math","ceil","totalItems","itemsPerPage","componentWillLoad","Error","document","body","classList","contains","getElementById","updatePageDisplayed","pageNum","value","wmPaginationPageClicked","emit","pageClicked","srAnnouncement","getCurrentPagesInView","displayShortPagination","pages","i","push","displayPageNumber","displayLongPagination","view","__spreadArray","displayEllipsis","map","page","h","id","class","onClick","end","begin","renderLarge","disabled","renderSmall","width","height","xmlns","d","render"],"sources":["src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\r\nnav .smallscreen {\r\n  margin-bottom: rem-calc(10);\r\n  @include displayFlex();\r\n  @include alignItems(center);\r\n  @include justifyContent(flex-end);\r\n  @include type-level-4;\r\n\r\n  .pageview {\r\n    @include type-level-4;\r\n    margin: rem-calc(0 10);\r\n  }\r\n\r\n  .paginationbtn {\r\n    position: relative;\r\n    @include box-shadow(none); // fix for Edge\r\n    @include transition(none);\r\n    border: none;\r\n    color: $button-default-text;\r\n    background-color: transparent;\r\n    margin: 0;\r\n    padding: 0;\r\n    height: rem-calc(40);\r\n    width: rem-calc(40);\r\n    font-family: inherit;\r\n    letter-spacing: 0.3px;\r\n    font-size: rem-calc(14);\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    text-transform: none; //For Edge\r\n\r\n    svg * {\r\n      fill: #565397;\r\n    }\r\n\r\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &::-moz-focus-inner {\r\n      border: 0;\r\n      outline: none;\r\n    }\r\n\r\n    &[disabled] {\r\n      color: #9f9f9f;\r\n      pointer-events: none;\r\n      svg * {\r\n        fill: #9f9f9f;\r\n      }\r\n    }\r\n  }\r\n\r\n  .previousbtn {\r\n    margin-right: rem-calc(10);\r\n    width: auto !important;\r\n  }\r\n\r\n  .nextbtn {\r\n    margin-left: rem-calc(10);\r\n    margin-right: 0;\r\n    width: auto !important;\r\n  }\r\n\r\n  .previousbtn,\r\n  .nextbtn {\r\n    @include transition(none);\r\n  }\r\n\r\n  .ellipsis {\r\n    display: inline-block;\r\n    width: rem-calc(40);\r\n    text-align: center;\r\n  }\r\n\r\n  .pagebtncontainer {\r\n    &.user-is-tabbing {\r\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n        @include box-shadow(none); // fix for Edge\r\n\r\n        &:before {\r\n          position: absolute;\r\n          content: \"\";\r\n          height: auto;\r\n          width: 16px;\r\n          top: 0;\r\n          bottom: 0;\r\n          left: 12px;\r\n          right: 0;\r\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n          background-size: 6px 2px;\r\n          background-position: 0 2em;\r\n          border-radius: 0;\r\n          line-height: normal;\r\n        }\r\n\r\n        &.previousbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n\r\n        &.nextbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n      }\r\n\r\n      [aria-current=\"page\"]:focus {\r\n        @include focus-style;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nnav .largescreen {\r\n  & .user-is-tabbing {\r\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n      // to make focus indicator as wide as text \"previous\" and \"next\"\r\n      &.previousbtn:focus:before {\r\n        width: 56px !important;\r\n      }\r\n      &.nextbtn:focus:before {\r\n        width: 32px !important;\r\n      }\r\n    }\r\n  }\r\n  .paginationbtn {\r\n    &[aria-current=\"page\"] {\r\n      @include border-radius(50%);\r\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n      background-color: $button-primary-background;\r\n      color: $button-primary-text;\r\n\r\n      &:hover {\r\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n        background: mix(black, $button-primary-background, 10%);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\r\nimport { debounce } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-pagination\",\r\n  styleUrl: \"wm-pagination.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Pagination {\r\n  @Element() el!: any;\r\n\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalItems?: number = undefined;\r\n  @Prop() itemsPerPage?: number = undefined;\r\n  @Prop() value = 1;\r\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\r\n  @State() isTabbing: boolean = false;\r\n  @State() srAnnouncement: string = \"\";\r\n\r\n  private totalPages: number = 0;\r\n\r\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\r\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\r\n  @Event() focusCurrentPage!: EventEmitter;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\r\n    window.requestAnimationFrame(() => {\r\n      switch (el) {\r\n        case \"previous\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\r\n          break;\r\n        case \"next\":\r\n          this.currentPage === this.totalPages &&\r\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\r\n          break;\r\n        case \"prev-arrow\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\r\n          break;\r\n        case \"next-arrow\":\r\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\r\n          break;\r\n        case \"page\":\r\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\r\n        default:\r\n          return;\r\n      }\r\n    });\r\n  }\r\n\r\n  debouncedResize = debounce(() => {\r\n    this.isLargeViewport = window.innerWidth > 600;\r\n  }, 250);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleResize() {\r\n    this.debouncedResize();\r\n  }\r\n\r\n  @Watch(\"totalItems\")\r\n  @Watch(\"itemsPerPage\")\r\n  calculateTotalPages() {\r\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\r\n      throw new Error(\"Please check the required attributes\");\r\n    }\r\n\r\n    this.calculateTotalPages();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\r\n      if (this.isLargeViewport) {\r\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\r\n      } else {\r\n        this.currentPage === 1\r\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\r\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\r\n      }\r\n    };\r\n  }\r\n\r\n  updatePageDisplayed(pageNum: any) {\r\n    this.value = pageNum;\r\n    this.wmPaginationPageClicked.emit();\r\n    this.pageClicked.emit(); // deprecated\r\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\r\n  }\r\n\r\n  displayShortPagination() {\r\n    let pages = [];\r\n    for (let i = 1; i <= this.totalPages; i++) {\r\n      pages.push(this.displayPageNumber(i));\r\n    }\r\n    return pages;\r\n  }\r\n\r\n  displayLongPagination() {\r\n    let view = [\r\n      this.displayPageNumber(1),\r\n      this.currentPage > 3 && this.displayEllipsis(),\r\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\r\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\r\n      this.displayPageNumber(this.totalPages),\r\n    ];\r\n    return view;\r\n  }\r\n\r\n  displayPageNumber(pageNum: number) {\r\n    return (\r\n      <button\r\n        id={`wm-${pageNum}`}\r\n        class=\"paginationbtn\"\r\n        onClick={() => {\r\n          this.currentPage = pageNum;\r\n          this.updatePageDisplayed(pageNum);\r\n          this.maintainFocusOnNumberChange(\"page\");\r\n        }}\r\n        value={pageNum}\r\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\r\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\r\n      >\r\n        {pageNum}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  displayEllipsis() {\r\n    return <span class=\"ellipsis\">...</span>;\r\n  }\r\n\r\n  getMiddlePageNums = () => {\r\n    let coreBtns;\r\n    // if pg is 1, 2 or 3\r\n    if (this.currentPage < 4) {\r\n      coreBtns = [2, 3, 4];\r\n    } else if (this.currentPage > this.totalPages - 3) {\r\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\r\n    } else {\r\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\r\n    }\r\n    return coreBtns;\r\n  };\r\n\r\n  // displayPageView = () => {\r\n  //   // let end = this.itemsPerPage! * this.currentPage;\r\n  //   // const begin = end - this.itemsPerPage! + 1;\r\n  //   // if (end > this.totalItems!) {\r\n  //   //   end = this.totalItems!;\r\n  //   // }\r\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\r\n  // };\r\n\r\n  getCurrentPagesInView() {\r\n    let end = this.itemsPerPage! * this.currentPage;\r\n    const begin = end - this.itemsPerPage! + 1;\r\n    if (end > this.totalItems!) {\r\n      end = this.totalItems!;\r\n    }\r\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\r\n  }\r\n\r\n  renderLarge() {\r\n    return (\r\n      <div class=\"largescreen\">\r\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id=\"previous\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage - 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"previous\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Previous\r\n          </button>\r\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\r\n          <button\r\n            id=\"next\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage + 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Next\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderSmall() {\r\n    return (\r\n      <div class=\"smallscreen\">\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id={`wm-1-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = 1;\r\n              this.updatePageDisplayed(1);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            value={1}\r\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\r\n            aria-label={`Go to page 1`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === 1}\r\n          >\r\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id=\"previous-arw\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage -= 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          Page {this.currentPage} of {this.totalPages}\r\n          <button\r\n            id=\"next-arw\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage += 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id={`wm-${this.totalPages}-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.totalPages;\r\n              this.updatePageDisplayed(this.totalPages);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            value={this.totalPages}\r\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\r\n            aria-label={`Go to last page, page ${this.totalPages}`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === this.totalPages}\r\n          >\r\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // do not render the component if there's only one page\r\n      this.totalItems! > this.itemsPerPage! && (\r\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\r\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\r\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\r\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\r\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\r\n            {this.srAnnouncement}\r\n          </div>\r\n        </nav>\r\n      )\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0bAAA,IAAMA,EAAkB,+zK,ICQXC,EAAUC,EAAA,2B,gMAWbC,KAAAC,WAAqB,EAwC7BD,KAAAE,gBAAkBC,GAAS,WACzBC,EAAKC,gBAAkBC,OAAOC,WAAa,G,GAC1C,KAqFHP,KAAAQ,kBAAoB,WAClB,IAAIC,EAEJ,GAAIL,EAAKM,YAAc,EAAG,CACxBD,EAAW,CAAC,EAAG,EAAG,E,MACb,GAAIL,EAAKM,YAAcN,EAAKH,WAAa,EAAG,CACjDQ,EAAW,CAACL,EAAKH,WAAa,EAAGG,EAAKH,WAAa,EAAGG,EAAKH,WAAa,E,KACnE,CACLQ,EAAW,CAACL,EAAKM,YAAc,EAAGN,EAAKM,YAAaN,EAAKM,YAAc,E,CAEzE,OAAOD,C,mBAjJqB,E,gBACAE,U,kBACEA,U,WAChB,E,qBACmBL,OAAOC,WAAa,I,eACzB,M,oBACI,E,CASlCK,EAAAC,UAAAC,gBAAA,WACEd,KAAKe,UAAY,I,EAInBH,EAAAC,UAAAG,iBAAA,WACEhB,KAAKe,UAAY,K,EAGnBH,EAAAC,UAAAI,4BAAA,SAA4BC,GAA5B,IAAAd,EAAAJ,KACEM,OAAOa,uBAAsB,WAC3B,OAAQD,GACN,IAAK,WACHd,EAAKM,cAAgB,GAAKN,EAAKc,GAAGE,WAAWC,cAAc,eAAeC,QAC1E,MACF,IAAK,OACHlB,EAAKM,cAAgBN,EAAKH,YACxBG,EAAKc,GAAGE,WAAWC,cAAc,aAAAE,OAAanB,EAAKH,aAAcqB,QACnE,MACF,IAAK,aACHlB,EAAKM,cAAgB,GAAKN,EAAKc,GAAGE,WAAWC,cAAc,aAAaC,QACxE,MACF,IAAK,aACHlB,EAAKM,cAAgBN,EAAKH,YAAcG,EAAKc,GAAGE,WAAWC,cAAc,iBAAiBC,QAC1F,MACF,IAAK,OACHlB,EAAKc,GAAGE,WAAWC,cAAc,aAAAE,OAAanB,EAAKM,cAAeY,QACpE,QACE,O,KAURV,EAAAC,UAAAW,aAAA,WACExB,KAAKE,iB,EAKPU,EAAAC,UAAAY,oBAAA,WACEzB,KAAKC,WAAayB,KAAKC,KAAK3B,KAAK4B,WAAc5B,KAAK6B,a,EAGtDjB,EAAAC,UAAAiB,kBAAA,eAAA1B,EAAAJ,KACE,IAAKA,KAAK4B,aAAe5B,KAAK6B,eAAiB7B,KAAKU,YAAa,CAC/D,MAAM,IAAIqB,MAAM,uC,CAGlB/B,KAAKyB,sBAEL,GAAIO,SAASC,KAAKC,UAAUC,SAAS,wBAAyB,CAC5DnC,KAAKc,iB,CAGPd,KAAKkB,GAAGI,MAAQ,WAEd,GAAIlB,EAAKC,gBAAiB,CACxBD,EAAKc,GAAGE,WAAWgB,eAAe,MAAAb,OAAMnB,EAAKM,cAAeY,O,KACvD,CACLlB,EAAKM,cAAgB,EACjBN,EAAKc,GAAGE,WAAWgB,eAAe,YAAYd,QAC9ClB,EAAKc,GAAGE,WAAWgB,eAAe,YAAYd,O,IAKxDV,EAAAC,UAAAwB,oBAAA,SAAoBC,GAClBtC,KAAKuC,MAAQD,EACbtC,KAAKwC,wBAAwBC,OAC7BzC,KAAK0C,YAAYD,OACjBzC,KAAK2C,eAAiB,iBAAApB,OAAiBvB,KAAKU,YAAW,MAAAa,OAAKvB,KAAK4C,wB,EAGnEhC,EAAAC,UAAAgC,uBAAA,WACE,IAAIC,EAAQ,GACZ,IAAK,IAAIC,EAAI,EAAGA,GAAK/C,KAAKC,WAAY8C,IAAK,CACzCD,EAAME,KAAKhD,KAAKiD,kBAAkBF,G,CAEpC,OAAOD,C,EAGTlC,EAAAC,UAAAqC,sBAAA,eAAA9C,EAAAJ,KACE,IAAImD,EAAIC,4BAAA,CACNpD,KAAKiD,kBAAkB,GACvBjD,KAAKU,YAAc,GAAKV,KAAKqD,mBAC1BrD,KAAKQ,oBAAoB8C,KAAI,SAACC,GAAS,OAAAnD,EAAK6C,kBAAkBM,EAAvB,IAA6B,OACvEvD,KAAKU,YAAc,EAAIV,KAAKC,YAAcD,KAAKqD,kBAC/CrD,KAAKiD,kBAAkBjD,KAAKC,a,OAE9B,OAAOkD,C,EAGTvC,EAAAC,UAAAoC,kBAAA,SAAkBX,GAAlB,IAAAlC,EAAAJ,KACE,OACEwD,EAAA,UACEC,GAAI,MAAAlC,OAAMe,GACVoB,MAAM,gBACNC,QAAS,WACPvD,EAAKM,YAAc4B,EACnBlC,EAAKiC,oBAAoBC,GACzBlC,EAAKa,4BAA4B,O,EAEnCsB,MAAOD,EAAO,aACFtC,KAAKU,cAAgB4B,EAAU,cAAAf,OAAce,GAAY,GAAE,eACzDtC,KAAKU,cAAgB4B,EAAU,OAAS3B,WAErD2B,E,EAKP1B,EAAAC,UAAAwC,gBAAA,WACE,OAAOG,EAAA,QAAME,MAAM,YAAU,M,EAyB/B9C,EAAAC,UAAA+B,sBAAA,WACE,IAAIgB,EAAM5D,KAAK6B,aAAgB7B,KAAKU,YACpC,IAAMmD,EAAQD,EAAM5D,KAAK6B,aAAgB,EACzC,GAAI+B,EAAM5D,KAAK4B,WAAa,CAC1BgC,EAAM5D,KAAK4B,U,CAEb,MAAO,YAAciC,IAAUD,EAAM,GAAArC,OAAGsC,GAAU,GAAAtC,OAAGsC,EAAK,KAAAtC,OAAIqC,EAAG,QAAArC,OAAOvB,KAAK4B,Y,EAG/EhB,EAAAC,UAAAiD,YAAA,eAAA1D,EAAAJ,KACE,OACEwD,EAAA,OAAKE,MAAM,eACTF,EAAA,OAAKE,MAAM,YAAY1D,KAAK4C,yBAC5BY,EAAA,OAAKE,MAAO,oBAAAnC,OAAoBvB,KAAKe,UAAY,kBAAoB,KACnEyC,EAAA,UACEC,GAAG,WACHC,MAAM,4BACNC,QAAS,WACPvD,EAAKM,YAAcN,EAAKM,YAAc,EACtCN,EAAKiC,oBAAoBjC,EAAKM,aAC9BN,EAAKa,4BAA4B,W,EAEnC8C,SAAU/D,KAAKU,cAAgB,EAAC,aACrB,sBAAqB,gBAClB,UAAQ,YAIvBV,KAAKC,WAAa,EAAID,KAAK6C,yBAA2B7C,KAAKkD,wBAC5DM,EAAA,UACEC,GAAG,OACHC,MAAM,wBACNC,QAAS,WACPvD,EAAKM,YAAcN,EAAKM,YAAc,EACtCN,EAAKiC,oBAAoBjC,EAAKM,aAC9BN,EAAKa,4BAA4B,O,EAEnC8C,SAAU/D,KAAKU,cAAgBV,KAAKC,WAAU,aACnC,kBAAiB,gBACd,UAAQ,S,EAShCW,EAAAC,UAAAmD,YAAA,eAAA5D,EAAAJ,KACE,OACEwD,EAAA,OAAKE,MAAM,eACTF,EAAA,OAAKE,MAAO,oBAAAnC,OAAoBvB,KAAKe,UAAY,kBAAoB,KACnEyC,EAAA,UACEC,GAAI,WACJC,MAAM,gBACNC,QAAS,WACPvD,EAAKM,YAAc,EACnBN,EAAKiC,oBAAoB,GACzBjC,EAAKa,4BAA4B,a,EAEnCsB,MAAO,EAAC,eACMvC,KAAKU,cAAgB,EAAI,OAASC,UAAS,aAC7C,eAAc,gBACZ,SACdoD,SAAU/D,KAAKU,cAAgB,GAE/B8C,EAAA,OAAKS,MAAM,KAAKC,OAAO,KAAKC,MAAM,8BAChCX,EAAA,QAAMY,EAAE,4FAGZZ,EAAA,UACEC,GAAG,eACHC,MAAM,4BACNC,QAAS,WACPvD,EAAKM,aAAe,EACpBN,EAAKiC,oBAAoBjC,EAAKM,aAC9BN,EAAKa,4BAA4B,a,EAEnC8C,SAAU/D,KAAKU,cAAgB,EAAC,aACrB,uBAEX8C,EAAA,OAAKS,MAAM,IAAIC,OAAO,KAAKC,MAAM,8BAC/BX,EAAA,QAAMY,EAAE,gDAEH,QACHpE,KAAKU,YAAW,OAAMV,KAAKC,WACjCuD,EAAA,UACEC,GAAG,WACHC,MAAM,wBACNC,QAAS,WACPvD,EAAKM,aAAe,EACpBN,EAAKiC,oBAAoBjC,EAAKM,aAC9BN,EAAKa,4BAA4B,a,EAEnC8C,SAAU/D,KAAKU,cAAgBV,KAAKC,WAAU,aACnC,mBAEXuD,EAAA,OAAKS,MAAM,IAAIC,OAAO,KAAKC,MAAM,8BAC/BX,EAAA,QAAMY,EAAE,8CAGZZ,EAAA,UACEC,GAAI,MAAAlC,OAAMvB,KAAKC,WAAU,QACzByD,MAAM,gBACNC,QAAS,WACPvD,EAAKM,YAAcN,EAAKH,WACxBG,EAAKiC,oBAAoBjC,EAAKH,YAC9BG,EAAKa,4BAA4B,a,EAEnCsB,MAAOvC,KAAKC,WAAU,eACRD,KAAKU,cAAgBV,KAAKC,WAAa,OAASU,UAAS,aAC3D,yBAAAY,OAAyBvB,KAAKC,YAAY,gBACxC,SACd8D,SAAU/D,KAAKU,cAAgBV,KAAKC,YAEpCuD,EAAA,OAAKS,MAAM,KAAKC,OAAO,KAAKC,MAAM,8BAChCX,EAAA,QAAMY,EAAE,0F,EAQpBxD,EAAAC,UAAAwD,OAAA,WACE,OAEErE,KAAK4B,WAAc5B,KAAK6B,cACtB2B,EAAA,oBAAiB,0BAAAjC,OAA0BvB,KAAK4C,wBAAuB,oBAAArB,OAAmBvB,KAAKU,YAAW,MAEvGV,KAAKK,gBAAkBL,KAAK8D,cAAgB9D,KAAKgE,cAElDR,EAAA,OAAKC,GAAG,SAASC,MAAM,UAAS,YAAW,SAAQ,gBAAe,OAAM,cAAa,QAClF1D,KAAK2C,gB,2YArSK,I"}

package/dist/ripple/{p-63166c83.system.entry.js → p-90d67afa.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-e782194d.system.js"],(function(e){"use strict";var t,r,i,a,n,o,s,l;return{setters:[function(e){t=e.r;r=e.c;i=e.h;a=e.H;n=e.g},function(e){o=e.i;s=e.g;l=e.e}],execute:function(){var p=':host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-input .wrapper.label-none label{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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{color:#c0392b;margin:4px 0;display:block;font-style:italic;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .sr-only,wm-input .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var u=e("wm_input",function(){function e(e){t(this,e);this.wmInputValueChanged=r(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=o.formatMessage({id:"input.numberError",defaultMessage:"Please enter a valid number."});this.label=undefined;this.labelPosition="top";this.value="";this.disabled=false;this.info=undefined;this.placeholder="";this.requiredField=false;this.requiredFieldMessage=undefined;this.errorMessage=undefined;this.characterLimit=undefined;this.preventValidation=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.announcement="";this.displayedErrorMessage=""}Object.defineProperty(e.prototype,"charCount",{get:function(){return this.value.length},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:s();if(!this.label){console.error("wm-input requires the label property")}};e.prototype.componentDidLoad=function(){if(this.value){this.inputEl.value=this.value;this.previousBlurredValue=this.inputEl.value}};e.prototype.handleErrorMessage=function(e){this.displayedErrorMessage=e};e.prototype.handleKeyDown=function(e){var t=e.ctrlKey||e.metaKey||e.altKey;var r=/^.$/.test(e.key)&&!t;var i=r&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(i){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleBlur=function(e){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;var t=this.preventValidation&&l(e,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")};e.prototype.handleInput=function(e){this.value=e.target.value;if(this.characterLimit&&this.charCount>=this.characterLimit-5){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleFocus=function(){this.inputWrapperEl.classList.add("focus")};e.prototype.validate=function(){var e=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return e.reduce((function(e,t){return e?e:t()}),"")}};e.prototype.validateRequired=function(){var e=this.requiredFieldMessage||o.formatMessage({id:"global.requiredError",defaultMessage:"This field is required."});return this.requiredField&&this.value===""?e:""};e.prototype.validateNumber=function(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.generateCharacterLimitWarning=function(e,t){var r=o.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:e,y:t});var i=o.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});return"".concat(r).concat(e>=t?" "+i:"")};e.prototype.generateCharacterLimitLabel=function(e){return o.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:e})};e.prototype.renderErrorMessage=function(){return this.errorMessage||this.displayedErrorMessage};e.prototype.render=function(){var e=this;return i(a,{id:this.uid},i("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage||this.displayedErrorMessage?"invalid":""),ref:function(t){return e.inputWrapperEl=t}},i("div",{class:"label-wrapper"},this.labelPosition!=="none"&&i("label",{htmlFor:"inputfield-".concat(this.uid),class:"label"},this.label,this.requiredField&&i("span",{class:"required","aria-hidden":"true"},"*"))),i("div",{class:"inner-wrapper"},i("div",{class:"inputfield-wrapper"},i("input",{ref:function(t){return e.inputEl=t},id:"inputfield-".concat(this.uid),disabled:this.disabled,"aria-label":"".concat(this.label).concat(this.characterLimit?" "+this.generateCharacterLimitLabel(this.characterLimit):""),"aria-describedby":"info-".concat(this.uid," error-").concat(this.uid),onInput:function(t){return e.handleInput(t)},onKeyDown:function(t){return e.handleKeyDown(t)},onBlur:function(t){return e.handleBlur(t)},onFocus:this.handleFocus.bind(this),placeholder:this.placeholder,autocomplete:"off","aria-required":this.requiredField?"true":null,maxLength:this.characterLimit||undefined,type:this.type,step:this.step,max:this.max,min:this.min}),this.characterLimit&&typeof this.characterLimit==="number"?i("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&i("div",{id:"info-".concat(this.uid),class:"info"},this.info),i("div",{id:"error-".concat(this.uid),"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.liveRegionEl=t}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleErrorMessage"]}},enumerable:false,configurable:true});return e}());u.style=p}}}));
-//# sourceMappingURL=p-63166c83.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f08e6a5a.system.js"],(function(e){"use strict";var t,r,i,a,n,o,s,l;return{setters:[function(e){t=e.r;r=e.c;i=e.h;a=e.H;n=e.g},function(e){o=e.i;s=e.g;l=e.e}],execute:function(){var p=':host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-input .wrapper.label-none label{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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{color:#c0392b;margin:4px 0;display:block;font-style:italic;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .sr-only,wm-input .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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var u=e("wm_input",function(){function e(e){t(this,e);this.wmInputValueChanged=r(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=o.formatMessage({id:"input.numberError",defaultMessage:"Please enter a valid number."});this.label=undefined;this.labelPosition="top";this.value="";this.disabled=false;this.info=undefined;this.placeholder="";this.requiredField=false;this.requiredFieldMessage=undefined;this.errorMessage=undefined;this.characterLimit=undefined;this.preventValidation=undefined;this.type="text";this.step=1;this.min=undefined;this.max=undefined;this.announcement="";this.displayedErrorMessage=""}Object.defineProperty(e.prototype,"charCount",{get:function(){return this.value.length},enumerable:false,configurable:true});e.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:s();if(!this.label){console.error("wm-input requires the label property")}};e.prototype.componentDidLoad=function(){if(this.value){this.inputEl.value=this.value;this.previousBlurredValue=this.inputEl.value}};e.prototype.handleErrorMessage=function(e){this.displayedErrorMessage=e};e.prototype.handleKeyDown=function(e){var t=e.ctrlKey||e.metaKey||e.altKey;var r=/^.$/.test(e.key)&&!t;var i=r&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(i){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleBlur=function(e){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;var t=this.preventValidation&&l(e,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")};e.prototype.handleInput=function(e){this.value=e.target.value;if(this.characterLimit&&this.charCount>=this.characterLimit-5){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}};e.prototype.handleFocus=function(){this.inputWrapperEl.classList.add("focus")};e.prototype.validate=function(){var e=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return e.reduce((function(e,t){return e?e:t()}),"")}};e.prototype.validateRequired=function(){var e=this.requiredFieldMessage||o.formatMessage({id:"global.requiredError",defaultMessage:"This field is required."});return this.requiredField&&this.value===""?e:""};e.prototype.validateNumber=function(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.generateCharacterLimitWarning=function(e,t){var r=o.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:e,y:t});var i=o.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});return"".concat(r).concat(e>=t?" "+i:"")};e.prototype.generateCharacterLimitLabel=function(e){return o.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:e})};e.prototype.renderErrorMessage=function(){return this.errorMessage||this.displayedErrorMessage};e.prototype.render=function(){var e=this;return i(a,{id:this.uid},i("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(this.errorMessage||this.displayedErrorMessage?"invalid":""),ref:function(t){return e.inputWrapperEl=t}},i("div",{class:"label-wrapper"},this.labelPosition!=="none"&&i("label",{htmlFor:"inputfield-".concat(this.uid),class:"label"},this.label,this.requiredField&&i("span",{class:"required","aria-hidden":"true"},"*"))),i("div",{class:"inner-wrapper"},i("div",{class:"inputfield-wrapper"},i("input",{ref:function(t){return e.inputEl=t},id:"inputfield-".concat(this.uid),disabled:this.disabled,"aria-label":"".concat(this.label).concat(this.characterLimit?" "+this.generateCharacterLimitLabel(this.characterLimit):""),"aria-describedby":"info-".concat(this.uid," error-").concat(this.uid),onInput:function(t){return e.handleInput(t)},onKeyDown:function(t){return e.handleKeyDown(t)},onBlur:function(t){return e.handleBlur(t)},onFocus:this.handleFocus.bind(this),placeholder:this.placeholder,autocomplete:"off","aria-required":this.requiredField?"true":null,maxLength:this.characterLimit||undefined,type:this.type,step:this.step,max:this.max,min:this.min}),this.characterLimit&&typeof this.characterLimit==="number"?i("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&i("div",{id:"info-".concat(this.uid),class:"info"},this.info),i("div",{id:"error-".concat(this.uid),"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.liveRegionEl=t}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["handleErrorMessage"]}},enumerable:false,configurable:true});return e}());u.style=p}}}));
+//# sourceMappingURL=p-90d67afa.system.entry.js.map