← All changes
|
assets/js/packages/editor-global-classes/editor-global-classes.js
+3544
-4
4.1.0-dev3
→
4.3.1
View file →
| @@ -1,7 +1,3547 @@ | ||
| 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:G}=usePublish(),U=(0,a.useCallback)(()=>{r?d():c()},[r,d,c]);(0,a.useEffect)(()=>{if(e&&s)return s(()=>U()),()=>s(null)},[e,s,U]),(0,a.useEffect)(()=>{if(e)return(0,D.blockPanelInteractions)(),()=>{(0,D.unblockPanelInteractions)()}},[e]);const B=(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)},[]),j=(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?B(e):S(e)},[M,B]);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)),q=a.createElement(p.Box,{ref:F,px:2,sx:{flexGrow:1,overflowY:"auto",...e?{minHeight:0}:{}}},a.createElement(I.GlobalClassesList,{disabled:G,scrollElement:z,onStopSyncRequest:V,onStartSyncRequest:e=>A(e)})),$=a.createElement(o.PanelFooter,null,a.createElement(p.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",onClick:R,disabled:!r,loading:G},(0,g.__)("Save changes","elementor"))),N=a.createElement(a.Fragment,null,T&&a.createElement(P.StartSyncToV3Modal,{externalOpen:!0,classId:T,onExternalClose:()=>A(null),onConfirm:()=>j(T)}),b&&a.createElement(StopSyncConfirmationDialog,{open:!0,onClose:()=>S(null),onConfirm:()=>B(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:G,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/store.ts"),g=s("./packages/packages/core/editor-global-classes/src/utils/tracking.ts"),m=s("./packages/packages/core/editor-global-classes/src/components/search-and-filter/context.tsx"),h=s("./packages/packages/core/editor-global-classes/src/components/class-manager/class-item.tsx"),f=s("./packages/packages/core/editor-global-classes/src/components/class-manager/delete-confirmation-dialog.tsx"),b=s("./packages/packages/core/editor-global-classes/src/components/class-manager/flipped-color-swatch-icon.tsx"),y=s("./packages/packages/core/editor-global-classes/src/components/class-manager/not-found.tsx"),v=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,m.useSearchAndFilters)(),b=(0,u.useOrderedClasses)(),k=(0,n.__useDispatch)(),_=(0,d.useFilters)(),[C,E]=(0,a.useState)(null),x=b.find(e=>e.id===C)?.label??"",[S,w]=useReorder(C,E,x??""),I=useFilteredCssClasses(),D=(0,o.useVirtualizer)({count:I.length,getScrollElement:()=>t??null,estimateSize:()=>40,overscan:6,getItemKey:e=>I[e].id,rangeExtractor:e=>{const t=new Set((0,l.defaultRangeExtractor)(e));if(C){const e=I.findIndex(e=>e.id===C);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 k(p.slice.actions.redo());k(p.slice.actions.undo())}};return window.addEventListener("keydown",handler,{capture:!0}),()=>window.removeEventListener("keydown",handler)},[k]),!b?.length)return a.createElement(EmptyState,null);const P=(0,y.getNotFoundType)(c,_,I);if(P)return a.createElement(y.NotFound,{notFoundType:P});const O=_?.length||c,T=I.length>1&&!O;return a.createElement(f.DeleteConfirmationProvider,null,a.createElement(r.List,{sx:{position:"relative",display:"block",height:D.getTotalSize(),padding:0}},a.createElement(v.SortableProvider,{value:S,onChange:w,onDragStart:e=>E(e.active.id),onDragEnd:()=>E(null),onDragCancel:()=>E(null),disableDragOverlay:!T},D.getVirtualItems().map(t=>{const n=I[t.index];return a.createElement(v.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(h.ClassItem,{id:n.id,label:n.label,renameClass:e=>{(0,g.trackGlobalClasses)({event:"classRenamed",classId:n.id,oldValue:n.label,newValue:e,source:"class-manager"}),k(p.slice.actions.update({style:{id:n.id,label:e}}))},selected:t,disabled:e||r,sortableTriggerProps:{...o,style:l},showSortIndicator:T,syncToV3:n.sync_to_v3,onToggleSync:(e,t)=>{!t&&s?s(e):t&&i?i(e):k(p.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(b.FlippedColorSwatchIcon,{fontSize:"large"}),a.createElement(k,{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"))),k=(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(p.slice.actions.setOrder(n)),e&&((0,g.trackGlobalClasses)({event:"classManagerReorder",classId:e,classTitle:s}),t(null))}]},useFilteredCssClasses=()=>{const e=(0,u.useOrderedClasses)(),{search:{debouncedValue:t}}=(0,m.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)` | |
| 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)` | |
| 3 | 2249 | width: 100%; |
| 4 | 2250 | height: 1px; |
| 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=(await r.apiClient.all("preview")).data.data,t=(0,l.createLabelsForClasses)(e),s=e.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}))}(s,t);const i=(0,a.getCurrentDocument)()?.id;if(!i)return;const[c,d]=await Promise.all([r.apiClient.getStylesForPost(i,"preview"),r.apiClient.getStylesForPost(i,"frontend")]),u=styleDefinitionsMapWithoutNull(c.data.data),p=styleDefinitionsMapWithoutNull(d.data.data);(0,n.__dispatch)(o.slice.actions.load({preview:{items:u,order:s},frontend:{items:p,order:s},classLabels:t}))}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=await n.apiClient.getStylesByIds(e,"preview"),s=await 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/save-global-classes.tsx"),c=s("./packages/packages/core/editor-global-classes/src/mcp-integration/classes-resource.ts");const d={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.any()).describe('key-value of style-schema PropValues. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'),hover:o.z.record(o.z.any()).describe("key-value of style-schema PropValues, for :hover css state. optional").optional(),focus:o.z.record(o.z.any()).describe("key-value of style-schema PropValues, for :focus css state. optional").optional(),active:o.z.record(o.z.any()).describe("key-value of style-schema PropValues, 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).")},u={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:a,props:o,breakpoint:i}=e,c=o;let d=s;if("create"===t&&!a)return{status:"error",message:"Create requires globalClassName"};if("modify"===t&&!d)return{status:"error",message:"Modify requires classId"};if("delete"===t&&!d)return{status:"error",message:"Delete requires classId"};const{create:u,update:p,delete:g}=l.globalClassesStylesProvider.actions;if(!u||!p||!g)return{status:"error",message:"Required actions not available"};const m=[],h=(0,r.getStylesSchema)(),f=Object.keys(h);if(Object.values(c).forEach(e=>{Object.keys(e).forEach(t=>{const s=h[t];if(!s)return void m.push(`Property "${t}" does not exist in styles schema.`);const{valid:a,jsonSchema:r}=n.Schema.validatePropValue(s,e[t]);a||m.push(`- Property "${t}" has invalid value\n Expected schema: ${r}\n`)})}),m.length>0)return{status:"error",message:`Validation errors:\n${m.join("\n")}\nAvailable Properties: ${f.join(", ")}\nUpdate your input and try again.`};const b=window.elementorV2.editorVariables.Utils;Object.values(c).forEach(e=>{Object.keys(e).forEach(t=>{e[t]=n.Schema.adjustLlmPropValueSchema(e[t],{transformers:b.globalVariablesLLMResolvers})})});const y=i??"desktop";let v={status:"error",classId:"",message:"unknown error"};try{let e=t;for await(const[s,n]of Object.entries(c))switch(e){case"create":const r=await attemptCreate({props:n,className:a,stylesProvider:l.globalClassesStylesProvider,breakpoint:y,state:s});r&&"create"===e&&(e="modify",d=r),v=r?{status:"ok",message:`created global class with ID ${r}`}:{status:"error",message:"error creating class"};break;case"modify":v=await attemptUpdate({classId:d,props:n,stylesProvider:l.globalClassesStylesProvider,breakpoint:y,state:s})?{status:"ok",classId:d}:{status:"error",message:"error modifying class"};break;case"delete":v=await attemptDelete({classId:d,stylesProvider:l.globalClassesStylesProvider})?{status:"ok",message:`deleted global class with ID ${d}`}:{status:"error",message:"error deleting class"};break;default:throw new Error(`Unsupported action ${t}`)}}catch(e){return{status:"error",message:`${t} failed: ${e.message||"Unknown error"}`}}return v},initManageGlobalClasses=e=>{const{addTool:t}=e;t({name:"manage-global-classes",requiredResources:[{uri:c.GLOBAL_CLASSES_URI,description:"Global classes list"},{uri:a.STYLE_SCHEMA_URI,description:"Style schema resources"},{uri:a.BREAKPOINTS_SCHEMA_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 compositions. Do NOT create classes for one-off styles or layout-specific properties.",schema:d,outputSchema:u,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 c=o(a,[{meta:{breakpoint:s,state:"default"===r?null:r},custom_css:null,props:t}]);try{return await(0,i.saveGlobalClasses)({context:"frontend"}),c}catch{return l(c),null}}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");const c=structuredClone(n.actions.all());try{return o({id:a,props:t,meta:{breakpoint:s,state:r}}),await(0,i.saveGlobalClasses)({context:"frontend"}),!0}catch{return c.forEach(e=>{l({id:e.id,variants:e.variants})}),await(0,i.saveGlobalClasses)({context:"frontend"}),!1}}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");if(!structuredClone(s.actions.all()).find(e=>e.id===t))throw new Error(`Class with ID "${t}" not found`);try{return a(t),await(0,i.saveGlobalClasses)({context:"frontend"}),!0}catch{return!1}}},"./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)),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?.(); | |
| 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?.(); | |
| 7 | 3547 | //# sourceMappingURL=editor-global-classes.js.map |