sccoreui 3.6.3 → 3.6.5

package/dist/App.scss

@@ -170,7 +170,6 @@ h3 {
 
 .sc_custom_multiselect {
   // max-width: 197px;
-  margin: 0 4px;
   width: max-content;
 
   * {
@@ -333,16 +332,27 @@ h3 {
 
 
 .custom_date_picker_sec {
-
   .custom_date_picker {
-
     // padding-left: 134px;
-    .p-inputtext {
-      padding-right: 16px;
-      width: 130px;
-      // max-width: max-content;
+    .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;
+    }
+  }
+}
 
   .custom_date_picker.multiple {
     .p-inputtext {
@@ -449,4 +459,10 @@ div:has(ul.date_filter) .p-datepicker-footer {
 
 // div:has(ul.date_filter) .p-datepicker-group-container {
 //   padding: 0;
-// }
+// }
+
+.Multi_select_dropdown_panel.hidePanelHeader {
+  .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 
@@ -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)), (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

@@ -43,10 +43,10 @@ const MultiSelectDropDown = (props) => {
             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: `panel_${props.dropdownType}`, 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 &&
+                (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 &&
                             (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, 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` })] }));
+                (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` })] }));
 };
 exports.MultiSelectDropDown = MultiSelectDropDown;
 exports.default = exports.MultiSelectDropDown;

package/dist/directives/svg-icons.js

@@ -8930,5 +8930,11 @@ exports.iconList = [
       </svg>
       `,
     },
+    {
+        name: "file-check-03",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.6654 1.8913V5.33341C11.6654 5.80012 11.6654 6.03348 11.7562 6.21174C11.8361 6.36854 11.9636 6.49602 12.1204 6.57592C12.2986 6.66675 12.532 6.66675 12.9987 6.66675H16.4408M7.4987 13.3334L9.16536 15L12.9154 11.25M11.6654 1.66669H7.33203C5.9319 1.66669 5.23183 1.66669 4.69705 1.93917C4.22665 2.17885 3.8442 2.56131 3.60451 3.03171C3.33203 3.56649 3.33203 4.26656 3.33203 5.66669V14.3334C3.33203 15.7335 3.33203 16.4336 3.60451 16.9683C3.8442 17.4387 4.22665 17.8212 4.69705 18.0609C5.23183 18.3334 5.9319 18.3334 7.33203 18.3334H12.6654C14.0655 18.3334 14.7656 18.3334 15.3003 18.0609C15.7707 17.8212 16.1532 17.4387 16.3929 16.9683C16.6654 16.4336 16.6654 15.7335 16.6654 14.3334V6.66669L11.6654 1.66669Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>`
+    }
 ];
 // console.log(iconList.length)

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.3",
+  "version": "3.6.5",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",