se-design 0.0.112 → 0.0.113

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 (222) hide show
  1. package/dist/assets/style.css +1 -1
  2. package/dist/components/Banner/index.d.ts +4 -0
  3. package/dist/components/LabelChip/index.d.ts +1 -0
  4. package/dist/components/SearchBox/index.d.ts +13 -0
  5. package/dist/components/index.d.ts +1 -0
  6. package/dist/index.js +26 -24
  7. package/dist/index.js.map +1 -1
  8. package/dist/index100.js +1 -1
  9. package/dist/index100.js.map +1 -1
  10. package/dist/index101.js +2 -2
  11. package/dist/index101.js.map +1 -1
  12. package/dist/index102.js +2 -2
  13. package/dist/index102.js.map +1 -1
  14. package/dist/index103.js +2 -2
  15. package/dist/index103.js.map +1 -1
  16. package/dist/index104.js +2 -2
  17. package/dist/index104.js.map +1 -1
  18. package/dist/index105.js +1 -1
  19. package/dist/index105.js.map +1 -1
  20. package/dist/index106.js +1 -1
  21. package/dist/index106.js.map +1 -1
  22. package/dist/index107.js +1 -1
  23. package/dist/index107.js.map +1 -1
  24. package/dist/index108.js +1 -1
  25. package/dist/index108.js.map +1 -1
  26. package/dist/index109.js +2 -2
  27. package/dist/index109.js.map +1 -1
  28. package/dist/index110.js +2 -2
  29. package/dist/index110.js.map +1 -1
  30. package/dist/index111.js +2 -2
  31. package/dist/index111.js.map +1 -1
  32. package/dist/index112.js +2 -149
  33. package/dist/index112.js.map +1 -1
  34. package/dist/index113.js +152 -0
  35. package/dist/index113.js.map +1 -0
  36. package/dist/index124.js +15 -0
  37. package/dist/index124.js.map +1 -0
  38. package/dist/index132.js +1233 -5
  39. package/dist/index132.js.map +1 -1
  40. package/dist/index133.js +9 -169
  41. package/dist/index133.js.map +1 -1
  42. package/dist/index134.js +10 -11
  43. package/dist/index134.js.map +1 -1
  44. package/dist/index135.js +4 -5
  45. package/dist/index135.js.map +1 -1
  46. package/dist/index136.js +170 -6
  47. package/dist/index136.js.map +1 -1
  48. package/dist/index137.js +11 -38
  49. package/dist/index137.js.map +1 -1
  50. package/dist/index138.js +6 -2
  51. package/dist/index138.js.map +1 -1
  52. package/dist/index139.js +5 -7
  53. package/dist/index139.js.map +1 -1
  54. package/dist/index140.js +36 -325
  55. package/dist/index140.js.map +1 -1
  56. package/dist/index141.js +2 -50
  57. package/dist/index141.js.map +1 -1
  58. package/dist/index142.js +8 -2
  59. package/dist/index142.js.map +1 -1
  60. package/dist/index143.js +323 -72
  61. package/dist/index143.js.map +1 -1
  62. package/dist/index144.js +47 -90
  63. package/dist/index144.js.map +1 -1
  64. package/dist/index145.js +2 -52
  65. package/dist/index145.js.map +1 -1
  66. package/dist/index146.js +75 -7
  67. package/dist/index146.js.map +1 -1
  68. package/dist/index147.js +92 -4
  69. package/dist/index147.js.map +1 -1
  70. package/dist/index148.js +48 -48
  71. package/dist/index148.js.map +1 -1
  72. package/dist/index149.js +8 -2
  73. package/dist/index149.js.map +1 -1
  74. package/dist/index150.js +5 -2
  75. package/dist/index150.js.map +1 -1
  76. package/dist/index151.js +55 -0
  77. package/dist/index151.js.map +1 -0
  78. package/dist/index152.js +5 -0
  79. package/dist/index152.js.map +1 -0
  80. package/dist/index153.js +5 -0
  81. package/dist/index153.js.map +1 -0
  82. package/dist/index27.js +34 -22
  83. package/dist/index27.js.map +1 -1
  84. package/dist/index36.js +75 -31
  85. package/dist/index36.js.map +1 -1
  86. package/dist/index37.js +26 -44
  87. package/dist/index37.js.map +1 -1
  88. package/dist/index38.js +45 -64
  89. package/dist/index38.js.map +1 -1
  90. package/dist/index39.js +65 -60
  91. package/dist/index39.js.map +1 -1
  92. package/dist/index4.js +68 -68
  93. package/dist/index40.js +61 -69
  94. package/dist/index40.js.map +1 -1
  95. package/dist/index41.js +68 -81
  96. package/dist/index41.js.map +1 -1
  97. package/dist/index42.js +84 -35
  98. package/dist/index42.js.map +1 -1
  99. package/dist/index43.js +34 -26
  100. package/dist/index43.js.map +1 -1
  101. package/dist/index44.js +28 -28
  102. package/dist/index44.js.map +1 -1
  103. package/dist/index45.js +30 -2
  104. package/dist/index45.js.map +1 -1
  105. package/dist/index46.js +1 -1
  106. package/dist/index46.js.map +1 -1
  107. package/dist/index47.js +1 -1
  108. package/dist/index47.js.map +1 -1
  109. package/dist/index48.js +1 -1
  110. package/dist/index48.js.map +1 -1
  111. package/dist/index49.js +1 -1
  112. package/dist/index49.js.map +1 -1
  113. package/dist/index50.js +1 -1
  114. package/dist/index50.js.map +1 -1
  115. package/dist/index51.js +1 -1
  116. package/dist/index51.js.map +1 -1
  117. package/dist/index52.js +1 -1
  118. package/dist/index52.js.map +1 -1
  119. package/dist/index53.js +1 -1
  120. package/dist/index53.js.map +1 -1
  121. package/dist/index54.js +1 -1
  122. package/dist/index54.js.map +1 -1
  123. package/dist/index55.js +1 -1
  124. package/dist/index55.js.map +1 -1
  125. package/dist/index56.js +1 -1
  126. package/dist/index56.js.map +1 -1
  127. package/dist/index57.js +1 -1
  128. package/dist/index57.js.map +1 -1
  129. package/dist/index58.js +1 -1
  130. package/dist/index58.js.map +1 -1
  131. package/dist/index59.js +1 -1
  132. package/dist/index59.js.map +1 -1
  133. package/dist/index60.js +2 -2
  134. package/dist/index60.js.map +1 -1
  135. package/dist/index61.js +2 -2
  136. package/dist/index61.js.map +1 -1
  137. package/dist/index62.js +1 -1
  138. package/dist/index62.js.map +1 -1
  139. package/dist/index63.js +1 -1
  140. package/dist/index63.js.map +1 -1
  141. package/dist/index64.js +1 -1
  142. package/dist/index64.js.map +1 -1
  143. package/dist/index65.js +1 -1
  144. package/dist/index65.js.map +1 -1
  145. package/dist/index66.js +1 -1
  146. package/dist/index66.js.map +1 -1
  147. package/dist/index67.js +2 -2
  148. package/dist/index67.js.map +1 -1
  149. package/dist/index68.js +2 -2
  150. package/dist/index68.js.map +1 -1
  151. package/dist/index69.js +1 -1
  152. package/dist/index69.js.map +1 -1
  153. package/dist/index70.js +1 -1
  154. package/dist/index70.js.map +1 -1
  155. package/dist/index71.js +1 -1
  156. package/dist/index71.js.map +1 -1
  157. package/dist/index72.js +2 -2
  158. package/dist/index72.js.map +1 -1
  159. package/dist/index73.js +1 -1
  160. package/dist/index73.js.map +1 -1
  161. package/dist/index74.js +2 -2
  162. package/dist/index74.js.map +1 -1
  163. package/dist/index75.js +1 -1
  164. package/dist/index75.js.map +1 -1
  165. package/dist/index76.js +1 -1
  166. package/dist/index76.js.map +1 -1
  167. package/dist/index77.js +1 -1
  168. package/dist/index77.js.map +1 -1
  169. package/dist/index78.js +1 -1
  170. package/dist/index78.js.map +1 -1
  171. package/dist/index79.js +1 -1
  172. package/dist/index79.js.map +1 -1
  173. package/dist/index8.js +21 -18
  174. package/dist/index8.js.map +1 -1
  175. package/dist/index80.js +1 -1
  176. package/dist/index80.js.map +1 -1
  177. package/dist/index81.js +1 -1
  178. package/dist/index81.js.map +1 -1
  179. package/dist/index82.js +1 -1
  180. package/dist/index82.js.map +1 -1
  181. package/dist/index83.js +1 -1
  182. package/dist/index83.js.map +1 -1
  183. package/dist/index84.js +1 -1
  184. package/dist/index84.js.map +1 -1
  185. package/dist/index85.js +1 -1
  186. package/dist/index85.js.map +1 -1
  187. package/dist/index86.js +1 -1
  188. package/dist/index86.js.map +1 -1
  189. package/dist/index87.js +1 -1
  190. package/dist/index87.js.map +1 -1
  191. package/dist/index88.js +2 -2
  192. package/dist/index88.js.map +1 -1
  193. package/dist/index89.js +2 -2
  194. package/dist/index89.js.map +1 -1
  195. package/dist/index90.js +2 -2
  196. package/dist/index90.js.map +1 -1
  197. package/dist/index91.js +1 -1
  198. package/dist/index91.js.map +1 -1
  199. package/dist/index92.js +1 -1
  200. package/dist/index92.js.map +1 -1
  201. package/dist/index93.js +1 -1
  202. package/dist/index93.js.map +1 -1
  203. package/dist/index94.js +1 -1
  204. package/dist/index94.js.map +1 -1
  205. package/dist/index95.js +1 -1
  206. package/dist/index95.js.map +1 -1
  207. package/dist/index96.js +1 -1
  208. package/dist/index96.js.map +1 -1
  209. package/dist/index97.js +1 -1
  210. package/dist/index97.js.map +1 -1
  211. package/dist/index98.js +2 -2
  212. package/dist/index98.js.map +1 -1
  213. package/dist/index99.js +2 -2
  214. package/dist/index99.js.map +1 -1
  215. package/dist/typographyMixin.scss +60 -21
  216. package/package.json +1 -1
  217. package/dist/index129.js +0 -1236
  218. package/dist/index129.js.map +0 -1
  219. package/dist/index130.js +0 -13
  220. package/dist/index130.js.map +0 -1
  221. package/dist/index131.js +0 -13
  222. package/dist/index131.js.map +0 -1
package/dist/index40.js CHANGED
@@ -1,77 +1,69 @@
1
- import e, { useRef as B, useEffect as C } from "react";
1
+ var v = Object.defineProperty;
2
+ var n = Object.getOwnPropertySymbols;
3
+ var x = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
4
+ var i = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, l = (r, e) => {
5
+ for (var t in e || (e = {}))
6
+ x.call(e, t) && i(r, t, e[t]);
7
+ if (n)
8
+ for (var t of n(e))
9
+ w.call(e, t) && i(r, t, e[t]);
10
+ return r;
11
+ };
12
+ import a, { useState as b, useEffect as E } from "react";
13
+ import { Icon as m } from "./index4.js";
2
14
  /* empty css */
3
- const _ = /* @__PURE__ */ e.memo(({
4
- value: f,
5
- onChange: n,
6
- disabled: p = !1,
7
- maxLength: c,
8
- tag: k = "input",
9
- error: i = !1,
10
- errorMessage: b,
11
- label: u,
12
- placeholder: x,
13
- suggestions: l = [],
14
- customRenderSuggestions: r,
15
- onSuggestionClick: E
15
+ const s = {
16
+ toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]",
17
+ success: "linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)",
18
+ error: "linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)",
19
+ info: "var(--color-gray-700)",
20
+ toastMessageCtn: "flex items-center gap-2",
21
+ toastMessage: "text-[var(--color-white)] text-center word-break",
22
+ closeIconCtn: "absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1"
23
+ }, M = ({
24
+ toastBarCtnClassName: r = "",
25
+ type: e,
26
+ message: t = "",
27
+ shouldAutoClose: u = !1,
28
+ delay: d = 5e3,
29
+ onClose: o = () => {
30
+ },
31
+ containerStyle: f = {}
16
32
  }) => {
17
- const [o, m] = e.useState([...l]), [h, s] = e.useState(!1), d = B(null), I = e.useCallback((a) => {
18
- const t = a.target.value;
19
- if (r)
20
- n(t, !1);
21
- else if (n(t), t === "")
22
- m([...l]);
23
- else if (t) {
24
- const y = l == null ? void 0 : l.filter((N) => {
25
- var w;
26
- return typeof N == "string" && N.toLowerCase().includes((w = t == null ? void 0 : t.toLowerCase()) != null ? w : "");
27
- });
28
- m(y);
33
+ const [g, p] = b(!0);
34
+ E(() => {
35
+ if (u) {
36
+ const h = setTimeout(() => {
37
+ c();
38
+ }, d);
39
+ return () => clearTimeout(h);
29
40
  }
30
- }, [n, l, r]);
31
- C(() => {
32
- r && m([...l]);
33
- }, [l]), C(() => {
34
- const a = (t) => {
35
- d.current && !d.current.contains(t.target) && s(!1);
36
- };
37
- return document.addEventListener("mousedown", a), () => {
38
- document.removeEventListener("mousedown", a);
39
- };
40
41
  }, []);
41
- const $ = () => {
42
- s(!0);
43
- }, v = (a) => {
44
- n(a, !0), s(!1), E && E(a);
42
+ const c = () => {
43
+ setTimeout(() => {
44
+ p(!1), setTimeout(() => {
45
+ o == null || o();
46
+ }, 300);
47
+ }, 300);
45
48
  };
46
- return /* @__PURE__ */ e.createElement("div", {
47
- className: "main-container-autocomplete-se-design",
48
- ref: d
49
- }, u && /* @__PURE__ */ e.createElement("label", {
50
- className: "label-container"
51
- }, u), /* @__PURE__ */ e.createElement(k, {
52
- value: f,
53
- onChange: I,
54
- onClick: $,
55
- disabled: p,
56
- className: `${i ? "input-container-error" : "input-container-default"} ${p ? "input-container-disabled" : ""}`,
57
- maxLength: c,
58
- placeholder: x
59
- }), /* @__PURE__ */ e.createElement("div", {
60
- className: `${i ? "error-and-max-word" : "max-word-container"}`
61
- }, i && /* @__PURE__ */ e.createElement("div", {
62
- id: "error-message",
63
- className: "error-message"
64
- }, b), c && /* @__PURE__ */ e.createElement("div", {
65
- className: "max-word"
66
- }, f.length, "/", c)), h && o.length > 0 && /* @__PURE__ */ e.createElement("div", {
67
- className: "suggestions-list"
68
- }, r ? r(o, v) : o.map((a, t) => /* @__PURE__ */ e.createElement("div", {
69
- key: t,
70
- className: "suggestion-item",
71
- onClick: () => v(a)
72
- }, a))));
73
- });
49
+ return /* @__PURE__ */ a.createElement("div", {
50
+ className: `se-design-toast-bar ${r} ${s.toastBarCtn} ${g ? "show" : "hide"}`,
51
+ style: l({
52
+ background: s[e]
53
+ }, f)
54
+ }, /* @__PURE__ */ a.createElement("div", {
55
+ className: s.toastMessageCtn
56
+ }, /* @__PURE__ */ a.createElement(m, {
57
+ name: e === "info" ? "info-white" : "checked-circle-white"
58
+ }), /* @__PURE__ */ a.createElement("span", {
59
+ className: s.toastMessage
60
+ }, t)), /* @__PURE__ */ a.createElement(m, {
61
+ name: "white-close",
62
+ className: s.closeIconCtn,
63
+ onClick: c
64
+ }));
65
+ };
74
66
  export {
75
- _ as AutoCompleteInput
67
+ M as ToastBar
76
68
  };
77
69
  //# sourceMappingURL=index40.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index40.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string, fromSuggestion?: boolean) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n suggestions?: string[];\n customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n customRenderSuggestions,\n onSuggestionClick\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const handleInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n\n if (customRenderSuggestions) {\n onChange(inputValue, false);\n } else {\n onChange(inputValue);\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else if (inputValue) {\n const filtered = suggestions?.filter((suggestion) =>\n typeof suggestion === 'string' &&\n suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions(filtered);\n }\n }\n },\n [onChange, suggestions, customRenderSuggestions]\n );\n\n useEffect(() => {\n if (customRenderSuggestions) {\n setFilteredSuggestions([...suggestions]);\n }\n }, [suggestions]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setSuggestionBoxVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n onChange(suggestion, true);\n setSuggestionBoxVisible(false);\n onSuggestionClick && onSuggestionClick(suggestion);\n };\n\n return (\n <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n {label && <label className=\"label-container\">{label}</label>}\n {React.createElement(tag, {\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n maxLength,\n placeholder\n })}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && (\n <div id=\"error-message\" className=\"error-message\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div className=\"suggestions-list\">\n {customRenderSuggestions\n ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n : filteredSuggestions.map((suggestion, index) => (\n <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n {suggestion}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","onClick","id","length","map","index","key"],"mappings":"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"}
1
+ {"version":3,"file":"index40.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n toastBarCtnClassName?: string;\n type: \"success\" | \"error\" | \"info\";\n message: string;\n shouldAutoClose?: boolean;\n delay?: number;\n onClose?: () => void;\n containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\n success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n info: \"var(--color-gray-700)\", \n toastMessageCtn: \"flex items-center gap-2\",\n toastMessage: \"text-[var(--color-white)] text-center word-break\",\n closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n toastBarCtnClassName = \"\",\n type,\n message = \"\",\n shouldAutoClose = false,\n delay = 5000,\n onClose = () => {},\n containerStyle = {}\n}) => {\n const [visible, setVisible] = useState(true);\n\n useEffect(() => {\n if (shouldAutoClose) {\n const timer = setTimeout(() => {\n handleClose();\n }, delay);\n return () => clearTimeout(timer);\n }\n }, []);\n\n const handleClose = () => {\n setTimeout(() => {\n setVisible(false);\n setTimeout(() => {\n onClose?.();\n }, 300);\n }, 300);\n };\n\n return (\n <div\n className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n style={{ background: classNames[type], ...containerStyle }}\n >\n <div className={classNames.toastMessageCtn} >\n <Icon name={type === \"info\" ? \"info-white\" : \"checked-circle-white\"} />\n <span className={classNames.toastMessage}>{message}</span>\n </div>\n <Icon name=\"white-close\" className={classNames.closeIconCtn} onClick={handleClose} />\n </div>\n );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","onClick"],"mappings":";;;;;;;;;;;AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,eAAe;AAAA,EAAA,CAAyB,GACtEa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAcJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACjF;AAET;"}
package/dist/index41.js CHANGED
@@ -1,90 +1,77 @@
1
- import t, { useState as o, useRef as R, useEffect as C } from "react";
1
+ import e, { useRef as B, useEffect as C } from "react";
2
2
  /* empty css */
3
- import c from "./index129.js";
4
- import { Icon as g } from "./index4.js";
5
- const O = ({
6
- onCountrycodeChange: E,
7
- onNumberChange: f,
8
- error: m,
9
- errorMessage: N,
10
- value: s
3
+ const _ = /* @__PURE__ */ e.memo(({
4
+ value: f,
5
+ onChange: n,
6
+ disabled: p = !1,
7
+ maxLength: c,
8
+ tag: k = "input",
9
+ error: i = !1,
10
+ errorMessage: b,
11
+ label: u,
12
+ placeholder: x,
13
+ suggestions: l = [],
14
+ customRenderSuggestions: r,
15
+ onSuggestionClick: E
11
16
  }) => {
12
- const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
13
- e && (u(e), E(e)), i(!1);
14
- }, V = (e) => {
15
- const n = e.target.value;
16
- _(n);
17
- const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
18
- v(y);
19
- };
17
+ const [o, m] = e.useState([...l]), [h, s] = e.useState(!1), d = B(null), I = e.useCallback((a) => {
18
+ const t = a.target.value;
19
+ if (r)
20
+ n(t, !1);
21
+ else if (n(t), t === "")
22
+ m([...l]);
23
+ else if (t) {
24
+ const y = l == null ? void 0 : l.filter((N) => {
25
+ var w;
26
+ return typeof N == "string" && N.toLowerCase().includes((w = t == null ? void 0 : t.toLowerCase()) != null ? w : "");
27
+ });
28
+ m(y);
29
+ }
30
+ }, [n, l, r]);
20
31
  C(() => {
21
- const e = (n) => {
22
- l.current && !l.current.contains(n.target) && i(!1);
32
+ r && m([...l]);
33
+ }, [l]), C(() => {
34
+ const a = (t) => {
35
+ d.current && !d.current.contains(t.target) && s(!1);
36
+ };
37
+ return document.addEventListener("mousedown", a), () => {
38
+ document.removeEventListener("mousedown", a);
23
39
  };
24
- return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
25
- }, []), C(() => {
26
- s && (u(s.countryCode), h(s.number));
27
- }, [s]);
28
- const k = (e) => {
29
- const n = e.replace(/\D/g, "");
30
- console.log("numericValue", n), h(n), f(n);
40
+ }, []);
41
+ const $ = () => {
42
+ s(!0);
43
+ }, v = (a) => {
44
+ n(a, !0), s(!1), E && E(a);
31
45
  };
32
- return /* @__PURE__ */ t.createElement("div", {
33
- className: "phone-input-container-se-design-main-container"
34
- }, /* @__PURE__ */ t.createElement("div", {
35
- className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
36
- ref: l
37
- }, /* @__PURE__ */ t.createElement("div", {
38
- className: "phone-input-container-se-design"
39
- }, /* @__PURE__ */ t.createElement("div", {
40
- className: "phone-input-container-se-design-country-code",
41
- onClick: () => {
42
- i(!r);
43
- }
44
- }, /* @__PURE__ */ t.createElement("img", {
45
- src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
46
- alt: a == null ? void 0 : a.name,
47
- width: "16"
48
- }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
49
- name: "chevron-down",
50
- className: r ? "rotate-180" : ""
51
- })), /* @__PURE__ */ t.createElement("span", {
52
- className: "divider"
53
- }), /* @__PURE__ */ t.createElement("input", {
54
- type: "tel",
55
- placeholder: "Enter phone number",
56
- className: "phone-input-container-se-design-phone-number-input",
57
- onChange: (e) => k(e.target.value),
58
- value: S,
59
- pattern: "[0-9]*"
60
- })), r && /* @__PURE__ */ t.createElement("div", {
61
- className: "phone-input-container-se-design-country-code-list"
62
- }, /* @__PURE__ */ t.createElement("div", {
63
- className: "search-input-wrapper"
64
- }, /* @__PURE__ */ t.createElement(g, {
65
- name: "search",
66
- className: "search-icon"
67
- }), /* @__PURE__ */ t.createElement("input", {
68
- type: "text",
69
- placeholder: "Search",
70
- className: "phone-input-container-se-design-country-code-list-item-input",
71
- onChange: V,
72
- value: L
73
- })), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
74
- key: e.code,
75
- className: "phone-input-container-se-design-country-code-list-item",
76
- onClick: () => b(e.dial_code)
77
- }, /* @__PURE__ */ t.createElement("img", {
78
- src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
79
- alt: e.name,
80
- width: "16"
81
- }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
82
- className: "phone-input-container-se-design-country-code-list-item-no-resuts"
83
- }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
46
+ return /* @__PURE__ */ e.createElement("div", {
47
+ className: "main-container-autocomplete-se-design",
48
+ ref: d
49
+ }, u && /* @__PURE__ */ e.createElement("label", {
50
+ className: "label-container"
51
+ }, u), /* @__PURE__ */ e.createElement(k, {
52
+ value: f,
53
+ onChange: I,
54
+ onClick: $,
55
+ disabled: p,
56
+ className: `${i ? "input-container-error" : "input-container-default"} ${p ? "input-container-disabled" : ""}`,
57
+ maxLength: c,
58
+ placeholder: x
59
+ }), /* @__PURE__ */ e.createElement("div", {
60
+ className: `${i ? "error-and-max-word" : "max-word-container"}`
61
+ }, i && /* @__PURE__ */ e.createElement("div", {
62
+ id: "error-message",
84
63
  className: "error-message"
85
- }, N));
86
- };
64
+ }, b), c && /* @__PURE__ */ e.createElement("div", {
65
+ className: "max-word"
66
+ }, f.length, "/", c)), h && o.length > 0 && /* @__PURE__ */ e.createElement("div", {
67
+ className: "suggestions-list"
68
+ }, r ? r(o, v) : o.map((a, t) => /* @__PURE__ */ e.createElement("div", {
69
+ key: t,
70
+ className: "suggestion-item",
71
+ onClick: () => v(a)
72
+ }, a))));
73
+ });
87
74
  export {
88
- O as PhoneInput
75
+ _ as AutoCompleteInput
89
76
  };
90
77
  //# sourceMappingURL=index41.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index41.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n onCountrycodeChange: (countryCode: string) => void;\n onNumberChange: (number: string) => void;\n error?: boolean;\n errorMessage?: string;\n value?: {\n countryCode: string;\n number: string;\n };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n onCountrycodeChange,\n onNumberChange,\n error,\n errorMessage,\n value\n}) => {\n const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n const [searchValue, setSearchValue] = useState('');\n const [enteredNumber, setEnteredNumber] = useState('');\n const containerRef = useRef<HTMLDivElement>(null);\n\n const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n const handleCountryCodeSelect = (country: string) => {\n if (country) {\n setCountryCode(country);\n onCountrycodeChange(country);\n }\n setDisplaySelectCountryCode(false);\n };\n\n const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setSearchValue(searchValue);\n const filteredCountries = countriesInfoJson.filter(\n (country) =>\n country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.code.toLowerCase().includes(searchValue.toLowerCase())\n );\n setCountriesInfo(filteredCountries);\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setDisplaySelectCountryCode(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n useEffect(() => {\n if (value) {\n setCountryCode(value.countryCode);\n setEnteredNumber(value.number);\n }\n }, [value]);\n\n const handleEnteredNumberChange = (value: string) => {\n const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n console.log('numericValue', numericValue);\n setEnteredNumber(numericValue);\n onNumberChange(numericValue);\n };\n\n return (\n <div className=\"phone-input-container-se-design-main-container\">\n <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n <div className=\"phone-input-container-se-design\">\n <div\n className=\"phone-input-container-se-design-country-code\"\n onClick={() => {\n setDisplaySelectCountryCode(!displaySelectCountryCode);\n }}\n >\n <img\n src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n alt={countryInfo?.name}\n width=\"16\"\n />\n {countryInfo?.dial_code}\n <Icon name=\"chevron-down\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n </div>\n <span className=\"divider\" />\n <input\n type=\"tel\"\n placeholder=\"Enter phone number\"\n className=\"phone-input-container-se-design-phone-number-input\"\n onChange={(event) => handleEnteredNumberChange(event.target.value)}\n value={enteredNumber}\n pattern=\"[0-9]*\"\n />\n </div>\n\n {displaySelectCountryCode && (\n <div className=\"phone-input-container-se-design-country-code-list\">\n <div className=\"search-input-wrapper\">\n <Icon name=\"search\" className=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search\"\n className=\"phone-input-container-se-design-country-code-list-item-input\"\n onChange={handleCountryCodeSearch}\n value={searchValue}\n />\n </div>\n {countriesInfo.length > 0 ? (\n countriesInfo.map((country) => (\n <div\n key={country.code}\n className=\"phone-input-container-se-design-country-code-list-item\"\n onClick={() => handleCountryCodeSelect(country.dial_code)}\n >\n <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n <span>{country.name}</span>\n <span>({country.dial_code})</span>\n </div>\n ))\n ) : (\n <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n )}\n </div>\n )}\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
1
+ {"version":3,"file":"index41.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport './style.scss';\n\nexport interface AutoCompleteInputProps {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string, fromSuggestion?: boolean) => void;\n tag?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n suggestions?: string[];\n customRenderSuggestions?: (suggestions: any, handleSuggestionClick: (suggestion: string) => void) => any;\n onSuggestionClick?: (suggestion: string) => void;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n ({\n value,\n onChange,\n disabled = false,\n maxLength,\n tag = 'input',\n error = false,\n errorMessage,\n label,\n placeholder,\n suggestions = [],\n customRenderSuggestions,\n onSuggestionClick\n }) => {\n const [filteredSuggestions, setFilteredSuggestions] = React.useState<string[]>([...suggestions]);\n const [isSuggestionBoxVisible, setSuggestionBoxVisible] = React.useState<boolean>(false);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const handleInputChange = React.useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n\n if (customRenderSuggestions) {\n onChange(inputValue, false);\n } else {\n onChange(inputValue);\n if (inputValue === '') {\n setFilteredSuggestions([...suggestions]);\n } else if (inputValue) {\n const filtered = suggestions?.filter((suggestion) =>\n typeof suggestion === 'string' &&\n suggestion.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n );\n setFilteredSuggestions(filtered);\n }\n }\n },\n [onChange, suggestions, customRenderSuggestions]\n );\n\n useEffect(() => {\n if (customRenderSuggestions) {\n setFilteredSuggestions([...suggestions]);\n }\n }, [suggestions]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setSuggestionBoxVisible(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, []);\n\n const handleInputClick = () => {\n setSuggestionBoxVisible(true);\n };\n\n const handleSuggestionClick = (suggestion: string) => {\n onChange(suggestion, true);\n setSuggestionBoxVisible(false);\n onSuggestionClick && onSuggestionClick(suggestion);\n };\n\n return (\n <div className=\"main-container-autocomplete-se-design\" ref={containerRef}>\n {label && <label className=\"label-container\">{label}</label>}\n {React.createElement(tag, {\n value: value,\n onChange: handleInputChange,\n onClick: handleInputClick,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n maxLength,\n placeholder\n })}\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n {error && (\n <div id=\"error-message\" className=\"error-message\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div className=\"max-word\">\n {value.length}/{maxLength}\n </div>\n )}\n </div>\n {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n <div className=\"suggestions-list\">\n {customRenderSuggestions\n ? customRenderSuggestions(filteredSuggestions, handleSuggestionClick)\n : filteredSuggestions.map((suggestion, index) => (\n <div key={index} className=\"suggestion-item\" onClick={() => handleSuggestionClick(suggestion)}>\n {suggestion}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","customRenderSuggestions","onSuggestionClick","filteredSuggestions","setFilteredSuggestions","React","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","handleInputChange","useCallback","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleClickOutside","event","current","contains","addEventListener","removeEventListener","handleInputClick","handleSuggestionClick","createElement","className","ref","onClick","id","length","map","index","key"],"mappings":"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"}
package/dist/index42.js CHANGED
@@ -1,41 +1,90 @@
1
- import o from "react";
2
- const m = ({
3
- progress: a,
4
- backgroundColor: n = "#E8E8E8",
5
- progressColor: s = "#0066FF",
6
- size: e = 40,
7
- strokeWidth: r = 4
1
+ import t, { useState as o, useRef as R, useEffect as C } from "react";
2
+ /* empty css */
3
+ import c from "./index132.js";
4
+ import { Icon as g } from "./index4.js";
5
+ const O = ({
6
+ onCountrycodeChange: E,
7
+ onNumberChange: f,
8
+ error: m,
9
+ errorMessage: N,
10
+ value: s
8
11
  }) => {
9
- const t = (e - r) / 2, c = t * 2 * Math.PI, l = c - a / 100 * c;
10
- return /* @__PURE__ */ o.createElement("svg", {
11
- width: e,
12
- height: e,
13
- style: {
14
- transform: "rotate(-90deg)"
12
+ const [w, u] = o((s == null ? void 0 : s.countryCode) || c[0].dial_code), [r, i] = o(!1), [p, v] = o(c), [L, _] = o(""), [S, h] = o(""), l = R(null), a = c.find((e) => e.dial_code === w), b = (e) => {
13
+ e && (u(e), E(e)), i(!1);
14
+ }, V = (e) => {
15
+ const n = e.target.value;
16
+ _(n);
17
+ const y = c.filter((d) => d.name.toLowerCase().includes(n.toLowerCase()) || d.dial_code.toLowerCase().includes(n.toLowerCase()) || d.code.toLowerCase().includes(n.toLowerCase()));
18
+ v(y);
19
+ };
20
+ C(() => {
21
+ const e = (n) => {
22
+ l.current && !l.current.contains(n.target) && i(!1);
23
+ };
24
+ return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
25
+ }, []), C(() => {
26
+ s && (u(s.countryCode), h(s.number));
27
+ }, [s]);
28
+ const k = (e) => {
29
+ const n = e.replace(/\D/g, "");
30
+ console.log("numericValue", n), h(n), f(n);
31
+ };
32
+ return /* @__PURE__ */ t.createElement("div", {
33
+ className: "phone-input-container-se-design-main-container"
34
+ }, /* @__PURE__ */ t.createElement("div", {
35
+ className: `phone-input-container-se-design-main ${m ? "error" : ""}`,
36
+ ref: l
37
+ }, /* @__PURE__ */ t.createElement("div", {
38
+ className: "phone-input-container-se-design"
39
+ }, /* @__PURE__ */ t.createElement("div", {
40
+ className: "phone-input-container-se-design-country-code",
41
+ onClick: () => {
42
+ i(!r);
15
43
  }
16
- }, /* @__PURE__ */ o.createElement("circle", {
17
- cx: e / 2,
18
- cy: e / 2,
19
- r: t,
20
- stroke: n,
21
- strokeWidth: r,
22
- fill: "none"
23
- }), /* @__PURE__ */ o.createElement("circle", {
24
- cx: e / 2,
25
- cy: e / 2,
26
- r: t,
27
- stroke: s,
28
- strokeWidth: r,
29
- strokeDasharray: c,
30
- strokeDashoffset: l,
31
- fill: "none",
32
- strokeLinecap: "round",
33
- style: {
34
- transition: "stroke-dashoffset 0.3s ease"
35
- }
36
- }));
44
+ }, /* @__PURE__ */ t.createElement("img", {
45
+ src: `https://flagcdn.com/${a == null ? void 0 : a.code.toLowerCase()}.svg`,
46
+ alt: a == null ? void 0 : a.name,
47
+ width: "16"
48
+ }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
49
+ name: "chevron-down",
50
+ className: r ? "rotate-180" : ""
51
+ })), /* @__PURE__ */ t.createElement("span", {
52
+ className: "divider"
53
+ }), /* @__PURE__ */ t.createElement("input", {
54
+ type: "tel",
55
+ placeholder: "Enter phone number",
56
+ className: "phone-input-container-se-design-phone-number-input",
57
+ onChange: (e) => k(e.target.value),
58
+ value: S,
59
+ pattern: "[0-9]*"
60
+ })), r && /* @__PURE__ */ t.createElement("div", {
61
+ className: "phone-input-container-se-design-country-code-list"
62
+ }, /* @__PURE__ */ t.createElement("div", {
63
+ className: "search-input-wrapper"
64
+ }, /* @__PURE__ */ t.createElement(g, {
65
+ name: "search",
66
+ className: "search-icon"
67
+ }), /* @__PURE__ */ t.createElement("input", {
68
+ type: "text",
69
+ placeholder: "Search",
70
+ className: "phone-input-container-se-design-country-code-list-item-input",
71
+ onChange: V,
72
+ value: L
73
+ })), p.length > 0 ? p.map((e) => /* @__PURE__ */ t.createElement("div", {
74
+ key: e.code,
75
+ className: "phone-input-container-se-design-country-code-list-item",
76
+ onClick: () => b(e.dial_code)
77
+ }, /* @__PURE__ */ t.createElement("img", {
78
+ src: `https://flagcdn.com/${e.code.toLowerCase()}.svg`,
79
+ alt: e.name,
80
+ width: "16"
81
+ }), /* @__PURE__ */ t.createElement("span", null, e.name), /* @__PURE__ */ t.createElement("span", null, "(", e.dial_code, ")"))) : /* @__PURE__ */ t.createElement("div", {
82
+ className: "phone-input-container-se-design-country-code-list-item-no-resuts"
83
+ }, "No results found"))), m && /* @__PURE__ */ t.createElement("div", {
84
+ className: "error-message"
85
+ }, N));
37
86
  };
38
87
  export {
39
- m as CircularProgressBar
88
+ O as PhoneInput
40
89
  };
41
90
  //# sourceMappingURL=index42.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index42.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n progress: number;\n backgroundColor?: string;\n progressColor?: string;\n size?: number;\n strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n progress,\n backgroundColor = '#E8E8E8',\n progressColor = '#0066FF',\n size = 40,\n strokeWidth = 4\n}: CircularProgressBarProps) => {\n const radius = (size - strokeWidth) / 2;\n const circumference = radius * 2 * Math.PI;\n const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n return (\n <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n {/* Background circle */}\n <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n {/* Progress circle */}\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n stroke={progressColor}\n strokeWidth={strokeWidth}\n strokeDasharray={circumference}\n strokeDashoffset={strokeDashoffset}\n fill=\"none\"\n strokeLinecap=\"round\"\n style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n />\n </svg>\n );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}
1
+ {"version":3,"file":"index42.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n onCountrycodeChange: (countryCode: string) => void;\n onNumberChange: (number: string) => void;\n error?: boolean;\n errorMessage?: string;\n value?: {\n countryCode: string;\n number: string;\n };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n onCountrycodeChange,\n onNumberChange,\n error,\n errorMessage,\n value\n}) => {\n const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n const [searchValue, setSearchValue] = useState('');\n const [enteredNumber, setEnteredNumber] = useState('');\n const containerRef = useRef<HTMLDivElement>(null);\n\n const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n const handleCountryCodeSelect = (country: string) => {\n if (country) {\n setCountryCode(country);\n onCountrycodeChange(country);\n }\n setDisplaySelectCountryCode(false);\n };\n\n const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n const searchValue = event.target.value;\n setSearchValue(searchValue);\n const filteredCountries = countriesInfoJson.filter(\n (country) =>\n country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n country.code.toLowerCase().includes(searchValue.toLowerCase())\n );\n setCountriesInfo(filteredCountries);\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setDisplaySelectCountryCode(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n useEffect(() => {\n if (value) {\n setCountryCode(value.countryCode);\n setEnteredNumber(value.number);\n }\n }, [value]);\n\n const handleEnteredNumberChange = (value: string) => {\n const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n console.log('numericValue', numericValue);\n setEnteredNumber(numericValue);\n onNumberChange(numericValue);\n };\n\n return (\n <div className=\"phone-input-container-se-design-main-container\">\n <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n <div className=\"phone-input-container-se-design\">\n <div\n className=\"phone-input-container-se-design-country-code\"\n onClick={() => {\n setDisplaySelectCountryCode(!displaySelectCountryCode);\n }}\n >\n <img\n src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n alt={countryInfo?.name}\n width=\"16\"\n />\n {countryInfo?.dial_code}\n <Icon name=\"chevron-down\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n </div>\n <span className=\"divider\" />\n <input\n type=\"tel\"\n placeholder=\"Enter phone number\"\n className=\"phone-input-container-se-design-phone-number-input\"\n onChange={(event) => handleEnteredNumberChange(event.target.value)}\n value={enteredNumber}\n pattern=\"[0-9]*\"\n />\n </div>\n\n {displaySelectCountryCode && (\n <div className=\"phone-input-container-se-design-country-code-list\">\n <div className=\"search-input-wrapper\">\n <Icon name=\"search\" className=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search\"\n className=\"phone-input-container-se-design-country-code-list-item-input\"\n onChange={handleCountryCodeSearch}\n value={searchValue}\n />\n </div>\n {countriesInfo.length > 0 ? (\n countriesInfo.map((country) => (\n <div\n key={country.code}\n className=\"phone-input-container-se-design-country-code-list-item\"\n onClick={() => handleCountryCodeSelect(country.dial_code)}\n >\n <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n <span>{country.name}</span>\n <span>({country.dial_code})</span>\n </div>\n ))\n ) : (\n <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n )}\n </div>\n )}\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}