@govtechsg/sgds-web-component 3.29.1-rc.0 → 3.29.1-rc.2

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

@@ -2487,7 +2487,7 @@ let vg=Symbol.for(``),yg=e=>{if(e?.r===vg)return e?._$litStatic$},bg=/* @__PURE_
     `}};q([P({type:String,reflect:!0})],wg.prototype,`variant`,void 0),q([P({type:String,reflect:!0})],wg.prototype,`tone`,void 0),q([P({type:String,reflect:!0})],wg.prototype,`size`,void 0),q([P({reflect:!0,type:String})],wg.prototype,`label`,void 0),q([P({type:String,reflect:!0})],wg.prototype,`orientation`,void 0),N();var $=class e extends X{constructor(...e){super(...e),this.multiSelect=!1,this.badgeFullWidth=!1,this.clearable=!1,this.noValidate=!1,this.async=!1,this.emptyMenuAsync=!1,this.creatable=!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=T`<sgds-icon
     name=${this.menuIsOpen?`chevron-up`:`chevron-down`}
     size="md"
-  ></sgds-icon>`,this.prefixIconTemplate=T`${D}`,this._createOptionSlotContent=[],this._createOptionValue=``,this._showCreateOption=!1}static{this.styles=[...X.styles,pr,sg]}static{this.childName=`sgds-combo-box-option`}static{this.dependencies={[e.childName]:hg,"sgds-icon":og,"sgds-badge":Z,"sgds-spinner":wg}}connectedCallback(){super.connectedCallback(),this.addEventListener(`focus`,async()=>{this.isFocused=!0}),this.addEventListener(`blur`,async()=>{this.isFocused=!1}),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&e.target.shadowRoot?.querySelector(`.form-clearable`)?.matches(`:focus`)&&this._handleClear()}),this.addEventListener(`sgds-hide`,async e=>{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=>{let 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){let t=e.target.assignedElements({flatten:!0});t.forEach(e=>{if(e.hasAttribute(`disabled`)||e.clickEventAdded)return!1;e.addEventListener(`click`,e=>{e.preventDefault();let t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,e.addEventListener(`keydown`,e=>{e.key===`Enter`&&(this.close=`outside`,e.target.click())})}),await this.updateComplete;let n=t;this.optionList=await this._getMenuListFromOptions(n),this._setupValidation(this.optionList)}async _setupValidation(e){if(this.value&&e.length>0){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n,...this.selectedItems],this.multiSelect||(this.displayValue=n[0]?.label)}this.input=this.multiSelect?await this._multiSelectInput:await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.options.forEach(e=>{e.removeAttribute(`hidden`)});let 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(){let e=this.menuList.map(e=>{let 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){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n];let r=n.map(e=>e.value).join(`;`);r!==this.value&&(this.value=r),!this.multiSelect&&!this.async&&(this.displayValue=n[0]?.label||``),this.options.forEach(e=>e.active=t.includes(e.value))}async _handleInputChange(e){let 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());let n=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=n.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=this.filteredList.length===0;let r=this.filteredList.map(e=>e.value);this.options.forEach(e=>{e.hidden=!r.includes(e.value)}),this._syncCreateOption()}async _handleItemSelected(e){let t=e.target;if(t.disabled)return;let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.multiSelect?(this.selectedItems.some(e=>e.value===i.value)||(this.selectedItems=[...this.selectedItems,i]),this.value=this.selectedItems.map(e=>e.value).join(`;`),t.active=!0,this.displayValue=``):(this.selectedItems.length===0||this.selectedItems[0].value!==i.value)&&(this.options.forEach(e=>e.active=!1),t.active=!0,this.selectedItems=[i],this.value=i.value.toString(),this.displayValue=i.label,this.hideMenu()),this._emitChangeEvents()}_handleItemUnselect(e){let t=e.target;if(t.disabled)return;t.removeAttribute(`active`);let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.selectedItems=this.selectedItems.filter(e=>e.value!==i.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleBadgeDismissed(e,t){e.preventDefault();let n=t.value;this.options?.forEach(e=>e.value===n?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){if(this.multiSelect&&e.key===`Backspace`&&this.multiSelect&&this.displayValue.trim()===``&&this.selectedItems.length>0){let e=this.selectedItems[this.selectedItems.length-1].value;this.options?.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){e.preventDefault(),this.emit(`sgds-blur`);let t=e.relatedTarget;(this.creatable||this.multiSelect)&&t&&(this.contains(t)||this.shadowRoot?.contains(t))||(this.multiSelect?this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue=``):this.displayValue=this.selectedItems.length>0?this.selectedItems[0].label:``)}async _handleClear(){this.value=this.displayValue=``,this.options?.forEach(e=>e.active=!1),this._emitChangeEvents(),(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){let e=this.value.split(`;`);this.options.forEach(t=>{t.active=e.includes(t.value)});let 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});let e=this.options.filter(e=>e.value===this.value);this.displayValue=e.length<=0?``:e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){let t=e.target;if(t){let e=t.scrollHeight-t.clientHeight,n=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-n?(this.isScrollEnd||this.emit(`sgds-scroll-end`),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){let t=this.hasFeedback,n=e;return T`
+  ></sgds-icon>`,this.prefixIconTemplate=T`${D}`,this._createOptionSlotContent=[],this._createOptionValue=``,this._showCreateOption=!1}static{this.styles=[...X.styles,pr,sg]}static{this.childName=`sgds-combo-box-option`}static{this.dependencies={[e.childName]:hg,"sgds-icon":og,"sgds-badge":Z,"sgds-spinner":wg}}connectedCallback(){super.connectedCallback(),this.addEventListener(`focus`,async()=>{this.isFocused=!0}),this.addEventListener(`blur`,async()=>{this.isFocused=!1}),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&e.target.shadowRoot?.querySelector(`.form-clearable`)?.matches(`:focus`)&&this._handleClear()}),this.addEventListener(`sgds-hide`,async e=>{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=>{let 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){let t=e.target.assignedElements({flatten:!0});t.forEach(e=>{if(e.hasAttribute(`disabled`)||e.clickEventAdded)return!1;e.addEventListener(`click`,e=>{e.preventDefault();let t=e.target;return this.multiSelect&&t.active?this._handleItemUnselect(e):this._handleItemSelected(e),!1}),e.clickEventAdded=!0,e.addEventListener(`keydown`,e=>{e.key===`Enter`&&(this.close=`outside`,e.target.click())})}),await this.updateComplete;let n=t;this.optionList=await this._getMenuListFromOptions(n),this._setupValidation(this.optionList)}async _setupValidation(e){if(this.value&&e.length>0){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n],this.multiSelect||(this.displayValue=n[0]?.label)}this.input=this.multiSelect?await this._multiSelectInput:await this._input,this._mixinValidate(this.input)}async _handleValueChange(){this.options.forEach(e=>{e.removeAttribute(`hidden`)});let 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(){let e=this.menuList.map(e=>{let 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){let t=this.value.split(`;`),n=e.filter(({value:e})=>t.includes(e));this.selectedItems=[...n];let r=n.map(e=>e.value).join(`;`);r!==this.value&&!this.creatable&&(this.value=r),!this.multiSelect&&!this.async&&(this.displayValue=n[0]?.label||``),this.options.forEach(e=>e.active=t.includes(e.value))}async _handleInputChange(e){let 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());let n=this.options.map(e=>({value:e.value,label:e.textContent.trim()}));this.filteredList=n.filter(e=>this.filterFunction(this.displayValue,e)),this.emptyMenuAfterFiltering=this.filteredList.length===0;let r=this.filteredList.map(e=>e.value);this.options.forEach(e=>{e.hidden=!r.includes(e.value)}),this._syncCreateOption()}async _handleItemSelected(e){let t=e.target;if(t.disabled)return;let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.multiSelect?(this.selectedItems.some(e=>e.value===i.value)||(this.selectedItems=[...this.selectedItems,i]),this.value=this.selectedItems.map(e=>e.value).join(`;`),t.active=!0,this.displayValue=``):(this.selectedItems.length===0||this.selectedItems[0].value!==i.value)&&(this.options.forEach(e=>e.active=!1),t.active=!0,this.selectedItems=[i],this.value=i.value.toString(),this.displayValue=i.label,this.hideMenu()),this._emitChangeEvents()}_handleItemUnselect(e){let t=e.target;if(t.disabled)return;t.removeAttribute(`active`);let n=t.textContent?.trim()??``,r=t.getAttribute(`value`)??n,i=this.filteredList.find(e=>e.value.toString()===r)||{label:n,value:r};this.selectedItems=this.selectedItems.filter(e=>e.value!==i.value),this.value=this.selectedItems.map(e=>e.value).join(`;`),this._emitChangeEvents()}async _handleBadgeDismissed(e,t){e.preventDefault();let n=t.value;this.options?.forEach(e=>e.value===n?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){if(this.multiSelect&&e.key===`Backspace`&&this.multiSelect&&this.displayValue.trim()===``&&this.selectedItems.length>0){let e=this.selectedItems[this.selectedItems.length-1].value;this.options?.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){e.preventDefault(),this.emit(`sgds-blur`);let t=e.relatedTarget;(this.creatable||this.multiSelect)&&t&&(this.contains(t)||this.shadowRoot?.contains(t))||(this.multiSelect?this.selectedItems.filter(({label:e})=>this.displayValue===e).length<=0&&(this.displayValue=``):this.displayValue=this.selectedItems.length>0?this.selectedItems[0].label:``)}async _handleClear(){this.value=this.displayValue=``,this.options?.forEach(e=>e.active=!1),this._emitChangeEvents(),(await this._input).focus(),this.showMenu()}async _mixinResetFormControl(){if(this.value=this.defaultValue,this.multiSelect){let e=this.value.split(`;`);this.options.forEach(t=>{t.active=e.includes(t.value)});let 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});let e=this.options.filter(e=>e.value===this.value);this.displayValue=e.length<=0?``:e[0].textContent.trim(),this._mixinResetValidity(await this._input)}}async _handleScroll(e){let t=e.target;if(t){let e=t.scrollHeight-t.clientHeight,n=Math.max(0,this.scrollBottomOffset);t.scrollTop>=e-n?(this.isScrollEnd||this.emit(`sgds-scroll-end`),this.isScrollEnd=!0):this.isScrollEnd=!1}}_renderInput(e){let t=this.hasFeedback,n=e;return T`
       <div
         ${bt(this.myDropdown)}
         class="form-control-group ${I({disabled:this.disabled,readonly:this.readonly,"is-invalid":this.invalid&&t})}"
@@ -2541,7 +2541,7 @@ let vg=Symbol.for(``),yg=e=>{if(e?.r===vg)return e?._$litStatic$},bg=/* @__PURE_
             `:D}
         ${this.suffixIconTemplate}
       </div>
-    `}_syncCreateOption(){this._showCreateOption=this.creatable&&this.emptyMenuAfterFiltering&&this.displayValue!==``,this._showCreateOption&&(this._createOptionValue=this.displayValue)}_handleCreateOptionSlotChange(e){this._createOptionSlotContent=e.target.assignedElements({flatten:!0})}_handleCreateOptionClick(e){e.composedPath()[0].closest?.(`a, button`)||(this.emit(`sgds-create-option`,{detail:{value:this._createOptionValue}}),this.emptyMenuAfterFiltering=!1,this._syncCreateOption(),this.hideMenu())}_handleCreateOptionKeydown(e){if(e.key===`Enter`){this._handleCreateOptionClick(e);return}if(e.key===`ArrowUp`){e.preventDefault();let t=this._getActiveMenuItems();t.length>0&&this._setMenuItem(t.length-1);return}e.key===`ArrowDown`&&(e.preventDefault(),this._getActiveMenuItems().length>0&&this._setMenuItem(0))}_handleKeyboardMenuItemsEvent(e){let t=this.shadowRoot?.querySelector(`.create-option`);if(!(t?.matches(`:focus`)&&e.key===`Tab`)){if(this._showCreateOption&&(e.key===`ArrowDown`||e.key===`Tab`&&!e.shiftKey)){let n=this._getActiveMenuItems();if(n.length>0&&n[n.length-1].shadowRoot?.querySelector(`.dropdown-item`)?.matches(`:focus`)){e.preventDefault(),t?.focus();return}if(n.length===0){e.preventDefault(),t?.focus();return}}super._handleKeyboardMenuItemsEvent(e)}}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||this.optionList.length===0?this._renderEmptyMenu():D:this.creatable&&this.emptyMenuAfterFiltering&&this.optionList.length>0?D:this.optionList.length===0||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():D}render(){let e=(this.isFocused||this.menuIsOpen)&&this.value!==``&&this.clearable&&!this.readonly;return T`
+    `}_syncCreateOption(){this._showCreateOption=this.creatable&&this.emptyMenuAfterFiltering&&this.displayValue!==``,this._showCreateOption&&(this._createOptionValue=this.displayValue)}_handleCreateOptionSlotChange(e){this._createOptionSlotContent=e.target.assignedElements({flatten:!0})}_handleCreateOptionClick(e){e.composedPath()[0].closest?.(`a, button`)||(this.emptyMenuAfterFiltering=!1,this._syncCreateOption(),this.hideMenu(),this.emit(`sgds-create-option`,{detail:{value:this._createOptionValue}}))}_handleCreateOptionKeydown(e){if(e.key===`Enter`){this._handleCreateOptionClick(e);return}if(e.key===`ArrowUp`){e.preventDefault();let t=this._getActiveMenuItems();t.length>0&&this._setMenuItem(t.length-1);return}e.key===`ArrowDown`&&(e.preventDefault(),this._getActiveMenuItems().length>0&&this._setMenuItem(0))}_handleKeyboardMenuItemsEvent(e){let t=this.shadowRoot?.querySelector(`.create-option`);if(!(t?.matches(`:focus`)&&e.key===`Tab`)){if(this._showCreateOption&&(e.key===`ArrowDown`||e.key===`Tab`&&!e.shiftKey)){let n=this._getActiveMenuItems();if(n.length>0&&n[n.length-1].shadowRoot?.querySelector(`.dropdown-item`)?.matches(`:focus`)){e.preventDefault(),t?.focus();return}if(n.length===0){e.preventDefault(),t?.focus();return}}super._handleKeyboardMenuItemsEvent(e)}}_renderFeedbackMenu(){return this.loading?this._renderLoadingMenu():this.async?this.emptyMenuAsync||this.optionList.length===0?this._renderEmptyMenu():D:this._showCreateOption?D:this.optionList.length===0||this.emptyMenuAfterFiltering&&this.optionList.length>0?this._renderEmptyMenu():D}render(){let e=(this.isFocused||this.menuIsOpen)&&this.value!==``&&this.clearable&&!this.readonly;return T`
       <div
         class=${I({"form-control-container":!0,"m-width-256":!0,disabled:this.disabled,combobox:!0})}
         @keydown=${this._handleMultiSelectKeyDown}