sccoreui 3.6.4 → 3.6.6

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,9 +321,20 @@ 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;
@@ -341,6 +343,22 @@ h3 {
       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;
+      }
+    }
   }
 
   .custom_date_picker.multiple {
@@ -451,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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const calendar_1 = require("primereact/calendar");
@@ -7,18 +8,19 @@ const react_1 = require("react");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const DatePicker = (props) => {
+    const dateRef = (0, react_1.useRef)(null);
     const today = new Date();
     const options = { year: 'numeric', month: 'short', day: 'numeric' };
     const oneWeekFromToday = new Date(today);
-    oneWeekFromToday.setDate(today.getDate() + 7);
+    oneWeekFromToday.setDate(today.getDate());
     const formattedDate = today.toLocaleDateString('en-US', options);
-    const [fromDate, setFromDate] = (0, react_1.useState)(today);
+    const [fromDate, setFromDate] = (0, react_1.useState)([]);
     const [fromDateFormate, setFromDateFormate] = (0, react_1.useState)(formattedDate);
     const [toDateFormate, setToDateFormate] = (0, react_1.useState)('-');
     const [propsState, setPropsState] = (0, react_1.useState)({});
-    let dateFromTo = {};
+    let dateFromTo = [];
     const selecteDateOption = (dateType) => {
-        dateFromTo[0] = today;
+        dateFromTo.push(today);
         switch (dateType) {
             case 'Today':
                 // Default date
@@ -26,43 +28,39 @@ const DatePicker = (props) => {
             case 'Yesterday':
                 const yesterdayFromToday = new Date(today);
                 yesterdayFromToday.setDate(today.getDate() - 1);
-                dateFromTo[0] = yesterdayFromToday;
-                dateFromTo[1] = today;
+                dateFromTo.unshift(yesterdayFromToday);
                 break;
             case 'This week': {
                 const oneWeekFromToday = new Date(today);
                 oneWeekFromToday.setDate(today.getDate() + 7);
-                dateFromTo[1] = oneWeekFromToday;
+                dateFromTo.push(oneWeekFromToday);
                 break;
             }
             case 'Last week': {
                 const lastWeekFromToday = new Date(today);
                 lastWeekFromToday.setDate(today.getDate() - 7);
-                dateFromTo[0] = lastWeekFromToday;
-                dateFromTo[1] = today;
+                dateFromTo.unshift(lastWeekFromToday);
                 break;
             }
             case 'This month':
                 const oneMonthFromToday = new Date(today);
                 oneMonthFromToday.setDate(today.getDate() + 30);
-                dateFromTo[1] = oneMonthFromToday;
+                dateFromTo.push(oneMonthFromToday);
                 break;
             case 'Last month':
                 const lastOneMonthFromToday = new Date(today);
                 lastOneMonthFromToday.setDate(today.getDate() - 30);
-                dateFromTo[0] = lastOneMonthFromToday;
-                dateFromTo[1] = today;
+                dateFromTo.unshift(lastOneMonthFromToday);
                 break;
             case 'This year':
                 const oneYearFromToday = new Date(today);
                 oneYearFromToday.setFullYear(today.getFullYear() + 1);
-                dateFromTo[1] = oneYearFromToday;
+                dateFromTo.push(oneYearFromToday);
                 break;
             case 'Last year':
                 const lastOneYearFromToday = new Date(today);
                 lastOneYearFromToday.setFullYear(today.getFullYear() - 1);
-                dateFromTo[0] = lastOneYearFromToday;
-                dateFromTo[1] = today;
+                dateFromTo.unshift(lastOneYearFromToday);
                 break;
             case 'Custom':
                 // Default date 
@@ -93,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':
@@ -140,7 +138,8 @@ 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({ 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, 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, { iconPos: props.iconPos })), (props.clear && JSON.stringify(fromDate).split(',').length > 1) &&
                 clearIcon()] })));
 };
-exports.default = DatePicker;
+exports.DatePicker = DatePicker;
+exports.default = exports.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/dist/types/components/date-picker/date-picker.d.ts

@@ -1,2 +1,2 @@
-declare const DatePicker: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: (props: any) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

package/package.json

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