sccoreui 6.3.45 → 6.3.47

package/dist/App.scss

@@ -1142,8 +1142,45 @@ button[aria-expanded="true"] {
       }
     }
   }
-  
-  
+}
+
+.p-button.list_box_btn {
+  font-weight: 600;
+  border-radius: var(--border-radius);
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  padding-inline: 6px 10px !important;
+  color: var(--primary-500);
+  background: transparent;
+  &:not(.section_btn) {
+    height: 28px;
+  }
+  color: var(--primary-500);
+  &.section_btn {
+    padding: 6px 10px 6px 6px;
+  }
+  &:hover {
+    background-color: var(--primary-25);
+    color: var(--primary-700);
+    svg {
+      path {
+        stroke: var(--primary-700);
+      }
+    }
+  }
+  &:has(svg) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  svg {
+    path {
+      stroke: var(--primary-500);
+    }
+  }
 }
 
 .list_box_chips {
@@ -1156,29 +1193,32 @@ button[aria-expanded="true"] {
   gap: 8px;
 
   .list_box_chip {
-   padding:4px 8px;
-   border: 1px solid var(--gray-200);
-   border-radius: var(--border-radius);
-   color: var(--gray-700);
-   display: flex;
-   align-items: center;
-   font-size: 14px;
-   svg {
-    path {
-      stroke: var(--gray-400);
-    }
-   }
-   &:hover {
-    border: 1px solid var(--gray-300);
-    background-color: var(--primary-25);
+    padding: 3px 4px 3px 8px;
+    border: 1px solid var(--gray-200);
+    border-radius: var(--border-radius);
+    color: var(--gray-700);
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 4px;
     svg {
-      transform: scale(1.1);
-      cursor: pointer;
+      width: 15px;
+      height: 15px;
       path {
-        stroke: var(--red-500);
+        stroke: var(--gray-400);
+      }
+    }
+    &:hover {
+      border: 1px solid var(--gray-300);
+      background-color: var(--primary-25);
+      svg {
+        transform: scale(1.1);
+        cursor: pointer;
+        path {
+          stroke: var(--red-500);
+        }
       }
     }
-   }
   }
 }
 
@@ -1228,8 +1268,6 @@ button[aria-expanded="true"] {
   }
 }
 
-
-
 /////// Custom list_box_dropdown ///////////
 
 //ScMulti Select//
@@ -2222,8 +2260,6 @@ button[aria-expanded="true"] {
   }
 }
 
-
-
 /////// Custom list_box_dropdown ///////////
 
 //ScMulti Select//
@@ -2934,4 +2970,156 @@ button[aria-expanded="true"] {
   }
 }
 
-// listbox styles
+// button styles
+// .p-button.sc_btn,
+// div.sc_btn {
+//   font-weight: 600;
+//   border-radius: var(--border-radius);
+//   display: flex;
+//   align-items: center;
+//   padding: 8px 16px;
+//   cursor: pointer;
+//   font-size: 14px;
+//   padding: 8px 16px;
+
+//   &:has(svg) {
+//     display: flex;
+//     align-items: center;
+//     gap: 6px;
+//   }
+//   svg {
+//     width: 18px;
+//     height: 18px;
+//     path {
+//       stroke: #fff;
+//     }
+//   }
+//   &.primary {
+//     background-color: var(--primary-500);
+//     color: #fff;
+//     &:hover {
+//       background-color: var(--primary-700);
+//     }
+//   }
+//   &.destructive {
+//     background-color: var(--red-600);
+//     color: #fff;
+//     &:hover {
+//       background-color: var(--red-700);
+//     }
+//   }
+
+//   &.secondary {
+//     background-color: var(--bg-white);
+//     padding-block: 7px !important;
+//     // outline-offset: -1px;
+//     color: var(--gray-700);
+//     border: 1px solid var(--gray-300) !important;
+//     &:hover {
+//       background-color: var(--gray-50);
+//       color: var(--gray-900);
+//     }
+//   }
+
+//   // Teritiary buttons
+//   &.tertiary {
+//     background-color: transparent;
+//     &.primary_text {
+//       color: var(--primary-500);
+//       &:hover {
+//         background-color: var(--primary-25);
+//         color: var(--primary-700);
+//         svg {
+//           path {
+//             stroke: var(--primary-700);
+//           }
+//         }
+//       }
+//       svg {
+//         path {
+//           stroke: var(--primary-600);
+//         }
+//       }
+//     }
+//     &.destructive_text {
+//       color: var(--red-600);
+//       &:hover {
+//         background-color: var(--red-50);
+//         color: var(--red-700);
+//         svg {
+//           path {
+//             stroke: var(--red-700);
+//           }
+//         }
+//       }
+//       svg {
+//         path {
+//           stroke: var(--red-600);
+//         }
+//       }
+//     }
+//     &.secondary_text {
+//       color: var(--gray-600);
+//       &:hover {
+//         background-color: var(--gray-50);
+//         color: var(--gray-700);
+//         svg {
+//           path {
+//             stroke: var(--gray-700);
+//           }
+//         }
+//       }
+//       svg {
+//         path {
+//           stroke: var(--gray-600);
+//         }
+//       }
+//     }
+//   }
+//   &.icon_right {
+//     padding: 8px 12px 8px 16px;
+//   }
+//   &.icon_left {
+//     padding: 8px 16px 8px 12px;
+//   }
+//   &.icon_both {
+//     padding: 8px 12px;
+//   }
+//   &.icon_btn {
+//     padding: 8px 12px;
+//     border-radius: var(--border-radius);
+//     background-color: transparent;
+//     border: 0 !important;
+
+//     &.primary {
+//       svg {
+//         path {
+//           stroke: var(--primary-500);
+//         }
+//       }
+//       &:hover {
+//         background-color: var(--primary-25);
+//         svg {
+//           path {
+//             stroke: var(--primary-700);
+//           }
+//         }
+//       }
+//     }
+//     &.secondary {
+//       svg {
+//         path {
+//           stroke: var(--gray-600);
+//         }
+//       }
+//       &:hover {
+//         background-color: var(--gray-50);
+//         svg {
+//           path {
+//             stroke: var(--gray-700);
+//           }
+//         }
+//       }
+//     }
+//   }
+// }

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -13,7 +13,7 @@ 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, confirmationOption, selectedOptionNone, }) => {
+showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, }) => {
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     const optionsMenuRef = (0, react_1.useRef)();
@@ -105,7 +105,7 @@ showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, re
                             template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
                                     ? listBoxParentClassName +
                                         " list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
-                                    : "list_box_dropdown" }, { children: [headerTemplate && (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 ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: selectedOptionNone
+                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { type: "sectionHeader", itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${selectedOptionNone ? "selected-none" : ""} ${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && ""}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: selectedOptionNone
                                             ? listItems.length === selectedItems.length
                                                 ? []
                                                 : listItems
@@ -113,17 +113,17 @@ showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, re
                                             ? listBoxclassName
                                             : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: "sc_list_box_btn", link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
                             // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
                             // link={link ? true : false}
-                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "sc_list_box_btn", text: true }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
+                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}` }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
                                 (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                     var _a, _b;
-                                    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((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: `select-none ${chipClassName ? chipClassName : ""}    ${showRemoveIcon ? "pr-6 relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
+                                    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((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: `select-none ${chipClassName ? chipClassName : "list_box_chip"}    ${showRemoveIcon ? "relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
+                                                        : (_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` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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 : 15 })] })))] })) }), index)) }));
+                                                        : (_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: `${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) }));
                                 })) }))] })))] })) }));
 };
 exports.default = ListBoxDropdown;

package/dist/components/treeDropdownSelect/treeDropdownSelect.js

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tree_1 = require("primereact/tree");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const badge_1 = require("primereact/badge");
-const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode, classNames, displayLabelName }) => {
+const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode, classNames, displayLabelName, icon, }) => {
     const onClickNode = (e) => {
         if (clickOnNode)
             clickOnNode(e);
     };
-    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) }));
+    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: node[icon] ? node[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) }));
 };
 exports.default = TreeDropdownSelect;

package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts

@@ -1,3 +1,3 @@
 import { ListBoxDropdownTypes } from "../types/type";
-declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
+declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, type, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxDropdown;

package/dist/types/components/treeDropdownSelect/treeDropdownSelect.d.ts

@@ -1,3 +1,3 @@
-import { TreeDropdownSelectTypes } from '../types/type';
-declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode, classNames, displayLabelName }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
+import { TreeDropdownSelectTypes } from "../types/type";
+declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode, classNames, displayLabelName, icon, }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
 export default TreeDropdownSelect;

package/dist/types/components/types/type.d.ts

@@ -195,6 +195,7 @@ export interface TreeDropdownSelectTypes {
     expandedKeys: any;
     classNames?: any;
     isLoading?: boolean;
+    icon?: any;
 }
 export interface CustomColorPickerTypes {
     onChange?: any;
@@ -255,6 +256,7 @@ export interface ListBoxDropdownTypes {
     onFocus?: (payload: any) => void;
     confirmationOption?: boolean;
     selectedOptionNone?: boolean;
+    type?: any;
 }
 export interface DatePickerTypes {
     value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.3.45",
+  "version": "6.3.47",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",