@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/ripple/{p-219fbe2b.system.entry.js → p-a73cf968.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(e){"use strict";var t,i,r,o,n,s,a,p,l;return{setters:[function(e){t=e.r;i=e.c;r=e.h;o=e.H;n=e.g},function(e){s=e.i;a=e.g;p=e.m;l=e.e}],execute:function(){var d=':host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .sr-only,wm-timepicker .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}:host .wrapper,wm-timepicker .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-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .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-timepicker .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-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .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-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::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:"\\f150";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper 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}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus,wm-timepicker .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-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,wm-timepicker .wrapper.invalid .error{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-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}';var c=e("wm_timepicker",function(){function e(e){t(this,e);this.wmTimepickerNewValidValue=i(this,"wmTimepickerNewValidValue",7);this.wmTimepickerOnChange=i(this,"wmTimepickerOnChange",7);this.twelveHrValid=/^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;this.twentyFourHrValid=/^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;this.uid="";this.timeFormat="hh:mm";this.times=[];this.openUp=false;this.buttonAriaLabel=s.formatMessage({id:"time.selectTime",defaultMessage:"Select time",description:"Button text for screen readers."});this.disabled=false;this.value="";this.errorMessage=undefined;this.label="";this.labelPosition="top";this.requiredField=false;this.requiredFieldMessage=undefined;this.preventValidation=undefined;this.selectedOption=undefined;this.isExpanded=false;this.isTabbing=false;this.displayedErrorMessage=undefined}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":e.preventDefault();if(this.isExpanded===false){this.open("next")}else{this.moveDown(this.selectedOption)}break;case"ArrowUp":e.preventDefault();if(this.isExpanded===false){this.open("previous")}else{this.moveUp(this.selectedOption)}break;case"Enter":case" ":if(this.isExpanded){e.preventDefault();this.handleOptionClick(this.selectedOption.textContent)}break;case"Escape":e.preventDefault();if(this.isExpanded){e.stopPropagation();this.close()}break;case"Tab":if(this.isExpanded){this.close(false)}break;case"Home":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}break;case"End":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}break}};e.prototype.updateErrorState=function(){this.displayedErrorMessage=this.errorMessage};e.prototype.componentWillLoad=function(){if(this.label===""){console.error("You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.")}this.uid=this.el.id?this.el.id:a();this.updateErrorState();this.timeFormat=s.formatMessage({id:"time.timeFormat",defaultMessage:"hh:mm"});this.times=this.generateTimes()};e.prototype.componentDidLoad=function(){this.optionsEl.classList.add("hidden");this.optionsList=Array.from(this.optionsEl.querySelectorAll("li"));if(this.value){this.processInput()}};e.prototype.isValidTime=function(e){return this.twelveHrValid.test(e)||this.twentyFourHrValid.test(e)};e.prototype.generateTimes=function(){var e=[];var t=0;for(var i=0;t<24*60;i++){var r=Math.floor(t/60);var o=r.toString().padStart(2,"0");var n=(t%60).toString();var s=n.padStart(2,"0");e[i]="".concat(o,":").concat(s);t=t+15}return e};e.prototype.findNearestTimeInterval=function(e){var t=this.formatToStorage(e);var i=parseInt(t.slice(3,5));if(i%15!==0){var r=parseInt(t.slice(0,2));var o=(Math.round(i/15)*15).toString().padStart(2,"0");if(o==="60"){o="00";var n=r+1;if(n===24){n=0}t=t.replace("".concat(r.toString().padStart(2,"0"),":"),"".concat(n.toString().padStart(2,"0"),":"))}if(parseInt(o)<8){o="00"}e=t.replace(":".concat(i.toString().padStart(2,"0")),":".concat(o))}return e};e.prototype.handleListSelection=function(e){var t=this;e=this.findNearestTimeInterval(e);var i=this.optionsList.filter((function(i){return i.textContent==t.formatToDisplay(e)}))[0];i&&this.focusOption(i)};e.prototype.setValue=function(e){var t=this.value;this.inputEl.value=this.formatToDisplay(e);this.value=this.formatToStorage(e);this.handleListSelection(e);if(t!==this.value){this.wmTimepickerNewValidValue.emit({value:this.value})}this.wmTimepickerOnChange.emit({value:this.value,isValid:!!this.displayedErrorMessage})};e.prototype.processInput=function(){if(this.isValidTime(this.value)){this.setValue(this.value)}var e=this.determineErrorMessage();this.displayedErrorMessage=e};e.prototype.determineErrorMessage=function(){var e=this.errorMessage;var t=this.requiredFieldMessage||s.formatMessage({id:"time.requiredError",defaultMessage:"A time is required."});var i=s.formatMessage({id:"time.invalidTime",defaultMessage:"Please enter a valid time."});var r=this.isValidTime(this.value);if(r&&!this.errorMessage){e=null}else if(!r&&!this.errorMessage){if(this.requiredField&&!this.value){e=t}else if(this.value){e=i}else{e=null}}return e};e.prototype.splitTime=function(e){var t=this.twelveHrValid.exec(e)||this.twentyFourHrValid.exec(e);var i=parseInt(t[1]);var r=t[2]||"00";var o=t?t[3]:undefined;if(i===0&&(o===null||o===void 0?void 0:o.toUpperCase().includes("P"))){o="AM"}return[i,r,o]};e.prototype.formatToDisplay=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===12&&!o){o="PM"}if(i===0||i===24){i=12}if(i>12){i-=12;o="PM"}if(o&&o.toUpperCase().includes("P")){o="PM"}else{o="AM"}return"".concat(i.toString().padStart(2,"0"),":").concat(r," ").concat(o)};e.prototype.formatToStorage=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===24){i=0}if(i===12&&o&&o.toUpperCase().includes("A")){i-=12}if(o&&o.toUpperCase().includes("P")&&i!==12){i+=12}return"".concat(i.toString().padStart(2,"0"),":").concat(r)};e.prototype.open=function(e){var t=this;this.openUp=p(this.el,this.optionsEl);this.isExpanded=true;this.optionsEl.classList.remove("hidden");if(this.errorMessage||!this.value){this.handleListSelection("09:00")}this.setDropdownPosition("center",this.selectedOption);this.focusOption(this.selectedOption);window.requestAnimationFrame((function(){if(e==="next"){t.moveDown(t.selectedOption)}else if(e==="previous"){t.moveUp(t.selectedOption)}}))};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}this.isExpanded=false;window.setTimeout((function(){t.optionsEl.classList.add("hidden");if(e){t.buttonEl.focus()}}),150)};e.prototype.focusOption=function(e){this.optionsList.forEach((function(e){e.tabIndex=-1}));e.tabIndex=0;this.selectedOption=e;e.focus()};e.prototype.setDropdownPosition=function(e,t){switch(e){case"top":var i=t===null||t===void 0?void 0:t.previousElementSibling;this.optionsEl.scrollTop=i.getBoundingClientRect().top-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop;break;case"bottom":var r=t===null||t===void 0?void 0:t.nextElementSibling;this.optionsEl.scrollTop=r.getBoundingClientRect().bottom-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop-this.optionsEl.offsetHeight;break;case"center":this.optionsEl.scrollTop=(this.optionsList.findIndex((function(e){return e.textContent===(t===null||t===void 0?void 0:t.textContent)}))-2)*t.offsetHeight;break;case"first":this.optionsEl.scrollTop=0;break;case"last":this.optionsEl.scrollTop=this.optionsList[0].clientHeight*this.optionsList.length;break}};e.prototype.moveUp=function(e){var t=e.previousElementSibling;if(t){if(t.getBoundingClientRect().top<this.optionsEl.getBoundingClientRect().top){this.setDropdownPosition("top",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}};e.prototype.moveDown=function(e){var t=e.nextElementSibling;if(t){if(t.getBoundingClientRect().bottom>this.optionsEl.getBoundingClientRect().bottom){this.setDropdownPosition("bottom",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}};e.prototype.handleOptionClick=function(e){this.close();this.setValue(e);this.processInput()};e.prototype.handleInput=function(){this.value=this.inputEl.value;if(this.isValidTime(this.value)){this.handleListSelection(this.findNearestTimeInterval(this.value));this.setDropdownPosition("center",this.selectedOption)}};e.prototype.handleInputBlur=function(e){var t=this.preventValidation&&l(e,this.preventValidation);if(!t){this.processInput()}this.tpWrapper.classList.remove("focus")};e.prototype.renderOptions=function(){var e=this;return this.times.map((function(t,i){return r("li",{id:"option".concat(i+1),role:"option",onClick:function(){return e.handleOptionClick(t)}},e.formatToDisplay(t))}))};e.prototype.render=function(){var e=this;return r(o,{id:this.uid,invalid:!!this.displayedErrorMessage?"true":null,onBlur:function(){return e.close(false)}},r("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(!!this.displayedErrorMessage?"invalid":""),ref:function(t){return e.tpWrapper=t}},r("div",{class:"label-wrapper"},this.labelPosition!=="none"&&r("label",{id:"label-".concat(this.uid),class:"label",htmlFor:"time-input-".concat(this.uid)},this.label,this.requiredField&&r("span",{class:"required","aria-hidden":"true"},"*"))),r("div",null,r("div",{class:"inner-wrapper"},r("input",{id:"time-input-".concat(this.uid),"aria-label":this.label,"aria-describedby":"error-".concat(this.uid),ref:function(t){return e.inputEl=t},onBlur:function(t){return e.handleInputBlur(t)},onInput:function(){return e.handleInput()},disabled:this.disabled,"aria-required":this.requiredField?"true":null,placeholder:this.timeFormat,autocomplete:"off",onFocus:function(){return e.tpWrapper.classList.add("focus")}}),r("button",{id:"btn-".concat(this.uid),class:this.isTabbing?"user-is-tabbing":"",ref:function(t){return e.buttonEl=t},disabled:this.disabled,"aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false","aria-label":this.buttonAriaLabel,"aria-describedby":"time-input-".concat(this.uid),onClick:function(){return e.isExpanded?e.close():e.open()},onMouseDown:function(t){t.preventDefault();e.buttonEl.focus()}},r("span",{class:"clock"})),r("ul",{class:"options ".concat(this.isExpanded?"open":"","  ").concat(this.openUp?"upwards":""),id:"list-".concat(this.uid),role:"listbox","aria-labelledby":"label-".concat(this.uid),"aria-describedby":this.isExpanded?"collapsed":null,tabindex:-1,ref:function(t){return e.optionsEl=t}},this.renderOptions())),r("div",{id:"error-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayedErrorMessage))))};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:["updateErrorState"]}},enumerable:false,configurable:true});return e}());c.style=d}}}));
-//# sourceMappingURL=p-219fbe2b.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f0fd8695.system.js"],(function(e){"use strict";var t,i,r,o,n,s,a,p,l;return{setters:[function(e){t=e.r;i=e.c;r=e.h;o=e.H;n=e.g},function(e){s=e.i;a=e.g;p=e.m;l=e.e}],execute:function(){var d=':host,wm-timepicker{font-family:inherit}:host *,wm-timepicker *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .sr-only,wm-timepicker .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}:host .wrapper,wm-timepicker .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-timepicker .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-timepicker .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-timepicker .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-timepicker .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-timepicker .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-timepicker .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-timepicker .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-timepicker .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-timepicker .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-timepicker .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-timepicker .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper input,wm-timepicker .wrapper .inner-wrapper input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;font-family:inherit}:host .wrapper .inner-wrapper input:disabled,wm-timepicker .wrapper .inner-wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper .inner-wrapper input:focus,wm-timepicker .wrapper .inner-wrapper input:focus{outline:none}:host .wrapper .inner-wrapper button,wm-timepicker .wrapper .inner-wrapper button{all:unset;cursor:pointer;padding:0 0.375rem;height:2.375rem;background-color:#fff;border:none;-moz-border-top-right-radius:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;-moz-border-top-left-radius:0;-webkit-border-top-left-radius:0;border-top-left-radius:0;-moz-border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button .clock::after,wm-timepicker .wrapper .inner-wrapper button .clock::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:"\\f150";color:#575195;font-size:1.5rem;padding:0;line-height:2.5rem}:host .wrapper .inner-wrapper button:hover,wm-timepicker .wrapper .inner-wrapper button:hover{background:#e6e6e6;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled,wm-timepicker .wrapper .inner-wrapper button:disabled{background-color:rgba(74, 74, 74, 0.05);pointer-events:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wrapper .inner-wrapper button:disabled .clock::after,wm-timepicker .wrapper .inner-wrapper button:disabled .clock::after{color:#7b7b7b}[dir=RTL] :host .wrapper .inner-wrapper button,[dir=RTL] wm-timepicker .wrapper .inner-wrapper button{right:auto;left:0}:host .wrapper .inner-wrapper button:focus,wm-timepicker .wrapper .inner-wrapper button:focus{outline:none}:host .wrapper .inner-wrapper button.user-is-tabbing:focus,wm-timepicker .wrapper .inner-wrapper 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}:host .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button.user-is-tabbing:focus::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper button::-moz-focus-inner,wm-timepicker .wrapper .inner-wrapper button::-moz-focus-inner{border:0}:host .wrapper .inner-wrapper .options,wm-timepicker .wrapper .inner-wrapper .options{margin:0;padding:0;-webkit-overflow-scrolling:touch;overflow:auto;max-height:19.0625rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:2.5rem;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .wrapper .inner-wrapper .options.upwards,wm-timepicker .wrapper .inner-wrapper .options.upwards{top:unset;bottom:2.5rem;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .wrapper .inner-wrapper .options.hidden,wm-timepicker .wrapper .inner-wrapper .options.hidden{visibility:hidden}:host .wrapper .inner-wrapper .options [role=option],wm-timepicker .wrapper .inner-wrapper .options [role=option]{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a}:host .wrapper .inner-wrapper .options [role=option]:hover,wm-timepicker .wrapper .inner-wrapper .options [role=option]:hover{background:#f4f4f4;outline:none}:host .wrapper .inner-wrapper .options [role=option]:focus,wm-timepicker .wrapper .inner-wrapper .options [role=option]:focus{outline:none;background:#f4f4f4}:host .wrapper .inner-wrapper .options [role=option]:not(:last-child),wm-timepicker .wrapper .inner-wrapper .options [role=option]:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .wrapper .inner-wrapper .options.open,wm-timepicker .wrapper .inner-wrapper .options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper.invalid .inner-wrapper,wm-timepicker .wrapper.invalid .inner-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,wm-timepicker .wrapper.invalid .error{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper:focus .inner-wrapper,:host .wrapper.focus .inner-wrapper,wm-timepicker .wrapper:focus .inner-wrapper,wm-timepicker .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}';var c=e("wm_timepicker",function(){function e(e){t(this,e);this.wmTimepickerNewValidValue=i(this,"wmTimepickerNewValidValue",7);this.wmTimepickerOnChange=i(this,"wmTimepickerOnChange",7);this.twelveHrValid=/^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;this.twentyFourHrValid=/^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;this.uid="";this.timeFormat="hh:mm";this.times=[];this.openUp=false;this.buttonAriaLabel=s.formatMessage({id:"time.selectTime",defaultMessage:"Select time",description:"Button text for screen readers."});this.disabled=false;this.value="";this.errorMessage=undefined;this.label="";this.labelPosition="top";this.requiredField=false;this.requiredFieldMessage=undefined;this.preventValidation=undefined;this.selectedOption=undefined;this.isExpanded=false;this.isTabbing=false;this.displayedErrorMessage=undefined}e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":e.preventDefault();if(this.isExpanded===false){this.open("next")}else{this.moveDown(this.selectedOption)}break;case"ArrowUp":e.preventDefault();if(this.isExpanded===false){this.open("previous")}else{this.moveUp(this.selectedOption)}break;case"Enter":case" ":if(this.isExpanded){e.preventDefault();this.handleOptionClick(this.selectedOption.textContent)}break;case"Escape":e.preventDefault();if(this.isExpanded){e.stopPropagation();this.close()}break;case"Tab":if(this.isExpanded){this.close(false)}break;case"Home":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}break;case"End":e.preventDefault();if(this.isExpanded){this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}break}};e.prototype.updateErrorState=function(){this.displayedErrorMessage=this.errorMessage};e.prototype.componentWillLoad=function(){if(this.label===""){console.error("You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.")}this.uid=this.el.id?this.el.id:a();this.updateErrorState();this.timeFormat=s.formatMessage({id:"time.timeFormat",defaultMessage:"hh:mm"});this.times=this.generateTimes()};e.prototype.componentDidLoad=function(){this.optionsEl.classList.add("hidden");this.optionsList=Array.from(this.optionsEl.querySelectorAll("li"));if(this.value){this.processInput()}};e.prototype.isValidTime=function(e){return this.twelveHrValid.test(e)||this.twentyFourHrValid.test(e)};e.prototype.generateTimes=function(){var e=[];var t=0;for(var i=0;t<24*60;i++){var r=Math.floor(t/60);var o=r.toString().padStart(2,"0");var n=(t%60).toString();var s=n.padStart(2,"0");e[i]="".concat(o,":").concat(s);t=t+15}return e};e.prototype.findNearestTimeInterval=function(e){var t=this.formatToStorage(e);var i=parseInt(t.slice(3,5));if(i%15!==0){var r=parseInt(t.slice(0,2));var o=(Math.round(i/15)*15).toString().padStart(2,"0");if(o==="60"){o="00";var n=r+1;if(n===24){n=0}t=t.replace("".concat(r.toString().padStart(2,"0"),":"),"".concat(n.toString().padStart(2,"0"),":"))}if(parseInt(o)<8){o="00"}e=t.replace(":".concat(i.toString().padStart(2,"0")),":".concat(o))}return e};e.prototype.handleListSelection=function(e){var t=this;e=this.findNearestTimeInterval(e);var i=this.optionsList.filter((function(i){return i.textContent==t.formatToDisplay(e)}))[0];i&&this.focusOption(i)};e.prototype.setValue=function(e){var t=this.value;this.inputEl.value=this.formatToDisplay(e);this.value=this.formatToStorage(e);this.handleListSelection(e);if(t!==this.value){this.wmTimepickerNewValidValue.emit({value:this.value})}this.wmTimepickerOnChange.emit({value:this.value,isValid:!!this.displayedErrorMessage})};e.prototype.processInput=function(){if(this.isValidTime(this.value)){this.setValue(this.value)}var e=this.determineErrorMessage();this.displayedErrorMessage=e};e.prototype.determineErrorMessage=function(){var e=this.errorMessage;var t=this.requiredFieldMessage||s.formatMessage({id:"time.requiredError",defaultMessage:"A time is required."});var i=s.formatMessage({id:"time.invalidTime",defaultMessage:"Please enter a valid time."});var r=this.isValidTime(this.value);if(r&&!this.errorMessage){e=null}else if(!r&&!this.errorMessage){if(this.requiredField&&!this.value){e=t}else if(this.value){e=i}else{e=null}}return e};e.prototype.splitTime=function(e){var t=this.twelveHrValid.exec(e)||this.twentyFourHrValid.exec(e);var i=parseInt(t[1]);var r=t[2]||"00";var o=t?t[3]:undefined;if(i===0&&(o===null||o===void 0?void 0:o.toUpperCase().includes("P"))){o="AM"}return[i,r,o]};e.prototype.formatToDisplay=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===12&&!o){o="PM"}if(i===0||i===24){i=12}if(i>12){i-=12;o="PM"}if(o&&o.toUpperCase().includes("P")){o="PM"}else{o="AM"}return"".concat(i.toString().padStart(2,"0"),":").concat(r," ").concat(o)};e.prototype.formatToStorage=function(e){var t=this.splitTime(e),i=t[0],r=t[1],o=t[2];if(i===24){i=0}if(i===12&&o&&o.toUpperCase().includes("A")){i-=12}if(o&&o.toUpperCase().includes("P")&&i!==12){i+=12}return"".concat(i.toString().padStart(2,"0"),":").concat(r)};e.prototype.open=function(e){var t=this;this.openUp=p(this.el,this.optionsEl);this.isExpanded=true;this.optionsEl.classList.remove("hidden");if(this.errorMessage||!this.value){this.handleListSelection("09:00")}this.setDropdownPosition("center",this.selectedOption);this.focusOption(this.selectedOption);window.requestAnimationFrame((function(){if(e==="next"){t.moveDown(t.selectedOption)}else if(e==="previous"){t.moveUp(t.selectedOption)}}))};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}this.isExpanded=false;window.setTimeout((function(){t.optionsEl.classList.add("hidden");if(e){t.buttonEl.focus()}}),150)};e.prototype.focusOption=function(e){this.optionsList.forEach((function(e){e.tabIndex=-1}));e.tabIndex=0;this.selectedOption=e;e.focus()};e.prototype.setDropdownPosition=function(e,t){switch(e){case"top":var i=t===null||t===void 0?void 0:t.previousElementSibling;this.optionsEl.scrollTop=i.getBoundingClientRect().top-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop;break;case"bottom":var r=t===null||t===void 0?void 0:t.nextElementSibling;this.optionsEl.scrollTop=r.getBoundingClientRect().bottom-this.optionsEl.getBoundingClientRect().top+this.optionsEl.scrollTop-this.optionsEl.offsetHeight;break;case"center":this.optionsEl.scrollTop=(this.optionsList.findIndex((function(e){return e.textContent===(t===null||t===void 0?void 0:t.textContent)}))-2)*t.offsetHeight;break;case"first":this.optionsEl.scrollTop=0;break;case"last":this.optionsEl.scrollTop=this.optionsList[0].clientHeight*this.optionsList.length;break}};e.prototype.moveUp=function(e){var t=e.previousElementSibling;if(t){if(t.getBoundingClientRect().top<this.optionsEl.getBoundingClientRect().top){this.setDropdownPosition("top",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[this.optionsList.length-1]);this.setDropdownPosition("last")}};e.prototype.moveDown=function(e){var t=e.nextElementSibling;if(t){if(t.getBoundingClientRect().bottom>this.optionsEl.getBoundingClientRect().bottom){this.setDropdownPosition("bottom",e)}this.focusOption(t)}else{this.focusOption(this.optionsList[0]);this.setDropdownPosition("first")}};e.prototype.handleOptionClick=function(e){this.close();this.setValue(e);this.processInput()};e.prototype.handleInput=function(){this.value=this.inputEl.value;if(this.isValidTime(this.value)){this.handleListSelection(this.findNearestTimeInterval(this.value));this.setDropdownPosition("center",this.selectedOption)}};e.prototype.handleInputBlur=function(e){var t=this.preventValidation&&l(e,this.preventValidation);if(!t){this.processInput()}this.tpWrapper.classList.remove("focus")};e.prototype.renderOptions=function(){var e=this;return this.times.map((function(t,i){return r("li",{id:"option".concat(i+1),role:"option",onClick:function(){return e.handleOptionClick(t)}},e.formatToDisplay(t))}))};e.prototype.render=function(){var e=this;return r(o,{id:this.uid,invalid:!!this.displayedErrorMessage?"true":null,onBlur:function(){return e.close(false)}},r("div",{class:"wrapper label-".concat(this.labelPosition," ").concat(!!this.displayedErrorMessage?"invalid":""),ref:function(t){return e.tpWrapper=t}},r("div",{class:"label-wrapper"},this.labelPosition!=="none"&&r("label",{id:"label-".concat(this.uid),class:"label",htmlFor:"time-input-".concat(this.uid)},this.label,this.requiredField&&r("span",{class:"required","aria-hidden":"true"},"*"))),r("div",null,r("div",{class:"inner-wrapper"},r("input",{id:"time-input-".concat(this.uid),"aria-label":this.label,"aria-describedby":"error-".concat(this.uid),ref:function(t){return e.inputEl=t},onBlur:function(t){return e.handleInputBlur(t)},onInput:function(){return e.handleInput()},disabled:this.disabled,"aria-required":this.requiredField?"true":null,placeholder:this.timeFormat,autocomplete:"off",onFocus:function(){return e.tpWrapper.classList.add("focus")}}),r("button",{id:"btn-".concat(this.uid),class:this.isTabbing?"user-is-tabbing":"",ref:function(t){return e.buttonEl=t},disabled:this.disabled,"aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false","aria-label":this.buttonAriaLabel,"aria-describedby":"time-input-".concat(this.uid),onClick:function(){return e.isExpanded?e.close():e.open()},onMouseDown:function(t){t.preventDefault();e.buttonEl.focus()}},r("span",{class:"clock"})),r("ul",{class:"options ".concat(this.isExpanded?"open":"","  ").concat(this.openUp?"upwards":""),id:"list-".concat(this.uid),role:"listbox","aria-labelledby":"label-".concat(this.uid),"aria-describedby":this.isExpanded?"collapsed":null,tabindex:-1,ref:function(t){return e.optionsEl=t}},this.renderOptions())),r("div",{id:"error-".concat(this.uid),class:"error","aria-live":"assertive","aria-atomic":"true"},this.displayedErrorMessage))))};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:["updateErrorState"]}},enumerable:false,configurable:true});return e}());c.style=d}}}));
+//# sourceMappingURL=p-a73cf968.system.entry.js.map

package/dist/ripple/p-a73cf968.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmTimepickerCss","Timepicker","exports","this","twelveHrValid","twentyFourHrValid","uid","timeFormat","times","openUp","buttonAriaLabel","intl","formatMessage","id","defaultMessage","description","class_1","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKey","ev","key","preventDefault","isExpanded","open","moveDown","selectedOption","moveUp","handleOptionClick","textContent","stopPropagation","close","focusOption","optionsList","setDropdownPosition","length","updateErrorState","displayedErrorMessage","errorMessage","componentWillLoad","label","console","error","el","generateId","generateTimes","componentDidLoad","optionsEl","classList","add","Array","from","querySelectorAll","value","processInput","isValidTime","input","test","startTime","i","h_1","Math","floor","hour","toString","padStart","m","min","concat","findNearestTimeInterval","time","formattedTime","formatToStorage","minutes","parseInt","slice","roundedMinutes","round","roundedHour","replace","handleListSelection","_this","option","filter","o","formatToDisplay","setValue","previousValue","inputEl","wmTimepickerNewValidValue","emit","wmTimepickerOnChange","isValid","newErrorMessage","determineErrorMessage","message","requiredError","requiredFieldMessage","invalidError","requiredField","splitTime","exec","hours","amPm","undefined","toUpperCase","includes","_a","itemToSelect","shouldOpenUp","remove","window","requestAnimationFrame","returnFocus","setTimeout","buttonEl","focus","item","forEach","tabIndex","position","prevItem","previousElementSibling","scrollTop","getBoundingClientRect","top","nextItem","nextElementSibling","bottom","offsetHeight","findIndex","x","clientHeight","prevEl","nextEl","handleInput","handleInputBlur","shouldPreventValidation","preventValidation","isRelatedTarget","tpWrapper","renderOptions","map","index","h","role","onClick","render","Host","invalid","onBlur","class","labelPosition","ref","t","htmlFor","onInput","disabled","placeholder","autocomplete","onFocus","onMouseDown","tabindex"],"sources":["src/components/wm-timepicker/wm-timepicker.scss?tag=wm-timepicker&encapsulation=shadow","src/components/wm-timepicker/wm-timepicker.tsx"],"sourcesContent":[":host,\nwm-timepicker {\n  font-family: inherit;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  @include label;\n\n  .wrapper {\n    .inner-wrapper {\n      @include displayFlex();\n      align-items: center;\n      height: rem-calc(40);\n      border: 1px solid $input-border-color;\n      @include border-radius(3px);\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\n      justify-content: space-between;\n      position: relative;\n\n      input {\n        -moz-border-top-left-radius: 3px;\n        -webkit-border-top-left-radius: 3px;\n        border-top-left-radius: 3px;\n        -moz-border-bottom-left-radius: 3px;\n        -webkit-border-bottom-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        border: none;\n        font-size: rem-calc(14);\n        padding: rem-calc(10 15 8);\n        min-width: 0;\n        height: 100%;\n        flex: 1;\n        margin: 0;\n        font-family: inherit;\n\n        &:disabled {\n          background-color: $input-disabled-bg;\n          color: $input-disabled-color;\n        }\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      button {\n        all: unset;\n        cursor: pointer;\n        padding: rem-calc(0px 6px);\n        height: rem-calc(38);\n        background-color: $button-default-background;\n        border: none;\n        -moz-border-top-right-radius: 3px;\n        -webkit-border-top-right-radius: 3px;\n        border-top-right-radius: 3px;\n        -moz-border-bottom-right-radius: 3px;\n        -webkit-border-bottom-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n\n        // reset styles inherited from Planning in browsers without shadow DOM\n        -moz-border-top-left-radius: 0;\n        -webkit-border-top-left-radius: 0;\n        border-top-left-radius: 0;\n        -moz-border-bottom-left-radius: 0;\n        -webkit-border-bottom-left-radius: 0;\n        border-bottom-left-radius: 0;\n        @include box-shadow(none);\n\n        .clock::after {\n          @include mdi-icon;\n          content: \"\\f150\";\n          color: $button-default-text;\n          font-size: rem-calc(24);\n          padding: 0;\n          line-height: rem-calc(40);\n        }\n\n        &:hover {\n          background: mix(black, $button-default-background, 10%);\n          @include box-shadow(none);\n        }\n\n        &:disabled {\n          background-color: rgba(74, 74, 74, 0.05);\n          pointer-events: none;\n          @include box-shadow(none);\n          .clock::after {\n            color: #7b7b7b;\n          }\n        }\n\n        [dir=\"RTL\"] & {\n          right: auto;\n          left: 0;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &.user-is-tabbing:focus {\n          @include focus-style;\n        }\n\n        &::-moz-focus-inner {\n          border: 0;\n        }\n      }\n\n      .options {\n        margin: 0;\n        padding: 0;\n        -webkit-overflow-scrolling: touch;\n        overflow: auto;\n        // value can be passed in to the component and overwrite the following\n        max-height: rem-calc(305);\n        @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n        @include transition(transform 0.25s ease);\n        @include scale($xVal: 1, $yVal: 0);\n        @include transformOrigin(center top);\n        @include border-radius(3px);\n        position: absolute;\n        top: 2.5rem;\n        right: 0;\n        background: #fff;\n        z-index: 100;\n        width: 100%;\n        font-size: rem-calc(14);\n\n        &.upwards {\n          top: unset;\n          bottom: 2.5rem;\n          @include transformOrigin(center bottom);\n        }\n\n        &.hidden {\n          visibility: hidden;\n        }\n\n        [role=\"option\"] {\n          display: block;\n          cursor: pointer;\n          position: relative;\n          padding: rem-calc(20);\n          background: #fff;\n          font-family: inherit;\n          list-style: none;\n          color: $body-text-color;\n\n          &:hover {\n            background: $background;\n            outline: none;\n          }\n\n          &:focus {\n            outline: none;\n            background: $background;\n          }\n\n          &:not(:last-child) {\n            border-bottom: 2px solid rgba(#2e1b46, 0.05);\n          }\n        }\n      }\n\n      .options.open {\n        @include scale($xVal: 1, $yVal: 1);\n      }\n    }\n\n    &.invalid {\n      .inner-wrapper {\n        @include invalidBorder;\n      }\n\n      .error {\n        @include errorMessage;\n        margin-bottom: 4px;\n        top: 100%;\n        left: 0;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      .inner-wrapper {\n        @include field-focus;\n      }\n    }\n  }\n}\n","import { h, Component, Host, Element, Prop, Watch, State, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl, generateId, shouldOpenUp, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-timepicker\",\n  styleUrl: \"wm-timepicker.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Timepicker {\n  @Element() el!: HTMLWmTimepickerElement;\n  private inputEl!: HTMLInputElement;\n  private optionsEl!: HTMLUListElement;\n  private tpWrapper!: HTMLDivElement;\n  private buttonEl!: HTMLButtonElement;\n  private optionsList!: HTMLLIElement[];\n\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @Prop() errorMessage?: string | null;\n  @Prop() label: string = \"\";\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop() requiredField: boolean = false;\n  @Prop() requiredFieldMessage?: string;\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n  @State() selectedOption!: HTMLLIElement;\n  @State() isExpanded: boolean = false;\n  @State() isTabbing: boolean = false;\n  @Event() wmTimepickerNewValidValue!: EventEmitter<{ value: string }>;\n  @Event() wmTimepickerOnChange!: EventEmitter<{\n    // deprecated in favor of wmTimepickerNewValidValue and standard input event\n    value: string;\n    isValid: boolean;\n  }>;\n  private twelveHrValid = /^(0?[0-9]|1[0-2])\\s*:?\\s*([0-5][0-9])?\\s?(a|p|am|pm)?$/i;\n  private twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\\s*:?\\s*([0-5][0-9])?$/;\n  private uid: string = \"\";\n  private timeFormat: string = \"hh:mm\";\n  private times: string[] = [];\n  private openUp: boolean = false;\n  private buttonAriaLabel: string = intl.formatMessage({\n    id: \"time.selectTime\",\n    defaultMessage: \"Select time\",\n    description: \"Button text for screen readers.\",\n  });\n  @State() displayedErrorMessage?: string | null;\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKey(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"next\");\n        } else {\n          this.moveDown(this.selectedOption);\n        }\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"previous\");\n        } else {\n          this.moveUp(this.selectedOption);\n        }\n        break;\n      case \"Enter\":\n      case \" \":\n        if (this.isExpanded) {\n          ev.preventDefault();\n          this.handleOptionClick(this.selectedOption.textContent!);\n        }\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isExpanded) {\n          this.close(false);\n        }\n        break;\n      case \"Home\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[0]);\n          this.setDropdownPosition(\"first\");\n        }\n        break;\n      case \"End\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[this.optionsList.length - 1]);\n          this.setDropdownPosition(\"last\");\n        }\n        break;\n    }\n  }\n\n  @Watch(\"errorMessage\")\n  updateErrorState() {\n    this.displayedErrorMessage = this.errorMessage;\n  }\n\n  componentWillLoad() {\n    if (this.label === \"\") {\n      console.error(\n        \"You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.\"\n      );\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n    this.updateErrorState();\n    this.timeFormat = intl.formatMessage({\n      id: \"time.timeFormat\",\n      defaultMessage: \"hh:mm\",\n    });\n\n    this.times = this.generateTimes();\n  }\n\n  componentDidLoad() {\n    this.optionsEl.classList.add(\"hidden\");\n    this.optionsList = Array.from(this.optionsEl.querySelectorAll(\"li\"));\n\n    if (this.value) {\n      this.processInput();\n    }\n  }\n\n  isValidTime(input: string) {\n    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);\n  }\n\n  generateTimes() {\n    let times = [];\n    let startTime = 0;\n\n    for (let i = 0; startTime < 24 * 60; i++) {\n      const h = Math.floor(startTime / 60);\n      const hour = h.toString().padStart(2, \"0\");\n      const m = (startTime % 60).toString();\n      const min = m.padStart(2, \"0\");\n      times[i] = `${hour}:${min}`;\n      startTime = startTime + 15;\n    }\n\n    return times;\n  }\n\n  findNearestTimeInterval(time: string) {\n    let formattedTime = this.formatToStorage(time);\n    const minutes = parseInt(formattedTime.slice(3, 5));\n\n    // first find the closest 15 min increment\n    if (minutes % 15 !== 0) {\n      const hour = parseInt(formattedTime.slice(0, 2));\n      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, \"0\");\n      if (roundedMinutes === \"60\") {\n        roundedMinutes = \"00\";\n        let roundedHour = hour + 1;\n        if (roundedHour === 24) {\n          roundedHour = 0;\n        }\n        formattedTime = formattedTime.replace(\n          `${hour.toString().padStart(2, \"0\")}:`,\n          `${roundedHour.toString().padStart(2, \"0\")}:`\n        );\n      }\n      if (parseInt(roundedMinutes) < 8) {\n        roundedMinutes = \"00\";\n      }\n      time = formattedTime.replace(`:${minutes.toString().padStart(2, \"0\")}`, `:${roundedMinutes}`);\n    }\n\n    return time;\n  }\n\n  handleListSelection(time: string) {\n    time = this.findNearestTimeInterval(time);\n\n    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];\n    option && this.focusOption(option);\n  }\n\n  setValue(time: string) {\n    const previousValue = this.value;\n    this.inputEl.value = this.formatToDisplay(time);\n    this.value = this.formatToStorage(time);\n    // update the selection in the list\n    // so it opens on the closest item\n    this.handleListSelection(time);\n\n    if (previousValue !== this.value) {\n      this.wmTimepickerNewValidValue.emit({ value: this.value });\n    }\n    // deprecated in favor of wmTimepickerNewValidValue and input\n    this.wmTimepickerOnChange.emit({\n      value: this.value,\n      isValid: !!this.displayedErrorMessage,\n    });\n  }\n\n  processInput() {\n    if (this.isValidTime(this.value)) {\n      this.setValue(this.value);\n    }\n    const newErrorMessage = this.determineErrorMessage();\n    this.displayedErrorMessage = newErrorMessage;\n  }\n\n  determineErrorMessage(): string | undefined | null {\n    let message: string | undefined | null = this.errorMessage;\n    const requiredError =\n      this.requiredFieldMessage ||\n      intl.formatMessage({\n        id: \"time.requiredError\",\n        defaultMessage: \"A time is required.\",\n      });\n    const invalidError = intl.formatMessage({\n      id: \"time.invalidTime\",\n      defaultMessage: \"Please enter a valid time.\",\n    });\n    const isValid = this.isValidTime(this.value);\n\n    if (isValid && !this.errorMessage) {\n      message = null;\n    } else if (!isValid && !this.errorMessage) {\n      if (this.requiredField && !this.value) {\n        message = requiredError;\n      } else if (this.value) {\n        message = invalidError;\n      } else {\n        message = null;\n      }\n    }\n\n    return message;\n  }\n\n  splitTime(time: string): [number, string, string?] {\n    const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);\n    let hours = parseInt(splitTime![1]);\n    let minutes = splitTime![2] || \"00\";\n    let amPm = splitTime ? splitTime[3] : undefined;\n\n    // handles edge case uncaught by regex '0pm'\n    if (hours === 0 && amPm?.toUpperCase().includes(\"P\")) {\n      // if user types '0pm' we change it to midnight\n      amPm = \"AM\";\n    }\n    return [hours, minutes, amPm];\n  }\n\n  formatToDisplay(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    // at the moment the component only displays in 12hr AM/PM\n    if (hours === 12 && !amPm) {\n      amPm = \"PM\";\n    }\n    if (hours === 0 || hours === 24) {\n      hours = 12;\n    }\n    if (hours > 12) {\n      hours -= 12;\n      amPm = \"PM\";\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\")) {\n      amPm = \"PM\";\n    } else {\n      amPm = \"AM\";\n    }\n\n    return `${hours.toString().padStart(2, \"0\")}:${minutes} ${amPm}`;\n  }\n\n  formatToStorage(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    if (hours === 24) {\n      hours = 0;\n    }\n    if (hours === 12 && amPm && amPm.toUpperCase().includes(\"A\")) {\n      hours -= 12;\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\") && hours !== 12) {\n      hours += 12;\n    }\n    return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\n  }\n\n  open(itemToSelect?: \"next\" | \"previous\") {\n    this.openUp = shouldOpenUp(this.el, this.optionsEl);\n    this.isExpanded = true;\n    this.optionsEl.classList.remove(\"hidden\");\n\n    if (this.errorMessage || !this.value) {\n      this.handleListSelection(\"09:00\");\n    }\n    this.setDropdownPosition(\"center\", this.selectedOption);\n    this.focusOption(this.selectedOption);\n\n    window.requestAnimationFrame(() => {\n      if (itemToSelect === \"next\") {\n        this.moveDown(this.selectedOption);\n      } else if (itemToSelect === \"previous\") {\n        this.moveUp(this.selectedOption);\n      }\n    });\n  }\n\n  close(returnFocus: boolean = true) {\n    this.isExpanded = false;\n\n    window.setTimeout(() => {\n      this.optionsEl.classList.add(\"hidden\");\n      // Returns focus to button after popup closes (no need if user is tabbing)\n      // Delay is necessary for screenreader to get new expanded state before focus\n      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n      // also UX wise, it makes sense for the button to only be focused after the animation is complete\n      if (returnFocus) {\n        this.buttonEl.focus();\n      }\n    }, 150);\n  }\n\n  focusOption(item: HTMLLIElement): void {\n    this.optionsList.forEach((option) => {\n      option.tabIndex = -1;\n    });\n\n    item.tabIndex = 0;\n    this.selectedOption = item;\n    item.focus();\n  }\n\n  setDropdownPosition(position: string, item?: HTMLLIElement) {\n    switch (position) {\n      case \"top\":\n        const prevItem = item?.previousElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;\n        break;\n      case \"bottom\":\n        const nextItem = item?.nextElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          nextItem.getBoundingClientRect().bottom -\n          this.optionsEl.getBoundingClientRect().top +\n          this.optionsEl.scrollTop -\n          this.optionsEl.offsetHeight;\n        break;\n      case \"center\":\n        this.optionsEl.scrollTop =\n          (this.optionsList.findIndex((x) => x.textContent === item?.textContent) - 2) * item!.offsetHeight;\n        break;\n      case \"first\":\n        this.optionsEl.scrollTop = 0;\n        break;\n      case \"last\":\n        this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;\n        break;\n    }\n  }\n\n  moveUp(el: HTMLLIElement) {\n    const prevEl = el.previousElementSibling as HTMLLIElement;\n    if (prevEl) {\n      // scroll option to top of dropdown if partially obscured / out of view\n      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {\n        this.setDropdownPosition(\"top\", el);\n      }\n      this.focusOption(prevEl);\n    } else {\n      this.focusOption(this.optionsList[this.optionsList.length - 1]);\n      this.setDropdownPosition(\"last\");\n    }\n  }\n\n  moveDown(el: HTMLLIElement) {\n    const nextEl = el.nextElementSibling as HTMLLIElement;\n    if (nextEl) {\n      // scroll option to bottom of dropdown if partially obscured / out of view\n      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {\n        this.setDropdownPosition(\"bottom\", el);\n      }\n      this.focusOption(nextEl);\n    } else {\n      this.focusOption(this.optionsList[0]);\n      this.setDropdownPosition(\"first\");\n    }\n  }\n\n  handleOptionClick(time: string) {\n    this.close();\n    this.setValue(time);\n    this.processInput();\n  }\n\n  handleInput() {\n    this.value = this.inputEl.value;\n    if (this.isValidTime(this.value)) {\n      this.handleListSelection(this.findNearestTimeInterval(this.value));\n      this.setDropdownPosition(\"center\", this.selectedOption);\n    }\n  }\n\n  handleInputBlur(ev: FocusEvent) {\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\n    if (!shouldPreventValidation) {\n      this.processInput();\n    }\n    this.tpWrapper.classList.remove(\"focus\");\n  }\n\n  renderOptions() {\n    return this.times.map((time, index) => (\n      <li id={`option${index + 1}`} role=\"option\" onClick={() => this.handleOptionClick(time)}>\n        {this.formatToDisplay(time)}\n      </li>\n    ));\n  }\n\n  render() {\n    return (\n      <Host id={this.uid} invalid={!!this.displayedErrorMessage ? \"true\" : null} onBlur={() => this.close(false)}>\n        <div\n          class={`wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? \"invalid\" : \"\"}`}\n          ref={(t) => (this.tpWrapper = t as HTMLDivElement)}\n        >\n          <div class=\"label-wrapper\">\n            {this.labelPosition !== \"none\" && (\n              <label id={`label-${this.uid}`} class=\"label\" htmlFor={`time-input-${this.uid}`}>\n                {this.label}\n                {this.requiredField && (\n                  <span class=\"required\" aria-hidden=\"true\">\n                    *\n                  </span>\n                )}\n              </label>\n            )}\n          </div>\n          <div>\n            <div class=\"inner-wrapper\">\n              <input\n                id={`time-input-${this.uid}`}\n                aria-label={this.label}\n                aria-describedby={`error-${this.uid}`}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                onBlur={(ev) => this.handleInputBlur(ev)}\n                onInput={() => this.handleInput()}\n                disabled={this.disabled}\n                aria-required={this.requiredField ? \"true\" : null}\n                placeholder={this.timeFormat}\n                autocomplete=\"off\"\n                onFocus={() => this.tpWrapper.classList.add(\"focus\")}\n              />\n              <button\n                id={`btn-${this.uid}`}\n                class={this.isTabbing ? \"user-is-tabbing\" : \"\"}\n                ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n                disabled={this.disabled}\n                aria-controls={`list-${this.uid}`}\n                aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n                aria-label={this.buttonAriaLabel}\n                aria-describedby={`time-input-${this.uid}`}\n                onClick={() => (this.isExpanded ? this.close() : this.open())}\n                // This addresses an issue in Safari, where clicking buttons does not focus them\n                // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event\n                onMouseDown={(ev) => {\n                  ev.preventDefault();\n                  this.buttonEl.focus();\n                }}\n              >\n                <span class=\"clock\" />\n              </button>\n              <ul\n                class={`options ${this.isExpanded ? \"open\" : \"\"}  ${this.openUp ? \"upwards\" : \"\"}`}\n                id={`list-${this.uid}`}\n                role=\"listbox\"\n                aria-labelledby={`label-${this.uid}`}\n                aria-describedby={this.isExpanded ? \"collapsed\" : null} //For screenreader, to announce state when expanded\n                tabindex={-1}\n                ref={(el) => (this.optionsEl = el as HTMLUListElement)}\n              >\n                {this.renderOptions()}\n              </ul>\n            </div>\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\n              {this.displayedErrorMessage}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/{p-76aafb99.system.entry.js → p-aed625c1.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-58b1415e.system.js","./p-bc28c815.system.js"],(function(e){"use strict";var t,i,n,o,r;return{setters:[function(e){t=e.r;i=e.h;n=e.H;o=e.g},function(e){r=e.c},function(){}],execute:function(){var s="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}";var a=e("wm_modal_header",function(){function e(e){t(this,e);this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return i(n,null,i("div",{class:"wm-wrapper"},i("div",null,i("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,i("span",{class:"subtitle"},this.subheading))),i("wm-button",{"button-type":"navigational",icon:"f156",tooltip:r,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());a.style=s}}}));
-//# sourceMappingURL=p-76aafb99.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-c36002b6.system.js","./p-f0fd8695.system.js"],(function(e){"use strict";var t,i,n,o,r;return{setters:[function(e){t=e.r;i=e.h;n=e.H;o=e.g},function(e){r=e.g},function(){}],execute:function(){var s="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}";var a=e("wm_modal_header",function(){function e(e){t(this,e);this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return i(n,null,i("div",{class:"wm-wrapper"},i("div",null,i("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,i("span",{class:"subtitle"},this.subheading))),i("wm-button",{"button-type":"navigational",icon:"f156",tooltip:r.close,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());a.style=s}}}));
+//# sourceMappingURL=p-aed625c1.system.entry.js.map

package/dist/ripple/p-aed625c1.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmModalHeaderCss","ModalHeader","exports","class_1","prototype","componentWillLoad","_this","this","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","id","concat","heading","subheading","icon","tooltip","globalMessages","close","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 {\n  @include border-radius(5px 5px 0 0px);\n  //Fix for Chrome sometimes leaving space between header and content, making the overlay show through\n  margin-bottom: -1px;\n\n  .wm-wrapper {\n    @include displayFlex();\n    @include justifyContent(space-between);\n    @include alignItems(center);\n\n    .title {\n      margin: 0;\n      font-weight: 600;\n      font-size: rem-calc(18);\n      color: rgb(74, 74, 74);\n      line-height: normal;\n\n      .subtitle {\n        display: block;\n        font-size: rem-calc(14);\n        font-weight: normal;\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n}\n","import { h, Component, Element, Prop, Host } from \"@stencil/core\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n  tag: \"wm-modal-header\",\n  styleUrl: \"wm-modal-header.scss\",\n})\nexport class ModalHeader {\n  @Element() el!: HTMLElement;\n  private closeButtonEl!: HTMLElement;\n\n  @Prop() heading?: string = \"\";\n  @Prop() subheading?: string = \"\";\n  private uid!: string;\n\n  componentWillLoad() {\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\n\n    // Trap focus when user tabs past last element in modal\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\n    // if we listen to the whole doc each modal on the page reacts to every event\n    this.el.parentElement!.addEventListener(\"focusFirstElement\", () => {\n      this.closeButtonEl.focus();\n    });\n  }\n\n  emitParentCloseEvent() {\n    const parentModal = this.el.parentElement;\n    //@ts-ignore\n    parentModal.emitCloseEvent();\n  }\n\n  // @Listen(\"click\")\n  // directFocusOnClick() {\n  //   this.headingElement.tabIndex = 0;\n  //   this.headingElement.focus();\n  // }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"wm-wrapper\">\n          <div>\n            <h2\n              class=\"title\"\n              id={`wm-modal-heading-text-${this.uid}`}\n              // ref={el => (this.headingElement = el as HTMLElement)}\n              // onBlur={() => (this.headingElement.tabIndex = -1)}\n            >\n              {this.heading}\n              <span class=\"subtitle\">{this.subheading}</span>\n            </h2>\n          </div>\n          <wm-button\n            button-type=\"navigational\"\n            icon=\"f156\"\n            tooltip={globalMessages.close}\n            tooltip-position=\"left\"\n            id={`wm-modal-close-${this.uid}`}\n            ref={(el) => (this.closeButtonEl = el as HTMLElement)}\n            onClick={() => this.emitParentCloseEvent()}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8OAAA,IAAMA,EAAmB,ouB,ICOZC,EAAWC,EAAA,6B,qCAIK,G,gBACG,E,CAG9BC,EAAAC,UAAAC,kBAAA,eAAAC,EAAAC,KACEA,KAAKC,IAAOD,KAAKE,GAAGC,cAAqCF,IAKzDD,KAAKE,GAAGC,cAAeC,iBAAiB,qBAAqB,WAC3DL,EAAKM,cAAcC,O,KAIvBV,EAAAC,UAAAU,qBAAA,WACE,IAAMC,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYC,gB,EASdb,EAAAC,UAAAa,OAAA,eAAAX,EAAAC,KACE,OACEW,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNC,GAAI,yBAAAC,OAAyBf,KAAKC,MAIjCD,KAAKgB,QACNL,EAAA,QAAME,MAAM,YAAYb,KAAKiB,cAGjCN,EAAA,2BACc,eACZO,KAAK,OACLC,QAASC,EAAeC,MAAK,mBACZ,OACjBP,GAAI,kBAAAC,OAAkBf,KAAKC,KAC3BqB,IAAK,SAACpB,GAAE,OAAMH,EAAKM,cAAgBH,CAA3B,EACRqB,QAAS,WAAM,OAAAxB,EAAKQ,sBAAL,K,uHArDH,I"}

package/dist/ripple/{p-0d36ceba.system.entry.js → p-b5b521e4.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(t){"use strict";var e,o,i,r,n,p;return{setters:[function(t){e=t.r;o=t.c;i=t.h;r=t.H;n=t.g},function(t){p=t.i}],execute:function(){var 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}";var a=t("priv_chart_popover",function(){function t(t){e(this,t);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={}}Object.defineProperty(t.prototype,"eventToEmit",{get:function(){return this.chartEl.nodeName==="WM-CHART"?this.wmChartPopoverButtonTriggered:this.wmProgressIndicatorButtonTriggered},enumerable:false,configurable:true});t.prototype.handleClickOnDocument=function(){this.open=this.popoverClicked;this.popoverClicked=false};t.prototype.handleClick=function(t){var e=false;if(this.btnEl){e=t.target===this.btnEl||this.btnEl.contains(t.target)}this.popoverClicked=!e&&(t.target===this.el||this.el.contains(t.target))};t.prototype.handleButtonClick=function(){if(this.sliceRef){this.sliceRef.click();this.eventToEmit.emit(this.sliceRef)}this.open=false};t.prototype.renderLiveRegion=function(){if(this.liveRegion){this.liveRegion.innerHTML="";var t=document.createElement("div");var e=document.createElement("span");e.innerHTML=this.popoverTitle+" "||"";t.appendChild(e);var o=document.createElement("span");o.innerHTML=this.popoverText+" "||"";t.appendChild(o);if(this.buttonText){var i=document.createElement("span");i.innerHTML=this.buttonText+" "+p.formatMessage({id:"chart.infoButton",defaultMessage:"Button. Click for more information."});t.appendChild(i)}this.liveRegion.appendChild(t)}};t.prototype.positionPopover=function(){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"}};t.prototype.render=function(){var t=this;var e=this.popoverTitle&&(this.popoverTitle[0]==="-"?"negative":this.popoverTitle[0]==="+"?"positive":"");return i(r,null,!!this.open?i("div",{"aria-hidden":"true",class:"popover"},i("h1",{class:"title ".concat(e)},this.popoverTitle),i("p",{class:"text"},this.popoverText),this.buttonText?i("button",{tabindex:"-1",focusable:"false",ref:function(e){return t.btnEl=e},class:"popover-button",onClick:function(){return t.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:function(e){return t.liveRegion=e},class:"live-region sr-only","aria-live":"polite","aria-atomic":"true"},this.open&&this.renderLiveRegion()))};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{coords:["positionPopover"]}},enumerable:false,configurable:true});return t}());a.style=s}}}));
-//# sourceMappingURL=p-0d36ceba.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f0fd8695.system.js"],(function(t){"use strict";var e,o,i,r,n,p;return{setters:[function(t){e=t.r;o=t.c;i=t.h;r=t.H;n=t.g},function(t){p=t.i}],execute:function(){var 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}";var a=t("priv_chart_popover",function(){function t(t){e(this,t);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={}}Object.defineProperty(t.prototype,"eventToEmit",{get:function(){return this.chartEl.nodeName==="WM-CHART"?this.wmChartPopoverButtonTriggered:this.wmProgressIndicatorButtonTriggered},enumerable:false,configurable:true});t.prototype.handleClickOnDocument=function(){this.open=this.popoverClicked;this.popoverClicked=false};t.prototype.handleClick=function(t){var e=false;if(this.btnEl){e=t.target===this.btnEl||this.btnEl.contains(t.target)}this.popoverClicked=!e&&(t.target===this.el||this.el.contains(t.target))};t.prototype.handleButtonClick=function(){if(this.sliceRef){this.sliceRef.click();this.eventToEmit.emit(this.sliceRef)}this.open=false};t.prototype.renderLiveRegion=function(){if(this.liveRegion){this.liveRegion.innerHTML="";var t=document.createElement("div");var e=document.createElement("span");e.innerHTML=this.popoverTitle+" "||"";t.appendChild(e);var o=document.createElement("span");o.innerHTML=this.popoverText+" "||"";t.appendChild(o);if(this.buttonText){var i=document.createElement("span");i.innerHTML=this.buttonText+" "+p.formatMessage({id:"chart.infoButton",defaultMessage:"Button. Click for more information."});t.appendChild(i)}this.liveRegion.appendChild(t)}};t.prototype.positionPopover=function(){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"}};t.prototype.render=function(){var t=this;var e=this.popoverTitle&&(this.popoverTitle[0]==="-"?"negative":this.popoverTitle[0]==="+"?"positive":"");return i(r,null,!!this.open?i("div",{"aria-hidden":"true",class:"popover"},i("h1",{class:"title ".concat(e)},this.popoverTitle),i("p",{class:"text"},this.popoverText),this.buttonText?i("button",{tabindex:"-1",focusable:"false",ref:function(e){return t.btnEl=e},class:"popover-button",onClick:function(){return t.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:function(e){return t.liveRegion=e},class:"live-region sr-only","aria-live":"polite","aria-atomic":"true"},this.open&&this.renderLiveRegion()))};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{coords:["positionPopover"]}},enumerable:false,configurable:true});return t}());a.style=s}}}));
+//# sourceMappingURL=p-b5b521e4.system.entry.js.map

package/dist/ripple/p-b5b521e4.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["privChartPopoverCss","ChartPopover","exports","this","chartEl","el","parentElement","getRootNode","host","popoverWidth","popoverClicked","Object","defineProperty","class_1","prototype","nodeName","wmChartPopoverButtonTriggered","wmProgressIndicatorButtonTriggered","handleClickOnDocument","open","handleClick","ev","popoverBtnClicked","btnEl","target","contains","handleButtonClick","sliceRef","click","eventToEmit","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","_this","titleAffordance","h","Host","class","concat","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 {\n  position: fixed;\n\n  z-index: 10;\n  border-radius: rem-calc(3);\n  @include box-shadow(0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12));\n  background-color: $light-background;\n  font-size: 0.875rem;\n  text-align: left;\n\n  &.user-is-tabbing {\n    .button-text {\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n      background-size: 6px 3px;\n      background-position: 0 1em;\n      border-radius: 0;\n      line-height: normal;\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n.popover {\n  width: rem-calc(168);\n  padding: rem-calc(10 15);\n  box-sizing: border-box;\n\n  & .title {\n    font-size: 1em;\n    font-weight: 500;\n    margin: 0;\n    padding-top: 0;\n    padding-left: 0;\n    padding-bottom: rem-calc(4);\n\n    &.positive {\n      color: $success;\n    }\n\n    &.negative {\n      color: $error;\n    }\n  }\n\n  & .text {\n    margin: 0;\n    margin-bottom: rem-calc(8);\n  }\n\n  & .popover-button {\n    @include box-shadow(none);\n    position: relative;\n    display: inline-block;\n    margin-left: rem-calc(16);\n    padding-left: 0;\n    padding-right: 0;\n    height: auto;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    text-decoration: none;\n    letter-spacing: 0;\n    text-transform: none;\n    text-align: initial;\n    font-size: rem-calc(14);\n    font-weight: 700;\n    color: $button-default-text;\n    line-height: normal;\n\n    & .btn-icon {\n      position: absolute;\n      top: rem-calc(3);\n      left: rem-calc(-16);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      outline: none;\n    }\n\n    &:hover {\n      text-decoration: none;\n      background: none;\n      color: #454077;\n      span {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","import { h, Component, Prop, Host, Element, Watch, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../../global/functions\";\n\n@Component({\n  tag: \"priv-chart-popover\",\n  styleUrl: \"priv-chart-popover.scss\",\n})\nexport class ChartPopover {\n  @Element() el!: HTMLPrivChartPopoverElement;\n  private chartEl: Element = (this.el.parentElement!.getRootNode() as ShadowRoot).host;\n  private btnEl?: HTMLButtonElement;\n  private liveRegion?: HTMLDivElement;\n\n  @Event()\n  wmChartPopoverButtonTriggered!: EventEmitter<HTMLWmChartSliceElement>;\n  @Event()\n  wmProgressIndicatorButtonTriggered!: EventEmitter<HTMLWmProgressSliceElement>;\n  get eventToEmit() {\n    return this.chartEl.nodeName === \"WM-CHART\"\n      ? this.wmChartPopoverButtonTriggered\n      : this.wmProgressIndicatorButtonTriggered;\n  }\n\n  @Prop() sliceRef?: HTMLWmChartSliceElement;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() buttonText?: string;\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() coords: { x?: number; y?: number } = {};\n  private popoverWidth: number = 168;\n\n  private popoverClicked = false;\n\n  @Listen(\"click\", { capture: false, target: \"document\" })\n  handleClickOnDocument() {\n    // because this listener is set document-wide, whenever something inside it is clicked\n    // the event target returned will always be the host (wm-chart)\n    // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here\n    // capture = false in @Listen ensures order of execution\n    this.open = this.popoverClicked;\n    this.popoverClicked = false;\n  }\n\n  @Listen(\"click\", { capture: false })\n  handleClick(ev: MouseEvent) {\n    let popoverBtnClicked = false;\n    if (this.btnEl) {\n      popoverBtnClicked = ev.target === this.btnEl || this.btnEl.contains(ev.target as HTMLElement);\n    }\n    // if the click is on the popover (except the popover button),\n    // set popoverClicked to true. It will be used by the other listener above\n    this.popoverClicked = !popoverBtnClicked && (ev.target === this.el || this.el.contains(ev.target as HTMLElement));\n  }\n\n  handleButtonClick() {\n    if (this.sliceRef) {\n      this.sliceRef.click();\n      this.eventToEmit.emit(this.sliceRef);\n    }\n    this.open = false;\n  }\n\n  renderLiveRegion() {\n    if (this.liveRegion) {\n      this.liveRegion.innerHTML = \"\";\n\n      const wrapper = document.createElement(\"div\");\n\n      const titleEl = document.createElement(\"span\");\n      titleEl.innerHTML = this.popoverTitle + \" \" || \"\";\n      wrapper.appendChild(titleEl);\n\n      const textEl = document.createElement(\"span\");\n      textEl.innerHTML = this.popoverText + \" \" || \"\";\n      wrapper.appendChild(textEl);\n\n      if (this.buttonText) {\n        const buttonEl = document.createElement(\"span\");\n        buttonEl.innerHTML =\n          this.buttonText +\n          \" \" +\n          intl.formatMessage({\n            id: \"chart.infoButton\",\n            defaultMessage: \"Button. Click for more information.\",\n          });\n        wrapper.appendChild(buttonEl);\n      }\n      this.liveRegion.appendChild(wrapper);\n    }\n  }\n\n  @Watch(\"coords\")\n  positionPopover() {\n    this.el!.style.top = this.coords.y + \"px\";\n    if (window.innerWidth - this.coords.x! >= this.popoverWidth + 10) {\n      this.el!.style.left = this.coords.x + \"px\"; // opens on the right\n    } else {\n      this.el!.style.left = this.coords.x! - this.popoverWidth + \"px\"; // opens on the left\n    }\n  }\n\n  render() {\n    const titleAffordance = this.popoverTitle && (this.popoverTitle[0] === \"-\" ? \"negative\" : this.popoverTitle[0] === \"+\" ? \"positive\" : \"\"); \n    return (\n      <Host>\n        {!!this.open ? (\n          <div aria-hidden=\"true\" class=\"popover\">\n            <h1 class={`title ${titleAffordance}`}>{this.popoverTitle}</h1>\n            <p class=\"text\">{this.popoverText}</p>\n            {this.buttonText ? (\n              // @ts-ignore\n              <button\n                tabindex=\"-1\"\n                // @ts-ignore\n                focusable=\"false\"\n                ref={(el) => (this.btnEl = el as HTMLButtonElement)}\n                class=\"popover-button\"\n                onClick={() => this.handleButtonClick()}\n              >\n                <svg class=\"btn-icon\" height=\"9\" width=\"9\">\n                  <path fill=\"#575195\" d=\"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z\" />\n                </svg>\n                <span class=\"button-text\">{this.buttonText}</span>\n              </button>\n            ) : (\n              \"\"\n            )}\n          </div>\n        ) : (\n          \"\"\n        )}\n        <div\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {this.open && this.renderLiveRegion()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/{p-47d223f1.system.entry.js → p-b7451e73.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(t){"use strict";var o,e,i,r,n,l,p,s,g;return{setters:[function(t){o=t.r;e=t.h;i=t.H;r=t.g},function(t){n=t.i;l=t.m;p=t.n;s=t.o;g=t.p}],execute:function(){var a=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button: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:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-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 .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .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 h=t("wm_toggletip",function(){function t(t){o(this,t);this.tooltipMessage=n.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}Object.defineProperty(t.prototype,"tempTooltip",{get:function(){return this.tooltip||this.tooltipText},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){var t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error('wm-toggletip: tooltip-position has an invalid value of "'.concat(this.tooltipPosition,'", make sure to use one of the following values: ').concat(t))}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}};t.prototype.handleKeydown=function(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleClick=function(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}};t.prototype.open=function(){this.isOpen=true;this.announceToggletip()};t.prototype.close=function(){this.isOpen=false;this.hideTooltip()};t.prototype.handleBlur=function(){this.hideTooltip();this.liveRegionEl.innerHTML=""};t.prototype.showTooltip=function(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")};t.prototype.hideTooltip=function(){this.tooltipEl.classList.remove("hover")};t.prototype.announceToggletip=function(){var t=this;this.liveRegionEl.innerHTML="";setTimeout((function(){t.liveRegionEl.innerHTML=t.tempTooltip}),10)};t.prototype.setToggletipPosition=function(){if(this.tooltipPosition.includes("bottom")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&g(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return e(i,null,e("button",{class:"button ".concat(this.isTabbing?"user-is-tabbing":""),type:"button","aria-label":this.label,onClick:function(){t.setToggletipPosition();t.open()},onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltip()},onBlur:function(){return t.handleBlur()}}),e("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),e("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),e("div",{ref:function(o){return t.liveRegionEl=o},class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=a}}}));
-//# sourceMappingURL=p-47d223f1.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f0fd8695.system.js"],(function(t){"use strict";var o,e,i,r,n,l,p,s,g;return{setters:[function(t){o=t.r;e=t.h;i=t.H;r=t.g},function(t){n=t.i;l=t.m;p=t.n;s=t.o;g=t.p}],execute:function(){var a=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button: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:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-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 .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .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 h=t("wm_toggletip",function(){function t(t){o(this,t);this.tooltipMessage=n.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}Object.defineProperty(t.prototype,"tempTooltip",{get:function(){return this.tooltip||this.tooltipText},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){var t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error('wm-toggletip: tooltip-position has an invalid value of "'.concat(this.tooltipPosition,'", make sure to use one of the following values: ').concat(t))}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}};t.prototype.handleKeydown=function(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleClick=function(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}};t.prototype.open=function(){this.isOpen=true;this.announceToggletip()};t.prototype.close=function(){this.isOpen=false;this.hideTooltip()};t.prototype.handleBlur=function(){this.hideTooltip();this.liveRegionEl.innerHTML=""};t.prototype.showTooltip=function(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")};t.prototype.hideTooltip=function(){this.tooltipEl.classList.remove("hover")};t.prototype.announceToggletip=function(){var t=this;this.liveRegionEl.innerHTML="";setTimeout((function(){t.liveRegionEl.innerHTML=t.tempTooltip}),10)};t.prototype.setToggletipPosition=function(){if(this.tooltipPosition.includes("bottom")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&g(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return e(i,null,e("button",{class:"button ".concat(this.isTabbing?"user-is-tabbing":""),type:"button","aria-label":this.label,onClick:function(){t.setToggletipPosition();t.open()},onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltip()},onBlur:function(){return t.handleBlur()}}),e("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),e("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),e("div",{ref:function(o){return t.liveRegionEl=o},class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=a}}}));
+//# sourceMappingURL=p-b7451e73.system.entry.js.map

package/dist/ripple/p-b7451e73.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmToggletipCss","Toggletip","exports","this","tooltipMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","class_1","prototype","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","tempTooltip","includes","tooltipPosition","concat","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","_this","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\n  content: \"\";\n  position: absolute;\n  border: solid transparent;\n  height: 0;\n  width: 0;\n  pointer-events: none;\n}\n@mixin toggletipTriangleTop() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-bottom-color: $charcoal;\n  border-bottom-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleBottom() {\n  @include toggletipTriangleBase();\n  top: 100%;\n  border-top-color: $charcoal;\n  border-top-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleLeft() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-right-color: $charcoal;\n  border-right-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-left-width: 0px;\n  top: calc(50% - 6px);\n  left: rem-calc(-3);\n}\n@mixin toggletipTriangleRight() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-left-color: $charcoal;\n  border-left-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-right-width: 0px;\n  top: calc(50% - 6px);\n  right: rem-calc(-3);\n}\n@mixin toggletipTriangleTopLeft() {\n  @include toggletipTriangleTop();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleTopRight() {\n  @include toggletipTriangleTop();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n@mixin toggletipTriangleBottomLeft() {\n  @include toggletipTriangleBottom();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleBottomRight() {\n  @include toggletipTriangleBottom();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n\n:host,\nwm-toggletip {\n  display: inline-block;\n  position: relative;\n  height: 40px;\n  width: 40px;\n\n  .button {\n    display: flex;\n    background: none;\n    border: none;\n    padding: 0;\n    width: inherit;\n    height: inherit;\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n    &:before {\n      @include mdi-icon;\n      content: \"\\f2fc\";\n      font-size: 16px;\n      color: $charcoal;\n      background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\n    }\n    &:focus {\n      outline: none;\n      &.user-is-tabbing {\n        @include focus-style;\n      }\n    }\n  }\n\n  .tooltip {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    pointer-events: none;\n\n    font-family: inherit;\n    font-size: rem-calc(14);\n    text-transform: none;\n    font-weight: normal;\n    background: black;\n    color: #fff;\n    padding: rem-calc(6);\n    line-height: normal;\n    z-index: 30;\n    white-space: nowrap;\n\n    &.hover {\n      clip: auto;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: opacity 500ms 500ms;\n      padding: rem-calc(6);\n      white-space: nowrap;\n    }\n  }\n\n  .toggletip {\n    position: absolute;\n    max-width: rem-calc(220);\n    width: max-content;\n    padding: rem-calc(8) rem-calc(12);\n    border-radius: rem-calc(3);\n    background: $charcoal;\n    color: white;\n    font-size: 14px;\n    z-index: 30;\n\n    &.top {\n      &:before {\n        @include toggletipTriangleBottom();\n      }\n    }\n\n    &.bottom {\n      &:before {\n        @include toggletipTriangleTop();\n      }\n    }\n\n    &.right {\n      &:before {\n        @include toggletipTriangleLeft();\n      }\n    }\n\n    &.left {\n      &:before {\n        @include toggletipTriangleRight();\n      }\n    }\n\n    &.bottom-right {\n      &:before {\n        @include toggletipTriangleTopLeft();\n      }\n    }\n\n    &.bottom-left {\n      &:before {\n        @include toggletipTriangleTopRight();\n      }\n    }\n\n    &.top-right {\n      &:before {\n        @include toggletipTriangleBottomLeft();\n      }\n    }\n\n    &.top-left {\n      &:before {\n        @include toggletipTriangleBottomRight();\n      }\n    }\n\n    &.hidden {\n      transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\n      visibility: hidden;\n    }\n  }\n\n  .toggletip,\n  .tooltip {\n    &.top {\n      transform: translate(-50%, 0%);\n      bottom: 40px;\n      left: 20px;\n    }\n\n    &.bottom {\n      transform: translate(-50%, 0%);\n      top: 40px;\n      left: 20px;\n    }\n\n    &.right {\n      transform: translate(100%, calc(-50% - 20px));\n      right: 0px;\n    }\n\n    &.left {\n      transform: translate(-100%, calc(-50% - 20px));\n      left: 0px;\n    }\n\n    &.bottom-right {\n      top: 40px;\n      left: 0px;\n    }\n\n    &.bottom-left {\n      top: 40px;\n      right: 0px;\n    }\n\n    &.top-right {\n      bottom: 40px;\n      left: 0px;\n    }\n\n    &.top-left {\n      bottom: 40px;\n      right: 0px;\n    }\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\n\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\nimport { TooltipPlacement } from \"../../global/interfaces\";\n@Component({\n  tag: \"wm-toggletip\",\n  styleUrl: \"wm-toggletip.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Toggletip {\n  @Element() el!: HTMLWmToggletipElement;\n\n  @Prop() label?: string;\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\n  @Prop() tooltipText?: string; // DEPRECATED\n  get tempTooltip() {\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\n    return this.tooltip || this.tooltipText;\n  }\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @State() isOpen: boolean = false;\n  @State() isTabbing: boolean = false;\n\n  private toggletipEl!: HTMLDivElement;\n  private tooltipEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private tooltipMessage = intl.formatMessage({\n    id: \"toggletip.moreInformation\",\n    defaultMessage: \"More information\",\n  });\n\n  componentWillLoad() {\n    const validTooltipPlacement = [\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n      \"top-right\",\n      \"top-left\",\n      \"bottom-right\",\n      \"bottom-left\",\n    ];\n\n    if (!this.label) {\n      console.error(\"wm-toggletip must have a label property\");\n    }\n    if (!this.tempTooltip) {\n      console.error(\"wm-toggletip must have a tooltip property\");\n    }\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\n      console.error(\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\n      );\n    }\n    if (this.tooltipText) {\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isOpen) {\n          ev.stopPropagation(); // prevent closing modal if within one\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isOpen) {\n          this.close();\n        }\n    }\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    if (this.isOpen) {\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\n        // Re-announce if clicking any part of the component while open\n        this.announceToggletip();\n      } else {\n        this.close();\n      }\n    }\n  }\n\n  open() {\n    this.isOpen = true;\n    this.announceToggletip();\n  }\n\n  close() {\n    this.isOpen = false;\n    this.hideTooltip();\n  }\n\n  handleBlur() {\n    this.hideTooltip();\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\n    this.liveRegionEl.innerHTML = \"\";\n  }\n\n  showTooltip() {\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\n    this.setToggletipPosition();\n    this.tooltipEl.classList.add(\"hover\");\n  }\n\n  hideTooltip() {\n    this.tooltipEl.classList.remove(\"hover\");\n  }\n\n  announceToggletip() {\n    this.liveRegionEl.innerHTML = \"\";\n    setTimeout(() => {\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\n    }, 10);\n  }\n\n  setToggletipPosition() {\n    // Vertical\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\n    }\n\n    // Horizontal\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          type=\"button\"\n          aria-label={this.label}\n          onClick={() => {\n            this.setToggletipPosition();\n            this.open();\n          }}\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltip()}\n          onBlur={() => this.handleBlur()}\n        ></button>\n        <div\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\n          aria-hidden=\"true\"\n        >\n          {this.tooltipMessage}\n        </div>\n        <div\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\n        >\n          {this.tempTooltip}\n        </div>\n        <div\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          role=\"status\"\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wOAAA,IAAMA,EAAiB,08M,ICSVC,EAASC,EAAA,0B,wBAiBZC,KAAAC,eAAiBC,EAAKC,cAAc,CAC1CC,GAAI,4BACJC,eAAgB,qB,4FAT0D,e,YACjD,M,eACG,K,CAN9BC,OAAAC,eAAIC,EAAAC,UAAA,cAAW,C,IAAf,WAEE,OAAOT,KAAKU,SAAWV,KAAKW,W,uCAc9BH,EAAAC,UAAAG,kBAAA,WACE,IAAMC,EAAwB,CAC5B,MACA,QACA,SACA,OACA,YACA,WACA,eACA,eAGF,IAAKb,KAAKc,MAAO,CACfC,QAAQC,MAAM,0C,CAEhB,IAAKhB,KAAKiB,YAAa,CACrBF,QAAQC,MAAM,4C,CAEhB,IAAKH,EAAsBK,SAASlB,KAAKmB,iBAAkB,CACzDJ,QAAQC,MACN,2DAAAI,OAA2DpB,KAAKmB,gBAAe,qDAAAC,OAAoDP,G,CAGvI,GAAIb,KAAKW,YAAa,CACpBI,QAAQM,KAAK,2F,GAKjBb,EAAAC,UAAAa,cAAA,SAAcC,GACZ,OAAQA,EAAGC,KACT,IAAK,SACHD,EAAGE,iBACH,GAAIzB,KAAK0B,OAAQ,CACfH,EAAGI,kBACH3B,KAAK4B,O,CAEP,MACF,IAAK,MACH,GAAI5B,KAAK0B,OAAQ,CACf1B,KAAK4B,O,IAMbpB,EAAAC,UAAAoB,gBAAA,WACE7B,KAAK8B,UAAY,I,EAInBtB,EAAAC,UAAAsB,iBAAA,WACE/B,KAAK8B,UAAY,K,EAInBtB,EAAAC,UAAAuB,YAAA,SAAYT,GACV,GAAIvB,KAAK0B,OAAQ,CACf,GAAIH,EAAGU,SAAWjC,KAAKkC,IAAMlC,KAAKkC,GAAGC,SAASZ,EAAGU,QAAwB,CAEvEjC,KAAKoC,mB,KACA,CACLpC,KAAK4B,O,IAKXpB,EAAAC,UAAA4B,KAAA,WACErC,KAAK0B,OAAS,KACd1B,KAAKoC,mB,EAGP5B,EAAAC,UAAAmB,MAAA,WACE5B,KAAK0B,OAAS,MACd1B,KAAKsC,a,EAGP9B,EAAAC,UAAA8B,WAAA,WACEvC,KAAKsC,cAELtC,KAAKwC,aAAaC,UAAY,E,EAGhCjC,EAAAC,UAAAiC,YAAA,WAGE1C,KAAK2C,uBACL3C,KAAK4C,UAAUC,UAAUC,IAAI,Q,EAG/BtC,EAAAC,UAAA6B,YAAA,WACEtC,KAAK4C,UAAUC,UAAUE,OAAO,Q,EAGlCvC,EAAAC,UAAA2B,kBAAA,eAAAY,EAAAhD,KACEA,KAAKwC,aAAaC,UAAY,GAC9BQ,YAAW,WACTD,EAAKR,aAAaC,UAAYO,EAAK/B,W,GAClC,G,EAGLT,EAAAC,UAAAkC,qBAAA,WAEE,GAAI3C,KAAKmB,gBAAgBD,SAAS,WAAagC,EAAalD,KAAKkC,GAAIlC,KAAKmD,aAAc,CACtFnD,KAAKmB,gBAAkBnB,KAAKmB,gBAAgBiC,QAAQ,SAAU,M,MACzD,GAAIpD,KAAKmB,gBAAgBD,SAAS,QAAUmC,EAAerD,KAAKkC,GAAIlC,KAAKmD,aAAc,CAC5FnD,KAAKmB,gBAAkBnB,KAAKmB,gBAAgBiC,QAAQ,MAAO,S,CAI7D,GAAIpD,KAAKmB,gBAAgBD,SAAS,SAAWoC,EAAiBtD,KAAKkC,GAAIlC,KAAKmD,aAAc,CACxFnD,KAAKmB,gBAAkBnB,KAAKmB,gBAAgBiC,QAAQ,OAAQ,Q,MACvD,GAAIpD,KAAKmB,gBAAgBD,SAAS,UAAYqC,EAAgBvD,KAAKkC,GAAIlC,KAAKmD,aAAc,CAC/FnD,KAAKmB,gBAAkBnB,KAAKmB,gBAAgBiC,QAAQ,QAAS,O,GAIjE5C,EAAAC,UAAA+C,OAAA,eAAAR,EAAAhD,KACE,OACEyD,EAACC,EAAI,KACHD,EAAA,UACEE,MAAO,UAAAvC,OAAUpB,KAAK8B,UAAY,kBAAoB,IACtD8B,KAAK,SAAQ,aACD5D,KAAKc,MACjB+C,QAAS,WACPb,EAAKL,uBACLK,EAAKX,M,EAGPyB,aAAc,WAAM,OAAAd,EAAKN,aAAL,EACpBqB,aAAc,WAAM,OAAAf,EAAKV,aAAL,EACpB0B,QAAS,WAAM,OAAAhB,EAAKN,aAAL,EACfuB,OAAQ,WAAM,OAAAjB,EAAKT,YAAL,IAEhBkB,EAAA,OACES,IAAK,SAAChC,GAAE,OAAMc,EAAKJ,UAAYV,CAAvB,EACRyB,MAAO,WAAAvC,OAAWpB,KAAKmB,gBAAe,KAAAC,OAAIpB,KAAK0B,OAAS,SAAW,IAAI,cAC3D,QAEX1B,KAAKC,gBAERwD,EAAA,OACES,IAAK,SAAChC,GAAE,OAAMc,EAAKG,YAAcjB,CAAzB,EACRyB,MAAO,aAAAvC,OAAapB,KAAK0B,OAAS,GAAK,SAAQ,KAAAN,OAAIpB,KAAKmB,kBAEvDnB,KAAKiB,aAERwC,EAAA,OACES,IAAK,SAAChC,GAAE,OAAMc,EAAKR,aAAeN,CAA1B,EACRyB,MAAM,sBACNQ,KAAK,SAAQ,YAEH,SAAQ,cACN,S,kOA/KA,I"}

package/dist/ripple/p-bafdcb4e.system.entry.js

@@ -0,0 +1,2 @@
+var __spreadArray=this&&this.__spreadArray||function(a,n,s){if(s||arguments.length===2)for(var i=0,r=n.length,t;i<r;i++){if(t||!(i in n)){if(!t)t=Array.prototype.slice.call(n,0,i);t[i]=n[i]}}return a.concat(t||Array.prototype.slice.call(n))};System.register(["./p-7b2fc615.system.js","./p-f0fd8695.system.js","./p-c36002b6.system.js"],(function(a){"use strict";var n,s,i,r,t,e,o,c;return{setters:[function(a){n=a.r;s=a.c;i=a.h;r=a.g},function(a){t=a.g;e=a.s;o=a.j},function(a){c=a.g}],execute:function(){var m='.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active){-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host *,wm-snackbar *{-webkit-box-sizing:border-box;box-sizing:border-box;margin:unset}:host .wm-snackbars,wm-snackbar .wm-snackbars{position:fixed;bottom:0;left:1.25rem;right:1.25rem;padding:0.25rem 0.625rem 1.875rem;z-index:2001;max-width:35.5rem;max-height:17.5rem;-webkit-overflow-scrolling:touch;overflow:auto}:host .wm-snackbars.empty,wm-snackbar .wm-snackbars.empty{-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);padding-top:0;padding-bottom:0}:host .wm-snackbars .wm-snack-wrapper,wm-snackbar .wm-snackbars .wm-snack-wrapper{width:100%;height:100%}:host .wm-snackbars .wm-snack-wrapper:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar{-webkit-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 3px rgba(0, 0, 0, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);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;-ms-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-webkit-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);-moz-transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);transition:all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1);font-size:0.875rem;color:#fff;padding:0.9375rem 1.875rem;background:#4a4a4a;opacity:0;left:0;position:relative;font-family:inherit}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link{letter-spacing:0;text-transform:none;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1;color:#85dadf;margin:0 3.125rem 0 0.625rem;text-decoration:none;font-weight:600;cursor:pointer}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::after,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link.new-window::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;display:inline;content:"\\f137";margin-left:0.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:hover{text-decoration:underline}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link:focus{outline:none;border:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .link::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar:not(:last-child){margin-bottom:1.25rem}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button),wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar.active:not(button){opacity:1}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg{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;width:100%;position:relative;padding:0}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .msgtext{width:100%}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background-color:#3b3b3b;color:#ffffff;cursor:pointer;border:none;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}@media screen and (min-width: 48rem){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack{min-width:1.875rem;min-height:1.875rem}}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:before,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack: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:"\\f156"}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover{background-color:#fff;color:#4a4a4a}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus{outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack::-moz-focus-inner{border:0;outline:none}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:active{-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .sr-only,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .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;top:0;left:0}:host .sr-only,wm-snackbar .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;top:0;left:0}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;top:2.75rem;left:2.75rem;white-space:nowrap;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 48rem){.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active)>.tooltip{top:2.0625rem;left:auto}}.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active){outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #85dadf), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #85dadf 66%, transparent 0) repeat-x;background-size:0.375rem 0.1875rem;background-position:0 1em;border-radius:0;line-height:normal}';var w=a("wm_snackbar",function(){function a(a){n(this,a);this.wmSnackbarSnackFinished=s(this,"wmSnackbarSnackFinished",7);this.userFinishedSnack=s(this,"userFinishedSnack",7);this.wmSnackbarActionTriggered=s(this,"wmSnackbarActionTriggered",7);this.userTriggeredAction=s(this,"userTriggeredAction",7);this.parsedNotifications=[];this.isTabbing=false;this.timers=[];this.newNotification=false;this.notifications="[]"}a.prototype.updateSnacks=function(a){var n=this;var s=JSON.parse(a);var i=s.length;var r=this.parsedNotifications.length;this.parsedNotifications=[];for(var t=0;t<i;t++){var e={id:s[t].id.toString(),message:s[t].message.toString(),link:s[t].link.toString(),newWindow:!!s[t].newWindow};this.parsedNotifications=__spreadArray(__spreadArray([],this.parsedNotifications,true),[e],false)}if(r<this.parsedNotifications.length){var o=window.setTimeout((function(){return n.snackExpired()}),2e4);this.timers=__spreadArray([o],this.timers,true);this.storeElToFocusOnDismiss();this.newNotification=true}else{this.newNotification=false}};a.prototype.componentWillLoad=function(){this.uid=this.el.id?this.el.id:t()};a.prototype.componentDidUpdate=function(){this.isTabbing&&this.newNotification&&this.focusLinkAndDisableTimer();this.newNotification=false};a.prototype.toggleTabbingOn=function(){this.isTabbing=true};a.prototype.toggleTabbingOff=function(){this.isTabbing=false};a.prototype.focusLinkAndDisableTimer=function(){var a=this.parsedNotifications[0];if(a.link){var n=this.el.shadowRoot.querySelector("#action-".concat(a.id));n.focus();this.stopTimer(a)}};a.prototype.storeElToFocusOnDismiss=function(){var a=document.activeElement;while(a&&a.shadowRoot){a=a.shadowRoot.activeElement}this.focusOnDismiss=a};a.prototype.snackDismissed=function(a){this.endSnack(a);a.link&&this.isTabbing&&this.focusOnDismiss.focus()};a.prototype.snackExpired=function(){var a=this.parsedNotifications[this.parsedNotifications.length-1];this.endSnack(a)};a.prototype.endSnack=function(a){this.stopTimer(a);this.wmSnackbarSnackFinished.emit({id:a.id,message:a.message,link:a.link,newWindow:a.newWindow});this.userFinishedSnack.emit({id:a.id,message:a.message,link:a.link})};a.prototype.snackLinkClicked=function(a){this.stopTimer(a);this.wmSnackbarActionTriggered.emit({id:a.id,message:a.message,link:a.link,newWindow:a.newWindow});this.userTriggeredAction.emit({id:a.id,message:a.message,link:a.link})};a.prototype.stopTimer=function(a){var n=this;this.parsedNotifications.forEach((function(s,i){if(s.id===a.id){clearTimeout(n.timers[i]);n.timers=n.timers.filter((function(a,n){if(n!==i){return a}}))}}))};a.prototype.renderSnackbars=function(){var a=this;return this.parsedNotifications.map((function(n){return i("div",{class:"wm-snack-wrapper"},i("div",{id:"snack-".concat(a.uid),class:"wm-snackbar active neutral"},i("div",{class:"sr-only",tabindex:n.link?0:-1,onFocus:function(){return n.link&&a.snackDismissed(n)}}),i("div",{class:"wm-snackbarmsg"},i("div",{class:"msgtext"},i("span",null,n.message),n.link&&i("a",{id:"action-".concat(n.id),class:"link ".concat(n.newWindow?"new-window":""),"aria-label":"Click to ".concat(n.link,"...").concat(n.newWindow?" "+c.newWindow:""),tabindex:0,onClick:function(){a.snackLinkClicked(n)},onKeyDown:function(s){return s.key==="Enter"&&a.snackLinkClicked(n)}},i("span",{"aria-hidden":"true"},n.link))),i("button",{id:"close-button-".concat(n.id),"aria-label":"Close this notification",class:"closesnack",tabindex:n.link?0:-1,onClick:function(){return a.snackDismissed(n)},onMouseEnter:function(a){return e("bottom",a.target,c.close)},onMouseLeave:function(){return o()},onFocus:function(n){return a.isTabbing&&e("bottom",n.target,c.close)},onBlur:function(){return o()}})),i("div",{class:"sr-only",tabindex:n.link?0:-1,onFocus:function(){return n.link&&a.snackDismissed(n)}})))}))};a.prototype.renderLiveRegion=function(){var a=this.parsedNotifications[0];var n=this.isTabbing?"":a.link;var s="".concat(a.message," ").concat(n);var i=this.el.shadowRoot.querySelector("#wm-live-region-".concat(this.uid));if(i){i.innerHTML="";var r=document.createElement("span");r.innerHTML=s;i.appendChild(r)}};a.prototype.render=function(){this.newNotification&&this.renderLiveRegion();var a=this.renderSnackbars();var n=this.parsedNotifications.length===0?"empty":"";return i("div",{class:"wm-snackbars ".concat(n," ").concat(this.isTabbing?"user-is-tabbing":"")},i("div",{class:"sr-only","aria-live":"polite","aria-atomic":"false",id:"wm-live-region-".concat(this.uid)}),a)};Object.defineProperty(a.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{notifications:["updateSnacks"]}},enumerable:false,configurable:true});return a}());w.style=m}}}));
+//# sourceMappingURL=p-bafdcb4e.system.entry.js.map

package/dist/ripple/p-bafdcb4e.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmSnackbarCss","Snackbar","exports","this","parsedNotifications","isTabbing","timers","newNotification","class_1","prototype","updateSnacks","newValue","_this","parsedData","JSON","parse","length","prevNotificationsLength","i","id","toString","message","link","newWindow","__spreadArray","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","toggleTabbingOn","toggleTabbingOff","latestNotification","shadowRoot","querySelector","concat","focus","stopTimer","triggeringButton","document","activeElement","focusOnDismiss","snackDismissed","notification","endSnack","wmSnackbarSnackFinished","emit","userFinishedSnack","snackLinkClicked","wmSnackbarActionTriggered","userTriggeredAction","forEach","notif","index","clearTimeout","filter","timer","ind","renderSnackbars","map","h","class","tabindex","onFocus","globalMessages","onClick","onKeyDown","ev","key","onMouseEnter","showTooltip","target","close","onMouseLeave","hideTooltip","onBlur","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass"],"sources":["src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\nwm-snackbar {\n  * {\n    box-sizing: border-box;\n    margin: unset; //Edge\n  }\n\n  .wm-snackbars {\n    position: fixed;\n    bottom: rem-calc(0);\n    left: rem-calc(20);\n    right: rem-calc(20);\n    padding: rem-calc(4 10 30);\n    z-index: 2001;\n    max-width: rem-calc(568);\n    max-height: rem-calc(280);\n    -webkit-overflow-scrolling: touch;\n    overflow: auto;\n\n    &.empty {\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    .wm-snack-wrapper {\n      width: 100%;\n      height: 100%;\n\n      &:not(:last-child) {\n        margin-bottom: rem-calc(20);\n      }\n\n      .wm-snackbar {\n        @include shadow8;\n        @include displayFlex;\n        @include alignItems(center);\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n        font-size: rem-calc(14);\n        color: #fff;\n        padding: rem-calc(15 30);\n        background: #4a4a4a;\n        opacity: 0;\n        left: 0;\n        position: relative;\n        font-family: inherit;\n\n        .link {\n          letter-spacing: 0;\n          text-transform: none;\n          font-size: rem-calc(14);\n          border: none;\n          background: transparent;\n          padding-left: 0;\n          padding-right: 0;\n          height: auto;\n          border-radius: 0;\n          line-height: 1;\n          color: $snackbar-link-color;\n          margin: rem-calc(0 50 0 10);\n          text-decoration: none;\n          font-weight: 600;\n          cursor: pointer;\n\n          &.new-window::after {\n            @include mdi-icon;\n            display: inline;\n            content: \"\\f137\";\n            margin-left: rem-calc(4);\n          }\n\n          &:hover {\n            text-decoration: underline;\n          }\n\n          &:focus {\n            outline: none;\n            border: none;\n          }\n\n          &::-moz-focus-inner {\n            border: 0;\n            outline: none;\n          }\n        }\n\n        &:not(:last-child) {\n          margin-bottom: rem-calc(20);\n        }\n\n        &.active:not(button) {\n          opacity: 1;\n        }\n\n        .wm-snackbarmsg {\n          @include displayFlex;\n          @include justifyContent(space-between);\n          @include alignItems(center);\n          // font-size: rem-calc(14);\n          width: 100%;\n          position: relative;\n          padding: 0;\n\n          .msgtext {\n            width: 100%;\n          }\n\n          .closesnack {\n            @include box-shadow(none);\n            @include border-radius(50%);\n            background-color: #3b3b3b;\n            color: #ffffff;\n            cursor: pointer;\n            border: none;\n            font-size: rem-calc(16);\n            padding: 0;\n            height: auto;\n            line-height: 1;\n            min-width: rem-calc(44);\n            min-height: rem-calc(44);\n            text-align: center;\n            letter-spacing: normal;\n\n            @media screen and (min-width: rem-calc(768)) {\n              min-width: rem-calc(30);\n              min-height: rem-calc(30);\n            }\n\n            &:before {\n              @include mdi-icon;\n              content: \"\\f156\";\n            }\n\n            &:hover {\n              background-color: #fff;\n              color: $snackbar-color;\n            }\n\n            &:focus {\n              outline: none;\n            }\n\n            &::-moz-focus-inner {\n              border: 0;\n              outline: none;\n            }\n\n            &:active {\n              @include scale($xVal: 0.9, $yVal: 0.9);\n            }\n          }\n        }\n\n        .sr-only {\n          @include srOnly;\n          top: 0;\n          left: 0;\n        }\n      }\n    }\n  }\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\n  @extend %focus-on-dark;\n\n  > .tooltip {\n    clip: auto;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: opacity 500ms 500ms;\n    padding: rem-calc(6);\n    top: rem-calc(44);\n    left: rem-calc(44);\n    white-space: nowrap;\n    transform: translateX(-50%);\n    @media screen and (min-width: rem-calc(768)) {\n      top: rem-calc(33);\n      left: auto;\n    }\n  }\n}\n\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\n  outline: none;\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\n  background-size: rem-calc(6px 3px);\n  background-position: 0 1em;\n  border-radius: 0;\n  line-height: normal;\n}\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, hideTooltip, showTooltip } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\nimport { globalMessages } from \"../../global/intl\";\n@Component({\n  tag: \"wm-snackbar\",\n  styleUrl: \"wm-snackbar.scss\",\n  shadow: true,\n})\nexport class Snackbar {\n  @Element() el!: HTMLElement;\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\n\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\n  private uid!: string;\n  private focusOnDismiss!: HTMLElement;\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\n  private timers: Array<number> = [];\n  private newNotification: boolean = false;\n\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\n\n  @Watch(\"notifications\")\n  updateSnacks(newValue: string) {\n    const parsedData = JSON.parse(newValue);\n    const length = parsedData.length;\n    const prevNotificationsLength = this.parsedNotifications.length;\n    this.parsedNotifications = [];\n\n    //Parse notifications received as props and store a reference to them\n    for (let i = 0; i < length; i++) {\n      let newNotification: any = {\n        id: parsedData[i].id.toString(),\n        message: parsedData[i].message.toString(),\n        link: parsedData[i].link.toString(),\n        newWindow: !!parsedData[i].newWindow,\n      };\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\n    }\n\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\n    if (prevNotificationsLength < this.parsedNotifications.length) {\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\n      this.timers = [newTimer, ...this.timers];\n      this.storeElToFocusOnDismiss();\n      this.newNotification = true;\n    } else {\n      this.newNotification = false;\n    }\n  }\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\n  componentDidUpdate() {\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\n    this.newNotification = false;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  focusLinkAndDisableTimer() {\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\n    const latestNotification = this.parsedNotifications[0];\n\n    if (latestNotification.link) {\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\n      link.focus();\n      this.stopTimer(latestNotification);\n    }\n  }\n\n  storeElToFocusOnDismiss() {\n    let triggeringButton = document.activeElement! as HTMLElement;\n    while (triggeringButton && triggeringButton.shadowRoot) {\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\n    }\n    this.focusOnDismiss = triggeringButton;\n  }\n\n  snackDismissed(notification: Notification) {\n    this.endSnack(notification);\n    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\n  }\n\n  //Remove snack from notification list once timer runs out\n  snackExpired() {\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\n    this.endSnack(notification);\n  }\n\n  endSnack(notification: Notification) {\n    //App listens for userFinishedSnack event and deletes the emitted notification.\n    this.stopTimer(notification);\n    this.wmSnackbarSnackFinished.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userFinishedSnack.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  snackLinkClicked(notification: Notification) {\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\n    this.stopTimer(notification);\n    this.wmSnackbarActionTriggered.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userTriggeredAction.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  //Delete the timer corresponding to the dismissed notification\n  stopTimer(notification: Notification) {\n    this.parsedNotifications.forEach((notif, index) => {\n      if (notif.id === notification.id) {\n        clearTimeout(this.timers[index]);\n        this.timers = this.timers.filter((timer, ind) => {\n          if (ind !== index) {\n            return timer;\n          }\n        });\n      }\n    });\n  }\n\n  renderSnackbars() {\n    return this.parsedNotifications.map((notification) => (\n      <div class=\"wm-snack-wrapper\">\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n\n          <div class=\"wm-snackbarmsg\">\n            <div class=\"msgtext\">\n              <span>{notification.message}</span>\n              {notification.link && (\n                <a\n                  id={`action-${notification.id}`}\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\n                  aria-label={`Click to ${notification.link}...${\n                    notification.newWindow ? \" \" + globalMessages.newWindow : \"\"\n                  }`}\n                  tabindex={0}\n                  onClick={() => {\n                    this.snackLinkClicked(notification);\n                  }}\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\n                >\n                  <span aria-hidden=\"true\">{notification.link}</span>\n                </a>\n              )}\n            </div>\n            <button\n              id={`close-button-${notification.id}`}\n              aria-label=\"Close this notification\"\n              class=\"closesnack\"\n              tabindex={notification.link ? 0 : -1}\n              onClick={() => this.snackDismissed(notification)}\n              onMouseEnter={(ev) => showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onMouseLeave={() => hideTooltip()}\n              onFocus={(ev) => this.isTabbing && showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onBlur={() => hideTooltip()}\n            ></button>\n          </div>\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n        </div>\n      </div>\n    ));\n  }\n\n  renderLiveRegion() {\n    const latestNotification = this.parsedNotifications[0];\n    const link = this.isTabbing ? \"\" : latestNotification.link;\n    const srAnnouncement = `${latestNotification.message} ${link}`;\n\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\n\n    if (region) {\n      region.innerHTML = \"\";\n      const wrapper = document.createElement(\"span\");\n      wrapper.innerHTML = srAnnouncement;\n      region.appendChild(wrapper);\n    }\n  }\n\n  render() {\n    this.newNotification && this.renderLiveRegion();\n    const snackbars = this.renderSnackbars();\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\n\n    return (\n      <div class={`wm-snackbars ${wrappingClass} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\n        {snackbars}\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/{p-262713b9.entry.js → p-bb45e122.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as s,g as a,f as o}from"./p-1c23de4a.js";import{d as n,g as r}from"./p-05e0f901.js";const h=":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-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 .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host.hide{display:none}";const b=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.keydownOnTabItem=e(this,"keydownOnTabItem",7);this.tabItemLoaded=e(this,"tabItemLoaded",7);this.tabClicked=t=>{t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})};this.tabPressed=t=>{const e=t.key;if(e==="Enter"||e===" "){t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})}else if(e.includes("Arrow")){t.preventDefault();this.keydownOnTabItem.emit({tabItem:this.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}get parentTabList(){return this.el.parentElement}toggleTabbingOn(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")}toggleTabbingOff(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")}componentDidLoad(){this.tabItemLoaded.emit()}render(){let t=this.show?"":"hide ";t+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";let e={};const a=this.parentTabList&&this.parentTabList.customPadding;if(a){const t=parseInt(a,10)*2||0;const i=a.split(/([0-9]+)/).pop();e={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":`calc(100% - ${t}${i}) 3px`}}return i(s,{role:"presentation"},i("li",{class:"tab-item",role:"presentation"},i("a",{class:`tab ${t}`,style:e,role:"tab",ref:t=>this.linkEl=t,onClick:this.tabClicked,id:`tab-link-${this.tabId}`,onKeyDown:t=>this.tabPressed(t),"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},i("slot",null))))}static get delegatesFocus(){return true}get el(){return a(this)}};b.style=h;const l=":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";const d=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.debouncedSetLayout=n((()=>{if(!this.listWidth){this.setListWidth()}o(this.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}get menuLayout(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}}get tabItems(){return Array.from(this.el.querySelectorAll("wm-tab-item"))}get selectedTabItem(){return this.tabItems.filter((t=>t.selected))[0]}getLinkEl(t){return t.shadowRoot.querySelector("a")}get panels(){const t=Array.from(document.querySelectorAll("wm-tab-panel"));const e=this.tabItems.map((t=>t.tabId));return t.filter((t=>e.includes(t.tabId)))}getPanel(t){return this.panels.find((e=>e.tabId===t))}setListWidth(){let t=this.tabItems.reduce(((t,e)=>t+e.offsetWidth),0);this.listWidth=t&&t>0?t:this.listWidth}setSelected(t){this.tabItems.map((e=>e.selected=e.tabId===t));const e=this.panels.length===1&&this.tabItems.length>1;if(e){this.setAttributesOnPanel(this.panels[0],this.selectedTabItem);this.panels[0].active=true}else{this.panels.map((e=>e.active=e.tabId===t))}}showItems(){this.tabItems.map((t=>t.show=true))}hideItems(){this.tabItems.map((t=>t.show=false))}componentWillLoad(){this.el.focus=()=>{this.selectedTabItem&&this.selectedTabItem.focus()}}componentDidLoad(){this.setLayout();const t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)}tabItemLoaded(t){this.setAriaOnPanelAndTab(t.target)}setAriaOnPanelAndTab(t){const e=this.getPanel(t.tabId);if(!e){if(this.panels.length===1){this.setAttributesOnTab(t,this.panels[0])}}else{this.setAttributesOnPanel(e,t);this.setAttributesOnTab(t,e)}}setAttributesOnTab(t,e){const i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href",`#${e.id}`)}}removeAttributesOnTab(t){const e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}}setAttributesOnPanel(t,e){const i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}}handleTabSelected(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}}handleKeydown(t){const e=t.detail.key;const i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}}handleLeftRightArrow(t,e){if(e){t=e==="ArrowLeft"?t-1:t+1}if(t<0){t=this.tabItems.length-1}else if(t===this.tabItems.length){t=0}const i=this.tabItems[t];this.getLinkEl(i).focus()}setLayout(){this.debouncedSetLayout()}renderMenuOrTabs(){if(this.menuLayout){this.hideItems();return i("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();let t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return i("ul",{class:`tabcontainer ${this.customBackground||""}`,style:t,role:"tablist"},i("slot",null))}}renderOptions(){return this.tabItems.map((t=>i("wm-option",{id:`tab-link-${t.tabId}`,selected:t.tabId===this.selectedTab,onClick:e=>{e.preventDefault();this.wmTabSelected.emit({tabId:t.tabId});this.tabSelected.emit({tabId:t.tabId})}},t.textContent)))}render(){return i(s,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{selectedTab:["setSelected"]}}};d.style=l;const c="wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";const p=class{constructor(i){t(this,i);this.tabPanelLoaded=e(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}componentWillLoad(){!this.el.id&&this.el.setAttribute("id",r())}componentDidLoad(){this.tabPanelLoaded.emit({tabId:this.tabId})}toggleTabbingOn(){this.el.classList.add("user-is-tabbing")}toggleTabbingOff(){this.el.classList.remove("user-is-tabbing")}render(){return i(s,{role:"tabpanel",class:{"tab-hidden":!this.active}})}get el(){return a(this)}};p.style=c;export{b as wm_tab_item,d as wm_tab_list,p as wm_tab_panel};
-//# sourceMappingURL=p-262713b9.entry.js.map
+import{r as t,c as e,h as i,H as s,g as a,f as o}from"./p-1c23de4a.js";import{d as n,g as r}from"./p-c6a0f7e5.js";const h=":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-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 .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host.hide{display:none}";const b=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.keydownOnTabItem=e(this,"keydownOnTabItem",7);this.tabItemLoaded=e(this,"tabItemLoaded",7);this.tabClicked=t=>{t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})};this.tabPressed=t=>{const e=t.key;if(e==="Enter"||e===" "){t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})}else if(e.includes("Arrow")){t.preventDefault();this.keydownOnTabItem.emit({tabItem:this.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}get parentTabList(){return this.el.parentElement}toggleTabbingOn(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")}toggleTabbingOff(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")}componentDidLoad(){this.tabItemLoaded.emit()}render(){let t=this.show?"":"hide ";t+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";let e={};const a=this.parentTabList&&this.parentTabList.customPadding;if(a){const t=parseInt(a,10)*2||0;const i=a.split(/([0-9]+)/).pop();e={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":`calc(100% - ${t}${i}) 3px`}}return i(s,{role:"presentation"},i("li",{class:"tab-item",role:"presentation"},i("a",{class:`tab ${t}`,style:e,role:"tab",ref:t=>this.linkEl=t,onClick:this.tabClicked,id:`tab-link-${this.tabId}`,onKeyDown:t=>this.tabPressed(t),"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},i("slot",null))))}static get delegatesFocus(){return true}get el(){return a(this)}};b.style=h;const l=":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";const c=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.debouncedSetLayout=n((()=>{if(!this.listWidth){this.setListWidth()}o(this.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}get menuLayout(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}}get tabItems(){return Array.from(this.el.querySelectorAll("wm-tab-item"))}get selectedTabItem(){return this.tabItems.filter((t=>t.selected))[0]}getLinkEl(t){return t.shadowRoot.querySelector("a")}get panels(){const t=Array.from(document.querySelectorAll("wm-tab-panel"));const e=this.tabItems.map((t=>t.tabId));return t.filter((t=>e.includes(t.tabId)))}getPanel(t){return this.panels.find((e=>e.tabId===t))}setListWidth(){let t=this.tabItems.reduce(((t,e)=>t+e.offsetWidth),0);this.listWidth=t&&t>0?t:this.listWidth}setSelected(t){this.tabItems.map((e=>e.selected=e.tabId===t));const e=this.panels.length===1&&this.tabItems.length>1;if(e){this.setAttributesOnPanel(this.panels[0],this.selectedTabItem);this.panels[0].active=true}else{this.panels.map((e=>e.active=e.tabId===t))}}showItems(){this.tabItems.map((t=>t.show=true))}hideItems(){this.tabItems.map((t=>t.show=false))}componentWillLoad(){this.el.focus=()=>{this.selectedTabItem&&this.selectedTabItem.focus()}}componentDidLoad(){this.setLayout();const t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)}tabItemLoaded(t){this.setAriaOnPanelAndTab(t.target)}setAriaOnPanelAndTab(t){const e=this.getPanel(t.tabId);if(!e){if(this.panels.length===1){this.setAttributesOnTab(t,this.panels[0])}}else{this.setAttributesOnPanel(e,t);this.setAttributesOnTab(t,e)}}setAttributesOnTab(t,e){const i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href",`#${e.id}`)}}removeAttributesOnTab(t){const e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}}setAttributesOnPanel(t,e){const i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}}handleTabSelected(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}}handleKeydown(t){const e=t.detail.key;const i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}}handleLeftRightArrow(t,e){if(e){t=e==="ArrowLeft"?t-1:t+1}if(t<0){t=this.tabItems.length-1}else if(t===this.tabItems.length){t=0}const i=this.tabItems[t];this.getLinkEl(i).focus()}setLayout(){this.debouncedSetLayout()}renderMenuOrTabs(){if(this.menuLayout){this.hideItems();return i("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();let t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return i("ul",{class:`tabcontainer ${this.customBackground||""}`,style:t,role:"tablist"},i("slot",null))}}renderOptions(){return this.tabItems.map((t=>i("wm-option",{id:`tab-link-${t.tabId}`,selected:t.tabId===this.selectedTab,onClick:e=>{e.preventDefault();this.wmTabSelected.emit({tabId:t.tabId});this.tabSelected.emit({tabId:t.tabId})}},t.textContent)))}render(){return i(s,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{selectedTab:["setSelected"]}}};c.style=l;const d="wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";const p=class{constructor(i){t(this,i);this.tabPanelLoaded=e(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}componentWillLoad(){!this.el.id&&this.el.setAttribute("id",r())}componentDidLoad(){this.tabPanelLoaded.emit({tabId:this.tabId})}toggleTabbingOn(){this.el.classList.add("user-is-tabbing")}toggleTabbingOff(){this.el.classList.remove("user-is-tabbing")}render(){return i(s,{role:"tabpanel",class:{"tab-hidden":!this.active}})}get el(){return a(this)}};p.style=d;export{b as wm_tab_item,c as wm_tab_list,p as wm_tab_panel};
+//# sourceMappingURL=p-bb45e122.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["wmTabItemCss","TabItem","this","tabClicked","ev","preventDefault","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","parentTabList","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","menuLayout","offsetWidth","tabItems","Array","from","querySelectorAll","selectedTabItem","filter","t","getLinkEl","tab","shadowRoot","querySelector","panels","allPanels","document","tabIds","map","p","getPanel","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","generateId","tabPanelLoaded"],"sources":["./src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","./src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","./src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","./src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n  * {\n    box-sizing: border-box;\n  }\n  font-family: inherit;\n  display: inline-block;\n\n  .tab-item {\n    list-style-type: none;\n    height: 100%;\n    display: inline-block;\n\n    .tab {\n      @include border-radius(0);\n      color: $button-default-text;\n      text-decoration: none;\n      letter-spacing: 0.7px;\n      font-size: rem-calc(14);\n      font-weight: 500;\n      opacity: 1;\n      position: relative;\n      text-transform: uppercase;\n      display: inline-block;\n      height: calc(40 / 12 * 1em);\n      line-height: calc(40 / 12 * 1em);\n      padding-right: rem-calc(24);\n      padding-left: rem-calc(24);\n\n      &[aria-selected=\"true\"] {\n        font-weight: 700;\n        opacity: 1;\n        background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n        background-size: calc(100% - 50px) 3px;\n\n        &.dark {\n          color: $button-primary-text;\n        }\n      }\n\n      &,\n      &:hover,\n      &:active {\n        outline: none;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.dark:not([aria-selected=\"true\"]) {\n        opacity: 0.8;\n        color: $button-primary-text;\n      }\n\n      &.user-is-tabbing:focus:not(:active) {\n        outline: none;\n        @include focus-style;\n        &.dark {\n          @include focus-on-dark;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tab-item\",\n  styleUrl: \"wm-tab-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabItem {\n  @Element() el!: HTMLWmTabItemElement;\n\n  private get parentTabList(): HTMLWmTabListElement | null {\n    return this.el.parentElement as HTMLWmTabListElement;\n  }\n\n  /**\n   * Indicates whether the tab is currently active\n   */\n  @Prop() selected: boolean = false;\n\n  @Prop() show: boolean = true;\n\n  /**\n   * The id of the tab, linked to a tab panel.\n   */\n  @Prop() tabId: string = \"\";\n\n  /**\n   * Reference to focusable link element\n   */\n  linkEl?: HTMLAnchorElement;\n\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  @Event() keydownOnTabItem!: EventEmitter<{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\n  }>;\n\n  @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\n\n  private tabClicked = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.wmTabSelected.emit({ tabId: this.tabId });\n    this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n  };\n\n  private tabPressed = (ev: KeyboardEvent) => {\n    const key = ev.key;\n\n    if (key === \"Enter\" || key === \" \") {\n      ev.preventDefault();\n      this.wmTabSelected.emit({ tabId: this.tabId });\n      this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n    } else if (key.includes(\"Arrow\")) {\n      ev.preventDefault();\n      this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\n    }\n  };\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\n  }\n\n  componentDidLoad() {\n    this.tabItemLoaded.emit();\n  }\n\n  render() {\n    let classes = this.show ? \"\" : \"hide \";\n    classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\n\n    let styles = {};\n    const padding = this.parentTabList && this.parentTabList.customPadding;\n    if (padding) {\n      const bkgSize = parseInt(padding, 10) * 2 || 0;\n      const units = padding.split(/([0-9]+)/).pop();\n      styles = {\n        \"padding-left\": this.parentTabList!.customPadding,\n        \"padding-right\": this.parentTabList!.customPadding,\n        \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\n      };\n    }\n\n    return (\n      <Host role=\"presentation\">\n        <li class=\"tab-item\" role=\"presentation\">\n          <a\n            class={`tab ${classes}`}\n            style={styles}\n            role=\"tab\"\n            ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\n            onClick={this.tabClicked}\n            id={`tab-link-${this.tabId}`}\n            onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\n            aria-selected={this.selected ? \"true\" : \"false\"}\n            tabindex={this.selected ? 0 : -1}\n          >\n            <slot></slot>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n",":host,\nwm-tab-list {\n  * {\n    box-sizing: border-box;\n  }\n\n  position: relative;\n  white-space: nowrap;\n  height: fit-content;\n  display: block;\n\n  .tabcontainer {\n    margin: 0;\n    margin-left: -24px;\n    width: 100%;\n    height: rem-calc(65);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n\n    &.dark {\n      background: rgb(53, 59, 72);\n      margin: 0;\n    }\n  }\n\n  wm-select {\n    padding: rem-calc(6) 0;\n  }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n","wm-tab-panel {\n  visibility: inherit;\n\n  &.tab-hidden {\n    display: none;\n  }\n\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.user-is-tabbing:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"],"mappings":"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"}