intelicoreact 2.0.16 → 2.0.18
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/css/accordion.css +1 -1
- package/dist/css/advanced-status.css +1 -1
- package/dist/css/datepicker.css +1 -1
- package/dist/css/dropdown-live-search.css +1 -1
- package/dist/css/dropdown.css +1 -1
- package/dist/css/input-date-range.css +1 -1
- package/dist/css/main-menu.css +1 -1
- package/dist/css/switcher-radio.css +1 -1
- package/dist/css/switcher-range-list.css +1 -1
- package/dist/css/switcher-tags-dropdown.css +1 -1
- package/dist/css/switcher-textarea.css +1 -1
- package/dist/css/table.css +1 -1
- package/dist/css/tags-dropdown.css +1 -1
- package/dist/css/wizard-stepper.css +1 -1
- package/dist/es/_virtual/_rolldown/runtime.js +27 -0
- package/dist/es/charts.js +4 -0
- package/dist/es/classes.js +4 -0
- package/dist/es/form.js +99 -0
- package/dist/es/hooks.js +32 -0
- package/dist/es/icons.js +10 -0
- package/dist/es/icons.js.map +1 -0
- package/dist/es/index.js +71 -0
- package/dist/es/layout.js +3 -0
- package/dist/es/presets.js +6 -0
- package/dist/es/router-ui.js +8 -0
- package/dist/es/sdk.js +1 -0
- package/dist/es/styles/base.css +1 -0
- package/dist/es/types/index.js +2 -0
- package/dist/es/ui.js +42 -0
- package/dist/es/utils.js +6 -0
- package/dist/intelicoreact.css +1 -1
- package/dist/scss/_mixins.scss +2 -2
- package/dist/scss/_vars.scss +1 -1
- package/dist/scss/main.scss +4 -1
- package/package.json +47 -64
- package/charts/package.json +0 -5
- package/classes/package.json +0 -5
- package/dist/charts.cjs +0 -927
- package/dist/charts.cjs.map +0 -7
- package/dist/charts.js +0 -911
- package/dist/charts.js.map +0 -7
- package/dist/classes.cjs +0 -1858
- package/dist/classes.cjs.map +0 -7
- package/dist/classes.js +0 -1836
- package/dist/classes.js.map +0 -7
- package/dist/form.cjs +0 -15167
- package/dist/form.cjs.map +0 -7
- package/dist/form.js +0 -15182
- package/dist/form.js.map +0 -7
- package/dist/hooks.cjs +0 -2330
- package/dist/hooks.cjs.map +0 -7
- package/dist/hooks.js +0 -2298
- package/dist/hooks.js.map +0 -7
- package/dist/icons.cjs +0 -1807
- package/dist/icons.cjs.map +0 -7
- package/dist/icons.js +0 -1785
- package/dist/icons.js.map +0 -7
- package/dist/index.cjs +0 -22917
- package/dist/index.cjs.map +0 -7
- package/dist/index.js +0 -22938
- package/dist/index.js.map +0 -7
- package/dist/layout.cjs +0 -458
- package/dist/layout.cjs.map +0 -7
- package/dist/layout.js +0 -426
- package/dist/layout.js.map +0 -7
- package/dist/presets.cjs +0 -262
- package/dist/presets.cjs.map +0 -7
- package/dist/presets.js +0 -240
- package/dist/presets.js.map +0 -7
- package/dist/router-ui.cjs +0 -989
- package/dist/router-ui.cjs.map +0 -7
- package/dist/router-ui.js +0 -957
- package/dist/router-ui.js.map +0 -7
- package/dist/sdk.cjs +0 -451
- package/dist/sdk.cjs.map +0 -7
- package/dist/sdk.js +0 -429
- package/dist/sdk.js.map +0 -7
- package/dist/types/index.cjs +0 -18
- package/dist/types/index.cjs.map +0 -7
- package/dist/types/index.js +0 -1
- package/dist/types/index.js.map +0 -7
- package/dist/ui.cjs +0 -4090
- package/dist/ui.cjs.map +0 -7
- package/dist/ui.js +0 -4064
- package/dist/ui.js.map +0 -7
- package/dist/utils.cjs +0 -653
- package/dist/utils.cjs.map +0 -7
- package/dist/utils.js +0 -621
- package/dist/utils.js.map +0 -7
- package/form/package.json +0 -5
- package/hooks/package.json +0 -5
- package/icons/package.json +0 -5
- package/layout/package.json +0 -5
- package/presets/package.json +0 -5
- package/router-ui/package.json +0 -5
- package/sdk/package.json +0 -5
- package/types/package.json +0 -5
- package/ui/package.json +0 -5
- package/utils/package.json +0 -5
package/dist/ui.js
DELETED
|
@@ -1,4064 +0,0 @@
|
|
|
1
|
-
// src/Atomic/UI/AccordionTable/AccordionTable.js
|
|
2
|
-
import React2, { useEffect as useEffect2, useState as useState2 } from "react";
|
|
3
|
-
import cn2 from "classnames";
|
|
4
|
-
import { ArrowDown, ArrowUp, ChevronDown, Tag } from "react-feather";
|
|
5
|
-
|
|
6
|
-
// src/Atomic/UI/MonoAccordion/MonoAccordion.js
|
|
7
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
8
|
-
import cn from "classnames";
|
|
9
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
var RC = "mono-accordion";
|
|
11
|
-
var MonoAccordion = ({
|
|
12
|
-
titleJSX,
|
|
13
|
-
icon,
|
|
14
|
-
children,
|
|
15
|
-
isOpen,
|
|
16
|
-
onClick,
|
|
17
|
-
className,
|
|
18
|
-
disabled,
|
|
19
|
-
testId = "mono-accordion",
|
|
20
|
-
datasetProp = {}
|
|
21
|
-
}) => {
|
|
22
|
-
const [maxHeight, setMaxHeight] = useState();
|
|
23
|
-
const titleRef = useRef();
|
|
24
|
-
const containerRef = useRef();
|
|
25
|
-
const setHeight = (value) => {
|
|
26
|
-
if (value !== void 0) setMaxHeight((state) => `${value}px`);
|
|
27
|
-
else
|
|
28
|
-
setMaxHeight(
|
|
29
|
-
(state) => `${Array.from(containerRef.current?.childNodes)?.reduce?.((acc, el) => acc + el.offsetHeight, 0)}px`
|
|
30
|
-
);
|
|
31
|
-
};
|
|
32
|
-
const handleClick = (e) => {
|
|
33
|
-
if (!Array.from(titleRef.current.childNodes).some(
|
|
34
|
-
(el) => el.contains(e.target)
|
|
35
|
-
)) {
|
|
36
|
-
onClick(e);
|
|
37
|
-
e?.preventDefault();
|
|
38
|
-
e?.stopPropagation();
|
|
39
|
-
} else return e;
|
|
40
|
-
};
|
|
41
|
-
useEffect(() => {
|
|
42
|
-
if (!isOpen) setHeight(0);
|
|
43
|
-
else setHeight();
|
|
44
|
-
}, [isOpen, children]);
|
|
45
|
-
return /* @__PURE__ */ jsxs(
|
|
46
|
-
"div",
|
|
47
|
-
{
|
|
48
|
-
...datasetProp,
|
|
49
|
-
"data-testid": testId,
|
|
50
|
-
className: cn(RC, className, {
|
|
51
|
-
[`${RC}_is-open`]: isOpen,
|
|
52
|
-
[`${RC}_disabled`]: disabled
|
|
53
|
-
}),
|
|
54
|
-
children: [
|
|
55
|
-
/* @__PURE__ */ jsxs(
|
|
56
|
-
"div",
|
|
57
|
-
{
|
|
58
|
-
className: `${RC}__head`,
|
|
59
|
-
onClick: handleClick,
|
|
60
|
-
children: [
|
|
61
|
-
/* @__PURE__ */ jsx("div", { ref: titleRef, className: `${RC}__tile-container`, children: titleJSX }),
|
|
62
|
-
/* @__PURE__ */ jsx("span", { className: `${RC}__icon-container`, children: icon })
|
|
63
|
-
]
|
|
64
|
-
}
|
|
65
|
-
),
|
|
66
|
-
/* @__PURE__ */ jsx(
|
|
67
|
-
"div",
|
|
68
|
-
{
|
|
69
|
-
ref: containerRef,
|
|
70
|
-
style: { maxHeight },
|
|
71
|
-
className: cn(`${RC}__container`),
|
|
72
|
-
children: /* @__PURE__ */ jsx("div", { className: `${RC}__content-wrapper`, children })
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
]
|
|
76
|
-
}
|
|
77
|
-
);
|
|
78
|
-
};
|
|
79
|
-
var MonoAccordion_default = MonoAccordion;
|
|
80
|
-
|
|
81
|
-
// src/Atomic/UI/AccordionTable/AccordionTable.js
|
|
82
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
83
|
-
var AccordionTable = ({
|
|
84
|
-
className,
|
|
85
|
-
header,
|
|
86
|
-
items,
|
|
87
|
-
onChange,
|
|
88
|
-
testId,
|
|
89
|
-
onSort = () => {
|
|
90
|
-
},
|
|
91
|
-
sortParams
|
|
92
|
-
}) => {
|
|
93
|
-
const [accordions, setAccordions] = useState2(items);
|
|
94
|
-
const sortedColClassName = (item) => cn2(
|
|
95
|
-
"accordion-table__header-item",
|
|
96
|
-
item.className,
|
|
97
|
-
{
|
|
98
|
-
"accordion-table--sorted-col": sortParams && sortParams.key === item.key
|
|
99
|
-
},
|
|
100
|
-
{ "accordion-table__header-item-sortable": !item.noSort }
|
|
101
|
-
);
|
|
102
|
-
const handle = {
|
|
103
|
-
accordionChange: (key, e) => {
|
|
104
|
-
const newArr = accordions?.map((item) => {
|
|
105
|
-
if (item.key === key) {
|
|
106
|
-
return {
|
|
107
|
-
...item,
|
|
108
|
-
isOpen: !item.isOpen
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
return item;
|
|
112
|
-
});
|
|
113
|
-
const isArrowSvg = e?.target?.tagName === "svg";
|
|
114
|
-
const isAccordionElement = e.target.className?.includes?.("accordion-table");
|
|
115
|
-
if (isAccordionElement || isArrowSvg) {
|
|
116
|
-
onChange(newArr);
|
|
117
|
-
setAccordions(newArr);
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
setSort: (key) => {
|
|
121
|
-
let newSorting;
|
|
122
|
-
if (key !== sortParams.key) newSorting = { key, direction: "DESC" };
|
|
123
|
-
else {
|
|
124
|
-
newSorting = {
|
|
125
|
-
key,
|
|
126
|
-
direction: sortParams.direction === "ASC" ? "DESC" : "ASC"
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
onSort(newSorting);
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
const getHeaderItem = (key) => {
|
|
133
|
-
return header?.find((item) => item.key === key);
|
|
134
|
-
};
|
|
135
|
-
const renderTd = (tr) => {
|
|
136
|
-
return Object.entries(tr)?.map(([key, value]) => {
|
|
137
|
-
return key === "promoDetails" || key === "disclosure" ? null : /* @__PURE__ */ jsx2(
|
|
138
|
-
"div",
|
|
139
|
-
{
|
|
140
|
-
style: { flexBasis: `${getHeaderItem(key)?.width}%` },
|
|
141
|
-
className: cn2(
|
|
142
|
-
"accordion-table__td",
|
|
143
|
-
`accordion-table__td--${key}`,
|
|
144
|
-
getHeaderItem(key)?.className
|
|
145
|
-
),
|
|
146
|
-
children: /* @__PURE__ */ jsx2(
|
|
147
|
-
"p",
|
|
148
|
-
{
|
|
149
|
-
className: "accordion-table__statistics-td-value",
|
|
150
|
-
title: typeof value !== "object" ? value : value.value,
|
|
151
|
-
children: typeof value !== "object" ? value : value.value
|
|
152
|
-
}
|
|
153
|
-
)
|
|
154
|
-
},
|
|
155
|
-
key
|
|
156
|
-
);
|
|
157
|
-
});
|
|
158
|
-
};
|
|
159
|
-
const renderTr = (rows) => {
|
|
160
|
-
return rows?.map((row, index) => {
|
|
161
|
-
return /* @__PURE__ */ jsxs2(
|
|
162
|
-
"div",
|
|
163
|
-
{
|
|
164
|
-
className: cn2(
|
|
165
|
-
"accordion-table__tr",
|
|
166
|
-
{
|
|
167
|
-
"accordion-table__tr-with-promo": row.promoDetails || row.cols?.promoDetails
|
|
168
|
-
},
|
|
169
|
-
row.className
|
|
170
|
-
),
|
|
171
|
-
children: [
|
|
172
|
-
/* @__PURE__ */ jsx2("div", { className: "df w100", children: renderTd(row.cols || row) }),
|
|
173
|
-
row.promoDetails || row.cols?.promoDetails ? /* @__PURE__ */ jsx2("div", { className: "accordion-table__tr-promo-wrapper", children: /* @__PURE__ */ jsxs2("div", { className: "accordion-table__tr-promo", children: [
|
|
174
|
-
/* @__PURE__ */ jsx2(Tag, { className: "tr-promo-icon", width: 16, height: 16 }),
|
|
175
|
-
/* @__PURE__ */ jsx2("span", { className: "tr-promo-label", children: "PROMOTION" }),
|
|
176
|
-
row.promoDetails || row.cols?.promoDetails
|
|
177
|
-
] }) }) : null,
|
|
178
|
-
row.disclosure || row.cols?.disclosure ? /* @__PURE__ */ jsx2("div", { className: "accordion-table__tr-promo-wrapper", children: /* @__PURE__ */ jsx2("div", { className: "accordion-table__tr-promo accordion-table__tr-promo-disclosure", children: row.disclosure || row.cols?.disclosure }) }) : null
|
|
179
|
-
]
|
|
180
|
-
},
|
|
181
|
-
index
|
|
182
|
-
);
|
|
183
|
-
});
|
|
184
|
-
};
|
|
185
|
-
const defineAccordionTitle = (row) => {
|
|
186
|
-
return /* @__PURE__ */ jsxs2(
|
|
187
|
-
"div",
|
|
188
|
-
{
|
|
189
|
-
onClick: (e) => handle.accordionChange(row.key, e),
|
|
190
|
-
className: "accordion-table__accordion-label-box",
|
|
191
|
-
children: [
|
|
192
|
-
/* @__PURE__ */ jsxs2("div", { className: "accordion-table__accordion-label-wrapper j4", children: [
|
|
193
|
-
/* @__PURE__ */ jsx2(
|
|
194
|
-
ChevronDown,
|
|
195
|
-
{
|
|
196
|
-
width: 8,
|
|
197
|
-
height: 4,
|
|
198
|
-
className: cn2("accordion-label-box__icon", {
|
|
199
|
-
"accordion-label-box__icon--open": row.isOpen
|
|
200
|
-
})
|
|
201
|
-
}
|
|
202
|
-
),
|
|
203
|
-
/* @__PURE__ */ jsx2("span", { className: "accordion-label-box__label", children: row.label }),
|
|
204
|
-
row.statistics && /* @__PURE__ */ jsx2("div", { className: cn2("accordion-table__tr", row.className), children: Object.entries(row.statistics).map(([key, value]) => {
|
|
205
|
-
return /* @__PURE__ */ jsx2(
|
|
206
|
-
"div",
|
|
207
|
-
{
|
|
208
|
-
style: { width: `${getHeaderItem(key)?.width}%` },
|
|
209
|
-
className: cn2(
|
|
210
|
-
"accordion-table__statistics-td",
|
|
211
|
-
getHeaderItem(key)?.className
|
|
212
|
-
),
|
|
213
|
-
children: /* @__PURE__ */ jsx2("div", { className: "accordion-table__statistics-td-value-wrapper", children: key === "status" ? /* @__PURE__ */ jsx2("div", { className: "accordion-table__statistics-td-value", children: value }) : /* @__PURE__ */ jsx2(
|
|
214
|
-
"p",
|
|
215
|
-
{
|
|
216
|
-
className: "accordion-table__statistics-td-value",
|
|
217
|
-
title: value,
|
|
218
|
-
children: value
|
|
219
|
-
}
|
|
220
|
-
) })
|
|
221
|
-
},
|
|
222
|
-
key
|
|
223
|
-
);
|
|
224
|
-
}) })
|
|
225
|
-
] }),
|
|
226
|
-
row.titleContent
|
|
227
|
-
]
|
|
228
|
-
}
|
|
229
|
-
);
|
|
230
|
-
};
|
|
231
|
-
useEffect2(() => {
|
|
232
|
-
setAccordions(items);
|
|
233
|
-
}, [items]);
|
|
234
|
-
return /* @__PURE__ */ jsxs2("div", { className: cn2("accordion-table", className), children: [
|
|
235
|
-
/* @__PURE__ */ jsx2("div", { className: "accordion-table__header", children: header?.map((item) => {
|
|
236
|
-
return /* @__PURE__ */ jsxs2(
|
|
237
|
-
"div",
|
|
238
|
-
{
|
|
239
|
-
style: { flexBasis: `${item.width}%` },
|
|
240
|
-
className: sortedColClassName(item),
|
|
241
|
-
onClick: () => !item.noSort && handle.setSort(item.key),
|
|
242
|
-
children: [
|
|
243
|
-
sortParams && item.key === sortParams.key && sortParams.key !== "actions" && (sortParams.direction === "DESC" ? /* @__PURE__ */ jsx2(ArrowDown, { size: 16 }) : /* @__PURE__ */ jsx2(ArrowUp, { size: 16 })),
|
|
244
|
-
item.label
|
|
245
|
-
]
|
|
246
|
-
},
|
|
247
|
-
item.key
|
|
248
|
-
);
|
|
249
|
-
}) }),
|
|
250
|
-
/* @__PURE__ */ jsx2("div", { className: "accordion-table__body", children: accordions?.map((accordion) => {
|
|
251
|
-
return /* @__PURE__ */ jsx2(
|
|
252
|
-
MonoAccordion_default,
|
|
253
|
-
{
|
|
254
|
-
testId,
|
|
255
|
-
onClick: (e) => handle.accordionChange(accordion.key, e),
|
|
256
|
-
isOpen: accordion.isOpen,
|
|
257
|
-
className: cn2(
|
|
258
|
-
"accordion-table__body-accordion",
|
|
259
|
-
{
|
|
260
|
-
"accordion-table__body-accordion--closed": !accordion.isOpen
|
|
261
|
-
},
|
|
262
|
-
accordion.className
|
|
263
|
-
),
|
|
264
|
-
titleJSX: defineAccordionTitle(accordion),
|
|
265
|
-
children: accordion.children ?? renderTr(accordion.rows)
|
|
266
|
-
},
|
|
267
|
-
accordion.key
|
|
268
|
-
);
|
|
269
|
-
}) })
|
|
270
|
-
] });
|
|
271
|
-
};
|
|
272
|
-
var AccordionTable_default = AccordionTable;
|
|
273
|
-
|
|
274
|
-
// src/Atomic/UI/AccordionText/AccordionText.js
|
|
275
|
-
import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
|
|
276
|
-
import React3 from "react";
|
|
277
|
-
import cn3 from "classnames";
|
|
278
|
-
import { ChevronDown as ChevronDown2, ChevronUp } from "react-feather";
|
|
279
|
-
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
280
|
-
var defaultText = /* @__PURE__ */ jsx3(Fragment, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." });
|
|
281
|
-
var AccordionText = ({
|
|
282
|
-
isDefaultOpen = false,
|
|
283
|
-
isOuterOpen = false,
|
|
284
|
-
className,
|
|
285
|
-
text = defaultText,
|
|
286
|
-
shortText = null
|
|
287
|
-
}) => {
|
|
288
|
-
const bodyRef = useRef2(null);
|
|
289
|
-
const [isOpen, setIsOpen] = useState3(isDefaultOpen);
|
|
290
|
-
const [isNeedTrimText, setIsNeedTrimText] = useState3(false);
|
|
291
|
-
useEffect3(() => {
|
|
292
|
-
setIsOpen(isOuterOpen);
|
|
293
|
-
}, [isOuterOpen]);
|
|
294
|
-
useEffect3(() => {
|
|
295
|
-
const checkEllipsis = () => {
|
|
296
|
-
if (bodyRef.current) {
|
|
297
|
-
setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
|
|
298
|
-
}
|
|
299
|
-
};
|
|
300
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
301
|
-
checkEllipsis();
|
|
302
|
-
});
|
|
303
|
-
if (bodyRef.current) {
|
|
304
|
-
resizeObserver.observe(bodyRef.current);
|
|
305
|
-
checkEllipsis();
|
|
306
|
-
}
|
|
307
|
-
return () => {
|
|
308
|
-
if (bodyRef.current) {
|
|
309
|
-
resizeObserver.unobserve(bodyRef.current);
|
|
310
|
-
}
|
|
311
|
-
};
|
|
312
|
-
}, [text]);
|
|
313
|
-
return /* @__PURE__ */ jsxs3(
|
|
314
|
-
"div",
|
|
315
|
-
{
|
|
316
|
-
className: cn3("accordion-text", className, {
|
|
317
|
-
"accordion-text--open": isOpen
|
|
318
|
-
}),
|
|
319
|
-
onClick: () => setIsOpen((prevIsOpen) => !prevIsOpen),
|
|
320
|
-
children: [
|
|
321
|
-
/* @__PURE__ */ jsx3(
|
|
322
|
-
"div",
|
|
323
|
-
{
|
|
324
|
-
className: cn3("accordion-text__body", {
|
|
325
|
-
"accordion-text__body--trim-text": isNeedTrimText && !isOpen
|
|
326
|
-
}),
|
|
327
|
-
ref: bodyRef,
|
|
328
|
-
children: shortText ? isOpen ? text : shortText : text
|
|
329
|
-
}
|
|
330
|
-
),
|
|
331
|
-
/* @__PURE__ */ jsx3("div", { className: "accordion-text__toggle", children: isOpen ? /* @__PURE__ */ jsx3(ChevronUp, {}) : /* @__PURE__ */ jsx3(ChevronDown2, {}) })
|
|
332
|
-
]
|
|
333
|
-
}
|
|
334
|
-
);
|
|
335
|
-
};
|
|
336
|
-
var AccordionText_default = AccordionText;
|
|
337
|
-
|
|
338
|
-
// src/Atomic/UI/AdvancedTag/AdvancedTags.tsx
|
|
339
|
-
import cn7 from "classnames";
|
|
340
|
-
import { useState as useState6 } from "react";
|
|
341
|
-
|
|
342
|
-
// src/Atomic/UI/Tag/Tag.tsx
|
|
343
|
-
import cn5 from "classnames";
|
|
344
|
-
import { useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
|
|
345
|
-
import { createPortal } from "react-dom";
|
|
346
|
-
import { AlertTriangle, X } from "react-feather";
|
|
347
|
-
|
|
348
|
-
// src/Atomic/Layout/Spinner/Spinner.tsx
|
|
349
|
-
import cn4 from "classnames";
|
|
350
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
351
|
-
var CN = "loader-box";
|
|
352
|
-
var Spinner = ({ size = null, className, testId = CN }) => {
|
|
353
|
-
return /* @__PURE__ */ jsx4(
|
|
354
|
-
"div",
|
|
355
|
-
{
|
|
356
|
-
role: "status",
|
|
357
|
-
"aria-live": "polite",
|
|
358
|
-
"aria-busy": "true",
|
|
359
|
-
"data-testid": testId,
|
|
360
|
-
className: cn4(
|
|
361
|
-
CN,
|
|
362
|
-
{
|
|
363
|
-
j5: size !== "small",
|
|
364
|
-
j8: size === "small"
|
|
365
|
-
},
|
|
366
|
-
className
|
|
367
|
-
),
|
|
368
|
-
children: /* @__PURE__ */ jsxs4("div", { className: cn4("lds-ring", { [`lds-ring_${size}`]: size }), children: [
|
|
369
|
-
/* @__PURE__ */ jsx4("div", {}),
|
|
370
|
-
/* @__PURE__ */ jsx4("div", {}),
|
|
371
|
-
/* @__PURE__ */ jsx4("div", {}),
|
|
372
|
-
/* @__PURE__ */ jsx4("div", {})
|
|
373
|
-
] })
|
|
374
|
-
}
|
|
375
|
-
);
|
|
376
|
-
};
|
|
377
|
-
var Spinner_default = Spinner;
|
|
378
|
-
|
|
379
|
-
// src/Atomic/Layout/Spinner/index.ts
|
|
380
|
-
var Spinner_default2 = Spinner_default;
|
|
381
|
-
|
|
382
|
-
// src/Atomic/UI/Tag/Tag.tsx
|
|
383
|
-
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
384
|
-
var CN2 = "tag";
|
|
385
|
-
function defaultOnClick() {
|
|
386
|
-
}
|
|
387
|
-
var Tag2 = ({
|
|
388
|
-
value,
|
|
389
|
-
className,
|
|
390
|
-
style,
|
|
391
|
-
label,
|
|
392
|
-
warning,
|
|
393
|
-
isWarningHint = true,
|
|
394
|
-
removeItem,
|
|
395
|
-
name,
|
|
396
|
-
isPopup,
|
|
397
|
-
popupInfoContent,
|
|
398
|
-
popupClassName,
|
|
399
|
-
id,
|
|
400
|
-
isUseInTable,
|
|
401
|
-
isNoDismiss = true,
|
|
402
|
-
onClick = defaultOnClick,
|
|
403
|
-
testId = CN2
|
|
404
|
-
}) => {
|
|
405
|
-
const tagRef = useRef3(null);
|
|
406
|
-
const [isTagHover, setIsTagHover] = useState4(false);
|
|
407
|
-
const [isTagPopupOpened, setIsTagPopupOpened] = useState4(false);
|
|
408
|
-
const { x, y, height, width } = tagRef?.current?.getBoundingClientRect() ?? {};
|
|
409
|
-
const { scrollY } = window;
|
|
410
|
-
const tagPopupStyles = useMemo(() => {
|
|
411
|
-
if (!isTagPopupOpened || !tagRef?.current) return {};
|
|
412
|
-
const { x: x2, y: y2, height: height2, width: width2 } = tagRef?.current?.getBoundingClientRect();
|
|
413
|
-
return {
|
|
414
|
-
left: `${x2}px`,
|
|
415
|
-
top: `${y2 + scrollY}px`,
|
|
416
|
-
transform: `translate(calc(-1 * calc(100% - ${width2 / 2 + 22}px)), ${height2 + 10}px)`
|
|
417
|
-
};
|
|
418
|
-
}, [isTagPopupOpened, x, y, width, height, scrollY]);
|
|
419
|
-
const tagLabelStyle = useMemo(() => {
|
|
420
|
-
const styleObj = {};
|
|
421
|
-
const bgColor = style?.backgroundColor ?? style?.background;
|
|
422
|
-
if (bgColor === "#242424") {
|
|
423
|
-
styleObj.color = "#fff";
|
|
424
|
-
}
|
|
425
|
-
return styleObj;
|
|
426
|
-
}, [style]);
|
|
427
|
-
const handle = {
|
|
428
|
-
onTagClick: (event) => {
|
|
429
|
-
if (isUseInTable) {
|
|
430
|
-
event.stopPropagation();
|
|
431
|
-
}
|
|
432
|
-
if (isPopup) {
|
|
433
|
-
setIsTagPopupOpened(!isTagPopupOpened);
|
|
434
|
-
}
|
|
435
|
-
onClick(id, event);
|
|
436
|
-
}
|
|
437
|
-
};
|
|
438
|
-
const handleClickOutside = () => {
|
|
439
|
-
setIsTagPopupOpened(false);
|
|
440
|
-
};
|
|
441
|
-
useEffect4(() => {
|
|
442
|
-
document.addEventListener("click", handleClickOutside, true);
|
|
443
|
-
return () => {
|
|
444
|
-
document.removeEventListener("click", handleClickOutside, true);
|
|
445
|
-
};
|
|
446
|
-
}, []);
|
|
447
|
-
useEffect4(() => {
|
|
448
|
-
const handleScroll = () => {
|
|
449
|
-
setIsTagPopupOpened(false);
|
|
450
|
-
};
|
|
451
|
-
window.addEventListener("scroll", handleScroll, true);
|
|
452
|
-
return () => {
|
|
453
|
-
window.removeEventListener("scroll", handleScroll, true);
|
|
454
|
-
};
|
|
455
|
-
}, []);
|
|
456
|
-
return /* @__PURE__ */ jsxs5(
|
|
457
|
-
"div",
|
|
458
|
-
{
|
|
459
|
-
onMouseEnter: () => setIsTagHover(true),
|
|
460
|
-
onMouseLeave: () => setIsTagHover(false),
|
|
461
|
-
"data-testid": testId,
|
|
462
|
-
role: "listitem",
|
|
463
|
-
"aria-label": `Tag: ${label || name}`,
|
|
464
|
-
className: cn5(CN2, className, { "tag-warn": warning }),
|
|
465
|
-
style: style ?? {},
|
|
466
|
-
onClick: (event) => handle.onTagClick(event),
|
|
467
|
-
ref: tagRef,
|
|
468
|
-
children: [
|
|
469
|
-
warning && typeof warning === "string" && /* @__PURE__ */ jsx5(AlertTriangle, { className: "advanced-tags--warning-icon mr5", "aria-label": "Warning" }),
|
|
470
|
-
warning && typeof warning === "string" && isTagHover && isWarningHint && /* @__PURE__ */ jsx5("div", { className: "tag__warn-hint", role: "tooltip", children: warning }),
|
|
471
|
-
/* @__PURE__ */ jsx5("span", { className: "tag__label", style: tagLabelStyle, children: label || name }),
|
|
472
|
-
removeItem && !isNoDismiss && /* @__PURE__ */ jsx5(
|
|
473
|
-
"button",
|
|
474
|
-
{
|
|
475
|
-
type: "button",
|
|
476
|
-
onClick: (e) => {
|
|
477
|
-
e?.preventDefault();
|
|
478
|
-
e?.stopPropagation();
|
|
479
|
-
removeItem(value);
|
|
480
|
-
},
|
|
481
|
-
"aria-label": `Remove ${label || name}`,
|
|
482
|
-
className: "tag__button",
|
|
483
|
-
children: /* @__PURE__ */ jsx5(X, { className: "color--text" })
|
|
484
|
-
}
|
|
485
|
-
),
|
|
486
|
-
isTagPopupOpened && createPortal(
|
|
487
|
-
/* @__PURE__ */ jsx5("div", { id: `tagPopup${value}`, className: cn5("tag__popup", popupClassName), style: tagPopupStyles, children: !popupInfoContent ? /* @__PURE__ */ jsx5(Spinner_default2, { size: "small" }) : popupInfoContent }),
|
|
488
|
-
document.getElementById("root")
|
|
489
|
-
)
|
|
490
|
-
]
|
|
491
|
-
}
|
|
492
|
-
);
|
|
493
|
-
};
|
|
494
|
-
var Tag_default = Tag2;
|
|
495
|
-
|
|
496
|
-
// src/Atomic/UI/AdvancedTag/AdvTag.tsx
|
|
497
|
-
import cn6 from "classnames";
|
|
498
|
-
import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
|
|
499
|
-
import { AlertTriangle as AlertTriangle2 } from "react-feather";
|
|
500
|
-
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
501
|
-
var AdvTag = ({
|
|
502
|
-
item,
|
|
503
|
-
className,
|
|
504
|
-
testId = "adv-tag",
|
|
505
|
-
toTop = true
|
|
506
|
-
}) => {
|
|
507
|
-
const {
|
|
508
|
-
labelLeft,
|
|
509
|
-
labelRight,
|
|
510
|
-
active = 0,
|
|
511
|
-
pause = 0,
|
|
512
|
-
merchants,
|
|
513
|
-
warnLeft,
|
|
514
|
-
warnLeftMsg,
|
|
515
|
-
warnRightMsg,
|
|
516
|
-
isEntityAndCounter = false,
|
|
517
|
-
entityAndCounter = {
|
|
518
|
-
nullCounterMessage: "",
|
|
519
|
-
title: "",
|
|
520
|
-
counter: null
|
|
521
|
-
},
|
|
522
|
-
type
|
|
523
|
-
} = item;
|
|
524
|
-
const [isOpen, setIsOpen] = useState5(false);
|
|
525
|
-
const [clickedWarning, setClickedWarning] = useState5("");
|
|
526
|
-
const hintRef = useRef4(null);
|
|
527
|
-
const activeNumberClass = cn6("strong", {
|
|
528
|
-
"color--pause": active === 0,
|
|
529
|
-
"color--green-haze": active > 0
|
|
530
|
-
});
|
|
531
|
-
const pauseNumberClass = cn6("strong", {
|
|
532
|
-
"color--pause": pause === 0,
|
|
533
|
-
"color--light-red": pause > 0
|
|
534
|
-
});
|
|
535
|
-
const isEmptyEntitys = isEntityAndCounter && (!entityAndCounter?.counter || entityAndCounter.counter === 0) || !isEntityAndCounter && (warnLeft || !merchants);
|
|
536
|
-
const advancedTagClass = cn6("advanced-tags", {
|
|
537
|
-
"advanced-tags--error": isEmptyEntitys
|
|
538
|
-
}, className);
|
|
539
|
-
const onWarningClick = (warn) => {
|
|
540
|
-
setIsOpen(true);
|
|
541
|
-
setClickedWarning(warn);
|
|
542
|
-
};
|
|
543
|
-
const handleClickOutside = (event) => {
|
|
544
|
-
if (hintRef.current && !hintRef.current.contains(event.target)) {
|
|
545
|
-
setIsOpen(false);
|
|
546
|
-
}
|
|
547
|
-
};
|
|
548
|
-
useEffect5(() => {
|
|
549
|
-
document.addEventListener("click", handleClickOutside, true);
|
|
550
|
-
return () => {
|
|
551
|
-
document.removeEventListener("click", handleClickOutside, true);
|
|
552
|
-
};
|
|
553
|
-
}, []);
|
|
554
|
-
if (!item) return null;
|
|
555
|
-
const renderClassicTag = () => /* @__PURE__ */ jsxs6("div", { "data-testid": testId, className: advancedTagClass, ref: hintRef, children: [
|
|
556
|
-
warnLeft && /* @__PURE__ */ jsx6(
|
|
557
|
-
"div",
|
|
558
|
-
{
|
|
559
|
-
"data-testid": `${testId}-left`,
|
|
560
|
-
className: "advanced-tags--warning-icon-wrapper",
|
|
561
|
-
onMouseEnter: () => onWarningClick("warnLeft"),
|
|
562
|
-
onMouseLeave: () => setIsOpen(false),
|
|
563
|
-
children: /* @__PURE__ */ jsx6(
|
|
564
|
-
AlertTriangle2,
|
|
565
|
-
{
|
|
566
|
-
width: 16,
|
|
567
|
-
height: 16,
|
|
568
|
-
className: "advanced-tags--warning-icon mr5"
|
|
569
|
-
}
|
|
570
|
-
)
|
|
571
|
-
}
|
|
572
|
-
),
|
|
573
|
-
labelLeft && /* @__PURE__ */ jsx6("span", { className: "mr5", children: labelLeft }),
|
|
574
|
-
labelRight && /* @__PURE__ */ jsx6("span", { children: labelRight }),
|
|
575
|
-
type !== "simple" && /* @__PURE__ */ jsx6("span", { className: "ml5 mr5", children: "|" }),
|
|
576
|
-
type !== "simple" && /* @__PURE__ */ jsxs6("div", { className: "df", children: [
|
|
577
|
-
/* @__PURE__ */ jsx6("span", { className: activeNumberClass, children: active }),
|
|
578
|
-
/* @__PURE__ */ jsx6("span", { className: "strong color--pause", children: "/" }),
|
|
579
|
-
/* @__PURE__ */ jsx6("span", { className: pauseNumberClass, children: pause })
|
|
580
|
-
] }),
|
|
581
|
-
type !== "simple" && /* @__PURE__ */ jsx6("span", { className: "ml5 mr5", children: "|" }),
|
|
582
|
-
merchants ? /* @__PURE__ */ jsx6("span", { children: merchants }) : type !== "simple" && /* @__PURE__ */ jsx6(
|
|
583
|
-
"div",
|
|
584
|
-
{
|
|
585
|
-
"data-testid": `${testId}-right`,
|
|
586
|
-
className: "advanced-tags--warning-icon-wrapper",
|
|
587
|
-
onMouseEnter: () => onWarningClick("warnRight"),
|
|
588
|
-
onMouseLeave: () => setIsOpen(false),
|
|
589
|
-
children: /* @__PURE__ */ jsx6(
|
|
590
|
-
AlertTriangle2,
|
|
591
|
-
{
|
|
592
|
-
width: 16,
|
|
593
|
-
height: 16,
|
|
594
|
-
className: "advanced-tags--warning-icon"
|
|
595
|
-
}
|
|
596
|
-
)
|
|
597
|
-
}
|
|
598
|
-
),
|
|
599
|
-
isOpen && warnLeftMsg && clickedWarning === "warnLeft" && /* @__PURE__ */ jsx6(
|
|
600
|
-
"span",
|
|
601
|
-
{
|
|
602
|
-
className: cn6(
|
|
603
|
-
"advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
|
|
604
|
-
{ "advanced-tags__warn-text--warnLeft--to-top": toTop }
|
|
605
|
-
),
|
|
606
|
-
children: warnLeftMsg
|
|
607
|
-
}
|
|
608
|
-
),
|
|
609
|
-
isOpen && warnRightMsg && clickedWarning === "warnRight" && /* @__PURE__ */ jsx6(
|
|
610
|
-
"span",
|
|
611
|
-
{
|
|
612
|
-
className: cn6(
|
|
613
|
-
"advanced-tags__warn-text",
|
|
614
|
-
"advanced-tags__warn-text--warnRight",
|
|
615
|
-
{ "advanced-tags__warn-text--warnRight--to-top": toTop }
|
|
616
|
-
),
|
|
617
|
-
children: warnRightMsg
|
|
618
|
-
}
|
|
619
|
-
)
|
|
620
|
-
] });
|
|
621
|
-
const renderWithEntityAndCounterTag = () => {
|
|
622
|
-
const isNullcounter = entityAndCounter?.counter?.toString() === "0";
|
|
623
|
-
return /* @__PURE__ */ jsxs6("div", { "data-testid": testId, className: advancedTagClass, ref: hintRef, children: [
|
|
624
|
-
isNullcounter && /* @__PURE__ */ jsx6(
|
|
625
|
-
"div",
|
|
626
|
-
{
|
|
627
|
-
"data-testid": `${testId}-left`,
|
|
628
|
-
className: "advanced-tags--warning-icon-wrapper",
|
|
629
|
-
onMouseEnter: () => onWarningClick("warnLeft"),
|
|
630
|
-
onMouseLeave: () => setIsOpen(false),
|
|
631
|
-
children: /* @__PURE__ */ jsx6(
|
|
632
|
-
AlertTriangle2,
|
|
633
|
-
{
|
|
634
|
-
width: 16,
|
|
635
|
-
height: 16,
|
|
636
|
-
className: "advanced-tags--warning-icon mr5"
|
|
637
|
-
}
|
|
638
|
-
)
|
|
639
|
-
}
|
|
640
|
-
),
|
|
641
|
-
isOpen && entityAndCounter?.nullCounterMessage && clickedWarning === "warnLeft" && /* @__PURE__ */ jsx6(
|
|
642
|
-
"span",
|
|
643
|
-
{
|
|
644
|
-
className: cn6(
|
|
645
|
-
"advanced-tags__warn-text advanced-tags__warn-text--warnLeft",
|
|
646
|
-
{ "advanced-tags__warn-text--warnLeft--to-top": toTop }
|
|
647
|
-
),
|
|
648
|
-
children: entityAndCounter.nullCounterMessage
|
|
649
|
-
}
|
|
650
|
-
),
|
|
651
|
-
entityAndCounter?.title && /* @__PURE__ */ jsx6("span", { className: "mr5", children: entityAndCounter.title }),
|
|
652
|
-
/* @__PURE__ */ jsx6(
|
|
653
|
-
"div",
|
|
654
|
-
{
|
|
655
|
-
className: cn6("advanced-tags__counter", {
|
|
656
|
-
"advanced-tags__counter--null": isNullcounter,
|
|
657
|
-
"advanced-tags__counter--bold": !isNullcounter
|
|
658
|
-
}),
|
|
659
|
-
children: entityAndCounter?.counter
|
|
660
|
-
}
|
|
661
|
-
)
|
|
662
|
-
] });
|
|
663
|
-
};
|
|
664
|
-
return !isEntityAndCounter ? renderClassicTag() : renderWithEntityAndCounterTag();
|
|
665
|
-
};
|
|
666
|
-
var AdvTag_default = AdvTag;
|
|
667
|
-
|
|
668
|
-
// src/Atomic/UI/AdvancedTag/AdvancedTags.tsx
|
|
669
|
-
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
670
|
-
var AdvancedTags = ({
|
|
671
|
-
items,
|
|
672
|
-
noItemsTagLabel,
|
|
673
|
-
className,
|
|
674
|
-
testId = "advanced-tag-test",
|
|
675
|
-
toTop = true
|
|
676
|
-
}) => {
|
|
677
|
-
const [showedItems, setShowedItems] = useState6(items.slice(0, 2));
|
|
678
|
-
const [showMore, setShowMore] = useState6(true);
|
|
679
|
-
const onShowMoreClick = () => {
|
|
680
|
-
setShowedItems(showMore ? items : items.slice(0, 2));
|
|
681
|
-
setShowMore(!showMore);
|
|
682
|
-
};
|
|
683
|
-
if ((!items || !items.length) && noItemsTagLabel) {
|
|
684
|
-
return /* @__PURE__ */ jsx7(
|
|
685
|
-
Tag_default,
|
|
686
|
-
{
|
|
687
|
-
label: noItemsTagLabel?.toString(),
|
|
688
|
-
className: cn7(className, "tag-warn")
|
|
689
|
-
}
|
|
690
|
-
);
|
|
691
|
-
}
|
|
692
|
-
if ((!items || !items.length) && !noItemsTagLabel) return null;
|
|
693
|
-
return /* @__PURE__ */ jsxs7("div", { "data-testid": testId, className: cn7(className, "j4 wrap"), children: [
|
|
694
|
-
showedItems.map((item, index) => {
|
|
695
|
-
if (!item) return null;
|
|
696
|
-
return /* @__PURE__ */ jsx7(
|
|
697
|
-
AdvTag_default,
|
|
698
|
-
{
|
|
699
|
-
toTop,
|
|
700
|
-
item,
|
|
701
|
-
testId: `${testId}-item-${index}`
|
|
702
|
-
},
|
|
703
|
-
index
|
|
704
|
-
);
|
|
705
|
-
}),
|
|
706
|
-
items.length >= 3 && /* @__PURE__ */ jsx7(
|
|
707
|
-
"span",
|
|
708
|
-
{
|
|
709
|
-
"data-testid": `${testId}-showMore`,
|
|
710
|
-
onClick: onShowMoreClick,
|
|
711
|
-
className: "advanced-tags advanced-tags--showMore",
|
|
712
|
-
children: showMore ? `+${items.length - showedItems.length}` : "..."
|
|
713
|
-
}
|
|
714
|
-
)
|
|
715
|
-
] });
|
|
716
|
-
};
|
|
717
|
-
var AdvancedTags_default = AdvancedTags;
|
|
718
|
-
|
|
719
|
-
// src/Atomic/UI/AdvancedTag/index.ts
|
|
720
|
-
var AdvancedTag_default = AdvancedTags_default;
|
|
721
|
-
|
|
722
|
-
// src/Atomic/UI/Alert/Alert.tsx
|
|
723
|
-
import cn9 from "classnames";
|
|
724
|
-
import { useState as useState7 } from "react";
|
|
725
|
-
import { X as X2 } from "react-feather";
|
|
726
|
-
|
|
727
|
-
// src/Atomic/UI/Button/Button.tsx
|
|
728
|
-
import cn8 from "classnames";
|
|
729
|
-
import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
730
|
-
var RC2 = "button";
|
|
731
|
-
var Button = ({
|
|
732
|
-
label,
|
|
733
|
-
onClick,
|
|
734
|
-
disabled,
|
|
735
|
-
icon,
|
|
736
|
-
className,
|
|
737
|
-
children,
|
|
738
|
-
style,
|
|
739
|
-
noIcon,
|
|
740
|
-
isIconRight,
|
|
741
|
-
testId = "button",
|
|
742
|
-
tabIndex = 0,
|
|
743
|
-
variant = "primary",
|
|
744
|
-
isTextEllipsis = false,
|
|
745
|
-
...props
|
|
746
|
-
}) => {
|
|
747
|
-
const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
|
|
748
|
-
return /* @__PURE__ */ jsxs8(
|
|
749
|
-
"button",
|
|
750
|
-
{
|
|
751
|
-
"data-testid": testId,
|
|
752
|
-
tabIndex,
|
|
753
|
-
style,
|
|
754
|
-
className: cn8(
|
|
755
|
-
RC2,
|
|
756
|
-
{
|
|
757
|
-
[`${RC2}_${variant}`]: variant,
|
|
758
|
-
"button_icon-left": icon && !isIconRight,
|
|
759
|
-
"button_icon-right": icon && isIconRight
|
|
760
|
-
},
|
|
761
|
-
className
|
|
762
|
-
),
|
|
763
|
-
onClick,
|
|
764
|
-
disabled,
|
|
765
|
-
type: "button",
|
|
766
|
-
...props,
|
|
767
|
-
children: [
|
|
768
|
-
!noRenderIcon && icon,
|
|
769
|
-
label && /* @__PURE__ */ jsx8("div", { className: cn8("button__text", { "text-ellipsis": isTextEllipsis }), children: label }),
|
|
770
|
-
!label && children ? children : null
|
|
771
|
-
]
|
|
772
|
-
}
|
|
773
|
-
);
|
|
774
|
-
};
|
|
775
|
-
var Button_default = Button;
|
|
776
|
-
|
|
777
|
-
// src/Atomic/UI/Alert/Alert.tsx
|
|
778
|
-
import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
779
|
-
var Alert = ({
|
|
780
|
-
message,
|
|
781
|
-
icon,
|
|
782
|
-
className,
|
|
783
|
-
children,
|
|
784
|
-
noDismiss,
|
|
785
|
-
testId = "alert",
|
|
786
|
-
isHidden = false,
|
|
787
|
-
variant = "warning",
|
|
788
|
-
isLoading,
|
|
789
|
-
buttonParams
|
|
790
|
-
}) => {
|
|
791
|
-
const [onClose, setOnClose] = useState7(false);
|
|
792
|
-
const renderActionsBlock = () => {
|
|
793
|
-
if (buttonParams) {
|
|
794
|
-
return /* @__PURE__ */ jsxs9("div", { className: "j6 alert__btns-box", children: [
|
|
795
|
-
/* @__PURE__ */ jsx9(Button_default, { ...buttonParams }),
|
|
796
|
-
!noDismiss && /* @__PURE__ */ jsx9("div", { className: "alert__close-btn", children: /* @__PURE__ */ jsx9(X2, { "data-testid": `${testId}-close`, onClick: () => setOnClose(!onClose) }) })
|
|
797
|
-
] });
|
|
798
|
-
}
|
|
799
|
-
if (!noDismiss) {
|
|
800
|
-
return /* @__PURE__ */ jsx9("div", { className: "alert__close-btn", children: /* @__PURE__ */ jsx9(X2, { "data-testid": `${testId}-close`, onClick: () => setOnClose(!onClose) }) });
|
|
801
|
-
} else {
|
|
802
|
-
return null;
|
|
803
|
-
}
|
|
804
|
-
};
|
|
805
|
-
return /* @__PURE__ */ jsxs9(
|
|
806
|
-
"div",
|
|
807
|
-
{
|
|
808
|
-
"data-testid": testId,
|
|
809
|
-
className: cn9(className, { hidden: onClose }, `alert alert--${variant}`, {
|
|
810
|
-
"hidden": isHidden,
|
|
811
|
-
"alert--loading": isLoading
|
|
812
|
-
}),
|
|
813
|
-
children: [
|
|
814
|
-
/* @__PURE__ */ jsxs9("div", { className: "alert__icon-text-box j4", children: [
|
|
815
|
-
icon,
|
|
816
|
-
/* @__PURE__ */ jsx9("div", { children: children || message })
|
|
817
|
-
] }),
|
|
818
|
-
renderActionsBlock(),
|
|
819
|
-
isLoading && /* @__PURE__ */ jsx9(Spinner_default, { size: "small", testId: "loader-box" })
|
|
820
|
-
]
|
|
821
|
-
}
|
|
822
|
-
);
|
|
823
|
-
};
|
|
824
|
-
var Alert_default = Alert;
|
|
825
|
-
|
|
826
|
-
// src/Atomic/UI/Alert/index.ts
|
|
827
|
-
var Alert_default2 = Alert_default;
|
|
828
|
-
|
|
829
|
-
// src/Atomic/UI/Arrow/Arrow.tsx
|
|
830
|
-
import cn10 from "classnames";
|
|
831
|
-
import { useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
|
|
832
|
-
|
|
833
|
-
// src/Functions/utils.js
|
|
834
|
-
import { useEffect as useEffect6 } from "react";
|
|
835
|
-
import moment from "moment-timezone";
|
|
836
|
-
|
|
837
|
-
// src/Constants/index.constants.js
|
|
838
|
-
var DEFAULT_COLORS = [
|
|
839
|
-
"#D9C1FF",
|
|
840
|
-
"#FFBAF0",
|
|
841
|
-
"#FFB8CE",
|
|
842
|
-
"#FFC3A2",
|
|
843
|
-
"#FFDB7C",
|
|
844
|
-
"#F9F871",
|
|
845
|
-
"#C3FCF1",
|
|
846
|
-
"#F6F2CB",
|
|
847
|
-
"#E0F8D1",
|
|
848
|
-
"#B1DFFB",
|
|
849
|
-
"#8DECFE",
|
|
850
|
-
"#76F7ED",
|
|
851
|
-
"#8AFEC8"
|
|
852
|
-
];
|
|
853
|
-
|
|
854
|
-
// src/Functions/utils.js
|
|
855
|
-
var getIsOnlyAnObject = (input) => {
|
|
856
|
-
return typeof input === "object" && // "отбивает" примитивы и функции
|
|
857
|
-
input instanceof Object && // "отбивает" null
|
|
858
|
-
!Array.isArray(input) && // "отбивает" массивы
|
|
859
|
-
!(input instanceof Set) && // "отбивает" сеты
|
|
860
|
-
!(input instanceof Map);
|
|
861
|
-
};
|
|
862
|
-
var handleObjectChange = (updateObject, updateFunction) => (data, prop = "", isNumber) => {
|
|
863
|
-
let value;
|
|
864
|
-
if (data?.target) {
|
|
865
|
-
value = data.target.type === "checkbox" ? data.target.checked : data.target.value;
|
|
866
|
-
} else value = data;
|
|
867
|
-
value = isNumber ? Number(value) : value;
|
|
868
|
-
const props = prop.split(".");
|
|
869
|
-
const currentObject = props.reduce((res, chapter, index) => {
|
|
870
|
-
if (props.length !== index + 1) res = res[chapter];
|
|
871
|
-
return res;
|
|
872
|
-
}, updateObject);
|
|
873
|
-
currentObject[props.pop()] = value;
|
|
874
|
-
updateFunction();
|
|
875
|
-
};
|
|
876
|
-
var useOutsideToggle = (ref, setOut, open) => {
|
|
877
|
-
function handleClickOutside(event) {
|
|
878
|
-
if (ref.current && !ref.current.contains(event.target)) {
|
|
879
|
-
setOut(open);
|
|
880
|
-
}
|
|
881
|
-
}
|
|
882
|
-
useEffect6(() => {
|
|
883
|
-
document.addEventListener("mouseup", handleClickOutside);
|
|
884
|
-
return () => {
|
|
885
|
-
document.removeEventListener("mouseup", handleClickOutside);
|
|
886
|
-
};
|
|
887
|
-
}, [ref]);
|
|
888
|
-
};
|
|
889
|
-
var getStyles = (el, prop) => {
|
|
890
|
-
if (!el) return null;
|
|
891
|
-
if (!prop) return window.getComputedStyle(el);
|
|
892
|
-
return window.getComputedStyle(el).getPropertyValue(prop);
|
|
893
|
-
};
|
|
894
|
-
var getColorById = (id, colors) => {
|
|
895
|
-
if (!id) return "#FF7D00";
|
|
896
|
-
const idToArr = Array.from(id);
|
|
897
|
-
const colorsArr = colors && colors.length > 0 ? colors : DEFAULT_COLORS;
|
|
898
|
-
let number = idToArr.reduce((acc, item) => {
|
|
899
|
-
if (Number(item)) {
|
|
900
|
-
return acc + Number(item);
|
|
901
|
-
}
|
|
902
|
-
return acc;
|
|
903
|
-
}, 0);
|
|
904
|
-
while (number >= colorsArr.length) {
|
|
905
|
-
number -= colorsArr.length;
|
|
906
|
-
}
|
|
907
|
-
return colorsArr[number];
|
|
908
|
-
};
|
|
909
|
-
var addBitDepthPoints = (value, step = 3) => {
|
|
910
|
-
const isFraction = value?.includes(".");
|
|
911
|
-
const valueBeforeDot = isFraction ? value?.slice(0, value?.indexOf(".")) : value;
|
|
912
|
-
const intPart = valueBeforeDot.split("").reverse().reduce(
|
|
913
|
-
(acc, item, idx) => idx % step === 0 && idx !== 0 ? [...acc, ",", item] : [...acc, item],
|
|
914
|
-
[]
|
|
915
|
-
).reverse().join("");
|
|
916
|
-
return isFraction ? intPart + value?.slice(value?.indexOf(".")) : intPart;
|
|
917
|
-
};
|
|
918
|
-
var firstLetterCapital = (str) => typeof str === "string" ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : str;
|
|
919
|
-
var capitalized = firstLetterCapital;
|
|
920
|
-
var checkedRef = (ref) => ref ? typeof ref === "function" ? (node) => ref(node) : ref : null;
|
|
921
|
-
String.prototype.longerThan = function(compareWith) {
|
|
922
|
-
return this?.length > compareWith?.length;
|
|
923
|
-
};
|
|
924
|
-
String.prototype.lastIndexEqualsTo = function(index) {
|
|
925
|
-
return this?.length - 1 === index;
|
|
926
|
-
};
|
|
927
|
-
|
|
928
|
-
// src/Atomic/UI/Arrow/Arrow.tsx
|
|
929
|
-
import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
930
|
-
function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
|
|
931
|
-
const ref = useRef5(null);
|
|
932
|
-
const [color, setColor] = useState8("currentColor");
|
|
933
|
-
useEffect7(() => {
|
|
934
|
-
if (ref.current) {
|
|
935
|
-
setColor(getStyles(ref.current, "color"));
|
|
936
|
-
}
|
|
937
|
-
}, [ref.current]);
|
|
938
|
-
if (!type || type !== "left" && type !== "right") return null;
|
|
939
|
-
function renderSVG() {
|
|
940
|
-
if (type === "left") {
|
|
941
|
-
if (isAlt) {
|
|
942
|
-
return /* @__PURE__ */ jsxs10(
|
|
943
|
-
"svg",
|
|
944
|
-
{
|
|
945
|
-
"data-testid": testId,
|
|
946
|
-
version: "1.1",
|
|
947
|
-
id: "Layer_1",
|
|
948
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
949
|
-
width: "16",
|
|
950
|
-
height: "16",
|
|
951
|
-
viewBox: "0 0 16 16",
|
|
952
|
-
children: [
|
|
953
|
-
/* @__PURE__ */ jsx10(
|
|
954
|
-
"path",
|
|
955
|
-
{
|
|
956
|
-
d: "M12.7,8H3.3",
|
|
957
|
-
stroke: color,
|
|
958
|
-
fill: "none",
|
|
959
|
-
strokeWidth: 1.3333,
|
|
960
|
-
strokeLinecap: "round",
|
|
961
|
-
strokeLinejoin: "round"
|
|
962
|
-
}
|
|
963
|
-
),
|
|
964
|
-
/* @__PURE__ */ jsx10(
|
|
965
|
-
"path",
|
|
966
|
-
{
|
|
967
|
-
d: "M8,3.3L3.3,8L8,12.7",
|
|
968
|
-
stroke: color,
|
|
969
|
-
fill: "none",
|
|
970
|
-
strokeWidth: 1.3333,
|
|
971
|
-
strokeLinecap: "round",
|
|
972
|
-
strokeLinejoin: "round"
|
|
973
|
-
}
|
|
974
|
-
)
|
|
975
|
-
]
|
|
976
|
-
}
|
|
977
|
-
);
|
|
978
|
-
}
|
|
979
|
-
return /* @__PURE__ */ jsx10(
|
|
980
|
-
"svg",
|
|
981
|
-
{
|
|
982
|
-
"data-testid": testId,
|
|
983
|
-
width: "24",
|
|
984
|
-
height: "24",
|
|
985
|
-
viewBox: "0 0 24 24",
|
|
986
|
-
fill: "none",
|
|
987
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
988
|
-
children: /* @__PURE__ */ jsx10(
|
|
989
|
-
"path",
|
|
990
|
-
{
|
|
991
|
-
d: "M15 18L9 12L15 6",
|
|
992
|
-
stroke: color,
|
|
993
|
-
strokeWidth: "2",
|
|
994
|
-
strokeLinecap: "round",
|
|
995
|
-
strokeLinejoin: "round"
|
|
996
|
-
}
|
|
997
|
-
)
|
|
998
|
-
}
|
|
999
|
-
);
|
|
1000
|
-
}
|
|
1001
|
-
if (isAlt) {
|
|
1002
|
-
return /* @__PURE__ */ jsxs10(
|
|
1003
|
-
"svg",
|
|
1004
|
-
{
|
|
1005
|
-
"data-testid": testId,
|
|
1006
|
-
id: "Layer_1",
|
|
1007
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1008
|
-
width: "16",
|
|
1009
|
-
height: "16",
|
|
1010
|
-
viewBox: "0 0 16 16",
|
|
1011
|
-
children: [
|
|
1012
|
-
/* @__PURE__ */ jsx10(
|
|
1013
|
-
"path",
|
|
1014
|
-
{
|
|
1015
|
-
d: "M3.3,8h9.3",
|
|
1016
|
-
stroke: color,
|
|
1017
|
-
fill: "none",
|
|
1018
|
-
strokeWidth: 1.3333,
|
|
1019
|
-
strokeLinecap: "round",
|
|
1020
|
-
strokeLinejoin: "round"
|
|
1021
|
-
}
|
|
1022
|
-
),
|
|
1023
|
-
/* @__PURE__ */ jsx10(
|
|
1024
|
-
"path",
|
|
1025
|
-
{
|
|
1026
|
-
d: "M8,3.3L12.7,8L8,12.7",
|
|
1027
|
-
stroke: color,
|
|
1028
|
-
fill: "none",
|
|
1029
|
-
strokeWidth: 1.3333,
|
|
1030
|
-
strokeLinecap: "round",
|
|
1031
|
-
strokeLinejoin: "round"
|
|
1032
|
-
}
|
|
1033
|
-
)
|
|
1034
|
-
]
|
|
1035
|
-
}
|
|
1036
|
-
);
|
|
1037
|
-
}
|
|
1038
|
-
return /* @__PURE__ */ jsx10(
|
|
1039
|
-
"svg",
|
|
1040
|
-
{
|
|
1041
|
-
"data-testid": testId,
|
|
1042
|
-
width: "24",
|
|
1043
|
-
height: "24",
|
|
1044
|
-
viewBox: "0 0 24 24",
|
|
1045
|
-
fill: "none",
|
|
1046
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1047
|
-
children: /* @__PURE__ */ jsx10(
|
|
1048
|
-
"path",
|
|
1049
|
-
{
|
|
1050
|
-
d: "M9 18L15 12L9 6",
|
|
1051
|
-
stroke: "currentColor",
|
|
1052
|
-
strokeWidth: "2",
|
|
1053
|
-
strokeLinecap: "round",
|
|
1054
|
-
strokeLinejoin: "round"
|
|
1055
|
-
}
|
|
1056
|
-
)
|
|
1057
|
-
}
|
|
1058
|
-
);
|
|
1059
|
-
}
|
|
1060
|
-
return /* @__PURE__ */ jsx10(
|
|
1061
|
-
"div",
|
|
1062
|
-
{
|
|
1063
|
-
"data-testid": `arrow--key-${testId}--type-${type}`,
|
|
1064
|
-
ref,
|
|
1065
|
-
className: cn10("arrow", `arrow_${type}`, className, {
|
|
1066
|
-
arrow_disabled: disabled
|
|
1067
|
-
}),
|
|
1068
|
-
onClick,
|
|
1069
|
-
children: renderSVG()
|
|
1070
|
-
}
|
|
1071
|
-
);
|
|
1072
|
-
}
|
|
1073
|
-
var Arrow_default = Arrow;
|
|
1074
|
-
|
|
1075
|
-
// src/Atomic/UI/Box/Box.tsx
|
|
1076
|
-
import cn11 from "classnames";
|
|
1077
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
1078
|
-
var directionVariants = {
|
|
1079
|
-
column: "column",
|
|
1080
|
-
row: "row"
|
|
1081
|
-
};
|
|
1082
|
-
var sizes = {
|
|
1083
|
-
none: "none",
|
|
1084
|
-
xs: "xs",
|
|
1085
|
-
s: "s",
|
|
1086
|
-
m: "m",
|
|
1087
|
-
l: "l",
|
|
1088
|
-
xl: "xl"
|
|
1089
|
-
};
|
|
1090
|
-
function Box({
|
|
1091
|
-
children,
|
|
1092
|
-
paddingVariant = sizes.m,
|
|
1093
|
-
radiiVariant = sizes.s,
|
|
1094
|
-
direction = directionVariants.column,
|
|
1095
|
-
className,
|
|
1096
|
-
...restProps
|
|
1097
|
-
}) {
|
|
1098
|
-
const styles = {
|
|
1099
|
-
flexDirection: direction
|
|
1100
|
-
};
|
|
1101
|
-
return /* @__PURE__ */ jsx11(
|
|
1102
|
-
"div",
|
|
1103
|
-
{
|
|
1104
|
-
style: styles,
|
|
1105
|
-
"data-testid": "box",
|
|
1106
|
-
className: cn11(
|
|
1107
|
-
"box",
|
|
1108
|
-
`box--padding-${paddingVariant}`,
|
|
1109
|
-
`box--radii-${radiiVariant}`,
|
|
1110
|
-
className,
|
|
1111
|
-
{
|
|
1112
|
-
"df": direction === directionVariants.row,
|
|
1113
|
-
"dfc-jc": direction === directionVariants.column
|
|
1114
|
-
}
|
|
1115
|
-
),
|
|
1116
|
-
...restProps,
|
|
1117
|
-
children
|
|
1118
|
-
}
|
|
1119
|
-
);
|
|
1120
|
-
}
|
|
1121
|
-
var Box_default = Box;
|
|
1122
|
-
|
|
1123
|
-
// src/Atomic/UI/CircleProgressBar/CircleProgressBar.js
|
|
1124
|
-
import React8, { useEffect as useEffect8, useState as useState9 } from "react";
|
|
1125
|
-
import cn12 from "classnames";
|
|
1126
|
-
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1127
|
-
var CircleProgressBar = ({
|
|
1128
|
-
amount,
|
|
1129
|
-
totalAmount,
|
|
1130
|
-
isReverseType,
|
|
1131
|
-
children,
|
|
1132
|
-
className,
|
|
1133
|
-
colors,
|
|
1134
|
-
isInnerLine,
|
|
1135
|
-
radius = 59,
|
|
1136
|
-
strokeWidth = 2,
|
|
1137
|
-
innerLineStrokeWidth = 2,
|
|
1138
|
-
testId = "circle-progress-bar"
|
|
1139
|
-
}) => {
|
|
1140
|
-
const circumference = Math.round(2 * Math.PI * radius);
|
|
1141
|
-
const amountProgress = amount < totalAmount ? Math.round(amount / totalAmount * 100) : 100;
|
|
1142
|
-
const defaultColors = {
|
|
1143
|
-
start: "#6b81dd",
|
|
1144
|
-
finish: "#f06d8d",
|
|
1145
|
-
meter: "#ffcad6"
|
|
1146
|
-
};
|
|
1147
|
-
const [strokeDashoffset, setStrokeDashoffset] = useState9(isReverseType ? String(0) : circumference);
|
|
1148
|
-
useEffect8(() => {
|
|
1149
|
-
setStrokeDashoffset(circumference - circumference * amountProgress / 100);
|
|
1150
|
-
}, [amountProgress]);
|
|
1151
|
-
return /* @__PURE__ */ jsxs11(
|
|
1152
|
-
"div",
|
|
1153
|
-
{
|
|
1154
|
-
"data-testid": testId,
|
|
1155
|
-
className: cn12("limit-progress-bar", { "limit-progress-bar--reverse": isReverseType }, className),
|
|
1156
|
-
children: [
|
|
1157
|
-
/* @__PURE__ */ jsxs11(
|
|
1158
|
-
"svg",
|
|
1159
|
-
{
|
|
1160
|
-
className: "limit-progress-bar__progress",
|
|
1161
|
-
width: "124",
|
|
1162
|
-
height: "124",
|
|
1163
|
-
viewBox: "0 0 124 124",
|
|
1164
|
-
children: [
|
|
1165
|
-
/* @__PURE__ */ jsx12("defs", { children: isReverseType ? /* @__PURE__ */ jsxs11(
|
|
1166
|
-
"linearGradient",
|
|
1167
|
-
{
|
|
1168
|
-
id: "limit-progress-bar-linear-gradient-reverse",
|
|
1169
|
-
x1: "0",
|
|
1170
|
-
y1: "1",
|
|
1171
|
-
x2: "0",
|
|
1172
|
-
y2: "0",
|
|
1173
|
-
children: [
|
|
1174
|
-
/* @__PURE__ */ jsx12(
|
|
1175
|
-
"stop",
|
|
1176
|
-
{
|
|
1177
|
-
offset: "0",
|
|
1178
|
-
stopColor: colors.finish || defaultColors.finish
|
|
1179
|
-
}
|
|
1180
|
-
),
|
|
1181
|
-
/* @__PURE__ */ jsx12(
|
|
1182
|
-
"stop",
|
|
1183
|
-
{
|
|
1184
|
-
offset: "1",
|
|
1185
|
-
stopColor: colors.start || defaultColors.start
|
|
1186
|
-
}
|
|
1187
|
-
)
|
|
1188
|
-
]
|
|
1189
|
-
}
|
|
1190
|
-
) : /* @__PURE__ */ jsxs11(
|
|
1191
|
-
"linearGradient",
|
|
1192
|
-
{
|
|
1193
|
-
id: "limit-progress-bar-linear-gradient",
|
|
1194
|
-
x1: "0",
|
|
1195
|
-
y1: "1",
|
|
1196
|
-
x2: "0",
|
|
1197
|
-
y2: "0",
|
|
1198
|
-
children: [
|
|
1199
|
-
/* @__PURE__ */ jsx12(
|
|
1200
|
-
"stop",
|
|
1201
|
-
{
|
|
1202
|
-
offset: "0",
|
|
1203
|
-
stopColor: colors.start || defaultColors.start
|
|
1204
|
-
}
|
|
1205
|
-
),
|
|
1206
|
-
/* @__PURE__ */ jsx12(
|
|
1207
|
-
"stop",
|
|
1208
|
-
{
|
|
1209
|
-
offset: "1",
|
|
1210
|
-
stopColor: colors.finish || defaultColors.finish
|
|
1211
|
-
}
|
|
1212
|
-
)
|
|
1213
|
-
]
|
|
1214
|
-
}
|
|
1215
|
-
) }),
|
|
1216
|
-
/* @__PURE__ */ jsx12(
|
|
1217
|
-
"circle",
|
|
1218
|
-
{
|
|
1219
|
-
className: "limit-progress-bar__meter",
|
|
1220
|
-
cx: radius,
|
|
1221
|
-
cy: radius,
|
|
1222
|
-
r: radius,
|
|
1223
|
-
stroke: !isInnerLine ? "" : colors.meter || defaultColors.meter,
|
|
1224
|
-
strokeWidth: String(innerLineStrokeWidth)
|
|
1225
|
-
}
|
|
1226
|
-
),
|
|
1227
|
-
/* @__PURE__ */ jsx12(
|
|
1228
|
-
"circle",
|
|
1229
|
-
{
|
|
1230
|
-
className: "limit-progress-bar__value",
|
|
1231
|
-
cx: radius,
|
|
1232
|
-
cy: radius,
|
|
1233
|
-
r: radius,
|
|
1234
|
-
strokeWidth: String(strokeWidth),
|
|
1235
|
-
stroke: `url(#limit-progress-bar-linear-gradient${isReverseType ? "-reverse" : ""})`,
|
|
1236
|
-
style: {
|
|
1237
|
-
strokeDasharray: circumference,
|
|
1238
|
-
strokeDashoffset
|
|
1239
|
-
}
|
|
1240
|
-
}
|
|
1241
|
-
)
|
|
1242
|
-
]
|
|
1243
|
-
}
|
|
1244
|
-
),
|
|
1245
|
-
/* @__PURE__ */ jsx12("div", { className: "limit-progress-bar__content", children })
|
|
1246
|
-
]
|
|
1247
|
-
}
|
|
1248
|
-
);
|
|
1249
|
-
};
|
|
1250
|
-
var CircleProgressBar_default = CircleProgressBar;
|
|
1251
|
-
|
|
1252
|
-
// src/Atomic/UI/DateTime/DateTime.tsx
|
|
1253
|
-
import cn13 from "classnames";
|
|
1254
|
-
import moment2 from "moment-timezone";
|
|
1255
|
-
import { useMemo as useMemo2 } from "react";
|
|
1256
|
-
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1257
|
-
var RC3 = "date-time";
|
|
1258
|
-
var DEFAULT_DATE_FORMAT = "DD.MM.YYYY";
|
|
1259
|
-
var DEFAULT_TIME_FORMAT = "HH:mm:ss";
|
|
1260
|
-
var DateTime = ({
|
|
1261
|
-
className,
|
|
1262
|
-
value,
|
|
1263
|
-
valueFormat,
|
|
1264
|
-
dateFormat: inputDateFormat,
|
|
1265
|
-
timeFormat: inputTimeFormat,
|
|
1266
|
-
isNoDate,
|
|
1267
|
-
isNoTime,
|
|
1268
|
-
testId = "date-time"
|
|
1269
|
-
}) => {
|
|
1270
|
-
const dateFormat = inputDateFormat ?? DEFAULT_DATE_FORMAT;
|
|
1271
|
-
const timeFormat = inputTimeFormat ?? DEFAULT_TIME_FORMAT;
|
|
1272
|
-
const date = useMemo2(() => {
|
|
1273
|
-
return (valueFormat ? moment2(value, valueFormat) : moment2(value)).format(
|
|
1274
|
-
dateFormat
|
|
1275
|
-
);
|
|
1276
|
-
}, [value, valueFormat, dateFormat]);
|
|
1277
|
-
const time = useMemo2(() => {
|
|
1278
|
-
return (valueFormat ? moment2(value, valueFormat) : moment2(value)).format(
|
|
1279
|
-
timeFormat
|
|
1280
|
-
);
|
|
1281
|
-
}, [value, valueFormat, timeFormat]);
|
|
1282
|
-
return /* @__PURE__ */ jsxs12("div", { "data-testid": testId, className: cn13(RC3, className), children: [
|
|
1283
|
-
!isNoDate && /* @__PURE__ */ jsx13("span", { "data-testid": `${testId}-date`, className: `${RC3}__date`, children: date }),
|
|
1284
|
-
!isNoTime && /* @__PURE__ */ jsx13(
|
|
1285
|
-
"span",
|
|
1286
|
-
{
|
|
1287
|
-
"data-testid": `${testId}-time`,
|
|
1288
|
-
className: cn13(`${RC3}__time`, {
|
|
1289
|
-
[`${RC3}_color--pause`]: !isNoDate
|
|
1290
|
-
}),
|
|
1291
|
-
children: time
|
|
1292
|
-
}
|
|
1293
|
-
)
|
|
1294
|
-
] });
|
|
1295
|
-
};
|
|
1296
|
-
var DateTime_default = DateTime;
|
|
1297
|
-
|
|
1298
|
-
// src/Atomic/UI/DebugContainer/DebugContainer.tsx
|
|
1299
|
-
import cn14 from "classnames";
|
|
1300
|
-
import { useState as useState10 } from "react";
|
|
1301
|
-
import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2 } from "react-feather";
|
|
1302
|
-
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1303
|
-
var defaultData = {};
|
|
1304
|
-
var DebugContainer = ({ data = defaultData, children, className }) => {
|
|
1305
|
-
const [isVisible, setIsVisible] = useState10(true);
|
|
1306
|
-
const renderData = () => /* @__PURE__ */ jsxs13("pre", { children: [
|
|
1307
|
-
"{\n",
|
|
1308
|
-
Object.keys(data).map((key) => ` ${key}: ${String(data[key])},
|
|
1309
|
-
`),
|
|
1310
|
-
"}"
|
|
1311
|
-
] });
|
|
1312
|
-
return /* @__PURE__ */ jsxs13("div", { className: cn14("debug-container", className), "data-testid": "debug-container", children: [
|
|
1313
|
-
isVisible && /* @__PURE__ */ jsxs13("div", { className: "debug-container__body", children: [
|
|
1314
|
-
/* @__PURE__ */ jsx14("h5", { children: "Debug:" }),
|
|
1315
|
-
data && Object.keys(data).length > 0 && /* @__PURE__ */ jsx14("div", { className: "debug-container__body-row", "data-testid": "debug-data", children: renderData() }),
|
|
1316
|
-
children && /* @__PURE__ */ jsx14("div", { className: "debug-container__body-row", "data-testid": "debug-children", children })
|
|
1317
|
-
] }),
|
|
1318
|
-
/* @__PURE__ */ jsx14(
|
|
1319
|
-
"div",
|
|
1320
|
-
{
|
|
1321
|
-
className: "debug-container__toggler",
|
|
1322
|
-
onClick: () => setIsVisible((v) => !v),
|
|
1323
|
-
"data-testid": "debug-toggler",
|
|
1324
|
-
children: isVisible ? /* @__PURE__ */ jsx14(ChevronUp2, {}) : /* @__PURE__ */ jsx14(ChevronDown3, {})
|
|
1325
|
-
}
|
|
1326
|
-
)
|
|
1327
|
-
] });
|
|
1328
|
-
};
|
|
1329
|
-
var DebugContainer_default = DebugContainer;
|
|
1330
|
-
|
|
1331
|
-
// src/Atomic/UI/DebugContainer/useDebugContainer.tsx
|
|
1332
|
-
import { useState as useState11 } from "react";
|
|
1333
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
1334
|
-
function useDebugContainer() {
|
|
1335
|
-
const [data, setData] = useState11({});
|
|
1336
|
-
return {
|
|
1337
|
-
debugData: data,
|
|
1338
|
-
setDebugData: setData,
|
|
1339
|
-
renderDebugContainer: /* @__PURE__ */ jsx15(DebugContainer_default, { data })
|
|
1340
|
-
};
|
|
1341
|
-
}
|
|
1342
|
-
var useDebugContainer_default = useDebugContainer;
|
|
1343
|
-
|
|
1344
|
-
// src/Atomic/UI/DoubleString/DoubleString.tsx
|
|
1345
|
-
import cn15 from "classnames";
|
|
1346
|
-
import moment3 from "moment";
|
|
1347
|
-
import { useEffect as useEffect9, useRef as useRef6, useState as useState12 } from "react";
|
|
1348
|
-
import { Eye, EyeOff } from "react-feather";
|
|
1349
|
-
import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1350
|
-
var RC4 = "double-string";
|
|
1351
|
-
var DoubleString = ({
|
|
1352
|
-
value,
|
|
1353
|
-
description,
|
|
1354
|
-
subDescription,
|
|
1355
|
-
valuePostfix,
|
|
1356
|
-
className,
|
|
1357
|
-
testId = "double-string",
|
|
1358
|
-
isFormatValueToDate,
|
|
1359
|
-
isUseOnClick,
|
|
1360
|
-
dateFormatSettings: {
|
|
1361
|
-
parseFormat = "MM.DD.YYYY",
|
|
1362
|
-
displayFormat = "MM.DD.YYYY"
|
|
1363
|
-
} = {},
|
|
1364
|
-
revert = false,
|
|
1365
|
-
noTitle,
|
|
1366
|
-
isUseHideMode = false,
|
|
1367
|
-
isShowHiddenValueAvailable = false
|
|
1368
|
-
}) => {
|
|
1369
|
-
const [isValueHidden, setIsValueHidden] = useState12(isUseHideMode);
|
|
1370
|
-
const computedValue = isFormatValueToDate ? moment3(value, parseFormat).format(displayFormat) : value;
|
|
1371
|
-
const valueRef = useRef6(null);
|
|
1372
|
-
;
|
|
1373
|
-
const descriptionRef = useRef6(null);
|
|
1374
|
-
const [elemsWidth, setElemsWidth] = useState12({
|
|
1375
|
-
valueWidth: 0,
|
|
1376
|
-
descriptionWidth: 0
|
|
1377
|
-
});
|
|
1378
|
-
const [isOnClickON, setIsOnClickON] = useState12(false);
|
|
1379
|
-
const handle = {
|
|
1380
|
-
click: () => {
|
|
1381
|
-
setIsOnClickON(!isOnClickON);
|
|
1382
|
-
}
|
|
1383
|
-
};
|
|
1384
|
-
useEffect9(() => {
|
|
1385
|
-
const valueWidth = valueRef?.current?.clientWidth ?? 0;
|
|
1386
|
-
const descriptionWidth = descriptionRef?.current?.clientWidth ?? 0;
|
|
1387
|
-
setElemsWidth({ valueWidth, descriptionWidth });
|
|
1388
|
-
}, [descriptionRef, valueRef]);
|
|
1389
|
-
return /* @__PURE__ */ jsxs14("div", { "data-testid": testId, className: cn15(RC4, className), children: [
|
|
1390
|
-
/* @__PURE__ */ jsx16(
|
|
1391
|
-
"p",
|
|
1392
|
-
{
|
|
1393
|
-
onClick: () => handle.click(),
|
|
1394
|
-
ref: valueRef,
|
|
1395
|
-
className: cn15(
|
|
1396
|
-
`${RC4}__value`,
|
|
1397
|
-
{
|
|
1398
|
-
"double-string--value-opened": isOnClickON && isUseOnClick
|
|
1399
|
-
},
|
|
1400
|
-
{ pointer: isUseOnClick }
|
|
1401
|
-
),
|
|
1402
|
-
title: !noTitle && elemsWidth.valueWidth > 99 ? computedValue : "",
|
|
1403
|
-
children: !revert ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
|
|
1404
|
-
isUseHideMode ? /* @__PURE__ */ jsx16("span", { children: !isValueHidden ? computedValue : "*********" }) : computedValue,
|
|
1405
|
-
isUseHideMode && isShowHiddenValueAvailable && isValueHidden && /* @__PURE__ */ jsx16(Eye, { "data-testid": "double-string-eye", className: `${RC4}__hide-mode-icon`, onClick: () => setIsValueHidden(false) }),
|
|
1406
|
-
isUseHideMode && isShowHiddenValueAvailable && !isValueHidden && /* @__PURE__ */ jsx16(EyeOff, { "data-testid": "double-string-eyeoff", className: `${RC4}__hide-mode-icon`, onClick: () => setIsValueHidden(true) }),
|
|
1407
|
-
valuePostfix && /* @__PURE__ */ jsx16("span", { className: cn15(`${RC4}__value-postfix`), children: valuePostfix })
|
|
1408
|
-
] }) : description
|
|
1409
|
-
}
|
|
1410
|
-
),
|
|
1411
|
-
/* @__PURE__ */ jsx16(
|
|
1412
|
-
"p",
|
|
1413
|
-
{
|
|
1414
|
-
ref: descriptionRef,
|
|
1415
|
-
className: cn15(`${RC4}__description`),
|
|
1416
|
-
title: !noTitle && elemsWidth.descriptionWidth > 99 ? computedValue : "",
|
|
1417
|
-
children: !revert ? description : /* @__PURE__ */ jsxs14(Fragment2, { children: [
|
|
1418
|
-
computedValue,
|
|
1419
|
-
valuePostfix && /* @__PURE__ */ jsx16("span", { className: cn15(`${RC4}__value-postfix`), children: valuePostfix })
|
|
1420
|
-
] })
|
|
1421
|
-
}
|
|
1422
|
-
),
|
|
1423
|
-
subDescription && /* @__PURE__ */ jsx16("p", { className: cn15(`${RC4}__sub-description`), children: subDescription })
|
|
1424
|
-
] });
|
|
1425
|
-
};
|
|
1426
|
-
var DoubleString_default = DoubleString;
|
|
1427
|
-
|
|
1428
|
-
// src/Atomic/UI/DoubleString/index.ts
|
|
1429
|
-
var DoubleString_default2 = DoubleString_default;
|
|
1430
|
-
|
|
1431
|
-
// src/Atomic/UI/Hint/Hint.tsx
|
|
1432
|
-
import cn16 from "classnames";
|
|
1433
|
-
import { useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
|
|
1434
|
-
import { createPortal as createPortal2 } from "react-dom";
|
|
1435
|
-
import { AlertTriangle as AlertTriangle3, HelpCircle } from "react-feather";
|
|
1436
|
-
|
|
1437
|
-
// src/Molecular/CustomIcons/components/HelpCircleFilled.tsx
|
|
1438
|
-
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1439
|
-
function HelpCircleFilled(props) {
|
|
1440
|
-
return /* @__PURE__ */ jsxs15(
|
|
1441
|
-
"svg",
|
|
1442
|
-
{
|
|
1443
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
1444
|
-
width: 16,
|
|
1445
|
-
height: 16,
|
|
1446
|
-
fill: "none",
|
|
1447
|
-
...props,
|
|
1448
|
-
children: [
|
|
1449
|
-
/* @__PURE__ */ jsx17(
|
|
1450
|
-
"path",
|
|
1451
|
-
{
|
|
1452
|
-
fill: "#9AA0B9",
|
|
1453
|
-
d: "M8 14.667A6.667 6.667 0 1 0 8 1.333a6.667 6.667 0 0 0 0 13.334Z"
|
|
1454
|
-
}
|
|
1455
|
-
),
|
|
1456
|
-
/* @__PURE__ */ jsx17(
|
|
1457
|
-
"path",
|
|
1458
|
-
{
|
|
1459
|
-
stroke: "#fff",
|
|
1460
|
-
d: "M6.06 6a2 2 0 0 1 3.887.667c0 1.333-2 2-2 2M8 11.333h.006"
|
|
1461
|
-
}
|
|
1462
|
-
)
|
|
1463
|
-
]
|
|
1464
|
-
}
|
|
1465
|
-
);
|
|
1466
|
-
}
|
|
1467
|
-
|
|
1468
|
-
// src/Atomic/UI/Hint/partials/_constants.ts
|
|
1469
|
-
var I_AM_OPENED_EVENT_NAME = "hint:i-am-open";
|
|
1470
|
-
var I_AM_OPENED_EVENT_OPTIONS = {
|
|
1471
|
-
bubbles: true,
|
|
1472
|
-
cancelable: true,
|
|
1473
|
-
composed: false
|
|
1474
|
-
};
|
|
1475
|
-
|
|
1476
|
-
// src/Atomic/UI/Hint/partials/_utils.ts
|
|
1477
|
-
var getHintContainerId = (hintId) => `hint-container-for-hint--id-${hintId}`;
|
|
1478
|
-
function getHintContainer(hintId) {
|
|
1479
|
-
return document.getElementById(getHintContainerId(hintId));
|
|
1480
|
-
}
|
|
1481
|
-
function getParentNode() {
|
|
1482
|
-
return document.querySelector("div#root") ?? document.querySelector("div#app") ?? document.body;
|
|
1483
|
-
}
|
|
1484
|
-
function initHintContainer(hintId, hintContainerSettings) {
|
|
1485
|
-
const { className } = hintContainerSettings;
|
|
1486
|
-
const hintContainer = document.createElement("div");
|
|
1487
|
-
hintContainer.setAttribute("id", getHintContainerId(hintId));
|
|
1488
|
-
hintContainer.classList.add("hint__container");
|
|
1489
|
-
if (className) hintContainer.classList.add(className);
|
|
1490
|
-
getParentNode()?.append(hintContainer);
|
|
1491
|
-
}
|
|
1492
|
-
function HandleScrollObj(setIsOpen) {
|
|
1493
|
-
this.setIsOpen = setIsOpen;
|
|
1494
|
-
this.handleEvent = function() {
|
|
1495
|
-
this.setIsOpen(false);
|
|
1496
|
-
};
|
|
1497
|
-
}
|
|
1498
|
-
function HandleClickOutsideObj(id, setIsOpen) {
|
|
1499
|
-
this.id = id;
|
|
1500
|
-
this.setIsOpen = setIsOpen;
|
|
1501
|
-
this.handleEvent = function(event) {
|
|
1502
|
-
if (getHintContainer(this.id)) {
|
|
1503
|
-
if (!getHintContainer(this.id).contains(event?.target)) {
|
|
1504
|
-
this.setIsOpen(false);
|
|
1505
|
-
}
|
|
1506
|
-
}
|
|
1507
|
-
};
|
|
1508
|
-
}
|
|
1509
|
-
|
|
1510
|
-
// src/Atomic/UI/Hint/Hint.tsx
|
|
1511
|
-
import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1512
|
-
var hintTimeoutMap = /* @__PURE__ */ new Map();
|
|
1513
|
-
var isContentHoveredOuter = false;
|
|
1514
|
-
var DEFAULT_EMPTY_OBJ = {};
|
|
1515
|
-
function DEFAULT_VOID_FN() {
|
|
1516
|
-
}
|
|
1517
|
-
var Hint = ({
|
|
1518
|
-
hint,
|
|
1519
|
-
side = "right",
|
|
1520
|
-
className,
|
|
1521
|
-
hintContainer = DEFAULT_EMPTY_OBJ,
|
|
1522
|
-
label = "",
|
|
1523
|
-
variant = "filled",
|
|
1524
|
-
handleOpenType = "click",
|
|
1525
|
-
onClickCallback,
|
|
1526
|
-
onOpenChange = DEFAULT_VOID_FN,
|
|
1527
|
-
key,
|
|
1528
|
-
id,
|
|
1529
|
-
children,
|
|
1530
|
-
icon,
|
|
1531
|
-
isAccessability = false,
|
|
1532
|
-
testId = "hint",
|
|
1533
|
-
isHoverableContent = false,
|
|
1534
|
-
isLoading,
|
|
1535
|
-
isCloseOnChildrenClick = false
|
|
1536
|
-
}) => {
|
|
1537
|
-
const hintRef = useRef7(null);
|
|
1538
|
-
const [hintId] = useState13(id ?? key ?? Math.random().toString(16).slice(2));
|
|
1539
|
-
const [iAmOpenedOptions] = useState13({ ...I_AM_OPENED_EVENT_OPTIONS, detail: { hintId } });
|
|
1540
|
-
const [isOpen, setIsOpen] = useState13(false);
|
|
1541
|
-
const [isStyleComputed, setIsStyleComputed] = useState13(false);
|
|
1542
|
-
const [handleScroll] = useState13(new HandleScrollObj(setIsOpen));
|
|
1543
|
-
const [handleClickOutside] = useState13(new HandleClickOutsideObj(hintId, setIsOpen));
|
|
1544
|
-
const isCallbackExist = typeof onClickCallback === "function";
|
|
1545
|
-
const handle = {
|
|
1546
|
-
onMouseEnter: () => {
|
|
1547
|
-
const existing = hintTimeoutMap.get(hintId);
|
|
1548
|
-
if (existing) clearTimeout(existing);
|
|
1549
|
-
if (handleOpenType === "hover") {
|
|
1550
|
-
const timer = setTimeout(() => {
|
|
1551
|
-
setIsOpen(true);
|
|
1552
|
-
!isOpen && onClickCallback?.();
|
|
1553
|
-
hintRef.current?.dispatchEvent?.(new CustomEvent(I_AM_OPENED_EVENT_NAME, iAmOpenedOptions));
|
|
1554
|
-
}, 350);
|
|
1555
|
-
hintTimeoutMap.set(hintId, timer);
|
|
1556
|
-
}
|
|
1557
|
-
},
|
|
1558
|
-
onMouseLeave: () => {
|
|
1559
|
-
const existing = hintTimeoutMap.get(hintId);
|
|
1560
|
-
if (existing) clearTimeout(existing);
|
|
1561
|
-
if (!isHoverableContent && handleOpenType === "hover") {
|
|
1562
|
-
const timer = setTimeout(() => {
|
|
1563
|
-
setIsOpen(false);
|
|
1564
|
-
hintTimeoutMap.delete(hintId);
|
|
1565
|
-
}, 1e3);
|
|
1566
|
-
hintTimeoutMap.set(hintId, timer);
|
|
1567
|
-
} else if (isHoverableContent && handleOpenType === "hover") {
|
|
1568
|
-
const timer = setTimeout(() => {
|
|
1569
|
-
if (!isContentHoveredOuter) {
|
|
1570
|
-
setIsOpen(false);
|
|
1571
|
-
}
|
|
1572
|
-
hintTimeoutMap.delete(hintId);
|
|
1573
|
-
}, 100);
|
|
1574
|
-
hintTimeoutMap.set(hintId, timer);
|
|
1575
|
-
}
|
|
1576
|
-
},
|
|
1577
|
-
onMouseLeaveHoverableContent: () => {
|
|
1578
|
-
const existing = hintTimeoutMap.get(hintId);
|
|
1579
|
-
if (existing) clearTimeout(existing);
|
|
1580
|
-
if (isHoverableContent && handleOpenType === "hover") {
|
|
1581
|
-
const timer = setTimeout(() => {
|
|
1582
|
-
setIsOpen(false);
|
|
1583
|
-
isContentHoveredOuter = false;
|
|
1584
|
-
hintTimeoutMap.delete(hintId);
|
|
1585
|
-
}, 100);
|
|
1586
|
-
hintTimeoutMap.set(hintId, timer);
|
|
1587
|
-
}
|
|
1588
|
-
},
|
|
1589
|
-
onClick: isCloseOnChildrenClick ? () => setIsOpen(false) : () => {
|
|
1590
|
-
}
|
|
1591
|
-
};
|
|
1592
|
-
const getHintMarkUp = (className2) => {
|
|
1593
|
-
return /* @__PURE__ */ jsxs16(
|
|
1594
|
-
"div",
|
|
1595
|
-
{
|
|
1596
|
-
"data-testid": "test-hint-text",
|
|
1597
|
-
className: cn16("hint__text", `hint__text_${side}`, `hint--${className2}__text`),
|
|
1598
|
-
onMouseEnter: () => {
|
|
1599
|
-
if (isHoverableContent) isContentHoveredOuter = true;
|
|
1600
|
-
},
|
|
1601
|
-
onMouseLeave: isHoverableContent ? handle.onMouseLeaveHoverableContent : void 0,
|
|
1602
|
-
onClick: handle.onClick,
|
|
1603
|
-
style: { visibility: isStyleComputed ? "visible" : "hidden" },
|
|
1604
|
-
children: [
|
|
1605
|
-
isLoading && /* @__PURE__ */ jsx18(Spinner_default, { size: "small" }),
|
|
1606
|
-
hint,
|
|
1607
|
-
children
|
|
1608
|
-
]
|
|
1609
|
-
}
|
|
1610
|
-
);
|
|
1611
|
-
};
|
|
1612
|
-
const setHintContainerStyles = () => {
|
|
1613
|
-
const hc = getHintContainer(hintId);
|
|
1614
|
-
if (!hc || !isOpen) return false;
|
|
1615
|
-
const { width = 0, top = 0, left = 0 } = hintRef?.current !== null ? hintRef?.current?.getBoundingClientRect() : {};
|
|
1616
|
-
const { addWidth, addLeft, addTop } = hintContainer ?? {};
|
|
1617
|
-
const windowInnerWidth = document.documentElement.clientWidth;
|
|
1618
|
-
const windowInnerHeight = document.documentElement.clientHeight;
|
|
1619
|
-
const sw = hc.getElementsByClassName("hint__text")[0];
|
|
1620
|
-
const { width: swWidth, height: swHeight } = sw?.getBoundingClientRect() || {};
|
|
1621
|
-
hc.style.width = isOpen ? ((addWidth && !Number.isNaN(+addWidth) ? +addWidth : 0) + width)?.toString().concat("px") : "0";
|
|
1622
|
-
hc.style.left = isOpen ? ((addLeft && !Number.isNaN(+addLeft) ? +addLeft : 0) + left)?.toString().concat("px") : "0";
|
|
1623
|
-
hc.style.top = isOpen ? ((addTop && !Number.isNaN(+addTop) ? +addTop : 0) + top)?.toString().concat("px") : "0";
|
|
1624
|
-
hc.style.maxHeight = isOpen ? swHeight?.toString().concat("px") : "0";
|
|
1625
|
-
const INACCURACY = 20;
|
|
1626
|
-
switch (side) {
|
|
1627
|
-
case "top":
|
|
1628
|
-
case "centeredTop":
|
|
1629
|
-
if (top - swHeight - INACCURACY / 2 < 0) {
|
|
1630
|
-
sw.classList.remove(`hint__text_${side}`);
|
|
1631
|
-
sw.classList.add(`hint__text_${side === "top" ? "bottom" : "centeredBottom"}`);
|
|
1632
|
-
}
|
|
1633
|
-
break;
|
|
1634
|
-
case "bottom":
|
|
1635
|
-
case "centeredBottom":
|
|
1636
|
-
if (top + swHeight + INACCURACY > windowInnerHeight) {
|
|
1637
|
-
sw.classList.remove(`hint__text_${side}`);
|
|
1638
|
-
sw.classList.add(`hint__text_${side === "bottom" ? "top" : "centeredTop"}`);
|
|
1639
|
-
}
|
|
1640
|
-
break;
|
|
1641
|
-
case "left":
|
|
1642
|
-
if (left - swWidth - INACCURACY / 2 < 0) {
|
|
1643
|
-
sw.classList.remove(`hint__text_${side}`);
|
|
1644
|
-
sw.classList.add("hint__text_right");
|
|
1645
|
-
}
|
|
1646
|
-
break;
|
|
1647
|
-
case "right":
|
|
1648
|
-
default:
|
|
1649
|
-
if (left + width + swWidth + INACCURACY / 2 > windowInnerWidth) {
|
|
1650
|
-
sw.classList.remove(`hint__text_${side}`);
|
|
1651
|
-
sw.classList.add("hint__text_left");
|
|
1652
|
-
}
|
|
1653
|
-
break;
|
|
1654
|
-
}
|
|
1655
|
-
setIsStyleComputed(true);
|
|
1656
|
-
};
|
|
1657
|
-
const renderHintContainer = (className2) => {
|
|
1658
|
-
const hc = getHintContainer(hintId);
|
|
1659
|
-
if (!hc) return null;
|
|
1660
|
-
return createPortal2(getHintMarkUp(className2), hc);
|
|
1661
|
-
};
|
|
1662
|
-
useEffect10(() => {
|
|
1663
|
-
initHintContainer(hintId, hintContainer);
|
|
1664
|
-
const iAmOpenedCallback = (ev) => {
|
|
1665
|
-
const event = ev;
|
|
1666
|
-
if (event?.detail?.hintId !== hintId) {
|
|
1667
|
-
setIsOpen(false);
|
|
1668
|
-
const timer = hintTimeoutMap.get(hintId);
|
|
1669
|
-
if (timer) {
|
|
1670
|
-
clearTimeout(timer);
|
|
1671
|
-
hintTimeoutMap.delete(hintId);
|
|
1672
|
-
}
|
|
1673
|
-
}
|
|
1674
|
-
return event;
|
|
1675
|
-
};
|
|
1676
|
-
if (hintRef.current) {
|
|
1677
|
-
document.addEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);
|
|
1678
|
-
}
|
|
1679
|
-
return () => {
|
|
1680
|
-
document.removeEventListener(I_AM_OPENED_EVENT_NAME, iAmOpenedCallback);
|
|
1681
|
-
const timer = hintTimeoutMap.get(hintId);
|
|
1682
|
-
if (timer) {
|
|
1683
|
-
clearTimeout(timer);
|
|
1684
|
-
hintTimeoutMap.delete(hintId);
|
|
1685
|
-
}
|
|
1686
|
-
};
|
|
1687
|
-
}, []);
|
|
1688
|
-
useEffect10(() => {
|
|
1689
|
-
setIsStyleComputed(false);
|
|
1690
|
-
setHintContainerStyles();
|
|
1691
|
-
onOpenChange?.(isOpen);
|
|
1692
|
-
if (isOpen) {
|
|
1693
|
-
document.addEventListener("scroll", handleScroll, true);
|
|
1694
|
-
document.addEventListener("click", handleClickOutside, true);
|
|
1695
|
-
} else {
|
|
1696
|
-
document.removeEventListener("scroll", handleScroll, true);
|
|
1697
|
-
document.removeEventListener("click", handleClickOutside, true);
|
|
1698
|
-
}
|
|
1699
|
-
return () => {
|
|
1700
|
-
const timer = hintTimeoutMap.get(hintId);
|
|
1701
|
-
if (timer) {
|
|
1702
|
-
clearTimeout(timer);
|
|
1703
|
-
hintTimeoutMap.delete(hintId);
|
|
1704
|
-
}
|
|
1705
|
-
};
|
|
1706
|
-
}, [isOpen]);
|
|
1707
|
-
return /* @__PURE__ */ jsxs16("div", { "data-testid": testId, className: cn16("hint", className), ref: hintRef, children: [
|
|
1708
|
-
/* @__PURE__ */ jsxs16(
|
|
1709
|
-
"button",
|
|
1710
|
-
{
|
|
1711
|
-
tabIndex: isAccessability ? 0 : -1,
|
|
1712
|
-
"data-testid": typeof label === "string" && label.length ? label.replace?.(/\s/g, "-") : `${testId}--button`,
|
|
1713
|
-
"aria-label": isAccessability && typeof label === "string" ? label : "",
|
|
1714
|
-
onClick: () => handleOpenType === "click" && (isCallbackExist ? onClickCallback?.() : setIsOpen(!isOpen)),
|
|
1715
|
-
onMouseEnter: handle.onMouseEnter,
|
|
1716
|
-
onMouseLeave: handle.onMouseLeave,
|
|
1717
|
-
className: cn16("hint__button", { hint__button_active: isOpen }),
|
|
1718
|
-
children: [
|
|
1719
|
-
icon || icon === null || /* @__PURE__ */ jsxs16(Fragment3, { children: [
|
|
1720
|
-
variant === "outlined" && /* @__PURE__ */ jsx18(HelpCircle, { width: 16, height: 16, className: "hint__icon outlined" }),
|
|
1721
|
-
variant === "filled" && /* @__PURE__ */ jsx18(HelpCircleFilled, { className: "hint__icon filled" }),
|
|
1722
|
-
variant === "warning" && /* @__PURE__ */ jsx18(AlertTriangle3, { className: "hint__icon", color: "#F06D8D", width: 16, height: 16 })
|
|
1723
|
-
] }),
|
|
1724
|
-
label && /* @__PURE__ */ jsx18("span", { className: cn16("hint__label", { "color--primary": isOpen }), children: typeof label === "string" ? capitalized(label) : label })
|
|
1725
|
-
]
|
|
1726
|
-
}
|
|
1727
|
-
),
|
|
1728
|
-
isOpen && renderHintContainer(className)
|
|
1729
|
-
] });
|
|
1730
|
-
};
|
|
1731
|
-
var Hint_default = Hint;
|
|
1732
|
-
|
|
1733
|
-
// src/Atomic/UI/Hint/index.ts
|
|
1734
|
-
var Hint_default2 = Hint_default;
|
|
1735
|
-
|
|
1736
|
-
// src/Atomic/UI/Modal/Modal.tsx
|
|
1737
|
-
import cn19 from "classnames";
|
|
1738
|
-
import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect3, useMemo as useMemo4, useRef as useRef10 } from "react";
|
|
1739
|
-
|
|
1740
|
-
// src/Functions/useKeyPress/useHandleKeyPress.ts
|
|
1741
|
-
import { useEffect as useEffect12 } from "react";
|
|
1742
|
-
|
|
1743
|
-
// src/Functions/useKeyPress/useKeyPress.ts
|
|
1744
|
-
import { useCallback, useEffect as useEffect11, useState as useState14 } from "react";
|
|
1745
|
-
function isISuspendProcessing(x) {
|
|
1746
|
-
return getIsOnlyAnObject(x) && Object.values(x).every((v) => typeof v === "function");
|
|
1747
|
-
}
|
|
1748
|
-
function useKeyPress(targetKey, clamping = true, isForbidden, suspendProcessing) {
|
|
1749
|
-
const [keyPressed, setKeyPressed] = useState14(false);
|
|
1750
|
-
const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
|
|
1751
|
-
const downHandler = useCallback(
|
|
1752
|
-
(event) => {
|
|
1753
|
-
const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
|
|
1754
|
-
const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
|
|
1755
|
-
if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
|
|
1756
|
-
if (!clamping && repeat) return;
|
|
1757
|
-
setKeyPressed(true);
|
|
1758
|
-
}
|
|
1759
|
-
},
|
|
1760
|
-
// ? Намерянно в зависимостях используем именно входной suspendProcessing,
|
|
1761
|
-
// ? хоть в коде используем "безопасный"
|
|
1762
|
-
[clamping, targetKey, suspendProcessing]
|
|
1763
|
-
);
|
|
1764
|
-
const upHandler = useCallback(
|
|
1765
|
-
(event) => {
|
|
1766
|
-
const { key, repeat, altKey, ctrlKey, shiftKey, metaKey } = event;
|
|
1767
|
-
const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
|
|
1768
|
-
if (key === targetKey && isPressingWithoutAuxiliaryKeys && !safelySuspendProcessing[key]?.(event)) {
|
|
1769
|
-
if (!clamping && repeat) return;
|
|
1770
|
-
setKeyPressed(false);
|
|
1771
|
-
}
|
|
1772
|
-
},
|
|
1773
|
-
// ? Намерянно в зависимостях используем именно входной suspendProcessing,
|
|
1774
|
-
// ? хоть в коде используем "безопасный"
|
|
1775
|
-
[clamping, targetKey, suspendProcessing]
|
|
1776
|
-
);
|
|
1777
|
-
useEffect11(
|
|
1778
|
-
() => {
|
|
1779
|
-
const handleDown = (event) => downHandler(event);
|
|
1780
|
-
const handleUp = (event) => upHandler(event);
|
|
1781
|
-
if (!isForbidden) {
|
|
1782
|
-
window.addEventListener("keydown", handleDown);
|
|
1783
|
-
window.addEventListener("keyup", handleUp);
|
|
1784
|
-
}
|
|
1785
|
-
return () => {
|
|
1786
|
-
window.removeEventListener("keydown", handleDown);
|
|
1787
|
-
window.removeEventListener("keyup", handleUp);
|
|
1788
|
-
};
|
|
1789
|
-
},
|
|
1790
|
-
// ? Намерянно в зависимостях используем именно входной suspendProcessing,
|
|
1791
|
-
// ? хоть в коде используем "безопасный"
|
|
1792
|
-
[downHandler, upHandler, isForbidden, suspendProcessing]
|
|
1793
|
-
);
|
|
1794
|
-
return keyPressed;
|
|
1795
|
-
}
|
|
1796
|
-
var useKeyPress_default = useKeyPress;
|
|
1797
|
-
|
|
1798
|
-
// src/Functions/useKeyPress/useHandleKeyPress.ts
|
|
1799
|
-
function useHandleKeyPress({
|
|
1800
|
-
escCallback,
|
|
1801
|
-
enterCallback,
|
|
1802
|
-
withClamping = true,
|
|
1803
|
-
withEventManagementStructure,
|
|
1804
|
-
suspendProcessing = null
|
|
1805
|
-
}) {
|
|
1806
|
-
const { isWithSubmitAndCloseManagement } = withEventManagementStructure || {};
|
|
1807
|
-
const isPressEnter = useKeyPress_default("Enter", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
|
|
1808
|
-
const isPressEscape = useKeyPress_default("Escape", withClamping, isWithSubmitAndCloseManagement, suspendProcessing);
|
|
1809
|
-
useEffect12(() => {
|
|
1810
|
-
if (!isWithSubmitAndCloseManagement && isPressEscape && typeof escCallback === "function") {
|
|
1811
|
-
escCallback();
|
|
1812
|
-
}
|
|
1813
|
-
}, [isPressEscape, escCallback]);
|
|
1814
|
-
useEffect12(() => {
|
|
1815
|
-
if (!isWithSubmitAndCloseManagement && isPressEnter && typeof enterCallback === "function") {
|
|
1816
|
-
enterCallback();
|
|
1817
|
-
}
|
|
1818
|
-
}, [isPressEnter, enterCallback]);
|
|
1819
|
-
}
|
|
1820
|
-
var useHandleKeyPress_default = useHandleKeyPress;
|
|
1821
|
-
|
|
1822
|
-
// src/Atomic/UI/Modal/partials/_constants.ts
|
|
1823
|
-
var DEFAULT_EVENT_OPTIONS = Object.freeze({
|
|
1824
|
-
bubbles: true,
|
|
1825
|
-
cancelable: true,
|
|
1826
|
-
composed: false
|
|
1827
|
-
});
|
|
1828
|
-
var EVENTS = Object.freeze({
|
|
1829
|
-
["iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */]: {
|
|
1830
|
-
innerKey: "iGotAnEnterKeyPress" /* iGotAnEnterKeyPress */,
|
|
1831
|
-
name: "modal:i-got-an-enter-key-press",
|
|
1832
|
-
shortName: "enterIsPressed",
|
|
1833
|
-
middlewareKey: "Enter",
|
|
1834
|
-
options: DEFAULT_EVENT_OPTIONS
|
|
1835
|
-
},
|
|
1836
|
-
["iGotAnEscKeyPress" /* iGotAnEscKeyPress */]: {
|
|
1837
|
-
innerKey: "iGotAnEscKeyPress" /* iGotAnEscKeyPress */,
|
|
1838
|
-
name: "modal:i-got-an-esc-key-press",
|
|
1839
|
-
shortName: "escIsPressed",
|
|
1840
|
-
middlewareKey: "Escape",
|
|
1841
|
-
options: DEFAULT_EVENT_OPTIONS
|
|
1842
|
-
}
|
|
1843
|
-
});
|
|
1844
|
-
|
|
1845
|
-
// src/Atomic/UI/Modal/partials/_utils.ts
|
|
1846
|
-
function getWithEventManagementStructure(modalId, withEventManagement) {
|
|
1847
|
-
const output = {
|
|
1848
|
-
isWithSubmitAndCloseManagement: false
|
|
1849
|
-
};
|
|
1850
|
-
for (const key in output) {
|
|
1851
|
-
if (!modalId) {
|
|
1852
|
-
output[key] = false;
|
|
1853
|
-
} else {
|
|
1854
|
-
output[key] = getIsOnlyAnObject(withEventManagement) ? withEventManagement[key] ?? false : !!withEventManagement;
|
|
1855
|
-
}
|
|
1856
|
-
}
|
|
1857
|
-
return output;
|
|
1858
|
-
}
|
|
1859
|
-
function getOnKeyPress({
|
|
1860
|
-
id: modalId,
|
|
1861
|
-
onSubmit,
|
|
1862
|
-
onClose,
|
|
1863
|
-
suspendProcessing
|
|
1864
|
-
}) {
|
|
1865
|
-
if (!modalId) return null;
|
|
1866
|
-
return function onKeyPress(ev) {
|
|
1867
|
-
const customEvent = ev;
|
|
1868
|
-
const { id: eventId, realEvent } = customEvent.detail || {};
|
|
1869
|
-
const constantInfoAboutCustomEvent = Object.values(EVENTS).find((ev2) => ev2.name === customEvent.type || ev2.shortName === customEvent.type) || {};
|
|
1870
|
-
const middlewareKey = constantInfoAboutCustomEvent.middlewareKey || "incorrectKey";
|
|
1871
|
-
const safelySuspendProcessing = isISuspendProcessing(suspendProcessing) ? suspendProcessing : {};
|
|
1872
|
-
if (modalId && eventId && eventId === modalId && !safelySuspendProcessing[middlewareKey]?.(realEvent)) {
|
|
1873
|
-
switch (customEvent.type) {
|
|
1874
|
-
case EVENTS.iGotAnEnterKeyPress.name: {
|
|
1875
|
-
onSubmit?.();
|
|
1876
|
-
break;
|
|
1877
|
-
}
|
|
1878
|
-
case EVENTS.iGotAnEscKeyPress.name: {
|
|
1879
|
-
onClose?.();
|
|
1880
|
-
break;
|
|
1881
|
-
}
|
|
1882
|
-
default: {
|
|
1883
|
-
break;
|
|
1884
|
-
}
|
|
1885
|
-
}
|
|
1886
|
-
}
|
|
1887
|
-
};
|
|
1888
|
-
}
|
|
1889
|
-
function dispatchEventForModalManagement(realEvent, nameOfCustomEvent, uniqueIdOfRecipient, target) {
|
|
1890
|
-
const { repeat, altKey, ctrlKey, shiftKey, metaKey } = realEvent;
|
|
1891
|
-
const isPressingWithoutAuxiliaryKeys = !altKey && !ctrlKey && !shiftKey && !metaKey;
|
|
1892
|
-
if (!repeat && isPressingWithoutAuxiliaryKeys) {
|
|
1893
|
-
const event = Object.values(EVENTS).find((ev) => ev.name === nameOfCustomEvent || ev.shortName === nameOfCustomEvent);
|
|
1894
|
-
if (event && uniqueIdOfRecipient) {
|
|
1895
|
-
(target ?? document).dispatchEvent(new CustomEvent(event.name, { ...event.options, detail: { id: uniqueIdOfRecipient, realEvent } }));
|
|
1896
|
-
}
|
|
1897
|
-
}
|
|
1898
|
-
}
|
|
1899
|
-
|
|
1900
|
-
// src/Atomic/UI/Modal/partials/ModalFooter.tsx
|
|
1901
|
-
import cn17 from "classnames";
|
|
1902
|
-
import { memo } from "react";
|
|
1903
|
-
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1904
|
-
var ModalFooter = memo(
|
|
1905
|
-
({ className = "", children, wrapperRef, testId = "modal-footer" }) => {
|
|
1906
|
-
return /* @__PURE__ */ jsx19(
|
|
1907
|
-
"footer",
|
|
1908
|
-
{
|
|
1909
|
-
"data-testid": testId,
|
|
1910
|
-
ref: wrapperRef,
|
|
1911
|
-
className: cn17("modal__footer", className),
|
|
1912
|
-
role: "contentinfo",
|
|
1913
|
-
"aria-label": "Modal footer",
|
|
1914
|
-
children
|
|
1915
|
-
}
|
|
1916
|
-
);
|
|
1917
|
-
}
|
|
1918
|
-
);
|
|
1919
|
-
ModalFooter.displayName = "ModalFooter";
|
|
1920
|
-
var ModalFooter_default = ModalFooter;
|
|
1921
|
-
|
|
1922
|
-
// src/Atomic/UI/Modal/partials/ModalTitle.tsx
|
|
1923
|
-
import cn18 from "classnames";
|
|
1924
|
-
import { memo as memo2, useLayoutEffect, useMemo as useMemo3, useRef as useRef8 } from "react";
|
|
1925
|
-
import { X as X3 } from "react-feather";
|
|
1926
|
-
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1927
|
-
var ModalTitle = memo2(
|
|
1928
|
-
({
|
|
1929
|
-
variant = "primary",
|
|
1930
|
-
children,
|
|
1931
|
-
isForced = false,
|
|
1932
|
-
onClose,
|
|
1933
|
-
closeBtnDisable,
|
|
1934
|
-
noHeaderCloseBtn = false,
|
|
1935
|
-
className,
|
|
1936
|
-
wrapperRef,
|
|
1937
|
-
testId = "modal-title"
|
|
1938
|
-
}) => {
|
|
1939
|
-
const closeModalRef = useRef8(onClose);
|
|
1940
|
-
const handleClick = useMemo3(() => () => closeModalRef.current?.(), []);
|
|
1941
|
-
useLayoutEffect(() => {
|
|
1942
|
-
closeModalRef.current = closeBtnDisable ? void 0 : onClose;
|
|
1943
|
-
}, [onClose, closeBtnDisable]);
|
|
1944
|
-
return /* @__PURE__ */ jsxs17(
|
|
1945
|
-
"header",
|
|
1946
|
-
{
|
|
1947
|
-
"data-testid": testId,
|
|
1948
|
-
ref: wrapperRef,
|
|
1949
|
-
className: cn18("modal__header", className, {
|
|
1950
|
-
[`modal__header-${variant}`]: variant
|
|
1951
|
-
}),
|
|
1952
|
-
role: "banner",
|
|
1953
|
-
"aria-label": "Modal header",
|
|
1954
|
-
children: [
|
|
1955
|
-
/* @__PURE__ */ jsx20(
|
|
1956
|
-
"span",
|
|
1957
|
-
{
|
|
1958
|
-
className: cn18("modal__header-title", {
|
|
1959
|
-
[`modal__header-${variant}-title`]: variant
|
|
1960
|
-
}),
|
|
1961
|
-
id: `${testId}-heading`,
|
|
1962
|
-
children
|
|
1963
|
-
}
|
|
1964
|
-
),
|
|
1965
|
-
!isForced && /* @__PURE__ */ jsx20(
|
|
1966
|
-
"button",
|
|
1967
|
-
{
|
|
1968
|
-
type: "button",
|
|
1969
|
-
onClick: handleClick,
|
|
1970
|
-
className: cn18("modal-close-icon-box", {
|
|
1971
|
-
"modal-close-icon-box-primary": variant === "primary",
|
|
1972
|
-
"modal-close-icon-box--hidden": noHeaderCloseBtn
|
|
1973
|
-
}),
|
|
1974
|
-
"aria-label": "Close modal",
|
|
1975
|
-
title: "Close modal",
|
|
1976
|
-
children: !noHeaderCloseBtn && /* @__PURE__ */ jsx20(X3, { className: "modal-close-icon", role: "img", "aria-hidden": "true" })
|
|
1977
|
-
}
|
|
1978
|
-
)
|
|
1979
|
-
]
|
|
1980
|
-
}
|
|
1981
|
-
);
|
|
1982
|
-
}
|
|
1983
|
-
);
|
|
1984
|
-
ModalTitle.displayName = "ModalTitle";
|
|
1985
|
-
var ModalTitle_default = ModalTitle;
|
|
1986
|
-
|
|
1987
|
-
// src/Atomic/UI/Modal/partials/useMobileModal.tsx
|
|
1988
|
-
import { useCallback as useCallback2, useEffect as useEffect14, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState16 } from "react";
|
|
1989
|
-
|
|
1990
|
-
// src/Functions/useIsMobile/useIsMobile.ts
|
|
1991
|
-
import { useEffect as useEffect13, useState as useState15 } from "react";
|
|
1992
|
-
function useIsMobile({ isWithoutWidthCheck = false } = {}) {
|
|
1993
|
-
const isIPad = () => {
|
|
1994
|
-
const ua = navigator.userAgent || navigator.vendor || window.opera;
|
|
1995
|
-
const isMac = /Macintosh/.test(ua);
|
|
1996
|
-
const hasTouch = navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
|
|
1997
|
-
return isMac && !!hasTouch;
|
|
1998
|
-
};
|
|
1999
|
-
const getIsMobile = () => {
|
|
2000
|
-
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || isIPad();
|
|
2001
|
-
};
|
|
2002
|
-
const [isMobile, setIsMobile] = useState15(getIsMobile());
|
|
2003
|
-
useEffect13(() => {
|
|
2004
|
-
if (getIsMobile()) {
|
|
2005
|
-
setIsMobile(true);
|
|
2006
|
-
}
|
|
2007
|
-
}, [navigator.userAgent]);
|
|
2008
|
-
return {
|
|
2009
|
-
isMobile: isMobile && (isWithoutWidthCheck || window.screen.width <= 768 || window.screen.width <= 1024 && window.matchMedia("(orientation: landscape)").matches),
|
|
2010
|
-
isMobilePortrait: isMobile && window.screen.width <= 768 && window.matchMedia("(orientation: portait)").matches,
|
|
2011
|
-
isMobileLandscape: isMobile && window.screen.width <= 1024 && window.matchMedia("(orientation: landscape)").matches
|
|
2012
|
-
};
|
|
2013
|
-
}
|
|
2014
|
-
var useIsMobile_default = useIsMobile;
|
|
2015
|
-
|
|
2016
|
-
// src/Atomic/UI/Modal/partials/useMobileModal.tsx
|
|
2017
|
-
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
2018
|
-
var SCROLL_DIRECTION = {
|
|
2019
|
-
UP: "up",
|
|
2020
|
-
DOWN: "down"
|
|
2021
|
-
};
|
|
2022
|
-
function useMobileModal({
|
|
2023
|
-
modalRef,
|
|
2024
|
-
withMobileLogic = false,
|
|
2025
|
-
withFixedFooter = false,
|
|
2026
|
-
isOpen = false
|
|
2027
|
-
}) {
|
|
2028
|
-
const modalMobileContainerRef = useRef9(null);
|
|
2029
|
-
const modalMobileHeaderRef = useRef9(null);
|
|
2030
|
-
const modalMobileFooterRef = useRef9(null);
|
|
2031
|
-
const modalMobileBodyRef = useRef9(null);
|
|
2032
|
-
const { isMobile } = useIsMobile_default();
|
|
2033
|
-
const [modalHeight, setModalHeight] = useState16(0);
|
|
2034
|
-
const [modalsLogic, setModalsLogic] = useState16({
|
|
2035
|
-
IS_HEADER_HIDDEN: false,
|
|
2036
|
-
IS_HEADER_STICKY: false,
|
|
2037
|
-
IS_FOOTER_HIDDEN: false,
|
|
2038
|
-
IS_FOOTER_STICKY: withFixedFooter
|
|
2039
|
-
});
|
|
2040
|
-
const [modalsLogicProps, setModalsLogicProps] = useState16({
|
|
2041
|
-
headerHeight: 0,
|
|
2042
|
-
footerHeight: 0
|
|
2043
|
-
});
|
|
2044
|
-
const [scrollDirection, setScrollDirection] = useState16(SCROLL_DIRECTION.UP);
|
|
2045
|
-
const [scrollTopPrev, setScrollTopPrev] = useState16(0);
|
|
2046
|
-
const [scrollTop, setScrollTop] = useState16(0);
|
|
2047
|
-
const [scrollHeight, setScrollHeight] = useState16(1);
|
|
2048
|
-
const [, setContainerScrollHeight] = useState16(1);
|
|
2049
|
-
useLayoutEffect2(() => {
|
|
2050
|
-
const el = modalMobileContainerRef?.current;
|
|
2051
|
-
if (el) {
|
|
2052
|
-
el.addEventListener("scroll", () => {
|
|
2053
|
-
setScrollTop((scrollTop2) => {
|
|
2054
|
-
if (scrollTop2 !== el.scrollTop) setScrollTopPrev(scrollTop2);
|
|
2055
|
-
return el.scrollTop;
|
|
2056
|
-
});
|
|
2057
|
-
});
|
|
2058
|
-
}
|
|
2059
|
-
}, [modalMobileContainerRef?.current]);
|
|
2060
|
-
useEffect14(() => {
|
|
2061
|
-
setScrollDirection(
|
|
2062
|
-
(prevScrollDirection) => scrollTop < scrollTopPrev ? SCROLL_DIRECTION.UP : scrollTop > scrollTopPrev ? SCROLL_DIRECTION.DOWN : prevScrollDirection
|
|
2063
|
-
);
|
|
2064
|
-
}, [scrollTop, scrollTopPrev]);
|
|
2065
|
-
useLayoutEffect2(() => {
|
|
2066
|
-
if (isOpen) {
|
|
2067
|
-
const modalStyle = modalRef?.current ? modalRef?.current.style || window.getComputedStyle(modalRef?.current) : {};
|
|
2068
|
-
const computedModalHeight = modalRef?.current ? modalHeight + Number.parseFloat(modalStyle?.marginTop || "0") : 0;
|
|
2069
|
-
const windowHeight = document.documentElement.clientHeight || window.screen.availHeight || window.screen.height;
|
|
2070
|
-
if (modalMobileContainerRef?.current) {
|
|
2071
|
-
if (computedModalHeight <= windowHeight) {
|
|
2072
|
-
modalMobileContainerRef.current.style.display = "flex";
|
|
2073
|
-
modalMobileContainerRef.current.style.alignItems = "flex-end";
|
|
2074
|
-
} else {
|
|
2075
|
-
modalMobileContainerRef.current?.style?.removeProperty("display");
|
|
2076
|
-
modalMobileContainerRef.current?.style?.removeProperty("align-items");
|
|
2077
|
-
}
|
|
2078
|
-
}
|
|
2079
|
-
}
|
|
2080
|
-
}, [modalsLogicProps, isOpen, isMobile, modalHeight]);
|
|
2081
|
-
useLayoutEffect2(() => {
|
|
2082
|
-
if (isMobile && isOpen) {
|
|
2083
|
-
const newModalHeight = modalRef?.current?.getBoundingClientRect()?.height;
|
|
2084
|
-
if (newModalHeight && modalHeight !== newModalHeight) {
|
|
2085
|
-
setModalHeight(newModalHeight);
|
|
2086
|
-
}
|
|
2087
|
-
}
|
|
2088
|
-
});
|
|
2089
|
-
useEffect14(() => {
|
|
2090
|
-
if (isMobile && withMobileLogic) {
|
|
2091
|
-
const { footerHeight, headerHeight } = modalsLogicProps;
|
|
2092
|
-
setModalsLogic((prevStickyLogic) => ({
|
|
2093
|
-
IS_HEADER_HIDDEN: scrollDirection === SCROLL_DIRECTION.DOWN || scrollTop === 0,
|
|
2094
|
-
IS_HEADER_STICKY: scrollDirection === SCROLL_DIRECTION.UP && scrollTop !== 0 && (scrollTop >= headerHeight || prevStickyLogic.IS_HEADER_STICKY),
|
|
2095
|
-
IS_FOOTER_HIDDEN: !withFixedFooter && (scrollDirection === SCROLL_DIRECTION.UP || scrollHeight === Math.round(scrollTop)),
|
|
2096
|
-
IS_FOOTER_STICKY: withFixedFooter && scrollHeight > 1 || scrollDirection === SCROLL_DIRECTION.DOWN && (scrollHeight - Math.round(scrollTop) >= footerHeight || prevStickyLogic.IS_FOOTER_STICKY)
|
|
2097
|
-
}));
|
|
2098
|
-
}
|
|
2099
|
-
}, [
|
|
2100
|
-
scrollTop,
|
|
2101
|
-
scrollHeight,
|
|
2102
|
-
isMobile,
|
|
2103
|
-
withMobileLogic,
|
|
2104
|
-
scrollDirection,
|
|
2105
|
-
modalsLogicProps,
|
|
2106
|
-
modalHeight,
|
|
2107
|
-
window.innerHeight
|
|
2108
|
-
]);
|
|
2109
|
-
useLayoutEffect2(() => {
|
|
2110
|
-
if (modalMobileHeaderRef?.current?.getBoundingClientRect()?.height !== void 0) {
|
|
2111
|
-
setModalsLogicProps((state) => ({
|
|
2112
|
-
...state,
|
|
2113
|
-
headerHeight: modalMobileHeaderRef?.current?.getBoundingClientRect()?.height ?? 0
|
|
2114
|
-
}));
|
|
2115
|
-
}
|
|
2116
|
-
}, [modalMobileHeaderRef?.current?.getBoundingClientRect()?.height]);
|
|
2117
|
-
useLayoutEffect2(() => {
|
|
2118
|
-
if (modalMobileFooterRef?.current?.getBoundingClientRect()?.height !== void 0) {
|
|
2119
|
-
setModalsLogicProps((state) => ({
|
|
2120
|
-
...state,
|
|
2121
|
-
footerHeight: modalMobileFooterRef?.current?.getBoundingClientRect()?.height ?? 0
|
|
2122
|
-
}));
|
|
2123
|
-
}
|
|
2124
|
-
}, [modalMobileFooterRef?.current?.getBoundingClientRect()?.height]);
|
|
2125
|
-
useEffect14(() => {
|
|
2126
|
-
if (modalMobileContainerRef?.current) {
|
|
2127
|
-
setContainerScrollHeight(modalMobileContainerRef?.current?.scrollHeight);
|
|
2128
|
-
setScrollHeight(
|
|
2129
|
-
modalMobileContainerRef?.current?.scrollHeight - window.innerHeight
|
|
2130
|
-
);
|
|
2131
|
-
}
|
|
2132
|
-
}, [scrollTop, modalMobileContainerRef?.current, window.innerHeight]);
|
|
2133
|
-
useEffect14(() => {
|
|
2134
|
-
window.addEventListener("resize", () => {
|
|
2135
|
-
setContainerScrollHeight((containerScrollHeight) => {
|
|
2136
|
-
setScrollHeight(containerScrollHeight - window.innerHeight);
|
|
2137
|
-
return containerScrollHeight;
|
|
2138
|
-
});
|
|
2139
|
-
});
|
|
2140
|
-
}, []);
|
|
2141
|
-
const renderModal = useCallback2(
|
|
2142
|
-
(modal) => {
|
|
2143
|
-
if (!isMobile || !withMobileLogic) return modal;
|
|
2144
|
-
return /* @__PURE__ */ jsx21("div", { className: "modal-mobile-container", ref: modalMobileContainerRef, children: modal });
|
|
2145
|
-
},
|
|
2146
|
-
[isMobile, withMobileLogic]
|
|
2147
|
-
);
|
|
2148
|
-
return {
|
|
2149
|
-
modalMobileContainerRef,
|
|
2150
|
-
modalMobileHeaderRef,
|
|
2151
|
-
modalMobileBodyRef,
|
|
2152
|
-
modalMobileFooterRef,
|
|
2153
|
-
MODALS_LOGIC: modalsLogic,
|
|
2154
|
-
SCROLL_DIRECTION,
|
|
2155
|
-
scrollTop,
|
|
2156
|
-
scrollHeight,
|
|
2157
|
-
renderModal,
|
|
2158
|
-
isMobile
|
|
2159
|
-
};
|
|
2160
|
-
}
|
|
2161
|
-
|
|
2162
|
-
// src/Atomic/UI/Modal/Modal.tsx
|
|
2163
|
-
import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
2164
|
-
var attrsForModalBodyDefault = {};
|
|
2165
|
-
var KEY_CODE = Object.freeze({
|
|
2166
|
-
ENTER: 13,
|
|
2167
|
-
ESC: 27
|
|
2168
|
-
});
|
|
2169
|
-
function renderModalTitle({
|
|
2170
|
-
mode,
|
|
2171
|
-
title,
|
|
2172
|
-
onlyTitle
|
|
2173
|
-
}) {
|
|
2174
|
-
if (mode && mode !== "default" && !onlyTitle) {
|
|
2175
|
-
return `${mode[0].toUpperCase()}${mode.slice(1)} ${title}`;
|
|
2176
|
-
}
|
|
2177
|
-
return title;
|
|
2178
|
-
}
|
|
2179
|
-
function Modal({
|
|
2180
|
-
ref,
|
|
2181
|
-
id,
|
|
2182
|
-
testId = "modal",
|
|
2183
|
-
zIndex = 100,
|
|
2184
|
-
isOpen,
|
|
2185
|
-
onConfirm,
|
|
2186
|
-
onDecline,
|
|
2187
|
-
closeModal,
|
|
2188
|
-
className,
|
|
2189
|
-
variant = "primary",
|
|
2190
|
-
size,
|
|
2191
|
-
mode,
|
|
2192
|
-
title,
|
|
2193
|
-
onlyTitle,
|
|
2194
|
-
atributesForModalBody = attrsForModalBodyDefault,
|
|
2195
|
-
confirmBtnClassName,
|
|
2196
|
-
confirmBtnLabel,
|
|
2197
|
-
confirmBtnVariant = "primary",
|
|
2198
|
-
confirmBtnDisable,
|
|
2199
|
-
confirmBtnIcon,
|
|
2200
|
-
isConfirmBtnIconPositionRight,
|
|
2201
|
-
noConfirmBtn,
|
|
2202
|
-
forced,
|
|
2203
|
-
closeBtnClassName,
|
|
2204
|
-
closeBtnText,
|
|
2205
|
-
closeBtnVariant,
|
|
2206
|
-
closeBtnDisable,
|
|
2207
|
-
closeBtnIcon,
|
|
2208
|
-
btnClassNames,
|
|
2209
|
-
isCloseBtnIconPositionRight,
|
|
2210
|
-
noCloseBtn,
|
|
2211
|
-
noHeader,
|
|
2212
|
-
noHeaderCloseBtn,
|
|
2213
|
-
customHeader,
|
|
2214
|
-
declineBtnDisable,
|
|
2215
|
-
noFooter,
|
|
2216
|
-
customFooter,
|
|
2217
|
-
withFixedFooter,
|
|
2218
|
-
leftContentOfFooter,
|
|
2219
|
-
isSubmittingByEnter: isSubmittingByEnterOuter = true,
|
|
2220
|
-
isClosingByEsc: isClosingByEscOuter = true,
|
|
2221
|
-
withEventManagement = false,
|
|
2222
|
-
submitOnEnter,
|
|
2223
|
-
closeOnEsc,
|
|
2224
|
-
withMobileLogic,
|
|
2225
|
-
children
|
|
2226
|
-
}) {
|
|
2227
|
-
const internalRef = useRef10(null);
|
|
2228
|
-
const modalRef = ref || internalRef;
|
|
2229
|
-
const onConfirmRef = useRef10(onConfirm);
|
|
2230
|
-
const closeModalRef = useRef10(closeModal);
|
|
2231
|
-
const onDeclineRef = useRef10(onDecline);
|
|
2232
|
-
const isSubmittingByEnter = submitOnEnter === false ? false : isSubmittingByEnterOuter;
|
|
2233
|
-
const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
|
|
2234
|
-
const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
|
|
2235
|
-
const isUseAutoBlockingForHandlers = withEventManagementStructure.isWithSubmitAndCloseManagement;
|
|
2236
|
-
const isOnConfirmBlocked = typeof onConfirm === "function" && isUseAutoBlockingForHandlers && confirmBtnDisable;
|
|
2237
|
-
const isCloseModalBlocked = typeof closeModal === "function" && isUseAutoBlockingForHandlers && closeBtnDisable;
|
|
2238
|
-
const isOnDeclineBlocked = typeof onDecline === "function" && isUseAutoBlockingForHandlers && declineBtnDisable;
|
|
2239
|
-
const {
|
|
2240
|
-
modalMobileHeaderRef,
|
|
2241
|
-
modalMobileBodyRef,
|
|
2242
|
-
modalMobileFooterRef,
|
|
2243
|
-
MODALS_LOGIC,
|
|
2244
|
-
renderModal,
|
|
2245
|
-
isMobile,
|
|
2246
|
-
scrollTop,
|
|
2247
|
-
scrollHeight
|
|
2248
|
-
} = useMobileModal({
|
|
2249
|
-
withMobileLogic,
|
|
2250
|
-
withFixedFooter,
|
|
2251
|
-
isOpen
|
|
2252
|
-
});
|
|
2253
|
-
const handle = useMemo4(() => ({
|
|
2254
|
-
confirm: () => onConfirmRef.current?.(),
|
|
2255
|
-
close: () => closeModalRef.current?.(),
|
|
2256
|
-
decline: () => {
|
|
2257
|
-
if (typeof onDeclineRef.current === "function") onDeclineRef.current();
|
|
2258
|
-
else closeModalRef.current?.();
|
|
2259
|
-
}
|
|
2260
|
-
}), []);
|
|
2261
|
-
const suspendProcessing = {
|
|
2262
|
-
// FIN-12482
|
|
2263
|
-
// ? Чтобы НЕ замыкать рефку на модалку в логике, чтобы потом поискать в контенте все текстэриа,
|
|
2264
|
-
// ? чтобы оценить есть ли среди них сфокусированная - делаем элеГАнтно:
|
|
2265
|
-
// ? оцениваем ev.target, и если target это текстэриа, то вот сейчас то она и сфокусирована,
|
|
2266
|
-
// ? т.е нужно приостановить процессы связанные с нажатием enter.
|
|
2267
|
-
Enter: (ev) => ev?.target?.nodeName === "TEXTAREA"
|
|
2268
|
-
// ? Колбеки опциональны, можно передавать только нужные
|
|
2269
|
-
// Escape: (ev: globalThis.KeyboardEvent) => false,
|
|
2270
|
-
};
|
|
2271
|
-
useHandleKeyPress_default({
|
|
2272
|
-
enterCallback: isSubmittingByEnter && typeof onConfirm === "function" && !confirmBtnDisable ? handle.confirm : void 0,
|
|
2273
|
-
escCallback: isClosingByEsc && typeof closeModal === "function" ? handle.close : void 0,
|
|
2274
|
-
withClamping: false,
|
|
2275
|
-
withEventManagementStructure: {
|
|
2276
|
-
isWithSubmitAndCloseManagement: confirmBtnDisable || withEventManagementStructure.isWithSubmitAndCloseManagement
|
|
2277
|
-
},
|
|
2278
|
-
suspendProcessing
|
|
2279
|
-
});
|
|
2280
|
-
useLayoutEffect3(() => {
|
|
2281
|
-
onConfirmRef.current = isOnConfirmBlocked ? void 0 : onConfirm;
|
|
2282
|
-
}, [onConfirm, isOnConfirmBlocked]);
|
|
2283
|
-
useLayoutEffect3(() => {
|
|
2284
|
-
closeModalRef.current = isCloseModalBlocked ? void 0 : closeModal;
|
|
2285
|
-
}, [closeModal, isCloseModalBlocked]);
|
|
2286
|
-
useLayoutEffect3(() => {
|
|
2287
|
-
onDeclineRef.current = isOnDeclineBlocked ? () => {
|
|
2288
|
-
} : onDecline;
|
|
2289
|
-
}, [onDecline, isOnDeclineBlocked]);
|
|
2290
|
-
useEffect15(() => {
|
|
2291
|
-
const outerTarget = getIsOnlyAnObject(withEventManagement) ? withEventManagement.listenersTarget : void 0;
|
|
2292
|
-
const target = outerTarget ?? document;
|
|
2293
|
-
const onKeyPress = getOnKeyPress({ id, onSubmit: handle.confirm, onClose: handle.close, suspendProcessing });
|
|
2294
|
-
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2295
|
-
if (isSubmittingByEnter) target.addEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
|
|
2296
|
-
if (isClosingByEsc) target.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2297
|
-
}
|
|
2298
|
-
return () => {
|
|
2299
|
-
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2300
|
-
if (isSubmittingByEnter) target.removeEventListener(EVENTS.iGotAnEnterKeyPress.name, onKeyPress);
|
|
2301
|
-
if (isClosingByEsc) target.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2302
|
-
}
|
|
2303
|
-
};
|
|
2304
|
-
}, []);
|
|
2305
|
-
if (!isOpen) return null;
|
|
2306
|
-
return /* @__PURE__ */ jsx22(
|
|
2307
|
-
"div",
|
|
2308
|
-
{
|
|
2309
|
-
id: `${id}`,
|
|
2310
|
-
style: { zIndex },
|
|
2311
|
-
"data-testid": testId,
|
|
2312
|
-
className: "modal-box j5",
|
|
2313
|
-
role: "dialog",
|
|
2314
|
-
"aria-modal": "true",
|
|
2315
|
-
"aria-labelledby": `${testId}-title`,
|
|
2316
|
-
children: renderModal(
|
|
2317
|
-
/* @__PURE__ */ jsxs18(Fragment4, { children: [
|
|
2318
|
-
/* @__PURE__ */ jsx22(
|
|
2319
|
-
"div",
|
|
2320
|
-
{
|
|
2321
|
-
"data-testid": `${testId}-overlay`,
|
|
2322
|
-
className: isOpen ? "modal-overlay" : "hidden",
|
|
2323
|
-
onClick: handle.close,
|
|
2324
|
-
role: "presentation"
|
|
2325
|
-
}
|
|
2326
|
-
),
|
|
2327
|
-
/* @__PURE__ */ jsxs18(
|
|
2328
|
-
"div",
|
|
2329
|
-
{
|
|
2330
|
-
ref: modalRef,
|
|
2331
|
-
style: { width: typeof size === "number" ? `${size}px` : `${size?.replace("px", "")}px` },
|
|
2332
|
-
className: cn19(className, {
|
|
2333
|
-
"modal": isOpen,
|
|
2334
|
-
"modal--no-header": isOpen && noHeader && !customHeader,
|
|
2335
|
-
"modal-mobile": isOpen && isMobile,
|
|
2336
|
-
"hidden": !isOpen
|
|
2337
|
-
}),
|
|
2338
|
-
children: [
|
|
2339
|
-
customHeader || !noHeader && /* @__PURE__ */ jsx22(
|
|
2340
|
-
ModalTitle_default,
|
|
2341
|
-
{
|
|
2342
|
-
wrapperRef: modalMobileHeaderRef,
|
|
2343
|
-
className: cn19({
|
|
2344
|
-
"modal__header--hidden": MODALS_LOGIC.IS_HEADER_HIDDEN,
|
|
2345
|
-
"modal__header--sticky": !MODALS_LOGIC.IS_HEADER_HIDDEN && MODALS_LOGIC.IS_HEADER_STICKY
|
|
2346
|
-
}),
|
|
2347
|
-
variant,
|
|
2348
|
-
isForced: forced,
|
|
2349
|
-
onClose: handle.close,
|
|
2350
|
-
noHeaderCloseBtn,
|
|
2351
|
-
children: /* @__PURE__ */ jsx22("span", { id: `${testId}-title`, children: renderModalTitle({ mode, title, onlyTitle }) })
|
|
2352
|
-
}
|
|
2353
|
-
),
|
|
2354
|
-
/* @__PURE__ */ jsx22(
|
|
2355
|
-
"div",
|
|
2356
|
-
{
|
|
2357
|
-
...atributesForModalBody,
|
|
2358
|
-
ref: modalMobileBodyRef,
|
|
2359
|
-
className: cn19("modal__body", {
|
|
2360
|
-
"modal__body--no-footer": noFooter
|
|
2361
|
-
}),
|
|
2362
|
-
role: "document",
|
|
2363
|
-
children
|
|
2364
|
-
}
|
|
2365
|
-
),
|
|
2366
|
-
(!noFooter || customFooter) && /* @__PURE__ */ jsx22(
|
|
2367
|
-
ModalFooter_default,
|
|
2368
|
-
{
|
|
2369
|
-
wrapperRef: modalMobileFooterRef,
|
|
2370
|
-
className: cn19({
|
|
2371
|
-
"modal__footer--hidden": MODALS_LOGIC.IS_FOOTER_HIDDEN,
|
|
2372
|
-
"modal__footer--sticky": !MODALS_LOGIC.IS_FOOTER_HIDDEN && MODALS_LOGIC.IS_FOOTER_STICKY && scrollTop !== scrollHeight,
|
|
2373
|
-
"modal__footer_with-left-content": leftContentOfFooter
|
|
2374
|
-
}),
|
|
2375
|
-
children: customFooter || /* @__PURE__ */ jsxs18(Fragment4, { children: [
|
|
2376
|
-
leftContentOfFooter,
|
|
2377
|
-
(!noCloseBtn || !noConfirmBtn) && /* @__PURE__ */ jsxs18("div", { className: "modal__buttons-block", children: [
|
|
2378
|
-
!noCloseBtn && /* @__PURE__ */ jsx22(
|
|
2379
|
-
Button_default,
|
|
2380
|
-
{
|
|
2381
|
-
testId: "modal",
|
|
2382
|
-
className: cn19(closeBtnClassName, btnClassNames),
|
|
2383
|
-
variant: closeBtnVariant || "dark-outline",
|
|
2384
|
-
onClick: handle.decline,
|
|
2385
|
-
label: closeBtnText || "Cancel",
|
|
2386
|
-
disabled: typeof onDecline === "function" ? declineBtnDisable : closeBtnDisable,
|
|
2387
|
-
icon: closeBtnIcon,
|
|
2388
|
-
isIconRight: isCloseBtnIconPositionRight,
|
|
2389
|
-
tabIndex: 1,
|
|
2390
|
-
"aria-label": "Close modal"
|
|
2391
|
-
}
|
|
2392
|
-
),
|
|
2393
|
-
!noConfirmBtn && /* @__PURE__ */ jsx22(
|
|
2394
|
-
Button_default,
|
|
2395
|
-
{
|
|
2396
|
-
testId: "modal",
|
|
2397
|
-
onClick: handle.confirm,
|
|
2398
|
-
label: confirmBtnLabel || mode && mode?.[0].toUpperCase() + mode?.slice(1) || "Apply",
|
|
2399
|
-
className: cn19("ml5", confirmBtnClassName, btnClassNames),
|
|
2400
|
-
variant: confirmBtnVariant,
|
|
2401
|
-
disabled: confirmBtnDisable,
|
|
2402
|
-
icon: confirmBtnIcon,
|
|
2403
|
-
isIconRight: isConfirmBtnIconPositionRight,
|
|
2404
|
-
"aria-label": "Confirm modal"
|
|
2405
|
-
}
|
|
2406
|
-
)
|
|
2407
|
-
] })
|
|
2408
|
-
] })
|
|
2409
|
-
}
|
|
2410
|
-
)
|
|
2411
|
-
]
|
|
2412
|
-
}
|
|
2413
|
-
)
|
|
2414
|
-
] })
|
|
2415
|
-
)
|
|
2416
|
-
}
|
|
2417
|
-
);
|
|
2418
|
-
}
|
|
2419
|
-
Modal.displayName = "Modal";
|
|
2420
|
-
var Modal_default = Modal;
|
|
2421
|
-
|
|
2422
|
-
// src/Atomic/UI/Modal/ModalHOC.tsx
|
|
2423
|
-
import cn20 from "classnames";
|
|
2424
|
-
import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect4, useMemo as useMemo5, useRef as useRef11 } from "react";
|
|
2425
|
-
import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2426
|
-
var ModalHOC = ({
|
|
2427
|
-
id,
|
|
2428
|
-
zIndex = 100,
|
|
2429
|
-
isOpen,
|
|
2430
|
-
closeModal,
|
|
2431
|
-
closeBtnDisable,
|
|
2432
|
-
children,
|
|
2433
|
-
className,
|
|
2434
|
-
size,
|
|
2435
|
-
testId = "modal",
|
|
2436
|
-
withEventManagement = false,
|
|
2437
|
-
// ! Полностью проигнорируется если в модалку НЕ прокинут id
|
|
2438
|
-
// ? isClosingByEsc является явным разрешением/запретом на работу ф-ла,
|
|
2439
|
-
// ? в то время как withEventManagement лишь настройка способа реализации этого ф-ла
|
|
2440
|
-
isClosingByEsc: isClosingByEscOuter = true,
|
|
2441
|
-
closeOnEsc
|
|
2442
|
-
}) => {
|
|
2443
|
-
const modalRef = useRef11(null);
|
|
2444
|
-
const closeModalRef = useRef11(closeModal);
|
|
2445
|
-
const isClosingByEsc = closeOnEsc === false ? false : isClosingByEscOuter;
|
|
2446
|
-
const withEventManagementStructure = getWithEventManagementStructure(id, withEventManagement);
|
|
2447
|
-
const handleClose = useMemo5(() => () => closeModalRef.current?.(), []);
|
|
2448
|
-
useHandleKeyPress_default({
|
|
2449
|
-
escCallback: isClosingByEsc && typeof closeModal === "function" ? handleClose : void 0,
|
|
2450
|
-
withEventManagementStructure
|
|
2451
|
-
});
|
|
2452
|
-
useLayoutEffect4(() => {
|
|
2453
|
-
closeModalRef.current = closeBtnDisable ? void 0 : closeModal;
|
|
2454
|
-
}, [closeModal, closeBtnDisable]);
|
|
2455
|
-
useEffect16(() => {
|
|
2456
|
-
const onKeyPress = getOnKeyPress({ id, onClose: handleClose });
|
|
2457
|
-
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2458
|
-
if (isClosingByEsc) document.addEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2459
|
-
}
|
|
2460
|
-
return () => {
|
|
2461
|
-
if (withEventManagementStructure.isWithSubmitAndCloseManagement && !!onKeyPress) {
|
|
2462
|
-
if (isClosingByEsc) document.removeEventListener(EVENTS.iGotAnEscKeyPress.name, onKeyPress);
|
|
2463
|
-
}
|
|
2464
|
-
};
|
|
2465
|
-
}, []);
|
|
2466
|
-
if (!isOpen) return null;
|
|
2467
|
-
return /* @__PURE__ */ jsxs19("div", { id: `${id}`, style: { zIndex }, "data-testid": testId, className: "modal-box j5", role: "presentation", children: [
|
|
2468
|
-
/* @__PURE__ */ jsx23("div", { className: "modal-overlay", onClick: handleClose, role: "presentation", "aria-hidden": "true" }),
|
|
2469
|
-
/* @__PURE__ */ jsx23(
|
|
2470
|
-
"div",
|
|
2471
|
-
{
|
|
2472
|
-
ref: modalRef,
|
|
2473
|
-
style: { width: size },
|
|
2474
|
-
className: cn20(className, "modal"),
|
|
2475
|
-
role: "dialog",
|
|
2476
|
-
"aria-modal": "true",
|
|
2477
|
-
"aria-labelledby": testId,
|
|
2478
|
-
tabIndex: -1,
|
|
2479
|
-
children
|
|
2480
|
-
}
|
|
2481
|
-
)
|
|
2482
|
-
] });
|
|
2483
|
-
};
|
|
2484
|
-
var ModalHOC_default = ModalHOC;
|
|
2485
|
-
|
|
2486
|
-
// src/Atomic/UI/Modal/index.ts
|
|
2487
|
-
var Modal_default2 = Modal_default;
|
|
2488
|
-
|
|
2489
|
-
// src/Atomic/UI/MonoAccordion/index.ts
|
|
2490
|
-
var MonoAccordion_default2 = MonoAccordion_default;
|
|
2491
|
-
|
|
2492
|
-
// src/Atomic/UI/PageTitle/PageTitle.tsx
|
|
2493
|
-
import cn21 from "classnames";
|
|
2494
|
-
import { Home } from "react-feather";
|
|
2495
|
-
import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2496
|
-
var RC5 = "page-title";
|
|
2497
|
-
var PageTitle = ({ title, pages, children, testId = RC5 }) => /* @__PURE__ */ jsxs20("div", { "data-testid": testId, className: RC5, role: "region", "aria-label": title, children: [
|
|
2498
|
-
/* @__PURE__ */ jsxs20("div", { className: `${RC5}__wrap`, children: [
|
|
2499
|
-
/* @__PURE__ */ jsx24("h1", { className: `${RC5}__title`, children: title }),
|
|
2500
|
-
pages.length > 0 && /* @__PURE__ */ jsx24("nav", { className: `${RC5}__pages`, "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs20("ol", { className: `${RC5}__list`, children: [
|
|
2501
|
-
/* @__PURE__ */ jsx24("li", { children: /* @__PURE__ */ jsx24("a", { className: `${RC5}__link`, href: "/", "aria-label": "Home page", children: /* @__PURE__ */ jsx24(Home, { "aria-hidden": "true" }) }) }),
|
|
2502
|
-
pages.map(({ name, path }, index) => /* @__PURE__ */ jsxs20("li", { children: [
|
|
2503
|
-
/* @__PURE__ */ jsx24("span", { className: `${RC5}__delimiter`, "aria-hidden": "true", children: "/" }),
|
|
2504
|
-
pages.length - 1 === index ? /* @__PURE__ */ jsx24("span", { className: cn21(`${RC5}__link`, `${RC5}__link_last`), "aria-current": "page", children: name }) : /* @__PURE__ */ jsx24("a", { className: `${RC5}__link`, href: path, children: name })
|
|
2505
|
-
] }, path))
|
|
2506
|
-
] }) })
|
|
2507
|
-
] }),
|
|
2508
|
-
children
|
|
2509
|
-
] });
|
|
2510
|
-
var PageTitle_default = PageTitle;
|
|
2511
|
-
|
|
2512
|
-
// src/Atomic/UI/PageTitle/index.ts
|
|
2513
|
-
var PageTitle_default2 = PageTitle_default;
|
|
2514
|
-
|
|
2515
|
-
// src/Atomic/UI/Price/Price.tsx
|
|
2516
|
-
import cn22 from "classnames";
|
|
2517
|
-
|
|
2518
|
-
// src/Functions/fieldValueFormatters.js
|
|
2519
|
-
var getSafelyValue = (value) => value !== void 0 && value !== null ? value?.toString?.() || "" : "";
|
|
2520
|
-
var intlNumbersFormatter = (inputValue, settings = {}) => {
|
|
2521
|
-
const safelyInputValue = getSafelyValue(inputValue);
|
|
2522
|
-
const previousValue = safelyInputValue.slice(0, -1);
|
|
2523
|
-
const lastSym = safelyInputValue.slice(-1);
|
|
2524
|
-
const value = lastSym === "." ? previousValue : safelyInputValue;
|
|
2525
|
-
if (Number.isNaN(Number(value)) || !getSafelyValue(value)) return "";
|
|
2526
|
-
const {
|
|
2527
|
-
// локаль, даже региональная, влияет на отображение знаков и формата.
|
|
2528
|
-
locale = "en-US",
|
|
2529
|
-
// percent || currency(default case) || decimal(просто число) влияет на ТИП обработки.
|
|
2530
|
-
withSymbol,
|
|
2531
|
-
//группировка запятыми поразрядно.
|
|
2532
|
-
useGrouping = true,
|
|
2533
|
-
//!!работает только при withSymbol: 'currency' !! влияет на то, как именно будет выглядет формат валюты.
|
|
2534
|
-
currency = {},
|
|
2535
|
-
//сколько знаков после точки, и всегда ли они будут.
|
|
2536
|
-
// !!если поставить isAlwaysRender: true, но не дать центов, то будет 100.00
|
|
2537
|
-
fractionDigits = {}
|
|
2538
|
-
} = settings;
|
|
2539
|
-
const { currencyType = "USD", currencyDisplay: inputCurrencyDisplay } = currency;
|
|
2540
|
-
let currencyDisplay;
|
|
2541
|
-
switch (inputCurrencyDisplay) {
|
|
2542
|
-
case "name":
|
|
2543
|
-
currencyDisplay = "name";
|
|
2544
|
-
break;
|
|
2545
|
-
case "code":
|
|
2546
|
-
currencyDisplay = "code";
|
|
2547
|
-
break;
|
|
2548
|
-
case "narrowSymbol":
|
|
2549
|
-
currencyDisplay = "narrowSymbol";
|
|
2550
|
-
break;
|
|
2551
|
-
default:
|
|
2552
|
-
currencyDisplay = "symbol";
|
|
2553
|
-
}
|
|
2554
|
-
let numberStyle;
|
|
2555
|
-
switch (withSymbol) {
|
|
2556
|
-
case "percent":
|
|
2557
|
-
numberStyle = "percent";
|
|
2558
|
-
break;
|
|
2559
|
-
case "currency":
|
|
2560
|
-
numberStyle = "currency";
|
|
2561
|
-
break;
|
|
2562
|
-
default:
|
|
2563
|
-
numberStyle = "decimal";
|
|
2564
|
-
break;
|
|
2565
|
-
}
|
|
2566
|
-
const {
|
|
2567
|
-
quantity,
|
|
2568
|
-
isRenderAlways = false,
|
|
2569
|
-
minimumFractionDigits: inputMinimumFractionDigits,
|
|
2570
|
-
maximumFractionDigits: inputMaximumFractionDigits,
|
|
2571
|
-
conditionallyMinimumFractionDigits
|
|
2572
|
-
} = fractionDigits;
|
|
2573
|
-
const dotIndex = safelyInputValue?.indexOf(".");
|
|
2574
|
-
const afterDot = dotIndex !== -1 ? safelyInputValue.slice(dotIndex + 1) : "";
|
|
2575
|
-
const minimumFractionDigits = (() => {
|
|
2576
|
-
if (typeof inputMinimumFractionDigits === "number")
|
|
2577
|
-
return inputMinimumFractionDigits;
|
|
2578
|
-
if (typeof conditionallyMinimumFractionDigits === "number") {
|
|
2579
|
-
return afterDot && lastSym !== "." ? conditionallyMinimumFractionDigits : 0;
|
|
2580
|
-
}
|
|
2581
|
-
return afterDot && lastSym !== "." ? safelyInputValue.slice(dotIndex).length - 1 : isRenderAlways ? quantity : 0;
|
|
2582
|
-
})();
|
|
2583
|
-
const priceSettings = {
|
|
2584
|
-
useGrouping,
|
|
2585
|
-
//группировка разрядов
|
|
2586
|
-
style: numberStyle,
|
|
2587
|
-
//тип форматирования (валюта или число). decimal - без знака валюты
|
|
2588
|
-
currency: currencyType,
|
|
2589
|
-
//валюта
|
|
2590
|
-
currencyDisplay,
|
|
2591
|
-
//валюта в виде символа
|
|
2592
|
-
//минимально не надо отображать центы, если их нет, иначе всегда будет .00
|
|
2593
|
-
minimumFractionDigits,
|
|
2594
|
-
//! Важно! Если придет велью с количеством дробных разрядов БОЛЬШИМ
|
|
2595
|
-
//! чем указано в (inputMaximumFractionDigits ?? quantity) - округлит по правилам округления
|
|
2596
|
-
//максимально отображать 2 цифры после запятой, если центы всё же есть
|
|
2597
|
-
maximumFractionDigits: inputMaximumFractionDigits ?? quantity
|
|
2598
|
-
};
|
|
2599
|
-
let output;
|
|
2600
|
-
try {
|
|
2601
|
-
output = new Intl.NumberFormat(locale, priceSettings).format(value);
|
|
2602
|
-
} catch (e) {
|
|
2603
|
-
output = value;
|
|
2604
|
-
console.warn("Intl.NumberFormat error", e);
|
|
2605
|
-
}
|
|
2606
|
-
return lastSym === "." ? output + lastSym : output;
|
|
2607
|
-
};
|
|
2608
|
-
var formatToPriceWithUSD = (value) => {
|
|
2609
|
-
if (isNaN(Number(value))) return value;
|
|
2610
|
-
return intlNumbersFormatter(getSafelyValue(value), {
|
|
2611
|
-
withSymbol: "currency",
|
|
2612
|
-
currency: { currencyType: "USD" },
|
|
2613
|
-
fractionDigits: { quantity: 2, conditionallyMinimumFractionDigits: 2 }
|
|
2614
|
-
});
|
|
2615
|
-
};
|
|
2616
|
-
var formatToPriceWithCurrency = (value, currencyCode, symbolPosition = "before") => {
|
|
2617
|
-
if (isNaN(Number(value))) return value;
|
|
2618
|
-
return intlNumbersFormatter(getSafelyValue(value), {
|
|
2619
|
-
withSymbol: "currency",
|
|
2620
|
-
currency: { currencyType: currencyCode },
|
|
2621
|
-
fractionDigits: { quantity: 2, conditionallyMinimumFractionDigits: 2 }
|
|
2622
|
-
});
|
|
2623
|
-
};
|
|
2624
|
-
|
|
2625
|
-
// src/Atomic/UI/Price/Price.tsx
|
|
2626
|
-
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
2627
|
-
var CN3 = "price";
|
|
2628
|
-
var Price = ({ value, currencyCode, isSymbolAfter, className, testId = CN3 }) => {
|
|
2629
|
-
if (value === void 0 || value === null) return null;
|
|
2630
|
-
return /* @__PURE__ */ jsx25(
|
|
2631
|
-
"div",
|
|
2632
|
-
{
|
|
2633
|
-
"data-testid": testId,
|
|
2634
|
-
className: cn22(CN3, className),
|
|
2635
|
-
role: "contentinfo",
|
|
2636
|
-
"aria-label": `Price: ${formatToPriceWithCurrency(value, currencyCode, isSymbolAfter ? "after" : "before")}`,
|
|
2637
|
-
children: formatToPriceWithCurrency(value, currencyCode, isSymbolAfter ? "after" : "before")
|
|
2638
|
-
}
|
|
2639
|
-
);
|
|
2640
|
-
};
|
|
2641
|
-
var Price_default = Price;
|
|
2642
|
-
|
|
2643
|
-
// src/Atomic/UI/Price/index.ts
|
|
2644
|
-
var Price_default2 = Price_default;
|
|
2645
|
-
|
|
2646
|
-
// src/Atomic/UI/PriceRange/PriceRange.tsx
|
|
2647
|
-
import cn23 from "classnames";
|
|
2648
|
-
import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2649
|
-
var CN4 = "price-range";
|
|
2650
|
-
var PriceRange = ({ from, to, mode, testId = CN4 }) => {
|
|
2651
|
-
return /* @__PURE__ */ jsx26("div", { "data-testid": testId, className: cn23(CN4, "j4"), role: "region", "aria-label": "Price range", children: mode === "simple" ? /* @__PURE__ */ jsxs21("span", { "aria-live": "polite", children: [
|
|
2652
|
-
from,
|
|
2653
|
-
" - ",
|
|
2654
|
-
to
|
|
2655
|
-
] }) : /* @__PURE__ */ jsxs21("span", { "aria-live": "polite", children: [
|
|
2656
|
-
formatToPriceWithUSD(from?.toString()),
|
|
2657
|
-
" - ",
|
|
2658
|
-
formatToPriceWithUSD(to?.toString())
|
|
2659
|
-
] }) });
|
|
2660
|
-
};
|
|
2661
|
-
var PriceRange_default = PriceRange;
|
|
2662
|
-
|
|
2663
|
-
// src/Atomic/UI/PriceRange/index.ts
|
|
2664
|
-
var PriceRange_default2 = PriceRange_default;
|
|
2665
|
-
|
|
2666
|
-
// src/Atomic/UI/ProgressLine/ProgressLine.tsx
|
|
2667
|
-
import cn24 from "classnames";
|
|
2668
|
-
import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2669
|
-
var CN5 = "progress-line";
|
|
2670
|
-
var ProgressLine = ({
|
|
2671
|
-
label = "",
|
|
2672
|
-
labelAlign = "left",
|
|
2673
|
-
renderValue = false,
|
|
2674
|
-
renderValueInPercents = false,
|
|
2675
|
-
valueMeasurement = "",
|
|
2676
|
-
valueHorizontalPosition = "right",
|
|
2677
|
-
valueVerticalPosition = "center",
|
|
2678
|
-
symbolsAfterComma = 0,
|
|
2679
|
-
minValue = 0,
|
|
2680
|
-
maxValue = 100,
|
|
2681
|
-
value = 0,
|
|
2682
|
-
showExtremums = false,
|
|
2683
|
-
extremumsPosition = "top",
|
|
2684
|
-
variant = "info",
|
|
2685
|
-
useVariantLabelColor = true,
|
|
2686
|
-
isShowLine = true,
|
|
2687
|
-
className,
|
|
2688
|
-
testId = CN5
|
|
2689
|
-
}) => {
|
|
2690
|
-
const getFilledLineWidth = () => {
|
|
2691
|
-
if (value > maxValue) value = maxValue;
|
|
2692
|
-
return `${((value - minValue) * 100 / (maxValue - minValue)).toFixed(symbolsAfterComma)}%`;
|
|
2693
|
-
};
|
|
2694
|
-
const renderLabel = () => {
|
|
2695
|
-
if (!label) return null;
|
|
2696
|
-
return /* @__PURE__ */ jsx27("div", { className: `progress-line__wrapper__label align-${labelAlign}`, children: label });
|
|
2697
|
-
};
|
|
2698
|
-
const renderProgressValue = () => {
|
|
2699
|
-
if (!renderValue) return null;
|
|
2700
|
-
return /* @__PURE__ */ jsx27("div", { className: "progress-line__wrapper__value", "aria-live": "polite", children: renderValueInPercents ? getFilledLineWidth() : `${addBitDepthPoints(String(value))} ${valueMeasurement}` });
|
|
2701
|
-
};
|
|
2702
|
-
const renderExtremums = () => {
|
|
2703
|
-
if (!showExtremums) return null;
|
|
2704
|
-
return /* @__PURE__ */ jsxs22("div", { "aria-hidden": "true", className: `progress-line__wrapper__extremums position-${extremumsPosition}`, children: [
|
|
2705
|
-
/* @__PURE__ */ jsx27("div", { className: "progress-line__wrapper__extremums--min", children: renderValueInPercents ? "0 %" : `${minValue} ${valueMeasurement}` }),
|
|
2706
|
-
/* @__PURE__ */ jsx27("div", { className: "progress-line__wrapper__extremums--max", children: renderValueInPercents ? "100 %" : `${maxValue} ${valueMeasurement}` })
|
|
2707
|
-
] });
|
|
2708
|
-
};
|
|
2709
|
-
const renderFilledLine = () => {
|
|
2710
|
-
return /* @__PURE__ */ jsx27(
|
|
2711
|
-
"div",
|
|
2712
|
-
{
|
|
2713
|
-
className: "progress-line__wrapper__line--filled",
|
|
2714
|
-
role: "progressbar",
|
|
2715
|
-
"aria-label": `Progress: ${value} out of ${maxValue}`,
|
|
2716
|
-
"aria-valuenow": value,
|
|
2717
|
-
"aria-valuemin": minValue,
|
|
2718
|
-
"aria-valuemax": maxValue,
|
|
2719
|
-
style: { width: getFilledLineWidth() }
|
|
2720
|
-
}
|
|
2721
|
-
);
|
|
2722
|
-
};
|
|
2723
|
-
const renderLine = () => {
|
|
2724
|
-
return /* @__PURE__ */ jsxs22("div", { className: "progress-line__wrapper__line", children: [
|
|
2725
|
-
renderExtremums(),
|
|
2726
|
-
renderFilledLine()
|
|
2727
|
-
] });
|
|
2728
|
-
};
|
|
2729
|
-
return /* @__PURE__ */ jsxs22("div", { className: cn24(CN5, className), "data-testid": testId, role: "region", "aria-label": "Progress line", children: [
|
|
2730
|
-
renderLabel(),
|
|
2731
|
-
/* @__PURE__ */ jsxs22(
|
|
2732
|
-
"div",
|
|
2733
|
-
{
|
|
2734
|
-
className: `progress-line__wrapper variant-${useVariantLabelColor && variant} value-${valueVerticalPosition}-${valueHorizontalPosition} ${className}`,
|
|
2735
|
-
children: [
|
|
2736
|
-
renderProgressValue(),
|
|
2737
|
-
isShowLine && renderLine()
|
|
2738
|
-
]
|
|
2739
|
-
}
|
|
2740
|
-
)
|
|
2741
|
-
] });
|
|
2742
|
-
};
|
|
2743
|
-
var ProgressLine_default = ProgressLine;
|
|
2744
|
-
|
|
2745
|
-
// src/Atomic/UI/ProgressLine/index.ts
|
|
2746
|
-
var ProgressLine_default2 = ProgressLine_default;
|
|
2747
|
-
|
|
2748
|
-
// src/Atomic/UI/Status/Status.tsx
|
|
2749
|
-
import cn25 from "classnames";
|
|
2750
|
-
import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2751
|
-
function defaultOnClick2() {
|
|
2752
|
-
}
|
|
2753
|
-
var Status = ({
|
|
2754
|
-
icon,
|
|
2755
|
-
value,
|
|
2756
|
-
label,
|
|
2757
|
-
status,
|
|
2758
|
-
disabled,
|
|
2759
|
-
type,
|
|
2760
|
-
active = 0,
|
|
2761
|
-
pause = 0,
|
|
2762
|
-
className,
|
|
2763
|
-
noBackground,
|
|
2764
|
-
children,
|
|
2765
|
-
testId = "status",
|
|
2766
|
-
onClick = defaultOnClick2
|
|
2767
|
-
}) => {
|
|
2768
|
-
if (!status) return null;
|
|
2769
|
-
const text = children && typeof children === "string" ? children : value || label || status;
|
|
2770
|
-
const formattedLabel = text?.[0].toUpperCase() + text?.slice(1);
|
|
2771
|
-
return /* @__PURE__ */ jsx28("div", { onClick, "data-testid": testId, className: cn25({ disabled }, className), children: type === "number" ? /* @__PURE__ */ jsx28("div", { children: active === 0 && pause === 0 ? /* @__PURE__ */ jsx28("div", { className: "status status--error", children: /* @__PURE__ */ jsx28("span", { children: active }) }) : /* @__PURE__ */ jsxs23("div", { className: "status status--warning", children: [
|
|
2772
|
-
/* @__PURE__ */ jsx28("span", { className: "status--number-active", children: active }),
|
|
2773
|
-
/* @__PURE__ */ jsx28("span", { className: "color--gray-gull", children: " / " }),
|
|
2774
|
-
/* @__PURE__ */ jsx28("span", { className: pause > 0 ? "color--froly" : "color--gray-gull", children: pause })
|
|
2775
|
-
] }) }) : /* @__PURE__ */ jsxs23(
|
|
2776
|
-
"div",
|
|
2777
|
-
{
|
|
2778
|
-
className: cn25(
|
|
2779
|
-
"status",
|
|
2780
|
-
`status--${status}`,
|
|
2781
|
-
{
|
|
2782
|
-
"status--no-bg": noBackground && status === "pause",
|
|
2783
|
-
"color--gray-gull": noBackground && status === "pause" && !className,
|
|
2784
|
-
"j4": !!icon
|
|
2785
|
-
},
|
|
2786
|
-
className
|
|
2787
|
-
),
|
|
2788
|
-
children: [
|
|
2789
|
-
icon,
|
|
2790
|
-
formattedLabel
|
|
2791
|
-
]
|
|
2792
|
-
}
|
|
2793
|
-
) });
|
|
2794
|
-
};
|
|
2795
|
-
var Status_default = Status;
|
|
2796
|
-
|
|
2797
|
-
// src/Atomic/UI/Status/index.ts
|
|
2798
|
-
var Status_default2 = Status_default;
|
|
2799
|
-
|
|
2800
|
-
// src/Atomic/UI/Table/Table.js
|
|
2801
|
-
import React22 from "react";
|
|
2802
|
-
import cn32 from "classnames";
|
|
2803
|
-
|
|
2804
|
-
// src/Atomic/UI/Table/Partials/TdHeader.js
|
|
2805
|
-
import React16 from "react";
|
|
2806
|
-
import cn26 from "classnames";
|
|
2807
|
-
|
|
2808
|
-
// src/Langs.js
|
|
2809
|
-
var Langs = {
|
|
2810
|
-
en: {
|
|
2811
|
-
auth: {},
|
|
2812
|
-
settings: {},
|
|
2813
|
-
labels: {
|
|
2814
|
-
industries: "Industries",
|
|
2815
|
-
includedLenders: "Included Lenders",
|
|
2816
|
-
admin: "Administrator",
|
|
2817
|
-
user: "User",
|
|
2818
|
-
help: "Help",
|
|
2819
|
-
description: "Description",
|
|
2820
|
-
value: "Value",
|
|
2821
|
-
paramName: "Parameter name(key)",
|
|
2822
|
-
active: "Active",
|
|
2823
|
-
pause: "Pause",
|
|
2824
|
-
error: "Error",
|
|
2825
|
-
sold: "Sold",
|
|
2826
|
-
processing: "Processing",
|
|
2827
|
-
home: "Home",
|
|
2828
|
-
goods: "Goods",
|
|
2829
|
-
improvement: "Improvement",
|
|
2830
|
-
jewelry: "Jewelry",
|
|
2831
|
-
firstName: "First Name",
|
|
2832
|
-
lastName: "Last Name",
|
|
2833
|
-
dateOfBirth: "Date of Birth",
|
|
2834
|
-
militaryStatus: "Military status",
|
|
2835
|
-
ssn: "SSN",
|
|
2836
|
-
lengthAtAddress: "Length At Address",
|
|
2837
|
-
rentOrOwn: "Rent or Own",
|
|
2838
|
-
zip: "ZIP",
|
|
2839
|
-
city: "City",
|
|
2840
|
-
state: "State",
|
|
2841
|
-
address: "Address",
|
|
2842
|
-
email: "E-mail",
|
|
2843
|
-
homePhone: "Home Phone",
|
|
2844
|
-
cellPhone: "Cell Phone",
|
|
2845
|
-
contactTime: "Contact Time",
|
|
2846
|
-
dlState: "DL state",
|
|
2847
|
-
dlNumber: "DL number",
|
|
2848
|
-
ownCar: "Do you own a car?",
|
|
2849
|
-
tcpaOptin: "TCPA OPTIN",
|
|
2850
|
-
incomeSource: "Income Source",
|
|
2851
|
-
timeEmployed: "Time Employed",
|
|
2852
|
-
jobTitle: "Job Title",
|
|
2853
|
-
currentEmployer: "Current Employer",
|
|
2854
|
-
employersPhone: "Employer's Phone",
|
|
2855
|
-
netMonthlyIncome: "Net monthly income",
|
|
2856
|
-
howOftenIsPaid: "How often is paid",
|
|
2857
|
-
nextPayDate: "Next Pay Date",
|
|
2858
|
-
secondPayDate: "Second Pay Date",
|
|
2859
|
-
loanAmount: "Loan amount",
|
|
2860
|
-
ip: "IP",
|
|
2861
|
-
storyName: "Story name",
|
|
2862
|
-
channelName: "Channel name",
|
|
2863
|
-
employmentInfo: "Employment Information",
|
|
2864
|
-
personalDetails: "Personal Details",
|
|
2865
|
-
offer: "Offer",
|
|
2866
|
-
offers: "Offers",
|
|
2867
|
-
status: "Status",
|
|
2868
|
-
name: "Name",
|
|
2869
|
-
from: "From",
|
|
2870
|
-
to: "to",
|
|
2871
|
-
periodMonths: "Period (months)",
|
|
2872
|
-
loansSent: "Loans Sent",
|
|
2873
|
-
approved: "Approved",
|
|
2874
|
-
rejected: "Rejected",
|
|
2875
|
-
loanAmountApproved: "Loan Amount Approved ($)",
|
|
2876
|
-
loanAmountRejected: "Loan Amount Rejected ($)",
|
|
2877
|
-
approveRate: "Approve Rate (%)",
|
|
2878
|
-
actions: "Actions",
|
|
2879
|
-
locations: "Locations",
|
|
2880
|
-
score: "Score",
|
|
2881
|
-
priority: "Priority",
|
|
2882
|
-
lender: "Lender",
|
|
2883
|
-
weight: "Weight",
|
|
2884
|
-
selectLender: "Select lender"
|
|
2885
|
-
},
|
|
2886
|
-
singulars: {},
|
|
2887
|
-
titles: {
|
|
2888
|
-
pingTree: "Ping tree",
|
|
2889
|
-
edit: "Edit",
|
|
2890
|
-
create: "Create",
|
|
2891
|
-
add: "Add",
|
|
2892
|
-
consumerInfo: "Consumer info",
|
|
2893
|
-
personalDetails: "Personal Details",
|
|
2894
|
-
employmentInfo: "Employment Information",
|
|
2895
|
-
tools: "Tools",
|
|
2896
|
-
lenders: "Lenders",
|
|
2897
|
-
settings: "Settings",
|
|
2898
|
-
dashboard: "Dashboard",
|
|
2899
|
-
consumers: "Consumers",
|
|
2900
|
-
ticketDesk: "Ticket desk",
|
|
2901
|
-
accounting: "Accounting",
|
|
2902
|
-
users: "Users",
|
|
2903
|
-
merchants: "Merchants",
|
|
2904
|
-
lenderPingTree: "Lender Ping Tree",
|
|
2905
|
-
reports: "Reports",
|
|
2906
|
-
leads: "Leads",
|
|
2907
|
-
location: "Location",
|
|
2908
|
-
mainMenu: "Main menu",
|
|
2909
|
-
partners: "Partners",
|
|
2910
|
-
other: "Other",
|
|
2911
|
-
homeGoodsAndInteriorDesign: "Home Goods and Interior Design"
|
|
2912
|
-
},
|
|
2913
|
-
placeholders: {
|
|
2914
|
-
typeName: "Type name",
|
|
2915
|
-
params: "Params placeholder",
|
|
2916
|
-
value: "Value placeholder",
|
|
2917
|
-
description: "Description placeholder"
|
|
2918
|
-
},
|
|
2919
|
-
hints: {
|
|
2920
|
-
landerNotIncluded: "Lender is not included in Ping Tree by the \u201CHome Goods\u201D industry",
|
|
2921
|
-
noMerchants: "No Merchants for the \u201CHome Goods\u201D industry"
|
|
2922
|
-
},
|
|
2923
|
-
buttons: {
|
|
2924
|
-
create: "Create",
|
|
2925
|
-
edit: "Edit",
|
|
2926
|
-
add: "Add",
|
|
2927
|
-
close: "Close",
|
|
2928
|
-
apply: "Apply",
|
|
2929
|
-
pingTree: "Ping tree",
|
|
2930
|
-
addRow: "Add row",
|
|
2931
|
-
consumerInfo: "Consumer Info",
|
|
2932
|
-
deletePingTree: "Delete Ping Tree",
|
|
2933
|
-
cancel: "Cancel"
|
|
2934
|
-
},
|
|
2935
|
-
radioButtons: {},
|
|
2936
|
-
weekDays: {
|
|
2937
|
-
su: "Su",
|
|
2938
|
-
mo: "Mo",
|
|
2939
|
-
tu: "Tu",
|
|
2940
|
-
we: "We",
|
|
2941
|
-
th: "Th",
|
|
2942
|
-
fr: "Fr",
|
|
2943
|
-
sa: "Sa"
|
|
2944
|
-
},
|
|
2945
|
-
alerts: {
|
|
2946
|
-
lendersWillBeRemoved: "lenders will be removed"
|
|
2947
|
-
},
|
|
2948
|
-
checkboxes: {
|
|
2949
|
-
homeGoods: "Home Goods",
|
|
2950
|
-
travel: "Travel",
|
|
2951
|
-
energyImprovement: "Energy Improvement",
|
|
2952
|
-
jewelryIncluded: "Jewelry (included in PingTree name 2)",
|
|
2953
|
-
jewelry: "Jewelry",
|
|
2954
|
-
autoRepair: "Auto Repair",
|
|
2955
|
-
cosmetics: "Cosmetics",
|
|
2956
|
-
health: "Health"
|
|
2957
|
-
},
|
|
2958
|
-
errors: {},
|
|
2959
|
-
texts: {},
|
|
2960
|
-
tabs: {
|
|
2961
|
-
general: "General",
|
|
2962
|
-
payments: "Payments",
|
|
2963
|
-
filters: "Filters",
|
|
2964
|
-
offers: "Offers",
|
|
2965
|
-
merchants: "Merchants",
|
|
2966
|
-
integration: "Integration",
|
|
2967
|
-
customDetails: "Custom details",
|
|
2968
|
-
customerDetails: "Customer details",
|
|
2969
|
-
postsLog: "Posts log"
|
|
2970
|
-
},
|
|
2971
|
-
toasts: {}
|
|
2972
|
-
}
|
|
2973
|
-
};
|
|
2974
|
-
var Langs_default = Langs;
|
|
2975
|
-
|
|
2976
|
-
// src/Atomic/UI/Table/Partials/TdHeader.js
|
|
2977
|
-
import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2978
|
-
var TdHeader = ({ item, testId = "td-header" }) => {
|
|
2979
|
-
const txt = Langs_default[global.lng];
|
|
2980
|
-
switch (item.type) {
|
|
2981
|
-
case "double":
|
|
2982
|
-
return /* @__PURE__ */ jsx29("th", { "data-testid": testId, children: /* @__PURE__ */ jsxs24("div", { className: "j46", children: [
|
|
2983
|
-
/* @__PURE__ */ jsx29("div", { className: "", children: txt.labels[item.left] || item.left }),
|
|
2984
|
-
/* @__PURE__ */ jsx29("div", { className: "", children: txt.labels[item.right] || item.right })
|
|
2985
|
-
] }) });
|
|
2986
|
-
default:
|
|
2987
|
-
return /* @__PURE__ */ jsx29("th", { "data-testid": testId, className: cn26(item.className), children: /* @__PURE__ */ jsxs24("div", { className: cn26({ df: item.button }), children: [
|
|
2988
|
-
/* @__PURE__ */ jsx29("div", { className: "mr5", children: txt.labels[item.label] || item.label }),
|
|
2989
|
-
item.button && /* @__PURE__ */ jsx29("div", { className: "cards-table__btn", children: txt.buttons[item.button] || item.button })
|
|
2990
|
-
] }) });
|
|
2991
|
-
}
|
|
2992
|
-
};
|
|
2993
|
-
var TdHeader_default = TdHeader;
|
|
2994
|
-
|
|
2995
|
-
// src/Atomic/UI/Table/Partials/TdRow.js
|
|
2996
|
-
import React21, { useState as useState21 } from "react";
|
|
2997
|
-
import cn31 from "classnames";
|
|
2998
|
-
|
|
2999
|
-
// src/Atomic/UI/Table/TdTypes/TdRange.js
|
|
3000
|
-
import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
3001
|
-
var TdRange = ({ item }) => {
|
|
3002
|
-
if (!item) return false;
|
|
3003
|
-
return /* @__PURE__ */ jsxs25("div", { children: [
|
|
3004
|
-
/* @__PURE__ */ jsx30("span", { children: item.from }),
|
|
3005
|
-
/* @__PURE__ */ jsx30("span", { children: " - " }),
|
|
3006
|
-
/* @__PURE__ */ jsx30("span", { children: item.to })
|
|
3007
|
-
] });
|
|
3008
|
-
};
|
|
3009
|
-
var TdRange_default = TdRange;
|
|
3010
|
-
|
|
3011
|
-
// src/Atomic/UI/Table/Partials/TdCell.js
|
|
3012
|
-
import React20, { useState as useState20 } from "react";
|
|
3013
|
-
|
|
3014
|
-
// src/Atomic/UI/Accordion/AccordionItem.tsx
|
|
3015
|
-
import cn27 from "classnames";
|
|
3016
|
-
import { useEffect as useEffect17, useRef as useRef12, useState as useState17 } from "react";
|
|
3017
|
-
import * as Icons from "react-feather";
|
|
3018
|
-
import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
3019
|
-
var DefaultLink = ({ to, className, children }) => /* @__PURE__ */ jsx31("a", { href: to, className, children });
|
|
3020
|
-
var AccordionItem = ({
|
|
3021
|
-
item,
|
|
3022
|
-
onClick,
|
|
3023
|
-
isOpen,
|
|
3024
|
-
className,
|
|
3025
|
-
children,
|
|
3026
|
-
noChevron,
|
|
3027
|
-
linkComponent: LinkComponent = DefaultLink,
|
|
3028
|
-
testId = "accordion-item"
|
|
3029
|
-
}) => {
|
|
3030
|
-
const Icon = Icons[item.icon];
|
|
3031
|
-
const [maxHeight, setMaxHeight] = useState17(0);
|
|
3032
|
-
const ref = useRef12(null);
|
|
3033
|
-
const getItemsHeight = () => {
|
|
3034
|
-
let itemHeight = 0;
|
|
3035
|
-
ref.current?.childNodes.forEach((el) => {
|
|
3036
|
-
itemHeight += el.offsetHeight;
|
|
3037
|
-
});
|
|
3038
|
-
return itemHeight + 20;
|
|
3039
|
-
};
|
|
3040
|
-
useEffect17(() => {
|
|
3041
|
-
setMaxHeight(isOpen ? getItemsHeight() : 0);
|
|
3042
|
-
}, [isOpen]);
|
|
3043
|
-
const calculateStatusCount = () => {
|
|
3044
|
-
return item?.rows?.reduce(
|
|
3045
|
-
(acc, row) => {
|
|
3046
|
-
const result = row.cols.reduce(
|
|
3047
|
-
(accum, col) => ({
|
|
3048
|
-
active: accum.active + (col.status === "active" ? 1 : 0),
|
|
3049
|
-
pause: accum.pause + (col.status === "pause" ? 1 : 0)
|
|
3050
|
-
}),
|
|
3051
|
-
{ active: 0, pause: 0 }
|
|
3052
|
-
);
|
|
3053
|
-
return {
|
|
3054
|
-
active: acc.active + result.active,
|
|
3055
|
-
pause: acc.pause + result.pause
|
|
3056
|
-
};
|
|
3057
|
-
},
|
|
3058
|
-
{ active: 0, pause: 0 }
|
|
3059
|
-
);
|
|
3060
|
-
};
|
|
3061
|
-
return /* @__PURE__ */ jsxs26(
|
|
3062
|
-
"div",
|
|
3063
|
-
{
|
|
3064
|
-
"data-testid": testId,
|
|
3065
|
-
className: cn27("accordion--item", className),
|
|
3066
|
-
role: "region",
|
|
3067
|
-
"aria-labelledby": `accordion-title-${item.title}`,
|
|
3068
|
-
children: [
|
|
3069
|
-
/* @__PURE__ */ jsxs26(
|
|
3070
|
-
"div",
|
|
3071
|
-
{
|
|
3072
|
-
className: cn27("accordion--title-box", {
|
|
3073
|
-
"accordion--title-open": isOpen
|
|
3074
|
-
}),
|
|
3075
|
-
onClick: () => onClick(!isOpen),
|
|
3076
|
-
id: `accordion-title-${item.title}`,
|
|
3077
|
-
role: "button",
|
|
3078
|
-
"aria-expanded": isOpen,
|
|
3079
|
-
"aria-controls": `accordion-content-${item.title}`,
|
|
3080
|
-
tabIndex: 0,
|
|
3081
|
-
children: [
|
|
3082
|
-
/* @__PURE__ */ jsxs26("div", { className: "j4 no-wrap", children: [
|
|
3083
|
-
item?.icon && /* @__PURE__ */ jsx31(Icon, { className: cn27("mr5", item?.className), "aria-hidden": "true" }),
|
|
3084
|
-
/* @__PURE__ */ jsx31("span", { className: "accordion--title", children: item.title || "Menu Chapter" })
|
|
3085
|
-
] }),
|
|
3086
|
-
/* @__PURE__ */ jsxs26("div", { className: "j6 accordion-title__right-box", children: [
|
|
3087
|
-
item.status && /* @__PURE__ */ jsx31("div", { className: "mr5", children: /* @__PURE__ */ jsx31(
|
|
3088
|
-
Status_default2,
|
|
3089
|
-
{
|
|
3090
|
-
type: item?.status.type,
|
|
3091
|
-
value: item?.status.value,
|
|
3092
|
-
status: item?.status.status,
|
|
3093
|
-
active: calculateStatusCount()?.active,
|
|
3094
|
-
pause: calculateStatusCount()?.pause
|
|
3095
|
-
}
|
|
3096
|
-
) }),
|
|
3097
|
-
!noChevron && /* @__PURE__ */ jsx31(
|
|
3098
|
-
Icons.ChevronRight,
|
|
3099
|
-
{
|
|
3100
|
-
"aria-hidden": "true",
|
|
3101
|
-
className: cn27("accordion--title-chevron", {
|
|
3102
|
-
"accordion--title-chevron-open": isOpen
|
|
3103
|
-
})
|
|
3104
|
-
}
|
|
3105
|
-
)
|
|
3106
|
-
] })
|
|
3107
|
-
]
|
|
3108
|
-
}
|
|
3109
|
-
),
|
|
3110
|
-
/* @__PURE__ */ jsx31(
|
|
3111
|
-
"div",
|
|
3112
|
-
{
|
|
3113
|
-
ref,
|
|
3114
|
-
style: { maxHeight },
|
|
3115
|
-
className: cn27("accordion--content", {
|
|
3116
|
-
"accordion--content-is-open": isOpen
|
|
3117
|
-
}),
|
|
3118
|
-
id: `accordion-content-${item.title}`,
|
|
3119
|
-
role: "region",
|
|
3120
|
-
"aria-labelledby": `accordion-title-${item.title}`,
|
|
3121
|
-
children: item.children ? item.children.map((el) => {
|
|
3122
|
-
return /* @__PURE__ */ jsx31(LinkComponent, { to: el.link, className: "accordion--content-item accordion--menu-link", children: el?.title || "Menu item" }, el.id);
|
|
3123
|
-
}) : children
|
|
3124
|
-
}
|
|
3125
|
-
)
|
|
3126
|
-
]
|
|
3127
|
-
}
|
|
3128
|
-
);
|
|
3129
|
-
};
|
|
3130
|
-
var AccordionItem_default = AccordionItem;
|
|
3131
|
-
|
|
3132
|
-
// src/Atomic/UI/Table/TdTypes/TdActions.js
|
|
3133
|
-
import React18, { useState as useState18 } from "react";
|
|
3134
|
-
import * as Icons2 from "react-feather";
|
|
3135
|
-
|
|
3136
|
-
// src/Atomic/FormElements/Switcher/Switcher.tsx
|
|
3137
|
-
import cn28 from "classnames";
|
|
3138
|
-
import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
3139
|
-
var RC6 = "switcher";
|
|
3140
|
-
var Switcher = ({
|
|
3141
|
-
label,
|
|
3142
|
-
className,
|
|
3143
|
-
isActive,
|
|
3144
|
-
disabled,
|
|
3145
|
-
onChange,
|
|
3146
|
-
isLabelBold,
|
|
3147
|
-
hint,
|
|
3148
|
-
hintSide,
|
|
3149
|
-
testId = "switcher"
|
|
3150
|
-
}) => {
|
|
3151
|
-
return /* @__PURE__ */ jsxs27(
|
|
3152
|
-
"div",
|
|
3153
|
-
{
|
|
3154
|
-
"data-testid": testId,
|
|
3155
|
-
className: cn28(RC6, className, { [`${RC6}_disabled`]: disabled }),
|
|
3156
|
-
children: [
|
|
3157
|
-
/* @__PURE__ */ jsxs27(
|
|
3158
|
-
"button",
|
|
3159
|
-
{
|
|
3160
|
-
type: "button",
|
|
3161
|
-
"data-testid": `${testId}-button`,
|
|
3162
|
-
className: cn28(`${RC6}__button`),
|
|
3163
|
-
disabled,
|
|
3164
|
-
onClick: (e) => onChange(!isActive, e),
|
|
3165
|
-
children: [
|
|
3166
|
-
/* @__PURE__ */ jsx32(
|
|
3167
|
-
"div",
|
|
3168
|
-
{
|
|
3169
|
-
className: cn28(`${RC6}__button-content`, {
|
|
3170
|
-
[`${RC6}__button-content_active`]: isActive
|
|
3171
|
-
}),
|
|
3172
|
-
children: /* @__PURE__ */ jsx32("div", { className: `${RC6}__ball` })
|
|
3173
|
-
}
|
|
3174
|
-
),
|
|
3175
|
-
label && /* @__PURE__ */ jsx32(
|
|
3176
|
-
"span",
|
|
3177
|
-
{
|
|
3178
|
-
className: cn28(`${RC6}__label`, {
|
|
3179
|
-
[`${RC6}__label_bold`]: isLabelBold
|
|
3180
|
-
}),
|
|
3181
|
-
children: label
|
|
3182
|
-
}
|
|
3183
|
-
)
|
|
3184
|
-
]
|
|
3185
|
-
}
|
|
3186
|
-
),
|
|
3187
|
-
hint && /* @__PURE__ */ jsx32(Hint_default, { className: `${RC6}__hint`, hint, side: hintSide })
|
|
3188
|
-
]
|
|
3189
|
-
}
|
|
3190
|
-
);
|
|
3191
|
-
};
|
|
3192
|
-
var Switcher_default = Switcher;
|
|
3193
|
-
|
|
3194
|
-
// src/Atomic/UI/Table/TdTypes/TdActions.js
|
|
3195
|
-
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
3196
|
-
var TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
|
|
3197
|
-
if (!actions) return false;
|
|
3198
|
-
const [state, setState] = useState18(actions);
|
|
3199
|
-
const handleArrayChange = (value, index, prop) => {
|
|
3200
|
-
state[index][prop] = value;
|
|
3201
|
-
setState([...state]);
|
|
3202
|
-
onChange(state);
|
|
3203
|
-
};
|
|
3204
|
-
return /* @__PURE__ */ jsx33("div", { className: "j6", children: actions?.map((action, index) => {
|
|
3205
|
-
switch (action.type) {
|
|
3206
|
-
case "download":
|
|
3207
|
-
return /* @__PURE__ */ jsx33(
|
|
3208
|
-
"div",
|
|
3209
|
-
{
|
|
3210
|
-
className: "td-actions--item td-actions--download",
|
|
3211
|
-
onClick: () => {
|
|
3212
|
-
},
|
|
3213
|
-
children: /* @__PURE__ */ jsx33(Icons2.Download, {})
|
|
3214
|
-
},
|
|
3215
|
-
index
|
|
3216
|
-
);
|
|
3217
|
-
case "edit":
|
|
3218
|
-
return /* @__PURE__ */ jsx33(
|
|
3219
|
-
"div",
|
|
3220
|
-
{
|
|
3221
|
-
className: "td-actions--item td-actions--edit",
|
|
3222
|
-
onClick: () => {
|
|
3223
|
-
},
|
|
3224
|
-
children: /* @__PURE__ */ jsx33(Icons2.Edit3, {})
|
|
3225
|
-
},
|
|
3226
|
-
index
|
|
3227
|
-
);
|
|
3228
|
-
case "delete":
|
|
3229
|
-
return /* @__PURE__ */ jsx33(
|
|
3230
|
-
"div",
|
|
3231
|
-
{
|
|
3232
|
-
className: "td-actions--item td-actions--delete",
|
|
3233
|
-
onClick: () => onActionClick("delete", rowItem),
|
|
3234
|
-
children: /* @__PURE__ */ jsx33(Icons2.Trash2, {})
|
|
3235
|
-
},
|
|
3236
|
-
index
|
|
3237
|
-
);
|
|
3238
|
-
case "undo":
|
|
3239
|
-
return /* @__PURE__ */ jsx33(
|
|
3240
|
-
"div",
|
|
3241
|
-
{
|
|
3242
|
-
className: "td-actions--item td-actions--undo",
|
|
3243
|
-
onClick: () => onActionClick("undo", rowItem),
|
|
3244
|
-
children: /* @__PURE__ */ jsx33(Icons2.RotateCcw, {})
|
|
3245
|
-
},
|
|
3246
|
-
index
|
|
3247
|
-
);
|
|
3248
|
-
case "switcher":
|
|
3249
|
-
return /* @__PURE__ */ jsx33("div", { className: "df", children: /* @__PURE__ */ jsx33(
|
|
3250
|
-
Switcher_default,
|
|
3251
|
-
{
|
|
3252
|
-
label: action.label || null,
|
|
3253
|
-
isActive: action?.value,
|
|
3254
|
-
onChange: (e) => handleArrayChange(e, index, "value")
|
|
3255
|
-
}
|
|
3256
|
-
) }, index);
|
|
3257
|
-
default:
|
|
3258
|
-
return null;
|
|
3259
|
-
}
|
|
3260
|
-
}) });
|
|
3261
|
-
};
|
|
3262
|
-
|
|
3263
|
-
// src/Atomic/UI/Table/TdTypes/TdPriority.js
|
|
3264
|
-
import React19 from "react";
|
|
3265
|
-
import cn29 from "classnames";
|
|
3266
|
-
import { ArrowDown as ArrowDown2, ArrowUp as ArrowUp2 } from "react-feather";
|
|
3267
|
-
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
3268
|
-
var TdPriority = ({ onClick, rowIndex, cardLength }) => {
|
|
3269
|
-
return /* @__PURE__ */ jsxs28("div", { className: "cards-table__priority", children: [
|
|
3270
|
-
/* @__PURE__ */ jsx34("span", { className: "mr5", children: rowIndex + 1 }),
|
|
3271
|
-
/* @__PURE__ */ jsxs28("div", { className: "df", children: [
|
|
3272
|
-
/* @__PURE__ */ jsx34(
|
|
3273
|
-
ArrowDown2,
|
|
3274
|
-
{
|
|
3275
|
-
onClick: () => onClick(rowIndex),
|
|
3276
|
-
className: cn29("table--icon", {
|
|
3277
|
-
disabled: rowIndex + 1 === cardLength
|
|
3278
|
-
})
|
|
3279
|
-
}
|
|
3280
|
-
),
|
|
3281
|
-
/* @__PURE__ */ jsx34(
|
|
3282
|
-
ArrowUp2,
|
|
3283
|
-
{
|
|
3284
|
-
onClick: () => onClick(rowIndex, true),
|
|
3285
|
-
className: cn29("table--icon", { disabled: rowIndex === 0 })
|
|
3286
|
-
}
|
|
3287
|
-
)
|
|
3288
|
-
] })
|
|
3289
|
-
] });
|
|
3290
|
-
};
|
|
3291
|
-
var TdPriority_default = TdPriority;
|
|
3292
|
-
|
|
3293
|
-
// src/Atomic/UI/Table/TdTypes/TdWeight.js
|
|
3294
|
-
import { useEffect as useEffect18, useState as useState19 } from "react";
|
|
3295
|
-
import cn30 from "classnames";
|
|
3296
|
-
import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
3297
|
-
var TdWeight = ({ value, percent, onChange, className }) => {
|
|
3298
|
-
const [state, setState] = useState19(value);
|
|
3299
|
-
const {
|
|
3300
|
-
isToggled: isEdited,
|
|
3301
|
-
toggleOff: unsetIsEdited,
|
|
3302
|
-
toggleOn: setIsEdited
|
|
3303
|
-
} = useOutsideToggle(false);
|
|
3304
|
-
useEffect18(() => {
|
|
3305
|
-
setState(value);
|
|
3306
|
-
}, [value, isEdited]);
|
|
3307
|
-
const handleKeyUp = ({ keyCode, target }) => {
|
|
3308
|
-
if (keyCode === KEY_CODE.ENTER) {
|
|
3309
|
-
const newValue = Number(target.value) || 1;
|
|
3310
|
-
onChange(newValue);
|
|
3311
|
-
unsetIsEdited();
|
|
3312
|
-
}
|
|
3313
|
-
};
|
|
3314
|
-
return /* @__PURE__ */ jsx35(Fragment5, { children: isEdited ? /* @__PURE__ */ jsx35(
|
|
3315
|
-
Input,
|
|
3316
|
-
{
|
|
3317
|
-
value: state,
|
|
3318
|
-
onChange: (e) => setState(e),
|
|
3319
|
-
onBlur: unsetIsEdited,
|
|
3320
|
-
onKeyUp: handleKeyUp,
|
|
3321
|
-
autoFocus: true
|
|
3322
|
-
}
|
|
3323
|
-
) : /* @__PURE__ */ jsxs29("div", { className: cn30("td-weight", className), onClick: setIsEdited, children: [
|
|
3324
|
-
/* @__PURE__ */ jsx35("span", { children: value }),
|
|
3325
|
-
/* @__PURE__ */ jsxs29("span", { className: "ml2 color--grey-gull", children: [
|
|
3326
|
-
"(",
|
|
3327
|
-
percent,
|
|
3328
|
-
"%)"
|
|
3329
|
-
] })
|
|
3330
|
-
] }) });
|
|
3331
|
-
};
|
|
3332
|
-
var TdWeight_default = TdWeight;
|
|
3333
|
-
|
|
3334
|
-
// src/Atomic/UI/Table/Partials/TdCell.js
|
|
3335
|
-
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
3336
|
-
var TdCell = ({
|
|
3337
|
-
type,
|
|
3338
|
-
item,
|
|
3339
|
-
rowIndex,
|
|
3340
|
-
onChange,
|
|
3341
|
-
cardLength,
|
|
3342
|
-
changePriority,
|
|
3343
|
-
getAdviceWeight,
|
|
3344
|
-
onActionClick,
|
|
3345
|
-
rowItem,
|
|
3346
|
-
isDeleted
|
|
3347
|
-
}) => {
|
|
3348
|
-
const [isAccordionOpen, setIsAccordionOpen] = useState20(item.isOpen);
|
|
3349
|
-
const percent = item.type === "weight" && getAdviceWeight(isDeleted ? 0 : item.value);
|
|
3350
|
-
switch (type) {
|
|
3351
|
-
case "accordion":
|
|
3352
|
-
return /* @__PURE__ */ jsx36(
|
|
3353
|
-
AccordionItem_default,
|
|
3354
|
-
{
|
|
3355
|
-
className: item.itemClassName,
|
|
3356
|
-
item,
|
|
3357
|
-
isOpen: isAccordionOpen,
|
|
3358
|
-
onClick: (e) => setIsAccordionOpen(e),
|
|
3359
|
-
children: /* @__PURE__ */ jsx36(Table_default, { rows: item.rows, className: "accordion--table" })
|
|
3360
|
-
}
|
|
3361
|
-
);
|
|
3362
|
-
case "actions":
|
|
3363
|
-
return /* @__PURE__ */ jsx36(
|
|
3364
|
-
TdActions,
|
|
3365
|
-
{
|
|
3366
|
-
rowItem,
|
|
3367
|
-
actions: item,
|
|
3368
|
-
onChange,
|
|
3369
|
-
onActionClick
|
|
3370
|
-
}
|
|
3371
|
-
);
|
|
3372
|
-
case "advancedTags":
|
|
3373
|
-
return /* @__PURE__ */ jsx36(AdvancedTags_default, { items: item });
|
|
3374
|
-
case "link":
|
|
3375
|
-
return /* @__PURE__ */ jsx36("a", { href: item.link, children: item.label });
|
|
3376
|
-
case "priority":
|
|
3377
|
-
return /* @__PURE__ */ jsx36(
|
|
3378
|
-
TdPriority_default,
|
|
3379
|
-
{
|
|
3380
|
-
rowIndex,
|
|
3381
|
-
cardLength,
|
|
3382
|
-
onClick: changePriority
|
|
3383
|
-
}
|
|
3384
|
-
);
|
|
3385
|
-
case "status":
|
|
3386
|
-
return /* @__PURE__ */ jsx36(
|
|
3387
|
-
Status_default,
|
|
3388
|
-
{
|
|
3389
|
-
className: item.className,
|
|
3390
|
-
label: item.label,
|
|
3391
|
-
status: item.status
|
|
3392
|
-
}
|
|
3393
|
-
);
|
|
3394
|
-
case "tags":
|
|
3395
|
-
return item.map((tag, index) => /* @__PURE__ */ jsx36(Tag_default, { label: tag.label }, index));
|
|
3396
|
-
case "weight":
|
|
3397
|
-
return /* @__PURE__ */ jsx36(
|
|
3398
|
-
TdWeight_default,
|
|
3399
|
-
{
|
|
3400
|
-
value: item.value,
|
|
3401
|
-
percent,
|
|
3402
|
-
onChange: (value) => onChange({ ...item, value })
|
|
3403
|
-
}
|
|
3404
|
-
);
|
|
3405
|
-
default:
|
|
3406
|
-
return /* @__PURE__ */ jsx36("span", { className: item.className, children: item.value });
|
|
3407
|
-
}
|
|
3408
|
-
};
|
|
3409
|
-
var TdCell_default = TdCell;
|
|
3410
|
-
|
|
3411
|
-
// src/Atomic/UI/Table/Partials/TdRow.js
|
|
3412
|
-
import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3413
|
-
var TdRow = ({
|
|
3414
|
-
item,
|
|
3415
|
-
onChange,
|
|
3416
|
-
rowIndex,
|
|
3417
|
-
cardStatus,
|
|
3418
|
-
range,
|
|
3419
|
-
type,
|
|
3420
|
-
rowSpan,
|
|
3421
|
-
colSpan,
|
|
3422
|
-
cardLength,
|
|
3423
|
-
changePriority,
|
|
3424
|
-
getAdviceWeight,
|
|
3425
|
-
onActionClick,
|
|
3426
|
-
isDeleted,
|
|
3427
|
-
testId = "td-row"
|
|
3428
|
-
}) => {
|
|
3429
|
-
const [isOpen, setIsOpen] = useState21(false);
|
|
3430
|
-
const handleChange = handleObjectChange(item, () => onChange({ ...item }));
|
|
3431
|
-
return /* @__PURE__ */ jsxs30(Fragment6, { children: [
|
|
3432
|
-
/* @__PURE__ */ jsxs30("tr", { "data-testid": testId, children: [
|
|
3433
|
-
type && rowSpan && /* @__PURE__ */ jsx37("td", { className: "rel", rowSpan: rowSpan + 1, children: /* @__PURE__ */ jsx37(
|
|
3434
|
-
"span",
|
|
3435
|
-
{
|
|
3436
|
-
className: cn31(
|
|
3437
|
-
type && `cards-table__score cards-table__score-${cardStatus}`
|
|
3438
|
-
),
|
|
3439
|
-
children: /* @__PURE__ */ jsx37(TdRange_default, { item: range })
|
|
3440
|
-
}
|
|
3441
|
-
) }),
|
|
3442
|
-
Object.entries(item).map(
|
|
3443
|
-
([key, value]) => key === "id" || key === "isDeleted" ? null : /* @__PURE__ */ jsx37(
|
|
3444
|
-
"td",
|
|
3445
|
-
{
|
|
3446
|
-
className: cn31("cards-table__body-item", {
|
|
3447
|
-
"cards-table__accordion": value.type === "accordion"
|
|
3448
|
-
}),
|
|
3449
|
-
children: /* @__PURE__ */ jsx37(
|
|
3450
|
-
TdCell_default,
|
|
3451
|
-
{
|
|
3452
|
-
onActionClick,
|
|
3453
|
-
changePriority,
|
|
3454
|
-
cardLength,
|
|
3455
|
-
rowIndex,
|
|
3456
|
-
rowItem: item,
|
|
3457
|
-
type: key,
|
|
3458
|
-
item: value,
|
|
3459
|
-
onChange: (newValue) => handleChange(newValue, key),
|
|
3460
|
-
getAdviceWeight,
|
|
3461
|
-
isDeleted
|
|
3462
|
-
}
|
|
3463
|
-
)
|
|
3464
|
-
},
|
|
3465
|
-
key
|
|
3466
|
-
)
|
|
3467
|
-
)
|
|
3468
|
-
] }),
|
|
3469
|
-
type && colSpan ? /* @__PURE__ */ jsxs30("tr", { children: [
|
|
3470
|
-
/* @__PURE__ */ jsx37("td", {}),
|
|
3471
|
-
/* @__PURE__ */ jsxs30("td", { colSpan, children: [
|
|
3472
|
-
/* @__PURE__ */ jsx37(
|
|
3473
|
-
"span",
|
|
3474
|
-
{
|
|
3475
|
-
className: "cards-table__title-select-lender-btn",
|
|
3476
|
-
onClick: () => setIsOpen(true),
|
|
3477
|
-
children: "Select Lender"
|
|
3478
|
-
}
|
|
3479
|
-
),
|
|
3480
|
-
/* @__PURE__ */ jsx37(
|
|
3481
|
-
Modal_default,
|
|
3482
|
-
{
|
|
3483
|
-
closeModal: () => setIsOpen(false),
|
|
3484
|
-
isOpen,
|
|
3485
|
-
title: "Choose Lender",
|
|
3486
|
-
size: "420",
|
|
3487
|
-
children: "test"
|
|
3488
|
-
}
|
|
3489
|
-
)
|
|
3490
|
-
] })
|
|
3491
|
-
] }) : null
|
|
3492
|
-
] });
|
|
3493
|
-
};
|
|
3494
|
-
var TdRow_default = TdRow;
|
|
3495
|
-
|
|
3496
|
-
// src/Atomic/UI/Table/Table.js
|
|
3497
|
-
import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3498
|
-
var Table = ({
|
|
3499
|
-
rows,
|
|
3500
|
-
onChange,
|
|
3501
|
-
className,
|
|
3502
|
-
header,
|
|
3503
|
-
onActionClick,
|
|
3504
|
-
testId = "table"
|
|
3505
|
-
}) => {
|
|
3506
|
-
const handleArrayChange = (value, index) => {
|
|
3507
|
-
rows[index] = value;
|
|
3508
|
-
onChange({ header: [...header], rows: [...rows] });
|
|
3509
|
-
};
|
|
3510
|
-
return /* @__PURE__ */ jsx38(
|
|
3511
|
-
"div",
|
|
3512
|
-
{
|
|
3513
|
-
"data-testid": testId,
|
|
3514
|
-
className: cn32("simple-table", {
|
|
3515
|
-
[`simple-table--${className}`]: className
|
|
3516
|
-
}),
|
|
3517
|
-
children: /* @__PURE__ */ jsxs31("table", { children: [
|
|
3518
|
-
/* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsx38("tr", { children: header?.map((item) => /* @__PURE__ */ jsx38(TdHeader_default, { item }, item.key)) }) }),
|
|
3519
|
-
/* @__PURE__ */ jsx38("tbody", { children: rows && rows?.length ? rows?.map((row, index) => /* @__PURE__ */ jsx38(
|
|
3520
|
-
TdRow_default,
|
|
3521
|
-
{
|
|
3522
|
-
onActionClick,
|
|
3523
|
-
rowIndex: index,
|
|
3524
|
-
item: row,
|
|
3525
|
-
header,
|
|
3526
|
-
onChange: (value) => handleArrayChange(value, index)
|
|
3527
|
-
},
|
|
3528
|
-
typeof row.id === "object" ? row.id.value : row.id
|
|
3529
|
-
)) : /* @__PURE__ */ jsx38("tr", { children: /* @__PURE__ */ jsx38("td", { className: "row--not-found", colSpan: header?.length, children: "Not set" }) }) })
|
|
3530
|
-
] })
|
|
3531
|
-
}
|
|
3532
|
-
);
|
|
3533
|
-
};
|
|
3534
|
-
var Table_default = Table;
|
|
3535
|
-
|
|
3536
|
-
// src/Atomic/UI/Tag/index.ts
|
|
3537
|
-
var Tag_default2 = Tag_default;
|
|
3538
|
-
|
|
3539
|
-
// src/Atomic/UI/TagList/TagList.tsx
|
|
3540
|
-
import cn33 from "classnames";
|
|
3541
|
-
import {
|
|
3542
|
-
createRef,
|
|
3543
|
-
useEffect as useEffect19,
|
|
3544
|
-
useLayoutEffect as useLayoutEffect5,
|
|
3545
|
-
useRef as useRef13,
|
|
3546
|
-
useState as useState22
|
|
3547
|
-
} from "react";
|
|
3548
|
-
import { Edit3 as Edit32 } from "react-feather";
|
|
3549
|
-
import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3550
|
-
var TagList = ({
|
|
3551
|
-
disabled,
|
|
3552
|
-
className,
|
|
3553
|
-
onTagClick,
|
|
3554
|
-
removeItem,
|
|
3555
|
-
items,
|
|
3556
|
-
withToggle = true,
|
|
3557
|
-
disableShowMore = false,
|
|
3558
|
-
shownItemsCount = "auto",
|
|
3559
|
-
testId = "test-taglist",
|
|
3560
|
-
refProp,
|
|
3561
|
-
renderOrder,
|
|
3562
|
-
onEditClick,
|
|
3563
|
-
onToggleRenderAll,
|
|
3564
|
-
isUseInTable
|
|
3565
|
-
}) => {
|
|
3566
|
-
const wrapperRef = useRef13(null);
|
|
3567
|
-
const [tagList, setTagList] = useState22([]);
|
|
3568
|
-
const [staticTagsCount, setStaticTagsCount] = useState22(-1);
|
|
3569
|
-
const [renderItemsCount, setRenderItemsCount] = useState22(-1);
|
|
3570
|
-
const [renderAll, setRenderAll] = useState22(!withToggle);
|
|
3571
|
-
const wrapperWidth = wrapperRef?.current?.getBoundingClientRect()?.width ?? -1;
|
|
3572
|
-
const setRenderAllInterceptor = (v, event) => {
|
|
3573
|
-
setRenderAll(v);
|
|
3574
|
-
onToggleRenderAll?.(v);
|
|
3575
|
-
event?.stopPropagation();
|
|
3576
|
-
event?.preventDefault();
|
|
3577
|
-
};
|
|
3578
|
-
const getStaticTagsCount = (computedWidth) => {
|
|
3579
|
-
if (typeof shownItemsCount === "number") return shownItemsCount;
|
|
3580
|
-
const delta = typeof onEditClick === "function" ? 60 : 32;
|
|
3581
|
-
const result = tagList.reduce((result2, { itemRef }, index) => {
|
|
3582
|
-
if (result2.skip) return result2;
|
|
3583
|
-
const itemStyle = itemRef?.current && window.getComputedStyle(itemRef.current);
|
|
3584
|
-
const itemWidth = [
|
|
3585
|
-
Number.parseInt((itemRef.current?.getBoundingClientRect()?.width ?? 0).toString(), 10),
|
|
3586
|
-
Number.parseInt((itemStyle?.marginLeft ?? 0).toString(), 10),
|
|
3587
|
-
Number.parseInt((itemStyle?.marginRight ?? 0).toString(), 10)
|
|
3588
|
-
].reduce((result3, item) => {
|
|
3589
|
-
if (!Number.isNaN(item)) result3 += item;
|
|
3590
|
-
return result3;
|
|
3591
|
-
}, 0);
|
|
3592
|
-
if (!Number.isNaN(itemWidth) && itemWidth > 0 && itemWidth + result2.width < computedWidth - delta || index === 0) {
|
|
3593
|
-
result2 = {
|
|
3594
|
-
count: result2.count + 1,
|
|
3595
|
-
width: result2.width + itemWidth,
|
|
3596
|
-
items: [...result2.items, { w: itemWidth, r: itemRef?.current }]
|
|
3597
|
-
};
|
|
3598
|
-
} else {
|
|
3599
|
-
result2.skip = true;
|
|
3600
|
-
}
|
|
3601
|
-
return result2;
|
|
3602
|
-
}, { count: 0, width: 0, items: [], skip: false });
|
|
3603
|
-
if (result?.items?.length === 1 && result.items[0].r && tagList.length > 1) {
|
|
3604
|
-
result.items[0].r.style.maxWidth = `${computedWidth - delta - 8}px`;
|
|
3605
|
-
}
|
|
3606
|
-
return result?.count;
|
|
3607
|
-
};
|
|
3608
|
-
const cancelDefault = (_e, cb) => {
|
|
3609
|
-
cb?.();
|
|
3610
|
-
};
|
|
3611
|
-
const renderTags = () => {
|
|
3612
|
-
const tagsRenderOrder = renderOrder ?? tagList.map(({ value, id }) => id ?? value);
|
|
3613
|
-
return tagsRenderOrder.map((v, i) => {
|
|
3614
|
-
const item = tagList.find(({ value, id }) => {
|
|
3615
|
-
if (id) return id === v;
|
|
3616
|
-
if (value) return value === v;
|
|
3617
|
-
return false;
|
|
3618
|
-
});
|
|
3619
|
-
if (!item) return null;
|
|
3620
|
-
const isHidden = renderItemsCount !== -1 && staticTagsCount !== -1 ? i >= renderItemsCount : false;
|
|
3621
|
-
return /* @__PURE__ */ jsx39(
|
|
3622
|
-
"div",
|
|
3623
|
-
{
|
|
3624
|
-
className: `tag-list_wrapper_item ${isHidden ? "tag-list_wrapper_item--hidden" : ""}`,
|
|
3625
|
-
ref: checkedRef(item?.itemRef),
|
|
3626
|
-
children: /* @__PURE__ */ jsx39(
|
|
3627
|
-
Tag_default,
|
|
3628
|
-
{
|
|
3629
|
-
testId: `test-taglist-item-${item?.id ?? item?.value}`,
|
|
3630
|
-
...item,
|
|
3631
|
-
onClick: onTagClick,
|
|
3632
|
-
removeItem,
|
|
3633
|
-
isUseInTable
|
|
3634
|
-
}
|
|
3635
|
-
)
|
|
3636
|
-
},
|
|
3637
|
-
`tag-list-item-${item?.id ?? item?.value}`
|
|
3638
|
-
);
|
|
3639
|
-
});
|
|
3640
|
-
};
|
|
3641
|
-
const renderMoreTags = () => {
|
|
3642
|
-
if (typeof shownItemsCount === "number" && tagList?.length < shownItemsCount || !tagList?.length || disableShowMore) {
|
|
3643
|
-
return null;
|
|
3644
|
-
}
|
|
3645
|
-
const restItems = tagList.length - renderItemsCount;
|
|
3646
|
-
if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
|
|
3647
|
-
return /* @__PURE__ */ jsx39(
|
|
3648
|
-
Tag_default,
|
|
3649
|
-
{
|
|
3650
|
-
label: `+${restItems}`,
|
|
3651
|
-
className: "tag-list_wrapper_render-more",
|
|
3652
|
-
onClick: disableShowMore ? () => {
|
|
3653
|
-
} : (value, event) => cancelDefault(value, () => setRenderAllInterceptor(true, event)),
|
|
3654
|
-
isUseInTable
|
|
3655
|
-
}
|
|
3656
|
-
);
|
|
3657
|
-
};
|
|
3658
|
-
const renderHideTags = () => {
|
|
3659
|
-
if (renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length) {
|
|
3660
|
-
return null;
|
|
3661
|
-
}
|
|
3662
|
-
return /* @__PURE__ */ jsx39(
|
|
3663
|
-
Tag_default,
|
|
3664
|
-
{
|
|
3665
|
-
label: "...",
|
|
3666
|
-
className: "tag-list_wrapper_hide-more",
|
|
3667
|
-
onClick: (value, event) => cancelDefault(value, () => setRenderAllInterceptor(false, event)),
|
|
3668
|
-
isUseInTable
|
|
3669
|
-
}
|
|
3670
|
-
);
|
|
3671
|
-
};
|
|
3672
|
-
useEffect19(() => {
|
|
3673
|
-
setStaticTagsCount(-1);
|
|
3674
|
-
setRenderItemsCount(-1);
|
|
3675
|
-
setRenderAllInterceptor(false, null);
|
|
3676
|
-
const itemsWithRef = items.map((item) => ({ ...item, itemRef: createRef() }));
|
|
3677
|
-
setTagList(itemsWithRef);
|
|
3678
|
-
}, [items]);
|
|
3679
|
-
useLayoutEffect5(() => {
|
|
3680
|
-
if (withToggle && wrapperWidth !== -1 && staticTagsCount === -1) {
|
|
3681
|
-
let computedWidth = wrapperWidth;
|
|
3682
|
-
if (computedWidth === 0) {
|
|
3683
|
-
computedWidth = Number.parseInt(
|
|
3684
|
-
(wrapperRef?.current ? window.getComputedStyle(wrapperRef?.current)?.width : 0).toString()
|
|
3685
|
-
);
|
|
3686
|
-
}
|
|
3687
|
-
if (!Number.isNaN(computedWidth)) {
|
|
3688
|
-
setStaticTagsCount(getStaticTagsCount(computedWidth));
|
|
3689
|
-
}
|
|
3690
|
-
}
|
|
3691
|
-
}, [tagList, wrapperWidth, wrapperRef?.current]);
|
|
3692
|
-
useLayoutEffect5(() => {
|
|
3693
|
-
setRenderItemsCount(staticTagsCount);
|
|
3694
|
-
}, [staticTagsCount]);
|
|
3695
|
-
useEffect19(() => {
|
|
3696
|
-
setRenderItemsCount(renderAll ? tagList?.length : staticTagsCount);
|
|
3697
|
-
}, [renderAll]);
|
|
3698
|
-
useEffect19(() => {
|
|
3699
|
-
if (wrapperRef?.current && refProp) refProp.current = wrapperRef?.current;
|
|
3700
|
-
}, [wrapperRef?.current]);
|
|
3701
|
-
return /* @__PURE__ */ jsxs32(
|
|
3702
|
-
"div",
|
|
3703
|
-
{
|
|
3704
|
-
"data-testid": testId,
|
|
3705
|
-
className: cn33(
|
|
3706
|
-
"tag-list_wrapper",
|
|
3707
|
-
`${renderItemsCount !== tagList?.length || !withToggle || staticTagsCount === -1 || staticTagsCount === tagList?.length ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items"}`,
|
|
3708
|
-
className,
|
|
3709
|
-
{ "tag-list_wrapper--disabled": disabled }
|
|
3710
|
-
),
|
|
3711
|
-
style: {
|
|
3712
|
-
visibility: staticTagsCount === -1 ? "hidden" : "visible",
|
|
3713
|
-
zIndex: staticTagsCount === -1 ? "-1" : "auto"
|
|
3714
|
-
},
|
|
3715
|
-
ref: wrapperRef,
|
|
3716
|
-
children: [
|
|
3717
|
-
renderTags(),
|
|
3718
|
-
renderMoreTags(),
|
|
3719
|
-
renderHideTags(),
|
|
3720
|
-
typeof onEditClick === "function" && /* @__PURE__ */ jsx39("div", { className: "tag-list__edit-trigger", children: /* @__PURE__ */ jsx39(Edit32, { onClick: onEditClick }) })
|
|
3721
|
-
]
|
|
3722
|
-
}
|
|
3723
|
-
);
|
|
3724
|
-
};
|
|
3725
|
-
var TagList_default = TagList;
|
|
3726
|
-
|
|
3727
|
-
// src/Atomic/UI/UserBox/UserBox.tsx
|
|
3728
|
-
import cn35 from "classnames";
|
|
3729
|
-
|
|
3730
|
-
// src/Atomic/FormElements/Label/Label.tsx
|
|
3731
|
-
import cn34 from "classnames";
|
|
3732
|
-
import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3733
|
-
var CN6 = "label";
|
|
3734
|
-
var Label = ({
|
|
3735
|
-
className = "",
|
|
3736
|
-
label = "",
|
|
3737
|
-
note,
|
|
3738
|
-
hint,
|
|
3739
|
-
isRequired,
|
|
3740
|
-
isLabelBolt,
|
|
3741
|
-
onClickHintCallback,
|
|
3742
|
-
error = null,
|
|
3743
|
-
isAccessability = false,
|
|
3744
|
-
isAccessabilityHint = false,
|
|
3745
|
-
testId = CN6
|
|
3746
|
-
}) => {
|
|
3747
|
-
const correctLabel = isRequired ? /* @__PURE__ */ jsxs33(Fragment7, { children: [
|
|
3748
|
-
label,
|
|
3749
|
-
" ",
|
|
3750
|
-
/* @__PURE__ */ jsx40("span", { className: "label_asterisk", children: "*" }),
|
|
3751
|
-
" ",
|
|
3752
|
-
note && /* @__PURE__ */ jsx40("span", { className: "label_note", children: note }),
|
|
3753
|
-
hint && /* @__PURE__ */ jsx40(
|
|
3754
|
-
Hint_default,
|
|
3755
|
-
{
|
|
3756
|
-
id: `hint-${label}`,
|
|
3757
|
-
children: null,
|
|
3758
|
-
isLoading: false,
|
|
3759
|
-
isAccessability: isAccessabilityHint,
|
|
3760
|
-
hint: hint.text,
|
|
3761
|
-
icon: hint.icon,
|
|
3762
|
-
variant: hint.variant,
|
|
3763
|
-
side: hint.hintSide,
|
|
3764
|
-
className: "label-hint",
|
|
3765
|
-
onClickCallback: onClickHintCallback
|
|
3766
|
-
},
|
|
3767
|
-
`hint-${label}`
|
|
3768
|
-
)
|
|
3769
|
-
] }) : /* @__PURE__ */ jsxs33(Fragment7, { children: [
|
|
3770
|
-
label,
|
|
3771
|
-
" ",
|
|
3772
|
-
note && /* @__PURE__ */ jsx40("span", { className: "label_note", children: note }),
|
|
3773
|
-
hint && /* @__PURE__ */ jsx40(
|
|
3774
|
-
Hint_default,
|
|
3775
|
-
{
|
|
3776
|
-
isAccessability: isAccessabilityHint,
|
|
3777
|
-
hint: hint.text,
|
|
3778
|
-
icon: hint.icon,
|
|
3779
|
-
variant: hint.variant,
|
|
3780
|
-
side: hint.hintSide,
|
|
3781
|
-
className: "label-hint",
|
|
3782
|
-
onClickCallback: onClickHintCallback,
|
|
3783
|
-
id: void 0,
|
|
3784
|
-
children: void 0,
|
|
3785
|
-
isLoading: void 0
|
|
3786
|
-
},
|
|
3787
|
-
void 0
|
|
3788
|
-
)
|
|
3789
|
-
] });
|
|
3790
|
-
return /* @__PURE__ */ jsx40(
|
|
3791
|
-
"span",
|
|
3792
|
-
{
|
|
3793
|
-
tabIndex: isAccessability ? 0 : -1,
|
|
3794
|
-
"aria-label": label,
|
|
3795
|
-
className: cn34(CN6, { label_bold: isLabelBolt, error, isRequired }, className),
|
|
3796
|
-
"data-testid": testId,
|
|
3797
|
-
children: /* @__PURE__ */ jsx40("span", { className: "label_text", "data-testid": "label-text", children: correctLabel })
|
|
3798
|
-
}
|
|
3799
|
-
);
|
|
3800
|
-
};
|
|
3801
|
-
var Label_default = Label;
|
|
3802
|
-
|
|
3803
|
-
// src/Atomic/UI/UserBox/UserBox.tsx
|
|
3804
|
-
import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3805
|
-
var UserBox = ({
|
|
3806
|
-
name = "Username",
|
|
3807
|
-
role,
|
|
3808
|
-
id,
|
|
3809
|
-
onClick,
|
|
3810
|
-
isModal,
|
|
3811
|
-
className,
|
|
3812
|
-
colors,
|
|
3813
|
-
testId = "userbox"
|
|
3814
|
-
}) => {
|
|
3815
|
-
const getNameFirstLetter = name.charAt(0).toUpperCase();
|
|
3816
|
-
const renderUser = () => {
|
|
3817
|
-
if (isModal) {
|
|
3818
|
-
return /* @__PURE__ */ jsxs34(Fragment8, { children: [
|
|
3819
|
-
/* @__PURE__ */ jsx41("div", { style: { backgroundColor: getColorById(id, colors) }, className: "td-user-box__avatar", children: getNameFirstLetter }),
|
|
3820
|
-
/* @__PURE__ */ jsxs34("div", { className: "td-user-box__user-data", children: [
|
|
3821
|
-
/* @__PURE__ */ jsx41(Button_default, { className: "p0 no-shadow", onClick, label: name, variant: "link" }),
|
|
3822
|
-
role && /* @__PURE__ */ jsx41("span", { children: role })
|
|
3823
|
-
] })
|
|
3824
|
-
] });
|
|
3825
|
-
} else {
|
|
3826
|
-
return /* @__PURE__ */ jsxs34(Fragment8, { children: [
|
|
3827
|
-
/* @__PURE__ */ jsx41("div", { style: { backgroundColor: getColorById(id) }, className: "td-user-box__avatar", children: getNameFirstLetter }),
|
|
3828
|
-
/* @__PURE__ */ jsxs34("div", { className: "td-user-box__user-data", children: [
|
|
3829
|
-
/* @__PURE__ */ jsx41(Label_default, { label: name }),
|
|
3830
|
-
role && /* @__PURE__ */ jsx41("span", { "aria-label": `User role: ${role}`, children: role })
|
|
3831
|
-
] })
|
|
3832
|
-
] });
|
|
3833
|
-
}
|
|
3834
|
-
};
|
|
3835
|
-
return /* @__PURE__ */ jsx41(
|
|
3836
|
-
"div",
|
|
3837
|
-
{
|
|
3838
|
-
"data-testid": testId,
|
|
3839
|
-
className: cn35("td-user-box", className),
|
|
3840
|
-
role: "region",
|
|
3841
|
-
"aria-label": `User box for ${name}`,
|
|
3842
|
-
children: renderUser()
|
|
3843
|
-
}
|
|
3844
|
-
);
|
|
3845
|
-
};
|
|
3846
|
-
var UserBox_default = UserBox;
|
|
3847
|
-
|
|
3848
|
-
// src/Atomic/UI/UserBox/index.ts
|
|
3849
|
-
var UserBox_default2 = UserBox_default;
|
|
3850
|
-
|
|
3851
|
-
// src/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.tsx
|
|
3852
|
-
import classNames from "classnames";
|
|
3853
|
-
|
|
3854
|
-
// src/Atomic/UI/WizardStepper/ui/icons.tsx
|
|
3855
|
-
import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3856
|
-
var DoneIcon = () => /* @__PURE__ */ jsxs35("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3857
|
-
/* @__PURE__ */ jsx42("rect", { width: "20", height: "20", rx: "10", fill: "#69A457" }),
|
|
3858
|
-
/* @__PURE__ */ jsx42("mask", { id: "mask0_54394_4001", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "2", y: "2", width: "16", height: "16", children: /* @__PURE__ */ jsx42("path", { d: "M14.5 7L9 12.5L6 9.5", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
|
|
3859
|
-
/* @__PURE__ */ jsx42("g", { mask: "url(#mask0_54394_4001)", children: /* @__PURE__ */ jsx42("rect", { x: "2", y: "2", width: "16", height: "16", fill: "white" }) })
|
|
3860
|
-
] });
|
|
3861
|
-
var TodoIcon = () => {
|
|
3862
|
-
return /* @__PURE__ */ jsxs35("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3863
|
-
/* @__PURE__ */ jsx42("g", { clipPath: "url(#clip0_54394_4448)", children: /* @__PURE__ */ jsx42("circle", { cx: "10", cy: "10", r: "7", fill: "white", stroke: "#B3B8CB", strokeWidth: "2" }) }),
|
|
3864
|
-
/* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsx42("clipPath", { id: "clip0_54394_4448", children: /* @__PURE__ */ jsx42("rect", { width: "16", height: "16", fill: "white", transform: "translate(2 2)" }) }) })
|
|
3865
|
-
] });
|
|
3866
|
-
};
|
|
3867
|
-
var ActiveIcon = () => {
|
|
3868
|
-
return /* @__PURE__ */ jsxs35("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3869
|
-
/* @__PURE__ */ jsx42("rect", { width: "20", height: "20", rx: "10", fill: "#E8F9E5" }),
|
|
3870
|
-
"ii",
|
|
3871
|
-
/* @__PURE__ */ jsx42("mask", { id: "mask0_54394_1459", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "2", y: "2", width: "16", height: "16", children: /* @__PURE__ */ jsx42("circle", { cx: "10", cy: "10", r: "4", fill: "#171D33" }) }),
|
|
3872
|
-
/* @__PURE__ */ jsx42("g", { mask: "url(#mask0_54394_1459)", children: /* @__PURE__ */ jsx42("rect", { x: "2", y: "2", width: "16", height: "16", fill: "#171D33" }) })
|
|
3873
|
-
] });
|
|
3874
|
-
};
|
|
3875
|
-
var alternativeIconSet = {
|
|
3876
|
-
defaultIcon: /* @__PURE__ */ jsx42(TodoIcon, {}),
|
|
3877
|
-
doneIcon: /* @__PURE__ */ jsx42(DoneIcon, {}),
|
|
3878
|
-
activeIcon: /* @__PURE__ */ jsx42(ActiveIcon, {})
|
|
3879
|
-
};
|
|
3880
|
-
|
|
3881
|
-
// src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx
|
|
3882
|
-
import cn37 from "classnames";
|
|
3883
|
-
|
|
3884
|
-
// src/Atomic/UI/WizardStepper/constructor.js
|
|
3885
|
-
import React23 from "react";
|
|
3886
|
-
import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3887
|
-
var WIZARD_STEP_VARIANTS = Object.freeze({
|
|
3888
|
-
DEFAULT: "default",
|
|
3889
|
-
DONE: "done",
|
|
3890
|
-
ACTIVE: "active"
|
|
3891
|
-
});
|
|
3892
|
-
|
|
3893
|
-
// src/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.tsx
|
|
3894
|
-
import cn36 from "classnames";
|
|
3895
|
-
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
3896
|
-
var DefaultPoint = () => {
|
|
3897
|
-
return /* @__PURE__ */ jsx44("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx44("circle", { cx: "8", cy: "8", r: "4" }) });
|
|
3898
|
-
};
|
|
3899
|
-
var DonePoint = () => {
|
|
3900
|
-
return /* @__PURE__ */ jsx44("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx44("path", { d: "M12.5 5L7 10.5L4 7.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
3901
|
-
};
|
|
3902
|
-
var RC7 = "state-icon";
|
|
3903
|
-
var { ACTIVE, DEFAULT, DONE } = WIZARD_STEP_VARIANTS;
|
|
3904
|
-
var StateIcon = ({ variant = DEFAULT, className }) => {
|
|
3905
|
-
const computedState = variant === ACTIVE || variant === DONE ? variant : DEFAULT;
|
|
3906
|
-
const Inner = {
|
|
3907
|
-
[DEFAULT]: /* @__PURE__ */ jsx44(DefaultPoint, {}),
|
|
3908
|
-
[ACTIVE]: /* @__PURE__ */ jsx44(DefaultPoint, {}),
|
|
3909
|
-
[DONE]: /* @__PURE__ */ jsx44(DonePoint, {})
|
|
3910
|
-
};
|
|
3911
|
-
return /* @__PURE__ */ jsx44("div", { className: cn36(RC7, `${RC7}--${computedState}`, className), children: Inner[computedState] });
|
|
3912
|
-
};
|
|
3913
|
-
|
|
3914
|
-
// src/Atomic/UI/WizardStepper/ui/StateIcon/index.ts
|
|
3915
|
-
var StateIcon_default = StateIcon;
|
|
3916
|
-
|
|
3917
|
-
// src/Atomic/UI/WizardStepper/ui/StepRow/StepRow.tsx
|
|
3918
|
-
import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3919
|
-
var RC8 = "step-row";
|
|
3920
|
-
var { DEFAULT: DEFAULT2, ACTIVE: ACTIVE2, DONE: DONE2 } = WIZARD_STEP_VARIANTS;
|
|
3921
|
-
var StepRow = ({
|
|
3922
|
-
label,
|
|
3923
|
-
description,
|
|
3924
|
-
className,
|
|
3925
|
-
isOptional,
|
|
3926
|
-
isFinished,
|
|
3927
|
-
isActive,
|
|
3928
|
-
titleSlot,
|
|
3929
|
-
contentSlot,
|
|
3930
|
-
customIcons
|
|
3931
|
-
}) => {
|
|
3932
|
-
const title = label;
|
|
3933
|
-
const rowVariant = (() => {
|
|
3934
|
-
if (isActive) return ACTIVE2;
|
|
3935
|
-
if (isFinished) return DONE2;
|
|
3936
|
-
return DEFAULT2;
|
|
3937
|
-
})();
|
|
3938
|
-
const alternaviteIconFromProps = (() => {
|
|
3939
|
-
if (isActive) return customIcons?.activeIcon;
|
|
3940
|
-
if (isFinished) return customIcons?.doneIcon;
|
|
3941
|
-
return customIcons?.defaultIcon;
|
|
3942
|
-
})();
|
|
3943
|
-
const CorrectIcon = () => {
|
|
3944
|
-
if (!customIcons || Object?.values(customIcons)?.every((icon) => !icon)) {
|
|
3945
|
-
return /* @__PURE__ */ jsx45(StateIcon_default, { variant: rowVariant });
|
|
3946
|
-
}
|
|
3947
|
-
return alternaviteIconFromProps || null;
|
|
3948
|
-
};
|
|
3949
|
-
return /* @__PURE__ */ jsxs37("div", { className: cn37(RC8, `${RC8}--${rowVariant}`, className), children: [
|
|
3950
|
-
/* @__PURE__ */ jsx45("div", { className: cn37(`${RC8}__state-point`, `${RC8}__state-point--${rowVariant}`), children: /* @__PURE__ */ jsx45(CorrectIcon, {}) }),
|
|
3951
|
-
/* @__PURE__ */ jsxs37("div", { className: `${RC8}__content`, children: [
|
|
3952
|
-
/* @__PURE__ */ jsxs37("div", { className: `${RC8}__title`, children: [
|
|
3953
|
-
/* @__PURE__ */ jsxs37("div", { className: `${RC8}__title-left`, children: [
|
|
3954
|
-
/* @__PURE__ */ jsx45("div", { className: cn37(`${RC8}__title-text`, { "text-muted": rowVariant === DEFAULT2 }), children: title }),
|
|
3955
|
-
isOptional && /* @__PURE__ */ jsx45(Status_default, { label: "Optional", status: "draft" })
|
|
3956
|
-
] }),
|
|
3957
|
-
titleSlot && /* @__PURE__ */ jsx45("div", { className: `${RC8}__title-right`, children: titleSlot })
|
|
3958
|
-
] }),
|
|
3959
|
-
description && /* @__PURE__ */ jsx45("div", { className: `${RC8}__description`, children: description }),
|
|
3960
|
-
contentSlot && /* @__PURE__ */ jsx45("div", { className: `${RC8}__body`, children: contentSlot })
|
|
3961
|
-
] })
|
|
3962
|
-
] }, label);
|
|
3963
|
-
};
|
|
3964
|
-
var StepRow_default = StepRow;
|
|
3965
|
-
|
|
3966
|
-
// src/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.tsx
|
|
3967
|
-
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
3968
|
-
var StepWrapper = ({
|
|
3969
|
-
steps,
|
|
3970
|
-
customIcons,
|
|
3971
|
-
variant = "default",
|
|
3972
|
-
className,
|
|
3973
|
-
testId = "step-wrapper"
|
|
3974
|
-
}) => {
|
|
3975
|
-
if (!steps?.length) return /* @__PURE__ */ jsx46("div", { "data-testid": "empty-state", children: "No steps available" });
|
|
3976
|
-
const renderStepRow = (step) => {
|
|
3977
|
-
const { key, ...stepProps } = step;
|
|
3978
|
-
return /* @__PURE__ */ jsx46(
|
|
3979
|
-
StepRow_default,
|
|
3980
|
-
{
|
|
3981
|
-
...stepProps,
|
|
3982
|
-
customIcons: customIcons || alternativeIconSet
|
|
3983
|
-
},
|
|
3984
|
-
key
|
|
3985
|
-
);
|
|
3986
|
-
};
|
|
3987
|
-
switch (variant) {
|
|
3988
|
-
case "ghost":
|
|
3989
|
-
return /* @__PURE__ */ jsx46(
|
|
3990
|
-
Box_default,
|
|
3991
|
-
{
|
|
3992
|
-
className: classNames("step-wrapper", "step-wrapper-ghost", className),
|
|
3993
|
-
"data-testid": testId,
|
|
3994
|
-
children: steps?.map(renderStepRow)
|
|
3995
|
-
}
|
|
3996
|
-
);
|
|
3997
|
-
case "cardActive":
|
|
3998
|
-
return /* @__PURE__ */ jsx46(
|
|
3999
|
-
"div",
|
|
4000
|
-
{
|
|
4001
|
-
className: classNames("step-wrapper", "step-wrapper-card-active", className),
|
|
4002
|
-
"data-testid": testId,
|
|
4003
|
-
children: steps?.map(renderStepRow)
|
|
4004
|
-
}
|
|
4005
|
-
);
|
|
4006
|
-
default:
|
|
4007
|
-
return /* @__PURE__ */ jsx46(
|
|
4008
|
-
"div",
|
|
4009
|
-
{
|
|
4010
|
-
className: classNames("step-wrapper", className),
|
|
4011
|
-
"data-testid": testId,
|
|
4012
|
-
children: steps?.map(renderStepRow)
|
|
4013
|
-
}
|
|
4014
|
-
);
|
|
4015
|
-
}
|
|
4016
|
-
};
|
|
4017
|
-
var StepWrapper_default = StepWrapper;
|
|
4018
|
-
|
|
4019
|
-
// src/Atomic/UI/WizardStepper/ui/StepWrapper/index.ts
|
|
4020
|
-
var StepWrapper_default2 = StepWrapper_default;
|
|
4021
|
-
|
|
4022
|
-
// src/Atomic/UI/WizardStepper/ui/index.ts
|
|
4023
|
-
var ui_default = StepWrapper_default2;
|
|
4024
|
-
|
|
4025
|
-
// src/Atomic/UI/WizardStepper/index.ts
|
|
4026
|
-
var WizardStepper_default = ui_default;
|
|
4027
|
-
export {
|
|
4028
|
-
AccordionTable_default as AccordionTable,
|
|
4029
|
-
AccordionText_default as AccordionText,
|
|
4030
|
-
AdvTag_default as AdvTag,
|
|
4031
|
-
AdvancedTag_default as AdvancedTags,
|
|
4032
|
-
Alert_default2 as Alert,
|
|
4033
|
-
Arrow_default as Arrow,
|
|
4034
|
-
Box_default as Box,
|
|
4035
|
-
Button_default as Button,
|
|
4036
|
-
CircleProgressBar_default as CircleProgressBar,
|
|
4037
|
-
DateTime_default as DateTime,
|
|
4038
|
-
DebugContainer_default as DebugContainer,
|
|
4039
|
-
DoubleString_default2 as DoubleString,
|
|
4040
|
-
EVENTS,
|
|
4041
|
-
Hint_default2 as Hint,
|
|
4042
|
-
Modal_default2 as Modal,
|
|
4043
|
-
ModalFooter_default as ModalFooter,
|
|
4044
|
-
ModalHOC_default as ModalHOC,
|
|
4045
|
-
ModalTitle_default as ModalTitle,
|
|
4046
|
-
MonoAccordion_default2 as MonoAccordion,
|
|
4047
|
-
PageTitle_default2 as PageTitle,
|
|
4048
|
-
Price_default2 as Price,
|
|
4049
|
-
PriceRange_default2 as PriceRange,
|
|
4050
|
-
ProgressLine_default2 as ProgressLine,
|
|
4051
|
-
Status_default2 as Status,
|
|
4052
|
-
Table_default as Table,
|
|
4053
|
-
Tag_default2 as Tag,
|
|
4054
|
-
TagList_default as TagList,
|
|
4055
|
-
UserBox_default2 as UserBox,
|
|
4056
|
-
WizardStepper_default as WizardStepper,
|
|
4057
|
-
dispatchEventForModalManagement,
|
|
4058
|
-
useDebugContainer_default as useDebugContainer,
|
|
4059
|
-
useMobileModal
|
|
4060
|
-
};
|
|
4061
|
-
//! Важно! Если придет велью с количеством дробных разрядов БОЛЬШИМ
|
|
4062
|
-
//! чем указано в quantity - округлит по правилам округления
|
|
4063
|
-
//! чем указано в decimalPlaces - округлит по правилам округления
|
|
4064
|
-
//# sourceMappingURL=ui.js.map
|