npm - @descope/web-components-ui - Versions diffs - 3.3.0 → 3.3.1 - Mend

@descope/web-components-ui 3.3.0 → 3.3.1

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.

Files changed (23) hide show

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

	@@ -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/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.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/helpers.js"],"sourcesContent":["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 '@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 { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\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 if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n (c) => c.code\n );\n\n // Check if the currently selected country's data-country-code is in that set\n const currentSelectedCountryCode = this.selectedCountryCode;\n if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n const matchingItem = this.comboBox.items?.find((c) =>\n matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n );\n if (matchingItem) {\n this.comboBox.selectedItem = matchingItem;\n }\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\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 && !this.selectedCountryCode) {\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\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 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 country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\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.#getCountryItemByCodeId(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 #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 { 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"],"names":["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","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
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/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.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/helpers.js"],"sourcesContent":["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 '@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 { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\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 = [\n 'phone-input-placeholder',\n 'maxlength',\n 'autocomplete',\n 'name',\n 'phone-input-type',\n];\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 'phone-input-type': 'type',\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, {\n includeAttrs: ['label-type', 'required', 'phone-input-type'],\n mapAttrs: { 'phone-input-type': 'type' },\n });\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 if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n (c) => c.code\n );\n\n // Check if the currently selected country's data-country-code is in that set\n const currentSelectedCountryCode = this.selectedCountryCode;\n if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n const matchingItem = this.comboBox.items?.find((c) =>\n matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n );\n if (matchingItem) {\n this.comboBox.selectedItem = matchingItem;\n }\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\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 && !this.selectedCountryCode) {\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\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 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 country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\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.#getCountryItemByCodeId(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 #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 { 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"],"names":["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","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","innerHTML","map","item","join","comboBox","querySelector","textField","inputs","includeAttrs","customValueTransformFn","val","dialCode","split","countryCodeInputData","items","countryCodeValue","shadowRoot","phoneNumberInputEle","allowAlphanumericInput","getAttribute","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}

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

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{79275(t,e,n){n.d(e,{T:()=>a,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),l=n(97810),s=n(73551);const a=(0,l.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,s.$J)("vaadin-text-field")}\n\t\t\t${(0,s.cy)(p.cssVarList)}\n\t\t\t${(0,s.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,s.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:a}))},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)},81808(t,e,n){n.d(e,{NF:()=>I,TQ:()=>h});var i=n(86365),o=n(84015),r=n(97810),l=n(9696),s=n(79365),a=n(79275),d=n(51680),p=n(73551);const u=a.w.cssVarList,c=i.C.cssVarList,h=(0,r.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:f,internalAfter:g,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)"}},I=(0,l.Zz)((0,s.RF)({mappings:{fontSize:[b,f,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:i.C.componentName,property:i.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:i.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...g,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...g,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...g,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...f,property:"border-radius"},{...g,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:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...f,property:"outline-style"},inputOutlineColor:{...f,property:"outline-color"},inputOutlineWidth:{...f,property:"outline-width"},inputOutlineOffset:{...f,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.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<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.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(${I.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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n      }\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,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>f,T:()=>d});var i=n(10473),o=n(23530),r=n(3393),l=n(97810),s=n(51680),a=n(49157);const d=(0,l.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["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(p,u,c,h),m=(0,r.y)({componentName:d,baseSelector:"div"}),f=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      ${s.A.map(t=>(0,a.$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,l.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,l.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(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const o=(0,i.l)(t);o?.countryCallingCode&&(e=`+${o.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const o=s.A.filter(t=>t.dialCode===e).map(t=>t.code),r=this.selectedCountryCode;if(!o.includes(r)){const t=this.comboBox.items?.find(t=>o.includes(t.getAttribute("data-country-code")));t&&(this.comboBox.selectedItem=t)}this.isFormatValue?this.textField.value=this.#n(n):this.textField.value=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.selectedCountryCode)this.#r(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#l(t,n),"restrict-countries"===t&&this.#s(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()}#n(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new o.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,i.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#a(t.country))}#a(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#d(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#s(t){const e=t.length?s.A.filter(e=>t.includes(e.code)):s.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#l(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(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)},49157(t,e,n){n.d(e,{$B:()=>i});const i=({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`},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)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{79275(t,e,n){n.d(e,{T:()=>a,w:()=>p});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),l=n(73551);const a=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],p=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout(()=>{Object.assign(this.icon,e)},5e3)})}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}})((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${p.cssVarList.inputOutlineWidth}) + var(${p.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(p.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",p.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:a}))},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)},81808(t,e,n){n.d(e,{NF:()=>I,TQ:()=>h});var i=n(86365),o=n(84015),r=n(97810),s=n(9696),l=n(79365),a=n(79275),d=n(51680),p=n(73551);const u=a.w.cssVarList,c=i.C.cssVarList,h=(0,r.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:f,internalAfter:g,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)"}},I=(0,s.Zz)((0,l.RF)({mappings:{fontSize:[b,f,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:i.C.componentName,property:i.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:i.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...v,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...g,property:"border-style"},{...C,property:"border-left-style"}],inputBorderWidth:[{...g,property:"border-width"},{...C,property:"border-left-width"}],inputBorderColor:[{...g,property:"border-color"},{...C,property:"border-left-color"}],inputBorderRadius:[{...f,property:"border-radius"},{...g,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:u.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...v,property:u.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...f,property:"outline-style"},inputOutlineColor:{...f,property:"outline-color"},inputOutlineWidth:{...f,property:"outline-width"},inputOutlineOffset:{...f,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...v,property:u.valueInputMarginBottom}],marginInlineStart:[{...v,property:u.marginInlineStart},{...x,property:c.marginInlineStart}]}}),l.VO,l.Yg,(0,l.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<${o.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.T),(0,r.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","phone-input-type"]})}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,l.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,p.cy)(I.cssVarList)}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n\t\t\t${(0,p.kG)("vaadin-text-field")}\n\t\t\t${(0,p.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(${I.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${u.inputOutlineWidth}: 0;\n\t\t\t\t${u.inputOutlineOffset}: 0;\n\t\t\t\t${u.inputBorderWidth}: 0;\n\t\t\t\t${u.inputBorderRadius}: 0;\n      }\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,p.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:h}))},84015(t,e,n){n.d(e,{A:()=>f,T:()=>d});var i=n(10473),o=n(23530),r=n(3393),s=n(97810),l=n(51680),a=n(49157);const d=(0,s.xE)("phone-field-internal"),p=["disabled","size","bordered","readonly"],u=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name","phone-input-type"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder","phone-input-type":"type"},y=[].concat(p,u,c,h),m=(0,r.y)({componentName:d,baseSelector:"div"}),f=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      ${l.A.map(t=>(0,a.$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","phone-input-type"],mapAttrs:{"phone-input-type":"type"}}),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(){return this.comboBox.value&&this.textField.value?this.allowAlphanumericInput?`${this.comboBox.value}-${this.textField.value}`:`${this.comboBox.value}-${this.textField.value.replace(/\D+/g,"")}`:""}#e(){this.comboBox.selectedItem=void 0,this.textField.value=""}set value(t){if(!t||!/\d/.test(t))return void this.#e();t.startsWith("+")||(t=`+${t}`);let e="",n="";if(t.includes("-")){const i=t.indexOf("-");e=t.slice(0,i),n=t.slice(i+1).replace(/\D+/g,"")}else{const o=(0,i.l)(t);o?.countryCallingCode&&(e=`+${o.countryCallingCode}`,n=t.slice(e.length).replace(/\D+/g,""))}if(!/\d/.test(e))return void this.#e();const o=l.A.filter(t=>t.dialCode===e).map(t=>t.code),r=this.selectedCountryCode;if(!o.includes(r)){const t=this.comboBox.items?.find(t=>o.includes(t.getAttribute("data-country-code")));t&&(this.comboBox.selectedItem=t)}this.isFormatValue?this.textField.value=this.#n(n):this.textField.value=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.selectedCountryCode)this.#r(n);else if(y.includes(t)){const e=b[t]||t;p.includes(t)?n?this.inputs.forEach(t=>t.setAttribute(e,n)):this.inputs.forEach(t=>t.removeAttribute(e)):u.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.#l(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()}#n(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new o.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,i.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#a(t.country))}#a(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#d(t){return this.comboBox.items?.find(e=>e.getAttribute("data-country-code")===t)}#l(t){const e=t.length?l.A.filter(e=>t.includes(e.code)):l.A;this.querySelector("descope-combo-box").innerHTML=e.map(t=>(0,a.$B)(t)).join("")}#r(t){if(!this.comboBox.value){const e=this.#d(t);e&&setTimeout(()=>{this.comboBox.selectedItem=e})}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#p(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#p(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)},49157(t,e,n){n.d(e,{$B:()=>i});const i=({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`},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)}}]);
 //# sourceMappingURL=phone-fields-descope-phone-field-index-js.js.map

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

	@@ -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/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.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/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["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 '@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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { 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 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 { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\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 if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n (c) => c.code\n );\n\n // Check if the currently selected country's data-country-code is in that set\n const currentSelectedCountryCode = this.selectedCountryCode;\n if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n const matchingItem = this.comboBox.items?.find((c) =>\n matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n );\n if (matchingItem) {\n this.comboBox.selectedItem = matchingItem;\n }\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\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 && !this.selectedCountryCode) {\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\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 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 country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\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.#getCountryItemByCodeId(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 #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 { 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 './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":["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","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","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","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}
1	+ {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"6NAiBO,MAAMA,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,KAAKiB,OACnCX,OAAOC,OAAOP,KAAKL,KAAMU,GAGzBa,WAAW,KACTZ,OAAOC,OAAOP,KAAKL,KAAMO,IACxB,MAEP,CAEA,YAAAiB,GACEnB,KAAKoB,OACP,CAEA,wBAAAC,CAAyBC,EAAUC,EAAQC,GACzC3B,MAAM4B,0BAA0BH,EAAUC,EAAQC,GAOjC,SAAbF,GACFtB,KAAKW,YAAYe,SAASF,GAGxBD,IAAWC,IACI,eAAbF,EACa,aAAXE,EACFxB,KAAKa,iBAAiB,QAASb,KAAKmB,cAEpCnB,KAAK2B,oBAAoB,QAAS3B,KAAKmB,cAEnB,sBAAbG,GACTtB,KAAKF,sBAAiC,SAAX0B,GAGjC,GAG0B,EAS5B,QAAY,CACVI,MAAO,CAAC,SAAU,UAClBC,eAAgB,oBAChBzB,MAAO,IAAM,wGAIOhB,EAAe0C,WAAWC,4BACxC3C,EAAe0C,WAAWE,+cAc5B,QAAwB,gCAC3B,QAAuB5C,EAAe0C,uBACtC,QAAoB,oBAAqB1C,EAAe0C,uBACrD,iGAMJG,iBAAkB,CAAC,WAAY,SAC/B/C,kB,sHCrIJgD,eAAeC,OAAO,IAAe,I,qICerC,MAAMC,EAAW,IAAeN,WAC1BO,EAAY,EAAAC,EAAcR,WAEnB5C,GAAgB,QAAiB,gBAkExC,KACJqD,EAAI,MACJC,EAAK,kBACLC,EAAiB,WACjBC,EAAU,cACVC,EAAa,iBACbC,EAAgB,WAChBC,EAAU,UACVC,EAAS,aACTC,EAAY,WACZC,GACE,CACFT,KAAM,CAAEU,SAAU,IAAM,SACxBT,MAAO,CAAES,SAAU,iBACnBR,kBAAmB,CAAEQ,SAAU,+CAC/BP,WAAY,CAAEO,SAAU,uBACxBN,cAAe,CAAEM,SAAU,uCAC3BJ,WAAY,CAAEI,SAAU,IAAM,sBAC9BL,iBAAkB,CAAEK,SAAU,IAAM,qBACpCH,UAAW,CAAEG,SAAU,2CACvBD,WAAY,CAAEC,SAAU,uBACxBF,aAAc,CAAEE,SAAU,0BAGfC,GAAkB,SAC7B,QAAiB,CACf7D,SAAU,CACR8D,SAAU,CACRZ,EACAG,EACA,CACEO,SAAU,IAAe/D,cACzBkE,SAAU,IAAetB,WAAWqB,UAEtC,CACEF,SAAU,EAAAX,EAAcpD,cACxBkE,SAAU,EAAAd,EAAcR,WAAWqB,WAGvCE,WAAY,CACVb,EACAO,EACAC,EACA,IACKJ,EACHQ,SAAU,EAAAd,EAAcR,WAAWwB,QAAQD,aAG/CE,UAAW,CACT,IAAKhB,EAAMa,SAAU,SACrB,IAAKP,EAAYO,SAAU,SAC3B,IAAKR,EAAkBQ,SAAU,qCAEnCI,cAAe,IAAKjB,EAAMa,SAAU,aAEpCK,iBAAkB,CAChB,IAAKd,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BM,iBAAkB,CAChB,IAAKf,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BO,iBAAkB,CAChB,IAAKhB,EAAeS,SAAU,gBAC9B,IAAKN,EAAWM,SAAU,sBAE5BQ,kBAAmB,CACjB,IAAKlB,EAAYU,SAAU,iBAC3B,IAAKT,EAAeS,SAAU,kBAGhCS,sBAAuB,IAAKjB,EAAkBQ,SAAUf,EAAUkB,WAClEO,yBAA0B,IACrBlB,EACHQ,SAAU,oCAEZW,gBAAiB,IAAKlB,EAAYO,SAAU,SAE5CY,kBAAmB,CACjB,IAAKnB,EAAYO,SAAU,gBAC3B,IAAKP,EAAYO,SAAU,iBAC3B,IAAKR,EAAkBQ,SAAU,gBACjC,IAAKR,EAAkBQ,SAAU,kBAGnCa,eAAgB,CACd,IAAKzB,EAAOY,SAAU,SACtB,IAAKZ,EAAOY,SAAU,2BACtB,IAAKX,EAAmBW,SAAU,UAEpCc,uBAAwB,IAAKzB,EAAmBW,SAAU,WAE1De,sBAAuB,IAAKpB,EAAcK,SAAU,SACpDgB,iBAAkB,IAAKrB,EAAcK,SAAU,oBAC/CiB,qBAAsB,IAAKtB,EAAcK,SAAU,mBACnDkB,wBAAyB,IAAKvB,EAAcK,SAAU,wBACtDmB,uBAAwB,IAAKxB,EAAcK,SAAU,qBACrDoB,yBAA0B,IAAKzB,EAAcK,SAAU,uBACvDqB,qBAAsB,IAAK1B,EAAcK,SAAU,aAEnDsB,oBAAqB,CACnB,IAAK7B,EAAYO,SAAUhB,EAASsC,qBACpC,IAAK9B,EAAkBQ,SAAUf,EAAUqC,sBAG7CC,0BAA2B,IAAK9B,EAAYO,SAAUhB,EAASwC,uBAE/DC,2BAA4B,CAC1B5B,SAAU,oBACVG,SAAUf,EAAUwC,4BAGtBC,kBAAmB,IAAKpC,EAAYU,SAAU,iBAC9C2B,kBAAmB,IAAKrC,EAAYU,SAAU,iBAC9CrB,kBAAmB,IAAKW,EAAYU,SAAU,iBAC9CpB,mBAAoB,IAAKU,EAAYU,SAAU,kBAE/C4B,iBAAkB,CAAC,IAAKpC,EAAkBQ,SAAUf,EAAU2C,mBAC9DC,uBAAwB,CAAC,IAAKpC,EAAYO,SAAUhB,EAAS6C,yBAC7DC,kBAAmB,CACjB,IAAKrC,EAAYO,SAAUhB,EAAS8C,mBACpC,IAAKtC,EAAkBQ,SAAUf,EAAU6C,uBAIjD,KACA,MACA,QAAgB,CAAE5F,WAAY,CAAC,QAAS,oBAhMrBE,GACnB,cAAmCA,EACjC,uBAAW2F,GACT,OAAO,GACT,CAEA,IAAAvF,GACEC,MAAMD,SAEN,MAAMwF,EAAW5E,SAASC,cAAc,YAExC2E,EAASC,UAAY,cACpB,oEAGE,mBAGHrF,KAAKW,YAAYC,YAAYwE,EAASE,QAAQC,WAAU,IAExDvF,KAAKwF,aAAexF,KAAKyF,WAAWC,cAAc,MAElD,QAAa1F,KAAKyF,WAAWlD,KAAMvC,KAAKwF,aAAc,CACpDG,aAAc,CACZ,OACA,WACA,YACA,YACA,eACA,4BACA,0BACA,WACA,qBACA,sBACA,WACA,QACA,aACA,2BACA,eACA,oBACA,qBAGN,CAEA,oBAAIC,GACF,OAAO5F,KAAKwF,cAAcK,gBAC5B,CAEA,uBAAIC,GACF,OAAO9F,KAAKwF,cAAcM,mBAC5B,CAEA,wBAAIC,GACF,OAAO/F,KAAKwF,cAAcO,oBAC5B,CAEA,gBAAIC,GACF,OAAOC,MAAMC,KAAKlG,KAAKwF,aAAaO,sBAAsBI,IAAKC,GAC7DA,EAAIC,aAAa,qBAErB,GA2B2B,EA2G7B,QAAY,CACVzE,MAAO,GACPC,eAAgB,oBAChBzB,MAAO,IAAM,wJAOZ,QAAuB8C,EAAgBpB,uBACvC,QAAiB,gCACjB,QAAsC,gCACtC,mhCA0C8BoB,EAAgBpB,WAAW4B,oWAexDrB,EAAUN,kCACVM,EAAUL,mCACVK,EAAUqB,iCACVrB,EAAUuB,8FAIVxB,EAASL,kCACTK,EAASJ,mCACTI,EAASsB,iCACTtB,EAASwB,mfAgBP,QAAwB,6BAE5B3B,iBAAkB,CAAC,WAAY,SAC/B/C,kB,6GC1TG,MAAMA,GAAgB,QAAiB,wBAExCoH,EAAc,CAAC,WAAY,OAAQ,WAAY,YAC/CC,EAAe,CAAC,4BAA6B,eAAgB,sBAC7DC,EAAa,CACjB,0BACA,YACA,eACA,OACA,oBAEIC,EAAiB,CAAC,aAAc,sBAAuB,SACvDC,EAAW,CACf,sBAAuB,QACvB,4BAA6B,cAC7B,0BAA2B,cAC3B,mBAAoB,QAGhBC,EAAoB,GAAGjH,OAAO4G,EAAaC,EAAcC,EAAYC,GAErEG,GAAiB,OAAqB,CAAE1H,gBAAe2H,aAAc,QAqW3E,EAnWA,cAAiCD,EAC/B,6BAAWnH,GACT,MAAO,GAAGC,OAAOkH,EAAenH,oBAAsB,GAAIkH,EAC5D,CAEA,GAEA,WAAAG,GACEjH,QAEAG,KAAKqF,UAAY,iJAMb,IAAac,IAAKY,IAAS,QAAaA,IAAOC,KAAK,qJAOxDhH,KAAKiH,SAAWjH,KAAK0F,cAAc,qBACnC1F,KAAKkH,UAAYlH,KAAK0F,cAAc,sBAEpC1F,KAAKmH,OAAS,CAACnH,KAAKiH,SAAUjH,KAAKkH,YAEnC,QAAalH,KAAMA,KAAKiH,SAAU,CAAEtB,aAAc,CAAC,iBACnD,QAAa3F,KAAMA,KAAKkH,UAAW,CACjCvB,aAAc,CAAC,aAAc,WAAY,oBACzCe,SAAU,CAAE,mBAAoB,UAIlC1G,KAAKiH,SAASG,uBAA0BC,IACtC,MAAO,CAAEC,GAAYD,GAAKE,QAAQ,MAAQ,GAC1C,OAAOD,EAEX,CAGA,wBAAIvB,GACF,OAAO/F,KAAKiH,SAASO,KACvB,CAGA,oBAAI3B,GACF,OAAO7F,KAAKiH,SAASxB,WAAWC,cAAc,SAASzE,KACzD,CAGA,uBAAI6E,GACF,OAAO9F,KAAKkH,UAAUzB,WAAWC,cAAc,QACjD,CAEA,0BAAI+B,GACF,MAAyD,SAAlDzH,KAAKqG,aAAa,2BAC3B,CAEA,eAAIqB,GACF,OAAO1H,KAAKqG,aAAa,eAC3B,CAEA,kBAAIsB,GACF,OAAO3H,KAAKkH,UAAUS,cACxB,CAEA,aAAIC,GACF,OAAOC,SAAS7H,KAAKqG,aAAa,aAAc,KAAO,CACzD,CAEA,uBAAIyB,GACF,OAAO9H,KAAKiH,UAAUc,cAAc1B,aAAa,oBACnD,CAEA,qBAAI2B,GACF,MAAMC,EAAOjI,KAAKqG,aAAa,sBAC/B,OAAO4B,GAAMV,MAAM,KAAKW,OAAOC,UAAY,EAC7C,CAEA,iBAAIC,GACF,MAA6C,SAAtCpI,KAAKqG,aAAa,eAC3B,CAGA,sBAAIgC,GACF,MAAkD,SAA3CrI,KAAKqG,aAAa,oBAC3B,CAEA,SAAIpF,GACF,OAAKjB,KAAKiH,SAAShG,OAAUjB,KAAKkH,UAAUjG,MAIxCjB,KAAKyH,uBACA,GAAGzH,KAAKiH,SAAShG,SAASjB,KAAKkH,UAAUjG,QAG3C,GAAGjB,KAAKiH,SAAShG,SAASjB,KAAKkH,UAAUjG,MAAMqH,QAAQ,OAAQ,MAP7D,EAQX,CAEA,KACEtI,KAAKiH,SAASc,kBAAeQ,EAC7BvI,KAAKkH,UAAUjG,MAAQ,EACzB,CAEA,SAAIA,CAAMoG,GAER,IAAKA,IAAQ,KAAKmB,KAAKnB,GAErB,YADArH,MAAK,IAKFqH,EAAIoB,WAAW,OAClBpB,EAAM,IAAIA,KAGZ,IAAIC,EAAW,GACXoB,EAAiB,GAErB,GAAIrB,EAAIsB,SAAS,KAAM,CAErB,MAAMC,EAAUvB,EAAIwB,QAAQ,KAC5BvB,EAAWD,EAAIyB,MAAM,EAAGF,GACxBF,EAAiBrB,EAAIyB,MAAMF,EAAU,GAAGN,QAAQ,OAAQ,GAC1D,KAAO,CAEL,MAAMS,GAAS,OAA2B1B,GACtC0B,GAAQC,qBACV1B,EAAW,IAAIyB,EAAOC,qBAEtBN,EAAiBrB,EAAIyB,MAAMxB,EAAS2B,QAAQX,QAAQ,OAAQ,IAEhE,CAGA,IAAK,KAAKE,KAAKlB,GAEb,YADAtH,MAAK,IAKP,MAAMkJ,EAAuB,IAAahB,OAAQiB,GAAMA,EAAE7B,WAAaA,GAAUnB,IAC9EgD,GAAMA,EAAEC,MAILC,EAA6BrJ,KAAK8H,oBACxC,IAAKoB,EAAqBP,SAASU,GAA6B,CAE9D,MAAMC,EAAetJ,KAAKiH,SAASO,OAAO+B,KAAMJ,GAC9CD,EAAqBP,SAASQ,EAAE9C,aAAa,uBAE3CiD,IACFtJ,KAAKiH,SAASc,aAAeuB,EAEjC,CAGItJ,KAAKoI,cACPpI,KAAKkH,UAAUjG,MAAQjB,MAAK,EAAsB0I,GAElD1I,KAAKkH,UAAUjG,MAAQyH,CAE3B,CAEA,IAAA9I,GACEI,KAAKa,iBAAiB,QAAU2I,IAE1BA,EAAEC,WAAWzJ,KAAKmH,OAAO,GAAG/F,UAGlCvB,MAAMD,SAENI,MAAK,GACP,CAEA,WAAA0J,GACE,MAAMC,EAAc3J,KAAKiH,SAAShG,MAC5B2I,EAAgB5J,KAAKkH,UAAUjG,MAE/B4I,GAAWF,IAAgBC,EAC3BE,EAAgBF,GAAiBA,EAAcX,QAAUjJ,KAAK4H,UAEpE,GAAI5H,KAAK+J,YAAcF,EACrB,MAAO,CAAEG,cAAc,GAGzB,GAAIhK,KAAKiB,MAAO,CACd,IAAK6I,EACH,MAAO,CAAEG,UAAU,GAGrB,GAAIjK,KAAKqI,qBAAuBrI,MAAK,IACnC,MAAO,CAAEkK,iBAAiB,EAE9B,CAEA,MAAO,CAAC,CACV,CAEA,iBAAAC,IAAqBC,GACnBpK,KAAKkH,UAAUiD,qBAAqBC,EACtC,CAEA,wBAAA/I,CAAyBC,EAAU+I,EAAUC,GAG3C,GAFAzK,MAAMwB,yBAAyBC,EAAU+I,EAAUC,GAE/CD,IAAaC,EAAU,CACzB,GAAiB,iBAAbhJ,GAA+BgJ,IAAatK,KAAK8H,oBACnD9H,MAAK,EAA0BsK,QAC1B,GAAI3D,EAAkBgC,SAASrH,GAAW,CAC/C,MAAM2G,EAAOvB,EAASpF,IAAaA,EAE/BgF,EAAYqC,SAASrH,GAClBgJ,EAGHtK,KAAKmH,OAAOoD,QAASC,GAAUA,EAAMC,aAAaxC,EAAMqC,IAFxDtK,KAAKmH,OAAOoD,QAASC,GAAUA,EAAME,gBAAgBzC,IAI9C1B,EAAaoC,SAASrH,GAC/BtB,KAAKiH,SAASwD,aAAaxC,EAAMqC,GACxB9D,EAAWmC,SAASrH,IAC7BtB,KAAKkH,UAAUuD,aAAaxC,EAAMqC,EAEtC,CAEI7D,EAAekC,SAASrH,IAC1BtB,MAAK,EAAsBsB,EAAUgJ,GAGtB,uBAAbhJ,GACFtB,MAAK,EAAqBA,KAAKgI,kBAEnC,CACF,CAEA,KAEEhI,KAAKkH,UAAUrG,iBAAiB,QAAU2I,IACxC,IAAKxJ,KAAKyH,uBAAwB,CAChC,MAAMkD,EAAkB,OAClBC,EAAiBpB,EAAEqB,OAAO5J,MAC7BsG,MAAM,IACNW,OAAQ4C,GAASH,EAAgBnC,KAAKsC,IACtC9D,KAAK,IACRwC,EAAEqB,OAAO5J,MAAQ2J,CACnB,IAGF5K,KAAK+K,6BAA6B/K,KAAKmH,QACvCnH,KAAKgL,6BACP,CAEA,GAAsBtC,EAAiB,IAUrC,OARK1I,MAAK,GAAQA,MAAK,EAAKiL,UAAYjL,KAAK8H,sBAC3C9H,MAAK,EAAO,IAAI,IAAUA,KAAK8H,sBAIjC9H,MAAK,EAAKkL,QAEWlL,MAAK,EAAKwK,MAAM9B,IACdA,CACzB,CAEA,KACE,MAAMK,GAAS,OAA2B/I,KAAKiB,OAE/C,SACI8H,GACAA,EAAOoC,aACPpC,EAAOkC,SACPjL,MAAK,EAAkB+I,EAAOkC,SAEpC,CAEA,GAAkBtB,GAChB,OAAK3J,KAAKgI,kBAAkBiB,QAIrBjJ,KAAKgI,kBAAkBW,SAASgB,EACzC,CAGA,GAAwBA,GACtB,OAAO3J,KAAKiH,SAASO,OAAO+B,KAAMJ,GAAMA,EAAE9C,aAAa,uBAAyBsD,EAClF,CAEA,GAAqB3B,GACnB,MAAMR,EAAQQ,EAAkBiB,OAC5B,IAAaf,OAAQiB,GAAMnB,EAAkBW,SAASQ,EAAEC,OACxD,IAEJpJ,KAAK0F,cAAc,qBAAqBL,UAAYmC,EACjDrB,IAAKY,IAAS,QAAaA,IAC3BC,KAAK,GACV,CAEA,GAA0B2C,GACxB,IAAK3J,KAAKiH,SAAShG,MAAO,CACxB,MAAMmK,EAAkBpL,MAAK,EAAwB2J,GAIjDyB,GACFlK,WAAW,KACTlB,KAAKiH,SAASc,aAAeqD,GAGnC,CACF,CAEA,GAAsB9J,EAAUgJ,GAE9B,MAAMrC,EAAOvB,EAASpF,IAAaA,EAElB,eAAbA,EACFtB,MAAK,EAAuBsK,GAIe,aAApCtK,KAAKqG,aAAa,gBACR,wBAAb/E,EACFtB,KAAKiH,SAASwD,aAAaxC,EAAMqC,GACX,UAAbhJ,GACTtB,KAAKkH,UAAUuD,aAAaxC,EAAMqC,GAGxC,CAEA,GAAuBA,GACJ,aAAbA,GAEFtK,KAAKiH,SAASwD,aAAa,QAASzK,KAAKqG,aAAa,wBAA0B,IAChFrG,KAAKiH,SAASwD,aACZ,cACAzK,KAAKqG,aAAa,8BAAgC,IAEpDrG,KAAKkH,UAAUuD,aAAa,QAASzK,KAAKqG,aAAa,UAAY,IACnErG,KAAKkH,UAAUuD,aACb,cACAzK,KAAKqG,aAAa,4BAA8B,KAIlDrG,KAAKmH,OAAOoD,QAASC,GAAUA,EAAME,gBAAgB,SAEzD,E,uDCxXFxI,eAAeC,OAAO,IAAe,I,iCCD9B,MAGMkJ,EAAe,EAAGjC,OAAM9B,WAAUgE,KAAML,KAAc,0BAEtD3D,sBACE8B,KAAQ9B,KAAY2D,8BACZ7B,uDAPO,CAACA,GAC7B,+DAA+DA,EAAKmC,oBAUtDC,CAAepC,gDAEpB6B,gDAGA7B,yBACA9B,kC,yHCfXpF,eAAeC,OAAO,KAAe,K","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.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/helpers.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["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 '@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 { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport { 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 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 'phone-input-type',\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 { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\nimport { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem } from '../helpers';\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 = [\n 'phone-input-placeholder',\n 'maxlength',\n 'autocomplete',\n 'name',\n 'phone-input-type',\n];\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 'phone-input-type': 'type',\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, {\n includeAttrs: ['label-type', 'required', 'phone-input-type'],\n mapAttrs: { 'phone-input-type': 'type' },\n });\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 if (this.allowAlphanumericInput) {\n return `${this.comboBox.value}-${this.textField.value}`;\n }\n\n return `${this.comboBox.value}-${this.textField.value.replace(/\\D+/g, '')}`;\n }\n\n #clearValue() {\n this.comboBox.selectedItem = undefined;\n this.textField.value = '';\n }\n\n set value(val) {\n // reject empty or digit-free values\n if (!val \|\| !/\\d/.test(val)) {\n this.#clearValue();\n return;\n }\n\n // ensure plus prefix\n if (!val.startsWith('+')) {\n val = `+${val}`;\n }\n\n let dialCode = '';\n let nationalNumber = '';\n\n if (val.includes('-')) {\n // dash explicitly marks where the dial code ends — no parsing needed\n const dashIdx = val.indexOf('-');\n dialCode = val.slice(0, dashIdx);\n nationalNumber = val.slice(dashIdx + 1).replace(/\\D+/g, '');\n } else {\n // parse only to get dial code length,\n const parsed = parsePhoneNumberFromString(val);\n if (parsed?.countryCallingCode) {\n dialCode = `+${parsed.countryCallingCode}`;\n // slice the raw value to avoid parser transformations\n nationalNumber = val.slice(dialCode.length).replace(/\\D+/g, '');\n }\n }\n\n // dial code must contain digits (e.g. '+1', not just '+')\n if (!/\\d/.test(dialCode)) {\n this.#clearValue();\n return;\n }\n\n // Collect all country codes sharing this dial code from CountryCodes (e.g. US, CA, DO, ... for +1)\n const matchingCountryCodes = CountryCodes.filter((c) => c.dialCode === dialCode).map(\n (c) => c.code\n );\n\n // Check if the currently selected country's data-country-code is in that set\n const currentSelectedCountryCode = this.selectedCountryCode;\n if (!matchingCountryCodes.includes(currentSelectedCountryCode)) {\n // If not, find the first combo box item (restricted list) whose data-country-code is in the set\n const matchingItem = this.comboBox.items?.find((c) =>\n matchingCountryCodes.includes(c.getAttribute('data-country-code'))\n );\n if (matchingItem) {\n this.comboBox.selectedItem = matchingItem;\n }\n }\n\n // set formatted or raw national number on the text field\n if (this.isFormatValue) {\n this.textField.value = this.#formatNationalNumber(nationalNumber);\n } else {\n this.textField.value = nationalNumber;\n }\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 && !this.selectedCountryCode) {\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\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 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 country code `data-country-code` (e.g. `US`)\n #getCountryItemByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\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.#getCountryItemByCodeId(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 #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 { 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 './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":["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","value","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","customElements","define","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","val","dialCode","split","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","replace","undefined","test","startsWith","nationalNumber","includes","dashIdx","indexOf","slice","parsed","countryCallingCode","length","matchingCountryCodes","c","code","currentSelectedCountryCode","matchingItem","find","e","isTrusted","getValidity","countryCode","nationalNumer","isEmpty","isValidLength","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","forEach","input","setAttribute","removeAttribute","telDigitsRegExp","sanitizedInput","target","char","handleFocusEventsDispatching","handleInputEventDispatching","country","reset","isValid","countryCodeItem","comboBoxItem","name","toLowerCase","getCountryFlag"],"sourceRoot":""}

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

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4838,8657],{79275(t,e,i){i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),l=i(97810),r=i(73551);const o=(0,l.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.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,r.$J)("vaadin-text-field")}\n\t\t\t${(0,r.cy)(d.cssVarList)}\n\t\t\t${(0,r.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,r.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:o}))},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)},9035(t,e,i){i.d(e,{A:()=>p,T:()=>u});var n=i(25964),a=i(10473),s=i(23530),l=i(3393),r=i(97810),o=i(92259);const u=(0,r.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],c={"phone-input-placeholder":"placeholder"},h=(0,l.y)({componentName:u,baseSelector:"div"}),p=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],d)}#t;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#e();const t=this.#i();return t?.country&&t?.countryCallingCode&&t?.nationalNumber?`+${[t?.countryCallingCode,t?.nationalNumber].join("-")}`:this.textField.value}set value(t){this.textField.value=t}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.textField.focus()}),super.init?.(),this.textField.addEventListener("input",this.#n.bind(this)),this.handleFocusEventsDispatching([this.textField]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]})}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#a(this.textField.value||"");if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(e.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!t.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&d.includes(t)){const e=c[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#l(t.target.value);this.isFormatValue&&this.#r(e)&&(e=this.#o(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#u(this.textField.value),e=this.#a(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#a(t){return t.replace(/\D/g,"")}#u(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#s(){const t=(0,a.l)(this.value);return!(!t||!t.isValid?.()||!t.country||!this.#d(t.country)||this.defaultCode&&this.defaultCode!==t.country)}#d(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#l(t){if(t=t.replace(/^-+/,"").replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+"),!this.allowAlphanumericInput){const e=/^[+\d-\(\)]+$/;t=t.split("").filter(t=>e.test(t)).join("")}return t}#o(t=""){const e=this.defaultCode||this.#c(t);return e?(this.#t&&this.#t.country===e||(this.#t=new s.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,a.l)(t);return e?.country||""}#r(t){return!!(0,o.W)(t)}}},78343(t,e,i){i.r(e),i(21374);var n=i(9035);customElements.define(n.T,n.A)},92259(t,e,i){i.d(e,{Q:()=>a,W:()=>s});var n=i(51680);const a=t=>n.A.find(e=>e.code===t)?.dialCode,s=t=>{const e=t.match(/\(/g),i=t.match(/\)/g);return e?.length===i?.length}},18330(t,e,i){i.d(e,{f:()=>a});var n=i(44099);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436(t,e,i){i.d(e,{a:()=>a});var n=i(44218);const a=t=>class extends((0,n.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136(t,e,i){i.d(e,{A:()=>p}),i(86689);var n=i(13256),a=i(82901),s=i(72562),l=i(81488),r=i(86314),o=i(87550),u=i(18330),d=i(37436),c=i(37720);const h=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new u.f(this,t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t})),this.addController(new c.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",r.k,{moduleId:"vaadin-text-field-styles"});class p extends(h((0,o.cp)((0,s.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.qy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4838,8657],{79275(t,e,i){i.d(e,{T:()=>o,w:()=>d});var n=i(79365),a=i(6424),s=i(9696),l=i(97810),r=i(73551);const o=(0,l.xE)("text-field"),u=["type","label-type","copy-to-clipboard"],d=(0,s.Zz)((0,n.RF)({mappings:a.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,r.$J)("vaadin-text-field")}\n\t\t\t${(0,r.cy)(d.cssVarList)}\n\t\t\t${(0,r.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,r.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:o}))},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)},9035(t,e,i){i.d(e,{A:()=>p,T:()=>u});var n=i(25964),a=i(10473),s=i(23530),l=i(3393),r=i(97810),o=i(92259);const u=(0,r.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type","phone-input-type"],c={"phone-input-placeholder":"placeholder","phone-input-type":"type"},h=(0,l.y)({componentName:u,baseSelector:"div"}),p=class extends h{static get observedAttributes(){return[].concat(h.observedAttributes||[],d)}#t;constructor(){super(),this.innerHTML='\n      <div>\n        <descope-text-field tabindex="1" type="tel" bordered="false"></descope-text-field>\n      </div>\n      ',this.textField=this.querySelector("descope-text-field")}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get defaultDialCode(){return(0,o.Q)(this.getAttribute("default-code"))}get defaultCode(){return this.getAttribute("default-code")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get maxLength(){return parseInt(this.getAttribute("maxlength"),10)||50}get restrictCountries(){return this.getAttribute("restrict-countries")?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.textField.value)return"";if(!this.isStrictValidation)return this.#e();const t=this.#i();return t?.country&&t?.countryCallingCode&&t?.nationalNumber?`+${[t?.countryCallingCode,t?.nationalNumber].join("-")}`:this.textField.value}set value(t){this.textField.value=t}init(){this.addEventListener("focus",t=>{t.isTrusted&&this.textField.focus()}),super.init?.(),this.textField.addEventListener("input",this.#n.bind(this)),this.handleFocusEventsDispatching([this.textField]),(0,n.EA)(this.textField,this,{includeAttrs:["has-value"]}),(0,n.EA)(this,this.textField,{includeAttrs:["phone-input-type"],mapAttrs:{"phone-input-type":"type"}})}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#a(this.textField.value||"");if(this.isRequired&&!this.textField.value)return{valueMissing:!0};if(this.textField.value){if(e.length<this.minLength)return{tooShort:!0};if(this.isStrictValidation&&this.textField.value&&!this.#s()||!this.isStrictValidation&&this.textField.value&&!t.test(this.value))return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,i){if(super.attributeChangedCallback(t,e,i),e!==i&&d.includes(t)){const e=c[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#l(t.target.value);this.isFormatValue&&this.#r(e)&&(e=this.#o(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#u(this.textField.value),e=this.#a(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#a(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#a(t){return t.replace(/\D/g,"")}#u(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#s(){const t=(0,a.l)(this.value);return!(!t||!t.isValid?.()||!t.country||!this.#d(t.country)||this.defaultCode&&this.defaultCode!==t.country)}#d(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#l(t){if(t=t.replace(/^-+/,"").replace(/(?!^)\+/g,"").replace("--","-").replace("+-","+"),!this.allowAlphanumericInput){const e=/^[+\d-\(\)]+$/;t=t.split("").filter(t=>e.test(t)).join("")}return t}#o(t=""){const e=this.defaultCode||this.#c(t);return e?(this.#t&&this.#t.country===e||(this.#t=new s.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#c(t){const e=(0,a.l)(t);return e?.country||""}#r(t){return!!(0,o.W)(t)}}},78343(t,e,i){i.r(e),i(21374);var n=i(9035);customElements.define(n.T,n.A)},92259(t,e,i){i.d(e,{Q:()=>a,W:()=>s});var n=i(51680);const a=t=>n.A.find(e=>e.code===t)?.dialCode,s=t=>{const e=t.match(/\(/g),i=t.match(/\)/g);return e?.length===i?.length}},18330(t,e,i){i.d(e,{f:()=>a});var n=i(44099);class a extends n.r{constructor(t,e){super(t,"input","input",{initializer:(t,i)=>{i.value&&(t.value=i.value),i.type&&t.setAttribute("type",i.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436(t,e,i){i.d(e,{a:()=>a});var n=i(44218);const a=t=>class extends((0,n.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136(t,e,i){i.d(e,{A:()=>p}),i(86689);var n=i(13256),a=i(82901),s=i(72562),l=i(81488),r=i(86314),o=i(87550),u=i(18330),d=i(37436),c=i(37720);const h=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new u.f(this,t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t})),this.addController(new c.q(this.inputElement,this._labelController))}};(0,o.SF)("vaadin-text-field",r.k,{moduleId:"vaadin-text-field-styles"});class p extends(h((0,o.cp)((0,s.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;