sccoreui 4.0.5 → 4.0.7

package/dist/App.scss

@@ -495,6 +495,15 @@ div:has(ul.date_filter) .p-datepicker-footer {
   width: 18.063rem;
 }
 
+#fontFamily-1 {
+  border: 1px solid var(--gray-300);
+}
+
+.fr-toolbar .fr-btn-grp {
+  margin-right: 0px;
+  margin-left: 8px;
+}
+
 .PhoneInput {
   background: #ffffff;
   border: 1px solid var(--gray-300);

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

@@ -16,11 +16,11 @@ const InputTextField = (props) => {
 };
 const InputNumberField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate } = 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({ name: name, type: "number", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, maxFractionDigits: 2, placeholder: placeholder }, field, { onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), 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" }) }))] })));
+    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({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, maxFractionDigits: 2, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), 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 InputCurrencyField = (props) => {
     const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate } = 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({ name: name, type: "number", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", min: min, max: max, maxLength: maxLength }, field, { onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: `full_form_field ${className} customNumberField ${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" }) }))] })));
+    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({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: `full_form_field ${className} customNumberField ${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 InputTextAreaField = (props) => {
     const [charCount, setCharCount] = (0, react_1.useState)(0);

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wysiwyg"));
+require("froala-editor/js/plugins.pkgd.min.js");
+require("froala-editor/js/third_party/embedly.min.js");
+require("froala-editor/css/froala_style.min.css");
+require("froala-editor/css/froala_editor.pkgd.min.css");
+const TextEditor = (props) => {
+    const { model, onModelChange } = props;
+    const config = {
+        fontFamilySelection: true,
+        fontFamily: {
+            'Arial,Helvetica,sans-serif': 'Font 1',
+            'Impact,Charcoal,sans-serif': 'Font 2',
+            'Tahoma,Geneva,sans-serif': 'Font 3'
+        },
+        fontFamilyDefaultSelection: 'Font 2',
+        placeholderText: "Dumy",
+        key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
+        charCounterCount: false,
+        toolbarSticky: false,
+        quickInsertEnabled: false,
+        toolbarInline: false,
+        attribution: false,
+        heightMax: 160,
+        heightMin: 130,
+        fullPage: true,
+        toolbarButtons: {
+            'fontFamily': {
+                'buttons': ['fontFamily'],
+                'class': 'customCard'
+            },
+            'moreText': {
+                'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
+                'buttonsVisible': 2
+            },
+            'moreParagraph': {
+                'buttons': ['formatOL', 'formatUL', 'alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
+                'buttonsVisible': 2
+            },
+            'moreRich': {
+                'buttons': ['insertLink', 'insertImage', 'insertHR', 'undo', 'redo', 'html'],
+                'buttonsVisible': 2
+            },
+            'fullscreen': {
+                'button': 'fullscreen'
+            }
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ id: "editor", className: "full_form_field" }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { config: config, tag: "textarea", model: model, onModelChange: onModelChange }) })));
+};
+exports.default = TextEditor;

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.Terminal = exports.StyleClass = exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = 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.FormFields = exports.FormComponent = exports.DatePicker = exports.MultiSelectDropDown = void 0;
+exports.TextEditor = exports.FormFields = exports.FormComponent = exports.DatePicker = exports.MultiSelectDropDown = 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"));
@@ -211,4 +211,6 @@ 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");
 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, "TextEditor", { enumerable: true, get: function () { return tslib_1.__importDefault(FroalaEditor_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/types/components/froala-editor/FroalaEditor.d.ts

@@ -0,0 +1,6 @@
+import 'froala-editor/js/plugins.pkgd.min.js';
+import 'froala-editor/js/third_party/embedly.min.js';
+import 'froala-editor/css/froala_style.min.css';
+import 'froala-editor/css/froala_editor.pkgd.min.css';
+declare const TextEditor: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default TextEditor;

package/dist/types/index.d.ts

@@ -95,6 +95,7 @@ export { default as MultiSelectDropDown } from './components/multi-select-dropdo
 export { default as DatePicker } from "./components/date-picker/date-picker";
 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";
 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.0.5",
+  "version": "4.0.7",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,6 +31,7 @@
   "dependencies": {
     "chart.js": "^4.3.0",
     "formik": "^2.4.5",
+    "froala-editor": "^4.1.2",
     "libphonenumber-js": "^1.10.44",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
@@ -38,6 +39,7 @@
     "quill": "^1.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-froala-wysiwyg": "^4.1.2",
     "react-phone-number-input": "^3.3.6",
     "react-router-dom": "^6.12.0",
     "react-scripts": "^5.0.1",