sccoreui 6.3.41 → 6.3.43

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
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const jsx_runtime_1 = require("react/jsx-runtime");
4
4
  require("./App.scss");
5
+ // import Home from "./pages/home";
5
6
  // import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
6
7
  // import Home from "./pages/home";
7
8
  const App = () => {
package/dist/App.scss CHANGED
@@ -1120,6 +1120,68 @@ button[aria-expanded="true"] {
1120
1120
  }
1121
1121
  }
1122
1122
 
1123
+ .p-button.list_box_button {
1124
+ height: auto;
1125
+ padding: 4px 8px;
1126
+ border-radius: var(--border-radius);
1127
+ color: var(--primary-400);
1128
+ svg {
1129
+ path {
1130
+ stroke: var(--primary-400);
1131
+ }
1132
+ }
1133
+ &:enabled {
1134
+ &:hover {
1135
+ background-color: var(--primary-25);
1136
+ border-radius: var(--border-radius);
1137
+ color: var(--primary-400);
1138
+ svg {
1139
+ path {
1140
+ stroke: var(--primary-400);
1141
+ }
1142
+ }
1143
+ }
1144
+ }
1145
+
1146
+
1147
+ }
1148
+
1149
+ .list_box_chips {
1150
+ display: flex;
1151
+ flex-wrap: wrap;
1152
+ align-items: center;
1153
+ list-style: none;
1154
+ margin: 0;
1155
+ padding: 0;
1156
+ gap: 8px;
1157
+
1158
+ .list_box_chip {
1159
+ padding:4px 8px;
1160
+ border: 1px solid var(--gray-200);
1161
+ border-radius: var(--border-radius);
1162
+ color: var(--gray-700);
1163
+ display: flex;
1164
+ align-items: center;
1165
+ font-size: 14px;
1166
+ svg {
1167
+ path {
1168
+ stroke: var(--gray-400);
1169
+ }
1170
+ }
1171
+ &:hover {
1172
+ border: 1px solid var(--gray-300);
1173
+ background-color: var(--primary-25);
1174
+ svg {
1175
+ transform: scale(1.1);
1176
+ cursor: pointer;
1177
+ path {
1178
+ stroke: var(--red-500);
1179
+ }
1180
+ }
1181
+ }
1182
+ }
1183
+ }
1184
+
1123
1185
  .list_box_dropdown {
1124
1186
  .p-listbox-header {
1125
1187
  padding: 12px !important;
@@ -1166,16 +1228,7 @@ button[aria-expanded="true"] {
1166
1228
  }
1167
1229
  }
1168
1230
 
1169
- .list_box_chips {
1170
- display: inline-block;
1171
- align-items: center;
1172
- list-style: none;
1173
1231
 
1174
- li {
1175
- float: left;
1176
- height: 24px;
1177
- }
1178
- }
1179
1232
 
1180
1233
  /////// Custom list_box_dropdown ///////////
1181
1234
 
@@ -2169,16 +2222,7 @@ button[aria-expanded="true"] {
2169
2222
  }
2170
2223
  }
2171
2224
 
2172
- .list_box_chips {
2173
- display: inline-block;
2174
- align-items: center;
2175
- list-style: none;
2176
2225
 
2177
- li {
2178
- float: left;
2179
- height: 24px;
2180
- }
2181
- }
2182
2226
 
2183
2227
  /////// Custom list_box_dropdown ///////////
2184
2228
 
@@ -2889,3 +2933,5 @@ button[aria-expanded="true"] {
2889
2933
  }
2890
2934
  }
2891
2935
  }
2936
+
2937
+ // listbox styles
@@ -5909,7 +5909,7 @@ a {
5909
5909
  .p-dialog .p-dialog-content {
5910
5910
  background: #ffffff;
5911
5911
  color: #495057;
5912
- padding: 24px;
5912
+ padding: 20px 24px 24px 24px;
5913
5913
  }
5914
5914
  .p-dialog .p-dialog-content:last-of-type {
5915
5915
  border-bottom-right-radius: var(--border-radius);
@@ -11,7 +11,9 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
11
11
  // import { Checkbox } from "primereact/checkbox";
12
12
  const ListBoxDropdown = ({ selectAll,
13
13
  // onSelectAll,
14
- onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }) => {
14
+ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
15
+ // buttonClassName,
16
+ showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }) => {
15
17
  const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
16
18
  // const [inpValue, setInpValue] = useState<any>();
17
19
  const optionsMenuRef = (0, react_1.useRef)();
@@ -96,7 +98,7 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
96
98
  window.removeEventListener("scroll", handleScroll);
97
99
  };
98
100
  }, [buttonPosition]);
99
- 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 && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
101
+ 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 && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
100
102
  // onMouseLeave={onMouseLeaveMenu}
101
103
  id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
102
104
  {
@@ -111,18 +113,17 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
111
113
  ? listBoxclassName
112
114
  : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
113
115
  },
114
- ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
115
- // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
116
- link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef }) })), selectedItems &&
117
- (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
118
- var _a, _b;
119
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName ? chipClassName : ""} cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof item === "object"
120
- ? item[`${optionLabel}`]
121
- : (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`]] }), showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `${chipClassName
122
- ? chipClassName
123
- : "cursor-pointer min-w-max mx-2 max-w-max p-1 flex align-items-center bg-gray-50 text-gray-700 text-base border-1 border-gray-300 border-round-lg"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", typeof item === "object"
124
- ? item[`${optionLabel}`]
125
- : (_b = listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`]] }), showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] })))] })) }), index)) }));
126
- }))] })))] })) }));
116
+ ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: "list_box_button", link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
117
+ // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
118
+ // link={link ? true : false}
119
+ icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "list_box_button", text: true }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
120
+ (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
121
+ var _a, _b;
122
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : ""} ${showRemoveIcon ? "pr-6 relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
123
+ ? item[`${optionLabel}`]
124
+ : (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
125
+ ? item[`${optionLabel}`]
126
+ : (_b = listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) }));
127
+ })) }))] })))] })) }));
127
128
  };
128
129
  exports.default = ListBoxDropdown;
@@ -1,3 +1,3 @@
1
1
  import { ListBoxDropdownTypes } from "../types/type";
2
- declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
2
+ declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
3
3
  export default ListBoxDropdown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sccoreui",
3
- "version": "6.3.41",
3
+ "version": "6.3.43",
4
4
  "description": "ui-sccore",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",