PluginProbe
Elementor Website Builder – more than just a page builder / 3.17.2
Elementor Website Builder – more than just a page builder v3.17.2
4.3.3 4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 All 456 releases
← All changes | assets/js/packages/editor-responsive/editor-responsive.js +285 -268 4.2.0-beta2 → 3.17.2 View file →
@@ -1,238 +1,65 @@
1 1 /******/ (function() { // webpackBootstrap
2 2 /******/ "use strict";
3 3 /******/ var __webpack_modules__ = ({
4 4
5 -/***/ "./packages/packages/libs/editor-responsive/src/hooks/use-activate-breakpoint.ts":
6 -/*!***************************************************************************************!*\
7 - !*** ./packages/packages/libs/editor-responsive/src/hooks/use-activate-breakpoint.ts ***!
8 - \***************************************************************************************/
9 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5 +/***/ "react":
6 +/*!**************************!*\
7 + !*** external ["React"] ***!
8 + \**************************/
9 +/***/ (function(module) {
10 10
11 -__webpack_require__.r(__webpack_exports__);
12 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
13 -/* harmony export */ useActivateBreakpoint: function() { return /* binding */ useActivateBreakpoint; }
14 -/* harmony export */ });
15 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
16 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
17 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
18 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__);
11 +module.exports = window["React"];
19 12
20 -
21 -function useActivateBreakpoint() {
22 - return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(breakpoint => {
23 - return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateRunCommand)('panel/change-device-mode', {
24 - device: breakpoint
25 - });
26 - }, []);
27 -}
28 -
29 13 /***/ }),
30 14
31 -/***/ "./packages/packages/libs/editor-responsive/src/hooks/use-active-breakpoint.ts":
32 -/*!*************************************************************************************!*\
33 - !*** ./packages/packages/libs/editor-responsive/src/hooks/use-active-breakpoint.ts ***!
34 - \*************************************************************************************/
35 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
15 +/***/ "@elementor/editor-app-bar":
16 +/*!***********************************************!*\
17 + !*** external ["elementorV2","editorAppBar"] ***!
18 + \***********************************************/
19 +/***/ (function(module) {
36 20
37 -__webpack_require__.r(__webpack_exports__);
38 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
39 -/* harmony export */ useActiveBreakpoint: function() { return /* binding */ useActiveBreakpoint; }
40 -/* harmony export */ });
41 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
42 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__);
21 +module.exports = window["elementorV2"]["editorAppBar"];
43 22
44 -function useActiveBreakpoint() {
45 - return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.__privateUseListenTo)((0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.windowEvent)('elementor/device-mode/change'), getActiveBreakpoint);
46 -}
47 -function getActiveBreakpoint() {
48 - const extendedWindow = window;
49 - return extendedWindow.elementor?.channels?.deviceMode?.request?.('currentMode') || null;
50 -}
51 -
52 23 /***/ }),
53 24
54 -/***/ "./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints-map.ts":
55 -/*!***********************************************************************************!*\
56 - !*** ./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints-map.ts ***!
57 - \***********************************************************************************/
58 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
25 +/***/ "@elementor/editor-v1-adapters":
26 +/*!***************************************************!*\
27 + !*** external ["elementorV2","editorV1Adapters"] ***!
28 + \***************************************************/
29 +/***/ (function(module) {
59 30
60 -__webpack_require__.r(__webpack_exports__);
61 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
62 -/* harmony export */ useBreakpointsMap: function() { return /* binding */ useBreakpointsMap; }
63 -/* harmony export */ });
64 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
65 -/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
66 -/* harmony import */ var _use_breakpoints__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./use-breakpoints */ "./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints.ts");
31 +module.exports = window["elementorV2"]["editorV1Adapters"];
67 32
68 -
69 -function useBreakpointsMap() {
70 - const breakpoints = (0,_use_breakpoints__WEBPACK_IMPORTED_MODULE_1__.useBreakpoints)();
71 - return (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
72 - const entries = breakpoints.map(breakpoint => [breakpoint.id, breakpoint]);
73 - return Object.fromEntries(entries);
74 - }, [breakpoints]);
75 -}
76 -
77 33 /***/ }),
78 34
79 -/***/ "./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints.ts":
80 -/*!*******************************************************************************!*\
81 - !*** ./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints.ts ***!
82 - \*******************************************************************************/
83 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
35 +/***/ "@elementor/icons":
36 +/*!****************************************!*\
37 + !*** external ["elementorV2","icons"] ***!
38 + \****************************************/
39 +/***/ (function(module) {
84 40
85 -__webpack_require__.r(__webpack_exports__);
86 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
87 -/* harmony export */ useBreakpoints: function() { return /* binding */ useBreakpoints; }
88 -/* harmony export */ });
89 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
90 -/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__);
91 -/* harmony import */ var _sync_get_breakpoints__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../sync/get-breakpoints */ "./packages/packages/libs/editor-responsive/src/sync/get-breakpoints.ts");
41 +module.exports = window["elementorV2"]["icons"];
92 42
93 -
94 -function useBreakpoints() {
95 - return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.__privateUseListenTo)((0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_0__.v1ReadyEvent)(), _sync_get_breakpoints__WEBPACK_IMPORTED_MODULE_1__.getBreakpoints);
96 -}
97 -
98 43 /***/ }),
99 44
100 -/***/ "./packages/packages/libs/editor-responsive/src/sync/get-breakpoints-tree.ts":
101 -/*!***********************************************************************************!*\
102 - !*** ./packages/packages/libs/editor-responsive/src/sync/get-breakpoints-tree.ts ***!
103 - \***********************************************************************************/
104 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
45 +/***/ "@elementor/store":
46 +/*!****************************************!*\
47 + !*** external ["elementorV2","store"] ***!
48 + \****************************************/
49 +/***/ (function(module) {
105 50
106 -__webpack_require__.r(__webpack_exports__);
107 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
108 -/* harmony export */ getBreakpointsTree: function() { return /* binding */ getBreakpointsTree; }
109 -/* harmony export */ });
110 -/* harmony import */ var _utils_get_breakpoints_by_widths__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/get-breakpoints-by-widths */ "./packages/packages/libs/editor-responsive/src/sync/utils/get-breakpoints-by-widths.ts");
51 +module.exports = window["elementorV2"]["store"];
111 52
112 -function getBreakpointsTree() {
113 - const {
114 - minWidth,
115 - defaults,
116 - maxWidth
117 - } = (0,_utils_get_breakpoints_by_widths__WEBPACK_IMPORTED_MODULE_0__.getBreakpointsByWidths)();
118 - const [rootBreakpoint] = defaults;
119 - const rootNode = {
120 - ...rootBreakpoint,
121 - children: []
122 - };
123 -
124 - // gets an array of breakpoints and nest one in the prior breakpoint
125 - const buildBranch = breakpoints => {
126 - let last = rootNode;
127 - breakpoints.forEach(breakpoint => {
128 - const newNode = {
129 - ...breakpoint,
130 - children: []
131 - };
132 - last.children.push(newNode);
133 - last = newNode;
134 - });
135 - };
136 - buildBranch(minWidth);
137 - buildBranch(maxWidth);
138 - return rootNode;
139 -}
140 -
141 53 /***/ }),
142 54
143 -/***/ "./packages/packages/libs/editor-responsive/src/sync/get-breakpoints.ts":
144 -/*!******************************************************************************!*\
145 - !*** ./packages/packages/libs/editor-responsive/src/sync/get-breakpoints.ts ***!
146 - \******************************************************************************/
147 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
148 -
149 -__webpack_require__.r(__webpack_exports__);
150 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
151 -/* harmony export */ getBreakpoints: function() { return /* binding */ getBreakpoints; }
152 -/* harmony export */ });
153 -/* harmony import */ var _utils_get_breakpoints_by_widths__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils/get-breakpoints-by-widths */ "./packages/packages/libs/editor-responsive/src/sync/utils/get-breakpoints-by-widths.ts");
154 -
155 -function getBreakpoints() {
156 - const {
157 - minWidth,
158 - defaults,
159 - maxWidth
160 - } = (0,_utils_get_breakpoints_by_widths__WEBPACK_IMPORTED_MODULE_0__.getBreakpointsByWidths)();
161 - return [...minWidth, ...defaults, ...maxWidth];
162 -}
163 -
164 -/***/ }),
165 -
166 -/***/ "./packages/packages/libs/editor-responsive/src/sync/utils/get-breakpoints-by-widths.ts":
167 -/*!**********************************************************************************************!*\
168 - !*** ./packages/packages/libs/editor-responsive/src/sync/utils/get-breakpoints-by-widths.ts ***!
169 - \**********************************************************************************************/
170 -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
171 -
172 -__webpack_require__.r(__webpack_exports__);
173 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
174 -/* harmony export */ getBreakpointsByWidths: function() { return /* binding */ getBreakpointsByWidths; }
175 -/* harmony export */ });
176 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
177 -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
178 -
179 -function getBreakpointsByWidths() {
180 - const {
181 - breakpoints
182 - } = window.elementor?.config?.responsive || {};
183 - if (!breakpoints || Object.entries(breakpoints).length === 0) {
184 - return {
185 - minWidth: [],
186 - defaults: [],
187 - maxWidth: []
188 - };
189 - }
190 - const minWidth = [];
191 - const maxWidth = [];
192 - const defaults = [
193 - // Desktop breakpoint is not included in V1 config.
194 - {
195 - id: 'desktop',
196 - label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Desktop', 'elementor')
197 - }];
198 - Object.entries(breakpoints).forEach(([id, v1Breakpoint]) => {
199 - if (!v1Breakpoint.is_enabled) {
200 - return;
201 - }
202 - const breakpoint = {
203 - id: id,
204 - label: v1Breakpoint.label,
205 - width: v1Breakpoint.value,
206 - type: v1Breakpoint.direction === 'min' ? 'min-width' : 'max-width'
207 - };
208 - if (!breakpoint.width) {
209 - defaults.push(breakpoint);
210 - } else if (breakpoint.type === 'min-width') {
211 - minWidth.push(breakpoint);
212 - } else if (breakpoint.type === 'max-width') {
213 - maxWidth.push(breakpoint);
214 - }
215 - });
216 - const byWidth = (a, b) => {
217 - return a.width && b.width ? b.width - a.width : 0;
218 - };
219 - return {
220 - minWidth: minWidth.sort(byWidth),
221 - defaults,
222 - maxWidth: maxWidth.sort(byWidth)
223 - };
224 -}
225 -
226 -/***/ }),
227 -
228 -/***/ "@elementor/editor-v1-adapters":
229 -/*!***************************************************!*\
230 - !*** external ["elementorV2","editorV1Adapters"] ***!
231 - \***************************************************/
55 +/***/ "@elementor/ui":
56 +/*!*************************************!*\
57 + !*** external ["elementorV2","ui"] ***!
58 + \*************************************/
232 59 /***/ (function(module) {
233 60
234 -module.exports = window["elementorV2"]["editorV1Adapters"];
61 +module.exports = window["elementorV2"]["ui"];
235 62
236 63 /***/ }),
237 64
238 65 /***/ "@wordpress/i18n":
@@ -242,18 +69,8 @@
242 69 /***/ (function(module) {
243 70
244 71 module.exports = window["wp"]["i18n"];
245 72
246 -/***/ }),
247 -
248 -/***/ "react":
249 -/*!**************************!*\
250 - !*** external ["React"] ***!
251 - \**************************/
252 -/***/ (function(module) {
253 -
254 -module.exports = window["React"];
255 -
256 73 /***/ })
257 74
258 75 /******/ });
259 76 /************************************************************************/
@@ -281,37 +98,8 @@
281 98 /******/ return module.exports;
282 99 /******/ }
283 100 /******/
284 101 /************************************************************************/
285 -/******/ /* webpack/runtime/compat get default export */
286 -/******/ !function() {
287 -/******/ // getDefaultExport function for compatibility with non-harmony modules
288 -/******/ __webpack_require__.n = function(module) {
289 -/******/ var getter = module && module.__esModule ?
290 -/******/ function() { return module['default']; } :
291 -/******/ function() { return module; };
292 -/******/ __webpack_require__.d(getter, { a: getter });
293 -/******/ return getter;
294 -/******/ };
295 -/******/ }();
296 -/******/
297 -/******/ /* webpack/runtime/define property getters */
298 -/******/ !function() {
299 -/******/ // define getter functions for harmony exports
300 -/******/ __webpack_require__.d = function(exports, definition) {
301 -/******/ for(var key in definition) {
302 -/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
303 -/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
304 -/******/ }
305 -/******/ }
306 -/******/ };
307 -/******/ }();
308 -/******/
309 -/******/ /* webpack/runtime/hasOwnProperty shorthand */
310 -/******/ !function() {
311 -/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
312 -/******/ }();
313 -/******/
314 102 /******/ /* webpack/runtime/make namespace object */
315 103 /******/ !function() {
316 104 /******/ // define __esModule on exports
317 105 /******/ __webpack_require__.r = function(exports) {
@@ -323,36 +111,265 @@
323 111 /******/ }();
324 112 /******/
325 113 /************************************************************************/
326 114 var __webpack_exports__ = {};
327 -// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
115 +// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
328 116 !function() {
329 -/*!***************************************************************!*\
330 - !*** ./packages/packages/libs/editor-responsive/src/index.ts ***!
331 - \***************************************************************/
117 +/*!******************************************************************!*\
118 + !*** ./node_modules/@elementor/editor-responsive/dist/index.mjs ***!
119 + \******************************************************************/
332 120 __webpack_require__.r(__webpack_exports__);
333 -/* harmony export */ __webpack_require__.d(__webpack_exports__, {
334 -/* harmony export */ getBreakpoints: function() { return /* reexport safe */ _sync_get_breakpoints__WEBPACK_IMPORTED_MODULE_4__.getBreakpoints; },
335 -/* harmony export */ getBreakpointsTree: function() { return /* reexport safe */ _sync_get_breakpoints_tree__WEBPACK_IMPORTED_MODULE_5__.getBreakpointsTree; },
336 -/* harmony export */ useActivateBreakpoint: function() { return /* reexport safe */ _hooks_use_activate_breakpoint__WEBPACK_IMPORTED_MODULE_0__.useActivateBreakpoint; },
337 -/* harmony export */ useActiveBreakpoint: function() { return /* reexport safe */ _hooks_use_active_breakpoint__WEBPACK_IMPORTED_MODULE_1__.useActiveBreakpoint; },
338 -/* harmony export */ useBreakpoints: function() { return /* reexport safe */ _hooks_use_breakpoints__WEBPACK_IMPORTED_MODULE_2__.useBreakpoints; },
339 -/* harmony export */ useBreakpointsMap: function() { return /* reexport safe */ _hooks_use_breakpoints_map__WEBPACK_IMPORTED_MODULE_3__.useBreakpointsMap; }
340 -/* harmony export */ });
341 -/* harmony import */ var _hooks_use_activate_breakpoint__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./hooks/use-activate-breakpoint */ "./packages/packages/libs/editor-responsive/src/hooks/use-activate-breakpoint.ts");
342 -/* harmony import */ var _hooks_use_active_breakpoint__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./hooks/use-active-breakpoint */ "./packages/packages/libs/editor-responsive/src/hooks/use-active-breakpoint.ts");
343 -/* harmony import */ var _hooks_use_breakpoints__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks/use-breakpoints */ "./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints.ts");
344 -/* harmony import */ var _hooks_use_breakpoints_map__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hooks/use-breakpoints-map */ "./packages/packages/libs/editor-responsive/src/hooks/use-breakpoints-map.ts");
345 -/* harmony import */ var _sync_get_breakpoints__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sync/get-breakpoints */ "./packages/packages/libs/editor-responsive/src/sync/get-breakpoints.ts");
346 -/* harmony import */ var _sync_get_breakpoints_tree__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./sync/get-breakpoints-tree */ "./packages/packages/libs/editor-responsive/src/sync/get-breakpoints-tree.ts");
121 +/* harmony import */ var _elementor_store__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @elementor/store */ "@elementor/store");
122 +/* harmony import */ var _elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @elementor/editor-v1-adapters */ "@elementor/editor-v1-adapters");
123 +/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
124 +/* harmony import */ var _elementor_editor_app_bar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @elementor/editor-app-bar */ "@elementor/editor-app-bar");
125 +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
126 +/* harmony import */ var _elementor_ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @elementor/ui */ "@elementor/ui");
127 +/* harmony import */ var _elementor_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @elementor/icons */ "@elementor/icons");
128 +// src/store/index.ts
347 129
130 +var initialState = {
131 + entities: {},
132 + activeId: null
133 +};
134 +var slice = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSlice)({
135 + name: "breakpoints",
136 + initialState,
137 + reducers: {
138 + init(state, action) {
139 + state.activeId = action.payload.activeId;
140 + state.entities = normalizeEntities(action.payload.entities);
141 + },
142 + activateBreakpoint(state, action) {
143 + if (state.entities[action.payload]) {
144 + state.activeId = action.payload;
145 + }
146 + }
147 + }
148 +});
149 +function normalizeEntities(entities) {
150 + return entities.reduce((acc, breakpoint) => {
151 + return {
152 + ...acc,
153 + [breakpoint.id]: breakpoint
154 + };
155 + }, {});
156 +}
348 157
158 +// src/sync/sync-store.ts
349 159
350 160
351 161
162 +function syncStore() {
163 + syncInitialization();
164 + syncOnChange();
165 +}
166 +function syncInitialization() {
167 + const { init: init2 } = slice.actions;
168 + (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateListenTo)(
169 + (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.v1ReadyEvent)(),
170 + () => {
171 + (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__dispatch)(init2({
172 + entities: getBreakpoints(),
173 + activeId: getActiveBreakpoint()
174 + }));
175 + }
176 + );
177 +}
178 +function syncOnChange() {
179 + const { activateBreakpoint } = slice.actions;
180 + (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateListenTo)(
181 + deviceModeChangeEvent(),
182 + () => {
183 + const activeBreakpoint = getActiveBreakpoint();
184 + (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__dispatch)(activateBreakpoint(activeBreakpoint));
185 + }
186 + );
187 +}
188 +function getBreakpoints() {
189 + const { breakpoints } = window.elementor?.config?.responsive || {};
190 + if (!breakpoints) {
191 + return [];
192 + }
193 + const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
194 + return {
195 + id,
196 + label,
197 + width: value,
198 + type: direction === "min" ? "min-width" : "max-width"
199 + };
200 + });
201 + entities.push({
202 + id: "desktop",
203 + label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Desktop", "elementor")
204 + });
205 + return entities;
206 +}
207 +function getActiveBreakpoint() {
208 + const extendedWindow = window;
209 + return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
210 +}
211 +function deviceModeChangeEvent() {
212 + return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.windowEvent)("elementor/device-mode/change");
213 +}
352 214
215 +// src/init.ts
216 +
217 +
218 +// src/components/breakpoints-switcher.tsx
219 +
220 +
221 +
222 +// src/hooks/use-breakpoints.ts
223 +
224 +
225 +// src/store/selectors.ts
226 +
227 +var selectEntities = (state) => state.breakpoints.entities;
228 +var selectActiveId = (state) => state.breakpoints.activeId;
229 +var selectActiveBreakpoint = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSelector)(
230 + selectEntities,
231 + selectActiveId,
232 + (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
233 +);
234 +var selectSortedBreakpoints = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__createSelector)(
235 + selectEntities,
236 + (entities) => {
237 + const byWidth = (a, b) => {
238 + return a.width && b.width ? b.width - a.width : 0;
239 + };
240 + const all = Object.values(entities);
241 + const defaults = all.filter((breakpoint) => !breakpoint.width);
242 + const minWidth = all.filter((breakpoint) => breakpoint.type === "min-width");
243 + const maxWidth = all.filter((breakpoint) => breakpoint.type === "max-width");
244 + return [
245 + ...minWidth.sort(byWidth),
246 + ...defaults,
247 + ...maxWidth.sort(byWidth)
248 + ];
249 + }
250 +);
251 +
252 +// src/hooks/use-breakpoints.ts
253 +function useBreakpoints() {
254 + const all = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__useSelector)(selectSortedBreakpoints);
255 + const active = (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__useSelector)(selectActiveBreakpoint);
256 + return {
257 + all,
258 + active
259 + };
260 +}
261 +
262 +// src/components/breakpoints-switcher.tsx
263 +
264 +
265 +
266 +// src/hooks/use-breakpoints-actions.ts
267 +
268 +
269 +function useBreakpointsActions() {
270 + const activate = (0,react__WEBPACK_IMPORTED_MODULE_4__.useCallback)((device) => {
271 + return (0,_elementor_editor_v1_adapters__WEBPACK_IMPORTED_MODULE_1__.__privateRunCommand)("panel/change-device-mode", { device });
272 + }, []);
273 + return {
274 + activate
275 + };
276 +}
277 +
278 +// src/components/breakpoints-switcher.tsx
279 +function BreakpointsSwitcher() {
280 + const { all, active } = useBreakpoints();
281 + const { activate } = useBreakpointsActions();
282 + if (!all.length || !active) {
283 + return null;
284 + }
285 + const onChange = (_, value) => activate(value);
286 + return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
287 + _elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tabs,
288 + {
289 + textColor: "inherit",
290 + indicatorColor: "secondary",
291 + value: active.id,
292 + onChange,
293 + "aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("Switch Device", "elementor"),
294 + sx: {
295 + "& .MuiTabs-indicator": {
296 + backgroundColor: "text.primary"
297 + }
298 + }
299 + },
300 + all.map(({ id, label, type, width }) => {
301 + const Icon = iconsMap[id];
302 + const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
303 + return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
304 + _elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tab,
305 + {
306 + value: id,
307 + key: id,
308 + "aria-label": title,
309 + icon: /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(Tooltip, { title }, /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(Icon, null)),
310 + sx: { minWidth: "auto" }
311 + }
312 + );
313 + })
314 + );
315 +}
316 +function Tooltip(props) {
317 + return /* @__PURE__ */ react__WEBPACK_IMPORTED_MODULE_4__.createElement(
318 + _elementor_ui__WEBPACK_IMPORTED_MODULE_5__.Tooltip,
319 + {
320 + PopperProps: {
321 + sx: {
322 + "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
323 + mt: 2.5
324 + }
325 + }
326 + },
327 + ...props
328 + }
329 + );
330 +}
331 +var iconsMap = {
332 + widescreen: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.WidescreenIcon,
333 + desktop: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.DesktopIcon,
334 + laptop: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.LaptopIcon,
335 + tablet_extra: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.TabletLandscapeIcon,
336 + tablet: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.TabletPortraitIcon,
337 + mobile_extra: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.MobileLandscapeIcon,
338 + mobile: _elementor_icons__WEBPACK_IMPORTED_MODULE_6__.MobilePortraitIcon
339 +};
340 +var labelsMap = {
341 + default: "%s",
342 + // translators: %s: Breakpoint label, %d: Breakpoint size.
343 + "min-width": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("%s (%dpx and up)", "elementor"),
344 + // translators: %s: Breakpoint label, %d: Breakpoint size.
345 + "max-width": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)("%s (up to %dpx)", "elementor")
346 +};
347 +
348 +// src/init.ts
349 +
350 +function init() {
351 + initStore();
352 + registerAppBarUI();
353 +}
354 +function initStore() {
355 + (0,_elementor_store__WEBPACK_IMPORTED_MODULE_0__.__registerSlice)(slice);
356 + syncStore();
357 +}
358 +function registerAppBarUI() {
359 + (0,_elementor_editor_app_bar__WEBPACK_IMPORTED_MODULE_3__.injectIntoResponsive)({
360 + id: "responsive-breakpoints-switcher",
361 + component: BreakpointsSwitcher,
362 + options: {
363 + priority: 20
364 + // After document indication.
365 + }
366 + });
367 +}
368 +
369 +// src/index.ts
370 +init();
371 +//# sourceMappingURL=index.mjs.map
353 372 }();
354 373 (window.elementorV2 = window.elementorV2 || {}).editorResponsive = __webpack_exports__;
355 374 /******/ })()
356 -;
357 -window.elementorV2.editorResponsive?.init?.();
358 -//# sourceMappingURL=editor-responsive.js.map
375 +;