@govtechsg/sgds-web-component 3.23.0-rc.7 → 3.23.0

package/components/ComboBox/index.umd.min.js

@@ -2410,7 +2410,7 @@ const Ol=(e,t,i)=>{const l=new Map;for(let a=t;a<=i;a++)l.set(e[a],a);return l};
     `}}jl.styles=[...Ki.styles,ql,Wl],e([We({type:String,reflect:!0})],jl.prototype,"variant",void 0),e([We({type:String,reflect:!0})],jl.prototype,"tone",void 0),e([We({type:String,reflect:!0})],jl.prototype,"size",void 0),e([We({reflect:!0,type:String})],jl.prototype,"label",void 0),e([We({type:String,reflect:!0})],jl.prototype,"orientation",void 0);class Kl extends el{constructor(){super(...arguments),this.multiSelect=!1,this.badgeFullWidth=!1,this.clearable=!1,this.noValidate=!1,this.async=!1,this.emptyMenuAsync=!1,this.scrollBottomOffset=0,this.filterFunction=(e,t)=>t.label.toLowerCase().startsWith(e.toLowerCase()),this.optionList=[],this.emptyMenuAfterFiltering=!1,this.isFocused=!1,this.isScrollEnd=!1,this.suffixIconTemplate=S`<sgds-icon
     name=${this.menuIsOpen?"chevron-up":"chevron-down"}
     size="md"
-  ></sgds-icon>`,this.prefixIconTemplate=S`${L}`}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",async()=>{this.isFocused=!0}),this.addEventListener("blur",async()=>{this.isFocused=!1}),this.addEventListener("keydown",e=>{var t,i;"Enter"===e.key&&(null===(i=null===(t=e.target.shadowRoot)||void 0===t?void 0:t.querySelector(".form-clearable"))||void 0===i?void 0:i.matches(":focus"))&&this._handleClear()}),this.addEventListener("sgds-hide",async e=>{if(!e.detail.isOutside){(await this._input).focus()}this.options.forEach(e=>e.removeAttribute("hidden")),this.emptyMenuAfterFiltering=!1})}async firstUpdated(e){super.firstUpdated(e),this.async&&(this.filterFunction=()=>!0),this.menuList.forEach(e=>{const t=document.createElement("sgds-combo-box-option");t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),this.appendChild(t)}),this._setupValidation(this.menuList),this.menuIsOpen&&await this.updateFloatingPosition()}async _handleDefaultSlotChange(e){const t=e.target.assignedElements({flatten:!0});t.forEach(e=>!e.hasAttribute("disabled")&&(!e.clickEventAdded&&(e.addEventListener("click",e=>{e.preventDefault();const t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,void e.addEventListener("keydown",e=>{if("Enter"===e.key){this.close="outside";e.target.click()}})))),await this.updateComplete,this.optionList=await this._getMenuListFromOptions(t),this._setupValidation(this.optionList)}async _setupValidation(e){var t;if(this.value&&e.length>0){const i=this.value.split(";"),l=e.filter(({value:e})=>i.includes(e));this.selectedItems=[...l,...this.selectedItems],this.multiSelect||(this.displayValue=null===(t=l[0])||void 0===t?void 0:t.label)}this.multiSelect?this.input=await this._multiSelectInput:this.input=await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.options.forEach(e=>e.removeAttribute("hidden"));const e=await this._input;this._mixinSetFormValue(),this.multiSelect?this._mixinValidate(this.input):this._mixinValidate(e);this.selectedItems.map(e=>e.value).join(";")!==this.value&&this._updateValueAndDisplayValue(this.optionList),(this._isTouched||""!==this.value)&&(this._mixinShouldSkipSgdsValidation()||(this.invalid=!this._mixinReportValidity()))}_emitChangeEvents(){this._mixinSetFormValue(),this.emit("sgds-change"),this.value&&this.emit("sgds-select")}_handleOptionListChange(){this._updateValueAndDisplayValue(this.optionList)}_handleMenuListChange(){const e=this.menuList.map(e=>{const t=document.createElement("sgds-combo-box-option");return t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),t});this.replaceChildren(...e)}_updateValueAndDisplayValue(e){var t;const i=this.value.split(";"),l=e.filter(({value:e})=>i.includes(e));this.selectedItems=[...l];const a=l.map(e=>e.value).join(";");a!==this.value&&(this.value=a),this.multiSelect||this.async||(this.displayValue=(null===(t=l[0])||void 0===t?void 0:t.label)||""),this.options.forEach(e=>e.active=i.includes(e.value))}async _handleInputChange(e){const t=e.target;this.displayValue=t.value,this.emit("sgds-input",{detail:{displayValue:this.displayValue}}),this.invalid=!1,this.showMenu(),""!==this.displayValue||this.multiSelect||(this.selectedItems=[],this.value=this.selectedItems.join(";"),this.options.forEach(e=>e.active=!1),this._emitChangeEvents());const i=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=i.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=0===this.filteredList.length;const l=this.filteredList.map(e=>e.value);this.options.forEach(e=>{l.includes(e.value)?e.hidden=!1:e.hidden=!0})}async _handleItemSelected(e){var t,i,l;const a=e.target;if(a.disabled)return;const o=null!==(i=null===(t=a.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:"",s=null!==(l=a.getAttribute("value"))&&void 0!==l?l:o,n=this.filteredList.find(e=>e.value.toString()===s)||{label:o,value:s};this.multiSelect?(this.selectedItems.some(e=>e.value===n.value)||(this.selectedItems=[...this.selectedItems,n]),this.value=this.selectedItems.map(e=>e.value).join(";"),a.active=!0):0!==this.selectedItems.length&&this.selectedItems[0].value===n.value||(this.options.forEach(e=>e.active=!1),a.active=!0,this.selectedItems=[n],this.value=n.value.toString(),this.displayValue=n.label,this.hideMenu()),this._emitChangeEvents()}_handleItemUnselect(e){var t,i,l;const a=e.target;if(a.disabled)return;a.removeAttribute("active");const o=null!==(i=null===(t=a.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:"",s=null!==(l=a.getAttribute("value"))&&void 0!==l?l:o,n=this.filteredList.find(e=>e.value.toString()===s)||{label:o,value:s};this.selectedItems=this.selectedItems.filter(e=>e.value!==n.value),this.value=this.selectedItems.map(e=>e.value).join(";"),this._emitChangeEvents()}async _handleBadgeDismissed(e,t){var i;e.preventDefault();const l=t.value;null===(i=this.options)||void 0===i||i.forEach(e=>e.value===l?e.active=!1:null),this.selectedItems=this.selectedItems.filter(e=>e.value!==t.value),this.value=this.selectedItems.map(e=>e.value).join(";"),this._emitChangeEvents()}async _handleMultiSelectKeyDown(e){var t;if(this.multiSelect&&"Backspace"===e.key&&this.multiSelect&&""===this.displayValue.trim()&&this.selectedItems.length>0){const e=this.selectedItems[this.selectedItems.length-1].value;null===(t=this.options)||void 0===t||t.forEach(t=>t.value===e?t.active=!1:null),this.selectedItems=this.selectedItems.slice(0,-1),this.value=this.selectedItems.map(e=>e.value).join(";"),this._emitChangeEvents()}}_handleFocus(){this.emit("sgds-focus")}async _handleInputBlur(e){if(e.preventDefault(),this.emit("sgds-blur"),this.multiSelect){this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue="")}else this.selectedItems.length>0?this.displayValue=this.selectedItems[0].label:this.displayValue=""}async _handleClear(){var e;this.value=this.displayValue="",null===(e=this.options)||void 0===e||e.forEach(e=>e.active=!1),this._emitChangeEvents();(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){const e=this.value.split(";");this.options.forEach(t=>{t.active=e.includes(t.value)});const t=this.options.filter(t=>e.includes(t.value));this.selectedItems=t.map(e=>({value:e.value,label:e.textContent.trim()})),this._mixinResetValidity(await this._multiSelectInput)}else{this.options.forEach(e=>{e.active=e.value===this.value});const e=this.options.filter(e=>e.value===this.value);e.length<=0?this.displayValue="":this.displayValue=e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){const t=e.target;if(t){const e=t.scrollHeight-t.clientHeight,i=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-i?(this.isScrollEnd||this.emit("sgds-scroll-end"),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){const t=this.hasFeedback,i=e;return S`
+  ></sgds-icon>`,this.prefixIconTemplate=S`${L}`}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",async()=>{this.isFocused=!0}),this.addEventListener("blur",async()=>{this.isFocused=!1}),this.addEventListener("keydown",e=>{var t,i;"Enter"===e.key&&(null===(i=null===(t=e.target.shadowRoot)||void 0===t?void 0:t.querySelector(".form-clearable"))||void 0===i?void 0:i.matches(":focus"))&&this._handleClear()}),this.addEventListener("sgds-hide",async e=>{if(!e.detail.isOutside){(await this._input).focus()}this.options.forEach(e=>e.removeAttribute("hidden")),this.emptyMenuAfterFiltering=!1})}async firstUpdated(e){super.firstUpdated(e),this.async&&(this.filterFunction=()=>!0),this.menuList.forEach(e=>{const t=document.createElement("sgds-combo-box-option");t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),this.appendChild(t)}),this._setupValidation(this.menuList),this.menuIsOpen&&await this.updateFloatingPosition()}async _handleDefaultSlotChange(e){const t=e.target.assignedElements({flatten:!0});t.forEach(e=>!e.hasAttribute("disabled")&&(!e.clickEventAdded&&(e.addEventListener("click",e=>{e.preventDefault();const t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,void e.addEventListener("keydown",e=>{if("Enter"===e.key){this.close="outside";e.target.click()}})))),await this.updateComplete,this.optionList=await this._getMenuListFromOptions(t),this._setupValidation(this.optionList)}async _setupValidation(e){var t;if(this.value&&e.length>0){const i=this.value.split(";"),l=e.filter(({value:e})=>i.includes(e));this.selectedItems=[...l,...this.selectedItems],this.multiSelect||(this.displayValue=null===(t=l[0])||void 0===t?void 0:t.label)}this.multiSelect?this.input=await this._multiSelectInput:this.input=await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.emit("sgds-change"),this.options.forEach(e=>e.removeAttribute("hidden")),this.value&&this.emit("sgds-select");const e=await this._input;this._mixinSetFormValue(),this.multiSelect?this._mixinValidate(this.input):this._mixinValidate(e);this.selectedItems.map(e=>e.value).join(";")!==this.value&&this._updateValueAndDisplayValue(this.optionList),(this._isTouched||""!==this.value)&&(this._mixinShouldSkipSgdsValidation()||(this.invalid=!this._mixinReportValidity()))}_handleOptionListChange(){this._updateValueAndDisplayValue(this.optionList)}_handleMenuListChange(){const e=this.menuList.map(e=>{const t=document.createElement("sgds-combo-box-option");return t.innerText=e.label,t.value=e.value,t.checkbox=this.multiSelect,t.active=this.value.includes(e.value),t});this.replaceChildren(...e)}_updateValueAndDisplayValue(e){var t;const i=this.value.split(";"),l=e.filter(({value:e})=>i.includes(e));this.selectedItems=[...l];const a=l.map(e=>e.value).join(";");a!==this.value&&(this.value=a),this.multiSelect||this.async||(this.displayValue=(null===(t=l[0])||void 0===t?void 0:t.label)||""),this.options.forEach(e=>e.active=i.includes(e.value))}async _handleInputChange(e){const t=e.target;this.displayValue=t.value,this.emit("sgds-input",{detail:{displayValue:this.displayValue}}),this.invalid=!1,this.showMenu(),""!==this.displayValue||this.multiSelect||(this.selectedItems=[],this.value=this.selectedItems.join(";"),this.options.forEach(e=>e.active=!1));const i=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=i.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=0===this.filteredList.length;const l=this.filteredList.map(e=>e.value);this.options.forEach(e=>{l.includes(e.value)?e.hidden=!1:e.hidden=!0})}async _handleItemSelected(e){var t,i,l;const a=e.target;if(a.disabled)return;const o=null!==(i=null===(t=a.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:"",s=null!==(l=a.getAttribute("value"))&&void 0!==l?l:o,n=this.filteredList.find(e=>e.value.toString()===s)||{label:o,value:s};this.multiSelect?(this.selectedItems.some(e=>e.value===n.value)||(this.selectedItems=[...this.selectedItems,n]),this.value=this.selectedItems.map(e=>e.value).join(";"),a.active=!0):0!==this.selectedItems.length&&this.selectedItems[0].value===n.value||(this.options.forEach(e=>e.active=!1),a.active=!0,this.selectedItems=[n],this.value=n.value.toString(),this.displayValue=n.label,this.hideMenu())}_handleItemUnselect(e){var t,i,l;const a=e.target;if(a.disabled)return;a.removeAttribute("active");const o=null!==(i=null===(t=a.textContent)||void 0===t?void 0:t.trim())&&void 0!==i?i:"",s=null!==(l=a.getAttribute("value"))&&void 0!==l?l:o,n=this.filteredList.find(e=>e.value.toString()===s)||{label:o,value:s};this.selectedItems=this.selectedItems.filter(e=>e.value!==n.value),this.value=this.selectedItems.map(e=>e.value).join(";")}async _handleBadgeDismissed(e,t){var i;e.preventDefault();const l=t.value;null===(i=this.options)||void 0===i||i.forEach(e=>e.value===l?e.active=!1:null),this.selectedItems=this.selectedItems.filter(e=>e.value!==t.value),this.value=this.selectedItems.map(e=>e.value).join(";")}async _handleMultiSelectKeyDown(e){var t;if(this.multiSelect&&"Backspace"===e.key&&this.multiSelect&&""===this.displayValue.trim()&&this.selectedItems.length>0){const e=this.selectedItems[this.selectedItems.length-1].value;null===(t=this.options)||void 0===t||t.forEach(t=>t.value===e?t.active=!1:null),this.selectedItems=this.selectedItems.slice(0,-1),this.value=this.selectedItems.map(e=>e.value).join(";")}}_handleFocus(){this.emit("sgds-focus")}async _handleInputBlur(e){if(e.preventDefault(),this.emit("sgds-blur"),this.multiSelect){this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue="")}else this.selectedItems.length>0?this.displayValue=this.selectedItems[0].label:this.displayValue=""}async _handleClear(){var e;this.value=this.displayValue="",null===(e=this.options)||void 0===e||e.forEach(e=>e.active=!1);(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){const e=this.value.split(";");this.options.forEach(t=>{t.active=e.includes(t.value)});const t=this.options.filter(t=>e.includes(t.value));this.selectedItems=t.map(e=>({value:e.value,label:e.textContent.trim()})),this._mixinResetValidity(await this._multiSelectInput)}else{this.options.forEach(e=>{e.active=e.value===this.value});const e=this.options.filter(e=>e.value===this.value);e.length<=0?this.displayValue="":this.displayValue=e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){const t=e.target;if(t){const e=t.scrollHeight-t.clientHeight,i=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-i?(this.isScrollEnd||this.emit("sgds-scroll-end"),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){const t=this.hasFeedback,i=e;return S`
       <div
         ${ct(this.myDropdown)}
         class="form-control-group ${Xe({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&t})}"