@momentum-design/components 0.133.0 → 0.133.1

package/dist/browser/index.js

@@ -7543,7 +7543,7 @@
       --mdc-icon-fill-color: ButtonText;
     }
   }
-`,Zy=[iI];var we=class extends Lt(wt(di(De(ce(Wt(To(Qt))))))){constructor(){super();this.lastCommittedValue="";this.placement=Mt.BOTTOM_START;this.boundary=Et.BOUNDARY;this.strategy=Et.STRATEGY;this.popoverZIndex=void 0;this.isOpen=!1;this.filteredValue="";this.initialSelectedOption=null;this.handleUpdateError=t=>{this.onerror&&this.onerror(t)};this.onStoreUpdate=(t,e,o,l)=>{switch(e){case"added":t.setAttribute("tabindex",o===0&&l.length===0?"0":"-1"),t.hasAttribute("selected")&&(this.navItems.forEach(c=>c.setAttribute("tabindex","-1")),t.setAttribute("tabindex","0"));break;case"removed":{let c=t;if(c&&(!this.isValidItem(c)||c.tabIndex!==0))return;let f=this.navItems.findIndex(A=>A===c);if(f===-1)return;let y=f+1;y>=this.navItems.length&&(y=f-1)}break;default:break}};this.handleModifiedEvent=t=>{if(this.controlType==="controlled"){this.updateHiddenOptions();return}let e=this.getFirstSelectedOption();switch(t.detail.change){case"selected":{if(t.target.hasAttribute("disabled"))return;e&&e.value!==this.value&&this.setSelectedValue(e,!1);break}case"unselected":{e&&this.setSelectedValue(e,!1);break}default:break}};this.addEventListener(Jt.MODIFIED,this.handleModifiedEvent),this.itemsStore=new wr(this,{isValidItem:this.isValidItem,onStoreUpdate:this.onStoreUpdate})}get navItems(){return this.itemsStore.items}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.inputElement&&(this.setInputValidity(),this.internals.setFormValue(this.inputElement.value))}).catch(this.handleUpdateError)}isValidItem(t){return t.matches(Lr)}openPopover(){this.isOpen=!0}closePopover(){this.isOpen=!1}compareOptionWithValue(t,e){return(t.getAttribute("label")||"").toLowerCase().startsWith(e==null?void 0:e.toLowerCase())}getFirstSelectedOption(){return this.navItems.find(t=>t.hasAttribute("selected"))}getVisibleOptions(t){return this.navItems.filter(e=>this.compareOptionWithValue(e,t))}focusComboboxBase(){this.disabled||this.updateComplete.then(()=>{var t;(t=this.visualCombobox)==null||t.focus({preventScroll:!0})}).catch(this.handleUpdateError)}handleTriggerClick(){this.disabled||(this.isOpen=!this.isOpen,this.focusComboboxBase())}setSelectedValue(t,e=!0,o=!1){let l=(t==null?void 0:t.getAttribute("label"))||"",c=(t==null?void 0:t.getAttribute("value"))||"";if(!(this.value===c&&this.filteredValue===l)){if(this.controlType==="controlled"&&!o){e&&(Co.onInputCombobox(this,t),Co.onChangeCombobox(this,t));return}this.filteredValue=l,this.value=c,this.lastCommittedValue=c,this.internals.setFormValue(this.value),this.updateHiddenOptions(),t&&this.updateSelectedOption(t),this.setInputValidity(),this.resetHelpText(),e&&!o&&t&&(Co.onInputCombobox(this,t),Co.onChangeCombobox(this,t))}}resetSelectedValue(){this.controlType!=="controlled"&&(this.value=""),this.internals.setFormValue(this.value),this.resetHelpText()}resetHelpText(){this.invalidCustomValueText&&this.helpText===this.invalidCustomValueText&&(this.helpText="",this.helpTextType=jt.DEFAULT)}attributeChangedCallback(t,e,o){if(super.attributeChangedCallback(t,e,o),t==="value"&&o!==""&&this.navItems.length){let l=this.getFirstSelectedOption(),c=this.navItems.find(y=>y.value===o),f=null;if(c)f=c;else if(this.placeholder)f=null;else if(l)f=l;else return;this.updateComplete.then(()=>{this.setSelectedValue(f,!1,!0)}).catch(this.handleUpdateError)}t==="validation-message"&&this.updateComplete.then(()=>{this.setInputValidity()}).catch(this.handleUpdateError)}async firstUpdated(t){await this.updateComplete,this.inputElement&&this.autoFocusOnMount&&(this.elementToAutoFocus=this.inputElement),super.firstUpdated(t);let e=this.getFirstSelectedOption();e&&this.controlType!=="controlled"?(this.initialSelectedOption=e,this.setSelectedValue(e)):this.value?this.updateValueBasedSelection():this.placeholder&&this.setInputValidity(),this.lastCommittedValue=this.value,this.navItems.forEach(o=>{o.setAttribute("tabindex","-1")})}updateValueBasedSelection(){let t=this.navItems.find(e=>e.value===this.value);t&&this.setSelectedValue(t,!1,!0)}updated(t){super.updated(t),(t.has("slottedListboxes")||t.has("isOpen"))&&(this.visualCombobox&&"ariaControlsElements"in this.visualCombobox&&(this.visualCombobox.ariaControlsElements=this.slottedListboxes),this.dropDownButton&&"ariaControlsElements"in this.dropDownButton&&(this.dropDownButton.ariaControlsElements=this.slottedListboxes)),(t.has("disabled")||t.has("readonly"))&&(this.disabled||this.readonly)&&this.closePopover(),t.has("value")&&this.updateValueBasedSelection()}setInputValidity(){var t,e;!this.value&&this.required?(this.validationMessage?(t=this.inputElement)==null||t.setCustomValidity(this.validationMessage):(e=this.inputElement)==null||e.setCustomValidity(""),this.setValidity()):this.internals.setValidity({})}formResetCallback(){var e;let t=this.initialSelectedOption||null;this.setSelectedValue(t,!1,!0),this.controlType!=="controlled"&&(this.filteredValue=(e=t==null?void 0:t.label)!=null?e:""),this.setInputValidity()}formStateRestoreCallback(t){let e=this.navItems.find(o=>o.value===t||o.label===t);this.setSelectedValue(e||null,!1,!0)}handleNativeInputFocus(){this.visualCombobox.focus()}resetFocusedOption(){this.navItems.filter(t=>t.hasAttribute("data-focused")).forEach(t=>this.updateOptionAttributes(t,!1))}updateSelectedOption(t){this.navItems.forEach(e=>{e.removeAttribute("selected")}),t==null||t.setAttribute("selected","")}updateOptionAttributes(t,e){t!==void 0&&(e?(t.setAttribute("data-focused",""),this.openTooltipIfExists(t)):(t.removeAttribute("data-focused"),this.closeTooltipIfExists(t)),t.setAttribute("aria-selected",e.toString()))}openTooltipIfExists(t){let e=t.getAttribute("id");if(!e)return;let o=this.querySelector(`mdc-tooltip[triggerid="${e}"]`);o==null||o.setAttribute("visible","")}closeTooltipIfExists(t){let e=t.getAttribute("id");if(!e)return;let o=this.querySelector(`mdc-tooltip[triggerid="${e}"][visible]`);o&&o.removeAttribute("visible")}handleBlurChange(){let t=this.getVisibleOptions(this.filteredValue),e=t.findIndex(l=>l.hasAttribute("data-focused"));if(e!==-1){this.setSelectedValue(t[e]),this.closePopover();return}let o=this.navItems.find(l=>(l.getAttribute("label")||"").toLowerCase()===this.filteredValue.toLowerCase());if(o){this.setSelectedValue(o),this.closePopover();return}if(this.filteredValue!=="")if(this.lastCommittedValue){let l=this.navItems.find(c=>c.value===this.lastCommittedValue);this.setSelectedValue(l)}else this.invalidCustomValueText&&!this.getFirstSelectedOption()&&(this.helpText=this.invalidCustomValueText,this.helpTextType=jt.ERROR,this.setInputValidity());else this.setSelectedValue(null);this.closePopover()}updateFocusAndScrollIntoView(t,e,o){var l;this.updateOptionAttributes(t[e],!1),this.updateOptionAttributes(t[o],!0),(l=t[o])==null||l.scrollIntoView({block:"nearest"})}handleInputKeydown(t){let e=this.getVisibleOptions(this.filteredValue).filter(c=>!c.hasAttribute("disabled")),o=e.findIndex(c=>c.hasAttribute("data-focused")),l=this.getKeyboardNavMode()===re.SPATIAL;switch(this.getActionForKeyEvent(t)){case q.DOWN:{if(!l)this.openPopover();else if(!this.isOpen)break;let c=e.length-1===o?0:o+1;this.updateFocusAndScrollIntoView(e,o,c),t.preventDefault(),this.keyDownEventHandled();break}case q.UP:{if(!l)this.openPopover();else if(!this.isOpen)break;let c=o===-1||o===0?e.length-1:o-1;this.updateFocusAndScrollIntoView(e,o,c),t.preventDefault(),this.keyDownEventHandled();break}case q.ENTER:{if(l&&!this.isOpen)this.openPopover();else{if(o===-1)return;this.setSelectedValue(e[o]),this.isOpen&&this.closePopover()}this.keyDownEventHandled();break}case q.ESCAPE:{o!==-1&&this.updateOptionAttributes(e[o],!1),e.length&&this.shouldDisplayPopover(e.length)||(this.resetSelectedValue(),this.controlType!=="controlled"&&(this.filteredValue="")),this.keyDownEventHandled();break}case q.TAB:{this.closePopover(),this.keyDownEventHandled();break}case q.HOME:case q.END:{this.resetFocusedOption(),this.keyDownEventHandled();break}default:break}}updateHiddenOptions(){let t=new Map,e=new Set;this.navItems.forEach(o=>{var f;let l=this.compareOptionWithValue(o,this.filteredValue);l?o.removeAttribute("data-hidden"):o.setAttribute("data-hidden","");let c=o.parentElement;if(c&&c.matches(Jd)){let y=c;e.add(y),l&&t.set(y,((f=t.get(y))!=null?f:0)+1)}}),e.forEach(o=>{var f;let l=((f=t.get(o))!=null?f:0)>0,c=o.nextElementSibling;l?(o.removeAttribute("data-hidden"),c&&c.matches(xn)&&c.removeAttribute("data-hidden")):(o.setAttribute("data-hidden",""),c&&c.matches(xn)&&c.setAttribute("data-hidden",""))})}handleInputChange(t){var e;t.preventDefault(),t.stopPropagation(),this.filteredValue=t.target.value,this.resetFocusedOption(),this.updateHiddenOptions(),(e=this.getFirstSelectedOption())==null||e.removeAttribute("selected"),this.isOpen===!1&&this.openPopover(),Co.onInputCombobox(this,{value:this.filteredValue})}handleOptionsClick(t){var o;t.preventDefault(),t.stopPropagation();let e=(o=t.target.closest(Lr))!=null?o:null;e&&!e.hasAttribute("disabled")&&(this.setSelectedValue(e),this.closePopover(),this.focusComboboxBase())}shouldDisplayPopover(t){return this.disabled||this.readonly?!1:t?this.isOpen:!!this.noResultText}renderNativeInput(){return S`
+`,Zy=[iI];var we=class extends Lt(wt(di(De(ce(Wt(To(Qt))))))){constructor(){super();this.lastCommittedValue="";this.placement=Mt.BOTTOM_START;this.boundary=Et.BOUNDARY;this.strategy=Et.STRATEGY;this.popoverZIndex=void 0;this.isOpen=!1;this.filteredValue="";this.initialSelectedOption=null;this.handleUpdateError=t=>{this.onerror&&this.onerror(t)};this.onStoreUpdate=(t,e,o,l)=>{switch(e){case"added":t.setAttribute("tabindex",o===0&&l.length===0?"0":"-1"),t.hasAttribute("selected")&&(this.navItems.forEach(c=>c.setAttribute("tabindex","-1")),t.setAttribute("tabindex","0"));break;case"removed":{let c=t;if(c&&(!this.isValidItem(c)||c.tabIndex!==0))return;let f=this.navItems.findIndex(A=>A===c);if(f===-1)return;let y=f+1;y>=this.navItems.length&&(y=f-1)}break;default:break}};this.handleModifiedEvent=t=>{if(this.controlType==="controlled"){this.updateHiddenOptions();return}let e=this.getFirstSelectedOption();switch(t.detail.change){case"selected":{if(t.target.hasAttribute("disabled"))return;e&&e.value!==this.value&&this.setSelectedValue(e,!1);break}case"unselected":{e&&this.setSelectedValue(e,!1);break}default:break}};this.addEventListener(Jt.MODIFIED,this.handleModifiedEvent),this.itemsStore=new wr(this,{isValidItem:this.isValidItem,onStoreUpdate:this.onStoreUpdate})}get navItems(){return this.itemsStore.items}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.inputElement&&(this.setInputValidity(),this.internals.setFormValue(this.inputElement.value))}).catch(this.handleUpdateError)}isValidItem(t){return t.matches(Lr)}openPopover(){this.isOpen=!0}closePopover(){this.isOpen=!1}compareOptionWithValue(t,e){return(t.getAttribute("label")||"").toLowerCase().startsWith(e==null?void 0:e.toLowerCase())}getFirstSelectedOption(){return this.navItems.find(t=>t.hasAttribute("selected"))}getVisibleOptions(t){return this.navItems.filter(e=>this.compareOptionWithValue(e,t))}focusComboboxBase(){this.disabled||this.updateComplete.then(()=>{var t;(t=this.visualCombobox)==null||t.focus({preventScroll:!0})}).catch(this.handleUpdateError)}handleTriggerClick(){this.disabled||(this.isOpen=!this.isOpen,this.focusComboboxBase())}setSelectedValue(t,e=!0,o=!1){let l=(t==null?void 0:t.getAttribute("label"))||"",c=(t==null?void 0:t.getAttribute("value"))||"";if(!(this.value===c&&this.filteredValue===l)){if(this.controlType==="controlled"&&!o){e&&(Co.onInputCombobox(this,t),Co.onChangeCombobox(this,t));return}this.filteredValue=l,this.value=c,this.lastCommittedValue=c,this.internals.setFormValue(this.value),this.updateHiddenOptions(),this.updateSelectedOption(t),this.resetFocusedOption(),this.setInputValidity(),this.resetHelpText(),e&&!o&&t&&(Co.onInputCombobox(this,t),Co.onChangeCombobox(this,t))}}resetSelectedValue(){this.controlType!=="controlled"&&(this.value=""),this.internals.setFormValue(this.value),this.resetHelpText()}resetHelpText(){this.invalidCustomValueText&&this.helpText===this.invalidCustomValueText&&(this.helpText="",this.helpTextType=jt.DEFAULT)}attributeChangedCallback(t,e,o){if(super.attributeChangedCallback(t,e,o),t==="value"&&this.navItems.length&&!(e===null&&o==="")){let l=null;if(o!==""){let c=this.getFirstSelectedOption(),f=this.navItems.find(y=>y.value===o);if(f)l=f;else if(c)l=c;else if(this.placeholder)l=null;else return}this.updateComplete.then(()=>{this.setSelectedValue(l,!1,!0)}).catch(this.handleUpdateError)}t==="validation-message"&&this.updateComplete.then(()=>{this.setInputValidity()}).catch(this.handleUpdateError)}async firstUpdated(t){await this.updateComplete,this.inputElement&&this.autoFocusOnMount&&(this.elementToAutoFocus=this.inputElement),super.firstUpdated(t);let e=this.getFirstSelectedOption();e&&this.controlType!=="controlled"?(this.initialSelectedOption=e,this.setSelectedValue(e)):this.value?this.updateValueBasedSelection():this.placeholder&&this.setInputValidity(),this.lastCommittedValue=this.value,this.navItems.forEach(o=>{o.setAttribute("tabindex","-1")})}updateValueBasedSelection(){let t=this.navItems.find(e=>e.value===this.value);t&&this.setSelectedValue(t,!1,!0)}updated(t){super.updated(t),(t.has("slottedListboxes")||t.has("isOpen"))&&(this.visualCombobox&&"ariaControlsElements"in this.visualCombobox&&(this.visualCombobox.ariaControlsElements=this.slottedListboxes),this.dropDownButton&&"ariaControlsElements"in this.dropDownButton&&(this.dropDownButton.ariaControlsElements=this.slottedListboxes)),(t.has("disabled")||t.has("readonly"))&&(this.disabled||this.readonly)&&this.closePopover(),t.has("value")&&this.updateValueBasedSelection()}setInputValidity(){var t,e;!this.value&&this.required?(this.validationMessage?(t=this.inputElement)==null||t.setCustomValidity(this.validationMessage):(e=this.inputElement)==null||e.setCustomValidity(""),this.setValidity()):this.internals.setValidity({})}formResetCallback(){var e;let t=this.initialSelectedOption||null;this.setSelectedValue(t,!1,!0),this.controlType!=="controlled"&&(this.filteredValue=(e=t==null?void 0:t.label)!=null?e:""),this.setInputValidity()}formStateRestoreCallback(t){let e=this.navItems.find(o=>o.value===t||o.label===t);this.setSelectedValue(e||null,!1,!0)}handleNativeInputFocus(){this.visualCombobox.focus()}resetFocusedOption(){this.navItems.filter(t=>t.hasAttribute("data-focused")).forEach(t=>this.updateOptionAttributes(t,!1))}updateSelectedOption(t){this.navItems.forEach(e=>{e.removeAttribute("selected")}),t==null||t.setAttribute("selected","")}updateOptionAttributes(t,e){t!==void 0&&(e?(t.setAttribute("data-focused",""),this.openTooltipIfExists(t)):(t.removeAttribute("data-focused"),this.closeTooltipIfExists(t)),t.setAttribute("aria-selected",e.toString()))}openTooltipIfExists(t){let e=t.getAttribute("id");if(!e)return;let o=this.querySelector(`mdc-tooltip[triggerid="${e}"]`);o==null||o.setAttribute("visible","")}closeTooltipIfExists(t){let e=t.getAttribute("id");if(!e)return;let o=this.querySelector(`mdc-tooltip[triggerid="${e}"][visible]`);o&&o.removeAttribute("visible")}handleBlurChange(){let t=this.getVisibleOptions(this.filteredValue),e=t.findIndex(l=>l.hasAttribute("data-focused"));if(e!==-1){this.setSelectedValue(t[e]),this.closePopover();return}let o=this.navItems.find(l=>(l.getAttribute("label")||"").toLowerCase()===this.filteredValue.toLowerCase());if(o){this.setSelectedValue(o),this.closePopover();return}if(this.filteredValue!=="")if(this.lastCommittedValue){let l=this.navItems.find(c=>c.value===this.lastCommittedValue);this.setSelectedValue(l)}else this.invalidCustomValueText&&!this.getFirstSelectedOption()&&(this.helpText=this.invalidCustomValueText,this.helpTextType=jt.ERROR,this.setInputValidity());else this.setSelectedValue(null);this.closePopover()}updateFocusAndScrollIntoView(t,e,o){var l;this.updateOptionAttributes(t[e],!1),this.updateOptionAttributes(t[o],!0),(l=t[o])==null||l.scrollIntoView({block:"nearest"})}handleInputKeydown(t){let e=this.getVisibleOptions(this.filteredValue).filter(c=>!c.hasAttribute("disabled")),o=e.findIndex(c=>c.hasAttribute("data-focused")),l=this.getKeyboardNavMode()===re.SPATIAL;switch(this.getActionForKeyEvent(t)){case q.DOWN:{if(!l)this.openPopover();else if(!this.isOpen)break;let c=e.length-1===o?0:o+1;this.updateFocusAndScrollIntoView(e,o,c),t.preventDefault(),this.keyDownEventHandled();break}case q.UP:{if(!l)this.openPopover();else if(!this.isOpen)break;let c=o===-1||o===0?e.length-1:o-1;this.updateFocusAndScrollIntoView(e,o,c),t.preventDefault(),this.keyDownEventHandled();break}case q.ENTER:{if(l&&!this.isOpen)this.openPopover();else{if(o===-1)return;this.setSelectedValue(e[o]),this.isOpen&&this.closePopover()}this.keyDownEventHandled();break}case q.ESCAPE:{o!==-1&&this.updateOptionAttributes(e[o],!1),e.length&&this.shouldDisplayPopover(e.length)||(this.resetSelectedValue(),this.controlType!=="controlled"&&(this.filteredValue="")),this.keyDownEventHandled();break}case q.TAB:{this.closePopover(),this.keyDownEventHandled();break}case q.HOME:case q.END:{this.resetFocusedOption(),this.keyDownEventHandled();break}default:break}}updateHiddenOptions(){let t=new Map,e=new Set;this.navItems.forEach(o=>{var f;let l=this.compareOptionWithValue(o,this.filteredValue);l?o.removeAttribute("data-hidden"):o.setAttribute("data-hidden","");let c=o.parentElement;if(c&&c.matches(Jd)){let y=c;e.add(y),l&&t.set(y,((f=t.get(y))!=null?f:0)+1)}}),e.forEach(o=>{var f;let l=((f=t.get(o))!=null?f:0)>0,c=o.nextElementSibling;l?(o.removeAttribute("data-hidden"),c&&c.matches(xn)&&c.removeAttribute("data-hidden")):(o.setAttribute("data-hidden",""),c&&c.matches(xn)&&c.setAttribute("data-hidden",""))})}handleInputChange(t){var e;t.preventDefault(),t.stopPropagation(),this.filteredValue=t.target.value,this.resetFocusedOption(),this.updateHiddenOptions(),(e=this.getFirstSelectedOption())==null||e.removeAttribute("selected"),this.isOpen===!1&&this.openPopover(),Co.onInputCombobox(this,{value:this.filteredValue})}handleOptionsClick(t){var o;t.preventDefault(),t.stopPropagation();let e=(o=t.target.closest(Lr))!=null?o:null;e&&!e.hasAttribute("disabled")&&(this.setSelectedValue(e),this.closePopover(),this.focusComboboxBase())}shouldDisplayPopover(t){return this.disabled||this.readonly?!1:t||this.noResultText?this.isOpen:!1}renderNativeInput(){return S`
       <input
         id="${this.inputId}"
         name="${this.name}"