sccoreui 5.3.8 → 5.4.0
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.
- package/dist/App.scss +15 -1
- package/dist/assets/sccoreui.css +8 -0
- package/dist/components/form/form-fields/form-fields.js +2 -2
- package/dist/components/formula-template/FormulaTemplate.js +105 -0
- package/dist/components/list-box-dropdown/list-box-dropdown.js +9 -7
- package/dist/directives/svg-icons.js +9 -0
- package/dist/types/components/formula-template/FormulaTemplate.d.ts +3 -0
- package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts +1 -1
- package/dist/types/components/types/type.d.ts +36 -1
- 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/assets/sccoreui.css
CHANGED
|
@@ -8320,6 +8320,14 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8320
8320
|
border-radius: 6px;
|
|
8321
8321
|
}
|
|
8322
8322
|
|
|
8323
|
+
.p-disabled {
|
|
8324
|
+
.p-inputtext {
|
|
8325
|
+
border: 1px solid var(--gray-300);
|
|
8326
|
+
background-color: var(--gray-50);
|
|
8327
|
+
color: var(--gray-500);
|
|
8328
|
+
}
|
|
8329
|
+
}
|
|
8330
|
+
|
|
8323
8331
|
|
|
8324
8332
|
.last-item-bg-color ul li:last-child {
|
|
8325
8333
|
background-color: var(--primary-50);
|
|
@@ -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
|
|
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:
|
|
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
|
};
|
|
@@ -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;
|
|
@@ -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,
|
|
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() }),
|
|
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 : ''
|
|
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
|
-
}] }), !
|
|
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) }));
|
|
@@ -9002,6 +9002,15 @@ exports.iconList = [
|
|
|
9002
9002
|
</svg>
|
|
9003
9003
|
`,
|
|
9004
9004
|
},
|
|
9005
|
+
{
|
|
9006
|
+
name: "dynamic-type",
|
|
9007
|
+
svg: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="App-Window-Question--Streamline-Ultimate.svg"><desc>App Window Question Streamline Icon: https://streamlinehq.com</desc><path stroke="#4f5970" d="M7.5 2.75391c-0.13807 0 -0.25 -0.11193 -0.25 -0.25s0.11193 -0.25 0.25 -0.25" stroke-width="1"></path><path stroke="#4f5970" d="M7.5 2.75391c0.13807 0 0.25 -0.11193 0.25 -0.25s-0.11193 -0.25 -0.25 -0.25" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" d="M0.5 4.50391h20" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" d="M8.5 16.5h-6c-0.53043 0 -1.03914 -0.2107 -1.41421 -0.5858C0.710714 15.5391 0.5 15.0304 0.5 14.5v-12c0 -0.53043 0.210714 -1.03914 0.58579 -1.41421C1.46086 0.710714 1.96957 0.5 2.5 0.5h16c0.5304 0 1.0391 0.210714 1.4142 0.58579 0.3751 0.37507 0.5858 0.88378 0.5858 1.41421v6" stroke-width="1"></path><path stroke="#4f5970" d="M3.5 2.75391c-0.13807 0 -0.25 -0.11193 -0.25 -0.25s0.11193 -0.25 0.25 -0.25" stroke-width="1"></path><path stroke="#4f5970" d="M3.5 2.75391c0.13807 0 0.25 -0.11193 0.25 -0.25s-0.11193 -0.25 -0.25 -0.25" stroke-width="1"></path><g><path stroke="#4f5970" d="M5.5 2.75391c-0.13807 0 -0.25 -0.11193 -0.25 -0.25s0.11193 -0.25 0.25 -0.25" stroke-width="1"></path><path stroke="#4f5970" d="M5.5 2.75391c0.13807 0 0.25 -0.11193 0.25 -0.25s-0.11193 -0.25 -0.25 -0.25" stroke-width="1"></path></g><g><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" d="M17.5 23.5c3.3137 0 6 -2.6863 6 -6s-2.6863 -6 -6 -6 -6 2.6863 -6 6 2.6863 6 6 6Z" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" d="M15.625 16.041c0 -0.3708 0.11 -0.7333 0.316 -1.0417 0.206 -0.3083 0.4989 -0.5486 0.8415 -0.6906 0.3426 -0.1419 0.7196 -0.179 1.0833 -0.1067 0.3637 0.0724 0.6978 0.251 0.96 0.5132s0.4408 0.5963 0.5132 0.96c0.0723 0.3637 0.0352 0.7407 -0.1067 1.0833 -0.1419 0.3427 -0.3823 0.6355 -0.6906 0.8415 -0.3083 0.206 -0.6709 0.316 -1.0417 0.316v1" stroke-width="1"></path><path stroke="#4f5970" d="M17.5 21.416c-0.1381 0 -0.25 -0.1119 -0.25 -0.25s0.1119 -0.25 0.25 -0.25" stroke-width="1"></path><path stroke="#4f5970" d="M17.5 21.416c0.1381 0 0.25 -0.1119 0.25 -0.25s-0.1119 -0.25 -0.25 -0.25" stroke-width="1"></path></g></svg>`,
|
|
9008
|
+
},
|
|
9009
|
+
{
|
|
9010
|
+
name: "default-app",
|
|
9011
|
+
svg: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Amazon-Dynamo-Power--Streamline-Ultimate.svg"><desc>Amazon Dynamo Power Streamline Icon: https://streamlinehq.com</desc><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m20.35 9.25 -5.9 7.4c-0.1 0.1 -0.1 0.3 -0.1 0.4 0.1 0.1 0.2 0.2 0.3 0.2h2.6v6l5.9 -7.4c0.1 -0.1 0.1 -0.3 0.1 -0.4 -0.1 -0.1 -0.2 -0.2 -0.3 -0.2h-2.6v-6Z" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.55 7.55c4.3078 0 7.8 -1.52223 7.8 -3.4S12.8578 0.75 8.55 0.75C4.24218 0.75 0.75 2.27223 0.75 4.15s3.49218 3.4 7.8 3.4Z" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0.75 4.15002v5.2C0.75 11.25 4.25 12.75 8.55 12.75c2.1494 0 4.0989 -0.3748 5.5114 -0.987M16.35 9.35002v-5.2" stroke-width="1"></path><path stroke="#4f5970" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0.75 9.34998V14.55c0 1.9 3.5 3.4 7.8 3.4 1.1 0 2.1 -0.1 3 -0.3" stroke-width="1"></path></svg>
|
|
9012
|
+
`,
|
|
9013
|
+
},
|
|
9005
9014
|
{
|
|
9006
9015
|
name: "array-object",
|
|
9007
9016
|
svg: `<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -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,
|
|
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;
|
|
@@ -206,11 +206,13 @@ export interface ListBoxDropdownTypes {
|
|
|
206
206
|
menuClassName?: any;
|
|
207
207
|
listBoxParentClassName?: any;
|
|
208
208
|
link?: any;
|
|
209
|
+
selectAll?: boolean;
|
|
210
|
+
onSelectAll?: () => void;
|
|
209
211
|
isLoading?: boolean;
|
|
210
212
|
className?: string;
|
|
211
213
|
scrollElementId?: string;
|
|
212
214
|
buttonClassName?: string;
|
|
213
|
-
|
|
215
|
+
showChips?: boolean;
|
|
214
216
|
chipsParentClassName?: string;
|
|
215
217
|
chipClassName?: string;
|
|
216
218
|
chipTemplate?: any;
|
|
@@ -271,3 +273,36 @@ export interface ScMultiSelectTypes {
|
|
|
271
273
|
emptyFilterMessage?: any;
|
|
272
274
|
selectAll?: boolean;
|
|
273
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 {};
|