PluginProbe
Elementor Website Builder – more than just a page builder / 4.1.3
Elementor Website Builder – more than just a page builder v4.1.3
4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 All 455 releases
← All changes | assets/js/packages/editor-global-classes/editor-global-classes.js +4 -3544 4.3.0 → 4.1.3 View file →
@@ -1,3547 +1,7 @@
1 -(function(react, _elementor_editor_current_user, _elementor_editor_documents, _elementor_editor_panels, _elementor_editor_ui, _elementor_query, _elementor_store, _elementor_ui, _wordpress_i18n, _elementor_editor_styles, _elementor_utils, _elementor_http_client, _elementor_icons, _elementor_events, react_dom, _elementor_editor_styles_repository, _elementor_editor, _elementor_editor_editing_panel, _elementor_editor_embedded_documents_manager, _elementor_editor_mcp, _elementor_editor_canvas, _elementor_editor_v1_adapters, _elementor_schema) {
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 -let react$1 = __toESM(react, 1);
48 -react = __toESM(react);
49 -
50 -//#region packages/packages/core/editor-global-classes/src/errors.ts
51 - var GlobalClassNotFoundError = (0, _elementor_utils.createError)({
52 - code: "global_class_not_found",
53 - message: "Global class not found."
54 - });
55 - var GlobalClassLabelAlreadyExistsError = (0, _elementor_utils.createError)({
56 - code: "global_class_label_already_exists",
57 - message: "Class with this name already exists."
58 - });
59 - var GlobalClassTrackingError = (0, _elementor_utils.createError)({
60 - code: "global_class_tracking_error",
61 - message: "Error tracking global classes event."
62 - });
63 -
64 -//#endregion
65 -//#region packages/packages/core/editor-global-classes/src/utils/snapshot-history.ts
66 - var __defProp = Object.defineProperty;
67 - var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
68 - enumerable: true,
69 - configurable: true,
70 - writable: true,
71 - value
72 - }) : obj[key] = value;
73 - var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
74 - function createLink({ value, next, prev }) {
75 - return {
76 - value,
77 - prev: prev || null,
78 - next: next || null
79 - };
80 - }
81 - var _SnapshotHistory = class _SnapshotHistory {
82 - constructor(namespace) {
83 - __publicField(this, "namespace", namespace);
84 - __publicField(this, "first", null);
85 - __publicField(this, "current", null);
86 - }
87 - static get(namespace) {
88 - if (!_SnapshotHistory.registry[namespace]) _SnapshotHistory.registry[namespace] = new _SnapshotHistory(namespace);
89 - return _SnapshotHistory.registry[namespace];
90 - }
91 - transform(item) {
92 - return JSON.parse(JSON.stringify(item));
93 - }
94 - reset() {
95 - this.first = this.current = null;
96 - }
97 - prev() {
98 - if (!this.current || this.current === this.first) return null;
99 - this.current = this.current.prev;
100 - return this.current?.value || null;
101 - }
102 - isLast() {
103 - return !this.current || !this.current.next;
104 - }
105 - next(value) {
106 - if (value) {
107 - if (!this.current) {
108 - this.first = createLink({ value: this.transform(value) });
109 - this.current = this.first;
110 - return this.current.value;
111 - }
112 - const nextLink = createLink({
113 - value: this.transform(value),
114 - prev: this.current
115 - });
116 - this.current.next = nextLink;
117 - this.current = nextLink;
118 - return this.current.value;
119 - }
120 - if (!this.current || !this.current.next) return null;
121 - this.current = this.current.next;
122 - return this.current.value;
123 - }
124 - };
125 - __publicField(_SnapshotHistory, "registry", {});
126 - var SnapshotHistory = _SnapshotHistory;
127 -
128 -//#endregion
129 -//#region packages/packages/core/editor-global-classes/src/store.ts
130 - var localHistory = SnapshotHistory.get("global-classes");
131 - var initialState = {
132 - data: {
133 - items: {},
134 - order: []
135 - },
136 - classLabels: {},
137 - initialData: {
138 - frontend: {
139 - items: {},
140 - order: []
141 - },
142 - preview: {
143 - items: {},
144 - order: []
145 - }
146 - },
147 - isDirty: false
148 - };
149 - var SLICE_NAME = "globalClasses";
150 - var slice = (0, _elementor_store.__createSlice)({
151 - name: SLICE_NAME,
152 - initialState,
153 - reducers: {
154 - load(state, { payload: { frontend, preview, classLabels } }) {
155 - state.initialData.frontend = frontend;
156 - state.initialData.preview = preview;
157 - state.data = preview;
158 - state.classLabels = classLabels;
159 - state.isDirty = false;
160 - },
161 - add(state, { payload }) {
162 - localHistory.next(state.data);
163 - state.data.items[payload.id] = payload;
164 - state.data.order.unshift(payload.id);
165 - state.classLabels[payload.id] = payload.label;
166 - state.isDirty = true;
167 - },
168 - delete(state, { payload }) {
169 - localHistory.next(state.data);
170 - state.data.items = Object.fromEntries(Object.entries(state.data.items).filter(([id]) => id !== payload));
171 - state.data.order = state.data.order.filter((id) => id !== payload);
172 - delete state.classLabels[payload];
173 - state.isDirty = true;
174 - },
175 - setOrder(state, { payload }) {
176 - localHistory.next(state.data);
177 - state.data.order = payload;
178 - state.isDirty = true;
179 - },
180 - update(state, { payload }) {
181 - const oldLabel = state.classLabels[payload.style.id];
182 - localHistory.next(state.data);
183 - const mergedData = {
184 - ...state.data.items[payload.style.id],
185 - ...payload.style
186 - };
187 - if (oldLabel && payload.style.label && payload.style.label !== oldLabel) state.classLabels[payload.style.id] = payload.style.label;
188 - state.data.items[payload.style.id] = mergedData;
189 - state.isDirty = true;
190 - },
191 - updateMultiple(state, { payload }) {
192 - localHistory.next(state.data);
193 - Object.entries(payload).forEach(([id, { modified }]) => {
194 - state.data.items[id].label = modified;
195 - state.classLabels[id] = modified;
196 - });
197 - state.isDirty = false;
198 - },
199 - updateProps(state, { payload }) {
200 - const style = state.data.items[payload.id];
201 - if (!style) throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
202 - localHistory.next(state.data);
203 - const variant = (0, _elementor_editor_styles.getVariantByMeta)(style, payload.meta);
204 - let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
205 - customCss = customCss?.raw ? customCss : null;
206 - if (variant) {
207 - const payloadProps = JSON.parse(JSON.stringify(payload.props));
208 - if ((payload.mode ?? "merge") === "replace") variant.props = payloadProps;
209 - else {
210 - const variantProps = JSON.parse(JSON.stringify(variant.props));
211 - variant.props = mergeProps(variantProps, payloadProps);
212 - }
213 - variant.custom_css = customCss;
214 - style.variants = getNonEmptyVariants(style);
215 - } else style.variants.push({
216 - meta: payload.meta,
217 - props: payload.props,
218 - custom_css: customCss
219 - });
220 - state.isDirty = true;
221 - },
222 - reset(state, { payload: { context } }) {
223 - if (context === "frontend") {
224 - localHistory.reset();
225 - state.initialData.frontend = state.data;
226 - state.isDirty = false;
227 - }
228 - state.initialData.preview = state.data;
229 - },
230 - undo(state) {
231 - if (localHistory.isLast()) localHistory.next(state.data);
232 - const data = localHistory.prev();
233 - if (data) {
234 - state.data = data;
235 - state.isDirty = true;
236 - } else state.data = state.initialData.preview;
237 - },
238 - resetToInitialState(state, { payload: { context } }) {
239 - localHistory.reset();
240 - state.data = state.initialData[context];
241 - state.isDirty = false;
242 - },
243 - redo(state) {
244 - const data = localHistory.next();
245 - if (localHistory.isLast()) localHistory.prev();
246 - if (data) {
247 - state.data = data;
248 - state.isDirty = true;
249 - }
250 - },
251 - mergeExistingClasses(state, { payload: { preview, frontend } }) {
252 - Object.entries(preview).forEach(([id, previewClassData]) => {
253 - const frontendClassData = frontend[id];
254 - if (previewClassData === null || previewClassData === void 0) return;
255 - if (!(id in state.data.items)) state.data.items[id] = previewClassData;
256 - if (frontendClassData && !(id in state.initialData.frontend.items)) state.initialData.frontend.items[id] = frontendClassData;
257 - if (!(id in state.initialData.preview.items)) state.initialData.preview.items[id] = previewClassData;
258 - if (!(id in state.classLabels)) state.classLabels[id] = previewClassData.label;
259 - });
260 - },
261 - setOrderWithoutHistory(state, { payload }) {
262 - state.data.order = payload;
263 - },
264 - updateAfterTemplateImport(state, { payload }) {
265 - state.initialData.frontend.items = {
266 - ...state.initialData.frontend.items,
267 - ...payload.addedItems
268 - };
269 - state.initialData.frontend.order = [...state.initialData.frontend.order, ...payload.addedIdsOrder];
270 - state.initialData.preview.items = {
271 - ...state.initialData.preview.items,
272 - ...payload.addedItems
273 - };
274 - state.initialData.preview.order = [...state.initialData.preview.order, ...payload.addedIdsOrder];
275 - state.data.items = {
276 - ...state.data.items,
277 - ...payload.addedItems
278 - };
279 - state.data.order = [...state.data.order, ...payload.addedIdsOrder];
280 - state.classLabels = {
281 - ...state.classLabels,
282 - ...payload.addedClassLabels
283 - };
284 - }
285 - }
286 - });
287 - var mergeProps = (current, updates) => {
288 - const props = Array.isArray(current) ? {} : current;
289 - Object.entries(updates).forEach(([key, value]) => {
290 - if (value === null || value === void 0) delete props[key];
291 - else props[key] = value;
292 - });
293 - return props;
294 - };
295 - var getNonEmptyVariants = (style) => {
296 - return style.variants.filter(({ props, custom_css: customCss }) => Object.keys(props).length || customCss?.raw);
297 - };
298 - var placeholderDefinition = (id, label) => ({
299 - id,
300 - type: "class",
301 - label,
302 - variants: []
303 - });
304 - var selectData = (state) => state[SLICE_NAME].data;
305 - var selectClassLabels = (state) => state[SLICE_NAME].classLabels;
306 - var selectFrontendInitialData = (state) => state[SLICE_NAME].initialData.frontend;
307 - var selectPreviewInitialData = (state) => state[SLICE_NAME].initialData.preview;
308 - var selectOrder = (0, _elementor_store.__createSelector)(selectData, ({ order }) => order);
309 - var selectGlobalClasses = (0, _elementor_store.__createSelector)(selectData, ({ items }) => items);
310 - var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
311 - var selectOrderedClasses = (0, _elementor_store.__createSelector)(selectData, selectClassLabels, ({ items, order }, classLabels) => order.map((id) => {
312 - const loaded = items[id];
313 - if (loaded) return loaded;
314 - const label = classLabels[id];
315 - return label !== void 0 ? placeholderDefinition(id, label) : null;
316 - }).filter((s) => s !== null));
317 - var selectClass = (state, id) => state[SLICE_NAME].data.items[id] ?? null;
318 - var selectEmptyCssClass = (0, _elementor_store.__createSelector)(selectData, ({ items }) => Object.values(items).filter((cssClass) => (cssClass.variants?.length ?? 0) === 0));
319 - var selectIsClassFetched = (state, id) => !!state[SLICE_NAME].initialData.preview.items[id] || !!state[SLICE_NAME].initialData.frontend.items[id] || false;
320 -
321 -//#endregion
322 -//#region packages/packages/core/editor-global-classes/src/hooks/use-classes-order.ts
323 - var useClassesOrder = () => {
324 - return (0, _elementor_store.__useSelector)(selectOrder);
325 - };
326 -
327 -//#endregion
328 -//#region packages/packages/core/editor-global-classes/src/hooks/use-dirty-state.ts
329 - var useDirtyState = () => {
330 - return (0, _elementor_store.__useSelector)(selectIsDirty);
331 - };
332 -
333 -//#endregion
334 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx
335 - var SearchAndFilterContext = (0, react.createContext)(void 0);
336 - var INIT_CHECKED_FILTERS = {
337 - empty: false,
338 - onThisPage: false,
339 - unused: false
340 - };
341 - var SearchAndFilterProvider = ({ children }) => {
342 - const [filters, setFilters] = (0, react.useState)(INIT_CHECKED_FILTERS);
343 - const getInitialSearchValue = () => {
344 - const storedValue = localStorage.getItem("elementor-global-classes-search");
345 - if (storedValue) {
346 - localStorage.removeItem("elementor-global-classes-search");
347 - return storedValue;
348 - }
349 - return "";
350 - };
351 - const { debouncedValue, inputValue, handleChange } = (0, _elementor_utils.useDebounceState)({
352 - delay: 300,
353 - initialValue: getInitialSearchValue()
354 - });
355 - const onClearSearch = () => {
356 - handleChange("");
357 - };
358 - const onClearFilter = () => {
359 - setFilters(INIT_CHECKED_FILTERS);
360 - };
361 - return /* @__PURE__ */ react.createElement(SearchAndFilterContext.Provider, { value: {
362 - search: {
363 - debouncedValue,
364 - inputValue,
365 - handleChange,
366 - onClearSearch
367 - },
368 - filters: {
369 - filters,
370 - setFilters,
371 - onClearFilter
372 - }
373 - } }, children);
374 - };
375 - var useSearchAndFilters = () => {
376 - const context = (0, react.useContext)(SearchAndFilterContext);
377 - if (!context) throw new Error("useSearchContext must be used within a SearchContextProvider");
378 - return context;
379 - };
380 -
381 -//#endregion
382 -//#region packages/packages/core/editor-global-classes/src/api.ts
383 - var RESOURCE_URL = "/global-classes";
384 - var BASE_URL = "elementor/v1";
385 - var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
386 - var RESOURCE_POST_URL = `${RESOURCE_URL}/post`;
387 - var RESOURCE_STYLES_URL = `${RESOURCE_URL}/styles`;
388 - function saveGlobalClasses$1(context, payload) {
389 - return (0, _elementor_http_client.httpService)().put(`${BASE_URL}${RESOURCE_URL}`, payload, { params: { context } });
390 - }
391 - __name(saveGlobalClasses$1, "saveGlobalClasses");
392 - var apiClient = {
393 - usage: () => (0, _elementor_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
394 - all: (context = "preview") => (0, _elementor_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, { params: { context } }),
395 - getStylesForPost: (postId, context = "preview") => (0, _elementor_http_client.httpService)().get(`${BASE_URL}${RESOURCE_POST_URL}`, { params: {
396 - context,
397 - post_id: postId
398 - } }),
399 - getStylesByIds: (ids, context = "preview") => (0, _elementor_http_client.httpService)().get(`${BASE_URL}${RESOURCE_STYLES_URL}`, { params: {
400 - context,
401 - ids: ids.join(",")
402 - } }),
403 - publish: (payload) => saveGlobalClasses$1("frontend", payload),
404 - saveDraft: (payload) => saveGlobalClasses$1("preview", payload)
405 - };
406 - var API_ERROR_CODES = { DUPLICATED_LABEL: "DUPLICATED_LABEL" };
407 -
408 -//#endregion
409 -//#region packages/packages/core/editor-global-classes/src/components/css-class-usage/utils.ts
410 - var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
411 - acc[key] = {
412 - content: value || [],
413 - total: value.reduce((total, val) => total + (val?.total || 0), 0)
414 - };
415 - return acc;
416 - }, {});
417 -
418 -//#endregion
419 -//#region packages/packages/core/editor-global-classes/service/css-class-usage-service.ts
420 - var fetchCssClassUsage = async () => {
421 - return transformData((await apiClient.usage())?.data?.data || {});
422 - };
423 -
424 -//#endregion
425 -//#region packages/packages/core/editor-global-classes/src/components/css-class-usage/types.ts
426 - var QUERY_KEY = "css-classes-usage";
427 -
428 -//#endregion
429 -//#region packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage.ts
430 - var useCssClassUsage = () => {
431 - return (0, _elementor_query.useQuery)({
432 - queryKey: [QUERY_KEY],
433 - queryFn: fetchCssClassUsage,
434 - refetchOnMount: false,
435 - refetchOnWindowFocus: true
436 - });
437 - };
438 -
439 -//#endregion
440 -//#region packages/packages/core/editor-global-classes/src/hooks/use-empty-css-class.ts
441 - var useEmptyCssClass = () => {
442 - return (0, _elementor_store.__useSelector)(selectEmptyCssClass);
443 - };
444 - var useAllCssClassesIDs = () => {
445 - const cssClasses = (0, _elementor_store.__useSelector)(selectGlobalClasses);
446 - return Object.keys(cssClasses);
447 - };
448 -
449 -//#endregion
450 -//#region packages/packages/core/editor-global-classes/src/hooks/use-filtered-css-class-usage.tsx
451 - var findCssClassKeysByPageID = (data, pageId) => {
452 - const result = [];
453 - for (const key in data) data[key].content.forEach((content) => {
454 - if (+content.pageId === pageId) result.push(key);
455 - });
456 - return result;
457 - };
458 - var getUnusedClasses = (usedCssClass, potentialUnused) => {
459 - const set = new Set(usedCssClass);
460 - return potentialUnused.filter((cssClass) => !set.has(cssClass));
461 - };
462 - var EMPTY_FILTERED_CSS_CLASS_RESPONSE = {
463 - empty: [],
464 - onThisPage: [],
465 - unused: []
466 - };
467 - var useFilteredCssClassUsage = () => {
468 - const document = (0, _elementor_editor_documents.__useActiveDocument)();
469 - const emptyCssClasses = useEmptyCssClass();
470 - const { data, isLoading } = useCssClassUsage();
471 - const listOfCssClasses = useAllCssClassesIDs();
472 - const emptyCssClassesIDs = (0, react.useMemo)(() => emptyCssClasses.map(({ id }) => id), [emptyCssClasses]);
473 - const onThisPage = (0, react.useMemo)(() => {
474 - if (!data || !document) return [];
475 - return findCssClassKeysByPageID(data, document.id);
476 - }, [data, document]);
477 - const unused = (0, react.useMemo)(() => {
478 - if (!data) return [];
479 - return getUnusedClasses(Object.keys(data), listOfCssClasses);
480 - }, [data, listOfCssClasses]);
481 - if (isLoading || !data || !document) return EMPTY_FILTERED_CSS_CLASS_RESPONSE;
482 - return {
483 - onThisPage,
484 - unused,
485 - empty: emptyCssClassesIDs
486 - };
487 - };
488 -
489 -//#endregion
490 -//#region packages/packages/core/editor-global-classes/src/hooks/use-filters.ts
491 - var useFilters = () => {
492 - const { filters: { filters } } = useSearchAndFilters();
493 - const allFilters = useFilteredCssClassUsage();
494 - return (0, react.useMemo)(() => {
495 - const activeEntries = Object.entries(filters).filter(([, isActive]) => isActive);
496 - if (activeEntries.length === 0) return null;
497 - return activeEntries.reduce((acc, [key], index) => {
498 - const current = allFilters[key] || [];
499 - if (index === 0) return current;
500 - return acc.filter((val) => current.includes(val));
501 - }, []);
502 - }, [filters, allFilters]);
503 - };
504 -
505 -//#endregion
506 -//#region packages/packages/core/editor-global-classes/src/utils/create-labels-for-classes.ts
507 - function createLabelsForClasses(entries) {
508 - return Object.fromEntries(entries.map((e) => [e.id, e.label]));
509 - }
510 -
511 -//#endregion
512 -//#region packages/packages/core/editor-global-classes/src/load-document-classes.ts
513 - function styleDefinitionsMapWithoutNull(map) {
514 - return Object.fromEntries(Object.entries(map).filter((entry) => entry[1] !== null));
515 - }
516 - function resetGlobalClassesState(globalOrder, classLabels) {
517 - (0, _elementor_store.__dispatch)(slice.actions.load({
518 - preview: {
519 - items: {},
520 - order: globalOrder
521 - },
522 - frontend: {
523 - items: {},
524 - order: globalOrder
525 - },
526 - classLabels
527 - }));
528 - }
529 - async function loadCurrentDocumentClasses() {
530 - const [previewIndexRes, frontendIndexRes] = await Promise.all([apiClient.all("preview"), apiClient.all("frontend")]);
531 - const previewIndex = previewIndexRes.data.data;
532 - const frontendIndex = frontendIndexRes.data.data;
533 - const classLabels = createLabelsForClasses(previewIndex);
534 - const previewOrder = previewIndex.map((e) => e.id);
535 - const frontendOrder = frontendIndex.map((e) => e.id);
536 - resetGlobalClassesState(previewOrder, classLabels);
537 - const postId = (0, _elementor_editor_documents.getCurrentDocument)()?.id;
538 - if (!postId) return;
539 - const [previewPostRes, frontendPostRes] = await Promise.all([apiClient.getStylesForPost(postId, "preview"), apiClient.getStylesForPost(postId, "frontend")]);
540 - const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
541 - const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
542 - (0, _elementor_store.__dispatch)(slice.actions.load({
543 - preview: {
544 - items: previewItems,
545 - order: previewOrder
546 - },
547 - frontend: {
548 - items: frontendItems,
549 - order: frontendOrder
550 - },
551 - classLabels
552 - }));
553 - }
554 - async function addDocumentClasses(documentId) {
555 - const [previewPostRes, frontendPostRes] = await Promise.all([apiClient.getStylesForPost(documentId, "preview"), apiClient.getStylesForPost(documentId, "frontend")]);
556 - const previewItems = styleDefinitionsMapWithoutNull(previewPostRes.data.data);
557 - const frontendItems = styleDefinitionsMapWithoutNull(frontendPostRes.data.data);
558 - (0, _elementor_store.__dispatch)(slice.actions.mergeExistingClasses({
559 - preview: previewItems,
560 - frontend: frontendItems
561 - }));
562 - }
563 -
564 -//#endregion
565 -//#region packages/packages/core/editor-global-classes/src/load-existing-classes.ts
566 - var pendingLoad = null;
567 - var pendingIds = /* @__PURE__ */ new Set();
568 - async function loadExistingClasses(classIds) {
569 - const existingClasses = selectGlobalClasses((0, _elementor_store.__getState)());
570 - const missingIds = classIds.filter((id) => !(id in existingClasses));
571 - if (missingIds.length === 0) return;
572 - missingIds.forEach((id) => pendingIds.add(id));
573 - if (pendingLoad) {
574 - await pendingLoad;
575 - return loadExistingClasses(classIds);
576 - }
577 - pendingLoad = fetchAndMergeClasses();
578 - try {
579 - await pendingLoad;
580 - } finally {
581 - pendingLoad = null;
582 - }
583 - }
584 - async function fetchAndMergeClasses() {
585 - const idsToFetch = Array.from(pendingIds);
586 - pendingIds.clear();
587 - if (idsToFetch.length === 0) return;
588 - const [previewResponse, frontendResponse] = await Promise.all([apiClient.getStylesByIds(idsToFetch, "preview"), apiClient.getStylesByIds(idsToFetch, "frontend")]);
589 - const previewItems = styleDefinitionsMapWithoutNull(previewResponse.data.data);
590 - const frontendItems = styleDefinitionsMapWithoutNull(frontendResponse.data.data);
591 - (0, _elementor_store.__dispatch)(slice.actions.mergeExistingClasses({
592 - preview: previewItems,
593 - frontend: frontendItems
594 - }));
595 - }
596 -
597 -//#endregion
598 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/duplicate-label-dialog.tsx
599 - var DUP_PREFIX = "DUP_";
600 - var DuplicateLabelDialog = ({ modifiedLabels, onApprove }) => {
601 - const handleButtonClick = () => {
602 - localStorage.setItem("elementor-global-classes-search", DUP_PREFIX);
603 - onApprove?.();
604 - (0, _elementor_editor_ui.closeDialog)();
605 - };
606 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.DialogHeader, { logo: false }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
607 - display: "flex",
608 - alignItems: "center",
609 - gap: 1
610 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Icon, { color: "secondary" }, /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "subtitle1" }, (0, _wordpress_i18n.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ react.createElement(_elementor_ui.DialogContent, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
611 - spacing: 2,
612 - direction: "column"
613 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix", "elementor"), /* @__PURE__ */ react.createElement("strong", null, " ", DUP_PREFIX)), /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
614 - width: "100%",
615 - display: "flex",
616 - gap: 2,
617 - alignItems: "flex-start"
618 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
619 - variant: "subtitle2",
620 - sx: {
621 - fontWeight: "bold",
622 - flex: 1,
623 - flexShrink: 1,
624 - flexGrow: 1,
625 - minWidth: 0
626 - }
627 - }, (0, _wordpress_i18n.__)("Before", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
628 - variant: "subtitle2",
629 - sx: {
630 - minWidth: "200px",
631 - fontWeight: "bold",
632 - flexShrink: 0,
633 - flexGrow: 0,
634 - width: "200px",
635 - maxWidth: "200px"
636 - }
637 - }, (0, _wordpress_i18n.__)("After", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, { sx: {
638 - mt: .5,
639 - mb: .5
640 - } }), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
641 - direction: "column",
642 - gap: .5,
643 - sx: { pb: 2 }
644 - }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
645 - key: index,
646 - sx: {
647 - width: "100%",
648 - display: "flex",
649 - gap: 2,
650 - alignItems: "flex-start"
651 - }
652 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
653 - flex: 1,
654 - flexShrink: 1,
655 - flexGrow: 1,
656 - minWidth: 0
657 - } }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, { title: original }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
658 - variant: "body2",
659 - sx: { color: "text.secondary" }
660 - }, original))), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
661 - minWidth: "200px",
662 - flexShrink: 0,
663 - flexGrow: 0,
664 - width: "200px",
665 - maxWidth: "200px"
666 - } }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
667 - variant: "body2",
668 - sx: { color: "text.primary" }
669 - }, modified)))))), /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
670 - severity: "info",
671 - size: "small",
672 - color: "secondary"
673 - }, /* @__PURE__ */ react.createElement("strong", null, (0, _wordpress_i18n.__)("Your designs and classes are safe.", "elementor")), (0, _wordpress_i18n.__)("Only the prefixes were added. Find them in Class Manager by searching", "elementor"), /* @__PURE__ */ react.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ react.createElement(_elementor_ui.DialogActions, null, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
674 - color: "secondary",
675 - variant: "text",
676 - onClick: handleButtonClick
677 - }, (0, _wordpress_i18n.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
678 - color: "secondary",
679 - variant: "contained",
680 - onClick: _elementor_editor_ui.closeDialog
681 - }, (0, _wordpress_i18n.__)("Done", "elementor"))));
682 - };
683 -
684 -//#endregion
685 -//#region packages/packages/core/editor-global-classes/src/utils/tracking.ts
686 - var trackGlobalClasses = async (payload) => {
687 - const { runAction } = payload;
688 - const data = await getSanitizedData(payload);
689 - if (data) {
690 - track(data);
691 - if (data.event === "classCreated" && "classId" in data) fireClassApplied(data.classId);
692 - }
693 - runAction?.();
694 - };
695 - var fireClassApplied = async (classId) => {
696 - const appliedInfo = await getAppliedInfo(classId);
697 - track({
698 - event: "classApplied",
699 - classId,
700 - ...appliedInfo,
701 - totalInstancesAfterApply: 1
702 - });
703 - };
704 - var getSanitizedData = async (payload) => {
705 - switch (payload.event) {
706 - case "classApplied":
707 - if ("classId" in payload && payload.classId) {
708 - const appliedInfo = await getAppliedInfo(payload.classId);
709 - return {
710 - ...payload,
711 - ...appliedInfo
712 - };
713 - }
714 - break;
715 - case "classRemoved":
716 - if ("classId" in payload && payload.classId) {
717 - const deleteInfo = getRemovedInfo(payload.classId);
718 - return {
719 - ...payload,
720 - ...deleteInfo
721 - };
722 - }
723 - break;
724 - case "classDeleted":
725 - if ("classId" in payload && payload.classId) {
726 - const deleteInfo = await trackDeleteClass(payload.classId);
727 - return {
728 - ...payload,
729 - ...deleteInfo
730 - };
731 - }
732 - break;
733 - case "classCreated":
734 - if ("source" in payload && payload.source !== "created") {
735 - if ("classId" in payload && payload.classId) return {
736 - ...payload,
737 - classTitle: getCssClass(payload.classId).label
738 - };
739 - }
740 - return payload;
741 - case "classStateClicked":
742 - if ("classId" in payload && payload.classId) return {
743 - ...payload,
744 - classTitle: getCssClass(payload.classId).label
745 - };
746 - break;
747 - case "classSyncToV3PopupShown": return {
748 - ...payload,
749 - interaction_type: "popup_shown",
750 - target_type: "popup",
751 - target_name: "sync_to_v3_popup",
752 - interaction_result: "popup_viewed",
753 - target_location: "widget_panel",
754 - location_l1: "class_manager"
755 - };
756 - case "classSyncToV3": {
757 - const classLabel = getCssClass(payload.classId).label;
758 - const isSync = payload.action === "sync";
759 - return {
760 - ...payload,
761 - interaction_type: "click",
762 - target_type: classLabel,
763 - target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
764 - interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
765 - target_location: "widget_panel",
766 - location_l1: "class_manager",
767 - interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
768 - };
769 - }
770 - case "classSyncToV3PopupClick": {
771 - const isSyncAction = payload.action === "sync";
772 - return {
773 - ...payload,
774 - interaction_type: "click",
775 - target_type: "button",
776 - target_name: isSyncAction ? "sync_to_v3" : "cancel",
777 - interaction_result: isSyncAction ? "class_is_synced" : "cancel",
778 - target_location: "sync_to_v3_popup"
779 - };
780 - }
781 - default: return payload;
782 - }
783 - };
784 - var track = (data) => {
785 - const { dispatchEvent, config } = (0, _elementor_events.getMixpanel)();
786 - if (!config?.names?.global_classes?.[data.event]) {
787 - console.error("Global class tracking event not found", { event: data.event });
788 - return;
789 - }
790 - const name = config.names.global_classes[data.event];
791 - const { event, ...eventData } = data;
792 - try {
793 - dispatchEvent?.(name, {
794 - event,
795 - ...eventData
796 - });
797 - } catch (error) {
798 - throw new GlobalClassTrackingError({ cause: error });
799 - }
800 - };
801 - var extractCssClassData = (classId) => {
802 - return { classTitle: getCssClass(classId).label };
803 - };
804 - var getCssClass = (classId) => {
805 - const state = (0, _elementor_store.__getState)();
806 - const cssClass = selectClass(state, classId);
807 - if (cssClass) return cssClass;
808 - const label = selectClassLabels(state)[classId];
809 - if (label !== void 0) return placeholderDefinition(classId, label);
810 - throw new Error(`CSS class with ID ${classId} not found`);
811 - };
812 - var trackDeleteClass = async (classId) => {
813 - const classTitle = getCssClass(classId).label;
814 - return {
815 - totalInstances: await getTotalInstancesByCssClassID(classId),
816 - classTitle
817 - };
818 - };
819 - var getTotalInstancesByCssClassID = async (classId) => {
820 - return (await fetchCssClassUsage())[classId]?.total ?? 1;
821 - };
822 - var getAppliedInfo = async (classId) => {
823 - const { classTitle } = extractCssClassData(classId);
824 - return {
825 - classTitle,
826 - totalInstancesAfterApply: await getTotalInstancesByCssClassID(classId) + 1
827 - };
828 - };
829 - var getRemovedInfo = (classId) => {
830 - const { classTitle } = extractCssClassData(classId);
831 - return { classTitle };
832 - };
833 -
834 -//#endregion
835 -//#region packages/packages/core/editor-global-classes/src/save-global-classes.tsx
836 - async function saveGlobalClasses({ context, onApprove }) {
837 - const state = selectData((0, _elementor_store.__getState)());
838 - const apiAction = context === "preview" ? apiClient.saveDraft : apiClient.publish;
839 - const changes = calculateChanges(state, (context === "preview" ? selectPreviewInitialData : selectFrontendInitialData)((0, _elementor_store.__getState)()));
840 - const touchedIds = [...changes.added, ...changes.modified];
841 - const response = await apiAction({
842 - items: Object.fromEntries(touchedIds.map((id) => [id, state.items[id]]).filter(([, v]) => v)),
843 - order: state.order,
844 - changes
845 - });
846 - (0, _elementor_store.__dispatch)(slice.actions.reset({ context }));
847 - window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context } }));
848 - if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
849 - (0, _elementor_store.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
850 - trackGlobalClasses({
851 - event: "classPublishConflict",
852 - numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
853 - });
854 - (0, _elementor_editor_ui.openDialog)({ component: /* @__PURE__ */ react.createElement(DuplicateLabelDialog, {
855 - modifiedLabels: response.data.data.modifiedLabels || [],
856 - onApprove
857 - }) });
858 - }
859 - }
860 - function calculateChanges(state, initialData) {
861 - const stateIds = Object.keys(state.items);
862 - const initialDataIds = Object.keys(initialData.items);
863 - const { order: stateOrder } = state;
864 - const { order: initialDataOrder } = initialData;
865 - const stateOrderIdSet = new Set(stateOrder);
866 - const deleted = initialDataOrder.filter((id) => !stateOrderIdSet.has(id));
867 - const order = stateOrder.join(";") !== initialDataOrder.join(";");
868 - return {
869 - added: stateIds.filter((id) => !initialDataIds.includes(id)),
870 - deleted,
871 - modified: stateIds.filter((id) => {
872 - return id in initialData.items && (0, _elementor_utils.hash)(state.items[id]) !== (0, _elementor_utils.hash)(initialData.items[id]);
873 - }),
874 - order
875 - };
876 - }
877 -
878 -//#endregion
879 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/clear-icon-button.tsx
880 - var ClearIconButton = ({ tooltipText, sx, trigger }) => {
881 - const { filters: { onClearFilter } } = useSearchAndFilters();
882 - const handleClearFilters = () => {
883 - onClearFilter(trigger);
884 - trackGlobalClasses({
885 - event: "classManagerFilterCleared",
886 - trigger
887 - });
888 - };
889 - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
890 - title: tooltipText,
891 - placement: "top",
892 - disableInteractive: true
893 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(CustomIconButton$1, {
894 - "aria-label": tooltipText,
895 - size: "tiny",
896 - onClick: handleClearFilters,
897 - sx
898 - }, /* @__PURE__ */ react.createElement(_elementor_icons.BrushBigIcon, { fontSize: "tiny" }))));
899 - };
900 - var CustomIconButton$1 = (0, _elementor_ui.styled)(_elementor_ui.IconButton)(({ theme }) => ({ "&.Mui-disabled": {
901 - pointerEvents: "auto",
902 - "&:hover": { color: theme.palette.action.disabled }
903 - } }));
904 -
905 -//#endregion
906 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/filter-list.tsx
907 - var filterConfig = {
908 - unused: (0, _wordpress_i18n.__)("Unused", "elementor"),
909 - empty: (0, _wordpress_i18n.__)("Empty", "elementor"),
910 - onThisPage: (0, _wordpress_i18n.__)("On this page", "elementor")
911 - };
912 - var FilterList = () => {
913 - const { filters: { filters, setFilters } } = useSearchAndFilters();
914 - const filteredCssClass = useFilteredCssClassUsage();
915 - const handleOnClick = (value) => {
916 - setFilters((prev) => ({
917 - ...prev,
918 - [value]: !prev[value]
919 - }));
920 - trackGlobalClasses({
921 - event: "classManagerFilterUsed",
922 - action: filters[value] ? "remove" : "apply",
923 - type: value,
924 - trigger: "menu"
925 - });
926 - };
927 - return /* @__PURE__ */ react.createElement(_elementor_ui.MenuList, null, /* @__PURE__ */ react.createElement(_elementor_ui.MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ react.createElement(LabeledCheckbox, {
928 - label: filterConfig.unused,
929 - checked: filters.unused,
930 - suffix: /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
931 - size: "tiny",
932 - sx: { ml: "auto" },
933 - label: filteredCssClass.unused.length
934 - })
935 - })), /* @__PURE__ */ react.createElement(_elementor_ui.MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ react.createElement(LabeledCheckbox, {
936 - label: filterConfig.empty,
937 - checked: filters.empty,
938 - suffix: /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
939 - size: "tiny",
940 - sx: { ml: "auto" },
941 - label: filteredCssClass.empty.length
942 - })
943 - })), /* @__PURE__ */ react.createElement(_elementor_ui.MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ react.createElement(LabeledCheckbox, {
944 - label: filterConfig.onThisPage,
945 - checked: filters.onThisPage,
946 - suffix: /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
947 - size: "tiny",
948 - sx: { ml: "auto" },
949 - label: filteredCssClass.onThisPage.length
950 - })
951 - })));
952 - };
953 - var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
954 - direction: "row",
955 - alignItems: "center",
956 - gap: .5,
957 - flex: 1
958 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Checkbox, {
959 - size: "small",
960 - checked,
961 - sx: {
962 - padding: 0,
963 - color: "text.tertiary",
964 - "&.Mui-checked": { color: "text.tertiary" }
965 - }
966 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
967 - variant: "caption",
968 - sx: { color: "text.secondary" }
969 - }, label), suffix);
970 -
971 -//#endregion
972 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/active-filters.tsx
973 - var ActiveFilters = () => {
974 - const { filters: { filters, setFilters } } = useSearchAndFilters();
975 - const handleRemove = (key) => {
976 - setFilters((prev) => ({
977 - ...prev,
978 - [key]: false
979 - }));
980 - trackGlobalClasses({
981 - event: "classManagerFilterUsed",
982 - action: "remove",
983 - type: key,
984 - trigger: "header"
985 - });
986 - };
987 - const activeKeys = Object.keys(filters).filter((key) => filters[key]);
988 - const showClearIcon = activeKeys.length > 0;
989 - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
990 - direction: "row",
991 - alignItems: "center",
992 - justifyContent: "space-between"
993 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
994 - direction: "row",
995 - gap: .5,
996 - alignItems: "center",
997 - flexWrap: "wrap"
998 - }, activeKeys.map((key) => /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
999 - key,
1000 - label: filterConfig[key],
1001 - onDelete: () => handleRemove(key),
1002 - sx: chipSx,
1003 - size: "tiny"
1004 - }))), showClearIcon && /* @__PURE__ */ react.createElement(ClearIconButton, {
1005 - trigger: "header",
1006 - tooltipText: (0, _wordpress_i18n.__)("Clear Filters", "elementor"),
1007 - sx: { margin: "0 0 auto auto" }
1008 - }));
1009 - };
1010 - var chipSx = {
1011 - "& .MuiChip-deleteIcon": {
1012 - display: "none",
1013 - transition: "opacity 0.2s"
1014 - },
1015 - "&:hover .MuiChip-deleteIcon": { display: "block" }
1016 - };
1017 -
1018 -//#endregion
1019 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/css-class-filter.tsx
1020 - var CssClassFilter = () => {
1021 - const { filters: { filters } } = useSearchAndFilters();
1022 - const popupState = (0, _elementor_ui.usePopupState)({
1023 - variant: "popover",
1024 - disableAutoFocus: true
1025 - });
1026 - (0, react.useEffect)(() => {
1027 - if (popupState.isOpen) trackGlobalClasses({ event: "classManagerFiltersOpened" });
1028 - }, [popupState.isOpen]);
1029 - const showCleanIcon = Object.values(filters).some((value) => value);
1030 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
1031 - title: (0, _wordpress_i18n.__)("Filters", "elementor"),
1032 - placement: "top"
1033 - }, /* @__PURE__ */ react.createElement(_elementor_ui.ToggleButton, {
1034 - value: "filter",
1035 - size: "tiny",
1036 - selected: popupState.isOpen,
1037 - ...(0, _elementor_ui.bindToggle)(popupState)
1038 - }, /* @__PURE__ */ react.createElement(_elementor_icons.FilterIcon, { fontSize: "tiny" }))), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, {
1039 - sx: { maxWidth: "344px" },
1040 - anchorOrigin: {
1041 - vertical: "top",
1042 - horizontal: "right"
1043 - },
1044 - transformOrigin: {
1045 - vertical: "top",
1046 - horizontal: -21
1047 - },
1048 - ...(0, _elementor_ui.bindPopover)(popupState)
1049 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, {
1050 - actions: showCleanIcon ? [/* @__PURE__ */ react.createElement(ClearIconButton, {
1051 - trigger: "menu",
1052 - key: "clear-all-button",
1053 - tooltipText: (0, _wordpress_i18n.__)("Clear all", "elementor")
1054 - })] : [],
1055 - onClose: popupState.close,
1056 - title: (0, _wordpress_i18n.__)("Filters", "elementor"),
1057 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.FilterIcon, { fontSize: "tiny" })
1058 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, { sx: { borderWidth: "1px 0 0 0" } }), /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverBody, {
1059 - width: 344,
1060 - height: 125
1061 - }, /* @__PURE__ */ react.createElement(FilterList, null))));
1062 - };
1063 -
1064 -//#endregion
1065 -//#region packages/packages/core/editor-global-classes/src/components/search-and-filter/components/search/class-manager-search.tsx
1066 - var ClassManagerSearch = () => {
1067 - const { search: { inputValue, handleChange } } = useSearchAndFilters();
1068 - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
1069 - direction: "row",
1070 - gap: .5,
1071 - sx: { width: "100%" }
1072 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
1073 - role: "search",
1074 - fullWidth: true,
1075 - size: "tiny",
1076 - value: inputValue,
1077 - onFocus: () => {
1078 - trackGlobalClasses({ event: "classManagerSearched" });
1079 - },
1080 - placeholder: (0, _wordpress_i18n.__)("Search", "elementor"),
1081 - onChange: (e) => handleChange(e.target.value),
1082 - InputProps: { startAdornment: /* @__PURE__ */ react.createElement(_elementor_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ react.createElement(_elementor_icons.SearchIcon, { fontSize: "tiny" })) }
1083 - })));
1084 - };
1085 -
1086 -//#endregion
1087 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-introduction.tsx
1088 - var MESSAGE_KEY = "global-class-manager";
1089 - var ClassManagerIntroduction = () => {
1090 - const [isMessageSuppressed, suppressMessage] = (0, _elementor_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
1091 - const [shouldShowIntroduction, setShouldShowIntroduction] = (0, react.useState)(!isMessageSuppressed);
1092 - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.IntroductionModal, {
1093 - open: shouldShowIntroduction,
1094 - title: (0, _wordpress_i18n.__)("Class Manager", "elementor"),
1095 - handleClose: (shouldShowAgain) => {
1096 - if (!shouldShowAgain) suppressMessage();
1097 - setShouldShowIntroduction(false);
1098 - }
1099 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Image, {
1100 - sx: {
1101 - width: "100%",
1102 - aspectRatio: "16 / 9"
1103 - },
1104 - src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
1105 - alt: ""
1106 - }), /* @__PURE__ */ react.createElement(IntroductionContent, null));
1107 - };
1108 - var IntroductionContent = () => {
1109 - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { p: 3 }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.", "elementor")), /* @__PURE__ */ react.createElement("br", null), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.", "elementor")));
1110 - };
1111 -
1112 -//#endregion
1113 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/delete-class.ts
1114 - var isDeleted = false;
1115 - var deleteClass = (id) => {
1116 - trackGlobalClasses({
1117 - event: "classDeleted",
1118 - classId: id,
1119 - runAction: () => {
1120 - (0, _elementor_store.__dispatch)(slice.actions.delete(id));
1121 - isDeleted = true;
1122 - }
1123 - });
1124 - };
1125 - var onDelete = async () => {
1126 - isDeleted = false;
1127 - };
1128 - var hasDeletedItems = () => isDeleted;
1129 -
1130 -//#endregion
1131 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx
1132 - var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, {
1133 - sx: {
1134 - transform: "rotate(90deg)",
1135 - ...sx
1136 - },
1137 - ...props
1138 - });
1139 -
1140 -//#endregion
1141 -//#region packages/node_modules/@tanstack/virtual-core/dist/esm/utils.js
1142 - function memo(getDeps, fn, opts) {
1143 - let deps = opts.initialDeps ?? [];
1144 - let result;
1145 - let isInitial = true;
1146 - function memoizedFunction() {
1147 - var _a;
1148 - var _b;
1149 - var _c;
1150 - let depTime;
1151 - if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
1152 - const newDeps = getDeps();
1153 - if (!(newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep))) return result;
1154 - deps = newDeps;
1155 - let resultTime;
1156 - if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
1157 - result = fn(...newDeps);
1158 - if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
1159 - const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
1160 - const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
1161 - const resultFpsPercentage = resultEndTime / 16;
1162 - const pad = (str, num) => {
1163 - str = String(str);
1164 - while (str.length < num) str = " " + str;
1165 - return str;
1166 - };
1167 - console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
1168 - font-size: .6rem;
1169 - font-weight: bold;
1170 - color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
1171 - }
1172 - if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) opts.onChange(result);
1173 - isInitial = false;
1174 - return result;
1175 - }
1176 - memoizedFunction.updateDeps = (newDeps) => {
1177 - deps = newDeps;
1178 - };
1179 - return memoizedFunction;
1180 - }
1181 - function notUndefined(value, msg) {
1182 - if (value === void 0) throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
1183 - else return value;
1184 - }
1185 - var approxEqual = (a, b) => Math.abs(a - b) < 1.01;
1186 - var debounce = (targetWindow, fn, ms) => {
1187 - let timeoutId;
1188 - return function(...args) {
1189 - targetWindow.clearTimeout(timeoutId);
1190 - timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
1191 - };
1192 - };
1193 -
1194 -//#endregion
1195 -//#region packages/node_modules/@tanstack/virtual-core/dist/esm/index.js
1196 - var getRect = (element) => {
1197 - const { offsetWidth, offsetHeight } = element;
1198 - return {
1199 - width: offsetWidth,
1200 - height: offsetHeight
1201 - };
1202 - };
1203 - var defaultKeyExtractor = (index) => index;
1204 - var defaultRangeExtractor = (range) => {
1205 - const start = Math.max(range.startIndex - range.overscan, 0);
1206 - const end = Math.min(range.endIndex + range.overscan, range.count - 1);
1207 - const arr = [];
1208 - for (let i = start; i <= end; i++) arr.push(i);
1209 - return arr;
1210 - };
1211 - var observeElementRect = (instance, cb) => {
1212 - const element = instance.scrollElement;
1213 - if (!element) return;
1214 - const targetWindow = instance.targetWindow;
1215 - if (!targetWindow) return;
1216 - const handler = (rect) => {
1217 - const { width, height } = rect;
1218 - cb({
1219 - width: Math.round(width),
1220 - height: Math.round(height)
1221 - });
1222 - };
1223 - handler(getRect(element));
1224 - if (!targetWindow.ResizeObserver) return () => {};
1225 - const observer = new targetWindow.ResizeObserver((entries) => {
1226 - const run = () => {
1227 - const entry = entries[0];
1228 - if (entry == null ? void 0 : entry.borderBoxSize) {
1229 - const box = entry.borderBoxSize[0];
1230 - if (box) {
1231 - handler({
1232 - width: box.inlineSize,
1233 - height: box.blockSize
1234 - });
1235 - return;
1236 - }
1237 - }
1238 - handler(getRect(element));
1239 - };
1240 - instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
1241 - });
1242 - observer.observe(element, { box: "border-box" });
1243 - return () => {
1244 - observer.unobserve(element);
1245 - };
1246 - };
1247 - var addEventListenerOptions = { passive: true };
1248 - var supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
1249 - var observeElementOffset = (instance, cb) => {
1250 - const element = instance.scrollElement;
1251 - if (!element) return;
1252 - const targetWindow = instance.targetWindow;
1253 - if (!targetWindow) return;
1254 - let offset = 0;
1255 - const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(targetWindow, () => {
1256 - cb(offset, false);
1257 - }, instance.options.isScrollingResetDelay);
1258 - const createHandler = (isScrolling) => () => {
1259 - const { horizontal, isRtl } = instance.options;
1260 - offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
1261 - fallback();
1262 - cb(offset, isScrolling);
1263 - };
1264 - const handler = createHandler(true);
1265 - const endHandler = createHandler(false);
1266 - element.addEventListener("scroll", handler, addEventListenerOptions);
1267 - const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
1268 - if (registerScrollendEvent) element.addEventListener("scrollend", endHandler, addEventListenerOptions);
1269 - return () => {
1270 - element.removeEventListener("scroll", handler);
1271 - if (registerScrollendEvent) element.removeEventListener("scrollend", endHandler);
1272 - };
1273 - };
1274 - var measureElement = (element, entry, instance) => {
1275 - if (entry == null ? void 0 : entry.borderBoxSize) {
1276 - const box = entry.borderBoxSize[0];
1277 - if (box) return Math.round(box[instance.options.horizontal ? "inlineSize" : "blockSize"]);
1278 - }
1279 - return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
1280 - };
1281 - var elementScroll = (offset, { adjustments = 0, behavior }, instance) => {
1282 - var _a;
1283 - var _b;
1284 - const toOffset = offset + adjustments;
1285 - (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null || _b.call(_a, {
1286 - [instance.options.horizontal ? "left" : "top"]: toOffset,
1287 - behavior
1288 - });
1289 - };
1290 - var Virtualizer = class {
1291 - constructor(opts) {
1292 - this.unsubs = [];
1293 - this.scrollElement = null;
1294 - this.targetWindow = null;
1295 - this.isScrolling = false;
1296 - this.scrollState = null;
1297 - this.measurementsCache = [];
1298 - this.itemSizeCache = /* @__PURE__ */ new Map();
1299 - this.laneAssignments = /* @__PURE__ */ new Map();
1300 - this.pendingMeasuredCacheIndexes = [];
1301 - this.prevLanes = void 0;
1302 - this.lanesChangedFlag = false;
1303 - this.lanesSettling = false;
1304 - this.scrollRect = null;
1305 - this.scrollOffset = null;
1306 - this.scrollDirection = null;
1307 - this.scrollAdjustments = 0;
1308 - this.elementsCache = /* @__PURE__ */ new Map();
1309 - this.now = () => {
1310 - var _a;
1311 - var _b;
1312 - var _c;
1313 - return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
1314 - };
1315 - this.observer = /* @__PURE__ */ (() => {
1316 - let _ro = null;
1317 - const get = () => {
1318 - if (_ro) return _ro;
1319 - if (!this.targetWindow || !this.targetWindow.ResizeObserver) return null;
1320 - return _ro = new this.targetWindow.ResizeObserver((entries) => {
1321 - entries.forEach((entry) => {
1322 - const run = () => {
1323 - const node = entry.target;
1324 - const index = this.indexFromElement(node);
1325 - if (!node.isConnected) {
1326 - this.observer.unobserve(node);
1327 - return;
1328 - }
1329 - if (this.shouldMeasureDuringScroll(index)) this.resizeItem(index, this.options.measureElement(node, entry, this));
1330 - };
1331 - this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
1332 - });
1333 - });
1334 - };
1335 - return {
1336 - disconnect: () => {
1337 - var _a;
1338 - (_a = get()) == null || _a.disconnect();
1339 - _ro = null;
1340 - },
1341 - observe: (target) => {
1342 - var _a;
1343 - return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
1344 - },
1345 - unobserve: (target) => {
1346 - var _a;
1347 - return (_a = get()) == null ? void 0 : _a.unobserve(target);
1348 - }
1349 - };
1350 - })();
1351 - this.range = null;
1352 - this.setOptions = (opts2) => {
1353 - Object.entries(opts2).forEach(([key, value]) => {
1354 - if (typeof value === "undefined") delete opts2[key];
1355 - });
1356 - this.options = {
1357 - debug: false,
1358 - initialOffset: 0,
1359 - overscan: 1,
1360 - paddingStart: 0,
1361 - paddingEnd: 0,
1362 - scrollPaddingStart: 0,
1363 - scrollPaddingEnd: 0,
1364 - horizontal: false,
1365 - getItemKey: defaultKeyExtractor,
1366 - rangeExtractor: defaultRangeExtractor,
1367 - onChange: () => {},
1368 - measureElement,
1369 - initialRect: {
1370 - width: 0,
1371 - height: 0
1372 - },
1373 - scrollMargin: 0,
1374 - gap: 0,
1375 - indexAttribute: "data-index",
1376 - initialMeasurementsCache: [],
1377 - lanes: 1,
1378 - isScrollingResetDelay: 150,
1379 - enabled: true,
1380 - isRtl: false,
1381 - useScrollendEvent: false,
1382 - useAnimationFrameWithResizeObserver: false,
1383 - laneAssignmentMode: "estimate",
1384 - ...opts2
1385 - };
1386 - };
1387 - this.notify = (sync) => {
1388 - var _a;
1389 - var _b;
1390 - (_b = (_a = this.options).onChange) == null || _b.call(_a, this, sync);
1391 - };
1392 - this.maybeNotify = memo(() => {
1393 - this.calculateRange();
1394 - return [
1395 - this.isScrolling,
1396 - this.range ? this.range.startIndex : null,
1397 - this.range ? this.range.endIndex : null
1398 - ];
1399 - }, (isScrolling) => {
1400 - this.notify(isScrolling);
1401 - }, {
1402 - key: "maybeNotify",
1403 - debug: () => this.options.debug,
1404 - initialDeps: [
1405 - this.isScrolling,
1406 - this.range ? this.range.startIndex : null,
1407 - this.range ? this.range.endIndex : null
1408 - ]
1409 - });
1410 - this.cleanup = () => {
1411 - this.unsubs.filter(Boolean).forEach((d) => d());
1412 - this.unsubs = [];
1413 - this.observer.disconnect();
1414 - if (this.rafId != null && this.targetWindow) {
1415 - this.targetWindow.cancelAnimationFrame(this.rafId);
1416 - this.rafId = null;
1417 - }
1418 - this.scrollState = null;
1419 - this.scrollElement = null;
1420 - this.targetWindow = null;
1421 - };
1422 - this._didMount = () => {
1423 - return () => {
1424 - this.cleanup();
1425 - };
1426 - };
1427 - this._willUpdate = () => {
1428 - var _a;
1429 - const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
1430 - if (this.scrollElement !== scrollElement) {
1431 - this.cleanup();
1432 - if (!scrollElement) {
1433 - this.maybeNotify();
1434 - return;
1435 - }
1436 - this.scrollElement = scrollElement;
1437 - if (this.scrollElement && "ownerDocument" in this.scrollElement) this.targetWindow = this.scrollElement.ownerDocument.defaultView;
1438 - else this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
1439 - this.elementsCache.forEach((cached) => {
1440 - this.observer.observe(cached);
1441 - });
1442 - this.unsubs.push(this.options.observeElementRect(this, (rect) => {
1443 - this.scrollRect = rect;
1444 - this.maybeNotify();
1445 - }));
1446 - this.unsubs.push(this.options.observeElementOffset(this, (offset, isScrolling) => {
1447 - this.scrollAdjustments = 0;
1448 - this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
1449 - this.scrollOffset = offset;
1450 - this.isScrolling = isScrolling;
1451 - if (this.scrollState) this.scheduleScrollReconcile();
1452 - this.maybeNotify();
1453 - }));
1454 - this._scrollToOffset(this.getScrollOffset(), {
1455 - adjustments: void 0,
1456 - behavior: void 0
1457 - });
1458 - }
1459 - };
1460 - this.rafId = null;
1461 - this.getSize = () => {
1462 - if (!this.options.enabled) {
1463 - this.scrollRect = null;
1464 - return 0;
1465 - }
1466 - this.scrollRect = this.scrollRect ?? this.options.initialRect;
1467 - return this.scrollRect[this.options.horizontal ? "width" : "height"];
1468 - };
1469 - this.getScrollOffset = () => {
1470 - if (!this.options.enabled) {
1471 - this.scrollOffset = null;
1472 - return 0;
1473 - }
1474 - this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
1475 - return this.scrollOffset;
1476 - };
1477 - this.getFurthestMeasurement = (measurements, index) => {
1478 - const furthestMeasurementsFound = /* @__PURE__ */ new Map();
1479 - const furthestMeasurements = /* @__PURE__ */ new Map();
1480 - for (let m = index - 1; m >= 0; m--) {
1481 - const measurement = measurements[m];
1482 - if (furthestMeasurementsFound.has(measurement.lane)) continue;
1483 - const previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
1484 - if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) furthestMeasurements.set(measurement.lane, measurement);
1485 - else if (measurement.end < previousFurthestMeasurement.end) furthestMeasurementsFound.set(measurement.lane, true);
1486 - if (furthestMeasurementsFound.size === this.options.lanes) break;
1487 - }
1488 - return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
1489 - if (a.end === b.end) return a.index - b.index;
1490 - return a.end - b.end;
1491 - })[0] : void 0;
1492 - };
1493 - this.getMeasurementOptions = memo(() => [
1494 - this.options.count,
1495 - this.options.paddingStart,
1496 - this.options.scrollMargin,
1497 - this.options.getItemKey,
1498 - this.options.enabled,
1499 - this.options.lanes,
1500 - this.options.laneAssignmentMode
1501 - ], (count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode) => {
1502 - if (this.prevLanes !== void 0 && this.prevLanes !== lanes) this.lanesChangedFlag = true;
1503 - this.prevLanes = lanes;
1504 - this.pendingMeasuredCacheIndexes = [];
1505 - return {
1506 - count,
1507 - paddingStart,
1508 - scrollMargin,
1509 - getItemKey,
1510 - enabled,
1511 - lanes,
1512 - laneAssignmentMode
1513 - };
1514 - }, { key: false });
1515 - this.getMeasurements = memo(() => [this.getMeasurementOptions(), this.itemSizeCache], ({ count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode }, itemSizeCache) => {
1516 - if (!enabled) {
1517 - this.measurementsCache = [];
1518 - this.itemSizeCache.clear();
1519 - this.laneAssignments.clear();
1520 - return [];
1521 - }
1522 - if (this.laneAssignments.size > count) {
1523 - for (const index of this.laneAssignments.keys()) if (index >= count) this.laneAssignments.delete(index);
1524 - }
1525 - if (this.lanesChangedFlag) {
1526 - this.lanesChangedFlag = false;
1527 - this.lanesSettling = true;
1528 - this.measurementsCache = [];
1529 - this.itemSizeCache.clear();
1530 - this.laneAssignments.clear();
1531 - this.pendingMeasuredCacheIndexes = [];
1532 - }
1533 - if (this.measurementsCache.length === 0 && !this.lanesSettling) {
1534 - this.measurementsCache = this.options.initialMeasurementsCache;
1535 - this.measurementsCache.forEach((item) => {
1536 - this.itemSizeCache.set(item.key, item.size);
1537 - });
1538 - }
1539 - const min = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
1540 - this.pendingMeasuredCacheIndexes = [];
1541 - if (this.lanesSettling && this.measurementsCache.length === count) this.lanesSettling = false;
1542 - const measurements = this.measurementsCache.slice(0, min);
1543 - const laneLastIndex = new Array(lanes).fill(void 0);
1544 - for (let m = 0; m < min; m++) {
1545 - const item = measurements[m];
1546 - if (item) laneLastIndex[item.lane] = m;
1547 - }
1548 - for (let i = min; i < count; i++) {
1549 - const key = getItemKey(i);
1550 - const cachedLane = this.laneAssignments.get(i);
1551 - let lane;
1552 - let start;
1553 - const shouldCacheLane = laneAssignmentMode === "estimate" || itemSizeCache.has(key);
1554 - if (cachedLane !== void 0 && this.options.lanes > 1) {
1555 - lane = cachedLane;
1556 - const prevIndex = laneLastIndex[lane];
1557 - const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
1558 - start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
1559 - } else {
1560 - const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
1561 - start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
1562 - lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
1563 - if (this.options.lanes > 1 && shouldCacheLane) this.laneAssignments.set(i, lane);
1564 - }
1565 - const measuredSize = itemSizeCache.get(key);
1566 - const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
1567 - const end = start + size;
1568 - measurements[i] = {
1569 - index: i,
1570 - start,
1571 - size,
1572 - end,
1573 - key,
1574 - lane
1575 - };
1576 - laneLastIndex[lane] = i;
1577 - }
1578 - this.measurementsCache = measurements;
1579 - return measurements;
1580 - }, {
1581 - key: "getMeasurements",
1582 - debug: () => this.options.debug
1583 - });
1584 - this.calculateRange = memo(() => [
1585 - this.getMeasurements(),
1586 - this.getSize(),
1587 - this.getScrollOffset(),
1588 - this.options.lanes
1589 - ], (measurements, outerSize, scrollOffset, lanes) => {
1590 - return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
1591 - measurements,
1592 - outerSize,
1593 - scrollOffset,
1594 - lanes
1595 - }) : null;
1596 - }, {
1597 - key: "calculateRange",
1598 - debug: () => this.options.debug
1599 - });
1600 - this.getVirtualIndexes = memo(() => {
1601 - let startIndex = null;
1602 - let endIndex = null;
1603 - const range = this.calculateRange();
1604 - if (range) {
1605 - startIndex = range.startIndex;
1606 - endIndex = range.endIndex;
1607 - }
1608 - this.maybeNotify.updateDeps([
1609 - this.isScrolling,
1610 - startIndex,
1611 - endIndex
1612 - ]);
1613 - return [
1614 - this.options.rangeExtractor,
1615 - this.options.overscan,
1616 - this.options.count,
1617 - startIndex,
1618 - endIndex
1619 - ];
1620 - }, (rangeExtractor, overscan, count, startIndex, endIndex) => {
1621 - return startIndex === null || endIndex === null ? [] : rangeExtractor({
1622 - startIndex,
1623 - endIndex,
1624 - overscan,
1625 - count
1626 - });
1627 - }, {
1628 - key: "getVirtualIndexes",
1629 - debug: () => this.options.debug
1630 - });
1631 - this.indexFromElement = (node) => {
1632 - const attributeName = this.options.indexAttribute;
1633 - const indexStr = node.getAttribute(attributeName);
1634 - if (!indexStr) {
1635 - console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
1636 - return -1;
1637 - }
1638 - return parseInt(indexStr, 10);
1639 - };
1640 - this.shouldMeasureDuringScroll = (index) => {
1641 - var _a;
1642 - if (!this.scrollState || this.scrollState.behavior !== "smooth") return true;
1643 - const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
1644 - if (scrollIndex !== void 0 && this.range) {
1645 - const bufferSize = Math.max(this.options.overscan, Math.ceil((this.range.endIndex - this.range.startIndex) / 2));
1646 - const minIndex = Math.max(0, scrollIndex - bufferSize);
1647 - const maxIndex = Math.min(this.options.count - 1, scrollIndex + bufferSize);
1648 - return index >= minIndex && index <= maxIndex;
1649 - }
1650 - return true;
1651 - };
1652 - this.measureElement = (node) => {
1653 - if (!node) {
1654 - this.elementsCache.forEach((cached, key2) => {
1655 - if (!cached.isConnected) {
1656 - this.observer.unobserve(cached);
1657 - this.elementsCache.delete(key2);
1658 - }
1659 - });
1660 - return;
1661 - }
1662 - const index = this.indexFromElement(node);
1663 - const key = this.options.getItemKey(index);
1664 - const prevNode = this.elementsCache.get(key);
1665 - if (prevNode !== node) {
1666 - if (prevNode) this.observer.unobserve(prevNode);
1667 - this.observer.observe(node);
1668 - this.elementsCache.set(key, node);
1669 - }
1670 - if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) this.resizeItem(index, this.options.measureElement(node, void 0, this));
1671 - };
1672 - this.resizeItem = (index, size) => {
1673 - var _a;
1674 - const item = this.measurementsCache[index];
1675 - if (!item) return;
1676 - const delta = size - (this.itemSizeCache.get(item.key) ?? item.size);
1677 - if (delta !== 0) {
1678 - if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
1679 - if (this.options.debug) console.info("correction", delta);
1680 - this._scrollToOffset(this.getScrollOffset(), {
1681 - adjustments: this.scrollAdjustments += delta,
1682 - behavior: void 0
1683 - });
1684 - }
1685 - this.pendingMeasuredCacheIndexes.push(item.index);
1686 - this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
1687 - this.notify(false);
1688 - }
1689 - };
1690 - this.getVirtualItems = memo(() => [this.getVirtualIndexes(), this.getMeasurements()], (indexes, measurements) => {
1691 - const virtualItems = [];
1692 - for (let k = 0, len = indexes.length; k < len; k++) {
1693 - const measurement = measurements[indexes[k]];
1694 - virtualItems.push(measurement);
1695 - }
1696 - return virtualItems;
1697 - }, {
1698 - key: "getVirtualItems",
1699 - debug: () => this.options.debug
1700 - });
1701 - this.getVirtualItemForOffset = (offset) => {
1702 - const measurements = this.getMeasurements();
1703 - if (measurements.length === 0) return;
1704 - return notUndefined(measurements[findNearestBinarySearch(0, measurements.length - 1, (index) => notUndefined(measurements[index]).start, offset)]);
1705 - };
1706 - this.getMaxScrollOffset = () => {
1707 - if (!this.scrollElement) return 0;
1708 - if ("scrollHeight" in this.scrollElement) return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
1709 - else {
1710 - const doc = this.scrollElement.document.documentElement;
1711 - return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
1712 - }
1713 - };
1714 - this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
1715 - if (!this.scrollElement) return 0;
1716 - const size = this.getSize();
1717 - const scrollOffset = this.getScrollOffset();
1718 - if (align === "auto") align = toOffset >= scrollOffset + size ? "end" : "start";
1719 - if (align === "center") toOffset += (itemSize - size) / 2;
1720 - else if (align === "end") toOffset -= size;
1721 - const maxOffset = this.getMaxScrollOffset();
1722 - return Math.max(Math.min(maxOffset, toOffset), 0);
1723 - };
1724 - this.getOffsetForIndex = (index, align = "auto") => {
1725 - index = Math.max(0, Math.min(index, this.options.count - 1));
1726 - const size = this.getSize();
1727 - const scrollOffset = this.getScrollOffset();
1728 - const item = this.measurementsCache[index];
1729 - if (!item) return;
1730 - if (align === "auto") if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) align = "end";
1731 - else if (item.start <= scrollOffset + this.options.scrollPaddingStart) align = "start";
1732 - else return [scrollOffset, align];
1733 - if (align === "end" && index === this.options.count - 1) return [this.getMaxScrollOffset(), align];
1734 - const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
1735 - return [this.getOffsetForAlignment(toOffset, align, item.size), align];
1736 - };
1737 - this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
1738 - const offset = this.getOffsetForAlignment(toOffset, align);
1739 - const now = this.now();
1740 - this.scrollState = {
1741 - index: null,
1742 - align,
1743 - behavior,
1744 - startedAt: now,
1745 - lastTargetOffset: offset,
1746 - stableFrames: 0
1747 - };
1748 - this._scrollToOffset(offset, {
1749 - adjustments: void 0,
1750 - behavior
1751 - });
1752 - this.scheduleScrollReconcile();
1753 - };
1754 - this.scrollToIndex = (index, { align: initialAlign = "auto", behavior = "auto" } = {}) => {
1755 - index = Math.max(0, Math.min(index, this.options.count - 1));
1756 - const offsetInfo = this.getOffsetForIndex(index, initialAlign);
1757 - if (!offsetInfo) return;
1758 - const [offset, align] = offsetInfo;
1759 - const now = this.now();
1760 - this.scrollState = {
1761 - index,
1762 - align,
1763 - behavior,
1764 - startedAt: now,
1765 - lastTargetOffset: offset,
1766 - stableFrames: 0
1767 - };
1768 - this._scrollToOffset(offset, {
1769 - adjustments: void 0,
1770 - behavior
1771 - });
1772 - this.scheduleScrollReconcile();
1773 - };
1774 - this.scrollBy = (delta, { behavior = "auto" } = {}) => {
1775 - const offset = this.getScrollOffset() + delta;
1776 - const now = this.now();
1777 - this.scrollState = {
1778 - index: null,
1779 - align: "start",
1780 - behavior,
1781 - startedAt: now,
1782 - lastTargetOffset: offset,
1783 - stableFrames: 0
1784 - };
1785 - this._scrollToOffset(offset, {
1786 - adjustments: void 0,
1787 - behavior
1788 - });
1789 - this.scheduleScrollReconcile();
1790 - };
1791 - this.getTotalSize = () => {
1792 - var _a;
1793 - const measurements = this.getMeasurements();
1794 - let end;
1795 - if (measurements.length === 0) end = this.options.paddingStart;
1796 - else if (this.options.lanes === 1) end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
1797 - else {
1798 - const endByLane = Array(this.options.lanes).fill(null);
1799 - let endIndex = measurements.length - 1;
1800 - while (endIndex >= 0 && endByLane.some((val) => val === null)) {
1801 - const item = measurements[endIndex];
1802 - if (endByLane[item.lane] === null) endByLane[item.lane] = item.end;
1803 - endIndex--;
1804 - }
1805 - end = Math.max(...endByLane.filter((val) => val !== null));
1806 - }
1807 - return Math.max(end - this.options.scrollMargin + this.options.paddingEnd, 0);
1808 - };
1809 - this._scrollToOffset = (offset, { adjustments, behavior }) => {
1810 - this.options.scrollToFn(offset, {
1811 - behavior,
1812 - adjustments
1813 - }, this);
1814 - };
1815 - this.measure = () => {
1816 - this.itemSizeCache = /* @__PURE__ */ new Map();
1817 - this.laneAssignments = /* @__PURE__ */ new Map();
1818 - this.notify(false);
1819 - };
1820 - this.setOptions(opts);
1821 - }
1822 - scheduleScrollReconcile() {
1823 - if (!this.targetWindow) {
1824 - this.scrollState = null;
1825 - return;
1826 - }
1827 - if (this.rafId != null) return;
1828 - this.rafId = this.targetWindow.requestAnimationFrame(() => {
1829 - this.rafId = null;
1830 - this.reconcileScroll();
1831 - });
1832 - }
1833 - reconcileScroll() {
1834 - if (!this.scrollState) return;
1835 - if (!this.scrollElement) return;
1836 - if (this.now() - this.scrollState.startedAt > 5e3) {
1837 - this.scrollState = null;
1838 - return;
1839 - }
1840 - const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
1841 - const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
1842 - const STABLE_FRAMES = 1;
1843 - const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
1844 - if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
1845 - this.scrollState.stableFrames++;
1846 - if (this.scrollState.stableFrames >= STABLE_FRAMES) {
1847 - this.scrollState = null;
1848 - return;
1849 - }
1850 - } else {
1851 - this.scrollState.stableFrames = 0;
1852 - if (targetChanged) {
1853 - this.scrollState.lastTargetOffset = targetOffset;
1854 - this.scrollState.behavior = "auto";
1855 - this._scrollToOffset(targetOffset, {
1856 - adjustments: void 0,
1857 - behavior: "auto"
1858 - });
1859 - }
1860 - }
1861 - this.scheduleScrollReconcile();
1862 - }
1863 - };
1864 - var findNearestBinarySearch = (low, high, getCurrentValue, value) => {
1865 - while (low <= high) {
1866 - const middle = (low + high) / 2 | 0;
1867 - const currentValue = getCurrentValue(middle);
1868 - if (currentValue < value) low = middle + 1;
1869 - else if (currentValue > value) high = middle - 1;
1870 - else return middle;
1871 - }
1872 - if (low > 0) return low - 1;
1873 - else return 0;
1874 - };
1875 - function calculateRange({ measurements, outerSize, scrollOffset, lanes }) {
1876 - const lastIndex = measurements.length - 1;
1877 - const getOffset = (index) => measurements[index].start;
1878 - if (measurements.length <= lanes) return {
1879 - startIndex: 0,
1880 - endIndex: lastIndex
1881 - };
1882 - let startIndex = findNearestBinarySearch(0, lastIndex, getOffset, scrollOffset);
1883 - let endIndex = startIndex;
1884 - if (lanes === 1) while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) endIndex++;
1885 - else if (lanes > 1) {
1886 - const endPerLane = Array(lanes).fill(0);
1887 - while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
1888 - const item = measurements[endIndex];
1889 - endPerLane[item.lane] = item.end;
1890 - endIndex++;
1891 - }
1892 - const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
1893 - while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
1894 - const item = measurements[startIndex];
1895 - startPerLane[item.lane] = item.start;
1896 - startIndex--;
1897 - }
1898 - startIndex = Math.max(0, startIndex - startIndex % lanes);
1899 - endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
1900 - }
1901 - return {
1902 - startIndex,
1903 - endIndex
1904 - };
1905 - }
1906 -
1907 -//#endregion
1908 -//#region packages/node_modules/@tanstack/react-virtual/dist/esm/index.js
1909 - var useIsomorphicLayoutEffect = typeof document !== "undefined" ? react$1.useLayoutEffect : react$1.useEffect;
1910 - function useVirtualizerBase({ useFlushSync = true, ...options }) {
1911 - const rerender = react$1.useReducer(() => ({}), {})[1];
1912 - const resolvedOptions = {
1913 - ...options,
1914 - onChange: (instance2, sync) => {
1915 - var _a;
1916 - if (useFlushSync && sync) (0, react_dom.flushSync)(rerender);
1917 - else rerender();
1918 - (_a = options.onChange) == null || _a.call(options, instance2, sync);
1919 - }
1920 - };
1921 - const [instance] = react$1.useState(() => new Virtualizer(resolvedOptions));
1922 - instance.setOptions(resolvedOptions);
1923 - useIsomorphicLayoutEffect(() => {
1924 - return instance._didMount();
1925 - }, []);
1926 - useIsomorphicLayoutEffect(() => {
1927 - return instance._willUpdate();
1928 - });
1929 - return instance;
1930 - }
1931 - function useVirtualizer(options) {
1932 - return useVirtualizerBase({
1933 - observeElementRect,
1934 - observeElementOffset,
1935 - scrollToFn: elementScroll,
1936 - ...options
1937 - });
1938 - }
1939 -
1940 -//#endregion
1941 -//#region packages/packages/core/editor-global-classes/src/hooks/use-ordered-classes.ts
1942 - var useOrderedClasses = () => {
1943 - return (0, _elementor_store.__useSelector)(selectOrderedClasses);
1944 - };
1945 -
1946 -//#endregion
1947 -//#region packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage-by-id.ts
1948 - var EMPTY_CLASS_USAGE = {
1949 - total: 0,
1950 - content: []
1951 - };
1952 - var useCssClassUsageByID = (id) => {
1953 - const { data, ...rest } = useCssClassUsage();
1954 - const classData = data?.[id] ?? EMPTY_CLASS_USAGE;
1955 - return {
1956 - ...rest,
1957 - data: classData
1958 - };
1959 - };
1960 -
1961 -//#endregion
1962 -//#region packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-popover.tsx
1963 - var iconMapper = {
1964 - "wp-post": {
1965 - label: (0, _wordpress_i18n.__)("Post", "elementor"),
1966 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.PostTypeIcon, { fontSize: "inherit" })
1967 - },
1968 - "wp-page": {
1969 - label: (0, _wordpress_i18n.__)("Page", "elementor"),
1970 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.PagesIcon, { fontSize: "inherit" })
1971 - },
1972 - popup: {
1973 - label: (0, _wordpress_i18n.__)("Popup", "elementor"),
1974 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.PopupTemplateIcon, { fontSize: "inherit" })
1975 - },
1976 - header: {
1977 - label: (0, _wordpress_i18n.__)("Header", "elementor"),
1978 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.HeaderTemplateIcon, { fontSize: "inherit" })
1979 - },
1980 - footer: {
1981 - label: (0, _wordpress_i18n.__)("Footer", "elementor"),
1982 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.FooterTemplateIcon, { fontSize: "inherit" })
1983 - }
1984 - };
1985 - var CssClassUsagePopover = ({ cssClassID, onClose }) => {
1986 - const { data: classUsage } = useCssClassUsageByID(cssClassID);
1987 - const onNavigate = (0, _elementor_editor_documents.__useOpenDocumentInNewTab)();
1988 - const cssClassUsageRecords = classUsage?.content.map(({ title, elements, pageId, type }) => ({
1989 - type: "item",
1990 - value: pageId,
1991 - label: title,
1992 - secondaryText: elements.length.toString(),
1993 - docType: type
1994 - })) ?? [];
1995 - const handleSelect = (value) => {
1996 - onNavigate(+value);
1997 - trackGlobalClasses({
1998 - event: "classUsageLocate",
1999 - classId: cssClassID
2000 - });
2001 - };
2002 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, {
2003 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.CurrentLocationIcon, { fontSize: "tiny" }),
2004 - title: /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2005 - flexDirection: "row",
2006 - gap: 1,
2007 - alignItems: "center"
2008 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { "aria-label": "header-title" }, (0, _wordpress_i18n.__)("Locator", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
2009 - sx: { lineHeight: 1 },
2010 - size: "tiny",
2011 - label: classUsage.total
2012 - }))),
2013 - onClose
2014 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverBody, { width: 300 }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverMenuList, {
2015 - onSelect: handleSelect,
2016 - items: cssClassUsageRecords,
2017 - onClose: () => {},
2018 - menuListTemplate: StyledCssClassUsageItem,
2019 - menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2020 - flexDirection: "row",
2021 - flex: 1,
2022 - alignItems: "center"
2023 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2024 - display: "flex",
2025 - sx: { pr: 1 }
2026 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
2027 - disableInteractive: true,
2028 - title: iconMapper?.[cssClassUsageRecord.docType]?.label ?? cssClassUsageRecord.docType,
2029 - placement: "top"
2030 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Icon, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ react.createElement(_elementor_icons.PagesIcon, { fontSize: "inherit" })))), /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2031 - sx: {
2032 - pr: .5,
2033 - maxWidth: "173px"
2034 - },
2035 - display: "flex"
2036 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, {
2037 - title: cssClassUsageRecord.label,
2038 - as: _elementor_ui.Typography,
2039 - variant: "caption",
2040 - maxWidth: "173px",
2041 - sx: { lineHeight: 1 }
2042 - })), /* @__PURE__ */ react.createElement(_elementor_icons.ExternalLinkIcon, {
2043 - className: "hover-only-icon",
2044 - fontSize: "tiny"
2045 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
2046 - sx: { ml: "auto" },
2047 - size: "tiny",
2048 - label: cssClassUsageRecord.secondaryText
2049 - }))
2050 - })));
2051 - };
2052 - var StyledCssClassUsageItem = (0, _elementor_ui.styled)(_elementor_ui.MenuList)(({ theme }) => ({
2053 - "& > li": {
2054 - display: "flex",
2055 - cursor: "pointer",
2056 - height: 32,
2057 - width: "100%"
2058 - },
2059 - "& > [role=\"option\"]": {
2060 - ...theme.typography.caption,
2061 - lineHeight: "inherit",
2062 - padding: theme.spacing(.5, 1, .5, 2),
2063 - textOverflow: "ellipsis",
2064 - position: "absolute",
2065 - top: 0,
2066 - left: 0,
2067 - opacity: 1,
2068 - ".hover-only-icon": {
2069 - color: theme.palette.text.disabled,
2070 - opacity: 0
2071 - },
2072 - "&:hover": {
2073 - borderRadius: theme.spacing(.5),
2074 - backgroundColor: theme.palette.action.hover,
2075 - ".hover-only-icon": {
2076 - color: theme.palette.text.disabled,
2077 - opacity: 1
2078 - }
2079 - }
2080 - },
2081 - width: "100%",
2082 - position: "relative"
2083 - }));
2084 -
2085 -//#endregion
2086 -//#region packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-trigger.tsx
2087 - var CssClassUsageTrigger = ({ id, onClick }) => {
2088 - const { data: { total }, isLoading } = useCssClassUsageByID(id);
2089 - const cssClassUsagePopover = (0, _elementor_ui.usePopupState)({
2090 - variant: "popover",
2091 - popupId: "css-class-usage-popover"
2092 - });
2093 - if (isLoading) return null;
2094 - const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
2095 - const handleMouseEnter = () => {
2096 - trackGlobalClasses({
2097 - event: "classUsageHovered",
2098 - classId: id,
2099 - usage: total
2100 - });
2101 - };
2102 - const handleClick = (e) => {
2103 - if (total !== 0) {
2104 - (0, _elementor_ui.bindTrigger)(cssClassUsagePopover).onClick(e);
2105 - onClick(id);
2106 - trackGlobalClasses({
2107 - event: "classUsageClicked",
2108 - classId: id
2109 - });
2110 - }
2111 - };
2112 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2113 - position: "relative",
2114 - onMouseEnter: handleMouseEnter
2115 - }, /* @__PURE__ */ react.createElement(WrapperComponent, { total }, /* @__PURE__ */ react.createElement(CustomIconButton, {
2116 - disabled: total === 0,
2117 - size: "tiny",
2118 - ...(0, _elementor_ui.bindTrigger)(cssClassUsagePopover),
2119 - onClick: handleClick
2120 - }, /* @__PURE__ */ react.createElement(_elementor_icons.CurrentLocationIcon, { fontSize: "tiny" })))), /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.Popover, {
2121 - anchorOrigin: {
2122 - vertical: "center",
2123 - horizontal: "right"
2124 - },
2125 - transformOrigin: {
2126 - vertical: 15,
2127 - horizontal: -50
2128 - },
2129 - ...(0, _elementor_ui.bindPopover)(cssClassUsagePopover),
2130 - onClose: () => {
2131 - (0, _elementor_ui.bindPopover)(cssClassUsagePopover).onClose();
2132 - onClick("");
2133 - }
2134 - }, /* @__PURE__ */ react.createElement(CssClassUsagePopover, {
2135 - onClose: cssClassUsagePopover.close,
2136 - "aria-label": "css-class-usage-popover",
2137 - cssClassID: id
2138 - }))));
2139 - };
2140 - var CustomIconButton = (0, _elementor_ui.styled)(_elementor_ui.IconButton)(({ theme }) => ({
2141 - "&.Mui-disabled": {
2142 - pointerEvents: "auto",
2143 - "&:hover": { color: theme.palette.action.disabled }
2144 - },
2145 - height: "22px",
2146 - width: "22px"
2147 - }));
2148 - var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
2149 - disableInteractive: true,
2150 - placement: "top",
2151 - title: `${(0, _wordpress_i18n.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace("{{locations}}", total === 1 ? (0, _wordpress_i18n.__)("location", "elementor") : (0, _wordpress_i18n.__)("locations", "elementor"))}`
2152 - }, /* @__PURE__ */ react.createElement("span", null, children));
2153 - var InfoAlertMessage = ({ children }) => /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
2154 - disableInteractive: true,
2155 - placement: "top",
2156 - color: "secondary",
2157 - content: /* @__PURE__ */ react.createElement(_elementor_editor_ui.InfoAlert, { sx: { mt: 1 } }, (0, _wordpress_i18n.__)("This class isn’t being used yet.", "elementor"))
2158 - }, /* @__PURE__ */ react.createElement("span", null, children));
2159 -
2160 -//#endregion
2161 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/delete-confirmation-dialog.tsx
2162 - var context = (0, react.createContext)(null);
2163 - var DeleteConfirmationProvider = ({ children }) => {
2164 - const [dialogProps, setDialogProps] = (0, react.useState)(null);
2165 - const openDialog = (props) => {
2166 - setDialogProps(props);
2167 - };
2168 - const closeDialog = () => {
2169 - setDialogProps(null);
2170 - };
2171 - return /* @__PURE__ */ react.createElement(context.Provider, { value: {
2172 - openDialog,
2173 - closeDialog,
2174 - dialogProps
2175 - } }, children, !!dialogProps && /* @__PURE__ */ react.createElement(DeleteClassDialog, { ...dialogProps }));
2176 - };
2177 - var DeleteClassDialog = ({ label, id }) => {
2178 - const { closeDialog } = useDeleteConfirmation();
2179 - const { data: { total, content } } = useCssClassUsageByID(id);
2180 - const handleConfirm = () => {
2181 - closeDialog();
2182 - deleteClass(id);
2183 - };
2184 - const text = total && content.length ? (0, _wordpress_i18n.__)("Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.", "elementor").replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, _wordpress_i18n.__)("Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.", "elementor");
2185 - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog, {
2186 - open: true,
2187 - onClose: closeDialog
2188 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Title, null, (0, _wordpress_i18n.__)("Delete this class?", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Content, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.ContentText, null, (0, _wordpress_i18n.__)("Deleting", "elementor"), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2189 - variant: "subtitle2",
2190 - component: "span"
2191 - }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Actions, {
2192 - onClose: closeDialog,
2193 - onConfirm: handleConfirm
2194 - }));
2195 - };
2196 - var useDeleteConfirmation = () => {
2197 - const contextValue = (0, react.useContext)(context);
2198 - if (!contextValue) throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
2199 - return contextValue;
2200 - };
2201 -
2202 -//#endregion
2203 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/sortable.tsx
2204 - var SortableProvider = (props) => /* @__PURE__ */ react.createElement(_elementor_ui.UnstableSortableProvider, {
2205 - restrictAxis: true,
2206 - variant: "static",
2207 - dragPlaceholderStyle: { visibility: "hidden" },
2208 - ...props
2209 - });
2210 - var SortableTrigger = (props) => /* @__PURE__ */ react.createElement(StyledSortableTrigger, {
2211 - ...props,
2212 - role: "button",
2213 - className: "class-item-sortable-trigger",
2214 - "aria-label": "sort"
2215 - }, /* @__PURE__ */ react.createElement(_elementor_icons.GripVerticalIcon, { fontSize: "tiny" }));
2216 - var SortableItem = ({ children, id, style, ...props }) => {
2217 - return /* @__PURE__ */ react.createElement(_elementor_ui.UnstableSortableItem, {
2218 - ...props,
2219 - id,
2220 - render: ({ itemProps, isDragged, triggerProps, itemStyle, triggerStyle, dropIndicationStyle, showDropIndication, isDragOverlay, isDragPlaceholder }) => {
2221 - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2222 - ...itemProps,
2223 - style: {
2224 - ...itemStyle,
2225 - ...!isDragOverlay ? style : null
2226 - },
2227 - component: "li",
2228 - role: "listitem",
2229 - sx: { backgroundColor: isDragOverlay ? "background.paper" : void 0 }
2230 - }, children({
2231 - itemProps,
2232 - isDragged,
2233 - triggerProps,
2234 - itemStyle,
2235 - triggerStyle,
2236 - isDragPlaceholder
2237 - }), showDropIndication && /* @__PURE__ */ react.createElement(SortableItemIndicator, { style: dropIndicationStyle }));
2238 - }
2239 - });
2240 - };
2241 - var StyledSortableTrigger = (0, _elementor_ui.styled)("div")(({ theme }) => ({
2242 - position: "absolute",
2243 - left: 0,
2244 - top: "50%",
2245 - transform: `translate( -${theme.spacing(1.5)}, -50% )`,
2246 - color: theme.palette.action.active
2247 - }));
2248 - var SortableItemIndicator = (0, _elementor_ui.styled)(_elementor_ui.Box)`
1 +/*! For license information please see editor-global-classes.js.LICENSE.txt */
2 +!function(){"use strict";var e={"./packages/node_modules/@tanstack/react-virtual/dist/esm/index.js":function(e,t,s){s.r(t),s.d(t,{Virtualizer:function(){return r.Virtualizer},approxEqual:function(){return r.approxEqual},debounce:function(){return r.debounce},defaultKeyExtractor:function(){return r.defaultKeyExtractor},defaultRangeExtractor:function(){return r.defaultRangeExtractor},elementScroll:function(){return r.elementScroll},measureElement:function(){return r.measureElement},memo:function(){return r.memo},notUndefined:function(){return r.notUndefined},observeElementOffset:function(){return r.observeElementOffset},observeElementRect:function(){return r.observeElementRect},observeWindowOffset:function(){return r.observeWindowOffset},observeWindowRect:function(){return r.observeWindowRect},useVirtualizer:function(){return useVirtualizer},useWindowVirtualizer:function(){return useWindowVirtualizer},windowScroll:function(){return r.windowScroll}});var a=s("react"),n=s("react-dom"),r=s("./packages/node_modules/@tanstack/virtual-core/dist/esm/index.js");const o="undefined"!=typeof document?a.useLayoutEffect:a.useEffect;function useVirtualizerBase({useFlushSync:e=!0,...t}){const s=a.useReducer(()=>({}),{})[1],l={...t,onChange:(a,r)=>{var o;e&&r?(0,n.flushSync)(s):s(),null==(o=t.onChange)||o.call(t,a,r)}},[i]=a.useState(()=>new r.Virtualizer(l));return i.setOptions(l),o(()=>i._didMount(),[]),o(()=>i._willUpdate()),i}function useVirtualizer(e){return useVirtualizerBase({observeElementRect:r.observeElementRect,observeElementOffset:r.observeElementOffset,scrollToFn:r.elementScroll,...e})}function useWindowVirtualizer(e){return useVirtualizerBase({getScrollElement:()=>"undefined"!=typeof document?window:null,observeElementRect:r.observeWindowRect,observeElementOffset:r.observeWindowOffset,scrollToFn:r.windowScroll,initialOffset:()=>"undefined"!=typeof document?window.scrollY:0,...e})}},"./packages/node_modules/@tanstack/virtual-core/dist/esm/index.js":function(e,t,s){s.r(t),s.d(t,{Virtualizer:function(){return Virtualizer},approxEqual:function(){return a.approxEqual},debounce:function(){return a.debounce},defaultKeyExtractor:function(){return defaultKeyExtractor},defaultRangeExtractor:function(){return defaultRangeExtractor},elementScroll:function(){return elementScroll},measureElement:function(){return measureElement},memo:function(){return a.memo},notUndefined:function(){return a.notUndefined},observeElementOffset:function(){return observeElementOffset},observeElementRect:function(){return observeElementRect},observeWindowOffset:function(){return observeWindowOffset},observeWindowRect:function(){return observeWindowRect},windowScroll:function(){return windowScroll}});var a=s("./packages/node_modules/@tanstack/virtual-core/dist/esm/utils.js");const getRect=e=>{const{offsetWidth:t,offsetHeight:s}=e;return{width:t,height:s}},defaultKeyExtractor=e=>e,defaultRangeExtractor=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),a=[];for(let e=t;e<=s;e++)a.push(e);return a},observeElementRect=(e,t)=>{const s=e.scrollElement;if(!s)return;const a=e.targetWindow;if(!a)return;const handler=e=>{const{width:s,height:a}=e;t({width:Math.round(s),height:Math.round(a)})};if(handler(getRect(s)),!a.ResizeObserver)return()=>{};const n=new a.ResizeObserver(t=>{const run=()=>{const e=t[0];if(null==e?void 0:e.borderBoxSize){const t=e.borderBoxSize[0];if(t)return void handler({width:t.inlineSize,height:t.blockSize})}handler(getRect(s))};e.options.useAnimationFrameWithResizeObserver?requestAnimationFrame(run):run()});return n.observe(s,{box:"border-box"}),()=>{n.unobserve(s)}},n={passive:!0},observeWindowRect=(e,t)=>{const s=e.scrollElement;if(!s)return;const handler=()=>{t({width:s.innerWidth,height:s.innerHeight})};return handler(),s.addEventListener("resize",handler,n),()=>{s.removeEventListener("resize",handler)}},r="undefined"==typeof window||"onscrollend"in window,observeElementOffset=(e,t)=>{const s=e.scrollElement;if(!s)return;const o=e.targetWindow;if(!o)return;let l=0;const i=e.options.useScrollendEvent&&r?()=>{}:(0,a.debounce)(o,()=>{t(l,!1)},e.options.isScrollingResetDelay),createHandler=a=>()=>{const{horizontal:n,isRtl:r}=e.options;l=n?s.scrollLeft*(r?-1:1):s.scrollTop,i(),t(l,a)},c=createHandler(!0),d=createHandler(!1);s.addEventListener("scroll",c,n);const u=e.options.useScrollendEvent&&r;return u&&s.addEventListener("scrollend",d,n),()=>{s.removeEventListener("scroll",c),u&&s.removeEventListener("scrollend",d)}},observeWindowOffset=(e,t)=>{const s=e.scrollElement;if(!s)return;const o=e.targetWindow;if(!o)return;let l=0;const i=e.options.useScrollendEvent&&r?()=>{}:(0,a.debounce)(o,()=>{t(l,!1)},e.options.isScrollingResetDelay),createHandler=a=>()=>{l=s[e.options.horizontal?"scrollX":"scrollY"],i(),t(l,a)},c=createHandler(!0),d=createHandler(!1);s.addEventListener("scroll",c,n);const u=e.options.useScrollendEvent&&r;return u&&s.addEventListener("scrollend",d,n),()=>{s.removeEventListener("scroll",c),u&&s.removeEventListener("scrollend",d)}},measureElement=(e,t,s)=>{if(null==t?void 0:t.borderBoxSize){const e=t.borderBoxSize[0];if(e){return Math.round(e[s.options.horizontal?"inlineSize":"blockSize"])}}return e[s.options.horizontal?"offsetWidth":"offsetHeight"]},windowScroll=(e,{adjustments:t=0,behavior:s},a)=>{var n,r;const o=e+t;null==(r=null==(n=a.scrollElement)?void 0:n.scrollTo)||r.call(n,{[a.options.horizontal?"left":"top"]:o,behavior:s})},elementScroll=(e,{adjustments:t=0,behavior:s},a)=>{var n,r;const o=e+t;null==(r=null==(n=a.scrollElement)?void 0:n.scrollTo)||r.call(n,{[a.options.horizontal?"left":"top"]:o,behavior:s})};class Virtualizer{constructor(e){this.unsubs=[],this.scrollElement=null,this.targetWindow=null,this.isScrolling=!1,this.scrollState=null,this.measurementsCache=[],this.itemSizeCache=new Map,this.laneAssignments=new Map,this.pendingMeasuredCacheIndexes=[],this.prevLanes=void 0,this.lanesChangedFlag=!1,this.lanesSettling=!1,this.scrollRect=null,this.scrollOffset=null,this.scrollDirection=null,this.scrollAdjustments=0,this.elementsCache=new Map,this.now=()=>{var e,t,s;return(null==(s=null==(t=null==(e=this.targetWindow)?void 0:e.performance)?void 0:t.now)?void 0:s.call(t))??Date.now()},this.observer=(()=>{let e=null;const get=()=>e||(this.targetWindow&&this.targetWindow.ResizeObserver?e=new this.targetWindow.ResizeObserver(e=>{e.forEach(e=>{const run=()=>{const t=e.target,s=this.indexFromElement(t);t.isConnected?this.shouldMeasureDuringScroll(s)&&this.resizeItem(s,this.options.measureElement(t,e,this)):this.observer.unobserve(t)};this.options.useAnimationFrameWithResizeObserver?requestAnimationFrame(run):run()})}):null);return{disconnect:()=>{var t;null==(t=get())||t.disconnect(),e=null},observe:e=>{var t;return null==(t=get())?void 0:t.observe(e,{box:"border-box"})},unobserve:e=>{var t;return null==(t=get())?void 0:t.unobserve(e)}}})(),this.range=null,this.setOptions=e=>{Object.entries(e).forEach(([t,s])=>{void 0===s&&delete e[t]}),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:defaultKeyExtractor,rangeExtractor:defaultRangeExtractor,onChange:()=>{},measureElement:measureElement,initialRect:{width:0,height:0},scrollMargin:0,gap:0,indexAttribute:"data-index",initialMeasurementsCache:[],lanes:1,isScrollingResetDelay:150,enabled:!0,isRtl:!1,useScrollendEvent:!1,useAnimationFrameWithResizeObserver:!1,laneAssignmentMode:"estimate",...e}},this.notify=e=>{var t,s;null==(s=(t=this.options).onChange)||s.call(t,this,e)},this.maybeNotify=(0,a.memo)(()=>(this.calculateRange(),[this.isScrolling,this.range?this.range.startIndex:null,this.range?this.range.endIndex:null]),e=>{this.notify(e)},{key:"maybeNotify",debug:()=>this.options.debug,initialDeps:[this.isScrolling,this.range?this.range.startIndex:null,this.range?this.range.endIndex:null]}),this.cleanup=()=>{this.unsubs.filter(Boolean).forEach(e=>e()),this.unsubs=[],this.observer.disconnect(),null!=this.rafId&&this.targetWindow&&(this.targetWindow.cancelAnimationFrame(this.rafId),this.rafId=null),this.scrollState=null,this.scrollElement=null,this.targetWindow=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{var e;const t=this.options.enabled?this.options.getScrollElement():null;if(this.scrollElement!==t){if(this.cleanup(),!t)return void this.maybeNotify();this.scrollElement=t,this.scrollElement&&"ownerDocument"in this.scrollElement?this.targetWindow=this.scrollElement.ownerDocument.defaultView:this.targetWindow=(null==(e=this.scrollElement)?void 0:e.window)??null,this.elementsCache.forEach(e=>{this.observer.observe(e)}),this.unsubs.push(this.options.observeElementRect(this,e=>{this.scrollRect=e,this.maybeNotify()})),this.unsubs.push(this.options.observeElementOffset(this,(e,t)=>{this.scrollAdjustments=0,this.scrollDirection=t?this.getScrollOffset()<e?"forward":"backward":null,this.scrollOffset=e,this.isScrolling=t,this.scrollState&&this.scheduleScrollReconcile(),this.maybeNotify()})),this._scrollToOffset(this.getScrollOffset(),{adjustments:void 0,behavior:void 0})}},this.rafId=null,this.getSize=()=>this.options.enabled?(this.scrollRect=this.scrollRect??this.options.initialRect,this.scrollRect[this.options.horizontal?"width":"height"]):(this.scrollRect=null,0),this.getScrollOffset=()=>this.options.enabled?(this.scrollOffset=this.scrollOffset??("function"==typeof this.options.initialOffset?this.options.initialOffset():this.options.initialOffset),this.scrollOffset):(this.scrollOffset=null,0),this.getFurthestMeasurement=(e,t)=>{const s=new Map,a=new Map;for(let n=t-1;n>=0;n--){const t=e[n];if(s.has(t.lane))continue;const r=a.get(t.lane);if(null==r||t.end>r.end?a.set(t.lane,t):t.end<r.end&&s.set(t.lane,!0),s.size===this.options.lanes)break}return a.size===this.options.lanes?Array.from(a.values()).sort((e,t)=>e.end===t.end?e.index-t.index:e.end-t.end)[0]:void 0},this.getMeasurementOptions=(0,a.memo)(()=>[this.options.count,this.options.paddingStart,this.options.scrollMargin,this.options.getItemKey,this.options.enabled,this.options.lanes,this.options.laneAssignmentMode],(e,t,s,a,n,r,o)=>(void 0!==this.prevLanes&&this.prevLanes!==r&&(this.lanesChangedFlag=!0),this.prevLanes=r,this.pendingMeasuredCacheIndexes=[],{count:e,paddingStart:t,scrollMargin:s,getItemKey:a,enabled:n,lanes:r,laneAssignmentMode:o}),{key:!1}),this.getMeasurements=(0,a.memo)(()=>[this.getMeasurementOptions(),this.itemSizeCache],({count:e,paddingStart:t,scrollMargin:s,getItemKey:a,enabled:n,lanes:r,laneAssignmentMode:o},l)=>{if(!n)return this.measurementsCache=[],this.itemSizeCache.clear(),this.laneAssignments.clear(),[];if(this.laneAssignments.size>e)for(const t of this.laneAssignments.keys())t>=e&&this.laneAssignments.delete(t);this.lanesChangedFlag&&(this.lanesChangedFlag=!1,this.lanesSettling=!0,this.measurementsCache=[],this.itemSizeCache.clear(),this.laneAssignments.clear(),this.pendingMeasuredCacheIndexes=[]),0!==this.measurementsCache.length||this.lanesSettling||(this.measurementsCache=this.options.initialMeasurementsCache,this.measurementsCache.forEach(e=>{this.itemSizeCache.set(e.key,e.size)}));const i=this.lanesSettling?0:this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[],this.lanesSettling&&this.measurementsCache.length===e&&(this.lanesSettling=!1);const c=this.measurementsCache.slice(0,i),d=new Array(r).fill(void 0);for(let e=0;e<i;e++){const t=c[e];t&&(d[t.lane]=e)}for(let n=i;n<e;n++){const e=a(n),r=this.laneAssignments.get(n);let i,u;const p="estimate"===o||l.has(e);if(void 0!==r&&this.options.lanes>1){i=r;const e=d[i],a=void 0!==e?c[e]:void 0;u=a?a.end+this.options.gap:t+s}else{const e=1===this.options.lanes?c[n-1]:this.getFurthestMeasurement(c,n);u=e?e.end+this.options.gap:t+s,i=e?e.lane:n%this.options.lanes,this.options.lanes>1&&p&&this.laneAssignments.set(n,i)}const g=l.get(e),m="number"==typeof g?g:this.options.estimateSize(n),h=u+m;c[n]={index:n,start:u,size:m,end:h,key:e,lane:i},d[i]=n}return this.measurementsCache=c,c},{key:"getMeasurements",debug:()=>this.options.debug}),this.calculateRange=(0,a.memo)(()=>[this.getMeasurements(),this.getSize(),this.getScrollOffset(),this.options.lanes],(e,t,s,a)=>this.range=e.length>0&&t>0?function calculateRange({measurements:e,outerSize:t,scrollOffset:s,lanes:a}){const n=e.length-1,getOffset=t=>e[t].start;if(e.length<=a)return{startIndex:0,endIndex:n};let r=findNearestBinarySearch(0,n,getOffset,s),o=r;if(1===a)for(;o<n&&e[o].end<s+t;)o++;else if(a>1){const l=Array(a).fill(0);for(;o<n&&l.some(e=>e<s+t);){const t=e[o];l[t.lane]=t.end,o++}const i=Array(a).fill(s+t);for(;r>=0&&i.some(e=>e>=s);){const t=e[r];i[t.lane]=t.start,r--}r=Math.max(0,r-r%a),o=Math.min(n,o+(a-1-o%a))}return{startIndex:r,endIndex:o}}({measurements:e,outerSize:t,scrollOffset:s,lanes:a}):null,{key:"calculateRange",debug:()=>this.options.debug}),this.getVirtualIndexes=(0,a.memo)(()=>{let e=null,t=null;const s=this.calculateRange();return s&&(e=s.startIndex,t=s.endIndex),this.maybeNotify.updateDeps([this.isScrolling,e,t]),[this.options.rangeExtractor,this.options.overscan,this.options.count,e,t]},(e,t,s,a,n)=>null===a||null===n?[]:e({startIndex:a,endIndex:n,overscan:t,count:s}),{key:"getVirtualIndexes",debug:()=>this.options.debug}),this.indexFromElement=e=>{const t=this.options.indexAttribute,s=e.getAttribute(t);return s?parseInt(s,10):(console.warn(`Missing attribute name '${t}={index}' on measured element.`),-1)},this.shouldMeasureDuringScroll=e=>{var t;if(!this.scrollState||"smooth"!==this.scrollState.behavior)return!0;const s=this.scrollState.index??(null==(t=this.getVirtualItemForOffset(this.scrollState.lastTargetOffset))?void 0:t.index);if(void 0!==s&&this.range){const t=Math.max(this.options.overscan,Math.ceil((this.range.endIndex-this.range.startIndex)/2)),a=Math.max(0,s-t),n=Math.min(this.options.count-1,s+t);return e>=a&&e<=n}return!0},this.measureElement=e=>{if(!e)return void this.elementsCache.forEach((e,t)=>{e.isConnected||(this.observer.unobserve(e),this.elementsCache.delete(t))});const t=this.indexFromElement(e),s=this.options.getItemKey(t),a=this.elementsCache.get(s);a!==e&&(a&&this.observer.unobserve(a),this.observer.observe(e),this.elementsCache.set(s,e)),this.isScrolling&&!this.scrollState||!this.shouldMeasureDuringScroll(t)||this.resizeItem(t,this.options.measureElement(e,void 0,this))},this.resizeItem=(e,t)=>{var s;const a=this.measurementsCache[e];if(!a)return;const n=t-(this.itemSizeCache.get(a.key)??a.size);0!==n&&("smooth"!==(null==(s=this.scrollState)?void 0:s.behavior)&&(void 0!==this.shouldAdjustScrollPositionOnItemSizeChange?this.shouldAdjustScrollPositionOnItemSizeChange(a,n,this):a.start<this.getScrollOffset()+this.scrollAdjustments)&&(this.options.debug&&console.info("correction",n),this._scrollToOffset(this.getScrollOffset(),{adjustments:this.scrollAdjustments+=n,behavior:void 0})),this.pendingMeasuredCacheIndexes.push(a.index),this.itemSizeCache=new Map(this.itemSizeCache.set(a.key,t)),this.notify(!1))},this.getVirtualItems=(0,a.memo)(()=>[this.getVirtualIndexes(),this.getMeasurements()],(e,t)=>{const s=[];for(let a=0,n=e.length;a<n;a++){const n=t[e[a]];s.push(n)}return s},{key:"getVirtualItems",debug:()=>this.options.debug}),this.getVirtualItemForOffset=e=>{const t=this.getMeasurements();if(0!==t.length)return(0,a.notUndefined)(t[findNearestBinarySearch(0,t.length-1,e=>(0,a.notUndefined)(t[e]).start,e)])},this.getMaxScrollOffset=()=>{if(!this.scrollElement)return 0;if("scrollHeight"in this.scrollElement)return this.options.horizontal?this.scrollElement.scrollWidth-this.scrollElement.clientWidth:this.scrollElement.scrollHeight-this.scrollElement.clientHeight;{const e=this.scrollElement.document.documentElement;return this.options.horizontal?e.scrollWidth-this.scrollElement.innerWidth:e.scrollHeight-this.scrollElement.innerHeight}},this.getOffsetForAlignment=(e,t,s=0)=>{if(!this.scrollElement)return 0;const a=this.getSize(),n=this.getScrollOffset();"auto"===t&&(t=e>=n+a?"end":"start"),"center"===t?e+=(s-a)/2:"end"===t&&(e-=a);const r=this.getMaxScrollOffset();return Math.max(Math.min(r,e),0)},this.getOffsetForIndex=(e,t="auto")=>{e=Math.max(0,Math.min(e,this.options.count-1));const s=this.getSize(),a=this.getScrollOffset(),n=this.measurementsCache[e];if(!n)return;if("auto"===t)if(n.end>=a+s-this.options.scrollPaddingEnd)t="end";else{if(!(n.start<=a+this.options.scrollPaddingStart))return[a,t];t="start"}if("end"===t&&e===this.options.count-1)return[this.getMaxScrollOffset(),t];const r="end"===t?n.end+this.options.scrollPaddingEnd:n.start-this.options.scrollPaddingStart;return[this.getOffsetForAlignment(r,t,n.size),t]},this.scrollToOffset=(e,{align:t="start",behavior:s="auto"}={})=>{const a=this.getOffsetForAlignment(e,t),n=this.now();this.scrollState={index:null,align:t,behavior:s,startedAt:n,lastTargetOffset:a,stableFrames:0},this._scrollToOffset(a,{adjustments:void 0,behavior:s}),this.scheduleScrollReconcile()},this.scrollToIndex=(e,{align:t="auto",behavior:s="auto"}={})=>{e=Math.max(0,Math.min(e,this.options.count-1));const a=this.getOffsetForIndex(e,t);if(!a)return;const[n,r]=a,o=this.now();this.scrollState={index:e,align:r,behavior:s,startedAt:o,lastTargetOffset:n,stableFrames:0},this._scrollToOffset(n,{adjustments:void 0,behavior:s}),this.scheduleScrollReconcile()},this.scrollBy=(e,{behavior:t="auto"}={})=>{const s=this.getScrollOffset()+e,a=this.now();this.scrollState={index:null,align:"start",behavior:t,startedAt:a,lastTargetOffset:s,stableFrames:0},this._scrollToOffset(s,{adjustments:void 0,behavior:t}),this.scheduleScrollReconcile()},this.getTotalSize=()=>{var e;const t=this.getMeasurements();let s;if(0===t.length)s=this.options.paddingStart;else if(1===this.options.lanes)s=(null==(e=t[t.length-1])?void 0:e.end)??0;else{const e=Array(this.options.lanes).fill(null);let a=t.length-1;for(;a>=0&&e.some(e=>null===e);){const s=t[a];null===e[s.lane]&&(e[s.lane]=s.end),a--}s=Math.max(...e.filter(e=>null!==e))}return Math.max(s-this.options.scrollMargin+this.options.paddingEnd,0)},this._scrollToOffset=(e,{adjustments:t,behavior:s})=>{this.options.scrollToFn(e,{behavior:s,adjustments:t},this)},this.measure=()=>{this.itemSizeCache=new Map,this.laneAssignments=new Map,this.notify(!1)},this.setOptions(e)}scheduleScrollReconcile(){this.targetWindow?null==this.rafId&&(this.rafId=this.targetWindow.requestAnimationFrame(()=>{this.rafId=null,this.reconcileScroll()})):this.scrollState=null}reconcileScroll(){if(!this.scrollState)return;if(!this.scrollElement)return;if(this.now()-this.scrollState.startedAt>5e3)return void(this.scrollState=null);const e=null!=this.scrollState.index?this.getOffsetForIndex(this.scrollState.index,this.scrollState.align):void 0,t=e?e[0]:this.scrollState.lastTargetOffset,s=t!==this.scrollState.lastTargetOffset;if(!s&&(0,a.approxEqual)(t,this.getScrollOffset())){if(this.scrollState.stableFrames++,this.scrollState.stableFrames>=1)return void(this.scrollState=null)}else this.scrollState.stableFrames=0,s&&(this.scrollState.lastTargetOffset=t,this.scrollState.behavior="auto",this._scrollToOffset(t,{adjustments:void 0,behavior:"auto"}));this.scheduleScrollReconcile()}}const findNearestBinarySearch=(e,t,s,a)=>{for(;e<=t;){const n=(e+t)/2|0,r=s(n);if(r<a)e=n+1;else{if(!(r>a))return n;t=n-1}}return e>0?e-1:0}},"./packages/node_modules/@tanstack/virtual-core/dist/esm/utils.js":function(e,t,s){function memo(e,t,s){let a,n=s.initialDeps??[],r=!0;function memoizedFunction(){var o,l,i;let c;s.key&&(null==(o=s.debug)?void 0:o.call(s))&&(c=Date.now());const d=e();if(!(d.length!==n.length||d.some((e,t)=>n[t]!==e)))return a;let u;if(n=d,s.key&&(null==(l=s.debug)?void 0:l.call(s))&&(u=Date.now()),a=t(...d),s.key&&(null==(i=s.debug)?void 0:i.call(s))){const e=Math.round(100*(Date.now()-c))/100,t=Math.round(100*(Date.now()-u))/100,a=t/16,pad=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info(`%c⏱ ${pad(t,5)} /${pad(e,5)} ms`,`\n font-size: .6rem;\n font-weight: bold;\n color: hsl(${Math.max(0,Math.min(120-120*a,120))}deg 100% 31%);`,null==s?void 0:s.key)}return!(null==s?void 0:s.onChange)||r&&s.skipInitialOnChange||s.onChange(a),r=!1,a}return memoizedFunction.updateDeps=e=>{n=e},memoizedFunction}function notUndefined(e,t){if(void 0===e)throw new Error("Unexpected undefined"+(t?`: ${t}`:""));return e}s.r(t),s.d(t,{approxEqual:function(){return approxEqual},debounce:function(){return debounce},memo:function(){return memo},notUndefined:function(){return notUndefined}});const approxEqual=(e,t)=>Math.abs(e-t)<1.01,debounce=(e,t,s)=>{let a;return function(...n){e.clearTimeout(a),a=e.setTimeout(()=>t.apply(this,n),s)}}},"./packages/packages/core/editor-global-classes/service/css-class-usage-service.ts":function(e,t,s){s.r(t),s.d(t,{fetchCssClassUsage:function(){return fetchCssClassUsage}});var a=s("./packages/packages/core/editor-global-classes/src/api.ts"),n=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/utils.ts");const fetchCssClassUsage=async()=>{const e=await a.apiClient.usage();return(0,n.transformData)(e?.data?.data||{})}},"./packages/packages/core/editor-global-classes/src/api.ts":function(e,t,s){s.r(t),s.d(t,{API_ERROR_CODES:function(){return d},apiClient:function(){return c}});var a=s("@elementor/http-client");const n="/global-classes",r="elementor/v1",o=`${n}/usage`,l=`${n}/post`,i=`${n}/styles`;function saveGlobalClasses(e,t){return(0,a.httpService)().put(`${r}${n}`,t,{params:{context:e}})}const c={usage:()=>(0,a.httpService)().get(`${r}${o}`),all:(e="preview")=>(0,a.httpService)().get(`${r}${n}`,{params:{context:e}}),getStylesForPost:(e,t="preview")=>(0,a.httpService)().get(`${r}${l}`,{params:{context:t,post_id:e}}),getStylesByIds:(e,t="preview")=>(0,a.httpService)().get(`${r}${i}`,{params:{context:t,ids:e.join(",")}}),publish:e=>saveGlobalClasses("frontend",e),saveDraft:e=>saveGlobalClasses("preview",e)},d={DUPLICATED_LABEL:"DUPLICATED_LABEL"}},"./packages/packages/core/editor-global-classes/src/capabilities.ts":function(e,t,s){s.r(t),s.d(t,{UPDATE_CLASS_CAPABILITY_KEY:function(){return n},getCapabilities:function(){return getCapabilities}});var a=s("@elementor/editor-v1-adapters");const n="elementor_global_classes_update_class",getCapabilities=()=>{if((0,a.isExperimentActive)("global_classes_should_enforce_capabilities"))return{update:n,create:n,delete:n,updateProps:n}}},"./packages/packages/core/editor-global-classes/src/components/class-manager/class-item.tsx":function(e,t,s){s.r(t),s.d(t,{ClassItem:function(){return ClassItem}});var a=s("react"),n=s("@elementor/editor-styles-repository"),r=s("@elementor/editor-ui"),o=s("@elementor/icons"),l=s("@elementor/ui"),i=s("@wordpress/i18n"),c=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/index.ts"),d=s("./packages/packages/core/editor-global-classes/src/components/class-manager/delete-confirmation-dialog.tsx"),u=s("./packages/packages/core/editor-global-classes/src/components/class-manager/sortable.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const ClassItem=({id:e,label:t,renameClass:s,selected:n,disabled:m,sortableTriggerProps:h,showSortIndicator:f,syncToV3:b,onToggleSync:y})=>{const v=(0,a.useRef)(null),{ref:k,openEditMode:_,isEditing:C,error:E,getProps:x}=(0,r.useEditable)({value:t,onSubmit:s,validation:validateLabel}),[S,w]=(0,a.useState)(""),{openDialog:I}=(0,d.useDeleteConfirmation)(),D=(0,l.usePopupState)({variant:"popover",disableAutoFocus:!0}),P=(S===e||n||D.isOpen)&&!m;return a.createElement(a.Fragment,null,a.createElement(l.Stack,{p:0},a.createElement(r.WarningInfotip,{open:Boolean(E),text:E??"",placement:"bottom",width:v.current?.getBoundingClientRect().width,offset:[0,-15]},a.createElement(p,{ref:v,dense:!0,disableGutters:!0,showSortIndicator:f,showActions:P||C,shape:"rounded",onDoubleClick:_,selected:P,disabled:m,focusVisibleClassName:"visible-class-item"},a.createElement(u.SortableTrigger,h),a.createElement(g,{isActive:C,isError:!!E},C?a.createElement(r.EditableField,_extends({ref:k,as:l.Typography,variant:"caption"},x())):a.createElement(r.EllipsisWithTooltip,{title:t,as:l.Typography,variant:"caption"})),a.createElement(l.Box,{className:"class-item-locator"},a.createElement(c.CssClassUsageTrigger,{id:e,onClick:w})),a.createElement(l.Tooltip,{placement:"top",className:"class-item-more-actions",title:(0,i.__)("More actions","elementor")},a.createElement(l.IconButton,_extends({size:"tiny"},(0,l.bindTrigger)(D),{"aria-label":"More actions"}),a.createElement(o.DotsVerticalIcon,{fontSize:"tiny"})))))),a.createElement(l.Menu,_extends({},(0,l.bindMenu)(D),{anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"}}),a.createElement(r.MenuListItem,{sx:{minWidth:"160px"},onClick:()=>{D.close(),_()}},a.createElement(l.Typography,{variant:"caption",sx:{color:"text.primary"}},(0,i.__)("Rename","elementor"))),y&&a.createElement(r.MenuListItem,{onClick:()=>{D.close(),y(e,!b)}},a.createElement(l.Stack,{direction:"row",alignItems:"center",gap:1},b?a.createElement(o.RefreshOffIcon,{fontSize:"tiny"}):a.createElement(o.RefreshIcon,{fontSize:"tiny"}),a.createElement(l.Typography,{variant:"caption",sx:{color:"text.primary"}},b?(0,i.__)("Stop syncing to Global Fonts","elementor"):(0,i.__)("Sync to Global Fonts","elementor")))),a.createElement(r.MenuListItem,{onClick:()=>{D.close(),I({id:e,label:t})}},a.createElement(l.Typography,{variant:"caption",sx:{color:"error.light"}},(0,i.__)("Delete","elementor")))))},p=(0,l.styled)(l.ListItemButton,{shouldForwardProp:e=>!["showActions","showSortIndicator"].includes(e)})(({showActions:e,showSortIndicator:t})=>`\n min-height: 36px;\n\n &.visible-class-item {\n box-shadow: none !important;\n }\n\n .class-item-locator {\n visibility: hidden;\n }\n\n .class-item-sortable-trigger {\n visibility: ${t&&e?"visible":"hidden"};\n }\n\n &:hover:not(:disabled) {\n .class-item-locator {\n visibility: visible;\n }\n\n .class-item-sortable-trigger {\n visibility: ${t?"visible":"hidden"};\n }\n }\n `),g=(0,l.styled)(l.Box,{shouldForwardProp:e=>!["isActive","isError"].includes(e)})(({theme:e,isActive:t,isError:s})=>({display:"flex",width:"100%",flexGrow:1,borderRadius:e.spacing(.5),border:getIndicatorBorder({isActive:t,isError:s,theme:e}),padding:`0 ${e.spacing(1)}`,marginLeft:t?e.spacing(1):0,minWidth:0})),getIndicatorBorder=({isActive:e,isError:t,theme:s})=>t?`2px solid ${s.palette.error.main}`:e?`2px solid ${s.palette.secondary.main}`:"none",validateLabel=e=>{const t=(0,n.validateStyleLabel)(e,"rename");return t.isValid?null:t.errorMessage}},"./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-button.tsx":function(e,t,s){s.r(t),s.d(t,{ClassManagerButton:function(){return ClassManagerButton}});var a=s("react"),n=s("@elementor/editor-documents"),r=s("@elementor/editor-styles-repository"),o=s("@elementor/editor-ui"),l=s("@elementor/editor-v1-adapters"),i=s("@elementor/ui"),c=s("@wordpress/i18n"),d=s("./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts"),u=s("./packages/packages/core/editor-global-classes/src/hooks/use-prefetch-css-class-usage.ts"),p=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),g=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx"),m=s("./packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx");const trackGlobalClassesButton=()=>{(0,p.trackGlobalClasses)({event:"classManagerOpened",source:"style-panel"})},ClassManagerButton=()=>{const e=(0,n.__useActiveDocument)(),{open:t}=(0,g.usePanelActions)(),{save:s}=(0,n.__useActiveDocumentActions)(),{open:p,close:h,isOpen:f}=(0,o.useDialog)(),{prefetchClassesUsage:b}=(0,u.usePrefetchCssClassUsage)(),{userCan:y}=(0,r.useUserStylesCapability)();if(!y(d.globalClassesStylesProvider.getKey()).update)return null;const toggleClassesManagerPanel=()=>{(0,l.isExperimentActive)("e_editor_design_system_panel")?window.dispatchEvent(new CustomEvent("elementor/toggle-design-system",{detail:{tab:"classes"}})):t()};return a.createElement(a.Fragment,null,a.createElement(i.Tooltip,{title:(0,c.__)("Class Manager","elementor"),placement:"top"},a.createElement(i.IconButton,{size:"tiny",onClick:()=>{e?.isDirty?p():(toggleClassesManagerPanel(),trackGlobalClassesButton(),b())},sx:{marginInlineEnd:-.75}},a.createElement(m.FlippedColorSwatchIcon,{fontSize:"tiny"}))),f&&a.createElement(o.SaveChangesDialog,null,a.createElement(o.SaveChangesDialog.Title,null,(0,c.__)("You have unsaved changes","elementor")),a.createElement(o.SaveChangesDialog.Content,null,a.createElement(o.SaveChangesDialog.ContentText,{sx:{mb:2}},(0,c.__)("To open the Class Manager, save your page first. You can't continue without saving.","elementor"))),a.createElement(o.SaveChangesDialog.Actions,{actions:{cancel:{label:(0,c.__)("Stay here","elementor"),action:h},confirm:{label:(0,c.__)("Save & Continue","elementor"),action:async()=>{await s(),h(),toggleClassesManagerPanel(),trackGlobalClassesButton(),b()}}}})))}},"./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-introduction.tsx":function(e,t,s){s.r(t),s.d(t,{ClassManagerIntroduction:function(){return ClassManagerIntroduction}});var a=s("react"),n=s("@elementor/editor-current-user"),r=s("@elementor/editor-ui"),o=s("@elementor/ui"),l=s("@wordpress/i18n");const ClassManagerIntroduction=()=>{const[e,t]=(0,n.useSuppressedMessage)("global-class-manager"),[s,i]=(0,a.useState)(!e);return a.createElement(r.IntroductionModal,{open:s,title:(0,l.__)("Class Manager","elementor"),handleClose:e=>{e||t(),i(!1)}},a.createElement(o.Image,{sx:{width:"100%",aspectRatio:"16 / 9"},src:"https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",alt:""}),a.createElement(IntroductionContent,null))},IntroductionContent=()=>a.createElement(o.Box,{p:3},a.createElement(o.Typography,{variant:"body2"},(0,l.__)("The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.","elementor")),a.createElement("br",null),a.createElement(o.Typography,{variant:"body2"},(0,l.__)("Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.","elementor")))},"./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx":function(e,t,s){s.r(t),s.d(t,{ClassManagerPanel:function(){return ClassManagerPanel},ClassManagerPanelEmbedded:function(){return ClassManagerPanelEmbedded},panel:function(){return A},usePanelActions:function(){return L}});var a=s("react"),n=s("@elementor/editor-current-user"),r=s("@elementor/editor-documents"),o=s("@elementor/editor-panels"),l=s("@elementor/editor-ui"),i=s("@elementor/editor-v1-adapters"),c=s("@elementor/icons"),d=s("@elementor/query"),u=s("@elementor/store"),p=s("@elementor/ui"),g=s("@wordpress/i18n"),m=s("./packages/packages/core/editor-global-classes/src/hooks/use-classes-order.ts"),h=s("./packages/packages/core/editor-global-classes/src/hooks/use-dirty-state.ts"),f=s("./packages/packages/core/editor-global-classes/src/hooks/use-filters.ts"),b=s("./packages/packages/core/editor-global-classes/src/save-global-classes.tsx"),y=s("./packages/packages/core/editor-global-classes/src/store.ts"),v=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),k=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/active-filters.tsx"),_=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/css-class-filter.tsx"),C=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/search/class-manager-search.tsx"),E=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),x=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-introduction.tsx"),S=s("./packages/packages/core/editor-global-classes/src/components/class-manager/delete-class.ts"),w=s("./packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx"),I=s("./packages/packages/core/editor-global-classes/src/components/class-manager/global-classes-list.tsx"),D=s("./packages/packages/core/editor-global-classes/src/components/class-manager/panel-interactions.ts"),P=s("./packages/packages/core/editor-global-classes/src/components/class-manager/start-sync-to-v3-modal.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const O="stop-sync-class",T="global-classes-manager";function ClassManagerPanelEmbedded({onRequestClose:e,onExposeCloseAttempt:t}){return a.createElement(ClassManagerPanelRoot,{embedded:!0,onRequestClose:e,onExposeCloseAttempt:t})}function ClassManagerPanel(){return a.createElement(ClassManagerPanelRoot,null)}const{panel:A,usePanelActions:L}=(0,o.__createPanel)({id:T,component:ClassManagerPanel,allowedEditModes:["edit",T],onOpen:()=>{(0,i.changeEditMode)(T),(0,D.blockPanelInteractions)()},onClose:async()=>{(0,i.changeEditMode)("edit"),await(0,r.reloadCurrentDocument)(),(0,D.unblockPanelInteractions)()},isOpenPreviousElement:!0});function ClassManagerPanelRoot({embedded:e=!1,onRequestClose:t,onExposeCloseAttempt:s}={}){const r=(0,h.useDirtyState)(),{close:i}=L(),c=(0,a.useMemo)(()=>e?t??(async()=>{}):i,[e,t,i]),{open:d,close:m,isOpen:f}=(0,l.useDialog)(),[b,S]=(0,a.useState)(null),[T,A]=(0,a.useState)(null),[M]=(0,n.useSuppressedMessage)(O),[z,F]=(0,a.useState)(null),{mutateAsync:R,isPending:U}=usePublish(),G=(0,a.useCallback)(()=>{r?d():c()},[r,d,c]);(0,a.useEffect)(()=>{if(e&&s)return s(()=>G()),()=>s(null)},[e,s,G]),(0,a.useEffect)(()=>{if(e)return(0,D.blockPanelInteractions)(),()=>{(0,D.unblockPanelInteractions)()}},[e]);const j=(0,a.useCallback)(e=>{(0,u.__dispatch)(y.slice.actions.update({style:{id:e,sync_to_v3:!1}})),(0,v.trackGlobalClasses)({event:"classSyncToV3",classId:e,action:"unsync"}),S(null)},[]),B=(0,a.useCallback)(e=>{(0,u.__dispatch)(y.slice.actions.update({style:{id:e,sync_to_v3:!0}})),(0,v.trackGlobalClasses)({event:"classSyncToV3",classId:e,action:"sync"}),A(null)},[]),V=(0,a.useCallback)(e=>{M?j(e):S(e)},[M,j]);usePreventUnload();const W=a.createElement(p.Box,{px:2,pb:1},a.createElement(p.Stack,{direction:"row",alignItems:"center",justifyContent:"space-between",gap:.5,sx:{pb:.5}},a.createElement(p.Box,{sx:e?{flexGrow:1,minWidth:0}:{flexGrow:1}},a.createElement(C.ClassManagerSearch,null)),a.createElement(_.CssClassFilter,null),e&&a.createElement(TotalCssClassCounter,null)),a.createElement(k.ActiveFilters,null)),$=a.createElement(p.Box,{ref:F,px:2,sx:{flexGrow:1,overflowY:"auto",...e?{minHeight:0}:{}}},a.createElement(I.GlobalClassesList,{disabled:U,scrollElement:z,onStopSyncRequest:V,onStartSyncRequest:e=>A(e)})),q=a.createElement(o.PanelFooter,null,a.createElement(p.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",onClick:R,disabled:!r,loading:U},(0,g.__)("Save changes","elementor"))),N=a.createElement(a.Fragment,null,T&&a.createElement(P.StartSyncToV3Modal,{externalOpen:!0,classId:T,onExternalClose:()=>A(null),onConfirm:()=>B(T)}),b&&a.createElement(StopSyncConfirmationDialog,{open:!0,onClose:()=>S(null),onConfirm:()=>j(b)}),f&&a.createElement(l.SaveChangesDialog,null,a.createElement(p.DialogHeader,{onClose:m,logo:!1},a.createElement(l.SaveChangesDialog.Title,null,(0,g.__)("You have unsaved changes","elementor"))),a.createElement(l.SaveChangesDialog.Content,null,a.createElement(l.SaveChangesDialog.ContentText,null,(0,g.__)("You have unsaved changes in the Class Manager.","elementor")),a.createElement(l.SaveChangesDialog.ContentText,null,(0,g.__)("To avoid losing your updates, save your changes before leaving.","elementor"))),a.createElement(l.SaveChangesDialog.Actions,{actions:{discard:{label:(0,g.__)("Discard","elementor"),action:()=>{(0,u.__dispatch)(y.slice.actions.resetToInitialState({context:"frontend"})),m()}},confirm:{label:(0,g.__)("Save & Continue","elementor"),action:async()=>{await R(),m(),c()}}}}))),H=e?a.createElement(p.Stack,{direction:"column",sx:{height:"100%",width:"100%",flex:1,minHeight:0,overflow:"hidden"}},W,a.createElement(p.Divider,null),$,q):a.createElement(o.Panel,null,a.createElement(o.PanelHeader,null,a.createElement(p.Stack,{p:1,pl:2,width:"100%",direction:"row",alignItems:"center"},a.createElement(p.Stack,{width:"100%",direction:"row",gap:1},a.createElement(o.PanelHeaderTitle,{sx:{display:"flex",alignItems:"center",gap:.5}},a.createElement(w.FlippedColorSwatchIcon,{fontSize:"inherit"}),(0,g.__)("Class Manager","elementor")),a.createElement(TotalCssClassCounter,null)),a.createElement(ClassPanelCloseButton,{disabled:U,onClose:()=>{r?d():i()}}))),a.createElement(o.PanelBody,{sx:{display:"flex",flexDirection:"column",height:"100%"}},W,a.createElement(p.Divider,null),$),q),Y=a.createElement(a.Fragment,null,a.createElement(p.ErrorBoundary,{fallback:a.createElement(ErrorBoundaryFallback,null)},a.createElement(E.SearchAndFilterProvider,null,H)),a.createElement(x.ClassManagerIntroduction,null),N);return e?Y:a.createElement(l.ThemeProvider,null,Y)}const ClassPanelCloseButton=({onClose:e,sx:t,...s})=>a.createElement(p.IconButton,_extends({size:"small",color:"secondary",onClick:e,"aria-label":"Close",sx:{marginLeft:"auto",...t}},s),a.createElement(c.XIcon,{fontSize:"small"})),ErrorBoundaryFallback=()=>a.createElement(p.Box,{role:"alert",sx:{minHeight:"100%",p:2}},a.createElement(p.Alert,{severity:"error",sx:{mb:2,maxWidth:400,textAlign:"center"}},a.createElement("strong",null,(0,g.__)("Something went wrong","elementor")))),usePreventUnload=()=>{const e=(0,h.useDirtyState)();(0,a.useEffect)(()=>{const handleBeforeUnload=t=>{e&&t.preventDefault()};return window.addEventListener("beforeunload",handleBeforeUnload),()=>{window.removeEventListener("beforeunload",handleBeforeUnload)}},[e])},usePublish=()=>(0,d.useMutation)({mutationFn:()=>(0,b.saveGlobalClasses)({context:"frontend"}),onSuccess:async()=>{(0,r.setDocumentModifiedStatus)(!1),(0,S.hasDeletedItems)()&&await(0,S.onDelete)()}}),TotalCssClassCounter=()=>{const e=(0,f.useFilters)(),t=(0,m.useClassesOrder)();return a.createElement(p.Chip,{size:"small",label:e?`${e.length} / ${t?.length}`:t?.length})},StopSyncConfirmationDialog=({open:e,onClose:t,onConfirm:s})=>{const[,r]=(0,n.useSuppressedMessage)(O);return a.createElement(l.ConfirmationDialog,{open:e,onClose:t},a.createElement(l.ConfirmationDialog.Title,{icon:w.FlippedColorSwatchIcon,iconColor:"primary"},(0,g.__)("Un-sync typography class","elementor")),a.createElement(l.ConfirmationDialog.Content,null,a.createElement(l.ConfirmationDialog.ContentText,null,(0,g.__)("You're about to stop syncing a typography class to Global Fonts.","elementor")),a.createElement(l.ConfirmationDialog.ContentText,{sx:{mt:1}},(0,g.__)("Note that if it's being used anywhere, the affected elements will inherit the default typography.","elementor"))),a.createElement(l.ConfirmationDialog.Actions,{onClose:t,onConfirm:s,cancelLabel:(0,g.__)("Cancel","elementor"),confirmLabel:(0,g.__)("Got it","elementor"),color:"primary",onSuppressMessage:r,suppressLabel:(0,g.__)("Don't show again","elementor")}))}},"./packages/packages/core/editor-global-classes/src/components/class-manager/delete-class.ts":function(e,t,s){s.r(t),s.d(t,{deleteClass:function(){return deleteClass},hasDeletedItems:function(){return hasDeletedItems},onDelete:function(){return onDelete}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/store.ts"),r=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");let o=!1;const deleteClass=e=>{(0,r.trackGlobalClasses)({event:"classDeleted",classId:e,runAction:()=>{(0,a.__dispatch)(n.slice.actions.delete(e)),o=!0}})},onDelete=async()=>{o=!1},hasDeletedItems=()=>o},"./packages/packages/core/editor-global-classes/src/components/class-manager/delete-confirmation-dialog.tsx":function(e,t,s){s.r(t),s.d(t,{DeleteConfirmationProvider:function(){return DeleteConfirmationProvider},useDeleteConfirmation:function(){return useDeleteConfirmation}});var a=s("react"),n=s("@elementor/editor-ui"),r=s("@elementor/ui"),o=s("@wordpress/i18n"),l=s("./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage-by-id.ts"),i=s("./packages/packages/core/editor-global-classes/src/components/class-manager/delete-class.ts");const c=(0,a.createContext)(null),DeleteConfirmationProvider=({children:e})=>{const[t,s]=(0,a.useState)(null);return a.createElement(c.Provider,{value:{openDialog:e=>{s(e)},closeDialog:()=>{s(null)},dialogProps:t}},e,!!t&&a.createElement(DeleteClassDialog,t))},DeleteClassDialog=({label:e,id:t})=>{const{closeDialog:s}=useDeleteConfirmation(),{data:{total:c,content:d}}=(0,l.useCssClassUsageByID)(t),u=c&&d.length?(0,o.__)("Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.","elementor").replace("%1",c.toString()).replace("%2",d.length.toString()):(0,o.__)("Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.","elementor");return a.createElement(n.ConfirmationDialog,{open:!0,onClose:s},a.createElement(n.ConfirmationDialog.Title,null,(0,o.__)("Delete this class?","elementor")),a.createElement(n.ConfirmationDialog.Content,null,a.createElement(n.ConfirmationDialog.ContentText,null,(0,o.__)("Deleting","elementor"),a.createElement(r.Typography,{variant:"subtitle2",component:"span"}," ",e," "),u)),a.createElement(n.ConfirmationDialog.Actions,{onClose:s,onConfirm:()=>{s(),(0,i.deleteClass)(t)}}))},useDeleteConfirmation=()=>{const e=(0,a.useContext)(c);if(!e)throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");return e}},"./packages/packages/core/editor-global-classes/src/components/class-manager/duplicate-label-dialog.tsx":function(e,t,s){s.r(t),s.d(t,{DuplicateLabelDialog:function(){return DuplicateLabelDialog}});var a=s("react"),n=s("@elementor/editor-ui"),r=s("@elementor/icons"),o=s("@elementor/ui"),l=s("@wordpress/i18n");const i="DUP_",DuplicateLabelDialog=({modifiedLabels:e,onApprove:t})=>a.createElement(a.Fragment,null,a.createElement(o.DialogHeader,{logo:!1},a.createElement(o.Box,{display:"flex",alignItems:"center",gap:1},a.createElement(o.Icon,{color:"secondary"},a.createElement(r.InfoCircleFilledIcon,{fontSize:"medium"})),a.createElement(o.Typography,{variant:"subtitle1"},(0,l.__)("We've published your page and updated class names.","elementor")))),a.createElement(o.DialogContent,null,a.createElement(o.Stack,{spacing:2,direction:"column"},a.createElement(o.Typography,{variant:"body2"},(0,l.__)("Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix","elementor"),a.createElement("strong",null," ",i)),a.createElement(o.Box,null,a.createElement(o.Box,{sx:{width:"100%",display:"flex",gap:2,alignItems:"flex-start"}},a.createElement(o.Typography,{variant:"subtitle2",sx:{fontWeight:"bold",flex:1,flexShrink:1,flexGrow:1,minWidth:0}},(0,l.__)("Before","elementor")),a.createElement(o.Typography,{variant:"subtitle2",sx:{minWidth:"200px",fontWeight:"bold",flexShrink:0,flexGrow:0,width:"200px",maxWidth:"200px"}},(0,l.__)("After","elementor"))),a.createElement(o.Divider,{sx:{mt:.5,mb:.5}}),a.createElement(o.Stack,{direction:"column",gap:.5,sx:{pb:2}},Object.values(e).map(({original:e,modified:t},s)=>a.createElement(o.Box,{key:s,sx:{width:"100%",display:"flex",gap:2,alignItems:"flex-start"}},a.createElement(o.Box,{sx:{flex:1,flexShrink:1,flexGrow:1,minWidth:0}},a.createElement(n.EllipsisWithTooltip,{title:e},a.createElement(o.Typography,{variant:"body2",sx:{color:"text.secondary"}},e))),a.createElement(o.Box,{sx:{minWidth:"200px",flexShrink:0,flexGrow:0,width:"200px",maxWidth:"200px"}},a.createElement(n.EllipsisWithTooltip,{title:t},a.createElement(o.Typography,{variant:"body2",sx:{color:"text.primary"}},t)))))),a.createElement(o.Box,null,a.createElement(o.Alert,{severity:"info",size:"small",color:"secondary"},a.createElement("strong",null,(0,l.__)("Your designs and classes are safe.","elementor")),(0,l.__)("Only the prefixes were added. Find them in Class Manager by searching","elementor"),a.createElement("strong",null,i)))))),a.createElement(o.DialogActions,null,a.createElement(o.Button,{color:"secondary",variant:"text",onClick:()=>{localStorage.setItem("elementor-global-classes-search",i),t?.(),(0,n.closeDialog)()}},(0,l.__)("Go to Class Manager","elementor")),a.createElement(o.Button,{color:"secondary",variant:"contained",onClick:n.closeDialog},(0,l.__)("Done","elementor"))))},"./packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx":function(e,t,s){s.r(t),s.d(t,{FlippedColorSwatchIcon:function(){return FlippedColorSwatchIcon}});var a=s("react"),n=s("@elementor/icons");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const FlippedColorSwatchIcon=({sx:e,...t})=>a.createElement(n.ColorSwatchIcon,_extends({sx:{transform:"rotate(90deg)",...e}},t))},"./packages/packages/core/editor-global-classes/src/components/class-manager/global-classes-list.tsx":function(e,t,s){s.r(t),s.d(t,{GlobalClassesList:function(){return GlobalClassesList}});var a=s("react"),n=s("@elementor/store"),r=s("@elementor/ui"),o=s("./packages/node_modules/@tanstack/react-virtual/dist/esm/index.js"),l=s("./packages/node_modules/@tanstack/virtual-core/dist/esm/index.js"),i=s("@wordpress/i18n"),c=s("./packages/packages/core/editor-global-classes/src/hooks/use-classes-order.ts"),d=s("./packages/packages/core/editor-global-classes/src/hooks/use-filters.ts"),u=s("./packages/packages/core/editor-global-classes/src/hooks/use-ordered-classes.ts"),p=s("./packages/packages/core/editor-global-classes/src/load-existing-classes.ts"),g=s("./packages/packages/core/editor-global-classes/src/store.ts"),m=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),h=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),f=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-item.tsx"),b=s("./packages/packages/core/editor-global-classes/src/components/class-manager/delete-confirmation-dialog.tsx"),y=s("./packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx"),v=s("./packages/packages/core/editor-global-classes/src/components/class-manager/not-found.tsx"),k=s("./packages/packages/core/editor-global-classes/src/components/class-manager/sortable.tsx");const GlobalClassesList=({disabled:e,scrollElement:t,onStopSyncRequest:s,onStartSyncRequest:i})=>{const{search:{debouncedValue:c}}=(0,h.useSearchAndFilters)(),y=(0,u.useOrderedClasses)(),_=(0,n.__useDispatch)(),C=(0,d.useFilters)(),[E,x]=(0,a.useState)(null),[S,w]=(0,a.useState)({}),I=y.find(e=>e.id===E)?.label??"",[D,P]=useReorder(E,x,I??""),O=useFilteredCssClasses(),T=(0,o.useVirtualizer)({count:O.length,getScrollElement:()=>t??null,estimateSize:()=>40,overscan:6,getItemKey:e=>O[e].id,rangeExtractor:e=>{const t=new Set((0,l.defaultRangeExtractor)(e));if(E){const e=O.findIndex(e=>e.id===E);e>=0&&t.add(e)}return[...t].sort((e,t)=>e-t)}});if((0,a.useEffect)(()=>{const handler=e=>{if("z"===e.key&&(e.ctrlKey||e.metaKey)){if(e.stopImmediatePropagation(),e.preventDefault(),e.shiftKey)return void _(g.slice.actions.redo());_(g.slice.actions.undo())}};return window.addEventListener("keydown",handler,{capture:!0}),()=>window.removeEventListener("keydown",handler)},[_]),!y?.length)return a.createElement(EmptyState,null);const A=(0,v.getNotFoundType)(c,C,O);if(A)return a.createElement(v.NotFound,{notFoundType:A});const L=C?.length||c,M=O.length>1&&!L;return a.createElement(b.DeleteConfirmationProvider,null,a.createElement(r.List,{sx:{position:"relative",display:"block",height:T.getTotalSize(),padding:0}},a.createElement(k.SortableProvider,{value:D,onChange:P,onDragStart:e=>x(e.active.id),onDragEnd:()=>x(null),onDragCancel:()=>x(null),disableDragOverlay:!M},T.getVirtualItems().map(t=>{const n=O[t.index];return a.createElement(k.SortableItem,{key:t.key,id:n.id,style:{position:"absolute",top:t.start,left:0,width:"100%"}},({isDragged:t,isDragPlaceholder:r,triggerProps:o,triggerStyle:l})=>a.createElement(f.ClassItem,{id:n.id,label:n.label,renameClass:async e=>{var t;t=n.id,w(e=>({...e,[t]:!0}));try{(0,m.trackGlobalClasses)({event:"classRenamed",classId:n.id,oldValue:n.label,newValue:e,source:"class-manager"}),await(0,p.loadExistingClasses)([n.id]),_(g.slice.actions.update({style:{id:n.id,label:e}}))}finally{(e=>{w(t=>{const{[e]:s,...a}=t;return a})})(n.id)}},selected:t,disabled:e||r||S[n.id],sortableTriggerProps:{...o,style:l},showSortIndicator:M,syncToV3:n.sync_to_v3,onToggleSync:(e,t)=>{!t&&s?s(e):t&&i?i(e):_(g.slice.actions.update({style:{id:e,sync_to_v3:t}}))}}))}))))},EmptyState=()=>a.createElement(r.Stack,{alignItems:"center",gap:1.5,pt:10,px:.5,maxWidth:"260px",margin:"auto"},a.createElement(y.FlippedColorSwatchIcon,{fontSize:"large"}),a.createElement(_,{variant:"subtitle2",component:"h2",color:"text.secondary"},(0,i.__)("There are no global classes yet.","elementor")),a.createElement(r.Typography,{align:"center",variant:"caption",color:"text.secondary"},(0,i.__)("CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.","elementor"))),_=(0,r.styled)(r.Typography)(({theme:e,variant:t})=>({"&.MuiTypography-root":{...e.typography[t]}})),useReorder=(e,t,s)=>{const a=(0,n.__useDispatch)();return[(0,c.useClassesOrder)(),n=>{a(g.slice.actions.setOrder(n)),e&&((0,m.trackGlobalClasses)({event:"classManagerReorder",classId:e,classTitle:s}),t(null))}]},useFilteredCssClasses=()=>{const e=(0,u.useOrderedClasses)(),{search:{debouncedValue:t}}=(0,h.useSearchAndFilters)(),s=(0,d.useFilters)(),n=(0,a.useMemo)(()=>e.map(e=>({...e,lowerLabel:e.label.toLowerCase()})),[e]),r=(0,a.useMemo)(()=>{const s=t.replace(/[^a-zA-Z0-9_-]/g,"").toLowerCase();return s.length>1?n.filter(e=>e.lowerLabel.includes(s)):e},[t,e,n]);return(0,a.useMemo)(()=>s&&s.length>0?r.filter(e=>s.includes(e.id)):r,[r,s])}},"./packages/packages/core/editor-global-classes/src/components/class-manager/not-found.tsx":function(e,t,s){s.r(t),s.d(t,{NotFound:function(){return NotFound},NotFoundLayout:function(){return NotFoundLayout},getNotFoundType:function(){return getNotFoundType}});var a=s("react"),n=s("@elementor/icons"),r=s("@elementor/ui"),o=s("@wordpress/i18n"),l=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const getNotFoundType=(e,t,s)=>{const a=s.length<=0&&e.length>1,n=t&&0===t.length;return a&&n?"filterAndSearch":a?"search":n?"filter":void 0},i={filterAndSearch:{mainText:(0,o.__)("Sorry, nothing matched.","elementor"),sceneryText:(0,o.__)("Try something else.","elementor"),icon:a.createElement(n.PhotoIcon,{color:"inherit",fontSize:"large"})},search:{mainText:(0,o.__)("Sorry, nothing matched","elementor"),sceneryText:(0,o.__)("Clear your input and try something else.","elementor"),icon:a.createElement(n.PhotoIcon,{color:"inherit",fontSize:"large"})},filter:{mainText:(0,o.__)("Sorry, nothing matched that search.","elementor"),sceneryText:(0,o.__)("Clear the filters and try something else.","elementor"),icon:a.createElement(n.ColorSwatchIcon,{color:"inherit",fontSize:"large"})}},NotFound=({notFoundType:e})=>{const{search:{onClearSearch:t,inputValue:s},filters:{onClearFilter:n}}=(0,l.useSearchAndFilters)();switch(e){case"filter":return a.createElement(NotFoundLayout,_extends({},i.filter,{onClear:n}));case"search":return a.createElement(NotFoundLayout,_extends({},i.search,{searchValue:s,onClear:t}));case"filterAndSearch":return a.createElement(NotFoundLayout,_extends({},i.filterAndSearch,{onClear:()=>{n(),t()}}))}},NotFoundLayout=({onClear:e,searchValue:t,mainText:s,sceneryText:n,icon:l})=>a.createElement(r.Stack,{color:"text.secondary",pt:5,alignItems:"center",gap:1,overflow:"hidden",justifySelf:"center"},l,a.createElement(r.Box,{sx:{width:"100%"}},a.createElement(r.Typography,{align:"center",variant:"subtitle2",color:"inherit"},s),t&&a.createElement(r.Typography,{variant:"subtitle2",color:"inherit",sx:{display:"flex",width:"100%",justifyContent:"center"}},a.createElement("span",null,"“"),a.createElement("span",{style:{maxWidth:"80%",overflow:"hidden",textOverflow:"ellipsis"}},t),a.createElement("span",null,"”."))),a.createElement(r.Typography,{align:"center",variant:"caption",color:"inherit"},n),a.createElement(r.Typography,{align:"center",variant:"caption",color:"inherit"},a.createElement(r.Link,{color:"secondary",variant:"caption",component:"button",onClick:e},(0,o.__)("Clear & try again","elementor"))))},"./packages/packages/core/editor-global-classes/src/components/class-manager/panel-interactions.ts":function(e,t,s){function blockPanelInteractions(){const e=window;e.$e?.components?.get?.("panel")?.blockUserInteractions?.()}function unblockPanelInteractions(){const e=window;e.$e?.components?.get?.("panel")?.unblockUserInteractions?.()}s.r(t),s.d(t,{blockPanelInteractions:function(){return blockPanelInteractions},unblockPanelInteractions:function(){return unblockPanelInteractions}})},"./packages/packages/core/editor-global-classes/src/components/class-manager/sortable.tsx":function(e,t,s){s.r(t),s.d(t,{SortableItem:function(){return SortableItem},SortableProvider:function(){return SortableProvider},SortableTrigger:function(){return SortableTrigger}});var a=s("react"),n=s("@elementor/icons"),r=s("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const SortableProvider=e=>a.createElement(r.UnstableSortableProvider,_extends({restrictAxis:!0,variant:"static",dragPlaceholderStyle:{visibility:"hidden"}},e)),SortableTrigger=e=>a.createElement(o,_extends({},e,{role:"button",className:"class-item-sortable-trigger","aria-label":"sort"}),a.createElement(n.GripVerticalIcon,{fontSize:"tiny"})),SortableItem=({children:e,id:t,style:s,...n})=>a.createElement(r.UnstableSortableItem,_extends({},n,{id:t,render:({itemProps:t,isDragged:n,triggerProps:o,itemStyle:i,triggerStyle:c,dropIndicationStyle:d,showDropIndication:u,isDragOverlay:p,isDragPlaceholder:g})=>a.createElement(r.Box,_extends({},t,{style:{...i,...p?null:s},component:"li",role:"listitem",sx:{backgroundColor:p?"background.paper":void 0}}),e({itemProps:t,isDragged:n,triggerProps:o,itemStyle:i,triggerStyle:c,isDragPlaceholder:g}),u&&a.createElement(l,{style:d}))})),o=(0,r.styled)("div")(({theme:e})=>({position:"absolute",left:0,top:"50%",transform:`translate( -${e.spacing(1.5)}, -50% )`,color:e.palette.action.active})),l=(0,r.styled)(r.Box)`
2249 3 width: 100%;
2250 4 height: 1px;
2251 - background-color: ${({ theme }) => theme.palette.text.primary};
2252 -`;
2253 -
2254 -//#endregion
2255 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/class-item.tsx
2256 - var ClassItem = ({ id, label, renameClass, selected, disabled, sortableTriggerProps, showSortIndicator, syncToV3, onToggleSync }) => {
2257 - const itemRef = (0, react.useRef)(null);
2258 - const { ref: editableRef, openEditMode, isEditing, error, getProps: getEditableProps } = (0, _elementor_editor_ui.useEditable)({
2259 - value: label,
2260 - onSubmit: renameClass,
2261 - validation: validateLabel
2262 - });
2263 - const [selectedCssUsage, setSelectedCssUsage] = (0, react.useState)("");
2264 - const { openDialog } = useDeleteConfirmation();
2265 - const popupState = (0, _elementor_ui.usePopupState)({
2266 - variant: "popover",
2267 - disableAutoFocus: true
2268 - });
2269 - const isSelected = (selectedCssUsage === id || selected || popupState.isOpen) && !disabled;
2270 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { p: 0 }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.WarningInfotip, {
2271 - open: Boolean(error),
2272 - text: error ?? "",
2273 - placement: "bottom",
2274 - width: itemRef.current?.getBoundingClientRect().width,
2275 - offset: [0, -15]
2276 - }, /* @__PURE__ */ react.createElement(StyledListItemButton, {
2277 - ref: itemRef,
2278 - dense: true,
2279 - disableGutters: true,
2280 - showSortIndicator,
2281 - showActions: isSelected || isEditing,
2282 - shape: "rounded",
2283 - onDoubleClick: openEditMode,
2284 - selected: isSelected,
2285 - disabled,
2286 - focusVisibleClassName: "visible-class-item"
2287 - }, /* @__PURE__ */ react.createElement(SortableTrigger, { ...sortableTriggerProps }), /* @__PURE__ */ react.createElement(Indicator, {
2288 - isActive: isEditing,
2289 - isError: !!error
2290 - }, isEditing ? /* @__PURE__ */ react.createElement(_elementor_editor_ui.EditableField, {
2291 - ref: editableRef,
2292 - as: _elementor_ui.Typography,
2293 - variant: "caption",
2294 - ...getEditableProps()
2295 - }) : /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, {
2296 - title: label,
2297 - as: _elementor_ui.Typography,
2298 - variant: "caption"
2299 - })), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { className: "class-item-locator" }, /* @__PURE__ */ react.createElement(CssClassUsageTrigger, {
2300 - id,
2301 - onClick: setSelectedCssUsage
2302 - })), /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
2303 - placement: "top",
2304 - className: "class-item-more-actions",
2305 - title: (0, _wordpress_i18n.__)("More actions", "elementor")
2306 - }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
2307 - size: "tiny",
2308 - ...(0, _elementor_ui.bindTrigger)(popupState),
2309 - "aria-label": "More actions"
2310 - }, /* @__PURE__ */ react.createElement(_elementor_icons.DotsVerticalIcon, { fontSize: "tiny" })))))), /* @__PURE__ */ react.createElement(_elementor_ui.Menu, {
2311 - ...(0, _elementor_ui.bindMenu)(popupState),
2312 - anchorOrigin: {
2313 - vertical: "bottom",
2314 - horizontal: "right"
2315 - },
2316 - transformOrigin: {
2317 - vertical: "top",
2318 - horizontal: "right"
2319 - }
2320 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
2321 - sx: { minWidth: "160px" },
2322 - onClick: () => {
2323 - popupState.close();
2324 - openEditMode();
2325 - }
2326 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2327 - variant: "caption",
2328 - sx: { color: "text.primary" }
2329 - }, (0, _wordpress_i18n.__)("Rename", "elementor"))), onToggleSync && /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { onClick: () => {
2330 - popupState.close();
2331 - onToggleSync(id, !syncToV3);
2332 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2333 - direction: "row",
2334 - alignItems: "center",
2335 - gap: 1
2336 - }, syncToV3 ? /* @__PURE__ */ react.createElement(_elementor_icons.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ react.createElement(_elementor_icons.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2337 - variant: "caption",
2338 - sx: { color: "text.primary" }
2339 - }, syncToV3 ? (0, _wordpress_i18n.__)("Stop syncing to Global Fonts", "elementor") : (0, _wordpress_i18n.__)("Sync to Global Fonts", "elementor")))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { onClick: () => {
2340 - popupState.close();
2341 - openDialog({
2342 - id,
2343 - label
2344 - });
2345 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2346 - variant: "caption",
2347 - sx: { color: "error.light" }
2348 - }, (0, _wordpress_i18n.__)("Delete", "elementor")))));
2349 - };
2350 - var StyledListItemButton = (0, _elementor_ui.styled)(_elementor_ui.ListItemButton, { shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop) })(({ showActions, showSortIndicator }) => `
2351 - min-height: 36px;
2352 -
2353 - &.visible-class-item {
2354 - box-shadow: none !important;
2355 - }
2356 -
2357 - .class-item-locator {
2358 - visibility: hidden;
2359 - }
2360 -
2361 - .class-item-sortable-trigger {
2362 - visibility: ${showSortIndicator && showActions ? "visible" : "hidden"};
2363 - }
2364 -
2365 - &:hover:not(:disabled) {
2366 - .class-item-locator {
2367 - visibility: visible;
2368 - }
2369 -
2370 - .class-item-sortable-trigger {
2371 - visibility: ${showSortIndicator ? "visible" : "hidden"};
2372 - }
2373 - }
2374 - `);
2375 - var Indicator = (0, _elementor_ui.styled)(_elementor_ui.Box, { shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop) })(({ theme, isActive, isError }) => ({
2376 - display: "flex",
2377 - width: "100%",
2378 - flexGrow: 1,
2379 - borderRadius: theme.spacing(.5),
2380 - border: getIndicatorBorder({
2381 - isActive,
2382 - isError,
2383 - theme
2384 - }),
2385 - padding: `0 ${theme.spacing(1)}`,
2386 - marginLeft: isActive ? theme.spacing(1) : 0,
2387 - minWidth: 0
2388 - }));
2389 - var getIndicatorBorder = ({ isActive, isError, theme }) => {
2390 - if (isError) return `2px solid ${theme.palette.error.main}`;
2391 - if (isActive) return `2px solid ${theme.palette.secondary.main}`;
2392 - return "none";
2393 - };
2394 - var validateLabel = (newLabel) => {
2395 - const result = (0, _elementor_editor_styles_repository.validateStyleLabel)(newLabel, "rename");
2396 - if (result.isValid) return null;
2397 - return result.errorMessage;
2398 - };
2399 -
2400 -//#endregion
2401 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/not-found.tsx
2402 - var getNotFoundType = (searchValue, filters, filteredClasses) => {
2403 - const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
2404 - const filterNotFound = filters && filters.length === 0;
2405 - if (searchNotFound && filterNotFound) return "filterAndSearch";
2406 - if (searchNotFound) return "search";
2407 - if (filterNotFound) return "filter";
2408 - };
2409 - var notFound = {
2410 - filterAndSearch: {
2411 - mainText: (0, _wordpress_i18n.__)("Sorry, nothing matched.", "elementor"),
2412 - sceneryText: (0, _wordpress_i18n.__)("Try something else.", "elementor"),
2413 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.PhotoIcon, {
2414 - color: "inherit",
2415 - fontSize: "large"
2416 - })
2417 - },
2418 - search: {
2419 - mainText: (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor"),
2420 - sceneryText: (0, _wordpress_i18n.__)("Clear your input and try something else.", "elementor"),
2421 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.PhotoIcon, {
2422 - color: "inherit",
2423 - fontSize: "large"
2424 - })
2425 - },
2426 - filter: {
2427 - mainText: (0, _wordpress_i18n.__)("Sorry, nothing matched that search.", "elementor"),
2428 - sceneryText: (0, _wordpress_i18n.__)("Clear the filters and try something else.", "elementor"),
2429 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, {
2430 - color: "inherit",
2431 - fontSize: "large"
2432 - })
2433 - }
2434 - };
2435 - var NotFound = ({ notFoundType }) => {
2436 - const { search: { onClearSearch, inputValue }, filters: { onClearFilter } } = useSearchAndFilters();
2437 - switch (notFoundType) {
2438 - case "filter": return /* @__PURE__ */ react.createElement(NotFoundLayout, {
2439 - ...notFound.filter,
2440 - onClear: onClearFilter
2441 - });
2442 - case "search": return /* @__PURE__ */ react.createElement(NotFoundLayout, {
2443 - ...notFound.search,
2444 - searchValue: inputValue,
2445 - onClear: onClearSearch
2446 - });
2447 - case "filterAndSearch": return /* @__PURE__ */ react.createElement(NotFoundLayout, {
2448 - ...notFound.filterAndSearch,
2449 - onClear: () => {
2450 - onClearFilter();
2451 - onClearSearch();
2452 - }
2453 - });
2454 - }
2455 - };
2456 - var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2457 - color: "text.secondary",
2458 - pt: 5,
2459 - alignItems: "center",
2460 - gap: 1,
2461 - overflow: "hidden",
2462 - justifySelf: "center"
2463 - }, icon, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { width: "100%" } }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2464 - align: "center",
2465 - variant: "subtitle2",
2466 - color: "inherit"
2467 - }, mainText), searchValue && /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2468 - variant: "subtitle2",
2469 - color: "inherit",
2470 - sx: {
2471 - display: "flex",
2472 - width: "100%",
2473 - justifyContent: "center"
2474 - }
2475 - }, /* @__PURE__ */ react.createElement("span", null, "“"), /* @__PURE__ */ react.createElement("span", { style: {
2476 - maxWidth: "80%",
2477 - overflow: "hidden",
2478 - textOverflow: "ellipsis"
2479 - } }, searchValue), /* @__PURE__ */ react.createElement("span", null, "”."))), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2480 - align: "center",
2481 - variant: "caption",
2482 - color: "inherit"
2483 - }, sceneryText), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2484 - align: "center",
2485 - variant: "caption",
2486 - color: "inherit"
2487 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
2488 - color: "secondary",
2489 - variant: "caption",
2490 - component: "button",
2491 - onClick: onClear
2492 - }, (0, _wordpress_i18n.__)("Clear & try again", "elementor"))));
2493 -
2494 -//#endregion
2495 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/global-classes-list.tsx
2496 - var ROW_HEIGHT = 40;
2497 - var OVERSCAN = 6;
2498 - var GlobalClassesList = ({ disabled, scrollElement, onStopSyncRequest, onStartSyncRequest }) => {
2499 - const { search: { debouncedValue: searchValue } } = useSearchAndFilters();
2500 - const cssClasses = useOrderedClasses();
2501 - const dispatch = (0, _elementor_store.__useDispatch)();
2502 - const filters = useFilters();
2503 - const [draggedItemId, setDraggedItemId] = (0, react.useState)(null);
2504 - const [loading, setLoading] = (0, react.useState)({});
2505 - const addLoadingClass = (classId) => setLoading((prev) => ({
2506 - ...prev,
2507 - [classId]: true
2508 - }));
2509 - const removeLoadingClass = (classId) => setLoading((prev) => {
2510 - const { [classId]: _, ...rest } = prev;
2511 - return rest;
2512 - });
2513 - const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
2514 - const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
2515 - const filteredCssClasses = useFilteredCssClasses();
2516 - const virtualizer = useVirtualizer({
2517 - count: filteredCssClasses.length,
2518 - getScrollElement: () => scrollElement ?? null,
2519 - estimateSize: () => ROW_HEIGHT,
2520 - overscan: OVERSCAN,
2521 - getItemKey: (index) => filteredCssClasses[index].id,
2522 - rangeExtractor: (range) => {
2523 - const indices = new Set(defaultRangeExtractor(range));
2524 - if (draggedItemId) {
2525 - const draggedItemIndex = filteredCssClasses.findIndex((cssClass) => cssClass.id === draggedItemId);
2526 - if (draggedItemIndex >= 0) indices.add(draggedItemIndex);
2527 - }
2528 - return [...indices].sort((a, b) => a - b);
2529 - }
2530 - });
2531 - (0, react.useEffect)(() => {
2532 - const handler = (event) => {
2533 - if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
2534 - event.stopImmediatePropagation();
2535 - event.preventDefault();
2536 - if (event.shiftKey) {
2537 - dispatch(slice.actions.redo());
2538 - return;
2539 - }
2540 - dispatch(slice.actions.undo());
2541 - }
2542 - };
2543 - window.addEventListener("keydown", handler, { capture: true });
2544 - return () => window.removeEventListener("keydown", handler);
2545 - }, [dispatch]);
2546 - if (!cssClasses?.length) return /* @__PURE__ */ react.createElement(EmptyState, null);
2547 - const notFoundType = getNotFoundType(searchValue, filters, filteredCssClasses);
2548 - if (notFoundType) return /* @__PURE__ */ react.createElement(NotFound, { notFoundType });
2549 - const isFiltersApplied = filters?.length || searchValue;
2550 - const allowSorting = filteredCssClasses.length > 1 && !isFiltersApplied;
2551 - return /* @__PURE__ */ react.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.List, { sx: {
2552 - position: "relative",
2553 - display: "block",
2554 - height: virtualizer.getTotalSize(),
2555 - padding: 0
2556 - } }, /* @__PURE__ */ react.createElement(SortableProvider, {
2557 - value: classesOrder,
2558 - onChange: reorderClasses,
2559 - onDragStart: (event) => setDraggedItemId(event.active.id),
2560 - onDragEnd: () => setDraggedItemId(null),
2561 - onDragCancel: () => setDraggedItemId(null),
2562 - disableDragOverlay: !allowSorting
2563 - }, virtualizer.getVirtualItems().map((virtualRow) => {
2564 - const cssClass = filteredCssClasses[virtualRow.index];
2565 - return /* @__PURE__ */ react.createElement(SortableItem, {
2566 - key: virtualRow.key,
2567 - id: cssClass.id,
2568 - style: {
2569 - position: "absolute",
2570 - top: virtualRow.start,
2571 - left: 0,
2572 - width: "100%"
2573 - }
2574 - }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ react.createElement(ClassItem, {
2575 - id: cssClass.id,
2576 - label: cssClass.label,
2577 - renameClass: async (newLabel) => {
2578 - addLoadingClass(cssClass.id);
2579 - try {
2580 - trackGlobalClasses({
2581 - event: "classRenamed",
2582 - classId: cssClass.id,
2583 - oldValue: cssClass.label,
2584 - newValue: newLabel,
2585 - source: "class-manager"
2586 - });
2587 - await loadExistingClasses([cssClass.id]);
2588 - dispatch(slice.actions.update({ style: {
2589 - id: cssClass.id,
2590 - label: newLabel
2591 - } }));
2592 - } finally {
2593 - removeLoadingClass(cssClass.id);
2594 - }
2595 - },
2596 - selected: isDragged,
2597 - disabled: disabled || isDragPlaceholder || loading[cssClass.id],
2598 - sortableTriggerProps: {
2599 - ...triggerProps,
2600 - style: triggerStyle
2601 - },
2602 - showSortIndicator: allowSorting,
2603 - syncToV3: cssClass.sync_to_v3,
2604 - onToggleSync: (id, newValue) => {
2605 - if (!newValue && onStopSyncRequest) onStopSyncRequest(id);
2606 - else if (newValue && onStartSyncRequest) onStartSyncRequest(id);
2607 - else dispatch(slice.actions.update({ style: {
2608 - id,
2609 - sync_to_v3: newValue
2610 - } }));
2611 - }
2612 - }));
2613 - }))));
2614 - };
2615 - var EmptyState = () => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2616 - alignItems: "center",
2617 - gap: 1.5,
2618 - pt: 10,
2619 - px: .5,
2620 - maxWidth: "260px",
2621 - margin: "auto"
2622 - }, /* @__PURE__ */ react.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(StyledHeader, {
2623 - variant: "subtitle2",
2624 - component: "h2",
2625 - color: "text.secondary"
2626 - }, (0, _wordpress_i18n.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2627 - align: "center",
2628 - variant: "caption",
2629 - color: "text.secondary"
2630 - }, (0, _wordpress_i18n.__)("CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.", "elementor")));
2631 - var StyledHeader = (0, _elementor_ui.styled)(_elementor_ui.Typography)(({ theme, variant }) => ({ "&.MuiTypography-root": { ...theme.typography[variant] } }));
2632 - var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
2633 - const dispatch = (0, _elementor_store.__useDispatch)();
2634 - const order = useClassesOrder();
2635 - const reorder = (newIds) => {
2636 - dispatch(slice.actions.setOrder(newIds));
2637 - if (draggedItemId) {
2638 - trackGlobalClasses({
2639 - event: "classManagerReorder",
2640 - classId: draggedItemId,
2641 - classTitle: draggedItemLabel
2642 - });
2643 - setDraggedItemId(null);
2644 - }
2645 - };
2646 - return [order, reorder];
2647 - };
2648 - var useFilteredCssClasses = () => {
2649 - const cssClasses = useOrderedClasses();
2650 - const { search: { debouncedValue: searchValue } } = useSearchAndFilters();
2651 - const filters = useFilters();
2652 - const lowercaseLabels = (0, react.useMemo)(() => cssClasses.map((cssClass) => ({
2653 - ...cssClass,
2654 - lowerLabel: cssClass.label.toLowerCase()
2655 - })), [cssClasses]);
2656 - const filteredClasses = (0, react.useMemo)(() => {
2657 - const normalizedSearch = searchValue.replace(/[^a-zA-Z0-9_-]/g, "").toLowerCase();
2658 - if (normalizedSearch.length > 1) return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(normalizedSearch));
2659 - return cssClasses;
2660 - }, [
2661 - searchValue,
2662 - cssClasses,
2663 - lowercaseLabels
2664 - ]);
2665 - return (0, react.useMemo)(() => {
2666 - if (filters && filters.length > 0) return filteredClasses.filter((cssClass) => filters.includes(cssClass.id));
2667 - return filteredClasses;
2668 - }, [filteredClasses, filters]);
2669 - };
2670 -
2671 -//#endregion
2672 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/panel-interactions.ts
2673 - function blockPanelInteractions() {
2674 - window.$e?.components?.get?.("panel")?.blockUserInteractions?.();
2675 - }
2676 - function unblockPanelInteractions() {
2677 - window.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
2678 - }
2679 -
2680 -//#endregion
2681 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/start-sync-to-v3-modal.tsx
2682 - var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
2683 - var StartSyncToV3Modal = ({ externalOpen, classId, onExternalClose, onConfirm } = {}) => {
2684 - const [shouldShowAgain, setShouldShowAgain] = (0, react.useState)(true);
2685 - const hasTrackedExposure = (0, react.useRef)(false);
2686 - (0, react.useEffect)(() => {
2687 - if (externalOpen && classId && !hasTrackedExposure.current) {
2688 - hasTrackedExposure.current = true;
2689 - trackGlobalClasses({
2690 - event: "classSyncToV3PopupShown",
2691 - classId
2692 - });
2693 - }
2694 - if (!externalOpen) hasTrackedExposure.current = false;
2695 - }, [externalOpen, classId]);
2696 - const handleClose = () => {
2697 - if (classId) trackGlobalClasses({
2698 - event: "classSyncToV3PopupClick",
2699 - classId,
2700 - action: "cancel"
2701 - });
2702 - onExternalClose?.();
2703 - };
2704 - const handleConfirm = () => {
2705 - if (classId) trackGlobalClasses({
2706 - event: "classSyncToV3PopupClick",
2707 - classId,
2708 - action: "sync"
2709 - });
2710 - onConfirm?.();
2711 - onExternalClose?.();
2712 - };
2713 - return /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, {
2714 - open: !!externalOpen,
2715 - onClose: handleClose,
2716 - maxWidth: "sm",
2717 - fullWidth: true
2718 - }, /* @__PURE__ */ react.createElement(_elementor_ui.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2719 - component: "img",
2720 - src: IMAGE_URL,
2721 - alt: "",
2722 - sx: {
2723 - width: "100%",
2724 - display: "block"
2725 - }
2726 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
2727 - px: 3,
2728 - pt: 4,
2729 - pb: 1
2730 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "h6" }, (0, _wordpress_i18n.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2731 - variant: "body2",
2732 - color: "secondary",
2733 - sx: {
2734 - mb: 2,
2735 - pt: 1
2736 - }
2737 - }, (0, _wordpress_i18n.__)("Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.", "elementor")))), /* @__PURE__ */ react.createElement(_elementor_ui.DialogActions, { sx: {
2738 - justifyContent: "space-between",
2739 - px: 3,
2740 - pb: 2
2741 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.FormControlLabel, {
2742 - control: /* @__PURE__ */ react.createElement(_elementor_ui.Checkbox, {
2743 - checked: !shouldShowAgain,
2744 - onChange: (e) => setShouldShowAgain(!e.target.checked)
2745 - }),
2746 - label: /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
2747 - variant: "body2",
2748 - color: "secondary"
2749 - }, (0, _wordpress_i18n.__)("Don't show again", "elementor"))
2750 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
2751 - display: "flex",
2752 - gap: 1
2753 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
2754 - onClick: handleClose,
2755 - color: "secondary",
2756 - size: "small"
2757 - }, (0, _wordpress_i18n.__)("Cancel", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
2758 - onClick: handleConfirm,
2759 - variant: "contained",
2760 - size: "small"
2761 - }, (0, _wordpress_i18n.__)("Sync to Global Fonts", "elementor")))));
2762 - };
2763 -
2764 -//#endregion
2765 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx
2766 - var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
2767 - function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt, isActive }) {
2768 - return /* @__PURE__ */ react.createElement(ClassManagerPanelContent, {
2769 - onRequestClose,
2770 - onExposeCloseAttempt,
2771 - isActive
2772 - });
2773 - }
2774 - function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt, isActive = true }) {
2775 - const isDirty = useDirtyState();
2776 - const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, _elementor_editor_ui.useDialog)();
2777 - const [stopSyncConfirmation, setStopSyncConfirmation] = (0, react.useState)(null);
2778 - const [startSyncConfirmation, setStartSyncConfirmation] = (0, react.useState)(null);
2779 - const [isStopSyncSuppressed] = (0, _elementor_editor_current_user.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
2780 - const [scrollElement, setScrollElement] = (0, react.useState)(null);
2781 - const { mutateAsync: publish, isPending: isPublishing } = usePublish();
2782 - const resetAndClosePanel = () => {
2783 - (0, _elementor_store.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
2784 - closeSaveChangesDialog();
2785 - };
2786 - const handleClosePanel = (0, react.useCallback)(() => {
2787 - if (isDirty) {
2788 - openSaveChangesDialog();
2789 - return;
2790 - }
2791 - onRequestClose();
2792 - }, [
2793 - isDirty,
2794 - openSaveChangesDialog,
2795 - onRequestClose
2796 - ]);
2797 - (0, react.useEffect)(() => {
2798 - if (!onExposeCloseAttempt) return;
2799 - onExposeCloseAttempt(() => handleClosePanel());
2800 - return () => onExposeCloseAttempt(null);
2801 - }, [onExposeCloseAttempt, handleClosePanel]);
2802 - (0, react.useEffect)(() => {
2803 - blockPanelInteractions();
2804 - return () => {
2805 - unblockPanelInteractions();
2806 - };
2807 - }, []);
2808 - const handleStopSync = (0, react.useCallback)(async (classId) => {
2809 - await loadExistingClasses([classId]);
2810 - (0, _elementor_store.__dispatch)(slice.actions.update({ style: {
2811 - id: classId,
2812 - sync_to_v3: false
2813 - } }));
2814 - trackGlobalClasses({
2815 - event: "classSyncToV3",
2816 - classId,
2817 - action: "unsync"
2818 - });
2819 - setStopSyncConfirmation(null);
2820 - }, []);
2821 - const handleStartSync = (0, react.useCallback)(async (classId) => {
2822 - await loadExistingClasses([classId]);
2823 - (0, _elementor_store.__dispatch)(slice.actions.update({ style: {
2824 - id: classId,
2825 - sync_to_v3: true
2826 - } }));
2827 - trackGlobalClasses({
2828 - event: "classSyncToV3",
2829 - classId,
2830 - action: "sync"
2831 - });
2832 - setStartSyncConfirmation(null);
2833 - }, []);
2834 - const handleStopSyncRequest = (0, react.useCallback)((classId) => {
2835 - if (!isStopSyncSuppressed) setStopSyncConfirmation(classId);
2836 - else handleStopSync(classId);
2837 - }, [isStopSyncSuppressed, handleStopSync]);
2838 - usePreventUnload();
2839 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.ErrorBoundary, { fallback: /* @__PURE__ */ react.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ react.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2840 - direction: "column",
2841 - sx: {
2842 - height: "100%",
2843 - width: "100%",
2844 - flex: 1,
2845 - minHeight: 0,
2846 - overflow: "hidden"
2847 - }
2848 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2849 - px: 2,
2850 - pb: 1
2851 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
2852 - direction: "row",
2853 - alignItems: "center",
2854 - justifyContent: "space-between",
2855 - gap: .5,
2856 - sx: { pb: .5 }
2857 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
2858 - flexGrow: 1,
2859 - minWidth: 0
2860 - } }, /* @__PURE__ */ react.createElement(ClassManagerSearch, null)), /* @__PURE__ */ react.createElement(CssClassFilter, null), /* @__PURE__ */ react.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ react.createElement(ActiveFilters, null)), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2861 - ref: setScrollElement,
2862 - px: 2,
2863 - sx: {
2864 - flexGrow: 1,
2865 - overflowY: "auto",
2866 - minHeight: 0
2867 - }
2868 - }, /* @__PURE__ */ react.createElement(GlobalClassesList, {
2869 - disabled: isPublishing,
2870 - scrollElement,
2871 - onStopSyncRequest: handleStopSyncRequest,
2872 - onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
2873 - })), /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelFooter, null, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
2874 - fullWidth: true,
2875 - size: "small",
2876 - color: "global",
2877 - variant: "contained",
2878 - onClick: publish,
2879 - disabled: !isDirty,
2880 - loading: isPublishing
2881 - }, (0, _wordpress_i18n.__)("Save changes", "elementor")))))), isActive && /* @__PURE__ */ react.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ react.createElement(StartSyncToV3Modal, {
2882 - externalOpen: true,
2883 - classId: startSyncConfirmation,
2884 - onExternalClose: () => setStartSyncConfirmation(null),
2885 - onConfirm: () => handleStartSync(startSyncConfirmation)
2886 - }), stopSyncConfirmation && /* @__PURE__ */ react.createElement(StopSyncConfirmationDialog, {
2887 - open: true,
2888 - onClose: () => setStopSyncConfirmation(null),
2889 - onConfirm: () => handleStopSync(stopSyncConfirmation)
2890 - }), isSaveChangesDialogOpen && /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog, null, /* @__PURE__ */ react.createElement(_elementor_ui.DialogHeader, {
2891 - onClose: closeSaveChangesDialog,
2892 - logo: false
2893 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog.Title, null, (0, _wordpress_i18n.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog.Content, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog.ContentText, null, (0, _wordpress_i18n.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog.ContentText, null, (0, _wordpress_i18n.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.SaveChangesDialog.Actions, { actions: {
2894 - discard: {
2895 - label: (0, _wordpress_i18n.__)("Discard", "elementor"),
2896 - action: () => {
2897 - resetAndClosePanel();
2898 - }
2899 - },
2900 - confirm: {
2901 - label: (0, _wordpress_i18n.__)("Save & Continue", "elementor"),
2902 - action: async () => {
2903 - await publish();
2904 - closeSaveChangesDialog();
2905 - onRequestClose();
2906 - }
2907 - }
2908 - } })));
2909 - }
2910 - var ErrorBoundaryFallback = () => /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
2911 - role: "alert",
2912 - sx: {
2913 - minHeight: "100%",
2914 - p: 2
2915 - }
2916 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
2917 - severity: "error",
2918 - sx: {
2919 - mb: 2,
2920 - maxWidth: 400,
2921 - textAlign: "center"
2922 - }
2923 - }, /* @__PURE__ */ react.createElement("strong", null, (0, _wordpress_i18n.__)("Something went wrong", "elementor"))));
2924 - var usePreventUnload = () => {
2925 - const isDirty = useDirtyState();
2926 - (0, react.useEffect)(() => {
2927 - const handleBeforeUnload = (event) => {
2928 - if (isDirty) event.preventDefault();
2929 - };
2930 - window.addEventListener("beforeunload", handleBeforeUnload);
2931 - return () => {
2932 - window.removeEventListener("beforeunload", handleBeforeUnload);
2933 - };
2934 - }, [isDirty]);
2935 - };
2936 - var usePublish = () => {
2937 - return (0, _elementor_query.useMutation)({
2938 - mutationFn: () => saveGlobalClasses({ context: "frontend" }),
2939 - onSuccess: async () => {
2940 - (0, _elementor_editor_documents.setDocumentModifiedStatus)(false);
2941 - if (hasDeletedItems()) await onDelete();
2942 - }
2943 - });
2944 - };
2945 - var TotalCssClassCounter = () => {
2946 - const filters = useFilters();
2947 - const cssClasses = useClassesOrder();
2948 - return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
2949 - size: "small",
2950 - label: filters ? `${filters.length} / ${cssClasses?.length}` : cssClasses?.length
2951 - });
2952 - };
2953 - var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
2954 - const [, suppressStopSyncMessage] = (0, _elementor_editor_current_user.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
2955 - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog, {
2956 - open,
2957 - onClose
2958 - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Title, {
2959 - icon: FlippedColorSwatchIcon,
2960 - iconColor: "primary"
2961 - }, (0, _wordpress_i18n.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Content, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.ContentText, null, (0, _wordpress_i18n.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, _wordpress_i18n.__)("Note that if it's being used anywhere, the affected elements will inherit the default typography.", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.ConfirmationDialog.Actions, {
2962 - onClose,
2963 - onConfirm,
2964 - cancelLabel: (0, _wordpress_i18n.__)("Cancel", "elementor"),
2965 - confirmLabel: (0, _wordpress_i18n.__)("Got it", "elementor"),
2966 - color: "primary",
2967 - onSuppressMessage: suppressStopSyncMessage,
2968 - suppressLabel: (0, _wordpress_i18n.__)("Don't show again", "elementor")
2969 - }));
2970 - };
2971 -
2972 -//#endregion
2973 -//#region packages/packages/core/editor-global-classes/src/capabilities.ts
2974 - var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
2975 - var getCapabilities = () => {
2976 - return {
2977 - update: UPDATE_CLASS_CAPABILITY_KEY,
2978 - create: UPDATE_CLASS_CAPABILITY_KEY,
2979 - delete: UPDATE_CLASS_CAPABILITY_KEY,
2980 - updateProps: UPDATE_CLASS_CAPABILITY_KEY
2981 - };
2982 - };
2983 -
2984 -//#endregion
2985 -//#region packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts
2986 - var MAX_CLASSES = 1e3;
2987 - var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
2988 - var PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/;
2989 - var globalClassesStylesProvider = (0, _elementor_editor_styles_repository.createStylesProvider)({
2990 - key: GLOBAL_CLASSES_PROVIDER_KEY,
2991 - priority: 30,
2992 - limit: MAX_CLASSES,
2993 - isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
2994 - labels: {
2995 - singular: (0, _wordpress_i18n.__)("class", "elementor"),
2996 - plural: (0, _wordpress_i18n.__)("classes", "elementor")
2997 - },
2998 - subscribe: (cb) => subscribeWithStates(cb),
2999 - capabilities: getCapabilities(),
3000 - actions: {
3001 - all: () => selectOrderedClasses((0, _elementor_store.__getState)()),
3002 - get: (id) => {
3003 - const state = (0, _elementor_store.__getState)();
3004 - const isFetched = selectIsClassFetched(state, id);
3005 - const style = selectClass(state, id);
3006 - if (isFetched || style) return style;
3007 - loadExistingClasses([id]);
3008 - return placeholderDefinition(id, selectClassLabels(state)[id] ?? id);
3009 - },
3010 - resolveCssName: (id) => {
3011 - const state = (0, _elementor_store.__getState)();
3012 - const loaded = selectClass(state, id);
3013 - if (loaded) return loaded.label;
3014 - return selectClassLabels(state)[id] ?? id;
3015 - },
3016 - create: (label, variants = [], id) => {
3017 - const existingClasses = Object.entries(selectClassLabels((0, _elementor_store.__getState)()));
3018 - if (existingClasses.map(([, classLabel]) => classLabel).includes(label)) throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
3019 - const existingIds = existingClasses.map(([existingId]) => existingId);
3020 - if (!id) id = (0, _elementor_editor_styles.generateId)("g-", existingIds);
3021 - (0, _elementor_store.__dispatch)(slice.actions.add({
3022 - id,
3023 - type: "class",
3024 - label,
3025 - variants
3026 - }));
3027 - return id;
3028 - },
3029 - update: (payload) => {
3030 - (0, _elementor_store.__dispatch)(slice.actions.update({ style: payload }));
3031 - },
3032 - delete: (id) => {
3033 - (0, _elementor_store.__dispatch)(slice.actions.delete(id));
3034 - },
3035 - updateProps: (args) => {
3036 - (0, _elementor_store.__dispatch)(slice.actions.updateProps({
3037 - id: args.id,
3038 - meta: args.meta,
3039 - props: args.props,
3040 - mode: args.mode
3041 - }));
3042 - },
3043 - updateCustomCss: (args) => {
3044 - (0, _elementor_store.__dispatch)(slice.actions.updateProps({
3045 - id: args.id,
3046 - meta: args.meta,
3047 - custom_css: args.custom_css,
3048 - props: {}
3049 - }));
3050 - },
3051 - tracking: (data) => {
3052 - trackGlobalClasses(data).catch((error) => {
3053 - throw new GlobalClassTrackingError({ cause: error });
3054 - });
3055 - }
3056 - }
3057 - });
3058 - var subscribeWithStates = (cb) => {
3059 - let previousState = selectData((0, _elementor_store.__getState)());
3060 - return (0, _elementor_store.__subscribeWithSelector)((state) => selectData(state), (currentState) => {
3061 - cb(previousState.items, currentState.items);
3062 - previousState = currentState;
3063 - });
3064 - };
3065 -
3066 -//#endregion
3067 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts
3068 - var GLOBAL_CLASSES_URI = "elementor://global-classes";
3069 - var STORAGE_KEY = "elementor-global-classes";
3070 - var updateLocalStorageCache = () => {
3071 - const classes = selectOrderedClasses((0, _elementor_store.__getState)());
3072 - localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
3073 - };
3074 - var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
3075 - [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
3076 - const { sendResourceUpdated, resource, waitForReady } = entry;
3077 - resource("global-classes", GLOBAL_CLASSES_URI, { description: "Global classes list." }, async () => {
3078 - return { contents: [{
3079 - uri: GLOBAL_CLASSES_URI,
3080 - text: localStorage[STORAGE_KEY] ?? "[]"
3081 - }] };
3082 - });
3083 - waitForReady().then(() => {
3084 - updateLocalStorageCache();
3085 - globalClassesStylesProvider.subscribe(() => {
3086 - updateLocalStorageCache();
3087 - sendResourceUpdated({ uri: GLOBAL_CLASSES_URI });
3088 - });
3089 - });
3090 - });
3091 - };
3092 -
3093 -//#endregion
3094 -//#region packages/packages/core/editor-global-classes/src/hooks/use-prefetch-css-class-usage.ts
3095 - function usePrefetchCssClassUsage() {
3096 - const queryClient = (0, _elementor_query.useQueryClient)();
3097 - const prefetchClassesUsage = () => queryClient.prefetchQuery({
3098 - queryKey: [QUERY_KEY],
3099 - queryFn: fetchCssClassUsage
3100 - });
3101 - return { prefetchClassesUsage };
3102 - }
3103 - var PrefetchCssClassUsage = () => {
3104 - const { prefetchClassesUsage } = usePrefetchCssClassUsage();
3105 - prefetchClassesUsage();
3106 - return null;
3107 - };
3108 -
3109 -//#endregion
3110 -//#region packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-button.tsx
3111 - var EVENT_TOGGLE_DESIGN_SYSTEM = "elementor/toggle-design-system";
3112 - var ClassManagerButton = () => {
3113 - const { prefetchClassesUsage } = usePrefetchCssClassUsage();
3114 - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)();
3115 - if (!userCan(globalClassesStylesProvider.getKey()).update) return null;
3116 - const handleOpenPanel = () => {
3117 - window.dispatchEvent(new CustomEvent(EVENT_TOGGLE_DESIGN_SYSTEM, { detail: { tab: "classes" } }));
3118 - trackGlobalClasses({
3119 - event: "classManagerOpened",
3120 - source: "style-panel"
3121 - });
3122 - prefetchClassesUsage();
3123 - };
3124 - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
3125 - title: (0, _wordpress_i18n.__)("Class Manager", "elementor"),
3126 - placement: "top"
3127 - }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
3128 - size: "tiny",
3129 - onClick: handleOpenPanel,
3130 - sx: { marginInlineEnd: -.75 }
3131 - }, /* @__PURE__ */ react.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" })));
3132 - };
3133 -
3134 -//#endregion
3135 -//#region packages/packages/core/editor-global-classes/src/components/convert-local-class-to-global-class.tsx
3136 - var ConvertLocalClassToGlobalClass = (props) => {
3137 - const localStyleData = props.styleDef;
3138 - const handleConversion = () => {
3139 - const newClassName = createClassName(`converted-class-`);
3140 - if (!localStyleData) throw new Error("Style definition is required for converting local class to global class.");
3141 - const newId = globalClassesStylesProvider.actions.create?.(newClassName, localStyleData.variants);
3142 - if (newId) {
3143 - props.successCallback(newId);
3144 - trackGlobalClasses({
3145 - classId: newId,
3146 - event: "classCreated",
3147 - source: "converted",
3148 - classTitle: newClassName
3149 - });
3150 - }
3151 - };
3152 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, {
3153 - disabled: !props.canConvert,
3154 - onClick: handleConversion,
3155 - dense: true,
3156 - sx: { "&.Mui-focusVisible": {
3157 - border: "none",
3158 - boxShadow: "none !important",
3159 - backgroundColor: "transparent"
3160 - } }
3161 - }, (0, _wordpress_i18n.__)("Convert to global class", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null));
3162 - };
3163 - function createClassName(prefix) {
3164 - let i = 1;
3165 - let newClassName = `${prefix}${i}`;
3166 - while (!(0, _elementor_editor_styles_repository.validateStyleLabel)(newClassName, "create").isValid) newClassName = `${prefix}${++i}`;
3167 - return newClassName;
3168 - }
3169 -
3170 -//#endregion
3171 -//#region packages/packages/core/editor-global-classes/src/components/global-styles-import-listener.tsx
3172 - function GlobalStylesImportListener() {
3173 - const dispatch = (0, _elementor_store.__useDispatch)();
3174 - (0, react.useEffect)(() => {
3175 - const handleGlobalStylesImported = async (event) => {
3176 - const globalClasses = event.detail?.global_classes;
3177 - if (!globalClasses?.added_items_order || !globalClasses?.added_items || globalClasses?.added_items_order?.length === 0) {
3178 - loadCurrentDocumentClasses();
3179 - return;
3180 - }
3181 - dispatch(slice.actions.updateAfterTemplateImport({
3182 - addedItems: globalClasses.added_items,
3183 - addedIdsOrder: globalClasses.added_items_order,
3184 - addedClassLabels: createLabelsForClasses(Object.values(globalClasses.added_items))
3185 - }));
3186 - };
3187 - window.addEventListener(_elementor_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
3188 - return () => {
3189 - window.removeEventListener(_elementor_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
3190 - };
3191 - }, [dispatch]);
3192 - return null;
3193 - }
3194 -
3195 -//#endregion
3196 -//#region packages/packages/core/editor-global-classes/src/components/populate-store.tsx
3197 - function PopulateStore() {
3198 - (0, react.useEffect)(() => {
3199 - loadCurrentDocumentClasses();
3200 - (0, _elementor_editor_v1_adapters.registerDataHook)("after", "editor/documents/attach-preview", async () => {
3201 - await loadCurrentDocumentClasses();
3202 - });
3203 - }, []);
3204 - return null;
3205 - }
3206 -
3207 -//#endregion
3208 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/manage-classes-tool.ts
3209 - var MCP_PROXY_URL = "elementor/v1/mcp-proxy";
3210 - var TOOL_NAME = "manage-classes";
3211 - var initManageClassesTool = (reg) => {
3212 - const { addTool } = reg;
3213 - addTool({
3214 - name: TOOL_NAME,
3215 - description: "Manage V4 global CSS classes on the active kit. Bulk create, update, or delete using raw CSS declarations (up to 50 operations). Duplicate labels are auto-renamed with a DUP_ prefix.",
3216 - schema: {
3217 - action: _elementor_schema.z.enum([
3218 - "create",
3219 - "update",
3220 - "delete"
3221 - ]),
3222 - id: _elementor_schema.z.string().optional().describe("Class id — required for update/delete. Get from the global-classes resource."),
3223 - label: _elementor_schema.z.string().optional().describe("Class label (lowercase, dash-separated) — required for create/update."),
3224 - css: _elementor_schema.z.string().optional().describe("Plain CSS string. Supports &:hover/&:focus/&:active nesting and @media(--breakpoint) blocks. font-family must be a single Google Font name (no fallback stacks). In patch mode: \"prop: null\" removes that prop; \"all: null\" wipes the variant."),
3225 - mode: _elementor_schema.z.enum(["patch", "replace"]).optional().describe("Merge strategy for update — patch (default): merge incoming props with existing; replace: discard all existing variants for the affected breakpoints.")
3226 - },
3227 - outputSchema: {
3228 - status: _elementor_schema.z.enum(["ok"]).describe("Operation status"),
3229 - id: _elementor_schema.z.string().optional().describe("ID of the affected class — use for subsequent update/delete calls."),
3230 - label: _elementor_schema.z.string().optional().describe("Final label of the class after any auto-rename.")
3231 - },
3232 - requiredResources: [{
3233 - uri: GLOBAL_CLASSES_URI,
3234 - description: "Current global classes — check before creating to avoid duplicates"
3235 - }],
3236 - isDestructive: true,
3237 - handler: async (params) => {
3238 - const { data } = await (0, _elementor_http_client.httpService)().post(MCP_PROXY_URL, {
3239 - tool: TOOL_NAME,
3240 - input: { operations: [params] }
3241 - });
3242 - const result = data.data.results?.[0];
3243 - const { create, update, delete: del } = globalClassesStylesProvider.actions;
3244 - switch (params.action) {
3245 - case "create":
3246 - if (result && create) create(result.label, result.variants, result.id);
3247 - break;
3248 - case "update":
3249 - if (result && update) update(result);
3250 - break;
3251 - case "delete":
3252 - if (params.id && del) del(params.id);
3253 - break;
3254 - }
3255 - (0, _elementor_store.__dispatch)(slice.actions.reset({ context: "frontend" }));
3256 - window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: "frontend" } }));
3257 - return {
3258 - status: "ok",
3259 - id: result?.id,
3260 - label: result?.label
3261 - };
3262 - }
3263 - });
3264 - };
3265 -
3266 -//#endregion
3267 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/apply-global-class-guide-prompt.ts
3268 - var APPLY_GLOBAL_CLASS_GUIDE_URI = "elementor://global-classes/tools/apply-global-class-guide";
3269 - var generateApplyGlobalClassGuidePrompt = () => {
3270 - const prompt = (0, _elementor_editor_mcp.toolPrompts)("apply-global-class");
3271 - prompt.description("Apply a global class to an element, enabling consistent styling through your design system.");
3272 - prompt.instruction(`## When to use this tool:
3273 -**ALWAYS use this IMMEDIATELY AFTER creating or updating elements** to apply the global classes you created beforehand:
3274 -- After adding elements to the canvas, apply semantic classes to them
3275 -- When applying consistent typography styles (heading-primary, text-body, etc.)
3276 -- When applying theme colors or brand styles (bg-brand, button-cta, etc.)
3277 -- When ensuring spacing consistency (spacing-section-large, etc.)
3278 -
3279 -**DO NOT use this tool** for:
3280 -- Elements that don't share styles with other elements (use inline styles instead)
3281 -- Layout-specific properties (those should remain inline in stylesConfig)`);
3282 - prompt.instruction(`## Prerequisites:
3283 -- **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource
3284 -- **REQUIRED**: Get element IDs from the page structure or selected element resources
3285 -- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates
3286 -- Make sure you have the correct class ID that you want to apply`);
3287 - prompt.instruction(`## Best Practices:
3288 -1. Apply multiple classes to a single element if needed (typography + color + spacing)
3289 -2. After applying, the tool will remind you to remove duplicate inline styles from elementConfig
3290 -3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")`);
3291 - return prompt.prompt();
3292 - };
3293 -
3294 -//#endregion
3295 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/mcp-apply-unapply-global-classes.ts
3296 - function initMcpApplyUnapplyGlobalClasses(server) {
3297 - const { addTool, resource } = server;
3298 - const applyGlobalClassGuideText = generateApplyGlobalClassGuidePrompt();
3299 - resource("apply-global-class-guide", APPLY_GLOBAL_CLASS_GUIDE_URI, {
3300 - description: "Workflow, prerequisites, and best practices for apply-global-class",
3301 - mimeType: "text/plain",
3302 - title: "Apply global class tool guide"
3303 - }, async (uri) => ({ contents: [{
3304 - mimeType: "text/plain",
3305 - text: applyGlobalClassGuideText,
3306 - uri: uri.href
3307 - }] }));
3308 - addTool({
3309 - schema: {
3310 - classId: _elementor_schema.z.string().describe("The ID of the class to apply"),
3311 - elementId: _elementor_schema.z.string().describe("The ID of the element to which the class will be applied")
3312 - },
3313 - outputSchema: {
3314 - result: _elementor_schema.z.string().describe("Result message indicating the success of the apply operation"),
3315 - llm_instructions: _elementor_schema.z.string().describe("Instructions what to do next, Important to follow these instructions!")
3316 - },
3317 - name: "apply-global-class",
3318 - description: `Apply a global class to an element for shared design-system styling. Read the full guide at [${APPLY_GLOBAL_CLASS_GUIDE_URI}].`,
3319 - requiredResources: [{
3320 - description: "Apply global class tool guide",
3321 - uri: APPLY_GLOBAL_CLASS_GUIDE_URI
3322 - }, {
3323 - description: "Global classes list",
3324 - uri: GLOBAL_CLASSES_URI
3325 - }],
3326 - handler: async (params) => {
3327 - const { classId, elementId } = params;
3328 - (0, _elementor_editor_editing_panel.doApplyClasses)(elementId, [...(0, _elementor_editor_editing_panel.doGetAppliedClasses)(elementId), classId]);
3329 - globalClassesStylesProvider.actions.tracking?.({
3330 - event: "classApplied",
3331 - executedBy: "mcp_tool",
3332 - classId
3333 - });
3334 - return {
3335 - llm_instructions: "Please check the element configuration, find inline styles duplicated by the applied global class, and remove them",
3336 - result: `Class ${classId} applied to element ${elementId} successfully.`
3337 - };
3338 - }
3339 - });
3340 - addTool({
3341 - name: "unapply-global-class",
3342 - schema: {
3343 - classId: _elementor_schema.z.string().describe("The ID of the class to unapply"),
3344 - elementId: _elementor_schema.z.string().describe("The ID of the element from which the class will be unapplied")
3345 - },
3346 - outputSchema: { result: _elementor_schema.z.string().describe("Result message indicating the success of the unapply operation") },
3347 - description: `Unapply a global class from an element by class ID. Resolve class names to IDs via [${GLOBAL_CLASSES_URI}].`,
3348 - requiredResources: [{
3349 - description: "Global classes list",
3350 - uri: GLOBAL_CLASSES_URI
3351 - }],
3352 - handler: async (params) => {
3353 - const { classId, elementId } = params;
3354 - if (!(0, _elementor_editor_editing_panel.doUnapplyClass)(elementId, classId)) throw new Error(`Class ${classId} is not applied to element ${elementId}, cannot unapply it.`);
3355 - return { result: `Class ${classId} unapplied from element ${elementId} successfully.` };
3356 - }
3357 - });
3358 - }
3359 -
3360 -//#endregion
3361 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/mcp-get-global-class-usages.ts
3362 - function initMcpApplyGetGlobalClassUsages(reg) {
3363 - const { addTool } = reg;
3364 - const globalClassesUsageSchema = { usages: _elementor_schema.z.array(_elementor_schema.z.object({
3365 - classId: _elementor_schema.z.string().describe("The ID of the class, not visible to the user. To retrieve the name of the class, use the \"list-global-classes\" tool"),
3366 - usages: _elementor_schema.z.array(_elementor_schema.z.object({
3367 - pageId: _elementor_schema.z.string().describe("The ID of the page where the class is used"),
3368 - title: _elementor_schema.z.string().describe("The title of the page where the class is used"),
3369 - total: _elementor_schema.z.number().describe("The number of times the class is used on this page"),
3370 - elements: _elementor_schema.z.array(_elementor_schema.z.string()).describe("List of element IDs using this class on the page")
3371 - }))
3372 - })) };
3373 - addTool({
3374 - name: "get-global-class-usages",
3375 - description: `Retrieve usages of global classes across all Elementor pages. Heavy operation \u2014 scans every page in the site.
3376 -
3377 -## When to use:
3378 -- Before deleting or radically changing a class \u2014 to understand cross-page side effects and decide whether to consult the user.
3379 -- To identify unused global classes for cleanup.
3380 -
3381 -## When NOT to use:
3382 -- To list global classes themselves \u2014 use the global-classes resource instead (this tool returns usages, not the class list).`,
3383 - requiredResources: [{
3384 - description: "Global classes list",
3385 - uri: GLOBAL_CLASSES_URI
3386 - }],
3387 - outputSchema: globalClassesUsageSchema,
3388 - handler: async () => {
3389 - const data = await fetchCssClassUsage();
3390 - const result = { usages: [] };
3391 - Object.entries(data).forEach(([classId, usageDetails]) => {
3392 - const newEntry = {
3393 - classId,
3394 - usages: []
3395 - };
3396 - if (typeof usageDetails !== "number") {
3397 - const { content } = usageDetails;
3398 - content.forEach((detail) => {
3399 - newEntry.usages.push({
3400 - pageId: String(detail.pageId),
3401 - title: detail.title,
3402 - total: detail.total,
3403 - elements: detail.elements
3404 - });
3405 - });
3406 - result.usages.push(newEntry);
3407 - }
3408 - });
3409 - return result;
3410 - }
3411 - });
3412 - }
3413 -
3414 -//#endregion
3415 -//#region packages/packages/core/editor-global-classes/src/mcp-integration/index.ts
3416 - var initMcpIntegration = (reg, canvasMcpEntry) => {
3417 - initMcpApplyUnapplyGlobalClasses(reg);
3418 - initMcpApplyGetGlobalClassUsages(reg);
3419 - initManageClassesTool(reg);
3420 - initClassesResource(reg, canvasMcpEntry);
3421 - };
3422 -
3423 -//#endregion
3424 -//#region packages/packages/core/editor-global-classes/src/sync-with-document-save.ts
3425 - var pendingSave = null;
3426 - function syncWithDocumentSave(panelActions) {
3427 - const unsubscribe = syncDirtyState();
3428 - bindSaveAction(panelActions);
3429 - bindBeforeSaveTemplateAction();
3430 - return unsubscribe;
3431 - }
3432 - function syncDirtyState() {
3433 - return (0, _elementor_store.__subscribeWithSelector)(selectIsDirty, () => {
3434 - if (!isDirty()) return;
3435 - (0, _elementor_editor_documents.setDocumentModifiedStatus)(true);
3436 - });
3437 - }
3438 - function triggerSave(panelActions, context = "preview") {
3439 - if (!(0, _elementor_editor_current_user.getCurrentUser)()?.capabilities.includes("elementor_global_classes_update_class")) return null;
3440 - if (pendingSave) return pendingSave;
3441 - const promise = saveGlobalClasses({
3442 - context,
3443 - onApprove: panelActions?.open
3444 - });
3445 - pendingSave = promise;
3446 - promise.finally(() => {
3447 - pendingSave = null;
3448 - });
3449 - return promise;
3450 - }
3451 - function bindSaveAction(panelActions) {
3452 - (0, _elementor_editor_v1_adapters.registerDataHook)("dependency", "document/save/save", (args) => {
3453 - triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
3454 - return true;
3455 - });
3456 - }
3457 - function bindBeforeSaveTemplateAction() {
3458 - window.addEventListener("elementor/global-styles/before-save", (event) => {
3459 - if (!pendingSave && isDirty()) triggerSave();
3460 - if (pendingSave) event.detail.promises.push(pendingSave);
3461 - });
3462 - }
3463 - function isDirty() {
3464 - return selectIsDirty((0, _elementor_store.__getState)());
3465 - }
3466 -
3467 -//#endregion
3468 -//#region packages/packages/core/editor-global-classes/src/sync-with-document.tsx
3469 - function SyncWithDocumentSave() {
3470 - (0, react.useEffect)(() => {
3471 - return (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.v1ReadyEvent)(), () => {
3472 - const open = () => {
3473 - window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
3474 - };
3475 - syncWithDocumentSave({ open });
3476 - });
3477 - }, []);
3478 - return null;
3479 - }
3480 -
3481 -//#endregion
3482 -//#region packages/packages/core/editor-global-classes/src/init.ts
3483 - function init() {
3484 - (0, _elementor_store.__registerSlice)(slice);
3485 - _elementor_editor_embedded_documents_manager.embeddedDocumentsManager.onDocumentLoad((documentId) => {
3486 - addDocumentClasses(documentId);
3487 - });
3488 - _elementor_editor_styles_repository.stylesRepository.register(globalClassesStylesProvider);
3489 - (0, _elementor_editor.injectIntoLogic)({
3490 - id: "global-classes-populate-store",
3491 - component: PopulateStore
3492 - });
3493 - (0, _elementor_editor.injectIntoLogic)({
3494 - id: "global-classes-sync-with-document",
3495 - component: SyncWithDocumentSave
3496 - });
3497 - (0, _elementor_editor.injectIntoLogic)({
3498 - id: "global-classes-import-listener",
3499 - component: GlobalStylesImportListener
3500 - });
3501 - (0, _elementor_editor.injectIntoLogic)({
3502 - id: "global-classes-prefetch-css-class-usage",
3503 - component: PrefetchCssClassUsage
3504 - });
3505 - (0, _elementor_editor_editing_panel.injectIntoCssClassConvert)({
3506 - id: "global-classes-convert-from-local-class",
3507 - component: ConvertLocalClassToGlobalClass
3508 - });
3509 - (0, _elementor_editor_editing_panel.injectIntoClassSelectorActions)({
3510 - id: "global-classes-manager-button",
3511 - component: ClassManagerButton
3512 - });
3513 - (0, _elementor_editor_editing_panel.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
3514 - name: "global",
3515 - getThemeColor: (theme) => theme.palette.global.dark
3516 - });
3517 - initMcpIntegration((0, _elementor_editor_mcp.getMCPByDomain)("classes", {
3518 - instructions: "MCP server for management of Elementor global classes",
3519 - docs: `Everything related to V4 ( Atomic ) global classes.
3520 -# Global classes
3521 -- Create/update/delete global classes
3522 -- Get list of global classes
3523 -- Get details of a global class
3524 -`
3525 - }), (0, _elementor_editor_mcp.getMCPByDomain)("canvas"));
3526 - }
3527 -
3528 -//#endregion
3529 -//#region packages/packages/core/editor-global-classes/src/index.ts
3530 - var src_exports = /* @__PURE__ */ __exportAll({
3531 - ClassManagerPanelEmbedded: () => ClassManagerPanelEmbedded,
3532 - GLOBAL_CLASSES_URI: () => GLOBAL_CLASSES_URI,
3533 - addDocumentClasses: () => addDocumentClasses,
3534 - createLabelsForClasses: () => createLabelsForClasses,
3535 - init: () => init,
3536 - loadExistingClasses: () => loadExistingClasses,
3537 - trackGlobalClasses: () => trackGlobalClasses
3538 - });
3539 -
3540 -//#endregion
3541 -//#region \0elementor-package-library-entry
3542 - (window.elementorV2 = window.elementorV2 || {}).editorGlobalClasses = src_exports;
3543 -
3544 -//#endregion
3545 -})(React, elementorV2.editorCurrentUser, elementorV2.editorDocuments, elementorV2.editorPanels, elementorV2.editorUi, elementorV2.query, elementorV2.store, elementorV2.ui, wp.i18n, elementorV2.editorStyles, elementorV2.utils, elementorV2.httpClient, elementorV2.icons, elementorV2.events, ReactDOM, elementorV2.editorStylesRepository, elementorV2.editor, elementorV2.editorEditingPanel, elementorV2.editorEmbeddedDocumentsManager, elementorV2.editorMcp, elementorV2.editorCanvas, elementorV2.editorV1Adapters, elementorV2.schema);
3546 -window.elementorV2.editorGlobalClasses?.init?.();
5 + background-color: ${({theme:e})=>e.palette.text.primary};
6 +`},"./packages/packages/core/editor-global-classes/src/components/class-manager/start-sync-to-v3-modal.tsx":function(e,t,s){s.r(t),s.d(t,{StartSyncToV3Modal:function(){return StartSyncToV3Modal}});var a=s("react"),n=s("@elementor/ui"),r=s("@wordpress/i18n"),o=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");const StartSyncToV3Modal=({externalOpen:e,classId:t,onExternalClose:s,onConfirm:l}={})=>{const[i,c]=(0,a.useState)(!0),d=(0,a.useRef)(!1);(0,a.useEffect)(()=>{e&&t&&!d.current&&(d.current=!0,(0,o.trackGlobalClasses)({event:"classSyncToV3PopupShown",classId:t})),e||(d.current=!1)},[e,t]);const handleClose=()=>{t&&(0,o.trackGlobalClasses)({event:"classSyncToV3PopupClick",classId:t,action:"cancel"}),s?.()};return a.createElement(n.Dialog,{open:!!e,onClose:handleClose,maxWidth:"sm",fullWidth:!0},a.createElement(n.DialogContent,{sx:{p:0}},a.createElement(n.Box,{component:"img",src:"https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png",alt:"",sx:{width:"100%",display:"block"}}),a.createElement(n.Box,{sx:{px:3,pt:4,pb:1}},a.createElement(n.Typography,{variant:"h6"},(0,r.__)("Sync class to Global Fonts","elementor")),a.createElement(n.Typography,{variant:"body2",color:"secondary",sx:{mb:2,pt:1}},(0,r.__)("Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.","elementor")))),a.createElement(n.DialogActions,{sx:{justifyContent:"space-between",px:3,pb:2}},a.createElement(n.FormControlLabel,{control:a.createElement(n.Checkbox,{checked:!i,onChange:e=>c(!e.target.checked)}),label:a.createElement(n.Typography,{variant:"body2",color:"secondary"},(0,r.__)("Don't show again","elementor"))}),a.createElement(n.Box,{sx:{display:"flex",gap:1}},a.createElement(n.Button,{onClick:handleClose,color:"secondary",size:"small"},(0,r.__)("Cancel","elementor")),a.createElement(n.Button,{onClick:()=>{t&&(0,o.trackGlobalClasses)({event:"classSyncToV3PopupClick",classId:t,action:"sync"}),l?.(),s?.()},variant:"contained",size:"small"},(0,r.__)("Sync to Global Fonts","elementor")))))}},"./packages/packages/core/editor-global-classes/src/components/convert-local-class-to-global-class.tsx":function(e,t,s){s.r(t),s.d(t,{ConvertLocalClassToGlobalClass:function(){return ConvertLocalClassToGlobalClass}});var a=s("react"),n=s("@elementor/editor-styles-repository"),r=s("@elementor/editor-ui"),o=s("@elementor/ui"),l=s("@wordpress/i18n"),i=s("./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts"),c=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");const ConvertLocalClassToGlobalClass=e=>{const t=e.styleDef;return a.createElement(a.Fragment,null,a.createElement(r.MenuListItem,{disabled:!e.canConvert,onClick:()=>{const s=function createClassName(e){let t=1,s=`${e}${t}`;for(;!(0,n.validateStyleLabel)(s,"create").isValid;)s=`${e}${++t}`;return s}("converted-class-");if(!t)throw new Error("Style definition is required for converting local class to global class.");const a=i.globalClassesStylesProvider.actions.create?.(s,t.variants);a&&(e.successCallback(a),(0,c.trackGlobalClasses)({classId:a,event:"classCreated",source:"converted",classTitle:s}))},dense:!0,sx:{"&.Mui-focusVisible":{border:"none",boxShadow:"none !important",backgroundColor:"transparent"}}},(0,l.__)("Convert to global class","elementor")),a.createElement(o.Divider,null))}},"./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-popover.tsx":function(e,t,s){s.r(t),s.d(t,{CssClassUsagePopover:function(){return CssClassUsagePopover}});var a=s("react"),n=s("@elementor/editor-documents"),r=s("@elementor/editor-ui"),o=s("@elementor/icons"),l=s("@elementor/ui"),i=s("@wordpress/i18n"),c=s("./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage-by-id.ts"),d=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");const u={"wp-post":{label:(0,i.__)("Post","elementor"),icon:a.createElement(o.PostTypeIcon,{fontSize:"inherit"})},"wp-page":{label:(0,i.__)("Page","elementor"),icon:a.createElement(o.PagesIcon,{fontSize:"inherit"})},popup:{label:(0,i.__)("Popup","elementor"),icon:a.createElement(o.PopupTemplateIcon,{fontSize:"inherit"})},header:{label:(0,i.__)("Header","elementor"),icon:a.createElement(o.HeaderTemplateIcon,{fontSize:"inherit"})},footer:{label:(0,i.__)("Footer","elementor"),icon:a.createElement(o.FooterTemplateIcon,{fontSize:"inherit"})}},CssClassUsagePopover=({cssClassID:e,onClose:t})=>{const{data:s}=(0,c.useCssClassUsageByID)(e),g=(0,n.__useOpenDocumentInNewTab)(),m=s?.content.map(({title:e,elements:t,pageId:s,type:a})=>({type:"item",value:s,label:e,secondaryText:t.length.toString(),docType:a}))??[];return a.createElement(a.Fragment,null,a.createElement(r.PopoverHeader,{icon:a.createElement(o.CurrentLocationIcon,{fontSize:"tiny"}),title:a.createElement(l.Stack,{flexDirection:"row",gap:1,alignItems:"center"},a.createElement(l.Box,{"aria-label":"header-title"},(0,i.__)("Locator","elementor")),a.createElement(l.Box,null,a.createElement(l.Chip,{sx:{lineHeight:1},size:"tiny",label:s.total}))),onClose:t}),a.createElement(l.Divider,null),a.createElement(r.PopoverBody,{width:300},a.createElement(r.PopoverMenuList,{onSelect:t=>{g(+t),(0,d.trackGlobalClasses)({event:"classUsageLocate",classId:e})},items:m,onClose:()=>{},menuListTemplate:p,menuItemContentTemplate:e=>a.createElement(l.Stack,{flexDirection:"row",flex:1,alignItems:"center"},a.createElement(l.Box,{display:"flex",sx:{pr:1}},a.createElement(l.Tooltip,{disableInteractive:!0,title:u?.[e.docType]?.label??e.docType,placement:"top"},a.createElement(l.Icon,{fontSize:"small"},u?.[e.docType]?.icon||a.createElement(o.PagesIcon,{fontSize:"inherit"})))),a.createElement(l.Box,{sx:{pr:.5,maxWidth:"173px"},display:"flex"},a.createElement(r.EllipsisWithTooltip,{title:e.label,as:l.Typography,variant:"caption",maxWidth:"173px",sx:{lineHeight:1}})),a.createElement(o.ExternalLinkIcon,{className:"hover-only-icon",fontSize:"tiny"}),a.createElement(l.Chip,{sx:{ml:"auto"},size:"tiny",label:e.secondaryText}))})))},p=(0,l.styled)(l.MenuList)(({theme:e})=>({"& > li":{display:"flex",cursor:"pointer",height:32,width:"100%"},'& > [role="option"]':{...e.typography.caption,lineHeight:"inherit",padding:e.spacing(.5,1,.5,2),textOverflow:"ellipsis",position:"absolute",top:0,left:0,opacity:1,".hover-only-icon":{color:e.palette.text.disabled,opacity:0},"&:hover":{borderRadius:e.spacing(.5),backgroundColor:e.palette.action.hover,".hover-only-icon":{color:e.palette.text.disabled,opacity:1}}},width:"100%",position:"relative"}))},"./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-trigger.tsx":function(e,t,s){s.r(t),s.d(t,{CssClassUsageTrigger:function(){return CssClassUsageTrigger}});var a=s("react"),n=s("@elementor/editor-ui"),r=s("@elementor/icons"),o=s("@elementor/ui"),l=s("@wordpress/i18n"),i=s("./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage-by-id.ts"),c=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),d=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-popover.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const CssClassUsageTrigger=({id:e,onClick:t})=>{const{data:{total:s},isLoading:n}=(0,i.useCssClassUsageByID)(e),l=(0,o.usePopupState)({variant:"popover",popupId:"css-class-usage-popover"});if(n)return null;const p=0!==s?TooltipWrapper:InfoAlertMessage;return a.createElement(a.Fragment,null,a.createElement(o.Box,{position:"relative",onMouseEnter:()=>{(0,c.trackGlobalClasses)({event:"classUsageHovered",classId:e,usage:s})}},a.createElement(p,{total:s},a.createElement(u,_extends({disabled:0===s,size:"tiny"},(0,o.bindTrigger)(l),{onClick:a=>{0!==s&&((0,o.bindTrigger)(l).onClick(a),t(e),(0,c.trackGlobalClasses)({event:"classUsageClicked",classId:e}))}}),a.createElement(r.CurrentLocationIcon,{fontSize:"tiny"})))),a.createElement(o.Box,null,a.createElement(o.Popover,_extends({anchorOrigin:{vertical:"center",horizontal:"right"},transformOrigin:{vertical:15,horizontal:-50}},(0,o.bindPopover)(l),{onClose:()=>{(0,o.bindPopover)(l).onClose(),t("")}}),a.createElement(d.CssClassUsagePopover,{onClose:l.close,"aria-label":"css-class-usage-popover",cssClassID:e}))))},u=(0,o.styled)(o.IconButton)(({theme:e})=>({"&.Mui-disabled":{pointerEvents:"auto","&:hover":{color:e.palette.action.disabled}},height:"22px",width:"22px"})),TooltipWrapper=({children:e,total:t})=>a.createElement(o.Tooltip,{disableInteractive:!0,placement:"top",title:`${(0,l.__)("Show {{number}} {{locations}}","elementor").replace("{{number}}",t.toString()).replace("{{locations}}",1===t?(0,l.__)("location","elementor"):(0,l.__)("locations","elementor"))}`},a.createElement("span",null,e)),InfoAlertMessage=({children:e})=>a.createElement(o.Infotip,{disableInteractive:!0,placement:"top",color:"secondary",content:a.createElement(n.InfoAlert,{sx:{mt:1}},(0,l.__)("This class isn’t being used yet.","elementor"))},a.createElement("span",null,e))},"./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/index.ts":function(e,t,s){s.r(t),s.d(t,{CssClassUsagePopover:function(){return a.CssClassUsagePopover},CssClassUsageTrigger:function(){return n.CssClassUsageTrigger}});var a=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-popover.tsx"),n=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/components/css-class-usage-trigger.tsx")},"./packages/packages/core/editor-global-classes/src/components/css-class-usage/types.ts":function(e,t,s){s.r(t),s.d(t,{QUERY_KEY:function(){return a}});const a="css-classes-usage"},"./packages/packages/core/editor-global-classes/src/components/css-class-usage/utils.ts":function(e,t,s){s.r(t),s.d(t,{transformData:function(){return transformData}});const transformData=e=>Object.entries(e).reduce((e,[t,s])=>(e[t]={content:s||[],total:s.reduce((e,t)=>e+(t?.total||0),0)},e),{})},"./packages/packages/core/editor-global-classes/src/components/global-styles-import-listener.tsx":function(e,t,s){s.r(t),s.d(t,{GlobalStylesImportListener:function(){return GlobalStylesImportListener}});var a=s("react"),n=s("@elementor/editor-canvas"),r=s("@elementor/store"),o=s("./packages/packages/core/editor-global-classes/src/load-document-classes.ts"),l=s("./packages/packages/core/editor-global-classes/src/store.ts"),i=s("./packages/packages/core/editor-global-classes/src/utils/create-labels-for-classes.ts");function GlobalStylesImportListener(){const e=(0,r.__useDispatch)();return(0,a.useEffect)(()=>{const handleGlobalStylesImported=async t=>{const s=t,a=s.detail?.global_classes;a?.added_items_order&&a?.added_items&&0!==a?.added_items_order?.length?e(l.slice.actions.updateAfterTemplateImport({addedItems:a.added_items,addedIdsOrder:a.added_items_order,addedClassLabels:(0,i.createLabelsForClasses)(Object.values(a.added_items))})):(0,o.loadCurrentDocumentClasses)()};return window.addEventListener(n.GLOBAL_STYLES_IMPORTED_EVENT,handleGlobalStylesImported),()=>{window.removeEventListener(n.GLOBAL_STYLES_IMPORTED_EVENT,handleGlobalStylesImported)}},[e]),null}},"./packages/packages/core/editor-global-classes/src/components/open-panel-from-event.tsx":function(e,t,s){s.r(t),s.d(t,{OpenPanelFromEvent:function(){return OpenPanelFromEvent}});var a=s("react"),n=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx");const r="elementor/open-global-classes-manager";function OpenPanelFromEvent(){const{open:e}=(0,n.usePanelActions)();return(0,a.useEffect)(()=>{const handler=()=>e();return window.addEventListener(r,handler),()=>window.removeEventListener(r,handler)},[e]),null}},"./packages/packages/core/editor-global-classes/src/components/open-panel-from-url.tsx":function(e,t,s){s.r(t),s.d(t,{OpenPanelFromUrl:function(){return OpenPanelFromUrl}});var a=s("react"),n=s("@elementor/editor-v1-adapters"),r=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx");const o="active-panel",l="global-classes-manager",i="panel/elements";function OpenPanelFromUrl(){const{open:e}=(0,r.usePanelActions)(),t=(0,a.useRef)(!1);return(0,a.useEffect)(()=>{if(new URLSearchParams(window.location.search).get(o)!==l)return;return(0,n.__privateListenTo)((0,n.routeOpenEvent)(i),()=>{t.current||(t.current=!0,requestAnimationFrame(()=>{e()}))})},[e]),null}},"./packages/packages/core/editor-global-classes/src/components/populate-store.tsx":function(e,t,s){s.r(t),s.d(t,{PopulateStore:function(){return PopulateStore}});var a=s("react"),n=s("@elementor/editor-v1-adapters"),r=s("./packages/packages/core/editor-global-classes/src/load-document-classes.ts");function PopulateStore(){return(0,a.useEffect)(()=>{(0,r.loadCurrentDocumentClasses)(),(0,n.registerDataHook)("after","editor/documents/attach-preview",async()=>{await(0,r.loadCurrentDocumentClasses)()})},[]),null}},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/active-filters.tsx":function(e,t,s){s.r(t),s.d(t,{ActiveFilters:function(){return ActiveFilters}});var a=s("react"),n=s("@elementor/ui"),r=s("@wordpress/i18n"),o=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),l=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),i=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/clear-icon-button.tsx"),c=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/filter-list.tsx");const ActiveFilters=()=>{const{filters:{filters:e,setFilters:t}}=(0,l.useSearchAndFilters)(),s=Object.keys(e).filter(t=>e[t]),u=s.length>0;return a.createElement(n.Stack,{direction:"row",alignItems:"center",justifyContent:"space-between"},a.createElement(n.Stack,{direction:"row",gap:.5,alignItems:"center",flexWrap:"wrap"},s.map(e=>a.createElement(n.Chip,{key:e,label:c.filterConfig[e],onDelete:()=>(e=>{t(t=>({...t,[e]:!1})),(0,o.trackGlobalClasses)({event:"classManagerFilterUsed",action:"remove",type:e,trigger:"header"})})(e),sx:d,size:"tiny"}))),u&&a.createElement(i.ClearIconButton,{trigger:"header",tooltipText:(0,r.__)("Clear Filters","elementor"),sx:{margin:"0 0 auto auto"}}))},d={"& .MuiChip-deleteIcon":{display:"none",transition:"opacity 0.2s"},"&:hover .MuiChip-deleteIcon":{display:"block"}}},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/clear-icon-button.tsx":function(e,t,s){s.r(t),s.d(t,{ClearIconButton:function(){return ClearIconButton}});var a=s("react"),n=s("@elementor/icons"),r=s("@elementor/ui"),o=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),l=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx");const ClearIconButton=({tooltipText:e,sx:t,trigger:s})=>{const{filters:{onClearFilter:c}}=(0,l.useSearchAndFilters)();return a.createElement(r.Tooltip,{title:e,placement:"top",disableInteractive:!0},a.createElement(r.Box,null,a.createElement(i,{"aria-label":e,size:"tiny",onClick:()=>{c(s),(0,o.trackGlobalClasses)({event:"classManagerFilterCleared",trigger:s})},sx:t},a.createElement(n.BrushBigIcon,{fontSize:"tiny"}))))},i=(0,r.styled)(r.IconButton)(({theme:e})=>({"&.Mui-disabled":{pointerEvents:"auto","&:hover":{color:e.palette.action.disabled}}}))},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/css-class-filter.tsx":function(e,t,s){s.r(t),s.d(t,{CssClassFilter:function(){return CssClassFilter}});var a=s("react"),n=s("@elementor/editor-ui"),r=s("@elementor/icons"),o=s("@elementor/ui"),l=s("@wordpress/i18n"),i=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),c=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),d=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/clear-icon-button.tsx"),u=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/filter-list.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}const CssClassFilter=()=>{const{filters:{filters:e}}=(0,c.useSearchAndFilters)(),t=(0,o.usePopupState)({variant:"popover",disableAutoFocus:!0});(0,a.useEffect)(()=>{t.isOpen&&(0,i.trackGlobalClasses)({event:"classManagerFiltersOpened"})},[t.isOpen]);const s=Object.values(e).some(e=>e);return a.createElement(a.Fragment,null,a.createElement(o.Tooltip,{title:(0,l.__)("Filters","elementor"),placement:"top"},a.createElement(o.ToggleButton,_extends({value:"filter",size:"tiny",selected:t.isOpen},(0,o.bindToggle)(t)),a.createElement(r.FilterIcon,{fontSize:"tiny"}))),a.createElement(o.Popover,_extends({sx:{maxWidth:"344px"},anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-21}},(0,o.bindPopover)(t)),a.createElement(n.PopoverHeader,{actions:s?[a.createElement(d.ClearIconButton,{trigger:"menu",key:"clear-all-button",tooltipText:(0,l.__)("Clear all","elementor")})]:[],onClose:t.close,title:(0,l.__)("Filters","elementor"),icon:a.createElement(r.FilterIcon,{fontSize:"tiny"})}),a.createElement(o.Divider,{sx:{borderWidth:"1px 0 0 0"}}),a.createElement(n.PopoverBody,{width:344,height:125},a.createElement(u.FilterList,null))))}},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/filter/filter-list.tsx":function(e,t,s){s.r(t),s.d(t,{FilterList:function(){return FilterList},filterConfig:function(){return c}});var a=s("react"),n=s("@elementor/ui"),r=s("@wordpress/i18n"),o=s("./packages/packages/core/editor-global-classes/src/hooks/use-filtered-css-class-usage.tsx"),l=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),i=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx");const c={unused:(0,r.__)("Unused","elementor"),empty:(0,r.__)("Empty","elementor"),onThisPage:(0,r.__)("On this page","elementor")},FilterList=()=>{const{filters:{filters:e,setFilters:t}}=(0,i.useSearchAndFilters)(),s=(0,o.useFilteredCssClassUsage)(),handleOnClick=s=>{t(e=>({...e,[s]:!e[s]})),(0,l.trackGlobalClasses)({event:"classManagerFilterUsed",action:e[s]?"remove":"apply",type:s,trigger:"menu"})};return a.createElement(n.MenuList,null,a.createElement(n.MenuItem,{onClick:()=>handleOnClick("unused")},a.createElement(LabeledCheckbox,{label:c.unused,checked:e.unused,suffix:a.createElement(n.Chip,{size:"tiny",sx:{ml:"auto"},label:s.unused.length})})),a.createElement(n.MenuItem,{onClick:()=>handleOnClick("empty")},a.createElement(LabeledCheckbox,{label:c.empty,checked:e.empty,suffix:a.createElement(n.Chip,{size:"tiny",sx:{ml:"auto"},label:s.empty.length})})),a.createElement(n.MenuItem,{onClick:()=>handleOnClick("onThisPage")},a.createElement(LabeledCheckbox,{label:c.onThisPage,checked:e.onThisPage,suffix:a.createElement(n.Chip,{size:"tiny",sx:{ml:"auto"},label:s.onThisPage.length})})))},LabeledCheckbox=({label:e,suffix:t,checked:s})=>a.createElement(n.Stack,{direction:"row",alignItems:"center",gap:.5,flex:1},a.createElement(n.Checkbox,{size:"small",checked:s,sx:{padding:0,color:"text.tertiary","&.Mui-checked":{color:"text.tertiary"}}}),a.createElement(n.Typography,{variant:"caption",sx:{color:"text.secondary"}},e),t)},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/components/search/class-manager-search.tsx":function(e,t,s){s.r(t),s.d(t,{ClassManagerSearch:function(){return ClassManagerSearch}});var a=s("react"),n=s("@elementor/icons"),r=s("@elementor/ui"),o=s("@wordpress/i18n"),l=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),i=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx");const ClassManagerSearch=()=>{const{search:{inputValue:e,handleChange:t}}=(0,i.useSearchAndFilters)();return a.createElement(r.Stack,{direction:"row",gap:.5,sx:{width:"100%"}},a.createElement(r.Box,{sx:{flexGrow:1}},a.createElement(r.TextField,{role:"search",fullWidth:!0,size:"tiny",value:e,onFocus:()=>{(0,l.trackGlobalClasses)({event:"classManagerSearched"})},placeholder:(0,o.__)("Search","elementor"),onChange:e=>t(e.target.value),InputProps:{startAdornment:a.createElement(r.InputAdornment,{position:"start"},a.createElement(n.SearchIcon,{fontSize:"tiny"}))}})))}},"./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx":function(e,t,s){s.r(t),s.d(t,{SearchAndFilterProvider:function(){return SearchAndFilterProvider},useSearchAndFilters:function(){return useSearchAndFilters}});var a=s("react"),n=s("@elementor/utils");const r=(0,a.createContext)(void 0),o={empty:!1,onThisPage:!1,unused:!1},SearchAndFilterProvider=({children:e})=>{const[t,s]=(0,a.useState)(o),{debouncedValue:l,inputValue:i,handleChange:c}=(0,n.useDebounceState)({delay:300,initialValue:(()=>{const e=localStorage.getItem("elementor-global-classes-search");return e?(localStorage.removeItem("elementor-global-classes-search"),e):""})()});return a.createElement(r.Provider,{value:{search:{debouncedValue:l,inputValue:i,handleChange:c,onClearSearch:()=>{c("")}},filters:{filters:t,setFilters:s,onClearFilter:()=>{s(o)}}}},e)},useSearchAndFilters=()=>{const e=(0,a.useContext)(r);if(!e)throw new Error("useSearchContext must be used within a SearchContextProvider");return e}},"./packages/packages/core/editor-global-classes/src/errors.ts":function(e,t,s){s.r(t),s.d(t,{GlobalClassLabelAlreadyExistsError:function(){return r},GlobalClassNotFoundError:function(){return n},GlobalClassTrackingError:function(){return o}});var a=s("@elementor/utils");const n=(0,a.createError)({code:"global_class_not_found",message:"Global class not found."}),r=(0,a.createError)({code:"global_class_label_already_exists",message:"Class with this name already exists."}),o=(0,a.createError)({code:"global_class_tracking_error",message:"Error tracking global classes event."})},"./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts":function(e,t,s){s.r(t),s.d(t,{GLOBAL_CLASSES_PROVIDER_KEY:function(){return p},globalClassesStylesProvider:function(){return m}});var a=s("@elementor/editor-styles"),n=s("@elementor/editor-styles-repository"),r=s("@elementor/store"),o=s("@wordpress/i18n"),l=s("./packages/packages/core/editor-global-classes/src/capabilities.ts"),i=s("./packages/packages/core/editor-global-classes/src/errors.ts"),c=s("./packages/packages/core/editor-global-classes/src/load-existing-classes.ts"),d=s("./packages/packages/core/editor-global-classes/src/store.ts"),u=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");const p="global-classes",g=/^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/,m=(0,n.createStylesProvider)({key:p,priority:30,limit:1e3,isPregeneratedLink:({id:e})=>g.test(e),labels:{singular:(0,o.__)("class","elementor"),plural:(0,o.__)("classes","elementor")},subscribe:e=>subscribeWithStates(e),capabilities:(0,l.getCapabilities)(),actions:{all:()=>(0,d.selectOrderedClasses)((0,r.__getState)()),get:e=>{const t=(0,r.__getState)(),s=(0,d.selectIsClassFetched)(t,e),a=(0,d.selectClass)(t,e);if(s||a)return a;(0,c.loadExistingClasses)([e]);const n=(0,d.selectClassLabels)(t)[e]??e;return(0,d.placeholderDefinition)(e,n)},resolveCssName:e=>{const t=(0,r.__getState)(),s=(0,d.selectClass)(t,e);if(s)return s.label;return(0,d.selectClassLabels)(t)[e]??e},create:(e,t=[],s)=>{const n=Object.entries((0,d.selectClassLabels)((0,r.__getState)()));if(n.map(([,e])=>e).includes(e))throw new i.GlobalClassLabelAlreadyExistsError({context:{label:e}});const o=n.map(([e])=>e);return s||(s=(0,a.generateId)("g-",o)),(0,r.__dispatch)(d.slice.actions.add({id:s,type:"class",label:e,variants:t})),s},update:e=>{(0,r.__dispatch)(d.slice.actions.update({style:e}))},delete:e=>{(0,r.__dispatch)(d.slice.actions.delete(e))},updateProps:e=>{(0,r.__dispatch)(d.slice.actions.updateProps({id:e.id,meta:e.meta,props:e.props,mode:e.mode}))},updateCustomCss:e=>{(0,r.__dispatch)(d.slice.actions.updateProps({id:e.id,meta:e.meta,custom_css:e.custom_css,props:{}}))},tracking:e=>{(0,u.trackGlobalClasses)(e).catch(e=>{throw new i.GlobalClassTrackingError({cause:e})})}}}),subscribeWithStates=e=>{let t=(0,d.selectData)((0,r.__getState)());return(0,r.__subscribeWithSelector)(e=>(0,d.selectData)(e),s=>{e(t.items,s.items),t=s})}},"./packages/packages/core/editor-global-classes/src/hooks/use-classes-order.ts":function(e,t,s){s.r(t),s.d(t,{useClassesOrder:function(){return useClassesOrder}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/store.ts");const useClassesOrder=()=>(0,a.__useSelector)(n.selectOrder)},"./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage-by-id.ts":function(e,t,s){s.r(t),s.d(t,{useCssClassUsageByID:function(){return useCssClassUsageByID}});var a=s("./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage.ts");const n={total:0,content:[]},useCssClassUsageByID=e=>{const{data:t,...s}=(0,a.useCssClassUsage)();return{...s,data:t?.[e]??n}}},"./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage.ts":function(e,t,s){s.r(t),s.d(t,{useCssClassUsage:function(){return useCssClassUsage}});var a=s("@elementor/query"),n=s("./packages/packages/core/editor-global-classes/service/css-class-usage-service.ts"),r=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/types.ts");const useCssClassUsage=()=>(0,a.useQuery)({queryKey:[r.QUERY_KEY],queryFn:n.fetchCssClassUsage,refetchOnMount:!1,refetchOnWindowFocus:!0})},"./packages/packages/core/editor-global-classes/src/hooks/use-dirty-state.ts":function(e,t,s){s.r(t),s.d(t,{useDirtyState:function(){return useDirtyState}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/store.ts");const useDirtyState=()=>(0,a.__useSelector)(n.selectIsDirty)},"./packages/packages/core/editor-global-classes/src/hooks/use-empty-css-class.ts":function(e,t,s){s.r(t),s.d(t,{useAllCssClassesIDs:function(){return useAllCssClassesIDs},useEmptyCssClass:function(){return useEmptyCssClass}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/store.ts");const useEmptyCssClass=()=>(0,a.__useSelector)(n.selectEmptyCssClass),useAllCssClassesIDs=()=>{const e=(0,a.__useSelector)(n.selectGlobalClasses);return Object.keys(e)}},"./packages/packages/core/editor-global-classes/src/hooks/use-filtered-css-class-usage.tsx":function(e,t,s){s.r(t),s.d(t,{useFilteredCssClassUsage:function(){return useFilteredCssClassUsage}});var a=s("react"),n=s("@elementor/editor-documents"),r=s("./packages/packages/core/editor-global-classes/src/hooks/use-css-class-usage.ts"),o=s("./packages/packages/core/editor-global-classes/src/hooks/use-empty-css-class.ts");const l={empty:[],onThisPage:[],unused:[]},useFilteredCssClassUsage=()=>{const e=(0,n.__useActiveDocument)(),t=(0,o.useEmptyCssClass)(),{data:s,isLoading:i}=(0,r.useCssClassUsage)(),c=(0,o.useAllCssClassesIDs)(),d=(0,a.useMemo)(()=>t.map(({id:e})=>e),[t]),u=(0,a.useMemo)(()=>s&&e?((e,t)=>{const s=[];for(const a in e)e[a].content.forEach(e=>{+e.pageId===t&&s.push(a)});return s})(s,e.id):[],[s,e]),p=(0,a.useMemo)(()=>s?((e,t)=>{const s=new Set(e);return t.filter(e=>!s.has(e))})(Object.keys(s),c):[],[s,c]);return!i&&s&&e?{onThisPage:u,unused:p,empty:d}:l}},"./packages/packages/core/editor-global-classes/src/hooks/use-filters.ts":function(e,t,s){s.r(t),s.d(t,{useFilters:function(){return useFilters}});var a=s("react"),n=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),r=s("./packages/packages/core/editor-global-classes/src/hooks/use-filtered-css-class-usage.tsx");const useFilters=()=>{const{filters:{filters:e}}=(0,n.useSearchAndFilters)(),t=(0,r.useFilteredCssClassUsage)();return(0,a.useMemo)(()=>{const s=Object.entries(e).filter(([,e])=>e);return 0===s.length?null:s.reduce((e,[s],a)=>{const n=t[s]||[];return 0===a?n:e.filter(e=>n.includes(e))},[])},[e,t])}},"./packages/packages/core/editor-global-classes/src/hooks/use-ordered-classes.ts":function(e,t,s){s.r(t),s.d(t,{useOrderedClasses:function(){return useOrderedClasses}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/store.ts");const useOrderedClasses=()=>(0,a.__useSelector)(n.selectOrderedClasses)},"./packages/packages/core/editor-global-classes/src/hooks/use-prefetch-css-class-usage.ts":function(e,t,s){s.r(t),s.d(t,{PrefetchCssClassUsage:function(){return PrefetchCssClassUsage},usePrefetchCssClassUsage:function(){return usePrefetchCssClassUsage}});var a=s("@elementor/query"),n=s("./packages/packages/core/editor-global-classes/service/css-class-usage-service.ts"),r=s("./packages/packages/core/editor-global-classes/src/components/css-class-usage/types.ts");function usePrefetchCssClassUsage(){const e=(0,a.useQueryClient)();return{prefetchClassesUsage:()=>e.prefetchQuery({queryKey:[r.QUERY_KEY],queryFn:n.fetchCssClassUsage})}}const PrefetchCssClassUsage=()=>{const{prefetchClassesUsage:e}=usePrefetchCssClassUsage();return e(),null}},"./packages/packages/core/editor-global-classes/src/init.ts":function(e,t,s){s.r(t),s.d(t,{init:function(){return init}});var a=s("@elementor/editor"),n=s("@elementor/editor-editing-panel"),r=s("@elementor/editor-mcp"),o=s("@elementor/editor-panels"),l=s("@elementor/editor-styles-repository"),i=s("@elementor/editor-v1-adapters"),c=s("@elementor/store"),d=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-button.tsx"),u=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx"),p=s("./packages/packages/core/editor-global-classes/src/components/convert-local-class-to-global-class.tsx"),g=s("./packages/packages/core/editor-global-classes/src/components/global-styles-import-listener.tsx"),m=s("./packages/packages/core/editor-global-classes/src/components/open-panel-from-event.tsx"),h=s("./packages/packages/core/editor-global-classes/src/components/open-panel-from-url.tsx"),f=s("./packages/packages/core/editor-global-classes/src/components/populate-store.tsx"),b=s("./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts"),y=s("./packages/packages/core/editor-global-classes/src/hooks/use-prefetch-css-class-usage.ts"),v=s("./packages/packages/core/editor-global-classes/src/mcp-integration/index.ts"),k=s("./packages/packages/core/editor-global-classes/src/store.ts"),_=s("./packages/packages/core/editor-global-classes/src/sync-with-document.tsx");function init(){(0,c.__registerSlice)(k.slice),(0,i.isExperimentActive)("e_editor_design_system_panel")||(0,o.__registerPanel)(u.panel),l.stylesRepository.register(b.globalClassesStylesProvider),(0,a.injectIntoLogic)({id:"global-classes-populate-store",component:f.PopulateStore}),(0,a.injectIntoLogic)({id:"global-classes-sync-with-document",component:_.SyncWithDocumentSave}),(0,a.injectIntoLogic)({id:"global-classes-import-listener",component:g.GlobalStylesImportListener}),(0,a.injectIntoLogic)({id:"global-classes-prefetch-css-class-usage",component:y.PrefetchCssClassUsage}),(0,i.isExperimentActive)("e_editor_design_system_panel")||((0,a.injectIntoLogic)({id:"global-classes-open-panel-from-url",component:h.OpenPanelFromUrl}),(0,a.injectIntoLogic)({id:"global-classes-open-panel-from-event",component:m.OpenPanelFromEvent})),(0,n.injectIntoCssClassConvert)({id:"global-classes-convert-from-local-class",component:p.ConvertLocalClassToGlobalClass}),(0,n.injectIntoClassSelectorActions)({id:"global-classes-manager-button",component:d.ClassManagerButton}),(0,n.registerStyleProviderToColors)(b.GLOBAL_CLASSES_PROVIDER_KEY,{name:"global",getThemeColor:e=>e.palette.global.dark}),(0,v.initMcpIntegration)((0,r.getMCPByDomain)("classes",{instructions:"MCP server for management of Elementor global classes",docs:"Everything related to V4 ( Atomic ) global classes.\n# Global classes\n- Create/update/delete global classes\n- Get list of global classes\n- Get details of a global class\n"}),(0,r.getMCPByDomain)("canvas"))}},"./packages/packages/core/editor-global-classes/src/load-document-classes.ts":function(e,t,s){s.r(t),s.d(t,{addDocumentClasses:function(){return addDocumentClasses},loadCurrentDocumentClasses:function(){return loadCurrentDocumentClasses},styleDefinitionsMapWithoutNull:function(){return styleDefinitionsMapWithoutNull}});var a=s("@elementor/editor-documents"),n=s("@elementor/store"),r=s("./packages/packages/core/editor-global-classes/src/api.ts"),o=s("./packages/packages/core/editor-global-classes/src/store.ts"),l=s("./packages/packages/core/editor-global-classes/src/utils/create-labels-for-classes.ts");function styleDefinitionsMapWithoutNull(e){return Object.fromEntries(Object.entries(e).filter(e=>null!==e[1]))}async function loadCurrentDocumentClasses(){const[e,t]=await Promise.all([r.apiClient.all("preview"),r.apiClient.all("frontend")]),s=e.data.data,i=t.data.data,c=(0,l.createLabelsForClasses)(s),d=s.map(e=>e.id),u=i.map(e=>e.id);!function resetGlobalClassesState(e,t){(0,n.__dispatch)(o.slice.actions.load({preview:{items:{},order:e},frontend:{items:{},order:e},classLabels:t}))}(d,c);const p=(0,a.getCurrentDocument)()?.id;if(!p)return;const[g,m]=await Promise.all([r.apiClient.getStylesForPost(p,"preview"),r.apiClient.getStylesForPost(p,"frontend")]),h=styleDefinitionsMapWithoutNull(g.data.data),f=styleDefinitionsMapWithoutNull(m.data.data);(0,n.__dispatch)(o.slice.actions.load({preview:{items:h,order:d},frontend:{items:f,order:u},classLabels:c}))}async function addDocumentClasses(e){const[t,s]=await Promise.all([r.apiClient.getStylesForPost(e,"preview"),r.apiClient.getStylesForPost(e,"frontend")]),a=styleDefinitionsMapWithoutNull(t.data.data),l=styleDefinitionsMapWithoutNull(s.data.data);(0,n.__dispatch)(o.slice.actions.mergeExistingClasses({preview:a,frontend:l}))}},"./packages/packages/core/editor-global-classes/src/load-existing-classes.ts":function(e,t,s){s.r(t),s.d(t,{loadExistingClasses:function(){return loadExistingClasses}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/api.ts"),r=s("./packages/packages/core/editor-global-classes/src/load-document-classes.ts"),o=s("./packages/packages/core/editor-global-classes/src/store.ts");let l=null;const i=new Set;async function loadExistingClasses(e){const t=(0,o.selectGlobalClasses)((0,a.__getState)()),s=e.filter(e=>!(e in t));if(0!==s.length){if(s.forEach(e=>i.add(e)),l)return await l,loadExistingClasses(e);l=async function fetchAndMergeClasses(){const e=Array.from(i);if(i.clear(),0===e.length)return;const[t,s]=await Promise.all([n.apiClient.getStylesByIds(e,"preview"),n.apiClient.getStylesByIds(e,"frontend")]),l=(0,r.styleDefinitionsMapWithoutNull)(t.data.data),c=(0,r.styleDefinitionsMapWithoutNull)(s.data.data);(0,a.__dispatch)(o.slice.actions.mergeExistingClasses({preview:l,frontend:c}))}();try{await l}finally{l=null}}}},"./packages/packages/core/editor-global-classes/src/mcp-integration/apply-global-class-guide-prompt.ts":function(e,t,s){s.r(t),s.d(t,{APPLY_GLOBAL_CLASS_GUIDE_URI:function(){return n},generateApplyGlobalClassGuidePrompt:function(){return generateApplyGlobalClassGuidePrompt}});var a=s("@elementor/editor-mcp");const n="elementor://global-classes/tools/apply-global-class-guide",generateApplyGlobalClassGuidePrompt=()=>{const e=(0,a.toolPrompts)("apply-global-class");return e.description("Apply a global class to an element, enabling consistent styling through your design system."),e.instruction('## When to use this tool:\n**ALWAYS use this IMMEDIATELY AFTER building compositions** to apply the global classes you created beforehand:\n- After using "build-compositions" tool, apply semantic classes to the created elements\n- When applying consistent typography styles (heading-primary, text-body, etc.)\n- When applying theme colors or brand styles (bg-brand, button-cta, etc.)\n- When ensuring spacing consistency (spacing-section-large, etc.)\n\n**DO NOT use this tool** for:\n- Elements that don\'t share styles with other elements (use inline styles instead)\n- Layout-specific properties (those should remain inline in stylesConfig)'),e.instruction("## Prerequisites:\n- **REQUIRED**: Get the list of available global classes from 'elementor://global-classes' resource\n- **REQUIRED**: Get element IDs from the composition XML returned by \"build-compositions\" tool\n- Ensure you have the most up-to-date list of classes applied to the element to avoid duplicates\n- Make sure you have the correct class ID that you want to apply"),e.instruction('## Best Practices:\n1. Apply multiple classes to a single element if needed (typography + color + spacing)\n2. After applying, the tool will remind you to remove duplicate inline styles from elementConfig\n3. Classes should describe purpose, not implementation (e.g., "heading-primary" not "big-red-text")'),e.prompt()}},"./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts":function(e,t,s){s.r(t),s.d(t,{GLOBAL_CLASSES_URI:function(){return o},initClassesResource:function(){return initClassesResource}});var a=s("@elementor/store"),n=s("./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts"),r=s("./packages/packages/core/editor-global-classes/src/store.ts");const o="elementor://global-classes",l="elementor-global-classes",updateLocalStorageCache=()=>{const e=(0,r.selectOrderedClasses)((0,a.__getState)());localStorage.setItem(l,JSON.stringify(e))},initClassesResource=(e,t)=>{[t,e].forEach(e=>{const{sendResourceUpdated:t,resource:s,waitForReady:a}=e;s("global-classes",o,{description:"Global classes list."},async()=>({contents:[{uri:o,text:localStorage[l]??"[]"}]})),a().then(()=>{updateLocalStorageCache(),n.globalClassesStylesProvider.subscribe(()=>{updateLocalStorageCache(),t({uri:o})})})})}},"./packages/packages/core/editor-global-classes/src/mcp-integration/index.ts":function(e,t,s){s.r(t),s.d(t,{initMcpIntegration:function(){return initMcpIntegration}});var a=s("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts"),n=s("./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-apply-unapply-global-classes.ts"),r=s("./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-get-global-class-usages.ts"),o=s("./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-manage-global-classes.ts");const initMcpIntegration=(e,t)=>{(0,n.default)(e),(0,r.default)(e),(0,o.initManageGlobalClasses)(e),(0,a.initClassesResource)(e,t)}},"./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-apply-unapply-global-classes.ts":function(e,t,s){s.r(t),s.d(t,{default:function(){return initMcpApplyUnapplyGlobalClasses}});var a=s("@elementor/editor-editing-panel"),n=s("@elementor/schema"),r=s("./packages/packages/core/editor-global-classes/src/mcp-integration/apply-global-class-guide-prompt.ts"),o=s("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts");function initMcpApplyUnapplyGlobalClasses(e){const{addTool:t,resource:s}=e,l=(0,r.generateApplyGlobalClassGuidePrompt)();s("apply-global-class-guide",r.APPLY_GLOBAL_CLASS_GUIDE_URI,{description:"Workflow, prerequisites, and best practices for apply-global-class",mimeType:"text/plain",title:"Apply global class tool guide"},async e=>({contents:[{mimeType:"text/plain",text:l,uri:e.href}]})),t({schema:{classId:n.z.string().describe("The ID of the class to apply"),elementId:n.z.string().describe("The ID of the element to which the class will be applied")},outputSchema:{result:n.z.string().describe("Result message indicating the success of the apply operation"),llm_instructions:n.z.string().describe("Instructions what to do next, Important to follow these instructions!")},name:"apply-global-class",modelPreferences:{intelligencePriority:.7,speedPriority:.8},description:`Apply a global class to an element for shared design-system styling. Read the full guide at [${r.APPLY_GLOBAL_CLASS_GUIDE_URI}].`,requiredResources:[{description:"Apply global class tool guide",uri:r.APPLY_GLOBAL_CLASS_GUIDE_URI},{description:"Global classes list",uri:o.GLOBAL_CLASSES_URI}],handler:async e=>{const{classId:t,elementId:s}=e,n=(0,a.doGetAppliedClasses)(s);return(0,a.doApplyClasses)(s,[...n,t]),{llm_instructions:"Please check the element-configuration, find DUPLICATES in the style schema that are in the class, and remove them",result:`Class ${t} applied to element ${s} successfully.`}}}),t({name:"unapply-global-class",schema:{classId:n.z.string().describe("The ID of the class to unapply"),elementId:n.z.string().describe("The ID of the element from which the class will be unapplied")},outputSchema:{result:n.z.string().describe("Result message indicating the success of the unapply operation")},modelPreferences:{intelligencePriority:.7,speedPriority:.8},description:`Unapply a global class from an element by class ID. Resolve class names to IDs via [${o.GLOBAL_CLASSES_URI}].`,requiredResources:[{description:"Global classes list",uri:o.GLOBAL_CLASSES_URI}],handler:async e=>{const{classId:t,elementId:s}=e;if(!(0,a.doUnapplyClass)(s,t))throw new Error(`Class ${t} is not applied to element ${s}, cannot unapply it.`);return{result:`Class ${t} unapplied from element ${s} successfully.`}}})}},"./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-get-global-class-usages.ts":function(e,t,s){s.r(t),s.d(t,{default:function(){return initMcpApplyGetGlobalClassUsages}});var a=s("@elementor/schema"),n=s("./packages/packages/core/editor-global-classes/service/css-class-usage-service.ts"),r=s("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts");function initMcpApplyGetGlobalClassUsages(e){const{addTool:t}=e,s={usages:a.z.array(a.z.object({classId:a.z.string().describe('The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'),usages:a.z.array(a.z.object({pageId:a.z.string().describe("The ID of the page where the class is used"),title:a.z.string().describe("The title of the page where the class is used"),total:a.z.number().describe("The number of times the class is used on this page"),elements:a.z.array(a.z.string()).describe("List of element IDs using this class on the page")}))}))};t({name:"get-global-class-usages",modelPreferences:{intelligencePriority:.6,speedPriority:.8},description:"Retrieve usages of global classes across all Elementor pages. Heavy operation — scans every page in the site.\n\n## When to use:\n- Before deleting or radically changing a class — to understand cross-page side effects and decide whether to consult the user.\n- To identify unused global classes for cleanup.\n\n## When NOT to use:\n- To list global classes themselves — use the global-classes resource instead (this tool returns usages, not the class list).",requiredResources:[{description:"Global classes list",uri:r.GLOBAL_CLASSES_URI}],outputSchema:s,handler:async()=>{const e=await(0,n.fetchCssClassUsage)(),t={usages:[]};return Object.entries(e).forEach(([e,s])=>{const a={classId:e,usages:[]};if("number"!=typeof s){const{content:e}=s;e.forEach(e=>{a.usages.push({pageId:String(e.pageId),title:e.title,total:e.total,elements:e.elements})}),t.usages.push(a)}}),t}})}},"./packages/packages/core/editor-global-classes/src/mcp-integration/mcp-manage-global-classes.ts":function(e,t,s){s.r(t),s.d(t,{initManageGlobalClasses:function(){return initManageGlobalClasses}});var a=s("@elementor/editor-canvas"),n=s("@elementor/editor-props"),r=s("@elementor/editor-styles"),o=s("@elementor/schema"),l=s("./packages/packages/core/editor-global-classes/src/global-classes-styles-provider.ts"),i=s("./packages/packages/core/editor-global-classes/src/load-existing-classes.ts"),c=s("./packages/packages/core/editor-global-classes/src/save-global-classes.tsx"),d=s("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts");const u={action:o.z.enum(["create","modify","delete"]).describe("Operation to perform"),classId:o.z.string().optional().describe("Global class ID (required for modify). Get from elementor://global-classes resource."),globalClassName:o.z.string().optional().describe("Global class name (required for create)"),props:o.z.object({default:o.z.record(o.z.string().describe("The style property name"),o.z.any().describe(`The style PropValue, refer to [${a.STYLE_SCHEMA_FULL_URI}] how to generate values`)).describe("An object record containing style property names and their new values. MUST contain at least one property — empty objects are rejected."),hover:o.z.record(o.z.string().describe("The style property name"),o.z.any().describe(`The style PropValue, refer to [${a.STYLE_SCHEMA_FULL_URI}] how to generate values`)).describe("An object record containing style property names and their new values to be set on the element. for :hover css state. optional").optional(),focus:o.z.record(o.z.string().describe("The style property name"),o.z.any().describe(`The style PropValue, refer to [${a.STYLE_SCHEMA_FULL_URI}] how to generate values`)).describe("An object record containing style property names and their new values to be set on the element. for :focus css state. optional").optional(),active:o.z.record(o.z.string().describe("The style property name"),o.z.any().describe(`The style PropValue, refer to [${a.STYLE_SCHEMA_FULL_URI}] how to generate values`)).describe("An object record containing style property names and their new values to be set on the element. for :active css state. optional").optional()}),breakpoint:o.z.nullable(o.z.string().describe("Responsive breakpoint name for styles. Defaults to desktop (null).")).default(null).describe("Responsive breakpoint name for styles. Defaults to desktop (null).")},p={status:o.z.enum(["ok","error"]).describe("Operation status"),classId:o.z.string().optional().describe("Class ID (returned on create success)"),message:o.z.string().optional().describe("Error details if status is error")},handler=async e=>{const{action:t,classId:s,globalClassName:o,props:i,breakpoint:d}=e,u=i;let p=s;if("create"===t&&!o)return{status:"error",message:"Create requires globalClassName"};if("modify"===t&&!p)return{status:"error",message:"Modify requires classId"};if("delete"===t&&!p)return{status:"error",message:"Delete requires classId"};const{create:g,update:m,delete:h}=l.globalClassesStylesProvider.actions;if(!g||!m||!h)return{status:"error",message:"Required actions not available"};const f=[],b=(0,r.getStylesSchema)(),y=Object.keys(b);if(Object.values(u).forEach(e=>{Object.keys(e).forEach(t=>{const s=b[t];if(!s)return void f.push(`Property "${t}" does not exist in styles schema.`);const{valid:a,jsonSchema:r}=n.Schema.validatePropValue(s,e[t]);a||f.push(`- Property "${t}" has invalid value\n Expected schema: ${r}\n`)})}),"delete"!==t){if(!Object.values(u).some(e=>Object.keys(e).length>0))throw new Error(`Props must not be empty. Each prop must be a PropValue object from the style schema.\n\nExample: { "display": { "$$type": "string", "value": "flex" }, "flex-direction": { "$$type": "string", "value": "column" } }\n\n${a.STYLE_SCHEMA_FULL_URI} to get the allowed values (look at the "value" enum in the schema response), then construct { "$$type": "string", "value": "<chosen value>" } for each property.\nAvailable Properties: ${y.join(", ")}`)}if(f.length>0)throw new Error(`Validation errors:\n${f.join("\n")}\nAvailable Properties: ${y.join(", ")}\nUpdate your input and try again.`);const v=window.elementorV2.editorVariables.Utils;Object.values(u).forEach(e=>{Object.keys(e).forEach(t=>{e[t]=n.Schema.adjustLlmPropValueSchema(e[t],{transformers:v.globalVariablesLLMResolvers})})});const k=d??"desktop";let _={status:"error",classId:"",message:"unknown error"};try{if("delete"===t){const e=await async function attemptDelete(e){const{classId:t,stylesProvider:s}=e,{delete:a,create:n}=s.actions;if(!t)throw new Error("Class ID is required for deletion");if(!a||!n)throw new Error("User is unable to delete global classes");const r=structuredClone(s.actions.all()).find(e=>e.id===t);if(!r)throw new Error(`Class with ID "${t}" not found`);return a(t),await(0,c.saveGlobalClasses)({context:"frontend"}),!0}({classId:p,stylesProvider:l.globalClassesStylesProvider});if(e)return{status:"ok",message:`deleted global class with ID ${p}`};throw new Error("error deleting class")}let e=t;for await(const[s,a]of Object.entries(u))switch(e){case"create":const n=await attemptCreate({props:a,className:o,stylesProvider:l.globalClassesStylesProvider,breakpoint:k,state:s});if(!n||"create"!==e)throw new Error("error creating class");e="modify",p=n,_={status:"ok",message:`created global class with ID ${n}`};break;case"modify":if(!await attemptUpdate({classId:p,props:a,stylesProvider:l.globalClassesStylesProvider,breakpoint:k,state:s}))throw new Error("error modifying class");_={status:"ok",classId:p};break;default:throw new Error(`Unsupported action ${t}`)}}catch(e){return{status:"error",message:`${t} failed: ${e.message||"Unknown error"}`}}return _},initManageGlobalClasses=e=>{const{addTool:t}=e;t({name:"manage-global-classes",requiredResources:[{uri:d.GLOBAL_CLASSES_URI,description:"Global classes list"},{uri:a.STYLE_SCHEMA_FULL_URI,description:"Style schema resources"},{uri:a.BREAKPOINTS_SCHEMA_FULL_URI,description:"Breakpoints list"}],modelPreferences:{intelligencePriority:.85,speedPriority:.6},description:`Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE applying them. Do NOT create classes for one-off styles.\n\nIMPORTANT: props must contain actual CSS property values — never pass empty objects.\nFetch ${a.STYLE_SCHEMA_FULL_URI} to get the allowed values for each property, then use them to build the props object.\n\nExample — creating a flex column class:\nprops.default = {\n "display": { "$$type": "string", "value": "flex" },\n "flex-direction": { "$$type": "string", "value": "column" }\n}\n\nThe style schema returns a JSON Schema. Extract the "value" enum to pick the right value, then construct { "$$type": "string", "value": "<picked value>" }.`,schema:u,outputSchema:p,handler:handler})};async function attemptCreate(e){const{props:t,breakpoint:s,className:a,stylesProvider:n,state:r}=e,{create:o,delete:l}=n.actions;if(!a)throw new Error("Global class name is a required for creation");if(!o||!l)throw new Error("User is unable to create global classes");const i=o(a,[{meta:{breakpoint:s,state:"default"===r?null:r},custom_css:null,props:t}]);try{return await(0,c.saveGlobalClasses)({context:"frontend"}),i}catch{throw l(i),new Error("error creating class")}}async function attemptUpdate(e){const{props:t,breakpoint:s,classId:a,stylesProvider:n,state:r}=e,{updateProps:o,update:l}=n.actions;if(!a)throw new Error("Class ID is required for modification");if(!o||!l)throw new Error("User is unable to update global classes");await(0,i.loadExistingClasses)([a]);const d=structuredClone(n.actions.all());try{return o({id:a,props:t,meta:{breakpoint:s,state:"default"===r?null:r}}),await(0,c.saveGlobalClasses)({context:"frontend"}),!0}catch{throw d.forEach(e=>{l({id:e.id,variants:e.variants})}),await(0,c.saveGlobalClasses)({context:"frontend"}),new Error("error updating class")}}},"./packages/packages/core/editor-global-classes/src/save-global-classes.tsx":function(e,t,s){s.r(t),s.d(t,{saveGlobalClasses:function(){return saveGlobalClasses}});var a=s("react"),n=s("@elementor/editor-ui"),r=s("@elementor/store"),o=s("@elementor/utils"),l=s("./packages/packages/core/editor-global-classes/src/api.ts"),i=s("./packages/packages/core/editor-global-classes/src/components/class-manager/duplicate-label-dialog.tsx"),c=s("./packages/packages/core/editor-global-classes/src/store.ts"),d=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts");async function saveGlobalClasses({context:e,onApprove:t}){const s=(0,c.selectData)((0,r.__getState)()),u="preview"===e?l.apiClient.saveDraft:l.apiClient.publish,p="preview"===e?c.selectPreviewInitialData:c.selectFrontendInitialData,g=function calculateChanges(e,t){const s=Object.keys(e.items),a=Object.keys(t.items),{order:n}=e,{order:r}=t,l=new Set(n),i=r.filter(e=>!l.has(e)),c=n.join(";")!==r.join(";");return{added:s.filter(e=>!a.includes(e)),deleted:i,modified:s.filter(s=>s in t.items&&(0,o.hash)(e.items[s])!==(0,o.hash)(t.items[s])),order:c}}(s,p((0,r.__getState)())),m=[...g.added,...g.modified],h=Object.fromEntries(m.map(e=>[e,s.items[e]]).filter(([,e])=>e)),f=await u({items:h,order:s.order,changes:g});(0,r.__dispatch)(c.slice.actions.reset({context:e})),window.dispatchEvent(new CustomEvent("classes:updated",{detail:{context:e}})),f?.data?.data?.code===l.API_ERROR_CODES.DUPLICATED_LABEL&&((0,r.__dispatch)(c.slice.actions.updateMultiple(f.data.data.modifiedLabels)),(0,d.trackGlobalClasses)({event:"classPublishConflict",numOfConflicts:Object.keys(f.data.data.modifiedLabels).length}),(0,n.openDialog)({component:a.createElement(i.DuplicateLabelDialog,{modifiedLabels:f.data.data.modifiedLabels||[],onApprove:t})}))}},"./packages/packages/core/editor-global-classes/src/store.ts":function(e,t,s){s.r(t),s.d(t,{placeholderDefinition:function(){return placeholderDefinition},selectClass:function(){return selectClass},selectClassLabels:function(){return selectClassLabels},selectData:function(){return selectData},selectEmptyCssClass:function(){return p},selectFrontendInitialData:function(){return selectFrontendInitialData},selectGlobalClasses:function(){return d},selectIsClassFetched:function(){return selectIsClassFetched},selectIsDirty:function(){return selectIsDirty},selectOrder:function(){return c},selectOrderedClasses:function(){return u},selectPreviewInitialData:function(){return selectPreviewInitialData},slice:function(){return i}});var a=s("@elementor/editor-styles"),n=s("@elementor/store"),r=s("./packages/packages/core/editor-global-classes/src/errors.ts");const o=s("./packages/packages/core/editor-global-classes/src/utils/snapshot-history.ts").SnapshotHistory.get("global-classes"),l="globalClasses",i=(0,n.__createSlice)({name:l,initialState:{data:{items:{},order:[]},classLabels:{},initialData:{frontend:{items:{},order:[]},preview:{items:{},order:[]}},isDirty:!1},reducers:{load(e,{payload:{frontend:t,preview:s,classLabels:a}}){e.initialData.frontend=t,e.initialData.preview=s,e.data=s,e.classLabels=a,e.isDirty=!1},add(e,{payload:t}){o.next(e.data),e.data.items[t.id]=t,e.data.order.unshift(t.id),e.classLabels[t.id]=t.label,e.isDirty=!0},delete(e,{payload:t}){o.next(e.data),e.data.items=Object.fromEntries(Object.entries(e.data.items).filter(([e])=>e!==t)),e.data.order=e.data.order.filter(e=>e!==t),delete e.classLabels[t],e.isDirty=!0},setOrder(e,{payload:t}){o.next(e.data),e.data.order=t,e.isDirty=!0},update(e,{payload:t}){o.next(e.data);const s={...e.data.items[t.style.id],...t.style};e.data.items[t.style.id]=s,e.isDirty=!0},updateMultiple(e,{payload:t}){o.next(e.data),Object.entries(t).forEach(([t,{modified:s}])=>{e.data.items[t].label=s,e.classLabels[t]=s}),e.isDirty=!1},updateProps(e,{payload:t}){const s=e.data.items[t.id];if(!s)throw new r.GlobalClassNotFoundError({context:{styleId:t.id}});o.next(e.data);const n=(0,a.getVariantByMeta)(s,t.meta);let l=("custom_css"in t?t.custom_css:n?.custom_css)??null;if(l=l?.raw?l:null,n){const e=JSON.parse(JSON.stringify(t.props));if("replace"===(t.mode??"merge"))n.props=e;else{const t=JSON.parse(JSON.stringify(n.props));n.props=mergeProps(t,e)}n.custom_css=l,s.variants=getNonEmptyVariants(s)}else s.variants.push({meta:t.meta,props:t.props,custom_css:l});e.isDirty=!0},reset(e,{payload:{context:t}}){"frontend"===t&&(o.reset(),e.initialData.frontend=e.data,e.isDirty=!1),e.initialData.preview=e.data},undo(e){o.isLast()&&o.next(e.data);const t=o.prev();t?(e.data=t,e.isDirty=!0):e.data=e.initialData.preview},resetToInitialState(e,{payload:{context:t}}){o.reset(),e.data=e.initialData[t],e.isDirty=!1},redo(e){const t=o.next();o.isLast()&&o.prev(),t&&(e.data=t,e.isDirty=!0)},mergeExistingClasses(e,{payload:{preview:t,frontend:s}}){Object.entries(t).forEach(([t,a])=>{const n=s[t];null!=a&&(t in e.data.items||(e.data.items[t]=a),t in e.initialData.frontend.items||(e.initialData.frontend.items[t]=n),t in e.initialData.preview.items||(e.initialData.preview.items[t]=a),t in e.classLabels||(e.classLabels[t]=a.label))})},setOrderWithoutHistory(e,{payload:t}){e.data.order=t},updateAfterTemplateImport(e,{payload:t}){e.initialData.frontend.items={...e.initialData.frontend.items,...t.addedItems},e.initialData.frontend.order=[...e.initialData.frontend.order,...t.addedIdsOrder],e.initialData.preview.items={...e.initialData.preview.items,...t.addedItems},e.initialData.preview.order=[...e.initialData.preview.order,...t.addedIdsOrder],e.data.items={...e.data.items,...t.addedItems},e.data.order=[...e.data.order,...t.addedIdsOrder],e.classLabels={...e.classLabels,...t.addedClassLabels}}}}),mergeProps=(e,t)=>{const s=Array.isArray(e)?{}:e;return Object.entries(t).forEach(([e,t])=>{null==t?delete s[e]:s[e]=t}),s},getNonEmptyVariants=e=>e.variants.filter(({props:e,custom_css:t})=>Object.keys(e).length||t?.raw),placeholderDefinition=(e,t)=>({id:e,type:"class",label:t,variants:[]}),selectData=e=>e[l].data,selectClassLabels=e=>e[l].classLabels,selectFrontendInitialData=e=>e[l].initialData.frontend,selectPreviewInitialData=e=>e[l].initialData.preview,c=(0,n.__createSelector)(selectData,({order:e})=>e),d=(0,n.__createSelector)(selectData,({items:e})=>e),selectIsDirty=e=>e[l].isDirty,u=(0,n.__createSelector)(selectData,selectClassLabels,({items:e,order:t},s)=>t.map(t=>{const a=e[t];if(a)return a;const n=s[t];return void 0!==n?placeholderDefinition(t,n):null}).filter(e=>null!==e)),selectClass=(e,t)=>e[l].data.items[t]??null,p=(0,n.__createSelector)(selectData,({items:e})=>Object.values(e).filter(e=>0===(e.variants?.length??0))),selectIsClassFetched=(e,t)=>!!e[l].initialData.preview.items[t]||!!e[l].initialData.frontend.items[t]||!1},"./packages/packages/core/editor-global-classes/src/sync-with-document-save.ts":function(e,t,s){s.r(t),s.d(t,{syncWithDocumentSave:function(){return syncWithDocumentSave}});var a=s("@elementor/editor-current-user"),n=s("@elementor/editor-documents"),r=s("@elementor/editor-v1-adapters"),o=s("@elementor/store"),l=s("./packages/packages/core/editor-global-classes/src/capabilities.ts"),i=s("./packages/packages/core/editor-global-classes/src/save-global-classes.tsx"),c=s("./packages/packages/core/editor-global-classes/src/store.ts");let d=null;function syncWithDocumentSave(e){const t=function syncDirtyState(){return(0,o.__subscribeWithSelector)(c.selectIsDirty,()=>{isDirty()&&(0,n.setDocumentModifiedStatus)(!0)})}();return function bindSaveAction(e){(0,r.registerDataHook)("dependency","document/save/save",t=>(triggerSave(e,"publish"===t.status?"frontend":"preview"),!0))}(e),function bindBeforeSaveTemplateAction(){window.addEventListener("elementor/global-styles/before-save",e=>{!d&&isDirty()&&triggerSave(),d&&e.detail.promises.push(d)})}(),t}function triggerSave(e,t="preview"){const s=(0,a.getCurrentUser)(),n=s?.capabilities.includes(l.UPDATE_CLASS_CAPABILITY_KEY);if(!n)return null;if(d)return d;const r=(0,i.saveGlobalClasses)({context:t,onApprove:e?.open});return d=r,r.finally(()=>{d=null}),r}function isDirty(){return(0,c.selectIsDirty)((0,o.__getState)())}},"./packages/packages/core/editor-global-classes/src/sync-with-document.tsx":function(e,t,s){s.r(t),s.d(t,{SyncWithDocumentSave:function(){return SyncWithDocumentSave}});var a=s("react"),n=s("@elementor/editor-v1-adapters"),r=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx"),o=s("./packages/packages/core/editor-global-classes/src/sync-with-document-save.ts");function SyncWithDocumentSave(){const{open:e}=(0,r.usePanelActions)();return(0,a.useEffect)(()=>(0,n.__privateListenTo)((0,n.v1ReadyEvent)(),()=>{const t=(0,n.isExperimentActive)("e_editor_design_system_panel")?()=>{window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"))}:e;(0,o.syncWithDocumentSave)({open:t})}),[]),null}},"./packages/packages/core/editor-global-classes/src/utils/create-labels-for-classes.ts":function(e,t,s){function createLabelsForClasses(e){return Object.fromEntries(e.map(e=>[e.id,e.label]))}s.r(t),s.d(t,{createLabelsForClasses:function(){return createLabelsForClasses}})},"./packages/packages/core/editor-global-classes/src/utils/snapshot-history.ts":function(e,t,s){function createLink({value:e,next:t,prev:s}){return{value:e,prev:s||null,next:t||null}}s.r(t),s.d(t,{SnapshotHistory:function(){return SnapshotHistory}});class SnapshotHistory{static registry={};static get(e){return SnapshotHistory.registry[e]||(SnapshotHistory.registry[e]=new SnapshotHistory(e)),SnapshotHistory.registry[e]}first=null;current=null;constructor(e){this.namespace=e}transform(e){return JSON.parse(JSON.stringify(e))}reset(){this.first=this.current=null}prev(){return this.current&&this.current!==this.first?(this.current=this.current.prev,this.current?.value||null):null}isLast(){return!this.current||!this.current.next}next(e){if(e){if(!this.current)return this.first=createLink({value:this.transform(e)}),this.current=this.first,this.current.value;const t=createLink({value:this.transform(e),prev:this.current});return this.current.next=t,this.current=t,this.current.value}return this.current&&this.current.next?(this.current=this.current.next,this.current.value):null}}},"./packages/packages/core/editor-global-classes/src/utils/tracking.ts":function(e,t,s){s.r(t),s.d(t,{trackGlobalClasses:function(){return trackGlobalClasses}});var a=s("@elementor/events"),n=s("@elementor/store"),r=s("./packages/packages/core/editor-global-classes/service/css-class-usage-service.ts"),o=s("./packages/packages/core/editor-global-classes/src/errors.ts"),l=s("./packages/packages/core/editor-global-classes/src/store.ts");const trackGlobalClasses=async e=>{const{runAction:t}=e,s=await getSanitizedData(e);s&&(track(s),"classCreated"===s.event&&"classId"in s&&fireClassApplied(s.classId)),t?.()},fireClassApplied=async e=>{const t=await getAppliedInfo(e);track({event:"classApplied",classId:e,...t,totalInstancesAfterApply:1})},getSanitizedData=async e=>{switch(e.event){case"classApplied":if("classId"in e&&e.classId){const t=await getAppliedInfo(e.classId);return{...e,...t}}break;case"classRemoved":if("classId"in e&&e.classId){const t=getRemovedInfo(e.classId);return{...e,...t}}break;case"classDeleted":if("classId"in e&&e.classId){const t=await trackDeleteClass(e.classId);return{...e,...t}}break;case"classCreated":return"source"in e&&"created"!==e.source&&"classId"in e&&e.classId?{...e,classTitle:getCssClass(e.classId).label}:e;case"classStateClicked":if("classId"in e&&e.classId)return{...e,classTitle:getCssClass(e.classId).label};break;case"classSyncToV3PopupShown":return{...e,interaction_type:"popup_shown",target_type:"popup",target_name:"sync_to_v3_popup",interaction_result:"popup_viewed",target_location:"widget_panel",location_l1:"class_manager"};case"classSyncToV3":{const t=getCssClass(e.classId).label,s="sync"===e.action;return{...e,interaction_type:"click",target_type:t,target_name:s?"sync_to_v3":"unsync_to_v3",interaction_result:s?"class_is_synced_to_V3":"class_is_unsynced_from_V3",target_location:"widget_panel",location_l1:"class_manager",interaction_description:s?`user_synced_${t}_to_v3`:`user_unsync_${t}_from_v3`}}case"classSyncToV3PopupClick":{const t="sync"===e.action;return{...e,interaction_type:"click",target_type:"button",target_name:t?"sync_to_v3":"cancel",interaction_result:t?"class_is_synced":"cancel",target_location:"sync_to_v3_popup"}}default:return e}},track=e=>{const{dispatchEvent:t,config:s}=(0,a.getMixpanel)();if(!s?.names?.global_classes?.[e.event])return void console.error("Global class tracking event not found",{event:e.event});const n=s.names.global_classes[e.event],{event:r,...l}=e;try{t?.(n,{event:r,...l})}catch(e){throw new o.GlobalClassTrackingError({cause:e})}},extractCssClassData=e=>({classTitle:getCssClass(e).label}),getCssClass=e=>{const t=(0,n.__getState)(),s=(0,l.selectClass)(t,e);if(s)return s;const a=(0,l.selectClassLabels)(t)[e];if(void 0!==a)return(0,l.placeholderDefinition)(e,a);throw new Error(`CSS class with ID ${e} not found`)},trackDeleteClass=async e=>{const t=getCssClass(e).label;return{totalInstances:await getTotalInstancesByCssClassID(e),classTitle:t}},getTotalInstancesByCssClassID=async e=>{const t=await(0,r.fetchCssClassUsage)();return t[e]?.total??1},getAppliedInfo=async e=>{const{classTitle:t}=extractCssClassData(e);return{classTitle:t,totalInstancesAfterApply:await getTotalInstancesByCssClassID(e)+1}},getRemovedInfo=e=>{const{classTitle:t}=extractCssClassData(e);return{classTitle:t}}},"@elementor/editor":function(e){e.exports=window.elementorV2.editor},"@elementor/editor-canvas":function(e){e.exports=window.elementorV2.editorCanvas},"@elementor/editor-current-user":function(e){e.exports=window.elementorV2.editorCurrentUser},"@elementor/editor-documents":function(e){e.exports=window.elementorV2.editorDocuments},"@elementor/editor-editing-panel":function(e){e.exports=window.elementorV2.editorEditingPanel},"@elementor/editor-mcp":function(e){e.exports=window.elementorV2.editorMcp},"@elementor/editor-panels":function(e){e.exports=window.elementorV2.editorPanels},"@elementor/editor-props":function(e){e.exports=window.elementorV2.editorProps},"@elementor/editor-styles":function(e){e.exports=window.elementorV2.editorStyles},"@elementor/editor-styles-repository":function(e){e.exports=window.elementorV2.editorStylesRepository},"@elementor/editor-ui":function(e){e.exports=window.elementorV2.editorUi},"@elementor/editor-v1-adapters":function(e){e.exports=window.elementorV2.editorV1Adapters},"@elementor/events":function(e){e.exports=window.elementorV2.events},"@elementor/http-client":function(e){e.exports=window.elementorV2.httpClient},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/query":function(e){e.exports=window.elementorV2.query},"@elementor/schema":function(e){e.exports=window.elementorV2.schema},"@elementor/store":function(e){e.exports=window.elementorV2.store},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@elementor/utils":function(e){e.exports=window.elementorV2.utils},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React},"react-dom":function(e){e.exports=window.ReactDOM}},t={};function __webpack_require__(s){var a=t[s];if(void 0!==a)return a.exports;var n=t[s]={exports:{}};return e[s](n,n.exports,__webpack_require__),n.exports}__webpack_require__.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=function(e,t){for(var s in t)__webpack_require__.o(t,s)&&!__webpack_require__.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};!function(){__webpack_require__.r(s),__webpack_require__.d(s,{ClassManagerPanelEmbedded:function(){return e.ClassManagerPanelEmbedded},GLOBAL_CLASSES_URI:function(){return t.GLOBAL_CLASSES_URI},addDocumentClasses:function(){return r.addDocumentClasses},createLabelsForClasses:function(){return o.createLabelsForClasses},init:function(){return a.init},loadExistingClasses:function(){return n.loadExistingClasses}});var e=__webpack_require__("./packages/packages/core/editor-global-classes/src/components/class-manager/class-manager-panel.tsx"),t=__webpack_require__("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts"),a=__webpack_require__("./packages/packages/core/editor-global-classes/src/init.ts"),n=__webpack_require__("./packages/packages/core/editor-global-classes/src/load-existing-classes.ts"),r=__webpack_require__("./packages/packages/core/editor-global-classes/src/load-document-classes.ts"),o=__webpack_require__("./packages/packages/core/editor-global-classes/src/utils/create-labels-for-classes.ts")}(),(window.elementorV2=window.elementorV2||{}).editorGlobalClasses=s}(),window.elementorV2.editorGlobalClasses?.init?.();
3547 7 //# sourceMappingURL=editor-global-classes.js.map