@elementor/editor-controls 4.4.0-1095 → 4.4.0-1097
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1249 -833
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1134 -708
- package/dist/index.mjs.map +1 -1
- package/package.json +17 -16
- package/src/controls/icon-library/icon-library-filter.tsx +9 -2
- package/src/controls/icon-library/icon-library-grid.tsx +344 -0
- package/src/controls/icon-library/icon-library-popover.tsx +43 -8
- package/src/controls/icon-library/icon-library-tooltip.ts +1 -0
- package/src/controls/icon-library/icon-library-view-toggle.tsx +104 -0
- package/src/controls/link-control.tsx +18 -8
package/dist/index.js
CHANGED
|
@@ -508,7 +508,7 @@ function ControlActions({ children }) {
|
|
|
508
508
|
if (items2.length === 0 || disabled) {
|
|
509
509
|
return children;
|
|
510
510
|
}
|
|
511
|
-
const menuItems = items2.map(({ MenuItem:
|
|
511
|
+
const menuItems = items2.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React10.createElement(MenuItem4, { key: id }));
|
|
512
512
|
return /* @__PURE__ */ React10.createElement(import_editor_ui.FloatingActionsBar, { actions: menuItems }, children);
|
|
513
513
|
}
|
|
514
514
|
|
|
@@ -4713,33 +4713,39 @@ var LinkControl = createControl((props) => {
|
|
|
4713
4713
|
(0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder)
|
|
4714
4714
|
);
|
|
4715
4715
|
const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
|
|
4716
|
-
const
|
|
4716
|
+
const syncLinkRestriction = (clearActiveLinkWhen = "restricted") => {
|
|
4717
4717
|
const newRestriction = (0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder);
|
|
4718
|
-
|
|
4718
|
+
const becameRestricted = newRestriction.shouldRestrict && !linkInLinkRestriction.shouldRestrict;
|
|
4719
|
+
const shouldClearActiveLink = clearActiveLinkWhen === "newly-restricted" ? becameRestricted : newRestriction.shouldRestrict;
|
|
4720
|
+
if (shouldClearActiveLink && isActive && !linkPlaceholder) {
|
|
4719
4721
|
setIsActive(false);
|
|
4720
4722
|
if (value !== null) {
|
|
4721
4723
|
setValue(null);
|
|
4722
4724
|
}
|
|
4723
4725
|
}
|
|
4724
4726
|
setLinkInLinkRestriction((prev) => isSameRestriction(prev, newRestriction) ? prev : newRestriction);
|
|
4725
|
-
}
|
|
4727
|
+
};
|
|
4728
|
+
const debouncedSyncLinkRestriction = (0, import_utils5.useDebouncedCallback)(
|
|
4729
|
+
(clearActiveLinkWhen = "restricted") => syncLinkRestriction(clearActiveLinkWhen),
|
|
4730
|
+
300
|
|
4731
|
+
);
|
|
4726
4732
|
(0, import_editor_v1_adapters.__privateUseListenTo)(
|
|
4727
4733
|
(0, import_editor_v1_adapters.commandEndEvent)("document/elements/set-settings"),
|
|
4728
4734
|
() => {
|
|
4729
|
-
|
|
4735
|
+
debouncedSyncLinkRestriction("newly-restricted");
|
|
4730
4736
|
},
|
|
4731
|
-
[
|
|
4737
|
+
[debouncedSyncLinkRestriction]
|
|
4732
4738
|
);
|
|
4733
4739
|
(0, import_react43.useEffect)(() => {
|
|
4734
|
-
|
|
4740
|
+
debouncedSyncLinkRestriction();
|
|
4735
4741
|
const handleInlineLinkChanged = () => {
|
|
4736
|
-
|
|
4742
|
+
debouncedSyncLinkRestriction();
|
|
4737
4743
|
};
|
|
4738
4744
|
window.addEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
|
|
4739
4745
|
return () => {
|
|
4740
4746
|
window.removeEventListener("elementor:inline-link-changed", handleInlineLinkChanged);
|
|
4741
4747
|
};
|
|
4742
|
-
}, [elementId,
|
|
4748
|
+
}, [elementId, debouncedSyncLinkRestriction]);
|
|
4743
4749
|
const onEnabledChange = () => {
|
|
4744
4750
|
setLinkInLinkRestriction((0, import_editor_elements2.getLinkInLinkRestriction)(elementId, value ?? linkPlaceholder));
|
|
4745
4751
|
if (linkInLinkRestriction.shouldRestrict && !isActive) {
|
|
@@ -5388,13 +5394,13 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5388
5394
|
});
|
|
5389
5395
|
|
|
5390
5396
|
// src/controls/svg-media-control.tsx
|
|
5391
|
-
var
|
|
5392
|
-
var
|
|
5397
|
+
var React88 = __toESM(require("react"));
|
|
5398
|
+
var import_react53 = require("react");
|
|
5393
5399
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5394
5400
|
var import_editor_props35 = require("@elementor/editor-props");
|
|
5395
|
-
var
|
|
5401
|
+
var import_ui70 = require("@elementor/ui");
|
|
5396
5402
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
5397
|
-
var
|
|
5403
|
+
var import_i18n38 = require("@wordpress/i18n");
|
|
5398
5404
|
|
|
5399
5405
|
// src/components/enable-unfiltered-modal.tsx
|
|
5400
5406
|
var React80 = __toESM(require("react"));
|
|
@@ -5462,13 +5468,14 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5462
5468
|
}
|
|
5463
5469
|
|
|
5464
5470
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5465
|
-
var
|
|
5466
|
-
var
|
|
5471
|
+
var React85 = __toESM(require("react"));
|
|
5472
|
+
var import_react52 = require("react");
|
|
5467
5473
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5468
|
-
var
|
|
5469
|
-
var
|
|
5474
|
+
var import_icons23 = require("@elementor/icons");
|
|
5475
|
+
var import_session2 = require("@elementor/session");
|
|
5476
|
+
var import_ui67 = require("@elementor/ui");
|
|
5470
5477
|
var import_utils6 = require("@elementor/utils");
|
|
5471
|
-
var
|
|
5478
|
+
var import_i18n35 = require("@wordpress/i18n");
|
|
5472
5479
|
|
|
5473
5480
|
// src/controls/icon-library/font-awesome-7-data.ts
|
|
5474
5481
|
var FONT_AWESOME_7_LIBRARIES = [
|
|
@@ -5734,6 +5741,11 @@ var import_react49 = require("react");
|
|
|
5734
5741
|
var import_icons21 = require("@elementor/icons");
|
|
5735
5742
|
var import_ui64 = require("@elementor/ui");
|
|
5736
5743
|
var import_i18n32 = require("@wordpress/i18n");
|
|
5744
|
+
|
|
5745
|
+
// src/controls/icon-library/icon-library-tooltip.ts
|
|
5746
|
+
var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
|
|
5747
|
+
|
|
5748
|
+
// src/controls/icon-library/icon-library-filter.tsx
|
|
5737
5749
|
var FILTER_MENU_WIDTH = 280;
|
|
5738
5750
|
var FILTER_INDICATOR_SIZE = 6;
|
|
5739
5751
|
var FILTER_INDICATOR_OFFSET = 4;
|
|
@@ -5780,35 +5792,45 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
5780
5792
|
const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
|
|
5781
5793
|
onChange(nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue);
|
|
5782
5794
|
};
|
|
5783
|
-
return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
|
|
5784
|
-
import_ui64.
|
|
5795
|
+
return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
|
|
5796
|
+
import_ui64.Tooltip,
|
|
5785
5797
|
{
|
|
5786
|
-
"
|
|
5787
|
-
|
|
5788
|
-
|
|
5789
|
-
|
|
5790
|
-
|
|
5791
|
-
...(0, import_ui64.bindToggle)(popupState),
|
|
5792
|
-
"aria-expanded": popupState.isOpen
|
|
5798
|
+
title: (0, import_i18n32.__)("Filter by library", "elementor"),
|
|
5799
|
+
placement: "top",
|
|
5800
|
+
enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
5801
|
+
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
5802
|
+
disableInteractive: true
|
|
5793
5803
|
},
|
|
5794
|
-
/* @__PURE__ */ React82.createElement(
|
|
5795
|
-
|
|
5796
|
-
import_ui64.Box,
|
|
5804
|
+
/* @__PURE__ */ React82.createElement(
|
|
5805
|
+
import_ui64.ToggleButton,
|
|
5797
5806
|
{
|
|
5798
|
-
|
|
5799
|
-
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
|
|
5807
|
+
"aria-label": filterButtonLabel,
|
|
5808
|
+
value: "filter",
|
|
5809
|
+
size: "tiny",
|
|
5810
|
+
selected: popupState.isOpen,
|
|
5811
|
+
sx: { position: "relative", flexShrink: 0 },
|
|
5812
|
+
...(0, import_ui64.bindToggle)(popupState),
|
|
5813
|
+
"aria-expanded": popupState.isOpen
|
|
5814
|
+
},
|
|
5815
|
+
/* @__PURE__ */ React82.createElement(import_icons21.FilterIcon, { fontSize: "tiny" }),
|
|
5816
|
+
isFiltered ? /* @__PURE__ */ React82.createElement(
|
|
5817
|
+
import_ui64.Box,
|
|
5818
|
+
{
|
|
5819
|
+
component: "span",
|
|
5820
|
+
"aria-hidden": "true",
|
|
5821
|
+
sx: {
|
|
5822
|
+
position: "absolute",
|
|
5823
|
+
insetBlockStart: FILTER_INDICATOR_OFFSET,
|
|
5824
|
+
insetInlineEnd: FILTER_INDICATOR_OFFSET,
|
|
5825
|
+
width: FILTER_INDICATOR_SIZE,
|
|
5826
|
+
height: FILTER_INDICATOR_SIZE,
|
|
5827
|
+
borderRadius: "50%",
|
|
5828
|
+
bgcolor: "secondary.main"
|
|
5829
|
+
}
|
|
5808
5830
|
}
|
|
5809
|
-
|
|
5810
|
-
)
|
|
5811
|
-
)
|
|
5831
|
+
) : null
|
|
5832
|
+
)
|
|
5833
|
+
), /* @__PURE__ */ React82.createElement(
|
|
5812
5834
|
import_ui64.Menu,
|
|
5813
5835
|
{
|
|
5814
5836
|
...(0, import_ui64.bindMenu)(popupState),
|
|
@@ -5842,7 +5864,374 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
5842
5864
|
))
|
|
5843
5865
|
));
|
|
5844
5866
|
};
|
|
5845
|
-
var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny" }) : null);
|
|
5867
|
+
var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
|
|
5868
|
+
|
|
5869
|
+
// src/controls/icon-library/icon-library-grid.tsx
|
|
5870
|
+
var React83 = __toESM(require("react"));
|
|
5871
|
+
var import_react50 = require("react");
|
|
5872
|
+
var import_ui65 = require("@elementor/ui");
|
|
5873
|
+
var import_react_virtual = require("@tanstack/react-virtual");
|
|
5874
|
+
var import_i18n33 = require("@wordpress/i18n");
|
|
5875
|
+
var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
|
|
5876
|
+
var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
|
|
5877
|
+
var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
|
|
5878
|
+
var ICON_GLYPH_SIZE = 20;
|
|
5879
|
+
var GRID_OVERSCAN = 6;
|
|
5880
|
+
var GRID_COLUMN_GAP = 1;
|
|
5881
|
+
var GRID_HORIZONTAL_PADDING = 1;
|
|
5882
|
+
var HOME_END_KEYS = /* @__PURE__ */ new Set(["Home", "End"]);
|
|
5883
|
+
var getGridMetrics = (containerWidth, columnGap, inlinePadding) => {
|
|
5884
|
+
const availableWidth = containerWidth - inlinePadding;
|
|
5885
|
+
if (availableWidth <= 0) {
|
|
5886
|
+
return {
|
|
5887
|
+
columnCount: ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT,
|
|
5888
|
+
cellSize: ICON_LIBRARY_GRID_MIN_CELL_SIZE
|
|
5889
|
+
};
|
|
5890
|
+
}
|
|
5891
|
+
const columnCount = Math.max(
|
|
5892
|
+
1,
|
|
5893
|
+
Math.floor((availableWidth + columnGap) / (ICON_LIBRARY_GRID_MIN_CELL_SIZE + columnGap))
|
|
5894
|
+
);
|
|
5895
|
+
const cellSize = Math.floor((availableWidth - columnGap * (columnCount - 1)) / columnCount);
|
|
5896
|
+
return {
|
|
5897
|
+
columnCount,
|
|
5898
|
+
cellSize: Math.max(cellSize, 1)
|
|
5899
|
+
};
|
|
5900
|
+
};
|
|
5901
|
+
var IconLibraryGrid = ({
|
|
5902
|
+
items: items2,
|
|
5903
|
+
selectedValue,
|
|
5904
|
+
onSelect,
|
|
5905
|
+
onClose,
|
|
5906
|
+
noResultsComponent
|
|
5907
|
+
}) => {
|
|
5908
|
+
const theme = (0, import_ui65.useTheme)();
|
|
5909
|
+
const containerRef = (0, import_react50.useRef)(null);
|
|
5910
|
+
const cellRefs = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
|
|
5911
|
+
const shouldRestoreFocusRef = (0, import_react50.useRef)(false);
|
|
5912
|
+
const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
|
|
5913
|
+
const [focusedIndex, setFocusedIndex] = (0, import_react50.useState)(selectedIndex >= 0 ? selectedIndex : 0);
|
|
5914
|
+
const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react50.useState)(() => getGridMetrics(0, 0, 0));
|
|
5915
|
+
const rowCount = Math.ceil(items2.length / columnCount);
|
|
5916
|
+
const virtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
5917
|
+
count: rowCount,
|
|
5918
|
+
getScrollElement: () => containerRef.current,
|
|
5919
|
+
estimateSize: () => cellSize,
|
|
5920
|
+
overscan: GRID_OVERSCAN
|
|
5921
|
+
});
|
|
5922
|
+
const focusedItem = items2[focusedIndex];
|
|
5923
|
+
const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
|
|
5924
|
+
(0, import_react50.useLayoutEffect)(() => {
|
|
5925
|
+
setFocusedIndex((current) => {
|
|
5926
|
+
if (items2.length === 0) {
|
|
5927
|
+
return 0;
|
|
5928
|
+
}
|
|
5929
|
+
if (selectedIndex >= 0) {
|
|
5930
|
+
return selectedIndex;
|
|
5931
|
+
}
|
|
5932
|
+
return Math.min(current, items2.length - 1);
|
|
5933
|
+
});
|
|
5934
|
+
if (selectedIndex >= 0) {
|
|
5935
|
+
virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
|
|
5936
|
+
}
|
|
5937
|
+
}, [columnCount, items2, selectedIndex, selectedValue]);
|
|
5938
|
+
(0, import_react50.useLayoutEffect)(() => {
|
|
5939
|
+
if (!shouldRestoreFocusRef.current || !focusedItem) {
|
|
5940
|
+
return;
|
|
5941
|
+
}
|
|
5942
|
+
const cell = cellRefs.current.get(focusedItem.id);
|
|
5943
|
+
if (!cell) {
|
|
5944
|
+
return;
|
|
5945
|
+
}
|
|
5946
|
+
cell.focus();
|
|
5947
|
+
shouldRestoreFocusRef.current = false;
|
|
5948
|
+
}, [focusedItem, visibleRowIndexes]);
|
|
5949
|
+
(0, import_react50.useLayoutEffect)(() => {
|
|
5950
|
+
const container = containerRef.current;
|
|
5951
|
+
if (!container) {
|
|
5952
|
+
return;
|
|
5953
|
+
}
|
|
5954
|
+
const measureGrid = () => {
|
|
5955
|
+
const columnGap = Number.parseFloat(theme.spacing(GRID_COLUMN_GAP));
|
|
5956
|
+
const inlinePadding = Number.parseFloat(theme.spacing(GRID_HORIZONTAL_PADDING)) * 2;
|
|
5957
|
+
setGridMetrics(getGridMetrics(container.clientWidth, columnGap, inlinePadding));
|
|
5958
|
+
};
|
|
5959
|
+
measureGrid();
|
|
5960
|
+
const resizeObserver = new ResizeObserver(measureGrid);
|
|
5961
|
+
resizeObserver.observe(container);
|
|
5962
|
+
return () => {
|
|
5963
|
+
resizeObserver.disconnect();
|
|
5964
|
+
};
|
|
5965
|
+
}, [theme, items2.length]);
|
|
5966
|
+
(0, import_react50.useLayoutEffect)(() => {
|
|
5967
|
+
virtualizer.measure();
|
|
5968
|
+
}, [cellSize, columnCount]);
|
|
5969
|
+
const isRtl = theme.direction === "rtl" || document.documentElement.dir === "rtl";
|
|
5970
|
+
const horizontalOffset = isRtl ? -1 : 1;
|
|
5971
|
+
const moveFocus = (nextIndex) => {
|
|
5972
|
+
if (nextIndex < 0 || nextIndex >= items2.length) {
|
|
5973
|
+
return;
|
|
5974
|
+
}
|
|
5975
|
+
shouldRestoreFocusRef.current = true;
|
|
5976
|
+
setFocusedIndex(nextIndex);
|
|
5977
|
+
virtualizer.scrollToIndex(Math.floor(nextIndex / columnCount));
|
|
5978
|
+
};
|
|
5979
|
+
const handleKeyDown = (event, index) => {
|
|
5980
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
5981
|
+
event.preventDefault();
|
|
5982
|
+
onSelect(items2[index].id);
|
|
5983
|
+
onClose();
|
|
5984
|
+
return;
|
|
5985
|
+
}
|
|
5986
|
+
if (event.key === "ArrowRight") {
|
|
5987
|
+
event.preventDefault();
|
|
5988
|
+
moveFocus(index + horizontalOffset);
|
|
5989
|
+
return;
|
|
5990
|
+
}
|
|
5991
|
+
if (event.key === "ArrowLeft") {
|
|
5992
|
+
event.preventDefault();
|
|
5993
|
+
moveFocus(index - horizontalOffset);
|
|
5994
|
+
return;
|
|
5995
|
+
}
|
|
5996
|
+
if (event.key === "ArrowDown") {
|
|
5997
|
+
event.preventDefault();
|
|
5998
|
+
moveFocus(index + columnCount);
|
|
5999
|
+
return;
|
|
6000
|
+
}
|
|
6001
|
+
if (event.key === "ArrowUp") {
|
|
6002
|
+
event.preventDefault();
|
|
6003
|
+
moveFocus(index - columnCount);
|
|
6004
|
+
return;
|
|
6005
|
+
}
|
|
6006
|
+
if (HOME_END_KEYS.has(event.key)) {
|
|
6007
|
+
event.preventDefault();
|
|
6008
|
+
if (event.ctrlKey) {
|
|
6009
|
+
moveFocus(event.key === "Home" ? 0 : items2.length - 1);
|
|
6010
|
+
return;
|
|
6011
|
+
}
|
|
6012
|
+
const rowStart = Math.floor(index / columnCount) * columnCount;
|
|
6013
|
+
const rowEnd = Math.min(rowStart + columnCount - 1, items2.length - 1);
|
|
6014
|
+
moveFocus(event.key === "Home" ? rowStart : rowEnd);
|
|
6015
|
+
}
|
|
6016
|
+
};
|
|
6017
|
+
return /* @__PURE__ */ React83.createElement(
|
|
6018
|
+
import_ui65.Box,
|
|
6019
|
+
{
|
|
6020
|
+
ref: containerRef,
|
|
6021
|
+
sx: {
|
|
6022
|
+
width: "100%",
|
|
6023
|
+
height: "100%",
|
|
6024
|
+
minWidth: 0,
|
|
6025
|
+
overflowX: "hidden",
|
|
6026
|
+
overflowY: "auto"
|
|
6027
|
+
}
|
|
6028
|
+
},
|
|
6029
|
+
items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React83.createElement(
|
|
6030
|
+
import_ui65.Box,
|
|
6031
|
+
{
|
|
6032
|
+
role: "grid",
|
|
6033
|
+
"aria-label": (0, import_i18n33.__)("Icons", "elementor"),
|
|
6034
|
+
"aria-rowcount": rowCount,
|
|
6035
|
+
"aria-colcount": columnCount,
|
|
6036
|
+
"data-testid": "icon-library-grid",
|
|
6037
|
+
sx: {
|
|
6038
|
+
width: "100%",
|
|
6039
|
+
minWidth: 0,
|
|
6040
|
+
height: virtualizer.getTotalSize(),
|
|
6041
|
+
position: "relative"
|
|
6042
|
+
}
|
|
6043
|
+
},
|
|
6044
|
+
virtualizer.getVirtualItems().map((virtualRow) => {
|
|
6045
|
+
const startIndex = virtualRow.index * columnCount;
|
|
6046
|
+
const rowItems = items2.slice(startIndex, startIndex + columnCount);
|
|
6047
|
+
return /* @__PURE__ */ React83.createElement(
|
|
6048
|
+
import_ui65.Box,
|
|
6049
|
+
{
|
|
6050
|
+
key: virtualRow.key,
|
|
6051
|
+
role: "row",
|
|
6052
|
+
"aria-rowindex": virtualRow.index + 1,
|
|
6053
|
+
sx: {
|
|
6054
|
+
position: "absolute",
|
|
6055
|
+
top: 0,
|
|
6056
|
+
left: 0,
|
|
6057
|
+
width: "100%",
|
|
6058
|
+
height: virtualRow.size,
|
|
6059
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
6060
|
+
display: "grid",
|
|
6061
|
+
gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
|
|
6062
|
+
gap: GRID_COLUMN_GAP,
|
|
6063
|
+
px: GRID_HORIZONTAL_PADDING,
|
|
6064
|
+
boxSizing: "border-box"
|
|
6065
|
+
}
|
|
6066
|
+
},
|
|
6067
|
+
rowItems.map((item, columnIndex) => {
|
|
6068
|
+
const index = startIndex + columnIndex;
|
|
6069
|
+
const isSelected = selectedValue === item.id;
|
|
6070
|
+
const tabIndex = focusedIndex === index ? 0 : -1;
|
|
6071
|
+
return /* @__PURE__ */ React83.createElement(
|
|
6072
|
+
import_ui65.Box,
|
|
6073
|
+
{
|
|
6074
|
+
key: item.id,
|
|
6075
|
+
role: "presentation",
|
|
6076
|
+
sx: { minWidth: 0, minHeight: 0, width: "100%", height: "100%" }
|
|
6077
|
+
},
|
|
6078
|
+
/* @__PURE__ */ React83.createElement(
|
|
6079
|
+
import_ui65.Tooltip,
|
|
6080
|
+
{
|
|
6081
|
+
title: item.label,
|
|
6082
|
+
placement: "top",
|
|
6083
|
+
enterDelay: ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY,
|
|
6084
|
+
enterNextDelay: ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY,
|
|
6085
|
+
disableInteractive: true,
|
|
6086
|
+
disableFocusListener: true
|
|
6087
|
+
},
|
|
6088
|
+
/* @__PURE__ */ React83.createElement(
|
|
6089
|
+
import_ui65.Box,
|
|
6090
|
+
{
|
|
6091
|
+
component: "button",
|
|
6092
|
+
type: "button",
|
|
6093
|
+
role: "gridcell",
|
|
6094
|
+
"aria-colindex": columnIndex + 1,
|
|
6095
|
+
"aria-label": item.label,
|
|
6096
|
+
"aria-selected": isSelected,
|
|
6097
|
+
tabIndex,
|
|
6098
|
+
ref: (node) => {
|
|
6099
|
+
if (node) {
|
|
6100
|
+
cellRefs.current.set(item.id, node);
|
|
6101
|
+
} else {
|
|
6102
|
+
cellRefs.current.delete(item.id);
|
|
6103
|
+
}
|
|
6104
|
+
},
|
|
6105
|
+
onClick: () => {
|
|
6106
|
+
onSelect(item.id);
|
|
6107
|
+
onClose();
|
|
6108
|
+
},
|
|
6109
|
+
onFocus: () => setFocusedIndex(index),
|
|
6110
|
+
onKeyDown: (event) => handleKeyDown(event, index),
|
|
6111
|
+
sx: {
|
|
6112
|
+
boxSizing: "border-box",
|
|
6113
|
+
appearance: "none",
|
|
6114
|
+
m: 0,
|
|
6115
|
+
width: "100%",
|
|
6116
|
+
height: "100%",
|
|
6117
|
+
minWidth: 0,
|
|
6118
|
+
minHeight: 0,
|
|
6119
|
+
display: "flex",
|
|
6120
|
+
alignItems: "center",
|
|
6121
|
+
justifyContent: "center",
|
|
6122
|
+
border: "1px solid",
|
|
6123
|
+
borderColor: "divider",
|
|
6124
|
+
borderRadius: 1,
|
|
6125
|
+
color: "text.tertiary",
|
|
6126
|
+
bgcolor: "transparent",
|
|
6127
|
+
p: 0,
|
|
6128
|
+
cursor: "pointer",
|
|
6129
|
+
font: "inherit",
|
|
6130
|
+
lineHeight: 0,
|
|
6131
|
+
overflow: "hidden",
|
|
6132
|
+
"&:hover, &:focus": {
|
|
6133
|
+
bgcolor: "action.hover"
|
|
6134
|
+
},
|
|
6135
|
+
'&[aria-selected="true"]': {
|
|
6136
|
+
bgcolor: "action.selected"
|
|
6137
|
+
},
|
|
6138
|
+
'&[aria-selected="true"]:hover, &[aria-selected="true"]:focus': {
|
|
6139
|
+
bgcolor: "action.selected"
|
|
6140
|
+
}
|
|
6141
|
+
}
|
|
6142
|
+
},
|
|
6143
|
+
item.paths.length > 0 ? /* @__PURE__ */ React83.createElement(
|
|
6144
|
+
FontAwesomeGlyph,
|
|
6145
|
+
{
|
|
6146
|
+
icon: item,
|
|
6147
|
+
size: ICON_GLYPH_SIZE,
|
|
6148
|
+
color: "currentColor"
|
|
6149
|
+
}
|
|
6150
|
+
) : null
|
|
6151
|
+
)
|
|
6152
|
+
)
|
|
6153
|
+
);
|
|
6154
|
+
})
|
|
6155
|
+
);
|
|
6156
|
+
})
|
|
6157
|
+
)
|
|
6158
|
+
);
|
|
6159
|
+
};
|
|
6160
|
+
|
|
6161
|
+
// src/controls/icon-library/icon-library-view-toggle.tsx
|
|
6162
|
+
var React84 = __toESM(require("react"));
|
|
6163
|
+
var import_react51 = require("react");
|
|
6164
|
+
var import_icons22 = require("@elementor/icons");
|
|
6165
|
+
var import_ui66 = require("@elementor/ui");
|
|
6166
|
+
var import_i18n34 = require("@wordpress/i18n");
|
|
6167
|
+
var VIEW_MENU_WIDTH = 122;
|
|
6168
|
+
var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
6169
|
+
const popupId = (0, import_react51.useId)();
|
|
6170
|
+
const popupState = (0, import_ui66.usePopupState)({
|
|
6171
|
+
variant: "popover",
|
|
6172
|
+
popupId
|
|
6173
|
+
});
|
|
6174
|
+
const isGrid = value === "grid";
|
|
6175
|
+
const ViewIcon = isGrid ? import_icons22.WidgetsIcon : import_icons22.ListIcon;
|
|
6176
|
+
const viewButtonLabel = isGrid ? (0, import_i18n34.__)("Grid view", "elementor") : (0, import_i18n34.__)("List view", "elementor");
|
|
6177
|
+
return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(
|
|
6178
|
+
import_ui66.Tooltip,
|
|
6179
|
+
{
|
|
6180
|
+
title: viewButtonLabel,
|
|
6181
|
+
placement: "top",
|
|
6182
|
+
enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6183
|
+
enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
|
|
6184
|
+
disableInteractive: true
|
|
6185
|
+
},
|
|
6186
|
+
/* @__PURE__ */ React84.createElement(
|
|
6187
|
+
import_ui66.ToggleButton,
|
|
6188
|
+
{
|
|
6189
|
+
"aria-label": viewButtonLabel,
|
|
6190
|
+
value: "view",
|
|
6191
|
+
size: "tiny",
|
|
6192
|
+
selected: popupState.isOpen,
|
|
6193
|
+
sx: { flexShrink: 0 },
|
|
6194
|
+
...(0, import_ui66.bindToggle)(popupState),
|
|
6195
|
+
"aria-expanded": popupState.isOpen
|
|
6196
|
+
},
|
|
6197
|
+
/* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
|
|
6198
|
+
)
|
|
6199
|
+
), /* @__PURE__ */ React84.createElement(
|
|
6200
|
+
import_ui66.Menu,
|
|
6201
|
+
{
|
|
6202
|
+
...(0, import_ui66.bindMenu)(popupState),
|
|
6203
|
+
MenuListProps: {
|
|
6204
|
+
dense: true,
|
|
6205
|
+
autoFocusItem: true,
|
|
6206
|
+
"aria-label": (0, import_i18n34.__)("View", "elementor")
|
|
6207
|
+
},
|
|
6208
|
+
sx: { "& .MuiPaper-root": { minWidth: VIEW_MENU_WIDTH } }
|
|
6209
|
+
},
|
|
6210
|
+
/* @__PURE__ */ React84.createElement(
|
|
6211
|
+
ViewMenuItem,
|
|
6212
|
+
{
|
|
6213
|
+
label: (0, import_i18n34.__)("List", "elementor"),
|
|
6214
|
+
selected: value === "list",
|
|
6215
|
+
onClick: () => {
|
|
6216
|
+
onChange("list");
|
|
6217
|
+
popupState.close();
|
|
6218
|
+
}
|
|
6219
|
+
}
|
|
6220
|
+
),
|
|
6221
|
+
/* @__PURE__ */ React84.createElement(
|
|
6222
|
+
ViewMenuItem,
|
|
6223
|
+
{
|
|
6224
|
+
label: (0, import_i18n34.__)("Grid", "elementor"),
|
|
6225
|
+
selected: value === "grid",
|
|
6226
|
+
onClick: () => {
|
|
6227
|
+
onChange("grid");
|
|
6228
|
+
popupState.close();
|
|
6229
|
+
}
|
|
6230
|
+
}
|
|
6231
|
+
)
|
|
6232
|
+
));
|
|
6233
|
+
};
|
|
6234
|
+
var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(import_ui66.MenuItem, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(import_ui66.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(import_ui66.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(import_icons22.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null));
|
|
5846
6235
|
|
|
5847
6236
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
5848
6237
|
var import_query2 = require("@elementor/query");
|
|
@@ -5860,10 +6249,16 @@ function useFontAwesome7Catalog(enabled) {
|
|
|
5860
6249
|
var ICON_LIBRARY_POPOVER_WIDTH = 300;
|
|
5861
6250
|
var ICON_LIBRARY_ROW_HEIGHT = 48;
|
|
5862
6251
|
var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
|
|
6252
|
+
var ICON_LIBRARY_VIEW_STORAGE_KEY = "icon-library-view";
|
|
6253
|
+
var ICON_LIBRARY_VIEW_STORAGE_PREFIX = "editor-controls";
|
|
6254
|
+
var DEFAULT_ICON_LIBRARY_VIEW = "list";
|
|
6255
|
+
var isIconLibraryView = (value) => {
|
|
6256
|
+
return value === "grid" || value === "list";
|
|
6257
|
+
};
|
|
5863
6258
|
var ICON_TILE_SIZE = 40;
|
|
5864
|
-
var
|
|
6259
|
+
var ICON_GLYPH_SIZE2 = 20;
|
|
5865
6260
|
var ICON_LIBRARY_INLINE_SPACING = 1;
|
|
5866
|
-
var CompactIconLibraryMenuList = (0,
|
|
6261
|
+
var CompactIconLibraryMenuList = (0, import_ui67.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
|
|
5867
6262
|
'& > [role="option"]': {
|
|
5868
6263
|
padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
|
|
5869
6264
|
}
|
|
@@ -5882,13 +6277,18 @@ var IconLibraryPopover = ({
|
|
|
5882
6277
|
handleChange: handleSearchChange,
|
|
5883
6278
|
setImmediateValue: setSearchValue
|
|
5884
6279
|
} = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
|
|
5885
|
-
const [activeLibraries, setActiveLibraries] = (0,
|
|
6280
|
+
const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
|
|
6281
|
+
const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
|
|
6282
|
+
ICON_LIBRARY_VIEW_STORAGE_KEY,
|
|
6283
|
+
ICON_LIBRARY_VIEW_STORAGE_PREFIX
|
|
6284
|
+
);
|
|
6285
|
+
const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
|
|
5886
6286
|
const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
|
|
5887
|
-
const items2 = (0,
|
|
6287
|
+
const items2 = (0, import_react52.useMemo)(
|
|
5888
6288
|
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
5889
6289
|
[activeLibraries, icons, searchValue]
|
|
5890
6290
|
);
|
|
5891
|
-
const selectedValue = (0,
|
|
6291
|
+
const selectedValue = (0, import_react52.useMemo)(
|
|
5892
6292
|
() => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
|
|
5893
6293
|
[icons, selectedIconClass, selectedIconLibrary]
|
|
5894
6294
|
);
|
|
@@ -5910,24 +6310,25 @@ var IconLibraryPopover = ({
|
|
|
5910
6310
|
const handleClearSearch = () => {
|
|
5911
6311
|
setSearchValue("");
|
|
5912
6312
|
};
|
|
5913
|
-
return /* @__PURE__ */
|
|
6313
|
+
return /* @__PURE__ */ React85.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React85.createElement(
|
|
5914
6314
|
import_editor_ui11.PopoverHeader,
|
|
5915
6315
|
{
|
|
5916
|
-
title: (0,
|
|
6316
|
+
title: (0, import_i18n35.__)("Icon library", "elementor"),
|
|
5917
6317
|
onClose: handleClose,
|
|
5918
|
-
icon: /* @__PURE__ */
|
|
6318
|
+
icon: /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "tiny" }),
|
|
6319
|
+
actions: [/* @__PURE__ */ React85.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
|
|
5919
6320
|
sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
|
|
5920
6321
|
}
|
|
5921
|
-
), /* @__PURE__ */
|
|
6322
|
+
), /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
|
|
5922
6323
|
import_editor_ui11.SearchField,
|
|
5923
6324
|
{
|
|
5924
6325
|
value: searchInputValue,
|
|
5925
6326
|
onSearch: handleSearchChange,
|
|
5926
|
-
placeholder: (0,
|
|
6327
|
+
placeholder: (0, import_i18n35.__)("Search", "elementor"),
|
|
5927
6328
|
id: "icon-library-search",
|
|
5928
6329
|
sx: { flex: 1, px: 0, pb: 0 }
|
|
5929
6330
|
}
|
|
5930
|
-
), /* @__PURE__ */
|
|
6331
|
+
), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(import_ui67.Divider, null), /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
|
|
5931
6332
|
IconLibraryContent,
|
|
5932
6333
|
{
|
|
5933
6334
|
isLoading,
|
|
@@ -5935,6 +6336,7 @@ var IconLibraryPopover = ({
|
|
|
5935
6336
|
selectedValue,
|
|
5936
6337
|
searchValue,
|
|
5937
6338
|
isCatalogAvailable: icons.length > 0,
|
|
6339
|
+
view,
|
|
5938
6340
|
onSelect: handleSelect,
|
|
5939
6341
|
onClose: handleClose,
|
|
5940
6342
|
onClearSearch: handleClearSearch
|
|
@@ -5947,14 +6349,35 @@ var IconLibraryContent = ({
|
|
|
5947
6349
|
selectedValue,
|
|
5948
6350
|
searchValue,
|
|
5949
6351
|
isCatalogAvailable,
|
|
6352
|
+
view,
|
|
5950
6353
|
onSelect,
|
|
5951
6354
|
onClose,
|
|
5952
6355
|
onClearSearch
|
|
5953
6356
|
}) => {
|
|
5954
6357
|
if (isLoading) {
|
|
5955
|
-
return /* @__PURE__ */
|
|
6358
|
+
return /* @__PURE__ */ React85.createElement(IconLibraryLoadingState, null);
|
|
5956
6359
|
}
|
|
5957
|
-
|
|
6360
|
+
const emptyState = /* @__PURE__ */ React85.createElement(
|
|
6361
|
+
IconLibraryEmptyState,
|
|
6362
|
+
{
|
|
6363
|
+
searchValue,
|
|
6364
|
+
isCatalogAvailable,
|
|
6365
|
+
onClear: onClearSearch
|
|
6366
|
+
}
|
|
6367
|
+
);
|
|
6368
|
+
if (view === "grid") {
|
|
6369
|
+
return /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
|
|
6370
|
+
IconLibraryGrid,
|
|
6371
|
+
{
|
|
6372
|
+
items: items2,
|
|
6373
|
+
selectedValue,
|
|
6374
|
+
onSelect,
|
|
6375
|
+
onClose,
|
|
6376
|
+
noResultsComponent: emptyState
|
|
6377
|
+
}
|
|
6378
|
+
));
|
|
6379
|
+
}
|
|
6380
|
+
return /* @__PURE__ */ React85.createElement(
|
|
5958
6381
|
import_editor_ui11.PopoverMenuList,
|
|
5959
6382
|
{
|
|
5960
6383
|
items: items2,
|
|
@@ -5964,33 +6387,26 @@ var IconLibraryContent = ({
|
|
|
5964
6387
|
onClose,
|
|
5965
6388
|
itemHeight: ICON_LIBRARY_ROW_HEIGHT,
|
|
5966
6389
|
menuItemContentTemplate: IconLibraryRow,
|
|
5967
|
-
noResultsComponent:
|
|
5968
|
-
IconLibraryEmptyState,
|
|
5969
|
-
{
|
|
5970
|
-
searchValue,
|
|
5971
|
-
isCatalogAvailable,
|
|
5972
|
-
onClear: onClearSearch
|
|
5973
|
-
}
|
|
5974
|
-
),
|
|
6390
|
+
noResultsComponent: emptyState,
|
|
5975
6391
|
"data-testid": "icon-library-list"
|
|
5976
6392
|
}
|
|
5977
6393
|
);
|
|
5978
6394
|
};
|
|
5979
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
6395
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(import_ui67.CircularProgress, { role: "progressbar", size: 24 }));
|
|
5980
6396
|
var IconLibraryEmptyState = ({
|
|
5981
6397
|
searchValue,
|
|
5982
6398
|
isCatalogAvailable,
|
|
5983
6399
|
onClear
|
|
5984
6400
|
}) => {
|
|
5985
6401
|
if (!isCatalogAvailable) {
|
|
5986
|
-
return /* @__PURE__ */
|
|
6402
|
+
return /* @__PURE__ */ React85.createElement(CatalogUnavailable, null);
|
|
5987
6403
|
}
|
|
5988
|
-
return /* @__PURE__ */
|
|
6404
|
+
return /* @__PURE__ */ React85.createElement(NoResults, { searchValue, onClear });
|
|
5989
6405
|
};
|
|
5990
6406
|
var IconLibraryRow = (item) => {
|
|
5991
6407
|
const icon = item;
|
|
5992
|
-
return /* @__PURE__ */
|
|
5993
|
-
|
|
6408
|
+
return /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
|
|
6409
|
+
import_ui67.Box,
|
|
5994
6410
|
{
|
|
5995
6411
|
sx: {
|
|
5996
6412
|
width: ICON_TILE_SIZE,
|
|
@@ -6005,11 +6421,11 @@ var IconLibraryRow = (item) => {
|
|
|
6005
6421
|
flexShrink: 0
|
|
6006
6422
|
}
|
|
6007
6423
|
},
|
|
6008
|
-
icon.paths.length > 0 ? /* @__PURE__ */
|
|
6009
|
-
), /* @__PURE__ */
|
|
6424
|
+
icon.paths.length > 0 ? /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" }) : null
|
|
6425
|
+
), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
6010
6426
|
};
|
|
6011
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
6012
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
6427
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
|
|
6428
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(import_ui67.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
|
|
6013
6429
|
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
6014
6430
|
...icon,
|
|
6015
6431
|
type: "item",
|
|
@@ -6026,10 +6442,10 @@ function createIconPropValue(icon, library) {
|
|
|
6026
6442
|
}
|
|
6027
6443
|
|
|
6028
6444
|
// src/controls/svg-media-overlay.tsx
|
|
6029
|
-
var
|
|
6030
|
-
var
|
|
6031
|
-
var
|
|
6032
|
-
var
|
|
6445
|
+
var React86 = __toESM(require("react"));
|
|
6446
|
+
var import_icons24 = require("@elementor/icons");
|
|
6447
|
+
var import_ui68 = require("@elementor/ui");
|
|
6448
|
+
var import_i18n36 = require("@wordpress/i18n");
|
|
6033
6449
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
6034
6450
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
6035
6451
|
var MEDIA_ACTION_PADDING_Y = 0.75;
|
|
@@ -6039,7 +6455,7 @@ var svgButtonSx = {
|
|
|
6039
6455
|
px: MEDIA_ACTION_PADDING_X,
|
|
6040
6456
|
py: MEDIA_ACTION_PADDING_Y
|
|
6041
6457
|
};
|
|
6042
|
-
var MediaActionGroup = (0,
|
|
6458
|
+
var MediaActionGroup = (0, import_ui68.styled)(import_ui68.Stack)(({ theme }) => ({
|
|
6043
6459
|
display: "inline-flex",
|
|
6044
6460
|
flexDirection: "row",
|
|
6045
6461
|
alignItems: "stretch",
|
|
@@ -6061,19 +6477,19 @@ var SvgMediaOverlay = ({
|
|
|
6061
6477
|
onOpenIconLibrary,
|
|
6062
6478
|
infotipTitle,
|
|
6063
6479
|
infotipDescription
|
|
6064
|
-
}) => /* @__PURE__ */
|
|
6065
|
-
|
|
6480
|
+
}) => /* @__PURE__ */ React86.createElement(import_ui68.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
|
|
6481
|
+
import_ui68.Button,
|
|
6066
6482
|
{
|
|
6067
6483
|
size: "tiny",
|
|
6068
6484
|
color: "inherit",
|
|
6069
6485
|
variant: "text",
|
|
6070
6486
|
onClick: onSelectSvg,
|
|
6071
|
-
"aria-label": (0,
|
|
6487
|
+
"aria-label": (0, import_i18n36.__)("Select", "elementor"),
|
|
6072
6488
|
sx: svgButtonSx
|
|
6073
6489
|
},
|
|
6074
|
-
(0,
|
|
6075
|
-
), /* @__PURE__ */
|
|
6076
|
-
|
|
6490
|
+
(0, import_i18n36.__)("Select", "elementor")
|
|
6491
|
+
), /* @__PURE__ */ React86.createElement(
|
|
6492
|
+
import_ui68.Box,
|
|
6077
6493
|
{
|
|
6078
6494
|
sx: {
|
|
6079
6495
|
width: "1px",
|
|
@@ -6082,22 +6498,22 @@ var SvgMediaOverlay = ({
|
|
|
6082
6498
|
flexShrink: 0
|
|
6083
6499
|
}
|
|
6084
6500
|
}
|
|
6085
|
-
), /* @__PURE__ */
|
|
6501
|
+
), /* @__PURE__ */ React86.createElement(
|
|
6086
6502
|
ConditionalControlInfotip,
|
|
6087
6503
|
{
|
|
6088
6504
|
title: infotipTitle,
|
|
6089
6505
|
description: infotipDescription,
|
|
6090
6506
|
isEnabled: !isAdmin
|
|
6091
6507
|
},
|
|
6092
|
-
/* @__PURE__ */
|
|
6093
|
-
)), showIconLibrary ? /* @__PURE__ */
|
|
6094
|
-
|
|
6508
|
+
/* @__PURE__ */ React86.createElement(import_ui68.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
|
|
6509
|
+
)), showIconLibrary ? /* @__PURE__ */ React86.createElement(
|
|
6510
|
+
import_ui68.Button,
|
|
6095
6511
|
{
|
|
6096
6512
|
size: "tiny",
|
|
6097
6513
|
color: "inherit",
|
|
6098
6514
|
variant: "text",
|
|
6099
|
-
startIcon: /* @__PURE__ */
|
|
6100
|
-
"aria-label": (0,
|
|
6515
|
+
startIcon: /* @__PURE__ */ React86.createElement(import_icons24.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
|
|
6516
|
+
"aria-label": (0, import_i18n36.__)("Icon library", "elementor"),
|
|
6101
6517
|
onClick: onOpenIconLibrary,
|
|
6102
6518
|
sx: {
|
|
6103
6519
|
height: "28px",
|
|
@@ -6105,20 +6521,20 @@ var SvgMediaOverlay = ({
|
|
|
6105
6521
|
".MuiButton-icon": { ml: 0 }
|
|
6106
6522
|
}
|
|
6107
6523
|
},
|
|
6108
|
-
/* @__PURE__ */
|
|
6524
|
+
/* @__PURE__ */ React86.createElement(import_ui68.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
|
|
6109
6525
|
) : null);
|
|
6110
6526
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
6111
6527
|
if (isAdmin) {
|
|
6112
|
-
return /* @__PURE__ */
|
|
6528
|
+
return /* @__PURE__ */ React86.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
|
|
6113
6529
|
}
|
|
6114
|
-
return /* @__PURE__ */
|
|
6530
|
+
return /* @__PURE__ */ React86.createElement(import_ui68.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
|
|
6115
6531
|
};
|
|
6116
6532
|
var UploadButton = ({
|
|
6117
6533
|
disabled = false,
|
|
6118
6534
|
sx,
|
|
6119
6535
|
onClick
|
|
6120
|
-
}) => /* @__PURE__ */
|
|
6121
|
-
|
|
6536
|
+
}) => /* @__PURE__ */ React86.createElement(
|
|
6537
|
+
import_ui68.Button,
|
|
6122
6538
|
{
|
|
6123
6539
|
sx,
|
|
6124
6540
|
size: "tiny",
|
|
@@ -6126,15 +6542,15 @@ var UploadButton = ({
|
|
|
6126
6542
|
variant: "text",
|
|
6127
6543
|
disabled,
|
|
6128
6544
|
onClick,
|
|
6129
|
-
"aria-label": (0,
|
|
6545
|
+
"aria-label": (0, import_i18n36.__)("Upload", "elementor")
|
|
6130
6546
|
},
|
|
6131
|
-
/* @__PURE__ */
|
|
6547
|
+
/* @__PURE__ */ React86.createElement(import_icons24.UploadIcon, null)
|
|
6132
6548
|
);
|
|
6133
6549
|
|
|
6134
6550
|
// src/controls/svg-media-preview.tsx
|
|
6135
|
-
var
|
|
6136
|
-
var
|
|
6137
|
-
var
|
|
6551
|
+
var React87 = __toESM(require("react"));
|
|
6552
|
+
var import_ui69 = require("@elementor/ui");
|
|
6553
|
+
var import_i18n37 = require("@wordpress/i18n");
|
|
6138
6554
|
var ICON_PREVIEW_SIZE = 50;
|
|
6139
6555
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
6140
6556
|
var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
@@ -6142,27 +6558,27 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
6142
6558
|
const { data: icons = [], isLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
|
|
6143
6559
|
const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
|
|
6144
6560
|
if (isFetching || shouldLoadIconCatalog && isLoading) {
|
|
6145
|
-
return /* @__PURE__ */
|
|
6561
|
+
return /* @__PURE__ */ React87.createElement(import_ui69.CircularProgress, { role: "progressbar" });
|
|
6146
6562
|
}
|
|
6147
6563
|
if (selectedIcon) {
|
|
6148
|
-
return /* @__PURE__ */
|
|
6564
|
+
return /* @__PURE__ */ React87.createElement(IconPreview, { icon: selectedIcon });
|
|
6149
6565
|
}
|
|
6150
6566
|
if (shouldLoadIconCatalog) {
|
|
6151
|
-
return /* @__PURE__ */
|
|
6567
|
+
return /* @__PURE__ */ React87.createElement(IconPreviewPlaceholder, null);
|
|
6152
6568
|
}
|
|
6153
|
-
return /* @__PURE__ */
|
|
6569
|
+
return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
|
|
6154
6570
|
};
|
|
6155
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
6571
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui69.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
|
|
6156
6572
|
FontAwesomeGlyph,
|
|
6157
6573
|
{
|
|
6158
6574
|
icon,
|
|
6159
6575
|
size: ICON_PREVIEW_SIZE,
|
|
6160
6576
|
color: ICON_PREVIEW_COLOR,
|
|
6161
|
-
label: (0,
|
|
6577
|
+
label: (0, import_i18n37.__)("Preview icon", "elementor")
|
|
6162
6578
|
}
|
|
6163
6579
|
));
|
|
6164
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
6165
|
-
|
|
6580
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
|
|
6581
|
+
import_ui69.Box,
|
|
6166
6582
|
{
|
|
6167
6583
|
"aria-hidden": true,
|
|
6168
6584
|
sx: {
|
|
@@ -6172,12 +6588,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React85.createElement(
|
|
|
6172
6588
|
}
|
|
6173
6589
|
}
|
|
6174
6590
|
);
|
|
6175
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
6176
|
-
|
|
6591
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React87.createElement(
|
|
6592
|
+
import_ui69.CardMedia,
|
|
6177
6593
|
{
|
|
6178
6594
|
component: "img",
|
|
6179
6595
|
image: src,
|
|
6180
|
-
alt: (0,
|
|
6596
|
+
alt: (0, import_i18n37.__)("Preview SVG", "elementor"),
|
|
6181
6597
|
sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
|
|
6182
6598
|
}
|
|
6183
6599
|
);
|
|
@@ -6187,7 +6603,7 @@ var TILE_SIZE = 8;
|
|
|
6187
6603
|
var TILE_WHITE = "transparent";
|
|
6188
6604
|
var TILE_BLACK = "#c1c1c1";
|
|
6189
6605
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
6190
|
-
var StyledCard = (0,
|
|
6606
|
+
var StyledCard = (0, import_ui70.styled)(import_ui70.Card)`
|
|
6191
6607
|
position: relative;
|
|
6192
6608
|
background-color: white;
|
|
6193
6609
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
@@ -6198,7 +6614,7 @@ var StyledCard = (0, import_ui68.styled)(import_ui68.Card)`
|
|
|
6198
6614
|
border: none;
|
|
6199
6615
|
`;
|
|
6200
6616
|
var PREVIEW_ICON_COLOR = "#000000";
|
|
6201
|
-
var StyledCardMediaContainer = (0,
|
|
6617
|
+
var StyledCardMediaContainer = (0, import_ui70.styled)(import_ui70.Stack)`
|
|
6202
6618
|
position: relative;
|
|
6203
6619
|
height: 140px;
|
|
6204
6620
|
object-fit: contain;
|
|
@@ -6218,11 +6634,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6218
6634
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
6219
6635
|
const src = attachment?.url ?? url?.value ?? null;
|
|
6220
6636
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
6221
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
6222
|
-
const iconLibraryPopoverState = (0,
|
|
6223
|
-
const controlContainerRef = (0,
|
|
6224
|
-
const buttonGroupRef = (0,
|
|
6225
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] = (0,
|
|
6637
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react53.useState)(false);
|
|
6638
|
+
const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
|
|
6639
|
+
const controlContainerRef = (0, import_react53.useRef)(null);
|
|
6640
|
+
const buttonGroupRef = (0, import_react53.useRef)(null);
|
|
6641
|
+
const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
|
|
6226
6642
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
6227
6643
|
const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
|
|
6228
6644
|
const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
|
|
@@ -6274,7 +6690,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6274
6690
|
setIconLibraryAnchor(anchor);
|
|
6275
6691
|
iconLibraryPopoverState.open(event);
|
|
6276
6692
|
};
|
|
6277
|
-
(0,
|
|
6693
|
+
(0, import_react53.useEffect)(() => {
|
|
6278
6694
|
if (!iconLibraryPopoverState.isOpen) {
|
|
6279
6695
|
return;
|
|
6280
6696
|
}
|
|
@@ -6290,8 +6706,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6290
6706
|
};
|
|
6291
6707
|
}, [iconLibraryPopoverState.isOpen]);
|
|
6292
6708
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
6293
|
-
return /* @__PURE__ */
|
|
6294
|
-
|
|
6709
|
+
return /* @__PURE__ */ React88.createElement(import_ui70.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
|
|
6710
|
+
import_ui70.Popover,
|
|
6295
6711
|
{
|
|
6296
6712
|
disableScrollLock: true,
|
|
6297
6713
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -6310,7 +6726,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6310
6726
|
}
|
|
6311
6727
|
}
|
|
6312
6728
|
},
|
|
6313
|
-
/* @__PURE__ */
|
|
6729
|
+
/* @__PURE__ */ React88.createElement(
|
|
6314
6730
|
IconLibraryPopover,
|
|
6315
6731
|
{
|
|
6316
6732
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -6321,14 +6737,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6321
6737
|
width: iconLibraryWidth
|
|
6322
6738
|
}
|
|
6323
6739
|
)
|
|
6324
|
-
) : null, /* @__PURE__ */
|
|
6325
|
-
|
|
6740
|
+
) : null, /* @__PURE__ */ React88.createElement(
|
|
6741
|
+
import_ui70.Box,
|
|
6326
6742
|
{
|
|
6327
6743
|
ref: controlContainerRef,
|
|
6328
6744
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
6329
6745
|
sx: { width: "100%" }
|
|
6330
6746
|
},
|
|
6331
|
-
/* @__PURE__ */
|
|
6747
|
+
/* @__PURE__ */ React88.createElement(ControlActions, null, /* @__PURE__ */ React88.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React88.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React88.createElement(
|
|
6332
6748
|
SvgMediaPreview,
|
|
6333
6749
|
{
|
|
6334
6750
|
isFetching,
|
|
@@ -6336,8 +6752,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6336
6752
|
iconClassName: selectedIconClass,
|
|
6337
6753
|
iconLibrary: selectedIconLibrary
|
|
6338
6754
|
}
|
|
6339
|
-
)), /* @__PURE__ */
|
|
6340
|
-
|
|
6755
|
+
)), /* @__PURE__ */ React88.createElement(
|
|
6756
|
+
import_ui70.CardOverlay,
|
|
6341
6757
|
{
|
|
6342
6758
|
sx: {
|
|
6343
6759
|
"&:hover": {
|
|
@@ -6345,7 +6761,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6345
6761
|
}
|
|
6346
6762
|
}
|
|
6347
6763
|
},
|
|
6348
|
-
/* @__PURE__ */
|
|
6764
|
+
/* @__PURE__ */ React88.createElement(
|
|
6349
6765
|
SvgMediaOverlay,
|
|
6350
6766
|
{
|
|
6351
6767
|
isAdmin,
|
|
@@ -6354,22 +6770,22 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
6354
6770
|
onSelectSvg: handleSelectSvg,
|
|
6355
6771
|
onUpload: handleUpload,
|
|
6356
6772
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
6357
|
-
infotipTitle: (0,
|
|
6358
|
-
infotipDescription: /* @__PURE__ */
|
|
6773
|
+
infotipTitle: (0, import_i18n38.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
6774
|
+
infotipDescription: /* @__PURE__ */ React88.createElement(UnfilteredUploadInfotipDescription, null)
|
|
6359
6775
|
}
|
|
6360
6776
|
)
|
|
6361
6777
|
)))
|
|
6362
6778
|
));
|
|
6363
6779
|
});
|
|
6364
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
6780
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React88.createElement(React88.Fragment, null, (0, import_i18n38.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React88.createElement("br", null), (0, import_i18n38.__)("file uploads.", "elementor"));
|
|
6365
6781
|
|
|
6366
6782
|
// src/controls/video-media-control.tsx
|
|
6367
|
-
var
|
|
6783
|
+
var React89 = __toESM(require("react"));
|
|
6368
6784
|
var import_editor_props36 = require("@elementor/editor-props");
|
|
6369
|
-
var
|
|
6370
|
-
var
|
|
6785
|
+
var import_icons25 = require("@elementor/icons");
|
|
6786
|
+
var import_ui71 = require("@elementor/ui");
|
|
6371
6787
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
6372
|
-
var
|
|
6788
|
+
var import_i18n39 = require("@wordpress/i18n");
|
|
6373
6789
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
6374
6790
|
var VideoMediaControl = createControl(() => {
|
|
6375
6791
|
const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
|
|
@@ -6399,8 +6815,8 @@ var VideoMediaControl = createControl(() => {
|
|
|
6399
6815
|
});
|
|
6400
6816
|
}
|
|
6401
6817
|
});
|
|
6402
|
-
return /* @__PURE__ */
|
|
6403
|
-
|
|
6818
|
+
return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(import_ui71.Card, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
|
|
6819
|
+
import_ui71.CardMedia,
|
|
6404
6820
|
{
|
|
6405
6821
|
sx: {
|
|
6406
6822
|
height: 140,
|
|
@@ -6414,46 +6830,46 @@ var VideoMediaControl = createControl(() => {
|
|
|
6414
6830
|
alignItems: "center"
|
|
6415
6831
|
}
|
|
6416
6832
|
},
|
|
6417
|
-
/* @__PURE__ */
|
|
6418
|
-
), /* @__PURE__ */
|
|
6419
|
-
|
|
6833
|
+
/* @__PURE__ */ React89.createElement(VideoPreview, { isFetching, videoUrl })
|
|
6834
|
+
), /* @__PURE__ */ React89.createElement(import_ui71.CardOverlay, null, /* @__PURE__ */ React89.createElement(import_ui71.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(
|
|
6835
|
+
import_ui71.Button,
|
|
6420
6836
|
{
|
|
6421
6837
|
size: "tiny",
|
|
6422
6838
|
color: "inherit",
|
|
6423
6839
|
variant: "outlined",
|
|
6424
6840
|
onClick: () => open({ mode: "browse" })
|
|
6425
6841
|
},
|
|
6426
|
-
(0,
|
|
6427
|
-
), /* @__PURE__ */
|
|
6428
|
-
|
|
6842
|
+
(0, import_i18n39.__)("Select video", "elementor")
|
|
6843
|
+
), /* @__PURE__ */ React89.createElement(
|
|
6844
|
+
import_ui71.Button,
|
|
6429
6845
|
{
|
|
6430
6846
|
size: "tiny",
|
|
6431
6847
|
variant: "text",
|
|
6432
6848
|
color: "inherit",
|
|
6433
|
-
startIcon: /* @__PURE__ */
|
|
6849
|
+
startIcon: /* @__PURE__ */ React89.createElement(import_icons25.UploadIcon, null),
|
|
6434
6850
|
onClick: () => open({ mode: "upload" })
|
|
6435
6851
|
},
|
|
6436
|
-
(0,
|
|
6437
|
-
), /* @__PURE__ */
|
|
6438
|
-
|
|
6852
|
+
(0, import_i18n39.__)("Upload", "elementor")
|
|
6853
|
+
), /* @__PURE__ */ React89.createElement(
|
|
6854
|
+
import_ui71.Button,
|
|
6439
6855
|
{
|
|
6440
6856
|
size: "tiny",
|
|
6441
6857
|
variant: "text",
|
|
6442
6858
|
color: "inherit",
|
|
6443
6859
|
onClick: () => open({ mode: "url", currentUrl: currentUrlForModal })
|
|
6444
6860
|
},
|
|
6445
|
-
(0,
|
|
6861
|
+
(0, import_i18n39.__)("Insert from URL", "elementor")
|
|
6446
6862
|
)))));
|
|
6447
6863
|
});
|
|
6448
6864
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
6449
6865
|
if (isFetching) {
|
|
6450
|
-
return /* @__PURE__ */
|
|
6866
|
+
return /* @__PURE__ */ React89.createElement(import_ui71.CircularProgress, null);
|
|
6451
6867
|
}
|
|
6452
6868
|
if (videoUrl) {
|
|
6453
|
-
return /* @__PURE__ */
|
|
6869
|
+
return /* @__PURE__ */ React89.createElement(
|
|
6454
6870
|
"video",
|
|
6455
6871
|
{
|
|
6456
|
-
"aria-label": (0,
|
|
6872
|
+
"aria-label": (0, import_i18n39.__)("Video preview", "elementor"),
|
|
6457
6873
|
src: videoUrl,
|
|
6458
6874
|
muted: true,
|
|
6459
6875
|
preload: "metadata",
|
|
@@ -6466,30 +6882,30 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
6466
6882
|
}
|
|
6467
6883
|
);
|
|
6468
6884
|
}
|
|
6469
|
-
return /* @__PURE__ */
|
|
6885
|
+
return /* @__PURE__ */ React89.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
6470
6886
|
};
|
|
6471
6887
|
|
|
6472
6888
|
// src/controls/background-control/background-control.tsx
|
|
6473
|
-
var
|
|
6889
|
+
var React96 = __toESM(require("react"));
|
|
6474
6890
|
var import_editor_props42 = require("@elementor/editor-props");
|
|
6475
|
-
var
|
|
6476
|
-
var
|
|
6891
|
+
var import_ui79 = require("@elementor/ui");
|
|
6892
|
+
var import_i18n45 = require("@wordpress/i18n");
|
|
6477
6893
|
|
|
6478
6894
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
6479
|
-
var
|
|
6895
|
+
var React95 = __toESM(require("react"));
|
|
6480
6896
|
var import_editor_props41 = require("@elementor/editor-props");
|
|
6481
|
-
var
|
|
6897
|
+
var import_ui78 = require("@elementor/ui");
|
|
6482
6898
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
6483
|
-
var
|
|
6899
|
+
var import_i18n44 = require("@wordpress/i18n");
|
|
6484
6900
|
|
|
6485
6901
|
// src/env.ts
|
|
6486
6902
|
var import_env = require("@elementor/env");
|
|
6487
6903
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
6488
6904
|
|
|
6489
6905
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
6490
|
-
var
|
|
6906
|
+
var React90 = __toESM(require("react"));
|
|
6491
6907
|
var import_editor_props37 = require("@elementor/editor-props");
|
|
6492
|
-
var
|
|
6908
|
+
var import_ui72 = require("@elementor/ui");
|
|
6493
6909
|
var BackgroundGradientColorControl = createControl(() => {
|
|
6494
6910
|
const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
|
|
6495
6911
|
const handleChange = (newValue) => {
|
|
@@ -6527,8 +6943,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
6527
6943
|
positions: positions?.value.split(" ")
|
|
6528
6944
|
};
|
|
6529
6945
|
};
|
|
6530
|
-
return /* @__PURE__ */
|
|
6531
|
-
|
|
6946
|
+
return /* @__PURE__ */ React90.createElement(
|
|
6947
|
+
import_ui72.UnstableGradientBox,
|
|
6532
6948
|
{
|
|
6533
6949
|
sx: { width: "auto", padding: 1.5 },
|
|
6534
6950
|
value: normalizeValue(),
|
|
@@ -6552,53 +6968,53 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
|
|
|
6552
6968
|
});
|
|
6553
6969
|
|
|
6554
6970
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
6555
|
-
var
|
|
6556
|
-
var
|
|
6557
|
-
var
|
|
6558
|
-
var
|
|
6971
|
+
var React91 = __toESM(require("react"));
|
|
6972
|
+
var import_icons26 = require("@elementor/icons");
|
|
6973
|
+
var import_ui73 = require("@elementor/ui");
|
|
6974
|
+
var import_i18n40 = require("@wordpress/i18n");
|
|
6559
6975
|
var attachmentControlOptions = [
|
|
6560
6976
|
{
|
|
6561
6977
|
value: "fixed",
|
|
6562
|
-
label: (0,
|
|
6563
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6978
|
+
label: (0, import_i18n40.__)("Fixed", "elementor"),
|
|
6979
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinIcon, { fontSize: size }),
|
|
6564
6980
|
showTooltip: true
|
|
6565
6981
|
},
|
|
6566
6982
|
{
|
|
6567
6983
|
value: "scroll",
|
|
6568
|
-
label: (0,
|
|
6569
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
6984
|
+
label: (0, import_i18n40.__)("Scroll", "elementor"),
|
|
6985
|
+
renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinnedOffIcon, { fontSize: size }),
|
|
6570
6986
|
showTooltip: true
|
|
6571
6987
|
}
|
|
6572
6988
|
];
|
|
6573
6989
|
var BackgroundImageOverlayAttachment = () => {
|
|
6574
|
-
return /* @__PURE__ */
|
|
6990
|
+
return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
6575
6991
|
};
|
|
6576
6992
|
|
|
6577
6993
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
6578
|
-
var
|
|
6579
|
-
var
|
|
6994
|
+
var React92 = __toESM(require("react"));
|
|
6995
|
+
var import_react54 = require("react");
|
|
6580
6996
|
var import_editor_props38 = require("@elementor/editor-props");
|
|
6581
6997
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
6582
|
-
var
|
|
6583
|
-
var
|
|
6584
|
-
var
|
|
6998
|
+
var import_icons27 = require("@elementor/icons");
|
|
6999
|
+
var import_ui74 = require("@elementor/ui");
|
|
7000
|
+
var import_i18n41 = require("@wordpress/i18n");
|
|
6585
7001
|
var backgroundPositionOptions = [
|
|
6586
|
-
{ label: (0,
|
|
6587
|
-
{ label: (0,
|
|
6588
|
-
{ label: (0,
|
|
6589
|
-
{ label: (0,
|
|
6590
|
-
{ label: (0,
|
|
6591
|
-
{ label: (0,
|
|
6592
|
-
{ label: (0,
|
|
6593
|
-
{ label: (0,
|
|
6594
|
-
{ label: (0,
|
|
6595
|
-
{ label: (0,
|
|
7002
|
+
{ label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
|
|
7003
|
+
{ label: (0, import_i18n41.__)("Center left", "elementor"), value: "center left" },
|
|
7004
|
+
{ label: (0, import_i18n41.__)("Center right", "elementor"), value: "center right" },
|
|
7005
|
+
{ label: (0, import_i18n41.__)("Top center", "elementor"), value: "top center" },
|
|
7006
|
+
{ label: (0, import_i18n41.__)("Top left", "elementor"), value: "top left" },
|
|
7007
|
+
{ label: (0, import_i18n41.__)("Top right", "elementor"), value: "top right" },
|
|
7008
|
+
{ label: (0, import_i18n41.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
7009
|
+
{ label: (0, import_i18n41.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
7010
|
+
{ label: (0, import_i18n41.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
7011
|
+
{ label: (0, import_i18n41.__)("Custom", "elementor"), value: "custom" }
|
|
6596
7012
|
];
|
|
6597
7013
|
var BackgroundImageOverlayPosition = () => {
|
|
6598
7014
|
const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
|
|
6599
7015
|
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
6600
7016
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
6601
|
-
const rowRef = (0,
|
|
7017
|
+
const rowRef = (0, import_react54.useRef)(null);
|
|
6602
7018
|
const handlePositionChange = (event) => {
|
|
6603
7019
|
const value = event.target.value || null;
|
|
6604
7020
|
if (value === "custom") {
|
|
@@ -6607,8 +7023,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6607
7023
|
stringPropContext.setValue(value);
|
|
6608
7024
|
}
|
|
6609
7025
|
};
|
|
6610
|
-
return /* @__PURE__ */
|
|
6611
|
-
|
|
7026
|
+
return /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
|
|
7027
|
+
import_ui74.Select,
|
|
6612
7028
|
{
|
|
6613
7029
|
fullWidth: true,
|
|
6614
7030
|
size: "tiny",
|
|
@@ -6616,18 +7032,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6616
7032
|
disabled: stringPropContext.disabled,
|
|
6617
7033
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
6618
7034
|
},
|
|
6619
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
6620
|
-
))))), isCustom ? /* @__PURE__ */
|
|
7035
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
7036
|
+
))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
|
|
6621
7037
|
SizeControl,
|
|
6622
7038
|
{
|
|
6623
|
-
startIcon: /* @__PURE__ */
|
|
7039
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
|
|
6624
7040
|
anchorRef: rowRef,
|
|
6625
7041
|
min: -Number.MAX_SAFE_INTEGER
|
|
6626
7042
|
}
|
|
6627
|
-
))), /* @__PURE__ */
|
|
7043
|
+
))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
|
|
6628
7044
|
SizeControl,
|
|
6629
7045
|
{
|
|
6630
|
-
startIcon: /* @__PURE__ */
|
|
7046
|
+
startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
|
|
6631
7047
|
anchorRef: rowRef,
|
|
6632
7048
|
min: -Number.MAX_SAFE_INTEGER
|
|
6633
7049
|
}
|
|
@@ -6635,70 +7051,70 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
6635
7051
|
};
|
|
6636
7052
|
|
|
6637
7053
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
6638
|
-
var
|
|
6639
|
-
var
|
|
6640
|
-
var
|
|
6641
|
-
var
|
|
7054
|
+
var React93 = __toESM(require("react"));
|
|
7055
|
+
var import_icons28 = require("@elementor/icons");
|
|
7056
|
+
var import_ui75 = require("@elementor/ui");
|
|
7057
|
+
var import_i18n42 = require("@wordpress/i18n");
|
|
6642
7058
|
var repeatControlOptions = [
|
|
6643
7059
|
{
|
|
6644
7060
|
value: "repeat",
|
|
6645
|
-
label: (0,
|
|
6646
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7061
|
+
label: (0, import_i18n42.__)("Repeat", "elementor"),
|
|
7062
|
+
renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.GridDotsIcon, { fontSize: size }),
|
|
6647
7063
|
showTooltip: true
|
|
6648
7064
|
},
|
|
6649
7065
|
{
|
|
6650
7066
|
value: "repeat-x",
|
|
6651
|
-
label: (0,
|
|
6652
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7067
|
+
label: (0, import_i18n42.__)("Repeat-x", "elementor"),
|
|
7068
|
+
renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsHorizontalIcon, { fontSize: size }),
|
|
6653
7069
|
showTooltip: true
|
|
6654
7070
|
},
|
|
6655
7071
|
{
|
|
6656
7072
|
value: "repeat-y",
|
|
6657
|
-
label: (0,
|
|
6658
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7073
|
+
label: (0, import_i18n42.__)("Repeat-y", "elementor"),
|
|
7074
|
+
renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsVerticalIcon, { fontSize: size }),
|
|
6659
7075
|
showTooltip: true
|
|
6660
7076
|
},
|
|
6661
7077
|
{
|
|
6662
7078
|
value: "no-repeat",
|
|
6663
|
-
label: (0,
|
|
6664
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7079
|
+
label: (0, import_i18n42.__)("No-repeat", "elementor"),
|
|
7080
|
+
renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.XIcon, { fontSize: size }),
|
|
6665
7081
|
showTooltip: true
|
|
6666
7082
|
}
|
|
6667
7083
|
];
|
|
6668
7084
|
var BackgroundImageOverlayRepeat = () => {
|
|
6669
|
-
return /* @__PURE__ */
|
|
7085
|
+
return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
6670
7086
|
};
|
|
6671
7087
|
|
|
6672
7088
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
6673
|
-
var
|
|
6674
|
-
var
|
|
7089
|
+
var React94 = __toESM(require("react"));
|
|
7090
|
+
var import_react55 = require("react");
|
|
6675
7091
|
var import_editor_props39 = require("@elementor/editor-props");
|
|
6676
|
-
var
|
|
6677
|
-
var
|
|
6678
|
-
var
|
|
7092
|
+
var import_icons29 = require("@elementor/icons");
|
|
7093
|
+
var import_ui76 = require("@elementor/ui");
|
|
7094
|
+
var import_i18n43 = require("@wordpress/i18n");
|
|
6679
7095
|
var sizeControlOptions = [
|
|
6680
7096
|
{
|
|
6681
7097
|
value: "auto",
|
|
6682
|
-
label: (0,
|
|
6683
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7098
|
+
label: (0, import_i18n43.__)("Auto", "elementor"),
|
|
7099
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.LetterAIcon, { fontSize: size }),
|
|
6684
7100
|
showTooltip: true
|
|
6685
7101
|
},
|
|
6686
7102
|
{
|
|
6687
7103
|
value: "cover",
|
|
6688
|
-
label: (0,
|
|
6689
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7104
|
+
label: (0, import_i18n43.__)("Cover", "elementor"),
|
|
7105
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: size }),
|
|
6690
7106
|
showTooltip: true
|
|
6691
7107
|
},
|
|
6692
7108
|
{
|
|
6693
7109
|
value: "contain",
|
|
6694
|
-
label: (0,
|
|
6695
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7110
|
+
label: (0, import_i18n43.__)("Contain", "elementor"),
|
|
7111
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowBarBothIcon, { fontSize: size }),
|
|
6696
7112
|
showTooltip: true
|
|
6697
7113
|
},
|
|
6698
7114
|
{
|
|
6699
7115
|
value: "custom",
|
|
6700
|
-
label: (0,
|
|
6701
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7116
|
+
label: (0, import_i18n43.__)("Custom", "elementor"),
|
|
7117
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.PencilIcon, { fontSize: size }),
|
|
6702
7118
|
showTooltip: true
|
|
6703
7119
|
}
|
|
6704
7120
|
];
|
|
@@ -6706,7 +7122,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6706
7122
|
const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
|
|
6707
7123
|
const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
|
|
6708
7124
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
6709
|
-
const rowRef = (0,
|
|
7125
|
+
const rowRef = (0, import_react55.useRef)(null);
|
|
6710
7126
|
const handleSizeChange = (size) => {
|
|
6711
7127
|
if (size === "custom") {
|
|
6712
7128
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -6714,7 +7130,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6714
7130
|
stringPropContext.setValue(size);
|
|
6715
7131
|
}
|
|
6716
7132
|
};
|
|
6717
|
-
return /* @__PURE__ */
|
|
7133
|
+
return /* @__PURE__ */ React94.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
|
|
6718
7134
|
ControlToggleButtonGroup,
|
|
6719
7135
|
{
|
|
6720
7136
|
exclusive: true,
|
|
@@ -6723,17 +7139,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6723
7139
|
disabled: stringPropContext.disabled,
|
|
6724
7140
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
6725
7141
|
}
|
|
6726
|
-
)))), isCustom ? /* @__PURE__ */
|
|
7142
|
+
)))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
|
|
6727
7143
|
SizeControl,
|
|
6728
7144
|
{
|
|
6729
|
-
startIcon: /* @__PURE__ */
|
|
7145
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
6730
7146
|
extendedOptions: ["auto"],
|
|
6731
7147
|
anchorRef: rowRef
|
|
6732
7148
|
}
|
|
6733
|
-
))), /* @__PURE__ */
|
|
7149
|
+
))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
|
|
6734
7150
|
SizeControl,
|
|
6735
7151
|
{
|
|
6736
|
-
startIcon: /* @__PURE__ */
|
|
7152
|
+
startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
6737
7153
|
extendedOptions: ["auto"],
|
|
6738
7154
|
anchorRef: rowRef
|
|
6739
7155
|
}
|
|
@@ -6741,9 +7157,9 @@ var BackgroundImageOverlaySize = () => {
|
|
|
6741
7157
|
};
|
|
6742
7158
|
|
|
6743
7159
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
6744
|
-
var
|
|
7160
|
+
var import_react56 = require("react");
|
|
6745
7161
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
6746
|
-
var
|
|
7162
|
+
var import_ui77 = require("@elementor/ui");
|
|
6747
7163
|
var useBackgroundTabsHistory = ({
|
|
6748
7164
|
color: initialBackgroundColorOverlay2,
|
|
6749
7165
|
image: initialBackgroundImageOverlay,
|
|
@@ -6761,8 +7177,8 @@ var useBackgroundTabsHistory = ({
|
|
|
6761
7177
|
}
|
|
6762
7178
|
return "image";
|
|
6763
7179
|
};
|
|
6764
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
6765
|
-
const valuesHistory = (0,
|
|
7180
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui77.useTabs)(getCurrentOverlayType());
|
|
7181
|
+
const valuesHistory = (0, import_react56.useRef)({
|
|
6766
7182
|
image: initialBackgroundImageOverlay,
|
|
6767
7183
|
color: initialBackgroundColorOverlay2,
|
|
6768
7184
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -6830,29 +7246,29 @@ var getInitialBackgroundOverlay = () => ({
|
|
|
6830
7246
|
}
|
|
6831
7247
|
});
|
|
6832
7248
|
var backgroundResolutionOptions = [
|
|
6833
|
-
{ label: (0,
|
|
6834
|
-
{ label: (0,
|
|
6835
|
-
{ label: (0,
|
|
6836
|
-
{ label: (0,
|
|
7249
|
+
{ label: (0, import_i18n44.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
|
|
7250
|
+
{ label: (0, import_i18n44.__)("Medium - 300 x 300", "elementor"), value: "medium" },
|
|
7251
|
+
{ label: (0, import_i18n44.__)("Large 1024 x 1024", "elementor"), value: "large" },
|
|
7252
|
+
{ label: (0, import_i18n44.__)("Full", "elementor"), value: "full" }
|
|
6837
7253
|
];
|
|
6838
7254
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
6839
7255
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
|
|
6840
|
-
return /* @__PURE__ */
|
|
7256
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React95.createElement(
|
|
6841
7257
|
ControlRepeater,
|
|
6842
7258
|
{
|
|
6843
7259
|
initial: getInitialBackgroundOverlay(),
|
|
6844
7260
|
propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
|
|
6845
7261
|
},
|
|
6846
|
-
/* @__PURE__ */
|
|
6847
|
-
/* @__PURE__ */
|
|
7262
|
+
/* @__PURE__ */ React95.createElement(RepeaterHeader, { label: (0, import_i18n44.__)("Overlay", "elementor") }, /* @__PURE__ */ React95.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
7263
|
+
/* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
|
|
6848
7264
|
Item,
|
|
6849
7265
|
{
|
|
6850
7266
|
Icon: ItemIcon2,
|
|
6851
7267
|
Label: ItemLabel3,
|
|
6852
|
-
actions: /* @__PURE__ */
|
|
7268
|
+
actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
|
|
6853
7269
|
}
|
|
6854
7270
|
)),
|
|
6855
|
-
/* @__PURE__ */
|
|
7271
|
+
/* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(ItemContent2, null))
|
|
6856
7272
|
));
|
|
6857
7273
|
});
|
|
6858
7274
|
var ItemContent2 = () => {
|
|
@@ -6862,27 +7278,27 @@ var ItemContent2 = () => {
|
|
|
6862
7278
|
gradient: initialBackgroundGradientOverlay.value
|
|
6863
7279
|
});
|
|
6864
7280
|
const { rowRef } = useRepeaterContext();
|
|
6865
|
-
return /* @__PURE__ */
|
|
6866
|
-
|
|
7281
|
+
return /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
|
|
7282
|
+
import_ui78.Tabs,
|
|
6867
7283
|
{
|
|
6868
7284
|
size: "small",
|
|
6869
7285
|
variant: "fullWidth",
|
|
6870
7286
|
...getTabsProps(),
|
|
6871
|
-
"aria-label": (0,
|
|
7287
|
+
"aria-label": (0, import_i18n44.__)("Background Overlay", "elementor")
|
|
6872
7288
|
},
|
|
6873
|
-
/* @__PURE__ */
|
|
6874
|
-
/* @__PURE__ */
|
|
6875
|
-
/* @__PURE__ */
|
|
6876
|
-
)), /* @__PURE__ */
|
|
7289
|
+
/* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
7290
|
+
/* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
7291
|
+
/* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
|
|
7292
|
+
)), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
6877
7293
|
};
|
|
6878
7294
|
var ItemIcon2 = ({ value }) => {
|
|
6879
7295
|
switch (value.$$type) {
|
|
6880
7296
|
case "background-image-overlay":
|
|
6881
|
-
return /* @__PURE__ */
|
|
7297
|
+
return /* @__PURE__ */ React95.createElement(ItemIconImage, { value });
|
|
6882
7298
|
case "background-color-overlay":
|
|
6883
|
-
return /* @__PURE__ */
|
|
7299
|
+
return /* @__PURE__ */ React95.createElement(ItemIconColor, { value });
|
|
6884
7300
|
case "background-gradient-overlay":
|
|
6885
|
-
return /* @__PURE__ */
|
|
7301
|
+
return /* @__PURE__ */ React95.createElement(ItemIconGradient, { value });
|
|
6886
7302
|
default:
|
|
6887
7303
|
return null;
|
|
6888
7304
|
}
|
|
@@ -6895,12 +7311,12 @@ var extractColorFrom = (prop) => {
|
|
|
6895
7311
|
};
|
|
6896
7312
|
var ItemIconColor = ({ value: prop }) => {
|
|
6897
7313
|
const color = extractColorFrom(prop);
|
|
6898
|
-
return /* @__PURE__ */
|
|
7314
|
+
return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
6899
7315
|
};
|
|
6900
7316
|
var ItemIconImage = ({ value }) => {
|
|
6901
7317
|
const { imageUrl } = useImage(value);
|
|
6902
|
-
return /* @__PURE__ */
|
|
6903
|
-
|
|
7318
|
+
return /* @__PURE__ */ React95.createElement(
|
|
7319
|
+
import_ui78.CardMedia,
|
|
6904
7320
|
{
|
|
6905
7321
|
image: imageUrl,
|
|
6906
7322
|
sx: (theme) => ({
|
|
@@ -6914,43 +7330,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
6914
7330
|
};
|
|
6915
7331
|
var ItemIconGradient = ({ value }) => {
|
|
6916
7332
|
const gradient = getGradientValue(value);
|
|
6917
|
-
return /* @__PURE__ */
|
|
7333
|
+
return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
6918
7334
|
};
|
|
6919
7335
|
var ItemLabel3 = ({ value }) => {
|
|
6920
7336
|
switch (value.$$type) {
|
|
6921
7337
|
case "background-image-overlay":
|
|
6922
|
-
return /* @__PURE__ */
|
|
7338
|
+
return /* @__PURE__ */ React95.createElement(ItemLabelImage, { value });
|
|
6923
7339
|
case "background-color-overlay":
|
|
6924
|
-
return /* @__PURE__ */
|
|
7340
|
+
return /* @__PURE__ */ React95.createElement(ItemLabelColor, { value });
|
|
6925
7341
|
case "background-gradient-overlay":
|
|
6926
|
-
return /* @__PURE__ */
|
|
7342
|
+
return /* @__PURE__ */ React95.createElement(ItemLabelGradient, { value });
|
|
6927
7343
|
default:
|
|
6928
7344
|
return null;
|
|
6929
7345
|
}
|
|
6930
7346
|
};
|
|
6931
7347
|
var ItemLabelColor = ({ value: prop }) => {
|
|
6932
7348
|
const color = extractColorFrom(prop);
|
|
6933
|
-
return /* @__PURE__ */
|
|
7349
|
+
return /* @__PURE__ */ React95.createElement("span", null, color);
|
|
6934
7350
|
};
|
|
6935
7351
|
var ItemLabelImage = ({ value }) => {
|
|
6936
7352
|
const { imageTitle } = useImage(value);
|
|
6937
|
-
return /* @__PURE__ */
|
|
7353
|
+
return /* @__PURE__ */ React95.createElement("span", null, imageTitle);
|
|
6938
7354
|
};
|
|
6939
7355
|
var ItemLabelGradient = ({ value }) => {
|
|
6940
7356
|
if (value.value.type.value === "linear") {
|
|
6941
|
-
return /* @__PURE__ */
|
|
7357
|
+
return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Linear Gradient", "elementor"));
|
|
6942
7358
|
}
|
|
6943
|
-
return /* @__PURE__ */
|
|
7359
|
+
return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Radial Gradient", "elementor"));
|
|
6944
7360
|
};
|
|
6945
7361
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
6946
7362
|
const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
|
|
6947
|
-
return /* @__PURE__ */
|
|
7363
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React95.createElement(ColorControl, { anchorEl })));
|
|
6948
7364
|
};
|
|
6949
7365
|
var ImageOverlayContent = () => {
|
|
6950
7366
|
const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
|
|
6951
|
-
return /* @__PURE__ */
|
|
7367
|
+
return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React95.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayAttachment, null)));
|
|
6952
7368
|
};
|
|
6953
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
7369
|
+
var StyledUnstableColorIndicator3 = (0, import_ui78.styled)(import_ui78.UnstableColorIndicator)(({ theme }) => ({
|
|
6954
7370
|
height: "1rem",
|
|
6955
7371
|
width: "1rem",
|
|
6956
7372
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -6989,29 +7405,29 @@ var getGradientValue = (value) => {
|
|
|
6989
7405
|
|
|
6990
7406
|
// src/controls/background-control/background-control.tsx
|
|
6991
7407
|
var clipOptions = [
|
|
6992
|
-
{ label: (0,
|
|
6993
|
-
{ label: (0,
|
|
6994
|
-
{ label: (0,
|
|
6995
|
-
{ label: (0,
|
|
7408
|
+
{ label: (0, import_i18n45.__)("Full element", "elementor"), value: "border-box" },
|
|
7409
|
+
{ label: (0, import_i18n45.__)("Padding edges", "elementor"), value: "padding-box" },
|
|
7410
|
+
{ label: (0, import_i18n45.__)("Content edges", "elementor"), value: "content-box" },
|
|
7411
|
+
{ label: (0, import_i18n45.__)("Text", "elementor"), value: "text" }
|
|
6996
7412
|
];
|
|
6997
|
-
var colorLabel = (0,
|
|
6998
|
-
var clipLabel = (0,
|
|
7413
|
+
var colorLabel = (0, import_i18n45.__)("Color", "elementor");
|
|
7414
|
+
var clipLabel = (0, import_i18n45.__)("Clipping", "elementor");
|
|
6999
7415
|
var BackgroundControl = createControl(() => {
|
|
7000
7416
|
const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
|
|
7001
|
-
return /* @__PURE__ */
|
|
7417
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React96.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React96.createElement(BackgroundColorField, null), /* @__PURE__ */ React96.createElement(BackgroundClipField, null));
|
|
7002
7418
|
});
|
|
7003
7419
|
var BackgroundColorField = () => {
|
|
7004
|
-
return /* @__PURE__ */
|
|
7420
|
+
return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
|
|
7005
7421
|
};
|
|
7006
7422
|
var BackgroundClipField = () => {
|
|
7007
|
-
return /* @__PURE__ */
|
|
7423
|
+
return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
|
|
7008
7424
|
};
|
|
7009
7425
|
|
|
7010
7426
|
// src/controls/repeatable-control.tsx
|
|
7011
|
-
var
|
|
7012
|
-
var
|
|
7427
|
+
var React97 = __toESM(require("react"));
|
|
7428
|
+
var import_react57 = require("react");
|
|
7013
7429
|
var import_editor_props43 = require("@elementor/editor-props");
|
|
7014
|
-
var
|
|
7430
|
+
var import_ui80 = require("@elementor/ui");
|
|
7015
7431
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
7016
7432
|
var RepeatableControl = createControl(
|
|
7017
7433
|
({
|
|
@@ -7030,11 +7446,11 @@ var RepeatableControl = createControl(
|
|
|
7030
7446
|
if (!childPropTypeUtil) {
|
|
7031
7447
|
return null;
|
|
7032
7448
|
}
|
|
7033
|
-
const childArrayPropTypeUtil2 = (0,
|
|
7449
|
+
const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
|
|
7034
7450
|
() => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
7035
7451
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
7036
7452
|
);
|
|
7037
|
-
const contextValue = (0,
|
|
7453
|
+
const contextValue = (0, import_react57.useMemo)(
|
|
7038
7454
|
() => ({
|
|
7039
7455
|
...childControlConfig,
|
|
7040
7456
|
placeholder: placeholder || "",
|
|
@@ -7044,14 +7460,14 @@ var RepeatableControl = createControl(
|
|
|
7044
7460
|
);
|
|
7045
7461
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
7046
7462
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
7047
|
-
return /* @__PURE__ */
|
|
7463
|
+
return /* @__PURE__ */ React97.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React97.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React97.createElement(
|
|
7048
7464
|
ControlRepeater,
|
|
7049
7465
|
{
|
|
7050
7466
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
7051
7467
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
7052
7468
|
isItemDisabled: isItemDisabled2
|
|
7053
7469
|
},
|
|
7054
|
-
/* @__PURE__ */
|
|
7470
|
+
/* @__PURE__ */ React97.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React97.createElement(
|
|
7055
7471
|
TooltipAddItemAction,
|
|
7056
7472
|
{
|
|
7057
7473
|
...addItemTooltipProps,
|
|
@@ -7059,22 +7475,22 @@ var RepeatableControl = createControl(
|
|
|
7059
7475
|
ariaLabel: repeaterLabel
|
|
7060
7476
|
}
|
|
7061
7477
|
)),
|
|
7062
|
-
/* @__PURE__ */
|
|
7478
|
+
/* @__PURE__ */ React97.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React97.createElement(
|
|
7063
7479
|
Item,
|
|
7064
7480
|
{
|
|
7065
7481
|
Icon: ItemIcon3,
|
|
7066
7482
|
Label: ItemLabel4,
|
|
7067
|
-
actions: /* @__PURE__ */
|
|
7483
|
+
actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, showDuplicate && /* @__PURE__ */ React97.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React97.createElement(DisableItemAction, null), /* @__PURE__ */ React97.createElement(RemoveItemAction, null))
|
|
7068
7484
|
}
|
|
7069
7485
|
)),
|
|
7070
|
-
/* @__PURE__ */
|
|
7486
|
+
/* @__PURE__ */ React97.createElement(EditItemPopover, null, /* @__PURE__ */ React97.createElement(Content2, null))
|
|
7071
7487
|
)));
|
|
7072
7488
|
}
|
|
7073
7489
|
);
|
|
7074
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
7490
|
+
var ItemIcon3 = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null);
|
|
7075
7491
|
var Content2 = () => {
|
|
7076
7492
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
7077
|
-
return /* @__PURE__ */
|
|
7493
|
+
return /* @__PURE__ */ React97.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(ChildControl, { ...props })));
|
|
7078
7494
|
};
|
|
7079
7495
|
var interpolate = (template, data) => {
|
|
7080
7496
|
if (!data) {
|
|
@@ -7157,7 +7573,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
7157
7573
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
7158
7574
|
const isReadOnly = !!childProps?.readOnly;
|
|
7159
7575
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
7160
|
-
return /* @__PURE__ */
|
|
7576
|
+
return /* @__PURE__ */ React97.createElement(import_ui80.Box, { component: "span", color }, label);
|
|
7161
7577
|
};
|
|
7162
7578
|
var getAllProperties = (pattern) => {
|
|
7163
7579
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -7165,11 +7581,11 @@ var getAllProperties = (pattern) => {
|
|
|
7165
7581
|
};
|
|
7166
7582
|
|
|
7167
7583
|
// src/controls/key-value-control.tsx
|
|
7168
|
-
var
|
|
7169
|
-
var
|
|
7584
|
+
var React98 = __toESM(require("react"));
|
|
7585
|
+
var import_react58 = require("react");
|
|
7170
7586
|
var import_editor_props44 = require("@elementor/editor-props");
|
|
7171
|
-
var
|
|
7172
|
-
var
|
|
7587
|
+
var import_ui81 = require("@elementor/ui");
|
|
7588
|
+
var import_i18n46 = require("@wordpress/i18n");
|
|
7173
7589
|
|
|
7174
7590
|
// src/utils/escape-html-attr.ts
|
|
7175
7591
|
var escapeHtmlAttr = (value) => {
|
|
@@ -7193,23 +7609,23 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
7193
7609
|
};
|
|
7194
7610
|
var KeyValueControl = createControl((props = {}) => {
|
|
7195
7611
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
7196
|
-
const [keyError, setKeyError] = (0,
|
|
7197
|
-
const [valueError, setValueError] = (0,
|
|
7198
|
-
const [sessionState, setSessionState] = (0,
|
|
7612
|
+
const [keyError, setKeyError] = (0, import_react58.useState)("");
|
|
7613
|
+
const [valueError, setValueError] = (0, import_react58.useState)("");
|
|
7614
|
+
const [sessionState, setSessionState] = (0, import_react58.useState)({
|
|
7199
7615
|
key: getInitialFieldValue(value?.key),
|
|
7200
7616
|
value: getInitialFieldValue(value?.value)
|
|
7201
7617
|
});
|
|
7202
|
-
const keyLabel = props.keyName || (0,
|
|
7203
|
-
const valueLabel = props.valueName || (0,
|
|
7618
|
+
const keyLabel = props.keyName || (0, import_i18n46.__)("Key", "elementor");
|
|
7619
|
+
const valueLabel = props.valueName || (0, import_i18n46.__)("Value", "elementor");
|
|
7204
7620
|
const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
|
|
7205
7621
|
keyHelper: void 0,
|
|
7206
7622
|
valueHelper: void 0
|
|
7207
7623
|
};
|
|
7208
|
-
const [keyRegex, valueRegex, errMsg] = (0,
|
|
7624
|
+
const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
|
|
7209
7625
|
() => [
|
|
7210
7626
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
7211
7627
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
7212
|
-
props.validationErrorMessage || (0,
|
|
7628
|
+
props.validationErrorMessage || (0, import_i18n46.__)("Invalid Format", "elementor")
|
|
7213
7629
|
],
|
|
7214
7630
|
[props.regexKey, props.regexValue, props.validationErrorMessage]
|
|
7215
7631
|
);
|
|
@@ -7258,14 +7674,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
7258
7674
|
});
|
|
7259
7675
|
}
|
|
7260
7676
|
};
|
|
7261
|
-
return /* @__PURE__ */
|
|
7677
|
+
return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
|
|
7262
7678
|
TextControl,
|
|
7263
7679
|
{
|
|
7264
7680
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
7265
7681
|
error: !!keyError,
|
|
7266
7682
|
helperText: keyHelper
|
|
7267
7683
|
}
|
|
7268
|
-
)), !!keyError && /* @__PURE__ */
|
|
7684
|
+
)), !!keyError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
|
|
7269
7685
|
TextControl,
|
|
7270
7686
|
{
|
|
7271
7687
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -7273,27 +7689,27 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
7273
7689
|
inputDisabled: !!keyError,
|
|
7274
7690
|
helperText: valueHelper
|
|
7275
7691
|
}
|
|
7276
|
-
)), !!valueError && /* @__PURE__ */
|
|
7692
|
+
)), !!valueError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, valueError))));
|
|
7277
7693
|
});
|
|
7278
7694
|
|
|
7279
7695
|
// src/controls/position-control.tsx
|
|
7280
|
-
var
|
|
7696
|
+
var React99 = __toESM(require("react"));
|
|
7281
7697
|
var import_editor_props45 = require("@elementor/editor-props");
|
|
7282
7698
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
7283
|
-
var
|
|
7284
|
-
var
|
|
7285
|
-
var
|
|
7699
|
+
var import_icons30 = require("@elementor/icons");
|
|
7700
|
+
var import_ui82 = require("@elementor/ui");
|
|
7701
|
+
var import_i18n47 = require("@wordpress/i18n");
|
|
7286
7702
|
var positionOptions = [
|
|
7287
|
-
{ label: (0,
|
|
7288
|
-
{ label: (0,
|
|
7289
|
-
{ label: (0,
|
|
7290
|
-
{ label: (0,
|
|
7291
|
-
{ label: (0,
|
|
7292
|
-
{ label: (0,
|
|
7293
|
-
{ label: (0,
|
|
7294
|
-
{ label: (0,
|
|
7295
|
-
{ label: (0,
|
|
7296
|
-
{ label: (0,
|
|
7703
|
+
{ label: (0, import_i18n47.__)("Center center", "elementor"), value: "center center" },
|
|
7704
|
+
{ label: (0, import_i18n47.__)("Center left", "elementor"), value: "center left" },
|
|
7705
|
+
{ label: (0, import_i18n47.__)("Center right", "elementor"), value: "center right" },
|
|
7706
|
+
{ label: (0, import_i18n47.__)("Top center", "elementor"), value: "top center" },
|
|
7707
|
+
{ label: (0, import_i18n47.__)("Top left", "elementor"), value: "top left" },
|
|
7708
|
+
{ label: (0, import_i18n47.__)("Top right", "elementor"), value: "top right" },
|
|
7709
|
+
{ label: (0, import_i18n47.__)("Bottom center", "elementor"), value: "bottom center" },
|
|
7710
|
+
{ label: (0, import_i18n47.__)("Bottom left", "elementor"), value: "bottom left" },
|
|
7711
|
+
{ label: (0, import_i18n47.__)("Bottom right", "elementor"), value: "bottom right" },
|
|
7712
|
+
{ label: (0, import_i18n47.__)("Custom", "elementor"), value: "custom" }
|
|
7297
7713
|
];
|
|
7298
7714
|
var PositionControl = () => {
|
|
7299
7715
|
const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
|
|
@@ -7308,8 +7724,8 @@ var PositionControl = () => {
|
|
|
7308
7724
|
stringPropContext.setValue(value);
|
|
7309
7725
|
}
|
|
7310
7726
|
};
|
|
7311
|
-
return /* @__PURE__ */
|
|
7312
|
-
|
|
7727
|
+
return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
|
|
7728
|
+
import_ui82.Select,
|
|
7313
7729
|
{
|
|
7314
7730
|
size: "tiny",
|
|
7315
7731
|
displayEmpty: true,
|
|
@@ -7319,29 +7735,29 @@ var PositionControl = () => {
|
|
|
7319
7735
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
7320
7736
|
fullWidth: true
|
|
7321
7737
|
},
|
|
7322
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7323
|
-
)))), isCustom && /* @__PURE__ */
|
|
7738
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React99.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
7739
|
+
)))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
|
|
7324
7740
|
SizeControl,
|
|
7325
7741
|
{
|
|
7326
|
-
startIcon: /* @__PURE__ */
|
|
7742
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
|
|
7327
7743
|
min: -Number.MAX_SAFE_INTEGER
|
|
7328
7744
|
}
|
|
7329
|
-
))), /* @__PURE__ */
|
|
7745
|
+
))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
|
|
7330
7746
|
SizeControl,
|
|
7331
7747
|
{
|
|
7332
|
-
startIcon: /* @__PURE__ */
|
|
7748
|
+
startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
|
|
7333
7749
|
min: -Number.MAX_SAFE_INTEGER
|
|
7334
7750
|
}
|
|
7335
7751
|
)))))));
|
|
7336
7752
|
};
|
|
7337
7753
|
|
|
7338
7754
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
7339
|
-
var
|
|
7340
|
-
var
|
|
7755
|
+
var React112 = __toESM(require("react"));
|
|
7756
|
+
var import_react66 = require("react");
|
|
7341
7757
|
var import_editor_props54 = require("@elementor/editor-props");
|
|
7342
|
-
var
|
|
7343
|
-
var
|
|
7344
|
-
var
|
|
7758
|
+
var import_icons37 = require("@elementor/icons");
|
|
7759
|
+
var import_ui95 = require("@elementor/ui");
|
|
7760
|
+
var import_i18n57 = require("@wordpress/i18n");
|
|
7345
7761
|
|
|
7346
7762
|
// src/controls/transform-control/initial-values.ts
|
|
7347
7763
|
var import_editor_props46 = require("@elementor/editor-props");
|
|
@@ -7390,24 +7806,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
|
|
|
7390
7806
|
});
|
|
7391
7807
|
|
|
7392
7808
|
// src/controls/transform-control/transform-content.tsx
|
|
7393
|
-
var
|
|
7394
|
-
var
|
|
7395
|
-
var
|
|
7809
|
+
var React106 = __toESM(require("react"));
|
|
7810
|
+
var import_ui90 = require("@elementor/ui");
|
|
7811
|
+
var import_i18n52 = require("@wordpress/i18n");
|
|
7396
7812
|
|
|
7397
7813
|
// src/controls/transform-control/functions/move.tsx
|
|
7398
|
-
var
|
|
7399
|
-
var
|
|
7814
|
+
var React101 = __toESM(require("react"));
|
|
7815
|
+
var import_react59 = require("react");
|
|
7400
7816
|
var import_editor_props47 = require("@elementor/editor-props");
|
|
7401
|
-
var
|
|
7402
|
-
var
|
|
7403
|
-
var
|
|
7817
|
+
var import_icons31 = require("@elementor/icons");
|
|
7818
|
+
var import_ui84 = require("@elementor/ui");
|
|
7819
|
+
var import_i18n48 = require("@wordpress/i18n");
|
|
7404
7820
|
|
|
7405
7821
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
7406
|
-
var
|
|
7407
|
-
var
|
|
7822
|
+
var React100 = __toESM(require("react"));
|
|
7823
|
+
var import_ui83 = require("@elementor/ui");
|
|
7408
7824
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
7409
7825
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
7410
|
-
return /* @__PURE__ */
|
|
7826
|
+
return /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
|
|
7411
7827
|
SizeControl,
|
|
7412
7828
|
{
|
|
7413
7829
|
anchorRef,
|
|
@@ -7423,28 +7839,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
|
|
|
7423
7839
|
// src/controls/transform-control/functions/move.tsx
|
|
7424
7840
|
var moveAxisControls = [
|
|
7425
7841
|
{
|
|
7426
|
-
label: (0,
|
|
7842
|
+
label: (0, import_i18n48.__)("Move X", "elementor"),
|
|
7427
7843
|
bind: "x",
|
|
7428
|
-
startIcon: /* @__PURE__ */
|
|
7844
|
+
startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" }),
|
|
7429
7845
|
units: ["px", "%", "em", "rem", "vw"]
|
|
7430
7846
|
},
|
|
7431
7847
|
{
|
|
7432
|
-
label: (0,
|
|
7848
|
+
label: (0, import_i18n48.__)("Move Y", "elementor"),
|
|
7433
7849
|
bind: "y",
|
|
7434
|
-
startIcon: /* @__PURE__ */
|
|
7850
|
+
startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
7435
7851
|
units: ["px", "%", "em", "rem", "vh"]
|
|
7436
7852
|
},
|
|
7437
7853
|
{
|
|
7438
|
-
label: (0,
|
|
7854
|
+
label: (0, import_i18n48.__)("Move Z", "elementor"),
|
|
7439
7855
|
bind: "z",
|
|
7440
|
-
startIcon: /* @__PURE__ */
|
|
7856
|
+
startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
7441
7857
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
7442
7858
|
}
|
|
7443
7859
|
];
|
|
7444
7860
|
var Move = () => {
|
|
7445
7861
|
const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
|
|
7446
|
-
const rowRefs = [(0,
|
|
7447
|
-
return /* @__PURE__ */
|
|
7862
|
+
const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
|
|
7863
|
+
return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
|
|
7448
7864
|
AxisRow,
|
|
7449
7865
|
{
|
|
7450
7866
|
key: control.bind,
|
|
@@ -7457,34 +7873,34 @@ var Move = () => {
|
|
|
7457
7873
|
};
|
|
7458
7874
|
|
|
7459
7875
|
// src/controls/transform-control/functions/rotate.tsx
|
|
7460
|
-
var
|
|
7461
|
-
var
|
|
7876
|
+
var React102 = __toESM(require("react"));
|
|
7877
|
+
var import_react60 = require("react");
|
|
7462
7878
|
var import_editor_props48 = require("@elementor/editor-props");
|
|
7463
|
-
var
|
|
7464
|
-
var
|
|
7465
|
-
var
|
|
7879
|
+
var import_icons32 = require("@elementor/icons");
|
|
7880
|
+
var import_ui85 = require("@elementor/ui");
|
|
7881
|
+
var import_i18n49 = require("@wordpress/i18n");
|
|
7466
7882
|
var rotateAxisControls = [
|
|
7467
7883
|
{
|
|
7468
|
-
label: (0,
|
|
7884
|
+
label: (0, import_i18n49.__)("Rotate X", "elementor"),
|
|
7469
7885
|
bind: "x",
|
|
7470
|
-
startIcon: /* @__PURE__ */
|
|
7886
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny" })
|
|
7471
7887
|
},
|
|
7472
7888
|
{
|
|
7473
|
-
label: (0,
|
|
7889
|
+
label: (0, import_i18n49.__)("Rotate Y", "elementor"),
|
|
7474
7890
|
bind: "y",
|
|
7475
|
-
startIcon: /* @__PURE__ */
|
|
7891
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
7476
7892
|
},
|
|
7477
7893
|
{
|
|
7478
|
-
label: (0,
|
|
7894
|
+
label: (0, import_i18n49.__)("Rotate Z", "elementor"),
|
|
7479
7895
|
bind: "z",
|
|
7480
|
-
startIcon: /* @__PURE__ */
|
|
7896
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons32.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
7481
7897
|
}
|
|
7482
7898
|
];
|
|
7483
7899
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
7484
7900
|
var Rotate = () => {
|
|
7485
7901
|
const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
|
|
7486
|
-
const rowRefs = [(0,
|
|
7487
|
-
return /* @__PURE__ */
|
|
7902
|
+
const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
|
|
7903
|
+
return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
|
|
7488
7904
|
AxisRow,
|
|
7489
7905
|
{
|
|
7490
7906
|
key: control.bind,
|
|
@@ -7496,68 +7912,68 @@ var Rotate = () => {
|
|
|
7496
7912
|
};
|
|
7497
7913
|
|
|
7498
7914
|
// src/controls/transform-control/functions/scale.tsx
|
|
7499
|
-
var
|
|
7500
|
-
var
|
|
7915
|
+
var React104 = __toESM(require("react"));
|
|
7916
|
+
var import_react61 = require("react");
|
|
7501
7917
|
var import_editor_props49 = require("@elementor/editor-props");
|
|
7502
|
-
var
|
|
7503
|
-
var
|
|
7504
|
-
var
|
|
7918
|
+
var import_icons33 = require("@elementor/icons");
|
|
7919
|
+
var import_ui87 = require("@elementor/ui");
|
|
7920
|
+
var import_i18n50 = require("@wordpress/i18n");
|
|
7505
7921
|
|
|
7506
7922
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
7507
|
-
var
|
|
7508
|
-
var
|
|
7923
|
+
var React103 = __toESM(require("react"));
|
|
7924
|
+
var import_ui86 = require("@elementor/ui");
|
|
7509
7925
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
7510
|
-
return /* @__PURE__ */
|
|
7926
|
+
return /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
7511
7927
|
};
|
|
7512
7928
|
|
|
7513
7929
|
// src/controls/transform-control/functions/scale.tsx
|
|
7514
7930
|
var scaleAxisControls = [
|
|
7515
7931
|
{
|
|
7516
|
-
label: (0,
|
|
7932
|
+
label: (0, import_i18n50.__)("Scale X", "elementor"),
|
|
7517
7933
|
bind: "x",
|
|
7518
|
-
startIcon: /* @__PURE__ */
|
|
7934
|
+
startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
|
|
7519
7935
|
},
|
|
7520
7936
|
{
|
|
7521
|
-
label: (0,
|
|
7937
|
+
label: (0, import_i18n50.__)("Scale Y", "elementor"),
|
|
7522
7938
|
bind: "y",
|
|
7523
|
-
startIcon: /* @__PURE__ */
|
|
7939
|
+
startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
7524
7940
|
},
|
|
7525
7941
|
{
|
|
7526
|
-
label: (0,
|
|
7942
|
+
label: (0, import_i18n50.__)("Scale Z", "elementor"),
|
|
7527
7943
|
bind: "z",
|
|
7528
|
-
startIcon: /* @__PURE__ */
|
|
7944
|
+
startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
7529
7945
|
}
|
|
7530
7946
|
];
|
|
7531
7947
|
var Scale = () => {
|
|
7532
7948
|
const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
|
|
7533
|
-
const rowRefs = [(0,
|
|
7534
|
-
return /* @__PURE__ */
|
|
7949
|
+
const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
|
|
7950
|
+
return /* @__PURE__ */ React104.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
7535
7951
|
};
|
|
7536
7952
|
|
|
7537
7953
|
// src/controls/transform-control/functions/skew.tsx
|
|
7538
|
-
var
|
|
7539
|
-
var
|
|
7954
|
+
var React105 = __toESM(require("react"));
|
|
7955
|
+
var import_react62 = require("react");
|
|
7540
7956
|
var import_editor_props50 = require("@elementor/editor-props");
|
|
7541
|
-
var
|
|
7542
|
-
var
|
|
7543
|
-
var
|
|
7957
|
+
var import_icons34 = require("@elementor/icons");
|
|
7958
|
+
var import_ui88 = require("@elementor/ui");
|
|
7959
|
+
var import_i18n51 = require("@wordpress/i18n");
|
|
7544
7960
|
var skewAxisControls = [
|
|
7545
7961
|
{
|
|
7546
|
-
label: (0,
|
|
7962
|
+
label: (0, import_i18n51.__)("Skew X", "elementor"),
|
|
7547
7963
|
bind: "x",
|
|
7548
|
-
startIcon: /* @__PURE__ */
|
|
7964
|
+
startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowRightIcon, { fontSize: "tiny" })
|
|
7549
7965
|
},
|
|
7550
7966
|
{
|
|
7551
|
-
label: (0,
|
|
7967
|
+
label: (0, import_i18n51.__)("Skew Y", "elementor"),
|
|
7552
7968
|
bind: "y",
|
|
7553
|
-
startIcon: /* @__PURE__ */
|
|
7969
|
+
startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
7554
7970
|
}
|
|
7555
7971
|
];
|
|
7556
7972
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
7557
7973
|
var Skew = () => {
|
|
7558
7974
|
const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
7559
|
-
const rowRefs = [(0,
|
|
7560
|
-
return /* @__PURE__ */
|
|
7975
|
+
const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
|
|
7976
|
+
return /* @__PURE__ */ React105.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
|
|
7561
7977
|
AxisRow,
|
|
7562
7978
|
{
|
|
7563
7979
|
key: control.bind,
|
|
@@ -7569,9 +7985,9 @@ var Skew = () => {
|
|
|
7569
7985
|
};
|
|
7570
7986
|
|
|
7571
7987
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
7572
|
-
var
|
|
7988
|
+
var import_react63 = require("react");
|
|
7573
7989
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
7574
|
-
var
|
|
7990
|
+
var import_ui89 = require("@elementor/ui");
|
|
7575
7991
|
var useTransformTabsHistory = ({
|
|
7576
7992
|
move: initialMove,
|
|
7577
7993
|
scale: initialScale,
|
|
@@ -7595,8 +8011,8 @@ var useTransformTabsHistory = ({
|
|
|
7595
8011
|
return TransformFunctionKeys.move;
|
|
7596
8012
|
}
|
|
7597
8013
|
};
|
|
7598
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
7599
|
-
const valuesHistory = (0,
|
|
8014
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui89.useTabs)(getCurrentTransformType());
|
|
8015
|
+
const valuesHistory = (0, import_react63.useRef)({
|
|
7600
8016
|
move: initialMove,
|
|
7601
8017
|
scale: initialScale,
|
|
7602
8018
|
rotate: initialRotate,
|
|
@@ -7657,8 +8073,8 @@ var TransformContent = () => {
|
|
|
7657
8073
|
rotate: initialRotateValue.value,
|
|
7658
8074
|
skew: initialSkewValue.value
|
|
7659
8075
|
});
|
|
7660
|
-
return /* @__PURE__ */
|
|
7661
|
-
|
|
8076
|
+
return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
|
|
8077
|
+
import_ui90.Tabs,
|
|
7662
8078
|
{
|
|
7663
8079
|
size: "small",
|
|
7664
8080
|
variant: "fullWidth",
|
|
@@ -7668,37 +8084,37 @@ var TransformContent = () => {
|
|
|
7668
8084
|
}
|
|
7669
8085
|
},
|
|
7670
8086
|
...getTabsProps(),
|
|
7671
|
-
"aria-label": (0,
|
|
8087
|
+
"aria-label": (0, import_i18n52.__)("Transform", "elementor")
|
|
7672
8088
|
},
|
|
7673
|
-
/* @__PURE__ */
|
|
7674
|
-
/* @__PURE__ */
|
|
7675
|
-
/* @__PURE__ */
|
|
7676
|
-
/* @__PURE__ */
|
|
7677
|
-
)), /* @__PURE__ */
|
|
8089
|
+
/* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
8090
|
+
/* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
8091
|
+
/* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
8092
|
+
/* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
8093
|
+
)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
|
|
7678
8094
|
};
|
|
7679
8095
|
|
|
7680
8096
|
// src/controls/transform-control/transform-icon.tsx
|
|
7681
|
-
var
|
|
7682
|
-
var
|
|
8097
|
+
var React107 = __toESM(require("react"));
|
|
8098
|
+
var import_icons35 = require("@elementor/icons");
|
|
7683
8099
|
var TransformIcon = ({ value }) => {
|
|
7684
8100
|
switch (value.$$type) {
|
|
7685
8101
|
case TransformFunctionKeys.move:
|
|
7686
|
-
return /* @__PURE__ */
|
|
8102
|
+
return /* @__PURE__ */ React107.createElement(import_icons35.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
7687
8103
|
case TransformFunctionKeys.scale:
|
|
7688
|
-
return /* @__PURE__ */
|
|
8104
|
+
return /* @__PURE__ */ React107.createElement(import_icons35.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
7689
8105
|
case TransformFunctionKeys.rotate:
|
|
7690
|
-
return /* @__PURE__ */
|
|
8106
|
+
return /* @__PURE__ */ React107.createElement(import_icons35.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
7691
8107
|
case TransformFunctionKeys.skew:
|
|
7692
|
-
return /* @__PURE__ */
|
|
8108
|
+
return /* @__PURE__ */ React107.createElement(import_icons35.SkewXIcon, { fontSize: "tiny" });
|
|
7693
8109
|
default:
|
|
7694
8110
|
return null;
|
|
7695
8111
|
}
|
|
7696
8112
|
};
|
|
7697
8113
|
|
|
7698
8114
|
// src/controls/transform-control/transform-label.tsx
|
|
7699
|
-
var
|
|
7700
|
-
var
|
|
7701
|
-
var
|
|
8115
|
+
var React108 = __toESM(require("react"));
|
|
8116
|
+
var import_ui91 = require("@elementor/ui");
|
|
8117
|
+
var import_i18n53 = require("@wordpress/i18n");
|
|
7702
8118
|
var orderedAxis = ["x", "y", "z"];
|
|
7703
8119
|
var formatLabel = (value, functionType) => {
|
|
7704
8120
|
return orderedAxis.map((axisKey) => {
|
|
@@ -7716,98 +8132,98 @@ var TransformLabel = (props) => {
|
|
|
7716
8132
|
const { $$type, value } = props.value;
|
|
7717
8133
|
switch ($$type) {
|
|
7718
8134
|
case TransformFunctionKeys.move:
|
|
7719
|
-
return /* @__PURE__ */
|
|
8135
|
+
return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
7720
8136
|
case TransformFunctionKeys.scale:
|
|
7721
|
-
return /* @__PURE__ */
|
|
8137
|
+
return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
7722
8138
|
case TransformFunctionKeys.rotate:
|
|
7723
|
-
return /* @__PURE__ */
|
|
8139
|
+
return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
7724
8140
|
case TransformFunctionKeys.skew:
|
|
7725
|
-
return /* @__PURE__ */
|
|
8141
|
+
return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
7726
8142
|
default:
|
|
7727
8143
|
return "";
|
|
7728
8144
|
}
|
|
7729
8145
|
};
|
|
7730
8146
|
var Label2 = ({ label, value }) => {
|
|
7731
|
-
return /* @__PURE__ */
|
|
8147
|
+
return /* @__PURE__ */ React108.createElement(import_ui91.Box, { component: "span" }, label, ": ", value);
|
|
7732
8148
|
};
|
|
7733
8149
|
|
|
7734
8150
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
7735
|
-
var
|
|
8151
|
+
var React111 = __toESM(require("react"));
|
|
7736
8152
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
7737
|
-
var
|
|
7738
|
-
var
|
|
7739
|
-
var
|
|
8153
|
+
var import_icons36 = require("@elementor/icons");
|
|
8154
|
+
var import_ui94 = require("@elementor/ui");
|
|
8155
|
+
var import_i18n56 = require("@wordpress/i18n");
|
|
7740
8156
|
|
|
7741
8157
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
7742
|
-
var
|
|
7743
|
-
var
|
|
8158
|
+
var React109 = __toESM(require("react"));
|
|
8159
|
+
var import_react64 = require("react");
|
|
7744
8160
|
var import_editor_props52 = require("@elementor/editor-props");
|
|
7745
|
-
var
|
|
7746
|
-
var
|
|
8161
|
+
var import_ui92 = require("@elementor/ui");
|
|
8162
|
+
var import_i18n54 = require("@wordpress/i18n");
|
|
7747
8163
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
7748
8164
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
7749
|
-
label: (0,
|
|
8165
|
+
label: (0, import_i18n54.__)("Perspective", "elementor"),
|
|
7750
8166
|
bind: "perspective",
|
|
7751
8167
|
units: ["px", "em", "rem", "vw", "vh"]
|
|
7752
8168
|
};
|
|
7753
8169
|
var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
7754
8170
|
{
|
|
7755
|
-
label: (0,
|
|
8171
|
+
label: (0, import_i18n54.__)("Origin X", "elementor"),
|
|
7756
8172
|
bind: "x",
|
|
7757
8173
|
units: ORIGIN_UNITS
|
|
7758
8174
|
},
|
|
7759
8175
|
{
|
|
7760
|
-
label: (0,
|
|
8176
|
+
label: (0, import_i18n54.__)("Origin Y", "elementor"),
|
|
7761
8177
|
bind: "y",
|
|
7762
8178
|
units: ORIGIN_UNITS
|
|
7763
8179
|
}
|
|
7764
8180
|
];
|
|
7765
8181
|
var ChildrenPerspectiveControl = () => {
|
|
7766
|
-
return /* @__PURE__ */
|
|
8182
|
+
return /* @__PURE__ */ React109.createElement(import_ui92.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
|
|
7767
8183
|
};
|
|
7768
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
7769
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
8184
|
+
var PerspectiveControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React109.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
8185
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React109.createElement(PerspectiveOriginControlProvider, null));
|
|
7770
8186
|
var PerspectiveOriginControlProvider = () => {
|
|
7771
8187
|
const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
|
|
7772
|
-
return /* @__PURE__ */
|
|
8188
|
+
return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
|
|
7773
8189
|
};
|
|
7774
8190
|
var ControlFields = ({ control }) => {
|
|
7775
|
-
const rowRef = (0,
|
|
7776
|
-
return /* @__PURE__ */
|
|
8191
|
+
const rowRef = (0, import_react64.useRef)(null);
|
|
8192
|
+
return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
7777
8193
|
};
|
|
7778
8194
|
|
|
7779
8195
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
7780
|
-
var
|
|
7781
|
-
var
|
|
8196
|
+
var React110 = __toESM(require("react"));
|
|
8197
|
+
var import_react65 = require("react");
|
|
7782
8198
|
var import_editor_props53 = require("@elementor/editor-props");
|
|
7783
|
-
var
|
|
7784
|
-
var
|
|
8199
|
+
var import_ui93 = require("@elementor/ui");
|
|
8200
|
+
var import_i18n55 = require("@wordpress/i18n");
|
|
7785
8201
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
7786
8202
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
7787
8203
|
var TRANSFORM_ORIGIN_FIELDS = [
|
|
7788
8204
|
{
|
|
7789
|
-
label: (0,
|
|
8205
|
+
label: (0, import_i18n55.__)("Origin X", "elementor"),
|
|
7790
8206
|
bind: "x",
|
|
7791
8207
|
units: TRANSFORM_ORIGIN_UNITS
|
|
7792
8208
|
},
|
|
7793
8209
|
{
|
|
7794
|
-
label: (0,
|
|
8210
|
+
label: (0, import_i18n55.__)("Origin Y", "elementor"),
|
|
7795
8211
|
bind: "y",
|
|
7796
8212
|
units: TRANSFORM_ORIGIN_UNITS
|
|
7797
8213
|
},
|
|
7798
8214
|
{
|
|
7799
|
-
label: (0,
|
|
8215
|
+
label: (0, import_i18n55.__)("Origin Z", "elementor"),
|
|
7800
8216
|
bind: "z",
|
|
7801
8217
|
units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
|
|
7802
8218
|
}
|
|
7803
8219
|
];
|
|
7804
8220
|
var TransformOriginControl = () => {
|
|
7805
|
-
return /* @__PURE__ */
|
|
8221
|
+
return /* @__PURE__ */ React110.createElement(import_ui93.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
|
|
7806
8222
|
};
|
|
7807
8223
|
var ControlFields2 = ({ control }) => {
|
|
7808
8224
|
const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
|
|
7809
|
-
const rowRef = (0,
|
|
7810
|
-
return /* @__PURE__ */
|
|
8225
|
+
const rowRef = (0, import_react65.useRef)(null);
|
|
8226
|
+
return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
7811
8227
|
};
|
|
7812
8228
|
|
|
7813
8229
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -7817,12 +8233,12 @@ var TransformSettingsControl = ({
|
|
|
7817
8233
|
anchorRef,
|
|
7818
8234
|
showChildrenPerspective
|
|
7819
8235
|
}) => {
|
|
7820
|
-
const popupProps = (0,
|
|
8236
|
+
const popupProps = (0, import_ui94.bindPopover)({
|
|
7821
8237
|
...popupState,
|
|
7822
8238
|
anchorEl: anchorRef.current ?? void 0
|
|
7823
8239
|
});
|
|
7824
|
-
return /* @__PURE__ */
|
|
7825
|
-
|
|
8240
|
+
return /* @__PURE__ */ React111.createElement(
|
|
8241
|
+
import_ui94.Popover,
|
|
7826
8242
|
{
|
|
7827
8243
|
disablePortal: true,
|
|
7828
8244
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -7836,16 +8252,16 @@ var TransformSettingsControl = ({
|
|
|
7836
8252
|
},
|
|
7837
8253
|
...popupProps
|
|
7838
8254
|
},
|
|
7839
|
-
/* @__PURE__ */
|
|
8255
|
+
/* @__PURE__ */ React111.createElement(
|
|
7840
8256
|
import_editor_ui14.PopoverHeader,
|
|
7841
8257
|
{
|
|
7842
|
-
title: (0,
|
|
8258
|
+
title: (0, import_i18n56.__)("Transform settings", "elementor"),
|
|
7843
8259
|
onClose: popupState.close,
|
|
7844
|
-
icon: /* @__PURE__ */
|
|
8260
|
+
icon: /* @__PURE__ */ React111.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
|
|
7845
8261
|
}
|
|
7846
8262
|
),
|
|
7847
|
-
/* @__PURE__ */
|
|
7848
|
-
/* @__PURE__ */
|
|
8263
|
+
/* @__PURE__ */ React111.createElement(import_ui94.Divider, null),
|
|
8264
|
+
/* @__PURE__ */ React111.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React111.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(import_ui94.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(import_ui94.Divider, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
|
|
7849
8265
|
);
|
|
7850
8266
|
};
|
|
7851
8267
|
|
|
@@ -7854,27 +8270,27 @@ var SIZE11 = "tiny";
|
|
|
7854
8270
|
var TransformRepeaterControl = createControl(
|
|
7855
8271
|
({ showChildrenPerspective }) => {
|
|
7856
8272
|
const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
|
|
7857
|
-
const headerRef = (0,
|
|
7858
|
-
const popupState = (0,
|
|
7859
|
-
return /* @__PURE__ */
|
|
8273
|
+
const headerRef = (0, import_react66.useRef)(null);
|
|
8274
|
+
const popupState = (0, import_ui95.usePopupState)({ variant: "popover" });
|
|
8275
|
+
return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
|
|
7860
8276
|
TransformSettingsControl,
|
|
7861
8277
|
{
|
|
7862
8278
|
popupState,
|
|
7863
8279
|
anchorRef: headerRef,
|
|
7864
8280
|
showChildrenPerspective
|
|
7865
8281
|
}
|
|
7866
|
-
), /* @__PURE__ */
|
|
8282
|
+
), /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React112.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
7867
8283
|
}
|
|
7868
8284
|
);
|
|
7869
|
-
var ToolTip = /* @__PURE__ */
|
|
7870
|
-
|
|
8285
|
+
var ToolTip = /* @__PURE__ */ React112.createElement(
|
|
8286
|
+
import_ui95.Box,
|
|
7871
8287
|
{
|
|
7872
8288
|
component: "span",
|
|
7873
8289
|
"aria-label": void 0,
|
|
7874
8290
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
7875
8291
|
},
|
|
7876
|
-
/* @__PURE__ */
|
|
7877
|
-
/* @__PURE__ */
|
|
8292
|
+
/* @__PURE__ */ React112.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
8293
|
+
/* @__PURE__ */ React112.createElement(import_ui95.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
7878
8294
|
);
|
|
7879
8295
|
var Repeater2 = ({
|
|
7880
8296
|
headerRef,
|
|
@@ -7888,21 +8304,21 @@ var Repeater2 = ({
|
|
|
7888
8304
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
7889
8305
|
};
|
|
7890
8306
|
const shouldDisableAddItem = !getInitialValue2();
|
|
7891
|
-
return /* @__PURE__ */
|
|
8307
|
+
return /* @__PURE__ */ React112.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React112.createElement(
|
|
7892
8308
|
ControlRepeater,
|
|
7893
8309
|
{
|
|
7894
8310
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
7895
8311
|
propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
|
|
7896
8312
|
},
|
|
7897
|
-
/* @__PURE__ */
|
|
8313
|
+
/* @__PURE__ */ React112.createElement(
|
|
7898
8314
|
RepeaterHeader,
|
|
7899
8315
|
{
|
|
7900
|
-
label: (0,
|
|
7901
|
-
adornment: () => /* @__PURE__ */
|
|
8316
|
+
label: (0, import_i18n57.__)("Transform", "elementor"),
|
|
8317
|
+
adornment: () => /* @__PURE__ */ React112.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
7902
8318
|
ref: headerRef
|
|
7903
8319
|
},
|
|
7904
|
-
/* @__PURE__ */
|
|
7905
|
-
/* @__PURE__ */
|
|
8320
|
+
/* @__PURE__ */ React112.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
8321
|
+
/* @__PURE__ */ React112.createElement(
|
|
7906
8322
|
TooltipAddItemAction,
|
|
7907
8323
|
{
|
|
7908
8324
|
disabled: shouldDisableAddItem,
|
|
@@ -7912,15 +8328,15 @@ var Repeater2 = ({
|
|
|
7912
8328
|
}
|
|
7913
8329
|
)
|
|
7914
8330
|
),
|
|
7915
|
-
/* @__PURE__ */
|
|
8331
|
+
/* @__PURE__ */ React112.createElement(ItemsContainer, null, /* @__PURE__ */ React112.createElement(
|
|
7916
8332
|
Item,
|
|
7917
8333
|
{
|
|
7918
8334
|
Icon: TransformIcon,
|
|
7919
8335
|
Label: TransformLabel,
|
|
7920
|
-
actions: /* @__PURE__ */
|
|
8336
|
+
actions: /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(DisableItemAction, null), /* @__PURE__ */ React112.createElement(RemoveItemAction, null))
|
|
7921
8337
|
}
|
|
7922
8338
|
)),
|
|
7923
|
-
/* @__PURE__ */
|
|
8339
|
+
/* @__PURE__ */ React112.createElement(EditItemPopover, null, /* @__PURE__ */ React112.createElement(TransformContent, null))
|
|
7924
8340
|
));
|
|
7925
8341
|
};
|
|
7926
8342
|
var TransformBasePopoverTrigger = ({
|
|
@@ -7928,30 +8344,30 @@ var TransformBasePopoverTrigger = ({
|
|
|
7928
8344
|
repeaterBindKey
|
|
7929
8345
|
}) => {
|
|
7930
8346
|
const { bind } = useBoundProp();
|
|
7931
|
-
const titleLabel = (0,
|
|
7932
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
8347
|
+
const titleLabel = (0, import_i18n57.__)("Transform settings", "elementor");
|
|
8348
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(import_ui95.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(import_ui95.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui95.bindTrigger)(popupState) }, /* @__PURE__ */ React112.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
|
|
7933
8349
|
};
|
|
7934
8350
|
|
|
7935
8351
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
7936
|
-
var
|
|
7937
|
-
var
|
|
8352
|
+
var React115 = __toESM(require("react"));
|
|
8353
|
+
var import_react69 = require("react");
|
|
7938
8354
|
var import_editor_props57 = require("@elementor/editor-props");
|
|
7939
|
-
var
|
|
7940
|
-
var
|
|
8355
|
+
var import_icons39 = require("@elementor/icons");
|
|
8356
|
+
var import_ui98 = require("@elementor/ui");
|
|
7941
8357
|
var import_utils8 = require("@elementor/utils");
|
|
7942
|
-
var
|
|
8358
|
+
var import_i18n60 = require("@wordpress/i18n");
|
|
7943
8359
|
|
|
7944
8360
|
// src/controls/selection-size-control.tsx
|
|
7945
|
-
var
|
|
7946
|
-
var
|
|
8361
|
+
var React113 = __toESM(require("react"));
|
|
8362
|
+
var import_react67 = require("react");
|
|
7947
8363
|
var import_editor_props55 = require("@elementor/editor-props");
|
|
7948
|
-
var
|
|
8364
|
+
var import_ui96 = require("@elementor/ui");
|
|
7949
8365
|
var SelectionSizeControl = createControl(
|
|
7950
8366
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
7951
8367
|
const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
|
|
7952
|
-
const rowRef = (0,
|
|
8368
|
+
const rowRef = (0, import_react67.useRef)(null);
|
|
7953
8369
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
7954
|
-
const currentSizeConfig = (0,
|
|
8370
|
+
const currentSizeConfig = (0, import_react67.useMemo)(() => {
|
|
7955
8371
|
switch (value.selection.$$type) {
|
|
7956
8372
|
case "key-value":
|
|
7957
8373
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -7962,7 +8378,7 @@ var SelectionSizeControl = createControl(
|
|
|
7962
8378
|
}
|
|
7963
8379
|
}, [value, sizeConfigMap]);
|
|
7964
8380
|
const SelectionComponent = selectionConfig.component;
|
|
7965
|
-
return /* @__PURE__ */
|
|
8381
|
+
return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React113.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
|
|
7966
8382
|
SizeControl,
|
|
7967
8383
|
{
|
|
7968
8384
|
anchorRef: rowRef,
|
|
@@ -7977,12 +8393,12 @@ var SelectionSizeControl = createControl(
|
|
|
7977
8393
|
|
|
7978
8394
|
// src/controls/transition-control/data.ts
|
|
7979
8395
|
var import_utils7 = require("@elementor/utils");
|
|
7980
|
-
var
|
|
8396
|
+
var import_i18n58 = require("@wordpress/i18n");
|
|
7981
8397
|
var initialTransitionValue = {
|
|
7982
8398
|
selection: {
|
|
7983
8399
|
$$type: "key-value",
|
|
7984
8400
|
value: {
|
|
7985
|
-
key: { value: (0,
|
|
8401
|
+
key: { value: (0, import_i18n58.__)("All properties", "elementor"), $$type: "string" },
|
|
7986
8402
|
value: { value: "all", $$type: "string" }
|
|
7987
8403
|
}
|
|
7988
8404
|
},
|
|
@@ -8006,128 +8422,128 @@ var createTransitionPropertiesList = () => {
|
|
|
8006
8422
|
const isSiteRtl = getIsSiteRtl();
|
|
8007
8423
|
const baseProperties = [
|
|
8008
8424
|
{
|
|
8009
|
-
label: (0,
|
|
8425
|
+
label: (0, import_i18n58.__)("Default", "elementor"),
|
|
8010
8426
|
type: "category",
|
|
8011
|
-
properties: [{ label: (0,
|
|
8427
|
+
properties: [{ label: (0, import_i18n58.__)("All properties", "elementor"), value: "all" }]
|
|
8012
8428
|
},
|
|
8013
8429
|
{
|
|
8014
|
-
label: (0,
|
|
8430
|
+
label: (0, import_i18n58.__)("Margin", "elementor"),
|
|
8015
8431
|
type: "category",
|
|
8016
8432
|
properties: [
|
|
8017
|
-
{ label: (0,
|
|
8018
|
-
{ label: (0,
|
|
8433
|
+
{ label: (0, import_i18n58.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
|
|
8434
|
+
{ label: (0, import_i18n58.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
|
|
8019
8435
|
{
|
|
8020
|
-
label: isSiteRtl ? (0,
|
|
8436
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Margin right", "elementor") : (0, import_i18n58.__)("Margin left", "elementor"),
|
|
8021
8437
|
value: "margin-inline-start",
|
|
8022
8438
|
isDisabled: true
|
|
8023
8439
|
},
|
|
8024
8440
|
{
|
|
8025
|
-
label: isSiteRtl ? (0,
|
|
8441
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Margin left", "elementor") : (0, import_i18n58.__)("Margin right", "elementor"),
|
|
8026
8442
|
value: "margin-inline-end",
|
|
8027
8443
|
isDisabled: true
|
|
8028
8444
|
},
|
|
8029
|
-
{ label: (0,
|
|
8445
|
+
{ label: (0, import_i18n58.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
|
|
8030
8446
|
]
|
|
8031
8447
|
},
|
|
8032
8448
|
{
|
|
8033
|
-
label: (0,
|
|
8449
|
+
label: (0, import_i18n58.__)("Padding", "elementor"),
|
|
8034
8450
|
type: "category",
|
|
8035
8451
|
properties: [
|
|
8036
|
-
{ label: (0,
|
|
8037
|
-
{ label: (0,
|
|
8452
|
+
{ label: (0, import_i18n58.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
|
|
8453
|
+
{ label: (0, import_i18n58.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
|
|
8038
8454
|
{
|
|
8039
|
-
label: isSiteRtl ? (0,
|
|
8455
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Padding right", "elementor") : (0, import_i18n58.__)("Padding left", "elementor"),
|
|
8040
8456
|
value: "padding-inline-start",
|
|
8041
8457
|
isDisabled: true
|
|
8042
8458
|
},
|
|
8043
8459
|
{
|
|
8044
|
-
label: isSiteRtl ? (0,
|
|
8460
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Padding left", "elementor") : (0, import_i18n58.__)("Padding right", "elementor"),
|
|
8045
8461
|
value: "padding-inline-end",
|
|
8046
8462
|
isDisabled: true
|
|
8047
8463
|
},
|
|
8048
|
-
{ label: (0,
|
|
8464
|
+
{ label: (0, import_i18n58.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
|
|
8049
8465
|
]
|
|
8050
8466
|
},
|
|
8051
8467
|
{
|
|
8052
|
-
label: (0,
|
|
8468
|
+
label: (0, import_i18n58.__)("Flex", "elementor"),
|
|
8053
8469
|
type: "category",
|
|
8054
8470
|
properties: [
|
|
8055
|
-
{ label: (0,
|
|
8056
|
-
{ label: (0,
|
|
8057
|
-
{ label: (0,
|
|
8058
|
-
{ label: (0,
|
|
8471
|
+
{ label: (0, import_i18n58.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
|
|
8472
|
+
{ label: (0, import_i18n58.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
|
|
8473
|
+
{ label: (0, import_i18n58.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
|
|
8474
|
+
{ label: (0, import_i18n58.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
|
|
8059
8475
|
]
|
|
8060
8476
|
},
|
|
8061
8477
|
{
|
|
8062
|
-
label: (0,
|
|
8478
|
+
label: (0, import_i18n58.__)("Size", "elementor"),
|
|
8063
8479
|
type: "category",
|
|
8064
8480
|
properties: [
|
|
8065
|
-
{ label: (0,
|
|
8066
|
-
{ label: (0,
|
|
8067
|
-
{ label: (0,
|
|
8068
|
-
{ label: (0,
|
|
8069
|
-
{ label: (0,
|
|
8070
|
-
{ label: (0,
|
|
8481
|
+
{ label: (0, import_i18n58.__)("Width", "elementor"), value: "width", isDisabled: true },
|
|
8482
|
+
{ label: (0, import_i18n58.__)("Height", "elementor"), value: "height", isDisabled: true },
|
|
8483
|
+
{ label: (0, import_i18n58.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
|
|
8484
|
+
{ label: (0, import_i18n58.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
|
|
8485
|
+
{ label: (0, import_i18n58.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
|
|
8486
|
+
{ label: (0, import_i18n58.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
|
|
8071
8487
|
]
|
|
8072
8488
|
},
|
|
8073
8489
|
{
|
|
8074
|
-
label: (0,
|
|
8490
|
+
label: (0, import_i18n58.__)("Position", "elementor"),
|
|
8075
8491
|
type: "category",
|
|
8076
8492
|
properties: [
|
|
8077
|
-
{ label: (0,
|
|
8493
|
+
{ label: (0, import_i18n58.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
|
|
8078
8494
|
{
|
|
8079
|
-
label: isSiteRtl ? (0,
|
|
8495
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Right", "elementor") : (0, import_i18n58.__)("Left", "elementor"),
|
|
8080
8496
|
value: "inset-inline-start",
|
|
8081
8497
|
isDisabled: true
|
|
8082
8498
|
},
|
|
8083
8499
|
{
|
|
8084
|
-
label: isSiteRtl ? (0,
|
|
8500
|
+
label: isSiteRtl ? (0, import_i18n58.__)("Left", "elementor") : (0, import_i18n58.__)("Right", "elementor"),
|
|
8085
8501
|
value: "inset-inline-end",
|
|
8086
8502
|
isDisabled: true
|
|
8087
8503
|
},
|
|
8088
|
-
{ label: (0,
|
|
8089
|
-
{ label: (0,
|
|
8504
|
+
{ label: (0, import_i18n58.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
|
|
8505
|
+
{ label: (0, import_i18n58.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
|
|
8090
8506
|
]
|
|
8091
8507
|
},
|
|
8092
8508
|
{
|
|
8093
|
-
label: (0,
|
|
8509
|
+
label: (0, import_i18n58.__)("Typography", "elementor"),
|
|
8094
8510
|
type: "category",
|
|
8095
8511
|
properties: [
|
|
8096
|
-
{ label: (0,
|
|
8097
|
-
{ label: (0,
|
|
8098
|
-
{ label: (0,
|
|
8099
|
-
{ label: (0,
|
|
8100
|
-
{ label: (0,
|
|
8101
|
-
{ label: (0,
|
|
8102
|
-
{ label: (0,
|
|
8512
|
+
{ label: (0, import_i18n58.__)("Font color", "elementor"), value: "color", isDisabled: true },
|
|
8513
|
+
{ label: (0, import_i18n58.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
|
|
8514
|
+
{ label: (0, import_i18n58.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
|
|
8515
|
+
{ label: (0, import_i18n58.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
|
|
8516
|
+
{ label: (0, import_i18n58.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
|
|
8517
|
+
{ label: (0, import_i18n58.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
|
|
8518
|
+
{ label: (0, import_i18n58.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
|
|
8103
8519
|
]
|
|
8104
8520
|
},
|
|
8105
8521
|
{
|
|
8106
|
-
label: (0,
|
|
8522
|
+
label: (0, import_i18n58.__)("Background", "elementor"),
|
|
8107
8523
|
type: "category",
|
|
8108
8524
|
properties: [
|
|
8109
|
-
{ label: (0,
|
|
8110
|
-
{ label: (0,
|
|
8111
|
-
{ label: (0,
|
|
8525
|
+
{ label: (0, import_i18n58.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
|
|
8526
|
+
{ label: (0, import_i18n58.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
|
|
8527
|
+
{ label: (0, import_i18n58.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
|
|
8112
8528
|
]
|
|
8113
8529
|
},
|
|
8114
8530
|
{
|
|
8115
|
-
label: (0,
|
|
8531
|
+
label: (0, import_i18n58.__)("Border", "elementor"),
|
|
8116
8532
|
type: "category",
|
|
8117
8533
|
properties: [
|
|
8118
|
-
{ label: (0,
|
|
8119
|
-
{ label: (0,
|
|
8120
|
-
{ label: (0,
|
|
8121
|
-
{ label: (0,
|
|
8534
|
+
{ label: (0, import_i18n58.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
|
|
8535
|
+
{ label: (0, import_i18n58.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
|
|
8536
|
+
{ label: (0, import_i18n58.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
|
|
8537
|
+
{ label: (0, import_i18n58.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
|
|
8122
8538
|
]
|
|
8123
8539
|
},
|
|
8124
8540
|
{
|
|
8125
|
-
label: (0,
|
|
8541
|
+
label: (0, import_i18n58.__)("Effects", "elementor"),
|
|
8126
8542
|
type: "category",
|
|
8127
8543
|
properties: [
|
|
8128
|
-
{ label: (0,
|
|
8129
|
-
{ label: (0,
|
|
8130
|
-
{ label: (0,
|
|
8544
|
+
{ label: (0, import_i18n58.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
|
|
8545
|
+
{ label: (0, import_i18n58.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
|
|
8546
|
+
{ label: (0, import_i18n58.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
|
|
8131
8547
|
]
|
|
8132
8548
|
}
|
|
8133
8549
|
];
|
|
@@ -8163,13 +8579,13 @@ function subscribeToTransitionEvent() {
|
|
|
8163
8579
|
}
|
|
8164
8580
|
|
|
8165
8581
|
// src/controls/transition-control/transition-selector.tsx
|
|
8166
|
-
var
|
|
8167
|
-
var
|
|
8582
|
+
var React114 = __toESM(require("react"));
|
|
8583
|
+
var import_react68 = require("react");
|
|
8168
8584
|
var import_editor_props56 = require("@elementor/editor-props");
|
|
8169
8585
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
8170
|
-
var
|
|
8171
|
-
var
|
|
8172
|
-
var
|
|
8586
|
+
var import_icons38 = require("@elementor/icons");
|
|
8587
|
+
var import_ui97 = require("@elementor/ui");
|
|
8588
|
+
var import_i18n59 = require("@wordpress/i18n");
|
|
8173
8589
|
|
|
8174
8590
|
// src/utils/tracking.ts
|
|
8175
8591
|
var import_editor_elements6 = require("@elementor/editor-elements");
|
|
@@ -8250,9 +8666,9 @@ var TransitionSelector = ({
|
|
|
8250
8666
|
const {
|
|
8251
8667
|
key: { value: transitionLabel }
|
|
8252
8668
|
} = value;
|
|
8253
|
-
const defaultRef = (0,
|
|
8254
|
-
const popoverState = (0,
|
|
8255
|
-
const disabledCategories = (0,
|
|
8669
|
+
const defaultRef = (0, import_react68.useRef)(null);
|
|
8670
|
+
const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
|
|
8671
|
+
const disabledCategories = (0, import_react68.useMemo)(() => {
|
|
8256
8672
|
return new Set(
|
|
8257
8673
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
8258
8674
|
);
|
|
@@ -8272,7 +8688,7 @@ var TransitionSelector = ({
|
|
|
8272
8688
|
return [
|
|
8273
8689
|
first,
|
|
8274
8690
|
{
|
|
8275
|
-
label: (0,
|
|
8691
|
+
label: (0, import_i18n59.__)("Recently Used", "elementor"),
|
|
8276
8692
|
items: recentItems
|
|
8277
8693
|
},
|
|
8278
8694
|
...rest
|
|
@@ -8296,27 +8712,27 @@ var TransitionSelector = ({
|
|
|
8296
8712
|
left: rect.right + 36
|
|
8297
8713
|
};
|
|
8298
8714
|
};
|
|
8299
|
-
return /* @__PURE__ */
|
|
8300
|
-
|
|
8715
|
+
return /* @__PURE__ */ React114.createElement(import_ui97.Box, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
|
|
8716
|
+
import_ui97.UnstableTag,
|
|
8301
8717
|
{
|
|
8302
8718
|
variant: "outlined",
|
|
8303
8719
|
label: transitionLabel,
|
|
8304
|
-
endIcon: /* @__PURE__ */
|
|
8305
|
-
...(0,
|
|
8720
|
+
endIcon: /* @__PURE__ */ React114.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
|
|
8721
|
+
...(0, import_ui97.bindTrigger)(popoverState),
|
|
8306
8722
|
fullWidth: true
|
|
8307
8723
|
}
|
|
8308
|
-
)), /* @__PURE__ */
|
|
8309
|
-
|
|
8724
|
+
)), /* @__PURE__ */ React114.createElement(
|
|
8725
|
+
import_ui97.Popover,
|
|
8310
8726
|
{
|
|
8311
8727
|
disablePortal: true,
|
|
8312
8728
|
disableScrollLock: true,
|
|
8313
|
-
...(0,
|
|
8729
|
+
...(0, import_ui97.bindPopover)(popoverState),
|
|
8314
8730
|
anchorReference: "anchorPosition",
|
|
8315
8731
|
anchorPosition: getAnchorPosition(),
|
|
8316
8732
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
8317
8733
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
8318
8734
|
},
|
|
8319
|
-
/* @__PURE__ */
|
|
8735
|
+
/* @__PURE__ */ React114.createElement(
|
|
8320
8736
|
ItemSelector,
|
|
8321
8737
|
{
|
|
8322
8738
|
itemsList: getItemList(),
|
|
@@ -8324,11 +8740,11 @@ var TransitionSelector = ({
|
|
|
8324
8740
|
onItemChange: handleTransitionPropertyChange,
|
|
8325
8741
|
onClose: popoverState.close,
|
|
8326
8742
|
sectionWidth: 268,
|
|
8327
|
-
title: (0,
|
|
8328
|
-
icon:
|
|
8743
|
+
title: (0, import_i18n59.__)("Transition Property", "elementor"),
|
|
8744
|
+
icon: import_icons38.VariationsIcon,
|
|
8329
8745
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
8330
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
8331
|
-
|
|
8746
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
|
|
8747
|
+
import_ui97.Box,
|
|
8332
8748
|
{
|
|
8333
8749
|
sx: {
|
|
8334
8750
|
display: "flex",
|
|
@@ -8337,13 +8753,13 @@ var TransitionSelector = ({
|
|
|
8337
8753
|
width: "100%"
|
|
8338
8754
|
}
|
|
8339
8755
|
},
|
|
8340
|
-
/* @__PURE__ */
|
|
8341
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
8756
|
+
/* @__PURE__ */ React114.createElement("span", null, item.value),
|
|
8757
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React114.createElement(import_editor_ui15.PromotionChip, null)
|
|
8342
8758
|
),
|
|
8343
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
8759
|
+
footer: showPromotion ? /* @__PURE__ */ React114.createElement(
|
|
8344
8760
|
import_editor_ui15.PromotionAlert,
|
|
8345
8761
|
{
|
|
8346
|
-
message: (0,
|
|
8762
|
+
message: (0, import_i18n59.__)(
|
|
8347
8763
|
"Upgrade to customize transition properties and control effects.",
|
|
8348
8764
|
"elementor"
|
|
8349
8765
|
),
|
|
@@ -8382,8 +8798,8 @@ var areAllPropertiesUsed = (value = []) => {
|
|
|
8382
8798
|
};
|
|
8383
8799
|
var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
|
|
8384
8800
|
return {
|
|
8385
|
-
selectionLabel: (0,
|
|
8386
|
-
sizeLabel: (0,
|
|
8801
|
+
selectionLabel: (0, import_i18n60.__)("Type", "elementor"),
|
|
8802
|
+
sizeLabel: (0, import_i18n60.__)("Duration", "elementor"),
|
|
8387
8803
|
selectionConfig: {
|
|
8388
8804
|
component: TransitionSelector,
|
|
8389
8805
|
props: {
|
|
@@ -8459,18 +8875,18 @@ var getInitialValue = (values = []) => {
|
|
|
8459
8875
|
}
|
|
8460
8876
|
return initialTransitionValue;
|
|
8461
8877
|
};
|
|
8462
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
8463
|
-
|
|
8878
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
|
|
8879
|
+
import_ui98.Alert,
|
|
8464
8880
|
{
|
|
8465
8881
|
sx: {
|
|
8466
8882
|
width: 280,
|
|
8467
8883
|
gap: 0.5
|
|
8468
8884
|
},
|
|
8469
8885
|
color: "secondary",
|
|
8470
|
-
icon: /* @__PURE__ */
|
|
8886
|
+
icon: /* @__PURE__ */ React115.createElement(import_icons39.InfoCircleFilledIcon, null)
|
|
8471
8887
|
},
|
|
8472
|
-
/* @__PURE__ */
|
|
8473
|
-
/* @__PURE__ */
|
|
8888
|
+
/* @__PURE__ */ React115.createElement(import_ui98.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
|
|
8889
|
+
/* @__PURE__ */ React115.createElement(import_ui98.Box, { component: "span" }, /* @__PURE__ */ React115.createElement(import_ui98.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
8474
8890
|
);
|
|
8475
8891
|
var TransitionRepeaterControl = createControl(
|
|
8476
8892
|
({
|
|
@@ -8478,14 +8894,14 @@ var TransitionRepeaterControl = createControl(
|
|
|
8478
8894
|
currentStyleState
|
|
8479
8895
|
}) => {
|
|
8480
8896
|
const currentStyleIsNormal = currentStyleState === null;
|
|
8481
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
8897
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
|
|
8482
8898
|
const proInstalled = (0, import_utils8.hasProInstalled)();
|
|
8483
8899
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
8484
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
8900
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
|
|
8485
8901
|
() => getDisabledItemLabels(value),
|
|
8486
8902
|
[value]
|
|
8487
8903
|
);
|
|
8488
|
-
const allowedTransitionSet = (0,
|
|
8904
|
+
const allowedTransitionSet = (0, import_react69.useMemo)(() => {
|
|
8489
8905
|
const set = /* @__PURE__ */ new Set();
|
|
8490
8906
|
transitionProperties.forEach((category) => {
|
|
8491
8907
|
category.properties.forEach((prop) => {
|
|
@@ -8496,7 +8912,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
8496
8912
|
});
|
|
8497
8913
|
return set;
|
|
8498
8914
|
}, [proInstalled]);
|
|
8499
|
-
(0,
|
|
8915
|
+
(0, import_react69.useEffect)(() => {
|
|
8500
8916
|
if (!value || value.length === 0) {
|
|
8501
8917
|
return;
|
|
8502
8918
|
}
|
|
@@ -8508,18 +8924,18 @@ var TransitionRepeaterControl = createControl(
|
|
|
8508
8924
|
setValue(sanitized);
|
|
8509
8925
|
}
|
|
8510
8926
|
}, [allowedTransitionSet]);
|
|
8511
|
-
(0,
|
|
8927
|
+
(0, import_react69.useEffect)(() => {
|
|
8512
8928
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
8513
8929
|
}, [recentlyUsedListGetter]);
|
|
8514
|
-
const allPropertiesUsed = (0,
|
|
8930
|
+
const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
8515
8931
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
8516
|
-
return /* @__PURE__ */
|
|
8932
|
+
return /* @__PURE__ */ React115.createElement(
|
|
8517
8933
|
RepeatableControl,
|
|
8518
8934
|
{
|
|
8519
|
-
label: (0,
|
|
8520
|
-
repeaterLabel: (0,
|
|
8935
|
+
label: (0, import_i18n60.__)("Transitions", "elementor"),
|
|
8936
|
+
repeaterLabel: (0, import_i18n60.__)("Transitions", "elementor"),
|
|
8521
8937
|
patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
|
|
8522
|
-
placeholder: (0,
|
|
8938
|
+
placeholder: (0, import_i18n60.__)("Empty Transition", "elementor"),
|
|
8523
8939
|
showDuplicate: false,
|
|
8524
8940
|
showToggle: true,
|
|
8525
8941
|
initialValues: getInitialValue(value),
|
|
@@ -8540,11 +8956,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
8540
8956
|
);
|
|
8541
8957
|
|
|
8542
8958
|
// src/controls/date-time-control.tsx
|
|
8543
|
-
var
|
|
8959
|
+
var React116 = __toESM(require("react"));
|
|
8544
8960
|
var dayjs = __toESM(require("dayjs"));
|
|
8545
8961
|
var import_editor_props58 = require("@elementor/editor-props");
|
|
8546
8962
|
var import_editor_props59 = require("@elementor/editor-props");
|
|
8547
|
-
var
|
|
8963
|
+
var import_ui99 = require("@elementor/ui");
|
|
8548
8964
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
8549
8965
|
var TIME_FORMAT = "HH:mm";
|
|
8550
8966
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -8588,8 +9004,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8588
9004
|
const base = dayjs.default();
|
|
8589
9005
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
8590
9006
|
};
|
|
8591
|
-
return /* @__PURE__ */
|
|
8592
|
-
|
|
9007
|
+
return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(import_ui99.LocalizationProvider, null, /* @__PURE__ */ React116.createElement(import_ui99.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
|
|
9008
|
+
import_ui99.DatePicker,
|
|
8593
9009
|
{
|
|
8594
9010
|
value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
|
|
8595
9011
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
@@ -8600,8 +9016,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8600
9016
|
openPickerIcon: { fontSize: "tiny" }
|
|
8601
9017
|
}
|
|
8602
9018
|
}
|
|
8603
|
-
)), /* @__PURE__ */
|
|
8604
|
-
|
|
9019
|
+
)), /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React116.createElement(
|
|
9020
|
+
import_ui99.TimePicker,
|
|
8605
9021
|
{
|
|
8606
9022
|
value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
|
|
8607
9023
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
@@ -8616,15 +9032,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
8616
9032
|
});
|
|
8617
9033
|
|
|
8618
9034
|
// src/controls/date-range-control.tsx
|
|
8619
|
-
var
|
|
9035
|
+
var React118 = __toESM(require("react"));
|
|
8620
9036
|
var import_editor_props61 = require("@elementor/editor-props");
|
|
8621
|
-
var
|
|
8622
|
-
var
|
|
9037
|
+
var import_ui101 = require("@elementor/ui");
|
|
9038
|
+
var import_i18n61 = require("@wordpress/i18n");
|
|
8623
9039
|
|
|
8624
9040
|
// src/controls/date-string-control.tsx
|
|
8625
|
-
var
|
|
9041
|
+
var React117 = __toESM(require("react"));
|
|
8626
9042
|
var import_editor_props60 = require("@elementor/editor-props");
|
|
8627
|
-
var
|
|
9043
|
+
var import_ui100 = require("@elementor/ui");
|
|
8628
9044
|
|
|
8629
9045
|
// src/utils/date-time.ts
|
|
8630
9046
|
var dayjs2 = __toESM(require("dayjs"));
|
|
@@ -8681,8 +9097,8 @@ var DateStringControl = createControl(
|
|
|
8681
9097
|
}
|
|
8682
9098
|
setValue(newValue.format(format));
|
|
8683
9099
|
};
|
|
8684
|
-
return /* @__PURE__ */
|
|
8685
|
-
|
|
9100
|
+
return /* @__PURE__ */ React117.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
|
|
9101
|
+
import_ui100.DatePicker,
|
|
8686
9102
|
{
|
|
8687
9103
|
value: parseDateString(value ?? ""),
|
|
8688
9104
|
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
@@ -8695,8 +9111,8 @@ var DateStringControl = createControl(
|
|
|
8695
9111
|
|
|
8696
9112
|
// src/controls/date-range-control.tsx
|
|
8697
9113
|
var RANGE_LABELS = {
|
|
8698
|
-
min: (0,
|
|
8699
|
-
max: (0,
|
|
9114
|
+
min: (0, import_i18n61.__)("Min date", "elementor"),
|
|
9115
|
+
max: (0, import_i18n61.__)("Max date", "elementor")
|
|
8700
9116
|
};
|
|
8701
9117
|
var isMaxBeforeMin = (minIso, maxIso) => {
|
|
8702
9118
|
if (!minIso || !maxIso) {
|
|
@@ -8704,40 +9120,40 @@ var isMaxBeforeMin = (minIso, maxIso) => {
|
|
|
8704
9120
|
}
|
|
8705
9121
|
return maxIso < minIso;
|
|
8706
9122
|
};
|
|
8707
|
-
var RANGE_ERROR_MESSAGE = (0,
|
|
9123
|
+
var RANGE_ERROR_MESSAGE = (0, import_i18n61.__)("Max date must be on or after Min date", "elementor");
|
|
8708
9124
|
var DateRangeControl = createControl(() => {
|
|
8709
9125
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
|
|
8710
9126
|
const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
|
|
8711
9127
|
const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
|
|
8712
9128
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
8713
|
-
return /* @__PURE__ */
|
|
9129
|
+
return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
|
|
8714
9130
|
BoundDateStringControl,
|
|
8715
9131
|
{
|
|
8716
9132
|
bind: "min",
|
|
8717
9133
|
ariaLabel: RANGE_LABELS.min,
|
|
8718
9134
|
error: hasInvalidRange
|
|
8719
9135
|
}
|
|
8720
|
-
))), /* @__PURE__ */
|
|
9136
|
+
))), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
|
|
8721
9137
|
BoundDateStringControl,
|
|
8722
9138
|
{
|
|
8723
9139
|
bind: "max",
|
|
8724
9140
|
ariaLabel: RANGE_LABELS.max,
|
|
8725
9141
|
error: hasInvalidRange
|
|
8726
9142
|
}
|
|
8727
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
9143
|
+
)))), hasInvalidRange && /* @__PURE__ */ React118.createElement(import_ui101.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
8728
9144
|
});
|
|
8729
9145
|
var BoundDateStringControl = ({
|
|
8730
9146
|
bind,
|
|
8731
9147
|
ariaLabel,
|
|
8732
9148
|
error
|
|
8733
9149
|
}) => {
|
|
8734
|
-
return /* @__PURE__ */
|
|
9150
|
+
return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
8735
9151
|
};
|
|
8736
9152
|
|
|
8737
9153
|
// src/controls/time-string-control.tsx
|
|
8738
|
-
var
|
|
9154
|
+
var React119 = __toESM(require("react"));
|
|
8739
9155
|
var import_editor_props62 = require("@elementor/editor-props");
|
|
8740
|
-
var
|
|
9156
|
+
var import_ui102 = require("@elementor/ui");
|
|
8741
9157
|
var TimeStringControl = createControl(
|
|
8742
9158
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
8743
9159
|
const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
|
|
@@ -8763,8 +9179,8 @@ var TimeStringControl = createControl(
|
|
|
8763
9179
|
}
|
|
8764
9180
|
setValue(newValue.format(format));
|
|
8765
9181
|
};
|
|
8766
|
-
return /* @__PURE__ */
|
|
8767
|
-
|
|
9182
|
+
return /* @__PURE__ */ React119.createElement(import_ui102.LocalizationProvider, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
|
|
9183
|
+
import_ui102.TimePicker,
|
|
8768
9184
|
{
|
|
8769
9185
|
value: parseTimeString(value ?? ""),
|
|
8770
9186
|
onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
|
|
@@ -8776,32 +9192,32 @@ var TimeStringControl = createControl(
|
|
|
8776
9192
|
);
|
|
8777
9193
|
|
|
8778
9194
|
// src/controls/time-range-control.tsx
|
|
8779
|
-
var
|
|
9195
|
+
var React120 = __toESM(require("react"));
|
|
8780
9196
|
var import_editor_props63 = require("@elementor/editor-props");
|
|
8781
|
-
var
|
|
8782
|
-
var
|
|
9197
|
+
var import_ui103 = require("@elementor/ui");
|
|
9198
|
+
var import_i18n62 = require("@wordpress/i18n");
|
|
8783
9199
|
var RANGE_LABELS2 = {
|
|
8784
|
-
min: (0,
|
|
8785
|
-
max: (0,
|
|
9200
|
+
min: (0, import_i18n62.__)("Start time", "elementor"),
|
|
9201
|
+
max: (0, import_i18n62.__)("End time", "elementor")
|
|
8786
9202
|
};
|
|
8787
9203
|
var TimeRangeControl = createControl(() => {
|
|
8788
9204
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
|
|
8789
|
-
return /* @__PURE__ */
|
|
9205
|
+
return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(import_ui103.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
8790
9206
|
});
|
|
8791
9207
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
8792
|
-
return /* @__PURE__ */
|
|
9208
|
+
return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React120.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
8793
9209
|
};
|
|
8794
9210
|
|
|
8795
9211
|
// src/controls/inline-editing-control.tsx
|
|
8796
|
-
var
|
|
8797
|
-
var
|
|
9212
|
+
var React124 = __toESM(require("react"));
|
|
9213
|
+
var import_react75 = require("react");
|
|
8798
9214
|
var import_editor_props65 = require("@elementor/editor-props");
|
|
8799
|
-
var
|
|
9215
|
+
var import_ui107 = require("@elementor/ui");
|
|
8800
9216
|
|
|
8801
9217
|
// src/components/inline-editor.tsx
|
|
8802
|
-
var
|
|
8803
|
-
var
|
|
8804
|
-
var
|
|
9218
|
+
var React121 = __toESM(require("react"));
|
|
9219
|
+
var import_react70 = require("react");
|
|
9220
|
+
var import_ui104 = require("@elementor/ui");
|
|
8805
9221
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
8806
9222
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
8807
9223
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -8814,7 +9230,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
8814
9230
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
8815
9231
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
8816
9232
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
8817
|
-
var
|
|
9233
|
+
var import_react71 = require("@tiptap/react");
|
|
8818
9234
|
|
|
8819
9235
|
// src/utils/inline-editing.ts
|
|
8820
9236
|
var import_editor_props64 = require("@elementor/editor-props");
|
|
@@ -8846,7 +9262,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
8846
9262
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
8847
9263
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
8848
9264
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
8849
|
-
var InlineEditor =
|
|
9265
|
+
var InlineEditor = React121.forwardRef((props, ref) => {
|
|
8850
9266
|
const {
|
|
8851
9267
|
value,
|
|
8852
9268
|
setValue,
|
|
@@ -8863,8 +9279,8 @@ var InlineEditor = React119.forwardRef((props, ref) => {
|
|
|
8863
9279
|
onSelectionEnd,
|
|
8864
9280
|
mountElement = null
|
|
8865
9281
|
} = props;
|
|
8866
|
-
const containerRef = (0,
|
|
8867
|
-
const onBlurRef = (0,
|
|
9282
|
+
const containerRef = (0, import_react70.useRef)(null);
|
|
9283
|
+
const onBlurRef = (0, import_react70.useRef)(onBlur);
|
|
8868
9284
|
onBlurRef.current = onBlur;
|
|
8869
9285
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
8870
9286
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -8886,7 +9302,7 @@ var InlineEditor = React119.forwardRef((props, ref) => {
|
|
|
8886
9302
|
...HTMLAttributes,
|
|
8887
9303
|
class: elementClasses
|
|
8888
9304
|
});
|
|
8889
|
-
const editor = (0,
|
|
9305
|
+
const editor = (0, import_react71.useEditor)({
|
|
8890
9306
|
...mountElement ? { element: mountElement } : {},
|
|
8891
9307
|
extensions: [
|
|
8892
9308
|
import_extension_document.default.extend({
|
|
@@ -8959,11 +9375,11 @@ var InlineEditor = React119.forwardRef((props, ref) => {
|
|
|
8959
9375
|
if (mountElement) {
|
|
8960
9376
|
return null;
|
|
8961
9377
|
}
|
|
8962
|
-
return /* @__PURE__ */
|
|
9378
|
+
return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react71.EditorContent, { ref, editor }));
|
|
8963
9379
|
});
|
|
8964
9380
|
var useOnUpdate = (callback, dependencies) => {
|
|
8965
|
-
const hasMounted = (0,
|
|
8966
|
-
(0,
|
|
9381
|
+
const hasMounted = (0, import_react70.useRef)(false);
|
|
9382
|
+
(0, import_react70.useEffect)(() => {
|
|
8967
9383
|
if (hasMounted.current) {
|
|
8968
9384
|
callback();
|
|
8969
9385
|
} else {
|
|
@@ -8973,20 +9389,20 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
8973
9389
|
};
|
|
8974
9390
|
|
|
8975
9391
|
// src/components/inline-editor-toolbar.tsx
|
|
8976
|
-
var
|
|
8977
|
-
var
|
|
9392
|
+
var React123 = __toESM(require("react"));
|
|
9393
|
+
var import_react73 = require("react");
|
|
8978
9394
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
8979
|
-
var
|
|
8980
|
-
var
|
|
8981
|
-
var
|
|
8982
|
-
var
|
|
9395
|
+
var import_icons41 = require("@elementor/icons");
|
|
9396
|
+
var import_ui106 = require("@elementor/ui");
|
|
9397
|
+
var import_react74 = require("@tiptap/react");
|
|
9398
|
+
var import_i18n64 = require("@wordpress/i18n");
|
|
8983
9399
|
|
|
8984
9400
|
// src/components/url-popover.tsx
|
|
8985
|
-
var
|
|
8986
|
-
var
|
|
8987
|
-
var
|
|
8988
|
-
var
|
|
8989
|
-
var
|
|
9401
|
+
var React122 = __toESM(require("react"));
|
|
9402
|
+
var import_react72 = require("react");
|
|
9403
|
+
var import_icons40 = require("@elementor/icons");
|
|
9404
|
+
var import_ui105 = require("@elementor/ui");
|
|
9405
|
+
var import_i18n63 = require("@wordpress/i18n");
|
|
8990
9406
|
var UrlPopover = ({
|
|
8991
9407
|
popupState,
|
|
8992
9408
|
restoreValue,
|
|
@@ -8996,8 +9412,8 @@ var UrlPopover = ({
|
|
|
8996
9412
|
openInNewTab,
|
|
8997
9413
|
onToggleNewTab
|
|
8998
9414
|
}) => {
|
|
8999
|
-
const inputRef = (0,
|
|
9000
|
-
(0,
|
|
9415
|
+
const inputRef = (0, import_react72.useRef)(null);
|
|
9416
|
+
(0, import_react72.useEffect)(() => {
|
|
9001
9417
|
if (popupState.isOpen) {
|
|
9002
9418
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
9003
9419
|
}
|
|
@@ -9006,41 +9422,41 @@ var UrlPopover = ({
|
|
|
9006
9422
|
restoreValue();
|
|
9007
9423
|
popupState.close();
|
|
9008
9424
|
};
|
|
9009
|
-
return /* @__PURE__ */
|
|
9010
|
-
|
|
9425
|
+
return /* @__PURE__ */ React122.createElement(
|
|
9426
|
+
import_ui105.Popover,
|
|
9011
9427
|
{
|
|
9012
9428
|
slotProps: {
|
|
9013
9429
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
9014
9430
|
},
|
|
9015
|
-
...(0,
|
|
9431
|
+
...(0, import_ui105.bindPopover)(popupState),
|
|
9016
9432
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
9017
9433
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
9018
9434
|
onClose: handleClose
|
|
9019
9435
|
},
|
|
9020
|
-
/* @__PURE__ */
|
|
9021
|
-
|
|
9436
|
+
/* @__PURE__ */ React122.createElement(import_ui105.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
|
|
9437
|
+
import_ui105.TextField,
|
|
9022
9438
|
{
|
|
9023
9439
|
value,
|
|
9024
9440
|
onChange,
|
|
9025
9441
|
size: "tiny",
|
|
9026
9442
|
fullWidth: true,
|
|
9027
|
-
placeholder: (0,
|
|
9443
|
+
placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
|
|
9028
9444
|
inputProps: { ref: inputRef },
|
|
9029
9445
|
color: "secondary",
|
|
9030
9446
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
9031
9447
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
9032
9448
|
}
|
|
9033
|
-
), /* @__PURE__ */
|
|
9034
|
-
|
|
9449
|
+
), /* @__PURE__ */ React122.createElement(import_ui105.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
|
|
9450
|
+
import_ui105.ToggleButton,
|
|
9035
9451
|
{
|
|
9036
9452
|
size: "tiny",
|
|
9037
9453
|
value: "newTab",
|
|
9038
9454
|
selected: openInNewTab,
|
|
9039
9455
|
onClick: onToggleNewTab,
|
|
9040
|
-
"aria-label": (0,
|
|
9456
|
+
"aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
|
|
9041
9457
|
sx: { borderRadius: "8px" }
|
|
9042
9458
|
},
|
|
9043
|
-
/* @__PURE__ */
|
|
9459
|
+
/* @__PURE__ */ React122.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
|
|
9044
9460
|
)))
|
|
9045
9461
|
);
|
|
9046
9462
|
};
|
|
@@ -9052,16 +9468,16 @@ var InlineEditorToolbar = ({
|
|
|
9052
9468
|
sx = {},
|
|
9053
9469
|
inControlPanel = false
|
|
9054
9470
|
}) => {
|
|
9055
|
-
const [urlValue, setUrlValue] = (0,
|
|
9056
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
9057
|
-
const toolbarRef = (0,
|
|
9058
|
-
const linkPopupState = (0,
|
|
9471
|
+
const [urlValue, setUrlValue] = (0, import_react73.useState)("");
|
|
9472
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
|
|
9473
|
+
const toolbarRef = (0, import_react73.useRef)(null);
|
|
9474
|
+
const linkPopupState = (0, import_ui106.usePopupState)({ variant: "popover" });
|
|
9059
9475
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
9060
|
-
const editorState = (0,
|
|
9476
|
+
const editorState = (0, import_react74.useEditorState)({
|
|
9061
9477
|
editor,
|
|
9062
9478
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
9063
9479
|
});
|
|
9064
|
-
const formatButtonsList = (0,
|
|
9480
|
+
const formatButtonsList = (0, import_react73.useMemo)(() => {
|
|
9065
9481
|
const buttons = Object.values(formatButtons);
|
|
9066
9482
|
if (isElementClickable) {
|
|
9067
9483
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -9098,13 +9514,13 @@ var InlineEditorToolbar = ({
|
|
|
9098
9514
|
}
|
|
9099
9515
|
linkPopupState.close();
|
|
9100
9516
|
};
|
|
9101
|
-
(0,
|
|
9517
|
+
(0, import_react73.useEffect)(() => {
|
|
9102
9518
|
if (!inControlPanel) {
|
|
9103
9519
|
editor?.commands?.focus();
|
|
9104
9520
|
}
|
|
9105
9521
|
}, [editor, inControlPanel]);
|
|
9106
|
-
return /* @__PURE__ */
|
|
9107
|
-
|
|
9522
|
+
return /* @__PURE__ */ React123.createElement(
|
|
9523
|
+
import_ui106.Box,
|
|
9108
9524
|
{
|
|
9109
9525
|
ref: toolbarRef,
|
|
9110
9526
|
sx: {
|
|
@@ -9137,9 +9553,9 @@ var InlineEditorToolbar = ({
|
|
|
9137
9553
|
}
|
|
9138
9554
|
}
|
|
9139
9555
|
},
|
|
9140
|
-
/* @__PURE__ */
|
|
9141
|
-
/* @__PURE__ */
|
|
9142
|
-
|
|
9556
|
+
/* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(import_ui106.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
9557
|
+
/* @__PURE__ */ React123.createElement(
|
|
9558
|
+
import_ui106.ToggleButtonGroup,
|
|
9143
9559
|
{
|
|
9144
9560
|
value: editorState,
|
|
9145
9561
|
size: "tiny",
|
|
@@ -9147,7 +9563,7 @@ var InlineEditorToolbar = ({
|
|
|
9147
9563
|
display: "flex",
|
|
9148
9564
|
gap: 0.5,
|
|
9149
9565
|
border: "none",
|
|
9150
|
-
[`& .${
|
|
9566
|
+
[`& .${import_ui106.toggleButtonGroupClasses.firstButton}, & .${import_ui106.toggleButtonGroupClasses.middleButton}, & .${import_ui106.toggleButtonGroupClasses.lastButton}`]: {
|
|
9151
9567
|
borderRadius: "8px",
|
|
9152
9568
|
border: "none",
|
|
9153
9569
|
marginLeft: 0,
|
|
@@ -9168,8 +9584,8 @@ var InlineEditorToolbar = ({
|
|
|
9168
9584
|
}
|
|
9169
9585
|
}
|
|
9170
9586
|
},
|
|
9171
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
9172
|
-
|
|
9587
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
|
|
9588
|
+
import_ui106.ToggleButton,
|
|
9173
9589
|
{
|
|
9174
9590
|
value: button.action,
|
|
9175
9591
|
"aria-label": button.label,
|
|
@@ -9186,7 +9602,7 @@ var InlineEditorToolbar = ({
|
|
|
9186
9602
|
button.icon
|
|
9187
9603
|
)))
|
|
9188
9604
|
),
|
|
9189
|
-
/* @__PURE__ */
|
|
9605
|
+
/* @__PURE__ */ React123.createElement(
|
|
9190
9606
|
UrlPopover,
|
|
9191
9607
|
{
|
|
9192
9608
|
popupState: linkPopupState,
|
|
@@ -9209,64 +9625,64 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
9209
9625
|
};
|
|
9210
9626
|
var toolbarButtons = {
|
|
9211
9627
|
clear: {
|
|
9212
|
-
label: (0,
|
|
9213
|
-
icon: /* @__PURE__ */
|
|
9628
|
+
label: (0, import_i18n64.__)("Clear", "elementor"),
|
|
9629
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
|
|
9214
9630
|
action: "clear",
|
|
9215
9631
|
method: (editor) => {
|
|
9216
9632
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
9217
9633
|
}
|
|
9218
9634
|
},
|
|
9219
9635
|
bold: {
|
|
9220
|
-
label: (0,
|
|
9221
|
-
icon: /* @__PURE__ */
|
|
9636
|
+
label: (0, import_i18n64.__)("Bold", "elementor"),
|
|
9637
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
|
|
9222
9638
|
action: "bold",
|
|
9223
9639
|
method: (editor) => {
|
|
9224
9640
|
editor.chain().focus().toggleBold().run();
|
|
9225
9641
|
}
|
|
9226
9642
|
},
|
|
9227
9643
|
italic: {
|
|
9228
|
-
label: (0,
|
|
9229
|
-
icon: /* @__PURE__ */
|
|
9644
|
+
label: (0, import_i18n64.__)("Italic", "elementor"),
|
|
9645
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
|
|
9230
9646
|
action: "italic",
|
|
9231
9647
|
method: (editor) => {
|
|
9232
9648
|
editor.chain().focus().toggleItalic().run();
|
|
9233
9649
|
}
|
|
9234
9650
|
},
|
|
9235
9651
|
underline: {
|
|
9236
|
-
label: (0,
|
|
9237
|
-
icon: /* @__PURE__ */
|
|
9652
|
+
label: (0, import_i18n64.__)("Underline", "elementor"),
|
|
9653
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
|
|
9238
9654
|
action: "underline",
|
|
9239
9655
|
method: (editor) => {
|
|
9240
9656
|
editor.chain().focus().toggleUnderline().run();
|
|
9241
9657
|
}
|
|
9242
9658
|
},
|
|
9243
9659
|
strike: {
|
|
9244
|
-
label: (0,
|
|
9245
|
-
icon: /* @__PURE__ */
|
|
9660
|
+
label: (0, import_i18n64.__)("Strikethrough", "elementor"),
|
|
9661
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
|
|
9246
9662
|
action: "strike",
|
|
9247
9663
|
method: (editor) => {
|
|
9248
9664
|
editor.chain().focus().toggleStrike().run();
|
|
9249
9665
|
}
|
|
9250
9666
|
},
|
|
9251
9667
|
superscript: {
|
|
9252
|
-
label: (0,
|
|
9253
|
-
icon: /* @__PURE__ */
|
|
9668
|
+
label: (0, import_i18n64.__)("Superscript", "elementor"),
|
|
9669
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
|
|
9254
9670
|
action: "superscript",
|
|
9255
9671
|
method: (editor) => {
|
|
9256
9672
|
editor.chain().focus().toggleSuperscript().run();
|
|
9257
9673
|
}
|
|
9258
9674
|
},
|
|
9259
9675
|
subscript: {
|
|
9260
|
-
label: (0,
|
|
9261
|
-
icon: /* @__PURE__ */
|
|
9676
|
+
label: (0, import_i18n64.__)("Subscript", "elementor"),
|
|
9677
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
|
|
9262
9678
|
action: "subscript",
|
|
9263
9679
|
method: (editor) => {
|
|
9264
9680
|
editor.chain().focus().toggleSubscript().run();
|
|
9265
9681
|
}
|
|
9266
9682
|
},
|
|
9267
9683
|
link: {
|
|
9268
|
-
label: (0,
|
|
9269
|
-
icon: /* @__PURE__ */
|
|
9684
|
+
label: (0, import_i18n64.__)("Link", "elementor"),
|
|
9685
|
+
icon: /* @__PURE__ */ React123.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
|
|
9270
9686
|
action: "link",
|
|
9271
9687
|
method: null
|
|
9272
9688
|
}
|
|
@@ -9279,15 +9695,15 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9279
9695
|
const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
|
|
9280
9696
|
const { value: rawValue } = usePropKeyContext();
|
|
9281
9697
|
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
9282
|
-
const [editor, setEditor] = (0,
|
|
9283
|
-
const handleChange = (0,
|
|
9698
|
+
const [editor, setEditor] = (0, import_react75.useState)(null);
|
|
9699
|
+
const handleChange = (0, import_react75.useCallback)(
|
|
9284
9700
|
(newValue) => {
|
|
9285
9701
|
const html = newValue ?? "";
|
|
9286
9702
|
setValue(html);
|
|
9287
9703
|
},
|
|
9288
9704
|
[setValue]
|
|
9289
9705
|
);
|
|
9290
|
-
return /* @__PURE__ */
|
|
9706
|
+
return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(import_ui107.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
|
|
9291
9707
|
InlineEditorToolbar,
|
|
9292
9708
|
{
|
|
9293
9709
|
editor,
|
|
@@ -9300,8 +9716,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9300
9716
|
}),
|
|
9301
9717
|
inControlPanel: true
|
|
9302
9718
|
}
|
|
9303
|
-
), /* @__PURE__ */
|
|
9304
|
-
|
|
9719
|
+
), /* @__PURE__ */ React124.createElement(
|
|
9720
|
+
import_ui107.Box,
|
|
9305
9721
|
{
|
|
9306
9722
|
sx: (theme) => ({
|
|
9307
9723
|
p: 0.8,
|
|
@@ -9345,7 +9761,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9345
9761
|
...attributes,
|
|
9346
9762
|
...props
|
|
9347
9763
|
},
|
|
9348
|
-
/* @__PURE__ */
|
|
9764
|
+
/* @__PURE__ */ React124.createElement(
|
|
9349
9765
|
InlineEditor,
|
|
9350
9766
|
{
|
|
9351
9767
|
value: content,
|
|
@@ -9362,17 +9778,17 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
9362
9778
|
});
|
|
9363
9779
|
|
|
9364
9780
|
// src/controls/email-form-action-control/index.tsx
|
|
9365
|
-
var
|
|
9781
|
+
var React128 = __toESM(require("react"));
|
|
9366
9782
|
var import_editor_props68 = require("@elementor/editor-props");
|
|
9367
9783
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
9368
|
-
var
|
|
9369
|
-
var
|
|
9784
|
+
var import_ui111 = require("@elementor/ui");
|
|
9785
|
+
var import_i18n66 = require("@wordpress/i18n");
|
|
9370
9786
|
|
|
9371
9787
|
// src/controls/email-form-action-control/fields.tsx
|
|
9372
|
-
var
|
|
9788
|
+
var React127 = __toESM(require("react"));
|
|
9373
9789
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
9374
|
-
var
|
|
9375
|
-
var
|
|
9790
|
+
var import_ui110 = require("@elementor/ui");
|
|
9791
|
+
var import_i18n65 = require("@wordpress/i18n");
|
|
9376
9792
|
|
|
9377
9793
|
// src/hooks/use-form-field-suggestions.ts
|
|
9378
9794
|
var import_editor_elements8 = require("@elementor/editor-elements");
|
|
@@ -9461,10 +9877,10 @@ function useFormFieldSuggestions(options) {
|
|
|
9461
9877
|
}
|
|
9462
9878
|
|
|
9463
9879
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
9464
|
-
var
|
|
9465
|
-
var
|
|
9880
|
+
var React125 = __toESM(require("react"));
|
|
9881
|
+
var import_react76 = require("react");
|
|
9466
9882
|
var import_editor_props67 = require("@elementor/editor-props");
|
|
9467
|
-
var
|
|
9883
|
+
var import_ui108 = require("@elementor/ui");
|
|
9468
9884
|
|
|
9469
9885
|
// src/controls/email-form-action-control/utils.ts
|
|
9470
9886
|
var import_schema = require("@elementor/schema");
|
|
@@ -9500,10 +9916,10 @@ function resolveMention(raw, suggestions) {
|
|
|
9500
9916
|
}
|
|
9501
9917
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
9502
9918
|
const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
|
|
9503
|
-
const [inputValue, setInputValue] = (0,
|
|
9919
|
+
const [inputValue, setInputValue] = (0, import_react76.useState)("");
|
|
9504
9920
|
const items2 = value || [];
|
|
9505
9921
|
const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
9506
|
-
const suggestionOptions = (0,
|
|
9922
|
+
const suggestionOptions = (0, import_react76.useMemo)(
|
|
9507
9923
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
9508
9924
|
[suggestions]
|
|
9509
9925
|
);
|
|
@@ -9538,8 +9954,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
9538
9954
|
tryAddChip(inputValue);
|
|
9539
9955
|
}
|
|
9540
9956
|
};
|
|
9541
|
-
return /* @__PURE__ */
|
|
9542
|
-
|
|
9957
|
+
return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
|
|
9958
|
+
import_ui108.Autocomplete,
|
|
9543
9959
|
{
|
|
9544
9960
|
fullWidth: true,
|
|
9545
9961
|
multiple: true,
|
|
@@ -9563,99 +9979,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
9563
9979
|
onBlur: handleBlur,
|
|
9564
9980
|
getOptionLabel: (option) => option,
|
|
9565
9981
|
isOptionEqualToValue: (option, val) => option === val,
|
|
9566
|
-
renderInput: (params) => /* @__PURE__ */
|
|
9567
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
9982
|
+
renderInput: (params) => /* @__PURE__ */ React125.createElement(import_ui108.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
9983
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React125.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
9568
9984
|
}
|
|
9569
9985
|
));
|
|
9570
9986
|
});
|
|
9571
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
9987
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
9572
9988
|
|
|
9573
9989
|
// src/controls/email-form-action-control/email-field.tsx
|
|
9574
|
-
var
|
|
9575
|
-
var
|
|
9576
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
9990
|
+
var React126 = __toESM(require("react"));
|
|
9991
|
+
var import_ui109 = require("@elementor/ui");
|
|
9992
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
|
|
9577
9993
|
|
|
9578
9994
|
// src/controls/email-form-action-control/fields.tsx
|
|
9579
9995
|
var SendToField = ({ placeholder }) => {
|
|
9580
9996
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9581
|
-
return /* @__PURE__ */
|
|
9997
|
+
return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
|
|
9582
9998
|
EmailChipsField,
|
|
9583
9999
|
{
|
|
9584
|
-
fieldLabel: (0,
|
|
10000
|
+
fieldLabel: (0, import_i18n65.__)("Send to", "elementor"),
|
|
9585
10001
|
placeholder,
|
|
9586
10002
|
suggestions
|
|
9587
10003
|
}
|
|
9588
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
10004
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n65.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
9589
10005
|
};
|
|
9590
|
-
var SubjectField = () => /* @__PURE__ */
|
|
10006
|
+
var SubjectField = () => /* @__PURE__ */ React127.createElement(
|
|
9591
10007
|
EmailField,
|
|
9592
10008
|
{
|
|
9593
10009
|
bind: "subject",
|
|
9594
|
-
label: (0,
|
|
9595
|
-
placeholder: (0,
|
|
10010
|
+
label: (0, import_i18n65.__)("Email subject", "elementor"),
|
|
10011
|
+
placeholder: (0, import_i18n65.__)("New form submission", "elementor")
|
|
9596
10012
|
}
|
|
9597
10013
|
);
|
|
9598
10014
|
var MessageField = () => {
|
|
9599
10015
|
const suggestions = useFormFieldSuggestions();
|
|
9600
|
-
return /* @__PURE__ */
|
|
10016
|
+
return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
|
|
9601
10017
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
9602
10018
|
"elementor"
|
|
9603
|
-
) : (0,
|
|
10019
|
+
) : (0, import_i18n65.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
9604
10020
|
};
|
|
9605
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
10021
|
+
var FromEmailField = () => /* @__PURE__ */ React127.createElement(
|
|
9606
10022
|
EmailField,
|
|
9607
10023
|
{
|
|
9608
10024
|
bind: "from",
|
|
9609
|
-
label: (0,
|
|
9610
|
-
placeholder: (0,
|
|
10025
|
+
label: (0, import_i18n65.__)("From email", "elementor"),
|
|
10026
|
+
placeholder: (0, import_i18n65.__)("What email should appear as the sender?", "elementor")
|
|
9611
10027
|
}
|
|
9612
10028
|
);
|
|
9613
|
-
var FromNameField = () => /* @__PURE__ */
|
|
10029
|
+
var FromNameField = () => /* @__PURE__ */ React127.createElement(
|
|
9614
10030
|
EmailField,
|
|
9615
10031
|
{
|
|
9616
10032
|
bind: "from-name",
|
|
9617
|
-
label: (0,
|
|
9618
|
-
placeholder: (0,
|
|
10033
|
+
label: (0, import_i18n65.__)("From name", "elementor"),
|
|
10034
|
+
placeholder: (0, import_i18n65.__)("What name should appear as the sender?", "elementor")
|
|
9619
10035
|
}
|
|
9620
10036
|
);
|
|
9621
10037
|
var ReplyToField = () => {
|
|
9622
10038
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9623
|
-
return /* @__PURE__ */
|
|
10039
|
+
return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
|
|
9624
10040
|
MentionTextAreaControl,
|
|
9625
10041
|
{
|
|
9626
10042
|
suggestions: emailSuggestions,
|
|
9627
10043
|
rows: 1,
|
|
9628
10044
|
triggerPosition: "start",
|
|
9629
|
-
placeholder: (0,
|
|
10045
|
+
placeholder: (0, import_i18n65.__)("You can type @ to insert an email field", "elementor")
|
|
9630
10046
|
}
|
|
9631
10047
|
))));
|
|
9632
10048
|
};
|
|
9633
10049
|
var CcField = () => {
|
|
9634
10050
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9635
|
-
return /* @__PURE__ */
|
|
10051
|
+
return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Cc", "elementor"), suggestions }));
|
|
9636
10052
|
};
|
|
9637
10053
|
var BccField = () => {
|
|
9638
10054
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
9639
|
-
return /* @__PURE__ */
|
|
10055
|
+
return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
|
|
9640
10056
|
};
|
|
9641
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
10057
|
+
var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
|
|
9642
10058
|
ChipsControl,
|
|
9643
10059
|
{
|
|
9644
10060
|
options: [
|
|
9645
|
-
{ label: (0,
|
|
9646
|
-
{ label: (0,
|
|
9647
|
-
{ label: (0,
|
|
9648
|
-
{ label: (0,
|
|
9649
|
-
{ label: (0,
|
|
10061
|
+
{ label: (0, import_i18n65.__)("Date", "elementor"), value: "date" },
|
|
10062
|
+
{ label: (0, import_i18n65.__)("Time", "elementor"), value: "time" },
|
|
10063
|
+
{ label: (0, import_i18n65.__)("Page URL", "elementor"), value: "page-url" },
|
|
10064
|
+
{ label: (0, import_i18n65.__)("User agent", "elementor"), value: "user-agent" },
|
|
10065
|
+
{ label: (0, import_i18n65.__)("Credit", "elementor"), value: "credit" }
|
|
9650
10066
|
]
|
|
9651
10067
|
}
|
|
9652
10068
|
)));
|
|
9653
|
-
var SendAsField = () => /* @__PURE__ */
|
|
10069
|
+
var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
|
|
9654
10070
|
SelectControl,
|
|
9655
10071
|
{
|
|
9656
10072
|
options: [
|
|
9657
|
-
{ label: (0,
|
|
9658
|
-
{ label: (0,
|
|
10073
|
+
{ label: (0, import_i18n65.__)("HTML", "elementor"), value: "html" },
|
|
10074
|
+
{ label: (0, import_i18n65.__)("Plain Text", "elementor"), value: "plain" }
|
|
9659
10075
|
]
|
|
9660
10076
|
}
|
|
9661
10077
|
))));
|
|
@@ -9664,30 +10080,30 @@ var SendAsField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider,
|
|
|
9664
10080
|
var EmailFormActionControl = createControl(
|
|
9665
10081
|
({ toPlaceholder, label }) => {
|
|
9666
10082
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
|
|
9667
|
-
return /* @__PURE__ */
|
|
10083
|
+
return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("Email settings", "elementor")), /* @__PURE__ */ React128.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React128.createElement(SubjectField, null), /* @__PURE__ */ React128.createElement(MessageField, null), /* @__PURE__ */ React128.createElement(FromEmailField, null), /* @__PURE__ */ React128.createElement(AdvancedSettings, null)));
|
|
9668
10084
|
}
|
|
9669
10085
|
);
|
|
9670
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
10086
|
+
var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(import_ui111.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(FromNameField, null), /* @__PURE__ */ React128.createElement(ReplyToField, null), /* @__PURE__ */ React128.createElement(CcField, null), /* @__PURE__ */ React128.createElement(BccField, null), /* @__PURE__ */ React128.createElement(import_ui111.Divider, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
|
|
9671
10087
|
|
|
9672
10088
|
// src/controls/attachment-type-control.tsx
|
|
9673
|
-
var
|
|
10089
|
+
var React129 = __toESM(require("react"));
|
|
9674
10090
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
9675
|
-
var
|
|
9676
|
-
var
|
|
10091
|
+
var import_ui112 = require("@elementor/ui");
|
|
10092
|
+
var import_i18n67 = require("@wordpress/i18n");
|
|
9677
10093
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
9678
|
-
return /* @__PURE__ */
|
|
10094
|
+
return /* @__PURE__ */ React129.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
|
|
9679
10095
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
9680
10096
|
"elementor"
|
|
9681
10097
|
))));
|
|
9682
10098
|
});
|
|
9683
10099
|
|
|
9684
10100
|
// src/controls/notice-control.tsx
|
|
9685
|
-
var
|
|
9686
|
-
var
|
|
10101
|
+
var React130 = __toESM(require("react"));
|
|
10102
|
+
var import_react77 = require("react");
|
|
9687
10103
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
9688
|
-
var
|
|
9689
|
-
var
|
|
9690
|
-
var NoticeTitle = (0,
|
|
10104
|
+
var import_icons42 = require("@elementor/icons");
|
|
10105
|
+
var import_ui113 = require("@elementor/ui");
|
|
10106
|
+
var NoticeTitle = (0, import_ui113.styled)(import_ui113.AlertTitle)({
|
|
9691
10107
|
"&.MuiAlertTitle-root.MuiAlertTitle-root": {
|
|
9692
10108
|
marginBottom: 4,
|
|
9693
10109
|
fontStyle: "italic"
|
|
@@ -9701,12 +10117,12 @@ var markNoticeAsDismissedInSession = (dismissId) => {
|
|
|
9701
10117
|
};
|
|
9702
10118
|
var NoticeControl = createControl(
|
|
9703
10119
|
({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
|
|
9704
|
-
const [isDismissed, setIsDismissed] = (0,
|
|
10120
|
+
const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
|
|
9705
10121
|
if (isDismissed || !content) {
|
|
9706
10122
|
return null;
|
|
9707
10123
|
}
|
|
9708
10124
|
const severity = noticeType === "danger" ? "error" : noticeType;
|
|
9709
|
-
const icon = noticeType === "info" ? /* @__PURE__ */
|
|
10125
|
+
const icon = noticeType === "info" ? /* @__PURE__ */ React130.createElement(import_icons42.BulbIcon, { fontSize: "inherit" }) : void 0;
|
|
9710
10126
|
const handleDismiss = () => {
|
|
9711
10127
|
setIsDismissed(true);
|
|
9712
10128
|
if (!dismissible) {
|
|
@@ -9726,8 +10142,8 @@ var NoticeControl = createControl(
|
|
|
9726
10142
|
markNoticeAsDismissedInSession(dismissible);
|
|
9727
10143
|
}
|
|
9728
10144
|
};
|
|
9729
|
-
return /* @__PURE__ */
|
|
9730
|
-
|
|
10145
|
+
return /* @__PURE__ */ React130.createElement(import_ui113.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(import_ui113.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
|
|
10146
|
+
import_ui113.AlertAction,
|
|
9731
10147
|
{
|
|
9732
10148
|
variant: "contained",
|
|
9733
10149
|
color: severity,
|
|
@@ -9743,9 +10159,9 @@ var NoticeControl = createControl(
|
|
|
9743
10159
|
);
|
|
9744
10160
|
|
|
9745
10161
|
// src/controls/grid-span-control.tsx
|
|
9746
|
-
var
|
|
10162
|
+
var React131 = __toESM(require("react"));
|
|
9747
10163
|
var import_editor_props69 = require("@elementor/editor-props");
|
|
9748
|
-
var
|
|
10164
|
+
var import_ui114 = require("@elementor/ui");
|
|
9749
10165
|
var GridSpanControl = createControl(
|
|
9750
10166
|
({
|
|
9751
10167
|
placeholder: propPlaceholder,
|
|
@@ -9762,8 +10178,8 @@ var GridSpanControl = createControl(
|
|
|
9762
10178
|
setValue(next === "" ? null : next);
|
|
9763
10179
|
};
|
|
9764
10180
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
9765
|
-
return /* @__PURE__ */
|
|
9766
|
-
|
|
10181
|
+
return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
|
|
10182
|
+
import_ui114.TextField,
|
|
9767
10183
|
{
|
|
9768
10184
|
size: "tiny",
|
|
9769
10185
|
fullWidth: true,
|
|
@@ -9783,25 +10199,25 @@ var GridSpanControl = createControl(
|
|
|
9783
10199
|
);
|
|
9784
10200
|
|
|
9785
10201
|
// src/components/promotions/display-conditions-control.tsx
|
|
9786
|
-
var
|
|
9787
|
-
var
|
|
9788
|
-
var
|
|
9789
|
-
var
|
|
9790
|
-
var
|
|
10202
|
+
var React133 = __toESM(require("react"));
|
|
10203
|
+
var import_react79 = require("react");
|
|
10204
|
+
var import_icons43 = require("@elementor/icons");
|
|
10205
|
+
var import_ui116 = require("@elementor/ui");
|
|
10206
|
+
var import_i18n68 = require("@wordpress/i18n");
|
|
9791
10207
|
|
|
9792
10208
|
// src/components/promotions/promotion-trigger.tsx
|
|
9793
|
-
var
|
|
9794
|
-
var
|
|
10209
|
+
var React132 = __toESM(require("react"));
|
|
10210
|
+
var import_react78 = require("react");
|
|
9795
10211
|
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
9796
|
-
var
|
|
10212
|
+
var import_ui115 = require("@elementor/ui");
|
|
9797
10213
|
function getV4Promotion(key) {
|
|
9798
10214
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
9799
10215
|
}
|
|
9800
|
-
var PromotionTrigger = (0,
|
|
10216
|
+
var PromotionTrigger = (0, import_react78.forwardRef)(
|
|
9801
10217
|
({ promotionKey, children, trackingData }, ref) => {
|
|
9802
|
-
const [isOpen, setIsOpen] = (0,
|
|
10218
|
+
const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
|
|
9803
10219
|
const promotion = getV4Promotion(promotionKey);
|
|
9804
|
-
const toggle = (0,
|
|
10220
|
+
const toggle = (0, import_react78.useCallback)(() => {
|
|
9805
10221
|
setIsOpen((prev) => {
|
|
9806
10222
|
if (!prev) {
|
|
9807
10223
|
trackViewPromotion(trackingData);
|
|
@@ -9809,8 +10225,8 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
|
|
|
9809
10225
|
return !prev;
|
|
9810
10226
|
});
|
|
9811
10227
|
}, [trackingData]);
|
|
9812
|
-
(0,
|
|
9813
|
-
return /* @__PURE__ */
|
|
10228
|
+
(0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
10229
|
+
return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
|
|
9814
10230
|
import_editor_ui19.PromotionInfotip,
|
|
9815
10231
|
{
|
|
9816
10232
|
title: promotion.title,
|
|
@@ -9824,8 +10240,8 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
|
|
|
9824
10240
|
},
|
|
9825
10241
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
9826
10242
|
},
|
|
9827
|
-
/* @__PURE__ */
|
|
9828
|
-
|
|
10243
|
+
/* @__PURE__ */ React132.createElement(
|
|
10244
|
+
import_ui115.Box,
|
|
9829
10245
|
{
|
|
9830
10246
|
onClick: (e) => {
|
|
9831
10247
|
e.stopPropagation();
|
|
@@ -9833,19 +10249,19 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
|
|
|
9833
10249
|
},
|
|
9834
10250
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
9835
10251
|
},
|
|
9836
|
-
children ?? /* @__PURE__ */
|
|
10252
|
+
children ?? /* @__PURE__ */ React132.createElement(import_editor_ui19.PromotionChip, null)
|
|
9837
10253
|
)
|
|
9838
10254
|
));
|
|
9839
10255
|
}
|
|
9840
10256
|
);
|
|
9841
10257
|
|
|
9842
10258
|
// src/components/promotions/display-conditions-control.tsx
|
|
9843
|
-
var ARIA_LABEL = (0,
|
|
10259
|
+
var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
|
|
9844
10260
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
9845
10261
|
var DisplayConditionsControl = createControl(() => {
|
|
9846
|
-
const triggerRef = (0,
|
|
9847
|
-
return /* @__PURE__ */
|
|
9848
|
-
|
|
10262
|
+
const triggerRef = (0, import_react79.useRef)(null);
|
|
10263
|
+
return /* @__PURE__ */ React133.createElement(
|
|
10264
|
+
import_ui116.Stack,
|
|
9849
10265
|
{
|
|
9850
10266
|
direction: "row",
|
|
9851
10267
|
spacing: 2,
|
|
@@ -9854,9 +10270,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
9854
10270
|
alignItems: "center"
|
|
9855
10271
|
}
|
|
9856
10272
|
},
|
|
9857
|
-
/* @__PURE__ */
|
|
9858
|
-
/* @__PURE__ */
|
|
9859
|
-
|
|
10273
|
+
/* @__PURE__ */ React133.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
10274
|
+
/* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
|
|
10275
|
+
import_ui116.IconButton,
|
|
9860
10276
|
{
|
|
9861
10277
|
size: "tiny",
|
|
9862
10278
|
"aria-label": ARIA_LABEL,
|
|
@@ -9868,23 +10284,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
9868
10284
|
borderRadius: 1
|
|
9869
10285
|
}
|
|
9870
10286
|
},
|
|
9871
|
-
/* @__PURE__ */
|
|
10287
|
+
/* @__PURE__ */ React133.createElement(import_icons43.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
9872
10288
|
))
|
|
9873
10289
|
);
|
|
9874
10290
|
});
|
|
9875
10291
|
|
|
9876
10292
|
// src/components/promotions/attributes-control.tsx
|
|
9877
|
-
var
|
|
9878
|
-
var
|
|
9879
|
-
var
|
|
9880
|
-
var
|
|
9881
|
-
var
|
|
9882
|
-
var ARIA_LABEL2 = (0,
|
|
10293
|
+
var React134 = __toESM(require("react"));
|
|
10294
|
+
var import_react80 = require("react");
|
|
10295
|
+
var import_icons44 = require("@elementor/icons");
|
|
10296
|
+
var import_ui117 = require("@elementor/ui");
|
|
10297
|
+
var import_i18n69 = require("@wordpress/i18n");
|
|
10298
|
+
var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
|
|
9883
10299
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
9884
10300
|
var AttributesControl = createControl(() => {
|
|
9885
|
-
const triggerRef = (0,
|
|
9886
|
-
return /* @__PURE__ */
|
|
9887
|
-
|
|
10301
|
+
const triggerRef = (0, import_react80.useRef)(null);
|
|
10302
|
+
return /* @__PURE__ */ React134.createElement(
|
|
10303
|
+
import_ui117.Stack,
|
|
9888
10304
|
{
|
|
9889
10305
|
direction: "row",
|
|
9890
10306
|
spacing: 2,
|
|
@@ -9893,9 +10309,9 @@ var AttributesControl = createControl(() => {
|
|
|
9893
10309
|
alignItems: "center"
|
|
9894
10310
|
}
|
|
9895
10311
|
},
|
|
9896
|
-
/* @__PURE__ */
|
|
9897
|
-
/* @__PURE__ */
|
|
9898
|
-
|
|
10312
|
+
/* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
10313
|
+
/* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
|
|
10314
|
+
import_icons44.PlusIcon,
|
|
9899
10315
|
{
|
|
9900
10316
|
"aria-label": ARIA_LABEL2,
|
|
9901
10317
|
fontSize: "tiny",
|
|
@@ -9908,21 +10324,21 @@ var AttributesControl = createControl(() => {
|
|
|
9908
10324
|
});
|
|
9909
10325
|
|
|
9910
10326
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
9911
|
-
var
|
|
9912
|
-
var
|
|
9913
|
-
var
|
|
9914
|
-
var CustomIconButton = (0,
|
|
10327
|
+
var React135 = __toESM(require("react"));
|
|
10328
|
+
var import_icons45 = require("@elementor/icons");
|
|
10329
|
+
var import_ui118 = require("@elementor/ui");
|
|
10330
|
+
var CustomIconButton = (0, import_ui118.styled)(import_ui118.IconButton)(({ theme }) => ({
|
|
9915
10331
|
width: theme.spacing(2.5),
|
|
9916
10332
|
height: theme.spacing(2.5)
|
|
9917
10333
|
}));
|
|
9918
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
10334
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(import_ui118.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
|
|
9919
10335
|
|
|
9920
10336
|
// src/components/repeater/repeater.tsx
|
|
9921
|
-
var
|
|
9922
|
-
var
|
|
9923
|
-
var
|
|
9924
|
-
var
|
|
9925
|
-
var
|
|
10337
|
+
var React136 = __toESM(require("react"));
|
|
10338
|
+
var import_react81 = require("react");
|
|
10339
|
+
var import_icons46 = require("@elementor/icons");
|
|
10340
|
+
var import_ui119 = require("@elementor/ui");
|
|
10341
|
+
var import_i18n70 = require("@wordpress/i18n");
|
|
9926
10342
|
var SIZE12 = "tiny";
|
|
9927
10343
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
9928
10344
|
var Repeater3 = ({
|
|
@@ -9941,7 +10357,7 @@ var Repeater3 = ({
|
|
|
9941
10357
|
isSortable = true,
|
|
9942
10358
|
adornment = ControlAdornments
|
|
9943
10359
|
}) => {
|
|
9944
|
-
const [openItem, setOpenItem] = (0,
|
|
10360
|
+
const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
|
|
9945
10361
|
const uniqueKeys = items2.map(
|
|
9946
10362
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
9947
10363
|
);
|
|
@@ -10004,8 +10420,8 @@ var Repeater3 = ({
|
|
|
10004
10420
|
};
|
|
10005
10421
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
10006
10422
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
10007
|
-
const addButton = /* @__PURE__ */
|
|
10008
|
-
|
|
10423
|
+
const addButton = /* @__PURE__ */ React136.createElement(
|
|
10424
|
+
import_ui119.IconButton,
|
|
10009
10425
|
{
|
|
10010
10426
|
size: SIZE12,
|
|
10011
10427
|
sx: {
|
|
@@ -10013,32 +10429,32 @@ var Repeater3 = ({
|
|
|
10013
10429
|
},
|
|
10014
10430
|
disabled: isButtonDisabled,
|
|
10015
10431
|
onClick: addRepeaterItem,
|
|
10016
|
-
"aria-label": (0,
|
|
10432
|
+
"aria-label": (0, import_i18n70.__)("Add item", "elementor")
|
|
10017
10433
|
},
|
|
10018
|
-
/* @__PURE__ */
|
|
10434
|
+
/* @__PURE__ */ React136.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
|
|
10019
10435
|
);
|
|
10020
|
-
return /* @__PURE__ */
|
|
10021
|
-
|
|
10436
|
+
return /* @__PURE__ */ React136.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React136.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React136.createElement(
|
|
10437
|
+
import_ui119.Infotip,
|
|
10022
10438
|
{
|
|
10023
10439
|
placement: "right",
|
|
10024
10440
|
content: addButtonInfotipContent,
|
|
10025
10441
|
color: "secondary",
|
|
10026
10442
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
10027
10443
|
},
|
|
10028
|
-
/* @__PURE__ */
|
|
10029
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
10444
|
+
/* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
10445
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React136.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
10030
10446
|
const index = uniqueKeys.indexOf(key);
|
|
10031
10447
|
const value = items2[index];
|
|
10032
10448
|
if (!value) {
|
|
10033
10449
|
return null;
|
|
10034
10450
|
}
|
|
10035
|
-
return /* @__PURE__ */
|
|
10451
|
+
return /* @__PURE__ */ React136.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React136.createElement(
|
|
10036
10452
|
RepeaterItem,
|
|
10037
10453
|
{
|
|
10038
10454
|
disabled,
|
|
10039
10455
|
propDisabled: value?.disabled,
|
|
10040
|
-
label: /* @__PURE__ */
|
|
10041
|
-
startIcon: /* @__PURE__ */
|
|
10456
|
+
label: /* @__PURE__ */ React136.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Label, { value, index })),
|
|
10457
|
+
startIcon: /* @__PURE__ */ React136.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Icon, { value })),
|
|
10042
10458
|
removeItem: () => removeRepeaterItem(index),
|
|
10043
10459
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
10044
10460
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -10052,7 +10468,7 @@ var Repeater3 = ({
|
|
|
10052
10468
|
actions: itemSettings.actions,
|
|
10053
10469
|
value
|
|
10054
10470
|
},
|
|
10055
|
-
(props) => /* @__PURE__ */
|
|
10471
|
+
(props) => /* @__PURE__ */ React136.createElement(
|
|
10056
10472
|
itemSettings.Content,
|
|
10057
10473
|
{
|
|
10058
10474
|
...props,
|
|
@@ -10092,18 +10508,18 @@ var RepeaterItem = ({
|
|
|
10092
10508
|
},
|
|
10093
10509
|
wrappedOnPopoverClose
|
|
10094
10510
|
);
|
|
10095
|
-
const triggerProps = (0,
|
|
10511
|
+
const triggerProps = (0, import_ui119.bindTrigger)(popoverState);
|
|
10096
10512
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
10097
|
-
const duplicateLabel = (0,
|
|
10098
|
-
const toggleLabel = propDisabled ? (0,
|
|
10099
|
-
const removeLabel = (0,
|
|
10100
|
-
return /* @__PURE__ */
|
|
10513
|
+
const duplicateLabel = (0, import_i18n70.__)("Duplicate", "elementor");
|
|
10514
|
+
const toggleLabel = propDisabled ? (0, import_i18n70.__)("Show", "elementor") : (0, import_i18n70.__)("Hide", "elementor");
|
|
10515
|
+
const removeLabel = (0, import_i18n70.__)("Remove", "elementor");
|
|
10516
|
+
return /* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
|
|
10101
10517
|
RepeaterTag,
|
|
10102
10518
|
{
|
|
10103
10519
|
disabled,
|
|
10104
10520
|
label,
|
|
10105
10521
|
ref: setRef,
|
|
10106
|
-
"aria-label": (0,
|
|
10522
|
+
"aria-label": (0, import_i18n70.__)("Open item", "elementor"),
|
|
10107
10523
|
...triggerProps,
|
|
10108
10524
|
onClick: (e) => {
|
|
10109
10525
|
triggerProps.onClick(e);
|
|
@@ -10112,15 +10528,15 @@ var RepeaterItem = ({
|
|
|
10112
10528
|
}
|
|
10113
10529
|
},
|
|
10114
10530
|
startIcon,
|
|
10115
|
-
actions: /* @__PURE__ */
|
|
10531
|
+
actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
|
|
10116
10532
|
}
|
|
10117
|
-
), /* @__PURE__ */
|
|
10533
|
+
), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui119.Box, null, children({ anchorEl: ref }))));
|
|
10118
10534
|
};
|
|
10119
10535
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
10120
|
-
const [ref, setRef] = (0,
|
|
10121
|
-
const popoverState = (0,
|
|
10122
|
-
const popoverProps = (0,
|
|
10123
|
-
(0,
|
|
10536
|
+
const [ref, setRef] = (0, import_react81.useState)(null);
|
|
10537
|
+
const popoverState = (0, import_ui119.usePopupState)({ variant: "popover" });
|
|
10538
|
+
const popoverProps = (0, import_ui119.bindPopover)(popoverState);
|
|
10539
|
+
(0, import_react81.useEffect)(() => {
|
|
10124
10540
|
if (openOnMount && ref) {
|
|
10125
10541
|
popoverState.open(ref);
|
|
10126
10542
|
onOpen?.();
|
|
@@ -10139,8 +10555,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
10139
10555
|
};
|
|
10140
10556
|
|
|
10141
10557
|
// src/components/size/unstable-size-field.tsx
|
|
10142
|
-
var
|
|
10143
|
-
var
|
|
10558
|
+
var React139 = __toESM(require("react"));
|
|
10559
|
+
var import_ui121 = require("@elementor/ui");
|
|
10144
10560
|
|
|
10145
10561
|
// src/hooks/use-size-value.ts
|
|
10146
10562
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -10182,25 +10598,25 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
10182
10598
|
};
|
|
10183
10599
|
|
|
10184
10600
|
// src/components/size/unit-select.tsx
|
|
10185
|
-
var
|
|
10186
|
-
var
|
|
10601
|
+
var React137 = __toESM(require("react"));
|
|
10602
|
+
var import_react82 = require("react");
|
|
10187
10603
|
var import_editor_ui20 = require("@elementor/editor-ui");
|
|
10188
|
-
var
|
|
10604
|
+
var import_ui120 = require("@elementor/ui");
|
|
10189
10605
|
var menuItemContentStyles2 = {
|
|
10190
10606
|
display: "flex",
|
|
10191
10607
|
flexDirection: "column",
|
|
10192
10608
|
justifyContent: "center"
|
|
10193
10609
|
};
|
|
10194
10610
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
10195
|
-
const popupState = (0,
|
|
10611
|
+
const popupState = (0, import_ui120.usePopupState)({
|
|
10196
10612
|
variant: "popover",
|
|
10197
|
-
popupId: (0,
|
|
10613
|
+
popupId: (0, import_react82.useId)()
|
|
10198
10614
|
});
|
|
10199
10615
|
const handleMenuItemClick = (index) => {
|
|
10200
10616
|
onClick(options[index]);
|
|
10201
10617
|
popupState.close();
|
|
10202
10618
|
};
|
|
10203
|
-
return /* @__PURE__ */
|
|
10619
|
+
return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui120.bindTrigger)(popupState) }, value), /* @__PURE__ */ React137.createElement(import_ui120.Menu, { MenuListProps: { dense: true }, ...(0, import_ui120.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
|
|
10204
10620
|
import_editor_ui20.MenuListItem,
|
|
10205
10621
|
{
|
|
10206
10622
|
key: option,
|
|
@@ -10219,7 +10635,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
10219
10635
|
option.toUpperCase()
|
|
10220
10636
|
))));
|
|
10221
10637
|
};
|
|
10222
|
-
var StyledButton3 = (0,
|
|
10638
|
+
var StyledButton3 = (0, import_ui120.styled)(import_ui120.Button, {
|
|
10223
10639
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
10224
10640
|
})(({ isPrimaryColor, theme }) => ({
|
|
10225
10641
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -10229,11 +10645,11 @@ var StyledButton3 = (0, import_ui118.styled)(import_ui118.Button, {
|
|
|
10229
10645
|
}));
|
|
10230
10646
|
|
|
10231
10647
|
// src/components/size/unstable-size-input.tsx
|
|
10232
|
-
var
|
|
10233
|
-
var
|
|
10234
|
-
var UnstableSizeInput = (0,
|
|
10648
|
+
var React138 = __toESM(require("react"));
|
|
10649
|
+
var import_react83 = require("react");
|
|
10650
|
+
var UnstableSizeInput = (0, import_react83.forwardRef)(
|
|
10235
10651
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
10236
|
-
return /* @__PURE__ */
|
|
10652
|
+
return /* @__PURE__ */ React138.createElement(
|
|
10237
10653
|
NumberInput,
|
|
10238
10654
|
{
|
|
10239
10655
|
ref,
|
|
@@ -10271,7 +10687,7 @@ var UnstableSizeField = ({
|
|
|
10271
10687
|
const shouldHighlightUnit2 = () => {
|
|
10272
10688
|
return hasValue(size);
|
|
10273
10689
|
};
|
|
10274
|
-
return /* @__PURE__ */
|
|
10690
|
+
return /* @__PURE__ */ React139.createElement(
|
|
10275
10691
|
UnstableSizeInput,
|
|
10276
10692
|
{
|
|
10277
10693
|
type: "number",
|
|
@@ -10280,8 +10696,8 @@ var UnstableSizeField = ({
|
|
|
10280
10696
|
onChange: (event) => setSize(event.target.value),
|
|
10281
10697
|
InputProps: {
|
|
10282
10698
|
...InputProps,
|
|
10283
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
10284
|
-
endAdornment: /* @__PURE__ */
|
|
10699
|
+
startAdornment: startIcon && /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "start" }, startIcon),
|
|
10700
|
+
endAdornment: /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "end" }, /* @__PURE__ */ React139.createElement(
|
|
10285
10701
|
UnitSelect,
|
|
10286
10702
|
{
|
|
10287
10703
|
options: units2,
|
|
@@ -10299,7 +10715,7 @@ var hasValue = (value) => {
|
|
|
10299
10715
|
};
|
|
10300
10716
|
|
|
10301
10717
|
// src/hooks/use-font-families.ts
|
|
10302
|
-
var
|
|
10718
|
+
var import_react84 = require("react");
|
|
10303
10719
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
10304
10720
|
var getFontControlConfig = () => {
|
|
10305
10721
|
const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
|
|
@@ -10307,7 +10723,7 @@ var getFontControlConfig = () => {
|
|
|
10307
10723
|
};
|
|
10308
10724
|
var useFontFamilies = () => {
|
|
10309
10725
|
const { groups, options } = getFontControlConfig();
|
|
10310
|
-
return (0,
|
|
10726
|
+
return (0, import_react84.useMemo)(() => {
|
|
10311
10727
|
if (!groups || !options) {
|
|
10312
10728
|
return [];
|
|
10313
10729
|
}
|