@clubmed/trident-ui 2.0.0-beta.59 → 2.0.0-beta.60

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 (6) hide show
  1. package/package.json +1 -1
  2. package/ui/forms/PhoneFieldSplitInput.js +18 -18
  3. package/ui/forms/PhoneFieldSplitInput.js.map +1 -1
  4. package/ui/helpers/phone/defaultPrefixes.d.ts +1 -0
  5. package/ui/helpers/phone/defaultPrefixes.js +24 -0
  6. package/ui/helpers/phone/defaultPrefixes.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clubmed/trident-ui",
3
- "version": "2.0.0-beta.59",
3
+ "version": "2.0.0-beta.60",
4
4
  "type": "module",
5
5
  "description": "Shared ClubMed React UI components",
6
6
  "keywords": [
package/ui/forms/PhoneFieldSplitInput.js CHANGED
@@ -81,32 +81,32 @@ var _ = (e) => {
81
81
  "bg-white": w !== "disabled",
82
82
  "bg-pearl border-middleGrey": w === "disabled"
83
83
  }),
84
- children: [/* @__PURE__ */ h("select", {
84
+ children: [/* @__PURE__ */ g("div", {
85
+ "aria-hidden": "true",
86
+ className: e("text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8", {
87
+ "border-middleGrey": w === "default",
88
+ "text-black bg-white": w !== "disabled",
89
+ "bg-pearl border-middleGrey text-black": w === "disabled",
90
+ "border-red": w === "error",
91
+ "border-green": w === "success"
92
+ }),
93
+ children: [/* @__PURE__ */ h("span", { children: o.find((e) => e.code === E)?.label ?? E }), /* @__PURE__ */ h(m, {
94
+ name: "ArrowDefaultDown",
95
+ type: "svg",
96
+ width: "24px",
97
+ color: "black"
98
+ })]
99
+ }), /* @__PURE__ */ h("select", {
85
100
  disabled: f,
86
101
  value: E,
87
102
  onChange: (e) => A(e.nativeEvent, e.target.value),
88
- className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent", {
89
- "border-middleGrey focus:border-black active:border-black": w === "default",
90
- "text-black": w !== "disabled",
91
- "bg-pearl border-middleGrey": w === "disabled",
92
- "border-red": w === "error",
93
- "border-green": w === "success",
94
- "pe-[40px]": !0
95
- }),
103
+ className: "opacity-0 absolute inset-0 w-full h-full cursor-pointer",
96
104
  id: `${S}-prefix`,
97
105
  "aria-label": `${C}-prefix`,
98
106
  children: o.map((e) => /* @__PURE__ */ h("option", {
99
107
  value: e.code,
100
- children: e.label ?? e.code
108
+ children: e.fullLabel ?? e.label ?? e.code
101
109
  }, e.code))
102
- }), /* @__PURE__ */ h("div", {
103
- className: "pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1",
104
- children: /* @__PURE__ */ h(m, {
105
- name: "ArrowDefaultDown",
106
- type: "svg",
107
- width: "24px",
108
- color: "black"
109
- })
110
110
  })]
111
111
  }), /* @__PURE__ */ g("div", {
112
112
  className: "relative flex-1",
package/ui/forms/PhoneFieldSplitInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n type ChangeEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport {\n calculateCursorPosition,\n DEFAULT_PHONE_PREFIXES,\n extractDigits,\n formatPhoneDigits,\n formatWithPattern,\n getLiteralPrefixInfo,\n type PhonePrefix,\n stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n prefixes?: PhonePrefix[];\n defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n externalValue?: PhoneValue;\n pattern: string;\n defaultPrefix: string;\n onChange?: PhoneFieldChangeHandler;\n}) => {\n const { externalValue, pattern, defaultPrefix, onChange } = args;\n const numberInputRef = useRef<HTMLInputElement>(null);\n const cursorPositionRef = useRef<number | null>(null);\n const [prefix, setPrefix] = useState(defaultPrefix);\n const [number, setNumber] = useState('');\n\n const emitChange = useCallback(\n (event: Event, nextPrefix: string, nextNumber: string) => {\n if (nextPrefix === prefix && nextNumber === number) {\n return;\n }\n\n const full = `${nextPrefix} ${nextNumber}`.trim();\n\n onChange?.(event, {\n full,\n prefix: nextPrefix,\n number: nextNumber,\n raw: extractDigits(full),\n });\n },\n [number, onChange, prefix],\n );\n\n useEffect(() => {\n if (cursorPositionRef.current !== null && numberInputRef.current) {\n numberInputRef.current.setSelectionRange(\n cursorPositionRef.current,\n cursorPositionRef.current,\n );\n cursorPositionRef.current = null;\n }\n }, [number]);\n\n useEffect(() => {\n if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n setPrefix(externalValue.prefix || defaultPrefix);\n setNumber(externalValue.number || '');\n }\n }, [externalValue, defaultPrefix]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key !== 'Backspace' && e.key !== 'Delete') {\n return;\n }\n\n const cursorPosition = e.currentTarget.selectionStart || 0;\n const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n if (cursorPosition !== selectionEnd) {\n return;\n }\n\n const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n const targetChar =\n e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n if (!targetChar || /\\d/.test(targetChar)) {\n return;\n }\n\n e.preventDefault();\n\n const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n const digitsBeforeCursor = stripLiteralPrefix(\n extractDigits(number.substring(0, cursorPosition)),\n literalPrefixDigits,\n ).length;\n\n let newDigits: string;\n let targetCursorDigits: number;\n\n if (e.key === 'Backspace') {\n if (digitsBeforeCursor === 0) {\n return;\n }\n\n newDigits =\n allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n targetCursorDigits = digitsBeforeCursor - 1;\n } else {\n if (digitsBeforeCursor >= allDigits.length) {\n return;\n }\n\n newDigits =\n allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n targetCursorDigits = digitsBeforeCursor;\n }\n\n const formatted = formatWithPattern(newDigits, pattern);\n cursorPositionRef.current = calculateCursorPosition(\n targetCursorDigits,\n formatted,\n literalPrefixDigits,\n );\n\n setNumber(formatted);\n\n emitChange(e.nativeEvent, prefix, formatted);\n },\n [emitChange, pattern, number, prefix],\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const formattedValue = formatPhoneDigits(\n e.target.value,\n pattern,\n e.target.selectionStart || 0,\n );\n if (!formattedValue) return;\n\n cursorPositionRef.current = formattedValue.nextCursor;\n setNumber(formattedValue.formatted);\n\n emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n },\n [emitChange, pattern, prefix],\n );\n\n const onPrefixChange = useCallback(\n (event: Event, newPrefix: string) => {\n setPrefix(newPrefix);\n\n emitChange(event, newPrefix, number);\n },\n [emitChange, number],\n );\n\n return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n value?: PhoneValue;\n pattern?: string;\n prefixes?: PhoneFieldSplitProps['prefixes'];\n defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n iconType?: IconicTypes;\n validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n id,\n name,\n value: externalValue,\n pattern = '## ## ## ## ##',\n prefixes = DEFAULT_PHONE_PREFIXES,\n defaultPrefix = prefixes[0]?.code || '+1',\n placeholder = '',\n iconType,\n disabled = false,\n required = false,\n validationStatus = 'default',\n onChange,\n ...rest\n}: PhoneFieldSplitInputProps) => {\n const internalId = useId();\n const resolvedId = id ?? internalId;\n const resolvedName = name ?? resolvedId;\n\n const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n usePhoneField({\n externalValue,\n pattern,\n defaultPrefix,\n onChange,\n });\n\n return (\n <div className=\"flex gap-8\">\n <div\n className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n 'bg-white': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n })}\n >\n <select\n disabled={disabled}\n value={prefix}\n onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n className={clsx(\n 'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent',\n {\n 'border-middleGrey focus:border-black active:border-black':\n internalStatus === 'default',\n 'text-black': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n 'pe-[40px]': true,\n },\n )}\n id={`${resolvedId}-prefix`}\n aria-label={`${resolvedName}-prefix`}\n >\n {(prefixes as PhonePrefix[]).map((p) => (\n <option key={p.code} value={p.code}>\n {p.label ?? p.code}\n </option>\n ))}\n </select>\n\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1\">\n <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n </div>\n </div>\n\n <div className=\"relative flex-1\">\n <input\n {...(rest as Record<string, unknown>)}\n ref={numberInputRef}\n type=\"tel\"\n disabled={disabled}\n required={required}\n value={number}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n className={clsx(\n 'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n {\n 'border-middleGrey focus:border-black active:border-black':\n internalStatus === 'default',\n 'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n 'bg-white text-black': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n },\n )}\n aria-label={`${resolvedName}-number`}\n />\n\n <div\n className={clsx(\n 'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n {\n 'text-grey': internalStatus === 'disabled',\n 'text-red': internalStatus === 'error',\n 'text-green': internalStatus === 'success',\n },\n )}\n >\n <span className=\"flex gap-x-8\">\n {internalStatus === 'error' && (\n <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n )}\n {internalStatus === 'success' && (\n <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n )}\n </span>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n type ChangeEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport {\n calculateCursorPosition,\n DEFAULT_PHONE_PREFIXES,\n extractDigits,\n formatPhoneDigits,\n formatWithPattern,\n getLiteralPrefixInfo,\n type PhonePrefix,\n stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n prefixes?: PhonePrefix[];\n defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n externalValue?: PhoneValue;\n pattern: string;\n defaultPrefix: string;\n onChange?: PhoneFieldChangeHandler;\n}) => {\n const { externalValue, pattern, defaultPrefix, onChange } = args;\n const numberInputRef = useRef<HTMLInputElement>(null);\n const cursorPositionRef = useRef<number | null>(null);\n const [prefix, setPrefix] = useState(defaultPrefix);\n const [number, setNumber] = useState('');\n\n const emitChange = useCallback(\n (event: Event, nextPrefix: string, nextNumber: string) => {\n if (nextPrefix === prefix && nextNumber === number) {\n return;\n }\n\n const full = `${nextPrefix} ${nextNumber}`.trim();\n\n onChange?.(event, {\n full,\n prefix: nextPrefix,\n number: nextNumber,\n raw: extractDigits(full),\n });\n },\n [number, onChange, prefix],\n );\n\n useEffect(() => {\n if (cursorPositionRef.current !== null && numberInputRef.current) {\n numberInputRef.current.setSelectionRange(\n cursorPositionRef.current,\n cursorPositionRef.current,\n );\n cursorPositionRef.current = null;\n }\n }, [number]);\n\n useEffect(() => {\n if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n setPrefix(externalValue.prefix || defaultPrefix);\n setNumber(externalValue.number || '');\n }\n }, [externalValue, defaultPrefix]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key !== 'Backspace' && e.key !== 'Delete') {\n return;\n }\n\n const cursorPosition = e.currentTarget.selectionStart || 0;\n const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n if (cursorPosition !== selectionEnd) {\n return;\n }\n\n const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n const targetChar =\n e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n if (!targetChar || /\\d/.test(targetChar)) {\n return;\n }\n\n e.preventDefault();\n\n const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n const digitsBeforeCursor = stripLiteralPrefix(\n extractDigits(number.substring(0, cursorPosition)),\n literalPrefixDigits,\n ).length;\n\n let newDigits: string;\n let targetCursorDigits: number;\n\n if (e.key === 'Backspace') {\n if (digitsBeforeCursor === 0) {\n return;\n }\n\n newDigits =\n allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n targetCursorDigits = digitsBeforeCursor - 1;\n } else {\n if (digitsBeforeCursor >= allDigits.length) {\n return;\n }\n\n newDigits =\n allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n targetCursorDigits = digitsBeforeCursor;\n }\n\n const formatted = formatWithPattern(newDigits, pattern);\n cursorPositionRef.current = calculateCursorPosition(\n targetCursorDigits,\n formatted,\n literalPrefixDigits,\n );\n\n setNumber(formatted);\n\n emitChange(e.nativeEvent, prefix, formatted);\n },\n [emitChange, pattern, number, prefix],\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const formattedValue = formatPhoneDigits(\n e.target.value,\n pattern,\n e.target.selectionStart || 0,\n );\n if (!formattedValue) return;\n\n cursorPositionRef.current = formattedValue.nextCursor;\n setNumber(formattedValue.formatted);\n\n emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n },\n [emitChange, pattern, prefix],\n );\n\n const onPrefixChange = useCallback(\n (event: Event, newPrefix: string) => {\n setPrefix(newPrefix);\n\n emitChange(event, newPrefix, number);\n },\n [emitChange, number],\n );\n\n return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n value?: PhoneValue;\n pattern?: string;\n prefixes?: PhoneFieldSplitProps['prefixes'];\n defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n iconType?: IconicTypes;\n validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n id,\n name,\n value: externalValue,\n pattern = '## ## ## ## ##',\n prefixes = DEFAULT_PHONE_PREFIXES,\n defaultPrefix = prefixes[0]?.code || '+1',\n placeholder = '',\n iconType,\n disabled = false,\n required = false,\n validationStatus = 'default',\n onChange,\n ...rest\n}: PhoneFieldSplitInputProps) => {\n const internalId = useId();\n const resolvedId = id ?? internalId;\n const resolvedName = name ?? resolvedId;\n\n const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n usePhoneField({\n externalValue,\n pattern,\n defaultPrefix,\n onChange,\n });\n\n return (\n <div className=\"flex gap-8\">\n <div\n className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n 'bg-white': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n })}\n >\n {/* Visible fake select showing the short label */}\n <div\n aria-hidden=\"true\"\n className={clsx(\n 'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8',\n {\n 'border-middleGrey': internalStatus === 'default',\n 'text-black bg-white': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n },\n )}\n >\n <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n </div>\n\n {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n <select\n disabled={disabled}\n value={prefix}\n onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n className=\"opacity-0 absolute inset-0 w-full h-full cursor-pointer\"\n id={`${resolvedId}-prefix`}\n aria-label={`${resolvedName}-prefix`}\n >\n {(prefixes as PhonePrefix[]).map((p) => (\n <option key={p.code} value={p.code}>\n {p.fullLabel ?? p.label ?? p.code}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"relative flex-1\">\n <input\n {...(rest as Record<string, unknown>)}\n ref={numberInputRef}\n type=\"tel\"\n disabled={disabled}\n required={required}\n value={number}\n onChange={onInputChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n className={clsx(\n 'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n {\n 'border-middleGrey focus:border-black active:border-black':\n internalStatus === 'default',\n 'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n 'bg-white text-black': internalStatus !== 'disabled',\n 'bg-pearl border-middleGrey': internalStatus === 'disabled',\n 'border-red': internalStatus === 'error',\n 'border-green': internalStatus === 'success',\n },\n )}\n aria-label={`${resolvedName}-number`}\n />\n\n <div\n className={clsx(\n 'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n {\n 'text-grey': internalStatus === 'disabled',\n 'text-red': internalStatus === 'error',\n 'text-green': internalStatus === 'success',\n },\n )}\n >\n <span className=\"flex gap-x-8\">\n {internalStatus === 'error' && (\n <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n )}\n {internalStatus === 'success' && (\n <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n )}\n </span>\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAiCA,IAAM,KAAiB,MAKjB;CACJ,IAAM,EAAE,kBAAe,YAAS,kBAAe,gBAAa,GACtD,IAAiB,EAAyB,KAAK,EAC/C,IAAoB,EAAsB,KAAK,EAC/C,CAAC,GAAQ,KAAa,EAAS,EAAc,EAC7C,CAAC,GAAQ,KAAa,EAAS,GAAG,EAElC,IAAa,GAChB,GAAc,GAAoB,MAAuB;AACxD,MAAI,MAAe,KAAU,MAAe,EAC1C;EAGF,IAAM,IAAO,GAAG,EAAW,GAAG,IAAa,MAAM;AAEjD,MAAW,GAAO;GAChB;GACA,QAAQ;GACR,QAAQ;GACR,KAAK,EAAc,EAAK;GACzB,CAAC;IAEJ;EAAC;EAAQ;EAAU;EAAO,CAC3B;AA8GD,QA5GA,QAAgB;AACd,EAAI,EAAkB,YAAY,QAAQ,EAAe,YACvD,EAAe,QAAQ,kBACrB,EAAkB,SAClB,EAAkB,QACnB,EACD,EAAkB,UAAU;IAE7B,CAAC,EAAO,CAAC,EAEZ,QAAgB;AACd,EAAI,KAAiB,OAAO,KAAkB,YAAY,UAAU,MAClE,EAAU,EAAc,UAAU,EAAc,EAChD,EAAU,EAAc,UAAU,GAAG;IAEtC,CAAC,GAAe,EAAc,CAAC,EA6F3B;EAAE;EAAgB;EAAQ;EAAQ,WA3FvB,GACf,MAAuC;AACtC,OAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,SACrC;GAGF,IAAM,IAAiB,EAAE,cAAc,kBAAkB;AAGzD,OAAI,OAFiB,EAAE,cAAc,gBAAgB,GAGnD;GAGF,IAAM,EAAE,2BAAwB,EAAqB,EAAQ,EAEvD,IACJ,EAAE,QAAQ,cAAc,EAAO,IAAiB,KAAK,EAAO;AAE9D,OAAI,CAAC,KAAc,KAAK,KAAK,EAAW,CACtC;AAGF,KAAE,gBAAgB;GAElB,IAAM,IAAY,EAAmB,EAAc,EAAO,EAAE,EAAoB,EAC1E,IAAqB,EACzB,EAAc,EAAO,UAAU,GAAG,EAAe,CAAC,EAClD,EACD,CAAC,QAEE,GACA;AAEJ,OAAI,EAAE,QAAQ,aAAa;AACzB,QAAI,MAAuB,EACzB;AAKF,IAFA,IACE,EAAU,MAAM,GAAG,IAAqB,EAAE,GAAG,EAAU,MAAM,EAAmB,EAClF,IAAqB,IAAqB;UACrC;AACL,QAAI,KAAsB,EAAU,OAClC;AAKF,IAFA,IACE,EAAU,MAAM,GAAG,EAAmB,GAAG,EAAU,MAAM,IAAqB,EAAE,EAClF,IAAqB;;GAGvB,IAAM,IAAY,EAAkB,GAAW,EAAQ;AASvD,GARA,EAAkB,UAAU,EAC1B,GACA,GACA,EACD,EAED,EAAU,EAAU,EAEpB,EAAW,EAAE,aAAa,GAAQ,EAAU;KAE9C;GAAC;GAAY;GAAS;GAAQ;GAAO,CACtC;EA4BmD,eA1B9B,GACnB,MAAqC;GACpC,IAAM,IAAiB,EACrB,EAAE,OAAO,OACT,GACA,EAAE,OAAO,kBAAkB,EAC5B;AACI,SAEL,EAAkB,UAAU,EAAe,YAC3C,EAAU,EAAe,UAAU,EAEnC,EAAW,EAAE,aAAa,GAAQ,EAAe,UAAU;KAE7D;GAAC;GAAY;GAAS;GAAO,CAC9B;EAWkE,gBAT5C,GACpB,GAAc,MAAsB;AAGnC,GAFA,EAAU,EAAU,EAEpB,EAAW,GAAO,GAAW,EAAO;KAEtC,CAAC,GAAY,EAAO,CACrB;EAEkF;GAcxE,KAAwB,EACnC,OACA,SACA,OAAO,GACP,aAAU,kBACV,cAAW,GACX,mBAAgB,EAAS,IAAI,QAAQ,MACrC,iBAAc,IACd,aACA,cAAW,IACX,cAAW,IACX,sBAAmB,WACnB,aACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,GAAO,EACpB,IAAa,KAAM,GACnB,IAAe,KAAQ,GAEvB,IAAiB,EAAkB;EAAE,YAAY;EAAU;EAAkB,CAAC,EAC9E,EAAE,mBAAgB,WAAQ,WAAQ,cAAW,kBAAe,sBAChE,EAAc;EACZ;EACA;EACA;EACA;EACD,CAAC;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GACE,WAAW,EAAK,2CAA2C;IACzD,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAOE,kBAAC,OAAD;IACE,eAAY;IACZ,WAAW,EACT,4HACA;KACE,qBAAqB,MAAmB;KACxC,uBAAuB,MAAmB;KAC1C,yCAAyC,MAAmB;KAC5D,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;cAXH,CAaE,kBAAC,QAAD,EAAA,UAAQ,EAA2B,MAAM,MAAM,EAAE,SAAS,EAAO,EAAE,SAAS,GAAc,CAAA,EAC1F,kBAAC,GAAD;KAAM,MAAK;KAAmB,MAAK;KAAM,OAAM;KAAO,OAAM;KAAU,CAAA,CAClE;OAGN,kBAAC,UAAD;IACY;IACV,OAAO;IACP,WAAW,MAAM,EAAe,EAAE,aAAa,EAAE,OAAO,MAAM;IAC9D,WAAU;IACV,IAAI,GAAG,EAAW;IAClB,cAAY,GAAG,EAAa;cAE1B,EAA2B,KAAK,MAChC,kBAAC,UAAD;KAAqB,OAAO,EAAE;eAC3B,EAAE,aAAa,EAAE,SAAS,EAAE;KACtB,EAFI,EAAE,KAEN,CACT;IACK,CAAA,CACL;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAK;IACL,KAAK;IACL,MAAK;IACK;IACA;IACV,OAAO;IACP,UAAU;IACC;IACE;IACb,WAAW,EACT,2FACA;KACE,4DACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY,GAAG,EAAa;IAC5B,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,kFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB,CACG,MAAmB,WAClB,kBAAC,GAAD;MAAM,MAAK;MAAe,OAAM;MAAO,MAAM;MAAY,CAAA,EAE1D,MAAmB,aAClB,kBAAC,GAAD;MAAM,MAAK;MAAe,OAAM;MAAO,MAAM;MAAY,CAAA,CAEtD;;IACH,CAAA,CACF;KACF"}
package/ui/helpers/phone/defaultPrefixes.d.ts CHANGED
@@ -4,6 +4,7 @@
4
4
  export interface PhonePrefix {
5
5
  code: string;
6
6
  label?: string;
7
+ fullLabel?: string;
7
8
  country?: string;
8
9
  }
9
10
  /**
package/ui/helpers/phone/defaultPrefixes.js CHANGED
@@ -3,121 +3,145 @@ var e = [
3
3
  {
4
4
  code: "+33",
5
5
  label: "Fra +33",
6
+ fullLabel: "France +33",
6
7
  country: "FR"
7
8
  },
8
9
  {
9
10
  code: "+1",
10
11
  label: "USA +1",
12
+ fullLabel: "United States +1",
11
13
  country: "US"
12
14
  },
13
15
  {
14
16
  code: "+44",
15
17
  label: "UK +44",
18
+ fullLabel: "United Kingdom +44",
16
19
  country: "GB"
17
20
  },
18
21
  {
19
22
  code: "+49",
20
23
  label: "Ger +49",
24
+ fullLabel: "Germany +49",
21
25
  country: "DE"
22
26
  },
23
27
  {
24
28
  code: "+39",
25
29
  label: "Ita +39",
30
+ fullLabel: "Italy +39",
26
31
  country: "IT"
27
32
  },
28
33
  {
29
34
  code: "+34",
30
35
  label: "Spn +34",
36
+ fullLabel: "Spain +34",
31
37
  country: "ES"
32
38
  },
33
39
  {
34
40
  code: "+86",
35
41
  label: "Chn +86",
42
+ fullLabel: "China +86",
36
43
  country: "CN"
37
44
  },
38
45
  {
39
46
  code: "+91",
40
47
  label: "Ind +91",
48
+ fullLabel: "India +91",
41
49
  country: "IN"
42
50
  },
43
51
  {
44
52
  code: "+81",
45
53
  label: "JP +81",
54
+ fullLabel: "Japan +81",
46
55
  country: "JP"
47
56
  },
48
57
  {
49
58
  code: "+82",
50
59
  label: "Kr +82",
60
+ fullLabel: "South Korea +82",
51
61
  country: "KR"
52
62
  },
53
63
  {
54
64
  code: "+7",
55
65
  label: "Rus +7",
66
+ fullLabel: "Russia +7",
56
67
  country: "RU"
57
68
  },
58
69
  {
59
70
  code: "+61",
60
71
  label: "Aus +61",
72
+ fullLabel: "Australia +61",
61
73
  country: "AU"
62
74
  },
63
75
  {
64
76
  code: "+55",
65
77
  label: "Bra +55",
78
+ fullLabel: "Brazil +55",
66
79
  country: "BR"
67
80
  },
68
81
  {
69
82
  code: "+52",
70
83
  label: "Mex +52",
84
+ fullLabel: "Mexico +52",
71
85
  country: "MX"
72
86
  },
73
87
  {
74
88
  code: "+31",
75
89
  label: "NL +31",
90
+ fullLabel: "Netherlands +31",
76
91
  country: "NL"
77
92
  },
78
93
  {
79
94
  code: "+46",
80
95
  label: "Swe +46",
96
+ fullLabel: "Sweden +46",
81
97
  country: "SE"
82
98
  },
83
99
  {
84
100
  code: "+41",
85
101
  label: "Swi +41",
102
+ fullLabel: "Switzerland +41",
86
103
  country: "CH"
87
104
  },
88
105
  {
89
106
  code: "+32",
90
107
  label: "Bel +32",
108
+ fullLabel: "Belgium +32",
91
109
  country: "BE"
92
110
  },
93
111
  {
94
112
  code: "+48",
95
113
  label: "Pol +48",
114
+ fullLabel: "Poland +48",
96
115
  country: "PL"
97
116
  },
98
117
  {
99
118
  code: "+351",
100
119
  label: "Por +351",
120
+ fullLabel: "Portugal +351",
101
121
  country: "PT"
102
122
  },
103
123
  {
104
124
  code: "+30",
105
125
  label: "Gre +30",
126
+ fullLabel: "Greece +30",
106
127
  country: "GR"
107
128
  },
108
129
  {
109
130
  code: "+47",
110
131
  label: "Nor +47",
132
+ fullLabel: "Norway +47",
111
133
  country: "NO"
112
134
  },
113
135
  {
114
136
  code: "+45",
115
137
  label: "Den +45",
138
+ fullLabel: "Denmark +45",
116
139
  country: "DK"
117
140
  },
118
141
  {
119
142
  code: "+358",
120
143
  label: "Fin +358",
144
+ fullLabel: "Finland +358",
121
145
  country: "FI"
122
146
  }
123
147
  ];
package/ui/helpers/phone/defaultPrefixes.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"defaultPrefixes.js","names":[],"sources":["../../../../lib/ui/helpers/phone/defaultPrefixes.ts"],"sourcesContent":["/**\n * Default phone number prefixes for common countries\n */\n\nexport interface PhonePrefix {\n code: string;\n label?: string;\n country?: string;\n}\n\n/**\n * List of common country phone prefixes\n * Sorted by popularity/usage frequency\n */\nexport const DEFAULT_PHONE_PREFIXES: PhonePrefix[] = [\n { code: '+33', label: 'Fra +33', country: 'FR' },\n { code: '+1', label: 'USA +1', country: 'US' },\n { code: '+44', label: 'UK +44', country: 'GB' },\n { code: '+49', label: 'Ger +49', country: 'DE' },\n { code: '+39', label: 'Ita +39', country: 'IT' },\n { code: '+34', label: 'Spn +34', country: 'ES' },\n { code: '+86', label: 'Chn +86', country: 'CN' },\n { code: '+91', label: 'Ind +91', country: 'IN' },\n { code: '+81', label: 'JP +81', country: 'JP' },\n { code: '+82', label: 'Kr +82', country: 'KR' },\n { code: '+7', label: 'Rus +7', country: 'RU' },\n { code: '+61', label: 'Aus +61', country: 'AU' },\n { code: '+55', label: 'Bra +55', country: 'BR' },\n { code: '+52', label: 'Mex +52', country: 'MX' },\n { code: '+31', label: 'NL +31', country: 'NL' },\n { code: '+46', label: 'Swe +46', country: 'SE' },\n { code: '+41', label: 'Swi +41', country: 'CH' },\n { code: '+32', label: 'Bel +32', country: 'BE' },\n { code: '+48', label: 'Pol +48', country: 'PL' },\n { code: '+351', label: 'Por +351', country: 'PT' },\n { code: '+30', label: 'Gre +30', country: 'GR' },\n { code: '+47', label: 'Nor +47', country: 'NO' },\n { code: '+45', label: 'Den +45', country: 'DK' },\n { code: '+358', label: 'Fin +358', country: 'FI' },\n];\n"],"mappings":";AAcA,IAAa,IAAwC;CACnD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAM,OAAO;EAAU,SAAS;EAAM;CAC9C;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAM,OAAO;EAAU,SAAS;EAAM;CAC9C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAQ,OAAO;EAAY,SAAS;EAAM;CAClD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAQ,OAAO;EAAY,SAAS;EAAM;CACnD"}
1
+ {"version":3,"file":"defaultPrefixes.js","names":[],"sources":["../../../../lib/ui/helpers/phone/defaultPrefixes.ts"],"sourcesContent":["/**\n * Default phone number prefixes for common countries\n */\n\nexport interface PhonePrefix {\n code: string;\n label?: string;\n fullLabel?: string;\n country?: string;\n}\n\n/**\n * List of common country phone prefixes\n * Sorted by popularity/usage frequency\n */\nexport const DEFAULT_PHONE_PREFIXES: PhonePrefix[] = [\n { code: '+33', label: 'Fra +33', fullLabel: 'France +33', country: 'FR' },\n { code: '+1', label: 'USA +1', fullLabel: 'United States +1', country: 'US' },\n { code: '+44', label: 'UK +44', fullLabel: 'United Kingdom +44', country: 'GB' },\n { code: '+49', label: 'Ger +49', fullLabel: 'Germany +49', country: 'DE' },\n { code: '+39', label: 'Ita +39', fullLabel: 'Italy +39', country: 'IT' },\n { code: '+34', label: 'Spn +34', fullLabel: 'Spain +34', country: 'ES' },\n { code: '+86', label: 'Chn +86', fullLabel: 'China +86', country: 'CN' },\n { code: '+91', label: 'Ind +91', fullLabel: 'India +91', country: 'IN' },\n { code: '+81', label: 'JP +81', fullLabel: 'Japan +81', country: 'JP' },\n { code: '+82', label: 'Kr +82', fullLabel: 'South Korea +82', country: 'KR' },\n { code: '+7', label: 'Rus +7', fullLabel: 'Russia +7', country: 'RU' },\n { code: '+61', label: 'Aus +61', fullLabel: 'Australia +61', country: 'AU' },\n { code: '+55', label: 'Bra +55', fullLabel: 'Brazil +55', country: 'BR' },\n { code: '+52', label: 'Mex +52', fullLabel: 'Mexico +52', country: 'MX' },\n { code: '+31', label: 'NL +31', fullLabel: 'Netherlands +31', country: 'NL' },\n { code: '+46', label: 'Swe +46', fullLabel: 'Sweden +46', country: 'SE' },\n { code: '+41', label: 'Swi +41', fullLabel: 'Switzerland +41', country: 'CH' },\n { code: '+32', label: 'Bel +32', fullLabel: 'Belgium +32', country: 'BE' },\n { code: '+48', label: 'Pol +48', fullLabel: 'Poland +48', country: 'PL' },\n { code: '+351', label: 'Por +351', fullLabel: 'Portugal +351', country: 'PT' },\n { code: '+30', label: 'Gre +30', fullLabel: 'Greece +30', country: 'GR' },\n { code: '+47', label: 'Nor +47', fullLabel: 'Norway +47', country: 'NO' },\n { code: '+45', label: 'Den +45', fullLabel: 'Denmark +45', country: 'DK' },\n { code: '+358', label: 'Fin +358', fullLabel: 'Finland +358', country: 'FI' },\n];\n"],"mappings":";AAeA,IAAa,IAAwC;CACnD;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAM,OAAO;EAAU,WAAW;EAAoB,SAAS;EAAM;CAC7E;EAAE,MAAM;EAAO,OAAO;EAAU,WAAW;EAAsB,SAAS;EAAM;CAChF;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAe,SAAS;EAAM;CAC1E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAa,SAAS;EAAM;CACxE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAa,SAAS;EAAM;CACxE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAa,SAAS;EAAM;CACxE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAa,SAAS;EAAM;CACxE;EAAE,MAAM;EAAO,OAAO;EAAU,WAAW;EAAa,SAAS;EAAM;CACvE;EAAE,MAAM;EAAO,OAAO;EAAU,WAAW;EAAmB,SAAS;EAAM;CAC7E;EAAE,MAAM;EAAM,OAAO;EAAU,WAAW;EAAa,SAAS;EAAM;CACtE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAiB,SAAS;EAAM;CAC5E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAO,OAAO;EAAU,WAAW;EAAmB,SAAS;EAAM;CAC7E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAmB,SAAS;EAAM;CAC9E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAe,SAAS;EAAM;CAC1E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAQ,OAAO;EAAY,WAAW;EAAiB,SAAS;EAAM;CAC9E;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAc,SAAS;EAAM;CACzE;EAAE,MAAM;EAAO,OAAO;EAAW,WAAW;EAAe,SAAS;EAAM;CAC1E;EAAE,MAAM;EAAQ,OAAO;EAAY,WAAW;EAAgB,SAAS;EAAM;CAC9E"}