sccoreui 4.3.4 → 4.3.5

package/dist/App.scss

@@ -598,8 +598,93 @@ div:has(ul.date_filter) .p-datepicker-footer {
 
 .text-editor {
   button {
-    &::after{
+    &::after {
       content: none !important;
     }
   }
-}
+}
+
+
+button#formatULOptions-1:hover::before,
+button#formatULOptions-1.fr-btn-hover::before,
+button#formatULOptions-1.fr-active::before,
+button#formatOLOptions-1:hover::before,
+button#formatOLOptions-1.fr-btn-hover::before,
+button#formatOLOptions-1.fr-active::before {
+  content: '';
+  border: 2px solid gray;
+  border-left: 0;
+  border-top: 0;
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  left: 2px;
+  top: 39%;
+  transform: rotate(45deg);
+}
+
+#fontFamily-1:before {
+  content: '';
+  border: 2px solid gray;
+  border-left: 0;
+  border-top: 0;
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  right: 8px;
+  top: 39%;
+  transform: rotate(45deg);
+}
+
+.fr-toolbar .fr-btn-grp {
+  display: inline-block;
+  margin: 0 0px 0 12px !important;
+}
+
+
+
+/// Custon treeDropdownSelect style
+.treeNoCollaps {
+  li {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  .p-tree-toggler {
+    display: none;
+  }
+
+  .treeBadge {
+    background: var(--Gray-100, #F2F4F7) !important;
+  }
+
+  .p-treenode-content:hover{
+    background: var(--Primary-25, #F5F6FD) !important;
+  }
+
+  .p-treenode-content:hover .treeItem,
+  .p-treenode-content:focus .treeItem {
+    color: var(--primary-400);
+
+    .treeBadge {
+      color: var(--Primary-400, #243DC6) !important;
+      background: var(--Primary-50, #E2E5FA) !important;
+    }
+  }
+
+  .p-treenode-content:hover svg path,
+  .p-treenode-content:focus svg path {
+    stroke: var(--primary-400) !important;
+  }
+
+  .p-treenode-content:focus {
+    box-shadow: none !important;
+    outline: none !important;
+    background: var(--Primary-25, #F5F6FD) !important;
+
+    .treeBadge {
+      color: var(--Primary-400, #243DC6) !important;
+      background: var(--Primary-50, #E2E5FA) !important;
+    }
+  }
+}
+/// Custon treeDropdownSelect style end /////////////////

package/dist/components/form/form-fields/form-fields.js

@@ -32,8 +32,8 @@ const InputTextAreaField = (props) => {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column relative" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: maxLength, className: `pt-2 full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '20px', right: '12px' } }, { children: [charCount, "/", maxLength] }))] })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
 };
 const DropDownField = (props) => {
-    const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, panelClassName } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ panelStyle: panelStyle || '', panelClassName: panelClassName, filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
+    const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle } = props;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
 };
 const MultiSelectField = (props) => {
     const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled } = props;

package/dist/components/froala-editor/FroalaEditor.js

@@ -9,41 +9,17 @@ const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wys
 require("froala-editor/js/plugins.pkgd.min.js");
 // import { SvgComponent } from 'sccoreui';
 // import SvgComponent from '../../directives/svg-component';
-const svg_1 = require("../../assets/svg/svg");
+// import { Bold, Italic } from '../../assets/svg/svg';
 const MyEditor = () => {
     const editorRef = (0, react_1.useRef)(null);
     const html = ``;
     const [editorContent, setEditorContent] = (0, react_1.useState)(html);
+    // const [editorConfig, setEditorConfig] = useState<any>()
     // Callback function to handle content changes
     const handleModelChange = (content) => {
         setEditorContent(content);
     };
     (0, react_1.useEffect)(() => {
-        if (editorRef.current) {
-            editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${svg_1.Bold}`;
-            editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${svg_1.Italic}`;
-            // Listen for the 'contentChanged' event
-            editorRef.current.editor.events.on('contentChanged', () => {
-                const currentContent = editorRef.current.html.get();
-                // Define your special keywords
-                const specialKeywords = ['@product', '@category', '@item'];
-                // Iterate through each keyword and check for its presence in the content
-                specialKeywords.forEach(keyword => {
-                    const keywordIndex = currentContent.lastIndexOf(keyword);
-                    if (keywordIndex !== -1 && keywordIndex + keyword.length === currentContent.length) {
-                        // Add a tag when the Enter key is pressed at the end of a special keyword
-                        editorRef.current.events.on('keydown', (e) => {
-                            if (e.which === editorRef.current.editor.KEYCODE.ENTER) {
-                                // Do something special when Enter key is pressed
-                                console.log(`Enter pressed after special keyword: ${keyword}`);
-                                // For demonstration, let's insert a tag for demonstration
-                                editorRef.current.html.insert(`<span class="special-tag">${keyword}</span>`);
-                            }
-                        });
-                    }
-                });
-            });
-        }
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-editor' }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
                 fontFamilySelection: true,
@@ -51,7 +27,6 @@ const MyEditor = () => {
                     'Arial,Helvetica,sans-serif': 'Font 1',
                     'Impact,Charcoal,sans-serif': 'Font 2',
                     'RobotoItalic,Charcoal,sans-serif': 'RobotoItalic',
-                    'Tahoma,Geneva,sans-serif': 'Font 3'
                 },
                 fontFamilyDefaultSelection: 'Font 2',
                 placeholderText: 'placeholder',
@@ -66,7 +41,6 @@ const MyEditor = () => {
                 toolbarButtons: {
                     'fontFamily': {
                         'buttons': ['fontFamily'],
-                        'class': 'customCard',
                     },
                     'moreText': {
                         'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
@@ -77,12 +51,9 @@ const MyEditor = () => {
                         'buttonsVisible': 2
                     },
                     'moreRich': {
-                        'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html'],
+                        'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html', "javascript"],
                         'buttonsVisible': 2
                     },
-                    'fullscreen': {
-                        'button': 'fullscreen'
-                    },
                 },
             }, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
 };

package/dist/components/treeDropdownSelect/treeDropdownSelect.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tree_1 = require("primereact/tree");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const sccoreui_1 = require("sccoreui");
+const TreeDropdownSelect = ({ treeData, expandedKeys, clickOnNode }) => {
+    const onClickNode = (e) => {
+        if (clickOnNode)
+            clickOnNode(e);
+    };
+    return ((0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeData, expandedKeys: expandedKeys, selectionMode: "single", className: 'treeNoCollaps', nodeTemplate: (node) => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'flex gap-2 align-items-center justify-content-between w-full' }, { children: [" ", (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'treeItem flex gap-2 h-2rem align-items-center  w-full h-full font-semibold' }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chart-breakout-square" }), node.moduleName] })), " ", (node === null || node === void 0 ? void 0 : node.badgeValue) && (0, jsx_runtime_1.jsx)(sccoreui_1.Badge, { className: 'treeBadge w-auto text-gray-700', value: node === null || node === void 0 ? void 0 : node.badgeValue })] })), onNodeClick: (e) => onClickNode(e) }));
+};
+exports.default = TreeDropdownSelect;

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.TextEditor = exports.FormFields = exports.FormComponent = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
+exports.TextEditor = 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"));
@@ -208,6 +208,8 @@ var multi_select_dropdown_1 = require("./components/multi-select-dropdown/multi-
 Object.defineProperty(exports, "MultiSelectDropDown", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_dropdown_1).default; } });
 var date_picker_1 = require("./components/date-picker/date-picker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
+var treeDropdownSelect_1 = require("./components/treeDropdownSelect/treeDropdownSelect");
+Object.defineProperty(exports, "TreeDropdownSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(treeDropdownSelect_1).default; } });
 var form_1 = require("./components/form/form");
 Object.defineProperty(exports, "FormComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(form_1).default; } });
 var form_fields_1 = require("./components/form/form-fields/form-fields");

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

@@ -0,0 +1,3 @@
+import { TreeDropdownSelectTypes } from '../types/type';
+declare const TreeDropdownSelect: ({ treeData, expandedKeys, clickOnNode }: TreeDropdownSelectTypes) => import("react/jsx-runtime").JSX.Element;
+export default TreeDropdownSelect;

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

@@ -132,7 +132,6 @@ export interface DropDownFieldProps {
     disabled?: boolean;
     filter?: boolean;
     panelStyle?: any;
-    panelClassName?: any;
 }
 export interface MultiSelectProps {
     errors: any;
@@ -150,3 +149,8 @@ export interface MultiSelectProps {
     validate?: any;
     disabled?: boolean;
 }
+export interface TreeDropdownSelectTypes {
+    clickOnNode?: any;
+    treeData: any;
+    expandedKeys: any;
+}

package/dist/types/index.d.ts

@@ -94,6 +94,7 @@ export { default as StyleClass } from "./components/style-class/styleClass";
 export { default as Terminal } from "./components/terminal/terminal";
 export { default as MultiSelectDropDown } from './components/multi-select-dropdown/multi-select-dropdown';
 export { default as DatePicker } from "./components/date-picker/date-picker";
+export { default as TreeDropdownSelect } from './components/treeDropdownSelect/treeDropdownSelect';
 export { default as FormComponent } from "./components/form/form";
 export { default as FormFields } from "./components/form/form-fields/form-fields";
 export { default as TextEditor } from "./components/froala-editor/FroalaEditor";

package/package.json

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