PluginProbe
Elementor Website Builder – more than just a page builder / 3.34.0-beta1
Elementor Website Builder – more than just a page builder v3.34.0-beta1
4.3.4 4.3.3 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 All 457 releases
← All changes | assets/js/packages/editor-variables/editor-variables.js +2 -7304 4.2.0-dev2 → 3.34.0-beta1 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,t){t.r(a),t.d(a,{apiClient:function(){return o}});var r=t("@elementor/http-client");const n="elementor/v1/variables",o={list:()=>(0,r.httpService)().get(n+"/list"),create:(e,a,t)=>(0,r.httpService)().post(n+"/create",{type:e,label:a,value:t}),update:(e,a,t)=>(0,r.httpService)().put(n+"/update",{id:e,label:a,value:t}),delete:e=>(0,r.httpService)().post(n+"/delete",{id:e}),restore:(e,a,t)=>{const o={id:e};return a&&(o.label=a),t&&(o.value=t),(0,r.httpService)().post(n+"/restore",o)},batch:e=>(0,r.httpService)().post(n+"/batch",e)}},"./packages/packages/core/editor-variables/src/batch-operations.ts":function(e,a,t){t.r(a),t.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)=>{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];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||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}}})}}),Object.entries(e).forEach(([e,r])=>{if(isTempId(e)||r.deleted)return;const n=a[e];n&&!n.deleted||t.push({type:"delete",id:e})}),t.filter(e=>{const t=e.id||e.variable?.id;return t&&!(isTempId(t)&&a[t]?.deleted)})}},"./packages/packages/core/editor-variables/src/components/fields/color-field.tsx":function(e,a,t){t.r(a),t.d(a,{ColorField:function(){return ColorField}});var r=t("react"),n=t("@elementor/ui"),o=t("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),i=t("./packages/packages/core/editor-variables/src/utils/validations.ts");const ColorField=({value:e,onChange:a,onValidationChange:t})=>{const[s,l]=(0,r.useState)(e),[c,p]=(0,r.useState)(""),u=(0,r.useRef)(null),d=(0,o.usePopoverContentRef)()??u.current;return r.createElement(n.UnstableColorField,{id:"color-variable-field",size:"tiny",fullWidth:!0,value:s,onChange:e=>{l(e);const r=(0,i.validateValue)(e);p(r),t?.(r),a(r?"":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,t){t.r(a),t.d(a,{FontField:function(){return FontField}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/editor-editing-panel"),i=t("@elementor/icons"),s=t("@elementor/ui"),l=t("@wordpress/i18n"),c=t("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),p=t("./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 t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const FontField=({value:e,onChange:a,onValidationChange:t})=>{const[u,d]=(0,r.useState)(e),b=(0,r.useRef)(null),m=(0,c.usePopoverContentRef)()??b.current,v=(0,s.usePopupState)({variant:"popover"}),g=(0,o.useFontFamilies)(),h=(0,o.useSectionWidth)(),f=r.useMemo(()=>g.map(({label:e,fonts:a})=>({label:e,items:a})),[g]),k=(0,r.useId)();return r.createElement(r.Fragment,null,r.createElement(s.UnstableTag,_extends({id:k,variant:"outlined",label:u,endIcon:r.createElement(i.ChevronDownIcon,{fontSize:"tiny"})},(0,s.bindTrigger)(v),{fullWidth:!0})),r.createElement(s.Popover,_extends({disablePortal:!0,disableScrollLock:!0,anchorEl:m,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-28}},(0,s.bindPopover)(v)),r.createElement(n.ItemSelector,{id:"font-family-variables-selector",itemsList:f,selectedItem:u,onItemChange:e=>{(e=>{d(e);const r=(0,p.validateValue)(e);t?.(r),a(r?"":e)})(e),v.close()},onClose:v.close,sectionWidth:h,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,t){t.r(a),t.d(a,{LabelField:function(){return LabelField},useLabelError:function(){return useLabelError}});var r=t("react"),n=t("@elementor/editor-ui"),o=t("@elementor/ui"),i=t("./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 t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}function isLabelEqual(e,a){return e.trim().toLowerCase()===a.trim().toLowerCase()}const useLabelError=e=>{const[a,t]=(0,r.useState)(e??{value:"",message:""});return{labelFieldError:a,setLabelFieldError:t}},LabelField=({value:e,error:a,onChange:t,id:s,onErrorChange:l,size:c="tiny",focusOnShow:p=!1,selectOnShow:u=!1,showWarningInfotip:d=!1,variables:b})=>{const[m,v]=(0,r.useState)(e),[g,h]=(0,r.useState)(""),f=(0,r.useRef)(null);let k=g;isLabelEqual(m,a?.value??"")&&a?.message&&(k=a.message);const y=k?"":(0,i.labelHint)(m),E=r.createElement(o.TextField,{ref:f,id:s,size:c,fullWidth:!0,value:m,error:!!k,onChange:e=>(e=>{v(e);const r=(0,i.validateLabel)(e,b);h(r),l?.(r),t(isLabelEqual(e,a?.value??"")||r?"":e)})(e.target.value),inputProps:{maxLength:i.VARIABLE_LABEL_MAX_LENGTH,...u&&{onFocus:e=>e.target.select()},"aria-label":"Name"},autoFocus:p});if(d){const e=Math.max(240,f.current?.getBoundingClientRect().width??240);return r.createElement(n.WarningInfotip,_extends({open:Boolean(k||y),text:k||y,placement:"bottom-start",width:e,offset:[0,-15]},y&&{hasError:!1}),E)}return E}},"./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx":function(e,a,t){t.r(a),t.d(a,{ColorIndicator:function(){return n}});var r=t("@elementor/ui");const n=(0,r.styled)(r.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,t){t.r(a),t.d(a,{DeleteConfirmationDialog:function(){return DeleteConfirmationDialog}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui"),i=t("@wordpress/i18n");const s="delete-variable-dialog",DeleteConfirmationDialog=({open:e,label:a,closeDialog:t,onConfirm:l})=>r.createElement(o.Dialog,{open:e,onClose:t,"aria-labelledby":s,maxWidth:"xs"},r.createElement(o.DialogTitle,{id:s,display:"flex",alignItems:"center",gap:1,sx:{lineHeight:1}},r.createElement(n.AlertOctagonFilledIcon,{color:"error"}),(0,i.__)("Delete this variable?","elementor")),r.createElement(o.DialogContent,null,r.createElement(o.DialogContentText,{variant:"body2",color:"textPrimary"},(0,i.__)("All elements using","elementor")," ",r.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"))),r.createElement(o.DialogActions,null,r.createElement(o.Button,{color:"secondary",onClick:t},(0,i.__)("Not now","elementor")),r.createElement(o.Button,{variant:"contained",color:"error",onClick:l},(0,i.__)("Delete","elementor"))))},"./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx":function(e,a,t){t.r(a),t.d(a,{DeletedVariableAlert:function(){return DeletedVariableAlert}});var r=t("react"),n=t("@elementor/ui"),o=t("@wordpress/i18n");const DeletedVariableAlert=({onClose:e,onUnlink:a,onRestore:t,label:i})=>r.createElement(n.ClickAwayListener,{onClickAway:e},r.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:r.createElement(r.Fragment,null,a&&r.createElement(n.AlertAction,{variant:"contained",onClick:a},(0,o.__)("Unlink","elementor")),t&&r.createElement(n.AlertAction,{variant:"outlined",onClick:t},(0,o.__)("Restore","elementor"))),sx:{maxWidth:300}},r.createElement(n.AlertTitle,null,(0,o.__)("Deleted variable","elementor")),r.createElement(n.Typography,{variant:"body2",color:"textPrimary"},(0,o.__)("The variable","elementor")," '",r.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,t){t.r(a),t.d(a,{EDIT_CONFIRMATION_DIALOG_ID:function(){return s},EditConfirmationDialog:function(){return EditConfirmationDialog}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui"),i=t("@wordpress/i18n");const s="edit-confirmation-dialog",EditConfirmationDialog=({closeDialog:e,onConfirm:a,onSuppressMessage:t})=>{const[s,l]=(0,r.useState)(!1);return r.createElement(o.Dialog,{open:!0,onClose:e,maxWidth:"xs"},r.createElement(o.DialogTitle,{display:"flex",alignItems:"center",gap:1},r.createElement(n.AlertTriangleFilledIcon,{color:"secondary"}),(0,i.__)("Changes to variables go live right away.","elementor")),r.createElement(o.DialogContent,null,r.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"))),r.createElement(o.DialogActions,{sx:{justifyContent:"space-between",alignItems:"center"}},r.createElement(o.FormControlLabel,{control:r.createElement(o.Checkbox,{checked:s,onChange:e=>l(e.target.checked),size:"small"}),label:r.createElement(o.Typography,{variant:"body2"},(0,i.__)("Don't show me again","elementor"))}),r.createElement("div",null,r.createElement(o.Button,{color:"secondary",onClick:e},(0,i.__)("Keep editing","elementor")),r.createElement(o.Button,{variant:"contained",color:"secondary",onClick:()=>{s&&t?.(),a?.()},sx:{ml:1}},(0,i.__)("Save","elementor")))))}},"./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx":function(e,a,t){t.r(a),t.d(a,{EmptyState:function(){return EmptyState}});var r=t("react"),n=t("@elementor/ui"),o=t("@wordpress/i18n"),i=t("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts");const EmptyState=({icon:e,title:a,message:t,onAdd:s})=>{const l=(0,i.usePermissions)().canAdd();return r.createElement(n.Stack,{gap:1,alignItems:"center",justifyContent:"flex-start",height:"100%",color:"text.secondary",sx:{p:2.5,pt:8,pb:5.5}},e,l?r.createElement(r.Fragment,null,r.createElement(Content,{title:a,message:t}),s&&r.createElement(n.Button,{variant:"outlined",color:"secondary",size:"small",onClick:s},(0,o.__)("Create a variable","elementor"))):r.createElement(Content,{title:(0,o.__)("There are no variables","elementor"),message:(0,o.__)("With your current role, you can only connect and detach variables.","elementor")}))};function Content({title:e,message:a}){return r.createElement(r.Fragment,null,r.createElement(n.Typography,{align:"center",variant:"subtitle2"},e),r.createElement(n.Typography,{align:"center",variant:"caption",maxWidth:"180px"},a))}},"./packages/packages/core/editor-variables/src/components/ui/form-field.tsx":function(e,a,t){t.r(a),t.d(a,{FormField:function(){return FormField}});var r=t("react"),n=t("@elementor/ui");const FormField=({id:e,label:a,errorMsg:t,noticeMsg:o,children:i})=>r.createElement(n.Grid,{container:!0,gap:.75,alignItems:"center"},r.createElement(n.Grid,{item:!0,xs:12},r.createElement(n.FormLabel,{htmlFor:e,size:"tiny"},a)),r.createElement(n.Grid,{item:!0,xs:12},i,t&&r.createElement(n.FormHelperText,{error:!0},t),o&&r.createElement(n.FormHelperText,null,o)))},"./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx":function(e,a,t){t.r(a),t.d(a,{MenuItemContent:function(){return MenuItemContent}});var r=t("react"),n=t("@elementor/editor-ui"),o=t("@elementor/icons"),i=t("@elementor/ui"),s=t("@wordpress/i18n");const l=(0,s.__)("Edit variable","elementor"),MenuItemContent=({item:e})=>{const a=e.onEdit;return r.createElement(r.Fragment,null,r.createElement(i.ListItemIcon,null,e.icon),r.createElement(i.Box,{sx:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:1}},r.createElement(n.EllipsisWithTooltip,{title:e.label||e.value,as:i.Typography,variant:"caption",color:"text.primary",sx:{marginTop:"1px",lineHeight:"2"},maxWidth:"50%"}),e.secondaryText&&r.createElement(n.EllipsisWithTooltip,{title:e.secondaryText,as:i.Typography,variant:"caption",color:"text.tertiary",sx:{marginTop:"1px",lineHeight:"1"},maxWidth:"50%"})),!!a&&r.createElement(i.Tooltip,{placement:"top",title:l},r.createElement(i.IconButton,{sx:{mx:1,opacity:"0"},onClick:t=>{t.stopPropagation(),a(e.value)},"aria-label":l},r.createElement(o.EditIcon,{color:"action",fontSize:"tiny"}))))}},"./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx":function(e,a,t){t.r(a),t.d(a,{MismatchVariableAlert:function(){return MismatchVariableAlert}});var r=t("react"),n=t("@elementor/ui"),o=t("@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:t})=>r.createElement(n.ClickAwayListener,{onClickAway:e},r.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:r.createElement(r.Fragment,null,a&&r.createElement(n.AlertAction,{variant:"contained",onClick:a},i.buttons.clear),t&&r.createElement(n.AlertAction,{variant:"outlined",onClick:t},i.buttons.select)),sx:{maxWidth:300}},r.createElement(n.AlertTitle,null,i.title),r.createElement(n.Typography,{variant:"body2",color:"textPrimary"},i.message)))},"./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx":function(e,a,t){t.r(a),t.d(a,{MissingVariableAlert:function(){return MissingVariableAlert}});var r=t("react"),n=t("@elementor/ui"),o=t("@wordpress/i18n");const MissingVariableAlert=({onClose:e,onClear:a})=>r.createElement(n.ClickAwayListener,{onClickAway:e},r.createElement(n.Alert,{variant:"standard",severity:"warning",onClose:e,action:r.createElement(r.Fragment,null,a&&r.createElement(n.AlertAction,{variant:"contained",onClick:a},(0,o.__)("Clear","elementor"))),sx:{maxWidth:300}},r.createElement(n.AlertTitle,null,(0,o.__)("This variable is missing","elementor")),r.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,t){t.r(a),t.d(a,{NoSearchResults:function(){return NoSearchResults}});var r=t("react"),n=t("@elementor/ui"),o=t("@wordpress/i18n");const NoSearchResults=({searchValue:e,onClear:a,icon:t})=>r.createElement(n.Stack,{gap:1,alignItems:"center",justifyContent:"center",p:2.5,color:"text.secondary",sx:{pb:3.5,pt:8}},t,r.createElement(n.Typography,{align:"center",variant:"subtitle2"},(0,o.__)("Sorry, nothing matched","elementor"),r.createElement("br",null),"“",e,"”."),r.createElement(n.Typography,{align:"center",variant:"caption",sx:{display:"flex",flexDirection:"column"}},(0,o.__)("Try something else.","elementor"),r.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,t){t.r(a),t.d(a,{VariablesStyledMenuList:function(){return n}});var r=t("@elementor/ui");const n=(0,r.styled)(r.MenuList)(({theme:e})=>({"& > li":{height:32,width:"100%",display:"flex",alignItems:"center"},'& > [role="option"]':{...e.typography.caption,lineHeight:"inherit",padding:e.spacing(.5,1,.5,2),"&:hover, &:focus":{backgroundColor:e.palette.action.hover},'&[aria-selected="true"]':{backgroundColor:e.palette.action.selected},cursor:"pointer",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,t){t.r(a),t.d(a,{AssignedTag:function(){return AssignedTag},SIZE:function(){return s}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui"),i=t("@wordpress/i18n");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const s="tiny",l=(0,i.__)("Unlink variable","elementor"),AssignedTag=({startIcon:e,label:a,onUnlink:t,...i})=>{const c=[];return t&&c.push(r.createElement(o.Tooltip,{key:"unlink",title:l,placement:"bottom"},r.createElement(o.IconButton,{size:s,onClick:t,"aria-label":l},r.createElement(n.DetachIcon,{fontSize:s})))),r.createElement(o.Tooltip,{title:a,placement:"top"},r.createElement(o.UnstableTag,_extends({fullWidth:!0,showActionsOnHover:!0,startIcon:r.createElement(o.Stack,{gap:.5,direction:"row",alignItems:"center"},e),label:r.createElement(o.Box,{sx:{display:"inline-grid",minWidth:0}},r.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,t){t.r(a),t.d(a,{WarningVariableTag:function(){return i}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const i=r.forwardRef(({label:e,suffix:a,onClick:t,icon:i,...s},l)=>{const c=a?`${e} (${a})`:e;return r.createElement(o.Chip,_extends({ref:l,size:"tiny",color:"warning",shape:"rounded",variant:"standard",onClick:t,icon:r.createElement(n.AlertTriangleFilledIcon,null),label:r.createElement(o.Tooltip,{title:c,placement:"top"},r.createElement(o.Box,{sx:{display:"inline-grid",minWidth:0}},r.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/assigned-variable.tsx":function(e,a,t){t.r(a),t.d(a,{AssignedVariable:function(){return AssignedVariable}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/icons"),i=t("@elementor/ui"),s=t("./packages/packages/core/editor-variables/src/utils/unlink-variable.ts"),l=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),c=t("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),p=t("./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 t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const AssignedVariable=({variable:e,propTypeKey:a})=>{const{startIcon:t,propTypeUtil:u}=(0,l.getVariableType)(a),{setValue:d}=(0,n.useBoundProp)(),b=(0,r.useRef)(null),m=(0,r.useId)(),v=(0,i.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${m}`}),g=(0,s.createUnlinkHandler)(e,a,d),h=t||(()=>null);return r.createElement(i.Box,{ref:b},r.createElement(p.AssignedTag,_extends({label:e.label,startIcon:r.createElement(r.Fragment,null,r.createElement(o.ColorFilterIcon,{fontSize:p.SIZE}),r.createElement(h,{value:e.value})),onUnlink:g},(0,i.bindTrigger)(v))),r.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)),r.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,t){t.r(a),t.d(a,{DeletedVariable:function(){return DeletedVariable}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/ui"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),l=t("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),c=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),p=t("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),u=t("./packages/packages/core/editor-variables/src/utils/unlink-variable.ts"),d=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),b=t("./packages/packages/core/editor-variables/src/components/variable-restore.tsx"),m=t("./packages/packages/core/editor-variables/src/components/ui/deleted-variable-alert.tsx"),v=t("./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 t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const DeletedVariable=({variable:e,propTypeKey:a})=>{const{propTypeUtil:t}=(0,d.getVariableType)(a),g=(0,n.useBoundProp)(),h=(0,l.usePermissions)(),[f,k]=(0,r.useState)(!1),closeInfotip=()=>k(!1),y=(0,r.useRef)(null),E=(0,r.useId)(),_=(0,o.usePopupState)({variant:"popover",popupId:`elementor-variables-restore-${E}`}),x={};h.canUnlink()&&(x.onUnlink=(0,u.createUnlinkHandler)(e,a,g.setValue)),h.canRestore()&&(x.onRestore=()=>{e.key&&(0,c.restoreVariable)(e.key).then(e=>{(0,p.resolveBoundPropAndSetValue)(t.create(e),g),closeInfotip()}).catch(()=>{closeInfotip(),_.setAnchorEl(y.current),_.open()})});return r.createElement(r.Fragment,null,r.createElement(o.Box,{ref:y},f&&r.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),r.createElement(o.Infotip,{color:"warning",placement:"right-start",open:f,disableHoverListener:!0,onClose:closeInfotip,content:r.createElement(m.DeletedVariableAlert,{onClose:closeInfotip,onUnlink:x.onUnlink,onRestore:x.onRestore,label:e.label}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},r.createElement(v.WarningVariableTag,{label:e.label,onClick:()=>k(e=>!e),suffix:(0,i.__)("deleted","elementor")})),r.createElement(o.Popover,_extends({disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,o.bindPopover)(_)),r.createElement(s.VariableTypeProvider,{propTypeKey:a},r.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,t){t.r(a),t.d(a,{MismatchVariable:function(){return MismatchVariable}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/ui"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),l=t("./packages/packages/core/editor-variables/src/components/ui/mismatch-variable-alert.tsx"),c=t("./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 t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const MismatchVariable=({variable:e})=>{const{setValue:a,value:t}=(0,n.useBoundProp)(),p=(0,r.useRef)(null),u=(0,r.useId)(),d=(0,o.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${u}`}),[b,m]=(0,r.useState)(!1),closeInfotip=()=>m(!1),v=!!t;return r.createElement(o.Box,{ref:p},b&&r.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),r.createElement(o.Infotip,{color:"warning",placement:"right-start",open:b,disableHoverListener:!0,onClose:closeInfotip,content:r.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]}}]}}},r.createElement(c.WarningVariableTag,{label:e.label,onClick:()=>m(e=>!e),suffix:(0,i.__)("changed","elementor")})),r.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)),r.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,t){t.r(a),t.d(a,{MissingVariable:function(){return MissingVariable}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/ui"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/components/ui/missing-variable-alert.tsx"),l=t("./packages/packages/core/editor-variables/src/components/ui/tags/warning-variable-tag.tsx");const MissingVariable=()=>{const{setValue:e}=(0,n.useBoundProp)(),[a,t]=(0,r.useState)(!1),closeInfotip=()=>t(!1);return r.createElement(r.Fragment,null,a&&r.createElement(o.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),r.createElement(o.Infotip,{color:"warning",placement:"right-start",open:a,disableHoverListener:!0,onClose:closeInfotip,content:r.createElement(s.MissingVariableAlert,{onClose:closeInfotip,onClear:()=>e(null)}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},r.createElement(l.WarningVariableTag,{label:(0,i.__)("Missing variable","elementor"),onClick:()=>t(e=>!e)})))}},"./packages/packages/core/editor-variables/src/components/variable-creation.tsx":function(e,a,t){t.r(a),t.d(a,{VariableCreation:function(){return VariableCreation}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/editor-editing-panel"),i=t("@elementor/editor-ui"),s=t("@elementor/icons"),l=t("@elementor/ui"),c=t("@wordpress/i18n"),p=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),u=t("./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts"),d=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),b=t("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),m=t("./packages/packages/core/editor-variables/src/utils/tracking.ts"),v=t("./packages/packages/core/editor-variables/src/utils/validations.ts"),g=t("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),h=t("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const f="tiny",VariableCreation=({onGoBack:e,onClose:a})=>{const{icon:t,valueField:k,variableType:y,propTypeUtil:E}=(0,p.useVariableType)(),{setVariableValue:_,path:x}=(0,b.useVariableBoundProp)(),{propType:C}=(0,n.useBoundProp)(),T=(0,u.useInitialValue)(),[V,w]=(0,r.useState)(T),[S,I]=(0,r.useState)(""),[P,A]=(0,r.useState)(""),[R,O]=(0,r.useState)(""),{labelFieldError:B,setLabelFieldError:L}=(0,g.useLabelError)(),closePopover=()=>{w(""),I(""),A(""),O(""),a()},D=""===S.trim()||("string"==typeof V?""===V.trim():!1===Boolean(V))||!!P;return r.createElement(o.PopoverBody,{height:"auto"},r.createElement(i.PopoverHeader,{icon:r.createElement(r.Fragment,null,e&&r.createElement(l.IconButton,{size:f,"aria-label":(0,c.__)("Go Back","elementor"),onClick:e},r.createElement(s.ArrowLeftIcon,{fontSize:f})),r.createElement(t,{fontSize:f})),title:(0,c.__)("Create variable","elementor"),onClose:closePopover}),r.createElement(l.Divider,null),r.createElement(n.PopoverContent,{p:2},r.createElement(h.FormField,{id:"variable-label",label:(0,c.__)("Name","elementor"),errorMsg:B?.message,noticeMsg:(0,v.labelHint)(S)},r.createElement(g.LabelField,{id:"variable-label",value:S,error:B,onChange:e=>{I(e),A("")},onErrorChange:e=>{L({value:S,message:e})}})),r.createElement(h.FormField,{errorMsg:R,label:(0,c.__)("Value","elementor")},r.createElement(l.Typography,{variant:"h5",id:"variable-value-wrapper"},r.createElement(k,{value:V,onChange:e=>{w(e),A(""),O("")},onValidationChange:O,propType:C}))),P&&r.createElement(l.FormHelperText,{error:!0},P)),r.createElement(l.CardActions,{sx:{pt:.5,pb:1}},r.createElement(l.Button,{id:"create-variable-button",size:"small",variant:"contained",disabled:D,onClick:()=>{(0,d.createVariable)({value:V,label:S,type:E.key}).then(e=>{_(e),closePopover()}).catch(e=>{const a=(0,v.mapServerError)(e);if(a&&"label"===a.field)return I(""),void L({value:S,message:a.message});A(v.ERROR_MESSAGES.UNEXPECTED_ERROR)}),(0,m.trackVariableEvent)({varType:y,controlPath:x.join("."),action:"save"})}},(0,c.__)("Create","elementor"))))}},"./packages/packages/core/editor-variables/src/components/variable-edit.tsx":function(e,a,t){t.r(a),t.d(a,{VariableEdit:function(){return VariableEdit}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/editor-current-user"),i=t("@elementor/editor-editing-panel"),s=t("@elementor/editor-ui"),l=t("@elementor/icons"),c=t("@elementor/ui"),p=t("@wordpress/i18n"),u=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),d=t("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),b=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),m=t("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),v=t("./packages/packages/core/editor-variables/src/style-variables-repository.ts"),g=t("./packages/packages/core/editor-variables/src/utils/validations.ts"),h=t("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),f=t("./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx"),k=t("./packages/packages/core/editor-variables/src/components/ui/edit-confirmation-dialog.tsx"),y=t("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const E="tiny",_=(0,p.__)("Delete variable","elementor"),VariableEdit=({onClose:e,onGoBack:a,onSubmit:t,editId:x})=>{const{icon:C,valueField:T,variableType:V}=(0,u.useVariableType)(),{setVariableValue:w,variableId:S}=(0,m.useVariableBoundProp)(),{propType:I}=(0,n.useBoundProp)(),[P,A]=(0,o.useSuppressedMessage)(k.EDIT_CONFIRMATION_DIALOG_ID),[R,O]=(0,r.useState)(!1),[B,L]=(0,r.useState)(!1),[D,M]=(0,r.useState)(""),[F,U]=(0,r.useState)(""),{labelFieldError:z,setLabelFieldError:N}=(0,h.useLabelError)(),j=(0,b.useVariable)(x);if(!j)throw new Error(`Global ${V} variable not found`);const W=(0,d.usePermissions)(),[H,q]=(0,r.useState)(()=>j.value),[G,$]=(0,r.useState)(()=>j.label);(0,r.useEffect)(()=>(v.styleVariablesRepository.update({[x]:{...j,value:H}}),()=>{v.styleVariablesRepository.update({[x]:{...j}})}),[x,H,j]);const handleSaveVariable=()=>{(0,b.updateVariable)(x,{value:H,label:G}).then(()=>{maybeTriggerBoundPropChange(),t?.()}).catch(e=>{const a=(0,g.mapServerError)(e);if(a&&"label"===a.field)return $(""),void N({value:G,message:a.message});M(g.ERROR_MESSAGES.UNEXPECTED_ERROR)})},maybeTriggerBoundPropChange=()=>{x===S&&w(x)},handleDeleteConfirmation=()=>{O(!0)},X=[];W.canDelete()&&X.push(r.createElement(c.Tooltip,{key:"delete",placement:"top",title:_},r.createElement(c.IconButton,{size:E,onClick:handleDeleteConfirmation,"aria-label":_},r.createElement(l.TrashIcon,{fontSize:E}))));const K=H===j.value&&G===j.label||""===G.trim()||("string"==typeof H?""===H.trim():!1===Boolean(H))||!!D;return r.createElement(r.Fragment,null,r.createElement(i.PopoverBody,{height:"auto"},r.createElement(s.PopoverHeader,{title:(0,p.__)("Edit variable","elementor"),onClose:e,icon:r.createElement(r.Fragment,null,a&&r.createElement(c.IconButton,{size:E,"aria-label":(0,p.__)("Go Back","elementor"),onClick:a},r.createElement(l.ArrowLeftIcon,{fontSize:E})),r.createElement(C,{fontSize:E})),actions:X}),r.createElement(c.Divider,null),r.createElement(n.PopoverContent,{p:2},r.createElement(y.FormField,{id:"variable-label",label:(0,p.__)("Name","elementor"),errorMsg:z?.message,noticeMsg:(0,g.labelHint)(G)},r.createElement(h.LabelField,{id:"variable-label",value:G,error:z,onChange:e=>{$(e),M("")},onErrorChange:e=>{N({value:G,message:e})}})),r.createElement(y.FormField,{errorMsg:F,label:(0,p.__)("Value","elementor")},r.createElement(c.Typography,{variant:"h5"},r.createElement(T,{value:H,onChange:e=>{q(e),M(""),U("")},onValidationChange:U,propType:I}))),D&&r.createElement(c.FormHelperText,{error:!0},D)),r.createElement(c.CardActions,{sx:{pt:.5,pb:1}},r.createElement(c.Button,{size:"small",variant:"contained",disabled:K,onClick:()=>{P?handleSaveVariable():L(!0)}},(0,p.__)("Save","elementor")))),R&&r.createElement(f.DeleteConfirmationDialog,{open:!0,label:G,onConfirm:()=>{(0,b.deleteVariable)(x).then(()=>{maybeTriggerBoundPropChange(),t?.()})},closeDialog:()=>{O(!1)}}),B&&!P&&r.createElement(k.EditConfirmationDialog,{closeDialog:()=>{L(!1)},onConfirm:handleSaveVariable,onSuppressMessage:A}))}},"./packages/packages/core/editor-variables/src/components/variable-restore.tsx":function(e,a,t){t.r(a),t.d(a,{VariableRestore:function(){return VariableRestore}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("@elementor/editor-editing-panel"),i=t("@elementor/editor-ui"),s=t("@elementor/ui"),l=t("@wordpress/i18n"),c=t("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),p=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),u=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),d=t("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),b=t("./packages/packages/core/editor-variables/src/utils/validations.ts"),m=t("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),v=t("./packages/packages/core/editor-variables/src/components/ui/form-field.tsx");const VariableRestore=({variableId:e,onClose:a,onSubmit:t})=>{const{icon:g,valueField:h,variableType:f}=(0,p.useVariableType)(),{setVariableValue:k}=(0,d.useVariableBoundProp)(),{propType:y}=(0,n.useBoundProp)(),E=(0,u.useVariable)(e);if(!E)throw new Error(`Global ${f} variable not found`);const[_,x]=(0,r.useState)(""),[C,T]=(0,r.useState)(""),[V,w]=(0,r.useState)(E.label),[S,I]=(0,r.useState)(E.value),{labelFieldError:P,setLabelFieldError:A}=(0,m.useLabelError)({value:E.label,message:b.ERROR_MESSAGES.DUPLICATED_LABEL}),R=S===E.value&&V===E.label||""===V.trim()||("string"==typeof S?""===S.trim():!1===Boolean(S))||!!_;return r.createElement(c.PopoverContentRefContextProvider,null,r.createElement(o.PopoverBody,{height:"auto"},r.createElement(i.PopoverHeader,{icon:r.createElement(g,{fontSize:"tiny"}),title:(0,l.__)("Restore variable","elementor"),onClose:a}),r.createElement(s.Divider,null),r.createElement(n.PopoverContent,{p:2},r.createElement(v.FormField,{id:"variable-label",label:(0,l.__)("Name","elementor"),errorMsg:P?.message,noticeMsg:(0,b.labelHint)(V)},r.createElement(m.LabelField,{id:"variable-label",value:V,error:P,onChange:e=>{w(e),x("")},onErrorChange:e=>{A({value:V,message:e})}})),r.createElement(v.FormField,{errorMsg:C,label:(0,l.__)("Value","elementor")},r.createElement(s.Typography,{variant:"h5"},r.createElement(h,{value:S,onChange:e=>{I(e),x(""),T("")},onValidationChange:T,propType:y}))),_&&r.createElement(s.FormHelperText,{error:!0},_)),r.createElement(s.CardActions,{sx:{pt:.5,pb:1}},r.createElement(s.Button,{size:"small",variant:"contained",disabled:R,onClick:()=>{(0,u.restoreVariable)(e,V,S).then(()=>{k(e),t?.()}).catch(e=>{const a=(0,b.mapServerError)(e);if(a&&"label"===a.field)return w(""),void A({value:V,message:a.message});x(b.ERROR_MESSAGES.UNEXPECTED_ERROR)})}},(0,l.__)("Restore","elementor")))))}},"./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx":function(e,a,t){t.r(a),t.d(a,{VariableSelectionPopover:function(){return VariableSelectionPopover}});var r=t("react"),n=t("@elementor/editor-v1-adapters"),o=t("./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx"),i=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),s=t("./packages/packages/core/editor-variables/src/hooks/use-permissions.ts"),l=t("./packages/packages/core/editor-variables/src/components/variable-creation.tsx"),c=t("./packages/packages/core/editor-variables/src/components/variable-edit.tsx"),p=t("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx"),u=t("./packages/packages/core/editor-variables/src/components/variables-selection.tsx");const d="list",b="add",m="edit",VariableSelectionPopover=({closePopover:e,propTypeKey:a,selectedVariable:t})=>{const[v,g]=(0,r.useState)(d),[h,f]=(0,r.useState)(""),{open:k}=(0,p.usePanelActions)(),y=(0,n.isExperimentActive)("e_variables_manager")?()=>{k()}:void 0;return r.createElement(i.VariableTypeProvider,{propTypeKey:a},r.createElement(o.PopoverContentRefContextProvider,null,function RenderView(e){const a=(0,s.usePermissions)(),t={onClose:()=>{e.closePopover()},onGoBack:()=>{e.setCurrentView(d)}};a.canAdd()&&(t.onAdd=()=>{e.setCurrentView(b)});a.canEdit()&&(t.onEdit=a=>{e.setEditId(a),e.setCurrentView(m)});a.canManageSettings()&&e.onSettings&&(t.onSettings=()=>{e.closePopover(),e.onSettings?.()});const handleSubmitOnEdit=()=>{e?.selectedVariable?.key===e.editId?t.onClose():t.onGoBack?.()};if(d===e.currentView)return r.createElement(u.VariablesSelection,{closePopover:t.onClose,onAdd:t.onAdd,onEdit:t.onEdit,onSettings:t.onSettings});if(b===e.currentView)return r.createElement(l.VariableCreation,{onGoBack:t.onGoBack,onClose:t.onClose});if(m===e.currentView)return r.createElement(c.VariableEdit,{editId:e.editId,onGoBack:t.onGoBack,onClose:t.onClose,onSubmit:handleSubmitOnEdit});return null}({propTypeKey:a,currentView:v,selectedVariable:t,editId:h,setEditId:f,setCurrentView:g,closePopover:e,onSettings:y})))}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts":function(e,a,t){t.r(a),t.d(a,{useAutoEdit:function(){return useAutoEdit}});var r=t("react");const useAutoEdit=()=>{const[e,a]=(0,r.useState)(void 0);return{autoEditVariableId:e,startAutoEdit:(0,r.useCallback)(e=>{a(e)},[]),handleAutoEditComplete:(0,r.useCallback)(()=>{setTimeout(()=>{a(void 0)},100)},[])}}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts":function(e,a,t){t.r(a),t.d(a,{useErrorNavigation:function(){return useErrorNavigation}});var r=t("react");const useErrorNavigation=()=>{const e=(0,r.useRef)(0);return{createNavigationCallback:(0,r.useCallback)((a,t,r)=>()=>{if(!a?.length)return;const n=e.current,o=a[n];if(o){t(o);const i=n+1;i>=a.length?(r(),e.current=0):e.current=i}},[]),resetNavigation:(0,r.useCallback)(()=>{e.current=0},[])}}},"./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts":function(e,a,t){t.r(a),t.d(a,{useVariablesManagerState:function(){return useVariablesManagerState}});var r=t("react"),n=t("./packages/packages/core/editor-variables/src/batch-operations.ts"),o=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),i=t("./packages/packages/core/editor-variables/src/service.ts"),s=t("./packages/packages/core/editor-variables/src/utils/filter-by-search.ts");const useVariablesManagerState=()=>{const[e,a]=(0,r.useState)(()=>(0,o.getVariables)(!1)),[t,l]=(0,r.useState)([]),[c,p]=(0,r.useState)(!1),[u,d]=(0,r.useState)(!1),[b,m]=(0,r.useState)(!1),[v,g]=(0,r.useState)(""),h=(0,r.useCallback)(t=>{a({...e,...t}),d(!0)},[e]),f=(0,r.useCallback)((e,t,r)=>{const o=(0,n.generateTempId)(),i={id:o,label:t.trim(),value:r.trim(),type:e};return a(e=>({...e,[o]:i})),d(!0),o},[]),k=(0,r.useCallback)(e=>{l(a=>[...a,e]),a(a=>({...a,[e]:{...a[e],deleted:!0}})),d(!0)},[]),y=(0,r.useCallback)(async()=>{const t=(0,o.getVariables)(!1);m(!0);const r=await i.service.batchSave(t,e);if(r.success){await i.service.load();const e=i.service.variables();a(e),l([]),d(!1)}return{success:r.success}},[e]);return{variables:(()=>{const a=Object.entries(e).map(([e,a])=>({...a,id:e})),t=(0,s.filterBySearch)(a,v);return Object.fromEntries(t.map(({id:e,...a})=>[e,a]))})(),deletedVariables:t,isDirty:u,isSaveDisabled:c,handleOnChange:h,createVariable:f,handleDeleteVariable:k,handleSave:y,isSaving:b,handleSearch:e=>{g(e)},searchValue:v,setIsSaving:m,setIsSaveDisabled:p}}},"./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx":function(e,a,t){t.r(a),t.d(a,{VariableEditMenu:function(){return VariableEditMenu}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const VariableEditMenu=({menuActions:e,disabled:a,itemId:t})=>{const i=(0,o.usePopupState)({variant:"popover"});return r.createElement(r.Fragment,null,r.createElement(o.IconButton,_extends({},(0,o.bindTrigger)(i),{disabled:a,size:"tiny"}),r.createElement(n.DotsVerticalIcon,{fontSize:"tiny"})),r.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=>r.createElement(o.MenuItem,{key:e.name,onClick:()=>{e.onClick?.(t),i.close()},sx:{color:e.color,gap:1}},e.icon&&(0,r.createElement)(e.icon,{fontSize:"inherit"})," ",e.name))))}},"./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx":function(e,a,t){t.r(a),t.d(a,{VariableTableCell:function(){return VariableTableCell}});var r=t("react"),n=t("@elementor/ui");const VariableTableCell=({children:e,isHeader:a,width:t,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"},...t&&{width:t},...l};return r.createElement(n.TableCell,{size:"small",padding:s?"none":void 0,align:i,sx:c},e)}},"./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx":function(e,a,t){t.r(a),t.d(a,{VariableEditableCell:function(){return i}});var r=t("react"),n=t("@elementor/ui"),o=t("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx");const i=r.memo(({initialValue:e,children:a,editableElement:t,onChange:i,prefixElement:s,autoEdit:l=!1,onRowRef:c,onAutoEditComplete:p,gap:u=1,fieldType:d})=>{const[b,m]=(0,r.useState)(e),[v,g]=(0,r.useState)(!1),{labelFieldError:h,setLabelFieldError:f}=(0,o.useLabelError)(),[k,y]=(0,r.useState)(""),E=(0,r.useRef)(null),_=(0,r.useCallback)(()=>{"label"===d&&h?.message||"value"===d&&k||i(b),g(!1)},[b,i,d,h,k]);(0,r.useEffect)(()=>{c?.(E?.current)},[c]),(0,r.useEffect)(()=>{l&&!v&&(g(!0),p?.())},[l,v,p]);const handleDoubleClick=()=>{g(!0)},handleKeyDown=e=>{"Enter"===e.key?_():"Escape"===e.key&&g(!1)," "!==e.key||v||(e.preventDefault(),g(!0))},x=(0,r.useCallback)(e=>{m(e)},[]),C=(0,r.useCallback)(e=>{"label"===d?f({value:b,message:e}):y(e)},[d,b,f,y]);let T;"label"===d?T=h:"value"===d&&(T={value:b,message:k});const V=t({value:b,onChange:x,onValidationChange:C,error:T});return v?r.createElement(n.ClickAwayListener,{onClickAway:_},r.createElement(n.Stack,{ref:E,direction:"row",alignItems:"center",gap:u,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:0,role:"button","aria-label":"Double click or press Space to edit"},s,V)):r.createElement(n.Stack,{ref:E,direction:"row",alignItems:"center",gap:u,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:0,role:"button","aria-label":"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,t){t.r(a),t.d(a,{SIZE:function(){return c},VariableManagerCreateMenu:function(){return VariableManagerCreateMenu}});var r=t("react"),n=t("@elementor/icons"),o=t("@elementor/ui"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/utils/tracking.ts"),l=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const c="tiny",VariableManagerCreateMenu=({variables:e,onCreate:a,disabled:t,menuState:p})=>{const u=(0,r.useRef)(null),d=(0,l.getVariableTypes)(),b=Object.entries(d).map(([t,r])=>{const n=r.variableType.charAt(0).toUpperCase()+r.variableType.slice(1);return{key:t,name:n,icon:r.icon,onClick:()=>{const n=getDefaultName(e,t,r.variableType);a(t,n,r.defaultValue||""),(0,s.trackVariablesManagerEvent)({action:"add",varType:r.variableType})}}});return r.createElement(r.Fragment,null,r.createElement(o.IconButton,_extends({},(0,o.bindTrigger)(p),{ref:u,disabled:t,size:c,"aria-label":(0,i.__)("Add variable","elementor")}),r.createElement(n.PlusIcon,{fontSize:c})),r.createElement(o.Menu,_extends({disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6}},(0,o.bindMenu)(p),{anchorEl:u.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},"data-testid":"variable-manager-create-menu"}),b.map(e=>r.createElement(o.MenuItem,{key:e.key,onClick:()=>{e.onClick?.(),p.close()},sx:{gap:1.5}},(0,r.createElement)(e.icon,{fontSize:c,color:"action"}),r.createElement(o.Typography,{variant:"caption",color:"text.primary"},e.name)))))},getDefaultName=(e,a,t)=>{const r=Object.values(e).filter(e=>e.type===a).map(e=>e.label);let n=1,o=`${t}-${n}`;for(;r.includes(o);)n++,o=`${t}-${n}`;return o}},"./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx":function(e,a,t){t.r(a),t.d(a,{VariablesManagerPanel:function(){return VariablesManagerPanel},panel:function(){return _},usePanelActions:function(){return x}});var r=t("react"),n=t("@elementor/editor-panels"),o=t("@elementor/editor-ui"),i=t("@elementor/editor-v1-adapters"),s=t("@elementor/icons"),l=t("@elementor/ui"),c=t("@wordpress/i18n"),p=t("./packages/packages/core/editor-variables/src/utils/tracking.ts"),u=t("./packages/packages/core/editor-variables/src/utils/validations.ts"),d=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),b=t("./packages/packages/core/editor-variables/src/components/ui/delete-confirmation-dialog.tsx"),m=t("./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx"),v=t("./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx"),g=t("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-auto-edit.ts"),h=t("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-error-navigation.ts"),f=t("./packages/packages/core/editor-variables/src/components/variables-manager/hooks/use-variables-manager-state.ts"),k=t("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-create-menu.tsx"),y=t("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx");const E="variables-manager",{panel:_,usePanelActions:x}=(0,n.__createPanel)({id:E,component:VariablesManagerPanel,allowedEditModes:["edit",E],onOpen:()=>{(0,i.changeEditMode)(E)},onClose:()=>{(0,i.changeEditMode)("edit")},isOpenPreviousElement:!0});function VariablesManagerPanel(){const{close:e}=x(),{open:a,close:t,isOpen:i}=(0,o.useDialog)(),E=(0,l.usePopupState)({variant:"popover"}),{variables:_,isDirty:C,searchValue:T,isSaveDisabled:V,handleOnChange:w,createVariable:S,handleDeleteVariable:I,handleSave:P,isSaving:A,handleSearch:R,setIsSaving:O,setIsSaveDisabled:B}=(0,f.useVariablesManagerState)(),{autoEditVariableId:L,startAutoEdit:D,handleAutoEditComplete:M}=(0,g.useAutoEdit)(),{createNavigationCallback:F,resetNavigation:U}=(0,h.useErrorNavigation)(),[z,N]=(0,r.useState)(null),[j,W]=(0,r.useState)(null);usePreventUnload(C);const H=(0,r.useCallback)((e,a,t)=>{const r=S(e,a,t);r&&D(r)},[S,D]),handleSaveClick=async()=>{try{W(null),U();const e=await P();return(0,p.trackVariablesManagerEvent)({action:"saveChanges"}),e}catch(e){const a=(0,u.mapServerError)(e),t=a?.action?.data?.duplicatedIds;return a&&"label"===a.field&&(t&&a.action&&(a.action.callback=F(t,D,()=>{B(!1)})),W(a),B(!0),U()),{success:!1,error:a}}finally{O(!1)}},q=(0,r.useCallback)(e=>{I(e),N(null)},[I]),G=[{name:(0,c.__)("Delete","elementor"),icon:s.TrashIcon,color:"error.main",onClick:e=>{const a=_[e];if(a){N({id:e,label:a.label});const t=(0,d.getVariableType)(a.type);(0,p.trackVariablesManagerEvent)({action:"delete",varType:t?.variableType})}}}],$=Object.values(_).some(e=>!e.deleted);return r.createElement(o.ThemeProvider,null,r.createElement(n.Panel,null,r.createElement(n.PanelHeader,{sx:{height:"unset"}},r.createElement(l.Stack,{width:"100%",direction:"column",alignItems:"center"},r.createElement(l.Stack,{p:1,pl:2,width:"100%",direction:"row",alignItems:"center"},r.createElement(l.Stack,{width:"100%",direction:"row",gap:1},r.createElement(n.PanelHeaderTitle,{sx:{display:"flex",alignItems:"center",gap:.5}},r.createElement(s.ColorFilterIcon,{fontSize:"inherit"}),(0,c.__)("Variables Manager","elementor"))),r.createElement(l.Stack,{direction:"row",gap:.5,alignItems:"center"},r.createElement(k.VariableManagerCreateMenu,{onCreate:H,variables:_,menuState:E}),r.createElement(l.CloseButton,{"aria-label":"Close",slotProps:{icon:{fontSize:k.SIZE}},onClick:()=>{C?a():e()}}))),r.createElement(l.Stack,{width:"100%",direction:"row",gap:1},r.createElement(o.SearchField,{sx:{display:"flex",flex:1},placeholder:(0,c.__)("Search","elementor"),value:T,onSearch:R})),r.createElement(l.Divider,{sx:{width:"100%"}}))),r.createElement(n.PanelBody,{sx:{display:"flex",flexDirection:"column",height:"100%"}},$&&r.createElement(y.VariablesManagerTable,{menuActions:G,variables:_,onChange:w,autoEditVariableId:L,onAutoEditComplete:M,onFieldError:B}),!$&&T&&r.createElement(v.NoSearchResults,{searchValue:T,onClear:()=>R(""),icon:r.createElement(s.ColorFilterIcon,{fontSize:"large"})}),!$&&!T&&r.createElement(m.EmptyState,{title:(0,c.__)("Create your first variable","elementor"),message:(0,c.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:r.createElement(s.ColorFilterIcon,{fontSize:"large"}),onAdd:E.open})),r.createElement(n.PanelFooter,null,r.createElement(l.Infotip,{placement:"right",open:!!j,content:j?r.createElement(l.Alert,{severity:j.severity??"error",action:j.action?.label?r.createElement(l.AlertAction,{onClick:j.action.callback},j.action.label):void 0,onClose:j.action?.label?void 0:()=>{W(null),B(!1)},icon:j.IconComponent?r.createElement(j.IconComponent,null):r.createElement(s.AlertTriangleFilledIcon,null)},r.createElement(l.AlertTitle,null,j.message),j.action?.message):null,arrow:!1,slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[-10,10]}}]}}},r.createElement(l.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",disabled:V||!C||A,onClick:handleSaveClick,loading:A},(0,c.__)("Save changes","elementor"))))),z&&r.createElement(b.DeleteConfirmationDialog,{open:!0,label:z.label,onConfirm:()=>q(z.id),closeDialog:()=>N(null)}),i&&r.createElement(o.SaveChangesDialog,null,r.createElement(o.SaveChangesDialog.Title,{onClose:t},(0,c.__)("You have unsaved changes","elementor")),r.createElement(o.SaveChangesDialog.Content,null,r.createElement(o.SaveChangesDialog.ContentText,null,(0,c.__)("To avoid losing your updates, save your changes before leaving.","elementor"))),r.createElement(o.SaveChangesDialog.Actions,{actions:{discard:{label:(0,c.__)("Discard","elementor"),action:()=>{t(),e()}},confirm:{label:(0,c.__)("Save","elementor"),action:async()=>{const a=await handleSaveClick();t(),a?.success&&e()}}}})))}const usePreventUnload=e=>{(0,r.useEffect)(()=>{const handleBeforeUnload=a=>{e&&a.preventDefault()};return window.addEventListener("beforeunload",handleBeforeUnload),()=>{window.removeEventListener("beforeunload",handleBeforeUnload)}},[e])}},"./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-table.tsx":function(e,a,t){t.r(a),t.d(a,{VariablesManagerTable:function(){return VariablesManagerTable}});var r=t("react"),n=t("@elementor/editor-ui"),o=t("@elementor/icons"),i=t("@elementor/ui"),s=t("@wordpress/i18n"),l=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),c=t("./packages/packages/core/editor-variables/src/components/fields/label-field.tsx"),p=t("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-edit-menu.tsx"),u=t("./packages/packages/core/editor-variables/src/components/variables-manager/ui/variable-table-cell.tsx"),d=t("./packages/packages/core/editor-variables/src/components/variables-manager/variable-editable-cell.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const VariablesManagerTable=({menuActions:e,variables:a,onChange:t,autoEditVariableId:b,onAutoEditComplete:m,onFieldError:v})=>{const g=(0,r.useRef)(null),h=(0,r.useRef)(new Map);(0,r.useEffect)(()=>{if(b&&g.current){const e=h.current.get(b);e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},100)}},[b]);const handleRowRef=e=>a=>{a?h.current.set(e,a):h.current.delete(e)},f=Object.keys(a).sort(function sortVariablesOrder(e){return(a,t)=>(e[a]?.order??Number.MAX_SAFE_INTEGER)-(e[t]?.order??Number.MAX_SAFE_INTEGER)}(a)),k=f.filter(e=>!a[e].deleted).map(e=>{const t=a[e],r=(0,l.getVariableType)(t.type);return{id:e,type:t.type,name:t.label,value:t.value,...r}}),y={minWidth:250,tableLayout:"fixed"};return r.createElement(i.TableContainer,{ref:g,sx:{overflow:"initial"}},r.createElement(i.Table,{sx:y,"aria-label":"Variables manager list with drag and drop reordering",stickyHeader:!0},r.createElement(i.TableHead,null,r.createElement(i.TableRow,null,r.createElement(u.VariableTableCell,{isHeader:!0,noPadding:!0,width:10,maxWidth:10}),r.createElement(u.VariableTableCell,{isHeader:!0},(0,s.__)("Name","elementor")),r.createElement(u.VariableTableCell,{isHeader:!0},(0,s.__)("Value","elementor")),r.createElement(u.VariableTableCell,{isHeader:!0,noPadding:!0,width:16,maxWidth:16}))),r.createElement(i.TableBody,null,r.createElement(i.UnstableSortableProvider,{value:f,onChange:e=>{const r={...a};e.forEach((e,a)=>{const t=r[e];t&&(r[e]=Object.assign({},t,{order:a+1}))}),t(r)},variant:"static",restrictAxis:!0,dragOverlay:({children:e,...a})=>r.createElement(i.Table,_extends({sx:y},a),r.createElement(i.TableBody,null,e))},k.map(s=>r.createElement(i.UnstableSortableItem,{key:s.id,id:s.id,render:({itemProps:l,showDropIndication:g,triggerProps:h,itemStyle:f,triggerStyle:k,isDragged:y,dropPosition:E,setTriggerRef:_,isSorting:x})=>{const C=g&&"before"===E,T=g&&"after"===E;return r.createElement(i.TableRow,_extends({},l,{selected:y,sx:{...C&&{"& td, & th":{borderTop:"2px solid",borderTopColor:"primary.main"}},...T&&{"& td, & th":{borderBottom:"2px solid",borderBottomColor:"primary.main"}},'& [role="toolbar"], & [draggable]':{opacity:0},"&:hover, &:focus-within":{backgroundColor:"action.hover",'& [role="toolbar"], & [draggable]':{opacity:1}}},style:{...f,...k}}),r.createElement(u.VariableTableCell,{noPadding:!0,width:10,maxWidth:10},r.createElement(i.IconButton,_extends({size:"small",ref:_},h,{disabled:x,draggable:!0}),r.createElement(o.GripVerticalIcon,{fontSize:"inherit"}))),r.createElement(u.VariableTableCell,null,r.createElement(d.VariableEditableCell,{initialValue:s.name,onChange:e=>{e!==s.name&&t({...a,[s.id]:{...a[s.id],label:e}})},prefixElement:(0,r.createElement)(s.icon,{fontSize:"inherit"}),editableElement:({value:e,onChange:t,onValidationChange:n,error:o})=>r.createElement(c.LabelField,{id:"variable-label-"+s.id,size:"tiny",value:e,onChange:t,onErrorChange:e=>{n?.(e),v?.(!!e)},error:o,focusOnShow:!0,selectOnShow:b===s.id,showWarningInfotip:!0,variables:a}),autoEdit:b===s.id,onRowRef:handleRowRef(s.id),onAutoEditComplete:b===s.id?m:void 0,fieldType:"label"},r.createElement(n.EllipsisWithTooltip,{title:s.name,sx:{border:"4px solid transparent"}},s.name))),r.createElement(u.VariableTableCell,null,r.createElement(d.VariableEditableCell,{initialValue:s.value,onChange:e=>{e!==s.value&&t({...a,[s.id]:{...a[s.id],value:e}})},editableElement:({value:e,onChange:a,onValidationChange:t,error:r})=>s.valueField({value:e,onChange:a,onValidationChange:e=>{t?.(e),v?.(!!e)},error:r}),onRowRef:handleRowRef(s.id),gap:.25,fieldType:"value"},s.startIcon&&s.startIcon({value:s.value}),r.createElement(n.EllipsisWithTooltip,{title:s.value,sx:{border:"4px solid transparent",lineHeight:"1",pt:.25}},s.value))),r.createElement(u.VariableTableCell,{align:"right",noPadding:!0,width:16,maxWidth:16,sx:{paddingInlineEnd:1}},r.createElement(i.Stack,{role:"toolbar",direction:"row",justifyContent:"flex-end"},r.createElement(p.VariableEditMenu,{menuActions:e,disabled:x,itemId:s.id}))))}}))))))}},"./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx":function(e,a,t){t.r(a),t.d(a,{BackgroundRepeaterColorIndicator:function(){return BackgroundRepeaterColorIndicator},BackgroundRepeaterLabel:function(){return BackgroundRepeaterLabel},BoxShadowRepeaterColorIndicator:function(){return BoxShadowRepeaterColorIndicator}});var r=t("react"),n=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),o=t("./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 r.createElement(o.ColorIndicator,{component:"span",size:"inherit",value:a?.value})},BackgroundRepeaterLabel=({value:e})=>{const a=useColorVariable(e);return r.createElement("span",null,a?.label)},BoxShadowRepeaterColorIndicator=({value:e})=>{const a=useColorVariable(e);return r.createElement(o.ColorIndicator,{component:"span",size:"inherit",value:a?.value})}},"./packages/packages/core/editor-variables/src/components/variables-selection.tsx":function(e,a,t){t.r(a),t.d(a,{VariablesSelection:function(){return VariablesSelection}});var r=t("react"),n=t("@elementor/editor-editing-panel"),o=t("@elementor/editor-ui"),i=t("@elementor/icons"),s=t("@elementor/ui"),l=t("@wordpress/i18n"),c=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),p=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),u=t("./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts"),d=t("./packages/packages/core/editor-variables/src/utils/tracking.ts"),b=t("./packages/packages/core/editor-variables/src/components/ui/empty-state.tsx"),m=t("./packages/packages/core/editor-variables/src/components/ui/menu-item-content.tsx"),v=t("./packages/packages/core/editor-variables/src/components/ui/no-search-results.tsx"),g=t("./packages/packages/core/editor-variables/src/components/ui/styled-menu-list.tsx");const h="tiny",f=(0,l.__)("Create variable","elementor"),k=(0,l.__)("Variables Manager","elementor"),VariablesSelection=({closePopover:e,onAdd:a,onEdit:t,onSettings:y})=>{const{icon:E,startIcon:_,variableType:x,propTypeUtil:C}=(0,c.useVariableType)(),{value:T,setValue:V,path:w}=(0,u.useVariableBoundProp)(),[S,I]=(0,r.useState)(""),{list:P,hasMatches:A,isSourceNotEmpty:R,hasNoCompatibleVariables:O}=(0,p.useFilteredVariables)(S,C.key),onAddAndTrack=()=>{a?.(),(0,d.trackVariableEvent)({varType:x,controlPath:w.join("."),action:"add"})},B=[];if(a&&B.push(r.createElement(s.Tooltip,{key:"add",placement:"top",title:f},r.createElement(s.IconButton,{id:"add-variable-button",size:h,onClick:onAddAndTrack,"aria-label":f},r.createElement(i.PlusIcon,{fontSize:h})))),y){const handleOpenManager=()=>{y(),(0,d.trackVariablesManagerEvent)({action:"openManager",varType:x,controlPath:w.join(".")})};B.push(r.createElement(s.Tooltip,{key:"settings",placement:"top",title:k},r.createElement(s.IconButton,{id:"variables-manager-button",size:h,onClick:handleOpenManager,"aria-label":k},r.createElement(i.SettingsIcon,{fontSize:h}))))}const L=_||(()=>r.createElement(E,{fontSize:h})),D=P.map(({value:e,label:a,key:n})=>({type:"item",value:n,label:a,icon:r.createElement(L,{value:e}),secondaryText:e,onEdit:t?()=>t?.(n):void 0})),M=(0,l.sprintf)((0,l.__)("Create your first %s variable","elementor"),x);return r.createElement(n.PopoverBody,null,r.createElement(o.PopoverHeader,{title:(0,l.__)("Variables","elementor"),icon:r.createElement(i.ColorFilterIcon,{fontSize:h}),onClose:e,actions:B}),R&&r.createElement(o.SearchField,{value:S,onSearch:e=>{I(e)},placeholder:(0,l.__)("Search","elementor")}),r.createElement(s.Divider,null),R&&A&&r.createElement(o.PopoverMenuList,{items:D,onSelect:a=>{V(a),(0,d.trackVariableEvent)({varType:x,controlPath:w.join("."),action:"connect"}),e()},onClose:()=>{},selectedValue:T,"data-testid":`${x}-variables-list`,menuListTemplate:g.VariablesStyledMenuList,menuItemContentTemplate:e=>r.createElement(m.MenuItemContent,{item:e})}),!A&&R&&r.createElement(v.NoSearchResults,{searchValue:S,onClear:()=>{I("")},icon:r.createElement(E,{fontSize:"large"})}),!R&&!O&&r.createElement(b.EmptyState,{title:M,message:(0,l.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:r.createElement(E,{fontSize:"large"}),onAdd:a}),O&&r.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:r.createElement(E,{fontSize:"large"}),onAdd:a}))}},"./packages/packages/core/editor-variables/src/context/variable-selection-popover.context.tsx":function(e,a,t){t.r(a),t.d(a,{PopoverContentRefContextProvider:function(){return PopoverContentRefContextProvider},usePopoverContentRef:function(){return usePopoverContentRef}});var r=t("react"),n=t("@elementor/ui");const o=(0,r.createContext)(null),PopoverContentRefContextProvider=({children:e})=>{const[a,t]=(0,r.useState)(null);return r.createElement(o.Provider,{value:a},r.createElement(n.Box,{ref:t},e))},usePopoverContentRef=()=>(0,r.useContext)(o)},"./packages/packages/core/editor-variables/src/context/variable-type-context.tsx":function(e,a,t){t.r(a),t.d(a,{VariableTypeProvider:function(){return VariableTypeProvider},useVariableType:function(){return useVariableType}});var r=t("react"),n=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const o=(0,r.createContext)(null);function VariableTypeProvider({children:e,propTypeKey:a}){return r.createElement(o.Provider,{value:a},e)}function useVariableType(){const e=(0,r.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,t){t.r(a),t.d(a,{VariableControl:function(){return VariableControl}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("./packages/packages/core/editor-variables/src/components/ui/variable/assigned-variable.tsx"),i=t("./packages/packages/core/editor-variables/src/components/ui/variable/deleted-variable.tsx"),s=t("./packages/packages/core/editor-variables/src/components/ui/variable/mismatch-variable.tsx"),l=t("./packages/packages/core/editor-variables/src/components/ui/variable/missing-variable.tsx"),c=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts"),p=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const VariableControl=()=>{const e=(0,n.useBoundProp)(),a=e.value??e.placeholder,t=(0,c.useVariable)(a?.value);if(!t)return r.createElement(l.MissingVariable,null);const{$$type:u}=a;if(t?.deleted)return r.createElement(i.DeletedVariable,{variable:t,propTypeKey:u});const{isCompatible:d}=(0,p.getVariableType)(t.type);return d&&!d(e?.propType,t)?r.createElement(s.MismatchVariable,{variable:t}):r.createElement(o.AssignedVariable,{variable:t,propTypeKey:u})}},"./packages/packages/core/editor-variables/src/create-style-variables-repository.ts":function(e,a,t){t.r(a),t.d(a,{createStyleVariablesRepository:function(){return createStyleVariablesRepository}});var r=t("./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts"),n=t("./packages/packages/core/editor-variables/src/sync/enqueue-font.ts");const createStyleVariablesRepository=()=>{const e={};let a;const shouldUpdate=(a,t)=>!(a in e)||(e[a].label!==t.label||(e[a].value!==t.value||(!(e[a]?.deleted||!t?.deleted)||!(!e[a]?.deleted||t?.deleted)))),fontEnqueue=e=>{if(e)try{(0,n.enqueueFont)(e)}catch{}};return{subscribe:e=>(a=e,()=>{a=()=>{}}),update:t=>{(a=>{let t=!1;for(const[n,o]of Object.entries(a))shouldUpdate(n,o)&&(e[n]=o,o.type===r.fontVariablePropTypeUtil.key&&fontEnqueue(o.value),t=!0);return t})(t)&&"function"==typeof a&&a({...e})}}}},"./packages/packages/core/editor-variables/src/hooks/use-initial-value.ts":function(e,a,t){t.r(a),t.d(a,{useInitialValue:function(){return useInitialValue}});var r=t("@elementor/editor-controls"),n=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),o=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variables.ts");const useInitialValue=()=>{const{value:e}=(0,r.useBoundProp)(),a=(0,n.hasVariableType)(e?.$$type)&&Boolean(e?.value),t=(0,o.useVariable)(a?e.value:"");return a?t?t.value:"":e?.value??""}},"./packages/packages/core/editor-variables/src/hooks/use-permissions.ts":function(e,a,t){t.r(a),t.d(a,{usePermissions:function(){return usePermissions}});var r=t("@elementor/editor-current-user");const usePermissions=()=>{const{canUser:e}=(0,r.useCurrentUserCapabilities)();return{canAssign:()=>e("edit_posts"),canUnlink:()=>e("edit_posts"),canAdd:()=>e("manage_options"),canDelete:()=>e("manage_options"),canEdit:()=>e("manage_options"),canRestore:()=>e("manage_options"),canManageSettings:()=>e("manage_options")}}},"./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx":function(e,a,t){t.r(a),t.d(a,{usePropVariableAction:function(){return usePropVariableAction}});var r=t("react"),n=t("@elementor/editor-editing-panel"),o=t("@elementor/icons"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/components/variable-selection-popover.tsx"),l=t("./packages/packages/core/editor-variables/src/utils/tracking.ts"),c=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const usePropVariableAction=()=>{const{propType:e,path:a}=(0,n.useBoundProp)(),t=resolveVariableFromPropType(e);return{visible:Boolean(t),icon:o.ColorFilterIcon,title:(0,i.__)("Variables","elementor"),content:({close:e})=>t?(trackOpenVariablePopover(a,t.variableType),r.createElement(s.VariableSelectionPopover,{closePopover:e,propTypeKey:t.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,t){t.r(a),t.d(a,{createVariable:function(){return createVariable},deleteVariable:function(){return deleteVariable},getVariables:function(){return getVariables},restoreVariable:function(){return restoreVariable},updateVariable:function(){return updateVariable},useFilteredVariables:function(){return useFilteredVariables},useVariable:function(){return useVariable}});var r=t("react"),n=t("@elementor/editor-controls"),o=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx"),i=t("./packages/packages/core/editor-variables/src/service.ts"),s=t("./packages/packages/core/editor-variables/src/utils/filter-by-search.ts");const getVariables=(e=!0)=>{const a=i.service.variables();return e?a:Object.fromEntries(Object.entries(a).filter(([,e])=>!e.deleted))},useVariable=e=>{const a=getVariables();return a?.[e]?{...a[e],key:e}:null},useFilteredVariables=(e,a)=>{const t=usePropVariables(a),r=useVariableSelectionFilter(t),n=(0,s.filterBySearch)(r,e);return{list:n.sort((e,a)=>(e.order??Number.MAX_SAFE_INTEGER)-(a.order??Number.MAX_SAFE_INTEGER)),hasMatches:n.length>0,isSourceNotEmpty:r.length>0,hasNoCompatibleVariables:t.length>0&&0===r.length}},useVariableSelectionFilter=e=>{const{selectionFilter:a}=(0,o.useVariableType)(),{propType:t}=(0,n.useBoundProp)();return a?a(e,t):e},usePropVariables=e=>(0,r.useMemo)(()=>normalizeVariables(e),[e]),normalizeVariables=e=>{const a=getVariables(!1);return Object.entries(a).filter(([,a])=>a.type===e).map(([e,{label:a,value:t,order:r}])=>({key:e,label:a,value:t,order:r}))},extractId=({id:e})=>e,createVariable=e=>i.service.create(e).then(extractId),updateVariable=(e,{value:a,label:t})=>i.service.update(e,{value:a,label:t}).then(extractId),deleteVariable=e=>i.service.delete(e).then(extractId),restoreVariable=(e,a,t)=>i.service.restore(e,a,t).then(extractId)},"./packages/packages/core/editor-variables/src/hooks/use-variable-bound-prop.ts":function(e,a,t){t.r(a),t.d(a,{resolveBoundPropAndSetValue:function(){return resolveBoundPropAndSetValue},useVariableBoundProp:function(){return useVariableBoundProp}});var r=t("@elementor/editor-controls"),n=t("@elementor/editor-props"),o=t("./packages/packages/core/editor-variables/src/context/variable-type-context.tsx");const useVariableBoundProp=()=>{const{propTypeUtil:e}=(0,o.useVariableType)(),a=(0,r.useBoundProp)(e);return{...a,setVariableValue:e=>resolveBoundPropAndSetValue(e,a),variableId:a.value??a.placeholder}},resolveBoundPropAndSetValue=(e,a)=>{const t=unwrapValue(a.value),r=unwrapValue(a.placeholder),n=unwrapValue(e);return t||r!==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,t){t.r(a),t.d(a,{init:function(){return init}});var r=t("@elementor/editor"),n=t("@elementor/editor-editing-panel"),o=t("@elementor/editor-panels"),i=t("@elementor/editor-props"),s=t("./packages/packages/core/editor-variables/src/components/variables-manager/variables-manager-panel.tsx"),l=t("./packages/packages/core/editor-variables/src/controls/variable-control.tsx"),c=t("./packages/packages/core/editor-variables/src/hooks/use-prop-variable-action.tsx"),p=t("./packages/packages/core/editor-variables/src/mcp/index.ts"),u=t("./packages/packages/core/editor-variables/src/register-variable-types.tsx"),d=t("./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx"),b=t("./packages/packages/core/editor-variables/src/repeater-injections.ts"),m=t("./packages/packages/core/editor-variables/src/service.ts"),v=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");const{registerPopoverAction:g}=n.controlActionsMenu;function init(){(0,u.registerVariableTypes)(),(0,b.registerRepeaterInjections)(),(0,n.registerControlReplacement)({component:l.VariableControl,condition:({value:e,placeholder:a})=>hasVariable(e)||hasVariable(a)}),g({id:"variables",useProps:c.usePropVariableAction}),m.service.init().then(()=>{(0,p.initMcp)()}),(0,r.injectIntoTop)({id:"canvas-style-variables-render",component:d.StyleVariablesRenderer}),(0,o.__registerPanel)(s.panel)}function hasVariable(e){return!!(0,i.isTransformable)(e)&&(0,v.hasVariableType)(e.$$type)}},"./packages/packages/core/editor-variables/src/mcp/create-variable-tool.ts":function(e,a,t){t.r(a),t.d(a,{initCreateVariableTool:function(){return initCreateVariableTool}});var r=t("@elementor/editor-mcp"),n=t("@elementor/schema"),o=t("./packages/packages/core/editor-variables/src/service.ts");const i={type:n.z.string().describe('The type of the variable. Example values: "global-color-variable" or "global-font-variable".'),label:n.z.string().describe("The label of the variable, displayed to the user"),value:n.z.string().describe("The value of the variable, should correspond to the type")},s={status:n.z.enum(["ok","error"]).describe("The status of the operation"),message:n.z.string().optional().describe("Optional message providing additional information about the operation")},initCreateVariableTool=()=>{(0,r.getMCPByDomain)("variables").addTool({name:"create-global-variable",schema:i,outputSchema:s,description:'Create a new global variable\n## When to use this tool:\n- When a user requests to create a new global variable in the Elementor editor.\n- When you need to add a new variable to be used in the editor.\n\n## Prequisites:\n- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.\n- Make sure when creating a new variable, the label is unique and not already in use.\n- If the user does not provide a label, ask them to provide one before proceeding.\n- If the user does not provide a type, ask them to provide one before proceeding.\n- If the user does not provide a value, ask them to provide one before proceeding.\n\n## Required parameters:\n- type: The type of the variable. Possible values are \'global-color-variable\' or \'global-font-variable\'.\n- label: The label of the variable, displayed to the user. Must be unique and not already in use.\n- value: The value of the variable. For color variables, this should be a valid CSS color (e.g., \'rgb(255,0,0)\', \'#ff0000\', \'red\'). For font variables, this should be a valid font family (e.g., \'Arial\', \'serif\').\n\n## Example tool call (JSON format):\n```json\n{ "type": "global-color-variable", "label": "My Cool Color", "value": "rgb(1,2,3)" }\n```\n\n## Example tool response (JSON format):\n```json\n{ "status": "ok" }\n```\n\n## Example to a failed tool response, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.\n{ "status": "error", "message": "Unsupported type \'global-kuku-variable\'" }\n\nIn that case, inform the user the type is unsupported and they should try another type, perhaps consult to online documentation.\n',handler:async e=>{const{type:a,label:t,value:r}=e;try{await o.service.create({type:a,label:t,value:r})}catch(e){return{status:"error",message:`There was an error creating the variable: ${e.message||"Unknown server error"}`}}return{status:"ok"}}})}},"./packages/packages/core/editor-variables/src/mcp/delete-variable-tool.ts":function(e,a,t){t.r(a),t.d(a,{initDeleteVariableTool:function(){return initDeleteVariableTool}});var r=t("@elementor/editor-mcp"),n=t("@elementor/schema"),o=t("./packages/packages/core/editor-variables/src/service.ts");const initDeleteVariableTool=()=>{(0,r.getMCPByDomain)("variables").addTool({name:"delete-global-variable",schema:{id:n.z.string().describe("The unique identifier of the variable to be deleted.")},outputSchema:{status:n.z.enum(["ok","error"]).describe("The status of the operation")},description:'Delete an existing global variable\n \n## When to use this tool:\n- When a user requests to delete an existing global variable in the Elementor editor.\n- When you need to remove a variable that is no longer needed or relevant, with the user\'s confirmation.\n\n## Prerequisites:\n- Ensure you have the most up-to-date list of existing global variables. You can use the "list-global-variables" tool to fetch the current variables.\n- Reference the variable by the "id" property, given from the "list-global-variables" tool.\n- Make sure you have the unique identifier of the variable to be deleted before using this tool.\n- Confirm with the user that they want to proceed with the deletion, as this action is irreversible.\n\n<notice>\nA use might reference a variable by it\'s label, but you must always use the unique identifier (id) to delete it.\nIf you only have the label, use the "list-global-variables" tool to find the corresponding id.\n</notice>\n\n<important>\nThis operation is destructive and cannot be undone. Ensure that the user is fully aware of the consequences before proceeding.\nWhen a variable is deleted, all references to it in all pages accross the website will lose their effect.\n</important>',handler:async e=>{const{id:a}=e;try{return await o.service.delete(a),{status:"ok"}}catch(e){return{status:"error"}}},isDestrcutive:!0})}},"./packages/packages/core/editor-variables/src/mcp/index.ts":function(e,a,t){t.r(a),t.d(a,{initMcp:function(){return initMcp}});var r=t("@elementor/editor-mcp"),n=t("./packages/packages/core/editor-variables/src/mcp/create-variable-tool.ts"),o=t("./packages/packages/core/editor-variables/src/mcp/delete-variable-tool.ts"),i=t("./packages/packages/core/editor-variables/src/mcp/list-variables-tool.ts"),s=t("./packages/packages/core/editor-variables/src/mcp/update-variable-tool.ts"),l=t("./packages/packages/core/editor-variables/src/mcp/variables-resource.ts");function initMcp(){const{setMCPDescription:e}=(0,r.getMCPByDomain)("variables");e("Elementor Editor Variables MCP"),(0,i.initListVariablesTool)(),(0,n.initCreateVariableTool)(),(0,s.initUpdateVariableTool)(),(0,o.initDeleteVariableTool)(),(0,l.initVariablesResource)()}},"./packages/packages/core/editor-variables/src/mcp/list-variables-tool.ts":function(e,a,t){t.r(a),t.d(a,{initListVariablesTool:function(){return initListVariablesTool}});var r=t("@elementor/editor-mcp"),n=t("@elementor/schema"),o=t("./packages/packages/core/editor-variables/src/service.ts");const i={type:n.z.string().describe("The type of the variable."),label:n.z.string().describe("The label of the variable, displayed to the user"),value:n.z.string().describe("The value of the variable."),id:n.z.string().describe("The unique identifier of the variable. Used for internal reference, not to be exposed to end users")},s={variables:n.z.array(n.z.object(i)).describe("List of variables")},initListVariablesTool=()=>{(0,r.getMCPByDomain)("variables").addTool({name:"list-global-variables",description:"List editor global variables\n \n ## When to use this tool:\n - When a user requests to see all available global variables in the Elementor editor.\n - When you need to be exact on a variable label, to avoid any mistakes.\n - When you want to see the most up-to-date list of global variables.\n - Before using any other variables related tools that makes changes, such as deletion, creation, or updates. This ensures you have the latest information and there is no naming collision or mismatching.\n \n ## Example tool response (JSON format):\n ```json\n { variables: [\n { type: 'global-color-variable', label: 'Cool', value: 'rgb(1,2,3)', id: 'some-unique-id' },\n { type: 'global-font-variable', label: 'Headline', value: 'serif', id: 'some-other-unique-id' },\n ] }\n ```\n \n Once you get the response, please display the variables in a user-friendly way, unless explicitly requested otherwise.\n Unless explicitly requested otherwise, response in HTML Format, prefer to use tables or unordered lists.\n \n Note: **The label is most improtant to be seen as-is without any changes.**\n \n <important>\n **Do not omit the label**. This is important for the user to identify the variable.\n **Do not change the label**, it must be displayed exactly as it is, in it's original characters as received from this tool.\n </important>\n ",outputSchema:s,handler:async()=>{const e=o.service.variables();return{variables:Object.entries(e).map(([e,a])=>({id:e,...a}))}}})}},"./packages/packages/core/editor-variables/src/mcp/update-variable-tool.ts":function(e,a,t){t.r(a),t.d(a,{initUpdateVariableTool:function(){return initUpdateVariableTool}});var r=t("@elementor/editor-mcp"),n=t("@elementor/schema"),o=t("./packages/packages/core/editor-variables/src/service.ts");const initUpdateVariableTool=()=>{(0,r.getMCPByDomain)("variables").addTool({schema:{id:n.z.string().describe("The unique identifier of the variable to be updated or renamed."),label:n.z.string().describe("The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label."),value:n.z.string().describe("The new value for the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif'). If the user wishes to rename only, make sure you provide the existing value.")},outputSchema:{status:n.z.enum(["ok","error"]).describe("The status of the operation"),message:n.z.string().optional().describe("Optional message providing additional information about the operation")},name:"update-global-variable",description:'Update an existing global variable\n\n## When to use this tool:\n- When a user requests to update an existing global variable in the Elementor editor.\n- When you need to modify the value of an existing variable.\n- When you want to rename an existing variable (change its label).\n- When you want to both rename and modify the value of an existing variable.\n\n## Prerequisites:\n- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.\n- Make sure when updating a variable, the new label is unique and not already in use by another variable.\n- Make sure you understand whether you are updating a value, renaming, or both.\n- Reference the variable by the "id" property, given from the "list-global-variables" tool.\n- If the user wishes to rename, make sure you have the existing value.\n- If the user wishes to update the value, make sure you have to **correct label**.\n- You must have the unique identifier, the current label, the current value, and the new value or label or both, before using this tool.\n\n## Required parameters:\n- id: The unique identifier of the variable to be updated or renamed.\n- label: The label of the variable to be stored after the change. If the user only wishes to update the value, this must be strictly equal to the current label.\n- value: The new value for the variable. For color variables, this should be a valid CSS color (e.g., \'rgb(255,0,0)\', \'#ff0000\', \'red\'). For font variables, this should be a valid font family (e.g., \'Arial\', \'serif\'). If the user wishes to rename only, make sure you provide the existing value.\n\n## Example tool call (JSON format):\n```json\n{ "id": "some-unique-id", "label": "Cool", "value": "rgb(0,140,250)" }\n```\n\n## Example responses (JSON format):\nSuccessful update:\n```json\n{ "status": "ok" }\n```\n\nFailed update, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.\n```json\n{ "status": "error", "message": "Label \'Cool\' is already in use by another variable." }\n```\n',handler:async e=>{const{id:a,label:t,value:r}=e;try{return await o.service.update(a,{label:t,value:r}),{status:"ok"}}catch(e){return{status:"error",message:`There was an error creating the variable: ${e.message||"Unknown server error"}`}}}})}},"./packages/packages/core/editor-variables/src/mcp/variables-resource.ts":function(e,a,t){t.r(a),t.d(a,{GLOBAL_VARIABLES_URI:function(){return n},initVariablesResource:function(){return initVariablesResource}});var r=t("@elementor/editor-mcp");const n="elementor://variables",initVariablesResource=()=>{const{mcpServer:e}=(0,r.getMCPByDomain)("variables");e.resource("global-variables",n,{description:"Global variables list. Variables are being used in this way: If it is directly in the schema, you need to put the ID which is the key inside the object."},async()=>({contents:[{uri:n,text:localStorage["elementor-global-variables"]}]})),window.addEventListener("variables:updated",()=>{e.server.sendResourceUpdated({uri:n,contents:[{uri:n,text:localStorage["elementor-global-variables"]}]})})}},"./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts":function(e,a,t){t.r(a),t.d(a,{colorVariablePropTypeUtil:function(){return o}});var r=t("@elementor/editor-props"),n=t("@elementor/schema");const o=(0,r.createPropUtils)("global-color-variable",n.z.string())},"./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts":function(e,a,t){t.r(a),t.d(a,{fontVariablePropTypeUtil:function(){return o}});var r=t("@elementor/editor-props"),n=t("@elementor/schema");const o=(0,r.createPropUtils)("global-font-variable",n.z.string())},"./packages/packages/core/editor-variables/src/register-variable-types.tsx":function(e,a,t){t.r(a),t.d(a,{registerVariableTypes:function(){return registerVariableTypes}});var r=t("react"),n=t("@elementor/editor-props"),o=t("@elementor/icons"),i=t("./packages/packages/core/editor-variables/src/components/fields/color-field.tsx"),s=t("./packages/packages/core/editor-variables/src/components/fields/font-field.tsx"),l=t("./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx"),c=t("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts"),p=t("./packages/packages/core/editor-variables/src/prop-types/font-variable-prop-type.ts"),u=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");function registerVariableTypes(){(0,u.registerVariableType)({valueField:i.ColorField,icon:o.BrushIcon,propTypeUtil:c.colorVariablePropTypeUtil,fallbackPropTypeUtil:n.colorPropTypeUtil,variableType:"color",startIcon:({value:e})=>r.createElement(l.ColorIndicator,{size:"inherit",component:"span",value:e}),defaultValue:"#ffffff"}),(0,u.registerVariableType)({valueField:s.FontField,icon:o.TextIcon,propTypeUtil:p.fontVariablePropTypeUtil,fallbackPropTypeUtil:n.stringPropTypeUtil,variableType:"font",defaultValue:"Roboto"})}},"./packages/packages/core/editor-variables/src/renderers/style-variables-renderer.tsx":function(e,a,t){t.r(a),t.d(a,{StyleVariablesRenderer:function(){return StyleVariablesRenderer}});var r=t("react"),n=t("@elementor/editor-v1-adapters"),o=t("@elementor/ui"),i=t("./packages/packages/core/editor-variables/src/style-variables-repository.ts"),s=t("./packages/packages/core/editor-variables/src/sync/get-canvas-iframe-document.ts");const l="body";function StyleVariablesRenderer(){const e=function usePortalContainer(){return(0,n.__privateUseListenTo)((0,n.commandEndEvent)("editor/documents/attach-preview"),()=>(0,s.getCanvasIframeDocument)()?.head)}(),a=function useStyleVariables(){const[e,a]=(0,r.useState)({});return(0,r.useEffect)(()=>{const e=i.styleVariablesRepository.subscribe(a);return()=>{e()}},[]),e}(),t=Object.keys(a).length>0;if(!e||!t)return null;const c=function convertToCssVariables(e){return Object.entries(e).map(([e,a])=>function cssVariableDeclaration(e,a){const t=a?.deleted?e:a.label,r=a.value;return`--${t}:${r};`}(e,a)).join("")}(a),p=`${l}{${c}}`;return r.createElement(o.Portal,{container:e},r.createElement("style",{"data-e-style-id":"e-variables",key:p},p))}},"./packages/packages/core/editor-variables/src/repeater-injections.ts":function(e,a,t){t.r(a),t.d(a,{registerRepeaterInjections:function(){return registerRepeaterInjections}});var r=t("@elementor/editor-controls"),n=t("@elementor/editor-props"),o=t("./packages/packages/core/editor-variables/src/components/variables-repeater-item-slot.tsx"),i=t("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts");function registerRepeaterInjections(){(0,r.injectIntoRepeaterItemIcon)({id:"color-variables-background-icon",component:o.BackgroundRepeaterColorIndicator,condition:({value:e})=>hasAssignedColorVariable(n.backgroundColorOverlayPropTypeUtil.extract(e)?.color)}),(0,r.injectIntoRepeaterItemIcon)({id:"color-variables-icon",component:o.BoxShadowRepeaterColorIndicator,condition:({value:e})=>hasAssignedColorVariable(n.shadowPropTypeUtil.extract(e)?.color)}),(0,r.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,t){t.r(a),t.d(a,{service:function(){return c}});var r=t("@wordpress/i18n"),n=t("./packages/packages/core/editor-variables/src/api.ts"),o=t("./packages/packages/core/editor-variables/src/batch-operations.ts"),i=t("./packages/packages/core/editor-variables/src/storage.ts"),s=t("./packages/packages/core/editor-variables/src/style-variables-repository.ts");const l=new i.Storage,c={variables:()=>l.load(),getWatermark:()=>l.state.watermark,init:()=>c.load(),load:()=>n.apiClient.list().then(e=>{const{success:a,data:t}=e.data;if(!a)throw new Error("Unexpected response from server");return t}).then(e=>{const{variables:a,watermark:t}=e;return l.fill(a,t),s.styleVariablesRepository.update(a),a}),create:({type:e,label:a,value:t})=>n.apiClient.create(e,a,t).then(e=>{const{success:a,data:t}=e.data;if(!a){const e=t?.message||(0,r.__)("Unexpected response from server","elementor");throw new Error(e)}return t}).then(e=>{const{variable:a,watermark:t}=e;handleWatermark(i.OP_RW,t);const{id:r,...n}=a;return l.add(r,n),s.styleVariablesRepository.update({[r]:n}),{id:r,variable:n}}),update:(e,{label:a,value:t})=>n.apiClient.update(e,a,t).then(e=>{const{success:a,data:t}=e.data;if(!a){const e=t?.message||(0,r.__)("Unexpected response from server","elementor");throw new Error(e)}return t}).then(e=>{const{variable:a,watermark:t}=e;handleWatermark(i.OP_RW,t);const{id:r,...n}=a;return l.update(r,n),s.styleVariablesRepository.update({[r]:n}),{id:r,variable:n}}),delete:e=>n.apiClient.delete(e).then(e=>{const{success:a,data:t}=e.data;if(!a)throw new Error("Unexpected response from server");return t}).then(e=>{const{variable:a,watermark:t}=e;handleWatermark(i.OP_RW,t);const{id:r,...n}=a;return l.update(r,n),s.styleVariablesRepository.update({[r]:n}),{id:r,variable:n}}),restore:(e,a,t)=>n.apiClient.restore(e,a,t).then(e=>{const{success:a,data:t}=e.data;if(!a)throw new Error("Unexpected response from server");return t}).then(e=>{const{variable:a,watermark:t}=e;handleWatermark(i.OP_RW,t);const{id:r,...n}=a;return l.update(r,n),s.styleVariablesRepository.update({[r]:n}),{id:r,variable:n}}),batchSave:(e,a)=>{const t=(0,o.buildOperationsArray)(e,a),r={operations:t,watermark:l.state.watermark};return 0===t.length?Promise.resolve({success:!0,watermark:l.state.watermark,operations:0}):n.apiClient.batch(r).then(e=>{const{success:a,data:t}=e.data;if(!a)throw new Error("Unexpected response from server");return t}).then(e=>{const{results:a,watermark:r}=e;return handleWatermark(i.OP_RW,r),a&&a.forEach(e=>{if(e.variable){const{id:a,...t}=e.variable;"create"===e.type?l.add(a,t):l.update(a,t),s.styleVariablesRepository.update({[a]:t})}}),{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,t){t.r(a),t.d(a,{OP_RW:function(){return o},Storage:function(){return Storage}});const r="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(r)||"{}"),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(r,JSON.stringify(this.state.variables)),this.notifyChange()}add(e,a){this.load(),this.state.variables[e]=a,localStorage.setItem(r,JSON.stringify(this.state.variables)),this.notifyChange()}update(e,a){this.load(),this.state.variables[e]=a,localStorage.setItem(r,JSON.stringify(this.state.variables)),this.notifyChange()}watermark(e){this.state.watermark=e,localStorage.setItem(n,this.state.watermark.toString())}watermarkDiff(e,a){const t=a-this.state.watermark;return o===e?1!==t:"RO"===e&&0!==t}}},"./packages/packages/core/editor-variables/src/style-variables-repository.ts":function(e,a,t){t.r(a),t.d(a,{styleVariablesRepository:function(){return r}});const r=(0,t("./packages/packages/core/editor-variables/src/create-style-variables-repository.ts").createStyleVariablesRepository)()},"./packages/packages/core/editor-variables/src/sync/enqueue-font.ts":function(e,a,t){t.r(a),t.d(a,{enqueueFont:function(){return enqueueFont}});const enqueueFont=(e,a="preview")=>{const t=window;return t.elementor?.helpers?.enqueueFont?.(e,a)??null}},"./packages/packages/core/editor-variables/src/sync/get-canvas-iframe-document.ts":function(e,a,t){function getCanvasIframeDocument(){const e=window;return e.elementor?.$preview?.[0]?.contentDocument}t.r(a),t.d(a,{getCanvasIframeDocument:function(){return getCanvasIframeDocument}})},"./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx":function(e,a,t){t.r(a),t.d(a,{inheritanceTransformer:function(){return u}});var r=t("react"),n=t("@elementor/editor-canvas"),o=t("@elementor/ui"),i=t("@wordpress/i18n"),s=t("./packages/packages/core/editor-variables/src/components/ui/color-indicator.tsx"),l=t("./packages/packages/core/editor-variables/src/prop-types/color-variable-prop-type.ts"),c=t("./packages/packages/core/editor-variables/src/service.ts"),p=t("./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 r.createElement("span",null,(0,i.__)("Missing variable","elementor"));const t=a.type===l.colorVariablePropTypeUtil.key,n=(0,p.resolveCssVariable)(e,a);return r.createElement(o.Stack,{direction:"row",spacing:.5,sx:{paddingInline:"1px"},alignItems:"center"},t&&r.createElement(s.ColorIndicator,{size:"inherit",value:a.value}),r.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,t){t.r(a),t.d(a,{resolveCssVariable:function(){return resolveCssVariable}});const resolveCssVariable=(e,a)=>{let t=e,r="";return a&&(r=a.value),a&&!a.deleted&&(t=a.label),t.trim()?r.trim()?`var(--${t}, ${r})`:`var(--${t})`:null}},"./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts":function(e,a,t){t.r(a),t.d(a,{variableTransformer:function(){return i}});var r=t("@elementor/editor-canvas"),n=t("./packages/packages/core/editor-variables/src/service.ts"),o=t("./packages/packages/core/editor-variables/src/transformers/utils/resolve-css-variable.ts");const i=(0,r.createTransformer)(e=>{const a=n.service.variables();return a[e]?(0,o.resolveCssVariable)(e,a[e]):null})},"./packages/packages/core/editor-variables/src/utils/filter-by-search.ts":function(e,a,t){function filterBySearch(e,a){const t=a.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}t.r(a),t.d(a,{filterBySearch:function(){return filterBySearch}})},"./packages/packages/core/editor-variables/src/utils/tracking.ts":function(e,a,t){t.r(a),t.d(a,{trackVariableEvent:function(){return trackVariableEvent},trackVariablesManagerEvent:function(){return trackVariablesManagerEvent}});var r=t("@elementor/mixpanel");const trackVariableEvent=({varType:e,controlPath:a,action:t})=>{const{dispatchEvent:n,config:o}=(0,r.getMixpanel)();if(!o?.names?.variables?.[t])return;const i=o.names.variables[t];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:t})=>{const{dispatchEvent:n,config:o}=(0,r.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),t&&(s.style_control_path=t),n?.(i,s)}},"./packages/packages/core/editor-variables/src/utils/unlink-variable.ts":function(e,a,t){t.r(a),t.d(a,{createUnlinkHandler:function(){return createUnlinkHandler},transformValueBeforeUnlink:function(){return transformValueBeforeUnlink}});var r=t("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts");function transformValueBeforeUnlink(e,a){const{valueTransformer:t}=(0,r.getVariableType)(a);return t?t(e.value):e.value}function createUnlinkHandler(e,a,t){return()=>{const{fallbackPropTypeUtil:n}=(0,r.getVariableType)(a),o=transformValueBeforeUnlink(e,a);t(n.create(o))}}},"./packages/packages/core/editor-variables/src/utils/validations.ts":function(e,a,t){t.r(a),t.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 r=t("@elementor/icons"),n=t("@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??{},t=Object.keys(a).length,n=1===t?"name":"names",i=Object.keys(a);return{field:"label",message:o.BATCH.DUPLICATED_LABELS(t,n),severity:"error",IconComponent:r.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:r.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/variables-registry/create-variable-type-registry.ts":function(e,a,t){t.r(a),t.d(a,{createVariableTypeRegistry:function(){return createVariableTypeRegistry}});var r=t("@elementor/editor-canvas"),n=t("@elementor/editor-editing-panel"),o=t("./packages/packages/core/editor-variables/src/transformers/inheritance-transformer.tsx"),i=t("./packages/packages/core/editor-variables/src/transformers/variable-transformer.ts");function createVariableTypeRegistry(){const e={},registerTransformer=e=>{r.styleTransformersRegistry.register(e,i.variableTransformer)},registerInheritanceTransformer=e=>{n.stylesInheritanceTransformersRegistry.register(e,o.inheritanceTransformer)};return{registerVariableType:({icon:a,startIcon:t,valueField:r,propTypeUtil:n,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:l,fallbackPropTypeUtil:c,isCompatible:p})=>{if(e[n.key])throw new Error(`Variable with key "${n.key}" is already registered.`);p||(p=(e,a)=>"union"===e.kind&&a.type in e.prop_types),e[n.key]={icon:a,startIcon:t,valueField:r,propTypeUtil:n,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:l,fallbackPropTypeUtil:c,isCompatible:p},registerTransformer(n.key),registerInheritanceTransformer(n.key)},getVariableType:a=>e[a],getVariableTypes:()=>e,hasVariableType:a=>a in e}}},"./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts":function(e,a,t){t.r(a),t.d(a,{getVariableType:function(){return o},getVariableTypes:function(){return i},hasVariableType:function(){return s},registerVariableType:function(){return n}});var r=t("./packages/packages/core/editor-variables/src/variables-registry/create-variable-type-registry.ts");const{registerVariableType:n,getVariableType:o,getVariableTypes:i,hasVariableType:s}=(0,r.createVariableTypeRegistry)()},"@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-editing-panel":function(e){e.exports=window.elementorV2.editorEditingPanel},"@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/http-client":function(e){e.exports=window.elementorV2.httpClient},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/mixpanel":function(e){e.exports=window.elementorV2.mixpanel},"@elementor/schema":function(e){e.exports=window.elementorV2.schema},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React}},a={};function __webpack_require__(t){var r=a[t];if(void 0!==r)return r.exports;var n=a[t]={exports:{}};return e[t](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 t in a)__webpack_require__.o(a,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},__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 t={};!function(){__webpack_require__.r(t),__webpack_require__.d(t,{init:function(){return e.init},registerVariableType:function(){return a.registerVariableType},registerVariableTypes:function(){return r.registerVariableTypes}});var e=__webpack_require__("./packages/packages/core/editor-variables/src/init.ts"),a=__webpack_require__("./packages/packages/core/editor-variables/src/variables-registry/variable-type-registry.ts"),r=__webpack_require__("./packages/packages/core/editor-variables/src/register-variable-types.tsx")}(),(window.elementorV2=window.elementorV2||{}).editorVariables=t}(),window.elementorV2.editorVariables?.init?.();
7305 3 //# sourceMappingURL=editor-variables.js.map