@isettingkit/business-rules 0.1.19 → 0.1.20

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 +544 -403
  3. package/package.json +5 -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,192 @@ 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
+ }
324
+ )
325
+ },
326
+ r.name
327
+ )) })
328
+ ]
341
329
  }
342
- ) }),
343
- /* @__PURE__ */ n(E, { dashed: !0 }),
344
- /* @__PURE__ */ n(o, { direction: "column", children: e && /* @__PURE__ */ n(
345
- ne,
330
+ ) }) }),
331
+ /* @__PURE__ */ n(C, { dashed: !0 }),
332
+ /* @__PURE__ */ n(u, { direction: "column", children: e && /* @__PURE__ */ n(
333
+ ie,
346
334
  {
347
- onHandleStartChange: (r) => c(r.target.value),
348
- onHandleEndChange: (r) => m(r.target.value),
335
+ onHandleStartChange: (r) => s(r.target.value),
336
+ onHandleEndChange: (r) => c(r.target.value),
349
337
  labelStart: d.termStart,
350
338
  labelEnd: d.termEnd,
351
339
  checkedClosed: !!e.endDate,
@@ -353,89 +341,89 @@ const Y = (t) => {
353
341
  valueEnd: String(e.endDate) || ""
354
342
  }
355
343
  ) }),
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 }),
344
+ /* @__PURE__ */ n(C, {}),
345
+ /* @__PURE__ */ p(u, { direction: "row", justifyContent: "end", gap: "16px", children: [
346
+ /* @__PURE__ */ n(_, { appearance: "gray", onClick: g, children: d.cancel }),
359
347
  /* @__PURE__ */ n(
360
- L,
348
+ _,
361
349
  {
362
- onClick: C,
363
- disabled: w || !a.isValid,
350
+ onClick: h,
351
+ disabled: E || !a.isValid,
364
352
  type: "submit",
365
353
  children: d.confirm
366
354
  }
367
355
  )
368
356
  ] })
369
357
  ] });
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);
358
+ }, Oe = (t) => {
359
+ const { id: e, decision: a, onCancel: o, onSubmitEvent: l, textValues: s } = t, [c, d] = y(a), g = (r, i) => {
360
+ k.setFieldValue(r, i), k.validateField(r);
361
+ }, h = (r, i) => {
362
+ const A = r instanceof Date ? r.toISOString() : r;
363
+ d((O) => {
364
+ if (!O.conditions)
365
+ return O;
366
+ const Y = O.conditions.map((U) => U.name === i ? { ...U, value: A } : U);
379
367
  return {
380
- ...h,
381
- conditions: G
368
+ ...O,
369
+ conditions: Y
382
370
  };
383
- }), b(s, r);
384
- }, p = (u) => {
371
+ }), g(i, A);
372
+ }, b = (r) => {
385
373
  d(
386
- (s) => D(s, "value", u)
374
+ (i) => T(i, "value", r)
387
375
  );
388
- }, v = (u) => {
376
+ }, f = (r) => {
389
377
  d(
390
- (s) => D(s, "endDate", u)
378
+ (i) => T(i, "endDate", r)
391
379
  );
392
- }, w = (u) => {
380
+ }, E = (r) => {
393
381
  d(
394
- (s) => D(s, "startDate", u)
382
+ (i) => T(i, "startDate", r)
395
383
  );
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,
384
+ }, { validationSchema: w, initialValues: S } = ae(c);
385
+ w.validate(S, { abortEarly: !1 }).then(() => console.log("Validation passed")).catch((r) => console.log("Validation failed:", r.errors));
386
+ const k = ee({
387
+ initialValues: S,
388
+ validationSchema: w,
401
389
  validateOnChange: !0,
402
390
  validateOnBlur: !0,
403
391
  onSubmit: () => {
404
- l(m);
392
+ l(c);
405
393
  }
406
- }), D = (u, s, r) => ({
407
- ...u,
408
- ...u.decision,
409
- [s]: r
394
+ }), T = (r, i, A) => ({
395
+ ...r,
396
+ ...r.decision,
397
+ [i]: A
410
398
  });
411
399
  return /* @__PURE__ */ n(
412
- ae,
400
+ ce,
413
401
  {
414
402
  id: e,
415
403
  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
404
+ decision: c,
405
+ onCancel: o,
406
+ onSubmit: () => l(c),
407
+ onChangeCondition: h,
408
+ onChangeDecision: b,
409
+ onStartChange: E,
410
+ onEndChange: f,
411
+ textValues: s
424
412
  }
425
413
  );
426
- }, R = (t) => {
414
+ }, j = (t) => {
427
415
  if (!t)
428
416
  return;
429
417
  const e = t.value;
430
418
  if (!e)
431
419
  return;
432
- if (((i) => typeof i == "object" && i !== null)(e))
420
+ if (((o) => typeof o == "object" && o !== null)(e))
433
421
  switch (t.valueUse) {
434
- case f.LIST_OF_VALUES_MULTI:
422
+ case m.LIST_OF_VALUES_MULTI:
435
423
  return e;
436
- case f.LIST_OF_VALUES:
424
+ case m.LIST_OF_VALUES:
437
425
  return e;
438
- case f.RANGE:
426
+ case m.RANGE:
439
427
  return {
440
428
  from: e.from,
441
429
  to: e.to
@@ -444,82 +432,234 @@ const Y = (t) => {
444
432
  return e.value;
445
433
  }
446
434
  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
435
+ }, B = x.div`
436
+ & > div {
437
+ border-radius: 8px;
438
+ border: 1px solid ${V.palette.neutral.N30};
439
+ }
440
+ `, X = x.div`
441
+ width: 100%;
442
+ height: 100%;
443
+ overflow-y: auto;
444
+ padding-right: 4px;
445
+ &::-webkit-scrollbar {
446
+ width: 4px;
447
+ }
448
+
449
+ &::-webkit-scrollbar-thumb {
450
+ background-color: #c1c7d0;
451
+ border-radius: 8px;
452
+ }
453
+
454
+ &::-webkit-scrollbar-track {
455
+ background-color: #ebecf0;
456
+ border-radius: 8px;
457
+ }
458
+ `, v = {
459
+ background: {
460
+ color: V.palette.neutral.N30
461
+ },
462
+ animation: {
463
+ color: V.palette.neutral.N10
464
+ }
465
+ }, se = K`
466
+ 0% {
467
+ transform: translateX(-100%);
468
+ }
469
+ 100% {
470
+ transform: translateX(100%);
471
+ }
472
+ `;
473
+ x.div`
474
+ position: relative;
475
+ border-radius: 6px;
476
+ overflow: hidden;
477
+ width: ${({ $size: t }) => t};
478
+ height: ${({ $size: t }) => t};
479
+ background: ${({ theme: t }) => {
480
+ var e, a;
481
+ return ((a = (e = t == null ? void 0 : t.skeleton) == null ? void 0 : e.background) == null ? void 0 : a.color) || v.background.color;
482
+ }};
483
+
484
+ ${({ $animated: t }) => t && W`
485
+ &::after {
486
+ content: "";
487
+ position: absolute;
488
+ height: 100%;
489
+ width: 100%;
490
+ background: ${({ theme: e }) => {
491
+ var a, o, l, s, c, d;
492
+ return `linear-gradient(
493
+ 100deg,
494
+ ${((o = (a = e == null ? void 0 : e.skeleton) == null ? void 0 : a.background) == null ? void 0 : o.color) || v.background.color} 0%,
495
+ ${((s = (l = e == null ? void 0 : e.skeleton) == null ? void 0 : l.animation) == null ? void 0 : s.color) || v.animation.color} 50%,
496
+ ${((d = (c = e == null ? void 0 : e.skeleton) == null ? void 0 : c.background) == null ? void 0 : d.color) || v.background.color} 100%
497
+ );`;
498
+ }};
499
+ animation: ${se} 2s linear infinite;
500
+ }
501
+ `}
502
+ `;
503
+ const ue = K`
504
+ 0% {
505
+ transform: translateX(-100%);
506
+ }
507
+ 100% {
508
+ transform: translateX(100%);
509
+ }
510
+ `, pe = x.div`
511
+ position: relative;
512
+ border-radius: 6px;
513
+ overflow: hidden;
514
+ height: 16px;
515
+ width: ${({ $width: t }) => t};
516
+ background: ${({ theme: t }) => {
517
+ var e, a;
518
+ return ((a = (e = t == null ? void 0 : t.skeleton) == null ? void 0 : e.background) == null ? void 0 : a.color) || v.background.color;
519
+ }};
520
+
521
+ ${({ $animated: t }) => t && W`
522
+ &::after {
523
+ content: "";
524
+ position: absolute;
525
+ height: 100%;
526
+ width: 100%;
527
+ background: ${({ theme: e }) => {
528
+ var a, o, l, s, c, d;
529
+ return `linear-gradient(
530
+ 100deg,
531
+ ${((o = (a = e == null ? void 0 : e.skeleton) == null ? void 0 : a.background) == null ? void 0 : o.color) || v.background.color} 0%,
532
+ ${((s = (l = e == null ? void 0 : e.skeleton) == null ? void 0 : l.animation) == null ? void 0 : s.color) || v.animation.color} 50%,
533
+ ${((d = (c = e == null ? void 0 : e.skeleton) == null ? void 0 : c.background) == null ? void 0 : d.color) || v.background.color} 100%
534
+ );`;
535
+ }};
536
+ animation: ${ue} 2s linear infinite;
537
+ }
538
+ `}
539
+ `, $ = (t) => {
540
+ const { width: e = "100%", animated: a = !1 } = t;
541
+ return /* @__PURE__ */ n(pe, { $width: e, $animated: a });
542
+ }, je = (t) => {
543
+ const { decision: e, loading: a = !1, textValues: o } = t, l = (c) => c && Object.keys(c).length > 0, s = {
544
+ name: (e == null ? void 0 : e.name) || "",
545
+ dataType: (e == null ? void 0 : e.dataType) || "alphabetical",
546
+ value: j(e),
547
+ valueUse: (e == null ? void 0 : e.valueUse) || "equal"
453
548
  };
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
549
+ return !a && e && o ? /* @__PURE__ */ p(u, { direction: "column", gap: "12px", children: [
550
+ e && /* @__PURE__ */ n(u, { direction: "column", alignItems: "center", children: /* @__PURE__ */ n(
551
+ F,
552
+ {
553
+ element: s,
554
+ valueData: j(s),
555
+ type: "decision"
556
+ }
557
+ ) }, e.name),
558
+ /* @__PURE__ */ n(C, { dashed: !0 }),
559
+ /* @__PURE__ */ n(X, { children: /* @__PURE__ */ p(
560
+ u,
561
+ {
562
+ direction: "column",
563
+ gap: "12px",
564
+ justifyContent: "space-between",
565
+ height: "203px",
566
+ children: [
567
+ /* @__PURE__ */ n(
568
+ D,
569
+ {
570
+ type: "label",
571
+ size: "large",
572
+ appearance: "dark",
573
+ weight: "bold",
574
+ textAlign: "center",
575
+ children: o.factsThatConditionIt
576
+ }
577
+ ),
578
+ e.conditions && e.conditions.map((c) => {
579
+ if (c.hidden) return null;
580
+ const d = c.value;
581
+ return (typeof d == "object" && l(d) || d) && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(u, { direction: "column", padding: "8px", children: /* @__PURE__ */ n(
582
+ F,
583
+ {
584
+ element: {
585
+ ...c,
586
+ value: d
587
+ },
588
+ valueData: j(c)
589
+ }
590
+ ) }) }, c.name);
591
+ }),
592
+ /* @__PURE__ */ n(C, { dashed: !0 }),
593
+ /* @__PURE__ */ n(u, { direction: "column", gap: "12px", children: (e == null ? void 0 : e.startDate) && (e == null ? void 0 : e.endDate) && /* @__PURE__ */ n(
594
+ F,
595
+ {
596
+ element: {
597
+ name: o.terms,
598
+ value: String(e.startDate),
599
+ valueUse: m.RANGE,
600
+ dataType: I.DATE
601
+ },
602
+ valueData: j({
603
+ name: o.terms,
604
+ value: {
605
+ from: String(e.startDate),
606
+ to: String(e.endDate)
607
+ },
608
+ valueUse: m.RANGE,
609
+ dataType: I.DATE
610
+ }),
611
+ type: "decision"
475
612
  },
476
- valueData: R(c)
477
- }
478
- ) }, c.name);
479
- })
613
+ o.terms
614
+ ) })
615
+ ]
616
+ }
617
+ ) })
618
+ ] }) : /* @__PURE__ */ p(u, { direction: "column", gap: "12px", children: [
619
+ /* @__PURE__ */ p(u, { direction: "column", alignItems: "center", gap: "4px", children: [
620
+ /* @__PURE__ */ n($, { animated: !0, width: "180px" }),
621
+ /* @__PURE__ */ n($, { animated: !0, width: "85px" })
622
+ ] }, "loading"),
623
+ /* @__PURE__ */ p(u, { direction: "column", gap: "12px", alignItems: "center", children: [
624
+ /* @__PURE__ */ n(C, { dashed: !0 }),
625
+ /* @__PURE__ */ n($, { animated: !0, width: "150px" })
480
626
  ] }),
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,
627
+ /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(
628
+ u,
629
+ {
630
+ direction: "column",
631
+ gap: "12px",
632
+ justifyContent: "space-between",
633
+ height: "203px",
634
+ children: Array.from({ length: 5 }).map((c, d) => /* @__PURE__ */ n(B, { children: /* @__PURE__ */ p(
635
+ u,
499
636
  {
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
- ] })
637
+ direction: "column",
638
+ gap: "12px",
639
+ alignItems: "start",
640
+ padding: "8px",
641
+ children: [
642
+ /* @__PURE__ */ n($, { animated: !0, width: "180px" }),
643
+ /* @__PURE__ */ n($, { animated: !0, width: "85px" })
644
+ ]
645
+ }
646
+ ) }, `condition-${d}`))
647
+ }
648
+ ) })
512
649
  ] });
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`
650
+ }, me = x.div`
651
+ border-radius: 8px;
652
+ border: 1px solid ${V.palette.neutral.N30};
653
+ box-sizing: border-box;
654
+ display: flex;
655
+ flex-direction: column;
656
+ // height: 364px;
657
+ // width: 332px;
658
+ width: 100%;
659
+ height: 100%;
660
+ box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1);
661
+ `;
662
+ x.div`
523
663
  width: 100%;
524
664
  height: 100%;
525
665
  overflow-y: auto;
@@ -537,34 +677,35 @@ const Y = (t) => {
537
677
  background-color: #ebecf0;
538
678
  border-radius: 8px;
539
679
  }
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: [
680
+ `;
681
+ const Re = (t) => {
682
+ const { children: e, controls: a = !0, handleDelete: o, handleView: l, id: s } = t;
683
+ return /* @__PURE__ */ n(me, { children: /* @__PURE__ */ p(u, { direction: "column", gap: "16px", padding: "12px 16px", children: [
684
+ e,
685
+ a && /* @__PURE__ */ p(R, { children: [
686
+ /* @__PURE__ */ n(C, {}),
687
+ /* @__PURE__ */ p(u, { gap: "16px", justifyContent: "end", children: [
547
688
  /* @__PURE__ */ n(
548
- N,
689
+ G,
549
690
  {
550
691
  appearance: "dark",
551
692
  size: "24px",
552
693
  cursorHover: !0,
553
- icon: /* @__PURE__ */ n(K, {}),
694
+ icon: /* @__PURE__ */ n(ne, {}),
554
695
  onClick: () => {
555
- i(l);
696
+ l(s);
556
697
  }
557
698
  }
558
699
  ),
559
700
  /* @__PURE__ */ n(
560
- N,
701
+ G,
561
702
  {
562
703
  cursorHover: !0,
563
704
  appearance: "dark",
564
705
  size: "24px",
565
- icon: /* @__PURE__ */ n(W, {}),
706
+ icon: /* @__PURE__ */ n(re, {}),
566
707
  onClick: () => {
567
- a(l);
708
+ o(s);
568
709
  }
569
710
  }
570
711
  )
@@ -573,7 +714,7 @@ const Y = (t) => {
573
714
  ] }) });
574
715
  };
575
716
  export {
576
- we as BusinessRuleCard,
577
- De as BusinessRuleView,
578
- ke as RulesForm
717
+ Re as BusinessRuleCard,
718
+ je as BusinessRuleView,
719
+ Oe as RulesForm
579
720
  };
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.20",
14
14
  "type": "module",
15
15
  "exports": {
16
16
  ".": {
@@ -37,6 +37,7 @@
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",
@@ -45,11 +46,12 @@
45
46
  "@inubekit/icon": "^2.18.1",
46
47
  "@inubekit/input": "^1.6.3",
47
48
  "@inubekit/stack": "^3.8.1",
49
+ "@inubekit/skeleton": "^2.11.1",
48
50
  "@inubekit/text": "^2.17.0",
49
51
  "@inubekit/textarea": "^2.45.0",
50
52
  "@inubekit/toggle": "^3.8.2",
51
- "@isettingkit/input": "^0.1.26",
52
- "@isettingkit/view": "^0.1.14"
53
+ "@isettingkit/input": "^0.1.28",
54
+ "@isettingkit/view": "^0.1.18"
53
55
  },
54
56
  "peerDependencies": {
55
57
  "formik": "^2.4.6",