@descope/web-components-ui 2.2.5 → 2.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs.js +4 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +9 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js +1 -1
- package/dist/umd/phone-fields-descope-phone-field-index-js.js.map +1 -1
- package/package.json +28 -28
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js +5 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},49157:(t,e,i)=>{i.d(e,{$B:()=>s,lq:()=>o});var n=i(10473);const s=({code:t,dialCode:e,name:i})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${i}"\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>${i}</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`,o=t=>{const e=t||"";let i="",s="";const o=(0,n.l)(e);if(o)o.countryCallingCode&&(i=`+${o.countryCallingCode}`),o.nationalNumber&&(s=o.nationalNumber);else{const[t,n]=e.split("-");i=t||"",s=n||""}return[i,s]}},79275:(t,e,i)=>{i.d(e,{T:()=>l,w:()=>d});var n=i(79365),s=i(6424),o=i(9696),
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878],{21374:(t,e,i)=>{i.r(e),i.d(e,{TextFieldClass:()=>n.w,componentName:()=>n.T}),i(11284),i(37182),i(95260);var n=i(79275);customElements.define(n.T,n.w)},49157:(t,e,i)=>{i.d(e,{$B:()=>s,lq:()=>o});var n=i(10473);const s=({code:t,dialCode:e,name:i})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${i}"\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>${i}</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`,o=t=>{const e=t||"";let i="",s="";const o=(0,n.l)(e);if(o)o.countryCallingCode&&(i=`+${o.countryCallingCode}`),o.nationalNumber&&(s=o.nationalNumber);else{const[t,n]=e.split("-");i=t||"",s=n||""}return[i,s]}},79275:(t,e,i)=>{i.d(e,{T:()=>l,w:()=>d});var n=i(79365),s=i(6424),o=i(9696),r=i(97810),a=i(73551);const l=(0,r.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,n.RF)({mappings:s.A}),n.VO,(0,n.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),n.tQ,t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},i={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,i),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,i){super.attributeChangeCallback?.(t,e,i),"type"===t&&this.baseElement._setType(i),e!==i&&("label-type"===t?"floating"===i?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===i))}})((0,n.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},84015:(t,e,i)=>{i.d(e,{A:()=>C,T:()=>u});var n=i(3393),s=i(97810),o=i(51680),r=i(49157),a=i(10473),l=i(23530);const u=(0,s.xE)("phone-field-internal"),d=["disabled","size","bordered","readonly"],c=["country-input-placeholder","default-code","restrict-countries"],h=["phone-input-placeholder","maxlength","autocomplete","name"],p=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(d,c,h,p),m=(0,n.y)({componentName:u,baseSelector:"div"}),C=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${o.A.map(t=>(0,r.$B)(t)).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,s.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,s.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,r.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,i]=(0,r.lq)(t);this.#e(e),this.#i(i)}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#n()}getValidity(){const t=this.comboBox.value,e=this.textField.value,i=!t||!e,n=e&&e.length>=this.minLength;if(this.isRequired&&i)return{valueMissing:!0};if(this.value){if(!n)return{tooShort:!0};if(this.isStrictValidation&&!this.#s())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i){if("default-code"===t&&i)this.#o(i);else if(y.includes(t)){const e=b[t]||t;d.includes(t)?i?this.inputs.forEach(t=>t.setAttribute(e,i)):this.inputs.forEach(t=>t.removeAttribute(e)):c.includes(t)?this.comboBox.setAttribute(e,i):h.includes(t)&&this.textField.setAttribute(e,i)}p.includes(t)&&this.#r(t,i),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#n(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,i=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=i}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const i=this.#u(`${t}-${this.textField.value}`);e=this.#d(i)}e||(e=this.#c(t)),this.comboBox.selectedItem=e}#i(t){this.isFormatValue&&(t=this.#h(t)),this.textField.value!==t&&(this.textField.value=t)}#h(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#s(){const t=(0,a.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#p(t.country))}#p(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#c(t){return this.comboBox.items?.find(e=>e.getAttribute("data-id")===t)||void 0}#d(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#u(t){if(!t)return;const e=(0,a.l)(t);if(!e?.country)return;const i=this.#d(e.country);return i?.getAttribute("data-country-code")}#a(t){const e=t.length?o.A.filter(e=>t.includes(e.code)):o.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,r.$B)(t)).join("")}#o(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(){if(!this.value)return;const t=this.#u(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#d(t);e&&(this.comboBox.selectedItem=e)}}#r(t,e){const i=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(i,e):"label"===t&&this.textField.setAttribute(i,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132:(t,e,i)=>{i.r(e),i(27092),i(21374);var n=i(84015);customElements.define(n.T,n.A)}}]);
|
|
2
2
|
//# sourceMappingURL=phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map
|
package/dist/umd/phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n 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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem","removeAttribute"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"phone-fields-descope-phone-field-descope-phone-field-internal-index-js.js","mappings":"gPAMAA,eAAeC,OAAO,IAAe,I,4DCF9B,MAGMC,EAAe,EAAGC,OAAMC,WAAUC,KAAMC,KAAc,0BAEtDF,sBACED,KAAQC,KAAYE,8BACZH,uDAPO,CAACA,GAC7B,+DAA+DA,EAAKI,oBAUtDC,CAAeL,gDAEpBG,gDAGAH,yBACAC,mCAKEK,EAAoBC,IAC/B,MAAMC,EAAQD,GAAO,GACrB,IAAIE,EAAc,GACdC,EAAc,GAGlB,MAAMC,GAAS,OAA2BH,GAE1C,GAAIG,EACEA,EAAOC,qBACTH,EAAc,IAAIE,EAAOC,sBAGvBD,EAAOE,iBACTH,EAAcC,EAAOE,oBAElB,CAEL,MAAOV,EAASW,GAASN,EAAMO,MAAM,KACrCN,EAAcN,GAAW,GACzBO,EAAcI,GAAS,EACzB,CAEA,MAAO,CAACL,EAAaC,G,oGChChB,MAAMM,GAAgB,QAAiB,cAExCC,EAAgB,CAAC,OAAQ,aAAc,qBA+EhCC,GAAiB,SAC5B,QAAiB,CACfC,SAAU,MAEZ,MACA,QAAgB,CAAEC,WAAY,CAAC,QAAS,kBAAmBC,iBAAiB,IAC5E,KAnFmBC,GACnB,cAA6BA,EAC3B,6BAAWC,GACT,OAAON,EAAcO,OAAOF,EAAWC,oBAAsB,GAC/D,CAEAE,KAEA,IAAAC,GACEC,MAAMD,QACR,CAEA,qBAAAE,CAAsBC,GACpB,IAAKA,EAEH,YADAC,KAAKL,MAAMM,SAIb,MAAMC,EAAiB,CACrBP,KAAM,gBACNQ,MAAO,OACPC,MAAO,mBAGHC,EAAmB,CACvBV,KAAM,wBACNQ,MAAO,SACPC,MAAO,mBAGTJ,KAAKL,KAAOW,OAAOC,OAAOC,SAASC,cAAc,eAAgB,CAC/DC,KAAM,YACHR,IAGLF,KAAKW,YAAYC,YAAYZ,KAAKL,MAClCK,KAAKL,KAAKkB,iBAAiB,QAAS,KAClCC,UAAUC,UAAUC,UAAUhB,KAAKtB,OACnC4B,OAAOC,OAAOP,KAAKL,KAAMU,GAGzBY,WAAW,KACTX,OAAOC,OAAOP,KAAKL,KAAMO,IACxB,MAEP,CAEA,YAAAgB,GACElB,KAAKmB,OACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAQC,GACzC1B,MAAM2B,0BAA0BH,EAAUC,EAAQC,GAOjC,SAAbF,GACFrB,KAAKW,YAAYc,SAASF,GAGxBD,IAAWC,IACI,eAAbF,EACa,aAAXE,EACFvB,KAAKa,iBAAiB,QAASb,KAAKkB,cAEpClB,KAAK0B,oBAAoB,QAAS1B,KAAKkB,cAEnB,sBAAbG,GACTrB,KAAKF,sBAAiC,SAAXyB,GAGjC,GAG0B,EAS5B,QAAY,CACVI,MAAO,CAAC,SAAU,UAClBC,eAAgB,oBAChBxB,MAAO,IAAM,wGAIOhB,EAAeyC,WAAWC,4BACxC1C,EAAeyC,WAAWE,+cAc5B,QAAwB,gCAC3B,QAAuB3C,EAAeyC,uBACtC,QAAoB,oBAAqBzC,EAAeyC,uBACrD,iGAMJG,iBAAkB,CAAC,WAAY,SAC/B9C,kB,gHCrIG,MAAMA,GAAgB,QAAiB,wBAExC+C,EAAc,CAAC,WAAY,OAAQ,WAAY,YAC/CC,EAAe,CAAC,4BAA6B,eAAgB,sBAC7DC,EAAa,CAAC,0BAA2B,YAAa,eAAgB,QACtEC,EAAiB,CAAC,aAAc,sBAAuB,SACvDC,EAAW,CACf,sBAAuB,QACvB,4BAA6B,cAC7B,0BAA2B,eAGvBC,EAAoB,GAAG5C,OAAOuC,EAAaC,EAAcC,EAAYC,GAErEG,GAAiB,OAAqB,CAAErD,gBAAesD,aAAc,QAyW3E,EAvWA,cAAiCD,EAC/B,6BAAW9C,GACT,MAAO,GAAGC,OAAO6C,EAAe9C,oBAAsB,GAAI6C,EAC5D,CAEA,GAEA,WAAAG,GACE5C,QAEAG,KAAK0C,UAAY,iJAMb,IAAaC,IAAKC,IAAS,QAAaA,IAAOC,KAAK,qJAOxD7C,KAAK8C,SAAW9C,KAAK+C,cAAc,qBACnC/C,KAAKgD,UAAYhD,KAAK+C,cAAc,sBAEpC/C,KAAKiD,OAAS,CAACjD,KAAK8C,SAAU9C,KAAKgD,YAEnC,QAAahD,KAAMA,KAAK8C,SAAU,CAAEI,aAAc,CAAC,iBACnD,QAAalD,KAAMA,KAAKgD,UAAW,CAAEE,aAAc,CAAC,aAAc,cAGlElD,KAAK8C,SAASK,uBAA0B1E,IACtC,MAAO,CAAEN,GAAYM,GAAKQ,QAAQ,MAAQ,GAC1C,OAAOd,EAEX,CAGA,wBAAIiF,GACF,OAAOpD,KAAK8C,SAASO,KACvB,CAGA,oBAAIC,GACF,OAAOtD,KAAK8C,SAASS,WAAWR,cAAc,SAASrE,KACzD,CAGA,uBAAI8E,GACF,OAAOxD,KAAKgD,UAAUO,WAAWR,cAAc,QACjD,CAEA,0BAAIU,GACF,MAAyD,SAAlDzD,KAAK0D,aAAa,2BAC3B,CAEA,eAAIC,GACF,OAAO3D,KAAK0D,aAAa,eAC3B,CAEA,kBAAIE,GACF,OAAO5D,KAAKgD,UAAUY,cACxB,CAEA,aAAIC,GACF,OAAOC,SAAS9D,KAAK0D,aAAa,aAAc,KAAO,CACzD,CAEA,uBAAIK,GACF,OAAO/D,KAAK8C,UAAUkB,cAAcN,aAAa,oBACnD,CAEA,qBAAIO,GACF,MAAMC,EAAOlE,KAAK0D,aAAa,sBAC/B,OAAOQ,GAAMjF,MAAM,KAAKkF,OAAOC,UAAY,EAC7C,CAEA,iBAAIC,GACF,MAA6C,SAAtCrE,KAAK0D,aAAa,eAC3B,CAGA,sBAAIY,GACF,MAAkD,SAA3CtE,KAAK0D,aAAa,oBAC3B,CAEA,SAAIhF,GACF,IAAKsB,KAAK8C,SAASpE,QAAUsB,KAAKgD,UAAUtE,MAC1C,MAAO,GAGT,MAAOC,EAAaC,IAAe,QACjC,GAAGoB,KAAK8C,SAASpE,SAASsB,KAAKgD,UAAUtE,SAG3C,MAAO,GAAGC,GAAeqB,KAAK8C,SAASpE,SAASE,GAAeoB,KAAKgD,UAAUtE,OAChF,CAEA,SAAIA,CAAMD,GACR,MAAOE,EAAaI,IAAkB,QAAiBN,GAEvDuB,MAAK,EAAgBrB,GACrBqB,MAAK,EAAmBjB,EAC1B,CAEA,IAAAa,GACEI,KAAKa,iBAAiB,QAAU0D,IAE1BA,EAAEC,WAAWxE,KAAKiD,OAAO,GAAG9B,UAGlCtB,MAAMD,SAENI,MAAK,GACP,CAEA,WAAAyE,GACE,MAAM9F,EAAcqB,KAAK8C,SAASpE,MAC5BgG,EAAgB1E,KAAKgD,UAAUtE,MAE/BiG,GAAWhG,IAAgB+F,EAC3BE,EAAgBF,GAAiBA,EAAcG,QAAU7E,KAAK6D,UAEpE,GAAI7D,KAAK8E,YAAcH,EACrB,MAAO,CAAEI,cAAc,GAGzB,GAAI/E,KAAKtB,MAAO,CACd,IAAKkG,EACH,MAAO,CAAEI,UAAU,GAGrB,GAAIhF,KAAKsE,qBAAuBtE,MAAK,IACnC,MAAO,CAAEiF,iBAAiB,EAE9B,CAEA,MAAO,CAAC,CACV,CAEA,iBAAAC,IAAqBC,GACnBnF,KAAKgD,UAAUkC,qBAAqBC,EACtC,CAEA,wBAAA/D,CAAyBC,EAAU+D,EAAUC,GAG3C,GAFAxF,MAAMuB,yBAAyBC,EAAU+D,EAAUC,GAE/CD,IAAaC,EAAU,CACzB,GAAiB,iBAAbhE,GAA+BgE,EACjCrF,MAAK,EAA0BqF,QAC1B,GAAI/C,EAAkBgD,SAASjE,GAAW,CAC/C,MAAM6C,EAAO7B,EAAShB,IAAaA,EAE/BY,EAAYqD,SAASjE,GAClBgE,EAGHrF,KAAKiD,OAAOsC,QAASC,GAAUA,EAAMC,aAAavB,EAAMmB,IAFxDrF,KAAKiD,OAAOsC,QAASC,GAAUA,EAAME,gBAAgBxB,IAI9ChC,EAAaoD,SAASjE,GAC/BrB,KAAK8C,SAAS2C,aAAavB,EAAMmB,GACxBlD,EAAWmD,SAASjE,IAC7BrB,KAAKgD,UAAUyC,aAAavB,EAAMmB,EAEtC,CAEIjD,EAAekD,SAASjE,IAC1BrB,MAAK,EAAsBqB,EAAUgE,GAGtB,uBAAbhE,GACFrB,MAAK,EAAqBA,KAAKiE,kBAEnC,CACF,CAEA,KAEEjE,KAAKgD,UAAUnC,iBAAiB,QAAU0D,IACxC,IAAKvE,KAAKyD,uBAAwB,CAChC,MAAMkC,EAAkB,OAClBC,EAAiBrB,EAAEsB,OAAOnH,MAC7BO,MAAM,IACNkF,OAAQ2B,GAASH,EAAgBI,KAAKD,IACtCjD,KAAK,IACR0B,EAAEsB,OAAOnH,MAAQkH,CACnB,IAGF5F,KAAKgG,6BAA6BhG,KAAKiD,QACvCjD,KAAKiG,8BAILjG,KAAKa,iBAAiB,QAASb,MAAK,EAAwBkG,KAAKlG,MACnE,CAEA,GAAgBvB,GACd,IAAKA,GAAOA,IAAQuB,KAAK+D,oBAAqB,OAE9C,IAAIoC,EAEJ,GAAInG,KAAKtB,MAAO,CAEd,MAAMR,EAAO8B,MAAK,EAA6B,GAAGvB,KAAOuB,KAAKgD,UAAUtE,SACxEyH,EAAkBnG,MAAK,EAAoB9B,EAC7C,CAIKiI,IACHA,EAAkBnG,MAAK,EAAsBvB,IAI/CuB,KAAK8C,SAASkB,aAAemC,CAC/B,CAEA,GAAmB1H,GACbuB,KAAKqE,gBACP5F,EAAMuB,MAAK,EAAsBvB,IAG/BuB,KAAKgD,UAAUtE,QAAUD,IAC3BuB,KAAKgD,UAAUtE,MAAQD,EAE3B,CAEA,GAAsBM,EAAiB,IAWrC,OATKiB,MAAK,GAAQA,MAAK,EAAK3B,UAAY2B,KAAK+D,sBAC3C/D,MAAK,EAAO,IAAI,IAAUA,KAAK+D,sBAIjC/D,MAAK,EAAKoG,QAEWpG,MAAK,EAAKwF,MAAMzG,IAEdA,CACzB,CAEA,KACE,MAAMF,GAAS,OAA2BmB,KAAKtB,OAE/C,SACIG,GACAA,EAAOwH,aACPxH,EAAOR,SACP2B,MAAK,EAAkBnB,EAAOR,SAEpC,CAEA,GAAkBM,GAChB,OAAKqB,KAAKiE,kBAAkBY,QAIrB7E,KAAKiE,kBAAkBqB,SAAS3G,EACzC,CAGA,GAAsBR,GACpB,OAAO6B,KAAK8C,SAASO,OAAOiD,KAAMC,GAAMA,EAAE7C,aAAa,aAAevF,SAAaqI,CACrF,CAGA,GAAoB7H,GAClB,OAAOqB,KAAK8C,SAASO,OAAOiD,KAAMC,GAAMA,EAAE7C,aAAa,uBAAyB/E,EAClF,CAEA,GAA6BF,GAC3B,IAAKA,EAAK,OACV,MAAMI,GAAS,OAA2BJ,GAC1C,IAAKI,GAAQR,QAAS,OACtB,MAAMoI,EAAmBzG,MAAK,EAAoBnB,EAAOR,SACzD,OAAOoI,GAAkB/C,aAAa,oBACxC,CAEA,GAAqBO,GACnB,MAAMZ,EAAQY,EAAkBY,OAC5B,IAAaV,OAAQoC,GAAMtC,EAAkBqB,SAASiB,EAAErI,OACxD,IAEJ8B,KAAK+C,cAAc,qBAAqBL,UAAYW,EACjDV,IAAKC,IAAS,QAAaA,IAC3BC,KAAK,GACV,CAEA,GAA0BlE,GACxB,IAAKqB,KAAK8C,SAASpE,MAAO,CACxB,MAAMyH,EAAkBnG,MAAK,EAAoBrB,GAI7CwH,GACFlF,WAAW,KACTjB,KAAK8C,SAASkB,aAAemC,GAGnC,CACF,CAEA,KACE,IAAKnG,KAAKtB,MAAO,OAEjB,MAAML,EAAU2B,MAAK,EAA6BA,KAAKtB,OAEvD,GAAKL,GAGD2B,KAAK+D,sBAAwB1F,EAAS,CACxC,MAAMoI,EAAmBzG,MAAK,EAAoB3B,GAE9CoI,IACFzG,KAAK8C,SAASkB,aAAeyC,EAEjC,CACF,CAEA,GAAsBpF,EAAUgE,GAE9B,MAAMnB,EAAO7B,EAAShB,IAAaA,EAElB,eAAbA,EACFrB,MAAK,EAAuBqF,GAIe,aAApCrF,KAAK0D,aAAa,gBACR,wBAAbrC,EACFrB,KAAK8C,SAAS2C,aAAavB,EAAMmB,GACX,UAAbhE,GACTrB,KAAKgD,UAAUyC,aAAavB,EAAMmB,GAGxC,CAEA,GAAuBA,GACJ,aAAbA,GAEFrF,KAAK8C,SAAS2C,aAAa,QAASzF,KAAK0D,aAAa,wBAA0B,IAChF1D,KAAK8C,SAAS2C,aACZ,cACAzF,KAAK0D,aAAa,8BAAgC,IAEpD1D,KAAKgD,UAAUyC,aAAa,QAASzF,KAAK0D,aAAa,UAAY,IACnE1D,KAAKgD,UAAUyC,aACb,cACAzF,KAAK0D,aAAa,4BAA8B,KAIlD1D,KAAKiD,OAAOsC,QAASC,GAAUA,EAAME,gBAAgB,SAEzD,E,0DCrXF3H,eAAeC,OAAO,IAAe,I","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n 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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\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>${n}</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`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:w,helperText:A}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},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)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map(t=>t.getAttribute("data-country-code"))}})((0,s.tz)({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,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\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(label) {\n margin-left: 0;\n margin-right: 0;\n }\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 position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\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\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-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${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n }\n\n :host([label-type="floating"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(10473),l=n(23530);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map(t=>(0,s.$B)(t)).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach(t=>t.setAttribute(e,n)):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=n}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,a.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find(e=>e.getAttribute("data-id")===t)||void 0}#u(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#d(t){if(!t)return;const e=(0,a.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter(e=>t.includes(e.code)):r.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,s.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\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>${n}</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`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:v,separator:C,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},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)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...v,property:"width"},horizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...A,property:"color"},errorMessageIcon:{...A,property:"background-image"},errorMessageIconSize:{...A,property:"background-size"},errorMessageIconPadding:{...A,property:"padding-inline-start"},errorMessageIconRepeat:{...A,property:"background-repeat"},errorMessageIconPosition:{...A,property:"background-position"},errorMessageFontSize:{...A,property:"font-size"},inputValueTextColor:[{...v,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:p.valueInputMarginBottom}],marginInlineStart:[{...v,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map(t=>t.getAttribute("data-country-code"))}})((0,s.tz)({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,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\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(label) {\n margin-left: 0;\n margin-right: 0;\n }\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 position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\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\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-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${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n }\n\n :host([label-type="floating"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(10473),l=n(23530);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n <div class="wrapper">\n <descope-combo-box\n item-label-path="data-name"\n item-value-path="data-id"\n >\n ${r.A.map(t=>(0,s.$B)(t)).join("")}\n </descope-combo-box>\n <div class="separator"></div>\n <descope-text-field type="tel"></descope-text-field>\n </div>\n `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.inputs[1].focus()}),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter(t=>e.test(t)).join("");t.target.value=n}}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new l.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,a.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find(e=>e.getAttribute("data-id")===t)||void 0}#u(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#d(t){if(!t)return;const e=(0,a.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter(e=>t.includes(e.code)):r.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,s.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach(t=>t.removeAttribute("label"))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
|
|
2
2
|
//# sourceMappingURL=phone-fields-descope-phone-field-index-js.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n 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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n 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${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\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(label) {\n margin-left: 0;\n margin-right: 0;\n }\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 position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\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\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem","removeAttribute"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val || '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country || '';\n phoneNumber = phone || '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n 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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n 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${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\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(label) {\n margin-left: 0;\n margin-right: 0;\n }\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 position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\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\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes || [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') || [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) || 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) || [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value || !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode || this.comboBox.value}-${phoneNumber || this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode || !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] || attrName;\n\n if (commonAttrs.includes(attrName)) {\n if (!newValue) {\n this.inputs.forEach((input) => input.removeAttribute(attr));\n } else {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n }\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val || val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt || this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal || nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) || undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] || attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') || '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') || ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') || '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') || ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@descope/web-components-ui",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"webpack": "^5.79.0",
|
|
51
51
|
"webpack-cli": "^6.0.0",
|
|
52
52
|
"webpack-dev-server": "^5.0.0",
|
|
53
|
-
"rollup-replace-plugin": "2.2.
|
|
54
|
-
"test-drivers": "2.2.
|
|
55
|
-
"webpack-extract-font-loader": "2.2.
|
|
56
|
-
"webpack-replace-plugin": "2.2.
|
|
53
|
+
"rollup-replace-plugin": "2.2.7",
|
|
54
|
+
"test-drivers": "2.2.7",
|
|
55
|
+
"webpack-extract-font-loader": "2.2.7",
|
|
56
|
+
"webpack-replace-plugin": "2.2.7"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@vaadin/checkbox": "24.3.4",
|
|
@@ -77,29 +77,29 @@
|
|
|
77
77
|
"libphonenumber-js": "^1.11.12",
|
|
78
78
|
"lodash.debounce": "4.0.8",
|
|
79
79
|
"lodash.merge": "4.6.2",
|
|
80
|
-
"@descope-ui/common": "2.2.
|
|
81
|
-
"@descope-ui/descope-address-field": "2.2.
|
|
82
|
-
"@descope-ui/descope-apps-list": "2.2.
|
|
83
|
-
"@descope-ui/descope-autocomplete-field": "2.2.
|
|
84
|
-
"@descope-ui/descope-avatar": "2.2.
|
|
85
|
-
"@descope-ui/descope-badge": "2.2.
|
|
86
|
-
"@descope-ui/descope-button": "2.2.
|
|
87
|
-
"@descope-ui/descope-collapsible-container": "2.2.
|
|
88
|
-
"@descope-ui/descope-combo-box": "2.2.
|
|
89
|
-
"@descope-ui/descope-enriched-text": "2.2.
|
|
90
|
-
"@descope-ui/descope-icon": "2.2.
|
|
91
|
-
"@descope-ui/descope-image": "2.2.
|
|
92
|
-
"@descope-ui/descope-link": "2.2.
|
|
93
|
-
"@descope-ui/descope-list": "2.2.
|
|
94
|
-
"@descope-ui/descope-list-item": "2.2.
|
|
95
|
-
"@descope-ui/descope-outbound-app-button": "2.2.
|
|
96
|
-
"@descope-ui/descope-outbound-apps": "2.2.
|
|
97
|
-
"@descope-ui/descope-password-strength": "2.2.
|
|
98
|
-
"@descope-ui/descope-recovery-codes": "2.2.
|
|
99
|
-
"@descope-ui/descope-text": "2.2.
|
|
100
|
-
"@descope-ui/descope-timer": "2.2.
|
|
101
|
-
"@descope-ui/descope-timer-button": "2.2.
|
|
102
|
-
"@descope-ui/descope-trusted-devices": "2.2.
|
|
80
|
+
"@descope-ui/common": "2.2.7",
|
|
81
|
+
"@descope-ui/descope-address-field": "2.2.7",
|
|
82
|
+
"@descope-ui/descope-apps-list": "2.2.7",
|
|
83
|
+
"@descope-ui/descope-autocomplete-field": "2.2.7",
|
|
84
|
+
"@descope-ui/descope-avatar": "2.2.7",
|
|
85
|
+
"@descope-ui/descope-badge": "2.2.7",
|
|
86
|
+
"@descope-ui/descope-button": "2.2.7",
|
|
87
|
+
"@descope-ui/descope-collapsible-container": "2.2.7",
|
|
88
|
+
"@descope-ui/descope-combo-box": "2.2.7",
|
|
89
|
+
"@descope-ui/descope-enriched-text": "2.2.7",
|
|
90
|
+
"@descope-ui/descope-icon": "2.2.7",
|
|
91
|
+
"@descope-ui/descope-image": "2.2.7",
|
|
92
|
+
"@descope-ui/descope-link": "2.2.7",
|
|
93
|
+
"@descope-ui/descope-list": "2.2.7",
|
|
94
|
+
"@descope-ui/descope-list-item": "2.2.7",
|
|
95
|
+
"@descope-ui/descope-outbound-app-button": "2.2.7",
|
|
96
|
+
"@descope-ui/descope-outbound-apps": "2.2.7",
|
|
97
|
+
"@descope-ui/descope-password-strength": "2.2.7",
|
|
98
|
+
"@descope-ui/descope-recovery-codes": "2.2.7",
|
|
99
|
+
"@descope-ui/descope-text": "2.2.7",
|
|
100
|
+
"@descope-ui/descope-timer": "2.2.7",
|
|
101
|
+
"@descope-ui/descope-timer-button": "2.2.7",
|
|
102
|
+
"@descope-ui/descope-trusted-devices": "2.2.7"
|
|
103
103
|
},
|
|
104
104
|
"overrides": {
|
|
105
105
|
"@vaadin/avatar": "24.3.4",
|