qaema-ui 0.0.46 → 0.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DatePicker.js +1 -1
- package/dist/components/DropDown.js +49 -49
- package/dist/components/DropDownWithTable/DropDownWithTable.js +57 -57
- package/dist/components/SummaryCard.js +13 -12
- package/dist/components/TotalsSummary.js +16 -15
- package/dist/constants/breakPoints.constant.js +1 -1
- package/dist/hooks/useBreakpointCheck.js +10 -9
- package/dist/styles/Dropdown.styles.d.ts +1 -0
- package/dist/styles/Dropdown.styles.js +3 -3
- package/package.json +1 -1
|
@@ -156,7 +156,7 @@ const Se = i.div`
|
|
|
156
156
|
font-size: ${({ theme: e }) => e.typography.sizes.s4};
|
|
157
157
|
font-weight: 400;
|
|
158
158
|
text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
|
|
159
|
-
line-height: ${({ theme: e }) => e.typography.lineHeights.s};
|
|
159
|
+
/* line-height: ${({ theme: e }) => e.typography.lineHeights.s}; */
|
|
160
160
|
`, Ie = i.span`
|
|
161
161
|
color: ${({ theme: e }) => e.colors.grey.n300};
|
|
162
162
|
font-size: ${({ theme: e }) => e.typography.sizes.s2};
|
|
@@ -1,62 +1,62 @@
|
|
|
1
1
|
import { j as r } from "../_virtual/jsx-runtime.js";
|
|
2
2
|
import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
|
|
3
|
-
import { FaTimes as
|
|
3
|
+
import { FaTimes as W, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
|
|
4
4
|
import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
|
|
5
|
-
import { useTheme as
|
|
6
|
-
import
|
|
5
|
+
import { useTheme as te } from "styled-components";
|
|
6
|
+
import le from "../hooks/useZIndex.js";
|
|
7
7
|
import { useQaemaCoreTranslation as ae } from "../i18n/i18n.js";
|
|
8
|
-
import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as
|
|
8
|
+
import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as z, SelectedTagsContainer as xe, SelectedTag as je } from "../styles/Dropdown.styles.js";
|
|
9
9
|
import { HelperTextWrapper as pe } from "./PhoneInputField.js";
|
|
10
10
|
import Se from "./SearchBar.js";
|
|
11
11
|
import me from "./Spinner.js";
|
|
12
|
-
import
|
|
12
|
+
import F from "./Typography.js";
|
|
13
13
|
const Le = (f) => {
|
|
14
14
|
const {
|
|
15
15
|
label: b,
|
|
16
16
|
options: m,
|
|
17
17
|
// value,
|
|
18
|
-
placeholder:
|
|
19
|
-
optional:
|
|
18
|
+
placeholder: H = "Select Something",
|
|
19
|
+
optional: M = !1,
|
|
20
20
|
error: s = "",
|
|
21
|
-
disabled:
|
|
21
|
+
disabled: h = !1,
|
|
22
22
|
selectIdentifier: D,
|
|
23
|
-
keyIdentifier:
|
|
23
|
+
keyIdentifier: v = "id",
|
|
24
24
|
selectCallBack: j,
|
|
25
|
-
showLeadIcon:
|
|
26
|
-
icon:
|
|
27
|
-
allowSearch:
|
|
28
|
-
searchHandler:
|
|
29
|
-
searchPlaceholder:
|
|
25
|
+
showLeadIcon: N,
|
|
26
|
+
icon: P,
|
|
27
|
+
allowSearch: R,
|
|
28
|
+
searchHandler: A,
|
|
29
|
+
searchPlaceholder: B,
|
|
30
30
|
onToggle: o,
|
|
31
31
|
multiSelect: c = !1,
|
|
32
|
-
isLoading:
|
|
32
|
+
isLoading: Q = !1,
|
|
33
33
|
currentSelectedOptions: y = [],
|
|
34
34
|
isInteractive: I = !1,
|
|
35
|
-
endIcon:
|
|
36
|
-
} = f, u = g(null), p = g(null), d =
|
|
35
|
+
endIcon: T
|
|
36
|
+
} = f, u = g(null), p = g(null), d = te(), { t: k } = ae(), U = g(null), [a, x] = w(y), [i, O] = w(!1), [Z, q] = w(0), $ = P ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = le("dropdown"), S = _(() => {
|
|
37
37
|
var e, n;
|
|
38
38
|
(e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && q(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
|
|
39
39
|
}, []);
|
|
40
40
|
C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
|
|
41
|
-
|
|
41
|
+
x(y);
|
|
42
42
|
}, [y]);
|
|
43
|
-
const J = (e, n,
|
|
43
|
+
const J = (e, n, t, l = "default") => t ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : l === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, E = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[v] === e.value[v] : n.value === e.value), K = (e) => {
|
|
44
44
|
if (c) {
|
|
45
|
-
const n =
|
|
46
|
-
let
|
|
47
|
-
n ?
|
|
45
|
+
const n = E(e);
|
|
46
|
+
let t;
|
|
47
|
+
n ? t = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[v] !== e.value[v] : l.value !== e.value) : t = [...a, e], x(t), j(t.map((l) => l.value));
|
|
48
48
|
} else
|
|
49
|
-
|
|
49
|
+
x([e]), j(e.value);
|
|
50
50
|
}, V = (e) => {
|
|
51
|
-
const n = a.filter((
|
|
52
|
-
|
|
51
|
+
const n = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[v] !== e.value[v] : t.value !== e.value);
|
|
52
|
+
x(n), j(n.map((t) => t.value));
|
|
53
53
|
}, X = () => {
|
|
54
54
|
var e;
|
|
55
|
-
return a.length === 0 ?
|
|
55
|
+
return a.length === 0 ? H : c ? `${a.length} ${k("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
|
|
56
56
|
};
|
|
57
57
|
C(() => {
|
|
58
58
|
const e = (n) => {
|
|
59
|
-
p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (
|
|
59
|
+
p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (O(!1), o == null || o(!1));
|
|
60
60
|
};
|
|
61
61
|
return i && document.addEventListener("mousedown", e), () => {
|
|
62
62
|
document.removeEventListener("mousedown", e);
|
|
@@ -66,47 +66,47 @@ const Le = (f) => {
|
|
|
66
66
|
return /* @__PURE__ */ r.jsxs(se, { children: [
|
|
67
67
|
b && /* @__PURE__ */ r.jsxs(oe, { children: [
|
|
68
68
|
/* @__PURE__ */ r.jsx("label", { children: b }),
|
|
69
|
-
|
|
69
|
+
M && /* @__PURE__ */ r.jsx("span", { children: k("OPTIONAL") })
|
|
70
70
|
] }),
|
|
71
71
|
/* @__PURE__ */ r.jsxs(
|
|
72
72
|
ce,
|
|
73
73
|
{
|
|
74
74
|
show: i,
|
|
75
75
|
onToggle: () => {
|
|
76
|
-
o == null || o(!i),
|
|
76
|
+
o == null || o(!i), O((e) => !e);
|
|
77
77
|
},
|
|
78
78
|
placement: "bottom-start",
|
|
79
79
|
autoClose: c ? "outside" : !0,
|
|
80
80
|
children: [
|
|
81
|
-
/* @__PURE__ */ r.jsx(ue, { disabled:
|
|
81
|
+
/* @__PURE__ */ r.jsx(ue, { disabled: h, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $valid: !s, $isInteractive: I, $hasDyncWidth: !h, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
|
|
82
82
|
/* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
|
|
83
|
-
|
|
83
|
+
N && typeof $ == "function" && /* @__PURE__ */ r.jsx($, {}),
|
|
84
84
|
/* @__PURE__ */ r.jsx(
|
|
85
|
-
|
|
85
|
+
F,
|
|
86
86
|
{
|
|
87
87
|
component: "span",
|
|
88
88
|
variant: "mdText",
|
|
89
|
-
color: J(s, a.length > 0,
|
|
89
|
+
color: J(s, a.length > 0, h, f.variant || "default"),
|
|
90
90
|
children: X()
|
|
91
91
|
}
|
|
92
92
|
)
|
|
93
93
|
] }),
|
|
94
|
-
/* @__PURE__ */ r.jsxs(ie, { children: [
|
|
95
|
-
|
|
96
|
-
!c && a.length > 0 && !
|
|
97
|
-
|
|
94
|
+
(T || !h) && /* @__PURE__ */ r.jsxs(ie, { children: [
|
|
95
|
+
T,
|
|
96
|
+
!c && a.length > 0 && !h && /* @__PURE__ */ r.jsx(
|
|
97
|
+
W,
|
|
98
98
|
{
|
|
99
99
|
style: { cursor: "pointer", marginLeft: "0.5rem" },
|
|
100
100
|
onClick: (e) => {
|
|
101
|
-
e.stopPropagation(),
|
|
101
|
+
e.stopPropagation(), x([]), j(c ? [] : "");
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
104
|
),
|
|
105
|
-
!
|
|
105
|
+
!h && /* @__PURE__ */ r.jsx(ee, {})
|
|
106
106
|
] })
|
|
107
107
|
] }) }) }),
|
|
108
108
|
i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
|
|
109
|
-
|
|
109
|
+
R && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: B, onSearch: A }) }),
|
|
110
110
|
/* @__PURE__ */ r.jsxs(
|
|
111
111
|
ve,
|
|
112
112
|
{
|
|
@@ -117,23 +117,23 @@ const Le = (f) => {
|
|
|
117
117
|
},
|
|
118
118
|
children: [
|
|
119
119
|
m == null ? void 0 : m.map((e) => {
|
|
120
|
-
var
|
|
121
|
-
const n =
|
|
120
|
+
var t, l, L;
|
|
121
|
+
const n = E(e);
|
|
122
122
|
return /* @__PURE__ */ r.jsxs(
|
|
123
|
-
|
|
123
|
+
z,
|
|
124
124
|
{
|
|
125
125
|
onClick: () => K(e),
|
|
126
126
|
$selected: n,
|
|
127
127
|
children: [
|
|
128
128
|
c && (n ? /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
|
|
129
129
|
" ",
|
|
130
|
-
/* @__PURE__ */ r.jsx(
|
|
130
|
+
/* @__PURE__ */ r.jsx(F, { variant: "smText", children: e == null ? void 0 : e.label })
|
|
131
131
|
]
|
|
132
132
|
},
|
|
133
|
-
typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (
|
|
133
|
+
typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (l = (t = e == null ? void 0 : e.value) == null ? void 0 : t[D]) == null ? void 0 : l.toString() : (L = e == null ? void 0 : e.value) == null ? void 0 : L.toString()
|
|
134
134
|
);
|
|
135
135
|
}),
|
|
136
|
-
|
|
136
|
+
Q && /* @__PURE__ */ r.jsx(z, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
|
|
137
137
|
]
|
|
138
138
|
}
|
|
139
139
|
)
|
|
@@ -142,16 +142,16 @@ const Le = (f) => {
|
|
|
142
142
|
}
|
|
143
143
|
),
|
|
144
144
|
c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
|
|
145
|
-
var n,
|
|
145
|
+
var n, t, l;
|
|
146
146
|
return /* @__PURE__ */ r.jsxs(
|
|
147
147
|
je,
|
|
148
148
|
{
|
|
149
149
|
children: [
|
|
150
150
|
e.label,
|
|
151
|
-
/* @__PURE__ */ r.jsx(
|
|
151
|
+
/* @__PURE__ */ r.jsx(W, { onClick: () => V(e) })
|
|
152
152
|
]
|
|
153
153
|
},
|
|
154
|
-
typeof (e == null ? void 0 : e.value) == "object" ? (
|
|
154
|
+
typeof (e == null ? void 0 : e.value) == "object" ? (t = (n = e == null ? void 0 : e.value) == null ? void 0 : n[D]) == null ? void 0 : t.toString() : (l = e == null ? void 0 : e.value) == null ? void 0 : l.toString()
|
|
155
155
|
);
|
|
156
156
|
}) }),
|
|
157
157
|
Y()
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as t } from "../../_virtual/jsx-runtime.js";
|
|
2
2
|
import { useRef as g, useState as v, useCallback as oe, useEffect as D } from "react";
|
|
3
3
|
import { createPortal as le } from "react-dom";
|
|
4
|
-
import { FaTimes as
|
|
4
|
+
import { FaTimes as R, FaAngleDown as ie } from "../../node_modules/react-icons/fa/index.js";
|
|
5
5
|
import { useTheme as se } from "styled-components";
|
|
6
6
|
import { HelperTextWrapper as ae } from "../PhoneInputField.js";
|
|
7
7
|
import ce from "../SearchBar.js";
|
|
@@ -14,32 +14,32 @@ import Te from "./Table/Table.js";
|
|
|
14
14
|
const Ne = (d) => {
|
|
15
15
|
const {
|
|
16
16
|
label: T,
|
|
17
|
-
options:
|
|
18
|
-
placeholder:
|
|
19
|
-
optional:
|
|
17
|
+
options: P,
|
|
18
|
+
placeholder: W = "Select Something",
|
|
19
|
+
optional: z = !1,
|
|
20
20
|
error: s = "",
|
|
21
|
-
disabled:
|
|
21
|
+
disabled: f = !1,
|
|
22
22
|
selectIdentifier: j,
|
|
23
23
|
keyIdentifier: r = "id",
|
|
24
24
|
selectCallBack: w,
|
|
25
|
-
showLeadIcon:
|
|
26
|
-
icon:
|
|
27
|
-
allowSearch:
|
|
28
|
-
searchHandler:
|
|
29
|
-
searchPlaceholder:
|
|
25
|
+
showLeadIcon: F,
|
|
26
|
+
icon: H,
|
|
27
|
+
allowSearch: M,
|
|
28
|
+
searchHandler: N,
|
|
29
|
+
searchPlaceholder: B,
|
|
30
30
|
onToggle: i,
|
|
31
|
-
multiSelect:
|
|
32
|
-
isLoading:
|
|
33
|
-
currentSelectedOptions:
|
|
31
|
+
multiSelect: m = !1,
|
|
32
|
+
isLoading: A = !1,
|
|
33
|
+
currentSelectedOptions: p = [],
|
|
34
34
|
isInteractive: I = !1,
|
|
35
35
|
//Table related props
|
|
36
|
-
columns:
|
|
37
|
-
isTableHeadVisible:
|
|
36
|
+
columns: V,
|
|
37
|
+
isTableHeadVisible: Q = !1,
|
|
38
38
|
getDisplayValue: y,
|
|
39
|
-
isRowDisabled:
|
|
40
|
-
rowClassName:
|
|
41
|
-
endIcon:
|
|
42
|
-
} = d,
|
|
39
|
+
isRowDisabled: X,
|
|
40
|
+
rowClassName: Y,
|
|
41
|
+
endIcon: E
|
|
42
|
+
} = d, x = se(), { t: L } = me(), C = g(null), a = g(null), Z = g(null), q = g(d.currentSelectedOptions !== void 0), [u, b] = v(!1), [G, J] = v(0), [$, K] = v({ top: 0, left: 0 }), [l, S] = v(p), O = H ?? /* @__PURE__ */ t.jsx(t.Fragment, {}), U = fe("dropdown"), h = oe(() => {
|
|
43
43
|
if (a != null && a.current) {
|
|
44
44
|
const e = a.current.getBoundingClientRect();
|
|
45
45
|
J(a.current.offsetWidth / 16), K({
|
|
@@ -48,28 +48,28 @@ const Ne = (d) => {
|
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
50
|
}, []);
|
|
51
|
-
D(() => (u && (
|
|
52
|
-
window.removeEventListener("resize",
|
|
53
|
-
}), [u,
|
|
51
|
+
D(() => (u && (h(), window.addEventListener("resize", h), window.addEventListener("scroll", h, !0)), () => {
|
|
52
|
+
window.removeEventListener("resize", h), window.removeEventListener("scroll", h, !0);
|
|
53
|
+
}), [u, h]), D(() => {
|
|
54
54
|
if (!q.current) return;
|
|
55
|
-
(
|
|
55
|
+
(p.length !== l.length || p.some((n, o) => {
|
|
56
56
|
var c;
|
|
57
57
|
return n[r] !== ((c = l[o]) == null ? void 0 : c[r]);
|
|
58
|
-
})) &&
|
|
59
|
-
}, [
|
|
60
|
-
const _ = (e, n, o, c = "default") => o ?
|
|
61
|
-
if (
|
|
62
|
-
const n =
|
|
58
|
+
})) && S(p);
|
|
59
|
+
}, [p]);
|
|
60
|
+
const _ = (e, n, o, c = "default") => o ? x.colors.grey.n400 : e ? x.colors.state.error.n450 : n ? x.colors.primary.dark.n600 : c === "light-primary" ? x.colors.primary.purple.n450 : x.colors.grey.n300, k = (e) => l.some((n) => typeof n == "object" && typeof e == "object" ? n[r] === e[r] : n.value === e.value), ee = (e) => {
|
|
61
|
+
if (m) {
|
|
62
|
+
const n = k(e);
|
|
63
63
|
let o;
|
|
64
|
-
n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e],
|
|
64
|
+
n ? o = l.filter((c) => typeof c == "object" && typeof e == "object" ? c[r] !== e[r] : c.value !== e.value) : o = [...l, e], S(o), w(o);
|
|
65
65
|
} else
|
|
66
|
-
|
|
66
|
+
S([e]), w(e), b(!1), i == null || i(!1);
|
|
67
67
|
}, te = (e) => {
|
|
68
68
|
const n = l.filter((o) => typeof o == "object" && typeof e == "object" ? o[r] !== e[r] : o.value !== e.value);
|
|
69
|
-
|
|
69
|
+
S(n), w(n);
|
|
70
70
|
}, ne = (e) => {
|
|
71
|
-
if (e.length === 0) return
|
|
72
|
-
if (!
|
|
71
|
+
if (e.length === 0) return W;
|
|
72
|
+
if (!m) {
|
|
73
73
|
const n = e[0];
|
|
74
74
|
if (y)
|
|
75
75
|
return y(n);
|
|
@@ -78,7 +78,7 @@ const Ne = (d) => {
|
|
|
78
78
|
if (r)
|
|
79
79
|
return String(n == null ? void 0 : n[r]);
|
|
80
80
|
}
|
|
81
|
-
return `${e.length} ${
|
|
81
|
+
return `${e.length} ${L("SELECTED")}`;
|
|
82
82
|
};
|
|
83
83
|
D(() => {
|
|
84
84
|
const e = (n) => {
|
|
@@ -92,7 +92,7 @@ const Ne = (d) => {
|
|
|
92
92
|
return /* @__PURE__ */ t.jsxs(he, { children: [
|
|
93
93
|
T && /* @__PURE__ */ t.jsxs(pe, { children: [
|
|
94
94
|
/* @__PURE__ */ t.jsx("label", { children: T }),
|
|
95
|
-
|
|
95
|
+
z && /* @__PURE__ */ t.jsx("span", { children: L("OPTIONAL") })
|
|
96
96
|
] }),
|
|
97
97
|
/* @__PURE__ */ t.jsxs(
|
|
98
98
|
xe,
|
|
@@ -102,33 +102,33 @@ const Ne = (d) => {
|
|
|
102
102
|
i == null || i(!u), b((e) => !e);
|
|
103
103
|
},
|
|
104
104
|
placement: "bottom-start",
|
|
105
|
-
autoClose:
|
|
105
|
+
autoClose: m ? "outside" : !0,
|
|
106
106
|
children: [
|
|
107
|
-
/* @__PURE__ */ t.jsx(Se, { disabled:
|
|
107
|
+
/* @__PURE__ */ t.jsx(Se, { disabled: f, ref: a, $valid: !s, $variant: d.variant || "default", children: /* @__PURE__ */ t.jsx(je, { $valid: !s, $isInteractive: I, $hasDyncWidth: !f, children: /* @__PURE__ */ t.jsxs("div", { className: "title-container", children: [
|
|
108
108
|
/* @__PURE__ */ t.jsxs("div", { className: "heading-container", children: [
|
|
109
|
-
|
|
109
|
+
F && typeof O == "function" && /* @__PURE__ */ t.jsx(O, {}),
|
|
110
110
|
/* @__PURE__ */ t.jsx(
|
|
111
111
|
ue,
|
|
112
112
|
{
|
|
113
113
|
component: "span",
|
|
114
114
|
variant: "mdText",
|
|
115
|
-
color: _(s, l.length > 0,
|
|
115
|
+
color: _(s, l.length > 0, f, d.variant || "default"),
|
|
116
116
|
children: ne(l)
|
|
117
117
|
}
|
|
118
118
|
)
|
|
119
119
|
] }),
|
|
120
|
-
/* @__PURE__ */ t.jsxs(we, { children: [
|
|
121
|
-
|
|
122
|
-
!
|
|
123
|
-
|
|
120
|
+
(E || !f) && /* @__PURE__ */ t.jsxs(we, { children: [
|
|
121
|
+
E,
|
|
122
|
+
!m && l.length > 0 && !f && /* @__PURE__ */ t.jsx(
|
|
123
|
+
R,
|
|
124
124
|
{
|
|
125
125
|
style: { cursor: "pointer", marginLeft: "0.5rem" },
|
|
126
126
|
onClick: (e) => {
|
|
127
|
-
e.stopPropagation(),
|
|
127
|
+
e.stopPropagation(), S([]), w(m ? [] : null);
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
),
|
|
131
|
-
!
|
|
131
|
+
!f && /* @__PURE__ */ t.jsx(ie, {})
|
|
132
132
|
] })
|
|
133
133
|
] }) }) }),
|
|
134
134
|
u && le(
|
|
@@ -140,11 +140,11 @@ const Ne = (d) => {
|
|
|
140
140
|
$zIndex: U,
|
|
141
141
|
style: {
|
|
142
142
|
position: "fixed",
|
|
143
|
-
top: `${
|
|
144
|
-
left: `${
|
|
143
|
+
top: `${$.top}px`,
|
|
144
|
+
left: `${$.left}px`
|
|
145
145
|
},
|
|
146
146
|
children: [
|
|
147
|
-
|
|
147
|
+
M && /* @__PURE__ */ t.jsx(ge, { children: /* @__PURE__ */ t.jsx(ce, { placeholder: B, onSearch: N }) }),
|
|
148
148
|
/* @__PURE__ */ t.jsxs(
|
|
149
149
|
ve,
|
|
150
150
|
{
|
|
@@ -158,16 +158,16 @@ const Ne = (d) => {
|
|
|
158
158
|
Te,
|
|
159
159
|
{
|
|
160
160
|
keyField: r,
|
|
161
|
-
data:
|
|
162
|
-
columns:
|
|
161
|
+
data: P,
|
|
162
|
+
columns: V,
|
|
163
163
|
onRowClick: (e) => ee(e),
|
|
164
|
-
isRowSelected: (e) =>
|
|
165
|
-
isTableHeadVisible:
|
|
166
|
-
isRowDisabled:
|
|
167
|
-
rowClassName:
|
|
164
|
+
isRowSelected: (e) => k(e),
|
|
165
|
+
isTableHeadVisible: Q,
|
|
166
|
+
isRowDisabled: X,
|
|
167
|
+
rowClassName: Y
|
|
168
168
|
}
|
|
169
169
|
),
|
|
170
|
-
|
|
170
|
+
A && /* @__PURE__ */ t.jsx(Ce, { children: /* @__PURE__ */ t.jsx(de, {}) })
|
|
171
171
|
]
|
|
172
172
|
}
|
|
173
173
|
)
|
|
@@ -179,9 +179,9 @@ const Ne = (d) => {
|
|
|
179
179
|
]
|
|
180
180
|
}
|
|
181
181
|
),
|
|
182
|
-
|
|
182
|
+
m && l.length > 0 && /* @__PURE__ */ t.jsx(be, { children: l.map((e) => /* @__PURE__ */ t.jsxs(De, { children: [
|
|
183
183
|
y ? y(e) : String(j ? e[j] : e[r]),
|
|
184
|
-
/* @__PURE__ */ t.jsx(
|
|
184
|
+
/* @__PURE__ */ t.jsx(R, { onClick: () => te(e) })
|
|
185
185
|
] }, String(e[r]))) }),
|
|
186
186
|
re()
|
|
187
187
|
] });
|
|
@@ -3,8 +3,8 @@ import i, { useTheme as y } from "styled-components";
|
|
|
3
3
|
import v from "./AmountItem.js";
|
|
4
4
|
import w from "./Badge.js";
|
|
5
5
|
import j from "./Button.js";
|
|
6
|
-
import
|
|
7
|
-
import { Card as
|
|
6
|
+
import $ from "./CallOutBox.js";
|
|
7
|
+
import { Card as T } from "./Card.js";
|
|
8
8
|
import d from "./Typography.js";
|
|
9
9
|
const S = i.div`
|
|
10
10
|
padding-bottom: ${(r) => r.theme.spacing.s};
|
|
@@ -28,11 +28,12 @@ const S = i.div`
|
|
|
28
28
|
display: flex;
|
|
29
29
|
flex-direction: column;
|
|
30
30
|
gap: ${(r) => r.theme.spacing.s};
|
|
31
|
-
`,
|
|
31
|
+
`, g = i.div`
|
|
32
32
|
display: flex;
|
|
33
33
|
justify-content: space-between;
|
|
34
34
|
align-items: center;
|
|
35
|
-
|
|
35
|
+
gap: ${(r) => r.theme.spacing.xs};
|
|
36
|
+
`, E = i(g)``, f = ({
|
|
36
37
|
variant: r = "text",
|
|
37
38
|
label: o,
|
|
38
39
|
value: l,
|
|
@@ -44,8 +45,8 @@ const S = i.div`
|
|
|
44
45
|
const n = l;
|
|
45
46
|
t = /* @__PURE__ */ e.jsx(w, { ...n });
|
|
46
47
|
} else if (r === "trend") {
|
|
47
|
-
const n = typeof l == "object" && l !== null ? l : { value: l }, a = n.direction ?? "neutral", c = x.colors.state.success.n450, s = x.colors.state.error.n450,
|
|
48
|
-
t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color:
|
|
48
|
+
const n = typeof l == "object" && l !== null ? l : { value: l }, a = n.direction ?? "neutral", c = x.colors.state.success.n450, s = x.colors.state.error.n450, h = a === "up" ? c : a === "down" ? s : p;
|
|
49
|
+
t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color: h, children: typeof n.value == "number" ? n.value.toString() : n.value });
|
|
49
50
|
} else if (r === "component")
|
|
50
51
|
t = l;
|
|
51
52
|
else if (r === "amount") {
|
|
@@ -71,7 +72,7 @@ function z({
|
|
|
71
72
|
callout: a
|
|
72
73
|
}) {
|
|
73
74
|
const c = y();
|
|
74
|
-
return /* @__PURE__ */ e.jsxs(
|
|
75
|
+
return /* @__PURE__ */ e.jsxs(T, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${c.colors.grey.n100}`, children: [
|
|
75
76
|
/* @__PURE__ */ e.jsxs(S, { children: [
|
|
76
77
|
/* @__PURE__ */ e.jsxs(B, { children: [
|
|
77
78
|
/* @__PURE__ */ e.jsx(d, { variant: "h6", weight: "semiBold", children: l }),
|
|
@@ -83,16 +84,16 @@ function z({
|
|
|
83
84
|
/* @__PURE__ */ e.jsx(d, { variant: "caption", color: c.colors.grey.n400, children: p })
|
|
84
85
|
] }),
|
|
85
86
|
/* @__PURE__ */ e.jsxs(R, { children: [
|
|
86
|
-
r.map((s,
|
|
87
|
-
var
|
|
88
|
-
return ((
|
|
87
|
+
r.map((s, u) => {
|
|
88
|
+
var h;
|
|
89
|
+
return ((h = s == null ? void 0 : s.items) == null ? void 0 : h.length) === 0 ? null : /* @__PURE__ */ e.jsxs(V, { children: [
|
|
89
90
|
/* @__PURE__ */ e.jsx(d, { variant: "span", weight: "regular", color: c.colors.grey.n400, children: s.title }),
|
|
90
|
-
s.items.map((m,
|
|
91
|
+
s.items.map((m, b) => /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(f, { variant: m == null ? void 0 : m.variant, label: m.label, value: m.value, color: c.colors.grey.n400 }) }, `${u}-${b}`))
|
|
91
92
|
] }, s.title);
|
|
92
93
|
}),
|
|
93
94
|
o && /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(f, { variant: o == null ? void 0 : o.variant, label: (o == null ? void 0 : o.label) ?? "", value: (o == null ? void 0 : o.value) ?? "", color: c.colors.grey.n400 }) }),
|
|
94
95
|
n && (n == null ? void 0 : n.length) > 0 && n.map((s) => /* @__PURE__ */ e.jsx(j, { ...s == null ? void 0 : s.btnConfig, children: (s == null ? void 0 : s.label) ?? "" })),
|
|
95
|
-
a && /* @__PURE__ */ e.jsx(
|
|
96
|
+
a && /* @__PURE__ */ e.jsx($, { callout: a })
|
|
96
97
|
] })
|
|
97
98
|
] });
|
|
98
99
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { j as
|
|
1
|
+
import { j as t } from "../_virtual/jsx-runtime.js";
|
|
2
2
|
import o from "styled-components";
|
|
3
3
|
import p from "../assets/icons/RiyalIcon.js";
|
|
4
4
|
import { device as n } from "../constants/breakPoints.constant.js";
|
|
@@ -22,7 +22,7 @@ const g = o.div`
|
|
|
22
22
|
@media ${n.tablet} {
|
|
23
23
|
gap: ${({ theme: e }) => e.spacing.l};
|
|
24
24
|
}
|
|
25
|
-
`,
|
|
25
|
+
`, y = o.div`
|
|
26
26
|
display: flex;
|
|
27
27
|
flex-direction: column;
|
|
28
28
|
gap: ${({ theme: e }) => e.spacing.xs};
|
|
@@ -31,7 +31,7 @@ const g = o.div`
|
|
|
31
31
|
@media ${n.tablet} {
|
|
32
32
|
min-width: 9.5rem;
|
|
33
33
|
}
|
|
34
|
-
`,
|
|
34
|
+
`, d = o.div`
|
|
35
35
|
font-family: ${({ theme: e }) => e.fonts.english};
|
|
36
36
|
font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
|
|
37
37
|
font-size: ${({ theme: e }) => e.typography.sizes.s4};
|
|
@@ -45,6 +45,7 @@ const g = o.div`
|
|
|
45
45
|
direction: inherit;
|
|
46
46
|
[dir='rtl'] & {
|
|
47
47
|
flex-direction: row-reverse;
|
|
48
|
+
justify-content: start;
|
|
48
49
|
}
|
|
49
50
|
`, f = o.span`
|
|
50
51
|
font-family: ${({ theme: e }) => e.fonts.arabic};
|
|
@@ -66,22 +67,22 @@ const g = o.div`
|
|
|
66
67
|
direction: ltr;
|
|
67
68
|
unicode-bidi: plaintext;
|
|
68
69
|
`;
|
|
69
|
-
function
|
|
70
|
-
return /* @__PURE__ */
|
|
71
|
-
/* @__PURE__ */
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
s && /* @__PURE__ */
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
|
|
70
|
+
function b({ title: e, items: r, showCurrencyIcon: s = !0, currencyIconWidth: l = "18px" }) {
|
|
71
|
+
return /* @__PURE__ */ t.jsxs(g, { children: [
|
|
72
|
+
/* @__PURE__ */ t.jsx(c, { children: e }),
|
|
73
|
+
/* @__PURE__ */ t.jsx(h, { children: r.map((i, a) => /* @__PURE__ */ t.jsxs(y, { children: [
|
|
74
|
+
/* @__PURE__ */ t.jsx(d, { children: i.title }),
|
|
75
|
+
/* @__PURE__ */ t.jsxs(m, { children: [
|
|
76
|
+
s && /* @__PURE__ */ t.jsx(p, { width: l, height: "20", color: i.color }),
|
|
77
|
+
/* @__PURE__ */ t.jsx(f, { $color: i.color, children: i.amount }),
|
|
78
|
+
i.decimal ? /* @__PURE__ */ t.jsxs($, { $color: i.color, children: [
|
|
78
79
|
".",
|
|
79
|
-
|
|
80
|
+
i.decimal
|
|
80
81
|
] }) : null
|
|
81
82
|
] })
|
|
82
|
-
] }, `${
|
|
83
|
+
] }, `${i.title}-${a}`)) })
|
|
83
84
|
] });
|
|
84
85
|
}
|
|
85
86
|
export {
|
|
86
|
-
|
|
87
|
+
b as default
|
|
87
88
|
};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { useState as r, useEffect as s } from "react";
|
|
2
|
+
import { breakPoints as o } from "../constants/breakPoints.constant.js";
|
|
3
|
+
const a = (e = o.tablet) => {
|
|
4
|
+
const [i, n] = r(() => window.innerWidth <= e);
|
|
5
|
+
return s(() => {
|
|
6
|
+
const t = () => {
|
|
7
|
+
n(window.innerWidth <= e);
|
|
7
8
|
};
|
|
8
|
-
return window.addEventListener("resize",
|
|
9
|
-
}, [e]),
|
|
9
|
+
return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
|
|
10
|
+
}, [e]), i;
|
|
10
11
|
};
|
|
11
12
|
export {
|
|
12
|
-
|
|
13
|
+
a as default
|
|
13
14
|
};
|
|
@@ -20,6 +20,7 @@ export declare const StyledDropDownToggle: import("styled-components/dist/types"
|
|
|
20
20
|
export declare const StyledDropDownTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
21
21
|
$valid: boolean;
|
|
22
22
|
$isInteractive: boolean;
|
|
23
|
+
$hasDyncWidth: boolean;
|
|
23
24
|
}>> & string;
|
|
24
25
|
export declare const StyledDropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react-bootstrap/esm/helpers").Omit<any, import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap").DropdownMenuProps> & import("react-bootstrap/esm/helpers").BsPrefixProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("react-bootstrap").DropdownMenuProps & {
|
|
25
26
|
children?: import("react").ReactNode | undefined;
|
|
@@ -17,12 +17,12 @@ const x = r.div`
|
|
|
17
17
|
label {
|
|
18
18
|
font-size: ${({ theme: o }) => o.typography.sizes.s4};
|
|
19
19
|
font-weight: ${({ theme: o }) => o.typography.weights.regular};
|
|
20
|
-
line-height: ${({ theme: o }) => o.typography.lineHeights.s};
|
|
20
|
+
/* line-height: ${({ theme: o }) => o.typography.lineHeights.s}; */
|
|
21
21
|
}
|
|
22
22
|
span {
|
|
23
23
|
font-size: ${({ theme: o }) => o.typography.sizes.s2};
|
|
24
24
|
font-weight: ${({ theme: o }) => o.typography.weights.regular};
|
|
25
|
-
line-height: ${({ theme: o }) => o.typography.lineHeights.xs};
|
|
25
|
+
/* line-height: ${({ theme: o }) => o.typography.lineHeights.xs}; */
|
|
26
26
|
color: ${({ theme: o }) => o.colors.grey.n350};
|
|
27
27
|
}
|
|
28
28
|
`, h = r.div`
|
|
@@ -105,7 +105,7 @@ const x = r.div`
|
|
|
105
105
|
justify-content: space-between;
|
|
106
106
|
align-items: center;
|
|
107
107
|
gap: ${({ theme: o }) => `${o.spacing.s}`};
|
|
108
|
-
width: calc(100% - 2.688rem);
|
|
108
|
+
width: ${({ $hasDyncWidth: o }) => o ? "calc(100% - 2.688rem)" : "100%"};
|
|
109
109
|
span {
|
|
110
110
|
display: block;
|
|
111
111
|
width: 100%;
|