@isettingkit/business-rules 1.0.0 → 1.0.2

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/README.md +64 -150
  2. package/dist/index.es.js +127 -125
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -1,173 +1,87 @@
1
- # 📦 isettingkit-business-rules: Business Rule Components Library
1
+ # isettingkit
2
+ isettingkit is a modular UI toolkit designed to streamline the creation and management of business rule-driven interfaces. It offers a suite of reusable components, utilities, and type definitions to facilitate the development of dynamic, rule-based forms and configurations.
2
3
 
3
- ## Overview
4
+ ## 📁 Project Structure
5
+ The src directory is organized into the following primary modules:
4
6
 
5
- The **`isettingkit-business-rules`** library is designed to handle business rules and decision-making in frontend applications. It includes a variety of components to display, modify, and manage business rules, decisions, and conditions. This documentation covers the core components, their functionality, and how to integrate them.
7
+ ### 1. businessRules
8
+ Contains components and utilities for managing business rules:
6
9
 
7
- ---
10
+ Cards/: Components like BusinessRuleCard for visual representation of individual rules.
8
11
 
9
- ## 📚 Components
12
+ Form/: Components such as RulesForm to create and edit business rules.
10
13
 
11
- ### 1. `getValueData`
14
+ Modal/: Modal components for rule creation and editing workflows.
12
15
 
13
- #### Description
14
- The `getValueData` function extracts and formats the value data from a decision or condition element.
16
+ BusinessRuleView.tsx: A comprehensive view component to display business rules.
15
17
 
16
- #### Props
17
- - **element** (`IRuleDecision["decision"] | ICondition | undefined`): The decision or condition element to extract the value from.
18
+ ### 2. Filter
19
+ Provides components to filter and search through business rules:
18
20
 
19
- #### Usage Example
20
- ```tsx
21
- const value = getValueData(decision.decision);
22
- ```
21
+ FilterModal/: Modal components for applying filters.
23
22
 
24
- ### 2. BusinessRuleView
25
- #### Description
26
- BusinessRuleView renders a detailed view of a business rule, displaying decisions and conditions, along with their corresponding values.
27
-
28
- #### Props
29
- - **decision** (IRuleDecision): The business rule decision data.
30
- - **textValues** (IRulesFormTextValues): Text values for displaying labels and descriptions.
31
- #### Usage Example
32
- ```tsx
33
- <BusinessRuleView
34
- decision={ruleDecision}
35
- textValues={textValues}
36
- />
37
- ```
23
+ FilterTag/: Tag components representing active filters.
24
+
25
+ FormFilter/: Form components to define filter criteria.
26
+
27
+ ### 3. types
28
+ Defines TypeScript interfaces and types to ensure type safety across components:
29
+
30
+ businessRules/: Types related to business rule components.
31
+
32
+ Filter/: Types associated with filtering functionalities.
38
33
 
39
- ### 3. BusinessRuleCard
40
- #### Description
41
- BusinessRuleCard is a card component used to display a business rule with options to view or delete the rule.
42
-
43
- #### Props
44
- - **children** (React.ReactNode): The content of the card.
45
- - **handleDelete** ((id: string) => void): Function to handle the deletion of a rule.
46
- - **handleView** ((id: string) => void): Function to handle viewing a rule.
47
- - **id (string)** : The ID of the business rule.
48
- #### Usage Example
49
- ```tsx
50
- <BusinessRuleCard
51
- id="rule1"
52
- handleDelete={deleteRule}
53
- handleView={viewRule}
54
- />
34
+ ## 🚀 Getting Started
35
+ Installation
36
+ Install the package using npm:
37
+ ``` bash
38
+ npm install @isettingkit/business-rules
55
39
  ```
56
- ### 4. RulesForm
57
- #### Description
58
- RulesForm is a form component for handling and submitting business rule decisions. It integrates with Formik for form validation and submission.
59
-
60
- #### Props
61
- - **id** (string): The unique ID for the form.
62
- - **decision** (IRuleDecision): The decision data for the form.
63
- - **onCloseModal** (() => void): Function to handle closing the modal.
64
- - **onCancel** (() => void): Function to handle cancelling the form.
65
- - **onSubmitEvent** ((dataDecision: IRuleDecision) => void): Function to handle submitting the form data.
66
- - **textValues** (IRulesFormTextValues): Text values for the form labels and descriptions.
67
- #### Usage Example
68
- ```tsx
69
- <RulesForm
70
- id="ruleForm1"
71
- decision={ruleDecision}
72
- onCloseModal={closeModal}
73
- onCancel={cancelForm}
74
- onSubmitEvent={submitDecision}
75
- />
40
+ Usage
41
+ Import and use the components in your project:
42
+ ``` bash
43
+ import { BusinessRuleCard, RulesForm } from '@isettingkit/business-rules';
76
44
  ```
77
-
78
- ### 5. ReasonForChange
79
- #### Description
80
- ReasonForChange is a component that renders a textarea input to capture the reason for a change in a business rule.
81
-
82
- #### Props
83
- - **label** (string): The label for the textarea.
84
- - **labelText** (string): The label text to display.
85
- - **onHandleChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle textarea changes.
86
- - **placeholder** (string): The placeholder text for the textarea.
87
- - **required** (boolean): Indicates if the field is required.
88
- - **value** (string?): The value of the textarea (optional).
89
- #### Usage Example
90
- ```tsx
91
- <ReasonForChange
92
- label="Change Reason"
93
- labelText="Reason for Change"
94
- onHandleChange={handleChange}
95
- placeholder="Enter reason for change"
96
- required={true}
97
- />
45
+ ``` tsx
46
+ function App() {
47
+ return (
48
+ <div>
49
+ <BusinessRuleCard rule={ruleData} />
50
+ <RulesForm onSubmit={handleSubmit} />
51
+ </div>
52
+ );
53
+ }
98
54
  ```
55
+ ## Theming
56
+ isettingkit utilizes styled-components for styling. Ensure your application is wrapped with a ThemeProvider and the appropriate theme is provided.
99
57
 
100
- ### 6. Term
101
- #### Description
102
- Term is a component used to handle the start and end dates of a business rule term. It allows for toggling between an open and closed term, and managing start and end dates.
103
-
104
- #### Props
105
- - **onHandleStartChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in start date.
106
- - **onHandleEndChange** ((event: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the change in end date.
107
- - **labelStart** (string): The label for the start date input.
108
- - **labelEnd** (string): The label for the end date input.
109
- - **checkedClosed** (boolean?): Whether the term is closed (optional).
110
- - **required** (boolean?): Whether the fields are required (optional).
111
- - **valueStart** (string?): The value for the start date (optional).
112
- - **valueEnd** (string?): The value for the end date (optional).
113
- #### Usage Example
114
- ```tsx
115
- <Term
116
- labelStart="Start Date"
117
- labelEnd="End Date"
118
- onHandleStartChange={handleStartChange}
119
- onHandleEndChange={handleEndChange}
120
- />
121
- ```
58
+ ## 📚 Documentation
59
+ Each component is fully typed with TypeScript. Refer to the types directory for detailed type definitions:
122
60
 
123
- ### 7. ToggleOption
124
- #### Description
125
- ToggleOption is a component that renders a toggle switch and displays additional content when the toggle is checked.
126
-
127
- #### Props
128
- - **checked** (boolean): The current checked state of the toggle.
129
- - **children** (React.ReactNode): The content to display when the toggle is checked.
130
- - **handleToggleChange** ((e: React.ChangeEvent<HTMLInputElement>) => void): Callback to handle the toggle change event.
131
- - **id** (string): The unique ID for the toggle.
132
- - **labelToggle** (string): The label for the toggle.
133
- - **name** (string): The name of the toggle input.
134
- - **valueToggle** (string?): The value of the toggle input (optional).
135
- #### Usage Example
136
- ```tsx
137
- <ToggleOption
138
- checked={isChecked}
139
- handleToggleChange={handleToggleChange}
140
- id="toggleOption1"
141
- labelToggle="Enable Option"
142
- name="optionToggle"
143
- />
144
- ```
61
+ IBusinessRuleCard: Props for BusinessRuleCard component.
145
62
 
146
- #### 🚀 How to Use
147
- #### 1. Installation
148
- Install the library using npm:
63
+ IRulesForm: Props for RulesForm component.
149
64
 
150
- ```bash
151
- npm install isettingkit-business-rules
152
- ```
153
- #### 2. Import Components
154
- Once installed, you can import and use the components like this:
65
+ IFilterTag: Props for FilterTag component.
66
+
67
+ ## 🛠 Development
68
+ To contribute or run the library locally:
155
69
 
156
- ```tsx
157
- import { BusinessRuleView, BusinessRuleCard, RulesForm, ReasonForChange, Term, ToggleOption } from 'isettingkit-business-rules';
70
+ Clone the repository:
71
+ ``` bash
72
+ git clone https://github.com/selsa-inube/isettingkit.git
158
73
  ```
159
- #### 3. Storybook Integration
160
- To visualize the components in action, we use Storybook. Storybook allows developers to interact with the components in isolation, view different states, and confirm that they behave as expected.
74
+ Navigate to the project directory:
161
75
 
162
- You can run Storybook for this library by navigating to the project folder and using the following command:
76
+ cd isettingkit
163
77
 
164
- ```bash
78
+ Install dependencies:
79
+ ``` bash
80
+ npm install
81
+ ```
82
+ Run the development server:
83
+ ``` bash
165
84
  npm run storybook
166
85
  ```
167
- #### 📦 Available Components
168
- - **BusinessRuleView**: Displays a business rule's decision and conditions.
169
- - **BusinessRuleCard**: Displays a business rule in a card format with options to view or delete.
170
- - **RulesForm**: A form component for handling and submitting business rule decisions.
171
- - **ReasonForChange**: A textarea input for capturing the reason for a change.
172
- - **Term**: Manages the start and end dates for a business rule term.
173
- - **ToggleOption**: A toggle switch component with additional content.
86
+ ## 🧪 Testing
87
+ The project uses Storybook for component development and visualization. Run Storybook to view and test components in isolation.
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as a, jsxs as u, Fragment as E } from "react/jsx-runtime";
2
2
  import { MdOutlineDelete as he, MdClear as Z, MdAdd as ee, MdOutlineFilterAltOff as ue, MdOutlineFilterAlt as pe } from "react-icons/md";
3
- import { inube as v, Stack as h, Divider as D, Icon as O, Text as y, SkeletonLine as A, useMediaQuery as I, Blanket as te, Button as N, Grid as ne, Box as ge, Tag as me, Checkpicker as be, Toggle as ie, Checkbox as Te, Date as G } from "@inubekit/inubekit";
3
+ import { inube as v, Stack as h, Divider as D, Icon as O, Text as y, SkeletonLine as F, useMediaQuery as I, Blanket as te, Button as N, Grid as ne, Box as ge, Tag as me, Checkpicker as be, Toggle as ie, Checkbox as Te, Date as G } from "@inubekit/inubekit";
4
4
  import f, { keyframes as fe } from "styled-components";
5
5
  import { ValueDataType as k, ValueHowToSetUp as L, DecisionConditionRender as Q } from "@isettingkit/input";
6
6
  import { DecisionViewConditionRenderer as _ } from "@isettingkit/view";
@@ -91,7 +91,7 @@ const H = (t) => {
91
91
  to: t.to ?? ""
92
92
  }), Ee = (t) => t.value, Ne = (t) => t.value, ke = (t) => t.value;
93
93
  var x = /* @__PURE__ */ ((t) => (t.EQUAL = "EqualTo", t.GREATER_THAN = "GreaterThan", t.LESS_THAN = "LessThan", t.LIST_OF_VALUES = "ListOfValues", t.LIST_OF_VALUES_MULTI = "ListOfValuesMulti", t.RANGE = "Range", t))(x || {});
94
- const Fe = {
94
+ const Ae = {
95
95
  [x.LIST_OF_VALUES]: we,
96
96
  [x.LIST_OF_VALUES_MULTI]: Se,
97
97
  [x.RANGE]: De,
@@ -99,20 +99,21 @@ const Fe = {
99
99
  [x.LESS_THAN]: Ne,
100
100
  [x.EQUAL]: ke
101
101
  }, $ = (t) => {
102
- const e = t == null ? void 0 : t.value, n = typeof e == "object" && e !== null && !Array.isArray(e), i = Fe[t == null ? void 0 : t.howToSetTheDecision] || Ce;
102
+ const e = t == null ? void 0 : t.value, n = typeof e == "object" && e !== null && !Array.isArray(e), i = Ae[t == null ? void 0 : t.howToSetTheDecision] || Ce;
103
103
  return n && i(e) || e || void 0;
104
- }, Ae = (t) => {
104
+ }, Fe = (t) => {
105
105
  const {
106
- loading: e,
107
- textValues: n,
108
- decision: i,
106
+ conditionsAlignment: e,
107
+ decision: n,
108
+ decisionDateElement: i,
109
109
  decisionMapper: o,
110
- visibleConditions: r,
111
- decisionDateElement: p,
112
- skeleton: g,
113
- terms: s
110
+ loading: r,
111
+ skeleton: p,
112
+ terms: g,
113
+ textValues: d,
114
+ visibleConditions: c
114
115
  } = t;
115
- return e ? /* @__PURE__ */ u(h, { direction: "column", gap: "12px", children: [
116
+ return r ? /* @__PURE__ */ u(h, { direction: "column", gap: "12px", children: [
116
117
  /* @__PURE__ */ a(h, { direction: "column", alignItems: "center", children: /* @__PURE__ */ a(
117
118
  _,
118
119
  {
@@ -122,14 +123,14 @@ const Fe = {
122
123
  ),
123
124
  type: "decision"
124
125
  }
125
- ) }, i.ruleName),
126
+ ) }, n.ruleName),
126
127
  /* @__PURE__ */ a(D, { dashed: !0 }),
127
128
  /* @__PURE__ */ a(K, { children: /* @__PURE__ */ u(
128
129
  h,
129
130
  {
130
131
  direction: "column",
131
132
  gap: "12px",
132
- justifyContent: "space-between",
133
+ justifyContent: e,
133
134
  height: "203px",
134
135
  children: [
135
136
  /* @__PURE__ */ a(
@@ -140,28 +141,28 @@ const Fe = {
140
141
  appearance: "dark",
141
142
  weight: "bold",
142
143
  textAlign: "center",
143
- children: n.factsThatConditionIt
144
+ children: d.factsThatConditionIt
144
145
  }
145
146
  ),
146
- r.map((d) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ a(h, { direction: "column", padding: "8px", children: /* @__PURE__ */ a(
147
+ c.map((s) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ a(h, { direction: "column", padding: "8px", children: /* @__PURE__ */ a(
147
148
  _,
148
149
  {
149
- element: { ...d, value: d.value },
150
+ element: { ...s, value: s.value },
150
151
  valueData: $(
151
- d
152
+ s
152
153
  )
153
154
  }
154
- ) }) }, d.conditionName)),
155
- s && /* @__PURE__ */ u(E, { children: [
155
+ ) }) }, s.conditionName)),
156
+ g && /* @__PURE__ */ u(E, { children: [
156
157
  /* @__PURE__ */ a(D, { dashed: !0 }),
157
- p && /* @__PURE__ */ a(
158
+ i && /* @__PURE__ */ a(
158
159
  _,
159
160
  {
160
- element: p.element,
161
- valueData: p.valueData,
161
+ element: i.element,
162
+ valueData: i.valueData,
162
163
  type: "decision"
163
164
  },
164
- n.terms
165
+ d.terms
165
166
  )
166
167
  ] })
167
168
  ]
@@ -169,12 +170,12 @@ const Fe = {
169
170
  ) })
170
171
  ] }) : /* @__PURE__ */ u(h, { direction: "column", gap: "12px", children: [
171
172
  /* @__PURE__ */ u(h, { direction: "column", alignItems: "center", gap: "4px", children: [
172
- /* @__PURE__ */ a(A, { animated: !0, width: "180px" }),
173
- /* @__PURE__ */ a(A, { animated: !0, width: "85px" })
173
+ /* @__PURE__ */ a(F, { animated: !0, width: "180px" }),
174
+ /* @__PURE__ */ a(F, { animated: !0, width: "85px" })
174
175
  ] }, "loading"),
175
176
  /* @__PURE__ */ u(h, { direction: "column", gap: "12px", alignItems: "center", children: [
176
177
  /* @__PURE__ */ a(D, { dashed: !0 }),
177
- /* @__PURE__ */ a(A, { animated: !0, width: "150px" })
178
+ /* @__PURE__ */ a(F, { animated: !0, width: "150px" })
178
179
  ] }),
179
180
  /* @__PURE__ */ a(K, { children: /* @__PURE__ */ a(
180
181
  h,
@@ -183,7 +184,7 @@ const Fe = {
183
184
  gap: "12px",
184
185
  justifyContent: "space-between",
185
186
  height: "203px",
186
- children: g.map((d, c) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ u(
187
+ children: p.map((s, l) => /* @__PURE__ */ a(J, { children: /* @__PURE__ */ u(
187
188
  h,
188
189
  {
189
190
  direction: "column",
@@ -191,16 +192,16 @@ const Fe = {
191
192
  alignItems: "start",
192
193
  padding: "8px",
193
194
  children: [
194
- /* @__PURE__ */ a(A, { animated: !0, width: "180px" }),
195
- /* @__PURE__ */ a(A, { animated: !0, width: "85px" })
195
+ /* @__PURE__ */ a(F, { animated: !0, width: "180px" }),
196
+ /* @__PURE__ */ a(F, { animated: !0, width: "85px" })
196
197
  ]
197
198
  }
198
- ) }, `condition-${c}`))
199
+ ) }, `condition-${l}`))
199
200
  }
200
201
  ) })
201
202
  ] });
202
203
  }, re = (t) => {
203
- var l;
204
+ var b;
204
205
  const { decision: e, loading: n = !1, textValues: i } = t, o = !!(e != null && e.effectiveFrom), r = !!(e != null && e.validUntil), p = o && r ? {
205
206
  element: {
206
207
  labelName: i == null ? void 0 : i.terms,
@@ -235,20 +236,21 @@ const Fe = {
235
236
  decisionDataType: e.decisionDataType || "alphabetical",
236
237
  value: $(e),
237
238
  howToSetTheDecision: e.howToSetTheDecision || "EqualTo"
238
- } : null, s = ((l = e == null ? void 0 : e.conditionsThatEstablishesTheDecision) == null ? void 0 : l.filter(
239
- (b) => !b.hidden
240
- )) || [], d = Array.from({ length: 5 });
239
+ } : null, d = ((b = e == null ? void 0 : e.conditionsThatEstablishesTheDecision) == null ? void 0 : b.filter(
240
+ (T) => !T.hidden
241
+ )) || [], c = Array.from({ length: 5 }), s = !!(!n && e && i && g), l = d.length < 2 ? "start" : "space-between";
241
242
  return /* @__PURE__ */ a(
242
- Ae,
243
+ Fe,
243
244
  {
244
- loading: !!(!n && e && i && g),
245
- textValues: i,
245
+ conditionsAlignment: l,
246
246
  decision: e,
247
- decisionMapper: g,
248
- visibleConditions: s,
249
247
  decisionDateElement: p,
250
- skeleton: d,
251
- terms: !!(i != null && i.terms)
248
+ decisionMapper: g,
249
+ loading: s,
250
+ skeleton: c,
251
+ terms: !!(i != null && i.terms),
252
+ textValues: i,
253
+ visibleConditions: d
252
254
  }
253
255
  );
254
256
  }, $e = f.div`
@@ -460,8 +462,8 @@ const qe = {
460
462
  handleOpenModal: r,
461
463
  handleDelete: p,
462
464
  textValues: g
463
- } = t, s = o ? Array.from({ length: 3 }).map(
464
- (c, l) => j({
465
+ } = t, d = o ? Array.from({ length: 3 }).map(
466
+ (s, l) => j({
465
467
  type: "loading",
466
468
  index: l,
467
469
  controls: e,
@@ -472,9 +474,9 @@ const qe = {
472
474
  textValues: g
473
475
  })
474
476
  ) : i == null ? void 0 : i.map(
475
- (c) => j({
477
+ (s) => j({
476
478
  type: "decision",
477
- decision: c,
479
+ decision: s,
478
480
  controls: e,
479
481
  customTitleContentAddCard: n,
480
482
  loading: o,
@@ -482,8 +484,8 @@ const qe = {
482
484
  handleDelete: p,
483
485
  textValues: g
484
486
  })
485
- ), d = ((i == null ? void 0 : i.length) === 0 || i.length < Math.floor(window.innerWidth / 300)) && !o && e;
486
- return { renderedCards: s, shouldRenderAddCard: d };
487
+ ), c = ((i == null ? void 0 : i.length) === 0 || i.length < Math.floor(window.innerWidth / 300)) && !o && e;
488
+ return { renderedCards: d, shouldRenderAddCard: c };
487
489
  }, gt = (t) => {
488
490
  const {
489
491
  controls: e = !0,
@@ -493,22 +495,22 @@ const qe = {
493
495
  textValues: r,
494
496
  decisionTemplate: p,
495
497
  isModalOpen: g,
496
- selectedDecision: s,
497
- loading: d,
498
- handleOpenModal: c,
498
+ selectedDecision: d,
499
+ loading: c,
500
+ handleOpenModal: s,
499
501
  handleCloseModal: l,
500
502
  handleSubmitForm: b,
501
503
  handleDelete: T,
502
504
  terms: m = !0
503
- } = t, C = I("(max-width: 681px)"), w = I("(max-width: 400px)"), { renderedCards: F, shouldRenderAddCard: U } = je({
505
+ } = t, C = I("(max-width: 681px)"), w = I("(max-width: 400px)"), { renderedCards: A, shouldRenderAddCard: U } = je({
504
506
  controls: e,
505
507
  customTitleContentAddCard: n,
506
508
  decisions: o,
507
- loading: d,
508
- handleOpenModal: c,
509
+ loading: c,
510
+ handleOpenModal: s,
509
511
  handleDelete: T,
510
512
  textValues: r
511
- }), R = (o == null ? void 0 : o.length) === 0 && !d;
513
+ }), R = (o == null ? void 0 : o.length) === 0 && !c;
512
514
  return /* @__PURE__ */ u(E, { children: [
513
515
  /* @__PURE__ */ a(Ve, { children: /* @__PURE__ */ a(Oe, { children: /* @__PURE__ */ a(h, { direction: "column", gap: "16px", padding: "6px", children: R ? /* @__PURE__ */ u(
514
516
  h,
@@ -543,7 +545,7 @@ const qe = {
543
545
  N,
544
546
  {
545
547
  iconBefore: /* @__PURE__ */ a(ee, {}),
546
- onClick: () => c ? c() : null,
548
+ onClick: () => s ? s() : null,
547
549
  children: n || "Agregar decisión"
548
550
  }
549
551
  )
@@ -562,15 +564,15 @@ const qe = {
562
564
  padding: "6px",
563
565
  height: C ? "auto" : "484px",
564
566
  children: [
565
- F,
567
+ A,
566
568
  U && j({
567
569
  type: "add",
568
570
  index: o == null ? void 0 : o.length,
569
571
  controls: e,
570
572
  customTitleContentAddCard: n,
571
573
  customMessageEmptyDecisions: i,
572
- loading: d,
573
- handleOpenModal: c,
574
+ loading: c,
575
+ handleOpenModal: s,
574
576
  handleDelete: T,
575
577
  textValues: r,
576
578
  shouldRenderEmptyMessage: R,
@@ -584,11 +586,11 @@ const qe = {
584
586
  {
585
587
  portalId: "modal-portal",
586
588
  onCloseModal: l,
587
- title: s ? "Editar Decisión" : "Nueva decisión",
589
+ title: d ? "Editar Decisión" : "Nueva decisión",
588
590
  children: /* @__PURE__ */ a(
589
591
  it,
590
592
  {
591
- decision: s || p,
593
+ decision: d || p,
592
594
  onSubmitEvent: b,
593
595
  textValues: r,
594
596
  onCancel: () => l ? l() : () => {
@@ -630,9 +632,9 @@ const qe = {
630
632
  alignItems: r,
631
633
  alignContent: p,
632
634
  height: g,
633
- width: s,
634
- gap: d,
635
- background: c,
635
+ width: d,
636
+ gap: c,
637
+ background: s,
636
638
  borderRadius: l,
637
639
  border: b,
638
640
  margin: T = "0px",
@@ -648,10 +650,10 @@ const qe = {
648
650
  alignItems: r,
649
651
  alignContent: p,
650
652
  height: g,
651
- width: s,
653
+ width: d,
652
654
  wrap: n,
653
- gap: d,
654
- background: c,
655
+ gap: c,
656
+ background: s,
655
657
  border: b,
656
658
  margin: T,
657
659
  padding: m,
@@ -730,17 +732,17 @@ const qe = {
730
732
  onClick: r,
731
733
  onCloseModal: p,
732
734
  portalId: g,
733
- title: s
734
- } = t, d = I("(max-width: 768px)"), c = document.getElementById(g);
735
- if (!c)
735
+ title: d
736
+ } = t, c = I("(max-width: 768px)"), s = document.getElementById(g);
737
+ if (!s)
736
738
  throw new Error(
737
739
  "The portal node is not defined. This can occur when the specific node used to render the portal has not been defined correctly."
738
740
  );
739
741
  return ae(
740
- /* @__PURE__ */ a(te, { children: /* @__PURE__ */ u(Pe, { $smallScreen: d, children: [
742
+ /* @__PURE__ */ a(te, { children: /* @__PURE__ */ u(Pe, { $smallScreen: c, children: [
741
743
  /* @__PURE__ */ u(h, { direction: "column", gap: "16px", children: [
742
744
  /* @__PURE__ */ u(h, { alignContent: "center", justifyContent: "space-between", children: [
743
- /* @__PURE__ */ a(y, { appearance: "dark", size: "small", type: "headline", children: s }),
745
+ /* @__PURE__ */ a(y, { appearance: "dark", size: "small", type: "headline", children: d }),
744
746
  /* @__PURE__ */ u(h, { alignItems: "center", children: [
745
747
  /* @__PURE__ */ a(y, { children: "Cerrar" }),
746
748
  /* @__PURE__ */ a(
@@ -781,7 +783,7 @@ const qe = {
781
783
  )
782
784
  ] })
783
785
  ] }) }),
784
- c
786
+ s
785
787
  );
786
788
  }, Tt = (t) => {
787
789
  const { fields: e, onChange: n } = t;
@@ -922,9 +924,9 @@ function Ke({
922
924
  o.values.value,
923
925
  o.values.decisionDataType
924
926
  ).schema),
925
- conditionsThatEstablishesTheDecision: Y((s, { parent: d }) => {
927
+ conditionsThatEstablishesTheDecision: Y((d, { parent: c }) => {
926
928
  var b;
927
- if ((d == null ? void 0 : d.toggleNone) && Object.keys(d.conditionsThatEstablishesTheDecision || {}).length > 0) return M().shape({});
929
+ if ((c == null ? void 0 : c.toggleNone) && Object.keys(c.conditionsThatEstablishesTheDecision || {}).length > 0) return M().shape({});
928
930
  const l = (b = t.conditionsThatEstablishesTheDecision) == null ? void 0 : b.reduce(
929
931
  (T, m) => {
930
932
  if (o.values.conditionsThatEstablishesTheDecision[m.conditionName] !== void 0) {
@@ -953,52 +955,52 @@ function Ke({
953
955
  "effective From date is required"
954
956
  ), r.validUntil = W().when(
955
957
  "checkClosed",
956
- (s, d, { parent: c }) => (c == null ? void 0 : c.checkClosed) ? d.required("valid Until date is required").test(
958
+ (d, c, { parent: s }) => (s == null ? void 0 : s.checkClosed) ? c.required("valid Until date is required").test(
957
959
  "is-after-startDate",
958
960
  "valid Until date must be greater than or equal to Start date",
959
961
  function(b) {
960
962
  const T = this.parent.effectiveFrom;
961
963
  return !T || !b ? !0 : new Date(b) >= new Date(T);
962
964
  }
963
- ) : d.notRequired()
965
+ ) : c.notRequired()
964
966
  ));
965
967
  const p = M(r);
966
968
  return o = xe({
967
969
  initialValues: i,
968
970
  validationSchema: p,
969
971
  validateOnBlur: !0,
970
- onSubmit: (s) => {
971
- var c;
972
- const d = {
972
+ onSubmit: (d) => {
973
+ var s;
974
+ const c = {
973
975
  ...t,
974
- ruleName: s.ruleName,
975
- decisionDataType: s.decisionDataType,
976
- howToSetTheDecision: s.howToSetTheDecision,
977
- value: s.value,
978
- effectiveFrom: s.effectiveFrom,
979
- validUntil: s.validUntil,
980
- conditionsThatEstablishesTheDecision: (c = t.conditionsThatEstablishesTheDecision) == null ? void 0 : c.filter((l) => {
981
- const b = s.conditionsThatEstablishesTheDecision[l.conditionName];
976
+ ruleName: d.ruleName,
977
+ decisionDataType: d.decisionDataType,
978
+ howToSetTheDecision: d.howToSetTheDecision,
979
+ value: d.value,
980
+ effectiveFrom: d.effectiveFrom,
981
+ validUntil: d.validUntil,
982
+ conditionsThatEstablishesTheDecision: (s = t.conditionsThatEstablishesTheDecision) == null ? void 0 : s.filter((l) => {
983
+ const b = d.conditionsThatEstablishesTheDecision[l.conditionName];
982
984
  return b != null && b !== "";
983
985
  }).map((l) => ({
984
986
  ...l,
985
- value: s.conditionsThatEstablishesTheDecision[l.conditionName]
987
+ value: d.conditionsThatEstablishesTheDecision[l.conditionName]
986
988
  }))
987
989
  };
988
- e(d);
990
+ e(c);
989
991
  }
990
- }), { formik: o, handleToggleNoneChange: (s) => {
991
- var d;
992
- o.setFieldValue("toggleNone", s), (d = t.conditionsThatEstablishesTheDecision) == null || d.forEach((c) => {
993
- if (s)
992
+ }), { formik: o, handleToggleNoneChange: (d) => {
993
+ var c;
994
+ o.setFieldValue("toggleNone", d), (c = t.conditionsThatEstablishesTheDecision) == null || c.forEach((s) => {
995
+ if (d)
994
996
  o.setFieldValue(
995
- `conditionsThatEstablishesTheDecision.${c.conditionName}`,
997
+ `conditionsThatEstablishesTheDecision.${s.conditionName}`,
996
998
  void 0
997
999
  );
998
1000
  else {
999
- const l = c.howToSetTheCondition === x.LIST_OF_VALUES_MULTI ? [] : "";
1001
+ const l = s.howToSetTheCondition === x.LIST_OF_VALUES_MULTI ? [] : "";
1000
1002
  o.setFieldValue(
1001
- `conditionsThatEstablishesTheDecision.${c.conditionName}`,
1003
+ `conditionsThatEstablishesTheDecision.${s.conditionName}`,
1002
1004
  l
1003
1005
  );
1004
1006
  }
@@ -1040,25 +1042,25 @@ const Xe = f.div`
1040
1042
  labelToggle: r,
1041
1043
  name: p,
1042
1044
  valueToggle: g = ""
1043
- } = t, [s, d] = V(e), c = (l) => {
1044
- d(l.target.checked), i(l);
1045
+ } = t, [d, c] = V(e), s = (l) => {
1046
+ c(l.target.checked), i(l);
1045
1047
  };
1046
1048
  return ye(() => {
1047
- d(e);
1049
+ c(e);
1048
1050
  }, [e]), /* @__PURE__ */ u(E, { children: [
1049
1051
  /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
1050
1052
  ie,
1051
1053
  {
1052
- checked: s,
1054
+ checked: d,
1053
1055
  id: o,
1054
1056
  name: p,
1055
- onChange: c,
1057
+ onChange: s,
1056
1058
  size: "small",
1057
1059
  value: g,
1058
1060
  children: /* @__PURE__ */ a(y, { size: "medium", type: "label", weight: "bold", children: r })
1059
1061
  }
1060
1062
  ) }),
1061
- s && /* @__PURE__ */ a(E, { children: n })
1063
+ d && /* @__PURE__ */ a(E, { children: n })
1062
1064
  ] });
1063
1065
  }, tt = (t) => {
1064
1066
  const {
@@ -1069,17 +1071,17 @@ const Xe = f.div`
1069
1071
  labelEnd: r,
1070
1072
  checkedClosed: p = !1,
1071
1073
  required: g = !1,
1072
- valueStart: s = "",
1073
- valueEnd: d = "",
1074
- messageStart: c = "",
1074
+ valueStart: d = "",
1075
+ valueEnd: c = "",
1076
+ messageStart: s = "",
1075
1077
  messageEnd: l = "",
1076
1078
  statusStart: b = "pending",
1077
1079
  statusEnd: T = "pending"
1078
- } = t, [m, C] = V(p), [w, F] = V(s), [U, R] = V(d), P = ({ target: S }) => {
1080
+ } = t, [m, C] = V(p), [w, A] = V(d), [U, R] = V(c), P = ({ target: S }) => {
1079
1081
  C(S.checked), i && i(S.checked);
1080
- }, de = (S) => {
1081
- F(S.target.value), e(S);
1082
1082
  }, se = (S) => {
1083
+ A(S.target.value), e(S);
1084
+ }, de = (S) => {
1083
1085
  R(S.target.value), n(S);
1084
1086
  }, ce = I("(max-width: 400px)");
1085
1087
  return /* @__PURE__ */ u(E, { children: [
@@ -1126,12 +1128,12 @@ const Xe = f.div`
1126
1128
  {
1127
1129
  id: "dateStart",
1128
1130
  label: o,
1129
- onChange: de,
1131
+ onChange: se,
1130
1132
  value: w,
1131
1133
  required: g,
1132
1134
  size: "compact",
1133
1135
  status: b,
1134
- message: c
1136
+ message: s
1135
1137
  }
1136
1138
  ),
1137
1139
  m && /* @__PURE__ */ a(
@@ -1139,7 +1141,7 @@ const Xe = f.div`
1139
1141
  {
1140
1142
  id: "dateEnd",
1141
1143
  label: r,
1142
- onChange: se,
1144
+ onChange: de,
1143
1145
  value: U,
1144
1146
  required: g,
1145
1147
  size: "compact",
@@ -1160,9 +1162,9 @@ const Xe = f.div`
1160
1162
  normalizedDecision: r,
1161
1163
  handleToggleNoneChange: p,
1162
1164
  handleConditionToggleChange: g,
1163
- showConditionsError: s,
1164
- termStartStatus: d,
1165
- termEndStatus: c
1165
+ showConditionsError: d,
1166
+ termStartStatus: c,
1167
+ termEndStatus: s
1166
1168
  } = t;
1167
1169
  return /* @__PURE__ */ a("form", { onSubmit: e.handleSubmit, children: /* @__PURE__ */ u(h, { direction: "column", gap: "24px", children: [
1168
1170
  Q({
@@ -1229,8 +1231,8 @@ const Xe = f.div`
1229
1231
  valueEnd: e.values.validUntil,
1230
1232
  messageStart: e.errors.effectiveFrom,
1231
1233
  messageEnd: e.errors.validUntil,
1232
- statusStart: d,
1233
- statusEnd: c,
1234
+ statusStart: c,
1235
+ statusEnd: s,
1234
1236
  onHandleStartChange: (l) => e.setFieldValue("effectiveFrom", l.target.value),
1235
1237
  onHandleEndChange: (l) => e.setFieldValue("validUntil", l.target.value),
1236
1238
  onCheckClosedChange: (l) => {
@@ -1241,7 +1243,7 @@ const Xe = f.div`
1241
1243
  )
1242
1244
  ] }),
1243
1245
  /* @__PURE__ */ a(D, {}),
1244
- s && /* @__PURE__ */ a(y, { type: "label", size: "medium", appearance: "danger", children: String(e.errors.conditionsThatEstablishesTheDecision) }),
1246
+ d && /* @__PURE__ */ a(y, { type: "label", size: "medium", appearance: "danger", children: String(e.errors.conditionsThatEstablishesTheDecision) }),
1245
1247
  /* @__PURE__ */ u(h, { direction: "row", justifyContent: "end", gap: "16px", children: [
1246
1248
  /* @__PURE__ */ a(N, { appearance: "gray", onClick: i, children: n.cancel }),
1247
1249
  /* @__PURE__ */ a(N, { type: "submit", children: n.confirm })
@@ -1259,9 +1261,9 @@ const Xe = f.div`
1259
1261
  howToSetTheCondition: e.howToSetTheDecision,
1260
1262
  decisionDataType: e.decisionDataType,
1261
1263
  listOfPossibleValues: e.listOfPossibleValues
1262
- }, s = ((T = e.conditionsThatEstablishesTheDecision) == null ? void 0 : T.filter(
1264
+ }, d = ((T = e.conditionsThatEstablishesTheDecision) == null ? void 0 : T.filter(
1263
1265
  (m) => !m.hidden
1264
- )) || [], d = !!r.errors.conditionsThatEstablishesTheDecision && r.submitCount > 0, c = r.touched.effectiveFrom ? r.errors.effectiveFrom ? "invalid" : "valid" : void 0, l = r.touched.validUntil ? r.errors.validUntil ? "invalid" : "valid" : void 0;
1266
+ )) || [], c = !!r.errors.conditionsThatEstablishesTheDecision && r.submitCount > 0, s = r.touched.effectiveFrom ? r.errors.effectiveFrom ? "invalid" : "valid" : void 0, l = r.touched.validUntil ? r.errors.validUntil ? "invalid" : "valid" : void 0;
1265
1267
  return /* @__PURE__ */ a(
1266
1268
  nt,
1267
1269
  {
@@ -1269,7 +1271,7 @@ const Xe = f.div`
1269
1271
  onCancel: o,
1270
1272
  textValues: i,
1271
1273
  decision: e,
1272
- visibleConditions: s,
1274
+ visibleConditions: d,
1273
1275
  normalizedDecision: g,
1274
1276
  handleToggleNoneChange: p,
1275
1277
  handleConditionToggleChange: (m, C) => (w) => {
@@ -1283,15 +1285,15 @@ const Xe = f.div`
1283
1285
  !1
1284
1286
  );
1285
1287
  else {
1286
- const F = C ? [] : "";
1288
+ const A = C ? [] : "";
1287
1289
  r.setFieldValue(
1288
1290
  `conditionsThatEstablishesTheDecision.${m}`,
1289
- F
1291
+ A
1290
1292
  );
1291
1293
  }
1292
1294
  },
1293
- showConditionsError: d,
1294
- termStartStatus: c,
1295
+ showConditionsError: c,
1296
+ termStartStatus: s,
1295
1297
  termEndStatus: l
1296
1298
  }
1297
1299
  );
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  ],
11
11
  "description": "",
12
12
  "private": false,
13
- "version": "1.0.0",
13
+ "version": "1.0.2",
14
14
  "type": "module",
15
15
  "exports": {
16
16
  ".": {