sccoreui 3.6.5 → 3.6.7

package/dist/App.scss

@@ -254,17 +254,6 @@ h3 {
         background: #667085;
       }
 
-      li.active {
-        background: #12B76A;
-      }
-
-      li.inactive {
-        background: #F04438;
-      }
-
-      li.draft {
-        background: #162578;
-      }
 
       li:nth-child(2) {
         left: 6px;
@@ -290,12 +279,14 @@ h3 {
   }
 }
 
-.selected_multile.selected_num_3 {
+.selected_multile.selected_num_3 , .selected_multile.moreThanThreeItems {
   .p-multiselect .p-multiselect-label {
     padding-left: 44px;
   }
 }
 
+
+
 .status_dropdown.selected_multile {
   .left_section_item {
     max-width: 28px;
@@ -307,16 +298,16 @@ h3 {
   }
 }
 
-.status_dropdown_item:before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  transform: translateY(-50%);
-  top: 50%;
-  left: 10px;
-  border-radius: 50px;
-}
+// .status_dropdown_item:before {
+//   content: '';
+//   width: 10px;
+//   height: 10px;
+//   position: absolute;
+//   transform: translateY(-50%);
+//   top: 50%;
+//   left: 10px;
+//   border-radius: 50px;
+// }
 
 .status_dropdown_item.Active::before {
   background: #12B76A;
@@ -330,29 +321,45 @@ h3 {
   background: #162578;
 }
 
+.status_dropdown_item {
+  .status_dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50px;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    left: 10px;
+  }
+}
+
 
 .custom_date_picker_sec {
   .custom_date_picker {
+
     // padding-left: 134px;
-    .p-inputtext { padding-right: 16px;
-    width: 130px;
-    // max-width: max-content;
-  }
-  .p-inputtext {
-    &:enabled {
+    .p-inputtext {
+      padding-right: 16px;
+      width: 130px;
+      // max-width: max-content;
+    }
+
+    .p-inputtext {
+      &:enabled {
+        &:focus {
+          box-shadow: none !important;
+          border-color: #d0d5dd !important;
+        }
+      }
+    }
+
+    .p-datepicker-trigger {
       &:focus {
         box-shadow: none !important;
         border-color: #d0d5dd !important;
       }
     }
   }
-  .p-datepicker-trigger {
-    &:focus {
-      box-shadow: none !important;
-      border-color: #d0d5dd !important;
-    }
-  }
-}
 
   .custom_date_picker.multiple {
     .p-inputtext {
@@ -462,7 +469,7 @@ div:has(ul.date_filter) .p-datepicker-footer {
 // }
 
 .Multi_select_dropdown_panel.hidePanelHeader {
-  .p-multiselect-header{
+  .p-multiselect-header {
     display: none;
   }
 }

package/dist/components/date-picker/date-picker.js

@@ -91,7 +91,7 @@ const DatePicker = (props) => {
         for (let key in props) {
             switch (key) {
                 case 'iconPos':
-                    datePickerProps['iconPos'] = props.iconPos;
+                    // datePickerProps['iconPos'] = props.iconPos
                     datePickerProps['icon'] = (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: props.icon });
                     break;
                 case 'numberOfMonths':
@@ -106,6 +106,9 @@ const DatePicker = (props) => {
                 case 'placeholder':
                     datePickerProps['placeholder'] = props.placeholder;
                     break;
+                case 'maxDate':
+                    datePickerProps['maxDate'] = props.maxDate;
+                    break;
                 case 'className':
                     datePickerProps['className'] = props.className;
                     break;
@@ -138,7 +141,7 @@ const DatePicker = (props) => {
         };
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center absolute right-20 clear_icon_sec cursor-pointer" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex justify-content-center w-full relative align-items-center custom_date_picker_sec` }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ ref: dateRef, showIcon: true, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: `custom_date_picker ${(!JSON.stringify(fromDate).includes('null') && JSON.stringify(fromDate).includes(',')) ? 'multiple' : ''}` }, propsState)), (props.clear && JSON.stringify(fromDate).split(',').length > 1) &&
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex justify-content-center w-full relative align-items-center custom_date_picker_sec` }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ ref: dateRef, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: `custom_date_picker ${(!JSON.stringify(fromDate).includes('null') && JSON.stringify(fromDate).includes(',')) ? 'multiple' : ''}` }, propsState, { iconPos: props.iconPos })), (props.clear && JSON.stringify(fromDate).split(',').length > 1) &&
                 clearIcon()] })));
 };
 exports.DatePicker = DatePicker;

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

@@ -10,10 +10,10 @@ const MultiSelectDropDown = (props) => {
     const [items, setItems] = (0, react_1.useState)([]);
     const [isMoreThanOne, setIsMoreThenOne] = (0, react_1.useState)(false);
     const LeftSection = () => {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.dropdownType !== undefined && props.dropdownType === "status") ?
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.dropdownType === "status" ?
                 (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'select_status_prv absolute left_section_item z-5' }, { children: items.length > 0 ?
                         (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: items.map((status, i) => {
-                                return (0, jsx_runtime_1.jsx)("li", { className: `${status.lable}` }, i);
+                                return (0, jsx_runtime_1.jsx)("li", { style: { background: status.color }, className: `${status.name.replaceAll(' ', '').toLowerCase()}` }, i);
                             }) }))
                         :
                             (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: (0, jsx_runtime_1.jsx)("li", { className: 'all' }) })) }))
@@ -42,8 +42,14 @@ const MultiSelectDropDown = (props) => {
         if (props.value !== undefined)
             setItems(props.value);
     }, [props.value]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType !== '' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${(props.dropdownType !== undefined && props.dropdownType === "status") ? 'status_dropdown' : ''} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: props.dropdownType === 'status' ? (option) => { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `status_dropdown_item pl-6 ${option.name}` }, { children: option.name })) })); } : '', filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
+    const itemTemplate = (option) => {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${option.name.replaceAll(' ', '').toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'status_dot', style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'otption_name mr-8' }, { children: option.name }))] })) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === 'withIcon' &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${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, className: `w-full md:w-20rem` }), 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 ${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.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, className: `w-full md:w-20rem` }), 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.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` })] }));

package/package.json

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