@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/esm-es5/wm-option_2.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{i as intl,d as debounce,g as generateId,m as shouldOpenUp,w as getTextDir}from"./functions-bb1309d0.js";var wmOptionCss=':host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}:host .sr-only,wm-option .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}.checkbox: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:"\\f131";display:inline;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:"\\f132"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hidden),wm-option.hidden,:host(.filtered-out),wm-option.filtered-out{display:none}:host(.duplicate.last),wm-option.duplicate.last{border-bottom:12px solid rgba(46, 27, 70, 0.05)}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):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;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}';var Option=function(){function e(e){registerInstance(this,e);this.wmOptionSelected=createEvent(this,"wmOptionSelected",7);this.wmKeyUpPressed=createEvent(this,"wmKeyUpPressed",7);this.wmKeyDownPressed=createEvent(this,"wmKeyDownPressed",7);this.wmEscKeyPressed=createEvent(this,"wmEscKeyPressed",7);this.wmHomeKeyPressed=createEvent(this,"wmHomeKeyPressed",7);this.wmEndKeyPressed=createEvent(this,"wmEndKeyPressed",7);this.wmEnterKeyPressed=createEvent(this,"wmEnterKeyPressed",7);this.wmLetterPressed=createEvent(this,"wmLetterPressed",7);this.wmOptionBlurred=createEvent(this,"wmOptionBlurred",7);this.value=undefined;this.subinfo=undefined;this.disabled=false;this.selected=false;this.focused=false;this.searchTerm=""}Object.defineProperty(e.prototype,"hostClasses",{get:function(){var e=[];if(this.subinfo){e.push("hassubinfo")}if(this.parentSelectEl.multiple){e.push("multi-option")}if(!this.el.textContent.toLowerCase().includes(this.searchTerm)){e.push("filtered-out")}return e.join(" ")},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"parentSelectEl",{get:function(){var e;return((e=this.el.parentElement)===null||e===void 0?void 0:e.nodeName)!=="WM-SELECT"?this.el.getRootNode().host:this.el.parentElement},enumerable:false,configurable:true});e.prototype.handleKeydown=function(e){switch(e.key){case"ArrowUp":e.preventDefault();this.wmKeyUpPressed.emit(this.el);break;case"ArrowDown":e.preventDefault();this.wmKeyDownPressed.emit(this.el);break;case"Enter":e.preventDefault();if(!this.disabled){this.el.click();this.wmEnterKeyPressed.emit(this.el)}break;case" ":e.preventDefault();this.el.click();break;case"Escape":e.preventDefault();e.stopPropagation();this.wmEscKeyPressed.emit();break;case"Home":e.preventDefault();this.wmHomeKeyPressed.emit();break;case"End":e.preventDefault();this.wmEndKeyPressed.emit();break;default:if(e.key.length===1){this.wmLetterPressed.emit(e.key)}}};e.prototype.handleSelection=function(){if(!this.disabled){this.wmOptionSelected.emit(this.el)}};e.prototype.handleBlur=function(e){this.wmOptionBlurred.emit({relatedTarget:e.relatedTarget})};e.prototype.syncAriaSelected=function(){this.selected?this.el.setAttribute("aria-selected","true"):this.el.removeAttribute("aria-selected")};e.prototype.syncAriaDisabled=function(){this.disabled?this.el.setAttribute("aria-disabled","true"):this.el.removeAttribute("aria-disabled")};e.prototype.updateDisabledOnClick=function(){if(this.disabled&&this.el.onclick){this.onClickFunc=this.el.onclick;this.el.onclick=null}else if(!this.disabled&&this.onClickFunc){this.el.onclick=this.onClickFunc}};e.prototype.handleSearch=function(e){this.searchTerm=e.detail.searchTerm.toLowerCase();if(this.searchTerm){var t=new RegExp("".concat(this.searchTerm),"gi");var i=this.el.textContent.replace(t,(function(e){return"<strong>".concat(e,"</strong>")}));this.textEl.innerHTML=i}else{this.textEl.innerHTML=this.el.textContent}};e.prototype.componentWillLoad=function(){var e=this;this.syncAriaSelected();this.syncAriaDisabled();this.updateDisabledOnClick();this.parentSelectEl.addEventListener("wmSelectSearchChanged",(function(t){return e.handleSearch(t)}))};e.prototype.render=function(){var e=this;return h(Host,{role:"option",tabindex:this.focused?0:-1,class:this.hostClasses},h("div",{class:"option-wrapper ".concat(this.parentSelectEl.multiple?"checkbox":"")},h("span",{"aria-hidden":"true",ref:function(t){return e.textEl=t}},this.el.textContent),h("span",{class:"sr-only"},this.el.textContent)),h("div",{class:"subinfo"},this.subinfo))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selected:["syncAriaSelected"],disabled:["syncAriaDisabled","updateDisabledOnClick"]}},enumerable:false,configurable:true});return e}();Option.style=wmOptionCss;var wmSelectCss=':host{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}:host .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}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.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}.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}.wrapper.invalid .label{color:#c0392b}.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] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .button-wrapper .displayedoption: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:"\\f140";position:absolute;right:0.5625rem;pointer-events:none}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-webkit-overflow-scrolling:touch;-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:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;top:100%;left:0}.options-wrapper{max-height:12.5rem;overflow:auto}.select-all{width:100%;cursor:pointer;padding:1.25rem;border:none;margin:0;border-bottom:2px solid rgba(46, 27, 70, 0.05);background:#fff;font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:#575195;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-all:hover,.select-all:focus{outline:none;background:#f4f4f4}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid rgba(46, 27, 70, 0.05);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #4a4a4a}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-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}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f349";color:#6b6b6b;font-size:0.875rem}.search-results-message{padding:1.25rem;color:#4a4a4a;font-size:0.875rem;font-style:italic}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}';var Select=function(){function e(e){var t=this;registerInstance(this,e);this.wmSelectDidLoad=createEvent(this,"wmSelectDidLoad",7);this.wmSelectBlurred=createEvent(this,"wmSelectBlurred",7);this.wmSelectChanged=createEvent(this,"wmSelectChanged",7);this.wmComponentBlurred=createEvent(this,"wmComponentBlurred",7);this.wmSelectSearchChanged=createEvent(this,"wmSelectSearchChanged",7);this.requiredMessage=intl.formatMessage({id:"global.requiredField",defaultMessage:"required field"});this.selectAllMessage=intl.formatMessage({id:"select.selectAll",defaultMessage:"Select All"});this.deselectAllMessage=intl.formatMessage({id:"select.deselectAll",defaultMessage:"Deselect All"});this.allOptionsSelectedMessage=intl.formatMessage({id:"select.allOptionsSelected",defaultMessage:"All options selected"});this.allOptionsDeselectedMessage=intl.formatMessage({id:"select.allOptionsDeselected",defaultMessage:"All options deselected"});this.keysSoFar="";this.searchIndex=0;this.openUp=false;this.overflowCount=0;this.displayedOptions=[];this.debouncedClearKeysSoFar=debounce((function(){t.keysSoFar=""}),500);this.debouncedSearch=debounce((function(){t.wmSelectSearchChanged.emit({searchTerm:t.searchTerm});if(t.filteredOptions.length){t.announce(t.resultsFoundMessage)}else{t.announce(t.noResultsFoundMessage)}}),150);this.disabled=false;this.invalid=false;this.maxHeight=undefined;this.label=undefined;this.labelPosition="top";this.requiredField=false;this.errorMessage="";this.multiple=false;this.search=false;this.selectAll=false;this.placeholder=intl.formatMessage({id:"select.multiPlaceholder",defaultMessage:"Make a selection",description:"Placeholder text. Use imperative"});this.searchPlaceholder=intl.formatMessage({id:"select.searchPlaceholder",defaultMessage:"Search",description:"Placeholder text. Use imperative"});this.allSelectedMessage=intl.formatMessage({id:"select.allSelected",defaultMessage:"All selected",description:"Text displayed when all options are selected"});this.isTabbing=false;this.isExpanded=false;this.announcement=""}Object.defineProperty(e.prototype,"childOptions",{get:function(){return Array.from(this.el.querySelectorAll("wm-option"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"duplicateOptions",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"allOptionEls",{get:function(){return this.duplicateOptions.concat(this.childOptions)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"visibleOptionEls",{get:function(){return this.allOptionEls.filter((function(e){return!e.classList.contains("hidden")&&!e.classList.contains("filtered-out")}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"searchTerm",{get:function(){return this.searchFieldEl?this.searchFieldEl.value:""},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"filteredOptions",{get:function(){var e=this;return this.childOptions.filter((function(t){var i;return(i=t.textContent)===null||i===void 0?void 0:i.toLowerCase().includes(e.searchTerm.toLowerCase())}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"selectedOptions",{get:function(){return Array.from(this.el.querySelectorAll("wm-option")).filter((function(e){return e.selected}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"allSelected",{get:function(){return this.childOptions.every((function(e){return e.selected}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"resultsFoundMessage",{get:function(){return intl.formatMessage({id:"select.searchResultsFound",defaultMessage:"{numResults, plural, one {1 option found} other {# options found}}",description:"The message read by the screen reader, indicating how many results a search returned"},{numResults:this.filteredOptions.length})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"noResultsFoundMessage",{get:function(){return intl.formatMessage({id:"select.noSearchResults",defaultMessage:"No results found. Please try your search again.",description:"The message displayed when no options pass the search filter"})},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleOptionSelection=function(e){var t=e.detail;this.focusOption(t);if(!this.multiple){if(!t.selected){this.selectOption(t);var i={changedOption:t,selectedOptions:[t]};this.wmSelectChanged.emit(i);var o=new CustomEvent("change",{detail:i});this.el.dispatchEvent(o)}this.close()}else{this.selectOption(t);var n=t.classList.contains("duplicate");var s=n?this.findCorrespondingOption(t):t;var r=this.childOptions.filter((function(e){return e.selected}));var i={changedOption:s,selectedOptions:r};this.wmSelectChanged.emit(i);var o=new CustomEvent("change",{detail:i});this.el.dispatchEvent(o)}};e.prototype.handleChildEnter=function(){this.close()};e.prototype.handleChildUp=function(e){this.moveUp(e.detail)};e.prototype.handleChildDown=function(e){this.moveDown(e.detail)};e.prototype.moveToFirstOption=function(){this.focusOption(this.visibleOptionEls[0])};e.prototype.moveToLastOption=function(){this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length-1])};e.prototype.closePopupOnEscape=function(){this.close()};e.prototype.handleOptionBlur=function(e){if(!this.isElOrChild(e.detail.relatedTarget)){var t=new CustomEvent("blur");t.relatedTarget=e.detail.relatedTarget;this.el.dispatchEvent(t)}};e.prototype.handleClick=function(e){if(!this.isElOrChild(e.target)){this.close()}};e.prototype.handleSelectAllClick=function(){this.allSelected?this.deselectAllOptions():this.selectAllOptions()};e.prototype.selectAllOptions=function(){this.allOptionEls.forEach((function(e){return e.selected=true}));this.setSelectAllButton();this.setButtonText();var e={changedOption:null,selectedOptions:this.childOptions};this.wmSelectChanged.emit(e)};e.prototype.deselectAllOptions=function(){this.allOptionEls.forEach((function(e){return e.selected=false}));this.setSelectAllButton();this.setButtonText();var e={changedOption:null,selectedOptions:[]};this.wmSelectChanged.emit(e)};e.prototype.handleButtonBlur=function(e){if(this.isElOrChild(e.relatedTarget)){e.stopPropagation()}};e.prototype.handleSearchFieldBlur=function(e){this.searchFieldWrapperEl.classList.remove("focus");if(this.isElOrChild(e.relatedTarget)){e.stopPropagation()}};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":if(this.isExpanded===false){e.preventDefault();this.open("next")}break;case"ArrowUp":if(this.isExpanded===false){e.preventDefault();this.open("previous")}break}};e.prototype.componentWillLoad=function(){var e=this;if(!this.label){console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).")}this.uid=this.el.id?this.el.id:generateId();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(this.selectedOptions.length>0){this.selectedOptions.forEach((function(t){e.displayedOptions.push(t)}))}else if(!this.multiple){this.selectOption(this.allOptionEls[0])}};e.prototype.componentDidLoad=function(){this.wmSelectDidLoad.emit();this.dropdownEl.classList.add("hidden");forceUpdate(this.el);if(this.maxHeight){this.listboxEl.style.maxHeight=this.maxHeight}if(this.multiple){this.updateOptionVisibility()}this.setButtonText()};e.prototype.componentWillUpdate=function(){if(this.multiple){var e=this.visibleOptionEls.filter((function(e){return e.classList.contains("duplicate")}));e.forEach((function(t,i){if(i===e.length-1){t.classList.add("last")}else{t.classList.remove("last")}}))}};e.prototype.moveUp=function(e){var t=this.visibleOptionEls;if(this.selectAllEl){t.unshift(this.selectAllEl)}if(this.searchFieldEl){t.unshift(this.searchFieldEl)}var i=t[t.indexOf(e)-1]||t[t.length-1];if(i){this.focusOption(i)}};e.prototype.moveDown=function(e){var t=this.visibleOptionEls;if(this.selectAllEl){t.unshift(this.selectAllEl)}if(this.searchFieldEl){t.unshift(this.searchFieldEl)}var i=t[t.indexOf(e)+1]||t[0];if(i){this.focusOption(i)}};e.prototype.open=function(e){var t=this;if(!this.disabled){var i=this.el.clientHeight;var o=this.buttonEl.clientHeight;this.openUp=shouldOpenUp(this.el,this.dropdownEl,i,o);this.isExpanded=true;this.dropdownEl.classList.remove("hidden");window.requestAnimationFrame((function(){switch(e){case"next":if(t.search){t.searchFieldEl.focus();t.listboxEl.scrollTop=0}else{t.moveDown(t.visibleOptionEls.filter((function(e){return e.selected})).slice(-1)[0])}break;case"previous":if(t.search){t.focusOption(t.visibleOptionEls[t.visibleOptionEls.length-1])}else{t.moveUp(t.visibleOptionEls.filter((function(e){return e.selected}))[0])}break;default:if(t.search){t.searchFieldEl.focus();t.listboxEl.scrollTop=0}else if(t.selectedOptions.length>0){t.focusOption(t.visibleOptionEls.filter((function(e){return e.selected}))[0])}else{t.focusOption(t.visibleOptionEls[0])}break}}))}};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}if(this.isExpanded){this.isExpanded=false;this.allOptionEls.map((function(e){return e.focused=false}));window.setTimeout((function(){t.dropdownEl.classList.add("hidden");if(t.multiple){t.updateOptionVisibility()}if(t.search){t.searchFieldEl.value="";t.wmSelectSearchChanged.emit({searchTerm:t.searchTerm})}if(e){t.buttonEl.focus()}}),150)}};e.prototype.updateOptionVisibility=function(){var e=this;this.childOptions.forEach((function(t,i){var o=e.duplicateOptions[i];if(t.selected){t.classList.add("hidden");o.classList.remove("hidden")}else{t.classList.remove("hidden");o.classList.add("hidden")}}))};e.prototype.focusOption=function(e){this.allOptionEls.forEach((function(t){return t.focused=t===e}));e.scrollIntoView({block:"nearest"});window.setTimeout((function(){return e.scrollIntoView({block:"nearest"})}),60);e.focus()};e.prototype.selectOption=function(e){if(e.classList.contains("duplicate")){var t=this.findCorrespondingOption(e);t.selected=!t.selected;forceUpdate(this.el)}else if(this.multiple){e.selected=!e.selected}else{this.childOptions.forEach((function(t){return t.selected=t===e}))}if(this.selectAllEl){this.setSelectAllButton()}this.setButtonText()};e.prototype.findAndFocusOption=function(e){var t=this;var i=e.detail.toLowerCase();if(!this.keysSoFar){this.visibleOptionEls.forEach((function(e,i){if(e.focused){t.searchIndex=i}}))}this.keysSoFar+=i;var o=this.findMatchInRange(this.visibleOptionEls,this.searchIndex+1,this.visibleOptionEls.length);if(!o){o=this.findMatchInRange(this.visibleOptionEls,0,this.searchIndex)}if(o){this.focusOption(o)}this.debouncedClearKeysSoFar()};e.prototype.findMatchInRange=function(e,t,i){var o=this;var n=null;var s=e.slice(t,i);s.forEach((function(e){var t=e.textContent;if(!n&&t&&t.toLowerCase().startsWith(o.keysSoFar)){n=e}}));return n};e.prototype.findCorrespondingOption=function(e){var t=e.classList.contains("duplicate");return t?this.childOptions[this.duplicateOptions.indexOf(e)]:this.duplicateOptions[this.childOptions.indexOf(e)]};e.prototype.isElOrChild=function(e){var t;return e===this.el||this.el.contains(e)||((t=this.el.shadowRoot)===null||t===void 0?void 0:t.contains(e))};e.prototype.exposeErrors=function(){var e=generateId();this.errorContainer.id="wm-errors-".concat(e);this.buttonEl.setAttribute("aria-describedby","wm-errors-".concat(e))};e.prototype.renderErrorContainer=function(){var e=this;return h("div",{id:"wm-errors",class:this.errorMessage?"error-message":"",ref:function(t){return e.errorContainer=t},"aria-live":"assertive","aria-atomic":"true"},this.errorMessage)};e.prototype.handleComponentBlur=function(e){if(!this.el.contains(e.relatedTarget)){this.close(false);this.wmSelectBlurred.emit();this.wmComponentBlurred.emit()}};e.prototype.handleKeyDown=function(e){var t=e.target;switch(e.key){case"ArrowDown":e.preventDefault();this.moveDown(e.target);break;case"ArrowUp":e.preventDefault();this.moveUp(e.target);break;case"Escape":e.preventDefault();this.close();break;case"Enter":if(t===this.selectAllEl){e.preventDefault();this.handleSelectAllClick();this.close()}break;case" ":if(t===this.selectAllEl){e.preventDefault();this.handleSelectAllClick()}break}};e.prototype.setButtonText=function(){var e=this;this.displayedOptions=this.childOptions.filter((function(e){return e.selected})).map((function(t){return!t.classList.contains("hidden")?t:e.findCorrespondingOption(t)}));if(this.multiple){var t=38;var i=window.getComputedStyle(this.buttonEl);var o=parseInt(i.getPropertyValue("padding-left").slice(0,-2));var n=parseInt(i.getPropertyValue("padding-right").slice(0,-2));var s=this.buttonEl.clientWidth-o-n-t;var r=this.displayedOptions.map((function(e){return e.shadowRoot.querySelector(".option-wrapper").clientWidth}));var l=r.reduce((function(e,t){return e+t}),0);this.overflowCount=0;while(l>s&&this.displayedOptions.length>1){this.overflowCount++;l-=r[r.length-1];r.pop();this.displayedOptions.pop()}}};e.prototype.setSelectAllButton=function(){if(this.allSelected){this.selectAllEl.textContent=this.deselectAllMessage;this.announce(this.allOptionsSelectedMessage)}else{this.selectAllEl.textContent=this.selectAllMessage;if(this.selectedOptions.length===0){this.announce(this.allOptionsDeselectedMessage)}}};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.renderButtonText=function(){if(this.multiple&&this.displayedOptions.length<1){return h("span",null,this.placeholder)}else if(this.multiple&&this.allSelected&&this.overflowCount>0){return this.allSelectedMessage}else{return this.displayedOptions.map((function(e,t){return h("span",null,t>0?", ":"",e.textContent)}))}};e.prototype.renderSubinfo=function(){if(!this.multiple&&this.selectedOptions.length>0&&this.selectedOptions[0].subinfo){return h("span",{class:"subinfo"},this.selectedOptions[0].subinfo)}};e.prototype.renderOverflowCount=function(){if(this.overflowCount>0&&!this.allSelected){return h("span",null,h("span",{class:"overflow-counter"},"+",this.overflowCount))}};e.prototype.renderSearchField=function(){var e=this;return h("div",{class:"search"},h("div",{class:"searchfield-wrapper",ref:function(t){return e.searchFieldWrapperEl=t}},h("div",{class:"icon"}),h("input",{ref:function(t){return e.searchFieldEl=t},class:"searchfield",role:"combobox","aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false",onKeyDown:function(t){return e.handleKeyDown(t)},onFocus:function(){return e.searchFieldWrapperEl.classList.add("focus")},onBlur:function(t){return e.handleSearchFieldBlur(t)},onInput:function(){return e.debouncedSearch()},placeholder:this.searchPlaceholder})))};e.prototype.renderSearchFailedMessage=function(){return h("div",{class:"search-results-message"},this.noResultsFoundMessage)};e.prototype.renderSelectAllButton=function(){var e=this;if(this.selectAll&&this.multiple&&this.searchTerm==""){return h("button",{ref:function(t){return e.selectAllEl=t},class:"select-all",onClick:function(){return e.handleSelectAllClick()},onKeyDown:function(t){return e.handleKeyDown(t)},tabindex:"-1"},this.allSelected?this.deselectAllMessage:this.selectAllMessage)}};e.prototype.renderDuplicateOptions=function(){return Array.from(this.el.children).map((function(e){return h("wm-option",{class:"duplicate",selected:e.selected},e.textContent)}))};e.prototype.render=function(){var e;var t=this;var i=(e={id:"selectbtn-".concat(this.uid)},e["disabled"]=this.disabled,e["aria-controls"]="list-".concat(this.uid),e["aria-labelledby"]="label-".concat(this.uid," selectbtn-").concat(this.uid),e["aria-describedby"]="wm-errors",e["aria-expanded"]=this.isExpanded?"true":"false",e.onClick=function(){return t.isExpanded?t.close():t.open()},e);return h(Host,{onBlur:function(e){return t.handleComponentBlur(e)}},h("div",{class:"wrapper ".concat(getTextDir()," label-").concat(this.labelPosition," ").concat(this.invalid||this.errorMessage?"invalid":"")},h("div",{class:"label-wrapper"},h("label",{class:"label",id:"label-".concat(this.uid),htmlFor:"selectbtn-".concat(this.uid)},this.label,this.requiredField?h("span",{class:"required"},h("span",{class:"sr-only"},this.requiredMessage),h("span",{"aria-hidden":"true"},"*")):"")),h("div",{class:"button-wrapper"},h("button",Object.assign({},i,{class:"displayedoption ".concat(this.isTabbing?"user-is-tabbing":""),ref:function(e){return t.buttonEl=e},onBlur:function(e){return t.handleButtonBlur(e)},onFocus:function(){return t.close()}}),h("span",{class:this.selectedOptions.length>0&&this.selectedOptions.filter((function(e){return e.subinfo})).length>0?"overflowcontrol hassubinfo":"overflowcontrol"},h("span",{class:"button-text"},this.renderButtonText()),this.renderSubinfo()),this.renderOverflowCount()),h("div",{class:"dropdown ".concat(this.isExpanded?"open":""," ").concat(this.openUp?"upwards":""),ref:function(e){return t.dropdownEl=e}},this.search&&this.renderSearchField(),h("div",{id:"list-".concat(this.uid),class:"options-wrapper",tabindex:-1,role:"listbox","aria-multiselectable":this.multiple?"true":null,"aria-labelledby":"label-".concat(this.uid),ref:function(e){return t.listboxEl=e}},this.search&&this.filteredOptions.length===0&&this.renderSearchFailedMessage(),this.renderSelectAllButton(),this.multiple&&this.renderDuplicateOptions(),h("slot",null))),this.renderErrorContainer(),h("div",{id:"announcement","aria-live":"polite",class:"sr-only",ref:function(e){return t.liveRegionEl=e}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["exposeErrors"]}},enumerable:false,configurable:true});return e}();Select.style=wmSelectCss;export{Option as wm_option,Select as wm_select};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement,f as forceUpdate}from"./index-84a6ae22.js";import{i as intl,d as debounce,g as generateId,m as shouldOpenUp,w as getTextDir}from"./functions-dc9964aa.js";import{g as globalMessages}from"./intl-4d4826dd.js";var wmOptionCss=':host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}:host .sr-only,wm-option .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}.checkbox: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:"\\f131";display:inline;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:"\\f132"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hidden),wm-option.hidden,:host(.filtered-out),wm-option.filtered-out{display:none}:host(.duplicate.last),wm-option.duplicate.last{border-bottom:12px solid rgba(46, 27, 70, 0.05)}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):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;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}';var Option=function(){function e(e){registerInstance(this,e);this.wmOptionSelected=createEvent(this,"wmOptionSelected",7);this.wmKeyUpPressed=createEvent(this,"wmKeyUpPressed",7);this.wmKeyDownPressed=createEvent(this,"wmKeyDownPressed",7);this.wmEscKeyPressed=createEvent(this,"wmEscKeyPressed",7);this.wmHomeKeyPressed=createEvent(this,"wmHomeKeyPressed",7);this.wmEndKeyPressed=createEvent(this,"wmEndKeyPressed",7);this.wmEnterKeyPressed=createEvent(this,"wmEnterKeyPressed",7);this.wmLetterPressed=createEvent(this,"wmLetterPressed",7);this.wmOptionBlurred=createEvent(this,"wmOptionBlurred",7);this.value=undefined;this.subinfo=undefined;this.disabled=false;this.selected=false;this.focused=false;this.searchTerm=""}Object.defineProperty(e.prototype,"hostClasses",{get:function(){var e=[];if(this.subinfo){e.push("hassubinfo")}if(this.parentSelectEl.multiple){e.push("multi-option")}if(!this.el.textContent.toLowerCase().includes(this.searchTerm)){e.push("filtered-out")}return e.join(" ")},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"parentSelectEl",{get:function(){var e;return((e=this.el.parentElement)===null||e===void 0?void 0:e.nodeName)!=="WM-SELECT"?this.el.getRootNode().host:this.el.parentElement},enumerable:false,configurable:true});e.prototype.handleKeydown=function(e){switch(e.key){case"ArrowUp":e.preventDefault();this.wmKeyUpPressed.emit(this.el);break;case"ArrowDown":e.preventDefault();this.wmKeyDownPressed.emit(this.el);break;case"Enter":e.preventDefault();if(!this.disabled){this.el.click();this.wmEnterKeyPressed.emit(this.el)}break;case" ":e.preventDefault();this.el.click();break;case"Escape":e.preventDefault();e.stopPropagation();this.wmEscKeyPressed.emit();break;case"Home":e.preventDefault();this.wmHomeKeyPressed.emit();break;case"End":e.preventDefault();this.wmEndKeyPressed.emit();break;default:if(e.key.length===1){this.wmLetterPressed.emit(e.key)}}};e.prototype.handleSelection=function(){if(!this.disabled){this.wmOptionSelected.emit(this.el)}};e.prototype.handleBlur=function(e){this.wmOptionBlurred.emit({relatedTarget:e.relatedTarget})};e.prototype.syncAriaSelected=function(){this.selected?this.el.setAttribute("aria-selected","true"):this.el.removeAttribute("aria-selected")};e.prototype.syncAriaDisabled=function(){this.disabled?this.el.setAttribute("aria-disabled","true"):this.el.removeAttribute("aria-disabled")};e.prototype.updateDisabledOnClick=function(){if(this.disabled&&this.el.onclick){this.onClickFunc=this.el.onclick;this.el.onclick=null}else if(!this.disabled&&this.onClickFunc){this.el.onclick=this.onClickFunc}};e.prototype.handleSearch=function(e){this.searchTerm=e.detail.searchTerm.toLowerCase();if(this.searchTerm){var t=new RegExp("".concat(this.searchTerm),"gi");var i=this.el.textContent.replace(t,(function(e){return"<strong>".concat(e,"</strong>")}));this.textEl.innerHTML=i}else{this.textEl.innerHTML=this.el.textContent}};e.prototype.componentWillLoad=function(){var e=this;this.syncAriaSelected();this.syncAriaDisabled();this.updateDisabledOnClick();this.parentSelectEl.addEventListener("wmSelectSearchChanged",(function(t){return e.handleSearch(t)}))};e.prototype.render=function(){var e=this;return h(Host,{role:"option",tabindex:this.focused?0:-1,class:this.hostClasses},h("div",{class:"option-wrapper ".concat(this.parentSelectEl.multiple?"checkbox":"")},h("span",{"aria-hidden":"true",ref:function(t){return e.textEl=t}},this.el.textContent),h("span",{class:"sr-only"},this.el.textContent)),h("div",{class:"subinfo"},this.subinfo))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selected:["syncAriaSelected"],disabled:["syncAriaDisabled","updateDisabledOnClick"]}},enumerable:false,configurable:true});return e}();Option.style=wmOptionCss;var wmSelectCss=':host{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}:host .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}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.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}.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}.wrapper.invalid .label{color:#c0392b}.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] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .button-wrapper .displayedoption: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:"\\f140";position:absolute;right:0.5625rem;pointer-events:none}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-webkit-overflow-scrolling:touch;-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:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;top:100%;left:0}.options-wrapper{max-height:12.5rem;overflow:auto}.select-all{width:100%;cursor:pointer;padding:1.25rem;border:none;margin:0;border-bottom:2px solid rgba(46, 27, 70, 0.05);background:#fff;font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:#575195;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-all:hover,.select-all:focus{outline:none;background:#f4f4f4}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid rgba(46, 27, 70, 0.05);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #4a4a4a}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f349";color:#6b6b6b;font-size:0.875rem}.search-results-message{padding:1.25rem;color:#4a4a4a;font-size:0.875rem;font-style:italic}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}';var Select=function(){function e(e){var t=this;registerInstance(this,e);this.wmSelectDidLoad=createEvent(this,"wmSelectDidLoad",7);this.wmSelectBlurred=createEvent(this,"wmSelectBlurred",7);this.wmSelectChanged=createEvent(this,"wmSelectChanged",7);this.wmComponentBlurred=createEvent(this,"wmComponentBlurred",7);this.wmSelectSearchChanged=createEvent(this,"wmSelectSearchChanged",7);this.selectAllMessage=intl.formatMessage({id:"select.selectAll",defaultMessage:"Select All"});this.deselectAllMessage=intl.formatMessage({id:"select.deselectAll",defaultMessage:"Deselect All"});this.allOptionsSelectedMessage=intl.formatMessage({id:"select.allOptionsSelected",defaultMessage:"All options selected"});this.allOptionsDeselectedMessage=intl.formatMessage({id:"select.allOptionsDeselected",defaultMessage:"All options deselected"});this.keysSoFar="";this.searchIndex=0;this.openUp=false;this.overflowCount=0;this.displayedOptions=[];this.debouncedClearKeysSoFar=debounce((function(){t.keysSoFar=""}),500);this.debouncedSearch=debounce((function(){t.wmSelectSearchChanged.emit({searchTerm:t.searchTerm});if(t.filteredOptions.length){t.announce(t.resultsFoundMessage)}else{t.announce(t.noResultsFoundMessage)}}),150);this.disabled=false;this.invalid=false;this.maxHeight=undefined;this.label=undefined;this.labelPosition="top";this.requiredField=false;this.errorMessage="";this.multiple=false;this.search=false;this.selectAll=false;this.placeholder=intl.formatMessage({id:"select.multiPlaceholder",defaultMessage:"Make a selection",description:"Placeholder text. Use imperative"});this.searchPlaceholder=intl.formatMessage({id:"select.searchPlaceholder",defaultMessage:"Search",description:"Placeholder text. Use imperative"});this.allSelectedMessage=intl.formatMessage({id:"select.allSelected",defaultMessage:"All selected",description:"Text displayed when all options are selected"});this.isTabbing=false;this.isExpanded=false;this.announcement=""}Object.defineProperty(e.prototype,"childOptions",{get:function(){return Array.from(this.el.querySelectorAll("wm-option"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"duplicateOptions",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"allOptionEls",{get:function(){return this.duplicateOptions.concat(this.childOptions)},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"visibleOptionEls",{get:function(){return this.allOptionEls.filter((function(e){return!e.classList.contains("hidden")&&!e.classList.contains("filtered-out")}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"searchTerm",{get:function(){return this.searchFieldEl?this.searchFieldEl.value:""},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"filteredOptions",{get:function(){var e=this;return this.childOptions.filter((function(t){var i;return(i=t.textContent)===null||i===void 0?void 0:i.toLowerCase().includes(e.searchTerm.toLowerCase())}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"selectedOptions",{get:function(){return Array.from(this.el.querySelectorAll("wm-option")).filter((function(e){return e.selected}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"allSelected",{get:function(){return this.childOptions.every((function(e){return e.selected}))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"resultsFoundMessage",{get:function(){return intl.formatMessage({id:"select.searchResultsFound",defaultMessage:"{numResults, plural, one {1 option found} other {# options found}}",description:"The message read by the screen reader, indicating how many results a search returned"},{numResults:this.filteredOptions.length})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"noResultsFoundMessage",{get:function(){return intl.formatMessage({id:"select.noSearchResults",defaultMessage:"No results found. Please try your search again.",description:"The message displayed when no options pass the search filter"})},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleOptionSelection=function(e){var t=e.detail;this.focusOption(t);if(!this.multiple){if(!t.selected){this.selectOption(t);var i={changedOption:t,selectedOptions:[t]};this.wmSelectChanged.emit(i);var o=new CustomEvent("change",{detail:i});this.el.dispatchEvent(o)}this.close()}else{this.selectOption(t);var n=t.classList.contains("duplicate");var s=n?this.findCorrespondingOption(t):t;var r=this.childOptions.filter((function(e){return e.selected}));var i={changedOption:s,selectedOptions:r};this.wmSelectChanged.emit(i);var o=new CustomEvent("change",{detail:i});this.el.dispatchEvent(o)}};e.prototype.handleChildEnter=function(){this.close()};e.prototype.handleChildUp=function(e){this.moveUp(e.detail)};e.prototype.handleChildDown=function(e){this.moveDown(e.detail)};e.prototype.moveToFirstOption=function(){this.focusOption(this.visibleOptionEls[0])};e.prototype.moveToLastOption=function(){this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length-1])};e.prototype.closePopupOnEscape=function(){this.close()};e.prototype.handleOptionBlur=function(e){if(!this.isElOrChild(e.detail.relatedTarget)){var t=new CustomEvent("blur");t.relatedTarget=e.detail.relatedTarget;this.el.dispatchEvent(t)}};e.prototype.handleClick=function(e){if(!this.isElOrChild(e.target)){this.close()}};e.prototype.handleSelectAllClick=function(){this.allSelected?this.deselectAllOptions():this.selectAllOptions()};e.prototype.selectAllOptions=function(){this.allOptionEls.forEach((function(e){return e.selected=true}));this.setSelectAllButton();this.setButtonText();var e={changedOption:null,selectedOptions:this.childOptions};this.wmSelectChanged.emit(e)};e.prototype.deselectAllOptions=function(){this.allOptionEls.forEach((function(e){return e.selected=false}));this.setSelectAllButton();this.setButtonText();var e={changedOption:null,selectedOptions:[]};this.wmSelectChanged.emit(e)};e.prototype.handleButtonBlur=function(e){if(this.isElOrChild(e.relatedTarget)){e.stopPropagation()}};e.prototype.handleSearchFieldBlur=function(e){this.searchFieldWrapperEl.classList.remove("focus");if(this.isElOrChild(e.relatedTarget)){e.stopPropagation()}};e.prototype.handleKey=function(e){switch(e.key){case"ArrowDown":if(this.isExpanded===false){e.preventDefault();this.open("next")}break;case"ArrowUp":if(this.isExpanded===false){e.preventDefault();this.open("previous")}break}};e.prototype.componentWillLoad=function(){var e=this;if(!this.label){console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).")}this.uid=this.el.id?this.el.id:generateId();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(this.selectedOptions.length>0){this.selectedOptions.forEach((function(t){e.displayedOptions.push(t)}))}else if(!this.multiple){this.selectOption(this.allOptionEls[0])}};e.prototype.componentDidLoad=function(){this.wmSelectDidLoad.emit();this.dropdownEl.classList.add("hidden");forceUpdate(this.el);if(this.maxHeight){this.listboxEl.style.maxHeight=this.maxHeight}if(this.multiple){this.updateOptionVisibility()}this.setButtonText()};e.prototype.componentWillUpdate=function(){if(this.multiple){var e=this.visibleOptionEls.filter((function(e){return e.classList.contains("duplicate")}));e.forEach((function(t,i){if(i===e.length-1){t.classList.add("last")}else{t.classList.remove("last")}}))}};e.prototype.moveUp=function(e){var t=this.visibleOptionEls;if(this.selectAllEl){t.unshift(this.selectAllEl)}if(this.searchFieldEl){t.unshift(this.searchFieldEl)}var i=t[t.indexOf(e)-1]||t[t.length-1];if(i){this.focusOption(i)}};e.prototype.moveDown=function(e){var t=this.visibleOptionEls;if(this.selectAllEl){t.unshift(this.selectAllEl)}if(this.searchFieldEl){t.unshift(this.searchFieldEl)}var i=t[t.indexOf(e)+1]||t[0];if(i){this.focusOption(i)}};e.prototype.open=function(e){var t=this;if(!this.disabled){var i=this.el.clientHeight;var o=this.buttonEl.clientHeight;this.openUp=shouldOpenUp(this.el,this.dropdownEl,i,o);this.isExpanded=true;this.dropdownEl.classList.remove("hidden");window.requestAnimationFrame((function(){switch(e){case"next":if(t.search){t.searchFieldEl.focus();t.listboxEl.scrollTop=0}else{t.moveDown(t.visibleOptionEls.filter((function(e){return e.selected})).slice(-1)[0])}break;case"previous":if(t.search){t.focusOption(t.visibleOptionEls[t.visibleOptionEls.length-1])}else{t.moveUp(t.visibleOptionEls.filter((function(e){return e.selected}))[0])}break;default:if(t.search){t.searchFieldEl.focus();t.listboxEl.scrollTop=0}else if(t.selectedOptions.length>0){t.focusOption(t.visibleOptionEls.filter((function(e){return e.selected}))[0])}else{t.focusOption(t.visibleOptionEls[0])}break}}))}};e.prototype.close=function(e){var t=this;if(e===void 0){e=true}if(this.isExpanded){this.isExpanded=false;this.allOptionEls.map((function(e){return e.focused=false}));window.setTimeout((function(){t.dropdownEl.classList.add("hidden");if(t.multiple){t.updateOptionVisibility()}if(t.search){t.searchFieldEl.value="";t.wmSelectSearchChanged.emit({searchTerm:t.searchTerm})}if(e){t.buttonEl.focus()}}),150)}};e.prototype.updateOptionVisibility=function(){var e=this;this.childOptions.forEach((function(t,i){var o=e.duplicateOptions[i];if(t.selected){t.classList.add("hidden");o.classList.remove("hidden")}else{t.classList.remove("hidden");o.classList.add("hidden")}}))};e.prototype.focusOption=function(e){this.allOptionEls.forEach((function(t){return t.focused=t===e}));e.scrollIntoView({block:"nearest"});window.setTimeout((function(){return e.scrollIntoView({block:"nearest"})}),60);e.focus()};e.prototype.selectOption=function(e){if(e.classList.contains("duplicate")){var t=this.findCorrespondingOption(e);t.selected=!t.selected;forceUpdate(this.el)}else if(this.multiple){e.selected=!e.selected}else{this.childOptions.forEach((function(t){return t.selected=t===e}))}if(this.selectAllEl){this.setSelectAllButton()}this.setButtonText()};e.prototype.findAndFocusOption=function(e){var t=this;var i=e.detail.toLowerCase();if(!this.keysSoFar){this.visibleOptionEls.forEach((function(e,i){if(e.focused){t.searchIndex=i}}))}this.keysSoFar+=i;var o=this.findMatchInRange(this.visibleOptionEls,this.searchIndex+1,this.visibleOptionEls.length);if(!o){o=this.findMatchInRange(this.visibleOptionEls,0,this.searchIndex)}if(o){this.focusOption(o)}this.debouncedClearKeysSoFar()};e.prototype.findMatchInRange=function(e,t,i){var o=this;var n=null;var s=e.slice(t,i);s.forEach((function(e){var t=e.textContent;if(!n&&t&&t.toLowerCase().startsWith(o.keysSoFar)){n=e}}));return n};e.prototype.findCorrespondingOption=function(e){var t=e.classList.contains("duplicate");return t?this.childOptions[this.duplicateOptions.indexOf(e)]:this.duplicateOptions[this.childOptions.indexOf(e)]};e.prototype.isElOrChild=function(e){var t;return e===this.el||this.el.contains(e)||((t=this.el.shadowRoot)===null||t===void 0?void 0:t.contains(e))};e.prototype.exposeErrors=function(){var e=generateId();this.errorContainer.id="wm-errors-".concat(e);this.buttonEl.setAttribute("aria-describedby","wm-errors-".concat(e))};e.prototype.renderErrorContainer=function(){var e=this;return h("div",{id:"wm-errors",class:this.errorMessage?"error-message":"",ref:function(t){return e.errorContainer=t},"aria-live":"assertive","aria-atomic":"true"},this.errorMessage)};e.prototype.handleComponentBlur=function(e){if(!this.el.contains(e.relatedTarget)){this.close(false);this.wmSelectBlurred.emit();this.wmComponentBlurred.emit()}};e.prototype.handleKeyDown=function(e){var t=e.target;switch(e.key){case"ArrowDown":e.preventDefault();this.moveDown(e.target);break;case"ArrowUp":e.preventDefault();this.moveUp(e.target);break;case"Escape":e.preventDefault();this.close();break;case"Enter":if(t===this.selectAllEl){e.preventDefault();this.handleSelectAllClick();this.close()}break;case" ":if(t===this.selectAllEl){e.preventDefault();this.handleSelectAllClick()}break}};e.prototype.setButtonText=function(){var e=this;this.displayedOptions=this.childOptions.filter((function(e){return e.selected})).map((function(t){return!t.classList.contains("hidden")?t:e.findCorrespondingOption(t)}));if(this.multiple){var t=38;var i=window.getComputedStyle(this.buttonEl);var o=parseInt(i.getPropertyValue("padding-left").slice(0,-2));var n=parseInt(i.getPropertyValue("padding-right").slice(0,-2));var s=this.buttonEl.clientWidth-o-n-t;var r=this.displayedOptions.map((function(e){return e.shadowRoot.querySelector(".option-wrapper").clientWidth}));var l=r.reduce((function(e,t){return e+t}),0);this.overflowCount=0;while(l>s&&this.displayedOptions.length>1){this.overflowCount++;l-=r[r.length-1];r.pop();this.displayedOptions.pop()}}};e.prototype.setSelectAllButton=function(){if(this.allSelected){this.selectAllEl.textContent=this.deselectAllMessage;this.announce(this.allOptionsSelectedMessage)}else{this.selectAllEl.textContent=this.selectAllMessage;if(this.selectedOptions.length===0){this.announce(this.allOptionsDeselectedMessage)}}};e.prototype.announce=function(e){if(this.liveRegionEl.textContent===e){e+=" "}this.announcement=e};e.prototype.renderButtonText=function(){if(this.multiple&&this.displayedOptions.length<1){return h("span",null,this.placeholder)}else if(this.multiple&&this.allSelected&&this.overflowCount>0){return this.allSelectedMessage}else{return this.displayedOptions.map((function(e,t){return h("span",null,t>0?", ":"",e.textContent)}))}};e.prototype.renderSubinfo=function(){if(!this.multiple&&this.selectedOptions.length>0&&this.selectedOptions[0].subinfo){return h("span",{class:"subinfo"},this.selectedOptions[0].subinfo)}};e.prototype.renderOverflowCount=function(){if(this.overflowCount>0&&!this.allSelected){return h("span",null,h("span",{class:"overflow-counter"},"+",this.overflowCount))}};e.prototype.renderSearchField=function(){var e=this;return h("div",{class:"search"},h("div",{class:"searchfield-wrapper",ref:function(t){return e.searchFieldWrapperEl=t}},h("div",{class:"icon"}),h("input",{ref:function(t){return e.searchFieldEl=t},class:"searchfield",role:"combobox","aria-controls":"list-".concat(this.uid),"aria-expanded":this.isExpanded?"true":"false",onKeyDown:function(t){return e.handleKeyDown(t)},onFocus:function(){return e.searchFieldWrapperEl.classList.add("focus")},onBlur:function(t){return e.handleSearchFieldBlur(t)},onInput:function(){return e.debouncedSearch()},placeholder:this.searchPlaceholder})))};e.prototype.renderSearchFailedMessage=function(){return h("div",{class:"search-results-message"},this.noResultsFoundMessage)};e.prototype.renderSelectAllButton=function(){var e=this;if(this.selectAll&&this.multiple&&this.searchTerm==""){return h("button",{ref:function(t){return e.selectAllEl=t},class:"select-all",onClick:function(){return e.handleSelectAllClick()},onKeyDown:function(t){return e.handleKeyDown(t)},tabindex:"-1"},this.allSelected?this.deselectAllMessage:this.selectAllMessage)}};e.prototype.renderDuplicateOptions=function(){return Array.from(this.el.children).map((function(e){return h("wm-option",{class:"duplicate",selected:e.selected},e.textContent)}))};e.prototype.render=function(){var e;var t=this;var i=(e={id:"selectbtn-".concat(this.uid)},e["disabled"]=this.disabled,e["aria-controls"]="list-".concat(this.uid),e["aria-labelledby"]="label-".concat(this.uid," selectbtn-").concat(this.uid),e["aria-describedby"]="wm-errors",e["aria-expanded"]=this.isExpanded?"true":"false",e.onClick=function(){return t.isExpanded?t.close():t.open()},e);return h(Host,{onBlur:function(e){return t.handleComponentBlur(e)}},h("div",{class:"wrapper ".concat(getTextDir()," label-").concat(this.labelPosition," ").concat(this.invalid||this.errorMessage?"invalid":"")},h("div",{class:"label-wrapper"},h("label",{class:"label",id:"label-".concat(this.uid),htmlFor:"selectbtn-".concat(this.uid)},this.label,this.requiredField?h("span",{class:"required"},h("span",{class:"sr-only"},globalMessages.requiredField),h("span",{"aria-hidden":"true"},"*")):"")),h("div",{class:"button-wrapper"},h("button",Object.assign({},i,{class:"displayedoption ".concat(this.isTabbing?"user-is-tabbing":""),ref:function(e){return t.buttonEl=e},onBlur:function(e){return t.handleButtonBlur(e)},onFocus:function(){return t.close()}}),h("span",{class:this.selectedOptions.length>0&&this.selectedOptions.filter((function(e){return e.subinfo})).length>0?"overflowcontrol hassubinfo":"overflowcontrol"},h("span",{class:"button-text"},this.renderButtonText()),this.renderSubinfo()),this.renderOverflowCount()),h("div",{class:"dropdown ".concat(this.isExpanded?"open":""," ").concat(this.openUp?"upwards":""),ref:function(e){return t.dropdownEl=e}},this.search&&this.renderSearchField(),h("div",{id:"list-".concat(this.uid),class:"options-wrapper",tabindex:-1,role:"listbox","aria-multiselectable":this.multiple?"true":null,"aria-labelledby":"label-".concat(this.uid),ref:function(e){return t.listboxEl=e}},this.search&&this.filteredOptions.length===0&&this.renderSearchFailedMessage(),this.renderSelectAllButton(),this.multiple&&this.renderDuplicateOptions(),h("slot",null))),this.renderErrorContainer(),h("div",{id:"announcement","aria-live":"polite",class:"sr-only",ref:function(e){return t.liveRegionEl=e}},this.announcement))))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{errorMessage:["exposeErrors"]}},enumerable:false,configurable:true});return e}();Select.style=wmSelectCss;export{Option as wm_option,Select as wm_select};
 //# sourceMappingURL=wm-option_2.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["wmOptionCss","Option","undefined","Object","defineProperty","prototype","classes","this","subinfo","push","parentSelectEl","multiple","el","textContent","toLowerCase","includes","searchTerm","join","_a","parentElement","nodeName","getRootNode","host","handleKeydown","ev","key","preventDefault","wmKeyUpPressed","emit","wmKeyDownPressed","disabled","click","wmEnterKeyPressed","stopPropagation","wmEscKeyPressed","wmHomeKeyPressed","wmEndKeyPressed","length","wmLetterPressed","handleSelection","wmOptionSelected","handleBlur","wmOptionBlurred","relatedTarget","syncAriaSelected","selected","setAttribute","removeAttribute","syncAriaDisabled","updateDisabledOnClick","onclick","onClickFunc","handleSearch","detail","regexp","RegExp","concat","boldedText","replace","match","textEl","innerHTML","componentWillLoad","_this","addEventListener","render","h","Host","role","tabindex","focused","class","hostClasses","ref","wmSelectCss","Select","requiredMessage","intl","formatMessage","id","defaultMessage","selectAllMessage","deselectAllMessage","allOptionsSelectedMessage","allOptionsDeselectedMessage","keysSoFar","searchIndex","openUp","overflowCount","displayedOptions","debouncedClearKeysSoFar","debounce","debouncedSearch","wmSelectSearchChanged","filteredOptions","announce","resultsFoundMessage","noResultsFoundMessage","description","Array","from","querySelectorAll","shadowRoot","duplicateOptions","childOptions","allOptionEls","filter","option","classList","contains","searchFieldEl","value","x","every","numResults","toggleTabbingOn","isTabbing","toggleTabbingOff","handleOptionSelection","focusOption","selectOption","changedOption","selectedOptions","wmSelectChanged","event","CustomEvent","dispatchEvent","close","isDuplicate","originalOption","findCorrespondingOption","o","handleChildEnter","handleChildUp","moveUp","handleChildDown","moveDown","moveToFirstOption","visibleOptionEls","moveToLastOption","closePopupOnEscape","handleOptionBlur","isElOrChild","handleClick","target","handleSelectAllClick","allSelected","deselectAllOptions","selectAllOptions","forEach","setSelectAllButton","setButtonText","handleButtonBlur","handleSearchFieldBlur","searchFieldWrapperEl","remove","handleKey","isExpanded","open","label","console","error","uid","generateId","document","body","componentDidLoad","wmSelectDidLoad","dropdownEl","add","forceUpdate","maxHeight","listboxEl","style","updateOptionVisibility","componentWillUpdate","visibleDuplicateOptions_1","idx","focusableEls","selectAllEl","unshift","prevEl","indexOf","nextEl","optionToSelect","elHeight","clientHeight","buttonHeight","buttonEl","shouldOpenUp","window","requestAnimationFrame","search","focus","scrollTop","slice","returnFocus","map","i","setTimeout","duplicateOption","scrollIntoView","block","correspondingOption","findAndFocusOption","character","nextMatch","findMatchInRange","list","startIndex","endIndex","optionsInRange","startsWith","exposeErrors","newId","errorContainer","renderErrorContainer","errorMessage","handleComponentBlur","wmSelectBlurred","wmComponentBlurred","handleKeyDown","y","overflowCounterWidth","computedStyle","getComputedStyle","paddingLeft","parseInt","getPropertyValue","paddingRight","availableSpace","clientWidth","optionsWidths","querySelector","optionsTotalWidth","reduce","acc","pop","message","liveRegionEl","announcement","renderButtonText","placeholder","allSelectedMessage","renderSubinfo","renderOverflowCount","renderSearchField","onKeyDown","onFocus","onBlur","onInput","searchPlaceholder","renderSearchFailedMessage","renderSelectAllButton","selectAll","onClick","renderDuplicateOptions","children","buttonProps","_b","getTextDir","labelPosition","invalid","htmlFor","requiredField","assign"],"sources":["src/components/wm-option/wm-option.scss?tag=wm-option&encapsulation=shadow","src/components/wm-option/wm-option.tsx","src/components/wm-select/wm-select.scss?tag=wm-select&encapsulation=shadow","src/components/wm-select/wm-select.tsx"],"sourcesContent":[":host(:not(:last-child)),\r\nwm-option:not(:last-child) {\r\n  border-bottom: 2px solid $list-border-bottom-color;\r\n}\r\n\r\n:host,\r\nwm-option {\r\n  display: block;\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding: rem-calc(20);\r\n  background: $light-background;\r\n  font-family: inherit;\r\n  list-style: none;\r\n  color: $body-text-color;\r\n  user-select: none;\r\n\r\n  &:focus,\r\n  &.focus {\r\n    outline: none;\r\n    background: $background;\r\n  }\r\n\r\n  &.icon {\r\n    color: $button-default-text;\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n}\r\n\r\n.checkbox {\r\n  &:before {\r\n    @include mdi-icon;\r\n    content: \"\\f131\";\r\n    display: inline;\r\n    margin-right: rem-calc(4);\r\n    color: $periwinkle;\r\n  }\r\n}\r\n\r\n:host([aria-selected=\"true\"]),\r\nwm-option[aria-selected=\"true\"] {\r\n  background: $list-selected-background-color;\r\n  font-weight: 500;\r\n\r\n  .checkbox {\r\n    &:before {\r\n      content: \"\\f132\";\r\n    }\r\n  }\r\n}\r\n\r\n:host([aria-disabled=\"true\"]),\r\nwm-option[aria-disabled=\"true\"] {\r\n  font-style: italic;\r\n  color: $gray;\r\n  cursor: default;\r\n\r\n  .checkbox {\r\n    &:before {\r\n      color: $gray;\r\n    }\r\n  }\r\n}\r\n\r\n:host(.multi-option),\r\nwm-option.multi-option {\r\n  background: unset;\r\n}\r\n\r\n:host(.hidden),\r\nwm-option.hidden,\r\n:host(.filtered-out),\r\nwm-option.filtered-out {\r\n  display: none;\r\n}\r\n\r\n:host(.duplicate.last),\r\nwm-option.duplicate.last {\r\n  border-bottom: 12px solid $list-border-bottom-color;\r\n}\r\n\r\n:host(.hassubinfo),\r\nwm-option.hassubinfo {\r\n  display: flex;\r\n\r\n  .option-wrapper {\r\n    flex: 1;\r\n  }\r\n  .subinfo {\r\n    flex: none;\r\n  }\r\n}\r\n\r\n.subinfo {\r\n  font-style: italic;\r\n}\r\n\r\n.option-wrapper {\r\n  // necessary for multiselect overflow measurement\r\n  display: inline-block;\r\n}\r\n\r\n::slotted {\r\n  font-family: inherit;\r\n}\r\n\r\n::slotted(i) {\r\n  font-size: rem-calc(14);\r\n\r\n  &:before {\r\n    @include mdi-icon;\r\n    display: inline-block;\r\n    margin-right: rem-calc(10);\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n:host(:focus),\r\nwm-option:focus {\r\n  outline: none;\r\n  background: $background;\r\n}\r\n\r\n:host(:hover) {\r\n  background: $background;\r\n  outline: none;\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-option\",\r\n  styleUrl: \"wm-option.scss\",\r\n  shadow: true,\r\n})\r\nexport class Option {\r\n  @Element() el!: HTMLElement;\r\n\r\n  @Prop() value?: string | null; // if devs pass a value as attribute they should be able to retrieve it by querying the property. This is untouched by the component.\r\n  @Prop({ mutable: true }) subinfo?: string = undefined;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ reflect: true }) selected: boolean = false;\r\n  @Prop() focused: boolean = false;\r\n\r\n  @Event() wmOptionSelected!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmKeyUpPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmKeyDownPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmEscKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmEndKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmEnterKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n  @Event() wmLetterPressed!: EventEmitter<string>;\r\n  @Event() wmOptionBlurred!: EventEmitter<{ relatedTarget: EventTarget | null }>;\r\n\r\n  private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\r\n  @State() searchTerm: string = \"\";\r\n  private textEl!: HTMLDivElement;\r\n\r\n  get hostClasses() {\r\n    let classes = [];\r\n    if (this.subinfo) {\r\n      classes.push(\"hassubinfo\");\r\n    }\r\n    if (this.parentSelectEl.multiple) {\r\n      classes.push(\"multi-option\");\r\n    }\r\n    if (!this.el.textContent!.toLowerCase().includes(this.searchTerm)) {\r\n      classes.push(\"filtered-out\");\r\n    }\r\n    return classes.join(\" \");\r\n  }\r\n\r\n  get parentSelectEl() {\r\n    return this.el.parentElement?.nodeName !== \"WM-SELECT\"\r\n      ? ((this.el.getRootNode() as ShadowRoot).host as HTMLWmSelectElement)\r\n      : (this.el.parentElement as HTMLWmSelectElement);\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    switch (ev.key) {\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        this.wmKeyUpPressed.emit(this.el as HTMLWmOptionElement);\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        this.wmKeyDownPressed.emit(this.el as HTMLWmOptionElement);\r\n        break;\r\n\r\n      case \"Enter\":\r\n        ev.preventDefault();\r\n        if (!this.disabled) {\r\n          this.el.click();\r\n          this.wmEnterKeyPressed.emit(this.el as HTMLWmOptionElement);\r\n        }\r\n        break;\r\n\r\n      case \" \":\r\n        ev.preventDefault();\r\n        this.el.click();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\r\n        this.wmEscKeyPressed.emit();\r\n        break;\r\n\r\n      case \"Home\":\r\n        ev.preventDefault();\r\n        this.wmHomeKeyPressed.emit();\r\n        break;\r\n\r\n      case \"End\":\r\n        ev.preventDefault();\r\n        this.wmEndKeyPressed.emit();\r\n        break;\r\n\r\n      default:\r\n        if (ev.key.length === 1) {\r\n          // emit for single characters (\"a\",\"l\",\"5\", etc), avoid others (\"shift\", \"control\", etc)\r\n          this.wmLetterPressed.emit(ev.key);\r\n        }\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\")\r\n  handleSelection() {\r\n    if (!this.disabled) {\r\n      // the parent wm-select is in charge of the actual selection\r\n      // using ev.detail because ev.target returns the wm-select for duplicate options\r\n      this.wmOptionSelected.emit(this.el as HTMLWmOptionElement);\r\n    }\r\n  }\r\n\r\n  @Listen(\"blur\")\r\n  handleBlur(ev: FocusEvent) {\r\n    this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });\r\n  }\r\n\r\n  @Watch(\"selected\")\r\n  syncAriaSelected() {\r\n    // this function only keeps the aria-selected attr in sync with the selected prop\r\n    // all the logic for selecting / deselecting happens in the parent wm-select\r\n    this.selected ? this.el.setAttribute(\"aria-selected\", \"true\") : this.el.removeAttribute(\"aria-selected\");\r\n  }\r\n\r\n  @Watch(\"disabled\")\r\n  syncAriaDisabled() {\r\n    this.disabled ? this.el.setAttribute(\"aria-disabled\", \"true\") : this.el.removeAttribute(\"aria-disabled\");\r\n  }\r\n\r\n  @Watch(\"disabled\")\r\n  updateDisabledOnClick() {\r\n    if (this.disabled && this.el.onclick) {\r\n      this.onClickFunc = this.el.onclick;\r\n      this.el.onclick = null;\r\n    } else if (!this.disabled && this.onClickFunc) {\r\n      this.el.onclick = this.onClickFunc;\r\n    }\r\n  }\r\n\r\n  handleSearch(ev: CustomEvent) {\r\n    // filter is case-insensitive, so\r\n    this.searchTerm = ev.detail.searchTerm.toLowerCase();\r\n\r\n    if (this.searchTerm) {\r\n      const regexp = new RegExp(`${this.searchTerm}`, \"gi\");\r\n      const boldedText = this.el.textContent!.replace(regexp, (match) => `<strong>${match}</strong>`);\r\n      // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as \"hel lo\"\r\n      // aria-hidden and sr-only is used to circumvent this\r\n      this.textEl.innerHTML = boldedText;\r\n    } else {\r\n      this.textEl.innerHTML = this.el.textContent!;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.syncAriaSelected();\r\n    this.syncAriaDisabled();\r\n    this.updateDisabledOnClick();\r\n\r\n    this.parentSelectEl.addEventListener(\"wmSelectSearchChanged\", (ev) => this.handleSearch(ev as CustomEvent));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"option\" tabindex={this.focused ? 0 : -1} class={this.hostClasses}>\r\n        <div class={`option-wrapper ${this.parentSelectEl.multiple ? \"checkbox\" : \"\"}`}>\r\n          <span aria-hidden=\"true\" ref={(el) => (this.textEl = el as HTMLDivElement)}>\r\n            {this.el.textContent}\r\n          </span>\r\n          <span class=\"sr-only\">{this.el.textContent}</span>\r\n        </div>\r\n        <div class=\"subinfo\">{this.subinfo}</div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host {\r\n  position: relative;\r\n  display: block;\r\n  box-sizing: border-box;\r\n  font-family: inherit;\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n}\r\n\r\n@include label;\r\n\r\n.wrapper {\r\n  & .button-wrapper {\r\n    position: relative;\r\n    flex: 1;\r\n    font-size: rem-calc(18);\r\n    color: $button-default-text;\r\n    min-width: rem-calc(140);\r\n\r\n    .displayedoption {\r\n      @include border-radius(3px);\r\n      @include box-shadow(none);\r\n      display: flex;\r\n      align-items: center;\r\n      flex-wrap: nowrap;\r\n      background: transparent;\r\n      width: 100%;\r\n      border: solid 1px rgba(35, 35, 35, 0.6);\r\n      padding: rem-calc(0 30 0 15);\r\n      cursor: pointer;\r\n      height: rem-calc(40);\r\n      line-height: normal;\r\n      font-family: inherit;\r\n      color: $button-default-text;\r\n      font-weight: 400;\r\n      font-size: rem-calc(14);\r\n      text-transform: none;\r\n      text-align: left;\r\n\r\n      @media only screen and (max-width: 768px) {\r\n        height: rem-calc(44);\r\n      }\r\n\r\n      &:before {\r\n        @include mdi-icon;\r\n        content: \"\\f140\";\r\n        position: absolute;\r\n        right: rem-calc(9);\r\n        pointer-events: none;\r\n      }\r\n\r\n      &:hover:not(:disabled):not(.-disabled):not(.-raised) {\r\n        background: transparent;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        // fix style bleed in Edge\r\n        -ms-transform: scale(1, 1) !important;\r\n        transform: scale(1, 1) !important;\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      }\r\n\r\n      &.user-is-tabbing:focus {\r\n        @include focus-style;\r\n      }\r\n\r\n      .overflowcontrol {\r\n        display: block;\r\n        white-space: nowrap;\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n        flex: 1;\r\n\r\n        &.hassubinfo {\r\n          display: flex;\r\n\r\n          .button-text {\r\n            flex: 1;\r\n            text-overflow: ellipsis;\r\n            overflow: hidden;\r\n            min-width: 0;\r\n          }\r\n          .subinfo {\r\n            flex: none;\r\n            font-style: italic;\r\n          }\r\n        }\r\n      }\r\n\r\n      .overflow-counter {\r\n        font-weight: bold;\r\n        margin-left: rem-calc(8);\r\n      }\r\n    }\r\n\r\n    > .displayedoption[disabled] {\r\n      color: #6b6b6b;\r\n      border-color: #8a8a8a;\r\n      background: #f0f0f0;\r\n      cursor: default;\r\n    }\r\n\r\n    > .dropdown {\r\n      -webkit-overflow-scrolling: touch;\r\n\r\n      @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\r\n      @include transition(transform 0.25s ease);\r\n      @include scale($xVal: 1, $yVal: 0);\r\n      @include transformOrigin(center top);\r\n      @include border-radius(3px);\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      background: #fff;\r\n      z-index: 100;\r\n      width: 100%;\r\n      font-size: rem-calc(14);\r\n\r\n      &.upwards {\r\n        top: unset;\r\n        bottom: calc(100% - 2.5rem);\r\n        @include transformOrigin(center bottom);\r\n      }\r\n\r\n      &.hidden {\r\n        visibility: hidden;\r\n      }\r\n    }\r\n\r\n    > .dropdown.open {\r\n      @include scale($xVal: 1, $yVal: 1);\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    & .button-wrapper {\r\n      & .displayedoption {\r\n        @include invalidBorder;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .error-message {\r\n    @include errorMessage;\r\n    margin-bottom: rem-calc(4);\r\n    top: 100%;\r\n    left: 0;\r\n  }\r\n}\r\n\r\n.options-wrapper {\r\n  max-height: rem-calc(200);\r\n  overflow: auto;\r\n}\r\n\r\n.select-all {\r\n  //display: inline-block;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  padding: rem-calc(20);\r\n  border: none;\r\n  margin: 0;\r\n  border-bottom: 2px solid $list-border-bottom-color;\r\n  background: $light-background;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  text-align: left; // fallback for browsers not supporting logical properties\r\n  text-align: start;\r\n  font-weight: 500;\r\n  color: $interactive-element;\r\n  user-select: none;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    outline: none;\r\n    background: #f4f4f4;\r\n  }\r\n}\r\n\r\n.search {\r\n  box-sizing: border-box;\r\n  border-bottom: 2px solid $list-border-bottom-color;\r\n  padding: rem-calc(20);\r\n\r\n  .searchfield-wrapper {\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    height: rem-calc(44);\r\n    width: 100%;\r\n    padding: 0 rem-calc(12);\r\n    @include border-radius(3px);\r\n    border: 1px solid $input-border-color;\r\n    &:focus,\r\n    &.focus {\r\n      @include field-focus;\r\n    }\r\n  }\r\n  .searchfield {\r\n    width: 100%;\r\n    border: none;\r\n    outline: none;\r\n    font-family: inherit;\r\n    font-size: rem-calc(14);\r\n    margin-left: rem-calc(4);\r\n  }\r\n  .icon:before {\r\n    @include mdi-icon;\r\n    content: \"\\f349\";\r\n    color: $gray;\r\n    font-size: rem-calc(14);\r\n  }\r\n}\r\n\r\n.search-results-message {\r\n  padding: rem-calc(20);\r\n  color: $body-text-color;\r\n  font-size: rem-calc(14);\r\n  font-style: italic;\r\n}\r\n\r\n.rtl {\r\n  > .dropdown {\r\n    @include transformOrigin(left top);\r\n    left: 0;\r\n    right: auto;\r\n\r\n    .option {\r\n      padding-left: rem-calc(48);\r\n      padding-right: rem-calc(20);\r\n    }\r\n  }\r\n\r\n  > .displayedoption {\r\n    padding: rem-calc(0 15 0 30);\r\n    text-align: right;\r\n\r\n    &:before {\r\n      right: auto;\r\n      left: rem-calc(9);\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, Host } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { generateId, getTextDir, shouldOpenUp, intl, debounce } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-select\",\r\n  styleUrl: \"wm-select.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Select {\r\n  @Element() el!: HTMLWmSelectElement;\r\n\r\n  private uid!: string;\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop({ mutable: true }) invalid: boolean = false;\r\n  @Prop() maxHeight?: string;\r\n  @Prop({ mutable: true }) label?: string;\r\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop({ mutable: true }) errorMessage: string = \"\";\r\n  @Prop() multiple: boolean = false;\r\n  @Prop() search: boolean = false;\r\n  @Prop() selectAll: boolean = false;\r\n  @Prop() placeholder: string = intl.formatMessage({\r\n    id: \"select.multiPlaceholder\",\r\n    defaultMessage: \"Make a selection\",\r\n    description: \"Placeholder text. Use imperative\",\r\n  });\r\n  @Prop() searchPlaceholder: string = intl.formatMessage({\r\n    id: \"select.searchPlaceholder\",\r\n    defaultMessage: \"Search\",\r\n    description: \"Placeholder text. Use imperative\",\r\n  });\r\n  @Prop() allSelectedMessage: string = intl.formatMessage({\r\n    id: \"select.allSelected\",\r\n    defaultMessage: \"All selected\",\r\n    description: \"Text displayed when all options are selected\",\r\n  });\r\n\r\n  requiredMessage = intl.formatMessage({\r\n    id: \"global.requiredField\",\r\n    defaultMessage: \"required field\",\r\n  });\r\n\r\n  selectAllMessage = intl.formatMessage({\r\n    id: \"select.selectAll\",\r\n    defaultMessage: \"Select All\",\r\n  });\r\n\r\n  deselectAllMessage = intl.formatMessage({\r\n    id: \"select.deselectAll\",\r\n    defaultMessage: \"Deselect All\",\r\n  });\r\n\r\n  allOptionsSelectedMessage = intl.formatMessage({\r\n    id: \"select.allOptionsSelected\",\r\n    defaultMessage: \"All options selected\",\r\n  });\r\n\r\n  allOptionsDeselectedMessage = intl.formatMessage({\r\n    id: \"select.allOptionsDeselected\",\r\n    defaultMessage: \"All options deselected\",\r\n  });\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() isExpanded: boolean = false;\r\n  @State() announcement: string = \"\";\r\n  @Event() wmSelectDidLoad!: EventEmitter<void>;\r\n  @Event() wmSelectBlurred!: EventEmitter<void>;\r\n  @Event() wmSelectChanged!: EventEmitter<Object>;\r\n  @Event() wmComponentBlurred!: EventEmitter<void>; // deprecated in favor of wmSelectBlurred\r\n  @Event() wmSelectSearchChanged!: EventEmitter<Object>;\r\n\r\n  private buttonEl!: HTMLButtonElement;\r\n  private dropdownEl!: HTMLDivElement;\r\n  private selectAllEl!: HTMLButtonElement;\r\n  private listboxEl!: HTMLDivElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n  private searchFieldWrapperEl!: HTMLDivElement;\r\n  private searchFieldEl!: HTMLInputElement;\r\n  private errorContainer!: HTMLDivElement;\r\n  private keysSoFar: string = \"\";\r\n  private searchIndex: number = 0;\r\n  private openUp: boolean = false;\r\n  get childOptions() {\r\n    return Array.from(this.el.querySelectorAll(\"wm-option\"));\r\n  }\r\n  get duplicateOptions(): HTMLWmOptionElement[] {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\"wm-option\"));\r\n  }\r\n  get allOptionEls(): HTMLWmOptionElement[] {\r\n    // this includes both slotted wm-options and internally created wm-options\r\n    return this.duplicateOptions.concat(this.childOptions);\r\n  }\r\n  get visibleOptionEls(): HTMLWmOptionElement[] {\r\n    return this.allOptionEls.filter(\r\n      (option) => !option.classList.contains(\"hidden\") && !option.classList.contains(\"filtered-out\")\r\n    );\r\n  }\r\n\r\n  //////////////////////////////////////\r\n  // for search variants\r\n  get searchTerm(): string {\r\n    return this.searchFieldEl ? this.searchFieldEl.value : \"\";\r\n  }\r\n  get filteredOptions(): HTMLWmOptionElement[] {\r\n    return this.childOptions.filter((option) =>\r\n      option.textContent?.toLowerCase().includes(this.searchTerm.toLowerCase())\r\n    );\r\n  }\r\n  //////////////////////////////////////\r\n\r\n  //////////////////////////////////////\r\n  // for multiselect button text\r\n  private overflowCount: number = 0;\r\n  get selectedOptions(): HTMLWmOptionElement[] {\r\n    return Array.from(this.el.querySelectorAll(\"wm-option\")).filter((x) => x.selected);\r\n  }\r\n  private displayedOptions: HTMLWmOptionElement[] = [];\r\n  get allSelected() {\r\n    return this.childOptions.every((option) => option.selected);\r\n  }\r\n  //////////////////////////////////////\r\n\r\n  get resultsFoundMessage() {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"select.searchResultsFound\",\r\n        defaultMessage: \"{numResults, plural, one {1 option found} other {# options found}}\",\r\n        description: \"The message read by the screen reader, indicating how many results a search returned\",\r\n      },\r\n      { numResults: this.filteredOptions.length }\r\n    );\r\n  }\r\n\r\n  get noResultsFoundMessage() {\r\n    return intl.formatMessage({\r\n      id: \"select.noSearchResults\",\r\n      defaultMessage: \"No results found. Please try your search again.\",\r\n      description: \"The message displayed when no options pass the search filter\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"wmOptionSelected\")\r\n  handleOptionSelection(ev: CustomEvent): void {\r\n    const option: HTMLWmOptionElement = ev.detail;\r\n    this.focusOption(option);\r\n    if (!this.multiple) {\r\n      // if the option was already selected, leave selected states untouched and don't fire the event\r\n      if (!option.selected) {\r\n        this.selectOption(option);\r\n        const detail = { changedOption: option, selectedOptions: [option] };\r\n        this.wmSelectChanged.emit(detail);\r\n        // change is deprecated in favor of wmSelectChanged\r\n        // because of issues with React wrappers when using native events name\r\n        const event = new CustomEvent(\"change\", { detail: detail });\r\n        // @ts-ignore\r\n        this.el.dispatchEvent(event);\r\n      }\r\n      this.close();\r\n    } else {\r\n      this.selectOption(option);\r\n      // we pass the original option with the event, as it's the only one the devs know or care about\r\n      // devs will typically set a `value` on the option, which is not copied over\r\n      // we could have taken the value and put it on the duplicate option,\r\n      // but this approach is more flexible (what if they want to have a data attribute?)\r\n      const isDuplicate: boolean = option.classList.contains(\"duplicate\");\r\n      const originalOption: HTMLWmOptionElement = isDuplicate ? this.findCorrespondingOption(option) : option;\r\n      const selectedOptions = this.childOptions.filter((o) => o.selected);\r\n      const detail = { changedOption: originalOption, selectedOptions: selectedOptions };\r\n      this.wmSelectChanged.emit(detail);\r\n      // change is deprecated in favor of wmSelectChanged\r\n      // because of issues with React wrappers when using native events name\r\n      const event = new CustomEvent(\"change\", { detail: detail });\r\n      // @ts-ignore\r\n      this.el.dispatchEvent(event);\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmEnterKeyPressed\")\r\n  handleChildEnter(): void {\r\n    // only occurs for multiselects. handle the click, then close\r\n    this.close();\r\n  }\r\n\r\n  @Listen(\"wmKeyUpPressed\")\r\n  handleChildUp(ev: CustomEvent): void {\r\n    this.moveUp(ev.detail as HTMLWmOptionElement);\r\n  }\r\n\r\n  @Listen(\"wmKeyDownPressed\")\r\n  handleChildDown(ev: CustomEvent): void {\r\n    this.moveDown(ev.detail as HTMLWmOptionElement);\r\n  }\r\n\r\n  @Listen(\"wmHomeKeyPressed\")\r\n  moveToFirstOption(): void {\r\n    this.focusOption(this.visibleOptionEls[0]);\r\n  }\r\n\r\n  @Listen(\"wmEndKeyPressed\")\r\n  moveToLastOption(): void {\r\n    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\r\n  }\r\n\r\n  @Listen(\"wmEscKeyPressed\")\r\n  closePopupOnEscape(): void {\r\n    this.close();\r\n  }\r\n\r\n  @Listen(\"wmOptionBlurred\")\r\n  handleOptionBlur(ev: CustomEvent): void {\r\n    // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget\r\n    // keeps our component's blur events accurate, and closes when focusing browser address bar\r\n    if (!this.isElOrChild(ev.detail.relatedTarget)) {\r\n      const event = new CustomEvent(\"blur\");\r\n      // @ts-ignore\r\n      event.relatedTarget = ev.detail.relatedTarget;\r\n      this.el.dispatchEvent(event);\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\", capture: true })\r\n  handleClick(ev: MouseEvent): void {\r\n    if (!this.isElOrChild(ev.target as HTMLElement)) {\r\n      this.close();\r\n    }\r\n  }\r\n\r\n  handleSelectAllClick() {\r\n    this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();\r\n  }\r\n\r\n  selectAllOptions() {\r\n    this.allOptionEls.forEach((o) => (o.selected = true));\r\n    this.setSelectAllButton();\r\n    this.setButtonText();\r\n    const detail = { changedOption: null, selectedOptions: this.childOptions };\r\n    this.wmSelectChanged.emit(detail);\r\n  }\r\n\r\n  deselectAllOptions() {\r\n    this.allOptionEls.forEach((o) => (o.selected = false));\r\n    this.setSelectAllButton();\r\n    this.setButtonText();\r\n    const detail = { changedOption: null, selectedOptions: [] };\r\n    this.wmSelectChanged.emit(detail);\r\n  }\r\n\r\n  handleButtonBlur(ev: FocusEvent) {\r\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\r\n      // do not emit a blur event when opening the dropdown and focusing the Options\r\n      ev.stopPropagation();\r\n    }\r\n  }\r\n\r\n  handleSearchFieldBlur(ev: FocusEvent) {\r\n    this.searchFieldWrapperEl.classList.remove(\"focus\");\r\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\r\n      // do not emit a blur event when moving from searchfield to options\r\n      ev.stopPropagation();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKey(ev: KeyboardEvent): void {\r\n    switch (ev.key) {\r\n      case \"ArrowDown\":\r\n        if (this.isExpanded === false) {\r\n          ev.preventDefault();\r\n          this.open(\"next\");\r\n        }\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        if (this.isExpanded === false) {\r\n          ev.preventDefault();\r\n          this.open(\"previous\");\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.error(\r\n        \"For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).\"\r\n      );\r\n    }\r\n\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    // set initial selections\r\n    if (this.selectedOptions.length > 0) {\r\n      this.selectedOptions.forEach((x) => {\r\n        this.displayedOptions.push(x);\r\n      });\r\n      // single Select only, pre-select if no default option from dev\r\n    } else if (!this.multiple) {\r\n      this.selectOption(this.allOptionEls[0]);\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.wmSelectDidLoad.emit();\r\n    this.dropdownEl.classList.add(\"hidden\");\r\n    forceUpdate(this.el);\r\n\r\n    // Dev can overwrite the max-height rule set in the Sass file\r\n    if (this.maxHeight) {\r\n      this.listboxEl.style.maxHeight = this.maxHeight;\r\n    }\r\n\r\n    if (this.multiple) {\r\n      this.updateOptionVisibility();\r\n    }\r\n    this.setButtonText();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    if (this.multiple) {\r\n      // find last visible duplicate option and apply .last class\r\n      const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains(\"duplicate\"));\r\n      visibleDuplicateOptions.forEach((option, idx) => {\r\n        if (idx === visibleDuplicateOptions.length - 1) {\r\n          option.classList.add(\"last\");\r\n        } else {\r\n          option.classList.remove(\"last\");\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  moveUp(el: HTMLElement) {\r\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\r\n    if (this.selectAllEl) {\r\n      focusableEls.unshift(this.selectAllEl);\r\n    }\r\n    if (this.searchFieldEl) {\r\n      focusableEls.unshift(this.searchFieldEl);\r\n    }\r\n\r\n    const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];\r\n\r\n    if (prevEl) {\r\n      this.focusOption(prevEl);\r\n    }\r\n  }\r\n\r\n  moveDown(el: HTMLElement) {\r\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\r\n    if (this.selectAllEl) {\r\n      focusableEls.unshift(this.selectAllEl);\r\n    }\r\n    if (this.searchFieldEl) {\r\n      focusableEls.unshift(this.searchFieldEl);\r\n    }\r\n\r\n    const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];\r\n\r\n    if (nextEl) {\r\n      this.focusOption(nextEl);\r\n    }\r\n  }\r\n\r\n  open(optionToSelect?: \"next\" | \"previous\"): void {\r\n    if (!this.disabled) {\r\n      const elHeight = this.el.clientHeight;\r\n      const buttonHeight = this.buttonEl.clientHeight;\r\n      this.openUp = shouldOpenUp(\r\n        this.el,\r\n        this.dropdownEl,\r\n        // when opening up, dropdown covers both label and button\r\n        elHeight,\r\n        // when opening down, dropdown covers only the button\r\n        buttonHeight\r\n      );\r\n      this.isExpanded = true;\r\n      this.dropdownEl.classList.remove(\"hidden\");\r\n\r\n      window.requestAnimationFrame(() => {\r\n        switch (optionToSelect) {\r\n          case \"next\":\r\n            // search variant focuses search field\r\n            // all others focus option \"after\" last selected option  (this can be the first option)\r\n            if (this.search) {\r\n              this.searchFieldEl.focus();\r\n              this.listboxEl.scrollTop = 0;\r\n            } else {\r\n              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);\r\n            }\r\n            break;\r\n          case \"previous\":\r\n            // search variant focuses last option\r\n            // all others focus option \"above\" first selected option (this can be the last option)\r\n            if (this.search) {\r\n              this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\r\n            } else {\r\n              this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);\r\n            }\r\n            break;\r\n          default:\r\n            // search variant focuses search field\r\n            // all others focus the selected option\r\n            // if no option is selected (empty multiselect), focuses first option\r\n            if (this.search) {\r\n              this.searchFieldEl.focus();\r\n              this.listboxEl.scrollTop = 0;\r\n            } else if (this.selectedOptions.length > 0) {\r\n              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);\r\n            } else {\r\n              this.focusOption(this.visibleOptionEls[0]);\r\n            }\r\n            break;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  close(returnFocus: boolean = true): void {\r\n    if (this.isExpanded) {\r\n      this.isExpanded = false;\r\n      this.allOptionEls.map((i) => (i.focused = false));\r\n\r\n      window.setTimeout(() => {\r\n        this.dropdownEl.classList.add(\"hidden\");\r\n        if (this.multiple) {\r\n          this.updateOptionVisibility();\r\n        }\r\n        // clear search field, reset filtered / bolded state of wm-options\r\n        if (this.search) {\r\n          this.searchFieldEl.value = \"\";\r\n          this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\r\n        }\r\n        // Returns focus to button after popup closes (no need if user is tabbing)\r\n        // Delay is necessary for screenreader to get new expanded state before focus\r\n        // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\r\n        // also UX wise, it makes sense for the button to only be focused after the animation is complete\r\n        if (returnFocus) {\r\n          this.buttonEl.focus();\r\n        }\r\n      }, 150);\r\n    }\r\n  }\r\n\r\n  updateOptionVisibility() {\r\n    // this runs for search multiselects, where selected options are rendered at the top of the dropdown list\r\n    // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected\r\n    this.childOptions.forEach((option, idx) => {\r\n      const duplicateOption = this.duplicateOptions[idx];\r\n      if (option.selected) {\r\n        option.classList.add(\"hidden\");\r\n        duplicateOption.classList.remove(\"hidden\");\r\n      } else {\r\n        option.classList.remove(\"hidden\");\r\n        duplicateOption.classList.add(\"hidden\");\r\n      }\r\n    });\r\n  }\r\n\r\n  focusOption(option: HTMLElement): void {\r\n    this.allOptionEls.forEach((i) => (i.focused = i === option));\r\n\r\n    // option must be scrolledIntoView before focused\r\n    // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view\r\n    option.scrollIntoView({ block: \"nearest\" });\r\n\r\n    // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))\r\n    // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to\r\n    // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms\r\n    window.setTimeout(() => option.scrollIntoView({ block: \"nearest\" }), 60);\r\n\r\n    option.focus();\r\n  }\r\n\r\n  selectOption(option: HTMLWmOptionElement): void {\r\n    // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option\r\n    if (option.classList.contains(\"duplicate\")) {\r\n      // if clicking on a duplicate option, toggle selected property of real one, then rerender\r\n      const correspondingOption = this.findCorrespondingOption(option);\r\n      correspondingOption.selected = !correspondingOption.selected;\r\n      forceUpdate(this.el);\r\n    } else if (this.multiple) {\r\n      option.selected = !option.selected;\r\n    } else {\r\n      this.childOptions.forEach((x) => (x.selected = x === option));\r\n    }\r\n    // update the selectAll checkbox when an option is de/selected\r\n    // checking is the el is present, implies that this.multiple and this.selectAll are true\r\n    if (this.selectAllEl) {\r\n      this.setSelectAllButton();\r\n    }\r\n    this.setButtonText();\r\n  }\r\n\r\n  @Listen(\"wmLetterPressed\")\r\n  findAndFocusOption(ev: CustomEvent): void {\r\n    const character = ev.detail.toLowerCase();\r\n\r\n    if (!this.keysSoFar) {\r\n      // if first character entered, set currently focused option as the starting index for the search\r\n      this.visibleOptionEls.forEach((option, idx) => {\r\n        if (option.focused) {\r\n          this.searchIndex = idx;\r\n        }\r\n      });\r\n    }\r\n\r\n    this.keysSoFar += character;\r\n\r\n    let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);\r\n    if (!nextMatch) {\r\n      // if match can't be found from starting option downwards, search from top\r\n      nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);\r\n    }\r\n\r\n    if (nextMatch) {\r\n      // findMatchInRange still might have returned null, only focus if match found\r\n      this.focusOption(nextMatch as HTMLWmOptionElement);\r\n    }\r\n    this.debouncedClearKeysSoFar();\r\n  }\r\n\r\n  debouncedClearKeysSoFar = debounce(() => {\r\n    this.keysSoFar = \"\";\r\n  }, 500);\r\n\r\n  findMatchInRange(list: HTMLWmOptionElement[], startIndex: number, endIndex: number): HTMLWmOptionElement | null {\r\n    let match: HTMLWmOptionElement | null = null;\r\n    let optionsInRange = list.slice(startIndex, endIndex);\r\n\r\n    // Find the first option starting with the keysSoFar substring, searching in\r\n    // the specified range of options\r\n    optionsInRange.forEach((option) => {\r\n      const label = option.textContent;\r\n      if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {\r\n        match = option;\r\n      }\r\n    });\r\n\r\n    return match;\r\n  }\r\n\r\n  findCorrespondingOption(el: HTMLWmOptionElement): HTMLWmOptionElement {\r\n    // if duplicate, returns the child wm-option\r\n    // if child wm-option, returns duplicate\r\n    const isDuplicate = el.classList.contains(\"duplicate\");\r\n    return isDuplicate\r\n      ? this.childOptions[this.duplicateOptions.indexOf(el)]\r\n      : this.duplicateOptions[this.childOptions.indexOf(el)];\r\n  }\r\n\r\n  isElOrChild(el: HTMLElement) {\r\n    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot\r\n    return el === this.el || this.el.contains(el) || this.el.shadowRoot?.contains(el);\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  exposeErrors() {\r\n    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683\r\n    const newId = generateId();\r\n    this.errorContainer.id = `wm-errors-${newId}`;\r\n    this.buttonEl.setAttribute(\"aria-describedby\", `wm-errors-${newId}`);\r\n  }\r\n\r\n  renderErrorContainer() {\r\n    return (\r\n      <div\r\n        id=\"wm-errors\"\r\n        class={this.errorMessage ? \"error-message\" : \"\"}\r\n        ref={(el) => (this.errorContainer = el as HTMLDivElement)}\r\n        aria-live=\"assertive\"\r\n        aria-atomic=\"true\"\r\n      >\r\n        {this.errorMessage}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  handleComponentBlur(ev: FocusEvent): void {\r\n    // Do not close or emit custom blur event when blurring to an element inside (wm-option)\r\n    if (!this.el.contains(ev.relatedTarget as Node)) {\r\n      this.close(false);\r\n      this.wmSelectBlurred.emit();\r\n      this.wmComponentBlurred.emit(); // deprecated\r\n    }\r\n  }\r\n\r\n  // on search field or select all. keydown on options is handled via events.\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    const el = ev.target as HTMLElement;\r\n    switch (ev.key) {\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        this.moveDown(ev.target as HTMLElement);\r\n        break;\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        this.moveUp(ev.target as HTMLElement);\r\n        break;\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        this.close();\r\n        break;\r\n      case \"Enter\":\r\n        if (el === this.selectAllEl) {\r\n          ev.preventDefault();\r\n          this.handleSelectAllClick();\r\n          this.close();\r\n        }\r\n        break;\r\n      case \" \":\r\n        if (el === this.selectAllEl) {\r\n          ev.preventDefault();\r\n          this.handleSelectAllClick();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  debouncedSearch = debounce(() => {\r\n    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\r\n\r\n    if (this.filteredOptions.length) {\r\n      this.announce(this.resultsFoundMessage);\r\n    } else {\r\n      this.announce(this.noResultsFoundMessage);\r\n    }\r\n  }, 150);\r\n\r\n  setButtonText() {\r\n    this.displayedOptions = this.childOptions\r\n      .filter((x) => x.selected)\r\n      .map((y) => (!y.classList.contains(\"hidden\") ? y : this.findCorrespondingOption(y)));\r\n\r\n    // handle overflow + counter for multiselect\r\n    if (this.multiple) {\r\n      // this is a fixed measurement accounting for the max width of a 3 character overflow counter\r\n      const overflowCounterWidth = 38;\r\n      const computedStyle = window.getComputedStyle(this.buttonEl);\r\n\r\n      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually\r\n      const paddingLeft = parseInt(computedStyle.getPropertyValue(\"padding-left\").slice(0, -2));\r\n      const paddingRight = parseInt(computedStyle.getPropertyValue(\"padding-right\").slice(0, -2));\r\n\r\n      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;\r\n\r\n      let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot!.querySelector(\".option-wrapper\")!.clientWidth);\r\n\r\n      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);\r\n      this.overflowCount = 0;\r\n\r\n      while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {\r\n        this.overflowCount++;\r\n        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];\r\n        optionsWidths.pop();\r\n        this.displayedOptions.pop();\r\n      }\r\n    }\r\n  }\r\n\r\n  setSelectAllButton() {\r\n    if (this.allSelected) {\r\n      this.selectAllEl.textContent = this.deselectAllMessage;\r\n      this.announce(this.allOptionsSelectedMessage);\r\n    } else {\r\n      this.selectAllEl.textContent = this.selectAllMessage;\r\n      if (this.selectedOptions.length === 0) {\r\n        this.announce(this.allOptionsDeselectedMessage);\r\n      }\r\n    }\r\n  }\r\n\r\n  announce(message: string) {\r\n    // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\r\n    if (this.liveRegionEl.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  renderButtonText() {\r\n    if (this.multiple && this.displayedOptions.length < 1) {\r\n      return <span>{this.placeholder}</span>;\r\n    } else if (this.multiple && this.allSelected && this.overflowCount > 0) {\r\n      return this.allSelectedMessage;\r\n    } else {\r\n      return this.displayedOptions.map((x, idx) => (\r\n        <span>\r\n          {idx > 0 ? \", \" : \"\"}\r\n          {x.textContent}\r\n        </span>\r\n      ));\r\n    }\r\n  }\r\n\r\n  renderSubinfo() {\r\n    // multiselects cannot have subinfo for options\r\n    if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {\r\n      return <span class=\"subinfo\">{this.selectedOptions[0].subinfo}</span>;\r\n    }\r\n  }\r\n\r\n  renderOverflowCount() {\r\n    if (this.overflowCount > 0 && !this.allSelected) {\r\n      return (\r\n        <span>\r\n          <span class=\"overflow-counter\">+{this.overflowCount}</span>\r\n        </span>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderSearchField() {\r\n    return (\r\n      <div class=\"search\">\r\n        <div class=\"searchfield-wrapper\" ref={(el) => (this.searchFieldWrapperEl = el as HTMLInputElement)}>\r\n          <div class=\"icon\"></div>\r\n          <input\r\n            ref={(el) => (this.searchFieldEl = el as HTMLInputElement)}\r\n            class=\"searchfield\"\r\n            role=\"combobox\"\r\n            aria-controls={`list-${this.uid}`}\r\n            aria-expanded={this.isExpanded ? \"true\" : \"false\"}\r\n            onKeyDown={(ev) => this.handleKeyDown(ev)}\r\n            onFocus={() => this.searchFieldWrapperEl.classList.add(\"focus\")}\r\n            onBlur={(ev) => this.handleSearchFieldBlur(ev)}\r\n            onInput={() => this.debouncedSearch()}\r\n            placeholder={this.searchPlaceholder}\r\n          ></input>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderSearchFailedMessage() {\r\n    return <div class=\"search-results-message\">{this.noResultsFoundMessage}</div>;\r\n  }\r\n\r\n  renderSelectAllButton() {\r\n    if (this.selectAll && this.multiple && this.searchTerm == \"\") {\r\n      return (\r\n        <button\r\n          ref={(el) => (this.selectAllEl = el as HTMLButtonElement)}\r\n          class=\"select-all\"\r\n          onClick={() => this.handleSelectAllClick()}\r\n          onKeyDown={(ev) => this.handleKeyDown(ev)}\r\n          tabindex=\"-1\"\r\n        >\r\n          {this.allSelected ? this.deselectAllMessage : this.selectAllMessage}\r\n        </button>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderDuplicateOptions() {\r\n    return Array.from(this.el.children).map((option) => {\r\n      return (\r\n        <wm-option class=\"duplicate\" selected={(option as HTMLWmOptionElement).selected}>\r\n          {option.textContent}\r\n        </wm-option>\r\n      );\r\n    });\r\n  }\r\n\r\n  render() {\r\n    const buttonProps = {\r\n      id: `selectbtn-${this.uid}`,\r\n      [\"disabled\"]: this.disabled,\r\n      [\"aria-controls\"]: `list-${this.uid}`,\r\n      [\"aria-labelledby\"]: `label-${this.uid} selectbtn-${this.uid}`,\r\n      [\"aria-describedby\"]: \"wm-errors\",\r\n      [\"aria-expanded\"]: this.isExpanded ? \"true\" : \"false\",\r\n      onClick: () => (this.isExpanded ? this.close() : this.open()),\r\n    };\r\n\r\n    return (\r\n      <Host onBlur={(ev: FocusEvent) => this.handleComponentBlur(ev)}>\r\n        <div\r\n          class={`wrapper ${getTextDir()} label-${this.labelPosition} ${\r\n            this.invalid || this.errorMessage ? \"invalid\" : \"\"\r\n          }`}\r\n        >\r\n          <div class=\"label-wrapper\">\r\n            <label class=\"label\" id={`label-${this.uid}`} htmlFor={`selectbtn-${this.uid}`}>\r\n              {this.label}\r\n              {\r\n                // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)\r\n                this.requiredField ? (\r\n                  <span class=\"required\">\r\n                    <span class=\"sr-only\">{this.requiredMessage}</span>\r\n                    <span aria-hidden=\"true\">*</span>\r\n                  </span>\r\n                ) : (\r\n                  \"\"\r\n                )\r\n              }\r\n            </label>\r\n          </div>\r\n          <div class=\"button-wrapper\">\r\n            <button\r\n              {...buttonProps}\r\n              class={`displayedoption ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n              ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\r\n              onBlur={(ev) => this.handleButtonBlur(ev)}\r\n              onFocus={() => this.close()}\r\n            >\r\n              <span\r\n                class={\r\n                  this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0\r\n                    ? \"overflowcontrol hassubinfo\"\r\n                    : \"overflowcontrol\"\r\n                }\r\n              >\r\n                <span class=\"button-text\">{this.renderButtonText()}</span>\r\n                {this.renderSubinfo()}\r\n              </span>\r\n              {this.renderOverflowCount()}\r\n            </button>\r\n            <div\r\n              class={`dropdown ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\r\n              ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\r\n            >\r\n              {this.search && this.renderSearchField()}\r\n              <div\r\n                id={`list-${this.uid}`}\r\n                class=\"options-wrapper\"\r\n                tabindex={-1}\r\n                role=\"listbox\"\r\n                aria-multiselectable={this.multiple ? \"true\" : null}\r\n                aria-labelledby={`label-${this.uid}`}\r\n                ref={(el) => (this.listboxEl = el as HTMLDivElement)}\r\n              >\r\n                {this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage()}\r\n                {this.renderSelectAllButton()}\r\n                {this.multiple && this.renderDuplicateOptions()}\r\n                <slot />\r\n              </div>\r\n            </div>\r\n            {this.renderErrorContainer()}\r\n            <div\r\n              id=\"announcement\"\r\n              aria-live=\"polite\"\r\n              class=\"sr-only\"\r\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n            >\r\n              {this.announcement}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oOAAA,IAAMA,YAAc,09E,ICOPC,OAAM,W,omBAI2BC,U,cACC,M,cACA,M,aAClB,M,gBAaG,E,CAG9BC,OAAAC,eAAIH,EAAAI,UAAA,cAAW,C,IAAf,WACE,IAAIC,EAAU,GACd,GAAIC,KAAKC,QAAS,CAChBF,EAAQG,KAAK,a,CAEf,GAAIF,KAAKG,eAAeC,SAAU,CAChCL,EAAQG,KAAK,e,CAEf,IAAKF,KAAKK,GAAGC,YAAaC,cAAcC,SAASR,KAAKS,YAAa,CACjEV,EAAQG,KAAK,e,CAEf,OAAOH,EAAQW,KAAK,I,uCAGtBd,OAAAC,eAAIH,EAAAI,UAAA,iBAAc,C,IAAlB,W,MACE,QAAOa,EAAAX,KAAKK,GAAGO,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,YAAa,YACrCb,KAAKK,GAAGS,cAA6BC,KACtCf,KAAKK,GAAGO,a,uCAIflB,EAAAI,UAAAkB,cAAA,SAAcC,GACZ,OAAQA,EAAGC,KACT,IAAK,UACHD,EAAGE,iBACHnB,KAAKoB,eAAeC,KAAKrB,KAAKK,IAC9B,MAEF,IAAK,YACHY,EAAGE,iBACHnB,KAAKsB,iBAAiBD,KAAKrB,KAAKK,IAChC,MAEF,IAAK,QACHY,EAAGE,iBACH,IAAKnB,KAAKuB,SAAU,CAClBvB,KAAKK,GAAGmB,QACRxB,KAAKyB,kBAAkBJ,KAAKrB,KAAKK,G,CAEnC,MAEF,IAAK,IACHY,EAAGE,iBACHnB,KAAKK,GAAGmB,QACR,MAEF,IAAK,SACHP,EAAGE,iBACHF,EAAGS,kBACH1B,KAAK2B,gBAAgBN,OACrB,MAEF,IAAK,OACHJ,EAAGE,iBACHnB,KAAK4B,iBAAiBP,OACtB,MAEF,IAAK,MACHJ,EAAGE,iBACHnB,KAAK6B,gBAAgBR,OACrB,MAEF,QACE,GAAIJ,EAAGC,IAAIY,SAAW,EAAG,CAEvB9B,KAAK+B,gBAAgBV,KAAKJ,EAAGC,I,IAMrCxB,EAAAI,UAAAkC,gBAAA,WACE,IAAKhC,KAAKuB,SAAU,CAGlBvB,KAAKiC,iBAAiBZ,KAAKrB,KAAKK,G,GAKpCX,EAAAI,UAAAoC,WAAA,SAAWjB,GACTjB,KAAKmC,gBAAgBd,KAAK,CAAEe,cAAenB,EAAGmB,e,EAIhD1C,EAAAI,UAAAuC,iBAAA,WAGErC,KAAKsC,SAAWtC,KAAKK,GAAGkC,aAAa,gBAAiB,QAAUvC,KAAKK,GAAGmC,gBAAgB,gB,EAI1F9C,EAAAI,UAAA2C,iBAAA,WACEzC,KAAKuB,SAAWvB,KAAKK,GAAGkC,aAAa,gBAAiB,QAAUvC,KAAKK,GAAGmC,gBAAgB,gB,EAI1F9C,EAAAI,UAAA4C,sBAAA,WACE,GAAI1C,KAAKuB,UAAYvB,KAAKK,GAAGsC,QAAS,CACpC3C,KAAK4C,YAAc5C,KAAKK,GAAGsC,QAC3B3C,KAAKK,GAAGsC,QAAU,I,MACb,IAAK3C,KAAKuB,UAAYvB,KAAK4C,YAAa,CAC7C5C,KAAKK,GAAGsC,QAAU3C,KAAK4C,W,GAI3BlD,EAAAI,UAAA+C,aAAA,SAAa5B,GAEXjB,KAAKS,WAAaQ,EAAG6B,OAAOrC,WAAWF,cAEvC,GAAIP,KAAKS,WAAY,CACnB,IAAMsC,EAAS,IAAIC,OAAO,GAAAC,OAAGjD,KAAKS,YAAc,MAChD,IAAMyC,EAAalD,KAAKK,GAAGC,YAAa6C,QAAQJ,GAAQ,SAACK,GAAU,iBAAAH,OAAWG,EAAK,YAAhB,IAGnEpD,KAAKqD,OAAOC,UAAYJ,C,KACnB,CACLlD,KAAKqD,OAAOC,UAAYtD,KAAKK,GAAGC,W,GAIpCZ,EAAAI,UAAAyD,kBAAA,eAAAC,EAAAxD,KACEA,KAAKqC,mBACLrC,KAAKyC,mBACLzC,KAAK0C,wBAEL1C,KAAKG,eAAesD,iBAAiB,yBAAyB,SAACxC,GAAO,OAAAuC,EAAKX,aAAa5B,EAAlB,G,EAGxEvB,EAAAI,UAAA4D,OAAA,eAAAF,EAAAxD,KACE,OACE2D,EAACC,KAAI,CAACC,KAAK,SAASC,SAAU9D,KAAK+D,QAAU,GAAK,EAAGC,MAAOhE,KAAKiE,aAC/DN,EAAA,OAAKK,MAAO,kBAAAf,OAAkBjD,KAAKG,eAAeC,SAAW,WAAa,KACxEuD,EAAA,sBAAkB,OAAOO,IAAK,SAAC7D,GAAE,OAAMmD,EAAKH,OAAShD,CAApB,GAC9BL,KAAKK,GAAGC,aAEXqD,EAAA,QAAMK,MAAM,WAAWhE,KAAKK,GAAGC,cAEjCqD,EAAA,OAAKK,MAAM,WAAWhE,KAAKC,S,qTAjKhB,G,yBCPnB,IAAMkE,YAAc,i7P,ICSPC,OAAM,W,2WA8BjBpE,KAAAqE,gBAAkBC,KAAKC,cAAc,CACnCC,GAAI,uBACJC,eAAgB,mBAGlBzE,KAAA0E,iBAAmBJ,KAAKC,cAAc,CACpCC,GAAI,mBACJC,eAAgB,eAGlBzE,KAAA2E,mBAAqBL,KAAKC,cAAc,CACtCC,GAAI,qBACJC,eAAgB,iBAGlBzE,KAAA4E,0BAA4BN,KAAKC,cAAc,CAC7CC,GAAI,4BACJC,eAAgB,yBAGlBzE,KAAA6E,4BAA8BP,KAAKC,cAAc,CAC/CC,GAAI,8BACJC,eAAgB,2BAoBVzE,KAAA8E,UAAoB,GACpB9E,KAAA+E,YAAsB,EACtB/E,KAAAgF,OAAkB,MA+BlBhF,KAAAiF,cAAwB,EAIxBjF,KAAAkF,iBAA0C,GAmalDlF,KAAAmF,wBAA0BC,UAAS,WACjC5B,EAAKsB,UAAY,E,GAChB,KA+FH9E,KAAAqF,gBAAkBD,UAAS,WACzB5B,EAAK8B,sBAAsBjE,KAAK,CAAEZ,WAAY+C,EAAK/C,aAEnD,GAAI+C,EAAK+B,gBAAgBzD,OAAQ,CAC/B0B,EAAKgC,SAAShC,EAAKiC,oB,KACd,CACLjC,EAAKgC,SAAShC,EAAKkC,sB,IAEpB,K,cArnB0C,M,aACD,M,iEAGK,M,mBAChB,M,kBACe,G,cACpB,M,YACF,M,eACG,M,iBACCpB,KAAKC,cAAc,CAC/CC,GAAI,0BACJC,eAAgB,mBAChBkB,YAAa,qC,uBAEqBrB,KAAKC,cAAc,CACrDC,GAAI,2BACJC,eAAgB,SAChBkB,YAAa,qC,wBAEsBrB,KAAKC,cAAc,CACtDC,GAAI,qBACJC,eAAgB,eAChBkB,YAAa,iD,eA4Be,M,gBACC,M,kBACC,E,CAkBhC/F,OAAAC,eAAIuE,EAAAtE,UAAA,eAAY,C,IAAhB,WACE,OAAO8F,MAAMC,KAAK7F,KAAKK,GAAGyF,iBAAiB,a,uCAE7ClG,OAAAC,eAAIuE,EAAAtE,UAAA,mBAAgB,C,IAApB,WACE,OAAO8F,MAAMC,KAAK7F,KAAKK,GAAG0F,WAAYD,iBAAiB,a,uCAEzDlG,OAAAC,eAAIuE,EAAAtE,UAAA,eAAY,C,IAAhB,WAEE,OAAOE,KAAKgG,iBAAiB/C,OAAOjD,KAAKiG,a,uCAE3CrG,OAAAC,eAAIuE,EAAAtE,UAAA,mBAAgB,C,IAApB,WACE,OAAOE,KAAKkG,aAAaC,QACvB,SAACC,GAAW,OAACA,EAAOC,UAAUC,SAAS,YAAcF,EAAOC,UAAUC,SAAS,eAAnE,G,uCAMhB1G,OAAAC,eAAIuE,EAAAtE,UAAA,aAAU,C,IAAd,WACE,OAAOE,KAAKuG,cAAgBvG,KAAKuG,cAAcC,MAAQ,E,uCAEzD5G,OAAAC,eAAIuE,EAAAtE,UAAA,kBAAe,C,IAAnB,eAAA0D,EAAAxD,KACE,OAAOA,KAAKiG,aAAaE,QAAO,SAACC,GAAM,IAAAzF,EACrC,OAAAA,EAAAyF,EAAO9F,eAAW,MAAAK,SAAA,SAAAA,EAAEJ,cAAcC,SAASgD,EAAK/C,WAAWF,cAAc,G,uCAQ7EX,OAAAC,eAAIuE,EAAAtE,UAAA,kBAAe,C,IAAnB,WACE,OAAO8F,MAAMC,KAAK7F,KAAKK,GAAGyF,iBAAiB,cAAcK,QAAO,SAACM,GAAM,OAAAA,EAAEnE,QAAF,G,uCAGzE1C,OAAAC,eAAIuE,EAAAtE,UAAA,cAAW,C,IAAf,WACE,OAAOE,KAAKiG,aAAaS,OAAM,SAACN,GAAW,OAAAA,EAAO9D,QAAP,G,uCAI7C1C,OAAAC,eAAIuE,EAAAtE,UAAA,sBAAmB,C,IAAvB,WACE,OAAOwE,KAAKC,cACV,CACEC,GAAI,4BACJC,eAAgB,qEAChBkB,YAAa,wFAEf,CAAEgB,WAAY3G,KAAKuF,gBAAgBzD,Q,uCAIvClC,OAAAC,eAAIuE,EAAAtE,UAAA,wBAAqB,C,IAAzB,WACE,OAAOwE,KAAKC,cAAc,CACxBC,GAAI,yBACJC,eAAgB,kDAChBkB,YAAa,gE,uCAKjBvB,EAAAtE,UAAA8G,gBAAA,WACE5G,KAAK6G,UAAY,I,EAInBzC,EAAAtE,UAAAgH,iBAAA,WACE9G,KAAK6G,UAAY,K,EAInBzC,EAAAtE,UAAAiH,sBAAA,SAAsB9F,GACpB,IAAMmF,EAA8BnF,EAAG6B,OACvC9C,KAAKgH,YAAYZ,GACjB,IAAKpG,KAAKI,SAAU,CAElB,IAAKgG,EAAO9D,SAAU,CACpBtC,KAAKiH,aAAab,GAClB,IAAMtD,EAAS,CAAEoE,cAAed,EAAQe,gBAAiB,CAACf,IAC1DpG,KAAKoH,gBAAgB/F,KAAKyB,GAG1B,IAAMuE,EAAQ,IAAIC,YAAY,SAAU,CAAExE,OAAQA,IAElD9C,KAAKK,GAAGkH,cAAcF,E,CAExBrH,KAAKwH,O,KACA,CACLxH,KAAKiH,aAAab,GAKlB,IAAMqB,EAAuBrB,EAAOC,UAAUC,SAAS,aACvD,IAAMoB,EAAsCD,EAAczH,KAAK2H,wBAAwBvB,GAAUA,EACjG,IAAMe,EAAkBnH,KAAKiG,aAAaE,QAAO,SAACyB,GAAM,OAAAA,EAAEtF,QAAF,IACxD,IAAMQ,EAAS,CAAEoE,cAAeQ,EAAgBP,gBAAiBA,GACjEnH,KAAKoH,gBAAgB/F,KAAKyB,GAG1B,IAAMuE,EAAQ,IAAIC,YAAY,SAAU,CAAExE,OAAQA,IAElD9C,KAAKK,GAAGkH,cAAcF,E,GAK1BjD,EAAAtE,UAAA+H,iBAAA,WAEE7H,KAAKwH,O,EAIPpD,EAAAtE,UAAAgI,cAAA,SAAc7G,GACZjB,KAAK+H,OAAO9G,EAAG6B,O,EAIjBsB,EAAAtE,UAAAkI,gBAAA,SAAgB/G,GACdjB,KAAKiI,SAAShH,EAAG6B,O,EAInBsB,EAAAtE,UAAAoI,kBAAA,WACElI,KAAKgH,YAAYhH,KAAKmI,iBAAiB,G,EAIzC/D,EAAAtE,UAAAsI,iBAAA,WACEpI,KAAKgH,YAAYhH,KAAKmI,iBAAiBnI,KAAKmI,iBAAiBrG,OAAS,G,EAIxEsC,EAAAtE,UAAAuI,mBAAA,WACErI,KAAKwH,O,EAIPpD,EAAAtE,UAAAwI,iBAAA,SAAiBrH,GAGf,IAAKjB,KAAKuI,YAAYtH,EAAG6B,OAAOV,eAAgB,CAC9C,IAAMiF,EAAQ,IAAIC,YAAY,QAE9BD,EAAMjF,cAAgBnB,EAAG6B,OAAOV,cAChCpC,KAAKK,GAAGkH,cAAcF,E,GAK1BjD,EAAAtE,UAAA0I,YAAA,SAAYvH,GACV,IAAKjB,KAAKuI,YAAYtH,EAAGwH,QAAwB,CAC/CzI,KAAKwH,O,GAITpD,EAAAtE,UAAA4I,qBAAA,WACE1I,KAAK2I,YAAc3I,KAAK4I,qBAAuB5I,KAAK6I,kB,EAGtDzE,EAAAtE,UAAA+I,iBAAA,WACE7I,KAAKkG,aAAa4C,SAAQ,SAAClB,GAAC,OAAMA,EAAEtF,SAAW,IAAnB,IAC5BtC,KAAK+I,qBACL/I,KAAKgJ,gBACL,IAAMlG,EAAS,CAAEoE,cAAe,KAAMC,gBAAiBnH,KAAKiG,cAC5DjG,KAAKoH,gBAAgB/F,KAAKyB,E,EAG5BsB,EAAAtE,UAAA8I,mBAAA,WACE5I,KAAKkG,aAAa4C,SAAQ,SAAClB,GAAC,OAAMA,EAAEtF,SAAW,KAAnB,IAC5BtC,KAAK+I,qBACL/I,KAAKgJ,gBACL,IAAMlG,EAAS,CAAEoE,cAAe,KAAMC,gBAAiB,IACvDnH,KAAKoH,gBAAgB/F,KAAKyB,E,EAG5BsB,EAAAtE,UAAAmJ,iBAAA,SAAiBhI,GACf,GAAIjB,KAAKuI,YAAYtH,EAAGmB,eAA+B,CAErDnB,EAAGS,iB,GAIP0C,EAAAtE,UAAAoJ,sBAAA,SAAsBjI,GACpBjB,KAAKmJ,qBAAqB9C,UAAU+C,OAAO,SAC3C,GAAIpJ,KAAKuI,YAAYtH,EAAGmB,eAA+B,CAErDnB,EAAGS,iB,GAKP0C,EAAAtE,UAAAuJ,UAAA,SAAUpI,GACR,OAAQA,EAAGC,KACT,IAAK,YACH,GAAIlB,KAAKsJ,aAAe,MAAO,CAC7BrI,EAAGE,iBACHnB,KAAKuJ,KAAK,O,CAEZ,MAEF,IAAK,UACH,GAAIvJ,KAAKsJ,aAAe,MAAO,CAC7BrI,EAAGE,iBACHnB,KAAKuJ,KAAK,W,CAEZ,M,EAINnF,EAAAtE,UAAAyD,kBAAA,eAAAC,EAAAxD,KACE,IAAKA,KAAKwJ,MAAO,CACfC,QAAQC,MACN,2G,CAIJ1J,KAAK2J,IAAM3J,KAAKK,GAAGmE,GAAKxE,KAAKK,GAAGmE,GAAKoF,aAErC,GAAIC,SAASC,KAAKzD,UAAUC,SAAS,wBAAyB,CAC5DtG,KAAK4G,iB,CAIP,GAAI5G,KAAKmH,gBAAgBrF,OAAS,EAAG,CACnC9B,KAAKmH,gBAAgB2B,SAAQ,SAACrC,GAC5BjD,EAAK0B,iBAAiBhF,KAAKuG,E,SAGxB,IAAKzG,KAAKI,SAAU,CACzBJ,KAAKiH,aAAajH,KAAKkG,aAAa,G,GAIxC9B,EAAAtE,UAAAiK,iBAAA,WACE/J,KAAKgK,gBAAgB3I,OACrBrB,KAAKiK,WAAW5D,UAAU6D,IAAI,UAC9BC,YAAYnK,KAAKK,IAGjB,GAAIL,KAAKoK,UAAW,CAClBpK,KAAKqK,UAAUC,MAAMF,UAAYpK,KAAKoK,S,CAGxC,GAAIpK,KAAKI,SAAU,CACjBJ,KAAKuK,wB,CAEPvK,KAAKgJ,e,EAGP5E,EAAAtE,UAAA0K,oBAAA,WACE,GAAIxK,KAAKI,SAAU,CAEjB,IAAMqK,EAA0BzK,KAAKmI,iBAAiBhC,QAAO,SAACC,GAAW,OAAAA,EAAOC,UAAUC,SAAS,YAA1B,IACzEmE,EAAwB3B,SAAQ,SAAC1C,EAAQsE,GACvC,GAAIA,IAAQD,EAAwB3I,OAAS,EAAG,CAC9CsE,EAAOC,UAAU6D,IAAI,O,KAChB,CACL9D,EAAOC,UAAU+C,OAAO,O,OAMhChF,EAAAtE,UAAAiI,OAAA,SAAO1H,GACL,IAAMsK,EAA8B3K,KAAKmI,iBACzC,GAAInI,KAAK4K,YAAa,CACpBD,EAAaE,QAAQ7K,KAAK4K,Y,CAE5B,GAAI5K,KAAKuG,cAAe,CACtBoE,EAAaE,QAAQ7K,KAAKuG,c,CAG5B,IAAMuE,EAASH,EAAaA,EAAaI,QAAQ1K,GAAM,IAAMsK,EAAaA,EAAa7I,OAAS,GAEhG,GAAIgJ,EAAQ,CACV9K,KAAKgH,YAAY8D,E,GAIrB1G,EAAAtE,UAAAmI,SAAA,SAAS5H,GACP,IAAMsK,EAA8B3K,KAAKmI,iBACzC,GAAInI,KAAK4K,YAAa,CACpBD,EAAaE,QAAQ7K,KAAK4K,Y,CAE5B,GAAI5K,KAAKuG,cAAe,CACtBoE,EAAaE,QAAQ7K,KAAKuG,c,CAG5B,IAAMyE,EAASL,EAAaA,EAAaI,QAAQ1K,GAAM,IAAMsK,EAAa,GAE1E,GAAIK,EAAQ,CACVhL,KAAKgH,YAAYgE,E,GAIrB5G,EAAAtE,UAAAyJ,KAAA,SAAK0B,GAAL,IAAAzH,EAAAxD,KACE,IAAKA,KAAKuB,SAAU,CAClB,IAAM2J,EAAWlL,KAAKK,GAAG8K,aACzB,IAAMC,EAAepL,KAAKqL,SAASF,aACnCnL,KAAKgF,OAASsG,aACZtL,KAAKK,GACLL,KAAKiK,WAELiB,EAEAE,GAEFpL,KAAKsJ,WAAa,KAClBtJ,KAAKiK,WAAW5D,UAAU+C,OAAO,UAEjCmC,OAAOC,uBAAsB,WAC3B,OAAQP,GACN,IAAK,OAGH,GAAIzH,EAAKiI,OAAQ,CACfjI,EAAK+C,cAAcmF,QACnBlI,EAAK6G,UAAUsB,UAAY,C,KACtB,CACLnI,EAAKyE,SAASzE,EAAK2E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAEnE,QAAF,IAAYsJ,OAAO,GAAG,G,CAE1E,MACF,IAAK,WAGH,GAAIpI,EAAKiI,OAAQ,CACfjI,EAAKwD,YAAYxD,EAAK2E,iBAAiB3E,EAAK2E,iBAAiBrG,OAAS,G,KACjE,CACL0B,EAAKuE,OAAOvE,EAAK2E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAEnE,QAAF,IAAY,G,CAE9D,MACF,QAIE,GAAIkB,EAAKiI,OAAQ,CACfjI,EAAK+C,cAAcmF,QACnBlI,EAAK6G,UAAUsB,UAAY,C,MACtB,GAAInI,EAAK2D,gBAAgBrF,OAAS,EAAG,CAC1C0B,EAAKwD,YAAYxD,EAAK2E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAEnE,QAAF,IAAY,G,KAC5D,CACLkB,EAAKwD,YAAYxD,EAAK2E,iBAAiB,G,CAEzC,M,MAMV/D,EAAAtE,UAAA0H,MAAA,SAAMqE,GAAN,IAAArI,EAAAxD,KAAM,GAAA6L,SAAA,GAAAA,EAAA,IAA2B,CAC/B,GAAI7L,KAAKsJ,WAAY,CACnBtJ,KAAKsJ,WAAa,MAClBtJ,KAAKkG,aAAa4F,KAAI,SAACC,GAAC,OAAMA,EAAEhI,QAAU,KAAlB,IAExBwH,OAAOS,YAAW,WAChBxI,EAAKyG,WAAW5D,UAAU6D,IAAI,UAC9B,GAAI1G,EAAKpD,SAAU,CACjBoD,EAAK+G,wB,CAGP,GAAI/G,EAAKiI,OAAQ,CACfjI,EAAK+C,cAAcC,MAAQ,GAC3BhD,EAAK8B,sBAAsBjE,KAAK,CAAEZ,WAAY+C,EAAK/C,Y,CAMrD,GAAIoL,EAAa,CACfrI,EAAK6H,SAASK,O,IAEf,I,GAIPtH,EAAAtE,UAAAyK,uBAAA,eAAA/G,EAAAxD,KAGEA,KAAKiG,aAAa6C,SAAQ,SAAC1C,EAAQsE,GACjC,IAAMuB,EAAkBzI,EAAKwC,iBAAiB0E,GAC9C,GAAItE,EAAO9D,SAAU,CACnB8D,EAAOC,UAAU6D,IAAI,UACrB+B,EAAgB5F,UAAU+C,OAAO,S,KAC5B,CACLhD,EAAOC,UAAU+C,OAAO,UACxB6C,EAAgB5F,UAAU6D,IAAI,S,MAKpC9F,EAAAtE,UAAAkH,YAAA,SAAYZ,GACVpG,KAAKkG,aAAa4C,SAAQ,SAACiD,GAAC,OAAMA,EAAEhI,QAAUgI,IAAM3F,CAAxB,IAI5BA,EAAO8F,eAAe,CAAEC,MAAO,YAK/BZ,OAAOS,YAAW,WAAM,OAAA5F,EAAO8F,eAAe,CAAEC,MAAO,WAA/B,GAA6C,IAErE/F,EAAOsF,O,EAGTtH,EAAAtE,UAAAmH,aAAA,SAAab,GAEX,GAAIA,EAAOC,UAAUC,SAAS,aAAc,CAE1C,IAAM8F,EAAsBpM,KAAK2H,wBAAwBvB,GACzDgG,EAAoB9J,UAAY8J,EAAoB9J,SACpD6H,YAAYnK,KAAKK,G,MACZ,GAAIL,KAAKI,SAAU,CACxBgG,EAAO9D,UAAY8D,EAAO9D,Q,KACrB,CACLtC,KAAKiG,aAAa6C,SAAQ,SAACrC,GAAC,OAAMA,EAAEnE,SAAWmE,IAAML,CAAzB,G,CAI9B,GAAIpG,KAAK4K,YAAa,CACpB5K,KAAK+I,oB,CAEP/I,KAAKgJ,e,EAIP5E,EAAAtE,UAAAuM,mBAAA,SAAmBpL,GAAnB,IAAAuC,EAAAxD,KACE,IAAMsM,EAAYrL,EAAG6B,OAAOvC,cAE5B,IAAKP,KAAK8E,UAAW,CAEnB9E,KAAKmI,iBAAiBW,SAAQ,SAAC1C,EAAQsE,GACrC,GAAItE,EAAOrC,QAAS,CAClBP,EAAKuB,YAAc2F,C,KAKzB1K,KAAK8E,WAAawH,EAElB,IAAIC,EAAYvM,KAAKwM,iBAAiBxM,KAAKmI,iBAAkBnI,KAAK+E,YAAc,EAAG/E,KAAKmI,iBAAiBrG,QACzG,IAAKyK,EAAW,CAEdA,EAAYvM,KAAKwM,iBAAiBxM,KAAKmI,iBAAkB,EAAGnI,KAAK+E,Y,CAGnE,GAAIwH,EAAW,CAEbvM,KAAKgH,YAAYuF,E,CAEnBvM,KAAKmF,yB,EAOPf,EAAAtE,UAAA0M,iBAAA,SAAiBC,EAA6BC,EAAoBC,GAAlE,IAAAnJ,EAAAxD,KACE,IAAIoD,EAAoC,KACxC,IAAIwJ,EAAiBH,EAAKb,MAAMc,EAAYC,GAI5CC,EAAe9D,SAAQ,SAAC1C,GACtB,IAAMoD,EAAQpD,EAAO9F,YACrB,IAAK8C,GAASoG,GAASA,EAAMjJ,cAAcsM,WAAWrJ,EAAKsB,WAAY,CACrE1B,EAAQgD,C,KAIZ,OAAOhD,C,EAGTgB,EAAAtE,UAAA6H,wBAAA,SAAwBtH,GAGtB,IAAMoH,EAAcpH,EAAGgG,UAAUC,SAAS,aAC1C,OAAOmB,EACHzH,KAAKiG,aAAajG,KAAKgG,iBAAiB+E,QAAQ1K,IAChDL,KAAKgG,iBAAiBhG,KAAKiG,aAAa8E,QAAQ1K,G,EAGtD+D,EAAAtE,UAAAyI,YAAA,SAAYlI,G,MAEV,OAAOA,IAAOL,KAAKK,IAAML,KAAKK,GAAGiG,SAASjG,MAAOM,EAAAX,KAAKK,GAAG0F,cAAU,MAAApF,SAAA,SAAAA,EAAE2F,SAASjG,G,EAIhF+D,EAAAtE,UAAAgN,aAAA,WAEE,IAAMC,EAAQnD,aACd5J,KAAKgN,eAAexI,GAAK,aAAAvB,OAAa8J,GACtC/M,KAAKqL,SAAS9I,aAAa,mBAAoB,aAAAU,OAAa8J,G,EAG9D3I,EAAAtE,UAAAmN,qBAAA,eAAAzJ,EAAAxD,KACE,OACE2D,EAAA,OACEa,GAAG,YACHR,MAAOhE,KAAKkN,aAAe,gBAAkB,GAC7ChJ,IAAK,SAAC7D,GAAE,OAAMmD,EAAKwJ,eAAiB3M,CAA5B,EAAiD,YAC/C,YAAW,cACT,QAEXL,KAAKkN,a,EAKZ9I,EAAAtE,UAAAqN,oBAAA,SAAoBlM,GAElB,IAAKjB,KAAKK,GAAGiG,SAASrF,EAAGmB,eAAwB,CAC/CpC,KAAKwH,MAAM,OACXxH,KAAKoN,gBAAgB/L,OACrBrB,KAAKqN,mBAAmBhM,M,GAK5B+C,EAAAtE,UAAAwN,cAAA,SAAcrM,GACZ,IAAMZ,EAAKY,EAAGwH,OACd,OAAQxH,EAAGC,KACT,IAAK,YACHD,EAAGE,iBACHnB,KAAKiI,SAAShH,EAAGwH,QACjB,MACF,IAAK,UACHxH,EAAGE,iBACHnB,KAAK+H,OAAO9G,EAAGwH,QACf,MACF,IAAK,SACHxH,EAAGE,iBACHnB,KAAKwH,QACL,MACF,IAAK,QACH,GAAInH,IAAOL,KAAK4K,YAAa,CAC3B3J,EAAGE,iBACHnB,KAAK0I,uBACL1I,KAAKwH,O,CAEP,MACF,IAAK,IACH,GAAInH,IAAOL,KAAK4K,YAAa,CAC3B3J,EAAGE,iBACHnB,KAAK0I,sB,CAEP,M,EAcNtE,EAAAtE,UAAAkJ,cAAA,eAAAxF,EAAAxD,KACEA,KAAKkF,iBAAmBlF,KAAKiG,aAC1BE,QAAO,SAACM,GAAM,OAAAA,EAAEnE,QAAF,IACdwJ,KAAI,SAACyB,GAAC,OAAOA,EAAElH,UAAUC,SAAS,UAAYiH,EAAI/J,EAAKmE,wBAAwB4F,EAAzE,IAGT,GAAIvN,KAAKI,SAAU,CAEjB,IAAMoN,EAAuB,GAC7B,IAAMC,EAAgBlC,OAAOmC,iBAAiB1N,KAAKqL,UAGnD,IAAMsC,EAAcC,SAASH,EAAcI,iBAAiB,gBAAgBjC,MAAM,GAAI,IACtF,IAAMkC,EAAeF,SAASH,EAAcI,iBAAiB,iBAAiBjC,MAAM,GAAI,IAExF,IAAMmC,EAAiB/N,KAAKqL,SAAS2C,YAAcL,EAAcG,EAAeN,EAEhF,IAAIS,EAAgBjO,KAAKkF,iBAAiB4G,KAAI,SAACrF,GAAM,OAAAA,EAAEV,WAAYmI,cAAc,mBAAoBF,WAAhD,IAErD,IAAIG,EAAoBF,EAAcG,QAAO,SAACC,EAAK5H,GAAM,OAAA4H,EAAM5H,CAAN,GAAS,GAClEzG,KAAKiF,cAAgB,EAErB,MAAOkJ,EAAoBJ,GAAkB/N,KAAKkF,iBAAiBpD,OAAS,EAAG,CAC7E9B,KAAKiF,gBACLkJ,GAAqBF,EAAcA,EAAcnM,OAAS,GAC1DmM,EAAcK,MACdtO,KAAKkF,iBAAiBoJ,K,IAK5BlK,EAAAtE,UAAAiJ,mBAAA,WACE,GAAI/I,KAAK2I,YAAa,CACpB3I,KAAK4K,YAAYtK,YAAcN,KAAK2E,mBACpC3E,KAAKwF,SAASxF,KAAK4E,0B,KACd,CACL5E,KAAK4K,YAAYtK,YAAcN,KAAK0E,iBACpC,GAAI1E,KAAKmH,gBAAgBrF,SAAW,EAAG,CACrC9B,KAAKwF,SAASxF,KAAK6E,4B,IAKzBT,EAAAtE,UAAA0F,SAAA,SAAS+I,GAEP,GAAIvO,KAAKwO,aAAalO,cAAgBiO,EAAS,CAC7CA,GAAW,G,CAEbvO,KAAKyO,aAAeF,C,EAGtBnK,EAAAtE,UAAA4O,iBAAA,WACE,GAAI1O,KAAKI,UAAYJ,KAAKkF,iBAAiBpD,OAAS,EAAG,CACrD,OAAO6B,EAAA,YAAO3D,KAAK2O,Y,MACd,GAAI3O,KAAKI,UAAYJ,KAAK2I,aAAe3I,KAAKiF,cAAgB,EAAG,CACtE,OAAOjF,KAAK4O,kB,KACP,CACL,OAAO5O,KAAKkF,iBAAiB4G,KAAI,SAACrF,EAAGiE,GAAG,OACtC/G,EAAA,YACG+G,EAAM,EAAI,KAAO,GACjBjE,EAAEnG,YAHiC,G,GAS5C8D,EAAAtE,UAAA+O,cAAA,WAEE,IAAK7O,KAAKI,UAAYJ,KAAKmH,gBAAgBrF,OAAS,GAAK9B,KAAKmH,gBAAgB,GAAGlH,QAAS,CACxF,OAAO0D,EAAA,QAAMK,MAAM,WAAWhE,KAAKmH,gBAAgB,GAAGlH,Q,GAI1DmE,EAAAtE,UAAAgP,oBAAA,WACE,GAAI9O,KAAKiF,cAAgB,IAAMjF,KAAK2I,YAAa,CAC/C,OACEhF,EAAA,YACEA,EAAA,QAAMK,MAAM,oBAAkB,IAAGhE,KAAKiF,e,GAM9Cb,EAAAtE,UAAAiP,kBAAA,eAAAvL,EAAAxD,KACE,OACE2D,EAAA,OAAKK,MAAM,UACTL,EAAA,OAAKK,MAAM,sBAAsBE,IAAK,SAAC7D,GAAE,OAAMmD,EAAK2F,qBAAuB9I,CAAlC,GACvCsD,EAAA,OAAKK,MAAM,SACXL,EAAA,SACEO,IAAK,SAAC7D,GAAE,OAAMmD,EAAK+C,cAAgBlG,CAA3B,EACR2D,MAAM,cACNH,KAAK,WAAU,gBACA,QAAAZ,OAAQjD,KAAK2J,KAAK,gBAClB3J,KAAKsJ,WAAa,OAAS,QAC1C0F,UAAW,SAAC/N,GAAO,OAAAuC,EAAK8J,cAAcrM,EAAnB,EACnBgO,QAAS,WAAM,OAAAzL,EAAK2F,qBAAqB9C,UAAU6D,IAAI,QAAxC,EACfgF,OAAQ,SAACjO,GAAO,OAAAuC,EAAK0F,sBAAsBjI,EAA3B,EAChBkO,QAAS,WAAM,OAAA3L,EAAK6B,iBAAL,EACfsJ,YAAa3O,KAAKoP,qB,EAO5BhL,EAAAtE,UAAAuP,0BAAA,WACE,OAAO1L,EAAA,OAAKK,MAAM,0BAA0BhE,KAAK0F,sB,EAGnDtB,EAAAtE,UAAAwP,sBAAA,eAAA9L,EAAAxD,KACE,GAAIA,KAAKuP,WAAavP,KAAKI,UAAYJ,KAAKS,YAAc,GAAI,CAC5D,OACEkD,EAAA,UACEO,IAAK,SAAC7D,GAAE,OAAMmD,EAAKoH,YAAcvK,CAAzB,EACR2D,MAAM,aACNwL,QAAS,WAAM,OAAAhM,EAAKkF,sBAAL,EACfsG,UAAW,SAAC/N,GAAO,OAAAuC,EAAK8J,cAAcrM,EAAnB,EACnB6C,SAAS,MAER9D,KAAK2I,YAAc3I,KAAK2E,mBAAqB3E,KAAK0E,iB,GAM3DN,EAAAtE,UAAA2P,uBAAA,WACE,OAAO7J,MAAMC,KAAK7F,KAAKK,GAAGqP,UAAU5D,KAAI,SAAC1F,GACvC,OACEzC,EAAA,aAAWK,MAAM,YAAY1B,SAAW8D,EAA+B9D,UACpE8D,EAAO9F,Y,KAMhB8D,EAAAtE,UAAA4D,OAAA,W,MAAA,IAAAF,EAAAxD,KACE,IAAM2P,GAAWC,EAAA,CACfpL,GAAI,aAAAvB,OAAajD,KAAK2J,MACtBiG,EAAC,YAAa5P,KAAKuB,SACnBqO,EAAC,iBAAkB,QAAA3M,OAAQjD,KAAK2J,KAChCiG,EAAC,mBAAoB,SAAA3M,OAASjD,KAAK2J,IAAG,eAAA1G,OAAcjD,KAAK2J,KACzDiG,EAAC,oBAAqB,YACtBA,EAAC,iBAAkB5P,KAAKsJ,WAAa,OAAS,QAC9CsG,EAAAJ,QAAS,kBAAOhM,EAAK8F,WAAa9F,EAAKgE,QAAUhE,EAAK+F,MAA7C,E,GAGX,OACE5F,EAACC,KAAI,CAACsL,OAAQ,SAACjO,GAAmB,OAAAuC,EAAK2J,oBAAoBlM,EAAzB,GAChC0C,EAAA,OACEK,MAAO,WAAAf,OAAW4M,aAAY,WAAA5M,OAAUjD,KAAK8P,cAAa,KAAA7M,OACxDjD,KAAK+P,SAAW/P,KAAKkN,aAAe,UAAY,KAGlDvJ,EAAA,OAAKK,MAAM,iBACTL,EAAA,SAAOK,MAAM,QAAQQ,GAAI,SAAAvB,OAASjD,KAAK2J,KAAOqG,QAAS,aAAA/M,OAAajD,KAAK2J,MACtE3J,KAAKwJ,MAGJxJ,KAAKiQ,cACHtM,EAAA,QAAMK,MAAM,YACVL,EAAA,QAAMK,MAAM,WAAWhE,KAAKqE,iBAC5BV,EAAA,sBAAkB,QAAM,MACnB,KAOfA,EAAA,OAAKK,MAAM,kBACTL,EAAA,SAAA/D,OAAAsQ,OAAA,GACMP,EAAW,CACf3L,MAAO,mBAAAf,OAAmBjD,KAAK6G,UAAY,kBAAoB,IAC/D3C,IAAK,SAAC7D,GAAE,OAAMmD,EAAK6H,SAAWhL,CAAtB,EACR6O,OAAQ,SAACjO,GAAO,OAAAuC,EAAKyF,iBAAiBhI,EAAtB,EAChBgO,QAAS,WAAM,OAAAzL,EAAKgE,OAAL,IAEf7D,EAAA,QACEK,MACEhE,KAAKmH,gBAAgBrF,OAAS,GAAK9B,KAAKmH,gBAAgBhB,QAAO,SAACM,GAAM,OAAAA,EAAExG,OAAF,IAAW6B,OAAS,EACtF,6BACA,mBAGN6B,EAAA,QAAMK,MAAM,eAAehE,KAAK0O,oBAC/B1O,KAAK6O,iBAEP7O,KAAK8O,uBAERnL,EAAA,OACEK,MAAO,YAAAf,OAAYjD,KAAKsJ,WAAa,OAAS,GAAE,KAAArG,OAAIjD,KAAKgF,OAAS,UAAY,IAC9Ed,IAAK,SAAC7D,GAAE,OAAMmD,EAAKyG,WAAa5J,CAAxB,GAEPL,KAAKyL,QAAUzL,KAAK+O,oBACrBpL,EAAA,OACEa,GAAI,QAAAvB,OAAQjD,KAAK2J,KACjB3F,MAAM,kBACNF,UAAW,EACXD,KAAK,UAAS,uBACQ7D,KAAKI,SAAW,OAAS,KAAI,kBAClC,SAAA6C,OAASjD,KAAK2J,KAC/BzF,IAAK,SAAC7D,GAAE,OAAMmD,EAAK6G,UAAYhK,CAAvB,GAEPL,KAAKyL,QAAUzL,KAAKuF,gBAAgBzD,SAAW,GAAK9B,KAAKqP,4BACzDrP,KAAKsP,wBACLtP,KAAKI,UAAYJ,KAAKyP,yBACvB9L,EAAA,eAGH3D,KAAKiN,uBACNtJ,EAAA,OACEa,GAAG,eAAc,YACP,SACVR,MAAM,UACNE,IAAK,SAAC7D,GAAE,OAAMmD,EAAKgL,aAAenO,CAA1B,GAEPL,KAAKyO,gB,0WAn1BD,G"}
+{"version":3,"names":["wmOptionCss","Option","undefined","Object","defineProperty","prototype","classes","this","subinfo","push","parentSelectEl","multiple","el","textContent","toLowerCase","includes","searchTerm","join","_a","parentElement","nodeName","getRootNode","host","handleKeydown","ev","key","preventDefault","wmKeyUpPressed","emit","wmKeyDownPressed","disabled","click","wmEnterKeyPressed","stopPropagation","wmEscKeyPressed","wmHomeKeyPressed","wmEndKeyPressed","length","wmLetterPressed","handleSelection","wmOptionSelected","handleBlur","wmOptionBlurred","relatedTarget","syncAriaSelected","selected","setAttribute","removeAttribute","syncAriaDisabled","updateDisabledOnClick","onclick","onClickFunc","handleSearch","detail","regexp","RegExp","concat","boldedText","replace","match","textEl","innerHTML","componentWillLoad","_this","addEventListener","render","h","Host","role","tabindex","focused","class","hostClasses","ref","wmSelectCss","Select","selectAllMessage","intl","formatMessage","id","defaultMessage","deselectAllMessage","allOptionsSelectedMessage","allOptionsDeselectedMessage","keysSoFar","searchIndex","openUp","overflowCount","displayedOptions","debouncedClearKeysSoFar","debounce","debouncedSearch","wmSelectSearchChanged","filteredOptions","announce","resultsFoundMessage","noResultsFoundMessage","description","Array","from","querySelectorAll","shadowRoot","duplicateOptions","childOptions","allOptionEls","filter","option","classList","contains","searchFieldEl","value","x","every","numResults","toggleTabbingOn","isTabbing","toggleTabbingOff","handleOptionSelection","focusOption","selectOption","changedOption","selectedOptions","wmSelectChanged","event","CustomEvent","dispatchEvent","close","isDuplicate","originalOption","findCorrespondingOption","o","handleChildEnter","handleChildUp","moveUp","handleChildDown","moveDown","moveToFirstOption","visibleOptionEls","moveToLastOption","closePopupOnEscape","handleOptionBlur","isElOrChild","handleClick","target","handleSelectAllClick","allSelected","deselectAllOptions","selectAllOptions","forEach","setSelectAllButton","setButtonText","handleButtonBlur","handleSearchFieldBlur","searchFieldWrapperEl","remove","handleKey","isExpanded","open","label","console","error","uid","generateId","document","body","componentDidLoad","wmSelectDidLoad","dropdownEl","add","forceUpdate","maxHeight","listboxEl","style","updateOptionVisibility","componentWillUpdate","visibleDuplicateOptions_1","idx","focusableEls","selectAllEl","unshift","prevEl","indexOf","nextEl","optionToSelect","elHeight","clientHeight","buttonHeight","buttonEl","shouldOpenUp","window","requestAnimationFrame","search","focus","scrollTop","slice","returnFocus","map","i","setTimeout","duplicateOption","scrollIntoView","block","correspondingOption","findAndFocusOption","character","nextMatch","findMatchInRange","list","startIndex","endIndex","optionsInRange","startsWith","exposeErrors","newId","errorContainer","renderErrorContainer","errorMessage","handleComponentBlur","wmSelectBlurred","wmComponentBlurred","handleKeyDown","y","overflowCounterWidth","computedStyle","getComputedStyle","paddingLeft","parseInt","getPropertyValue","paddingRight","availableSpace","clientWidth","optionsWidths","querySelector","optionsTotalWidth","reduce","acc","pop","message","liveRegionEl","announcement","renderButtonText","placeholder","allSelectedMessage","renderSubinfo","renderOverflowCount","renderSearchField","onKeyDown","onFocus","onBlur","onInput","searchPlaceholder","renderSearchFailedMessage","renderSelectAllButton","selectAll","onClick","renderDuplicateOptions","children","buttonProps","_b","getTextDir","labelPosition","invalid","htmlFor","requiredField","globalMessages","assign"],"sources":["src/components/wm-option/wm-option.scss?tag=wm-option&encapsulation=shadow","src/components/wm-option/wm-option.tsx","src/components/wm-select/wm-select.scss?tag=wm-select&encapsulation=shadow","src/components/wm-select/wm-select.tsx"],"sourcesContent":[":host(:not(:last-child)),\nwm-option:not(:last-child) {\n  border-bottom: 2px solid $list-border-bottom-color;\n}\n\n:host,\nwm-option {\n  display: block;\n  cursor: pointer;\n  position: relative;\n  padding: rem-calc(20);\n  background: $light-background;\n  font-family: inherit;\n  list-style: none;\n  color: $body-text-color;\n  user-select: none;\n\n  &:focus,\n  &.focus {\n    outline: none;\n    background: $background;\n  }\n\n  &.icon {\n    color: $button-default-text;\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n\n.checkbox {\n  &:before {\n    @include mdi-icon;\n    content: \"\\f131\";\n    display: inline;\n    margin-right: rem-calc(4);\n    color: $periwinkle;\n  }\n}\n\n:host([aria-selected=\"true\"]),\nwm-option[aria-selected=\"true\"] {\n  background: $list-selected-background-color;\n  font-weight: 500;\n\n  .checkbox {\n    &:before {\n      content: \"\\f132\";\n    }\n  }\n}\n\n:host([aria-disabled=\"true\"]),\nwm-option[aria-disabled=\"true\"] {\n  font-style: italic;\n  color: $gray;\n  cursor: default;\n\n  .checkbox {\n    &:before {\n      color: $gray;\n    }\n  }\n}\n\n:host(.multi-option),\nwm-option.multi-option {\n  background: unset;\n}\n\n:host(.hidden),\nwm-option.hidden,\n:host(.filtered-out),\nwm-option.filtered-out {\n  display: none;\n}\n\n:host(.duplicate.last),\nwm-option.duplicate.last {\n  border-bottom: 12px solid $list-border-bottom-color;\n}\n\n:host(.hassubinfo),\nwm-option.hassubinfo {\n  display: flex;\n\n  .option-wrapper {\n    flex: 1;\n  }\n  .subinfo {\n    flex: none;\n  }\n}\n\n.subinfo {\n  font-style: italic;\n}\n\n.option-wrapper {\n  // necessary for multiselect overflow measurement\n  display: inline-block;\n}\n\n::slotted {\n  font-family: inherit;\n}\n\n::slotted(i) {\n  font-size: rem-calc(14);\n\n  &:before {\n    @include mdi-icon;\n    display: inline-block;\n    margin-right: rem-calc(10);\n    pointer-events: none;\n  }\n}\n\n:host(:focus),\nwm-option:focus {\n  outline: none;\n  background: $background;\n}\n\n:host(:hover) {\n  background: $background;\n  outline: none;\n}\n","import { h, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-option\",\n  styleUrl: \"wm-option.scss\",\n  shadow: true,\n})\nexport class Option {\n  @Element() el!: HTMLElement;\n\n  @Prop() value?: string | null; // if devs pass a value as attribute they should be able to retrieve it by querying the property. This is untouched by the component.\n  @Prop({ mutable: true }) subinfo?: string = undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop() focused: boolean = false;\n\n  @Event() wmOptionSelected!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmKeyUpPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmKeyDownPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEscKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEndKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEnterKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmLetterPressed!: EventEmitter<string>;\n  @Event() wmOptionBlurred!: EventEmitter<{ relatedTarget: EventTarget | null }>;\n\n  private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\n  @State() searchTerm: string = \"\";\n  private textEl!: HTMLDivElement;\n\n  get hostClasses() {\n    let classes = [];\n    if (this.subinfo) {\n      classes.push(\"hassubinfo\");\n    }\n    if (this.parentSelectEl.multiple) {\n      classes.push(\"multi-option\");\n    }\n    if (!this.el.textContent!.toLowerCase().includes(this.searchTerm)) {\n      classes.push(\"filtered-out\");\n    }\n    return classes.join(\" \");\n  }\n\n  get parentSelectEl() {\n    return this.el.parentElement?.nodeName !== \"WM-SELECT\"\n      ? ((this.el.getRootNode() as ShadowRoot).host as HTMLWmSelectElement)\n      : (this.el.parentElement as HTMLWmSelectElement);\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.wmKeyUpPressed.emit(this.el as HTMLWmOptionElement);\n        break;\n\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.wmKeyDownPressed.emit(this.el as HTMLWmOptionElement);\n        break;\n\n      case \"Enter\":\n        ev.preventDefault();\n        if (!this.disabled) {\n          this.el.click();\n          this.wmEnterKeyPressed.emit(this.el as HTMLWmOptionElement);\n        }\n        break;\n\n      case \" \":\n        ev.preventDefault();\n        this.el.click();\n        break;\n\n      case \"Escape\":\n        ev.preventDefault();\n        ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n        this.wmEscKeyPressed.emit();\n        break;\n\n      case \"Home\":\n        ev.preventDefault();\n        this.wmHomeKeyPressed.emit();\n        break;\n\n      case \"End\":\n        ev.preventDefault();\n        this.wmEndKeyPressed.emit();\n        break;\n\n      default:\n        if (ev.key.length === 1) {\n          // emit for single characters (\"a\",\"l\",\"5\", etc), avoid others (\"shift\", \"control\", etc)\n          this.wmLetterPressed.emit(ev.key);\n        }\n    }\n  }\n\n  @Listen(\"click\")\n  handleSelection() {\n    if (!this.disabled) {\n      // the parent wm-select is in charge of the actual selection\n      // using ev.detail because ev.target returns the wm-select for duplicate options\n      this.wmOptionSelected.emit(this.el as HTMLWmOptionElement);\n    }\n  }\n\n  @Listen(\"blur\")\n  handleBlur(ev: FocusEvent) {\n    this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });\n  }\n\n  @Watch(\"selected\")\n  syncAriaSelected() {\n    // this function only keeps the aria-selected attr in sync with the selected prop\n    // all the logic for selecting / deselecting happens in the parent wm-select\n    this.selected ? this.el.setAttribute(\"aria-selected\", \"true\") : this.el.removeAttribute(\"aria-selected\");\n  }\n\n  @Watch(\"disabled\")\n  syncAriaDisabled() {\n    this.disabled ? this.el.setAttribute(\"aria-disabled\", \"true\") : this.el.removeAttribute(\"aria-disabled\");\n  }\n\n  @Watch(\"disabled\")\n  updateDisabledOnClick() {\n    if (this.disabled && this.el.onclick) {\n      this.onClickFunc = this.el.onclick;\n      this.el.onclick = null;\n    } else if (!this.disabled && this.onClickFunc) {\n      this.el.onclick = this.onClickFunc;\n    }\n  }\n\n  handleSearch(ev: CustomEvent) {\n    // filter is case-insensitive, so\n    this.searchTerm = ev.detail.searchTerm.toLowerCase();\n\n    if (this.searchTerm) {\n      const regexp = new RegExp(`${this.searchTerm}`, \"gi\");\n      const boldedText = this.el.textContent!.replace(regexp, (match) => `<strong>${match}</strong>`);\n      // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as \"hel lo\"\n      // aria-hidden and sr-only is used to circumvent this\n      this.textEl.innerHTML = boldedText;\n    } else {\n      this.textEl.innerHTML = this.el.textContent!;\n    }\n  }\n\n  componentWillLoad() {\n    this.syncAriaSelected();\n    this.syncAriaDisabled();\n    this.updateDisabledOnClick();\n\n    this.parentSelectEl.addEventListener(\"wmSelectSearchChanged\", (ev) => this.handleSearch(ev as CustomEvent));\n  }\n\n  render() {\n    return (\n      <Host role=\"option\" tabindex={this.focused ? 0 : -1} class={this.hostClasses}>\n        <div class={`option-wrapper ${this.parentSelectEl.multiple ? \"checkbox\" : \"\"}`}>\n          <span aria-hidden=\"true\" ref={(el) => (this.textEl = el as HTMLDivElement)}>\n            {this.el.textContent}\n          </span>\n          <span class=\"sr-only\">{this.el.textContent}</span>\n        </div>\n        <div class=\"subinfo\">{this.subinfo}</div>\n      </Host>\n    );\n  }\n}\n",":host {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  font-family: inherit;\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n\n@include label;\n\n.wrapper {\n  & .button-wrapper {\n    position: relative;\n    flex: 1;\n    font-size: rem-calc(18);\n    color: $button-default-text;\n    min-width: rem-calc(140);\n\n    .displayedoption {\n      @include border-radius(3px);\n      @include box-shadow(none);\n      display: flex;\n      align-items: center;\n      flex-wrap: nowrap;\n      background: transparent;\n      width: 100%;\n      border: solid 1px rgba(35, 35, 35, 0.6);\n      padding: rem-calc(0 30 0 15);\n      cursor: pointer;\n      height: rem-calc(40);\n      line-height: normal;\n      font-family: inherit;\n      color: $button-default-text;\n      font-weight: 400;\n      font-size: rem-calc(14);\n      text-transform: none;\n      text-align: left;\n\n      @media only screen and (max-width: 768px) {\n        height: rem-calc(44);\n      }\n\n      &:before {\n        @include mdi-icon;\n        content: \"\\f140\";\n        position: absolute;\n        right: rem-calc(9);\n        pointer-events: none;\n      }\n\n      &:hover:not(:disabled):not(.-disabled):not(.-raised) {\n        background: transparent;\n        text-decoration: none;\n      }\n\n      &:active {\n        // fix style bleed in Edge\n        -ms-transform: scale(1, 1) !important;\n        transform: scale(1, 1) !important;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &::-moz-focus-inner {\n        border: 0;\n      }\n\n      &.user-is-tabbing:focus {\n        @include focus-style;\n      }\n\n      .overflowcontrol {\n        display: block;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        flex: 1;\n\n        &.hassubinfo {\n          display: flex;\n\n          .button-text {\n            flex: 1;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            min-width: 0;\n          }\n          .subinfo {\n            flex: none;\n            font-style: italic;\n          }\n        }\n      }\n\n      .overflow-counter {\n        font-weight: bold;\n        margin-left: rem-calc(8);\n      }\n    }\n\n    > .displayedoption[disabled] {\n      color: #6b6b6b;\n      border-color: #8a8a8a;\n      background: #f0f0f0;\n      cursor: default;\n    }\n\n    > .dropdown {\n      -webkit-overflow-scrolling: touch;\n\n      @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n      @include transition(transform 0.25s ease);\n      @include scale($xVal: 1, $yVal: 0);\n      @include transformOrigin(center top);\n      @include border-radius(3px);\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: #fff;\n      z-index: 100;\n      width: 100%;\n      font-size: rem-calc(14);\n\n      &.upwards {\n        top: unset;\n        bottom: calc(100% - 2.5rem);\n        @include transformOrigin(center bottom);\n      }\n\n      &.hidden {\n        visibility: hidden;\n      }\n    }\n\n    > .dropdown.open {\n      @include scale($xVal: 1, $yVal: 1);\n    }\n  }\n\n  &.invalid {\n    & .button-wrapper {\n      & .displayedoption {\n        @include invalidBorder;\n      }\n    }\n  }\n\n  & .error-message {\n    @include errorMessage;\n    margin-bottom: rem-calc(4);\n    top: 100%;\n    left: 0;\n  }\n}\n\n.options-wrapper {\n  max-height: rem-calc(200);\n  overflow: auto;\n}\n\n.select-all {\n  //display: inline-block;\n  width: 100%;\n  cursor: pointer;\n  padding: rem-calc(20);\n  border: none;\n  margin: 0;\n  border-bottom: 2px solid $list-border-bottom-color;\n  background: $light-background;\n  font-family: inherit;\n  font-size: inherit;\n  text-align: left; // fallback for browsers not supporting logical properties\n  text-align: start;\n  font-weight: 500;\n  color: $interactive-element;\n  user-select: none;\n\n  &:hover,\n  &:focus {\n    outline: none;\n    background: #f4f4f4;\n  }\n}\n\n.search {\n  box-sizing: border-box;\n  border-bottom: 2px solid $list-border-bottom-color;\n  padding: rem-calc(20);\n\n  .searchfield-wrapper {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    height: rem-calc(44);\n    width: 100%;\n    padding: 0 rem-calc(12);\n    @include border-radius(3px);\n    border: 1px solid $input-border-color;\n    &:focus,\n    &.focus {\n      @include field-focus;\n    }\n  }\n  .searchfield {\n    width: 100%;\n    border: none;\n    outline: none;\n    font-family: inherit;\n    font-size: rem-calc(14);\n    margin-left: rem-calc(4);\n  }\n  .icon:before {\n    @include mdi-icon;\n    content: \"\\f349\";\n    color: $gray;\n    font-size: rem-calc(14);\n  }\n}\n\n.search-results-message {\n  padding: rem-calc(20);\n  color: $body-text-color;\n  font-size: rem-calc(14);\n  font-style: italic;\n}\n\n.rtl {\n  > .dropdown {\n    @include transformOrigin(left top);\n    left: 0;\n    right: auto;\n\n    .option {\n      padding-left: rem-calc(48);\n      padding-right: rem-calc(20);\n    }\n  }\n\n  > .displayedoption {\n    padding: rem-calc(0 15 0 30);\n    text-align: right;\n\n    &:before {\n      right: auto;\n      left: rem-calc(9);\n    }\n  }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, Host } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { generateId, getTextDir, shouldOpenUp, intl, debounce } from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n  tag: \"wm-select\",\n  styleUrl: \"wm-select.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Select {\n  @Element() el!: HTMLWmSelectElement;\n\n  private uid!: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ mutable: true }) invalid: boolean = false;\n  @Prop() maxHeight?: string;\n  @Prop({ mutable: true }) label?: string;\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop() requiredField: boolean = false;\n  @Prop({ mutable: true }) errorMessage: string = \"\";\n  @Prop() multiple: boolean = false;\n  @Prop() search: boolean = false;\n  @Prop() selectAll: boolean = false;\n  @Prop() placeholder: string = intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  });\n  @Prop() searchPlaceholder: string = intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  });\n  @Prop() allSelectedMessage: string = intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  });\n\n  selectAllMessage = intl.formatMessage({\n    id: \"select.selectAll\",\n    defaultMessage: \"Select All\",\n  });\n\n  deselectAllMessage = intl.formatMessage({\n    id: \"select.deselectAll\",\n    defaultMessage: \"Deselect All\",\n  });\n\n  allOptionsSelectedMessage = intl.formatMessage({\n    id: \"select.allOptionsSelected\",\n    defaultMessage: \"All options selected\",\n  });\n\n  allOptionsDeselectedMessage = intl.formatMessage({\n    id: \"select.allOptionsDeselected\",\n    defaultMessage: \"All options deselected\",\n  });\n\n  @State() isTabbing: boolean = false;\n  @State() isExpanded: boolean = false;\n  @State() announcement: string = \"\";\n  @Event() wmSelectDidLoad!: EventEmitter<void>;\n  @Event() wmSelectBlurred!: EventEmitter<void>;\n  @Event() wmSelectChanged!: EventEmitter<Object>;\n  @Event() wmComponentBlurred!: EventEmitter<void>; // deprecated in favor of wmSelectBlurred\n  @Event() wmSelectSearchChanged!: EventEmitter<Object>;\n\n  private buttonEl!: HTMLButtonElement;\n  private dropdownEl!: HTMLDivElement;\n  private selectAllEl!: HTMLButtonElement;\n  private listboxEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private searchFieldWrapperEl!: HTMLDivElement;\n  private searchFieldEl!: HTMLInputElement;\n  private errorContainer!: HTMLDivElement;\n  private keysSoFar: string = \"\";\n  private searchIndex: number = 0;\n  private openUp: boolean = false;\n  get childOptions() {\n    return Array.from(this.el.querySelectorAll(\"wm-option\"));\n  }\n  get duplicateOptions(): HTMLWmOptionElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\"wm-option\"));\n  }\n  get allOptionEls(): HTMLWmOptionElement[] {\n    // this includes both slotted wm-options and internally created wm-options\n    return this.duplicateOptions.concat(this.childOptions);\n  }\n  get visibleOptionEls(): HTMLWmOptionElement[] {\n    return this.allOptionEls.filter(\n      (option) => !option.classList.contains(\"hidden\") && !option.classList.contains(\"filtered-out\")\n    );\n  }\n\n  //////////////////////////////////////\n  // for search variants\n  get searchTerm(): string {\n    return this.searchFieldEl ? this.searchFieldEl.value : \"\";\n  }\n  get filteredOptions(): HTMLWmOptionElement[] {\n    return this.childOptions.filter((option) =>\n      option.textContent?.toLowerCase().includes(this.searchTerm.toLowerCase())\n    );\n  }\n  //////////////////////////////////////\n\n  //////////////////////////////////////\n  // for multiselect button text\n  private overflowCount: number = 0;\n  get selectedOptions(): HTMLWmOptionElement[] {\n    return Array.from(this.el.querySelectorAll(\"wm-option\")).filter((x) => x.selected);\n  }\n  private displayedOptions: HTMLWmOptionElement[] = [];\n  get allSelected() {\n    return this.childOptions.every((option) => option.selected);\n  }\n  //////////////////////////////////////\n\n  get resultsFoundMessage() {\n    return intl.formatMessage(\n      {\n        id: \"select.searchResultsFound\",\n        defaultMessage: \"{numResults, plural, one {1 option found} other {# options found}}\",\n        description: \"The message read by the screen reader, indicating how many results a search returned\",\n      },\n      { numResults: this.filteredOptions.length }\n    );\n  }\n\n  get noResultsFoundMessage() {\n    return intl.formatMessage({\n      id: \"select.noSearchResults\",\n      defaultMessage: \"No results found. Please try your search again.\",\n      description: \"The message displayed when no options pass the search filter\",\n    });\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"wmOptionSelected\")\n  handleOptionSelection(ev: CustomEvent): void {\n    const option: HTMLWmOptionElement = ev.detail;\n    this.focusOption(option);\n    if (!this.multiple) {\n      // if the option was already selected, leave selected states untouched and don't fire the event\n      if (!option.selected) {\n        this.selectOption(option);\n        const detail = { changedOption: option, selectedOptions: [option] };\n        this.wmSelectChanged.emit(detail);\n        // change is deprecated in favor of wmSelectChanged\n        // because of issues with React wrappers when using native events name\n        const event = new CustomEvent(\"change\", { detail: detail });\n        // @ts-ignore\n        this.el.dispatchEvent(event);\n      }\n      this.close();\n    } else {\n      this.selectOption(option);\n      // we pass the original option with the event, as it's the only one the devs know or care about\n      // devs will typically set a `value` on the option, which is not copied over\n      // we could have taken the value and put it on the duplicate option,\n      // but this approach is more flexible (what if they want to have a data attribute?)\n      const isDuplicate: boolean = option.classList.contains(\"duplicate\");\n      const originalOption: HTMLWmOptionElement = isDuplicate ? this.findCorrespondingOption(option) : option;\n      const selectedOptions = this.childOptions.filter((o) => o.selected);\n      const detail = { changedOption: originalOption, selectedOptions: selectedOptions };\n      this.wmSelectChanged.emit(detail);\n      // change is deprecated in favor of wmSelectChanged\n      // because of issues with React wrappers when using native events name\n      const event = new CustomEvent(\"change\", { detail: detail });\n      // @ts-ignore\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  @Listen(\"wmEnterKeyPressed\")\n  handleChildEnter(): void {\n    // only occurs for multiselects. handle the click, then close\n    this.close();\n  }\n\n  @Listen(\"wmKeyUpPressed\")\n  handleChildUp(ev: CustomEvent): void {\n    this.moveUp(ev.detail as HTMLWmOptionElement);\n  }\n\n  @Listen(\"wmKeyDownPressed\")\n  handleChildDown(ev: CustomEvent): void {\n    this.moveDown(ev.detail as HTMLWmOptionElement);\n  }\n\n  @Listen(\"wmHomeKeyPressed\")\n  moveToFirstOption(): void {\n    this.focusOption(this.visibleOptionEls[0]);\n  }\n\n  @Listen(\"wmEndKeyPressed\")\n  moveToLastOption(): void {\n    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\n  }\n\n  @Listen(\"wmEscKeyPressed\")\n  closePopupOnEscape(): void {\n    this.close();\n  }\n\n  @Listen(\"wmOptionBlurred\")\n  handleOptionBlur(ev: CustomEvent): void {\n    // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget\n    // keeps our component's blur events accurate, and closes when focusing browser address bar\n    if (!this.isElOrChild(ev.detail.relatedTarget)) {\n      const event = new CustomEvent(\"blur\");\n      // @ts-ignore\n      event.relatedTarget = ev.detail.relatedTarget;\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleClick(ev: MouseEvent): void {\n    if (!this.isElOrChild(ev.target as HTMLElement)) {\n      this.close();\n    }\n  }\n\n  handleSelectAllClick() {\n    this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();\n  }\n\n  selectAllOptions() {\n    this.allOptionEls.forEach((o) => (o.selected = true));\n    this.setSelectAllButton();\n    this.setButtonText();\n    const detail = { changedOption: null, selectedOptions: this.childOptions };\n    this.wmSelectChanged.emit(detail);\n  }\n\n  deselectAllOptions() {\n    this.allOptionEls.forEach((o) => (o.selected = false));\n    this.setSelectAllButton();\n    this.setButtonText();\n    const detail = { changedOption: null, selectedOptions: [] };\n    this.wmSelectChanged.emit(detail);\n  }\n\n  handleButtonBlur(ev: FocusEvent) {\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\n      // do not emit a blur event when opening the dropdown and focusing the Options\n      ev.stopPropagation();\n    }\n  }\n\n  handleSearchFieldBlur(ev: FocusEvent) {\n    this.searchFieldWrapperEl.classList.remove(\"focus\");\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\n      // do not emit a blur event when moving from searchfield to options\n      ev.stopPropagation();\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKey(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        if (this.isExpanded === false) {\n          ev.preventDefault();\n          this.open(\"next\");\n        }\n        break;\n\n      case \"ArrowUp\":\n        if (this.isExpanded === false) {\n          ev.preventDefault();\n          this.open(\"previous\");\n        }\n        break;\n    }\n  }\n\n  componentWillLoad() {\n    if (!this.label) {\n      console.error(\n        \"For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).\"\n      );\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    // set initial selections\n    if (this.selectedOptions.length > 0) {\n      this.selectedOptions.forEach((x) => {\n        this.displayedOptions.push(x);\n      });\n      // single Select only, pre-select if no default option from dev\n    } else if (!this.multiple) {\n      this.selectOption(this.allOptionEls[0]);\n    }\n  }\n\n  componentDidLoad() {\n    this.wmSelectDidLoad.emit();\n    this.dropdownEl.classList.add(\"hidden\");\n    forceUpdate(this.el);\n\n    // Dev can overwrite the max-height rule set in the Sass file\n    if (this.maxHeight) {\n      this.listboxEl.style.maxHeight = this.maxHeight;\n    }\n\n    if (this.multiple) {\n      this.updateOptionVisibility();\n    }\n    this.setButtonText();\n  }\n\n  componentWillUpdate() {\n    if (this.multiple) {\n      // find last visible duplicate option and apply .last class\n      const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains(\"duplicate\"));\n      visibleDuplicateOptions.forEach((option, idx) => {\n        if (idx === visibleDuplicateOptions.length - 1) {\n          option.classList.add(\"last\");\n        } else {\n          option.classList.remove(\"last\");\n        }\n      });\n    }\n  }\n\n  moveUp(el: HTMLElement) {\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\n    if (this.selectAllEl) {\n      focusableEls.unshift(this.selectAllEl);\n    }\n    if (this.searchFieldEl) {\n      focusableEls.unshift(this.searchFieldEl);\n    }\n\n    const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];\n\n    if (prevEl) {\n      this.focusOption(prevEl);\n    }\n  }\n\n  moveDown(el: HTMLElement) {\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\n    if (this.selectAllEl) {\n      focusableEls.unshift(this.selectAllEl);\n    }\n    if (this.searchFieldEl) {\n      focusableEls.unshift(this.searchFieldEl);\n    }\n\n    const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];\n\n    if (nextEl) {\n      this.focusOption(nextEl);\n    }\n  }\n\n  open(optionToSelect?: \"next\" | \"previous\"): void {\n    if (!this.disabled) {\n      const elHeight = this.el.clientHeight;\n      const buttonHeight = this.buttonEl.clientHeight;\n      this.openUp = shouldOpenUp(\n        this.el,\n        this.dropdownEl,\n        // when opening up, dropdown covers both label and button\n        elHeight,\n        // when opening down, dropdown covers only the button\n        buttonHeight\n      );\n      this.isExpanded = true;\n      this.dropdownEl.classList.remove(\"hidden\");\n\n      window.requestAnimationFrame(() => {\n        switch (optionToSelect) {\n          case \"next\":\n            // search variant focuses search field\n            // all others focus option \"after\" last selected option  (this can be the first option)\n            if (this.search) {\n              this.searchFieldEl.focus();\n              this.listboxEl.scrollTop = 0;\n            } else {\n              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);\n            }\n            break;\n          case \"previous\":\n            // search variant focuses last option\n            // all others focus option \"above\" first selected option (this can be the last option)\n            if (this.search) {\n              this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\n            } else {\n              this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);\n            }\n            break;\n          default:\n            // search variant focuses search field\n            // all others focus the selected option\n            // if no option is selected (empty multiselect), focuses first option\n            if (this.search) {\n              this.searchFieldEl.focus();\n              this.listboxEl.scrollTop = 0;\n            } else if (this.selectedOptions.length > 0) {\n              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);\n            } else {\n              this.focusOption(this.visibleOptionEls[0]);\n            }\n            break;\n        }\n      });\n    }\n  }\n\n  close(returnFocus: boolean = true): void {\n    if (this.isExpanded) {\n      this.isExpanded = false;\n      this.allOptionEls.map((i) => (i.focused = false));\n\n      window.setTimeout(() => {\n        this.dropdownEl.classList.add(\"hidden\");\n        if (this.multiple) {\n          this.updateOptionVisibility();\n        }\n        // clear search field, reset filtered / bolded state of wm-options\n        if (this.search) {\n          this.searchFieldEl.value = \"\";\n          this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\n        }\n        // Returns focus to button after popup closes (no need if user is tabbing)\n        // Delay is necessary for screenreader to get new expanded state before focus\n        // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n        // also UX wise, it makes sense for the button to only be focused after the animation is complete\n        if (returnFocus) {\n          this.buttonEl.focus();\n        }\n      }, 150);\n    }\n  }\n\n  updateOptionVisibility() {\n    // this runs for search multiselects, where selected options are rendered at the top of the dropdown list\n    // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected\n    this.childOptions.forEach((option, idx) => {\n      const duplicateOption = this.duplicateOptions[idx];\n      if (option.selected) {\n        option.classList.add(\"hidden\");\n        duplicateOption.classList.remove(\"hidden\");\n      } else {\n        option.classList.remove(\"hidden\");\n        duplicateOption.classList.add(\"hidden\");\n      }\n    });\n  }\n\n  focusOption(option: HTMLElement): void {\n    this.allOptionEls.forEach((i) => (i.focused = i === option));\n\n    // option must be scrolledIntoView before focused\n    // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view\n    option.scrollIntoView({ block: \"nearest\" });\n\n    // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))\n    // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to\n    // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms\n    window.setTimeout(() => option.scrollIntoView({ block: \"nearest\" }), 60);\n\n    option.focus();\n  }\n\n  selectOption(option: HTMLWmOptionElement): void {\n    // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option\n    if (option.classList.contains(\"duplicate\")) {\n      // if clicking on a duplicate option, toggle selected property of real one, then rerender\n      const correspondingOption = this.findCorrespondingOption(option);\n      correspondingOption.selected = !correspondingOption.selected;\n      forceUpdate(this.el);\n    } else if (this.multiple) {\n      option.selected = !option.selected;\n    } else {\n      this.childOptions.forEach((x) => (x.selected = x === option));\n    }\n    // update the selectAll checkbox when an option is de/selected\n    // checking is the el is present, implies that this.multiple and this.selectAll are true\n    if (this.selectAllEl) {\n      this.setSelectAllButton();\n    }\n    this.setButtonText();\n  }\n\n  @Listen(\"wmLetterPressed\")\n  findAndFocusOption(ev: CustomEvent): void {\n    const character = ev.detail.toLowerCase();\n\n    if (!this.keysSoFar) {\n      // if first character entered, set currently focused option as the starting index for the search\n      this.visibleOptionEls.forEach((option, idx) => {\n        if (option.focused) {\n          this.searchIndex = idx;\n        }\n      });\n    }\n\n    this.keysSoFar += character;\n\n    let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);\n    if (!nextMatch) {\n      // if match can't be found from starting option downwards, search from top\n      nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);\n    }\n\n    if (nextMatch) {\n      // findMatchInRange still might have returned null, only focus if match found\n      this.focusOption(nextMatch as HTMLWmOptionElement);\n    }\n    this.debouncedClearKeysSoFar();\n  }\n\n  debouncedClearKeysSoFar = debounce(() => {\n    this.keysSoFar = \"\";\n  }, 500);\n\n  findMatchInRange(list: HTMLWmOptionElement[], startIndex: number, endIndex: number): HTMLWmOptionElement | null {\n    let match: HTMLWmOptionElement | null = null;\n    let optionsInRange = list.slice(startIndex, endIndex);\n\n    // Find the first option starting with the keysSoFar substring, searching in\n    // the specified range of options\n    optionsInRange.forEach((option) => {\n      const label = option.textContent;\n      if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {\n        match = option;\n      }\n    });\n\n    return match;\n  }\n\n  findCorrespondingOption(el: HTMLWmOptionElement): HTMLWmOptionElement {\n    // if duplicate, returns the child wm-option\n    // if child wm-option, returns duplicate\n    const isDuplicate = el.classList.contains(\"duplicate\");\n    return isDuplicate\n      ? this.childOptions[this.duplicateOptions.indexOf(el)]\n      : this.duplicateOptions[this.childOptions.indexOf(el)];\n  }\n\n  isElOrChild(el: HTMLElement) {\n    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot\n    return el === this.el || this.el.contains(el) || this.el.shadowRoot?.contains(el);\n  }\n\n  @Watch(\"errorMessage\")\n  exposeErrors() {\n    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683\n    const newId = generateId();\n    this.errorContainer.id = `wm-errors-${newId}`;\n    this.buttonEl.setAttribute(\"aria-describedby\", `wm-errors-${newId}`);\n  }\n\n  renderErrorContainer() {\n    return (\n      <div\n        id=\"wm-errors\"\n        class={this.errorMessage ? \"error-message\" : \"\"}\n        ref={(el) => (this.errorContainer = el as HTMLDivElement)}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n      >\n        {this.errorMessage}\n      </div>\n    );\n  }\n\n  handleComponentBlur(ev: FocusEvent): void {\n    // Do not close or emit custom blur event when blurring to an element inside (wm-option)\n    if (!this.el.contains(ev.relatedTarget as Node)) {\n      this.close(false);\n      this.wmSelectBlurred.emit();\n      this.wmComponentBlurred.emit(); // deprecated\n    }\n  }\n\n  // on search field or select all. keydown on options is handled via events.\n  handleKeyDown(ev: KeyboardEvent) {\n    const el = ev.target as HTMLElement;\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.moveDown(ev.target as HTMLElement);\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.moveUp(ev.target as HTMLElement);\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        this.close();\n        break;\n      case \"Enter\":\n        if (el === this.selectAllEl) {\n          ev.preventDefault();\n          this.handleSelectAllClick();\n          this.close();\n        }\n        break;\n      case \" \":\n        if (el === this.selectAllEl) {\n          ev.preventDefault();\n          this.handleSelectAllClick();\n        }\n        break;\n    }\n  }\n\n  debouncedSearch = debounce(() => {\n    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\n\n    if (this.filteredOptions.length) {\n      this.announce(this.resultsFoundMessage);\n    } else {\n      this.announce(this.noResultsFoundMessage);\n    }\n  }, 150);\n\n  setButtonText() {\n    this.displayedOptions = this.childOptions\n      .filter((x) => x.selected)\n      .map((y) => (!y.classList.contains(\"hidden\") ? y : this.findCorrespondingOption(y)));\n\n    // handle overflow + counter for multiselect\n    if (this.multiple) {\n      // this is a fixed measurement accounting for the max width of a 3 character overflow counter\n      const overflowCounterWidth = 38;\n      const computedStyle = window.getComputedStyle(this.buttonEl);\n\n      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually\n      const paddingLeft = parseInt(computedStyle.getPropertyValue(\"padding-left\").slice(0, -2));\n      const paddingRight = parseInt(computedStyle.getPropertyValue(\"padding-right\").slice(0, -2));\n\n      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;\n\n      let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot!.querySelector(\".option-wrapper\")!.clientWidth);\n\n      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);\n      this.overflowCount = 0;\n\n      while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {\n        this.overflowCount++;\n        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];\n        optionsWidths.pop();\n        this.displayedOptions.pop();\n      }\n    }\n  }\n\n  setSelectAllButton() {\n    if (this.allSelected) {\n      this.selectAllEl.textContent = this.deselectAllMessage;\n      this.announce(this.allOptionsSelectedMessage);\n    } else {\n      this.selectAllEl.textContent = this.selectAllMessage;\n      if (this.selectedOptions.length === 0) {\n        this.announce(this.allOptionsDeselectedMessage);\n      }\n    }\n  }\n\n  announce(message: string) {\n    // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\n    if (this.liveRegionEl.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.announcement = message;\n  }\n\n  renderButtonText() {\n    if (this.multiple && this.displayedOptions.length < 1) {\n      return <span>{this.placeholder}</span>;\n    } else if (this.multiple && this.allSelected && this.overflowCount > 0) {\n      return this.allSelectedMessage;\n    } else {\n      return this.displayedOptions.map((x, idx) => (\n        <span>\n          {idx > 0 ? \", \" : \"\"}\n          {x.textContent}\n        </span>\n      ));\n    }\n  }\n\n  renderSubinfo() {\n    // multiselects cannot have subinfo for options\n    if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {\n      return <span class=\"subinfo\">{this.selectedOptions[0].subinfo}</span>;\n    }\n  }\n\n  renderOverflowCount() {\n    if (this.overflowCount > 0 && !this.allSelected) {\n      return (\n        <span>\n          <span class=\"overflow-counter\">+{this.overflowCount}</span>\n        </span>\n      );\n    }\n  }\n\n  renderSearchField() {\n    return (\n      <div class=\"search\">\n        <div class=\"searchfield-wrapper\" ref={(el) => (this.searchFieldWrapperEl = el as HTMLInputElement)}>\n          <div class=\"icon\"></div>\n          <input\n            ref={(el) => (this.searchFieldEl = el as HTMLInputElement)}\n            class=\"searchfield\"\n            role=\"combobox\"\n            aria-controls={`list-${this.uid}`}\n            aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n            onKeyDown={(ev) => this.handleKeyDown(ev)}\n            onFocus={() => this.searchFieldWrapperEl.classList.add(\"focus\")}\n            onBlur={(ev) => this.handleSearchFieldBlur(ev)}\n            onInput={() => this.debouncedSearch()}\n            placeholder={this.searchPlaceholder}\n          ></input>\n        </div>\n      </div>\n    );\n  }\n\n  renderSearchFailedMessage() {\n    return <div class=\"search-results-message\">{this.noResultsFoundMessage}</div>;\n  }\n\n  renderSelectAllButton() {\n    if (this.selectAll && this.multiple && this.searchTerm == \"\") {\n      return (\n        <button\n          ref={(el) => (this.selectAllEl = el as HTMLButtonElement)}\n          class=\"select-all\"\n          onClick={() => this.handleSelectAllClick()}\n          onKeyDown={(ev) => this.handleKeyDown(ev)}\n          tabindex=\"-1\"\n        >\n          {this.allSelected ? this.deselectAllMessage : this.selectAllMessage}\n        </button>\n      );\n    }\n  }\n\n  renderDuplicateOptions() {\n    return Array.from(this.el.children).map((option) => {\n      return (\n        <wm-option class=\"duplicate\" selected={(option as HTMLWmOptionElement).selected}>\n          {option.textContent}\n        </wm-option>\n      );\n    });\n  }\n\n  render() {\n    const buttonProps = {\n      id: `selectbtn-${this.uid}`,\n      [\"disabled\"]: this.disabled,\n      [\"aria-controls\"]: `list-${this.uid}`,\n      [\"aria-labelledby\"]: `label-${this.uid} selectbtn-${this.uid}`,\n      [\"aria-describedby\"]: \"wm-errors\",\n      [\"aria-expanded\"]: this.isExpanded ? \"true\" : \"false\",\n      onClick: () => (this.isExpanded ? this.close() : this.open()),\n    };\n\n    return (\n      <Host onBlur={(ev: FocusEvent) => this.handleComponentBlur(ev)}>\n        <div\n          class={`wrapper ${getTextDir()} label-${this.labelPosition} ${\n            this.invalid || this.errorMessage ? \"invalid\" : \"\"\n          }`}\n        >\n          <div class=\"label-wrapper\">\n            <label class=\"label\" id={`label-${this.uid}`} htmlFor={`selectbtn-${this.uid}`}>\n              {this.label}\n              {\n                // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)\n                this.requiredField ? (\n                  <span class=\"required\">\n                    <span class=\"sr-only\">{globalMessages.requiredField}</span>\n                    <span aria-hidden=\"true\">*</span>\n                  </span>\n                ) : (\n                  \"\"\n                )\n              }\n            </label>\n          </div>\n          <div class=\"button-wrapper\">\n            <button\n              {...buttonProps}\n              class={`displayedoption ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n              ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n              onBlur={(ev) => this.handleButtonBlur(ev)}\n              onFocus={() => this.close()}\n            >\n              <span\n                class={\n                  this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0\n                    ? \"overflowcontrol hassubinfo\"\n                    : \"overflowcontrol\"\n                }\n              >\n                <span class=\"button-text\">{this.renderButtonText()}</span>\n                {this.renderSubinfo()}\n              </span>\n              {this.renderOverflowCount()}\n            </button>\n            <div\n              class={`dropdown ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\n              ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\n            >\n              {this.search && this.renderSearchField()}\n              <div\n                id={`list-${this.uid}`}\n                class=\"options-wrapper\"\n                tabindex={-1}\n                role=\"listbox\"\n                aria-multiselectable={this.multiple ? \"true\" : null}\n                aria-labelledby={`label-${this.uid}`}\n                ref={(el) => (this.listboxEl = el as HTMLDivElement)}\n              >\n                {this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage()}\n                {this.renderSelectAllButton()}\n                {this.multiple && this.renderDuplicateOptions()}\n                <slot />\n              </div>\n            </div>\n            {this.renderErrorContainer()}\n            <div\n              id=\"announcement\"\n              aria-live=\"polite\"\n              class=\"sr-only\"\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n            >\n              {this.announcement}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wRAAA,IAAMA,YAAc,09E,ICOPC,OAAM,W,omBAI2BC,U,cACC,M,cACA,M,aAClB,M,gBAaG,E,CAG9BC,OAAAC,eAAIH,EAAAI,UAAA,cAAW,C,IAAf,WACE,IAAIC,EAAU,GACd,GAAIC,KAAKC,QAAS,CAChBF,EAAQG,KAAK,a,CAEf,GAAIF,KAAKG,eAAeC,SAAU,CAChCL,EAAQG,KAAK,e,CAEf,IAAKF,KAAKK,GAAGC,YAAaC,cAAcC,SAASR,KAAKS,YAAa,CACjEV,EAAQG,KAAK,e,CAEf,OAAOH,EAAQW,KAAK,I,uCAGtBd,OAAAC,eAAIH,EAAAI,UAAA,iBAAc,C,IAAlB,W,MACE,QAAOa,EAAAX,KAAKK,GAAGO,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,YAAa,YACrCb,KAAKK,GAAGS,cAA6BC,KACtCf,KAAKK,GAAGO,a,uCAIflB,EAAAI,UAAAkB,cAAA,SAAcC,GACZ,OAAQA,EAAGC,KACT,IAAK,UACHD,EAAGE,iBACHnB,KAAKoB,eAAeC,KAAKrB,KAAKK,IAC9B,MAEF,IAAK,YACHY,EAAGE,iBACHnB,KAAKsB,iBAAiBD,KAAKrB,KAAKK,IAChC,MAEF,IAAK,QACHY,EAAGE,iBACH,IAAKnB,KAAKuB,SAAU,CAClBvB,KAAKK,GAAGmB,QACRxB,KAAKyB,kBAAkBJ,KAAKrB,KAAKK,G,CAEnC,MAEF,IAAK,IACHY,EAAGE,iBACHnB,KAAKK,GAAGmB,QACR,MAEF,IAAK,SACHP,EAAGE,iBACHF,EAAGS,kBACH1B,KAAK2B,gBAAgBN,OACrB,MAEF,IAAK,OACHJ,EAAGE,iBACHnB,KAAK4B,iBAAiBP,OACtB,MAEF,IAAK,MACHJ,EAAGE,iBACHnB,KAAK6B,gBAAgBR,OACrB,MAEF,QACE,GAAIJ,EAAGC,IAAIY,SAAW,EAAG,CAEvB9B,KAAK+B,gBAAgBV,KAAKJ,EAAGC,I,IAMrCxB,EAAAI,UAAAkC,gBAAA,WACE,IAAKhC,KAAKuB,SAAU,CAGlBvB,KAAKiC,iBAAiBZ,KAAKrB,KAAKK,G,GAKpCX,EAAAI,UAAAoC,WAAA,SAAWjB,GACTjB,KAAKmC,gBAAgBd,KAAK,CAAEe,cAAenB,EAAGmB,e,EAIhD1C,EAAAI,UAAAuC,iBAAA,WAGErC,KAAKsC,SAAWtC,KAAKK,GAAGkC,aAAa,gBAAiB,QAAUvC,KAAKK,GAAGmC,gBAAgB,gB,EAI1F9C,EAAAI,UAAA2C,iBAAA,WACEzC,KAAKuB,SAAWvB,KAAKK,GAAGkC,aAAa,gBAAiB,QAAUvC,KAAKK,GAAGmC,gBAAgB,gB,EAI1F9C,EAAAI,UAAA4C,sBAAA,WACE,GAAI1C,KAAKuB,UAAYvB,KAAKK,GAAGsC,QAAS,CACpC3C,KAAK4C,YAAc5C,KAAKK,GAAGsC,QAC3B3C,KAAKK,GAAGsC,QAAU,I,MACb,IAAK3C,KAAKuB,UAAYvB,KAAK4C,YAAa,CAC7C5C,KAAKK,GAAGsC,QAAU3C,KAAK4C,W,GAI3BlD,EAAAI,UAAA+C,aAAA,SAAa5B,GAEXjB,KAAKS,WAAaQ,EAAG6B,OAAOrC,WAAWF,cAEvC,GAAIP,KAAKS,WAAY,CACnB,IAAMsC,EAAS,IAAIC,OAAO,GAAAC,OAAGjD,KAAKS,YAAc,MAChD,IAAMyC,EAAalD,KAAKK,GAAGC,YAAa6C,QAAQJ,GAAQ,SAACK,GAAU,iBAAAH,OAAWG,EAAK,YAAhB,IAGnEpD,KAAKqD,OAAOC,UAAYJ,C,KACnB,CACLlD,KAAKqD,OAAOC,UAAYtD,KAAKK,GAAGC,W,GAIpCZ,EAAAI,UAAAyD,kBAAA,eAAAC,EAAAxD,KACEA,KAAKqC,mBACLrC,KAAKyC,mBACLzC,KAAK0C,wBAEL1C,KAAKG,eAAesD,iBAAiB,yBAAyB,SAACxC,GAAO,OAAAuC,EAAKX,aAAa5B,EAAlB,G,EAGxEvB,EAAAI,UAAA4D,OAAA,eAAAF,EAAAxD,KACE,OACE2D,EAACC,KAAI,CAACC,KAAK,SAASC,SAAU9D,KAAK+D,QAAU,GAAK,EAAGC,MAAOhE,KAAKiE,aAC/DN,EAAA,OAAKK,MAAO,kBAAAf,OAAkBjD,KAAKG,eAAeC,SAAW,WAAa,KACxEuD,EAAA,sBAAkB,OAAOO,IAAK,SAAC7D,GAAE,OAAMmD,EAAKH,OAAShD,CAApB,GAC9BL,KAAKK,GAAGC,aAEXqD,EAAA,QAAMK,MAAM,WAAWhE,KAAKK,GAAGC,cAEjCqD,EAAA,OAAKK,MAAM,WAAWhE,KAAKC,S,qTAjKhB,G,yBCPnB,IAAMkE,YAAc,i7P,ICUPC,OAAM,W,2WA8BjBpE,KAAAqE,iBAAmBC,KAAKC,cAAc,CACpCC,GAAI,mBACJC,eAAgB,eAGlBzE,KAAA0E,mBAAqBJ,KAAKC,cAAc,CACtCC,GAAI,qBACJC,eAAgB,iBAGlBzE,KAAA2E,0BAA4BL,KAAKC,cAAc,CAC7CC,GAAI,4BACJC,eAAgB,yBAGlBzE,KAAA4E,4BAA8BN,KAAKC,cAAc,CAC/CC,GAAI,8BACJC,eAAgB,2BAoBVzE,KAAA6E,UAAoB,GACpB7E,KAAA8E,YAAsB,EACtB9E,KAAA+E,OAAkB,MA+BlB/E,KAAAgF,cAAwB,EAIxBhF,KAAAiF,iBAA0C,GAmalDjF,KAAAkF,wBAA0BC,UAAS,WACjC3B,EAAKqB,UAAY,E,GAChB,KA+FH7E,KAAAoF,gBAAkBD,UAAS,WACzB3B,EAAK6B,sBAAsBhE,KAAK,CAAEZ,WAAY+C,EAAK/C,aAEnD,GAAI+C,EAAK8B,gBAAgBxD,OAAQ,CAC/B0B,EAAK+B,SAAS/B,EAAKgC,oB,KACd,CACLhC,EAAK+B,SAAS/B,EAAKiC,sB,IAEpB,K,cAhnB0C,M,aACD,M,iEAGK,M,mBAChB,M,kBACe,G,cACpB,M,YACF,M,eACG,M,iBACCnB,KAAKC,cAAc,CAC/CC,GAAI,0BACJC,eAAgB,mBAChBiB,YAAa,qC,uBAEqBpB,KAAKC,cAAc,CACrDC,GAAI,2BACJC,eAAgB,SAChBiB,YAAa,qC,wBAEsBpB,KAAKC,cAAc,CACtDC,GAAI,qBACJC,eAAgB,eAChBiB,YAAa,iD,eAuBe,M,gBACC,M,kBACC,E,CAkBhC9F,OAAAC,eAAIuE,EAAAtE,UAAA,eAAY,C,IAAhB,WACE,OAAO6F,MAAMC,KAAK5F,KAAKK,GAAGwF,iBAAiB,a,uCAE7CjG,OAAAC,eAAIuE,EAAAtE,UAAA,mBAAgB,C,IAApB,WACE,OAAO6F,MAAMC,KAAK5F,KAAKK,GAAGyF,WAAYD,iBAAiB,a,uCAEzDjG,OAAAC,eAAIuE,EAAAtE,UAAA,eAAY,C,IAAhB,WAEE,OAAOE,KAAK+F,iBAAiB9C,OAAOjD,KAAKgG,a,uCAE3CpG,OAAAC,eAAIuE,EAAAtE,UAAA,mBAAgB,C,IAApB,WACE,OAAOE,KAAKiG,aAAaC,QACvB,SAACC,GAAW,OAACA,EAAOC,UAAUC,SAAS,YAAcF,EAAOC,UAAUC,SAAS,eAAnE,G,uCAMhBzG,OAAAC,eAAIuE,EAAAtE,UAAA,aAAU,C,IAAd,WACE,OAAOE,KAAKsG,cAAgBtG,KAAKsG,cAAcC,MAAQ,E,uCAEzD3G,OAAAC,eAAIuE,EAAAtE,UAAA,kBAAe,C,IAAnB,eAAA0D,EAAAxD,KACE,OAAOA,KAAKgG,aAAaE,QAAO,SAACC,GAAM,IAAAxF,EACrC,OAAAA,EAAAwF,EAAO7F,eAAW,MAAAK,SAAA,SAAAA,EAAEJ,cAAcC,SAASgD,EAAK/C,WAAWF,cAAc,G,uCAQ7EX,OAAAC,eAAIuE,EAAAtE,UAAA,kBAAe,C,IAAnB,WACE,OAAO6F,MAAMC,KAAK5F,KAAKK,GAAGwF,iBAAiB,cAAcK,QAAO,SAACM,GAAM,OAAAA,EAAElE,QAAF,G,uCAGzE1C,OAAAC,eAAIuE,EAAAtE,UAAA,cAAW,C,IAAf,WACE,OAAOE,KAAKgG,aAAaS,OAAM,SAACN,GAAW,OAAAA,EAAO7D,QAAP,G,uCAI7C1C,OAAAC,eAAIuE,EAAAtE,UAAA,sBAAmB,C,IAAvB,WACE,OAAOwE,KAAKC,cACV,CACEC,GAAI,4BACJC,eAAgB,qEAChBiB,YAAa,wFAEf,CAAEgB,WAAY1G,KAAKsF,gBAAgBxD,Q,uCAIvClC,OAAAC,eAAIuE,EAAAtE,UAAA,wBAAqB,C,IAAzB,WACE,OAAOwE,KAAKC,cAAc,CACxBC,GAAI,yBACJC,eAAgB,kDAChBiB,YAAa,gE,uCAKjBtB,EAAAtE,UAAA6G,gBAAA,WACE3G,KAAK4G,UAAY,I,EAInBxC,EAAAtE,UAAA+G,iBAAA,WACE7G,KAAK4G,UAAY,K,EAInBxC,EAAAtE,UAAAgH,sBAAA,SAAsB7F,GACpB,IAAMkF,EAA8BlF,EAAG6B,OACvC9C,KAAK+G,YAAYZ,GACjB,IAAKnG,KAAKI,SAAU,CAElB,IAAK+F,EAAO7D,SAAU,CACpBtC,KAAKgH,aAAab,GAClB,IAAMrD,EAAS,CAAEmE,cAAed,EAAQe,gBAAiB,CAACf,IAC1DnG,KAAKmH,gBAAgB9F,KAAKyB,GAG1B,IAAMsE,EAAQ,IAAIC,YAAY,SAAU,CAAEvE,OAAQA,IAElD9C,KAAKK,GAAGiH,cAAcF,E,CAExBpH,KAAKuH,O,KACA,CACLvH,KAAKgH,aAAab,GAKlB,IAAMqB,EAAuBrB,EAAOC,UAAUC,SAAS,aACvD,IAAMoB,EAAsCD,EAAcxH,KAAK0H,wBAAwBvB,GAAUA,EACjG,IAAMe,EAAkBlH,KAAKgG,aAAaE,QAAO,SAACyB,GAAM,OAAAA,EAAErF,QAAF,IACxD,IAAMQ,EAAS,CAAEmE,cAAeQ,EAAgBP,gBAAiBA,GACjElH,KAAKmH,gBAAgB9F,KAAKyB,GAG1B,IAAMsE,EAAQ,IAAIC,YAAY,SAAU,CAAEvE,OAAQA,IAElD9C,KAAKK,GAAGiH,cAAcF,E,GAK1BhD,EAAAtE,UAAA8H,iBAAA,WAEE5H,KAAKuH,O,EAIPnD,EAAAtE,UAAA+H,cAAA,SAAc5G,GACZjB,KAAK8H,OAAO7G,EAAG6B,O,EAIjBsB,EAAAtE,UAAAiI,gBAAA,SAAgB9G,GACdjB,KAAKgI,SAAS/G,EAAG6B,O,EAInBsB,EAAAtE,UAAAmI,kBAAA,WACEjI,KAAK+G,YAAY/G,KAAKkI,iBAAiB,G,EAIzC9D,EAAAtE,UAAAqI,iBAAA,WACEnI,KAAK+G,YAAY/G,KAAKkI,iBAAiBlI,KAAKkI,iBAAiBpG,OAAS,G,EAIxEsC,EAAAtE,UAAAsI,mBAAA,WACEpI,KAAKuH,O,EAIPnD,EAAAtE,UAAAuI,iBAAA,SAAiBpH,GAGf,IAAKjB,KAAKsI,YAAYrH,EAAG6B,OAAOV,eAAgB,CAC9C,IAAMgF,EAAQ,IAAIC,YAAY,QAE9BD,EAAMhF,cAAgBnB,EAAG6B,OAAOV,cAChCpC,KAAKK,GAAGiH,cAAcF,E,GAK1BhD,EAAAtE,UAAAyI,YAAA,SAAYtH,GACV,IAAKjB,KAAKsI,YAAYrH,EAAGuH,QAAwB,CAC/CxI,KAAKuH,O,GAITnD,EAAAtE,UAAA2I,qBAAA,WACEzI,KAAK0I,YAAc1I,KAAK2I,qBAAuB3I,KAAK4I,kB,EAGtDxE,EAAAtE,UAAA8I,iBAAA,WACE5I,KAAKiG,aAAa4C,SAAQ,SAAClB,GAAC,OAAMA,EAAErF,SAAW,IAAnB,IAC5BtC,KAAK8I,qBACL9I,KAAK+I,gBACL,IAAMjG,EAAS,CAAEmE,cAAe,KAAMC,gBAAiBlH,KAAKgG,cAC5DhG,KAAKmH,gBAAgB9F,KAAKyB,E,EAG5BsB,EAAAtE,UAAA6I,mBAAA,WACE3I,KAAKiG,aAAa4C,SAAQ,SAAClB,GAAC,OAAMA,EAAErF,SAAW,KAAnB,IAC5BtC,KAAK8I,qBACL9I,KAAK+I,gBACL,IAAMjG,EAAS,CAAEmE,cAAe,KAAMC,gBAAiB,IACvDlH,KAAKmH,gBAAgB9F,KAAKyB,E,EAG5BsB,EAAAtE,UAAAkJ,iBAAA,SAAiB/H,GACf,GAAIjB,KAAKsI,YAAYrH,EAAGmB,eAA+B,CAErDnB,EAAGS,iB,GAIP0C,EAAAtE,UAAAmJ,sBAAA,SAAsBhI,GACpBjB,KAAKkJ,qBAAqB9C,UAAU+C,OAAO,SAC3C,GAAInJ,KAAKsI,YAAYrH,EAAGmB,eAA+B,CAErDnB,EAAGS,iB,GAKP0C,EAAAtE,UAAAsJ,UAAA,SAAUnI,GACR,OAAQA,EAAGC,KACT,IAAK,YACH,GAAIlB,KAAKqJ,aAAe,MAAO,CAC7BpI,EAAGE,iBACHnB,KAAKsJ,KAAK,O,CAEZ,MAEF,IAAK,UACH,GAAItJ,KAAKqJ,aAAe,MAAO,CAC7BpI,EAAGE,iBACHnB,KAAKsJ,KAAK,W,CAEZ,M,EAINlF,EAAAtE,UAAAyD,kBAAA,eAAAC,EAAAxD,KACE,IAAKA,KAAKuJ,MAAO,CACfC,QAAQC,MACN,2G,CAIJzJ,KAAK0J,IAAM1J,KAAKK,GAAGmE,GAAKxE,KAAKK,GAAGmE,GAAKmF,aAErC,GAAIC,SAASC,KAAKzD,UAAUC,SAAS,wBAAyB,CAC5DrG,KAAK2G,iB,CAIP,GAAI3G,KAAKkH,gBAAgBpF,OAAS,EAAG,CACnC9B,KAAKkH,gBAAgB2B,SAAQ,SAACrC,GAC5BhD,EAAKyB,iBAAiB/E,KAAKsG,E,SAGxB,IAAKxG,KAAKI,SAAU,CACzBJ,KAAKgH,aAAahH,KAAKiG,aAAa,G,GAIxC7B,EAAAtE,UAAAgK,iBAAA,WACE9J,KAAK+J,gBAAgB1I,OACrBrB,KAAKgK,WAAW5D,UAAU6D,IAAI,UAC9BC,YAAYlK,KAAKK,IAGjB,GAAIL,KAAKmK,UAAW,CAClBnK,KAAKoK,UAAUC,MAAMF,UAAYnK,KAAKmK,S,CAGxC,GAAInK,KAAKI,SAAU,CACjBJ,KAAKsK,wB,CAEPtK,KAAK+I,e,EAGP3E,EAAAtE,UAAAyK,oBAAA,WACE,GAAIvK,KAAKI,SAAU,CAEjB,IAAMoK,EAA0BxK,KAAKkI,iBAAiBhC,QAAO,SAACC,GAAW,OAAAA,EAAOC,UAAUC,SAAS,YAA1B,IACzEmE,EAAwB3B,SAAQ,SAAC1C,EAAQsE,GACvC,GAAIA,IAAQD,EAAwB1I,OAAS,EAAG,CAC9CqE,EAAOC,UAAU6D,IAAI,O,KAChB,CACL9D,EAAOC,UAAU+C,OAAO,O,OAMhC/E,EAAAtE,UAAAgI,OAAA,SAAOzH,GACL,IAAMqK,EAA8B1K,KAAKkI,iBACzC,GAAIlI,KAAK2K,YAAa,CACpBD,EAAaE,QAAQ5K,KAAK2K,Y,CAE5B,GAAI3K,KAAKsG,cAAe,CACtBoE,EAAaE,QAAQ5K,KAAKsG,c,CAG5B,IAAMuE,EAASH,EAAaA,EAAaI,QAAQzK,GAAM,IAAMqK,EAAaA,EAAa5I,OAAS,GAEhG,GAAI+I,EAAQ,CACV7K,KAAK+G,YAAY8D,E,GAIrBzG,EAAAtE,UAAAkI,SAAA,SAAS3H,GACP,IAAMqK,EAA8B1K,KAAKkI,iBACzC,GAAIlI,KAAK2K,YAAa,CACpBD,EAAaE,QAAQ5K,KAAK2K,Y,CAE5B,GAAI3K,KAAKsG,cAAe,CACtBoE,EAAaE,QAAQ5K,KAAKsG,c,CAG5B,IAAMyE,EAASL,EAAaA,EAAaI,QAAQzK,GAAM,IAAMqK,EAAa,GAE1E,GAAIK,EAAQ,CACV/K,KAAK+G,YAAYgE,E,GAIrB3G,EAAAtE,UAAAwJ,KAAA,SAAK0B,GAAL,IAAAxH,EAAAxD,KACE,IAAKA,KAAKuB,SAAU,CAClB,IAAM0J,EAAWjL,KAAKK,GAAG6K,aACzB,IAAMC,EAAenL,KAAKoL,SAASF,aACnClL,KAAK+E,OAASsG,aACZrL,KAAKK,GACLL,KAAKgK,WAELiB,EAEAE,GAEFnL,KAAKqJ,WAAa,KAClBrJ,KAAKgK,WAAW5D,UAAU+C,OAAO,UAEjCmC,OAAOC,uBAAsB,WAC3B,OAAQP,GACN,IAAK,OAGH,GAAIxH,EAAKgI,OAAQ,CACfhI,EAAK8C,cAAcmF,QACnBjI,EAAK4G,UAAUsB,UAAY,C,KACtB,CACLlI,EAAKwE,SAASxE,EAAK0E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAElE,QAAF,IAAYqJ,OAAO,GAAG,G,CAE1E,MACF,IAAK,WAGH,GAAInI,EAAKgI,OAAQ,CACfhI,EAAKuD,YAAYvD,EAAK0E,iBAAiB1E,EAAK0E,iBAAiBpG,OAAS,G,KACjE,CACL0B,EAAKsE,OAAOtE,EAAK0E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAElE,QAAF,IAAY,G,CAE9D,MACF,QAIE,GAAIkB,EAAKgI,OAAQ,CACfhI,EAAK8C,cAAcmF,QACnBjI,EAAK4G,UAAUsB,UAAY,C,MACtB,GAAIlI,EAAK0D,gBAAgBpF,OAAS,EAAG,CAC1C0B,EAAKuD,YAAYvD,EAAK0E,iBAAiBhC,QAAO,SAACM,GAAM,OAAAA,EAAElE,QAAF,IAAY,G,KAC5D,CACLkB,EAAKuD,YAAYvD,EAAK0E,iBAAiB,G,CAEzC,M,MAMV9D,EAAAtE,UAAAyH,MAAA,SAAMqE,GAAN,IAAApI,EAAAxD,KAAM,GAAA4L,SAAA,GAAAA,EAAA,IAA2B,CAC/B,GAAI5L,KAAKqJ,WAAY,CACnBrJ,KAAKqJ,WAAa,MAClBrJ,KAAKiG,aAAa4F,KAAI,SAACC,GAAC,OAAMA,EAAE/H,QAAU,KAAlB,IAExBuH,OAAOS,YAAW,WAChBvI,EAAKwG,WAAW5D,UAAU6D,IAAI,UAC9B,GAAIzG,EAAKpD,SAAU,CACjBoD,EAAK8G,wB,CAGP,GAAI9G,EAAKgI,OAAQ,CACfhI,EAAK8C,cAAcC,MAAQ,GAC3B/C,EAAK6B,sBAAsBhE,KAAK,CAAEZ,WAAY+C,EAAK/C,Y,CAMrD,GAAImL,EAAa,CACfpI,EAAK4H,SAASK,O,IAEf,I,GAIPrH,EAAAtE,UAAAwK,uBAAA,eAAA9G,EAAAxD,KAGEA,KAAKgG,aAAa6C,SAAQ,SAAC1C,EAAQsE,GACjC,IAAMuB,EAAkBxI,EAAKuC,iBAAiB0E,GAC9C,GAAItE,EAAO7D,SAAU,CACnB6D,EAAOC,UAAU6D,IAAI,UACrB+B,EAAgB5F,UAAU+C,OAAO,S,KAC5B,CACLhD,EAAOC,UAAU+C,OAAO,UACxB6C,EAAgB5F,UAAU6D,IAAI,S,MAKpC7F,EAAAtE,UAAAiH,YAAA,SAAYZ,GACVnG,KAAKiG,aAAa4C,SAAQ,SAACiD,GAAC,OAAMA,EAAE/H,QAAU+H,IAAM3F,CAAxB,IAI5BA,EAAO8F,eAAe,CAAEC,MAAO,YAK/BZ,OAAOS,YAAW,WAAM,OAAA5F,EAAO8F,eAAe,CAAEC,MAAO,WAA/B,GAA6C,IAErE/F,EAAOsF,O,EAGTrH,EAAAtE,UAAAkH,aAAA,SAAab,GAEX,GAAIA,EAAOC,UAAUC,SAAS,aAAc,CAE1C,IAAM8F,EAAsBnM,KAAK0H,wBAAwBvB,GACzDgG,EAAoB7J,UAAY6J,EAAoB7J,SACpD4H,YAAYlK,KAAKK,G,MACZ,GAAIL,KAAKI,SAAU,CACxB+F,EAAO7D,UAAY6D,EAAO7D,Q,KACrB,CACLtC,KAAKgG,aAAa6C,SAAQ,SAACrC,GAAC,OAAMA,EAAElE,SAAWkE,IAAML,CAAzB,G,CAI9B,GAAInG,KAAK2K,YAAa,CACpB3K,KAAK8I,oB,CAEP9I,KAAK+I,e,EAIP3E,EAAAtE,UAAAsM,mBAAA,SAAmBnL,GAAnB,IAAAuC,EAAAxD,KACE,IAAMqM,EAAYpL,EAAG6B,OAAOvC,cAE5B,IAAKP,KAAK6E,UAAW,CAEnB7E,KAAKkI,iBAAiBW,SAAQ,SAAC1C,EAAQsE,GACrC,GAAItE,EAAOpC,QAAS,CAClBP,EAAKsB,YAAc2F,C,KAKzBzK,KAAK6E,WAAawH,EAElB,IAAIC,EAAYtM,KAAKuM,iBAAiBvM,KAAKkI,iBAAkBlI,KAAK8E,YAAc,EAAG9E,KAAKkI,iBAAiBpG,QACzG,IAAKwK,EAAW,CAEdA,EAAYtM,KAAKuM,iBAAiBvM,KAAKkI,iBAAkB,EAAGlI,KAAK8E,Y,CAGnE,GAAIwH,EAAW,CAEbtM,KAAK+G,YAAYuF,E,CAEnBtM,KAAKkF,yB,EAOPd,EAAAtE,UAAAyM,iBAAA,SAAiBC,EAA6BC,EAAoBC,GAAlE,IAAAlJ,EAAAxD,KACE,IAAIoD,EAAoC,KACxC,IAAIuJ,EAAiBH,EAAKb,MAAMc,EAAYC,GAI5CC,EAAe9D,SAAQ,SAAC1C,GACtB,IAAMoD,EAAQpD,EAAO7F,YACrB,IAAK8C,GAASmG,GAASA,EAAMhJ,cAAcqM,WAAWpJ,EAAKqB,WAAY,CACrEzB,EAAQ+C,C,KAIZ,OAAO/C,C,EAGTgB,EAAAtE,UAAA4H,wBAAA,SAAwBrH,GAGtB,IAAMmH,EAAcnH,EAAG+F,UAAUC,SAAS,aAC1C,OAAOmB,EACHxH,KAAKgG,aAAahG,KAAK+F,iBAAiB+E,QAAQzK,IAChDL,KAAK+F,iBAAiB/F,KAAKgG,aAAa8E,QAAQzK,G,EAGtD+D,EAAAtE,UAAAwI,YAAA,SAAYjI,G,MAEV,OAAOA,IAAOL,KAAKK,IAAML,KAAKK,GAAGgG,SAAShG,MAAOM,EAAAX,KAAKK,GAAGyF,cAAU,MAAAnF,SAAA,SAAAA,EAAE0F,SAAShG,G,EAIhF+D,EAAAtE,UAAA+M,aAAA,WAEE,IAAMC,EAAQnD,aACd3J,KAAK+M,eAAevI,GAAK,aAAAvB,OAAa6J,GACtC9M,KAAKoL,SAAS7I,aAAa,mBAAoB,aAAAU,OAAa6J,G,EAG9D1I,EAAAtE,UAAAkN,qBAAA,eAAAxJ,EAAAxD,KACE,OACE2D,EAAA,OACEa,GAAG,YACHR,MAAOhE,KAAKiN,aAAe,gBAAkB,GAC7C/I,IAAK,SAAC7D,GAAE,OAAMmD,EAAKuJ,eAAiB1M,CAA5B,EAAiD,YAC/C,YAAW,cACT,QAEXL,KAAKiN,a,EAKZ7I,EAAAtE,UAAAoN,oBAAA,SAAoBjM,GAElB,IAAKjB,KAAKK,GAAGgG,SAASpF,EAAGmB,eAAwB,CAC/CpC,KAAKuH,MAAM,OACXvH,KAAKmN,gBAAgB9L,OACrBrB,KAAKoN,mBAAmB/L,M,GAK5B+C,EAAAtE,UAAAuN,cAAA,SAAcpM,GACZ,IAAMZ,EAAKY,EAAGuH,OACd,OAAQvH,EAAGC,KACT,IAAK,YACHD,EAAGE,iBACHnB,KAAKgI,SAAS/G,EAAGuH,QACjB,MACF,IAAK,UACHvH,EAAGE,iBACHnB,KAAK8H,OAAO7G,EAAGuH,QACf,MACF,IAAK,SACHvH,EAAGE,iBACHnB,KAAKuH,QACL,MACF,IAAK,QACH,GAAIlH,IAAOL,KAAK2K,YAAa,CAC3B1J,EAAGE,iBACHnB,KAAKyI,uBACLzI,KAAKuH,O,CAEP,MACF,IAAK,IACH,GAAIlH,IAAOL,KAAK2K,YAAa,CAC3B1J,EAAGE,iBACHnB,KAAKyI,sB,CAEP,M,EAcNrE,EAAAtE,UAAAiJ,cAAA,eAAAvF,EAAAxD,KACEA,KAAKiF,iBAAmBjF,KAAKgG,aAC1BE,QAAO,SAACM,GAAM,OAAAA,EAAElE,QAAF,IACduJ,KAAI,SAACyB,GAAC,OAAOA,EAAElH,UAAUC,SAAS,UAAYiH,EAAI9J,EAAKkE,wBAAwB4F,EAAzE,IAGT,GAAItN,KAAKI,SAAU,CAEjB,IAAMmN,EAAuB,GAC7B,IAAMC,EAAgBlC,OAAOmC,iBAAiBzN,KAAKoL,UAGnD,IAAMsC,EAAcC,SAASH,EAAcI,iBAAiB,gBAAgBjC,MAAM,GAAI,IACtF,IAAMkC,EAAeF,SAASH,EAAcI,iBAAiB,iBAAiBjC,MAAM,GAAI,IAExF,IAAMmC,EAAiB9N,KAAKoL,SAAS2C,YAAcL,EAAcG,EAAeN,EAEhF,IAAIS,EAAgBhO,KAAKiF,iBAAiB4G,KAAI,SAACrF,GAAM,OAAAA,EAAEV,WAAYmI,cAAc,mBAAoBF,WAAhD,IAErD,IAAIG,EAAoBF,EAAcG,QAAO,SAACC,EAAK5H,GAAM,OAAA4H,EAAM5H,CAAN,GAAS,GAClExG,KAAKgF,cAAgB,EAErB,MAAOkJ,EAAoBJ,GAAkB9N,KAAKiF,iBAAiBnD,OAAS,EAAG,CAC7E9B,KAAKgF,gBACLkJ,GAAqBF,EAAcA,EAAclM,OAAS,GAC1DkM,EAAcK,MACdrO,KAAKiF,iBAAiBoJ,K,IAK5BjK,EAAAtE,UAAAgJ,mBAAA,WACE,GAAI9I,KAAK0I,YAAa,CACpB1I,KAAK2K,YAAYrK,YAAcN,KAAK0E,mBACpC1E,KAAKuF,SAASvF,KAAK2E,0B,KACd,CACL3E,KAAK2K,YAAYrK,YAAcN,KAAKqE,iBACpC,GAAIrE,KAAKkH,gBAAgBpF,SAAW,EAAG,CACrC9B,KAAKuF,SAASvF,KAAK4E,4B,IAKzBR,EAAAtE,UAAAyF,SAAA,SAAS+I,GAEP,GAAItO,KAAKuO,aAAajO,cAAgBgO,EAAS,CAC7CA,GAAW,G,CAEbtO,KAAKwO,aAAeF,C,EAGtBlK,EAAAtE,UAAA2O,iBAAA,WACE,GAAIzO,KAAKI,UAAYJ,KAAKiF,iBAAiBnD,OAAS,EAAG,CACrD,OAAO6B,EAAA,YAAO3D,KAAK0O,Y,MACd,GAAI1O,KAAKI,UAAYJ,KAAK0I,aAAe1I,KAAKgF,cAAgB,EAAG,CACtE,OAAOhF,KAAK2O,kB,KACP,CACL,OAAO3O,KAAKiF,iBAAiB4G,KAAI,SAACrF,EAAGiE,GAAG,OACtC9G,EAAA,YACG8G,EAAM,EAAI,KAAO,GACjBjE,EAAElG,YAHiC,G,GAS5C8D,EAAAtE,UAAA8O,cAAA,WAEE,IAAK5O,KAAKI,UAAYJ,KAAKkH,gBAAgBpF,OAAS,GAAK9B,KAAKkH,gBAAgB,GAAGjH,QAAS,CACxF,OAAO0D,EAAA,QAAMK,MAAM,WAAWhE,KAAKkH,gBAAgB,GAAGjH,Q,GAI1DmE,EAAAtE,UAAA+O,oBAAA,WACE,GAAI7O,KAAKgF,cAAgB,IAAMhF,KAAK0I,YAAa,CAC/C,OACE/E,EAAA,YACEA,EAAA,QAAMK,MAAM,oBAAkB,IAAGhE,KAAKgF,e,GAM9CZ,EAAAtE,UAAAgP,kBAAA,eAAAtL,EAAAxD,KACE,OACE2D,EAAA,OAAKK,MAAM,UACTL,EAAA,OAAKK,MAAM,sBAAsBE,IAAK,SAAC7D,GAAE,OAAMmD,EAAK0F,qBAAuB7I,CAAlC,GACvCsD,EAAA,OAAKK,MAAM,SACXL,EAAA,SACEO,IAAK,SAAC7D,GAAE,OAAMmD,EAAK8C,cAAgBjG,CAA3B,EACR2D,MAAM,cACNH,KAAK,WAAU,gBACA,QAAAZ,OAAQjD,KAAK0J,KAAK,gBAClB1J,KAAKqJ,WAAa,OAAS,QAC1C0F,UAAW,SAAC9N,GAAO,OAAAuC,EAAK6J,cAAcpM,EAAnB,EACnB+N,QAAS,WAAM,OAAAxL,EAAK0F,qBAAqB9C,UAAU6D,IAAI,QAAxC,EACfgF,OAAQ,SAAChO,GAAO,OAAAuC,EAAKyF,sBAAsBhI,EAA3B,EAChBiO,QAAS,WAAM,OAAA1L,EAAK4B,iBAAL,EACfsJ,YAAa1O,KAAKmP,qB,EAO5B/K,EAAAtE,UAAAsP,0BAAA,WACE,OAAOzL,EAAA,OAAKK,MAAM,0BAA0BhE,KAAKyF,sB,EAGnDrB,EAAAtE,UAAAuP,sBAAA,eAAA7L,EAAAxD,KACE,GAAIA,KAAKsP,WAAatP,KAAKI,UAAYJ,KAAKS,YAAc,GAAI,CAC5D,OACEkD,EAAA,UACEO,IAAK,SAAC7D,GAAE,OAAMmD,EAAKmH,YAActK,CAAzB,EACR2D,MAAM,aACNuL,QAAS,WAAM,OAAA/L,EAAKiF,sBAAL,EACfsG,UAAW,SAAC9N,GAAO,OAAAuC,EAAK6J,cAAcpM,EAAnB,EACnB6C,SAAS,MAER9D,KAAK0I,YAAc1I,KAAK0E,mBAAqB1E,KAAKqE,iB,GAM3DD,EAAAtE,UAAA0P,uBAAA,WACE,OAAO7J,MAAMC,KAAK5F,KAAKK,GAAGoP,UAAU5D,KAAI,SAAC1F,GACvC,OACExC,EAAA,aAAWK,MAAM,YAAY1B,SAAW6D,EAA+B7D,UACpE6D,EAAO7F,Y,KAMhB8D,EAAAtE,UAAA4D,OAAA,W,MAAA,IAAAF,EAAAxD,KACE,IAAM0P,GAAWC,EAAA,CACfnL,GAAI,aAAAvB,OAAajD,KAAK0J,MACtBiG,EAAC,YAAa3P,KAAKuB,SACnBoO,EAAC,iBAAkB,QAAA1M,OAAQjD,KAAK0J,KAChCiG,EAAC,mBAAoB,SAAA1M,OAASjD,KAAK0J,IAAG,eAAAzG,OAAcjD,KAAK0J,KACzDiG,EAAC,oBAAqB,YACtBA,EAAC,iBAAkB3P,KAAKqJ,WAAa,OAAS,QAC9CsG,EAAAJ,QAAS,kBAAO/L,EAAK6F,WAAa7F,EAAK+D,QAAU/D,EAAK8F,MAA7C,E,GAGX,OACE3F,EAACC,KAAI,CAACqL,OAAQ,SAAChO,GAAmB,OAAAuC,EAAK0J,oBAAoBjM,EAAzB,GAChC0C,EAAA,OACEK,MAAO,WAAAf,OAAW2M,aAAY,WAAA3M,OAAUjD,KAAK6P,cAAa,KAAA5M,OACxDjD,KAAK8P,SAAW9P,KAAKiN,aAAe,UAAY,KAGlDtJ,EAAA,OAAKK,MAAM,iBACTL,EAAA,SAAOK,MAAM,QAAQQ,GAAI,SAAAvB,OAASjD,KAAK0J,KAAOqG,QAAS,aAAA9M,OAAajD,KAAK0J,MACtE1J,KAAKuJ,MAGJvJ,KAAKgQ,cACHrM,EAAA,QAAMK,MAAM,YACVL,EAAA,QAAMK,MAAM,WAAWiM,eAAeD,eACtCrM,EAAA,sBAAkB,QAAM,MACnB,KAOfA,EAAA,OAAKK,MAAM,kBACTL,EAAA,SAAA/D,OAAAsQ,OAAA,GACMR,EAAW,CACf1L,MAAO,mBAAAf,OAAmBjD,KAAK4G,UAAY,kBAAoB,IAC/D1C,IAAK,SAAC7D,GAAE,OAAMmD,EAAK4H,SAAW/K,CAAtB,EACR4O,OAAQ,SAAChO,GAAO,OAAAuC,EAAKwF,iBAAiB/H,EAAtB,EAChB+N,QAAS,WAAM,OAAAxL,EAAK+D,OAAL,IAEf5D,EAAA,QACEK,MACEhE,KAAKkH,gBAAgBpF,OAAS,GAAK9B,KAAKkH,gBAAgBhB,QAAO,SAACM,GAAM,OAAAA,EAAEvG,OAAF,IAAW6B,OAAS,EACtF,6BACA,mBAGN6B,EAAA,QAAMK,MAAM,eAAehE,KAAKyO,oBAC/BzO,KAAK4O,iBAEP5O,KAAK6O,uBAERlL,EAAA,OACEK,MAAO,YAAAf,OAAYjD,KAAKqJ,WAAa,OAAS,GAAE,KAAApG,OAAIjD,KAAK+E,OAAS,UAAY,IAC9Eb,IAAK,SAAC7D,GAAE,OAAMmD,EAAKwG,WAAa3J,CAAxB,GAEPL,KAAKwL,QAAUxL,KAAK8O,oBACrBnL,EAAA,OACEa,GAAI,QAAAvB,OAAQjD,KAAK0J,KACjB1F,MAAM,kBACNF,UAAW,EACXD,KAAK,UAAS,uBACQ7D,KAAKI,SAAW,OAAS,KAAI,kBAClC,SAAA6C,OAASjD,KAAK0J,KAC/BxF,IAAK,SAAC7D,GAAE,OAAMmD,EAAK4G,UAAY/J,CAAvB,GAEPL,KAAKwL,QAAUxL,KAAKsF,gBAAgBxD,SAAW,GAAK9B,KAAKoP,4BACzDpP,KAAKqP,wBACLrP,KAAKI,UAAYJ,KAAKwP,yBACvB7L,EAAA,eAGH3D,KAAKgN,uBACNrJ,EAAA,OACEa,GAAG,eAAc,YACP,SACVR,MAAM,UACNE,IAAK,SAAC7D,GAAE,OAAMmD,EAAK+K,aAAelO,CAA1B,GAEPL,KAAKwO,gB,0WA90BD,G"}

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

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