@elementor/editor-controls 4.2.0-868 → 4.2.0-870
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 +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +283 -187
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +231 -135
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -15
- package/src/controls/chips-control.tsx +16 -9
- package/src/controls/email-form-action-control/email-chips-field.tsx +104 -0
- package/src/controls/email-form-action-control/email-field.tsx +25 -0
- package/src/controls/email-form-action-control/fields.tsx +138 -0
- package/src/controls/email-form-action-control/index.tsx +60 -0
- package/src/controls/email-form-action-control/utils.ts +24 -0
- package/src/controls/email-form-action-control.tsx +0 -194
package/dist/index.js
CHANGED
|
@@ -2618,31 +2618,37 @@ function ChipsList({ getLabel, getTagProps, values }) {
|
|
|
2618
2618
|
|
|
2619
2619
|
// src/controls/chips-control.tsx
|
|
2620
2620
|
var SIZE6 = "tiny";
|
|
2621
|
-
var
|
|
2621
|
+
var toChipsOption = (val, options) => options.find((opt) => opt.value === val) ?? { label: val, value: val };
|
|
2622
|
+
var ChipsControl = createControl(({ options, freeChips }) => {
|
|
2622
2623
|
const { value, setValue, disabled } = useBoundProp(import_editor_props17.stringArrayPropTypeUtil);
|
|
2623
2624
|
const selectedValues = (value || []).map((item) => import_editor_props17.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
2624
|
-
const selectedOptions = selectedValues.map((val) =>
|
|
2625
|
+
const selectedOptions = selectedValues.map((val) => toChipsOption(val, options));
|
|
2625
2626
|
const handleChange = (_, newValue) => {
|
|
2626
|
-
|
|
2627
|
-
|
|
2627
|
+
setValue(
|
|
2628
|
+
newValue.map(
|
|
2629
|
+
(option) => import_editor_props17.stringPropTypeUtil.create(typeof option === "string" ? option : option.value)
|
|
2630
|
+
)
|
|
2631
|
+
);
|
|
2628
2632
|
};
|
|
2629
2633
|
return /* @__PURE__ */ React52.createElement(ControlActions, null, /* @__PURE__ */ React52.createElement(
|
|
2630
2634
|
import_ui39.Autocomplete,
|
|
2631
2635
|
{
|
|
2632
2636
|
fullWidth: true,
|
|
2633
2637
|
multiple: true,
|
|
2638
|
+
freeSolo: freeChips,
|
|
2634
2639
|
size: SIZE6,
|
|
2635
2640
|
disabled,
|
|
2636
2641
|
value: selectedOptions,
|
|
2642
|
+
filterSelectedOptions: true,
|
|
2637
2643
|
onChange: handleChange,
|
|
2638
2644
|
options,
|
|
2639
|
-
getOptionLabel: (option) => option.label,
|
|
2645
|
+
getOptionLabel: (option) => typeof option === "string" ? option : option.label,
|
|
2640
2646
|
isOptionEqualToValue: (option, val) => option.value === val.value,
|
|
2641
2647
|
renderInput: (params) => /* @__PURE__ */ React52.createElement(import_ui39.TextField, { ...params }),
|
|
2642
2648
|
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React52.createElement(
|
|
2643
2649
|
ChipsList,
|
|
2644
2650
|
{
|
|
2645
|
-
getLabel: (option) => option.label,
|
|
2651
|
+
getLabel: (option) => typeof option === "string" ? option : option.label,
|
|
2646
2652
|
getTagProps,
|
|
2647
2653
|
values: tagValues
|
|
2648
2654
|
}
|
|
@@ -8112,12 +8118,17 @@ var InlineEditingControl = createControl(
|
|
|
8112
8118
|
}
|
|
8113
8119
|
);
|
|
8114
8120
|
|
|
8115
|
-
// src/controls/email-form-action-control.tsx
|
|
8116
|
-
var
|
|
8117
|
-
var
|
|
8121
|
+
// src/controls/email-form-action-control/index.tsx
|
|
8122
|
+
var React119 = __toESM(require("react"));
|
|
8123
|
+
var import_editor_props66 = require("@elementor/editor-props");
|
|
8124
|
+
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
8125
|
+
var import_ui103 = require("@elementor/ui");
|
|
8126
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
8127
|
+
|
|
8128
|
+
// src/controls/email-form-action-control/fields.tsx
|
|
8129
|
+
var React118 = __toESM(require("react"));
|
|
8118
8130
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8119
|
-
var
|
|
8120
|
-
var import_utils9 = require("@elementor/utils");
|
|
8131
|
+
var import_ui102 = require("@elementor/ui");
|
|
8121
8132
|
var import_i18n57 = require("@wordpress/i18n");
|
|
8122
8133
|
|
|
8123
8134
|
// src/hooks/use-form-field-suggestions.ts
|
|
@@ -8176,18 +8187,20 @@ function useFormFieldSuggestions(options) {
|
|
|
8176
8187
|
);
|
|
8177
8188
|
}
|
|
8178
8189
|
|
|
8179
|
-
// src/controls/email-form-action-control.tsx
|
|
8180
|
-
var
|
|
8181
|
-
var
|
|
8182
|
-
var
|
|
8183
|
-
|
|
8184
|
-
|
|
8185
|
-
|
|
8186
|
-
|
|
8187
|
-
|
|
8188
|
-
}
|
|
8189
|
-
);
|
|
8190
|
+
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8191
|
+
var React116 = __toESM(require("react"));
|
|
8192
|
+
var import_react69 = require("react");
|
|
8193
|
+
var import_editor_props65 = require("@elementor/editor-props");
|
|
8194
|
+
var import_ui100 = require("@elementor/ui");
|
|
8195
|
+
|
|
8196
|
+
// src/controls/email-form-action-control/utils.ts
|
|
8197
|
+
var import_schema = require("@elementor/schema");
|
|
8198
|
+
var import_utils9 = require("@elementor/utils");
|
|
8190
8199
|
var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
|
|
8200
|
+
var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
|
|
8201
|
+
function isValidEmail(email) {
|
|
8202
|
+
return import_schema.z.string().email().safeParse(email).success;
|
|
8203
|
+
}
|
|
8191
8204
|
var shouldShowMentionsInfo = () => {
|
|
8192
8205
|
if (!(0, import_utils9.hasProInstalled)()) {
|
|
8193
8206
|
return true;
|
|
@@ -8198,14 +8211,93 @@ var shouldShowMentionsInfo = () => {
|
|
|
8198
8211
|
}
|
|
8199
8212
|
return (0, import_utils9.isVersionGreaterOrEqual)(proVersion, MIN_PRO_VERSION_FOR_MENTIONS);
|
|
8200
8213
|
};
|
|
8214
|
+
|
|
8215
|
+
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
8216
|
+
var EmailChipsField = ({ fieldLabel, placeholder }) => {
|
|
8217
|
+
const { value, setValue, disabled } = useBoundProp(import_editor_props65.stringArrayPropTypeUtil);
|
|
8218
|
+
const [inputValue, setInputValue] = (0, import_react69.useState)("");
|
|
8219
|
+
const items2 = value || [];
|
|
8220
|
+
const selectedValues = items2.map((item) => import_editor_props65.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
8221
|
+
const tryAddChip = (raw) => {
|
|
8222
|
+
const address = raw.trim();
|
|
8223
|
+
if (!address || selectedValues.includes(address) || !isValidEmail(address)) {
|
|
8224
|
+
return;
|
|
8225
|
+
}
|
|
8226
|
+
setValue([...items2, import_editor_props65.stringPropTypeUtil.create(address)]);
|
|
8227
|
+
setInputValue("");
|
|
8228
|
+
};
|
|
8229
|
+
const handleChange = (_, newValue) => {
|
|
8230
|
+
const updated = [];
|
|
8231
|
+
for (const entry of newValue) {
|
|
8232
|
+
const address = entry.trim();
|
|
8233
|
+
if (!address || !isValidEmail(address)) {
|
|
8234
|
+
continue;
|
|
8235
|
+
}
|
|
8236
|
+
updated.push(import_editor_props65.stringPropTypeUtil.create(address));
|
|
8237
|
+
}
|
|
8238
|
+
setValue(updated);
|
|
8239
|
+
setInputValue("");
|
|
8240
|
+
};
|
|
8241
|
+
const handleBlur = (event) => {
|
|
8242
|
+
const target = event.target;
|
|
8243
|
+
tryAddChip(target.value);
|
|
8244
|
+
setInputValue("");
|
|
8245
|
+
};
|
|
8246
|
+
const handleKeyDown = (event) => {
|
|
8247
|
+
if (CHIP_TRIGGER_KEYS.has(event.key) && inputValue.trim()) {
|
|
8248
|
+
event.preventDefault();
|
|
8249
|
+
tryAddChip(inputValue);
|
|
8250
|
+
}
|
|
8251
|
+
};
|
|
8252
|
+
return /* @__PURE__ */ React116.createElement(import_ui100.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(import_ui100.Grid, { item: true }, /* @__PURE__ */ React116.createElement(
|
|
8253
|
+
import_ui100.Autocomplete,
|
|
8254
|
+
{
|
|
8255
|
+
fullWidth: true,
|
|
8256
|
+
multiple: true,
|
|
8257
|
+
freeSolo: true,
|
|
8258
|
+
size: "tiny",
|
|
8259
|
+
disabled,
|
|
8260
|
+
inputValue,
|
|
8261
|
+
onInputChange: (_, val, reason) => {
|
|
8262
|
+
if (reason !== "reset") {
|
|
8263
|
+
setInputValue(val);
|
|
8264
|
+
}
|
|
8265
|
+
},
|
|
8266
|
+
value: selectedValues,
|
|
8267
|
+
onChange: handleChange,
|
|
8268
|
+
options: [],
|
|
8269
|
+
onBlur: handleBlur,
|
|
8270
|
+
getOptionLabel: (option) => option,
|
|
8271
|
+
isOptionEqualToValue: (option, val) => option === val,
|
|
8272
|
+
renderInput: (params) => /* @__PURE__ */ React116.createElement(import_ui100.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
8273
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React116.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
8274
|
+
}
|
|
8275
|
+
)));
|
|
8276
|
+
};
|
|
8277
|
+
|
|
8278
|
+
// src/controls/email-form-action-control/email-field.tsx
|
|
8279
|
+
var React117 = __toESM(require("react"));
|
|
8280
|
+
var import_ui101 = require("@elementor/ui");
|
|
8281
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(import_ui101.Grid, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
|
|
8282
|
+
|
|
8283
|
+
// src/controls/email-form-action-control/fields.tsx
|
|
8284
|
+
var SendToField = ({ placeholder }) => /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Send to", "elementor"), placeholder });
|
|
8285
|
+
var SubjectField = () => /* @__PURE__ */ React118.createElement(
|
|
8286
|
+
EmailField,
|
|
8287
|
+
{
|
|
8288
|
+
bind: "subject",
|
|
8289
|
+
label: (0, import_i18n57.__)("Email subject", "elementor"),
|
|
8290
|
+
placeholder: (0, import_i18n57.__)("New form submission", "elementor")
|
|
8291
|
+
}
|
|
8292
|
+
);
|
|
8201
8293
|
var MessageField = () => {
|
|
8202
8294
|
const suggestions = useFormFieldSuggestions();
|
|
8203
|
-
return /* @__PURE__ */
|
|
8295
|
+
return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Message", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(import_editor_ui15.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n57.__)(
|
|
8204
8296
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
8205
8297
|
"elementor"
|
|
8206
8298
|
) : (0, import_i18n57.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
8207
8299
|
};
|
|
8208
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
8300
|
+
var FromEmailField = () => /* @__PURE__ */ React118.createElement(
|
|
8209
8301
|
EmailField,
|
|
8210
8302
|
{
|
|
8211
8303
|
bind: "from",
|
|
@@ -8213,7 +8305,7 @@ var FromEmailField = () => /* @__PURE__ */ React116.createElement(
|
|
|
8213
8305
|
placeholder: (0, import_i18n57.__)("What email should appear as the sender?", "elementor")
|
|
8214
8306
|
}
|
|
8215
8307
|
);
|
|
8216
|
-
var FromNameField = () => /* @__PURE__ */
|
|
8308
|
+
var FromNameField = () => /* @__PURE__ */ React118.createElement(
|
|
8217
8309
|
EmailField,
|
|
8218
8310
|
{
|
|
8219
8311
|
bind: "from-name",
|
|
@@ -8223,7 +8315,7 @@ var FromNameField = () => /* @__PURE__ */ React116.createElement(
|
|
|
8223
8315
|
);
|
|
8224
8316
|
var ReplyToField = () => {
|
|
8225
8317
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
8226
|
-
return /* @__PURE__ */
|
|
8318
|
+
return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Reply-to", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(
|
|
8227
8319
|
MentionTextAreaControl,
|
|
8228
8320
|
{
|
|
8229
8321
|
suggestions: emailSuggestions,
|
|
@@ -8233,9 +8325,9 @@ var ReplyToField = () => {
|
|
|
8233
8325
|
}
|
|
8234
8326
|
))));
|
|
8235
8327
|
};
|
|
8236
|
-
var CcField = () => /* @__PURE__ */
|
|
8237
|
-
var BccField = () => /* @__PURE__ */
|
|
8238
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
8328
|
+
var CcField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Cc", "elementor") }));
|
|
8329
|
+
var BccField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: (0, import_i18n57.__)("Bcc", "elementor") }));
|
|
8330
|
+
var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
|
|
8239
8331
|
ChipsControl,
|
|
8240
8332
|
{
|
|
8241
8333
|
options: [
|
|
@@ -8247,7 +8339,7 @@ var MetaDataField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider
|
|
|
8247
8339
|
]
|
|
8248
8340
|
}
|
|
8249
8341
|
)));
|
|
8250
|
-
var SendAsField = () => /* @__PURE__ */
|
|
8342
|
+
var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, (0, import_i18n57.__)("Send as", "elementor"))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true }, /* @__PURE__ */ React118.createElement(
|
|
8251
8343
|
SelectControl,
|
|
8252
8344
|
{
|
|
8253
8345
|
options: [
|
|
@@ -8256,28 +8348,32 @@ var SendAsField = () => /* @__PURE__ */ React116.createElement(PropKeyProvider,
|
|
|
8256
8348
|
]
|
|
8257
8349
|
}
|
|
8258
8350
|
))));
|
|
8259
|
-
|
|
8260
|
-
|
|
8261
|
-
|
|
8262
|
-
|
|
8263
|
-
});
|
|
8351
|
+
|
|
8352
|
+
// src/controls/email-form-action-control/index.tsx
|
|
8353
|
+
var EmailFormActionControl = createControl(
|
|
8354
|
+
({ toPlaceholder, label }) => {
|
|
8355
|
+
const { value, setValue, ...propContext } = useBoundProp(import_editor_props66.emailsPropTypeUtil);
|
|
8356
|
+
return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n58.__)("settings", "elementor") : (0, import_i18n58.__)("Email settings", "elementor")), /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React119.createElement(SendToField, { placeholder: toPlaceholder })), /* @__PURE__ */ React119.createElement(SubjectField, null), /* @__PURE__ */ React119.createElement(MessageField, null), /* @__PURE__ */ React119.createElement(FromEmailField, null), /* @__PURE__ */ React119.createElement(AdvancedSettings, null)));
|
|
8357
|
+
}
|
|
8358
|
+
);
|
|
8359
|
+
var AdvancedSettings = () => /* @__PURE__ */ React119.createElement(import_editor_ui16.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(import_ui103.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 2 }, /* @__PURE__ */ React119.createElement(FromNameField, null), /* @__PURE__ */ React119.createElement(ReplyToField, null), /* @__PURE__ */ React119.createElement(CcField, null), /* @__PURE__ */ React119.createElement(BccField, null), /* @__PURE__ */ React119.createElement(import_ui103.Divider, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));
|
|
8264
8360
|
|
|
8265
8361
|
// src/controls/attachment-type-control.tsx
|
|
8266
|
-
var
|
|
8267
|
-
var
|
|
8268
|
-
var
|
|
8269
|
-
var
|
|
8362
|
+
var React120 = __toESM(require("react"));
|
|
8363
|
+
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
8364
|
+
var import_ui104 = require("@elementor/ui");
|
|
8365
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8270
8366
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
8271
|
-
return /* @__PURE__ */
|
|
8367
|
+
return /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(SelectControl, { options })), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true }, /* @__PURE__ */ React120.createElement(import_editor_ui17.InfoAlert, null, (0, import_i18n59.__)(
|
|
8272
8368
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
8273
8369
|
"elementor"
|
|
8274
8370
|
))));
|
|
8275
8371
|
});
|
|
8276
8372
|
|
|
8277
8373
|
// src/controls/grid-span-control.tsx
|
|
8278
|
-
var
|
|
8279
|
-
var
|
|
8280
|
-
var
|
|
8374
|
+
var React121 = __toESM(require("react"));
|
|
8375
|
+
var import_editor_props67 = require("@elementor/editor-props");
|
|
8376
|
+
var import_ui105 = require("@elementor/ui");
|
|
8281
8377
|
var GridSpanControl = createControl(
|
|
8282
8378
|
({
|
|
8283
8379
|
placeholder: propPlaceholder,
|
|
@@ -8288,11 +8384,11 @@ var GridSpanControl = createControl(
|
|
|
8288
8384
|
sx,
|
|
8289
8385
|
ariaLabel
|
|
8290
8386
|
}) => {
|
|
8291
|
-
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(
|
|
8387
|
+
const { value, setValue, disabled, placeholder: boundPlaceholder } = useBoundProp(import_editor_props67.spanPropTypeUtil);
|
|
8292
8388
|
const handleChange = (event) => setValue(event.target.value);
|
|
8293
8389
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
8294
|
-
return /* @__PURE__ */
|
|
8295
|
-
|
|
8390
|
+
return /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(
|
|
8391
|
+
import_ui105.TextField,
|
|
8296
8392
|
{
|
|
8297
8393
|
size: "tiny",
|
|
8298
8394
|
fullWidth: true,
|
|
@@ -8312,25 +8408,25 @@ var GridSpanControl = createControl(
|
|
|
8312
8408
|
);
|
|
8313
8409
|
|
|
8314
8410
|
// src/components/promotions/display-conditions-control.tsx
|
|
8315
|
-
var
|
|
8316
|
-
var
|
|
8411
|
+
var React123 = __toESM(require("react"));
|
|
8412
|
+
var import_react71 = require("react");
|
|
8317
8413
|
var import_icons37 = require("@elementor/icons");
|
|
8318
|
-
var
|
|
8319
|
-
var
|
|
8414
|
+
var import_ui107 = require("@elementor/ui");
|
|
8415
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
8320
8416
|
|
|
8321
8417
|
// src/components/promotions/promotion-trigger.tsx
|
|
8322
|
-
var
|
|
8323
|
-
var
|
|
8324
|
-
var
|
|
8325
|
-
var
|
|
8418
|
+
var React122 = __toESM(require("react"));
|
|
8419
|
+
var import_react70 = require("react");
|
|
8420
|
+
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
8421
|
+
var import_ui106 = require("@elementor/ui");
|
|
8326
8422
|
function getV4Promotion(key) {
|
|
8327
8423
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
8328
8424
|
}
|
|
8329
|
-
var PromotionTrigger = (0,
|
|
8425
|
+
var PromotionTrigger = (0, import_react70.forwardRef)(
|
|
8330
8426
|
({ promotionKey, children, trackingData }, ref) => {
|
|
8331
|
-
const [isOpen, setIsOpen] = (0,
|
|
8427
|
+
const [isOpen, setIsOpen] = (0, import_react70.useState)(false);
|
|
8332
8428
|
const promotion = getV4Promotion(promotionKey);
|
|
8333
|
-
const toggle = (0,
|
|
8429
|
+
const toggle = (0, import_react70.useCallback)(() => {
|
|
8334
8430
|
setIsOpen((prev) => {
|
|
8335
8431
|
if (!prev) {
|
|
8336
8432
|
trackViewPromotion(trackingData);
|
|
@@ -8338,9 +8434,9 @@ var PromotionTrigger = (0, import_react69.forwardRef)(
|
|
|
8338
8434
|
return !prev;
|
|
8339
8435
|
});
|
|
8340
8436
|
}, [trackingData]);
|
|
8341
|
-
(0,
|
|
8342
|
-
return /* @__PURE__ */
|
|
8343
|
-
|
|
8437
|
+
(0, import_react70.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
8438
|
+
return /* @__PURE__ */ React122.createElement(React122.Fragment, null, promotion && /* @__PURE__ */ React122.createElement(
|
|
8439
|
+
import_editor_ui18.PromotionInfotip,
|
|
8344
8440
|
{
|
|
8345
8441
|
title: promotion.title,
|
|
8346
8442
|
content: promotion.content,
|
|
@@ -8353,8 +8449,8 @@ var PromotionTrigger = (0, import_react69.forwardRef)(
|
|
|
8353
8449
|
},
|
|
8354
8450
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
8355
8451
|
},
|
|
8356
|
-
/* @__PURE__ */
|
|
8357
|
-
|
|
8452
|
+
/* @__PURE__ */ React122.createElement(
|
|
8453
|
+
import_ui106.Box,
|
|
8358
8454
|
{
|
|
8359
8455
|
onClick: (e) => {
|
|
8360
8456
|
e.stopPropagation();
|
|
@@ -8362,19 +8458,19 @@ var PromotionTrigger = (0, import_react69.forwardRef)(
|
|
|
8362
8458
|
},
|
|
8363
8459
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
8364
8460
|
},
|
|
8365
|
-
children ?? /* @__PURE__ */
|
|
8461
|
+
children ?? /* @__PURE__ */ React122.createElement(import_editor_ui18.PromotionChip, null)
|
|
8366
8462
|
)
|
|
8367
8463
|
));
|
|
8368
8464
|
}
|
|
8369
8465
|
);
|
|
8370
8466
|
|
|
8371
8467
|
// src/components/promotions/display-conditions-control.tsx
|
|
8372
|
-
var ARIA_LABEL = (0,
|
|
8468
|
+
var ARIA_LABEL = (0, import_i18n60.__)("Display Conditions", "elementor");
|
|
8373
8469
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
8374
8470
|
var DisplayConditionsControl = createControl(() => {
|
|
8375
|
-
const triggerRef = (0,
|
|
8376
|
-
return /* @__PURE__ */
|
|
8377
|
-
|
|
8471
|
+
const triggerRef = (0, import_react71.useRef)(null);
|
|
8472
|
+
return /* @__PURE__ */ React123.createElement(
|
|
8473
|
+
import_ui107.Stack,
|
|
8378
8474
|
{
|
|
8379
8475
|
direction: "row",
|
|
8380
8476
|
spacing: 2,
|
|
@@ -8383,9 +8479,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8383
8479
|
alignItems: "center"
|
|
8384
8480
|
}
|
|
8385
8481
|
},
|
|
8386
|
-
/* @__PURE__ */
|
|
8387
|
-
/* @__PURE__ */
|
|
8388
|
-
|
|
8482
|
+
/* @__PURE__ */ React123.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
8483
|
+
/* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React123.createElement(
|
|
8484
|
+
import_ui107.IconButton,
|
|
8389
8485
|
{
|
|
8390
8486
|
size: "tiny",
|
|
8391
8487
|
"aria-label": ARIA_LABEL,
|
|
@@ -8397,23 +8493,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
8397
8493
|
borderRadius: 1
|
|
8398
8494
|
}
|
|
8399
8495
|
},
|
|
8400
|
-
/* @__PURE__ */
|
|
8496
|
+
/* @__PURE__ */ React123.createElement(import_icons37.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
8401
8497
|
))
|
|
8402
8498
|
);
|
|
8403
8499
|
});
|
|
8404
8500
|
|
|
8405
8501
|
// src/components/promotions/attributes-control.tsx
|
|
8406
|
-
var
|
|
8407
|
-
var
|
|
8502
|
+
var React124 = __toESM(require("react"));
|
|
8503
|
+
var import_react72 = require("react");
|
|
8408
8504
|
var import_icons38 = require("@elementor/icons");
|
|
8409
|
-
var
|
|
8410
|
-
var
|
|
8411
|
-
var ARIA_LABEL2 = (0,
|
|
8505
|
+
var import_ui108 = require("@elementor/ui");
|
|
8506
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8507
|
+
var ARIA_LABEL2 = (0, import_i18n61.__)("Attributes", "elementor");
|
|
8412
8508
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
8413
8509
|
var AttributesControl = createControl(() => {
|
|
8414
|
-
const triggerRef = (0,
|
|
8415
|
-
return /* @__PURE__ */
|
|
8416
|
-
|
|
8510
|
+
const triggerRef = (0, import_react72.useRef)(null);
|
|
8511
|
+
return /* @__PURE__ */ React124.createElement(
|
|
8512
|
+
import_ui108.Stack,
|
|
8417
8513
|
{
|
|
8418
8514
|
direction: "row",
|
|
8419
8515
|
spacing: 2,
|
|
@@ -8422,8 +8518,8 @@ var AttributesControl = createControl(() => {
|
|
|
8422
8518
|
alignItems: "center"
|
|
8423
8519
|
}
|
|
8424
8520
|
},
|
|
8425
|
-
/* @__PURE__ */
|
|
8426
|
-
/* @__PURE__ */
|
|
8521
|
+
/* @__PURE__ */ React124.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
8522
|
+
/* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React124.createElement(
|
|
8427
8523
|
import_icons38.PlusIcon,
|
|
8428
8524
|
{
|
|
8429
8525
|
"aria-label": ARIA_LABEL2,
|
|
@@ -8437,21 +8533,21 @@ var AttributesControl = createControl(() => {
|
|
|
8437
8533
|
});
|
|
8438
8534
|
|
|
8439
8535
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
8440
|
-
var
|
|
8536
|
+
var React125 = __toESM(require("react"));
|
|
8441
8537
|
var import_icons39 = require("@elementor/icons");
|
|
8442
|
-
var
|
|
8443
|
-
var CustomIconButton = (0,
|
|
8538
|
+
var import_ui109 = require("@elementor/ui");
|
|
8539
|
+
var CustomIconButton = (0, import_ui109.styled)(import_ui109.IconButton)(({ theme }) => ({
|
|
8444
8540
|
width: theme.spacing(2.5),
|
|
8445
8541
|
height: theme.spacing(2.5)
|
|
8446
8542
|
}));
|
|
8447
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
8543
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React125.createElement(import_ui109.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React125.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React125.createElement(import_icons39.BrushBigIcon, { fontSize: size })));
|
|
8448
8544
|
|
|
8449
8545
|
// src/components/repeater/repeater.tsx
|
|
8450
|
-
var
|
|
8451
|
-
var
|
|
8546
|
+
var React126 = __toESM(require("react"));
|
|
8547
|
+
var import_react73 = require("react");
|
|
8452
8548
|
var import_icons40 = require("@elementor/icons");
|
|
8453
|
-
var
|
|
8454
|
-
var
|
|
8549
|
+
var import_ui110 = require("@elementor/ui");
|
|
8550
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
8455
8551
|
var SIZE12 = "tiny";
|
|
8456
8552
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
8457
8553
|
var Repeater3 = ({
|
|
@@ -8469,7 +8565,7 @@ var Repeater3 = ({
|
|
|
8469
8565
|
openItem: initialOpenItem = EMPTY_OPEN_ITEM2,
|
|
8470
8566
|
isSortable = true
|
|
8471
8567
|
}) => {
|
|
8472
|
-
const [openItem, setOpenItem] = (0,
|
|
8568
|
+
const [openItem, setOpenItem] = (0, import_react73.useState)(initialOpenItem);
|
|
8473
8569
|
const uniqueKeys = items2.map(
|
|
8474
8570
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
8475
8571
|
);
|
|
@@ -8532,8 +8628,8 @@ var Repeater3 = ({
|
|
|
8532
8628
|
};
|
|
8533
8629
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
8534
8630
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
8535
|
-
const addButton = /* @__PURE__ */
|
|
8536
|
-
|
|
8631
|
+
const addButton = /* @__PURE__ */ React126.createElement(
|
|
8632
|
+
import_ui110.IconButton,
|
|
8537
8633
|
{
|
|
8538
8634
|
size: SIZE12,
|
|
8539
8635
|
sx: {
|
|
@@ -8541,32 +8637,32 @@ var Repeater3 = ({
|
|
|
8541
8637
|
},
|
|
8542
8638
|
disabled: isButtonDisabled,
|
|
8543
8639
|
onClick: addRepeaterItem,
|
|
8544
|
-
"aria-label": (0,
|
|
8640
|
+
"aria-label": (0, import_i18n62.__)("Add item", "elementor")
|
|
8545
8641
|
},
|
|
8546
|
-
/* @__PURE__ */
|
|
8642
|
+
/* @__PURE__ */ React126.createElement(import_icons40.PlusIcon, { fontSize: SIZE12 })
|
|
8547
8643
|
);
|
|
8548
|
-
return /* @__PURE__ */
|
|
8549
|
-
|
|
8644
|
+
return /* @__PURE__ */ React126.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React126.createElement(RepeaterHeader, { label, adornment: ControlAdornments }, shouldShowInfotip ? /* @__PURE__ */ React126.createElement(
|
|
8645
|
+
import_ui110.Infotip,
|
|
8550
8646
|
{
|
|
8551
8647
|
placement: "right",
|
|
8552
8648
|
content: addButtonInfotipContent,
|
|
8553
8649
|
color: "secondary",
|
|
8554
8650
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
8555
8651
|
},
|
|
8556
|
-
/* @__PURE__ */
|
|
8557
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
8652
|
+
/* @__PURE__ */ React126.createElement(import_ui110.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
8653
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React126.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
8558
8654
|
const index = uniqueKeys.indexOf(key);
|
|
8559
8655
|
const value = items2[index];
|
|
8560
8656
|
if (!value) {
|
|
8561
8657
|
return null;
|
|
8562
8658
|
}
|
|
8563
|
-
return /* @__PURE__ */
|
|
8659
|
+
return /* @__PURE__ */ React126.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React126.createElement(
|
|
8564
8660
|
RepeaterItem,
|
|
8565
8661
|
{
|
|
8566
8662
|
disabled,
|
|
8567
8663
|
propDisabled: value?.disabled,
|
|
8568
|
-
label: /* @__PURE__ */
|
|
8569
|
-
startIcon: /* @__PURE__ */
|
|
8664
|
+
label: /* @__PURE__ */ React126.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Label, { value, index })),
|
|
8665
|
+
startIcon: /* @__PURE__ */ React126.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Icon, { value })),
|
|
8570
8666
|
removeItem: () => removeRepeaterItem(index),
|
|
8571
8667
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
8572
8668
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -8580,7 +8676,7 @@ var Repeater3 = ({
|
|
|
8580
8676
|
actions: itemSettings.actions,
|
|
8581
8677
|
value
|
|
8582
8678
|
},
|
|
8583
|
-
(props) => /* @__PURE__ */
|
|
8679
|
+
(props) => /* @__PURE__ */ React126.createElement(
|
|
8584
8680
|
itemSettings.Content,
|
|
8585
8681
|
{
|
|
8586
8682
|
...props,
|
|
@@ -8620,18 +8716,18 @@ var RepeaterItem = ({
|
|
|
8620
8716
|
},
|
|
8621
8717
|
wrappedOnPopoverClose
|
|
8622
8718
|
);
|
|
8623
|
-
const triggerProps = (0,
|
|
8719
|
+
const triggerProps = (0, import_ui110.bindTrigger)(popoverState);
|
|
8624
8720
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
8625
|
-
const duplicateLabel = (0,
|
|
8626
|
-
const toggleLabel = propDisabled ? (0,
|
|
8627
|
-
const removeLabel = (0,
|
|
8628
|
-
return /* @__PURE__ */
|
|
8721
|
+
const duplicateLabel = (0, import_i18n62.__)("Duplicate", "elementor");
|
|
8722
|
+
const toggleLabel = propDisabled ? (0, import_i18n62.__)("Show", "elementor") : (0, import_i18n62.__)("Hide", "elementor");
|
|
8723
|
+
const removeLabel = (0, import_i18n62.__)("Remove", "elementor");
|
|
8724
|
+
return /* @__PURE__ */ React126.createElement(import_ui110.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React126.createElement(
|
|
8629
8725
|
RepeaterTag,
|
|
8630
8726
|
{
|
|
8631
8727
|
disabled,
|
|
8632
8728
|
label,
|
|
8633
8729
|
ref: setRef,
|
|
8634
|
-
"aria-label": (0,
|
|
8730
|
+
"aria-label": (0, import_i18n62.__)("Open item", "elementor"),
|
|
8635
8731
|
...triggerProps,
|
|
8636
8732
|
onClick: (e) => {
|
|
8637
8733
|
triggerProps.onClick(e);
|
|
@@ -8640,15 +8736,15 @@ var RepeaterItem = ({
|
|
|
8640
8736
|
}
|
|
8641
8737
|
},
|
|
8642
8738
|
startIcon,
|
|
8643
|
-
actions: /* @__PURE__ */
|
|
8739
|
+
actions: /* @__PURE__ */ React126.createElement(React126.Fragment, null, showDuplicate && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React126.createElement(import_icons40.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React126.createElement(import_icons40.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React126.createElement(import_icons40.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React126.createElement(import_ui110.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(import_ui110.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React126.createElement(import_icons40.XIcon, { fontSize: SIZE12 }))))
|
|
8644
8740
|
}
|
|
8645
|
-
), /* @__PURE__ */
|
|
8741
|
+
), /* @__PURE__ */ React126.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React126.createElement(import_ui110.Box, null, children({ anchorEl: ref }))));
|
|
8646
8742
|
};
|
|
8647
8743
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
8648
|
-
const [ref, setRef] = (0,
|
|
8649
|
-
const popoverState = (0,
|
|
8650
|
-
const popoverProps = (0,
|
|
8651
|
-
(0,
|
|
8744
|
+
const [ref, setRef] = (0, import_react73.useState)(null);
|
|
8745
|
+
const popoverState = (0, import_ui110.usePopupState)({ variant: "popover" });
|
|
8746
|
+
const popoverProps = (0, import_ui110.bindPopover)(popoverState);
|
|
8747
|
+
(0, import_react73.useEffect)(() => {
|
|
8652
8748
|
if (openOnMount && ref) {
|
|
8653
8749
|
popoverState.open(ref);
|
|
8654
8750
|
onOpen?.();
|
|
@@ -8667,20 +8763,20 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
8667
8763
|
};
|
|
8668
8764
|
|
|
8669
8765
|
// src/components/inline-editor-toolbar.tsx
|
|
8670
|
-
var
|
|
8671
|
-
var
|
|
8766
|
+
var React128 = __toESM(require("react"));
|
|
8767
|
+
var import_react75 = require("react");
|
|
8672
8768
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8673
8769
|
var import_icons42 = require("@elementor/icons");
|
|
8674
|
-
var
|
|
8675
|
-
var
|
|
8676
|
-
var
|
|
8770
|
+
var import_ui112 = require("@elementor/ui");
|
|
8771
|
+
var import_react76 = require("@tiptap/react");
|
|
8772
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
8677
8773
|
|
|
8678
8774
|
// src/components/url-popover.tsx
|
|
8679
|
-
var
|
|
8680
|
-
var
|
|
8775
|
+
var React127 = __toESM(require("react"));
|
|
8776
|
+
var import_react74 = require("react");
|
|
8681
8777
|
var import_icons41 = require("@elementor/icons");
|
|
8682
|
-
var
|
|
8683
|
-
var
|
|
8778
|
+
var import_ui111 = require("@elementor/ui");
|
|
8779
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
8684
8780
|
var UrlPopover = ({
|
|
8685
8781
|
popupState,
|
|
8686
8782
|
restoreValue,
|
|
@@ -8690,8 +8786,8 @@ var UrlPopover = ({
|
|
|
8690
8786
|
openInNewTab,
|
|
8691
8787
|
onToggleNewTab
|
|
8692
8788
|
}) => {
|
|
8693
|
-
const inputRef = (0,
|
|
8694
|
-
(0,
|
|
8789
|
+
const inputRef = (0, import_react74.useRef)(null);
|
|
8790
|
+
(0, import_react74.useEffect)(() => {
|
|
8695
8791
|
if (popupState.isOpen) {
|
|
8696
8792
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
8697
8793
|
}
|
|
@@ -8700,57 +8796,57 @@ var UrlPopover = ({
|
|
|
8700
8796
|
restoreValue();
|
|
8701
8797
|
popupState.close();
|
|
8702
8798
|
};
|
|
8703
|
-
return /* @__PURE__ */
|
|
8704
|
-
|
|
8799
|
+
return /* @__PURE__ */ React127.createElement(
|
|
8800
|
+
import_ui111.Popover,
|
|
8705
8801
|
{
|
|
8706
8802
|
slotProps: {
|
|
8707
8803
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
8708
8804
|
},
|
|
8709
|
-
...(0,
|
|
8805
|
+
...(0, import_ui111.bindPopover)(popupState),
|
|
8710
8806
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
8711
8807
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
8712
8808
|
onClose: handleClose
|
|
8713
8809
|
},
|
|
8714
|
-
/* @__PURE__ */
|
|
8715
|
-
|
|
8810
|
+
/* @__PURE__ */ React127.createElement(import_ui111.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
|
|
8811
|
+
import_ui111.TextField,
|
|
8716
8812
|
{
|
|
8717
8813
|
value,
|
|
8718
8814
|
onChange,
|
|
8719
8815
|
size: "tiny",
|
|
8720
8816
|
fullWidth: true,
|
|
8721
|
-
placeholder: (0,
|
|
8817
|
+
placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
|
|
8722
8818
|
inputProps: { ref: inputRef },
|
|
8723
8819
|
color: "secondary",
|
|
8724
8820
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
8725
8821
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
8726
8822
|
}
|
|
8727
|
-
), /* @__PURE__ */
|
|
8728
|
-
|
|
8823
|
+
), /* @__PURE__ */ React127.createElement(import_ui111.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
|
|
8824
|
+
import_ui111.ToggleButton,
|
|
8729
8825
|
{
|
|
8730
8826
|
size: "tiny",
|
|
8731
8827
|
value: "newTab",
|
|
8732
8828
|
selected: openInNewTab,
|
|
8733
8829
|
onClick: onToggleNewTab,
|
|
8734
|
-
"aria-label": (0,
|
|
8830
|
+
"aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
|
|
8735
8831
|
sx: { borderRadius: "8px" }
|
|
8736
8832
|
},
|
|
8737
|
-
/* @__PURE__ */
|
|
8833
|
+
/* @__PURE__ */ React127.createElement(import_icons41.ExternalLinkIcon, { fontSize: "tiny" })
|
|
8738
8834
|
)))
|
|
8739
8835
|
);
|
|
8740
8836
|
};
|
|
8741
8837
|
|
|
8742
8838
|
// src/components/inline-editor-toolbar.tsx
|
|
8743
8839
|
var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
8744
|
-
const [urlValue, setUrlValue] = (0,
|
|
8745
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
8746
|
-
const toolbarRef = (0,
|
|
8747
|
-
const linkPopupState = (0,
|
|
8840
|
+
const [urlValue, setUrlValue] = (0, import_react75.useState)("");
|
|
8841
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react75.useState)(false);
|
|
8842
|
+
const toolbarRef = (0, import_react75.useRef)(null);
|
|
8843
|
+
const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
|
|
8748
8844
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
8749
|
-
const editorState = (0,
|
|
8845
|
+
const editorState = (0, import_react76.useEditorState)({
|
|
8750
8846
|
editor,
|
|
8751
8847
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
8752
8848
|
});
|
|
8753
|
-
const formatButtonsList = (0,
|
|
8849
|
+
const formatButtonsList = (0, import_react75.useMemo)(() => {
|
|
8754
8850
|
const buttons = Object.values(formatButtons);
|
|
8755
8851
|
if (isElementClickable) {
|
|
8756
8852
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -8787,11 +8883,11 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8787
8883
|
}
|
|
8788
8884
|
linkPopupState.close();
|
|
8789
8885
|
};
|
|
8790
|
-
(0,
|
|
8886
|
+
(0, import_react75.useEffect)(() => {
|
|
8791
8887
|
editor?.commands?.focus();
|
|
8792
8888
|
}, [editor]);
|
|
8793
|
-
return /* @__PURE__ */
|
|
8794
|
-
|
|
8889
|
+
return /* @__PURE__ */ React128.createElement(
|
|
8890
|
+
import_ui112.Box,
|
|
8795
8891
|
{
|
|
8796
8892
|
ref: toolbarRef,
|
|
8797
8893
|
sx: {
|
|
@@ -8807,9 +8903,9 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8807
8903
|
...sx
|
|
8808
8904
|
}
|
|
8809
8905
|
},
|
|
8810
|
-
/* @__PURE__ */
|
|
8811
|
-
/* @__PURE__ */
|
|
8812
|
-
|
|
8906
|
+
/* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(import_ui112.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
8907
|
+
/* @__PURE__ */ React128.createElement(
|
|
8908
|
+
import_ui112.ToggleButtonGroup,
|
|
8813
8909
|
{
|
|
8814
8910
|
value: editorState,
|
|
8815
8911
|
size: "tiny",
|
|
@@ -8817,7 +8913,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8817
8913
|
display: "flex",
|
|
8818
8914
|
gap: 0.5,
|
|
8819
8915
|
border: "none",
|
|
8820
|
-
[`& .${
|
|
8916
|
+
[`& .${import_ui112.toggleButtonGroupClasses.firstButton}, & .${import_ui112.toggleButtonGroupClasses.middleButton}, & .${import_ui112.toggleButtonGroupClasses.lastButton}`]: {
|
|
8821
8917
|
borderRadius: "8px",
|
|
8822
8918
|
border: "none",
|
|
8823
8919
|
marginLeft: 0,
|
|
@@ -8830,8 +8926,8 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8830
8926
|
}
|
|
8831
8927
|
}
|
|
8832
8928
|
},
|
|
8833
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
8834
|
-
|
|
8929
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(import_ui112.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
|
|
8930
|
+
import_ui112.ToggleButton,
|
|
8835
8931
|
{
|
|
8836
8932
|
value: button.action,
|
|
8837
8933
|
"aria-label": button.label,
|
|
@@ -8848,7 +8944,7 @@ var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
|
|
|
8848
8944
|
button.icon
|
|
8849
8945
|
)))
|
|
8850
8946
|
),
|
|
8851
|
-
/* @__PURE__ */
|
|
8947
|
+
/* @__PURE__ */ React128.createElement(
|
|
8852
8948
|
UrlPopover,
|
|
8853
8949
|
{
|
|
8854
8950
|
popupState: linkPopupState,
|
|
@@ -8871,64 +8967,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
8871
8967
|
};
|
|
8872
8968
|
var toolbarButtons = {
|
|
8873
8969
|
clear: {
|
|
8874
|
-
label: (0,
|
|
8875
|
-
icon: /* @__PURE__ */
|
|
8970
|
+
label: (0, import_i18n64.__)("Clear", "elementor"),
|
|
8971
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.MinusIcon, { fontSize: "tiny" }),
|
|
8876
8972
|
action: "clear",
|
|
8877
8973
|
method: (editor) => {
|
|
8878
8974
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
8879
8975
|
}
|
|
8880
8976
|
},
|
|
8881
8977
|
bold: {
|
|
8882
|
-
label: (0,
|
|
8883
|
-
icon: /* @__PURE__ */
|
|
8978
|
+
label: (0, import_i18n64.__)("Bold", "elementor"),
|
|
8979
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.BoldIcon, { fontSize: "tiny" }),
|
|
8884
8980
|
action: "bold",
|
|
8885
8981
|
method: (editor) => {
|
|
8886
8982
|
editor.chain().focus().toggleBold().run();
|
|
8887
8983
|
}
|
|
8888
8984
|
},
|
|
8889
8985
|
italic: {
|
|
8890
|
-
label: (0,
|
|
8891
|
-
icon: /* @__PURE__ */
|
|
8986
|
+
label: (0, import_i18n64.__)("Italic", "elementor"),
|
|
8987
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.ItalicIcon, { fontSize: "tiny" }),
|
|
8892
8988
|
action: "italic",
|
|
8893
8989
|
method: (editor) => {
|
|
8894
8990
|
editor.chain().focus().toggleItalic().run();
|
|
8895
8991
|
}
|
|
8896
8992
|
},
|
|
8897
8993
|
underline: {
|
|
8898
|
-
label: (0,
|
|
8899
|
-
icon: /* @__PURE__ */
|
|
8994
|
+
label: (0, import_i18n64.__)("Underline", "elementor"),
|
|
8995
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.UnderlineIcon, { fontSize: "tiny" }),
|
|
8900
8996
|
action: "underline",
|
|
8901
8997
|
method: (editor) => {
|
|
8902
8998
|
editor.chain().focus().toggleUnderline().run();
|
|
8903
8999
|
}
|
|
8904
9000
|
},
|
|
8905
9001
|
strike: {
|
|
8906
|
-
label: (0,
|
|
8907
|
-
icon: /* @__PURE__ */
|
|
9002
|
+
label: (0, import_i18n64.__)("Strikethrough", "elementor"),
|
|
9003
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.StrikethroughIcon, { fontSize: "tiny" }),
|
|
8908
9004
|
action: "strike",
|
|
8909
9005
|
method: (editor) => {
|
|
8910
9006
|
editor.chain().focus().toggleStrike().run();
|
|
8911
9007
|
}
|
|
8912
9008
|
},
|
|
8913
9009
|
superscript: {
|
|
8914
|
-
label: (0,
|
|
8915
|
-
icon: /* @__PURE__ */
|
|
9010
|
+
label: (0, import_i18n64.__)("Superscript", "elementor"),
|
|
9011
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.SuperscriptIcon, { fontSize: "tiny" }),
|
|
8916
9012
|
action: "superscript",
|
|
8917
9013
|
method: (editor) => {
|
|
8918
9014
|
editor.chain().focus().toggleSuperscript().run();
|
|
8919
9015
|
}
|
|
8920
9016
|
},
|
|
8921
9017
|
subscript: {
|
|
8922
|
-
label: (0,
|
|
8923
|
-
icon: /* @__PURE__ */
|
|
9018
|
+
label: (0, import_i18n64.__)("Subscript", "elementor"),
|
|
9019
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.SubscriptIcon, { fontSize: "tiny" }),
|
|
8924
9020
|
action: "subscript",
|
|
8925
9021
|
method: (editor) => {
|
|
8926
9022
|
editor.chain().focus().toggleSubscript().run();
|
|
8927
9023
|
}
|
|
8928
9024
|
},
|
|
8929
9025
|
link: {
|
|
8930
|
-
label: (0,
|
|
8931
|
-
icon: /* @__PURE__ */
|
|
9026
|
+
label: (0, import_i18n64.__)("Link", "elementor"),
|
|
9027
|
+
icon: /* @__PURE__ */ React128.createElement(import_icons42.LinkIcon, { fontSize: "tiny" }),
|
|
8932
9028
|
action: "link",
|
|
8933
9029
|
method: null
|
|
8934
9030
|
}
|
|
@@ -8937,8 +9033,8 @@ var { clear: clearButton, ...formatButtons } = toolbarButtons;
|
|
|
8937
9033
|
var possibleFormats = Object.keys(formatButtons);
|
|
8938
9034
|
|
|
8939
9035
|
// src/components/size/unstable-size-field.tsx
|
|
8940
|
-
var
|
|
8941
|
-
var
|
|
9036
|
+
var React131 = __toESM(require("react"));
|
|
9037
|
+
var import_ui114 = require("@elementor/ui");
|
|
8942
9038
|
|
|
8943
9039
|
// src/hooks/use-size-value.ts
|
|
8944
9040
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -8980,26 +9076,26 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
8980
9076
|
};
|
|
8981
9077
|
|
|
8982
9078
|
// src/components/size/unit-select.tsx
|
|
8983
|
-
var
|
|
8984
|
-
var
|
|
8985
|
-
var
|
|
8986
|
-
var
|
|
9079
|
+
var React129 = __toESM(require("react"));
|
|
9080
|
+
var import_react77 = require("react");
|
|
9081
|
+
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
9082
|
+
var import_ui113 = require("@elementor/ui");
|
|
8987
9083
|
var menuItemContentStyles2 = {
|
|
8988
9084
|
display: "flex",
|
|
8989
9085
|
flexDirection: "column",
|
|
8990
9086
|
justifyContent: "center"
|
|
8991
9087
|
};
|
|
8992
9088
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
8993
|
-
const popupState = (0,
|
|
9089
|
+
const popupState = (0, import_ui113.usePopupState)({
|
|
8994
9090
|
variant: "popover",
|
|
8995
|
-
popupId: (0,
|
|
9091
|
+
popupId: (0, import_react77.useId)()
|
|
8996
9092
|
});
|
|
8997
9093
|
const handleMenuItemClick = (index) => {
|
|
8998
9094
|
onClick(options[index]);
|
|
8999
9095
|
popupState.close();
|
|
9000
9096
|
};
|
|
9001
|
-
return /* @__PURE__ */
|
|
9002
|
-
|
|
9097
|
+
return /* @__PURE__ */ React129.createElement(React129.Fragment, null, /* @__PURE__ */ React129.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui113.bindTrigger)(popupState) }, value), /* @__PURE__ */ React129.createElement(import_ui113.Menu, { MenuListProps: { dense: true }, ...(0, import_ui113.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React129.createElement(
|
|
9098
|
+
import_editor_ui19.MenuListItem,
|
|
9003
9099
|
{
|
|
9004
9100
|
key: option,
|
|
9005
9101
|
onClick: () => handleMenuItemClick(index),
|
|
@@ -9017,7 +9113,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
9017
9113
|
option.toUpperCase()
|
|
9018
9114
|
))));
|
|
9019
9115
|
};
|
|
9020
|
-
var StyledButton3 = (0,
|
|
9116
|
+
var StyledButton3 = (0, import_ui113.styled)(import_ui113.Button, {
|
|
9021
9117
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
9022
9118
|
})(({ isPrimaryColor, theme }) => ({
|
|
9023
9119
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -9027,11 +9123,11 @@ var StyledButton3 = (0, import_ui110.styled)(import_ui110.Button, {
|
|
|
9027
9123
|
}));
|
|
9028
9124
|
|
|
9029
9125
|
// src/components/size/unstable-size-input.tsx
|
|
9030
|
-
var
|
|
9031
|
-
var
|
|
9032
|
-
var UnstableSizeInput = (0,
|
|
9126
|
+
var React130 = __toESM(require("react"));
|
|
9127
|
+
var import_react78 = require("react");
|
|
9128
|
+
var UnstableSizeInput = (0, import_react78.forwardRef)(
|
|
9033
9129
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
9034
|
-
return /* @__PURE__ */
|
|
9130
|
+
return /* @__PURE__ */ React130.createElement(
|
|
9035
9131
|
NumberInput,
|
|
9036
9132
|
{
|
|
9037
9133
|
ref,
|
|
@@ -9069,7 +9165,7 @@ var UnstableSizeField = ({
|
|
|
9069
9165
|
const shouldHighlightUnit2 = () => {
|
|
9070
9166
|
return hasValue(size);
|
|
9071
9167
|
};
|
|
9072
|
-
return /* @__PURE__ */
|
|
9168
|
+
return /* @__PURE__ */ React131.createElement(
|
|
9073
9169
|
UnstableSizeInput,
|
|
9074
9170
|
{
|
|
9075
9171
|
type: "number",
|
|
@@ -9078,8 +9174,8 @@ var UnstableSizeField = ({
|
|
|
9078
9174
|
onChange: (event) => setSize(event.target.value),
|
|
9079
9175
|
InputProps: {
|
|
9080
9176
|
...InputProps,
|
|
9081
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
9082
|
-
endAdornment: /* @__PURE__ */
|
|
9177
|
+
startAdornment: startIcon && /* @__PURE__ */ React131.createElement(import_ui114.InputAdornment, { position: "start" }, startIcon),
|
|
9178
|
+
endAdornment: /* @__PURE__ */ React131.createElement(import_ui114.InputAdornment, { position: "end" }, /* @__PURE__ */ React131.createElement(
|
|
9083
9179
|
UnitSelect,
|
|
9084
9180
|
{
|
|
9085
9181
|
options: units2,
|
|
@@ -9097,7 +9193,7 @@ var hasValue = (value) => {
|
|
|
9097
9193
|
};
|
|
9098
9194
|
|
|
9099
9195
|
// src/hooks/use-font-families.ts
|
|
9100
|
-
var
|
|
9196
|
+
var import_react79 = require("react");
|
|
9101
9197
|
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
9102
9198
|
var getFontControlConfig = () => {
|
|
9103
9199
|
const { controls } = (0, import_editor_v1_adapters2.getElementorConfig)();
|
|
@@ -9105,7 +9201,7 @@ var getFontControlConfig = () => {
|
|
|
9105
9201
|
};
|
|
9106
9202
|
var useFontFamilies = () => {
|
|
9107
9203
|
const { groups, options } = getFontControlConfig();
|
|
9108
|
-
return (0,
|
|
9204
|
+
return (0, import_react79.useMemo)(() => {
|
|
9109
9205
|
if (!groups || !options) {
|
|
9110
9206
|
return [];
|
|
9111
9207
|
}
|