sccoreui 6.4.60 → 6.4.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/App.js
CHANGED
|
@@ -5,6 +5,6 @@ require("./App.scss");
|
|
|
5
5
|
// import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
|
|
6
6
|
// import Home from "./pages/home";
|
|
7
7
|
const App = () => {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)("div", { className: "m-6" });
|
|
8
|
+
return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "m-6" }, { children: " " }));
|
|
9
9
|
};
|
|
10
10
|
exports.default = App;
|
package/dist/App.scss
CHANGED
|
@@ -2692,6 +2692,20 @@ button[aria-expanded="true"] {
|
|
|
2692
2692
|
padding: 10px;
|
|
2693
2693
|
}
|
|
2694
2694
|
|
|
2695
|
+
// modal with filter
|
|
2696
|
+
.modal_filter {
|
|
2697
|
+
max-width: 960px;
|
|
2698
|
+
overflow-x: auto;
|
|
2699
|
+
.p-dialog-header {
|
|
2700
|
+
display: none;
|
|
2701
|
+
}
|
|
2702
|
+
.p-dialog-content {
|
|
2703
|
+
padding: 0px;
|
|
2704
|
+
border-radius: 6px;
|
|
2705
|
+
overflow-x: auto;
|
|
2706
|
+
}
|
|
2707
|
+
}
|
|
2708
|
+
|
|
2695
2709
|
// .table-filter-overlay {
|
|
2696
2710
|
// width: 51rem !important;
|
|
2697
2711
|
// &:after,
|
|
@@ -8,13 +8,14 @@ const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"))
|
|
|
8
8
|
const divider_1 = require("primereact/divider");
|
|
9
9
|
const context_provider_1 = require("../../context-provider");
|
|
10
10
|
const inputtext_1 = require("primereact/inputtext");
|
|
11
|
-
|
|
11
|
+
// import { OverlayPanel } from "primereact/overlaypanel";
|
|
12
12
|
const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/svg-component"));
|
|
13
13
|
const Types_1 = require("../../Types");
|
|
14
14
|
const constants_1 = tslib_1.__importDefault(require("../../constants"));
|
|
15
15
|
const helper_1 = require("../../helper");
|
|
16
16
|
const utilComponents_1 = require("../../utilComponents");
|
|
17
17
|
const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../../skeletons/FeatureSkeleton"));
|
|
18
|
+
const dialog_1 = require("primereact/dialog");
|
|
18
19
|
// import "./TableFilter.module.scss";
|
|
19
20
|
const TableFilter = () => {
|
|
20
21
|
const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
|
|
@@ -26,7 +27,8 @@ const TableFilter = () => {
|
|
|
26
27
|
const [conditionsArray, setConditionsArray] = (0, react_1.useState)([]);
|
|
27
28
|
const [allFieldsFilled, setAllFieldsFilled] = (0, react_1.useState)(false);
|
|
28
29
|
const [enbleApply, setEnableApply] = (0, react_1.useState)(true);
|
|
29
|
-
const [isOverlayOpened, setIsOverlayOpened] =
|
|
30
|
+
// const [isOverlayOpened, setIsOverlayOpened] = useState<boolean>(false);
|
|
31
|
+
const [isVisible, setIsVisible] = (0, react_1.useState)(false);
|
|
30
32
|
const [displayInput, setDisplayInput] = (0, react_1.useState)(false);
|
|
31
33
|
const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayFilter);
|
|
32
34
|
const tableColumns = columnData === null || columnData === void 0 ? void 0 : columnData.filter((eachColumn) => eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isFilterable).map((eachColumn) => ({
|
|
@@ -89,7 +91,8 @@ const TableFilter = () => {
|
|
|
89
91
|
(_a = gridApi.current.api) === null || _a === void 0 ? void 0 : _a.showAdvancedFilterBuilder(event);
|
|
90
92
|
}
|
|
91
93
|
else {
|
|
92
|
-
showFilter.current.toggle(event);
|
|
94
|
+
// showFilter.current.toggle(event);
|
|
95
|
+
setIsVisible(true);
|
|
93
96
|
}
|
|
94
97
|
};
|
|
95
98
|
const updateconditionsArray = (conditionObj, conditionIndex) => {
|
|
@@ -145,7 +148,7 @@ const TableFilter = () => {
|
|
|
145
148
|
showFilter.current.toggle(false);
|
|
146
149
|
};
|
|
147
150
|
const filterLogoToggle = () => {
|
|
148
|
-
|
|
151
|
+
setIsVisible(false), setDisplayInput(false), setViewName("");
|
|
149
152
|
};
|
|
150
153
|
(0, react_1.useEffect)(() => {
|
|
151
154
|
if (conditionsArray.length === 0) {
|
|
@@ -159,9 +162,12 @@ const TableFilter = () => {
|
|
|
159
162
|
else {
|
|
160
163
|
setConditionsArray(globalFilters);
|
|
161
164
|
}
|
|
162
|
-
}, [
|
|
165
|
+
}, [isVisible]);
|
|
163
166
|
(0, react_1.useEffect)(() => {
|
|
164
|
-
const isAllFieldsFilled = conditionsArray
|
|
167
|
+
const isAllFieldsFilled = conditionsArray
|
|
168
|
+
.filter((y) => !(y.condition === Types_1.FilteredConditionTypes.IS_KNOWN ||
|
|
169
|
+
y.condition === Types_1.FilteredConditionTypes.IS_UNKNOWN))
|
|
170
|
+
.every((condition) => {
|
|
165
171
|
if (condition.columnName && condition.condition) {
|
|
166
172
|
return Array.isArray(condition.value)
|
|
167
173
|
? condition.value.length > 0
|
|
@@ -171,10 +177,10 @@ const TableFilter = () => {
|
|
|
171
177
|
});
|
|
172
178
|
setAllFieldsFilled(isAllFieldsFilled && enbleApply);
|
|
173
179
|
}, [conditionsArray, enbleApply]);
|
|
174
|
-
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-6 ${isDisabled && "disabled"} ${
|
|
180
|
+
return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-6 ${isDisabled && "disabled"} ${isVisible ||
|
|
175
181
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
176
182
|
? "bg-primary-50"
|
|
177
|
-
: "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color:
|
|
183
|
+
: "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isVisible ||
|
|
178
184
|
(globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
|
|
179
185
|
? "#243DC6"
|
|
180
186
|
: "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
|
|
@@ -183,18 +189,18 @@ const TableFilter = () => {
|
|
|
183
189
|
e.preventDefault();
|
|
184
190
|
e.stopPropagation();
|
|
185
191
|
onresetFilter();
|
|
186
|
-
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
192
|
+
} }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsxs)(dialog_1.Dialog, Object.assign({ visible: isVisible, onHide: () => filterLogoToggle(), className: "modal_filter mt-5 -ml-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-semibold line-height-3 text-gray-900" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
|
|
193
|
+
? filterModelText.subHeader
|
|
194
|
+
: "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-y-auto overflow-x-hidden flex flex-column gap-1" }, { children: conditionsArray.map((eachCondition, index) => {
|
|
195
|
+
return ((0, jsx_runtime_1.jsx)("div", { children: renderCondition(eachCondition, index) }, index));
|
|
196
|
+
}) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "focus:shadow-none font-semibold border-none hover:bg-primary-25 text-primary-400", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.resetFilterAction)
|
|
197
|
+
? filterModelText.resetFilterAction
|
|
198
|
+
: "Reset Filter", onClick: onresetFilter }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 px-4 flex justify-content-center focus:shadow-none mr-3", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewAction)
|
|
199
|
+
? filterModelText.createViewAction
|
|
200
|
+
: "Create view", onClick: () => setDisplayInput(true), disabled: !allFieldsFilled, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-suffix` }, { children: [displayInput && ((0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto mr-2", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setViewName(""), className: "p-0 h-auto", disabled: !viewName.length, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-gray-500" }) })] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewInputPlaceHolder)
|
|
201
|
+
? filterModelText.createViewInputPlaceHolder
|
|
202
|
+
: "Enter", value: viewName, onChange: (e) => setViewName(e.target.value), className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full pl-3 pr-60 mr-3" })] }))), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base font-semibold text-gray-600 p-1 focus:shadow-none text-white w-4rem", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.applyAction)
|
|
203
|
+
? filterModelText.applyAction
|
|
204
|
+
: "Apply", onClick: onApplyFilter, disabled: !allFieldsFilled })] }))] }))] }))] }));
|
|
199
205
|
};
|
|
200
206
|
exports.default = TableFilter;
|
|
@@ -44,24 +44,24 @@ const MultiSelectDropDown = (props) => {
|
|
|
44
44
|
};
|
|
45
45
|
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 ${props.className} ${isMoreThanOne
|
|
46
46
|
? `selected_multile ${`selected_num_` + (items === null || items === void 0 ? void 0 : items.length)}`
|
|
47
|
-
: ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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: {
|
|
47
|
+
: ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? "hidePanelHeader" : ""}`, value: items, onChange: (e) => onChange(e), options: props.options, resetFilterOnHide: true, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
48
48
|
minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
49
49
|
maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
50
50
|
}, className: `w-full ${props.maxWidth ? `${"optionBodyMaxWidth_" + props.maxWidth}` : ""}`, panelStyle: {
|
|
51
51
|
width: props.panelWidth ? props.panelWidth + "px" : "",
|
|
52
52
|
} }, multiSelectExtraProps)), (items === null || items === void 0 ? void 0 : 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 === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), props.dropdownType === "default" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? "left_icon" : "no_icon"} ${isMoreThanOne
|
|
53
53
|
? `selected_multile ${`selected_num_` + (items === null || items === void 0 ? void 0 : items.length)}`
|
|
54
|
-
: ""}` }, { children: [props.icon !== undefined && (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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: {
|
|
54
|
+
: ""}` }, { children: [props.icon !== undefined && (0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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, resetFilterOnHide: true, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
55
55
|
minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
56
56
|
maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
57
57
|
}, className: `w-full`, panelStyle: {
|
|
58
58
|
width: props.panelWidth ? props.panelWidth + "px" : "",
|
|
59
|
-
} }, multiSelectExtraProps)), (items === null || items === void 0 ? void 0 : 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 === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "status" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${(items === null || items === void 0 ? void 0 : items.length) > 2 ? "mutli_select_status" : ""} ${props.className} ${(items === null || items === void 0 ? void 0 : items.length) > 3 ? "moreThanThreeItems" : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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: {
|
|
59
|
+
} }, multiSelectExtraProps)), (items === null || items === void 0 ? void 0 : 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 === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "status" && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${(items === null || items === void 0 ? void 0 : items.length) > 2 ? "mutli_select_status" : ""} ${props.className} ${(items === null || items === void 0 ? void 0 : items.length) > 3 ? "moreThanThreeItems" : ""}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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, resetFilterOnHide: true, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
60
60
|
minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
61
61
|
maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
62
62
|
}, className: `w-full`, panelStyle: {
|
|
63
63
|
width: props.panelWidth ? props.panelWidth + "px" : "",
|
|
64
|
-
} }, multiSelectExtraProps)), (items === null || items === void 0 ? void 0 : 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 === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "" && ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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: {
|
|
64
|
+
} }, multiSelectExtraProps)), (items === null || items === void 0 ? void 0 : 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 === null || items === void 0 ? void 0 : items.length) - props.maxSelectedLabels] }))), props.clear && clearIcon()] })))] }))), (props === null || props === void 0 ? void 0 : props.dropdownType) === "" && ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ 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", resetFilterOnHide: true, maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
65
65
|
minWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
66
66
|
maxWidth: props.dropdownWidth ? props.dropdownWidth + "px" : "",
|
|
67
67
|
},
|