sccoreui 4.5.0 → 4.5.2

package/dist/App.scss

@@ -507,31 +507,6 @@ div:has(ul.date_filter) .p-datepicker-footer {
   width: 18.063rem;
 }
 
-button[data-cmd='fontFamily']{
-  border: 1px solid var(--gray-300) !important;
-  &::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);
-  }
-}
-
-button[data-cmd='fontFamily'] {
-  // 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);
@@ -639,19 +614,6 @@ button#formatOLOptions-1.fr-active::before {
   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;
@@ -662,6 +624,51 @@ button#formatOLOptions-1.fr-active::before {
   display: none;
 }
 
+.fr-element {
+  padding: 12px !important;
+}
+
+.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
+  background: #f9fafb   !important;
+}
+
+button[data-cmd="fontFamily"]:focus{
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--primary-100);
+  border: 1px solid var(--primary-300) !important;
+  background: none !important;
+}
+
+
+button[data-cmd='fontFamily']{
+  border: 1px solid var(--gray-300) !important;
+  &::before {
+    content: '';
+    border: 1.8px solid #0b0c12;
+    border-left: 0;
+    border-top: 0;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    right: 8px;
+    top: 39%;
+    transform: rotate(45deg);
+  }
+}
+
+.fr-toolbar .fr-btn-grp {
+  margin-right: 0px;
+  margin-left: 8px;
+}
+
+button[aria-expanded="true"] {
+  &::before {
+    top: 48%;
+    transform: rotate(-136deg);
+  }
+}
+
+
+
 
 /// Custon treeDropdownSelect style
 .treeNoCollaps {

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

@@ -10,7 +10,7 @@ require("froala-editor/js/plugins.pkgd.min.js");
 // import { SvgComponent } from 'sccoreui';
 // import SvgComponent from '../../directives/svg-component';
 // import { Bold, Italic } from '../../assets/svg/svg';
-const FroalaTextEditor = ({ onChange, value }) => {
+const FroalaTextEditor = ({ onChange, value, placeholderText }) => {
     const editorRef = (0, react_1.useRef)(null);
     // const html = ``;
     const [editorContent, setEditorContent] = (0, react_1.useState)(value);
@@ -30,14 +30,17 @@ const FroalaTextEditor = ({ onChange, value }) => {
     //     console.log('Special word detected!');
     //   }
     // };
-    // useEffect(() => {
-    //   if (editorRef.current) {
-    //     // editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${Bold}`
-    //     // editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${Italic}`;
-    //     editorRef.current.editor.events.on('keyup', handleKeyUp);
-    //   }
-    // }, []);
-    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: {
+    (0, react_1.useEffect)(() => {
+        if (editorRef.current) {
+            editorRef.current.editor.$el.on('focus', () => {
+                document.getElementById('fr-text-editor').classList.add('focus-text-editor');
+            });
+            editorRef.current.editor.$el.on('focusout', () => {
+                document.getElementById('fr-text-editor').classList.remove('focus-text-editor');
+            });
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-editor', id: "fr-text-editor" }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
                 fontFamilySelection: true,
                 fontFamily: {
                     'Arial,Helvetica,sans-serif': 'sans-serif',
@@ -46,7 +49,7 @@ const FroalaTextEditor = ({ onChange, value }) => {
                     // 'Tahoma,Geneva,sans-serif': 'Font 3'
                 },
                 fontFamilyDefaultSelection: 'sans-serif',
-                placeholderText: 'placeholder',
+                placeholderText: placeholderText,
                 key: "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==",
                 charCounterCount: false,
                 toolbarSticky: false,

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

@@ -2,5 +2,5 @@ import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/js/plugins.pkgd.min.js';
 import { FroalaTextEditorTypes } from '../types/type';
-declare const FroalaTextEditor: ({ onChange, value }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
+declare const FroalaTextEditor: ({ onChange, value, placeholderText }: FroalaTextEditorTypes) => import("react/jsx-runtime").JSX.Element;
 export default FroalaTextEditor;

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

@@ -162,4 +162,5 @@ export interface CustomColorPickerTypes {
 export interface FroalaTextEditorTypes {
     onChange?: any;
     value: string;
+    placeholderText: string;
 }

package/package.json

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