@descope/web-components-ui 1.0.407 → 1.0.409

package/dist/umd/phone-fields-descope-phone-input-box-field-index-js.js

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043,7212],{78313:(t,e,o)=>{o.d(e,{C:()=>g,T:()=>l});var r=o(7138),n=o(14944),i=o(33177),a=o(94619);const l=(0,n.xE)("combo-box"),{host:s,inputField:d,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:v,errorMessage:y}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"input"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},clearButton:{selector:"::part(clear-button)"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,r.Zz)((0,a.RF)({mappings:{hostWidth:{...s,property:"width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[b,u,d,v,y],labelFontSize:{...b,property:"font-size"},labelFontWeight:{...b,property:"font-weight"},labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...y,property:"color"},inputHeight:{...d,property:"height"},inputBackgroundColor:{...d,property:"background-color"},inputBorderColor:{...d,property:"border-color"},inputBorderWidth:{...d,property:"border-width"},inputBorderStyle:{...d,property:"border-style"},inputBorderRadius:{...d,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},inputDropdownButtonCursor:[{...c,property:"cursor"},{...h,property:"cursor"}],inputDropdownButtonColor:[{...c,property:"color"},{...h,property:"color"}],inputDropdownButtonSize:[{...c,property:"font-size"},{...h,property:"font-size"}],inputDropdownButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],inputOutlineColor:{...d,property:"outline-color"},inputOutlineWidth:{...d,property:"outline-width"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],labelPosition:{...b,property:"position"},labelTopPosition:{...b,property:"top"},labelHorizontalPosition:[{...b,property:"left"},{...b,property:"right"}],inputTransformY:{...b,property:"transform"},inputTransition:{...b,property:"transition"},marginInlineStart:{...b,property:"margin-inline-start"},placeholderOpacity:{...u,property:"opacity"},inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...p,property:"height"},valueInputMarginBottom:{...p,property:"margin-bottom"},overlayBackground:{property:()=>g.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>g.cssVarList.overlay.textColor},overlayBorder:{property:()=>g.cssVarList.overlay.border},overlayFontSize:{property:()=>g.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>g.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>g.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>g.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>g.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>g.cssVarList.overlay.itemPaddingInlineEnd}}}),a.VO,(0,a.mA)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},minHeight:{selector:"vaadin-combo-box-overlay"},margin:{selector:"vaadin-combo-box-overlay"},cursor:{selector:"vaadin-combo-box-item"},fontFamily:{selector:"vaadin-combo-box-item"},textColor:{selector:"vaadin-combo-box-item",property:"color"},fontSize:{selector:"vaadin-combo-box-item"},itemBoxShadow:{selector:"vaadin-combo-box-item",property:"box-shadow"},itemPaddingInlineStart:{selector:"vaadin-combo-box-item",property:"padding-inline-start"},itemPaddingInlineEnd:{selector:"vaadin-combo-box-item",property:"padding-inline-end"}},forward:{include:!1,attributes:["size"]}}),(0,a.OZ)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.tQ,(t=>class extends t{static get observedAttributes(){return["label-type"]}#t=({displayName:t,value:e,label:o})=>`<span data-name="${o}" data-id="${e}">${t||o}</span>`;#e;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" -',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}handleSelectedItem(){const t=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,t&&(this.value=t),this.value||this.setDefaultValue()}customValueTransformFn(t){return t}setComboBoxDescriptor(){const t=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),e=this;Object.defineProperties(this.inputElement,{value:{...t,set(o){if(!e.baseElement.items?.length)return;const r=e.customValueTransformFn(o)||"";r!==this.value&&t.set.call(this,r)}}})}#o(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id"),configurable:!0,writable:!0})})),t.items=e,setTimeout((()=>{this.handleSelectedItem()}),0)),t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML}}#r(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=()=>{t.bringToFront()},t._detachOverlay=()=>{},t._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#r(),this.renderItems(),(0,n.mx)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.Ge)(this,this.#o.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}onLabelClick(){this.isReadOnly||this.isDisabled||(this.focus(),this.setAttribute("opened","true"))}attributeChangedCallback(t,e,o){super.attributeChangedCallback?.(t,e,o),e!==o&&"label-type"===t&&("floating"===o?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick))}setDefaultValue(){this.value=this.defaultValue}set value(t){if(t){const e=this.baseElement.items?.find((e=>e["data-id"]===t));e&&(this.baseElement.selectedItem=e)}else this.baseElement.selectedItem=void 0}get value(){return(this.baseElement.selectedItem?.["data-id"]||this.allowCustomValue)&&this.baseElement.__data.value||""}get allowCustomValue(){return"true"===this.getAttribute("allow-custom-value")}}))((0,a.tz)({slots:["","prefix"],wrappedEleName:"vaadin-combo-box",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\t${(0,i.cy)(g.cssVarList)}\n\t\t${(0,i.fu)("vaadin-combo-box")}\n\t\t${(0,i.lS)("vaadin-combo-box")}\n\t\t${(0,i.I4)("vaadin-combo-box")}\n\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\tvaadin-combo-box::before {\n\t\t\theight: initial;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\tpadding: 0;\n\t\t\tbox-shadow: none;\n\t\t}\n\n    vaadin-combo-box::part(toggle-button),\n    vaadin-combo-box::part(clear-button) {\n      align-self: center;\n    }\n\n    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,i.$J)("vaadin-combo-box")}\n    ${(0,i.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:l,includeForwardProps:["items","renderer","selectedItem"]}))},4480:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>r.C}),o(31111);var r=o(78313);customElements.define(r.T,r.C)},69473:(t,e,o)=>{o.d(e,{T:()=>s,w:()=>p});var r=o(94619),n=o(93826),i=o(7138),a=o(14944),l=o(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,i.Zz)((0,r.RF)({mappings:n.A}),r.VO,(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},o={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,o),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,o){super.attributeChangeCallback?.(t,e,o),"type"===t&&this.baseElement._setType(o),e!==o&&("label-type"===t?"floating"===o?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===o))}}))((0,r.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(t,e,o)=>{o.r(e),o.d(e,{TextFieldClass:()=>r.w}),o(39542),o(66418),o(56637);var r=o(69473);customElements.define(r.T,r.w)},43945:(t,e,o)=>{o.d(e,{A:()=>p,T:()=>a});var r=o(25827),n=o(14944),i=o(63789);const a=(0,n.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,r.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,i.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const o=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>o.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,o){if(super.attributeChangedCallback(t,e,o),e!==o&&l.includes(t)){const e=s[t]||t;this.phoneNumberInput.setAttribute(e,o)}}}},46633:(t,e,o)=>{o.r(e),o(89348);var r=o(43945);customElements.define(r.T,r.A)},65636:(t,e,o)=>{o.r(e),o.d(e,{PhoneFieldInputBoxClass:()=>C}),o(46633),o(4480),o(89348);var r=o(43945),n=o(14944),i=o(7138),a=o(94619),l=o(69473),s=o(44066),d=o(33177);const p=l.w.cssVarList,u=(0,n.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:m,inputField:v,inputFieldInternal:y,phoneInput:g,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,i.Zz)((0,a.RF)({mappings:{fontSize:[c,v,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...y,property:"border-style"},inputBorderWidth:{...y,property:"border-width"},inputBorderColor:{...y,property:"border-color"},inputBorderRadius:[{...v,property:"border-radius"},{...y,property:"border-radius"}],inputHorizontalPadding:[{...g,property:"padding-left"},{...g,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...g,property:p.inputValueTextColor},inputPlaceholderTextColor:{...g,property:p.inputPlaceholderColor},inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...b,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${r.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${r.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,n.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(C.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,C)},63789:(t,e,o)=>{o.d(e,{Q:()=>n});var r=o(44066);const n=t=>r.A.find((e=>e.code===t))?.dialCode},31111:(t,e,o)=>{o(46165),o(14968),o(37451),o(72815);var r=o(90500),n=o(6052);const i=n.AH`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043,7052,7212],{69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>p});var i=n(94619),o=n(93826),r=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w}),n(39542),n(66418),n(56637);var i=n(69473);customElements.define(i.T,i.w)},43945:(t,e,n)=>{n.d(e,{A:()=>p,T:()=>a});var i=n(25827),o=n(14944),r=n(63789);const a=(0,o.xE)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete","label-type","allow-alphanumeric-input"],s={"phone-input-placeholder":"placeholder"},d=(0,i.y)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.Q)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const t=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(t,"")}`}return this.phoneNumberInput.value}set value(t){this.phoneNumberInput.value=t}get phoneNumberValue(){return this.phoneNumberInput.value}get phoneNumberInputEle(){return this.phoneNumberInput.shadowRoot.querySelector("input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const t=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:t.length<this.minLength?{tooShort:!0}:t.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{1===t.target.value.length&&"-"===t.target.value&&(t.target.value=""),t.target.value=t.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");let e=t.target.value;if(!this.allowAlphanumericInput){const n=/^[+\d-]+$/;e=t.target.value.split("").filter((t=>n.test(t))).join("")}t.target.value=e})),this.handleFocusEventsDispatching([this.phoneNumberInput])}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=s[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},46633:(t,e,n)=>{n.r(e),n(89348);var i=n(43945);customElements.define(i.T,i.A)},65636:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldInputBoxClass:()=>C}),n(46633),n(4480),n(89348);var i=n(43945),o=n(14944),r=n(7138),a=n(94619),l=n(69473),s=n(44066),d=n(33177);const p=l.w.cssVarList,u=(0,o.xE)("phone-input-box-field"),{host:c,label:h,inputElement:b,requiredIndicator:v,inputField:m,inputFieldInternal:g,phoneInput:y,errorMessage:f,helperText:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},inputFieldInternal:{selector:()=>"descope-phone-field-internal-input-box vaadin-text-field::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},C=(0,r.Zz)((0,a.RF)({mappings:{fontSize:[c,m,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,f,x],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...g,property:"border-style"},inputBorderWidth:{...g,property:"border-width"},inputBorderColor:{...g,property:"border-color"},inputBorderRadius:[{...m,property:"border-radius"},{...g,property:"border-radius"}],inputHorizontalPadding:[{...y,property:"padding-left"},{...y,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...v,property:"color"}],labelRequiredIndicator:{...v,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...y,property:p.inputValueTextColor},inputPlaceholderTextColor:{...y,property:p.inputPlaceholderColor},inputOutlineStyle:{...m,property:"outline-style"},inputOutlineColor:{...m,property:"outline-color"},inputOutlineWidth:{...m,property:"outline-width"},inputOutlineOffset:{...m,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...b,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(C.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      overflow: hidden;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,C)},63789:(t,e,n)=>{n.d(e,{Q:()=>o});var i=n(44066);const o=t=>i.A.find((e=>e.code===t))?.dialCode},31111:(t,e,n)=>{n(46165),n(14968),n(37451),n(72815);var i=n(90500),o=n(6052);const r=o.AH`
   :host {
     outline: none;
   }
@@ -7,7 +7,7 @@
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
-`;(0,n.SF)("vaadin-combo-box",[r.k,i],{moduleId:"lumo-combo-box"}),o(9077);var a=o(33791),l=o(38735),s=o(35717),d=o(10187);class p extends((0,d.y)((0,n.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
+`;(0,o.SF)("vaadin-combo-box",[i.k,r],{moduleId:"lumo-combo-box"}),n(9077);var a=n(33791),l=n(38735),s=n(35717),d=n(10187);class p extends((0,d.y)((0,o.cp)((0,s.v)(a.Pu)))){static get template(){return a.qy`
       <style>
         :host {
           display: block;
@@ -21,7 +21,7 @@
       <div part="content">
         <slot></slot>
       </div>
-    `}static get is(){return"vaadin-combo-box-item"}}(0,l.X)(p);var u=o(21380),c=o(52718),h=o(75482);const b=n.AH`
+    `}static get is(){return"vaadin-combo-box-item"}}(0,l.X)(p);var u=n(21380),c=n(52718),h=n(75482);const b=o.AH`
   #overlay {
     width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
   }
@@ -31,13 +31,13 @@
     flex-direction: column;
     height: 100%;
   }
-`;(0,n.SF)("vaadin-combo-box-overlay",[c.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class m extends((0,h.p)((0,u.c)((0,s.v)((0,n.cp)(a.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return a.qy`
+`;(0,o.SF)("vaadin-combo-box-overlay",[c.B,b],{moduleId:"vaadin-combo-box-overlay-styles"});class v extends((0,h.p)((0,u.c)((0,s.v)((0,o.cp)(a.Pu))))){static get is(){return"vaadin-combo-box-overlay"}static get template(){return a.qy`
       <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">
         <div part="loader"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
-    `}}(0,l.X)(m);var v=o(44998);class y extends((0,v.N)(a.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return a.qy`
+    `}}(0,l.X)(v);var m=n(44998);class g extends((0,m.N)(a.Pu)){static get is(){return"vaadin-combo-box-scroller"}static get template(){return a.qy`
       <style>
         :host {
           display: block;
@@ -64,7 +64,7 @@
       <div id="selector">
         <slot></slot>
       </div>
-    `}}(0,l.X)(y);var g=o(31846),f=o(58074),x=o(32318),C=o(15408),w=o(3550),I=o(3410);const E=t=>class extends((0,I.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var _=o(89385),T=o(5792),S=o(93131);(0,n.SF)("vaadin-combo-box",_.k,{moduleId:"vaadin-combo-box-styles"});class k extends((0,T.K)((0,S.x)(E((0,x.R)((0,n.cp)((0,g.q)(a.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return a.qy`
+    `}}(0,l.X)(g);var y=n(31846),f=n(58074),x=n(32318),C=n(15408),w=n(3550),_=n(3410);const I=t=>class extends((0,_.U)(t)){static get properties(){return{pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"pattern"]}static get constraints(){return[...super.constraints,"pattern"]}};var E=n(89385),k=n(5792),T=n(93131);(0,o.SF)("vaadin-combo-box",E.k,{moduleId:"vaadin-combo-box-styles"});class A extends((0,k.K)((0,T.x)(I((0,x.R)((0,o.cp)((0,y.q)(a.Pu))))))){static get is(){return"vaadin-combo-box"}static get template(){return a.qy`
       <style>
         :host([opened]) {
           pointer-events: auto;
@@ -110,7 +110,7 @@
       ></vaadin-combo-box-overlay>
 
       <slot name="tooltip"></slot>
-    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new C.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new f.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,l.X)(k)},53430:(t,e,o)=>{o.d(e,{a:()=>n});var r=o(32318);const n=t=>class extends((0,r.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},34068:(t,e,o)=>{o.d(e,{A:()=>h}),o(9077);var r=o(33791),n=o(38735),i=o(31846),a=o(58074),l=o(89385),s=o(6052),d=o(15408),p=o(53430),u=o(3550);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,i.q)(r.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return r.qy`
+    `}static get properties(){return{_positionTarget:{type:Object}}}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new C.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new w.q(this.inputElement,this._labelController)),this._tooltipController=new f.I(this),this.addController(this._tooltipController),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this._tooltipController.setShouldShow((t=>!t.opened)),this._positionTarget=this.shadowRoot.querySelector('[part="input-field"]'),this._toggleElement=this.$.toggleButton}_onClearButtonClick(t){t.stopPropagation(),super._onClearButtonClick(t)}_onHostClick(t){const e=t.composedPath();(e.includes(this._labelNode)||e.includes(this._positionTarget))&&super._onHostClick(t)}}(0,l.X)(A)},53430:(t,e,n)=>{n.d(e,{a:()=>o});var i=n(32318);const o=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},34068:(t,e,n)=>{n.d(e,{A:()=>h}),n(9077);var i=n(33791),o=n(38735),r=n(31846),a=n(58074),l=n(89385),s=n(6052),d=n(15408),p=n(53430),u=n(3550);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,r.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -145,4 +145,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,n.X)(h)},70297:(t,e,o)=>{o(37451);var r=o(90500);(0,o(6052).SF)("vaadin-text-field",r.k,{moduleId:"lumo-text-field-styles"}),o(34068)},39542:(t,e,o)=>{o(70297),o(34068)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,o.X)(h)},70297:(t,e,n)=>{n(37451);var i=n(90500);(0,n(6052).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(34068)},39542:(t,e,n)=>{n(70297),n(34068)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.407",
+  "version": "1.0.409",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-combo-box/ComboBoxClass.js

@@ -49,6 +49,23 @@ const ComboBoxMixin = (superclass) =>
       this.renderItems();
     }
 
+    set renderer(fn) {
+      // fn takes (root, comboBox, model) as arguments
+      this.baseElement.renderer = fn;
+    }
+
+    get loading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    set loading(val) {
+      if (val) {
+        this.setAttribute('loading', 'true');
+      } else {
+        this.removeAttribute('loading');
+      }
+    }
+
     get data() {
       if (this.#data) return this.#data;
 
@@ -92,14 +109,20 @@ const ComboBoxMixin = (superclass) =>
     }
 
     renderItems() {
-      const template = this.getItemsTemplate();
-      if (template) this.innerHTML = template;
+      if (this.#data || this.getAttribute('data')) {
+        const template = this.getItemsTemplate();
+        this.innerHTML = template;
+      }
     }
 
     handleSelectedItem() {
-      const currentSelected = this.baseElement.selectedItem?.['data-id'];
+      const { selectedItem } = this.baseElement;
+      const currentSelected = selectedItem?.['data-id'];
 
-      this.baseElement.selectedItem = undefined;
+      // If the selected item is still a child, there's no need to update the value
+      if (selectedItem && Array.from(this.children).includes(selectedItem)) {
+        return;
+      }
 
       // if previously selected item ID exists in current children, set it as selected
       if (currentSelected) {
@@ -132,7 +155,7 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.baseElement.items?.length) {
+            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
               return;
             }
 
@@ -152,39 +175,27 @@ const ComboBoxMixin = (superclass) =>
     // in order to avoid it, we are passing the children of this component
     // to the items & renderer props, so it will be used as the combo box items
     #onChildrenChange() {
-      const baseElement = this.shadowRoot.querySelector(this.baseSelector);
       const items = Array.from(this.children);
 
       // we want the data-name attribute to be accessible as an object attribute
-      if (items.length) {
-        items.forEach((node) => {
-          Object.defineProperty(node, 'data-name', {
-            value: node.getAttribute('data-name'),
-            configurable: true,
-            writable: true,
-          });
-          Object.defineProperty(node, 'data-id', {
-            value: node.getAttribute('data-id'),
-            configurable: true,
-            writable: true,
-          });
+      items.forEach((node) => {
+        Object.defineProperty(node, 'data-name', {
+          value: node.getAttribute('data-name'),
+          configurable: true,
+          writable: true,
         });
+        Object.defineProperty(node, 'data-id', {
+          value: node.getAttribute('data-id'),
+          configurable: true,
+          writable: true,
+        });
+      });
 
-        baseElement.items = items;
-
-        setTimeout(() => {
-          // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-          this.handleSelectedItem();
-        }, 0);
-      }
-
-      // use vaadin combobox custom renderer to render options as HTML
-      // and not via default renderer, which renders only the data-name's value
-      // in its own HTML template
-      baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
-        root.innerHTML = model.item.outerHTML;
-      };
+      this.baseElement.items = items;
+      setTimeout(() => {
+        // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
+        this.handleSelectedItem();
+      }, 0);
     }
 
     // the default vaadin behavior is to attach the overlay to the body when opened
@@ -199,6 +210,16 @@ const ComboBoxMixin = (superclass) =>
       overlay._enterModalState = () => {};
     }
 
+    #overrideRenderer() {
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
+      this.baseElement.renderer = (root, combo, model) => {
+        // eslint-disable-next-line no-param-reassign
+        root.innerHTML = model.item.outerHTML;
+      };
+    }
+
     init() {
       super.init?.();
 
@@ -213,13 +234,11 @@ const ComboBoxMixin = (superclass) =>
       };
 
       this.setComboBoxDescriptor();
-
       this.#overrideOverlaySettings();
+      this.#overrideRenderer();
 
-      this.renderItems();
-
+      // Set up observers - order matters here since renderItems can clear innerHTML
       observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
-
       observeChildren(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
@@ -252,16 +271,38 @@ const ComboBoxMixin = (superclass) =>
     }
 
     setDefaultValue() {
-      this.value = this.defaultValue;
+      if (this.defaultValue) {
+        this.value = this.defaultValue;
+      }
     }
 
-    set value(val) {
-      if (val) {
-        const child = this.baseElement.items?.find((item) => item['data-id'] === val);
+    #getChildToSelect(val) {
+      return this.baseElement.items?.find((item) => item['data-id'] === val);
+    }
 
-        if (child) {
-          this.baseElement.selectedItem = child;
-        }
+    #preventSelectedItemChangeEventIfNeeded(val, selectedChild) {
+      // If the actual value didn't change, but the selected item did (the element changed),
+      // we want to stop the event propagation since it's not a real change
+      const shouldPreventItemChangeEvent =
+        val === this.value && selectedChild !== this.baseElement.selectedItem;
+      if (shouldPreventItemChangeEvent) {
+        this.baseElement.addEventListener(
+          'selected-item-changed',
+          (e) => {
+            e.stopImmediatePropagation();
+          },
+          { once: true, capture: true }
+        );
+      }
+    }
+
+    set value(val) {
+      const selectedChild = this.#getChildToSelect(val);
+      this.#preventSelectedItemChangeEventIfNeeded(val, selectedChild);
+      if (val && selectedChild) {
+        this.baseElement.selectedItem = selectedChild;
+      } else if (!selectedChild && this.allowCustomValue) {
+        this.baseElement.value = val;
       } else {
         this.baseElement.selectedItem = undefined;
       }
@@ -391,7 +432,10 @@ export const ComboBoxClass = compose(
     name: 'overlay',
     selector: '',
     mappings: {
-      backgroundColor: { selector: 'vaadin-combo-box-scroller' },
+      backgroundColor: [
+        { selector: 'vaadin-combo-box-scroller' },
+        { selector: 'vaadin-combo-box-overlay::part(overlay)' },
+      ],
       minHeight: { selector: 'vaadin-combo-box-overlay' },
       margin: { selector: 'vaadin-combo-box-overlay' },
       cursor: { selector: 'vaadin-combo-box-item' },
@@ -404,6 +448,24 @@ export const ComboBoxClass = compose(
         property: 'padding-inline-start',
       },
       itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
+
+      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
+      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
+      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
+      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
+      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
+      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
+      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      loaderBorderColor: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-color',
+      },
+      loaderBorderRadius: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border-radius',
+      },
+      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
+      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
     },
     forward: {
       include: false,
@@ -451,6 +513,10 @@ export const ComboBoxClass = compose(
       align-self: center;
     }
 
+    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {
+      display: none;
+    }
+
     vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
       opacity: 0;
     }
@@ -465,7 +531,7 @@ export const ComboBoxClass = compose(
     // with the same name. Including it will cause Vaadin to calculate NaN size,
     // and reset items to an empty array, and opening the list box with no items
     // to display.
-    excludeAttrsSync: ['tabindex', 'size', 'data'],
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
     componentName,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -24,6 +24,7 @@ import {
 import {
   createMonthView,
   createInputs,
+  getMonthsOptions,
   getYearOptions,
   initComboBox,
   ensureMonthNamesArr,
@@ -286,7 +287,9 @@ class RawCalendar extends BaseInputClass {
       this.monthInput.value = month;
       // For the yearInput we update the base element directly to properly trigger the change event
       // since this can be a custom value
-      this.yearInput.baseElement.value = year;
+      setTimeout(() => {
+        this.yearInput.baseElement.value = year;
+      });
     }
   }
 
@@ -425,11 +428,10 @@ class RawCalendar extends BaseInputClass {
   }
 
   onMonthNamesChange() {
-    Array.from(this.monthInput?.children || []).forEach((child, index) => {
-      const month = this.monthNames[index];
-      child.setAttribute('data-name', month);
-      // eslint-disable-next-line no-param-reassign
-      child.textContent = month;
+    setTimeout(() => {
+      if (this.monthInput) {
+        this.monthInput.innerHTML = getMonthsOptions(this.monthNames);
+      }
     });
   }
 

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -31,6 +31,10 @@ class RawRecaptcha extends BaseClass {
       return;
     }
 
+    this.toggleRecaptchaEles(enabled);
+  }
+
+  toggleRecaptchaEles(enabled) {
     if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
@@ -95,6 +99,7 @@ class RawRecaptcha extends BaseClass {
       this.mockRecaptchaEle.style.display = 'none';
       this.badge.classList.add('hidden');
     } else {
+      this.toggleRecaptchaEles(this.enabled);
       this.badge.classList.remove('hidden');
     }
   }

package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js

@@ -149,7 +149,8 @@ class PhoneFieldInternal extends BaseInputClass {
   }
 
   getRestrictedCountries() {
-    return this.getAttribute('restrict-countries')?.split(',') || [];
+    const attr = this.getAttribute('restrict-countries');
+    return attr ? attr.split(',') : [];
   }
 
   getCountryByDialCode(countryDialCode) {

package/src/mixins/normalizeBooleanAttributesMixin.js

@@ -20,6 +20,8 @@ const booleanAttributesList = [
   'opening',
   'closing',
   'has-no-options',
+  'loading',
+  'allow-custom-value',
 ];
 
 const isBooleanAttribute = (attr) => {

package/src/theme/components/comboBox.js

@@ -61,6 +61,25 @@ export const comboBox = {
   // Overlay direct theme:
   [vars.overlay.minHeight]: '400px',
   [vars.overlay.margin]: '0',
+
+  [vars.overlay.contentHeight]: '100%',
+  [vars.overlay.contentOpacity]: '1',
+  _loading: {
+    [vars.overlay.loaderTop]: '50%',
+    [vars.overlay.loaderLeft]: '50%',
+    [vars.overlay.loaderRight]: 'auto',
+    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
+    // Margin has to be half of the width/height of the loader to center it
+    [vars.overlay.loaderMargin]: '-15px 0 0 -15px',
+    [vars.overlay.loaderWidth]: '30px',
+    [vars.overlay.loaderHeight]: '30px',
+    [vars.overlay.loaderBorder]: '2px solid transparent',
+    [vars.overlay
+      .loaderBorderColor]: `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
+    [vars.overlay.loaderBorderRadius]: '50%',
+    [vars.overlay.contentHeight]: '100px',
+    [vars.overlay.contentOpacity]: '0',
+  },
 };
 
 export default comboBox;