sccoreui 5.7.2 → 5.7.3

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 (77) hide show
  1. package/dist/components/ag-grid/Types.js +1 -0
  2. package/dist/components/formula-template/FormulaCoponent.js +137 -61
  3. package/dist/types/components/ag-grid/Types.d.ts +0 -1
  4. package/dist/types/components/formula-template/FormulaCoponent.d.ts +2 -2
  5. package/dist/types/index.d.ts +0 -1
  6. package/package.json +1 -1
  7. package/dist/App.scss +0 -914
  8. package/dist/assets/App.scss +0 -130
  9. package/dist/assets/flex.css +0 -21652
  10. package/dist/assets/fonts/Lato-Black.ttf +0 -0
  11. package/dist/assets/fonts/Lato-Bold.ttf +0 -0
  12. package/dist/assets/fonts/Lato-Light.ttf +0 -0
  13. package/dist/assets/fonts/Lato-Regular.ttf +0 -0
  14. package/dist/assets/fonts/Lato-Thin.ttf +0 -0
  15. package/dist/assets/fonts/Roboto-Bold.ttf +0 -0
  16. package/dist/assets/fonts/Roboto-Italic.ttf +0 -0
  17. package/dist/assets/fonts/Roboto-Medium.ttf +0 -0
  18. package/dist/assets/fonts/Roboto-Regular.ttf +0 -0
  19. package/dist/assets/fonts/primeicons.eot +0 -0
  20. package/dist/assets/fonts/primeicons.svg +0 -292
  21. package/dist/assets/fonts/primeicons.ttf +0 -0
  22. package/dist/assets/fonts/primeicons.woff +0 -0
  23. package/dist/assets/fonts/primeicons.woff2 +0 -0
  24. package/dist/assets/images/Payment-method-apple-card.png +0 -0
  25. package/dist/assets/images/Payment-method-card-white.png +0 -0
  26. package/dist/assets/images/Payment-method-master-card.png +0 -0
  27. package/dist/assets/images/avatar.png +0 -0
  28. package/dist/assets/images/avatar1.png +0 -0
  29. package/dist/assets/images/avatar2.png +0 -0
  30. package/dist/assets/images/avatar3.png +0 -0
  31. package/dist/assets/images/avatar4.png +0 -0
  32. package/dist/assets/images/avatar5.png +0 -0
  33. package/dist/assets/images/avatar6.png +0 -0
  34. package/dist/assets/images/avatar7.png +0 -0
  35. package/dist/assets/images/avatar8.png +0 -0
  36. package/dist/assets/images/avatar9.png +0 -0
  37. package/dist/assets/images/company.png +0 -0
  38. package/dist/assets/images/company1.png +0 -0
  39. package/dist/assets/images/company2.png +0 -0
  40. package/dist/assets/images/company3.png +0 -0
  41. package/dist/assets/images/company4.png +0 -0
  42. package/dist/assets/images/company5.png +0 -0
  43. package/dist/assets/images/company6.png +0 -0
  44. package/dist/assets/images/demoImage.png +0 -0
  45. package/dist/assets/images/label-image.png +0 -0
  46. package/dist/assets/images/profile-square-image.png +0 -0
  47. package/dist/assets/png/salseforce-img.png +0 -0
  48. package/dist/assets/sccoreicons.css +0 -1105
  49. package/dist/assets/sccoreui.css +0 -8927
  50. package/dist/assets/svg/add.svg +0 -3
  51. package/dist/assets/svg/back-button.svg +0 -3
  52. package/dist/assets/svg/check-white.svg +0 -3
  53. package/dist/assets/svg/check.svg +0 -3
  54. package/dist/assets/svg/check2.svg +0 -3
  55. package/dist/assets/svg/close.svg +0 -3
  56. package/dist/assets/svg/delete.svg +0 -3
  57. package/dist/assets/svg/done_all.svg +0 -3
  58. package/dist/assets/svg/dot_list.svg +0 -3
  59. package/dist/assets/svg/down_arrow.svg +0 -3
  60. package/dist/assets/svg/edit.svg +0 -3
  61. package/dist/assets/svg/gallery.svg +0 -3
  62. package/dist/assets/svg/heading1.svg +0 -3
  63. package/dist/assets/svg/heading2.svg +0 -3
  64. package/dist/assets/svg/hyphen.svg +0 -3
  65. package/dist/assets/svg/info.svg +0 -3
  66. package/dist/assets/svg/input-info.svg +0 -0
  67. package/dist/assets/svg/italic.svg +0 -3
  68. package/dist/assets/svg/link.svg +0 -3
  69. package/dist/assets/svg/message-info.svg +0 -3
  70. package/dist/assets/svg/number_list.svg +0 -3
  71. package/dist/assets/svg/payment_method.svg +0 -7
  72. package/dist/assets/svg/quotes.svg +0 -3
  73. package/dist/assets/svg/remove.svg +0 -3
  74. package/dist/assets/svg/sort-down-arrow.svg +0 -3
  75. package/dist/assets/svg/sort-up-arrow.svg +0 -8
  76. package/dist/assets/svg/user.svg +0 -3
  77. package/dist/assets/theme.css +0 -6459
@@ -1,2 +1,3 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ // export type { ColDef as gridColType} from "@ag-grid-community/core"
@@ -8,7 +8,7 @@ const inputtext_1 = require("primereact/inputtext");
8
8
  const inputnumber_1 = require("primereact/inputnumber");
9
9
  const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
10
10
  const menu_1 = require("primereact/menu");
11
- const FormulaCoponent = (props) => {
11
+ const FormulaComponent = (props) => {
12
12
  const priceConditioRef = (0, react_1.useRef)(null);
13
13
  const [isValid, setIsValid] = (0, react_1.useState)(false);
14
14
  const [selectedItem, setSelectedItem] = (0, react_1.useState)();
@@ -35,7 +35,7 @@ const FormulaCoponent = (props) => {
35
35
  setFieldOptions(props === null || props === void 0 ? void 0 : props.fieldOptions);
36
36
  }, [props === null || props === void 0 ? void 0 : props.fieldOptions]);
37
37
  const onSelecteItem = (item) => {
38
- var _a, _b, _c;
38
+ var _a, _b, _c, _d, _e;
39
39
  if (selectedItem) {
40
40
  if (selectedItem.find((id) => id === item.id))
41
41
  setSelectedItem(selectedItem.filter((id) => id !== item.id));
@@ -47,20 +47,23 @@ const FormulaCoponent = (props) => {
47
47
  }
48
48
  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> `;
49
49
  let currentText = contentEditableDivRef.current.innerHTML === '<span class="formulaSpanElm"></span>' ? '<span class="formulaSpanElm"></span>' : contentEditableDivRef.current.innerHTML;
50
- if (contentEditableCursorIndex === null) {
51
- let str = currentText + chipElm + `<span class='formulaSpanElm'></span>`;
50
+ const index = contentEditableDivRef.current.innerHTML.indexOf((_a = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.outerHTML);
51
+ if (index === -1 && (contentEditableCursorIndex === null || contentEditableCursorIndex === 0)) {
52
+ let str = currentText + chipElm + `<span class='formulaSpanElm activeSpanElm'></span>`;
52
53
  setContent(str);
54
+ // setContentEditableCursorIndex(str.length)
53
55
  }
54
56
  else {
55
- if (((_a = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.innerHTML.length) === contentEditableCursorIndex) {
57
+ if (((_b = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _b === void 0 ? void 0 : _b.innerHTML.length) === contentEditableCursorIndex) {
56
58
  let sliptText = currentText.split(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML);
57
59
  let str = sliptText[0] + document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML + chipElm + `<span class='formulaSpanElm'></span>` + sliptText[1];
58
60
  setContent(str);
61
+ // setContentEditableCursorIndex(str.length)
59
62
  }
60
63
  else {
61
- const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm').outerHTML);
62
- 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>`;
63
- 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];
64
+ // const index = contentEditableDivRef.current.innerHTML.indexOf(document.querySelector('.formulaSpanElm.activeSpanElm')?.outerHTML)
65
+ const firstContent = contentEditableDivRef.current.innerHTML.slice(0, index === -1 ? 0 : index) + `<span class="formulaSpanElm activeSpanElm">${(_c = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _c === void 0 ? void 0 : _c.innerHTML.substring(0, contentEditableCursorIndex)}</span>`;
66
+ const secondContent = `<span class="formulaSpanElm">${(_d = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _d === void 0 ? void 0 : _d.innerHTML.substring(contentEditableCursorIndex)}</span>` + contentEditableDivRef.current.innerHTML.slice(index).split((_e = document.querySelector('.formulaSpanElm.activeSpanElm')) === null || _e === void 0 ? void 0 : _e.outerHTML)[1];
64
67
  const str = firstContent + chipElm + secondContent;
65
68
  setContent(str);
66
69
  }
@@ -77,28 +80,67 @@ const FormulaCoponent = (props) => {
77
80
  return;
78
81
  }
79
82
  let elements = contentEditableDivRef === null || contentEditableDivRef === void 0 ? void 0 : contentEditableDivRef.current.children;
80
- let formula = '';
83
+ let formulaText = '';
84
+ let spanElms = Array.from(document.querySelectorAll('.formulaSpanElm'));
85
+ if (spanElms.length > 1) {
86
+ let spanInnerText = spanElms === null || spanElms === void 0 ? void 0 : spanElms.map((x) => x === null || x === void 0 ? void 0 : x.innerHTML);
87
+ // debugger
88
+ // remove first and last span
89
+ const specialCharacters = /[/*\-+%(]/;
90
+ if (spanInnerText[0] !== "" && !specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1))) {
91
+ setIsValid(false);
92
+ return;
93
+ }
94
+ else if (specialCharacters.test(spanInnerText[0].charAt(spanInnerText[0].length - 1)) || spanInnerText[0] === "") {
95
+ spanInnerText.shift();
96
+ }
97
+ if (spanInnerText[spanInnerText.length - 1] !== "" && !specialCharacters.test(spanInnerText[spanInnerText.length - 1].charAt(0))) {
98
+ setIsValid(false);
99
+ return;
100
+ }
101
+ else if (spanInnerText[spanInnerText.length - 1] === "" || specialCharacters.test(spanInnerText[spanInnerText.length - 1].charAt(0))) {
102
+ spanInnerText.pop();
103
+ }
104
+ // spanInnerText = spanInnerText.slice(0, 1)
105
+ // spanInnerText = spanInnerText.slice(0, spanElms.length - 1)
106
+ // const specialCharacters = /[/*\-+%(]/;
107
+ let findText = spanInnerText.find((x) => !specialCharacters.test(x.charAt(0)) || !specialCharacters.test(x.charAt(x.length - 1)));
108
+ if (findText) {
109
+ setIsValid(false);
110
+ return;
111
+ }
112
+ else {
113
+ let finalSanInnerText = spanInnerText.filter((x) => x === "");
114
+ if (finalSanInnerText.length !== 0) {
115
+ setIsValid(false);
116
+ return;
117
+ }
118
+ }
119
+ }
81
120
  for (let i = 0; i < elements.length; i++) {
82
121
  const element = elements[i];
83
122
  if (element.classList.contains('formulaChipElm')) {
84
123
  let id = element.getAttribute('itemid');
85
124
  let findObj = fieldOptions.find((x) => x.id === id);
86
- formula = formula + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
125
+ formulaText = formulaText + (findObj === null || findObj === void 0 ? void 0 : findObj.price);
126
+ }
127
+ else {
128
+ let spanText = element.innerHTML ? element.innerHTML : "";
129
+ formulaText = formulaText + spanText;
87
130
  }
88
- else
89
- formula = formula + (element.innerHTML ? element.innerHTML : ' ');
90
131
  }
91
- formula = formula.replaceAll('<br>', '');
132
+ formulaText = formulaText.replaceAll('<br>', '');
92
133
  // If the formula ends with any operator without ending with numbers, then the formula is not correct
93
134
  const regex = /^(?!0+$)(?=.*[+\-*/%])(?!.*(?:\s|\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
94
- if (!regex.test(formula) && formula !== '0' && formula !== '') {
135
+ if (!regex.test(formulaText) && formulaText !== '0' && formulaText !== '') {
95
136
  try {
96
137
  // For example, if textContent (formula) value is like "<chip> + <chip> - 456 + 778 * 464 / 645 % 4736"
97
138
  // That will be converted here like "0 + 0 - 0 + 0 * 0 / 0 % 0". If the total equals 0 or -0, it means the formula is correct.
98
- // The eval() JavaScript method will give us a result from the string.
139
+ // The eval() JavaScript method will give us a result from the string.
99
140
  // If the eval() result is NOT A NUMBER it will go to the error block.
100
141
  // const str = formula.replaceAll(' ', '')
101
- eval(formula);
142
+ let value = eval(formulaText);
143
+ console.log(value);
102
144
  setIsValid(true);
103
145
  }
104
146
  catch (error) {
@@ -108,7 +150,6 @@ const FormulaCoponent = (props) => {
108
150
  else {
109
151
  setIsValid(false);
110
152
  }
111
- // setContent(contentEditableDivRef.current.innerHTML);
112
153
  };
113
154
  function getCursorPosition(contentEditableElm) {
114
155
  const selection = window.getSelection();
@@ -119,47 +160,48 @@ const FormulaCoponent = (props) => {
119
160
  setContentEditableCursorIndex(clonedRange.toString().length);
120
161
  }
121
162
  const onConditionKeyDown = (event) => {
122
- var _a;
123
163
  const content = event.target.textContent.trim();
124
164
  const lastChar = content.charAt(content.length - 1);
125
165
  const operators = ['%', '*', '-', '+', '/'];
166
+ let selection = window.getSelection();
126
167
  if (event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 38 || event.keyCode === 40) {
127
168
  let actElm = document.querySelector('.formulaSpanElm.activeSpanElm');
128
- if (actElm)
129
- actElm.classList.remove('activeSpanElm');
130
- const selection = window.getSelection();
169
+ let spanElms = Array.from(document.querySelectorAll('.formulaSpanElm'));
131
170
  const range = document.createRange();
132
- range.setStart(selection.focusNode, selection.focusOffset);
133
- if (event.keyCode === 37 /* ArrowLeft */ || event.keyCode === 38 /* ArrowUp */) {
134
- range.collapse(true);
171
+ // range.setStart(selection.focusNode, selection.focusOffset);
172
+ let activeIndex;
173
+ spanElms.filter((elmt, index) => {
174
+ if (elmt.classList.contains('activeSpanElm')) {
175
+ activeIndex = index;
176
+ }
177
+ });
178
+ if (actElm) {
179
+ if ((event.keyCode === 37 /* ArrowLeft */ || event.keyCode === 38 /* ArrowUp */) && selection.focusOffset === 0) {
180
+ activeIndex = activeIndex - 1;
181
+ }
182
+ else if ((event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40 /* ArrowDown */) && selection.focusOffset === selection.focusNode.textContent.length) {
183
+ activeIndex = activeIndex + 1;
184
+ }
185
+ else {
186
+ event.preventDefault();
187
+ return;
188
+ }
189
+ actElm.classList.remove('activeSpanElm');
135
190
  }
136
- else if (event.keyCode === 39 /* ArrowRight */ || event.keyCode === 40 /* ArrowDown */) {
191
+ if (activeIndex !== null && activeIndex !== -1 && activeIndex && spanElms[activeIndex]) {
192
+ range.selectNodeContents(spanElms[activeIndex]); // Select the entire content of the element
137
193
  range.collapse(false);
138
- }
139
- selection.removeAllRanges();
140
- selection.addRange(range);
141
- setContentEditableCursorIndex(range.startOffset);
142
- if (!range.startContainer.parentElement.getAttribute('id')) {
143
- range.startContainer.parentElement.classList.add('activeSpanElm');
144
- }
145
- else {
146
- let eml = range.startContainer;
147
- eml === null || eml === void 0 ? void 0 : eml.classList.add('activeSpanElm');
148
- }
149
- }
150
- // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
151
- if (event.keyCode === 8 || event.keyCode === 46 ||
152
- (event.keyCode === 65 && event.ctrlKey) || (event.keyCode === 65 && event.ctrlKey) ||
153
- event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 38 ||
154
- event.keyCode === 40 || event.keyCode === 36 || event.keyCode === 35 || event.keyCode === 16) {
155
- if (event.keyCode === 8 || event.keyCode === 46) {
156
- let spanElms = document.querySelectorAll('.formulaSpanElm');
157
- for (let i = 0; i < spanElms.length; i++) {
158
- if (((_a = spanElms[i]) === null || _a === void 0 ? void 0 : _a.classList.value) === 'formulaSpanElm activeSpanElm' && (spanElms[i].innerHTML === '' || spanElms[i].innerHTML === '<br>')) {
159
- spanElms[i - 1].classList.add('activeSpanElm');
160
- }
194
+ const selection = window.getSelection();
195
+ selection.removeAllRanges();
196
+ selection.addRange(range);
197
+ setContentEditableCursorIndex(range.startOffset);
198
+ if (!range.startContainer.parentElement.getAttribute('id')) {
199
+ range.startContainer.parentElement.classList.add('activeSpanElm');
200
+ }
201
+ else {
202
+ let eml = range.startContainer;
203
+ eml === null || eml === void 0 ? void 0 : eml.classList.add('activeSpanElm');
161
204
  }
162
- onChangeCondition();
163
205
  }
164
206
  }
165
207
  // Allow numbers, *, -, +, %, /, (, ), and single space
@@ -190,11 +232,12 @@ const FormulaCoponent = (props) => {
190
232
  };
191
233
  const onClickContentEditable = (e) => {
192
234
  var _a, _b, _c;
193
- if (!e.target.classList.contains('formulaSpanElm')) {
194
- let contentEditableElement = e.target;
235
+ let spanElms = Array.from(document.querySelectorAll('.formulaSpanElm'));
236
+ if (!e.target.classList.contains('formulaSpanElm') && spanElms.length !== 0) {
237
+ // let contentEditableElement = e.target
195
238
  // contentEditableElement.focus(); // Set focus to the content editable element
196
239
  const range = document.createRange(); // Create a new range
197
- range.selectNodeContents(contentEditableElement); // Select the entire content of the element
240
+ range.selectNodeContents(spanElms[spanElms.length - 1]); // Select the entire content of the element
198
241
  range.collapse(false); // Collapse the range to the end
199
242
  const selection = window.getSelection(); // Get the selection object
200
243
  selection.removeAllRanges(); // Remove any existing ranges from the selection
@@ -204,6 +247,9 @@ const FormulaCoponent = (props) => {
204
247
  (_c = (_b = elms[elms.length - 1]) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add('activeSpanElm');
205
248
  e.preventDefault();
206
249
  }
250
+ else {
251
+ console.log(e);
252
+ }
207
253
  };
208
254
  const onAddOperator = (event, operator) => {
209
255
  var _a, _b;
@@ -235,6 +281,27 @@ const FormulaCoponent = (props) => {
235
281
  formula = formula.replaceAll('<br>', '');
236
282
  props.onSaveFormula(formula);
237
283
  };
284
+ const onKeyDownHandler = (event) => {
285
+ var _a;
286
+ if (event.keyCode === 8 || event.keyCode === 46) {
287
+ // let elm = document.querySelector('.activeSpanElm') as HTMLElement
288
+ let spanElms = Array.from(document.querySelectorAll('.formulaSpanElm'));
289
+ let activeIndex = spanElms.findIndex((x) => x.classList.contains('activeSpanElm'));
290
+ if (activeIndex && ((_a = spanElms[activeIndex]) === null || _a === void 0 ? void 0 : _a.innerHTML) === '') {
291
+ spanElms[activeIndex].previousElementSibling.remove();
292
+ let index = event.keyCode === 8 ? activeIndex - 1 : activeIndex;
293
+ spanElms[index].classList.add('activeSpanElm');
294
+ const range = document.createRange(); // Create a new range
295
+ spanElms[activeIndex].remove();
296
+ range.selectNodeContents(spanElms[index]); // Select the entire content of the element
297
+ range.collapse(false); // Collapse the range to the end
298
+ const selection = window.getSelection(); // Get the selection object
299
+ selection.removeAllRanges(); // Remove any existing ranges from the selection
300
+ selection.addRange(range);
301
+ event.preventDefault();
302
+ }
303
+ }
304
+ };
238
305
  const menuContent = [
239
306
  {
240
307
  template: () => {
@@ -249,21 +316,23 @@ const FormulaCoponent = (props) => {
249
316
  :
250
317
  (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) => {
251
318
  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));
252
- }) })), (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) &&
319
+ }) })), (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 }, onKeyDown: (e) => onKeyDownHandler(e), 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) &&
253
320
  (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) ?
254
321
  (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })
255
322
  :
256
- (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", onClick: (e) => priceConditioRef.current.toggle(e) }, { 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'));
323
+ (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", onClick: (e) => { setContent(props === null || props === void 0 ? void 0 : props.formulaValue); priceConditioRef.current.toggle(e); } }, { 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'));
257
324
  }
258
325
  }
259
326
  ];
260
327
  const addEventListenerForSpan = () => {
328
+ var _a;
261
329
  // Select all div elements with the specified class name
262
- const divElements = document.querySelectorAll('.formulaSpanElm');
330
+ const spanElements = document.querySelectorAll('.formulaSpanElm');
331
+ (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
263
332
  // Loop through each div element
264
- divElements.forEach((divElement) => {
333
+ spanElements.forEach((spanElement) => {
265
334
  // Add an event listener for the 'click' event to each div element
266
- divElement.addEventListener('click', function (e) {
335
+ spanElement.addEventListener('click', function (e) {
267
336
  var _a;
268
337
  (_a = document.querySelector('.activeSpanElm')) === null || _a === void 0 ? void 0 : _a.classList.remove('activeSpanElm');
269
338
  e.target.classList.add('activeSpanElm');
@@ -271,10 +340,14 @@ const FormulaCoponent = (props) => {
271
340
  // Your event handler code here
272
341
  });
273
342
  });
343
+ if (spanElements.length !== 0) {
344
+ spanElements[spanElements.length - 1].classList.add('activeSpanElm');
345
+ getCursorPosition(spanElements[spanElements.length - 1]);
346
+ }
274
347
  };
275
348
  const onShowMenu = () => {
276
349
  if (props === null || props === void 0 ? void 0 : props.formulaValue) {
277
- let formulatText;
350
+ let formulatText = "";
278
351
  const pattern = /[a-f0-9]{24}/g;
279
352
  // const ids = props?.formulaValue.match(pattern);
280
353
  // console.log(ids)
@@ -297,8 +370,10 @@ const FormulaCoponent = (props) => {
297
370
  for (let z = 0; z < textParts.length; z++) {
298
371
  if (z === 0 && (splitText.length - 1) === i && chipElm)
299
372
  formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm + `<span class='formulaSpanElm'></span>` : `<span class='formulaSpanElm'></span>`;
300
- else if (z === 0 && chipElm)
301
- formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` + chipElm : `<span class='formulaSpanElm'></span>`;
373
+ else if (z === 0 && chipElm && id) {
374
+ let lastSpanIndex = formulatText.lastIndexOf('</span>');
375
+ formulatText = textParts[z] ? formulatText.slice(0, lastSpanIndex) + `${textParts[z]}</span>` + chipElm : `<span class='formulaSpanElm'></span>`;
376
+ }
302
377
  else
303
378
  formulatText = textParts[z] ? formulatText + `<span class='formulaSpanElm'>${textParts[z]}</span>` : `<span class='formulaSpanElm'></span>`;
304
379
  }
@@ -317,6 +392,7 @@ const FormulaCoponent = (props) => {
317
392
  }
318
393
  setTimeout(() => {
319
394
  addEventListenerForSpan();
395
+ setIsValid(false);
320
396
  }, 1000);
321
397
  };
322
398
  return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `condition_column border-1 flex border-gray-300 border-round-lg overflow-hidden w-full ${props === null || props === void 0 ? void 0 : props.className}` }, { 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) => { if (props === null || props === void 0 ? void 0 : props.onConditionChange)
@@ -352,4 +428,4 @@ const FormulaCoponent = (props) => {
352
428
  }
353
429
  })() }), (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"));
354
430
  };
355
- exports.default = FormulaCoponent;
431
+ exports.default = FormulaComponent;
@@ -20,4 +20,3 @@ export interface StatusOptions {
20
20
  name: string;
21
21
  value: number;
22
22
  }
23
- export type { ColDef as gridColType } from "@ag-grid-community/core";
@@ -1,3 +1,3 @@
1
1
  import { FormulaTemplateTypes } from "../types/type";
2
- declare const FormulaCoponent: (props: FormulaTemplateTypes) => import("react/jsx-runtime").JSX.Element;
3
- export default FormulaCoponent;
2
+ declare const FormulaComponent: (props: FormulaTemplateTypes) => import("react/jsx-runtime").JSX.Element;
3
+ export default FormulaComponent;
@@ -104,7 +104,6 @@ export { default as ListBoxDropdown } from './components/list-box-dropdown/list-
104
104
  export { default as CustomColorPicker } from "./components/custom-color-picker/color-picker";
105
105
  export { useClickOutside, useOverlayListener, useOverlayScrollListener } from 'primereact/hooks';
106
106
  export { default as AGGridComponent } from './components/ag-grid/ParentForGrid';
107
- export { gridColType } from './components/ag-grid/Types';
108
107
  import { DropdownChangeEvent } from "primereact/dropdown";
109
108
  import { ColorPickerChangeEvent } from "primereact/colorpicker";
110
109
  import { SliderChangeEvent } from "primereact/slider";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "5.7.2",
3
+ "version": "5.7.3",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",