@elementor/editor-controls 4.4.0-1120 → 4.4.0-1122
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 +640 -641
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +476 -479
- package/dist/index.mjs.map +1 -1
- package/package.json +16 -16
- package/src/controls/icon-library/icon-library-filter.tsx +19 -10
- package/src/controls/icon-library/icon-library-grid.tsx +14 -8
- package/src/controls/icon-library/icon-library-popover.tsx +24 -10
- package/src/controls/icon-library/icon-library-view-toggle.tsx +22 -82
- package/src/controls/icon-library/svg-element-icon.tsx +15 -0
- package/src/controls/svg-media-overlay.tsx +18 -11
package/dist/index.js
CHANGED
|
@@ -510,7 +510,7 @@ function ControlActions({ children }) {
|
|
|
510
510
|
if (items2.length === 0 || disabled) {
|
|
511
511
|
return children;
|
|
512
512
|
}
|
|
513
|
-
const menuItems = items2.map(({ MenuItem:
|
|
513
|
+
const menuItems = items2.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React10.createElement(MenuItem3, { key: id }));
|
|
514
514
|
return /* @__PURE__ */ React10.createElement(import_editor_ui.FloatingActionsBar, { actions: menuItems }, children);
|
|
515
515
|
}
|
|
516
516
|
|
|
@@ -5444,11 +5444,11 @@ var AspectRatioControl = createControl(({ label }) => {
|
|
|
5444
5444
|
});
|
|
5445
5445
|
|
|
5446
5446
|
// src/controls/svg-media-control.tsx
|
|
5447
|
-
var
|
|
5448
|
-
var
|
|
5447
|
+
var React89 = __toESM(require("react"));
|
|
5448
|
+
var import_react53 = require("react");
|
|
5449
5449
|
var import_editor_current_user = require("@elementor/editor-current-user");
|
|
5450
5450
|
var import_editor_props35 = require("@elementor/editor-props");
|
|
5451
|
-
var
|
|
5451
|
+
var import_ui72 = require("@elementor/ui");
|
|
5452
5452
|
var import_wp_media2 = require("@elementor/wp-media");
|
|
5453
5453
|
var import_i18n38 = require("@wordpress/i18n");
|
|
5454
5454
|
|
|
@@ -5518,12 +5518,12 @@ function measureIconLibraryAnchor(container, buttonGroup) {
|
|
|
5518
5518
|
}
|
|
5519
5519
|
|
|
5520
5520
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
5521
|
-
var
|
|
5522
|
-
var
|
|
5521
|
+
var React86 = __toESM(require("react"));
|
|
5522
|
+
var import_react52 = require("react");
|
|
5523
5523
|
var import_editor_ui11 = require("@elementor/editor-ui");
|
|
5524
5524
|
var import_icons23 = require("@elementor/icons");
|
|
5525
5525
|
var import_session2 = require("@elementor/session");
|
|
5526
|
-
var
|
|
5526
|
+
var import_ui69 = require("@elementor/ui");
|
|
5527
5527
|
var import_utils6 = require("@elementor/utils");
|
|
5528
5528
|
var import_i18n35 = require("@wordpress/i18n");
|
|
5529
5529
|
|
|
@@ -6487,21 +6487,22 @@ var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
|
|
|
6487
6487
|
// src/controls/icon-library/icon-library-filter.tsx
|
|
6488
6488
|
var FILTER_MENU_WIDTH = 280;
|
|
6489
6489
|
var FILTER_INDICATOR_SIZE = 6;
|
|
6490
|
-
var
|
|
6490
|
+
var FILTER_INDICATOR_CORNER_OFFSET = -(FILTER_INDICATOR_SIZE / 2);
|
|
6491
6491
|
var FILTER_TYPE_ALL = "all";
|
|
6492
6492
|
var FILTER_TYPE_GROUP = "group";
|
|
6493
6493
|
var FILTER_TYPE_ITEM = "item";
|
|
6494
6494
|
var FILTER_ICONS = {
|
|
6495
|
-
list: import_icons21.
|
|
6495
|
+
list: import_icons21.MenuIcon,
|
|
6496
6496
|
star: import_icons21.StarIcon,
|
|
6497
6497
|
"star-filled": import_icons21.StarFilledIcon,
|
|
6498
|
-
library: import_icons21.LibraryIcon
|
|
6498
|
+
library: import_icons21.LibraryIcon,
|
|
6499
|
+
rosette: import_icons21.RosetteDiscountCheckIcon
|
|
6499
6500
|
};
|
|
6500
6501
|
var DEFAULT_FILTER = [
|
|
6501
6502
|
{ type: FILTER_TYPE_ALL, label: "All icons", icon: "list" },
|
|
6502
6503
|
{ type: FILTER_TYPE_ITEM, value: "fa-regular", label: "Font Awesome - Regular", icon: "star" },
|
|
6503
6504
|
{ type: FILTER_TYPE_ITEM, value: "fa-solid", label: "Font Awesome - Solid", icon: "star-filled" },
|
|
6504
|
-
{ type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "
|
|
6505
|
+
{ type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "rosette" }
|
|
6505
6506
|
];
|
|
6506
6507
|
var IconLibraryFilter = ({ value, onChange }) => {
|
|
6507
6508
|
const popupId = (0, import_react50.useId)();
|
|
@@ -6533,7 +6534,7 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6533
6534
|
value: "filter",
|
|
6534
6535
|
size: "tiny",
|
|
6535
6536
|
selected: popupState.isOpen,
|
|
6536
|
-
sx: { position: "relative", flexShrink: 0 },
|
|
6537
|
+
sx: { position: "relative", flexShrink: 0, overflow: "visible" },
|
|
6537
6538
|
...(0, import_ui65.bindToggle)(popupState),
|
|
6538
6539
|
"aria-expanded": popupState.isOpen
|
|
6539
6540
|
},
|
|
@@ -6545,12 +6546,12 @@ var IconLibraryFilter = ({ value, onChange }) => {
|
|
|
6545
6546
|
"aria-hidden": "true",
|
|
6546
6547
|
sx: {
|
|
6547
6548
|
position: "absolute",
|
|
6548
|
-
insetBlockStart:
|
|
6549
|
-
insetInlineEnd:
|
|
6549
|
+
insetBlockStart: FILTER_INDICATOR_CORNER_OFFSET,
|
|
6550
|
+
insetInlineEnd: FILTER_INDICATOR_CORNER_OFFSET,
|
|
6550
6551
|
width: FILTER_INDICATOR_SIZE,
|
|
6551
6552
|
height: FILTER_INDICATOR_SIZE,
|
|
6552
6553
|
borderRadius: "50%",
|
|
6553
|
-
bgcolor: "
|
|
6554
|
+
bgcolor: "text.primary"
|
|
6554
6555
|
}
|
|
6555
6556
|
}
|
|
6556
6557
|
) : null
|
|
@@ -6658,8 +6659,9 @@ var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
|
|
|
6658
6659
|
var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
|
|
6659
6660
|
var ICON_GLYPH_SIZE = 20;
|
|
6660
6661
|
var GRID_OVERSCAN = 6;
|
|
6661
|
-
var
|
|
6662
|
-
var GRID_HORIZONTAL_PADDING =
|
|
6662
|
+
var GRID_CELL_GAP = 1;
|
|
6663
|
+
var GRID_HORIZONTAL_PADDING = 2;
|
|
6664
|
+
var GRID_VERTICAL_PADDING = 1.5;
|
|
6663
6665
|
var HOME_END_KEYS = /* @__PURE__ */ new Set(["Home", "End"]);
|
|
6664
6666
|
var getGridMetrics = (containerWidth, columnGap, inlinePadding) => {
|
|
6665
6667
|
const availableWidth = containerWidth - inlinePadding;
|
|
@@ -6694,10 +6696,15 @@ var IconLibraryGrid = ({
|
|
|
6694
6696
|
const [focusedIndex, setFocusedIndex] = (0, import_react51.useState)(selectedIndex >= 0 ? selectedIndex : 0);
|
|
6695
6697
|
const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react51.useState)(() => getGridMetrics(0, 0, 0));
|
|
6696
6698
|
const rowCount = Math.ceil(items2.length / columnCount);
|
|
6699
|
+
const cellGap = Number.parseFloat(theme.spacing(GRID_CELL_GAP));
|
|
6700
|
+
const verticalPadding = Number.parseFloat(theme.spacing(GRID_VERTICAL_PADDING));
|
|
6697
6701
|
const virtualizer = (0, import_react_virtual.useVirtualizer)({
|
|
6698
6702
|
count: rowCount,
|
|
6699
6703
|
getScrollElement: () => containerRef.current,
|
|
6700
6704
|
estimateSize: () => cellSize,
|
|
6705
|
+
gap: cellGap,
|
|
6706
|
+
paddingStart: verticalPadding,
|
|
6707
|
+
paddingEnd: verticalPadding,
|
|
6701
6708
|
overscan: GRID_OVERSCAN
|
|
6702
6709
|
});
|
|
6703
6710
|
const focusedItem = items2[focusedIndex];
|
|
@@ -6713,9 +6720,10 @@ var IconLibraryGrid = ({
|
|
|
6713
6720
|
return Math.min(current, items2.length - 1);
|
|
6714
6721
|
});
|
|
6715
6722
|
if (selectedIndex >= 0) {
|
|
6716
|
-
virtualizer.
|
|
6723
|
+
virtualizer.measure();
|
|
6724
|
+
virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
|
|
6717
6725
|
}
|
|
6718
|
-
}, [columnCount, items2, selectedIndex, selectedValue]);
|
|
6726
|
+
}, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
|
|
6719
6727
|
(0, import_react51.useLayoutEffect)(() => {
|
|
6720
6728
|
if (!shouldRestoreFocusRef.current || !focusedItem) {
|
|
6721
6729
|
return;
|
|
@@ -6733,9 +6741,8 @@ var IconLibraryGrid = ({
|
|
|
6733
6741
|
return;
|
|
6734
6742
|
}
|
|
6735
6743
|
const measureGrid = () => {
|
|
6736
|
-
const columnGap = Number.parseFloat(theme.spacing(GRID_COLUMN_GAP));
|
|
6737
6744
|
const inlinePadding = Number.parseFloat(theme.spacing(GRID_HORIZONTAL_PADDING)) * 2;
|
|
6738
|
-
setGridMetrics(getGridMetrics(container.clientWidth,
|
|
6745
|
+
setGridMetrics(getGridMetrics(container.clientWidth, cellGap, inlinePadding));
|
|
6739
6746
|
};
|
|
6740
6747
|
measureGrid();
|
|
6741
6748
|
const resizeObserver = new ResizeObserver(measureGrid);
|
|
@@ -6743,7 +6750,7 @@ var IconLibraryGrid = ({
|
|
|
6743
6750
|
return () => {
|
|
6744
6751
|
resizeObserver.disconnect();
|
|
6745
6752
|
};
|
|
6746
|
-
}, [theme, items2.length]);
|
|
6753
|
+
}, [theme, cellGap, items2.length]);
|
|
6747
6754
|
(0, import_react51.useLayoutEffect)(() => {
|
|
6748
6755
|
virtualizer.measure();
|
|
6749
6756
|
}, [cellSize, columnCount]);
|
|
@@ -6840,7 +6847,7 @@ var IconLibraryGrid = ({
|
|
|
6840
6847
|
transform: `translateY(${virtualRow.start}px)`,
|
|
6841
6848
|
display: "grid",
|
|
6842
6849
|
gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
|
|
6843
|
-
gap:
|
|
6850
|
+
gap: GRID_CELL_GAP,
|
|
6844
6851
|
px: GRID_HORIZONTAL_PADDING,
|
|
6845
6852
|
boxSizing: "border-box"
|
|
6846
6853
|
}
|
|
@@ -6941,21 +6948,17 @@ var IconLibraryGrid = ({
|
|
|
6941
6948
|
|
|
6942
6949
|
// src/controls/icon-library/icon-library-view-toggle.tsx
|
|
6943
6950
|
var React84 = __toESM(require("react"));
|
|
6944
|
-
var import_react52 = require("react");
|
|
6945
6951
|
var import_icons22 = require("@elementor/icons");
|
|
6946
6952
|
var import_ui67 = require("@elementor/ui");
|
|
6947
6953
|
var import_i18n34 = require("@wordpress/i18n");
|
|
6948
|
-
var
|
|
6954
|
+
var HEADER_ACTION_GAP = 0.5;
|
|
6949
6955
|
var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
6950
|
-
const popupId = (0, import_react52.useId)();
|
|
6951
|
-
const popupState = (0, import_ui67.usePopupState)({
|
|
6952
|
-
variant: "popover",
|
|
6953
|
-
popupId
|
|
6954
|
-
});
|
|
6955
6956
|
const isGrid = value === "grid";
|
|
6957
|
+
const nextView = isGrid ? "list" : "grid";
|
|
6956
6958
|
const ViewIcon = isGrid ? import_icons22.WidgetsIcon : import_icons22.ListIcon;
|
|
6957
6959
|
const viewButtonLabel = isGrid ? (0, import_i18n34.__)("Grid view", "elementor") : (0, import_i18n34.__)("List view", "elementor");
|
|
6958
|
-
|
|
6960
|
+
const viewButtonAction = isGrid ? (0, import_i18n34.__)("Switch to list view", "elementor") : (0, import_i18n34.__)("Switch to grid view", "elementor");
|
|
6961
|
+
return /* @__PURE__ */ React84.createElement(
|
|
6959
6962
|
import_ui67.Tooltip,
|
|
6960
6963
|
{
|
|
6961
6964
|
title: viewButtonLabel,
|
|
@@ -6965,54 +6968,25 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
|
|
|
6965
6968
|
disableInteractive: true
|
|
6966
6969
|
},
|
|
6967
6970
|
/* @__PURE__ */ React84.createElement(
|
|
6968
|
-
import_ui67.
|
|
6971
|
+
import_ui67.IconButton,
|
|
6969
6972
|
{
|
|
6970
|
-
"aria-label":
|
|
6971
|
-
value: "view",
|
|
6973
|
+
"aria-label": viewButtonAction,
|
|
6972
6974
|
size: "tiny",
|
|
6973
|
-
|
|
6974
|
-
sx: { flexShrink: 0 }
|
|
6975
|
-
...(0, import_ui67.bindToggle)(popupState),
|
|
6976
|
-
"aria-expanded": popupState.isOpen
|
|
6975
|
+
onClick: () => onChange(nextView),
|
|
6976
|
+
sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
|
|
6977
6977
|
},
|
|
6978
6978
|
/* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
|
|
6979
6979
|
)
|
|
6980
|
-
)
|
|
6981
|
-
import_ui67.Menu,
|
|
6982
|
-
{
|
|
6983
|
-
...(0, import_ui67.bindMenu)(popupState),
|
|
6984
|
-
MenuListProps: {
|
|
6985
|
-
dense: true,
|
|
6986
|
-
autoFocusItem: true,
|
|
6987
|
-
"aria-label": (0, import_i18n34.__)("View", "elementor")
|
|
6988
|
-
},
|
|
6989
|
-
sx: { "& .MuiPaper-root": { minWidth: VIEW_MENU_WIDTH } }
|
|
6990
|
-
},
|
|
6991
|
-
/* @__PURE__ */ React84.createElement(
|
|
6992
|
-
ViewMenuItem,
|
|
6993
|
-
{
|
|
6994
|
-
label: (0, import_i18n34.__)("List", "elementor"),
|
|
6995
|
-
selected: value === "list",
|
|
6996
|
-
onClick: () => {
|
|
6997
|
-
onChange("list");
|
|
6998
|
-
popupState.close();
|
|
6999
|
-
}
|
|
7000
|
-
}
|
|
7001
|
-
),
|
|
7002
|
-
/* @__PURE__ */ React84.createElement(
|
|
7003
|
-
ViewMenuItem,
|
|
7004
|
-
{
|
|
7005
|
-
label: (0, import_i18n34.__)("Grid", "elementor"),
|
|
7006
|
-
selected: value === "grid",
|
|
7007
|
-
onClick: () => {
|
|
7008
|
-
onChange("grid");
|
|
7009
|
-
popupState.close();
|
|
7010
|
-
}
|
|
7011
|
-
}
|
|
7012
|
-
)
|
|
7013
|
-
));
|
|
6980
|
+
);
|
|
7014
6981
|
};
|
|
7015
|
-
|
|
6982
|
+
|
|
6983
|
+
// src/controls/icon-library/svg-element-icon.tsx
|
|
6984
|
+
var React85 = __toESM(require("react"));
|
|
6985
|
+
var import_ui68 = require("@elementor/ui");
|
|
6986
|
+
var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
|
|
6987
|
+
var SvgElementIcon = React85.forwardRef(
|
|
6988
|
+
(props, ref) => /* @__PURE__ */ React85.createElement(import_ui68.SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React85.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React85.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
|
|
6989
|
+
);
|
|
7016
6990
|
|
|
7017
6991
|
// src/controls/icon-library/use-font-awesome-7-catalog.ts
|
|
7018
6992
|
var import_query3 = require("@elementor/query");
|
|
@@ -7028,20 +7002,24 @@ function useFontAwesome7Catalog(enabled) {
|
|
|
7028
7002
|
|
|
7029
7003
|
// src/controls/icon-library/icon-library-popover.tsx
|
|
7030
7004
|
var ICON_LIBRARY_POPOVER_WIDTH = 300;
|
|
7031
|
-
var ICON_LIBRARY_ROW_HEIGHT = 48;
|
|
7032
7005
|
var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
|
|
7033
7006
|
var ICON_LIBRARY_VIEW_STORAGE_KEY = "icon-library-view";
|
|
7034
7007
|
var ICON_LIBRARY_VIEW_STORAGE_PREFIX = "editor-controls";
|
|
7035
|
-
var DEFAULT_ICON_LIBRARY_VIEW = "
|
|
7008
|
+
var DEFAULT_ICON_LIBRARY_VIEW = "grid";
|
|
7036
7009
|
var isIconLibraryView = (value) => {
|
|
7037
7010
|
return value === "grid" || value === "list";
|
|
7038
7011
|
};
|
|
7039
7012
|
var ICON_TILE_SIZE = 40;
|
|
7013
|
+
var ICON_LIBRARY_ROW_VERTICAL_PADDING = 0.5;
|
|
7014
|
+
var ICON_LIBRARY_ROW_VERTICAL_PADDING_PX = 4;
|
|
7015
|
+
var ICON_LIBRARY_ROW_HEIGHT = ICON_TILE_SIZE + ICON_LIBRARY_ROW_VERTICAL_PADDING_PX * 2;
|
|
7040
7016
|
var ICON_GLYPH_SIZE2 = 20;
|
|
7041
|
-
var ICON_LIBRARY_INLINE_SPACING =
|
|
7042
|
-
var
|
|
7017
|
+
var ICON_LIBRARY_INLINE_SPACING = 2;
|
|
7018
|
+
var ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
|
|
7019
|
+
var ICON_LIBRARY_TITLE_SIZE = "14px";
|
|
7020
|
+
var CompactIconLibraryMenuList = (0, import_ui69.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
|
|
7043
7021
|
'& > [role="option"]': {
|
|
7044
|
-
padding: theme.spacing(
|
|
7022
|
+
padding: theme.spacing(ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING)
|
|
7045
7023
|
}
|
|
7046
7024
|
}));
|
|
7047
7025
|
var IconLibraryPopover = ({
|
|
@@ -7058,7 +7036,7 @@ var IconLibraryPopover = ({
|
|
|
7058
7036
|
handleChange: handleSearchChange,
|
|
7059
7037
|
setImmediateValue: setSearchValue
|
|
7060
7038
|
} = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
|
|
7061
|
-
const [activeLibraries, setActiveLibraries] = (0,
|
|
7039
|
+
const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
|
|
7062
7040
|
const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
|
|
7063
7041
|
ICON_LIBRARY_VIEW_STORAGE_KEY,
|
|
7064
7042
|
ICON_LIBRARY_VIEW_STORAGE_PREFIX
|
|
@@ -7067,12 +7045,12 @@ var IconLibraryPopover = ({
|
|
|
7067
7045
|
const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
|
|
7068
7046
|
const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries(open);
|
|
7069
7047
|
const isLoading = isFontAwesomeLoading || isCustomLoading;
|
|
7070
|
-
const icons = (0,
|
|
7071
|
-
const items2 = (0,
|
|
7048
|
+
const icons = (0, import_react52.useMemo)(() => [...fontAwesomeIcons, ...customIcons], [customIcons, fontAwesomeIcons]);
|
|
7049
|
+
const items2 = (0, import_react52.useMemo)(
|
|
7072
7050
|
() => createIconLibraryItems(icons, searchValue, activeLibraries),
|
|
7073
7051
|
[activeLibraries, icons, searchValue]
|
|
7074
7052
|
);
|
|
7075
|
-
const selectedValue = (0,
|
|
7053
|
+
const selectedValue = (0, import_react52.useMemo)(
|
|
7076
7054
|
() => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
|
|
7077
7055
|
[icons, selectedIconClass, selectedIconLibrary]
|
|
7078
7056
|
);
|
|
@@ -7094,25 +7072,39 @@ var IconLibraryPopover = ({
|
|
|
7094
7072
|
const handleClearSearch = () => {
|
|
7095
7073
|
setSearchValue("");
|
|
7096
7074
|
};
|
|
7097
|
-
return /* @__PURE__ */
|
|
7075
|
+
return /* @__PURE__ */ React86.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React86.createElement(
|
|
7098
7076
|
import_editor_ui11.PopoverHeader,
|
|
7099
7077
|
{
|
|
7100
7078
|
title: (0, import_i18n35.__)("Icon library", "elementor"),
|
|
7101
7079
|
onClose: handleClose,
|
|
7102
|
-
icon: /* @__PURE__ */
|
|
7103
|
-
actions: [/* @__PURE__ */
|
|
7104
|
-
sx: {
|
|
7080
|
+
icon: /* @__PURE__ */ React86.createElement(import_icons23.LibraryIcon, { fontSize: "tiny" }),
|
|
7081
|
+
actions: [/* @__PURE__ */ React86.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
|
|
7082
|
+
sx: {
|
|
7083
|
+
pl: ICON_LIBRARY_INLINE_SPACING,
|
|
7084
|
+
pr: 1,
|
|
7085
|
+
"& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
|
|
7086
|
+
}
|
|
7105
7087
|
}
|
|
7106
|
-
), /* @__PURE__ */
|
|
7107
|
-
|
|
7088
|
+
), /* @__PURE__ */ React86.createElement(
|
|
7089
|
+
import_ui69.Stack,
|
|
7108
7090
|
{
|
|
7109
|
-
|
|
7110
|
-
|
|
7111
|
-
|
|
7112
|
-
|
|
7113
|
-
|
|
7114
|
-
|
|
7115
|
-
|
|
7091
|
+
direction: "row",
|
|
7092
|
+
alignItems: "center",
|
|
7093
|
+
gap: 1,
|
|
7094
|
+
sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
|
|
7095
|
+
},
|
|
7096
|
+
/* @__PURE__ */ React86.createElement(
|
|
7097
|
+
import_editor_ui11.SearchField,
|
|
7098
|
+
{
|
|
7099
|
+
value: searchInputValue,
|
|
7100
|
+
onSearch: handleSearchChange,
|
|
7101
|
+
placeholder: (0, import_i18n35.__)("Search", "elementor"),
|
|
7102
|
+
id: "icon-library-search",
|
|
7103
|
+
sx: { flex: 1, px: 0, pb: 0 }
|
|
7104
|
+
}
|
|
7105
|
+
),
|
|
7106
|
+
/* @__PURE__ */ React86.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
|
|
7107
|
+
), /* @__PURE__ */ React86.createElement(import_ui69.Divider, null), /* @__PURE__ */ React86.createElement(import_ui69.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React86.createElement(
|
|
7116
7108
|
IconLibraryContent,
|
|
7117
7109
|
{
|
|
7118
7110
|
isLoading,
|
|
@@ -7139,9 +7131,9 @@ var IconLibraryContent = ({
|
|
|
7139
7131
|
onClearSearch
|
|
7140
7132
|
}) => {
|
|
7141
7133
|
if (isLoading) {
|
|
7142
|
-
return /* @__PURE__ */
|
|
7134
|
+
return /* @__PURE__ */ React86.createElement(IconLibraryLoadingState, null);
|
|
7143
7135
|
}
|
|
7144
|
-
const emptyState = /* @__PURE__ */
|
|
7136
|
+
const emptyState = /* @__PURE__ */ React86.createElement(
|
|
7145
7137
|
IconLibraryEmptyState,
|
|
7146
7138
|
{
|
|
7147
7139
|
searchValue,
|
|
@@ -7150,7 +7142,7 @@ var IconLibraryContent = ({
|
|
|
7150
7142
|
}
|
|
7151
7143
|
);
|
|
7152
7144
|
if (view === "grid") {
|
|
7153
|
-
return /* @__PURE__ */
|
|
7145
|
+
return /* @__PURE__ */ React86.createElement(import_ui69.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React86.createElement(
|
|
7154
7146
|
IconLibraryGrid,
|
|
7155
7147
|
{
|
|
7156
7148
|
items: items2,
|
|
@@ -7161,7 +7153,7 @@ var IconLibraryContent = ({
|
|
|
7161
7153
|
}
|
|
7162
7154
|
));
|
|
7163
7155
|
}
|
|
7164
|
-
return /* @__PURE__ */
|
|
7156
|
+
return /* @__PURE__ */ React86.createElement(
|
|
7165
7157
|
import_editor_ui11.PopoverMenuList,
|
|
7166
7158
|
{
|
|
7167
7159
|
items: items2,
|
|
@@ -7176,21 +7168,21 @@ var IconLibraryContent = ({
|
|
|
7176
7168
|
}
|
|
7177
7169
|
);
|
|
7178
7170
|
};
|
|
7179
|
-
var IconLibraryLoadingState = () => /* @__PURE__ */
|
|
7171
|
+
var IconLibraryLoadingState = () => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React86.createElement(import_ui69.CircularProgress, { role: "progressbar", size: 24 }));
|
|
7180
7172
|
var IconLibraryEmptyState = ({
|
|
7181
7173
|
searchValue,
|
|
7182
7174
|
isCatalogAvailable,
|
|
7183
7175
|
onClear
|
|
7184
7176
|
}) => {
|
|
7185
7177
|
if (!isCatalogAvailable) {
|
|
7186
|
-
return /* @__PURE__ */
|
|
7178
|
+
return /* @__PURE__ */ React86.createElement(CatalogUnavailable, null);
|
|
7187
7179
|
}
|
|
7188
|
-
return /* @__PURE__ */
|
|
7180
|
+
return /* @__PURE__ */ React86.createElement(NoResults, { searchValue, onClear });
|
|
7189
7181
|
};
|
|
7190
7182
|
var IconLibraryRow = (item) => {
|
|
7191
7183
|
const icon = item;
|
|
7192
|
-
return /* @__PURE__ */
|
|
7193
|
-
|
|
7184
|
+
return /* @__PURE__ */ React86.createElement(import_ui69.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(
|
|
7185
|
+
import_ui69.Box,
|
|
7194
7186
|
{
|
|
7195
7187
|
sx: {
|
|
7196
7188
|
width: ICON_TILE_SIZE,
|
|
@@ -7205,11 +7197,11 @@ var IconLibraryRow = (item) => {
|
|
|
7205
7197
|
flexShrink: 0
|
|
7206
7198
|
}
|
|
7207
7199
|
},
|
|
7208
|
-
/* @__PURE__ */
|
|
7209
|
-
), /* @__PURE__ */
|
|
7200
|
+
/* @__PURE__ */ React86.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
|
|
7201
|
+
), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
|
|
7210
7202
|
};
|
|
7211
|
-
var CatalogUnavailable = () => /* @__PURE__ */
|
|
7212
|
-
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */
|
|
7203
|
+
var CatalogUnavailable = () => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
|
|
7204
|
+
var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(import_ui69.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React86.createElement(import_ui69.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
|
|
7213
7205
|
var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
|
|
7214
7206
|
...icon,
|
|
7215
7207
|
type: "item",
|
|
@@ -7217,32 +7209,39 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
|
|
|
7217
7209
|
}));
|
|
7218
7210
|
|
|
7219
7211
|
// src/controls/svg-media-overlay.tsx
|
|
7220
|
-
var
|
|
7212
|
+
var React87 = __toESM(require("react"));
|
|
7221
7213
|
var import_icons24 = require("@elementor/icons");
|
|
7222
|
-
var
|
|
7214
|
+
var import_ui70 = require("@elementor/ui");
|
|
7223
7215
|
var import_i18n36 = require("@wordpress/i18n");
|
|
7224
7216
|
var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
|
|
7225
7217
|
var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
|
|
7226
|
-
var
|
|
7227
|
-
var
|
|
7218
|
+
var SELECT_AREA_WIDTH = 72;
|
|
7219
|
+
var UPLOAD_AREA_WIDTH = 48;
|
|
7220
|
+
var SPLIT_BUTTON_MIN_HEIGHT = 32;
|
|
7221
|
+
var SPLIT_BUTTON_CORNER_RADIUS = "8px";
|
|
7222
|
+
var SPLIT_BUTTON_FONT_SIZE = "14px";
|
|
7228
7223
|
var ICON_LIBRARY_PADDING = 0.625;
|
|
7229
7224
|
var svgButtonSx = {
|
|
7230
|
-
|
|
7231
|
-
|
|
7232
|
-
|
|
7233
|
-
|
|
7225
|
+
minWidth: 0,
|
|
7226
|
+
minHeight: SPLIT_BUTTON_MIN_HEIGHT,
|
|
7227
|
+
px: 2,
|
|
7228
|
+
fontSize: SPLIT_BUTTON_FONT_SIZE,
|
|
7229
|
+
fontWeight: 500,
|
|
7230
|
+
lineHeight: 1
|
|
7231
|
+
};
|
|
7232
|
+
var MediaActionGroup = (0, import_ui70.styled)(import_ui70.Stack)({
|
|
7234
7233
|
display: "inline-flex",
|
|
7235
7234
|
flexDirection: "row",
|
|
7236
7235
|
alignItems: "stretch",
|
|
7237
7236
|
border: "1px solid currentColor",
|
|
7238
|
-
borderRadius:
|
|
7237
|
+
borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
|
|
7239
7238
|
overflow: "hidden",
|
|
7240
7239
|
"& .MuiButton-root": {
|
|
7241
7240
|
border: "none",
|
|
7242
7241
|
borderRadius: 0,
|
|
7243
7242
|
lineHeight: 1
|
|
7244
7243
|
}
|
|
7245
|
-
})
|
|
7244
|
+
});
|
|
7246
7245
|
var SvgMediaOverlay = ({
|
|
7247
7246
|
isAdmin,
|
|
7248
7247
|
showIconLibrary,
|
|
@@ -7252,19 +7251,19 @@ var SvgMediaOverlay = ({
|
|
|
7252
7251
|
onOpenIconLibrary,
|
|
7253
7252
|
infotipTitle,
|
|
7254
7253
|
infotipDescription
|
|
7255
|
-
}) => /* @__PURE__ */
|
|
7256
|
-
|
|
7254
|
+
}) => /* @__PURE__ */ React87.createElement(import_ui70.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React87.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React87.createElement(
|
|
7255
|
+
import_ui70.Button,
|
|
7257
7256
|
{
|
|
7258
7257
|
size: "tiny",
|
|
7259
7258
|
color: "inherit",
|
|
7260
7259
|
variant: "text",
|
|
7261
7260
|
onClick: onSelectSvg,
|
|
7262
7261
|
"aria-label": (0, import_i18n36.__)("Select", "elementor"),
|
|
7263
|
-
sx: svgButtonSx
|
|
7262
|
+
sx: { ...svgButtonSx, minWidth: SELECT_AREA_WIDTH }
|
|
7264
7263
|
},
|
|
7265
7264
|
(0, import_i18n36.__)("Select", "elementor")
|
|
7266
|
-
), /* @__PURE__ */
|
|
7267
|
-
|
|
7265
|
+
), /* @__PURE__ */ React87.createElement(
|
|
7266
|
+
import_ui70.Box,
|
|
7268
7267
|
{
|
|
7269
7268
|
sx: {
|
|
7270
7269
|
width: "1px",
|
|
@@ -7273,21 +7272,21 @@ var SvgMediaOverlay = ({
|
|
|
7273
7272
|
flexShrink: 0
|
|
7274
7273
|
}
|
|
7275
7274
|
}
|
|
7276
|
-
), /* @__PURE__ */
|
|
7275
|
+
), /* @__PURE__ */ React87.createElement(
|
|
7277
7276
|
ConditionalControlInfotip,
|
|
7278
7277
|
{
|
|
7279
7278
|
title: infotipTitle,
|
|
7280
7279
|
description: infotipDescription,
|
|
7281
7280
|
isEnabled: !isAdmin
|
|
7282
7281
|
},
|
|
7283
|
-
/* @__PURE__ */
|
|
7284
|
-
)), showIconLibrary ? /* @__PURE__ */
|
|
7285
|
-
|
|
7282
|
+
/* @__PURE__ */ React87.createElement(import_ui70.Box, { component: "span", sx: { display: "flex", width: UPLOAD_AREA_WIDTH } }, /* @__PURE__ */ React87.createElement(UploadControl, { isAdmin, onUpload }))
|
|
7283
|
+
)), showIconLibrary ? /* @__PURE__ */ React87.createElement(
|
|
7284
|
+
import_ui70.Button,
|
|
7286
7285
|
{
|
|
7287
7286
|
size: "tiny",
|
|
7288
7287
|
color: "inherit",
|
|
7289
7288
|
variant: "text",
|
|
7290
|
-
startIcon: /* @__PURE__ */
|
|
7289
|
+
startIcon: /* @__PURE__ */ React87.createElement(import_icons24.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
|
|
7291
7290
|
"aria-label": (0, import_i18n36.__)("Icon library", "elementor"),
|
|
7292
7291
|
onClick: onOpenIconLibrary,
|
|
7293
7292
|
sx: {
|
|
@@ -7296,22 +7295,22 @@ var SvgMediaOverlay = ({
|
|
|
7296
7295
|
".MuiButton-icon": { ml: 0 }
|
|
7297
7296
|
}
|
|
7298
7297
|
},
|
|
7299
|
-
/* @__PURE__ */
|
|
7298
|
+
/* @__PURE__ */ React87.createElement(import_ui70.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
|
|
7300
7299
|
) : null);
|
|
7301
7300
|
var UploadControl = ({ isAdmin, onUpload }) => {
|
|
7302
7301
|
if (isAdmin) {
|
|
7303
|
-
return /* @__PURE__ */
|
|
7302
|
+
return /* @__PURE__ */ React87.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
|
|
7304
7303
|
}
|
|
7305
|
-
return /* @__PURE__ */
|
|
7304
|
+
return /* @__PURE__ */ React87.createElement(import_ui70.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React87.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
|
|
7306
7305
|
};
|
|
7307
7306
|
var UploadButton = ({
|
|
7308
7307
|
disabled = false,
|
|
7309
7308
|
sx,
|
|
7310
7309
|
onClick
|
|
7311
|
-
}) => /* @__PURE__ */
|
|
7312
|
-
|
|
7310
|
+
}) => /* @__PURE__ */ React87.createElement(
|
|
7311
|
+
import_ui70.Button,
|
|
7313
7312
|
{
|
|
7314
|
-
sx,
|
|
7313
|
+
sx: { ...sx, width: "100%" },
|
|
7315
7314
|
size: "tiny",
|
|
7316
7315
|
color: "inherit",
|
|
7317
7316
|
variant: "text",
|
|
@@ -7319,12 +7318,12 @@ var UploadButton = ({
|
|
|
7319
7318
|
onClick,
|
|
7320
7319
|
"aria-label": (0, import_i18n36.__)("Upload", "elementor")
|
|
7321
7320
|
},
|
|
7322
|
-
/* @__PURE__ */
|
|
7321
|
+
/* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, { fontSize: "small" })
|
|
7323
7322
|
);
|
|
7324
7323
|
|
|
7325
7324
|
// src/controls/svg-media-preview.tsx
|
|
7326
|
-
var
|
|
7327
|
-
var
|
|
7325
|
+
var React88 = __toESM(require("react"));
|
|
7326
|
+
var import_ui71 = require("@elementor/ui");
|
|
7328
7327
|
var import_i18n37 = require("@wordpress/i18n");
|
|
7329
7328
|
var ICON_PREVIEW_SIZE = 50;
|
|
7330
7329
|
var ICON_PREVIEW_COLOR = "#000000";
|
|
@@ -7336,17 +7335,17 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
|
|
|
7336
7335
|
const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
|
|
7337
7336
|
const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
|
|
7338
7337
|
if (isFetching || isLoadingCatalog) {
|
|
7339
|
-
return /* @__PURE__ */
|
|
7338
|
+
return /* @__PURE__ */ React88.createElement(import_ui71.CircularProgress, { role: "progressbar" });
|
|
7340
7339
|
}
|
|
7341
7340
|
if (selectedIcon) {
|
|
7342
|
-
return /* @__PURE__ */
|
|
7341
|
+
return /* @__PURE__ */ React88.createElement(IconPreview, { icon: selectedIcon });
|
|
7343
7342
|
}
|
|
7344
7343
|
if (shouldLoadIconCatalog) {
|
|
7345
|
-
return /* @__PURE__ */
|
|
7344
|
+
return /* @__PURE__ */ React88.createElement(IconPreviewPlaceholder, null);
|
|
7346
7345
|
}
|
|
7347
|
-
return /* @__PURE__ */
|
|
7346
|
+
return /* @__PURE__ */ React88.createElement(SvgPreview, { src });
|
|
7348
7347
|
};
|
|
7349
|
-
var IconPreview = ({ icon }) => /* @__PURE__ */
|
|
7348
|
+
var IconPreview = ({ icon }) => /* @__PURE__ */ React88.createElement(import_ui71.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React88.createElement(
|
|
7350
7349
|
FontAwesomeGlyph,
|
|
7351
7350
|
{
|
|
7352
7351
|
icon,
|
|
@@ -7355,8 +7354,8 @@ var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui7
|
|
|
7355
7354
|
label: (0, import_i18n37.__)("Preview icon", "elementor")
|
|
7356
7355
|
}
|
|
7357
7356
|
));
|
|
7358
|
-
var IconPreviewPlaceholder = () => /* @__PURE__ */
|
|
7359
|
-
|
|
7357
|
+
var IconPreviewPlaceholder = () => /* @__PURE__ */ React88.createElement(
|
|
7358
|
+
import_ui71.Box,
|
|
7360
7359
|
{
|
|
7361
7360
|
"aria-hidden": true,
|
|
7362
7361
|
sx: {
|
|
@@ -7366,8 +7365,8 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
|
|
|
7366
7365
|
}
|
|
7367
7366
|
}
|
|
7368
7367
|
);
|
|
7369
|
-
var SvgPreview = ({ src }) => /* @__PURE__ */
|
|
7370
|
-
|
|
7368
|
+
var SvgPreview = ({ src }) => /* @__PURE__ */ React88.createElement(
|
|
7369
|
+
import_ui71.CardMedia,
|
|
7371
7370
|
{
|
|
7372
7371
|
component: "img",
|
|
7373
7372
|
image: src,
|
|
@@ -7381,7 +7380,7 @@ var TILE_SIZE = 8;
|
|
|
7381
7380
|
var TILE_WHITE = "transparent";
|
|
7382
7381
|
var TILE_BLACK = "#c1c1c1";
|
|
7383
7382
|
var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
|
|
7384
|
-
var StyledCard = (0,
|
|
7383
|
+
var StyledCard = (0, import_ui72.styled)(import_ui72.Card)`
|
|
7385
7384
|
position: relative;
|
|
7386
7385
|
background-color: white;
|
|
7387
7386
|
background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
|
|
@@ -7392,7 +7391,7 @@ var StyledCard = (0, import_ui71.styled)(import_ui71.Card)`
|
|
|
7392
7391
|
border: none;
|
|
7393
7392
|
`;
|
|
7394
7393
|
var PREVIEW_ICON_COLOR = "#000000";
|
|
7395
|
-
var StyledCardMediaContainer = (0,
|
|
7394
|
+
var StyledCardMediaContainer = (0, import_ui72.styled)(import_ui72.Stack)`
|
|
7396
7395
|
position: relative;
|
|
7397
7396
|
height: 140px;
|
|
7398
7397
|
object-fit: contain;
|
|
@@ -7412,11 +7411,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7412
7411
|
const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
|
|
7413
7412
|
const src = attachment?.url ?? url?.value ?? null;
|
|
7414
7413
|
const { data: allowSvgUpload } = useUnfilteredFilesUpload();
|
|
7415
|
-
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0,
|
|
7416
|
-
const iconLibraryPopoverState = (0,
|
|
7417
|
-
const controlContainerRef = (0,
|
|
7418
|
-
const buttonGroupRef = (0,
|
|
7419
|
-
const [iconLibraryAnchor, setIconLibraryAnchor] = (0,
|
|
7414
|
+
const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react53.useState)(false);
|
|
7415
|
+
const iconLibraryPopoverState = (0, import_ui72.usePopupState)({ variant: "popover" });
|
|
7416
|
+
const controlContainerRef = (0, import_react53.useRef)(null);
|
|
7417
|
+
const buttonGroupRef = (0, import_react53.useRef)(null);
|
|
7418
|
+
const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
|
|
7420
7419
|
const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
|
|
7421
7420
|
const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
|
|
7422
7421
|
const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
|
|
@@ -7468,7 +7467,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7468
7467
|
setIconLibraryAnchor(anchor);
|
|
7469
7468
|
iconLibraryPopoverState.open(event);
|
|
7470
7469
|
};
|
|
7471
|
-
(0,
|
|
7470
|
+
(0, import_react53.useEffect)(() => {
|
|
7472
7471
|
if (!iconLibraryPopoverState.isOpen) {
|
|
7473
7472
|
return;
|
|
7474
7473
|
}
|
|
@@ -7484,8 +7483,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7484
7483
|
};
|
|
7485
7484
|
}, [iconLibraryPopoverState.isOpen]);
|
|
7486
7485
|
const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
|
|
7487
|
-
return /* @__PURE__ */
|
|
7488
|
-
|
|
7486
|
+
return /* @__PURE__ */ React89.createElement(import_ui72.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React89.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React89.createElement(
|
|
7487
|
+
import_ui72.Popover,
|
|
7489
7488
|
{
|
|
7490
7489
|
disableScrollLock: true,
|
|
7491
7490
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7504,7 +7503,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7504
7503
|
}
|
|
7505
7504
|
}
|
|
7506
7505
|
},
|
|
7507
|
-
/* @__PURE__ */
|
|
7506
|
+
/* @__PURE__ */ React89.createElement(
|
|
7508
7507
|
IconLibraryPopover,
|
|
7509
7508
|
{
|
|
7510
7509
|
open: iconLibraryPopoverState.isOpen,
|
|
@@ -7515,14 +7514,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7515
7514
|
width: iconLibraryWidth
|
|
7516
7515
|
}
|
|
7517
7516
|
)
|
|
7518
|
-
) : null, /* @__PURE__ */
|
|
7519
|
-
|
|
7517
|
+
) : null, /* @__PURE__ */ React89.createElement(
|
|
7518
|
+
import_ui72.Box,
|
|
7520
7519
|
{
|
|
7521
7520
|
ref: controlContainerRef,
|
|
7522
7521
|
"data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
|
|
7523
7522
|
sx: { width: "100%" }
|
|
7524
7523
|
},
|
|
7525
|
-
/* @__PURE__ */
|
|
7524
|
+
/* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React89.createElement(
|
|
7526
7525
|
SvgMediaPreview,
|
|
7527
7526
|
{
|
|
7528
7527
|
isFetching,
|
|
@@ -7530,8 +7529,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7530
7529
|
iconClassName: selectedIconClass,
|
|
7531
7530
|
iconLibrary: selectedIconLibrary
|
|
7532
7531
|
}
|
|
7533
|
-
)), /* @__PURE__ */
|
|
7534
|
-
|
|
7532
|
+
)), /* @__PURE__ */ React89.createElement(
|
|
7533
|
+
import_ui72.CardOverlay,
|
|
7535
7534
|
{
|
|
7536
7535
|
sx: {
|
|
7537
7536
|
"&:hover": {
|
|
@@ -7539,7 +7538,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7539
7538
|
}
|
|
7540
7539
|
}
|
|
7541
7540
|
},
|
|
7542
|
-
/* @__PURE__ */
|
|
7541
|
+
/* @__PURE__ */ React89.createElement(
|
|
7543
7542
|
SvgMediaOverlay,
|
|
7544
7543
|
{
|
|
7545
7544
|
isAdmin,
|
|
@@ -7549,19 +7548,19 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
|
|
|
7549
7548
|
onUpload: handleUpload,
|
|
7550
7549
|
onOpenIconLibrary: handleOpenIconLibrary,
|
|
7551
7550
|
infotipTitle: (0, import_i18n38.__)("Sorry, you can't upload that file yet.", "elementor"),
|
|
7552
|
-
infotipDescription: /* @__PURE__ */
|
|
7551
|
+
infotipDescription: /* @__PURE__ */ React89.createElement(UnfilteredUploadInfotipDescription, null)
|
|
7553
7552
|
}
|
|
7554
7553
|
)
|
|
7555
7554
|
)))
|
|
7556
7555
|
));
|
|
7557
7556
|
});
|
|
7558
|
-
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */
|
|
7557
|
+
var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React89.createElement(React89.Fragment, null, (0, import_i18n38.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React89.createElement("br", null), (0, import_i18n38.__)("file uploads.", "elementor"));
|
|
7559
7558
|
|
|
7560
7559
|
// src/controls/video-media-control.tsx
|
|
7561
|
-
var
|
|
7560
|
+
var React90 = __toESM(require("react"));
|
|
7562
7561
|
var import_editor_props36 = require("@elementor/editor-props");
|
|
7563
7562
|
var import_icons25 = require("@elementor/icons");
|
|
7564
|
-
var
|
|
7563
|
+
var import_ui73 = require("@elementor/ui");
|
|
7565
7564
|
var import_wp_media3 = require("@elementor/wp-media");
|
|
7566
7565
|
var import_i18n39 = require("@wordpress/i18n");
|
|
7567
7566
|
var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
|
|
@@ -7593,8 +7592,8 @@ var VideoMediaControl = createControl(() => {
|
|
|
7593
7592
|
});
|
|
7594
7593
|
}
|
|
7595
7594
|
});
|
|
7596
|
-
return /* @__PURE__ */
|
|
7597
|
-
|
|
7595
|
+
return /* @__PURE__ */ React90.createElement(ControlActions, null, /* @__PURE__ */ React90.createElement(import_ui73.Card, { variant: "outlined" }, /* @__PURE__ */ React90.createElement(
|
|
7596
|
+
import_ui73.CardMedia,
|
|
7598
7597
|
{
|
|
7599
7598
|
sx: {
|
|
7600
7599
|
height: 140,
|
|
@@ -7608,9 +7607,9 @@ var VideoMediaControl = createControl(() => {
|
|
|
7608
7607
|
alignItems: "center"
|
|
7609
7608
|
}
|
|
7610
7609
|
},
|
|
7611
|
-
/* @__PURE__ */
|
|
7612
|
-
), /* @__PURE__ */
|
|
7613
|
-
|
|
7610
|
+
/* @__PURE__ */ React90.createElement(VideoPreview, { isFetching, videoUrl })
|
|
7611
|
+
), /* @__PURE__ */ React90.createElement(import_ui73.CardOverlay, null, /* @__PURE__ */ React90.createElement(import_ui73.Stack, { gap: 1 }, /* @__PURE__ */ React90.createElement(
|
|
7612
|
+
import_ui73.Button,
|
|
7614
7613
|
{
|
|
7615
7614
|
size: "tiny",
|
|
7616
7615
|
color: "inherit",
|
|
@@ -7618,18 +7617,18 @@ var VideoMediaControl = createControl(() => {
|
|
|
7618
7617
|
onClick: () => open({ mode: "browse" })
|
|
7619
7618
|
},
|
|
7620
7619
|
(0, import_i18n39.__)("Select video", "elementor")
|
|
7621
|
-
), /* @__PURE__ */
|
|
7622
|
-
|
|
7620
|
+
), /* @__PURE__ */ React90.createElement(
|
|
7621
|
+
import_ui73.Button,
|
|
7623
7622
|
{
|
|
7624
7623
|
size: "tiny",
|
|
7625
7624
|
variant: "text",
|
|
7626
7625
|
color: "inherit",
|
|
7627
|
-
startIcon: /* @__PURE__ */
|
|
7626
|
+
startIcon: /* @__PURE__ */ React90.createElement(import_icons25.UploadIcon, null),
|
|
7628
7627
|
onClick: () => open({ mode: "upload" })
|
|
7629
7628
|
},
|
|
7630
7629
|
(0, import_i18n39.__)("Upload", "elementor")
|
|
7631
|
-
), /* @__PURE__ */
|
|
7632
|
-
|
|
7630
|
+
), /* @__PURE__ */ React90.createElement(
|
|
7631
|
+
import_ui73.Button,
|
|
7633
7632
|
{
|
|
7634
7633
|
size: "tiny",
|
|
7635
7634
|
variant: "text",
|
|
@@ -7641,10 +7640,10 @@ var VideoMediaControl = createControl(() => {
|
|
|
7641
7640
|
});
|
|
7642
7641
|
var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
7643
7642
|
if (isFetching) {
|
|
7644
|
-
return /* @__PURE__ */
|
|
7643
|
+
return /* @__PURE__ */ React90.createElement(import_ui73.CircularProgress, null);
|
|
7645
7644
|
}
|
|
7646
7645
|
if (videoUrl) {
|
|
7647
|
-
return /* @__PURE__ */
|
|
7646
|
+
return /* @__PURE__ */ React90.createElement(
|
|
7648
7647
|
"video",
|
|
7649
7648
|
{
|
|
7650
7649
|
"aria-label": (0, import_i18n39.__)("Video preview", "elementor"),
|
|
@@ -7660,19 +7659,19 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
|
|
|
7660
7659
|
}
|
|
7661
7660
|
);
|
|
7662
7661
|
}
|
|
7663
|
-
return /* @__PURE__ */
|
|
7662
|
+
return /* @__PURE__ */ React90.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
|
|
7664
7663
|
};
|
|
7665
7664
|
|
|
7666
7665
|
// src/controls/background-control/background-control.tsx
|
|
7667
|
-
var
|
|
7666
|
+
var React97 = __toESM(require("react"));
|
|
7668
7667
|
var import_editor_props42 = require("@elementor/editor-props");
|
|
7669
|
-
var
|
|
7668
|
+
var import_ui81 = require("@elementor/ui");
|
|
7670
7669
|
var import_i18n45 = require("@wordpress/i18n");
|
|
7671
7670
|
|
|
7672
7671
|
// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
|
|
7673
|
-
var
|
|
7672
|
+
var React96 = __toESM(require("react"));
|
|
7674
7673
|
var import_editor_props41 = require("@elementor/editor-props");
|
|
7675
|
-
var
|
|
7674
|
+
var import_ui80 = require("@elementor/ui");
|
|
7676
7675
|
var import_wp_media4 = require("@elementor/wp-media");
|
|
7677
7676
|
var import_i18n44 = require("@wordpress/i18n");
|
|
7678
7677
|
|
|
@@ -7681,9 +7680,9 @@ var import_env = require("@elementor/env");
|
|
|
7681
7680
|
var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
|
|
7682
7681
|
|
|
7683
7682
|
// src/controls/background-control/background-gradient-color-control.tsx
|
|
7684
|
-
var
|
|
7683
|
+
var React91 = __toESM(require("react"));
|
|
7685
7684
|
var import_editor_props37 = require("@elementor/editor-props");
|
|
7686
|
-
var
|
|
7685
|
+
var import_ui74 = require("@elementor/ui");
|
|
7687
7686
|
var BackgroundGradientColorControl = createControl(() => {
|
|
7688
7687
|
const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
|
|
7689
7688
|
const handleChange = (newValue) => {
|
|
@@ -7721,8 +7720,8 @@ var BackgroundGradientColorControl = createControl(() => {
|
|
|
7721
7720
|
positions: positions?.value.split(" ")
|
|
7722
7721
|
};
|
|
7723
7722
|
};
|
|
7724
|
-
return /* @__PURE__ */
|
|
7725
|
-
|
|
7723
|
+
return /* @__PURE__ */ React91.createElement(
|
|
7724
|
+
import_ui74.UnstableGradientBox,
|
|
7726
7725
|
{
|
|
7727
7726
|
sx: { width: "auto", padding: 1.5 },
|
|
7728
7727
|
value: normalizeValue(),
|
|
@@ -7746,35 +7745,35 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
|
|
|
7746
7745
|
});
|
|
7747
7746
|
|
|
7748
7747
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
|
|
7749
|
-
var
|
|
7748
|
+
var React92 = __toESM(require("react"));
|
|
7750
7749
|
var import_icons26 = require("@elementor/icons");
|
|
7751
|
-
var
|
|
7750
|
+
var import_ui75 = require("@elementor/ui");
|
|
7752
7751
|
var import_i18n40 = require("@wordpress/i18n");
|
|
7753
7752
|
var attachmentControlOptions = [
|
|
7754
7753
|
{
|
|
7755
7754
|
value: "fixed",
|
|
7756
7755
|
label: (0, import_i18n40.__)("Fixed", "elementor"),
|
|
7757
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7756
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons26.PinIcon, { fontSize: size }),
|
|
7758
7757
|
showTooltip: true
|
|
7759
7758
|
},
|
|
7760
7759
|
{
|
|
7761
7760
|
value: "scroll",
|
|
7762
7761
|
label: (0, import_i18n40.__)("Scroll", "elementor"),
|
|
7763
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7762
|
+
renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons26.PinnedOffIcon, { fontSize: size }),
|
|
7764
7763
|
showTooltip: true
|
|
7765
7764
|
}
|
|
7766
7765
|
];
|
|
7767
7766
|
var BackgroundImageOverlayAttachment = () => {
|
|
7768
|
-
return /* @__PURE__ */
|
|
7767
|
+
return /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ToggleControl, { options: attachmentControlOptions })));
|
|
7769
7768
|
};
|
|
7770
7769
|
|
|
7771
7770
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
|
|
7772
|
-
var
|
|
7773
|
-
var
|
|
7771
|
+
var React93 = __toESM(require("react"));
|
|
7772
|
+
var import_react54 = require("react");
|
|
7774
7773
|
var import_editor_props38 = require("@elementor/editor-props");
|
|
7775
7774
|
var import_editor_ui12 = require("@elementor/editor-ui");
|
|
7776
7775
|
var import_icons27 = require("@elementor/icons");
|
|
7777
|
-
var
|
|
7776
|
+
var import_ui76 = require("@elementor/ui");
|
|
7778
7777
|
var import_i18n41 = require("@wordpress/i18n");
|
|
7779
7778
|
var backgroundPositionOptions = [
|
|
7780
7779
|
{ label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -7792,7 +7791,7 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7792
7791
|
const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
|
|
7793
7792
|
const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
|
|
7794
7793
|
const isCustom = !!backgroundImageOffsetContext.value;
|
|
7795
|
-
const rowRef = (0,
|
|
7794
|
+
const rowRef = (0, import_react54.useRef)(null);
|
|
7796
7795
|
const handlePositionChange = (event) => {
|
|
7797
7796
|
const value = event.target.value || null;
|
|
7798
7797
|
if (value === "custom") {
|
|
@@ -7801,8 +7800,8 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7801
7800
|
stringPropContext.setValue(value);
|
|
7802
7801
|
}
|
|
7803
7802
|
};
|
|
7804
|
-
return /* @__PURE__ */
|
|
7805
|
-
|
|
7803
|
+
return /* @__PURE__ */ React93.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(
|
|
7804
|
+
import_ui76.Select,
|
|
7806
7805
|
{
|
|
7807
7806
|
fullWidth: true,
|
|
7808
7807
|
size: "tiny",
|
|
@@ -7810,18 +7809,18 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7810
7809
|
disabled: stringPropContext.disabled,
|
|
7811
7810
|
value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
|
|
7812
7811
|
},
|
|
7813
|
-
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
7814
|
-
))))), isCustom ? /* @__PURE__ */
|
|
7812
|
+
backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React93.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
7813
|
+
))))), isCustom ? /* @__PURE__ */ React93.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React93.createElement(
|
|
7815
7814
|
SizeControl,
|
|
7816
7815
|
{
|
|
7817
|
-
startIcon: /* @__PURE__ */
|
|
7816
|
+
startIcon: /* @__PURE__ */ React93.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
|
|
7818
7817
|
anchorRef: rowRef,
|
|
7819
7818
|
min: -Number.MAX_SAFE_INTEGER
|
|
7820
7819
|
}
|
|
7821
|
-
))), /* @__PURE__ */
|
|
7820
|
+
))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React93.createElement(
|
|
7822
7821
|
SizeControl,
|
|
7823
7822
|
{
|
|
7824
|
-
startIcon: /* @__PURE__ */
|
|
7823
|
+
startIcon: /* @__PURE__ */ React93.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
|
|
7825
7824
|
anchorRef: rowRef,
|
|
7826
7825
|
min: -Number.MAX_SAFE_INTEGER
|
|
7827
7826
|
}
|
|
@@ -7829,70 +7828,70 @@ var BackgroundImageOverlayPosition = () => {
|
|
|
7829
7828
|
};
|
|
7830
7829
|
|
|
7831
7830
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
|
|
7832
|
-
var
|
|
7831
|
+
var React94 = __toESM(require("react"));
|
|
7833
7832
|
var import_icons28 = require("@elementor/icons");
|
|
7834
|
-
var
|
|
7833
|
+
var import_ui77 = require("@elementor/ui");
|
|
7835
7834
|
var import_i18n42 = require("@wordpress/i18n");
|
|
7836
7835
|
var repeatControlOptions = [
|
|
7837
7836
|
{
|
|
7838
7837
|
value: "repeat",
|
|
7839
7838
|
label: (0, import_i18n42.__)("Repeat", "elementor"),
|
|
7840
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7839
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.GridDotsIcon, { fontSize: size }),
|
|
7841
7840
|
showTooltip: true
|
|
7842
7841
|
},
|
|
7843
7842
|
{
|
|
7844
7843
|
value: "repeat-x",
|
|
7845
7844
|
label: (0, import_i18n42.__)("Repeat-x", "elementor"),
|
|
7846
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7845
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.DotsHorizontalIcon, { fontSize: size }),
|
|
7847
7846
|
showTooltip: true
|
|
7848
7847
|
},
|
|
7849
7848
|
{
|
|
7850
7849
|
value: "repeat-y",
|
|
7851
7850
|
label: (0, import_i18n42.__)("Repeat-y", "elementor"),
|
|
7852
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7851
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.DotsVerticalIcon, { fontSize: size }),
|
|
7853
7852
|
showTooltip: true
|
|
7854
7853
|
},
|
|
7855
7854
|
{
|
|
7856
7855
|
value: "no-repeat",
|
|
7857
7856
|
label: (0, import_i18n42.__)("No-repeat", "elementor"),
|
|
7858
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7857
|
+
renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons28.XIcon, { fontSize: size }),
|
|
7859
7858
|
showTooltip: true
|
|
7860
7859
|
}
|
|
7861
7860
|
];
|
|
7862
7861
|
var BackgroundImageOverlayRepeat = () => {
|
|
7863
|
-
return /* @__PURE__ */
|
|
7862
|
+
return /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(ToggleControl, { options: repeatControlOptions })));
|
|
7864
7863
|
};
|
|
7865
7864
|
|
|
7866
7865
|
// src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
|
|
7867
|
-
var
|
|
7868
|
-
var
|
|
7866
|
+
var React95 = __toESM(require("react"));
|
|
7867
|
+
var import_react55 = require("react");
|
|
7869
7868
|
var import_editor_props39 = require("@elementor/editor-props");
|
|
7870
7869
|
var import_icons29 = require("@elementor/icons");
|
|
7871
|
-
var
|
|
7870
|
+
var import_ui78 = require("@elementor/ui");
|
|
7872
7871
|
var import_i18n43 = require("@wordpress/i18n");
|
|
7873
7872
|
var sizeControlOptions = [
|
|
7874
7873
|
{
|
|
7875
7874
|
value: "auto",
|
|
7876
7875
|
label: (0, import_i18n43.__)("Auto", "elementor"),
|
|
7877
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7876
|
+
renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.LetterAIcon, { fontSize: size }),
|
|
7878
7877
|
showTooltip: true
|
|
7879
7878
|
},
|
|
7880
7879
|
{
|
|
7881
7880
|
value: "cover",
|
|
7882
7881
|
label: (0, import_i18n43.__)("Cover", "elementor"),
|
|
7883
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7882
|
+
renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: size }),
|
|
7884
7883
|
showTooltip: true
|
|
7885
7884
|
},
|
|
7886
7885
|
{
|
|
7887
7886
|
value: "contain",
|
|
7888
7887
|
label: (0, import_i18n43.__)("Contain", "elementor"),
|
|
7889
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7888
|
+
renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.ArrowBarBothIcon, { fontSize: size }),
|
|
7890
7889
|
showTooltip: true
|
|
7891
7890
|
},
|
|
7892
7891
|
{
|
|
7893
7892
|
value: "custom",
|
|
7894
7893
|
label: (0, import_i18n43.__)("Custom", "elementor"),
|
|
7895
|
-
renderContent: ({ size }) => /* @__PURE__ */
|
|
7894
|
+
renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(import_icons29.PencilIcon, { fontSize: size }),
|
|
7896
7895
|
showTooltip: true
|
|
7897
7896
|
}
|
|
7898
7897
|
];
|
|
@@ -7900,7 +7899,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7900
7899
|
const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
|
|
7901
7900
|
const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
|
|
7902
7901
|
const isCustom = !!backgroundImageScaleContext.value;
|
|
7903
|
-
const rowRef = (0,
|
|
7902
|
+
const rowRef = (0, import_react55.useRef)(null);
|
|
7904
7903
|
const handleSizeChange = (size) => {
|
|
7905
7904
|
if (size === "custom") {
|
|
7906
7905
|
backgroundImageScaleContext.setValue({ width: null, height: null });
|
|
@@ -7908,7 +7907,7 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7908
7907
|
stringPropContext.setValue(size);
|
|
7909
7908
|
}
|
|
7910
7909
|
};
|
|
7911
|
-
return /* @__PURE__ */
|
|
7910
|
+
return /* @__PURE__ */ React95.createElement(import_ui78.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React95.createElement(
|
|
7912
7911
|
ControlToggleButtonGroup,
|
|
7913
7912
|
{
|
|
7914
7913
|
exclusive: true,
|
|
@@ -7917,17 +7916,17 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7917
7916
|
disabled: stringPropContext.disabled,
|
|
7918
7917
|
value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
|
|
7919
7918
|
}
|
|
7920
|
-
)))), isCustom ? /* @__PURE__ */
|
|
7919
|
+
)))), isCustom ? /* @__PURE__ */ React95.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React95.createElement(
|
|
7921
7920
|
SizeControl,
|
|
7922
7921
|
{
|
|
7923
|
-
startIcon: /* @__PURE__ */
|
|
7922
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
|
|
7924
7923
|
extendedOptions: ["auto"],
|
|
7925
7924
|
anchorRef: rowRef
|
|
7926
7925
|
}
|
|
7927
|
-
))), /* @__PURE__ */
|
|
7926
|
+
))), /* @__PURE__ */ React95.createElement(import_ui78.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React95.createElement(
|
|
7928
7927
|
SizeControl,
|
|
7929
7928
|
{
|
|
7930
|
-
startIcon: /* @__PURE__ */
|
|
7929
|
+
startIcon: /* @__PURE__ */ React95.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
|
|
7931
7930
|
extendedOptions: ["auto"],
|
|
7932
7931
|
anchorRef: rowRef
|
|
7933
7932
|
}
|
|
@@ -7935,9 +7934,9 @@ var BackgroundImageOverlaySize = () => {
|
|
|
7935
7934
|
};
|
|
7936
7935
|
|
|
7937
7936
|
// src/controls/background-control/background-overlay/use-background-tabs-history.ts
|
|
7938
|
-
var
|
|
7937
|
+
var import_react56 = require("react");
|
|
7939
7938
|
var import_editor_props40 = require("@elementor/editor-props");
|
|
7940
|
-
var
|
|
7939
|
+
var import_ui79 = require("@elementor/ui");
|
|
7941
7940
|
var useBackgroundTabsHistory = ({
|
|
7942
7941
|
color: initialBackgroundColorOverlay2,
|
|
7943
7942
|
image: initialBackgroundImageOverlay,
|
|
@@ -7955,8 +7954,8 @@ var useBackgroundTabsHistory = ({
|
|
|
7955
7954
|
}
|
|
7956
7955
|
return "image";
|
|
7957
7956
|
};
|
|
7958
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
7959
|
-
const valuesHistory = (0,
|
|
7957
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui79.useTabs)(getCurrentOverlayType());
|
|
7958
|
+
const valuesHistory = (0, import_react56.useRef)({
|
|
7960
7959
|
image: initialBackgroundImageOverlay,
|
|
7961
7960
|
color: initialBackgroundColorOverlay2,
|
|
7962
7961
|
gradient: initialBackgroundGradientOverlay2
|
|
@@ -8031,22 +8030,22 @@ var backgroundResolutionOptions = [
|
|
|
8031
8030
|
];
|
|
8032
8031
|
var BackgroundOverlayRepeaterControl = createControl(() => {
|
|
8033
8032
|
const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
|
|
8034
|
-
return /* @__PURE__ */
|
|
8033
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React96.createElement(
|
|
8035
8034
|
ControlRepeater,
|
|
8036
8035
|
{
|
|
8037
8036
|
initial: getInitialBackgroundOverlay(),
|
|
8038
8037
|
propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
|
|
8039
8038
|
},
|
|
8040
|
-
/* @__PURE__ */
|
|
8041
|
-
/* @__PURE__ */
|
|
8039
|
+
/* @__PURE__ */ React96.createElement(RepeaterHeader, { label: (0, import_i18n44.__)("Overlay", "elementor") }, /* @__PURE__ */ React96.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
|
|
8040
|
+
/* @__PURE__ */ React96.createElement(ItemsContainer, null, /* @__PURE__ */ React96.createElement(
|
|
8042
8041
|
Item,
|
|
8043
8042
|
{
|
|
8044
8043
|
Icon: ItemIcon2,
|
|
8045
8044
|
Label: ItemLabel3,
|
|
8046
|
-
actions: /* @__PURE__ */
|
|
8045
|
+
actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DuplicateItemAction, null), /* @__PURE__ */ React96.createElement(DisableItemAction, null), /* @__PURE__ */ React96.createElement(RemoveItemAction, null))
|
|
8047
8046
|
}
|
|
8048
8047
|
)),
|
|
8049
|
-
/* @__PURE__ */
|
|
8048
|
+
/* @__PURE__ */ React96.createElement(EditItemPopover, null, /* @__PURE__ */ React96.createElement(ItemContent2, null))
|
|
8050
8049
|
));
|
|
8051
8050
|
});
|
|
8052
8051
|
var ItemContent2 = () => {
|
|
@@ -8056,27 +8055,27 @@ var ItemContent2 = () => {
|
|
|
8056
8055
|
gradient: initialBackgroundGradientOverlay.value
|
|
8057
8056
|
});
|
|
8058
8057
|
const { rowRef } = useRepeaterContext();
|
|
8059
|
-
return /* @__PURE__ */
|
|
8060
|
-
|
|
8058
|
+
return /* @__PURE__ */ React96.createElement(import_ui80.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React96.createElement(import_ui80.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React96.createElement(
|
|
8059
|
+
import_ui80.Tabs,
|
|
8061
8060
|
{
|
|
8062
8061
|
size: "small",
|
|
8063
8062
|
variant: "fullWidth",
|
|
8064
8063
|
...getTabsProps(),
|
|
8065
8064
|
"aria-label": (0, import_i18n44.__)("Background Overlay", "elementor")
|
|
8066
8065
|
},
|
|
8067
|
-
/* @__PURE__ */
|
|
8068
|
-
/* @__PURE__ */
|
|
8069
|
-
/* @__PURE__ */
|
|
8070
|
-
)), /* @__PURE__ */
|
|
8066
|
+
/* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
|
|
8067
|
+
/* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
|
|
8068
|
+
/* @__PURE__ */ React96.createElement(import_ui80.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
|
|
8069
|
+
)), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React96.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React96.createElement(import_ui80.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
|
|
8071
8070
|
};
|
|
8072
8071
|
var ItemIcon2 = ({ value }) => {
|
|
8073
8072
|
switch (value.$$type) {
|
|
8074
8073
|
case "background-image-overlay":
|
|
8075
|
-
return /* @__PURE__ */
|
|
8074
|
+
return /* @__PURE__ */ React96.createElement(ItemIconImage, { value });
|
|
8076
8075
|
case "background-color-overlay":
|
|
8077
|
-
return /* @__PURE__ */
|
|
8076
|
+
return /* @__PURE__ */ React96.createElement(ItemIconColor, { value });
|
|
8078
8077
|
case "background-gradient-overlay":
|
|
8079
|
-
return /* @__PURE__ */
|
|
8078
|
+
return /* @__PURE__ */ React96.createElement(ItemIconGradient, { value });
|
|
8080
8079
|
default:
|
|
8081
8080
|
return null;
|
|
8082
8081
|
}
|
|
@@ -8089,12 +8088,12 @@ var extractColorFrom = (prop) => {
|
|
|
8089
8088
|
};
|
|
8090
8089
|
var ItemIconColor = ({ value: prop }) => {
|
|
8091
8090
|
const color = extractColorFrom(prop);
|
|
8092
|
-
return /* @__PURE__ */
|
|
8091
|
+
return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
|
|
8093
8092
|
};
|
|
8094
8093
|
var ItemIconImage = ({ value }) => {
|
|
8095
8094
|
const { imageUrl } = useImage(value);
|
|
8096
|
-
return /* @__PURE__ */
|
|
8097
|
-
|
|
8095
|
+
return /* @__PURE__ */ React96.createElement(
|
|
8096
|
+
import_ui80.CardMedia,
|
|
8098
8097
|
{
|
|
8099
8098
|
image: imageUrl,
|
|
8100
8099
|
sx: (theme) => ({
|
|
@@ -8108,43 +8107,43 @@ var ItemIconImage = ({ value }) => {
|
|
|
8108
8107
|
};
|
|
8109
8108
|
var ItemIconGradient = ({ value }) => {
|
|
8110
8109
|
const gradient = getGradientValue(value);
|
|
8111
|
-
return /* @__PURE__ */
|
|
8110
|
+
return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
|
|
8112
8111
|
};
|
|
8113
8112
|
var ItemLabel3 = ({ value }) => {
|
|
8114
8113
|
switch (value.$$type) {
|
|
8115
8114
|
case "background-image-overlay":
|
|
8116
|
-
return /* @__PURE__ */
|
|
8115
|
+
return /* @__PURE__ */ React96.createElement(ItemLabelImage, { value });
|
|
8117
8116
|
case "background-color-overlay":
|
|
8118
|
-
return /* @__PURE__ */
|
|
8117
|
+
return /* @__PURE__ */ React96.createElement(ItemLabelColor, { value });
|
|
8119
8118
|
case "background-gradient-overlay":
|
|
8120
|
-
return /* @__PURE__ */
|
|
8119
|
+
return /* @__PURE__ */ React96.createElement(ItemLabelGradient, { value });
|
|
8121
8120
|
default:
|
|
8122
8121
|
return null;
|
|
8123
8122
|
}
|
|
8124
8123
|
};
|
|
8125
8124
|
var ItemLabelColor = ({ value: prop }) => {
|
|
8126
8125
|
const color = extractColorFrom(prop);
|
|
8127
|
-
return /* @__PURE__ */
|
|
8126
|
+
return /* @__PURE__ */ React96.createElement("span", null, color);
|
|
8128
8127
|
};
|
|
8129
8128
|
var ItemLabelImage = ({ value }) => {
|
|
8130
8129
|
const { imageTitle } = useImage(value);
|
|
8131
|
-
return /* @__PURE__ */
|
|
8130
|
+
return /* @__PURE__ */ React96.createElement("span", null, imageTitle);
|
|
8132
8131
|
};
|
|
8133
8132
|
var ItemLabelGradient = ({ value }) => {
|
|
8134
8133
|
if (value.value.type.value === "linear") {
|
|
8135
|
-
return /* @__PURE__ */
|
|
8134
|
+
return /* @__PURE__ */ React96.createElement("span", null, (0, import_i18n44.__)("Linear Gradient", "elementor"));
|
|
8136
8135
|
}
|
|
8137
|
-
return /* @__PURE__ */
|
|
8136
|
+
return /* @__PURE__ */ React96.createElement("span", null, (0, import_i18n44.__)("Radial Gradient", "elementor"));
|
|
8138
8137
|
};
|
|
8139
8138
|
var ColorOverlayContent = ({ anchorEl }) => {
|
|
8140
8139
|
const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
|
|
8141
|
-
return /* @__PURE__ */
|
|
8140
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(ColorControl, { anchorEl })));
|
|
8142
8141
|
};
|
|
8143
8142
|
var ImageOverlayContent = () => {
|
|
8144
8143
|
const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
|
|
8145
|
-
return /* @__PURE__ */
|
|
8144
|
+
return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React96.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayAttachment, null)));
|
|
8146
8145
|
};
|
|
8147
|
-
var StyledUnstableColorIndicator3 = (0,
|
|
8146
|
+
var StyledUnstableColorIndicator3 = (0, import_ui80.styled)(import_ui80.UnstableColorIndicator)(({ theme }) => ({
|
|
8148
8147
|
height: "1rem",
|
|
8149
8148
|
width: "1rem",
|
|
8150
8149
|
borderRadius: `${theme.shape.borderRadius / 2}px`
|
|
@@ -8192,20 +8191,20 @@ var colorLabel = (0, import_i18n45.__)("Color", "elementor");
|
|
|
8192
8191
|
var clipLabel = (0, import_i18n45.__)("Clipping", "elementor");
|
|
8193
8192
|
var BackgroundControl = createControl(() => {
|
|
8194
8193
|
const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
|
|
8195
|
-
return /* @__PURE__ */
|
|
8194
|
+
return /* @__PURE__ */ React97.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React97.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React97.createElement(BackgroundColorField, null), /* @__PURE__ */ React97.createElement(BackgroundClipField, null));
|
|
8196
8195
|
});
|
|
8197
8196
|
var BackgroundColorField = () => {
|
|
8198
|
-
return /* @__PURE__ */
|
|
8197
|
+
return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ColorControl, null))));
|
|
8199
8198
|
};
|
|
8200
8199
|
var BackgroundClipField = () => {
|
|
8201
|
-
return /* @__PURE__ */
|
|
8200
|
+
return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React97.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(SelectControl, { options: clipOptions }))));
|
|
8202
8201
|
};
|
|
8203
8202
|
|
|
8204
8203
|
// src/controls/repeatable-control.tsx
|
|
8205
|
-
var
|
|
8206
|
-
var
|
|
8204
|
+
var React98 = __toESM(require("react"));
|
|
8205
|
+
var import_react57 = require("react");
|
|
8207
8206
|
var import_editor_props43 = require("@elementor/editor-props");
|
|
8208
|
-
var
|
|
8207
|
+
var import_ui82 = require("@elementor/ui");
|
|
8209
8208
|
var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
|
|
8210
8209
|
var RepeatableControl = createControl(
|
|
8211
8210
|
({
|
|
@@ -8224,11 +8223,11 @@ var RepeatableControl = createControl(
|
|
|
8224
8223
|
if (!childPropTypeUtil) {
|
|
8225
8224
|
return null;
|
|
8226
8225
|
}
|
|
8227
|
-
const childArrayPropTypeUtil2 = (0,
|
|
8226
|
+
const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
|
|
8228
8227
|
() => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
|
|
8229
8228
|
[childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
|
|
8230
8229
|
);
|
|
8231
|
-
const contextValue = (0,
|
|
8230
|
+
const contextValue = (0, import_react57.useMemo)(
|
|
8232
8231
|
() => ({
|
|
8233
8232
|
...childControlConfig,
|
|
8234
8233
|
placeholder: placeholder || "",
|
|
@@ -8238,14 +8237,14 @@ var RepeatableControl = createControl(
|
|
|
8238
8237
|
);
|
|
8239
8238
|
const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
|
|
8240
8239
|
const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
|
|
8241
|
-
return /* @__PURE__ */
|
|
8240
|
+
return /* @__PURE__ */ React98.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React98.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React98.createElement(
|
|
8242
8241
|
ControlRepeater,
|
|
8243
8242
|
{
|
|
8244
8243
|
initial: childPropTypeUtil.create(initialValues || null),
|
|
8245
8244
|
propTypeUtil: childArrayPropTypeUtil2,
|
|
8246
8245
|
isItemDisabled: isItemDisabled2
|
|
8247
8246
|
},
|
|
8248
|
-
/* @__PURE__ */
|
|
8247
|
+
/* @__PURE__ */ React98.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React98.createElement(
|
|
8249
8248
|
TooltipAddItemAction,
|
|
8250
8249
|
{
|
|
8251
8250
|
...addItemTooltipProps,
|
|
@@ -8253,22 +8252,22 @@ var RepeatableControl = createControl(
|
|
|
8253
8252
|
ariaLabel: repeaterLabel
|
|
8254
8253
|
}
|
|
8255
8254
|
)),
|
|
8256
|
-
/* @__PURE__ */
|
|
8255
|
+
/* @__PURE__ */ React98.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React98.createElement(
|
|
8257
8256
|
Item,
|
|
8258
8257
|
{
|
|
8259
8258
|
Icon: ItemIcon3,
|
|
8260
8259
|
Label: ItemLabel4,
|
|
8261
|
-
actions: /* @__PURE__ */
|
|
8260
|
+
actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, showDuplicate && /* @__PURE__ */ React98.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React98.createElement(DisableItemAction, null), /* @__PURE__ */ React98.createElement(RemoveItemAction, null))
|
|
8262
8261
|
}
|
|
8263
8262
|
)),
|
|
8264
|
-
/* @__PURE__ */
|
|
8263
|
+
/* @__PURE__ */ React98.createElement(EditItemPopover, null, /* @__PURE__ */ React98.createElement(Content2, null))
|
|
8265
8264
|
)));
|
|
8266
8265
|
}
|
|
8267
8266
|
);
|
|
8268
|
-
var ItemIcon3 = () => /* @__PURE__ */
|
|
8267
|
+
var ItemIcon3 = () => /* @__PURE__ */ React98.createElement(React98.Fragment, null);
|
|
8269
8268
|
var Content2 = () => {
|
|
8270
8269
|
const { component: ChildControl, props = {} } = useRepeatableControlContext();
|
|
8271
|
-
return /* @__PURE__ */
|
|
8270
|
+
return /* @__PURE__ */ React98.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(ChildControl, { ...props })));
|
|
8272
8271
|
};
|
|
8273
8272
|
var interpolate = (template, data) => {
|
|
8274
8273
|
if (!data) {
|
|
@@ -8351,7 +8350,7 @@ var ItemLabel4 = ({ value }) => {
|
|
|
8351
8350
|
const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
|
|
8352
8351
|
const isReadOnly = !!childProps?.readOnly;
|
|
8353
8352
|
const color = getTextColor(isReadOnly, showPlaceholder);
|
|
8354
|
-
return /* @__PURE__ */
|
|
8353
|
+
return /* @__PURE__ */ React98.createElement(import_ui82.Box, { component: "span", color }, label);
|
|
8355
8354
|
};
|
|
8356
8355
|
var getAllProperties = (pattern) => {
|
|
8357
8356
|
const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
|
|
@@ -8359,10 +8358,10 @@ var getAllProperties = (pattern) => {
|
|
|
8359
8358
|
};
|
|
8360
8359
|
|
|
8361
8360
|
// src/controls/key-value-control.tsx
|
|
8362
|
-
var
|
|
8363
|
-
var
|
|
8361
|
+
var React99 = __toESM(require("react"));
|
|
8362
|
+
var import_react58 = require("react");
|
|
8364
8363
|
var import_editor_props44 = require("@elementor/editor-props");
|
|
8365
|
-
var
|
|
8364
|
+
var import_ui83 = require("@elementor/ui");
|
|
8366
8365
|
var import_i18n46 = require("@wordpress/i18n");
|
|
8367
8366
|
|
|
8368
8367
|
// src/utils/escape-html-attr.ts
|
|
@@ -8387,9 +8386,9 @@ var getInitialFieldValue = (fieldValue) => {
|
|
|
8387
8386
|
};
|
|
8388
8387
|
var KeyValueControl = createControl((props = {}) => {
|
|
8389
8388
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
|
|
8390
|
-
const [keyError, setKeyError] = (0,
|
|
8391
|
-
const [valueError, setValueError] = (0,
|
|
8392
|
-
const [sessionState, setSessionState] = (0,
|
|
8389
|
+
const [keyError, setKeyError] = (0, import_react58.useState)("");
|
|
8390
|
+
const [valueError, setValueError] = (0, import_react58.useState)("");
|
|
8391
|
+
const [sessionState, setSessionState] = (0, import_react58.useState)({
|
|
8393
8392
|
key: getInitialFieldValue(value?.key),
|
|
8394
8393
|
value: getInitialFieldValue(value?.value)
|
|
8395
8394
|
});
|
|
@@ -8399,7 +8398,7 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8399
8398
|
keyHelper: void 0,
|
|
8400
8399
|
valueHelper: void 0
|
|
8401
8400
|
};
|
|
8402
|
-
const [keyRegex, valueRegex, errMsg] = (0,
|
|
8401
|
+
const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
|
|
8403
8402
|
() => [
|
|
8404
8403
|
props.regexKey ? new RegExp(props.regexKey) : void 0,
|
|
8405
8404
|
props.regexValue ? new RegExp(props.regexValue) : void 0,
|
|
@@ -8452,14 +8451,14 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8452
8451
|
});
|
|
8453
8452
|
}
|
|
8454
8453
|
};
|
|
8455
|
-
return /* @__PURE__ */
|
|
8454
|
+
return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(import_ui83.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React99.createElement(
|
|
8456
8455
|
TextControl,
|
|
8457
8456
|
{
|
|
8458
8457
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
|
|
8459
8458
|
error: !!keyError,
|
|
8460
8459
|
helperText: keyHelper
|
|
8461
8460
|
}
|
|
8462
|
-
)), !!keyError && /* @__PURE__ */
|
|
8461
|
+
)), !!keyError && /* @__PURE__ */ React99.createElement(import_ui83.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(import_ui83.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React99.createElement(
|
|
8463
8462
|
TextControl,
|
|
8464
8463
|
{
|
|
8465
8464
|
inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
|
|
@@ -8467,15 +8466,15 @@ var KeyValueControl = createControl((props = {}) => {
|
|
|
8467
8466
|
inputDisabled: !!keyError,
|
|
8468
8467
|
helperText: valueHelper
|
|
8469
8468
|
}
|
|
8470
|
-
)), !!valueError && /* @__PURE__ */
|
|
8469
|
+
)), !!valueError && /* @__PURE__ */ React99.createElement(import_ui83.FormHelperText, { error: true }, valueError))));
|
|
8471
8470
|
});
|
|
8472
8471
|
|
|
8473
8472
|
// src/controls/position-control.tsx
|
|
8474
|
-
var
|
|
8473
|
+
var React100 = __toESM(require("react"));
|
|
8475
8474
|
var import_editor_props45 = require("@elementor/editor-props");
|
|
8476
8475
|
var import_editor_ui13 = require("@elementor/editor-ui");
|
|
8477
8476
|
var import_icons30 = require("@elementor/icons");
|
|
8478
|
-
var
|
|
8477
|
+
var import_ui84 = require("@elementor/ui");
|
|
8479
8478
|
var import_i18n47 = require("@wordpress/i18n");
|
|
8480
8479
|
var positionOptions = [
|
|
8481
8480
|
{ label: (0, import_i18n47.__)("Center center", "elementor"), value: "center center" },
|
|
@@ -8502,8 +8501,8 @@ var PositionControl = () => {
|
|
|
8502
8501
|
stringPropContext.setValue(value);
|
|
8503
8502
|
}
|
|
8504
8503
|
};
|
|
8505
|
-
return /* @__PURE__ */
|
|
8506
|
-
|
|
8504
|
+
return /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React100.createElement(
|
|
8505
|
+
import_ui84.Select,
|
|
8507
8506
|
{
|
|
8508
8507
|
size: "tiny",
|
|
8509
8508
|
displayEmpty: true,
|
|
@@ -8513,28 +8512,28 @@ var PositionControl = () => {
|
|
|
8513
8512
|
renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
|
|
8514
8513
|
fullWidth: true
|
|
8515
8514
|
},
|
|
8516
|
-
positionOptions.map(({ label, value }) => /* @__PURE__ */
|
|
8517
|
-
)))), isCustom && /* @__PURE__ */
|
|
8515
|
+
positionOptions.map(({ label, value }) => /* @__PURE__ */ React100.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
|
|
8516
|
+
)))), isCustom && /* @__PURE__ */ React100.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React100.createElement(
|
|
8518
8517
|
SizeControl,
|
|
8519
8518
|
{
|
|
8520
|
-
startIcon: /* @__PURE__ */
|
|
8519
|
+
startIcon: /* @__PURE__ */ React100.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
|
|
8521
8520
|
min: -Number.MAX_SAFE_INTEGER
|
|
8522
8521
|
}
|
|
8523
|
-
))), /* @__PURE__ */
|
|
8522
|
+
))), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React100.createElement(
|
|
8524
8523
|
SizeControl,
|
|
8525
8524
|
{
|
|
8526
|
-
startIcon: /* @__PURE__ */
|
|
8525
|
+
startIcon: /* @__PURE__ */ React100.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
|
|
8527
8526
|
min: -Number.MAX_SAFE_INTEGER
|
|
8528
8527
|
}
|
|
8529
8528
|
)))))));
|
|
8530
8529
|
};
|
|
8531
8530
|
|
|
8532
8531
|
// src/controls/transform-control/transform-repeater-control.tsx
|
|
8533
|
-
var
|
|
8534
|
-
var
|
|
8532
|
+
var React113 = __toESM(require("react"));
|
|
8533
|
+
var import_react66 = require("react");
|
|
8535
8534
|
var import_editor_props54 = require("@elementor/editor-props");
|
|
8536
8535
|
var import_icons37 = require("@elementor/icons");
|
|
8537
|
-
var
|
|
8536
|
+
var import_ui97 = require("@elementor/ui");
|
|
8538
8537
|
var import_i18n57 = require("@wordpress/i18n");
|
|
8539
8538
|
|
|
8540
8539
|
// src/controls/transform-control/initial-values.ts
|
|
@@ -8584,24 +8583,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
|
|
|
8584
8583
|
});
|
|
8585
8584
|
|
|
8586
8585
|
// src/controls/transform-control/transform-content.tsx
|
|
8587
|
-
var
|
|
8588
|
-
var
|
|
8586
|
+
var React107 = __toESM(require("react"));
|
|
8587
|
+
var import_ui92 = require("@elementor/ui");
|
|
8589
8588
|
var import_i18n52 = require("@wordpress/i18n");
|
|
8590
8589
|
|
|
8591
8590
|
// src/controls/transform-control/functions/move.tsx
|
|
8592
|
-
var
|
|
8593
|
-
var
|
|
8591
|
+
var React102 = __toESM(require("react"));
|
|
8592
|
+
var import_react59 = require("react");
|
|
8594
8593
|
var import_editor_props47 = require("@elementor/editor-props");
|
|
8595
8594
|
var import_icons31 = require("@elementor/icons");
|
|
8596
|
-
var
|
|
8595
|
+
var import_ui86 = require("@elementor/ui");
|
|
8597
8596
|
var import_i18n48 = require("@wordpress/i18n");
|
|
8598
8597
|
|
|
8599
8598
|
// src/controls/transform-control/functions/axis-row.tsx
|
|
8600
|
-
var
|
|
8601
|
-
var
|
|
8599
|
+
var React101 = __toESM(require("react"));
|
|
8600
|
+
var import_ui85 = require("@elementor/ui");
|
|
8602
8601
|
var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
|
|
8603
8602
|
const safeId = label.replace(/\s+/g, "-").toLowerCase();
|
|
8604
|
-
return /* @__PURE__ */
|
|
8603
|
+
return /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React101.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React101.createElement(import_ui85.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(
|
|
8605
8604
|
SizeControl,
|
|
8606
8605
|
{
|
|
8607
8606
|
anchorRef,
|
|
@@ -8619,26 +8618,26 @@ var moveAxisControls = [
|
|
|
8619
8618
|
{
|
|
8620
8619
|
label: (0, import_i18n48.__)("Move X", "elementor"),
|
|
8621
8620
|
bind: "x",
|
|
8622
|
-
startIcon: /* @__PURE__ */
|
|
8621
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" }),
|
|
8623
8622
|
units: ["px", "%", "em", "rem", "vw"]
|
|
8624
8623
|
},
|
|
8625
8624
|
{
|
|
8626
8625
|
label: (0, import_i18n48.__)("Move Y", "elementor"),
|
|
8627
8626
|
bind: "y",
|
|
8628
|
-
startIcon: /* @__PURE__ */
|
|
8627
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowDownSmallIcon, { fontSize: "tiny" }),
|
|
8629
8628
|
units: ["px", "%", "em", "rem", "vh"]
|
|
8630
8629
|
},
|
|
8631
8630
|
{
|
|
8632
8631
|
label: (0, import_i18n48.__)("Move Z", "elementor"),
|
|
8633
8632
|
bind: "z",
|
|
8634
|
-
startIcon: /* @__PURE__ */
|
|
8633
|
+
startIcon: /* @__PURE__ */ React102.createElement(import_icons31.ArrowDownLeftIcon, { fontSize: "tiny" }),
|
|
8635
8634
|
units: ["px", "%", "em", "rem", "vw", "vh"]
|
|
8636
8635
|
}
|
|
8637
8636
|
];
|
|
8638
8637
|
var Move = () => {
|
|
8639
8638
|
const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
|
|
8640
|
-
const rowRefs = [(0,
|
|
8641
|
-
return /* @__PURE__ */
|
|
8639
|
+
const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
|
|
8640
|
+
return /* @__PURE__ */ React102.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
|
|
8642
8641
|
AxisRow,
|
|
8643
8642
|
{
|
|
8644
8643
|
key: control.bind,
|
|
@@ -8651,34 +8650,34 @@ var Move = () => {
|
|
|
8651
8650
|
};
|
|
8652
8651
|
|
|
8653
8652
|
// src/controls/transform-control/functions/rotate.tsx
|
|
8654
|
-
var
|
|
8655
|
-
var
|
|
8653
|
+
var React103 = __toESM(require("react"));
|
|
8654
|
+
var import_react60 = require("react");
|
|
8656
8655
|
var import_editor_props48 = require("@elementor/editor-props");
|
|
8657
8656
|
var import_icons32 = require("@elementor/icons");
|
|
8658
|
-
var
|
|
8657
|
+
var import_ui87 = require("@elementor/ui");
|
|
8659
8658
|
var import_i18n49 = require("@wordpress/i18n");
|
|
8660
8659
|
var rotateAxisControls = [
|
|
8661
8660
|
{
|
|
8662
8661
|
label: (0, import_i18n49.__)("Rotate X", "elementor"),
|
|
8663
8662
|
bind: "x",
|
|
8664
|
-
startIcon: /* @__PURE__ */
|
|
8663
|
+
startIcon: /* @__PURE__ */ React103.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny" })
|
|
8665
8664
|
},
|
|
8666
8665
|
{
|
|
8667
8666
|
label: (0, import_i18n49.__)("Rotate Y", "elementor"),
|
|
8668
8667
|
bind: "y",
|
|
8669
|
-
startIcon: /* @__PURE__ */
|
|
8668
|
+
startIcon: /* @__PURE__ */ React103.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8670
8669
|
},
|
|
8671
8670
|
{
|
|
8672
8671
|
label: (0, import_i18n49.__)("Rotate Z", "elementor"),
|
|
8673
8672
|
bind: "z",
|
|
8674
|
-
startIcon: /* @__PURE__ */
|
|
8673
|
+
startIcon: /* @__PURE__ */ React103.createElement(import_icons32.RotateClockwiseIcon, { fontSize: "tiny" })
|
|
8675
8674
|
}
|
|
8676
8675
|
];
|
|
8677
8676
|
var rotateUnits = ["deg", "rad", "grad", "turn"];
|
|
8678
8677
|
var Rotate = () => {
|
|
8679
8678
|
const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
|
|
8680
|
-
const rowRefs = [(0,
|
|
8681
|
-
return /* @__PURE__ */
|
|
8679
|
+
const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
|
|
8680
|
+
return /* @__PURE__ */ React103.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React103.createElement(
|
|
8682
8681
|
AxisRow,
|
|
8683
8682
|
{
|
|
8684
8683
|
key: control.bind,
|
|
@@ -8690,18 +8689,18 @@ var Rotate = () => {
|
|
|
8690
8689
|
};
|
|
8691
8690
|
|
|
8692
8691
|
// src/controls/transform-control/functions/scale.tsx
|
|
8693
|
-
var
|
|
8694
|
-
var
|
|
8692
|
+
var React105 = __toESM(require("react"));
|
|
8693
|
+
var import_react61 = require("react");
|
|
8695
8694
|
var import_editor_props49 = require("@elementor/editor-props");
|
|
8696
8695
|
var import_icons33 = require("@elementor/icons");
|
|
8697
|
-
var
|
|
8696
|
+
var import_ui89 = require("@elementor/ui");
|
|
8698
8697
|
var import_i18n50 = require("@wordpress/i18n");
|
|
8699
8698
|
|
|
8700
8699
|
// src/controls/transform-control/functions/scale-axis-row.tsx
|
|
8701
|
-
var
|
|
8702
|
-
var
|
|
8700
|
+
var React104 = __toESM(require("react"));
|
|
8701
|
+
var import_ui88 = require("@elementor/ui");
|
|
8703
8702
|
var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
|
|
8704
|
-
return /* @__PURE__ */
|
|
8703
|
+
return /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlLabel, null, label)), /* @__PURE__ */ React104.createElement(import_ui88.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React104.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
|
|
8705
8704
|
};
|
|
8706
8705
|
|
|
8707
8706
|
// src/controls/transform-control/functions/scale.tsx
|
|
@@ -8709,49 +8708,49 @@ var scaleAxisControls = [
|
|
|
8709
8708
|
{
|
|
8710
8709
|
label: (0, import_i18n50.__)("Scale X", "elementor"),
|
|
8711
8710
|
bind: "x",
|
|
8712
|
-
startIcon: /* @__PURE__ */
|
|
8711
|
+
startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
|
|
8713
8712
|
},
|
|
8714
8713
|
{
|
|
8715
8714
|
label: (0, import_i18n50.__)("Scale Y", "elementor"),
|
|
8716
8715
|
bind: "y",
|
|
8717
|
-
startIcon: /* @__PURE__ */
|
|
8716
|
+
startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" })
|
|
8718
8717
|
},
|
|
8719
8718
|
{
|
|
8720
8719
|
label: (0, import_i18n50.__)("Scale Z", "elementor"),
|
|
8721
8720
|
bind: "z",
|
|
8722
|
-
startIcon: /* @__PURE__ */
|
|
8721
|
+
startIcon: /* @__PURE__ */ React105.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" })
|
|
8723
8722
|
}
|
|
8724
8723
|
];
|
|
8725
8724
|
var Scale = () => {
|
|
8726
8725
|
const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
|
|
8727
|
-
const rowRefs = [(0,
|
|
8728
|
-
return /* @__PURE__ */
|
|
8726
|
+
const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
|
|
8727
|
+
return /* @__PURE__ */ React105.createElement(import_ui89.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
|
|
8729
8728
|
};
|
|
8730
8729
|
|
|
8731
8730
|
// src/controls/transform-control/functions/skew.tsx
|
|
8732
|
-
var
|
|
8733
|
-
var
|
|
8731
|
+
var React106 = __toESM(require("react"));
|
|
8732
|
+
var import_react62 = require("react");
|
|
8734
8733
|
var import_editor_props50 = require("@elementor/editor-props");
|
|
8735
8734
|
var import_icons34 = require("@elementor/icons");
|
|
8736
|
-
var
|
|
8735
|
+
var import_ui90 = require("@elementor/ui");
|
|
8737
8736
|
var import_i18n51 = require("@wordpress/i18n");
|
|
8738
8737
|
var skewAxisControls = [
|
|
8739
8738
|
{
|
|
8740
8739
|
label: (0, import_i18n51.__)("Skew X", "elementor"),
|
|
8741
8740
|
bind: "x",
|
|
8742
|
-
startIcon: /* @__PURE__ */
|
|
8741
|
+
startIcon: /* @__PURE__ */ React106.createElement(import_icons34.ArrowRightIcon, { fontSize: "tiny" })
|
|
8743
8742
|
},
|
|
8744
8743
|
{
|
|
8745
8744
|
label: (0, import_i18n51.__)("Skew Y", "elementor"),
|
|
8746
8745
|
bind: "y",
|
|
8747
|
-
startIcon: /* @__PURE__ */
|
|
8746
|
+
startIcon: /* @__PURE__ */ React106.createElement(import_icons34.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
|
|
8748
8747
|
}
|
|
8749
8748
|
];
|
|
8750
8749
|
var skewUnits = ["deg", "rad", "grad", "turn"];
|
|
8751
8750
|
var Skew = () => {
|
|
8752
8751
|
const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
|
|
8753
|
-
const rowRefs = [(0,
|
|
8754
|
-
return /* @__PURE__ */
|
|
8752
|
+
const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
|
|
8753
|
+
return /* @__PURE__ */ React106.createElement(import_ui90.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
|
|
8755
8754
|
AxisRow,
|
|
8756
8755
|
{
|
|
8757
8756
|
key: control.bind,
|
|
@@ -8763,9 +8762,9 @@ var Skew = () => {
|
|
|
8763
8762
|
};
|
|
8764
8763
|
|
|
8765
8764
|
// src/controls/transform-control/use-transform-tabs-history.tsx
|
|
8766
|
-
var
|
|
8765
|
+
var import_react63 = require("react");
|
|
8767
8766
|
var import_editor_props51 = require("@elementor/editor-props");
|
|
8768
|
-
var
|
|
8767
|
+
var import_ui91 = require("@elementor/ui");
|
|
8769
8768
|
var useTransformTabsHistory = ({
|
|
8770
8769
|
move: initialMove,
|
|
8771
8770
|
scale: initialScale,
|
|
@@ -8789,8 +8788,8 @@ var useTransformTabsHistory = ({
|
|
|
8789
8788
|
return TransformFunctionKeys.move;
|
|
8790
8789
|
}
|
|
8791
8790
|
};
|
|
8792
|
-
const { getTabsProps, getTabProps, getTabPanelProps } = (0,
|
|
8793
|
-
const valuesHistory = (0,
|
|
8791
|
+
const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui91.useTabs)(getCurrentTransformType());
|
|
8792
|
+
const valuesHistory = (0, import_react63.useRef)({
|
|
8794
8793
|
move: initialMove,
|
|
8795
8794
|
scale: initialScale,
|
|
8796
8795
|
rotate: initialRotate,
|
|
@@ -8851,8 +8850,8 @@ var TransformContent = () => {
|
|
|
8851
8850
|
rotate: initialRotateValue.value,
|
|
8852
8851
|
skew: initialSkewValue.value
|
|
8853
8852
|
});
|
|
8854
|
-
return /* @__PURE__ */
|
|
8855
|
-
|
|
8853
|
+
return /* @__PURE__ */ React107.createElement(PopoverContent, null, /* @__PURE__ */ React107.createElement(import_ui92.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React107.createElement(import_ui92.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React107.createElement(
|
|
8854
|
+
import_ui92.Tabs,
|
|
8856
8855
|
{
|
|
8857
8856
|
size: "small",
|
|
8858
8857
|
variant: "fullWidth",
|
|
@@ -8864,34 +8863,34 @@ var TransformContent = () => {
|
|
|
8864
8863
|
...getTabsProps(),
|
|
8865
8864
|
"aria-label": (0, import_i18n52.__)("Transform", "elementor")
|
|
8866
8865
|
},
|
|
8867
|
-
/* @__PURE__ */
|
|
8868
|
-
/* @__PURE__ */
|
|
8869
|
-
/* @__PURE__ */
|
|
8870
|
-
/* @__PURE__ */
|
|
8871
|
-
)), /* @__PURE__ */
|
|
8866
|
+
/* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
|
|
8867
|
+
/* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
|
|
8868
|
+
/* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
|
|
8869
|
+
/* @__PURE__ */ React107.createElement(import_ui92.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
|
|
8870
|
+
)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React107.createElement(Move, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React107.createElement(Scale, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React107.createElement(Rotate, null)), /* @__PURE__ */ React107.createElement(import_ui92.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React107.createElement(Skew, null))));
|
|
8872
8871
|
};
|
|
8873
8872
|
|
|
8874
8873
|
// src/controls/transform-control/transform-icon.tsx
|
|
8875
|
-
var
|
|
8874
|
+
var React108 = __toESM(require("react"));
|
|
8876
8875
|
var import_icons35 = require("@elementor/icons");
|
|
8877
8876
|
var TransformIcon = ({ value }) => {
|
|
8878
8877
|
switch (value.$$type) {
|
|
8879
8878
|
case TransformFunctionKeys.move:
|
|
8880
|
-
return /* @__PURE__ */
|
|
8879
|
+
return /* @__PURE__ */ React108.createElement(import_icons35.ArrowsMaximizeIcon, { fontSize: "tiny" });
|
|
8881
8880
|
case TransformFunctionKeys.scale:
|
|
8882
|
-
return /* @__PURE__ */
|
|
8881
|
+
return /* @__PURE__ */ React108.createElement(import_icons35.ArrowAutofitHeightIcon, { fontSize: "tiny" });
|
|
8883
8882
|
case TransformFunctionKeys.rotate:
|
|
8884
|
-
return /* @__PURE__ */
|
|
8883
|
+
return /* @__PURE__ */ React108.createElement(import_icons35.RotateClockwise2Icon, { fontSize: "tiny" });
|
|
8885
8884
|
case TransformFunctionKeys.skew:
|
|
8886
|
-
return /* @__PURE__ */
|
|
8885
|
+
return /* @__PURE__ */ React108.createElement(import_icons35.SkewXIcon, { fontSize: "tiny" });
|
|
8887
8886
|
default:
|
|
8888
8887
|
return null;
|
|
8889
8888
|
}
|
|
8890
8889
|
};
|
|
8891
8890
|
|
|
8892
8891
|
// src/controls/transform-control/transform-label.tsx
|
|
8893
|
-
var
|
|
8894
|
-
var
|
|
8892
|
+
var React109 = __toESM(require("react"));
|
|
8893
|
+
var import_ui93 = require("@elementor/ui");
|
|
8895
8894
|
var import_i18n53 = require("@wordpress/i18n");
|
|
8896
8895
|
var orderedAxis = ["x", "y", "z"];
|
|
8897
8896
|
var formatLabel = (value, functionType) => {
|
|
@@ -8910,33 +8909,33 @@ var TransformLabel = (props) => {
|
|
|
8910
8909
|
const { $$type, value } = props.value;
|
|
8911
8910
|
switch ($$type) {
|
|
8912
8911
|
case TransformFunctionKeys.move:
|
|
8913
|
-
return /* @__PURE__ */
|
|
8912
|
+
return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Move", "elementor"), value: formatLabel(value, "move") });
|
|
8914
8913
|
case TransformFunctionKeys.scale:
|
|
8915
|
-
return /* @__PURE__ */
|
|
8914
|
+
return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
|
|
8916
8915
|
case TransformFunctionKeys.rotate:
|
|
8917
|
-
return /* @__PURE__ */
|
|
8916
|
+
return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
|
|
8918
8917
|
case TransformFunctionKeys.skew:
|
|
8919
|
-
return /* @__PURE__ */
|
|
8918
|
+
return /* @__PURE__ */ React109.createElement(Label2, { label: (0, import_i18n53.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
|
|
8920
8919
|
default:
|
|
8921
8920
|
return "";
|
|
8922
8921
|
}
|
|
8923
8922
|
};
|
|
8924
8923
|
var Label2 = ({ label, value }) => {
|
|
8925
|
-
return /* @__PURE__ */
|
|
8924
|
+
return /* @__PURE__ */ React109.createElement(import_ui93.Box, { component: "span" }, label, ": ", value);
|
|
8926
8925
|
};
|
|
8927
8926
|
|
|
8928
8927
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
8929
|
-
var
|
|
8928
|
+
var React112 = __toESM(require("react"));
|
|
8930
8929
|
var import_editor_ui14 = require("@elementor/editor-ui");
|
|
8931
8930
|
var import_icons36 = require("@elementor/icons");
|
|
8932
|
-
var
|
|
8931
|
+
var import_ui96 = require("@elementor/ui");
|
|
8933
8932
|
var import_i18n56 = require("@wordpress/i18n");
|
|
8934
8933
|
|
|
8935
8934
|
// src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
|
|
8936
|
-
var
|
|
8937
|
-
var
|
|
8935
|
+
var React110 = __toESM(require("react"));
|
|
8936
|
+
var import_react64 = require("react");
|
|
8938
8937
|
var import_editor_props52 = require("@elementor/editor-props");
|
|
8939
|
-
var
|
|
8938
|
+
var import_ui94 = require("@elementor/ui");
|
|
8940
8939
|
var import_i18n54 = require("@wordpress/i18n");
|
|
8941
8940
|
var ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8942
8941
|
var PERSPECTIVE_CONTROL_FIELD = {
|
|
@@ -8957,24 +8956,24 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
|
|
|
8957
8956
|
}
|
|
8958
8957
|
];
|
|
8959
8958
|
var ChildrenPerspectiveControl = () => {
|
|
8960
|
-
return /* @__PURE__ */
|
|
8959
|
+
return /* @__PURE__ */ React110.createElement(import_ui94.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React110.createElement(PerspectiveControl, null), /* @__PURE__ */ React110.createElement(PerspectiveOriginControl, null));
|
|
8961
8960
|
};
|
|
8962
|
-
var PerspectiveControl = () => /* @__PURE__ */
|
|
8963
|
-
var PerspectiveOriginControl = () => /* @__PURE__ */
|
|
8961
|
+
var PerspectiveControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React110.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
|
|
8962
|
+
var PerspectiveOriginControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React110.createElement(PerspectiveOriginControlProvider, null));
|
|
8964
8963
|
var PerspectiveOriginControlProvider = () => {
|
|
8965
8964
|
const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
|
|
8966
|
-
return /* @__PURE__ */
|
|
8965
|
+
return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React110.createElement(ControlFields, { control }))));
|
|
8967
8966
|
};
|
|
8968
8967
|
var ControlFields = ({ control }) => {
|
|
8969
|
-
const rowRef = (0,
|
|
8970
|
-
return /* @__PURE__ */
|
|
8968
|
+
const rowRef = (0, import_react64.useRef)(null);
|
|
8969
|
+
return /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
|
|
8971
8970
|
};
|
|
8972
8971
|
|
|
8973
8972
|
// src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
|
|
8974
|
-
var
|
|
8975
|
-
var
|
|
8973
|
+
var React111 = __toESM(require("react"));
|
|
8974
|
+
var import_react65 = require("react");
|
|
8976
8975
|
var import_editor_props53 = require("@elementor/editor-props");
|
|
8977
|
-
var
|
|
8976
|
+
var import_ui95 = require("@elementor/ui");
|
|
8978
8977
|
var import_i18n55 = require("@wordpress/i18n");
|
|
8979
8978
|
var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
|
|
8980
8979
|
var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
|
|
@@ -8996,12 +8995,12 @@ var TRANSFORM_ORIGIN_FIELDS = [
|
|
|
8996
8995
|
}
|
|
8997
8996
|
];
|
|
8998
8997
|
var TransformOriginControl = () => {
|
|
8999
|
-
return /* @__PURE__ */
|
|
8998
|
+
return /* @__PURE__ */ React111.createElement(import_ui95.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React111.createElement(ControlFields2, { control, key: control.bind })));
|
|
9000
8999
|
};
|
|
9001
9000
|
var ControlFields2 = ({ control }) => {
|
|
9002
9001
|
const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
|
|
9003
|
-
const rowRef = (0,
|
|
9004
|
-
return /* @__PURE__ */
|
|
9002
|
+
const rowRef = (0, import_react65.useRef)(null);
|
|
9003
|
+
return /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React111.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React111.createElement(import_ui95.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
|
|
9005
9004
|
};
|
|
9006
9005
|
|
|
9007
9006
|
// src/controls/transform-control/transform-settings-control.tsx
|
|
@@ -9011,12 +9010,12 @@ var TransformSettingsControl = ({
|
|
|
9011
9010
|
anchorRef,
|
|
9012
9011
|
showChildrenPerspective
|
|
9013
9012
|
}) => {
|
|
9014
|
-
const popupProps = (0,
|
|
9013
|
+
const popupProps = (0, import_ui96.bindPopover)({
|
|
9015
9014
|
...popupState,
|
|
9016
9015
|
anchorEl: anchorRef.current ?? void 0
|
|
9017
9016
|
});
|
|
9018
|
-
return /* @__PURE__ */
|
|
9019
|
-
|
|
9017
|
+
return /* @__PURE__ */ React112.createElement(
|
|
9018
|
+
import_ui96.Popover,
|
|
9020
9019
|
{
|
|
9021
9020
|
disablePortal: true,
|
|
9022
9021
|
anchorOrigin: { vertical: "bottom", horizontal: "left" },
|
|
@@ -9030,16 +9029,16 @@ var TransformSettingsControl = ({
|
|
|
9030
9029
|
},
|
|
9031
9030
|
...popupProps
|
|
9032
9031
|
},
|
|
9033
|
-
/* @__PURE__ */
|
|
9032
|
+
/* @__PURE__ */ React112.createElement(
|
|
9034
9033
|
import_editor_ui14.PopoverHeader,
|
|
9035
9034
|
{
|
|
9036
9035
|
title: (0, import_i18n56.__)("Transform settings", "elementor"),
|
|
9037
9036
|
onClose: popupState.close,
|
|
9038
|
-
icon: /* @__PURE__ */
|
|
9037
|
+
icon: /* @__PURE__ */ React112.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
|
|
9039
9038
|
}
|
|
9040
9039
|
),
|
|
9041
|
-
/* @__PURE__ */
|
|
9042
|
-
/* @__PURE__ */
|
|
9040
|
+
/* @__PURE__ */ React112.createElement(import_ui96.Divider, null),
|
|
9041
|
+
/* @__PURE__ */ React112.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React112.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(import_ui96.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React112.createElement(import_ui96.Divider, null)), /* @__PURE__ */ React112.createElement(ChildrenPerspectiveControl, null)))
|
|
9043
9042
|
);
|
|
9044
9043
|
};
|
|
9045
9044
|
|
|
@@ -9048,27 +9047,27 @@ var SIZE11 = "tiny";
|
|
|
9048
9047
|
var TransformRepeaterControl = createControl(
|
|
9049
9048
|
({ showChildrenPerspective }) => {
|
|
9050
9049
|
const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
|
|
9051
|
-
const headerRef = (0,
|
|
9052
|
-
const popupState = (0,
|
|
9053
|
-
return /* @__PURE__ */
|
|
9050
|
+
const headerRef = (0, import_react66.useRef)(null);
|
|
9051
|
+
const popupState = (0, import_ui97.usePopupState)({ variant: "popover" });
|
|
9052
|
+
return /* @__PURE__ */ React113.createElement(PropProvider, { ...context }, /* @__PURE__ */ React113.createElement(
|
|
9054
9053
|
TransformSettingsControl,
|
|
9055
9054
|
{
|
|
9056
9055
|
popupState,
|
|
9057
9056
|
anchorRef: headerRef,
|
|
9058
9057
|
showChildrenPerspective
|
|
9059
9058
|
}
|
|
9060
|
-
), /* @__PURE__ */
|
|
9059
|
+
), /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React113.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
|
|
9061
9060
|
}
|
|
9062
9061
|
);
|
|
9063
|
-
var ToolTip = /* @__PURE__ */
|
|
9064
|
-
|
|
9062
|
+
var ToolTip = /* @__PURE__ */ React113.createElement(
|
|
9063
|
+
import_ui97.Box,
|
|
9065
9064
|
{
|
|
9066
9065
|
component: "span",
|
|
9067
9066
|
"aria-label": void 0,
|
|
9068
9067
|
sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
|
|
9069
9068
|
},
|
|
9070
|
-
/* @__PURE__ */
|
|
9071
|
-
/* @__PURE__ */
|
|
9069
|
+
/* @__PURE__ */ React113.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
|
|
9070
|
+
/* @__PURE__ */ React113.createElement(import_ui97.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
|
|
9072
9071
|
);
|
|
9073
9072
|
var Repeater2 = ({
|
|
9074
9073
|
headerRef,
|
|
@@ -9082,21 +9081,21 @@ var Repeater2 = ({
|
|
|
9082
9081
|
return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
|
|
9083
9082
|
};
|
|
9084
9083
|
const shouldDisableAddItem = !getInitialValue2();
|
|
9085
|
-
return /* @__PURE__ */
|
|
9084
|
+
return /* @__PURE__ */ React113.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React113.createElement(
|
|
9086
9085
|
ControlRepeater,
|
|
9087
9086
|
{
|
|
9088
9087
|
initial: getInitialValue2() ?? initialTransformValue,
|
|
9089
9088
|
propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
|
|
9090
9089
|
},
|
|
9091
|
-
/* @__PURE__ */
|
|
9090
|
+
/* @__PURE__ */ React113.createElement(
|
|
9092
9091
|
RepeaterHeader,
|
|
9093
9092
|
{
|
|
9094
9093
|
label: (0, import_i18n57.__)("Transform", "elementor"),
|
|
9095
|
-
adornment: () => /* @__PURE__ */
|
|
9094
|
+
adornment: () => /* @__PURE__ */ React113.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
|
|
9096
9095
|
ref: headerRef
|
|
9097
9096
|
},
|
|
9098
|
-
/* @__PURE__ */
|
|
9099
|
-
/* @__PURE__ */
|
|
9097
|
+
/* @__PURE__ */ React113.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
|
|
9098
|
+
/* @__PURE__ */ React113.createElement(
|
|
9100
9099
|
TooltipAddItemAction,
|
|
9101
9100
|
{
|
|
9102
9101
|
disabled: shouldDisableAddItem,
|
|
@@ -9106,15 +9105,15 @@ var Repeater2 = ({
|
|
|
9106
9105
|
}
|
|
9107
9106
|
)
|
|
9108
9107
|
),
|
|
9109
|
-
/* @__PURE__ */
|
|
9108
|
+
/* @__PURE__ */ React113.createElement(ItemsContainer, null, /* @__PURE__ */ React113.createElement(
|
|
9110
9109
|
Item,
|
|
9111
9110
|
{
|
|
9112
9111
|
Icon: TransformIcon,
|
|
9113
9112
|
Label: TransformLabel,
|
|
9114
|
-
actions: /* @__PURE__ */
|
|
9113
|
+
actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(DisableItemAction, null), /* @__PURE__ */ React113.createElement(RemoveItemAction, null))
|
|
9115
9114
|
}
|
|
9116
9115
|
)),
|
|
9117
|
-
/* @__PURE__ */
|
|
9116
|
+
/* @__PURE__ */ React113.createElement(EditItemPopover, null, /* @__PURE__ */ React113.createElement(TransformContent, null))
|
|
9118
9117
|
));
|
|
9119
9118
|
};
|
|
9120
9119
|
var TransformBasePopoverTrigger = ({
|
|
@@ -9123,29 +9122,29 @@ var TransformBasePopoverTrigger = ({
|
|
|
9123
9122
|
}) => {
|
|
9124
9123
|
const { bind } = useBoundProp();
|
|
9125
9124
|
const titleLabel = (0, import_i18n57.__)("Transform settings", "elementor");
|
|
9126
|
-
return bind !== repeaterBindKey ? null : /* @__PURE__ */
|
|
9125
|
+
return bind !== repeaterBindKey ? null : /* @__PURE__ */ React113.createElement(import_ui97.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(import_ui97.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui97.bindTrigger)(popupState) }, /* @__PURE__ */ React113.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
|
|
9127
9126
|
};
|
|
9128
9127
|
|
|
9129
9128
|
// src/controls/transition-control/transition-repeater-control.tsx
|
|
9130
|
-
var
|
|
9131
|
-
var
|
|
9129
|
+
var React116 = __toESM(require("react"));
|
|
9130
|
+
var import_react69 = require("react");
|
|
9132
9131
|
var import_editor_props57 = require("@elementor/editor-props");
|
|
9133
9132
|
var import_icons39 = require("@elementor/icons");
|
|
9134
|
-
var
|
|
9133
|
+
var import_ui100 = require("@elementor/ui");
|
|
9135
9134
|
var import_utils8 = require("@elementor/utils");
|
|
9136
9135
|
var import_i18n60 = require("@wordpress/i18n");
|
|
9137
9136
|
|
|
9138
9137
|
// src/controls/selection-size-control.tsx
|
|
9139
|
-
var
|
|
9140
|
-
var
|
|
9138
|
+
var React114 = __toESM(require("react"));
|
|
9139
|
+
var import_react67 = require("react");
|
|
9141
9140
|
var import_editor_props55 = require("@elementor/editor-props");
|
|
9142
|
-
var
|
|
9141
|
+
var import_ui98 = require("@elementor/ui");
|
|
9143
9142
|
var SelectionSizeControl = createControl(
|
|
9144
9143
|
({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
|
|
9145
9144
|
const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
|
|
9146
|
-
const rowRef = (0,
|
|
9145
|
+
const rowRef = (0, import_react67.useRef)(null);
|
|
9147
9146
|
const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
|
|
9148
|
-
const currentSizeConfig = (0,
|
|
9147
|
+
const currentSizeConfig = (0, import_react67.useMemo)(() => {
|
|
9149
9148
|
switch (value.selection.$$type) {
|
|
9150
9149
|
case "key-value":
|
|
9151
9150
|
return sizeConfigMap[value?.selection?.value.value.value || ""];
|
|
@@ -9156,7 +9155,7 @@ var SelectionSizeControl = createControl(
|
|
|
9156
9155
|
}
|
|
9157
9156
|
}, [value, sizeConfigMap]);
|
|
9158
9157
|
const SelectionComponent = selectionConfig.component;
|
|
9159
|
-
return /* @__PURE__ */
|
|
9158
|
+
return /* @__PURE__ */ React114.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React114.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React114.createElement(
|
|
9160
9159
|
SizeControl,
|
|
9161
9160
|
{
|
|
9162
9161
|
anchorRef: rowRef,
|
|
@@ -9357,12 +9356,12 @@ function subscribeToTransitionEvent() {
|
|
|
9357
9356
|
}
|
|
9358
9357
|
|
|
9359
9358
|
// src/controls/transition-control/transition-selector.tsx
|
|
9360
|
-
var
|
|
9361
|
-
var
|
|
9359
|
+
var React115 = __toESM(require("react"));
|
|
9360
|
+
var import_react68 = require("react");
|
|
9362
9361
|
var import_editor_props56 = require("@elementor/editor-props");
|
|
9363
9362
|
var import_editor_ui15 = require("@elementor/editor-ui");
|
|
9364
9363
|
var import_icons38 = require("@elementor/icons");
|
|
9365
|
-
var
|
|
9364
|
+
var import_ui99 = require("@elementor/ui");
|
|
9366
9365
|
var import_i18n59 = require("@wordpress/i18n");
|
|
9367
9366
|
|
|
9368
9367
|
// src/utils/tracking.ts
|
|
@@ -9444,9 +9443,9 @@ var TransitionSelector = ({
|
|
|
9444
9443
|
const {
|
|
9445
9444
|
key: { value: transitionLabel }
|
|
9446
9445
|
} = value;
|
|
9447
|
-
const defaultRef = (0,
|
|
9448
|
-
const popoverState = (0,
|
|
9449
|
-
const disabledCategories = (0,
|
|
9446
|
+
const defaultRef = (0, import_react68.useRef)(null);
|
|
9447
|
+
const popoverState = (0, import_ui99.usePopupState)({ variant: "popover" });
|
|
9448
|
+
const disabledCategories = (0, import_react68.useMemo)(() => {
|
|
9450
9449
|
return new Set(
|
|
9451
9450
|
transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
|
|
9452
9451
|
);
|
|
@@ -9490,27 +9489,27 @@ var TransitionSelector = ({
|
|
|
9490
9489
|
left: rect.right + 36
|
|
9491
9490
|
};
|
|
9492
9491
|
};
|
|
9493
|
-
return /* @__PURE__ */
|
|
9494
|
-
|
|
9492
|
+
return /* @__PURE__ */ React115.createElement(import_ui99.Box, { ref: defaultRef }, /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
|
|
9493
|
+
import_ui99.UnstableTag,
|
|
9495
9494
|
{
|
|
9496
9495
|
variant: "outlined",
|
|
9497
9496
|
label: transitionLabel,
|
|
9498
|
-
endIcon: /* @__PURE__ */
|
|
9499
|
-
...(0,
|
|
9497
|
+
endIcon: /* @__PURE__ */ React115.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
|
|
9498
|
+
...(0, import_ui99.bindTrigger)(popoverState),
|
|
9500
9499
|
fullWidth: true
|
|
9501
9500
|
}
|
|
9502
|
-
)), /* @__PURE__ */
|
|
9503
|
-
|
|
9501
|
+
)), /* @__PURE__ */ React115.createElement(
|
|
9502
|
+
import_ui99.Popover,
|
|
9504
9503
|
{
|
|
9505
9504
|
disablePortal: true,
|
|
9506
9505
|
disableScrollLock: true,
|
|
9507
|
-
...(0,
|
|
9506
|
+
...(0, import_ui99.bindPopover)(popoverState),
|
|
9508
9507
|
anchorReference: "anchorPosition",
|
|
9509
9508
|
anchorPosition: getAnchorPosition(),
|
|
9510
9509
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
9511
9510
|
transformOrigin: { vertical: "top", horizontal: "left" }
|
|
9512
9511
|
},
|
|
9513
|
-
/* @__PURE__ */
|
|
9512
|
+
/* @__PURE__ */ React115.createElement(
|
|
9514
9513
|
ItemSelector,
|
|
9515
9514
|
{
|
|
9516
9515
|
itemsList: getItemList(),
|
|
@@ -9521,8 +9520,8 @@ var TransitionSelector = ({
|
|
|
9521
9520
|
title: (0, import_i18n59.__)("Transition Property", "elementor"),
|
|
9522
9521
|
icon: import_icons38.VariationsIcon,
|
|
9523
9522
|
disabledItems: includeCurrentValueInOptions(value, disabledItems),
|
|
9524
|
-
categoryItemContentTemplate: (item) => /* @__PURE__ */
|
|
9525
|
-
|
|
9523
|
+
categoryItemContentTemplate: (item) => /* @__PURE__ */ React115.createElement(
|
|
9524
|
+
import_ui99.Box,
|
|
9526
9525
|
{
|
|
9527
9526
|
sx: {
|
|
9528
9527
|
display: "flex",
|
|
@@ -9531,10 +9530,10 @@ var TransitionSelector = ({
|
|
|
9531
9530
|
width: "100%"
|
|
9532
9531
|
}
|
|
9533
9532
|
},
|
|
9534
|
-
/* @__PURE__ */
|
|
9535
|
-
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */
|
|
9533
|
+
/* @__PURE__ */ React115.createElement("span", null, item.value),
|
|
9534
|
+
showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React115.createElement(import_editor_ui15.PromotionChip, null)
|
|
9536
9535
|
),
|
|
9537
|
-
footer: showPromotion ? /* @__PURE__ */
|
|
9536
|
+
footer: showPromotion ? /* @__PURE__ */ React115.createElement(
|
|
9538
9537
|
import_editor_ui15.PromotionAlert,
|
|
9539
9538
|
{
|
|
9540
9539
|
message: (0, import_i18n59.__)(
|
|
@@ -9653,18 +9652,18 @@ var getInitialValue = (values = []) => {
|
|
|
9653
9652
|
}
|
|
9654
9653
|
return initialTransitionValue;
|
|
9655
9654
|
};
|
|
9656
|
-
var disableAddItemTooltipContent = /* @__PURE__ */
|
|
9657
|
-
|
|
9655
|
+
var disableAddItemTooltipContent = /* @__PURE__ */ React116.createElement(
|
|
9656
|
+
import_ui100.Alert,
|
|
9658
9657
|
{
|
|
9659
9658
|
sx: {
|
|
9660
9659
|
width: 280,
|
|
9661
9660
|
gap: 0.5
|
|
9662
9661
|
},
|
|
9663
9662
|
color: "secondary",
|
|
9664
|
-
icon: /* @__PURE__ */
|
|
9663
|
+
icon: /* @__PURE__ */ React116.createElement(import_icons39.InfoCircleFilledIcon, null)
|
|
9665
9664
|
},
|
|
9666
|
-
/* @__PURE__ */
|
|
9667
|
-
/* @__PURE__ */
|
|
9665
|
+
/* @__PURE__ */ React116.createElement(import_ui100.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
|
|
9666
|
+
/* @__PURE__ */ React116.createElement(import_ui100.Box, { component: "span" }, /* @__PURE__ */ React116.createElement(import_ui100.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
|
|
9668
9667
|
);
|
|
9669
9668
|
var TransitionRepeaterControl = createControl(
|
|
9670
9669
|
({
|
|
@@ -9672,14 +9671,14 @@ var TransitionRepeaterControl = createControl(
|
|
|
9672
9671
|
currentStyleState
|
|
9673
9672
|
}) => {
|
|
9674
9673
|
const currentStyleIsNormal = currentStyleState === null;
|
|
9675
|
-
const [recentlyUsedList, setRecentlyUsedList] = (0,
|
|
9674
|
+
const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
|
|
9676
9675
|
const proInstalled = (0, import_utils8.hasProInstalled)();
|
|
9677
9676
|
const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
|
|
9678
|
-
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0,
|
|
9677
|
+
const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
|
|
9679
9678
|
() => getDisabledItemLabels(value),
|
|
9680
9679
|
[value]
|
|
9681
9680
|
);
|
|
9682
|
-
const allowedTransitionSet = (0,
|
|
9681
|
+
const allowedTransitionSet = (0, import_react69.useMemo)(() => {
|
|
9683
9682
|
const set = /* @__PURE__ */ new Set();
|
|
9684
9683
|
transitionProperties.forEach((category) => {
|
|
9685
9684
|
category.properties.forEach((prop) => {
|
|
@@ -9690,7 +9689,7 @@ var TransitionRepeaterControl = createControl(
|
|
|
9690
9689
|
});
|
|
9691
9690
|
return set;
|
|
9692
9691
|
}, [proInstalled]);
|
|
9693
|
-
(0,
|
|
9692
|
+
(0, import_react69.useEffect)(() => {
|
|
9694
9693
|
if (!value || value.length === 0) {
|
|
9695
9694
|
return;
|
|
9696
9695
|
}
|
|
@@ -9702,12 +9701,12 @@ var TransitionRepeaterControl = createControl(
|
|
|
9702
9701
|
setValue(sanitized);
|
|
9703
9702
|
}
|
|
9704
9703
|
}, [allowedTransitionSet]);
|
|
9705
|
-
(0,
|
|
9704
|
+
(0, import_react69.useEffect)(() => {
|
|
9706
9705
|
recentlyUsedListGetter().then(setRecentlyUsedList);
|
|
9707
9706
|
}, [recentlyUsedListGetter]);
|
|
9708
|
-
const allPropertiesUsed = (0,
|
|
9707
|
+
const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
|
|
9709
9708
|
const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
|
|
9710
|
-
return /* @__PURE__ */
|
|
9709
|
+
return /* @__PURE__ */ React116.createElement(
|
|
9711
9710
|
RepeatableControl,
|
|
9712
9711
|
{
|
|
9713
9712
|
label: (0, import_i18n60.__)("Transitions", "elementor"),
|
|
@@ -9734,11 +9733,11 @@ var TransitionRepeaterControl = createControl(
|
|
|
9734
9733
|
);
|
|
9735
9734
|
|
|
9736
9735
|
// src/controls/date-time-control.tsx
|
|
9737
|
-
var
|
|
9736
|
+
var React117 = __toESM(require("react"));
|
|
9738
9737
|
var dayjs = __toESM(require("dayjs"));
|
|
9739
9738
|
var import_editor_props58 = require("@elementor/editor-props");
|
|
9740
9739
|
var import_editor_props59 = require("@elementor/editor-props");
|
|
9741
|
-
var
|
|
9740
|
+
var import_ui101 = require("@elementor/ui");
|
|
9742
9741
|
var DATE_FORMAT = "YYYY-MM-DD";
|
|
9743
9742
|
var TIME_FORMAT = "HH:mm";
|
|
9744
9743
|
var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
@@ -9782,8 +9781,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9782
9781
|
const base = dayjs.default();
|
|
9783
9782
|
return base.hour(h).minute(m).second(0).millisecond(0);
|
|
9784
9783
|
};
|
|
9785
|
-
return /* @__PURE__ */
|
|
9786
|
-
|
|
9784
|
+
return /* @__PURE__ */ React117.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(import_ui101.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(import_ui101.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React117.createElement(
|
|
9785
|
+
import_ui101.DatePicker,
|
|
9787
9786
|
{
|
|
9788
9787
|
value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
|
|
9789
9788
|
onChange: (v) => handleChange({ date: v }, { bind: "date" }),
|
|
@@ -9794,8 +9793,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9794
9793
|
openPickerIcon: { fontSize: "tiny" }
|
|
9795
9794
|
}
|
|
9796
9795
|
}
|
|
9797
|
-
)), /* @__PURE__ */
|
|
9798
|
-
|
|
9796
|
+
)), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React117.createElement(
|
|
9797
|
+
import_ui101.TimePicker,
|
|
9799
9798
|
{
|
|
9800
9799
|
value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
|
|
9801
9800
|
onChange: (v) => handleChange({ time: v }, { bind: "time" }),
|
|
@@ -9810,15 +9809,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
|
|
|
9810
9809
|
});
|
|
9811
9810
|
|
|
9812
9811
|
// src/controls/date-range-control.tsx
|
|
9813
|
-
var
|
|
9812
|
+
var React119 = __toESM(require("react"));
|
|
9814
9813
|
var import_editor_props61 = require("@elementor/editor-props");
|
|
9815
|
-
var
|
|
9814
|
+
var import_ui103 = require("@elementor/ui");
|
|
9816
9815
|
var import_i18n61 = require("@wordpress/i18n");
|
|
9817
9816
|
|
|
9818
9817
|
// src/controls/date-string-control.tsx
|
|
9819
|
-
var
|
|
9818
|
+
var React118 = __toESM(require("react"));
|
|
9820
9819
|
var import_editor_props60 = require("@elementor/editor-props");
|
|
9821
|
-
var
|
|
9820
|
+
var import_ui102 = require("@elementor/ui");
|
|
9822
9821
|
|
|
9823
9822
|
// src/utils/date-time.ts
|
|
9824
9823
|
var dayjs2 = __toESM(require("dayjs"));
|
|
@@ -9875,8 +9874,8 @@ var DateStringControl = createControl(
|
|
|
9875
9874
|
}
|
|
9876
9875
|
setValue(newValue.format(format));
|
|
9877
9876
|
};
|
|
9878
|
-
return /* @__PURE__ */
|
|
9879
|
-
|
|
9877
|
+
return /* @__PURE__ */ React118.createElement(import_ui102.LocalizationProvider, null, /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
|
|
9878
|
+
import_ui102.DatePicker,
|
|
9880
9879
|
{
|
|
9881
9880
|
value: parseDateString(value ?? ""),
|
|
9882
9881
|
onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
|
|
@@ -9904,34 +9903,34 @@ var DateRangeControl = createControl(() => {
|
|
|
9904
9903
|
const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
|
|
9905
9904
|
const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
|
|
9906
9905
|
const hasInvalidRange = isMaxBeforeMin(minString, maxString);
|
|
9907
|
-
return /* @__PURE__ */
|
|
9906
|
+
return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { gap: 0.75 }, /* @__PURE__ */ React119.createElement(import_ui103.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
|
|
9908
9907
|
BoundDateStringControl,
|
|
9909
9908
|
{
|
|
9910
9909
|
bind: "min",
|
|
9911
9910
|
ariaLabel: RANGE_LABELS.min,
|
|
9912
9911
|
error: hasInvalidRange
|
|
9913
9912
|
}
|
|
9914
|
-
))), /* @__PURE__ */
|
|
9913
|
+
))), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React119.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
|
|
9915
9914
|
BoundDateStringControl,
|
|
9916
9915
|
{
|
|
9917
9916
|
bind: "max",
|
|
9918
9917
|
ariaLabel: RANGE_LABELS.max,
|
|
9919
9918
|
error: hasInvalidRange
|
|
9920
9919
|
}
|
|
9921
|
-
)))), hasInvalidRange && /* @__PURE__ */
|
|
9920
|
+
)))), hasInvalidRange && /* @__PURE__ */ React119.createElement(import_ui103.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
|
|
9922
9921
|
});
|
|
9923
9922
|
var BoundDateStringControl = ({
|
|
9924
9923
|
bind,
|
|
9925
9924
|
ariaLabel,
|
|
9926
9925
|
error
|
|
9927
9926
|
}) => {
|
|
9928
|
-
return /* @__PURE__ */
|
|
9927
|
+
return /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
|
|
9929
9928
|
};
|
|
9930
9929
|
|
|
9931
9930
|
// src/controls/time-string-control.tsx
|
|
9932
|
-
var
|
|
9931
|
+
var React120 = __toESM(require("react"));
|
|
9933
9932
|
var import_editor_props62 = require("@elementor/editor-props");
|
|
9934
|
-
var
|
|
9933
|
+
var import_ui104 = require("@elementor/ui");
|
|
9935
9934
|
var TimeStringControl = createControl(
|
|
9936
9935
|
({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
|
|
9937
9936
|
const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
|
|
@@ -9957,8 +9956,8 @@ var TimeStringControl = createControl(
|
|
|
9957
9956
|
}
|
|
9958
9957
|
setValue(newValue.format(format));
|
|
9959
9958
|
};
|
|
9960
|
-
return /* @__PURE__ */
|
|
9961
|
-
|
|
9959
|
+
return /* @__PURE__ */ React120.createElement(import_ui104.LocalizationProvider, null, /* @__PURE__ */ React120.createElement(ControlActions, null, /* @__PURE__ */ React120.createElement(
|
|
9960
|
+
import_ui104.TimePicker,
|
|
9962
9961
|
{
|
|
9963
9962
|
value: parseTimeString(value ?? ""),
|
|
9964
9963
|
onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
|
|
@@ -9970,9 +9969,9 @@ var TimeStringControl = createControl(
|
|
|
9970
9969
|
);
|
|
9971
9970
|
|
|
9972
9971
|
// src/controls/time-range-control.tsx
|
|
9973
|
-
var
|
|
9972
|
+
var React121 = __toESM(require("react"));
|
|
9974
9973
|
var import_editor_props63 = require("@elementor/editor-props");
|
|
9975
|
-
var
|
|
9974
|
+
var import_ui105 = require("@elementor/ui");
|
|
9976
9975
|
var import_i18n62 = require("@wordpress/i18n");
|
|
9977
9976
|
var RANGE_LABELS2 = {
|
|
9978
9977
|
min: (0, import_i18n62.__)("Start time", "elementor"),
|
|
@@ -9980,22 +9979,22 @@ var RANGE_LABELS2 = {
|
|
|
9980
9979
|
};
|
|
9981
9980
|
var TimeRangeControl = createControl(() => {
|
|
9982
9981
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
|
|
9983
|
-
return /* @__PURE__ */
|
|
9982
|
+
return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(import_ui105.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React121.createElement(import_ui105.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
|
|
9984
9983
|
});
|
|
9985
9984
|
var BoundTimeStringControl = ({ bind, ariaLabel }) => {
|
|
9986
|
-
return /* @__PURE__ */
|
|
9985
|
+
return /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React121.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
|
|
9987
9986
|
};
|
|
9988
9987
|
|
|
9989
9988
|
// src/controls/inline-editing-control.tsx
|
|
9990
|
-
var
|
|
9991
|
-
var
|
|
9989
|
+
var React125 = __toESM(require("react"));
|
|
9990
|
+
var import_react75 = require("react");
|
|
9992
9991
|
var import_editor_props65 = require("@elementor/editor-props");
|
|
9993
|
-
var
|
|
9992
|
+
var import_ui109 = require("@elementor/ui");
|
|
9994
9993
|
|
|
9995
9994
|
// src/components/inline-editor.tsx
|
|
9996
|
-
var
|
|
9997
|
-
var
|
|
9998
|
-
var
|
|
9995
|
+
var React122 = __toESM(require("react"));
|
|
9996
|
+
var import_react70 = require("react");
|
|
9997
|
+
var import_ui106 = require("@elementor/ui");
|
|
9999
9998
|
var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
|
|
10000
9999
|
var import_extension_document = __toESM(require("@tiptap/extension-document"));
|
|
10001
10000
|
var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
|
|
@@ -10008,7 +10007,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
|
|
|
10008
10007
|
var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
|
|
10009
10008
|
var import_extension_text = __toESM(require("@tiptap/extension-text"));
|
|
10010
10009
|
var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
|
|
10011
|
-
var
|
|
10010
|
+
var import_react71 = require("@tiptap/react");
|
|
10012
10011
|
|
|
10013
10012
|
// src/utils/inline-editing.ts
|
|
10014
10013
|
var import_editor_props64 = require("@elementor/editor-props");
|
|
@@ -10040,7 +10039,7 @@ function extractInlineHtmlContent(propValue) {
|
|
|
10040
10039
|
var ITALIC_KEYBOARD_SHORTCUT = "i";
|
|
10041
10040
|
var BOLD_KEYBOARD_SHORTCUT = "b";
|
|
10042
10041
|
var UNDERLINE_KEYBOARD_SHORTCUT = "u";
|
|
10043
|
-
var InlineEditor =
|
|
10042
|
+
var InlineEditor = React122.forwardRef((props, ref) => {
|
|
10044
10043
|
const {
|
|
10045
10044
|
value,
|
|
10046
10045
|
setValue,
|
|
@@ -10057,8 +10056,8 @@ var InlineEditor = React121.forwardRef((props, ref) => {
|
|
|
10057
10056
|
onSelectionEnd,
|
|
10058
10057
|
mountElement = null
|
|
10059
10058
|
} = props;
|
|
10060
|
-
const containerRef = (0,
|
|
10061
|
-
const onBlurRef = (0,
|
|
10059
|
+
const containerRef = (0, import_react70.useRef)(null);
|
|
10060
|
+
const onBlurRef = (0, import_react70.useRef)(onBlur);
|
|
10062
10061
|
onBlurRef.current = onBlur;
|
|
10063
10062
|
const documentContentSettings = !!expectedTag ? "block+" : "inline*";
|
|
10064
10063
|
const onUpdate = ({ editor: updatedEditor }) => {
|
|
@@ -10080,7 +10079,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
|
|
|
10080
10079
|
...HTMLAttributes,
|
|
10081
10080
|
class: elementClasses
|
|
10082
10081
|
});
|
|
10083
|
-
const editor = (0,
|
|
10082
|
+
const editor = (0, import_react71.useEditor)({
|
|
10084
10083
|
...mountElement ? { element: mountElement } : {},
|
|
10085
10084
|
extensions: [
|
|
10086
10085
|
import_extension_document.default.extend({
|
|
@@ -10153,11 +10152,11 @@ var InlineEditor = React121.forwardRef((props, ref) => {
|
|
|
10153
10152
|
if (mountElement) {
|
|
10154
10153
|
return null;
|
|
10155
10154
|
}
|
|
10156
|
-
return /* @__PURE__ */
|
|
10155
|
+
return /* @__PURE__ */ React122.createElement(import_ui106.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React122.createElement(import_react71.EditorContent, { ref, editor }));
|
|
10157
10156
|
});
|
|
10158
10157
|
var useOnUpdate = (callback, dependencies) => {
|
|
10159
|
-
const hasMounted = (0,
|
|
10160
|
-
(0,
|
|
10158
|
+
const hasMounted = (0, import_react70.useRef)(false);
|
|
10159
|
+
(0, import_react70.useEffect)(() => {
|
|
10161
10160
|
if (hasMounted.current) {
|
|
10162
10161
|
callback();
|
|
10163
10162
|
} else {
|
|
@@ -10167,19 +10166,19 @@ var useOnUpdate = (callback, dependencies) => {
|
|
|
10167
10166
|
};
|
|
10168
10167
|
|
|
10169
10168
|
// src/components/inline-editor-toolbar.tsx
|
|
10170
|
-
var
|
|
10171
|
-
var
|
|
10169
|
+
var React124 = __toESM(require("react"));
|
|
10170
|
+
var import_react73 = require("react");
|
|
10172
10171
|
var import_editor_elements7 = require("@elementor/editor-elements");
|
|
10173
10172
|
var import_icons41 = require("@elementor/icons");
|
|
10174
|
-
var
|
|
10175
|
-
var
|
|
10173
|
+
var import_ui108 = require("@elementor/ui");
|
|
10174
|
+
var import_react74 = require("@tiptap/react");
|
|
10176
10175
|
var import_i18n64 = require("@wordpress/i18n");
|
|
10177
10176
|
|
|
10178
10177
|
// src/components/url-popover.tsx
|
|
10179
|
-
var
|
|
10180
|
-
var
|
|
10178
|
+
var React123 = __toESM(require("react"));
|
|
10179
|
+
var import_react72 = require("react");
|
|
10181
10180
|
var import_icons40 = require("@elementor/icons");
|
|
10182
|
-
var
|
|
10181
|
+
var import_ui107 = require("@elementor/ui");
|
|
10183
10182
|
var import_i18n63 = require("@wordpress/i18n");
|
|
10184
10183
|
var UrlPopover = ({
|
|
10185
10184
|
popupState,
|
|
@@ -10190,8 +10189,8 @@ var UrlPopover = ({
|
|
|
10190
10189
|
openInNewTab,
|
|
10191
10190
|
onToggleNewTab
|
|
10192
10191
|
}) => {
|
|
10193
|
-
const inputRef = (0,
|
|
10194
|
-
(0,
|
|
10192
|
+
const inputRef = (0, import_react72.useRef)(null);
|
|
10193
|
+
(0, import_react72.useEffect)(() => {
|
|
10195
10194
|
if (popupState.isOpen) {
|
|
10196
10195
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
10197
10196
|
}
|
|
@@ -10200,19 +10199,19 @@ var UrlPopover = ({
|
|
|
10200
10199
|
restoreValue();
|
|
10201
10200
|
popupState.close();
|
|
10202
10201
|
};
|
|
10203
|
-
return /* @__PURE__ */
|
|
10204
|
-
|
|
10202
|
+
return /* @__PURE__ */ React123.createElement(
|
|
10203
|
+
import_ui107.Popover,
|
|
10205
10204
|
{
|
|
10206
10205
|
slotProps: {
|
|
10207
10206
|
paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
|
|
10208
10207
|
},
|
|
10209
|
-
...(0,
|
|
10208
|
+
...(0, import_ui107.bindPopover)(popupState),
|
|
10210
10209
|
anchorOrigin: { vertical: "top", horizontal: "left" },
|
|
10211
10210
|
transformOrigin: { vertical: "top", horizontal: "left" },
|
|
10212
10211
|
onClose: handleClose
|
|
10213
10212
|
},
|
|
10214
|
-
/* @__PURE__ */
|
|
10215
|
-
|
|
10213
|
+
/* @__PURE__ */ React123.createElement(import_ui107.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React123.createElement(
|
|
10214
|
+
import_ui107.TextField,
|
|
10216
10215
|
{
|
|
10217
10216
|
value,
|
|
10218
10217
|
onChange,
|
|
@@ -10224,8 +10223,8 @@ var UrlPopover = ({
|
|
|
10224
10223
|
InputProps: { sx: { borderRadius: "8px" } },
|
|
10225
10224
|
onKeyUp: (event) => event.key === "Enter" && handleClose()
|
|
10226
10225
|
}
|
|
10227
|
-
), /* @__PURE__ */
|
|
10228
|
-
|
|
10226
|
+
), /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React123.createElement(
|
|
10227
|
+
import_ui107.ToggleButton,
|
|
10229
10228
|
{
|
|
10230
10229
|
size: "tiny",
|
|
10231
10230
|
value: "newTab",
|
|
@@ -10234,7 +10233,7 @@ var UrlPopover = ({
|
|
|
10234
10233
|
"aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
|
|
10235
10234
|
sx: { borderRadius: "8px" }
|
|
10236
10235
|
},
|
|
10237
|
-
/* @__PURE__ */
|
|
10236
|
+
/* @__PURE__ */ React123.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
|
|
10238
10237
|
)))
|
|
10239
10238
|
);
|
|
10240
10239
|
};
|
|
@@ -10246,16 +10245,16 @@ var InlineEditorToolbar = ({
|
|
|
10246
10245
|
sx = {},
|
|
10247
10246
|
inControlPanel = false
|
|
10248
10247
|
}) => {
|
|
10249
|
-
const [urlValue, setUrlValue] = (0,
|
|
10250
|
-
const [openInNewTab, setOpenInNewTab] = (0,
|
|
10251
|
-
const toolbarRef = (0,
|
|
10252
|
-
const linkPopupState = (0,
|
|
10248
|
+
const [urlValue, setUrlValue] = (0, import_react73.useState)("");
|
|
10249
|
+
const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
|
|
10250
|
+
const toolbarRef = (0, import_react73.useRef)(null);
|
|
10251
|
+
const linkPopupState = (0, import_ui108.usePopupState)({ variant: "popover" });
|
|
10253
10252
|
const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
|
|
10254
|
-
const editorState = (0,
|
|
10253
|
+
const editorState = (0, import_react74.useEditorState)({
|
|
10255
10254
|
editor,
|
|
10256
10255
|
selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
|
|
10257
10256
|
});
|
|
10258
|
-
const formatButtonsList = (0,
|
|
10257
|
+
const formatButtonsList = (0, import_react73.useMemo)(() => {
|
|
10259
10258
|
const buttons = Object.values(formatButtons);
|
|
10260
10259
|
if (isElementClickable) {
|
|
10261
10260
|
return buttons.filter((button) => button.action !== "link");
|
|
@@ -10292,13 +10291,13 @@ var InlineEditorToolbar = ({
|
|
|
10292
10291
|
}
|
|
10293
10292
|
linkPopupState.close();
|
|
10294
10293
|
};
|
|
10295
|
-
(0,
|
|
10294
|
+
(0, import_react73.useEffect)(() => {
|
|
10296
10295
|
if (!inControlPanel) {
|
|
10297
10296
|
editor?.commands?.focus();
|
|
10298
10297
|
}
|
|
10299
10298
|
}, [editor, inControlPanel]);
|
|
10300
|
-
return /* @__PURE__ */
|
|
10301
|
-
|
|
10299
|
+
return /* @__PURE__ */ React124.createElement(
|
|
10300
|
+
import_ui108.Box,
|
|
10302
10301
|
{
|
|
10303
10302
|
ref: toolbarRef,
|
|
10304
10303
|
sx: {
|
|
@@ -10331,9 +10330,9 @@ var InlineEditorToolbar = ({
|
|
|
10331
10330
|
}
|
|
10332
10331
|
}
|
|
10333
10332
|
},
|
|
10334
|
-
/* @__PURE__ */
|
|
10335
|
-
/* @__PURE__ */
|
|
10336
|
-
|
|
10333
|
+
/* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React124.createElement(import_ui108.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
|
|
10334
|
+
/* @__PURE__ */ React124.createElement(
|
|
10335
|
+
import_ui108.ToggleButtonGroup,
|
|
10337
10336
|
{
|
|
10338
10337
|
value: editorState,
|
|
10339
10338
|
size: "tiny",
|
|
@@ -10341,7 +10340,7 @@ var InlineEditorToolbar = ({
|
|
|
10341
10340
|
display: "flex",
|
|
10342
10341
|
gap: 0.5,
|
|
10343
10342
|
border: "none",
|
|
10344
|
-
[`& .${
|
|
10343
|
+
[`& .${import_ui108.toggleButtonGroupClasses.firstButton}, & .${import_ui108.toggleButtonGroupClasses.middleButton}, & .${import_ui108.toggleButtonGroupClasses.lastButton}`]: {
|
|
10345
10344
|
borderRadius: "8px",
|
|
10346
10345
|
border: "none",
|
|
10347
10346
|
marginLeft: 0,
|
|
@@ -10362,8 +10361,8 @@ var InlineEditorToolbar = ({
|
|
|
10362
10361
|
}
|
|
10363
10362
|
}
|
|
10364
10363
|
},
|
|
10365
|
-
formatButtonsList.map((button) => /* @__PURE__ */
|
|
10366
|
-
|
|
10364
|
+
formatButtonsList.map((button) => /* @__PURE__ */ React124.createElement(import_ui108.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React124.createElement(
|
|
10365
|
+
import_ui108.ToggleButton,
|
|
10367
10366
|
{
|
|
10368
10367
|
value: button.action,
|
|
10369
10368
|
"aria-label": button.label,
|
|
@@ -10380,7 +10379,7 @@ var InlineEditorToolbar = ({
|
|
|
10380
10379
|
button.icon
|
|
10381
10380
|
)))
|
|
10382
10381
|
),
|
|
10383
|
-
/* @__PURE__ */
|
|
10382
|
+
/* @__PURE__ */ React124.createElement(
|
|
10384
10383
|
UrlPopover,
|
|
10385
10384
|
{
|
|
10386
10385
|
popupState: linkPopupState,
|
|
@@ -10404,7 +10403,7 @@ var checkIfElementIsClickable = (elementId) => {
|
|
|
10404
10403
|
var toolbarButtons = {
|
|
10405
10404
|
clear: {
|
|
10406
10405
|
label: (0, import_i18n64.__)("Clear", "elementor"),
|
|
10407
|
-
icon: /* @__PURE__ */
|
|
10406
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
|
|
10408
10407
|
action: "clear",
|
|
10409
10408
|
method: (editor) => {
|
|
10410
10409
|
editor.chain().focus().clearNodes().unsetAllMarks().run();
|
|
@@ -10412,7 +10411,7 @@ var toolbarButtons = {
|
|
|
10412
10411
|
},
|
|
10413
10412
|
bold: {
|
|
10414
10413
|
label: (0, import_i18n64.__)("Bold", "elementor"),
|
|
10415
|
-
icon: /* @__PURE__ */
|
|
10414
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
|
|
10416
10415
|
action: "bold",
|
|
10417
10416
|
method: (editor) => {
|
|
10418
10417
|
editor.chain().focus().toggleBold().run();
|
|
@@ -10420,7 +10419,7 @@ var toolbarButtons = {
|
|
|
10420
10419
|
},
|
|
10421
10420
|
italic: {
|
|
10422
10421
|
label: (0, import_i18n64.__)("Italic", "elementor"),
|
|
10423
|
-
icon: /* @__PURE__ */
|
|
10422
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
|
|
10424
10423
|
action: "italic",
|
|
10425
10424
|
method: (editor) => {
|
|
10426
10425
|
editor.chain().focus().toggleItalic().run();
|
|
@@ -10428,7 +10427,7 @@ var toolbarButtons = {
|
|
|
10428
10427
|
},
|
|
10429
10428
|
underline: {
|
|
10430
10429
|
label: (0, import_i18n64.__)("Underline", "elementor"),
|
|
10431
|
-
icon: /* @__PURE__ */
|
|
10430
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
|
|
10432
10431
|
action: "underline",
|
|
10433
10432
|
method: (editor) => {
|
|
10434
10433
|
editor.chain().focus().toggleUnderline().run();
|
|
@@ -10436,7 +10435,7 @@ var toolbarButtons = {
|
|
|
10436
10435
|
},
|
|
10437
10436
|
strike: {
|
|
10438
10437
|
label: (0, import_i18n64.__)("Strikethrough", "elementor"),
|
|
10439
|
-
icon: /* @__PURE__ */
|
|
10438
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
|
|
10440
10439
|
action: "strike",
|
|
10441
10440
|
method: (editor) => {
|
|
10442
10441
|
editor.chain().focus().toggleStrike().run();
|
|
@@ -10444,7 +10443,7 @@ var toolbarButtons = {
|
|
|
10444
10443
|
},
|
|
10445
10444
|
superscript: {
|
|
10446
10445
|
label: (0, import_i18n64.__)("Superscript", "elementor"),
|
|
10447
|
-
icon: /* @__PURE__ */
|
|
10446
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
|
|
10448
10447
|
action: "superscript",
|
|
10449
10448
|
method: (editor) => {
|
|
10450
10449
|
editor.chain().focus().toggleSuperscript().run();
|
|
@@ -10452,7 +10451,7 @@ var toolbarButtons = {
|
|
|
10452
10451
|
},
|
|
10453
10452
|
subscript: {
|
|
10454
10453
|
label: (0, import_i18n64.__)("Subscript", "elementor"),
|
|
10455
|
-
icon: /* @__PURE__ */
|
|
10454
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
|
|
10456
10455
|
action: "subscript",
|
|
10457
10456
|
method: (editor) => {
|
|
10458
10457
|
editor.chain().focus().toggleSubscript().run();
|
|
@@ -10460,7 +10459,7 @@ var toolbarButtons = {
|
|
|
10460
10459
|
},
|
|
10461
10460
|
link: {
|
|
10462
10461
|
label: (0, import_i18n64.__)("Link", "elementor"),
|
|
10463
|
-
icon: /* @__PURE__ */
|
|
10462
|
+
icon: /* @__PURE__ */ React124.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
|
|
10464
10463
|
action: "link",
|
|
10465
10464
|
method: null
|
|
10466
10465
|
}
|
|
@@ -10473,15 +10472,15 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
10473
10472
|
const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
|
|
10474
10473
|
const { value: rawValue } = usePropKeyContext();
|
|
10475
10474
|
const content = value ?? extractInlineHtmlContent(rawValue);
|
|
10476
|
-
const [editor, setEditor] = (0,
|
|
10477
|
-
const handleChange = (0,
|
|
10475
|
+
const [editor, setEditor] = (0, import_react75.useState)(null);
|
|
10476
|
+
const handleChange = (0, import_react75.useCallback)(
|
|
10478
10477
|
(newValue) => {
|
|
10479
10478
|
const html = newValue ?? "";
|
|
10480
10479
|
setValue(html);
|
|
10481
10480
|
},
|
|
10482
10481
|
[setValue]
|
|
10483
10482
|
);
|
|
10484
|
-
return /* @__PURE__ */
|
|
10483
|
+
return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(import_ui109.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React125.createElement(
|
|
10485
10484
|
InlineEditorToolbar,
|
|
10486
10485
|
{
|
|
10487
10486
|
editor,
|
|
@@ -10494,8 +10493,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
10494
10493
|
}),
|
|
10495
10494
|
inControlPanel: true
|
|
10496
10495
|
}
|
|
10497
|
-
), /* @__PURE__ */
|
|
10498
|
-
|
|
10496
|
+
), /* @__PURE__ */ React125.createElement(
|
|
10497
|
+
import_ui109.Box,
|
|
10499
10498
|
{
|
|
10500
10499
|
sx: (theme) => ({
|
|
10501
10500
|
p: 0.8,
|
|
@@ -10539,7 +10538,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
10539
10538
|
...attributes,
|
|
10540
10539
|
...props
|
|
10541
10540
|
},
|
|
10542
|
-
/* @__PURE__ */
|
|
10541
|
+
/* @__PURE__ */ React125.createElement(
|
|
10543
10542
|
InlineEditor,
|
|
10544
10543
|
{
|
|
10545
10544
|
value: content,
|
|
@@ -10556,16 +10555,16 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
|
|
|
10556
10555
|
});
|
|
10557
10556
|
|
|
10558
10557
|
// src/controls/email-form-action-control/index.tsx
|
|
10559
|
-
var
|
|
10558
|
+
var React129 = __toESM(require("react"));
|
|
10560
10559
|
var import_editor_props68 = require("@elementor/editor-props");
|
|
10561
10560
|
var import_editor_ui17 = require("@elementor/editor-ui");
|
|
10562
|
-
var
|
|
10561
|
+
var import_ui113 = require("@elementor/ui");
|
|
10563
10562
|
var import_i18n66 = require("@wordpress/i18n");
|
|
10564
10563
|
|
|
10565
10564
|
// src/controls/email-form-action-control/fields.tsx
|
|
10566
|
-
var
|
|
10565
|
+
var React128 = __toESM(require("react"));
|
|
10567
10566
|
var import_editor_ui16 = require("@elementor/editor-ui");
|
|
10568
|
-
var
|
|
10567
|
+
var import_ui112 = require("@elementor/ui");
|
|
10569
10568
|
var import_i18n65 = require("@wordpress/i18n");
|
|
10570
10569
|
|
|
10571
10570
|
// src/hooks/use-form-field-suggestions.ts
|
|
@@ -10655,10 +10654,10 @@ function useFormFieldSuggestions(options) {
|
|
|
10655
10654
|
}
|
|
10656
10655
|
|
|
10657
10656
|
// src/controls/email-form-action-control/email-chips-field.tsx
|
|
10658
|
-
var
|
|
10659
|
-
var
|
|
10657
|
+
var React126 = __toESM(require("react"));
|
|
10658
|
+
var import_react76 = require("react");
|
|
10660
10659
|
var import_editor_props67 = require("@elementor/editor-props");
|
|
10661
|
-
var
|
|
10660
|
+
var import_ui110 = require("@elementor/ui");
|
|
10662
10661
|
|
|
10663
10662
|
// src/controls/email-form-action-control/utils.ts
|
|
10664
10663
|
var import_schema = require("@elementor/schema");
|
|
@@ -10694,10 +10693,10 @@ function resolveMention(raw, suggestions) {
|
|
|
10694
10693
|
}
|
|
10695
10694
|
var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
10696
10695
|
const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
|
|
10697
|
-
const [inputValue, setInputValue] = (0,
|
|
10696
|
+
const [inputValue, setInputValue] = (0, import_react76.useState)("");
|
|
10698
10697
|
const items2 = value || [];
|
|
10699
10698
|
const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
|
|
10700
|
-
const suggestionOptions = (0,
|
|
10699
|
+
const suggestionOptions = (0, import_react76.useMemo)(
|
|
10701
10700
|
() => suggestions.map((suggestion) => `[${suggestion.value}]`),
|
|
10702
10701
|
[suggestions]
|
|
10703
10702
|
);
|
|
@@ -10732,8 +10731,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10732
10731
|
tryAddChip(inputValue);
|
|
10733
10732
|
}
|
|
10734
10733
|
};
|
|
10735
|
-
return /* @__PURE__ */
|
|
10736
|
-
|
|
10734
|
+
return /* @__PURE__ */ React126.createElement(ControlActions, null, /* @__PURE__ */ React126.createElement(
|
|
10735
|
+
import_ui110.Autocomplete,
|
|
10737
10736
|
{
|
|
10738
10737
|
fullWidth: true,
|
|
10739
10738
|
multiple: true,
|
|
@@ -10757,31 +10756,31 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
|
|
|
10757
10756
|
onBlur: handleBlur,
|
|
10758
10757
|
getOptionLabel: (option) => option,
|
|
10759
10758
|
isOptionEqualToValue: (option, val) => option === val,
|
|
10760
|
-
renderInput: (params) => /* @__PURE__ */
|
|
10761
|
-
renderTags: (tagValues, getTagProps) => /* @__PURE__ */
|
|
10759
|
+
renderInput: (params) => /* @__PURE__ */ React126.createElement(import_ui110.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
|
|
10760
|
+
renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React126.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
|
|
10762
10761
|
}
|
|
10763
10762
|
));
|
|
10764
10763
|
});
|
|
10765
|
-
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */
|
|
10764
|
+
var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React126.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(EmailChipsControl, { placeholder, suggestions })));
|
|
10766
10765
|
|
|
10767
10766
|
// src/controls/email-form-action-control/email-field.tsx
|
|
10768
|
-
var
|
|
10769
|
-
var
|
|
10770
|
-
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */
|
|
10767
|
+
var React127 = __toESM(require("react"));
|
|
10768
|
+
var import_ui111 = require("@elementor/ui");
|
|
10769
|
+
var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(TextControl, { placeholder }))));
|
|
10771
10770
|
|
|
10772
10771
|
// src/controls/email-form-action-control/fields.tsx
|
|
10773
10772
|
var SendToField = ({ placeholder }) => {
|
|
10774
10773
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10775
|
-
return /* @__PURE__ */
|
|
10774
|
+
return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(
|
|
10776
10775
|
EmailChipsField,
|
|
10777
10776
|
{
|
|
10778
10777
|
fieldLabel: (0, import_i18n65.__)("Send to", "elementor"),
|
|
10779
10778
|
placeholder,
|
|
10780
10779
|
suggestions
|
|
10781
10780
|
}
|
|
10782
|
-
), shouldShowMentionsInfo() && /* @__PURE__ */
|
|
10781
|
+
), shouldShowMentionsInfo() && /* @__PURE__ */ React128.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n65.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
|
|
10783
10782
|
};
|
|
10784
|
-
var SubjectField = () => /* @__PURE__ */
|
|
10783
|
+
var SubjectField = () => /* @__PURE__ */ React128.createElement(
|
|
10785
10784
|
EmailField,
|
|
10786
10785
|
{
|
|
10787
10786
|
bind: "subject",
|
|
@@ -10791,12 +10790,12 @@ var SubjectField = () => /* @__PURE__ */ React127.createElement(
|
|
|
10791
10790
|
);
|
|
10792
10791
|
var MessageField = () => {
|
|
10793
10792
|
const suggestions = useFormFieldSuggestions();
|
|
10794
|
-
return /* @__PURE__ */
|
|
10793
|
+
return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
|
|
10795
10794
|
"[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
|
|
10796
10795
|
"elementor"
|
|
10797
10796
|
) : (0, import_i18n65.__)("[all-fields] shortcode sends all fields.", "elementor")))));
|
|
10798
10797
|
};
|
|
10799
|
-
var FromEmailField = () => /* @__PURE__ */
|
|
10798
|
+
var FromEmailField = () => /* @__PURE__ */ React128.createElement(
|
|
10800
10799
|
EmailField,
|
|
10801
10800
|
{
|
|
10802
10801
|
bind: "from",
|
|
@@ -10804,7 +10803,7 @@ var FromEmailField = () => /* @__PURE__ */ React127.createElement(
|
|
|
10804
10803
|
placeholder: (0, import_i18n65.__)("What email should appear as the sender?", "elementor")
|
|
10805
10804
|
}
|
|
10806
10805
|
);
|
|
10807
|
-
var FromNameField = () => /* @__PURE__ */
|
|
10806
|
+
var FromNameField = () => /* @__PURE__ */ React128.createElement(
|
|
10808
10807
|
EmailField,
|
|
10809
10808
|
{
|
|
10810
10809
|
bind: "from-name",
|
|
@@ -10814,7 +10813,7 @@ var FromNameField = () => /* @__PURE__ */ React127.createElement(
|
|
|
10814
10813
|
);
|
|
10815
10814
|
var ReplyToField = () => {
|
|
10816
10815
|
const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10817
|
-
return /* @__PURE__ */
|
|
10816
|
+
return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(
|
|
10818
10817
|
MentionTextAreaControl,
|
|
10819
10818
|
{
|
|
10820
10819
|
suggestions: emailSuggestions,
|
|
@@ -10826,13 +10825,13 @@ var ReplyToField = () => {
|
|
|
10826
10825
|
};
|
|
10827
10826
|
var CcField = () => {
|
|
10828
10827
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10829
|
-
return /* @__PURE__ */
|
|
10828
|
+
return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Cc", "elementor"), suggestions }));
|
|
10830
10829
|
};
|
|
10831
10830
|
var BccField = () => {
|
|
10832
10831
|
const suggestions = useFormFieldSuggestions({ inputType: "email" });
|
|
10833
|
-
return /* @__PURE__ */
|
|
10832
|
+
return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
|
|
10834
10833
|
};
|
|
10835
|
-
var MetaDataField = () => /* @__PURE__ */
|
|
10834
|
+
var MetaDataField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React128.createElement(
|
|
10836
10835
|
ChipsControl,
|
|
10837
10836
|
{
|
|
10838
10837
|
options: [
|
|
@@ -10844,7 +10843,7 @@ var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider
|
|
|
10844
10843
|
]
|
|
10845
10844
|
}
|
|
10846
10845
|
)));
|
|
10847
|
-
var SendAsField = () => /* @__PURE__ */
|
|
10846
|
+
var SendAsField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React128.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React128.createElement(
|
|
10848
10847
|
SelectControl,
|
|
10849
10848
|
{
|
|
10850
10849
|
options: [
|
|
@@ -10858,30 +10857,30 @@ var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider,
|
|
|
10858
10857
|
var EmailFormActionControl = createControl(
|
|
10859
10858
|
({ toPlaceholder, label }) => {
|
|
10860
10859
|
const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
|
|
10861
|
-
return /* @__PURE__ */
|
|
10860
|
+
return /* @__PURE__ */ React129.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React129.createElement(import_ui113.Stack, { gap: 2 }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("Email settings", "elementor")), /* @__PURE__ */ React129.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React129.createElement(SubjectField, null), /* @__PURE__ */ React129.createElement(MessageField, null), /* @__PURE__ */ React129.createElement(FromEmailField, null), /* @__PURE__ */ React129.createElement(AdvancedSettings, null)));
|
|
10862
10861
|
}
|
|
10863
10862
|
);
|
|
10864
|
-
var AdvancedSettings = () => /* @__PURE__ */
|
|
10863
|
+
var AdvancedSettings = () => /* @__PURE__ */ React129.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React129.createElement(import_ui113.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React129.createElement(import_ui113.Stack, { gap: 2 }, /* @__PURE__ */ React129.createElement(FromNameField, null), /* @__PURE__ */ React129.createElement(ReplyToField, null), /* @__PURE__ */ React129.createElement(CcField, null), /* @__PURE__ */ React129.createElement(BccField, null), /* @__PURE__ */ React129.createElement(import_ui113.Divider, null), /* @__PURE__ */ React129.createElement(MetaDataField, null), /* @__PURE__ */ React129.createElement(SendAsField, null))));
|
|
10865
10864
|
|
|
10866
10865
|
// src/controls/attachment-type-control.tsx
|
|
10867
|
-
var
|
|
10866
|
+
var React130 = __toESM(require("react"));
|
|
10868
10867
|
var import_editor_ui18 = require("@elementor/editor-ui");
|
|
10869
|
-
var
|
|
10868
|
+
var import_ui114 = require("@elementor/ui");
|
|
10870
10869
|
var import_i18n67 = require("@wordpress/i18n");
|
|
10871
10870
|
var AttachmentTypeControl = createControl(({ label, options }) => {
|
|
10872
|
-
return /* @__PURE__ */
|
|
10871
|
+
return /* @__PURE__ */ React130.createElement(import_ui114.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(SelectControl, { options })), /* @__PURE__ */ React130.createElement(import_ui114.Grid, { item: true }, /* @__PURE__ */ React130.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
|
|
10873
10872
|
"Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
|
|
10874
10873
|
"elementor"
|
|
10875
10874
|
))));
|
|
10876
10875
|
});
|
|
10877
10876
|
|
|
10878
10877
|
// src/controls/notice-control.tsx
|
|
10879
|
-
var
|
|
10880
|
-
var
|
|
10878
|
+
var React131 = __toESM(require("react"));
|
|
10879
|
+
var import_react77 = require("react");
|
|
10881
10880
|
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
10882
10881
|
var import_icons42 = require("@elementor/icons");
|
|
10883
|
-
var
|
|
10884
|
-
var NoticeTitle = (0,
|
|
10882
|
+
var import_ui115 = require("@elementor/ui");
|
|
10883
|
+
var NoticeTitle = (0, import_ui115.styled)(import_ui115.AlertTitle)({
|
|
10885
10884
|
"&.MuiAlertTitle-root.MuiAlertTitle-root": {
|
|
10886
10885
|
marginBottom: 4,
|
|
10887
10886
|
fontStyle: "italic"
|
|
@@ -10895,12 +10894,12 @@ var markNoticeAsDismissedInSession = (dismissId) => {
|
|
|
10895
10894
|
};
|
|
10896
10895
|
var NoticeControl = createControl(
|
|
10897
10896
|
({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
|
|
10898
|
-
const [isDismissed, setIsDismissed] = (0,
|
|
10897
|
+
const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
|
|
10899
10898
|
if (isDismissed || !content) {
|
|
10900
10899
|
return null;
|
|
10901
10900
|
}
|
|
10902
10901
|
const severity = noticeType === "danger" ? "error" : noticeType;
|
|
10903
|
-
const icon = noticeType === "info" ? /* @__PURE__ */
|
|
10902
|
+
const icon = noticeType === "info" ? /* @__PURE__ */ React131.createElement(import_icons42.BulbIcon, { fontSize: "inherit" }) : void 0;
|
|
10904
10903
|
const handleDismiss = () => {
|
|
10905
10904
|
setIsDismissed(true);
|
|
10906
10905
|
if (!dismissible) {
|
|
@@ -10920,8 +10919,8 @@ var NoticeControl = createControl(
|
|
|
10920
10919
|
markNoticeAsDismissedInSession(dismissible);
|
|
10921
10920
|
}
|
|
10922
10921
|
};
|
|
10923
|
-
return /* @__PURE__ */
|
|
10924
|
-
|
|
10922
|
+
return /* @__PURE__ */ React131.createElement(import_ui115.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React131.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React131.createElement(import_ui115.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React131.createElement(
|
|
10923
|
+
import_ui115.AlertAction,
|
|
10925
10924
|
{
|
|
10926
10925
|
variant: "contained",
|
|
10927
10926
|
color: severity,
|
|
@@ -10937,9 +10936,9 @@ var NoticeControl = createControl(
|
|
|
10937
10936
|
);
|
|
10938
10937
|
|
|
10939
10938
|
// src/controls/grid-span-control.tsx
|
|
10940
|
-
var
|
|
10939
|
+
var React132 = __toESM(require("react"));
|
|
10941
10940
|
var import_editor_props69 = require("@elementor/editor-props");
|
|
10942
|
-
var
|
|
10941
|
+
var import_ui116 = require("@elementor/ui");
|
|
10943
10942
|
var GridSpanControl = createControl(
|
|
10944
10943
|
({
|
|
10945
10944
|
placeholder: propPlaceholder,
|
|
@@ -10956,8 +10955,8 @@ var GridSpanControl = createControl(
|
|
|
10956
10955
|
setValue(next === "" ? null : next);
|
|
10957
10956
|
};
|
|
10958
10957
|
const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
|
|
10959
|
-
return /* @__PURE__ */
|
|
10960
|
-
|
|
10958
|
+
return /* @__PURE__ */ React132.createElement(ControlActions, null, /* @__PURE__ */ React132.createElement(
|
|
10959
|
+
import_ui116.TextField,
|
|
10961
10960
|
{
|
|
10962
10961
|
size: "tiny",
|
|
10963
10962
|
fullWidth: true,
|
|
@@ -10977,25 +10976,25 @@ var GridSpanControl = createControl(
|
|
|
10977
10976
|
);
|
|
10978
10977
|
|
|
10979
10978
|
// src/components/promotions/display-conditions-control.tsx
|
|
10980
|
-
var
|
|
10981
|
-
var
|
|
10979
|
+
var React134 = __toESM(require("react"));
|
|
10980
|
+
var import_react79 = require("react");
|
|
10982
10981
|
var import_icons43 = require("@elementor/icons");
|
|
10983
|
-
var
|
|
10982
|
+
var import_ui118 = require("@elementor/ui");
|
|
10984
10983
|
var import_i18n68 = require("@wordpress/i18n");
|
|
10985
10984
|
|
|
10986
10985
|
// src/components/promotions/promotion-trigger.tsx
|
|
10987
|
-
var
|
|
10988
|
-
var
|
|
10986
|
+
var React133 = __toESM(require("react"));
|
|
10987
|
+
var import_react78 = require("react");
|
|
10989
10988
|
var import_editor_ui19 = require("@elementor/editor-ui");
|
|
10990
|
-
var
|
|
10989
|
+
var import_ui117 = require("@elementor/ui");
|
|
10991
10990
|
function getV4Promotion(key) {
|
|
10992
10991
|
return window.elementor?.config?.v4Promotions?.[key];
|
|
10993
10992
|
}
|
|
10994
|
-
var PromotionTrigger = (0,
|
|
10993
|
+
var PromotionTrigger = (0, import_react78.forwardRef)(
|
|
10995
10994
|
({ promotionKey, children, trackingData }, ref) => {
|
|
10996
|
-
const [isOpen, setIsOpen] = (0,
|
|
10995
|
+
const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
|
|
10997
10996
|
const promotion = getV4Promotion(promotionKey);
|
|
10998
|
-
const toggle = (0,
|
|
10997
|
+
const toggle = (0, import_react78.useCallback)(() => {
|
|
10999
10998
|
setIsOpen((prev) => {
|
|
11000
10999
|
if (!prev) {
|
|
11001
11000
|
trackViewPromotion(trackingData);
|
|
@@ -11003,8 +11002,8 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
|
|
|
11003
11002
|
return !prev;
|
|
11004
11003
|
});
|
|
11005
11004
|
}, [trackingData]);
|
|
11006
|
-
(0,
|
|
11007
|
-
return /* @__PURE__ */
|
|
11005
|
+
(0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
|
|
11006
|
+
return /* @__PURE__ */ React133.createElement(React133.Fragment, null, promotion && /* @__PURE__ */ React133.createElement(
|
|
11008
11007
|
import_editor_ui19.PromotionInfotip,
|
|
11009
11008
|
{
|
|
11010
11009
|
title: promotion.title,
|
|
@@ -11018,8 +11017,8 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
|
|
|
11018
11017
|
},
|
|
11019
11018
|
onCtaClick: () => trackUpgradePromotionClick(trackingData)
|
|
11020
11019
|
},
|
|
11021
|
-
/* @__PURE__ */
|
|
11022
|
-
|
|
11020
|
+
/* @__PURE__ */ React133.createElement(
|
|
11021
|
+
import_ui117.Box,
|
|
11023
11022
|
{
|
|
11024
11023
|
onClick: (e) => {
|
|
11025
11024
|
e.stopPropagation();
|
|
@@ -11027,7 +11026,7 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
|
|
|
11027
11026
|
},
|
|
11028
11027
|
sx: { cursor: "pointer", display: "inline-flex" }
|
|
11029
11028
|
},
|
|
11030
|
-
children ?? /* @__PURE__ */
|
|
11029
|
+
children ?? /* @__PURE__ */ React133.createElement(import_editor_ui19.PromotionChip, null)
|
|
11031
11030
|
)
|
|
11032
11031
|
));
|
|
11033
11032
|
}
|
|
@@ -11037,9 +11036,9 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
|
|
|
11037
11036
|
var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
|
|
11038
11037
|
var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
|
|
11039
11038
|
var DisplayConditionsControl = createControl(() => {
|
|
11040
|
-
const triggerRef = (0,
|
|
11041
|
-
return /* @__PURE__ */
|
|
11042
|
-
|
|
11039
|
+
const triggerRef = (0, import_react79.useRef)(null);
|
|
11040
|
+
return /* @__PURE__ */ React134.createElement(
|
|
11041
|
+
import_ui118.Stack,
|
|
11043
11042
|
{
|
|
11044
11043
|
direction: "row",
|
|
11045
11044
|
spacing: 2,
|
|
@@ -11048,9 +11047,9 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
11048
11047
|
alignItems: "center"
|
|
11049
11048
|
}
|
|
11050
11049
|
},
|
|
11051
|
-
/* @__PURE__ */
|
|
11052
|
-
/* @__PURE__ */
|
|
11053
|
-
|
|
11050
|
+
/* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
|
|
11051
|
+
/* @__PURE__ */ React134.createElement(import_ui118.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React134.createElement(
|
|
11052
|
+
import_ui118.IconButton,
|
|
11054
11053
|
{
|
|
11055
11054
|
size: "tiny",
|
|
11056
11055
|
"aria-label": ARIA_LABEL,
|
|
@@ -11062,23 +11061,23 @@ var DisplayConditionsControl = createControl(() => {
|
|
|
11062
11061
|
borderRadius: 1
|
|
11063
11062
|
}
|
|
11064
11063
|
},
|
|
11065
|
-
/* @__PURE__ */
|
|
11064
|
+
/* @__PURE__ */ React134.createElement(import_icons43.SitemapIcon, { fontSize: "tiny", color: "disabled" })
|
|
11066
11065
|
))
|
|
11067
11066
|
);
|
|
11068
11067
|
});
|
|
11069
11068
|
|
|
11070
11069
|
// src/components/promotions/attributes-control.tsx
|
|
11071
|
-
var
|
|
11072
|
-
var
|
|
11070
|
+
var React135 = __toESM(require("react"));
|
|
11071
|
+
var import_react80 = require("react");
|
|
11073
11072
|
var import_icons44 = require("@elementor/icons");
|
|
11074
|
-
var
|
|
11073
|
+
var import_ui119 = require("@elementor/ui");
|
|
11075
11074
|
var import_i18n69 = require("@wordpress/i18n");
|
|
11076
11075
|
var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
|
|
11077
11076
|
var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
|
|
11078
11077
|
var AttributesControl = createControl(() => {
|
|
11079
|
-
const triggerRef = (0,
|
|
11080
|
-
return /* @__PURE__ */
|
|
11081
|
-
|
|
11078
|
+
const triggerRef = (0, import_react80.useRef)(null);
|
|
11079
|
+
return /* @__PURE__ */ React135.createElement(
|
|
11080
|
+
import_ui119.Stack,
|
|
11082
11081
|
{
|
|
11083
11082
|
direction: "row",
|
|
11084
11083
|
spacing: 2,
|
|
@@ -11087,8 +11086,8 @@ var AttributesControl = createControl(() => {
|
|
|
11087
11086
|
alignItems: "center"
|
|
11088
11087
|
}
|
|
11089
11088
|
},
|
|
11090
|
-
/* @__PURE__ */
|
|
11091
|
-
/* @__PURE__ */
|
|
11089
|
+
/* @__PURE__ */ React135.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
|
|
11090
|
+
/* @__PURE__ */ React135.createElement(import_ui119.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React135.createElement(
|
|
11092
11091
|
import_icons44.PlusIcon,
|
|
11093
11092
|
{
|
|
11094
11093
|
"aria-label": ARIA_LABEL2,
|
|
@@ -11102,20 +11101,20 @@ var AttributesControl = createControl(() => {
|
|
|
11102
11101
|
});
|
|
11103
11102
|
|
|
11104
11103
|
// src/components/icon-buttons/clear-icon-button.tsx
|
|
11105
|
-
var
|
|
11104
|
+
var React136 = __toESM(require("react"));
|
|
11106
11105
|
var import_icons45 = require("@elementor/icons");
|
|
11107
|
-
var
|
|
11108
|
-
var CustomIconButton = (0,
|
|
11106
|
+
var import_ui120 = require("@elementor/ui");
|
|
11107
|
+
var CustomIconButton = (0, import_ui120.styled)(import_ui120.IconButton)(({ theme }) => ({
|
|
11109
11108
|
width: theme.spacing(2.5),
|
|
11110
11109
|
height: theme.spacing(2.5)
|
|
11111
11110
|
}));
|
|
11112
|
-
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */
|
|
11111
|
+
var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React136.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React136.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
|
|
11113
11112
|
|
|
11114
11113
|
// src/components/repeater/repeater.tsx
|
|
11115
|
-
var
|
|
11116
|
-
var
|
|
11114
|
+
var React137 = __toESM(require("react"));
|
|
11115
|
+
var import_react81 = require("react");
|
|
11117
11116
|
var import_icons46 = require("@elementor/icons");
|
|
11118
|
-
var
|
|
11117
|
+
var import_ui121 = require("@elementor/ui");
|
|
11119
11118
|
var import_i18n70 = require("@wordpress/i18n");
|
|
11120
11119
|
var SIZE12 = "tiny";
|
|
11121
11120
|
var EMPTY_OPEN_ITEM2 = -1;
|
|
@@ -11135,7 +11134,7 @@ var Repeater3 = ({
|
|
|
11135
11134
|
isSortable = true,
|
|
11136
11135
|
adornment = ControlAdornments
|
|
11137
11136
|
}) => {
|
|
11138
|
-
const [openItem, setOpenItem] = (0,
|
|
11137
|
+
const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
|
|
11139
11138
|
const uniqueKeys = items2.map(
|
|
11140
11139
|
(item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
|
|
11141
11140
|
);
|
|
@@ -11198,8 +11197,8 @@ var Repeater3 = ({
|
|
|
11198
11197
|
};
|
|
11199
11198
|
const isButtonDisabled = disabled || disableAddItemButton;
|
|
11200
11199
|
const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
|
|
11201
|
-
const addButton = /* @__PURE__ */
|
|
11202
|
-
|
|
11200
|
+
const addButton = /* @__PURE__ */ React137.createElement(
|
|
11201
|
+
import_ui121.IconButton,
|
|
11203
11202
|
{
|
|
11204
11203
|
size: SIZE12,
|
|
11205
11204
|
sx: {
|
|
@@ -11209,30 +11208,30 @@ var Repeater3 = ({
|
|
|
11209
11208
|
onClick: addRepeaterItem,
|
|
11210
11209
|
"aria-label": (0, import_i18n70.__)("Add item", "elementor")
|
|
11211
11210
|
},
|
|
11212
|
-
/* @__PURE__ */
|
|
11211
|
+
/* @__PURE__ */ React137.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
|
|
11213
11212
|
);
|
|
11214
|
-
return /* @__PURE__ */
|
|
11215
|
-
|
|
11213
|
+
return /* @__PURE__ */ React137.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React137.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React137.createElement(
|
|
11214
|
+
import_ui121.Infotip,
|
|
11216
11215
|
{
|
|
11217
11216
|
placement: "right",
|
|
11218
11217
|
content: addButtonInfotipContent,
|
|
11219
11218
|
color: "secondary",
|
|
11220
11219
|
slotProps: { popper: { sx: { width: 300 } } }
|
|
11221
11220
|
},
|
|
11222
|
-
/* @__PURE__ */
|
|
11223
|
-
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */
|
|
11221
|
+
/* @__PURE__ */ React137.createElement(import_ui121.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
|
|
11222
|
+
) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React137.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
|
|
11224
11223
|
const index = uniqueKeys.indexOf(key);
|
|
11225
11224
|
const value = items2[index];
|
|
11226
11225
|
if (!value) {
|
|
11227
11226
|
return null;
|
|
11228
11227
|
}
|
|
11229
|
-
return /* @__PURE__ */
|
|
11228
|
+
return /* @__PURE__ */ React137.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React137.createElement(
|
|
11230
11229
|
RepeaterItem,
|
|
11231
11230
|
{
|
|
11232
11231
|
disabled,
|
|
11233
11232
|
propDisabled: value?.disabled,
|
|
11234
|
-
label: /* @__PURE__ */
|
|
11235
|
-
startIcon: /* @__PURE__ */
|
|
11233
|
+
label: /* @__PURE__ */ React137.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Label, { value, index })),
|
|
11234
|
+
startIcon: /* @__PURE__ */ React137.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Icon, { value })),
|
|
11236
11235
|
removeItem: () => removeRepeaterItem(index),
|
|
11237
11236
|
duplicateItem: () => duplicateRepeaterItem(index),
|
|
11238
11237
|
toggleDisableItem: () => toggleDisableRepeaterItem(index),
|
|
@@ -11246,7 +11245,7 @@ var Repeater3 = ({
|
|
|
11246
11245
|
actions: itemSettings.actions,
|
|
11247
11246
|
value
|
|
11248
11247
|
},
|
|
11249
|
-
(props) => /* @__PURE__ */
|
|
11248
|
+
(props) => /* @__PURE__ */ React137.createElement(
|
|
11250
11249
|
itemSettings.Content,
|
|
11251
11250
|
{
|
|
11252
11251
|
...props,
|
|
@@ -11286,12 +11285,12 @@ var RepeaterItem = ({
|
|
|
11286
11285
|
},
|
|
11287
11286
|
wrappedOnPopoverClose
|
|
11288
11287
|
);
|
|
11289
|
-
const triggerProps = (0,
|
|
11288
|
+
const triggerProps = (0, import_ui121.bindTrigger)(popoverState);
|
|
11290
11289
|
usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
|
|
11291
11290
|
const duplicateLabel = (0, import_i18n70.__)("Duplicate", "elementor");
|
|
11292
11291
|
const toggleLabel = propDisabled ? (0, import_i18n70.__)("Show", "elementor") : (0, import_i18n70.__)("Hide", "elementor");
|
|
11293
11292
|
const removeLabel = (0, import_i18n70.__)("Remove", "elementor");
|
|
11294
|
-
return /* @__PURE__ */
|
|
11293
|
+
return /* @__PURE__ */ React137.createElement(import_ui121.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React137.createElement(
|
|
11295
11294
|
RepeaterTag,
|
|
11296
11295
|
{
|
|
11297
11296
|
disabled,
|
|
@@ -11306,15 +11305,15 @@ var RepeaterItem = ({
|
|
|
11306
11305
|
}
|
|
11307
11306
|
},
|
|
11308
11307
|
startIcon,
|
|
11309
|
-
actions: /* @__PURE__ */
|
|
11308
|
+
actions: /* @__PURE__ */ React137.createElement(React137.Fragment, null, showDuplicate && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React137.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React137.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React137.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React137.createElement(import_ui121.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(import_ui121.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React137.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
|
|
11310
11309
|
}
|
|
11311
|
-
), /* @__PURE__ */
|
|
11310
|
+
), /* @__PURE__ */ React137.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React137.createElement(import_ui121.Box, null, children({ anchorEl: ref }))));
|
|
11312
11311
|
};
|
|
11313
11312
|
var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
11314
|
-
const [ref, setRef] = (0,
|
|
11315
|
-
const popoverState = (0,
|
|
11316
|
-
const popoverProps = (0,
|
|
11317
|
-
(0,
|
|
11313
|
+
const [ref, setRef] = (0, import_react81.useState)(null);
|
|
11314
|
+
const popoverState = (0, import_ui121.usePopupState)({ variant: "popover" });
|
|
11315
|
+
const popoverProps = (0, import_ui121.bindPopover)(popoverState);
|
|
11316
|
+
(0, import_react81.useEffect)(() => {
|
|
11318
11317
|
if (openOnMount && ref) {
|
|
11319
11318
|
popoverState.open(ref);
|
|
11320
11319
|
onOpen?.();
|
|
@@ -11333,8 +11332,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
|
|
|
11333
11332
|
};
|
|
11334
11333
|
|
|
11335
11334
|
// src/components/size/unstable-size-field.tsx
|
|
11336
|
-
var
|
|
11337
|
-
var
|
|
11335
|
+
var React140 = __toESM(require("react"));
|
|
11336
|
+
var import_ui123 = require("@elementor/ui");
|
|
11338
11337
|
|
|
11339
11338
|
// src/hooks/use-size-value.ts
|
|
11340
11339
|
var DEFAULT_UNIT2 = "px";
|
|
@@ -11376,25 +11375,25 @@ var differsFromExternal = (newState, externalState) => {
|
|
|
11376
11375
|
};
|
|
11377
11376
|
|
|
11378
11377
|
// src/components/size/unit-select.tsx
|
|
11379
|
-
var
|
|
11380
|
-
var
|
|
11378
|
+
var React138 = __toESM(require("react"));
|
|
11379
|
+
var import_react82 = require("react");
|
|
11381
11380
|
var import_editor_ui20 = require("@elementor/editor-ui");
|
|
11382
|
-
var
|
|
11381
|
+
var import_ui122 = require("@elementor/ui");
|
|
11383
11382
|
var menuItemContentStyles2 = {
|
|
11384
11383
|
display: "flex",
|
|
11385
11384
|
flexDirection: "column",
|
|
11386
11385
|
justifyContent: "center"
|
|
11387
11386
|
};
|
|
11388
11387
|
var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
11389
|
-
const popupState = (0,
|
|
11388
|
+
const popupState = (0, import_ui122.usePopupState)({
|
|
11390
11389
|
variant: "popover",
|
|
11391
|
-
popupId: (0,
|
|
11390
|
+
popupId: (0, import_react82.useId)()
|
|
11392
11391
|
});
|
|
11393
11392
|
const handleMenuItemClick = (index) => {
|
|
11394
11393
|
onClick(options[index]);
|
|
11395
11394
|
popupState.close();
|
|
11396
11395
|
};
|
|
11397
|
-
return /* @__PURE__ */
|
|
11396
|
+
return /* @__PURE__ */ React138.createElement(React138.Fragment, null, /* @__PURE__ */ React138.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui122.bindTrigger)(popupState) }, value), /* @__PURE__ */ React138.createElement(import_ui122.Menu, { MenuListProps: { dense: true }, ...(0, import_ui122.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React138.createElement(
|
|
11398
11397
|
import_editor_ui20.MenuListItem,
|
|
11399
11398
|
{
|
|
11400
11399
|
key: option,
|
|
@@ -11413,7 +11412,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
|
|
|
11413
11412
|
option.toUpperCase()
|
|
11414
11413
|
))));
|
|
11415
11414
|
};
|
|
11416
|
-
var StyledButton3 = (0,
|
|
11415
|
+
var StyledButton3 = (0, import_ui122.styled)(import_ui122.Button, {
|
|
11417
11416
|
shouldForwardProp: (prop) => prop !== "isPrimaryColor"
|
|
11418
11417
|
})(({ isPrimaryColor, theme }) => ({
|
|
11419
11418
|
color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
|
|
@@ -11423,11 +11422,11 @@ var StyledButton3 = (0, import_ui121.styled)(import_ui121.Button, {
|
|
|
11423
11422
|
}));
|
|
11424
11423
|
|
|
11425
11424
|
// src/components/size/unstable-size-input.tsx
|
|
11426
|
-
var
|
|
11427
|
-
var
|
|
11428
|
-
var UnstableSizeInput = (0,
|
|
11425
|
+
var React139 = __toESM(require("react"));
|
|
11426
|
+
var import_react83 = require("react");
|
|
11427
|
+
var UnstableSizeInput = (0, import_react83.forwardRef)(
|
|
11429
11428
|
({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
|
|
11430
|
-
return /* @__PURE__ */
|
|
11429
|
+
return /* @__PURE__ */ React139.createElement(
|
|
11431
11430
|
NumberInput,
|
|
11432
11431
|
{
|
|
11433
11432
|
ref,
|
|
@@ -11465,7 +11464,7 @@ var UnstableSizeField = ({
|
|
|
11465
11464
|
const shouldHighlightUnit2 = () => {
|
|
11466
11465
|
return hasValue(size);
|
|
11467
11466
|
};
|
|
11468
|
-
return /* @__PURE__ */
|
|
11467
|
+
return /* @__PURE__ */ React140.createElement(
|
|
11469
11468
|
UnstableSizeInput,
|
|
11470
11469
|
{
|
|
11471
11470
|
type: "number",
|
|
@@ -11474,8 +11473,8 @@ var UnstableSizeField = ({
|
|
|
11474
11473
|
onChange: (event) => setSize(event.target.value),
|
|
11475
11474
|
InputProps: {
|
|
11476
11475
|
...InputProps,
|
|
11477
|
-
startAdornment: startIcon && /* @__PURE__ */
|
|
11478
|
-
endAdornment: /* @__PURE__ */
|
|
11476
|
+
startAdornment: startIcon && /* @__PURE__ */ React140.createElement(import_ui123.InputAdornment, { position: "start" }, startIcon),
|
|
11477
|
+
endAdornment: /* @__PURE__ */ React140.createElement(import_ui123.InputAdornment, { position: "end" }, /* @__PURE__ */ React140.createElement(
|
|
11479
11478
|
UnitSelect,
|
|
11480
11479
|
{
|
|
11481
11480
|
options: units2,
|
|
@@ -11493,7 +11492,7 @@ var hasValue = (value) => {
|
|
|
11493
11492
|
};
|
|
11494
11493
|
|
|
11495
11494
|
// src/hooks/use-font-families.ts
|
|
11496
|
-
var
|
|
11495
|
+
var import_react84 = require("react");
|
|
11497
11496
|
var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
|
|
11498
11497
|
var getFontControlConfig = () => {
|
|
11499
11498
|
const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
|
|
@@ -11501,7 +11500,7 @@ var getFontControlConfig = () => {
|
|
|
11501
11500
|
};
|
|
11502
11501
|
var useFontFamilies = () => {
|
|
11503
11502
|
const { groups, options } = getFontControlConfig();
|
|
11504
|
-
return (0,
|
|
11503
|
+
return (0, import_react84.useMemo)(() => {
|
|
11505
11504
|
if (!groups || !options) {
|
|
11506
11505
|
return [];
|
|
11507
11506
|
}
|