npm - @descope/web-components-ui - Versions diffs - 1.118.0 → 1.119.0 - Mend

@descope/web-components-ui 1.118.0 → 1.119.0

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 (36) hide show

package/dist/umd/descope-text-area-index-js.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"descope-text-area-index-js.js","mappings":"wPAkBO,MAAMA,GAAgB,QAAiB,cAExC,KACJC,EAAI,MACJC,EAAK,YACLC,EAAW,WACXC,EAAU,SACVC,EAAQ,kBACRC,EAAiB,WACjBC,EAAU,aACVC,GACE,CACFP,KAAM,CAAEQ,SAAU,IAAM,SACxBP,MAAO,CAAEO,SAAU,iBACnBN,YAAa,CAAEM,SAAU,8BACzBL,WAAY,CAAEK,SAAU,uBACxBJ,SAAU,CAAEI,SAAU,cACtBH,kBAAmB,CAAEG,SAAU,+CAC/BF,WAAY,CAAEE,SAAU,uBACxBD,aAAc,CAAEC,SAAU,0BAGfC,GAAgB,SAC3B,QAAiB,CACfC,SAAU,CACRC,UAAW,IAAKX,EAAMY,SAAU,SAChCC,aAAc,IAAKb,EAAMY,SAAU,aACnCE,cAAe,IAAKd,EAAMY,SAAU,aACpCG,SAAU,CAACf,EAAMI,GACjBY,WAAY,CAACf,EAAOE,EAAYG,EAAYC,GAC5CU,eAAgB,CACd,IAAKhB,EAAOW,SAAU,SACtB,IAAKP,EAAmBO,SAAU,UAEpCM,uBAAwB,IAAKb,EAAmBO,SAAU,WAC1DO,sBAAuB,IAAKZ,EAAcK,SAAU,SACpDQ,iBAAkB,IAAKb,EAAcK,SAAU,oBAC/CS,qBAAsB,IAAKd,EAAcK,SAAU,mBACnDU,wBAAyB,IAAKf,EAAcK,SAAU,wBACtDW,uBAAwB,IAAKhB,EAAcK,SAAU,qBACrDY,yBAA0B,IAAKjB,EAAcK,SAAU,uBACvDa,qBAAsB,IAAKlB,EAAcK,SAAU,aACnDc,qBAAsB,IAAKvB,EAAYS,SAAU,oBACjDe,oBAAqB,IAAKvB,EAAUQ,SAAU,SAC9CgB,0BAA2B,IAAK1B,EAAaU,SAAU,SACvDiB,iBAAkB,IAAK1B,EAAYS,SAAU,gBAC7CkB,iBAAkB,IAAK3B,EAAYS,SAAU,gBAC7CmB,iBAAkB,IAAK5B,EAAYS,SAAU,gBAC7CoB,kBAAmB,IAAK7B,EAAYS,SAAU,iBAC9CqB,kBAAmB,IAAK9B,EAAYS,SAAU,iBAC9CsB,kBAAmB,IAAK/B,EAAYS,SAAU,iBAC9CuB,mBAAoB,IAAKhC,EAAYS,SAAU,kBAC/CwB,kBAAmB,IAAKjC,EAAYS,SAAU,iBAC9CyB,gBAAiB,IAAKjC,EAAUQ,SAAU,UAC1C0B,eAAgB,IAAKlC,EAAUQ,SAAU,cACzC2B,eAAgB,IAAKnC,EAAUQ,SAAU,iBAG7C,MACA,QAAgB,CAAE4B,WAAY,CAAC,QAAS,oBACxC,KAtC2B,EAwC3B,QAAY,CACVC,MAAO,GACPC,eAAgB,mBAChBC,MAAO,IAAM,iLAST,QAAwB,+BAC3B,QAAuBlC,EAAcmC,uBACrC,QAAoB,+BACpB,QAAgB,+BAChB,QAAsB,mBAAoB,uBAC1C,QAAiB,4BAElBC,iBAAkB,CAAC,YACnB9C,mBCjGJ+C,eAAeC,OAAOhD,EAAeU,E,8HCH9B,MAAMuC,EAA0BJ,GAAe,4CAE1BA,EAAWR,4BAA4BQ,EAAWT,gCAwBjEc,EAAuBC,GAAS,SACvCA,sIASOC,EAAmBD,GAAS,SACnCA,6GAOOE,EAAoBF,GAAS,SACpCA,mBACAA,wBACAA,mEAKOG,EAAwB,CAACH,EAAMI,EAAM,UAAY,SACxDJ,iBAAoBI,2BACvBJ,iBAAoBI,gDAgBVC,EAA8B,IAAM,uGAOpCC,EAA2BN,GAAS,SAC3CA,8DAKOO,EAAyCP,GAAS,SACzDA,oEAKOQ,EAAsB,CAACR,EAAMN,IAAe,SACnDK,EAAoBC,WACpBE,EAAiBF,WACjBG,EAAsBH,WACtBC,EAAgBD,WAlCY,EAACA,EAAMN,IAAe,SAClDM,kCACAA,8CACAA,wCACAA,yCACAA,0EACiCN,EAAWjB,wDAClBiB,EAAWe,oBAAoBf,EAAWlB,wCA4BpEkC,CAAmBV,EAAMN,WACzBa,EAAsCP,WAnFV,CAACA,GAAS,SACtCA,yCAmFAW,CAAmBX,WA9EQ,CAACA,GAAS,SACrCA,mHA8EAY,CAAkBZ,WA3FwB,CAACA,GAAS,SACpDA,gEA2FAa,CAAiCb,OAM1Bc,EAA2Bd,GAAS,4ZAiB3CA,yJAQOe,EAA0B,IAC9B,gM","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-area/TextAreaClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-area/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n resetInputContainer,\n resetInputCursor,\n resetInputLabelPosition,\n resetInputField,\n resetInputPlaceholder,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-area');\n\nconst {\n host,\n label,\n placeholder,\n inputField,\n textArea,\n requiredIndicator,\n helperText,\n errorMessage,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n placeholder: { selector: 'textarea:placeholder-shown' },\n inputField: { selector: '::part(input-field)' },\n textArea: { selector: '> textarea' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const TextAreaClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: [host, textArea],\n fontFamily: [label, inputField, helperText, errorMessage],\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\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 inputBackgroundColor: { ...inputField, property: 'background-color' },\n inputValueTextColor: { ...textArea, property: 'color' },\n inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n inputOutlineStyle: { ...inputField, property: 'outline-Style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputResizeType: { ...textArea, property: 'resize' },\n inputMinHeight: { ...textArea, property: 'min-height' },\n inputTextAlign: { ...textArea, property: 'text-align' },\n },\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n componentNameValidationMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-area',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n box-sizing: border-box;\n\t\t\t}\n\t\t\ttextarea {\n\t\t\t\theight: 100%;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-area')}\n\t\t\t${useHostExternalPadding(TextAreaClass.cssVarList)}\n\t\t\t${resetInputContainer('vaadin-text-area')}\n\t\t\t${resetInputField('vaadin-text-area')}\n\t\t\t${resetInputPlaceholder('vaadin-text-area', 'textarea')}\n\t\t\t${resetInputCursor('vaadin-text-area')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n","import '@vaadin/text-area';\nimport { componentName, TextAreaClass } from './TextAreaClass';\n\ncustomElements.define(componentName, TextAreaClass);\n\nexport { TextAreaClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n"],"names":["componentName","host","label","placeholder","inputField","textArea","requiredIndicator","helperText","errorMessage","selector","TextAreaClass","mappings","hostWidth","property","hostMinWidth","hostDirection","fontSize","fontFamily","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputBackgroundColor","inputValueTextColor","inputPlaceholderTextColor","inputBorderWidth","inputBorderStyle","inputBorderColor","inputBorderRadius","inputOutlineStyle","inputOutlineColor","inputOutlineOffset","inputOutlineWidth","inputResizeType","inputMinHeight","inputTextAlign","proxyProps","slots","wrappedEleName","style","cssVarList","excludeAttrsSync","customElements","define","useHostExternalPadding","resetInputContainer","name","resetInputField","resetInputCursor","resetInputPlaceholder","ele","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","inputHeight","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}
1	+ {"version":3,"file":"descope-text-area-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-area/TextAreaClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-area/index.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n resetInputContainer,\n resetInputCursor,\n resetInputLabelPosition,\n resetInputField,\n resetInputPlaceholder,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-area');\n\nconst {\n host,\n label,\n placeholder,\n inputField,\n textArea,\n requiredIndicator,\n helperText,\n errorMessage,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n placeholder: { selector: 'textarea:placeholder-shown' },\n inputField: { selector: '::part(input-field)' },\n textArea: { selector: '> textarea' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const TextAreaClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: [host, textArea],\n fontFamily: [label, inputField, helperText, errorMessage],\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\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 inputBackgroundColor: { ...inputField, property: 'background-color' },\n inputValueTextColor: { ...textArea, property: 'color' },\n inputPlaceholderTextColor: { ...placeholder, property: 'color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n inputOutlineStyle: { ...inputField, property: 'outline-Style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputResizeType: { ...textArea, property: 'resize' },\n inputMinHeight: { ...textArea, property: 'min-height' },\n inputTextAlign: { ...textArea, property: 'text-align' },\n },\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n componentNameValidationMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-area',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n box-sizing: border-box;\n\t\t\t}\n\t\t\ttextarea {\n\t\t\t\theight: 100%;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-area')}\n\t\t\t${useHostExternalPadding(TextAreaClass.cssVarList)}\n\t\t\t${resetInputContainer('vaadin-text-area')}\n\t\t\t${resetInputField('vaadin-text-area')}\n\t\t\t${resetInputPlaceholder('vaadin-text-area', 'textarea')}\n\t\t\t${resetInputCursor('vaadin-text-area')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n","import '@vaadin/text-area';\nimport { componentName, TextAreaClass } from './TextAreaClass';\n\ncustomElements.define(componentName, TextAreaClass);\n\nexport { TextAreaClass, componentName };\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n"],"names":["componentName","host","label","placeholder","inputField","textArea","requiredIndicator","helperText","errorMessage","selector","TextAreaClass","mappings","hostWidth","property","hostMinWidth","hostDirection","fontSize","fontFamily","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputBackgroundColor","inputValueTextColor","inputPlaceholderTextColor","inputBorderWidth","inputBorderStyle","inputBorderColor","inputBorderRadius","inputOutlineStyle","inputOutlineColor","inputOutlineOffset","inputOutlineWidth","inputResizeType","inputMinHeight","inputTextAlign","proxyProps","slots","wrappedEleName","style","cssVarList","excludeAttrsSync","customElements","define","useHostExternalPadding","resetInputContainer","name","resetInputField","resetInputCursor","resetInputPlaceholder","ele","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","inputHeight","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"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],{21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:A,helperText:w}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,A,w,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...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:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(23530),l=n(10473);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,s.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,l.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#u(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#d(t){if(!t)return;const e=(0,l.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.$B)(t))).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2878,9894],{21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},49157:(t,e,n)=>{n.d(e,{$B:()=>o,lq:()=>r});var i=n(10473);const o=({code:t,dialCode:e,name:n})=>`\n\t<div\n\t\tdata-id="${e}"\n\t\tdata-name="${t} ${e} ${n}"\n\t\tdata-country-code="${t}"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src="${(t=>`https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${t.toLowerCase()}.svg`)(t)}" width="20"/>\n\t\t\t</span>\n\t\t\t<span>${n}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${t}</span>\n\t\t\t<span>${e}</span>\n\t\t</div>\n\t</div>\n`,r=t=>{const e=t||"";let n="",o="";const r=(0,i.l)(e);if(r)r.countryCallingCode&&(n=`+${r.countryCallingCode}`),r.nationalNumber&&(o=r.nationalNumber);else{const[t,i]=e.split("-");n=t||"",o=i||""}return[n,o]}},79275:(t,e,n)=>{n.d(e,{T:()=>l,w:()=>u});var i=n(79365),o=n(6424),r=n(9696),s=n(97810),a=n(73551);const l=(0,s.xE)("text-field"),d=["type","label-type","copy-to-clipboard"],u=(0,r.Zz)((0,i.RF)({mappings:o.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return d.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${u.cssVarList.inputOutlineWidth}) + var(${u.cssVarList.inputOutlineOffset}));\n        box-sizing: border-box;\n\t\t\t}\n      :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n        opacity: 1;\n      }\n\n      vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n      ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(u.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",u.cssVarList)}\n      ${(0,a.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))},81808:(t,e,n)=>{n.d(e,{NF:()=>B,TQ:()=>h});var i=n(84015),o=n(97810),r=n(9696),s=n(79365),a=n(79275),l=n(86365),d=n(51680),u=n(73551);const p=a.w.cssVarList,c=l.C.cssVarList,h=(0,o.xE)("phone-field"),{host:b,label:y,requiredIndicator:m,inputField:g,internalAfter:f,countryCodeInput:x,phoneInput:C,separator:v,errorMessage:w,helperText:A}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:"::part(input-field)"},internalAfter:{selector:"descope-phone-field-internal::after"},phoneInput:{selector:()=>"descope-text-field"},countryCodeInput:{selector:()=>"descope-combo-box"},separator:{selector:"descope-phone-field-internal .separator"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},B=(0,r.Zz)((0,s.RF)({mappings:{fontSize:[b,g,{selector:a.w.componentName,property:a.w.cssVarList.fontSize},{selector:l.C.componentName,property:l.C.cssVarList.fontSize}],fontFamily:[y,w,A,{...x,property:l.C.cssVarList.overlay.fontFamily}],hostWidth:[{...b,property:"width"},{...C,property:"width"},{...x,property:"--vaadin-combo-box-overlay-width"}],hostDirection:{...b,property:"direction"},inputBorderStyle:[{...f,property:"border-style"},{...v,property:"border-left-style"}],inputBorderWidth:[{...f,property:"border-width"},{...v,property:"border-left-width"}],inputBorderColor:[{...f,property:"border-color"},{...v,property:"border-left-color"}],inputBorderRadius:[{...g,property:"border-radius"},{...f,property:"border-radius"}],countryCodeInputWidth:{...x,property:c.hostWidth},countryCodeDropdownWidth:{...x,property:"--vaadin-combo-box-overlay-width"},phoneInputWidth:{...C,property:"width"},horizontalPadding:[{...C,property:"padding-left"},{...C,property:"padding-right"},{...x,property:"padding-left"},{...x,property:"padding-right"}],labelTextColor:[{...y,property:"color"},{...y,property:"-webkit-text-fill-color"},{...m,property:"color"}],labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},errorMessageFontSize:{...w,property:"font-size"},inputValueTextColor:[{...C,property:p.inputValueTextColor},{...x,property:c.inputValueTextColor}],inputPlaceholderTextColor:{...C,property:p.inputPlaceholderColor},overlayItemBackgroundColor:{selector:"descope-combo-box",property:c.overlayItemBackgroundColor},inputOutlineStyle:{...g,property:"outline-style"},inputOutlineColor:{...g,property:"outline-color"},inputOutlineWidth:{...g,property:"outline-width"},inputOutlineOffset:{...g,property:"outline-offset"},valueInputHeight:[{...x,property:c.valueInputHeight}],valueInputMarginBottom:[{...C,property:p.valueInputMarginBottom}],marginInlineStart:[{...C,property:p.marginInlineStart},{...x,property:c.marginInlineStart}]}}),s.VO,s.Yg,(0,s.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return d.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${i.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${i.T}>\n      \t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,o.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","bordered","minlength","maxlength","default-code","country-input-placeholder","phone-input-placeholder","disabled","restrict-countries","country-input-label","readonly","label","label-type","allow-alphanumeric-input","format-value","strict-validation"]})}get countryCodeItems(){return this.inputElement?.countryCodeValue}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}get countryCodeInputData(){return this.inputElement?.countryCodeInputData}get countryCodes(){return Array.from(this.inputElement.countryCodeInputData).map((t=>t.getAttribute("data-country-code")))}}))((0,s.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,u.cy)(B.cssVarList)}\n\t\t\t${(0,u.I4)("vaadin-text-field")}\n\t\t\t${(0,u.kG)("vaadin-text-field")}\n\t\t\t${(0,u.X6)()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n      descope-phone-field-internal::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        box-sizing: border-box;\n        outline-offset: calc(var(${B.cssVarList.inputBorderWidth}) * -1);\n        pointer-events: none;\n      }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n        min-width: 5.75em;\n\t\t\t\t${c.inputOutlineWidth}: 0;\n\t\t\t\t${c.inputOutlineOffset}: 0;\n\t\t\t\t${c.inputBorderWidth}: 0;\n\t\t\t\t${c.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${p.inputOutlineWidth}: 0;\n\t\t\t\t${p.inputOutlineOffset}: 0;\n\t\t\t\t${p.inputBorderWidth}: 0;\n\t\t\t\t${p.inputBorderRadius}: 0;\n      }\n\n      :host([label-type="floating"]) vaadin-text-field::part(label) {\n        display: none;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n        opacity: 0;\n      }\n      descope-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n      ${(0,u.$J)("vaadin-text-field")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:h}))},84015:(t,e,n)=>{n.d(e,{A:()=>g,T:()=>d});var i=n(3393),o=n(97810),r=n(51680),s=n(49157),a=n(23530),l=n(10473);const d=(0,o.xE)("phone-field-internal"),u=["disabled","size","bordered","readonly"],p=["country-input-placeholder","default-code","restrict-countries"],c=["phone-input-placeholder","maxlength","autocomplete","name"],h=["label-type","country-input-label","label"],b={"country-input-label":"label","country-input-placeholder":"placeholder","phone-input-placeholder":"placeholder"},y=[].concat(u,p,c,h),m=(0,i.y)({componentName:d,baseSelector:"div"}),g=class extends m{static get observedAttributes(){return[].concat(m.observedAttributes||[],y)}#t;constructor(){super(),this.innerHTML=`\n    <div class="wrapper">\n      <descope-combo-box\n        item-label-path="data-name"\n        item-value-path="data-id"\n      >\n      ${r.A.map((t=>(0,s.$B)(t))).join("")}\n      </descope-combo-box>\n      <div class="separator"></div>\n      <descope-text-field type="tel"></descope-text-field>\n    </div>\n    `,this.comboBox=this.querySelector("descope-combo-box"),this.textField=this.querySelector("descope-text-field"),this.inputs=[this.comboBox,this.textField],(0,o.EA)(this,this.comboBox,{includeAttrs:["label-type"]}),(0,o.EA)(this,this.textField,{includeAttrs:["label-type","required"]}),this.comboBox.customValueTransformFn=t=>{const[,e]=t?.split?.(" ")||[];return e}}get countryCodeInputData(){return this.comboBox.items}get countryCodeValue(){return this.comboBox.shadowRoot.querySelector("input").value}get phoneNumberInputEle(){return this.textField.shadowRoot.querySelector("input")}get allowAlphanumericInput(){return"true"===this.getAttribute("allow-alphanumeric-input")}get defaultCode(){return this.getAttribute("default-code")}get selectionStart(){return this.textField.selectionStart}get minLength(){return parseInt(this.getAttribute("minlength"),10)||0}get selectedCountryCode(){return this.comboBox?.selectedItem?.getAttribute("data-country-code")}get restrictCountries(){const t=this.getAttribute("restrict-countries");return t?.split(",").filter(Boolean)||[]}get isFormatValue(){return"true"===this.getAttribute("format-value")}get isStrictValidation(){return"true"===this.getAttribute("strict-validation")}get value(){if(!this.comboBox.value||!this.textField.value)return"";const[t,e]=(0,s.lq)(`${this.comboBox.value}-${this.textField.value}`);return`${t||this.comboBox.value}-${e||this.textField.value}`}set value(t){const[e,n]=(0,s.lq)(t);this.#e(e),this.#n(n)}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[1].focus()})),super.init?.(),this.#i()}getValidity(){const t=this.comboBox.value,e=this.textField.value,n=!t||!e,i=e&&e.length>=this.minLength;if(this.isRequired&&n)return{valueMissing:!0};if(this.value){if(!i)return{tooShort:!0};if(this.isStrictValidation&&!this.#o())return{patternMismatch:!0}}return{}}setSelectionRange(...t){this.textField.setSelectionRange(...t)}attributeChangedCallback(t,e,n){if(super.attributeChangedCallback(t,e,n),e!==n){if("default-code"===t&&n)this.#r(n);else if(y.includes(t)){const e=b[t]||t;u.includes(t)?this.inputs.forEach((t=>t.setAttribute(e,n))):p.includes(t)?this.comboBox.setAttribute(e,n):c.includes(t)&&this.textField.setAttribute(e,n)}h.includes(t)&&this.#s(t,n),"restrict-countries"===t&&this.#a(this.restrictCountries)}}#i(){this.textField.addEventListener("input",(t=>{if(!this.allowAlphanumericInput){const e=/^\d$/,n=t.target.value.split("").filter((t=>e.test(t))).join("");t.target.value=n}})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching(),this.addEventListener("input",this.#l.bind(this))}#e(t){if(!t||t===this.selectedCountryCode)return;let e;if(this.value){const n=this.#d(`${t}-${this.textField.value}`);e=this.#u(n)}e||(e=this.#p(t)),this.comboBox.selectedItem=e}#n(t){this.isFormatValue&&(t=this.#c(t)),this.textField.value!==t&&(this.textField.value=t)}#c(t=""){return this.#t&&this.#t.country===this.selectedCountryCode||(this.#t=new a.Q(this.selectedCountryCode)),this.#t.reset(),this.#t.input(t)||t}#o(){const t=(0,l.l)(this.value);return!!(t&&t.isValid?.()&&t.country&&this.#h(t.country))}#h(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#p(t){return this.comboBox.items?.find((e=>e.getAttribute("data-id")===t))||void 0}#u(t){return this.comboBox.items?.find((e=>e.getAttribute("data-country-code")===t))}#d(t){if(!t)return;const e=(0,l.l)(t);if(!e?.country)return;const n=this.#u(e.country);return n?.getAttribute("data-country-code")}#a(t){const e=t.length?r.A.filter((e=>t.includes(e.code))):r.A;this.querySelector("descope-combo-box").innerHTML=e.map((t=>(0,s.$B)(t))).join("")}#r(t){if(!this.comboBox.value){const e=this.#u(t);e&&setTimeout((()=>{this.comboBox.selectedItem=e}))}}#l(){if(!this.value)return;const t=this.#d(this.value);if(t&&this.selectedCountryCode!==t){const e=this.#u(t);e&&(this.comboBox.selectedItem=e)}}#s(t,e){const n=b[t]||t;"label-type"===t?this.#b(e):"floating"===this.getAttribute("label-type")&&("country-input-label"===t?this.comboBox.setAttribute(n,e):"label"===t&&this.textField.setAttribute(n,e))}#b(t){"floating"===t?(this.comboBox.setAttribute("label",this.getAttribute("country-input-label")||""),this.comboBox.setAttribute("placeholder",this.getAttribute("country-input-placeholder")||""),this.textField.setAttribute("label",this.getAttribute("label")||""),this.textField.setAttribute("placeholder",this.getAttribute("phone-input-placeholder")||"")):this.inputs.forEach((t=>t.removeAttribute("label")))}}},92132:(t,e,n)=>{n.r(e),n(27092),n(21374);var i=n(84015);customElements.define(i.T,i.A)},98136:(t,e,n)=>{n.r(e),n.d(e,{PhoneFieldClass:()=>i.NF,componentName:()=>i.TQ}),n(92132),n(27092),n(21374);var i=n(81808);customElements.define(i.TQ,i.NF)}}]);
 //# 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/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...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'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode \|\| this.comboBox.value}-${phoneNumber \|\| this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val \|\| val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) \|\| undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem","removeAttribute"],"sourceRoot":""}
1	+ {"version":3,"file":"phone-fields-descope-phone-field-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/PhoneFieldClass.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/PhoneFieldInternal.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js","webpack://@descope/web-components-ui/./src/components/phone-fields/descope-phone-field/index.js"],"sourcesContent":["import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","import { parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\n// We use JSDelivr (proxy by static.descope.com) in order to fetch the images as image file from this library (svg-country-flags)\n// This reduces our bundle size, and we use it as a static remote resource.\nexport const getCountryFlag = (code) =>\n `https://static.descope.com/npm/svg-country-flags@1.2.10/svg/${code.toLowerCase()}.svg`;\n\nexport const comboBoxItem = ({ code, dialCode, name: country }) => `\n\t<div\n\t\tdata-id=\"${dialCode}\"\n\t\tdata-name=\"${code} ${dialCode} ${country}\"\n\t\tdata-country-code=\"${code}\"\n\t>\n\t\t<div>\n\t\t\t<span>\n\t\t\t\t<img src=\"${getCountryFlag(code)}\" width=\"20\"/>\n\t\t\t</span>\n\t\t\t<span>${country}</span>\n\t\t</div>\n\t\t<div>\n\t\t\t<span>${code}</span>\n\t\t\t<span>${dialCode}</span>\n\t\t</div>\n\t</div>\n`;\n\nexport const parsePhoneNumber = (val) => {\n const value = val \|\| '';\n let countryCode = '';\n let phoneNumber = '';\n\n // Attempt to parse the value using libphonenumber-js\n const parsed = parsePhoneNumberFromString(value);\n\n if (parsed) {\n if (parsed.countryCallingCode) {\n countryCode = `+${parsed.countryCallingCode}`;\n }\n\n if (parsed.nationalNumber) {\n phoneNumber = parsed.nationalNumber;\n }\n } else {\n // Fallback: assume a dash separates country code and phone number\n const [country, phone] = value.split('-');\n countryCode = country \|\| '';\n phoneNumber = phone \|\| '';\n }\n\n return [countryCode, phoneNumber];\n};\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes \|\| []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import { componentName as descopeInternalComponentName } from './descope-phone-field-internal/PhoneFieldInternal';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport { compose } from '../../../helpers';\nimport {\n createProxy,\n createStyleMixin,\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin,\n} from '../../../mixins';\nimport { TextFieldClass } from '../../descope-text-field/TextFieldClass';\nimport { ComboBoxClass } from '@descope-ui/descope-combo-box/class';\nimport CountryCodes from '../CountryCodes';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n resetInputFieldInvalidBackgroundColor,\n useHostExternalPadding,\n} from '../../../helpers/themeHelpers/resetHelpers';\n\nconst textVars = TextFieldClass.cssVarList;\nconst comboVars = ComboBoxClass.cssVarList;\n\nexport const componentName = getComponentName('phone-field');\n\nconst customMixin = (superclass) =>\n class PhoneFieldMixinClass extends superclass {\n static get CountryCodes() {\n return CountryCodes;\n }\n\n init() {\n super.init?.();\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n\t\t\t\t<${descopeInternalComponentName}\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tslot=\"input\"\n\t\t\t\t></${descopeInternalComponentName}>\n \t\t`;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this.shadowRoot.host, this.inputElement, {\n includeAttrs: [\n 'size',\n 'bordered',\n 'minlength',\n 'maxlength',\n 'default-code',\n 'country-input-placeholder',\n 'phone-input-placeholder',\n 'disabled',\n 'restrict-countries',\n 'country-input-label',\n 'readonly',\n 'label',\n 'label-type',\n 'allow-alphanumeric-input',\n 'format-value',\n 'strict-validation',\n ],\n });\n }\n\n get countryCodeItems() {\n return this.inputElement?.countryCodeValue;\n }\n\n get phoneNumberInputEle() {\n return this.inputElement?.phoneNumberInputEle;\n }\n\n get countryCodeInputData() {\n return this.inputElement?.countryCodeInputData;\n }\n\n get countryCodes() {\n return Array.from(this.inputElement.countryCodeInputData).map((ele) =>\n ele.getAttribute('data-country-code')\n );\n }\n };\n\nconst {\n host,\n label,\n requiredIndicator,\n inputField,\n internalAfter,\n countryCodeInput,\n phoneInput,\n separator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n inputField: { selector: '::part(input-field)' },\n internalAfter: { selector: 'descope-phone-field-internal::after' },\n phoneInput: { selector: () => 'descope-text-field' },\n countryCodeInput: { selector: () => 'descope-combo-box' },\n separator: { selector: 'descope-phone-field-internal .separator' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PhoneFieldClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [\n host,\n inputField,\n {\n selector: TextFieldClass.componentName,\n property: TextFieldClass.cssVarList.fontSize,\n },\n {\n selector: ComboBoxClass.componentName,\n property: ComboBoxClass.cssVarList.fontSize,\n },\n ],\n fontFamily: [\n label,\n errorMessage,\n helperText,\n {\n ...countryCodeInput,\n property: ComboBoxClass.cssVarList.overlay.fontFamily,\n },\n ],\n hostWidth: [\n { ...host, property: 'width' },\n { ...phoneInput, property: 'width' },\n { ...countryCodeInput, property: '--vaadin-combo-box-overlay-width' },\n ],\n hostDirection: { ...host, property: 'direction' },\n\n inputBorderStyle: [\n { ...internalAfter, property: 'border-style' },\n { ...separator, property: 'border-left-style' },\n ],\n inputBorderWidth: [\n { ...internalAfter, property: 'border-width' },\n { ...separator, property: 'border-left-width' },\n ],\n inputBorderColor: [\n { ...internalAfter, property: 'border-color' },\n { ...separator, property: 'border-left-color' },\n ],\n inputBorderRadius: [\n { ...inputField, property: 'border-radius' },\n { ...internalAfter, property: 'border-radius' },\n ],\n\n countryCodeInputWidth: { ...countryCodeInput, property: comboVars.hostWidth },\n countryCodeDropdownWidth: {\n ...countryCodeInput,\n property: '--vaadin-combo-box-overlay-width',\n },\n phoneInputWidth: { ...phoneInput, property: 'width' },\n\n horizontalPadding: [\n { ...phoneInput, property: 'padding-left' },\n { ...phoneInput, property: 'padding-right' },\n { ...countryCodeInput, property: 'padding-left' },\n { ...countryCodeInput, property: 'padding-right' },\n ],\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n errorMessageFontSize: { ...errorMessage, property: 'font-size' },\n\n inputValueTextColor: [\n { ...phoneInput, property: textVars.inputValueTextColor },\n { ...countryCodeInput, property: comboVars.inputValueTextColor },\n ],\n\n inputPlaceholderTextColor: { ...phoneInput, property: textVars.inputPlaceholderColor },\n\n overlayItemBackgroundColor: {\n selector: 'descope-combo-box',\n property: comboVars.overlayItemBackgroundColor,\n },\n\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n valueInputHeight: [{ ...countryCodeInput, property: comboVars.valueInputHeight }],\n valueInputMarginBottom: [{ ...phoneInput, property: textVars.valueInputMarginBottom }],\n marginInlineStart: [\n { ...phoneInput, property: textVars.marginInlineStart },\n { ...countryCodeInput, property: comboVars.marginInlineStart },\n ],\n },\n }),\n draggableMixin,\n inputOverrideValidConstraintsMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 15em;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PhoneFieldClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n\t\t\t${resetInputFieldInvalidBackgroundColor('vaadin-text-field')}\n\t\t\t${resetInputFieldDefaultWidth()}\n\n\t\t\tdiv {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\tvaadin-text-field {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-text-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\t\t\tvaadin-text-field::part(label) {\n margin-left: 0;\n margin-right: 0;\n }\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdescope-phone-field-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n direction: ltr;\n position: relative;\n\t\t\t}\n descope-phone-field-internal::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n box-sizing: border-box;\n outline-offset: calc(var(${PhoneFieldClass.cssVarList.inputBorderWidth}) * -1);\n pointer-events: none;\n }\n\t\t\tdescope-phone-field-internal > div {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t}\n\t\t\tdescope-phone-field-internal .separator {\n\t\t\t\tflex: 0;\n\t\t\t\tborder: none;\n\t\t\t}\n\n\t\t\tdescope-combo-box {\n\t\t\t\tflex-shrink: 0;\n min-width: 5.75em;\n\t\t\t\t${comboVars.inputOutlineWidth}: 0;\n\t\t\t\t${comboVars.inputOutlineOffset}: 0;\n\t\t\t\t${comboVars.inputBorderWidth}: 0;\n\t\t\t\t${comboVars.inputBorderRadius}: 0;\n\t\t\t}\n\t\t\tdescope-text-field {\n\t\t\t\tflex-grow: 1;\n\t\t\t\t${textVars.inputOutlineWidth}: 0;\n\t\t\t\t${textVars.inputOutlineOffset}: 0;\n\t\t\t\t${textVars.inputBorderWidth}: 0;\n\t\t\t\t${textVars.inputBorderRadius}: 0;\n }\n\n :host([label-type=\"floating\"]) vaadin-text-field::part(label) {\n display: none;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n descope-text-field[label-type=\"floating\"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field::part(input-field)::after {\n\t\t\t\tborder: none;\n\t\t\t}\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PhoneFieldClass;\n","import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../../helpers/componentHelpers';\nimport CountryCodes from '../../CountryCodes';\nimport { comboBoxItem, parsePhoneNumber } from '../helpers';\nimport { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js/min';\n\nexport const componentName = getComponentName('phone-field-internal');\n\nconst commonAttrs = ['disabled', 'size', 'bordered', 'readonly'];\nconst countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];\nconst phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];\nconst labelTypeAttrs = ['label-type', 'country-input-label', 'label'];\nconst mapAttrs = {\n 'country-input-label': 'label',\n 'country-input-placeholder': 'placeholder',\n 'phone-input-placeholder': 'placeholder',\n};\n\nconst inputRelatedAttrs = [].concat(commonAttrs, countryAttrs, phoneAttrs, labelTypeAttrs);\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PhoneFieldInternal extends BaseInputClass {\n static get observedAttributes() {\n return [].concat(BaseInputClass.observedAttributes \|\| [], inputRelatedAttrs);\n }\n\n #ayt;\n\n constructor() {\n super();\n\n this.innerHTML = `\n <div class=\"wrapper\">\n <descope-combo-box\n item-label-path=\"data-name\"\n item-value-path=\"data-id\"\n >\n ${CountryCodes.map((item) => comboBoxItem(item)).join('')}\n </descope-combo-box>\n <div class=\"separator\"></div>\n <descope-text-field type=\"tel\"></descope-text-field>\n </div>\n `;\n\n this.comboBox = this.querySelector('descope-combo-box');\n this.textField = this.querySelector('descope-text-field');\n\n this.inputs = [this.comboBox, this.textField];\n\n forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });\n forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });\n\n // override combo box setter to display dialCode value in input\n this.comboBox.customValueTransformFn = (val) => {\n const [, dialCode] = val?.split?.(' ') \|\| [];\n return dialCode;\n };\n }\n\n // exposed from main component\n get countryCodeInputData() {\n return this.comboBox.items;\n }\n\n // exposed from main component\n get countryCodeValue() {\n return this.comboBox.shadowRoot.querySelector('input').value;\n }\n\n // exposed from main component\n get phoneNumberInputEle() {\n return this.textField.shadowRoot.querySelector('input');\n }\n\n get allowAlphanumericInput() {\n return this.getAttribute('allow-alphanumeric-input') === 'true';\n }\n\n get defaultCode() {\n return this.getAttribute('default-code');\n }\n\n get selectionStart() {\n return this.textField.selectionStart;\n }\n\n get minLength() {\n return parseInt(this.getAttribute('minlength'), 10) \|\| 0;\n }\n\n get selectedCountryCode() {\n return this.comboBox?.selectedItem?.getAttribute('data-country-code');\n }\n\n get restrictCountries() {\n const attr = this.getAttribute('restrict-countries');\n return attr?.split(',').filter(Boolean) \|\| [];\n }\n\n get isFormatValue() {\n return this.getAttribute('format-value') === 'true';\n }\n\n // `strict validation` enforces value parsing with libphonenumber-js\n get isStrictValidation() {\n return this.getAttribute('strict-validation') === 'true';\n }\n\n get value() {\n if (!this.comboBox.value \|\| !this.textField.value) {\n return '';\n }\n\n const [countryCode, phoneNumber] = parsePhoneNumber(\n `${this.comboBox.value}-${this.textField.value}`\n );\n\n return `${countryCode \|\| this.comboBox.value}-${phoneNumber \|\| this.textField.value}`;\n }\n\n set value(val) {\n const [countryCode, nationalNumber] = parsePhoneNumber(val);\n\n this.#setCountryCode(countryCode);\n this.#setNationalNumber(nationalNumber);\n }\n\n init() {\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[1].focus();\n });\n\n super.init?.();\n\n this.#initInputs();\n }\n\n getValidity() {\n const countryCode = this.comboBox.value;\n const nationalNumer = this.textField.value;\n\n const isEmpty = !countryCode \|\| !nationalNumer;\n const isValidLength = nationalNumer && nationalNumer.length >= this.minLength;\n\n if (this.isRequired && isEmpty) {\n return { valueMissing: true };\n }\n\n if (this.value) {\n if (!isValidLength) {\n return { tooShort: true };\n }\n\n if (this.isStrictValidation && !this.#isValidParsedValue()) {\n return { patternMismatch: true };\n }\n }\n\n return {};\n }\n\n setSelectionRange(...args) {\n this.textField.setSelectionRange(...args);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback(attrName, oldValue, newValue);\n\n if (oldValue !== newValue) {\n if (attrName === 'default-code' && newValue) {\n this.#handleDefaultCountryCode(newValue);\n } else if (inputRelatedAttrs.includes(attrName)) {\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (commonAttrs.includes(attrName)) {\n this.inputs.forEach((input) => input.setAttribute(attr, newValue));\n } else if (countryAttrs.includes(attrName)) {\n this.comboBox.setAttribute(attr, newValue);\n } else if (phoneAttrs.includes(attrName)) {\n this.textField.setAttribute(attr, newValue);\n }\n }\n\n if (labelTypeAttrs.includes(attrName)) {\n this.#handleLabelTypeAttrs(attrName, newValue);\n }\n\n if (attrName === 'restrict-countries') {\n this.#updateComboBoxItems(this.restrictCountries);\n }\n }\n }\n\n #initInputs() {\n // Sanitize phone input value to filter everything but digits\n this.textField.addEventListener('input', (e) => {\n if (!this.allowAlphanumericInput) {\n const telDigitsRegExp = /^\\d$/;\n const sanitizedInput = e.target.value\n .split('')\n .filter((char) => telDigitsRegExp.test(char))\n .join('');\n e.target.value = sanitizedInput;\n }\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n\n // verify country code item against phone number pattern and replace if needed and country is allowed\n // (e.g. +1 can be US or CA, depending on the pattern)\n this.addEventListener('input', this.#handleSameCountryCodes.bind(this));\n }\n\n #setCountryCode(val) {\n if (!val \|\| val === this.selectedCountryCode) return;\n\n let countryCodeItem = undefined;\n\n if (this.value) {\n // try to parse the phone number, and set country code item according to actual dial code (e.g. `+1` can be `US` or `CA`)\n const code = this.#getCountryCodeByPhoneNumber(`${val}-${this.textField.value}`);\n countryCodeItem = this.#getCountryByCodeId(code);\n }\n\n // in case country code item does not exist (for example: Parsed code is CA for +1 - but Canada is not allowed)\n // then use the first option with same dial code (e.g. in that case - `US` for +1)\n if (!countryCodeItem) {\n countryCodeItem = this.#getCountryByDialCode(val);\n }\n\n // set country code item; in it doesn't exist in list - set `undefined`\n this.comboBox.selectedItem = countryCodeItem;\n }\n\n #setNationalNumber(val) {\n if (this.isFormatValue) {\n val = this.#formatNationalNumber(val);\n }\n\n if (this.textField.value !== val) {\n this.textField.value = val;\n }\n }\n\n #formatNationalNumber(nationalNumber = '') {\n // re-initialize AsYouType if country code is outdated\n if (!this.#ayt \|\| this.#ayt.country !== this.selectedCountryCode) {\n this.#ayt = new AsYouType(this.selectedCountryCode);\n }\n\n // reset previous AsYouType input\n this.#ayt.reset();\n\n const formattedVal = this.#ayt.input(nationalNumber);\n\n return formattedVal \|\| nationalNumber;\n }\n\n #isValidParsedValue() {\n const parsed = parsePhoneNumberFromString(this.value);\n\n return (\n !!parsed && // Parsed successfully (not undefined)\n !!parsed.isValid?.() && // Parsed object is valid\n !!parsed.country && // Parsed object with a country code\n !!this.#isAllowedCountry(parsed.country) // Parsed with allowed country code\n );\n }\n\n #isAllowedCountry(countryCode) {\n if (!this.restrictCountries.length) {\n return true;\n }\n\n return this.restrictCountries.includes(countryCode);\n }\n\n // return country item by dial code `data-id` (e.g. `+1`)\n #getCountryByDialCode(dialCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-id') === dialCode) \|\| undefined;\n }\n\n // return country item by country code `data-country-code` (e.g. `US`)\n #getCountryByCodeId(countryCode) {\n return this.comboBox.items?.find((c) => c.getAttribute('data-country-code') === countryCode);\n }\n\n #getCountryCodeByPhoneNumber(val) {\n if (!val) return undefined;\n const parsed = parsePhoneNumberFromString(val);\n if (!parsed?.country) return undefined;\n const foundCountryItem = this.#getCountryByCodeId(parsed.country);\n return foundCountryItem?.getAttribute('data-country-code');\n }\n\n #updateComboBoxItems(restrictCountries) {\n const items = restrictCountries.length\n ? CountryCodes.filter((c) => restrictCountries.includes(c.code))\n : CountryCodes;\n\n this.querySelector('descope-combo-box').innerHTML = items\n .map((item) => comboBoxItem(item))\n .join('');\n }\n\n #handleDefaultCountryCode(countryCode) {\n if (!this.comboBox.value) {\n const countryCodeItem = this.#getCountryByCodeId(countryCode);\n // When replacing the input component (inserting internal component into text-field) -\n // Vaadin resets the input's value. We use setTimeout in order to make sure this happens\n // after the reset.\n if (countryCodeItem) {\n setTimeout(() => {\n this.comboBox.selectedItem = countryCodeItem;\n });\n }\n }\n }\n\n #handleSameCountryCodes() {\n if (!this.value) return;\n\n const country = this.#getCountryCodeByPhoneNumber(this.value);\n\n if (!country) return;\n\n // re-set country code if needed (same coutnry code for different countries, e.g. +1 for US or CA)\n if (this.selectedCountryCode !== country) {\n const foundCountryItem = this.#getCountryByCodeId(country);\n // if found country is defined in country list then set it, otherwise - clear phone number\n if (foundCountryItem) {\n this.comboBox.selectedItem = foundCountryItem;\n }\n }\n }\n\n #handleLabelTypeAttrs(attrName, newValue) {\n // set or remove label attributes from inner text/combo components on `label-type` change\n const attr = mapAttrs[attrName] \|\| attrName;\n\n if (attrName === 'label-type') {\n this.#handleLabelTypeChange(newValue);\n }\n // on inner components label attr change - set label attributes for text/combo components\n // only if label-type is `floating`\n else if (this.getAttribute('label-type') === 'floating') {\n if (attrName === 'country-input-label') {\n this.comboBox.setAttribute(attr, newValue);\n } else if (attrName === 'label') {\n this.textField.setAttribute(attr, newValue);\n }\n }\n }\n\n #handleLabelTypeChange(newValue) {\n if (newValue === 'floating') {\n // on change to `floating` label - set inner components `label` and `placeholder`\n this.comboBox.setAttribute('label', this.getAttribute('country-input-label') \|\| '');\n this.comboBox.setAttribute(\n 'placeholder',\n this.getAttribute('country-input-placeholder') \|\| ''\n );\n this.textField.setAttribute('label', this.getAttribute('label') \|\| '');\n this.textField.setAttribute(\n 'placeholder',\n this.getAttribute('phone-input-placeholder') \|\| ''\n );\n } else {\n // for other cases - reset inner components label-type and labels\n this.inputs.forEach((input) => input.removeAttribute('label'));\n }\n }\n}\n\nexport default PhoneFieldInternal;\n","import '@descope-ui/descope-combo-box';\nimport '../../../descope-text-field';\n\nimport PhoneFieldInternal, { componentName } from './PhoneFieldInternal';\n\ncustomElements.define(componentName, PhoneFieldInternal);\n","import './descope-phone-field-internal';\nimport '@descope-ui/descope-combo-box';\nimport '../../descope-text-field';\n\nimport { componentName, PhoneFieldClass } from './PhoneFieldClass';\n\ncustomElements.define(componentName, PhoneFieldClass);\n\nexport { PhoneFieldClass, componentName };\n"],"names":["customElements","define","comboBoxItem","code","dialCode","name","country","toLowerCase","getCountryFlag","parsePhoneNumber","val","value","countryCode","phoneNumber","parsed","countryCallingCode","nationalNumber","phone","split","componentName","observedAttrs","TextFieldClass","mappings","proxyProps","useProxyTargets","superclass","observedAttributes","concat","icon","init","super","renderCopyToClipboard","shouldRender","this","remove","iconInitConfig","title","style","iconCopiedConfig","Object","assign","document","createElement","slot","baseElement","appendChild","addEventListener","navigator","clipboard","writeText","setTimeout","onLabelClick","focus","attributeChangedCallback","attrName","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","slots","wrappedEleName","cssVarList","inputOutlineWidth","inputOutlineOffset","excludeAttrsSync","textVars","comboVars","C","host","label","requiredIndicator","inputField","internalAfter","countryCodeInput","phoneInput","separator","errorMessage","helperText","selector","PhoneFieldClass","fontSize","property","fontFamily","overlay","hostWidth","hostDirection","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","countryCodeInputWidth","countryCodeDropdownWidth","phoneInputWidth","horizontalPadding","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","errorMessageFontSize","inputValueTextColor","inputPlaceholderTextColor","inputPlaceholderColor","overlayItemBackgroundColor","inputOutlineStyle","inputOutlineColor","valueInputHeight","valueInputMarginBottom","marginInlineStart","CountryCodes","template","innerHTML","content","cloneNode","inputElement","shadowRoot","querySelector","includeAttrs","countryCodeItems","countryCodeValue","phoneNumberInputEle","countryCodeInputData","countryCodes","Array","from","map","ele","getAttribute","commonAttrs","countryAttrs","phoneAttrs","labelTypeAttrs","mapAttrs","inputRelatedAttrs","BaseInputClass","baseSelector","constructor","item","join","comboBox","textField","inputs","customValueTransformFn","items","allowAlphanumericInput","defaultCode","selectionStart","minLength","parseInt","selectedCountryCode","selectedItem","restrictCountries","attr","filter","Boolean","isFormatValue","isStrictValidation","e","isTrusted","getValidity","nationalNumer","isEmpty","isValidLength","length","isRequired","valueMissing","tooShort","patternMismatch","setSelectionRange","args","oldValue","newValue","includes","forEach","input","setAttribute","telDigitsRegExp","sanitizedInput","target","char","test","handleFocusEventsDispatching","handleInputEventDispatching","bind","countryCodeItem","reset","isValid","find","c","undefined","foundCountryItem","removeAttribute"],"sourceRoot":""}

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

@@ -1,5 +1,5 @@
 /*! For license information please see phone-fields-descope-phone-input-box-field-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[4043,8657],{9035:(t,e,i)=>{i.d(e,{A:()=>c,T:()=>s});var n=i(3393),r=i(97810),o=i(92259),a=i(10473),l=i(23530);const s=(0,r.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],p={"phone-input-placeholder":"placeholder"},u=(0,n.y)({componentName:s,baseSelector:"div"}),c=class extends u{static get observedAttributes(){return[].concat(u.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])}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#r(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.#o()||!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=p[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#a(t.target.value);this.isFormatValue&&this.#l(e)&&(e=this.#s(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#d(this.textField.value),e=this.#r(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#r(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#r(t){return t.replace(/\D/g,"")}#d(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#o(){const t=(0,a.l)(this.value);return!(!t||!t.isValid?.()||!t.country||!this.#p(t.country)||this.defaultCode&&this.defaultCode!==t.country)}#p(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#a(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}#s(t=""){const e=this.defaultCode||this.#u(t);return e?(this.#t&&this.#t.country===e||(this.#t=new l.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#u(t){const e=(0,a.l)(t);return e?.country||""}#l(t){return!!(0,o.W)(t)}}},11284:(t,e,i)=>{i(52733),i(27136)},16306:(t,e,i)=>{i.d(e,{TQ:()=>u,Ul:()=>w});var n=i(9035),r=i(97810),o=i(9696),a=i(79365),l=i(79275),s=i(51680),d=i(73551);const p=l.w.cssVarList,u=(0,r.xE)("phone-input-box-field"),{host:c,label:h,inputElement:g,requiredIndicator:f,inputField:m,internalComponent:y,internalComponentAfter:b,phoneInput:v,errorMessage:x,helperText:C}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},internalComponent:{selector:"descope-phone-field-internal-input-box"},internalComponentAfter:{selector:"descope-phone-field-internal-input-box::after"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},w=(0,o.Zz)((0,a.RF)({mappings:{fontSize:[c,m,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,x,C],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...v,property:"padding-left"},{...v,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...x,property:"color"},errorMessageIcon:{...x,property:"background-image"},errorMessageIconSize:{...x,property:"background-size"},errorMessageIconPadding:{...x,property:"padding-inline-start"},errorMessageIconRepeat:{...x,property:"background-repeat"},errorMessageIconPosition:{...x,property:"background-position"},errorMessageFontSize:{...x,property:"font-size"},inputValueTextColor:{...v,property:p.inputValueTextColor},inputPlaceholderTextColor:{...v,property:p.inputPlaceholderColor},inputBorderStyle:{...b,property:"border-style"},inputBorderWidth:{...b,property:"border-width"},inputBorderColor:{...b,property:"border-color"},inputBorderRadius:[{...y,property:"border-radius"},{...b,property:"border-radius"}],inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...g,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,a.Yg,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${n.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input","restrict-countries","format-value","strict-validation","data-errormessage-type-mismatch"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(w.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},18330:(t,e,i)=>{i.d(e,{f:()=>r});var n=i(44099);class r 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})}}},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)},27136:(t,e,i)=>{i.d(e,{A:()=>h}),i(86689);var n=i(13256),r=i(82901),o=i(90676),a=i(81488),l=i(86314),s=i(87550),d=i(18330),p=i(37436),u=i(37720);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,o.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([[4043,8657],{9035:(t,e,i)=>{i.d(e,{A:()=>c,T:()=>s});var n=i(3393),r=i(97810),o=i(92259),a=i(10473),l=i(23530);const s=(0,r.xE)("phone-field-internal-input-box"),d=["disabled","size","readonly","phone-input-placeholder","name","maxlength","autocomplete","label-type"],p={"phone-input-placeholder":"placeholder"},u=(0,n.y)({componentName:s,baseSelector:"div"}),c=class extends u{static get observedAttributes(){return[].concat(u.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])}getValidity(){const t=/^\+?\d{1,4}-?(?:\d-?){1,15}$/,e=this.#r(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.#o()||!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=p[t]||t;this.textField.setAttribute(e,i)}}#n(t){let e=this.#a(t.target.value);this.isFormatValue&&this.#l(e)&&(e=this.#s(e)),t.target.value=e}#e(){if(!this.defaultDialCode)return this.textField.value;const t=this.#d(this.textField.value),e=this.#r(t);return[this.defaultDialCode,e].join("-")}#i(){return this.defaultDialCode?(0,a.l)([this.defaultDialCode,this.#r(this.textField.value)].filter(Boolean).join("")):(0,a.l)(this.textField.value)}#r(t){return t.replace(/\D/g,"")}#d(t){if("+"===this.textField.value?.[0]){const e=new RegExp(`^\\${this.defaultDialCode}`);return t.replace(e,"")}return t}#o(){const t=(0,a.l)(this.value);return!(!t||!t.isValid?.()||!t.country||!this.#p(t.country)||this.defaultCode&&this.defaultCode!==t.country)}#p(t){return!this.restrictCountries.length||this.restrictCountries.includes(t)}#a(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}#s(t=""){const e=this.defaultCode||this.#u(t);return e?(this.#t&&this.#t.country===e||(this.#t=new l.Q(e)),this.#t.reset(),this.#t.input(t)||t):t}#u(t){const e=(0,a.l)(t);return e?.country||""}#l(t){return!!(0,o.W)(t)}}},11284:(t,e,i)=>{i(52733),i(27136)},16306:(t,e,i)=>{i.d(e,{TQ:()=>u,Ul:()=>w});var n=i(9035),r=i(97810),o=i(9696),a=i(79365),l=i(79275),s=i(51680),d=i(73551);const p=l.w.cssVarList,u=(0,r.xE)("phone-input-box-field"),{host:c,label:h,inputElement:g,requiredIndicator:f,inputField:m,internalComponent:y,internalComponentAfter:b,phoneInput:x,errorMessage:v,helperText:C}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"> input:placeholder-shown"},inputElement:{selector:"input"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},inputField:{selector:()=>"vaadin-text-field::part(input-field)"},internalComponent:{selector:"descope-phone-field-internal-input-box"},internalComponentAfter:{selector:"descope-phone-field-internal-input-box::after"},phoneInput:{selector:()=>"descope-text-field"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},w=(0,o.Zz)((0,a.RF)({mappings:{fontSize:[c,m,{selector:l.w.componentName,property:l.w.cssVarList.fontSize}],fontFamily:[h,v,C],hostWidth:{...c,property:"width"},hostMinWidth:{...c,property:"min-width"},hostDirection:{...c,property:"direction"},inputHorizontalPadding:[{...x,property:"padding-left"},{...x,property:"padding-right"}],labelFontSize:{...h,property:"font-size"},labelFontWeight:{...h,property:"font-weight"},labelTextColor:[{...h,property:"color"},{...h,property:"-webkit-text-fill-color"},{...f,property:"color"}],labelRequiredIndicator:{...f,property:"content"},errorMessageTextColor:{...v,property:"color"},errorMessageIcon:{...v,property:"background-image"},errorMessageIconSize:{...v,property:"background-size"},errorMessageIconPadding:{...v,property:"padding-inline-start"},errorMessageIconRepeat:{...v,property:"background-repeat"},errorMessageIconPosition:{...v,property:"background-position"},errorMessageFontSize:{...v,property:"font-size"},inputValueTextColor:{...x,property:p.inputValueTextColor},inputPlaceholderTextColor:{...x,property:p.inputPlaceholderColor},inputBorderStyle:{...b,property:"border-style"},inputBorderWidth:{...b,property:"border-width"},inputBorderColor:{...b,property:"border-color"},inputBorderRadius:[{...y,property:"border-radius"},{...b,property:"border-radius"}],inputOutlineStyle:{...y,property:"outline-style"},inputOutlineColor:{...y,property:"outline-color"},inputOutlineWidth:{...y,property:"outline-width"},inputOutlineOffset:{...y,property:"outline-offset"},labelPosition:{...h,property:"position"},labelTopPosition:{...h,property:"top"},labelHorizontalPosition:[{...h,property:"left"},{...h,property:"right"}],inputTransformY:{...h,property:"transform"},inputTransition:{...h,property:"transition"},marginInlineStart:{...h,property:"margin-inline-start"},valueInputHeight:{...g,property:"height"},valueInputMarginBottom:{selector:l.w.componentName,property:p.valueInputMarginBottom}}}),a.VO,a.Yg,(0,a.OZ)({proxyProps:["value","selectionStart"]}),(t=>class extends t{static get CountryCodes(){return s.A}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t\t<${n.T}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${n.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(n.T),(0,r.EA)(this.shadowRoot.host,this.inputElement,{includeAttrs:["size","minlength","maxlength","default-code","disabled","phone-input-placeholder","label","label-type","allow-alphanumeric-input","restrict-countries","format-value","strict-validation","data-errormessage-type-mismatch"]})}get phoneNumberInputEle(){return this.inputElement?.phoneNumberInputEle}}))((0,a.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n      box-sizing: border-box;\n    }\n    ${(0,d.cy)(w.cssVarList)}\n    ${(0,d.I4)("vaadin-text-field")}\n    ${(0,d.kG)("vaadin-text-field")}\n    ${(0,d.X6)()}\n\n    vaadin-text-field {\n      width: 100%;\n      box-sizing: border-box;\n      padding: 0;\n    }\n    vaadin-text-field[focus-ring]::part(input-field) {\n      box-shadow: none;\n    }\n    vaadin-text-field::before {\n      height: 0;\n    }\n    vaadin-text-field::part(input-field) {\n      padding: 0;\n      background: transparent;\n      -webkit-mask-image: none;\n    }\n    descope-phone-field-internal-input-box {\n      -webkit-mask-image: none;\n      padding: 0;\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box > div {\n      width: 100%;\n    }\n    descope-phone-field-internal-input-box descope-text-field {\n      ${p.inputOutlineWidth}: 0;\n      ${p.inputOutlineOffset}: 0;\n    }\n    descope-phone-field-internal-input-box::after {\n      content: '';\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      box-sizing: border-box;\n      pointer-events: none;\n    }\n    descope-text-field {\n      flex-grow: 1;\n      width: 100%;\n      direction: ltr;\n    }\n    vaadin-text-field[readonly] > input:placeholder-shown {\n      opacity: 1;\n    }\n    vaadin-text-field::part(input-field)::after {\n      border: none;\n    }\n\n    vaadin-text-field[label-type="floating"]:not([focused])[readonly] input:placeholder-shown {\n      opacity: 0;\n    }\n    vaadin-text-field[label-type="floating"]:not([focused])[disabled] input:placeholder-shown {\n      opacity: 0;\n    }\n\n    ${(0,d.$J)("vaadin-text-field")}\n    ${(0,d.Kl)()}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:u}))},18330:(t,e,i)=>{i.d(e,{f:()=>r});var n=i(44099);class r 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})}}},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)},27136:(t,e,i)=>{i.d(e,{A:()=>h}),i(86689);var n=i(13256),r=i(82901),o=i(90676),a=i(81488),l=i(86314),s=i(87550),d=i(18330),p=i(37436),u=i(37720);const c=t=>class extends((0,p.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new d.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,s.cp)((0,o.q)(n.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return n.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;