sccoreui 4.5.4 → 4.5.6

package/dist/App.scss

@@ -726,4 +726,47 @@ button[aria-expanded="true"] {
     }
   }
 }
-/// Custon treeDropdownSelect style end /////////////////
+/// Custon treeDropdownSelect style end /////////////////
+
+/////// Custom list_box_dropdown ///////////
+.list_box_dropdown {
+  .p-listbox-header {
+    padding: 12px !important;
+  }
+
+  ul.p-listbox-list {
+    padding: 6px;
+
+    li {
+      margin: 4px 0 !important;
+      border-radius: 10px !important;
+      padding: 8px 14px !important;
+
+      .item_content {
+        max-width: 80%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        // width: 100%;
+      }
+
+      .item_icon {
+        display: none;
+      }
+
+      &:focus {
+        box-shadow: none !important;
+      }
+    }
+
+    .p-highlight {
+      background: #F5F6FD !important;
+      color: #162578 !important;
+
+      .item_icon {
+        display: block;
+      }
+    }
+  }
+}
+/////// Custom list_box_dropdown ///////////

package/dist/components/chips/chip.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const ChipTag = (props) => {
     const { onRemove } = props;
-    return props.template ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.template })) : ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: !props.className
+    return props.template ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.template })) : ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: props.className
             ? "bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700"
-            : `bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700 ${props.className}` }, { children: [props.image && ((0, jsx_runtime_1.jsx)("img", { src: props.image, alt: props.imageAlt || "chip image" })), props.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.icon }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: props.label })), props.removable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: (e) => {
+            : props.className }, { children: [props.image && ((0, jsx_runtime_1.jsx)("img", { src: props.image, alt: props.imageAlt || "chip image" })), props.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.icon }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: props.label })), props.removable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: (e) => {
                     const el = e.currentTarget.parentElement;
                     props.onRemove !== undefined ? onRemove : el.remove();
                 } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.removeIcon || (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) }) })))] })));

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const listbox_1 = require("primereact/listbox");
+const menu_1 = require("primereact/menu");
+const react_1 = require("react");
+const sccoreui_1 = require("sccoreui");
+const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, listBoxclassName, optionTemplate }) => {
+    const [selectedCities, setSelectedCities] = (0, react_1.useState)(null);
+    const optionsMenuRef = (0, react_1.useRef)();
+    const onSelectOption = (e) => {
+        setSelectedCities(e.value);
+        onChange(e);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { popup: true, className: "w-16rem p-0", ref: optionsMenuRef, model: [{
+                            template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "list_box_dropdown w-16rem" }, { children: [headerTemplate &&
+                                        (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ?
+                                                optionTemplate(option)
+                                                :
+                                                    (0, jsx_runtime_1.jsx)("span", { children: option.name }) }), listClassName: listClassName ? listClassName : '', filter: filter ? true : false, multiple: multiple ? true : false, value: selectedCities, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: listBoxclassName ? listBoxclassName : '', filterPlaceholder: filterPlaceholder ? filterPlaceholder : '' }), footeTemplate &&
+                                        (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))
+                        }] }), (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { className: "focus:shadow-none", link: true, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })] }) }));
+};
+exports.default = ListBoxDropdown;

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.CustomSlider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
 exports.StyleClass = exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = exports.PanelMenu = exports.Menubar = exports.Menu = exports.Dock = exports.ContextMenu = exports.Toolbar = exports.SplitterPanel = exports.Splitter = exports.ScrollPanel = exports.Panel = exports.Fieldset = exports.DeferredContent = exports.Timeline = exports.TreeTable = exports.Tree = exports.PickList = exports.OrganizationChart = exports.OrderList = exports.DataScroller = exports.TriStateCheckbox = exports.TreeSelect = exports.SelectButton = exports.MultiStateCheckbox = exports.Mention = exports.ListBox = exports.Knob = exports.Editor = exports.CascadeSelect = exports.FilterOperator = exports.FilterMatchMode = exports.Slider = exports.Galleria = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
-exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
+exports.ListBoxDropdown = exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -216,4 +216,6 @@ var form_fields_1 = require("./components/form/form-fields/form-fields");
 Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return tslib_1.__importDefault(form_fields_1).default; } });
 var FroalaEditor_1 = require("./components/froala-editor/FroalaEditor");
 Object.defineProperty(exports, "FroalaTextEditor", { enumerable: true, get: function () { return tslib_1.__importDefault(FroalaEditor_1).default; } });
+var list_box_dropdown_1 = require("./components/list-box-dropdown/list-box-dropdown");
+Object.defineProperty(exports, "ListBoxDropdown", { enumerable: true, get: function () { return tslib_1.__importDefault(list_box_dropdown_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts

@@ -0,0 +1,3 @@
+import { ListBoxDropdownTypes } from "../types/type";
+declare const ListBoxDropdown: ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, listBoxclassName, optionTemplate }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
+export default ListBoxDropdown;

package/dist/types/components/types/type.d.ts

@@ -164,3 +164,20 @@ export interface FroalaTextEditorTypes {
     value: string;
     placeholderText: string;
 }
+export interface ListBoxDropdownTypes {
+    label: string;
+    labelIcon?: string;
+    labelIconPos?: any;
+    listItems: any;
+    headerTemplate?: any;
+    footeTemplate?: any;
+    filter?: any;
+    filterPlaceholder?: string;
+    multiple?: boolean;
+    listClassName?: any;
+    listBoxclassName?: any;
+    optionLabel: string;
+    optionTemplate?: any;
+    onChange?: any;
+    labelIconSize?: any;
+}

package/dist/types/index.d.ts

@@ -98,6 +98,7 @@ export { default as TreeDropdownSelect } from './components/treeDropdownSelect/t
 export { default as FormComponent } from "./components/form/form";
 export { default as FormFields } from "./components/form/form-fields/form-fields";
 export { default as FroalaTextEditor } from "./components/froala-editor/FroalaEditor";
+export { default as ListBoxDropdown } from './components/list-box-dropdown/list-box-dropdown';
 import { DropdownChangeEvent } from "primereact/dropdown";
 import { ColorPickerChangeEvent } from "primereact/colorpicker";
 import { SliderChangeEvent } from "primereact/slider";

package/package.json

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