@descope/web-components-ui 1.0.309 → 1.0.311

package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9476,2528,3172,5130,9299,9656],{3878:(t,e,n)=>{n.d(e,{P:()=>a});var i=n(2061),r=n(4978),o=n(3346);const a=(...t)=>(0,i.qC)(r.wX,r.li,r.QT,r.mE)((0,o.s)(...t))},5964:(t,e,n)=>{n.d(e,{f:()=>l,n:()=>c});var i=n(2061),r=n(4567),o=n(4978),a=n(2549),s=n(3804);const l=(0,r.iY)("button"),{host:p,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let u;const c=(0,i.qC)((0,o.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...p,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},iconColor:{selector:()=>`::slotted(${a.q.componentName})`,property:a.q.cssVarList.fill},labelTextDecoration:{...d,property:"text-decoration"},labelSpacing:{...d,property:"gap"},textAlign:{...d,property:"justify-content",fallback:"center"}}}),s.v,o.e4,o.Ae)((0,o.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${c.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:h,fontSize:b}=c.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${h});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},3804:(t,e,n)=>{n.d(e,{v:()=>i});const i=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},2018:(t,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>i.n}),n(1721);var i=n(5964);customElements.define(i.f,i.n)},4049:(t,e,n)=>{n.d(e,{H:()=>y,f:()=>s});var i=n(2061),r=n(4567),o=n(4201),a=n(4978);const s=(0,r.iY)("combo-box"),{host:l,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:v}={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)"}},y=(0,i.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,p,g,v],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,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:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:n})=>`<span data-name="${n}" data-id="${e}">${t||n}</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(n){if(!e.baseElement.items?.length)return;const i=e.customValueTransformFn(n)||"";i!==this.value&&t.set.call(this,i)}}})}#n(){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,n)=>{t.innerHTML=n.item.outerHTML}}#i(){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.#i(),this.renderItems(),(0,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#n.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,a.DM)({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,o.bi)(y.cssVarList)}\n\t\t${(0,o.PH)("vaadin-combo-box")}\n\t\t${(0,o.jI)("vaadin-combo-box")}\n\t\t${(0,o.Pd)("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    ${(0,o.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,n)=>{n.r(e),n.d(e,{ComboBoxClass:()=>i.H}),n(7583);var i=n(4049);customElements.define(i.f,i.H)},2549:(t,e,n)=>{n.d(e,{f:()=>s,q:()=>p});var i=n(4978),r=n(3346),o=n(2061),a=n(4567);const s=(0,a.iY)("icon");class l extends((0,r.s)({componentName:s,baseSelector:"slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}get items(){return this.shadowRoot.querySelector("slot").assignedNodes()}#n(){this.items?.length>0?this.shadowRoot.host.style.setProperty("display","inline-block"):this.shadowRoot.host.style.setProperty("display","none"),this.querySelectorAll("*[fill]").forEach((t=>t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)))}init(){(0,a.P$)(this,this.#n.bind(this))}}const p=(0,o.qC)((0,i.yk)({mappings:{fill:{}}}),i.e4,i.Ae)(l)},6417:(t,e,n)=>{n.d(e,{f:()=>l,z:()=>d});var i=n(4978),r=n(4447),o=n(2061),a=n(4567),s=n(4201);const l=(0,a.iY)("text-field"),p=["type"],d=(0,o.qC)((0,i.yk)({mappings:r.Z}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,s.Wf)("vaadin-text-field")}\n\t\t\t${(0,s.bi)(d.cssVarList)}\n\t\t\t${(0,s.wm)("vaadin-text-field",d.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.z}),n(9789);var i=n(6417);customElements.define(i.f,i.z)},4447:(t,e,n)=>{n.d(e,{Z:()=>h});const{host:i,label:r,placeholder:o,requiredIndicator:a,inputField:s,input:l,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},h={fontSize:[{},i],fontFamily:[r,s,p,d],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputBackgroundColor:{...s,property:"background-color"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"}],inputCaretTextColor:{...l,property:"color"},labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},inputTextAlign:{...l,property:"text-align"},inputPlaceholderColor:[{...o,property:"color"},{...u,property:"-webkit-text-fill-color"}]}},2138:(t,e,n)=>{n.d(e,{f:()=>s,k:()=>p});var i=n(4978),r=n(2061),o=n(4567),a=n(3346);const s=(0,o.iY)("text");class l extends((0,a.s)({componentName:s,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    </style>\n    <slot part="text-wrapper"></slot>\n    '}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),i.e4,i.Ae)(l)},1876:(t,e,n)=>{n.r(e),n.d(e,{TextClass:()=>i.k});var i=n(2138);customElements.define(i.f,i.k)},6751:(t,e,n)=>{n.r(e);var i=n(3878),r=n(4567);const o=(0,r.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],s=(0,i.P)({componentName:o,baseSelector:"div"});customElements.define(o,class extends s{static get observedAttributes(){return[].concat(s.observedAttributes||[],a,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,n]=Object.entries(t)[0];this.valueInput.value=n,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,r.oP)(this,this.valueInput,{includeAttrs:a}),(0,r.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,r.oP)(this,this.removeButton,{includeAttrs:["disabled"]})}initRemoveButton(){this.removeButton.addEventListener("click",(()=>this.dispatchEvent(new CustomEvent("mapping-item-removed",{bubbles:!0,composed:!0}))))}init(){super.init?.(),this.initRemoveButton()}getValidity(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{}:{badInput:!0}}reportValidity(){this.inputs.forEach((t=>t.reportValidity()))}focus(){(this.checkValidity()||!this.valueInput.checkValidity()?this.valueInput:this.attributeInput).focus()}handleSeparatorChange(){this.shadowRoot.querySelector(".separator").textContent=this.separator}#r(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#r(n)}})},7819:(t,e,n)=>{n.d(e,{Z:()=>s,f:()=>o});var i=n(3878),r=n(4567);const o=(0,r.iY)("mappings-field-internal"),a=(0,i.P)({componentName:o,baseSelector:"div"}),s=class extends a{#o;static get observedAttributes(){return[].concat(a.observedAttributes||[],["label-value","label-attr","button-label","invalid","readonly","disabled"])}isValidDataType(t){try{return t.every((t=>"object"==typeof t&&!Array.isArray(t)&&1===Object.getOwnPropertyNames(t).length&&"string"==typeof t[Object.keys(t)[0]]&&""!==t[Object.keys(t)[0]].trim()))}catch(t){return!1}}get labelValue(){return this.getAttribute("label-value")||"Value"}get labelAttr(){return this.getAttribute("label-attr")||"Attribute"}get buttonLabel(){return this.getAttribute("button-label")||"Add mapping"}get options(){return this.getAttribute("options")||[]}addNewMappingItem(t){const e=document.createElement("descope-mapping-item");return e.setAttribute("bordered","true"),this.mappingsContainerEle.appendChild(e),(0,r.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(()=>{e===this.#o&&(this.resetInvalidIndication(),this.#o=void 0),e.remove(),this.setCustomValidity("")})),this.dispatchEvent(new CustomEvent("mapping-item-added",{bubbles:!0,composed:!0})),t&&e.focus()}),0),e}get items(){return Array.from(this.mappingsContainerEle.querySelectorAll("descope-mapping-item"))}get value(){return this.items.reduce(((t,e)=>e.value?[...t,e.value]:t),[])}set value(t){if(!this.isValidDataType(t))return void console.error("received invalid value to set - should be an array of objects with one key-value pair");const e=this.items;if(e.length>t.length)for(let n=t.length;n<e.length;n++)this.mappingsContainerEle.removeChild(e[n]);t.forEach(((t,n)=>{const i=e[n];if(i)i.value=t;else{const e=this.addNewMappingItem(!1);setTimeout((()=>{e.value=t}),0)}}))}constructor(){super(),this.innerHTML='\n      <div class="labels-container" part="labels"></div>\n      <div class="mappings-container"></div>\n      <div class="button-container"></div>\n    ',this.labelsEle=this.querySelector(".labels-container"),this.mappingsContainerEle=this.querySelector(".mappings-container"),this.buttonContainer=this.querySelector(".button-container")}initLabels(){this.labelsEle.innerHTML=`\n      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>\n      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>\n    `}initAddButton(){this.buttonContainer.innerHTML=`\n      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">\n        <vaadin-icon icon="vaadin:plus"></vaadin-icon>\n        ${this.buttonLabel}\n      </descope-button>\n    `;const t=this.querySelector("descope-button");t.onclick=()=>{this.addNewMappingItem(!0)},(0,r.oP)(this,t,{includeAttrs:["disabled"]})}#a(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#o||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#o)&&this.#o?.checkValidity()&&(this.resetInvalidIndication(),this.#o.removeAttribute("invalid"),this.#o=void 0)})),(0,r.P$)(this.mappingsContainerEle,this.#a.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#s(t){t&&(this.#o=this.items.find((t=>!t.checkValidity())),this.#o?.reportValidity(),this.#o?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#s("true"===n),"readonly"===t&&this.toggleAttribute("inert","true"===n)}}},3820:(t,e,n)=>{n.r(e);var i=n(7819);customElements.define(i.f,i.Z)},9227:(t,e,n)=>{n.r(e),n.d(e,{MappingsFieldClass:()=>f}),n(9381),n(7911),n(6594);var i=n(4978),r=n(2138),o=n(2061),a=n(4567),s=n(7819);const l=(0,a.iY)("mappings-field"),{host:p,helperText:d,errorMessage:u,mappingItem:c,labels:h,labelsText:b,valueLabel:m,attrLabel:g,separator:v,labelsContainer:y}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},labelsText:{selector:'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},f=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...v,property:"margin-top"}],fontFamily:[d,u,h],separatorFontSize:{...v,property:"font-size"},labelsFontSize:{...b,property:"font-size"},labelsLineHeight:[{...b,property:"line-height"},{...h,property:"line-height"}],labelTextColor:{...h,property:r.k.cssVarList.textColor},itemMarginBottom:{...c,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...y,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),i.Ae,(t=>class extends t{get defaultValues(){const t=this.getAttribute("default-values");if(t)try{return JSON.parse(t)}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}setDefaultValues(){const t=this.defaultValues;Object.keys(t).length>0&&(this.inputElement.value=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${s.f}\n        tabindex="-1"\n      ></${s.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(s.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]}),this.setDefaultValues()}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>`\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-mappings-field-internal [part="labels"] {\n        display: none;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"],\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        ${r.k.cssVarList.fontWeight}: 500;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"] {\n        grid-column: 1 / span 1;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        grid-column: 3 / span 1;\n      }\n\n      descope-mapping-item::part(wrapper) {\n        display: grid;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n    `,excludeAttrsSync:["tabindex","label-value","label-attr","button-label","options","error-message"],componentName:l}));n(1876),n(2018),n(9357),n(1294),n(3820),n(6751),customElements.define(l,f)},6867:(t,e,n)=>{n.d(e,{Z:()=>s,f:()=>o});var i=n(3878),r=n(4567);const o=(0,r.iY)("saml-group-mappings-internal"),a=(0,i.P)({componentName:o,baseSelector:""}),s=class extends a{static get observedAttributes(){return["invalid"].concat(a.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(t){t.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,r.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,r.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,r.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(t){t?.group&&"string"==typeof t.group&&(this.groupInputElement.value=t.group),Array.isArray(t?.mappings)&&(this.mappingsElement.value=t.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#l(t){if(t){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"invalid"===t&&this.#l("true"===n)}}},4115:(t,e,n)=>{n.r(e);var i=n(6867);customElements.define(i.f,i.Z)},3277:(t,e,n)=>{n.r(e),n.d(e,{SamlGroupMappingsClass:()=>d}),n(9381);var i=n(4978),r=n(2061),o=n(4567),a=n(6867);const s=(0,o.iY)("saml-group-mappings"),{host:l,groupInput:p}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},groupNameInputMarginBottom:{...p,property:"margin-bottom"}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),i.Ae,(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${a.f}\n        tabindex="-1"\n      ></${a.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,o.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,o.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:s}));n(9357),n(9227),n(4115),customElements.define(s,d)},4201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>l,PH:()=>p,Pd:()=>a,TX:()=>r,Wf:()=>c,bi:()=>i,jI:()=>s,jl:()=>o,wm:()=>u});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${s(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9476,2528,3172,5130,9299,9656],{3878:(t,e,i)=>{i.d(e,{P:()=>a});var n=i(2061),r=i(4978),o=i(3346);const a=(...t)=>(0,n.qC)(r.wX,r.li,r.QT,r.mE)((0,o.s)(...t))},5964:(t,e,i)=>{i.d(e,{f:()=>l,n:()=>c});var n=i(2061),r=i(4567),o=i(4978),a=i(2549),s=i(3804);const l=(0,r.iY)("button"),{host:p,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let u;const c=(0,n.qC)((0,o.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...p,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},iconColor:{selector:()=>`::slotted(${a.q.componentName})`,property:a.q.cssVarList.fill},labelTextDecoration:{...d,property:"text-decoration"},labelSpacing:{...d,property:"gap"},textAlign:{...d,property:"justify-content",fallback:"center"}}}),s.v,o.e4,o.Ae)((0,o.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${u}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${c.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l})),{color:h,fontSize:b}=c.cssVarList;u=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${h});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},3804:(t,e,i)=>{i.d(e,{v:()=>n});const n=t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}},2018:(t,e,i)=>{i.r(e),i.d(e,{ButtonClass:()=>n.n}),i(1721);var n=i(5964);customElements.define(n.f,n.n)},4049:(t,e,i)=>{i.d(e,{H:()=>y,f:()=>s});var n=i(2061),r=i(4567),o=i(4201),a=i(4978);const s=(0,r.iY)("combo-box"),{host:l,inputField:p,inputElement:d,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:g,errorMessage:v}={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)"}},y=(0,n.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,p,g,v],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...p,property:"height"},inputBackgroundColor:{...p,property:"background-color"},inputBorderColor:{...p,property:"border-color"},inputBorderWidth:{...p,property:"border-width"},inputBorderStyle:{...p,property:"border-style"},inputBorderRadius:{...p,property:"border-radius"},labelRequiredIndicator:{...m,property:"content"},inputValueTextColor:{...p,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:{...p,property:"outline-color"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineStyle:{...p,property:"outline-style"},inputOutlineOffset:{...p,property:"outline-offset"},inputHorizontalPadding:[{...d,property:"padding-left"},{...d,property:"padding-right"}],overlayBackground:{property:()=>y.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>y.cssVarList.overlay.textColor},overlayBorder:{property:()=>y.cssVarList.overlay.border},overlayFontSize:{property:()=>y.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>y.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>y.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>y.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>y.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>y.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:i})=>`<span data-name="${i}" data-id="${e}">${t||i}</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(i){if(!e.baseElement.items?.length)return;const n=e.customValueTransformFn(i)||"";n!==this.value&&t.set.call(this,n)}}})}#i(){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,i)=>{t.innerHTML=i.item.outerHTML}}#n(){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.#n(),this.renderItems(),(0,r.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,r.P$)(this,this.#i.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,a.DM)({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,o.bi)(y.cssVarList)}\n\t\t${(0,o.PH)("vaadin-combo-box")}\n\t\t${(0,o.jI)("vaadin-combo-box")}\n\t\t${(0,o.Pd)("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    ${(0,o.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,i)=>{i.r(e),i.d(e,{ComboBoxClass:()=>n.H}),i(7583);var n=i(4049);customElements.define(n.f,n.H)},2549:(t,e,i)=>{i.d(e,{f:()=>s,q:()=>p});var n=i(4978),r=i(3346),o=i(2061),a=i(4567);const s=(0,a.iY)("icon");class l extends((0,r.s)({componentName:s,baseSelector:"slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: auto;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t</style>\n\t\t<slot></slot>\n\t"}get items(){return this.shadowRoot.querySelector("slot").assignedNodes()}#i(){this.items?.length>0?this.shadowRoot.host.style.setProperty("display","inline-block"):this.shadowRoot.host.style.setProperty("display","none"),this.querySelectorAll("*[fill]").forEach((t=>t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)))}init(){(0,a.P$)(this,this.#i.bind(this))}}const p=(0,o.qC)((0,n.yk)({mappings:{fill:{}}}),n.e4,n.Ae)(l)},6417:(t,e,i)=>{i.d(e,{f:()=>l,z:()=>d});var n=i(4978),r=i(4447),o=i(2061),a=i(4567),s=i(4201);const l=(0,a.iY)("text-field"),p=["type"],d=(0,o.qC)((0,n.yk)({mappings:r.Z}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i)}get isExternalInput(){return"true"===this.getAttribute("external-input")}constructor(){if(super(),this.isExternalInput){const t=this.baseElement.querySelector("input");this.inputSlot=document.createElement("slot"),this.focus=()=>{t.focus()},this.inputSlot.setAttribute("name","input"),this.inputSlot.setAttribute("slot","input"),this.baseElement.appendChild(this.inputSlot),this.appendChild(t)}}}))((0,n.DM)({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(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      ${(0,s.Wf)("vaadin-text-field")}\n\t\t\t${(0,s.bi)(d.cssVarList)}\n\t\t\t${(0,s.wm)("vaadin-text-field",d.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},9357:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.z}),i(9789);var n=i(6417);customElements.define(n.f,n.z)},4447:(t,e,i)=>{i.d(e,{Z:()=>v});const{host:n,label:r,placeholder:o,requiredIndicator:a,inputField:s,input:l,helperText:p,errorMessage:d,disabledPlaceholder:u,inputDisabled:c,externalInput:h,externalInputDisabled:b,externalPlaceholder:m,externalDisabledPlaceholder:g}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:{selector:"> input:placeholder-shown"},disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},v={fontSize:[{},n],fontFamily:[r,s,p,d],hostWidth:{...n,property:"width"},hostMinWidth:{...n,property:"min-width"},hostDirection:{...n,property:"direction"},inputBackgroundColor:{...s,property:"background-color"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],errorMessageTextColor:{...d,property:"color"},helperTextColor:{...p,property:"-webkit-text-fill-color"},inputValueTextColor:[{...s,property:"color"},{...c,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...s,property:"border-color"},inputBorderWidth:{...s,property:"border-width"},inputBorderStyle:{...s,property:"border-style"},inputBorderRadius:{...s,property:"border-radius"},inputHeight:{...s,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...h,property:"padding-left"},{...h,property:"padding-right"}],inputOutlineColor:{...s,property:"outline-color"},inputOutlineStyle:{...s,property:"outline-style"},inputOutlineWidth:{...s,property:"outline-width"},inputOutlineOffset:{...s,property:"outline-offset"},inputTextAlign:[{...l,property:"text-align"},{...h,property:"text-align"}],inputPlaceholderColor:[{...o,property:"color"},{...m,property:"color"},{...u,property:"-webkit-text-fill-color"},{...g,property:"-webkit-text-fill-color"}]}},2138:(t,e,i)=>{i.d(e,{f:()=>s,k:()=>p});var n=i(4978),r=i(2061),o=i(4567),a=i(3346);const s=(0,o.iY)("text");class l extends((0,a.s)({componentName:s,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    </style>\n    <slot part="text-wrapper"></slot>\n    '}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,o.P$)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const p=(0,r.qC)((0,n.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.e4,n.Ae)(l)},1876:(t,e,i)=>{i.r(e),i.d(e,{TextClass:()=>n.k});var n=i(2138);customElements.define(n.f,n.k)},6751:(t,e,i)=>{i.r(e);var n=i(3878),r=i(4567);const o=(0,r.iY)("mapping-item"),a=["size","bordered","readonly","full-width","disabled"],s=(0,n.P)({componentName:o,baseSelector:"div"});customElements.define(o,class extends s{static get observedAttributes(){return[].concat(s.observedAttributes||[],a,["separator","options","invalid","disabled"])}get separator(){return this.getAttribute("separator")||"map to"}get value(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{[t]:e}:null}set value(t){if(1!==Object.entries(t).length)return void console.error("descope-mapping item expected expects only one key-value pair in the value but received: ",t);const[e,i]=Object.entries(t)[0];this.valueInput.value=i,this.attributeInput.value=e,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n      <style>\n        .wrapper {\n          display: flex;\n        }\n        .separator {\n          text-align: center;\n          flex-shrink: 0;\n        }\n      </style>\n      <div class="wrapper" part="wrapper">\n        <descope-text-field required="true"></descope-text-field>\n        <div class="separator" part="separator">${this.separator}</div>\n        <descope-combo-box\n          item-label-path="data-name"\n          item-value-path="data-id"\n          required="true"\n        >\n        </descope-combo-box>\n        <descope-button variant="link" mode="primary">\n          <vaadin-icon icon="vaadin:minus"></vaadin-icon>\n        </descope-button>\n      </div>\n\t`,this.valueInput=this.shadowRoot.querySelector("descope-text-field"),this.attributeInput=this.shadowRoot.querySelector("descope-combo-box"),this.inputs=[this.valueInput,this.attributeInput],this.removeButton=this.shadowRoot.querySelector("descope-button"),(0,r.oP)(this,this.valueInput,{includeAttrs:a}),(0,r.oP)(this,this.attributeInput,{includeAttrs:[...a,"options"],mapAttrs:{options:"data"}}),(0,r.oP)(this,this.removeButton,{includeAttrs:["disabled"]})}initRemoveButton(){this.removeButton.addEventListener("click",(()=>this.dispatchEvent(new CustomEvent("mapping-item-removed",{bubbles:!0,composed:!0}))))}init(){super.init?.(),this.initRemoveButton()}getValidity(){const t=this.attributeInput.value,e=this.valueInput.value;return t&&e?{}:{badInput:!0}}reportValidity(){this.inputs.forEach((t=>t.reportValidity()))}focus(){(this.checkValidity()||!this.valueInput.checkValidity()?this.valueInput:this.attributeInput).focus()}handleSeparatorChange(){this.shadowRoot.querySelector(".separator").textContent=this.separator}#r(t){"true"===t&&(this.valueInput.value||(this.valueInput.setAttribute("invalid","true"),this.valueInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)),this.attributeInput.value||(this.attributeInput.setAttribute("invalid","true"),this.attributeInput.setAttribute("error-message",this.defaultErrorMsgValueMissing)))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"separator"===t&&this.handleSeparatorChange(),"invalid"===t&&this.#r(i)}})},7819:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>o});var n=i(3878),r=i(4567);const o=(0,r.iY)("mappings-field-internal"),a=(0,n.P)({componentName:o,baseSelector:"div"}),s=class extends a{#o;static get observedAttributes(){return[].concat(a.observedAttributes||[],["label-value","label-attr","button-label","invalid","readonly","disabled"])}isValidDataType(t){try{return t.every((t=>"object"==typeof t&&!Array.isArray(t)&&1===Object.getOwnPropertyNames(t).length&&"string"==typeof t[Object.keys(t)[0]]&&""!==t[Object.keys(t)[0]].trim()))}catch(t){return!1}}get labelValue(){return this.getAttribute("label-value")||"Value"}get labelAttr(){return this.getAttribute("label-attr")||"Attribute"}get buttonLabel(){return this.getAttribute("button-label")||"Add mapping"}get options(){return this.getAttribute("options")||[]}addNewMappingItem(t){const e=document.createElement("descope-mapping-item");return e.setAttribute("bordered","true"),this.mappingsContainerEle.appendChild(e),(0,r.oP)(this,e,{includeAttrs:["size","full-width","separator","options","disabled"]}),setTimeout((()=>{this.setCustomValidity(""),e.addEventListener("mapping-item-removed",(()=>{e===this.#o&&(this.resetInvalidIndication(),this.#o=void 0),e.remove(),this.setCustomValidity("")})),this.dispatchEvent(new CustomEvent("mapping-item-added",{bubbles:!0,composed:!0})),t&&e.focus()}),0),e}get items(){return Array.from(this.mappingsContainerEle.querySelectorAll("descope-mapping-item"))}get value(){return this.items.reduce(((t,e)=>e.value?[...t,e.value]:t),[])}set value(t){if(!this.isValidDataType(t))return void console.error("received invalid value to set - should be an array of objects with one key-value pair");const e=this.items;if(e.length>t.length)for(let i=t.length;i<e.length;i++)this.mappingsContainerEle.removeChild(e[i]);t.forEach(((t,i)=>{const n=e[i];if(n)n.value=t;else{const e=this.addNewMappingItem(!1);setTimeout((()=>{e.value=t}),0)}}))}constructor(){super(),this.innerHTML='\n      <div class="labels-container" part="labels"></div>\n      <div class="mappings-container"></div>\n      <div class="button-container"></div>\n    ',this.labelsEle=this.querySelector(".labels-container"),this.mappingsContainerEle=this.querySelector(".mappings-container"),this.buttonContainer=this.querySelector(".button-container")}initLabels(){this.labelsEle.innerHTML=`\n      <descope-text variant="body2" part="value-label">${this.labelValue}</descope-text>\n      <descope-text variant="body2" part="attr-label">${this.labelAttr}</descope-text>\n    `}initAddButton(){this.buttonContainer.innerHTML=`\n      <descope-button variant="link" mode="primary" disabled="${this.isDisabled}">\n        <vaadin-icon icon="vaadin:plus"></vaadin-icon>\n        ${this.buttonLabel}\n      </descope-button>\n    `;const t=this.querySelector("descope-button");t.onclick=()=>{this.addNewMappingItem(!0)},(0,r.oP)(this,t,{includeAttrs:["disabled"]})}#a(){this.labelsEle.style.display=this.items.length?"grid":"none"}init(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.#o||this.items[0]||this.querySelector("descope-button")).focus()})),super.init?.(),this.initLabels(),this.initAddButton(),this.addEventListener("input",(()=>{this.mappingsContainerEle.contains(this.#o)&&this.#o?.checkValidity()&&(this.resetInvalidIndication(),this.#o.removeAttribute("invalid"),this.#o=void 0)})),(0,r.P$)(this.mappingsContainerEle,this.#a.bind(this))}resetInvalidIndication(){this.removeAttribute("invalid")}getValidity(){const t=this.items.find((t=>!t.checkValidity()));return t?t.validity:{}}#s(t){t&&(this.#o=this.items.find((t=>!t.checkValidity())),this.#o?.reportValidity(),this.#o?.setAttribute("invalid","true"))}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"label-value"!==t&&"label-attr"!==t||this.initLabels(),"button-label"===t&&this.initAddButton(),"invalid"===t&&this.#s("true"===i),"readonly"===t&&this.toggleAttribute("inert","true"===i)}}},3820:(t,e,i)=>{i.r(e);var n=i(7819);customElements.define(n.f,n.Z)},9227:(t,e,i)=>{i.r(e),i.d(e,{MappingsFieldClass:()=>f}),i(9381),i(7911),i(6594);var n=i(4978),r=i(2138),o=i(2061),a=i(4567),s=i(7819);const l=(0,a.iY)("mappings-field"),{host:p,helperText:d,errorMessage:u,mappingItem:c,labels:h,labelsText:b,valueLabel:m,attrLabel:g,separator:v,labelsContainer:y}={host:{selector:()=>":host"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},mappingItem:{selector:"descope-mapping-item::part(wrapper)"},labels:{selector:'descope-mappings-field-internal [part="labels"] descope-text'},labelsText:{selector:'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)'},valueLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="value-label"]'},attrLabel:{selector:'descope-mappings-field-internal [part="labels"] [part="attr-label"]'},separator:{selector:"descope-mapping-item::part(separator)"},labelsContainer:{selector:'descope-mappings-field-internal [part="labels"]'}},f=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...p,property:"width"},hostDirection:{...p,property:"direction"},fontSize:[{},p,{...v,property:"margin-top"}],fontFamily:[d,u,h],separatorFontSize:{...v,property:"font-size"},labelsFontSize:{...b,property:"font-size"},labelsLineHeight:[{...b,property:"line-height"},{...h,property:"line-height"}],labelTextColor:{...h,property:r.k.cssVarList.textColor},itemMarginBottom:{...c,property:"margin-bottom"},valueLabelMinWidth:{...m,property:"min-width"},attrLabelMinWidth:{...g,property:"min-width"},labelsMarginBottom:{...y,property:"margin-bottom"},separatorWidth:{},removeButtonWidth:{}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",proxyParentValidation:!0}),n.Ae,(t=>class extends t{get defaultValues(){const t=this.getAttribute("default-values");if(t)try{return JSON.parse(t)}catch(t){console.error('could not parse data string from attribute "default-values" -',t.message)}return[]}setDefaultValues(){const t=this.defaultValues;Object.keys(t).length>0&&(this.inputElement.value=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${s.f}\n        tabindex="-1"\n      ></${s.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(s.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","default-values","invalid","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]}),this.setDefaultValues()}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>`\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-mappings-field-internal [part="labels"] {\n        display: none;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"],\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        ${r.k.cssVarList.fontWeight}: 500;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="value-label"] {\n        grid-column: 1 / span 1;\n      }\n\n      descope-mappings-field-internal [part="labels"] [part="attr-label"] {\n        grid-column: 3 / span 1;\n      }\n\n      descope-mapping-item::part(wrapper) {\n        display: grid;\n        grid-template-columns: 1fr var(${f.cssVarList.separatorWidth}) 1fr var(${f.cssVarList.removeButtonWidth});\n      }\n    `,excludeAttrsSync:["tabindex","label-value","label-attr","button-label","options","error-message"],componentName:l}));i(1876),i(2018),i(9357),i(1294),i(3820),i(6751),customElements.define(l,f)},6867:(t,e,i)=>{i.d(e,{Z:()=>s,f:()=>o});var n=i(3878),r=i(4567);const o=(0,r.iY)("saml-group-mappings-internal"),a=(0,n.P)({componentName:o,baseSelector:""}),s=class extends a{static get observedAttributes(){return["invalid"].concat(a.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(t){t.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(t=>{t.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,r.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,r.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,r.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(t){t?.group&&"string"==typeof t.group&&(this.groupInputElement.value=t.group),Array.isArray(t?.mappings)&&(this.mappingsElement.value=t.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#l(t){if(t){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),"invalid"===t&&this.#l("true"===i)}}},4115:(t,e,i)=>{i.r(e);var n=i(6867);customElements.define(n.f,n.Z)},3277:(t,e,i)=>{i.r(e),i.d(e,{SamlGroupMappingsClass:()=>d}),i(9381);var n=i(4978),r=i(2061),o=i(4567),a=i(6867);const s=(0,o.iY)("saml-group-mappings"),{host:l,groupInput:p}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,r.qC)((0,n.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},groupNameInputMarginBottom:{...p,property:"margin-bottom"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),n.Ae,(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${a.f}\n        tabindex="-1"\n      ></${a.f}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,o.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,o.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:s}));i(9357),i(9227),i(4115),customElements.define(s,d)},4201:(t,e,i)=>{i.d(e,{B:()=>d,DY:()=>l,PH:()=>p,Pd:()=>a,TX:()=>r,Wf:()=>c,bi:()=>n,jI:()=>s,jl:()=>o,wm:()=>u});const n=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,s=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${s(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,c=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9288],{4049:(t,e,r)=>{r.d(e,{H:()=>g,f:()=>a});var o=r(2061),n=r(4567),i=r(4201),s=r(4978);const a=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:u,placeholder:p,toggle:c,clearButton:h,label:m,requiredIndicator:b,helperText:y,errorMessage:v}={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,o.qC)((0,s.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[m,p,d,y,v],labelTextColor:[{...m,property:"color"},{...b,property:"color"}],errorMessageTextColor:{...v,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:{...b,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...p,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:[{...u,property:"padding-left"},{...u,property:"padding-right"}],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}}}),s.e4,(0,s.Iw)({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,s.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),s.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:r})=>`<span data-name="${r}" data-id="${e}">${t||r}</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(r){if(!e.baseElement.items?.length)return;const o=e.customValueTransformFn(r)||"";o!==this.value&&t.set.call(this,o)}}})}#r(){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,r)=>{t.innerHTML=r.item.outerHTML}}#o(){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.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,s.DM)({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.bi)(g.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:a,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,r)=>{r.r(e),r.d(e,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},4963:(t,e,r)=>{r.d(e,{Z:()=>m,f:()=>a});var o=r(3878),n=r(4567),i=r(7262),s=r(2485);const a=(0,n.iY)("phone-field-internal"),l=["disabled","size","bordered","invalid","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],u=["phone-input-placeholder","maxlength"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},c=[].concat(l,d,u),h=(0,o.P)({componentName:a,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],c)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.Z.map((t=>(0,s.V)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",r=""]=t.split("-");if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||r}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,r=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&r?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?i.Z.filter((e=>t.includes(e.code))):i.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.V)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,r=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=r})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){if(super.attributeChangedCallback(t,e,r),e!==r){if("default-code"===t&&r)this.handleDefaultCountryCode(r);else if(c.includes(t)){const e=p[t]||t;l.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,r))):d.includes(t)?this.countryCodeInput.setAttribute(e,r):u.includes(t)&&this.phoneNumberInput.setAttribute(e,r)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,r)=>{r.r(e),r(1294),r(9357);var o=r(4963);customElements.define(o.f,o.Z)},2485:(t,e,r)=>{r.d(e,{V:()=>o});const o=({code:t,dialCode:e,name:r})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${r}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${r}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9288],{4049:(t,e,r)=>{r.d(e,{H:()=>g,f:()=>a});var o=r(2061),n=r(4567),i=r(4201),s=r(4978);const a=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:u,placeholder:p,toggle:c,clearButton:h,label:m,requiredIndicator:b,helperText:y,errorMessage:v}={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,o.qC)((0,s.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[m,p,d,y,v],labelTextColor:[{...m,property:"color"},{...b,property:"color"}],errorMessageTextColor:{...v,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:{...b,property:"content"},inputValueTextColor:{...d,property:"color"},inputPlaceholderTextColor:{...p,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:[{...u,property:"padding-left"},{...u,property:"padding-right"}],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}}}),s.e4,(0,s.Iw)({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,s.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),s.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:r})=>`<span data-name="${r}" data-id="${e}">${t||r}</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(r){if(!e.baseElement.items?.length)return;const o=e.customValueTransformFn(r)||"";o!==this.value&&t.set.call(this,o)}}})}#r(){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,r)=>{t.innerHTML=r.item.outerHTML}}#o(){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.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,s.DM)({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.bi)(g.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:a,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,r)=>{r.r(e),r.d(e,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},4963:(t,e,r)=>{r.d(e,{Z:()=>m,f:()=>a});var o=r(3878),n=r(4567),i=r(7262),s=r(2485);const a=(0,n.iY)("phone-field-internal"),l=["disabled","size","bordered","invalid","readonly"],d=["country-input-placeholder","default-code","restrict-countries"],u=["phone-input-placeholder","maxlength","autocomplete","name"],p={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},c=[].concat(l,d,u),h=(0,o.P)({componentName:a,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],c)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.Z.map((t=>(0,s.V)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel" external-input="true"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",r=""]=t.split("-");if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||r}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,r=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&r?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?i.Z.filter((e=>t.includes(e.code))):i.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.V)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,r=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=r})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){if(super.attributeChangedCallback(t,e,r),e!==r){if("default-code"===t&&r)this.handleDefaultCountryCode(r);else if(c.includes(t)){const e=p[t]||t;l.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,r))):d.includes(t)?this.countryCodeInput.setAttribute(e,r):u.includes(t)&&this.phoneNumberInput.setAttribute(e,r)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,r)=>{r.r(e),r(1294),r(9357);var o=r(4963);customElements.define(o.f,o.Z)},2485:(t,e,r)=>{r.d(e,{V:()=>o});const o=({code:t,dialCode:e,name:r})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${r}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${r}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9806,9288],{4049:(t,e,r)=>{r.d(e,{H:()=>f,f:()=>s});var o=r(2061),n=r(4567),i=r(4201),a=r(4978);const s=(0,n.iY)("combo-box"),{host:d,inputField:l,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:m,requiredIndicator:y,helperText:b,errorMessage:v}={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)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:[{},d],fontFamily:[m,u,l,b,v],labelTextColor:[{...m,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...l,property:"height"},inputBackgroundColor:{...l,property:"background-color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...l,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:{...l,property:"outline-color"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineOffset:{...l,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:r})=>`<span data-name="${r}" data-id="${e}">${t||r}</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(r){if(!e.baseElement.items?.length)return;const o=e.customValueTransformFn(r)||"";o!==this.value&&t.set.call(this,o)}}})}#r(){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,r)=>{t.innerHTML=r.item.outerHTML}}#o(){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.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,a.DM)({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.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,r)=>{r.r(e),r.d(e,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},4963:(t,e,r)=>{r.d(e,{Z:()=>m,f:()=>s});var o=r(3878),n=r(4567),i=r(7262),a=r(2485);const s=(0,n.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],l=["country-input-placeholder","default-code","restrict-countries"],p=["phone-input-placeholder","maxlength"],u={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},c=[].concat(d,l,p),h=(0,o.P)({componentName:s,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],c)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.Z.map((t=>(0,a.V)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",r=""]=t.split("-");if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||r}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,r=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&r?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?i.Z.filter((e=>t.includes(e.code))):i.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.V)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,r=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=r})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){if(super.attributeChangedCallback(t,e,r),e!==r){if("default-code"===t&&r)this.handleDefaultCountryCode(r);else if(c.includes(t)){const e=u[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,r))):l.includes(t)?this.countryCodeInput.setAttribute(e,r):p.includes(t)&&this.phoneNumberInput.setAttribute(e,r)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,r)=>{r.r(e),r(1294),r(9357);var o=r(4963);customElements.define(o.f,o.Z)},2485:(t,e,r)=>{r.d(e,{V:()=>o});const o=({code:t,dialCode:e,name:r})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${r}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${r}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`},6581:(t,e,r)=>{r.r(e),r.d(e,{PhoneFieldClass:()=>w}),r(9240),r(1294),r(9357);var o=r(4963),n=r(4567),i=r(2061),a=r(4978),s=r(6417),d=r(4049),l=r(7262),p=r(4201);const u=s.z.cssVarList,c=d.H.cssVarList,h=(0,n.iY)("phone-field"),{host:m,label:y,requiredIndicator:b,inputField:v,countryCodeInput:f,phoneInput:g,separator:x,errorMessage:C,helperText:I}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},w=(0,i.qC)((0,a.yk)({mappings:{fontSize:[m,v,{selector:s.z.componentName,property:s.z.cssVarList.fontSize},{selector:d.H.componentName,property:d.H.cssVarList.fontSize}],fontFamily:[y,C,I,{...f,property:d.H.cssVarList.overlay.fontFamily}],hostWidth:[{...m,property:"width"},{...g,property:"width"},{...f,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...m,property:"direction"},inputBorderStyle:[{...v,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...v,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...v,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:{...v,property:"border-radius"},countryCodeInputWidth:{...f,property:c.hostWidth},countryCodeDropdownWidth:{...f,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...g,property:"width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...g,property:u.inputValueTextColor},{...f,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...g,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return l.Z}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,n.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,p.bi)(w.cssVarList)}\n\t\t\t${(0,p.Pd)("vaadin-text-field")}\n\t\t\t${(0,p.B)("vaadin-text-field")}\n\t\t\t${(0,p.DY)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n\t\t\t}\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\tmin-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,p.Wf)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,w)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9806,9288],{4049:(t,e,r)=>{r.d(e,{H:()=>f,f:()=>s});var o=r(2061),n=r(4567),i=r(4201),a=r(4978);const s=(0,n.iY)("combo-box"),{host:d,inputField:l,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:m,requiredIndicator:y,helperText:b,errorMessage:v}={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)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...d,property:"width"},hostDirection:{...d,property:"direction"},fontSize:[{},d],fontFamily:[m,u,l,b,v],labelTextColor:[{...m,property:"color"},{...y,property:"color"}],errorMessageTextColor:{...v,property:"color"},inputHeight:{...l,property:"height"},inputBackgroundColor:{...l,property:"background-color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},labelRequiredIndicator:{...y,property:"content"},inputValueTextColor:{...l,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:{...l,property:"outline-color"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineOffset:{...l,property:"outline-offset"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(t=>class extends t{#t=({displayName:t,value:e,label:r})=>`<span data-name="${r}" data-id="${e}">${t||r}</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(r){if(!e.baseElement.items?.length)return;const o=e.customValueTransformFn(r)||"";o!==this.value&&t.set.call(this,o)}}})}#r(){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,r)=>{t.innerHTML=r.item.outerHTML}}#o(){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.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}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"]||""}}))((0,a.DM)({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.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(t,e,r)=>{r.r(e),r.d(e,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},4963:(t,e,r)=>{r.d(e,{Z:()=>m,f:()=>s});var o=r(3878),n=r(4567),i=r(7262),a=r(2485);const s=(0,n.iY)("phone-field-internal"),d=["disabled","size","bordered","invalid","readonly"],l=["country-input-placeholder","default-code","restrict-countries"],p=["phone-input-placeholder","maxlength","autocomplete","name"],u={"country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},c=[].concat(d,l,p),h=(0,o.P)({componentName:s,baseSelector:"div"}),m=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],c)}constructor(){super(),this.innerHTML=`\n    <div>\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${i.Z.map((t=>(0,a.V)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel" external-input="true"></descope-text-field>\n    </div>\n    `,this.countryCodeInput=this.querySelector("descope-combo-box"),this.phoneNumberInput=this.querySelector("descope-text-field"),this.inputs=[this.countryCodeInput,this.phoneNumberInput],this.countryCodeInput.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get value(){return this.phoneNumberValue?`${this.countryCodeInput.value}-${this.phoneNumberInput.value}`:""}set value(t){const[e="",r=""]=t.split("-");if(e){const t=this.getCountryByDialCode(e);t&&(this.countryCodeInput.selectedItem=t)}else this.countryCodeInput.selectedItem=void 0;this.phoneNumberInput.value=this.phoneNumberInput.value||r}get phoneNumberValue(){return this.phoneNumberInput.value}get countryCodeValue(){return this.countryCodeInput.shadowRoot.querySelector("input").value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}getValidity(){const t=this.countryCodeInput.value,e=this.phoneNumberInput.value,r=!t||!e,o=this.phoneNumberInput.value?.length&&this.phoneNumberInput.value.length<this.minLength;return this.isRequired&&r?{valueMissing:!0}:o?{tooShort:!0}:e&&!t?{valueMissing:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.initInputs()}getRestrictedCountries(){return this.getAttribute("restrict-countries")?.split(",")||[]}getCountryByDialCode(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-id")===t))}getCountryByCodeId(t){return this.countryCodeInput.items?.find((e=>e.getAttribute("data-country-code")===t))}updateCountryCodeItems(t){const e=t.length?i.Z.filter((e=>t.includes(e.code))):i.Z;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,a.V)(t))).join("")}handleDefaultCountryCode(t){if(!this.countryCodeInput.value){const e=this.getCountryByCodeId(t);e&&setTimeout((()=>{this.countryCodeInput.selectedItem=e}))}}initInputs(){this.phoneNumberInput.addEventListener("input",(t=>{const e=/^\d$/,r=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=r})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,r){if(super.attributeChangedCallback(t,e,r),e!==r){if("default-code"===t&&r)this.handleDefaultCountryCode(r);else if(c.includes(t)){const e=u[t]||t;d.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,r))):l.includes(t)?this.countryCodeInput.setAttribute(e,r):p.includes(t)&&this.phoneNumberInput.setAttribute(e,r)}"restrict-countries"===t&&this.updateCountryCodeItems(this.getRestrictedCountries())}}}},9240:(t,e,r)=>{r.r(e),r(1294),r(9357);var o=r(4963);customElements.define(o.f,o.Z)},2485:(t,e,r)=>{r.d(e,{V:()=>o});const o=({code:t,dialCode:e,name:r})=>`\n\t<div\n\t\tstyle="display:flex; flex-direction: column;"\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${r}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${r}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`},6581:(t,e,r)=>{r.r(e),r.d(e,{PhoneFieldClass:()=>w}),r(9240),r(1294),r(9357);var o=r(4963),n=r(4567),i=r(2061),a=r(4978),s=r(6417),d=r(4049),l=r(7262),p=r(4201);const u=s.z.cssVarList,c=d.H.cssVarList,h=(0,n.iY)("phone-field"),{host:m,label:y,requiredIndicator:b,inputField:v,countryCodeInput:f,phoneInput:g,separator:x,errorMessage:C,helperText:I}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},w=(0,i.qC)((0,a.yk)({mappings:{fontSize:[m,v,{selector:s.z.componentName,property:s.z.cssVarList.fontSize},{selector:d.H.componentName,property:d.H.cssVarList.fontSize}],fontFamily:[y,C,I,{...f,property:d.H.cssVarList.overlay.fontFamily}],hostWidth:[{...m,property:"width"},{...g,property:"width"},{...f,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...m,property:"direction"},inputBorderStyle:[{...v,property:"border-style"},{...x,property:"border-left-style"}],inputBorderWidth:[{...v,property:"border-width"},{...x,property:"border-left-width"}],inputBorderColor:[{...v,property:"border-color"},{...x,property:"border-left-color"}],inputBorderRadius:{...v,property:"border-radius"},countryCodeInputWidth:{...f,property:c.hostWidth},countryCodeDropdownWidth:{...f,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...g,property:"width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...C,property:"color"},inputValueTextColor:[{...g,property:u.inputValueTextColor},{...f,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...g,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...v,property:"outline-style"},inputOutlineColor:{...v,property:"outline-color"},inputOutlineWidth:{...v,property:"outline-width"},inputOutlineOffset:{...v,property:"outline-offset"}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return l.Z}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,n.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,p.bi)(w.cssVarList)}\n\t\t\t${(0,p.Pd)("vaadin-text-field")}\n\t\t\t${(0,p.B)("vaadin-text-field")}\n\t\t\t${(0,p.DY)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n\t\t\t}\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n\t\t\t\tmin-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,p.Wf)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}));customElements.define(h,w)}}]);

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

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4981],{1377:(t,e,n)=>{n.d(e,{Z:()=>d,f:()=>r});var i=n(3878),a=n(4567),s=n(6418);const r=(0,a.iY)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder"],u={"phone-input-placeholder":"placeholder"},o=(0,i.P)({componentName:r,baseSelector:"div"}),d=class extends o{static get observedAttributes(){return[].concat(o.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,s.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}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 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("+-","+");const e=/^[+\d-]+$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=u[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},3067:(t,e,n)=>{n.r(e),n(9357);var i=n(1377);customElements.define(i.f,i.Z)},6418:(t,e,n)=>{n.d(e,{g:()=>a});var i=n(7262);const a=t=>i.Z.find((e=>e.code===t))?.dialCode},3208:(t,e,n)=>{n.d(e,{b:()=>a});var i=n(9229);class a extends i.n{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},422:(t,e,n)=>{n.d(e,{j:()=>a});var i=n(3406);const a=t=>class extends((0,i.L)(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()}}},8005:(t,e,n)=>{n.d(e,{n:()=>c}),n(3553);var i=n(4241),a=n(2807),s=n(2521),r=n(4463),l=n(2743),u=n(6570),o=n(3208),d=n(422),p=n(6729);const h=t=>class extends((0,d.j)(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 o.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.v(this.inputElement,this._labelController))}};(0,u.hC)("vaadin-text-field",l.J,{moduleId:"vaadin-text-field-styles"});class c extends(h((0,u.Tb)((0,s.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4981],{1377:(t,e,n)=>{n.d(e,{Z:()=>d,f:()=>s});var i=n(3878),a=n(4567),r=n(6418);const s=(0,a.iY)("phone-field-internal-input-box"),l=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete"],u={"phone-input-placeholder":"placeholder"},o=(0,i.P)({componentName:s,baseSelector:"div"}),d=class extends o{static get observedAttributes(){return[].concat(o.observedAttributes||[],l)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" external-input="true"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,r.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}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 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("+-","+");const e=/^[+\d-]+$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n&&l.includes(t)){const e=u[t]||t;this.phoneNumberInput.setAttribute(e,n)}}}},3067:(t,e,n)=>{n.r(e),n(9357);var i=n(1377);customElements.define(i.f,i.Z)},6418:(t,e,n)=>{n.d(e,{g:()=>a});var i=n(7262);const a=t=>i.Z.find((e=>e.code===t))?.dialCode},3208:(t,e,n)=>{n.d(e,{b:()=>a});var i=n(9229);class a extends i.n{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},422:(t,e,n)=>{n.d(e,{j:()=>a});var i=n(3406);const a=t=>class extends((0,i.L)(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()}}},8005:(t,e,n)=>{n.d(e,{n:()=>c}),n(3553);var i=n(4241),a=n(2807),r=n(2521),s=n(4463),l=n(2743),u=n(6570),o=n(3208),d=n(422),p=n(6729);const h=t=>class extends((0,d.j)(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 o.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new p.v(this.inputElement,this._labelController))}};(0,u.hC)("vaadin-text-field",l.J,{moduleId:"vaadin-text-field-styles"});class c extends(h((0,u.Tb)((0,r.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -34,4 +34,4 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new r.f(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.M)(c)},8725:(t,e,n)=>{n(1578);var i=n(7205);(0,n(6570).hC)("vaadin-text-field",i.J,{moduleId:"lumo-text-field-styles"}),n(8005)},9789:(t,e,n)=>{n(8725),n(8005)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new s.f(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,a.M)(c)},8725:(t,e,n)=>{n(1578);var i=n(7205);(0,n(6570).hC)("vaadin-text-field",i.J,{moduleId:"lumo-text-field-styles"}),n(8005)},9789:(t,e,n)=>{n(8725),n(8005)}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5119],{4049:(e,t,r)=>{r.d(t,{H:()=>f,f:()=>s});var o=r(2061),n=r(4567),i=r(4201),a=r(4978);const s=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={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)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,d,y,g],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,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"}],overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(e=>class extends e{#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({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.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},1377:(e,t,r)=>{r.d(t,{Z:()=>p,f:()=>a});var o=r(3878),n=r(4567),i=r(6418);const a=(0,n.iY)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder"],l={"phone-input-placeholder":"placeholder"},d=(0,o.P)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],s)}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.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-country-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");const t=/^[+\d-]+$/,r=e.target.value.split("").filter((e=>t.test(e))).join("");e.target.value=r})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),t!==r&&s.includes(e)){const t=l[e]||e;this.phoneNumberInput.setAttribute(t,r)}}}},3067:(e,t,r)=>{r.r(t),r(9357);var o=r(1377);customElements.define(o.f,o.Z)},9423:(e,t,r)=>{r.r(t),r.d(t,{PhoneFieldInputBoxClass:()=>v}),r(3067),r(1294),r(9357);var o=r(1377),n=r(4567),i=r(2061),a=r(4978),s=r(6417),l=r(7262),d=r(4201);const p=s.z.cssVarList,u=(0,n.iY)("phone-input-box-field"),{host:c,label:h,requiredIndicator:b,inputField:m,phoneInput:y,errorMessage:g,helperText:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,i.qC)((0,a.yk)({mappings:{fontSize:[c,m,{selector:s.z.componentName,property:s.z.cssVarList.fontSize}],fontFamily:[h,g,f],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...m,property:"border-style"},inputBorderWidth:{...m,property:"border-width"},inputBorderColor:{...m,property:"border-color"},inputBorderRadius:{...m,property:"border-radius"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...g,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"}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return l.Z}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,n.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder"]})}}))((0,a.DM)({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.bi)(v.cssVarList)}\n    ${(0,d.Pd)("vaadin-text-field")}\n    ${(0,d.B)("vaadin-text-field")}\n    ${(0,d.DY)()}\n\n    vaadin-text-field {\n      width: 100%;\n      height: 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      height: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n      height: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n      ${p.inputBorderWidth}: 0;\n      ${p.inputBorderRadius}: 0;\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    ${(0,d.Wf)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,v)},6418:(e,t,r)=>{r.d(t,{g:()=>n});var o=r(7262);const n=e=>o.Z.find((t=>t.code===e))?.dialCode}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5119],{4049:(e,t,r)=>{r.d(t,{H:()=>f,f:()=>s});var o=r(2061),n=r(4567),i=r(4201),a=r(4978);const s=(0,n.iY)("combo-box"),{host:l,inputField:d,inputElement:p,placeholder:u,toggle:c,clearButton:h,label:b,requiredIndicator:m,helperText:y,errorMessage:g}={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)"}},f=(0,o.qC)((0,a.yk)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:[{},l],fontFamily:[b,u,d,y,g],labelTextColor:[{...b,property:"color"},{...m,property:"color"}],errorMessageTextColor:{...g,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"}],overlayBackground:{property:()=>f.cssVarList.overlay.backgroundColor},overlayTextColor:{property:()=>f.cssVarList.overlay.textColor},overlayBorder:{property:()=>f.cssVarList.overlay.border},overlayFontSize:{property:()=>f.cssVarList.overlay.fontSize},overlayFontFamily:{property:()=>f.cssVarList.overlay.fontFamily},overlayCursor:{property:()=>f.cssVarList.overlay.cursor},overlayItemBoxShadow:{property:()=>f.cssVarList.overlay.itemBoxShadow},overlayItemPaddingInlineStart:{property:()=>f.cssVarList.overlay.itemPaddingInlineStart},overlayItemPaddingInlineEnd:{property:()=>f.cssVarList.overlay.itemPaddingInlineEnd}}}),a.e4,(0,a.Iw)({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.dj)({proxyProps:["selectionStart"],inputEvent:"selected-item-changed"}),a.Ae,(e=>class extends e{#e=({displayName:e,value:t,label:r})=>`<span data-name="${r}" data-id="${t}">${e||r}</span>`;#t;get defaultValue(){return this.getAttribute("default-value")}get renderItem(){return this.#e}set renderItem(e){this.#e=e,this.renderItems()}get data(){if(this.#t)return this.#t;const e=this.getAttribute("data");if(e)try{const t=JSON.parse(e);if(this.isValidDataType(t))return t}catch(e){console.error('could not parse data string from attribute "data" -',e.message)}return[]}set data(e){this.isValidDataType(e)&&(this.#t=e,this.renderItems())}isValidDataType(e){const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t}getItemsTemplate(){return this.data?.reduce?.(((e,t)=>e+(this.renderItem?.(t||{})||"")),"")}renderItems(){const e=this.getItemsTemplate();e&&(this.innerHTML=e)}handleSelectedItem(){const e=this.baseElement.selectedItem?.["data-id"];this.baseElement.selectedItem=void 0,e&&(this.value=e),this.value||this.setDefaultValue()}customValueTransformFn(e){return e}setComboBoxDescriptor(){const e=Object.getOwnPropertyDescriptor(this.inputElement.constructor.prototype,"value"),t=this;Object.defineProperties(this.inputElement,{value:{...e,set(r){if(!t.baseElement.items?.length)return;const o=t.customValueTransformFn(r)||"";o!==this.value&&e.set.call(this,o)}}})}#r(){const e=this.shadowRoot.querySelector(this.baseSelector),t=Array.from(this.children);t.length&&(t.forEach((e=>{Object.defineProperty(e,"data-name",{value:e.getAttribute("data-name"),configurable:!0,writable:!0}),Object.defineProperty(e,"data-id",{value:e.getAttribute("data-id"),configurable:!0,writable:!0})})),e.items=t,setTimeout((()=>{this.handleSelectedItem()}),0)),e.renderer=(e,t,r)=>{e.innerHTML=r.item.outerHTML}}#o(){const e=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");e._attachOverlay=()=>{e.bringToFront()},e._detachOverlay=()=>{},e._enterModalState=()=>{}}init(){super.init?.(),this.getValidity=function(){return!this.value&&this.isRequired?{valueMissing:!0}:{}},this.setComboBoxDescriptor(),this.#o(),this.renderItems(),(0,n.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,n.P$)(this,this.#r.bind(this)),this.setDefaultValue(),this.baseElement.addEventListener("selected-item-changed",(()=>{this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}))}setDefaultValue(){this.value=this.defaultValue}set value(e){if(e){const t=this.baseElement.items?.find((t=>t["data-id"]===e));t&&(this.baseElement.selectedItem=t)}else this.baseElement.selectedItem=void 0}get value(){return this.baseElement.selectedItem?.["data-id"]||""}}))((0,a.DM)({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.bi)(f.cssVarList)}\n\t\t${(0,i.PH)("vaadin-combo-box")}\n\t\t${(0,i.jI)("vaadin-combo-box")}\n\t\t${(0,i.Pd)("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    ${(0,i.Wf)("vaadin-combo-box")}\n\t\t`,excludeAttrsSync:["tabindex","size","data"],componentName:s,includeForwardProps:["items","renderer","selectedItem"]}))},1294:(e,t,r)=>{r.r(t),r.d(t,{ComboBoxClass:()=>o.H}),r(7583);var o=r(4049);customElements.define(o.f,o.H)},1377:(e,t,r)=>{r.d(t,{Z:()=>p,f:()=>a});var o=r(3878),n=r(4567),i=r(6418);const a=(0,n.iY)("phone-field-internal-input-box"),s=["disabled","size","bordered","invalid","readonly","phone-input-placeholder","name","autocomplete"],l={"phone-input-placeholder":"placeholder"},d=(0,o.P)({componentName:a,baseSelector:"div"}),p=class extends d{static get observedAttributes(){return[].concat(d.observedAttributes||[],s)}constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" external-input="true"></descope-text-field>\n      </div>\n      ',this.phoneNumberInput=this.querySelector("descope-text-field")}get defaultCountryCode(){return(0,i.g)(this.getAttribute("default-code"))}get hasDefaultCode(){return!!this.getAttribute("default-code")}get value(){if(!this.phoneNumberValue)return"";if(this.hasDefaultCode){const e=new RegExp(`\\+?${parseInt(this.defaultCountryCode,10)}--?`);return`${this.defaultCountryCode}-${this.phoneNumberInput.value.replace(e,"")}`}return this.phoneNumberInput.value}set value(e){this.phoneNumberInput.value=e}get phoneNumberValue(){return this.phoneNumberInput.value}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}getValidity(){const e=this.value.replace(/\D/g,"");return this.isRequired&&!this.value?{valueMissing:!0}:e.length<this.minLength?{tooShort:!0}:e.length>this.maxLength?{tooLong:!0}:/^\+?\d{1,4}-?(?:\d-?){1,15}$/.test(this.value)?{}:{patternMismatch:!0}}init(){this.addEventListener("focus",(e=>{e.isTrusted&&this.phoneNumberInput.focus()})),super.init?.(),this.initInputs()}getCountryByDialCode(e){return this.countryCodeInput.items?.find((t=>t.getAttribute("data-country-code")===e))}initInputs(){this.phoneNumberInput.addEventListener("input",(e=>{1===e.target.value.length&&"-"===e.target.value&&(e.target.value=""),e.target.value=e.target.value.replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+");const t=/^[+\d-]+$/,r=e.target.value.split("").filter((e=>t.test(e))).join("");e.target.value=r})),this.handleFocusEventsDispatching([this.phoneNumberInput]),this.handleInputEventDispatching()}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),t!==r&&s.includes(e)){const t=l[e]||e;this.phoneNumberInput.setAttribute(t,r)}}}},3067:(e,t,r)=>{r.r(t),r(9357);var o=r(1377);customElements.define(o.f,o.Z)},9423:(e,t,r)=>{r.r(t),r.d(t,{PhoneFieldInputBoxClass:()=>v}),r(3067),r(1294),r(9357);var o=r(1377),n=r(4567),i=r(2061),a=r(4978),s=r(6417),l=r(7262),d=r(4201);const p=s.z.cssVarList,u=(0,n.iY)("phone-input-box-field"),{host:c,label:h,requiredIndicator:b,inputField:m,phoneInput:y,errorMessage:g,helperText:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,i.qC)((0,a.yk)({mappings:{fontSize:[c,m,{selector:s.z.componentName,property:s.z.cssVarList.fontSize}],fontFamily:[h,g,f],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputBorderStyle:{...m,property:"border-style"},inputBorderWidth:{...m,property:"border-width"},inputBorderColor:{...m,property:"border-color"},inputBorderRadius:{...m,property:"border-radius"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...g,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"}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(e=>class extends e{static get CountryCodes(){return l.Z}init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),(0,n.oP)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","invalid","minlength","maxlength","default-code","disabled","phone-input-placeholder"]})}}))((0,a.DM)({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.bi)(v.cssVarList)}\n    ${(0,d.Pd)("vaadin-text-field")}\n    ${(0,d.B)("vaadin-text-field")}\n    ${(0,d.DY)()}\n\n    vaadin-text-field {\n      width: 100%;\n      height: 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      height: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n      height: 100%;\n    }\n    descope-phone-field-internal-input-box .separator {\n      flex: 0;\n      border: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n      ${p.inputBorderWidth}: 0;\n      ${p.inputBorderRadius}: 0;\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    ${(0,d.Wf)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}));customElements.define(u,v)},6418:(e,t,r)=>{r.d(t,{g:()=>n});var o=r(7262);const n=e=>o.Z.find((t=>t.code===e))?.dialCode}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.309",
+  "version": "1.0.311",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -19,7 +19,7 @@
     "test:pw": "playwright test",
     "test:pw:updateSnapshots": "npm run test:pw -- --update-snapshots",
     "test:ui": "playwright test --ui",
-    "test:ui:debug": "PWDEBUG=1 npm run test:pw -- --update-snapshots",
+    "test:ui:debug": "PWDEBUG=1 npm run test:ui",
     "test:ci": "npm run container:build && docker run --rm --network host -v $(pwd):/work/ -w /work/ descope-wcui-playwright-image",
     "test:ci:updateSnapshots": "npm run test:ci -- --update-snapshots",
     "lint": "eslint --fix --max-warnings 0",

package/src/components/descope-avatar/AvatarClass.js

@@ -37,6 +37,8 @@ class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host >
         vaadin-avatar {
           width: 100%;
           height: 100%;
+          margin: 0;
+          border: none
         }
 
         .wrapper {

package/src/components/descope-text-field/TextFieldClass.js

@@ -36,6 +36,31 @@ const customMixin = (superclass) =>
         this.baseElement._setType(newVal);
       }
     }
+
+    // webauthn is not working when the native input element is nested inside multiple shadow roots
+    // so we need to be able move the input outside the shadow root for some cases
+    get isExternalInput() {
+      return this.getAttribute('external-input') === 'true';
+    }
+
+    constructor() {
+      super();
+
+      if (this.isExternalInput) {
+        const origInput = this.baseElement.querySelector('input');
+        this.inputSlot = document.createElement('slot');
+
+        this.focus = () => {
+          origInput.focus();
+        };
+
+        this.inputSlot.setAttribute('name', 'input');
+        this.inputSlot.setAttribute('slot', 'input');
+        this.baseElement.appendChild(this.inputSlot);
+
+        this.appendChild(origInput);
+      }
+    }
   };
 
 export const TextFieldClass = compose(

package/src/components/descope-text-field/textFieldMappings.js

@@ -9,6 +9,10 @@ const {
   errorMessage,
   disabledPlaceholder,
   inputDisabled,
+  externalInput,
+  externalInputDisabled,
+  externalPlaceholder,
+  externalDisabledPlaceholder,
 } = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
@@ -20,6 +24,10 @@ const {
   inputDisabled: { selector: 'input:disabled' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
+  externalInput: { selector: () => '::slotted(input)' },
+  externalInputDisabled: { selector: () => '::slotted(input:disabled)' },
+  externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },
+  externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },
 };
 
 export default {
@@ -45,8 +53,12 @@ export default {
   inputValueTextColor: [
     { ...inputField, property: 'color' },
     { ...inputDisabled, property: '-webkit-text-fill-color' },
+    { ...externalInputDisabled, property: '-webkit-text-fill-color' },
+  ],
+  inputCaretTextColor: [
+    { ...input, property: 'color' },
+    { ...externalInput, property: 'color' },
   ],
-  inputCaretTextColor: { ...input, property: 'color' },
 
   labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
 
@@ -59,6 +71,8 @@ export default {
   inputHorizontalPadding: [
     { ...input, property: 'padding-left' },
     { ...input, property: 'padding-right' },
+    { ...externalInput, property: 'padding-left' },
+    { ...externalInput, property: 'padding-right' },
   ],
 
   inputOutlineColor: { ...inputField, property: 'outline-color' },
@@ -66,10 +80,15 @@ export default {
   inputOutlineWidth: { ...inputField, property: 'outline-width' },
   inputOutlineOffset: { ...inputField, property: 'outline-offset' },
 
-  inputTextAlign: { ...input, property: 'text-align' },
+  inputTextAlign: [
+    { ...input, property: 'text-align' },
+    { ...externalInput, property: 'text-align' },
+  ],
 
   inputPlaceholderColor: [
     { ...placeholder, property: 'color' },
+    { ...externalPlaceholder, property: 'color' },
     { ...disabledPlaceholder, property: '-webkit-text-fill-color' },
+    { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },
   ],
 };

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

@@ -7,7 +7,7 @@ export const componentName = getComponentName('phone-field-internal');
 
 const commonAttrs = ['disabled', 'size', 'bordered', 'invalid', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
-const phoneAttrs = ['phone-input-placeholder', 'maxlength'];
+const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
 const mapAttrs = {
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
@@ -34,7 +34,7 @@ class PhoneFieldInternal extends BaseInputClass {
       ${CountryCodes.map((item) => comboBoxItem(item)).join('')}
       </descope-combo-box>
       <div class="separator"></div>
-      <descope-text-field type="tel"></descope-text-field>
+      <descope-text-field type="tel" external-input="true"></descope-text-field>
     </div>
     `;
 

package/src/components/phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/PhoneFieldInternalInputBox.js

@@ -11,6 +11,8 @@ const observedAttributes = [
   'invalid',
   'readonly',
   'phone-input-placeholder',
+  'name',
+  'autocomplete',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
@@ -28,7 +30,7 @@ class PhoneFieldInternal extends BaseInputClass {
 
     this.innerHTML = `
       <div>
-        <descope-text-field tabindex="1"></descope-text-field>
+        <descope-text-field tabindex="1" external-input="true"></descope-text-field>
       </div>
       `;