@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/esm-es5/wm-snackbar.entry.js

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(a,n,s){if(s||arguments.length===2)for(var r=0,t=n.length,i;r<t;r++){if(i||!(r in n)){if(!i)i=Array.prototype.slice.call(n,0,r);i[r]=n[r]}}return a.concat(i||Array.prototype.slice.call(n))};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId}from"./functions-c58046f2.js";var wmSnackbarCss='.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 .wm-snackbarmsg .closesnack>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0;line-height:normal;z-index:30}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.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){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{top:2.0625rem;left:auto}}: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 Snackbar=function(){function a(a){registerInstance(this,a);this.wmSnackbarSnackFinished=createEvent(this,"wmSnackbarSnackFinished",7);this.userFinishedSnack=createEvent(this,"userFinishedSnack",7);this.wmSnackbarActionTriggered=createEvent(this,"wmSnackbarActionTriggered",7);this.userTriggeredAction=createEvent(this,"userTriggeredAction",7);this.parsedNotifications=[];this.isTabbing=false;this.timers=[];this.newNotification=false;this.newWindowMessage=intl.formatMessage({id:"global.newWindowLink",defaultMessage:"Opens in a new window."});this.notifications="[]"}a.prototype.updateSnacks=function(a){var n=this;var s=JSON.parse(a);var r=s.length;var t=this.parsedNotifications.length;this.parsedNotifications=[];for(var i=0;i<r;i++){var e={id:s[i].id.toString(),message:s[i].message.toString(),link:s[i].link.toString(),newWindow:!!s[i].newWindow};this.parsedNotifications=__spreadArray(__spreadArray([],this.parsedNotifications,true),[e],false)}if(t<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:generateId()};a.prototype.componentDidUpdate=function(){this.isTabbing&&this.newNotification&&this.focusLinkAndDisableTimer();this.newNotification=false};a.prototype.checkForTabbing=function(a){if(a.key==="Tab"){this.toggleTabbingOn()}};a.prototype.handleMouse=function(){this.toggleTabbingOff()};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.toggleTabbingOn=function(){this.isTabbing=true;this.snackbarEl&&this.snackbarEl.classList.add("user-is-tabbing")};a.prototype.toggleTabbingOff=function(){this.isTabbing=false;this.snackbarEl&&this.snackbarEl.classList.remove("user-is-tabbing")};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,r){if(s.id===a.id){clearTimeout(n.timers[r]);n.timers=n.timers.filter((function(a,n){if(n!==r){return a}}))}}))};a.prototype.renderSnackbars=function(){var a=this;return this.parsedNotifications.map((function(n){return h("div",{class:"wm-snack-wrapper"},h("div",{id:"snack-".concat(a.uid),class:"wm-snackbar active neutral"},h("div",{class:"sr-only",tabindex:n.link?0:-1,onFocus:function(){return n.link&&a.snackDismissed(n)}}),h("div",{class:"wm-snackbarmsg"},h("div",{class:"msgtext"},h("span",null,n.message),n.link&&h("a",{id:"action-".concat(n.id),class:"link ".concat(n.newWindow?"new-window":""),"aria-label":"Click to ".concat(n.link,"...").concat(n.newWindow?" "+a.newWindowMessage:""),tabindex:0,onClick:function(){a.snackLinkClicked(n)},onKeyDown:function(s){return s.key==="Enter"&&a.snackLinkClicked(n)}},h("span",{"aria-hidden":"true"},n.link))),h("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)}},h("span",{class:"tooltip","aria-hidden":"true"},"Close"))),h("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 r=this.el.shadowRoot.querySelector("#wm-live-region-".concat(this.uid));if(r){r.innerHTML="";var t=document.createElement("span");t.innerHTML=s;r.appendChild(t)}};a.prototype.render=function(){var a=this;this.newNotification&&this.renderLiveRegion();var n=this.renderSnackbars();var s=this.parsedNotifications.length===0?"empty":"";return h("div",{ref:function(n){return a.snackbarEl=n},class:"wm-snackbars ".concat(s)},h("div",{class:"sr-only","aria-live":"polite","aria-atomic":"false",id:"wm-live-region-".concat(this.uid)}),n)};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{notifications:["updateSnacks"]}},enumerable:false,configurable:true});return a}();Snackbar.style=wmSnackbarCss;export{Snackbar as wm_snackbar};
+var __spreadArray=this&&this.__spreadArray||function(a,n,s){if(s||arguments.length===2)for(var r=0,t=n.length,i;r<t;r++){if(i||!(r in n)){if(!i)i=Array.prototype.slice.call(n,0,r);i[r]=n[r]}}return a.concat(i||Array.prototype.slice.call(n))};import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-84a6ae22.js";import{i as intl,g as generateId}from"./functions-1c41e984.js";var wmSnackbarCss='.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 .wm-snackbarmsg .closesnack>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack>.tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0;line-height:normal;z-index:30}:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.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){:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,:host .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:hover>.tooltip,wm-snackbar .wm-snackbars .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack.user-is-tabbing:focus>.tooltip{top:2.0625rem;left:auto}}: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 Snackbar=function(){function a(a){registerInstance(this,a);this.wmSnackbarSnackFinished=createEvent(this,"wmSnackbarSnackFinished",7);this.userFinishedSnack=createEvent(this,"userFinishedSnack",7);this.wmSnackbarActionTriggered=createEvent(this,"wmSnackbarActionTriggered",7);this.userTriggeredAction=createEvent(this,"userTriggeredAction",7);this.parsedNotifications=[];this.isTabbing=false;this.timers=[];this.newNotification=false;this.newWindowMessage=intl.formatMessage({id:"global.newWindowLink",defaultMessage:"Opens in a new window."});this.notifications="[]"}a.prototype.updateSnacks=function(a){var n=this;var s=JSON.parse(a);var r=s.length;var t=this.parsedNotifications.length;this.parsedNotifications=[];for(var i=0;i<r;i++){var e={id:s[i].id.toString(),message:s[i].message.toString(),link:s[i].link.toString(),newWindow:!!s[i].newWindow};this.parsedNotifications=__spreadArray(__spreadArray([],this.parsedNotifications,true),[e],false)}if(t<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:generateId()};a.prototype.componentDidUpdate=function(){this.isTabbing&&this.newNotification&&this.focusLinkAndDisableTimer();this.newNotification=false};a.prototype.checkForTabbing=function(a){if(a.key==="Tab"){this.toggleTabbingOn()}};a.prototype.handleMouse=function(){this.toggleTabbingOff()};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.toggleTabbingOn=function(){this.isTabbing=true;this.snackbarEl&&this.snackbarEl.classList.add("user-is-tabbing")};a.prototype.toggleTabbingOff=function(){this.isTabbing=false;this.snackbarEl&&this.snackbarEl.classList.remove("user-is-tabbing")};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,r){if(s.id===a.id){clearTimeout(n.timers[r]);n.timers=n.timers.filter((function(a,n){if(n!==r){return a}}))}}))};a.prototype.renderSnackbars=function(){var a=this;return this.parsedNotifications.map((function(n){return h("div",{class:"wm-snack-wrapper"},h("div",{id:"snack-".concat(a.uid),class:"wm-snackbar active neutral"},h("div",{class:"sr-only",tabindex:n.link?0:-1,onFocus:function(){return n.link&&a.snackDismissed(n)}}),h("div",{class:"wm-snackbarmsg"},h("div",{class:"msgtext"},h("span",null,n.message),n.link&&h("a",{id:"action-".concat(n.id),class:"link ".concat(n.newWindow?"new-window":""),"aria-label":"Click to ".concat(n.link,"...").concat(n.newWindow?" "+a.newWindowMessage:""),tabindex:0,onClick:function(){a.snackLinkClicked(n)},onKeyDown:function(s){return s.key==="Enter"&&a.snackLinkClicked(n)}},h("span",{"aria-hidden":"true"},n.link))),h("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)}},h("span",{class:"tooltip","aria-hidden":"true"},"Close"))),h("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 r=this.el.shadowRoot.querySelector("#wm-live-region-".concat(this.uid));if(r){r.innerHTML="";var t=document.createElement("span");t.innerHTML=s;r.appendChild(t)}};a.prototype.render=function(){var a=this;this.newNotification&&this.renderLiveRegion();var n=this.renderSnackbars();var s=this.parsedNotifications.length===0?"empty":"";return h("div",{ref:function(n){return a.snackbarEl=n},class:"wm-snackbars ".concat(s)},h("div",{class:"sr-only","aria-live":"polite","aria-atomic":"false",id:"wm-live-region-".concat(this.uid)}),n)};Object.defineProperty(a.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(a,"watchers",{get:function(){return{notifications:["updateSnacks"]}},enumerable:false,configurable:true});return a}();Snackbar.style=wmSnackbarCss;export{Snackbar as wm_snackbar};
 //# sourceMappingURL=wm-snackbar.entry.js.map

package/dist/esm-es5/wm-snackbar.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmSnackbarCss","Snackbar","this","parsedNotifications","isTabbing","timers","newNotification","newWindowMessage","intl","formatMessage","id","defaultMessage","prototype","updateSnacks","newValue","_this","parsedData","JSON","parse","length","prevNotificationsLength","i","toString","message","link","newWindow","__spreadArray","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","checkForTabbing","ev","key","toggleTabbingOn","handleMouse","toggleTabbingOff","latestNotification","shadowRoot","querySelector","concat","focus","stopTimer","snackbarEl","classList","add","remove","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","onClick","onKeyDown","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass","ref"],"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            > .tooltip {\n              position: absolute;\n              opacity: 0;\n              width: 1px;\n              height: 1px;\n              overflow: hidden;\n              clip: rect(0, 0, 0, 0);\n              font-size: rem-calc(14);\n              text-transform: none;\n              font-weight: normal;\n              background: black;\n              color: #fff;\n              padding: 0;\n              line-height: normal;\n              z-index: 30;\n            }\n\n            &:hover > .tooltip,\n            &.user-is-tabbing:focus > .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\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, intl } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\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  private snackbarEl!: HTMLDivElement;\n  private newWindowMessage = intl.formatMessage({\n    id: \"global.newWindowLink\",\n    defaultMessage: \"Opens in a new window.\",\n  });\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(\"keydown\", { target: \"document\" })\n  checkForTabbing(ev: KeyboardEvent) {\n    if (ev.key === \"Tab\") {\n      this.toggleTabbingOn();\n    }\n  }\n\n  //Workaround for screenreader's triggering click event on \"enter\".\n  @Listen(\"mouseover\", { target: \"document\" })\n  handleMouse() {\n    this.toggleTabbingOff();\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  toggleTabbingOn() {\n    this.isTabbing = true;\n    this.snackbarEl && this.snackbarEl.classList.add(\"user-is-tabbing\");\n  }\n\n  toggleTabbingOff() {\n    this.isTabbing = false;\n    this.snackbarEl && this.snackbarEl.classList.remove(\"user-is-tabbing\");\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 ? \" \" + this.newWindowMessage : \"\"\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            >\n              <span class=\"tooltip\" aria-hidden=\"true\">\n                Close\n              </span>\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 ref={(el) => (this.snackbarEl = el as HTMLDivElement)} class={`wm-snackbars ${wrappingClass}`}>\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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"}
+{"version":3,"names":["wmSnackbarCss","Snackbar","this","parsedNotifications","isTabbing","timers","newNotification","newWindowMessage","intl","formatMessage","id","defaultMessage","prototype","updateSnacks","newValue","_this","parsedData","JSON","parse","length","prevNotificationsLength","i","toString","message","link","newWindow","__spreadArray","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","checkForTabbing","ev","key","toggleTabbingOn","handleMouse","toggleTabbingOff","latestNotification","shadowRoot","querySelector","concat","focus","stopTimer","snackbarEl","classList","add","remove","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","onClick","onKeyDown","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass","ref"],"sources":["src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\r\nwm-snackbar {\r\n  * {\r\n    box-sizing: border-box;\r\n    margin: unset; //Edge\r\n  }\r\n\r\n  .wm-snackbars {\r\n    position: fixed;\r\n    bottom: rem-calc(0);\r\n    left: rem-calc(20);\r\n    right: rem-calc(20);\r\n    padding: rem-calc(4 10 30);\r\n    z-index: 2001;\r\n    max-width: rem-calc(568);\r\n    max-height: rem-calc(280);\r\n    -webkit-overflow-scrolling: touch;\r\n    overflow: auto;\r\n\r\n    &.empty {\r\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\r\n      padding-top: 0;\r\n      padding-bottom: 0;\r\n    }\r\n\r\n    .wm-snack-wrapper {\r\n      width: 100%;\r\n      height: 100%;\r\n\r\n      &:not(:last-child) {\r\n        margin-bottom: rem-calc(20);\r\n      }\r\n\r\n      .wm-snackbar {\r\n        @include shadow8;\r\n        @include displayFlex;\r\n        @include alignItems(center);\r\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\r\n        font-size: rem-calc(14);\r\n        color: #fff;\r\n        padding: rem-calc(15 30);\r\n        background: #4a4a4a;\r\n        opacity: 0;\r\n        left: 0;\r\n        position: relative;\r\n        font-family: inherit;\r\n\r\n        .link {\r\n          letter-spacing: 0;\r\n          text-transform: none;\r\n          font-size: rem-calc(14);\r\n          border: none;\r\n          background: transparent;\r\n          padding-left: 0;\r\n          padding-right: 0;\r\n          height: auto;\r\n          border-radius: 0;\r\n          line-height: 1;\r\n          color: $snackbar-link-color;\r\n          margin: rem-calc(0 50 0 10);\r\n          text-decoration: none;\r\n          font-weight: 600;\r\n          cursor: pointer;\r\n\r\n          &.new-window::after {\r\n            @include mdi-icon;\r\n            display: inline;\r\n            content: \"\\f137\";\r\n            margin-left: rem-calc(4);\r\n          }\r\n\r\n          &:hover {\r\n            text-decoration: underline;\r\n          }\r\n\r\n          &:focus {\r\n            outline: none;\r\n            border: none;\r\n          }\r\n\r\n          &::-moz-focus-inner {\r\n            border: 0;\r\n            outline: none;\r\n          }\r\n        }\r\n\r\n        &:not(:last-child) {\r\n          margin-bottom: rem-calc(20);\r\n        }\r\n\r\n        &.active:not(button) {\r\n          opacity: 1;\r\n        }\r\n\r\n        .wm-snackbarmsg {\r\n          @include displayFlex;\r\n          @include justifyContent(space-between);\r\n          @include alignItems(center);\r\n          // font-size: rem-calc(14);\r\n          width: 100%;\r\n          position: relative;\r\n          padding: 0;\r\n\r\n          .msgtext {\r\n            width: 100%;\r\n          }\r\n\r\n          .closesnack {\r\n            @include box-shadow(none);\r\n            @include border-radius(50%);\r\n            background-color: #3b3b3b;\r\n            color: #ffffff;\r\n            cursor: pointer;\r\n            border: none;\r\n            font-size: rem-calc(16);\r\n            padding: 0;\r\n            height: auto;\r\n            line-height: 1;\r\n            min-width: rem-calc(44);\r\n            min-height: rem-calc(44);\r\n            text-align: center;\r\n            letter-spacing: normal;\r\n\r\n            @media screen and (min-width: rem-calc(768)) {\r\n              min-width: rem-calc(30);\r\n              min-height: rem-calc(30);\r\n            }\r\n\r\n            &:before {\r\n              @include mdi-icon;\r\n              content: \"\\f156\";\r\n            }\r\n\r\n            &:hover {\r\n              background-color: #fff;\r\n              color: $snackbar-color;\r\n            }\r\n\r\n            &:focus {\r\n              outline: none;\r\n            }\r\n\r\n            &::-moz-focus-inner {\r\n              border: 0;\r\n              outline: none;\r\n            }\r\n\r\n            &:active {\r\n              @include scale($xVal: 0.9, $yVal: 0.9);\r\n            }\r\n\r\n            > .tooltip {\r\n              position: absolute;\r\n              opacity: 0;\r\n              width: 1px;\r\n              height: 1px;\r\n              overflow: hidden;\r\n              clip: rect(0, 0, 0, 0);\r\n              font-size: rem-calc(14);\r\n              text-transform: none;\r\n              font-weight: normal;\r\n              background: black;\r\n              color: #fff;\r\n              padding: 0;\r\n              line-height: normal;\r\n              z-index: 30;\r\n            }\r\n\r\n            &:hover > .tooltip,\r\n            &.user-is-tabbing:focus > .tooltip {\r\n              clip: auto;\r\n              width: auto;\r\n              height: auto;\r\n              opacity: 1;\r\n              transition: opacity 500ms 500ms;\r\n              padding: rem-calc(6);\r\n              top: rem-calc(44);\r\n              left: rem-calc(44);\r\n              white-space: nowrap;\r\n              transform: translateX(-50%);\r\n              @media screen and (min-width: rem-calc(768)) {\r\n                top: rem-calc(33);\r\n                left: auto;\r\n              }\r\n            }\r\n          }\r\n        }\r\n\r\n        .sr-only {\r\n          @include srOnly;\r\n          top: 0;\r\n          left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .sr-only {\r\n    @include srOnly;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n}\r\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\r\n  @extend %focus-on-dark;\r\n\r\n  > .tooltip {\r\n    clip: auto;\r\n    width: auto;\r\n    height: auto;\r\n    opacity: 1;\r\n    transition: opacity 500ms 500ms;\r\n    padding: rem-calc(6);\r\n    top: rem-calc(44);\r\n    left: rem-calc(44);\r\n    white-space: nowrap;\r\n    transform: translateX(-50%);\r\n    @media screen and (min-width: rem-calc(768)) {\r\n      top: rem-calc(33);\r\n      left: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\r\n  outline: none;\r\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\r\n  background-size: rem-calc(6px 3px);\r\n  background-position: 0 1em;\r\n  border-radius: 0;\r\n  line-height: normal;\r\n}\r\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\r\nimport { generateId, intl } from \"../../global/functions\";\r\nimport { Notification } from \"../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-snackbar\",\r\n  styleUrl: \"wm-snackbar.scss\",\r\n  shadow: true,\r\n})\r\nexport class Snackbar {\r\n  @Element() el!: HTMLElement;\r\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\r\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\r\n\r\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\r\n  private uid!: string;\r\n  private focusOnDismiss!: HTMLElement;\r\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\r\n  private timers: Array<number> = [];\r\n  private newNotification: boolean = false;\r\n  private snackbarEl!: HTMLDivElement;\r\n  private newWindowMessage = intl.formatMessage({\r\n    id: \"global.newWindowLink\",\r\n    defaultMessage: \"Opens in a new window.\",\r\n  });\r\n\r\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\r\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\r\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\r\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\r\n\r\n  @Watch(\"notifications\")\r\n  updateSnacks(newValue: string) {\r\n    const parsedData = JSON.parse(newValue);\r\n    const length = parsedData.length;\r\n    const prevNotificationsLength = this.parsedNotifications.length;\r\n    this.parsedNotifications = [];\r\n\r\n    //Parse notifications received as props and store a reference to them\r\n    for (let i = 0; i < length; i++) {\r\n      let newNotification: any = {\r\n        id: parsedData[i].id.toString(),\r\n        message: parsedData[i].message.toString(),\r\n        link: parsedData[i].link.toString(),\r\n        newWindow: !!parsedData[i].newWindow,\r\n      };\r\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\r\n    }\r\n\r\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.\r\n    if (prevNotificationsLength < this.parsedNotifications.length) {\r\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\r\n      this.timers = [newTimer, ...this.timers];\r\n      this.storeElToFocusOnDismiss();\r\n      this.newNotification = true;\r\n    } else {\r\n      this.newNotification = false;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n  }\r\n\r\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.\r\n  componentDidUpdate() {\r\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\r\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\r\n    this.newNotification = false;\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  checkForTabbing(ev: KeyboardEvent) {\r\n    if (ev.key === \"Tab\") {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  //Workaround for screenreader's triggering click event on \"enter\".\r\n  @Listen(\"mouseover\", { target: \"document\" })\r\n  handleMouse() {\r\n    this.toggleTabbingOff();\r\n  }\r\n\r\n  focusLinkAndDisableTimer() {\r\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\r\n    const latestNotification = this.parsedNotifications[0];\r\n\r\n    if (latestNotification.link) {\r\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\r\n      link.focus();\r\n      this.stopTimer(latestNotification);\r\n    }\r\n  }\r\n\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n    this.snackbarEl && this.snackbarEl.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n    this.snackbarEl && this.snackbarEl.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  storeElToFocusOnDismiss() {\r\n    let triggeringButton = document.activeElement! as HTMLElement;\r\n    while (triggeringButton && triggeringButton.shadowRoot) {\r\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\r\n    }\r\n    this.focusOnDismiss = triggeringButton;\r\n  }\r\n\r\n  snackDismissed(notification: Notification) {\r\n    this.endSnack(notification);\r\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.\r\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\r\n  }\r\n\r\n  //Remove snack from notification list once timer runs out\r\n  snackExpired() {\r\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\r\n    this.endSnack(notification);\r\n  }\r\n\r\n  endSnack(notification: Notification) {\r\n    //App listens for userFinishedSnack event and deletes the emitted notification.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarSnackFinished.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userFinishedSnack.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  snackLinkClicked(notification: Notification) {\r\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarActionTriggered.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userTriggeredAction.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  //Delete the timer corresponding to the dismissed notification\r\n  stopTimer(notification: Notification) {\r\n    this.parsedNotifications.forEach((notif, index) => {\r\n      if (notif.id === notification.id) {\r\n        clearTimeout(this.timers[index]);\r\n        this.timers = this.timers.filter((timer, ind) => {\r\n          if (ind !== index) {\r\n            return timer;\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  renderSnackbars() {\r\n    return this.parsedNotifications.map((notification) => (\r\n      <div class=\"wm-snack-wrapper\">\r\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n\r\n          <div class=\"wm-snackbarmsg\">\r\n            <div class=\"msgtext\">\r\n              <span>{notification.message}</span>\r\n              {notification.link && (\r\n                <a\r\n                  id={`action-${notification.id}`}\r\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\r\n                  aria-label={`Click to ${notification.link}...${\r\n                    notification.newWindow ? \" \" + this.newWindowMessage : \"\"\r\n                  }`}\r\n                  tabindex={0}\r\n                  onClick={() => {\r\n                    this.snackLinkClicked(notification);\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\r\n                >\r\n                  <span aria-hidden=\"true\">{notification.link}</span>\r\n                </a>\r\n              )}\r\n            </div>\r\n            <button\r\n              id={`close-button-${notification.id}`}\r\n              aria-label=\"Close this notification\"\r\n              class=\"closesnack\"\r\n              tabindex={notification.link ? 0 : -1}\r\n              onClick={() => this.snackDismissed(notification)}\r\n            >\r\n              <span class=\"tooltip\" aria-hidden=\"true\">\r\n                Close\r\n              </span>\r\n            </button>\r\n          </div>\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n        </div>\r\n      </div>\r\n    ));\r\n  }\r\n\r\n  renderLiveRegion() {\r\n    const latestNotification = this.parsedNotifications[0];\r\n    const link = this.isTabbing ? \"\" : latestNotification.link;\r\n    const srAnnouncement = `${latestNotification.message} ${link}`;\r\n\r\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\r\n\r\n    if (region) {\r\n      region.innerHTML = \"\";\r\n      const wrapper = document.createElement(\"span\");\r\n      wrapper.innerHTML = srAnnouncement;\r\n      region.appendChild(wrapper);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    this.newNotification && this.renderLiveRegion();\r\n    const snackbars = this.renderSnackbars();\r\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\r\n\r\n    return (\r\n      <div ref={(el) => (this.snackbarEl = el as HTMLDivElement)} class={`wm-snackbars ${wrappingClass}`}>\r\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\r\n        {snackbars}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2YAAA,IAAMA,cAAgB,8kT,ICQTC,SAAQ,W,mUAKXC,KAAAC,oBAA2C,GAG3CD,KAAAE,UAAqB,MACrBF,KAAAG,OAAwB,GACxBH,KAAAI,gBAA2B,MAE3BJ,KAAAK,iBAAmBC,KAAKC,cAAc,CAC5CC,GAAI,uBACJC,eAAgB,2B,mBAX8C,I,CAoBhEV,EAAAW,UAAAC,aAAA,SAAaC,GAAb,IAAAC,EAAAb,KACE,IAAMc,EAAaC,KAAKC,MAAMJ,GAC9B,IAAMK,EAASH,EAAWG,OAC1B,IAAMC,EAA0BlB,KAAKC,oBAAoBgB,OACzDjB,KAAKC,oBAAsB,GAG3B,IAAK,IAAIkB,EAAI,EAAGA,EAAIF,EAAQE,IAAK,CAC/B,IAAIf,EAAuB,CACzBI,GAAIM,EAAWK,GAAGX,GAAGY,WACrBC,QAASP,EAAWK,GAAGE,QAAQD,WAC/BE,KAAMR,EAAWK,GAAGG,KAAKF,WACzBG,YAAaT,EAAWK,GAAGI,WAE7BvB,KAAKC,oBAAmBuB,4BAAA,GAAOxB,KAAKC,oBAAmB,OAAEG,GAAe,M,CAI1E,GAAIc,EAA0BlB,KAAKC,oBAAoBgB,OAAQ,CAC7D,IAAMQ,EAAWC,OAAOC,YAAW,WAAM,OAAAd,EAAKe,cAAL,GAAqB,KAC9D5B,KAAKG,OAAMqB,cAAA,CAAIC,GAAazB,KAAKG,OAAM,MACvCH,KAAK6B,0BACL7B,KAAKI,gBAAkB,I,KAClB,CACLJ,KAAKI,gBAAkB,K,GAI3BL,EAAAW,UAAAoB,kBAAA,WACE9B,KAAK+B,IAAM/B,KAAKgC,GAAGxB,GAAKR,KAAKgC,GAAGxB,GAAKyB,Y,EAIvClC,EAAAW,UAAAwB,mBAAA,WAEElC,KAAKE,WAAaF,KAAKI,iBAAmBJ,KAAKmC,2BAC/CnC,KAAKI,gBAAkB,K,EAIzBL,EAAAW,UAAA0B,gBAAA,SAAgBC,GACd,GAAIA,EAAGC,MAAQ,MAAO,CACpBtC,KAAKuC,iB,GAMTxC,EAAAW,UAAA8B,YAAA,WACExC,KAAKyC,kB,EAGP1C,EAAAW,UAAAyB,yBAAA,WAEE,IAAMO,EAAqB1C,KAAKC,oBAAoB,GAEpD,GAAIyC,EAAmBpB,KAAM,CAC3B,IAAIA,EAAOtB,KAAKgC,GAAGW,WAAYC,cAAc,WAAAC,OAAWH,EAAmBlC,KAC3Ec,EAAKwB,QACL9C,KAAK+C,UAAUL,E,GAInB3C,EAAAW,UAAA6B,gBAAA,WACEvC,KAAKE,UAAY,KACjBF,KAAKgD,YAAchD,KAAKgD,WAAWC,UAAUC,IAAI,kB,EAGnDnD,EAAAW,UAAA+B,iBAAA,WACEzC,KAAKE,UAAY,MACjBF,KAAKgD,YAAchD,KAAKgD,WAAWC,UAAUE,OAAO,kB,EAGtDpD,EAAAW,UAAAmB,wBAAA,WACE,IAAIuB,EAAmBC,SAASC,cAChC,MAAOF,GAAoBA,EAAiBT,WAAY,CACtDS,EAAmBA,EAAiBT,WAAWW,a,CAEjDtD,KAAKuD,eAAiBH,C,EAGxBrD,EAAAW,UAAA8C,eAAA,SAAeC,GACbzD,KAAK0D,SAASD,GAEdA,EAAanC,MAAQtB,KAAKE,WAAaF,KAAKuD,eAAeT,O,EAI7D/C,EAAAW,UAAAkB,aAAA,WACE,IAAM6B,EAAezD,KAAKC,oBAAoBD,KAAKC,oBAAoBgB,OAAS,GAChFjB,KAAK0D,SAASD,E,EAGhB1D,EAAAW,UAAAgD,SAAA,SAASD,GAEPzD,KAAK+C,UAAUU,GACfzD,KAAK2D,wBAAwBC,KAAK,CAChCpD,GAAIiD,EAAajD,GACjBa,QAASoC,EAAapC,QACtBC,KAAMmC,EAAanC,KACnBC,UAAWkC,EAAalC,YAG1BvB,KAAK6D,kBAAkBD,KAAK,CAC1BpD,GAAIiD,EAAajD,GACjBa,QAASoC,EAAapC,QACtBC,KAAMmC,EAAanC,M,EAIvBvB,EAAAW,UAAAoD,iBAAA,SAAiBL,GAEfzD,KAAK+C,UAAUU,GACfzD,KAAK+D,0BAA0BH,KAAK,CAClCpD,GAAIiD,EAAajD,GACjBa,QAASoC,EAAapC,QACtBC,KAAMmC,EAAanC,KACnBC,UAAWkC,EAAalC,YAG1BvB,KAAKgE,oBAAoBJ,KAAK,CAC5BpD,GAAIiD,EAAajD,GACjBa,QAASoC,EAAapC,QACtBC,KAAMmC,EAAanC,M,EAKvBvB,EAAAW,UAAAqC,UAAA,SAAUU,GAAV,IAAA5C,EAAAb,KACEA,KAAKC,oBAAoBgE,SAAQ,SAACC,EAAOC,GACvC,GAAID,EAAM1D,KAAOiD,EAAajD,GAAI,CAChC4D,aAAavD,EAAKV,OAAOgE,IACzBtD,EAAKV,OAASU,EAAKV,OAAOkE,QAAO,SAACC,EAAOC,GACvC,GAAIA,IAAQJ,EAAO,CACjB,OAAOG,C,UAOjBvE,EAAAW,UAAA8D,gBAAA,eAAA3D,EAAAb,KACE,OAAOA,KAAKC,oBAAoBwE,KAAI,SAAChB,GAAY,OAC/CiB,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKlE,GAAI,SAAAqC,OAAShC,EAAKkB,KAAO4C,MAAM,8BAClCD,EAAA,OACEC,MAAM,UACNC,SAAUnB,EAAanC,KAAO,GAAK,EACnCuD,QAAS,WAAM,OAAApB,EAAanC,MAAQT,EAAK2C,eAAeC,EAAzC,IAGjBiB,EAAA,OAAKC,MAAM,kBACTD,EAAA,OAAKC,MAAM,WACTD,EAAA,YAAOjB,EAAapC,SACnBoC,EAAanC,MACZoD,EAAA,KACElE,GAAI,UAAAqC,OAAUY,EAAajD,IAC3BmE,MAAO,QAAA9B,OAAQY,EAAalC,UAAY,aAAe,IAAI,aAC/C,YAAAsB,OAAYY,EAAanC,KAAI,OAAAuB,OACvCY,EAAalC,UAAY,IAAMV,EAAKR,iBAAmB,IAEzDuE,SAAU,EACVE,QAAS,WACPjE,EAAKiD,iBAAiBL,E,EAExBsB,UAAW,SAAC1C,GAAsB,OAAAA,EAAGC,MAAQ,SAAWzB,EAAKiD,iBAAiBL,EAA5C,GAElCiB,EAAA,sBAAkB,QAAQjB,EAAanC,QAI7CoD,EAAA,UACElE,GAAI,gBAAAqC,OAAgBY,EAAajD,IAAI,aAC1B,0BACXmE,MAAM,aACNC,SAAUnB,EAAanC,KAAO,GAAK,EACnCwD,QAAS,WAAM,OAAAjE,EAAK2C,eAAeC,EAApB,GAEfiB,EAAA,QAAMC,MAAM,UAAS,cAAa,QAAM,WAK5CD,EAAA,OACEC,MAAM,UACNC,SAAUnB,EAAanC,KAAO,GAAK,EACnCuD,QAAS,WAAM,OAAApB,EAAanC,MAAQT,EAAK2C,eAAeC,EAAzC,KA5C0B,G,EAmDnD1D,EAAAW,UAAAsE,iBAAA,WACE,IAAMtC,EAAqB1C,KAAKC,oBAAoB,GACpD,IAAMqB,EAAOtB,KAAKE,UAAY,GAAKwC,EAAmBpB,KACtD,IAAM2D,EAAiB,GAAApC,OAAGH,EAAmBrB,QAAO,KAAAwB,OAAIvB,GAExD,IAAM4D,EAASlF,KAAKgC,GAAGW,WAAYC,cAAc,mBAAAC,OAAmB7C,KAAK+B,MAEzE,GAAImD,EAAQ,CACVA,EAAOC,UAAY,GACnB,IAAMC,EAAU/B,SAASgC,cAAc,QACvCD,EAAQD,UAAYF,EACpBC,EAAOI,YAAYF,E,GAIvBrF,EAAAW,UAAA6E,OAAA,eAAA1E,EAAAb,KACEA,KAAKI,iBAAmBJ,KAAKgF,mBAC7B,IAAMQ,EAAYxF,KAAKwE,kBACvB,IAAMiB,EAAgBzF,KAAKC,oBAAoBgB,SAAW,EAAI,QAAU,GAExE,OACEyD,EAAA,OAAKgB,IAAK,SAAC1D,GAAE,OAAMnB,EAAKmC,WAAahB,CAAxB,EAA+C2C,MAAO,gBAAA9B,OAAgB4C,IACjFf,EAAA,OAAKC,MAAM,UAAS,YAAW,SAAQ,cAAa,QAAQnE,GAAI,kBAAAqC,OAAkB7C,KAAK+B,OACtFyD,E,gQA/OY,G"}

package/dist/esm-es5/wm-tab-item_3.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement,f as forceUpdate}from"./index-84a6ae22.js";import{d as debounce,g as generateId}from"./functions-c58046f2.js";var wmTabItemCss=":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}";var TabItem=function(){function t(t){var e=this;registerInstance(this,t);this.wmTabSelected=createEvent(this,"wmTabSelected",7);this.tabSelected=createEvent(this,"tabSelected",7);this.keydownOnTabItem=createEvent(this,"keydownOnTabItem",7);this.tabItemLoaded=createEvent(this,"tabItemLoaded",7);this.tabClicked=function(t){t.preventDefault();e.wmTabSelected.emit({tabId:e.tabId});e.tabSelected.emit({tabId:e.tabId})};this.tabPressed=function(t){var i=t.key;if(i==="Enter"||i===" "){t.preventDefault();e.wmTabSelected.emit({tabId:e.tabId});e.tabSelected.emit({tabId:e.tabId})}else if(i.includes("Arrow")){t.preventDefault();e.keydownOnTabItem.emit({tabItem:e.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}Object.defineProperty(t.prototype,"parentTabList",{get:function(){return this.el.parentElement},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")};t.prototype.toggleTabbingOff=function(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")};t.prototype.componentDidLoad=function(){this.tabItemLoaded.emit()};t.prototype.render=function(){var t=this;var e=this.show?"":"hide ";e+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";var i={};var n=this.parentTabList&&this.parentTabList.customPadding;if(n){var a=parseInt(n,10)*2||0;var r=n.split(/([0-9]+)/).pop();i={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":"calc(100% - ".concat(a).concat(r,") 3px")}}return h(Host,{role:"presentation"},h("li",{class:"tab-item",role:"presentation"},h("a",{class:"tab ".concat(e),style:i,role:"tab",ref:function(e){return t.linkEl=e},onClick:this.tabClicked,id:"tab-link-".concat(this.tabId),onKeyDown:function(e){return t.tabPressed(e)},"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},h("slot",null))))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();TabItem.style=wmTabItemCss;var wmTabListCss=":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}";var TabList=function(){function t(t){var e=this;registerInstance(this,t);this.wmTabSelected=createEvent(this,"wmTabSelected",7);this.tabSelected=createEvent(this,"tabSelected",7);this.debouncedSetLayout=debounce((function(){if(!e.listWidth){e.setListWidth()}forceUpdate(e.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}Object.defineProperty(t.prototype,"menuLayout",{get:function(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tabItems",{get:function(){return Array.from(this.el.querySelectorAll("wm-tab-item"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedTabItem",{get:function(){return this.tabItems.filter((function(t){return t.selected}))[0]},enumerable:false,configurable:true});t.prototype.getLinkEl=function(t){return t.shadowRoot.querySelector("a")};Object.defineProperty(t.prototype,"panels",{get:function(){var t=Array.from(document.querySelectorAll("wm-tab-panel"));var e=this.tabItems.map((function(t){return t.tabId}));return t.filter((function(t){return e.includes(t.tabId)}))},enumerable:false,configurable:true});t.prototype.getPanel=function(t){return this.panels.find((function(e){return e.tabId===t}))};t.prototype.setListWidth=function(){var t=this.tabItems.reduce((function(t,e){return t+e.offsetWidth}),0);this.listWidth=t&&t>0?t:this.listWidth};t.prototype.setSelected=function(t){this.tabItems.map((function(e){return e.selected=e.tabId===t}));var 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((function(e){return e.active=e.tabId===t}))}};t.prototype.showItems=function(){this.tabItems.map((function(t){return t.show=true}))};t.prototype.hideItems=function(){this.tabItems.map((function(t){return t.show=false}))};t.prototype.componentWillLoad=function(){var t=this;this.el.focus=function(){t.selectedTabItem&&t.selectedTabItem.focus()}};t.prototype.componentDidLoad=function(){this.setLayout();var t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)};t.prototype.tabItemLoaded=function(t){this.setAriaOnPanelAndTab(t.target)};t.prototype.setAriaOnPanelAndTab=function(t){var 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)}};t.prototype.setAttributesOnTab=function(t,e){var i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href","#".concat(e.id))}};t.prototype.removeAttributesOnTab=function(t){var e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}};t.prototype.setAttributesOnPanel=function(t,e){var i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}};t.prototype.handleTabSelected=function(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}};t.prototype.handleKeydown=function(t){var e=t.detail.key;var i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}};t.prototype.handleLeftRightArrow=function(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}var i=this.tabItems[t];this.getLinkEl(i).focus()};t.prototype.setLayout=function(){this.debouncedSetLayout()};t.prototype.renderMenuOrTabs=function(){if(this.menuLayout){this.hideItems();return h("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();var t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return h("ul",{class:"tabcontainer ".concat(this.customBackground||""),style:t,role:"tablist"},h("slot",null))}};t.prototype.renderOptions=function(){var t=this;return this.tabItems.map((function(e){return h("wm-option",{id:"tab-link-".concat(e.tabId),selected:e.tabId===t.selectedTab,onClick:function(i){i.preventDefault();t.wmTabSelected.emit({tabId:e.tabId});t.tabSelected.emit({tabId:e.tabId})}},e.textContent)}))};t.prototype.render=function(){return h(Host,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{selectedTab:["setSelected"]}},enumerable:false,configurable:true});return t}();TabList.style=wmTabListCss;var wmTabPanelCss="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}";var TabPanel=function(){function t(t){registerInstance(this,t);this.tabPanelLoaded=createEvent(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}t.prototype.componentWillLoad=function(){!this.el.id&&this.el.setAttribute("id",generateId())};t.prototype.componentDidLoad=function(){this.tabPanelLoaded.emit({tabId:this.tabId})};t.prototype.toggleTabbingOn=function(){this.el.classList.add("user-is-tabbing")};t.prototype.toggleTabbingOff=function(){this.el.classList.remove("user-is-tabbing")};t.prototype.render=function(){return h(Host,{role:"tabpanel",class:{"tab-hidden":!this.active}})};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();TabPanel.style=wmTabPanelCss;export{TabItem as wm_tab_item,TabList as wm_tab_list,TabPanel as wm_tab_panel};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement,f as forceUpdate}from"./index-84a6ae22.js";import{d as debounce,g as generateId}from"./functions-1c41e984.js";var wmTabItemCss=":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}";var TabItem=function(){function t(t){var e=this;registerInstance(this,t);this.wmTabSelected=createEvent(this,"wmTabSelected",7);this.tabSelected=createEvent(this,"tabSelected",7);this.keydownOnTabItem=createEvent(this,"keydownOnTabItem",7);this.tabItemLoaded=createEvent(this,"tabItemLoaded",7);this.tabClicked=function(t){t.preventDefault();e.wmTabSelected.emit({tabId:e.tabId});e.tabSelected.emit({tabId:e.tabId})};this.tabPressed=function(t){var i=t.key;if(i==="Enter"||i===" "){t.preventDefault();e.wmTabSelected.emit({tabId:e.tabId});e.tabSelected.emit({tabId:e.tabId})}else if(i.includes("Arrow")){t.preventDefault();e.keydownOnTabItem.emit({tabItem:e.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}Object.defineProperty(t.prototype,"parentTabList",{get:function(){return this.el.parentElement},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")};t.prototype.toggleTabbingOff=function(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")};t.prototype.componentDidLoad=function(){this.tabItemLoaded.emit()};t.prototype.render=function(){var t=this;var e=this.show?"":"hide ";e+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";var i={};var n=this.parentTabList&&this.parentTabList.customPadding;if(n){var a=parseInt(n,10)*2||0;var r=n.split(/([0-9]+)/).pop();i={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":"calc(100% - ".concat(a).concat(r,") 3px")}}return h(Host,{role:"presentation"},h("li",{class:"tab-item",role:"presentation"},h("a",{class:"tab ".concat(e),style:i,role:"tab",ref:function(e){return t.linkEl=e},onClick:this.tabClicked,id:"tab-link-".concat(this.tabId),onKeyDown:function(e){return t.tabPressed(e)},"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},h("slot",null))))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();TabItem.style=wmTabItemCss;var wmTabListCss=":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}";var TabList=function(){function t(t){var e=this;registerInstance(this,t);this.wmTabSelected=createEvent(this,"wmTabSelected",7);this.tabSelected=createEvent(this,"tabSelected",7);this.debouncedSetLayout=debounce((function(){if(!e.listWidth){e.setListWidth()}forceUpdate(e.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}Object.defineProperty(t.prototype,"menuLayout",{get:function(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tabItems",{get:function(){return Array.from(this.el.querySelectorAll("wm-tab-item"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"selectedTabItem",{get:function(){return this.tabItems.filter((function(t){return t.selected}))[0]},enumerable:false,configurable:true});t.prototype.getLinkEl=function(t){return t.shadowRoot.querySelector("a")};Object.defineProperty(t.prototype,"panels",{get:function(){var t=Array.from(document.querySelectorAll("wm-tab-panel"));var e=this.tabItems.map((function(t){return t.tabId}));return t.filter((function(t){return e.includes(t.tabId)}))},enumerable:false,configurable:true});t.prototype.getPanel=function(t){return this.panels.find((function(e){return e.tabId===t}))};t.prototype.setListWidth=function(){var t=this.tabItems.reduce((function(t,e){return t+e.offsetWidth}),0);this.listWidth=t&&t>0?t:this.listWidth};t.prototype.setSelected=function(t){this.tabItems.map((function(e){return e.selected=e.tabId===t}));var 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((function(e){return e.active=e.tabId===t}))}};t.prototype.showItems=function(){this.tabItems.map((function(t){return t.show=true}))};t.prototype.hideItems=function(){this.tabItems.map((function(t){return t.show=false}))};t.prototype.componentWillLoad=function(){var t=this;this.el.focus=function(){t.selectedTabItem&&t.selectedTabItem.focus()}};t.prototype.componentDidLoad=function(){this.setLayout();var t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)};t.prototype.tabItemLoaded=function(t){this.setAriaOnPanelAndTab(t.target)};t.prototype.setAriaOnPanelAndTab=function(t){var 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)}};t.prototype.setAttributesOnTab=function(t,e){var i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href","#".concat(e.id))}};t.prototype.removeAttributesOnTab=function(t){var e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}};t.prototype.setAttributesOnPanel=function(t,e){var i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}};t.prototype.handleTabSelected=function(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}};t.prototype.handleKeydown=function(t){var e=t.detail.key;var i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}};t.prototype.handleLeftRightArrow=function(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}var i=this.tabItems[t];this.getLinkEl(i).focus()};t.prototype.setLayout=function(){this.debouncedSetLayout()};t.prototype.renderMenuOrTabs=function(){if(this.menuLayout){this.hideItems();return h("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();var t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return h("ul",{class:"tabcontainer ".concat(this.customBackground||""),style:t,role:"tablist"},h("slot",null))}};t.prototype.renderOptions=function(){var t=this;return this.tabItems.map((function(e){return h("wm-option",{id:"tab-link-".concat(e.tabId),selected:e.tabId===t.selectedTab,onClick:function(i){i.preventDefault();t.wmTabSelected.emit({tabId:e.tabId});t.tabSelected.emit({tabId:e.tabId})}},e.textContent)}))};t.prototype.render=function(){return h(Host,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{selectedTab:["setSelected"]}},enumerable:false,configurable:true});return t}();TabList.style=wmTabListCss;var wmTabPanelCss="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}";var TabPanel=function(){function t(t){registerInstance(this,t);this.tabPanelLoaded=createEvent(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}t.prototype.componentWillLoad=function(){!this.el.id&&this.el.setAttribute("id",generateId())};t.prototype.componentDidLoad=function(){this.tabPanelLoaded.emit({tabId:this.tabId})};t.prototype.toggleTabbingOn=function(){this.el.classList.add("user-is-tabbing")};t.prototype.toggleTabbingOff=function(){this.el.classList.remove("user-is-tabbing")};t.prototype.render=function(){return h(Host,{role:"tabpanel",class:{"tab-hidden":!this.active}})};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();TabPanel.style=wmTabPanelCss;export{TabItem as wm_tab_item,TabList as wm_tab_list,TabPanel as wm_tab_panel};
 //# sourceMappingURL=wm-tab-item_3.entry.js.map

package/dist/esm-es5/wm-tab-item_3.entry.js.map

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

package/dist/esm-es5/wm-tag-input-row.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["TagInputRow","prototype","componentDidUpdate","this","wmTagInputRowUpdated","emit"],"sources":["src/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tag-input-row\",\n})\nexport class TagInputRow {\n  @Element() el!: HTMLWmTagInputRowElement;\n\n  @Prop({ attribute: \"col1\" }) col1?: string;\n  @Prop({ attribute: \"col2\" }) col2?: string;\n  @Prop({ attribute: \"col3\" }) col3?: string;\n  @Prop({ attribute: \"col4\" }) col4?: string;\n  @Prop() locked: boolean = false;\n\n  @Event() wmTagInputRowUpdated!: EventEmitter<void>;\n\n  componentDidUpdate() {\n    this.wmTagInputRowUpdated.emit();\n  }\n}\n"],"mappings":"4FAKaA,YAAW,W,wMAOI,K,CAI1BA,EAAAC,UAAAC,mBAAA,WACEC,KAAKC,qBAAqBC,M,gIAZN,U"}
+{"version":3,"names":["TagInputRow","prototype","componentDidUpdate","this","wmTagInputRowUpdated","emit"],"sources":["src/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-tag-input-row\",\r\n})\r\nexport class TagInputRow {\r\n  @Element() el!: HTMLWmTagInputRowElement;\r\n\r\n  @Prop({ attribute: \"col1\" }) col1?: string;\r\n  @Prop({ attribute: \"col2\" }) col2?: string;\r\n  @Prop({ attribute: \"col3\" }) col3?: string;\r\n  @Prop({ attribute: \"col4\" }) col4?: string;\r\n  @Prop() locked: boolean = false;\r\n\r\n  @Event() wmTagInputRowUpdated!: EventEmitter<void>;\r\n\r\n  componentDidUpdate() {\r\n    this.wmTagInputRowUpdated.emit();\r\n  }\r\n}\r\n"],"mappings":"4FAKaA,YAAW,W,wMAOI,K,CAI1BA,EAAAC,UAAAC,mBAAA,WACEC,KAAKC,qBAAqBC,M,gIAZN,U"}

package/dist/esm-es5/wm-tag-input.entry.js

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(t,e,i){if(i||arguments.length===2)for(var o=0,r=e.length,a;o<r;o++){if(a||!(o in e)){if(!a)a=Array.prototype.slice.call(e,0,o);a[o]=e[o]}}return t.concat(a||Array.prototype.slice.call(e))};import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,i as intl,d as debounce,q as csvToArray,r as measureText,j as hideTooltip,s as showTooltip,m as shouldOpenUp}from"./functions-c58046f2.js";var wmTagInputCss=':host,wm-tag-input{font-family:inherit;width:100%;display:block}:host *,wm-tag-input *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper,wm-tag-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-tag-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-tag-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-tag-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-tag-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-tag-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-tag-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-tag-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-tag-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-tag-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-tag-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-tag-input .wrapper{width:100%;height:100%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused,wm-tag-input .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .character-count,wm-tag-input .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper,wm-tag-input .tags-and-input-wrapper{position:relative;width:100%;padding:0.5rem 0.25rem 0.5rem 0;margin-bottom:-0.5rem}:host .upper-row,wm-tag-input .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before,wm-tag-input .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;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:"\\f349";color:#b5b5b5;padding:0.75rem 0.5rem 0.75rem 0.75rem}:host .lower-row,wm-tag-input .lower-row{width:100%;min-height:1.875rem}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:#e6e6e6;padding:0.5rem 1rem;color:#4a4a4a;font-size:0.875rem;border-top:1px solid rgba(35, 35, 35, 0.6);border-radius:0 0 3px 3px}:host .tag-area,wm-tag-input .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}:host .tag-area:focus,wm-tag-input .tag-area:focus{outline:none}:host .tag-area [role=option],wm-tag-input .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:#4a4a4a;background-color:rgba(3, 0, 0, 0.1);padding:0.5rem 0.625rem;margin-bottom:0.5rem;margin-right:0.25rem;margin-left:0.25rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight,wm-tag-input .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}@keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}:host .tag-area [role=option].focused,wm-tag-input .tag-area [role=option].focused{background-color:#d1d1d1}:host .tag-area [role=option].locked,wm-tag-input .tag-area [role=option].locked{background-color:#6b6b6b;color:white}:host .tag-area [role=option] .icon,wm-tag-input .tag-area [role=option] .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area [role=option] .icon.remove-btn,wm-tag-input .tag-area [role=option] .icon.remove-btn{border:1px solid #575195;color:#575195;border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .icon.remove-btn:hover,wm-tag-input .tag-area [role=option] .icon.remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .icon.remove-btn:before,wm-tag-input .tag-area [role=option] .icon.remove-btn: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 .tag-area [role=option] .icon.lock,wm-tag-input .tag-area [role=option] .icon.lock{color:white}:host .tag-area [role=option] .icon.lock:before,wm-tag-input .tag-area [role=option] .icon.lock: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:"\\f341"}:host input,wm-tag-input input{font-family:inherit;border:none;height:1.75rem;padding:0;margin-bottom:0.5rem;margin-right:0.25rem;padding-left:0.5rem;right:0px}:host input.hidden,wm-tag-input input.hidden{display:none}:host input:focus,wm-tag-input input:focus{outline:none}:host .dropdown-wrapper,wm-tag-input .dropdown-wrapper{margin:0;padding:0;-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:calc(100% + 2px);right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown,wm-tag-input .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open,wm-tag-input .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards,wm-tag-input .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div,wm-tag-input .dropdown-wrapper li,wm-tag-input .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:#fff;list-style:none;height:2.6875rem;white-space:pre}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn,wm-tag-input .dropdown-wrapper li[role=option],wm-tag-input .dropdown-wrapper li.add-new-btn,wm-tag-input .dropdown-wrapper div[role=option],wm-tag-input .dropdown-wrapper div.add-new-btn{cursor:pointer;color:#575195;font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper li[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper li.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper div[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:#6b6b6b;font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused,wm-tag-input .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li[role=option].focused,wm-tag-input .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li.add-new-btn.focused,wm-tag-input .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div[role=option].focused,wm-tag-input .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div.add-new-btn.focused{outline:none;background:#f4f4f4}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text,wm-tag-input .dropdown-wrapper li.help-text,wm-tag-input .dropdown-wrapper div.help-text{color:#4a4a4a;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child),wm-tag-input .dropdown-wrapper li:not(:last-child),wm-tag-input .dropdown-wrapper div:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .info-text,wm-tag-input .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper,wm-tag-input .table-wrapper{min-height:10rem;overflow:auto;margin-top:1.5rem}:host .table-wrapper #table,wm-tag-input .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths,wm-tag-input .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers,wm-tag-input .table-wrapper #table .headers{height:2.5rem;background-color:#eeedf4}:host .table-wrapper #table .headers th,wm-tag-input .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even),wm-tag-input .table-wrapper tr:nth-child(even){background-color:#fafafa}:host .table-wrapper tr.selected,wm-tag-input .table-wrapper tr.selected{background-color:rgba(25, 161, 169, 0.2);-webkit-box-shadow:inset 0 0 0 1px #19a1a9;box-shadow:inset 0 0 0 1px #19a1a9;font-weight:500}:host .table-wrapper tr.focused:not(.locked),:host .table-wrapper tr:hover:not(.locked),wm-tag-input .table-wrapper tr.focused:not(.locked),wm-tag-input .table-wrapper tr:hover:not(.locked){background-color:#e9e7ec;-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td,wm-tag-input .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked td:first-child .cell-content-wrapper:before,wm-tag-input .table-wrapper tr.locked td:first-child .cell-content-wrapper: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:"\\f33e";margin-right:0.5rem;color:#4a4a4a}:host .table-wrapper td,wm-tag-input .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused,wm-tag-input .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}:host .table-wrapper td .cell-content-wrapper.trunc,wm-tag-input .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td .description,wm-tag-input .table-wrapper td .description{display:none}:host .no-results,wm-tag-input .no-results{padding:1.25rem 1.5rem}:host .sr-only,wm-tag-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var TagInput=function(){function t(t){var e=this;registerInstance(this,t);this.wmTagInputChanged=createEvent(this,"wmTagInputChanged",7);this.uid=this.el.id?this.el.id:generateId();this.openUp=false;this.tooltipVisible=false;this.tagAreaInstructions=intl.formatMessage({id:"tagInput.tagAreaInstructions",defaultMessage:"tag selection. Press Backspace or Delete to remove a tag."});this.maxTagsReachedMessage=intl.formatMessage({id:"tagInput.maxTagsReached",defaultMessage:"No more tags can be added because the limit has been reached."});this.debouncedUpdate=debounce((function(){return forceUpdate(e.el)}),30);this.label=undefined;this.labelPosition="top";this.options="";this.selectedTags="";this.info=undefined;this.addNew=true;this.placeholder=undefined;this.characterLimit=50;this.maxTags=undefined;this.tagInputType="dropdown";this.colHeaders=undefined;this.colWidths=undefined;this.colWrap=undefined;this.focusedListItem=undefined;this.focusedTag=null;this.tablePosition={row:0,column:1};this.isExpanded=false;this.tagsList=csvToArray(this.selectedTags);this.optionsList=csvToArray(this.options);this.charCount=0;this.liveRegionMessage=""}Object.defineProperty(t.prototype,"focusedElement",{get:function(){return this.el.shadowRoot.activeElement},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"listItemEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll("li"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagEls",{get:function(){return this.tagAreaEl?Array.from(this.tagAreaEl.querySelectorAll(".tag")):[]},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagEls",{get:function(){return this.tagEls.filter((function(t){return!t.classList.contains("locked")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"optionEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll(".option"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"wmRowEls",{get:function(){return Array.from(this.el.querySelectorAll("wm-tag-input-row"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"localRowEls",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("tr"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"filteredRows",{get:function(){var t=this;return this.wmRowEls.filter((function(e){var i=[e.col1,e.col2,e.col3,e.col4].join("").toLowerCase();return t.inputEl&&t.inputEl.value?i.includes(t.inputEl.value.toLowerCase()):true}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagsList",{get:function(){var t=this;var e=[];if(this.tagInputType==="table"){this.tagsList.forEach((function(i){var o=t.wmRowEls.filter((function(t){return i===t.id}))[0];if(!o.locked){e.push(i)}}))}else if(this.tagInputType==="dropdown"){e=this.tagsList}return e},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagLimitReached",{get:function(){return!!(this.maxTags&&this.tagsList.length>=this.maxTags)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"noResultsMessage",{get:function(){return intl.formatMessage({id:"tagInput.noResults",defaultMessage:"No results match your search.",description:"Message displayed when a user's search returns empty."})},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"inputMinimumWidth",{get:function(){var t=getComputedStyle(this.inputEl);var e=getComputedStyle(this.tagEls[this.tagEls.length-1]);var i=[t.paddingLeft,t.paddingRight,t.marginLeft,t.marginRight,e.marginRight].reduce((function(t,e){return t+parseInt(e.replace("px",""))}),0);var o=Math.max(150,measureText(this.inputEl,this.placeholder).width+i);return o},enumerable:false,configurable:true});t.prototype.generateTagAddedMessage=function(t){return intl.formatMessage({id:"tagInput.tagAdded",defaultMessage:"{tagName} added.",description:"A confirmation for adding a tag."},{tagName:t})};t.prototype.generateTagAlreadyAddedMessage=function(t){return intl.formatMessage({id:"tagInput.tagAlreadyAdded",defaultMessage:"{tagName} has already been added.",description:"An alert for adding a tag that is already present."},{tagName:t})};t.prototype.generateTagCounterMessage=function(t,e){return intl.formatMessage({id:"tagInput.tagsAddedCounter",defaultMessage:"Tags added: {x, number}/{y, number}",description:"For the user to understand how close they are to the tag limit."},{x:t,y:e})};t.prototype.generateCharacterLimitLabel=function(t){return intl.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:t})};t.prototype.componentWillLoad=function(){var t=this;if(!this.placeholder){this.placeholder=this.createPlaceholderDefault(this.addNew,!!this.options)}if(!this.label){console.error("wm-tag-input must have a label property")}this.consolidateSelectedTags();this.el.focus=function(){var e=t.nonLockedTagEls[0];if(e){t.tagAreaEl.focus();t.focusTag(e)}else{t.inputEl.focus()}};var e=new ResizeObserver((function(){return t.debouncedUpdate()}));e.observe(this.el)};t.prototype.componentDidLoad=function(){this.tagEls.forEach((function(t){return t.classList.remove("highlight")}))};t.prototype.componentDidRender=function(){this.positionInput()};t.prototype.consolidateSelectedTags=function(){var t=this;this.tagsList.forEach((function(e){if(!t.includesCaseInsensitive(t.optionsList,e)){t.options+="".concat(t.options.length>0?",":"").concat(e)}}));this.optionsList=csvToArray(this.options)};t.prototype.createPlaceholderDefault=function(t,e){var i=intl.formatMessage({id:"tagInput.placeholderAddAndSearch",defaultMessage:"Add or search for a tag",description:"Placeholder text. Use imperative"});var o=intl.formatMessage({id:"tagInput.placeholderSearch",defaultMessage:"Search and select a tag",description:"Placeholder text. Use imperative"});var r=intl.formatMessage({id:"tagInput.placeholderAdd",defaultMessage:"Add a new tag",description:"Placeholder text. Use imperative"});var a="";if(t&&e){a=i}else if(!t&&e){a=o}else if(t){a=r}return a};t.prototype.reflectSelectedTags=function(t,e){var i=this;var o=t.length>e.length;var r="";var a=this.tagsList;if(o){r=t.filter((function(t){return!e.includes(t)}))[0]}else{r=e.filter((function(e){return!t.includes(e)}))[0]}if(this.tagInputType==="table"){r=this.wmRowEls.filter((function(t){return t.id===r}))[0];a=this.tagsList.map((function(t){return i.el.querySelector("#".concat(t))}))}this.selectedTags=this.listToCSV(this.tagsList);var n={value:a,tagChanged:r};this.wmTagInputChanged.emit(n)};t.prototype.handleRowUpdate=function(){forceUpdate(this.el)};t.prototype.closeIfNotElOrChild=function(t){var e=t.target!==this.el&&!this.el.shadowRoot.contains(t.target);if(this.tagInputType==="dropdown"&&e&&this.isExpanded){this.closeDropdown()}};t.prototype.dismissTooltip=function(){if(this.tooltipVisible){hideTooltip();this.tooltipVisible=false}};t.prototype.handleInputKeyDown=function(t){if(/^.$/.test(t.key)&&this.inputEl.value.length>=this.characterLimit){this.announceCharacterLimitWarning(this.inputEl.value.length,this.characterLimit)}t.stopPropagation();switch(t.key){case"Enter":case",":t.preventDefault();this.handleInputEnter();break;case"ArrowDown":t.preventDefault();this.handleInputArrowDown();break;case"ArrowUp":t.preventDefault();this.handleInputArrowUp();break;case"ArrowLeft":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveLeftCell()}break;case"ArrowRight":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveRightCell()}break;case"Escape":if(this.tagInputType==="dropdown"&&this.isExpanded){this.closeDropdown()}break;case"ArrowLeft":case"Backspace":this.handleInputBackspace();break}};t.prototype.handleInputFocus=function(){if(this.tagInputType==="dropdown"){this.openDropdown();this.clearListItemFocus()}forceUpdate(this.el)};t.prototype.handleInputChanged=function(t){this.charCount=t.length;if(this.tagInputType==="dropdown"){this.clearListItemFocus();if(this.charCount>=this.characterLimit-5){this.announceCharacterLimitWarning(this.charCount,this.characterLimit)}if(!this.isExpanded){this.openDropdown()}}else if(this.tagInputType==="table"){this.clearCellFocus()}this.announceExistingOptions()};t.prototype.handleInputEnter=function(){if(this.tagInputType==="dropdown"){if(this.focusedListItem){this.handleListItemClick(this.focusedListItem)}else{this.submitInput(this.addNew,this.inputEl.value.trim())}}else if(this.tagInputType==="table"&&this.tablePosition.row>0){this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id)}};t.prototype.submitInput=function(t,e){var i=e.match(/\S/);if(t&&i){this.addTag(e);this.optionsList=this.addOption(e);this.resetInput()}};t.prototype.handleInputArrowDown=function(){if(this.tagInputType==="table"){this.moveDownRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveDownListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputArrowUp=function(){if(this.tagInputType==="table"){this.moveUpRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveUpListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputBackspace=function(){var t=this;if(this.inputEl.value===""&&this.tagsList.length>0){window.requestAnimationFrame((function(){if(t.nonLockedTagsList.length>0){t.tagAreaEl.focus();t.focusTag(t.tagEls[t.tagEls.length-1])}}))}};t.prototype.handleListItemKeyDown=function(t){var e=t.target;switch(t.key){case"Enter":case" ":t.preventDefault();e.click();break;case"ArrowDown":t.preventDefault();this.moveDownListItem();break;case"ArrowUp":t.preventDefault();this.moveUpListItem();break;case"Escape":if(this.focusedElement!==this.inputEl){this.inputEl.focus()}else if(this.tagInputType==="dropdown"){this.closeDropdown()}break}};t.prototype.handleListItemClick=function(t){var e=t.dataset.option.trim()||"";if(this.includesCaseInsensitive(this.tagsList,e)){this.announce(this.generateTagAlreadyAddedMessage(e))}else{this.resetInput();this.addTag(e);this.optionsList=this.addOption(e);this.focusedListItem=null}};t.prototype.handleTableRowClick=function(t){var e=this.el.querySelector("#".concat(t));var i=e.locked;if(!i){if(this.includesCaseInsensitive(this.tagsList,t)){this.removeTag(t)}else if(!this.tagLimitReached){this.addTag(t);this.resetInput()}}};t.prototype.handleTagAreaKeyDown=function(t){switch(t.key){case"ArrowLeft":case"ArrowUp":t.preventDefault();this.moveLeftTag();break;case"ArrowRight":case"ArrowDown":t.preventDefault();this.moveRightTag();break;case"Backspace":case"Delete":this.handleTagAreaDelete();break}};t.prototype.handleTagAreaDelete=function(){var t=this.focusedTag&&this.focusedTag.classList.contains("locked");if(this.focusedTag&&this.focusedTag.dataset.tag&&!t){this.removeTag(this.focusedTag.dataset.tag);if(this.nonLockedTagsList.length===0){this.inputEl.focus()}else if(this.focusedTag===this.tagEls[this.tagEls.length-1]){this.focusedTag=this.tagEls[this.tagEls.length-2];this.focusTag(this.focusedTag)}}};t.prototype.handleBlur=function(t,e){var i=t.relatedTarget!==e&&!this.el.shadowRoot.contains(t.relatedTarget);this.dismissTooltip();this.clearCellFocus();if(i){this.fieldWrapperEl.classList.remove("focused");if(this.tagInputType==="dropdown"){this.closeDropdown()}}};t.prototype.handleCellMouseEnter=function(t){var e=t.target;var i=e.querySelector(".cell-content-wrapper");var o=i.scrollWidth>i.clientWidth;if(o){showTooltip("bottom",e,e.innerText);this.tooltipVisible=true}};t.prototype.handleTagAreaFocus=function(){if(this.tagInputType==="dropdown"){this.closeDropdown()}var t=this.nonLockedTagEls[0];t&&this.focusTag(t)};t.prototype.handleRemoveButtonClick=function(t){this.moveLeftTag();this.removeTag(t)};t.prototype.moveDownListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[0];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.nextElementSibling){this.focusListItem(this.focusedListItem.nextElementSibling)}else{this.focusListItem(t)}}};t.prototype.moveUpListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[this.listItemEls.length-1];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.previousElementSibling){this.focusListItem(this.focusedListItem.previousElementSibling)}else{this.clearListItemFocus()}}};t.prototype.moveDownRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=1}else if(this.tablePosition.row===this.filteredRows.length){this.tablePosition.row=1}else{this.tablePosition.row++}var t=this.wmRowEls[this.tablePosition.row-1];if(t.locked){this.moveDownRow()}else{this.focusCell(this.tablePosition)}}};t.prototype.moveUpRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=this.filteredRows.length}else if(this.tablePosition.row===1){this.tablePosition.row=0}else{this.tablePosition.row--}var t=this.wmRowEls[this.tablePosition.row-1];if(t&&t.locked){this.moveUpRow()}else if(t){this.focusCell(this.tablePosition)}else{this.clearCellFocus()}}};t.prototype.moveLeftCell=function(){if(this.tablePosition.column!=1){this.tablePosition.column--;this.focusCell(this.tablePosition)}};t.prototype.moveRightCell=function(){var t=csvToArray(this.colHeaders).length;if(this.tablePosition.column<t){this.tablePosition.column++;this.focusCell(this.tablePosition)}};t.prototype.moveLeftTag=function(){var t=this.tagEls[this.tagEls.length-1];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.previousElementSibling)){this.focusedTag=this.focusedTag.previousElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")&&this.nonLockedTagEls.length>0){this.moveLeftTag()}else{this.focusTag(this.focusedTag)}};t.prototype.moveRightTag=function(){var t=this.tagEls[0];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.nextElementSibling)){this.focusedTag=this.focusedTag.nextElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")){this.moveRightTag()}else{this.focusTag(this.focusedTag)}};t.prototype.addOption=function(t){var e=this.optionsList;var i=this.includesCaseInsensitive(this.optionsList,t);if(!i){e=e.concat(t)}return e};t.prototype.removeOption=function(t){this.optionsList=this.filterCaseInsensitive(this.optionsList,t)};t.prototype.addTag=function(t){var e=this.tagsList;var i=this.includesCaseInsensitive(this.tagsList,t);var o=this.optionsList.filter((function(e){return e.toLowerCase()===t.toLowerCase()}))[0];if(!i){var r=t;if(this.tagInputType==="table"){var a=this.el.querySelector("#".concat(t));r=a.col1}this.announce(this.generateTagAddedMessage(r));this.tagsList=e.concat(o||t);if(this.tagLimitReached){this.tagAreaEl.focus()}}};t.prototype.removeTag=function(t){var e=t;if(this.tagInputType==="table"){var i=this.el.querySelector("#".concat(t));e=i.col1}var o=intl.formatMessage({id:"tagInput.tagRemoved",defaultMessage:"{tag} removed"},{tag:e});this.announce(o);this.tagsList=this.filterCaseInsensitive(this.tagsList,t);if(this.tagInputType==="dropdown"){var r=csvToArray(this.options);if(this.includesCaseInsensitive(this.optionsList,t)&&!this.includesCaseInsensitive(r,t)){this.removeOption(t)}}};t.prototype.focusListItem=function(t){this.focusedListItem=t;this.inputEl.setAttribute("aria-activedescendant",this.focusedListItem.id);t.scrollIntoView({block:"nearest"})};t.prototype.focusTag=function(t){if(t.classList.contains("locked")){this.focusedTag=null;this.tagAreaEl.setAttribute("aria-activedescendant","")}else{this.focusedTag=t;this.tagAreaEl.setAttribute("aria-activedescendant",this.focusedTag.id)}};t.prototype.focusCell=function(t){this.clearCellFocus(false);if(t.row){var e=this.localRowEls[t.row];var i=e.querySelectorAll("td");var o=i[t.column-1];var r=o.querySelector(".cell-content-wrapper");var a=r.scrollWidth>r.clientWidth;e.classList.add("focused");o.classList.add("focused");o.scrollIntoView({block:"nearest"});this.inputEl.setAttribute("aria-activedescendant",o.id);this.dismissTooltip();if(a){showTooltip("bottom",o,o.innerText);this.tooltipVisible=true}}};t.prototype.clearTagFocus=function(){this.tagAreaEl.setAttribute("aria-activedescendant","");this.focusedTag=null};t.prototype.clearCellFocus=function(t){if(t===void 0){t=true}this.inputEl.setAttribute("aria-activedescendant","");if(t){this.tablePosition={row:0,column:1}}this.localRowEls.forEach((function(t){t.classList.remove("focused");t.querySelectorAll("td").forEach((function(t){t.classList.remove("focused")}))}))};t.prototype.openDropdown=function(){this.openUp=shouldOpenUp(this.el,this.dropdownEl,this.el.clientHeight,-2);this.isExpanded=true};t.prototype.closeDropdown=function(){this.clearListItemFocus();this.isExpanded=false};t.prototype.clearListItemFocus=function(){this.focusedListItem=null;this.inputEl.setAttribute("aria-activedescendant","");this.listItemEls.forEach((function(t){t.classList.remove("focused")}))};t.prototype.resetInput=function(){this.charCount=0;this.inputEl.value=""};t.prototype.announce=function(t){if(this.liveRegionEl.textContent===t){t+=" "}this.liveRegionMessage=t};t.prototype.announceExistingOptions=function(){var t=this;window.requestAnimationFrame((function(){var e=0;if(t.tagInputType==="dropdown"){e=t.optionEls.length}else if(t.tagInputType==="table"){e=t.filteredRows.length}var i=intl.formatMessage({id:"tagInput.existingOptions",defaultMessage:"{num, plural, one {1 existing option.} other {# existing options.}}"},{num:e});t.announce(i)}))};t.prototype.announceCharacterLimitWarning=function(t,e){var i=intl.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:t,y:e});var o=intl.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});this.announce("".concat(i).concat(t>=e?" "+o:""))};t.prototype.positionInput=function(){var t=this.tagEls[this.tagEls.length-1];this.inputEl.style.position="static";this.inputEl.style.width="100%";if(t){var e=this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right;if(e>=this.inputMinimumWidth){this.inputEl.style.position="absolute";this.inputEl.style.top=t.offsetTop.toString()+"px";this.inputEl.style.width=(this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right-8).toString()+"px"}}};t.prototype.listToCSV=function(t){return t.join(",")};t.prototype.includesCaseInsensitive=function(t,e){var i=t.map((function(t){return t.toLowerCase()}));return i.includes(e.toLowerCase())};t.prototype.filterCaseInsensitive=function(t,e){return t.filter((function(t){return t.toLowerCase()!==e.toLowerCase()}))};t.prototype.sortCaseInsensitive=function(t){return t.sort((function(t,e){t=t.toLowerCase();e=e.toLowerCase();return t>e?1:t<e?-1:0}))};t.prototype.renderTags=function(){var t=this;var e=[];var i=[];this.tagsList.forEach((function(o,r){var a="tag".concat(r+1);var n="";var s=false;if(t.tagInputType==="dropdown"){n=o}else if(t.tagInputType==="table"){var l=t.el.querySelector("#".concat(o));n=l?l.col1:"";s=l?l.locked:false}var p=s?e:i;p.push(h("li",{id:a,class:"tag highlight ".concat(t.focusedTag&&t.focusedTag.id===a?"focused":""," ").concat(s?"locked":""),"data-tag":o,role:"option"},n,s?h("div",{class:"icon lock"}):h("button",{class:"icon remove-btn",tabIndex:-1,onClick:function(){return t.handleRemoveButtonClick(o)}})))}));return __spreadArray(__spreadArray([],e,true),i,true)};t.prototype.renderDropdown=function(){var t=this;return h("div",{class:"dropdown-wrapper ".concat(this.isExpanded?"open":""," ").concat(this.openUp?"upwards":""),ref:function(e){return t.dropdownEl=e}},h("div",{id:"help-text",class:"help-text"},this.renderHelpText()),h("ul",{class:"dropdown",id:"dropdown",role:"listbox","aria-multiselectable":"true","aria-expanded":this.isExpanded?"true":false,"aria-label":this.label,tabindex:-1},this.inputEl&&this.renderAddNewButton(),this.renderListItems(this.optionsList)))};t.prototype.renderListItems=function(t){var e=this;t=this.sortCaseInsensitive(t);if(this.inputEl&&this.inputEl.value){t=this.optionsList.filter((function(t){return t.toLowerCase().includes(e.inputEl.value.toLowerCase())}))}return t.map((function(t,i){var o="option".concat(i+1);var r=e.focusedListItem&&e.focusedListItem.id===o;var a=e.includesCaseInsensitive(e.tagsList,t);return h("li",{class:"option ".concat(r?"focused":""),role:"option",id:o,"data-option":t,"aria-selected":a?"true":"false","aria-disabled":a?"true":"false",onKeyDown:function(t){return e.handleListItemKeyDown(t)},onBlur:function(t){return e.handleBlur(t,e.el)},onClick:function(t){return e.handleListItemClick(t.target)}},t)}))};t.prototype.renderAddNewButton=function(){var t=this;var e=this.inputEl.value.match(/\S/);var i=this.includesCaseInsensitive(this.optionsList,this.inputEl.value.trim());if(this.addNew&&e&&!i){var o="add-new-btn";var r=this.focusedListItem&&this.focusedListItem.id===o;return h("li",{role:"option",class:"add-new-btn ".concat(r?"focused":""),id:o,"data-option":this.inputEl.value,onKeyDown:function(e){return t.handleListItemKeyDown(e)},onBlur:function(e){return t.handleBlur(e,t.el)},onClick:function(e){return t.handleListItemClick(e.target)},tabIndex:r?0:-1},'Add "'.concat(this.inputEl.value.trim(),'"'))}else return""};t.prototype.renderHelpText=function(){var t=intl.formatMessage({id:"tagInput.helpTextCanSelect",defaultMessage:"Search and select a tag.",description:"Placeholder text. Use imperative"});var e=intl.formatMessage({id:"tagInput.helpTextEditable",defaultMessage:"Press the Enter or Comma key to add a new tag.",description:"Placeholder text. Use imperative"});var i="";if(this.optionsList.length>0){i+=t}if(this.addNew){i+=" "+e}return i};t.prototype.renderTagCounter=function(){if(this.maxTags){return h("div",{class:"lower-row"},h("div",{id:"max-tags"},this.generateTagCounterMessage(this.tagsList.length,this.maxTags),this.tagLimitReached&&" - ".concat(this.maxTagsReachedMessage)))}};t.prototype.renderTable=function(){var t=this;return h("div",{class:"table-wrapper",onScroll:function(){return t.dismissTooltip()}},h("table",{id:"table",role:"grid",class:"".concat(this.colWidths?"fixed-widths":""),"aria-label":this.label,"aria-multiselectable":"true"},this.renderTableHeaders(),this.filteredRows.length?this.renderTableRows():h("div",{class:"no-results"},this.noResultsMessage)))};t.prototype.renderTableHeaders=function(){var t=this;return h("tr",{class:"headers",role:"row"},csvToArray(this.colHeaders).map((function(e,i){var o="wrap";if(t.colWrap&&csvToArray(t.colWrap)[i]){o=csvToArray(t.colWrap)[i]}return h("th",{class:"header-cell ".concat(o),role:"columnheader",width:t.colWidths?csvToArray(t.colWidths)[i]:""},e)})))};t.prototype.renderTableRows=function(){var t=this;return this.filteredRows.map((function(e){var i=t.includesCaseInsensitive(t.tagsList,e.id);return h("tr",{id:e.id,class:"".concat(e.locked?"locked":""," ").concat(i?"selected":""),role:"row",onClick:function(){return t.handleTableRowClick(e.id)}},t.renderTableCells(e))}))};t.prototype.renderTableCells=function(t){var e=this;var i=[t.col1,t.col2,t.col3,t.col4].filter((function(t){return!!t}));var o=this.includesCaseInsensitive(this.tagsList,t.id);return i.map((function(i,r){var a="".concat(t.id,"-col").concat(r+1);var n="wrap";if(e.colWrap&&csvToArray(e.colWrap)[r]){n=csvToArray(e.colWrap)[r]}return h("td",{id:a,role:"gridcell","aria-describedby":"".concat(a,"-description"),"aria-selected":o.toString(),onMouseEnter:function(t){return e.handleCellMouseEnter(t)},onMouseLeave:function(){return e.dismissTooltip()}},h("div",{class:"cell-content-wrapper ".concat(n)},i),h("div",{class:"description",id:"".concat(a,"-description")},t.locked?"locked":""))}))};t.prototype.render=function(){var t=this;return h(Host,{id:this.uid},h("div",{class:"wrapper label-".concat(this.labelPosition)},h("div",{class:"label-wrapper"},h("label",{class:"label",htmlFor:"input".concat(this.uid)},this.label)),h("div",{class:"field-wrapper ".concat(this.focusedElement?"focused":""),ref:function(e){return t.fieldWrapperEl=e}},h("div",{class:"upper-row"},h("div",{class:"tags-and-input-wrapper"},this.tagsList.length>0&&h("ul",{ref:function(e){return t.tagAreaEl=e},class:"tag-area",role:"listbox","aria-activedescendant":"","aria-orientation":"horizontal","aria-label":"".concat(this.label," ").concat(this.tagsList.length>0?this.tagAreaInstructions:""),tabindex:this.nonLockedTagsList.length>0?0:-1,"aria-describedby":"info max-tags",onFocus:function(){return t.handleTagAreaFocus()},onBlur:function(e){t.clearTagFocus();t.handleBlur(e,t.el)},onKeyDown:function(e){return t.handleTagAreaKeyDown(e)}},this.renderTags()),h("input",{id:"input".concat(this.uid),class:this.tagLimitReached?"hidden":"",role:"combobox",ref:function(e){return t.inputEl=e},autocomplete:"off","aria-controls":this.tagInputType,"aria-describedby":"help-text","aria-label":"".concat(this.label," ").concat(this.tagInputType==="dropdown"?this.generateCharacterLimitLabel(this.characterLimit):""),"aria-expanded":this.tagInputType==="dropdown"?this.isExpanded.toString():null,placeholder:this.placeholder,maxLength:this.tagInputType==="dropdown"?this.characterLimit:undefined,onInput:function(){return t.handleInputChanged(t.inputEl.value)},onBlur:function(e){t.handleBlur(e,t.el)},onFocus:function(){return t.handleInputFocus()},onKeyDown:function(e){return t.handleInputKeyDown(e)}})),this.tagInputType==="dropdown"&&h("div",{class:"character-count"},this.charCount,"/",this.characterLimit)),this.renderTagCounter(),this.tagInputType==="dropdown"&&this.renderDropdown()),this.info?h("div",{id:"info",class:"info-text"},this.info):"",h("div",{class:"sr-only","aria-live":"assertive",ref:function(e){return t.liveRegionEl=e},"aria-atomic":"true"},this.liveRegionMessage),this.tagInputType==="table"&&this.renderTable()))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tagsList:["reflectSelectedTags"]}},enumerable:false,configurable:true});return t}();TagInput.style=wmTagInputCss;export{TagInput as wm_tag_input};
+var __spreadArray=this&&this.__spreadArray||function(t,e,i){if(i||arguments.length===2)for(var o=0,r=e.length,a;o<r;o++){if(a||!(o in e)){if(!a)a=Array.prototype.slice.call(e,0,o);a[o]=e[o]}}return t.concat(a||Array.prototype.slice.call(e))};import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,i as intl,d as debounce,q as csvToArray,r as measureText,j as hideTooltip,s as showTooltip,m as shouldOpenUp}from"./functions-1c41e984.js";var wmTagInputCss=':host,wm-tag-input{font-family:inherit;width:100%;display:block}:host *,wm-tag-input *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper,wm-tag-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-tag-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-tag-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-tag-input .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-tag-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-tag-input .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-tag-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-tag-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-tag-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-tag-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-tag-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper,wm-tag-input .wrapper{width:100%;height:100%;position:relative}:host .field-wrapper,wm-tag-input .field-wrapper{position:relative;width:100%;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused,wm-tag-input .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .character-count,wm-tag-input .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper,wm-tag-input .tags-and-input-wrapper{position:relative;width:100%;padding:0.5rem 0.25rem 0.5rem 0;margin-bottom:-0.5rem}:host .upper-row,wm-tag-input .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before,wm-tag-input .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;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:"\\f349";color:#b5b5b5;padding:0.75rem 0.5rem 0.75rem 0.75rem}:host .lower-row,wm-tag-input .lower-row{width:100%;min-height:1.875rem}:host #max-tags,wm-tag-input #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:#e6e6e6;padding:0.5rem 1rem;color:#4a4a4a;font-size:0.875rem;border-top:1px solid rgba(35, 35, 35, 0.6);border-radius:0 0 3px 3px}:host .tag-area,wm-tag-input .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0;padding:0}:host .tag-area:focus,wm-tag-input .tag-area:focus{outline:none}:host .tag-area [role=option],wm-tag-input .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:#4a4a4a;background-color:rgba(3, 0, 0, 0.1);padding:0.5rem 0.625rem;margin-bottom:0.5rem;margin-right:0.25rem;margin-left:0.25rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight,wm-tag-input .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}@keyframes fadeIn{0%{background-color:rgba(3, 0, 0, 0.1)}50%{background-color:#c8dfcc}100%{background-color:rgba(3, 0, 0, 0.1)}}:host .tag-area [role=option].focused,wm-tag-input .tag-area [role=option].focused{background-color:#d1d1d1}:host .tag-area [role=option].locked,wm-tag-input .tag-area [role=option].locked{background-color:#6b6b6b;color:white}:host .tag-area [role=option] .icon,wm-tag-input .tag-area [role=option] .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area [role=option] .icon.remove-btn,wm-tag-input .tag-area [role=option] .icon.remove-btn{border:1px solid #575195;color:#575195;border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .icon.remove-btn:hover,wm-tag-input .tag-area [role=option] .icon.remove-btn:hover{color:white;background-color:#575195}:host .tag-area [role=option] .icon.remove-btn:before,wm-tag-input .tag-area [role=option] .icon.remove-btn: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 .tag-area [role=option] .icon.lock,wm-tag-input .tag-area [role=option] .icon.lock{color:white}:host .tag-area [role=option] .icon.lock:before,wm-tag-input .tag-area [role=option] .icon.lock: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:"\\f341"}:host input,wm-tag-input input{font-family:inherit;border:none;height:1.75rem;padding:0;margin-bottom:0.5rem;margin-right:0.25rem;padding-left:0.5rem;right:0px}:host input.hidden,wm-tag-input input.hidden{display:none}:host input:focus,wm-tag-input input:focus{outline:none}:host .dropdown-wrapper,wm-tag-input .dropdown-wrapper{margin:0;padding:0;-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:calc(100% + 2px);right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown,wm-tag-input .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open,wm-tag-input .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards,wm-tag-input .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div,wm-tag-input .dropdown-wrapper li,wm-tag-input .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:#fff;list-style:none;height:2.6875rem;white-space:pre}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn,wm-tag-input .dropdown-wrapper li[role=option],wm-tag-input .dropdown-wrapper li.add-new-btn,wm-tag-input .dropdown-wrapper div[role=option],wm-tag-input .dropdown-wrapper div.add-new-btn{cursor:pointer;color:#575195;font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper li[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper li.add-new-btn[aria-selected=true],wm-tag-input .dropdown-wrapper div[role=option][aria-selected=true],wm-tag-input .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:#6b6b6b;font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused,wm-tag-input .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li[role=option].focused,wm-tag-input .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper li.add-new-btn.focused,wm-tag-input .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div[role=option].focused,wm-tag-input .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),wm-tag-input .dropdown-wrapper div.add-new-btn.focused{outline:none;background:#f4f4f4}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text,wm-tag-input .dropdown-wrapper li.help-text,wm-tag-input .dropdown-wrapper div.help-text{color:#4a4a4a;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child),wm-tag-input .dropdown-wrapper li:not(:last-child),wm-tag-input .dropdown-wrapper div:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host .info-text,wm-tag-input .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper,wm-tag-input .table-wrapper{min-height:10rem;overflow:auto;margin-top:1.5rem}:host .table-wrapper #table,wm-tag-input .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths,wm-tag-input .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers,wm-tag-input .table-wrapper #table .headers{height:2.5rem;background-color:#eeedf4}:host .table-wrapper #table .headers th,wm-tag-input .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even),wm-tag-input .table-wrapper tr:nth-child(even){background-color:#fafafa}:host .table-wrapper tr.selected,wm-tag-input .table-wrapper tr.selected{background-color:rgba(25, 161, 169, 0.2);-webkit-box-shadow:inset 0 0 0 1px #19a1a9;box-shadow:inset 0 0 0 1px #19a1a9;font-weight:500}:host .table-wrapper tr.focused:not(.locked),:host .table-wrapper tr:hover:not(.locked),wm-tag-input .table-wrapper tr.focused:not(.locked),wm-tag-input .table-wrapper tr:hover:not(.locked){background-color:#e9e7ec;-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td,wm-tag-input .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked td:first-child .cell-content-wrapper:before,wm-tag-input .table-wrapper tr.locked td:first-child .cell-content-wrapper: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:"\\f33e";margin-right:0.5rem;color:#4a4a4a}:host .table-wrapper td,wm-tag-input .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused,wm-tag-input .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}:host .table-wrapper td .cell-content-wrapper.trunc,wm-tag-input .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td .description,wm-tag-input .table-wrapper td .description{display:none}:host .no-results,wm-tag-input .no-results{padding:1.25rem 1.5rem}:host .sr-only,wm-tag-input .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var TagInput=function(){function t(t){var e=this;registerInstance(this,t);this.wmTagInputChanged=createEvent(this,"wmTagInputChanged",7);this.uid=this.el.id?this.el.id:generateId();this.openUp=false;this.tooltipVisible=false;this.tagAreaInstructions=intl.formatMessage({id:"tagInput.tagAreaInstructions",defaultMessage:"tag selection. Press Backspace or Delete to remove a tag."});this.maxTagsReachedMessage=intl.formatMessage({id:"tagInput.maxTagsReached",defaultMessage:"No more tags can be added because the limit has been reached."});this.debouncedUpdate=debounce((function(){return forceUpdate(e.el)}),30);this.label=undefined;this.labelPosition="top";this.options="";this.selectedTags="";this.info=undefined;this.addNew=true;this.placeholder=undefined;this.characterLimit=50;this.maxTags=undefined;this.tagInputType="dropdown";this.colHeaders=undefined;this.colWidths=undefined;this.colWrap=undefined;this.focusedListItem=undefined;this.focusedTag=null;this.tablePosition={row:0,column:1};this.isExpanded=false;this.tagsList=csvToArray(this.selectedTags);this.optionsList=csvToArray(this.options);this.charCount=0;this.liveRegionMessage=""}Object.defineProperty(t.prototype,"focusedElement",{get:function(){return this.el.shadowRoot.activeElement},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"listItemEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll("li"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagEls",{get:function(){return this.tagAreaEl?Array.from(this.tagAreaEl.querySelectorAll(".tag")):[]},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagEls",{get:function(){return this.tagEls.filter((function(t){return!t.classList.contains("locked")}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"optionEls",{get:function(){return Array.from(this.dropdownEl.querySelectorAll(".option"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"wmRowEls",{get:function(){return Array.from(this.el.querySelectorAll("wm-tag-input-row"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"localRowEls",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("tr"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"filteredRows",{get:function(){var t=this;return this.wmRowEls.filter((function(e){var i=[e.col1,e.col2,e.col3,e.col4].join("").toLowerCase();return t.inputEl&&t.inputEl.value?i.includes(t.inputEl.value.toLowerCase()):true}))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"nonLockedTagsList",{get:function(){var t=this;var e=[];if(this.tagInputType==="table"){this.tagsList.forEach((function(i){var o=t.wmRowEls.filter((function(t){return i===t.id}))[0];if(!o.locked){e.push(i)}}))}else if(this.tagInputType==="dropdown"){e=this.tagsList}return e},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tagLimitReached",{get:function(){return!!(this.maxTags&&this.tagsList.length>=this.maxTags)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"noResultsMessage",{get:function(){return intl.formatMessage({id:"tagInput.noResults",defaultMessage:"No results match your search.",description:"Message displayed when a user's search returns empty."})},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"inputMinimumWidth",{get:function(){var t=getComputedStyle(this.inputEl);var e=getComputedStyle(this.tagEls[this.tagEls.length-1]);var i=[t.paddingLeft,t.paddingRight,t.marginLeft,t.marginRight,e.marginRight].reduce((function(t,e){return t+parseInt(e.replace("px",""))}),0);var o=Math.max(150,measureText(this.inputEl,this.placeholder).width+i);return o},enumerable:false,configurable:true});t.prototype.generateTagAddedMessage=function(t){return intl.formatMessage({id:"tagInput.tagAdded",defaultMessage:"{tagName} added.",description:"A confirmation for adding a tag."},{tagName:t})};t.prototype.generateTagAlreadyAddedMessage=function(t){return intl.formatMessage({id:"tagInput.tagAlreadyAdded",defaultMessage:"{tagName} has already been added.",description:"An alert for adding a tag that is already present."},{tagName:t})};t.prototype.generateTagCounterMessage=function(t,e){return intl.formatMessage({id:"tagInput.tagsAddedCounter",defaultMessage:"Tags added: {x, number}/{y, number}",description:"For the user to understand how close they are to the tag limit."},{x:t,y:e})};t.prototype.generateCharacterLimitLabel=function(t){return intl.formatMessage({id:"global.characterLimit",defaultMessage:"{limit, number} characters allowed.",description:"for screen readers"},{limit:t})};t.prototype.componentWillLoad=function(){var t=this;if(!this.placeholder){this.placeholder=this.createPlaceholderDefault(this.addNew,!!this.options)}if(!this.label){console.error("wm-tag-input must have a label property")}this.consolidateSelectedTags();this.el.focus=function(){var e=t.nonLockedTagEls[0];if(e){t.tagAreaEl.focus();t.focusTag(e)}else{t.inputEl.focus()}};var e=new ResizeObserver((function(){return t.debouncedUpdate()}));e.observe(this.el)};t.prototype.componentDidLoad=function(){this.tagEls.forEach((function(t){return t.classList.remove("highlight")}))};t.prototype.componentDidRender=function(){this.positionInput()};t.prototype.consolidateSelectedTags=function(){var t=this;this.tagsList.forEach((function(e){if(!t.includesCaseInsensitive(t.optionsList,e)){t.options+="".concat(t.options.length>0?",":"").concat(e)}}));this.optionsList=csvToArray(this.options)};t.prototype.createPlaceholderDefault=function(t,e){var i=intl.formatMessage({id:"tagInput.placeholderAddAndSearch",defaultMessage:"Add or search for a tag",description:"Placeholder text. Use imperative"});var o=intl.formatMessage({id:"tagInput.placeholderSearch",defaultMessage:"Search and select a tag",description:"Placeholder text. Use imperative"});var r=intl.formatMessage({id:"tagInput.placeholderAdd",defaultMessage:"Add a new tag",description:"Placeholder text. Use imperative"});var a="";if(t&&e){a=i}else if(!t&&e){a=o}else if(t){a=r}return a};t.prototype.reflectSelectedTags=function(t,e){var i=this;var o=t.length>e.length;var r="";var a=this.tagsList;if(o){r=t.filter((function(t){return!e.includes(t)}))[0]}else{r=e.filter((function(e){return!t.includes(e)}))[0]}if(this.tagInputType==="table"){r=this.wmRowEls.filter((function(t){return t.id===r}))[0];a=this.tagsList.map((function(t){return i.el.querySelector("#".concat(t))}))}this.selectedTags=this.listToCSV(this.tagsList);var n={value:a,tagChanged:r};this.wmTagInputChanged.emit(n)};t.prototype.handleRowUpdate=function(){forceUpdate(this.el)};t.prototype.closeIfNotElOrChild=function(t){var e=t.target!==this.el&&!this.el.shadowRoot.contains(t.target);if(this.tagInputType==="dropdown"&&e&&this.isExpanded){this.closeDropdown()}};t.prototype.dismissTooltip=function(){if(this.tooltipVisible){hideTooltip();this.tooltipVisible=false}};t.prototype.handleInputKeyDown=function(t){if(/^.$/.test(t.key)&&this.inputEl.value.length>=this.characterLimit){this.announceCharacterLimitWarning(this.inputEl.value.length,this.characterLimit)}t.stopPropagation();switch(t.key){case"Enter":case",":t.preventDefault();this.handleInputEnter();break;case"ArrowDown":t.preventDefault();this.handleInputArrowDown();break;case"ArrowUp":t.preventDefault();this.handleInputArrowUp();break;case"ArrowLeft":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveLeftCell()}break;case"ArrowRight":t.preventDefault();if(this.tagInputType==="table"&&this.tablePosition.row){this.moveRightCell()}break;case"Escape":if(this.tagInputType==="dropdown"&&this.isExpanded){this.closeDropdown()}break;case"ArrowLeft":case"Backspace":this.handleInputBackspace();break}};t.prototype.handleInputFocus=function(){if(this.tagInputType==="dropdown"){this.openDropdown();this.clearListItemFocus()}forceUpdate(this.el)};t.prototype.handleInputChanged=function(t){this.charCount=t.length;if(this.tagInputType==="dropdown"){this.clearListItemFocus();if(this.charCount>=this.characterLimit-5){this.announceCharacterLimitWarning(this.charCount,this.characterLimit)}if(!this.isExpanded){this.openDropdown()}}else if(this.tagInputType==="table"){this.clearCellFocus()}this.announceExistingOptions()};t.prototype.handleInputEnter=function(){if(this.tagInputType==="dropdown"){if(this.focusedListItem){this.handleListItemClick(this.focusedListItem)}else{this.submitInput(this.addNew,this.inputEl.value.trim())}}else if(this.tagInputType==="table"&&this.tablePosition.row>0){this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id)}};t.prototype.submitInput=function(t,e){var i=e.match(/\S/);if(t&&i){this.addTag(e);this.optionsList=this.addOption(e);this.resetInput()}};t.prototype.handleInputArrowDown=function(){if(this.tagInputType==="table"){this.moveDownRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveDownListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputArrowUp=function(){if(this.tagInputType==="table"){this.moveUpRow()}else if(this.tagInputType==="dropdown"&&this.isExpanded){this.moveUpListItem()}else if(this.tagInputType==="dropdown"){this.openDropdown()}};t.prototype.handleInputBackspace=function(){var t=this;if(this.inputEl.value===""&&this.tagsList.length>0){window.requestAnimationFrame((function(){if(t.nonLockedTagsList.length>0){t.tagAreaEl.focus();t.focusTag(t.tagEls[t.tagEls.length-1])}}))}};t.prototype.handleListItemKeyDown=function(t){var e=t.target;switch(t.key){case"Enter":case" ":t.preventDefault();e.click();break;case"ArrowDown":t.preventDefault();this.moveDownListItem();break;case"ArrowUp":t.preventDefault();this.moveUpListItem();break;case"Escape":if(this.focusedElement!==this.inputEl){this.inputEl.focus()}else if(this.tagInputType==="dropdown"){this.closeDropdown()}break}};t.prototype.handleListItemClick=function(t){var e=t.dataset.option.trim()||"";if(this.includesCaseInsensitive(this.tagsList,e)){this.announce(this.generateTagAlreadyAddedMessage(e))}else{this.resetInput();this.addTag(e);this.optionsList=this.addOption(e);this.focusedListItem=null}};t.prototype.handleTableRowClick=function(t){var e=this.el.querySelector("#".concat(t));var i=e.locked;if(!i){if(this.includesCaseInsensitive(this.tagsList,t)){this.removeTag(t)}else if(!this.tagLimitReached){this.addTag(t);this.resetInput()}}};t.prototype.handleTagAreaKeyDown=function(t){switch(t.key){case"ArrowLeft":case"ArrowUp":t.preventDefault();this.moveLeftTag();break;case"ArrowRight":case"ArrowDown":t.preventDefault();this.moveRightTag();break;case"Backspace":case"Delete":this.handleTagAreaDelete();break}};t.prototype.handleTagAreaDelete=function(){var t=this.focusedTag&&this.focusedTag.classList.contains("locked");if(this.focusedTag&&this.focusedTag.dataset.tag&&!t){this.removeTag(this.focusedTag.dataset.tag);if(this.nonLockedTagsList.length===0){this.inputEl.focus()}else if(this.focusedTag===this.tagEls[this.tagEls.length-1]){this.focusedTag=this.tagEls[this.tagEls.length-2];this.focusTag(this.focusedTag)}}};t.prototype.handleBlur=function(t,e){var i=t.relatedTarget!==e&&!this.el.shadowRoot.contains(t.relatedTarget);this.dismissTooltip();this.clearCellFocus();if(i){this.fieldWrapperEl.classList.remove("focused");if(this.tagInputType==="dropdown"){this.closeDropdown()}}};t.prototype.handleCellMouseEnter=function(t){var e=t.target;var i=e.querySelector(".cell-content-wrapper");var o=i.scrollWidth>i.clientWidth;if(o){showTooltip("bottom",e,e.innerText);this.tooltipVisible=true}};t.prototype.handleTagAreaFocus=function(){if(this.tagInputType==="dropdown"){this.closeDropdown()}var t=this.nonLockedTagEls[0];t&&this.focusTag(t)};t.prototype.handleRemoveButtonClick=function(t){this.moveLeftTag();this.removeTag(t)};t.prototype.moveDownListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[0];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.nextElementSibling){this.focusListItem(this.focusedListItem.nextElementSibling)}else{this.focusListItem(t)}}};t.prototype.moveUpListItem=function(){if(this.listItemEls.length>0){var t=this.listItemEls[this.listItemEls.length-1];if(!this.focusedListItem){this.focusListItem(t)}else if(this.focusedListItem.previousElementSibling){this.focusListItem(this.focusedListItem.previousElementSibling)}else{this.clearListItemFocus()}}};t.prototype.moveDownRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=1}else if(this.tablePosition.row===this.filteredRows.length){this.tablePosition.row=1}else{this.tablePosition.row++}var t=this.wmRowEls[this.tablePosition.row-1];if(t.locked){this.moveDownRow()}else{this.focusCell(this.tablePosition)}}};t.prototype.moveUpRow=function(){if(this.filteredRows.length>0){if(this.tablePosition.row===0){this.tablePosition.row=this.filteredRows.length}else if(this.tablePosition.row===1){this.tablePosition.row=0}else{this.tablePosition.row--}var t=this.wmRowEls[this.tablePosition.row-1];if(t&&t.locked){this.moveUpRow()}else if(t){this.focusCell(this.tablePosition)}else{this.clearCellFocus()}}};t.prototype.moveLeftCell=function(){if(this.tablePosition.column!=1){this.tablePosition.column--;this.focusCell(this.tablePosition)}};t.prototype.moveRightCell=function(){var t=csvToArray(this.colHeaders).length;if(this.tablePosition.column<t){this.tablePosition.column++;this.focusCell(this.tablePosition)}};t.prototype.moveLeftTag=function(){var t=this.tagEls[this.tagEls.length-1];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.previousElementSibling)){this.focusedTag=this.focusedTag.previousElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")&&this.nonLockedTagEls.length>0){this.moveLeftTag()}else{this.focusTag(this.focusedTag)}};t.prototype.moveRightTag=function(){var t=this.tagEls[0];if(this.focusedTag&&this.tagEls.includes(this.focusedTag.nextElementSibling)){this.focusedTag=this.focusedTag.nextElementSibling}else{this.focusedTag=t}if(this.focusedTag.classList.contains("locked")){this.moveRightTag()}else{this.focusTag(this.focusedTag)}};t.prototype.addOption=function(t){var e=this.optionsList;var i=this.includesCaseInsensitive(this.optionsList,t);if(!i){e=e.concat(t)}return e};t.prototype.removeOption=function(t){this.optionsList=this.filterCaseInsensitive(this.optionsList,t)};t.prototype.addTag=function(t){var e=this.tagsList;var i=this.includesCaseInsensitive(this.tagsList,t);var o=this.optionsList.filter((function(e){return e.toLowerCase()===t.toLowerCase()}))[0];if(!i){var r=t;if(this.tagInputType==="table"){var a=this.el.querySelector("#".concat(t));r=a.col1}this.announce(this.generateTagAddedMessage(r));this.tagsList=e.concat(o||t);if(this.tagLimitReached){this.tagAreaEl.focus()}}};t.prototype.removeTag=function(t){var e=t;if(this.tagInputType==="table"){var i=this.el.querySelector("#".concat(t));e=i.col1}var o=intl.formatMessage({id:"tagInput.tagRemoved",defaultMessage:"{tag} removed"},{tag:e});this.announce(o);this.tagsList=this.filterCaseInsensitive(this.tagsList,t);if(this.tagInputType==="dropdown"){var r=csvToArray(this.options);if(this.includesCaseInsensitive(this.optionsList,t)&&!this.includesCaseInsensitive(r,t)){this.removeOption(t)}}};t.prototype.focusListItem=function(t){this.focusedListItem=t;this.inputEl.setAttribute("aria-activedescendant",this.focusedListItem.id);t.scrollIntoView({block:"nearest"})};t.prototype.focusTag=function(t){if(t.classList.contains("locked")){this.focusedTag=null;this.tagAreaEl.setAttribute("aria-activedescendant","")}else{this.focusedTag=t;this.tagAreaEl.setAttribute("aria-activedescendant",this.focusedTag.id)}};t.prototype.focusCell=function(t){this.clearCellFocus(false);if(t.row){var e=this.localRowEls[t.row];var i=e.querySelectorAll("td");var o=i[t.column-1];var r=o.querySelector(".cell-content-wrapper");var a=r.scrollWidth>r.clientWidth;e.classList.add("focused");o.classList.add("focused");o.scrollIntoView({block:"nearest"});this.inputEl.setAttribute("aria-activedescendant",o.id);this.dismissTooltip();if(a){showTooltip("bottom",o,o.innerText);this.tooltipVisible=true}}};t.prototype.clearTagFocus=function(){this.tagAreaEl.setAttribute("aria-activedescendant","");this.focusedTag=null};t.prototype.clearCellFocus=function(t){if(t===void 0){t=true}this.inputEl.setAttribute("aria-activedescendant","");if(t){this.tablePosition={row:0,column:1}}this.localRowEls.forEach((function(t){t.classList.remove("focused");t.querySelectorAll("td").forEach((function(t){t.classList.remove("focused")}))}))};t.prototype.openDropdown=function(){this.openUp=shouldOpenUp(this.el,this.dropdownEl,this.el.clientHeight,-2);this.isExpanded=true};t.prototype.closeDropdown=function(){this.clearListItemFocus();this.isExpanded=false};t.prototype.clearListItemFocus=function(){this.focusedListItem=null;this.inputEl.setAttribute("aria-activedescendant","");this.listItemEls.forEach((function(t){t.classList.remove("focused")}))};t.prototype.resetInput=function(){this.charCount=0;this.inputEl.value=""};t.prototype.announce=function(t){if(this.liveRegionEl.textContent===t){t+=" "}this.liveRegionMessage=t};t.prototype.announceExistingOptions=function(){var t=this;window.requestAnimationFrame((function(){var e=0;if(t.tagInputType==="dropdown"){e=t.optionEls.length}else if(t.tagInputType==="table"){e=t.filteredRows.length}var i=intl.formatMessage({id:"tagInput.existingOptions",defaultMessage:"{num, plural, one {1 existing option.} other {# existing options.}}"},{num:e});t.announce(i)}))};t.prototype.announceCharacterLimitWarning=function(t,e){var i=intl.formatMessage({id:"global.charactersEntered",defaultMessage:"{x, number} of {y, number} characters entered.",description:"for screen readers"},{x:t,y:e});var o=intl.formatMessage({id:"global.characterLimitReached",defaultMessage:"No additional characters will be entered.",description:"for screen readers"});this.announce("".concat(i).concat(t>=e?" "+o:""))};t.prototype.positionInput=function(){var t=this.tagEls[this.tagEls.length-1];this.inputEl.style.position="static";this.inputEl.style.width="100%";if(t){var e=this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right;if(e>=this.inputMinimumWidth){this.inputEl.style.position="absolute";this.inputEl.style.top=t.offsetTop.toString()+"px";this.inputEl.style.width=(this.tagAreaEl.getBoundingClientRect().right-t.getBoundingClientRect().right-8).toString()+"px"}}};t.prototype.listToCSV=function(t){return t.join(",")};t.prototype.includesCaseInsensitive=function(t,e){var i=t.map((function(t){return t.toLowerCase()}));return i.includes(e.toLowerCase())};t.prototype.filterCaseInsensitive=function(t,e){return t.filter((function(t){return t.toLowerCase()!==e.toLowerCase()}))};t.prototype.sortCaseInsensitive=function(t){return t.sort((function(t,e){t=t.toLowerCase();e=e.toLowerCase();return t>e?1:t<e?-1:0}))};t.prototype.renderTags=function(){var t=this;var e=[];var i=[];this.tagsList.forEach((function(o,r){var a="tag".concat(r+1);var n="";var s=false;if(t.tagInputType==="dropdown"){n=o}else if(t.tagInputType==="table"){var l=t.el.querySelector("#".concat(o));n=l?l.col1:"";s=l?l.locked:false}var p=s?e:i;p.push(h("li",{id:a,class:"tag highlight ".concat(t.focusedTag&&t.focusedTag.id===a?"focused":""," ").concat(s?"locked":""),"data-tag":o,role:"option"},n,s?h("div",{class:"icon lock"}):h("button",{class:"icon remove-btn",tabIndex:-1,onClick:function(){return t.handleRemoveButtonClick(o)}})))}));return __spreadArray(__spreadArray([],e,true),i,true)};t.prototype.renderDropdown=function(){var t=this;return h("div",{class:"dropdown-wrapper ".concat(this.isExpanded?"open":""," ").concat(this.openUp?"upwards":""),ref:function(e){return t.dropdownEl=e}},h("div",{id:"help-text",class:"help-text"},this.renderHelpText()),h("ul",{class:"dropdown",id:"dropdown",role:"listbox","aria-multiselectable":"true","aria-expanded":this.isExpanded?"true":false,"aria-label":this.label,tabindex:-1},this.inputEl&&this.renderAddNewButton(),this.renderListItems(this.optionsList)))};t.prototype.renderListItems=function(t){var e=this;t=this.sortCaseInsensitive(t);if(this.inputEl&&this.inputEl.value){t=this.optionsList.filter((function(t){return t.toLowerCase().includes(e.inputEl.value.toLowerCase())}))}return t.map((function(t,i){var o="option".concat(i+1);var r=e.focusedListItem&&e.focusedListItem.id===o;var a=e.includesCaseInsensitive(e.tagsList,t);return h("li",{class:"option ".concat(r?"focused":""),role:"option",id:o,"data-option":t,"aria-selected":a?"true":"false","aria-disabled":a?"true":"false",onKeyDown:function(t){return e.handleListItemKeyDown(t)},onBlur:function(t){return e.handleBlur(t,e.el)},onClick:function(t){return e.handleListItemClick(t.target)}},t)}))};t.prototype.renderAddNewButton=function(){var t=this;var e=this.inputEl.value.match(/\S/);var i=this.includesCaseInsensitive(this.optionsList,this.inputEl.value.trim());if(this.addNew&&e&&!i){var o="add-new-btn";var r=this.focusedListItem&&this.focusedListItem.id===o;return h("li",{role:"option",class:"add-new-btn ".concat(r?"focused":""),id:o,"data-option":this.inputEl.value,onKeyDown:function(e){return t.handleListItemKeyDown(e)},onBlur:function(e){return t.handleBlur(e,t.el)},onClick:function(e){return t.handleListItemClick(e.target)},tabIndex:r?0:-1},'Add "'.concat(this.inputEl.value.trim(),'"'))}else return""};t.prototype.renderHelpText=function(){var t=intl.formatMessage({id:"tagInput.helpTextCanSelect",defaultMessage:"Search and select a tag.",description:"Placeholder text. Use imperative"});var e=intl.formatMessage({id:"tagInput.helpTextEditable",defaultMessage:"Press the Enter or Comma key to add a new tag.",description:"Placeholder text. Use imperative"});var i="";if(this.optionsList.length>0){i+=t}if(this.addNew){i+=" "+e}return i};t.prototype.renderTagCounter=function(){if(this.maxTags){return h("div",{class:"lower-row"},h("div",{id:"max-tags"},this.generateTagCounterMessage(this.tagsList.length,this.maxTags),this.tagLimitReached&&" - ".concat(this.maxTagsReachedMessage)))}};t.prototype.renderTable=function(){var t=this;return h("div",{class:"table-wrapper",onScroll:function(){return t.dismissTooltip()}},h("table",{id:"table",role:"grid",class:"".concat(this.colWidths?"fixed-widths":""),"aria-label":this.label,"aria-multiselectable":"true"},this.renderTableHeaders(),this.filteredRows.length?this.renderTableRows():h("div",{class:"no-results"},this.noResultsMessage)))};t.prototype.renderTableHeaders=function(){var t=this;return h("tr",{class:"headers",role:"row"},csvToArray(this.colHeaders).map((function(e,i){var o="wrap";if(t.colWrap&&csvToArray(t.colWrap)[i]){o=csvToArray(t.colWrap)[i]}return h("th",{class:"header-cell ".concat(o),role:"columnheader",width:t.colWidths?csvToArray(t.colWidths)[i]:""},e)})))};t.prototype.renderTableRows=function(){var t=this;return this.filteredRows.map((function(e){var i=t.includesCaseInsensitive(t.tagsList,e.id);return h("tr",{id:e.id,class:"".concat(e.locked?"locked":""," ").concat(i?"selected":""),role:"row",onClick:function(){return t.handleTableRowClick(e.id)}},t.renderTableCells(e))}))};t.prototype.renderTableCells=function(t){var e=this;var i=[t.col1,t.col2,t.col3,t.col4].filter((function(t){return!!t}));var o=this.includesCaseInsensitive(this.tagsList,t.id);return i.map((function(i,r){var a="".concat(t.id,"-col").concat(r+1);var n="wrap";if(e.colWrap&&csvToArray(e.colWrap)[r]){n=csvToArray(e.colWrap)[r]}return h("td",{id:a,role:"gridcell","aria-describedby":"".concat(a,"-description"),"aria-selected":o.toString(),onMouseEnter:function(t){return e.handleCellMouseEnter(t)},onMouseLeave:function(){return e.dismissTooltip()}},h("div",{class:"cell-content-wrapper ".concat(n)},i),h("div",{class:"description",id:"".concat(a,"-description")},t.locked?"locked":""))}))};t.prototype.render=function(){var t=this;return h(Host,{id:this.uid},h("div",{class:"wrapper label-".concat(this.labelPosition)},h("div",{class:"label-wrapper"},h("label",{class:"label",htmlFor:"input".concat(this.uid)},this.label)),h("div",{class:"field-wrapper ".concat(this.focusedElement?"focused":""),ref:function(e){return t.fieldWrapperEl=e}},h("div",{class:"upper-row"},h("div",{class:"tags-and-input-wrapper"},this.tagsList.length>0&&h("ul",{ref:function(e){return t.tagAreaEl=e},class:"tag-area",role:"listbox","aria-activedescendant":"","aria-orientation":"horizontal","aria-label":"".concat(this.label," ").concat(this.tagsList.length>0?this.tagAreaInstructions:""),tabindex:this.nonLockedTagsList.length>0?0:-1,"aria-describedby":"info max-tags",onFocus:function(){return t.handleTagAreaFocus()},onBlur:function(e){t.clearTagFocus();t.handleBlur(e,t.el)},onKeyDown:function(e){return t.handleTagAreaKeyDown(e)}},this.renderTags()),h("input",{id:"input".concat(this.uid),class:this.tagLimitReached?"hidden":"",role:"combobox",ref:function(e){return t.inputEl=e},autocomplete:"off","aria-controls":this.tagInputType,"aria-describedby":"help-text","aria-label":"".concat(this.label," ").concat(this.tagInputType==="dropdown"?this.generateCharacterLimitLabel(this.characterLimit):""),"aria-expanded":this.tagInputType==="dropdown"?this.isExpanded.toString():null,placeholder:this.placeholder,maxLength:this.tagInputType==="dropdown"?this.characterLimit:undefined,onInput:function(){return t.handleInputChanged(t.inputEl.value)},onBlur:function(e){t.handleBlur(e,t.el)},onFocus:function(){return t.handleInputFocus()},onKeyDown:function(e){return t.handleInputKeyDown(e)}})),this.tagInputType==="dropdown"&&h("div",{class:"character-count"},this.charCount,"/",this.characterLimit)),this.renderTagCounter(),this.tagInputType==="dropdown"&&this.renderDropdown()),this.info?h("div",{id:"info",class:"info-text"},this.info):"",h("div",{class:"sr-only","aria-live":"assertive",ref:function(e){return t.liveRegionEl=e},"aria-atomic":"true"},this.liveRegionMessage),this.tagInputType==="table"&&this.renderTable()))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{tagsList:["reflectSelectedTags"]}},enumerable:false,configurable:true});return t}();TagInput.style=wmTagInputCss;export{TagInput as wm_tag_input};
 //# sourceMappingURL=wm-tag-input.entry.js.map