@luscii-healthtech/web-ui 2.5.0 → 2.6.0
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/components/CheckboxList/CheckboxGroup.d.ts +1 -1
- package/dist/components/CheckboxList/CheckboxList.types.d.ts +2 -0
- package/dist/components/List/List.d.ts +1 -0
- package/dist/components/List/List.types.d.ts +0 -3
- package/dist/web-ui-tailwind.css +2 -2
- package/dist/web-ui.cjs.development.js +41 -31
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +41 -31
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +2 -1
- package/src/components/CheckboxList/CheckboxGroup.tsx +97 -58
- package/src/components/CheckboxList/CheckboxList.tsx +34 -17
- package/src/components/CheckboxList/CheckboxList.types.ts +27 -25
- package/src/components/List/List.scss +23 -0
- package/src/components/List/List.tsx +10 -6
- package/src/components/List/List.types.ts +0 -4
- package/src/components/Toaster/Toaster.scss +6 -2
- package/src/components/Toaster/Toaster.tsx +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CheckboxGroupProps } from "./CheckboxList.types";
|
|
3
|
-
export declare const CheckboxGroup: ({ title, items, onChange, className }: CheckboxGroupProps) => JSX.Element;
|
|
3
|
+
export declare const CheckboxGroup: ({ title, items, onChange, className, isCollapsed, }: CheckboxGroupProps) => JSX.Element;
|
|
@@ -13,6 +13,7 @@ export interface CheckboxGroupProps {
|
|
|
13
13
|
items: CheckboxListItem[];
|
|
14
14
|
onChange: (event: CheckboxChangeEvent) => void;
|
|
15
15
|
className?: string;
|
|
16
|
+
isCollapsed?: boolean;
|
|
16
17
|
}
|
|
17
18
|
export interface CheckboxGroupItemProps {
|
|
18
19
|
id: string;
|
|
@@ -30,6 +31,7 @@ export interface CheckboxListItem {
|
|
|
30
31
|
export interface CheckboxGroup {
|
|
31
32
|
title?: string;
|
|
32
33
|
items: CheckboxListItem[];
|
|
34
|
+
isCollapsed?: boolean;
|
|
33
35
|
}
|
|
34
36
|
export interface CheckboxChangeEvent {
|
|
35
37
|
id: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ListProps, ListItemProps, OnAssetLoadErrorPayload } from "./List.types";
|
|
3
|
+
import "./List.scss";
|
|
3
4
|
export { ListProps, ListItemProps, OnAssetLoadErrorPayload };
|
|
4
5
|
export declare const List: ({ title, headerButton, headerTransparent, items, onAssetLoadError, onDragEnd, emptyStateMessage, isLoading, }: ListProps) => JSX.Element;
|
|
5
6
|
export default List;
|
package/dist/web-ui-tailwind.css
CHANGED
|
@@ -691,8 +691,8 @@ video {
|
|
|
691
691
|
|
|
692
692
|
.bg-red-400 {
|
|
693
693
|
--bg-opacity: 1;
|
|
694
|
-
background-color: #
|
|
695
|
-
background-color: rgba(
|
|
694
|
+
background-color: #FF6266;
|
|
695
|
+
background-color: rgba(255, 98, 102, var(--bg-opacity));
|
|
696
696
|
}
|
|
697
697
|
|
|
698
698
|
.bg-orange-50 {
|
|
@@ -177,7 +177,7 @@ var WarningIcon = function WarningIcon(props) {
|
|
|
177
177
|
}));
|
|
178
178
|
};
|
|
179
179
|
|
|
180
|
-
var css_248z$1 = "#application-toaster {\n position: fixed;\n left: 50%;\n transform: translate(-50%,
|
|
180
|
+
var css_248z$1 = "#application-toaster {\n position: fixed;\n left: 50%;\n transform: translate(-50%, 200%);\n bottom: 48px;\n transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n\n#application-toaster.shelved {\n transform: translate(-50%, 200%);\n}\n\n#application-toaster.expanded {\n transform: translate(-50%, 0);\n}\n\n#application-toaster.type-success {\n --bg-opacity: 1;\n background-color: #E7F5EC;\n background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-title\"] {\n --text-opacity: 1;\n color: #2f855a;\n color: rgba(47, 133, 90, var(--text-opacity));\n}\n\n#application-toaster.type-success .failure-icon {\n display: none;\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] {\n --bg-opacity: 1;\n background-color: #E7F5EC;\n background-color: rgba(231, 245, 236, var(--bg-opacity));\n}\n\n#application-toaster.type-success [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n --bg-opacity: 1;\n background-color: #52B093;\n background-color: rgba(82, 176, 147, var(--bg-opacity));\n}\n\n#application-toaster.type-failure {\n --bg-opacity: 1;\n background-color: #FFF1F1;\n background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-title\"] {\n --text-opacity: 1;\n color: #c53030;\n color: rgba(197, 48, 48, var(--text-opacity));\n}\n\n#application-toaster.type-failure .success-icon {\n display: none;\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] {\n --bg-opacity: 1;\n background-color: #FFF1F1;\n background-color: rgba(255, 241, 241, var(--bg-opacity));\n}\n\n#application-toaster.type-failure [data-test-id=\"toaster-progress-bar-container\"] [data-test-id=\"toaster-progress-bar\"] {\n --bg-opacity: 1;\n background-color: #FF6266;\n background-color: rgba(255, 98, 102, var(--bg-opacity));\n}\n";
|
|
181
181
|
styleInject(css_248z$1);
|
|
182
182
|
|
|
183
183
|
var TOASTER_TYPE_OPTIONS = {
|
|
@@ -200,7 +200,7 @@ var Toaster = function Toaster(_ref) {
|
|
|
200
200
|
style: styleOverwrite,
|
|
201
201
|
id: "application-toaster",
|
|
202
202
|
"data-test-id": "toaster-panel-" + type,
|
|
203
|
-
className: classNames("bg-white cursor-pointer", "rounded-md shadow-
|
|
203
|
+
className: classNames("bg-white cursor-pointer", "rounded-md shadow-lg", "min-h-13 max-h-19 w-104 transition-transform", {
|
|
204
204
|
shelved: !isVisible,
|
|
205
205
|
expanded: isVisible,
|
|
206
206
|
"type-success": isSuccess,
|
|
@@ -2999,6 +2999,9 @@ var ListSkeleton = function ListSkeleton(_ref) {
|
|
|
2999
2999
|
})), skeletonItems);
|
|
3000
3000
|
};
|
|
3001
3001
|
|
|
3002
|
+
var css_248z$h = "li.gu-mirror {\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n margin: 0;\n position: fixed;\n z-index: 9999;\n}\n\nli.gu-hide {\n display: none;\n}\n\nli.gu-unselectable {\n -ms-user-select: none;\n user-select: none;\n}\n\nli.gu-transit {\n --bg-opacity: 1;\n background-color: #F2FAFD;\n background-color: rgba(242, 250, 253, var(--bg-opacity));\n outline: 2px dashed #0074DD;\n outline-offset: -1px;\n filter: none;\n opacity: 1;\n border-radius: 0;\n border-style: none;\n}\n\nli.gu-transit > * {\n visibility: hidden;\n}\n";
|
|
3003
|
+
styleInject(css_248z$h);
|
|
3004
|
+
|
|
3002
3005
|
var List = function List(_ref) {
|
|
3003
3006
|
var title = _ref.title,
|
|
3004
3007
|
headerButton = _ref.headerButton,
|
|
@@ -3016,7 +3019,7 @@ var List = function List(_ref) {
|
|
|
3016
3019
|
|
|
3017
3020
|
(_dragulaRef$current = dragulaRef.current) == null ? void 0 : _dragulaRef$current.destroy == null ? void 0 : _dragulaRef$current.destroy();
|
|
3018
3021
|
|
|
3019
|
-
if (onDragEnd && items.length) {
|
|
3022
|
+
if (listRef.current && onDragEnd && items.length) {
|
|
3020
3023
|
dragulaRef.current = setupDragging();
|
|
3021
3024
|
}
|
|
3022
3025
|
|
|
@@ -3025,7 +3028,7 @@ var List = function List(_ref) {
|
|
|
3025
3028
|
|
|
3026
3029
|
(_dragulaRef$current2 = dragulaRef.current) == null ? void 0 : _dragulaRef$current2.destroy == null ? void 0 : _dragulaRef$current2.destroy();
|
|
3027
3030
|
};
|
|
3028
|
-
}, [items]);
|
|
3031
|
+
}, [items, listRef]);
|
|
3029
3032
|
|
|
3030
3033
|
var handleDragEnd = function handleDragEnd(element) {
|
|
3031
3034
|
var draggedItemId = element.dataset["id"];
|
|
@@ -3049,6 +3052,10 @@ var List = function List(_ref) {
|
|
|
3049
3052
|
};
|
|
3050
3053
|
|
|
3051
3054
|
var setupDragging = function setupDragging() {
|
|
3055
|
+
if (!listRef.current) {
|
|
3056
|
+
return null;
|
|
3057
|
+
}
|
|
3058
|
+
|
|
3052
3059
|
var dragulaInstance = dragula([listRef.current], {
|
|
3053
3060
|
revertOnSpill: true
|
|
3054
3061
|
});
|
|
@@ -3199,13 +3206,15 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
3199
3206
|
var title = _ref.title,
|
|
3200
3207
|
items = _ref.items,
|
|
3201
3208
|
onChange = _ref.onChange,
|
|
3202
|
-
className = _ref.className
|
|
3209
|
+
className = _ref.className,
|
|
3210
|
+
_ref$isCollapsed = _ref.isCollapsed,
|
|
3211
|
+
isCollapsed = _ref$isCollapsed === void 0 ? true : _ref$isCollapsed;
|
|
3203
3212
|
|
|
3204
3213
|
var _useState = React.useState(CheckboxState.UNCHECKED),
|
|
3205
3214
|
groupCheckboxState = _useState[0],
|
|
3206
3215
|
setGroupCheckboxState = _useState[1];
|
|
3207
3216
|
|
|
3208
|
-
var _useState2 = React.useState(
|
|
3217
|
+
var _useState2 = React.useState(isCollapsed),
|
|
3209
3218
|
collapsed = _useState2[0],
|
|
3210
3219
|
setCollapsed = _useState2[1];
|
|
3211
3220
|
|
|
@@ -3276,7 +3285,7 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
3276
3285
|
type: "strong",
|
|
3277
3286
|
text: groupTitle || "",
|
|
3278
3287
|
className: " ml-4"
|
|
3279
|
-
}), " :"), /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
3288
|
+
}), " ", ":"), /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
3280
3289
|
onChange: handleGroupClick,
|
|
3281
3290
|
className: "ml-auto",
|
|
3282
3291
|
isChecked: groupCheckboxState === CheckboxState.CHECKED,
|
|
@@ -3305,6 +3314,7 @@ var CheckboxList = function CheckboxList(_ref) {
|
|
|
3305
3314
|
key: group.title,
|
|
3306
3315
|
items: group.items,
|
|
3307
3316
|
title: group.title,
|
|
3317
|
+
isCollapsed: group.isCollapsed,
|
|
3308
3318
|
onChange: onChange
|
|
3309
3319
|
});
|
|
3310
3320
|
} else {
|
|
@@ -3368,8 +3378,8 @@ function handleImplicitSelect(implicitSelected, event, list, property) {
|
|
|
3368
3378
|
return newList;
|
|
3369
3379
|
}
|
|
3370
3380
|
|
|
3371
|
-
var css_248z$
|
|
3372
|
-
styleInject(css_248z$
|
|
3381
|
+
var css_248z$i = ".cweb-multiselect {\n display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n margin-bottom: 0px;\n margin-top: 0.5rem;\n width: 100%;\n text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n width: 100px;\n color: #737373;\n font-size: 16px;\n line-height: 1.8em;\n}\n";
|
|
3382
|
+
styleInject(css_248z$i);
|
|
3373
3383
|
|
|
3374
3384
|
function MultiSelect(_ref) {
|
|
3375
3385
|
var checkboxList = _ref.checkboxList,
|
|
@@ -3715,8 +3725,8 @@ NotificationBanner.defaultProps = {
|
|
|
3715
3725
|
onButtonClick: undefined
|
|
3716
3726
|
};
|
|
3717
3727
|
|
|
3718
|
-
var css_248z$
|
|
3719
|
-
styleInject(css_248z$
|
|
3728
|
+
var css_248z$j = ".cweb-page {\n width: 100%;\n max-width: 1140px;\n margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n margin-left: 8px;\n margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n display: flex;\n align-items: center;\n width: 100%;\n flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n flex-direction: column;\n align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n .cweb-page .cweb-page-header.accessory-bottom {\n max-width: 75vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom img {\n max-width: 10vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom button p {\n font-size: 4vw;\n }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n margin-bottom: 8px;\n display: inline;\n}\n";
|
|
3729
|
+
styleInject(css_248z$j);
|
|
3720
3730
|
|
|
3721
3731
|
/**
|
|
3722
3732
|
* Renders page's content, if `isLoading` is false otherwise shows loading indicator.
|
|
@@ -3896,8 +3906,8 @@ var Steps = function Steps(_ref) {
|
|
|
3896
3906
|
}, renderedSteps);
|
|
3897
3907
|
};
|
|
3898
3908
|
|
|
3899
|
-
var css_248z$
|
|
3900
|
-
styleInject(css_248z$
|
|
3909
|
+
var css_248z$k = ".cweb-crud-page {\n width: 100%;\n margin: 36px auto 0;\n}\n\n.cweb-crud-page-form-container {\n background-color: #fff;\n border-radius: 8px;\n padding: 24px;\n margin-top: 16px;\n}\n\n.cweb-crud-page-button-line {\n border-top: 1px solid #eeeeee;\n padding-top: 16px;\n margin-top: 16px;\n}\n\n.cweb-crud-page-loading-container {\n height: 90vh;\n /* puting this in 100vh causes an overflow bug */\n overflow-y: hidden;\n position: relative;\n}\n\n.cweb-crud-page-loading-container .crud-page-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n";
|
|
3910
|
+
styleInject(css_248z$k);
|
|
3901
3911
|
|
|
3902
3912
|
function CRUDPage(_ref) {
|
|
3903
3913
|
var _ref$dataTestId = _ref.dataTestId,
|
|
@@ -4103,8 +4113,8 @@ var PreviewPhone = function PreviewPhone(_ref) {
|
|
|
4103
4113
|
}))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
|
|
4104
4114
|
};
|
|
4105
4115
|
|
|
4106
|
-
var css_248z$
|
|
4107
|
-
styleInject(css_248z$
|
|
4116
|
+
var css_248z$l = ".cweb-radio {\n outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n\n.cweb-radio .cweb-radio-icon-container {\n width: 16px;\n height: 16px;\n position: relative;\n border: 1px solid #cccccc;\n border-radius: 50%;\n transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-radio .cweb-radio-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: block;\n}\n\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}\n";
|
|
4117
|
+
styleInject(css_248z$l);
|
|
4108
4118
|
|
|
4109
4119
|
/**
|
|
4110
4120
|
* @deprecated: use RadioV2 instead
|
|
@@ -4206,8 +4216,8 @@ Radio.propTypes = {
|
|
|
4206
4216
|
onChange: PropTypes.func
|
|
4207
4217
|
};
|
|
4208
4218
|
|
|
4209
|
-
var css_248z$
|
|
4210
|
-
styleInject(css_248z$
|
|
4219
|
+
var css_248z$m = ".cweb-radio-group {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n flex: 0 0 auto;\n margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n flex: 0 0 auto;\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n border: 1px solid #ff6266 !important;\n}\n";
|
|
4220
|
+
styleInject(css_248z$m);
|
|
4211
4221
|
|
|
4212
4222
|
var _excluded$b = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
|
|
4213
4223
|
/**
|
|
@@ -4267,8 +4277,8 @@ RadioGroup.propTypes = {
|
|
|
4267
4277
|
onChange: PropTypes.func
|
|
4268
4278
|
};
|
|
4269
4279
|
|
|
4270
|
-
var css_248z$
|
|
4271
|
-
styleInject(css_248z$
|
|
4280
|
+
var css_248z$n = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n --bg-opacity: 1;\n background-color: #0074DD;\n background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n --border-opacity: 1;\n border-color: #c53030;\n border-color: rgba(197, 48, 48, var(--border-opacity));\n outline: 4px solid rgba(255, 98, 102, 0.3);\n outline-offset: 0;\n}\n\n.radio-form-field-label\n input[type=\"radio\"]:checked\n + .radio-circle\n .radio-inner-circle {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
|
|
4281
|
+
styleInject(css_248z$n);
|
|
4272
4282
|
|
|
4273
4283
|
var _excluded$c = ["text", "info", "isError", "innerRef", "className"];
|
|
4274
4284
|
|
|
@@ -4353,8 +4363,8 @@ var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref)
|
|
|
4353
4363
|
}));
|
|
4354
4364
|
});
|
|
4355
4365
|
|
|
4356
|
-
var css_248z$
|
|
4357
|
-
styleInject(css_248z$
|
|
4366
|
+
var css_248z$o = ".cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}\n";
|
|
4367
|
+
styleInject(css_248z$o);
|
|
4358
4368
|
|
|
4359
4369
|
var _excluded$e = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
|
|
4360
4370
|
function Section(_ref) {
|
|
@@ -4394,8 +4404,8 @@ function Section(_ref) {
|
|
|
4394
4404
|
}, footer));
|
|
4395
4405
|
}
|
|
4396
4406
|
|
|
4397
|
-
var css_248z$
|
|
4398
|
-
styleInject(css_248z$
|
|
4407
|
+
var css_248z$p = ".cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}\n";
|
|
4408
|
+
styleInject(css_248z$p);
|
|
4399
4409
|
|
|
4400
4410
|
var _excluded$f = ["children", "className", "onClick"];
|
|
4401
4411
|
var SectionItem = function SectionItem(props) {
|
|
@@ -4687,8 +4697,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
|
|
|
4687
4697
|
})));
|
|
4688
4698
|
};
|
|
4689
4699
|
|
|
4690
|
-
var css_248z$
|
|
4691
|
-
styleInject(css_248z$
|
|
4700
|
+
var css_248z$q = ".cweb-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n .cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n width: 20px;\n height: 20px;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #737373;\n transition: color 0.4s ease;\n padding-bottom: 0;\n}\n\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n margin-left: 8px;\n padding: 0;\n}\n\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n display: none;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: inherit;\n}\n\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #0074dd;\n}\n\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}\n";
|
|
4701
|
+
styleInject(css_248z$q);
|
|
4692
4702
|
|
|
4693
4703
|
SwitcherItem.propTypes = {
|
|
4694
4704
|
name: PropTypes.string,
|
|
@@ -5021,8 +5031,8 @@ var TagGroup = function TagGroup(_ref) {
|
|
|
5021
5031
|
}));
|
|
5022
5032
|
};
|
|
5023
5033
|
|
|
5024
|
-
var css_248z$
|
|
5025
|
-
styleInject(css_248z$
|
|
5034
|
+
var css_248z$r = ".cweb-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\n\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n\n.cweb-textarea.resizable {\n resize: both;\n}\n\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #737373;\n}\n\n.cweb-textarea::placeholder {\n color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}\n";
|
|
5035
|
+
styleInject(css_248z$r);
|
|
5026
5036
|
|
|
5027
5037
|
var _excluded$i = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
|
|
5028
5038
|
var RESIZE_TYPES = {
|
|
@@ -5109,8 +5119,8 @@ function Textarea(props) {
|
|
|
5109
5119
|
}));
|
|
5110
5120
|
}
|
|
5111
5121
|
|
|
5112
|
-
var css_248z$
|
|
5113
|
-
styleInject(css_248z$
|
|
5122
|
+
var css_248z$s = ".ql-editor {\n resize: vertical;\n min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n display: block;\n background: #f1f5f9;\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n margin-top: 0.5em;\n}\n";
|
|
5123
|
+
styleInject(css_248z$s);
|
|
5114
5124
|
|
|
5115
5125
|
function TextEditor(_ref) {
|
|
5116
5126
|
var defaultValue = _ref.defaultValue,
|
|
@@ -5164,8 +5174,8 @@ TextEditor.propTypes = {
|
|
|
5164
5174
|
onValueChange: PropTypes.func.isRequired
|
|
5165
5175
|
};
|
|
5166
5176
|
|
|
5167
|
-
var css_248z$
|
|
5168
|
-
styleInject(css_248z$
|
|
5177
|
+
var css_248z$t = ".editor .rdw-editor {\n overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n width: 20rem;\n height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n margin-bottom: 1rem;\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n .editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n width: 22rem;\n height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n .editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n min-height: 14rem;\n overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n margin: 0 12px;\n}\n";
|
|
5178
|
+
styleInject(css_248z$t);
|
|
5169
5179
|
|
|
5170
5180
|
var TextEditorV2 = function TextEditorV2(_ref) {
|
|
5171
5181
|
var defaultValue = _ref.defaultValue,
|