@elementor/editor-controls 0.5.0 → 0.6.1
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/CHANGELOG.md +31 -0
- package/dist/index.d.mts +37 -13
- package/dist/index.d.ts +37 -13
- package/dist/index.js +443 -234
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +389 -171
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/src/bound-prop-context/prop-context.tsx +11 -2
- package/src/bound-prop-context/prop-key-context.tsx +9 -2
- package/src/bound-prop-context/use-bound-prop.ts +1 -0
- package/src/components/repeater.tsx +5 -2
- package/src/controls/autocomplete-control.tsx +181 -0
- package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx +32 -2
- package/src/controls/equal-unequal-sizes-control.tsx +1 -1
- package/src/controls/image-media-control.tsx +1 -1
- package/src/controls/link-control.tsx +56 -26
- package/src/controls/linked-dimensions-control.tsx +60 -34
- package/src/controls/url-control.tsx +7 -2
- package/src/index.ts +1 -0
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
AutocompleteControl: () => AutocompleteControl,
|
|
33
34
|
BackgroundControl: () => BackgroundControl,
|
|
34
35
|
BoxShadowRepeaterControl: () => BoxShadowRepeaterControl,
|
|
35
36
|
ColorControl: () => ColorControl,
|
|
@@ -93,7 +94,17 @@ var PropProvider = ({
|
|
|
93
94
|
setValue,
|
|
94
95
|
propType
|
|
95
96
|
}) => {
|
|
96
|
-
return /* @__PURE__ */ React.createElement(
|
|
97
|
+
return /* @__PURE__ */ React.createElement(
|
|
98
|
+
PropContext.Provider,
|
|
99
|
+
{
|
|
100
|
+
value: {
|
|
101
|
+
value,
|
|
102
|
+
propType,
|
|
103
|
+
setValue
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
children
|
|
107
|
+
);
|
|
97
108
|
};
|
|
98
109
|
var usePropContext = () => {
|
|
99
110
|
const context = (0, import_react.useContext)(PropContext);
|
|
@@ -127,6 +138,7 @@ var PropKeyProvider = ({ children, bind }) => {
|
|
|
127
138
|
};
|
|
128
139
|
var ObjectPropKeyProvider = ({ children, bind }) => {
|
|
129
140
|
const context = usePropContext();
|
|
141
|
+
const { path } = (0, import_react2.useContext)(PropKeyContext) ?? {};
|
|
130
142
|
const setValue = (value2, options, meta) => {
|
|
131
143
|
const newValue = {
|
|
132
144
|
...context.value,
|
|
@@ -136,10 +148,17 @@ var ObjectPropKeyProvider = ({ children, bind }) => {
|
|
|
136
148
|
};
|
|
137
149
|
const value = context.value?.[bind];
|
|
138
150
|
const propType = context.propType.shape[bind];
|
|
139
|
-
return /* @__PURE__ */ React2.createElement(
|
|
151
|
+
return /* @__PURE__ */ React2.createElement(
|
|
152
|
+
PropKeyContext.Provider,
|
|
153
|
+
{
|
|
154
|
+
value: { ...context, value, setValue, bind, propType, path: [...path ?? [], bind] }
|
|
155
|
+
},
|
|
156
|
+
children
|
|
157
|
+
);
|
|
140
158
|
};
|
|
141
159
|
var ArrayPropKeyProvider = ({ children, bind }) => {
|
|
142
160
|
const context = usePropContext();
|
|
161
|
+
const { path } = (0, import_react2.useContext)(PropKeyContext) ?? {};
|
|
143
162
|
const setValue = (value2, options) => {
|
|
144
163
|
const newValue = [...context.value ?? []];
|
|
145
164
|
newValue[Number(bind)] = value2;
|
|
@@ -147,7 +166,13 @@ var ArrayPropKeyProvider = ({ children, bind }) => {
|
|
|
147
166
|
};
|
|
148
167
|
const value = context.value?.[Number(bind)];
|
|
149
168
|
const propType = context.propType.item_prop_type;
|
|
150
|
-
return /* @__PURE__ */ React2.createElement(
|
|
169
|
+
return /* @__PURE__ */ React2.createElement(
|
|
170
|
+
PropKeyContext.Provider,
|
|
171
|
+
{
|
|
172
|
+
value: { ...context, value, setValue, bind, propType, path: [...path ?? [], bind] }
|
|
173
|
+
},
|
|
174
|
+
children
|
|
175
|
+
);
|
|
151
176
|
};
|
|
152
177
|
var usePropKeyContext = () => {
|
|
153
178
|
const context = (0, import_react2.useContext)(PropKeyContext);
|
|
@@ -295,7 +320,7 @@ var ImageMediaControl = createControl(() => {
|
|
|
295
320
|
const { data: attachment, isFetching } = (0, import_wp_media.useWpMediaAttachment)(id?.value || null);
|
|
296
321
|
const src = attachment?.url ?? url?.value ?? null;
|
|
297
322
|
const { open } = (0, import_wp_media.useWpMediaFrame)({
|
|
298
|
-
types: ["image"],
|
|
323
|
+
types: ["image", "image/svg+xml"],
|
|
299
324
|
multiple: false,
|
|
300
325
|
selected: id?.value || null,
|
|
301
326
|
onSelect: (selectedAttachment) => {
|
|
@@ -349,15 +374,123 @@ var ImageControl = createControl((props) => {
|
|
|
349
374
|
return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React10.createElement(import_ui6.Stack, { gap: 1.5 }, /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ImageMediaControl, null)), /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(ControlLabel, null, " ", (0, import_i18n2.__)("Image Resolution", "elementor"))), /* @__PURE__ */ React10.createElement(import_ui6.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React10.createElement(SelectControl, { options: props.sizes }))))));
|
|
350
375
|
});
|
|
351
376
|
|
|
352
|
-
// src/controls/
|
|
377
|
+
// src/controls/autocomplete-control.tsx
|
|
353
378
|
var React11 = __toESM(require("react"));
|
|
379
|
+
var import_react5 = require("react");
|
|
354
380
|
var import_editor_props4 = require("@elementor/editor-props");
|
|
381
|
+
var import_icons2 = require("@elementor/icons");
|
|
355
382
|
var import_ui7 = require("@elementor/ui");
|
|
383
|
+
var AutocompleteControl = createControl(
|
|
384
|
+
({
|
|
385
|
+
options,
|
|
386
|
+
placeholder = "",
|
|
387
|
+
allowCustomValues = false,
|
|
388
|
+
propType = import_editor_props4.stringPropTypeUtil,
|
|
389
|
+
minInputLength = 2
|
|
390
|
+
}) => {
|
|
391
|
+
const { value = "", setValue } = useBoundProp(propType);
|
|
392
|
+
const [inputValue, setInputValue] = (0, import_react5.useState)(
|
|
393
|
+
value && options[value]?.label ? options[value]?.label : value
|
|
394
|
+
);
|
|
395
|
+
const hasSelectedValue = !!(inputValue && (options[inputValue] || Object.values(options).find(({ label }) => label === inputValue)));
|
|
396
|
+
const allowClear = !!inputValue;
|
|
397
|
+
const formattedOptions = Object.keys(options);
|
|
398
|
+
const handleChange = (_, newValue = null) => {
|
|
399
|
+
const formattedInputValue = newValue && options[newValue]?.label ? options[newValue]?.label : newValue;
|
|
400
|
+
setInputValue(formattedInputValue || "");
|
|
401
|
+
if (!allowCustomValues && newValue && !options[newValue]) {
|
|
402
|
+
return;
|
|
403
|
+
}
|
|
404
|
+
setValue(newValue);
|
|
405
|
+
};
|
|
406
|
+
const filterOptions = () => {
|
|
407
|
+
const formattedValue = inputValue?.toLowerCase() || "";
|
|
408
|
+
if (formattedValue.length < minInputLength) {
|
|
409
|
+
return [];
|
|
410
|
+
}
|
|
411
|
+
return formattedOptions.filter(
|
|
412
|
+
(optionValue) => optionValue.toLowerCase().indexOf(formattedValue) !== -1 || options[optionValue].label.toLowerCase().indexOf(formattedValue) !== -1
|
|
413
|
+
);
|
|
414
|
+
};
|
|
415
|
+
const isOptionEqualToValue = () => {
|
|
416
|
+
return muiWarningPreventer() ? void 0 : () => true;
|
|
417
|
+
};
|
|
418
|
+
const muiWarningPreventer = () => allowCustomValues || !!filterOptions().length;
|
|
419
|
+
return /* @__PURE__ */ React11.createElement(ControlActions, null, /* @__PURE__ */ React11.createElement(
|
|
420
|
+
import_ui7.Autocomplete,
|
|
421
|
+
{
|
|
422
|
+
forcePopupIcon: false,
|
|
423
|
+
disableClearable: true,
|
|
424
|
+
freeSolo: muiWarningPreventer(),
|
|
425
|
+
value: inputValue || "",
|
|
426
|
+
size: "tiny",
|
|
427
|
+
onChange: handleChange,
|
|
428
|
+
onInputChange: handleChange,
|
|
429
|
+
onBlur: allowCustomValues ? void 0 : () => handleChange(null, value),
|
|
430
|
+
readOnly: hasSelectedValue,
|
|
431
|
+
options: formattedOptions,
|
|
432
|
+
getOptionKey: (option) => option,
|
|
433
|
+
getOptionLabel: (option) => options[option]?.label ?? option,
|
|
434
|
+
groupBy: shouldGroupOptions(options) ? (option) => options[option]?.groupLabel : void 0,
|
|
435
|
+
isOptionEqualToValue: isOptionEqualToValue(),
|
|
436
|
+
filterOptions,
|
|
437
|
+
renderOption: (optionProps, option) => /* @__PURE__ */ React11.createElement(import_ui7.Box, { component: "li", ...optionProps, key: optionProps.id }, options[option]?.label ?? option),
|
|
438
|
+
renderInput: (params) => /* @__PURE__ */ React11.createElement(
|
|
439
|
+
TextInput,
|
|
440
|
+
{
|
|
441
|
+
params,
|
|
442
|
+
handleChange,
|
|
443
|
+
allowClear,
|
|
444
|
+
placeholder,
|
|
445
|
+
hasSelectedValue
|
|
446
|
+
}
|
|
447
|
+
)
|
|
448
|
+
}
|
|
449
|
+
));
|
|
450
|
+
}
|
|
451
|
+
);
|
|
452
|
+
var TextInput = ({
|
|
453
|
+
params,
|
|
454
|
+
allowClear,
|
|
455
|
+
placeholder,
|
|
456
|
+
handleChange,
|
|
457
|
+
hasSelectedValue
|
|
458
|
+
}) => {
|
|
459
|
+
return /* @__PURE__ */ React11.createElement(
|
|
460
|
+
import_ui7.TextField,
|
|
461
|
+
{
|
|
462
|
+
...params,
|
|
463
|
+
placeholder,
|
|
464
|
+
sx: {
|
|
465
|
+
"& .MuiInputBase-input": {
|
|
466
|
+
cursor: hasSelectedValue ? "default" : void 0
|
|
467
|
+
}
|
|
468
|
+
},
|
|
469
|
+
InputProps: {
|
|
470
|
+
...params.InputProps,
|
|
471
|
+
endAdornment: /* @__PURE__ */ React11.createElement(ClearButton, { params, allowClear, handleChange })
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
);
|
|
475
|
+
};
|
|
476
|
+
var ClearButton = ({
|
|
477
|
+
allowClear,
|
|
478
|
+
handleChange,
|
|
479
|
+
params
|
|
480
|
+
}) => /* @__PURE__ */ React11.createElement(import_ui7.InputAdornment, { position: "end" }, allowClear && /* @__PURE__ */ React11.createElement(import_ui7.IconButton, { size: params.size, onClick: handleChange, sx: { cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(import_icons2.XIcon, { fontSize: params.size })));
|
|
481
|
+
function shouldGroupOptions(options) {
|
|
482
|
+
return Object.values(options).every((option) => "groupLabel" in option);
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
// src/controls/text-control.tsx
|
|
486
|
+
var React12 = __toESM(require("react"));
|
|
487
|
+
var import_editor_props5 = require("@elementor/editor-props");
|
|
488
|
+
var import_ui8 = require("@elementor/ui");
|
|
356
489
|
var TextControl = createControl(({ placeholder }) => {
|
|
357
|
-
const { value, setValue } = useBoundProp(
|
|
490
|
+
const { value, setValue } = useBoundProp(import_editor_props5.stringPropTypeUtil);
|
|
358
491
|
const handleChange = (event) => setValue(event.target.value);
|
|
359
|
-
return /* @__PURE__ */
|
|
360
|
-
|
|
492
|
+
return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
|
|
493
|
+
import_ui8.TextField,
|
|
361
494
|
{
|
|
362
495
|
size: "tiny",
|
|
363
496
|
fullWidth: true,
|
|
@@ -369,16 +502,16 @@ var TextControl = createControl(({ placeholder }) => {
|
|
|
369
502
|
});
|
|
370
503
|
|
|
371
504
|
// src/controls/text-area-control.tsx
|
|
372
|
-
var
|
|
373
|
-
var
|
|
374
|
-
var
|
|
505
|
+
var React13 = __toESM(require("react"));
|
|
506
|
+
var import_editor_props6 = require("@elementor/editor-props");
|
|
507
|
+
var import_ui9 = require("@elementor/ui");
|
|
375
508
|
var TextAreaControl = createControl(({ placeholder }) => {
|
|
376
|
-
const { value, setValue } = useBoundProp(
|
|
509
|
+
const { value, setValue } = useBoundProp(import_editor_props6.stringPropTypeUtil);
|
|
377
510
|
const handleChange = (event) => {
|
|
378
511
|
setValue(event.target.value);
|
|
379
512
|
};
|
|
380
|
-
return /* @__PURE__ */
|
|
381
|
-
|
|
513
|
+
return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(
|
|
514
|
+
import_ui9.TextField,
|
|
382
515
|
{
|
|
383
516
|
size: "tiny",
|
|
384
517
|
multiline: true,
|
|
@@ -392,18 +525,18 @@ var TextAreaControl = createControl(({ placeholder }) => {
|
|
|
392
525
|
});
|
|
393
526
|
|
|
394
527
|
// src/controls/size-control.tsx
|
|
395
|
-
var
|
|
396
|
-
var
|
|
397
|
-
var
|
|
528
|
+
var React15 = __toESM(require("react"));
|
|
529
|
+
var import_editor_props7 = require("@elementor/editor-props");
|
|
530
|
+
var import_ui11 = require("@elementor/ui");
|
|
398
531
|
|
|
399
532
|
// src/components/text-field-inner-selection.tsx
|
|
400
|
-
var
|
|
401
|
-
var
|
|
402
|
-
var
|
|
403
|
-
var TextFieldInnerSelection = (0,
|
|
533
|
+
var React14 = __toESM(require("react"));
|
|
534
|
+
var import_react6 = require("react");
|
|
535
|
+
var import_ui10 = require("@elementor/ui");
|
|
536
|
+
var TextFieldInnerSelection = (0, import_react6.forwardRef)(
|
|
404
537
|
({ placeholder, type, value, onChange, endAdornment, startAdornment }, ref) => {
|
|
405
|
-
return /* @__PURE__ */
|
|
406
|
-
|
|
538
|
+
return /* @__PURE__ */ React14.createElement(
|
|
539
|
+
import_ui10.TextField,
|
|
407
540
|
{
|
|
408
541
|
size: "tiny",
|
|
409
542
|
fullWidth: true,
|
|
@@ -425,28 +558,28 @@ var SelectionEndAdornment = ({
|
|
|
425
558
|
onClick,
|
|
426
559
|
value
|
|
427
560
|
}) => {
|
|
428
|
-
const popupState = (0,
|
|
561
|
+
const popupState = (0, import_ui10.usePopupState)({
|
|
429
562
|
variant: "popover",
|
|
430
|
-
popupId: (0,
|
|
563
|
+
popupId: (0, import_react6.useId)()
|
|
431
564
|
});
|
|
432
565
|
const handleMenuItemClick = (index) => {
|
|
433
566
|
onClick(options[index]);
|
|
434
567
|
popupState.close();
|
|
435
568
|
};
|
|
436
|
-
return /* @__PURE__ */
|
|
437
|
-
|
|
569
|
+
return /* @__PURE__ */ React14.createElement(import_ui10.InputAdornment, { position: "end" }, /* @__PURE__ */ React14.createElement(
|
|
570
|
+
import_ui10.Button,
|
|
438
571
|
{
|
|
439
572
|
size: "small",
|
|
440
573
|
color: "inherit",
|
|
441
574
|
sx: { font: "inherit", minWidth: "initial" },
|
|
442
|
-
...(0,
|
|
575
|
+
...(0, import_ui10.bindTrigger)(popupState)
|
|
443
576
|
},
|
|
444
577
|
value.toUpperCase()
|
|
445
|
-
), /* @__PURE__ */
|
|
578
|
+
), /* @__PURE__ */ React14.createElement(import_ui10.Menu, { MenuListProps: { dense: true }, ...(0, import_ui10.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React14.createElement(import_ui10.MenuItem, { key: option, onClick: () => handleMenuItemClick(index) }, option.toUpperCase()))));
|
|
446
579
|
};
|
|
447
580
|
|
|
448
581
|
// src/hooks/use-sync-external-state.tsx
|
|
449
|
-
var
|
|
582
|
+
var import_react7 = require("react");
|
|
450
583
|
var useSyncExternalState = ({
|
|
451
584
|
external,
|
|
452
585
|
setExternal,
|
|
@@ -465,8 +598,8 @@ var useSyncExternalState = ({
|
|
|
465
598
|
}
|
|
466
599
|
return externalValue;
|
|
467
600
|
}
|
|
468
|
-
const [internal, setInternal] = (0,
|
|
469
|
-
(0,
|
|
601
|
+
const [internal, setInternal] = (0, import_react7.useState)(toInternal(external, null));
|
|
602
|
+
(0, import_react7.useEffect)(() => {
|
|
470
603
|
setInternal((prevInternal) => toInternal(external, prevInternal));
|
|
471
604
|
}, [external]);
|
|
472
605
|
const setInternalValue = (setter) => {
|
|
@@ -483,7 +616,7 @@ var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
|
|
|
483
616
|
var defaultUnit = "px";
|
|
484
617
|
var defaultSize = NaN;
|
|
485
618
|
var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, startIcon }) => {
|
|
486
|
-
const { value, setValue } = useBoundProp(
|
|
619
|
+
const { value, setValue } = useBoundProp(import_editor_props7.sizePropTypeUtil);
|
|
487
620
|
const [state, setState] = useSyncExternalState({
|
|
488
621
|
external: value,
|
|
489
622
|
setExternal: setValue,
|
|
@@ -503,10 +636,10 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
503
636
|
size: size || size === "0" ? parseFloat(size) : defaultSize
|
|
504
637
|
}));
|
|
505
638
|
};
|
|
506
|
-
return /* @__PURE__ */
|
|
639
|
+
return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(
|
|
507
640
|
TextFieldInnerSelection,
|
|
508
641
|
{
|
|
509
|
-
endAdornment: /* @__PURE__ */
|
|
642
|
+
endAdornment: /* @__PURE__ */ React15.createElement(
|
|
510
643
|
SelectionEndAdornment,
|
|
511
644
|
{
|
|
512
645
|
options: units2,
|
|
@@ -515,7 +648,7 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
515
648
|
}
|
|
516
649
|
),
|
|
517
650
|
placeholder,
|
|
518
|
-
startAdornment: startIcon ?? /* @__PURE__ */
|
|
651
|
+
startAdornment: startIcon ?? /* @__PURE__ */ React15.createElement(import_ui11.InputAdornment, { position: "start" }, startIcon),
|
|
519
652
|
type: "number",
|
|
520
653
|
value: Number.isNaN(state?.size) ? "" : state?.size,
|
|
521
654
|
onChange: handleSizeChange
|
|
@@ -524,42 +657,42 @@ var SizeControl = createControl(({ units: units2 = defaultUnits, placeholder, st
|
|
|
524
657
|
});
|
|
525
658
|
|
|
526
659
|
// src/controls/stroke-control.tsx
|
|
527
|
-
var
|
|
528
|
-
var
|
|
529
|
-
var
|
|
660
|
+
var React17 = __toESM(require("react"));
|
|
661
|
+
var import_editor_props9 = require("@elementor/editor-props");
|
|
662
|
+
var import_ui13 = require("@elementor/ui");
|
|
530
663
|
var import_i18n3 = require("@wordpress/i18n");
|
|
531
664
|
|
|
532
665
|
// src/controls/color-control.tsx
|
|
533
|
-
var
|
|
534
|
-
var
|
|
535
|
-
var
|
|
536
|
-
var ColorControl = createControl(({ propTypeUtil =
|
|
666
|
+
var React16 = __toESM(require("react"));
|
|
667
|
+
var import_editor_props8 = require("@elementor/editor-props");
|
|
668
|
+
var import_ui12 = require("@elementor/ui");
|
|
669
|
+
var ColorControl = createControl(({ propTypeUtil = import_editor_props8.colorPropTypeUtil, ...props }) => {
|
|
537
670
|
const { value, setValue } = useBoundProp(propTypeUtil);
|
|
538
671
|
const handleChange = (selectedColor) => {
|
|
539
672
|
setValue(selectedColor);
|
|
540
673
|
};
|
|
541
|
-
return /* @__PURE__ */
|
|
674
|
+
return /* @__PURE__ */ React16.createElement(ControlActions, null, /* @__PURE__ */ React16.createElement(import_ui12.UnstableColorField, { size: "tiny", ...props, value: value ?? "", onChange: handleChange, fullWidth: true }));
|
|
542
675
|
});
|
|
543
676
|
|
|
544
677
|
// src/controls/stroke-control.tsx
|
|
545
678
|
var units = ["px", "em", "rem"];
|
|
546
679
|
var StrokeControl = createControl(() => {
|
|
547
|
-
const propContext = useBoundProp(
|
|
548
|
-
return /* @__PURE__ */
|
|
680
|
+
const propContext = useBoundProp(import_editor_props9.strokePropTypeUtil);
|
|
681
|
+
return /* @__PURE__ */ React17.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React17.createElement(import_ui13.Stack, { gap: 1.5 }, /* @__PURE__ */ React17.createElement(Control, { bind: "width", label: (0, import_i18n3.__)("Stroke Width", "elementor") }, /* @__PURE__ */ React17.createElement(SizeControl, { units })), /* @__PURE__ */ React17.createElement(Control, { bind: "color", label: (0, import_i18n3.__)("Stroke Color", "elementor") }, /* @__PURE__ */ React17.createElement(ColorControl, null))));
|
|
549
682
|
});
|
|
550
|
-
var Control = ({ bind, label, children }) => /* @__PURE__ */
|
|
683
|
+
var Control = ({ bind, label, children }) => /* @__PURE__ */ React17.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React17.createElement(ControlLabel, null, label)), /* @__PURE__ */ React17.createElement(import_ui13.Grid, { item: true, xs: 6 }, children)));
|
|
551
684
|
|
|
552
685
|
// src/controls/box-shadow-repeater-control.tsx
|
|
553
|
-
var
|
|
554
|
-
var
|
|
555
|
-
var
|
|
686
|
+
var React19 = __toESM(require("react"));
|
|
687
|
+
var import_editor_props10 = require("@elementor/editor-props");
|
|
688
|
+
var import_ui15 = require("@elementor/ui");
|
|
556
689
|
var import_i18n5 = require("@wordpress/i18n");
|
|
557
690
|
|
|
558
691
|
// src/components/repeater.tsx
|
|
559
|
-
var
|
|
560
|
-
var
|
|
561
|
-
var
|
|
562
|
-
var
|
|
692
|
+
var React18 = __toESM(require("react"));
|
|
693
|
+
var import_react8 = require("react");
|
|
694
|
+
var import_icons3 = require("@elementor/icons");
|
|
695
|
+
var import_ui14 = require("@elementor/ui");
|
|
563
696
|
var import_i18n4 = require("@wordpress/i18n");
|
|
564
697
|
var SIZE = "tiny";
|
|
565
698
|
var Repeater = ({
|
|
@@ -593,22 +726,24 @@ var Repeater = ({
|
|
|
593
726
|
})
|
|
594
727
|
);
|
|
595
728
|
};
|
|
596
|
-
return /* @__PURE__ */
|
|
729
|
+
return /* @__PURE__ */ React18.createElement(import_ui14.Stack, null, /* @__PURE__ */ React18.createElement(import_ui14.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui14.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React18.createElement(import_ui14.IconButton, { size: SIZE, onClick: addRepeaterItem, "aria-label": (0, import_i18n4.__)("Add item", "elementor") }, /* @__PURE__ */ React18.createElement(import_icons3.PlusIcon, { fontSize: SIZE }))), /* @__PURE__ */ React18.createElement(import_ui14.Stack, { gap: 1 }, repeaterValues.map((value, index) => /* @__PURE__ */ React18.createElement(
|
|
597
730
|
RepeaterItem,
|
|
598
731
|
{
|
|
599
732
|
key: index,
|
|
733
|
+
bind: String(index),
|
|
600
734
|
disabled: value.disabled,
|
|
601
|
-
label: /* @__PURE__ */
|
|
602
|
-
startIcon: /* @__PURE__ */
|
|
735
|
+
label: /* @__PURE__ */ React18.createElement(itemSettings.Label, { value }),
|
|
736
|
+
startIcon: /* @__PURE__ */ React18.createElement(itemSettings.Icon, { value }),
|
|
603
737
|
removeItem: () => removeRepeaterItem(index),
|
|
604
738
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
605
739
|
toggleDisableItem: () => toggleDisableRepeaterItem(index)
|
|
606
740
|
},
|
|
607
|
-
(props) => /* @__PURE__ */
|
|
741
|
+
(props) => /* @__PURE__ */ React18.createElement(itemSettings.Content, { ...props, bind: String(index) })
|
|
608
742
|
))));
|
|
609
743
|
};
|
|
610
744
|
var RepeaterItem = ({
|
|
611
745
|
label,
|
|
746
|
+
bind,
|
|
612
747
|
disabled,
|
|
613
748
|
startIcon,
|
|
614
749
|
children,
|
|
@@ -616,49 +751,49 @@ var RepeaterItem = ({
|
|
|
616
751
|
duplicateItem,
|
|
617
752
|
toggleDisableItem
|
|
618
753
|
}) => {
|
|
619
|
-
const popupId =
|
|
620
|
-
const controlRef = (0,
|
|
621
|
-
const [anchorEl, setAnchorEl] = (0,
|
|
622
|
-
const popoverState = (0,
|
|
623
|
-
const popoverProps = (0,
|
|
624
|
-
return /* @__PURE__ */
|
|
625
|
-
|
|
754
|
+
const popupId = `repeater-popup-${bind}`;
|
|
755
|
+
const controlRef = (0, import_react8.useRef)(null);
|
|
756
|
+
const [anchorEl, setAnchorEl] = (0, import_react8.useState)(null);
|
|
757
|
+
const popoverState = (0, import_ui14.usePopupState)({ popupId, variant: "popover" });
|
|
758
|
+
const popoverProps = (0, import_ui14.bindPopover)(popoverState);
|
|
759
|
+
return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
760
|
+
import_ui14.UnstableTag,
|
|
626
761
|
{
|
|
627
762
|
label,
|
|
628
763
|
showActionsOnHover: true,
|
|
629
764
|
ref: controlRef,
|
|
630
765
|
variant: "outlined",
|
|
631
766
|
"aria-label": (0, import_i18n4.__)("Open item", "elementor"),
|
|
632
|
-
...(0,
|
|
767
|
+
...(0, import_ui14.bindTrigger)(popoverState),
|
|
633
768
|
startIcon,
|
|
634
|
-
actions: /* @__PURE__ */
|
|
635
|
-
|
|
769
|
+
actions: /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
|
|
770
|
+
import_ui14.IconButton,
|
|
636
771
|
{
|
|
637
772
|
size: SIZE,
|
|
638
773
|
onClick: duplicateItem,
|
|
639
774
|
"aria-label": (0, import_i18n4.__)("Duplicate item", "elementor")
|
|
640
775
|
},
|
|
641
|
-
/* @__PURE__ */
|
|
642
|
-
), /* @__PURE__ */
|
|
643
|
-
|
|
776
|
+
/* @__PURE__ */ React18.createElement(import_icons3.CopyIcon, { fontSize: SIZE })
|
|
777
|
+
), /* @__PURE__ */ React18.createElement(
|
|
778
|
+
import_ui14.IconButton,
|
|
644
779
|
{
|
|
645
780
|
size: SIZE,
|
|
646
781
|
onClick: toggleDisableItem,
|
|
647
782
|
"aria-label": disabled ? (0, import_i18n4.__)("Enable item", "elementor") : (0, import_i18n4.__)("Disable item", "elementor")
|
|
648
783
|
},
|
|
649
|
-
disabled ? /* @__PURE__ */
|
|
650
|
-
), /* @__PURE__ */
|
|
651
|
-
|
|
784
|
+
disabled ? /* @__PURE__ */ React18.createElement(import_icons3.EyeOffIcon, { fontSize: SIZE }) : /* @__PURE__ */ React18.createElement(import_icons3.EyeIcon, { fontSize: SIZE })
|
|
785
|
+
), /* @__PURE__ */ React18.createElement(
|
|
786
|
+
import_ui14.IconButton,
|
|
652
787
|
{
|
|
653
788
|
size: SIZE,
|
|
654
789
|
onClick: removeItem,
|
|
655
790
|
"aria-label": (0, import_i18n4.__)("Remove item", "elementor")
|
|
656
791
|
},
|
|
657
|
-
/* @__PURE__ */
|
|
792
|
+
/* @__PURE__ */ React18.createElement(import_icons3.XIcon, { fontSize: SIZE })
|
|
658
793
|
))
|
|
659
794
|
}
|
|
660
|
-
), /* @__PURE__ */
|
|
661
|
-
|
|
795
|
+
), /* @__PURE__ */ React18.createElement(
|
|
796
|
+
import_ui14.Popover,
|
|
662
797
|
{
|
|
663
798
|
disablePortal: true,
|
|
664
799
|
slotProps: {
|
|
@@ -670,14 +805,14 @@ var RepeaterItem = ({
|
|
|
670
805
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
671
806
|
...popoverProps
|
|
672
807
|
},
|
|
673
|
-
/* @__PURE__ */
|
|
808
|
+
/* @__PURE__ */ React18.createElement(import_ui14.Box, { p: 0.5 }, children({ anchorEl }))
|
|
674
809
|
));
|
|
675
810
|
};
|
|
676
811
|
|
|
677
812
|
// src/controls/box-shadow-repeater-control.tsx
|
|
678
813
|
var BoxShadowRepeaterControl = createControl(() => {
|
|
679
|
-
const { propType, value, setValue } = useBoundProp(
|
|
680
|
-
return /* @__PURE__ */
|
|
814
|
+
const { propType, value, setValue } = useBoundProp(import_editor_props10.boxShadowPropTypeUtil);
|
|
815
|
+
return /* @__PURE__ */ React19.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React19.createElement(
|
|
681
816
|
Repeater,
|
|
682
817
|
{
|
|
683
818
|
values: value ?? [],
|
|
@@ -692,13 +827,13 @@ var BoxShadowRepeaterControl = createControl(() => {
|
|
|
692
827
|
}
|
|
693
828
|
));
|
|
694
829
|
});
|
|
695
|
-
var ItemIcon = ({ value }) => /* @__PURE__ */
|
|
830
|
+
var ItemIcon = ({ value }) => /* @__PURE__ */ React19.createElement(import_ui15.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color.value });
|
|
696
831
|
var ItemContent = ({ anchorEl, bind }) => {
|
|
697
|
-
return /* @__PURE__ */
|
|
832
|
+
return /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React19.createElement(Content, { anchorEl }));
|
|
698
833
|
};
|
|
699
834
|
var Content = ({ anchorEl }) => {
|
|
700
|
-
const { propType, value, setValue } = useBoundProp(
|
|
701
|
-
return /* @__PURE__ */
|
|
835
|
+
const { propType, value, setValue } = useBoundProp(import_editor_props10.shadowPropTypeUtil);
|
|
836
|
+
return /* @__PURE__ */ React19.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React19.createElement(import_ui15.Stack, { gap: 1.5 }, /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "color", label: (0, import_i18n5.__)("Color", "elementor") }, /* @__PURE__ */ React19.createElement(
|
|
702
837
|
ColorControl,
|
|
703
838
|
{
|
|
704
839
|
slotProps: {
|
|
@@ -715,7 +850,7 @@ var Content = ({ anchorEl }) => {
|
|
|
715
850
|
}
|
|
716
851
|
}
|
|
717
852
|
}
|
|
718
|
-
)), /* @__PURE__ */
|
|
853
|
+
)), /* @__PURE__ */ React19.createElement(Control2, { bind: "position", label: (0, import_i18n5.__)("Position", "elementor") }, /* @__PURE__ */ React19.createElement(
|
|
719
854
|
SelectControl,
|
|
720
855
|
{
|
|
721
856
|
options: [
|
|
@@ -723,9 +858,9 @@ var Content = ({ anchorEl }) => {
|
|
|
723
858
|
{ label: (0, import_i18n5.__)("Outset", "elementor"), value: "" }
|
|
724
859
|
]
|
|
725
860
|
}
|
|
726
|
-
))), /* @__PURE__ */
|
|
861
|
+
))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "hOffset", label: (0, import_i18n5.__)("Horizontal", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "vOffset", label: (0, import_i18n5.__)("Vertical", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null))), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React19.createElement(Control2, { bind: "blur", label: (0, import_i18n5.__)("Blur", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)), /* @__PURE__ */ React19.createElement(Control2, { bind: "spread", label: (0, import_i18n5.__)("Spread", "elementor") }, /* @__PURE__ */ React19.createElement(SizeControl, null)))));
|
|
727
862
|
};
|
|
728
|
-
var Control2 = ({ label, bind, children }) => /* @__PURE__ */
|
|
863
|
+
var Control2 = ({ label, bind, children }) => /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React19.createElement(import_ui15.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React19.createElement(import_ui15.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui15.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React19.createElement(import_ui15.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label)), /* @__PURE__ */ React19.createElement(import_ui15.Grid, { item: true, xs: 12 }, children))));
|
|
729
864
|
var ItemLabel = ({ value }) => {
|
|
730
865
|
const { position, hOffset, vOffset, blur, spread } = value.value;
|
|
731
866
|
const { size: blurSize = "", unit: blurUnit = "" } = blur?.value || {};
|
|
@@ -738,7 +873,7 @@ var ItemLabel = ({ value }) => {
|
|
|
738
873
|
blurSize + blurUnit,
|
|
739
874
|
spreadSize + spreadUnit
|
|
740
875
|
].join(" ");
|
|
741
|
-
return /* @__PURE__ */
|
|
876
|
+
return /* @__PURE__ */ React19.createElement("span", { style: { textTransform: "capitalize" } }, position ?? "outset", ": ", sizes);
|
|
742
877
|
};
|
|
743
878
|
var initialShadow = {
|
|
744
879
|
$$type: "shadow",
|
|
@@ -768,13 +903,13 @@ var initialShadow = {
|
|
|
768
903
|
};
|
|
769
904
|
|
|
770
905
|
// src/controls/toggle-control.tsx
|
|
771
|
-
var
|
|
772
|
-
var
|
|
906
|
+
var React21 = __toESM(require("react"));
|
|
907
|
+
var import_editor_props11 = require("@elementor/editor-props");
|
|
773
908
|
|
|
774
909
|
// src/components/control-toggle-button-group.tsx
|
|
775
|
-
var
|
|
776
|
-
var
|
|
777
|
-
var StyledToggleButtonGroup = (0,
|
|
910
|
+
var React20 = __toESM(require("react"));
|
|
911
|
+
var import_ui16 = require("@elementor/ui");
|
|
912
|
+
var StyledToggleButtonGroup = (0, import_ui16.styled)(import_ui16.ToggleButtonGroup)`
|
|
778
913
|
${({ justify }) => `justify-content: ${justify};`}
|
|
779
914
|
`;
|
|
780
915
|
var ControlToggleButtonGroup = ({
|
|
@@ -786,11 +921,11 @@ var ControlToggleButtonGroup = ({
|
|
|
786
921
|
exclusive = false,
|
|
787
922
|
fullWidth = false
|
|
788
923
|
}) => {
|
|
789
|
-
const isRtl = "rtl" === (0,
|
|
924
|
+
const isRtl = "rtl" === (0, import_ui16.useTheme)().direction;
|
|
790
925
|
const handleChange = (_, newValue) => {
|
|
791
926
|
onChange(newValue);
|
|
792
927
|
};
|
|
793
|
-
return /* @__PURE__ */
|
|
928
|
+
return /* @__PURE__ */ React20.createElement(
|
|
794
929
|
StyledToggleButtonGroup,
|
|
795
930
|
{
|
|
796
931
|
justify,
|
|
@@ -802,8 +937,8 @@ var ControlToggleButtonGroup = ({
|
|
|
802
937
|
}
|
|
803
938
|
},
|
|
804
939
|
items.map(
|
|
805
|
-
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */
|
|
806
|
-
|
|
940
|
+
({ label, value: buttonValue, renderContent: Content3, showTooltip }) => showTooltip ? /* @__PURE__ */ React20.createElement(import_ui16.Tooltip, { key: buttonValue, title: label, disableFocusListener: true, placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui16.ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React20.createElement(Content3, { size }))) : /* @__PURE__ */ React20.createElement(
|
|
941
|
+
import_ui16.ToggleButton,
|
|
807
942
|
{
|
|
808
943
|
key: buttonValue,
|
|
809
944
|
value: buttonValue,
|
|
@@ -811,7 +946,7 @@ var ControlToggleButtonGroup = ({
|
|
|
811
946
|
size,
|
|
812
947
|
fullWidth
|
|
813
948
|
},
|
|
814
|
-
/* @__PURE__ */
|
|
949
|
+
/* @__PURE__ */ React20.createElement(Content3, { size })
|
|
815
950
|
)
|
|
816
951
|
)
|
|
817
952
|
);
|
|
@@ -820,11 +955,11 @@ var ControlToggleButtonGroup = ({
|
|
|
820
955
|
// src/controls/toggle-control.tsx
|
|
821
956
|
var ToggleControl = createControl(
|
|
822
957
|
({ options, fullWidth = false, size = "tiny" }) => {
|
|
823
|
-
const { value, setValue } = useBoundProp(
|
|
958
|
+
const { value, setValue } = useBoundProp(import_editor_props11.stringPropTypeUtil);
|
|
824
959
|
const handleToggle = (option) => {
|
|
825
960
|
setValue(option);
|
|
826
961
|
};
|
|
827
|
-
return /* @__PURE__ */
|
|
962
|
+
return /* @__PURE__ */ React21.createElement(
|
|
828
963
|
ControlToggleButtonGroup,
|
|
829
964
|
{
|
|
830
965
|
items: options,
|
|
@@ -839,9 +974,9 @@ var ToggleControl = createControl(
|
|
|
839
974
|
);
|
|
840
975
|
|
|
841
976
|
// src/controls/number-control.tsx
|
|
842
|
-
var
|
|
843
|
-
var
|
|
844
|
-
var
|
|
977
|
+
var React22 = __toESM(require("react"));
|
|
978
|
+
var import_editor_props12 = require("@elementor/editor-props");
|
|
979
|
+
var import_ui17 = require("@elementor/ui");
|
|
845
980
|
var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
|
|
846
981
|
var NumberControl = createControl(
|
|
847
982
|
({
|
|
@@ -851,7 +986,7 @@ var NumberControl = createControl(
|
|
|
851
986
|
step = 1,
|
|
852
987
|
shouldForceInt = false
|
|
853
988
|
}) => {
|
|
854
|
-
const { value, setValue } = useBoundProp(
|
|
989
|
+
const { value, setValue } = useBoundProp(import_editor_props12.numberPropTypeUtil);
|
|
855
990
|
const handleChange = (event) => {
|
|
856
991
|
const eventValue = event.target.value;
|
|
857
992
|
if (isEmptyOrNaN(eventValue)) {
|
|
@@ -861,8 +996,8 @@ var NumberControl = createControl(
|
|
|
861
996
|
const formattedValue = shouldForceInt ? +parseInt(eventValue) : Number(eventValue);
|
|
862
997
|
setValue(Math.min(Math.max(formattedValue, min), max));
|
|
863
998
|
};
|
|
864
|
-
return /* @__PURE__ */
|
|
865
|
-
|
|
999
|
+
return /* @__PURE__ */ React22.createElement(ControlActions, null, /* @__PURE__ */ React22.createElement(
|
|
1000
|
+
import_ui17.TextField,
|
|
866
1001
|
{
|
|
867
1002
|
size: "tiny",
|
|
868
1003
|
type: "number",
|
|
@@ -877,10 +1012,10 @@ var NumberControl = createControl(
|
|
|
877
1012
|
);
|
|
878
1013
|
|
|
879
1014
|
// src/controls/equal-unequal-sizes-control.tsx
|
|
880
|
-
var
|
|
881
|
-
var
|
|
882
|
-
var
|
|
883
|
-
var
|
|
1015
|
+
var React23 = __toESM(require("react"));
|
|
1016
|
+
var import_react9 = require("react");
|
|
1017
|
+
var import_editor_props13 = require("@elementor/editor-props");
|
|
1018
|
+
var import_ui18 = require("@elementor/ui");
|
|
884
1019
|
var import_i18n6 = require("@wordpress/i18n");
|
|
885
1020
|
var isEqualSizes = (propValue, items) => {
|
|
886
1021
|
const values = Object.values(propValue);
|
|
@@ -898,21 +1033,21 @@ function EqualUnequalSizesControl({
|
|
|
898
1033
|
items,
|
|
899
1034
|
multiSizePropTypeUtil
|
|
900
1035
|
}) {
|
|
901
|
-
const popupId = (0,
|
|
902
|
-
const controlRef = (0,
|
|
903
|
-
const popupState = (0,
|
|
1036
|
+
const popupId = (0, import_react9.useId)();
|
|
1037
|
+
const controlRef = (0, import_react9.useRef)(null);
|
|
1038
|
+
const popupState = (0, import_ui18.usePopupState)({ variant: "popover", popupId });
|
|
904
1039
|
const {
|
|
905
1040
|
propType: multiSizePropType,
|
|
906
1041
|
value: multiSizeValue,
|
|
907
1042
|
setValue: setMultiSizeValue
|
|
908
1043
|
} = useBoundProp(multiSizePropTypeUtil);
|
|
909
|
-
const { value: sizeValue, setValue: setSizeValue } = useBoundProp(
|
|
1044
|
+
const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props13.sizePropTypeUtil);
|
|
910
1045
|
const splitEqualValue = () => {
|
|
911
1046
|
if (!sizeValue) {
|
|
912
1047
|
return null;
|
|
913
1048
|
}
|
|
914
1049
|
return items.reduce(
|
|
915
|
-
(acc, { bind }) => ({ ...acc, [bind]:
|
|
1050
|
+
(acc, { bind }) => ({ ...acc, [bind]: import_editor_props13.sizePropTypeUtil.create(sizeValue) }),
|
|
916
1051
|
{}
|
|
917
1052
|
);
|
|
918
1053
|
};
|
|
@@ -933,18 +1068,18 @@ function EqualUnequalSizesControl({
|
|
|
933
1068
|
}
|
|
934
1069
|
return splitEqualValue() ?? null;
|
|
935
1070
|
};
|
|
936
|
-
return /* @__PURE__ */
|
|
937
|
-
|
|
1071
|
+
return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: controlRef }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(SizeControl, { placeholder: (0, import_i18n6.__)("Mixed", "elementor") }), /* @__PURE__ */ React23.createElement(
|
|
1072
|
+
import_ui18.ToggleButton,
|
|
938
1073
|
{
|
|
939
1074
|
size: "tiny",
|
|
940
1075
|
value: "check",
|
|
941
1076
|
sx: { marginLeft: "auto" },
|
|
942
|
-
...(0,
|
|
1077
|
+
...(0, import_ui18.bindToggle)(popupState),
|
|
943
1078
|
selected: popupState.isOpen
|
|
944
1079
|
},
|
|
945
1080
|
icon
|
|
946
|
-
)))), /* @__PURE__ */
|
|
947
|
-
|
|
1081
|
+
)))), /* @__PURE__ */ React23.createElement(
|
|
1082
|
+
import_ui18.Popover,
|
|
948
1083
|
{
|
|
949
1084
|
disablePortal: true,
|
|
950
1085
|
disableScrollLock: true,
|
|
@@ -956,70 +1091,101 @@ function EqualUnequalSizesControl({
|
|
|
956
1091
|
vertical: "top",
|
|
957
1092
|
horizontal: "right"
|
|
958
1093
|
},
|
|
959
|
-
...(0,
|
|
1094
|
+
...(0, import_ui18.bindPopover)(popupState),
|
|
960
1095
|
slotProps: {
|
|
961
1096
|
paper: { sx: { mt: 0.5, p: 2, pt: 1, width: controlRef.current?.getBoundingClientRect().width } }
|
|
962
1097
|
}
|
|
963
1098
|
},
|
|
964
|
-
/* @__PURE__ */
|
|
1099
|
+
/* @__PURE__ */ React23.createElement(PropProvider, { propType: multiSizePropType, value: getMultiSizeValues(), setValue: setNestedProp }, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { gap: 1.5 }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(MultiSizeValueControl, { item: items[0] }), /* @__PURE__ */ React23.createElement(MultiSizeValueControl, { item: items[1] })), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React23.createElement(MultiSizeValueControl, { item: items[3] }), /* @__PURE__ */ React23.createElement(MultiSizeValueControl, { item: items[2] }))))
|
|
965
1100
|
));
|
|
966
1101
|
}
|
|
967
|
-
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */
|
|
1102
|
+
var MultiSizeValueControl = ({ item }) => /* @__PURE__ */ React23.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React23.createElement(import_ui18.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React23.createElement(SizeControl, { startIcon: item.icon })))));
|
|
968
1103
|
|
|
969
1104
|
// src/controls/linked-dimensions-control.tsx
|
|
970
|
-
var
|
|
971
|
-
var
|
|
972
|
-
var
|
|
973
|
-
var
|
|
1105
|
+
var React24 = __toESM(require("react"));
|
|
1106
|
+
var import_editor_props14 = require("@elementor/editor-props");
|
|
1107
|
+
var import_icons4 = require("@elementor/icons");
|
|
1108
|
+
var import_ui19 = require("@elementor/ui");
|
|
974
1109
|
var import_i18n7 = require("@wordpress/i18n");
|
|
975
1110
|
var LinkedDimensionsControl = createControl(({ label }) => {
|
|
976
|
-
const { value, setValue, propType } = useBoundProp(
|
|
977
|
-
const {
|
|
978
|
-
const
|
|
1111
|
+
const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp(import_editor_props14.dimensionsPropTypeUtil);
|
|
1112
|
+
const { value: sizeValue, setValue: setSizeValue } = useBoundProp(import_editor_props14.sizePropTypeUtil);
|
|
1113
|
+
const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
|
|
1114
|
+
const setValue = (newValue) => {
|
|
979
1115
|
if (!isLinked) {
|
|
980
|
-
|
|
1116
|
+
setDimensionsValue(newValue);
|
|
1117
|
+
return;
|
|
981
1118
|
}
|
|
982
|
-
|
|
983
|
-
setValue({
|
|
984
|
-
isLinked,
|
|
985
|
-
top: newDimension,
|
|
986
|
-
right: newDimension,
|
|
987
|
-
bottom: newDimension,
|
|
988
|
-
left: newDimension
|
|
989
|
-
});
|
|
1119
|
+
setSizeValue(newValue.top);
|
|
990
1120
|
};
|
|
991
|
-
const
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1121
|
+
const onLinkToggle = () => {
|
|
1122
|
+
if (!isLinked) {
|
|
1123
|
+
setSizeValue(dimensionsValue?.top.value);
|
|
1124
|
+
return;
|
|
1125
|
+
}
|
|
1126
|
+
const value = sizeValue ? import_editor_props14.sizePropTypeUtil.create(sizeValue) : null;
|
|
1127
|
+
setDimensionsValue({
|
|
1128
|
+
top: value,
|
|
1129
|
+
right: value,
|
|
1130
|
+
bottom: value,
|
|
1131
|
+
left: value
|
|
1132
|
+
});
|
|
1000
1133
|
};
|
|
1001
|
-
const LinkedIcon = isLinked ?
|
|
1002
|
-
return /* @__PURE__ */
|
|
1003
|
-
|
|
1134
|
+
const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
|
|
1135
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value: dimensionsValue, setValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
|
|
1136
|
+
import_ui19.ToggleButton,
|
|
1004
1137
|
{
|
|
1005
1138
|
"aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
|
|
1006
1139
|
size: "tiny",
|
|
1007
1140
|
value: "check",
|
|
1008
1141
|
selected: isLinked,
|
|
1009
1142
|
sx: { marginLeft: "auto" },
|
|
1010
|
-
onChange:
|
|
1143
|
+
onChange: onLinkToggle
|
|
1011
1144
|
},
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
)), /* @__PURE__ */
|
|
1145
|
+
/* @__PURE__ */ React24.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1146
|
+
)), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Top", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
|
|
1147
|
+
Control3,
|
|
1148
|
+
{
|
|
1149
|
+
bind: "top",
|
|
1150
|
+
startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }),
|
|
1151
|
+
isLinked
|
|
1152
|
+
}
|
|
1153
|
+
))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Right", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
|
|
1154
|
+
Control3,
|
|
1155
|
+
{
|
|
1156
|
+
bind: "right",
|
|
1157
|
+
startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }),
|
|
1158
|
+
isLinked
|
|
1159
|
+
}
|
|
1160
|
+
)))), /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Bottom", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
|
|
1161
|
+
Control3,
|
|
1162
|
+
{
|
|
1163
|
+
bind: "bottom",
|
|
1164
|
+
startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }),
|
|
1165
|
+
isLinked
|
|
1166
|
+
}
|
|
1167
|
+
))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(ControlLabel, null, (0, import_i18n7.__)("Left", "elementor"))), /* @__PURE__ */ React24.createElement(import_ui19.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React24.createElement(
|
|
1168
|
+
Control3,
|
|
1169
|
+
{
|
|
1170
|
+
bind: "left",
|
|
1171
|
+
startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }),
|
|
1172
|
+
isLinked
|
|
1173
|
+
}
|
|
1174
|
+
)))));
|
|
1014
1175
|
});
|
|
1015
|
-
var Control3 = ({ bind, startIcon }) =>
|
|
1176
|
+
var Control3 = ({ bind, startIcon, isLinked }) => {
|
|
1177
|
+
if (isLinked) {
|
|
1178
|
+
return /* @__PURE__ */ React24.createElement(SizeControl, { startIcon });
|
|
1179
|
+
}
|
|
1180
|
+
return /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
|
|
1181
|
+
};
|
|
1016
1182
|
|
|
1017
1183
|
// src/controls/font-family-control.tsx
|
|
1018
|
-
var
|
|
1019
|
-
var
|
|
1020
|
-
var
|
|
1021
|
-
var
|
|
1022
|
-
var
|
|
1184
|
+
var import_react10 = require("react");
|
|
1185
|
+
var React25 = __toESM(require("react"));
|
|
1186
|
+
var import_editor_props15 = require("@elementor/editor-props");
|
|
1187
|
+
var import_icons5 = require("@elementor/icons");
|
|
1188
|
+
var import_ui20 = require("@elementor/ui");
|
|
1023
1189
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1024
1190
|
|
|
1025
1191
|
// src/hooks/use-filtered-font-families.ts
|
|
@@ -1055,10 +1221,10 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
|
1055
1221
|
// src/controls/font-family-control.tsx
|
|
1056
1222
|
var SIZE2 = "tiny";
|
|
1057
1223
|
var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
1058
|
-
const [searchValue, setSearchValue] = (0,
|
|
1059
|
-
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(
|
|
1060
|
-
const popupId = (0,
|
|
1061
|
-
const popoverState = (0,
|
|
1224
|
+
const [searchValue, setSearchValue] = (0, import_react10.useState)("");
|
|
1225
|
+
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props15.stringPropTypeUtil);
|
|
1226
|
+
const popupId = (0, import_react10.useId)();
|
|
1227
|
+
const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
|
|
1062
1228
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1063
1229
|
if (!filteredFontFamilies) {
|
|
1064
1230
|
return null;
|
|
@@ -1070,26 +1236,26 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1070
1236
|
setSearchValue("");
|
|
1071
1237
|
popoverState.close();
|
|
1072
1238
|
};
|
|
1073
|
-
return /* @__PURE__ */
|
|
1074
|
-
|
|
1239
|
+
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
|
|
1240
|
+
import_ui20.UnstableTag,
|
|
1075
1241
|
{
|
|
1076
1242
|
variant: "outlined",
|
|
1077
1243
|
label: fontFamily,
|
|
1078
|
-
endIcon: /* @__PURE__ */
|
|
1079
|
-
...(0,
|
|
1244
|
+
endIcon: /* @__PURE__ */ React25.createElement(import_icons5.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1245
|
+
...(0, import_ui20.bindTrigger)(popoverState),
|
|
1080
1246
|
fullWidth: true
|
|
1081
1247
|
}
|
|
1082
|
-
), /* @__PURE__ */
|
|
1083
|
-
|
|
1248
|
+
), /* @__PURE__ */ React25.createElement(
|
|
1249
|
+
import_ui20.Popover,
|
|
1084
1250
|
{
|
|
1085
1251
|
disablePortal: true,
|
|
1086
1252
|
disableScrollLock: true,
|
|
1087
1253
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1088
|
-
...(0,
|
|
1254
|
+
...(0, import_ui20.bindPopover)(popoverState),
|
|
1089
1255
|
onClose: handleClose
|
|
1090
1256
|
},
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
|
|
1257
|
+
/* @__PURE__ */ React25.createElement(import_ui20.Stack, null, /* @__PURE__ */ React25.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", pl: 1.5, pr: 0.5, py: 1.5 }, /* @__PURE__ */ React25.createElement(import_icons5.EditIcon, { fontSize: SIZE2, sx: { mr: 0.5 } }), /* @__PURE__ */ React25.createElement(import_ui20.Typography, { variant: "subtitle2" }, (0, import_i18n9.__)("Font Family", "elementor")), /* @__PURE__ */ React25.createElement(import_ui20.IconButton, { size: SIZE2, sx: { ml: "auto" }, onClick: handleClose }, /* @__PURE__ */ React25.createElement(import_icons5.XIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React25.createElement(import_ui20.Box, { px: 1.5, pb: 1 }, /* @__PURE__ */ React25.createElement(
|
|
1258
|
+
import_ui20.TextField,
|
|
1093
1259
|
{
|
|
1094
1260
|
fullWidth: true,
|
|
1095
1261
|
size: SIZE2,
|
|
@@ -1097,13 +1263,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1097
1263
|
placeholder: (0, import_i18n9.__)("Search", "elementor"),
|
|
1098
1264
|
onChange: handleSearch,
|
|
1099
1265
|
InputProps: {
|
|
1100
|
-
startAdornment: /* @__PURE__ */
|
|
1266
|
+
startAdornment: /* @__PURE__ */ React25.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React25.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
|
|
1101
1267
|
}
|
|
1102
1268
|
}
|
|
1103
|
-
)), /* @__PURE__ */
|
|
1269
|
+
)), /* @__PURE__ */ React25.createElement(import_ui20.Divider, null), /* @__PURE__ */ React25.createElement(import_ui20.Box, { sx: { overflowY: "auto", height: 260, width: 220 } }, filteredFontFamilies.length > 0 ? /* @__PURE__ */ React25.createElement(import_ui20.MenuList, { role: "listbox", tabIndex: 0 }, filteredFontFamilies.map(([category, items], index) => /* @__PURE__ */ React25.createElement(import_react10.Fragment, { key: index }, /* @__PURE__ */ React25.createElement(import_ui20.ListSubheader, { sx: { typography: "caption", color: "text.tertiary" } }, category), items.map((item) => {
|
|
1104
1270
|
const isSelected = item === fontFamily;
|
|
1105
|
-
return /* @__PURE__ */
|
|
1106
|
-
|
|
1271
|
+
return /* @__PURE__ */ React25.createElement(
|
|
1272
|
+
import_ui20.MenuItem,
|
|
1107
1273
|
{
|
|
1108
1274
|
key: item,
|
|
1109
1275
|
selected: isSelected,
|
|
@@ -1117,8 +1283,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1117
1283
|
},
|
|
1118
1284
|
item
|
|
1119
1285
|
);
|
|
1120
|
-
})))) : /* @__PURE__ */
|
|
1121
|
-
|
|
1286
|
+
})))) : /* @__PURE__ */ React25.createElement(import_ui20.Stack, { alignItems: "center", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React25.createElement(import_icons5.PhotoIcon, { fontSize: "large" }), /* @__PURE__ */ React25.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n9.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React25.createElement("br", null), "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React25.createElement(import_ui20.Typography, { align: "center", variant: "caption", color: "text.secondary" }, /* @__PURE__ */ React25.createElement(
|
|
1287
|
+
import_ui20.Link,
|
|
1122
1288
|
{
|
|
1123
1289
|
color: "secondary",
|
|
1124
1290
|
variant: "caption",
|
|
@@ -1131,34 +1297,48 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1131
1297
|
});
|
|
1132
1298
|
|
|
1133
1299
|
// src/controls/url-control.tsx
|
|
1134
|
-
var
|
|
1135
|
-
var
|
|
1136
|
-
var
|
|
1300
|
+
var React26 = __toESM(require("react"));
|
|
1301
|
+
var import_editor_props16 = require("@elementor/editor-props");
|
|
1302
|
+
var import_ui21 = require("@elementor/ui");
|
|
1137
1303
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1138
|
-
const { value, setValue } = useBoundProp(
|
|
1304
|
+
const { value, setValue } = useBoundProp(import_editor_props16.urlPropTypeUtil);
|
|
1139
1305
|
const handleChange = (event) => setValue(event.target.value);
|
|
1140
|
-
return /* @__PURE__ */
|
|
1306
|
+
return /* @__PURE__ */ React26.createElement(ControlActions, null, /* @__PURE__ */ React26.createElement(
|
|
1307
|
+
import_ui21.TextField,
|
|
1308
|
+
{
|
|
1309
|
+
size: "tiny",
|
|
1310
|
+
fullWidth: true,
|
|
1311
|
+
value: value ?? "",
|
|
1312
|
+
onChange: handleChange,
|
|
1313
|
+
placeholder
|
|
1314
|
+
}
|
|
1315
|
+
));
|
|
1141
1316
|
});
|
|
1142
1317
|
|
|
1143
1318
|
// src/controls/link-control.tsx
|
|
1144
|
-
var
|
|
1145
|
-
var
|
|
1146
|
-
var
|
|
1147
|
-
var
|
|
1319
|
+
var React27 = __toESM(require("react"));
|
|
1320
|
+
var import_editor_props17 = require("@elementor/editor-props");
|
|
1321
|
+
var import_icons6 = require("@elementor/icons");
|
|
1322
|
+
var import_session = require("@elementor/session");
|
|
1323
|
+
var import_ui22 = require("@elementor/ui");
|
|
1148
1324
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1149
1325
|
var SIZE3 = "tiny";
|
|
1150
|
-
var
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1326
|
+
var LinkControl = createControl((props) => {
|
|
1327
|
+
const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props17.linkPropTypeUtil);
|
|
1328
|
+
const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
|
|
1329
|
+
const { allowCustomValues = false, options = {}, placeholder } = props || {};
|
|
1330
|
+
const onEnabledChange = () => {
|
|
1331
|
+
const { meta } = linkSessionValue ?? {};
|
|
1332
|
+
const { isEnabled } = meta ?? {};
|
|
1333
|
+
if (isEnabled && value) {
|
|
1334
|
+
setValue(null);
|
|
1335
|
+
} else if (linkSessionValue?.value) {
|
|
1336
|
+
setValue(linkSessionValue?.value ?? null);
|
|
1337
|
+
}
|
|
1338
|
+
setLinkSessionValue({ value, meta: { isEnabled: !isEnabled } });
|
|
1339
|
+
};
|
|
1340
|
+
return /* @__PURE__ */ React27.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { gap: 1.5 }, /* @__PURE__ */ React27.createElement(import_ui22.Divider, null), /* @__PURE__ */ React27.createElement(
|
|
1341
|
+
import_ui22.Stack,
|
|
1162
1342
|
{
|
|
1163
1343
|
direction: "row",
|
|
1164
1344
|
sx: {
|
|
@@ -1166,31 +1346,44 @@ var LinkControl = createControl(() => {
|
|
|
1166
1346
|
alignItems: "center"
|
|
1167
1347
|
}
|
|
1168
1348
|
},
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
|
|
1349
|
+
/* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n10.__)("Link", "elementor")),
|
|
1350
|
+
/* @__PURE__ */ React27.createElement(
|
|
1351
|
+
ToggleIconControl,
|
|
1352
|
+
{
|
|
1353
|
+
enabled: linkSessionValue?.meta?.isEnabled ?? false,
|
|
1354
|
+
onIconClick: onEnabledChange,
|
|
1355
|
+
label: (0, import_i18n10.__)("Toggle Link", "elementor")
|
|
1356
|
+
}
|
|
1357
|
+
)
|
|
1358
|
+
), /* @__PURE__ */ React27.createElement(import_ui22.Collapse, { in: linkSessionValue?.meta?.isEnabled, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React27.createElement(import_ui22.Stack, { gap: 1.5 }, /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: "href" }, /* @__PURE__ */ React27.createElement(
|
|
1359
|
+
AutocompleteControl,
|
|
1360
|
+
{
|
|
1361
|
+
allowCustomValues: Object.keys(options).length ? allowCustomValues : true,
|
|
1362
|
+
options,
|
|
1363
|
+
propType: import_editor_props17.urlPropTypeUtil,
|
|
1364
|
+
placeholder
|
|
1365
|
+
}
|
|
1366
|
+
)), /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React27.createElement(SwitchControl, null))))));
|
|
1172
1367
|
});
|
|
1173
|
-
var ToggleIconControl = () => {
|
|
1174
|
-
|
|
1175
|
-
const handleOnChange = () => setValue(!value);
|
|
1176
|
-
return /* @__PURE__ */ React26.createElement(import_ui21.IconButton, { size: SIZE3, onClick: handleOnChange }, value ? /* @__PURE__ */ React26.createElement(import_icons5.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React26.createElement(import_icons5.PlusIcon, { fontSize: SIZE3 }));
|
|
1368
|
+
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1369
|
+
return /* @__PURE__ */ React27.createElement(import_ui22.IconButton, { size: SIZE3, onClick: onIconClick, "aria-label": label }, enabled ? /* @__PURE__ */ React27.createElement(import_icons6.MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React27.createElement(import_icons6.PlusIcon, { fontSize: SIZE3 }));
|
|
1177
1370
|
};
|
|
1178
1371
|
var SwitchControl = () => {
|
|
1179
|
-
const { value = false, setValue } = useBoundProp();
|
|
1372
|
+
const { value = false, setValue } = useBoundProp(import_editor_props17.booleanPropTypeUtil);
|
|
1180
1373
|
const onChange = () => {
|
|
1181
1374
|
setValue(!value);
|
|
1182
1375
|
};
|
|
1183
|
-
return /* @__PURE__ */
|
|
1376
|
+
return /* @__PURE__ */ React27.createElement(import_ui22.Grid, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n10.__)("Open in new tab", "elementor"))), /* @__PURE__ */ React27.createElement(import_ui22.Grid, { item: true }, /* @__PURE__ */ React27.createElement(import_ui22.Switch, { checked: value, onChange })));
|
|
1184
1377
|
};
|
|
1185
1378
|
|
|
1186
1379
|
// src/controls/gap-control.tsx
|
|
1187
|
-
var
|
|
1188
|
-
var
|
|
1189
|
-
var
|
|
1190
|
-
var
|
|
1380
|
+
var React28 = __toESM(require("react"));
|
|
1381
|
+
var import_editor_props18 = require("@elementor/editor-props");
|
|
1382
|
+
var import_icons7 = require("@elementor/icons");
|
|
1383
|
+
var import_ui23 = require("@elementor/ui");
|
|
1191
1384
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1192
1385
|
var GapControl = createControl(({ label }) => {
|
|
1193
|
-
const { propType, value, setValue } = useBoundProp(
|
|
1386
|
+
const { propType, value, setValue } = useBoundProp(import_editor_props18.gapPropTypeUtil);
|
|
1194
1387
|
const { column, row, isLinked = true } = value || {};
|
|
1195
1388
|
const setLinkedValue = (newValue, _, meta) => {
|
|
1196
1389
|
if (!isLinked) {
|
|
@@ -1211,9 +1404,9 @@ var GapControl = createControl(({ label }) => {
|
|
|
1211
1404
|
};
|
|
1212
1405
|
setValue(updatedValue);
|
|
1213
1406
|
};
|
|
1214
|
-
const LinkedIcon = isLinked ?
|
|
1215
|
-
return /* @__PURE__ */
|
|
1216
|
-
|
|
1407
|
+
const LinkedIcon = isLinked ? import_icons7.LinkIcon : import_icons7.DetachIcon;
|
|
1408
|
+
return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(ControlLabel, null, label), /* @__PURE__ */ React28.createElement(
|
|
1409
|
+
import_ui23.ToggleButton,
|
|
1217
1410
|
{
|
|
1218
1411
|
"aria-label": (0, import_i18n11.__)("Link Inputs", "elementor"),
|
|
1219
1412
|
size: "tiny",
|
|
@@ -1222,28 +1415,29 @@ var GapControl = createControl(({ label }) => {
|
|
|
1222
1415
|
sx: { marginLeft: "auto" },
|
|
1223
1416
|
onChange: toggleLinked
|
|
1224
1417
|
},
|
|
1225
|
-
/* @__PURE__ */
|
|
1226
|
-
)), /* @__PURE__ */
|
|
1418
|
+
/* @__PURE__ */ React28.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1419
|
+
)), /* @__PURE__ */ React28.createElement(import_ui23.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Column", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "column" }, /* @__PURE__ */ React28.createElement(SizeControl, null)))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { container: true, gap: 1, alignItems: "center" }, /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(ControlLabel, null, (0, import_i18n11.__)("Row", "elementor"))), /* @__PURE__ */ React28.createElement(import_ui23.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind: "row" }, /* @__PURE__ */ React28.createElement(SizeControl, null))))));
|
|
1227
1420
|
});
|
|
1228
1421
|
|
|
1229
1422
|
// src/controls/background-control/background-control.tsx
|
|
1230
|
-
var
|
|
1231
|
-
var
|
|
1232
|
-
var
|
|
1423
|
+
var React30 = __toESM(require("react"));
|
|
1424
|
+
var import_editor_props20 = require("@elementor/editor-props");
|
|
1425
|
+
var import_ui25 = require("@elementor/ui");
|
|
1233
1426
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1234
1427
|
|
|
1235
1428
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1236
|
-
var
|
|
1237
|
-
var
|
|
1238
|
-
var
|
|
1429
|
+
var React29 = __toESM(require("react"));
|
|
1430
|
+
var import_editor_props19 = require("@elementor/editor-props");
|
|
1431
|
+
var import_ui24 = require("@elementor/ui");
|
|
1432
|
+
var import_wp_media2 = require("@elementor/wp-media");
|
|
1239
1433
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1240
1434
|
var initialBackgroundOverlay = {
|
|
1241
1435
|
$$type: "background-color-overlay",
|
|
1242
1436
|
value: "rgba(0, 0, 0, 0.2)"
|
|
1243
1437
|
};
|
|
1244
1438
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1245
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
1246
|
-
return /* @__PURE__ */
|
|
1439
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props19.backgroundOverlayPropTypeUtil);
|
|
1440
|
+
return /* @__PURE__ */ React29.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React29.createElement(
|
|
1247
1441
|
Repeater,
|
|
1248
1442
|
{
|
|
1249
1443
|
values: overlayValues ?? [],
|
|
@@ -1258,25 +1452,40 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1258
1452
|
}
|
|
1259
1453
|
));
|
|
1260
1454
|
});
|
|
1261
|
-
var ItemIcon2 = ({ value }) => /* @__PURE__ */
|
|
1455
|
+
var ItemIcon2 = ({ value }) => /* @__PURE__ */ React29.createElement(import_ui24.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
|
|
1262
1456
|
var ItemContent2 = ({ bind }) => {
|
|
1263
|
-
return /* @__PURE__ */
|
|
1457
|
+
return /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(Content2, null));
|
|
1264
1458
|
};
|
|
1265
1459
|
var Content2 = () => {
|
|
1266
|
-
|
|
1460
|
+
const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
|
|
1461
|
+
return /* @__PURE__ */ React29.createElement(import_ui24.Stack, { gap: 1.5 }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ControlLabel, null, (0, import_i18n12.__)("Color", "elementor"))), /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ColorControl, { propTypeUtil: import_editor_props19.backgroundColorOverlayPropTypeUtil }))), /* @__PURE__ */ React29.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: "image-src" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { container: true, spacing: 1, alignItems: "center" }, /* @__PURE__ */ React29.createElement(import_ui24.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React29.createElement(ImageMediaControl, null))))));
|
|
1267
1462
|
};
|
|
1268
1463
|
var ItemLabel2 = ({ value }) => {
|
|
1269
|
-
const
|
|
1270
|
-
|
|
1464
|
+
const type = value.$$type;
|
|
1465
|
+
if (type === "background-color-overlay") {
|
|
1466
|
+
return /* @__PURE__ */ React29.createElement(ItemLabelColor, { value });
|
|
1467
|
+
}
|
|
1468
|
+
if (type === "background-image-overlay") {
|
|
1469
|
+
return /* @__PURE__ */ React29.createElement(ItemLabelImage, { value });
|
|
1470
|
+
}
|
|
1471
|
+
};
|
|
1472
|
+
var ItemLabelColor = ({ value }) => {
|
|
1473
|
+
return /* @__PURE__ */ React29.createElement("span", null, value.value);
|
|
1474
|
+
};
|
|
1475
|
+
var ItemLabelImage = ({ value }) => {
|
|
1476
|
+
const { data: attachment } = (0, import_wp_media2.useWpMediaAttachment)(value?.value["image-src"]?.value.id.value || null);
|
|
1477
|
+
const imageTitle = attachment?.title || null;
|
|
1478
|
+
return /* @__PURE__ */ React29.createElement("span", null, imageTitle);
|
|
1271
1479
|
};
|
|
1272
1480
|
|
|
1273
1481
|
// src/controls/background-control/background-control.tsx
|
|
1274
1482
|
var BackgroundControl = createControl(() => {
|
|
1275
|
-
const propContext = useBoundProp(
|
|
1276
|
-
return /* @__PURE__ */
|
|
1483
|
+
const propContext = useBoundProp(import_editor_props20.backgroundPropTypeUtil);
|
|
1484
|
+
return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React30.createElement(import_ui25.Stack, { gap: 1.5 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React30.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlLabel, null, (0, import_i18n13.__)("Color", "elementor"))), /* @__PURE__ */ React30.createElement(import_ui25.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ColorControl, null))))));
|
|
1277
1485
|
});
|
|
1278
1486
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1279
1487
|
0 && (module.exports = {
|
|
1488
|
+
AutocompleteControl,
|
|
1280
1489
|
BackgroundControl,
|
|
1281
1490
|
BoxShadowRepeaterControl,
|
|
1282
1491
|
ColorControl,
|