sccoreui 4.2.9 → 4.3.2
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.scss +24 -6
- package/dist/assets/svg/dot_list.svg +3 -0
- package/dist/assets/svg/gallery.svg +3 -0
- package/dist/assets/svg/heading1.svg +3 -0
- package/dist/assets/svg/heading2.svg +3 -0
- package/dist/assets/svg/italic.svg +3 -0
- package/dist/assets/svg/link.svg +3 -0
- package/dist/assets/svg/number_list.svg +3 -0
- package/dist/assets/svg/quotes.svg +3 -0
- package/dist/assets/svg/svg.js +20 -1
- package/dist/components/form/form-fields/form-fields.js +2 -2
- package/dist/components/froala-editor/FroalaEditor.js +34 -4
- package/dist/components/multi-select-dropdown/multi-select-dropdown.js +4 -4
- package/dist/types/assets/svg/svg.d.ts +7 -0
- package/dist/types/components/types/type.d.ts +1 -0
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -10,18 +10,21 @@
|
|
|
10
10
|
font-weight: 700;
|
|
11
11
|
font-style: italic;
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
@font-face {
|
|
14
15
|
font-family: 'RobotoMedium';
|
|
15
16
|
src: url('./assets/fonts/Roboto-Medium.ttf') format('truetype');
|
|
16
17
|
font-weight: normal;
|
|
17
18
|
font-style: normal;
|
|
18
19
|
}
|
|
20
|
+
|
|
19
21
|
@font-face {
|
|
20
22
|
font-family: 'RobotoItalic';
|
|
21
23
|
src: url('./assets/fonts/Roboto-Italic.ttf') format('truetype');
|
|
22
24
|
font-weight: normal;
|
|
23
25
|
font-style: normal;
|
|
24
26
|
}
|
|
27
|
+
|
|
25
28
|
@font-face {
|
|
26
29
|
font-family: 'RobotoRegular';
|
|
27
30
|
src: url('./assets/fonts/Roboto-Regular.ttf') format('truetype');
|
|
@@ -128,7 +131,7 @@ code {
|
|
|
128
131
|
|
|
129
132
|
.progress-step-item {
|
|
130
133
|
&.horizontal {
|
|
131
|
-
|
|
134
|
+
|
|
132
135
|
|
|
133
136
|
&:nth-of-type(1) {
|
|
134
137
|
transform: translateX(-50%);
|
|
@@ -311,7 +314,8 @@ code {
|
|
|
311
314
|
}
|
|
312
315
|
}
|
|
313
316
|
|
|
314
|
-
.selected_multile.selected_num_3
|
|
317
|
+
.selected_multile.selected_num_3,
|
|
318
|
+
.selected_multile.moreThanThreeItems {
|
|
315
319
|
.p-multiselect .p-multiselect-label {
|
|
316
320
|
padding-left: 44px;
|
|
317
321
|
}
|
|
@@ -359,7 +363,7 @@ code {
|
|
|
359
363
|
.custom_date_picker_sec {
|
|
360
364
|
.custom_date_picker {
|
|
361
365
|
|
|
362
|
-
|
|
366
|
+
|
|
363
367
|
.p-inputtext {
|
|
364
368
|
padding-right: 16px;
|
|
365
369
|
width: 130px;
|
|
@@ -385,7 +389,7 @@ code {
|
|
|
385
389
|
.custom_date_picker.multiple {
|
|
386
390
|
.p-inputtext {
|
|
387
391
|
width: 236px;
|
|
388
|
-
|
|
392
|
+
|
|
389
393
|
}
|
|
390
394
|
}
|
|
391
395
|
|
|
@@ -522,11 +526,13 @@ div:has(ul.date_filter) .p-datepicker-footer {
|
|
|
522
526
|
padding-top: 10px;
|
|
523
527
|
padding-bottom: 10px;
|
|
524
528
|
padding-right: 12px;
|
|
525
|
-
padding-left: 0px;
|
|
529
|
+
padding-left: 0px;
|
|
526
530
|
height: 40px;
|
|
531
|
+
|
|
527
532
|
:focus-visible {
|
|
528
533
|
outline: none;
|
|
529
534
|
}
|
|
535
|
+
|
|
530
536
|
&:focus-within {
|
|
531
537
|
outline: 0 none;
|
|
532
538
|
outline-offset: 0;
|
|
@@ -546,6 +552,7 @@ div:has(ul.date_filter) .p-datepicker-footer {
|
|
|
546
552
|
box-shadow: none;
|
|
547
553
|
background-color: #ffffff;
|
|
548
554
|
}
|
|
555
|
+
|
|
549
556
|
.PhoneInputCountryIconImg {
|
|
550
557
|
width: 20px;
|
|
551
558
|
height: 20px;
|
|
@@ -566,13 +573,16 @@ div:has(ul.date_filter) .p-datepicker-footer {
|
|
|
566
573
|
box-shadow: none;
|
|
567
574
|
background: none;
|
|
568
575
|
padding: 0;
|
|
576
|
+
|
|
569
577
|
.p-dropdown-label {
|
|
570
578
|
padding: 0;
|
|
571
579
|
padding-right: 4px;
|
|
572
580
|
}
|
|
581
|
+
|
|
573
582
|
.p-dropdown-trigger {
|
|
574
583
|
padding-top: 20px;
|
|
575
584
|
}
|
|
585
|
+
|
|
576
586
|
.p-dropdown-trigger[aria-expanded="true"] {
|
|
577
587
|
padding-bottom: 20px;
|
|
578
588
|
}
|
|
@@ -580,8 +590,16 @@ div:has(ul.date_filter) .p-datepicker-footer {
|
|
|
580
590
|
|
|
581
591
|
}
|
|
582
592
|
|
|
583
|
-
.customNumberField{
|
|
593
|
+
.customNumberField {
|
|
584
594
|
.p-inputnumber-input {
|
|
585
595
|
padding-left: 24px;
|
|
586
596
|
}
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.text-editor {
|
|
600
|
+
button {
|
|
601
|
+
&::after{
|
|
602
|
+
content: none !important;
|
|
603
|
+
}
|
|
604
|
+
}
|
|
587
605
|
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8.25 14.5C7.42 14.5 6.75 15.17 6.75 16C6.75 16.83 7.42 17.5 8.25 17.5C9.08 17.5 9.75 16.83 9.75 16C9.75 15.17 9.08 14.5 8.25 14.5ZM8.25 8.5C7.42 8.5 6.75 9.17 6.75 10C6.75 10.83 7.42 11.5 8.25 11.5C9.08 11.5 9.75 10.83 9.75 10C9.75 9.17 9.08 8.5 8.25 8.5ZM8.25 20.5C7.42 20.5 6.75 21.18 6.75 22C6.75 22.82 7.43 23.5 8.25 23.5C9.07 23.5 9.75 22.82 9.75 22C9.75 21.18 9.08 20.5 8.25 20.5ZM11.25 23H25.25V21H11.25V23ZM11.25 17H25.25V15H11.25V17ZM11.25 9V11H25.25V9H11.25Z" fill="#98A2B3"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.9 16C7.9 14.29 9.29 12.9 11 12.9H15V11H11C8.24 11 6 13.24 6 16C6 18.76 8.24 21 11 21H15V19.1H11C9.29 19.1 7.9 17.71 7.9 16ZM12 17H20V15H12V17ZM21 11H17V12.9H21C22.71 12.9 24.1 14.29 24.1 16C24.1 17.71 22.71 19.1 21 19.1H17V21H21C23.76 21 26 18.76 26 16C26 13.24 23.76 11 21 11Z" fill="#98A2B3"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7 21H9V21.5H8V22.5H9V23H7V24H10V20H7V21ZM8 12H9V8H7V9H8V12ZM7 15H8.8L7 17.1V18H10V17H8.2L10 14.9V14H7V15ZM12 9V11H26V9H12ZM12 23H26V21H12V23ZM12 17H26V15H12V17Z" fill="#98A2B3"/>
|
|
3
|
+
</svg>
|
package/dist/assets/svg/svg.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Times = exports.Copy = exports.Dollar = exports.Message = exports.Error = exports.Card = exports.InfoLogo = void 0;
|
|
3
|
+
exports.Bold = exports.Heading1 = exports.Heading2 = exports.Quotes = exports.Italic = exports.NumberList = exports.DotList = exports.Times = exports.Copy = exports.Dollar = exports.Message = exports.Error = exports.Card = exports.InfoLogo = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const InfoLogo = () => {
|
|
6
6
|
return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6.05992 5.99998C6.21665 5.55442 6.52602 5.17872 6.93322 4.9394C7.34042 4.70009 7.81918 4.61261 8.2847 4.69245C8.75022 4.7723 9.17246 5.01433 9.47664 5.37567C9.78081 5.737 9.94729 6.19433 9.94659 6.66665C9.94659 7.99998 7.94659 8.66665 7.94659 8.66665M7.99992 11.3333H8.00659M14.6666 7.99998C14.6666 11.6819 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6819 1.33325 7.99998C1.33325 4.31808 4.31802 1.33331 7.99992 1.33331C11.6818 1.33331 14.6666 4.31808 14.6666 7.99998Z", stroke: "#98A2B3", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
@@ -30,3 +30,22 @@ const Times = () => {
|
|
|
30
30
|
return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7 1L1 7M1 1L7 7", stroke: "#98A2B3", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
31
31
|
};
|
|
32
32
|
exports.Times = Times;
|
|
33
|
+
exports.DotList = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
34
|
+
<path d="M8.25 14.5C7.42 14.5 6.75 15.17 6.75 16C6.75 16.83 7.42 17.5 8.25 17.5C9.08 17.5 9.75 16.83 9.75 16C9.75 15.17 9.08 14.5 8.25 14.5ZM8.25 8.5C7.42 8.5 6.75 9.17 6.75 10C6.75 10.83 7.42 11.5 8.25 11.5C9.08 11.5 9.75 10.83 9.75 10C9.75 9.17 9.08 8.5 8.25 8.5ZM8.25 20.5C7.42 20.5 6.75 21.18 6.75 22C6.75 22.82 7.43 23.5 8.25 23.5C9.07 23.5 9.75 22.82 9.75 22C9.75 21.18 9.08 20.5 8.25 20.5ZM11.25 23H25.25V21H11.25V23ZM11.25 17H25.25V15H11.25V17ZM11.25 9V11H25.25V9H11.25Z" fill="#98A2B3" />
|
|
35
|
+
</svg>`;
|
|
36
|
+
exports.NumberList = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
37
|
+
<path d="M7 21H9V21.5H8V22.5H9V23H7V24H10V20H7V21ZM8 12H9V8H7V9H8V12ZM7 15H8.8L7 17.1V18H10V17H8.2L10 14.9V14H7V15ZM12 9V11H26V9H12ZM12 23H26V21H12V23ZM12 17H26V15H12V17Z" fill="#98A2B3" />
|
|
38
|
+
</svg>`;
|
|
39
|
+
exports.Italic = '<svg width="24" height="24" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8V11H16.21L12.79 19H10V22H18V19H15.79L19.21 11H22V8H14Z" fill="#98A2B3" /></svg>';
|
|
40
|
+
exports.Quotes = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
41
|
+
<path d="M10 21H13L15 17V11H9V17H12L10 21ZM18 21H21L23 17V11H17V17H20L18 21Z" fill="#98A2B3" />
|
|
42
|
+
</svg>`;
|
|
43
|
+
exports.Heading2 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
44
|
+
<path d="M20.748 22H18.0215V17.25H13.9824V22H11.2402V10.625H13.9824V15.1406H18.0215V10.625H20.748V22Z" fill="#98A2B3" />
|
|
45
|
+
</svg>`;
|
|
46
|
+
exports.Heading1 = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
47
|
+
<path d="M21.7822 22H18.8525V15.9062H13.1396V22H10.21V7.78125H13.1396V13.543H18.8525V7.78125H21.7822V22Z" fill="#98A2B3" />
|
|
48
|
+
</svg>`;
|
|
49
|
+
exports.Bold = `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="14" viewBox="0 0 11 14" fill="none">
|
|
50
|
+
<path d="M8.6 6.79C9.57 6.12 10.25 5.02 10.25 4C10.25 1.74 8.5 0 6.25 0H0V14H7.04C9.13 14 10.75 12.3 10.75 10.21C10.75 8.69 9.89 7.39 8.6 6.79ZM3 2.5H6C6.83 2.5 7.5 3.17 7.5 4C7.5 4.83 6.83 5.5 6 5.5H3V2.5ZM6.5 11.5H3V8.5H6.5C7.33 8.5 8 9.17 8 10C8 10.83 7.33 11.5 6.5 11.5Z" fill="#98A2B3"/>
|
|
51
|
+
</svg>`;
|
|
@@ -32,8 +32,8 @@ const InputTextAreaField = (props) => {
|
|
|
32
32
|
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" }) }))] })));
|
|
33
33
|
};
|
|
34
34
|
const DropDownField = (props) => {
|
|
35
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled } = props;
|
|
36
|
-
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({ 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" }) }))] })));
|
|
35
|
+
const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter } = props;
|
|
36
|
+
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({ 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" }) }))] })));
|
|
37
37
|
};
|
|
38
38
|
const MultiSelectField = (props) => {
|
|
39
39
|
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled } = props;
|
|
@@ -7,6 +7,9 @@ require("froala-editor/css/froala_editor.pkgd.min.css");
|
|
|
7
7
|
require("froala-editor/css/froala_style.min.css");
|
|
8
8
|
const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wysiwyg"));
|
|
9
9
|
require("froala-editor/js/plugins.pkgd.min.js");
|
|
10
|
+
// import { SvgComponent } from 'sccoreui';
|
|
11
|
+
// import SvgComponent from '../../directives/svg-component';
|
|
12
|
+
const svg_1 = require("../../assets/svg/svg");
|
|
10
13
|
const MyEditor = () => {
|
|
11
14
|
const editorRef = (0, react_1.useRef)(null);
|
|
12
15
|
const html = ``;
|
|
@@ -15,7 +18,34 @@ const MyEditor = () => {
|
|
|
15
18
|
const handleModelChange = (content) => {
|
|
16
19
|
setEditorContent(content);
|
|
17
20
|
};
|
|
18
|
-
|
|
21
|
+
(0, react_1.useEffect)(() => {
|
|
22
|
+
if (editorRef.current) {
|
|
23
|
+
editorRef.current.editor.doc.getElementById('bold-1').innerHTML = `${svg_1.Bold}`;
|
|
24
|
+
editorRef.current.editor.doc.getElementById('italic-1').innerHTML = `${svg_1.Italic}`;
|
|
25
|
+
// Listen for the 'contentChanged' event
|
|
26
|
+
editorRef.current.editor.events.on('contentChanged', () => {
|
|
27
|
+
const currentContent = editorRef.current.html.get();
|
|
28
|
+
// Define your special keywords
|
|
29
|
+
const specialKeywords = ['@product', '@category', '@item'];
|
|
30
|
+
// Iterate through each keyword and check for its presence in the content
|
|
31
|
+
specialKeywords.forEach(keyword => {
|
|
32
|
+
const keywordIndex = currentContent.lastIndexOf(keyword);
|
|
33
|
+
if (keywordIndex !== -1 && keywordIndex + keyword.length === currentContent.length) {
|
|
34
|
+
// Add a tag when the Enter key is pressed at the end of a special keyword
|
|
35
|
+
editorRef.current.events.on('keydown', (e) => {
|
|
36
|
+
if (e.which === editorRef.current.editor.KEYCODE.ENTER) {
|
|
37
|
+
// Do something special when Enter key is pressed
|
|
38
|
+
console.log(`Enter pressed after special keyword: ${keyword}`);
|
|
39
|
+
// For demonstration, let's insert a tag for demonstration
|
|
40
|
+
editorRef.current.html.insert(`<span class="special-tag">${keyword}</span>`);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
}, []);
|
|
48
|
+
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: {
|
|
19
49
|
fontFamilySelection: true,
|
|
20
50
|
fontFamily: {
|
|
21
51
|
'Arial,Helvetica,sans-serif': 'Font 1',
|
|
@@ -36,7 +66,7 @@ const MyEditor = () => {
|
|
|
36
66
|
toolbarButtons: {
|
|
37
67
|
'fontFamily': {
|
|
38
68
|
'buttons': ['fontFamily'],
|
|
39
|
-
'class': 'customCard'
|
|
69
|
+
'class': 'customCard',
|
|
40
70
|
},
|
|
41
71
|
'moreText': {
|
|
42
72
|
'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'fontSize', 'subscript', 'superscript', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
|
|
@@ -52,8 +82,8 @@ const MyEditor = () => {
|
|
|
52
82
|
},
|
|
53
83
|
'fullscreen': {
|
|
54
84
|
'button': 'fullscreen'
|
|
55
|
-
}
|
|
85
|
+
},
|
|
56
86
|
},
|
|
57
|
-
}, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) }));
|
|
87
|
+
}, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
|
|
58
88
|
};
|
|
59
89
|
exports.default = MyEditor;
|
|
@@ -46,17 +46,17 @@ const MultiSelectDropDown = (props) => {
|
|
|
46
46
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `status_dropdown_item pl-6 ${option.name.replaceAll(' ', '').toLowerCase()}` }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'status_dot', style: { background: option.color } }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'otption_name mr-8' }, { children: option.name }))] })) }));
|
|
47
47
|
};
|
|
48
48
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType === 'withIcon' &&
|
|
49
|
-
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
49
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem ${props.maxWidth ? `${'optionBodyMaxWidth_' + props.maxWidth}` : ''}`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
|
|
50
50
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
|
|
51
51
|
clearIcon()] }))] })), props.dropdownType === 'default' &&
|
|
52
52
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${props.className} ${props.icon !== undefined ? 'left_icon' : 'no_icon'} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [props.icon !== undefined &&
|
|
53
|
-
(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
53
|
+
(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
|
|
54
54
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
|
|
55
55
|
clearIcon()] }))] })), props.dropdownType === 'status' &&
|
|
56
|
-
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
56
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${props.className} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
|
|
57
57
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
|
|
58
58
|
clearIcon()] }))] })), props.dropdownType === '' &&
|
|
59
|
-
(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: {
|
|
59
|
+
(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } })] }));
|
|
60
60
|
};
|
|
61
61
|
exports.MultiSelectDropDown = MultiSelectDropDown;
|
|
62
62
|
exports.default = exports.MultiSelectDropDown;
|
|
@@ -5,3 +5,10 @@ export function Message(): import("react/jsx-runtime").JSX.Element;
|
|
|
5
5
|
export function Dollar(): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export function Copy(): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export function Times(): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export const DotList: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.25 14.5C7.42 14.5 6.75 15.17 6.75 16C6.75 16.83 7.42 17.5 8.25 17.5C9.08 17.5 9.75 16.83 9.75 16C9.75 15.17 9.08 14.5 8.25 14.5ZM8.25 8.5C7.42 8.5 6.75 9.17 6.75 10C6.75 10.83 7.42 11.5 8.25 11.5C9.08 11.5 9.75 10.83 9.75 10C9.75 9.17 9.08 8.5 8.25 8.5ZM8.25 20.5C7.42 20.5 6.75 21.18 6.75 22C6.75 22.82 7.43 23.5 8.25 23.5C9.07 23.5 9.75 22.82 9.75 22C9.75 21.18 9.08 20.5 8.25 20.5ZM11.25 23H25.25V21H11.25V23ZM11.25 17H25.25V15H11.25V17ZM11.25 9V11H25.25V9H11.25Z\" fill=\"#98A2B3\" />\n</svg>";
|
|
9
|
+
export const NumberList: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 21H9V21.5H8V22.5H9V23H7V24H10V20H7V21ZM8 12H9V8H7V9H8V12ZM7 15H8.8L7 17.1V18H10V17H8.2L10 14.9V14H7V15ZM12 9V11H26V9H12ZM12 23H26V21H12V23ZM12 17H26V15H12V17Z\" fill=\"#98A2B3\" />\n</svg>";
|
|
10
|
+
export const Italic: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14 8V11H16.21L12.79 19H10V22H18V19H15.79L19.21 11H22V8H14Z\" fill=\"#98A2B3\" /></svg>";
|
|
11
|
+
export const Quotes: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 21H13L15 17V11H9V17H12L10 21ZM18 21H21L23 17V11H17V17H20L18 21Z\" fill=\"#98A2B3\" />\n</svg>";
|
|
12
|
+
export const Heading2: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M20.748 22H18.0215V17.25H13.9824V22H11.2402V10.625H13.9824V15.1406H18.0215V10.625H20.748V22Z\" fill=\"#98A2B3\" />\n</svg>";
|
|
13
|
+
export const Heading1: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.7822 22H18.8525V15.9062H13.1396V22H10.21V7.78125H13.1396V13.543H18.8525V7.78125H21.7822V22Z\" fill=\"#98A2B3\" />\n</svg>";
|
|
14
|
+
export const Bold: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"14\" viewBox=\"0 0 11 14\" fill=\"none\">\n<path d=\"M8.6 6.79C9.57 6.12 10.25 5.02 10.25 4C10.25 1.74 8.5 0 6.25 0H0V14H7.04C9.13 14 10.75 12.3 10.75 10.21C10.75 8.69 9.89 7.39 8.6 6.79ZM3 2.5H6C6.83 2.5 7.5 3.17 7.5 4C7.5 4.83 6.83 5.5 6 5.5H3V2.5ZM6.5 11.5H3V8.5H6.5C7.33 8.5 8 9.17 8 10C8 10.83 7.33 11.5 6.5 11.5Z\" fill=\"#98A2B3\"/>\n</svg>";
|