sccoreui 5.4.7 → 5.4.8

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 (4) hide show
  1. package/dist/App.scss +9 -1
  2. package/dist/components/formula-template/FormulaCoponent.js +105 -66
  3. package/dist/types/components/types/type.d.ts +4 -4
  4. package/package.json +1 -1
package/dist/App.scss CHANGED
@@ -851,7 +851,7 @@ button[aria-expanded="true"] {
851
851
  //////////////////////////////////////////////
852
852
  ///
853
853
 
854
- .price_condition_menu {
854
+ .condition_menu {
855
855
  width: 648px !important;
856
856
  }
857
857
 
@@ -885,4 +885,12 @@ button[aria-expanded="true"] {
885
885
  min-width: 6px;
886
886
  height: 32px;
887
887
  }
888
+
889
+ }
890
+
891
+ .formula_condition_dropdown {
892
+ box-shadow: none !important;
893
+ .p-dropdown-label {
894
+ display: block !important;
895
+ }
888
896
  }
package/dist/components/formula-template/FormulaCoponent.js CHANGED
@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const dropdown_1 = require("primereact/dropdown");
7
7
  const inputtext_1 = require("primereact/inputtext");
8
+ const inputnumber_1 = require("primereact/inputnumber");
8
9
  const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
9
10
  const menu_1 = require("primereact/menu");
10
11
  const FormulaCoponent = (props) => {
@@ -15,6 +16,8 @@ const FormulaCoponent = (props) => {
15
16
  const contentEditableDivRef = (0, react_1.useRef)(null);
16
17
  const [content, setContent] = (0, react_1.useState)(`<span class='formulaSpanElm'></span>`);
17
18
  const [contentEditableCursorIndex, setContentEditableCursorIndex] = (0, react_1.useState)(null);
19
+ const [conditionValue, setConditionValue] = (0, react_1.useState)(1);
20
+ const [formulaPlaceholder, setFormulaPlaceholder] = (0, react_1.useState)(true);
18
21
  const operators = {
19
22
  "addition": '+',
20
23
  "subtraction": '-',
@@ -25,6 +28,7 @@ const FormulaCoponent = (props) => {
25
28
  "closeBracket": ")",
26
29
  };
27
30
  const onSelecteItem = (item) => {
31
+ var _a, _b, _c;
28
32
  if (selectedItem) {
29
33
  if (selectedItem.find((id) => id === item.id))
30
34
  setSelectedItem(selectedItem.filter((id) => id !== item.id));
@@ -34,28 +38,24 @@ const FormulaCoponent = (props) => {
34
38
  else {
35
39
  setSelectedItem([item.id]);
36
40
  }
37
- let chipElm = ` <div class="formulaChipElm max-w-8rem w-max h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 border-round-sm p-1" contentEditable=${false} itemId=${item === null || item === void 0 ? void 0 : item.id} title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div> `;
41
+ let chipElm = ` <div class="formulaChipElm max-w-8rem w-max h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 border-round-sm p-1 ${props.formulaChipClassName}" contentEditable=${false} itemId=${item === null || item === void 0 ? void 0 : item.id} title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div> `;
38
42
  let currentText = contentEditableDivRef.current.innerHTML === '<span class="formulaSpanElm"></span>' ? '<span class="formulaSpanElm"></span>' : contentEditableDivRef.current.innerHTML;
39
43
  if (contentEditableCursorIndex === null) {
40
44
  let str = currentText + chipElm + `<span class='formulaSpanElm'></span>`;
41
45
  setContent(str);
42
46
  }
43
47
  else {
44
- if (document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.length === contentEditableCursorIndex) {
48
+ if (((_a = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.innerHTML.length) === contentEditableCursorIndex) {
45
49
  let sliptText = currentText.split(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML);
46
50
  let str = sliptText[0] + document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML + chipElm + `<span class='formulaSpanElm'></span>` + sliptText[1];
47
51
  setContent(str);
48
52
  }
49
53
  else {
50
- // let sliptText = document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML.split(document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(contentEditableCursorIndex))
51
- const firstPart = `<span class="formulaSpanElm activeSpanElm">` + document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(0, contentEditableCursorIndex);
52
- // const secondPart = document.querySelector('.formulaSpanElm.activeSpanElm').innerHTML.substring(contentEditableCursorIndex) + `</span>`;
53
- let contentSplit = contentEditableDivRef.current.innerHTML.split(firstPart);
54
- let str = contentSplit[0] + firstPart + `</span>` + chipElm + `<span class="formulaSpanElm">` + contentSplit[1];
54
+ const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML);
55
+ const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index) + `<span class="formulaSpanElm activeSpanElm">${(_b = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _b === void 0 ? void 0 : _b.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
56
+ const secondContent = `<span class="formulaSpanElm">${(_c = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(contentEditableCursorIndex)}</span>` + contentEditableDivRef.current.innerHTML.slice(index).split(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML)[1];
57
+ const str = firstContent + chipElm + secondContent;
55
58
  setContent(str);
56
- // let sliptText = currentText.split(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML)
57
- // let str = sliptText[0] + document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML + chipElm + '<span class="formulaSpanElm"></span>' +sliptText[1]
58
- // setContent(str);
59
59
  }
60
60
  }
61
61
  setTimeout(() => {
@@ -66,7 +66,10 @@ const FormulaCoponent = (props) => {
66
66
  const onChangeCondition = () => {
67
67
  // Here we are validating a formula for its end result.
68
68
  // The end result should be a number, whether negative or positive.
69
- let elements = contentEditableDivRef.current.children;
69
+ if ((contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current) === null) {
70
+ return;
71
+ }
72
+ let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
70
73
  let formula = '';
71
74
  for (let i = 0; i < elements.length; i++) {
72
75
  const element = elements[i];
@@ -78,6 +81,7 @@ const FormulaCoponent = (props) => {
78
81
  else
79
82
  formula = formula + (element.innerHTML ? element.innerHTML : ' ');
80
83
  }
84
+ formula = formula.replaceAll('<br>', '');
81
85
  // If the formula ends with any operator without ending with numbers, then the formula is not correct
82
86
  const regex = /^(?!0+$)(?=.*[+\-*/%])(?!.*(?:\s|\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
83
87
  if (!regex.test(formula) && formula !== '0' && formula !== '') {
@@ -87,8 +91,7 @@ const FormulaCoponent = (props) => {
87
91
  // The eval() JavaScript method will give us a result from the string.
88
92
  // If the eval() result is NOT A NUMBER it will go to the error block.
89
93
  // const str = formula.replaceAll(' ', '')
90
- let total = eval(formula);
91
- console.log(total);
94
+ eval(formula);
92
95
  setIsValid(true);
93
96
  }
94
97
  catch (error) {
@@ -106,28 +109,35 @@ const FormulaCoponent = (props) => {
106
109
  const clonedRange = range.cloneRange();
107
110
  clonedRange.selectNodeContents(contentEditableElm);
108
111
  clonedRange.setEnd(range.endContainer, range.endOffset);
109
- return clonedRange.toString().length;
112
+ setContentEditableCursorIndex(clonedRange.toString().length);
110
113
  }
111
114
  const onConditionKeyDown = (event) => {
112
- var _a, _b;
115
+ var _a;
113
116
  const content = event.target.textContent.trim();
114
117
  const lastChar = content.charAt(content.length - 1);
115
118
  const operators = ['%', '*', '-', '+', '/'];
116
119
  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
117
- let spanElms = document.querySelectorAll('.formulaSpanElm');
118
- for (let i = 0; i < spanElms.length; i++) {
119
- if (spanElms[i]) {
120
- if (((_a = spanElms[i]) === null || _a === void 0 ? void 0 : _a.classList.value) === 'formulaSpanElm activeSpanElm') {
121
- (_b = spanElms[i]) === null || _b === void 0 ? void 0 : _b.classList.remove('activeSpanElm');
122
- let curentSpan = (event.key === 'ArrowLeft' || event.key === 'ArrowUp') ? i === 0 ? spanElms[i] : spanElms[i - 1] : (spanElms.length - 1) === i ? spanElms[i] : spanElms[i + 1];
123
- curentSpan === null || curentSpan === void 0 ? void 0 : curentSpan.classList.add('activeSpanElm');
124
- i = spanElms.length;
125
- return;
126
- }
127
- }
128
- else {
129
- return;
130
- }
120
+ let actElm = document.querySelector('.formulaSpanElm.activeSpanElm');
121
+ if (actElm)
122
+ actElm.classList.remove('activeSpanElm');
123
+ const selection = window.getSelection();
124
+ const range = document.createRange();
125
+ range.setStart(selection.focusNode, selection.focusOffset);
126
+ if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
127
+ range.collapse(true);
128
+ }
129
+ else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
130
+ range.collapse(false);
131
+ }
132
+ selection.removeAllRanges();
133
+ selection.addRange(range);
134
+ setContentEditableCursorIndex(range.startOffset);
135
+ if (!range.startContainer.parentElement.getAttribute('id')) {
136
+ range.startContainer.parentElement.classList.add('activeSpanElm');
137
+ }
138
+ else {
139
+ let eml = range.startContainer;
140
+ eml === null || eml === void 0 ? void 0 : eml.classList.add('activeSpanElm');
131
141
  }
132
142
  }
133
143
  // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
@@ -135,6 +145,15 @@ const FormulaCoponent = (props) => {
135
145
  (event.key === 'a' && event.ctrlKey) || (event.key === 'A' && event.ctrlKey) ||
136
146
  event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' ||
137
147
  event.key === 'ArrowDown' || event.key === 'Home' || event.key === 'End' || event.key === 'Shift') {
148
+ if (event.key === 'Backspace' || event.key === 'Delete') {
149
+ let spanElms = document.querySelectorAll('.formulaSpanElm');
150
+ for (let i = 0; i < spanElms.length; i++) {
151
+ if (((_a = spanElms[i]) === null || _a === void 0 ? void 0 : _a.classList.value) === 'formulaSpanElm activeSpanElm' && (spanElms[i].innerHTML === '' || spanElms[i].innerHTML === '<br>')) {
152
+ spanElms[i - 1].classList.add('activeSpanElm');
153
+ }
154
+ }
155
+ onChangeCondition();
156
+ }
138
157
  return;
139
158
  }
140
159
  // Allow numbers, *, -, +, %, /, (, ), and single space
@@ -148,9 +167,9 @@ const FormulaCoponent = (props) => {
148
167
  if (event.key === 'Enter') {
149
168
  event.preventDefault();
150
169
  }
151
- const cursorPosition = getCursorPosition(event.target);
170
+ getCursorPosition(event.target);
152
171
  // Prevent entering operators continuously after each other
153
- if (operators.includes(event.key) && operators.includes(lastChar) && operators.includes(content[cursorPosition - 2])) {
172
+ if (operators.includes(event.key) && operators.includes(lastChar) && operators.includes(content[contentEditableCursorIndex - 2])) {
154
173
  event.preventDefault();
155
174
  }
156
175
  };
@@ -163,21 +182,6 @@ const FormulaCoponent = (props) => {
163
182
  setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
164
183
  }
165
184
  };
166
- const handleKeyPress = (event) => {
167
- if ((event.key === 'Delete' || event.key === 'Backspace') && contentEditableDivRef.current) {
168
- const selection = window.getSelection();
169
- if (selection && selection.rangeCount > 0) {
170
- const range = selection.getRangeAt(0);
171
- const cursorElement = range.startContainer.parentElement;
172
- if (cursorElement === null || cursorElement === void 0 ? void 0 : cursorElement.classList.contains('formulaChipElm')) {
173
- cursorElement.remove();
174
- setContent(contentEditableDivRef.current.innerHTML);
175
- event.preventDefault();
176
- return;
177
- }
178
- }
179
- }
180
- };
181
185
  const onClickContentEditable = (e) => {
182
186
  var _a, _b, _c;
183
187
  if (!e.target.classList.contains('formulaSpanElm')) {
@@ -200,7 +204,6 @@ const FormulaCoponent = (props) => {
200
204
  let elm = document.querySelector('.activeSpanElm');
201
205
  const operators = ['%', '*', '-', '+', '/'];
202
206
  const lastChar = (_a = elm.innerHTML) === null || _a === void 0 ? void 0 : _a.charAt(((_b = elm.innerHTML) === null || _b === void 0 ? void 0 : _b.length) - 1);
203
- // const cursorPosition = getCursorPosition(elm);
204
207
  // Prevent entering operators coonChangeCondition(str);ntinuously after each other
205
208
  if (lastChar && operators.includes(lastChar)) {
206
209
  event.preventDefault();
@@ -223,20 +226,28 @@ const FormulaCoponent = (props) => {
223
226
  }
224
227
  // setContent(contentEditableDivRef.current.innerHTML)
225
228
  priceConditioRef.current.toggle(event);
229
+ formula = formula.replaceAll('<br>', '');
226
230
  props.onSaveFormula(formula);
227
231
  };
228
232
  const menuContent = [
229
233
  {
230
234
  template: () => {
231
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section flex border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 border-right-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-gray-50 w-full h-auto border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 h-2rem flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + ' (0)', " "] }) })), (props === null || props === void 0 ? void 0 : props.fieldFilter) &&
235
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full" }, { children: [(props === null || props === void 0 ? void 0 : props.headerTemplate) ?
236
+ (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.headerTemplate })
237
+ :
238
+ (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `condition_section_header flex align-items-center justify-content-between p-4 w-full ${props === null || props === void 0 ? void 0 : props.headerTemplateClassName}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: '' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-lg font-bold' }, { children: (props === null || props === void 0 ? void 0 : props.headerLabel) ? props === null || props === void 0 ? void 0 : props.headerLabel : 'Configure Value' })), (0, jsx_runtime_1.jsx)("span", { children: (props === null || props === void 0 ? void 0 : props.headerDescription) ? props === null || props === void 0 ? void 0 : props.headerDescription : 'Select price attribute and perform calculater.' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: '' }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "message-question-circle", size: 16 }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section flex border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6 border-right-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-gray-50 w-full h-auto border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 h-2rem flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + ' (0)', " "] }) })), (props === null || props === void 0 ? void 0 : props.fieldFilter) &&
232
239
  (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 py-2 border-top-1 border-gray-200" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex aling-items-center w-full" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-full flex align-items-cente justify-content-center w-2rem absolute left-0" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onInput: (e) => onFilter(e), className: "pl-8 w-full", placeholder: props.fieldOptionFilterPlaceholder })] })) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_itemibute_list_sect overflow-auto flex flex-column row-gap-2 px-4 py-2` }, { children: fieldOptions.length > 0 ?
233
240
  (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'grid gap-2 p-2' }, { children: fieldOptions === null || fieldOptions === void 0 ? void 0 : fieldOptions.map((item, index) => {
234
- return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'max-w-8rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 cursor-pointer item_chip border-round-sm p-1', onClick: () => onSelecteItem(item), title: item === null || item === void 0 ? void 0 : item.name }, { children: item === null || item === void 0 ? void 0 : item.name }), 'formula__option__' + index));
241
+ return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `max-w-8rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 cursor-pointer item_chip border-round-sm p-1 ${props === null || props === void 0 ? void 0 : props.fieldOptionClassName}`, onClick: () => onSelecteItem(item), title: item === null || item === void 0 ? void 0 : item.name }, { children: item === null || item === void 0 ? void 0 : item.name }), 'formula__option__' + index));
235
242
  }) }))
236
243
  :
237
244
  (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-gray-700 fobt-bold text-lg text-center' }, { children: (props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage) ? props === null || props === void 0 ? void 0 : props.fieldFilterEmptyMessage : 'No Results Found!' })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-4 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
238
245
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator text-center text-lg w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm", onClick: (e) => onAddOperator(e, operators[operator]) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-lg font-bold' }, { children: operators[operator] })) }), 'formula__operator_' + index));
239
- }) })), (0, jsx_runtime_1.jsx)("div", { onClick: (e) => onClickContentEditable(e), ref: contentEditableDivRef, onKeyDownCapture: handleKeyPress, dangerouslySetInnerHTML: { __html: content }, onKeyDown: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), className: `condition_configure px-4 py-2 h-17rem overflow-auto w-full `, contentEditable: true })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_footer_section flex align-items-center p-2" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (e) => onSave(e), className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover ${!isValid && 'p-disabled'}` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] }))] }), 'formula__dev'));
246
+ }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'relative h-17rem w-full' }, { children: [(0, jsx_runtime_1.jsx)("div", { onClick: (e) => onClickContentEditable(e), ref: contentEditableDivRef, dangerouslySetInnerHTML: { __html: content }, onKeyUp: (e) => onConditionKeyDown(e), onInput: () => onChangeCondition(), onFocus: () => setFormulaPlaceholder(false), className: `condition_configure px-4 py-2 h-17rem overflow-auto w-full absolute top-0 left-0 z-5`, id: "condition_configure_elm", contentEditable: true }), (content === `<span class='formulaSpanElm'></span>` && formulaPlaceholder) &&
247
+ (0, jsx_runtime_1.jsx)("span", Object.assign({ className: ' px-4 py-2 top-0 text-lg left-0 absolute z-3' }, { children: (props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder) ? props === null || props === void 0 ? void 0 : props.formulaElemectPlaceholder : 'Please Enter Formula' }))] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ?
248
+ (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })
249
+ :
250
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (e) => onSave(e), className: `w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover ${!isValid && 'p-disabled'}` }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] }) }))] }), 'formula__dev'));
240
251
  }
241
252
  }
242
253
  ];
@@ -244,23 +255,15 @@ const FormulaCoponent = (props) => {
244
255
  // Select all div elements with the specified class name
245
256
  const divElements = document.querySelectorAll('.formulaSpanElm');
246
257
  // Loop through each div element
247
- divElements.forEach(function (divElement) {
258
+ divElements.forEach((divElement) => {
248
259
  // Add an event listener for the 'click' event to each div element
249
260
  divElement.addEventListener('click', function (e) {
250
261
  var _a;
251
262
  (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
252
263
  e.target.classList.add('activeSpanElm');
253
- let index = getCursorPosition(e.target);
254
- setContentEditableCursorIndex(index);
264
+ getCursorPosition(e.target);
255
265
  // Your event handler code here
256
266
  });
257
- divElement.addEventListener('keydown', function (e) {
258
- var _a;
259
- (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
260
- e.target.classList.add('activeSpanElm');
261
- let index = getCursorPosition(e.target);
262
- setContentEditableCursorIndex(index);
263
- });
264
267
  });
265
268
  };
266
269
  const onShowMenu = () => {
@@ -276,17 +279,19 @@ const FormulaCoponent = (props) => {
276
279
  // let chipElm: string = '';
277
280
  // let text = splitText[i];
278
281
  const id = splitText[i].match(pattern);
279
- let item = fieldOptions.find((x) => x.id === id[0]);
280
- const chipElm = `<div class="formulaChipElm max-w-8rem w-max h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 border-round-sm p-1" contentEditable=${false} itemId=${item === null || item === void 0 ? void 0 : item.id} title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div>`;
282
+ let chipElm = '';
283
+ if (id) {
284
+ let item = fieldOptions.find((x) => x.id === id[0]);
285
+ chipElm = `<div class="formulaChipElm max-w-8rem w-max h-2rem overflow-hidden text-overflow-ellipsis white-space-nowrap bg-blue-100 text-gray-600 border-round-sm p-1" contentEditable=${false} itemId=${item === null || item === void 0 ? void 0 : item.id} title=${item === null || item === void 0 ? void 0 : item.name}>${item === null || item === void 0 ? void 0 : item.name}</div>`;
286
+ }
281
287
  // chipElm = text.replace(text, t)
282
288
  const placeholderText = splitText[i].replace(pattern, '|');
283
289
  const textParts = placeholderText.split('|').filter(part => part !== '');
284
- console.log('Text:', textParts);
285
290
  if (textParts.length > 0) {
286
291
  for (let z = 0; z < textParts.length; z++) {
287
- if (z === 0 && (splitText.length - 1) === i)
292
+ if (z === 0 && (splitText.length - 1) === i && chipElm)
288
293
  formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm + `<span class='formulaSpanElm'></span>` : `<span class='formulaSpanElm'></span>`;
289
- else if (z === 0)
294
+ else if (z === 0 && chipElm)
290
295
  formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm : `<span class='formulaSpanElm'></span>`;
291
296
  else
292
297
  formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` : `<span class='formulaSpanElm'></span>`;
@@ -301,10 +306,44 @@ const FormulaCoponent = (props) => {
301
306
  }
302
307
  setContent(formulatText);
303
308
  }
309
+ else {
310
+ setFormulaPlaceholder(true);
311
+ }
304
312
  setTimeout(() => {
305
313
  addEventListenerForSpan();
306
314
  }, 1000);
307
315
  };
308
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden", style: { width: "432px" } }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : 'Select', value: 0, className: "sc_animate w-10rem price_list_manage_price_rule_condition_dropdown border-right-1 border-gray-300 border-none border-noround\t", options: props === null || props === void 0 ? void 0 : props.options }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-auto cursor-pointer", onClick: (e) => { var _a; return (_a = priceConditioRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: onShowMenu, popup: true, popupAlignment: "left", className: 'price_condition_menu p-0', model: menuContent, ref: priceConditioRef, id: "price_condition_menu" })] }), "asadssadsasdsdadasd"));
316
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_column border-1 flex border-gray-100 border-round-lg overflow-hidden", style: { width: "432px" } }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, "data-pr-classname": 'block', placeholder: (props === null || props === void 0 ? void 0 : props.dropdownPlaceholder) ? props === null || props === void 0 ? void 0 : props.dropdownPlaceholder : 'Select', value: conditionValue, onChange: (e) => { setConditionValue(e.value); }, className: `sc_animate w-4 overflow-hidden text-overflow-ellipsis white-space-nowrap formula_condition_dropdown border-right-1 border-gray-300 border-none border-noround ${props === null || props === void 0 ? void 0 : props.className}`, options: props === null || props === void 0 ? void 0 : props.options }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (() => {
317
+ var _a, _b;
318
+ let optiontype = (_a = props === null || props === void 0 ? void 0 : props.options.find((x) => x.value === conditionValue)) === null || _a === void 0 ? void 0 : _a.optionType;
319
+ switch (optiontype) {
320
+ case "INCREASE_BY_VALUE":
321
+ case "DECREASE_BY_VALUE": {
322
+ return (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { placeholder: 'Enter Number', value: props === null || props === void 0 ? void 0 : props.inputValue, className: 'border-none w-8', inputClassName: 'border-none \tfocus:shadow-none' });
323
+ }
324
+ case "INCREASE_BY_PERCENTAGE":
325
+ case "DECREASE_BY_PERCENTAGE": {
326
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'w-8 relative' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'absolute left-0 h-full flex align-items-center px-2' }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 16, color: '#344054' }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { placeholder: 'Enter Number', value: props === null || props === void 0 ? void 0 : props.inputValue, className: 'border-none w-full', inputClassName: 'border-none \tpl-8 focus:shadow-none' })] })));
327
+ }
328
+ case "MANUAL": {
329
+ return (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { placeholder: 'Enter Number', value: props === null || props === void 0 ? void 0 : props.inputValue, className: 'border-none w-8', inputClassName: 'border-none \tfocus:shadow-none' });
330
+ }
331
+ case "CALCULATION": {
332
+ const pattern = /[a-f0-9]{24}/g;
333
+ const ids = props === null || props === void 0 ? void 0 : props.formulaValue.match(pattern);
334
+ console.log(ids);
335
+ let text = props === null || props === void 0 ? void 0 : props.formulaValue;
336
+ for (let i = 0; i < ids.length; i++) {
337
+ let id = ids[i];
338
+ let name = (_b = fieldOptions.find((item) => item.id === id)) === null || _b === void 0 ? void 0 : _b.name;
339
+ text = text.replaceAll(id, name);
340
+ }
341
+ return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-8 h-auto cursor-pointer flex align-items-center px-4", onClick: (e) => { var _a; return (_a = priceConditioRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e); } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-gray-700 overflow-hidden text-overflow-ellipsis white-space-nowrap w-full' }, { children: (props === null || props === void 0 ? void 0 : props.formulaValue) ? text : 'Select' })) }));
342
+ }
343
+ default: {
344
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
345
+ }
346
+ }
347
+ })() }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: onShowMenu, popup: true, popupAlignment: "left", className: `condition_menu p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
309
348
  };
310
349
  exports.default = FormulaCoponent;
package/dist/types/components/types/type.d.ts CHANGED
@@ -288,26 +288,26 @@ export interface FormulaTemplateTypes {
288
288
  inputPlaceholder?: string;
289
289
  headerTemplate?: React.ReactNode;
290
290
  headerTemplateClassName?: string;
291
+ headerLabel?: string;
292
+ headerDescription?: string;
291
293
  formulaOperators: MathematicalOperator[];
292
294
  formulaElemectClassName?: string;
293
295
  formulaElemectPlaceholder?: string;
294
296
  formulaValue: string;
297
+ inputValue?: number;
295
298
  fieldOptionTemplateTitle?: string;
296
299
  fieldOptions: any[];
297
300
  fieldFilter?: boolean | undefined;
298
301
  fieldFilterEmptyMessage?: string;
299
- fieldFilterOption?: string;
302
+ fieldFilterOption: string;
300
303
  fieldOptionFilterPlaceholder?: string;
301
- fieldOptionTemplate?: React.ReactNode;
302
304
  fieldOptionClassName?: string;
303
- formulaChipTemplate?: React.ReactNode;
304
305
  formulaChipClassName?: string;
305
306
  footerTemplate?: React.ReactNode;
306
307
  footerTemplateClassName?: string;
307
308
  onSaveFormula?: (payload: any) => void;
308
309
  onClose?: () => void;
309
310
  options: ConfigurValueOptionsTypes[];
310
- optionClassName?: string;
311
311
  optionLabel?: string;
312
312
  menuClassName?: string;
313
313
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "5.4.7",
3
+ "version": "5.4.8",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",