@unifiedsoftware/react-ui 1.0.7 → 1.0.8-beta

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/index.mjs DELETED
@@ -1,1758 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
-
33
- // src/components/Badge/Badge.tsx
34
- import clsx from "clsx";
35
-
36
- // src/constants/index.ts
37
- var PREFIX_CLS = "us-";
38
-
39
- // src/components/Badge/Badge.tsx
40
- import { jsx, jsxs } from "react/jsx-runtime";
41
- var Badge = ({ children, placement, content }) => {
42
- return /* @__PURE__ */ jsxs("div", { className: clsx(`${PREFIX_CLS}badge-wrapper`), children: [
43
- children,
44
- /* @__PURE__ */ jsx(
45
- "div",
46
- {
47
- className: clsx(`${PREFIX_CLS}badge`, {
48
- [`${PREFIX_CLS}badge--${placement}`]: placement
49
- }),
50
- children: content
51
- }
52
- )
53
- ] });
54
- };
55
- var Badge_default = Badge;
56
-
57
- // src/components/Button/Button.tsx
58
- import clsx3 from "clsx";
59
- import { forwardRef as forwardRef2 } from "react";
60
- import { TbLoader2 } from "react-icons/tb";
61
-
62
- // src/components/Icon/Icon.tsx
63
- import clsx2 from "clsx";
64
- import { Children, cloneElement, forwardRef } from "react";
65
- var Icon = forwardRef(({ children, size }, ref) => {
66
- const child = Children.only(children);
67
- return cloneElement(child, __spreadProps(__spreadValues({
68
- ref
69
- }, child.props), {
70
- className: clsx2(`${PREFIX_CLS}icon`, { [`${PREFIX_CLS}font-size-${size}`]: size }, child.props.className)
71
- }));
72
- });
73
- var Icon_default = Icon;
74
-
75
- // src/components/Button/Button.tsx
76
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
77
- var Button = forwardRef2(
78
- (_a, ref) => {
79
- var _b = _a, {
80
- as: Component = "button",
81
- children,
82
- className,
83
- role = "presentation",
84
- variant = "text",
85
- color = "primary",
86
- size = "md",
87
- iconOnly,
88
- startContent,
89
- endContent,
90
- loading
91
- } = _b, rest = __objRest(_b, [
92
- "as",
93
- "children",
94
- "className",
95
- "role",
96
- "variant",
97
- "color",
98
- "size",
99
- "iconOnly",
100
- "startContent",
101
- "endContent",
102
- "loading"
103
- ]);
104
- return /* @__PURE__ */ jsxs2(
105
- Component,
106
- __spreadProps(__spreadValues({
107
- ref,
108
- className: clsx3(
109
- `${PREFIX_CLS}button`,
110
- {
111
- [`${PREFIX_CLS}button--${variant}`]: variant,
112
- [`${PREFIX_CLS}button--${color}`]: color,
113
- [`${PREFIX_CLS}button--${size}`]: size,
114
- [`${PREFIX_CLS}button--icon-only`]: iconOnly
115
- },
116
- className
117
- ),
118
- role
119
- }, rest), {
120
- children: [
121
- /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}overlay` }),
122
- /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}outline` }),
123
- loading ? /* @__PURE__ */ jsx2(Icon_default, { children: /* @__PURE__ */ jsx2(TbLoader2, { className: `${PREFIX_CLS}animation-spin` }) }) : startContent,
124
- /* @__PURE__ */ jsx2("div", { className: `${PREFIX_CLS}button__content`, children }),
125
- endContent
126
- ]
127
- })
128
- );
129
- }
130
- );
131
-
132
- // src/components/Chip/Chip.tsx
133
- import clsx4 from "clsx";
134
- import { forwardRef as forwardRef3 } from "react";
135
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
136
- var Chip = forwardRef3(
137
- (_a, ref) => {
138
- var _b = _a, { as: Component = "div", children, className, variant, color, size } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
139
- return /* @__PURE__ */ jsxs3(
140
- Component,
141
- __spreadProps(__spreadValues({
142
- ref,
143
- className: clsx4(
144
- `${PREFIX_CLS}chip`,
145
- {
146
- [`${PREFIX_CLS}chip--${variant}`]: variant,
147
- [`${PREFIX_CLS}chip--${color}`]: color,
148
- [`${PREFIX_CLS}chip--${size}`]: size
149
- },
150
- className
151
- )
152
- }, rest), {
153
- children: [
154
- /* @__PURE__ */ jsx3("div", { className: clsx4(`${PREFIX_CLS}overlay`) }),
155
- /* @__PURE__ */ jsx3("div", { className: `${PREFIX_CLS}outline` }),
156
- children
157
- ]
158
- })
159
- );
160
- }
161
- );
162
- var Chip_default = Chip;
163
-
164
- // src/components/Collapse/Collapse.tsx
165
- import { Children as Children2, useEffect, useRef, useState } from "react";
166
-
167
- // src/components/Collapse/CollapseContext.tsx
168
- import { createContext, useContext } from "react";
169
- var CollapseContext = createContext(null);
170
- var useCollapse = () => {
171
- const context = useContext(CollapseContext);
172
- if (!context) {
173
- throw new Error("`useCollapse` must be used within a `<Collapse />`");
174
- }
175
- return context;
176
- };
177
- var CollapseContext_default = CollapseContext;
178
-
179
- // src/components/Collapse/Collapse.tsx
180
- import { jsxs as jsxs4 } from "react/jsx-runtime";
181
- var Collapse = ({ children, isOpen, onOpen, onClose, onToggle }) => {
182
- const collapseRef = useRef(null);
183
- const [selfIsOpen, setSelfIsOpen] = useState(isOpen != null ? isOpen : false);
184
- const [heightAuto, setHeightAuto] = useState(false);
185
- const [trigger, content] = Children2.toArray(children);
186
- const handleOpen = () => {
187
- setSelfIsOpen(true);
188
- onOpen == null ? void 0 : onOpen();
189
- };
190
- const handleClose = () => {
191
- setSelfIsOpen(false);
192
- onClose == null ? void 0 : onClose();
193
- };
194
- const handleToggle = () => {
195
- setSelfIsOpen((prevState) => !prevState);
196
- onToggle == null ? void 0 : onToggle();
197
- };
198
- useEffect(() => {
199
- if (isOpen !== void 0) {
200
- setSelfIsOpen(isOpen);
201
- }
202
- setTimeout(() => {
203
- if (isOpen) {
204
- setHeightAuto(true);
205
- } else {
206
- setHeightAuto(false);
207
- }
208
- }, 100);
209
- }, [isOpen]);
210
- return /* @__PURE__ */ jsxs4(
211
- CollapseContext_default.Provider,
212
- {
213
- value: {
214
- collapseRef,
215
- isOpen: selfIsOpen,
216
- heightAuto,
217
- onOpen: handleOpen,
218
- onClose: handleClose,
219
- onToggle: handleToggle
220
- },
221
- children: [
222
- trigger,
223
- content
224
- ]
225
- }
226
- );
227
- };
228
- var Collapse_default = Collapse;
229
-
230
- // src/components/Collapse/CollapseContent.tsx
231
- import clsx5 from "clsx";
232
- import { Children as Children3, cloneElement as cloneElement2, forwardRef as forwardRef4 } from "react";
233
- var CollapseContent = forwardRef4(({ children }, ref) => {
234
- var _a, _b;
235
- const { collapseRef, isOpen, heightAuto } = useCollapse();
236
- const child = Children3.only(children);
237
- return cloneElement2(child, __spreadProps(__spreadValues({}, child.props), {
238
- ref: (node) => {
239
- collapseRef.current = node;
240
- if (ref !== null) {
241
- ref.current = node;
242
- }
243
- },
244
- style: __spreadProps(__spreadValues({}, child.props.style), {
245
- height: isOpen && heightAuto ? "auto" : isOpen ? (_a = collapseRef.current) == null ? void 0 : _a.scrollHeight : !isOpen && heightAuto ? (_b = collapseRef.current) == null ? void 0 : _b.scrollHeight : 0
246
- }),
247
- className: clsx5(`${PREFIX_CLS}collapse`, child.props.className)
248
- }));
249
- });
250
- var CollapseContent_default = CollapseContent;
251
-
252
- // src/components/Collapse/CollapseTrigger.tsx
253
- import { Children as Children4, cloneElement as cloneElement3, forwardRef as forwardRef5 } from "react";
254
- var CollapseTrigger = forwardRef5(({ children }, ref) => {
255
- const { collapseRef, onToggle } = useCollapse();
256
- const child = Children4.only(children);
257
- return cloneElement3(child, __spreadValues({
258
- ref,
259
- onClick: (event) => {
260
- var _a, _b;
261
- if (!collapseRef.current) {
262
- return;
263
- }
264
- onToggle();
265
- (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, event);
266
- }
267
- }, child.props));
268
- });
269
- var CollapseTrigger_default = CollapseTrigger;
270
-
271
- // src/components/Menu/Menu.tsx
272
- import clsx9 from "clsx";
273
- import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
274
-
275
- // src/components/Menu/MenuContext.tsx
276
- import { createContext as createContext2, useContext as useContext2 } from "react";
277
- var MenuContext = createContext2(null);
278
- var useMenu = () => {
279
- const context = useContext2(MenuContext);
280
- if (!context) {
281
- throw new Error("`useMenu` must be used within a `<Menu />`");
282
- }
283
- return context;
284
- };
285
- var MenuContext_default = MenuContext;
286
-
287
- // src/components/Menu/MenuGroup.tsx
288
- import clsx8 from "clsx";
289
- import { useMemo as useMemo2 } from "react";
290
-
291
- // src/components/Menu/MenuItem.tsx
292
- import clsx6 from "clsx";
293
- import { forwardRef as forwardRef6, useContext as useContext4, useEffect as useEffect2 } from "react";
294
-
295
- // src/components/Menu/MenuValueContext.tsx
296
- import { createContext as createContext3, useContext as useContext3 } from "react";
297
- var MenuValueContext = createContext3([]);
298
- var useMenuItemValue = () => {
299
- const context = useContext3(MenuValueContext);
300
- if (!context) {
301
- throw new Error("`useMenuValue` must be used within a `<MenuValueContext.Provider />`");
302
- }
303
- return context;
304
- };
305
- var MenuValueContext_default = MenuValueContext;
306
-
307
- // src/components/Menu/MenuItem.tsx
308
- import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
309
- var MenuItem = forwardRef6((props, ref) => {
310
- const _a = props, { as: Component = "div", className, style, value, title, icon, level = 1, disabled, onClick } = _a, rest = __objRest(_a, ["as", "className", "style", "value", "title", "icon", "level", "disabled", "onClick"]);
311
- const { value: menuValue, originalValue, openMode, onChange, onOpen, onItemSelect } = useMenu();
312
- const values = useContext4(MenuValueContext_default);
313
- const mergedValues = [...values, value];
314
- const handleClick = (event) => {
315
- if (value !== void 0) {
316
- onChange(mergedValues);
317
- }
318
- onClick == null ? void 0 : onClick(event);
319
- onItemSelect == null ? void 0 : onItemSelect(props);
320
- };
321
- useEffect2(() => {
322
- if (openMode === "automatic" && originalValue.length > 0 && originalValue[originalValue.length - 1] === value) {
323
- onOpen(values);
324
- onChange(mergedValues);
325
- }
326
- }, [value, originalValue, openMode]);
327
- return /* @__PURE__ */ jsxs5(
328
- Component,
329
- __spreadProps(__spreadValues({
330
- ref,
331
- className: clsx6(
332
- `${PREFIX_CLS}menu-item`,
333
- {
334
- [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value),
335
- [`${PREFIX_CLS}menu-item--disabled`]: disabled
336
- },
337
- className
338
- ),
339
- style: __spreadValues({
340
- paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-item-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-item-padding-level))`
341
- }, style),
342
- onClick: handleClick
343
- }, rest), {
344
- children: [
345
- /* @__PURE__ */ jsx4("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx4("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
346
- icon && /* @__PURE__ */ jsx4("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
347
- /* @__PURE__ */ jsx4("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx4("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) })
348
- ]
349
- })
350
- );
351
- });
352
- MenuItem.displayName = "MenuItem";
353
- var MenuItem_default = MenuItem;
354
-
355
- // src/components/Menu/MenuSubmenu.tsx
356
- import clsx7 from "clsx";
357
- import { useContext as useContext5, useMemo } from "react";
358
- import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
359
-
360
- // src/components/Menu/utils.ts
361
- var getOpenValuesByPathname = (pathname) => {
362
- return pathname.split("/").reduce((previousValue, currentValue) => {
363
- const previousPath = previousValue[previousValue.length - 1];
364
- if (previousPath != void 0) {
365
- previousValue.push(previousPath + "/" + currentValue);
366
- } else {
367
- previousValue.push("");
368
- }
369
- return previousValue;
370
- }, []);
371
- };
372
- var addOrRemoveValueInArray = (array, value) => {
373
- const index = array.indexOf(value);
374
- const newArray = [...array];
375
- if (index === -1) {
376
- newArray.push(value);
377
- } else {
378
- newArray.splice(index, 1);
379
- }
380
- return newArray;
381
- };
382
-
383
- // src/components/Menu/MenuSubmenu.tsx
384
- import { jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
385
- var MenuSubmenu = (_a) => {
386
- var _b = _a, {
387
- children,
388
- className,
389
- style,
390
- value,
391
- title,
392
- icon,
393
- level = 1,
394
- items,
395
- onClick
396
- } = _b, rest = __objRest(_b, [
397
- "children",
398
- "className",
399
- "style",
400
- "value",
401
- "title",
402
- "icon",
403
- "level",
404
- "items",
405
- "onClick"
406
- ]);
407
- const { value: menuValue, openValues, expandMode, onOpen } = useMenu();
408
- const values = useContext5(MenuValueContext_default);
409
- const isOpen = openValues.includes(value);
410
- const mergedValues = [...values, value];
411
- const content = useMemo(() => {
412
- return items == null ? void 0 : items.map((_a2, index) => {
413
- var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
414
- return type === "item" ? /* @__PURE__ */ jsx5(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "submenu" ? /* @__PURE__ */ jsx5(MenuSubmenu, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : type === "group" ? /* @__PURE__ */ jsx5(MenuGroup_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index) : /* @__PURE__ */ jsx5(MenuItem_default, __spreadValues({ level: level !== void 0 ? level + 1 : void 0 }, item), index);
415
- });
416
- }, [items]);
417
- const handleClick = (event) => {
418
- if (expandMode === "multiple") {
419
- const updatedOpenValues = addOrRemoveValueInArray(openValues, value);
420
- onOpen(updatedOpenValues);
421
- } else {
422
- if (isOpen) {
423
- const updatedOpenValues = addOrRemoveValueInArray(mergedValues, value);
424
- onOpen(updatedOpenValues);
425
- } else {
426
- const updatedOpenValues = addOrRemoveValueInArray(values, value);
427
- onOpen(updatedOpenValues);
428
- }
429
- }
430
- onClick == null ? void 0 : onClick(event);
431
- };
432
- return /* @__PURE__ */ jsx5(MenuValueContext_default.Provider, { value: mergedValues, children: /* @__PURE__ */ jsx5("div", { className: clsx7(`${PREFIX_CLS}menu-submenu`), children: /* @__PURE__ */ jsxs6(Collapse_default, { isOpen, children: [
433
- /* @__PURE__ */ jsx5(CollapseTrigger_default, { children: /* @__PURE__ */ jsxs6(
434
- "div",
435
- __spreadProps(__spreadValues({
436
- className: clsx7(
437
- `${PREFIX_CLS}menu-item`,
438
- {
439
- [`${PREFIX_CLS}menu-item--selected`]: menuValue.includes(value) || items && mergedValues.includes(menuValue)
440
- },
441
- className
442
- ),
443
- style: __spreadValues({
444
- paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-item-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-item-padding-level))`
445
- }, style),
446
- onClick: handleClick
447
- }, rest), {
448
- children: [
449
- /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
450
- icon && /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}menu-item__icon`, children: icon }),
451
- /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}menu-item__content`, children: /* @__PURE__ */ jsx5("span", { className: `${PREFIX_CLS}menu-item__title`, children: title }) }),
452
- /* @__PURE__ */ jsx5("div", { className: `${PREFIX_CLS}menu-item__icon`, children: isOpen ? /* @__PURE__ */ jsx5(MdKeyboardArrowUp, { className: `${PREFIX_CLS}icon` }) : /* @__PURE__ */ jsx5(MdKeyboardArrowDown, { className: `${PREFIX_CLS}icon` }) })
453
- ]
454
- })
455
- ) }),
456
- /* @__PURE__ */ jsx5(CollapseContent_default, { children: /* @__PURE__ */ jsx5(
457
- "ul",
458
- {
459
- className: clsx7(`${PREFIX_CLS}menu`, {
460
- [`${PREFIX_CLS}menu-open`]: !open
461
- }),
462
- children: content || children
463
- }
464
- ) })
465
- ] }) }) });
466
- };
467
- var MenuSubmenu_default = MenuSubmenu;
468
-
469
- // src/components/Menu/MenuGroup.tsx
470
- import { Fragment, jsx as jsx6, jsxs as jsxs7 } from "react/jsx-runtime";
471
- var MenuGroup = (_a) => {
472
- var _b = _a, {
473
- children,
474
- className,
475
- style,
476
- title,
477
- icon,
478
- level = 1,
479
- items
480
- } = _b, rest = __objRest(_b, [
481
- "children",
482
- "className",
483
- "style",
484
- "title",
485
- "icon",
486
- "level",
487
- "items"
488
- ]);
489
- const content = useMemo2(() => {
490
- return items == null ? void 0 : items.map((_a2, index) => {
491
- var _b2 = _a2, { type } = _b2, item = __objRest(_b2, ["type"]);
492
- return type === "item" ? /* @__PURE__ */ jsx6(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx6(MenuSubmenu_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx6(MenuItem_default, __spreadValues({}, item), index);
493
- });
494
- }, [items]);
495
- return /* @__PURE__ */ jsxs7(Fragment, { children: [
496
- /* @__PURE__ */ jsxs7(
497
- "div",
498
- __spreadProps(__spreadValues({
499
- className: clsx8(`${PREFIX_CLS}menu-group`, className),
500
- style: __spreadValues({
501
- paddingLeft: level <= 1 ? `var(--${PREFIX_CLS}menu-group-padding-x)` : `calc(${level} * var(--${PREFIX_CLS}menu-group-padding-level))`
502
- }, style)
503
- }, rest), {
504
- children: [
505
- icon && /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}menu-group__icon`, children: icon }),
506
- /* @__PURE__ */ jsx6("div", { className: `${PREFIX_CLS}menu-group__content`, children: /* @__PURE__ */ jsx6("span", { className: `${PREFIX_CLS}menu-group__title`, children: title }) })
507
- ]
508
- })
509
- ),
510
- content || children
511
- ] });
512
- };
513
- var MenuGroup_default = MenuGroup;
514
-
515
- // src/components/Menu/Menu.tsx
516
- import { jsx as jsx7 } from "react/jsx-runtime";
517
- var Menu = (_a) => {
518
- var _b = _a, {
519
- children,
520
- value: valueProp = [],
521
- defaultValue,
522
- openValues: openValuesProp,
523
- expandMode = "multiple",
524
- openMode = "manual",
525
- items,
526
- onChange,
527
- onOpen,
528
- onItemSelect
529
- } = _b, rest = __objRest(_b, [
530
- "children",
531
- "value",
532
- "defaultValue",
533
- "openValues",
534
- "expandMode",
535
- "openMode",
536
- "items",
537
- "onChange",
538
- "onOpen",
539
- "onItemSelect"
540
- ]);
541
- var _a2;
542
- const [selfValue, setSelfValue] = useState2((_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : []);
543
- const [selfOpenValues, setSelfOpenValues] = useState2(openValuesProp != null ? openValuesProp : []);
544
- const content = useMemo3(() => {
545
- return items == null ? void 0 : items.map((_a3, index) => {
546
- var _b2 = _a3, { type } = _b2, item = __objRest(_b2, ["type"]);
547
- return type === "item" ? /* @__PURE__ */ jsx7(MenuItem_default, __spreadValues({}, item), index) : type === "submenu" ? /* @__PURE__ */ jsx7(MenuSubmenu_default, __spreadValues({}, item), index) : type === "group" ? /* @__PURE__ */ jsx7(MenuGroup_default, __spreadValues({}, item), index) : /* @__PURE__ */ jsx7(MenuItem_default, __spreadValues({}, item), index);
548
- });
549
- }, [items]);
550
- const handleChange = (value) => {
551
- if (valueProp !== void 0 && openMode !== "automatic") {
552
- onChange == null ? void 0 : onChange(value);
553
- } else {
554
- setSelfValue(value);
555
- }
556
- };
557
- const handleOpen = (values) => {
558
- if (openValuesProp !== void 0) {
559
- onOpen == null ? void 0 : onOpen(values);
560
- } else {
561
- setSelfOpenValues(values);
562
- }
563
- };
564
- const handleItemSelect = (props) => {
565
- onItemSelect == null ? void 0 : onItemSelect(props);
566
- };
567
- useEffect3(() => {
568
- if (valueProp !== void 0 && openMode !== "automatic") {
569
- setSelfValue(valueProp);
570
- }
571
- }, [valueProp]);
572
- useEffect3(() => {
573
- if (openValuesProp !== void 0) {
574
- setSelfOpenValues(openValuesProp);
575
- }
576
- }, [openValuesProp]);
577
- return /* @__PURE__ */ jsx7(
578
- MenuContext_default.Provider,
579
- {
580
- value: {
581
- value: selfValue,
582
- originalValue: valueProp,
583
- openValues: selfOpenValues,
584
- expandMode,
585
- openMode,
586
- onOpen: handleOpen,
587
- onChange: handleChange,
588
- onItemSelect: handleItemSelect
589
- },
590
- children: /* @__PURE__ */ jsx7("div", __spreadProps(__spreadValues({ className: clsx9(`${PREFIX_CLS}menu`) }, rest), { children: content || children }))
591
- }
592
- );
593
- };
594
- Menu.displayName = "Menu";
595
- var Menu_default = Menu;
596
-
597
- // src/components/Tabs/Tab.tsx
598
- import clsx10 from "clsx";
599
- import mergeRefs from "merge-refs";
600
- import { forwardRef as forwardRef7, useEffect as useEffect4, useRef as useRef2 } from "react";
601
- import { TbX } from "react-icons/tb";
602
-
603
- // src/components/Tabs/TabsContext.ts
604
- import { createContext as createContext4, useContext as useContext6 } from "react";
605
- var TabsContext = createContext4(null);
606
- var useTabs = () => {
607
- const context = useContext6(TabsContext);
608
- if (!context) {
609
- throw new Error("`useTabs` must be used within a `<Tabs />`");
610
- }
611
- return context;
612
- };
613
-
614
- // src/components/Tabs/Tab.tsx
615
- import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
616
- var Tab = forwardRef7(
617
- (_a, ref) => {
618
- var _b = _a, { as: Component = "div", children, className, role = "presentation", value, closable, disabled, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "role", "value", "closable", "disabled", "onClick"]);
619
- const tabRef = useRef2(null);
620
- const _a2 = useTabs(), { onClose, registerItem } = _a2, tabs = __objRest(_a2, ["onClose", "registerItem"]);
621
- const handleClick = (event) => {
622
- const previousTab = tabs.previousTabRef.current;
623
- const currentTab = tabRef.current;
624
- if (!currentTab)
625
- return;
626
- if (previousTab) {
627
- const previousIndicator = previousTab.querySelector(`.${PREFIX_CLS}tab__indicator`);
628
- const currentIndicator = currentTab.querySelector(`.${PREFIX_CLS}tab__indicator`);
629
- if (!previousIndicator || !currentIndicator)
630
- return;
631
- const from = {};
632
- const fromRect = previousIndicator.getBoundingClientRect();
633
- const fromPos = fromRect.left;
634
- const fromWidth = fromRect.width;
635
- const toRect = currentIndicator.getBoundingClientRect();
636
- const toPos = toRect.left;
637
- const toWidth = toRect.width;
638
- const scale = fromWidth / toWidth;
639
- if (scale) {
640
- from["transform"] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
641
- } else {
642
- from["opacity"] = 0;
643
- }
644
- const keyframes = [from, { transform: "none" }];
645
- currentIndicator.animate(keyframes, {
646
- duration: 250,
647
- easing: "cubic-bezier(.3,0,0,1)"
648
- });
649
- tabs.previousTabRef.current = tabRef.current;
650
- }
651
- tabs.previousTabRef.current = tabRef.current;
652
- tabs.onChange(value);
653
- onClick == null ? void 0 : onClick(event);
654
- };
655
- const handleClose = (event) => {
656
- event.stopPropagation();
657
- onClose(value);
658
- };
659
- useEffect4(() => {
660
- registerItem({ value, disabled });
661
- if (value === tabs.value) {
662
- tabs.previousTabRef.current = tabRef.current;
663
- }
664
- }, [value, tabs.value]);
665
- return /* @__PURE__ */ jsxs8(
666
- Component,
667
- __spreadProps(__spreadValues({
668
- ref: mergeRefs(tabRef, ref, (el) => tabs.tabRefs.current[value] = el),
669
- className: clsx10(
670
- `${PREFIX_CLS}tab`,
671
- { [`${PREFIX_CLS}tab--selected`]: value === tabs.value, [`${PREFIX_CLS}tab--disabled`]: disabled },
672
- className
673
- ),
674
- role,
675
- onClick: handleClick
676
- }, rest), {
677
- children: [
678
- /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay`, children: /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}overlay__surface` }) }),
679
- /* @__PURE__ */ jsxs8("div", { className: `${PREFIX_CLS}tab__content`, children: [
680
- children,
681
- closable && /* @__PURE__ */ jsx8(Button, { variant: "text", color: "secondary", iconOnly: true, size: "xs", onClick: handleClose, children: /* @__PURE__ */ jsx8(Icon_default, { children: /* @__PURE__ */ jsx8(TbX, {}) }) })
682
- ] }),
683
- /* @__PURE__ */ jsx8("div", { className: `${PREFIX_CLS}tab__indicator` })
684
- ]
685
- })
686
- );
687
- }
688
- );
689
-
690
- // src/components/Tabs/Tabs.tsx
691
- import clsx11 from "clsx";
692
- import { Children as Children5, cloneElement as cloneElement4, isValidElement, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
693
-
694
- // src/utils/scroll.ts
695
- var scrollToItem = (parentElement, currentElement) => {
696
- const parentRect = parentElement.getBoundingClientRect();
697
- const currentRect = currentElement.getBoundingClientRect();
698
- const behavior = "smooth";
699
- const previousElement = currentElement.previousSibling;
700
- const previousRect = (previousElement == null ? void 0 : previousElement.getBoundingClientRect()) || currentRect;
701
- if (parentRect.left > previousRect.left) {
702
- let offset = 0;
703
- if (previousElement) {
704
- offset = previousRect.left - parentRect.left + parentElement.scrollLeft + previousRect.width / 4;
705
- }
706
- parentElement.scrollTo({ behavior, left: offset });
707
- }
708
- const nextElement = currentElement.nextSibling;
709
- const nextRect = (nextElement == null ? void 0 : nextElement.getBoundingClientRect()) || currentRect;
710
- if (parentRect.right < nextRect.right) {
711
- let offset = parentElement.scrollWidth;
712
- if (nextElement) {
713
- offset = nextRect.right - parentRect.right + parentElement.scrollLeft - nextRect.width / 4;
714
- }
715
- parentElement.scrollTo({ behavior, left: offset });
716
- }
717
- };
718
-
719
- // src/components/Tabs/Tabs.tsx
720
- import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
721
- var prefixCls = "us-";
722
- var Tabs = (_a) => {
723
- var _b = _a, {
724
- children,
725
- className,
726
- value,
727
- defaultValue,
728
- alignment = "start",
729
- onChange,
730
- onClose
731
- } = _b, rest = __objRest(_b, [
732
- "children",
733
- "className",
734
- "value",
735
- "defaultValue",
736
- "alignment",
737
- "onChange",
738
- "onClose"
739
- ]);
740
- const tabsRef = useRef3(null);
741
- const tabRefs = useRef3({});
742
- const previousTabRef = useRef3(null);
743
- const [selfValue, setSelfValue] = useState3(value != null ? value : defaultValue);
744
- const [items, setItems] = useState3([]);
745
- const registerItem = (item) => {
746
- setItems((prevItems) => {
747
- const index = prevItems.findIndex((item2) => item2.value);
748
- if (index === -1) {
749
- prevItems.push(item);
750
- }
751
- return prevItems;
752
- });
753
- };
754
- const scrollToTab = (value2) => {
755
- const tabsEl = tabsRef.current;
756
- if (!tabsEl)
757
- return;
758
- const currentTabEl = tabRefs.current[value2];
759
- if (!currentTabEl)
760
- return;
761
- scrollToItem(tabsEl, currentTabEl);
762
- };
763
- const handleChange = (value2) => {
764
- setSelfValue(value2);
765
- onChange == null ? void 0 : onChange(value2);
766
- scrollToTab(value2);
767
- };
768
- const handleClose = (value2) => {
769
- onClose == null ? void 0 : onClose(value2);
770
- };
771
- useEffect5(() => {
772
- if (value !== void 0) {
773
- setSelfValue(value);
774
- scrollToTab(value);
775
- }
776
- }, [value]);
777
- useEffect5(() => {
778
- if (value === void 0) {
779
- const item = items.find((tab) => !tab.disabled);
780
- setSelfValue(item == null ? void 0 : item.value);
781
- }
782
- }, [value, items]);
783
- return /* @__PURE__ */ jsxs9(
784
- TabsContext.Provider,
785
- {
786
- value: { previousTabRef, tabRefs, value: selfValue, onChange: handleChange, onClose: handleClose, registerItem },
787
- children: [
788
- /* @__PURE__ */ jsx9(
789
- "div",
790
- __spreadProps(__spreadValues({
791
- ref: tabsRef,
792
- className: clsx11(`${prefixCls}tabs`, { [`${PREFIX_CLS}tabs--${alignment}`]: alignment }, className)
793
- }, rest), {
794
- children: Children5.map(children, (child, index) => {
795
- var _a2;
796
- return !isValidElement(child) ? null : cloneElement4(child, __spreadProps(__spreadValues({}, child.props), { value: (_a2 = child.props.value) != null ? _a2 : index }));
797
- })
798
- })
799
- ),
800
- /* @__PURE__ */ jsx9("div", { className: `${prefixCls}divider` })
801
- ]
802
- }
803
- );
804
- };
805
-
806
- // src/components/DropdownEnumList.tsx
807
- import { DropDownList } from "@progress/kendo-react-dropdowns";
808
- import { useEffect as useEffect6, useState as useState4 } from "react";
809
- import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
810
- function parsearDataForComboBox(array, key, text, itemAll = false) {
811
- const dataForComboBox = [];
812
- if (itemAll)
813
- dataForComboBox.push({ key: "", text: "ALL" });
814
- if (array !== void 0) {
815
- array.map((a) => {
816
- dataForComboBox.push({ key: a[key], text: a[text] });
817
- });
818
- }
819
- return dataForComboBox;
820
- }
821
- function GetEnumDescription(key, typeEnum, description) {
822
- const listLabel = description.get(typeEnum);
823
- let label = void 0;
824
- if (listLabel != void 0)
825
- label = listLabel.get(parseInt(key));
826
- if (label == void 0) {
827
- label = typeEnum[key];
828
- return label.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
829
- }
830
- return label;
831
- }
832
- function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
833
- const values = [];
834
- for (const key in typeEnum) {
835
- if (typeof typeEnum[key] === "string")
836
- values.push({
837
- value: Number(key),
838
- label: replaceGuionForSpace ? GetEnumDescription(key, typeEnum, description) : typeEnum[key]
839
- });
840
- }
841
- return values;
842
- }
843
- var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
844
- const [value, setValue] = useState4("");
845
- const [data, setData] = useState4([]);
846
- useEffect6(() => {
847
- setData(
848
- parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
849
- (a, b) => Number(a.key) - Number(b.key)
850
- )
851
- );
852
- }, []);
853
- useEffect6(() => {
854
- if (data.length > 0) {
855
- setValue(data.filter((x) => x.key == defaultValue)[0]);
856
- }
857
- }, [data]);
858
- const handleOptionClick = (e) => {
859
- onChange(e);
860
- setValue(e);
861
- };
862
- return /* @__PURE__ */ jsx10(Fragment2, { children: /* @__PURE__ */ jsx10(
863
- DropDownList,
864
- {
865
- className: "d-inline-block align-middle mr-2",
866
- data,
867
- dataItemKey: "key",
868
- id: "cmbDisplay",
869
- name: "cmbDisplay",
870
- onChange: (event) => {
871
- handleOptionClick(event.value);
872
- },
873
- textField: "text",
874
- style: {
875
- width: `${width}px`
876
- },
877
- defaultValue: value
878
- }
879
- ) });
880
- };
881
-
882
- // src/contexts/BreadCrumbContext.tsx
883
- import { createContext as createContext5, useState as useState6 } from "react";
884
-
885
- // src/hooks/useLocalStorage.tsx
886
- import { useCallback, useEffect as useEffect8, useState as useState5 } from "react";
887
-
888
- // src/hooks/useEventListener.tsx
889
- import { useRef as useRef4 } from "react";
890
-
891
- // src/hooks/useIsomorphicLayoutEffect.tsx
892
- import { useEffect as useEffect7, useLayoutEffect } from "react";
893
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect7;
894
- var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
895
-
896
- // src/hooks/useEventListener.tsx
897
- function useEventListener(handler) {
898
- const savedHandler = useRef4(handler);
899
- useIsomorphicLayoutEffect_default(() => {
900
- savedHandler.current = handler;
901
- }, [handler]);
902
- }
903
- var useEventListener_default = useEventListener;
904
-
905
- // src/hooks/useLocalStorage.tsx
906
- function useLocalStorage(key, initialValue) {
907
- const readValue = useCallback(() => {
908
- if (typeof window === "undefined") {
909
- return initialValue;
910
- }
911
- try {
912
- const item = window.localStorage.getItem(key);
913
- return item ? parseJSON(item) : initialValue;
914
- } catch (error) {
915
- console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
916
- return initialValue;
917
- }
918
- }, [initialValue, key]);
919
- const [storedValue, setStoredValue] = useState5(readValue);
920
- const setValue = useCallback(
921
- (value) => {
922
- if (typeof window == "undefined") {
923
- console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
924
- }
925
- try {
926
- const newValue = value instanceof Function ? value(storedValue) : value;
927
- window.localStorage.setItem(key, JSON.stringify(newValue));
928
- setStoredValue(newValue);
929
- window.dispatchEvent(new Event("local-storage"));
930
- } catch (error) {
931
- console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
932
- }
933
- },
934
- [key, storedValue]
935
- );
936
- useEffect8(() => {
937
- setStoredValue(readValue());
938
- }, []);
939
- const handleStorageChange = useCallback(() => {
940
- setStoredValue(readValue());
941
- }, [readValue]);
942
- useEventListener_default("storage", handleStorageChange);
943
- useEventListener_default("local-storage", handleStorageChange);
944
- return [storedValue, setValue];
945
- }
946
- function parseJSON(value) {
947
- try {
948
- return value === "undefined" ? void 0 : JSON.parse(value != null ? value : "");
949
- } catch (e) {
950
- console.log("parsing error on", { value });
951
- return void 0;
952
- }
953
- }
954
-
955
- // src/contexts/BreadCrumbContext.tsx
956
- import { jsx as jsx11 } from "react/jsx-runtime";
957
- var BreadCrumbContext = createContext5({});
958
- var BreadCrumbContextProvider = ({ children }) => {
959
- const [active, setActive] = useLocalStorage("@active", "");
960
- const [path, setPath] = useLocalStorage("@path", "/");
961
- const [goBack, setGoBack] = useLocalStorage("@goBack", false);
962
- const [pathChild, setPathChild] = useLocalStorage("@pathChild", "");
963
- const [routes, setRoutes] = useState6([]);
964
- return /* @__PURE__ */ jsx11(
965
- BreadCrumbContext.Provider,
966
- {
967
- value: {
968
- active,
969
- setActive,
970
- path,
971
- setPath,
972
- goBack,
973
- setGoBack,
974
- pathChild,
975
- setPathChild,
976
- routes,
977
- setRoutes
978
- },
979
- children
980
- }
981
- );
982
- };
983
-
984
- // src/contexts/DrawerContext.tsx
985
- import { createContext as createContext6, useState as useState7 } from "react";
986
- import { jsx as jsx12 } from "react/jsx-runtime";
987
- var DrawerContext = createContext6({});
988
- var DrawerContextProvider = ({ children }) => {
989
- const [active, setActive] = useState7(false);
990
- return /* @__PURE__ */ jsx12(DrawerContext.Provider, { value: { active, setActive }, children });
991
- };
992
-
993
- // src/contexts/HistoryContext.tsx
994
- import { createContext as createContext7 } from "react";
995
- import { jsx as jsx13 } from "react/jsx-runtime";
996
- var HistoryContext = createContext7({});
997
- var HistoryContextProvider = ({ children }) => {
998
- const [list, setList] = useLocalStorage("@list_paths", []);
999
- const updateList = (value) => {
1000
- setList(
1001
- (prev) => prev.concat({
1002
- path: value.path,
1003
- name: value.name,
1004
- date: /* @__PURE__ */ new Date()
1005
- })
1006
- );
1007
- };
1008
- return /* @__PURE__ */ jsx13(HistoryContext.Provider, { value: { list, updateList }, children });
1009
- };
1010
-
1011
- // src/contexts/SidebarMainContext.tsx
1012
- import { createContext as createContext8, useState as useState8 } from "react";
1013
- import { jsx as jsx14 } from "react/jsx-runtime";
1014
- var SidebarMainContext = createContext8({});
1015
- var SidebarMainContextProvider = ({ children }) => {
1016
- const [open2, setOpen] = useState8(true);
1017
- return /* @__PURE__ */ jsx14(SidebarMainContext.Provider, { value: { open: open2, setOpen }, children });
1018
- };
1019
-
1020
- // src/contexts/GlobalProvider.tsx
1021
- import { jsx as jsx15 } from "react/jsx-runtime";
1022
- function GlobalProvider({ children }) {
1023
- return /* @__PURE__ */ jsx15(HistoryContextProvider, { children: /* @__PURE__ */ jsx15(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx15(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx15(DrawerContextProvider, { children }) }) }) });
1024
- }
1025
-
1026
- // src/hooks/usePrevious.tsx
1027
- import { useEffect as useEffect9, useRef as useRef5 } from "react";
1028
- var usePrevious = (value) => {
1029
- const ref = useRef5();
1030
- useEffect9(() => {
1031
- ref.current = value;
1032
- });
1033
- return ref.current;
1034
- };
1035
-
1036
- // src/hooks/useStep.tsx
1037
- import { useCallback as useCallback2, useMemo as useMemo4, useState as useState9 } from "react";
1038
- var useStep = (maxStep) => {
1039
- const [currentStep, setCurrentStep] = useState9(1);
1040
- const canGoToNextStep = useMemo4(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
1041
- const canGoToPrevStep = useMemo4(() => currentStep - 1 >= 1, [currentStep]);
1042
- const setStep = useCallback2(
1043
- (step) => {
1044
- const newStep = step instanceof Function ? step(currentStep) : step;
1045
- if (newStep >= 1 && newStep <= maxStep) {
1046
- setCurrentStep(newStep);
1047
- return;
1048
- }
1049
- throw new Error("Step not valid");
1050
- },
1051
- [maxStep, currentStep]
1052
- );
1053
- const goToNextStep = useCallback2(() => {
1054
- if (canGoToNextStep) {
1055
- setCurrentStep((step) => step + 1);
1056
- }
1057
- }, [canGoToNextStep]);
1058
- const goToPrevStep = useCallback2(() => {
1059
- if (canGoToPrevStep) {
1060
- setCurrentStep((step) => step - 1);
1061
- }
1062
- }, [canGoToPrevStep]);
1063
- const reset = useCallback2(() => {
1064
- setCurrentStep(1);
1065
- }, []);
1066
- return [
1067
- currentStep,
1068
- {
1069
- goToNextStep,
1070
- goToPrevStep,
1071
- canGoToNextStep,
1072
- canGoToPrevStep,
1073
- setStep,
1074
- reset
1075
- }
1076
- ];
1077
- };
1078
-
1079
- // src/layout/AppBreadcrumb.tsx
1080
- import { useContext as useContext7, useEffect as useEffect10 } from "react";
1081
- import { MdClose } from "react-icons/md";
1082
- import { VscChevronRight } from "react-icons/vsc";
1083
- import { Link as Link3 } from "react-router-dom";
1084
-
1085
- // src/styled-components/breadcrumb.ts
1086
- import styled from "styled-components";
1087
- var Breadcrumb = styled.div`
1088
- font-family: 'Inter', sans-serif;
1089
- padding: 10px 0px;
1090
- text-transform: uppercase;
1091
- font-weight: bold;
1092
- font-size: 0.9rem;
1093
- color: #92190e;
1094
- display: flex;
1095
- justify-content: space-between;
1096
- align-items: center;
1097
- background-color: white;
1098
- align-items: center;
1099
-
1100
- .link {
1101
- color: #92190e;
1102
- &:hover {
1103
- color: #92190e;
1104
- cursor: pointer;
1105
- }
1106
- }
1107
- `;
1108
- var BreadCrumbTitle = styled.div`
1109
- font-family: 'Inter', sans-serif;
1110
- font-weight: bold;
1111
- font-size: 1.2rem !important;
1112
- color: #92190e;
1113
- margin-top: 15px;
1114
- `;
1115
- var TitlePage = styled.div`
1116
- font-family: 'Inter', sans-serif;
1117
- font-weight: bold;
1118
- font-size: 1.2rem !important;
1119
- color: #92190e;
1120
- margin-top: 15px;
1121
- `;
1122
-
1123
- // src/styled-components/menu.ts
1124
- import { Link } from "react-router-dom";
1125
- import styled2 from "styled-components";
1126
- var MenuItem2 = styled2(Link)`
1127
- text-decoration: none;
1128
- color: black;
1129
- display: flex;
1130
- justify-content: ${(props) => props.type === "col" ? "center" : "flex-start"};
1131
- align-items: center;
1132
- flex-direction: ${(props) => props.type === "col" ? "column" : "row"};
1133
- border: 1px solid transparent;
1134
- width: ${(props) => props.width ? props.width : "100px"};
1135
- padding: 10px;
1136
- text-decoration: none !important;
1137
- &:hover {
1138
- box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
1139
- }
1140
-
1141
- .icon {
1142
- width: 30px;
1143
- text-decoration: none;
1144
- }
1145
- .text {
1146
- text-align: center;
1147
- font-size: 12px;
1148
- text-decoration: none !important;
1149
- color: black;
1150
- margin-top: ${(props) => props.type === "col" ? "0px" : "15px"};
1151
- &:hover {
1152
- text-decoration: none !important;
1153
- }
1154
- }
1155
- `;
1156
- var MenuTitle = styled2.p`
1157
- font-size: 16px;
1158
- font-weight: bold !important;
1159
- `;
1160
-
1161
- // src/styled-components/navbar.ts
1162
- import styled3 from "styled-components";
1163
- var Navbar = styled3.nav`
1164
- background: ${(props) => {
1165
- return !props.gradient ? ` linear-gradient( 90.03deg, #92190e 80.71%, #f0b92c 107.21% ) !important` : `#92190e`;
1166
- }};
1167
- z-index: 10;
1168
- width: 100%;
1169
- max-width: 100vw;
1170
- display: flex;
1171
- justify-content: space-between;
1172
- padding-top: 10px;
1173
- padding-bottom: 10px;
1174
- position: sticky;
1175
- top: 0px;
1176
- height: 40px;
1177
- .input {
1178
- border-radius: 2px !important;
1179
- padding: 2px !important;
1180
- font-size: 12px !important;
1181
- height: 20px !important;
1182
- border: none;
1183
- &:focus {
1184
- outline: none !important;
1185
- }
1186
- ::placeholder {
1187
- color: #92190e;
1188
- }
1189
- @media (max-width: 470px) {
1190
- display: none;
1191
- }
1192
- }
1193
- .dialog {
1194
- z-index: 20000 !important;
1195
- position: absolute;
1196
- width: 400px;
1197
- height: 500px;
1198
- min-height: 500px;
1199
- overflow: scroll;
1200
- overflow-x: hidden;
1201
- min-width: 400px;
1202
- max-width: 400px;
1203
- background-color: white;
1204
- border-radius: 20px;
1205
- top: 50%;
1206
- left: 50%;
1207
- transform: translate(-50%, -50%);
1208
- }
1209
- `;
1210
-
1211
- // src/styled-components/options.ts
1212
- import styled4 from "styled-components";
1213
- var MenuOptions = styled4.div`
1214
- font-size: bold;
1215
- display: flex;
1216
- width: 100%;
1217
- gap: 10px;
1218
- justify-content: flex-start;
1219
- border-bottom: 1px solid #e6e6e6;
1220
- background-color: white;
1221
- flex-wrap: wrap;
1222
- .button-option {
1223
- display: flex;
1224
- flex-direction: row;
1225
- justify-content: space-between;
1226
- align-items: center;
1227
- gap: 5px;
1228
- padding: 10px 20px;
1229
- font-weight: bold;
1230
- background-color: white !important;
1231
- border: none;
1232
- .icon {
1233
- color: #92190e;
1234
- }
1235
- .text {
1236
- @media (max-width: 470px) {
1237
- display: none;
1238
- }
1239
- }
1240
- }
1241
- `;
1242
-
1243
- // src/styled-components/sidebar.ts
1244
- import { Link as Link2 } from "react-router-dom";
1245
- import styled5 from "styled-components";
1246
- var ItemSidebar = styled5.div`
1247
- padding: 10px 25px;
1248
- display: flex;
1249
- align-items: center;
1250
- gap: 30px;
1251
- font-family: 'Inter', sans-serif;
1252
- &:hover {
1253
- color: white !important;
1254
- text-decoration: none;
1255
- background: #92190e;
1256
- .icon-sidebar {
1257
- color: white !important;
1258
- }
1259
- }
1260
- &:active {
1261
- color: white !important;
1262
- text-decoration: none;
1263
- background: #92190e;
1264
- .icon-sidebar {
1265
- color: white !important;
1266
- }
1267
- }
1268
- `;
1269
- var SidebarNavigation = styled5.nav`
1270
- position: ${({ fixed = true }) => fixed ? "fixed" : "static"};
1271
- top: 0;
1272
- left: 0;
1273
- min-height: 100vh;
1274
- box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
1275
- -webkit-box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
1276
- -moz-box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
1277
- background: white;
1278
- font-family: 'Inter', sans-serif;
1279
- padding: 0;
1280
- width: ${({ fixed = true, active = true }) => fixed ? active ? "270px" : "0px" : "auto"};
1281
- z-index: 11;
1282
- transition: width 0.2s ease-in-out;
1283
-
1284
- overflow: hidden;
1285
- height: 100vh;
1286
- overflow-y: auto;
1287
- box-shadow: ${({ shadow = true }) => shadow ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" : "none"};
1288
-
1289
- &::-webkit-scrollbar {
1290
- display: none !important;
1291
- }
1292
- .nav {
1293
- flex-wrap: nowrap;
1294
- flex-direction: column;
1295
- font-size: 12px;
1296
-
1297
- .nav-item {
1298
- .collapse {
1299
- z-index: 999;
1300
- }
1301
-
1302
- .collapse.show,
1303
- .collapsing {
1304
- background: rgba(0, 0, 0);
1305
- }
1306
-
1307
- .nav-link {
1308
- align-items: center;
1309
- display: flex;
1310
- padding-left: 40px;
1311
- white-space: nowrap;
1312
-
1313
- color: #92190e;
1314
- i {
1315
- margin-right: 20px;
1316
- }
1317
- .menu-title {
1318
- color: inherit;
1319
- display: inline-block;
1320
- line-height: 1;
1321
- color: black;
1322
- vertical-align: middle;
1323
- cursor: pointer;
1324
- }
1325
- }
1326
-
1327
- &.active {
1328
- > .nav-link {
1329
- color: white;
1330
- }
1331
-
1332
- &.not-navigation-link {
1333
- position: relative;
1334
- }
1335
- }
1336
-
1337
- &:not(.sub-menu) {
1338
- > .nav-item {
1339
- &:hover {
1340
- &:not(.nav-profile) {
1341
- > .nav-link {
1342
- background: $sidebar-light-menu-hover-bg;
1343
- color: $sidebar-light-menu-hover-color;
1344
- }
1345
- }
1346
- }
1347
- }
1348
- }
1349
-
1350
- &.sub-menu {
1351
- margin-bottom: 0;
1352
- padding: $sidebar-submenu-padding;
1353
-
1354
- .rtl & {
1355
- padding: 0 4rem 0 0;
1356
- }
1357
-
1358
- .nav-item {
1359
- .nav-link {
1360
- color: $sidebar-light-submenu-color;
1361
- padding: $sidebar-submenu-item-padding;
1362
- font-size: $sidebar-submenu-font-size;
1363
- line-height: 1;
1364
- height: auto;
1365
-
1366
- &.active {
1367
- color: $sidebar-light-menu-active-color;
1368
- background: transparent;
1369
-
1370
- &:before {
1371
- background: $sidebar-light-menu-active-color;
1372
- }
1373
- }
1374
- }
1375
-
1376
- &:hover {
1377
- > .nav-link {
1378
- background: $sidebar-light-submenu-hover-bg;
1379
- color: $sidebar-light-submenu-hover-color;
1380
-
1381
- &:before {
1382
- background: $sidebar-light-submenu-hover-color;
1383
- }
1384
- }
1385
- }
1386
- }
1387
- }
1388
-
1389
- &.sub-menu2 {
1390
- margin-bottom: 0;
1391
- padding: $sidebar-submenu2-padding;
1392
-
1393
- .rtl & {
1394
- padding: 0 4rem 0 0;
1395
- }
1396
-
1397
- .nav-item {
1398
- .nav-link {
1399
- color: $sidebar-light-submenu-color;
1400
- padding: $sidebar-submenu-item-padding;
1401
- font-size: $sidebar-submenu-font-size;
1402
- line-height: 1;
1403
- height: auto;
1404
-
1405
- &.active {
1406
- color: $sidebar-light-menu-active-color;
1407
- background: transparent;
1408
-
1409
- &:before {
1410
- background: $sidebar-light-menu-active-color;
1411
- }
1412
- }
1413
- }
1414
-
1415
- &:hover {
1416
- > .nav-link {
1417
- background: $sidebar-light-submenu-hover-bg;
1418
- color: $sidebar-light-submenu-hover-color;
1419
-
1420
- &:before {
1421
- background: $sidebar-light-submenu-hover-color;
1422
- }
1423
- }
1424
- }
1425
- }
1426
- }
1427
- }
1428
- }
1429
- `;
1430
- var ConfigurationOption = styled5.nav`
1431
- position: fixed;
1432
- top: 50px;
1433
- right: 0;
1434
- min-height: 100vh;
1435
- box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
1436
- -webkit-box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
1437
- -moz-box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
1438
- min-height: calc(100vh);
1439
-
1440
- font-family: 'Inter', sans-serif;
1441
- padding: 0;
1442
- width: ${(props) => props.active ? "300px" : "0px"};
1443
- z-index: 11;
1444
- transition: width 0.2s ease-in-out;
1445
- overflow: hidden !important;
1446
- `;
1447
- var ItemLinkSidebar = styled5(Link2)`
1448
- padding: 10px 25px;
1449
- display: flex;
1450
- align-items: center;
1451
- gap: 30px;
1452
- color: #343a40;
1453
- text-decoration: none;
1454
- font-family: 'Inter', sans-serif;
1455
- &:hover {
1456
- color: white !important;
1457
- text-decoration: none;
1458
- background: #92190e;
1459
- .icon-sidebar {
1460
- color: white !important;
1461
- }
1462
- }
1463
- `;
1464
-
1465
- // src/styled-components/template.ts
1466
- import styled6 from "styled-components";
1467
- var Main = styled6.main`
1468
- width: 100%;
1469
- min-height: 90vh;
1470
- display: flex;
1471
- flex-direction: column;
1472
- justify-content: space-between;
1473
- background-color: white;
1474
- padding: 10px 60px;
1475
- position: relative;
1476
- padding-left: ${(props) => {
1477
- return props.activeDrawer ? `300px` : `30px`;
1478
- }};
1479
- @media (max-width: 470px) {
1480
- padding: 10px 10px;
1481
- }
1482
- `;
1483
- var CloseIcon = styled6.button`
1484
- color: black;
1485
- text-decoration: none;
1486
- border: none;
1487
- padding: 10px 10px;
1488
- background-color: white;
1489
- border-radius: 50%;
1490
- display: flex;
1491
- align-items: center;
1492
- justify-content: center;
1493
- cursor: pointer;
1494
- top: 10px;
1495
- right: 10px;
1496
- text-align: center;
1497
- &:hover {
1498
- color: black;
1499
- text-decoration: none;
1500
- background-color: #e8e8e8;
1501
- }
1502
- `;
1503
-
1504
- // src/layout/AppBreadcrumb.tsx
1505
- import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
1506
- var AppBreadCrumb = ({ title, paths }) => {
1507
- const { setRoutes } = useContext7(BreadCrumbContext);
1508
- useEffect10(() => {
1509
- if (!(paths == null ? void 0 : paths.length))
1510
- return;
1511
- setRoutes(paths != null ? paths : []);
1512
- }, []);
1513
- return /* @__PURE__ */ jsx16(BreadCrumbTitle, { children: title != null ? title : "Home" });
1514
- };
1515
- var AppBreadCrumbNav = ({
1516
- paths,
1517
- onPush
1518
- }) => {
1519
- const { active, path, routes, setRoutes } = useContext7(BreadCrumbContext);
1520
- const { updateList } = useContext7(HistoryContext);
1521
- useEffect10(() => {
1522
- updateList({ name: active, path });
1523
- }, [path, active]);
1524
- useEffect10(() => {
1525
- setRoutes(paths != null ? paths : []);
1526
- }, [paths]);
1527
- return /* @__PURE__ */ jsxs10(Breadcrumb, { children: [
1528
- /* @__PURE__ */ jsxs10("div", { className: "d-flex align-items-center", children: [
1529
- /* @__PURE__ */ jsx16(Link3, { to: "/", className: "link", children: "HOME" }),
1530
- routes.length > 0 && /* @__PURE__ */ jsx16(VscChevronRight, { color: "black" }),
1531
- routes.length > 0 ? routes.map((i, idx, arr) => {
1532
- if (i.route === -1) {
1533
- return /* @__PURE__ */ jsxs10("span", { className: "link", onClick: () => onPush(-1), children: [
1534
- i.title,
1535
- " ",
1536
- idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx16(VscChevronRight, { color: "black" })
1537
- ] }, idx);
1538
- }
1539
- return /* @__PURE__ */ jsxs10(Link3, { to: i.route, className: "link", children: [
1540
- i.title,
1541
- " ",
1542
- idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx16(VscChevronRight, { color: "black" })
1543
- ] }, idx);
1544
- }) : ""
1545
- ] }),
1546
- /* @__PURE__ */ jsx16(
1547
- CloseIcon,
1548
- {
1549
- onClick: () => {
1550
- if ((routes == null ? void 0 : routes.length) === 1) {
1551
- onPush("/");
1552
- setRoutes([]);
1553
- return;
1554
- }
1555
- onPush(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
1556
- },
1557
- children: /* @__PURE__ */ jsx16(MdClose, { fontSize: 20 })
1558
- }
1559
- )
1560
- ] });
1561
- };
1562
-
1563
- // src/layout/AppLoader.tsx
1564
- import { useEffect as useEffect11 } from "react";
1565
- import ReactDOM from "react-dom";
1566
- import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
1567
- var LoaderGrid = () => {
1568
- const Loader = /* @__PURE__ */ jsxs11("div", { className: "k-loading-mask", children: [
1569
- /* @__PURE__ */ jsx17("span", { className: "k-loading-text", children: "Loading" }),
1570
- /* @__PURE__ */ jsx17("div", { className: "k-loading-image" }),
1571
- /* @__PURE__ */ jsx17("div", { className: "k-loading-color" })
1572
- ] });
1573
- const gridContent = document && document.querySelector(".k-grid-content");
1574
- const reportContent = document && document.querySelector(".loading-report");
1575
- return gridContent ? ReactDOM.createPortal(Loader, gridContent) : reportContent ? ReactDOM.createPortal(Loader, reportContent) : Loader;
1576
- };
1577
- var AppLoader = (props) => {
1578
- const { type = "grid", parent, minDuration } = props;
1579
- const parentEl = type === "grid" ? document.querySelector(parent != null ? parent : ".k-grid-container") : parent ? document.querySelector(parent) : null;
1580
- const Loading = /* @__PURE__ */ jsxs11("div", { className: `${type}-loading k-loading-mask`, children: [
1581
- /* @__PURE__ */ jsx17("span", { className: "k-loading-text", children: "Loading" }),
1582
- /* @__PURE__ */ jsx17("div", { className: "k-loading-image" }),
1583
- /* @__PURE__ */ jsx17("div", { className: "k-loading-color" })
1584
- ] });
1585
- useEffect11(() => {
1586
- if (type === "button") {
1587
- const loadingEl = document.createElement("div");
1588
- loadingEl.className = "icon button-loading k-loading-mask";
1589
- loadingEl.innerHTML = `
1590
- <div class="k-loading-image"></div>
1591
- `;
1592
- if (parentEl) {
1593
- const button = parentEl;
1594
- button.classList.add("btn-loading");
1595
- button.disabled = true;
1596
- button.insertBefore(loadingEl, button.firstChild);
1597
- }
1598
- return () => {
1599
- if (parentEl) {
1600
- if (minDuration) {
1601
- setTimeout(() => {
1602
- const button = parentEl;
1603
- button.classList.remove("btn-loading");
1604
- button.removeChild(loadingEl);
1605
- button.disabled = false;
1606
- }, minDuration);
1607
- } else {
1608
- const button = parentEl;
1609
- button.classList.remove("btn-loading");
1610
- button.removeChild(loadingEl);
1611
- button.disabled = false;
1612
- }
1613
- }
1614
- };
1615
- }
1616
- }, []);
1617
- return type === "button" ? null : parentEl ? ReactDOM.createPortal(Loading, parentEl) : Loading;
1618
- };
1619
-
1620
- // src/layout/NavOptions.tsx
1621
- import { Dropdown } from "react-bootstrap";
1622
- import { BsArrowsFullscreen } from "react-icons/bs";
1623
- import { FiCheckCircle, FiFilter, FiPlusSquare, FiRefreshCcw, FiSave } from "react-icons/fi";
1624
- import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
1625
- var NavOptions = ({
1626
- exportExcel,
1627
- customButtons,
1628
- onCreate,
1629
- onRefresh,
1630
- onSelect,
1631
- onClear,
1632
- onExpandScreen
1633
- }) => {
1634
- return /* @__PURE__ */ jsxs12(MenuOptions, { children: [
1635
- onCreate && /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: onCreate, children: [
1636
- /* @__PURE__ */ jsx18(FiPlusSquare, { className: "icon" }),
1637
- " ",
1638
- /* @__PURE__ */ jsx18("span", { className: "text", children: "New" })
1639
- ] }),
1640
- onRefresh && /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: onRefresh, children: [
1641
- /* @__PURE__ */ jsx18(FiRefreshCcw, { className: "icon" }),
1642
- " ",
1643
- /* @__PURE__ */ jsx18("span", { className: "text", children: "Refresh" })
1644
- ] }),
1645
- exportExcel && exportExcel.length > 0 && /* @__PURE__ */ jsxs12(Dropdown, { className: "button-option", children: [
1646
- /* @__PURE__ */ jsxs12(
1647
- Dropdown.Toggle,
1648
- {
1649
- id: "btnExport",
1650
- className: "p-2 bg-light text-dark border-0 font-weight-bold",
1651
- title: "Export to Excel",
1652
- children: [
1653
- /* @__PURE__ */ jsx18(FiSave, { className: "icon" }),
1654
- /* @__PURE__ */ jsx18(
1655
- "span",
1656
- {
1657
- style: {
1658
- fontSize: "13px",
1659
- fontFamily: '"Inter", sans-serif'
1660
- },
1661
- className: "text",
1662
- children: "Export"
1663
- }
1664
- )
1665
- ]
1666
- }
1667
- ),
1668
- /* @__PURE__ */ jsx18(Dropdown.Menu, { children: exportExcel.map((item, index) => {
1669
- return /* @__PURE__ */ jsxs12(Dropdown.Item, { onClick: item.onAction, children: [
1670
- /* @__PURE__ */ jsx18("i", { className: `${item.classNameIcon} mr-2` }),
1671
- " ",
1672
- item.title
1673
- ] }, index);
1674
- }) })
1675
- ] }),
1676
- onSelect && /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: onSelect, children: [
1677
- /* @__PURE__ */ jsx18(FiCheckCircle, { className: "icon" }),
1678
- " ",
1679
- /* @__PURE__ */ jsx18("span", { className: "text", children: "Select All" })
1680
- ] }),
1681
- onClear && /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: onClear, children: [
1682
- /* @__PURE__ */ jsx18(FiFilter, { className: "icon" }),
1683
- " ",
1684
- /* @__PURE__ */ jsx18("span", { className: "text", children: "Clear Filters" })
1685
- ] }),
1686
- onExpandScreen && /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: onExpandScreen, children: [
1687
- /* @__PURE__ */ jsx18(BsArrowsFullscreen, { className: "icon" }),
1688
- " ",
1689
- /* @__PURE__ */ jsx18("span", { className: "text", children: "Full Page" })
1690
- ] }),
1691
- customButtons == null ? void 0 : customButtons.map((custom, index) => {
1692
- if (custom.render) {
1693
- return custom.render;
1694
- }
1695
- return /* @__PURE__ */ jsxs12("button", { className: "button-option", onClick: custom.onAction, children: [
1696
- custom.Icon !== void 0 && /* @__PURE__ */ jsx18(custom.Icon, { className: "icon" }),
1697
- /* @__PURE__ */ jsx18("span", { className: "text", children: custom.title })
1698
- ] }, index);
1699
- })
1700
- ] });
1701
- };
1702
-
1703
- // src/layout/title.tsx
1704
- import { jsx as jsx19 } from "react/jsx-runtime";
1705
- var Title = ({ title }) => {
1706
- return /* @__PURE__ */ jsx19(TitlePage, { children: title != null ? title : "Home" });
1707
- };
1708
- export {
1709
- AppBreadCrumb,
1710
- AppBreadCrumbNav,
1711
- AppLoader,
1712
- Badge_default as Badge,
1713
- BreadCrumbContext,
1714
- BreadCrumbContextProvider,
1715
- BreadCrumbTitle,
1716
- Breadcrumb,
1717
- Button,
1718
- Chip_default as Chip,
1719
- CloseIcon,
1720
- Collapse_default as Collapse,
1721
- CollapseContent_default as CollapseContent,
1722
- CollapseContext_default as CollapseContext,
1723
- CollapseTrigger_default as CollapseTrigger,
1724
- DrawerContext,
1725
- DrawerContextProvider,
1726
- DropEnumList,
1727
- GlobalProvider,
1728
- HistoryContext,
1729
- HistoryContextProvider,
1730
- ItemLinkSidebar,
1731
- ItemSidebar,
1732
- LoaderGrid,
1733
- Main,
1734
- Menu_default as Menu,
1735
- MenuContext_default as MenuContext,
1736
- MenuGroup_default as MenuGroup,
1737
- MenuItem_default as MenuItem,
1738
- MenuItem2 as MenuItems,
1739
- MenuOptions,
1740
- MenuSubmenu_default as MenuSubmenu,
1741
- MenuTitle,
1742
- MenuValueContext_default as MenuValueContext,
1743
- NavOptions,
1744
- Navbar,
1745
- SidebarMainContext,
1746
- SidebarMainContextProvider,
1747
- SidebarNavigation,
1748
- Tab,
1749
- Tabs,
1750
- Title,
1751
- getOpenValuesByPathname,
1752
- useCollapse,
1753
- useLocalStorage,
1754
- useMenu,
1755
- useMenuItemValue,
1756
- usePrevious,
1757
- useStep
1758
- };