@elementor/editor-controls 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/index.d.mts +37 -13
- package/dist/index.d.ts +37 -13
- package/dist/index.js +390 -212
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +331 -147
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
- 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/link-control.tsx +56 -26
- 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);
|
|
@@ -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,24 +1091,24 @@ 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(
|
|
1111
|
+
const { value, setValue, propType } = useBoundProp(import_editor_props14.linkedDimensionsPropTypeUtil);
|
|
977
1112
|
const { top, right, bottom, left, isLinked = true } = value || {};
|
|
978
1113
|
const setLinkedValue = (newValue, _, meta) => {
|
|
979
1114
|
if (!isLinked) {
|
|
@@ -998,9 +1133,9 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
998
1133
|
};
|
|
999
1134
|
setValue(updatedValue);
|
|
1000
1135
|
};
|
|
1001
|
-
const LinkedIcon = isLinked ?
|
|
1002
|
-
return /* @__PURE__ */
|
|
1003
|
-
|
|
1136
|
+
const LinkedIcon = isLinked ? import_icons4.LinkIcon : import_icons4.DetachIcon;
|
|
1137
|
+
return /* @__PURE__ */ React24.createElement(PropProvider, { propType, value, setValue: setLinkedValue }, /* @__PURE__ */ React24.createElement(import_ui19.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React24.createElement(ControlLabel, null, label), /* @__PURE__ */ React24.createElement(
|
|
1138
|
+
import_ui19.ToggleButton,
|
|
1004
1139
|
{
|
|
1005
1140
|
"aria-label": (0, import_i18n7.__)("Link Inputs", "elementor"),
|
|
1006
1141
|
size: "tiny",
|
|
@@ -1009,17 +1144,17 @@ var LinkedDimensionsControl = createControl(({ label }) => {
|
|
|
1009
1144
|
sx: { marginLeft: "auto" },
|
|
1010
1145
|
onChange: toggleLinked
|
|
1011
1146
|
},
|
|
1012
|
-
/* @__PURE__ */
|
|
1013
|
-
)), /* @__PURE__ */
|
|
1147
|
+
/* @__PURE__ */ React24.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1148
|
+
)), /* @__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(Control3, { bind: "top", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideTopIcon, { fontSize: "tiny" }) }))), /* @__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(Control3, { bind: "right", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideRightIcon, { fontSize: "tiny" }) })))), /* @__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(Control3, { bind: "bottom", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideBottomIcon, { fontSize: "tiny" }) }))), /* @__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(Control3, { bind: "left", startIcon: /* @__PURE__ */ React24.createElement(import_icons4.SideLeftIcon, { fontSize: "tiny" }) })))));
|
|
1014
1149
|
});
|
|
1015
|
-
var Control3 = ({ bind, startIcon }) => /* @__PURE__ */
|
|
1150
|
+
var Control3 = ({ bind, startIcon }) => /* @__PURE__ */ React24.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React24.createElement(SizeControl, { startIcon }));
|
|
1016
1151
|
|
|
1017
1152
|
// src/controls/font-family-control.tsx
|
|
1018
|
-
var
|
|
1019
|
-
var
|
|
1020
|
-
var
|
|
1021
|
-
var
|
|
1022
|
-
var
|
|
1153
|
+
var import_react10 = require("react");
|
|
1154
|
+
var React25 = __toESM(require("react"));
|
|
1155
|
+
var import_editor_props15 = require("@elementor/editor-props");
|
|
1156
|
+
var import_icons5 = require("@elementor/icons");
|
|
1157
|
+
var import_ui20 = require("@elementor/ui");
|
|
1023
1158
|
var import_i18n9 = require("@wordpress/i18n");
|
|
1024
1159
|
|
|
1025
1160
|
// src/hooks/use-filtered-font-families.ts
|
|
@@ -1055,10 +1190,10 @@ var useFilteredFontFamilies = (fontFamilies, searchValue) => {
|
|
|
1055
1190
|
// src/controls/font-family-control.tsx
|
|
1056
1191
|
var SIZE2 = "tiny";
|
|
1057
1192
|
var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
1058
|
-
const [searchValue, setSearchValue] = (0,
|
|
1059
|
-
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(
|
|
1060
|
-
const popupId = (0,
|
|
1061
|
-
const popoverState = (0,
|
|
1193
|
+
const [searchValue, setSearchValue] = (0, import_react10.useState)("");
|
|
1194
|
+
const { value: fontFamily, setValue: setFontFamily } = useBoundProp(import_editor_props15.stringPropTypeUtil);
|
|
1195
|
+
const popupId = (0, import_react10.useId)();
|
|
1196
|
+
const popoverState = (0, import_ui20.usePopupState)({ variant: "popover", popupId });
|
|
1062
1197
|
const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
|
|
1063
1198
|
if (!filteredFontFamilies) {
|
|
1064
1199
|
return null;
|
|
@@ -1070,26 +1205,26 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1070
1205
|
setSearchValue("");
|
|
1071
1206
|
popoverState.close();
|
|
1072
1207
|
};
|
|
1073
|
-
return /* @__PURE__ */
|
|
1074
|
-
|
|
1208
|
+
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
|
|
1209
|
+
import_ui20.UnstableTag,
|
|
1075
1210
|
{
|
|
1076
1211
|
variant: "outlined",
|
|
1077
1212
|
label: fontFamily,
|
|
1078
|
-
endIcon: /* @__PURE__ */
|
|
1079
|
-
...(0,
|
|
1213
|
+
endIcon: /* @__PURE__ */ React25.createElement(import_icons5.ChevronDownIcon, { fontSize: "tiny" }),
|
|
1214
|
+
...(0, import_ui20.bindTrigger)(popoverState),
|
|
1080
1215
|
fullWidth: true
|
|
1081
1216
|
}
|
|
1082
|
-
), /* @__PURE__ */
|
|
1083
|
-
|
|
1217
|
+
), /* @__PURE__ */ React25.createElement(
|
|
1218
|
+
import_ui20.Popover,
|
|
1084
1219
|
{
|
|
1085
1220
|
disablePortal: true,
|
|
1086
1221
|
disableScrollLock: true,
|
|
1087
1222
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
1088
|
-
...(0,
|
|
1223
|
+
...(0, import_ui20.bindPopover)(popoverState),
|
|
1089
1224
|
onClose: handleClose
|
|
1090
1225
|
},
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
|
|
1226
|
+
/* @__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(
|
|
1227
|
+
import_ui20.TextField,
|
|
1093
1228
|
{
|
|
1094
1229
|
fullWidth: true,
|
|
1095
1230
|
size: SIZE2,
|
|
@@ -1097,13 +1232,13 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1097
1232
|
placeholder: (0, import_i18n9.__)("Search", "elementor"),
|
|
1098
1233
|
onChange: handleSearch,
|
|
1099
1234
|
InputProps: {
|
|
1100
|
-
startAdornment: /* @__PURE__ */
|
|
1235
|
+
startAdornment: /* @__PURE__ */ React25.createElement(import_ui20.InputAdornment, { position: "start" }, /* @__PURE__ */ React25.createElement(import_icons5.SearchIcon, { fontSize: SIZE2 }))
|
|
1101
1236
|
}
|
|
1102
1237
|
}
|
|
1103
|
-
)), /* @__PURE__ */
|
|
1238
|
+
)), /* @__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
1239
|
const isSelected = item === fontFamily;
|
|
1105
|
-
return /* @__PURE__ */
|
|
1106
|
-
|
|
1240
|
+
return /* @__PURE__ */ React25.createElement(
|
|
1241
|
+
import_ui20.MenuItem,
|
|
1107
1242
|
{
|
|
1108
1243
|
key: item,
|
|
1109
1244
|
selected: isSelected,
|
|
@@ -1117,8 +1252,8 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1117
1252
|
},
|
|
1118
1253
|
item
|
|
1119
1254
|
);
|
|
1120
|
-
})))) : /* @__PURE__ */
|
|
1121
|
-
|
|
1255
|
+
})))) : /* @__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(
|
|
1256
|
+
import_ui20.Link,
|
|
1122
1257
|
{
|
|
1123
1258
|
color: "secondary",
|
|
1124
1259
|
variant: "caption",
|
|
@@ -1131,34 +1266,48 @@ var FontFamilyControl = createControl(({ fontFamilies }) => {
|
|
|
1131
1266
|
});
|
|
1132
1267
|
|
|
1133
1268
|
// src/controls/url-control.tsx
|
|
1134
|
-
var
|
|
1135
|
-
var
|
|
1136
|
-
var
|
|
1269
|
+
var React26 = __toESM(require("react"));
|
|
1270
|
+
var import_editor_props16 = require("@elementor/editor-props");
|
|
1271
|
+
var import_ui21 = require("@elementor/ui");
|
|
1137
1272
|
var UrlControl = createControl(({ placeholder }) => {
|
|
1138
|
-
const { value, setValue } = useBoundProp(
|
|
1273
|
+
const { value, setValue } = useBoundProp(import_editor_props16.urlPropTypeUtil);
|
|
1139
1274
|
const handleChange = (event) => setValue(event.target.value);
|
|
1140
|
-
return /* @__PURE__ */
|
|
1275
|
+
return /* @__PURE__ */ React26.createElement(ControlActions, null, /* @__PURE__ */ React26.createElement(
|
|
1276
|
+
import_ui21.TextField,
|
|
1277
|
+
{
|
|
1278
|
+
size: "tiny",
|
|
1279
|
+
fullWidth: true,
|
|
1280
|
+
value: value ?? "",
|
|
1281
|
+
onChange: handleChange,
|
|
1282
|
+
placeholder
|
|
1283
|
+
}
|
|
1284
|
+
));
|
|
1141
1285
|
});
|
|
1142
1286
|
|
|
1143
1287
|
// src/controls/link-control.tsx
|
|
1144
|
-
var
|
|
1145
|
-
var
|
|
1146
|
-
var
|
|
1147
|
-
var
|
|
1288
|
+
var React27 = __toESM(require("react"));
|
|
1289
|
+
var import_editor_props17 = require("@elementor/editor-props");
|
|
1290
|
+
var import_icons6 = require("@elementor/icons");
|
|
1291
|
+
var import_session = require("@elementor/session");
|
|
1292
|
+
var import_ui22 = require("@elementor/ui");
|
|
1148
1293
|
var import_i18n10 = require("@wordpress/i18n");
|
|
1149
1294
|
var SIZE3 = "tiny";
|
|
1150
|
-
var
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1295
|
+
var LinkControl = createControl((props) => {
|
|
1296
|
+
const { value, path, setValue, ...propContext } = useBoundProp(import_editor_props17.linkPropTypeUtil);
|
|
1297
|
+
const [linkSessionValue, setLinkSessionValue] = (0, import_session.useSessionStorage)(path.join("/"));
|
|
1298
|
+
const { allowCustomValues = false, options = {}, placeholder } = props || {};
|
|
1299
|
+
const onEnabledChange = () => {
|
|
1300
|
+
const { meta } = linkSessionValue ?? {};
|
|
1301
|
+
const { isEnabled } = meta ?? {};
|
|
1302
|
+
if (isEnabled && value) {
|
|
1303
|
+
setValue(null);
|
|
1304
|
+
} else if (linkSessionValue?.value) {
|
|
1305
|
+
setValue(linkSessionValue?.value ?? null);
|
|
1306
|
+
}
|
|
1307
|
+
setLinkSessionValue({ value, meta: { isEnabled: !isEnabled } });
|
|
1308
|
+
};
|
|
1309
|
+
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(
|
|
1310
|
+
import_ui22.Stack,
|
|
1162
1311
|
{
|
|
1163
1312
|
direction: "row",
|
|
1164
1313
|
sx: {
|
|
@@ -1166,31 +1315,44 @@ var LinkControl = createControl(() => {
|
|
|
1166
1315
|
alignItems: "center"
|
|
1167
1316
|
}
|
|
1168
1317
|
},
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
|
|
1318
|
+
/* @__PURE__ */ React27.createElement(ControlLabel, null, (0, import_i18n10.__)("Link", "elementor")),
|
|
1319
|
+
/* @__PURE__ */ React27.createElement(
|
|
1320
|
+
ToggleIconControl,
|
|
1321
|
+
{
|
|
1322
|
+
enabled: linkSessionValue?.meta?.isEnabled ?? false,
|
|
1323
|
+
onIconClick: onEnabledChange,
|
|
1324
|
+
label: (0, import_i18n10.__)("Toggle Link", "elementor")
|
|
1325
|
+
}
|
|
1326
|
+
)
|
|
1327
|
+
), /* @__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(
|
|
1328
|
+
AutocompleteControl,
|
|
1329
|
+
{
|
|
1330
|
+
allowCustomValues: Object.keys(options).length ? allowCustomValues : true,
|
|
1331
|
+
options,
|
|
1332
|
+
propType: import_editor_props17.stringPropTypeUtil,
|
|
1333
|
+
placeholder
|
|
1334
|
+
}
|
|
1335
|
+
)), /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React27.createElement(SwitchControl, null))))));
|
|
1172
1336
|
});
|
|
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 }));
|
|
1337
|
+
var ToggleIconControl = ({ enabled, onIconClick, label }) => {
|
|
1338
|
+
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
1339
|
};
|
|
1178
1340
|
var SwitchControl = () => {
|
|
1179
|
-
const { value = false, setValue } = useBoundProp();
|
|
1341
|
+
const { value = false, setValue } = useBoundProp(import_editor_props17.booleanPropTypeUtil);
|
|
1180
1342
|
const onChange = () => {
|
|
1181
1343
|
setValue(!value);
|
|
1182
1344
|
};
|
|
1183
|
-
return /* @__PURE__ */
|
|
1345
|
+
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
1346
|
};
|
|
1185
1347
|
|
|
1186
1348
|
// src/controls/gap-control.tsx
|
|
1187
|
-
var
|
|
1188
|
-
var
|
|
1189
|
-
var
|
|
1190
|
-
var
|
|
1349
|
+
var React28 = __toESM(require("react"));
|
|
1350
|
+
var import_editor_props18 = require("@elementor/editor-props");
|
|
1351
|
+
var import_icons7 = require("@elementor/icons");
|
|
1352
|
+
var import_ui23 = require("@elementor/ui");
|
|
1191
1353
|
var import_i18n11 = require("@wordpress/i18n");
|
|
1192
1354
|
var GapControl = createControl(({ label }) => {
|
|
1193
|
-
const { propType, value, setValue } = useBoundProp(
|
|
1355
|
+
const { propType, value, setValue } = useBoundProp(import_editor_props18.gapPropTypeUtil);
|
|
1194
1356
|
const { column, row, isLinked = true } = value || {};
|
|
1195
1357
|
const setLinkedValue = (newValue, _, meta) => {
|
|
1196
1358
|
if (!isLinked) {
|
|
@@ -1211,9 +1373,9 @@ var GapControl = createControl(({ label }) => {
|
|
|
1211
1373
|
};
|
|
1212
1374
|
setValue(updatedValue);
|
|
1213
1375
|
};
|
|
1214
|
-
const LinkedIcon = isLinked ?
|
|
1215
|
-
return /* @__PURE__ */
|
|
1216
|
-
|
|
1376
|
+
const LinkedIcon = isLinked ? import_icons7.LinkIcon : import_icons7.DetachIcon;
|
|
1377
|
+
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(
|
|
1378
|
+
import_ui23.ToggleButton,
|
|
1217
1379
|
{
|
|
1218
1380
|
"aria-label": (0, import_i18n11.__)("Link Inputs", "elementor"),
|
|
1219
1381
|
size: "tiny",
|
|
@@ -1222,28 +1384,29 @@ var GapControl = createControl(({ label }) => {
|
|
|
1222
1384
|
sx: { marginLeft: "auto" },
|
|
1223
1385
|
onChange: toggleLinked
|
|
1224
1386
|
},
|
|
1225
|
-
/* @__PURE__ */
|
|
1226
|
-
)), /* @__PURE__ */
|
|
1387
|
+
/* @__PURE__ */ React28.createElement(LinkedIcon, { fontSize: "tiny" })
|
|
1388
|
+
)), /* @__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
1389
|
});
|
|
1228
1390
|
|
|
1229
1391
|
// src/controls/background-control/background-control.tsx
|
|
1230
|
-
var
|
|
1231
|
-
var
|
|
1232
|
-
var
|
|
1392
|
+
var React30 = __toESM(require("react"));
|
|
1393
|
+
var import_editor_props20 = require("@elementor/editor-props");
|
|
1394
|
+
var import_ui25 = require("@elementor/ui");
|
|
1233
1395
|
var import_i18n13 = require("@wordpress/i18n");
|
|
1234
1396
|
|
|
1235
1397
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
1236
|
-
var
|
|
1237
|
-
var
|
|
1238
|
-
var
|
|
1398
|
+
var React29 = __toESM(require("react"));
|
|
1399
|
+
var import_editor_props19 = require("@elementor/editor-props");
|
|
1400
|
+
var import_ui24 = require("@elementor/ui");
|
|
1401
|
+
var import_wp_media2 = require("@elementor/wp-media");
|
|
1239
1402
|
var import_i18n12 = require("@wordpress/i18n");
|
|
1240
1403
|
var initialBackgroundOverlay = {
|
|
1241
1404
|
$$type: "background-color-overlay",
|
|
1242
1405
|
value: "rgba(0, 0, 0, 0.2)"
|
|
1243
1406
|
};
|
|
1244
1407
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
1245
|
-
const { propType, value: overlayValues, setValue } = useBoundProp(
|
|
1246
|
-
return /* @__PURE__ */
|
|
1408
|
+
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props19.backgroundOverlayPropTypeUtil);
|
|
1409
|
+
return /* @__PURE__ */ React29.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React29.createElement(
|
|
1247
1410
|
Repeater,
|
|
1248
1411
|
{
|
|
1249
1412
|
values: overlayValues ?? [],
|
|
@@ -1258,25 +1421,40 @@ var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
|
1258
1421
|
}
|
|
1259
1422
|
));
|
|
1260
1423
|
});
|
|
1261
|
-
var ItemIcon2 = ({ value }) => /* @__PURE__ */
|
|
1424
|
+
var ItemIcon2 = ({ value }) => /* @__PURE__ */ React29.createElement(import_ui24.UnstableColorIndicator, { size: "inherit", component: "span", value: value.value });
|
|
1262
1425
|
var ItemContent2 = ({ bind }) => {
|
|
1263
|
-
return /* @__PURE__ */
|
|
1426
|
+
return /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React29.createElement(Content2, null));
|
|
1264
1427
|
};
|
|
1265
1428
|
var Content2 = () => {
|
|
1266
|
-
|
|
1429
|
+
const propContext = useBoundProp(import_editor_props19.backgroundImageOverlayPropTypeUtil);
|
|
1430
|
+
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
1431
|
};
|
|
1268
1432
|
var ItemLabel2 = ({ value }) => {
|
|
1269
|
-
const
|
|
1270
|
-
|
|
1433
|
+
const type = value.$$type;
|
|
1434
|
+
if (type === "background-color-overlay") {
|
|
1435
|
+
return /* @__PURE__ */ React29.createElement(ItemLabelColor, { value });
|
|
1436
|
+
}
|
|
1437
|
+
if (type === "background-image-overlay") {
|
|
1438
|
+
return /* @__PURE__ */ React29.createElement(ItemLabelImage, { value });
|
|
1439
|
+
}
|
|
1440
|
+
};
|
|
1441
|
+
var ItemLabelColor = ({ value }) => {
|
|
1442
|
+
return /* @__PURE__ */ React29.createElement("span", null, value.value);
|
|
1443
|
+
};
|
|
1444
|
+
var ItemLabelImage = ({ value }) => {
|
|
1445
|
+
const { data: attachment } = (0, import_wp_media2.useWpMediaAttachment)(value?.value["image-src"]?.value.id.value || null);
|
|
1446
|
+
const imageTitle = attachment?.title || null;
|
|
1447
|
+
return /* @__PURE__ */ React29.createElement("span", null, imageTitle);
|
|
1271
1448
|
};
|
|
1272
1449
|
|
|
1273
1450
|
// src/controls/background-control/background-control.tsx
|
|
1274
1451
|
var BackgroundControl = createControl(() => {
|
|
1275
|
-
const propContext = useBoundProp(
|
|
1276
|
-
return /* @__PURE__ */
|
|
1452
|
+
const propContext = useBoundProp(import_editor_props20.backgroundPropTypeUtil);
|
|
1453
|
+
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
1454
|
});
|
|
1278
1455
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1279
1456
|
0 && (module.exports = {
|
|
1457
|
+
AutocompleteControl,
|
|
1280
1458
|
BackgroundControl,
|
|
1281
1459
|
BoxShadowRepeaterControl,
|
|
1282
1460
|
ColorControl,
|