Elementor Website Builder – more than just a page builder / 4.3.2

Elementor Website Builder – more than just a page builder v4.3.2

elementor / assets / js / packages / editor-components / editor-components.js

editor-components.js in Elementor Website Builder – more than just a page builder 4.3.2, at assets/js/packages/editor-components/editor-components.js

2,934 lines 120.3 KB

Raw Download Zip

1	(function(_elementor_editor, _elementor_editor_canvas, _elementor_editor_documents, _elementor_editor_editing_panel, _elementor_editor_elements_panel, _elementor_editor_embedded_documents_manager, _elementor_editor_v1_adapters, _elementor_store, _wordpress_i18n, _elementor_http_client, react, _elementor_editor_ui, _elementor_ui, _elementor_utils, _elementor_icons, _elementor_editor_current_user, _elementor_editor_notifications, _elementor_editor_elements, _elementor_editor_props, _elementor_schema, _elementor_events, _elementor_editor_panels, _elementor_editor_controls, _elementor_editor_templates) {
2
3	//#region \0rolldown/runtime.js
4	var __create = Object.create;
5	var __defProp$1 = Object.defineProperty;
6	var __name = (target, value) => __defProp$1(target, "name", {
7	value,
8	configurable: true
9	});
10	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
11	var __getOwnPropNames = Object.getOwnPropertyNames;
12	var __getProtoOf = Object.getPrototypeOf;
13	var __hasOwnProp = Object.prototype.hasOwnProperty;
14	var __exportAll = (all, no_symbols) => {
15	let target = {};
16	for (var name in all) {
17	__defProp$1(target, name, {
18	get: all[name],
19	enumerable: true
20	});
21	}
22	if (!no_symbols) {
23	__defProp$1(target, Symbol.toStringTag, { value: "Module" });
24	}
25	return target;
26	};
27	var __copyProps = (to, from, except, desc) => {
28	if (from && typeof from === "object" \|\| typeof from === "function") {
29	for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
30	key = keys[i];
31	if (!__hasOwnProp.call(to, key) && key !== except) {
32	__defProp$1(to, key, {
33	get: ((k) => from[k]).bind(null, key),
34	enumerable: !(desc = __getOwnPropDesc(from, key)) \|\| desc.enumerable
35	});
36	}
37	}
38	}
39	return to;
40	};
41	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode \|\| !mod \|\| !mod.__esModule ? __defProp$1(target, "default", {
42	value: mod,
43	enumerable: true
44	}) : target, mod));
45
46	//#endregion
47	react = __toESM(react);
48
49	//#region packages/packages/core/editor-components/src/store/store-types.ts
50	var initialState = {
51	data: [],
52	unpublishedData: [],
53	loadStatus: "idle",
54	createdThisSession: [],
55	archivedThisSession: [],
56	path: [],
57	currentComponentId: null,
58	updatedComponentNames: {},
59	sanitized: {}
60	};
61	var SLICE_NAME = "components";
62
63	//#endregion
64	//#region packages/packages/core/editor-components/src/api.ts
65	var BASE_URL = "elementor/v1/components";
66	var getParams = (id) => ({
67	action: "get_document_config",
68	unique_id: `document-config-${id}`,
69	data: { id }
70	});
71	var apiClient = {
72	get: () => (0, _elementor_http_client.httpService)().get(`${BASE_URL}`).then((res) => res.data.data),
73	create: (payload) => (0, _elementor_http_client.httpService)().post(`${BASE_URL}`, payload).then((res) => res.data.data),
74	updateStatuses: (ids, status) => (0, _elementor_http_client.httpService)().put(`${BASE_URL}/status`, {
75	ids,
76	status
77	}),
78	getComponentConfig: (id) => _elementor_editor_v1_adapters.ajax.load(getParams(id)),
79	invalidateComponentConfigCache: (id) => _elementor_editor_v1_adapters.ajax.invalidateCache(getParams(id)),
80	getComponentLockStatus: async (componentId) => await (0, _elementor_http_client.httpService)().get(`${BASE_URL}/lock-status`, { params: { componentId } }).then((res) => {
81	const { is_current_user_allow_to_edit: isAllowedToSwitchDocument, locked_by: lockedBy } = res.data.data;
82	return {
83	isAllowedToSwitchDocument,
84	lockedBy: lockedBy \|\| ""
85	};
86	}),
87	lockComponent: async (componentId) => await (0, _elementor_http_client.httpService)().post(`${BASE_URL}/lock`, { componentId }).then((res) => res.data),
88	unlockComponent: async (componentId) => await (0, _elementor_http_client.httpService)().post(`${BASE_URL}/unlock`, { componentId }).then((res) => res.data),
89	getOverridableProps: async (componentIds) => await (0, _elementor_http_client.httpService)().get(`${BASE_URL}/overridable-props`, { params: { "componentIds[]": componentIds } }).then((res) => res.data),
90	updateArchivedComponents: async (componentIds, status) => await (0, _elementor_http_client.httpService)().post(`${BASE_URL}/archive`, {
91	componentIds,
92	status
93	}).then((res) => res.data.data),
94	updateComponentTitle: (updatedComponentNames, status) => (0, _elementor_http_client.httpService)().post(`${BASE_URL}/update-titles`, {
95	components: updatedComponentNames,
96	status
97	}).then((res) => res.data.data),
98	validate: async (payload) => await (0, _elementor_http_client.httpService)().post(`${BASE_URL}/create-validate`, payload).then((res) => res.data)
99	};
100
101	//#endregion
102	//#region packages/packages/core/editor-components/src/store/thunks.ts
103	var loadComponents = (0, _elementor_store.__createAsyncThunk)("components/load", async () => {
104	return await apiClient.get();
105	});
106
107	//#endregion
108	//#region packages/packages/core/editor-components/src/store/extensible-slice.ts
109	var extraReducersMap = /* @__PURE__ */ new Map();
110	function registerComponentsReducer(name, reducer) {
111	extraReducersMap.set(`${SLICE_NAME}/${name}`, reducer);
112	}
113	function createComponentsAction(name) {
114	const action = (0, _elementor_store.__createAction)(`${SLICE_NAME}/${name}`);
115	return {
116	action,
117	register(reducer) {
118	registerComponentsReducer(name, reducer);
119	},
120	dispatch(payload) {
121	(0, _elementor_store.__dispatch)(action(payload));
122	}
123	};
124	}
125	var baseSlice = (0, _elementor_store.__createSlice)({
126	name: SLICE_NAME,
127	initialState,
128	reducers: {
129	add: (state, { payload }) => {
130	if (Array.isArray(payload)) state.data = [...payload, ...state.data];
131	else state.data.unshift(payload);
132	},
133	load: (state, { payload }) => {
134	state.data = payload;
135	},
136	addUnpublished: (state, { payload }) => {
137	state.unpublishedData.unshift(payload);
138	},
139	removeUnpublished: (state, { payload }) => {
140	const uidsToRemove = Array.isArray(payload) ? payload : [payload];
141	state.unpublishedData = state.unpublishedData.filter((component) => !uidsToRemove.includes(component.uid));
142	},
143	resetUnpublished: (state) => {
144	state.unpublishedData = [];
145	},
146	addCreatedThisSession: (state, { payload }) => {
147	state.createdThisSession.push(payload);
148	},
149	removeCreatedThisSession: (state, { payload }) => {
150	state.createdThisSession = state.createdThisSession.filter((uid) => uid !== payload);
151	},
152	archive: (state, { payload }) => {
153	const component = state.data.find((comp) => comp.id === payload);
154	if (component) {
155	component.isArchived = true;
156	state.archivedThisSession.push(payload);
157	}
158	},
159	setCurrentComponentId: (state, { payload }) => {
160	state.currentComponentId = payload;
161	},
162	setPath: (state, { payload }) => {
163	state.path = payload;
164	},
165	setOverridableProps: (state, { payload }) => {
166	const component = state.data.find((comp) => comp.id === payload.componentId);
167	if (!component) return;
168	component.overridableProps = payload.overridableProps;
169	},
170	loadOverridableProps: (state, { payload }) => {
171	Object.keys(payload).forEach((id) => {
172	const componentId = Number(id);
173	const overridableProps = payload[componentId];
174	const component = state.data.find((comp) => comp.id === componentId);
175	if (!component \|\| !overridableProps) return;
176	component.overridableProps = overridableProps;
177	});
178	},
179	rename: (state, { payload }) => {
180	const component = state.data.find((comp) => comp.uid === payload.componentUid);
181	if (!component) return;
182	if (component.id) state.updatedComponentNames[component.id] = payload.name;
183	component.name = payload.name;
184	},
185	cleanUpdatedComponentNames: (state) => {
186	state.updatedComponentNames = {};
187	},
188	updateComponentSanitizedAttribute: (state, { payload: { componentId, attribute } }) => {
189	if (!state.sanitized[componentId]) state.sanitized[componentId] = {};
190	state.sanitized[componentId][attribute] = true;
191	},
192	resetSanitizedComponents: (state) => {
193	state.sanitized = {};
194	}
195	},
196	extraReducers: (builder) => {
197	builder.addCase(loadComponents.fulfilled, (state, { payload }) => {
198	state.data = payload;
199	state.loadStatus = "idle";
200	});
201	builder.addCase(loadComponents.pending, (state) => {
202	state.loadStatus = "pending";
203	});
204	builder.addCase(loadComponents.rejected, (state) => {
205	state.loadStatus = "error";
206	});
207	}
208	});
209	var slice = {
210	...baseSlice,
211	reducer(state, action) {
212	const nextState = baseSlice.reducer(state, action);
213	const extraReducer = extraReducersMap.get(action.type);
214	if (!extraReducer \|\| !nextState) return nextState;
215	const clonedState = structuredClone(nextState);
216	extraReducer(clonedState, action);
217	return clonedState;
218	}
219	};
220
221	//#endregion
222	//#region packages/packages/core/editor-components/src/store/store.ts
223	var selectData = (state) => state[SLICE_NAME].data;
224	var selectArchivedThisSession = (state) => state[SLICE_NAME].archivedThisSession;
225	var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
226	var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
227	var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
228	var getPath = (state) => state[SLICE_NAME].path;
229	var getCurrentComponentId = (state) => state[SLICE_NAME].currentComponentId;
230	var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
231	var useComponent = (componentId) => {
232	return (0, _elementor_store.__useSelector)((state) => componentId ? selectComponent(state, componentId) : null);
233	};
234	var selectComponentByUid = (state, componentUid) => state["components"].data.find((component) => component.uid === componentUid) ?? state["components"].unpublishedData.find((component) => component.uid === componentUid);
235	var selectComponents = (0, _elementor_store.__createSelector)(selectData, selectUnpublishedData, (data, unpublishedData) => [...unpublishedData.map((item) => ({
236	uid: item.uid,
237	name: item.name,
238	overridableProps: item.overridableProps
239	})), ...data.filter((component) => !component.isArchived)]);
240	var selectUnpublishedComponents = (0, _elementor_store.__createSelector)(selectUnpublishedData, (unpublishedData) => unpublishedData);
241	var selectLoadIsPending = (0, _elementor_store.__createSelector)(selectLoadStatus, (status) => status === "pending");
242	var selectLoadIsError = (0, _elementor_store.__createSelector)(selectLoadStatus, (status) => status === "error");
243	var selectCreatedThisSession = (0, _elementor_store.__createSelector)(getCreatedThisSession, (createdThisSession) => createdThisSession);
244	var DEFAULT_OVERRIDABLE_PROPS = {
245	props: {},
246	groups: {
247	items: {},
248	order: []
249	}
250	};
251	var selectOverridableProps = (0, _elementor_store.__createSelector)(selectComponent, (component) => {
252	if (!component) return;
253	return component.overridableProps ?? DEFAULT_OVERRIDABLE_PROPS;
254	});
255	var useOverridableProps = (componentId) => {
256	return (0, _elementor_store.__useSelector)((state) => componentId ? selectOverridableProps(state, componentId) : null);
257	};
258	var selectIsOverridablePropsLoaded = (0, _elementor_store.__createSelector)(selectComponent, (component) => {
259	return !!component?.overridableProps;
260	});
261	var selectPath = (0, _elementor_store.__createSelector)(getPath, (path) => path);
262	var selectCurrentComponentId = (0, _elementor_store.__createSelector)(getCurrentComponentId, (currentComponentId) => currentComponentId);
263	var selectCurrentComponent = (0, _elementor_store.__createSelector)(selectData, getCurrentComponentId, (data, currentComponentId) => data.find((component) => component.id === currentComponentId));
264	var useCurrentComponentId = () => {
265	return (0, _elementor_store.__useSelector)(selectCurrentComponentId);
266	};
267	var useCurrentComponent = () => {
268	return (0, _elementor_store.__useSelector)(selectCurrentComponent);
269	};
270	var selectUpdatedComponentNames = (0, _elementor_store.__createSelector)((state) => state[SLICE_NAME].updatedComponentNames, (updatedComponentNames) => Object.entries(updatedComponentNames).map(([componentId, title]) => ({
271	componentId: Number(componentId),
272	title
273	})));
274	var useSanitizedComponents = () => {
275	return (0, _elementor_store.__useSelector)((state) => state[SLICE_NAME].sanitized);
276	};
277	var useIsSanitizedComponent = (componentId, key) => {
278	const sanitizedComponents = useSanitizedComponents();
279	if (!componentId) return false;
280	return !!sanitizedComponents[componentId]?.[key];
281	};
282
283	//#endregion
284	//#region packages/packages/core/editor-components/src/utils/component-document-data.ts
285	var getComponentDocumentParams = (id) => ({
286	action: "get_document_config",
287	unique_id: `document-${id}`,
288	data: { id }
289	});
290	var pendingRequests = /* @__PURE__ */ new Map();
291	var getComponentDocumentData = (id) => {
292	const pendingRequest = pendingRequests.get(id);
293	if (pendingRequest) return pendingRequest;
294	const request = _elementor_editor_v1_adapters.ajax.load(getComponentDocumentParams(id)).catch(() => null).finally(() => pendingRequests.delete(id));
295	pendingRequests.set(id, request);
296	return request;
297	};
298
299	//#endregion
300	//#region packages/packages/core/editor-components/src/component-instance-transformer.ts
301	var componentInstanceTransformer = (0, _elementor_editor_canvas.createTransformer)(async ({ component_id: id, overrides: overridesValue }) => {
302	const unpublishedComponent = selectUnpublishedComponents((0, _elementor_store.__getState)()).find(({ uid }) => uid === id);
303	const overrides = overridesValue?.reduce((acc, override) => ({
304	...acc,
305	...override
306	}), {});
307	if (unpublishedComponent) return {
308	elements: structuredClone(unpublishedComponent.elements),
309	overrides
310	};
311	if (typeof id !== "number") throw new Error(`Component ID "${id}" not valid.`);
312	return {
313	elements: (await getComponentDocumentData(id))?.elements ?? [],
314	overrides
315	};
316	});
317
318	//#endregion
319	//#region packages/packages/core/editor-components/src/component-overridable-transformer.ts
320	var componentOverridableTransformer = (0, _elementor_editor_canvas.createTransformer)((value, options) => {
321	const { overrides } = options.renderContext ?? {};
322	const overrideValue = overrides?.[value.override_key];
323	if (overrideValue) {
324	if (isOriginValueOverride(value.origin_value)) return transformOverride(value, options, overrideValue);
325	return overrideValue;
326	}
327	return value.origin_value;
328	});
329	function transformOverride(value, options, overrideValue) {
330	const transformer = _elementor_editor_canvas.settingsTransformersRegistry.get("override");
331	if (!transformer) return null;
332	const transformedValue = transformer(value.origin_value.value, options);
333	if (!transformedValue) return null;
334	const [key] = Object.keys(transformedValue);
335	return { [key]: overrideValue };
336	}
337	function isOriginValueOverride(originValue) {
338	return originValue.$$type === "override";
339	}
340
341	//#endregion
342	//#region packages/packages/core/editor-components/src/component-override-transformer.ts
343	var componentOverrideTransformer = (0, _elementor_editor_canvas.createTransformer)((override) => {
344	const { override_key: key, override_value: overrideValue } = override;
345	return { [key]: overrideValue };
346	});
347
348	//#endregion
349	//#region packages/packages/core/editor-components/src/hooks/use-components.ts
350	var useComponents = () => {
351	return {
352	components: (0, _elementor_store.__useSelector)(selectComponents),
353	isLoading: (0, _elementor_store.__useSelector)(selectLoadIsPending)
354	};
355	};
356
357	//#endregion
358	//#region packages/packages/core/editor-components/src/utils/is-pro-components-supported.ts
359	var MIN_PRO_VERSION_FOR_COMPONENTS = "4.0";
360	function isProComponentsSupported() {
361	return (0, _elementor_utils.hasProInstalled)() && (0, _elementor_utils.isProAtLeast)(MIN_PRO_VERSION_FOR_COMPONENTS);
362	}
363	function isProOutdatedForComponents() {
364	return (0, _elementor_utils.hasProInstalled)() && !(0, _elementor_utils.isProAtLeast)(MIN_PRO_VERSION_FOR_COMPONENTS);
365	}
366
367	//#endregion
368	//#region packages/packages/core/editor-components/src/components/components-tab/search-provider.tsx
369	var SearchContext = (0, react.createContext)(void 0);
370	var SearchProvider = ({ children, localStorageKey }) => {
371	const { debouncedValue, handleChange, inputValue } = (0, _elementor_utils.useSearchState)({ localStorageKey });
372	const clearSearch = () => {
373	handleChange("");
374	};
375	return /* @__PURE__ */ react.createElement(SearchContext.Provider, { value: {
376	handleChange,
377	clearSearch,
378	searchValue: debouncedValue,
379	inputValue
380	} }, children);
381	};
382	var useSearch = () => {
383	const context = (0, react.useContext)(SearchContext);
384	if (!context) throw new Error("useSearch must be used within a SearchProvider");
385	return context;
386	};
387
388	//#endregion
389	//#region packages/packages/core/editor-components/src/components/components-tab/component-search.tsx
390	var ComponentSearch = () => {
391	const { inputValue, handleChange } = useSearch();
392	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
393	direction: "row",
394	gap: .5,
395	sx: {
396	width: "100%",
397	px: 2,
398	py: 1.5
399	}
400	}, /* @__PURE__ / react.createElement(_elementor_ui.Box, { sx: { flexGrow: 1 } }, / @__PURE__ */ react.createElement(_elementor_ui.TextField, {
401	role: "search",
402	fullWidth: true,
403	size: "tiny",
404	value: inputValue,
405	placeholder: (0, _wordpress_i18n.__)("Search", "elementor"),
406	onChange: (e) => handleChange(e.target.value),
407	InputProps: { startAdornment: /* @__PURE__ / react.createElement(_elementor_ui.InputAdornment, { position: "start" }, / @__PURE__ */ react.createElement(_elementor_icons.SearchIcon, { fontSize: "tiny" })) }
408	})));
409	};
410
411	//#endregion
412	//#region packages/packages/core/editor-components/src/hooks/use-components-permissions.ts
413	var useComponentsPermissions = () => {
414	const { isAdmin } = (0, _elementor_editor_current_user.useCurrentUserCapabilities)();
415	return {
416	canCreate: isAdmin,
417	canEdit: isAdmin,
418	canDelete: isAdmin,
419	canRename: isAdmin
420	};
421	};
422
423	//#endregion
424	//#region packages/packages/core/editor-components/src/components/components-tab/components-item.tsx
425	var ComponentItem = (0, react.forwardRef)(({ component, disabled = true, draggable, onDragStart, onDragEnd, onClick, isEditing = false, error = null, nameSlot, endSlot, ...props }, ref) => {
426	return /* @__PURE__ */ react.createElement(_elementor_ui.ListItemButton, {
427	disabled,
428	draggable,
429	onDragStart,
430	onDragEnd,
431	shape: "rounded",
432	ref,
433	sx: {
434	border: "solid 1px",
435	borderColor: "divider",
436	py: .5,
437	px: 1,
438	display: "flex",
439	width: "100%",
440	alignItems: "center",
441	gap: 1
442	},
443	...props
444	}, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
445	display: "flex",
446	alignItems: "center",
447	gap: 1,
448	minWidth: 0,
449	flexGrow: 1,
450	onClick
451	}, /* @__PURE__ / react.createElement(_elementor_ui.ListItemIcon, { size: "tiny" }, / @__PURE__ / react.createElement(_elementor_icons.ComponentsIcon, { fontSize: "tiny" })), / @__PURE__ */ react.createElement(Indicator, {
452	isActive: isEditing,
453	isError: !!error
454	}, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
455	display: "flex",
456	flex: 1,
457	minWidth: 0,
458	flexGrow: 1
459	}, nameSlot ?? /* @__PURE__ */ react.createElement(ComponentName, { name: component.name })))), endSlot);
460	});
461	var Indicator = (0, _elementor_ui.styled)(_elementor_ui.Box, { shouldForwardProp: (prop) => prop !== "isActive" && prop !== "isError" })(({ theme, isActive, isError }) => ({
462	display: "flex",
463	width: "100%",
464	flexGrow: 1,
465	borderRadius: theme.spacing(.5),
466	border: getIndicatorBorder({
467	isActive,
468	isError,
469	theme
470	}),
471	padding: `0 ${theme.spacing(1)}`,
472	marginLeft: isActive ? theme.spacing(1) : 0,
473	minWidth: 0
474	}));
475	var getIndicatorBorder = ({ isActive, isError, theme }) => {
476	if (isError) return `2px solid ${theme.palette.error.main}`;
477	if (isActive) return `2px solid ${theme.palette.secondary.main}`;
478	return "none";
479	};
480	function ComponentName({ name, editable }) {
481	if (editable?.isEditing) return /* @__PURE__ */ react.createElement(_elementor_editor_ui.EditableField, {
482	ref: editable.ref,
483	as: _elementor_ui.Typography,
484	variant: "caption",
485	...editable.getProps()
486	});
487	return /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, {
488	title: name,
489	as: _elementor_ui.Typography,
490	variant: "caption",
491	color: "text.primary"
492	});
493	}
494
495	//#endregion
496	//#region packages/packages/core/editor-components/src/components/components-tab/loading-components.tsx
497	var ROWS = Array.from({ length: 3 }, (_, index) => index);
498	var STAGGER_DELAY_MS = 80;
499	var LoadingComponents = () => {
500	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
501	"aria-label": "Loading components",
502	gap: 1.5,
503	sx: {
504	pointerEvents: "none",
505	position: "relative",
506	maxHeight: "300px",
507	overflow: "hidden",
508	px: 1,
509	"&:after": {
510	position: "absolute",
511	bottom: 0,
512	content: "\"\"",
513	left: 0,
514	width: "100%",
515	height: "40%",
516	pointerEvents: "none",
517	zIndex: 1
518	}
519	}
520	}, ROWS.map((row) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
521	key: row,
522	display: "flex",
523	alignItems: "center",
524	gap: 1.5,
525	sx: {
526	py: .75,
527	px: 1.5,
528	opacity: 0,
529	animation: `e-loading-fade-in 0.4s ease-out ${row * STAGGER_DELAY_MS}ms forwards`,
530	"@keyframes e-loading-fade-in": {
531	from: {
532	opacity: 0,
533	transform: "translateY(4px)"
534	},
535	to: {
536	opacity: 1,
537	transform: "translateY(0)"
538	}
539	}
540	}
541	}, /* @__PURE__ */ react.createElement(_elementor_ui.Skeleton, {
542	animation: "wave",
543	variant: "rounded",
544	width: 24,
545	height: 24
546	}), /* @__PURE__ */ react.createElement(_elementor_ui.Skeleton, {
547	animation: "wave",
548	variant: "rounded",
549	width: "60%",
550	height: 14
551	}))));
552	};
553
554	//#endregion
555	//#region packages/packages/core/editor-components/src/components/components-tab/components-list.tsx
556	var LEARN_MORE_URL = "http://go.elementor.com/components-guide-article";
557	var UPGRADE_URL$1 = "https://go.elementor.com/go-pro-components/";
558	var UPDATE_PLUGINS_URL$2 = "/wp-admin/plugins.php";
559	var SUBTITLE_OVERRIDE_SX = {
560	fontSize: "0.875rem !important",
561	fontWeight: "500 !important"
562	};
563	function ComponentsList() {
564	const { components, isLoading, searchValue } = useFilteredComponents();
565	if (isLoading) return /* @__PURE__ */ react.createElement(LoadingComponents, null);
566	if (!components?.length) {
567	if (searchValue.length) return /* @__PURE__ */ react.createElement(EmptySearchResult, null);
568	if (isProOutdatedForComponents()) return /* @__PURE__ */ react.createElement(ProOutdatedEmptyState, null);
569	return isProComponentsSupported() ? /* @__PURE__ / react.createElement(EmptyState$1, null) : / @__PURE__ */ react.createElement(ProUpgradeEmptyState, null);
570	}
571	return /* @__PURE__ */ react.createElement(_elementor_ui.List, { sx: {
572	display: "flex",
573	flexDirection: "column",
574	gap: 1,
575	px: 2
576	} }, components.map((component) => /* @__PURE__ */ react.createElement(ComponentItem, {
577	key: component.uid,
578	component
579	})));
580	}
581	var ProUpgradeEmptyState = () => {
582	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
583	alignItems: "center",
584	justifyContent: "start",
585	height: "100%",
586	sx: {
587	px: 2,
588	py: 4
589	},
590	gap: 2,
591	overflow: "hidden"
592	}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
593	alignItems: "center",
594	gap: 1
595	}, /* @__PURE__ */ react.createElement(_elementor_icons.ComponentsIcon, {
596	fontSize: "large",
597	sx: { color: "text.secondary" }
598	}), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
599	align: "center",
600	variant: "subtitle2",
601	color: "text.secondary",
602	sx: SUBTITLE_OVERRIDE_SX
603	}, (0, _wordpress_i18n.__)("Create Reusable Components", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
604	align: "center",
605	variant: "caption",
606	color: "secondary",
607	sx: { maxWidth: 200 }
608	}, (0, _wordpress_i18n.__)("Create design elements that sync across your entire site.", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
609	variant: "contained",
610	color: "promotion",
611	size: "small",
612	startIcon: /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, null),
613	href: UPGRADE_URL$1,
614	target: "_blank",
615	rel: "noopener noreferrer"
616	}, (0, _wordpress_i18n.__)("Upgrade now", "elementor")));
617	};
618	var ProOutdatedEmptyState = () => {
619	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
620	alignItems: "center",
621	justifyContent: "start",
622	height: "100%",
623	sx: {
624	px: 2,
625	py: 4,
626	maxWidth: 268,
627	m: "auto"
628	},
629	gap: 2,
630	overflow: "hidden"
631	}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
632	alignItems: "center",
633	gap: 1
634	}, /* @__PURE__ */ react.createElement(_elementor_icons.ComponentsIcon, {
635	fontSize: "large",
636	sx: { color: "text.secondary" }
637	}), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
638	align: "center",
639	variant: "subtitle2",
640	color: "text.secondary",
641	sx: SUBTITLE_OVERRIDE_SX
642	}, (0, _wordpress_i18n.__)("Create Reusable Components", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
643	align: "center",
644	variant: "caption",
645	color: "secondary"
646	}, (0, _wordpress_i18n.__)("Create design elements that sync across your entire site.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
647	align: "center",
648	variant: "caption",
649	color: "secondary",
650	sx: { mt: 1 }
651	}, (0, _wordpress_i18n.__)("To create components, update Elementor Pro to the latest version.", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
652	variant: "text",
653	color: "info",
654	size: "small",
655	href: UPDATE_PLUGINS_URL$2,
656	target: "_blank",
657	rel: "noopener noreferrer"
658	}, (0, _wordpress_i18n.__)("Update Elementor Pro", "elementor")));
659	};
660	var EmptyState$1 = /* @__PURE__ */ __name(() => {
661	const { canCreate } = useComponentsPermissions();
662	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
663	alignItems: "center",
664	justifyContent: "start",
665	height: "100%",
666	sx: {
667	px: 2,
668	py: 4
669	},
670	gap: 2,
671	overflow: "hidden"
672	}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
673	alignItems: "center",
674	gap: 1
675	}, /* @__PURE__ */ react.createElement(_elementor_icons.ComponentsIcon, {
676	fontSize: "large",
677	sx: { color: "text.secondary" }
678	}), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
679	align: "center",
680	variant: "subtitle2",
681	color: "text.secondary",
682	sx: SUBTITLE_OVERRIDE_SX
683	}, (0, _wordpress_i18n.__)("No components yet", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
684	align: "center",
685	variant: "caption",
686	color: "secondary",
687	sx: { maxWidth: 200 }
688	}, (0, _wordpress_i18n.__)("Components are reusable blocks that sync across your site.", "elementor"), /* @__PURE__ / react.createElement("br", null), canCreate ? (0, _wordpress_i18n.__)("Create once, use everywhere.", "elementor") : (0, _wordpress_i18n.__)("With your current role, you cannot create components. Contact an administrator to create one.", "elementor")), / @__PURE__ */ react.createElement(_elementor_ui.Link, {
689	href: LEARN_MORE_URL,
690	target: "_blank",
691	rel: "noopener noreferrer",
692	variant: "caption",
693	color: "info.main"
694	}, (0, _wordpress_i18n.__)("Learn more about components", "elementor"))), canCreate && /* @__PURE__ / react.createElement(react.Fragment, null, / @__PURE__ / react.createElement(_elementor_ui.Divider, { sx: { width: "100%" } }), / @__PURE__ */ react.createElement(_elementor_ui.Stack, {
695	alignItems: "center",
696	gap: 1,
697	width: "100%"
698	}, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
699	align: "center",
700	variant: "subtitle2",
701	color: "text.secondary",
702	sx: SUBTITLE_OVERRIDE_SX
703	}, (0, _wordpress_i18n.__)("Create your first one:", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
704	align: "center",
705	variant: "caption",
706	color: "secondary",
707	sx: { maxWidth: 228 }
708	}, (0, _wordpress_i18n.__)("Right-click any div-block or flexbox on your canvas or structure and select \"Create component\"", "elementor")))));
709	}, "EmptyState");
710	var EmptySearchResult = () => {
711	const { searchValue, clearSearch } = useSearch();
712	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
713	color: "text.secondary",
714	pt: 5,
715	alignItems: "center",
716	gap: 1,
717	overflow: "hidden",
718	justifySelf: "center"
719	}, /* @__PURE__ / react.createElement(_elementor_icons.ComponentsIcon, null), / @__PURE__ / react.createElement(_elementor_ui.Box, { sx: { width: "100%" } }, / @__PURE__ */ react.createElement(_elementor_ui.Typography, {
720	align: "center",
721	variant: "subtitle2",
722	color: "inherit",
723	sx: SUBTITLE_OVERRIDE_SX
724	}, (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor")), searchValue && /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
725	variant: "subtitle2",
726	color: "inherit",
727	sx: {
728	...SUBTITLE_OVERRIDE_SX,
729	display: "flex",
730	width: "100%",
731	justifyContent: "center"
732	}
733	}, /* @__PURE__ / react.createElement("span", null, "“"), / @__PURE__ */ react.createElement("span", { style: {
734	maxWidth: "80%",
735	overflow: "hidden",
736	textOverflow: "ellipsis"
737	} }, searchValue), /* @__PURE__ / react.createElement("span", null, "”."))), / @__PURE__ */ react.createElement(_elementor_ui.Typography, {
738	align: "center",
739	variant: "caption",
740	color: "inherit"
741	}, (0, _wordpress_i18n.__)("Try something else.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
742	align: "center",
743	variant: "caption",
744	color: "inherit"
745	}, /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
746	color: "secondary",
747	variant: "caption",
748	component: "button",
749	onClick: clearSearch
750	}, (0, _wordpress_i18n.__)("Clear & try again", "elementor"))));
751	};
752	var useFilteredComponents = () => {
753	const { components, isLoading } = useComponents();
754	const { searchValue } = useSearch();
755	return {
756	components: components.filter((component) => component.name.toLowerCase().includes(searchValue.toLowerCase())),
757	isLoading,
758	searchValue
759	};
760	};
761
762	//#endregion
763	//#region packages/packages/core/editor-components/src/components/components-upgrade-alert.tsx
764	function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
765	return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
766	mt: "auto",
767	position: "sticky",
768	bottom: 0
769	} }, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
770	variant: "standard",
771	color: "promotion",
772	icon: /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, { fontSize: "tiny" }),
773	role: "status",
774	size: "small",
775	action: /* @__PURE__ */ react.createElement(_elementor_ui.AlertAction, {
776	variant: "contained",
777	color: "promotion",
778	href: upgradeUrl,
779	target: "_blank",
780	rel: "noopener noreferrer"
781	}, (0, _wordpress_i18n.__)("Upgrade now", "elementor")),
782	sx: {
783	m: 2,
784	mt: 1
785	}
786	}, /* @__PURE__ / react.createElement(_elementor_ui.AlertTitle, null, title), / @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "caption" }, description)));
787	}
788
789	//#endregion
790	//#region packages/packages/core/editor-components/src/components/components-tab/components-pro-notification.tsx
791	var UPGRADE_URL = "https://go.elementor.com/go-pro-components-exist-footer/";
792	function ComponentsProNotification() {
793	return /* @__PURE__ */ react.createElement(ComponentsUpgradeAlert, {
794	title: (0, _wordpress_i18n.__)("Create new components", "elementor"),
795	description: (0, _wordpress_i18n.__)("Creating new components requires an active Pro subscription.", "elementor"),
796	upgradeUrl: UPGRADE_URL
797	});
798	}
799
800	//#endregion
801	//#region packages/packages/core/editor-components/src/components/components-update-alert.tsx
802	var UPDATE_PLUGINS_URL$1 = "/wp-admin/plugins.php";
803	function ComponentsUpdateAlert({ title, description }) {
804	return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
805	mt: "auto",
806	position: "sticky",
807	bottom: 0
808	} }, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
809	variant: "standard",
810	color: "info",
811	icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, { fontSize: "tiny" }),
812	role: "status",
813	size: "small",
814	action: /* @__PURE__ */ react.createElement(_elementor_ui.AlertAction, {
815	variant: "contained",
816	color: "info",
817	href: UPDATE_PLUGINS_URL$1,
818	target: "_blank",
819	rel: "noopener noreferrer"
820	}, (0, _wordpress_i18n.__)("Upgrade Now", "elementor")),
821	sx: {
822	m: 2,
823	mt: 1
824	}
825	}, /* @__PURE__ / react.createElement(_elementor_ui.AlertTitle, null, title), / @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "caption" }, description)));
826	}
827
828	//#endregion
829	//#region packages/packages/core/editor-components/src/components/components-tab/components-update-notification.tsx
830	function ComponentsUpdateNotification() {
831	return /* @__PURE__ */ react.createElement(ComponentsUpdateAlert, {
832	title: (0, _wordpress_i18n.__)("Create new Components", "elementor"),
833	description: (0, _wordpress_i18n.__)("To create new components, update Elementor Pro to the latest version.", "elementor")
834	});
835	}
836
837	//#endregion
838	//#region packages/packages/core/editor-components/src/components/components-tab/components.tsx
839	var FULL_HEIGHT_STYLE_ID = "components-full-height-panel";
840	var FULL_HEIGHT_CSS = `
841	#elementor-panel-page-elements {
842	display: flex;
843	flex-direction: column;
844	height: 100%;
845	}
846
847	#elementor-panel-elements {
848	display: flex;
849	flex-direction: column;
850	flex: 1;
851	min-height: 0;
852	}
853
854	#elementor-panel-elements-wrapper {
855	display: flex;
856	flex-direction: column;
857	flex: 1;
858	min-height: 0;
859	}
860	`;
861	var useFullHeightPanel = () => {
862	(0, react.useLayoutEffect)(() => {
863	let style = document.getElementById(FULL_HEIGHT_STYLE_ID);
864	if (!style) {
865	style = document.createElement("style");
866	style.id = FULL_HEIGHT_STYLE_ID;
867	style.textContent = FULL_HEIGHT_CSS;
868	document.head.appendChild(style);
869	}
870	return () => {
871	document.getElementById(FULL_HEIGHT_STYLE_ID)?.remove();
872	};
873	}, []);
874	};
875	var ComponentsContent = () => {
876	const { components, isLoading } = useComponents();
877	const hasComponents = !isLoading && components.length > 0;
878	const showProNotification = !isProComponentsSupported() && hasComponents;
879	const isOutdated = isProOutdatedForComponents();
880	useFullHeightPanel();
881	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
882	justifyContent: "space-between",
883	sx: {
884	flex: 1,
885	minHeight: 0
886	}
887	}, hasComponents && /* @__PURE__ / react.createElement(ComponentSearch, null), / @__PURE__ / react.createElement(ComponentsList, null), showProNotification && (isOutdated ? / @__PURE__ / react.createElement(ComponentsUpdateNotification, null) : / @__PURE__ */ react.createElement(ComponentsProNotification, null)));
888	};
889	var Components = () => {
890	return /* @__PURE__ / react.createElement(_elementor_editor_ui.ThemeProvider, null, / @__PURE__ / react.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, / @__PURE__ */ react.createElement(ComponentsContent, null)));
891	};
892
893	//#endregion
894	//#region packages/packages/core/editor-components/src/components/detach-instance-confirmation-dialog.tsx
895	function DetachInstanceConfirmationDialog({ open, onClose, onConfirm }) {
896	return /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog, {
897	open,
898	onClose
899	}, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Title, {
900	icon: _elementor_icons.AlertTriangleFilledIcon,
901	iconColor: "secondary"
902	}, (0, _wordpress_i18n.__)("Detach from Component?", "elementor")), /* @__PURE__ / react.createElement(_elementor_editor_ui.ConfirmationDialog.Content, null, / @__PURE__ / react.createElement(_elementor_editor_ui.ConfirmationDialog.ContentText, null, (0, _wordpress_i18n.__)("Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?", "elementor"))), / @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Actions, {
903	onClose,
904	onConfirm,
905	confirmLabel: (0, _wordpress_i18n.__)("Detach", "elementor"),
906	color: "primary"
907	}));
908	}
909	function openDetachConfirmDialog(onConfirm) {
910	const handleConfirm = () => {
911	(0, _elementor_editor_ui.closeDialog)();
912	onConfirm();
913	};
914	(0, _elementor_editor_ui.openDialog)({ component: /* @__PURE__ */ react.createElement(DetachInstanceConfirmationDialog, {
915	open: true,
916	onClose: _elementor_editor_ui.closeDialog,
917	onConfirm: handleConfirm
918	}) });
919	}
920
921	//#endregion
922	//#region packages/packages/core/editor-components/src/components/in-edit-mode.tsx
923	var openEditModeDialog = (lockedBy) => {
924	(0, _elementor_editor_ui.openDialog)({ component: /* @__PURE__ */ react.createElement(EditModeDialog, { lockedBy }) });
925	};
926	var EditModeDialog = ({ lockedBy }) => {
927	const content = (0, _wordpress_i18n.__)("%s is currently editing this document", "elementor").replace("%s", lockedBy);
928	return /* @__PURE__ / react.createElement(react.Fragment, null, / @__PURE__ / react.createElement(_elementor_ui.DialogHeader, { logo: false }, / @__PURE__ */ react.createElement(_elementor_ui.Box, {
929	display: "flex",
930	alignItems: "center",
931	gap: 1
932	}, /* @__PURE__ / react.createElement(_elementor_ui.Icon, { color: "secondary" }, / @__PURE__ / react.createElement(_elementor_icons.InfoCircleFilledIcon, { fontSize: "medium" })), / @__PURE__ / react.createElement(_elementor_ui.Typography, { variant: "subtitle1" }, content))), / @__PURE__ / react.createElement(_elementor_ui.DialogContent, null, / @__PURE__ */ react.createElement(_elementor_ui.Stack, {
933	spacing: 2,
934	direction: "column"
935	}, /* @__PURE__ / react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("You can wait for them to finish or reach out to coordinate your changes together.", "elementor")), / @__PURE__ / react.createElement(_elementor_ui.DialogActions, null, / @__PURE__ */ react.createElement(_elementor_ui.Button, {
936	color: "secondary",
937	variant: "contained",
938	onClick: _elementor_editor_ui.closeDialog
939	}, (0, _wordpress_i18n.__)("Close", "elementor"))))));
940	};
941
942	//#endregion
943	//#region packages/packages/core/editor-components/src/provider/component-instance-context.tsx
944	var ComponentInstanceContext = (0, react.createContext)(null);
945	function ComponentInstanceProvider({ children, ...props }) {
946	return /* @__PURE__ */ react.createElement(ComponentInstanceContext.Provider, { value: props }, children);
947	}
948	function useComponentInstanceContext() {
949	const context = (0, react.useContext)(ComponentInstanceContext);
950	if (!context) throw new Error("useComponentInstanceContext must be used within a ComponentInstanceProvider");
951	return context;
952	}
953	var useComponentId = () => useComponentInstanceContext().componentId;
954	var useComponentInstanceOverrides = () => useComponentInstanceContext().overrides;
955	var useComponentOverridableProps = () => useComponentInstanceContext().overridableProps;
956
957	//#endregion
958	//#region packages/packages/core/editor-components/src/prop-types/component-instance-override-prop-type.ts
959	var componentInstanceOverridePropTypeUtil = (0, _elementor_editor_props.createPropUtils)("override", _elementor_schema.z.object({
960	override_key: _elementor_schema.z.string(),
961	override_value: _elementor_schema.z.unknown(),
962	schema_source: _elementor_schema.z.object({
963	type: _elementor_schema.z.literal("component"),
964	id: _elementor_schema.z.number()
965	})
966	}));
967
968	//#endregion
969	//#region packages/packages/core/editor-components/src/prop-types/component-overridable-prop-type.ts
970	var componentOverridablePropTypeUtil = (0, _elementor_editor_props.createPropUtils)("overridable", _elementor_schema.z.object({
971	override_key: _elementor_schema.z.string(),
972	origin_value: _elementor_schema.z.object({
973	$$type: _elementor_schema.z.string(),
974	value: _elementor_schema.z.unknown()
975	}).nullable()
976	}));
977
978	//#endregion
979	//#region packages/packages/core/editor-components/src/prop-types/component-instance-overrides-prop-type.ts
980	var componentInstanceOverridesPropTypeUtil = (0, _elementor_editor_props.createPropUtils)("overrides", _elementor_schema.z.array(_elementor_schema.z.union([componentInstanceOverridePropTypeUtil.schema, componentOverridablePropTypeUtil.schema])).optional().default([]));
981
982	//#endregion
983	//#region packages/packages/core/editor-components/src/prop-types/component-instance-prop-type.ts
984	var componentInstancePropTypeUtil = (0, _elementor_editor_props.createPropUtils)("component-instance", _elementor_schema.z.object({
985	component_id: _elementor_editor_props.numberPropTypeUtil.schema,
986	overrides: _elementor_schema.z.optional(componentInstanceOverridesPropTypeUtil.schema)
987	}));
988
989	//#endregion
990	//#region packages/packages/core/editor-components/src/utils/tracking.ts
991	var FEATURE_NAME = "Components";
992	var trackComponentEvent = ({ action, source, executedBy, ...data }) => {
993	if (source === "system" \|\| executedBy === "system") return;
994	const { dispatchEvent, config } = (0, _elementor_events.getMixpanel)();
995	if (!config?.names?.components?.[action]) return;
996	const name = config.names.components[action];
997	dispatchEvent?.(name, {
998	...data,
999	executed_by: executedBy ?? source,
1000	"Feature name": FEATURE_NAME
1001	});
1002	};
1003	var onElementDrop = (_args, element) => {
1004	if (!(element?.model?.get("widgetType") === "e-component")) return;
1005	const editorSettings = element.model.get("editor_settings");
1006	const componentName = editorSettings?.title;
1007	const componentUID = editorSettings?.component_uid;
1008	const instanceId = element.id;
1009	const createdThisSession = selectCreatedThisSession((0, _elementor_store.__getState)());
1010	const isSameSessionReuse = componentUID && createdThisSession.includes(componentUID);
1011	const { locations, secondaryLocations } = window.elementorCommon.eventsManager.config;
1012	trackComponentEvent({
1013	action: "instanceAdded",
1014	executedBy: "user",
1015	instance_id: instanceId,
1016	component_uid: componentUID,
1017	component_name: componentName,
1018	is_same_session_reuse: isSameSessionReuse,
1019	location: locations.widgetPanel,
1020	secondary_location: secondaryLocations.componentsTab
1021	});
1022	};
1023
1024	//#endregion
1025	//#region packages/packages/core/editor-components/src/utils/detach-component-instance/regenerate-local-style-ids.ts
1026	function regenerateLocalStyleIds(element) {
1027	const originalStyles = element.styles;
1028	if (!originalStyles \|\| Object.keys(originalStyles).length === 0) return {
1029	styles: void 0,
1030	settings: void 0
1031	};
1032	const newStyles = {};
1033	const styleIdMapping = {};
1034	for (const [originalStyleId, style] of Object.entries(originalStyles)) {
1035	const newStyleId = generateLocalStyleId(element.id);
1036	newStyles[newStyleId] = {
1037	...style,
1038	id: newStyleId
1039	};
1040	styleIdMapping[originalStyleId] = newStyleId;
1041	}
1042	const settings = element.settings;
1043	if (!settings \|\| Object.keys(settings).length === 0) return {
1044	styles: newStyles,
1045	settings: void 0
1046	};
1047	const updatedSettings = { ...settings };
1048	for (const [propKey, propValue] of Object.entries(updatedSettings)) if (isClassesProp(propValue) && propValue.value.length > 0) {
1049	const updatedClasses = propValue.value.map((classId) => styleIdMapping[classId] ?? classId);
1050	updatedSettings[propKey] = _elementor_editor_props.classesPropTypeUtil.create(updatedClasses);
1051	}
1052	return {
1053	styles: newStyles,
1054	settings: updatedSettings
1055	};
1056	}
1057	function isClassesProp(prop) {
1058	return _elementor_editor_props.classesPropTypeUtil.isValid(prop);
1059	}
1060	function generateLocalStyleId(elementId) {
1061	return `e-${elementId}-${(0, _elementor_editor_elements.generateElementId)()}`;
1062	}
1063
1064	//#endregion
1065	//#region packages/packages/core/editor-components/src/consts.ts
1066	var COMPONENT_WIDGET_TYPE$1 = "e-component";
1067
1068	//#endregion
1069	//#region packages/packages/core/editor-components/src/utils/is-component-instance.ts
1070	function isComponentInstance(elementModel) {
1071	return [elementModel.widgetType, elementModel.elType].includes(COMPONENT_WIDGET_TYPE$1);
1072	}
1073
1074	//#endregion
1075	//#region packages/packages/core/editor-components/src/utils/detach-component-instance/resolve-overridable-settings.ts
1076	function resolveOverridableSettings(element, overrideMap) {
1077	if (isComponentInstance({
1078	widgetType: element.widgetType,
1079	elType: element.elType
1080	})) return resolveOverridableSettingsForComponentInstance(element, overrideMap);
1081	return resolveOverridableSettingsForElement(element, overrideMap);
1082	}
1083	function resolveOverridableSettingsForElement(element, overrideMap) {
1084	const updatedSettings = element.settings ? { ...element.settings } : {};
1085	for (const [settingKey, settingValue] of Object.entries(element.settings ?? {})) updatedSettings[settingKey] = resolvePropValue(settingValue, overrideMap);
1086	return updatedSettings;
1087	}
1088	function resolveOverridableSettingsForComponentInstance(element, overrideMap) {
1089	const componentInstance = element.settings?.component_instance;
1090	if (!componentInstancePropTypeUtil.isValid(componentInstance)) return element.settings ?? {};
1091	const instanceOverrides = componentInstance.value.overrides?.value;
1092	if (!instanceOverrides?.length) return element.settings ?? {};
1093	const updatedOverrides = instanceOverrides.map((item) => resolvePropValue(item, overrideMap, { isOverridableOverride: true }));
1094	return {
1095	...element.settings,
1096	component_instance: {
1097	...componentInstance,
1098	value: {
1099	...componentInstance.value,
1100	overrides: {
1101	...componentInstance.value.overrides,
1102	value: updatedOverrides
1103	}
1104	}
1105	}
1106	};
1107	}
1108	function resolvePropValue(propValue, overrideMap, options) {
1109	const { isOverridableOverride = false } = options ?? {};
1110	if (!componentOverridablePropTypeUtil.isValid(propValue)) return propValue;
1111	const overridableKey = propValue.value.override_key;
1112	const matchingOverride = overrideMap.get(overridableKey);
1113	const originValue = componentOverridablePropTypeUtil.extract(propValue)?.origin_value;
1114	if (!matchingOverride) return originValue;
1115	if (isOverridableOverride) return resolveOverridableOverride(matchingOverride, originValue);
1116	return componentInstanceOverridePropTypeUtil.extract(matchingOverride)?.override_value ?? originValue;
1117	}
1118	function resolveOverridableOverride(matchingOverride, originValue) {
1119	if (!originValue \|\| !componentInstanceOverridePropTypeUtil.isValid(originValue)) return null;
1120	return componentInstanceOverridePropTypeUtil.create({
1121	override_value: matchingOverride.value.override_value,
1122	override_key: originValue.value.override_key,
1123	schema_source: originValue.value.schema_source
1124	});
1125	}
1126
1127	//#endregion
1128	//#region packages/packages/core/editor-components/src/utils/detach-component-instance/resolve-detached-instance.ts
1129	function resolveDetachedInstance(element, overrides) {
1130	const overrideMap = createOverrideMap(overrides);
1131	return resolveElementRecursive(structuredClone(element), overrideMap);
1132	}
1133	function resolveElementRecursive(element, overrideMap) {
1134	element.id = (0, _elementor_editor_elements.generateElementId)();
1135	if (element.styles) {
1136	const { styles, settings } = regenerateLocalStyleIds(element);
1137	element.styles = styles;
1138	if (settings) element.settings = {
1139	...element.settings,
1140	...settings
1141	};
1142	}
1143	if (element.settings) element.settings = resolveOverridableSettings(element, overrideMap);
1144	if (element.elements?.length) element.elements = element.elements.map((child) => resolveElementRecursive(child, overrideMap));
1145	return element;
1146	}
1147	function createOverrideMap(overrides) {
1148	const map = /* @__PURE__ */ new Map();
1149	overrides.forEach((item) => {
1150	let override = null;
1151	if (componentInstanceOverridePropTypeUtil.isValid(item)) override = item;
1152	else if (componentOverridablePropTypeUtil.isValid(item)) override = getOverridableOverride(item);
1153	if (override) {
1154	const overrideKey = override.value.override_key;
1155	map.set(overrideKey, override);
1156	}
1157	});
1158	return map;
1159	}
1160	function getOverridableOverride(propValue) {
1161	if (!componentOverridablePropTypeUtil.isValid(propValue)) return null;
1162	const originValue = componentOverridablePropTypeUtil.extract(propValue)?.origin_value;
1163	if (!componentInstanceOverridePropTypeUtil.isValid(originValue)) return null;
1164	return originValue;
1165	}
1166
1167	//#endregion
1168	//#region packages/packages/core/editor-components/src/utils/detach-component-instance/detach-component-instance.ts
1169	var DETACH_EVENT = "elementor/components/detach-instance";
1170	var DETACH_UNDO_EVENT = "elementor/components/undo-detach-instance";
1171	var DETACH_REDO_EVENT = "elementor/components/redo-detach-instance";
1172	async function detachComponentInstance({ instanceId, componentId, trackingInfo }) {
1173	const instanceContainer = (0, _elementor_editor_elements.getContainer)(instanceId);
1174	if (!instanceContainer) throw new Error(`Instance container with ID "${instanceId}" not found.`);
1175	const componentData = await getComponentDocumentData(componentId);
1176	if (!componentData) throw new Error(`Component with ID "${componentId}" not found.`);
1177	const rootElement = componentData.elements?.[0];
1178	if (!rootElement) throw new Error(`Component with ID "${componentId}" has no root element.`);
1179	return (0, _elementor_editor_v1_adapters.undoable)({
1180	do: () => {
1181	const overrides = extractInstanceOverrides(instanceContainer);
1182	const detachedInstanceElementData = resolveDetachedInstance(rootElement, overrides);
1183	const originalInstanceModel = instanceContainer.model.toJSON();
1184	const actionId = (/* @__PURE__ */ new Date()).getTime();
1185	window.dispatchEvent(new CustomEvent(DETACH_EVENT, { detail: {
1186	detachedInstanceId: instanceId,
1187	detachActionId: actionId
1188	} }));
1189	const detachedElement = (0, _elementor_editor_elements.replaceElement)({
1190	currentElementId: instanceId,
1191	newElement: detachedInstanceElementData,
1192	withHistory: false
1193	});
1194	(0, _elementor_editor_elements.selectElement)(detachedElement.id);
1195	const componentUid = selectComponent((0, _elementor_store.__getState)(), componentId)?.uid;
1196	trackComponentEvent({
1197	action: "detached",
1198	executedBy: "user",
1199	component_uid: componentUid,
1200	instance_id: instanceId,
1201	location: trackingInfo.location,
1202	secondary_location: trackingInfo.secondaryLocation,
1203	trigger: trackingInfo.trigger
1204	});
1205	return {
1206	detachedElement,
1207	detachedInstanceElementData,
1208	originalInstanceModel,
1209	actionId
1210	};
1211	},
1212	undo: (_, { detachedElement, originalInstanceModel, actionId }) => {
1213	const restoredInstance = (0, _elementor_editor_elements.replaceElement)({
1214	currentElementId: detachedElement.id,
1215	newElement: originalInstanceModel,
1216	withHistory: false
1217	});
1218	window.dispatchEvent(new CustomEvent(DETACH_UNDO_EVENT, { detail: {
1219	restoredInstanceId: restoredInstance.id,
1220	detachActionId: actionId
1221	} }));
1222	(0, _elementor_editor_canvas.doAfterRender)([restoredInstance.id], () => {
1223	(0, _elementor_editor_elements.selectElement)(restoredInstance.id);
1224	});
1225	return restoredInstance;
1226	},
1227	redo: (_, doReturn, restoredInstance) => {
1228	const { detachedInstanceElementData, actionId } = doReturn;
1229	const detachedElement = (0, _elementor_editor_elements.replaceElement)({
1230	currentElementId: restoredInstance.id,
1231	newElement: detachedInstanceElementData,
1232	withHistory: false
1233	});
1234	window.dispatchEvent(new CustomEvent(DETACH_REDO_EVENT, { detail: {
1235	detachedInstanceId: detachedElement.id,
1236	detachActionId: actionId
1237	} }));
1238	(0, _elementor_editor_elements.selectElement)(detachedElement.id);
1239	return {
1240	...doReturn,
1241	detachedElement
1242	};
1243	}
1244	}, {
1245	title: (0, _wordpress_i18n.__)("Detach from Component", "elementor"),
1246	subtitle: (0, _wordpress_i18n.__)("Instance detached", "elementor")
1247	})();
1248	}
1249	function extractInstanceOverrides(instanceContainer) {
1250	const settings = instanceContainer.model.toJSON().settings;
1251	const componentInstance = componentInstancePropTypeUtil.extract(settings?.component_instance);
1252	return componentInstanceOverridesPropTypeUtil.extract(componentInstance?.overrides) ?? [];
1253	}
1254
1255	//#endregion
1256	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/instance-panel-header.tsx
1257	function InstancePanelHeader({ componentName, actions }) {
1258	return /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelHeader, { sx: {
1259	justifyContent: "start",
1260	px: 2
1261	} }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
1262	direction: "row",
1263	alignItems: "center",
1264	flexGrow: 1,
1265	gap: 1,
1266	maxWidth: "100%"
1267	}, /* @__PURE__ */ react.createElement(_elementor_icons.ComponentsIcon, {
1268	fontSize: "small",
1269	sx: { color: "text.tertiary" }
1270	}), /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, {
1271	title: componentName,
1272	as: _elementor_editor_panels.PanelHeaderTitle,
1273	sx: { flexGrow: 1 }
1274	}), actions));
1275	}
1276	function EditComponentAction({ label, onClick, disabled = false, icon: Icon }) {
1277	return /* @__PURE__ / react.createElement(_elementor_ui.Tooltip, { title: label }, / @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
1278	size: "tiny",
1279	onClick,
1280	"aria-label": label,
1281	disabled
1282	}, /* @__PURE__ */ react.createElement(Icon, { fontSize: "tiny" })));
1283	}
1284
1285	//#endregion
1286	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/detach-action.tsx
1287	var DetachAction = ({ componentInstanceId, componentId }) => {
1288	const [isDetachDialogOpen, setIsDetachDialogOpen] = (0, react.useState)(false);
1289	const handleDetachConfirm = async () => {
1290	setIsDetachDialogOpen(false);
1291	try {
1292	await detachComponentInstance({
1293	instanceId: componentInstanceId,
1294	componentId,
1295	trackingInfo: getDetachTrackingInfo()
1296	});
1297	} catch {
1298	(0, _elementor_editor_notifications.notify)({
1299	type: "error",
1300	message: (0, _wordpress_i18n.__)("Failed to detach component instance.", "elementor"),
1301	id: "detach-component-instance-failed"
1302	});
1303	}
1304	};
1305	const handleDetachCancel = () => {
1306	setIsDetachDialogOpen(false);
1307	};
1308	const handleDetachClick = () => {
1309	setIsDetachDialogOpen(true);
1310	};
1311	const detachLabel = (0, _wordpress_i18n.__)("Detach from Component", "elementor");
1312	return /* @__PURE__ / react.createElement(react.Fragment, null, / @__PURE__ */ react.createElement(EditComponentAction, {
1313	label: detachLabel,
1314	icon: _elementor_icons.DetachIcon,
1315	onClick: handleDetachClick
1316	}), /* @__PURE__ */ react.createElement(DetachInstanceConfirmationDialog, {
1317	open: isDetachDialogOpen,
1318	onClose: handleDetachCancel,
1319	onConfirm: handleDetachConfirm
1320	}));
1321	};
1322	function getDetachTrackingInfo() {
1323	const config = window?.elementorCommon?.eventsManager?.config;
1324	if (!config) return {
1325	location: "",
1326	trigger: ""
1327	};
1328	return {
1329	location: config.locations.components.instanceEditingPanel,
1330	trigger: config.triggers.click
1331	};
1332	}
1333
1334	//#endregion
1335	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/empty-state.tsx
1336	var EmptyState = ({ onEditComponent }) => {
1337	const { canEdit } = useComponentsPermissions();
1338	const message = canEdit ? (0, _wordpress_i18n.__)("Edit the component to add properties, manage them or update the design across all instances.", "elementor") : (0, _wordpress_i18n.__)("With your current role, you cannot edit this component. Contact an administrator to add properties.", "elementor");
1339	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
1340	alignItems: "center",
1341	justifyContent: "start",
1342	height: "100%",
1343	color: "text.secondary",
1344	sx: {
1345	p: 2.5,
1346	pt: 8,
1347	pb: 5.5,
1348	mt: 1
1349	},
1350	gap: 1.5
1351	}, /* @__PURE__ / react.createElement(_elementor_icons.ComponentPropListIcon, { fontSize: "large" }), / @__PURE__ */ react.createElement(_elementor_ui.Typography, {
1352	align: "center",
1353	variant: "subtitle2"
1354	}, (0, _wordpress_i18n.__)("No properties yet", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
1355	align: "center",
1356	variant: "caption",
1357	maxWidth: "170px"
1358	}, message), canEdit && /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1359	variant: "outlined",
1360	color: "secondary",
1361	size: "small",
1362	sx: { mt: 1 },
1363	disabled: !onEditComponent,
1364	onClick: onEditComponent
1365	}, /* @__PURE__ */ react.createElement(_elementor_icons.PencilIcon, { fontSize: "small" }), (0, _wordpress_i18n.__)("Edit component", "elementor")));
1366	};
1367
1368	//#endregion
1369	//#region packages/packages/core/editor-components/src/hooks/use-controls-by-widget-type.ts
1370	function useControlsByWidgetType(type) {
1371	const elementType = (0, _elementor_editor_elements.getElementType)(type);
1372	if (!elementType) return {};
1373	return getControlsByBind(iterateControls(elementType.controls));
1374	}
1375	function iterateControls(controls) {
1376	return controls.map((control) => {
1377	if (control.type === "control" && "bind" in control.value) return control;
1378	if (control.type === "section") return iterateControls(control.value.items);
1379	return null;
1380	}).filter(Boolean).flat();
1381	}
1382	function getControlsByBind(controls) {
1383	return controls.reduce((controlsByBind, control) => ({
1384	...controlsByBind,
1385	[control.value.bind]: control
1386	}), {});
1387	}
1388
1389	//#endregion
1390	//#region packages/packages/core/editor-components/src/provider/overridable-prop-context.tsx
1391	var OverridablePropContext = (0, react.createContext)(null);
1392	function OverridablePropProvider({ children, ...props }) {
1393	return /* @__PURE__ */ react.createElement(OverridablePropContext.Provider, { value: props }, children);
1394	}
1395	var useOverridablePropValue = () => (0, react.useContext)(OverridablePropContext)?.value;
1396	var useComponentInstanceElement = () => (0, react.useContext)(OverridablePropContext)?.componentInstanceElement;
1397
1398	//#endregion
1399	//#region packages/packages/core/editor-components/src/utils/resolve-override-prop-value.ts
1400	var resolveOverridePropValue = (originalPropValue) => {
1401	if (componentOverridablePropTypeUtil.isValid(originalPropValue)) return getOverridableValue(originalPropValue);
1402	if (componentInstanceOverridePropTypeUtil.isValid(originalPropValue)) return getOverrideValue(originalPropValue);
1403	return originalPropValue;
1404	};
1405	function getOverridableValue(overridableProp) {
1406	const overridableValue = componentOverridablePropTypeUtil.extract(overridableProp);
1407	if (!overridableValue) return null;
1408	if (componentInstanceOverridePropTypeUtil.isValid(overridableValue.origin_value)) return getOverrideValue(overridableValue.origin_value);
1409	return overridableValue.origin_value;
1410	}
1411	function getOverrideValue(overrideProp) {
1412	const overrideValue = componentInstanceOverridePropTypeUtil.extract(overrideProp);
1413	if (!overrideValue) return null;
1414	return overrideValue.override_value;
1415	}
1416
1417	//#endregion
1418	//#region packages/packages/core/editor-components/src/store/dispatchers.ts
1419	function safeDispatch() {
1420	return (0, _elementor_store.__getStore)()?.dispatch;
1421	}
1422	var componentsActions = {
1423	add(components) {
1424	(0, _elementor_store.__dispatch)(slice.actions.add(components));
1425	},
1426	load(components) {
1427	(0, _elementor_store.__dispatch)(slice.actions.load(components));
1428	},
1429	addUnpublished(component) {
1430	(0, _elementor_store.__dispatch)(slice.actions.addUnpublished(component));
1431	},
1432	removeUnpublished(uids) {
1433	(0, _elementor_store.__dispatch)(slice.actions.removeUnpublished(uids));
1434	},
1435	resetUnpublished() {
1436	(0, _elementor_store.__dispatch)(slice.actions.resetUnpublished());
1437	},
1438	addCreatedThisSession(uid) {
1439	(0, _elementor_store.__dispatch)(slice.actions.addCreatedThisSession(uid));
1440	},
1441	removeCreatedThisSession(uid) {
1442	(0, _elementor_store.__dispatch)(slice.actions.removeCreatedThisSession(uid));
1443	},
1444	archive(componentId) {
1445	(0, _elementor_store.__dispatch)(slice.actions.archive(componentId));
1446	},
1447	setCurrentComponentId(id) {
1448	safeDispatch()?.(slice.actions.setCurrentComponentId(id));
1449	},
1450	setPath(path) {
1451	safeDispatch()?.(slice.actions.setPath(path));
1452	},
1453	setOverridableProps(componentId, overridableProps) {
1454	(0, _elementor_store.__dispatch)(slice.actions.setOverridableProps({
1455	componentId,
1456	overridableProps
1457	}));
1458	},
1459	rename(componentUid, name) {
1460	(0, _elementor_store.__dispatch)(slice.actions.rename({
1461	componentUid,
1462	name
1463	}));
1464	},
1465	cleanUpdatedComponentNames() {
1466	(0, _elementor_store.__dispatch)(slice.actions.cleanUpdatedComponentNames());
1467	},
1468	updateComponentSanitizedAttribute(componentId, attribute) {
1469	(0, _elementor_store.__dispatch)(slice.actions.updateComponentSanitizedAttribute({
1470	componentId,
1471	attribute
1472	}));
1473	},
1474	resetSanitizedComponents() {
1475	(0, _elementor_store.__dispatch)(slice.actions.resetSanitizedComponents());
1476	}
1477	};
1478
1479	//#endregion
1480	//#region packages/packages/core/editor-components/src/store/selectors.ts
1481	function safeGetState() {
1482	return (0, _elementor_store.__getStore)()?.getState();
1483	}
1484	var componentsSelectors = {
1485	getOverridableProps(componentId) {
1486	return selectOverridableProps((0, _elementor_store.__getState)(), componentId);
1487	},
1488	getCurrentComponent() {
1489	return selectCurrentComponent((0, _elementor_store.__getState)());
1490	},
1491	getCurrentComponentId() {
1492	const state = safeGetState();
1493	if (!state) return null;
1494	return selectCurrentComponentId(state);
1495	},
1496	getUnpublishedComponents() {
1497	return selectUnpublishedComponents((0, _elementor_store.__getState)());
1498	},
1499	getUpdatedComponentNames() {
1500	return selectUpdatedComponentNames((0, _elementor_store.__getState)());
1501	},
1502	getArchivedThisSession() {
1503	return selectArchivedThisSession((0, _elementor_store.__getState)());
1504	},
1505	getCreatedThisSession() {
1506	return selectCreatedThisSession((0, _elementor_store.__getState)());
1507	},
1508	getComponents() {
1509	return selectComponents((0, _elementor_store.__getState)());
1510	},
1511	getComponentByUid(componentUid) {
1512	return selectComponentByUid((0, _elementor_store.__getState)(), componentUid);
1513	}
1514	};
1515
1516	//#endregion
1517	//#region packages/packages/core/editor-components/src/store/actions/update-overridable-prop.ts
1518	function updateOverridableProp(componentId, propValue, originPropFields) {
1519	const overridableProps = componentsSelectors.getOverridableProps(componentId);
1520	if (!overridableProps) return;
1521	const existingOverridableProp = overridableProps.props[propValue.override_key];
1522	if (!existingOverridableProp) return;
1523	const originValue = resolveOverridePropValue(propValue.origin_value);
1524	const newOverridableProp = originPropFields ? {
1525	originValue,
1526	originPropFields
1527	} : { originValue };
1528	const newOverridableProps = {
1529	...overridableProps,
1530	props: {
1531	...overridableProps.props,
1532	[existingOverridableProp.overrideKey]: {
1533	...existingOverridableProp,
1534	...newOverridableProp
1535	}
1536	}
1537	};
1538	componentsActions.setOverridableProps(componentId, newOverridableProps);
1539	}
1540
1541	//#endregion
1542	//#region packages/packages/core/editor-components/src/utils/get-prop-type-for-component-override.ts
1543	var getPropTypeForComponentOverride = (overridableProp) => {
1544	if (overridableProp.originPropFields) return getPropType(overridableProp.originPropFields);
1545	const { widgetType, propKey } = overridableProp;
1546	return getPropType({
1547	widgetType,
1548	propKey
1549	});
1550	};
1551	function getPropType({ widgetType, propKey }) {
1552	return ((0, _elementor_editor_elements.getWidgetsCache)()?.[widgetType]?.atomic_props_schema)?.[propKey];
1553	}
1554
1555	//#endregion
1556	//#region packages/packages/core/editor-components/src/utils/overridable-props-utils.ts
1557	function getMatchingOverride(overrides, overrideKey) {
1558	return overrides?.find((override) => {
1559	const overridableValue = componentOverridablePropTypeUtil.extract(override);
1560	if (overridableValue) return componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value)?.override_key === overrideKey;
1561	return override.value.override_key === overrideKey;
1562	}) ?? null;
1563	}
1564
1565	//#endregion
1566	//#region packages/packages/core/editor-components/src/components/control-label.tsx
1567	var ControlLabel = ({ children, ...props }) => {
1568	return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
1569	direction: "row",
1570	alignItems: "center",
1571	justifyItems: "start",
1572	gap: .25
1573	}, /* @__PURE__ / react.createElement(_elementor_editor_controls.ControlFormLabel, { ...props }, children), / @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornments, null));
1574	};
1575
1576	//#endregion
1577	//#region packages/packages/core/editor-components/src/components/errors.ts
1578	var OverrideControlInnerElementNotFoundError = (0, _elementor_utils.createError)({
1579	code: "override_control_inner_element_not_found",
1580	message: `Component inner element not found for override control. The element may have been deleted without updating the overridable props, or the component has not finished rendering yet.`
1581	});
1582	var OverrideControlPropTypeNotFoundError = (0, _elementor_utils.createError)({
1583	code: "override_control_prop_type_not_found",
1584	message: "Prop type not found for override control."
1585	});
1586
1587	//#endregion
1588	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts
1589	function correctExposedEmptyOverride(newPropValue, matchingOverride) {
1590	const newOverridableValue = componentOverridablePropTypeUtil.extract(newPropValue);
1591	if (!(newOverridableValue && matchingOverride === null)) return newPropValue;
1592	return componentOverridablePropTypeUtil.create({
1593	override_key: newOverridableValue.override_key,
1594	origin_value: null
1595	});
1596	}
1597
1598	//#endregion
1599	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/utils/resolve-element-settings.ts
1600	function applyOverridesToSettings(elementSettings, overrides) {
1601	const result = {};
1602	for (const [propKey, propValue] of Object.entries(elementSettings)) {
1603	const overridable = componentOverridablePropTypeUtil.extract(propValue);
1604	if (!overridable) {
1605	result[propKey] = propValue;
1606	continue;
1607	}
1608	const override = overrides[overridable.override_key];
1609	if (!override) {
1610	result[propKey] = propValue;
1611	continue;
1612	}
1613	if (override.outermostKey && override.outermostKey !== overridable.override_key) {
1614	const originValue = overridable.origin_value;
1615	result[propKey] = componentOverridablePropTypeUtil.create({
1616	override_key: override.outermostKey,
1617	origin_value: override.value ?? originValue
1618	});
1619	} else result[propKey] = override.value ?? propValue;
1620	}
1621	return result;
1622	}
1623	function unwrapOverridableSettings(elementSettings) {
1624	const result = {};
1625	for (const [propKey, propValue] of Object.entries(elementSettings)) {
1626	const overridable = componentOverridablePropTypeUtil.extract(propValue);
1627	if (!overridable) {
1628	result[propKey] = propValue;
1629	continue;
1630	}
1631	result[propKey] = overridable.origin_value;
1632	}
1633	return result;
1634	}
1635
1636	//#endregion
1637	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/utils/use-override-dependencies.ts
1638	function useOverrideControlDependencies({ existingOverride, resolvedElementSettings, elementId, elementType, propKey }) {
1639	return (0, react.useMemo)(() => {
1640	const { isDisabled, isHidden } = (0, _elementor_editor_editing_panel.extractDependencyEffect)(propKey, elementType.propsSchema, resolvedElementSettings);
1641	const existingOverrideValue = existingOverride ? resolveOverridePropValue(existingOverride) : null;
1642	const settingsForDepsNewValuesCalculation = {
1643	...resolvedElementSettings,
1644	[propKey]: existingOverrideValue
1645	};
1646	const resolvedSettingsWithDefaults = (0, _elementor_editor_editing_panel.getElementSettingsWithDefaults)(elementType.propsSchema, settingsForDepsNewValuesCalculation);
1647	const dependents = (0, _elementor_editor_editing_panel.extractOrderedDependencies)(elementType.dependenciesPerTargetMapping ?? {});
1648	return {
1649	overrideValue: (0, _elementor_editor_editing_panel.getUpdatedValues)({ [propKey]: existingOverrideValue }, dependents, elementType.propsSchema, resolvedSettingsWithDefaults, elementId)[propKey],
1650	isDisabled,
1651	isHidden
1652	};
1653	}, [
1654	existingOverride,
1655	resolvedElementSettings,
1656	propKey,
1657	elementType.propsSchema,
1658	elementType.dependenciesPerTargetMapping,
1659	elementId
1660	]);
1661	}
1662
1663	//#endregion
1664	//#region packages/packages/core/editor-components/src/utils/get-container-by-origin-id.ts
1665	function getContainerByOriginId(originElementId, instanceElementId) {
1666	if (!instanceElementId) return (0, _elementor_editor_elements.getContainer)(originElementId);
1667	const instanceContainer = (0, _elementor_editor_elements.getContainer)(instanceElementId);
1668	if (!instanceContainer) return null;
1669	return window.elementor?.getContainerByKeyValue?.({
1670	key: "originId",
1671	value: originElementId,
1672	parent: instanceContainer.view
1673	}) ?? null;
1674	}
1675
1676	//#endregion
1677	//#region packages/packages/core/editor-components/src/utils/get-overridable-prop.ts
1678	function getOverridableProp({ componentId, overrideKey }) {
1679	const overridableProps = selectOverridableProps((0, _elementor_store.__getState)(), componentId);
1680	if (!overridableProps) return;
1681	return overridableProps.props[overrideKey];
1682	}
1683
1684	//#endregion
1685	//#region packages/packages/core/editor-components/src/utils/resolve-overrides-chain.ts
1686	function resolveOverridesChain({ outerOverridableProp, outerInstanceId, overridesMapping = {} }) {
1687	if (!outerOverridableProp.originPropFields) {
1688	const innerElement = getContainerByOriginId(outerOverridableProp.elementId, outerInstanceId);
1689	if (!innerElement) throw new Error(`Inner element not found inside instance. elementId: ${outerOverridableProp.elementId}, instanceId: ${outerInstanceId}`);
1690	return {
1691	isChainBroken: false,
1692	innerElement,
1693	overridesMapping
1694	};
1695	}
1696	const currentInstance = getContainerByOriginId(outerOverridableProp.elementId, outerInstanceId);
1697	if (!currentInstance) return { isChainBroken: true };
1698	const { componentId, overrides } = extractComponentInstanceSettings(currentInstance);
1699	if (!componentId) throw new Error(`Component ID not found for current instance. currentInstanceId: ${currentInstance.id}. outerInstanceId: ${outerInstanceId}`);
1700	const mergedOverrides = buildOverridesMap(overridesMapping, overrides ?? []);
1701	const override = findOverrideByOuterKey(overrides, outerOverridableProp.overrideKey);
1702	const overrideKey = componentInstanceOverridePropTypeUtil.extract(override)?.override_key;
1703	if (!override \|\| !overrideKey) return { isChainBroken: true };
1704	const overridableProp = getOverridableProp({
1705	componentId,
1706	overrideKey
1707	});
1708	if (!overridableProp) throw new Error(`Overridable prop not found. componentId: ${componentId}, overrideKey: ${overrideKey}`);
1709	return resolveOverridesChain({
1710	outerOverridableProp: overridableProp,
1711	outerInstanceId: currentInstance.id,
1712	overridesMapping: mergedOverrides
1713	});
1714	}
1715	function buildOverridesMap(existing, levelOverrides) {
1716	const result = { ...existing };
1717	for (const item of levelOverrides) {
1718	const overridableValue = componentOverridablePropTypeUtil.extract(item);
1719	if (overridableValue) {
1720	const override = componentInstanceOverridePropTypeUtil.extract(overridableValue.origin_value);
1721	if (!override) continue;
1722	const outerKey = overridableValue.override_key;
1723	const innerKey = override.override_key;
1724	const innerValue = override.override_value;
1725	const higherLevelOverride = existing[outerKey];
1726	if (higherLevelOverride) {
1727	result[innerKey] = {
1728	value: higherLevelOverride.value ?? innerValue,
1729	outermostKey: higherLevelOverride.outermostKey ?? outerKey
1730	};
1731	continue;
1732	}
1733	result[innerKey] = {
1734	value: innerValue,
1735	outermostKey: outerKey
1736	};
1737	} else {
1738	const override = componentInstanceOverridePropTypeUtil.extract(item);
1739	if (!override) continue;
1740	const key = override.override_key;
1741	result[key] = { value: override.override_value };
1742	}
1743	}
1744	return result;
1745	}
1746	function extractComponentInstanceSettings(element) {
1747	const instanceSetting = element.settings?.get("component_instance");
1748	const instanceValue = componentInstancePropTypeUtil.extract(instanceSetting);
1749	return {
1750	componentId: instanceValue?.component_id?.value,
1751	overrides: componentInstanceOverridesPropTypeUtil.extract(instanceValue?.overrides)
1752	};
1753	}
1754	function findOverrideByOuterKey(overrides, outerKey) {
1755	if (!overrides) return null;
1756	const overridableOverride = overrides.find((item) => {
1757	const overridableValue = componentOverridablePropTypeUtil.extract(item);
1758	if (!overridableValue) return false;
1759	return overridableValue.override_key === outerKey;
1760	});
1761	const override = componentOverridablePropTypeUtil.extract(overridableOverride)?.origin_value;
1762	if (!override \|\| !componentInstanceOverridePropTypeUtil.isValid(override)) return null;
1763	return override;
1764	}
1765
1766	//#endregion
1767	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/utils/use-resolved-inner-element.ts
1768	function useResolvedInnerElement(overridableProp) {
1769	const componentInstanceElement = (0, _elementor_editor_editing_panel.useElement)();
1770	const componentId = useComponentId();
1771	const overrides = useComponentInstanceOverrides();
1772	const { elementId: originElementId, widgetType, elType } = overridableProp.originPropFields ?? overridableProp;
1773	const type = elType === "widget" ? widgetType : elType;
1774	const elementType = (0, _elementor_editor_elements.getElementType)(type);
1775	if (!elementType) throw new Error(`Element type not found for ${type}`);
1776	const { elementId, overridesMapping } = (0, react.useMemo)(() => {
1777	const overridesChainResult = resolveOverridesChain({
1778	outerOverridableProp: overridableProp,
1779	outerInstanceId: componentInstanceElement.element.id
1780	});
1781	if (overridesChainResult.isChainBroken) throw new OverrideControlInnerElementNotFoundError({ context: {
1782	componentId,
1783	elementId: originElementId
1784	} });
1785	return {
1786	elementId: overridesChainResult.innerElement.id,
1787	overridesMapping: overridesChainResult.overridesMapping
1788	};
1789	}, [
1790	overridableProp,
1791	componentInstanceElement.element.id,
1792	componentId,
1793	originElementId
1794	]);
1795	const settingsWithInnerOverrides = (0, react.useMemo)(() => {
1796	return applyOverridesToSettings((0, _elementor_editor_elements.getElementSettings)(elementId, Object.keys(elementType?.propsSchema ?? {})), overridesMapping);
1797	}, [
1798	elementId,
1799	elementType?.propsSchema,
1800	overridesMapping
1801	]);
1802	return {
1803	elementId,
1804	elementType,
1805	resolvedOriginValues: settingsWithInnerOverrides,
1806	resolvedElementSettings: (0, react.useMemo)(() => {
1807	return unwrapOverridableSettings(applyOverridesToSettings(settingsWithInnerOverrides, formatOverridesToApply(overrides)));
1808	}, [settingsWithInnerOverrides, overrides])
1809	};
1810	}
1811	function formatOverridesToApply(overrides) {
1812	if (!overrides) return {};
1813	const result = {};
1814	for (const item of overrides) {
1815	const overridable = componentOverridablePropTypeUtil.extract(item);
1816	let override = item;
1817	if (overridable) override = overridable.origin_value;
1818	const extractedOverride = componentInstanceOverridePropTypeUtil.extract(override);
1819	if (!extractedOverride) continue;
1820	result[extractedOverride.override_key] = { value: extractedOverride.override_value };
1821	}
1822	return result;
1823	}
1824
1825	//#endregion
1826	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/override-prop-control.tsx
1827	function OverridePropControl({ overrideKey }) {
1828	const overridableProp = useComponentOverridableProps().props[overrideKey];
1829	if (!overridableProp) return null;
1830	return /* @__PURE__ */ react.createElement(_elementor_editor_editing_panel.SettingsField, {
1831	bind: "component_instance",
1832	propDisplayName: overridableProp.label
1833	}, /* @__PURE__ */ react.createElement(OverrideControl, { overridableProp }));
1834	}
1835	function OverrideControl({ overridableProp }) {
1836	const componentInstanceElement = (0, _elementor_editor_editing_panel.useElement)();
1837	const { value: instanceValue, setValue: setInstanceValue } = (0, _elementor_editor_controls.useBoundProp)(componentInstancePropTypeUtil);
1838	const wrappingComponentId = useCurrentComponentId();
1839	const componentId = useComponentId();
1840	const overridableProps = useComponentOverridableProps();
1841	const overrides = useComponentInstanceOverrides();
1842	const controls = useControlsByWidgetType(overridableProp.originPropFields?.widgetType ?? overridableProp.widgetType);
1843	const controlReplacements = (0, _elementor_editor_controls.getControlReplacements)();
1844	const matchingOverride = getMatchingOverride(overrides, overridableProp.overrideKey);
1845	const { propKey } = overridableProp.originPropFields ?? overridableProp;
1846	const propType = getPropTypeForComponentOverride(overridableProp);
1847	if (!propType) throw new OverrideControlPropTypeNotFoundError({ context: { overridableProp } });
1848	const { elementId, elementType, resolvedElementSettings, resolvedOriginValues } = useResolvedInnerElement(overridableProp);
1849	const { overrideValue, isDisabled, isHidden } = useOverrideControlDependencies({
1850	existingOverride: matchingOverride,
1851	resolvedElementSettings,
1852	elementType,
1853	elementId,
1854	propKey
1855	});
1856	if (isHidden) return null;
1857	const { propValue, baseValue: resolvedBaseValue } = resolveOverrideValues(overrideValue, resolvedOriginValues, propKey);
1858	const value = { [overridableProp.overrideKey]: propValue };
1859	const baseValue = { [overridableProp.overrideKey]: resolvedBaseValue };
1860	const { control, controlProps, layout } = getControlParams(controls, overridableProp.originPropFields ?? overridableProp, overridableProp.label);
1861	const propTypeSchema = (0, _elementor_editor_editing_panel.createTopLevelObjectType)({ schema: { [overridableProp.overrideKey]: propType } });
1862	const setValue = (newValue, options, meta) => {
1863	let newPropValue = getTempNewValueForDynamicProp(propType, propValue, newValue[overridableProp.overrideKey]);
1864	newPropValue = correctExposedEmptyOverride(newPropValue, matchingOverride);
1865	const newOverrideValue = createOverrideValue({
1866	matchingOverride,
1867	overrideKey: overridableProp.overrideKey,
1868	overrideValue: newPropValue,
1869	componentId
1870	});
1871	let newOverrides = (overrides ?? []).filter((override) => isValidOverride(overridableProps, override)).map((override) => override === matchingOverride ? newOverrideValue : override);
1872	if (!matchingOverride) newOverrides = [...newOverrides, newOverrideValue];
1873	setInstanceValue({
1874	...instanceValue,
1875	overrides: componentInstanceOverridesPropTypeUtil.create(newOverrides)
1876	}, options, meta);
1877	const overridableValue = componentOverridablePropTypeUtil.extract(newOverrideValue);
1878	if (overridableValue && wrappingComponentId) {
1879	if (overridableProp.originPropFields) {
1880	updateOverridableProp(wrappingComponentId, overridableValue, overridableProp.originPropFields);
1881	return;
1882	}
1883	const originPropFields = {
1884	elType: overridableProp.elType,
1885	widgetType: overridableProp.widgetType,
1886	propKey: overridableProp.propKey,
1887	elementId: overridableProp.elementId
1888	};
1889	updateOverridableProp(wrappingComponentId, overridableValue, originPropFields);
1890	}
1891	};
1892	return /* @__PURE__ */ react.createElement(OverridablePropProvider, {
1893	value: componentOverridablePropTypeUtil.extract(matchingOverride) ?? void 0,
1894	componentInstanceElement
1895	}, /* @__PURE__ */ react.createElement(_elementor_editor_editing_panel.ElementProvider, {
1896	element: {
1897	id: elementId,
1898	type: elementType.key
1899	},
1900	elementType,
1901	settings: resolvedElementSettings
1902	}, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, {
1903	propType: propTypeSchema,
1904	value,
1905	setValue,
1906	baseValue,
1907	isDisabled
1908	}, /* @__PURE__ / react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: overridableProp.overrideKey }, / @__PURE__ / react.createElement(_elementor_editor_controls.ControlReplacementsProvider, { replacements: controlReplacements }, / @__PURE__ / react.createElement(_elementor_ui.Box, { mb: 1.5 }, / @__PURE__ / react.createElement(_elementor_editor_editing_panel.ControlTypeContainer, { layout }, layout !== "custom" && / @__PURE__ / react.createElement(ControlLabel, null, overridableProp.label), / @__PURE__ */ react.createElement(OriginalControl, {
1909	control,
1910	controlProps
1911	}))))))));
1912	}
1913	function resolveOverrideValues(overrideValue, resolvedOriginValues, propKey) {
1914	const inheritedValue = unwrapOverridableSettings(resolvedOriginValues)[propKey] ?? null;
1915	const isInheritedDynamic = (0, _elementor_editor_editing_panel.isDynamicPropValue)(inheritedValue);
1916	return {
1917	propValue: isInheritedDynamic && !overrideValue ? inheritedValue : overrideValue,
1918	baseValue: overrideValue \|\| isInheritedDynamic ? null : inheritedValue
1919	};
1920	}
1921	function getTempNewValueForDynamicProp(propType, propValue, newPropValue) {
1922	if (newPropValue === null && (0, _elementor_editor_editing_panel.isDynamicPropValue)(propValue)) return propType.default ?? null;
1923	return newPropValue;
1924	}
1925	function createOverrideValue({ matchingOverride, overrideKey, overrideValue, componentId }) {
1926	const overridableValue = componentOverridablePropTypeUtil.extract(matchingOverride);
1927	const anyOverridable = componentOverridablePropTypeUtil.extract(overrideValue) ?? overridableValue;
1928	if (anyOverridable) {
1929	const innerOverride = componentInstanceOverridePropTypeUtil.create({
1930	override_key: overrideKey,
1931	override_value: resolveOverridePropValue(overrideValue),
1932	schema_source: {
1933	type: "component",
1934	id: componentId
1935	}
1936	});
1937	return componentOverridablePropTypeUtil.create({
1938	override_key: anyOverridable.override_key,
1939	origin_value: innerOverride
1940	});
1941	}
1942	return componentInstanceOverridePropTypeUtil.create({
1943	override_key: overrideKey,
1944	override_value: overrideValue,
1945	schema_source: {
1946	type: "component",
1947	id: componentId
1948	}
1949	});
1950	}
1951	function getControlParams(controls, originPropFields, label) {
1952	const control = controls[originPropFields.propKey];
1953	const { value } = control;
1954	const layout = getControlLayout(control);
1955	const controlProps = populateChildControlProps(value.props);
1956	if (layout === "custom") controlProps.label = label ?? value.label;
1957	return {
1958	control,
1959	controlProps,
1960	layout
1961	};
1962	}
1963	function OriginalControl({ control, controlProps }) {
1964	const { value } = control;
1965	return /* @__PURE__ */ react.createElement(_elementor_editor_editing_panel.BaseControl, {
1966	type: value.type,
1967	props: controlProps
1968	});
1969	}
1970	function getControlLayout(control) {
1971	return control.value.meta?.layout \|\| _elementor_editor_editing_panel.controlsRegistry.getLayout(control.value.type);
1972	}
1973	function populateChildControlProps(props) {
1974	if (props.childControlType) {
1975	const childComponent = _elementor_editor_editing_panel.controlsRegistry.get(props.childControlType);
1976	const childPropType = _elementor_editor_editing_panel.controlsRegistry.getPropTypeUtil(props.childControlType);
1977	props = {
1978	...props,
1979	childControlConfig: {
1980	component: childComponent,
1981	props: props.childControlProps \|\| {},
1982	propTypeUtil: childPropType
1983	}
1984	};
1985	}
1986	return props;
1987	}
1988	function isValidOverride(overridableProps, override) {
1989	const overridableKey = componentOverridablePropTypeUtil.isValid(override) ? override.value.origin_value?.value.override_key : override.value.override_key;
1990	return !!overridableProps.props[overridableKey];
1991	}
1992
1993	//#endregion
1994	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/override-props-group.tsx
1995	function OverridePropsGroup({ group }) {
1996	const [isOpen, setIsOpen] = (0, _elementor_editor_editing_panel.useStateByElement)(group.id, true);
1997	const handleClick = () => {
1998	setIsOpen(!isOpen);
1999	};
2000	const id = (0, react.useId)();
2001	const labelId = `label-${id}`;
2002	const contentId = `content-${id}`;
2003	const title = group.label;
2004	return /* @__PURE__ / react.createElement(_elementor_ui.Box, { "aria-label": `${title} section` }, / @__PURE__ */ react.createElement(_elementor_ui.ListItemButton, {
2005	id: labelId,
2006	"aria-controls": contentId,
2007	"aria-label": `${title} section`,
2008	onClick: handleClick,
2009	p: 0,
2010	sx: { "&:hover": { backgroundColor: "transparent" } }
2011	}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2012	direction: "row",
2013	alignItems: "center",
2014	justifyItems: "start",
2015	flexGrow: 1,
2016	gap: .5
2017	}, /* @__PURE__ */ react.createElement(_elementor_ui.ListItemText, {
2018	secondary: title,
2019	secondaryTypographyProps: {
2020	color: "text.primary",
2021	variant: "caption",
2022	fontWeight: "bold"
2023	},
2024	sx: {
2025	flexGrow: 0,
2026	flexShrink: 1,
2027	marginInlineEnd: 1
2028	}
2029	})), /* @__PURE__ */ react.createElement(_elementor_editor_ui.CollapseIcon, {
2030	open: isOpen,
2031	color: "secondary",
2032	fontSize: "tiny"
2033	})), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, {
2034	id: contentId,
2035	"aria-labelledby": labelId,
2036	in: isOpen,
2037	timeout: "auto"
2038	}, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2039	direction: "column",
2040	gap: 1,
2041	p: 2
2042	}, group.props.map((overrideKey) => /* @__PURE__ */ react.createElement(OverridePropControl, {
2043	key: overrideKey,
2044	overrideKey
2045	})))));
2046	}
2047
2048	//#endregion
2049	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/instance-panel-body.tsx
2050	function InstancePanelBody({ groups, isEmpty, emptyState, componentInstanceId }) {
2051	return /* @__PURE__ / react.createElement(_elementor_editor_panels.PanelBody, null, / @__PURE__ / react.createElement(_elementor_editor_controls.ControlAdornmentsProvider, { items: (0, _elementor_editor_editing_panel.getFieldIndicators)("settings") }, isEmpty ? emptyState : / @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2052	direction: "column",
2053	alignItems: "stretch"
2054	}, groups.map((group) => /* @__PURE__ / react.createElement(react.Fragment, { key: group.id + componentInstanceId }, / @__PURE__ / react.createElement(OverridePropsGroup, { group }), / @__PURE__ */ react.createElement(_elementor_ui.Divider, null))))));
2055	}
2056
2057	//#endregion
2058	//#region packages/packages/core/editor-components/src/utils/filter-valid-overridable-props.ts
2059	function filterValidOverridableProps(overridableProps, instanceElementId) {
2060	const validProps = {};
2061	for (const [key, prop] of Object.entries(overridableProps.props)) if (isExposedPropValid(prop, instanceElementId)) validProps[key] = prop;
2062	const validPropKeys = new Set(Object.keys(validProps));
2063	return {
2064	props: validProps,
2065	groups: {
2066	items: Object.fromEntries(Object.entries(overridableProps.groups.items).map(([groupId, group]) => [groupId, {
2067	...group,
2068	props: group.props.filter((propKey) => validPropKeys.has(propKey))
2069	}])),
2070	order: overridableProps.groups.order
2071	}
2072	};
2073	}
2074	function isExposedPropValid(prop, instanceElementId) {
2075	const { isChainBroken } = resolveOverridesChain({
2076	outerOverridableProp: prop,
2077	outerInstanceId: instanceElementId
2078	});
2079	return !isChainBroken;
2080	}
2081
2082	//#endregion
2083	//#region packages/packages/core/editor-components/src/hooks/use-sanitize-overridable-props.ts
2084	function useSanitizeOverridableProps(componentId, instanceElementId) {
2085	const overridableProps = useOverridableProps(componentId);
2086	const isSanitized = useIsSanitizedComponent(componentId, "overridableProps");
2087	if (!overridableProps \|\| !componentId) return;
2088	if (isSanitized) return overridableProps;
2089	return filterValidOverridableProps(overridableProps, instanceElementId);
2090	}
2091
2092	//#endregion
2093	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/use-instance-panel-data.ts
2094	function useInstancePanelData() {
2095	const { element, settings } = useComponentInstanceSettings();
2096	const componentId = settings?.component_id?.value;
2097	const overrides = settings?.overrides?.value;
2098	const component = useComponent(componentId ?? null);
2099	const componentInstanceId = element?.id;
2100	const overridableProps = useSanitizeOverridableProps(componentId ?? null, componentInstanceId);
2101	if (!componentId \|\| !overridableProps \|\| !component \|\| !componentInstanceId) return null;
2102	const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
2103	const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
2104	return {
2105	componentId,
2106	component,
2107	overrides,
2108	overridableProps,
2109	groups,
2110	isEmpty: groups.length === 0 \|\| Object.keys(overridableProps.props).length === 0,
2111	componentInstanceId
2112	};
2113	}
2114	function useComponentInstanceSettings() {
2115	const { element, settings } = (0, _elementor_editor_editing_panel.useElement)();
2116	return {
2117	element,
2118	settings: componentInstancePropTypeUtil.extract(settings.component_instance)
2119	};
2120	}
2121
2122	//#endregion
2123	//#region packages/packages/core/editor-components/src/components/instance-editing-panel/instance-editing-panel.tsx
2124	var EDIT_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-footer/";
2125	function InstanceEditingPanel() {
2126	const { canEdit } = useComponentsPermissions();
2127	const data = useInstancePanelData();
2128	if (!data) return null;
2129	const { componentId, component, overrides, overridableProps, groups, isEmpty, componentInstanceId } = data;
2130	const panelTitle = (0, _wordpress_i18n.__)("Edit %s", "elementor").replace("%s", component.name);
2131	const actions = /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2132	direction: "row",
2133	gap: .5
2134	}, /* @__PURE__ */ react.createElement(DetachAction, {
2135	componentInstanceId,
2136	componentId
2137	}), canEdit && /* @__PURE__ */ react.createElement(EditComponentAction, {
2138	disabled: true,
2139	label: panelTitle,
2140	icon: _elementor_icons.PencilIcon
2141	}));
2142	return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2143	"data-testid": "instance-editing-panel",
2144	sx: {
2145	display: "flex",
2146	flexDirection: "column",
2147	height: "100%"
2148	}
2149	}, /* @__PURE__ */ react.createElement(ComponentInstanceProvider, {
2150	componentId,
2151	overrides,
2152	overridableProps
2153	}, /* @__PURE__ */ react.createElement(InstancePanelHeader, {
2154	componentName: component.name,
2155	actions
2156	}), /* @__PURE__ */ react.createElement(InstancePanelBody, {
2157	groups,
2158	isEmpty,
2159	emptyState: /* @__PURE__ */ react.createElement(EmptyState, null),
2160	componentInstanceId
2161	})), !isProComponentsSupported() && (isProOutdatedForComponents() ? /* @__PURE__ */ react.createElement(ComponentsUpdateAlert, {
2162	title: (0, _wordpress_i18n.__)("Edit Component", "elementor"),
2163	description: (0, _wordpress_i18n.__)("To edit components, update Elementor Pro to the latest version.", "elementor")
2164	}) : /* @__PURE__ */ react.createElement(ComponentsUpgradeAlert, {
2165	title: (0, _wordpress_i18n.__)("Edit components", "elementor"),
2166	description: (0, _wordpress_i18n.__)("Editing components requires an active Pro subscription.", "elementor"),
2167	upgradeUrl: EDIT_UPGRADE_URL
2168	})));
2169	}
2170
2171	//#endregion
2172	//#region packages/packages/core/editor-components/src/utils/get-component-documents.ts
2173	async function getComponentDocuments({ elements, cache = /* @__PURE__ */ new Map(), isRecursive = true }) {
2174	return getDocumentsMap(await getComponentIds(elements, cache, isRecursive), cache);
2175	}
2176	async function getComponentIds(elements, cache, isRecursive) {
2177	const results = await Promise.all(elements.filter(Boolean).map(async ({ widgetType, elType, elements: childElements, settings }) => {
2178	const ids = [];
2179	if (isComponentInstance({
2180	widgetType,
2181	elType
2182	})) {
2183	const componentId = settings?.component_instance?.value?.component_id.value;
2184	if (!componentId) return ids;
2185	ids.push(componentId);
2186	if (!cache.has(componentId)) cache.set(componentId, getComponentDocumentData(componentId));
2187	if (isRecursive) childElements = (await cache.get(componentId))?.elements;
2188	}
2189	if (childElements?.length) {
2190	const childIds = await getComponentIds(childElements, cache, isRecursive);
2191	ids.push(...childIds);
2192	}
2193	return ids;
2194	}));
2195	return [...new Set(results.flat())];
2196	}
2197	async function getDocumentsMap(ids, cache) {
2198	const documents = await Promise.all(ids.map(async (id) => {
2199	const document = await cache.get(id);
2200	if (!document) return null;
2201	return [id, document];
2202	}));
2203	return new Map(documents.filter((document) => document !== null));
2204	}
2205
2206	//#endregion
2207	//#region packages/packages/core/editor-components/src/store/actions/load-components-overridable-props.ts
2208	async function loadComponentsOverridableProps(componentIds, { force = false } = {}) {
2209	const idsToLoad = force ? componentIds : componentIds.filter((id) => !selectIsOverridablePropsLoaded((0, _elementor_store.__getState)(), id));
2210	if (!idsToLoad.length) return;
2211	const { data } = await apiClient.getOverridableProps(idsToLoad);
2212	(0, _elementor_store.__dispatch)(slice.actions.loadOverridableProps(data));
2213	}
2214
2215	//#endregion
2216	//#region packages/packages/core/editor-components/src/store/actions/load-components-assets.ts
2217	async function loadComponentsAssets(elements) {
2218	if (!elements.length) return;
2219	const documents = await getComponentDocuments({
2220	elements,
2221	isRecursive: false
2222	});
2223	updateDocumentState(documents);
2224	documents.forEach((document, id) => {
2225	_elementor_editor_embedded_documents_manager.embeddedDocumentsManager.setDocument(id, document);
2226	});
2227	await loadComponentsOverridableProps([...documents.keys()]);
2228	}
2229	function updateDocumentState(documents) {
2230	if ([...documents.values()].some(_elementor_editor_documents.isDocumentDirty)) (0, _elementor_editor_documents.setDocumentModifiedStatus)(true);
2231	}
2232
2233	//#endregion
2234	//#region packages/packages/core/editor-components/src/components/load-template-components.tsx
2235	var LoadTemplateComponents = () => {
2236	if ((0, _elementor_editor_templates.isHandlingTemplateStyles)()) return /* @__PURE__ */ react.createElement(LoadTemplateComponentsInternal, null);
2237	return null;
2238	};
2239	function LoadTemplateComponentsInternal() {
2240	const templates = (0, _elementor_editor_templates.useLoadedTemplates)();
2241	(0, react.useEffect)(() => {
2242	loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
2243	}, [templates]);
2244	return null;
2245	}
2246
2247	//#endregion
2248	//#region packages/packages/core/editor-components/src/utils/format-component-elements-id.ts
2249	var ELEMENT_ID_LENGTH$1 = 7;
2250	function formatComponentElementsId(elements, path) {
2251	return elements.map((element) => {
2252	const nestingPath = [...path, element.id];
2253	const id = (0, _elementor_utils.hashString)(nestingPath.join("_"), ELEMENT_ID_LENGTH$1);
2254	return {
2255	...element,
2256	id,
2257	originId: element.id,
2258	elements: element.elements ? formatComponentElementsId(element.elements, nestingPath) : void 0
2259	};
2260	});
2261	}
2262
2263	//#endregion
2264	//#region packages/packages/core/editor-components/src/utils/reconcile-component-instance-elements.ts
2265	var ELEMENT_ID_LENGTH = 7;
2266	function overridesRecordToMapping(overrides) {
2267	const mapping = {};
2268	for (const [key, value] of Object.entries(overrides)) mapping[key] = { value };
2269	return mapping;
2270	}
2271	function getElementConfig(element) {
2272	const type = element.elType === "widget" ? element.widgetType : element.elType;
2273	if (!type) return;
2274	return (0, _elementor_editor_elements.getWidgetsCache)()?.[type];
2275	}
2276	function deriveIds(element, seed) {
2277	const id = (0, _elementor_utils.hashString)(seed, ELEMENT_ID_LENGTH);
2278	return {
2279	...element,
2280	id,
2281	elements: (element.elements ?? []).map((child, index) => deriveIds(child, `${id}_${index}`))
2282	};
2283	}
2284	function reconcileElementTree(element, overridesMapping) {
2285	const elementConfig = getElementConfig(element);
2286	const effectiveSettings = unwrapOverridableSettings(applyOverridesToSettings(element.settings ?? {}, overridesMapping));
2287	const originalChildren = element.elements ?? [];
2288	const originalChildIds = new Set(originalChildren.map((child) => child.id));
2289	const attributes = {
2290	elements: [...originalChildren],
2291	settings: effectiveSettings
2292	};
2293	if (elementConfig?.children_dependencies?.length) (0, _elementor_editor_elements.reconcileInitialChildren)({
2294	elementId: element.id,
2295	elementConfig,
2296	attributes
2297	});
2298	const reconciledChildren = (attributes.elements ?? []).map((child) => originalChildIds.has(child.id) ? child : deriveIds(child, `${element.id}_${child.elType}`)).map((child) => reconcileElementTree(child, overridesMapping));
2299	return {
2300	...element,
2301	elements: reconciledChildren
2302	};
2303	}
2304	function reconcileComponentInstanceElements(elements, overrides = {}) {
2305	const overridesMapping = overridesRecordToMapping(overrides);
2306	return elements.map((element) => reconcileElementTree(element, overridesMapping));
2307	}
2308
2309	//#endregion
2310	//#region packages/packages/core/editor-components/src/utils/switch-to-component.ts
2311	async function switchToComponent(componentId, componentInstanceId, element) {
2312	const selector = getSelector(element, componentInstanceId);
2313	(0, _elementor_editor_documents.invalidateDocumentData)(componentId);
2314	await (0, _elementor_editor_documents.switchToDocument)(componentId, {
2315	selector,
2316	mode: "autosave",
2317	setAsInitial: false,
2318	shouldScroll: false
2319	});
2320	await loadComponentsOverridableProps([componentId], { force: true });
2321	const topLevelElement = (0, _elementor_editor_elements.getCurrentDocumentContainer)()?.children?.[0];
2322	if (topLevelElement) {
2323	(0, _elementor_editor_elements.selectElement)(topLevelElement.id);
2324	expandNavigator();
2325	}
2326	}
2327	async function expandNavigator() {
2328	await (0, _elementor_editor_v1_adapters.__privateRunCommand)("navigator/expand-all");
2329	}
2330	function getSelector(element, componentInstanceId) {
2331	if (element) return buildUniqueSelector(element);
2332	if (componentInstanceId) return `[data-id="${componentInstanceId}"]`;
2333	}
2334	function buildUniqueSelector(element) {
2335	const selectors = [];
2336	let current = element.closest("[data-id]");
2337	while (current) {
2338	const dataId = current.dataset.id;
2339	if (current.hasAttribute("data-elementor-id")) selectors.unshift(`[data-id="${dataId}"]`);
2340	current = current.parentElement?.closest("[data-id]") ?? null;
2341	}
2342	if (selectors.length === 0) {
2343	const closestElement = element.closest("[data-id]");
2344	if (closestElement?.dataset?.id) return `[data-id="${closestElement.dataset.id}"]`;
2345	}
2346	return selectors.join(" ");
2347	}
2348
2349	//#endregion
2350	//#region packages/packages/core/editor-components/src/create-component-type.ts
2351	var __defProp = Object.defineProperty;
2352	var __typeError = (msg) => {
2353	throw TypeError(msg);
2354	};
2355	var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
2356	enumerable: true,
2357	configurable: true,
2358	writable: true,
2359	value
2360	}) : obj[key] = value;
2361	var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
2362	var __accessCheck = (obj, member, msg) => member.has(obj) \|\| __typeError("Cannot " + msg);
2363	var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
2364	var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
2365	var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
2366	var COMPONENT_WIDGET_TYPE = "e-component";
2367	var EDIT_COMPONENT_DB_CLICK_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-canvas-double-click/";
2368	var EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-edit-context-menu/";
2369	var UPDATE_PLUGINS_URL = "/wp-admin/plugins.php";
2370	var COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID = "component-edit-upgrade";
2371	var COMPONENT_EDIT_UPDATE_NOTIFICATION_ID = "component-edit-update";
2372	var COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION = 2e3;
2373	function notifyComponentEditUpgrade() {
2374	(0, _elementor_editor_notifications.notify)({
2375	type: "promotion",
2376	id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
2377	message: (0, _wordpress_i18n.__)("Editing components requires an active Pro subscription.", "elementor"),
2378	autoHideDuration: COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION,
2379	additionalActionProps: [{
2380	size: "small",
2381	variant: "contained",
2382	color: "promotion",
2383	href: EDIT_COMPONENT_DB_CLICK_UPGRADE_URL,
2384	target: "_blank",
2385	children: (0, _wordpress_i18n.__)("Upgrade Now", "elementor")
2386	}]
2387	});
2388	}
2389	function notifyComponentEditUpdate() {
2390	(0, _elementor_editor_notifications.notify)({
2391	type: "info",
2392	id: COMPONENT_EDIT_UPDATE_NOTIFICATION_ID,
2393	message: (0, _wordpress_i18n.__)("To edit components, update Elementor Pro to the latest version.", "elementor"),
2394	additionalActionProps: [{
2395	size: "small",
2396	variant: "contained",
2397	color: "info",
2398	href: UPDATE_PLUGINS_URL,
2399	target: "_blank",
2400	children: (0, _wordpress_i18n.__)("Update Now", "elementor")
2401	}]
2402	});
2403	}
2404	var updateGroups = (groups, config) => {
2405	const disableMap = new Map(Object.entries(config.disable ?? {}));
2406	const addMap = new Map(Object.entries(config.add ?? {}));
2407	return groups.map((group) => {
2408	const disabledActions = disableMap.get(group.name) ?? [];
2409	const addConfig = addMap.get(group.name);
2410	const updatedActions = group.actions.map((action) => disabledActions.includes(action.name) ? {
2411	...action,
2412	isEnabled: () => false
2413	} : action);
2414	if (addConfig) updatedActions.splice(addConfig.index, 0, ...addConfig.actions);
2415	return {
2416	...group,
2417	actions: updatedActions
2418	};
2419	});
2420	};
2421	function createComponentType(options) {
2422	const WidgetType = window.elementor.modules.elements.types.Widget;
2423	const view = createComponentView({ ...options });
2424	return class extends WidgetType {
2425	getType() {
2426	return options.type;
2427	}
2428	getView() {
2429	return view;
2430	}
2431	getModel() {
2432	return createComponentModel();
2433	}
2434	};
2435	}
2436	function createComponentView(options) {
2437	var _componentRenderContext;
2438	var _a;
2439	const legacyWindow = window;
2440	return _a = class extends (0, _elementor_editor_canvas.createTemplatedElementView)(options) {
2441	constructor() {
2442	super(...arguments);
2443	__publicField(this, "eventsManagerConfig", legacyWindow.elementorCommon.eventsManager.config);
2444	__privateAdd(this, _componentRenderContext);
2445	}
2446	isComponentCurrentlyEdited() {
2447	return (0, _elementor_editor_documents.getCurrentDocument)()?.id === this.getComponentId();
2448	}
2449	getRenderContext() {
2450	const namespaceKey = this.getNamespaceKey();
2451	const parentContext = this._parent?.getRenderContext?.();
2452	const parentComponentContext = parentContext?.[namespaceKey];
2453	if (!__privateGet(this, _componentRenderContext)) return parentContext;
2454	const ownOverrides = __privateGet(this, _componentRenderContext).overrides ?? {};
2455	const parentOverrides = parentComponentContext?.overrides ?? {};
2456	return {
2457	...parentContext,
2458	[namespaceKey]: { overrides: {
2459	...parentOverrides,
2460	...ownOverrides
2461	} }
2462	};
2463	}
2464	getResolverRenderContext() {
2465	const namespaceKey = this.getNamespaceKey();
2466	const ownContext = this.getRenderContext()?.[namespaceKey];
2467	if (!ownContext) return this._parent?.getResolverRenderContext?.();
2468	return {
2469	...this._parent?.getResolverRenderContext?.(),
2470	...ownContext
2471	};
2472	}
2473	afterSettingsResolve(settings) {
2474	const componentInstance = settings.component_instance;
2475	if (componentInstance) {
2476	__privateSet(this, _componentRenderContext, { overrides: componentInstance.overrides ?? {} });
2477	const instanceId = this.model.get("id");
2478	const formattedElements = formatComponentElementsId(reconcileComponentInstanceElements(componentInstance.elements ?? [], componentInstance.overrides ?? {}), [instanceId]);
2479	this.collection = legacyWindow.elementor.createBackboneElementsCollection(formattedElements);
2480	this.collection.models.forEach(setInactiveRecursively);
2481	settings.component_instance = "<template data-children-placeholder></template>";
2482	}
2483	return settings;
2484	}
2485	getDomElement() {
2486	return this.children.findByIndex(0)?.getDomElement() ?? this.$el;
2487	}
2488	attachBuffer(collectionView, buffer) {
2489	const childrenPlaceholder = collectionView.$el.find("[data-children-placeholder]").get(0);
2490	if (!childrenPlaceholder) {
2491	super.attachBuffer(collectionView, buffer);
2492	return;
2493	}
2494	childrenPlaceholder.replaceWith(buffer);
2495	}
2496	getComponentId() {
2497	return (this.options?.model?.get("settings")?.get("component_instance")?.value).component_id.value;
2498	}
2499	getContextMenuGroups() {
2500	const filteredGroups = super.getContextMenuGroups().filter((group) => group.name !== "save");
2501	if (!this.getComponentId()) return filteredGroups;
2502	return updateGroups(filteredGroups, this._getContextMenuConfig());
2503	}
2504	_getContextMenuConfig() {
2505	const isAdministrator = isUserAdministrator();
2506	const hasPro = (0, _elementor_utils.hasProInstalled)();
2507	const isOutdated = isProOutdatedForComponents();
2508	const editComponentAction = {
2509	name: "edit component",
2510	icon: "eicon-edit",
2511	title: () => (0, _wordpress_i18n.__)("Edit Component", "elementor"),
2512	...!hasPro && !isOutdated && {
2513	shortcut: `<a href="${EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL}" target="_blank" onclick="event.stopPropagation()" class="elementor-context-menu-list__item__shortcut__promotion-badge"><i class="eicon-upgrade-crown"></i></a>`,
2514	hasShortcutAction: true
2515	},
2516	isEnabled: () => isProComponentsSupported() \|\| isOutdated,
2517	callback: (_, eventData) => this.editComponent(eventData)
2518	};
2519	const detachInstanceAction = {
2520	name: "detach instance",
2521	icon: "eicon-chain-broken",
2522	title: () => (0, _wordpress_i18n.__)("Detach from Component", "elementor"),
2523	isEnabled: () => true,
2524	callback: (_, eventData) => this.detachInstance(eventData)
2525	};
2526	return {
2527	add: { general: {
2528	index: 1,
2529	actions: isAdministrator ? [editComponentAction, detachInstanceAction] : [detachInstanceAction]
2530	} },
2531	disable: { clipboard: ["pasteStyle", "resetStyle"] }
2532	};
2533	}
2534	async switchDocument() {
2535	const { isAllowedToSwitchDocument, lockedBy } = await apiClient.getComponentLockStatus(this.getComponentId());
2536	if (!isAllowedToSwitchDocument) options.showLockedByModal?.(lockedBy \|\| "");
2537	else switchToComponent(this.getComponentId(), this.model.get("id"), this.el);
2538	}
2539	editComponent({ trigger, location, secondaryLocation }) {
2540	if (isProOutdatedForComponents()) {
2541	notifyComponentEditUpdate();
2542	return;
2543	}
2544	if (!isProComponentsSupported() \|\| this.isComponentCurrentlyEdited()) return;
2545	this.switchDocument();
2546	const editorSettings = this.model.get("editor_settings");
2547	trackComponentEvent({
2548	action: "edited",
2549	executedBy: "user",
2550	component_uid: editorSettings?.component_uid,
2551	component_name: editorSettings?.title,
2552	location,
2553	secondary_location: secondaryLocation,
2554	trigger
2555	});
2556	}
2557	detachInstance({ trigger, location, secondaryLocation }) {
2558	const componentId = this.getComponentId();
2559	const instanceId = this.model.get("id");
2560	if (!componentId \|\| !instanceId) return;
2561	const handleConfirm = async () => {
2562	try {
2563	await detachComponentInstance({
2564	instanceId,
2565	componentId,
2566	trackingInfo: {
2567	location,
2568	secondaryLocation,
2569	trigger
2570	}
2571	});
2572	} catch {
2573	(0, _elementor_editor_notifications.notify)({
2574	type: "error",
2575	message: (0, _wordpress_i18n.__)("Failed to detach component instance.", "elementor"),
2576	id: "detach-component-instance-failed"
2577	});
2578	}
2579	};
2580	options.showDetachConfirmDialog?.(handleConfirm);
2581	}
2582	handleDblClick(e) {
2583	e.stopPropagation();
2584	if (!isUserAdministrator()) return;
2585	if (isProOutdatedForComponents()) {
2586	notifyComponentEditUpdate();
2587	return;
2588	}
2589	if (!(0, _elementor_utils.hasProInstalled)()) {
2590	notifyComponentEditUpgrade();
2591	return;
2592	}
2593	const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
2594	this.editComponent({
2595	trigger: triggers.doubleClick,
2596	location: locations.canvas,
2597	secondaryLocation: secondaryLocations.canvasElement
2598	});
2599	}
2600	events() {
2601	return {
2602	...super.events(),
2603	dblclick: this.handleDblClick
2604	};
2605	}
2606	attributes() {
2607	return {
2608	...super.attributes(),
2609	"data-elementor-id": this.getComponentId()
2610	};
2611	}
2612	}, _componentRenderContext = /* @__PURE__ */ new WeakMap(), _a;
2613	}
2614	function setInactiveRecursively(model) {
2615	const editSettings = model.get("editSettings");
2616	if (editSettings) editSettings.set("inactive", true);
2617	const elements = model.get("elements");
2618	if (elements) elements.forEach((childModel) => {
2619	setInactiveRecursively(childModel);
2620	});
2621	}
2622	function isUserAdministrator() {
2623	return window.elementor.config?.user?.is_administrator ?? false;
2624	}
2625	function createComponentModel() {
2626	const WidgetType = window.elementor.modules.elements.types.Widget;
2627	const BaseWidgetModel = new WidgetType().getModel();
2628	return BaseWidgetModel.extend({
2629	initialize(attributes, options) {
2630	BaseWidgetModel.prototype.initialize.call(this, attributes, options);
2631	const componentInstance = this.get("settings")?.get("component_instance");
2632	if (componentInstance?.value) {
2633	const componentId = componentInstance.value.component_id?.value;
2634	if (componentId && typeof componentId === "number") this.set("componentId", componentId);
2635	}
2636	this.set("isGlobal", true);
2637	},
2638	getTitle() {
2639	const editorSettings = this.get("editor_settings");
2640	const instanceTitle = editorSettings?.title;
2641	if (instanceTitle) return instanceTitle;
2642	const componentUid = editorSettings?.component_uid;
2643	if (componentUid) {
2644	const component = selectComponentByUid((0, _elementor_store.__getState)(), componentUid);
2645	if (component?.name) return component.name;
2646	}
2647	return window.elementor.getElementData(this).title;
2648	},
2649	getComponentId() {
2650	return this.get("componentId") \|\| null;
2651	},
2652	getComponentName() {
2653	return this.getTitle();
2654	},
2655	getComponentUid() {
2656	return this.get("editor_settings")?.component_uid \|\| null;
2657	}
2658	});
2659	}
2660
2661	//#endregion
2662	//#region packages/packages/core/editor-components/src/populate-store.ts
2663	function PopulateStore() {
2664	(0, react.useEffect)(() => {
2665	(0, _elementor_store.__dispatch)(loadComponents());
2666	}, []);
2667	return null;
2668	}
2669
2670	//#endregion
2671	//#region packages/packages/core/editor-components/src/prevent-circular-nesting.ts
2672	var COMPONENT_TYPE = "e-component";
2673	var COMPONENT_CIRCULAR_NESTING_ALERT = {
2674	type: "default",
2675	message: (0, _wordpress_i18n.__)("Can't add this component - components that contain each other can't be nested.", "elementor"),
2676	id: "circular-component-nesting-blocked"
2677	};
2678	function initCircularNestingPrevention() {
2679	(0, _elementor_editor_v1_adapters.blockCommand)({
2680	command: "document/elements/create",
2681	condition: blockCircularCreate
2682	});
2683	(0, _elementor_editor_v1_adapters.blockCommand)({
2684	command: "document/elements/move",
2685	condition: blockCircularMove
2686	});
2687	(0, _elementor_editor_v1_adapters.blockCommand)({
2688	command: "document/elements/paste",
2689	condition: blockCircularPaste
2690	});
2691	}
2692	function wouldCreateCircularNesting(componentIdToAdd) {
2693	if (componentIdToAdd === void 0) return false;
2694	const state = (0, _elementor_store.__getState)();
2695	const currentComponentId = selectCurrentComponentId(state);
2696	const path = selectPath(state);
2697	if (currentComponentId === null) return false;
2698	if (componentIdToAdd === currentComponentId) return true;
2699	return path.some((item) => item.componentId === componentIdToAdd);
2700	}
2701	function extractComponentIdFromModel(model) {
2702	if (!model) return null;
2703	if (!(model.widgetType === COMPONENT_TYPE)) return null;
2704	return model.settings?.component_instance?.value?.component_id?.value ?? null;
2705	}
2706	function extractComponentIdFromElement(element) {
2707	if (element.widgetType !== COMPONENT_TYPE) return null;
2708	return element.settings?.component_instance?.value?.component_id?.value ?? null;
2709	}
2710	function extractComponentIdsFromElements(elements) {
2711	const ids = [];
2712	for (const element of elements) {
2713	const componentId = extractComponentIdFromElement(element);
2714	if (componentId !== null) ids.push(componentId);
2715	if (element.elements?.length) ids.push(...extractComponentIdsFromElements(element.elements));
2716	}
2717	return ids;
2718	}
2719	function extractComponentIdFromContainer(container) {
2720	if (container.model?.get?.("widgetType") !== COMPONENT_TYPE) return null;
2721	return ((container.model?.get?.("settings"))?.get?.("component_instance"))?.value?.component_id?.value ?? null;
2722	}
2723	function blockCircularCreate(args) {
2724	const componentId = extractComponentIdFromModel(args.model);
2725	if (componentId === null) return false;
2726	const isBlocked = wouldCreateCircularNesting(componentId);
2727	if (isBlocked) (0, _elementor_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
2728	return isBlocked;
2729	}
2730	function blockCircularMove(args) {
2731	const { containers = [args.container] } = args;
2732	const hasCircularComponent = containers.some((container) => {
2733	if (!container) return false;
2734	return (0, _elementor_editor_elements.getAllDescendants)(container).some((element) => {
2735	const componentId = extractComponentIdFromContainer(element);
2736	if (componentId === null) return false;
2737	return wouldCreateCircularNesting(componentId);
2738	});
2739	});
2740	if (hasCircularComponent) (0, _elementor_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
2741	return hasCircularComponent;
2742	}
2743	function blockCircularPaste(args) {
2744	const { storageType } = args;
2745	if (storageType !== "localstorage") return false;
2746	const data = window?.elementorCommon?.storage?.get();
2747	if (!data?.clipboard?.elements) return false;
2748	const hasCircularComponent = extractComponentIdsFromElements(data.clipboard.elements).some(wouldCreateCircularNesting);
2749	if (hasCircularComponent) (0, _elementor_editor_notifications.notify)(COMPONENT_CIRCULAR_NESTING_ALERT);
2750	return hasCircularComponent;
2751	}
2752
2753	//#endregion
2754	//#region packages/packages/core/editor-components/src/store/actions/remove-component-styles.ts
2755	function removeComponentStyles(id) {
2756	apiClient.invalidateComponentConfigCache(id);
2757	}
2758
2759	//#endregion
2760	//#region packages/packages/core/editor-components/src/sync/publish-draft-components-in-page-before-save.ts
2761	var INSUFFICIENT_PERMISSIONS_ERROR_CODE = "insufficient_permissions";
2762	var PUBLISH_UPGRADE_URL = "https://go.elementor.com/go-pro-components-Instance-draft-failure/";
2763	var PUBLISH_UPGRADE_NOTIFICATION_ID = "component-publish-upgrade";
2764	async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
2765	if (status !== "publish") return;
2766	const draftIds = [...(await getComponentDocuments({ elements })).values()].filter(_elementor_editor_documents.isDocumentDirty).map((document) => document.id);
2767	if (draftIds.length === 0) return;
2768	try {
2769	await apiClient.updateStatuses(draftIds, "publish");
2770	} catch (error) {
2771	if (isInsufficientPermissionsError(error)) {
2772	notifyPublishUpgrade();
2773	return;
2774	}
2775	throw error;
2776	}
2777	draftIds.forEach((id) => (0, _elementor_editor_documents.invalidateDocumentData)(id));
2778	}
2779	function isInsufficientPermissionsError(error) {
2780	return error instanceof _elementor_http_client.AxiosError && error.response?.data?.code === INSUFFICIENT_PERMISSIONS_ERROR_CODE;
2781	}
2782	function notifyPublishUpgrade() {
2783	(0, _elementor_editor_notifications.notify)({
2784	type: "promotion",
2785	id: PUBLISH_UPGRADE_NOTIFICATION_ID,
2786	message: (0, _wordpress_i18n.__)("You have unpublished component on this page. You need a pro version to publish it.", "elementor"),
2787	additionalActionProps: [{
2788	size: "small",
2789	variant: "contained",
2790	color: "promotion",
2791	href: PUBLISH_UPGRADE_URL,
2792	target: "_blank",
2793	children: (0, _wordpress_i18n.__)("Upgrade Now", "elementor")
2794	}]
2795	});
2796	}
2797
2798	//#endregion
2799	//#region packages/packages/core/editor-components/src/sync/before-save.ts
2800	var beforeSave = ({ container, status }) => {
2801	return publishDraftComponentsInPageBeforeSave({
2802	elements: container?.model.get("elements").toJSON?.() ?? [],
2803	status
2804	});
2805	};
2806
2807	//#endregion
2808	//#region packages/packages/core/editor-components/src/sync/load-component-data-after-instance-added.ts
2809	function initLoadComponentDataAfterInstanceAdded() {
2810	(0, _elementor_editor_v1_adapters.registerDataHook)("after", "document/elements/paste", (_args, result) => {
2811	load(result);
2812	});
2813	(0, _elementor_editor_v1_adapters.registerDataHook)("after", "document/elements/import", (_args, result) => {
2814	load(result);
2815	});
2816	}
2817	function load(result) {
2818	if (!result) return;
2819	loadComponentsAssets((Array.isArray(result) ? result : [result]).map((container) => container.model?.toJSON()).filter((element) => !!element));
2820	}
2821
2822	//#endregion
2823	//#region packages/packages/core/editor-components/src/init.ts
2824	function init() {
2825	(0, _elementor_store.__registerSlice)(slice);
2826	(0, _elementor_editor_canvas.registerElementType)(COMPONENT_WIDGET_TYPE, (options) => createComponentType({
2827	...options,
2828	showLockedByModal: openEditModeDialog,
2829	showDetachConfirmDialog: openDetachConfirmDialog
2830	}));
2831	window.elementorCommon.__beforeSave = beforeSave;
2832	(0, _elementor_editor_elements_panel.injectTab)({
2833	id: "components",
2834	label: (0, _wordpress_i18n.__)("Components", "elementor"),
2835	component: Components,
2836	position: 1
2837	});
2838	(0, _elementor_editor.injectIntoLogic)({
2839	id: "components-populate-store",
2840	component: PopulateStore
2841	});
2842	(0, _elementor_editor_v1_adapters.registerDataHook)("after", "editor/documents/attach-preview", () => {
2843	const { id, config } = (0, _elementor_editor_documents.getV1CurrentDocument)() ?? {};
2844	if (!id) return;
2845	removeComponentStyles(id);
2846	loadComponentsAssets(config?.elements ?? []);
2847	});
2848	_elementor_editor_embedded_documents_manager.embeddedDocumentsManager.onDocumentLoad((_documentId, data) => {
2849	loadComponentsAssets(data.elements ?? []);
2850	});
2851	(0, _elementor_editor.injectIntoLogic)({
2852	id: "templates",
2853	component: LoadTemplateComponents
2854	});
2855	(0, _elementor_editor_editing_panel.registerEditingPanelReplacement)({
2856	id: "component-instance-edit-panel",
2857	condition: (_, elementType) => elementType.key === "e-component",
2858	component: InstanceEditingPanel
2859	});
2860	_elementor_editor_canvas.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
2861	_elementor_editor_canvas.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
2862	_elementor_editor_canvas.settingsTransformersRegistry.register("override", componentOverrideTransformer);
2863	initCircularNestingPrevention();
2864	initLoadComponentDataAfterInstanceAdded();
2865	}
2866
2867	//#endregion
2868	//#region packages/packages/core/editor-components/src/index.ts
2869	var src_exports = /* @__PURE__ */ __exportAll({
2870	COMPONENT_WIDGET_TYPE: () => COMPONENT_WIDGET_TYPE,
2871	ComponentInstanceProvider: () => ComponentInstanceProvider,
2872	ComponentItem: () => ComponentItem,
2873	ComponentName: () => ComponentName,
2874	ComponentSearch: () => ComponentSearch,
2875	ComponentsList: () => ComponentsList,
2876	DetachAction: () => DetachAction,
2877	EditComponentAction: () => EditComponentAction,
2878	EmptySearchResult: () => EmptySearchResult,
2879	InstanceEmptyState: () => EmptyState,
2880	InstancePanelBody: () => InstancePanelBody,
2881	InstancePanelHeader: () => InstancePanelHeader,
2882	LoadingComponents: () => LoadingComponents,
2883	OverridablePropProvider: () => OverridablePropProvider,
2884	SLICE_NAME: () => SLICE_NAME,
2885	SearchProvider: () => SearchProvider,
2886	apiClient: () => apiClient,
2887	componentInstanceOverridePropTypeUtil: () => componentInstanceOverridePropTypeUtil,
2888	componentInstanceOverridesPropTypeUtil: () => componentInstanceOverridesPropTypeUtil,
2889	componentInstancePropTypeUtil: () => componentInstancePropTypeUtil,
2890	componentOverridablePropTypeUtil: () => componentOverridablePropTypeUtil,
2891	componentsActions: () => componentsActions,
2892	componentsSelectors: () => componentsSelectors,
2893	createComponentsAction: () => createComponentsAction,
2894	filterValidOverridableProps: () => filterValidOverridableProps,
2895	getComponentDocumentData: () => getComponentDocumentData,
2896	getContainerByOriginId: () => getContainerByOriginId,
2897	getOverridableProp: () => getOverridableProp,
2898	getPropTypeForComponentOverride: () => getPropTypeForComponentOverride,
2899	init: () => init,
2900	isComponentInstance: () => isComponentInstance,
2901	loadComponentsAssets: () => loadComponentsAssets,
2902	onElementDrop: () => onElementDrop,
2903	publishDraftComponentsInPageBeforeSave: () => publishDraftComponentsInPageBeforeSave,
2904	registerComponentsReducer: () => registerComponentsReducer,
2905	resolveOverridePropValue: () => resolveOverridePropValue,
2906	selectComponentByUid: () => selectComponentByUid,
2907	selectCreatedThisSession: () => selectCreatedThisSession,
2908	selectOverridableProps: () => selectOverridableProps,
2909	selectPath: () => selectPath,
2910	slice: () => slice,
2911	switchToComponent: () => switchToComponent,
2912	trackComponentEvent: () => trackComponentEvent,
2913	updateOverridableProp: () => updateOverridableProp,
2914	useComponentInstanceElement: () => useComponentInstanceElement,
2915	useComponents: () => useComponents,
2916	useComponentsPermissions: () => useComponentsPermissions,
2917	useCurrentComponent: () => useCurrentComponent,
2918	useCurrentComponentId: () => useCurrentComponentId,
2919	useFilteredComponents: () => useFilteredComponents,
2920	useInstancePanelData: () => useInstancePanelData,
2921	useIsSanitizedComponent: () => useIsSanitizedComponent,
2922	useOverridablePropValue: () => useOverridablePropValue,
2923	useOverridableProps: () => useOverridableProps,
2924	useSanitizeOverridableProps: () => useSanitizeOverridableProps
2925	});
2926
2927	//#endregion
2928	//#region \0elementor-package-library-entry
2929	(window.elementorV2 = window.elementorV2 \|\| {}).editorComponents = src_exports;
2930
2931	//#endregion
2932	})(elementorV2.editor, elementorV2.editorCanvas, elementorV2.editorDocuments, elementorV2.editorEditingPanel, elementorV2.editorElementsPanel, elementorV2.editorEmbeddedDocumentsManager, elementorV2.editorV1Adapters, elementorV2.store, wp.i18n, elementorV2.httpClient, React, elementorV2.editorUi, elementorV2.ui, elementorV2.utils, elementorV2.icons, elementorV2.editorCurrentUser, elementorV2.editorNotifications, elementorV2.editorElements, elementorV2.editorProps, elementorV2.schema, elementorV2.events, elementorV2.editorPanels, elementorV2.editorControls, elementorV2.editorTemplates);
2933	window.elementorV2.editorComponents?.init?.();
2934	//# sourceMappingURL=editor-components.js.map