@elementor/editor-controls 4.1.0-820 → 4.1.0-822
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/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +270 -161
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +271 -163
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -15
- package/src/controls/date-range-control.tsx +83 -0
- package/src/controls/date-string-control.tsx +70 -0
- package/src/controls/image-media-control.tsx +15 -3
- package/src/index.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -43,6 +43,7 @@ __export(index_exports, {
|
|
|
43
43
|
ControlFormLabel: () => ControlFormLabel,
|
|
44
44
|
ControlReplacementsProvider: () => ControlReplacementsProvider,
|
|
45
45
|
ControlToggleButtonGroup: () => ControlToggleButtonGroup,
|
|
46
|
+
DateRangeControl: () => DateRangeControl,
|
|
46
47
|
DateTimeControl: () => DateTimeControl,
|
|
47
48
|
DisplayConditionsControl: () => DisplayConditionsControl,
|
|
48
49
|
EmailFormActionControl: () => EmailFormActionControl,
|
|
@@ -507,6 +508,9 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
|
|
|
507
508
|
const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
|
|
508
509
|
const { data: placeholderAttachment } = (0, import_wp_media.useWpMediaAttachment)(placeholder?.id?.value || null);
|
|
509
510
|
const src = attachment?.url ?? url?.value ?? placeholderAttachment?.url ?? null;
|
|
511
|
+
const defaultUrl = import_editor_props.imageSrcPropTypeUtil.extract(propType.default ?? null)?.url?.value;
|
|
512
|
+
const currentUrlForModal = url?.value && url.value !== defaultUrl ? url.value : void 0;
|
|
513
|
+
const currentAltForModal = value?.alt?.value;
|
|
510
514
|
const { open } = (0, import_wp_media.useWpMediaFrame)({
|
|
511
515
|
mediaTypes,
|
|
512
516
|
multiple: false,
|
|
@@ -521,10 +525,11 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
|
|
|
521
525
|
url: null
|
|
522
526
|
});
|
|
523
527
|
},
|
|
524
|
-
onSelectUrl: (selectedUrl) => {
|
|
528
|
+
onSelectUrl: (selectedUrl, alt) => {
|
|
525
529
|
setValue({
|
|
526
530
|
id: null,
|
|
527
|
-
url: import_editor_props.urlPropTypeUtil.create(selectedUrl)
|
|
531
|
+
url: import_editor_props.urlPropTypeUtil.create(selectedUrl),
|
|
532
|
+
alt: alt ? import_editor_props.stringPropTypeUtil.create(alt) : null
|
|
528
533
|
});
|
|
529
534
|
}
|
|
530
535
|
});
|
|
@@ -547,7 +552,16 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
|
|
|
547
552
|
onClick: () => open({ mode: "upload" })
|
|
548
553
|
},
|
|
549
554
|
(0, import_i18n.__)("Upload", "elementor")
|
|
550
|
-
), /* @__PURE__ */ React11.createElement(
|
|
555
|
+
), /* @__PURE__ */ React11.createElement(
|
|
556
|
+
import_ui4.Button,
|
|
557
|
+
{
|
|
558
|
+
size: "tiny",
|
|
559
|
+
variant: "text",
|
|
560
|
+
color: "inherit",
|
|
561
|
+
onClick: () => open({ mode: "url", currentUrl: currentUrlForModal, currentAlt: currentAltForModal })
|
|
562
|
+
},
|
|
563
|
+
(0, import_i18n.__)("Insert from URL", "elementor")
|
|
564
|
+
)))));
|
|
551
565
|
});
|
|
552
566
|
|
|
553
567
|
// src/controls/select-control.tsx
|
|
@@ -7410,17 +7424,111 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
7410
7424
|
))))));
|
|
7411
7425
|
});
|
|
7412
7426
|
|
|
7413
|
-
// src/controls/
|
|
7427
|
+
// src/controls/date-range-control.tsx
|
|
7414
7428
|
var React108 = __toESM(require("react"));
|
|
7415
|
-
var
|
|
7416
|
-
var import_editor_props56 = require("@elementor/editor-props");
|
|
7429
|
+
var import_editor_props57 = require("@elementor/editor-props");
|
|
7417
7430
|
var import_ui92 = require("@elementor/ui");
|
|
7431
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
7432
|
+
|
|
7433
|
+
// src/controls/date-string-control.tsx
|
|
7434
|
+
var React107 = __toESM(require("react"));
|
|
7435
|
+
var dayjs2 = __toESM(require("dayjs"));
|
|
7436
|
+
var import_editor_props56 = require("@elementor/editor-props");
|
|
7437
|
+
var import_ui91 = require("@elementor/ui");
|
|
7438
|
+
var DATE_FORMAT2 = "YYYY-MM-DD";
|
|
7439
|
+
var DateStringControl = createControl(({ inputDisabled, ariaLabel, error }) => {
|
|
7440
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props56.dateStringPropTypeUtil);
|
|
7441
|
+
const isDisabled = inputDisabled ?? disabled;
|
|
7442
|
+
const slotProps = {
|
|
7443
|
+
textField: {
|
|
7444
|
+
size: "tiny",
|
|
7445
|
+
fullWidth: true,
|
|
7446
|
+
error,
|
|
7447
|
+
inputProps: ariaLabel ? { "aria-label": ariaLabel } : void 0
|
|
7448
|
+
},
|
|
7449
|
+
openPickerButton: { size: "tiny" },
|
|
7450
|
+
openPickerIcon: { fontSize: "tiny" }
|
|
7451
|
+
};
|
|
7452
|
+
const handleChange = (newValue, format) => {
|
|
7453
|
+
if (!newValue) {
|
|
7454
|
+
setValue(null);
|
|
7455
|
+
return;
|
|
7456
|
+
}
|
|
7457
|
+
setValue(newValue.format(format));
|
|
7458
|
+
};
|
|
7459
|
+
return /* @__PURE__ */ React107.createElement(import_ui91.LocalizationProvider, null, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
|
|
7460
|
+
import_ui91.DatePicker,
|
|
7461
|
+
{
|
|
7462
|
+
value: parseDateString(value ?? ""),
|
|
7463
|
+
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
7464
|
+
disabled: isDisabled,
|
|
7465
|
+
slotProps
|
|
7466
|
+
}
|
|
7467
|
+
)));
|
|
7468
|
+
});
|
|
7469
|
+
function parseDateString(raw) {
|
|
7470
|
+
if (!raw) {
|
|
7471
|
+
return null;
|
|
7472
|
+
}
|
|
7473
|
+
const parsed = dayjs2.default(raw);
|
|
7474
|
+
return isValidDayjs(parsed) ? parsed : null;
|
|
7475
|
+
}
|
|
7476
|
+
function isValidDayjs(value) {
|
|
7477
|
+
return !!value && typeof value.isValid === "function" && value.isValid();
|
|
7478
|
+
}
|
|
7479
|
+
|
|
7480
|
+
// src/controls/date-range-control.tsx
|
|
7481
|
+
var RANGE_LABELS = {
|
|
7482
|
+
min: (0, import_i18n53.__)("Min date", "elementor"),
|
|
7483
|
+
max: (0, import_i18n53.__)("Max date", "elementor")
|
|
7484
|
+
};
|
|
7485
|
+
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
7486
|
+
if (!minIso || !maxIso || [minIso, maxIso].some((v) => v === "Invalid Date")) {
|
|
7487
|
+
return false;
|
|
7488
|
+
}
|
|
7489
|
+
return maxIso < minIso;
|
|
7490
|
+
};
|
|
7491
|
+
var RANGE_ERROR_MESSAGE = (0, import_i18n53.__)("Max date must be on or after Min date", "elementor");
|
|
7492
|
+
var DateRangeControl = createControl(() => {
|
|
7493
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props57.dateRangePropTypeUtil);
|
|
7494
|
+
const minString = import_editor_props57.dateStringPropTypeUtil.extract(value?.min);
|
|
7495
|
+
const maxString = import_editor_props57.dateStringPropTypeUtil.extract(value?.max);
|
|
7496
|
+
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
7497
|
+
return /* @__PURE__ */ React108.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React108.createElement(import_ui92.Stack, { gap: 0.75 }, /* @__PURE__ */ React108.createElement(import_ui92.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React108.createElement(import_ui92.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(
|
|
7498
|
+
BoundDateStringControl,
|
|
7499
|
+
{
|
|
7500
|
+
bind: "min",
|
|
7501
|
+
ariaLabel: RANGE_LABELS.min,
|
|
7502
|
+
error: hasInvalidRange
|
|
7503
|
+
}
|
|
7504
|
+
))), /* @__PURE__ */ React108.createElement(import_ui92.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React108.createElement(import_ui92.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React108.createElement(
|
|
7505
|
+
BoundDateStringControl,
|
|
7506
|
+
{
|
|
7507
|
+
bind: "max",
|
|
7508
|
+
ariaLabel: RANGE_LABELS.max,
|
|
7509
|
+
error: hasInvalidRange
|
|
7510
|
+
}
|
|
7511
|
+
)))), hasInvalidRange && /* @__PURE__ */ React108.createElement(import_ui92.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
7512
|
+
});
|
|
7513
|
+
var BoundDateStringControl = ({
|
|
7514
|
+
bind,
|
|
7515
|
+
ariaLabel,
|
|
7516
|
+
error
|
|
7517
|
+
}) => {
|
|
7518
|
+
return /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React108.createElement(DateStringControl, { ariaLabel, error }));
|
|
7519
|
+
};
|
|
7520
|
+
|
|
7521
|
+
// src/controls/inline-editing-control.tsx
|
|
7522
|
+
var React110 = __toESM(require("react"));
|
|
7523
|
+
var import_react66 = require("react");
|
|
7524
|
+
var import_editor_props58 = require("@elementor/editor-props");
|
|
7525
|
+
var import_ui94 = require("@elementor/ui");
|
|
7418
7526
|
var import_utils8 = require("@elementor/utils");
|
|
7419
7527
|
|
|
7420
7528
|
// src/components/inline-editor.tsx
|
|
7421
|
-
var
|
|
7529
|
+
var React109 = __toESM(require("react"));
|
|
7422
7530
|
var import_react64 = require("react");
|
|
7423
|
-
var
|
|
7531
|
+
var import_ui93 = require("@elementor/ui");
|
|
7424
7532
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
7425
7533
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
7426
7534
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -7457,7 +7565,7 @@ function htmlToPlainText(html) {
|
|
|
7457
7565
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
7458
7566
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
7459
7567
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
7460
|
-
var InlineEditor =
|
|
7568
|
+
var InlineEditor = React109.forwardRef((props, ref) => {
|
|
7461
7569
|
const {
|
|
7462
7570
|
value,
|
|
7463
7571
|
setValue,
|
|
@@ -7568,7 +7676,7 @@ var InlineEditor = React107.forwardRef((props, ref) => {
|
|
|
7568
7676
|
if (mountElement) {
|
|
7569
7677
|
return null;
|
|
7570
7678
|
}
|
|
7571
|
-
return /* @__PURE__ */
|
|
7679
|
+
return /* @__PURE__ */ React109.createElement(import_ui93.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React109.createElement(import_react65.EditorContent, { ref, editor }));
|
|
7572
7680
|
});
|
|
7573
7681
|
var useOnUpdate = (callback, dependencies) => {
|
|
7574
7682
|
const hasMounted = (0, import_react64.useRef)(false);
|
|
@@ -7589,13 +7697,13 @@ var InlineEditingControl = createControl(
|
|
|
7589
7697
|
attributes,
|
|
7590
7698
|
props
|
|
7591
7699
|
}) => {
|
|
7592
|
-
const { value, setValue, placeholder } = useBoundProp(
|
|
7593
|
-
const content =
|
|
7700
|
+
const { value, setValue, placeholder } = useBoundProp(import_editor_props58.htmlV3PropTypeUtil);
|
|
7701
|
+
const content = import_editor_props58.stringPropTypeUtil.extract(value?.content ?? null) ?? "";
|
|
7594
7702
|
const debouncedParse = (0, import_react66.useMemo)(
|
|
7595
7703
|
() => (0, import_utils8.debounce)((html) => {
|
|
7596
|
-
const parsed = (0,
|
|
7704
|
+
const parsed = (0, import_editor_props58.parseHtmlChildren)(html);
|
|
7597
7705
|
setValue({
|
|
7598
|
-
content: parsed.content ?
|
|
7706
|
+
content: parsed.content ? import_editor_props58.stringPropTypeUtil.create(parsed.content) : null,
|
|
7599
7707
|
children: parsed.children
|
|
7600
7708
|
});
|
|
7601
7709
|
}, CHILDREN_PARSE_DEBOUNCE_MS),
|
|
@@ -7605,7 +7713,7 @@ var InlineEditingControl = createControl(
|
|
|
7605
7713
|
(newValue) => {
|
|
7606
7714
|
const html = newValue ?? "";
|
|
7607
7715
|
setValue({
|
|
7608
|
-
content: html ?
|
|
7716
|
+
content: html ? import_editor_props58.stringPropTypeUtil.create(html) : null,
|
|
7609
7717
|
children: value?.children ?? []
|
|
7610
7718
|
});
|
|
7611
7719
|
debouncedParse(html);
|
|
@@ -7613,8 +7721,8 @@ var InlineEditingControl = createControl(
|
|
|
7613
7721
|
[setValue, value?.children, debouncedParse]
|
|
7614
7722
|
);
|
|
7615
7723
|
(0, import_react66.useEffect)(() => () => debouncedParse.cancel(), [debouncedParse]);
|
|
7616
|
-
return /* @__PURE__ */
|
|
7617
|
-
|
|
7724
|
+
return /* @__PURE__ */ React110.createElement(ControlActions, null, /* @__PURE__ */ React110.createElement(
|
|
7725
|
+
import_ui94.Box,
|
|
7618
7726
|
{
|
|
7619
7727
|
sx: {
|
|
7620
7728
|
p: 0.8,
|
|
@@ -7658,7 +7766,7 @@ var InlineEditingControl = createControl(
|
|
|
7658
7766
|
...attributes,
|
|
7659
7767
|
...props
|
|
7660
7768
|
},
|
|
7661
|
-
/* @__PURE__ */
|
|
7769
|
+
/* @__PURE__ */ React110.createElement(
|
|
7662
7770
|
InlineEditor,
|
|
7663
7771
|
{
|
|
7664
7772
|
value: content,
|
|
@@ -7671,16 +7779,16 @@ var InlineEditingControl = createControl(
|
|
|
7671
7779
|
);
|
|
7672
7780
|
|
|
7673
7781
|
// src/controls/email-form-action-control.tsx
|
|
7674
|
-
var
|
|
7675
|
-
var
|
|
7782
|
+
var React111 = __toESM(require("react"));
|
|
7783
|
+
var import_editor_props60 = require("@elementor/editor-props");
|
|
7676
7784
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
7677
|
-
var
|
|
7785
|
+
var import_ui95 = require("@elementor/ui");
|
|
7678
7786
|
var import_utils9 = require("@elementor/utils");
|
|
7679
|
-
var
|
|
7787
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
7680
7788
|
|
|
7681
7789
|
// src/hooks/use-form-field-suggestions.ts
|
|
7682
7790
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
7683
|
-
var
|
|
7791
|
+
var import_editor_props59 = require("@elementor/editor-props");
|
|
7684
7792
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
7685
7793
|
var FORM_FIELD_WIDGET_TYPES = [
|
|
7686
7794
|
"e-form-input",
|
|
@@ -7715,13 +7823,13 @@ function useFormFieldSuggestions(options) {
|
|
|
7715
7823
|
}
|
|
7716
7824
|
if (options?.inputType) {
|
|
7717
7825
|
const typeProp = child.settings.get("type");
|
|
7718
|
-
const typeValue = (0,
|
|
7826
|
+
const typeValue = (0, import_editor_props59.isTransformable)(typeProp) ? typeProp.value : typeProp;
|
|
7719
7827
|
if (typeValue !== options.inputType) {
|
|
7720
7828
|
return;
|
|
7721
7829
|
}
|
|
7722
7830
|
}
|
|
7723
7831
|
const cssIdProp = child.settings.get("_cssid");
|
|
7724
|
-
const fieldId = (0,
|
|
7832
|
+
const fieldId = (0, import_editor_props59.isTransformable)(cssIdProp) ? cssIdProp.value : cssIdProp;
|
|
7725
7833
|
if (fieldId && typeof fieldId === "string") {
|
|
7726
7834
|
suggestions.push({ label: fieldId, value: fieldId });
|
|
7727
7835
|
}
|
|
@@ -7733,14 +7841,14 @@ function useFormFieldSuggestions(options) {
|
|
|
7733
7841
|
}
|
|
7734
7842
|
|
|
7735
7843
|
// src/controls/email-form-action-control.tsx
|
|
7736
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
7737
|
-
var SendToField = ({ placeholder }) => /* @__PURE__ */
|
|
7738
|
-
var SubjectField = () => /* @__PURE__ */
|
|
7844
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(TextControl, { placeholder }))));
|
|
7845
|
+
var SendToField = ({ placeholder }) => /* @__PURE__ */ React111.createElement(EmailField, { bind: "to", label: (0, import_i18n54.__)("Send to", "elementor"), placeholder });
|
|
7846
|
+
var SubjectField = () => /* @__PURE__ */ React111.createElement(
|
|
7739
7847
|
EmailField,
|
|
7740
7848
|
{
|
|
7741
7849
|
bind: "subject",
|
|
7742
|
-
label: (0,
|
|
7743
|
-
placeholder: (0,
|
|
7850
|
+
label: (0, import_i18n54.__)("Email subject", "elementor"),
|
|
7851
|
+
placeholder: (0, import_i18n54.__)("New form submission", "elementor")
|
|
7744
7852
|
}
|
|
7745
7853
|
);
|
|
7746
7854
|
var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
|
|
@@ -7756,80 +7864,80 @@ var shouldShowMentionsInfo = () => {
|
|
|
7756
7864
|
};
|
|
7757
7865
|
var MessageField = () => {
|
|
7758
7866
|
const suggestions = useFormFieldSuggestions();
|
|
7759
|
-
return /* @__PURE__ */
|
|
7867
|
+
return /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Message", "elementor"))), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n54.__)(
|
|
7760
7868
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
7761
7869
|
"elementor"
|
|
7762
|
-
) : (0,
|
|
7870
|
+
) : (0, import_i18n54.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
7763
7871
|
};
|
|
7764
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
7872
|
+
var FromEmailField = () => /* @__PURE__ */ React111.createElement(
|
|
7765
7873
|
EmailField,
|
|
7766
7874
|
{
|
|
7767
7875
|
bind: "from",
|
|
7768
|
-
label: (0,
|
|
7769
|
-
placeholder: (0,
|
|
7876
|
+
label: (0, import_i18n54.__)("From email", "elementor"),
|
|
7877
|
+
placeholder: (0, import_i18n54.__)("What email should appear as the sender?", "elementor")
|
|
7770
7878
|
}
|
|
7771
7879
|
);
|
|
7772
|
-
var FromNameField = () => /* @__PURE__ */
|
|
7880
|
+
var FromNameField = () => /* @__PURE__ */ React111.createElement(
|
|
7773
7881
|
EmailField,
|
|
7774
7882
|
{
|
|
7775
7883
|
bind: "from-name",
|
|
7776
|
-
label: (0,
|
|
7777
|
-
placeholder: (0,
|
|
7884
|
+
label: (0, import_i18n54.__)("From name", "elementor"),
|
|
7885
|
+
placeholder: (0, import_i18n54.__)("What name should appear as the sender?", "elementor")
|
|
7778
7886
|
}
|
|
7779
7887
|
);
|
|
7780
7888
|
var ReplyToField = () => {
|
|
7781
7889
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
7782
|
-
return /* @__PURE__ */
|
|
7890
|
+
return /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Reply-to", "elementor"))), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(
|
|
7783
7891
|
MentionTextAreaControl,
|
|
7784
7892
|
{
|
|
7785
7893
|
suggestions: emailSuggestions,
|
|
7786
7894
|
rows: 1,
|
|
7787
7895
|
triggerPosition: "start",
|
|
7788
|
-
placeholder: (0,
|
|
7896
|
+
placeholder: (0, import_i18n54.__)("You can type @ to insert an email field", "elementor")
|
|
7789
7897
|
}
|
|
7790
7898
|
))));
|
|
7791
7899
|
};
|
|
7792
|
-
var CcField = () => /* @__PURE__ */
|
|
7793
|
-
var BccField = () => /* @__PURE__ */
|
|
7794
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
7900
|
+
var CcField = () => /* @__PURE__ */ React111.createElement(EmailField, { bind: "cc", label: (0, import_i18n54.__)("Cc", "elementor") });
|
|
7901
|
+
var BccField = () => /* @__PURE__ */ React111.createElement(EmailField, { bind: "bcc", label: (0, import_i18n54.__)("Bcc", "elementor") });
|
|
7902
|
+
var MetaDataField = () => /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 0.5 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Metadata", "elementor")), /* @__PURE__ */ React111.createElement(
|
|
7795
7903
|
ChipsControl,
|
|
7796
7904
|
{
|
|
7797
7905
|
options: [
|
|
7798
|
-
{ label: (0,
|
|
7799
|
-
{ label: (0,
|
|
7800
|
-
{ label: (0,
|
|
7801
|
-
{ label: (0,
|
|
7802
|
-
{ label: (0,
|
|
7906
|
+
{ label: (0, import_i18n54.__)("Date", "elementor"), value: "date" },
|
|
7907
|
+
{ label: (0, import_i18n54.__)("Time", "elementor"), value: "time" },
|
|
7908
|
+
{ label: (0, import_i18n54.__)("Page URL", "elementor"), value: "page-url" },
|
|
7909
|
+
{ label: (0, import_i18n54.__)("User agent", "elementor"), value: "user-agent" },
|
|
7910
|
+
{ label: (0, import_i18n54.__)("Credit", "elementor"), value: "credit" }
|
|
7803
7911
|
]
|
|
7804
7912
|
}
|
|
7805
7913
|
)));
|
|
7806
|
-
var SendAsField = () => /* @__PURE__ */
|
|
7914
|
+
var SendAsField = () => /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Send as", "elementor"))), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true }, /* @__PURE__ */ React111.createElement(
|
|
7807
7915
|
SelectControl,
|
|
7808
7916
|
{
|
|
7809
7917
|
options: [
|
|
7810
|
-
{ label: (0,
|
|
7811
|
-
{ label: (0,
|
|
7918
|
+
{ label: (0, import_i18n54.__)("HTML", "elementor"), value: "html" },
|
|
7919
|
+
{ label: (0, import_i18n54.__)("Plain Text", "elementor"), value: "plain" }
|
|
7812
7920
|
]
|
|
7813
7921
|
}
|
|
7814
7922
|
))));
|
|
7815
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
7923
|
+
var AdvancedSettings = () => /* @__PURE__ */ React111.createElement(import_editor_ui15.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React111.createElement(import_ui95.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 2 }, /* @__PURE__ */ React111.createElement(FromNameField, null), /* @__PURE__ */ React111.createElement(ReplyToField, null), /* @__PURE__ */ React111.createElement(CcField, null), /* @__PURE__ */ React111.createElement(BccField, null), /* @__PURE__ */ React111.createElement(import_ui95.Divider, null), /* @__PURE__ */ React111.createElement(MetaDataField, null), /* @__PURE__ */ React111.createElement(SendAsField, null))));
|
|
7816
7924
|
var EmailFormActionControl = createControl(({ toPlaceholder }) => {
|
|
7817
|
-
const { value, setValue, ...propContext } = useBoundProp(
|
|
7818
|
-
return /* @__PURE__ */
|
|
7925
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props60.emailPropTypeUtil);
|
|
7926
|
+
return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(import_ui95.Stack, { gap: 2 }, /* @__PURE__ */ React111.createElement(ControlLabel, null, (0, import_i18n54.__)("Email settings", "elementor")), /* @__PURE__ */ React111.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React111.createElement(SubjectField, null), /* @__PURE__ */ React111.createElement(MessageField, null), /* @__PURE__ */ React111.createElement(FromEmailField, null), /* @__PURE__ */ React111.createElement(AdvancedSettings, null)));
|
|
7819
7927
|
});
|
|
7820
7928
|
|
|
7821
7929
|
// src/components/promotions/display-conditions-control.tsx
|
|
7822
|
-
var
|
|
7930
|
+
var React113 = __toESM(require("react"));
|
|
7823
7931
|
var import_react68 = require("react");
|
|
7824
7932
|
var import_icons36 = require("@elementor/icons");
|
|
7825
|
-
var
|
|
7826
|
-
var
|
|
7933
|
+
var import_ui97 = require("@elementor/ui");
|
|
7934
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
7827
7935
|
|
|
7828
7936
|
// src/components/promotions/promotion-trigger.tsx
|
|
7829
|
-
var
|
|
7937
|
+
var React112 = __toESM(require("react"));
|
|
7830
7938
|
var import_react67 = require("react");
|
|
7831
7939
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
7832
|
-
var
|
|
7940
|
+
var import_ui96 = require("@elementor/ui");
|
|
7833
7941
|
function getV4Promotion(key) {
|
|
7834
7942
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
7835
7943
|
}
|
|
@@ -7846,7 +7954,7 @@ var PromotionTrigger = (0, import_react67.forwardRef)(
|
|
|
7846
7954
|
});
|
|
7847
7955
|
}, [trackingData]);
|
|
7848
7956
|
(0, import_react67.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
7849
|
-
return /* @__PURE__ */
|
|
7957
|
+
return /* @__PURE__ */ React112.createElement(React112.Fragment, null, promotion && /* @__PURE__ */ React112.createElement(
|
|
7850
7958
|
import_editor_ui16.PromotionInfotip,
|
|
7851
7959
|
{
|
|
7852
7960
|
title: promotion.title,
|
|
@@ -7860,8 +7968,8 @@ var PromotionTrigger = (0, import_react67.forwardRef)(
|
|
|
7860
7968
|
},
|
|
7861
7969
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
7862
7970
|
},
|
|
7863
|
-
/* @__PURE__ */
|
|
7864
|
-
|
|
7971
|
+
/* @__PURE__ */ React112.createElement(
|
|
7972
|
+
import_ui96.Box,
|
|
7865
7973
|
{
|
|
7866
7974
|
onClick: (e) => {
|
|
7867
7975
|
e.stopPropagation();
|
|
@@ -7869,19 +7977,19 @@ var PromotionTrigger = (0, import_react67.forwardRef)(
|
|
|
7869
7977
|
},
|
|
7870
7978
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
7871
7979
|
},
|
|
7872
|
-
children ?? /* @__PURE__ */
|
|
7980
|
+
children ?? /* @__PURE__ */ React112.createElement(import_editor_ui16.PromotionChip, null)
|
|
7873
7981
|
)
|
|
7874
7982
|
));
|
|
7875
7983
|
}
|
|
7876
7984
|
);
|
|
7877
7985
|
|
|
7878
7986
|
// src/components/promotions/display-conditions-control.tsx
|
|
7879
|
-
var ARIA_LABEL = (0,
|
|
7987
|
+
var ARIA_LABEL = (0, import_i18n55.__)("Display Conditions", "elementor");
|
|
7880
7988
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
7881
7989
|
var DisplayConditionsControl = createControl(() => {
|
|
7882
7990
|
const triggerRef = (0, import_react68.useRef)(null);
|
|
7883
|
-
return /* @__PURE__ */
|
|
7884
|
-
|
|
7991
|
+
return /* @__PURE__ */ React113.createElement(
|
|
7992
|
+
import_ui97.Stack,
|
|
7885
7993
|
{
|
|
7886
7994
|
direction: "row",
|
|
7887
7995
|
spacing: 2,
|
|
@@ -7890,9 +7998,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
7890
7998
|
alignItems: "center"
|
|
7891
7999
|
}
|
|
7892
8000
|
},
|
|
7893
|
-
/* @__PURE__ */
|
|
7894
|
-
/* @__PURE__ */
|
|
7895
|
-
|
|
8001
|
+
/* @__PURE__ */ React113.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
8002
|
+
/* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React113.createElement(
|
|
8003
|
+
import_ui97.IconButton,
|
|
7896
8004
|
{
|
|
7897
8005
|
size: "tiny",
|
|
7898
8006
|
"aria-label": ARIA_LABEL,
|
|
@@ -7904,23 +8012,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
7904
8012
|
borderRadius: 1
|
|
7905
8013
|
}
|
|
7906
8014
|
},
|
|
7907
|
-
/* @__PURE__ */
|
|
8015
|
+
/* @__PURE__ */ React113.createElement(import_icons36.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
7908
8016
|
))
|
|
7909
8017
|
);
|
|
7910
8018
|
});
|
|
7911
8019
|
|
|
7912
8020
|
// src/components/promotions/attributes-control.tsx
|
|
7913
|
-
var
|
|
8021
|
+
var React114 = __toESM(require("react"));
|
|
7914
8022
|
var import_react69 = require("react");
|
|
7915
8023
|
var import_icons37 = require("@elementor/icons");
|
|
7916
|
-
var
|
|
7917
|
-
var
|
|
7918
|
-
var ARIA_LABEL2 = (0,
|
|
8024
|
+
var import_ui98 = require("@elementor/ui");
|
|
8025
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
8026
|
+
var ARIA_LABEL2 = (0, import_i18n56.__)("Attributes", "elementor");
|
|
7919
8027
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
7920
8028
|
var AttributesControl = createControl(() => {
|
|
7921
8029
|
const triggerRef = (0, import_react69.useRef)(null);
|
|
7922
|
-
return /* @__PURE__ */
|
|
7923
|
-
|
|
8030
|
+
return /* @__PURE__ */ React114.createElement(
|
|
8031
|
+
import_ui98.Stack,
|
|
7924
8032
|
{
|
|
7925
8033
|
direction: "row",
|
|
7926
8034
|
spacing: 2,
|
|
@@ -7929,8 +8037,8 @@ var AttributesControl = createControl(() => {
|
|
|
7929
8037
|
alignItems: "center"
|
|
7930
8038
|
}
|
|
7931
8039
|
},
|
|
7932
|
-
/* @__PURE__ */
|
|
7933
|
-
/* @__PURE__ */
|
|
8040
|
+
/* @__PURE__ */ React114.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
8041
|
+
/* @__PURE__ */ React114.createElement(import_ui98.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React114.createElement(
|
|
7934
8042
|
import_icons37.PlusIcon,
|
|
7935
8043
|
{
|
|
7936
8044
|
"aria-label": ARIA_LABEL2,
|
|
@@ -7944,21 +8052,21 @@ var AttributesControl = createControl(() => {
|
|
|
7944
8052
|
});
|
|
7945
8053
|
|
|
7946
8054
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
7947
|
-
var
|
|
8055
|
+
var React115 = __toESM(require("react"));
|
|
7948
8056
|
var import_icons38 = require("@elementor/icons");
|
|
7949
|
-
var
|
|
7950
|
-
var CustomIconButton = (0,
|
|
8057
|
+
var import_ui99 = require("@elementor/ui");
|
|
8058
|
+
var CustomIconButton = (0, import_ui99.styled)(import_ui99.IconButton)(({ theme }) => ({
|
|
7951
8059
|
width: theme.spacing(2.5),
|
|
7952
8060
|
height: theme.spacing(2.5)
|
|
7953
8061
|
}));
|
|
7954
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
8062
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React115.createElement(import_ui99.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React115.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React115.createElement(import_icons38.BrushBigIcon, { fontSize: size })));
|
|
7955
8063
|
|
|
7956
8064
|
// src/components/repeater/repeater.tsx
|
|
7957
|
-
var
|
|
8065
|
+
var React116 = __toESM(require("react"));
|
|
7958
8066
|
var import_react70 = require("react");
|
|
7959
8067
|
var import_icons39 = require("@elementor/icons");
|
|
7960
|
-
var
|
|
7961
|
-
var
|
|
8068
|
+
var import_ui100 = require("@elementor/ui");
|
|
8069
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
7962
8070
|
var SIZE11 = "tiny";
|
|
7963
8071
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
7964
8072
|
var Repeater3 = ({
|
|
@@ -8039,8 +8147,8 @@ var Repeater3 = ({
|
|
|
8039
8147
|
};
|
|
8040
8148
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8041
8149
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8042
|
-
const addButton = /* @__PURE__ */
|
|
8043
|
-
|
|
8150
|
+
const addButton = /* @__PURE__ */ React116.createElement(
|
|
8151
|
+
import_ui100.IconButton,
|
|
8044
8152
|
{
|
|
8045
8153
|
size: SIZE11,
|
|
8046
8154
|
sx: {
|
|
@@ -8048,32 +8156,32 @@ var Repeater3 = ({
|
|
|
8048
8156
|
},
|
|
8049
8157
|
disabled: isButtonDisabled,
|
|
8050
8158
|
onClick: addRepeaterItem,
|
|
8051
|
-
"aria-label": (0,
|
|
8159
|
+
"aria-label": (0, import_i18n57.__)("Add item", "elementor")
|
|
8052
8160
|
},
|
|
8053
|
-
/* @__PURE__ */
|
|
8161
|
+
/* @__PURE__ */ React116.createElement(import_icons39.PlusIcon, { fontSize: SIZE11 })
|
|
8054
8162
|
);
|
|
8055
|
-
return /* @__PURE__ */
|
|
8056
|
-
|
|
8163
|
+
return /* @__PURE__ */ React116.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React116.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React116.createElement(
|
|
8164
|
+
import_ui100.Infotip,
|
|
8057
8165
|
{
|
|
8058
8166
|
placement: "right",
|
|
8059
8167
|
content: addButtonInfotipContent,
|
|
8060
8168
|
color: "secondary",
|
|
8061
8169
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8062
8170
|
},
|
|
8063
|
-
/* @__PURE__ */
|
|
8064
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
8171
|
+
/* @__PURE__ */ React116.createElement(import_ui100.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
8172
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React116.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8065
8173
|
const index = uniqueKeys.indexOf(key);
|
|
8066
8174
|
const value = items2[index];
|
|
8067
8175
|
if (!value) {
|
|
8068
8176
|
return null;
|
|
8069
8177
|
}
|
|
8070
|
-
return /* @__PURE__ */
|
|
8178
|
+
return /* @__PURE__ */ React116.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React116.createElement(
|
|
8071
8179
|
RepeaterItem,
|
|
8072
8180
|
{
|
|
8073
8181
|
disabled,
|
|
8074
8182
|
propDisabled: value?.disabled,
|
|
8075
|
-
label: /* @__PURE__ */
|
|
8076
|
-
startIcon: /* @__PURE__ */
|
|
8183
|
+
label: /* @__PURE__ */ React116.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React116.createElement(itemSettings.Label, { value, index })),
|
|
8184
|
+
startIcon: /* @__PURE__ */ React116.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React116.createElement(itemSettings.Icon, { value })),
|
|
8077
8185
|
removeItem: () => removeRepeaterItem(index),
|
|
8078
8186
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8079
8187
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8087,7 +8195,7 @@ var Repeater3 = ({
|
|
|
8087
8195
|
actions: itemSettings.actions,
|
|
8088
8196
|
value
|
|
8089
8197
|
},
|
|
8090
|
-
(props) => /* @__PURE__ */
|
|
8198
|
+
(props) => /* @__PURE__ */ React116.createElement(
|
|
8091
8199
|
itemSettings.Content,
|
|
8092
8200
|
{
|
|
8093
8201
|
...props,
|
|
@@ -8127,18 +8235,18 @@ var RepeaterItem = ({
|
|
|
8127
8235
|
},
|
|
8128
8236
|
wrappedOnPopoverClose
|
|
8129
8237
|
);
|
|
8130
|
-
const triggerProps = (0,
|
|
8238
|
+
const triggerProps = (0, import_ui100.bindTrigger)(popoverState);
|
|
8131
8239
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8132
|
-
const duplicateLabel = (0,
|
|
8133
|
-
const toggleLabel = propDisabled ? (0,
|
|
8134
|
-
const removeLabel = (0,
|
|
8135
|
-
return /* @__PURE__ */
|
|
8240
|
+
const duplicateLabel = (0, import_i18n57.__)("Duplicate", "elementor");
|
|
8241
|
+
const toggleLabel = propDisabled ? (0, import_i18n57.__)("Show", "elementor") : (0, import_i18n57.__)("Hide", "elementor");
|
|
8242
|
+
const removeLabel = (0, import_i18n57.__)("Remove", "elementor");
|
|
8243
|
+
return /* @__PURE__ */ React116.createElement(import_ui100.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React116.createElement(
|
|
8136
8244
|
RepeaterTag,
|
|
8137
8245
|
{
|
|
8138
8246
|
disabled,
|
|
8139
8247
|
label,
|
|
8140
8248
|
ref: setRef,
|
|
8141
|
-
"aria-label": (0,
|
|
8249
|
+
"aria-label": (0, import_i18n57.__)("Open item", "elementor"),
|
|
8142
8250
|
...triggerProps,
|
|
8143
8251
|
onClick: (e) => {
|
|
8144
8252
|
triggerProps.onClick(e);
|
|
@@ -8147,14 +8255,14 @@ var RepeaterItem = ({
|
|
|
8147
8255
|
}
|
|
8148
8256
|
},
|
|
8149
8257
|
startIcon,
|
|
8150
|
-
actions: /* @__PURE__ */
|
|
8258
|
+
actions: /* @__PURE__ */ React116.createElement(React116.Fragment, null, showDuplicate && /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { size: SIZE11, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React116.createElement(import_icons39.CopyIcon, { fontSize: SIZE11 }))), showToggle && /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { size: SIZE11, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React116.createElement(import_icons39.EyeOffIcon, { fontSize: SIZE11 }) : /* @__PURE__ */ React116.createElement(import_icons39.EyeIcon, { fontSize: SIZE11 }))), actions?.(value), showRemove && /* @__PURE__ */ React116.createElement(import_ui100.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React116.createElement(import_ui100.IconButton, { size: SIZE11, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React116.createElement(import_icons39.XIcon, { fontSize: SIZE11 }))))
|
|
8151
8259
|
}
|
|
8152
|
-
), /* @__PURE__ */
|
|
8260
|
+
), /* @__PURE__ */ React116.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React116.createElement(import_ui100.Box, null, children({ anchorEl: ref }))));
|
|
8153
8261
|
};
|
|
8154
8262
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8155
8263
|
const [ref, setRef] = (0, import_react70.useState)(null);
|
|
8156
|
-
const popoverState = (0,
|
|
8157
|
-
const popoverProps = (0,
|
|
8264
|
+
const popoverState = (0, import_ui100.usePopupState)({ variant: "popover" });
|
|
8265
|
+
const popoverProps = (0, import_ui100.bindPopover)(popoverState);
|
|
8158
8266
|
(0, import_react70.useEffect)(() => {
|
|
8159
8267
|
if (openOnMount && ref) {
|
|
8160
8268
|
popoverState.open(ref);
|
|
@@ -8174,20 +8282,20 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8174
8282
|
};
|
|
8175
8283
|
|
|
8176
8284
|
// src/components/inline-editor-toolbar.tsx
|
|
8177
|
-
var
|
|
8285
|
+
var React118 = __toESM(require("react"));
|
|
8178
8286
|
var import_react72 = require("react");
|
|
8179
8287
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8180
8288
|
var import_icons41 = require("@elementor/icons");
|
|
8181
|
-
var
|
|
8289
|
+
var import_ui102 = require("@elementor/ui");
|
|
8182
8290
|
var import_react73 = require("@tiptap/react");
|
|
8183
|
-
var
|
|
8291
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8184
8292
|
|
|
8185
8293
|
// src/components/url-popover.tsx
|
|
8186
|
-
var
|
|
8294
|
+
var React117 = __toESM(require("react"));
|
|
8187
8295
|
var import_react71 = require("react");
|
|
8188
8296
|
var import_icons40 = require("@elementor/icons");
|
|
8189
|
-
var
|
|
8190
|
-
var
|
|
8297
|
+
var import_ui101 = require("@elementor/ui");
|
|
8298
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
8191
8299
|
var UrlPopover = ({
|
|
8192
8300
|
popupState,
|
|
8193
8301
|
restoreValue,
|
|
@@ -8207,41 +8315,41 @@ var UrlPopover = ({
|
|
|
8207
8315
|
restoreValue();
|
|
8208
8316
|
popupState.close();
|
|
8209
8317
|
};
|
|
8210
|
-
return /* @__PURE__ */
|
|
8211
|
-
|
|
8318
|
+
return /* @__PURE__ */ React117.createElement(
|
|
8319
|
+
import_ui101.Popover,
|
|
8212
8320
|
{
|
|
8213
8321
|
slotProps: {
|
|
8214
8322
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8215
8323
|
},
|
|
8216
|
-
...(0,
|
|
8324
|
+
...(0, import_ui101.bindPopover)(popupState),
|
|
8217
8325
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8218
8326
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8219
8327
|
onClose: handleClose
|
|
8220
8328
|
},
|
|
8221
|
-
/* @__PURE__ */
|
|
8222
|
-
|
|
8329
|
+
/* @__PURE__ */ React117.createElement(import_ui101.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React117.createElement(
|
|
8330
|
+
import_ui101.TextField,
|
|
8223
8331
|
{
|
|
8224
8332
|
value,
|
|
8225
8333
|
onChange,
|
|
8226
8334
|
size: "tiny",
|
|
8227
8335
|
fullWidth: true,
|
|
8228
|
-
placeholder: (0,
|
|
8336
|
+
placeholder: (0, import_i18n58.__)("Type a URL", "elementor"),
|
|
8229
8337
|
inputProps: { ref: inputRef },
|
|
8230
8338
|
color: "secondary",
|
|
8231
8339
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
8232
8340
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8233
8341
|
}
|
|
8234
|
-
), /* @__PURE__ */
|
|
8235
|
-
|
|
8342
|
+
), /* @__PURE__ */ React117.createElement(import_ui101.Tooltip, { title: (0, import_i18n58.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React117.createElement(
|
|
8343
|
+
import_ui101.ToggleButton,
|
|
8236
8344
|
{
|
|
8237
8345
|
size: "tiny",
|
|
8238
8346
|
value: "newTab",
|
|
8239
8347
|
selected: openInNewTab,
|
|
8240
8348
|
onClick: onToggleNewTab,
|
|
8241
|
-
"aria-label": (0,
|
|
8349
|
+
"aria-label": (0, import_i18n58.__)("Open in a new tab", "elementor"),
|
|
8242
8350
|
sx: { borderRadius: "8px" }
|
|
8243
8351
|
},
|
|
8244
|
-
/* @__PURE__ */
|
|
8352
|
+
/* @__PURE__ */ React117.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8245
8353
|
)))
|
|
8246
8354
|
);
|
|
8247
8355
|
};
|
|
@@ -8251,7 +8359,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8251
8359
|
const [urlValue, setUrlValue] = (0, import_react72.useState)("");
|
|
8252
8360
|
const [openInNewTab, setOpenInNewTab] = (0, import_react72.useState)(false);
|
|
8253
8361
|
const toolbarRef = (0, import_react72.useRef)(null);
|
|
8254
|
-
const linkPopupState = (0,
|
|
8362
|
+
const linkPopupState = (0, import_ui102.usePopupState)({ variant: "popover" });
|
|
8255
8363
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8256
8364
|
const editorState = (0, import_react73.useEditorState)({
|
|
8257
8365
|
editor,
|
|
@@ -8297,8 +8405,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8297
8405
|
(0, import_react72.useEffect)(() => {
|
|
8298
8406
|
editor?.commands?.focus();
|
|
8299
8407
|
}, [editor]);
|
|
8300
|
-
return /* @__PURE__ */
|
|
8301
|
-
|
|
8408
|
+
return /* @__PURE__ */ React118.createElement(
|
|
8409
|
+
import_ui102.Box,
|
|
8302
8410
|
{
|
|
8303
8411
|
ref: toolbarRef,
|
|
8304
8412
|
sx: {
|
|
@@ -8314,9 +8422,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8314
8422
|
...sx
|
|
8315
8423
|
}
|
|
8316
8424
|
},
|
|
8317
|
-
/* @__PURE__ */
|
|
8318
|
-
/* @__PURE__ */
|
|
8319
|
-
|
|
8425
|
+
/* @__PURE__ */ React118.createElement(import_ui102.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React118.createElement(import_ui102.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8426
|
+
/* @__PURE__ */ React118.createElement(
|
|
8427
|
+
import_ui102.ToggleButtonGroup,
|
|
8320
8428
|
{
|
|
8321
8429
|
value: editorState,
|
|
8322
8430
|
size: "tiny",
|
|
@@ -8324,7 +8432,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8324
8432
|
display: "flex",
|
|
8325
8433
|
gap: 0.5,
|
|
8326
8434
|
border: "none",
|
|
8327
|
-
[`& .${
|
|
8435
|
+
[`& .${import_ui102.toggleButtonGroupClasses.firstButton}, & .${import_ui102.toggleButtonGroupClasses.middleButton}, & .${import_ui102.toggleButtonGroupClasses.lastButton}`]: {
|
|
8328
8436
|
borderRadius: "8px",
|
|
8329
8437
|
border: "none",
|
|
8330
8438
|
marginLeft: 0,
|
|
@@ -8337,8 +8445,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8337
8445
|
}
|
|
8338
8446
|
}
|
|
8339
8447
|
},
|
|
8340
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
8341
|
-
|
|
8448
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React118.createElement(import_ui102.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React118.createElement(
|
|
8449
|
+
import_ui102.ToggleButton,
|
|
8342
8450
|
{
|
|
8343
8451
|
value: button.action,
|
|
8344
8452
|
"aria-label": button.label,
|
|
@@ -8355,7 +8463,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8355
8463
|
button.icon
|
|
8356
8464
|
)))
|
|
8357
8465
|
),
|
|
8358
|
-
/* @__PURE__ */
|
|
8466
|
+
/* @__PURE__ */ React118.createElement(
|
|
8359
8467
|
UrlPopover,
|
|
8360
8468
|
{
|
|
8361
8469
|
popupState: linkPopupState,
|
|
@@ -8378,64 +8486,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
8378
8486
|
};
|
|
8379
8487
|
var toolbarButtons = {
|
|
8380
8488
|
clear: {
|
|
8381
|
-
label: (0,
|
|
8382
|
-
icon: /* @__PURE__ */
|
|
8489
|
+
label: (0, import_i18n59.__)("Clear", "elementor"),
|
|
8490
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
|
|
8383
8491
|
action: "clear",
|
|
8384
8492
|
method: (editor) => {
|
|
8385
8493
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8386
8494
|
}
|
|
8387
8495
|
},
|
|
8388
8496
|
bold: {
|
|
8389
|
-
label: (0,
|
|
8390
|
-
icon: /* @__PURE__ */
|
|
8497
|
+
label: (0, import_i18n59.__)("Bold", "elementor"),
|
|
8498
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
|
|
8391
8499
|
action: "bold",
|
|
8392
8500
|
method: (editor) => {
|
|
8393
8501
|
editor.chain().focus().toggleBold().run();
|
|
8394
8502
|
}
|
|
8395
8503
|
},
|
|
8396
8504
|
italic: {
|
|
8397
|
-
label: (0,
|
|
8398
|
-
icon: /* @__PURE__ */
|
|
8505
|
+
label: (0, import_i18n59.__)("Italic", "elementor"),
|
|
8506
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
|
|
8399
8507
|
action: "italic",
|
|
8400
8508
|
method: (editor) => {
|
|
8401
8509
|
editor.chain().focus().toggleItalic().run();
|
|
8402
8510
|
}
|
|
8403
8511
|
},
|
|
8404
8512
|
underline: {
|
|
8405
|
-
label: (0,
|
|
8406
|
-
icon: /* @__PURE__ */
|
|
8513
|
+
label: (0, import_i18n59.__)("Underline", "elementor"),
|
|
8514
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
|
|
8407
8515
|
action: "underline",
|
|
8408
8516
|
method: (editor) => {
|
|
8409
8517
|
editor.chain().focus().toggleUnderline().run();
|
|
8410
8518
|
}
|
|
8411
8519
|
},
|
|
8412
8520
|
strike: {
|
|
8413
|
-
label: (0,
|
|
8414
|
-
icon: /* @__PURE__ */
|
|
8521
|
+
label: (0, import_i18n59.__)("Strikethrough", "elementor"),
|
|
8522
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
|
|
8415
8523
|
action: "strike",
|
|
8416
8524
|
method: (editor) => {
|
|
8417
8525
|
editor.chain().focus().toggleStrike().run();
|
|
8418
8526
|
}
|
|
8419
8527
|
},
|
|
8420
8528
|
superscript: {
|
|
8421
|
-
label: (0,
|
|
8422
|
-
icon: /* @__PURE__ */
|
|
8529
|
+
label: (0, import_i18n59.__)("Superscript", "elementor"),
|
|
8530
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
|
|
8423
8531
|
action: "superscript",
|
|
8424
8532
|
method: (editor) => {
|
|
8425
8533
|
editor.chain().focus().toggleSuperscript().run();
|
|
8426
8534
|
}
|
|
8427
8535
|
},
|
|
8428
8536
|
subscript: {
|
|
8429
|
-
label: (0,
|
|
8430
|
-
icon: /* @__PURE__ */
|
|
8537
|
+
label: (0, import_i18n59.__)("Subscript", "elementor"),
|
|
8538
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
|
|
8431
8539
|
action: "subscript",
|
|
8432
8540
|
method: (editor) => {
|
|
8433
8541
|
editor.chain().focus().toggleSubscript().run();
|
|
8434
8542
|
}
|
|
8435
8543
|
},
|
|
8436
8544
|
link: {
|
|
8437
|
-
label: (0,
|
|
8438
|
-
icon: /* @__PURE__ */
|
|
8545
|
+
label: (0, import_i18n59.__)("Link", "elementor"),
|
|
8546
|
+
icon: /* @__PURE__ */ React118.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
|
|
8439
8547
|
action: "link",
|
|
8440
8548
|
method: null
|
|
8441
8549
|
}
|
|
@@ -8444,8 +8552,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
|
8444
8552
|
var possibleFormats = Object.keys(formatButtons);
|
|
8445
8553
|
|
|
8446
8554
|
// src/components/size/unstable-size-field.tsx
|
|
8447
|
-
var
|
|
8448
|
-
var
|
|
8555
|
+
var React121 = __toESM(require("react"));
|
|
8556
|
+
var import_ui104 = require("@elementor/ui");
|
|
8449
8557
|
|
|
8450
8558
|
// src/hooks/use-size-value.ts
|
|
8451
8559
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -8487,17 +8595,17 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
8487
8595
|
};
|
|
8488
8596
|
|
|
8489
8597
|
// src/components/size/unit-select.tsx
|
|
8490
|
-
var
|
|
8598
|
+
var React119 = __toESM(require("react"));
|
|
8491
8599
|
var import_react74 = require("react");
|
|
8492
8600
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
8493
|
-
var
|
|
8601
|
+
var import_ui103 = require("@elementor/ui");
|
|
8494
8602
|
var menuItemContentStyles2 = {
|
|
8495
8603
|
display: "flex",
|
|
8496
8604
|
flexDirection: "column",
|
|
8497
8605
|
justifyContent: "center"
|
|
8498
8606
|
};
|
|
8499
8607
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
8500
|
-
const popupState = (0,
|
|
8608
|
+
const popupState = (0, import_ui103.usePopupState)({
|
|
8501
8609
|
variant: "popover",
|
|
8502
8610
|
popupId: (0, import_react74.useId)()
|
|
8503
8611
|
});
|
|
@@ -8505,7 +8613,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
8505
8613
|
onClick(options[index]);
|
|
8506
8614
|
popupState.close();
|
|
8507
8615
|
};
|
|
8508
|
-
return /* @__PURE__ */
|
|
8616
|
+
return /* @__PURE__ */ React119.createElement(React119.Fragment, null, /* @__PURE__ */ React119.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui103.bindTrigger)(popupState) }, value), /* @__PURE__ */ React119.createElement(import_ui103.Menu, { MenuListProps: { dense: true }, ...(0, import_ui103.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React119.createElement(
|
|
8509
8617
|
import_editor_ui17.MenuListItem,
|
|
8510
8618
|
{
|
|
8511
8619
|
key: option,
|
|
@@ -8524,7 +8632,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
8524
8632
|
option.toUpperCase()
|
|
8525
8633
|
))));
|
|
8526
8634
|
};
|
|
8527
|
-
var StyledButton3 = (0,
|
|
8635
|
+
var StyledButton3 = (0, import_ui103.styled)(import_ui103.Button, {
|
|
8528
8636
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
8529
8637
|
})(({ isPrimaryColor, theme }) => ({
|
|
8530
8638
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -8534,11 +8642,11 @@ var StyledButton3 = (0, import_ui101.styled)(import_ui101.Button, {
|
|
|
8534
8642
|
}));
|
|
8535
8643
|
|
|
8536
8644
|
// src/components/size/unstable-size-input.tsx
|
|
8537
|
-
var
|
|
8645
|
+
var React120 = __toESM(require("react"));
|
|
8538
8646
|
var import_react75 = require("react");
|
|
8539
8647
|
var UnstableSizeInput = (0, import_react75.forwardRef)(
|
|
8540
8648
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
8541
|
-
return /* @__PURE__ */
|
|
8649
|
+
return /* @__PURE__ */ React120.createElement(
|
|
8542
8650
|
NumberInput,
|
|
8543
8651
|
{
|
|
8544
8652
|
ref,
|
|
@@ -8576,7 +8684,7 @@ var UnstableSizeField = ({
|
|
|
8576
8684
|
const shouldHighlightUnit2 = () => {
|
|
8577
8685
|
return hasValue(size);
|
|
8578
8686
|
};
|
|
8579
|
-
return /* @__PURE__ */
|
|
8687
|
+
return /* @__PURE__ */ React121.createElement(
|
|
8580
8688
|
UnstableSizeInput,
|
|
8581
8689
|
{
|
|
8582
8690
|
type: "number",
|
|
@@ -8585,8 +8693,8 @@ var UnstableSizeField = ({
|
|
|
8585
8693
|
onChange: (event) => setSize(event.target.value),
|
|
8586
8694
|
InputProps: {
|
|
8587
8695
|
...InputProps,
|
|
8588
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
8589
|
-
endAdornment: /* @__PURE__ */
|
|
8696
|
+
startAdornment: startIcon && /* @__PURE__ */ React121.createElement(import_ui104.InputAdornment, { position: "start" }, startIcon),
|
|
8697
|
+
endAdornment: /* @__PURE__ */ React121.createElement(import_ui104.InputAdornment, { position: "end" }, /* @__PURE__ */ React121.createElement(
|
|
8590
8698
|
UnitSelect,
|
|
8591
8699
|
{
|
|
8592
8700
|
options: units2,
|
|
@@ -8649,6 +8757,7 @@ var useFontFamilies = () => {
|
|
|
8649
8757
|
ControlFormLabel,
|
|
8650
8758
|
ControlReplacementsProvider,
|
|
8651
8759
|
ControlToggleButtonGroup,
|
|
8760
|
+
DateRangeControl,
|
|
8652
8761
|
DateTimeControl,
|
|
8653
8762
|
DisplayConditionsControl,
|
|
8654
8763
|
EmailFormActionControl,
|