@isettingkit/business-rules 0.1.19 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.es.d.ts +4 -2
  2. package/dist/index.es.js +545 -403
  3. package/package.json +6 -3
package/dist/index.es.d.ts CHANGED
@@ -7,14 +7,16 @@ export declare const BusinessRuleView: (props: IBusinessRuleView) => JSX_2.Eleme
7
7
 
8
8
  export declare interface IBusinessRuleCard {
9
9
  children: React.ReactNode;
10
+ controls?: boolean;
10
11
  handleDelete: (id: string) => void;
11
12
  handleView: (id: string) => void;
12
13
  id: string;
13
14
  }
14
15
 
15
16
  export declare interface IBusinessRuleView {
16
- decision: IRuleDecision;
17
- textValues: IRulesFormTextValues;
17
+ decision?: IRuleDecision;
18
+ loading?: boolean;
19
+ textValues?: IRulesFormTextValues;
18
20
  }
19
21
 
20
22
  export declare interface IRulesForm {
package/dist/index.es.js CHANGED
@@ -1,93 +1,143 @@
1
- import { jsxs as g, jsx as n, Fragment as j } from "react/jsx-runtime";
2
- import { useFormik as Q } from "formik";
3
- import { useState as x, useEffect as q } from "react";
4
- import { Divider as E } from "@inubekit/divider";
5
- import { Stack as o } from "@inubekit/stack";
6
- import { Text as y } from "@inubekit/text";
7
- import { Toggle as P } from "@inubekit/toggle";
8
- import { ValueHowToSetUp as f, ValueDataType as A, DecisionConditionRenderer as M } from "@isettingkit/input";
9
- import { Textarea as Z } from "@inubekit/textarea";
10
- import { Date as z } from "@inubekit/date";
11
- import { Checkbox as J } from "@inubekit/checkbox";
12
- import { Button as L } from "@inubekit/button";
13
- import { object as $, string as H, number as F, mixed as I } from "yup";
14
- import { DecisionViewConditionRenderer as V } from "@isettingkit/view";
15
- import { MdOutlineRemoveRedEye as K, MdOutlineDelete as W } from "react-icons/md";
16
- import { Icon as N } from "@inubekit/icon";
17
- import { inube as X } from "@inubekit/foundations";
18
- import B from "styled-components";
19
- const Y = (t) => {
20
- const {
21
- label: e,
22
- labelText: a,
23
- onHandleChange: i,
24
- placeholder: l,
25
- required: c,
26
- value: m = ""
27
- } = t, [d, b] = x(m);
28
- return /* @__PURE__ */ g(o, { direction: "column", margin: "10px 4px", children: [
29
- /* @__PURE__ */ n(y, { size: "large", appearance: "gray", weight: "bold", margin: "10px 0", children: a }),
30
- /* @__PURE__ */ n(o, { margin: "10px 0", children: /* @__PURE__ */ n(
31
- Z,
32
- {
33
- id: "reasonChange",
34
- label: e,
35
- onChange: (p) => {
36
- b(p.target.value), i(p);
37
- },
38
- placeholder: l,
39
- required: c,
40
- value: d,
41
- maxLength: 120,
42
- fullwidth: !0
43
- }
44
- ) })
45
- ] });
46
- }, ee = (t) => {
1
+ import { jsxs as p, Fragment as R, jsx as n } from "react/jsx-runtime";
2
+ import { useFormik as ee } from "formik";
3
+ import { useState as y, useEffect as Q } from "react";
4
+ import { Divider as C } from "@inubekit/divider";
5
+ import { Stack as u } from "@inubekit/stack";
6
+ import { Text as D } from "@inubekit/text";
7
+ import { Toggle as Z } from "@inubekit/toggle";
8
+ import { ValueHowToSetUp as m, ValueDataType as I, DecisionConditionRenderer as z } from "@isettingkit/input";
9
+ import { Button as _ } from "@inubekit/button";
10
+ import { object as J, string as L, number as N, mixed as H } from "yup";
11
+ import { Date as q } from "@inubekit/date";
12
+ import { Checkbox as te } from "@inubekit/checkbox";
13
+ import { inube as V } from "@inubekit/foundations";
14
+ import x, { keyframes as K, css as W } from "styled-components";
15
+ import { DecisionViewConditionRenderer as F } from "@isettingkit/view";
16
+ import { MdOutlineEdit as ne, MdOutlineDelete as re } from "react-icons/md";
17
+ import { Icon as G } from "@inubekit/icon";
18
+ const P = (t) => {
19
+ if ("value" in t && "valueUse" in t && t.value !== void 0) {
20
+ const e = t.value, a = typeof e == "object" && "from" in e && typeof e.from == "number" ? e.from : 0, o = typeof e == "object" && "to" in e && typeof e.to == "number" ? e.to : 1 / 0;
21
+ switch (t.valueUse) {
22
+ case m.LIST_OF_VALUES:
23
+ return {
24
+ schema: H().test(
25
+ "isArrayOrString",
26
+ "Must be an array of strings/numbers or a single string",
27
+ (l) => Array.isArray(l) ? l.every(
28
+ (s) => typeof s == "string" || typeof s == "number"
29
+ ) : typeof l == "string"
30
+ ),
31
+ value: e
32
+ };
33
+ case m.LIST_OF_VALUES_MULTI:
34
+ return {
35
+ schema: H().test(
36
+ "isArrayOrString",
37
+ "Must be an array of strings/numbers or a single string",
38
+ (l) => Array.isArray(l) ? l.every(
39
+ (s) => typeof s == "string" || typeof s == "number"
40
+ ) : typeof l == "string"
41
+ ),
42
+ value: e
43
+ };
44
+ case m.RANGE:
45
+ return {
46
+ schema: J({
47
+ from: N().required("Range From is required").max(o, "'Range From' cannot be greater than 'Range To'").min(0, "'Range From' cannot be less than 0"),
48
+ to: N().required("Range To is required").min(a, "'Range To' cannot be less than 'Range From'").min(0, "'Range To' cannot be less than 0")
49
+ }),
50
+ value: {
51
+ from: a,
52
+ to: o
53
+ }
54
+ };
55
+ case m.GREATER_THAN:
56
+ case m.LESS_THAN:
57
+ case m.EQUAL:
58
+ return t.dataType === I.PERCENTAGE ? {
59
+ schema: N().required("Percentage is required").min(0, "Percentage cannot be less than 0").max(100, "Percentage cannot be greater than 100"),
60
+ value: e
61
+ } : {
62
+ schema: L().required("Required"),
63
+ value: e
64
+ };
65
+ default:
66
+ return {
67
+ schema: L(),
68
+ value: void 0
69
+ };
70
+ }
71
+ }
72
+ }, ae = (t) => {
73
+ const e = {}, a = {};
74
+ if (t) {
75
+ const o = P(t);
76
+ o && (e[t.name] = o.schema, a[t.name] = o.value);
77
+ }
78
+ return t.conditions && t.conditions.forEach((o) => {
79
+ const l = P(o);
80
+ l && (e[o.name] = l.schema, a[o.name] = l.value);
81
+ }), { validationSchema: J().shape(e), initialValues: a };
82
+ }, M = (t) => {
83
+ if (typeof t == "string")
84
+ return t;
85
+ if (typeof t == "object" && ("from" in t || "to" in t))
86
+ return {
87
+ from: t.from || "",
88
+ to: t.to || ""
89
+ };
90
+ for (const e in t)
91
+ if (Object.prototype.hasOwnProperty.call(t, e)) {
92
+ const a = M(t[e]);
93
+ if (a) return a;
94
+ }
95
+ return "";
96
+ }, oe = (t) => {
47
97
  const {
48
98
  checked: e,
49
99
  children: a,
50
- handleToggleChange: i,
100
+ handleToggleChange: o,
51
101
  id: l,
52
- labelToggle: c,
53
- name: m,
102
+ labelToggle: s,
103
+ name: c,
54
104
  valueToggle: d = ""
55
- } = t, [b, C] = x(e), p = (v) => {
56
- C(v.target.checked), i(v);
105
+ } = t, [g, h] = y(e), b = (f) => {
106
+ h(f.target.checked), o(f);
57
107
  };
58
- return q(() => {
59
- C(e);
60
- }, [e]), /* @__PURE__ */ g(j, { children: [
61
- /* @__PURE__ */ n(o, { children: /* @__PURE__ */ n(
62
- P,
108
+ return Q(() => {
109
+ h(e);
110
+ }, [e]), /* @__PURE__ */ p(R, { children: [
111
+ /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
112
+ Z,
63
113
  {
64
- checked: b,
114
+ checked: g,
65
115
  id: l,
66
116
  margin: "10px",
67
- name: m,
68
- onChange: p,
117
+ name: c,
118
+ onChange: b,
69
119
  size: "small",
70
120
  value: d,
71
- children: /* @__PURE__ */ n(y, { size: "medium", type: "label", weight: "bold", children: c })
121
+ children: /* @__PURE__ */ n(D, { size: "medium", type: "label", weight: "bold", children: s })
72
122
  }
73
123
  ) }),
74
- b && /* @__PURE__ */ n(j, { children: a })
124
+ g && /* @__PURE__ */ n(R, { children: a })
75
125
  ] });
76
- }, ne = (t) => {
126
+ }, ie = (t) => {
77
127
  const {
78
128
  onHandleStartChange: e,
79
129
  onHandleEndChange: a,
80
- labelStart: i,
130
+ labelStart: o,
81
131
  labelEnd: l,
82
- checkedClosed: c = !1,
83
- required: m = !1,
132
+ checkedClosed: s = !1,
133
+ required: c = !1,
84
134
  valueStart: d = "",
85
- valueEnd: b = ""
86
- } = t, [C, p] = x(c), [v, w] = x(d), [S, T] = x(b);
87
- return /* @__PURE__ */ g(j, { children: [
88
- /* @__PURE__ */ g(o, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
89
- /* @__PURE__ */ n(o, { children: /* @__PURE__ */ n(
90
- y,
135
+ valueEnd: g = ""
136
+ } = t, [h, b] = y(s), [f, E] = y(d), [w, S] = y(g);
137
+ return /* @__PURE__ */ p(R, { children: [
138
+ /* @__PURE__ */ p(u, { direction: "row", justifyContent: "space-between", margin: "10px 0", children: [
139
+ /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
140
+ D,
91
141
  {
92
142
  appearance: "gray",
93
143
  margin: "10px 0",
@@ -98,254 +148,193 @@ const Y = (t) => {
98
148
  }
99
149
  ) }),
100
150
  /* @__PURE__ */ n(
101
- o,
151
+ u,
102
152
  {
103
153
  alignContent: "center",
104
154
  justifyContent: "center",
105
155
  wrap: "wrap",
106
156
  gap: "4px",
107
157
  children: /* @__PURE__ */ n(
108
- J,
158
+ te,
109
159
  {
110
160
  label: "Cerrada",
111
- onChange: ({ target: s }) => {
112
- p(s.checked);
161
+ onChange: ({ target: i }) => {
162
+ b(i.checked);
113
163
  },
114
- checked: C,
164
+ checked: h,
115
165
  value: ""
116
166
  }
117
167
  )
118
168
  }
119
169
  )
120
170
  ] }),
121
- /* @__PURE__ */ g(o, { justifyContent: "space-between", gap: "24px", children: [
122
- /* @__PURE__ */ n(o, { width: "189px", children: /* @__PURE__ */ n(
123
- z,
171
+ /* @__PURE__ */ p(u, { justifyContent: "space-between", gap: "24px", children: [
172
+ /* @__PURE__ */ n(u, { width: "189px", children: /* @__PURE__ */ n(
173
+ q,
124
174
  {
125
175
  id: "dateStart",
126
- label: i,
127
- onChange: (s) => {
128
- w(s.target.value), e(s);
176
+ label: o,
177
+ onChange: (i) => {
178
+ E(i.target.value), e(i);
129
179
  },
130
- value: v,
131
- required: m,
180
+ value: f,
181
+ required: c,
132
182
  size: "compact"
133
183
  }
134
184
  ) }),
135
- C && /* @__PURE__ */ n(o, { width: "189px", children: /* @__PURE__ */ n(
136
- z,
185
+ h && /* @__PURE__ */ n(u, { width: "189px", children: /* @__PURE__ */ n(
186
+ q,
137
187
  {
138
188
  id: "dateEnd",
139
189
  label: l,
140
- onChange: (s) => {
141
- T(s.target.value), a(s);
190
+ onChange: (i) => {
191
+ S(i.target.value), a(i);
142
192
  },
143
- value: S,
144
- required: m,
193
+ value: w,
194
+ required: c,
145
195
  size: "compact"
146
196
  }
147
197
  ) })
148
198
  ] })
149
199
  ] });
150
- }, _ = (t) => {
151
- if ("value" in t && "valueUse" in t && t.value !== void 0) {
152
- const e = t.value, a = typeof e == "object" && "from" in e && typeof e.from == "number" ? e.from : 0, i = typeof e == "object" && "to" in e && typeof e.to == "number" ? e.to : 1 / 0;
153
- switch (t.valueUse) {
154
- case f.LIST_OF_VALUES:
155
- return {
156
- schema: I().test(
157
- "isArrayOrString",
158
- "Must be an array of strings/numbers or a single string",
159
- (l) => Array.isArray(l) ? l.every(
160
- (c) => typeof c == "string" || typeof c == "number"
161
- ) : typeof l == "string"
162
- ),
163
- value: e
164
- };
165
- case f.LIST_OF_VALUES_MULTI:
166
- return {
167
- schema: I().test(
168
- "isArrayOrString",
169
- "Must be an array of strings/numbers or a single string",
170
- (l) => Array.isArray(l) ? l.every(
171
- (c) => typeof c == "string" || typeof c == "number"
172
- ) : typeof l == "string"
173
- ),
174
- value: e
175
- };
176
- case f.RANGE:
177
- return {
178
- schema: $({
179
- from: F().required("Range From is required").max(i, "'Range From' cannot be greater than 'Range To'").min(0, "'Range From' cannot be less than 0"),
180
- to: F().required("Range To is required").min(a, "'Range To' cannot be less than 'Range From'").min(0, "'Range To' cannot be less than 0")
181
- }),
182
- value: {
183
- from: a,
184
- to: i
185
- }
186
- };
187
- case f.GREATER_THAN:
188
- case f.LESS_THAN:
189
- case f.EQUAL:
190
- return t.dataType === A.PERCENTAGE ? {
191
- schema: F().required("Percentage is required").min(0, "Percentage cannot be less than 0").max(100, "Percentage cannot be greater than 100"),
192
- value: e
193
- } : {
194
- schema: H().required("Required"),
195
- value: e
196
- };
197
- default:
198
- return {
199
- schema: H(),
200
- value: void 0
201
- };
202
- }
200
+ }, le = x.div`
201
+ & > div {
202
+ border-radius: 8px;
203
+ border: 1px solid ${V.palette.neutral.N30};
203
204
  }
204
- }, te = (t) => {
205
- const e = {}, a = {};
206
- if (t) {
207
- const i = _(t);
208
- i && (e[t.name] = i.schema, a[t.name] = i.value);
205
+ `, de = x.div`
206
+ width: 100%;
207
+ height: 100%;
208
+ overflow-y: auto;
209
+ &::-webkit-scrollbar {
210
+ width: 4px;
209
211
  }
210
- return t.conditions && t.conditions.forEach((i) => {
211
- const l = _(i);
212
- l && (e[i.name] = l.schema, a[i.name] = l.value);
213
- }), { validationSchema: $().shape(e), initialValues: a };
214
- }, U = (t) => {
215
- if (typeof t == "string")
216
- return t;
217
- if (typeof t == "object" && ("from" in t || "to" in t))
218
- return {
219
- from: t.from || "",
220
- to: t.to || ""
221
- };
222
- for (const e in t)
223
- if (Object.prototype.hasOwnProperty.call(t, e)) {
224
- const a = U(t[e]);
225
- if (a) return a;
226
- }
227
- return "";
228
- }, ae = (t) => {
212
+
213
+ &::-webkit-scrollbar-thumb {
214
+ background-color: #c1c7d0;
215
+ border-radius: 8px;
216
+ }
217
+
218
+ &::-webkit-scrollbar-track {
219
+ background-color: #ebecf0;
220
+ border-radius: 8px;
221
+ }
222
+ `, ce = (t) => {
229
223
  const {
230
224
  decision: e,
231
225
  formik: a,
232
- onChangeCondition: i,
226
+ onChangeCondition: o,
233
227
  onChangeDecision: l,
234
- onStartChange: c,
235
- onEndChange: m,
228
+ onStartChange: s,
229
+ onEndChange: c,
236
230
  textValues: d,
237
- onCancel: b,
238
- onSubmit: C
239
- } = t, [p, v] = x(!1), [w, S] = x(!0), T = {
231
+ onCancel: g,
232
+ onSubmit: h
233
+ } = t, [b, f] = y(!0), [E] = y(!0), w = {
240
234
  name: e.name,
241
235
  dataType: e.dataType,
242
236
  value: e.value,
243
237
  valueUse: e.valueUse,
244
238
  possibleValue: e.possibleValue
245
239
  };
246
- q(() => {
240
+ Q(() => {
247
241
  console.log("Updated formik.errors in RulesFormUI:", a.errors);
248
242
  }, [a.errors]);
249
- const k = (r) => {
250
- v(r.target.checked);
251
- }, D = (r) => {
252
- r.target.value ? S(!1) : S(!0);
253
- }, u = (r) => {
254
- const h = U(a.errors[r] || {});
255
- return typeof h == "string" ? h ? "invalid" : "pending" : h;
256
- }, s = (r) => {
257
- const h = U(a.errors[r] || {});
258
- return h;
243
+ const S = (r) => {
244
+ f(r.target.checked);
245
+ }, k = (r) => {
246
+ const i = M(a.errors[r] || {});
247
+ return typeof i == "string" ? i ? "invalid" : "pending" : i;
248
+ }, T = (r) => {
249
+ const i = M(a.errors[r] || {});
250
+ return i;
259
251
  };
260
- return /* @__PURE__ */ g(o, { direction: "column", gap: "24px", children: [
261
- /* @__PURE__ */ g(o, { direction: "column", gap: "16px", children: [
262
- /* @__PURE__ */ n(y, { weight: "bold", size: "medium", children: d.criteria }),
263
- e && /* @__PURE__ */ n(
264
- M,
265
- {
266
- element: T,
267
- onDecision: l,
268
- valueData: a.values[e.name],
269
- message: a.errors[e.name],
270
- status: u(e.name),
271
- textValues: {
272
- selectOptions: "Select an option",
273
- selectOption: "Option selected",
274
- rangeMin: (r) => `Minimum ${r}`,
275
- rangeMax: (r) => `Maximum ${r}`
276
- }
252
+ return /* @__PURE__ */ p(u, { direction: "column", gap: "24px", children: [
253
+ e && /* @__PURE__ */ n(
254
+ z,
255
+ {
256
+ element: w,
257
+ onDecision: l,
258
+ valueData: a.values[e.name],
259
+ message: a.errors[e.name],
260
+ status: k(e.name),
261
+ textValues: {
262
+ selectOptions: "Select an option",
263
+ selectOption: "Option selected",
264
+ rangeMin: (r) => `Minimum ${r}`,
265
+ rangeMax: (r) => `Maximum ${r}`
277
266
  }
278
- )
279
- ] }),
280
- /* @__PURE__ */ n(E, { dashed: !0 }),
281
- /* @__PURE__ */ g(o, { direction: "column", children: [
282
- /* @__PURE__ */ g(o, { direction: "row", gap: "16px", justifyContent: "space-between", children: [
283
- /* @__PURE__ */ n(y, { children: d.factsThatConditionIt }),
284
- /* @__PURE__ */ n(
285
- P,
286
- {
287
- id: "toogleNone",
288
- onChange: k,
289
- checked: p,
290
- size: "small",
291
- children: /* @__PURE__ */ n(y, { size: "medium", type: "label", weight: "bold", children: d.none })
292
- }
293
- )
294
- ] }),
295
- e.conditions && e.conditions.map((r) => /* @__PURE__ */ n(o, { direction: "column", children: /* @__PURE__ */ n(
296
- ee,
297
- {
298
- checked: !p,
299
- handleToggleChange: (h) => {
300
- h.target.checked || i(
267
+ }
268
+ ),
269
+ /* @__PURE__ */ n(C, { dashed: !0 }),
270
+ /* @__PURE__ */ n(le, { children: /* @__PURE__ */ n(de, { children: /* @__PURE__ */ p(
271
+ u,
272
+ {
273
+ direction: "column",
274
+ padding: "6px 12px",
275
+ gap: "16px",
276
+ height: "272px",
277
+ children: [
278
+ /* @__PURE__ */ p(u, { direction: "row", justifyContent: "space-between", children: [
279
+ /* @__PURE__ */ n(D, { children: d.factsThatConditionIt }),
280
+ /* @__PURE__ */ n(
281
+ Z,
301
282
  {
302
- value: "",
303
- to: 0,
304
- from: 0,
305
- list: r.possibleValue.list
306
- },
307
- r.name
308
- );
309
- },
310
- id: r.name.replace(" ", ""),
311
- labelToggle: r.name.split(/(?=[A-Z])/).join(" "),
312
- name: r.name.replace(" ", ""),
313
- children: /* @__PURE__ */ n(
314
- M,
315
- {
316
- element: r,
317
- onDecision: i,
318
- valueData: a.values[r.name],
319
- message: s(r.name),
320
- status: u(r.name),
321
- textValues: {
322
- selectOptions: "Select an option",
323
- selectOption: "Option selected",
324
- rangeMin: (h) => `Minimum ${h}`,
325
- rangeMax: (h) => `Maximum ${h}`
283
+ id: "toogleNone",
284
+ onChange: S,
285
+ checked: b,
286
+ size: "small",
287
+ children: /* @__PURE__ */ n(D, { size: "medium", type: "label", weight: "bold", children: d.none })
326
288
  }
327
- }
328
- )
329
- }
330
- ) }, r.name))
331
- ] }),
332
- /* @__PURE__ */ n(E, { dashed: !0 }),
333
- /* @__PURE__ */ n(o, { direction: "column", children: /* @__PURE__ */ n(
334
- Y,
335
- {
336
- label: d.reasonForChange,
337
- labelText: d.change,
338
- onHandleChange: D,
339
- placeholder: d.changePlaceholder,
340
- required: !0
289
+ )
290
+ ] }),
291
+ /* @__PURE__ */ n(u, { direction: "column", gap: "20px", children: e.conditions && e.conditions.filter((r) => !r.hidden).map((r) => /* @__PURE__ */ n(
292
+ oe,
293
+ {
294
+ checked: !b,
295
+ handleToggleChange: (i) => {
296
+ i.target.checked || o(
297
+ {
298
+ value: "",
299
+ to: 0,
300
+ from: 0,
301
+ list: r.possibleValue.list
302
+ },
303
+ r.name
304
+ );
305
+ },
306
+ id: r.name.replace(" ", ""),
307
+ labelToggle: r.name.split(/(?=[A-Z])/).join(" "),
308
+ name: r.name.replace(" ", ""),
309
+ children: /* @__PURE__ */ n(
310
+ z,
311
+ {
312
+ element: r,
313
+ onDecision: o,
314
+ valueData: a.values[r.name],
315
+ message: T(r.name),
316
+ status: k(r.name),
317
+ textValues: {
318
+ selectOptions: "Select an option",
319
+ selectOption: "Option selected",
320
+ rangeMin: (i) => `Minimum ${i}`,
321
+ rangeMax: (i) => `Maximum ${i}`
322
+ },
323
+ type: "condition"
324
+ }
325
+ )
326
+ },
327
+ r.name
328
+ )) })
329
+ ]
341
330
  }
342
- ) }),
343
- /* @__PURE__ */ n(E, { dashed: !0 }),
344
- /* @__PURE__ */ n(o, { direction: "column", children: e && /* @__PURE__ */ n(
345
- ne,
331
+ ) }) }),
332
+ /* @__PURE__ */ n(C, { dashed: !0 }),
333
+ /* @__PURE__ */ n(u, { direction: "column", children: e && /* @__PURE__ */ n(
334
+ ie,
346
335
  {
347
- onHandleStartChange: (r) => c(r.target.value),
348
- onHandleEndChange: (r) => m(r.target.value),
336
+ onHandleStartChange: (r) => s(r.target.value),
337
+ onHandleEndChange: (r) => c(r.target.value),
349
338
  labelStart: d.termStart,
350
339
  labelEnd: d.termEnd,
351
340
  checkedClosed: !!e.endDate,
@@ -353,89 +342,89 @@ const Y = (t) => {
353
342
  valueEnd: String(e.endDate) || ""
354
343
  }
355
344
  ) }),
356
- /* @__PURE__ */ n(E, { dashed: !0 }),
357
- /* @__PURE__ */ g(o, { direction: "row", justifyContent: "end", gap: "16px", children: [
358
- /* @__PURE__ */ n(L, { appearance: "gray", onClick: b, children: d.cancel }),
345
+ /* @__PURE__ */ n(C, {}),
346
+ /* @__PURE__ */ p(u, { direction: "row", justifyContent: "end", gap: "16px", children: [
347
+ /* @__PURE__ */ n(_, { appearance: "gray", onClick: g, children: d.cancel }),
359
348
  /* @__PURE__ */ n(
360
- L,
349
+ _,
361
350
  {
362
- onClick: C,
363
- disabled: w || !a.isValid,
351
+ onClick: h,
352
+ disabled: E || !a.isValid,
364
353
  type: "submit",
365
354
  children: d.confirm
366
355
  }
367
356
  )
368
357
  ] })
369
358
  ] });
370
- }, ke = (t) => {
371
- const { id: e, decision: a, onCancel: i, onSubmitEvent: l, textValues: c } = t, [m, d] = x(a), b = (u, s) => {
372
- k.setFieldValue(u, s), k.validateField(u);
373
- }, C = (u, s) => {
374
- const r = u instanceof Date ? u.toISOString() : u;
375
- d((h) => {
376
- if (!h.conditions)
377
- return h;
378
- const G = h.conditions.map((O) => O.name === s ? { ...O, value: r } : O);
359
+ }, Oe = (t) => {
360
+ const { id: e, decision: a, onCancel: o, onSubmitEvent: l, textValues: s } = t, [c, d] = y(a), g = (r, i) => {
361
+ k.setFieldValue(r, i), k.validateField(r);
362
+ }, h = (r, i) => {
363
+ const A = r instanceof Date ? r.toISOString() : r;
364
+ d((O) => {
365
+ if (!O.conditions)
366
+ return O;
367
+ const Y = O.conditions.map((U) => U.name === i ? { ...U, value: A } : U);
379
368
  return {
380
- ...h,
381
- conditions: G
369
+ ...O,
370
+ conditions: Y
382
371
  };
383
- }), b(s, r);
384
- }, p = (u) => {
372
+ }), g(i, A);
373
+ }, b = (r) => {
385
374
  d(
386
- (s) => D(s, "value", u)
375
+ (i) => T(i, "value", r)
387
376
  );
388
- }, v = (u) => {
377
+ }, f = (r) => {
389
378
  d(
390
- (s) => D(s, "endDate", u)
379
+ (i) => T(i, "endDate", r)
391
380
  );
392
- }, w = (u) => {
381
+ }, E = (r) => {
393
382
  d(
394
- (s) => D(s, "startDate", u)
383
+ (i) => T(i, "startDate", r)
395
384
  );
396
- }, { validationSchema: S, initialValues: T } = te(m);
397
- S.validate(T, { abortEarly: !1 }).then(() => console.log("Validation passed")).catch((u) => console.log("Validation failed:", u.errors));
398
- const k = Q({
399
- initialValues: T,
400
- validationSchema: S,
385
+ }, { validationSchema: w, initialValues: S } = ae(c);
386
+ w.validate(S, { abortEarly: !1 }).then(() => console.log("Validation passed")).catch((r) => console.log("Validation failed:", r.errors));
387
+ const k = ee({
388
+ initialValues: S,
389
+ validationSchema: w,
401
390
  validateOnChange: !0,
402
391
  validateOnBlur: !0,
403
392
  onSubmit: () => {
404
- l(m);
393
+ l(c);
405
394
  }
406
- }), D = (u, s, r) => ({
407
- ...u,
408
- ...u.decision,
409
- [s]: r
395
+ }), T = (r, i, A) => ({
396
+ ...r,
397
+ ...r.decision,
398
+ [i]: A
410
399
  });
411
400
  return /* @__PURE__ */ n(
412
- ae,
401
+ ce,
413
402
  {
414
403
  id: e,
415
404
  formik: k,
416
- decision: m,
417
- onCancel: i,
418
- onSubmit: () => l(m),
419
- onChangeCondition: C,
420
- onChangeDecision: p,
421
- onStartChange: w,
422
- onEndChange: v,
423
- textValues: c
405
+ decision: c,
406
+ onCancel: o,
407
+ onSubmit: () => l(c),
408
+ onChangeCondition: h,
409
+ onChangeDecision: b,
410
+ onStartChange: E,
411
+ onEndChange: f,
412
+ textValues: s
424
413
  }
425
414
  );
426
- }, R = (t) => {
415
+ }, j = (t) => {
427
416
  if (!t)
428
417
  return;
429
418
  const e = t.value;
430
419
  if (!e)
431
420
  return;
432
- if (((i) => typeof i == "object" && i !== null)(e))
421
+ if (((o) => typeof o == "object" && o !== null)(e))
433
422
  switch (t.valueUse) {
434
- case f.LIST_OF_VALUES_MULTI:
423
+ case m.LIST_OF_VALUES_MULTI:
435
424
  return e;
436
- case f.LIST_OF_VALUES:
425
+ case m.LIST_OF_VALUES:
437
426
  return e;
438
- case f.RANGE:
427
+ case m.RANGE:
439
428
  return {
440
429
  from: e.from,
441
430
  to: e.to
@@ -444,82 +433,234 @@ const Y = (t) => {
444
433
  return e.value;
445
434
  }
446
435
  return e;
447
- }, De = (t) => {
448
- const { decision: e, textValues: a } = t, i = (c) => c && Object.keys(c).length > 0, l = {
449
- name: e.name,
450
- dataType: e.dataType,
451
- value: R(e),
452
- valueUse: e.valueUse
436
+ }, B = x.div`
437
+ & > div {
438
+ border-radius: 8px;
439
+ border: 1px solid ${V.palette.neutral.N30};
440
+ }
441
+ `, X = x.div`
442
+ width: 100%;
443
+ height: 100%;
444
+ overflow-y: auto;
445
+ padding-right: 4px;
446
+ &::-webkit-scrollbar {
447
+ width: 4px;
448
+ }
449
+
450
+ &::-webkit-scrollbar-thumb {
451
+ background-color: #c1c7d0;
452
+ border-radius: 8px;
453
+ }
454
+
455
+ &::-webkit-scrollbar-track {
456
+ background-color: #ebecf0;
457
+ border-radius: 8px;
458
+ }
459
+ `, v = {
460
+ background: {
461
+ color: V.palette.neutral.N30
462
+ },
463
+ animation: {
464
+ color: V.palette.neutral.N10
465
+ }
466
+ }, se = K`
467
+ 0% {
468
+ transform: translateX(-100%);
469
+ }
470
+ 100% {
471
+ transform: translateX(100%);
472
+ }
473
+ `;
474
+ x.div`
475
+ position: relative;
476
+ border-radius: 6px;
477
+ overflow: hidden;
478
+ width: ${({ $size: t }) => t};
479
+ height: ${({ $size: t }) => t};
480
+ background: ${({ theme: t }) => {
481
+ var e, a;
482
+ return ((a = (e = t == null ? void 0 : t.skeleton) == null ? void 0 : e.background) == null ? void 0 : a.color) || v.background.color;
483
+ }};
484
+
485
+ ${({ $animated: t }) => t && W`
486
+ &::after {
487
+ content: "";
488
+ position: absolute;
489
+ height: 100%;
490
+ width: 100%;
491
+ background: ${({ theme: e }) => {
492
+ var a, o, l, s, c, d;
493
+ return `linear-gradient(
494
+ 100deg,
495
+ ${((o = (a = e == null ? void 0 : e.skeleton) == null ? void 0 : a.background) == null ? void 0 : o.color) || v.background.color} 0%,
496
+ ${((s = (l = e == null ? void 0 : e.skeleton) == null ? void 0 : l.animation) == null ? void 0 : s.color) || v.animation.color} 50%,
497
+ ${((d = (c = e == null ? void 0 : e.skeleton) == null ? void 0 : c.background) == null ? void 0 : d.color) || v.background.color} 100%
498
+ );`;
499
+ }};
500
+ animation: ${se} 2s linear infinite;
501
+ }
502
+ `}
503
+ `;
504
+ const ue = K`
505
+ 0% {
506
+ transform: translateX(-100%);
507
+ }
508
+ 100% {
509
+ transform: translateX(100%);
510
+ }
511
+ `, pe = x.div`
512
+ position: relative;
513
+ border-radius: 6px;
514
+ overflow: hidden;
515
+ height: 16px;
516
+ width: ${({ $width: t }) => t};
517
+ background: ${({ theme: t }) => {
518
+ var e, a;
519
+ return ((a = (e = t == null ? void 0 : t.skeleton) == null ? void 0 : e.background) == null ? void 0 : a.color) || v.background.color;
520
+ }};
521
+
522
+ ${({ $animated: t }) => t && W`
523
+ &::after {
524
+ content: "";
525
+ position: absolute;
526
+ height: 100%;
527
+ width: 100%;
528
+ background: ${({ theme: e }) => {
529
+ var a, o, l, s, c, d;
530
+ return `linear-gradient(
531
+ 100deg,
532
+ ${((o = (a = e == null ? void 0 : e.skeleton) == null ? void 0 : a.background) == null ? void 0 : o.color) || v.background.color} 0%,
533
+ ${((s = (l = e == null ? void 0 : e.skeleton) == null ? void 0 : l.animation) == null ? void 0 : s.color) || v.animation.color} 50%,
534
+ ${((d = (c = e == null ? void 0 : e.skeleton) == null ? void 0 : c.background) == null ? void 0 : d.color) || v.background.color} 100%
535
+ );`;
536
+ }};
537
+ animation: ${ue} 2s linear infinite;
538
+ }
539
+ `}
540
+ `, $ = (t) => {
541
+ const { width: e = "100%", animated: a = !1 } = t;
542
+ return /* @__PURE__ */ n(pe, { $width: e, $animated: a });
543
+ }, je = (t) => {
544
+ const { decision: e, loading: a = !1, textValues: o } = t, l = (c) => c && Object.keys(c).length > 0, s = {
545
+ name: (e == null ? void 0 : e.name) || "",
546
+ dataType: (e == null ? void 0 : e.dataType) || "alphabetical",
547
+ value: j(e),
548
+ valueUse: (e == null ? void 0 : e.valueUse) || "equal"
453
549
  };
454
- return /* @__PURE__ */ g(o, { direction: "column", gap: "24px", children: [
455
- /* @__PURE__ */ g(o, { direction: "column", gap: "16px", children: [
456
- /* @__PURE__ */ n(y, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.criteria }),
457
- /* @__PURE__ */ n(o, { justifyContent: "space-between", children: e && /* @__PURE__ */ n(o, { direction: "column", children: /* @__PURE__ */ n(
458
- V,
459
- {
460
- element: l,
461
- valueData: R(l)
462
- }
463
- ) }, e.name) })
464
- ] }),
465
- /* @__PURE__ */ g(o, { direction: "column", gap: "16px", justifyContent: "space-between", children: [
466
- /* @__PURE__ */ n(y, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.factsThatConditionIt }),
467
- e.conditions && e.conditions.map((c) => {
468
- const m = c.value;
469
- return (typeof m == "object" && i(m) || m) && /* @__PURE__ */ n(o, { direction: "column", children: /* @__PURE__ */ n(
470
- V,
471
- {
472
- element: {
473
- ...c,
474
- value: m
550
+ return !a && e && o ? /* @__PURE__ */ p(u, { direction: "column", gap: "12px", children: [
551
+ e && /* @__PURE__ */ n(u, { direction: "column", alignItems: "center", children: /* @__PURE__ */ n(
552
+ F,
553
+ {
554
+ element: s,
555
+ valueData: j(s),
556
+ type: "decision"
557
+ }
558
+ ) }, e.name),
559
+ /* @__PURE__ */ n(C, { dashed: !0 }),
560
+ /* @__PURE__ */ n(X, { children: /* @__PURE__ */ p(
561
+ u,
562
+ {
563
+ direction: "column",
564
+ gap: "12px",
565
+ justifyContent: "space-between",
566
+ height: "203px",
567
+ children: [
568
+ /* @__PURE__ */ n(
569
+ D,
570
+ {
571
+ type: "label",
572
+ size: "large",
573
+ appearance: "dark",
574
+ weight: "bold",
575
+ textAlign: "center",
576
+ children: o.factsThatConditionIt
577
+ }
578
+ ),
579
+ e.conditions && e.conditions.map((c) => {
580
+ if (c.hidden) return null;
581
+ const d = c.value;
582
+ return (typeof d == "object" && l(d) || d) && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(u, { direction: "column", padding: "8px", children: /* @__PURE__ */ n(
583
+ F,
584
+ {
585
+ element: {
586
+ ...c,
587
+ value: d
588
+ },
589
+ valueData: j(c)
590
+ }
591
+ ) }) }, c.name);
592
+ }),
593
+ /* @__PURE__ */ n(C, { dashed: !0 }),
594
+ /* @__PURE__ */ n(u, { direction: "column", gap: "12px", children: (e == null ? void 0 : e.startDate) && (e == null ? void 0 : e.endDate) && /* @__PURE__ */ n(
595
+ F,
596
+ {
597
+ element: {
598
+ name: o.terms,
599
+ value: String(e.startDate),
600
+ valueUse: m.RANGE,
601
+ dataType: I.DATE
602
+ },
603
+ valueData: j({
604
+ name: o.terms,
605
+ value: {
606
+ from: String(e.startDate),
607
+ to: String(e.endDate)
608
+ },
609
+ valueUse: m.RANGE,
610
+ dataType: I.DATE
611
+ }),
612
+ type: "decision"
475
613
  },
476
- valueData: R(c)
477
- }
478
- ) }, c.name);
479
- })
614
+ o.terms
615
+ ) })
616
+ ]
617
+ }
618
+ ) })
619
+ ] }) : /* @__PURE__ */ p(u, { direction: "column", gap: "12px", children: [
620
+ /* @__PURE__ */ p(u, { direction: "column", alignItems: "center", gap: "4px", children: [
621
+ /* @__PURE__ */ n($, { animated: !0, width: "180px" }),
622
+ /* @__PURE__ */ n($, { animated: !0, width: "85px" })
623
+ ] }, "loading"),
624
+ /* @__PURE__ */ p(u, { direction: "column", gap: "12px", alignItems: "center", children: [
625
+ /* @__PURE__ */ n(C, { dashed: !0 }),
626
+ /* @__PURE__ */ n($, { animated: !0, width: "150px" })
480
627
  ] }),
481
- /* @__PURE__ */ g(o, { direction: "column", gap: "12px", children: [
482
- /* @__PURE__ */ n(y, { type: "title", size: "medium", appearance: "gray", weight: "bold", children: a.terms }),
483
- /* @__PURE__ */ g(o, { justifyContent: "space-between", children: [
484
- (e == null ? void 0 : e.startDate) && /* @__PURE__ */ n(
485
- V,
486
- {
487
- element: {
488
- name: "Fecha de inicio",
489
- value: String(e.startDate),
490
- valueUse: f.EQUAL,
491
- dataType: A.DATE
492
- },
493
- valueData: String(e.startDate)
494
- },
495
- "startDate"
496
- ),
497
- (e == null ? void 0 : e.endDate) && /* @__PURE__ */ n(
498
- V,
628
+ /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(
629
+ u,
630
+ {
631
+ direction: "column",
632
+ gap: "12px",
633
+ justifyContent: "space-between",
634
+ height: "203px",
635
+ children: Array.from({ length: 5 }).map((c, d) => /* @__PURE__ */ n(B, { children: /* @__PURE__ */ p(
636
+ u,
499
637
  {
500
- element: {
501
- name: "Fecha de final",
502
- value: String(e.endDate),
503
- valueUse: f.EQUAL,
504
- dataType: A.DATE
505
- },
506
- valueData: String(e.endDate)
507
- },
508
- "endDate"
509
- )
510
- ] })
511
- ] })
638
+ direction: "column",
639
+ gap: "12px",
640
+ alignItems: "start",
641
+ padding: "8px",
642
+ children: [
643
+ /* @__PURE__ */ n($, { animated: !0, width: "180px" }),
644
+ /* @__PURE__ */ n($, { animated: !0, width: "85px" })
645
+ ]
646
+ }
647
+ ) }, `condition-${d}`))
648
+ }
649
+ ) })
512
650
  ] });
513
- }, re = B.div`
514
- & > div {
515
- border-radius: 8px;
516
- border: 1px solid ${X.palette.neutral.N30};
517
- box-sizing: border-box;
518
- min-height: 340px;
519
- min-width: 332px;
520
- box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
521
- }
522
- `, oe = B.div`
651
+ }, me = x.div`
652
+ border-radius: 8px;
653
+ border: 1px solid ${V.palette.neutral.N30};
654
+ box-sizing: border-box;
655
+ display: flex;
656
+ flex-direction: column;
657
+ // height: 364px;
658
+ // width: 332px;
659
+ width: 100%;
660
+ height: 100%;
661
+ box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
662
+ `;
663
+ x.div`
523
664
  width: 100%;
524
665
  height: 100%;
525
666
  overflow-y: auto;
@@ -537,34 +678,35 @@ const Y = (t) => {
537
678
  background-color: #ebecf0;
538
679
  border-radius: 8px;
539
680
  }
540
- `, we = (t) => {
541
- const { children: e, handleDelete: a, handleView: i, id: l } = t;
542
- return /* @__PURE__ */ n(re, { children: /* @__PURE__ */ g(o, { direction: "column", width: "100%", height: "100%", children: [
543
- /* @__PURE__ */ n(o, { height: "282px", gap: "24px", direction: "column", children: /* @__PURE__ */ n(oe, { children: /* @__PURE__ */ n(o, { direction: "column", margin: "10px", children: e }) }) }),
544
- /* @__PURE__ */ g(o, { gap: "16px", direction: "column", margin: "2px 12px", children: [
545
- /* @__PURE__ */ n(E, {}),
546
- /* @__PURE__ */ g(o, { gap: "16px", justifyContent: "end", children: [
681
+ `;
682
+ const Re = (t) => {
683
+ const { children: e, controls: a = !0, handleDelete: o, handleView: l, id: s } = t;
684
+ return /* @__PURE__ */ n(me, { children: /* @__PURE__ */ p(u, { direction: "column", gap: "16px", padding: "12px 16px", children: [
685
+ e,
686
+ a && /* @__PURE__ */ p(R, { children: [
687
+ /* @__PURE__ */ n(C, {}),
688
+ /* @__PURE__ */ p(u, { gap: "16px", justifyContent: "end", children: [
547
689
  /* @__PURE__ */ n(
548
- N,
690
+ G,
549
691
  {
550
692
  appearance: "dark",
551
693
  size: "24px",
552
694
  cursorHover: !0,
553
- icon: /* @__PURE__ */ n(K, {}),
695
+ icon: /* @__PURE__ */ n(ne, {}),
554
696
  onClick: () => {
555
- i(l);
697
+ l(s);
556
698
  }
557
699
  }
558
700
  ),
559
701
  /* @__PURE__ */ n(
560
- N,
702
+ G,
561
703
  {
562
704
  cursorHover: !0,
563
705
  appearance: "dark",
564
706
  size: "24px",
565
- icon: /* @__PURE__ */ n(W, {}),
707
+ icon: /* @__PURE__ */ n(re, {}),
566
708
  onClick: () => {
567
- a(l);
709
+ o(s);
568
710
  }
569
711
  }
570
712
  )
@@ -573,7 +715,7 @@ const Y = (t) => {
573
715
  ] }) });
574
716
  };
575
717
  export {
576
- we as BusinessRuleCard,
577
- De as BusinessRuleView,
578
- ke as RulesForm
718
+ Re as BusinessRuleCard,
719
+ je as BusinessRuleView,
720
+ Oe as RulesForm
579
721
  };
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  ],
11
11
  "description": "",
12
12
  "private": false,
13
- "version": "0.1.19",
13
+ "version": "0.1.21",
14
14
  "type": "module",
15
15
  "exports": {
16
16
  ".": {
@@ -37,19 +37,22 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "@inubekit/button": "^4.44.1",
40
+ "@inubekit/blanket": "2.25.0",
40
41
  "@inubekit/checkbox": "^0.2.2",
41
42
  "@inubekit/date": "^2.39.1",
42
43
  "@inubekit/divider": "^0.16.1",
43
44
  "@inubekit/foundations": "^5.11.3",
45
+ "@inubekit/hooks": "^1.2.0",
44
46
  "@inubekit/grid": "^2.14.1",
45
47
  "@inubekit/icon": "^2.18.1",
46
48
  "@inubekit/input": "^1.6.3",
47
49
  "@inubekit/stack": "^3.8.1",
50
+ "@inubekit/skeleton": "^2.11.1",
48
51
  "@inubekit/text": "^2.17.0",
49
52
  "@inubekit/textarea": "^2.45.0",
50
53
  "@inubekit/toggle": "^3.8.2",
51
- "@isettingkit/input": "^0.1.26",
52
- "@isettingkit/view": "^0.1.14"
54
+ "@isettingkit/input": "^0.1.30",
55
+ "@isettingkit/view": "^0.1.18"
53
56
  },
54
57
  "peerDependencies": {
55
58
  "formik": "^2.4.6",