sccoreui 5.6.2 → 5.6.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 (7) hide show
  1. package/dist/App.scss +4 -0
  2. package/dist/components/form/form-fields/form-fields.js +8 -8
  3. package/dist/components/froala-editor/FroalaEditor.js +0 -1
  4. package/dist/components/list-box-dropdown/list-box-dropdown.js +8 -6
  5. package/dist/components/sc-multi-select/scMultiSelect.js +2 -2
  6. package/dist/components/treeDropdownSelect/treeDropdownSelect.js +2 -2
  7. package/package.json +1 -2
package/dist/App.scss CHANGED
@@ -907,4 +907,8 @@ button[aria-expanded="true"] {
907
907
  .p-dropdown-label {
908
908
  display: block !important;
909
909
  }
910
+ }
911
+
912
+ .p-button.p-button-link:enabled:hover{
913
+ color: var(--primary-400) !important;
910
914
  }
package/dist/components/form/form-fields/form-fields.js CHANGED
@@ -10,13 +10,13 @@ const multiselect_1 = require("primereact/multiselect");
10
10
  const inputtextarea_1 = require("primereact/inputtextarea");
11
11
  const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
12
12
  const inputnumber_1 = require("primereact/inputnumber");
13
- const sccoreui_1 = require("sccoreui");
13
+ const skeleton_1 = require("primereact/skeleton");
14
14
  const InputTextField = (props) => {
15
15
  const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading } = props;
16
16
  return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ?
17
17
  (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({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name }))) }))] })
18
18
  :
19
- (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" }) }))] }), 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" }) }))] })));
19
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }), 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" }) }))] })));
20
20
  };
21
21
  const InputNumberField = (props) => {
22
22
  const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits } = props;
@@ -26,14 +26,14 @@ const InputNumberField = (props) => {
26
26
  :
27
27
  (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : '', min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, 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" }) }))] })
28
28
  :
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" }) }))] }) })));
29
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
30
30
  };
31
31
  const InputCurrencyField = (props) => {
32
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
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: ` customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, 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
- (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" }) }))] }) })));
36
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
37
37
  };
38
38
  const InputTextAreaField = (props) => {
39
39
  const [charCount, setCharCount] = (0, react_1.useState)(0);
@@ -45,21 +45,21 @@ const InputTextAreaField = (props) => {
45
45
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ?
46
46
  (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, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: maxLength, className: `pt-2 ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '20px', right: '12px' } }, { children: [charCount, "/", maxLength] }))] })) })), 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" }) }))] })
47
47
  :
48
- (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" }) }))] }) })));
48
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
49
49
  };
50
50
  const DropDownField = (props) => {
51
51
  const { errors, touched, name, length, label, placeholder, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading } = props;
52
52
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
53
53
  (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({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ showClear: showClear, panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, 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" }) }))] })
54
54
  :
55
- (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" }) }))] }) })));
55
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
56
56
  };
57
57
  const MultiSelectField = (props) => {
58
58
  const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter } = props;
59
59
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
60
60
  (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({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'} ${className}`, 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" }) }))] })
61
61
  :
62
- (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" }) }))] }) })));
62
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_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)(skeleton_1.Skeleton, { height: "40px" }) }))] }) })));
63
63
  };
64
64
  const PhoneNumberField = (props) => {
65
65
  const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading } = props;
@@ -81,7 +81,7 @@ const PhoneNumberField = (props) => {
81
81
  return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: !isLoading ?
82
82
  (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({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'full_form_field' : 'form_field'}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), 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" }) }))] })
83
83
  :
84
- (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)(sccoreui_1.Skeleton, { height: "40px", className: `full_form_field` })] }) })));
84
+ (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] }) })));
85
85
  };
86
86
  // const InputGroupField = (props: any) => {
87
87
  // const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate } = props;
package/dist/components/froala-editor/FroalaEditor.js CHANGED
@@ -7,7 +7,6 @@ require("froala-editor/css/froala_editor.pkgd.min.css");
7
7
  require("froala-editor/css/froala_style.min.css");
8
8
  const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wysiwyg"));
9
9
  require("froala-editor/js/plugins.pkgd.min.js");
10
- // import { SvgComponent } from 'sccoreui';
11
10
  // import SvgComponent from '../../directives/svg-component';
12
11
  // import { Bold, Italic } from '../../assets/svg/svg';
13
12
  const FroalaTextEditor = ({ onChange, value, placeholderText, id, className, maxLength = 255 }) => {
package/dist/components/list-box-dropdown/list-box-dropdown.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
3
4
  const jsx_runtime_1 = require("react/jsx-runtime");
4
5
  const listbox_1 = require("primereact/listbox");
5
6
  const menu_1 = require("primereact/menu");
6
7
  const react_1 = require("react");
7
- const sccoreui_1 = require("sccoreui");
8
+ const button_1 = require("primereact/button");
9
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
8
10
  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
11
  const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
10
12
  const optionsMenuRef = (0, react_1.useRef)();
@@ -50,27 +52,27 @@ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, head
50
52
  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
53
  template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName ? listBoxParentClassName + ' list_box_dropdown' : 'list_box_dropdown' }, { children: [headerTemplate &&
52
54
  (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)
55
+ (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", onClick: () => { if (onSelectAll)
54
56
  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 ?
55
57
  optionTemplate(option)
56
58
  :
57
59
  (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 &&
58
60
  (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))
59
61
  }] }), !showChips ?
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) })
62
+ (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button 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) })
61
63
  :
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) => {
64
+ (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)(button_1.Button, { type: "button", className: `list_box_button 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) => {
63
65
  var _a, _b;
64
66
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ?
65
67
  (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 ?
66
68
  chipTemplate(item)
67
69
  :
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)
70
+ (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)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) }), index)
69
71
  :
70
72
  (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 ?
71
73
  chipTemplate(item)
72
74
  :
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) }));
75
+ (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)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) }), index) }));
74
76
  }))] }))] })) }));
75
77
  };
76
78
  exports.default = ListBoxDropdown;
package/dist/components/sc-multi-select/scMultiSelect.js CHANGED
@@ -1,10 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
- const sccoreui_1 = require("sccoreui");
4
+ const multiselect_1 = require("primereact/multiselect");
5
5
  const ScMultiSelect = (props) => {
6
6
  var _a, _b;
7
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount) ? 'showSelectedCount' : 'noShowSelectedCount'} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), ((props === null || props === void 0 ? void 0 : props.showSelectedCount) && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 1) &&
7
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) + ` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount) ? 'showSelectedCount' : 'noShowSelectedCount'} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), ((props === null || props === void 0 ? void 0 : props.showSelectedCount) && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 1) &&
8
8
  (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? '68px' : '40px'}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: `+${((_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.length) - 1}` })) }))] })) }));
9
9
  };
10
10
  exports.default = ScMultiSelect;
package/dist/components/treeDropdownSelect/treeDropdownSelect.js CHANGED
@@ -4,12 +4,12 @@ const tslib_1 = require("tslib");
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const tree_1 = require("primereact/tree");
6
6
  const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
7
- const sccoreui_1 = require("sccoreui");
7
+ const badge_1 = require("primereact/badge");
8
8
  const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode, classNames, displayLabelName }) => {
9
9
  const onClickNode = (e) => {
10
10
  if (clickOnNode)
11
11
  clickOnNode(e);
12
12
  };
13
- return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: `treeNoCollaps ${classNames ? classNames : ''}`, nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node[displayLabelName]] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(sccoreui_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
13
+ return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: `treeNoCollaps ${classNames ? classNames : ''}`, nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node[displayLabelName]] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(badge_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
14
14
  };
15
15
  exports.default = TreeDropdownSelect;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "5.6.2",
3
+ "version": "5.6.3",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -45,7 +45,6 @@
45
45
  "react-phone-number-input": "^3.3.6",
46
46
  "react-router-dom": "^6.12.0",
47
47
  "react-scripts": "^5.0.1",
48
- "sccoreui": "^2.5.2",
49
48
  "typescript": "^4.9.5",
50
49
  "yup": "^1.3.2"
51
50
  },