PluginProbe
Elementor Website Builder – more than just a page builder / 4.0.0-dev4
Elementor Website Builder – more than just a page builder v4.0.0-dev4
4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 All 455 releases
← All changes | assets/js/packages/editor-variables/editor-variables.js +2 -7304 4.2.0-beta2 → 4.0.0-dev4 View file →
@@ -1,7305 +1,3 @@
1 -/******/ (function() { // webpackBootstrap
2 -/******/ "use strict";
3 -/******/ var __webpack_modules__ = ({
4 -
5 -/***/ "./packages/packages/core/editor-variables/src/api.ts":
6 -/*!************************************************************!*\
7 - !*** ./packages/packages/core/editor-variables/src/api.ts ***!
8 - \************************************************************/
9 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
10 -
11 -__webpack_require__.r(__webpack_exports__);
12 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
13 -/* harmony export */ apiClient: function() { return /* binding */ apiClient; }
14 -/* harmony export */ });
15 -/* harmony import */ var _elementor_http_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/http-client */ "@elementor/http-client");
16 -/* harmony import */ var _elementor_http_client__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__);
17 -
18 -const BASE_PATH = 'elementor/v1/variables';
19 -const apiClient = {
20 - list: () => {
21 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().get(BASE_PATH + '/list');
22 - },
23 - create: (type, label, value) => {
24 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().post(BASE_PATH + '/create', {
25 - type,
26 - label,
27 - value
28 - });
29 - },
30 - update: (id, label, value, type) => {
31 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().put(BASE_PATH + '/update', {
32 - id,
33 - label,
34 - value,
35 - type
36 - });
37 - },
38 - delete: id => {
39 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().post(BASE_PATH + '/delete', {
40 - id
41 - });
42 - },
43 - restore: (id, label, value, type) => {
44 - const payload = {
45 - id
46 - };
47 - if (label) {
48 - payload.label = label;
49 - }
50 - if (value) {
51 - payload.value = value;
52 - }
53 - if (type) {
54 - payload.type = type;
55 - }
56 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().post(BASE_PATH + '/restore', payload);
57 - },
58 - batch: payload => {
59 - return (0,_elementor_http_client__WEBPACK_IMPORTED_MODULE_0__.httpService)().post(BASE_PATH + '/batch', payload);
60 - }
61 -};
62 -
63 -/***/ }),
64 -
65 -/***/ "./packages/packages/core/editor-variables/src/batch-operations.ts":
66 -/*!*************************************************************************!*\
67 - !*** ./packages/packages/core/editor-variables/src/batch-operations.ts ***!
68 - \*************************************************************************/
69 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
70 -
71 -__webpack_require__.r(__webpack_exports__);
72 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
73 -/* harmony export */ buildOperationsArray: function() { return /* binding */ buildOperationsArray; },
74 -/* harmony export */ generateTempId: function() { return /* binding */ generateTempId; },
75 -/* harmony export */ isTempId: function() { return /* binding */ isTempId; }
76 -/* harmony export */ });
77 -const generateTempId = () => {
78 - const timestamp = Date.now().toString(36);
79 - const random = Math.random().toString(36).substring(2, 8);
80 - return `tmp-${timestamp}-${random}`;
81 -};
82 -const isTempId = id => {
83 - return id.startsWith('tmp-');
84 -};
85 -const buildOperationsArray = (originalVariables, currentVariables, deletedVariables) => {
86 - const operations = [];
87 - Object.entries(currentVariables).forEach(([id, variable]) => {
88 - if (isTempId(id)) {
89 - operations.push({
90 - type: 'create',
91 - variable: {
92 - ...variable,
93 - id
94 - }
95 - });
96 - } else if (originalVariables[id]) {
97 - const original = originalVariables[id];
98 - const syncChanged = original.sync_to_v3 !== variable.sync_to_v3;
99 - if (original.deleted && !variable.deleted) {
100 - operations.push({
101 - type: 'restore',
102 - id,
103 - ...(original.label !== variable.label && {
104 - label: variable.label
105 - }),
106 - ...(original.value !== variable.value && {
107 - value: variable.value
108 - })
109 - });
110 - } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value || original.order !== variable.order || original.type !== variable.type || syncChanged)) {
111 - operations.push({
112 - type: 'update',
113 - id,
114 - variable: {
115 - ...(original.label !== variable.label && {
116 - label: variable.label
117 - }),
118 - ...(original.value !== variable.value && {
119 - value: variable.value
120 - }),
121 - ...(original.order !== variable.order && {
122 - order: variable.order
123 - }),
124 - ...(original.type !== variable.type && {
125 - type: variable.type
126 - }),
127 - ...(syncChanged && {
128 - sync_to_v3: variable.sync_to_v3
129 - })
130 - }
131 - });
132 - }
133 - }
134 - });
135 - deletedVariables.forEach(id => {
136 - operations.push({
137 - type: 'delete',
138 - id
139 - });
140 - });
141 - return operations.filter(op => {
142 - const id = op.id || op.variable?.id;
143 - return id && !(isTempId(id) && currentVariables[id]?.deleted);
144 - });
145 -};
146 -
147 -/***/ }),
148 -
149 -/***/ "./packages/packages/core/editor-variables/src/components/fields/color-field.tsx":
150 -/*!***************************************************************************************!*\
151 - !*** ./packages/packages/core/editor-variables/src/components/fields/color-field.tsx ***!
152 - \***************************************************************************************/
153 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
154 -
155 -__webpack_require__.r(__webpack_exports__);
156 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
157 -/* harmony export */ ColorField: function() { return /* binding */ ColorField; }
158 -/* harmony export */ });
159 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
160 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
161 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
162 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
163 -/* harmony import */ var _context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../context/variable-selection-popover.context */ "./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx");
164 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
165 -
166 -
167 -
168 -
169 -
170 -const ColorField = ({
171 - value,
172 - onChange,
173 - onValidationChange
174 -}) => {
175 - const [color, setColor] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value);
176 - const [errorMessage, setErrorMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
177 - const defaultRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
178 - const anchorRef = (0,_context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_2__.usePopoverContentRef)() ?? defaultRef.current;
179 - const handleChange = newValue => {
180 - setColor(newValue);
181 - const errorMsg = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_3__.validateValue)(newValue);
182 - setErrorMessage(errorMsg);
183 - onValidationChange?.(errorMsg);
184 - onChange(errorMsg ? '' : newValue);
185 - };
186 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.UnstableColorField, {
187 - id: "color-variable-field",
188 - size: "tiny",
189 - fullWidth: true,
190 - value: color,
191 - onChange: handleChange,
192 - error: errorMessage || undefined,
193 - slotProps: {
194 - colorPicker: {
195 - anchorEl: anchorRef,
196 - anchorOrigin: {
197 - vertical: 'top',
198 - horizontal: 'right'
199 - },
200 - transformOrigin: {
201 - vertical: 'top',
202 - horizontal: -10
203 - },
204 - slotProps: {
205 - colorIndicator: {
206 - size: 'inherit',
207 - sx: {
208 - borderRadius: 0.5
209 - }
210 - }
211 - }
212 - }
213 - }
214 - });
215 -};
216 -
217 -/***/ }),
218 -
219 -/***/ "./packages/packages/core/editor-variables/src/components/fields/font-field.tsx":
220 -/*!**************************************************************************************!*\
221 - !*** ./packages/packages/core/editor-variables/src/components/fields/font-field.tsx ***!
222 - \**************************************************************************************/
223 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
224 -
225 -__webpack_require__.r(__webpack_exports__);
226 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
227 -/* harmony export */ FontField: function() { return /* binding */ FontField; }
228 -/* harmony export */ });
229 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
230 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
231 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
232 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
233 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
234 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__);
235 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
236 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__);
237 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
238 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__);
239 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
240 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__);
241 -/* harmony import */ var _context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../context/variable-selection-popover.context */ "./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx");
242 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
243 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
244 -
245 -
246 -
247 -
248 -
249 -
250 -
251 -
252 -
253 -const FontField = ({
254 - value,
255 - onChange,
256 - onValidationChange
257 -}) => {
258 - const [fontFamily, setFontFamily] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value);
259 - const defaultRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
260 - const anchorRef = (0,_context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_6__.usePopoverContentRef)() ?? defaultRef.current;
261 - const fontPopoverState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.usePopupState)({
262 - variant: 'popover'
263 - });
264 - const fontFamilies = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useFontFamilies)();
265 - const sectionWidth = (0,_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.useSectionWidth)();
266 - const mapFontSubs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
267 - return fontFamilies.map(({
268 - label,
269 - fonts
270 - }) => ({
271 - label,
272 - items: fonts
273 - }));
274 - }, [fontFamilies]);
275 - const handleChange = newValue => {
276 - setFontFamily(newValue);
277 - const errorMsg = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_7__.validateValue)(newValue);
278 - onValidationChange?.(errorMsg);
279 - onChange(errorMsg ? '' : newValue);
280 - };
281 - const handleFontFamilyChange = newFontFamily => {
282 - handleChange(newFontFamily);
283 - fontPopoverState.close();
284 - };
285 - const id = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
286 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.UnstableTag, _extends({
287 - id: id,
288 - variant: "outlined",
289 - label: fontFamily,
290 - endIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__.ChevronDownIcon, {
291 - fontSize: "tiny"
292 - })
293 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.bindTrigger)(fontPopoverState), {
294 - fullWidth: true
295 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Popover, _extends({
296 - disablePortal: true,
297 - disableScrollLock: true,
298 - anchorEl: anchorRef,
299 - anchorOrigin: {
300 - vertical: 'top',
301 - horizontal: 'right'
302 - },
303 - transformOrigin: {
304 - vertical: 'top',
305 - horizontal: -28
306 - }
307 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.bindPopover)(fontPopoverState)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.ItemSelector, {
308 - id: "font-family-variables-selector",
309 - itemsList: mapFontSubs,
310 - selectedItem: fontFamily,
311 - onItemChange: handleFontFamilyChange,
312 - onClose: fontPopoverState.close,
313 - sectionWidth: sectionWidth,
314 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Font family', 'elementor'),
315 - itemStyle: item => ({
316 - fontFamily: item.value
317 - }),
318 - onDebounce: _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.enqueueFont,
319 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_3__.TextIcon
320 - })));
321 -};
322 -
323 -/***/ }),
324 -
325 -/***/ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx":
326 -/*!***************************************************************************************!*\
327 - !*** ./packages/packages/core/editor-variables/src/components/fields/label-field.tsx ***!
328 - \***************************************************************************************/
329 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
330 -
331 -__webpack_require__.r(__webpack_exports__);
332 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
333 -/* harmony export */ LabelField: function() { return /* binding */ LabelField; },
334 -/* harmony export */ useLabelError: function() { return /* binding */ useLabelError; }
335 -/* harmony export */ });
336 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
337 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
338 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
339 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__);
340 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
341 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
342 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
343 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
344 -
345 -
346 -
347 -
348 -
349 -function isLabelEqual(a, b) {
350 - return a.trim().toLowerCase() === b.trim().toLowerCase();
351 -}
352 -const useLabelError = initialError => {
353 - const [error, setError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialError ?? {
354 - value: '',
355 - message: ''
356 - });
357 - return {
358 - labelFieldError: error,
359 - setLabelFieldError: setError
360 - };
361 -};
362 -const LabelField = ({
363 - value,
364 - error,
365 - onChange,
366 - id,
367 - onErrorChange,
368 - size = 'tiny',
369 - focusOnShow = false,
370 - selectOnShow = false,
371 - showWarningInfotip = false,
372 - variables,
373 - onKeyDown
374 -}) => {
375 - const [label, setLabel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value);
376 - const [errorMessage, setErrorMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
377 - const fieldRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
378 - const handleChange = newValue => {
379 - setLabel(newValue);
380 - const errorMsg = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_3__.validateLabel)(newValue, variables);
381 - setErrorMessage(errorMsg);
382 - onErrorChange?.(errorMsg);
383 - onChange(isLabelEqual(newValue, error?.value ?? '') || errorMsg ? '' : newValue);
384 - };
385 - let errorMsg = errorMessage;
386 - if (isLabelEqual(label, error?.value ?? '') && error?.message) {
387 - errorMsg = error.message;
388 - }
389 - const hintMsg = !errorMsg ? (0,_utils_validations__WEBPACK_IMPORTED_MODULE_3__.labelHint)(label) : '';
390 - const textField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.TextField, {
391 - ref: fieldRef,
392 - id: id,
393 - size: size,
394 - fullWidth: true,
395 - value: label,
396 - error: !!errorMsg,
397 - onChange: e => handleChange(e.target.value),
398 - inputProps: {
399 - maxLength: _utils_validations__WEBPACK_IMPORTED_MODULE_3__.VARIABLE_LABEL_MAX_LENGTH,
400 - ...(selectOnShow && {
401 - onFocus: e => e.target.select()
402 - }),
403 - 'aria-label': 'Name',
404 - onKeyDown
405 - }
406 - // eslint-disable-next-line jsx-a11y/no-autofocus
407 - ,
408 - autoFocus: focusOnShow
409 - });
410 - if (showWarningInfotip) {
411 - const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
412 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.WarningInfotip, _extends({
413 - open: Boolean(errorMsg || hintMsg),
414 - text: errorMsg || hintMsg,
415 - placement: "bottom-start",
416 - width: tooltipWidth,
417 - offset: [0, -15]
418 - }, hintMsg && {
419 - hasError: false
420 - }), textField);
421 - }
422 - return textField;
423 -};
424 -
425 -/***/ }),
426 -
427 -/***/ "./packages/packages/core/editor-variables/src/components/global-styles-import-listener.tsx":
428 -/*!**************************************************************************************************!*\
429 - !*** ./packages/packages/core/editor-variables/src/components/global-styles-import-listener.tsx ***!
430 - \**************************************************************************************************/
431 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
432 -
433 -__webpack_require__.r(__webpack_exports__);
434 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
435 -/* harmony export */ GlobalStylesImportListener: function() { return /* binding */ GlobalStylesImportListener; }
436 -/* harmony export */ });
437 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
438 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
439 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-canvas */ "@elementor/editor-canvas");
440 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__);
441 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
442 -
443 -
444 -
445 -function GlobalStylesImportListener() {
446 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
447 - const handleGlobalStylesImported = () => {
448 - _service__WEBPACK_IMPORTED_MODULE_2__.service.load();
449 - };
450 - window.addEventListener(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
451 - return () => {
452 - window.removeEventListener(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
453 - };
454 - }, []);
455 - return null;
456 -}
457 -
458 -/***/ }),
459 -
460 -/***/ "./packages/packages/core/editor-variables/src/components/mcp-variable-connect-listener.tsx":
461 -/*!**************************************************************************************************!*\
462 - !*** ./packages/packages/core/editor-variables/src/components/mcp-variable-connect-listener.tsx ***!
463 - \**************************************************************************************************/
464 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
465 -
466 -__webpack_require__.r(__webpack_exports__);
467 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
468 -/* harmony export */ McpVariableConnectListener: function() { return /* binding */ McpVariableConnectListener; }
469 -/* harmony export */ });
470 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
471 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
472 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-mcp */ "@elementor/editor-mcp");
473 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_1__);
474 -/* harmony import */ var _utils_extract_variables_from_style_value__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/extract-variables-from-style-value */ "./packages/packages/core/editor-variables/src/utils/extract-variables-from-style-value.ts");
475 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
476 -
477 -
478 -
479 -
480 -function McpVariableConnectListener() {
481 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
482 - const handleMcpStylesApplied = event => {
483 - const {
484 - styleValue
485 - } = event.detail;
486 - const variables = (0,_utils_extract_variables_from_style_value__WEBPACK_IMPORTED_MODULE_2__.extractVariablesFromStyleValue)(styleValue);
487 - variables.forEach(({
488 - type,
489 - controlPath
490 - }) => {
491 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_3__.trackVariableEvent)({
492 - varType: type,
493 - controlPath,
494 - action: 'connect',
495 - executedBy: 'mcp_tool'
496 - });
497 - });
498 - };
499 - window.addEventListener(_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_1__.MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
500 - return () => {
501 - window.removeEventListener(_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_1__.MCP_STYLES_APPLIED_EVENT, handleMcpStylesApplied);
502 - };
503 - }, []);
504 - return null;
505 -}
506 -
507 -/***/ }),
508 -
509 -/***/ "./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx":
510 -/*!***************************************************************************************!*\
511 - !*** ./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx ***!
512 - \***************************************************************************************/
513 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
514 -
515 -__webpack_require__.r(__webpack_exports__);
516 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
517 -/* harmony export */ ColorIndicator: function() { return /* binding */ ColorIndicator; }
518 -/* harmony export */ });
519 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
520 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_0__);
521 -
522 -const ColorIndicator = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_0__.styled)(_elementor_ui__WEBPACK_IMPORTED_MODULE_0__.UnstableColorIndicator)(({
523 - theme
524 -}) => ({
525 - borderRadius: `${theme.shape.borderRadius / 2}px`,
526 - marginRight: theme.spacing(0.25)
527 -}));
528 -
529 -/***/ }),
530 -
531 -/***/ "./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx":
532 -/*!**************************************************************************************************!*\
533 - !*** ./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx ***!
534 - \**************************************************************************************************/
535 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
536 -
537 -__webpack_require__.r(__webpack_exports__);
538 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
539 -/* harmony export */ DeleteConfirmationDialog: function() { return /* binding */ DeleteConfirmationDialog; }
540 -/* harmony export */ });
541 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
542 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
543 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
544 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__);
545 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
546 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
547 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
548 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
549 -
550 -
551 -
552 -
553 -const DeleteConfirmationDialog = ({
554 - open,
555 - label,
556 - closeDialog,
557 - onConfirm
558 -}) => {
559 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.ConfirmationDialog, {
560 - open: open,
561 - onClose: closeDialog
562 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.ConfirmationDialog.Title, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Delete this variable?', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.ConfirmationDialog.Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.ConfirmationDialog.ContentText, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('All elements using', 'elementor'), "\xA0", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
563 - variant: "subtitle2",
564 - component: "span",
565 - sx: {
566 - lineBreak: 'anywhere'
567 - }
568 - }, label), "\xA0", (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('will keep their current values, but the variable itself will be removed.', 'elementor'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.ConfirmationDialog.Actions, {
569 - onClose: closeDialog,
570 - onConfirm: onConfirm
571 - }));
572 -};
573 -
574 -/***/ }),
575 -
576 -/***/ "./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx":
577 -/*!**********************************************************************************************!*\
578 - !*** ./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx ***!
579 - \**********************************************************************************************/
580 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
581 -
582 -__webpack_require__.r(__webpack_exports__);
583 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
584 -/* harmony export */ DeletedVariableAlert: function() { return /* binding */ DeletedVariableAlert; }
585 -/* harmony export */ });
586 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
587 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
588 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
589 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
590 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
591 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
592 -
593 -
594 -
595 -const DeletedVariableAlert = ({
596 - onClose,
597 - onUnlink,
598 - onRestore,
599 - label
600 -}) => {
601 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.ClickAwayListener, {
602 - onClickAway: onClose
603 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Alert, {
604 - variant: "standard",
605 - severity: "warning",
606 - onClose: onClose,
607 - action: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, onUnlink && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertAction, {
608 - variant: "contained",
609 - onClick: onUnlink
610 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Unlink', 'elementor')), onRestore && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertAction, {
611 - variant: "outlined",
612 - onClick: onRestore
613 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Restore', 'elementor'))),
614 - sx: {
615 - maxWidth: 300
616 - }
617 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertTitle, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Deleted variable', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
618 - variant: "body2",
619 - color: "textPrimary"
620 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('The variable', 'elementor'), "\xA0'", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
621 - variant: "body2",
622 - component: "span",
623 - sx: {
624 - lineBreak: 'anywhere'
625 - }
626 - }, label), "'\xA0", (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.', 'elementor'))));
627 -};
628 -
629 -/***/ }),
630 -
631 -/***/ "./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx":
632 -/*!************************************************************************************************!*\
633 - !*** ./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx ***!
634 - \************************************************************************************************/
635 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
636 -
637 -__webpack_require__.r(__webpack_exports__);
638 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
639 -/* harmony export */ EDIT_CONFIRMATION_DIALOG_ID: function() { return /* binding */ EDIT_CONFIRMATION_DIALOG_ID; },
640 -/* harmony export */ EditConfirmationDialog: function() { return /* binding */ EditConfirmationDialog; }
641 -/* harmony export */ });
642 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
643 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
644 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
645 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__);
646 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
647 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
648 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
649 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
650 -
651 -
652 -
653 -
654 -
655 -const EDIT_CONFIRMATION_DIALOG_ID = 'edit-confirmation-dialog';
656 -const EditConfirmationDialog = ({
657 - closeDialog,
658 - onConfirm,
659 - onSuppressMessage
660 -}) => {
661 - const [dontShowAgain, setDontShowAgain] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
662 - const handleSave = () => {
663 - if (dontShowAgain) {
664 - onSuppressMessage?.();
665 - }
666 - onConfirm?.();
667 - };
668 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Dialog, {
669 - open: true,
670 - onClose: closeDialog,
671 - maxWidth: "xs"
672 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.DialogTitle, {
673 - display: "flex",
674 - alignItems: "center",
675 - gap: 1
676 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__.AlertTriangleFilledIcon, {
677 - color: "secondary"
678 - }), (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Changes to variables go live right away.', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.DialogContent, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.DialogContentText, {
679 - variant: "body2",
680 - color: "textPrimary"
681 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)("Don't worry - all other changes you make will wait until you publish your site.", 'elementor'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.DialogActions, {
682 - sx: {
683 - justifyContent: 'space-between',
684 - alignItems: 'center'
685 - }
686 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.FormControlLabel, {
687 - control: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Checkbox, {
688 - checked: dontShowAgain,
689 - onChange: event => setDontShowAgain(event.target.checked),
690 - size: "small"
691 - }),
692 - label: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
693 - variant: "body2"
694 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)("Don't show me again", 'elementor'))
695 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Button, {
696 - color: "secondary",
697 - onClick: closeDialog
698 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Keep editing', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Button, {
699 - variant: "contained",
700 - color: "secondary",
701 - onClick: handleSave,
702 - sx: {
703 - ml: 1
704 - }
705 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Save', 'elementor')))));
706 -};
707 -
708 -/***/ }),
709 -
710 -/***/ "./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx":
711 -/*!***********************************************************************************!*\
712 - !*** ./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx ***!
713 - \***********************************************************************************/
714 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
715 -
716 -__webpack_require__.r(__webpack_exports__);
717 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
718 -/* harmony export */ EmptyState: function() { return /* binding */ EmptyState; }
719 -/* harmony export */ });
720 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
721 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
722 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
723 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
724 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
725 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
726 -/* harmony import */ var _hooks_use_permissions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/use-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");
727 -
728 -
729 -
730 -
731 -const EmptyState = ({
732 - icon,
733 - title,
734 - message,
735 - onAdd,
736 - children
737 -}) => {
738 - const canAdd = (0,_hooks_use_permissions__WEBPACK_IMPORTED_MODULE_3__.usePermissions)().canAdd();
739 - const displayTitle = canAdd ? title : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('There are no variables', 'elementor');
740 - const displayMessage = canAdd ? message : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('With your current role, you can only connect and detach variables.', 'elementor');
741 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(Content, {
742 - title: displayTitle,
743 - message: displayMessage,
744 - icon: icon
745 - }, children || onAdd && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
746 - variant: "outlined",
747 - color: "secondary",
748 - size: "small",
749 - onClick: onAdd
750 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Create a variable', 'elementor')));
751 -};
752 -function Content({
753 - title,
754 - message,
755 - icon,
756 - children
757 -}) {
758 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Stack, {
759 - gap: 1,
760 - alignItems: "center",
761 - justifyContent: "flex-start",
762 - height: "100%",
763 - color: "text.secondary",
764 - sx: {
765 - p: 2.5,
766 - pt: 8,
767 - pb: 5.5
768 - }
769 - }, icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
770 - align: "center",
771 - variant: "subtitle2"
772 - }, title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
773 - align: "center",
774 - variant: "caption",
775 - maxWidth: "180px"
776 - }, message), children);
777 -}
778 -
779 -/***/ }),
780 -
781 -/***/ "./packages/packages/core/editor-variables/src/components/ui/form-field.tsx":
782 -/*!**********************************************************************************!*\
783 - !*** ./packages/packages/core/editor-variables/src/components/ui/form-field.tsx ***!
784 - \**********************************************************************************/
785 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
786 -
787 -__webpack_require__.r(__webpack_exports__);
788 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
789 -/* harmony export */ FormField: function() { return /* binding */ FormField; }
790 -/* harmony export */ });
791 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
792 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
793 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
794 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
795 -
796 -
797 -const FormField = ({
798 - id,
799 - label,
800 - errorMsg,
801 - noticeMsg,
802 - children
803 -}) => {
804 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Grid, {
805 - container: true,
806 - gap: 0.75,
807 - alignItems: "center"
808 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Grid, {
809 - item: true,
810 - xs: 12
811 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.FormLabel, {
812 - htmlFor: id,
813 - size: "tiny"
814 - }, label)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Grid, {
815 - item: true,
816 - xs: 12
817 - }, children, errorMsg && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.FormHelperText, {
818 - error: true
819 - }, errorMsg), noticeMsg && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.FormHelperText, null, noticeMsg)));
820 -};
821 -
822 -/***/ }),
823 -
824 -/***/ "./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx":
825 -/*!*****************************************************************************************!*\
826 - !*** ./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx ***!
827 - \*****************************************************************************************/
828 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
829 -
830 -__webpack_require__.r(__webpack_exports__);
831 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
832 -/* harmony export */ MenuItemContent: function() { return /* binding */ MenuItemContent; }
833 -/* harmony export */ });
834 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
835 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
836 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
837 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__);
838 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
839 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__);
840 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
841 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__);
842 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
843 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__);
844 -
845 -
846 -
847 -
848 -
849 -const SIZE = 'tiny';
850 -const EDIT_LABEL = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Edit variable', 'elementor');
851 -const MenuItemContent = ({
852 - item,
853 - disabled = false
854 -}) => {
855 - const onEdit = item.onEdit;
856 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.ListItemIcon, {
857 - sx: {
858 - color: disabled ? 'text.disabled' : 'inherit'
859 - }
860 - }, item.icon), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Box, {
861 - sx: {
862 - flex: 1,
863 - minWidth: 0,
864 - display: 'flex',
865 - alignItems: 'center',
866 - gap: 1
867 - }
868 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.EllipsisWithTooltip, {
869 - title: item.label || item.value,
870 - as: _elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Typography,
871 - variant: "caption",
872 - color: disabled ? 'text.disabled' : 'text.primary',
873 - sx: {
874 - marginTop: '1px',
875 - lineHeight: '2'
876 - },
877 - maxWidth: "50%"
878 - }), item.secondaryText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.EllipsisWithTooltip, {
879 - title: item.secondaryText,
880 - as: _elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Typography,
881 - variant: "caption",
882 - color: disabled ? 'text.disabled' : 'text.tertiary',
883 - sx: {
884 - marginTop: '1px',
885 - lineHeight: '1'
886 - },
887 - maxWidth: "50%"
888 - })), !!onEdit && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Tooltip, {
889 - placement: "top",
890 - title: EDIT_LABEL
891 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.IconButton, {
892 - sx: {
893 - mx: 1,
894 - opacity: '0'
895 - },
896 - onClick: e => {
897 - e.stopPropagation();
898 - onEdit(item.value);
899 - },
900 - "aria-label": EDIT_LABEL
901 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__.EditIcon, {
902 - color: "action",
903 - fontSize: SIZE
904 - }))));
905 -};
906 -
907 -/***/ }),
908 -
909 -/***/ "./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx":
910 -/*!***********************************************************************************************!*\
911 - !*** ./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx ***!
912 - \***********************************************************************************************/
913 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
914 -
915 -__webpack_require__.r(__webpack_exports__);
916 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
917 -/* harmony export */ MismatchVariableAlert: function() { return /* binding */ MismatchVariableAlert; }
918 -/* harmony export */ });
919 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
920 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
921 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
922 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
923 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
924 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
925 -
926 -
927 -
928 -const i18n = {
929 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Variable has changed', 'elementor'),
930 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)(`This variable is no longer compatible with this property. You can clear it or select a different one.`, 'elementor'),
931 - buttons: {
932 - clear: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Clear', 'elementor'),
933 - select: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Select variable', 'elementor')
934 - }
935 -};
936 -const MismatchVariableAlert = ({
937 - onClose,
938 - onClear,
939 - triggerSelect
940 -}) => {
941 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.ClickAwayListener, {
942 - onClickAway: onClose
943 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Alert, {
944 - variant: "standard",
945 - severity: "warning",
946 - onClose: onClose,
947 - action: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, onClear && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertAction, {
948 - variant: "contained",
949 - onClick: onClear
950 - }, i18n.buttons.clear), triggerSelect && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertAction, {
951 - variant: "outlined",
952 - onClick: triggerSelect
953 - }, i18n.buttons.select)),
954 - sx: {
955 - maxWidth: 300
956 - }
957 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertTitle, null, i18n.title), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
958 - variant: "body2",
959 - color: "textPrimary"
960 - }, i18n.message)));
961 -};
962 -
963 -/***/ }),
964 -
965 -/***/ "./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx":
966 -/*!**********************************************************************************************!*\
967 - !*** ./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx ***!
968 - \**********************************************************************************************/
969 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
970 -
971 -__webpack_require__.r(__webpack_exports__);
972 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
973 -/* harmony export */ MissingVariableAlert: function() { return /* binding */ MissingVariableAlert; }
974 -/* harmony export */ });
975 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
976 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
977 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
978 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
979 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
980 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
981 -
982 -
983 -
984 -const MissingVariableAlert = ({
985 - onClose,
986 - onClear
987 -}) => {
988 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.ClickAwayListener, {
989 - onClickAway: onClose
990 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Alert, {
991 - variant: "standard",
992 - severity: "warning",
993 - onClose: onClose,
994 - action: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, onClear && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertAction, {
995 - variant: "contained",
996 - onClick: onClear
997 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Clear', 'elementor'))),
998 - sx: {
999 - maxWidth: 300
1000 - }
1001 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.AlertTitle, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('This variable is missing', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
1002 - variant: "body2",
1003 - color: "textPrimary"
1004 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('It may have been deleted. Try clearing this field and select a different value or variable.', 'elementor'))));
1005 -};
1006 -
1007 -/***/ }),
1008 -
1009 -/***/ "./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx":
1010 -/*!*****************************************************************************************!*\
1011 - !*** ./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx ***!
1012 - \*****************************************************************************************/
1013 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1014 -
1015 -__webpack_require__.r(__webpack_exports__);
1016 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1017 -/* harmony export */ NoSearchResults: function() { return /* binding */ NoSearchResults; }
1018 -/* harmony export */ });
1019 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1020 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1021 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1022 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
1023 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1024 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
1025 -
1026 -
1027 -
1028 -const NoSearchResults = ({
1029 - searchValue,
1030 - onClear,
1031 - icon
1032 -}) => {
1033 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Stack, {
1034 - gap: 1,
1035 - alignItems: "center",
1036 - justifyContent: "center",
1037 - p: 2.5,
1038 - color: "text.secondary",
1039 - sx: {
1040 - pb: 3.5,
1041 - pt: 8
1042 - }
1043 - }, icon, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
1044 - align: "center",
1045 - variant: "subtitle2"
1046 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Sorry, nothing matched', 'elementor'), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("br", null), "\u201C", searchValue, "\u201D."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Typography, {
1047 - align: "center",
1048 - variant: "caption",
1049 - sx: {
1050 - display: 'flex',
1051 - flexDirection: 'column'
1052 - }
1053 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Try something else.', 'elementor'), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Link, {
1054 - color: "text.secondary",
1055 - variant: "caption",
1056 - component: "button",
1057 - onClick: onClear
1058 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Clear & try again', 'elementor'))));
1059 -};
1060 -
1061 -/***/ }),
1062 -
1063 -/***/ "./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx":
1064 -/*!****************************************************************************************!*\
1065 - !*** ./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx ***!
1066 - \****************************************************************************************/
1067 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1068 -
1069 -__webpack_require__.r(__webpack_exports__);
1070 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1071 -/* harmony export */ VariablesStyledMenuList: function() { return /* binding */ VariablesStyledMenuList; }
1072 -/* harmony export */ });
1073 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1074 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_0__);
1075 -
1076 -const VariablesStyledMenuList = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_0__.styled)(_elementor_ui__WEBPACK_IMPORTED_MODULE_0__.MenuList)(({
1077 - theme,
1078 - disabled
1079 -}) => ({
1080 - '& > li': {
1081 - height: 32,
1082 - width: '100%',
1083 - display: 'flex',
1084 - alignItems: 'center'
1085 - },
1086 - '& > [role="option"]': {
1087 - ...theme.typography.caption,
1088 - lineHeight: 'inherit',
1089 - padding: theme.spacing(0.5, 1, 0.5, 2),
1090 - ...(!disabled && {
1091 - '&:hover, &:focus': {
1092 - backgroundColor: theme.palette.action.hover
1093 - },
1094 - cursor: 'pointer'
1095 - }),
1096 - '&[aria-selected="true"]': {
1097 - backgroundColor: theme.palette.action.selected
1098 - },
1099 - textOverflow: 'ellipsis',
1100 - position: 'absolute',
1101 - top: 0,
1102 - left: 0,
1103 - '&:hover .MuiIconButton-root, .MuiIconButton-root:focus': {
1104 - opacity: 1
1105 - }
1106 - },
1107 - width: '100%',
1108 - position: 'relative'
1109 -}));
1110 -
1111 -/***/ }),
1112 -
1113 -/***/ "./packages/packages/core/editor-variables/src/components/ui/tags/assigned-tag.tsx":
1114 -/*!*****************************************************************************************!*\
1115 - !*** ./packages/packages/core/editor-variables/src/components/ui/tags/assigned-tag.tsx ***!
1116 - \*****************************************************************************************/
1117 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1118 -
1119 -__webpack_require__.r(__webpack_exports__);
1120 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1121 -/* harmony export */ AssignedTag: function() { return /* binding */ AssignedTag; },
1122 -/* harmony export */ SIZE: function() { return /* binding */ SIZE; }
1123 -/* harmony export */ });
1124 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1125 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1126 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
1127 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__);
1128 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1129 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
1130 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1131 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
1132 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1133 -
1134 -
1135 -
1136 -
1137 -const SIZE = 'tiny';
1138 -const UNLINK_LABEL = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Unlink variable', 'elementor');
1139 -const AssignedTag = ({
1140 - startIcon,
1141 - label,
1142 - onUnlink,
1143 - ...props
1144 -}) => {
1145 - const actions = [];
1146 - if (onUnlink) {
1147 - actions.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
1148 - key: "unlink",
1149 - title: UNLINK_LABEL,
1150 - placement: "bottom"
1151 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, {
1152 - size: SIZE,
1153 - onClick: onUnlink,
1154 - "aria-label": UNLINK_LABEL
1155 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__.DetachIcon, {
1156 - fontSize: SIZE
1157 - }))));
1158 - }
1159 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
1160 - title: label,
1161 - placement: "top"
1162 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.UnstableTag, _extends({
1163 - fullWidth: true,
1164 - showActionsOnHover: true,
1165 - startIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Stack, {
1166 - gap: 0.5,
1167 - direction: "row",
1168 - alignItems: "center"
1169 - }, startIcon),
1170 - label: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
1171 - sx: {
1172 - display: 'inline-grid',
1173 - minWidth: 0
1174 - }
1175 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
1176 - sx: {
1177 - lineHeight: 1.34
1178 - },
1179 - variant: "caption",
1180 - noWrap: true
1181 - }, label)),
1182 - actions: actions
1183 - }, props)));
1184 -};
1185 -
1186 -/***/ }),
1187 -
1188 -/***/ "./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx":
1189 -/*!*************************************************************************************************!*\
1190 - !*** ./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx ***!
1191 - \*************************************************************************************************/
1192 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1193 -
1194 -__webpack_require__.r(__webpack_exports__);
1195 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1196 -/* harmony export */ WarningVariableTag: function() { return /* binding */ WarningVariableTag; }
1197 -/* harmony export */ });
1198 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1199 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1200 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
1201 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__);
1202 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1203 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
1204 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1205 -
1206 -
1207 -
1208 -const WarningVariableTag = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(({
1209 - label,
1210 - suffix,
1211 - onClick,
1212 - icon,
1213 - ...props
1214 -}, ref) => {
1215 - const displayText = suffix ? `${label} (${suffix})` : label;
1216 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Chip, _extends({
1217 - ref: ref,
1218 - size: "tiny",
1219 - color: "warning",
1220 - shape: "rounded",
1221 - variant: "standard",
1222 - onClick: onClick,
1223 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__.AlertTriangleFilledIcon, null),
1224 - label: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Tooltip, {
1225 - title: displayText,
1226 - placement: "top"
1227 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
1228 - sx: {
1229 - display: 'inline-grid',
1230 - minWidth: 0
1231 - }
1232 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
1233 - variant: "caption",
1234 - noWrap: true,
1235 - sx: {
1236 - lineHeight: 1.34
1237 - }
1238 - }, displayText))),
1239 - sx: {
1240 - height: theme => theme.spacing(3.5),
1241 - borderRadius: theme => theme.spacing(1),
1242 - justifyContent: 'flex-start',
1243 - width: '100%'
1244 - }
1245 - }, props));
1246 -});
1247 -WarningVariableTag.displayName = 'WarningVariableTag';
1248 -
1249 -/***/ }),
1250 -
1251 -/***/ "./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx":
1252 -/*!***********************************************************************************************!*\
1253 - !*** ./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx ***!
1254 - \***********************************************************************************************/
1255 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1256 -
1257 -__webpack_require__.r(__webpack_exports__);
1258 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1259 -/* harmony export */ VariablePromotionChip: function() { return /* binding */ VariablePromotionChip; }
1260 -/* harmony export */ });
1261 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1262 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1263 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1264 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1265 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
1266 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__);
1267 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1268 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__);
1269 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/utils */ "@elementor/utils");
1270 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_utils__WEBPACK_IMPORTED_MODULE_4__);
1271 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1272 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__);
1273 -
1274 -
1275 -
1276 -
1277 -
1278 -
1279 -
1280 -const VariablePromotionChip = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(({
1281 - variableType,
1282 - upgradeUrl,
1283 - trackingData
1284 -}, ref) => {
1285 - const [isOpen, setIsOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
1286 - (0,_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
1287 - const toggle = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
1288 - setIsOpen(prev => {
1289 - if (!prev) {
1290 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.trackViewPromotion)(trackingData);
1291 - }
1292 - return !prev;
1293 - });
1294 - }, [trackingData]);
1295 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(ref, () => ({
1296 - toggle
1297 - }), [toggle]);
1298 - const title = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
1299 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('%s variables', 'elementor'), (0,_elementor_utils__WEBPACK_IMPORTED_MODULE_4__.capitalize)(variableType));
1300 - const content = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
1301 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Upgrade to continue creating and editing %s variables.', 'elementor'), variableType);
1302 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PromotionPopover, {
1303 - open: isOpen,
1304 - title: title,
1305 - content: content,
1306 - ctaText: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Upgrade now', 'elementor'),
1307 - ctaUrl: upgradeUrl,
1308 - onClose: e => {
1309 - e.stopPropagation();
1310 - setIsOpen(false);
1311 - },
1312 - onCtaClick: () => (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.trackUpgradePromotionClick)(trackingData)
1313 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Box, {
1314 - onClick: e => {
1315 - e.stopPropagation();
1316 - toggle();
1317 - },
1318 - sx: {
1319 - cursor: 'pointer',
1320 - display: 'inline-flex'
1321 - }
1322 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PromotionChip, null)));
1323 -});
1324 -
1325 -/***/ }),
1326 -
1327 -/***/ "./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx":
1328 -/*!**************************************************************************************************!*\
1329 - !*** ./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx ***!
1330 - \**************************************************************************************************/
1331 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1332 -
1333 -__webpack_require__.r(__webpack_exports__);
1334 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1335 -/* harmony export */ AssignedVariable: function() { return /* binding */ AssignedVariable; }
1336 -/* harmony export */ });
1337 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1338 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1339 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1340 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1341 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
1342 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__);
1343 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1344 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__);
1345 -/* harmony import */ var _utils_unlink_variable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/unlink-variable */ "./packages/packages/core/editor-variables/src/utils/unlink-variable.ts");
1346 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
1347 -/* harmony import */ var _variable_selection_popover__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../variable-selection-popover */ "./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx");
1348 -/* harmony import */ var _tags_assigned_tag__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../tags/assigned-tag */ "./packages/packages/core/editor-variables/src/components/ui/tags/assigned-tag.tsx");
1349 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1350 -
1351 -
1352 -
1353 -
1354 -
1355 -
1356 -
1357 -
1358 -
1359 -const AssignedVariable = ({
1360 - variable,
1361 - propTypeKey
1362 -}) => {
1363 - const {
1364 - startIcon,
1365 - propTypeUtil
1366 - } = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_5__.getVariableType)(propTypeKey);
1367 - const {
1368 - setValue
1369 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
1370 - const anchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
1371 - const popupId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
1372 - const popupState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.usePopupState)({
1373 - variant: 'popover',
1374 - popupId: `elementor-variables-list-${popupId}`
1375 - });
1376 - const unlinkVariable = (0,_utils_unlink_variable__WEBPACK_IMPORTED_MODULE_4__.createUnlinkHandler)(variable, propTypeKey, setValue);
1377 - const StartIcon = startIcon || (() => null);
1378 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Box, {
1379 - ref: anchorRef
1380 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tags_assigned_tag__WEBPACK_IMPORTED_MODULE_7__.AssignedTag, _extends({
1381 - label: variable.label,
1382 - startIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__.ColorFilterIcon, {
1383 - fontSize: _tags_assigned_tag__WEBPACK_IMPORTED_MODULE_7__.SIZE
1384 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(StartIcon, {
1385 - value: variable.value
1386 - })),
1387 - onUnlink: unlinkVariable
1388 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.bindTrigger)(popupState))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Popover, _extends({
1389 - disableScrollLock: true,
1390 - anchorEl: anchorRef.current,
1391 - anchorOrigin: {
1392 - vertical: 'bottom',
1393 - horizontal: 'right'
1394 - },
1395 - transformOrigin: {
1396 - vertical: 'top',
1397 - horizontal: 'right'
1398 - },
1399 - PaperProps: {
1400 - sx: {
1401 - my: 1
1402 - }
1403 - }
1404 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.bindPopover)(popupState)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_selection_popover__WEBPACK_IMPORTED_MODULE_6__.VariableSelectionPopover, {
1405 - selectedVariable: variable,
1406 - closePopover: popupState.close,
1407 - propTypeKey: propTypeUtil.key
1408 - })));
1409 -};
1410 -
1411 -/***/ }),
1412 -
1413 -/***/ "./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx":
1414 -/*!*************************************************************************************************!*\
1415 - !*** ./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx ***!
1416 - \*************************************************************************************************/
1417 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1418 -
1419 -__webpack_require__.r(__webpack_exports__);
1420 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1421 -/* harmony export */ DeletedVariable: function() { return /* binding */ DeletedVariable; }
1422 -/* harmony export */ });
1423 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1424 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1425 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1426 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1427 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1428 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
1429 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1430 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
1431 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
1432 -/* harmony import */ var _hooks_use_permissions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../hooks/use-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");
1433 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
1434 -/* harmony import */ var _hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/use-variable-bound-prop */ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts");
1435 -/* harmony import */ var _utils_unlink_variable__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../utils/unlink-variable */ "./packages/packages/core/editor-variables/src/utils/unlink-variable.ts");
1436 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
1437 -/* harmony import */ var _variable_restore__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../variable-restore */ "./packages/packages/core/editor-variables/src/components/variable-restore.tsx");
1438 -/* harmony import */ var _deleted_variable_alert__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../deleted-variable-alert */ "./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx");
1439 -/* harmony import */ var _tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../tags/warning-variable-tag */ "./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");
1440 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1441 -
1442 -
1443 -
1444 -
1445 -
1446 -
1447 -
1448 -
1449 -
1450 -
1451 -
1452 -
1453 -
1454 -
1455 -const DeletedVariable = ({
1456 - variable,
1457 - propTypeKey
1458 -}) => {
1459 - const {
1460 - propTypeUtil
1461 - } = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__.getVariableType)(propTypeKey);
1462 - const boundProp = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
1463 - const userPermissions = (0,_hooks_use_permissions__WEBPACK_IMPORTED_MODULE_5__.usePermissions)();
1464 - const [showInfotip, setShowInfotip] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
1465 - const toggleInfotip = () => setShowInfotip(prev => !prev);
1466 - const closeInfotip = () => setShowInfotip(false);
1467 - const deletedChipAnchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
1468 - const popupId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
1469 - const popupState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.usePopupState)({
1470 - variant: 'popover',
1471 - popupId: `elementor-variables-restore-${popupId}`
1472 - });
1473 - const handlers = {};
1474 - if (userPermissions.canUnlink()) {
1475 - handlers.onUnlink = (0,_utils_unlink_variable__WEBPACK_IMPORTED_MODULE_8__.createUnlinkHandler)(variable, propTypeKey, boundProp.setValue);
1476 - }
1477 - if (userPermissions.canRestore()) {
1478 - handlers.onRestore = () => {
1479 - if (!variable.key) {
1480 - return;
1481 - }
1482 - (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_6__.restoreVariable)(variable.key).then(id => {
1483 - (0,_hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_7__.resolveBoundPropAndSetValue)(propTypeUtil.create(id), boundProp);
1484 - closeInfotip();
1485 - }).catch(() => {
1486 - closeInfotip();
1487 - popupState.setAnchorEl(deletedChipAnchorRef.current);
1488 - popupState.open();
1489 - });
1490 - };
1491 - }
1492 - const handleRestoreWithOverrides = () => {
1493 - popupState.close();
1494 - };
1495 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
1496 - ref: deletedChipAnchorRef
1497 - }, showInfotip && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Backdrop, {
1498 - open: true,
1499 - onClick: closeInfotip,
1500 - invisible: true
1501 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Infotip, {
1502 - color: "warning",
1503 - placement: "right-start",
1504 - open: showInfotip,
1505 - disableHoverListener: true,
1506 - onClose: closeInfotip,
1507 - content: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_deleted_variable_alert__WEBPACK_IMPORTED_MODULE_11__.DeletedVariableAlert, {
1508 - onClose: closeInfotip,
1509 - onUnlink: handlers.onUnlink,
1510 - onRestore: handlers.onRestore,
1511 - label: variable.label
1512 - }),
1513 - slotProps: {
1514 - popper: {
1515 - modifiers: [{
1516 - name: 'offset',
1517 - options: {
1518 - offset: [0, 24]
1519 - }
1520 - }]
1521 - }
1522 - }
1523 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_12__.WarningVariableTag, {
1524 - label: variable.label,
1525 - onClick: toggleInfotip,
1526 - suffix: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('deleted', 'elementor')
1527 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Popover, _extends({
1528 - disableScrollLock: true,
1529 - anchorOrigin: {
1530 - vertical: 'bottom',
1531 - horizontal: 'right'
1532 - },
1533 - transformOrigin: {
1534 - vertical: 'top',
1535 - horizontal: 'right'
1536 - },
1537 - PaperProps: {
1538 - sx: {
1539 - my: 1
1540 - }
1541 - }
1542 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindPopover)(popupState)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_variable_type_context__WEBPACK_IMPORTED_MODULE_4__.VariableTypeProvider, {
1543 - propTypeKey: propTypeKey
1544 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_restore__WEBPACK_IMPORTED_MODULE_10__.VariableRestore, {
1545 - variableId: variable.key ?? '',
1546 - onClose: popupState.close,
1547 - onSubmit: handleRestoreWithOverrides
1548 - })))));
1549 -};
1550 -
1551 -/***/ }),
1552 -
1553 -/***/ "./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx":
1554 -/*!**************************************************************************************************!*\
1555 - !*** ./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx ***!
1556 - \**************************************************************************************************/
1557 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1558 -
1559 -__webpack_require__.r(__webpack_exports__);
1560 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1561 -/* harmony export */ MismatchVariable: function() { return /* binding */ MismatchVariable; }
1562 -/* harmony export */ });
1563 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1564 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1565 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1566 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1567 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1568 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
1569 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1570 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
1571 -/* harmony import */ var _variable_selection_popover__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../variable-selection-popover */ "./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx");
1572 -/* harmony import */ var _mismatch_variable_alert__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../mismatch-variable-alert */ "./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx");
1573 -/* harmony import */ var _tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../tags/warning-variable-tag */ "./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");
1574 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1575 -
1576 -
1577 -
1578 -
1579 -
1580 -
1581 -
1582 -
1583 -const MismatchVariable = ({
1584 - variable
1585 -}) => {
1586 - const {
1587 - setValue,
1588 - value
1589 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
1590 - const anchorRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
1591 - const popupId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
1592 - const popupState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.usePopupState)({
1593 - variant: 'popover',
1594 - popupId: `elementor-variables-list-${popupId}`
1595 - });
1596 - const [infotipVisible, setInfotipVisible] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
1597 - const toggleInfotip = () => setInfotipVisible(prev => !prev);
1598 - const closeInfotip = () => setInfotipVisible(false);
1599 - const triggerSelect = () => {
1600 - closeInfotip();
1601 - popupState.setAnchorEl(anchorRef.current);
1602 - popupState.open();
1603 - };
1604 - const clearValue = () => {
1605 - closeInfotip();
1606 - setValue(null);
1607 - };
1608 - const showClearButton = !!value;
1609 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
1610 - ref: anchorRef
1611 - }, infotipVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Backdrop, {
1612 - open: true,
1613 - onClick: closeInfotip,
1614 - invisible: true
1615 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Infotip, {
1616 - color: "warning",
1617 - placement: "right-start",
1618 - open: infotipVisible,
1619 - disableHoverListener: true,
1620 - onClose: closeInfotip,
1621 - content: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_mismatch_variable_alert__WEBPACK_IMPORTED_MODULE_5__.MismatchVariableAlert, {
1622 - onClose: closeInfotip,
1623 - onClear: showClearButton ? clearValue : undefined,
1624 - triggerSelect: triggerSelect
1625 - }),
1626 - slotProps: {
1627 - popper: {
1628 - modifiers: [{
1629 - name: 'offset',
1630 - options: {
1631 - offset: [0, 24]
1632 - }
1633 - }]
1634 - }
1635 - }
1636 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_6__.WarningVariableTag, {
1637 - label: variable.label,
1638 - onClick: toggleInfotip,
1639 - suffix: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('changed', 'elementor')
1640 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Popover, _extends({
1641 - disableScrollLock: true,
1642 - anchorEl: anchorRef.current,
1643 - anchorOrigin: {
1644 - vertical: 'bottom',
1645 - horizontal: 'right'
1646 - },
1647 - transformOrigin: {
1648 - vertical: 'top',
1649 - horizontal: 'right'
1650 - },
1651 - PaperProps: {
1652 - sx: {
1653 - my: 1
1654 - }
1655 - }
1656 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindPopover)(popupState)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_selection_popover__WEBPACK_IMPORTED_MODULE_4__.VariableSelectionPopover, {
1657 - selectedVariable: variable,
1658 - closePopover: popupState.close,
1659 - propTypeKey: variable.type
1660 - })));
1661 -};
1662 -
1663 -/***/ }),
1664 -
1665 -/***/ "./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx":
1666 -/*!*************************************************************************************************!*\
1667 - !*** ./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx ***!
1668 - \*************************************************************************************************/
1669 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1670 -
1671 -__webpack_require__.r(__webpack_exports__);
1672 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1673 -/* harmony export */ MissingVariable: function() { return /* binding */ MissingVariable; }
1674 -/* harmony export */ });
1675 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1676 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1677 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1678 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1679 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1680 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
1681 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1682 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
1683 -/* harmony import */ var _missing_variable_alert__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../missing-variable-alert */ "./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx");
1684 -/* harmony import */ var _tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tags/warning-variable-tag */ "./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");
1685 -
1686 -
1687 -
1688 -
1689 -
1690 -
1691 -
1692 -const MissingVariable = () => {
1693 - const {
1694 - setValue
1695 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
1696 - const [infotipVisible, setInfotipVisible] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
1697 - const toggleInfotip = () => setInfotipVisible(prev => !prev);
1698 - const closeInfotip = () => setInfotipVisible(false);
1699 - const clearValue = () => setValue(null);
1700 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, infotipVisible && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Backdrop, {
1701 - open: true,
1702 - onClick: closeInfotip,
1703 - invisible: true
1704 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Infotip, {
1705 - color: "warning",
1706 - placement: "right-start",
1707 - open: infotipVisible,
1708 - disableHoverListener: true,
1709 - onClose: closeInfotip,
1710 - content: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_missing_variable_alert__WEBPACK_IMPORTED_MODULE_4__.MissingVariableAlert, {
1711 - onClose: closeInfotip,
1712 - onClear: clearValue
1713 - }),
1714 - slotProps: {
1715 - popper: {
1716 - modifiers: [{
1717 - name: 'offset',
1718 - options: {
1719 - offset: [0, 24]
1720 - }
1721 - }]
1722 - }
1723 - }
1724 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_tags_warning_variable_tag__WEBPACK_IMPORTED_MODULE_5__.WarningVariableTag, {
1725 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Missing variable', 'elementor'),
1726 - onClick: toggleInfotip
1727 - })));
1728 -};
1729 -
1730 -/***/ }),
1731 -
1732 -/***/ "./packages/packages/core/editor-variables/src/components/variable-creation.tsx":
1733 -/*!**************************************************************************************!*\
1734 - !*** ./packages/packages/core/editor-variables/src/components/variable-creation.tsx ***!
1735 - \**************************************************************************************/
1736 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1737 -
1738 -__webpack_require__.r(__webpack_exports__);
1739 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1740 -/* harmony export */ VariableCreation: function() { return /* binding */ VariableCreation; }
1741 -/* harmony export */ });
1742 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1743 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1744 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1745 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1746 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
1747 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__);
1748 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
1749 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__);
1750 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1751 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__);
1752 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1753 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__);
1754 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
1755 -/* harmony import */ var _hooks_use_initial_value__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/use-initial-value */ "./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts");
1756 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
1757 -/* harmony import */ var _hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/use-variable-bound-prop */ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts");
1758 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
1759 -/* harmony import */ var _fields_label_field__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./fields/label-field */ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");
1760 -/* harmony import */ var _ui_form_field__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./ui/form-field */ "./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");
1761 -
1762 -
1763 -
1764 -
1765 -
1766 -
1767 -
1768 -
1769 -
1770 -
1771 -
1772 -
1773 -
1774 -
1775 -const SIZE = 'tiny';
1776 -const VariableCreation = ({
1777 - onGoBack,
1778 - onClose
1779 -}) => {
1780 - const {
1781 - icon: VariableIcon,
1782 - valueField: ValueField,
1783 - propTypeUtil
1784 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__.useVariableType)();
1785 - const {
1786 - setVariableValue: setVariable,
1787 - path
1788 - } = (0,_hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_9__.useVariableBoundProp)();
1789 - const {
1790 - propType
1791 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
1792 - const initialValue = (0,_hooks_use_initial_value__WEBPACK_IMPORTED_MODULE_7__.useInitialValue)();
1793 - const [value, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialValue);
1794 - const [label, setLabel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
1795 - const [errorMessage, setErrorMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
1796 - const [valueFieldError, setValueFieldError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
1797 - const [propTypeKey, setPropTypeKey] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(propTypeUtil.key);
1798 - const {
1799 - labelFieldError,
1800 - setLabelFieldError
1801 - } = (0,_fields_label_field__WEBPACK_IMPORTED_MODULE_11__.useLabelError)();
1802 - const resetFields = () => {
1803 - setValue('');
1804 - setLabel('');
1805 - setErrorMessage('');
1806 - setValueFieldError('');
1807 - };
1808 - const closePopover = () => {
1809 - resetFields();
1810 - onClose();
1811 - };
1812 - const handleCreateAndTrack = () => {
1813 - (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_8__.createVariable)({
1814 - value,
1815 - label,
1816 - type: propTypeKey
1817 - }, {
1818 - eventData: {
1819 - controlPath: path.join('.')
1820 - }
1821 - }).then(key => {
1822 - setVariable(key);
1823 - closePopover();
1824 - }).catch(error => {
1825 - const mappedError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_10__.mapServerError)(error);
1826 - if (mappedError && 'label' === mappedError.field) {
1827 - setLabel('');
1828 - setLabelFieldError({
1829 - value: label,
1830 - message: mappedError.message
1831 - });
1832 - return;
1833 - }
1834 - setErrorMessage(_utils_validations__WEBPACK_IMPORTED_MODULE_10__.ERROR_MESSAGES.UNEXPECTED_ERROR);
1835 - });
1836 - };
1837 - const hasEmptyFields = () => {
1838 - if ('' === label.trim()) {
1839 - return true;
1840 - }
1841 - if ('string' === typeof value) {
1842 - return '' === value.trim();
1843 - }
1844 - return false === Boolean(value);
1845 - };
1846 - const hasErrors = () => {
1847 - return !!errorMessage;
1848 - };
1849 - const isSubmitDisabled = hasEmptyFields() || hasErrors();
1850 - const handleKeyDown = event => {
1851 - if (event.key === 'Enter' && !isSubmitDisabled) {
1852 - event.preventDefault();
1853 - handleCreateAndTrack();
1854 - }
1855 - };
1856 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.SectionPopoverBody, {
1857 - height: "auto"
1858 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PopoverHeader, {
1859 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, onGoBack && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
1860 - size: SIZE,
1861 - "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Go Back', 'elementor'),
1862 - onClick: onGoBack
1863 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__.ArrowLeftIcon, {
1864 - fontSize: SIZE
1865 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
1866 - fontSize: SIZE
1867 - })),
1868 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Create variable', 'elementor'),
1869 - onClose: closePopover
1870 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Divider, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.PopoverContent, {
1871 - p: 2
1872 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_12__.FormField, {
1873 - id: "variable-label",
1874 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Name', 'elementor'),
1875 - errorMsg: labelFieldError?.message,
1876 - noticeMsg: (0,_utils_validations__WEBPACK_IMPORTED_MODULE_10__.labelHint)(label)
1877 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fields_label_field__WEBPACK_IMPORTED_MODULE_11__.LabelField, {
1878 - id: "variable-label",
1879 - value: label,
1880 - error: labelFieldError,
1881 - onChange: newValue => {
1882 - setLabel(newValue);
1883 - setErrorMessage('');
1884 - },
1885 - onErrorChange: errorMsg => {
1886 - setLabelFieldError({
1887 - value: '',
1888 - message: errorMsg
1889 - });
1890 - },
1891 - onKeyDown: handleKeyDown,
1892 - focusOnShow: true
1893 - })), ValueField && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_12__.FormField, {
1894 - errorMsg: valueFieldError,
1895 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Value', 'elementor')
1896 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Typography, {
1897 - variant: "h5",
1898 - id: "variable-value-wrapper"
1899 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(ValueField, {
1900 - value: value,
1901 - onPropTypeKeyChange: key => setPropTypeKey(key),
1902 - onChange: newValue => {
1903 - setValue(newValue);
1904 - setErrorMessage('');
1905 - setValueFieldError('');
1906 - },
1907 - onValidationChange: setValueFieldError,
1908 - propType: propType,
1909 - onKeyDown: handleKeyDown
1910 - }))), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.FormHelperText, {
1911 - error: true
1912 - }, errorMessage)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.CardActions, {
1913 - sx: {
1914 - pt: 0.5,
1915 - pb: 1
1916 - }
1917 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Button, {
1918 - id: "create-variable-button",
1919 - size: "small",
1920 - variant: "contained",
1921 - disabled: isSubmitDisabled,
1922 - onClick: handleCreateAndTrack
1923 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Create', 'elementor'))));
1924 -};
1925 -
1926 -/***/ }),
1927 -
1928 -/***/ "./packages/packages/core/editor-variables/src/components/variable-edit.tsx":
1929 -/*!**********************************************************************************!*\
1930 - !*** ./packages/packages/core/editor-variables/src/components/variable-edit.tsx ***!
1931 - \**********************************************************************************/
1932 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
1933 -
1934 -__webpack_require__.r(__webpack_exports__);
1935 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
1936 -/* harmony export */ VariableEdit: function() { return /* binding */ VariableEdit; }
1937 -/* harmony export */ });
1938 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
1939 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
1940 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
1941 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
1942 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-current-user */ "@elementor/editor-current-user");
1943 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_2__);
1944 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
1945 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__);
1946 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
1947 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__);
1948 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
1949 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__);
1950 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
1951 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__);
1952 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
1953 -/* harmony import */ var _hooks_use_permissions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/use-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");
1954 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
1955 -/* harmony import */ var _hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../hooks/use-variable-bound-prop */ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts");
1956 -/* harmony import */ var _style_variables_repository__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../style-variables-repository */ "./packages/packages/core/editor-variables/src/style-variables-repository.ts");
1957 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
1958 -/* harmony import */ var _fields_label_field__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./fields/label-field */ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");
1959 -/* harmony import */ var _ui_delete_confirmation_dialog__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ui/delete-confirmation-dialog */ "./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx");
1960 -/* harmony import */ var _ui_edit_confirmation_dialog__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./ui/edit-confirmation-dialog */ "./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx");
1961 -/* harmony import */ var _ui_form_field__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./ui/form-field */ "./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");
1962 -
1963 -
1964 -
1965 -
1966 -
1967 -
1968 -
1969 -
1970 -
1971 -
1972 -
1973 -
1974 -
1975 -
1976 -
1977 -
1978 -
1979 -
1980 -const SIZE = 'tiny';
1981 -const DELETE_LABEL = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Delete variable', 'elementor');
1982 -const VariableEdit = ({
1983 - onClose,
1984 - onGoBack,
1985 - onSubmit,
1986 - editId
1987 -}) => {
1988 - const {
1989 - icon: VariableIcon,
1990 - valueField: ValueField,
1991 - variableType,
1992 - propTypeUtil
1993 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_7__.useVariableType)();
1994 - const {
1995 - setVariableValue: notifyBoundPropChange,
1996 - variableId,
1997 - path
1998 - } = (0,_hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_10__.useVariableBoundProp)();
1999 - const {
2000 - propType
2001 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
2002 - const [isMessageSuppressed, suppressMessage] = (0,_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_2__.useSuppressedMessage)(_ui_edit_confirmation_dialog__WEBPACK_IMPORTED_MODULE_15__.EDIT_CONFIRMATION_DIALOG_ID);
2003 - const [deleteConfirmation, setDeleteConfirmation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
2004 - const [editConfirmation, setEditConfirmation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
2005 - const [errorMessage, setErrorMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2006 - const [valueFieldError, setValueFieldError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2007 - const {
2008 - labelFieldError,
2009 - setLabelFieldError
2010 - } = (0,_fields_label_field__WEBPACK_IMPORTED_MODULE_13__.useLabelError)();
2011 - const variable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_9__.useVariable)(editId);
2012 - const [propTypeKey, setPropTypeKey] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(variable?.type ?? propTypeUtil.key);
2013 - if (!variable) {
2014 - throw new Error(`Global ${variableType} variable not found`);
2015 - }
2016 - const userPermissions = (0,_hooks_use_permissions__WEBPACK_IMPORTED_MODULE_8__.usePermissions)();
2017 - const [value, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(() => variable.value);
2018 - const [label, setLabel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(() => variable.label);
2019 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
2020 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_11__.styleVariablesRepository.update({
2021 - [editId]: {
2022 - ...variable,
2023 - value
2024 - }
2025 - });
2026 - return () => {
2027 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_11__.styleVariablesRepository.update({
2028 - [editId]: {
2029 - ...variable
2030 - }
2031 - });
2032 - };
2033 - }, [editId, value, variable]);
2034 - const handleUpdate = () => {
2035 - if (isMessageSuppressed) {
2036 - handleSaveVariable();
2037 - } else {
2038 - setEditConfirmation(true);
2039 - }
2040 - };
2041 - const handleSaveVariable = () => {
2042 - const typeChanged = propTypeKey !== variable.type;
2043 - const updatePayload = typeChanged ? {
2044 - value,
2045 - label,
2046 - type: propTypeKey
2047 - } : {
2048 - value,
2049 - label
2050 - };
2051 - (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_9__.updateVariable)(editId, updatePayload, {
2052 - eventData: {
2053 - controlPath: path.join('.')
2054 - }
2055 - }).then(() => {
2056 - maybeTriggerBoundPropChange();
2057 - onSubmit?.();
2058 - }).catch(error => {
2059 - const mappedError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_12__.mapServerError)(error);
2060 - if (mappedError && 'label' === mappedError.field) {
2061 - setLabel('');
2062 - setLabelFieldError({
2063 - value: label,
2064 - message: mappedError.message
2065 - });
2066 - return;
2067 - }
2068 - setErrorMessage(_utils_validations__WEBPACK_IMPORTED_MODULE_12__.ERROR_MESSAGES.UNEXPECTED_ERROR);
2069 - });
2070 - };
2071 - const handleDelete = () => {
2072 - (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_9__.deleteVariable)(editId).then(() => {
2073 - maybeTriggerBoundPropChange();
2074 - onSubmit?.();
2075 - });
2076 - };
2077 - const maybeTriggerBoundPropChange = () => {
2078 - if (editId === variableId) {
2079 - notifyBoundPropChange(editId);
2080 - }
2081 - };
2082 - const handleDeleteConfirmation = () => {
2083 - setDeleteConfirmation(true);
2084 - };
2085 - const closeDeleteDialog = () => () => {
2086 - setDeleteConfirmation(false);
2087 - };
2088 - const closeEditDialog = () => () => {
2089 - setEditConfirmation(false);
2090 - };
2091 - const actions = [];
2092 - if (userPermissions.canDelete()) {
2093 - actions.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tooltip, {
2094 - key: "delete",
2095 - placement: "top",
2096 - title: DELETE_LABEL
2097 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
2098 - size: SIZE,
2099 - onClick: handleDeleteConfirmation,
2100 - "aria-label": DELETE_LABEL
2101 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__.TrashIcon, {
2102 - fontSize: SIZE
2103 - }))));
2104 - }
2105 - const hasEmptyFields = () => {
2106 - if ('' === label.trim()) {
2107 - return true;
2108 - }
2109 - if ('string' === typeof value) {
2110 - return '' === value.trim();
2111 - }
2112 - return false === Boolean(value);
2113 - };
2114 - const noValueChanged = () => {
2115 - return value === variable.value && label === variable.label;
2116 - };
2117 - const hasErrors = () => {
2118 - return !!errorMessage;
2119 - };
2120 - const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
2121 - const handleKeyDown = event => {
2122 - if (event.key === 'Enter' && !isSubmitDisabled) {
2123 - event.preventDefault();
2124 - handleUpdate();
2125 - }
2126 - };
2127 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SectionPopoverBody, {
2128 - height: "auto"
2129 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.PopoverHeader, {
2130 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Edit variable', 'elementor'),
2131 - onClose: onClose,
2132 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, onGoBack && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.IconButton, {
2133 - size: SIZE,
2134 - "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Go Back', 'elementor'),
2135 - onClick: onGoBack
2136 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__.ArrowLeftIcon, {
2137 - fontSize: SIZE
2138 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
2139 - fontSize: SIZE
2140 - })),
2141 - actions: actions
2142 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Divider, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.PopoverContent, {
2143 - p: 2
2144 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_16__.FormField, {
2145 - id: "variable-label",
2146 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Name', 'elementor'),
2147 - errorMsg: labelFieldError?.message,
2148 - noticeMsg: (0,_utils_validations__WEBPACK_IMPORTED_MODULE_12__.labelHint)(label)
2149 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fields_label_field__WEBPACK_IMPORTED_MODULE_13__.LabelField, {
2150 - id: "variable-label",
2151 - value: label,
2152 - error: labelFieldError,
2153 - onChange: newValue => {
2154 - setLabel(newValue);
2155 - setErrorMessage('');
2156 - },
2157 - onErrorChange: errorMsg => {
2158 - setLabelFieldError({
2159 - value: '',
2160 - message: errorMsg
2161 - });
2162 - },
2163 - onKeyDown: handleKeyDown,
2164 - focusOnShow: true
2165 - })), ValueField && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_16__.FormField, {
2166 - errorMsg: valueFieldError,
2167 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Value', 'elementor')
2168 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Typography, {
2169 - variant: "h5"
2170 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(ValueField, {
2171 - propTypeKey: variable.type,
2172 - onPropTypeKeyChange: key => setPropTypeKey(key),
2173 - value: value,
2174 - onChange: newValue => {
2175 - setValue(newValue);
2176 - setErrorMessage('');
2177 - setValueFieldError('');
2178 - },
2179 - onKeyDown: handleKeyDown,
2180 - onValidationChange: setValueFieldError,
2181 - propType: propType
2182 - }))), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.FormHelperText, {
2183 - error: true
2184 - }, errorMessage)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.CardActions, {
2185 - sx: {
2186 - pt: 0.5,
2187 - pb: 1
2188 - }
2189 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Button, {
2190 - size: "small",
2191 - variant: "contained",
2192 - disabled: isSubmitDisabled,
2193 - onClick: handleUpdate
2194 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Save', 'elementor')))), deleteConfirmation && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_delete_confirmation_dialog__WEBPACK_IMPORTED_MODULE_14__.DeleteConfirmationDialog, {
2195 - open: true,
2196 - label: label,
2197 - onConfirm: handleDelete,
2198 - closeDialog: closeDeleteDialog()
2199 - }), editConfirmation && !isMessageSuppressed && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_edit_confirmation_dialog__WEBPACK_IMPORTED_MODULE_15__.EditConfirmationDialog, {
2200 - closeDialog: closeEditDialog(),
2201 - onConfirm: handleSaveVariable,
2202 - onSuppressMessage: suppressMessage
2203 - }));
2204 -};
2205 -
2206 -/***/ }),
2207 -
2208 -/***/ "./packages/packages/core/editor-variables/src/components/variable-restore.tsx":
2209 -/*!*************************************************************************************!*\
2210 - !*** ./packages/packages/core/editor-variables/src/components/variable-restore.tsx ***!
2211 - \*************************************************************************************/
2212 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2213 -
2214 -__webpack_require__.r(__webpack_exports__);
2215 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2216 -/* harmony export */ VariableRestore: function() { return /* binding */ VariableRestore; }
2217 -/* harmony export */ });
2218 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2219 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2220 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
2221 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
2222 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
2223 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__);
2224 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
2225 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__);
2226 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
2227 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__);
2228 -/* harmony import */ var _context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../context/variable-selection-popover.context */ "./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx");
2229 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
2230 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
2231 -/* harmony import */ var _hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/use-variable-bound-prop */ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts");
2232 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
2233 -/* harmony import */ var _fields_label_field__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./fields/label-field */ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");
2234 -/* harmony import */ var _ui_form_field__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./ui/form-field */ "./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");
2235 -
2236 -
2237 -
2238 -
2239 -
2240 -
2241 -
2242 -
2243 -
2244 -
2245 -
2246 -
2247 -
2248 -const SIZE = 'tiny';
2249 -const VariableRestore = ({
2250 - variableId,
2251 - onClose,
2252 - onSubmit
2253 -}) => {
2254 - const {
2255 - icon: VariableIcon,
2256 - valueField: ValueField,
2257 - variableType,
2258 - propTypeUtil
2259 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__.useVariableType)();
2260 - const {
2261 - setVariableValue: notifyBoundPropChange
2262 - } = (0,_hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_8__.useVariableBoundProp)();
2263 - const {
2264 - propType
2265 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
2266 - const variable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__.useVariable)(variableId);
2267 - if (!variable) {
2268 - throw new Error(`Global ${variableType} variable not found`);
2269 - }
2270 - const [errorMessage, setErrorMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2271 - const [valueFieldError, setValueFieldError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2272 - const [label, setLabel] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(variable.label);
2273 - const [value, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(variable.value);
2274 - const [propTypeKey, setPropTypeKey] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(variable?.type ?? propTypeUtil.key);
2275 - const {
2276 - labelFieldError,
2277 - setLabelFieldError
2278 - } = (0,_fields_label_field__WEBPACK_IMPORTED_MODULE_10__.useLabelError)({
2279 - value: variable.label,
2280 - message: _utils_validations__WEBPACK_IMPORTED_MODULE_9__.ERROR_MESSAGES.DUPLICATED_LABEL
2281 - });
2282 - const handleRestore = () => {
2283 - const typeChanged = propTypeKey !== variable.type;
2284 - const restorePromise = typeChanged ? (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__.restoreVariable)(variableId, label, value, propTypeKey) : (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__.restoreVariable)(variableId, label, value);
2285 - restorePromise.then(() => {
2286 - notifyBoundPropChange(variableId);
2287 - onSubmit?.();
2288 - }).catch(error => {
2289 - const mappedError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_9__.mapServerError)(error);
2290 - if (mappedError && 'label' === mappedError.field) {
2291 - setLabel('');
2292 - setLabelFieldError({
2293 - value: label,
2294 - message: mappedError.message
2295 - });
2296 - return;
2297 - }
2298 - setErrorMessage(_utils_validations__WEBPACK_IMPORTED_MODULE_9__.ERROR_MESSAGES.UNEXPECTED_ERROR);
2299 - });
2300 - };
2301 - const hasEmptyFields = () => {
2302 - if ('' === label.trim()) {
2303 - return true;
2304 - }
2305 - if ('string' === typeof value) {
2306 - return '' === value.trim();
2307 - }
2308 - return false === Boolean(value);
2309 - };
2310 - const noValueChanged = () => {
2311 - return value === variable.value && label === variable.label;
2312 - };
2313 - const hasErrors = () => {
2314 - return !!errorMessage;
2315 - };
2316 - const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
2317 - const handleKeyDown = event => {
2318 - if (event.key === 'Enter' && !isSubmitDisabled) {
2319 - event.preventDefault();
2320 - handleRestore();
2321 - }
2322 - };
2323 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_5__.PopoverContentRefContextProvider, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.SectionPopoverBody, {
2324 - height: "auto"
2325 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PopoverHeader, {
2326 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
2327 - fontSize: SIZE
2328 - }),
2329 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Restore variable', 'elementor'),
2330 - onClose: onClose
2331 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Divider, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.PopoverContent, {
2332 - p: 2
2333 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_11__.FormField, {
2334 - id: "variable-label",
2335 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Name', 'elementor'),
2336 - errorMsg: labelFieldError?.message,
2337 - noticeMsg: (0,_utils_validations__WEBPACK_IMPORTED_MODULE_9__.labelHint)(label)
2338 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fields_label_field__WEBPACK_IMPORTED_MODULE_10__.LabelField, {
2339 - id: "variable-label",
2340 - value: label,
2341 - error: labelFieldError,
2342 - onChange: newValue => {
2343 - setLabel(newValue);
2344 - setErrorMessage('');
2345 - },
2346 - onErrorChange: errorMsg => {
2347 - setLabelFieldError({
2348 - value: '',
2349 - message: errorMsg
2350 - });
2351 - },
2352 - onKeyDown: handleKeyDown,
2353 - focusOnShow: true
2354 - })), ValueField && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_form_field__WEBPACK_IMPORTED_MODULE_11__.FormField, {
2355 - errorMsg: valueFieldError,
2356 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Value', 'elementor')
2357 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Typography, {
2358 - variant: "h5"
2359 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(ValueField, {
2360 - propTypeKey: propTypeKey,
2361 - onPropTypeKeyChange: key => setPropTypeKey(key),
2362 - value: value,
2363 - onChange: newValue => {
2364 - setValue(newValue);
2365 - setErrorMessage('');
2366 - setValueFieldError('');
2367 - },
2368 - onValidationChange: setValueFieldError,
2369 - propType: propType,
2370 - onKeyDown: handleKeyDown
2371 - }))), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.FormHelperText, {
2372 - error: true
2373 - }, errorMessage)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.CardActions, {
2374 - sx: {
2375 - pt: 0.5,
2376 - pb: 1
2377 - }
2378 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Button, {
2379 - size: "small",
2380 - variant: "contained",
2381 - disabled: isSubmitDisabled,
2382 - onClick: handleRestore
2383 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Restore', 'elementor')))));
2384 -};
2385 -
2386 -/***/ }),
2387 -
2388 -/***/ "./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx":
2389 -/*!***********************************************************************************************!*\
2390 - !*** ./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx ***!
2391 - \***********************************************************************************************/
2392 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2393 -
2394 -__webpack_require__.r(__webpack_exports__);
2395 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2396 -/* harmony export */ VariableSelectionPopover: function() { return /* binding */ VariableSelectionPopover; }
2397 -/* harmony export */ });
2398 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2399 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2400 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
2401 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__);
2402 -/* harmony import */ var _context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../context/variable-selection-popover.context */ "./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx");
2403 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
2404 -/* harmony import */ var _hooks_use_permissions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/use-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");
2405 -/* harmony import */ var _hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/use-quota-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts");
2406 -/* harmony import */ var _variable_creation__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./variable-creation */ "./packages/packages/core/editor-variables/src/components/variable-creation.tsx");
2407 -/* harmony import */ var _variable_edit__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./variable-edit */ "./packages/packages/core/editor-variables/src/components/variable-edit.tsx");
2408 -/* harmony import */ var _variables_selection__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./variables-selection */ "./packages/packages/core/editor-variables/src/components/variables-selection.tsx");
2409 -
2410 -
2411 -
2412 -
2413 -
2414 -
2415 -
2416 -
2417 -
2418 -
2419 -const VIEW_LIST = 'list';
2420 -const VIEW_ADD = 'add';
2421 -const VIEW_EDIT = 'edit';
2422 -const VariableSelectionPopover = ({
2423 - closePopover,
2424 - propTypeKey,
2425 - selectedVariable
2426 -}) => {
2427 - const [currentView, setCurrentView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(VIEW_LIST);
2428 - const [editId, setEditId] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2429 - const onSettingsAvailable = (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.isExperimentActive)('e_variables_manager') ? () => {
2430 - window.dispatchEvent(new CustomEvent('elementor/toggle-design-system', {
2431 - detail: {
2432 - tab: 'variables'
2433 - }
2434 - }));
2435 - } : undefined;
2436 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_variable_type_context__WEBPACK_IMPORTED_MODULE_3__.VariableTypeProvider, {
2437 - propTypeKey: propTypeKey
2438 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_context_variable_selection_popover_context__WEBPACK_IMPORTED_MODULE_2__.PopoverContentRefContextProvider, null, RenderView({
2439 - propTypeKey,
2440 - currentView,
2441 - selectedVariable,
2442 - editId,
2443 - setEditId,
2444 - setCurrentView,
2445 - closePopover,
2446 - onSettings: onSettingsAvailable
2447 - })));
2448 -};
2449 -function RenderView(props) {
2450 - const userPermissions = (0,_hooks_use_permissions__WEBPACK_IMPORTED_MODULE_4__.usePermissions)();
2451 - const userQuotaPermissions = (0,_hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_5__.useQuotaPermissions)(props.propTypeKey);
2452 - const handlers = {
2453 - onClose: () => {
2454 - props.closePopover();
2455 - },
2456 - onGoBack: () => {
2457 - props.setCurrentView(VIEW_LIST);
2458 - }
2459 - };
2460 - if (userPermissions.canAdd()) {
2461 - handlers.onAdd = () => {
2462 - props.setCurrentView(VIEW_ADD);
2463 - };
2464 - }
2465 - if (userPermissions.canEdit()) {
2466 - handlers.onEdit = key => {
2467 - props.setEditId(key);
2468 - props.setCurrentView(VIEW_EDIT);
2469 - };
2470 - }
2471 - if (userPermissions.canManageSettings() && props.onSettings) {
2472 - handlers.onSettings = () => {
2473 - props.closePopover();
2474 - props.onSettings?.();
2475 - };
2476 - }
2477 - const handleSubmitOnEdit = () => {
2478 - if (props?.selectedVariable?.key === props.editId) {
2479 - handlers.onClose();
2480 - } else {
2481 - handlers.onGoBack?.();
2482 - }
2483 - };
2484 - if (VIEW_LIST === props.currentView) {
2485 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variables_selection__WEBPACK_IMPORTED_MODULE_8__.VariablesSelection, {
2486 - closePopover: handlers.onClose,
2487 - onAdd: handlers.onAdd,
2488 - onEdit: handlers.onEdit,
2489 - onSettings: handlers.onSettings,
2490 - disabled: !userQuotaPermissions.canAdd()
2491 - });
2492 - }
2493 - if (VIEW_ADD === props.currentView) {
2494 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_creation__WEBPACK_IMPORTED_MODULE_6__.VariableCreation, {
2495 - onGoBack: handlers.onGoBack,
2496 - onClose: handlers.onClose
2497 - });
2498 - }
2499 - if (VIEW_EDIT === props.currentView) {
2500 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_edit__WEBPACK_IMPORTED_MODULE_7__.VariableEdit, {
2501 - editId: props.editId,
2502 - onGoBack: handlers.onGoBack,
2503 - onClose: handlers.onClose,
2504 - onSubmit: handleSubmitOnEdit
2505 - });
2506 - }
2507 - return null;
2508 -}
2509 -
2510 -/***/ }),
2511 -
2512 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts":
2513 -/*!*********************************************************************************************************!*\
2514 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts ***!
2515 - \*********************************************************************************************************/
2516 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2517 -
2518 -__webpack_require__.r(__webpack_exports__);
2519 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2520 -/* harmony export */ useAutoEdit: function() { return /* binding */ useAutoEdit; }
2521 -/* harmony export */ });
2522 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2523 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2524 -
2525 -const useAutoEdit = () => {
2526 - const [autoEditVariableId, setAutoEditVariableId] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(undefined);
2527 - const startAutoEdit = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(variableId => {
2528 - setAutoEditVariableId(variableId);
2529 - }, []);
2530 - const handleAutoEditComplete = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
2531 - setTimeout(() => {
2532 - setAutoEditVariableId(undefined);
2533 - }, 100);
2534 - }, []);
2535 - return {
2536 - autoEditVariableId,
2537 - startAutoEdit,
2538 - handleAutoEditComplete
2539 - };
2540 -};
2541 -
2542 -/***/ }),
2543 -
2544 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts":
2545 -/*!****************************************************************************************************************!*\
2546 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts ***!
2547 - \****************************************************************************************************************/
2548 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2549 -
2550 -__webpack_require__.r(__webpack_exports__);
2551 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2552 -/* harmony export */ useErrorNavigation: function() { return /* binding */ useErrorNavigation; }
2553 -/* harmony export */ });
2554 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2555 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2556 -
2557 -const useErrorNavigation = () => {
2558 - const currentIndexRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);
2559 - const createNavigationCallback = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((ids, onNavigate, onComplete) => {
2560 - return () => {
2561 - if (!ids?.length) {
2562 - return;
2563 - }
2564 - const currentIndex = currentIndexRef.current;
2565 - const currentId = ids[currentIndex];
2566 - if (currentId) {
2567 - onNavigate(currentId);
2568 - const nextIndex = currentIndex + 1;
2569 - if (nextIndex >= ids.length) {
2570 - onComplete();
2571 - currentIndexRef.current = 0;
2572 - } else {
2573 - currentIndexRef.current = nextIndex;
2574 - }
2575 - }
2576 - };
2577 - }, []);
2578 - const resetNavigation = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
2579 - currentIndexRef.current = 0;
2580 - }, []);
2581 - return {
2582 - createNavigationCallback,
2583 - resetNavigation
2584 - };
2585 -};
2586 -
2587 -/***/ }),
2588 -
2589 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts":
2590 -/*!***********************************************************************************************************************!*\
2591 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts ***!
2592 - \***********************************************************************************************************************/
2593 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2594 -
2595 -__webpack_require__.r(__webpack_exports__);
2596 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2597 -/* harmony export */ useVariablesManagerState: function() { return /* binding */ useVariablesManagerState; }
2598 -/* harmony export */ });
2599 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2600 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2601 -/* harmony import */ var _batch_operations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../batch-operations */ "./packages/packages/core/editor-variables/src/batch-operations.ts");
2602 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
2603 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../service */ "./packages/packages/core/editor-variables/src/service.ts");
2604 -/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../storage */ "./packages/packages/core/editor-variables/src/storage.ts");
2605 -/* harmony import */ var _utils_duplicate_label__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/duplicate-label */ "./packages/packages/core/editor-variables/src/utils/duplicate-label.ts");
2606 -/* harmony import */ var _utils_filter_by_search__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../utils/filter-by-search */ "./packages/packages/core/editor-variables/src/utils/filter-by-search.ts");
2607 -/* harmony import */ var _utils_variables_to_list__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../utils/variables-to-list */ "./packages/packages/core/editor-variables/src/utils/variables-to-list.ts");
2608 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
2609 -
2610 -
2611 -
2612 -
2613 -
2614 -
2615 -
2616 -
2617 -
2618 -const useVariablesManagerState = () => {
2619 - const [variables, setVariables] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(() => (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_2__.getVariables)(false));
2620 - const [deletedVariables, setDeletedVariables] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
2621 - const [isSaveDisabled, setIsSaveDisabled] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
2622 - const [isDirty, setIsDirty] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
2623 - const [isSaving, setIsSaving] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
2624 - const [searchValue, setSearchValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
2625 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
2626 - const handleStorageUpdated = () => {
2627 - setVariables((0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_2__.getVariables)(false));
2628 - setDeletedVariables([]);
2629 - setIsDirty(false);
2630 - };
2631 - window.addEventListener(_storage__WEBPACK_IMPORTED_MODULE_4__.STORAGE_UPDATED_EVENT, handleStorageUpdated);
2632 - return () => {
2633 - window.removeEventListener(_storage__WEBPACK_IMPORTED_MODULE_4__.STORAGE_UPDATED_EVENT, handleStorageUpdated);
2634 - };
2635 - }, []);
2636 - const handleOnChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(newVariables => {
2637 - const hasChanges = Object.entries(newVariables).some(([id, newVar]) => {
2638 - const existingVar = variables[id];
2639 - if (!existingVar) {
2640 - return true;
2641 - }
2642 - return existingVar.label !== newVar.label || existingVar.value !== newVar.value || existingVar.order !== newVar.order || existingVar.type !== newVar.type || (existingVar.sync_to_v3 ?? false) !== (newVar.sync_to_v3 ?? false);
2643 - });
2644 - if (hasChanges) {
2645 - setVariables({
2646 - ...variables,
2647 - ...newVariables
2648 - });
2649 - setIsDirty(true);
2650 - }
2651 - }, [variables]);
2652 - const createVariable = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((type, defaultName, defaultValue) => {
2653 - const newId = (0,_batch_operations__WEBPACK_IMPORTED_MODULE_1__.generateTempId)();
2654 - const newVariable = {
2655 - id: newId,
2656 - label: defaultName.trim(),
2657 - value: defaultValue.trim(),
2658 - type
2659 - };
2660 - setVariables(prev => ({
2661 - ...prev,
2662 - [newId]: newVariable
2663 - }));
2664 - setIsDirty(true);
2665 - return newId;
2666 - }, []);
2667 - const duplicateVariable = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(sourceId => {
2668 - const newId = (0,_batch_operations__WEBPACK_IMPORTED_MODULE_1__.generateTempId)();
2669 - setVariables(prev => {
2670 - const source = prev[sourceId];
2671 - if (!source || source.deleted) {
2672 - return prev;
2673 - }
2674 - const existingLabels = Object.values(prev).filter(v => !v.deleted).map(v => v.label);
2675 - return {
2676 - ...prev,
2677 - [newId]: {
2678 - label: (0,_utils_duplicate_label__WEBPACK_IMPORTED_MODULE_5__.generateDuplicateLabel)(source.label, existingLabels),
2679 - value: source.value,
2680 - type: source.type
2681 - }
2682 - };
2683 - });
2684 - setIsDirty(true);
2685 - return newId;
2686 - }, []);
2687 - const handleDeleteVariable = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
2688 - setDeletedVariables(prev => [...prev, itemId]);
2689 - setVariables(prev => ({
2690 - ...prev,
2691 - [itemId]: {
2692 - ...prev[itemId],
2693 - deleted: true
2694 - }
2695 - }));
2696 - setIsDirty(true);
2697 - }, []);
2698 - const handleStartSync = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
2699 - setVariables(prev => ({
2700 - ...prev,
2701 - [itemId]: {
2702 - ...prev[itemId],
2703 - sync_to_v3: true
2704 - }
2705 - }));
2706 - setIsDirty(true);
2707 - }, []);
2708 - const handleStopSync = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
2709 - setVariables(prev => ({
2710 - ...prev,
2711 - [itemId]: {
2712 - ...prev[itemId],
2713 - sync_to_v3: false
2714 - }
2715 - }));
2716 - setIsDirty(true);
2717 - }, []);
2718 - const handleSearch = searchTerm => {
2719 - setSearchValue(searchTerm);
2720 - };
2721 - const handleSave = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {
2722 - const originalVariables = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_2__.getVariables)(false);
2723 - setIsSaving(true);
2724 - const result = await _service__WEBPACK_IMPORTED_MODULE_3__.service.batchSave(originalVariables, variables, deletedVariables);
2725 - if (result.success) {
2726 - await _service__WEBPACK_IMPORTED_MODULE_3__.service.load();
2727 - const updatedVariables = _service__WEBPACK_IMPORTED_MODULE_3__.service.variables();
2728 - setVariables(updatedVariables);
2729 - setDeletedVariables([]);
2730 - setIsDirty(false);
2731 - }
2732 - return {
2733 - success: result.success
2734 - };
2735 - }, [variables, deletedVariables]);
2736 - const filteredVariables = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
2737 - const list = (0,_utils_variables_to_list__WEBPACK_IMPORTED_MODULE_7__.variablesToList)(variables).filter(v => !v.deleted);
2738 - const typeFiltered = (0,_utils_variables_to_list__WEBPACK_IMPORTED_MODULE_7__.applySelectionFilters)(list, (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_8__.getVariableTypes)());
2739 - const searchFiltered = (0,_utils_filter_by_search__WEBPACK_IMPORTED_MODULE_6__.filterBySearch)(typeFiltered, searchValue);
2740 - return Object.fromEntries(searchFiltered.map(({
2741 - key,
2742 - ...rest
2743 - }) => [key, rest]));
2744 - }, [variables, searchValue]);
2745 - return {
2746 - variables: filteredVariables(),
2747 - deletedVariables,
2748 - isDirty,
2749 - isSaveDisabled,
2750 - handleOnChange,
2751 - createVariable,
2752 - duplicateVariable,
2753 - handleDeleteVariable,
2754 - handleStartSync,
2755 - handleStopSync,
2756 - handleSave,
2757 - isSaving,
2758 - handleSearch,
2759 - searchValue,
2760 - setIsSaving,
2761 - setIsSaveDisabled
2762 - };
2763 -};
2764 -
2765 -/***/ }),
2766 -
2767 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx":
2768 -/*!************************************************************************************************************!*\
2769 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx ***!
2770 - \************************************************************************************************************/
2771 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2772 -
2773 -__webpack_require__.r(__webpack_exports__);
2774 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2775 -/* harmony export */ VariableEditMenu: function() { return /* binding */ VariableEditMenu; }
2776 -/* harmony export */ });
2777 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2778 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2779 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
2780 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__);
2781 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
2782 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
2783 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2784 -
2785 -
2786 -
2787 -
2788 -const VariableEditMenu = ({
2789 - menuActions,
2790 - disabled,
2791 - itemId
2792 -}) => {
2793 - const menuState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.usePopupState)({
2794 - variant: 'popover'
2795 - });
2796 - const triggerProps = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindTrigger)(menuState);
2797 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({}, triggerProps, {
2798 - disabled: disabled,
2799 - size: "tiny",
2800 - onClick: e => {
2801 - e.stopPropagation();
2802 - triggerProps.onClick?.(e);
2803 - }
2804 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__.DotsVerticalIcon, {
2805 - fontSize: "tiny"
2806 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Menu, _extends({
2807 - disablePortal: true,
2808 - MenuListProps: {
2809 - dense: true
2810 - },
2811 - PaperProps: {
2812 - elevation: 6
2813 - }
2814 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindMenu)(menuState), {
2815 - anchorEl: menuState.anchorEl,
2816 - anchorOrigin: {
2817 - vertical: 'bottom',
2818 - horizontal: 'right'
2819 - },
2820 - transformOrigin: {
2821 - vertical: 'top',
2822 - horizontal: 'right'
2823 - },
2824 - open: menuState.isOpen,
2825 - onClose: menuState.close
2826 - }), menuActions.map(action => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.MenuItem, {
2827 - key: action.name,
2828 - onClick: e => {
2829 - e.stopPropagation();
2830 - action.onClick?.(itemId);
2831 - menuState.close();
2832 - },
2833 - sx: {
2834 - color: action.color,
2835 - gap: 1
2836 - }
2837 - }, action.icon && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(action.icon, {
2838 - fontSize: 'inherit'
2839 - }), ' ', action.name))));
2840 -};
2841 -
2842 -/***/ }),
2843 -
2844 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx":
2845 -/*!*************************************************************************************************************!*\
2846 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx ***!
2847 - \*************************************************************************************************************/
2848 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2849 -
2850 -__webpack_require__.r(__webpack_exports__);
2851 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2852 -/* harmony export */ VariableTableCell: function() { return /* binding */ VariableTableCell; }
2853 -/* harmony export */ });
2854 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2855 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2856 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
2857 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
2858 -
2859 -
2860 -const VariableTableCell = ({
2861 - children,
2862 - isHeader,
2863 - width,
2864 - maxWidth,
2865 - align,
2866 - noPadding,
2867 - sx
2868 -}) => {
2869 - const baseSx = {
2870 - maxWidth: maxWidth ?? 150,
2871 - cursor: 'initial',
2872 - typography: 'caption',
2873 - ...(isHeader && {
2874 - color: 'text.primary',
2875 - fontWeight: 'bold'
2876 - }),
2877 - ...(isHeader && !noPadding && {
2878 - padding: '10px 16px'
2879 - }),
2880 - ...(width && {
2881 - width
2882 - }),
2883 - ...sx
2884 - };
2885 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableCell, {
2886 - size: "small",
2887 - padding: noPadding ? 'none' : undefined,
2888 - align: align,
2889 - sx: baseSx
2890 - }, children);
2891 -};
2892 -
2893 -/***/ }),
2894 -
2895 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-row.tsx":
2896 -/*!************************************************************************************************************!*\
2897 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-row.tsx ***!
2898 - \************************************************************************************************************/
2899 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
2900 -
2901 -__webpack_require__.r(__webpack_exports__);
2902 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
2903 -/* harmony export */ VariableRow: function() { return /* binding */ VariableRow; }
2904 -/* harmony export */ });
2905 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
2906 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
2907 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
2908 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__);
2909 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
2910 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__);
2911 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
2912 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__);
2913 -/* harmony import */ var _hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../hooks/use-quota-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts");
2914 -/* harmony import */ var _fields_label_field__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../fields/label-field */ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");
2915 -/* harmony import */ var _ui_variable_promotion_chip__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../ui/variable-promotion-chip */ "./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx");
2916 -/* harmony import */ var _variable_editable_cell__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../variable-editable-cell */ "./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx");
2917 -/* harmony import */ var _variable_edit_menu__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./variable-edit-menu */ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx");
2918 -/* harmony import */ var _variable_table_cell__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./variable-table-cell */ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx");
2919 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2920 -
2921 -
2922 -
2923 -
2924 -
2925 -
2926 -
2927 -
2928 -
2929 -
2930 -
2931 -const TRACKING_DATA = {
2932 - target_name: 'variables_manager',
2933 - target_location: 'variables_manager'
2934 -};
2935 -const VariableRow = props => {
2936 - const {
2937 - row,
2938 - variables,
2939 - handleOnChange,
2940 - autoEditVariableId,
2941 - onAutoEditComplete,
2942 - onFieldError,
2943 - menuActions,
2944 - handleRowRef,
2945 - itemProps,
2946 - showDropIndication,
2947 - triggerProps,
2948 - itemStyle,
2949 - triggerStyle,
2950 - isDragged,
2951 - dropPosition,
2952 - setTriggerRef,
2953 - isSorting
2954 - } = props;
2955 - const promotionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
2956 - const isDisabled = !(0,_hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_4__.useQuotaPermissions)(row.type).canEdit();
2957 - const showIndicationBefore = showDropIndication && dropPosition === 'before';
2958 - const showIndicationAfter = showDropIndication && dropPosition === 'after';
2959 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.TableRow, _extends({}, itemProps, {
2960 - ref: itemProps.ref,
2961 - selected: isDragged,
2962 - sx: {
2963 - ...(isDisabled && {
2964 - '& td, & th': {
2965 - color: 'text.disabled'
2966 - }
2967 - }),
2968 - ...(showIndicationBefore && {
2969 - '& td, & th': {
2970 - borderTop: '2px solid',
2971 - borderTopColor: 'primary.main'
2972 - }
2973 - }),
2974 - ...(showIndicationAfter && {
2975 - '& td, & th': {
2976 - borderBottom: '2px solid',
2977 - borderBottomColor: 'primary.main'
2978 - }
2979 - }),
2980 - '&:hover, &:focus-within': {
2981 - backgroundColor: 'action.hover',
2982 - '& [role="toolbar"], & [draggable]': {
2983 - opacity: 1
2984 - }
2985 - },
2986 - '& [role="toolbar"], & [draggable]': {
2987 - opacity: 0
2988 - }
2989 - },
2990 - style: {
2991 - ...itemStyle,
2992 - ...triggerStyle
2993 - },
2994 - onClick: () => {
2995 - if (isDisabled) {
2996 - promotionRef.current?.toggle();
2997 - }
2998 - }
2999 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_table_cell__WEBPACK_IMPORTED_MODULE_9__.VariableTableCell, {
3000 - noPadding: true,
3001 - width: 10,
3002 - maxWidth: 10
3003 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.IconButton, _extends({
3004 - size: "small",
3005 - ref: setTriggerRef
3006 - }, triggerProps, {
3007 - disabled: isSorting,
3008 - draggable: true
3009 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__.GripVerticalIcon, {
3010 - fontSize: "inherit"
3011 - }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_table_cell__WEBPACK_IMPORTED_MODULE_9__.VariableTableCell, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_editable_cell__WEBPACK_IMPORTED_MODULE_7__.VariableEditableCell, {
3012 - initialValue: row.name,
3013 - onChange: value => {
3014 - if (value !== row.name && !isDisabled) {
3015 - handleOnChange({
3016 - ...variables,
3017 - [row.id]: {
3018 - ...variables[row.id],
3019 - label: value
3020 - }
3021 - });
3022 - }
3023 - },
3024 - prefixElement: /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(row.icon, {
3025 - fontSize: 'inherit',
3026 - color: isDisabled ? 'disabled' : 'inherit'
3027 - }),
3028 - editableElement: ({
3029 - value,
3030 - onChange,
3031 - onValidationChange,
3032 - error
3033 - }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fields_label_field__WEBPACK_IMPORTED_MODULE_5__.LabelField, {
3034 - id: 'variable-label-' + row.id,
3035 - size: "tiny",
3036 - value: value,
3037 - onChange: onChange,
3038 - onErrorChange: errorMsg => {
3039 - onValidationChange?.(errorMsg);
3040 - onFieldError?.(!!errorMsg);
3041 - },
3042 - error: error,
3043 - focusOnShow: true,
3044 - selectOnShow: autoEditVariableId === row.id,
3045 - showWarningInfotip: true,
3046 - variables: variables
3047 - }),
3048 - autoEdit: autoEditVariableId === row.id && !isDisabled,
3049 - onRowRef: handleRowRef(row.id),
3050 - onAutoEditComplete: autoEditVariableId === row.id ? onAutoEditComplete : undefined,
3051 - fieldType: "label",
3052 - disabled: isDisabled
3053 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.EllipsisWithTooltip, {
3054 - title: row.name,
3055 - sx: {
3056 - border: '4px solid transparent'
3057 - }
3058 - }, row.name))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_table_cell__WEBPACK_IMPORTED_MODULE_9__.VariableTableCell, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_editable_cell__WEBPACK_IMPORTED_MODULE_7__.VariableEditableCell, {
3059 - initialValue: row.value,
3060 - onChange: value => {
3061 - if (value !== row.value && !isDisabled) {
3062 - handleOnChange({
3063 - ...variables,
3064 - [row.id]: {
3065 - ...variables[row.id],
3066 - value
3067 - }
3068 - });
3069 - }
3070 - },
3071 - editableElement: ({
3072 - value,
3073 - onChange,
3074 - onValidationChange,
3075 - error
3076 - }) => row.valueField?.({
3077 - value,
3078 - onChange,
3079 - onPropTypeKeyChange: type => {
3080 - if (!isDisabled && type !== row.type) {
3081 - handleOnChange({
3082 - ...variables,
3083 - [row.id]: {
3084 - ...variables[row.id],
3085 - type
3086 - }
3087 - });
3088 - }
3089 - },
3090 - propTypeKey: row.type,
3091 - onValidationChange: errorMsg => {
3092 - onValidationChange?.(errorMsg);
3093 - onFieldError?.(!!errorMsg);
3094 - },
3095 - error
3096 - }) ?? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null),
3097 - onRowRef: handleRowRef(row.id),
3098 - gap: 0.25,
3099 - fieldType: "value",
3100 - disabled: isDisabled
3101 - }, row.startIcon && row.startIcon({
3102 - value: row.value
3103 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_1__.EllipsisWithTooltip, {
3104 - title: row.value,
3105 - sx: {
3106 - border: '4px solid transparent',
3107 - lineHeight: '1',
3108 - pt: 0.25
3109 - }
3110 - }, row.value))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_table_cell__WEBPACK_IMPORTED_MODULE_9__.VariableTableCell, {
3111 - align: "right",
3112 - noPadding: true,
3113 - width: 16,
3114 - maxWidth: 16,
3115 - sx: {
3116 - paddingInlineEnd: 1
3117 - }
3118 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_3__.Stack, {
3119 - role: "toolbar",
3120 - direction: "row",
3121 - justifyContent: "flex-end",
3122 - alignItems: "center"
3123 - }, isDisabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_promotion_chip__WEBPACK_IMPORTED_MODULE_6__.VariablePromotionChip, {
3124 - variableType: row.variableType,
3125 - upgradeUrl: `https://go.elementor.com/renew-license-manager-${row.variableType}-variable`,
3126 - ref: promotionRef,
3127 - trackingData: TRACKING_DATA
3128 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variable_edit_menu__WEBPACK_IMPORTED_MODULE_8__.VariableEditMenu, {
3129 - menuActions: menuActions(row.id),
3130 - disabled: isSorting,
3131 - itemId: row.id
3132 - }))));
3133 -};
3134 -
3135 -/***/ }),
3136 -
3137 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx":
3138 -/*!*************************************************************************************************************!*\
3139 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx ***!
3140 - \*************************************************************************************************************/
3141 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3142 -
3143 -__webpack_require__.r(__webpack_exports__);
3144 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
3145 -/* harmony export */ VariableEditableCell: function() { return /* binding */ VariableEditableCell; }
3146 -/* harmony export */ });
3147 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
3148 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
3149 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
3150 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
3151 -/* harmony import */ var _fields_label_field__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../fields/label-field */ "./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");
3152 -
3153 -
3154 -
3155 -
3156 -const VariableEditableCell = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.memo(({
3157 - initialValue,
3158 - children,
3159 - editableElement,
3160 - onChange,
3161 - prefixElement,
3162 - autoEdit = false,
3163 - onRowRef,
3164 - onAutoEditComplete,
3165 - gap = 1,
3166 - fieldType,
3167 - disabled = false
3168 -}) => {
3169 - const [value, setValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialValue);
3170 - const [isEditing, setIsEditing] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
3171 - const {
3172 - labelFieldError,
3173 - setLabelFieldError
3174 - } = (0,_fields_label_field__WEBPACK_IMPORTED_MODULE_2__.useLabelError)();
3175 - const [valueFieldError, setValueFieldError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
3176 - const rowRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
3177 - const handleSave = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
3178 - const hasError = fieldType === 'label' && labelFieldError?.message || fieldType === 'value' && valueFieldError;
3179 - if (!hasError) {
3180 - onChange(value);
3181 - }
3182 - setIsEditing(false);
3183 - }, [value, onChange, fieldType, labelFieldError, valueFieldError]);
3184 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
3185 - onRowRef?.(rowRef?.current);
3186 - }, [onRowRef]);
3187 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
3188 - if (autoEdit && !isEditing && !disabled) {
3189 - setIsEditing(true);
3190 - onAutoEditComplete?.();
3191 - }
3192 - }, [autoEdit, isEditing, onAutoEditComplete, disabled]);
3193 - const handleDoubleClick = () => {
3194 - if (disabled) {
3195 - return;
3196 - }
3197 - setIsEditing(true);
3198 - };
3199 - const handleKeyDown = event => {
3200 - if (disabled) {
3201 - return;
3202 - }
3203 - if (event.key === 'Enter') {
3204 - handleSave();
3205 - } else if (event.key === 'Escape') {
3206 - setIsEditing(false);
3207 - }
3208 - if (event.key === ' ' && !isEditing) {
3209 - event.preventDefault();
3210 - setIsEditing(true);
3211 - }
3212 - };
3213 - const handleChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(newValue => {
3214 - setValue(newValue);
3215 - }, []);
3216 - const handleValidationChange = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(errorMsg => {
3217 - if (fieldType === 'label') {
3218 - setLabelFieldError({
3219 - value,
3220 - message: errorMsg
3221 - });
3222 - } else {
3223 - setValueFieldError(errorMsg);
3224 - }
3225 - }, [fieldType, value, setLabelFieldError, setValueFieldError]);
3226 - let currentError;
3227 - if (fieldType === 'label') {
3228 - currentError = labelFieldError;
3229 - } else if (fieldType === 'value') {
3230 - currentError = {
3231 - value,
3232 - message: valueFieldError
3233 - };
3234 - }
3235 - const editableContent = editableElement({
3236 - value,
3237 - onChange: handleChange,
3238 - onValidationChange: handleValidationChange,
3239 - error: currentError
3240 - });
3241 - if (isEditing) {
3242 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.ClickAwayListener, {
3243 - onClickAway: handleSave
3244 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Stack, {
3245 - ref: rowRef,
3246 - direction: "row",
3247 - alignItems: "center",
3248 - gap: gap,
3249 - onDoubleClick: handleDoubleClick,
3250 - onKeyDown: handleKeyDown,
3251 - tabIndex: 0,
3252 - role: "button",
3253 - "aria-label": "Double click or press Space to edit"
3254 - }, prefixElement, editableContent));
3255 - }
3256 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Stack, {
3257 - ref: rowRef,
3258 - direction: "row",
3259 - alignItems: "center",
3260 - gap: gap,
3261 - onDoubleClick: handleDoubleClick,
3262 - onKeyDown: handleKeyDown,
3263 - tabIndex: disabled ? -1 : 0,
3264 - role: "button",
3265 - "aria-label": disabled ? '' : 'Double click or press Space to edit'
3266 - }, prefixElement, children);
3267 -});
3268 -
3269 -/***/ }),
3270 -
3271 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx":
3272 -/*!********************************************************************************************************************!*\
3273 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx ***!
3274 - \********************************************************************************************************************/
3275 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3276 -
3277 -__webpack_require__.r(__webpack_exports__);
3278 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
3279 -/* harmony export */ SIZE: function() { return /* binding */ SIZE; },
3280 -/* harmony export */ VariableManagerCreateMenu: function() { return /* binding */ VariableManagerCreateMenu; },
3281 -/* harmony export */ getDefaultName: function() { return /* binding */ getDefaultName; }
3282 -/* harmony export */ });
3283 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
3284 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
3285 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
3286 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__);
3287 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
3288 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
3289 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/utils */ "@elementor/utils");
3290 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_utils__WEBPACK_IMPORTED_MODULE_3__);
3291 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
3292 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__);
3293 -/* harmony import */ var _hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/use-quota-permissions */ "./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts");
3294 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
3295 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
3296 -/* harmony import */ var _ui_variable_promotion_chip__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../ui/variable-promotion-chip */ "./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx");
3297 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3298 -
3299 -
3300 -
3301 -
3302 -
3303 -
3304 -
3305 -
3306 -
3307 -
3308 -const TRACKING_DATA = {
3309 - target_name: 'variables_manager',
3310 - target_location: 'variables_manager',
3311 - location_l1: 'create variable menu'
3312 -};
3313 -const SIZE = 'tiny';
3314 -const VariableManagerCreateMenu = ({
3315 - variables,
3316 - onCreate,
3317 - menuState,
3318 - outlinedTrigger = false
3319 -}) => {
3320 - const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
3321 - const variableTypes = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_7__.getVariableTypes)();
3322 - const menuOptionConfigs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => ({
3323 - key,
3324 - propTypeKey: variable.propTypeUtil.key,
3325 - variableType: variable.variableType,
3326 - defaultValue: variable.defaultValue || '',
3327 - icon: variable.icon
3328 - })), [variableTypes]);
3329 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, _extends({}, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindTrigger)(menuState), {
3330 - ref: buttonRef,
3331 - size: SIZE,
3332 - variant: outlinedTrigger ? 'outlined' : undefined,
3333 - "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Add variable', 'elementor')
3334 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_1__.PlusIcon, {
3335 - fontSize: SIZE
3336 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Menu, _extends({
3337 - disablePortal: true,
3338 - MenuListProps: {
3339 - dense: true
3340 - },
3341 - PaperProps: {
3342 - elevation: 6
3343 - }
3344 - }, (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.bindMenu)(menuState), {
3345 - anchorEl: buttonRef.current,
3346 - anchorOrigin: {
3347 - vertical: 'bottom',
3348 - horizontal: 'right'
3349 - },
3350 - transformOrigin: {
3351 - vertical: 'top',
3352 - horizontal: 'right'
3353 - },
3354 - "data-testid": "variable-manager-create-menu"
3355 - }), menuOptionConfigs.map(config => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(MenuOption, {
3356 - key: config.key,
3357 - config: config,
3358 - variables: variables,
3359 - onCreate: onCreate,
3360 - onClose: menuState.close
3361 - }))));
3362 -};
3363 -const MenuOption = ({
3364 - config,
3365 - variables,
3366 - onCreate,
3367 - onClose
3368 -}) => {
3369 - const promotionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
3370 - const userQuotaPermissions = (0,_hooks_use_quota_permissions__WEBPACK_IMPORTED_MODULE_5__.useQuotaPermissions)(config.propTypeKey);
3371 - const displayName = (0,_elementor_utils__WEBPACK_IMPORTED_MODULE_3__.capitalize)(config.variableType);
3372 - const isDisabled = !userQuotaPermissions.canAdd();
3373 - const handleClick = () => {
3374 - if (isDisabled) {
3375 - promotionRef.current?.toggle();
3376 - return;
3377 - }
3378 - const defaultName = getDefaultName(variables, config.variableType);
3379 - onCreate(config.key, defaultName, config.defaultValue);
3380 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_6__.trackVariablesManagerEvent)({
3381 - action: 'add',
3382 - varType: config.variableType
3383 - });
3384 - onClose();
3385 - };
3386 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.MenuItem, {
3387 - onClick: handleClick,
3388 - sx: {
3389 - gap: 1.5,
3390 - cursor: 'pointer'
3391 - }
3392 - }, /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(config.icon, {
3393 - fontSize: SIZE,
3394 - color: isDisabled ? 'disabled' : 'action'
3395 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
3396 - variant: "caption",
3397 - color: isDisabled ? 'text.disabled' : 'text.primary'
3398 - }, displayName), isDisabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_promotion_chip__WEBPACK_IMPORTED_MODULE_8__.VariablePromotionChip, {
3399 - variableType: config.variableType,
3400 - upgradeUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
3401 - ref: promotionRef,
3402 - trackingData: TRACKING_DATA
3403 - }));
3404 -};
3405 -const getDefaultName = (variables, baseName) => {
3406 - const pattern = new RegExp(`^${baseName}-(\\d+)$`, 'i');
3407 - const takenNumbers = new Set();
3408 - Object.values(variables).forEach(variable => {
3409 - const match = variable.label.match(pattern);
3410 - if (match) {
3411 - takenNumbers.add(parseInt(match[1], 10));
3412 - }
3413 - });
3414 - let counter = 1;
3415 - while (takenNumbers.has(counter)) {
3416 - counter++;
3417 - }
3418 - return `${baseName}-${counter}`;
3419 -};
3420 -
3421 -/***/ }),
3422 -
3423 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx":
3424 -/*!**************************************************************************************************************!*\
3425 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx ***!
3426 - \**************************************************************************************************************/
3427 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3428 -
3429 -__webpack_require__.r(__webpack_exports__);
3430 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
3431 -/* harmony export */ VariablesManagerPanelEmbedded: function() { return /* binding */ VariablesManagerPanelEmbedded; }
3432 -/* harmony export */ });
3433 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
3434 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
3435 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-current-user */ "@elementor/editor-current-user");
3436 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_1__);
3437 -/* harmony import */ var _elementor_editor_panels__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-panels */ "@elementor/editor-panels");
3438 -/* harmony import */ var _elementor_editor_panels__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_panels__WEBPACK_IMPORTED_MODULE_2__);
3439 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
3440 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__);
3441 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
3442 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__);
3443 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
3444 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__);
3445 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
3446 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__);
3447 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
3448 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
3449 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
3450 -/* harmony import */ var _ui_delete_confirmation_dialog__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../ui/delete-confirmation-dialog */ "./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx");
3451 -/* harmony import */ var _ui_empty_state__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../ui/empty-state */ "./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx");
3452 -/* harmony import */ var _ui_no_search_results__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../ui/no-search-results */ "./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx");
3453 -/* harmony import */ var _hooks_use_auto_edit__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./hooks/use-auto-edit */ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts");
3454 -/* harmony import */ var _hooks_use_error_navigation__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./hooks/use-error-navigation */ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts");
3455 -/* harmony import */ var _hooks_use_variables_manager_state__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./hooks/use-variables-manager-state */ "./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts");
3456 -/* harmony import */ var _variables_manager_create_menu__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./variables-manager-create-menu */ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx");
3457 -/* harmony import */ var _variables_manager_table__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./variables-manager-table */ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx");
3458 -
3459 -
3460 -
3461 -
3462 -
3463 -
3464 -
3465 -
3466 -
3467 -
3468 -
3469 -
3470 -
3471 -
3472 -
3473 -
3474 -
3475 -
3476 -
3477 -const STOP_SYNC_MESSAGE_KEY = 'stop-sync-variable';
3478 -function VariablesManagerPanelEmbedded({
3479 - onRequestClose,
3480 - onExposeCloseAttempt
3481 -}) {
3482 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariablesManagerPanelContent, {
3483 - onRequestClose: onRequestClose,
3484 - onExposeCloseAttempt: onExposeCloseAttempt
3485 - });
3486 -}
3487 -function VariablesManagerPanelContent({
3488 - onRequestClose,
3489 - onExposeCloseAttempt
3490 -}) {
3491 - const {
3492 - open: openSaveChangesDialog,
3493 - close: closeSaveChangesDialog,
3494 - isOpen: isSaveChangesDialogOpen
3495 - } = (0,_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.useDialog)();
3496 - const [isStopSyncSuppressed] = (0,_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_1__.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
3497 - const createMenuState = (0,_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.usePopupState)({
3498 - variant: 'popover'
3499 - });
3500 - const {
3501 - variables,
3502 - isDirty,
3503 - searchValue,
3504 - isSaveDisabled,
3505 - handleOnChange,
3506 - createVariable,
3507 - duplicateVariable,
3508 - handleDeleteVariable,
3509 - handleStartSync: startSyncFromState,
3510 - handleStopSync: stopSyncFromState,
3511 - handleSave,
3512 - isSaving,
3513 - handleSearch,
3514 - setIsSaving,
3515 - setIsSaveDisabled
3516 - } = (0,_hooks_use_variables_manager_state__WEBPACK_IMPORTED_MODULE_15__.useVariablesManagerState)();
3517 - const {
3518 - autoEditVariableId,
3519 - startAutoEdit,
3520 - handleAutoEditComplete
3521 - } = (0,_hooks_use_auto_edit__WEBPACK_IMPORTED_MODULE_13__.useAutoEdit)();
3522 - const {
3523 - createNavigationCallback,
3524 - resetNavigation
3525 - } = (0,_hooks_use_error_navigation__WEBPACK_IMPORTED_MODULE_14__.useErrorNavigation)();
3526 - const [deleteConfirmation, setDeleteConfirmation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
3527 - const [stopSyncConfirmation, setStopSyncConfirmation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
3528 - const [serverError, setServerError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
3529 - usePreventUnload(isDirty);
3530 - const handleClosePanel = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
3531 - if (isDirty) {
3532 - openSaveChangesDialog();
3533 - return;
3534 - }
3535 - void onRequestClose();
3536 - }, [isDirty, openSaveChangesDialog, onRequestClose]);
3537 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
3538 - if (!onExposeCloseAttempt) {
3539 - return;
3540 - }
3541 - onExposeCloseAttempt(() => handleClosePanel());
3542 - return () => onExposeCloseAttempt(null);
3543 - }, [onExposeCloseAttempt, handleClosePanel]);
3544 - const handleCreateVariable = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((type, defaultName, defaultValue) => {
3545 - const newId = createVariable(type, defaultName, defaultValue);
3546 - if (newId) {
3547 - startAutoEdit(newId);
3548 - }
3549 - }, [createVariable, startAutoEdit]);
3550 - const handleSaveClick = async () => {
3551 - try {
3552 - setServerError(null);
3553 - resetNavigation();
3554 - const result = await handleSave();
3555 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_7__.trackVariablesManagerEvent)({
3556 - action: 'saveChanges'
3557 - });
3558 - return result;
3559 - } catch (error) {
3560 - const mappedError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_8__.mapServerError)(error);
3561 - const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
3562 - if (mappedError && 'label' === mappedError.field) {
3563 - if (duplicatedIds && mappedError.action) {
3564 - mappedError.action.callback = createNavigationCallback(duplicatedIds, startAutoEdit, () => {
3565 - setIsSaveDisabled(false);
3566 - });
3567 - }
3568 - setServerError(mappedError);
3569 - setIsSaveDisabled(true);
3570 - resetNavigation();
3571 - }
3572 - return {
3573 - success: false,
3574 - error: mappedError
3575 - };
3576 - } finally {
3577 - setIsSaving(false);
3578 - }
3579 - };
3580 - const handleDeleteVariableWithConfirmation = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
3581 - handleDeleteVariable(itemId);
3582 - setDeleteConfirmation(null);
3583 - }, [handleDeleteVariable]);
3584 - const commitStopSync = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
3585 - stopSyncFromState(itemId);
3586 - const variable = variables[itemId];
3587 - if (variable) {
3588 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_7__.trackVariableSyncToV3)({
3589 - variableLabel: variable.label,
3590 - action: 'unsync'
3591 - });
3592 - }
3593 - }, [stopSyncFromState, variables]);
3594 - const handleStartSync = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
3595 - startSyncFromState(itemId);
3596 - const variable = variables[itemId];
3597 - if (variable) {
3598 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_7__.trackVariableSyncToV3)({
3599 - variableLabel: variable.label,
3600 - action: 'sync'
3601 - });
3602 - }
3603 - }, [startSyncFromState, variables]);
3604 - const handleStopSync = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(itemId => {
3605 - if (!isStopSyncSuppressed) {
3606 - setStopSyncConfirmation(itemId);
3607 - } else {
3608 - commitStopSync(itemId);
3609 - }
3610 - }, [isStopSyncSuppressed, commitStopSync]);
3611 - const buildMenuActions = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(variableId => {
3612 - const variable = variables[variableId];
3613 - if (!variable) {
3614 - return [];
3615 - }
3616 - const typeActions = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__.getMenuActionsForVariable)(variable.type, {
3617 - variable,
3618 - variableId,
3619 - handlers: {
3620 - onStartSync: handleStartSync,
3621 - onStopSync: handleStopSync
3622 - }
3623 - });
3624 - const duplicateAction = {
3625 - name: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Duplicate', 'elementor'),
3626 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.CopyIcon,
3627 - color: 'text.primary',
3628 - onClick: itemId => {
3629 - const newId = duplicateVariable(itemId);
3630 - startAutoEdit(newId);
3631 - const variableTypeOptions = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__.getVariableType)(variable.type);
3632 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_7__.trackVariablesManagerEvent)({
3633 - action: 'duplicate',
3634 - varType: variableTypeOptions?.variableType
3635 - });
3636 - }
3637 - };
3638 - const deleteAction = {
3639 - name: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Delete', 'elementor'),
3640 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.TrashIcon,
3641 - color: 'error.main',
3642 - onClick: itemId => {
3643 - const v = variables[itemId];
3644 - if (v) {
3645 - setDeleteConfirmation({
3646 - id: itemId,
3647 - label: v.label
3648 - });
3649 - const variableTypeOptions = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_9__.getVariableType)(v.type);
3650 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_7__.trackVariablesManagerEvent)({
3651 - action: 'delete',
3652 - varType: variableTypeOptions?.variableType
3653 - });
3654 - }
3655 - }
3656 - };
3657 - return [...typeActions, duplicateAction, deleteAction];
3658 - }, [variables, handleStartSync, handleStopSync, duplicateVariable, startAutoEdit]);
3659 - const hasVariables = Object.keys(variables).length > 0;
3660 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Stack, {
3661 - direction: "column",
3662 - sx: {
3663 - height: '100%',
3664 - width: '100%',
3665 - flex: 1,
3666 - minHeight: 0,
3667 - overflow: 'hidden'
3668 - }
3669 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Stack, {
3670 - direction: "row",
3671 - alignItems: "center",
3672 - spacing: 1,
3673 - width: "100%",
3674 - sx: {
3675 - flexShrink: 0,
3676 - px: 2,
3677 - pb: 1
3678 - }
3679 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SearchField, {
3680 - placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Search', 'elementor'),
3681 - value: searchValue,
3682 - onSearch: handleSearch,
3683 - sx: {
3684 - flex: 1,
3685 - minWidth: 0,
3686 - px: 0,
3687 - py: 0,
3688 - display: 'flex',
3689 - alignItems: 'center',
3690 - alignSelf: 'stretch'
3691 - }
3692 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Box, {
3693 - sx: {
3694 - display: 'flex',
3695 - flexShrink: 0,
3696 - alignItems: 'center'
3697 - }
3698 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variables_manager_create_menu__WEBPACK_IMPORTED_MODULE_16__.VariableManagerCreateMenu, {
3699 - outlinedTrigger: true,
3700 - onCreate: handleCreateVariable,
3701 - variables: variables,
3702 - menuState: createMenuState
3703 - }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Divider, {
3704 - sx: {
3705 - width: '100%'
3706 - }
3707 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_panels__WEBPACK_IMPORTED_MODULE_2__.PanelBody, {
3708 - sx: {
3709 - display: 'flex',
3710 - flexDirection: 'column',
3711 - flex: 1,
3712 - minHeight: 0
3713 - }
3714 - }, hasVariables && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_variables_manager_table__WEBPACK_IMPORTED_MODULE_17__.VariablesManagerTable, {
3715 - menuActions: buildMenuActions,
3716 - variables: variables,
3717 - onChange: handleOnChange,
3718 - autoEditVariableId: autoEditVariableId,
3719 - onAutoEditComplete: handleAutoEditComplete,
3720 - onFieldError: setIsSaveDisabled
3721 - }), !hasVariables && searchValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_no_search_results__WEBPACK_IMPORTED_MODULE_12__.NoSearchResults, {
3722 - searchValue: searchValue,
3723 - onClear: () => handleSearch(''),
3724 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__.ColorFilterIcon, {
3725 - fontSize: "large"
3726 - })
3727 - }), !hasVariables && !searchValue && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_empty_state__WEBPACK_IMPORTED_MODULE_11__.EmptyState, {
3728 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Create your first variable', 'elementor'),
3729 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Variables are saved attributes that you can apply anywhere on your site.', 'elementor'),
3730 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__.ColorFilterIcon, {
3731 - fontSize: "large"
3732 - }),
3733 - onAdd: createMenuState.open
3734 - })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_panels__WEBPACK_IMPORTED_MODULE_2__.PanelFooter, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Infotip, {
3735 - placement: "right",
3736 - open: !!serverError,
3737 - content: serverError ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Alert, {
3738 - severity: serverError.severity ?? 'error',
3739 - action: serverError.action?.label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.AlertAction, {
3740 - onClick: serverError.action.callback
3741 - }, serverError.action.label) : undefined,
3742 - onClose: !serverError.action?.label ? () => {
3743 - setServerError(null);
3744 - setIsSaveDisabled(false);
3745 - } : undefined,
3746 - icon: serverError.IconComponent ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(serverError.IconComponent, null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__.AlertTriangleFilledIcon, null)
3747 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.AlertTitle, null, serverError.message), serverError.action?.message) : null,
3748 - arrow: false,
3749 - slotProps: {
3750 - popper: {
3751 - modifiers: [{
3752 - name: 'offset',
3753 - options: {
3754 - offset: [-10, 10]
3755 - }
3756 - }]
3757 - }
3758 - }
3759 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Button, {
3760 - fullWidth: true,
3761 - size: "small",
3762 - color: "global",
3763 - variant: "contained",
3764 - disabled: isSaveDisabled || !isDirty || isSaving,
3765 - onClick: handleSaveClick,
3766 - loading: isSaving
3767 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Save changes', 'elementor'))))), deleteConfirmation && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_delete_confirmation_dialog__WEBPACK_IMPORTED_MODULE_10__.DeleteConfirmationDialog, {
3768 - open: true,
3769 - label: deleteConfirmation.label,
3770 - onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
3771 - closeDialog: () => setDeleteConfirmation(null)
3772 - }), stopSyncConfirmation && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(StopSyncConfirmationDialog, {
3773 - open: true,
3774 - onClose: () => setStopSyncConfirmation(null),
3775 - onConfirm: () => {
3776 - commitStopSync(stopSyncConfirmation);
3777 - setStopSyncConfirmation(null);
3778 - }
3779 - }), isSaveChangesDialogOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog.Title, {
3780 - onClose: closeSaveChangesDialog
3781 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('You have unsaved changes', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog.Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog.ContentText, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('You have unsaved changes in the Variables Manager.', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog.ContentText, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('To avoid losing your updates, save your changes before leaving.', 'elementor'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.SaveChangesDialog.Actions, {
3782 - actions: {
3783 - discard: {
3784 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Discard', 'elementor'),
3785 - action: () => {
3786 - closeSaveChangesDialog();
3787 - void onRequestClose();
3788 - }
3789 - },
3790 - confirm: {
3791 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Save', 'elementor'),
3792 - action: async () => {
3793 - const result = await handleSaveClick();
3794 - closeSaveChangesDialog();
3795 - if (result?.success) {
3796 - void onRequestClose();
3797 - }
3798 - }
3799 - }
3800 - }
3801 - })));
3802 -}
3803 -const usePreventUnload = isDirty => {
3804 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
3805 - const handleBeforeUnload = event => {
3806 - if (isDirty) {
3807 - event.preventDefault();
3808 - }
3809 - };
3810 - window.addEventListener('beforeunload', handleBeforeUnload);
3811 - return () => {
3812 - window.removeEventListener('beforeunload', handleBeforeUnload);
3813 - };
3814 - }, [isDirty]);
3815 -};
3816 -const StopSyncConfirmationDialog = ({
3817 - open,
3818 - onClose,
3819 - onConfirm
3820 -}) => {
3821 - const [, suppressStopSyncMessage] = (0,_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_1__.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
3822 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.ConfirmationDialog, {
3823 - open: open,
3824 - onClose: onClose
3825 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.ConfirmationDialog.Title, {
3826 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.ColorFilterIcon,
3827 - iconColor: "primary"
3828 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Stop syncing variable color', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.ConfirmationDialog.Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.ConfirmationDialog.ContentText, null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.', 'elementor'))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.ConfirmationDialog.Actions, {
3829 - onClose: onClose,
3830 - onConfirm: onConfirm,
3831 - cancelLabel: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Cancel', 'elementor'),
3832 - confirmLabel: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Got it', 'elementor'),
3833 - color: "primary",
3834 - onSuppressMessage: suppressStopSyncMessage,
3835 - suppressLabel: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)("Don't show again", 'elementor')
3836 - }));
3837 -};
3838 -
3839 -/***/ }),
3840 -
3841 -/***/ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx":
3842 -/*!**************************************************************************************************************!*\
3843 - !*** ./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx ***!
3844 - \**************************************************************************************************************/
3845 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3846 -
3847 -__webpack_require__.r(__webpack_exports__);
3848 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
3849 -/* harmony export */ VariablesManagerTable: function() { return /* binding */ VariablesManagerTable; }
3850 -/* harmony export */ });
3851 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
3852 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
3853 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
3854 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
3855 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
3856 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
3857 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
3858 -/* harmony import */ var _ui_variable_table_cell__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ui/variable-table-cell */ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx");
3859 -/* harmony import */ var _ui_variable_table_row__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ui/variable-table-row */ "./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-row.tsx");
3860 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3861 -
3862 -
3863 -
3864 -
3865 -
3866 -
3867 -
3868 -const VariablesManagerTable = ({
3869 - menuActions,
3870 - variables,
3871 - onChange: handleOnChange,
3872 - autoEditVariableId,
3873 - onAutoEditComplete,
3874 - onFieldError
3875 -}) => {
3876 - const tableContainerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
3877 - const variableRowRefs = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(new Map());
3878 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
3879 - if (autoEditVariableId && tableContainerRef.current) {
3880 - const rowElement = variableRowRefs.current.get(autoEditVariableId);
3881 - if (rowElement) {
3882 - setTimeout(() => {
3883 - rowElement.scrollIntoView({
3884 - behavior: 'smooth',
3885 - block: 'center',
3886 - inline: 'nearest'
3887 - });
3888 - }, 100);
3889 - }
3890 - }
3891 - }, [autoEditVariableId]);
3892 - const handleRowRef = id => ref => {
3893 - if (ref) {
3894 - variableRowRefs.current.set(id, ref);
3895 - } else {
3896 - variableRowRefs.current.delete(id);
3897 - }
3898 - };
3899 - const ids = Object.keys(variables).sort(sortVariablesOrder(variables));
3900 - const rows = ids.map(id => {
3901 - const variable = variables[id];
3902 - const variableType = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_3__.getVariableType)(variable.type);
3903 - if (!variableType) {
3904 - return null;
3905 - }
3906 - return {
3907 - id,
3908 - type: variable.type,
3909 - name: variable.label,
3910 - value: variable.value,
3911 - ...variableType
3912 - };
3913 - }).filter(Boolean);
3914 - const tableSX = {
3915 - minWidth: 250,
3916 - tableLayout: 'fixed'
3917 - };
3918 - const handleReorder = newIds => {
3919 - const updatedVariables = {
3920 - ...variables
3921 - };
3922 - newIds.forEach((id, index) => {
3923 - const current = updatedVariables[id];
3924 - if (!current) {
3925 - return;
3926 - }
3927 - updatedVariables[id] = Object.assign({}, current, {
3928 - order: index + 1
3929 - });
3930 - });
3931 - handleOnChange(updatedVariables);
3932 - };
3933 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableContainer, {
3934 - ref: tableContainerRef,
3935 - sx: {
3936 - overflow: 'initial'
3937 - }
3938 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Table, {
3939 - sx: tableSX,
3940 - "aria-label": "Variables manager list with drag and drop reordering",
3941 - stickyHeader: true
3942 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableHead, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableRow, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_table_cell__WEBPACK_IMPORTED_MODULE_4__.VariableTableCell, {
3943 - isHeader: true,
3944 - noPadding: true,
3945 - width: 10,
3946 - maxWidth: 10
3947 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_table_cell__WEBPACK_IMPORTED_MODULE_4__.VariableTableCell, {
3948 - isHeader: true
3949 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Name', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_table_cell__WEBPACK_IMPORTED_MODULE_4__.VariableTableCell, {
3950 - isHeader: true
3951 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Value', 'elementor')), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_table_cell__WEBPACK_IMPORTED_MODULE_4__.VariableTableCell, {
3952 - isHeader: true,
3953 - noPadding: true,
3954 - width: 16,
3955 - maxWidth: 16
3956 - }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableBody, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.UnstableSortableProvider, {
3957 - value: ids,
3958 - onChange: handleReorder,
3959 - variant: "static",
3960 - restrictAxis: true,
3961 - dragOverlay: ({
3962 - children: dragOverlayChildren,
3963 - ...dragOverlayProps
3964 - }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Table, _extends({
3965 - sx: tableSX
3966 - }, dragOverlayProps), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.TableBody, null, dragOverlayChildren))
3967 - }, rows.map(row => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.UnstableSortableItem, {
3968 - key: row.id,
3969 - id: row.id,
3970 - render: props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_variable_table_row__WEBPACK_IMPORTED_MODULE_5__.VariableRow, _extends({}, props, {
3971 - row: row,
3972 - variables: variables,
3973 - handleOnChange: handleOnChange,
3974 - autoEditVariableId: autoEditVariableId,
3975 - onAutoEditComplete: onAutoEditComplete,
3976 - onFieldError: onFieldError,
3977 - menuActions: menuActions,
3978 - handleRowRef: handleRowRef
3979 - }))
3980 - }))))));
3981 -};
3982 -function sortVariablesOrder(variables) {
3983 - return (a, b) => {
3984 - const orderA = variables[a]?.order ?? Number.MAX_SAFE_INTEGER;
3985 - const orderB = variables[b]?.order ?? Number.MAX_SAFE_INTEGER;
3986 - return orderA - orderB;
3987 - };
3988 -}
3989 -
3990 -/***/ }),
3991 -
3992 -/***/ "./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx":
3993 -/*!*************************************************************************************************!*\
3994 - !*** ./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx ***!
3995 - \*************************************************************************************************/
3996 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
3997 -
3998 -__webpack_require__.r(__webpack_exports__);
3999 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4000 -/* harmony export */ BackgroundRepeaterColorIndicator: function() { return /* binding */ BackgroundRepeaterColorIndicator; },
4001 -/* harmony export */ BackgroundRepeaterLabel: function() { return /* binding */ BackgroundRepeaterLabel; },
4002 -/* harmony export */ BoxShadowRepeaterColorIndicator: function() { return /* binding */ BoxShadowRepeaterColorIndicator; },
4003 -/* harmony export */ BoxShadowRepeaterLabel: function() { return /* binding */ BoxShadowRepeaterLabel; },
4004 -/* harmony export */ FilterDropShadowIconIndicator: function() { return /* binding */ FilterDropShadowIconIndicator; },
4005 -/* harmony export */ FilterDropShadowRepeaterLabel: function() { return /* binding */ FilterDropShadowRepeaterLabel; },
4006 -/* harmony export */ FilterSingleSizeRepeaterLabel: function() { return /* binding */ FilterSingleSizeRepeaterLabel; },
4007 -/* harmony export */ TransformRepeaterLabel: function() { return /* binding */ TransformRepeaterLabel; },
4008 -/* harmony export */ TransitionsSizeVariableLabel: function() { return /* binding */ TransitionsSizeVariableLabel; }
4009 -/* harmony export */ });
4010 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4011 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4012 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
4013 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__);
4014 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
4015 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
4016 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
4017 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
4018 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
4019 -/* harmony import */ var _utils_size_value__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/size-value */ "./packages/packages/core/editor-variables/src/utils/size-value.ts");
4020 -/* harmony import */ var _ui_color_indicator__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./ui/color-indicator */ "./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx");
4021 -
4022 -
4023 -
4024 -
4025 -
4026 -
4027 -
4028 -const useColorVariable = value => {
4029 - const variableId = value?.value?.color?.value;
4030 - return (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_4__.getVariable)(variableId || '');
4031 -};
4032 -const BackgroundRepeaterColorIndicator = ({
4033 - value
4034 -}) => {
4035 - const colorVariable = useColorVariable(value);
4036 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_color_indicator__WEBPACK_IMPORTED_MODULE_6__.ColorIndicator, {
4037 - component: "span",
4038 - size: "inherit",
4039 - value: colorVariable?.value
4040 - });
4041 -};
4042 -const BackgroundRepeaterLabel = ({
4043 - value
4044 -}) => {
4045 - const colorVariable = useColorVariable(value);
4046 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4047 - component: "span"
4048 - }, colorVariable?.label);
4049 -};
4050 -const BoxShadowRepeaterColorIndicator = ({
4051 - value
4052 -}) => {
4053 - const colorVariable = useColorVariable(value);
4054 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_color_indicator__WEBPACK_IMPORTED_MODULE_6__.ColorIndicator, {
4055 - component: "span",
4056 - size: "inherit",
4057 - value: colorVariable?.value
4058 - });
4059 -};
4060 -const FilterDropShadowIconIndicator = ({
4061 - value
4062 -}) => {
4063 - const {
4064 - args
4065 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value) || {};
4066 - const {
4067 - color
4068 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.extract(args) || {};
4069 - const colorVariable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_4__.getVariable)(color?.value || '');
4070 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_color_indicator__WEBPACK_IMPORTED_MODULE_6__.ColorIndicator, {
4071 - component: "span",
4072 - size: "inherit",
4073 - value: colorVariable?.value
4074 - });
4075 -};
4076 -const FilterSingleSizeRepeaterLabel = ({
4077 - value
4078 -}) => {
4079 - const cssFilterFunction = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value);
4080 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.isValid(cssFilterFunction?.args)) {
4081 - return null;
4082 - }
4083 - const args = cssFilterFunction?.args;
4084 - const func = cssFilterFunction?.func?.value ?? '';
4085 - const rendered = (0,_utils_size_value__WEBPACK_IMPORTED_MODULE_5__.sizeValue)(args?.value?.size);
4086 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4087 - component: "span",
4088 - style: {
4089 - textTransform: 'capitalize'
4090 - }
4091 - }, `${func}: `), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4092 - component: "span"
4093 - }, rendered));
4094 -};
4095 -const FilterDropShadowRepeaterLabel = ({
4096 - value
4097 -}) => {
4098 - const {
4099 - args
4100 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value) || {};
4101 - const {
4102 - xAxis,
4103 - yAxis,
4104 - blur
4105 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.extract(args) || {};
4106 - const labels = [];
4107 - for (const val of [xAxis, yAxis, blur]) {
4108 - const rendered = (0,_utils_size_value__WEBPACK_IMPORTED_MODULE_5__.sizeValue)(val);
4109 - if (rendered) {
4110 - labels.push(rendered);
4111 - }
4112 - }
4113 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4114 - component: "span"
4115 - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Drop shadow:', 'elementor'), " ", labels.join(' '));
4116 -};
4117 -const BoxShadowRepeaterLabel = ({
4118 - value
4119 -}) => {
4120 - const {
4121 - position,
4122 - hOffset,
4123 - vOffset,
4124 - blur,
4125 - spread
4126 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.shadowPropTypeUtil.extract(value) || {};
4127 - const labels = [];
4128 - for (const val of [hOffset, vOffset, blur, spread]) {
4129 - const rendered = (0,_utils_size_value__WEBPACK_IMPORTED_MODULE_5__.sizeValue)(val);
4130 - if (rendered) {
4131 - labels.push(rendered);
4132 - }
4133 - }
4134 - const positionLabel = position?.value || 'outset';
4135 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4136 - component: "span",
4137 - style: {
4138 - textTransform: 'capitalize'
4139 - }
4140 - }, positionLabel, ": ", labels.join(' '));
4141 -};
4142 -const TransformRepeaterLabel = ({
4143 - value
4144 -}) => {
4145 - const labels = [];
4146 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.moveTransformPropTypeUtil.isValid(value)) {
4147 - labels.push((0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Move:', 'elementor'));
4148 - const {
4149 - x,
4150 - y,
4151 - z
4152 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.moveTransformPropTypeUtil.extract(value) || {};
4153 - for (const val of [x, y, z]) {
4154 - const rendered = (0,_utils_size_value__WEBPACK_IMPORTED_MODULE_5__.sizeValue)(val);
4155 - if (rendered) {
4156 - labels.push(rendered);
4157 - }
4158 - }
4159 - }
4160 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4161 - component: "span"
4162 - }, labels.join(' '));
4163 -};
4164 -const TransitionsSizeVariableLabel = ({
4165 - value: prop
4166 -}) => {
4167 - let label = '';
4168 - const variableId = prop?.value?.size?.value || '';
4169 - const variable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_4__.getVariable)(variableId);
4170 - if (variable && _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.selectionSizePropTypeUtil.isValid(prop)) {
4171 - const selection = prop.value?.selection?.value?.key?.value;
4172 - if (selection) {
4173 - label += `${selection}: `;
4174 - }
4175 - label += variable?.value;
4176 - }
4177 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Box, {
4178 - component: "span"
4179 - }, label);
4180 -};
4181 -
4182 -/***/ }),
4183 -
4184 -/***/ "./packages/packages/core/editor-variables/src/components/variables-selection.tsx":
4185 -/*!****************************************************************************************!*\
4186 - !*** ./packages/packages/core/editor-variables/src/components/variables-selection.tsx ***!
4187 - \****************************************************************************************/
4188 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4189 -
4190 -__webpack_require__.r(__webpack_exports__);
4191 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4192 -/* harmony export */ VariablesSelection: function() { return /* binding */ VariablesSelection; }
4193 -/* harmony export */ });
4194 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4195 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4196 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4197 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
4198 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
4199 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__);
4200 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
4201 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__);
4202 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
4203 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__);
4204 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
4205 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__);
4206 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
4207 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
4208 -/* harmony import */ var _hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/use-variable-bound-prop */ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts");
4209 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
4210 -/* harmony import */ var _ui_empty_state__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./ui/empty-state */ "./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx");
4211 -/* harmony import */ var _ui_menu_item_content__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./ui/menu-item-content */ "./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx");
4212 -/* harmony import */ var _ui_no_search_results__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./ui/no-search-results */ "./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx");
4213 -/* harmony import */ var _ui_styled_menu_list__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./ui/styled-menu-list */ "./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx");
4214 -function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
4215 -
4216 -
4217 -
4218 -
4219 -
4220 -
4221 -
4222 -
4223 -
4224 -
4225 -
4226 -
4227 -
4228 -
4229 -
4230 -
4231 -const SIZE = 'tiny';
4232 -const CREATE_LABEL = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Create variable', 'elementor');
4233 -const MANAGER_LABEL = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Variables Manager', 'elementor');
4234 -const getProUpgradeUrl = variableType => `https://go.elementor.com/renew-license-panel-${variableType}-variable`;
4235 -const VariablesSelection = ({
4236 - closePopover,
4237 - onAdd,
4238 - onEdit,
4239 - onSettings,
4240 - disabled = false
4241 -}) => {
4242 - const {
4243 - icon: VariableIcon,
4244 - startIcon,
4245 - variableType,
4246 - propTypeUtil,
4247 - emptyState
4248 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_6__.useVariableType)();
4249 - const {
4250 - value: variable,
4251 - setValue: setVariable,
4252 - path
4253 - } = (0,_hooks_use_variable_bound_prop__WEBPACK_IMPORTED_MODULE_8__.useVariableBoundProp)();
4254 - const [searchValue, setSearchValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
4255 - const {
4256 - list: variables,
4257 - hasMatches: hasSearchResults,
4258 - isSourceNotEmpty: hasVariables,
4259 - hasNoCompatibleVariables
4260 - } = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__.useFilteredVariables)(searchValue, propTypeUtil.key);
4261 - const handleSetVariable = key => {
4262 - setVariable(key);
4263 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_9__.trackVariableEvent)({
4264 - varType: variableType,
4265 - controlPath: path.join('.'),
4266 - action: 'connect'
4267 - });
4268 - closePopover();
4269 - };
4270 - const onAddAndTrack = () => {
4271 - onAdd?.();
4272 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_9__.trackVariableEvent)({
4273 - varType: variableType,
4274 - controlPath: path.join('.'),
4275 - action: 'add'
4276 - });
4277 - };
4278 - const actions = [];
4279 - if (onAdd) {
4280 - actions.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
4281 - key: "add",
4282 - placement: "top",
4283 - title: CREATE_LABEL
4284 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
4285 - id: "add-variable-button",
4286 - size: SIZE,
4287 - onClick: onAddAndTrack,
4288 - "aria-label": CREATE_LABEL,
4289 - disabled: disabled
4290 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__.PlusIcon, {
4291 - fontSize: SIZE
4292 - })))));
4293 - }
4294 - if (onSettings) {
4295 - const handleOpenManager = () => {
4296 - onSettings();
4297 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_9__.trackVariablesManagerEvent)({
4298 - action: 'openManager',
4299 - source: 'vars-popover',
4300 - varType: variableType,
4301 - controlPath: path.join('.')
4302 - });
4303 - };
4304 - actions.push(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
4305 - key: "settings",
4306 - placement: "top",
4307 - title: MANAGER_LABEL
4308 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.IconButton, {
4309 - id: "variables-manager-button",
4310 - size: SIZE,
4311 - onClick: handleOpenManager,
4312 - "aria-label": MANAGER_LABEL
4313 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__.SettingsIcon, {
4314 - fontSize: SIZE
4315 - }))));
4316 - }
4317 - const StartIcon = startIcon || (() => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
4318 - fontSize: SIZE
4319 - }));
4320 - const items = variables.map(({
4321 - value,
4322 - label,
4323 - key
4324 - }) => ({
4325 - type: 'item',
4326 - value: key,
4327 - label,
4328 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(StartIcon, {
4329 - value: value
4330 - }),
4331 - secondaryText: value,
4332 - onEdit: onEdit ? () => onEdit?.(key) : undefined
4333 - }));
4334 - const handleSearch = search => {
4335 - setSearchValue(search);
4336 - };
4337 - const handleClearSearch = () => {
4338 - setSearchValue('');
4339 - };
4340 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
4341 - if (disabled) {
4342 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.trackViewPromotion)({
4343 - target_name: 'variables_popover',
4344 - target_location: 'widget_panel',
4345 - location_l1: 'variables_list'
4346 - });
4347 - }
4348 - }, [disabled]);
4349 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.SectionPopoverBody, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PopoverHeader, {
4350 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Variables', 'elementor'),
4351 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_icons__WEBPACK_IMPORTED_MODULE_3__.ColorFilterIcon, {
4352 - fontSize: SIZE
4353 - }),
4354 - onClose: closePopover,
4355 - actions: actions
4356 - }), hasVariables && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.SearchField, {
4357 - value: searchValue,
4358 - onSearch: handleSearch,
4359 - placeholder: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Search', 'elementor')
4360 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_4__.Divider, null), hasVariables && hasSearchResults && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PopoverMenuList, {
4361 - items: items,
4362 - onSelect: disabled ? () => {} : handleSetVariable,
4363 - onClose: () => {},
4364 - selectedValue: variable,
4365 - "data-testid": `${variableType}-variables-list`,
4366 - menuListTemplate: props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_styled_menu_list__WEBPACK_IMPORTED_MODULE_13__.VariablesStyledMenuList, _extends({}, props, {
4367 - disabled: disabled
4368 - })),
4369 - menuItemContentTemplate: item => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_menu_item_content__WEBPACK_IMPORTED_MODULE_11__.MenuItemContent, {
4370 - item: item,
4371 - disabled: disabled
4372 - })
4373 - }), disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_2__.PromotionAlert, {
4374 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
4375 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Upgrade to continue creating and editing %s variables.', 'elementor'), variableType),
4376 - upgradeUrl: getProUpgradeUrl(variableType),
4377 - onCtaClick: () => (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.trackUpgradePromotionClick)({
4378 - target_name: 'variables_popover',
4379 - location_l1: 'variables_list'
4380 - })
4381 - })), !hasSearchResults && hasVariables && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_no_search_results__WEBPACK_IMPORTED_MODULE_12__.NoSearchResults, {
4382 - searchValue: searchValue,
4383 - onClear: handleClearSearch,
4384 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
4385 - fontSize: "large"
4386 - })
4387 - }), disabled && !hasVariables && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_empty_state__WEBPACK_IMPORTED_MODULE_10__.EmptyState, {
4388 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
4389 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('No %s variables yet', 'elementor'), variableType),
4390 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
4391 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Upgrade to create %s variables and maintain consistent element sizing.', 'elementor'), variableType),
4392 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
4393 - fontSize: "large"
4394 - })
4395 - }, emptyState), !hasVariables && !hasNoCompatibleVariables && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_empty_state__WEBPACK_IMPORTED_MODULE_10__.EmptyState, {
4396 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.sprintf)(/* translators: %s: Variable Type. */
4397 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Create your first %s variable', 'elementor'), variableType),
4398 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Variables are saved attributes that you can apply anywhere on your site.', 'elementor'),
4399 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
4400 - fontSize: "large"
4401 - }),
4402 - onAdd: onAdd
4403 - }), hasNoCompatibleVariables && !disabled && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui_empty_state__WEBPACK_IMPORTED_MODULE_10__.EmptyState, {
4404 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('No compatible variables', 'elementor'),
4405 - message: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Looks like none of your variables work with this control. Create a new variable to use it here.', 'elementor'),
4406 - icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableIcon, {
4407 - fontSize: "large"
4408 - }),
4409 - onAdd: onAdd
4410 - }));
4411 -};
4412 -
4413 -/***/ }),
4414 -
4415 -/***/ "./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx":
4416 -/*!****************************************************************************************************!*\
4417 - !*** ./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx ***!
4418 - \****************************************************************************************************/
4419 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4420 -
4421 -__webpack_require__.r(__webpack_exports__);
4422 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4423 -/* harmony export */ PopoverContentRefContextProvider: function() { return /* binding */ PopoverContentRefContextProvider; },
4424 -/* harmony export */ usePopoverContentRef: function() { return /* binding */ usePopoverContentRef; }
4425 -/* harmony export */ });
4426 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4427 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4428 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
4429 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__);
4430 -
4431 -
4432 -
4433 -const PopoverContentRefContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);
4434 -const PopoverContentRefContextProvider = ({
4435 - children
4436 -}) => {
4437 - const [anchorRef, setAnchorRef] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
4438 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(PopoverContentRefContext.Provider, {
4439 - value: anchorRef
4440 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_1__.Box, {
4441 - ref: setAnchorRef
4442 - }, children));
4443 -};
4444 -const usePopoverContentRef = () => {
4445 - return (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(PopoverContentRefContext);
4446 -};
4447 -
4448 -/***/ }),
4449 -
4450 -/***/ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx":
4451 -/*!***************************************************************************************!*\
4452 - !*** ./packages/packages/core/editor-variables/src/context/variable-type-context.tsx ***!
4453 - \***************************************************************************************/
4454 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4455 -
4456 -__webpack_require__.r(__webpack_exports__);
4457 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4458 -/* harmony export */ VariableTypeProvider: function() { return /* binding */ VariableTypeProvider; },
4459 -/* harmony export */ useVariableType: function() { return /* binding */ useVariableType; }
4460 -/* harmony export */ });
4461 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4462 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4463 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
4464 -
4465 -
4466 -
4467 -const VariableTypeContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);
4468 -function VariableTypeProvider({
4469 - children,
4470 - propTypeKey
4471 -}) {
4472 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(VariableTypeContext.Provider, {
4473 - value: propTypeKey
4474 - }, children);
4475 -}
4476 -function useVariableType() {
4477 - const context = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(VariableTypeContext);
4478 - if (context === null) {
4479 - throw new Error('useVariableType must be used within a VariableTypeProvider');
4480 - }
4481 - return (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_1__.getVariableType)(context);
4482 -}
4483 -
4484 -/***/ }),
4485 -
4486 -/***/ "./packages/packages/core/editor-variables/src/controls/variable-control.tsx":
4487 -/*!***********************************************************************************!*\
4488 - !*** ./packages/packages/core/editor-variables/src/controls/variable-control.tsx ***!
4489 - \***********************************************************************************/
4490 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4491 -
4492 -__webpack_require__.r(__webpack_exports__);
4493 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4494 -/* harmony export */ VariableControl: function() { return /* binding */ VariableControl; }
4495 -/* harmony export */ });
4496 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4497 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4498 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4499 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
4500 -/* harmony import */ var _components_ui_variable_assigned_variable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/ui/variable/assigned-variable */ "./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx");
4501 -/* harmony import */ var _components_ui_variable_deleted_variable__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components/ui/variable/deleted-variable */ "./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx");
4502 -/* harmony import */ var _components_ui_variable_mismatch_variable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ui/variable/mismatch-variable */ "./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx");
4503 -/* harmony import */ var _components_ui_variable_missing_variable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/ui/variable/missing-variable */ "./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx");
4504 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
4505 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
4506 -
4507 -
4508 -
4509 -
4510 -
4511 -
4512 -
4513 -
4514 -const VariableControl = () => {
4515 - const boundProp = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
4516 - const boundPropValue = boundProp.value ?? boundProp.placeholder;
4517 - const assignedVariable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_6__.useVariable)(boundPropValue?.value);
4518 - if (!assignedVariable) {
4519 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_variable_missing_variable__WEBPACK_IMPORTED_MODULE_5__.MissingVariable, null);
4520 - }
4521 - const {
4522 - $$type: propTypeKey
4523 - } = boundPropValue;
4524 - if (assignedVariable?.deleted) {
4525 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_variable_deleted_variable__WEBPACK_IMPORTED_MODULE_3__.DeletedVariable, {
4526 - variable: assignedVariable,
4527 - propTypeKey: propTypeKey
4528 - });
4529 - }
4530 - const {
4531 - isCompatible
4532 - } = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_7__.getVariableType)(assignedVariable.type);
4533 - if (isCompatible && !isCompatible(boundProp?.propType, assignedVariable)) {
4534 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_variable_mismatch_variable__WEBPACK_IMPORTED_MODULE_4__.MismatchVariable, {
4535 - variable: assignedVariable
4536 - });
4537 - }
4538 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_variable_assigned_variable__WEBPACK_IMPORTED_MODULE_2__.AssignedVariable, {
4539 - variable: assignedVariable,
4540 - propTypeKey: propTypeKey
4541 - });
4542 -};
4543 -
4544 -/***/ }),
4545 -
4546 -/***/ "./packages/packages/core/editor-variables/src/create-style-variables-repository.ts":
4547 -/*!******************************************************************************************!*\
4548 - !*** ./packages/packages/core/editor-variables/src/create-style-variables-repository.ts ***!
4549 - \******************************************************************************************/
4550 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4551 -
4552 -__webpack_require__.r(__webpack_exports__);
4553 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4554 -/* harmony export */ createStyleVariablesRepository: function() { return /* binding */ createStyleVariablesRepository; }
4555 -/* harmony export */ });
4556 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
4557 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__);
4558 -/* harmony import */ var _prop_types_font_variable_prop_type__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./prop-types/font-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts");
4559 -
4560 -
4561 -const createStyleVariablesRepository = () => {
4562 - const variables = {};
4563 - let subscription;
4564 - const subscribe = cb => {
4565 - subscription = cb;
4566 - return () => {
4567 - subscription = () => {};
4568 - };
4569 - };
4570 - const notify = () => {
4571 - if (typeof subscription === 'function') {
4572 - subscription({
4573 - ...variables
4574 - });
4575 - }
4576 - };
4577 - const shouldUpdate = (key, maybeUpdated) => {
4578 - if (!(key in variables)) {
4579 - return true;
4580 - }
4581 - if (variables[key].label !== maybeUpdated.label) {
4582 - return true;
4583 - }
4584 - if (variables[key].value !== maybeUpdated.value) {
4585 - return true;
4586 - }
4587 - if (!variables[key]?.deleted && maybeUpdated?.deleted) {
4588 - return true;
4589 - }
4590 - if (variables[key]?.deleted && !maybeUpdated?.deleted) {
4591 - return true;
4592 - }
4593 - return false;
4594 - };
4595 - const applyUpdates = updatedVars => {
4596 - let hasChanges = false;
4597 - for (const [key, variable] of Object.entries(updatedVars)) {
4598 - if (shouldUpdate(key, variable)) {
4599 - variables[key] = variable;
4600 - if (variable.type === _prop_types_font_variable_prop_type__WEBPACK_IMPORTED_MODULE_1__.fontVariablePropTypeUtil.key) {
4601 - fontEnqueue(variable.value);
4602 - }
4603 - hasChanges = true;
4604 - }
4605 - }
4606 - return hasChanges;
4607 - };
4608 - const fontEnqueue = value => {
4609 - if (!value) {
4610 - return;
4611 - }
4612 - try {
4613 - (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.enqueueFont)(value);
4614 - } catch {
4615 - // This prevents font enqueueing failures from breaking variable updates
4616 - }
4617 - };
4618 - const update = updatedVars => {
4619 - if (applyUpdates(updatedVars)) {
4620 - notify();
4621 - }
4622 - };
4623 - return {
4624 - subscribe,
4625 - update
4626 - };
4627 -};
4628 -
4629 -/***/ }),
4630 -
4631 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts":
4632 -/*!********************************************************************************!*\
4633 - !*** ./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts ***!
4634 - \********************************************************************************/
4635 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4636 -
4637 -__webpack_require__.r(__webpack_exports__);
4638 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4639 -/* harmony export */ useInitialValue: function() { return /* binding */ useInitialValue; }
4640 -/* harmony export */ });
4641 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4642 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__);
4643 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
4644 -/* harmony import */ var _use_prop_variables__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
4645 -
4646 -
4647 -
4648 -const useInitialValue = () => {
4649 - const {
4650 - value: initial
4651 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.useBoundProp)();
4652 - const hasAssignedVariable = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_1__.hasVariableType)(initial?.$$type) && Boolean(initial?.value);
4653 - const variable = (0,_use_prop_variables__WEBPACK_IMPORTED_MODULE_2__.useVariable)(hasAssignedVariable ? initial.value : '');
4654 - if (hasAssignedVariable) {
4655 - return variable ? variable.value : '';
4656 - }
4657 - return initial?.value ?? '';
4658 -};
4659 -
4660 -/***/ }),
4661 -
4662 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-permissions.ts":
4663 -/*!******************************************************************************!*\
4664 - !*** ./packages/packages/core/editor-variables/src/hooks/use-permissions.ts ***!
4665 - \******************************************************************************/
4666 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4667 -
4668 -__webpack_require__.r(__webpack_exports__);
4669 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4670 -/* harmony export */ usePermissions: function() { return /* binding */ usePermissions; }
4671 -/* harmony export */ });
4672 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-current-user */ "@elementor/editor-current-user");
4673 -/* harmony import */ var _elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_0__);
4674 -
4675 -const usePermissions = () => {
4676 - const {
4677 - canUser,
4678 - isAdmin
4679 - } = (0,_elementor_editor_current_user__WEBPACK_IMPORTED_MODULE_0__.useCurrentUserCapabilities)();
4680 - return {
4681 - canAssign: () => canUser('edit_posts'),
4682 - canUnlink: () => canUser('edit_posts'),
4683 - canAdd: () => isAdmin,
4684 - canDelete: () => isAdmin,
4685 - canEdit: () => isAdmin,
4686 - canRestore: () => isAdmin,
4687 - canManageSettings: () => isAdmin
4688 - };
4689 -};
4690 -
4691 -/***/ }),
4692 -
4693 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx":
4694 -/*!****************************************************************************************!*\
4695 - !*** ./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx ***!
4696 - \****************************************************************************************/
4697 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4698 -
4699 -__webpack_require__.r(__webpack_exports__);
4700 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4701 -/* harmony export */ usePropVariableAction: function() { return /* binding */ usePropVariableAction; }
4702 -/* harmony export */ });
4703 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4704 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4705 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4706 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
4707 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
4708 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_2__);
4709 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
4710 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
4711 -/* harmony import */ var _components_variable_selection_popover__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/variable-selection-popover */ "./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx");
4712 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
4713 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
4714 -
4715 -
4716 -
4717 -
4718 -
4719 -
4720 -
4721 -const usePropVariableAction = () => {
4722 - const {
4723 - propType,
4724 - path
4725 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
4726 - const variable = resolveVariableFromPropType(propType);
4727 - return {
4728 - visible: Boolean(variable),
4729 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_2__.ColorFilterIcon,
4730 - title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Variables', 'elementor'),
4731 - content: ({
4732 - close: closePopover
4733 - }) => {
4734 - if (!variable) {
4735 - return null;
4736 - }
4737 - trackOpenVariablePopover(path, variable.variableType);
4738 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_variable_selection_popover__WEBPACK_IMPORTED_MODULE_4__.VariableSelectionPopover, {
4739 - closePopover: closePopover,
4740 - propTypeKey: variable.propTypeUtil.key
4741 - });
4742 - }
4743 - };
4744 -};
4745 -const resolveVariableFromPropType = propType => {
4746 - if (propType.kind !== 'union') {
4747 - return undefined;
4748 - }
4749 - for (const key of Object.keys(propType.prop_types)) {
4750 - const variable = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__.getVariableType)(key);
4751 - if (variable) {
4752 - return variable;
4753 - }
4754 - }
4755 - return undefined;
4756 -};
4757 -const trackOpenVariablePopover = (path, variableType) => {
4758 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_5__.trackVariableEvent)({
4759 - varType: variableType,
4760 - controlPath: path.join('.'),
4761 - action: 'open'
4762 - });
4763 -};
4764 -
4765 -/***/ }),
4766 -
4767 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts":
4768 -/*!*********************************************************************************!*\
4769 - !*** ./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts ***!
4770 - \*********************************************************************************/
4771 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4772 -
4773 -__webpack_require__.r(__webpack_exports__);
4774 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4775 -/* harmony export */ createVariable: function() { return /* binding */ createVariable; },
4776 -/* harmony export */ deleteVariable: function() { return /* binding */ deleteVariable; },
4777 -/* harmony export */ getVariable: function() { return /* binding */ getVariable; },
4778 -/* harmony export */ getVariables: function() { return /* binding */ getVariables; },
4779 -/* harmony export */ hasVariable: function() { return /* binding */ hasVariable; },
4780 -/* harmony export */ restoreVariable: function() { return /* binding */ restoreVariable; },
4781 -/* harmony export */ updateVariable: function() { return /* binding */ updateVariable; },
4782 -/* harmony export */ useFilteredVariables: function() { return /* binding */ useFilteredVariables; },
4783 -/* harmony export */ useVariable: function() { return /* binding */ useVariable; }
4784 -/* harmony export */ });
4785 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
4786 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
4787 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4788 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
4789 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
4790 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
4791 -/* harmony import */ var _utils_filter_by_search__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/filter-by-search */ "./packages/packages/core/editor-variables/src/utils/filter-by-search.ts");
4792 -/* harmony import */ var _utils_variables_to_list__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/variables-to-list */ "./packages/packages/core/editor-variables/src/utils/variables-to-list.ts");
4793 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
4794 -
4795 -
4796 -
4797 -
4798 -
4799 -
4800 -
4801 -const getVariables = (includeDeleted = true) => {
4802 - const variables = _service__WEBPACK_IMPORTED_MODULE_3__.service.variables();
4803 - if (includeDeleted) {
4804 - return variables;
4805 - }
4806 - return Object.fromEntries(Object.entries(variables).filter(([, variable]) => !variable.deleted));
4807 -};
4808 -const hasVariable = key => {
4809 - return getVariables()[key] !== undefined;
4810 -};
4811 -
4812 -/**
4813 - * @param key
4814 - * @deprecated Use getVariable instead
4815 - */
4816 -const useVariable = key => {
4817 - return getVariable(key);
4818 -};
4819 -function getVariable(key) {
4820 - const variables = getVariables();
4821 - if (!variables?.[key]) {
4822 - return null;
4823 - }
4824 - return {
4825 - ...variables[key],
4826 - key
4827 - };
4828 -}
4829 -const useFilteredVariables = (searchValue, propTypeKey) => {
4830 - const baseVariables = usePropVariables(propTypeKey);
4831 - const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
4832 - const searchFilteredVariables = (0,_utils_filter_by_search__WEBPACK_IMPORTED_MODULE_4__.filterBySearch)(typeFilteredVariables, searchValue);
4833 - const sortedVariables = searchFilteredVariables.sort((a, b) => {
4834 - const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
4835 - const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
4836 - return orderA - orderB;
4837 - });
4838 - return {
4839 - list: sortedVariables,
4840 - hasMatches: searchFilteredVariables.length > 0,
4841 - isSourceNotEmpty: typeFilteredVariables.length > 0,
4842 - hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
4843 - };
4844 -};
4845 -const useVariableSelectionFilter = variables => {
4846 - const {
4847 - selectionFilter
4848 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_2__.useVariableType)();
4849 - const {
4850 - propType
4851 - } = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.useBoundProp)();
4852 - return selectionFilter ? selectionFilter(variables, propType) : variables;
4853 -};
4854 -const usePropVariables = propKey => {
4855 - return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => normalizeVariables(propKey), [propKey]);
4856 -};
4857 -const getMatchingTypes = propKey => {
4858 - const matchingTypes = [];
4859 - const allTypes = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__.getVariableTypes)();
4860 - const variableType = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__.getVariableType)(propKey);
4861 - Object.entries(allTypes).forEach(([key, typeOptions]) => {
4862 - if (variableType.variableType === typeOptions.variableType) {
4863 - matchingTypes.push(key);
4864 - }
4865 - });
4866 - return matchingTypes;
4867 -};
4868 -const normalizeVariables = propKey => {
4869 - const variables = getVariables(false);
4870 - const matchingTypes = getMatchingTypes(propKey);
4871 - return (0,_utils_variables_to_list__WEBPACK_IMPORTED_MODULE_5__.variablesToList)(variables).filter(variable => matchingTypes.includes(variable.type)).map(_utils_variables_to_list__WEBPACK_IMPORTED_MODULE_5__.toNormalizedVariable);
4872 -};
4873 -const extractId = ({
4874 - id
4875 -}) => id;
4876 -const createVariable = (newVariable, options) => {
4877 - return _service__WEBPACK_IMPORTED_MODULE_3__.service.create(newVariable, options).then(extractId);
4878 -};
4879 -const updateVariable = (updateId, {
4880 - value,
4881 - label,
4882 - type
4883 -}, options) => {
4884 - return _service__WEBPACK_IMPORTED_MODULE_3__.service.update(updateId, {
4885 - value,
4886 - label,
4887 - type
4888 - }, options).then(extractId);
4889 -};
4890 -const deleteVariable = deleteId => {
4891 - return _service__WEBPACK_IMPORTED_MODULE_3__.service.delete(deleteId).then(extractId);
4892 -};
4893 -const restoreVariable = (restoreId, label, value, type) => {
4894 - return _service__WEBPACK_IMPORTED_MODULE_3__.service.restore(restoreId, label, value, type).then(extractId);
4895 -};
4896 -
4897 -/***/ }),
4898 -
4899 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts":
4900 -/*!************************************************************************************!*\
4901 - !*** ./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts ***!
4902 - \************************************************************************************/
4903 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4904 -
4905 -__webpack_require__.r(__webpack_exports__);
4906 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4907 -/* harmony export */ useQuotaPermissions: function() { return /* binding */ useQuotaPermissions; }
4908 -/* harmony export */ });
4909 -const useQuotaPermissions = variableType => {
4910 - const quotaConfig = {
4911 - ...(window.ElementorVariablesQuotaConfig ?? {}),
4912 - ...(window.ElementorVariablesQuotaConfigExtended ?? {})
4913 - };
4914 -
4915 - // BC: Remove when 4.01 is released
4916 - const hasLegacySupport = quotaConfig[variableType] === undefined && window.elementorPro;
4917 - const limit = quotaConfig[variableType] || 0;
4918 - const hasPermission = hasLegacySupport || limit > 0;
4919 - return {
4920 - canAdd: () => hasPermission,
4921 - canEdit: () => hasPermission
4922 - };
4923 -};
4924 -
4925 -/***/ }),
4926 -
4927 -/***/ "./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts":
4928 -/*!**************************************************************************************!*\
4929 - !*** ./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts ***!
4930 - \**************************************************************************************/
4931 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4932 -
4933 -__webpack_require__.r(__webpack_exports__);
4934 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4935 -/* harmony export */ resolveBoundPropAndSetValue: function() { return /* binding */ resolveBoundPropAndSetValue; },
4936 -/* harmony export */ useVariableBoundProp: function() { return /* binding */ useVariableBoundProp; }
4937 -/* harmony export */ });
4938 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4939 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__);
4940 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
4941 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__);
4942 -/* harmony import */ var _context_variable_type_context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../context/variable-type-context */ "./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");
4943 -
4944 -
4945 -
4946 -const useVariableBoundProp = () => {
4947 - const {
4948 - propTypeUtil
4949 - } = (0,_context_variable_type_context__WEBPACK_IMPORTED_MODULE_2__.useVariableType)();
4950 - const boundProp = (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.useBoundProp)(propTypeUtil);
4951 - return {
4952 - ...boundProp,
4953 - setVariableValue: value => resolveBoundPropAndSetValue(value, boundProp),
4954 - variableId: boundProp.value ?? boundProp.placeholder
4955 - };
4956 -};
4957 -const resolveBoundPropAndSetValue = (value, boundProp) => {
4958 - const propValue = unwrapValue(boundProp.value);
4959 - const placeholder = unwrapValue(boundProp.placeholder);
4960 - const newValue = unwrapValue(value);
4961 - if (!propValue && placeholder === newValue) {
4962 - return boundProp.setValue(null);
4963 - }
4964 - return boundProp.setValue(value);
4965 -};
4966 -const unwrapValue = input => {
4967 - if ((0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.isTransformable)(input)) {
4968 - return input.value;
4969 - }
4970 - return input;
4971 -};
4972 -
4973 -/***/ }),
4974 -
4975 -/***/ "./packages/packages/core/editor-variables/src/init.ts":
4976 -/*!*************************************************************!*\
4977 - !*** ./packages/packages/core/editor-variables/src/init.ts ***!
4978 - \*************************************************************/
4979 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
4980 -
4981 -__webpack_require__.r(__webpack_exports__);
4982 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
4983 -/* harmony export */ init: function() { return /* binding */ init; }
4984 -/* harmony export */ });
4985 -/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor */ "@elementor/editor");
4986 -/* harmony import */ var _elementor_editor__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor__WEBPACK_IMPORTED_MODULE_0__);
4987 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
4988 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
4989 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-mcp */ "@elementor/editor-mcp");
4990 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_2__);
4991 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
4992 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_3__);
4993 -/* harmony import */ var _elementor_menus__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/menus */ "@elementor/menus");
4994 -/* harmony import */ var _elementor_menus__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_menus__WEBPACK_IMPORTED_MODULE_4__);
4995 -/* harmony import */ var _components_global_styles_import_listener__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/global-styles-import-listener */ "./packages/packages/core/editor-variables/src/components/global-styles-import-listener.tsx");
4996 -/* harmony import */ var _components_mcp_variable_connect_listener__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/mcp-variable-connect-listener */ "./packages/packages/core/editor-variables/src/components/mcp-variable-connect-listener.tsx");
4997 -/* harmony import */ var _controls_variable_control__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./controls/variable-control */ "./packages/packages/core/editor-variables/src/controls/variable-control.tsx");
4998 -/* harmony import */ var _hooks_use_prop_variable_action__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./hooks/use-prop-variable-action */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx");
4999 -/* harmony import */ var _mcp__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./mcp */ "./packages/packages/core/editor-variables/src/mcp/index.ts");
5000 -/* harmony import */ var _register_variable_types__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./register-variable-types */ "./packages/packages/core/editor-variables/src/register-variable-types.tsx");
5001 -/* harmony import */ var _renderers_style_variables_renderer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./renderers/style-variables-renderer */ "./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx");
5002 -/* harmony import */ var _repeater_injections__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./repeater-injections */ "./packages/packages/core/editor-variables/src/repeater-injections.ts");
5003 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./service */ "./packages/packages/core/editor-variables/src/service.ts");
5004 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
5005 -
5006 -
5007 -
5008 -
5009 -
5010 -
5011 -
5012 -
5013 -
5014 -
5015 -
5016 -
5017 -
5018 -
5019 -
5020 -const {
5021 - registerPopoverAction
5022 -} = _elementor_menus__WEBPACK_IMPORTED_MODULE_4__.controlActionsMenu;
5023 -function init() {
5024 - (0,_register_variable_types__WEBPACK_IMPORTED_MODULE_10__.registerVariableTypes)();
5025 - (0,_repeater_injections__WEBPACK_IMPORTED_MODULE_12__.registerRepeaterInjections)();
5026 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.registerControlReplacement)({
5027 - component: _controls_variable_control__WEBPACK_IMPORTED_MODULE_7__.VariableControl,
5028 - condition: ({
5029 - value,
5030 - placeholder
5031 - }) => {
5032 - if (hasVariableAssigned(value)) {
5033 - return true;
5034 - }
5035 - if (value) {
5036 - return false;
5037 - }
5038 - return hasVariableAssigned(placeholder);
5039 - }
5040 - });
5041 - registerPopoverAction({
5042 - id: 'variables',
5043 - priority: 40,
5044 - useProps: _hooks_use_prop_variable_action__WEBPACK_IMPORTED_MODULE_8__.usePropVariableAction
5045 - });
5046 - _service__WEBPACK_IMPORTED_MODULE_13__.service.init();
5047 - const variablesMcpRegistry = (0,_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_2__.getMCPByDomain)('variables', {
5048 - instructions: `Everything related to V4 ( Atomic ) variables.
5049 -# Global variables
5050 -- Create/update/delete global variables
5051 -- Get list of global variables
5052 -- Get details of a global variable
5053 -`
5054 - });
5055 - (0,_mcp__WEBPACK_IMPORTED_MODULE_9__.initMcp)(variablesMcpRegistry, (0,_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_2__.getMCPByDomain)('canvas'));
5056 - (0,_elementor_editor__WEBPACK_IMPORTED_MODULE_0__.injectIntoTop)({
5057 - id: 'canvas-style-variables-render',
5058 - component: _renderers_style_variables_renderer__WEBPACK_IMPORTED_MODULE_11__.StyleVariablesRenderer
5059 - });
5060 - (0,_elementor_editor__WEBPACK_IMPORTED_MODULE_0__.injectIntoLogic)({
5061 - id: 'variables-import-listener',
5062 - component: _components_global_styles_import_listener__WEBPACK_IMPORTED_MODULE_5__.GlobalStylesImportListener
5063 - });
5064 - (0,_elementor_editor__WEBPACK_IMPORTED_MODULE_0__.injectIntoLogic)({
5065 - id: 'mcp-variable-connect-listener',
5066 - component: _components_mcp_variable_connect_listener__WEBPACK_IMPORTED_MODULE_6__.McpVariableConnectListener
5067 - });
5068 -}
5069 -function hasVariableAssigned(value) {
5070 - if ((0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_3__.isTransformable)(value)) {
5071 - return (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_14__.hasVariableType)(value.$$type);
5072 - }
5073 - return false;
5074 -}
5075 -
5076 -/***/ }),
5077 -
5078 -/***/ "./packages/packages/core/editor-variables/src/mcp/index.ts":
5079 -/*!******************************************************************!*\
5080 - !*** ./packages/packages/core/editor-variables/src/mcp/index.ts ***!
5081 - \******************************************************************/
5082 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5083 -
5084 -__webpack_require__.r(__webpack_exports__);
5085 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5086 -/* harmony export */ initMcp: function() { return /* binding */ initMcp; }
5087 -/* harmony export */ });
5088 -/* harmony import */ var _manage_variable_tool__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./manage-variable-tool */ "./packages/packages/core/editor-variables/src/mcp/manage-variable-tool.ts");
5089 -/* harmony import */ var _variables_resource__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./variables-resource */ "./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");
5090 -
5091 -
5092 -function initMcp(reg, canvasMcpEntry) {
5093 - window.addEventListener('elementor/init', () => {
5094 - (0,_manage_variable_tool__WEBPACK_IMPORTED_MODULE_0__.initManageVariableTool)(reg);
5095 - (0,_variables_resource__WEBPACK_IMPORTED_MODULE_1__.initVariablesResource)(reg, canvasMcpEntry);
5096 - }, {
5097 - once: true
5098 - });
5099 -}
5100 -
5101 -/***/ }),
5102 -
5103 -/***/ "./packages/packages/core/editor-variables/src/mcp/manage-variable-tool.ts":
5104 -/*!*********************************************************************************!*\
5105 - !*** ./packages/packages/core/editor-variables/src/mcp/manage-variable-tool.ts ***!
5106 - \*********************************************************************************/
5107 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5108 -
5109 -__webpack_require__.r(__webpack_exports__);
5110 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5111 -/* harmony export */ initManageVariableTool: function() { return /* binding */ initManageVariableTool; }
5112 -/* harmony export */ });
5113 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/schema */ "@elementor/schema");
5114 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_schema__WEBPACK_IMPORTED_MODULE_0__);
5115 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/utils */ "@elementor/utils");
5116 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_utils__WEBPACK_IMPORTED_MODULE_1__);
5117 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
5118 -/* harmony import */ var _sync_get_font_configs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../sync/get-font-configs */ "./packages/packages/core/editor-variables/src/sync/get-font-configs.ts");
5119 -/* harmony import */ var _utils_validations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../utils/validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
5120 -/* harmony import */ var _variable_tool_prompt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./variable-tool-prompt */ "./packages/packages/core/editor-variables/src/mcp/variable-tool-prompt.ts");
5121 -/* harmony import */ var _variables_resource__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./variables-resource */ "./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");
5122 -
5123 -
5124 -
5125 -
5126 -
5127 -
5128 -
5129 -const VARIABLE_TYPES = {
5130 - COLOR: 'global-color-variable',
5131 - FONT: 'global-font-variable',
5132 - SIZE: 'global-size-variable',
5133 - CUSTOM_SIZE: 'global-custom-size-variable'
5134 -};
5135 -const LENGTH_UNIT_PATTERN = /^(auto|\d+(\.\d+)?(px|rem|em|vh|vw|%|ch|s|ms))$/i;
5136 -const COLOR_PATTERN = /^(#[0-9a-f]{3,8}|rgba?\(|hsl)/i;
5137 -function validateValueForType(type, value) {
5138 - if (type === VARIABLE_TYPES.FONT && LENGTH_UNIT_PATTERN.test(value.trim())) {
5139 - return `Font variable value must be a font family name (e.g. "Roboto"), not a size value like "${value}". Use "global-size-variable" or "global-custom-size-variable" for spacing/size values.`;
5140 - }
5141 - if (type === VARIABLE_TYPES.COLOR && !COLOR_PATTERN.test(value.trim())) {
5142 - return `Color variable value should be a CSS color (e.g. "#FF0000"), got "${value}".`;
5143 - }
5144 - if (type === VARIABLE_TYPES.SIZE && !LENGTH_UNIT_PATTERN.test(value.trim())) {
5145 - return `Size variable value should include a CSS unit (e.g. "16px") or be "auto", got "${value}".`;
5146 - }
5147 - if (type === VARIABLE_TYPES.FONT && !isFontAvailable(value)) {
5148 - return `Font "${value}" is not supported in WordPress. Please choose one of the available font families.`;
5149 - }
5150 - return null;
5151 -}
5152 -function isFontAvailable(font) {
5153 - const fonts = (0,_sync_get_font_configs__WEBPACK_IMPORTED_MODULE_3__.getFontConfigs)();
5154 - const key = font.trim();
5155 - return !!fonts?.[key];
5156 -}
5157 -const initManageVariableTool = reg => {
5158 - const {
5159 - addTool,
5160 - resource
5161 - } = reg;
5162 - const RUNTIME_ALLOWED_VARIABLE_TYPES = (0,_elementor_utils__WEBPACK_IMPORTED_MODULE_1__.isProActive)() ? [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT, VARIABLE_TYPES.SIZE, VARIABLE_TYPES.CUSTOM_SIZE] : [VARIABLE_TYPES.COLOR, VARIABLE_TYPES.FONT];
5163 - resource('manage-global-variable-guide', _variable_tool_prompt__WEBPACK_IMPORTED_MODULE_5__.MANAGE_VARIABLES_GUIDE_URI, {
5164 - title: 'Manage Global Variable Guide',
5165 - description: 'Detailed guide for using the manage-global-variable tool',
5166 - mimeType: 'text/plain'
5167 - }, async uri => ({
5168 - contents: [{
5169 - uri: uri.href,
5170 - mimeType: 'text/plain',
5171 - text: (0,_variable_tool_prompt__WEBPACK_IMPORTED_MODULE_5__.generateVariablesPrompt)()
5172 - }]
5173 - }));
5174 - addTool({
5175 - name: 'manage-global-variable',
5176 - description: 'Manage V4 global variables (color, font, size, custom-size). Read the guide resource before use. font = font-famliy, size = measured unit, custom-size = calculated values',
5177 - schema: {
5178 - action: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.enum(['create', 'update', 'delete']),
5179 - id: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.string().optional().describe('Variable id — required for update/delete. Get from the global-variables resource.'),
5180 - type: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.enum(RUNTIME_ALLOWED_VARIABLE_TYPES),
5181 - label: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.string().describe('Variable label (lowercase, dash-separated) — required for create/update.'),
5182 - value: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.string().optional().describe('Plain CSS value — required for create/update. Color: hex/rgba/hsl. Font: family name only. Size: value with unit e.g. "16px", or "auto" (Pro). Do NOT pass JSON.')
5183 - },
5184 - outputSchema: {
5185 - status: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.enum(['ok']).describe('Operation status'),
5186 - message: _elementor_schema__WEBPACK_IMPORTED_MODULE_0__.z.string().optional().describe('Error details if status is error')
5187 - },
5188 - requiredResources: [{
5189 - uri: _variable_tool_prompt__WEBPACK_IMPORTED_MODULE_5__.MANAGE_VARIABLES_GUIDE_URI,
5190 - description: 'Full guide for variable types, naming rules, and usage'
5191 - }, {
5192 - uri: _variables_resource__WEBPACK_IMPORTED_MODULE_6__.GLOBAL_VARIABLES_URI,
5193 - description: 'Current global variables — check before creating to avoid duplicates'
5194 - }],
5195 - isDestructive: true,
5196 - handler: async params => {
5197 - const operations = getServiceActions(_service__WEBPACK_IMPORTED_MODULE_2__.service);
5198 - const op = operations[params.action];
5199 - if (op) {
5200 - await op(params);
5201 - return {
5202 - status: 'ok'
5203 - };
5204 - }
5205 - throw new Error(`Unknown action ${params.action}`);
5206 - }
5207 - });
5208 -};
5209 -function getServiceActions(svc) {
5210 - return {
5211 - create({
5212 - type,
5213 - label,
5214 - value
5215 - }) {
5216 - if (!type || !label || !value) {
5217 - throw new Error('Create requires type, label, and value');
5218 - }
5219 - if ((type === VARIABLE_TYPES.SIZE || type === VARIABLE_TYPES.CUSTOM_SIZE) && !(0,_elementor_utils__WEBPACK_IMPORTED_MODULE_1__.isProActive)()) {
5220 - throw new Error('Creating size variables requires Elementor Pro.');
5221 - }
5222 - const labelError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_4__.validateLabel)(label);
5223 - if (labelError) {
5224 - throw new Error(labelError);
5225 - }
5226 - const valueError = validateValueForType(type, value);
5227 - if (valueError) {
5228 - throw new Error(valueError);
5229 - }
5230 - return svc.create({
5231 - type,
5232 - label,
5233 - value
5234 - }, {
5235 - eventData: {
5236 - executedBy: 'mcp_tool'
5237 - }
5238 - });
5239 - },
5240 - update({
5241 - id,
5242 - label,
5243 - value
5244 - }) {
5245 - if (!id || !label || !value) {
5246 - throw new Error('Update requires id, label, and value');
5247 - }
5248 - const labelError = (0,_utils_validations__WEBPACK_IMPORTED_MODULE_4__.validateLabel)(label);
5249 - if (labelError) {
5250 - throw new Error(labelError);
5251 - }
5252 - const existingVariable = svc.variables()[id];
5253 - if (existingVariable) {
5254 - const valueError = validateValueForType(existingVariable.type, value);
5255 - if (valueError) {
5256 - throw new Error(valueError);
5257 - }
5258 - }
5259 - return svc.update(id, {
5260 - label,
5261 - value
5262 - }, {
5263 - eventData: {
5264 - executedBy: 'mcp_tool'
5265 - }
5266 - });
5267 - },
5268 - delete({
5269 - id
5270 - }) {
5271 - if (!id) {
5272 - throw new Error('delete requires id');
5273 - }
5274 - return svc.delete(id);
5275 - }
5276 - };
5277 -}
5278 -
5279 -/***/ }),
5280 -
5281 -/***/ "./packages/packages/core/editor-variables/src/mcp/variable-tool-prompt.ts":
5282 -/*!*********************************************************************************!*\
5283 - !*** ./packages/packages/core/editor-variables/src/mcp/variable-tool-prompt.ts ***!
5284 - \*********************************************************************************/
5285 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5286 -
5287 -__webpack_require__.r(__webpack_exports__);
5288 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5289 -/* harmony export */ MANAGE_VARIABLES_GUIDE_URI: function() { return /* binding */ MANAGE_VARIABLES_GUIDE_URI; },
5290 -/* harmony export */ generateVariablesPrompt: function() { return /* binding */ generateVariablesPrompt; }
5291 -/* harmony export */ });
5292 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-mcp */ "@elementor/editor-mcp");
5293 -/* harmony import */ var _elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_0__);
5294 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/utils */ "@elementor/utils");
5295 -/* harmony import */ var _elementor_utils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_utils__WEBPACK_IMPORTED_MODULE_1__);
5296 -
5297 -
5298 -const MANAGE_VARIABLES_GUIDE_URI = 'elementor://variables/tools/manage-global-variable-guide';
5299 -const generateVariablesPrompt = () => {
5300 - const prompt = (0,_elementor_editor_mcp__WEBPACK_IMPORTED_MODULE_0__.toolPrompts)('manage-global-variable');
5301 - const proIsActive = (0,_elementor_utils__WEBPACK_IMPORTED_MODULE_1__.isProActive)();
5302 - const sizeVariableSection = proIsActive ? `- **global-size-variable** — A simple CSS length with a unit (Elementor Pro). Use this for fixed spacing, font sizes, or layout values. Example: \`16px\`, \`1.5rem\`, \`2em\`, \`10vh\`
5303 -- **global-custom-size-variable** — Any CSS size expression that goes beyond a simple number + unit (Elementor Pro). Use this when the value is a CSS function, a keyword, or a combination of units that \`global-size-variable\` cannot represent. Example: \`auto\`, \`clamp(1rem, 2vw, 2rem)\`, \`calc(100% - 32px)\`, \`min(50vw, 600px)\`, \`300ms\`, \`2ch\`. When in doubt: if the value contains a function call or a keyword, use \`global-custom-size-variable\`.` : `- ~~global-size-variable~~ — requires Elementor Pro (not available on this site)
5304 -- ~~global-custom-size-variable~~ — requires Elementor Pro (not available on this site)`;
5305 - prompt.description(`
5306 -# Purpose
5307 -Create, update, or delete V4 global CSS variables. These are distinct from legacy v3 globals and map 1:1 to \`--css-var: VALUE\`.
5308 -
5309 -# Available Types
5310 -- **global-color-variable** — CSS color value. Example: \`#FF0000\`, \`rgba(255,0,0,1)\`, \`hsl(0,100%,50%)\`
5311 -- **global-font-variable** — Font family name ONLY — NOT a size or px value. Example: \`Roboto\`, \`Open Sans\`. NEVER pass px/rem here.
5312 -${sizeVariableSection}
5313 -
5314 -# Naming Rules
5315 -- Labels must be **lowercase**, using only letters (a-z), numbers, digits (0-9), dashes (-), or underscores (_)
5316 -- No spaces, no special characters
5317 -- Example: "Headline Primary" → \`headline-primary\`
5318 -- Labels must be unique — always check [elementor://global-variables] first
5319 -
5320 -# Value Rules
5321 -- Provide a **plain CSS value** only — do NOT pass JSON, legacy-globals object structures, or variable references
5322 -- Values are inserted as-is: \`--css-var: <value>\`
5323 -- NEVER store a px/rem value inside a \`global-font-variable\` — use \`global-size-variable\` (Pro) instead
5324 -
5325 -# Operations
5326 -- **create** — requires \`type\`, \`label\`, \`value\`. Label must be unique.
5327 -- **update** — requires \`id\`, \`label\`, \`value\`. Get \`id\` from [elementor://global-variables]. When renaming: keep existing value. When changing value: keep exact existing label.
5328 -- **delete** — requires \`id\`. DESTRUCTIVE — always confirm with user before executing.
5329 -`);
5330 - prompt.parameter('action', '"create", "update", or "delete".');
5331 - prompt.parameter('type', 'Variable type. Required for create. See Available Types above.');
5332 - prompt.parameter('label', 'Variable name (lowercase, dash-separated). Required for create/update.');
5333 - prompt.parameter('value', 'Plain CSS value matching the variable type. Required for create/update. Do NOT pass JSON.');
5334 - prompt.parameter('id', 'Variable ID. Required for update/delete. Obtain from [elementor://global-variables].');
5335 - prompt.example(`
5336 -Create a brand color:
5337 -{ "action": "create", "type": "global-color-variable", "label": "brand-primary", "value": "#1A73E8" }
5338 -
5339 -Create a heading font:
5340 -{ "action": "create", "type": "global-font-variable", "label": "font-heading", "value": "Playfair Display" }
5341 -
5342 -Create a simple spacing size:
5343 -{ "action": "create", "type": "global-size-variable", "label": "spacing-md", "value": "16px" }
5344 -
5345 -Create a fluid/responsive size using a CSS function (use global-custom-size-variable, NOT global-size-variable):
5346 -{ "action": "create", "type": "global-custom-size-variable", "label": "spacing-fluid", "value": "clamp(1rem, 2vw, 2rem)" }
5347 -
5348 -Create a size that is a keyword:
5349 -{ "action": "create", "type": "global-custom-size-variable", "label": "width-auto", "value": "auto" }
5350 -
5351 -Create a size using calc():
5352 -{ "action": "create", "type": "global-custom-size-variable", "label": "sidebar-width", "value": "calc(100% - 32px)" }
5353 -
5354 -Update a variable's value (keep exact label):
5355 -{ "action": "update", "id": "abc123", "label": "brand-primary", "value": "#0D47A1" }
5356 -
5357 -Rename a variable (keep existing value):
5358 -{ "action": "update", "id": "abc123", "label": "brand-secondary", "value": "#1A73E8" }
5359 -
5360 -Delete a variable:
5361 -{ "action": "delete", "id": "abc123" }
5362 -`);
5363 - prompt.instruction('Always read [elementor://global-variables] before creating to check existing variables and avoid duplicate labels.');
5364 - return prompt.prompt();
5365 -};
5366 -
5367 -/***/ }),
5368 -
5369 -/***/ "./packages/packages/core/editor-variables/src/mcp/variables-resource.ts":
5370 -/*!*******************************************************************************!*\
5371 - !*** ./packages/packages/core/editor-variables/src/mcp/variables-resource.ts ***!
5372 - \*******************************************************************************/
5373 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5374 -
5375 -__webpack_require__.r(__webpack_exports__);
5376 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5377 -/* harmony export */ GLOBAL_VARIABLES_URI: function() { return /* binding */ GLOBAL_VARIABLES_URI; },
5378 -/* harmony export */ initVariablesResource: function() { return /* binding */ initVariablesResource; }
5379 -/* harmony export */ });
5380 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
5381 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__);
5382 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
5383 -/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../storage */ "./packages/packages/core/editor-variables/src/storage.ts");
5384 -
5385 -
5386 -
5387 -const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
5388 -const buildGlobalVariablesPayload = async () => {
5389 - const merged = {};
5390 - Object.entries(_service__WEBPACK_IMPORTED_MODULE_1__.service.variables()).forEach(([id, variable]) => {
5391 - if (!variable.deleted) {
5392 - merged[id] = {
5393 - ...variable,
5394 - version: 'v4'
5395 - };
5396 - }
5397 - });
5398 - return merged;
5399 -};
5400 -const initVariablesResource = (variablesMcpEntry, canvasMcpEntry) => {
5401 - [canvasMcpEntry, variablesMcpEntry].forEach(entry => {
5402 - const {
5403 - resource,
5404 - sendResourceUpdated
5405 - } = entry;
5406 - const notifyGlobalVariablesUpdated = () => {
5407 - sendResourceUpdated({
5408 - uri: GLOBAL_VARIABLES_URI
5409 - });
5410 - };
5411 - resource('global-variables', GLOBAL_VARIABLES_URI, {
5412 - description: 'Global variables available (v4)'
5413 - }, async () => {
5414 - const variables = await buildGlobalVariablesPayload();
5415 - return {
5416 - contents: [{
5417 - uri: GLOBAL_VARIABLES_URI,
5418 - mimeType: 'application/json',
5419 - text: JSON.stringify(variables)
5420 - }]
5421 - };
5422 - });
5423 - window.addEventListener(_storage__WEBPACK_IMPORTED_MODULE_2__.STORAGE_UPDATED_EVENT, notifyGlobalVariablesUpdated);
5424 - (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.__privateListenTo)((0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.commandEndEvent)('document/save/update'), notifyGlobalVariablesUpdated);
5425 - });
5426 -};
5427 -
5428 -/***/ }),
5429 -
5430 -/***/ "./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts":
5431 -/*!********************************************************************************************!*\
5432 - !*** ./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts ***!
5433 - \********************************************************************************************/
5434 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5435 -
5436 -__webpack_require__.r(__webpack_exports__);
5437 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5438 -/* harmony export */ colorVariablePropTypeUtil: function() { return /* binding */ colorVariablePropTypeUtil; }
5439 -/* harmony export */ });
5440 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5441 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
5442 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/schema */ "@elementor/schema");
5443 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_schema__WEBPACK_IMPORTED_MODULE_1__);
5444 -
5445 -
5446 -const colorVariablePropTypeUtil = (0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.createPropUtils)('global-color-variable', _elementor_schema__WEBPACK_IMPORTED_MODULE_1__.z.string());
5447 -
5448 -/***/ }),
5449 -
5450 -/***/ "./packages/packages/core/editor-variables/src/prop-types/custom-size-variable-prop-type.ts":
5451 -/*!**************************************************************************************************!*\
5452 - !*** ./packages/packages/core/editor-variables/src/prop-types/custom-size-variable-prop-type.ts ***!
5453 - \**************************************************************************************************/
5454 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5455 -
5456 -__webpack_require__.r(__webpack_exports__);
5457 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5458 -/* harmony export */ customSizeVariablePropTypeUtil: function() { return /* binding */ customSizeVariablePropTypeUtil; }
5459 -/* harmony export */ });
5460 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5461 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
5462 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/schema */ "@elementor/schema");
5463 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_schema__WEBPACK_IMPORTED_MODULE_1__);
5464 -
5465 -
5466 -const customSizeVariablePropTypeUtil = (0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.createPropUtils)('global-custom-size-variable', _elementor_schema__WEBPACK_IMPORTED_MODULE_1__.z.string());
5467 -
5468 -/***/ }),
5469 -
5470 -/***/ "./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts":
5471 -/*!*******************************************************************************************!*\
5472 - !*** ./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts ***!
5473 - \*******************************************************************************************/
5474 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5475 -
5476 -__webpack_require__.r(__webpack_exports__);
5477 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5478 -/* harmony export */ fontVariablePropTypeUtil: function() { return /* binding */ fontVariablePropTypeUtil; }
5479 -/* harmony export */ });
5480 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5481 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
5482 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/schema */ "@elementor/schema");
5483 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_schema__WEBPACK_IMPORTED_MODULE_1__);
5484 -
5485 -
5486 -const fontVariablePropTypeUtil = (0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.createPropUtils)('global-font-variable', _elementor_schema__WEBPACK_IMPORTED_MODULE_1__.z.string());
5487 -
5488 -/***/ }),
5489 -
5490 -/***/ "./packages/packages/core/editor-variables/src/prop-types/index.ts":
5491 -/*!*************************************************************************!*\
5492 - !*** ./packages/packages/core/editor-variables/src/prop-types/index.ts ***!
5493 - \*************************************************************************/
5494 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5495 -
5496 -__webpack_require__.r(__webpack_exports__);
5497 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5498 -/* harmony export */ colorVariablePropTypeUtil: function() { return /* reexport safe */ _color_variable_prop_type__WEBPACK_IMPORTED_MODULE_0__.colorVariablePropTypeUtil; },
5499 -/* harmony export */ customSizeVariablePropTypeUtil: function() { return /* reexport safe */ _custom_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_1__.customSizeVariablePropTypeUtil; },
5500 -/* harmony export */ fontVariablePropTypeUtil: function() { return /* reexport safe */ _font_variable_prop_type__WEBPACK_IMPORTED_MODULE_2__.fontVariablePropTypeUtil; },
5501 -/* harmony export */ sizeVariablePropTypeUtil: function() { return /* reexport safe */ _size_variable_prop_type__WEBPACK_IMPORTED_MODULE_3__.sizeVariablePropTypeUtil; }
5502 -/* harmony export */ });
5503 -/* harmony import */ var _color_variable_prop_type__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./color-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts");
5504 -/* harmony import */ var _custom_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./custom-size-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/custom-size-variable-prop-type.ts");
5505 -/* harmony import */ var _font_variable_prop_type__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./font-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts");
5506 -/* harmony import */ var _size_variable_prop_type__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./size-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts");
5507 -
5508 -
5509 -
5510 -
5511 -
5512 -/***/ }),
5513 -
5514 -/***/ "./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts":
5515 -/*!*******************************************************************************************!*\
5516 - !*** ./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts ***!
5517 - \*******************************************************************************************/
5518 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5519 -
5520 -__webpack_require__.r(__webpack_exports__);
5521 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5522 -/* harmony export */ sizeVariablePropTypeUtil: function() { return /* binding */ sizeVariablePropTypeUtil; }
5523 -/* harmony export */ });
5524 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5525 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
5526 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/schema */ "@elementor/schema");
5527 -/* harmony import */ var _elementor_schema__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_schema__WEBPACK_IMPORTED_MODULE_1__);
5528 -
5529 -
5530 -const sizeVariablePropTypeUtil = (0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.createPropUtils)('global-size-variable', _elementor_schema__WEBPACK_IMPORTED_MODULE_1__.z.string());
5531 -
5532 -/***/ }),
5533 -
5534 -/***/ "./packages/packages/core/editor-variables/src/register-variable-types.tsx":
5535 -/*!*********************************************************************************!*\
5536 - !*** ./packages/packages/core/editor-variables/src/register-variable-types.tsx ***!
5537 - \*********************************************************************************/
5538 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5539 -
5540 -__webpack_require__.r(__webpack_exports__);
5541 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5542 -/* harmony export */ registerVariableTypes: function() { return /* binding */ registerVariableTypes; }
5543 -/* harmony export */ });
5544 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
5545 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
5546 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
5547 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__);
5548 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5549 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_2__);
5550 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/editor-ui */ "@elementor/editor-ui");
5551 -/* harmony import */ var _elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__);
5552 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
5553 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_4__);
5554 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
5555 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__);
5556 -/* harmony import */ var _components_fields_color_field__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/fields/color-field */ "./packages/packages/core/editor-variables/src/components/fields/color-field.tsx");
5557 -/* harmony import */ var _components_fields_font_field__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/fields/font-field */ "./packages/packages/core/editor-variables/src/components/fields/font-field.tsx");
5558 -/* harmony import */ var _components_ui_color_indicator__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/ui/color-indicator */ "./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx");
5559 -/* harmony import */ var _prop_types_color_variable_prop_type__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./prop-types/color-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts");
5560 -/* harmony import */ var _prop_types_font_variable_prop_type__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./prop-types/font-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts");
5561 -/* harmony import */ var _prop_types_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./prop-types/size-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts");
5562 -/* harmony import */ var _transformers_empty_transformer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./transformers/empty-transformer */ "./packages/packages/core/editor-variables/src/transformers/empty-transformer.tsx");
5563 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
5564 -
5565 -
5566 -
5567 -
5568 -
5569 -
5570 -
5571 -
5572 -
5573 -
5574 -
5575 -
5576 -
5577 -
5578 -function registerVariableTypes() {
5579 - (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_13__.registerVariableType)({
5580 - key: _prop_types_color_variable_prop_type__WEBPACK_IMPORTED_MODULE_9__.colorVariablePropTypeUtil.key,
5581 - valueField: _components_fields_color_field__WEBPACK_IMPORTED_MODULE_6__.ColorField,
5582 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.BrushIcon,
5583 - propTypeUtil: _prop_types_color_variable_prop_type__WEBPACK_IMPORTED_MODULE_9__.colorVariablePropTypeUtil,
5584 - fallbackPropTypeUtil: _elementor_editor_props__WEBPACK_IMPORTED_MODULE_2__.colorPropTypeUtil,
5585 - variableType: 'color',
5586 - startIcon: ({
5587 - value
5588 - }) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_color_indicator__WEBPACK_IMPORTED_MODULE_8__.ColorIndicator, {
5589 - size: "inherit",
5590 - component: "span",
5591 - value: value
5592 - }),
5593 - defaultValue: '#ffffff',
5594 - menuActionsFactory: ({
5595 - variable,
5596 - variableId,
5597 - handlers
5598 - }) => {
5599 - const actions = [];
5600 - if (variable.sync_to_v3) {
5601 - actions.push({
5602 - name: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Stop syncing to Global Colors', 'elementor'),
5603 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.RefreshOffIcon,
5604 - color: 'text.primary',
5605 - onClick: () => handlers.onStopSync(variableId)
5606 - });
5607 - } else {
5608 - actions.push({
5609 - name: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_5__.__)('Sync to Global Colors', 'elementor'),
5610 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.RefreshIcon,
5611 - color: 'text.primary',
5612 - onClick: () => handlers.onStartSync(variableId)
5613 - });
5614 - }
5615 - return actions;
5616 - }
5617 - });
5618 - (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_13__.registerVariableType)({
5619 - key: _prop_types_font_variable_prop_type__WEBPACK_IMPORTED_MODULE_10__.fontVariablePropTypeUtil.key,
5620 - valueField: _components_fields_font_field__WEBPACK_IMPORTED_MODULE_7__.FontField,
5621 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.TextIcon,
5622 - propTypeUtil: _prop_types_font_variable_prop_type__WEBPACK_IMPORTED_MODULE_10__.fontVariablePropTypeUtil,
5623 - fallbackPropTypeUtil: _elementor_editor_props__WEBPACK_IMPORTED_MODULE_2__.stringPropTypeUtil,
5624 - variableType: 'font',
5625 - defaultValue: 'Roboto'
5626 - });
5627 - const sizePromotions = {
5628 - isActive: false,
5629 - icon: _elementor_icons__WEBPACK_IMPORTED_MODULE_4__.ExpandDiagonalIcon,
5630 - propTypeUtil: _prop_types_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_11__.sizeVariablePropTypeUtil,
5631 - fallbackPropTypeUtil: _elementor_editor_props__WEBPACK_IMPORTED_MODULE_2__.sizePropTypeUtil,
5632 - styleTransformer: _transformers_empty_transformer__WEBPACK_IMPORTED_MODULE_12__.EmptyTransformer,
5633 - variableType: 'size',
5634 - selectionFilter: () => [],
5635 - emptyState: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_editor_ui__WEBPACK_IMPORTED_MODULE_3__.CtaButton, {
5636 - size: "small",
5637 - href: 'https://go.elementor.com/go-pro-panel-size-variable/',
5638 - onClick: () => (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_1__.trackUpgradePromotionClick)({
5639 - target_name: 'variables_popover',
5640 - location_l1: 'variables_list'
5641 - })
5642 - })
5643 - };
5644 - (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_13__.registerVariableType)({
5645 - ...sizePromotions,
5646 - key: _prop_types_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_11__.sizeVariablePropTypeUtil.key,
5647 - defaultValue: '0px'
5648 - });
5649 - (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_13__.registerVariableType)({
5650 - ...sizePromotions,
5651 - key: 'global-custom-size-variable'
5652 - });
5653 -}
5654 -
5655 -/***/ }),
5656 -
5657 -/***/ "./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx":
5658 -/*!********************************************************************************************!*\
5659 - !*** ./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx ***!
5660 - \********************************************************************************************/
5661 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5662 -
5663 -__webpack_require__.r(__webpack_exports__);
5664 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5665 -/* harmony export */ StyleVariablesRenderer: function() { return /* binding */ StyleVariablesRenderer; }
5666 -/* harmony export */ });
5667 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
5668 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
5669 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
5670 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__);
5671 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
5672 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
5673 -/* harmony import */ var _style_variables_repository__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../style-variables-repository */ "./packages/packages/core/editor-variables/src/style-variables-repository.ts");
5674 -
5675 -
5676 -
5677 -
5678 -
5679 -const VARIABLES_WRAPPER = ':root';
5680 -function StyleVariablesRenderer() {
5681 - const container = usePortalContainer();
5682 - const styleVariables = useStyleVariables();
5683 - const hasVariables = Object.keys(styleVariables).length > 0;
5684 - if (!container || !hasVariables) {
5685 - return null;
5686 - }
5687 - const cssVariables = convertToCssVariables(styleVariables);
5688 - const wrappedCss = `${VARIABLES_WRAPPER}{${cssVariables}}`;
5689 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Portal, {
5690 - container: container
5691 - }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("style", {
5692 - "data-e-style-id": "e-variables",
5693 - key: wrappedCss
5694 - }, wrappedCss));
5695 -}
5696 -function usePortalContainer() {
5697 - return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateUseListenTo)((0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.commandEndEvent)('editor/documents/attach-preview'), () => (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.getCanvasIframeDocument)()?.head);
5698 -}
5699 -function useStyleVariables() {
5700 - const [variables, setVariables] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
5701 - (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
5702 - const unsubscribe = _style_variables_repository__WEBPACK_IMPORTED_MODULE_3__.styleVariablesRepository.subscribe(setVariables);
5703 - return () => {
5704 - unsubscribe();
5705 - };
5706 - }, []);
5707 - return variables;
5708 -}
5709 -function cssVariableDeclaration(key, variable) {
5710 - const variableName = variable?.deleted ? key : variable.label;
5711 - const value = variable.value;
5712 - return `--${variableName}:${value};`;
5713 -}
5714 -function convertToCssVariables(variables) {
5715 - const listOfVariables = Object.entries(variables);
5716 - return listOfVariables.map(([key, variable]) => cssVariableDeclaration(key, variable)).join('');
5717 -}
5718 -
5719 -/***/ }),
5720 -
5721 -/***/ "./packages/packages/core/editor-variables/src/repeater-injections.ts":
5722 -/*!****************************************************************************!*\
5723 - !*** ./packages/packages/core/editor-variables/src/repeater-injections.ts ***!
5724 - \****************************************************************************/
5725 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5726 -
5727 -__webpack_require__.r(__webpack_exports__);
5728 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5729 -/* harmony export */ registerRepeaterInjections: function() { return /* binding */ registerRepeaterInjections; }
5730 -/* harmony export */ });
5731 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-controls */ "@elementor/editor-controls");
5732 -/* harmony import */ var _elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__);
5733 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
5734 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__);
5735 -/* harmony import */ var _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/variables-repeater-item-slot */ "./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx");
5736 -/* harmony import */ var _prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./prop-types */ "./packages/packages/core/editor-variables/src/prop-types/index.ts");
5737 -
5738 -
5739 -
5740 -
5741 -function registerRepeaterInjections() {
5742 - backgroundOverlayRepeaterInjections();
5743 - boxShadowRepeaterInjections();
5744 - transitionsRepeaterInjections();
5745 - transformRepeaterInjections();
5746 - filterRepeaterInjections();
5747 -}
5748 -function backgroundOverlayRepeaterInjections() {
5749 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemIcon)({
5750 - id: 'background-color-variables-icon',
5751 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.BackgroundRepeaterColorIndicator,
5752 - condition: ({
5753 - value
5754 - }) => {
5755 - return hasAssignedColorVariable(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
5756 - }
5757 - });
5758 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5759 - id: 'background-color-variables-label',
5760 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.BackgroundRepeaterLabel,
5761 - condition: ({
5762 - value
5763 - }) => {
5764 - return hasAssignedColorVariable(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.backgroundColorOverlayPropTypeUtil.extract(value)?.color);
5765 - }
5766 - });
5767 -}
5768 -function boxShadowRepeaterInjections() {
5769 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemIcon)({
5770 - id: 'box-shadow-color-variables-icon',
5771 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.BoxShadowRepeaterColorIndicator,
5772 - condition: ({
5773 - value
5774 - }) => {
5775 - const {
5776 - color
5777 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.shadowPropTypeUtil.extract(value) || {};
5778 - return hasAssignedColorVariable(color);
5779 - }
5780 - });
5781 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5782 - id: 'color-variables-box-shadow-label',
5783 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.BoxShadowRepeaterLabel,
5784 - condition: ({
5785 - value
5786 - }) => {
5787 - const {
5788 - hOffset,
5789 - vOffset,
5790 - blur,
5791 - spread
5792 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.shadowPropTypeUtil.extract(value) || {};
5793 - return hasAssignedSizeVariable(hOffset) || hasAssignedSizeVariable(vOffset) || hasAssignedSizeVariable(blur) || hasAssignedSizeVariable(spread);
5794 - }
5795 - });
5796 -}
5797 -function transformRepeaterInjections() {
5798 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5799 - id: 'transform-size-variables-label',
5800 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.TransformRepeaterLabel,
5801 - condition: ({
5802 - value
5803 - }) => {
5804 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.moveTransformPropTypeUtil.isValid(value)) {
5805 - const {
5806 - x: xAxis,
5807 - y: yAxis,
5808 - z: zAxis
5809 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.moveTransformPropTypeUtil.extract(value) || {};
5810 - return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(zAxis);
5811 - }
5812 - return false;
5813 - }
5814 - });
5815 -}
5816 -function transitionsRepeaterInjections() {
5817 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5818 - id: 'transition-size-variables-label',
5819 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.TransitionsSizeVariableLabel,
5820 - condition: ({
5821 - value
5822 - }) => {
5823 - return hasAssignedSizeVariable(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.selectionSizePropTypeUtil.extract(value)?.size);
5824 - }
5825 - });
5826 -}
5827 -function filterRepeaterInjections() {
5828 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemIcon)({
5829 - id: 'filters-color-variables-icon',
5830 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.FilterDropShadowIconIndicator,
5831 - condition: ({
5832 - value
5833 - }) => {
5834 - if (!_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.isValid(value)) {
5835 - return false;
5836 - }
5837 - const args = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value)?.args;
5838 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.isValid(args)) {
5839 - return hasAssignedColorVariable(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.extract(args)?.color);
5840 - }
5841 - return false;
5842 - }
5843 - });
5844 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5845 - id: 'filters-drop-shadow-size-variables-label',
5846 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.FilterDropShadowRepeaterLabel,
5847 - condition: ({
5848 - value
5849 - }) => {
5850 - if (!_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.isValid(value)) {
5851 - return false;
5852 - }
5853 - const args = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value)?.args;
5854 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.isValid(args)) {
5855 - const {
5856 - xAxis,
5857 - yAxis,
5858 - blur
5859 - } = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.dropShadowFilterPropTypeUtil.extract(args) || {};
5860 - return hasAssignedSizeVariable(xAxis) || hasAssignedSizeVariable(yAxis) || hasAssignedSizeVariable(blur);
5861 - }
5862 - return false;
5863 - }
5864 - });
5865 - (0,_elementor_editor_controls__WEBPACK_IMPORTED_MODULE_0__.injectIntoRepeaterItemLabel)({
5866 - id: 'filters-size-variables-label',
5867 - component: _components_variables_repeater_item_slot__WEBPACK_IMPORTED_MODULE_2__.FilterSingleSizeRepeaterLabel,
5868 - condition: ({
5869 - value
5870 - }) => {
5871 - if (!_elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.isValid(value)) {
5872 - return false;
5873 - }
5874 - const args = _elementor_editor_props__WEBPACK_IMPORTED_MODULE_1__.cssFilterFunctionPropUtil.extract(value)?.args;
5875 - return hasAssignedSizeVariable(args?.value?.size);
5876 - }
5877 - });
5878 -}
5879 -function hasAssignedSizeVariable(value) {
5880 - if (_prop_types__WEBPACK_IMPORTED_MODULE_3__.sizeVariablePropTypeUtil.isValid(value)) {
5881 - return true;
5882 - }
5883 - if (_prop_types__WEBPACK_IMPORTED_MODULE_3__.customSizeVariablePropTypeUtil.isValid(value)) {
5884 - return true;
5885 - }
5886 - return false;
5887 -}
5888 -function hasAssignedColorVariable(value) {
5889 - return !!_prop_types__WEBPACK_IMPORTED_MODULE_3__.colorVariablePropTypeUtil.isValid(value);
5890 -}
5891 -
5892 -/***/ }),
5893 -
5894 -/***/ "./packages/packages/core/editor-variables/src/service.ts":
5895 -/*!****************************************************************!*\
5896 - !*** ./packages/packages/core/editor-variables/src/service.ts ***!
5897 - \****************************************************************/
5898 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5899 -
5900 -__webpack_require__.r(__webpack_exports__);
5901 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
5902 -/* harmony export */ service: function() { return /* binding */ service; }
5903 -/* harmony export */ });
5904 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
5905 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
5906 -/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./api */ "./packages/packages/core/editor-variables/src/api.ts");
5907 -/* harmony import */ var _batch_operations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./batch-operations */ "./packages/packages/core/editor-variables/src/batch-operations.ts");
5908 -/* harmony import */ var _storage__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./storage */ "./packages/packages/core/editor-variables/src/storage.ts");
5909 -/* harmony import */ var _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./style-variables-repository */ "./packages/packages/core/editor-variables/src/style-variables-repository.ts");
5910 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
5911 -
5912 -
5913 -
5914 -
5915 -
5916 -
5917 -const storage = new _storage__WEBPACK_IMPORTED_MODULE_3__.Storage();
5918 -const service = {
5919 - variables: () => {
5920 - return storage.load();
5921 - },
5922 - findIdByLabel(needle) {
5923 - const variableId = Object.entries(this.variables()).find(([, variable]) => variable.label === needle);
5924 - if (!variableId) {
5925 - throw new Error(`Variable with label ${needle} not found`);
5926 - }
5927 - return variableId[0];
5928 - },
5929 - findVariableByLabel(needle) {
5930 - return Object.values(this.variables()).find(variable => variable.label === needle) || null;
5931 - },
5932 - getWatermark: () => {
5933 - return storage.state.watermark;
5934 - },
5935 - init: () => {
5936 - return service.load();
5937 - },
5938 - load: () => {
5939 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.list().then(response => {
5940 - const {
5941 - success,
5942 - data: payload
5943 - } = response.data;
5944 - if (!success) {
5945 - throw new Error('Unexpected response from server');
5946 - }
5947 - return payload;
5948 - }).then(data => {
5949 - const {
5950 - variables,
5951 - watermark
5952 - } = data;
5953 - storage.fill(variables, watermark);
5954 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update(variables);
5955 - return variables;
5956 - });
5957 - },
5958 - create: ({
5959 - type,
5960 - label,
5961 - value
5962 - }, options = {}) => {
5963 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.create(type, label, value).then(response => {
5964 - const {
5965 - success,
5966 - data: payload
5967 - } = response.data;
5968 - if (!success) {
5969 - const errorMessage = payload?.message || (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Unexpected response from server', 'elementor');
5970 - throw new Error(errorMessage);
5971 - }
5972 - return payload;
5973 - }).then(data => {
5974 - const {
5975 - variable,
5976 - watermark
5977 - } = data;
5978 - handleWatermark(_storage__WEBPACK_IMPORTED_MODULE_3__.OP_RW, watermark);
5979 - const {
5980 - id: variableId,
5981 - ...createdVariable
5982 - } = variable;
5983 - storage.add(variableId, createdVariable);
5984 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update({
5985 - [variableId]: createdVariable
5986 - });
5987 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_5__.trackVariableEvent)({
5988 - varType: type,
5989 - action: 'save',
5990 - ...options.eventData
5991 - });
5992 - return {
5993 - id: variableId,
5994 - variable: createdVariable
5995 - };
5996 - });
5997 - },
5998 - update: (id, {
5999 - label,
6000 - value,
6001 - type
6002 - }, options = {}) => {
6003 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.update(id, label, value, type).then(response => {
6004 - const {
6005 - success,
6006 - data: payload
6007 - } = response.data;
6008 - if (!success) {
6009 - const errorMessage = payload?.message || (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Unexpected response from server', 'elementor');
6010 - throw new Error(errorMessage);
6011 - }
6012 - return payload;
6013 - }).then(data => {
6014 - const {
6015 - variable,
6016 - watermark
6017 - } = data;
6018 - handleWatermark(_storage__WEBPACK_IMPORTED_MODULE_3__.OP_RW, watermark);
6019 - const {
6020 - id: variableId,
6021 - ...updatedVariable
6022 - } = variable;
6023 - storage.update(variableId, updatedVariable);
6024 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update({
6025 - [variableId]: updatedVariable
6026 - });
6027 - (0,_utils_tracking__WEBPACK_IMPORTED_MODULE_5__.trackVariableEvent)({
6028 - varType: updatedVariable.type,
6029 - action: 'update',
6030 - ...options.eventData
6031 - });
6032 - return {
6033 - id: variableId,
6034 - variable: updatedVariable
6035 - };
6036 - });
6037 - },
6038 - delete: id => {
6039 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.delete(id).then(response => {
6040 - const {
6041 - success,
6042 - data: payload
6043 - } = response.data;
6044 - if (!success) {
6045 - throw new Error('Unexpected response from server');
6046 - }
6047 - return payload;
6048 - }).then(data => {
6049 - const {
6050 - variable,
6051 - watermark
6052 - } = data;
6053 - handleWatermark(_storage__WEBPACK_IMPORTED_MODULE_3__.OP_RW, watermark);
6054 - const {
6055 - id: variableId,
6056 - ...deletedVariable
6057 - } = variable;
6058 - storage.update(variableId, deletedVariable);
6059 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update({
6060 - [variableId]: deletedVariable
6061 - });
6062 - return {
6063 - id: variableId,
6064 - variable: deletedVariable
6065 - };
6066 - });
6067 - },
6068 - restore: (id, label, value, type) => {
6069 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.restore(id, label, value, type).then(response => {
6070 - const {
6071 - success,
6072 - data: payload
6073 - } = response.data;
6074 - if (!success) {
6075 - throw new Error('Unexpected response from server');
6076 - }
6077 - return payload;
6078 - }).then(data => {
6079 - const {
6080 - variable,
6081 - watermark
6082 - } = data;
6083 - handleWatermark(_storage__WEBPACK_IMPORTED_MODULE_3__.OP_RW, watermark);
6084 - const {
6085 - id: variableId,
6086 - ...restoredVariable
6087 - } = variable;
6088 - storage.update(variableId, restoredVariable);
6089 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update({
6090 - [variableId]: restoredVariable
6091 - });
6092 - return {
6093 - id: variableId,
6094 - variable: restoredVariable
6095 - };
6096 - });
6097 - },
6098 - batchSave: (originalVariables, currentVariables, deletedVariables) => {
6099 - const operations = (0,_batch_operations__WEBPACK_IMPORTED_MODULE_2__.buildOperationsArray)(originalVariables, currentVariables, deletedVariables);
6100 - const batchPayload = {
6101 - operations,
6102 - watermark: storage.state.watermark
6103 - };
6104 - if (operations.length === 0) {
6105 - return Promise.resolve({
6106 - success: true,
6107 - watermark: storage.state.watermark,
6108 - operations: 0
6109 - });
6110 - }
6111 - return _api__WEBPACK_IMPORTED_MODULE_1__.apiClient.batch(batchPayload).then(response => {
6112 - const {
6113 - success,
6114 - data: payload
6115 - } = response.data;
6116 - if (!success) {
6117 - throw new Error('Unexpected response from server');
6118 - }
6119 - return payload;
6120 - }).then(data => {
6121 - const {
6122 - results,
6123 - watermark
6124 - } = data;
6125 - handleWatermark(_storage__WEBPACK_IMPORTED_MODULE_3__.OP_RW, watermark);
6126 - if (results) {
6127 - results.forEach(result => {
6128 - const variableId = result.id;
6129 - if (result.variable) {
6130 - if (result.type === 'create') {
6131 - storage.add(variableId, result.variable);
6132 - } else {
6133 - storage.update(variableId, result.variable);
6134 - }
6135 - _style_variables_repository__WEBPACK_IMPORTED_MODULE_4__.styleVariablesRepository.update({
6136 - [variableId]: result.variable
6137 - });
6138 - }
6139 - });
6140 - }
6141 - return {
6142 - success: true,
6143 - watermark,
6144 - operations: operations.length
6145 - };
6146 - });
6147 - }
6148 -};
6149 -const handleWatermark = (operation, newWatermark) => {
6150 - if (storage.watermarkDiff(operation, newWatermark)) {
6151 - setTimeout(() => service.load(), 500);
6152 - }
6153 - storage.watermark(newWatermark);
6154 -};
6155 -
6156 -/***/ }),
6157 -
6158 -/***/ "./packages/packages/core/editor-variables/src/storage.ts":
6159 -/*!****************************************************************!*\
6160 - !*** ./packages/packages/core/editor-variables/src/storage.ts ***!
6161 - \****************************************************************/
6162 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6163 -
6164 -__webpack_require__.r(__webpack_exports__);
6165 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6166 -/* harmony export */ OP_RW: function() { return /* binding */ OP_RW; },
6167 -/* harmony export */ STORAGE_UPDATED_EVENT: function() { return /* binding */ STORAGE_UPDATED_EVENT; },
6168 -/* harmony export */ Storage: function() { return /* binding */ Storage; }
6169 -/* harmony export */ });
6170 -const STORAGE_KEY = 'elementor-global-variables';
6171 -const STORAGE_WATERMARK_KEY = 'elementor-global-variables-watermark';
6172 -const STORAGE_UPDATED_EVENT = 'variables:updated';
6173 -const OP_RW = 'RW';
6174 -const OP_RO = 'RO';
6175 -class Storage {
6176 - notifyChange() {
6177 - window.dispatchEvent(new Event(STORAGE_UPDATED_EVENT));
6178 - }
6179 - constructor() {
6180 - this.state = {
6181 - watermark: -1,
6182 - variables: {}
6183 - };
6184 - }
6185 - load() {
6186 - this.state.watermark = parseInt(localStorage.getItem(STORAGE_WATERMARK_KEY) || '-1');
6187 - this.state.variables = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
6188 - return this.state.variables;
6189 - }
6190 - fill(variables, watermark) {
6191 - this.state.variables = {};
6192 - if (variables && Object.keys(variables).length) {
6193 - this.state.variables = variables;
6194 - }
6195 - this.state.watermark = watermark;
6196 - localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
6197 - localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
6198 - this.notifyChange();
6199 - }
6200 - add(id, variable) {
6201 - this.load();
6202 - this.state.variables[id] = variable;
6203 - localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
6204 - this.notifyChange();
6205 - }
6206 - update(id, variable) {
6207 - this.load();
6208 - this.state.variables[id] = variable;
6209 - localStorage.setItem(STORAGE_KEY, JSON.stringify(this.state.variables));
6210 - this.notifyChange();
6211 - }
6212 - watermark(watermark) {
6213 - this.state.watermark = watermark;
6214 - localStorage.setItem(STORAGE_WATERMARK_KEY, this.state.watermark.toString());
6215 - }
6216 - watermarkDiff(operation, newWatermark) {
6217 - const diff = newWatermark - this.state.watermark;
6218 - if (OP_RW === operation) {
6219 - return 1 !== diff;
6220 - }
6221 - if (OP_RO === operation) {
6222 - return 0 !== diff;
6223 - }
6224 - return false;
6225 - }
6226 -}
6227 -
6228 -/***/ }),
6229 -
6230 -/***/ "./packages/packages/core/editor-variables/src/style-variables-repository.ts":
6231 -/*!***********************************************************************************!*\
6232 - !*** ./packages/packages/core/editor-variables/src/style-variables-repository.ts ***!
6233 - \***********************************************************************************/
6234 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6235 -
6236 -__webpack_require__.r(__webpack_exports__);
6237 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6238 -/* harmony export */ styleVariablesRepository: function() { return /* binding */ styleVariablesRepository; }
6239 -/* harmony export */ });
6240 -/* harmony import */ var _create_style_variables_repository__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./create-style-variables-repository */ "./packages/packages/core/editor-variables/src/create-style-variables-repository.ts");
6241 -
6242 -const styleVariablesRepository = (0,_create_style_variables_repository__WEBPACK_IMPORTED_MODULE_0__.createStyleVariablesRepository)();
6243 -
6244 -/***/ }),
6245 -
6246 -/***/ "./packages/packages/core/editor-variables/src/sync/get-font-configs.ts":
6247 -/*!******************************************************************************!*\
6248 - !*** ./packages/packages/core/editor-variables/src/sync/get-font-configs.ts ***!
6249 - \******************************************************************************/
6250 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6251 -
6252 -__webpack_require__.r(__webpack_exports__);
6253 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6254 -/* harmony export */ getFontConfigs: function() { return /* binding */ getFontConfigs; }
6255 -/* harmony export */ });
6256 -const getFontConfigs = () => {
6257 - return window.elementor?.config?.controls?.font?.options ?? {};
6258 -};
6259 -
6260 -/***/ }),
6261 -
6262 -/***/ "./packages/packages/core/editor-variables/src/transformers/empty-transformer.tsx":
6263 -/*!****************************************************************************************!*\
6264 - !*** ./packages/packages/core/editor-variables/src/transformers/empty-transformer.tsx ***!
6265 - \****************************************************************************************/
6266 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6267 -
6268 -__webpack_require__.r(__webpack_exports__);
6269 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6270 -/* harmony export */ EmptyTransformer: function() { return /* binding */ EmptyTransformer; }
6271 -/* harmony export */ });
6272 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-canvas */ "@elementor/editor-canvas");
6273 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__);
6274 -
6275 -
6276 -// eslint-disable-next-line @typescript-eslint/no-unused-vars
6277 -const EmptyTransformer = (0,_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.createTransformer)(_value => {
6278 - return null;
6279 -});
6280 -
6281 -/***/ }),
6282 -
6283 -/***/ "./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx":
6284 -/*!**********************************************************************************************!*\
6285 - !*** ./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx ***!
6286 - \**********************************************************************************************/
6287 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6288 -
6289 -__webpack_require__.r(__webpack_exports__);
6290 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6291 -/* harmony export */ inheritanceTransformer: function() { return /* binding */ inheritanceTransformer; }
6292 -/* harmony export */ });
6293 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
6294 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
6295 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-canvas */ "@elementor/editor-canvas");
6296 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__);
6297 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
6298 -/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__);
6299 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
6300 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
6301 -/* harmony import */ var _components_ui_color_indicator__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/ui/color-indicator */ "./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx");
6302 -/* harmony import */ var _prop_types_color_variable_prop_type__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../prop-types/color-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts");
6303 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
6304 -/* harmony import */ var _utils_resolve_css_variable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/resolve-css-variable */ "./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts");
6305 -
6306 -
6307 -
6308 -
6309 -
6310 -
6311 -
6312 -
6313 -const inheritanceTransformer = (0,_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_1__.createTransformer)(id => {
6314 - const variables = _service__WEBPACK_IMPORTED_MODULE_6__.service.variables();
6315 - const variable = variables[id];
6316 - if (!variable) {
6317 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Missing variable', 'elementor'));
6318 - }
6319 - const showColorIndicator = variable.type === _prop_types_color_variable_prop_type__WEBPACK_IMPORTED_MODULE_5__.colorVariablePropTypeUtil.key;
6320 - const css = (0,_utils_resolve_css_variable__WEBPACK_IMPORTED_MODULE_7__.resolveCssVariable)(id, variable);
6321 - return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Stack, {
6322 - direction: "row",
6323 - spacing: 0.5,
6324 - sx: {
6325 - paddingInline: '1px'
6326 - },
6327 - alignItems: "center"
6328 - }, showColorIndicator && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_components_ui_color_indicator__WEBPACK_IMPORTED_MODULE_4__.ColorIndicator, {
6329 - size: "inherit",
6330 - value: variable.value
6331 - }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_elementor_ui__WEBPACK_IMPORTED_MODULE_2__.Typography, {
6332 - variant: "caption",
6333 - overflow: "hidden",
6334 - whiteSpace: "nowrap",
6335 - textOverflow: "ellipsis"
6336 - }, css));
6337 -});
6338 -
6339 -/***/ }),
6340 -
6341 -/***/ "./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts":
6342 -/*!************************************************************************************************!*\
6343 - !*** ./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts ***!
6344 - \************************************************************************************************/
6345 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6346 -
6347 -__webpack_require__.r(__webpack_exports__);
6348 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6349 -/* harmony export */ resolveCssVariable: function() { return /* binding */ resolveCssVariable; }
6350 -/* harmony export */ });
6351 -const resolveCssVariable = (id, variable) => {
6352 - let name = id;
6353 - let fallbackValue = '';
6354 - if (variable) {
6355 - fallbackValue = variable.value;
6356 - }
6357 - if (variable && !variable.deleted) {
6358 - name = variable.label;
6359 - }
6360 - if (!name.trim()) {
6361 - return null;
6362 - }
6363 - const validCssVariableName = `--${name}`;
6364 - if (!fallbackValue.trim()) {
6365 - return `var(${validCssVariableName})`;
6366 - }
6367 - return `var(${validCssVariableName}, ${fallbackValue})`;
6368 -};
6369 -
6370 -/***/ }),
6371 -
6372 -/***/ "./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts":
6373 -/*!******************************************************************************************!*\
6374 - !*** ./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts ***!
6375 - \******************************************************************************************/
6376 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6377 -
6378 -__webpack_require__.r(__webpack_exports__);
6379 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6380 -/* harmony export */ variableTransformer: function() { return /* binding */ variableTransformer; }
6381 -/* harmony export */ });
6382 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-canvas */ "@elementor/editor-canvas");
6383 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__);
6384 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
6385 -/* harmony import */ var _utils_resolve_css_variable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/resolve-css-variable */ "./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts");
6386 -
6387 -
6388 -
6389 -const variableTransformer = (0,_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.createTransformer)((idOrLabel, {
6390 - key
6391 -}) => {
6392 - const variables = _service__WEBPACK_IMPORTED_MODULE_1__.service.variables();
6393 - const targetVariable = variables[idOrLabel] || _service__WEBPACK_IMPORTED_MODULE_1__.service.findVariableByLabel(idOrLabel);
6394 - if (!targetVariable) {
6395 - return null;
6396 - }
6397 - if ((0,_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.isGridTrackProperty)(key)) {
6398 - const count = parseInt((targetVariable.value ?? '').trim(), 10);
6399 - return (0,_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.formatGridTrackRepeat)(count);
6400 - }
6401 - const id = _service__WEBPACK_IMPORTED_MODULE_1__.service.findIdByLabel(targetVariable.label);
6402 - return (0,_utils_resolve_css_variable__WEBPACK_IMPORTED_MODULE_2__.resolveCssVariable)(id, targetVariable);
6403 -});
6404 -
6405 -/***/ }),
6406 -
6407 -/***/ "./packages/packages/core/editor-variables/src/utils/duplicate-label.ts":
6408 -/*!******************************************************************************!*\
6409 - !*** ./packages/packages/core/editor-variables/src/utils/duplicate-label.ts ***!
6410 - \******************************************************************************/
6411 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6412 -
6413 -__webpack_require__.r(__webpack_exports__);
6414 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6415 -/* harmony export */ COPY_SUFFIX: function() { return /* binding */ COPY_SUFFIX; },
6416 -/* harmony export */ generateDuplicateLabel: function() { return /* binding */ generateDuplicateLabel; }
6417 -/* harmony export */ });
6418 -/* harmony import */ var _validations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./validations */ "./packages/packages/core/editor-variables/src/utils/validations.ts");
6419 -
6420 -const COPY_SUFFIX = '-Copy';
6421 -const trimToFit = (base, suffix) => {
6422 - const combined = base + suffix;
6423 - if (combined.length <= _validations__WEBPACK_IMPORTED_MODULE_0__.VARIABLE_LABEL_MAX_LENGTH) {
6424 - return combined;
6425 - }
6426 - return base.slice(0, _validations__WEBPACK_IMPORTED_MODULE_0__.VARIABLE_LABEL_MAX_LENGTH - suffix.length) + suffix;
6427 -};
6428 -const generateDuplicateLabel = (originalLabel, existingLabels) => {
6429 - const labelsSet = new Set(existingLabels);
6430 - const firstCandidate = trimToFit(originalLabel, COPY_SUFFIX);
6431 - if (!labelsSet.has(firstCandidate)) {
6432 - return firstCandidate;
6433 - }
6434 - for (let i = 2; i <= labelsSet.size + 1; i++) {
6435 - const candidate = trimToFit(originalLabel, `${COPY_SUFFIX}-${i}`);
6436 - if (!labelsSet.has(candidate)) {
6437 - return candidate;
6438 - }
6439 - }
6440 - return firstCandidate;
6441 -};
6442 -
6443 -/***/ }),
6444 -
6445 -/***/ "./packages/packages/core/editor-variables/src/utils/extract-variables-from-style-value.ts":
6446 -/*!*************************************************************************************************!*\
6447 - !*** ./packages/packages/core/editor-variables/src/utils/extract-variables-from-style-value.ts ***!
6448 - \*************************************************************************************************/
6449 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6450 -
6451 -__webpack_require__.r(__webpack_exports__);
6452 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6453 -/* harmony export */ extractVariablesFromStyleValue: function() { return /* binding */ extractVariablesFromStyleValue; }
6454 -/* harmony export */ });
6455 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
6456 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
6457 -
6458 -const VARIABLE_TYPE_KEYS = ['global-color-variable', 'global-font-variable', 'global-size-variable', 'global-custom-size-variable'];
6459 -function tryExtractVariable(value) {
6460 - for (const key of VARIABLE_TYPE_KEYS) {
6461 - const propUtil = (0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.getPropSchemaFromCache)(key);
6462 - if (propUtil?.isValid(value)) {
6463 - return {
6464 - type: key,
6465 - variableId: propUtil.extract(value)
6466 - };
6467 - }
6468 - }
6469 - return null;
6470 -}
6471 -function traverse(value, path, result) {
6472 - const extracted = tryExtractVariable(value);
6473 - if (extracted) {
6474 - result.push({
6475 - ...extracted,
6476 - controlPath: path.join('.')
6477 - });
6478 - return;
6479 - }
6480 - if ((0,_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.isTransformable)(value)) {
6481 - traverse(value.value, path, result);
6482 - return;
6483 - }
6484 - if (value && typeof value === 'object') {
6485 - for (const [key, val] of Object.entries(value)) {
6486 - traverse(val, [...path, key], result);
6487 - }
6488 - }
6489 -}
6490 -function extractVariablesFromStyleValue(styleValue) {
6491 - const result = [];
6492 - traverse(styleValue, [], result);
6493 - return result;
6494 -}
6495 -
6496 -/***/ }),
6497 -
6498 -/***/ "./packages/packages/core/editor-variables/src/utils/filter-by-search.ts":
6499 -/*!*******************************************************************************!*\
6500 - !*** ./packages/packages/core/editor-variables/src/utils/filter-by-search.ts ***!
6501 - \*******************************************************************************/
6502 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6503 -
6504 -__webpack_require__.r(__webpack_exports__);
6505 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6506 -/* harmony export */ filterBySearch: function() { return /* binding */ filterBySearch; }
6507 -/* harmony export */ });
6508 -function filterBySearch(variables, searchValue) {
6509 - const lowerSearchValue = searchValue.toLowerCase();
6510 - return variables.filter(variable => variable.label.toLowerCase().includes(lowerSearchValue));
6511 -}
6512 -
6513 -/***/ }),
6514 -
6515 -/***/ "./packages/packages/core/editor-variables/src/utils/llm-propvalue-label-resolver.ts":
6516 -/*!*******************************************************************************************!*\
6517 - !*** ./packages/packages/core/editor-variables/src/utils/llm-propvalue-label-resolver.ts ***!
6518 - \*******************************************************************************************/
6519 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6520 -
6521 -__webpack_require__.r(__webpack_exports__);
6522 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6523 -/* harmony export */ globalVariablesLLMResolvers: function() { return /* binding */ globalVariablesLLMResolvers; }
6524 -/* harmony export */ });
6525 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../service */ "./packages/packages/core/editor-variables/src/service.ts");
6526 -
6527 -const defaultResolver = key => value => {
6528 - const idOrLabel = String(value);
6529 - return {
6530 - $$type: key,
6531 - value: _service__WEBPACK_IMPORTED_MODULE_0__.service.variables()[idOrLabel] ? idOrLabel : _service__WEBPACK_IMPORTED_MODULE_0__.service.findIdByLabel(idOrLabel)
6532 - };
6533 -};
6534 -const globalVariablesLLMResolvers = {
6535 - 'global-color-variable': defaultResolver('global-color-variable'),
6536 - 'global-font-variable': defaultResolver('global-font-variable'),
6537 - 'global-size-variable': defaultResolver('global-size-variable')
6538 -};
6539 -
6540 -/***/ }),
6541 -
6542 -/***/ "./packages/packages/core/editor-variables/src/utils/size-value.ts":
6543 -/*!*************************************************************************!*\
6544 - !*** ./packages/packages/core/editor-variables/src/utils/size-value.ts ***!
6545 - \*************************************************************************/
6546 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6547 -
6548 -__webpack_require__.r(__webpack_exports__);
6549 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6550 -/* harmony export */ sizeValue: function() { return /* binding */ sizeValue; }
6551 -/* harmony export */ });
6552 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-props */ "@elementor/editor-props");
6553 -/* harmony import */ var _elementor_editor_props__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__);
6554 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
6555 -/* harmony import */ var _prop_types__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../prop-types */ "./packages/packages/core/editor-variables/src/prop-types/index.ts");
6556 -
6557 -
6558 -
6559 -const DEFAULT_UNIT = 'px';
6560 -const CUSTOM_SIZE_LABEL = 'fx';
6561 -function sizeValue(value) {
6562 - if (_prop_types__WEBPACK_IMPORTED_MODULE_2__.sizeVariablePropTypeUtil.isValid(value) || _prop_types__WEBPACK_IMPORTED_MODULE_2__.customSizeVariablePropTypeUtil.isValid(value)) {
6563 - const variable = (0,_hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_1__.getVariable)(value?.value);
6564 - return variable?.value;
6565 - }
6566 - if (_elementor_editor_props__WEBPACK_IMPORTED_MODULE_0__.sizePropTypeUtil.isValid(value)) {
6567 - const {
6568 - size,
6569 - unit
6570 - } = value.value;
6571 - if ('custom' !== unit) {
6572 - return `${size ?? 0}${unit ?? DEFAULT_UNIT}`;
6573 - }
6574 - if (!size) {
6575 - return CUSTOM_SIZE_LABEL;
6576 - }
6577 - return size;
6578 - }
6579 - return '';
6580 -}
6581 -
6582 -/***/ }),
6583 -
6584 -/***/ "./packages/packages/core/editor-variables/src/utils/tracking.ts":
6585 -/*!***********************************************************************!*\
6586 - !*** ./packages/packages/core/editor-variables/src/utils/tracking.ts ***!
6587 - \***********************************************************************/
6588 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6589 -
6590 -__webpack_require__.r(__webpack_exports__);
6591 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6592 -/* harmony export */ trackVariableEvent: function() { return /* binding */ trackVariableEvent; },
6593 -/* harmony export */ trackVariableSyncToV3: function() { return /* binding */ trackVariableSyncToV3; },
6594 -/* harmony export */ trackVariablesManagerEvent: function() { return /* binding */ trackVariablesManagerEvent; }
6595 -/* harmony export */ });
6596 -/* harmony import */ var _elementor_events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/events */ "@elementor/events");
6597 -/* harmony import */ var _elementor_events__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_events__WEBPACK_IMPORTED_MODULE_0__);
6598 -
6599 -const trackVariableEvent = ({
6600 - varType,
6601 - controlPath,
6602 - action,
6603 - executedBy
6604 -}) => {
6605 - const {
6606 - dispatchEvent,
6607 - config
6608 - } = (0,_elementor_events__WEBPACK_IMPORTED_MODULE_0__.getMixpanel)();
6609 - if (!config?.names?.variables?.[action]) {
6610 - return;
6611 - }
6612 - const name = config.names.variables[action];
6613 - let eventData = {
6614 - var_type: varType,
6615 - action_type: name
6616 - };
6617 - if (executedBy) {
6618 - eventData.executed_by = executedBy;
6619 - }
6620 - const defaultLocationInfo = {
6621 - location: config?.locations?.variables || '',
6622 - secondaryLocation: config?.secondaryLocations?.variablesPopover || '',
6623 - trigger: config?.triggers?.click || ''
6624 - };
6625 - if (!executedBy || executedBy !== 'mcp_tool') {
6626 - eventData = {
6627 - ...defaultLocationInfo,
6628 - ...eventData
6629 - };
6630 - }
6631 - if (controlPath) {
6632 - eventData.control_path = controlPath;
6633 - }
6634 - dispatchEvent?.(name, eventData);
6635 -};
6636 -const trackVariablesManagerEvent = ({
6637 - action,
6638 - source,
6639 - varType,
6640 - controlPath
6641 -}) => {
6642 - const {
6643 - dispatchEvent,
6644 - config
6645 - } = (0,_elementor_events__WEBPACK_IMPORTED_MODULE_0__.getMixpanel)();
6646 - if (!config?.names?.variables?.[action]) {
6647 - return;
6648 - }
6649 - const name = config.names.variables[action];
6650 - const eventData = {
6651 - location: config?.locations?.variablesManager || '',
6652 - trigger: config?.triggers?.click || '',
6653 - action_type: name
6654 - };
6655 - if (source) {
6656 - eventData.source = source;
6657 - }
6658 - if (varType) {
6659 - eventData.var_type = varType;
6660 - }
6661 - if (controlPath) {
6662 - eventData.style_control_path = controlPath;
6663 - }
6664 - dispatchEvent?.(name, eventData);
6665 -};
6666 -const trackVariableSyncToV3 = ({
6667 - variableLabel,
6668 - action
6669 -}) => {
6670 - const {
6671 - dispatchEvent,
6672 - config
6673 - } = (0,_elementor_events__WEBPACK_IMPORTED_MODULE_0__.getMixpanel)();
6674 - if (!config?.names?.variables?.variableSyncToV3) {
6675 - return;
6676 - }
6677 - const name = config.names.variables.variableSyncToV3;
6678 - const isSync = action === 'sync';
6679 - dispatchEvent?.(name, {
6680 - interaction_type: 'click',
6681 - target_type: variableLabel,
6682 - target_name: isSync ? 'sync_to_v3' : 'unsync_to_v3',
6683 - interaction_result: isSync ? 'var_is_synced_to_V3' : 'var_is_unsynced_from_V3',
6684 - target_location: 'widget_panel',
6685 - location_l1: 'var_manager',
6686 - interaction_description: isSync ? `user_synced_${variableLabel}_to_v3` : `user_unsync_${variableLabel}_from_v3`
6687 - });
6688 -};
6689 -
6690 -/***/ }),
6691 -
6692 -/***/ "./packages/packages/core/editor-variables/src/utils/unlink-variable.ts":
6693 -/*!******************************************************************************!*\
6694 - !*** ./packages/packages/core/editor-variables/src/utils/unlink-variable.ts ***!
6695 - \******************************************************************************/
6696 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6697 -
6698 -__webpack_require__.r(__webpack_exports__);
6699 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6700 -/* harmony export */ createUnlinkHandler: function() { return /* binding */ createUnlinkHandler; },
6701 -/* harmony export */ transformValueBeforeUnlink: function() { return /* binding */ transformValueBeforeUnlink; }
6702 -/* harmony export */ });
6703 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
6704 -
6705 -function transformValueBeforeUnlink(variable, propTypeKey) {
6706 - const {
6707 - valueTransformer
6708 - } = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_0__.getVariableType)(propTypeKey);
6709 - if (valueTransformer) {
6710 - return valueTransformer(variable.value, variable.type);
6711 - }
6712 - return variable.value;
6713 -}
6714 -function createUnlinkHandler(variable, propTypeKey, setValue) {
6715 - return () => {
6716 - const {
6717 - fallbackPropTypeUtil
6718 - } = (0,_variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_0__.getVariableType)(propTypeKey);
6719 - const transformedValue = transformValueBeforeUnlink(variable, propTypeKey);
6720 - setValue(fallbackPropTypeUtil.create(transformedValue));
6721 - };
6722 -}
6723 -
6724 -/***/ }),
6725 -
6726 -/***/ "./packages/packages/core/editor-variables/src/utils/validations.ts":
6727 -/*!**************************************************************************!*\
6728 - !*** ./packages/packages/core/editor-variables/src/utils/validations.ts ***!
6729 - \**************************************************************************/
6730 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6731 -
6732 -__webpack_require__.r(__webpack_exports__);
6733 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6734 -/* harmony export */ ERROR_MESSAGES: function() { return /* binding */ ERROR_MESSAGES; },
6735 -/* harmony export */ VARIABLE_LABEL_MAX_LENGTH: function() { return /* binding */ VARIABLE_LABEL_MAX_LENGTH; },
6736 -/* harmony export */ labelHint: function() { return /* binding */ labelHint; },
6737 -/* harmony export */ mapServerError: function() { return /* binding */ mapServerError; },
6738 -/* harmony export */ validateLabel: function() { return /* binding */ validateLabel; },
6739 -/* harmony export */ validateValue: function() { return /* binding */ validateValue; }
6740 -/* harmony export */ });
6741 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
6742 -/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_icons__WEBPACK_IMPORTED_MODULE_0__);
6743 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
6744 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
6745 -
6746 -
6747 -const ERROR_MESSAGES = {
6748 - MISSING_VARIABLE_NAME: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Give your variable a name.', 'elementor'),
6749 - MISSING_VARIABLE_VALUE: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Add a value to complete your variable.', 'elementor'),
6750 - INVALID_CHARACTERS: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Use letters, numbers, dashes (-), or underscores (_) for the name.', 'elementor'),
6751 - NO_NON_SPECIAL_CHARACTER: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Names have to include at least one non-special character.', 'elementor'),
6752 - VARIABLE_LABEL_MAX_LENGTH: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Keep names up to 50 characters.', 'elementor'),
6753 - DUPLICATED_LABEL: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('This variable name already exists. Please choose a unique name.', 'elementor'),
6754 - UNEXPECTED_ERROR: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('There was a glitch. Try saving your variable again.', 'elementor'),
6755 - BATCH: {
6756 - DUPLICATED_LABELS: (count, name) =>
6757 - // eslint-disable-next-line @wordpress/i18n-translator-comments
6758 - (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.sprintf)((0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('We found %1$d duplicated %2$s.', 'elementor'), count, name),
6759 - UNEXPECTED_ERROR: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('There was a glitch.', 'elementor'),
6760 - DUPLICATED_LABEL_ACTION: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Take me there', 'elementor'),
6761 - DUPLICATED_LABEL_ACTION_MESSAGE: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Please rename the variables.', 'elementor'),
6762 - UNEXPECTED_ERROR_ACTION_MESSAGE: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Try saving your variables again.', 'elementor')
6763 - }
6764 -};
6765 -const VARIABLE_LABEL_MAX_LENGTH = 50;
6766 -const mapServerError = error => {
6767 - if (error?.response?.data?.code === 'duplicated_label') {
6768 - return {
6769 - field: 'label',
6770 - message: ERROR_MESSAGES.DUPLICATED_LABEL
6771 - };
6772 - }
6773 - if (error?.response?.data?.code === 'batch_duplicated_label') {
6774 - const errorData = error?.response?.data?.data ?? {};
6775 - const count = Object.keys(errorData).length;
6776 - const name = count === 1 ? 'name' : 'names';
6777 - const duplicatedIds = Object.keys(errorData);
6778 - return {
6779 - field: 'label',
6780 - message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS(count, name),
6781 - severity: 'error',
6782 - IconComponent: _elementor_icons__WEBPACK_IMPORTED_MODULE_0__.AlertTriangleFilledIcon,
6783 - action: {
6784 - label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
6785 - message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
6786 - data: {
6787 - duplicatedIds
6788 - }
6789 - }
6790 - };
6791 - }
6792 - if (error?.response?.data?.code === 'batch_operation_failed') {
6793 - return {
6794 - field: 'label',
6795 - message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
6796 - severity: 'secondary',
6797 - IconComponent: _elementor_icons__WEBPACK_IMPORTED_MODULE_0__.InfoCircleFilledIcon,
6798 - action: {
6799 - message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE
6800 - }
6801 - };
6802 - }
6803 - return undefined;
6804 -};
6805 -const validateLabel = (name, variables) => {
6806 - if (!name.trim()) {
6807 - return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
6808 - }
6809 - const allowedChars = /^[a-zA-Z0-9_-]+$/;
6810 - if (!allowedChars.test(name)) {
6811 - return ERROR_MESSAGES.INVALID_CHARACTERS;
6812 - }
6813 - const hasAlphanumeric = /[a-zA-Z0-9]/;
6814 - if (!hasAlphanumeric.test(name)) {
6815 - return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
6816 - }
6817 - if (VARIABLE_LABEL_MAX_LENGTH < name.length) {
6818 - return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
6819 - }
6820 - if (Object.values(variables ?? {}).some(variable => variable.label === name)) {
6821 - return ERROR_MESSAGES.DUPLICATED_LABEL;
6822 - }
6823 - return '';
6824 -};
6825 -const labelHint = name => {
6826 - const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
6827 - if (hintThreshold < name.length) {
6828 - return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
6829 - }
6830 - return '';
6831 -};
6832 -const validateValue = value => {
6833 - if (!value.trim()) {
6834 - return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
6835 - }
6836 - return '';
6837 -};
6838 -
6839 -/***/ }),
6840 -
6841 -/***/ "./packages/packages/core/editor-variables/src/utils/variables-to-list.ts":
6842 -/*!********************************************************************************!*\
6843 - !*** ./packages/packages/core/editor-variables/src/utils/variables-to-list.ts ***!
6844 - \********************************************************************************/
6845 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6846 -
6847 -__webpack_require__.r(__webpack_exports__);
6848 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6849 -/* harmony export */ applySelectionFilters: function() { return /* binding */ applySelectionFilters; },
6850 -/* harmony export */ toNormalizedVariable: function() { return /* binding */ toNormalizedVariable; },
6851 -/* harmony export */ variablesToList: function() { return /* binding */ variablesToList; }
6852 -/* harmony export */ });
6853 -const variablesToList = variables => {
6854 - return Object.entries(variables).map(([key, variable]) => ({
6855 - key,
6856 - ...variable
6857 - }));
6858 -};
6859 -const toNormalizedVariable = ({
6860 - key,
6861 - label,
6862 - value,
6863 - order,
6864 - sync_to_v3: syncToV3
6865 -}) => ({
6866 - key,
6867 - label,
6868 - value,
6869 - order,
6870 - sync_to_v3: syncToV3
6871 -});
6872 -const applySelectionFilters = (variables, variableTypes) => {
6873 - const grouped = {};
6874 - variables.forEach(item => (grouped[item.type] ??= []).push(item));
6875 - return Object.entries(grouped).flatMap(([type, vars]) => {
6876 - const filter = variableTypes[type]?.selectionFilter;
6877 - const normalized = vars.map(toNormalizedVariable);
6878 - return (filter?.(normalized) ?? normalized).map(v => ({
6879 - ...v,
6880 - type
6881 - }));
6882 - });
6883 -};
6884 -
6885 -/***/ }),
6886 -
6887 -/***/ "./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts":
6888 -/*!*********************************************************************************************************!*\
6889 - !*** ./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts ***!
6890 - \*********************************************************************************************************/
6891 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6892 -
6893 -__webpack_require__.r(__webpack_exports__);
6894 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6895 -/* harmony export */ createVariableTypeRegistry: function() { return /* binding */ createVariableTypeRegistry; }
6896 -/* harmony export */ });
6897 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-canvas */ "@elementor/editor-canvas");
6898 -/* harmony import */ var _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__);
6899 -/* harmony import */ var _transformers_inheritance_transformer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../transformers/inheritance-transformer */ "./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx");
6900 -/* harmony import */ var _transformers_variable_transformer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../transformers/variable-transformer */ "./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts");
6901 -
6902 -
6903 -
6904 -function createVariableTypeRegistry() {
6905 - const variableTypes = {};
6906 - const registerVariableType = ({
6907 - key,
6908 - icon,
6909 - startIcon,
6910 - valueField,
6911 - propTypeUtil,
6912 - variableType,
6913 - defaultValue,
6914 - selectionFilter,
6915 - valueTransformer,
6916 - styleTransformer,
6917 - fallbackPropTypeUtil,
6918 - isCompatible,
6919 - emptyState,
6920 - isActive = true,
6921 - menuActionsFactory
6922 - }) => {
6923 - const variableTypeKey = key ?? propTypeUtil.key;
6924 - if (!isCompatible) {
6925 - isCompatible = (propType, variable) => {
6926 - if ('union' === propType.kind) {
6927 - if (variable.type in propType.prop_types) {
6928 - return true;
6929 - }
6930 - }
6931 - return false;
6932 - };
6933 - }
6934 - variableTypes[variableTypeKey] = {
6935 - icon,
6936 - startIcon,
6937 - valueField,
6938 - propTypeUtil,
6939 - variableType,
6940 - defaultValue,
6941 - selectionFilter,
6942 - valueTransformer,
6943 - fallbackPropTypeUtil,
6944 - isCompatible,
6945 - emptyState,
6946 - isActive,
6947 - menuActionsFactory
6948 - };
6949 - registerTransformer(propTypeUtil.key, styleTransformer);
6950 - registerInheritanceTransformer(propTypeUtil.key);
6951 - };
6952 - const registerTransformer = (key, transformer) => {
6953 - _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.styleTransformersRegistry.register(key, transformer ?? _transformers_variable_transformer__WEBPACK_IMPORTED_MODULE_2__.variableTransformer);
6954 - };
6955 - const registerInheritanceTransformer = key => {
6956 - _elementor_editor_canvas__WEBPACK_IMPORTED_MODULE_0__.stylesInheritanceTransformersRegistry.register(key, _transformers_inheritance_transformer__WEBPACK_IMPORTED_MODULE_1__.inheritanceTransformer);
6957 - };
6958 - const getVariableType = key => {
6959 - return variableTypes[key];
6960 - };
6961 - const getVariableTypes = () => {
6962 - return variableTypes;
6963 - };
6964 - const hasVariableType = key => {
6965 - return key in variableTypes && !!variableTypes[key].isActive;
6966 - };
6967 - return {
6968 - registerVariableType,
6969 - getVariableType,
6970 - getVariableTypes,
6971 - hasVariableType
6972 - };
6973 -}
6974 -
6975 -/***/ }),
6976 -
6977 -/***/ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts":
6978 -/*!**************************************************************************************************!*\
6979 - !*** ./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts ***!
6980 - \**************************************************************************************************/
6981 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6982 -
6983 -__webpack_require__.r(__webpack_exports__);
6984 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
6985 -/* harmony export */ getMenuActionsForVariable: function() { return /* binding */ getMenuActionsForVariable; },
6986 -/* harmony export */ getVariableType: function() { return /* binding */ getVariableType; },
6987 -/* harmony export */ getVariableTypes: function() { return /* binding */ getVariableTypes; },
6988 -/* harmony export */ hasVariableType: function() { return /* binding */ hasVariableType; },
6989 -/* harmony export */ registerVariableType: function() { return /* binding */ registerVariableType; }
6990 -/* harmony export */ });
6991 -/* harmony import */ var _create_variable_type_registry__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./create-variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts");
6992 -
6993 -const {
6994 - registerVariableType,
6995 - getVariableType,
6996 - getVariableTypes,
6997 - hasVariableType
6998 -} = (0,_create_variable_type_registry__WEBPACK_IMPORTED_MODULE_0__.createVariableTypeRegistry)();
6999 -function getMenuActionsForVariable(variableType, context) {
7000 - const typeOptions = getVariableType(variableType);
7001 - if (typeOptions?.menuActionsFactory) {
7002 - return typeOptions.menuActionsFactory(context);
7003 - }
7004 - return [];
7005 -}
7006 -
7007 -/***/ }),
7008 -
7009 -/***/ "@elementor/editor":
7010 -/*!*****************************************!*\
7011 - !*** external ["elementorV2","editor"] ***!
7012 - \*****************************************/
7013 -/***/ (function(module) {
7014 -
7015 -module.exports = window["elementorV2"]["editor"];
7016 -
7017 -/***/ }),
7018 -
7019 -/***/ "@elementor/editor-canvas":
7020 -/*!***********************************************!*\
7021 - !*** external ["elementorV2","editorCanvas"] ***!
7022 - \***********************************************/
7023 -/***/ (function(module) {
7024 -
7025 -module.exports = window["elementorV2"]["editorCanvas"];
7026 -
7027 -/***/ }),
7028 -
7029 -/***/ "@elementor/editor-controls":
7030 -/*!*************************************************!*\
7031 - !*** external ["elementorV2","editorControls"] ***!
7032 - \*************************************************/
7033 -/***/ (function(module) {
7034 -
7035 -module.exports = window["elementorV2"]["editorControls"];
7036 -
7037 -/***/ }),
7038 -
7039 -/***/ "@elementor/editor-current-user":
7040 -/*!****************************************************!*\
7041 - !*** external ["elementorV2","editorCurrentUser"] ***!
7042 - \****************************************************/
7043 -/***/ (function(module) {
7044 -
7045 -module.exports = window["elementorV2"]["editorCurrentUser"];
7046 -
7047 -/***/ }),
7048 -
7049 -/***/ "@elementor/editor-mcp":
7050 -/*!********************************************!*\
7051 - !*** external ["elementorV2","editorMcp"] ***!
7052 - \********************************************/
7053 -/***/ (function(module) {
7054 -
7055 -module.exports = window["elementorV2"]["editorMcp"];
7056 -
7057 -/***/ }),
7058 -
7059 -/***/ "@elementor/editor-panels":
7060 -/*!***********************************************!*\
7061 - !*** external ["elementorV2","editorPanels"] ***!
7062 - \***********************************************/
7063 -/***/ (function(module) {
7064 -
7065 -module.exports = window["elementorV2"]["editorPanels"];
7066 -
7067 -/***/ }),
7068 -
7069 -/***/ "@elementor/editor-props":
7070 -/*!**********************************************!*\
7071 - !*** external ["elementorV2","editorProps"] ***!
7072 - \**********************************************/
7073 -/***/ (function(module) {
7074 -
7075 -module.exports = window["elementorV2"]["editorProps"];
7076 -
7077 -/***/ }),
7078 -
7079 -/***/ "@elementor/editor-ui":
7080 -/*!*******************************************!*\
7081 - !*** external ["elementorV2","editorUi"] ***!
7082 - \*******************************************/
7083 -/***/ (function(module) {
7084 -
7085 -module.exports = window["elementorV2"]["editorUi"];
7086 -
7087 -/***/ }),
7088 -
7089 -/***/ "@elementor/editor-v1-adapters":
7090 -/*!***************************************************!*\
7091 - !*** external ["elementorV2","editorV1Adapters"] ***!
7092 - \***************************************************/
7093 -/***/ (function(module) {
7094 -
7095 -module.exports = window["elementorV2"]["editorV1Adapters"];
7096 -
7097 -/***/ }),
7098 -
7099 -/***/ "@elementor/events":
7100 -/*!*****************************************!*\
7101 - !*** external ["elementorV2","events"] ***!
7102 - \*****************************************/
7103 -/***/ (function(module) {
7104 -
7105 -module.exports = window["elementorV2"]["events"];
7106 -
7107 -/***/ }),
7108 -
7109 -/***/ "@elementor/http-client":
7110 -/*!*********************************************!*\
7111 - !*** external ["elementorV2","httpClient"] ***!
7112 - \*********************************************/
7113 -/***/ (function(module) {
7114 -
7115 -module.exports = window["elementorV2"]["httpClient"];
7116 -
7117 -/***/ }),
7118 -
7119 -/***/ "@elementor/icons":
7120 -/*!****************************************!*\
7121 - !*** external ["elementorV2","icons"] ***!
7122 - \****************************************/
7123 -/***/ (function(module) {
7124 -
7125 -module.exports = window["elementorV2"]["icons"];
7126 -
7127 -/***/ }),
7128 -
7129 -/***/ "@elementor/menus":
7130 -/*!****************************************!*\
7131 - !*** external ["elementorV2","menus"] ***!
7132 - \****************************************/
7133 -/***/ (function(module) {
7134 -
7135 -module.exports = window["elementorV2"]["menus"];
7136 -
7137 -/***/ }),
7138 -
7139 -/***/ "@elementor/schema":
7140 -/*!*****************************************!*\
7141 - !*** external ["elementorV2","schema"] ***!
7142 - \*****************************************/
7143 -/***/ (function(module) {
7144 -
7145 -module.exports = window["elementorV2"]["schema"];
7146 -
7147 -/***/ }),
7148 -
7149 -/***/ "@elementor/ui":
7150 -/*!*************************************!*\
7151 - !*** external ["elementorV2","ui"] ***!
7152 - \*************************************/
7153 -/***/ (function(module) {
7154 -
7155 -module.exports = window["elementorV2"]["ui"];
7156 -
7157 -/***/ }),
7158 -
7159 -/***/ "@elementor/utils":
7160 -/*!****************************************!*\
7161 - !*** external ["elementorV2","utils"] ***!
7162 - \****************************************/
7163 -/***/ (function(module) {
7164 -
7165 -module.exports = window["elementorV2"]["utils"];
7166 -
7167 -/***/ }),
7168 -
7169 -/***/ "@wordpress/i18n":
7170 -/*!******************************!*\
7171 - !*** external ["wp","i18n"] ***!
7172 - \******************************/
7173 -/***/ (function(module) {
7174 -
7175 -module.exports = window["wp"]["i18n"];
7176 -
7177 -/***/ }),
7178 -
7179 -/***/ "react":
7180 -/*!**************************!*\
7181 - !*** external ["React"] ***!
7182 - \**************************/
7183 -/***/ (function(module) {
7184 -
7185 -module.exports = window["React"];
7186 -
7187 -/***/ })
7188 -
7189 -/******/ });
7190 -/************************************************************************/
7191 -/******/ // The module cache
7192 -/******/ var __webpack_module_cache__ = {};
7193 -/******/
7194 -/******/ // The require function
7195 -/******/ function __webpack_require__(moduleId) {
7196 -/******/ // Check if module is in cache
7197 -/******/ var cachedModule = __webpack_module_cache__[moduleId];
7198 -/******/ if (cachedModule !== undefined) {
7199 -/******/ return cachedModule.exports;
7200 -/******/ }
7201 -/******/ // Create a new module (and put it into the cache)
7202 -/******/ var module = __webpack_module_cache__[moduleId] = {
7203 -/******/ // no module.id needed
7204 -/******/ // no module.loaded needed
7205 -/******/ exports: {}
7206 -/******/ };
7207 -/******/
7208 -/******/ // Execute the module function
7209 -/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
7210 -/******/
7211 -/******/ // Return the exports of the module
7212 -/******/ return module.exports;
7213 -/******/ }
7214 -/******/
7215 -/************************************************************************/
7216 -/******/ /* webpack/runtime/compat get default export */
7217 -/******/ !function() {
7218 -/******/ // getDefaultExport function for compatibility with non-harmony modules
7219 -/******/ __webpack_require__.n = function(module) {
7220 -/******/ var getter = module && module.__esModule ?
7221 -/******/ function() { return module['default']; } :
7222 -/******/ function() { return module; };
7223 -/******/ __webpack_require__.d(getter, { a: getter });
7224 -/******/ return getter;
7225 -/******/ };
7226 -/******/ }();
7227 -/******/
7228 -/******/ /* webpack/runtime/define property getters */
7229 -/******/ !function() {
7230 -/******/ // define getter functions for harmony exports
7231 -/******/ __webpack_require__.d = function(exports, definition) {
7232 -/******/ for(var key in definition) {
7233 -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
7234 -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
7235 -/******/ }
7236 -/******/ }
7237 -/******/ };
7238 -/******/ }();
7239 -/******/
7240 -/******/ /* webpack/runtime/hasOwnProperty shorthand */
7241 -/******/ !function() {
7242 -/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
7243 -/******/ }();
7244 -/******/
7245 -/******/ /* webpack/runtime/make namespace object */
7246 -/******/ !function() {
7247 -/******/ // define __esModule on exports
7248 -/******/ __webpack_require__.r = function(exports) {
7249 -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
7250 -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
7251 -/******/ }
7252 -/******/ Object.defineProperty(exports, '__esModule', { value: true });
7253 -/******/ };
7254 -/******/ }();
7255 -/******/
7256 -/************************************************************************/
7257 -var __webpack_exports__ = {};
7258 -// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
7259 -!function() {
7260 -/*!**************************************************************!*\
7261 - !*** ./packages/packages/core/editor-variables/src/index.ts ***!
7262 - \**************************************************************/
7263 -__webpack_require__.r(__webpack_exports__);
7264 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
7265 -/* harmony export */ GLOBAL_VARIABLES_URI: function() { return /* reexport safe */ _mcp_variables_resource__WEBPACK_IMPORTED_MODULE_2__.GLOBAL_VARIABLES_URI; },
7266 -/* harmony export */ Utils: function() { return /* binding */ Utils; },
7267 -/* harmony export */ VariablesManagerPanelEmbedded: function() { return /* reexport safe */ _components_variables_manager_variables_manager_panel__WEBPACK_IMPORTED_MODULE_0__.VariablesManagerPanelEmbedded; },
7268 -/* harmony export */ getMenuActionsForVariable: function() { return /* reexport safe */ _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__.getMenuActionsForVariable; },
7269 -/* harmony export */ hasVariable: function() { return /* reexport safe */ _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__.hasVariable; },
7270 -/* harmony export */ init: function() { return /* reexport safe */ _init__WEBPACK_IMPORTED_MODULE_1__.init; },
7271 -/* harmony export */ registerVariableType: function() { return /* reexport safe */ _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__.registerVariableType; },
7272 -/* harmony export */ registerVariableTypes: function() { return /* reexport safe */ _register_variable_types__WEBPACK_IMPORTED_MODULE_4__.registerVariableTypes; },
7273 -/* harmony export */ service: function() { return /* reexport safe */ _service__WEBPACK_IMPORTED_MODULE_5__.service; },
7274 -/* harmony export */ sizeVariablePropTypeUtil: function() { return /* reexport safe */ _prop_types_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_3__.sizeVariablePropTypeUtil; },
7275 -/* harmony export */ trackVariablesManagerEvent: function() { return /* reexport safe */ _utils_tracking__WEBPACK_IMPORTED_MODULE_8__.trackVariablesManagerEvent; }
7276 -/* harmony export */ });
7277 -/* harmony import */ var _components_variables_manager_variables_manager_panel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/variables-manager/variables-manager-panel */ "./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx");
7278 -/* harmony import */ var _init__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./init */ "./packages/packages/core/editor-variables/src/init.ts");
7279 -/* harmony import */ var _mcp_variables_resource__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mcp/variables-resource */ "./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");
7280 -/* harmony import */ var _prop_types_size_variable_prop_type__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./prop-types/size-variable-prop-type */ "./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts");
7281 -/* harmony import */ var _register_variable_types__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./register-variable-types */ "./packages/packages/core/editor-variables/src/register-variable-types.tsx");
7282 -/* harmony import */ var _service__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./service */ "./packages/packages/core/editor-variables/src/service.ts");
7283 -/* harmony import */ var _variables_registry_variable_type_registry__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./variables-registry/variable-type-registry */ "./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");
7284 -/* harmony import */ var _hooks_use_prop_variables__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./hooks/use-prop-variables */ "./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");
7285 -/* harmony import */ var _utils_tracking__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/tracking */ "./packages/packages/core/editor-variables/src/utils/tracking.ts");
7286 -/* harmony import */ var _utils_llm_propvalue_label_resolver__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./utils/llm-propvalue-label-resolver */ "./packages/packages/core/editor-variables/src/utils/llm-propvalue-label-resolver.ts");
7287 -
7288 -
7289 -
7290 -
7291 -
7292 -
7293 -
7294 -
7295 -
7296 -
7297 -const Utils = {
7298 - globalVariablesLLMResolvers: _utils_llm_propvalue_label_resolver__WEBPACK_IMPORTED_MODULE_9__.globalVariablesLLMResolvers
7299 -};
7300 -}();
7301 -(window.elementorV2 = window.elementorV2 || {}).editorVariables = __webpack_exports__;
7302 -/******/ })()
7303 -;
7304 -window.elementorV2.editorVariables?.init?.();
1 +/*! For license information please see editor-variables.js.LICENSE.txt */
2 +!function(){"use strict";var e={"./packages/packages/core/editor-variables/src/api.ts":function(e,a,r){r.r(a),r.d(a,{apiClient:function(){return o}});var t=r("@elementor/http-client");const n="elementor/v1/variables",o={list:()=>(0,t.httpService)().get(n+"/list"),create:(e,a,r)=>(0,t.httpService)().post(n+"/create",{type:e,label:a,value:r}),update:(e,a,r,o)=>(0,t.httpService)().put(n+"/update",{id:e,label:a,value:r,type:o}),delete:e=>(0,t.httpService)().post(n+"/delete",{id:e}),restore:(e,a,r,o)=>{const i={id:e};return a&&(i.label=a),r&&(i.value=r),o&&(i.type=o),(0,t.httpService)().post(n+"/restore",i)},batch:e=>(0,t.httpService)().post(n+"/batch",e)}},"./packages/packages/core/editor-variables/src/batch-operations.ts":function(e,a,r){r.r(a),r.d(a,{buildOperationsArray:function(){return buildOperationsArray},generateTempId:function(){return generateTempId},isTempId:function(){return isTempId}});const generateTempId=()=>`tmp-${Date.now().toString(36)}-${Math.random().toString(36).substring(2,8)}`,isTempId=e=>e.startsWith("tmp-"),buildOperationsArray=(e,a,r)=>{const t=[];return Object.entries(a).forEach(([a,r])=>{if(isTempId(a))t.push({type:"create",variable:{...r,id:a}});else if(e[a]){const n=e[a],o=n.sync_to_v3!==r.sync_to_v3;n.deleted&&!r.deleted?t.push({type:"restore",id:a,...n.label!==r.label&&{label:r.label},...n.value!==r.value&&{value:r.value}}):r.deleted||n.label===r.label&&n.value===r.value&&n.order===r.order&&n.type===r.type&&!o||t.push({type:"update",id:a,variable:{...n.label!==r.label&&{label:r.label},...n.value!==r.value&&{value:r.value},...n.order!==r.order&&{order:r.order},...n.type!==r.type&&{type:r.type},...o&&{sync_to_v3:r.sync_to_v3}}})}}),r.forEach(e=>{t.push({type:"delete",id:e})}),t.filter(e=>{const r=e.id||e.variable?.id;return r&&!(isTempId(r)&&a[r]?.deleted)})}},"./packages/packages/core/editor-variables/src/components/fields/color-field.tsx":function(e,a,r){r.r(a),r.d(a,{ColorField:function(){return ColorField}});var t=r("react"),n=r("@elementor/ui"),o=r("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),i=r("./packages/packages/core/editor-variables/src/utils/validations.ts");const ColorField=({value:e,onChange:a,onValidationChange:r})=>{const[s,l]=(0,t.useState)(e),[c,p]=(0,t.useState)(""),u=(0,t.useRef)(null),d=(0,o.usePopoverContentRef)()??u.current;return t.createElement(n.UnstableColorField,{id:"color-variable-field",size:"tiny",fullWidth:!0,value:s,onChange:e=>{l(e);const t=(0,i.validateValue)(e);p(t),r?.(t),a(t?"":e)},error:c||void 0,slotProps:{colorPicker:{anchorEl:d,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-10},slotProps:{colorIndicator:{size:"inherit",sx:{borderRadius:.5}}}}}})}},"./packages/packages/core/editor-variables/src/components/fields/font-field.tsx":function(e,a,r){r.r(a),r.d(a,{FontField:function(){return FontField}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-ui"),i=r("@elementor/icons"),s=r("@elementor/ui"),l=r("@wordpress/i18n"),c=r("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),p=r("./packages/packages/core/editor-variables/src/utils/validations.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const FontField=({value:e,onChange:a,onValidationChange:r})=>{const[u,d]=(0,t.useState)(e),b=(0,t.useRef)(null),m=(0,c.usePopoverContentRef)()??b.current,v=(0,s.usePopupState)({variant:"popover"}),g=(0,n.useFontFamilies)(),k=(0,o.useSectionWidth)(),f=t.useMemo(()=>g.map(({label:e,fonts:a})=>({label:e,items:a})),[g]),y=(0,t.useId)();return t.createElement(t.Fragment,null,t.createElement(s.UnstableTag,_extends({id:y,variant:"outlined",label:u,endIcon:t.createElement(i.ChevronDownIcon,{fontSize:"tiny"})},(0,s.bindTrigger)(v),{fullWidth:!0})),t.createElement(s.Popover,_extends({disablePortal:!0,disableScrollLock:!0,anchorEl:m,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-28}},(0,s.bindPopover)(v)),t.createElement(n.ItemSelector,{id:"font-family-variables-selector",itemsList:f,selectedItem:u,onItemChange:e=>{(e=>{d(e);const t=(0,p.validateValue)(e);r?.(t),a(t?"":e)})(e),v.close()},onClose:v.close,sectionWidth:k,title:(0,l.__)("Font family","elementor"),itemStyle:e=>({fontFamily:e.value}),onDebounce:n.enqueueFont,icon:i.TextIcon})))}},"./packages/packages/core/editor-variables/src/components/fields/label-field.tsx":function(e,a,r){r.r(a),r.d(a,{LabelField:function(){return LabelField},useLabelError:function(){return useLabelError}});var t=r("react"),n=r("@elementor/editor-ui"),o=r("@elementor/ui"),i=r("./packages/packages/core/editor-variables/src/utils/validations.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}function isLabelEqual(e,a){return e.trim().toLowerCase()===a.trim().toLowerCase()}const useLabelError=e=>{const[a,r]=(0,t.useState)(e??{value:"",message:""});return{labelFieldError:a,setLabelFieldError:r}},LabelField=({value:e,error:a,onChange:r,id:s,onErrorChange:l,size:c="tiny",focusOnShow:p=!1,selectOnShow:u=!1,showWarningInfotip:d=!1,variables:b,onKeyDown:m})=>{const[v,g]=(0,t.useState)(e),[k,f]=(0,t.useState)(""),y=(0,t.useRef)(null);let h=k;isLabelEqual(v,a?.value??"")&&a?.message&&(h=a.message);const E=h?"":(0,i.labelHint)(v),_=t.createElement(o.TextField,{ref:y,id:s,size:c,fullWidth:!0,value:v,error:!!h,onChange:e=>(e=>{g(e);const t=(0,i.validateLabel)(e,b);f(t),l?.(t),r(isLabelEqual(e,a?.value??"")||t?"":e)})(e.target.value),inputProps:{maxLength:i.VARIABLE_LABEL_MAX_LENGTH,...u&&{onFocus:e=>e.target.select()},"aria-label":"Name",onKeyDown:m},autoFocus:p});if(d){const e=Math.max(240,y.current?.getBoundingClientRect().width??240);return t.createElement(n.WarningInfotip,_extends({open:Boolean(h||E),text:h||E,placement:"bottom-start",width:e,offset:[0,-15]},E&&{hasError:!1}),_)}return _}},"./packages/packages/core/editor-variables/src/components/global-styles-import-listener.tsx":function(e,a,r){r.r(a),r.d(a,{GlobalStylesImportListener:function(){return GlobalStylesImportListener}});var t=r("react"),n=r("./packages/packages/core/editor-variables/src/service.ts"),o=r("./packages/packages/core/editor-variables/src/style-variables-repository.ts");function GlobalStylesImportListener(){return(0,t.useEffect)(()=>{const handleGlobalStylesImported=e=>{const a=e.detail?.global_variables;a&&(a.data&&"object"==typeof a.data&&o.styleVariablesRepository.update(a.data),n.service.load())};return window.addEventListener("elementor/global-styles/imported",handleGlobalStylesImported),()=>{window.removeEventListener("elementor/global-styles/imported",handleGlobalStylesImported)}},[]),null}},"./packages/packages/core/editor-variables/src/components/open-panel-from-event.tsx":function(e,a,r){r.r(a),r.d(a,{OpenPanelFromEvent:function(){return OpenPanelFromEvent}});var t=r("react"),n=r("@elementor/editor-v1-adapters"),o=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx");const i="elementor/open-variables-manager",s="panel/elements/categories";function OpenPanelFromEvent(){const{open:e}=(0,o.usePanelActions)(),a=(0,t.useRef)(!1),[r,l]=(0,t.useState)(!1);return(0,t.useEffect)(()=>{r&&(l(!1),e())},[r,e]),(0,t.useEffect)(()=>(0,n.__privateListenTo)((0,n.routeOpenEvent)(s),()=>{a.current&&(a.current=!1,l(!0))}),[]),(0,t.useEffect)(()=>{const handler=()=>{a.current=!0,(0,n.__privateOpenRoute)(s)};return window.addEventListener(i,handler),()=>window.removeEventListener(i,handler)},[]),null}},"./packages/packages/core/editor-variables/src/components/open-panel-from-url.tsx":function(e,a,r){r.r(a),r.d(a,{OpenPanelFromUrl:function(){return OpenPanelFromUrl}});var t=r("react"),n=r("@elementor/editor-v1-adapters"),o=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx");const i="active-panel",s="variables-manager",l="panel/elements";function OpenPanelFromUrl(){const{open:e}=(0,o.usePanelActions)(),a=(0,t.useRef)(!1);return(0,t.useEffect)(()=>{if(new URLSearchParams(window.location.search).get(i)!==s)return;return(0,n.__privateListenTo)((0,n.routeOpenEvent)(l),()=>{a.current||(a.current=!0,requestAnimationFrame(()=>{e()}))})},[e]),null}},"./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx":function(e,a,r){r.r(a),r.d(a,{ColorIndicator:function(){return n}});var t=r("@elementor/ui");const n=(0,t.styled)(t.UnstableColorIndicator)(({theme:e})=>({borderRadius:e.shape.borderRadius/2+"px",marginRight:e.spacing(.25)}))},"./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx":function(e,a,r){r.r(a),r.d(a,{DeleteConfirmationDialog:function(){return DeleteConfirmationDialog}});var t=r("react"),n=r("@elementor/editor-ui"),o=r("@elementor/ui"),i=r("@wordpress/i18n");const DeleteConfirmationDialog=({open:e,label:a,closeDialog:r,onConfirm:s})=>t.createElement(n.ConfirmationDialog,{open:e,onClose:r},t.createElement(n.ConfirmationDialog.Title,null,(0,i.__)("Delete this variable?","elementor")),t.createElement(n.ConfirmationDialog.Content,null,t.createElement(n.ConfirmationDialog.ContentText,null,(0,i.__)("All elements using","elementor")," ",t.createElement(o.Typography,{variant:"subtitle2",component:"span",sx:{lineBreak:"anywhere"}},a)," ",(0,i.__)("will keep their current values, but the variable itself will be removed.","elementor"))),t.createElement(n.ConfirmationDialog.Actions,{onClose:r,onConfirm:s}))},"./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx":function(e,a,r){r.r(a),r.d(a,{DeletedVariableAlert:function(){return DeletedVariableAlert}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n");const DeletedVariableAlert=({onClose:e,onUnlink:a,onRestore:r,label:i})=>t.createElement(n.ClickAwayListener,{onClickAway:e},t.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:t.createElement(t.Fragment,null,a&&t.createElement(n.AlertAction,{variant:"contained",onClick:a},(0,o.__)("Unlink","elementor")),r&&t.createElement(n.AlertAction,{variant:"outlined",onClick:r},(0,o.__)("Restore","elementor"))),sx:{maxWidth:300}},t.createElement(n.AlertTitle,null,(0,o.__)("Deleted variable","elementor")),t.createElement(n.Typography,{variant:"body2",color:"textPrimary"},(0,o.__)("The variable","elementor")," '",t.createElement(n.Typography,{variant:"body2",component:"span",sx:{lineBreak:"anywhere"}},i),"' ",(0,o.__)("has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.","elementor"))))},"./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx":function(e,a,r){r.r(a),r.d(a,{EDIT_CONFIRMATION_DIALOG_ID:function(){return s},EditConfirmationDialog:function(){return EditConfirmationDialog}});var t=r("react"),n=r("@elementor/icons"),o=r("@elementor/ui"),i=r("@wordpress/i18n");const s="edit-confirmation-dialog",EditConfirmationDialog=({closeDialog:e,onConfirm:a,onSuppressMessage:r})=>{const[s,l]=(0,t.useState)(!1);return t.createElement(o.Dialog,{open:!0,onClose:e,maxWidth:"xs"},t.createElement(o.DialogTitle,{display:"flex",alignItems:"center",gap:1},t.createElement(n.AlertTriangleFilledIcon,{color:"secondary"}),(0,i.__)("Changes to variables go live right away.","elementor")),t.createElement(o.DialogContent,null,t.createElement(o.DialogContentText,{variant:"body2",color:"textPrimary"},(0,i.__)("Don't worry - all other changes you make will wait until you publish your site.","elementor"))),t.createElement(o.DialogActions,{sx:{justifyContent:"space-between",alignItems:"center"}},t.createElement(o.FormControlLabel,{control:t.createElement(o.Checkbox,{checked:s,onChange:e=>l(e.target.checked),size:"small"}),label:t.createElement(o.Typography,{variant:"body2"},(0,i.__)("Don't show me again","elementor"))}),t.createElement("div",null,t.createElement(o.Button,{color:"secondary",onClick:e},(0,i.__)("Keep editing","elementor")),t.createElement(o.Button,{variant:"contained",color:"secondary",onClick:()=>{s&&r?.(),a?.()},sx:{ml:1}},(0,i.__)("Save","elementor")))))}},"./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx":function(e,a,r){r.r(a),r.d(a,{EmptyState:function(){return EmptyState}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n"),i=r("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");const EmptyState=({icon:e,title:a,message:r,onAdd:s,children:l})=>{const c=(0,i.usePermissions)().canAdd(),p=c?a:(0,o.__)("There are no variables","elementor"),u=c?r:(0,o.__)("With your current role, you can only connect and detach variables.","elementor");return t.createElement(Content,{title:p,message:u,icon:e},l||s&&t.createElement(n.Button,{variant:"outlined",color:"secondary",size:"small",onClick:s},(0,o.__)("Create a variable","elementor")))};function Content({title:e,message:a,icon:r,children:o}){return t.createElement(n.Stack,{gap:1,alignItems:"center",justifyContent:"flex-start",height:"100%",color:"text.secondary",sx:{p:2.5,pt:8,pb:5.5}},r,t.createElement(n.Typography,{align:"center",variant:"subtitle2"},e),t.createElement(n.Typography,{align:"center",variant:"caption",maxWidth:"180px"},a),o)}},"./packages/packages/core/editor-variables/src/components/ui/form-field.tsx":function(e,a,r){r.r(a),r.d(a,{FormField:function(){return FormField}});var t=r("react"),n=r("@elementor/ui");const FormField=({id:e,label:a,errorMsg:r,noticeMsg:o,children:i})=>t.createElement(n.Grid,{container:!0,gap:.75,alignItems:"center"},t.createElement(n.Grid,{item:!0,xs:12},t.createElement(n.FormLabel,{htmlFor:e,size:"tiny"},a)),t.createElement(n.Grid,{item:!0,xs:12},i,r&&t.createElement(n.FormHelperText,{error:!0},r),o&&t.createElement(n.FormHelperText,null,o)))},"./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx":function(e,a,r){r.r(a),r.d(a,{MenuItemContent:function(){return MenuItemContent}});var t=r("react"),n=r("@elementor/editor-ui"),o=r("@elementor/icons"),i=r("@elementor/ui"),s=r("@wordpress/i18n");const l=(0,s.__)("Edit variable","elementor"),MenuItemContent=({item:e,disabled:a=!1})=>{const r=e.onEdit;return t.createElement(t.Fragment,null,t.createElement(i.ListItemIcon,{sx:{color:a?"text.disabled":"inherit"}},e.icon),t.createElement(i.Box,{sx:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:1}},t.createElement(n.EllipsisWithTooltip,{title:e.label||e.value,as:i.Typography,variant:"caption",color:a?"text.disabled":"text.primary",sx:{marginTop:"1px",lineHeight:"2"},maxWidth:"50%"}),e.secondaryText&&t.createElement(n.EllipsisWithTooltip,{title:e.secondaryText,as:i.Typography,variant:"caption",color:a?"text.disabled":"text.tertiary",sx:{marginTop:"1px",lineHeight:"1"},maxWidth:"50%"})),!!r&&!a&&t.createElement(i.Tooltip,{placement:"top",title:l},t.createElement(i.IconButton,{sx:{mx:1,opacity:"0"},onClick:a=>{a.stopPropagation(),r(e.value)},"aria-label":l},t.createElement(o.EditIcon,{color:"action",fontSize:"tiny"}))))}},"./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx":function(e,a,r){r.r(a),r.d(a,{MismatchVariableAlert:function(){return MismatchVariableAlert}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n");const i={title:(0,o.__)("Variable has changed","elementor"),message:(0,o.__)("This variable is no longer compatible with this property. You can clear it or select a different one.","elementor"),buttons:{clear:(0,o.__)("Clear","elementor"),select:(0,o.__)("Select variable","elementor")}},MismatchVariableAlert=({onClose:e,onClear:a,triggerSelect:r})=>t.createElement(n.ClickAwayListener,{onClickAway:e},t.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:t.createElement(t.Fragment,null,a&&t.createElement(n.AlertAction,{variant:"contained",onClick:a},i.buttons.clear),r&&t.createElement(n.AlertAction,{variant:"outlined",onClick:r},i.buttons.select)),sx:{maxWidth:300}},t.createElement(n.AlertTitle,null,i.title),t.createElement(n.Typography,{variant:"body2",color:"textPrimary"},i.message)))},"./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx":function(e,a,r){r.r(a),r.d(a,{MissingVariableAlert:function(){return MissingVariableAlert}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n");const MissingVariableAlert=({onClose:e,onClear:a})=>t.createElement(n.ClickAwayListener,{onClickAway:e},t.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:t.createElement(t.Fragment,null,a&&t.createElement(n.AlertAction,{variant:"contained",onClick:a},(0,o.__)("Clear","elementor"))),sx:{maxWidth:300}},t.createElement(n.AlertTitle,null,(0,o.__)("This variable is missing","elementor")),t.createElement(n.Typography,{variant:"body2",color:"textPrimary"},(0,o.__)("It may have been deleted. Try clearing this field and select a different value or variable.","elementor"))))},"./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx":function(e,a,r){r.r(a),r.d(a,{NoSearchResults:function(){return NoSearchResults}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n");const NoSearchResults=({searchValue:e,onClear:a,icon:r})=>t.createElement(n.Stack,{gap:1,alignItems:"center",justifyContent:"center",p:2.5,color:"text.secondary",sx:{pb:3.5,pt:8}},r,t.createElement(n.Typography,{align:"center",variant:"subtitle2"},(0,o.__)("Sorry, nothing matched","elementor"),t.createElement("br",null),"“",e,"”."),t.createElement(n.Typography,{align:"center",variant:"caption",sx:{display:"flex",flexDirection:"column"}},(0,o.__)("Try something else.","elementor"),t.createElement(n.Link,{color:"text.secondary",variant:"caption",component:"button",onClick:a},(0,o.__)("Clear & try again","elementor"))))},"./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx":function(e,a,r){r.r(a),r.d(a,{VariablesStyledMenuList:function(){return n}});var t=r("@elementor/ui");const n=(0,t.styled)(t.MenuList)(({theme:e,disabled:a})=>({"& > li":{height:32,width:"100%",display:"flex",alignItems:"center"},'& > [role="option"]':{...e.typography.caption,lineHeight:"inherit",padding:e.spacing(.5,1,.5,2),...!a&&{"&:hover, &:focus":{backgroundColor:e.palette.action.hover},cursor:"pointer"},'&[aria-selected="true"]':{backgroundColor:e.palette.action.selected},textOverflow:"ellipsis",position:"absolute",top:0,left:0,"&:hover .MuiIconButton-root, .MuiIconButton-root:focus":{opacity:1}},width:"100%",position:"relative"}))},"./packages/packages/core/editor-variables/src/components/ui/tags/assigned-tag.tsx":function(e,a,r){r.r(a),r.d(a,{AssignedTag:function(){return AssignedTag},SIZE:function(){return s}});var t=r("react"),n=r("@elementor/icons"),o=r("@elementor/ui"),i=r("@wordpress/i18n");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const s="tiny",l=(0,i.__)("Unlink variable","elementor"),AssignedTag=({startIcon:e,label:a,onUnlink:r,...i})=>{const c=[];return r&&c.push(t.createElement(o.Tooltip,{key:"unlink",title:l,placement:"bottom"},t.createElement(o.IconButton,{size:s,onClick:r,"aria-label":l},t.createElement(n.DetachIcon,{fontSize:s})))),t.createElement(o.Tooltip,{title:a,placement:"top"},t.createElement(o.UnstableTag,_extends({fullWidth:!0,showActionsOnHover:!0,startIcon:t.createElement(o.Stack,{gap:.5,direction:"row",alignItems:"center"},e),label:t.createElement(o.Box,{sx:{display:"inline-grid",minWidth:0}},t.createElement(o.Typography,{sx:{lineHeight:1.34},variant:"caption",noWrap:!0},a)),actions:c},i)))}},"./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx":function(e,a,r){r.r(a),r.d(a,{WarningVariableTag:function(){return i}});var t=r("react"),n=r("@elementor/icons"),o=r("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const i=t.forwardRef(({label:e,suffix:a,onClick:r,icon:i,...s},l)=>{const c=a?`${e} (${a})`:e;return t.createElement(o.Chip,_extends({ref:l,size:"tiny",color:"warning",shape:"rounded",variant:"standard",onClick:r,icon:t.createElement(n.AlertTriangleFilledIcon,null),label:t.createElement(o.Tooltip,{title:c,placement:"top"},t.createElement(o.Box,{sx:{display:"inline-grid",minWidth:0}},t.createElement(o.Typography,{variant:"caption",noWrap:!0,sx:{lineHeight:1.34}},c))),sx:{height:e=>e.spacing(3.5),borderRadius:e=>e.spacing(1),justifyContent:"flex-start",width:"100%"}},s))});i.displayName="WarningVariableTag"},"./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx":function(e,a,r){r.r(a),r.d(a,{VariablePromotionChip:function(){return c}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-ui"),i=r("@elementor/ui"),s=r("@elementor/utils"),l=r("@wordpress/i18n");const c=(0,t.forwardRef)(({variableType:e,upgradeUrl:a,trackingData:r},c)=>{const[p,u]=(0,t.useState)(!1);(0,o.useCanvasClickHandler)(p,()=>u(!1));const d=(0,t.useCallback)(()=>{u(e=>(e||(0,n.trackViewPromotion)(r),!e))},[r]);(0,t.useImperativeHandle)(c,()=>({toggle:d}),[d]);const b=(0,l.sprintf)((0,l.__)("%s variables","elementor"),(0,s.capitalize)(e)),m=(0,l.sprintf)((0,l.__)("Upgrade to continue creating and editing %s variables.","elementor"),e);return t.createElement(o.PromotionPopover,{open:p,title:b,content:m,ctaText:(0,l.__)("Upgrade now","elementor"),ctaUrl:a,onClose:e=>{e.stopPropagation(),u(!1)},onCtaClick:()=>(0,n.trackUpgradePromotionClick)(r)},t.createElement(i.Box,{onClick:e=>{e.stopPropagation(),d()},sx:{cursor:"pointer",display:"inline-flex"}},t.createElement(o.PromotionChip,null)))})},"./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx":function(e,a,r){r.r(a),r.d(a,{AssignedVariable:function(){return AssignedVariable}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/icons"),i=r("@elementor/ui"),s=r("./packages/packages/core/editor-variables/src/utils/unlink-variable.ts"),l=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),c=r("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),p=r("./packages/packages/core/editor-variables/src/components/ui/tags/assigned-tag.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const AssignedVariable=({variable:e,propTypeKey:a})=>{const{startIcon:r,propTypeUtil:u}=(0,l.getVariableType)(a),{setValue:d}=(0,n.useBoundProp)(),b=(0,t.useRef)(null),m=(0,t.useId)(),v=(0,i.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${m}`}),g=(0,s.createUnlinkHandler)(e,a,d),k=r||(()=>null);return t.createElement(i.Box,{ref:b},t.createElement(p.AssignedTag,_extends({label:e.label,startIcon:t.createElement(t.Fragment,null,t.createElement(o.ColorFilterIcon,{fontSize:p.SIZE}),t.createElement(k,{value:e.value})),onUnlink:g},(0,i.bindTrigger)(v))),t.createElement(i.Popover,_extends({disableScrollLock:!0,anchorEl:b.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,i.bindPopover)(v)),t.createElement(c.VariableSelectionPopover,{selectedVariable:e,closePopover:v.close,propTypeKey:u.key})))}},"./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx":function(e,a,r){r.r(a),r.d(a,{DeletedVariable:function(){return DeletedVariable}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/ui"),i=r("@wordpress/i18n"),s=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),l=r("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),c=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),p=r("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),u=r("./packages/packages/core/editor-variables/src/utils/unlink-variable.ts"),d=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),b=r("./packages/packages/core/editor-variables/src/components/variable-restore.tsx"),m=r("./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx"),v=r("./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const DeletedVariable=({variable:e,propTypeKey:a})=>{const{propTypeUtil:r}=(0,d.getVariableType)(a),g=(0,n.useBoundProp)(),k=(0,l.usePermissions)(),[f,y]=(0,t.useState)(!1),closeInfotip=()=>y(!1),h=(0,t.useRef)(null),E=(0,t.useId)(),_=(0,o.usePopupState)({variant:"popover",popupId:`elementor-variables-restore-${E}`}),C={};k.canUnlink()&&(C.onUnlink=(0,u.createUnlinkHandler)(e,a,g.setValue)),k.canRestore()&&(C.onRestore=()=>{e.key&&(0,c.restoreVariable)(e.key).then(e=>{(0,p.resolveBoundPropAndSetValue)(r.create(e),g),closeInfotip()}).catch(()=>{closeInfotip(),_.setAnchorEl(h.current),_.open()})});return t.createElement(t.Fragment,null,t.createElement(o.Box,{ref:h},f&&t.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),t.createElement(o.Infotip,{color:"warning",placement:"right-start",open:f,disableHoverListener:!0,onClose:closeInfotip,content:t.createElement(m.DeletedVariableAlert,{onClose:closeInfotip,onUnlink:C.onUnlink,onRestore:C.onRestore,label:e.label}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},t.createElement(v.WarningVariableTag,{label:e.label,onClick:()=>y(e=>!e),suffix:(0,i.__)("deleted","elementor")})),t.createElement(o.Popover,_extends({disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,o.bindPopover)(_)),t.createElement(s.VariableTypeProvider,{propTypeKey:a},t.createElement(b.VariableRestore,{variableId:e.key??"",onClose:_.close,onSubmit:()=>{_.close()}})))))}},"./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx":function(e,a,r){r.r(a),r.d(a,{MismatchVariable:function(){return MismatchVariable}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/ui"),i=r("@wordpress/i18n"),s=r("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),l=r("./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx"),c=r("./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const MismatchVariable=({variable:e})=>{const{setValue:a,value:r}=(0,n.useBoundProp)(),p=(0,t.useRef)(null),u=(0,t.useId)(),d=(0,o.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${u}`}),[b,m]=(0,t.useState)(!1),closeInfotip=()=>m(!1),v=!!r;return t.createElement(o.Box,{ref:p},b&&t.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),t.createElement(o.Infotip,{color:"warning",placement:"right-start",open:b,disableHoverListener:!0,onClose:closeInfotip,content:t.createElement(l.MismatchVariableAlert,{onClose:closeInfotip,onClear:v?()=>{closeInfotip(),a(null)}:void 0,triggerSelect:()=>{closeInfotip(),d.setAnchorEl(p.current),d.open()}}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},t.createElement(c.WarningVariableTag,{label:e.label,onClick:()=>m(e=>!e),suffix:(0,i.__)("changed","elementor")})),t.createElement(o.Popover,_extends({disableScrollLock:!0,anchorEl:p.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,o.bindPopover)(d)),t.createElement(s.VariableSelectionPopover,{selectedVariable:e,closePopover:d.close,propTypeKey:e.type})))}},"./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx":function(e,a,r){r.r(a),r.d(a,{MissingVariable:function(){return MissingVariable}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/ui"),i=r("@wordpress/i18n"),s=r("./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx"),l=r("./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");const MissingVariable=()=>{const{setValue:e}=(0,n.useBoundProp)(),[a,r]=(0,t.useState)(!1),closeInfotip=()=>r(!1);return t.createElement(t.Fragment,null,a&&t.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),t.createElement(o.Infotip,{color:"warning",placement:"right-start",open:a,disableHoverListener:!0,onClose:closeInfotip,content:t.createElement(s.MissingVariableAlert,{onClose:closeInfotip,onClear:()=>e(null)}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},t.createElement(l.WarningVariableTag,{label:(0,i.__)("Missing variable","elementor"),onClick:()=>r(e=>!e)})))}},"./packages/packages/core/editor-variables/src/components/variable-creation.tsx":function(e,a,r){r.r(a),r.d(a,{VariableCreation:function(){return VariableCreation}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-ui"),i=r("@elementor/icons"),s=r("@elementor/ui"),l=r("@wordpress/i18n"),c=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),p=r("./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts"),u=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),d=r("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),b=r("./packages/packages/core/editor-variables/src/utils/tracking.ts"),m=r("./packages/packages/core/editor-variables/src/utils/validations.ts"),v=r("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),g=r("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const k="tiny",VariableCreation=({onGoBack:e,onClose:a})=>{const{icon:r,valueField:f,variableType:y,propTypeUtil:h}=(0,c.useVariableType)(),{setVariableValue:E,path:_}=(0,d.useVariableBoundProp)(),{propType:C}=(0,n.useBoundProp)(),x=(0,p.useInitialValue)(),[T,V]=(0,t.useState)(x),[S,w]=(0,t.useState)(""),[P,I]=(0,t.useState)(""),[A,R]=(0,t.useState)(""),[L,O]=(0,t.useState)(h.key),{labelFieldError:D,setLabelFieldError:B}=(0,v.useLabelError)(),closePopover=()=>{V(""),w(""),I(""),R(""),a()},handleCreateAndTrack=()=>{(0,u.createVariable)({value:T,label:S,type:L}).then(e=>{E(e),closePopover()}).catch(e=>{const a=(0,m.mapServerError)(e);if(a&&"label"===a.field)return w(""),void B({value:S,message:a.message});I(m.ERROR_MESSAGES.UNEXPECTED_ERROR)}),(0,b.trackVariableEvent)({varType:y,controlPath:_.join("."),action:"save"})},M=""===S.trim()||("string"==typeof T?""===T.trim():!1===Boolean(T))||!!P,handleKeyDown=e=>{"Enter"!==e.key||M||(e.preventDefault(),handleCreateAndTrack())};return t.createElement(o.SectionPopoverBody,{height:"auto"},t.createElement(o.PopoverHeader,{icon:t.createElement(t.Fragment,null,e&&t.createElement(s.IconButton,{size:k,"aria-label":(0,l.__)("Go Back","elementor"),onClick:e},t.createElement(i.ArrowLeftIcon,{fontSize:k})),t.createElement(r,{fontSize:k})),title:(0,l.__)("Create variable","elementor"),onClose:closePopover}),t.createElement(s.Divider,null),t.createElement(n.PopoverContent,{p:2},t.createElement(g.FormField,{id:"variable-label",label:(0,l.__)("Name","elementor"),errorMsg:D?.message,noticeMsg:(0,m.labelHint)(S)},t.createElement(v.LabelField,{id:"variable-label",value:S,error:D,onChange:e=>{w(e),I("")},onErrorChange:e=>{B({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),f&&t.createElement(g.FormField,{errorMsg:A,label:(0,l.__)("Value","elementor")},t.createElement(s.Typography,{variant:"h5",id:"variable-value-wrapper"},t.createElement(f,{value:T,onPropTypeKeyChange:e=>O(e),onChange:e=>{V(e),I(""),R("")},onValidationChange:R,propType:C,onKeyDown:handleKeyDown}))),P&&t.createElement(s.FormHelperText,{error:!0},P)),t.createElement(s.CardActions,{sx:{pt:.5,pb:1}},t.createElement(s.Button,{id:"create-variable-button",size:"small",variant:"contained",disabled:M,onClick:handleCreateAndTrack},(0,l.__)("Create","elementor"))))}},"./packages/packages/core/editor-variables/src/components/variable-edit.tsx":function(e,a,r){r.r(a),r.d(a,{VariableEdit:function(){return VariableEdit}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-current-user"),i=r("@elementor/editor-ui"),s=r("@elementor/icons"),l=r("@elementor/ui"),c=r("@wordpress/i18n"),p=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),u=r("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),d=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),b=r("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),m=r("./packages/packages/core/editor-variables/src/style-variables-repository.ts"),v=r("./packages/packages/core/editor-variables/src/utils/validations.ts"),g=r("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),k=r("./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx"),f=r("./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx"),y=r("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const h="tiny",E=(0,c.__)("Delete variable","elementor"),VariableEdit=({onClose:e,onGoBack:a,onSubmit:r,editId:_})=>{const{icon:C,valueField:x,variableType:T,propTypeUtil:V}=(0,p.useVariableType)(),{setVariableValue:S,variableId:w}=(0,b.useVariableBoundProp)(),{propType:P}=(0,n.useBoundProp)(),[I,A]=(0,o.useSuppressedMessage)(f.EDIT_CONFIRMATION_DIALOG_ID),[R,L]=(0,t.useState)(!1),[O,D]=(0,t.useState)(!1),[B,M]=(0,t.useState)(""),[F,U]=(0,t.useState)(""),{labelFieldError:z,setLabelFieldError:N}=(0,g.useLabelError)(),j=(0,d.useVariable)(_),[G,H]=(0,t.useState)(j?.type??V.key);if(!j)throw new Error(`Global ${T} variable not found`);const W=(0,u.usePermissions)(),[q,$]=(0,t.useState)(()=>j.value),[K,X]=(0,t.useState)(()=>j.label);(0,t.useEffect)(()=>(m.styleVariablesRepository.update({[_]:{...j,value:q}}),()=>{m.styleVariablesRepository.update({[_]:{...j}})}),[_,q,j]);const handleUpdate=()=>{I?handleSaveVariable():D(!0)},handleSaveVariable=()=>{const e=G!==j.type?{value:q,label:K,type:G}:{value:q,label:K};(0,d.updateVariable)(_,e).then(()=>{maybeTriggerBoundPropChange(),r?.()}).catch(e=>{const a=(0,v.mapServerError)(e);if(a&&"label"===a.field)return X(""),void N({value:K,message:a.message});M(v.ERROR_MESSAGES.UNEXPECTED_ERROR)})},maybeTriggerBoundPropChange=()=>{_===w&&S(_)},handleDeleteConfirmation=()=>{L(!0)},Q=[];W.canDelete()&&Q.push(t.createElement(l.Tooltip,{key:"delete",placement:"top",title:E},t.createElement(l.IconButton,{size:h,onClick:handleDeleteConfirmation,"aria-label":E},t.createElement(s.TrashIcon,{fontSize:h}))));const Z=q===j.value&&K===j.label||""===K.trim()||("string"==typeof q?""===q.trim():!1===Boolean(q))||!!B,handleKeyDown=e=>{"Enter"!==e.key||Z||(e.preventDefault(),handleUpdate())};return t.createElement(t.Fragment,null,t.createElement(i.SectionPopoverBody,{height:"auto"},t.createElement(i.PopoverHeader,{title:(0,c.__)("Edit variable","elementor"),onClose:e,icon:t.createElement(t.Fragment,null,a&&t.createElement(l.IconButton,{size:h,"aria-label":(0,c.__)("Go Back","elementor"),onClick:a},t.createElement(s.ArrowLeftIcon,{fontSize:h})),t.createElement(C,{fontSize:h})),actions:Q}),t.createElement(l.Divider,null),t.createElement(n.PopoverContent,{p:2},t.createElement(y.FormField,{id:"variable-label",label:(0,c.__)("Name","elementor"),errorMsg:z?.message,noticeMsg:(0,v.labelHint)(K)},t.createElement(g.LabelField,{id:"variable-label",value:K,error:z,onChange:e=>{X(e),M("")},onErrorChange:e=>{N({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),x&&t.createElement(y.FormField,{errorMsg:F,label:(0,c.__)("Value","elementor")},t.createElement(l.Typography,{variant:"h5"},t.createElement(x,{propTypeKey:j.type,onPropTypeKeyChange:e=>H(e),value:q,onChange:e=>{$(e),M(""),U("")},onKeyDown:handleKeyDown,onValidationChange:U,propType:P}))),B&&t.createElement(l.FormHelperText,{error:!0},B)),t.createElement(l.CardActions,{sx:{pt:.5,pb:1}},t.createElement(l.Button,{size:"small",variant:"contained",disabled:Z,onClick:handleUpdate},(0,c.__)("Save","elementor")))),R&&t.createElement(k.DeleteConfirmationDialog,{open:!0,label:K,onConfirm:()=>{(0,d.deleteVariable)(_).then(()=>{maybeTriggerBoundPropChange(),r?.()})},closeDialog:()=>{L(!1)}}),O&&!I&&t.createElement(f.EditConfirmationDialog,{closeDialog:()=>{D(!1)},onConfirm:handleSaveVariable,onSuppressMessage:A}))}},"./packages/packages/core/editor-variables/src/components/variable-restore.tsx":function(e,a,r){r.r(a),r.d(a,{VariableRestore:function(){return VariableRestore}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-ui"),i=r("@elementor/ui"),s=r("@wordpress/i18n"),l=r("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),c=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),p=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),u=r("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),d=r("./packages/packages/core/editor-variables/src/utils/validations.ts"),b=r("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),m=r("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const VariableRestore=({variableId:e,onClose:a,onSubmit:r})=>{const{icon:v,valueField:g,variableType:k,propTypeUtil:f}=(0,c.useVariableType)(),{setVariableValue:y}=(0,u.useVariableBoundProp)(),{propType:h}=(0,n.useBoundProp)(),E=(0,p.useVariable)(e);if(!E)throw new Error(`Global ${k} variable not found`);const[_,C]=(0,t.useState)(""),[x,T]=(0,t.useState)(""),[V,S]=(0,t.useState)(E.label),[w,P]=(0,t.useState)(E.value),[I,A]=(0,t.useState)(E?.type??f.key),{labelFieldError:R,setLabelFieldError:L}=(0,b.useLabelError)({value:E.label,message:d.ERROR_MESSAGES.DUPLICATED_LABEL}),handleRestore=()=>{(I!==E.type?(0,p.restoreVariable)(e,V,w,I):(0,p.restoreVariable)(e,V,w)).then(()=>{y(e),r?.()}).catch(e=>{const a=(0,d.mapServerError)(e);if(a&&"label"===a.field)return S(""),void L({value:V,message:a.message});C(d.ERROR_MESSAGES.UNEXPECTED_ERROR)})},O=w===E.value&&V===E.label||""===V.trim()||("string"==typeof w?""===w.trim():!1===Boolean(w))||!!_,handleKeyDown=e=>{"Enter"!==e.key||O||(e.preventDefault(),handleRestore())};return t.createElement(l.PopoverContentRefContextProvider,null,t.createElement(o.SectionPopoverBody,{height:"auto"},t.createElement(o.PopoverHeader,{icon:t.createElement(v,{fontSize:"tiny"}),title:(0,s.__)("Restore variable","elementor"),onClose:a}),t.createElement(i.Divider,null),t.createElement(n.PopoverContent,{p:2},t.createElement(m.FormField,{id:"variable-label",label:(0,s.__)("Name","elementor"),errorMsg:R?.message,noticeMsg:(0,d.labelHint)(V)},t.createElement(b.LabelField,{id:"variable-label",value:V,error:R,onChange:e=>{S(e),C("")},onErrorChange:e=>{L({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),g&&t.createElement(m.FormField,{errorMsg:x,label:(0,s.__)("Value","elementor")},t.createElement(i.Typography,{variant:"h5"},t.createElement(g,{propTypeKey:I,onPropTypeKeyChange:e=>A(e),value:w,onChange:e=>{P(e),C(""),T("")},onValidationChange:T,propType:h,onKeyDown:handleKeyDown}))),_&&t.createElement(i.FormHelperText,{error:!0},_)),t.createElement(i.CardActions,{sx:{pt:.5,pb:1}},t.createElement(i.Button,{size:"small",variant:"contained",disabled:O,onClick:handleRestore},(0,s.__)("Restore","elementor")))))}},"./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx":function(e,a,r){r.r(a),r.d(a,{VariableSelectionPopover:function(){return VariableSelectionPopover}});var t=r("react"),n=r("@elementor/editor-v1-adapters"),o=r("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),i=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),s=r("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),l=r("./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts"),c=r("./packages/packages/core/editor-variables/src/components/variable-creation.tsx"),p=r("./packages/packages/core/editor-variables/src/components/variable-edit.tsx"),u=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx"),d=r("./packages/packages/core/editor-variables/src/components/variables-selection.tsx");const b="list",m="add",v="edit",VariableSelectionPopover=({closePopover:e,propTypeKey:a,selectedVariable:r})=>{const[g,k]=(0,t.useState)(b),[f,y]=(0,t.useState)(""),{open:h}=(0,u.usePanelActions)(),E=(0,n.isExperimentActive)("e_variables_manager")?()=>{h()}:void 0;return t.createElement(i.VariableTypeProvider,{propTypeKey:a},t.createElement(o.PopoverContentRefContextProvider,null,function RenderView(e){const a=(0,s.usePermissions)(),r=(0,l.useQuotaPermissions)(e.propTypeKey),n={onClose:()=>{e.closePopover()},onGoBack:()=>{e.setCurrentView(b)}};a.canAdd()&&(n.onAdd=()=>{e.setCurrentView(m)});a.canEdit()&&(n.onEdit=a=>{e.setEditId(a),e.setCurrentView(v)});a.canManageSettings()&&e.onSettings&&(n.onSettings=()=>{e.closePopover(),e.onSettings?.()});const handleSubmitOnEdit=()=>{e?.selectedVariable?.key===e.editId?n.onClose():n.onGoBack?.()};if(b===e.currentView)return t.createElement(d.VariablesSelection,{closePopover:n.onClose,onAdd:n.onAdd,onEdit:n.onEdit,onSettings:n.onSettings,disabled:!r.canAdd()});if(m===e.currentView)return t.createElement(c.VariableCreation,{onGoBack:n.onGoBack,onClose:n.onClose});if(v===e.currentView)return t.createElement(p.VariableEdit,{editId:e.editId,onGoBack:n.onGoBack,onClose:n.onClose,onSubmit:handleSubmitOnEdit});return null}({propTypeKey:a,currentView:g,selectedVariable:r,editId:f,setEditId:y,setCurrentView:k,closePopover:e,onSettings:E})))}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts":function(e,a,r){r.r(a),r.d(a,{useAutoEdit:function(){return useAutoEdit}});var t=r("react");const useAutoEdit=()=>{const[e,a]=(0,t.useState)(void 0);return{autoEditVariableId:e,startAutoEdit:(0,t.useCallback)(e=>{a(e)},[]),handleAutoEditComplete:(0,t.useCallback)(()=>{setTimeout(()=>{a(void 0)},100)},[])}}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts":function(e,a,r){r.r(a),r.d(a,{useErrorNavigation:function(){return useErrorNavigation}});var t=r("react");const useErrorNavigation=()=>{const e=(0,t.useRef)(0);return{createNavigationCallback:(0,t.useCallback)((a,r,t)=>()=>{if(!a?.length)return;const n=e.current,o=a[n];if(o){r(o);const i=n+1;i>=a.length?(t(),e.current=0):e.current=i}},[]),resetNavigation:(0,t.useCallback)(()=>{e.current=0},[])}}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts":function(e,a,r){r.r(a),r.d(a,{useVariablesManagerState:function(){return useVariablesManagerState}});var t=r("react"),n=r("./packages/packages/core/editor-variables/src/batch-operations.ts"),o=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),i=r("./packages/packages/core/editor-variables/src/service.ts"),s=r("./packages/packages/core/editor-variables/src/utils/filter-by-search.ts"),l=r("./packages/packages/core/editor-variables/src/utils/variables-to-list.ts"),c=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const useVariablesManagerState=()=>{const[e,a]=(0,t.useState)(()=>(0,o.getVariables)(!1)),[r,p]=(0,t.useState)([]),[u,d]=(0,t.useState)(!1),[b,m]=(0,t.useState)(!1),[v,g]=(0,t.useState)(!1),[k,f]=(0,t.useState)(""),y=(0,t.useCallback)(r=>{a({...e,...r}),m(!0)},[e]),h=(0,t.useCallback)((e,r,t)=>{const o=(0,n.generateTempId)(),i={id:o,label:r.trim(),value:t.trim(),type:e};return a(e=>({...e,[o]:i})),m(!0),o},[]),E=(0,t.useCallback)(e=>{p(a=>[...a,e]),a(a=>({...a,[e]:{...a[e],deleted:!0}})),m(!0)},[]),_=(0,t.useCallback)(e=>{a(a=>({...a,[e]:{...a[e],sync_to_v3:!0}})),m(!0)},[]),C=(0,t.useCallback)(e=>{a(a=>({...a,[e]:{...a[e],sync_to_v3:!1}})),m(!0)},[]),x=(0,t.useCallback)(async()=>{const t=(0,o.getVariables)(!1);g(!0);const n=await i.service.batchSave(t,e,r);if(n.success){await i.service.load();const e=i.service.variables();a(e),p([]),m(!1)}return{success:n.success}},[e,r]);return{variables:(0,t.useCallback)(()=>{const a=(0,l.variablesToList)(e).filter(e=>!e.deleted),r=(0,l.applySelectionFilters)(a,(0,c.getVariableTypes)()),t=(0,s.filterBySearch)(r,k);return Object.fromEntries(t.map(({key:e,...a})=>[e,a]))},[e,k])(),deletedVariables:r,isDirty:b,isSaveDisabled:u,handleOnChange:y,createVariable:h,handleDeleteVariable:E,handleStartSync:_,handleStopSync:C,handleSave:x,isSaving:v,handleSearch:e=>{f(e)},searchValue:k,setIsSaving:g,setIsSaveDisabled:d}}},"./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx":function(e,a,r){r.r(a),r.d(a,{VariableEditMenu:function(){return VariableEditMenu}});var t=r("react"),n=r("@elementor/icons"),o=r("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const VariableEditMenu=({menuActions:e,disabled:a,itemId:r})=>{const i=(0,o.usePopupState)({variant:"popover"}),s=(0,o.bindTrigger)(i);return t.createElement(t.Fragment,null,t.createElement(o.IconButton,_extends({},s,{disabled:a,size:"tiny",onClick:e=>{e.stopPropagation(),s.onClick?.(e)}}),t.createElement(n.DotsVerticalIcon,{fontSize:"tiny"})),t.createElement(o.Menu,_extends({disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6}},(0,o.bindMenu)(i),{anchorEl:i.anchorEl,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},open:i.isOpen,onClose:i.close}),e.map(e=>t.createElement(o.MenuItem,{key:e.name,onClick:a=>{a.stopPropagation(),e.onClick?.(r),i.close()},sx:{color:e.color,gap:1}},e.icon&&(0,t.createElement)(e.icon,{fontSize:"inherit"})," ",e.name))))}},"./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx":function(e,a,r){r.r(a),r.d(a,{VariableTableCell:function(){return VariableTableCell}});var t=r("react"),n=r("@elementor/ui");const VariableTableCell=({children:e,isHeader:a,width:r,maxWidth:o,align:i,noPadding:s,sx:l})=>{const c={maxWidth:o??150,cursor:"initial",typography:"caption",...a&&{color:"text.primary",fontWeight:"bold"},...a&&!s&&{padding:"10px 16px"},...r&&{width:r},...l};return t.createElement(n.TableCell,{size:"small",padding:s?"none":void 0,align:i,sx:c},e)}},"./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-row.tsx":function(e,a,r){r.r(a),r.d(a,{VariableRow:function(){return VariableRow}});var t=r("react"),n=r("@elementor/editor-ui"),o=r("@elementor/icons"),i=r("@elementor/ui"),s=r("./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts"),l=r("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),c=r("./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx"),p=r("./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx"),u=r("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx"),d=r("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const b={target_name:"variables_manager",target_location:"variables_manager"},VariableRow=e=>{const{row:a,variables:r,handleOnChange:m,autoEditVariableId:v,onAutoEditComplete:g,onFieldError:k,menuActions:f,handleRowRef:y,itemProps:h,showDropIndication:E,triggerProps:_,itemStyle:C,triggerStyle:x,isDragged:T,dropPosition:V,setTriggerRef:S,isSorting:w}=e,P=(0,t.useRef)(null),I=!(0,s.useQuotaPermissions)(a.type).canEdit(),A=E&&"before"===V,R=E&&"after"===V;return t.createElement(i.TableRow,_extends({},h,{ref:h.ref,selected:T,sx:{...I&&{"& td, & th":{color:"text.disabled"}},...A&&{"& td, & th":{borderTop:"2px solid",borderTopColor:"primary.main"}},...R&&{"& td, & th":{borderBottom:"2px solid",borderBottomColor:"primary.main"}},"&:hover, &:focus-within":{backgroundColor:"action.hover",'& [role="toolbar"], & [draggable]':{opacity:1}},'& [role="toolbar"], & [draggable]':{opacity:0}},style:{...C,...x},onClick:()=>{I&&P.current?.toggle()}}),t.createElement(d.VariableTableCell,{noPadding:!0,width:10,maxWidth:10},t.createElement(i.IconButton,_extends({size:"small",ref:S},_,{disabled:w,draggable:!0}),t.createElement(o.GripVerticalIcon,{fontSize:"inherit"}))),t.createElement(d.VariableTableCell,null,t.createElement(p.VariableEditableCell,{initialValue:a.name,onChange:e=>{e===a.name||I||m({...r,[a.id]:{...r[a.id],label:e}})},prefixElement:(0,t.createElement)(a.icon,{fontSize:"inherit",color:I?"disabled":"inherit"}),editableElement:({value:e,onChange:n,onValidationChange:o,error:i})=>t.createElement(l.LabelField,{id:"variable-label-"+a.id,size:"tiny",value:e,onChange:n,onErrorChange:e=>{o?.(e),k?.(!!e)},error:i,focusOnShow:!0,selectOnShow:v===a.id,showWarningInfotip:!0,variables:r}),autoEdit:v===a.id&&!I,onRowRef:y(a.id),onAutoEditComplete:v===a.id?g:void 0,fieldType:"label",disabled:I},t.createElement(n.EllipsisWithTooltip,{title:a.name,sx:{border:"4px solid transparent"}},a.name))),t.createElement(d.VariableTableCell,null,t.createElement(p.VariableEditableCell,{initialValue:a.value,onChange:e=>{e===a.value||I||m({...r,[a.id]:{...r[a.id],value:e}})},editableElement:({value:e,onChange:n,onValidationChange:o,error:i})=>a.valueField?.({value:e,onChange:n,onPropTypeKeyChange:e=>{I||m({...r,[a.id]:{...r[a.id],type:e}})},propTypeKey:a.type,onValidationChange:e=>{o?.(e),k?.(!!e)},error:i})??t.createElement(t.Fragment,null),onRowRef:y(a.id),gap:.25,fieldType:"value",disabled:I},a.startIcon&&a.startIcon({value:a.value}),t.createElement(n.EllipsisWithTooltip,{title:a.value,sx:{border:"4px solid transparent",lineHeight:"1",pt:.25}},a.value))),t.createElement(d.VariableTableCell,{align:"right",noPadding:!0,width:16,maxWidth:16,sx:{paddingInlineEnd:1}},t.createElement(i.Stack,{role:"toolbar",direction:"row",justifyContent:"flex-end",alignItems:"center"},I&&t.createElement(c.VariablePromotionChip,{variableType:a.variableType,upgradeUrl:`https://go.elementor.com/renew-license-manager-${a.variableType}-variable`,ref:P,trackingData:b}),t.createElement(u.VariableEditMenu,{menuActions:f(a.id),disabled:w,itemId:a.id}))))}},"./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx":function(e,a,r){r.r(a),r.d(a,{VariableEditableCell:function(){return i}});var t=r("react"),n=r("@elementor/ui"),o=r("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");const i=t.memo(({initialValue:e,children:a,editableElement:r,onChange:i,prefixElement:s,autoEdit:l=!1,onRowRef:c,onAutoEditComplete:p,gap:u=1,fieldType:d,disabled:b=!1})=>{const[m,v]=(0,t.useState)(e),[g,k]=(0,t.useState)(!1),{labelFieldError:f,setLabelFieldError:y}=(0,o.useLabelError)(),[h,E]=(0,t.useState)(""),_=(0,t.useRef)(null),C=(0,t.useCallback)(()=>{"label"===d&&f?.message||"value"===d&&h||i(m),k(!1)},[m,i,d,f,h]);(0,t.useEffect)(()=>{c?.(_?.current)},[c]),(0,t.useEffect)(()=>{!l||g||b||(k(!0),p?.())},[l,g,p,b]);const handleDoubleClick=()=>{b||k(!0)},handleKeyDown=e=>{b||("Enter"===e.key?C():"Escape"===e.key&&k(!1)," "!==e.key||g||(e.preventDefault(),k(!0)))},x=(0,t.useCallback)(e=>{v(e)},[]),T=(0,t.useCallback)(e=>{"label"===d?y({value:m,message:e}):E(e)},[d,m,y,E]);let V;"label"===d?V=f:"value"===d&&(V={value:m,message:h});const S=r({value:m,onChange:x,onValidationChange:T,error:V});return g?t.createElement(n.ClickAwayListener,{onClickAway:C},t.createElement(n.Stack,{ref:_,direction:"row",alignItems:"center",gap:u,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:0,role:"button","aria-label":"Double click or press Space to edit"},s,S)):t.createElement(n.Stack,{ref:_,direction:"row",alignItems:"center",gap:u,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:b?-1:0,role:"button","aria-label":b?"":"Double click or press Space to edit"},s,a)})},"./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx":function(e,a,r){r.r(a),r.d(a,{SIZE:function(){return b},VariableManagerCreateMenu:function(){return VariableManagerCreateMenu},getDefaultName:function(){return getDefaultName}});var t=r("react"),n=r("@elementor/icons"),o=r("@elementor/ui"),i=r("@elementor/utils"),s=r("@wordpress/i18n"),l=r("./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts"),c=r("./packages/packages/core/editor-variables/src/utils/tracking.ts"),p=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),u=r("./packages/packages/core/editor-variables/src/components/ui/variable-promotion-chip.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const d={target_name:"variables_manager",target_location:"variables_manager",location_l1:"create variable menu"},b="tiny",VariableManagerCreateMenu=({variables:e,onCreate:a,menuState:r})=>{const i=(0,t.useRef)(null),l=(0,p.getVariableTypes)(),c=(0,t.useMemo)(()=>Object.entries(l).filter(([,e])=>!!e.defaultValue).map(([e,a])=>({key:e,propTypeKey:a.propTypeUtil.key,variableType:a.variableType,defaultValue:a.defaultValue||"",icon:a.icon})),[l]);return t.createElement(t.Fragment,null,t.createElement(o.IconButton,_extends({},(0,o.bindTrigger)(r),{ref:i,size:b,"aria-label":(0,s.__)("Add variable","elementor")}),t.createElement(n.PlusIcon,{fontSize:b})),t.createElement(o.Menu,_extends({disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6}},(0,o.bindMenu)(r),{anchorEl:i.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},"data-testid":"variable-manager-create-menu"}),c.map(n=>t.createElement(MenuOption,{key:n.key,config:n,variables:e,onCreate:a,onClose:r.close}))))},MenuOption=({config:e,variables:a,onCreate:r,onClose:n})=>{const s=(0,t.useRef)(null),p=(0,l.useQuotaPermissions)(e.propTypeKey),m=(0,i.capitalize)(e.variableType),v=!p.canAdd();return t.createElement(o.MenuItem,{onClick:()=>{if(v)return void s.current?.toggle();const t=getDefaultName(a,e.variableType);r(e.key,t,e.defaultValue),(0,c.trackVariablesManagerEvent)({action:"add",varType:e.variableType}),n()},sx:{gap:1.5,cursor:"pointer"}},(0,t.createElement)(e.icon,{fontSize:b,color:v?"disabled":"action"}),t.createElement(o.Typography,{variant:"caption",color:v?"text.disabled":"text.primary"},m),v&&t.createElement(u.VariablePromotionChip,{variableType:e.variableType,upgradeUrl:`https://go.elementor.com/go-pro-manager-${e.variableType}-variable/`,ref:s,trackingData:d}))},getDefaultName=(e,a)=>{const r=new RegExp(`^${a}-(\\d+)$`,"i"),t=new Set;Object.values(e).forEach(e=>{const a=e.label.match(r);a&&t.add(parseInt(a[1],10))});let n=1;for(;t.has(n);)n++;return`${a}-${n}`}},"./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx":function(e,a,r){r.r(a),r.d(a,{VariablesManagerPanel:function(){return VariablesManagerPanel},panel:function(){return x},usePanelActions:function(){return T}});var t=r("react"),n=r("@elementor/editor-current-user"),o=r("@elementor/editor-panels"),i=r("@elementor/editor-ui"),s=r("@elementor/editor-v1-adapters"),l=r("@elementor/icons"),c=r("@elementor/ui"),p=r("@wordpress/i18n"),u=r("./packages/packages/core/editor-variables/src/utils/tracking.ts"),d=r("./packages/packages/core/editor-variables/src/utils/validations.ts"),b=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),m=r("./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx"),v=r("./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx"),g=r("./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx"),k=r("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts"),f=r("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts"),y=r("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts"),h=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx"),E=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx");const _="variables-manager",C="stop-sync-variable",{panel:x,usePanelActions:T}=(0,o.__createPanel)({id:_,component:VariablesManagerPanel,allowedEditModes:["edit",_],onOpen:()=>{(0,s.changeEditMode)(_)},onClose:async()=>{(0,s.changeEditMode)("edit")},isOpenPreviousElement:!0});function VariablesManagerPanel(){const{close:e}=T(),{open:a,close:r,isOpen:s}=(0,i.useDialog)(),[_]=(0,n.useSuppressedMessage)(C),x=(0,c.usePopupState)({variant:"popover"}),{variables:V,isDirty:S,searchValue:w,isSaveDisabled:P,handleOnChange:I,createVariable:A,handleDeleteVariable:R,handleStartSync:L,handleStopSync:O,handleSave:D,isSaving:B,handleSearch:M,setIsSaving:F,setIsSaveDisabled:U}=(0,y.useVariablesManagerState)(),{autoEditVariableId:z,startAutoEdit:N,handleAutoEditComplete:j}=(0,k.useAutoEdit)(),{createNavigationCallback:G,resetNavigation:H}=(0,f.useErrorNavigation)(),[W,q]=(0,t.useState)(null),[$,K]=(0,t.useState)(null),[X,Q]=(0,t.useState)(null);usePreventUnload(S);const Z=(0,t.useCallback)((e,a,r)=>{const t=A(e,a,r);t&&N(t)},[A,N]),handleSaveClick=async()=>{try{Q(null),H();const e=await D();return(0,u.trackVariablesManagerEvent)({action:"saveChanges"}),e}catch(e){const a=(0,d.mapServerError)(e),r=a?.action?.data?.duplicatedIds;return a&&"label"===a.field&&(r&&a.action&&(a.action.callback=G(r,N,()=>{U(!1)})),Q(a),U(!0),H()),{success:!1,error:a}}finally{F(!1)}},J=(0,t.useCallback)(e=>{R(e),q(null)},[R]),Y=(0,t.useCallback)(e=>{O(e);const a=V[e];a&&(0,u.trackVariableSyncToV3)({variableLabel:a.label,action:"unsync"})},[O,V]),ee=(0,t.useCallback)(e=>{L(e);const a=V[e];a&&(0,u.trackVariableSyncToV3)({variableLabel:a.label,action:"sync"})},[L,V]),ae=(0,t.useCallback)(e=>{_?Y(e):K(e)},[_,Y]),re=(0,t.useCallback)(e=>{const a=V[e];if(!a)return[];return[...(0,b.getMenuActionsForVariable)(a.type,{variable:a,variableId:e,handlers:{onStartSync:ee,onStopSync:ae}}),{name:(0,p.__)("Delete","elementor"),icon:l.TrashIcon,color:"error.main",onClick:e=>{const a=V[e];if(a){q({id:e,label:a.label});const r=(0,b.getVariableType)(a.type);(0,u.trackVariablesManagerEvent)({action:"delete",varType:r?.variableType})}}}]},[V,ee,ae]),te=Object.keys(V).length>0;return t.createElement(i.ThemeProvider,null,t.createElement(o.Panel,null,t.createElement(o.PanelHeader,{sx:{height:"unset"}},t.createElement(c.Stack,{width:"100%",direction:"column",alignItems:"center"},t.createElement(c.Stack,{p:1,pl:2,width:"100%",direction:"row",alignItems:"center"},t.createElement(c.Stack,{width:"100%",direction:"row",gap:1},t.createElement(o.PanelHeaderTitle,{sx:{display:"flex",alignItems:"center",gap:.5}},t.createElement(l.ColorFilterIcon,{fontSize:"inherit"}),(0,p.__)("Variables Manager","elementor"))),t.createElement(c.Stack,{direction:"row",gap:.5,alignItems:"center"},t.createElement(h.VariableManagerCreateMenu,{onCreate:Z,variables:V,menuState:x}),t.createElement(c.CloseButton,{"aria-label":"Close",slotProps:{icon:{fontSize:h.SIZE}},onClick:()=>{S?a():e()}}))),t.createElement(c.Stack,{width:"100%",direction:"row",gap:1},t.createElement(i.SearchField,{sx:{display:"flex",flex:1},placeholder:(0,p.__)("Search","elementor"),value:w,onSearch:M})),t.createElement(c.Divider,{sx:{width:"100%"}}))),t.createElement(o.PanelBody,{sx:{display:"flex",flexDirection:"column",height:"100%"}},te&&t.createElement(E.VariablesManagerTable,{menuActions:re,variables:V,onChange:I,autoEditVariableId:z,onAutoEditComplete:j,onFieldError:U}),!te&&w&&t.createElement(g.NoSearchResults,{searchValue:w,onClear:()=>M(""),icon:t.createElement(l.ColorFilterIcon,{fontSize:"large"})}),!te&&!w&&t.createElement(v.EmptyState,{title:(0,p.__)("Create your first variable","elementor"),message:(0,p.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:t.createElement(l.ColorFilterIcon,{fontSize:"large"}),onAdd:x.open})),t.createElement(o.PanelFooter,null,t.createElement(c.Infotip,{placement:"right",open:!!X,content:X?t.createElement(c.Alert,{severity:X.severity??"error",action:X.action?.label?t.createElement(c.AlertAction,{onClick:X.action.callback},X.action.label):void 0,onClose:X.action?.label?void 0:()=>{Q(null),U(!1)},icon:X.IconComponent?t.createElement(X.IconComponent,null):t.createElement(l.AlertTriangleFilledIcon,null)},t.createElement(c.AlertTitle,null,X.message),X.action?.message):null,arrow:!1,slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[-10,10]}}]}}},t.createElement(c.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",disabled:P||!S||B,onClick:handleSaveClick,loading:B},(0,p.__)("Save changes","elementor"))))),W&&t.createElement(m.DeleteConfirmationDialog,{open:!0,label:W.label,onConfirm:()=>J(W.id),closeDialog:()=>q(null)}),$&&t.createElement(StopSyncConfirmationDialog,{open:!0,onClose:()=>K(null),onConfirm:()=>{Y($),K(null)}}),s&&t.createElement(i.SaveChangesDialog,null,t.createElement(i.SaveChangesDialog.Title,{onClose:r},(0,p.__)("You have unsaved changes","elementor")),t.createElement(i.SaveChangesDialog.Content,null,t.createElement(i.SaveChangesDialog.ContentText,null,(0,p.__)("To avoid losing your updates, save your changes before leaving.","elementor"))),t.createElement(i.SaveChangesDialog.Actions,{actions:{discard:{label:(0,p.__)("Discard","elementor"),action:()=>{r(),e()}},confirm:{label:(0,p.__)("Save","elementor"),action:async()=>{const a=await handleSaveClick();r(),a?.success&&e()}}}})))}const usePreventUnload=e=>{(0,t.useEffect)(()=>{const handleBeforeUnload=a=>{e&&a.preventDefault()};return window.addEventListener("beforeunload",handleBeforeUnload),()=>{window.removeEventListener("beforeunload",handleBeforeUnload)}},[e])},StopSyncConfirmationDialog=({open:e,onClose:a,onConfirm:r})=>{const[,o]=(0,n.useSuppressedMessage)(C);return t.createElement(i.ConfirmationDialog,{open:e,onClose:a},t.createElement(i.ConfirmationDialog.Title,{icon:l.ColorFilterIcon,iconColor:"primary"},(0,p.__)("Stop syncing variable color","elementor")),t.createElement(i.ConfirmationDialog.Content,null,t.createElement(i.ConfirmationDialog.ContentText,null,(0,p.__)("This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.","elementor"))),t.createElement(i.ConfirmationDialog.Actions,{onClose:a,onConfirm:r,cancelLabel:(0,p.__)("Cancel","elementor"),confirmLabel:(0,p.__)("Got it","elementor"),color:"primary",onSuppressMessage:o,suppressLabel:(0,p.__)("Don't show again","elementor")}))}},"./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx":function(e,a,r){r.r(a),r.d(a,{VariablesManagerTable:function(){return VariablesManagerTable}});var t=r("react"),n=r("@elementor/ui"),o=r("@wordpress/i18n"),i=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),s=r("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx"),l=r("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-row.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const VariablesManagerTable=({menuActions:e,variables:a,onChange:r,autoEditVariableId:c,onAutoEditComplete:p,onFieldError:u})=>{const d=(0,t.useRef)(null),b=(0,t.useRef)(new Map);(0,t.useEffect)(()=>{if(c&&d.current){const e=b.current.get(c);e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},100)}},[c]);const handleRowRef=e=>a=>{a?b.current.set(e,a):b.current.delete(e)},m=Object.keys(a).sort(function sortVariablesOrder(e){return(a,r)=>(e[a]?.order??Number.MAX_SAFE_INTEGER)-(e[r]?.order??Number.MAX_SAFE_INTEGER)}(a)),v=m.map(e=>{const r=a[e],t=(0,i.getVariableType)(r.type);return t?{id:e,type:r.type,name:r.label,value:r.value,...t}:null}).filter(Boolean),g={minWidth:250,tableLayout:"fixed"};return t.createElement(n.TableContainer,{ref:d,sx:{overflow:"initial"}},t.createElement(n.Table,{sx:g,"aria-label":"Variables manager list with drag and drop reordering",stickyHeader:!0},t.createElement(n.TableHead,null,t.createElement(n.TableRow,null,t.createElement(s.VariableTableCell,{isHeader:!0,noPadding:!0,width:10,maxWidth:10}),t.createElement(s.VariableTableCell,{isHeader:!0},(0,o.__)("Name","elementor")),t.createElement(s.VariableTableCell,{isHeader:!0},(0,o.__)("Value","elementor")),t.createElement(s.VariableTableCell,{isHeader:!0,noPadding:!0,width:16,maxWidth:16}))),t.createElement(n.TableBody,null,t.createElement(n.UnstableSortableProvider,{value:m,onChange:e=>{const t={...a};e.forEach((e,a)=>{const r=t[e];r&&(t[e]=Object.assign({},r,{order:a+1}))}),r(t)},variant:"static",restrictAxis:!0,dragOverlay:({children:e,...a})=>t.createElement(n.Table,_extends({sx:g},a),t.createElement(n.TableBody,null,e))},v.map(o=>t.createElement(n.UnstableSortableItem,{key:o.id,id:o.id,render:n=>t.createElement(l.VariableRow,_extends({},n,{row:o,variables:a,handleOnChange:r,autoEditVariableId:c,onAutoEditComplete:p,onFieldError:u,menuActions:e,handleRowRef:handleRowRef}))}))))))}},"./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx":function(e,a,r){r.r(a),r.d(a,{BackgroundRepeaterColorIndicator:function(){return BackgroundRepeaterColorIndicator},BackgroundRepeaterLabel:function(){return BackgroundRepeaterLabel},BoxShadowRepeaterColorIndicator:function(){return BoxShadowRepeaterColorIndicator}});var t=r("react"),n=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),o=r("./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx");const useColorVariable=e=>{const a=e?.value?.color?.value;return(0,n.useVariable)(a||"")},BackgroundRepeaterColorIndicator=({value:e})=>{const a=useColorVariable(e);return t.createElement(o.ColorIndicator,{component:"span",size:"inherit",value:a?.value})},BackgroundRepeaterLabel=({value:e})=>{const a=useColorVariable(e);return t.createElement("span",null,a?.label)},BoxShadowRepeaterColorIndicator=({value:e})=>{const a=useColorVariable(e);return t.createElement(o.ColorIndicator,{component:"span",size:"inherit",value:a?.value})}},"./packages/packages/core/editor-variables/src/components/variables-selection.tsx":function(e,a,r){r.r(a),r.d(a,{VariablesSelection:function(){return VariablesSelection}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-ui"),i=r("@elementor/icons"),s=r("@elementor/ui"),l=r("@wordpress/i18n"),c=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),p=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),u=r("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),d=r("./packages/packages/core/editor-variables/src/utils/tracking.ts"),b=r("./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx"),m=r("./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx"),v=r("./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx"),g=r("./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},_extends.apply(null,arguments)}const k="tiny",f=(0,l.__)("Create variable","elementor"),y=(0,l.__)("Variables Manager","elementor"),getProUpgradeUrl=e=>`https://go.elementor.com/renew-license-panel-${e}-variable`,VariablesSelection=({closePopover:e,onAdd:a,onEdit:r,onSettings:h,disabled:E=!1})=>{const{icon:_,startIcon:C,variableType:x,propTypeUtil:T,emptyState:V}=(0,c.useVariableType)(),{value:S,setValue:w,path:P}=(0,u.useVariableBoundProp)(),[I,A]=(0,t.useState)(""),{list:R,hasMatches:L,isSourceNotEmpty:O,hasNoCompatibleVariables:D}=(0,p.useFilteredVariables)(I,T.key),onAddAndTrack=()=>{a?.(),(0,d.trackVariableEvent)({varType:x,controlPath:P.join("."),action:"add"})},B=[];if(a&&B.push(t.createElement(s.Tooltip,{key:"add",placement:"top",title:f},t.createElement("span",null,t.createElement(s.IconButton,{id:"add-variable-button",size:k,onClick:onAddAndTrack,"aria-label":f,disabled:E},t.createElement(i.PlusIcon,{fontSize:k}))))),h){const handleOpenManager=()=>{h(),(0,d.trackVariablesManagerEvent)({action:"openManager",varType:x,controlPath:P.join(".")})};B.push(t.createElement(s.Tooltip,{key:"settings",placement:"top",title:y},t.createElement(s.IconButton,{id:"variables-manager-button",size:k,onClick:handleOpenManager,"aria-label":y},t.createElement(i.SettingsIcon,{fontSize:k}))))}const M=C||(()=>t.createElement(_,{fontSize:k})),F=R.map(({value:e,label:a,key:n})=>({type:"item",value:n,label:a,icon:t.createElement(M,{value:e}),secondaryText:e,onEdit:r?()=>r?.(n):void 0}));return(0,t.useEffect)(()=>{E&&(0,n.trackViewPromotion)({target_name:"variables_popover",target_location:"widget_panel",location_l1:"variables_list"})},[E]),t.createElement(o.SectionPopoverBody,null,t.createElement(o.PopoverHeader,{title:(0,l.__)("Variables","elementor"),icon:t.createElement(i.ColorFilterIcon,{fontSize:k}),onClose:e,actions:B}),O&&t.createElement(o.SearchField,{value:I,onSearch:e=>{A(e)},placeholder:(0,l.__)("Search","elementor")}),t.createElement(s.Divider,null),O&&L&&t.createElement(t.Fragment,null,t.createElement(o.PopoverMenuList,{items:F,onSelect:E?()=>{}:a=>{w(a),(0,d.trackVariableEvent)({varType:x,controlPath:P.join("."),action:"connect"}),e()},onClose:()=>{},selectedValue:S,"data-testid":`${x}-variables-list`,menuListTemplate:e=>t.createElement(g.VariablesStyledMenuList,_extends({},e,{disabled:E})),menuItemContentTemplate:e=>t.createElement(m.MenuItemContent,{item:e,disabled:E})}),E&&t.createElement(o.PromotionAlert,{message:(0,l.sprintf)((0,l.__)("Upgrade to continue creating and editing %s variables.","elementor"),x),upgradeUrl:getProUpgradeUrl(x),onCtaClick:()=>(0,n.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})),!L&&O&&t.createElement(v.NoSearchResults,{searchValue:I,onClear:()=>{A("")},icon:t.createElement(_,{fontSize:"large"})}),E&&!O&&t.createElement(b.EmptyState,{title:(0,l.sprintf)((0,l.__)("No %s variables yet","elementor"),x),message:(0,l.sprintf)((0,l.__)("Upgrade to create %s variables and maintain consistent element sizing.","elementor"),x),icon:t.createElement(_,{fontSize:"large"})},V),!O&&!D&&!E&&t.createElement(b.EmptyState,{title:(0,l.sprintf)((0,l.__)("Create your first %s variable","elementor"),x),message:(0,l.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:t.createElement(_,{fontSize:"large"}),onAdd:a}),D&&!E&&t.createElement(b.EmptyState,{title:(0,l.__)("No compatible variables","elementor"),message:(0,l.__)("Looks like none of your variables work with this control. Create a new variable to use it here.","elementor"),icon:t.createElement(_,{fontSize:"large"}),onAdd:a}))}},"./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx":function(e,a,r){r.r(a),r.d(a,{PopoverContentRefContextProvider:function(){return PopoverContentRefContextProvider},usePopoverContentRef:function(){return usePopoverContentRef}});var t=r("react"),n=r("@elementor/ui");const o=(0,t.createContext)(null),PopoverContentRefContextProvider=({children:e})=>{const[a,r]=(0,t.useState)(null);return t.createElement(o.Provider,{value:a},t.createElement(n.Box,{ref:r},e))},usePopoverContentRef=()=>(0,t.useContext)(o)},"./packages/packages/core/editor-variables/src/context/variable-type-context.tsx":function(e,a,r){r.r(a),r.d(a,{VariableTypeProvider:function(){return VariableTypeProvider},useVariableType:function(){return useVariableType}});var t=r("react"),n=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const o=(0,t.createContext)(null);function VariableTypeProvider({children:e,propTypeKey:a}){return t.createElement(o.Provider,{value:a},e)}function useVariableType(){const e=(0,t.useContext)(o);if(null===e)throw new Error("useVariableType must be used within a VariableTypeProvider");return(0,n.getVariableType)(e)}},"./packages/packages/core/editor-variables/src/controls/variable-control.tsx":function(e,a,r){r.r(a),r.d(a,{VariableControl:function(){return VariableControl}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx"),i=r("./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx"),s=r("./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx"),l=r("./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx"),c=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),p=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const VariableControl=()=>{const e=(0,n.useBoundProp)(),a=e.value??e.placeholder,r=(0,c.useVariable)(a?.value);if(!r)return t.createElement(l.MissingVariable,null);const{$$type:u}=a;if(r?.deleted)return t.createElement(i.DeletedVariable,{variable:r,propTypeKey:u});const{isCompatible:d}=(0,p.getVariableType)(r.type);return d&&!d(e?.propType,r)?t.createElement(s.MismatchVariable,{variable:r}):t.createElement(o.AssignedVariable,{variable:r,propTypeKey:u})}},"./packages/packages/core/editor-variables/src/create-style-variables-repository.ts":function(e,a,r){r.r(a),r.d(a,{createStyleVariablesRepository:function(){return createStyleVariablesRepository}});var t=r("@elementor/editor-v1-adapters"),n=r("./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts");const createStyleVariablesRepository=()=>{const e={};let a;const shouldUpdate=(a,r)=>!(a in e)||(e[a].label!==r.label||(e[a].value!==r.value||(!(e[a]?.deleted||!r?.deleted)||!(!e[a]?.deleted||r?.deleted)))),fontEnqueue=e=>{if(e)try{(0,t.enqueueFont)(e)}catch{}};return{subscribe:e=>(a=e,()=>{a=()=>{}}),update:r=>{(a=>{let r=!1;for(const[t,o]of Object.entries(a))shouldUpdate(t,o)&&(e[t]=o,o.type===n.fontVariablePropTypeUtil.key&&fontEnqueue(o.value),r=!0);return r})(r)&&"function"==typeof a&&a({...e})}}}},"./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts":function(e,a,r){r.r(a),r.d(a,{useInitialValue:function(){return useInitialValue}});var t=r("@elementor/editor-controls"),n=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),o=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");const useInitialValue=()=>{const{value:e}=(0,t.useBoundProp)(),a=(0,n.hasVariableType)(e?.$$type)&&Boolean(e?.value),r=(0,o.useVariable)(a?e.value:"");return a?r?r.value:"":e?.value??""}},"./packages/packages/core/editor-variables/src/hooks/use-permissions.ts":function(e,a,r){r.r(a),r.d(a,{usePermissions:function(){return usePermissions}});var t=r("@elementor/editor-current-user");const usePermissions=()=>{const{canUser:e,isAdmin:a}=(0,t.useCurrentUserCapabilities)();return{canAssign:()=>e("edit_posts"),canUnlink:()=>e("edit_posts"),canAdd:()=>a,canDelete:()=>a,canEdit:()=>a,canRestore:()=>a,canManageSettings:()=>a}}},"./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx":function(e,a,r){r.r(a),r.d(a,{usePropVariableAction:function(){return usePropVariableAction}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/icons"),i=r("@wordpress/i18n"),s=r("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),l=r("./packages/packages/core/editor-variables/src/utils/tracking.ts"),c=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const usePropVariableAction=()=>{const{propType:e,path:a}=(0,n.useBoundProp)(),r=resolveVariableFromPropType(e);return{visible:Boolean(r),icon:o.ColorFilterIcon,title:(0,i.__)("Variables","elementor"),content:({close:e})=>r?(trackOpenVariablePopover(a,r.variableType),t.createElement(s.VariableSelectionPopover,{closePopover:e,propTypeKey:r.propTypeUtil.key})):null}},resolveVariableFromPropType=e=>{if("union"===e.kind)for(const a of Object.keys(e.prop_types)){const e=(0,c.getVariableType)(a);if(e)return e}},trackOpenVariablePopover=(e,a)=>{(0,l.trackVariableEvent)({varType:a,controlPath:e.join("."),action:"open"})}},"./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts":function(e,a,r){r.r(a),r.d(a,{createVariable:function(){return createVariable},deleteVariable:function(){return deleteVariable},getVariables:function(){return getVariables},hasVariable:function(){return hasVariable},restoreVariable:function(){return restoreVariable},updateVariable:function(){return updateVariable},useFilteredVariables:function(){return useFilteredVariables},useVariable:function(){return useVariable}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),i=r("./packages/packages/core/editor-variables/src/service.ts"),s=r("./packages/packages/core/editor-variables/src/utils/filter-by-search.ts"),l=r("./packages/packages/core/editor-variables/src/utils/variables-to-list.ts"),c=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const getVariables=(e=!0)=>{const a=i.service.variables();return e?a:Object.fromEntries(Object.entries(a).filter(([,e])=>!e.deleted))},hasVariable=e=>void 0!==getVariables()[e],useVariable=e=>{const a=getVariables();return a?.[e]?{...a[e],key:e}:null},useFilteredVariables=(e,a)=>{const r=usePropVariables(a),t=useVariableSelectionFilter(r),n=(0,s.filterBySearch)(t,e);return{list:n.sort((e,a)=>(e.order??Number.MAX_SAFE_INTEGER)-(a.order??Number.MAX_SAFE_INTEGER)),hasMatches:n.length>0,isSourceNotEmpty:t.length>0,hasNoCompatibleVariables:r.length>0&&0===t.length}},useVariableSelectionFilter=e=>{const{selectionFilter:a}=(0,o.useVariableType)(),{propType:r}=(0,n.useBoundProp)();return a?a(e,r):e},usePropVariables=e=>(0,t.useMemo)(()=>normalizeVariables(e),[e]),normalizeVariables=e=>{const a=getVariables(!1),r=(e=>{const a=[],r=(0,c.getVariableTypes)(),t=(0,c.getVariableType)(e);return Object.entries(r).forEach(([e,r])=>{t.variableType===r.variableType&&a.push(e)}),a})(e);return(0,l.variablesToList)(a).filter(e=>r.includes(e.type)).map(l.toNormalizedVariable)},extractId=({id:e})=>e,createVariable=e=>i.service.create(e).then(extractId),updateVariable=(e,{value:a,label:r,type:t})=>i.service.update(e,{value:a,label:r,type:t}).then(extractId),deleteVariable=e=>i.service.delete(e).then(extractId),restoreVariable=(e,a,r,t)=>i.service.restore(e,a,r,t).then(extractId)},"./packages/packages/core/editor-variables/src/hooks/use-quota-permissions.ts":function(e,a,r){r.r(a),r.d(a,{useQuotaPermissions:function(){return useQuotaPermissions}});const useQuotaPermissions=e=>{const a={...window.ElementorVariablesQuotaConfig??{},...window.ElementorVariablesQuotaConfigExtended??{}},r=void 0===a[e]&&window.elementorPro,t=a[e]||0,n=r||t>0;return{canAdd:()=>n,canEdit:()=>n}}},"./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts":function(e,a,r){r.r(a),r.d(a,{resolveBoundPropAndSetValue:function(){return resolveBoundPropAndSetValue},useVariableBoundProp:function(){return useVariableBoundProp}});var t=r("@elementor/editor-controls"),n=r("@elementor/editor-props"),o=r("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");const useVariableBoundProp=()=>{const{propTypeUtil:e}=(0,o.useVariableType)(),a=(0,t.useBoundProp)(e);return{...a,setVariableValue:e=>resolveBoundPropAndSetValue(e,a),variableId:a.value??a.placeholder}},resolveBoundPropAndSetValue=(e,a)=>{const r=unwrapValue(a.value),t=unwrapValue(a.placeholder),n=unwrapValue(e);return r||t!==n?a.setValue(e):a.setValue(null)},unwrapValue=e=>(0,n.isTransformable)(e)?e.value:e},"./packages/packages/core/editor-variables/src/init.ts":function(e,a,r){r.r(a),r.d(a,{init:function(){return init}});var t=r("@elementor/editor"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-mcp"),i=r("@elementor/editor-panels"),s=r("@elementor/editor-props"),l=r("@elementor/menus"),c=r("./packages/packages/core/editor-variables/src/components/global-styles-import-listener.tsx"),p=r("./packages/packages/core/editor-variables/src/components/open-panel-from-event.tsx"),u=r("./packages/packages/core/editor-variables/src/components/open-panel-from-url.tsx"),d=r("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx"),b=r("./packages/packages/core/editor-variables/src/controls/variable-control.tsx"),m=r("./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx"),v=r("./packages/packages/core/editor-variables/src/mcp/index.ts"),g=r("./packages/packages/core/editor-variables/src/register-variable-types.tsx"),k=r("./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx"),f=r("./packages/packages/core/editor-variables/src/repeater-injections.ts"),y=r("./packages/packages/core/editor-variables/src/service.ts"),h=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const{registerPopoverAction:E}=l.controlActionsMenu;function init(){(0,g.registerVariableTypes)(),(0,f.registerRepeaterInjections)(),(0,n.registerControlReplacement)({component:b.VariableControl,condition:({value:e,placeholder:a})=>!!hasVariableAssigned(e)||!e&&hasVariableAssigned(a)}),E({id:"variables",priority:40,useProps:m.usePropVariableAction}),y.service.init().then(()=>{(0,v.initMcp)((0,o.getMCPByDomain)("variables"),(0,o.getMCPByDomain)("canvas"))}),(0,t.injectIntoTop)({id:"canvas-style-variables-render",component:k.StyleVariablesRenderer}),(0,t.injectIntoLogic)({id:"variables-import-listener",component:c.GlobalStylesImportListener}),(0,t.injectIntoLogic)({id:"variables-open-panel-from-url",component:u.OpenPanelFromUrl}),(0,t.injectIntoLogic)({id:"variables-open-panel-from-event",component:p.OpenPanelFromEvent}),(0,i.__registerPanel)(d.panel)}function hasVariableAssigned(e){return!!(0,s.isTransformable)(e)&&(0,h.hasVariableType)(e.$$type)}},"./packages/packages/core/editor-variables/src/mcp/index.ts":function(e,a,r){r.r(a),r.d(a,{initMcp:function(){return initMcp}});var t=r("./packages/packages/core/editor-variables/src/mcp/manage-variable-tool.ts"),n=r("./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");function initMcp(e,a){const{setMCPDescription:r}=e;r("Everything related to V4 ( Atomic ) variables.\n# Global variables\n- Create/update/delete global variables\n- Get list of global variables\n- Get details of a global variable\n"),(0,t.initManageVariableTool)(e),(0,n.initVariablesResource)(e,a)}},"./packages/packages/core/editor-variables/src/mcp/manage-variable-tool.ts":function(e,a,r){r.r(a),r.d(a,{initManageVariableTool:function(){return initManageVariableTool}});var t=r("@elementor/schema"),n=r("./packages/packages/core/editor-variables/src/service.ts"),o=r("./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");const initManageVariableTool=e=>{const{addTool:a}=e;a({name:"manage-global-variable",schema:{action:t.z.enum(["create","update","delete"]).describe("Operation to perform"),id:t.z.string().optional().describe("Variable id (required for update/delete). Get from list-global-variables."),type:t.z.string().optional().describe('Variable type: "global-color-variable" or "global-font-variable" (required for create)'),label:t.z.string().optional().describe("Variable label (required for create/update)"),value:t.z.string().optional().describe("Variable value (required for create/update)")},outputSchema:{status:t.z.enum(["ok"]).describe("Operation status"),message:t.z.string().optional().describe("Error details if status is error")},modelPreferences:{intelligencePriority:.75,speedPriority:.75},requiredResources:[{uri:o.GLOBAL_VARIABLES_URI,description:"Global variables"}],description:'Manages global variables (create/update/delete). Existing variables available in resources.\nCREATE: requires type, label, value. Ensure label is unique.\nUPDATE: requires id, label, value. When renaming: keep existing value. When updating value: keep exact label.\nDELETE: requires id. DESTRUCTIVE - confirm with user first.\n\n# NAMING - IMPORTANT\nthe variables names should ALWAYS be lowercased and dashed spaced. example: "Headline Primary" should be "headline-primary"\n',handler:async e=>{const a=function getServiceActions(e){return{create({type:a,label:r,value:t}){if(!a||!r||!t)throw new Error("Create requires type, label, and value");return e.create({type:a,label:r,value:t})},update({id:a,label:r,value:t}){if(!a||!r||!t)throw new Error("Update requires id, label, and value");return e.update(a,{label:r,value:t})},delete({id:a}){if(!a)throw new Error("delete requires id");return e.delete(a)}}}(n.service)[e.action];if(a)return await a(e),{status:"ok"};throw new Error(`Unknown action ${e.action}`)},isDestructive:!0})}},"./packages/packages/core/editor-variables/src/mcp/variables-resource.ts":function(e,a,r){r.r(a),r.d(a,{GLOBAL_VARIABLES_URI:function(){return n},initVariablesResource:function(){return initVariablesResource}});var t=r("./packages/packages/core/editor-variables/src/service.ts");const n="elementor://global-variables",initVariablesResource=(e,a)=>{[a,e].forEach(e=>{const{resource:a,sendResourceUpdated:r}=e;a("global-variables",n,{description:"List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)"},async()=>{const e={};return Object.entries(t.service.variables()).forEach(([a,r])=>{r.deleted||(e[a]=r)}),{contents:[{uri:n,text:JSON.stringify(e)}]}}),window.addEventListener("variables:updated",()=>{r({uri:n})})})}},"./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts":function(e,a,r){r.r(a),r.d(a,{colorVariablePropTypeUtil:function(){return o}});var t=r("@elementor/editor-props"),n=r("@elementor/schema");const o=(0,t.createPropUtils)("global-color-variable",n.z.string())},"./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts":function(e,a,r){r.r(a),r.d(a,{fontVariablePropTypeUtil:function(){return o}});var t=r("@elementor/editor-props"),n=r("@elementor/schema");const o=(0,t.createPropUtils)("global-font-variable",n.z.string())},"./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts":function(e,a,r){r.r(a),r.d(a,{sizeVariablePropTypeUtil:function(){return o}});var t=r("@elementor/editor-props"),n=r("@elementor/schema");const o=(0,t.createPropUtils)("global-size-variable",n.z.string())},"./packages/packages/core/editor-variables/src/register-variable-types.tsx":function(e,a,r){r.r(a),r.d(a,{registerVariableTypes:function(){return registerVariableTypes}});var t=r("react"),n=r("@elementor/editor-controls"),o=r("@elementor/editor-props"),i=r("@elementor/editor-ui"),s=r("@elementor/icons"),l=r("@wordpress/i18n"),c=r("./packages/packages/core/editor-variables/src/components/fields/color-field.tsx"),p=r("./packages/packages/core/editor-variables/src/components/fields/font-field.tsx"),u=r("./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx"),d=r("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts"),b=r("./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts"),m=r("./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts"),v=r("./packages/packages/core/editor-variables/src/transformers/empty-transformer.tsx"),g=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");function registerVariableTypes(){(0,g.registerVariableType)({key:d.colorVariablePropTypeUtil.key,valueField:c.ColorField,icon:s.BrushIcon,propTypeUtil:d.colorVariablePropTypeUtil,fallbackPropTypeUtil:o.colorPropTypeUtil,variableType:"color",startIcon:({value:e})=>t.createElement(u.ColorIndicator,{size:"inherit",component:"span",value:e}),defaultValue:"#ffffff",menuActionsFactory:({variable:e,variableId:a,handlers:r})=>{const t=[];return e.sync_to_v3?t.push({name:(0,l.__)("Stop syncing to Global Colors","elementor"),icon:s.RefreshOffIcon,color:"text.primary",onClick:()=>r.onStopSync(a)}):t.push({name:(0,l.__)("Sync to Global Colors","elementor"),icon:s.RefreshIcon,color:"text.primary",onClick:()=>r.onStartSync(a)}),t}}),(0,g.registerVariableType)({key:b.fontVariablePropTypeUtil.key,valueField:p.FontField,icon:s.TextIcon,propTypeUtil:b.fontVariablePropTypeUtil,fallbackPropTypeUtil:o.stringPropTypeUtil,variableType:"font",defaultValue:"Roboto"});const e={isActive:!1,icon:s.ExpandDiagonalIcon,propTypeUtil:m.sizeVariablePropTypeUtil,fallbackPropTypeUtil:o.sizePropTypeUtil,styleTransformer:v.EmptyTransformer,variableType:"size",selectionFilter:()=>[],emptyState:t.createElement(i.CtaButton,{size:"small",href:"https://go.elementor.com/go-pro-panel-size-variable/",onClick:()=>(0,n.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})};(0,g.registerVariableType)({...e,key:m.sizeVariablePropTypeUtil.key,defaultValue:"0px"}),(0,g.registerVariableType)({...e,key:"global-custom-size-variable"})}},"./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx":function(e,a,r){r.r(a),r.d(a,{StyleVariablesRenderer:function(){return StyleVariablesRenderer}});var t=r("react"),n=r("@elementor/editor-v1-adapters"),o=r("@elementor/ui"),i=r("./packages/packages/core/editor-variables/src/style-variables-repository.ts");const s=":root";function StyleVariablesRenderer(){const e=function usePortalContainer(){return(0,n.__privateUseListenTo)((0,n.commandEndEvent)("editor/documents/attach-preview"),()=>(0,n.getCanvasIframeDocument)()?.head)}(),a=function useStyleVariables(){const[e,a]=(0,t.useState)({});return(0,t.useEffect)(()=>{const e=i.styleVariablesRepository.subscribe(a);return()=>{e()}},[]),e}(),r=Object.keys(a).length>0;if(!e||!r)return null;const l=function convertToCssVariables(e){return Object.entries(e).map(([e,a])=>function cssVariableDeclaration(e,a){const r=a?.deleted?e:a.label,t=a.value;return`--${r}:${t};`}(e,a)).join("")}(a),c=`${s}{${l}}`;return t.createElement(o.Portal,{container:e},t.createElement("style",{"data-e-style-id":"e-variables",key:c},c))}},"./packages/packages/core/editor-variables/src/repeater-injections.ts":function(e,a,r){r.r(a),r.d(a,{registerRepeaterInjections:function(){return registerRepeaterInjections}});var t=r("@elementor/editor-controls"),n=r("@elementor/editor-props"),o=r("./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx"),i=r("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts");function registerRepeaterInjections(){(0,t.injectIntoRepeaterItemIcon)({id:"color-variables-background-icon",component:o.BackgroundRepeaterColorIndicator,condition:({value:e})=>hasAssignedColorVariable(n.backgroundColorOverlayPropTypeUtil.extract(e)?.color)}),(0,t.injectIntoRepeaterItemIcon)({id:"color-variables-icon",component:o.BoxShadowRepeaterColorIndicator,condition:({value:e})=>hasAssignedColorVariable(n.shadowPropTypeUtil.extract(e)?.color)}),(0,t.injectIntoRepeaterItemLabel)({id:"color-variables-label",component:o.BackgroundRepeaterLabel,condition:({value:e})=>hasAssignedColorVariable(n.backgroundColorOverlayPropTypeUtil.extract(e)?.color)})}const hasAssignedColorVariable=e=>!!i.colorVariablePropTypeUtil.isValid(e)},"./packages/packages/core/editor-variables/src/service.ts":function(e,a,r){r.r(a),r.d(a,{service:function(){return c}});var t=r("@wordpress/i18n"),n=r("./packages/packages/core/editor-variables/src/api.ts"),o=r("./packages/packages/core/editor-variables/src/batch-operations.ts"),i=r("./packages/packages/core/editor-variables/src/storage.ts"),s=r("./packages/packages/core/editor-variables/src/style-variables-repository.ts");const l=new i.Storage,c={variables:()=>l.load(),findIdByLabel(e){const a=Object.entries(this.variables()).find(([,a])=>a.label===e);if(!a)throw new Error(`Variable with label ${e} not found`);return a[0]},findVariableByLabel(e){return Object.values(this.variables()).find(a=>a.label===e)||null},getWatermark:()=>l.state.watermark,init:()=>c.load(),load:()=>n.apiClient.list().then(e=>{const{success:a,data:r}=e.data;if(!a)throw new Error("Unexpected response from server");return r}).then(e=>{const{variables:a,watermark:r}=e;return l.fill(a,r),s.styleVariablesRepository.update(a),a}),create:({type:e,label:a,value:r})=>n.apiClient.create(e,a,r).then(e=>{const{success:a,data:r}=e.data;if(!a){const e=r?.message||(0,t.__)("Unexpected response from server","elementor");throw new Error(e)}return r}).then(e=>{const{variable:a,watermark:r}=e;handleWatermark(i.OP_RW,r);const{id:t,...n}=a;return l.add(t,n),s.styleVariablesRepository.update({[t]:n}),{id:t,variable:n}}),update:(e,{label:a,value:r,type:o})=>n.apiClient.update(e,a,r,o).then(e=>{const{success:a,data:r}=e.data;if(!a){const e=r?.message||(0,t.__)("Unexpected response from server","elementor");throw new Error(e)}return r}).then(e=>{const{variable:a,watermark:r}=e;handleWatermark(i.OP_RW,r);const{id:t,...n}=a;return l.update(t,n),s.styleVariablesRepository.update({[t]:n}),{id:t,variable:n}}),delete:e=>n.apiClient.delete(e).then(e=>{const{success:a,data:r}=e.data;if(!a)throw new Error("Unexpected response from server");return r}).then(e=>{const{variable:a,watermark:r}=e;handleWatermark(i.OP_RW,r);const{id:t,...n}=a;return l.update(t,n),s.styleVariablesRepository.update({[t]:n}),{id:t,variable:n}}),restore:(e,a,r,t)=>n.apiClient.restore(e,a,r,t).then(e=>{const{success:a,data:r}=e.data;if(!a)throw new Error("Unexpected response from server");return r}).then(e=>{const{variable:a,watermark:r}=e;handleWatermark(i.OP_RW,r);const{id:t,...n}=a;return l.update(t,n),s.styleVariablesRepository.update({[t]:n}),{id:t,variable:n}}),batchSave:(e,a,r)=>{const t=(0,o.buildOperationsArray)(e,a,r),c={operations:t,watermark:l.state.watermark};return 0===t.length?Promise.resolve({success:!0,watermark:l.state.watermark,operations:0}):n.apiClient.batch(c).then(e=>{const{success:a,data:r}=e.data;if(!a)throw new Error("Unexpected response from server");return r}).then(e=>{const{results:a,watermark:r}=e;return handleWatermark(i.OP_RW,r),a&&a.forEach(e=>{const a=e.id;e.variable&&("create"===e.type?l.add(a,e.variable):l.update(a,e.variable),s.styleVariablesRepository.update({[a]:e.variable}))}),{success:!0,watermark:r,operations:t.length}})}},handleWatermark=(e,a)=>{l.watermarkDiff(e,a)&&setTimeout(()=>c.load(),500),l.watermark(a)}},"./packages/packages/core/editor-variables/src/storage.ts":function(e,a,r){r.r(a),r.d(a,{OP_RW:function(){return o},Storage:function(){return Storage}});const t="elementor-global-variables",n="elementor-global-variables-watermark",o="RW";class Storage{notifyChange(){window.dispatchEvent(new Event("variables:updated"))}constructor(){this.state={watermark:-1,variables:{}}}load(){return this.state.watermark=parseInt(localStorage.getItem(n)||"-1"),this.state.variables=JSON.parse(localStorage.getItem(t)||"{}"),this.state.variables}fill(e,a){this.state.variables={},e&&Object.keys(e).length&&(this.state.variables=e),this.state.watermark=a,localStorage.setItem(n,this.state.watermark.toString()),localStorage.setItem(t,JSON.stringify(this.state.variables)),this.notifyChange()}add(e,a){this.load(),this.state.variables[e]=a,localStorage.setItem(t,JSON.stringify(this.state.variables)),this.notifyChange()}update(e,a){this.load(),this.state.variables[e]=a,localStorage.setItem(t,JSON.stringify(this.state.variables)),this.notifyChange()}watermark(e){this.state.watermark=e,localStorage.setItem(n,this.state.watermark.toString())}watermarkDiff(e,a){const r=a-this.state.watermark;return o===e?1!==r:"RO"===e&&0!==r}}},"./packages/packages/core/editor-variables/src/style-variables-repository.ts":function(e,a,r){r.r(a),r.d(a,{styleVariablesRepository:function(){return t}});const t=(0,r("./packages/packages/core/editor-variables/src/create-style-variables-repository.ts").createStyleVariablesRepository)()},"./packages/packages/core/editor-variables/src/transformers/empty-transformer.tsx":function(e,a,r){r.r(a),r.d(a,{EmptyTransformer:function(){return n}});var t=r("@elementor/editor-canvas");const n=(0,t.createTransformer)(e=>null)},"./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx":function(e,a,r){r.r(a),r.d(a,{inheritanceTransformer:function(){return u}});var t=r("react"),n=r("@elementor/editor-canvas"),o=r("@elementor/ui"),i=r("@wordpress/i18n"),s=r("./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx"),l=r("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts"),c=r("./packages/packages/core/editor-variables/src/service.ts"),p=r("./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts");const u=(0,n.createTransformer)(e=>{const a=c.service.variables()[e];if(!a)return t.createElement("span",null,(0,i.__)("Missing variable","elementor"));const r=a.type===l.colorVariablePropTypeUtil.key,n=(0,p.resolveCssVariable)(e,a);return t.createElement(o.Stack,{direction:"row",spacing:.5,sx:{paddingInline:"1px"},alignItems:"center"},r&&t.createElement(s.ColorIndicator,{size:"inherit",value:a.value}),t.createElement(o.Typography,{variant:"caption",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},n))})},"./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts":function(e,a,r){r.r(a),r.d(a,{resolveCssVariable:function(){return resolveCssVariable}});const resolveCssVariable=(e,a)=>{let r=e,t="";if(a&&(t=a.value),a&&!a.deleted&&(r=a.label),!r.trim())return null;const n=`--${r}`;return t.trim()?`var(${n}, ${t})`:`var(${n})`}},"./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts":function(e,a,r){r.r(a),r.d(a,{variableTransformer:function(){return i}});var t=r("@elementor/editor-canvas"),n=r("./packages/packages/core/editor-variables/src/service.ts"),o=r("./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts");const i=(0,t.createTransformer)(e=>{const a=n.service.variables()[e]||n.service.findVariableByLabel(e);if(!a)return null;const r=n.service.findIdByLabel(a.label);return(0,o.resolveCssVariable)(r,a)})},"./packages/packages/core/editor-variables/src/utils/filter-by-search.ts":function(e,a,r){function filterBySearch(e,a){const r=a.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(r))}r.r(a),r.d(a,{filterBySearch:function(){return filterBySearch}})},"./packages/packages/core/editor-variables/src/utils/llm-propvalue-label-resolver.ts":function(e,a,r){r.r(a),r.d(a,{globalVariablesLLMResolvers:function(){return n}});var t=r("./packages/packages/core/editor-variables/src/service.ts");const defaultResolver=e=>a=>{const r=String(a);return{$$type:e,value:t.service.variables()[r]?r:t.service.findIdByLabel(r)}},n={"global-color-variable":defaultResolver("global-color-variable"),"global-font-variable":defaultResolver("global-font-variable"),"global-size-variable":defaultResolver("global-size-variable")}},"./packages/packages/core/editor-variables/src/utils/tracking.ts":function(e,a,r){r.r(a),r.d(a,{trackVariableEvent:function(){return trackVariableEvent},trackVariableSyncToV3:function(){return trackVariableSyncToV3},trackVariablesManagerEvent:function(){return trackVariablesManagerEvent}});var t=r("@elementor/events");const trackVariableEvent=({varType:e,controlPath:a,action:r})=>{const{dispatchEvent:n,config:o}=(0,t.getMixpanel)();if(!o?.names?.variables?.[r])return;const i=o.names.variables[r];n?.(i,{location:o?.locations?.variables||"",secondaryLocation:o?.secondaryLocations?.variablesPopover||"",trigger:o?.triggers?.click||"",var_type:e,control_path:a,action_type:i})},trackVariablesManagerEvent=({action:e,varType:a,controlPath:r})=>{const{dispatchEvent:n,config:o}=(0,t.getMixpanel)();if(!o?.names?.variables?.[e])return;const i=o.names.variables[e],s={location:o?.locations?.variablesManager||"",trigger:o?.triggers?.click||"",action_type:i};a&&(s.var_type=a),r&&(s.style_control_path=r),n?.(i,s)},trackVariableSyncToV3=({variableLabel:e,action:a})=>{try{const{dispatchEvent:r,config:n}=(0,t.getMixpanel)();if(!n?.names?.variables?.variableSyncToV3)return;const o=n.names.variables.variableSyncToV3,i="sync"===a;r?.(o,{interaction_type:"click",target_type:e,target_name:i?"sync_to_v3":"unsync_to_v3",interaction_result:i?"var_is_synced_to_V3":"var_is_unsynced_from_V3",target_location:"widget_panel",location_l1:"var_manager",interaction_description:i?`user_synced_${e}_to_v3`:`user_unsync_${e}_from_v3`})}catch{}}},"./packages/packages/core/editor-variables/src/utils/unlink-variable.ts":function(e,a,r){r.r(a),r.d(a,{createUnlinkHandler:function(){return createUnlinkHandler},transformValueBeforeUnlink:function(){return transformValueBeforeUnlink}});var t=r("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");function transformValueBeforeUnlink(e,a){const{valueTransformer:r}=(0,t.getVariableType)(a);return r?r(e.value,e.type):e.value}function createUnlinkHandler(e,a,r){return()=>{const{fallbackPropTypeUtil:n}=(0,t.getVariableType)(a),o=transformValueBeforeUnlink(e,a);r(n.create(o))}}},"./packages/packages/core/editor-variables/src/utils/validations.ts":function(e,a,r){r.r(a),r.d(a,{ERROR_MESSAGES:function(){return o},VARIABLE_LABEL_MAX_LENGTH:function(){return i},labelHint:function(){return labelHint},mapServerError:function(){return mapServerError},validateLabel:function(){return validateLabel},validateValue:function(){return validateValue}});var t=r("@elementor/icons"),n=r("@wordpress/i18n");const o={MISSING_VARIABLE_NAME:(0,n.__)("Give your variable a name.","elementor"),MISSING_VARIABLE_VALUE:(0,n.__)("Add a value to complete your variable.","elementor"),INVALID_CHARACTERS:(0,n.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.","elementor"),NO_NON_SPECIAL_CHARACTER:(0,n.__)("Names have to include at least one non-special character.","elementor"),VARIABLE_LABEL_MAX_LENGTH:(0,n.__)("Keep names up to 50 characters.","elementor"),DUPLICATED_LABEL:(0,n.__)("This variable name already exists. Please choose a unique name.","elementor"),UNEXPECTED_ERROR:(0,n.__)("There was a glitch. Try saving your variable again.","elementor"),BATCH:{DUPLICATED_LABELS:(e,a)=>(0,n.sprintf)((0,n.__)("We found %1$d duplicated %2$s.","elementor"),e,a),UNEXPECTED_ERROR:(0,n.__)("There was a glitch.","elementor"),DUPLICATED_LABEL_ACTION:(0,n.__)("Take me there","elementor"),DUPLICATED_LABEL_ACTION_MESSAGE:(0,n.__)("Please rename the variables.","elementor"),UNEXPECTED_ERROR_ACTION_MESSAGE:(0,n.__)("Try saving your variables again.","elementor")}},i=50,mapServerError=e=>{if("duplicated_label"===e?.response?.data?.code)return{field:"label",message:o.DUPLICATED_LABEL};if("batch_duplicated_label"===e?.response?.data?.code){const a=e?.response?.data?.data??{},r=Object.keys(a).length,n=1===r?"name":"names",i=Object.keys(a);return{field:"label",message:o.BATCH.DUPLICATED_LABELS(r,n),severity:"error",IconComponent:t.AlertTriangleFilledIcon,action:{label:o.BATCH.DUPLICATED_LABEL_ACTION,message:o.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,data:{duplicatedIds:i}}}}return"batch_operation_failed"===e?.response?.data?.code?{field:"label",message:o.BATCH.UNEXPECTED_ERROR,severity:"secondary",IconComponent:t.InfoCircleFilledIcon,action:{message:o.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE}}:void 0},validateLabel=(e,a)=>{if(!e.trim())return o.MISSING_VARIABLE_NAME;if(!/^[a-zA-Z0-9_-]+$/.test(e))return o.INVALID_CHARACTERS;return/[a-zA-Z0-9]/.test(e)?i<e.length?o.VARIABLE_LABEL_MAX_LENGTH:Object.values(a??{}).some(a=>a.label===e)?o.DUPLICATED_LABEL:"":o.NO_NON_SPECIAL_CHARACTER},labelHint=e=>.8*i-1<e.length?o.VARIABLE_LABEL_MAX_LENGTH:"",validateValue=e=>e.trim()?"":o.MISSING_VARIABLE_VALUE},"./packages/packages/core/editor-variables/src/utils/variables-to-list.ts":function(e,a,r){r.r(a),r.d(a,{applySelectionFilters:function(){return applySelectionFilters},toNormalizedVariable:function(){return toNormalizedVariable},variablesToList:function(){return variablesToList}});const variablesToList=e=>Object.entries(e).map(([e,a])=>({key:e,...a})),toNormalizedVariable=({key:e,label:a,value:r,order:t,sync_to_v3:n})=>({key:e,label:a,value:r,order:t,sync_to_v3:n}),applySelectionFilters=(e,a)=>{const r={};return e.forEach(e=>(r[e.type]??=[]).push(e)),Object.entries(r).flatMap(([e,r])=>{const t=a[e]?.selectionFilter,n=r.map(toNormalizedVariable);return(t?.(n)??n).map(a=>({...a,type:e}))})}},"./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts":function(e,a,r){r.r(a),r.d(a,{createVariableTypeRegistry:function(){return createVariableTypeRegistry}});var t=r("@elementor/editor-canvas"),n=r("./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx"),o=r("./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts");function createVariableTypeRegistry(){const e={},registerTransformer=(e,a)=>{t.styleTransformersRegistry.register(e,a??o.variableTransformer)},registerInheritanceTransformer=e=>{t.stylesInheritanceTransformersRegistry.register(e,n.inheritanceTransformer)};return{registerVariableType:({key:a,icon:r,startIcon:t,valueField:n,propTypeUtil:o,variableType:i,defaultValue:s,selectionFilter:l,valueTransformer:c,styleTransformer:p,fallbackPropTypeUtil:u,isCompatible:d,emptyState:b,isActive:m=!0,menuActionsFactory:v})=>{const g=a??o.key;d||(d=(e,a)=>"union"===e.kind&&a.type in e.prop_types),e[g]={icon:r,startIcon:t,valueField:n,propTypeUtil:o,variableType:i,defaultValue:s,selectionFilter:l,valueTransformer:c,fallbackPropTypeUtil:u,isCompatible:d,emptyState:b,isActive:m,menuActionsFactory:v},registerTransformer(o.key,p),registerInheritanceTransformer(o.key)},getVariableType:a=>e[a],getVariableTypes:()=>e,hasVariableType:a=>a in e&&!!e[a].isActive}}},"./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts":function(e,a,r){r.r(a),r.d(a,{getMenuActionsForVariable:function(){return getMenuActionsForVariable},getVariableType:function(){return o},getVariableTypes:function(){return i},hasVariableType:function(){return s},registerVariableType:function(){return n}});var t=r("./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts");const{registerVariableType:n,getVariableType:o,getVariableTypes:i,hasVariableType:s}=(0,t.createVariableTypeRegistry)();function getMenuActionsForVariable(e,a){const r=o(e);return r?.menuActionsFactory?r.menuActionsFactory(a):[]}},"@elementor/editor":function(e){e.exports=window.elementorV2.editor},"@elementor/editor-canvas":function(e){e.exports=window.elementorV2.editorCanvas},"@elementor/editor-controls":function(e){e.exports=window.elementorV2.editorControls},"@elementor/editor-current-user":function(e){e.exports=window.elementorV2.editorCurrentUser},"@elementor/editor-mcp":function(e){e.exports=window.elementorV2.editorMcp},"@elementor/editor-panels":function(e){e.exports=window.elementorV2.editorPanels},"@elementor/editor-props":function(e){e.exports=window.elementorV2.editorProps},"@elementor/editor-ui":function(e){e.exports=window.elementorV2.editorUi},"@elementor/editor-v1-adapters":function(e){e.exports=window.elementorV2.editorV1Adapters},"@elementor/events":function(e){e.exports=window.elementorV2.events},"@elementor/http-client":function(e){e.exports=window.elementorV2.httpClient},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/menus":function(e){e.exports=window.elementorV2.menus},"@elementor/schema":function(e){e.exports=window.elementorV2.schema},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@elementor/utils":function(e){e.exports=window.elementorV2.utils},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React}},a={};function __webpack_require__(r){var t=a[r];if(void 0!==t)return t.exports;var n=a[r]={exports:{}};return e[r](n,n.exports,__webpack_require__),n.exports}__webpack_require__.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(a,{a:a}),a},__webpack_require__.d=function(e,a){for(var r in a)__webpack_require__.o(a,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},__webpack_require__.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};!function(){__webpack_require__.r(r),__webpack_require__.d(r,{GLOBAL_VARIABLES_URI:function(){return a.GLOBAL_VARIABLES_URI},Utils:function(){return l},getMenuActionsForVariable:function(){return i.getMenuActionsForVariable},hasVariable:function(){return s.hasVariable},init:function(){return e.init},registerVariableType:function(){return i.registerVariableType},registerVariableTypes:function(){return n.registerVariableTypes},service:function(){return o.service},sizeVariablePropTypeUtil:function(){return t.sizeVariablePropTypeUtil}});var e=__webpack_require__("./packages/packages/core/editor-variables/src/init.ts"),a=__webpack_require__("./packages/packages/core/editor-variables/src/mcp/variables-resource.ts"),t=__webpack_require__("./packages/packages/core/editor-variables/src/prop-types/size-variable-prop-type.ts"),n=__webpack_require__("./packages/packages/core/editor-variables/src/register-variable-types.tsx"),o=__webpack_require__("./packages/packages/core/editor-variables/src/service.ts"),i=__webpack_require__("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),s=__webpack_require__("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");const l={globalVariablesLLMResolvers:__webpack_require__("./packages/packages/core/editor-variables/src/utils/llm-propvalue-label-resolver.ts").globalVariablesLLMResolvers}}(),(window.elementorV2=window.elementorV2||{}).editorVariables=r}(),window.elementorV2.editorVariables?.init?.();
7305 3 //# sourceMappingURL=editor-variables.js.map