← All changes | assets/js/packages/editor-variables/editor-variables.min.js +1 -1 4.2.0-beta1 → 4.0.0-dev4 View file →

		@@ -1 +1 @@
1		-!function(){"use strict";var e={2020:function(e){e.exports=window.elementorV2.editorProps},5527:function(e){e.exports=window.elementorV2.editorV1Adapters},18998:function(e){e.exports=window.elementorV2.httpClient},22444:function(e){e.exports=window.elementorV2.utils},22504:function(e){e.exports=window.elementorV2.editor},24413:function(e){e.exports=window.elementorV2.icons},27723:function(e){e.exports=window.wp.i18n},27987:function(e){e.exports=window.elementorV2.menus},33176:function(e){e.exports=window.elementorV2.events},36714:function(e,t,a){var r,n=Object.create,l=Object.defineProperty,o=Object.getOwnPropertyDescriptor,i=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,__copyProps=(e,t,a,r)=>{if(t&&"object"==typeof t||"function"==typeof t)for(let n of i(t))c.call(e,n)||n===a||l(e,n,{get:()=>t[n],enumerable:!(r=o(t,n))||r.enumerable});return e},__toESM=(e,t,a)=>(a=null!=e?n(s(e)):{},__copyProps(!t&&e&&e.__esModule?a:l(a,"default",{value:e,enumerable:!0}),e)),u={};((e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})})(u,{GLOBAL_VARIABLES_URI:()=>Cr,Utils:()=>pn,VariablesManagerPanelEmbedded:()=>VariablesManagerPanelEmbedded,getMenuActionsForVariable:()=>getMenuActionsForVariable,hasVariable:()=>hasVariable,init:()=>init,registerVariableType:()=>J,registerVariableTypes:()=>registerVariableTypes,service:()=>W,sizeVariablePropTypeUtil:()=>Wr,trackVariablesManagerEvent:()=>trackVariablesManagerEvent}),e.exports=(r=u,__copyProps(l({},"__esModule",{value:!0}),r));var p=__toESM(a(97557)),d=a(97557),m=a(46400),b=a(51061),v=a(70374),g=a(24413),y=a(79513),h=a(27723),E=a(33176),trackVariableEvent=({varType:e,controlPath:t,action:a})=>{const{dispatchEvent:r,config:n}=(0,E.getMixpanel)();if(!n?.names?.variables?.[a])return;const l=n.names.variables[a];r?.(l,{location:n?.locations?.variables||"",secondaryLocation:n?.secondaryLocations?.variablesPopover||"",trigger:n?.triggers?.click||"",var_type:e,control_path:t,action_type:l})},trackVariablesManagerEvent=({action:e,source:t,varType:a,controlPath:r})=>{const{dispatchEvent:n,config:l}=(0,E.getMixpanel)();if(!l?.names?.variables?.[e])return;const o=l.names.variables[e],i={location:l?.locations?.variablesManager||"",trigger:l?.triggers?.click||"",action_type:o};t&&(i.source=t),a&&(i.var_type=a),r&&(i.style_control_path=r),n?.(o,i)},trackVariableSyncToV3=({variableLabel:e,action:t})=>{try{const{dispatchEvent:a,config:r}=(0,E.getMixpanel)();if(!r?.names?.variables?.variableSyncToV3)return;const n=r.names.variables.variableSyncToV3,l="sync"===t;a?.(n,{interaction_type:"click",target_type:e,target_name:l?"sync_to_v3":"unsync_to_v3",interaction_result:l?"var_is_synced_to_V3":"var_is_unsynced_from_V3",target_location:"widget_panel",location_l1:"var_manager",interaction_description:l?`user_synced_${e}_to_v3`:`user_unsync_${e}_from_v3`})}catch{}},f=a(24413),C=a(27723),_={MISSING_VARIABLE_NAME:(0,C.__)("Give your variable a name.","elementor"),MISSING_VARIABLE_VALUE:(0,C.__)("Add a value to complete your variable.","elementor"),INVALID_CHARACTERS:(0,C.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.","elementor"),NO_NON_SPECIAL_CHARACTER:(0,C.__)("Names have to include at least one non-special character.","elementor"),VARIABLE_LABEL_MAX_LENGTH:(0,C.__)("Keep names up to 50 characters.","elementor"),DUPLICATED_LABEL:(0,C.__)("This variable name already exists. Please choose a unique name.","elementor"),UNEXPECTED_ERROR:(0,C.__)("There was a glitch. Try saving your variable again.","elementor"),BATCH:{DUPLICATED_LABELS:(e,t)=>(0,C.sprintf)((0,C.__)("We found %1$d duplicated %2$s.","elementor"),e,t),UNEXPECTED_ERROR:(0,C.__)("There was a glitch.","elementor"),DUPLICATED_LABEL_ACTION:(0,C.__)("Take me there","elementor"),DUPLICATED_LABEL_ACTION_MESSAGE:(0,C.__)("Please rename the variables.","elementor"),UNEXPECTED_ERROR_ACTION_MESSAGE:(0,C.__)("Try saving your variables again.","elementor")}},mapServerError=e=>{if("duplicated_label"===e?.response?.data?.code)return{field:"label",message:_.DUPLICATED_LABEL};if("batch_duplicated_label"===e?.response?.data?.code){const t=e?.response?.data?.data??{},a=Object.keys(t).length,r=1===a?"name":"names",n=Object.keys(t);return{field:"label",message:_.BATCH.DUPLICATED_LABELS(a,r),severity:"error",IconComponent:f.AlertTriangleFilledIcon,action:{label:_.BATCH.DUPLICATED_LABEL_ACTION,message:_.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,data:{duplicatedIds:n}}}}return"batch_operation_failed"===e?.response?.data?.code?{field:"label",message:_.BATCH.UNEXPECTED_ERROR,severity:"secondary",IconComponent:f.InfoCircleFilledIcon,action:{message:_.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE}}:void 0},validateLabel=(e,t)=>{if(!e.trim())return _.MISSING_VARIABLE_NAME;if(!/^[a-zA-Z0-9_-]+$/.test(e))return _.INVALID_CHARACTERS;return/[a-zA-Z0-9]/.test(e)?50<e.length?_.VARIABLE_LABEL_MAX_LENGTH:Object.values(t??{}).some(t=>t.label===e)?_.DUPLICATED_LABEL:"":_.NO_NON_SPECIAL_CHARACTER},labelHint=e=>39<e.length?_.VARIABLE_LABEL_MAX_LENGTH:"",validateValue=e=>e.trim()?"":_.MISSING_VARIABLE_VALUE,T=a(82148),S=__toESM(a(97557)),w=a(82148),k=a(79513),x=a(27723),V=a(79513),A=(0,V.styled)(V.UnstableColorIndicator)(({theme:e})=>({borderRadius:e.shape.borderRadius/2+"px",marginRight:e.spacing(.25)})),I=a(2020),P=a(59618),z=(0,I.createPropUtils)("global-color-variable",P.z.string()),R=a(27723),L=a(18998),D="elementor/v1/variables",apiClient_list=()=>(0,L.httpService)().get(D+"/list"),apiClient_create=(e,t,a)=>(0,L.httpService)().post(D+"/create",{type:e,label:t,value:a}),apiClient_update=(e,t,a,r)=>(0,L.httpService)().put(D+"/update",{id:e,label:t,value:a,type:r}),apiClient_delete=e=>(0,L.httpService)().post(D+"/delete",{id:e}),apiClient_restore=(e,t,a,r)=>{const n={id:e};return t&&(n.label=t),a&&(n.value=a),r&&(n.type=r),(0,L.httpService)().post(D+"/restore",n)},apiClient_batch=e=>(0,L.httpService)().post(D+"/batch",e),generateTempId=()=>`tmp-${Date.now().toString(36)}-${Math.random().toString(36).substring(2,8)}`,isTempId=e=>e.startsWith("tmp-"),U="elementor-global-variables",F="elementor-global-variables-watermark",B="variables:updated",O="RW",M=a(5527),N=a(2020),j=a(59618),$=(0,N.createPropUtils)("global-font-variable",j.z.string()),G=(()=>{const e={};let t;const shouldUpdate=(t,a)=>!(t in e)||(e[t].label!==a.label||(e[t].value!==a.value||(!(e[t]?.deleted||!a?.deleted)||!(!e[t]?.deleted||a?.deleted)))),fontEnqueue=e=>{if(e)try{(0,M.enqueueFont)(e)}catch{}};return{subscribe:e=>(t=e,()=>{t=()=>{}}),update:a=>{(t=>{let a=!1;for(const[r,n]of Object.entries(t))shouldUpdate(r,n)&&(e[r]=n,n.type===$.key&&fontEnqueue(n.value),a=!0);return a})(a)&&"function"==typeof t&&t({...e})}}})(),H=new class{state;notifyChange(){window.dispatchEvent(new Event(B))}constructor(){this.state={watermark:-1,variables:{}}}load(){return this.state.watermark=parseInt(localStorage.getItem(F)||"-1"),this.state.variables=JSON.parse(localStorage.getItem(U)||"{}"),this.state.variables}fill(e,t){this.state.variables={},e&&Object.keys(e).length&&(this.state.variables=e),this.state.watermark=t,localStorage.setItem(F,this.state.watermark.toString()),localStorage.setItem(U,JSON.stringify(this.state.variables)),this.notifyChange()}add(e,t){this.load(),this.state.variables[e]=t,localStorage.setItem(U,JSON.stringify(this.state.variables)),this.notifyChange()}update(e,t){this.load(),this.state.variables[e]=t,localStorage.setItem(U,JSON.stringify(this.state.variables)),this.notifyChange()}watermark(e){this.state.watermark=e,localStorage.setItem(F,this.state.watermark.toString())}watermarkDiff(e,t){const a=t-this.state.watermark;return O===e?1!==a:"RO"===e&&0!==a}},W={variables:()=>H.load(),findIdByLabel(e){const t=Object.entries(this.variables()).find(([,t])=>t.label===e);if(!t)throw new Error(`Variable with label ${e} not found`);return t[0]},findVariableByLabel(e){return Object.values(this.variables()).find(t=>t.label===e)||null},getWatermark:()=>H.state.watermark,init:()=>W.load(),load:()=>apiClient_list().then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variables:t,watermark:a}=e;return H.fill(t,a),G.update(t),t}),create:({type:e,label:t,value:a})=>apiClient_create(e,t,a).then(e=>{const{success:t,data:a}=e.data;if(!t){const e=a?.message||(0,R.__)("Unexpected response from server","elementor");throw new Error(e)}return a}).then(e=>{const{variable:t,watermark:a}=e;handleWatermark(O,a);const{id:r,...n}=t;return H.add(r,n),G.update({[r]:n}),{id:r,variable:n}}),update:(e,{label:t,value:a,type:r})=>apiClient_update(e,t,a,r).then(e=>{const{success:t,data:a}=e.data;if(!t){const e=a?.message||(0,R.__)("Unexpected response from server","elementor");throw new Error(e)}return a}).then(e=>{const{variable:t,watermark:a}=e;handleWatermark(O,a);const{id:r,...n}=t;return H.update(r,n),G.update({[r]:n}),{id:r,variable:n}}),delete:e=>apiClient_delete(e).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variable:t,watermark:a}=e;handleWatermark(O,a);const{id:r,...n}=t;return H.update(r,n),G.update({[r]:n}),{id:r,variable:n}}),restore:(e,t,a,r)=>apiClient_restore(e,t,a,r).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variable:t,watermark:a}=e;handleWatermark(O,a);const{id:r,...n}=t;return H.update(r,n),G.update({[r]:n}),{id:r,variable:n}}),batchSave:(e,t,a)=>{const r=((e,t,a)=>{const r=[];return Object.entries(t).forEach(([t,a])=>{if(isTempId(t))r.push({type:"create",variable:{...a,id:t}});else if(e[t]){const n=e[t],l=n.sync_to_v3!==a.sync_to_v3;n.deleted&&!a.deleted?r.push({type:"restore",id:t,...n.label!==a.label&&{label:a.label},...n.value!==a.value&&{value:a.value}}):a.deleted||n.label===a.label&&n.value===a.value&&n.order===a.order&&n.type===a.type&&!l||r.push({type:"update",id:t,variable:{...n.label!==a.label&&{label:a.label},...n.value!==a.value&&{value:a.value},...n.order!==a.order&&{order:a.order},...n.type!==a.type&&{type:a.type},...l&&{sync_to_v3:a.sync_to_v3}}})}}),a.forEach(e=>{r.push({type:"delete",id:e})}),r.filter(e=>{const a=e.id||e.variable?.id;return a&&!(isTempId(a)&&t[a]?.deleted)})})(e,t,a),n={operations:r,watermark:H.state.watermark};return 0===r.length?Promise.resolve({success:!0,watermark:H.state.watermark,operations:0}):apiClient_batch(n).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{results:t,watermark:a}=e;return handleWatermark(O,a),t&&t.forEach(e=>{const t=e.id;e.variable&&("create"===e.type?H.add(t,e.variable):H.update(t,e.variable),G.update({[t]:e.variable}))}),{success:!0,watermark:a,operations:r.length}})}},handleWatermark=(e,t)=>{H.watermarkDiff(e,t)&&setTimeout(()=>W.load(),500),H.watermark(t)},resolveCssVariable=(e,t)=>{let a=e,r="";if(t&&(r=t.value),t&&!t.deleted&&(a=t.label),!a.trim())return null;const n=`--${a}`;return r.trim()?`var(${n}, ${r})`:`var(${n})`},K=(0,w.createTransformer)(e=>{const t=W.variables()[e];if(!t)return S.createElement("span",null,(0,x.__)("Missing variable","elementor"));const a=t.type===z.key,r=resolveCssVariable(e,t);return S.createElement(k.Stack,{direction:"row",spacing:.5,sx:{paddingInline:"1px"},alignItems:"center"},a&&S.createElement(A,{size:"inherit",value:t.value}),S.createElement(k.Typography,{variant:"caption",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},r))}),q=a(82148),X=(0,q.createTransformer)((e,{key:t})=>{const a=W.variables()[e]||W.findVariableByLabel(e);if(!a)return null;if((0,q.isGridTrackProperty)(t)){const e=parseInt((a.value??"").trim(),10);return(0,q.formatGridTrackRepeat)(e)}const r=W.findIdByLabel(a.label);return resolveCssVariable(r,a)});var{registerVariableType:J,getVariableType:Y,getVariableTypes:Q,hasVariableType:Z}=function createVariableTypeRegistry(){const e={},registerTransformer=(e,t)=>{T.styleTransformersRegistry.register(e,t??X)},registerInheritanceTransformer=e=>{T.stylesInheritanceTransformersRegistry.register(e,K)};return{registerVariableType:({key:t,icon:a,startIcon:r,valueField:n,propTypeUtil:l,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:c,styleTransformer:u,fallbackPropTypeUtil:p,isCompatible:d,emptyState:m,isActive:b=!0,menuActionsFactory:v})=>{const g=t??l.key;d||(d=(e,t)=>"union"===e.kind&&t.type in e.prop_types),e[g]={icon:a,startIcon:r,valueField:n,propTypeUtil:l,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:c,fallbackPropTypeUtil:p,isCompatible:d,emptyState:m,isActive:b,menuActionsFactory:v},registerTransformer(l.key,u),registerInheritanceTransformer(l.key)},getVariableType:t=>e[t],getVariableTypes:()=>e,hasVariableType:t=>t in e&&!!e[t].isActive}}();function getMenuActionsForVariable(e,t){const a=Y(e);return a?.menuActionsFactory?a.menuActionsFactory(t):[]}var ee=__toESM(a(97557)),te=a(70374),ae=a(79513),re=a(27723),DeleteConfirmationDialog=({open:e,label:t,closeDialog:a,onConfirm:r})=>ee.createElement(te.ConfirmationDialog,{open:e,onClose:a},ee.createElement(te.ConfirmationDialog.Title,null,(0,re.__)("Delete this variable?","elementor")),ee.createElement(te.ConfirmationDialog.Content,null,ee.createElement(te.ConfirmationDialog.ContentText,null,(0,re.__)("All elements using","elementor")," ",ee.createElement(ae.Typography,{variant:"subtitle2",component:"span",sx:{lineBreak:"anywhere"}},t)," ",(0,re.__)("will keep their current values, but the variable itself will be removed.","elementor"))),ee.createElement(te.ConfirmationDialog.Actions,{onClose:a,onConfirm:r})),ne=__toESM(a(97557)),le=a(79513),oe=a(27723),ie=a(46400),usePermissions=()=>{const{canUser:e,isAdmin:t}=(0,ie.useCurrentUserCapabilities)();return{canAssign:()=>e("edit_posts"),canUnlink:()=>e("edit_posts"),canAdd:()=>t,canDelete:()=>t,canEdit:()=>t,canRestore:()=>t,canManageSettings:()=>t}},EmptyState=({icon:e,title:t,message:a,onAdd:r,children:n})=>{const l=usePermissions().canAdd(),o=l?t:(0,oe.__)("There are no variables","elementor"),i=l?a:(0,oe.__)("With your current role, you can only connect and detach variables.","elementor");return ne.createElement(Content,{title:o,message:i,icon:e},n||r&&ne.createElement(le.Button,{variant:"outlined",color:"secondary",size:"small",onClick:r},(0,oe.__)("Create a variable","elementor")))};function Content({title:e,message:t,icon:a,children:r}){return ne.createElement(le.Stack,{gap:1,alignItems:"center",justifyContent:"flex-start",height:"100%",color:"text.secondary",sx:{p:2.5,pt:8,pb:5.5}},a,ne.createElement(le.Typography,{align:"center",variant:"subtitle2"},e),ne.createElement(le.Typography,{align:"center",variant:"caption",maxWidth:"180px"},t),r)}var se=__toESM(a(97557)),ce=a(79513),ue=a(27723),NoSearchResults=({searchValue:e,onClear:t,icon:a})=>se.createElement(ce.Stack,{gap:1,alignItems:"center",justifyContent:"center",p:2.5,color:"text.secondary",sx:{pb:3.5,pt:8}},a,se.createElement(ce.Typography,{align:"center",variant:"subtitle2"},(0,ue.__)("Sorry, nothing matched","elementor"),se.createElement("br",null),"“",e,"”."),se.createElement(ce.Typography,{align:"center",variant:"caption",sx:{display:"flex",flexDirection:"column"}},(0,ue.__)("Try something else.","elementor"),se.createElement(ce.Link,{color:"text.secondary",variant:"caption",component:"button",onClick:t},(0,ue.__)("Clear & try again","elementor")))),pe=a(97557),useAutoEdit=()=>{const[e,t]=(0,pe.useState)(void 0);return{autoEditVariableId:e,startAutoEdit:(0,pe.useCallback)(e=>{t(e)},[]),handleAutoEditComplete:(0,pe.useCallback)(()=>{setTimeout(()=>{t(void 0)},100)},[])}},de=a(97557),useErrorNavigation=()=>{const e=(0,de.useRef)(0);return{createNavigationCallback:(0,de.useCallback)((t,a,r)=>()=>{if(!t?.length)return;const n=e.current,l=t[n];if(l){a(l);const o=n+1;o>=t.length?(r(),e.current=0):e.current=o}},[]),resetNavigation:(0,de.useCallback)(()=>{e.current=0},[])}},me=a(97557),be=a(97557),ve=a(77394),ge=__toESM(a(97557)),ye=a(97557),he=(0,ye.createContext)(null);function VariableTypeProvider({children:e,propTypeKey:t}){return ge.createElement(he.Provider,{value:t},e)}function useVariableType(){const e=(0,ye.useContext)(he);if(null===e)throw new Error("useVariableType must be used within a VariableTypeProvider");return Y(e)}function filterBySearch(e,t){const a=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(a))}var variablesToList=e=>Object.entries(e).map(([e,t])=>({key:e,...t})),toNormalizedVariable=({key:e,label:t,value:a,order:r,sync_to_v3:n})=>({key:e,label:t,value:a,order:r,sync_to_v3:n}),getVariables=(e=!0)=>{const t=W.variables();return e?t:Object.fromEntries(Object.entries(t).filter(([,e])=>!e.deleted))},hasVariable=e=>void 0!==getVariables()[e],useVariable=e=>getVariable(e);function getVariable(e){const t=getVariables();return t?.[e]?{...t[e],key:e}:null}var useVariableSelectionFilter=e=>{const{selectionFilter:t}=useVariableType(),{propType:a}=(0,ve.useBoundProp)();return t?t(e,a):e},usePropVariables=e=>(0,be.useMemo)(()=>normalizeVariables(e),[e]),normalizeVariables=e=>{const t=getVariables(!1),a=(e=>{const t=[],a=Q(),r=Y(e);return Object.entries(a).forEach(([e,a])=>{r.variableType===a.variableType&&t.push(e)}),t})(e);return variablesToList(t).filter(e=>a.includes(e.type)).map(toNormalizedVariable)},extractId=({id:e})=>e,restoreVariable=(e,t,a,r)=>W.restore(e,t,a,r).then(extractId),Ee="-Copy",trimToFit=(e,t)=>{const a=e+t;return a.length<=50?a:e.slice(0,50-t.length)+t},generateDuplicateLabel=(e,t)=>{const a=new Set(t),r=trimToFit(e,Ee);if(!a.has(r))return r;for(let t=2;t<=a.size+1;t++){const r=trimToFit(e,`${Ee}-${t}`);if(!a.has(r))return r}return r},useVariablesManagerState=()=>{const[e,t]=(0,me.useState)(()=>getVariables(!1)),[a,r]=(0,me.useState)([]),[n,l]=(0,me.useState)(!1),[o,i]=(0,me.useState)(!1),[s,c]=(0,me.useState)(!1),[u,p]=(0,me.useState)("");(0,me.useEffect)(()=>{const handleStorageUpdated=()=>{t(getVariables(!1)),r([]),i(!1)};return window.addEventListener(B,handleStorageUpdated),()=>{window.removeEventListener(B,handleStorageUpdated)}},[]);const d=(0,me.useCallback)(a=>{Object.entries(a).some(([t,a])=>{const r=e[t];return!r||(r.label!==a.label||r.value!==a.value||r.order!==a.order||r.type!==a.type||(r.sync_to_v3??!1)!==(a.sync_to_v3??!1))})&&(t({...e,...a}),i(!0))},[e]),m=(0,me.useCallback)((e,a,r)=>{const n=generateTempId(),l={id:n,label:a.trim(),value:r.trim(),type:e};return t(e=>({...e,[n]:l})),i(!0),n},[]),b=(0,me.useCallback)(e=>{const a=generateTempId();return t(t=>{const r=t[e];if(!r||r.deleted)return t;const n=Object.values(t).filter(e=>!e.deleted).map(e=>e.label);return{...t,[a]:{label:generateDuplicateLabel(r.label,n),value:r.value,type:r.type}}}),i(!0),a},[]),v=(0,me.useCallback)(e=>{r(t=>[...t,e]),t(t=>({...t,[e]:{...t[e],deleted:!0}})),i(!0)},[]),g=(0,me.useCallback)(e=>{t(t=>({...t,[e]:{...t[e],sync_to_v3:!0}})),i(!0)},[]),y=(0,me.useCallback)(e=>{t(t=>({...t,[e]:{...t[e],sync_to_v3:!1}})),i(!0)},[]),h=(0,me.useCallback)(async()=>{const n=getVariables(!1);c(!0);const l=await W.batchSave(n,e,a);if(l.success){await W.load();const e=W.variables();t(e),r([]),i(!1)}return{success:l.success}},[e,a]),E=(0,me.useCallback)(()=>{const t=((e,t)=>{const a={};return e.forEach(e=>(a[e.type]??=[]).push(e)),Object.entries(a).flatMap(([e,a])=>{const r=t[e]?.selectionFilter,n=a.map(toNormalizedVariable);return(r?.(n)??n).map(t=>({...t,type:e}))})})(variablesToList(e).filter(e=>!e.deleted),Q()),a=filterBySearch(t,u);return Object.fromEntries(a.map(({key:e,...t})=>[e,t]))},[e,u]);return{variables:E(),deletedVariables:a,isDirty:o,isSaveDisabled:n,handleOnChange:d,createVariable:m,duplicateVariable:b,handleDeleteVariable:v,handleStartSync:g,handleStopSync:y,handleSave:h,isSaving:s,handleSearch:e=>{p(e)},searchValue:u,setIsSaving:c,setIsSaveDisabled:l}},fe=__toESM(a(97557)),Ce=a(97557),_e=a(24413),Te=a(79513),Se=a(22444),we=a(27723),useQuotaPermissions=e=>{const t={...window.ElementorVariablesQuotaConfig??{},...window.ElementorVariablesQuotaConfigExtended??{}},a=void 0===t[e]&&window.elementorPro,r=t[e]||0,n=a||r>0;return{canAdd:()=>n,canEdit:()=>n}},ke=__toESM(a(97557)),xe=a(97557),Ve=a(77394),Ae=a(70374),Ie=a(79513),Pe=a(22444),ze=a(27723),Re=(0,xe.forwardRef)(({variableType:e,upgradeUrl:t,trackingData:a},r)=>{const[n,l]=(0,xe.useState)(!1);(0,Ae.useCanvasClickHandler)(n,()=>l(!1));const o=(0,xe.useCallback)(()=>{l(e=>(e||(0,Ve.trackViewPromotion)(a),!e))},[a]);(0,xe.useImperativeHandle)(r,()=>({toggle:o}),[o]);const i=(0,ze.sprintf)((0,ze.__)("%s variables","elementor"),(0,Pe.capitalize)(e)),s=(0,ze.sprintf)((0,ze.__)("Upgrade to continue creating and editing %s variables.","elementor"),e);return ke.createElement(Ae.PromotionPopover,{open:n,title:i,content:s,ctaText:(0,ze.__)("Upgrade now","elementor"),ctaUrl:t,onClose:e=>{e.stopPropagation(),l(!1)},onCtaClick:()=>(0,Ve.trackUpgradePromotionClick)(a)},ke.createElement(Ie.Box,{onClick:e=>{e.stopPropagation(),o()},sx:{cursor:"pointer",display:"inline-flex"}},ke.createElement(Ae.PromotionChip,null)))}),Le={target_name:"variables_manager",target_location:"variables_manager",location_l1:"create variable menu"},De="tiny",VariableManagerCreateMenu=({variables:e,onCreate:t,menuState:a,outlinedTrigger:r=!1})=>{const n=(0,Ce.useRef)(null),l=Q(),o=(0,Ce.useMemo)(()=>Object.entries(l).filter(([,e])=>!!e.defaultValue).map(([e,t])=>({key:e,propTypeKey:t.propTypeUtil.key,variableType:t.variableType,defaultValue:t.defaultValue||"",icon:t.icon})),[l]);return fe.createElement(fe.Fragment,null,fe.createElement(Te.IconButton,{...(0,Te.bindTrigger)(a),ref:n,size:De,variant:r?"outlined":void 0,"aria-label":(0,we.__)("Add variable","elementor")},fe.createElement(_e.PlusIcon,{fontSize:De})),fe.createElement(Te.Menu,{disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6},...(0,Te.bindMenu)(a),anchorEl:n.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},"data-testid":"variable-manager-create-menu"},o.map(r=>fe.createElement(MenuOption,{key:r.key,config:r,variables:e,onCreate:t,onClose:a.close}))))},MenuOption=({config:e,variables:t,onCreate:a,onClose:r})=>{const n=(0,Ce.useRef)(null),l=useQuotaPermissions(e.propTypeKey),o=(0,Se.capitalize)(e.variableType),i=!l.canAdd();return fe.createElement(Te.MenuItem,{onClick:()=>{if(i)return void n.current?.toggle();const l=getDefaultName(t,e.variableType);a(e.key,l,e.defaultValue),trackVariablesManagerEvent({action:"add",varType:e.variableType}),r()},sx:{gap:1.5,cursor:"pointer"}},(0,Ce.createElement)(e.icon,{fontSize:De,color:i?"disabled":"action"}),fe.createElement(Te.Typography,{variant:"caption",color:i?"text.disabled":"text.primary"},o),i&&fe.createElement(Re,{variableType:e.variableType,upgradeUrl:`https://go.elementor.com/go-pro-manager-${e.variableType}-variable/`,ref:n,trackingData:Le}))},getDefaultName=(e,t)=>{const a=new RegExp(`^${t}-(\\d+)$`,"i"),r=new Set;Object.values(e).forEach(e=>{const t=e.label.match(a);t&&r.add(parseInt(t[1],10))});let n=1;for(;r.has(n);)n++;return`${t}-${n}`},Ue=__toESM(a(97557)),Fe=a(97557),Be=a(79513),Oe=a(27723),Me=__toESM(a(97557)),Ne=a(79513),VariableTableCell=({children:e,isHeader:t,width:a,maxWidth:r,align:n,noPadding:l,sx:o})=>{const i={maxWidth:r??150,cursor:"initial",typography:"caption",...t&&{color:"text.primary",fontWeight:"bold"},...t&&!l&&{padding:"10px 16px"},...a&&{width:a},...o};return Me.createElement(Ne.TableCell,{size:"small",padding:l?"none":void 0,align:n,sx:i},e)},je=__toESM(a(97557)),$e=a(97557),Ge=a(70374),He=a(24413),We=a(79513),Ke=__toESM(a(97557)),qe=a(97557),Xe=a(70374),Je=a(79513);function isLabelEqual(e,t){return e.trim().toLowerCase()===t.trim().toLowerCase()}var useLabelError=e=>{const[t,a]=(0,qe.useState)(e??{value:"",message:""});return{labelFieldError:t,setLabelFieldError:a}},LabelField=({value:e,error:t,onChange:a,id:r,onErrorChange:n,size:l="tiny",focusOnShow:o=!1,selectOnShow:i=!1,showWarningInfotip:s=!1,variables:c,onKeyDown:u})=>{const[p,d]=(0,qe.useState)(e),[m,b]=(0,qe.useState)(""),v=(0,qe.useRef)(null);let g=m;isLabelEqual(p,t?.value??"")&&t?.message&&(g=t.message);const y=g?"":labelHint(p),h=Ke.createElement(Je.TextField,{ref:v,id:r,size:l,fullWidth:!0,value:p,error:!!g,onChange:e=>(e=>{d(e);const r=validateLabel(e,c);b(r),n?.(r),a(isLabelEqual(e,t?.value??"")||r?"":e)})(e.target.value),inputProps:{maxLength:50,...i&&{onFocus:e=>e.target.select()},"aria-label":"Name",onKeyDown:u},autoFocus:o});if(s){const e=Math.max(240,v.current?.getBoundingClientRect().width??240);return Ke.createElement(Xe.WarningInfotip,{open:Boolean(g||y),text:g||y,placement:"bottom-start",width:e,offset:[0,-15],...y&&{hasError:!1}},h)}return h},Ye=__toESM(a(97557)),Qe=a(97557),Ze=a(79513),et=Ye.memo(({initialValue:e,children:t,editableElement:a,onChange:r,prefixElement:n,autoEdit:l=!1,onRowRef:o,onAutoEditComplete:i,gap:s=1,fieldType:c,disabled:u=!1})=>{const[p,d]=(0,Qe.useState)(e),[m,b]=(0,Qe.useState)(!1),{labelFieldError:v,setLabelFieldError:g}=useLabelError(),[y,h]=(0,Qe.useState)(""),E=(0,Qe.useRef)(null),f=(0,Qe.useCallback)(()=>{"label"===c&&v?.message||"value"===c&&y||r(p),b(!1)},[p,r,c,v,y]);(0,Qe.useEffect)(()=>{o?.(E?.current)},[o]),(0,Qe.useEffect)(()=>{!l||m||u||(b(!0),i?.())},[l,m,i,u]);const handleDoubleClick=()=>{u||b(!0)},handleKeyDown=e=>{u||("Enter"===e.key?f():"Escape"===e.key&&b(!1)," "!==e.key||m||(e.preventDefault(),b(!0)))},C=(0,Qe.useCallback)(e=>{d(e)},[]),_=(0,Qe.useCallback)(e=>{"label"===c?g({value:p,message:e}):h(e)},[c,p,g,h]);let T;"label"===c?T=v:"value"===c&&(T={value:p,message:y});const S=a({value:p,onChange:C,onValidationChange:_,error:T});return m?Ye.createElement(Ze.ClickAwayListener,{onClickAway:f},Ye.createElement(Ze.Stack,{ref:E,direction:"row",alignItems:"center",gap:s,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:0,role:"button","aria-label":"Double click or press Space to edit"},n,S)):Ye.createElement(Ze.Stack,{ref:E,direction:"row",alignItems:"center",gap:s,onDoubleClick:handleDoubleClick,onKeyDown:handleKeyDown,tabIndex:u?-1:0,role:"button","aria-label":u?"":"Double click or press Space to edit"},n,t)}),tt=__toESM(a(97557)),at=a(97557),rt=a(24413),nt=a(79513),VariableEditMenu=({menuActions:e,disabled:t,itemId:a})=>{const r=(0,nt.usePopupState)({variant:"popover"}),n=(0,nt.bindTrigger)(r);return tt.createElement(tt.Fragment,null,tt.createElement(nt.IconButton,{...n,disabled:t,size:"tiny",onClick:e=>{e.stopPropagation(),n.onClick?.(e)}},tt.createElement(rt.DotsVerticalIcon,{fontSize:"tiny"})),tt.createElement(nt.Menu,{disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6},...(0,nt.bindMenu)(r),anchorEl:r.anchorEl,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},open:r.isOpen,onClose:r.close},e.map(e=>tt.createElement(nt.MenuItem,{key:e.name,onClick:t=>{t.stopPropagation(),e.onClick?.(a),r.close()},sx:{color:e.color,gap:1}},e.icon&&(0,at.createElement)(e.icon,{fontSize:"inherit"})," ",e.name))))},lt={target_name:"variables_manager",target_location:"variables_manager"},VariableRow=e=>{const{row:t,variables:a,handleOnChange:r,autoEditVariableId:n,onAutoEditComplete:l,onFieldError:o,menuActions:i,handleRowRef:s,itemProps:c,showDropIndication:u,triggerProps:p,itemStyle:d,triggerStyle:m,isDragged:b,dropPosition:v,setTriggerRef:g,isSorting:y}=e,h=(0,$e.useRef)(null),E=!useQuotaPermissions(t.type).canEdit(),f=u&&"before"===v,C=u&&"after"===v;return je.createElement(We.TableRow,{...c,ref:c.ref,selected:b,sx:{...E&&{"& td, & th":{color:"text.disabled"}},...f&&{"& td, & th":{borderTop:"2px solid",borderTopColor:"primary.main"}},...C&&{"& td, & th":{borderBottom:"2px solid",borderBottomColor:"primary.main"}},"&:hover, &:focus-within":{backgroundColor:"action.hover",'& [role="toolbar"], & [draggable]':{opacity:1}},'& [role="toolbar"], & [draggable]':{opacity:0}},style:{...d,...m},onClick:()=>{E&&h.current?.toggle()}},je.createElement(VariableTableCell,{noPadding:!0,width:10,maxWidth:10},je.createElement(We.IconButton,{size:"small",ref:g,...p,disabled:y,draggable:!0},je.createElement(He.GripVerticalIcon,{fontSize:"inherit"}))),je.createElement(VariableTableCell,null,je.createElement(et,{initialValue:t.name,onChange:e=>{e===t.name||E||r({...a,[t.id]:{...a[t.id],label:e}})},prefixElement:(0,$e.createElement)(t.icon,{fontSize:"inherit",color:E?"disabled":"inherit"}),editableElement:({value:e,onChange:r,onValidationChange:l,error:i})=>je.createElement(LabelField,{id:"variable-label-"+t.id,size:"tiny",value:e,onChange:r,onErrorChange:e=>{l?.(e),o?.(!!e)},error:i,focusOnShow:!0,selectOnShow:n===t.id,showWarningInfotip:!0,variables:a}),autoEdit:n===t.id&&!E,onRowRef:s(t.id),onAutoEditComplete:n===t.id?l:void 0,fieldType:"label",disabled:E},je.createElement(Ge.EllipsisWithTooltip,{title:t.name,sx:{border:"4px solid transparent"}},t.name))),je.createElement(VariableTableCell,null,je.createElement(et,{initialValue:t.value,onChange:e=>{e===t.value||E||r({...a,[t.id]:{...a[t.id],value:e}})},editableElement:({value:e,onChange:n,onValidationChange:l,error:i})=>t.valueField?.({value:e,onChange:n,onPropTypeKeyChange:e=>{E||e===t.type||r({...a,[t.id]:{...a[t.id],type:e}})},propTypeKey:t.type,onValidationChange:e=>{l?.(e),o?.(!!e)},error:i})??je.createElement(je.Fragment,null),onRowRef:s(t.id),gap:.25,fieldType:"value",disabled:E},t.startIcon&&t.startIcon({value:t.value}),je.createElement(Ge.EllipsisWithTooltip,{title:t.value,sx:{border:"4px solid transparent",lineHeight:"1",pt:.25}},t.value))),je.createElement(VariableTableCell,{align:"right",noPadding:!0,width:16,maxWidth:16,sx:{paddingInlineEnd:1}},je.createElement(We.Stack,{role:"toolbar",direction:"row",justifyContent:"flex-end",alignItems:"center"},E&&je.createElement(Re,{variableType:t.variableType,upgradeUrl:`https://go.elementor.com/renew-license-manager-${t.variableType}-variable`,ref:h,trackingData:lt}),je.createElement(VariableEditMenu,{menuActions:i(t.id),disabled:y,itemId:t.id}))))},VariablesManagerTable=({menuActions:e,variables:t,onChange:a,autoEditVariableId:r,onAutoEditComplete:n,onFieldError:l})=>{const o=(0,Fe.useRef)(null),i=(0,Fe.useRef)(new Map);(0,Fe.useEffect)(()=>{if(r&&o.current){const e=i.current.get(r);e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},100)}},[r]);const handleRowRef=e=>t=>{t?i.current.set(e,t):i.current.delete(e)},s=Object.keys(t).sort(function sortVariablesOrder(e){return(t,a)=>(e[t]?.order??Number.MAX_SAFE_INTEGER)-(e[a]?.order??Number.MAX_SAFE_INTEGER)}(t)),c=s.map(e=>{const a=t[e],r=Y(a.type);return r?{id:e,type:a.type,name:a.label,value:a.value,...r}:null}).filter(Boolean),u={minWidth:250,tableLayout:"fixed"};return Ue.createElement(Be.TableContainer,{ref:o,sx:{overflow:"initial"}},Ue.createElement(Be.Table,{sx:u,"aria-label":"Variables manager list with drag and drop reordering",stickyHeader:!0},Ue.createElement(Be.TableHead,null,Ue.createElement(Be.TableRow,null,Ue.createElement(VariableTableCell,{isHeader:!0,noPadding:!0,width:10,maxWidth:10}),Ue.createElement(VariableTableCell,{isHeader:!0},(0,Oe.__)("Name","elementor")),Ue.createElement(VariableTableCell,{isHeader:!0},(0,Oe.__)("Value","elementor")),Ue.createElement(VariableTableCell,{isHeader:!0,noPadding:!0,width:16,maxWidth:16}))),Ue.createElement(Be.TableBody,null,Ue.createElement(Be.UnstableSortableProvider,{value:s,onChange:e=>{const r={...t};e.forEach((e,t)=>{const a=r[e];a&&(r[e]=Object.assign({},a,{order:t+1}))}),a(r)},variant:"static",restrictAxis:!0,dragOverlay:({children:e,...t})=>Ue.createElement(Be.Table,{sx:u,...t},Ue.createElement(Be.TableBody,null,e))},c.map(o=>Ue.createElement(Be.UnstableSortableItem,{key:o.id,id:o.id,render:i=>Ue.createElement(VariableRow,{...i,row:o,variables:t,handleOnChange:a,autoEditVariableId:r,onAutoEditComplete:n,onFieldError:l,menuActions:e,handleRowRef:handleRowRef})}))))))};var ot="stop-sync-variable";function VariablesManagerPanelEmbedded({onRequestClose:e,onExposeCloseAttempt:t}){return p.createElement(VariablesManagerPanelContent,{onRequestClose:e,onExposeCloseAttempt:t})}function VariablesManagerPanelContent({onRequestClose:e,onExposeCloseAttempt:t}){const{open:a,close:r,isOpen:n}=(0,v.useDialog)(),[l]=(0,m.useSuppressedMessage)(ot),o=(0,y.usePopupState)({variant:"popover"}),{variables:i,isDirty:s,searchValue:c,isSaveDisabled:u,handleOnChange:E,createVariable:f,duplicateVariable:C,handleDeleteVariable:_,handleStartSync:T,handleStopSync:S,handleSave:w,isSaving:k,handleSearch:x,setIsSaving:V,setIsSaveDisabled:A}=useVariablesManagerState(),{autoEditVariableId:I,startAutoEdit:P,handleAutoEditComplete:z}=useAutoEdit(),{createNavigationCallback:R,resetNavigation:L}=useErrorNavigation(),[D,U]=(0,d.useState)(null),[F,B]=(0,d.useState)(null),[O,M]=(0,d.useState)(null);usePreventUnload(s);const N=(0,d.useCallback)(()=>{s?a():e()},[s,a,e]);(0,d.useEffect)(()=>{if(t)return t(()=>N()),()=>t(null)},[t,N]);const j=(0,d.useCallback)((e,t,a)=>{const r=f(e,t,a);r&&P(r)},[f,P]),handleSaveClick=async()=>{try{M(null),L();const e=await w();return trackVariablesManagerEvent({action:"saveChanges"}),e}catch(e){const t=mapServerError(e),a=t?.action?.data?.duplicatedIds;return t&&"label"===t.field&&(a&&t.action&&(t.action.callback=R(a,P,()=>{A(!1)})),M(t),A(!0),L()),{success:!1,error:t}}finally{V(!1)}},$=(0,d.useCallback)(e=>{_(e),U(null)},[_]),G=(0,d.useCallback)(e=>{S(e);const t=i[e];t&&trackVariableSyncToV3({variableLabel:t.label,action:"unsync"})},[S,i]),H=(0,d.useCallback)(e=>{T(e);const t=i[e];t&&trackVariableSyncToV3({variableLabel:t.label,action:"sync"})},[T,i]),W=(0,d.useCallback)(e=>{l?G(e):B(e)},[l,G]),K=(0,d.useCallback)(e=>{const t=i[e];if(!t)return[];return[...getMenuActionsForVariable(t.type,{variable:t,variableId:e,handlers:{onStartSync:H,onStopSync:W}}),{name:(0,h.__)("Duplicate","elementor"),icon:g.CopyIcon,color:"text.primary",onClick:e=>{const a=C(e);P(a);const r=Y(t.type);trackVariablesManagerEvent({action:"duplicate",varType:r?.variableType})}},{name:(0,h.__)("Delete","elementor"),icon:g.TrashIcon,color:"error.main",onClick:e=>{const t=i[e];if(t){U({id:e,label:t.label});const a=Y(t.type);trackVariablesManagerEvent({action:"delete",varType:a?.variableType})}}}]},[i,H,W,C,P]),q=Object.keys(i).length>0;return p.createElement(p.Fragment,null,p.createElement(y.Stack,{direction:"column",sx:{height:"100%",width:"100%",flex:1,minHeight:0,overflow:"hidden"}},p.createElement(y.Stack,{direction:"row",alignItems:"center",spacing:1,width:"100%",sx:{flexShrink:0,px:2,pb:1}},p.createElement(v.SearchField,{placeholder:(0,h.__)("Search","elementor"),value:c,onSearch:x,sx:{flex:1,minWidth:0,px:0,py:0,display:"flex",alignItems:"center",alignSelf:"stretch"}}),p.createElement(y.Box,{sx:{display:"flex",flexShrink:0,alignItems:"center"}},p.createElement(VariableManagerCreateMenu,{outlinedTrigger:!0,onCreate:j,variables:i,menuState:o}))),p.createElement(y.Divider,{sx:{width:"100%"}}),p.createElement(b.PanelBody,{sx:{display:"flex",flexDirection:"column",flex:1,minHeight:0}},q&&p.createElement(VariablesManagerTable,{menuActions:K,variables:i,onChange:E,autoEditVariableId:I,onAutoEditComplete:z,onFieldError:A}),!q&&c&&p.createElement(NoSearchResults,{searchValue:c,onClear:()=>x(""),icon:p.createElement(g.ColorFilterIcon,{fontSize:"large"})}),!q&&!c&&p.createElement(EmptyState,{title:(0,h.__)("Create your first variable","elementor"),message:(0,h.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:p.createElement(g.ColorFilterIcon,{fontSize:"large"}),onAdd:o.open})),p.createElement(b.PanelFooter,null,p.createElement(y.Infotip,{placement:"right",open:!!O,content:O?p.createElement(y.Alert,{severity:O.severity??"error",action:O.action?.label?p.createElement(y.AlertAction,{onClick:O.action.callback},O.action.label):void 0,onClose:O.action?.label?void 0:()=>{M(null),A(!1)},icon:O.IconComponent?p.createElement(O.IconComponent,null):p.createElement(g.AlertTriangleFilledIcon,null)},p.createElement(y.AlertTitle,null,O.message),O.action?.message):null,arrow:!1,slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[-10,10]}}]}}},p.createElement(y.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",disabled:u||!s||k,onClick:handleSaveClick,loading:k},(0,h.__)("Save changes","elementor"))))),D&&p.createElement(DeleteConfirmationDialog,{open:!0,label:D.label,onConfirm:()=>$(D.id),closeDialog:()=>U(null)}),F&&p.createElement(StopSyncConfirmationDialog,{open:!0,onClose:()=>B(null),onConfirm:()=>{G(F),B(null)}}),n&&p.createElement(v.SaveChangesDialog,null,p.createElement(v.SaveChangesDialog.Title,{onClose:r},(0,h.__)("You have unsaved changes","elementor")),p.createElement(v.SaveChangesDialog.Content,null,p.createElement(v.SaveChangesDialog.ContentText,null,(0,h.__)("You have unsaved changes in the Variables Manager.","elementor")),p.createElement(v.SaveChangesDialog.ContentText,null,(0,h.__)("To avoid losing your updates, save your changes before leaving.","elementor"))),p.createElement(v.SaveChangesDialog.Actions,{actions:{discard:{label:(0,h.__)("Discard","elementor"),action:()=>{r(),e()}},confirm:{label:(0,h.__)("Save","elementor"),action:async()=>{const t=await handleSaveClick();r(),t?.success&&e()}}}})))}var usePreventUnload=e=>{(0,d.useEffect)(()=>{const handleBeforeUnload=t=>{e&&t.preventDefault()};return window.addEventListener("beforeunload",handleBeforeUnload),()=>{window.removeEventListener("beforeunload",handleBeforeUnload)}},[e])},StopSyncConfirmationDialog=({open:e,onClose:t,onConfirm:a})=>{const[,r]=(0,m.useSuppressedMessage)(ot);return p.createElement(v.ConfirmationDialog,{open:e,onClose:t},p.createElement(v.ConfirmationDialog.Title,{icon:g.ColorFilterIcon,iconColor:"primary"},(0,h.__)("Stop syncing variable color","elementor")),p.createElement(v.ConfirmationDialog.Content,null,p.createElement(v.ConfirmationDialog.ContentText,null,(0,h.__)("This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.","elementor"))),p.createElement(v.ConfirmationDialog.Actions,{onClose:t,onConfirm:a,cancelLabel:(0,h.__)("Cancel","elementor"),confirmLabel:(0,h.__)("Got it","elementor"),color:"primary",onSuppressMessage:r,suppressLabel:(0,h.__)("Don't show again","elementor")}))},it=a(22504),st=a(77394),ct=a(55534),ut=a(2020),pt=a(27987),dt=a(97557),mt=a(82148);function GlobalStylesImportListener(){return(0,dt.useEffect)(()=>{const handleGlobalStylesImported=()=>{W.load()};return window.addEventListener(mt.GLOBAL_STYLES_IMPORTED_EVENT,handleGlobalStylesImported),()=>{window.removeEventListener(mt.GLOBAL_STYLES_IMPORTED_EVENT,handleGlobalStylesImported)}},[]),null}var bt=__toESM(a(97557)),vt=a(77394),gt=a(97557),yt=__toESM(a(97557)),ht=a(77394),Et=a(24413),ft=a(79513);function createUnlinkHandler(e,t,a){return()=>{const{fallbackPropTypeUtil:r}=Y(t),n=function transformValueBeforeUnlink(e,t){const{valueTransformer:a}=Y(t);return a?a(e.value,e.type):e.value}(e,t);a(r.create(n))}}var Ct=__toESM(a(97557)),_t=a(97557),Tt=a(5527),St=__toESM(a(97557)),wt=a(97557),kt=a(79513),xt=(0,wt.createContext)(null),PopoverContentRefContextProvider=({children:e})=>{const[t,a]=(0,wt.useState)(null);return St.createElement(xt.Provider,{value:t},St.createElement(kt.Box,{ref:a},e))},usePopoverContentRef=()=>(0,wt.useContext)(xt),Vt=__toESM(a(97557)),At=a(97557),It=a(77394),Pt=a(70374),zt=a(24413),Rt=a(79513),Lt=a(27723),Dt=a(77394),Ut=a(77394),Ft=a(2020),useVariableBoundProp=()=>{const{propTypeUtil:e}=useVariableType(),t=(0,Ut.useBoundProp)(e);return{...t,setVariableValue:e=>resolveBoundPropAndSetValue(e,t),variableId:t.value??t.placeholder}},resolveBoundPropAndSetValue=(e,t)=>{const a=unwrapValue(t.value),r=unwrapValue(t.placeholder),n=unwrapValue(e);return a||r!==n?t.setValue(e):t.setValue(null)},unwrapValue=e=>(0,Ft.isTransformable)(e)?e.value:e,Bt=__toESM(a(97557)),Ot=a(79513),FormField=({id:e,label:t,errorMsg:a,noticeMsg:r,children:n})=>Bt.createElement(Ot.Grid,{container:!0,gap:.75,alignItems:"center"},Bt.createElement(Ot.Grid,{item:!0,xs:12},Bt.createElement(Ot.FormLabel,{htmlFor:e,size:"tiny"},t)),Bt.createElement(Ot.Grid,{item:!0,xs:12},n,a&&Bt.createElement(Ot.FormHelperText,{error:!0},a),r&&Bt.createElement(Ot.FormHelperText,null,r))),Mt="tiny",VariableCreation=({onGoBack:e,onClose:t})=>{const{icon:a,valueField:r,variableType:n,propTypeUtil:l}=useVariableType(),{setVariableValue:o,path:i}=useVariableBoundProp(),{propType:s}=(0,It.useBoundProp)(),c=(()=>{const{value:e}=(0,Dt.useBoundProp)(),t=Z(e?.$$type)&&Boolean(e?.value),a=useVariable(t?e.value:"");return t?a?a.value:"":e?.value??""})(),[u,p]=(0,At.useState)(c),[d,m]=(0,At.useState)(""),[b,v]=(0,At.useState)(""),[g,y]=(0,At.useState)(""),[h,E]=(0,At.useState)(l.key),{labelFieldError:f,setLabelFieldError:C}=useLabelError(),closePopover=()=>{p(""),m(""),v(""),y(""),t()},handleCreateAndTrack=()=>{var e;(e={value:u,label:d,type:h},W.create(e).then(extractId)).then(e=>{o(e),closePopover()}).catch(e=>{const t=mapServerError(e);if(t&&"label"===t.field)return m(""),void C({value:d,message:t.message});v(_.UNEXPECTED_ERROR)}),trackVariableEvent({varType:n,controlPath:i.join("."),action:"save"})},T=""===d.trim()||("string"==typeof u?""===u.trim():!1===Boolean(u))||!!b,handleKeyDown=e=>{"Enter"!==e.key||T||(e.preventDefault(),handleCreateAndTrack())};return Vt.createElement(Pt.SectionPopoverBody,{height:"auto"},Vt.createElement(Pt.PopoverHeader,{icon:Vt.createElement(Vt.Fragment,null,e&&Vt.createElement(Rt.IconButton,{size:Mt,"aria-label":(0,Lt.__)("Go Back","elementor"),onClick:e},Vt.createElement(zt.ArrowLeftIcon,{fontSize:Mt})),Vt.createElement(a,{fontSize:Mt})),title:(0,Lt.__)("Create variable","elementor"),onClose:closePopover}),Vt.createElement(Rt.Divider,null),Vt.createElement(It.PopoverContent,{p:2},Vt.createElement(FormField,{id:"variable-label",label:(0,Lt.__)("Name","elementor"),errorMsg:f?.message,noticeMsg:labelHint(d)},Vt.createElement(LabelField,{id:"variable-label",value:d,error:f,onChange:e=>{m(e),v("")},onErrorChange:e=>{C({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),r&&Vt.createElement(FormField,{errorMsg:g,label:(0,Lt.__)("Value","elementor")},Vt.createElement(Rt.Typography,{variant:"h5",id:"variable-value-wrapper"},Vt.createElement(r,{value:u,onPropTypeKeyChange:e=>E(e),onChange:e=>{p(e),v(""),y("")},onValidationChange:y,propType:s,onKeyDown:handleKeyDown}))),b&&Vt.createElement(Rt.FormHelperText,{error:!0},b)),Vt.createElement(Rt.CardActions,{sx:{pt:.5,pb:1}},Vt.createElement(Rt.Button,{id:"create-variable-button",size:"small",variant:"contained",disabled:T,onClick:handleCreateAndTrack},(0,Lt.__)("Create","elementor"))))},Nt=__toESM(a(97557)),jt=a(97557),$t=a(77394),Gt=a(46400),Ht=a(70374),Wt=a(24413),Kt=a(79513),qt=a(27723),Xt=__toESM(a(97557)),Jt=a(97557),Yt=a(24413),Qt=a(79513),Zt=a(27723),EditConfirmationDialog=({closeDialog:e,onConfirm:t,onSuppressMessage:a})=>{const[r,n]=(0,Jt.useState)(!1);return Xt.createElement(Qt.Dialog,{open:!0,onClose:e,maxWidth:"xs"},Xt.createElement(Qt.DialogTitle,{display:"flex",alignItems:"center",gap:1},Xt.createElement(Yt.AlertTriangleFilledIcon,{color:"secondary"}),(0,Zt.__)("Changes to variables go live right away.","elementor")),Xt.createElement(Qt.DialogContent,null,Xt.createElement(Qt.DialogContentText,{variant:"body2",color:"textPrimary"},(0,Zt.__)("Don't worry - all other changes you make will wait until you publish your site.","elementor"))),Xt.createElement(Qt.DialogActions,{sx:{justifyContent:"space-between",alignItems:"center"}},Xt.createElement(Qt.FormControlLabel,{control:Xt.createElement(Qt.Checkbox,{checked:r,onChange:e=>n(e.target.checked),size:"small"}),label:Xt.createElement(Qt.Typography,{variant:"body2"},(0,Zt.__)("Don't show me again","elementor"))}),Xt.createElement("div",null,Xt.createElement(Qt.Button,{color:"secondary",onClick:e},(0,Zt.__)("Keep editing","elementor")),Xt.createElement(Qt.Button,{variant:"contained",color:"secondary",onClick:()=>{r&&a?.(),t?.()},sx:{ml:1}},(0,Zt.__)("Save","elementor")))))},ea="tiny",ta=(0,qt.__)("Delete variable","elementor"),VariableEdit=({onClose:e,onGoBack:t,onSubmit:a,editId:r})=>{const{icon:n,valueField:l,variableType:o,propTypeUtil:i}=useVariableType(),{setVariableValue:s,variableId:c}=useVariableBoundProp(),{propType:u}=(0,$t.useBoundProp)(),[p,d]=(0,Gt.useSuppressedMessage)("edit-confirmation-dialog"),[m,b]=(0,jt.useState)(!1),[v,g]=(0,jt.useState)(!1),[y,h]=(0,jt.useState)(""),[E,f]=(0,jt.useState)(""),{labelFieldError:C,setLabelFieldError:T}=useLabelError(),S=useVariable(r),[w,k]=(0,jt.useState)(S?.type??i.key);if(!S)throw new Error(`Global ${o} variable not found`);const x=usePermissions(),[V,A]=(0,jt.useState)(()=>S.value),[I,P]=(0,jt.useState)(()=>S.label);(0,jt.useEffect)(()=>(G.update({[r]:{...S,value:V}}),()=>{G.update({[r]:{...S}})}),[r,V,S]);const handleUpdate=()=>{p?handleSaveVariable():g(!0)},handleSaveVariable=()=>{const e=w!==S.type;((e,{value:t,label:a,type:r})=>W.update(e,{value:t,label:a,type:r}).then(extractId))(r,e?{value:V,label:I,type:w}:{value:V,label:I}).then(()=>{maybeTriggerBoundPropChange(),a?.()}).catch(e=>{const t=mapServerError(e);if(t&&"label"===t.field)return P(""),void T({value:I,message:t.message});h(_.UNEXPECTED_ERROR)})},maybeTriggerBoundPropChange=()=>{r===c&&s(r)},handleDeleteConfirmation=()=>{b(!0)},z=[];x.canDelete()&&z.push(Nt.createElement(Kt.Tooltip,{key:"delete",placement:"top",title:ta},Nt.createElement(Kt.IconButton,{size:ea,onClick:handleDeleteConfirmation,"aria-label":ta},Nt.createElement(Wt.TrashIcon,{fontSize:ea}))));const R=V===S.value&&I===S.label||""===I.trim()||("string"==typeof V?""===V.trim():!1===Boolean(V))||!!y,handleKeyDown=e=>{"Enter"!==e.key||R||(e.preventDefault(),handleUpdate())};return Nt.createElement(Nt.Fragment,null,Nt.createElement(Ht.SectionPopoverBody,{height:"auto"},Nt.createElement(Ht.PopoverHeader,{title:(0,qt.__)("Edit variable","elementor"),onClose:e,icon:Nt.createElement(Nt.Fragment,null,t&&Nt.createElement(Kt.IconButton,{size:ea,"aria-label":(0,qt.__)("Go Back","elementor"),onClick:t},Nt.createElement(Wt.ArrowLeftIcon,{fontSize:ea})),Nt.createElement(n,{fontSize:ea})),actions:z}),Nt.createElement(Kt.Divider,null),Nt.createElement($t.PopoverContent,{p:2},Nt.createElement(FormField,{id:"variable-label",label:(0,qt.__)("Name","elementor"),errorMsg:C?.message,noticeMsg:labelHint(I)},Nt.createElement(LabelField,{id:"variable-label",value:I,error:C,onChange:e=>{P(e),h("")},onErrorChange:e=>{T({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),l&&Nt.createElement(FormField,{errorMsg:E,label:(0,qt.__)("Value","elementor")},Nt.createElement(Kt.Typography,{variant:"h5"},Nt.createElement(l,{propTypeKey:S.type,onPropTypeKeyChange:e=>k(e),value:V,onChange:e=>{A(e),h(""),f("")},onKeyDown:handleKeyDown,onValidationChange:f,propType:u}))),y&&Nt.createElement(Kt.FormHelperText,{error:!0},y)),Nt.createElement(Kt.CardActions,{sx:{pt:.5,pb:1}},Nt.createElement(Kt.Button,{size:"small",variant:"contained",disabled:R,onClick:handleUpdate},(0,qt.__)("Save","elementor")))),m&&Nt.createElement(DeleteConfirmationDialog,{open:!0,label:I,onConfirm:()=>{var e;(e=r,W.delete(e).then(extractId)).then(()=>{maybeTriggerBoundPropChange(),a?.()})},closeDialog:()=>{b(!1)}}),v&&!p&&Nt.createElement(EditConfirmationDialog,{closeDialog:()=>{g(!1)},onConfirm:handleSaveVariable,onSuppressMessage:d}))},aa=a(97557),ra=__toESM(a(97557)),na=a(77394),la=a(70374),oa=a(70374),ia=a(24413),sa=a(79513),ca=a(27723),ua=__toESM(a(97557)),pa=a(70374),da=a(24413),ma=a(79513),ba=a(27723),va=(0,ba.__)("Edit variable","elementor"),MenuItemContent=({item:e,disabled:t=!1})=>{const a=e.onEdit;return ua.createElement(ua.Fragment,null,ua.createElement(ma.ListItemIcon,{sx:{color:t?"text.disabled":"inherit"}},e.icon),ua.createElement(ma.Box,{sx:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:1}},ua.createElement(pa.EllipsisWithTooltip,{title:e.label||e.value,as:ma.Typography,variant:"caption",color:t?"text.disabled":"text.primary",sx:{marginTop:"1px",lineHeight:"2"},maxWidth:"50%"}),e.secondaryText&&ua.createElement(pa.EllipsisWithTooltip,{title:e.secondaryText,as:ma.Typography,variant:"caption",color:t?"text.disabled":"text.tertiary",sx:{marginTop:"1px",lineHeight:"1"},maxWidth:"50%"})),!!a&&!t&&ua.createElement(ma.Tooltip,{placement:"top",title:va},ua.createElement(ma.IconButton,{sx:{mx:1,opacity:"0"},onClick:t=>{t.stopPropagation(),a(e.value)},"aria-label":va},ua.createElement(da.EditIcon,{color:"action",fontSize:"tiny"}))))},ga=a(79513),ya=(0,ga.styled)(ga.MenuList)(({theme:e,disabled:t})=>({"& > li":{height:32,width:"100%",display:"flex",alignItems:"center"},'& > [role="option"]':{...e.typography.caption,lineHeight:"inherit",padding:e.spacing(.5,1,.5,2),...!t&&{"&:hover, &:focus":{backgroundColor:e.palette.action.hover},cursor:"pointer"},'&[aria-selected="true"]':{backgroundColor:e.palette.action.selected},textOverflow:"ellipsis",position:"absolute",top:0,left:0,"&:hover .MuiIconButton-root, .MuiIconButton-root:focus":{opacity:1}},width:"100%",position:"relative"})),ha="tiny",Ea=(0,ca.__)("Create variable","elementor"),fa=(0,ca.__)("Variables Manager","elementor"),getProUpgradeUrl=e=>`https://go.elementor.com/renew-license-panel-${e}-variable`,VariablesSelection=({closePopover:e,onAdd:t,onEdit:a,onSettings:r,disabled:n=!1})=>{const{icon:l,startIcon:o,variableType:i,propTypeUtil:s,emptyState:c}=useVariableType(),{value:u,setValue:p,path:d}=useVariableBoundProp(),[m,b]=(0,aa.useState)(""),{list:v,hasMatches:g,isSourceNotEmpty:y,hasNoCompatibleVariables:h}=((e,t)=>{const a=usePropVariables(t),r=useVariableSelectionFilter(a),n=filterBySearch(r,e);return{list:n.sort((e,t)=>(e.order??Number.MAX_SAFE_INTEGER)-(t.order??Number.MAX_SAFE_INTEGER)),hasMatches:n.length>0,isSourceNotEmpty:r.length>0,hasNoCompatibleVariables:a.length>0&&0===r.length}})(m,s.key),onAddAndTrack=()=>{t?.(),trackVariableEvent({varType:i,controlPath:d.join("."),action:"add"})},E=[];if(t&&E.push(ra.createElement(sa.Tooltip,{key:"add",placement:"top",title:Ea},ra.createElement("span",null,ra.createElement(sa.IconButton,{id:"add-variable-button",size:ha,onClick:onAddAndTrack,"aria-label":Ea,disabled:n},ra.createElement(ia.PlusIcon,{fontSize:ha}))))),r){const handleOpenManager=()=>{r(),trackVariablesManagerEvent({action:"openManager",source:"vars-popover",varType:i,controlPath:d.join(".")})};E.push(ra.createElement(sa.Tooltip,{key:"settings",placement:"top",title:fa},ra.createElement(sa.IconButton,{id:"variables-manager-button",size:ha,onClick:handleOpenManager,"aria-label":fa},ra.createElement(ia.SettingsIcon,{fontSize:ha}))))}const f=o||(()=>ra.createElement(l,{fontSize:ha})),C=v.map(({value:e,label:t,key:r})=>({type:"item",value:r,label:t,icon:ra.createElement(f,{value:e}),secondaryText:e,onEdit:a?()=>a?.(r):void 0}));return(0,aa.useEffect)(()=>{n&&(0,na.trackViewPromotion)({target_name:"variables_popover",target_location:"widget_panel",location_l1:"variables_list"})},[n]),ra.createElement(la.SectionPopoverBody,null,ra.createElement(la.PopoverHeader,{title:(0,ca.__)("Variables","elementor"),icon:ra.createElement(ia.ColorFilterIcon,{fontSize:ha}),onClose:e,actions:E}),y&&ra.createElement(la.SearchField,{value:m,onSearch:e=>{b(e)},placeholder:(0,ca.__)("Search","elementor")}),ra.createElement(sa.Divider,null),y&&g&&ra.createElement(ra.Fragment,null,ra.createElement(la.PopoverMenuList,{items:C,onSelect:n?()=>{}:t=>{p(t),trackVariableEvent({varType:i,controlPath:d.join("."),action:"connect"}),e()},onClose:()=>{},selectedValue:u,"data-testid":`${i}-variables-list`,menuListTemplate:e=>ra.createElement(ya,{...e,disabled:n}),menuItemContentTemplate:e=>ra.createElement(MenuItemContent,{item:e,disabled:n})}),n&&ra.createElement(oa.PromotionAlert,{message:(0,ca.sprintf)((0,ca.__)("Upgrade to continue creating and editing %s variables.","elementor"),i),upgradeUrl:getProUpgradeUrl(i),onCtaClick:()=>(0,na.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})),!g&&y&&ra.createElement(NoSearchResults,{searchValue:m,onClear:()=>{b("")},icon:ra.createElement(l,{fontSize:"large"})}),n&&!y&&ra.createElement(EmptyState,{title:(0,ca.sprintf)((0,ca.__)("No %s variables yet","elementor"),i),message:(0,ca.sprintf)((0,ca.__)("Upgrade to create %s variables and maintain consistent element sizing.","elementor"),i),icon:ra.createElement(l,{fontSize:"large"})},c),!y&&!h&&!n&&ra.createElement(EmptyState,{title:(0,ca.sprintf)((0,ca.__)("Create your first %s variable","elementor"),i),message:(0,ca.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:ra.createElement(l,{fontSize:"large"}),onAdd:t}),h&&!n&&ra.createElement(EmptyState,{title:(0,ca.__)("No compatible variables","elementor"),message:(0,ca.__)("Looks like none of your variables work with this control. Create a new variable to use it here.","elementor"),icon:ra.createElement(l,{fontSize:"large"}),onAdd:t}))},Ca="list",_a="add",Ta="edit",VariableSelectionPopover=({closePopover:e,propTypeKey:t,selectedVariable:a})=>{const[r,n]=(0,_t.useState)(Ca),[l,o]=(0,_t.useState)(""),i=(0,Tt.isExperimentActive)("e_variables_manager")?()=>{window.dispatchEvent(new CustomEvent("elementor/toggle-design-system",{detail:{tab:"variables"}}))}:void 0;return Ct.createElement(VariableTypeProvider,{propTypeKey:t},Ct.createElement(PopoverContentRefContextProvider,null,function RenderView(e){const t=usePermissions(),a=useQuotaPermissions(e.propTypeKey),r={onClose:()=>{e.closePopover()},onGoBack:()=>{e.setCurrentView(Ca)}};t.canAdd()&&(r.onAdd=()=>{e.setCurrentView(_a)});t.canEdit()&&(r.onEdit=t=>{e.setEditId(t),e.setCurrentView(Ta)});t.canManageSettings()&&e.onSettings&&(r.onSettings=()=>{e.closePopover(),e.onSettings?.()});const handleSubmitOnEdit=()=>{e?.selectedVariable?.key===e.editId?r.onClose():r.onGoBack?.()};if(Ca===e.currentView)return Ct.createElement(VariablesSelection,{closePopover:r.onClose,onAdd:r.onAdd,onEdit:r.onEdit,onSettings:r.onSettings,disabled:!a.canAdd()});if(_a===e.currentView)return Ct.createElement(VariableCreation,{onGoBack:r.onGoBack,onClose:r.onClose});if(Ta===e.currentView)return Ct.createElement(VariableEdit,{editId:e.editId,onGoBack:r.onGoBack,onClose:r.onClose,onSubmit:handleSubmitOnEdit});return null}({propTypeKey:t,currentView:r,selectedVariable:a,editId:l,setEditId:o,setCurrentView:n,closePopover:e,onSettings:i})))};var Sa=__toESM(a(97557)),wa=a(24413),ka=a(79513),xa=a(27723),Va="tiny",Aa=(0,xa.__)("Unlink variable","elementor"),AssignedTag=({startIcon:e,label:t,onUnlink:a,...r})=>{const n=[];return a&&n.push(Sa.createElement(ka.Tooltip,{key:"unlink",title:Aa,placement:"bottom"},Sa.createElement(ka.IconButton,{size:Va,onClick:a,"aria-label":Aa},Sa.createElement(wa.DetachIcon,{fontSize:Va})))),Sa.createElement(ka.Tooltip,{title:t,placement:"top"},Sa.createElement(ka.UnstableTag,{fullWidth:!0,showActionsOnHover:!0,startIcon:Sa.createElement(ka.Stack,{gap:.5,direction:"row",alignItems:"center"},e),label:Sa.createElement(ka.Box,{sx:{display:"inline-grid",minWidth:0}},Sa.createElement(ka.Typography,{sx:{lineHeight:1.34},variant:"caption",noWrap:!0},t)),actions:n,...r}))},AssignedVariable=({variable:e,propTypeKey:t})=>{const{startIcon:a,propTypeUtil:r}=Y(t),{setValue:n}=(0,ht.useBoundProp)(),l=(0,gt.useRef)(null),o=(0,gt.useId)(),i=(0,ft.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${o}`}),s=createUnlinkHandler(e,t,n),c=a||(()=>null);return yt.createElement(ft.Box,{ref:l},yt.createElement(AssignedTag,{label:e.label,startIcon:yt.createElement(yt.Fragment,null,yt.createElement(Et.ColorFilterIcon,{fontSize:Va}),yt.createElement(c,{value:e.value})),onUnlink:s,...(0,ft.bindTrigger)(i)}),yt.createElement(ft.Popover,{disableScrollLock:!0,anchorEl:l.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}},...(0,ft.bindPopover)(i)},yt.createElement(VariableSelectionPopover,{selectedVariable:e,closePopover:i.close,propTypeKey:r.key})))},Ia=__toESM(a(97557)),Pa=a(97557),za=a(77394),Ra=a(79513),La=a(27723),Da=__toESM(a(97557)),Ua=a(97557),Fa=a(77394),Ba=a(70374),Oa=a(79513),Ma=a(27723),VariableRestore=({variableId:e,onClose:t,onSubmit:a})=>{const{icon:r,valueField:n,variableType:l,propTypeUtil:o}=useVariableType(),{setVariableValue:i}=useVariableBoundProp(),{propType:s}=(0,Fa.useBoundProp)(),c=useVariable(e);if(!c)throw new Error(`Global ${l} variable not found`);const[u,p]=(0,Ua.useState)(""),[d,m]=(0,Ua.useState)(""),[b,v]=(0,Ua.useState)(c.label),[g,y]=(0,Ua.useState)(c.value),[h,E]=(0,Ua.useState)(c?.type??o.key),{labelFieldError:f,setLabelFieldError:C}=useLabelError({value:c.label,message:_.DUPLICATED_LABEL}),handleRestore=()=>{(h!==c.type?restoreVariable(e,b,g,h):restoreVariable(e,b,g)).then(()=>{i(e),a?.()}).catch(e=>{const t=mapServerError(e);if(t&&"label"===t.field)return v(""),void C({value:b,message:t.message});p(_.UNEXPECTED_ERROR)})},T=g===c.value&&b===c.label||""===b.trim()||("string"==typeof g?""===g.trim():!1===Boolean(g))||!!u,handleKeyDown=e=>{"Enter"!==e.key||T||(e.preventDefault(),handleRestore())};return Da.createElement(PopoverContentRefContextProvider,null,Da.createElement(Ba.SectionPopoverBody,{height:"auto"},Da.createElement(Ba.PopoverHeader,{icon:Da.createElement(r,{fontSize:"tiny"}),title:(0,Ma.__)("Restore variable","elementor"),onClose:t}),Da.createElement(Oa.Divider,null),Da.createElement(Fa.PopoverContent,{p:2},Da.createElement(FormField,{id:"variable-label",label:(0,Ma.__)("Name","elementor"),errorMsg:f?.message,noticeMsg:labelHint(b)},Da.createElement(LabelField,{id:"variable-label",value:b,error:f,onChange:e=>{v(e),p("")},onErrorChange:e=>{C({value:"",message:e})},onKeyDown:handleKeyDown,focusOnShow:!0})),n&&Da.createElement(FormField,{errorMsg:d,label:(0,Ma.__)("Value","elementor")},Da.createElement(Oa.Typography,{variant:"h5"},Da.createElement(n,{propTypeKey:h,onPropTypeKeyChange:e=>E(e),value:g,onChange:e=>{y(e),p(""),m("")},onValidationChange:m,propType:s,onKeyDown:handleKeyDown}))),u&&Da.createElement(Oa.FormHelperText,{error:!0},u)),Da.createElement(Oa.CardActions,{sx:{pt:.5,pb:1}},Da.createElement(Oa.Button,{size:"small",variant:"contained",disabled:T,onClick:handleRestore},(0,Ma.__)("Restore","elementor")))))},Na=__toESM(a(97557)),ja=a(79513),$a=a(27723),DeletedVariableAlert=({onClose:e,onUnlink:t,onRestore:a,label:r})=>Na.createElement(ja.ClickAwayListener,{onClickAway:e},Na.createElement(ja.Alert,{variant:"standard",severity:"warning",onClose:e,action:Na.createElement(Na.Fragment,null,t&&Na.createElement(ja.AlertAction,{variant:"contained",onClick:t},(0,$a.__)("Unlink","elementor")),a&&Na.createElement(ja.AlertAction,{variant:"outlined",onClick:a},(0,$a.__)("Restore","elementor"))),sx:{maxWidth:300}},Na.createElement(ja.AlertTitle,null,(0,$a.__)("Deleted variable","elementor")),Na.createElement(ja.Typography,{variant:"body2",color:"textPrimary"},(0,$a.__)("The variable","elementor")," '",Na.createElement(ja.Typography,{variant:"body2",component:"span",sx:{lineBreak:"anywhere"}},r),"' ",(0,$a.__)("has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.","elementor")))),Ga=__toESM(a(97557)),Ha=a(24413),Wa=a(79513),Ka=Ga.forwardRef(({label:e,suffix:t,onClick:a,icon:r,...n},l)=>{const o=t?`${e} (${t})`:e;return Ga.createElement(Wa.Chip,{ref:l,size:"tiny",color:"warning",shape:"rounded",variant:"standard",onClick:a,icon:Ga.createElement(Ha.AlertTriangleFilledIcon,null),label:Ga.createElement(Wa.Tooltip,{title:o,placement:"top"},Ga.createElement(Wa.Box,{sx:{display:"inline-grid",minWidth:0}},Ga.createElement(Wa.Typography,{variant:"caption",noWrap:!0,sx:{lineHeight:1.34}},o))),sx:{height:e=>e.spacing(3.5),borderRadius:e=>e.spacing(1),justifyContent:"flex-start",width:"100%"},...n})});Ka.displayName="WarningVariableTag";var DeletedVariable=({variable:e,propTypeKey:t})=>{const{propTypeUtil:a}=Y(t),r=(0,za.useBoundProp)(),n=usePermissions(),[l,o]=(0,Pa.useState)(!1),closeInfotip=()=>o(!1),i=(0,Pa.useRef)(null),s=(0,Pa.useId)(),c=(0,Ra.usePopupState)({variant:"popover",popupId:`elementor-variables-restore-${s}`}),u={};n.canUnlink()&&(u.onUnlink=createUnlinkHandler(e,t,r.setValue)),n.canRestore()&&(u.onRestore=()=>{e.key&&restoreVariable(e.key).then(e=>{resolveBoundPropAndSetValue(a.create(e),r),closeInfotip()}).catch(()=>{closeInfotip(),c.setAnchorEl(i.current),c.open()})});return Ia.createElement(Ia.Fragment,null,Ia.createElement(Ra.Box,{ref:i},l&&Ia.createElement(Ra.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),Ia.createElement(Ra.Infotip,{color:"warning",placement:"right-start",open:l,disableHoverListener:!0,onClose:closeInfotip,content:Ia.createElement(DeletedVariableAlert,{onClose:closeInfotip,onUnlink:u.onUnlink,onRestore:u.onRestore,label:e.label}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},Ia.createElement(Ka,{label:e.label,onClick:()=>o(e=>!e),suffix:(0,La.__)("deleted","elementor")})),Ia.createElement(Ra.Popover,{disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}},...(0,Ra.bindPopover)(c)},Ia.createElement(VariableTypeProvider,{propTypeKey:t},Ia.createElement(VariableRestore,{variableId:e.key??"",onClose:c.close,onSubmit:()=>{c.close()}})))))},qa=__toESM(a(97557)),Xa=a(97557),Ja=a(77394),Ya=a(79513),Qa=a(27723),Za=__toESM(a(97557)),er=a(79513),tr=a(27723),ar={title:(0,tr.__)("Variable has changed","elementor"),message:(0,tr.__)("This variable is no longer compatible with this property. You can clear it or select a different one.","elementor"),buttons:{clear:(0,tr.__)("Clear","elementor"),select:(0,tr.__)("Select variable","elementor")}},MismatchVariableAlert=({onClose:e,onClear:t,triggerSelect:a})=>Za.createElement(er.ClickAwayListener,{onClickAway:e},Za.createElement(er.Alert,{variant:"standard",severity:"warning",onClose:e,action:Za.createElement(Za.Fragment,null,t&&Za.createElement(er.AlertAction,{variant:"contained",onClick:t},ar.buttons.clear),a&&Za.createElement(er.AlertAction,{variant:"outlined",onClick:a},ar.buttons.select)),sx:{maxWidth:300}},Za.createElement(er.AlertTitle,null,ar.title),Za.createElement(er.Typography,{variant:"body2",color:"textPrimary"},ar.message))),MismatchVariable=({variable:e})=>{const{setValue:t,value:a}=(0,Ja.useBoundProp)(),r=(0,Xa.useRef)(null),n=(0,Xa.useId)(),l=(0,Ya.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${n}`}),[o,i]=(0,Xa.useState)(!1),closeInfotip=()=>i(!1),s=!!a;return qa.createElement(Ya.Box,{ref:r},o&&qa.createElement(Ya.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),qa.createElement(Ya.Infotip,{color:"warning",placement:"right-start",open:o,disableHoverListener:!0,onClose:closeInfotip,content:qa.createElement(MismatchVariableAlert,{onClose:closeInfotip,onClear:s?()=>{closeInfotip(),t(null)}:void 0,triggerSelect:()=>{closeInfotip(),l.setAnchorEl(r.current),l.open()}}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},qa.createElement(Ka,{label:e.label,onClick:()=>i(e=>!e),suffix:(0,Qa.__)("changed","elementor")})),qa.createElement(Ya.Popover,{disableScrollLock:!0,anchorEl:r.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}},...(0,Ya.bindPopover)(l)},qa.createElement(VariableSelectionPopover,{selectedVariable:e,closePopover:l.close,propTypeKey:e.type})))},rr=__toESM(a(97557)),nr=a(97557),lr=a(77394),or=a(79513),ir=a(27723),sr=__toESM(a(97557)),cr=a(79513),ur=a(27723),MissingVariableAlert=({onClose:e,onClear:t})=>sr.createElement(cr.ClickAwayListener,{onClickAway:e},sr.createElement(cr.Alert,{variant:"standard",severity:"warning",onClose:e,action:sr.createElement(sr.Fragment,null,t&&sr.createElement(cr.AlertAction,{variant:"contained",onClick:t},(0,ur.__)("Clear","elementor"))),sx:{maxWidth:300}},sr.createElement(cr.AlertTitle,null,(0,ur.__)("This variable is missing","elementor")),sr.createElement(cr.Typography,{variant:"body2",color:"textPrimary"},(0,ur.__)("It may have been deleted. Try clearing this field and select a different value or variable.","elementor")))),MissingVariable=()=>{const{setValue:e}=(0,lr.useBoundProp)(),[t,a]=(0,nr.useState)(!1),closeInfotip=()=>a(!1);return rr.createElement(rr.Fragment,null,t&&rr.createElement(or.Backdrop,{open:!0,onClick:closeInfotip,invisible:!0}),rr.createElement(or.Infotip,{color:"warning",placement:"right-start",open:t,disableHoverListener:!0,onClose:closeInfotip,content:rr.createElement(MissingVariableAlert,{onClose:closeInfotip,onClear:()=>e(null)}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},rr.createElement(Ka,{label:(0,ir.__)("Missing variable","elementor"),onClick:()=>a(e=>!e)})))},VariableControl=()=>{const e=(0,vt.useBoundProp)(),t=e.value??e.placeholder,a=useVariable(t?.value);if(!a)return bt.createElement(MissingVariable,null);const{$$type:r}=t;if(a?.deleted)return bt.createElement(DeletedVariable,{variable:a,propTypeKey:r});const{isCompatible:n}=Y(a.type);return n&&!n(e?.propType,a)?bt.createElement(MismatchVariable,{variable:a}):bt.createElement(AssignedVariable,{variable:a,propTypeKey:r})},pr=__toESM(a(97557)),dr=a(77394),mr=a(24413),br=a(27723),usePropVariableAction=()=>{const{propType:e,path:t}=(0,dr.useBoundProp)(),a=resolveVariableFromPropType(e);return{visible:Boolean(a),icon:mr.ColorFilterIcon,title:(0,br.__)("Variables","elementor"),content:({close:e})=>a?(trackOpenVariablePopover(t,a.variableType),pr.createElement(VariableSelectionPopover,{closePopover:e,propTypeKey:a.propTypeUtil.key})):null}},resolveVariableFromPropType=e=>{if("union"===e.kind)for(const t of Object.keys(e.prop_types)){const e=Y(t);if(e)return e}},trackOpenVariablePopover=(e,t)=>{trackVariableEvent({varType:t,controlPath:e.join("."),action:"open"})},vr=a(59618),gr=a(22444),yr=a(55534),hr=a(22444),Er="elementor://variables/tools/manage-global-variable-guide",generateVariablesPrompt=()=>{const e=(0,yr.toolPrompts)("manage-global-variable"),t=(0,hr.isProActive)()?"- **global-size-variable** — A simple CSS length with a unit (Elementor Pro). Use this for fixed spacing, font sizes, or layout values. Example: `16px`, `1.5rem`, `2em`, `10vh`\n- **global-custom-size-variable** — Any CSS size expression that goes beyond a simple number + unit (Elementor Pro). Use this when the value is a CSS function, a keyword, or a combination of units that `global-size-variable` cannot represent. Example: `auto`, `clamp(1rem, 2vw, 2rem)`, `calc(100% - 32px)`, `min(50vw, 600px)`, `300ms`, `2ch`. When in doubt: if the value contains a function call or a keyword, use `global-custom-size-variable`.":"- ~~global-size-variable~~ — requires Elementor Pro (not available on this site)\n- ~~global-custom-size-variable~~ — requires Elementor Pro (not available on this site)";return e.description(`\n# Purpose\nCreate, update, or delete V4 global CSS variables. These are distinct from legacy v3 globals and map 1:1 to \`--css-var: VALUE\`.\n\n# Available Types\n- **global-color-variable** — CSS color value. Example: \`#FF0000\`, \`rgba(255,0,0,1)\`, \`hsl(0,100%,50%)\`\n- **global-font-variable** — Font family name ONLY — NOT a size or px value. Example: \`Roboto\`, \`Open Sans\`. NEVER pass px/rem here.\n${t}\n\n# Naming Rules\n- Labels must be **lowercase**, using only letters (a-z), numbers, digits (0-9), dashes (-), or underscores (_)\n- No spaces, no special characters\n- Example: "Headline Primary" → \`headline-primary\`\n- Labels must be unique — always check [elementor://global-variables] first\n\n# Value Rules\n- Provide a **plain CSS value** only — do NOT pass JSON, legacy-globals object structures, or variable references\n- Values are inserted as-is: \`--css-var: <value>\`\n- NEVER store a px/rem value inside a \`global-font-variable\` — use \`global-size-variable\` (Pro) instead\n\n# Operations\n- **create** — requires \`type\`, \`label\`, \`value\`. Label must be unique.\n- **update** — requires \`id\`, \`label\`, \`value\`. Get \`id\` from [elementor://global-variables]. When renaming: keep existing value. When changing value: keep exact existing label.\n- **delete** — requires \`id\`. DESTRUCTIVE — always confirm with user before executing.\n`),e.parameter("action",'"create", "update", or "delete".'),e.parameter("type","Variable type. Required for create. See Available Types above."),e.parameter("label","Variable name (lowercase, dash-separated). Required for create/update."),e.parameter("value","Plain CSS value matching the variable type. Required for create/update. Do NOT pass JSON."),e.parameter("id","Variable ID. Required for update/delete. Obtain from [elementor://global-variables]."),e.example('\nCreate a brand color:\n{ "action": "create", "type": "global-color-variable", "label": "brand-primary", "value": "#1A73E8" }\n\nCreate a heading font:\n{ "action": "create", "type": "global-font-variable", "label": "font-heading", "value": "Playfair Display" }\n\nCreate a simple spacing size:\n{ "action": "create", "type": "global-size-variable", "label": "spacing-md", "value": "16px" }\n\nCreate a fluid/responsive size using a CSS function (use global-custom-size-variable, NOT global-size-variable):\n{ "action": "create", "type": "global-custom-size-variable", "label": "spacing-fluid", "value": "clamp(1rem, 2vw, 2rem)" }\n\nCreate a size that is a keyword:\n{ "action": "create", "type": "global-custom-size-variable", "label": "width-auto", "value": "auto" }\n\nCreate a size using calc():\n{ "action": "create", "type": "global-custom-size-variable", "label": "sidebar-width", "value": "calc(100% - 32px)" }\n\nUpdate a variable\'s value (keep exact label):\n{ "action": "update", "id": "abc123", "label": "brand-primary", "value": "#0D47A1" }\n\nRename a variable (keep existing value):\n{ "action": "update", "id": "abc123", "label": "brand-secondary", "value": "#1A73E8" }\n\nDelete a variable:\n{ "action": "delete", "id": "abc123" }\n'),e.instruction("Always read [elementor://global-variables] before creating to check existing variables and avoid duplicate labels."),e.prompt()},fr=a(5527),Cr="elementor://global-variables",initVariablesResource=(e,t)=>{[t,e].forEach(e=>{const{resource:t,sendResourceUpdated:a}=e,notifyGlobalVariablesUpdated=()=>{a({uri:Cr})};t("global-variables",Cr,{description:"Global variables available (v4)"},async()=>{const e=await(async()=>{const e={};return Object.entries(W.variables()).forEach(([t,a])=>{a.deleted||(e[t]={...a,version:"v4"})}),e})();return{contents:[{uri:Cr,mimeType:"application/json",text:JSON.stringify(e)}]}}),window.addEventListener(B,notifyGlobalVariablesUpdated),(0,fr.__privateListenTo)((0,fr.commandEndEvent)("document/save/update"),notifyGlobalVariablesUpdated)})},_r="global-color-variable",Tr="global-font-variable",Sr="global-size-variable",wr="global-custom-size-variable",kr=/^(auto|\d+(\.\d+)?(px|rem|em|vh|vw|%|ch|s|ms))$/i,xr=/^(#[0-9a-f]{3,8}|rgba?\(|hsl)/i;function validateValueForType(e,t){return e===Tr&&kr.test(t.trim())?`Font variable value must be a font family name (e.g. "Roboto"), not a size value like "${t}". Use "global-size-variable" or "global-custom-size-variable" for spacing/size values.`:e!==_r||xr.test(t.trim())?e!==Sr||kr.test(t.trim())?e!==Tr||function isFontAvailable(e){const t=window.elementor?.config?.controls?.font?.options??{},a=e.trim();return!!t?.[a]}(t)?null:`Font "${t}" is not supported in WordPress. Please choose one of the available font families.`:`Size variable value should include a CSS unit (e.g. "16px") or be "auto", got "${t}".`:`Color variable value should be a CSS color (e.g. "#FF0000"), got "${t}".`}var initManageVariableTool=e=>{const{addTool:t,resource:a}=e,r=(0,gr.isProActive)()?[_r,Tr,Sr,wr]:[_r,Tr];a("manage-global-variable-guide",Er,{title:"Manage Global Variable Guide",description:"Detailed guide for using the manage-global-variable tool",mimeType:"text/plain"},async e=>({contents:[{uri:e.href,mimeType:"text/plain",text:generateVariablesPrompt()}]})),t({name:"manage-global-variable",description:"Manage V4 global variables (color, font, size, custom-size). Read the guide resource before use. font = font-famliy, size = measured unit, custom-size = calculated values",schema:{action:vr.z.enum(["create","update","delete"]),id:vr.z.string().optional().describe("Variable id — required for update/delete. Get from the global-variables resource."),type:vr.z.enum(r),label:vr.z.string().describe("Variable label (lowercase, dash-separated) — required for create/update."),value:vr.z.string().optional().describe('Plain CSS value — required for create/update. Color: hex/rgba/hsl. Font: family name only. Size: value with unit e.g. "16px", or "auto" (Pro). Do NOT pass JSON.')},outputSchema:{status:vr.z.enum(["ok"]).describe("Operation status"),message:vr.z.string().optional().describe("Error details if status is error")},requiredResources:[{uri:Er,description:"Full guide for variable types, naming rules, and usage"},{uri:Cr,description:"Current global variables — check before creating to avoid duplicates"}],isDestructive:!0,handler:async e=>{const t=function getServiceActions(e){return{create({type:t,label:a,value:r}){if(!t||!a||!r)throw new Error("Create requires type, label, and value");if((t===Sr||t===wr)&&!(0,gr.isProActive)())throw new Error("Creating size variables requires Elementor Pro.");const n=validateLabel(a);if(n)throw new Error(n);const l=validateValueForType(t,r);if(l)throw new Error(l);return e.create({type:t,label:a,value:r})},update({id:t,label:a,value:r}){if(!t||!a||!r)throw new Error("Update requires id, label, and value");const n=validateLabel(a);if(n)throw new Error(n);const l=e.variables()[t];if(l){const e=validateValueForType(l.type,r);if(e)throw new Error(e)}return e.update(t,{label:a,value:r})},delete({id:t}){if(!t)throw new Error("delete requires id");return e.delete(t)}}}(W)[e.action];if(t)return await t(e),{status:"ok"};throw new Error(`Unknown action ${e.action}`)}})};var Vr=__toESM(a(97557)),Ar=a(77394),Ir=a(2020),Pr=a(70374),zr=a(24413),Rr=a(27723),Lr=__toESM(a(97557)),Dr=a(97557),Ur=a(79513),ColorField=({value:e,onChange:t,onValidationChange:a})=>{const[r,n]=(0,Dr.useState)(e),[l,o]=(0,Dr.useState)(""),i=(0,Dr.useRef)(null),s=usePopoverContentRef()??i.current;return Lr.createElement(Ur.UnstableColorField,{id:"color-variable-field",size:"tiny",fullWidth:!0,value:r,onChange:e=>{n(e);const r=validateValue(e);o(r),a?.(r),t(r?"":e)},error:l||void 0,slotProps:{colorPicker:{anchorEl:s,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-10},slotProps:{colorIndicator:{size:"inherit",sx:{borderRadius:.5}}}}}})},Fr=__toESM(a(97557)),Br=a(97557),Or=a(77394),Mr=a(70374),Nr=a(24413),jr=a(79513),$r=a(27723),FontField=({value:e,onChange:t,onValidationChange:a})=>{const[r,n]=(0,Br.useState)(e),l=(0,Br.useRef)(null),o=usePopoverContentRef()??l.current,i=(0,jr.usePopupState)({variant:"popover"}),s=(0,Or.useFontFamilies)(),c=(0,Mr.useSectionWidth)(),u=(0,Br.useMemo)(()=>s.map(({label:e,fonts:t})=>({label:e,items:t})),[s]),p=(0,Br.useId)();return Fr.createElement(Fr.Fragment,null,Fr.createElement(jr.UnstableTag,{id:p,variant:"outlined",label:r,endIcon:Fr.createElement(Nr.ChevronDownIcon,{fontSize:"tiny"}),...(0,jr.bindTrigger)(i),fullWidth:!0}),Fr.createElement(jr.Popover,{disablePortal:!0,disableScrollLock:!0,anchorEl:o,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-28},...(0,jr.bindPopover)(i)},Fr.createElement(Or.ItemSelector,{id:"font-family-variables-selector",itemsList:u,selectedItem:r,onItemChange:e=>{(e=>{n(e);const r=validateValue(e);a?.(r),t(r?"":e)})(e),i.close()},onClose:i.close,sectionWidth:c,title:(0,$r.__)("Font family","elementor"),itemStyle:e=>({fontFamily:e.value}),onDebounce:Or.enqueueFont,icon:Nr.TextIcon})))},Gr=a(2020),Hr=a(59618),Wr=(0,Gr.createPropUtils)("global-size-variable",Hr.z.string()),Kr=(0,a(82148).createTransformer)(e=>null);function registerVariableTypes(){J({key:z.key,valueField:ColorField,icon:zr.BrushIcon,propTypeUtil:z,fallbackPropTypeUtil:Ir.colorPropTypeUtil,variableType:"color",startIcon:({value:e})=>Vr.createElement(A,{size:"inherit",component:"span",value:e}),defaultValue:"#ffffff",menuActionsFactory:({variable:e,variableId:t,handlers:a})=>{const r=[];return e.sync_to_v3?r.push({name:(0,Rr.__)("Stop syncing to Global Colors","elementor"),icon:zr.RefreshOffIcon,color:"text.primary",onClick:()=>a.onStopSync(t)}):r.push({name:(0,Rr.__)("Sync to Global Colors","elementor"),icon:zr.RefreshIcon,color:"text.primary",onClick:()=>a.onStartSync(t)}),r}}),J({key:$.key,valueField:FontField,icon:zr.TextIcon,propTypeUtil:$,fallbackPropTypeUtil:Ir.stringPropTypeUtil,variableType:"font",defaultValue:"Roboto"});const e={isActive:!1,icon:zr.ExpandDiagonalIcon,propTypeUtil:Wr,fallbackPropTypeUtil:Ir.sizePropTypeUtil,styleTransformer:Kr,variableType:"size",selectionFilter:()=>[],emptyState:Vr.createElement(Pr.CtaButton,{size:"small",href:"https://go.elementor.com/go-pro-panel-size-variable/",onClick:()=>(0,Ar.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})};J({...e,key:Wr.key,defaultValue:"0px"}),J({...e,key:"global-custom-size-variable"})}var qr=__toESM(a(97557)),Xr=a(97557),Jr=a(5527),Yr=a(79513),Qr=":root";function StyleVariablesRenderer(){const e=function usePortalContainer(){return(0,Jr.__privateUseListenTo)((0,Jr.commandEndEvent)("editor/documents/attach-preview"),()=>(0,Jr.getCanvasIframeDocument)()?.head)}(),t=function useStyleVariables(){const[e,t]=(0,Xr.useState)({});return(0,Xr.useEffect)(()=>{const e=G.subscribe(t);return()=>{e()}},[]),e}(),a=Object.keys(t).length>0;if(!e||!a)return null;const r=function convertToCssVariables(e){return Object.entries(e).map(([e,t])=>function cssVariableDeclaration(e,t){const a=t?.deleted?e:t.label,r=t.value;return`--${a}:${r};`}(e,t)).join("")}(t),n=`${Qr}{${r}}`;return qr.createElement(Yr.Portal,{container:e},qr.createElement("style",{"data-e-style-id":"e-variables",key:n},n))}var Zr=a(77394),en=a(2020),tn=__toESM(a(97557)),an=a(2020),rn=a(79513),nn=a(27723),ln=a(2020),on=a(2020),sn=a(59618),cn=(0,on.createPropUtils)("global-custom-size-variable",sn.z.string());function sizeValue(e){if(Wr.isValid(e)||cn.isValid(e)){const t=getVariable(e?.value);return t?.value}if(ln.sizePropTypeUtil.isValid(e)){const{size:t,unit:a}=e.value;return"custom"!==a?`${t??0}${a??"px"}`:t||"fx"}return""}var useColorVariable=e=>{const t=e?.value?.color?.value;return getVariable(t||"")},BackgroundRepeaterColorIndicator=({value:e})=>{const t=useColorVariable(e);return tn.createElement(A,{component:"span",size:"inherit",value:t?.value})},BackgroundRepeaterLabel=({value:e})=>{const t=useColorVariable(e);return tn.createElement(rn.Box,{component:"span"},t?.label)},BoxShadowRepeaterColorIndicator=({value:e})=>{const t=useColorVariable(e);return tn.createElement(A,{component:"span",size:"inherit",value:t?.value})},FilterDropShadowIconIndicator=({value:e})=>{const{args:t}=an.cssFilterFunctionPropUtil.extract(e)||{},{color:a}=an.dropShadowFilterPropTypeUtil.extract(t)||{},r=getVariable(a?.value||"");return tn.createElement(A,{component:"span",size:"inherit",value:r?.value})},FilterSingleSizeRepeaterLabel=({value:e})=>{const t=an.cssFilterFunctionPropUtil.extract(e);if(an.dropShadowFilterPropTypeUtil.isValid(t?.args))return null;const a=t?.args,r=t?.func?.value??"",n=sizeValue(a?.value?.size);return tn.createElement(tn.Fragment,null,tn.createElement(rn.Box,{component:"span",style:{textTransform:"capitalize"}},`${r}: `),tn.createElement(rn.Box,{component:"span"},n))},FilterDropShadowRepeaterLabel=({value:e})=>{const{args:t}=an.cssFilterFunctionPropUtil.extract(e)||{},{xAxis:a,yAxis:r,blur:n}=an.dropShadowFilterPropTypeUtil.extract(t)||{},l=[];for(const e of[a,r,n]){const t=sizeValue(e);t&&l.push(t)}return tn.createElement(rn.Box,{component:"span"},(0,nn.__)("Drop shadow:","elementor")," ",l.join(" "))},BoxShadowRepeaterLabel=({value:e})=>{const{position:t,hOffset:a,vOffset:r,blur:n,spread:l}=an.shadowPropTypeUtil.extract(e)||{},o=[];for(const e of[a,r,n,l]){const t=sizeValue(e);t&&o.push(t)}const i=t?.value||"outset";return tn.createElement(rn.Box,{component:"span",style:{textTransform:"capitalize"}},i,": ",o.join(" "))},TransformRepeaterLabel=({value:e})=>{const t=[];if(an.moveTransformPropTypeUtil.isValid(e)){t.push((0,nn.__)("Move:","elementor"));const{x:a,y:r,z:n}=an.moveTransformPropTypeUtil.extract(e)||{};for(const e of[a,r,n]){const a=sizeValue(e);a&&t.push(a)}}return tn.createElement(rn.Box,{component:"span"},t.join(" "))},TransitionsSizeVariableLabel=({value:e})=>{let t="";const a=getVariable(e?.value?.size?.value||"");if(a&&an.selectionSizePropTypeUtil.isValid(e)){const r=e.value?.selection?.value?.key?.value;r&&(t+=`${r}: `),t+=a?.value}return tn.createElement(rn.Box,{component:"span"},t)};function registerRepeaterInjections(){!function backgroundOverlayRepeaterInjections(){(0,Zr.injectIntoRepeaterItemIcon)({id:"background-color-variables-icon",component:BackgroundRepeaterColorIndicator,condition:({value:e})=>hasAssignedColorVariable(en.backgroundColorOverlayPropTypeUtil.extract(e)?.color)}),(0,Zr.injectIntoRepeaterItemLabel)({id:"background-color-variables-label",component:BackgroundRepeaterLabel,condition:({value:e})=>hasAssignedColorVariable(en.backgroundColorOverlayPropTypeUtil.extract(e)?.color)})}(),function boxShadowRepeaterInjections(){(0,Zr.injectIntoRepeaterItemIcon)({id:"box-shadow-color-variables-icon",component:BoxShadowRepeaterColorIndicator,condition:({value:e})=>{const{color:t}=en.shadowPropTypeUtil.extract(e)||{};return hasAssignedColorVariable(t)}}),(0,Zr.injectIntoRepeaterItemLabel)({id:"color-variables-box-shadow-label",component:BoxShadowRepeaterLabel,condition:({value:e})=>{const{hOffset:t,vOffset:a,blur:r,spread:n}=en.shadowPropTypeUtil.extract(e)||{};return hasAssignedSizeVariable(t)||hasAssignedSizeVariable(a)||hasAssignedSizeVariable(r)||hasAssignedSizeVariable(n)}})}(),function transitionsRepeaterInjections(){(0,Zr.injectIntoRepeaterItemLabel)({id:"transition-size-variables-label",component:TransitionsSizeVariableLabel,condition:({value:e})=>hasAssignedSizeVariable(en.selectionSizePropTypeUtil.extract(e)?.size)})}(),function transformRepeaterInjections(){(0,Zr.injectIntoRepeaterItemLabel)({id:"transform-size-variables-label",component:TransformRepeaterLabel,condition:({value:e})=>{if(en.moveTransformPropTypeUtil.isValid(e)){const{x:t,y:a,z:r}=en.moveTransformPropTypeUtil.extract(e)||{};return hasAssignedSizeVariable(t)||hasAssignedSizeVariable(a)||hasAssignedSizeVariable(r)}return!1}})}(),function filterRepeaterInjections(){(0,Zr.injectIntoRepeaterItemIcon)({id:"filters-color-variables-icon",component:FilterDropShadowIconIndicator,condition:({value:e})=>{if(!en.cssFilterFunctionPropUtil.isValid(e))return!1;const t=en.cssFilterFunctionPropUtil.extract(e)?.args;return!!en.dropShadowFilterPropTypeUtil.isValid(t)&&hasAssignedColorVariable(en.dropShadowFilterPropTypeUtil.extract(t)?.color)}}),(0,Zr.injectIntoRepeaterItemLabel)({id:"filters-drop-shadow-size-variables-label",component:FilterDropShadowRepeaterLabel,condition:({value:e})=>{if(!en.cssFilterFunctionPropUtil.isValid(e))return!1;const t=en.cssFilterFunctionPropUtil.extract(e)?.args;if(en.dropShadowFilterPropTypeUtil.isValid(t)){const{xAxis:e,yAxis:a,blur:r}=en.dropShadowFilterPropTypeUtil.extract(t)||{};return hasAssignedSizeVariable(e)||hasAssignedSizeVariable(a)||hasAssignedSizeVariable(r)}return!1}}),(0,Zr.injectIntoRepeaterItemLabel)({id:"filters-size-variables-label",component:FilterSingleSizeRepeaterLabel,condition:({value:e})=>{if(!en.cssFilterFunctionPropUtil.isValid(e))return!1;const t=en.cssFilterFunctionPropUtil.extract(e)?.args;return hasAssignedSizeVariable(t?.value?.size)}})}()}function hasAssignedSizeVariable(e){return!!Wr.isValid(e)||!!cn.isValid(e)}function hasAssignedColorVariable(e){return!!z.isValid(e)}var{registerPopoverAction:un}=pt.controlActionsMenu;function init(){registerVariableTypes(),registerRepeaterInjections(),(0,st.registerControlReplacement)({component:VariableControl,condition:({value:e,placeholder:t})=>!!hasVariableAssigned(e)||!e&&hasVariableAssigned(t)}),un({id:"variables",priority:40,useProps:usePropVariableAction}),W.init();!function initMcp(e,t){window.addEventListener("elementor/init",()=>{initManageVariableTool(e),initVariablesResource(e,t)},{once:!0})}((0,ct.getMCPByDomain)("variables",{instructions:"Everything related to V4 ( Atomic ) variables.\n# Global variables\n- Create/update/delete global variables\n- Get list of global variables\n- Get details of a global variable\n"}),(0,ct.getMCPByDomain)("canvas")),(0,it.injectIntoTop)({id:"canvas-style-variables-render",component:StyleVariablesRenderer}),(0,it.injectIntoLogic)({id:"variables-import-listener",component:GlobalStylesImportListener})}function hasVariableAssigned(e){return!!(0,ut.isTransformable)(e)&&Z(e.$$type)}var defaultResolver=e=>t=>{const a=String(t);return{$$type:e,value:W.variables()[a]?a:W.findIdByLabel(a)}},pn={globalVariablesLLMResolvers:{"global-color-variable":defaultResolver("global-color-variable"),"global-font-variable":defaultResolver("global-font-variable"),"global-size-variable":defaultResolver("global-size-variable")}}},46400:function(e){e.exports=window.elementorV2.editorCurrentUser},51061:function(e){e.exports=window.elementorV2.editorPanels},55534:function(e){e.exports=window.elementorV2.editorMcp},59618:function(e){e.exports=window.elementorV2.schema},70374:function(e){e.exports=window.elementorV2.editorUi},77394:function(e){e.exports=window.elementorV2.editorControls},79513:function(e){e.exports=window.elementorV2.ui},82148:function(e){e.exports=window.elementorV2.editorCanvas},97557:function(e){e.exports=window.React}},t={};var a=function __webpack_require__(a){var r=t[a];if(void 0!==r)return r.exports;var n=t[a]={exports:{}};return e[a](n,n.exports,__webpack_require__),n.exports}(36714);(window.elementorV2=window.elementorV2||{}).editorVariables=a}(),window.elementorV2.editorVariables?.init?.();
	1	+!function(){"use strict";var e={d:function(t,a){for(var n in a)e.o(a,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:a[n]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{GLOBAL_VARIABLES_URI:function(){return Ft},Utils:function(){return la},getMenuActionsForVariable:function(){return $},hasVariable:function(){return le},init:function(){return aa},registerVariableType:function(){return N},registerVariableTypes:function(){return Kt},service:function(){return C},sizeVariablePropTypeUtil:function(){return Wt}});var a=window.elementorV2.editor,n=window.elementorV2.editorControls,r=window.elementorV2.editorMcp,l=window.elementorV2.editorPanels,o=window.elementorV2.editorProps,i=window.elementorV2.menus,s=window.React,c=window.wp.i18n,u=window.elementorV2.httpClient;const d="elementor/v1/variables",p=e=>e.startsWith("tmp-"),m="elementor-global-variables",b="elementor-global-variables-watermark",v="RW";var g=window.elementorV2.editorV1Adapters,y=window.elementorV2.schema;const E=(0,o.createPropUtils)("global-font-variable",y.z.string()),h=(()=>{const e={};let t;const a=(t,a)=>!(t in e)||e[t].label!==a.label||e[t].value!==a.value||!(e[t]?.deleted||!a?.deleted)||!(!e[t]?.deleted||a?.deleted),n=e=>{if(e)try{(0,g.enqueueFont)(e)}catch{}};return{subscribe:e=>(t=e,()=>{t=()=>{}}),update:r=>{(t=>{let r=!1;for(const[l,o]of Object.entries(t))a(l,o)&&(e[l]=o,o.type===E.key&&n(o.value),r=!0);return r})(r)&&"function"==typeof t&&t({...e})}}})(),f=new class{notifyChange(){window.dispatchEvent(new Event("variables:updated"))}constructor(){this.state={watermark:-1,variables:{}}}load(){return this.state.watermark=parseInt(localStorage.getItem(b)||"-1"),this.state.variables=JSON.parse(localStorage.getItem(m)||"{}"),this.state.variables}fill(e,t){this.state.variables={},e&&Object.keys(e).length&&(this.state.variables=e),this.state.watermark=t,localStorage.setItem(b,this.state.watermark.toString()),localStorage.setItem(m,JSON.stringify(this.state.variables)),this.notifyChange()}add(e,t){this.load(),this.state.variables[e]=t,localStorage.setItem(m,JSON.stringify(this.state.variables)),this.notifyChange()}update(e,t){this.load(),this.state.variables[e]=t,localStorage.setItem(m,JSON.stringify(this.state.variables)),this.notifyChange()}watermark(e){this.state.watermark=e,localStorage.setItem(b,this.state.watermark.toString())}watermarkDiff(e,t){const a=t-this.state.watermark;return v===e?1!==a:"RO"===e&&0!==a}},C={variables:()=>f.load(),findIdByLabel(e){const t=Object.entries(this.variables()).find(([,t])=>t.label===e);if(!t)throw new Error(`Variable with label ${e} not found`);return t[0]},findVariableByLabel(e){return Object.values(this.variables()).find(t=>t.label===e)||null},getWatermark:()=>f.state.watermark,init:()=>C.load(),load:()=>(0,u.httpService)().get(d+"/list").then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variables:t,watermark:a}=e;return f.fill(t,a),h.update(t),t}),create:({type:e,label:t,value:a})=>((e,t,a)=>(0,u.httpService)().post(d+"/create",{type:e,label:t,value:a}))(e,t,a).then(e=>{const{success:t,data:a}=e.data;if(!t){const e=a?.message||(0,c.__)("Unexpected response from server","elementor");throw new Error(e)}return a}).then(e=>{const{variable:t,watermark:a}=e;_(v,a);const{id:n,...r}=t;return f.add(n,r),h.update({[n]:r}),{id:n,variable:r}}),update:(e,{label:t,value:a,type:n})=>((e,t,a,n)=>(0,u.httpService)().put(d+"/update",{id:e,label:t,value:a,type:n}))(e,t,a,n).then(e=>{const{success:t,data:a}=e.data;if(!t){const e=a?.message||(0,c.__)("Unexpected response from server","elementor");throw new Error(e)}return a}).then(e=>{const{variable:t,watermark:a}=e;_(v,a);const{id:n,...r}=t;return f.update(n,r),h.update({[n]:r}),{id:n,variable:r}}),delete:e=>(e=>(0,u.httpService)().post(d+"/delete",{id:e}))(e).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variable:t,watermark:a}=e;_(v,a);const{id:n,...r}=t;return f.update(n,r),h.update({[n]:r}),{id:n,variable:r}}),restore:(e,t,a,n)=>((e,t,a,n)=>{const r={id:e};return t&&(r.label=t),a&&(r.value=a),n&&(r.type=n),(0,u.httpService)().post(d+"/restore",r)})(e,t,a,n).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{variable:t,watermark:a}=e;_(v,a);const{id:n,...r}=t;return f.update(n,r),h.update({[n]:r}),{id:n,variable:r}}),batchSave:(e,t,a)=>{const n=((e,t,a)=>{const n=[];return Object.entries(t).forEach(([t,a])=>{if(p(t))n.push({type:"create",variable:{...a,id:t}});else if(e[t]){const r=e[t],l=r.sync_to_v3!==a.sync_to_v3;r.deleted&&!a.deleted?n.push({type:"restore",id:t,...r.label!==a.label&&{label:a.label},...r.value!==a.value&&{value:a.value}}):a.deleted||r.label===a.label&&r.value===a.value&&r.order===a.order&&r.type===a.type&&!l||n.push({type:"update",id:t,variable:{...r.label!==a.label&&{label:a.label},...r.value!==a.value&&{value:a.value},...r.order!==a.order&&{order:a.order},...r.type!==a.type&&{type:a.type},...l&&{sync_to_v3:a.sync_to_v3}}})}}),a.forEach(e=>{n.push({type:"delete",id:e})}),n.filter(e=>{const a=e.id||e.variable?.id;return a&&!(p(a)&&t[a]?.deleted)})})(e,t,a),r={operations:n,watermark:f.state.watermark};return 0===n.length?Promise.resolve({success:!0,watermark:f.state.watermark,operations:0}):(l=r,(0,u.httpService)().post(d+"/batch",l)).then(e=>{const{success:t,data:a}=e.data;if(!t)throw new Error("Unexpected response from server");return a}).then(e=>{const{results:t,watermark:a}=e;return _(v,a),t&&t.forEach(e=>{const t=e.id;e.variable&&("create"===e.type?f.add(t,e.variable):f.update(t,e.variable),h.update({[t]:e.variable}))}),{success:!0,watermark:a,operations:n.length}});var l}},_=(e,t)=>{f.watermarkDiff(e,t)&&setTimeout(()=>C.load(),500),f.watermark(t)};function w(){return(0,s.useEffect)(()=>{const e=e=>{const t=e.detail?.global_variables;t&&(t.data&&"object"==typeof t.data&&h.update(t.data),C.load())};return window.addEventListener("elementor/global-styles/imported",e),()=>{window.removeEventListener("elementor/global-styles/imported",e)}},[]),null}var T=window.elementorV2.editorCurrentUser,S=window.elementorV2.editorUi,k=window.elementorV2.icons,I=window.elementorV2.ui,P=window.elementorV2.events;const A=({varType:e,controlPath:t,action:a})=>{const{dispatchEvent:n,config:r}=(0,P.getMixpanel)();if(!r?.names?.variables?.[a])return;const l=r.names.variables[a];n?.(l,{location:r?.locations?.variables||"",secondaryLocation:r?.secondaryLocations?.variablesPopover||"",trigger:r?.triggers?.click||"",var_type:e,control_path:t,action_type:l})},x=({action:e,varType:t,controlPath:a})=>{const{dispatchEvent:n,config:r}=(0,P.getMixpanel)();if(!r?.names?.variables?.[e])return;const l=r.names.variables[e],o={location:r?.locations?.variablesManager||"",trigger:r?.triggers?.click||"",action_type:l};t&&(o.var_type=t),a&&(o.style_control_path=a),n?.(l,o)},V=({variableLabel:e,action:t})=>{try{const{dispatchEvent:a,config:n}=(0,P.getMixpanel)();if(!n?.names?.variables?.variableSyncToV3)return;const r=n.names.variables.variableSyncToV3,l="sync"===t;a?.(r,{interaction_type:"click",target_type:e,target_name:l?"sync_to_v3":"unsync_to_v3",interaction_result:l?"var_is_synced_to_V3":"var_is_unsynced_from_V3",target_location:"widget_panel",location_l1:"var_manager",interaction_description:l?`user_synced_${e}_to_v3`:`user_unsync_${e}_from_v3`})}catch{}},O={MISSING_VARIABLE_NAME:(0,c.__)("Give your variable a name.","elementor"),MISSING_VARIABLE_VALUE:(0,c.__)("Add a value to complete your variable.","elementor"),INVALID_CHARACTERS:(0,c.__)("Use letters, numbers, dashes (-), or underscores (_) for the name.","elementor"),NO_NON_SPECIAL_CHARACTER:(0,c.__)("Names have to include at least one non-special character.","elementor"),VARIABLE_LABEL_MAX_LENGTH:(0,c.__)("Keep names up to 50 characters.","elementor"),DUPLICATED_LABEL:(0,c.__)("This variable name already exists. Please choose a unique name.","elementor"),UNEXPECTED_ERROR:(0,c.__)("There was a glitch. Try saving your variable again.","elementor"),BATCH:{DUPLICATED_LABELS:(e,t)=>(0,c.sprintf)((0,c.__)("We found %1$d duplicated %2$s.","elementor"),e,t),UNEXPECTED_ERROR:(0,c.__)("There was a glitch.","elementor"),DUPLICATED_LABEL_ACTION:(0,c.__)("Take me there","elementor"),DUPLICATED_LABEL_ACTION_MESSAGE:(0,c.__)("Please rename the variables.","elementor"),UNEXPECTED_ERROR_ACTION_MESSAGE:(0,c.__)("Try saving your variables again.","elementor")}},D=e=>{if("duplicated_label"===e?.response?.data?.code)return{field:"label",message:O.DUPLICATED_LABEL};if("batch_duplicated_label"===e?.response?.data?.code){const t=e?.response?.data?.data??{},a=Object.keys(t).length,n=1===a?"name":"names",r=Object.keys(t);return{field:"label",message:O.BATCH.DUPLICATED_LABELS(a,n),severity:"error",IconComponent:k.AlertTriangleFilledIcon,action:{label:O.BATCH.DUPLICATED_LABEL_ACTION,message:O.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,data:{duplicatedIds:r}}}}return"batch_operation_failed"===e?.response?.data?.code?{field:"label",message:O.BATCH.UNEXPECTED_ERROR,severity:"secondary",IconComponent:k.InfoCircleFilledIcon,action:{message:O.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE}}:void 0},L=e=>39<e.length?O.VARIABLE_LABEL_MAX_LENGTH:"",R=e=>e.trim()?"":O.MISSING_VARIABLE_VALUE;var B=window.elementorV2.editorCanvas;const U=(0,I.styled)(I.UnstableColorIndicator)(({theme:e})=>({borderRadius:e.shape.borderRadius/2+"px",marginRight:e.spacing(.25)})),z=(0,o.createPropUtils)("global-color-variable",y.z.string()),F=(e,t)=>{let a=e,n="";if(t&&(n=t.value),t&&!t.deleted&&(a=t.label),!a.trim())return null;const r=`--${a}`;return n.trim()?`var(${r}, ${n})`:`var(${r})`},M=(0,B.createTransformer)(e=>{const t=C.variables()[e];if(!t)return s.createElement("span",null,(0,c.__)("Missing variable","elementor"));const a=t.type===z.key,n=F(e,t);return s.createElement(I.Stack,{direction:"row",spacing:.5,sx:{paddingInline:"1px"},alignItems:"center"},a&&s.createElement(U,{size:"inherit",value:t.value}),s.createElement(I.Typography,{variant:"caption",overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},n))}),j=(0,B.createTransformer)(e=>{const t=C.variables()[e]||C.findVariableByLabel(e);if(!t)return null;const a=C.findIdByLabel(t.label);return F(a,t)}),{registerVariableType:N,getVariableType:G,getVariableTypes:H,hasVariableType:W}=function(){const e={};return{registerVariableType:({key:t,icon:a,startIcon:n,valueField:r,propTypeUtil:l,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:c,styleTransformer:u,fallbackPropTypeUtil:d,isCompatible:p,emptyState:m,isActive:b=!0,menuActionsFactory:v})=>{const g=t??l.key;p||(p=(e,t)=>"union"===e.kind&&t.type in e.prop_types),e[g]={icon:a,startIcon:n,valueField:r,propTypeUtil:l,variableType:o,defaultValue:i,selectionFilter:s,valueTransformer:c,fallbackPropTypeUtil:d,isCompatible:p,emptyState:m,isActive:b,menuActionsFactory:v},((e,t)=>{B.styleTransformersRegistry.register(e,t??j)})(l.key,u),(e=>{B.stylesInheritanceTransformersRegistry.register(e,M)})(l.key)},getVariableType:t=>e[t],getVariableTypes:()=>e,hasVariableType:t=>t in e&&!!e[t].isActive}}();function $(e,t){const a=G(e);return a?.menuActionsFactory?a.menuActionsFactory(t):[]}const K=({open:e,label:t,closeDialog:a,onConfirm:n})=>s.createElement(S.ConfirmationDialog,{open:e,onClose:a},s.createElement(S.ConfirmationDialog.Title,null,(0,c.__)("Delete this variable?","elementor")),s.createElement(S.ConfirmationDialog.Content,null,s.createElement(S.ConfirmationDialog.ContentText,null,(0,c.__)("All elements using","elementor")," ",s.createElement(I.Typography,{variant:"subtitle2",component:"span",sx:{lineBreak:"anywhere"}},t)," ",(0,c.__)("will keep their current values, but the variable itself will be removed.","elementor"))),s.createElement(S.ConfirmationDialog.Actions,{onClose:a,onConfirm:n})),q=()=>{const{canUser:e,isAdmin:t}=(0,T.useCurrentUserCapabilities)();return{canAssign:()=>e("edit_posts"),canUnlink:()=>e("edit_posts"),canAdd:()=>t,canDelete:()=>t,canEdit:()=>t,canRestore:()=>t,canManageSettings:()=>t}},X=({icon:e,title:t,message:a,onAdd:n,children:r})=>{const l=q().canAdd(),o=l?t:(0,c.__)("There are no variables","elementor"),i=l?a:(0,c.__)("With your current role, you can only connect and detach variables.","elementor");return s.createElement(J,{title:o,message:i,icon:e},r||n&&s.createElement(I.Button,{variant:"outlined",color:"secondary",size:"small",onClick:n},(0,c.__)("Create a variable","elementor")))};function J({title:e,message:t,icon:a,children:n}){return s.createElement(I.Stack,{gap:1,alignItems:"center",justifyContent:"flex-start",height:"100%",color:"text.secondary",sx:{p:2.5,pt:8,pb:5.5}},a,s.createElement(I.Typography,{align:"center",variant:"subtitle2"},e),s.createElement(I.Typography,{align:"center",variant:"caption",maxWidth:"180px"},t),n)}const Y=({searchValue:e,onClear:t,icon:a})=>s.createElement(I.Stack,{gap:1,alignItems:"center",justifyContent:"center",p:2.5,color:"text.secondary",sx:{pb:3.5,pt:8}},a,s.createElement(I.Typography,{align:"center",variant:"subtitle2"},(0,c.__)("Sorry, nothing matched","elementor"),s.createElement("br",null),"“",e,"”."),s.createElement(I.Typography,{align:"center",variant:"caption",sx:{display:"flex",flexDirection:"column"}},(0,c.__)("Try something else.","elementor"),s.createElement(I.Link,{color:"text.secondary",variant:"caption",component:"button",onClick:t},(0,c.__)("Clear & try again","elementor")))),Q=(0,s.createContext)(null);function Z({children:e,propTypeKey:t}){return s.createElement(Q.Provider,{value:t},e)}function ee(){const e=(0,s.useContext)(Q);if(null===e)throw new Error("useVariableType must be used within a VariableTypeProvider");return G(e)}function te(e,t){const a=t.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(a))}const ae=e=>Object.entries(e).map(([e,t])=>({key:e,...t})),ne=({key:e,label:t,value:a,order:n,sync_to_v3:r})=>({key:e,label:t,value:a,order:n,sync_to_v3:r}),re=(e=!0)=>{const t=C.variables();return e?t:Object.fromEntries(Object.entries(t).filter(([,e])=>!e.deleted))},le=e=>void 0!==re()[e],oe=e=>{const t=re();return t?.[e]?{...t[e],key:e}:null},ie=e=>{const t=re(!1),a=(e=>{const t=[],a=H(),n=G(e);return Object.entries(a).forEach(([e,a])=>{n.variableType===a.variableType&&t.push(e)}),t})(e);return ae(t).filter(e=>a.includes(e.type)).map(ne)},se=({id:e})=>e,ce=(e,t,a,n)=>C.restore(e,t,a,n).then(se);var ue=window.elementorV2.utils;const de=e=>{const t={...window.ElementorVariablesQuotaConfig??{},...window.ElementorVariablesQuotaConfigExtended??{}},a=void 0===t[e]&&window.elementorPro,n=t[e]||0,r=a||n>0;return{canAdd:()=>r,canEdit:()=>r}},pe=(0,s.forwardRef)(({variableType:e,upgradeUrl:t,trackingData:a},r)=>{const[l,o]=(0,s.useState)(!1);(0,S.useCanvasClickHandler)(l,()=>o(!1));const i=(0,s.useCallback)(()=>{o(e=>(e||(0,n.trackViewPromotion)(a),!e))},[a]);(0,s.useImperativeHandle)(r,()=>({toggle:i}),[i]);const u=(0,c.sprintf)((0,c.__)("%s variables","elementor"),(0,ue.capitalize)(e)),d=(0,c.sprintf)((0,c.__)("Upgrade to continue creating and editing %s variables.","elementor"),e);return s.createElement(S.PromotionPopover,{open:l,title:u,content:d,ctaText:(0,c.__)("Upgrade now","elementor"),ctaUrl:t,onClose:e=>{e.stopPropagation(),o(!1)},onCtaClick:()=>(0,n.trackUpgradePromotionClick)(a)},s.createElement(I.Box,{onClick:e=>{e.stopPropagation(),i()},sx:{cursor:"pointer",display:"inline-flex"}},s.createElement(S.PromotionChip,null)))});function me(){return me=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},me.apply(null,arguments)}const be={target_name:"variables_manager",target_location:"variables_manager",location_l1:"create variable menu"},ve="tiny",ge=({variables:e,onCreate:t,menuState:a})=>{const n=(0,s.useRef)(null),r=H(),l=(0,s.useMemo)(()=>Object.entries(r).filter(([,e])=>!!e.defaultValue).map(([e,t])=>({key:e,propTypeKey:t.propTypeUtil.key,variableType:t.variableType,defaultValue:t.defaultValue||"",icon:t.icon})),[r]);return s.createElement(s.Fragment,null,s.createElement(I.IconButton,me({},(0,I.bindTrigger)(a),{ref:n,size:ve,"aria-label":(0,c.__)("Add variable","elementor")}),s.createElement(k.PlusIcon,{fontSize:ve})),s.createElement(I.Menu,me({disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6}},(0,I.bindMenu)(a),{anchorEl:n.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},"data-testid":"variable-manager-create-menu"}),l.map(n=>s.createElement(ye,{key:n.key,config:n,variables:e,onCreate:t,onClose:a.close}))))},ye=({config:e,variables:t,onCreate:a,onClose:n})=>{const r=(0,s.useRef)(null),l=de(e.propTypeKey),o=(0,ue.capitalize)(e.variableType),i=!l.canAdd();return s.createElement(I.MenuItem,{onClick:()=>{if(i)return void r.current?.toggle();const l=Ee(t,e.variableType);a(e.key,l,e.defaultValue),x({action:"add",varType:e.variableType}),n()},sx:{gap:1.5,cursor:"pointer"}},(0,s.createElement)(e.icon,{fontSize:ve,color:i?"disabled":"action"}),s.createElement(I.Typography,{variant:"caption",color:i?"text.disabled":"text.primary"},o),i&&s.createElement(pe,{variableType:e.variableType,upgradeUrl:`https://go.elementor.com/go-pro-manager-${e.variableType}-variable/`,ref:r,trackingData:be}))},Ee=(e,t)=>{const a=new RegExp(`^${t}-(\\d+)$`,"i"),n=new Set;Object.values(e).forEach(e=>{const t=e.label.match(a);t&&n.add(parseInt(t[1],10))});let r=1;for(;n.has(r);)r++;return`${t}-${r}`},he=({children:e,isHeader:t,width:a,maxWidth:n,align:r,noPadding:l,sx:o})=>{const i={maxWidth:n??150,cursor:"initial",typography:"caption",...t&&{color:"text.primary",fontWeight:"bold"},...t&&!l&&{padding:"10px 16px"},...a&&{width:a},...o};return s.createElement(I.TableCell,{size:"small",padding:l?"none":void 0,align:r,sx:i},e)};function fe(){return fe=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},fe.apply(null,arguments)}function Ce(e,t){return e.trim().toLowerCase()===t.trim().toLowerCase()}const _e=e=>{const[t,a]=(0,s.useState)(e??{value:"",message:""});return{labelFieldError:t,setLabelFieldError:a}},we=({value:e,error:t,onChange:a,id:n,onErrorChange:r,size:l="tiny",focusOnShow:o=!1,selectOnShow:i=!1,showWarningInfotip:c=!1,variables:u,onKeyDown:d})=>{const[p,m]=(0,s.useState)(e),[b,v]=(0,s.useState)(""),g=(0,s.useRef)(null);let y=b;Ce(p,t?.value??"")&&t?.message&&(y=t.message);const E=y?"":L(p),h=s.createElement(I.TextField,{ref:g,id:n,size:l,fullWidth:!0,value:p,error:!!y,onChange:e=>(e=>{m(e);const n=((e,t)=>e.trim()?/^[a-zA-Z0-9_-]+$/.test(e)?/[a-zA-Z0-9]/.test(e)?50<e.length?O.VARIABLE_LABEL_MAX_LENGTH:Object.values(t??{}).some(t=>t.label===e)?O.DUPLICATED_LABEL:"":O.NO_NON_SPECIAL_CHARACTER:O.INVALID_CHARACTERS:O.MISSING_VARIABLE_NAME)(e,u);v(n),r?.(n),a(Ce(e,t?.value??"")||n?"":e)})(e.target.value),inputProps:{maxLength:50,...i&&{onFocus:e=>e.target.select()},"aria-label":"Name",onKeyDown:d},autoFocus:o});if(c){const e=Math.max(240,g.current?.getBoundingClientRect().width??240);return s.createElement(S.WarningInfotip,fe({open:Boolean(y||E),text:y||E,placement:"bottom-start",width:e,offset:[0,-15]},E&&{hasError:!1}),h)}return h},Te=s.memo(({initialValue:e,children:t,editableElement:a,onChange:n,prefixElement:r,autoEdit:l=!1,onRowRef:o,onAutoEditComplete:i,gap:c=1,fieldType:u,disabled:d=!1})=>{const[p,m]=(0,s.useState)(e),[b,v]=(0,s.useState)(!1),{labelFieldError:g,setLabelFieldError:y}=_e(),[E,h]=(0,s.useState)(""),f=(0,s.useRef)(null),C=(0,s.useCallback)(()=>{"label"===u&&g?.message||"value"===u&&E||n(p),v(!1)},[p,n,u,g,E]);(0,s.useEffect)(()=>{o?.(f?.current)},[o]),(0,s.useEffect)(()=>{!l||b||d||(v(!0),i?.())},[l,b,i,d]);const _=()=>{d||v(!0)},w=e=>{d||("Enter"===e.key?C():"Escape"===e.key&&v(!1)," "!==e.key||b||(e.preventDefault(),v(!0)))},T=(0,s.useCallback)(e=>{m(e)},[]),S=(0,s.useCallback)(e=>{"label"===u?y({value:p,message:e}):h(e)},[u,p,y,h]);let k;"label"===u?k=g:"value"===u&&(k={value:p,message:E});const P=a({value:p,onChange:T,onValidationChange:S,error:k});return b?s.createElement(I.ClickAwayListener,{onClickAway:C},s.createElement(I.Stack,{ref:f,direction:"row",alignItems:"center",gap:c,onDoubleClick:_,onKeyDown:w,tabIndex:0,role:"button","aria-label":"Double click or press Space to edit"},r,P)):s.createElement(I.Stack,{ref:f,direction:"row",alignItems:"center",gap:c,onDoubleClick:_,onKeyDown:w,tabIndex:d?-1:0,role:"button","aria-label":d?"":"Double click or press Space to edit"},r,t)});function Se(){return Se=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},Se.apply(null,arguments)}const ke=({menuActions:e,disabled:t,itemId:a})=>{const n=(0,I.usePopupState)({variant:"popover"}),r=(0,I.bindTrigger)(n);return s.createElement(s.Fragment,null,s.createElement(I.IconButton,Se({},r,{disabled:t,size:"tiny",onClick:e=>{e.stopPropagation(),r.onClick?.(e)}}),s.createElement(k.DotsVerticalIcon,{fontSize:"tiny"})),s.createElement(I.Menu,Se({disablePortal:!0,MenuListProps:{dense:!0},PaperProps:{elevation:6}},(0,I.bindMenu)(n),{anchorEl:n.anchorEl,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},open:n.isOpen,onClose:n.close}),e.map(e=>s.createElement(I.MenuItem,{key:e.name,onClick:t=>{t.stopPropagation(),e.onClick?.(a),n.close()},sx:{color:e.color,gap:1}},e.icon&&(0,s.createElement)(e.icon,{fontSize:"inherit"})," ",e.name))))};function Ie(){return Ie=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},Ie.apply(null,arguments)}const Pe={target_name:"variables_manager",target_location:"variables_manager"},Ae=e=>{const{row:t,variables:a,handleOnChange:n,autoEditVariableId:r,onAutoEditComplete:l,onFieldError:o,menuActions:i,handleRowRef:c,itemProps:u,showDropIndication:d,triggerProps:p,itemStyle:m,triggerStyle:b,isDragged:v,dropPosition:g,setTriggerRef:y,isSorting:E}=e,h=(0,s.useRef)(null),f=!de(t.type).canEdit(),C=d&&"before"===g,_=d&&"after"===g;return s.createElement(I.TableRow,Ie({},u,{ref:u.ref,selected:v,sx:{...f&&{"& td, & th":{color:"text.disabled"}},...C&&{"& td, & th":{borderTop:"2px solid",borderTopColor:"primary.main"}},..._&&{"& td, & th":{borderBottom:"2px solid",borderBottomColor:"primary.main"}},"&:hover, &:focus-within":{backgroundColor:"action.hover",'& [role="toolbar"], & [draggable]':{opacity:1}},'& [role="toolbar"], & [draggable]':{opacity:0}},style:{...m,...b},onClick:()=>{f&&h.current?.toggle()}}),s.createElement(he,{noPadding:!0,width:10,maxWidth:10},s.createElement(I.IconButton,Ie({size:"small",ref:y},p,{disabled:E,draggable:!0}),s.createElement(k.GripVerticalIcon,{fontSize:"inherit"}))),s.createElement(he,null,s.createElement(Te,{initialValue:t.name,onChange:e=>{e===t.name||f||n({...a,[t.id]:{...a[t.id],label:e}})},prefixElement:(0,s.createElement)(t.icon,{fontSize:"inherit",color:f?"disabled":"inherit"}),editableElement:({value:e,onChange:n,onValidationChange:l,error:i})=>s.createElement(we,{id:"variable-label-"+t.id,size:"tiny",value:e,onChange:n,onErrorChange:e=>{l?.(e),o?.(!!e)},error:i,focusOnShow:!0,selectOnShow:r===t.id,showWarningInfotip:!0,variables:a}),autoEdit:r===t.id&&!f,onRowRef:c(t.id),onAutoEditComplete:r===t.id?l:void 0,fieldType:"label",disabled:f},s.createElement(S.EllipsisWithTooltip,{title:t.name,sx:{border:"4px solid transparent"}},t.name))),s.createElement(he,null,s.createElement(Te,{initialValue:t.value,onChange:e=>{e===t.value||f||n({...a,[t.id]:{...a[t.id],value:e}})},editableElement:({value:e,onChange:r,onValidationChange:l,error:i})=>t.valueField?.({value:e,onChange:r,onPropTypeKeyChange:e=>{f||n({...a,[t.id]:{...a[t.id],type:e}})},propTypeKey:t.type,onValidationChange:e=>{l?.(e),o?.(!!e)},error:i})??s.createElement(s.Fragment,null),onRowRef:c(t.id),gap:.25,fieldType:"value",disabled:f},t.startIcon&&t.startIcon({value:t.value}),s.createElement(S.EllipsisWithTooltip,{title:t.value,sx:{border:"4px solid transparent",lineHeight:"1",pt:.25}},t.value))),s.createElement(he,{align:"right",noPadding:!0,width:16,maxWidth:16,sx:{paddingInlineEnd:1}},s.createElement(I.Stack,{role:"toolbar",direction:"row",justifyContent:"flex-end",alignItems:"center"},f&&s.createElement(pe,{variableType:t.variableType,upgradeUrl:`https://go.elementor.com/renew-license-manager-${t.variableType}-variable`,ref:h,trackingData:Pe}),s.createElement(ke,{menuActions:i(t.id),disabled:E,itemId:t.id}))))};function xe(){return xe=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},xe.apply(null,arguments)}const Ve=({menuActions:e,variables:t,onChange:a,autoEditVariableId:n,onAutoEditComplete:r,onFieldError:l})=>{const o=(0,s.useRef)(null),i=(0,s.useRef)(new Map);(0,s.useEffect)(()=>{if(n&&o.current){const e=i.current.get(n);e&&setTimeout(()=>{e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},100)}},[n]);const u=e=>t=>{t?i.current.set(e,t):i.current.delete(e)},d=Object.keys(t).sort(function(e){return(t,a)=>(e[t]?.order??Number.MAX_SAFE_INTEGER)-(e[a]?.order??Number.MAX_SAFE_INTEGER)}(t)),p=d.map(e=>{const a=t[e],n=G(a.type);return n?{id:e,type:a.type,name:a.label,value:a.value,...n}:null}).filter(Boolean),m={minWidth:250,tableLayout:"fixed"};return s.createElement(I.TableContainer,{ref:o,sx:{overflow:"initial"}},s.createElement(I.Table,{sx:m,"aria-label":"Variables manager list with drag and drop reordering",stickyHeader:!0},s.createElement(I.TableHead,null,s.createElement(I.TableRow,null,s.createElement(he,{isHeader:!0,noPadding:!0,width:10,maxWidth:10}),s.createElement(he,{isHeader:!0},(0,c.__)("Name","elementor")),s.createElement(he,{isHeader:!0},(0,c.__)("Value","elementor")),s.createElement(he,{isHeader:!0,noPadding:!0,width:16,maxWidth:16}))),s.createElement(I.TableBody,null,s.createElement(I.UnstableSortableProvider,{value:d,onChange:e=>{const n={...t};e.forEach((e,t)=>{const a=n[e];a&&(n[e]=Object.assign({},a,{order:t+1}))}),a(n)},variant:"static",restrictAxis:!0,dragOverlay:({children:e,...t})=>s.createElement(I.Table,xe({sx:m},t),s.createElement(I.TableBody,null,e))},p.map(o=>s.createElement(I.UnstableSortableItem,{key:o.id,id:o.id,render:i=>s.createElement(Ae,xe({},i,{row:o,variables:t,handleOnChange:a,autoEditVariableId:n,onAutoEditComplete:r,onFieldError:l,menuActions:e,handleRowRef:u}))}))))))},Oe="variables-manager",De="stop-sync-variable",{panel:Le,usePanelActions:Re}=(0,l.__createPanel)({id:Oe,component:function(){const{close:e}=Re(),{open:t,close:a,isOpen:n}=(0,S.useDialog)(),[r]=(0,T.useSuppressedMessage)(De),o=(0,I.usePopupState)({variant:"popover"}),{variables:i,isDirty:u,searchValue:d,isSaveDisabled:p,handleOnChange:m,createVariable:b,handleDeleteVariable:v,handleStartSync:g,handleStopSync:y,handleSave:E,isSaving:h,handleSearch:f,setIsSaving:_,setIsSaveDisabled:w}=(()=>{const[e,t]=(0,s.useState)(()=>re(!1)),[a,n]=(0,s.useState)([]),[r,l]=(0,s.useState)(!1),[o,i]=(0,s.useState)(!1),[c,u]=(0,s.useState)(!1),[d,p]=(0,s.useState)(""),m=(0,s.useCallback)(a=>{t({...e,...a}),i(!0)},[e]),b=(0,s.useCallback)((e,a,n)=>{const r=`tmp-${Date.now().toString(36)}-${Math.random().toString(36).substring(2,8)}`,l={id:r,label:a.trim(),value:n.trim(),type:e};return t(e=>({...e,[r]:l})),i(!0),r},[]),v=(0,s.useCallback)(e=>{n(t=>[...t,e]),t(t=>({...t,[e]:{...t[e],deleted:!0}})),i(!0)},[]),g=(0,s.useCallback)(e=>{t(t=>({...t,[e]:{...t[e],sync_to_v3:!0}})),i(!0)},[]),y=(0,s.useCallback)(e=>{t(t=>({...t,[e]:{...t[e],sync_to_v3:!1}})),i(!0)},[]),E=(0,s.useCallback)(async()=>{const r=re(!1);u(!0);const l=await C.batchSave(r,e,a);if(l.success){await C.load();const e=C.variables();t(e),n([]),i(!1)}return{success:l.success}},[e,a]),h=(0,s.useCallback)(()=>{const t=((e,t)=>{const a={};return e.forEach(e=>(a[e.type]??=[]).push(e)),Object.entries(a).flatMap(([e,a])=>{const n=t[e]?.selectionFilter,r=a.map(ne);return(n?.(r)??r).map(t=>({...t,type:e}))})})(ae(e).filter(e=>!e.deleted),H()),a=te(t,d);return Object.fromEntries(a.map(({key:e,...t})=>[e,t]))},[e,d]);return{variables:h(),deletedVariables:a,isDirty:o,isSaveDisabled:r,handleOnChange:m,createVariable:b,handleDeleteVariable:v,handleStartSync:g,handleStopSync:y,handleSave:E,isSaving:c,handleSearch:e=>{p(e)},searchValue:d,setIsSaving:u,setIsSaveDisabled:l}})(),{autoEditVariableId:P,startAutoEdit:A,handleAutoEditComplete:O}=(()=>{const[e,t]=(0,s.useState)(void 0);return{autoEditVariableId:e,startAutoEdit:(0,s.useCallback)(e=>{t(e)},[]),handleAutoEditComplete:(0,s.useCallback)(()=>{setTimeout(()=>{t(void 0)},100)},[])}})(),{createNavigationCallback:L,resetNavigation:R}=(()=>{const e=(0,s.useRef)(0);return{createNavigationCallback:(0,s.useCallback)((t,a,n)=>()=>{if(!t?.length)return;const r=e.current,l=t[r];if(l){a(l);const o=r+1;o>=t.length?(n(),e.current=0):e.current=o}},[]),resetNavigation:(0,s.useCallback)(()=>{e.current=0},[])}})(),[B,U]=(0,s.useState)(null),[z,F]=(0,s.useState)(null),[M,j]=(0,s.useState)(null);Be(u);const N=(0,s.useCallback)((e,t,a)=>{const n=b(e,t,a);n&&A(n)},[b,A]),W=async()=>{try{j(null),R();const e=await E();return x({action:"saveChanges"}),e}catch(e){const t=D(e),a=t?.action?.data?.duplicatedIds;return t&&"label"===t.field&&(a&&t.action&&(t.action.callback=L(a,A,()=>{w(!1)})),j(t),w(!0),R()),{success:!1,error:t}}finally{_(!1)}},q=(0,s.useCallback)(e=>{v(e),U(null)},[v]),J=(0,s.useCallback)(e=>{y(e);const t=i[e];t&&V({variableLabel:t.label,action:"unsync"})},[y,i]),Q=(0,s.useCallback)(e=>{g(e);const t=i[e];t&&V({variableLabel:t.label,action:"sync"})},[g,i]),Z=(0,s.useCallback)(e=>{r?J(e):F(e)},[r,J]),ee=(0,s.useCallback)(e=>{const t=i[e];return t?[...$(t.type,{variable:t,variableId:e,handlers:{onStartSync:Q,onStopSync:Z}}),{name:(0,c.__)("Delete","elementor"),icon:k.TrashIcon,color:"error.main",onClick:e=>{const t=i[e];if(t){U({id:e,label:t.label});const a=G(t.type);x({action:"delete",varType:a?.variableType})}}}]:[]},[i,Q,Z]),le=Object.keys(i).length>0;return s.createElement(S.ThemeProvider,null,s.createElement(l.Panel,null,s.createElement(l.PanelHeader,{sx:{height:"unset"}},s.createElement(I.Stack,{width:"100%",direction:"column",alignItems:"center"},s.createElement(I.Stack,{p:1,pl:2,width:"100%",direction:"row",alignItems:"center"},s.createElement(I.Stack,{width:"100%",direction:"row",gap:1},s.createElement(l.PanelHeaderTitle,{sx:{display:"flex",alignItems:"center",gap:.5}},s.createElement(k.ColorFilterIcon,{fontSize:"inherit"}),(0,c.__)("Variables Manager","elementor"))),s.createElement(I.Stack,{direction:"row",gap:.5,alignItems:"center"},s.createElement(ge,{onCreate:N,variables:i,menuState:o}),s.createElement(I.CloseButton,{"aria-label":"Close",slotProps:{icon:{fontSize:ve}},onClick:()=>{u?t():e()}}))),s.createElement(I.Stack,{width:"100%",direction:"row",gap:1},s.createElement(S.SearchField,{sx:{display:"flex",flex:1},placeholder:(0,c.__)("Search","elementor"),value:d,onSearch:f})),s.createElement(I.Divider,{sx:{width:"100%"}}))),s.createElement(l.PanelBody,{sx:{display:"flex",flexDirection:"column",height:"100%"}},le&&s.createElement(Ve,{menuActions:ee,variables:i,onChange:m,autoEditVariableId:P,onAutoEditComplete:O,onFieldError:w}),!le&&d&&s.createElement(Y,{searchValue:d,onClear:()=>f(""),icon:s.createElement(k.ColorFilterIcon,{fontSize:"large"})}),!le&&!d&&s.createElement(X,{title:(0,c.__)("Create your first variable","elementor"),message:(0,c.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:s.createElement(k.ColorFilterIcon,{fontSize:"large"}),onAdd:o.open})),s.createElement(l.PanelFooter,null,s.createElement(I.Infotip,{placement:"right",open:!!M,content:M?s.createElement(I.Alert,{severity:M.severity??"error",action:M.action?.label?s.createElement(I.AlertAction,{onClick:M.action.callback},M.action.label):void 0,onClose:M.action?.label?void 0:()=>{j(null),w(!1)},icon:M.IconComponent?s.createElement(M.IconComponent,null):s.createElement(k.AlertTriangleFilledIcon,null)},s.createElement(I.AlertTitle,null,M.message),M.action?.message):null,arrow:!1,slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[-10,10]}}]}}},s.createElement(I.Button,{fullWidth:!0,size:"small",color:"global",variant:"contained",disabled:p||!u||h,onClick:W,loading:h},(0,c.__)("Save changes","elementor"))))),B&&s.createElement(K,{open:!0,label:B.label,onConfirm:()=>q(B.id),closeDialog:()=>U(null)}),z&&s.createElement(Ue,{open:!0,onClose:()=>F(null),onConfirm:()=>{J(z),F(null)}}),n&&s.createElement(S.SaveChangesDialog,null,s.createElement(S.SaveChangesDialog.Title,{onClose:a},(0,c.__)("You have unsaved changes","elementor")),s.createElement(S.SaveChangesDialog.Content,null,s.createElement(S.SaveChangesDialog.ContentText,null,(0,c.__)("To avoid losing your updates, save your changes before leaving.","elementor"))),s.createElement(S.SaveChangesDialog.Actions,{actions:{discard:{label:(0,c.__)("Discard","elementor"),action:()=>{a(),e()}},confirm:{label:(0,c.__)("Save","elementor"),action:async()=>{const t=await W();a(),t?.success&&e()}}}})))},allowedEditModes:["edit",Oe],onOpen:()=>{(0,g.changeEditMode)(Oe)},onClose:async()=>{(0,g.changeEditMode)("edit")},isOpenPreviousElement:!0}),Be=e=>{(0,s.useEffect)(()=>{const t=t=>{e&&t.preventDefault()};return window.addEventListener("beforeunload",t),()=>{window.removeEventListener("beforeunload",t)}},[e])},Ue=({open:e,onClose:t,onConfirm:a})=>{const[,n]=(0,T.useSuppressedMessage)(De);return s.createElement(S.ConfirmationDialog,{open:e,onClose:t},s.createElement(S.ConfirmationDialog.Title,{icon:k.ColorFilterIcon,iconColor:"primary"},(0,c.__)("Stop syncing variable color","elementor")),s.createElement(S.ConfirmationDialog.Content,null,s.createElement(S.ConfirmationDialog.ContentText,null,(0,c.__)("This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.","elementor"))),s.createElement(S.ConfirmationDialog.Actions,{onClose:t,onConfirm:a,cancelLabel:(0,c.__)("Cancel","elementor"),confirmLabel:(0,c.__)("Got it","elementor"),color:"primary",onSuppressMessage:n,suppressLabel:(0,c.__)("Don't show again","elementor")}))},ze="elementor/open-variables-manager",Fe="panel/elements/categories";function Me(){const{open:e}=Re(),t=(0,s.useRef)(!1),[a,n]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{a&&(n(!1),e())},[a,e]),(0,s.useEffect)(()=>(0,g.__privateListenTo)((0,g.routeOpenEvent)(Fe),()=>{t.current&&(t.current=!1,n(!0))}),[]),(0,s.useEffect)(()=>{const e=()=>{t.current=!0,(0,g.__privateOpenRoute)(Fe)};return window.addEventListener(ze,e),()=>window.removeEventListener(ze,e)},[]),null}const je="active-panel",Ne="variables-manager",Ge="panel/elements";function He(){const{open:e}=Re(),t=(0,s.useRef)(!1);return(0,s.useEffect)(()=>{if(new URLSearchParams(window.location.search).get(je)===Ne)return(0,g.__privateListenTo)((0,g.routeOpenEvent)(Ge),()=>{t.current||(t.current=!0,requestAnimationFrame(()=>{e()}))})},[e]),null}function We(e,t,a){return()=>{const{fallbackPropTypeUtil:n}=G(t),r=function(e,t){const{valueTransformer:a}=G(t);return a?a(e.value,e.type):e.value}(e,t);a(n.create(r))}}const $e=(0,s.createContext)(null),Ke=({children:e})=>{const[t,a]=(0,s.useState)(null);return s.createElement($e.Provider,{value:t},s.createElement(I.Box,{ref:a},e))},qe=()=>(0,s.useContext)($e),Xe=()=>{const{propTypeUtil:e}=ee(),t=(0,n.useBoundProp)(e);return{...t,setVariableValue:e=>Je(e,t),variableId:t.value??t.placeholder}},Je=(e,t)=>{const a=Ye(t.value),n=Ye(t.placeholder),r=Ye(e);return a||n!==r?t.setValue(e):t.setValue(null)},Ye=e=>(0,o.isTransformable)(e)?e.value:e,Qe=({id:e,label:t,errorMsg:a,noticeMsg:n,children:r})=>s.createElement(I.Grid,{container:!0,gap:.75,alignItems:"center"},s.createElement(I.Grid,{item:!0,xs:12},s.createElement(I.FormLabel,{htmlFor:e,size:"tiny"},t)),s.createElement(I.Grid,{item:!0,xs:12},r,a&&s.createElement(I.FormHelperText,{error:!0},a),n&&s.createElement(I.FormHelperText,null,n))),Ze="tiny",et=({onGoBack:e,onClose:t})=>{const{icon:a,valueField:r,variableType:l,propTypeUtil:o}=ee(),{setVariableValue:i,path:u}=Xe(),{propType:d}=(0,n.useBoundProp)(),p=(()=>{const{value:e}=(0,n.useBoundProp)(),t=W(e?.$$type)&&Boolean(e?.value),a=oe(t?e.value:"");return t?a?a.value:"":e?.value??""})(),[m,b]=(0,s.useState)(p),[v,g]=(0,s.useState)(""),[y,E]=(0,s.useState)(""),[h,f]=(0,s.useState)(""),[_,w]=(0,s.useState)(o.key),{labelFieldError:T,setLabelFieldError:P}=_e(),x=()=>{b(""),g(""),E(""),f(""),t()},V=()=>{var e;(e={value:m,label:v,type:_},C.create(e).then(se)).then(e=>{i(e),x()}).catch(e=>{const t=D(e);if(t&&"label"===t.field)return g(""),void P({value:v,message:t.message});E(O.UNEXPECTED_ERROR)}),A({varType:l,controlPath:u.join("."),action:"save"})},R=""===v.trim()||("string"==typeof m?""===m.trim():!1===Boolean(m))||!!y,B=e=>{"Enter"!==e.key||R||(e.preventDefault(),V())};return s.createElement(S.SectionPopoverBody,{height:"auto"},s.createElement(S.PopoverHeader,{icon:s.createElement(s.Fragment,null,e&&s.createElement(I.IconButton,{size:Ze,"aria-label":(0,c.__)("Go Back","elementor"),onClick:e},s.createElement(k.ArrowLeftIcon,{fontSize:Ze})),s.createElement(a,{fontSize:Ze})),title:(0,c.__)("Create variable","elementor"),onClose:x}),s.createElement(I.Divider,null),s.createElement(n.PopoverContent,{p:2},s.createElement(Qe,{id:"variable-label",label:(0,c.__)("Name","elementor"),errorMsg:T?.message,noticeMsg:L(v)},s.createElement(we,{id:"variable-label",value:v,error:T,onChange:e=>{g(e),E("")},onErrorChange:e=>{P({value:"",message:e})},onKeyDown:B,focusOnShow:!0})),r&&s.createElement(Qe,{errorMsg:h,label:(0,c.__)("Value","elementor")},s.createElement(I.Typography,{variant:"h5",id:"variable-value-wrapper"},s.createElement(r,{value:m,onPropTypeKeyChange:e=>w(e),onChange:e=>{b(e),E(""),f("")},onValidationChange:f,propType:d,onKeyDown:B}))),y&&s.createElement(I.FormHelperText,{error:!0},y)),s.createElement(I.CardActions,{sx:{pt:.5,pb:1}},s.createElement(I.Button,{id:"create-variable-button",size:"small",variant:"contained",disabled:R,onClick:V},(0,c.__)("Create","elementor"))))},tt=({closeDialog:e,onConfirm:t,onSuppressMessage:a})=>{const[n,r]=(0,s.useState)(!1);return s.createElement(I.Dialog,{open:!0,onClose:e,maxWidth:"xs"},s.createElement(I.DialogTitle,{display:"flex",alignItems:"center",gap:1},s.createElement(k.AlertTriangleFilledIcon,{color:"secondary"}),(0,c.__)("Changes to variables go live right away.","elementor")),s.createElement(I.DialogContent,null,s.createElement(I.DialogContentText,{variant:"body2",color:"textPrimary"},(0,c.__)("Don't worry - all other changes you make will wait until you publish your site.","elementor"))),s.createElement(I.DialogActions,{sx:{justifyContent:"space-between",alignItems:"center"}},s.createElement(I.FormControlLabel,{control:s.createElement(I.Checkbox,{checked:n,onChange:e=>r(e.target.checked),size:"small"}),label:s.createElement(I.Typography,{variant:"body2"},(0,c.__)("Don't show me again","elementor"))}),s.createElement("div",null,s.createElement(I.Button,{color:"secondary",onClick:e},(0,c.__)("Keep editing","elementor")),s.createElement(I.Button,{variant:"contained",color:"secondary",onClick:()=>{n&&a?.(),t?.()},sx:{ml:1}},(0,c.__)("Save","elementor")))))},at="tiny",nt=(0,c.__)("Delete variable","elementor"),rt=({onClose:e,onGoBack:t,onSubmit:a,editId:r})=>{const{icon:l,valueField:o,variableType:i,propTypeUtil:u}=ee(),{setVariableValue:d,variableId:p}=Xe(),{propType:m}=(0,n.useBoundProp)(),[b,v]=(0,T.useSuppressedMessage)("edit-confirmation-dialog"),[g,y]=(0,s.useState)(!1),[E,f]=(0,s.useState)(!1),[_,w]=(0,s.useState)(""),[P,A]=(0,s.useState)(""),{labelFieldError:x,setLabelFieldError:V}=_e(),R=oe(r),[B,U]=(0,s.useState)(R?.type??u.key);if(!R)throw new Error(`Global ${i} variable not found`);const z=q(),[F,M]=(0,s.useState)(()=>R.value),[j,N]=(0,s.useState)(()=>R.label);(0,s.useEffect)(()=>(h.update({[r]:{...R,value:F}}),()=>{h.update({[r]:{...R}})}),[r,F,R]);const G=()=>{b?H():f(!0)},H=()=>{const e=B!==R.type;((e,{value:t,label:a,type:n})=>C.update(e,{value:t,label:a,type:n}).then(se))(r,e?{value:F,label:j,type:B}:{value:F,label:j}).then(()=>{W(),a?.()}).catch(e=>{const t=D(e);if(t&&"label"===t.field)return N(""),void V({value:j,message:t.message});w(O.UNEXPECTED_ERROR)})},W=()=>{r===p&&d(r)},$=[];z.canDelete()&&$.push(s.createElement(I.Tooltip,{key:"delete",placement:"top",title:nt},s.createElement(I.IconButton,{size:at,onClick:()=>{y(!0)},"aria-label":nt},s.createElement(k.TrashIcon,{fontSize:at}))));const X=F===R.value&&j===R.label||""===j.trim()||("string"==typeof F?""===F.trim():!1===Boolean(F))||!!_,J=e=>{"Enter"!==e.key||X||(e.preventDefault(),G())};return s.createElement(s.Fragment,null,s.createElement(S.SectionPopoverBody,{height:"auto"},s.createElement(S.PopoverHeader,{title:(0,c.__)("Edit variable","elementor"),onClose:e,icon:s.createElement(s.Fragment,null,t&&s.createElement(I.IconButton,{size:at,"aria-label":(0,c.__)("Go Back","elementor"),onClick:t},s.createElement(k.ArrowLeftIcon,{fontSize:at})),s.createElement(l,{fontSize:at})),actions:$}),s.createElement(I.Divider,null),s.createElement(n.PopoverContent,{p:2},s.createElement(Qe,{id:"variable-label",label:(0,c.__)("Name","elementor"),errorMsg:x?.message,noticeMsg:L(j)},s.createElement(we,{id:"variable-label",value:j,error:x,onChange:e=>{N(e),w("")},onErrorChange:e=>{V({value:"",message:e})},onKeyDown:J,focusOnShow:!0})),o&&s.createElement(Qe,{errorMsg:P,label:(0,c.__)("Value","elementor")},s.createElement(I.Typography,{variant:"h5"},s.createElement(o,{propTypeKey:R.type,onPropTypeKeyChange:e=>U(e),value:F,onChange:e=>{M(e),w(""),A("")},onKeyDown:J,onValidationChange:A,propType:m}))),_&&s.createElement(I.FormHelperText,{error:!0},_)),s.createElement(I.CardActions,{sx:{pt:.5,pb:1}},s.createElement(I.Button,{size:"small",variant:"contained",disabled:X,onClick:G},(0,c.__)("Save","elementor")))),g&&s.createElement(K,{open:!0,label:j,onConfirm:()=>{var e;(e=r,C.delete(e).then(se)).then(()=>{W(),a?.()})},closeDialog:()=>{y(!1)}}),E&&!b&&s.createElement(tt,{closeDialog:()=>{f(!1)},onConfirm:H,onSuppressMessage:v}))},lt=(0,c.__)("Edit variable","elementor"),ot=({item:e,disabled:t=!1})=>{const a=e.onEdit;return s.createElement(s.Fragment,null,s.createElement(I.ListItemIcon,{sx:{color:t?"text.disabled":"inherit"}},e.icon),s.createElement(I.Box,{sx:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:1}},s.createElement(S.EllipsisWithTooltip,{title:e.label||e.value,as:I.Typography,variant:"caption",color:t?"text.disabled":"text.primary",sx:{marginTop:"1px",lineHeight:"2"},maxWidth:"50%"}),e.secondaryText&&s.createElement(S.EllipsisWithTooltip,{title:e.secondaryText,as:I.Typography,variant:"caption",color:t?"text.disabled":"text.tertiary",sx:{marginTop:"1px",lineHeight:"1"},maxWidth:"50%"})),!!a&&!t&&s.createElement(I.Tooltip,{placement:"top",title:lt},s.createElement(I.IconButton,{sx:{mx:1,opacity:"0"},onClick:t=>{t.stopPropagation(),a(e.value)},"aria-label":lt},s.createElement(k.EditIcon,{color:"action",fontSize:"tiny"}))))},it=(0,I.styled)(I.MenuList)(({theme:e,disabled:t})=>({"& > li":{height:32,width:"100%",display:"flex",alignItems:"center"},'& > [role="option"]':{...e.typography.caption,lineHeight:"inherit",padding:e.spacing(.5,1,.5,2),...!t&&{"&:hover, &:focus":{backgroundColor:e.palette.action.hover},cursor:"pointer"},'&[aria-selected="true"]':{backgroundColor:e.palette.action.selected},textOverflow:"ellipsis",position:"absolute",top:0,left:0,"&:hover .MuiIconButton-root, .MuiIconButton-root:focus":{opacity:1}},width:"100%",position:"relative"}));function st(){return st=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},st.apply(null,arguments)}const ct="tiny",ut=(0,c.__)("Create variable","elementor"),dt=(0,c.__)("Variables Manager","elementor"),pt=e=>`https://go.elementor.com/renew-license-panel-${e}-variable`,mt=({closePopover:e,onAdd:t,onEdit:a,onSettings:r,disabled:l=!1})=>{const{icon:o,startIcon:i,variableType:u,propTypeUtil:d,emptyState:p}=ee(),{value:m,setValue:b,path:v}=Xe(),[g,y]=(0,s.useState)(""),{list:E,hasMatches:h,isSourceNotEmpty:f,hasNoCompatibleVariables:C}=((e,t)=>{const a=(o=t,(0,s.useMemo)(()=>ie(o),[o])),r=(e=>{const{selectionFilter:t}=ee(),{propType:a}=(0,n.useBoundProp)();return t?t(e,a):e})(a),l=te(r,e);var o;return{list:l.sort((e,t)=>(e.order??Number.MAX_SAFE_INTEGER)-(t.order??Number.MAX_SAFE_INTEGER)),hasMatches:l.length>0,isSourceNotEmpty:r.length>0,hasNoCompatibleVariables:a.length>0&&0===r.length}})(g,d.key),_=[];if(t&&_.push(s.createElement(I.Tooltip,{key:"add",placement:"top",title:ut},s.createElement("span",null,s.createElement(I.IconButton,{id:"add-variable-button",size:ct,onClick:()=>{t?.(),A({varType:u,controlPath:v.join("."),action:"add"})},"aria-label":ut,disabled:l},s.createElement(k.PlusIcon,{fontSize:ct}))))),r){const e=()=>{r(),x({action:"openManager",varType:u,controlPath:v.join(".")})};_.push(s.createElement(I.Tooltip,{key:"settings",placement:"top",title:dt},s.createElement(I.IconButton,{id:"variables-manager-button",size:ct,onClick:e,"aria-label":dt},s.createElement(k.SettingsIcon,{fontSize:ct}))))}const w=i||(()=>s.createElement(o,{fontSize:ct})),T=E.map(({value:e,label:t,key:n})=>({type:"item",value:n,label:t,icon:s.createElement(w,{value:e}),secondaryText:e,onEdit:a?()=>a?.(n):void 0}));return(0,s.useEffect)(()=>{l&&(0,n.trackViewPromotion)({target_name:"variables_popover",target_location:"widget_panel",location_l1:"variables_list"})},[l]),s.createElement(S.SectionPopoverBody,null,s.createElement(S.PopoverHeader,{title:(0,c.__)("Variables","elementor"),icon:s.createElement(k.ColorFilterIcon,{fontSize:ct}),onClose:e,actions:_}),f&&s.createElement(S.SearchField,{value:g,onSearch:e=>{y(e)},placeholder:(0,c.__)("Search","elementor")}),s.createElement(I.Divider,null),f&&h&&s.createElement(s.Fragment,null,s.createElement(S.PopoverMenuList,{items:T,onSelect:l?()=>{}:t=>{b(t),A({varType:u,controlPath:v.join("."),action:"connect"}),e()},onClose:()=>{},selectedValue:m,"data-testid":`${u}-variables-list`,menuListTemplate:e=>s.createElement(it,st({},e,{disabled:l})),menuItemContentTemplate:e=>s.createElement(ot,{item:e,disabled:l})}),l&&s.createElement(S.PromotionAlert,{message:(0,c.sprintf)((0,c.__)("Upgrade to continue creating and editing %s variables.","elementor"),u),upgradeUrl:pt(u),onCtaClick:()=>(0,n.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})),!h&&f&&s.createElement(Y,{searchValue:g,onClear:()=>{y("")},icon:s.createElement(o,{fontSize:"large"})}),l&&!f&&s.createElement(X,{title:(0,c.sprintf)((0,c.__)("No %s variables yet","elementor"),u),message:(0,c.sprintf)((0,c.__)("Upgrade to create %s variables and maintain consistent element sizing.","elementor"),u),icon:s.createElement(o,{fontSize:"large"})},p),!f&&!C&&!l&&s.createElement(X,{title:(0,c.sprintf)((0,c.__)("Create your first %s variable","elementor"),u),message:(0,c.__)("Variables are saved attributes that you can apply anywhere on your site.","elementor"),icon:s.createElement(o,{fontSize:"large"}),onAdd:t}),C&&!l&&s.createElement(X,{title:(0,c.__)("No compatible variables","elementor"),message:(0,c.__)("Looks like none of your variables work with this control. Create a new variable to use it here.","elementor"),icon:s.createElement(o,{fontSize:"large"}),onAdd:t}))},bt="list",vt="edit",gt=({closePopover:e,propTypeKey:t,selectedVariable:a})=>{const[n,r]=(0,s.useState)(bt),[l,o]=(0,s.useState)(""),{open:i}=Re(),c=(0,g.isExperimentActive)("e_variables_manager")?()=>{i()}:void 0;return s.createElement(Z,{propTypeKey:t},s.createElement(Ke,null,function(e){const t=q(),a=de(e.propTypeKey),n={onClose:()=>{e.closePopover()},onGoBack:()=>{e.setCurrentView(bt)}};t.canAdd()&&(n.onAdd=()=>{e.setCurrentView("add")}),t.canEdit()&&(n.onEdit=t=>{e.setEditId(t),e.setCurrentView(vt)}),t.canManageSettings()&&e.onSettings&&(n.onSettings=()=>{e.closePopover(),e.onSettings?.()});return bt===e.currentView?s.createElement(mt,{closePopover:n.onClose,onAdd:n.onAdd,onEdit:n.onEdit,onSettings:n.onSettings,disabled:!a.canAdd()}):"add"===e.currentView?s.createElement(et,{onGoBack:n.onGoBack,onClose:n.onClose}):vt===e.currentView?s.createElement(rt,{editId:e.editId,onGoBack:n.onGoBack,onClose:n.onClose,onSubmit:()=>{e?.selectedVariable?.key===e.editId?n.onClose():n.onGoBack?.()}}):null}({propTypeKey:t,currentView:n,selectedVariable:a,editId:l,setEditId:o,setCurrentView:r,closePopover:e,onSettings:c})))};function yt(){return yt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},yt.apply(null,arguments)}const Et="tiny",ht=(0,c.__)("Unlink variable","elementor"),ft=({startIcon:e,label:t,onUnlink:a,...n})=>{const r=[];return a&&r.push(s.createElement(I.Tooltip,{key:"unlink",title:ht,placement:"bottom"},s.createElement(I.IconButton,{size:Et,onClick:a,"aria-label":ht},s.createElement(k.DetachIcon,{fontSize:Et})))),s.createElement(I.Tooltip,{title:t,placement:"top"},s.createElement(I.UnstableTag,yt({fullWidth:!0,showActionsOnHover:!0,startIcon:s.createElement(I.Stack,{gap:.5,direction:"row",alignItems:"center"},e),label:s.createElement(I.Box,{sx:{display:"inline-grid",minWidth:0}},s.createElement(I.Typography,{sx:{lineHeight:1.34},variant:"caption",noWrap:!0},t)),actions:r},n)))};function Ct(){return Ct=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},Ct.apply(null,arguments)}const _t=({variable:e,propTypeKey:t})=>{const{startIcon:a,propTypeUtil:r}=G(t),{setValue:l}=(0,n.useBoundProp)(),o=(0,s.useRef)(null),i=(0,s.useId)(),c=(0,I.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${i}`}),u=We(e,t,l),d=a||(()=>null);return s.createElement(I.Box,{ref:o},s.createElement(ft,Ct({label:e.label,startIcon:s.createElement(s.Fragment,null,s.createElement(k.ColorFilterIcon,{fontSize:Et}),s.createElement(d,{value:e.value})),onUnlink:u},(0,I.bindTrigger)(c))),s.createElement(I.Popover,Ct({disableScrollLock:!0,anchorEl:o.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,I.bindPopover)(c)),s.createElement(gt,{selectedVariable:e,closePopover:c.close,propTypeKey:r.key})))},wt=({variableId:e,onClose:t,onSubmit:a})=>{const{icon:r,valueField:l,variableType:o,propTypeUtil:i}=ee(),{setVariableValue:u}=Xe(),{propType:d}=(0,n.useBoundProp)(),p=oe(e);if(!p)throw new Error(`Global ${o} variable not found`);const[m,b]=(0,s.useState)(""),[v,g]=(0,s.useState)(""),[y,E]=(0,s.useState)(p.label),[h,f]=(0,s.useState)(p.value),[C,_]=(0,s.useState)(p?.type??i.key),{labelFieldError:w,setLabelFieldError:T}=_e({value:p.label,message:O.DUPLICATED_LABEL}),k=()=>{(C!==p.type?ce(e,y,h,C):ce(e,y,h)).then(()=>{u(e),a?.()}).catch(e=>{const t=D(e);if(t&&"label"===t.field)return E(""),void T({value:y,message:t.message});b(O.UNEXPECTED_ERROR)})},P=h===p.value&&y===p.label||""===y.trim()||("string"==typeof h?""===h.trim():!1===Boolean(h))||!!m,A=e=>{"Enter"!==e.key||P||(e.preventDefault(),k())};return s.createElement(Ke,null,s.createElement(S.SectionPopoverBody,{height:"auto"},s.createElement(S.PopoverHeader,{icon:s.createElement(r,{fontSize:"tiny"}),title:(0,c.__)("Restore variable","elementor"),onClose:t}),s.createElement(I.Divider,null),s.createElement(n.PopoverContent,{p:2},s.createElement(Qe,{id:"variable-label",label:(0,c.__)("Name","elementor"),errorMsg:w?.message,noticeMsg:L(y)},s.createElement(we,{id:"variable-label",value:y,error:w,onChange:e=>{E(e),b("")},onErrorChange:e=>{T({value:"",message:e})},onKeyDown:A,focusOnShow:!0})),l&&s.createElement(Qe,{errorMsg:v,label:(0,c.__)("Value","elementor")},s.createElement(I.Typography,{variant:"h5"},s.createElement(l,{propTypeKey:C,onPropTypeKeyChange:e=>_(e),value:h,onChange:e=>{f(e),b(""),g("")},onValidationChange:g,propType:d,onKeyDown:A}))),m&&s.createElement(I.FormHelperText,{error:!0},m)),s.createElement(I.CardActions,{sx:{pt:.5,pb:1}},s.createElement(I.Button,{size:"small",variant:"contained",disabled:P,onClick:k},(0,c.__)("Restore","elementor")))))},Tt=({onClose:e,onUnlink:t,onRestore:a,label:n})=>s.createElement(I.ClickAwayListener,{onClickAway:e},s.createElement(I.Alert,{variant:"standard",severity:"warning",onClose:e,action:s.createElement(s.Fragment,null,t&&s.createElement(I.AlertAction,{variant:"contained",onClick:t},(0,c.__)("Unlink","elementor")),a&&s.createElement(I.AlertAction,{variant:"outlined",onClick:a},(0,c.__)("Restore","elementor"))),sx:{maxWidth:300}},s.createElement(I.AlertTitle,null,(0,c.__)("Deleted variable","elementor")),s.createElement(I.Typography,{variant:"body2",color:"textPrimary"},(0,c.__)("The variable","elementor")," '",s.createElement(I.Typography,{variant:"body2",component:"span",sx:{lineBreak:"anywhere"}},n),"' ",(0,c.__)("has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.","elementor"))));function St(){return St=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},St.apply(null,arguments)}const kt=s.forwardRef(({label:e,suffix:t,onClick:a,icon:n,...r},l)=>{const o=t?`${e} (${t})`:e;return s.createElement(I.Chip,St({ref:l,size:"tiny",color:"warning",shape:"rounded",variant:"standard",onClick:a,icon:s.createElement(k.AlertTriangleFilledIcon,null),label:s.createElement(I.Tooltip,{title:o,placement:"top"},s.createElement(I.Box,{sx:{display:"inline-grid",minWidth:0}},s.createElement(I.Typography,{variant:"caption",noWrap:!0,sx:{lineHeight:1.34}},o))),sx:{height:e=>e.spacing(3.5),borderRadius:e=>e.spacing(1),justifyContent:"flex-start",width:"100%"}},r))});function It(){return It=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},It.apply(null,arguments)}kt.displayName="WarningVariableTag";const Pt=({variable:e,propTypeKey:t})=>{const{propTypeUtil:a}=G(t),r=(0,n.useBoundProp)(),l=q(),[o,i]=(0,s.useState)(!1),u=()=>i(!1),d=(0,s.useRef)(null),p=(0,s.useId)(),m=(0,I.usePopupState)({variant:"popover",popupId:`elementor-variables-restore-${p}`}),b={};return l.canUnlink()&&(b.onUnlink=We(e,t,r.setValue)),l.canRestore()&&(b.onRestore=()=>{e.key&&ce(e.key).then(e=>{Je(a.create(e),r),u()}).catch(()=>{u(),m.setAnchorEl(d.current),m.open()})}),s.createElement(s.Fragment,null,s.createElement(I.Box,{ref:d},o&&s.createElement(I.Backdrop,{open:!0,onClick:u,invisible:!0}),s.createElement(I.Infotip,{color:"warning",placement:"right-start",open:o,disableHoverListener:!0,onClose:u,content:s.createElement(Tt,{onClose:u,onUnlink:b.onUnlink,onRestore:b.onRestore,label:e.label}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},s.createElement(kt,{label:e.label,onClick:()=>i(e=>!e),suffix:(0,c.__)("deleted","elementor")})),s.createElement(I.Popover,It({disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,I.bindPopover)(m)),s.createElement(Z,{propTypeKey:t},s.createElement(wt,{variableId:e.key??"",onClose:m.close,onSubmit:()=>{m.close()}})))))},At={title:(0,c.__)("Variable has changed","elementor"),message:(0,c.__)("This variable is no longer compatible with this property. You can clear it or select a different one.","elementor"),buttons:{clear:(0,c.__)("Clear","elementor"),select:(0,c.__)("Select variable","elementor")}},xt=({onClose:e,onClear:t,triggerSelect:a})=>s.createElement(I.ClickAwayListener,{onClickAway:e},s.createElement(I.Alert,{variant:"standard",severity:"warning",onClose:e,action:s.createElement(s.Fragment,null,t&&s.createElement(I.AlertAction,{variant:"contained",onClick:t},At.buttons.clear),a&&s.createElement(I.AlertAction,{variant:"outlined",onClick:a},At.buttons.select)),sx:{maxWidth:300}},s.createElement(I.AlertTitle,null,At.title),s.createElement(I.Typography,{variant:"body2",color:"textPrimary"},At.message)));function Vt(){return Vt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},Vt.apply(null,arguments)}const Ot=({variable:e})=>{const{setValue:t,value:a}=(0,n.useBoundProp)(),r=(0,s.useRef)(null),l=(0,s.useId)(),o=(0,I.usePopupState)({variant:"popover",popupId:`elementor-variables-list-${l}`}),[i,u]=(0,s.useState)(!1),d=()=>u(!1),p=!!a;return s.createElement(I.Box,{ref:r},i&&s.createElement(I.Backdrop,{open:!0,onClick:d,invisible:!0}),s.createElement(I.Infotip,{color:"warning",placement:"right-start",open:i,disableHoverListener:!0,onClose:d,content:s.createElement(xt,{onClose:d,onClear:p?()=>{d(),t(null)}:void 0,triggerSelect:()=>{d(),o.setAnchorEl(r.current),o.open()}}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},s.createElement(kt,{label:e.label,onClick:()=>u(e=>!e),suffix:(0,c.__)("changed","elementor")})),s.createElement(I.Popover,Vt({disableScrollLock:!0,anchorEl:r.current,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,I.bindPopover)(o)),s.createElement(gt,{selectedVariable:e,closePopover:o.close,propTypeKey:e.type})))},Dt=({onClose:e,onClear:t})=>s.createElement(I.ClickAwayListener,{onClickAway:e},s.createElement(I.Alert,{variant:"standard",severity:"warning",onClose:e,action:s.createElement(s.Fragment,null,t&&s.createElement(I.AlertAction,{variant:"contained",onClick:t},(0,c.__)("Clear","elementor"))),sx:{maxWidth:300}},s.createElement(I.AlertTitle,null,(0,c.__)("This variable is missing","elementor")),s.createElement(I.Typography,{variant:"body2",color:"textPrimary"},(0,c.__)("It may have been deleted. Try clearing this field and select a different value or variable.","elementor")))),Lt=()=>{const{setValue:e}=(0,n.useBoundProp)(),[t,a]=(0,s.useState)(!1),r=()=>a(!1);return s.createElement(s.Fragment,null,t&&s.createElement(I.Backdrop,{open:!0,onClick:r,invisible:!0}),s.createElement(I.Infotip,{color:"warning",placement:"right-start",open:t,disableHoverListener:!0,onClose:r,content:s.createElement(Dt,{onClose:r,onClear:()=>e(null)}),slotProps:{popper:{modifiers:[{name:"offset",options:{offset:[0,24]}}]}}},s.createElement(kt,{label:(0,c.__)("Missing variable","elementor"),onClick:()=>a(e=>!e)})))},Rt=()=>{const e=(0,n.useBoundProp)(),t=e.value??e.placeholder,a=oe(t?.value);if(!a)return s.createElement(Lt,null);const{$$type:r}=t;if(a?.deleted)return s.createElement(Pt,{variable:a,propTypeKey:r});const{isCompatible:l}=G(a.type);return l&&!l(e?.propType,a)?s.createElement(Ot,{variable:a}):s.createElement(_t,{variable:a,propTypeKey:r})},Bt=()=>{const{propType:e,path:t}=(0,n.useBoundProp)(),a=Ut(e);return{visible:Boolean(a),icon:k.ColorFilterIcon,title:(0,c.__)("Variables","elementor"),content:({close:e})=>a?(zt(t,a.variableType),s.createElement(gt,{closePopover:e,propTypeKey:a.propTypeUtil.key})):null}},Ut=e=>{if("union"===e.kind)for(const t of Object.keys(e.prop_types)){const e=G(t);if(e)return e}},zt=(e,t)=>{A({varType:t,controlPath:e.join("."),action:"open"})},Ft="elementor://global-variables",Mt=(e,t)=>{[t,e].forEach(e=>{const{resource:t,sendResourceUpdated:a}=e;t("global-variables",Ft,{description:"List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)"},async()=>{const e={};return Object.entries(C.variables()).forEach(([t,a])=>{a.deleted||(e[t]=a)}),{contents:[{uri:Ft,text:JSON.stringify(e)}]}}),window.addEventListener("variables:updated",()=>{a({uri:Ft})})})},jt=e=>{const{addTool:t}=e;t({name:"manage-global-variable",schema:{action:y.z.enum(["create","update","delete"]).describe("Operation to perform"),id:y.z.string().optional().describe("Variable id (required for update/delete). Get from list-global-variables."),type:y.z.string().optional().describe('Variable type: "global-color-variable" or "global-font-variable" (required for create)'),label:y.z.string().optional().describe("Variable label (required for create/update)"),value:y.z.string().optional().describe("Variable value (required for create/update)")},outputSchema:{status:y.z.enum(["ok"]).describe("Operation status"),message:y.z.string().optional().describe("Error details if status is error")},modelPreferences:{intelligencePriority:.75,speedPriority:.75},requiredResources:[{uri:Ft,description:"Global variables"}],description:'Manages global variables (create/update/delete). Existing variables available in resources.\nCREATE: requires type, label, value. Ensure label is unique.\nUPDATE: requires id, label, value. When renaming: keep existing value. When updating value: keep exact label.\nDELETE: requires id. DESTRUCTIVE - confirm with user first.\n\n# NAMING - IMPORTANT\nthe variables names should ALWAYS be lowercased and dashed spaced. example: "Headline Primary" should be "headline-primary"\n',handler:async e=>{const t=(a=C,{create({type:e,label:t,value:n}){if(!e||!t||!n)throw new Error("Create requires type, label, and value");return a.create({type:e,label:t,value:n})},update({id:e,label:t,value:n}){if(!e||!t||!n)throw new Error("Update requires id, label, and value");return a.update(e,{label:t,value:n})},delete({id:e}){if(!e)throw new Error("delete requires id");return a.delete(e)}});var a;const n=t[e.action];if(n)return await n(e),{status:"ok"};throw new Error(`Unknown action ${e.action}`)},isDestructive:!0})},Nt=({value:e,onChange:t,onValidationChange:a})=>{const[n,r]=(0,s.useState)(e),[l,o]=(0,s.useState)(""),i=(0,s.useRef)(null),c=qe()??i.current;return s.createElement(I.UnstableColorField,{id:"color-variable-field",size:"tiny",fullWidth:!0,value:n,onChange:e=>{r(e);const n=R(e);o(n),a?.(n),t(n?"":e)},error:l||void 0,slotProps:{colorPicker:{anchorEl:c,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-10},slotProps:{colorIndicator:{size:"inherit",sx:{borderRadius:.5}}}}}})};function Gt(){return Gt=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},Gt.apply(null,arguments)}const Ht=({value:e,onChange:t,onValidationChange:a})=>{const[r,l]=(0,s.useState)(e),o=(0,s.useRef)(null),i=qe()??o.current,u=(0,I.usePopupState)({variant:"popover"}),d=(0,n.useFontFamilies)(),p=(0,S.useSectionWidth)(),m=s.useMemo(()=>d.map(({label:e,fonts:t})=>({label:e,items:t})),[d]),b=(0,s.useId)();return s.createElement(s.Fragment,null,s.createElement(I.UnstableTag,Gt({id:b,variant:"outlined",label:r,endIcon:s.createElement(k.ChevronDownIcon,{fontSize:"tiny"})},(0,I.bindTrigger)(u),{fullWidth:!0})),s.createElement(I.Popover,Gt({disablePortal:!0,disableScrollLock:!0,anchorEl:i,anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:-28}},(0,I.bindPopover)(u)),s.createElement(n.ItemSelector,{id:"font-family-variables-selector",itemsList:m,selectedItem:r,onItemChange:e=>{(e=>{l(e);const n=R(e);a?.(n),t(n?"":e)})(e),u.close()},onClose:u.close,sectionWidth:p,title:(0,c.__)("Font family","elementor"),itemStyle:e=>({fontFamily:e.value}),onDebounce:n.enqueueFont,icon:k.TextIcon})))},Wt=(0,o.createPropUtils)("global-size-variable",y.z.string()),$t=(0,B.createTransformer)(e=>null);function Kt(){N({key:z.key,valueField:Nt,icon:k.BrushIcon,propTypeUtil:z,fallbackPropTypeUtil:o.colorPropTypeUtil,variableType:"color",startIcon:({value:e})=>s.createElement(U,{size:"inherit",component:"span",value:e}),defaultValue:"#ffffff",menuActionsFactory:({variable:e,variableId:t,handlers:a})=>{const n=[];return e.sync_to_v3?n.push({name:(0,c.__)("Stop syncing to Global Colors","elementor"),icon:k.RefreshOffIcon,color:"text.primary",onClick:()=>a.onStopSync(t)}):n.push({name:(0,c.__)("Sync to Global Colors","elementor"),icon:k.RefreshIcon,color:"text.primary",onClick:()=>a.onStartSync(t)}),n}}),N({key:E.key,valueField:Ht,icon:k.TextIcon,propTypeUtil:E,fallbackPropTypeUtil:o.stringPropTypeUtil,variableType:"font",defaultValue:"Roboto"});const e={isActive:!1,icon:k.ExpandDiagonalIcon,propTypeUtil:Wt,fallbackPropTypeUtil:o.sizePropTypeUtil,styleTransformer:$t,variableType:"size",selectionFilter:()=>[],emptyState:s.createElement(S.CtaButton,{size:"small",href:"https://go.elementor.com/go-pro-panel-size-variable/",onClick:()=>(0,n.trackUpgradePromotionClick)({target_name:"variables_popover",location_l1:"variables_list"})})};N({...e,key:Wt.key,defaultValue:"0px"}),N({...e,key:"global-custom-size-variable"})}const qt=":root";function Xt(){const e=(0,g.__privateUseListenTo)((0,g.commandEndEvent)("editor/documents/attach-preview"),()=>(0,g.getCanvasIframeDocument)()?.head),t=function(){const[e,t]=(0,s.useState)({});return(0,s.useEffect)(()=>{const e=h.subscribe(t);return()=>{e()}},[]),e}(),a=Object.keys(t).length>0;if(!e||!a)return null;const n=(r=t,Object.entries(r).map(([e,t])=>function(e,t){return`--${t?.deleted?e:t.label}:${t.value};`}(e,t)).join(""));var r;const l=`${qt}{${n}}`;return s.createElement(I.Portal,{container:e},s.createElement("style",{"data-e-style-id":"e-variables",key:l},l))}const Jt=e=>{const t=e?.value?.color?.value;return oe(t||"")},Yt=({value:e})=>{const t=Jt(e);return s.createElement(U,{component:"span",size:"inherit",value:t?.value})},Qt=({value:e})=>{const t=Jt(e);return s.createElement("span",null,t?.label)},Zt=({value:e})=>{const t=Jt(e);return s.createElement(U,{component:"span",size:"inherit",value:t?.value})},ea=e=>!!z.isValid(e),{registerPopoverAction:ta}=i.controlActionsMenu;function aa(){Kt(),(0,n.injectIntoRepeaterItemIcon)({id:"color-variables-background-icon",component:Yt,condition:({value:e})=>ea(o.backgroundColorOverlayPropTypeUtil.extract(e)?.color)}),(0,n.injectIntoRepeaterItemIcon)({id:"color-variables-icon",component:Zt,condition:({value:e})=>ea(o.shadowPropTypeUtil.extract(e)?.color)}),(0,n.injectIntoRepeaterItemLabel)({id:"color-variables-label",component:Qt,condition:({value:e})=>ea(o.backgroundColorOverlayPropTypeUtil.extract(e)?.color)}),(0,n.registerControlReplacement)({component:Rt,condition:({value:e,placeholder:t})=>!!na(e)||!e&&na(t)}),ta({id:"variables",priority:40,useProps:Bt}),C.init().then(()=>{!function(e,t){const{setMCPDescription:a}=e;a("Everything related to V4 ( Atomic ) variables.\n# Global variables\n- Create/update/delete global variables\n- Get list of global variables\n- Get details of a global variable\n"),jt(e),Mt(e,t)}((0,r.getMCPByDomain)("variables"),(0,r.getMCPByDomain)("canvas"))}),(0,a.injectIntoTop)({id:"canvas-style-variables-render",component:Xt}),(0,a.injectIntoLogic)({id:"variables-import-listener",component:w}),(0,a.injectIntoLogic)({id:"variables-open-panel-from-url",component:He}),(0,a.injectIntoLogic)({id:"variables-open-panel-from-event",component:Me}),(0,l.__registerPanel)(Le)}function na(e){return!!(0,o.isTransformable)(e)&&W(e.$$type)}const ra=e=>t=>{const a=String(t);return{$$type:e,value:C.variables()[a]?a:C.findIdByLabel(a)}},la={globalVariablesLLMResolvers:{"global-color-variable":ra("global-color-variable"),"global-font-variable":ra("global-font-variable"),"global-size-variable":ra("global-size-variable")}};(window.elementorV2=window.elementorV2||{}).editorVariables=t}(),window.elementorV2.editorVariables?.init?.();