sccoreui 5.3.7 → 5.3.9

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 (8) hide show
  1. package/dist/App.scss +15 -1
  2. package/dist/components/form/form-fields/form-fields.js +2 -2
  3. package/dist/components/formula-template/FormulaTemplate.js +105 -0
  4. package/dist/components/list-box-dropdown/list-box-dropdown.js +9 -7
  5. package/dist/types/components/formula-template/FormulaTemplate.d.ts +3 -0
  6. package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts +1 -1
  7. package/dist/types/components/types/type.d.ts +37 -1
  8. package/package.json +1 -1
package/dist/App.scss CHANGED
@@ -848,4 +848,18 @@ button[aria-expanded="true"] {
848
848
  }
849
849
  }
850
850
 
851
- //////////////////////////////////////////////
851
+ //////////////////////////////////////////////
852
+ ///
853
+
854
+ .price_condition_menu {
855
+ width: 648px !important;
856
+ }
857
+
858
+ .condition_attribute_list_sect{
859
+ height: 215px;
860
+ }
861
+
862
+ .condition_configure{
863
+ height: 224px;
864
+ outline: none;
865
+ }
package/dist/components/form/form-fields/form-fields.js CHANGED
@@ -29,9 +29,9 @@ const InputNumberField = (props) => {
29
29
  (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
30
30
  };
31
31
  const InputCurrencyField = (props) => {
32
- const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
32
+ const { errors, spanClassName, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
33
33
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
34
- (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
34
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} p-input-icon-left form_field` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm' }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
35
35
  :
36
36
  (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : 'form_field'} ` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px" }) }))] }) })));
37
37
  };
package/dist/components/formula-template/FormulaTemplate.js ADDED
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
6
+ const dropdown_1 = require("primereact/dropdown");
7
+ const inputtext_1 = require("primereact/inputtext");
8
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
9
+ const menu_1 = require("primereact/menu");
10
+ const FormulaTemplate = (props) => {
11
+ console.log(props);
12
+ const priceConditioRef = (0, react_1.useRef)(null);
13
+ const [isValid, setIsValid] = (0, react_1.useState)(false);
14
+ const [selectedAttr, setSelectedAttr] = (0, react_1.useState)();
15
+ const attributes = [
16
+ {
17
+ id: '34t3246324687',
18
+ name: 'Test1',
19
+ code: '34sdf'
20
+ },
21
+ {
22
+ id: '34t32463287',
23
+ name: 'Test2',
24
+ code: 't34sdf'
25
+ },
26
+ {
27
+ id: '34t32464687',
28
+ name: 'Test3',
29
+ code: 'dshbf'
30
+ },
31
+ {
32
+ id: '34t32324687',
33
+ name: 'Test4',
34
+ code: '323sdf'
35
+ },
36
+ {
37
+ id: '3446324687',
38
+ name: 'Test5',
39
+ code: '30edf'
40
+ },
41
+ {
42
+ id: '34324687',
43
+ name: 'Test6',
44
+ code: '343sdf'
45
+ }
46
+ ];
47
+ const onSelecteAttr = (attr) => {
48
+ if (selectedAttr) {
49
+ if (selectedAttr.find((id) => id === attr.id))
50
+ setSelectedAttr(selectedAttr.filter((id) => id !== attr.id));
51
+ else
52
+ setSelectedAttr([attr.id, ...selectedAttr]);
53
+ }
54
+ else
55
+ setSelectedAttr([attr.id]);
56
+ };
57
+ const onChangeCondition = (e) => {
58
+ let equation = e.target.textContent.replace(/[a-zA-Z0-9<>]+/g, '0');
59
+ const regex = /^(?!.*(?:\+\+|--|%%|\*\*|\+\-|\+\*|\+\%|\-\-|\-\*|\-\%|\*\-|\*\+|\*\%|\%\+|\%\-|\%\/|\%\*|\/\+|\/\-|\/\*|\/\%))(?:(?:\([+\-*/%]*\)|[-+*/%])*)$/;
60
+ if (!regex.test(equation)) {
61
+ try {
62
+ // let total = eval(equation)
63
+ setIsValid(true);
64
+ }
65
+ catch (error) {
66
+ setIsValid(false);
67
+ }
68
+ }
69
+ else {
70
+ setIsValid(false);
71
+ }
72
+ };
73
+ const onConditionKeyDown = (event) => {
74
+ // Allow backspace, delete, select all (Ctrl+A), and certain keys when text is selected
75
+ if (event.key === 'Backspace' || event.key === 'Delete' ||
76
+ (event.key === 'a' && event.ctrlKey) || (event.key === 'A' && event.ctrlKey) ||
77
+ event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' ||
78
+ event.key === 'ArrowDown' || event.key === 'Home' || event.key === 'End') {
79
+ return;
80
+ }
81
+ // Allow numbers, *, -, +, %, /, (, ), and single space
82
+ if (!((event.key >= '0' && event.key <= '9') ||
83
+ event.key === '*' || event.key === '-' || event.key === '+' ||
84
+ event.key === '%' || event.key === '/' || event.key === '(' ||
85
+ event.key === ')' || (event.key === ' ' && event.target.textContent.trim().slice(-1) !== ' '))) {
86
+ event.preventDefault();
87
+ }
88
+ // Prevent new lines (enter keypress)
89
+ if (event.key === 'Enter') {
90
+ event.preventDefault();
91
+ }
92
+ };
93
+ const menuContent = [
94
+ {
95
+ template: () => {
96
+ 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 border-bottom-1 border-gray-200 h-2rem flex align-items-center" }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(props === null || props === void 0 ? void 0 : props.fieldOptionTemplateTitle) + ' (0)', " "] }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "px-4 py-2" }, { 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-3rem absolute left-0" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "pl-12 w-full", placeholder: props.fieldOptionSearchPlaceholder })] })) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_attribute_list_sect overflow-auto flex flex-column row-gap-2 px-4 py-2` }, { children: attributes.map((attr) => {
97
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ onClick: () => onSelecteAttr(attr), className: `h-3rem hover:bg-primary-25 flex justify-content-between cursor-pointer align-items-center p-3 border-round-lg ${(selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.find((id) => id === attr.id)) && 'bg-primary-25'}` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "attr_name max-w-14rem text-md text-gray-700 font-semibold overflow-hidden text-overflow-ellipsis white-space-nowrap", title: attr.name }, { children: attr.name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "scan", className: "mr-1", size: 14 }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "attr_code text-sm max-w-13rem overflow-hidden text-overflow-ellipsis white-space-nowrap", title: attr.code }, { children: attr.code }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.find((id) => id === attr.id)) &&
98
+ (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", color: "#162578", size: 20 }) }))] })));
99
+ }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-4 align-items-center border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "percent-01", size: 20 }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "divide-01", size: 20 }) }))] })), (0, jsx_runtime_1.jsx)("div", { onKeyDown: (e) => onConditionKeyDown(e), onInput: (e) => onChangeCondition(e), 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({ 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 }) }))] }))] })));
100
+ }
101
+ }
102
+ ];
103
+ 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, { optionLabel: "name", 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, { popup: true, popupAlignment: "left", className: 'price_condition_menu p-0', model: menuContent, ref: priceConditioRef, id: "price_condition_menu" })] })));
104
+ };
105
+ exports.default = FormulaTemplate;
package/dist/components/list-box-dropdown/list-box-dropdown.js CHANGED
@@ -5,7 +5,7 @@ const listbox_1 = require("primereact/listbox");
5
5
  const menu_1 = require("primereact/menu");
6
6
  const react_1 = require("react");
7
7
  const sccoreui_1 = require("sccoreui");
8
- const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }) => {
8
+ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }) => {
9
9
  const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
10
10
  const optionsMenuRef = (0, react_1.useRef)();
11
11
  const onSelectOption = (e) => {
@@ -49,23 +49,25 @@ const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, l
49
49
  };
50
50
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, className: menuClassName ? menuClassName : '', ref: optionsMenuRef, model: [{
51
51
  template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName ? listBoxParentClassName + ' list_box_dropdown' : 'list_box_dropdown' }, { children: [headerTemplate &&
52
- (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ?
52
+ (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), selectAll &&
53
+ (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", onClick: () => { if (onSelectAll)
54
+ onSelectAll(); }, className: "text-primary-400 font-semibold absolute z-4 px-5 text-left focus:shadow-none", style: { top: '10em' }, label: "Select All", link: true }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ?
53
55
  optionTemplate(option)
54
56
  :
55
- (0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] }) }), listClassName: listClassName ? listClassName : '', filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: listBoxclassName ? listBoxclassName : '', filterPlaceholder: filterPlaceholder ? filterPlaceholder : '' }), footeTemplate &&
57
+ (0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] }) }), listClassName: `${listClassName ? listClassName : ' h-18rem overflow-auto '} ${selectAll && ' mt-8 pt-2'}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName ? listBoxclassName : 'w-16rem border-none '} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : '' }), footeTemplate &&
56
58
  (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))
57
- }] }), !showChilps ?
59
+ }] }), !showChips ?
58
60
  (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })
59
61
  :
60
- (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none p-0 h-max`, link: link ? true : false, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
62
+ (0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none p-0 h-max`, link: link ? true : false, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
61
63
  var _a, _b;
62
64
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ?
63
- (0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
65
+ (0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName ? chipClassName : 'cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg'} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
64
66
  chipTemplate(item)
65
67
  :
66
68
  (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof (item) === 'object' ? item[`${optionLabel}`] : (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`]] }), showRemoveIcon && (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(sccoreui_1.SvgComponent, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) }), index)
67
69
  :
68
- (0, jsx_runtime_1.jsx)("li", Object.assign({ className: `${chipClassName} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
70
+ (0, jsx_runtime_1.jsx)("li", Object.assign({ className: `${chipClassName ? chipClassName : 'cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg'} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
69
71
  chipTemplate(item)
70
72
  :
71
73
  (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof (item) === 'object' ? item[`${optionLabel}`] : (_b = listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`]] }), showRemoveIcon && (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(sccoreui_1.SvgComponent, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) }), index) }));
package/dist/types/components/formula-template/FormulaTemplate.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { FormulaTemplateTypes } from "../../components/types/type";
2
+ declare const FormulaTemplate: (props: FormulaTemplateTypes) => import("react/jsx-runtime").JSX.Element;
3
+ export default FormulaTemplate;
package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ListBoxDropdownTypes } from "../types/type";
2
- declare const ListBoxDropdown: ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
2
+ declare const ListBoxDropdown: ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
3
3
  export default ListBoxDropdown;
package/dist/types/components/types/type.d.ts CHANGED
@@ -110,6 +110,7 @@ export interface NumberFieldProps {
110
110
  minFractionDigits?: number;
111
111
  maxFractionDigits?: number;
112
112
  useGrouping?: boolean;
113
+ spanClassName?: string;
113
114
  }
114
115
  export interface TextAreaFieldProps {
115
116
  errors: any;
@@ -205,11 +206,13 @@ export interface ListBoxDropdownTypes {
205
206
  menuClassName?: any;
206
207
  listBoxParentClassName?: any;
207
208
  link?: any;
209
+ selectAll?: boolean;
210
+ onSelectAll?: () => void;
208
211
  isLoading?: boolean;
209
212
  className?: string;
210
213
  scrollElementId?: string;
211
214
  buttonClassName?: string;
212
- showChilps?: boolean;
215
+ showChips?: boolean;
213
216
  chipsParentClassName?: string;
214
217
  chipClassName?: string;
215
218
  chipTemplate?: any;
@@ -270,3 +273,36 @@ export interface ScMultiSelectTypes {
270
273
  emptyFilterMessage?: any;
271
274
  selectAll?: boolean;
272
275
  }
276
+ export interface ConfigurValueOptionsTypes {
277
+ name: string;
278
+ value: number;
279
+ optionType: "INCREASE_BY_VALUE" | "DECREASE_BY_VALUE" | "INCREASE_BY_PERCENTAGE" | "DECREASE_BY_PERCENTAGE" | "MANUAL" | "CALCULATION";
280
+ }
281
+ type MathematicalOperator = "+" | "-" | "*" | "/" | "%";
282
+ export interface FormulaTemplateTypes {
283
+ className?: string;
284
+ inputClassName?: string;
285
+ dropdownClassName?: string;
286
+ dropdownPlaceholder?: string;
287
+ inputPlaceholder?: string;
288
+ headerTemplate?: React.ReactNode;
289
+ headerTemplateClassName?: string;
290
+ formulaOperators?: MathematicalOperator[];
291
+ formulaElemectClassName?: string;
292
+ formulaElemectPlaceholder?: string;
293
+ fieldOptionTemplateTitle?: string;
294
+ fieldOptionSearchPlaceholder?: string;
295
+ fieldOptionTemplate?: React.ReactNode;
296
+ fieldOptionClassName?: string;
297
+ formulaChipTemplate?: React.ReactNode;
298
+ formulaChipClassName?: string;
299
+ footerTemplate?: React.ReactNode;
300
+ footerTemplateClassName?: string;
301
+ onSaveFormula?: (payload: any) => void;
302
+ onClose?: () => void;
303
+ options: ConfigurValueOptionsTypes[];
304
+ optionClassName?: string;
305
+ optionLabel?: string;
306
+ menuClassName?: string;
307
+ }
308
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "5.3.7",
3
+ "version": "5.3.9",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",