sccoreui 5.1.7 → 5.1.8

package/dist/App.scss

@@ -302,6 +302,13 @@ code {
   }
 }
 
+
+.multi-pl-32 {
+  padding-left: 40px;
+  border: 1px solid red;
+}
+
+
 .selected_multile {
   .p-multiselect-token-label {
     padding-right: 18px;
@@ -321,7 +328,11 @@ code {
   }
 }
 
-
+.mutli_select_status {
+  .p-multiselect-label {
+    padding-left: 44px !important;
+  }
+}
 
 .status_dropdown.selected_multile {
   .left_section_item {

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

@@ -5,7 +5,7 @@ const listbox_1 = require("primereact/listbox");
 const menu_1 = require("primereact/menu");
 const react_1 = require("react");
 const sccoreui_1 = require("sccoreui");
-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 }) => {
+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 }) => {
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const optionsMenuRef = (0, react_1.useRef)();
     const onSelectOption = (e) => {
@@ -47,7 +47,7 @@ const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, l
         // handleFormValues(formValues);
         onDranghandle(newItems);
     };
-    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, { popup: true, className: menuClassName ? menuClassName : '', ref: optionsMenuRef, model: [{
+    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(e), onHide: (e) => onHide(e), onFocus: (e) => onFocus(e), popup: true, className: menuClassName ? menuClassName : '', ref: optionsMenuRef, model: [{
                             template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName ? listBoxParentClassName + ' list_box_dropdown' : '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)

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -53,7 +53,7 @@ const MultiSelectDropDown = (props) => {
                             (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
                                         clearIcon()] }))] })), props.dropdownType === 'status' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${items.length > 2 ? "mutli_select_status" : ""} ${props.className} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
                             (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
                                         clearIcon()] }))] })), props.dropdownType === '' &&
                 (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } })] }));

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

@@ -1,3 +1,3 @@
 import { ListBoxDropdownTypes } from "../types/type";
-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 }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
+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;
 export default ListBoxDropdown;

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

@@ -216,6 +216,9 @@ export interface ListBoxDropdownTypes {
     onRemoveItem?: any;
     isDraggable?: boolean;
     onDranghandle?: (payload: any) => void;
+    onShow?: (payload: any) => void;
+    onHide?: (payload: any) => void;
+    onFocus?: (payload: any) => void;
 }
 export interface DatePickerTypes {
     value: any;

package/package.json

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